/* quran.gripe: one stylesheet for every page */
@font-face { font-family:"Amiri Quran"; src:url(/fonts/amiri-quran-1.003.woff2) format("woff2"); font-display:swap }

:root { --bg:#faf8f5; --fg:#1a1a1a; --muted:#6f6a64; --soft:#8a8a8a; --line:#e4e0da; --hover:#efebe5; --panel:#f3efe9; --accent:#e5484d;
        --ink:#141414; --mark:#8b6a1e; --hl1:#fff0a8; --hl2:#d5f2d0; --hl3:#d6e6ff; --flash:rgba(139,106,30,.13); color-scheme:light }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#111; --fg:#f2f2f2; --muted:#9a9a9a; --soft:#808080; --line:#262626; --hover:#1d1d1d; --panel:#171717;
        --ink:#f1efe9; --mark:#cfae5c; --hl1:#4d4100; --hl2:#163d1a; --hl3:#14304f; --flash:rgba(207,174,92,.14); color-scheme:dark }
}
:root[data-theme="dark"] { --bg:#111; --fg:#f2f2f2; --muted:#9a9a9a; --soft:#808080; --line:#262626; --hover:#1d1d1d; --panel:#171717;
        --ink:#f1efe9; --mark:#cfae5c; --hl1:#4d4100; --hl2:#163d1a; --hl3:#14304f; --flash:rgba(207,174,92,.14); color-scheme:dark }

* { box-sizing:border-box; margin:0 }
html { -webkit-text-size-adjust:100%; scroll-padding-top:72px }
body { background:var(--bg); color:var(--fg); font:16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; overflow-wrap:break-word }
body > main { flex:1 0 auto; width:100% }
a { color:inherit }
button, input, select, textarea { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
[hidden] { display:none !important }
.skip { position:absolute; left:-9999px; top:8px; z-index:50; background:var(--fg); color:var(--bg); padding:6px 12px; border-radius:8px }
.skip:focus { left:12px }
kbd { font:.85em ui-monospace, SFMono-Regular, Menlo, monospace; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:0 5px; background:var(--panel) }
code { font:.9em ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:0 4px }

/* top bar */
.bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:10px max(16px, env(safe-area-inset-left)); background:color-mix(in srgb, var(--bg) 92%, transparent);
       -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line) }
.brand { font-weight:700; font-size:1.15rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap }
.brand span, h1.site span { color:var(--accent) }
.go { flex:1 1 auto; max-width:420px; margin-left:auto; position:relative }
.go input, .sform input, .hero-go input { width:100%; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:7px 12px; font-size:.95rem }
.go input::placeholder, .sform input::placeholder, .hero-go input::placeholder { color:var(--soft) }
.icon { flex:none; min-width:40px; height:36px; border:1px solid var(--line); background:var(--panel); border-radius:10px; cursor:pointer; font-weight:600; font-family:Georgia, serif }
.icon:hover { background:var(--hover) }
.sugg { position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--bg); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.14); list-style:none; padding:4px; z-index:30 }
.sugg a { display:flex; justify-content:space-between; gap:12px; padding:7px 10px; border-radius:7px; text-decoration:none; font-size:.92rem }
.sugg a small { color:var(--muted) }
.sugg a.on, .sugg a:hover { background:var(--hover) }

/* reading column */
.rd { max-width:820px; margin:0 auto; padding:0 16px }
:root[data-layout="side"] .rd:not(.one) { max-width:1240px }
.sh { text-align:center; padding:28px 0 10px }
.sh h1 { font-size:clamp(1.5rem, 4vw, 2rem); letter-spacing:-.02em; line-height:1.2 }
.sh h1 span { display:block; font-size:.55em; font-weight:500; color:var(--muted); letter-spacing:0; margin-top:4px }
.arn { font-family:"Amiri Quran", "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif; font-size:2rem; line-height:1.6; color:var(--ink) }
.meta { color:var(--muted); font-size:.9rem; margin-top:8px }
.meta a, .crumb a, .ctx a, .lbl a { color:var(--muted) }
.lbl { color:var(--muted); font-size:.82rem; margin-top:6px }
.crumb { color:var(--muted); font-size:.85rem; padding-top:18px }
.ctx { text-align:center; margin:18px 0 0; font-size:.95rem }
.sc-s { display:none } :root[data-script="simple"] .sc-s { display:inline } :root[data-script="simple"] .sc-u { display:none }

.vs { padding-bottom:12px }
.v { padding:16px 8px; border-bottom:1px solid var(--line); border-radius:6px; transition:background-color .5s }
.js .v { cursor:pointer }
.js .v:hover { background:color-mix(in srgb, var(--hover) 55%, transparent) }
.ar { font-family:"Amiri Quran", "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif; font-size:var(--ar, 30px); line-height:2.25; color:var(--ink); text-align:right; direction:rtl; unicode-bidi:isolate }
.ae { color:var(--mark); white-space:nowrap; font-family:"Amiri Quran", "Amiri", serif }
.en { font-family:ui-serif, "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif; font-size:var(--en, 18px); line-height:1.6; margin-top:6px; text-align:left }
.n { font:600 .72em/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--muted); text-decoration:none; margin-right:6px; font-variant-numeric:tabular-nums; vertical-align:1px }
.n:hover { color:var(--accent) }
.sjl { font:600 .68em/1 ui-sans-serif, system-ui, -apple-system, sans-serif; color:var(--mark); border:1px solid currentColor; border-radius:5px; padding:2px 5px; vertical-align:2px; white-space:nowrap }
.mk { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; margin:14px 0 2px }
.mk::before, .mk::after { content:""; flex:1; border-top:1px dashed var(--line) }
.mk a { text-decoration:none; color:var(--muted) } .mk a:hover { color:var(--accent) }
.bsm { text-align:center; padding:6px 0 14px; border-bottom:1px solid var(--line) }
.bsm .ar { text-align:center; font-size:calc(var(--ar, 30px) * 1.05) }
.bsm .en { text-align:center; color:var(--muted); font-size:calc(var(--en, 18px) * .92) }
.nob { text-align:center; color:var(--muted); font-size:.85rem; font-style:italic; padding:4px 0 12px; border-bottom:1px solid var(--line) }
.sh2 { text-align:center; padding:30px 0 6px }
.sh2 h2 { font-size:1.2rem } .sh2 h2 a { text-decoration:none } .sh2 h2 span { color:var(--muted); font-weight:500; font-size:.85em }
.sh2 .arn { font-size:1.7rem }

:root[data-nums="off"] .ae, :root[data-nums="off"] .n { display:none }
:root[data-show="ar"] .vs .en, :root[data-show="ar"] .one .en { display:none }
:root[data-show="en"] .vs .ar, :root[data-show="en"] .one .ar { display:none }
:root[data-show="en"] .en { margin-top:0 }
@media (min-width:900px) {
  :root[data-layout="side"]:not([data-show]) .v, :root[data-layout="side"][data-show="both"] .v { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:28px; align-items:start }
  :root[data-layout="side"]:not([data-show]) .v .en, :root[data-layout="side"][data-show="both"] .v .en { order:-1; margin-top:.5em }
}

/* your marks */
.v[data-hl="1"] { background:var(--hl1) } .v[data-hl="2"] { background:var(--hl2) } .v[data-hl="3"] { background:var(--hl3) }
.js .v[data-hl]:hover { background:color-mix(in srgb, var(--hover) 30%, var(--hl1)) }
.v.bm { box-shadow:inset 3px 0 0 var(--mark) }
.v .note { font-size:.9rem; color:var(--fg); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-top:8px; white-space:pre-wrap; text-align:left; direction:ltr }
.v .note::before { content:"Your note: "; color:var(--muted); font-weight:600 }
.v.flash, .v:target { background:var(--flash) }

/* prev / next */
.pn { display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:820px; width:100%; margin:20px auto 0; padding:0 16px; font-size:.92rem; flex-wrap:wrap }
.pn a { text-decoration:none; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel) }
.pn a:hover { border-color:var(--accent) }

/* footer */
.ft { max-width:820px; width:100%; margin:34px auto 0; padding:16px 16px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; line-height:1.6 }
.ft a { color:var(--muted) } .ft a:hover { color:var(--accent) }
.ft .priv { margin-top:6px }
.rel { text-align:center; padding:12px 16px 0; color:var(--muted); font-size:.9rem; line-height:1.7 }
.rel a { color:var(--accent); text-decoration:none; font-weight:600 }
.gn-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px 22px }
.gn-terms { color:var(--muted,#8a8a8a); font:.8rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration:none; text-align:center }
.gn-terms:hover { color:var(--accent,#e5484d); text-decoration:underline }
.gn { display:inline-flex; align-items:center; gap:10px; padding:6px 6px 6px 14px; border:1px solid var(--line,#e4e0da); border-radius:999px;
      background:var(--panel,var(--hover,#f3efe9)); color:var(--fg,#1a1a1a); text-decoration:none;
      font:500 .9rem/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; transition:border-color .15s, transform .15s }
.gn:hover { border-color:var(--accent,#e5484d); transform:translateY(-1px) }
.gn:focus-visible { outline:2px solid var(--accent,#e5484d); outline-offset:2px }
.gn-dot { width:8px; height:8px; border-radius:50%; background:var(--accent,#e5484d); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#e5484d) 22%, transparent) }
.gn b { color:var(--accent,#e5484d); font-weight:700 }
.gn-more { padding:5px 11px; border-radius:999px; background:var(--accent,#e5484d); color:#fff; font-size:.8rem; font-weight:600; white-space:nowrap }

/* popovers: ayah menu, settings, notes, toast */
.pop { position:fixed; z-index:40; background:var(--bg); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.2); padding:12px; width:min(340px, calc(100vw - 24px)); max-height:calc(100dvh - 80px); overflow:auto }
.pop h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin:2px 2px 10px; display:flex; justify-content:space-between; align-items:center }
.pop .x { border:0; background:none; font-size:1.2rem; line-height:1; cursor:pointer; color:var(--muted); padding:2px 6px }
.acts { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.acts button, .btn { border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:8px 10px; cursor:pointer; font-size:.9rem; text-align:left }
.acts button:hover, .btn:hover { background:var(--hover) }
.btn.primary { background:var(--fg); color:var(--bg); border-color:var(--fg) }
.swatches { display:flex; gap:6px; margin-top:8px; align-items:center; font-size:.85rem; color:var(--muted) }
.swatches button { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); cursor:pointer }
.swatches button[aria-pressed="true"] { outline:2px solid var(--fg); outline-offset:1px }
.pop textarea { width:100%; min-height:90px; margin-top:8px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px; resize:vertical }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 2px; border-top:1px solid var(--line); font-size:.9rem; flex-wrap:wrap }
.row:first-of-type { border-top:0 }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px; background:var(--panel); flex-wrap:wrap }
.seg button { border:0; background:none; border-radius:7px; padding:4px 9px; cursor:pointer; font-size:.84rem; color:var(--muted) }
.seg button[aria-pressed="true"] { background:var(--fg); color:var(--bg) }
.step { display:inline-flex; align-items:center; gap:4px }
.step button { width:32px; height:30px; border:1px solid var(--line); background:var(--panel); border-radius:8px; cursor:pointer }
.step output { min-width:3.2em; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); font-size:.85rem }
.small { font-size:.8rem; color:var(--muted); margin-top:8px; line-height:1.45 }
.marks { list-style:none; padding:0; margin-top:6px; display:grid; gap:4px }
.marks a { display:block; padding:6px 8px; border-radius:8px; text-decoration:none; font-size:.9rem; background:var(--panel) }
.marks a small { display:block; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60; background:var(--fg); color:var(--bg); padding:8px 16px; border-radius:999px; font-size:.9rem; box-shadow:0 6px 20px rgba(0,0,0,.25); max-width:calc(100vw - 32px) }
@media (max-width:560px) { .pop.sheet { left:8px !important; right:8px; top:auto !important; bottom:8px; width:auto } }

/* home */
.home { max-width:1100px; margin:0 auto; padding:clamp(16px,3vw,36px) 16px 0 }
.home header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 18px }
h1.site { font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.03em }
.tag { color:var(--muted); font-size:.98rem }
.home header .tag { order:3; flex-basis:100% }
.pop:focus { outline:none }
.hero-go { display:flex; gap:8px; margin:18px 0 6px; position:relative; max-width:640px }
.hero-go input { font-size:1.05rem; padding:11px 14px; border-radius:12px }
.hero-go button { border:0; border-radius:12px; padding:0 18px; background:var(--fg); color:var(--bg); font-weight:600; cursor:pointer }
.hint { color:var(--muted); font-size:.86rem }
.cont { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px }
.cont a { text-decoration:none; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:6px 12px; font-size:.9rem }
.cont a b { color:var(--accent) }
.tabs { display:flex; gap:4px; margin:26px 0 12px; border-bottom:1px solid var(--line); flex-wrap:wrap }
.tabs a { padding:8px 14px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:600; font-size:.95rem }
.tabs a[aria-current="true"] { color:var(--fg); border-color:var(--accent) }
.sl, .jl { list-style:none; padding:0; display:grid; gap:8px }
.sl { grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)) }
.sl li, .jl li { display:flex }
.sl a { flex:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; text-decoration:none; background:var(--panel); min-height:62px }
.sl a:hover, .jl a:hover { border-color:var(--mark) }
.sl .no { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--bg); border:1px solid var(--line); font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums }
.sl .nm { font-weight:600; min-width:0 } .sl .nm small { display:block; font-weight:400; color:var(--muted); font-size:.8rem }
.sl .arn { font-size:1.45rem; line-height:1 }
.jl { grid-template-columns:repeat(auto-fill, minmax(min(100%, 160px), 1fr)) }
.jl a { flex:1; display:block; padding:10px 12px; border:1px solid var(--line); border-radius:12px; text-decoration:none; background:var(--panel) }
.jl small { display:block; color:var(--muted); font-size:.8rem }
.pgo { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.pgo input { width:7em; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:7px 10px }
.panel[hidden] { display:none }
.faq { margin-top:38px; max-width:46em }
.faq h2 { font-size:1.15rem; letter-spacing:-.01em; margin:22px 0 6px }
.faq p, .faq li { font-size:.95rem; margin-top:8px }
.faq ul { padding-left:1.2em }
.faq a { color:var(--accent) }
table.lic { border-collapse:collapse; width:100%; font-size:.85rem; margin-top:10px; display:block; overflow-x:auto }
table.lic th, table.lic td { text-align:left; vertical-align:top; padding:7px 8px; border-bottom:1px solid var(--line) }
table.lic th { color:var(--muted); font-weight:600 }
pre.notice { white-space:pre-wrap; font:.78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; margin-top:10px; overflow-wrap:anywhere }

/* ayah of the day */
.kick { color:var(--mark); font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; font-weight:600 }
.kick a { color:inherit; text-decoration:none } .kick a:hover { text-decoration:underline }
.sh .kick { margin-bottom:6px }
.dhome { margin:22px 0 4px; padding:16px 18px 14px; border:1px solid var(--line); border-radius:16px; background:var(--panel); max-width:860px }
.dhome .dref { font-weight:600; margin-top:4px }
.dhome .vs { padding-bottom:0 } .dhome .v:last-child { border-bottom:0 }
.dact { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.dact a.btn { text-decoration:none }
.dh { font-size:1rem; margin:28px 0 8px }
.days { list-style:none; padding:0; display:grid; gap:6px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)) }
.days a { display:block; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); text-decoration:none; font-size:.92rem }
.days small { display:block; color:var(--muted) }
.dnote { margin-top:18px }

/* search */
.sform { display:flex; gap:8px; margin:6px auto 8px; max-width:640px }
.sform button { border:0; border-radius:10px; padding:0 16px; background:var(--fg); color:var(--bg); font-weight:600; cursor:pointer }
.rd .hint { text-align:center; max-width:640px; margin:0 auto }
#results { margin-top:18px }
.rcount { color:var(--muted); font-size:.88rem; margin-bottom:6px }
.res .v { cursor:default }
.res .ref { font:600 .82rem ui-sans-serif, system-ui, sans-serif; text-decoration:none; color:var(--accent) }
.res mark { background:var(--hl1); color:inherit; border-radius:3px; padding:0 1px }
.goto { display:inline-block; margin:4px 0 10px; padding:8px 12px; border:1px solid var(--mark); border-radius:10px; text-decoration:none }

@media (prefers-reduced-motion: reduce) { .gn, .v { transition:none } .gn:hover { transform:none } }
@media (max-width:560px) {
  .bar { gap:8px } .brand { font-size:1rem }
  .ar { line-height:2.15; font-size:var(--ar, 26px) }
  .bsm .ar { font-size:calc(var(--ar, 26px) * 1.05) }
  .pn a { padding:7px 10px }
}

@media print {
  .bar, .pn, .gn-wrap, .rel, .skip, #layer, .priv, .ctx, .crumb, .toast { display:none !important }
  :root { --bg:#fff; --fg:#000; --ink:#000; --muted:#444; --line:#ccc; --mark:#000 }
  body { background:#fff; color:#000 }
  .v { break-inside:avoid; padding:8px 0; background:none !important; box-shadow:none !important }
  .mk { break-after:avoid }
  a { text-decoration:none }
  .ft { font-size:8pt }
}