/* ---------------------------------------------------------------------------
   Design tokens. Two scales - type and space - so nothing is chosen ad hoc.
   Amiri carries display text (titles, chapters): it is a naskh cut made for
   setting, not for UI, and it is what gives Arabic prose its weight. Noto
   Naskh handles running transcript, where legibility beats character.
   --------------------------------------------------------------------------- */
:root{
  /* light */
  --bg:#faf8f3; --panel:#fffdfa; --raise:#f4f0e8;
  --ink:#17150f; --muted:#6b6152; --faint:#9b917f;
  --line:#e4ddcf; --line2:#efe9dd;
  --accent:#15573b; --accent-soft:#e6efe9; --accent-ink:#10432e;
  --accent-deep:#0b3826; --focus:#15573b; --focus-ink:#10432e;
  --chap-soft:#e9efdc; --chap-ink:#3d5520; --chap-accent:#4e6b28;
  --chap-on:#ffffff;
  --mark:#f7e3a0; --mark-ink:#4a3c10;
  --shadow:0 1px 2px rgba(23,21,15,.04), 0 10px 30px rgba(23,21,15,.05);

  /* type scale */
  --t-xs:11.5px; --t-sm:12.5px; --t-base:14.5px; --t-md:16px;
  --t-lg:18px; --t-xl:22px;
  --ar-base:16.5px; --ar-lg:18.5px;

  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px;

  --radius:12px; --radius-sm:8px;
  --measure:880px;
  --font-ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ar:"Amiri","Noto Naskh Arabic",serif;
  --font-read:"Noto Naskh Arabic","Amiri",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="dark"]{
  --bg:#0d0c0a; --panel:#151310; --raise:#1c1a15;
  --ink:#ece6da; --muted:#9a9081; --faint:#6d6558;
  --line:#272420; --line2:#1e1c18;
  --accent:#7fb49c; --accent-soft:#191f1c; --accent-ink:#a3c9b7;
  --accent-deep:#3f6656; --focus:#4f7866; --focus-ink:#749585;
  --chap-soft:#1c2116; --chap-ink:#bccf94; --chap-accent:#59733a;
  --chap-on:#f4f8ea;
  --mark:#4d3f14; --mark-ink:#f2e4b8;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Column layout with the footer pushed down: on a short page (no search yet)
   it settles at the bottom of the window instead of floating just under the
   search box; with results it simply follows them. */
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--t-base)/1.62 var(--font-ui);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
html[lang="ar"] body{font-family:var(--font-read)}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus-ink);outline-offset:2px;border-radius:4px}
.ar{font-family:var(--font-read);direction:rtl;text-align:right;line-height:2.05}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
mark{background:var(--mark);color:var(--mark-ink);border-radius:3px;padding:0 2px;
  font-weight:inherit}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--s5) var(--s7)}

/* ---------- header ---------- */
header.top .wrap{padding-bottom:0}
header.top{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--line);padding:var(--s3) 0 var(--s2);
  transition:padding .18s ease}
.brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2);
  max-height:46px;overflow:hidden;
  transition:max-height .24s cubic-bezier(.4,0,.2,1),
             opacity .18s ease,margin-bottom .24s cubic-bezier(.4,0,.2,1)}
.brand-txt{min-width:0}
.brand h1{font-size:var(--t-lg);margin:0;font-weight:600;letter-spacing:-.02em;
  line-height:1.2}
html[lang="ar"] .brand h1{font-family:var(--font-ar);font-weight:700;
  letter-spacing:0;font-size:var(--t-xl)}
.brand .tag{color:var(--faint);font-size:var(--t-sm);display:block;margin-top:2px;
  font-family:var(--font-ui)}
.ctl{margin-inline-start:auto;display:flex;gap:var(--s2);flex:none}
.ctlbtn{display:inline-flex;align-items:center;gap:6px;padding:6px var(--s3);
  border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--muted);font-family:var(--font-ui);font-size:var(--t-sm);
  cursor:pointer;line-height:1;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s}
.ctlbtn:hover{border-color:var(--focus);color:var(--focus-ink);background:var(--accent-soft)}
.ctlbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- search ---------- */
.searchbox{position:relative}
#q{width:100%;padding:var(--s3) var(--s4);padding-inline-end:44px;
  font-size:var(--t-md);border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);box-shadow:var(--shadow);outline:none;
  transition:padding .18s,font-size .18s,border-color .15s,box-shadow .15s}
#q::placeholder{color:var(--faint)}
#q:focus{border-color:var(--focus);box-shadow:var(--shadow)}
#q.ar{font-family:var(--font-read);direction:rtl;text-align:right}
.spin{position:absolute;inset-inline-end:var(--s4);top:50%;transform:translateY(-50%);
  width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:sp .7s linear infinite;display:none}
@keyframes sp{to{transform:translateY(-50%) rotate(360deg)}}
.opts{display:flex;gap:var(--s4);align-items:center;flex-wrap:nowrap;
  margin-top:var(--s2);min-height:18px;font-size:var(--t-sm);overflow:hidden;
  font-family:var(--font-ui);transition:margin .18s}
.opts>*{flex:none}
.meta{color:var(--muted);margin-inline-start:auto;text-align:end;flex:1 1 auto;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.sw{display:inline-flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;
  user-select:none;white-space:nowrap;transition:color .15s}
.sw input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;
  cursor:pointer;flex:none;margin:0}
.sw:hover{color:var(--ink)}
.sw select{background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:3px var(--s2);font-size:var(--t-sm);cursor:pointer;outline:none;line-height:1.4}
.sw select:focus{border-color:var(--focus)}

/* ---------- autocomplete ---------- */
.ac{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:none}
.ac.open{display:block}
.ac-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);
  cursor:pointer}
.ac-item:hover,.ac-item.sel{background:var(--accent-soft)}
.ac-item .w{font-family:var(--font-ar);font-size:20px;direction:rtl}
.ac-item .n{margin-inline-start:auto;font-size:var(--t-xs);color:var(--faint);
  font-family:var(--font-ui)}
.ac-hint{padding:6px var(--s4);font-size:var(--t-xs);color:var(--faint);
  border-bottom:1px solid var(--line2);font-family:var(--font-ui)}

/* ---------- results ---------- */
.card{display:flex;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line2)}
.card:last-child{border-bottom:0}
.card .thumb{flex:none;display:block}
.card img{width:160px;height:90px;object-fit:cover;border-radius:var(--radius-sm);
  background:var(--raise);display:block}
.card .body{min-width:0;flex:1}
.card h3{margin:0;font-size:var(--t-md);font-weight:600;line-height:1.45}
.card h3.ar{font-family:var(--font-ar);font-size:var(--ar-lg);line-height:1.75;
  font-weight:700}
.card .ttl:hover h3{color:var(--accent)}
.facts{color:var(--faint);font-size:var(--t-sm);display:flex;gap:var(--s2);
  flex-wrap:wrap;align-items:center;margin-top:var(--s2);
  font-variant-numeric:tabular-nums;font-family:var(--font-ui)}
.facts .sep{opacity:.4}
.badge{background:var(--accent-soft);color:var(--accent-ink);padding:2px 9px;
  border-radius:999px;font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  font-variant-numeric:normal}
.badge.hollow{background:transparent;border:1px solid var(--line);color:var(--muted)}

.chaps{margin-top:var(--s3);display:flex;flex-direction:column;gap:2px}
.chap{display:flex;gap:var(--s3);align-items:baseline;padding:7px var(--s3);
  border-radius:var(--radius-sm);cursor:pointer;
  border-inline-start:2px solid var(--accent);background:var(--accent-soft);
  transition:filter .12s}
.chap:hover{filter:brightness(.97)}
:root[data-theme="dark"] .chap:hover{filter:brightness(1.25)}
.chap-t{font-family:var(--font-ar);font-size:var(--ar-base);color:var(--ink);
  font-weight:700;line-height:1.8;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}

.hits{margin-top:var(--s2);display:flex;flex-direction:column}
.hit{display:flex;gap:var(--s3);align-items:baseline;padding:5px var(--s3);
  border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
.hit:hover{background:var(--raise)}
.hit:hover .ts{background:var(--accent);color:var(--panel)}
.ts{flex:none;color:var(--accent);font-variant-numeric:tabular-nums;
  font-size:var(--t-xs);background:var(--accent-soft);padding:3px 7px;
  border-radius:5px;font-family:var(--font-mono);
  transition:background .12s,color .12s}
.snip{color:var(--muted);font-size:var(--t-base);line-height:2;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- states ---------- */
.empty{text-align:center;color:var(--muted);padding:var(--s7) var(--s5)}
.empty h2{font-weight:600;font-size:var(--t-lg);color:var(--ink);margin:0 0 var(--s2)}
.empty p{margin:0;font-size:var(--t-base);max-width:420px;margin-inline:auto;line-height:1.8}
.landing{display:none}
#more{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s5) 0 var(--s2)}
.loadmore{padding:10px var(--s5);border-radius:999px;border:1px solid var(--line);
  background:transparent;font-family:var(--font-ui);font-size:var(--t-base);
  font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.loadmore:hover{border-color:var(--focus);color:var(--focus-ink)}
.more-note{font-size:var(--t-sm);color:var(--faint);font-family:var(--font-ui)}

/* ---------- video page ---------- */
.topbar{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 var(--s3)}
.back{color:var(--muted);font-size:var(--t-base);font-family:var(--font-ui)}
.back:hover{color:var(--accent)}
.player{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radius);
  overflow:hidden;background:#000;box-shadow:var(--shadow)}
.player #yt,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vtitle{font-family:var(--font-ar);font-size:var(--t-xl);font-weight:700;
  line-height:1.65;margin:var(--s5) 0 var(--s2)}
.vfacts{color:var(--faint);font-size:var(--t-sm);display:flex;gap:var(--s2);
  flex-wrap:wrap;align-items:center;margin-bottom:var(--s5);
  font-variant-numeric:tabular-nums;font-family:var(--font-ui)}
.chapbox{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);margin:0 0 var(--s4);overflow:hidden}
.chapbox summary{padding:var(--s3) var(--s4);cursor:pointer;font-size:var(--t-base);
  font-weight:600;color:var(--accent);user-select:none;list-style:none;
  font-family:var(--font-ui)}
.chapbox summary::-webkit-details-marker{display:none}
.chapbox summary::before{content:"▸ ";font-size:10px}
.chapbox[open] summary::before{content:"▾ "}
.chaplist{max-height:300px;overflow-y:auto;border-top:1px solid var(--line2);
  padding:var(--s2)}
.chapitem{display:flex;gap:var(--s3);align-items:baseline;padding:6px var(--s3);
  border-radius:var(--radius-sm);cursor:pointer}
.chapitem:hover{background:var(--chap-soft)}
.chapitem.on{background:var(--chap-soft);font-weight:700}
.chapitem.on .ts{background:var(--chap-accent);color:var(--chap-on)}
.chapitem.on .ar{color:var(--chap-ink)}
.chapbox summary{color:var(--chap-ink)}
.chapitem .ar{font-family:var(--font-ar);font-size:var(--ar-base);line-height:1.75}
.trbar{display:flex;gap:var(--s3);align-items:center;margin:0 0 var(--s2);
  flex-wrap:wrap;position:sticky;top:0;z-index:12;background:var(--bg);
  padding:var(--s3) 0}
.trbar input#tfind{flex:1;min-width:200px;padding:9px var(--s3);
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);
  font-size:var(--t-base);outline:none}
.trbar input#tfind:focus{border-color:var(--focus)}
.pos{font-size:var(--t-sm);color:var(--faint);font-variant-numeric:tabular-nums;
  white-space:nowrap;margin-inline-start:auto;font-family:var(--font-ui)}
.tr{display:flex;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--radius-sm);
  cursor:pointer;transition:background .2s,opacity .2s}
.tr:hover{background:var(--raise)}
.tr .txt{flex:1;min-width:0;font-size:var(--ar-base)}
.tr.past .txt,.tr.past .ts{opacity:.42}
/* The active line is told by its fill and its timestamp, like every other
   accent on the site. The drawn edge was the last one left. */
.tr.on{background:var(--accent-soft)}
.tr.on .txt{opacity:1}
.tr.on .ts{opacity:1;background:var(--accent);color:var(--panel)}
.floatbar{position:fixed;left:0;right:0;margin-inline:auto;width:max-content;
  bottom:var(--s5);z-index:60;display:flex;gap:var(--s2);align-items:center;
  pointer-events:none;
  /* Centred by auto margins rather than left:50% + translate: a positioned
     box with left:50% shrinks to the half-viewport it has left, and once
     the bar may wrap that meant two rows from tablets down. Four buttons
     at once are 387px; narrower than that the bar wraps, never clips. */
  flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px)}
.floatbar .jump{pointer-events:auto}
.jump{padding:9px var(--s4);border-radius:999px;border:1px solid var(--accent);
  background:var(--accent);color:var(--panel);font-family:var(--font-ui);
  font-size:var(--t-base);font-weight:600;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.22);white-space:nowrap}
.jump#top{background:var(--panel);color:var(--accent)}
.jump:hover{filter:brightness(1.06)}
.jump#top:hover{background:var(--accent-soft)}
.note{background:var(--accent-soft);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--s3) var(--s4);font-size:var(--t-sm);
  color:var(--muted);margin:var(--s4) 0}

/* ---------- Arabic keyboard ---------- */
.kbrow{margin-top:var(--s2)}
.kbtoggle{padding:5px var(--s3);border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);font-family:var(--font-ui);
  font-size:var(--t-sm);cursor:pointer;transition:border-color .15s,color .15s}
.kbtoggle:hover,.kbtoggle.on{border-color:var(--focus);color:var(--focus-ink)}
.kbtoggle.on{background:var(--accent-soft)}
.kb{margin-top:var(--s2);padding:var(--s2);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);
  direction:rtl}
.kb-row{display:flex;gap:4px;justify-content:center;margin-bottom:4px}
.kb-row:last-child{margin-bottom:0}
.kb-k{min-width:34px;height:36px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);
  font-family:var(--font-ar);font-size:18px;cursor:pointer;
  transition:background .1s,border-color .1s}
.kb-k:hover{background:var(--accent-soft);border-color:var(--focus)}
.kb-k:active{transform:translateY(1px)}
.kb-k.wide{min-width:60px;font-size:var(--t-base);font-family:var(--font-ui)}

/* ---------- compact header while reading results ---------- */
/* One easing and one duration across every property, so the header reads as a
   single movement rather than several racing each other. */
header.top{transition:padding .24s cubic-bezier(.4,0,.2,1)}
header.top.compact{padding:8px 0}
header.top.compact .brand{max-height:0;opacity:0;margin-bottom:0;pointer-events:none}
header.top.compact #q{padding:8px var(--s3);padding-inline-end:38px;font-size:var(--t-base)}
header.top.compact .opts{margin-top:7px}
header.top.compact .kbrow{max-height:0;opacity:0;overflow:hidden}
.kbrow{max-height:40px;overflow:hidden;
  transition:max-height .24s cubic-bezier(.4,0,.2,1),opacity .18s ease}
#q{transition:padding .24s cubic-bezier(.4,0,.2,1),font-size .24s cubic-bezier(.4,0,.2,1),
   border-color .15s,box-shadow .15s}
.opts{transition:margin-top .24s cubic-bezier(.4,0,.2,1)}

@media(max-width:700px){
  .wrap{padding-left:var(--s4);padding-right:var(--s4)}
  .card{gap:var(--s3);padding:var(--s4) 0}
  .card img{width:104px;height:59px}
  .brand h1{font-size:var(--t-md)}
  .opts{gap:var(--s3)}
  .kb{padding:6px}
  .kb-row{gap:3px}
  .kb-k{min-width:0;flex:1 1 0;height:34px;font-size:16px}
  .kb-k.wide{flex:1.6 1 0;font-size:13px}
  }
@media (prefers-reduced-motion:reduce){.tr,.hit,.card,.chap,header.top,#q{transition:none}}






.brand-txt{display:block;min-width:0}
a.brand-txt:hover h1{color:var(--accent)}
a.brand-txt h1{transition:color .15s}


/* --- the empty state: the du'a, then what this is --- */
.about{max-width:620px;margin:0 auto;padding:var(--s6) 0 var(--s7);color:var(--faint)}
.about p{margin:0 0 var(--s4)}
/* the du'a and the salat stay in Arabic whatever the interface language */
.about .dua{margin-bottom:var(--s2);font-family:var(--font-ar);
  font-size:var(--ar-base);line-height:2.2;direction:rtl;text-align:right;
  color:var(--muted)}
.about .dua.salat{margin-bottom:var(--s5);padding-bottom:var(--s5);
  border-bottom:1px solid var(--line2)}
/* the introduction reads at the same weight as the caveats under it */
.about .lede,.about .caveat{font-size:var(--t-sm);color:var(--faint);line-height:1.75}
.about.ar .lede,.about.ar .caveat{font-family:var(--font-read);line-height:2}
.about .caveat a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.about .caveat a:hover{color:var(--muted)}

/* ---------------------------------------------------------------------------
   Accent treatment: flat, borderless, both themes.
   The drawn edges came from PostHog, where they belong to buttons. Repeated
   down a list of results they turned every chapter into an outlined box and
   the green ended up ringing the whole page. Fill alone carries the accent
   now; the hard offsets went with the borders, since a cast shadow with no
   edge to cast from reads as a smudge rather than a lift.
   --------------------------------------------------------------------------- */

/* filled actions */
.jump{border:0;border-radius:6px;box-shadow:none;
  transition:filter .12s,background .12s}
.jump:hover{filter:brightness(1.08);transform:none}
.jump:active{transform:translateY(1px)}
/* Back to the video. It was filled with --raise, which sits at 1.07 contrast
   against the page in both themes - a button you had to know was there. Ink
   fill reads at 17:1 and stays neutral, so the green button beside it keeps
   being the coloured one. */
.jump#top,.jump.ctl{background:var(--ink);color:var(--bg)}
.jump#top:hover,.jump.ctl:hover{background:var(--ink);filter:brightness(1.25)}
/* Player controls that travel with the transcript. Icons only, so the bar
   still fits a phone beside the two text buttons; the pair keeps the player's
   own left-to-right order whatever the page direction. */
.floatbar .ctls{display:flex;gap:var(--s2);direction:ltr}
.floatbar .ctls[hidden]{display:none}
.jump.ctl{padding:9px 11px;line-height:0}
.jump.ctl svg{width:18px;height:18px;fill:currentColor;display:block}

/* outlined controls keep a neutral edge - it is structure, not accent */
.ctlbtn,.loadmore{border-radius:6px;border-width:1px;
  transition:background .12s,border-color .12s,color .12s}
/* Outlined controls hover into the same muted green as a focused field, not
   into the display accent: at 1px on a dark panel the accent lit up. */
.ctlbtn:hover,.loadmore:hover{background:var(--accent-soft);
  border-color:var(--focus);color:var(--focus-ink);
  box-shadow:none;transform:none}

/* timestamps and counts: flat chips, no outline */
.ts{border:0;border-radius:4px;background:var(--accent-soft);
  color:var(--accent-ink);font-weight:600}
.hit:hover .ts,.tr.on .ts{
  background:var(--accent);color:var(--panel)}
.badge{border:0;border-radius:5px;background:var(--accent-soft);color:var(--accent-ink)}
.badge.hollow{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* Chapter hits are told apart by hue, not by an edge: a warm gold against the
   green everything else uses. Hand-written titles deserve to look different
   from machine transcript, and colour says that without drawing a box. */
.chap{border:0;border-radius:6px;box-shadow:none;background:var(--chap-soft);
  transition:filter .12s}
.chap:hover{filter:brightness(.97);transform:none;background:var(--chap-soft)}
:root[data-theme="dark"] .chap:hover{filter:brightness(1.25)}
.chap .chap-t{color:var(--chap-ink)}
.chap .ts{background:var(--chap-accent);color:var(--chap-on)}

/* Focus on a text field is a single crisp edge. The halo it replaces was three
   layers deep - an offset outline, a soft ring and a lit border - and on the
   dark panel that stack read as neon. Doubling the border inward gives the
   field a visible focused edge with no glow and no reflow. */
#q:focus,.trbar input#tfind:focus{border-color:var(--focus);
  box-shadow:var(--shadow)}
#q:focus-visible,.trbar input#tfind:focus-visible{outline:none}

/* a search hit reads like a marker swipe */
mark{border-radius:2px;padding:1px 2px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}

.chapitem.on{border-inline-start:0;padding-inline-start:var(--s3)}


/* Reporting a transcript line. Hidden until the row is hovered or playing, so
   a page of prose stays a page of prose; always shown on touch, where there is
   no hover to reveal it with. */
.rep{flex:none;align-self:flex-start;width:20px;height:20px;border:0;
  border-radius:5px;background:transparent;color:var(--faint);
  font:600 12px/1 var(--font-ui);cursor:pointer;opacity:0;
  transition:opacity .12s,background .12s,color .12s}
.tr:hover .rep,.tr.on .rep,.rep:focus-visible{opacity:1}
.rep:hover{background:var(--raise);color:var(--ink)}
.rep.done{opacity:1;color:var(--accent);cursor:default}
.rep:disabled{cursor:default}
@media (hover:none){.rep{opacity:.55}}

.repbox{margin:var(--s1) 0 var(--s3);padding:var(--s3);border-radius:var(--radius-sm);
  background:var(--raise);display:flex;flex-direction:column;gap:var(--s2)}
/* The panel fill is the theme's; the text colour has to be too, or the dark
   theme paints the browser's default black onto a near-black field. */
.repbox textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);color:var(--ink);padding:var(--s2);
  font:var(--t-base)/1.5 var(--font-read);resize:vertical;outline:none}
.repbox textarea::placeholder{color:var(--faint)}
.repbox textarea:focus{border-color:var(--focus)}
.repact{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.repsend,.repcancel{border:0;border-radius:6px;padding:6px var(--s3);cursor:pointer;
  font:600 var(--t-sm)/1 var(--font-ui)}
.repsend{background:var(--accent);color:var(--panel)}
.repsend:disabled{opacity:.6;cursor:default}
.repcancel{background:transparent;color:var(--muted)}
.repcancel:hover{color:var(--ink)}
.repmsg{font-size:var(--t-sm);color:var(--muted)}

/* The channel's own description. Folded by default so the page still opens on
   the video and the transcript, but present in the markup either way. */
.vdesc{margin:var(--s3) 0;padding:var(--s3);border-radius:var(--radius-sm);
  background:var(--raise)}
.vdesc summary{cursor:pointer;font:600 var(--t-sm)/1.4 var(--font-ui);
  color:var(--muted);list-style:none}
.vdesc summary::-webkit-details-marker{display:none}
.vdesc summary:hover{color:var(--ink)}
.vdesc>div{margin-top:var(--s2);font-size:var(--ar-base);line-height:1.9;
  color:var(--ink);white-space:normal}

/* Used for a single unpainted frame while the script measures how much height
   the compact header removes. The children carry the animation, so the header
   alone is not enough to freeze. */
header.top.measuring,header.top.measuring *{transition:none!important}