/* ============================================================
   NamazHub 2.0 — additive styles
   Loaded after style.css; reuses its tokens and adds nothing
   that overrides the existing design system.
   ============================================================ */

/* [hidden] must win over any display rule we set below. */
[hidden]{ display:none !important }

/* ── Layout helpers ───────────────────────────────────────── */
.nh-grid            { display:grid; gap:20px; margin-top:20px }
.nh-grid-2          { grid-template-columns:1fr 1fr }
.nh-grid-3          { grid-template-columns:repeat(3,1fr) }
.nh-full            { grid-column:1/-1 }
.nh-stack           { display:flex; flex-direction:column; gap:14px }
.nh-row             { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.nh-spacer          { flex:1 }
.nh-hint            { color:var(--text-dim); font-size:.82rem; line-height:1.65; margin-top:8px }
.nh-footnote        { color:var(--text-muted); font-size:.74rem; max-width:60ch; margin:10px auto 0; line-height:1.7 }

/* ── Navigation ───────────────────────────────────────────── */
.nh-navtoggle{
  display:none; background:none; border:1px solid var(--border2); color:var(--text);
  border-radius:var(--radius-xs); font-size:1.1rem; padding:4px 11px; cursor:pointer;
}

/* ── Location bar ─────────────────────────────────────────── */
.nh-locbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:.86rem;
}
.nh-locpin{ opacity:.8 }
.nh-locbtn{
  background:none; border:none; color:var(--text); cursor:pointer; text-align:left;
  font:inherit; padding:2px 6px; border-radius:var(--radius-xs); display:flex;
  align-items:baseline; gap:10px; flex-wrap:wrap;
}
.nh-locbtn:hover{ background:var(--green-dim) }
.nh-locbtn::after{ content:'▾'; color:var(--text-dim); font-size:.7rem; margin-left:2px }
.nh-loctz{ color:var(--text-muted); font-size:.74rem }
.nh-locmeta{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap }

.nh-chip{
  border-radius:20px; padding:3px 11px; font-size:.7rem; letter-spacing:.02em;
  background:rgba(201,122,80,.12); border:1px solid rgba(201,122,80,.32); color:#e8a37c;
}
.nh-chip-gold{ background:var(--gold-dim); border-color:var(--border-gold); color:var(--gold-l) }

/* ── Location picker ──────────────────────────────────────── */
.nh-or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted); font-size:.76rem }
.nh-or::before,.nh-or::after{ content:''; flex:1; height:1px; background:var(--border) }

.nh-results{ margin-top:10px; max-height:min(46vh,340px); overflow-y:auto; display:flex; flex-direction:column; gap:2px }
.nh-result{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start; width:100%;
  background:none; border:1px solid transparent; border-radius:var(--radius-xs);
  padding:9px 12px; cursor:pointer; text-align:left; font:inherit; color:var(--text);
}
.nh-result:hover,.nh-result:focus-visible{ background:var(--surface2); border-color:var(--border2) }
.nh-result-name{ font-size:.92rem }
.nh-result-meta{ color:var(--text-dim); font-size:.74rem }
.nh-noresults{ color:var(--text-dim); font-size:.83rem; padding:12px 4px; line-height:1.6 }

/* ── Clock & next prayer ──────────────────────────────────── */
.nh-clockblock{
  background:var(--grad-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px; position:relative; overflow:hidden;
}
.nh-clockblock::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.45;
}
.nh-clocktop{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start }
.nh-clocktime{ flex:1; min-width:210px }
.nh-hijri{ color:var(--gold); font-size:.86rem; margin-top:3px }
.nh-hijri-ar{ color:var(--gold-l); opacity:.65; font-family:'Noto Naskh Arabic',serif; font-size:.9rem }

.nh-next{
  background:var(--gold-dim); border:1px solid var(--border-gold);
  border-radius:var(--radius-sm); padding:14px 18px; min-width:230px; flex:0 1 auto;
}
.nh-next-eyebrow{ font-size:.66rem; color:var(--text-dim); letter-spacing:.09em; text-transform:uppercase }
.nh-next-name{ font-size:1.06rem; color:var(--gold-l); font-weight:500; margin-top:3px }
.nh-next-count{ font-family:'IBM Plex Mono',monospace; font-size:1.5rem; color:var(--gold); font-weight:600; line-height:1.2 }
.nh-progress{ height:3px; background:rgba(255,255,255,.06); border-radius:3px; margin-top:12px; overflow:hidden }
.nh-progress i{ display:block; height:100%; background:var(--grad-gold); border-radius:3px; transition:width 1s linear }

/* ── Prayer cards ─────────────────────────────────────────── */
.nh-badge-next{
  font-size:.6rem; color:var(--green-l); margin-top:5px;
  letter-spacing:.09em; font-weight:600;
}
.prayer-card.passed{ opacity:.5 }

.nh-extras{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.nh-extra{
  display:flex; gap:8px; align-items:baseline; background:var(--surface);
  border:1px solid var(--border); border-radius:20px; padding:5px 14px; font-size:.79rem;
}
.nh-extra-label{ color:var(--text-dim) }
.nh-extra-time{ font-family:'IBM Plex Mono',monospace; color:var(--text) }

/* ── Events ───────────────────────────────────────────────── */
.nh-events{ display:flex; flex-direction:column; gap:6px; margin-top:14px }
.nh-event{
  display:flex; align-items:center; gap:10px; font-size:.85rem;
  background:var(--surface); border-left:3px solid var(--green);
  border-radius:var(--radius-xs); padding:9px 13px;
}
.nh-event-eid        { border-left-color:var(--gold) }
.nh-event-night      { border-left-color:#a07ad4 }
.nh-event-fast       { border-left-color:var(--teal) }
.nh-event-season     { border-left-color:var(--green-l) }
.nh-event-remembrance{ border-left-color:#c97a50 }
.nh-event-name{ flex:1 }
.nh-event-ar{ font-family:'Noto Naskh Arabic',serif; color:var(--gold-l); opacity:.7; font-size:.95rem; margin-top:2px }

.nh-trad{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; padding:2px 8px;
  border-radius:20px; margin-left:8px; white-space:nowrap;
}
.nh-trad-sunni{ background:rgba(16,185,129,.12); color:var(--green-l); border:1px solid rgba(16,185,129,.25) }
.nh-trad-shia { background:rgba(14,165,233,.12); color:var(--teal-l); border:1px solid rgba(14,165,233,.25) }

.nh-upcoming{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:.86rem; color:var(--text);
}
.nh-upcoming:last-child{ border-bottom:none }
.nh-up-when{ color:var(--text-dim); font-size:.76rem; white-space:nowrap }

/* ── Calendar ─────────────────────────────────────────────── */
.nh-calbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px }
.nh-caltitle{ font-family:'Lora',serif; font-size:1.35rem; color:var(--text); line-height:1.2 }
.nh-calsub{ color:var(--gold); font-size:.8rem }

.nh-cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:5px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px;
}
.nh-cal-head{ text-align:center; color:var(--text-muted); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 0 8px }
.nh-cal-pad{ aspect-ratio:1 }
.nh-cal-day{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; background:var(--bg2); border:1px solid transparent; border-radius:var(--radius-xs);
  cursor:pointer; font:inherit; color:var(--text); position:relative; padding:2px; min-height:44px;
}
.nh-cal-day:hover{ border-color:var(--border2); background:var(--surface2) }
.nh-cal-g{ font-size:.9rem; line-height:1 }
.nh-cal-h{ font-size:.64rem; color:var(--gold); opacity:.75; line-height:1 }
.nh-cal-day.today{ border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset, 0 0 16px rgba(16,185,129,.2) }
.nh-cal-day.friday .nh-cal-g{ color:var(--green-l) }
.nh-cal-day.sacred{ background:linear-gradient(180deg,var(--bg2),rgba(245,158,11,.05)) }
.nh-cal-day.has-eid{ background:linear-gradient(180deg,var(--bg2),rgba(245,158,11,.14)) }
.nh-cal-dots{ display:flex; gap:2px; position:absolute; bottom:4px }
.nh-dot{ width:4px; height:4px; border-radius:50%; background:var(--green) }
.nh-dot-eid{ background:var(--gold) } .nh-dot-night{ background:#a07ad4 }
.nh-dot-fast{ background:var(--teal) } .nh-dot-remembrance{ background:#c97a50 }

.nh-eventrow{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--border) }
.nh-eventdate{ min-width:74px; display:flex; flex-direction:column; font-size:.76rem; color:var(--text-dim) }
.nh-eventdate strong{ color:var(--text); font-size:.9rem }
.nh-eventbody{ flex:1 }
.nh-eventname{ display:flex; align-items:center; flex-wrap:wrap; font-size:.92rem }
.nh-eventnote{ color:var(--text-dim); font-size:.81rem; margin-top:4px; line-height:1.6 }
.nh-daycard{ border-left:3px solid var(--green); background:var(--surface); border-radius:var(--radius-xs); padding:12px 14px; margin-bottom:10px }

/* ── Assistant ────────────────────────────────────────────── */
.nh-chat{ display:flex; flex-direction:column; height:calc(100dvh - 210px); min-height:420px }
.nh-chatlog{ flex:1; overflow-y:auto; padding:4px 2px 18px; display:flex; flex-direction:column; gap:16px; scroll-behavior:smooth }
.nh-msg{ max-width:min(680px,94%) }
.nh-msg-user{ align-self:flex-end }
.nh-msg-user .nh-msg-body{
  background:var(--green-dim); border:1px solid var(--border2);
  border-radius:var(--radius) var(--radius) 4px var(--radius); padding:11px 16px;
}
.nh-msg-assistant .nh-msg-body{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) var(--radius) 4px; padding:15px 19px;
}
.nh-msg-body p{ margin:0 0 .7em } .nh-msg-body p:last-child{ margin-bottom:0 }
.nh-msg-body ul,.nh-msg-body ol{ margin:.2em 0 .8em 1.15em; display:flex; flex-direction:column; gap:.35em }
.nh-msg-body li{ line-height:1.65 }
.nh-msg-body strong{ color:var(--green-l) }
.nh-msg-body code{ background:var(--bg2); padding:1px 5px; border-radius:4px; font-family:'IBM Plex Mono',monospace; font-size:.86em }
.nh-aside{ color:var(--text-dim); font-size:.86em }
.nh-pending .nh-msg-body{ opacity:.55 }

.nh-disclaimer{
  margin-top:8px; font-size:.78rem; color:var(--gold-l);
  background:var(--gold-dim); border:1px solid var(--border-gold);
  border-radius:var(--radius-xs); padding:9px 13px; line-height:1.6;
}
.nh-sources,.nh-related{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:9px }
.nh-sources-label{ font-size:.66rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em }
.nh-source{ font-size:.72rem; color:var(--text-dim); background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:3px 10px }
.nh-relbtn{
  font:inherit; font-size:.75rem; color:var(--green-l); background:none;
  border:1px solid var(--border2); border-radius:20px; padding:3px 11px; cursor:pointer;
}
.nh-relbtn:hover{ background:var(--green-dim) }

.nh-suggests{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px }
.nh-suggest{
  font:inherit; font-size:.8rem; color:var(--text-dim); background:var(--surface);
  border:1px solid var(--border); border-radius:20px; padding:7px 14px; cursor:pointer; text-align:left;
}
.nh-suggest:hover{ border-color:var(--border2); color:var(--text) }

.nh-chatform{ display:flex; gap:10px; align-items:flex-end; padding-top:12px; border-top:1px solid var(--border) }
.nh-chatform .form-control{ flex:1; resize:none }

/* ── Settings ─────────────────────────────────────────────── */
.nh-fieldset{ border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:18px; background:var(--surface) }
.nh-fieldset > legend{ padding:0 10px; font-family:'Lora',serif; font-size:1.02rem; color:var(--text) }
.nh-fieldrow{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.nh-check{ display:flex; align-items:center; gap:10px; font-size:.87rem; cursor:pointer; padding:5px 0 }
.nh-check input{ width:17px; height:17px; accent-color:var(--green) }
input[type=range]{ accent-color:var(--green) }
input[type=file]{ padding:9px 12px; font-size:.85rem }
.nh-offsets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:12px }
.nh-offset label{ display:block; font-size:.74rem; color:var(--text-dim); margin-bottom:4px }
.nh-offset input{ width:100% }
.nh-preview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.nh-preview-item{
  display:flex; flex-direction:column; gap:2px; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius-xs); padding:8px 14px; min-width:84px;
}
.nh-preview-item span{ font-size:.68rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em }
.nh-preview-item strong{ font-family:'IBM Plex Mono',monospace; font-size:.98rem; color:var(--text) }
.nh-sticky-save{
  position:sticky; bottom:0; background:linear-gradient(180deg,transparent,var(--bg) 42%);
  padding:18px 0 4px; display:flex; gap:10px; align-items:center; z-index:5;
}

/* ── Qibla ────────────────────────────────────────────────── */
.nh-compass{ width:min(300px,80vw); aspect-ratio:1; margin:0 auto 20px; position:relative }
.nh-compass svg{ will-change:transform }              /* keep the needle on the GPU */
.nh-compass.aligned svg{ filter:drop-shadow(0 0 22px rgba(16,185,129,.5)) }
.nh-turn{ font-size:1rem; color:var(--gold-l); font-weight:500 }
.nh-compass.aligned + .deg-display .nh-turn,
.nh-turn.on{ color:var(--green-l) }

/* Approximate-location prompt */
.nh-approx{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.84rem;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius-sm); padding:11px 14px; margin-bottom:14px; position:relative;
}
.nh-approx-text{ flex:1; min-width:220px; color:var(--text-dim); line-height:1.6 }
.nh-approx-text strong{ color:var(--text) }
.nh-approx-close{
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:.9rem; padding:2px 6px; line-height:1;
}
.nh-approx-close:hover{ color:var(--text) }
.nh-degbig{ font-family:'Lora',serif; font-size:3rem; color:var(--gold-l); line-height:1; display:block }

/* ── Misc ─────────────────────────────────────────────────── */
.nh-empty{ grid-column:1/-1; text-align:center; padding:34px 18px; color:var(--text-dim) }
.nh-empty p{ margin-bottom:14px }

.nh-travel{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:.85rem;
  background:var(--gold-dim); border:1px solid var(--border-gold);
  border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:14px;
}

.nh-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,18px);
  background:var(--surface2); border:1px solid var(--border2); color:var(--text);
  border-radius:var(--radius-sm); padding:12px 20px; font-size:.87rem; max-width:min(90vw,460px);
  box-shadow:var(--shadow); opacity:0; transition:opacity .3s ease,transform .3s ease; z-index:1000;
}
.nh-toast.show{ opacity:1; transform:translate(-50%,0) }
.nh-toast-error{ border-color:rgba(248,113,113,.4); color:#fecaca }
.nh-toast-warn { border-color:var(--border-gold); color:var(--gold-l) }

.nh-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; font-size:.74rem; color:var(--text-dim) }
.nh-legend span{ display:flex; align-items:center; gap:6px }

/* ── Responsive ───────────────────────────────────────────── */
/* With five prayers in a two-column grid the last card is left stranded;
   let it span the row instead of sitting in a lonely half-width box. */
@media (max-width:560px){
  .prayer-grid > .prayer-card:last-child:nth-child(odd){ grid-column:span 2 }
}

@media (max-width:820px){
  .nh-grid-2,.nh-grid-3{ grid-template-columns:1fr }
  .nh-fieldrow{ grid-template-columns:1fr }
  .nh-navtoggle{ display:block }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--surface);
    border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); padding:8px;
  }
  .nav-links.open{ display:flex }
  .nav-links .nav-link{ padding:11px 14px; border-radius:var(--radius-xs) }
  .nav-inner{ position:relative }
  .nh-hide-sm{ display:none }
  .nh-chat{ height:calc(100dvh - 176px) }
  .nh-cal-day{ min-height:40px }
  .nh-cal-h{ font-size:.58rem }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ══════════════════════════════════════════════════════════
   Quran reader
   ══════════════════════════════════════════════════════════ */
:root{ --quran-size:30px }

/* The main nav is itself sticky at top:0 with z-index 100, so this has to sit
   below it rather than under it — otherwise the nav covers the back button and
   swallows the click. --nav-h is the nav's real height. */
:root{ --nav-h:62px }
.nh-qtoolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px;
  position:sticky; top:var(--nav-h); z-index:20; padding:12px 0;
  background:linear-gradient(180deg,var(--bg) 72%,transparent);
}
.nh-qtitle{ font-family:'Lora',serif; font-size:1.25rem; color:var(--text) }
.nh-qsearch{ min-width:min(320px,100%) }
.nh-qsearch .form-control{ padding:8px 14px; font-size:.87rem }

.nh-qprefs{
  display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 18px;
}
.nh-qpref{ display:flex; align-items:center; gap:10px; font-size:.83rem; color:var(--text-dim) }
.nh-qpref .form-control{ width:auto; padding:6px 30px 6px 12px; font-size:.83rem }
.nh-qpref input[type=range]{ width:150px }

/* Surah index */
.nh-qgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px }
.nh-qcard{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  gap:2px 12px; align-items:center; text-align:left; font:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 15px; color:var(--text);
  transition:var(--transition);
}
.nh-qcard:hover{ border-color:var(--border2); background:var(--surface2) }
.nh-qnum{
  grid-row:1/3; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-gold); border-radius:50%; color:var(--gold);
  font-size:.78rem; font-family:'IBM Plex Mono',monospace;
}
.nh-qnames{ display:flex; flex-direction:column; min-width:0 }
.nh-qname{ font-size:.95rem; color:var(--text) }
.nh-qmeaning{ font-size:.74rem; color:var(--text-muted) }
.nh-qar{ font-family:'Noto Naskh Arabic',serif; font-size:1.15rem; color:var(--green-l); white-space:nowrap }
.nh-qmeta{ grid-column:2/4; font-size:.7rem; color:var(--text-muted) }

.nh-qcont{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit;
  cursor:pointer; background:var(--gold-dim); border:1px solid var(--border-gold);
  border-radius:var(--radius-sm); padding:13px 18px; color:var(--text); margin-bottom:16px;
}
.nh-qcont-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--gold) }
.nh-qcont-ref{ font-size:.95rem; color:var(--text) }

/* Reading view */
.nh-qhead{ text-align:center; padding:26px 16px; border-bottom:1px solid var(--border); margin-bottom:8px }
.nh-qh-name{ font-family:'Noto Naskh Arabic',serif; font-size:2rem; color:var(--green-l); line-height:1.6 }
.nh-qh-sub{ font-size:.82rem; color:var(--text-muted); margin-top:6px }
.nh-qbismillah{
  font-family:'Noto Naskh Arabic',serif; font-size:1.5rem; color:var(--gold);
  margin-top:20px; line-height:2; direction:rtl;
}

.nh-qverses{ display:flex; flex-direction:column }
.nh-qverse{
  display:flex; gap:16px; padding:20px 4px; border-bottom:1px solid var(--border);
  scroll-margin-top:calc(var(--nav-h) + 70px);
}
.nh-qverse:last-child{ border-bottom:none }
.nh-qverse.flash{ animation:nhFlash 2.4s ease }
.nh-qverse.reciting{ background:var(--green-dim); border-radius:var(--radius-xs) }
@keyframes nhFlash{ 0%,55%{ background:var(--gold-dim) } 100%{ background:transparent } }

.nh-qvnum{
  flex-shrink:0; width:34px; height:34px; margin-top:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font:inherit;
  background:none; border:1px solid var(--border2); border-radius:50%;
  color:var(--text-dim); font-size:.74rem; font-family:'IBM Plex Mono',monospace;
}
.nh-qvnum:hover{ border-color:var(--gold); color:var(--gold) }
.nh-qvnum.marked{ background:var(--gold-dim); border-color:var(--gold); color:var(--gold-l) }

.nh-qbody{ flex:1; min-width:0 }
.nh-qtext{
  font-family:'Noto Naskh Arabic',serif; font-size:var(--quran-size);
  line-height:2.15; color:var(--text); text-align:right; direction:rtl;
  word-spacing:.05em;
}
.nh-qtr{ margin-top:14px; font-size:.95rem; line-height:1.8; color:var(--text-dim) }
.nh-qtools{ display:flex; gap:14px; align-items:center; margin-top:12px; flex-wrap:wrap }
.nh-qtool{
  font:inherit; font-size:.74rem; background:none; border:none; cursor:pointer;
  color:var(--text-muted); padding:2px 0;
}
.nh-qtool:hover{ color:var(--green-l) }
.nh-qsajdah{ font-size:.74rem; color:var(--gold) }

.nh-qnav{ display:flex; align-items:center; gap:12px; padding:24px 0 8px }

/* Search results */
.nh-qcount{ color:var(--text-dim); font-size:.86rem; margin-bottom:14px }
.nh-qresult{
  display:flex; flex-direction:column; gap:8px; width:100%; text-align:left; font:inherit;
  cursor:pointer; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:8px; color:var(--text);
}
.nh-qresult:hover{ border-color:var(--border2) }
.nh-qrref{ font-size:.74rem; color:var(--gold) }
.nh-qrar{ font-family:'Noto Naskh Arabic',serif; font-size:1.3rem; line-height:2; text-align:right; direction:rtl }
.nh-qrtr{ font-size:.86rem; color:var(--text-dim); line-height:1.7 }

.nh-qattrib{ margin-top:28px; font-size:.7rem; color:var(--text-muted); text-align:center }

/* Verse of the day */
.nh-votd-ar{
  font-family:'Noto Naskh Arabic',serif; font-size:1.45rem; line-height:2.1;
  color:var(--text); text-align:right; direction:rtl;
}
.nh-votd-tr{ font-size:.88rem; color:var(--text-dim); line-height:1.75; margin-top:12px }
.nh-votd-ref{ display:inline-block; margin-top:12px; font-size:.78rem; color:var(--gold) }

@media (max-width:820px){
  .nh-qtoolbar{ gap:8px }
  .nh-qtitle{ font-size:1.05rem }
  .nh-qsearch{ order:3; width:100% }
  .nh-qgrid{ grid-template-columns:1fr }
  .nh-qverse{ gap:12px; padding:18px 2px }
}

/* ── Recitation player ────────────────────────────────────── */
.nh-qplayer{
  position:sticky; bottom:0; z-index:30; margin-top:24px;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:12px 16px 10px; box-shadow:0 -8px 28px rgba(0,0,0,.45);
}
.nh-qp-main{ display:flex; align-items:center; gap:10px }
.nh-qp-btn{
  background:none; border:1px solid var(--border2); border-radius:50%;
  width:34px; height:34px; color:var(--text-dim); cursor:pointer;
  font-size:.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nh-qp-btn:hover:not(:disabled){ border-color:var(--green); color:var(--green-l) }
.nh-qp-btn:disabled{ opacity:.3; cursor:default }
.nh-qp-big{ width:42px; height:42px; border-color:var(--gold); color:var(--gold); font-size:.95rem }
.nh-qp-info{ flex:1; min-width:0 }
.nh-qp-where{ font-size:.9rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nh-qp-reciter{ font-size:.72rem; color:var(--text-muted) }
.nh-qp-bar{ height:3px; background:rgba(255,255,255,.07); border-radius:3px; margin-top:10px; overflow:hidden }
.nh-qp-bar i{ display:block; height:100%; width:0; background:var(--grad-gold); border-radius:3px }
.nh-qp-opts{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:.74rem; color:var(--text-muted) }
.nh-qp-opts label{ display:flex; align-items:center; gap:6px }
.nh-qp-opts select{
  background:var(--bg2); border:1px solid var(--border); color:var(--text-dim);
  border-radius:var(--radius-xs); padding:3px 6px; font:inherit; font-size:.74rem;
}
.nh-qp-check input{ accent-color:var(--green) }

@media (max-width:820px){
  .nh-qp-opts{ gap:12px; font-size:.7rem }
  .nh-qplayer{ padding:10px 12px 8px }
}

/* ══════════════════════════════════════════════════════════
   Safe areas — the notch, the Dynamic Island, the home bar
   ──────────────────────────────────────────────────────────
   partials/head.php sets viewport-fit=cover and, for the installed
   app, apple-mobile-web-app-status-bar-style black-translucent.
   Both are deliberate: they let the dark background run edge to
   edge instead of leaving a grey band across the top.

   What was missing is the other half of that bargain. Those two
   settings hand the whole screen to the page, including the strip
   the camera and the clock live in, and it then falls to the page
   to keep anything you must read or tap out of it. Nothing here
   did, so on an iPhone the navigation bar — and with it the ☰ menu
   button — sat underneath the Dynamic Island: visible as a sliver,
   impossible to press.

   The four insets are read once into custom properties and used
   from there. Every device without a notch reports zero, so this
   changes nothing anywhere else — and a test can set the four
   properties to an iPhone's real numbers and check the layout on
   a desktop browser, which cannot otherwise be made to have a
   notch at all.
   ══════════════════════════════════════════════════════════ */

:root{
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);

  /* The nav is taller by exactly the strip it now sits below, and the
     Quran toolbar sticks to the bottom of the nav, so it must agree. */
  --nav-h: calc(62px + var(--safe-top));
}

.nav{
  padding-top: var(--safe-top);
  padding-left:  max(24px, var(--safe-left));
  padding-right: max(24px, var(--safe-right));
}

/* Landscape on a notched phone puts the cutout down one side instead. */
.container, .container-sm, .container-md{
  padding-left:  max(20px, var(--safe-left));
  padding-right: max(20px, var(--safe-right));
}

/* Anything at the bottom of the screen clears the home indicator. */
.nh-qplayer{ padding-bottom: calc(10px + var(--safe-bottom)) }
.nh-toast{   bottom:         calc(26px + var(--safe-bottom)) }
.footer{     padding-bottom: calc(32px + var(--safe-bottom)) }

/* The drop-down menu hangs off a nav that is now taller and inset. */
@media (max-width:820px){
  .nav-links{ left: var(--safe-left); right: var(--safe-right) }
}

/* 34px was below the 44px Apple asks for, and this is the one control
   that opens everything else on a phone. The extra is taken as padding
   so the bar's own layout does not shift. */
.nh-navtoggle{
  min-width:44px; min-height:44px;
  display:none; align-items:center; justify-content:center;
  font-size:1.25rem; line-height:1; padding:0 12px;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width:820px){
  .nh-navtoggle{ display:flex }
}