/* Quran ayah search — the second search box and its typeahead dropdown.
   Kept in its own file so the reader's own style.css stays as it was. */

.quran-seek { position: relative; }

.quran-seek .qq-label {
  font: 400 11px/1 'Amiri', serif;
  letter-spacing: .04em;
  color: var(--bind-soft, #7d6f58);
  margin-bottom: 7px;
  display: block;
}

#qq {
  width: 100%;
  padding: 9px 33px 9px 30px;
  font: 400 15px/1.6 'Amiri', serif;
  color: #f4e9d2;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--bind-3, #3b2f20);
  border-radius: 3px;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

#qq::placeholder { color: #7d6f58; }

#qq:focus {
  border-color: var(--gold, #9c7726);
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 3px rgba(156, 119, 38, .17);
}

/* Chrome draws its own clear button on type=search; we supply #qq-clear. */
#qq::-webkit-search-cancel-button,
#qq::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
#qq::-ms-clear { display: none; width: 0; height: 0; }

#qq-clear {
  position: absolute; left: 4px;
  /* 24x24 is the WCAG 2.5.8 minimum target; it was 20x20. */
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--bind-soft, #7d6f58);
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
#qq-clear:hover { color: var(--gold-lit, #c9a04a); }

.qq-box { position: relative; display: flex; align-items: center; }

/* Same treatment style.css gives .seek-box > svg. Without it the icon has no
   size or fill rule and renders as a large filled circle. */
.qq-box > svg {
  position: absolute; right: 11px;
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--bind-soft, #7d6f58);
  stroke-width: 1.7;
  pointer-events: none;
}
body.ui-en .qq-box > svg { right: auto; left: 11px; }

#qq-mode { display: flex; gap: 5px; margin-top: 9px; }
#qq-mode button {
  flex: 1; padding: 4px 0;
  font: 400 12px/1.5 'Amiri', serif;
  color: var(--bind-soft, #7d6f58);
  background: transparent;
  border: 1px solid var(--bind-3, #3b2f20);
  border-radius: 3px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#qq-mode button:hover { color: #f4e9d2; }
#qq-mode button[aria-pressed="true"] {
  color: #1d1610;
  background: var(--gold, #9c7726);
  border-color: var(--gold, #9c7726);
}

#qq-note {
  font: 400 11px/1.5 'Amiri', serif;
  color: var(--bind-soft, #7d6f58);
  min-height: 16px;
  margin-top: 6px;
}

/* ---- the dropdown ---- */

.qq-drop {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 40;
  max-height: 52vh;
  overflow-y: auto;
  background: #1a140e;
  border: 1px solid var(--bind-3, #3b2f20);
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.qq-drop::-webkit-scrollbar { width: 9px; }
.qq-drop::-webkit-scrollbar-thumb { background: #3b2f20; border-radius: 9px; }
.qq-drop::-webkit-scrollbar-track { background: transparent; }

.qq-row {
  /* Caption line, then the ayah beneath it - not side by side. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  padding: 9px 11px;
  text-align: right;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(59, 47, 32, .5);
  cursor: pointer;
  font: 400 15px/1.85 'Amiri', serif;
  color: #ddd0b4;
}
.qq-row:last-of-type { border-bottom: 0; }
.qq-row:hover,
.qq-row.on { background: rgba(156, 119, 38, .14); }

.qq-meta {
  /* Deliberately unlike the ayah: smaller, lighter, letter-spaced and in gold,
     so it reads as a label rather than as the verse's opening words. */
  display: flex;
  align-items: baseline;
  gap: 7px;
  font: 400 10.5px/1.5 'Amiri', serif;
  letter-spacing: .03em;
  color: var(--gold-lit, #c9a04a);
  opacity: .85;
}
.qq-sura {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qq-sura::after {
  content: '·';
  margin-inline-start: 7px;
  opacity: .6;
}
.qq-num { direction: ltr; flex: 0 0 auto; }

.qq-text { flex: 0 1 auto; }

/* The typed letters, in red, as الباحث القرآني shows them. */
.qq-drop mark.qq-hit {
  background: none;
  color: #e05c4b;
  font-weight: 700;
}

/* Marks an ayah with no comment of its own: the jump lands where the
   surrounding discussion begins. */
.qq-approx {
  flex: 0 0 auto;
  color: var(--bind-soft, #7d6f58);
  font-size: 13px;
}

.qq-empty,
.qq-more {
  padding: 9px 11px;
  font: 400 12px/1.5 'Amiri', serif;
  color: var(--bind-soft, #7d6f58);
  text-align: center;
}
.qq-more { border-top: 1px solid rgba(59, 47, 32, .5); }


/* The reserved line only earns its space once it says something. */
#seek-note:empty { min-height: 0; margin-top: 0; }

/* ====================================================== the search dialog
   The box used to sit open in the rail, where it cost ~96px of vertical space
   on every screen for something used occasionally. It is now behind a button.

   <dialog> + showModal() is doing real work here: it gives the focus trap,
   Escape-to-close, inert background and ::backdrop for free. Only the Back
   button needs code, and that lives in quran-search.js. */

.qq-open {
  display: block; width: 100%;
  /* One of these is a <button> and one is an <a> — the Qur'an search opens a
     dialog, search-by-meaning goes to its own page — and they must look
     identical. A button centres its label and carries no underline; an anchor
     does neither, so beside each other the link looked like a mistake. Both
     are stated here rather than patched onto the anchor, so the next thing
     given this class matches whatever element it turns out to be. */
  text-align: center;
  text-decoration: none;
  /* #seek-note above reserves a line for the book-search result count even when
     it is empty; with a 14px margin on top of that the button floated far from
     the scope buttons. The empty note is collapsed just below. */
  margin-top: 12px; padding: 9px 12px;
  font: 400 13px/1.5 'Amiri', serif;
  color: var(--gold-lit, #c9a04a);
  background: rgba(0, 0, 0, .26);
  border: 1px solid var(--bind-3, #3b2f20);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.qq-open:hover { border-color: var(--gold, #9c7726); background: rgba(0, 0, 0, .4); }
.qq-open:focus-visible { outline: 2px solid var(--gold, #9c7726); outline-offset: 2px; }

/* [open] is load-bearing. The browser hides a closed <dialog> with
   dialog:not([open]){display:none}, and a bare .qq-dlg{display:grid} outranks
   it - the closed dialog then stayed in the flow as a full-viewport block
   sitting after the pages, plainly visible. Style the open state only. */
.qq-dlg[open] {
  /* The dialog fills the viewport and centres the card inside it, so a click
     that misses the card lands on the dialog element itself - that is what
     makes "click outside to dismiss" reliable. A shrink-wrapped dialog leaves
     the backdrop as a pseudo-element with no dependable click target. */
  width: 100vw; max-width: 100vw;
  height: 100vh; max-height: 100vh;
  height: 100dvh; max-height: 100dvh;   /* see #app in style.css */
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: visible;
}
.qq-dlg::backdrop { background: rgba(10, 7, 4, .62); backdrop-filter: blur(2px); }

.qq-dlg-in {
  width: min(560px, calc(100vw - 32px));
  padding: 16px 18px 20px;
  background: #1a140e;
  border: 1px solid var(--bind-3, #3b2f20);
  border-radius: 5px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
}

.qq-dlg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.qq-dlg-head h2 {
  flex: 1 1 auto; margin: 0;
  font: 400 16px/1.5 'Amiri', serif;
  color: #f4e9d2;
}
.qq-x {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  font-size: 20px; line-height: 1;
  color: var(--bind-soft, #7d6f58);
  background: transparent;
  border: 1px solid var(--bind-3, #3b2f20);
  border-radius: 3px;
  cursor: pointer;
}
.qq-x:hover { color: var(--gold-lit, #c9a04a); border-color: var(--gold, #9c7726); }

/* In the dialog the results are the content, so they flow rather than hang as
   an absolutely-positioned overlay. */
.qq-dlg .qq-drop {
  position: static;
  margin-top: 10px;
  max-height: min(56vh, 460px);
  box-shadow: none;
}

@media (max-width: 720px) {
  /* Fullscreen on a phone. The card must be exactly viewport-high and scroll
     its results internally - centring a card taller than the screen pushed the
     heading and the input off the top, where they could not be reached. */
  .qq-dlg[open] { place-items: stretch; }
  .qq-dlg-in {
    width: 100vw; height: 100vh; height: 100dvh;
    border: 0; border-radius: 0;
    padding: 14px 14px 0;
    display: flex; flex-direction: column;
  }
  .qq-dlg-head { flex: 0 0 auto; }
  .qq-dlg .quran-seek {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .qq-dlg .qq-drop {
    flex: 1 1 auto; min-height: 0;
    max-height: none;
    border-inline: 0; border-bottom: 0; border-radius: 0;
    margin-inline: -14px;
  }
}

/* The ayah you last opened from the list, so a reopened dialog shows where you
   got to rather than an undifferentiated list. */
.qq-row.picked {
  background: rgba(156, 119, 38, .1);
  box-shadow: inset 3px 0 0 var(--gold, #9c7726);
}
body.ui-en .qq-row.picked { box-shadow: inset -3px 0 0 var(--gold, #9c7726); }

/* ====================================================== search by meaning
   The same dialog furniture as the Quran search, because two dialogs behaving
   two different ways would be worse than either. Only what differs is here. */
.ask-open { margin-top: 8px; }

.ask-row .qq-meta { gap: 9px; }
.ask-n {
  flex: 0 0 auto;
  min-width: 17px; height: 17px; line-height: 17px;
  text-align: center; border-radius: 50%;
  background: rgba(156, 119, 38, .22);
  color: var(--gold-lit, #c9a04a);
  font-size: 10px;
}
.ask-score { margin-inline-start: auto; opacity: .6; font-size: 10px; direction: ltr; }
.ask-ur { font-family: 'Noto Nastaliq Urdu', 'Amiri', serif; line-height: 2.1; }

.ask-box { display: flex; gap: 7px; align-items: stretch; }
.ask-box #ask-q { flex: 1 1 auto; }
.ask-box button {
  flex: 0 0 auto; padding: 0 15px;
  font: 400 13px/1 'Amiri', serif;
  color: #1d1610; background: var(--gold, #9c7726);
  border: 1px solid var(--gold, #9c7726); border-radius: 3px; cursor: pointer;
}
.ask-hint { margin-top: 6px; font: 400 11px/1.5 'Amiri', serif; color: var(--bind-soft, #7d6f58); }

/* The answer sits above the passages, and says plainly that it is machine-made.
   A summary of kalam can misattribute a reported view to the author, so the
   caution is not decoration. */
.ask-answer {
  margin: 12px 0 6px; padding: 13px 15px;
  background: rgba(156, 119, 38, .09);
  border: 1px solid rgba(156, 119, 38, .3);
  border-radius: 4px;
}
.ask-answer-h {
  font: 400 11px/1.5 'Amiri', serif; letter-spacing: .04em;
  color: var(--gold-lit, #c9a04a); margin-bottom: 8px;
}
.ask-answer-b { font: 400 14.5px/1.9 'Amiri', serif; color: #e8dcc0; }
.ask-caution {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(156, 119, 38, .25);
  font: 400 10.5px/1.6 'Amiri', serif; color: var(--bind-soft, #7d6f58);
}
html[data-theme="daylight"] .ask-answer-b { color: #2c2418; }

/* ---- the account, at the foot of the rail -------------------------------
   Rebuilt because it did not read as being signed in at all: a 12px name in a
   hardcoded cream, which on the daylight theme is cream on cream, beside a
   "sign in" styled as the quiet secondary action. A name you cannot see is not
   a session anybody believes in.

   Now: an initial in a gold disc, the name at a weight you can read, and a
   caption saying what kind of account it is. Signing out is an icon with a real
   hit area rather than a word competing with the name beside it.

   Every colour comes from a token. --bind is dark under two themes and light
   under the third, so a literal ink here is wrong under one of them by
   definition. */
.acct{
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--bind-3, #3b2f20);
}
.acct form { margin: 0; display: flex; }

.acct-who{
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 auto; min-width: 0; text-decoration: none;
}
.acct-dot{
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(156, 119, 38, .22); color: var(--gold, #9c7726);
  font: 700 12.5px/1 'Iowan Old Style', Georgia, serif;
}
.acct-txt{ min-width: 0; }
.acct-txt b{
  display: block; font: 700 13px/1.45 'Amiri', serif;
  color: var(--bind-ink, #e9dcc0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-txt > span{
  display: block; font: 400 10.5px/1.5 'Amiri', serif;
  color: var(--gold, #9c7726); letter-spacing: .04em;
}
.acct-who:hover .acct-txt b{ color: var(--gold, #9c7726); }

/* 30px square: small, but a real target rather than a word to aim at. */
.acct-ico{
  flex: none; width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--bind-soft, #7d6f58); background: transparent;
  border: 1px solid transparent; border-radius: 3px; text-decoration: none;
  transition: color .16s, border-color .16s;
}
.acct-ico svg{
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.acct-ico:hover{ color: var(--gold, #9c7726); border-color: var(--bind-3, #3b2f20); }

/* Signed out: one action, and it looks like one. */
.acct-btn{
  flex: 1 1 auto; padding: 8px 12px; text-align: center; text-decoration: none;
  font: 400 12.5px/1.5 'Amiri', serif;
  color: #fdf7e6; background: var(--gold, #9c7726);
  border: 1px solid var(--gold, #9c7726); border-radius: 3px;
  transition: filter .16s;
}
.acct-btn:hover{ filter: brightness(1.1); }
.acct-link{
  flex: none; text-decoration: none;
  font: 400 11.5px/1.6 'Amiri', serif; color: var(--bind-soft, #7d6f58);
}
.acct-link:hover{ color: var(--gold, #9c7726); }

/* ---- the view segment: the scripts name themselves ----------------------
   Three pairs of rectangles with the chosen column filled was a neat idea
   nobody could read — at 24px, "left filled" against "both filled" against
   "right filled" is a guess, and the tooltip only helps a mouse. */
.seg.script button{
  /* Height comes from .seg (33px, matching the icons); this only sets the
     type. An earlier version put `font: .../1` here with no vertical padding
     and the whole segment collapsed to 13px beside 33px icons. */
  min-width: 36px; gap: 3px;
  font-size: 13px; font-family: 'Amiri', serif;
}
.seg.script button .sep{ opacity: .5; margin: 0 3px; font-size: 11px; }
.seg.script button .ur{ font-size: 11px; }
body.ui-en .seg.script button{ font-family: 'Amiri', serif; }

/* ---- interface language, in its own panel -------------------------------
   Out of the toolbar, which is the tightest space on a phone and the first
   thing to clip, and into a control where each choice can carry a flag and
   its own name. */
.lang-pick{ display: flex; flex-direction: column; gap: 4px; }
.lang-pick button{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; cursor: pointer; text-align: start;
  font: 400 13px/1.6 'Amiri', serif;
  color: var(--ink, #261d12); background: transparent;
  border: 1px solid transparent; border-radius: 3px;
  transition: background .16s, border-color .16s;
}
.lang-pick button:hover{ background: var(--leaf-2, #f3ead6); }
.lang-pick button[aria-pressed="true"]{
  background: rgba(156, 119, 38, .14);
  border-color: var(--gold, #9c7726);
  font-weight: 700;
}
.lang-pick .flag{
  flex: none; width: 22px; height: 15px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.lang-pick button > span{ flex: 1; }