/* ---------- tokens: neon Nastaliq ---------- */
:root{
  --bg:        #07090d;
  --ink:       #e8ecf2;
  --muted:     #6e7a8a;
  --accent:    #ff5e8a;
  --accent-secondary: #2dd4bf;
  --accent-label: #ffb454;
  --line:      rgba(255,255,255,.08);
  --neon-ink:  #fdf5f7;
  --glow-rose: 0 0 6px rgba(255,94,138,.85), 0 0 22px rgba(255,94,138,.55), 0 0 60px rgba(255,94,138,.35);
  --glow-rose-tight: 0 0 12px var(--accent);
  --glow-rose-frame: 0 0 16px rgba(255,94,138,.35), inset 0 0 16px rgba(255,94,138,.08);
  --glow-teal: 0 0 12px rgba(45,212,191,.8);
  --glow-teal-brand: 0 0 14px rgba(45,212,191,.7);
  --ease:      cubic-bezier(.22,1,.36,1);
  --gloss-bar-height: 64px; /* overwritten with the footer's measured height once JS connects */
}
/* Gallery light: near-white wall, soft shadows, gradients — the neon sign
   stays lit inside the homepage hero card (see .hero-stage below). */
html[data-theme="light"]{
  --bg:        #fafbfd;
  --ink:       #16181d;
  --muted:     #69707d;
  --accent:    #e8467c;
  --accent-secondary: #0fb5a0;
  --accent-label: #a87b1f;
  --line:      rgba(22,24,29,.08);
  --card:      #ffffff;
  --neon-ink:  #16181d;
  --glow-rose: none;
  --glow-rose-tight: none;
  --glow-rose-frame: none;
  --glow-teal: none;
  --glow-teal-brand: none;
  --shadow-rest: 0 1px 3px rgba(22,24,29,.05), 0 8px 24px rgba(22,24,29,.05);
  --shadow-lift: 0 2px 6px rgba(22,24,29,.06), 0 18px 40px rgba(22,24,29,.12);
}

* { box-sizing: border-box; }
body { position: relative; margin: 0; background: var(--bg); color: var(--ink); font-family: "Space Grotesk", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .05; background-image: repeating-linear-gradient(60deg, transparent, transparent 46px, #7aa 46px, #7aa 47px), repeating-linear-gradient(-60deg, transparent, transparent 46px, #7aa 46px, #7aa 47px), repeating-linear-gradient(0deg, transparent, transparent 80px, #7aa 80px, #7aa 81px); }
body::after { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(40% 30% at 70% 20%, rgba(255,94,138,.07), transparent 65%), radial-gradient(45% 35% at 15% 75%, rgba(45,212,191,.06), transparent 65%); }
body > * { position: relative; z-index: 1; }
button, input, textarea, select { font: inherit; }
/* iOS Safari zooms the whole page when a control it focuses is under 16px,
   and it does not zoom back out. `textarea` and `select` were missing from
   the reset above, so the admin poem editor's five textareas fell back to the
   browser default and zoomed on every tap.

   A 16px floor rather than `user-scalable=no` on the viewport: that other fix
   works by disabling pinch-zoom for everyone, on a site whose whole point is
   reading Nastaliq — the people most likely to pinch are the ones this app is
   for. `max()` keeps the floor without capping anything larger. */
input, textarea, select { font-size: max(16px, 1rem); }
button { color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.reading-screen { min-height: 100vh; padding-bottom: var(--gloss-bar-height); transition: background .4s var(--ease), color .4s var(--ease); }
.reading-screen ::selection { background: var(--accent); color: var(--bg); }

.neon-nastaliq { color: var(--neon-ink); font-family: "Noto Nastaliq Urdu", serif; text-shadow: var(--glow-rose); animation: hum 4.5s ease-in-out infinite; }
.micro-label { font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
html[data-theme="light"] .neon-nastaliq { animation: none; }
@keyframes hum { 0%, 100% { opacity: 1; } 50% { opacity: .92; } 88% { opacity: .97; } 91% { opacity: .78; } 93% { opacity: 1; } }

.reading-screen nav, .site-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 21px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 10px; }
.brand .dot { color: var(--accent); text-shadow: var(--glow-rose-tight); }
.brand .ur-brand { font-family: "Noto Nastaliq Urdu"; font-size: 19px; color: var(--accent-secondary); text-shadow: var(--glow-teal-brand); }
.brand a { color: inherit; text-decoration: none; }
.tag { font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.layers { display: flex; gap: 6px; align-items: center; }
/* The random link is an anchor, not a button, because it navigates — but it
   sits in the same row as the layer toggles and has to read as one of them.
   Without this it renders as a raw blue underlined link beside four pills. */
.layers a { text-decoration: none; }
.layers button, .layers a { font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 15px; border-radius: 3px; color: var(--muted); transition: color .25s var(--ease), text-shadow .25s var(--ease); }
.layers button:hover, .layers a:hover { color: var(--accent-secondary); text-shadow: var(--glow-teal); }
#theme { margin-left: 10px; font-size: 14px; color: var(--muted); }
#theme:hover { color: var(--accent-secondary); }

.reading-screen main { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); }
.meta { border-right: 1px solid var(--line); }
.rail { position: sticky; top: 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 28px; }
.vert { writing-mode: vertical-rl; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.poem-position { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .14em; color: var(--muted); white-space: nowrap; }
.poem-stack { position: relative; grid-column: 2; margin: 32px 7vw calc(var(--gloss-bar-height) + 52px); padding: 32px 48px 44px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.015); }
.stage-label { position: absolute; top: -9px; left: 28px; padding: 0 12px; background: var(--bg); font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .3em; color: var(--accent-label); }
.poem-header { position: sticky; top: 0; z-index: 2; margin-bottom: 8px; padding: 8px 0; background: var(--bg); }
.stage { display: flex; flex-direction: column; gap: 18px; }
/* Margin only, never padding or a divider: the two misras of one sher are
   one verse. The grouping comes from ratio — a breath between the misras,
   real air between shers. The gap INSIDE a stage is clearance, not air: the
   tails of ر, ے and و reach into the Roman line below at anything less. */
.stage + .stage { margin-top: 6px; }
.sher { position: relative; scroll-margin-top: 140px; }
.sher + .sher { margin-top: 50px; }
/* The sher's number, hung in the right-hand gutter where an Urdu line starts. */
.sher-mark { position: absolute; top: calc(clamp(2.1rem, 3.4vw, 3.1rem) * .7); right: -36px; font-family: "Noto Nastaliq Urdu"; font-size: 21px; line-height: 1; color: var(--accent); opacity: .6; transition: opacity .3s var(--ease), text-shadow .3s var(--ease); }
.sher:hover .sher-mark, .sher:focus-within .sher-mark { opacity: 1; text-shadow: var(--glow-rose-tight); }
.sher-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-top: 10px; }
.send-sher { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .25s var(--ease), text-shadow .25s var(--ease); }
.send-sher .arr { color: var(--accent-secondary); transition: transform .25s var(--ease); }
.send-sher:hover, .send-sher:focus-visible { color: var(--accent-secondary); text-shadow: var(--glow-teal); }
.send-sher:hover .arr { transform: translate(2px, -2px); }
@media (hover: hover) {
  .send-sher { opacity: .55; }
  .sher:hover .send-sher, .send-sher:focus-visible { opacity: 1; }
}
/* Where a sent sher's link lands: one slow rose breath around the verse. */
.sher.is-arrived::before { content: ""; position: absolute; inset: -18px -48px -18px -24px; border-radius: 14px; pointer-events: none; background: rgba(255,94,138,.035); box-shadow: 0 0 0 1px rgba(255,94,138,.7), 0 0 30px rgba(255,94,138,.28), inset 0 0 44px rgba(255,94,138,.07); animation: arrive 3.2s var(--ease) .4s both; }
@keyframes arrive { 0% { opacity: 0; } 18% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: .0; } }
html[data-theme="light"] .sher.is-arrived::before { box-shadow: 0 0 0 1px var(--accent), 0 10px 40px rgba(232,70,124,.18); }
.poem-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 2px 0 10px; }
.meanings-toggle { padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.meanings-toggle:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); box-shadow: var(--glow-teal); }
.meanings-toggle[aria-pressed="true"] { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.kicker { font-family: "Newsreader", serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.kicker b { color: var(--accent); font-weight: 400; }
.kicker > span:last-child { font-family: "Space Mono", monospace; }
.poet-k { color: var(--ink); }
.gh-k { font-family: "Noto Nastaliq Urdu"; letter-spacing: 0; text-transform: none; }
/* line-height 1.95, and it is not padding: Nastaliq descends diagonally far
   below the Latin baseline, and at 1.65 the tails of ے and و were crossing
   into the Roman line under them. Naveed sent the screenshot. */
.ur-line { margin: 0; font-family: "Noto Nastaliq Urdu"; font-weight: 600; font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.95; text-align: right; direction: rtl; }
.ur-line .w { display: inline-block; position: relative; padding: 0 .06em; }
.ur-line .interactive { cursor: pointer; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 4px; background-repeat: no-repeat; background-position: bottom right; transition: background-size .3s var(--ease), color .2s var(--ease); }
.ur-line .interactive:hover, .ur-line .interactive.lit { color: var(--accent); background-size: 100% 4px; }
.ur-line .glossed { cursor: pointer; }
.ur-line .glossed.lit { color: var(--accent); }
/* Inline flow with word-spacing, NOT flex-with-gap. The line's punctuation is
   bare text BETWEEN the word spans — a comma after `tha` is `[tha], [kuch]` in
   the markup — and flex promotes each text node to its own item with the full
   1.1em gap on both sides, so every comma floated mid-air ("tha , kuch") on
   every poem that had one. word-spacing keeps the same airy rhythm between
   words while punctuation stays glued to the word it follows.

   The Roman line is how this app's reader, who knows the sound and not the
   script, reads the poem aloud: a quiet echo of the Urdu, but a legible one. */
.rom-line { direction: ltr; text-align: right; font-family: "Newsreader", serif; font-size: clamp(.98rem, 1.25vw, 1.12rem); font-style: italic; letter-spacing: .01em; word-spacing: .22em; line-height: 1.6; color: color-mix(in srgb, var(--ink) 58%, var(--bg)); }
.rom-line .w { transition: color .2s var(--ease); }
.rom-line .interactive { cursor: pointer; }
.rom-line .interactive.lit { color: var(--accent); font-weight: 700; }
.rom-line .glossed { cursor: pointer; }
.rom-line .glossed.lit { color: var(--accent); }
/* No border-top. A rule ABOVE the reveal is the visual grammar of "new
   section starts here", so the translation read as the next couplet's header
   rather than this one's ending. The separation lives BETWEEN stages instead,
   where it means what it says. */
.en-wrap { flex: 1 1 auto; min-width: 0; padding-top: 2px; max-width: 640px; }
.en-line:not(.shown) { cursor: pointer; }
.reveal { font-family: "Space Grotesk", sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; transition: color .2s var(--ease); }
.reveal:hover { color: var(--accent); }
.reveal[hidden] { display: none; }
.reveal .arr { color: var(--accent); animation: bob 1.6s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.en-line { font-family: "Newsreader", serif; font-size: clamp(1.02rem, 1.35vw, 1.22rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.45; margin: 6px 0 0; color: color-mix(in srgb, var(--ink) 88%, var(--bg)); }
.en-line .w { display: inline-block; filter: blur(7px); opacity: .25; transition: filter .5s var(--ease), opacity .5s var(--ease); }
.en-line.shown .w { filter: blur(0); opacity: 1; }
.en-wrap.hidden { display: none; }
.ur-line, .rom-line { transition: opacity .4s var(--ease); }

/* `min-height` is a FIXED floor, never `--gloss-bar-height`. A ResizeObserver
   writes that variable from this footer's own offsetHeight, so reading it back
   here closes a loop: one long gloss makes the footer taller, the observer
   records the taller value, and it becomes a floor the footer can never drop
   below. The reserved padding on .poem-stack and .poem-details ratchets up with
   it and never comes back down. The variable is an output of this element and
   must not also be an input to it. */
.reading-screen footer { position: fixed; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 8px 28px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-family: "Newsreader", serif; font-size: 16px; }
/* The word the reader reached for, said three ways, at a size that can be read. */
.gloss { display: flex; align-items: baseline; justify-content: center; gap: 6px 16px; width: min(100%, 880px); min-width: 0; color: var(--muted); min-height: 1.4em; flex-wrap: wrap; text-align: center; }
.gloss.is-open { animation: gloss-in .28s var(--ease); }
@keyframes gloss-in { from { opacity: 0; transform: translateY(6px); } }
.gloss .g-ur { font-family: "Noto Nastaliq Urdu"; font-size: 26px; line-height: 1.55; color: var(--ink); }
.gloss .g-rom { font-style: italic; font-size: 17px; color: var(--accent); }
.gloss .g-en { overflow-wrap: anywhere; color: var(--ink); font-size: 17px; }
.gloss .hint { font-family: "Space Mono", monospace; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; }
@media (hover: none) { .gloss .hint-hover { display: none; } }
.poem-details { max-width: 720px; margin: 0 auto; padding: 64px 24px calc(64px + var(--gloss-bar-height)); display: grid; gap: 32px; line-height: 1.6; }
.poem-details > div, .signup-form { padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.015); }
.poem-details h2, .signup-form label { margin: 0 0 8px; font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-label); }
.poem-details p { margin: 0; white-space: pre-line; }
.signup-form { display: grid; gap: 10px; }
.signup-form input { padding: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.signup-form button { justify-self: start; padding: 9px 14px; border: 1px solid var(--accent); border-radius: 3px; color: var(--accent); box-shadow: var(--glow-rose-frame); font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.signup-form button:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); box-shadow: var(--glow-teal); }
.empty-state { min-height: 100vh; display: grid; place-content: center; padding: 24px; text-align: center; }
.empty-state > * { padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.015); }
.empty-state h1 { margin: 0 0 12px; font-family: "Newsreader", serif; font-weight: 500; }
.empty-state p { margin: 0; color: var(--muted); }
.empty-state form { margin-top: 20px; }
.empty-state button { padding: 9px 14px; border: 1px solid var(--accent); border-radius: 3px; color: var(--accent); box-shadow: var(--glow-rose-frame); font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.empty-state button:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); box-shadow: var(--glow-teal); }

.library { width: min(calc(100% - 48px), 1180px); margin: 0 auto; padding: 64px 0 96px; }
.library-head h1 { margin: 0 0 24px; font-family: "Newsreader", serif; font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; overflow-wrap: anywhere; }
.terms-ticker { width: 100vw; margin: 56px calc(50% - 50vw) 34px; padding: 12px 0; overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.terms-ticker span { display: inline-block; font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); animation: terms-scroll 28s linear infinite; }
.terms-ticker b { color: var(--accent-label); font-weight: 400; }
@keyframes terms-scroll { to { transform: translateX(-50%); } }
.library-chips { display: flex; align-items: center; gap: 8px; margin: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.library-chips::-webkit-scrollbar, .library-poets ul::-webkit-scrollbar { display: none; }
/* Phones scroll the chip row; a desktop pointer has no natural horizontal
   scroll and macOS hides the scrollbar, so past 720px the chips wrap and
   every vibe is simply visible. */
@media (min-width: 720px) { .library-chips { flex-wrap: wrap; overflow-x: visible; } }
.library .library-chips a { flex: 0 0 auto; padding: 9px 18px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.library .library-chips a:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); box-shadow: var(--glow-teal); }
.library .library-chips a.is-active { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-rose-frame); }
/* `display` and `padding` repeated with the row-link values overridden:
   `.library li a` styles every anchor in a row as the full-width poem link,
   and these chips are anchors in that same row. */
.library-list li a.library-vibe { display: inline; padding: 0; color: var(--accent); font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-decoration: none; white-space: nowrap; }
.library-list li a.library-vibe:hover { color: var(--accent-secondary); }
.library-head h1[lang="ur"] { font-family: "Noto Nastaliq Urdu"; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.5; letter-spacing: 0; text-align: right; }
.library-eyebrow, .library-pane-label, .library-filter-label, .library-result-count { margin: 0; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.library-eyebrow { margin-bottom: 14px; }
/* Two panes: the poets stay in view on the left while their poems scroll on
   the right. Below 880px the poet list becomes a row of chips. */
.library-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 8px; }
.library-poets { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.library-pane-label { margin-bottom: 10px; padding-left: 14px; }
.library-poets ul { margin: 0; padding: 0; list-style: none; }
.library-poets-apart { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.library-count { flex: 0 0 auto; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.library-pane { min-width: 0; }
.library-filters { display: grid; gap: 12px; margin-bottom: 24px; }
.library-filter-label { flex: 0 0 auto; width: 58px; }
.library-result-count { margin-bottom: 10px; }
.library-empty { padding: 32px 0; color: var(--muted); }
.library a { color: inherit; text-decoration: none; }
.library a:hover { color: var(--accent); }
.library a:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
.library .library-poets a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-left: 2px solid transparent; color: var(--muted); font-family: "Newsreader", serif; font-size: 1.08rem; line-height: 1.3; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.library .library-poets a:hover { color: var(--ink); }
.library .library-poets a[aria-current="page"] { border-left-color: var(--accent); background: rgba(255,94,138,.07); color: var(--ink); }
.library-poets a span[lang="ur"] { font-family: "Noto Nastaliq Urdu"; font-size: .98rem; line-height: 1.8; }
.library .library-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.library-list { min-width: 0; margin: 0; padding: 0; list-style: none; }
.library-list li { border-top: 1px solid var(--line); }
.library-list li:last-child { border-bottom: 1px solid var(--line); }
.library-list li > .library-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy title"; align-items: center; gap: 20px; padding: 20px 6px; transition: background .25s var(--ease), padding .25s var(--ease); }
.library-list li > .library-row:hover { padding-left: 16px; background: rgba(45,212,191,.04); }
.library-list li a.library-urdu-title { grid-area: title; display: block; padding: 0; font-family: "Noto Nastaliq Urdu"; font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.7; text-align: right; overflow-wrap: anywhere; transition: color .2s var(--ease); }
.library-row-copy { grid-area: copy; min-width: 0; }
.library-roman { display: block; font-family: "Newsreader", serif; font-size: .92rem; font-style: italic; color: var(--muted); }
.library-row-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 6px; font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; }
.library-poet-credit { color: var(--accent-label); }
.library-length { color: var(--muted); }

.library-faq { margin: 0; color: var(--ink); font-size: 1rem; }
@media (max-width: 879px) {
  .library-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .library-poets { position: static; max-height: none; overflow: visible; }
  .library-pane-label { display: none; }
  .library-poets ul { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
  .library .library-poets a { flex: 0 0 auto; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .98rem; white-space: nowrap; }
  .library .library-poets a[aria-current="page"] { border-color: var(--accent); }
  .library-poets-apart { margin: 0; padding: 0; border: 0; }
}
.poem-faq { margin: 0; color: var(--muted); font-size: .9rem; }
.library-faq a, .poem-faq a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.library-faq a:hover, .poem-faq a:hover { color: var(--accent); }
.library-faq a:focus-visible, .poem-faq a:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }

.faq { width: min(calc(100% - 48px), 720px); margin: 0 auto; padding: 76px 0 96px; line-height: 1.65; }
.faq h1 { margin: 0 0 52px; font-family: "Newsreader", serif; font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; }
.faq section { margin-top: 16px; padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.015); }
.faq h2 { margin: 0 0 12px; font-family: "Newsreader", serif; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.faq p { margin: 0; }
.faq table { width: 100%; border-collapse: collapse; text-align: left; }
.faq th, .faq td { padding: 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.faq th { border-top: 0; color: var(--accent-secondary); font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.faq th:first-child, .faq td:first-child { width: 38%; padding-right: 24px; }
.faq td strong { color: var(--accent-label); }
.faq td span[lang="ur"] { font-family: "Noto Nastaliq Urdu"; font-size: 1.1rem; line-height: 1.6; color: var(--accent-secondary); }

@media (max-width: 860px) {
  .tag, .meta { display: none; }
  .reading-screen main { grid-template-columns: minmax(0, 1fr); }
  .poem-stack { grid-column: 1; padding: 32px 6vw calc(var(--gloss-bar-height) + 42px); }
  .poem-header { margin-bottom: 24px; }
  .stage { gap: 11px; }
  .stage + .stage { margin-top: 8px; }
  .sher + .sher { margin-top: 48px; }
  .sher.is-arrived::before { inset: -14px -12px; }
  .poet-k { display: inline; }
  .reading-screen footer { padding: 10px 20px 14px; }
  .gloss { font-size: 11px; gap: 8px; }
  .gloss .g-ur { font-size: 17px; }
}
@media (max-width: 560px) {
  .reading-screen nav { flex-wrap: wrap; gap: 8px; padding: 10px 20px; }
  .layers { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .library { width: min(calc(100% - 40px), 1180px); padding: 44px 0 72px; }
  .library-list li > .library-row { grid-template-columns: 1fr; grid-template-areas: "title" "copy"; gap: 4px; }
  .faq { width: min(calc(100% - 40px), 720px); padding: 52px 0 72px; }
  .faq h1 { margin-bottom: 40px; }
}
/* Library list: the Urdu name leads, its Latin echo answers, and the length
   sits apart so short-vs-long is scannable down the column. */
.library-list li { margin: 0; line-height: 1.7; }
.title-roman { font-family: "Newsreader", serif; font-size: .8rem; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.poem-vibes { color: var(--muted); }
.poem-vibes p { font-family: "Newsreader", serif; font-style: italic; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.listen { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 22px; border: 1px solid var(--accent); border-radius: 99px; background: none; cursor: pointer; color: var(--accent); box-shadow: var(--glow-rose-frame); transition: all .25s var(--ease); }
.listen:hover { box-shadow: 0 0 24px rgba(255,94,138,.35); transform: translateY(-1px); }
.listen.is-playing { color: var(--accent-secondary); border-color: var(--accent-secondary); box-shadow: 0 0 18px rgba(45,212,191,.3); }
.listen-glyph { font-size: 12px; line-height: 1; }
.listen-label { font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.listen-time { font-family: "Space Mono", monospace; font-size: 10.5px; color: var(--muted); }
html[data-theme="light"] .listen { box-shadow: 0 4px 14px rgba(232,70,124,.2); }

/* ---------- gallery light: light-mode-only surfaces ---------- */
/* The glass nav and every card below exist only on the light wall; dark mode
   renders from the untouched rules above. */
html[data-theme="light"] .reading-screen nav,
html[data-theme="light"] .site-nav { background: rgba(250,251,253,.8); backdrop-filter: blur(14px); }
html[data-theme="light"] .brand .dot,
html[data-theme="light"] .brand .ur-brand { background: linear-gradient(120deg, var(--accent), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .stage-label,
html[data-theme="light"] .library-faq a { background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .library-chips a { background: var(--card); box-shadow: 0 1px 3px rgba(22,24,29,.05); transition: all .2s var(--ease); }
html[data-theme="light"] .library-chips a.is-active { color: #fff; background: linear-gradient(120deg, var(--accent), #c33a6b); border-color: transparent; box-shadow: 0 4px 14px rgba(232,70,124,.3); }
html[data-theme="light"] .library-chips a:hover:not(.is-active) { border-color: var(--accent-secondary); color: var(--accent-secondary); transform: translateY(-1px); }
html[data-theme="light"] .library-list li > .library-row { border-radius: 14px; }
html[data-theme="light"] .library-list li > .library-row:hover { background: var(--card); box-shadow: var(--shadow-rest); }
html[data-theme="light"] .layers button:hover, html[data-theme="light"] .layers a:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* The hero: on the homepage, in light mode only, the featured couplet's stage
   re-declares the night tokens locally — the lit sign hung on the gallery
   wall. Dark mode never matches this selector's custom properties visibly
   because they equal its own. */
html[data-theme="light"] .hero-stage {
  --bg: #0a0c12; --ink: #e8ecf2; --muted: #9aa3b2; --neon-ink: #fdf5f7; --line: rgba(255,255,255,.1);
  --glow-rose: 0 0 6px rgba(255,94,138,.85), 0 0 22px rgba(255,94,138,.5), 0 0 60px rgba(255,94,138,.3);
  color: var(--ink);
  background: var(--bg);
  border-radius: 26px;
  padding: 40px 44px;
  margin: 10px 0 26px;
  box-shadow: 0 2px 6px rgba(22,24,29,.06), 0 18px 50px rgba(22,24,29,.16), 0 40px 90px rgba(232,70,124,.10);
}
html[data-theme="light"] .hero-stage .neon-nastaliq { animation: hum 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { html[data-theme="light"] .hero-stage .neon-nastaliq { animation: none; } }

/* ---------- the qalam: each Urdu line writes itself in, right to left ---------- */
/* `html.ink` is set before first paint by the layout's head script, and only
   where motion is allowed. From then until the reading screen's script
   connects, lines wait unwritten — and if it never connects, they write
   themselves in after a pause, so no line can stay hidden. Once connected
   (`.ink-ready`), each stage writes in as it comes into view (`.inked`). The
   mask comes off when the stroke finishes (`.ink-dry`), so the neon's glow is
   never clipped at rest. */
@property --qalam { syntax: "<percentage>"; inherits: false; initial-value: 115%; }
@media screen and (prefers-reduced-motion: no-preference) {
  html.ink .reading-screen .stage:not(.ink-dry) .ur-line { --qalam: -15%; -webkit-mask-image: linear-gradient(to left, #000 var(--qalam), transparent calc(var(--qalam) + 15%)); mask-image: linear-gradient(to left, #000 var(--qalam), transparent calc(var(--qalam) + 15%)); }
  html.ink .reading-screen:not(.ink-ready) .ur-line { animation: qalam 1.5s ease 2.5s both; }
  html.ink .reading-screen:not(.ink-ready) .rom-line { animation: rom-in .7s ease 3.2s both; }
  .ink-ready .stage.inked .ur-line { animation: qalam 1.5s cubic-bezier(.45,.05,.35,1) both; }
  .ink-ready .stage + .stage.inked .ur-line { animation-delay: .45s; }
  .ink-ready .stage.inked .ur-line.neon-nastaliq { animation: qalam 1.5s cubic-bezier(.45,.05,.35,1) both, hum 4.5s ease-in-out 1.5s infinite; }
  .ink-ready .stage + .stage.inked .ur-line.neon-nastaliq { animation-delay: .45s, 1.95s; }
  .ink-ready .stage .rom-line { opacity: 0; transform: translateY(4px); transition: opacity .7s var(--ease) .7s, transform .7s var(--ease) .7s; }
  .ink-ready .stage + .stage .rom-line { transition-delay: 1.15s; }
  .ink-ready .stage.inked .rom-line { opacity: 1; transform: none; }
}
@keyframes qalam { from { --qalam: -15%; } to { --qalam: 115%; } }
@keyframes rom-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- toast: what a copy did, said once ---------- */
.toast { position: fixed; z-index: 10; left: 50%; bottom: calc(var(--gloss-bar-height) + 18px); max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid var(--accent-secondary); border-radius: 99px; background: color-mix(in srgb, var(--bg) 92%, transparent); color: var(--ink); box-shadow: var(--glow-teal); font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .1em; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { display: none; }
html[data-theme="light"] .toast { background: var(--card); box-shadow: var(--shadow-lift); }

/* ---------- phones: one compact nav, one line of header ---------- */
@media (max-width: 560px) {
  .reading-screen nav, .site-nav { flex-wrap: wrap; row-gap: 2px; padding: 12px 16px 6px; }
  .reading-screen nav .layers, .site-nav .layers { width: 100%; margin: 0 -8px; flex-wrap: nowrap; justify-content: space-between; }
  .layers button, .layers a { padding: 8px; letter-spacing: .1em; }
  #theme { margin-left: 0; }
  .poem-stack { margin: 22px 12px calc(var(--gloss-bar-height) + 40px); padding: 26px 18px 36px; }
  .poem-header { flex-wrap: nowrap; gap: 10px; min-width: 0; }
  .poem-header .gh-k, .poem-header .title-roman { display: none; }
  .poem-header .poet-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .poem-header b, .poem-header .poem-position { flex: 0 0 auto; }
  .ur-line { font-size: clamp(1.3rem, 5.8vw, 2.1rem); line-height: 2.1; }
  .sher-mark { display: none; }
  .sher-foot { flex-wrap: wrap; row-gap: 4px; }
  .en-wrap { flex-basis: 100%; }
  .gloss .g-ur { font-size: 23px; }
  .gloss .g-rom, .gloss .g-en { font-size: 15px; }
  html[data-theme="light"] .hero-stage { margin-inline: -14px; padding: 22px 14px 24px; border-radius: 20px; }
}