/* Context explanations sit outside Quran text and never change the action they explain. */
.context-help-button {
  display:inline-grid;
  place-items:center;
  vertical-align:middle;
  flex:none;
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  margin-inline:7px 0;
  padding:0;
  border:2px solid #d1aa63;
  border-radius:50%;
  background:#07565a;
  color:#fff;
  font:700 17px/1 Tahoma,Arial,sans-serif;
  box-shadow:0 1px 5px #00182088;
  cursor:pointer;
  position:relative;
  z-index:1;
}
.context-help-button:hover { background:#116e67; }
.context-help-button:focus-visible,
.context-help-dialog button:focus-visible { outline:3px solid #e9b74e; outline-offset:3px; }
.context-help-dialog {
  box-sizing:border-box;
  width:min(420px,calc(100vw - 24px));
  max-height:min(80vh,640px);
  overflow:auto;
  padding:22px;
  border:2px solid #cb9c55;
  border-radius:16px;
  background:#fff9ed;
  color:#17383b;
  box-shadow:0 15px 55px #001a25aa;
  font:16px/1.85 Tahoma,Arial,sans-serif;
  text-align:right;
  direction:rtl;
  z-index:2000;
}
.context-help-dialog::backdrop { background:#031b2ab3; }
.context-help-dialog h2 { margin:0 0 10px; color:#144951; font-size:20px; }
.context-help-dialog p { margin:0; }
.context-help-dialog button {
  min-height:44px;
  margin-top:16px;
  padding:7px 18px;
  border:1px solid #b18b4a;
  border-radius:10px;
  background:#07565a;
  color:#fff;
  font:inherit;
  cursor:pointer;
}
/* Do not insert a help control into the tightly gridded lookup form or Quran image. */
.topbar > .context-help-button {
  position:absolute;
  left:4px;
  bottom:3px;
  margin:0;
}
#post-comments-title + .context-help-button { margin-inline:7px auto; }
@media (max-width:600px) {
  .topbar > .context-help-button { left:3px; bottom:0; }
}