/* Mobile-first: base rules target a 390px phone; min-width queries add the wider layouts.
   Colours are tokens on :root (dark, the default) and redefined once for light mode, both for the system
   preference (prefers-color-scheme) and for the explicit choice stored by static/theme.js (data-theme).
   Every colour in this file, glossary.css, typeahead.css, explorer.css and print.css is one of these tokens. */

/* ---- self-hosted fonts (SIL Open Font License); latin + latin-ext + arabic subsets, variable weight.
        Noto Naskh Arabic is the Arabic body face, Noto Nastaliq Urdu the Urdu one (docs/I18N.md). ---- */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Nastaliq Urdu';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/noto-nastaliq-urdu-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/noto-naskh-arabic-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF0-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}

/* ---- tokens: dark (default) ---- */
:root{
  color-scheme:dark;
  --bg:#0B0F17;--card:#121826;--line:#232B3A;--ink:#EEF2F7;--ink2:#A5B1C2;--mute:#8B98AA;
  --cyan:#22D3EE;--cyan2:#67E8F9;--oncyan:#0B0F17;--cyanbg:#0F2430;--cyanline:#1E5A66;--cyantint:rgba(34,211,238,.45);--cyanglow:rgba(34,211,238,.45);
  --violet:#8B5CF6;--violet2:#C4B5FD;--violetbg:#1A1530;
  --amber:#F5C66B;--amberbg:#1F1A0E;--amberline:rgba(245,198,107,.35);
  --blue:#3987E5;--strong:#fff;
  --glass:rgba(255,255,255,.06);--glassline:rgba(255,255,255,.12);--glassline2:rgba(255,255,255,.18);--hairline:rgba(255,255,255,.08);
  --hover:#161E2E;--headbg:rgba(11,15,23,.88);--popbg:rgba(14,19,29,.92);--shadow:rgba(0,0,0,.45);--shadow2:rgba(0,0,0,.6);
  --player1:#141C2B;--player2:#070A10;--pill:#A5F3FC;--pillbg:rgba(34,211,238,.08);--pillline:rgba(103,232,249,.35);
  --hero1:#fff;--hero2:#A5F3FC;--hero3:#C4B5FD;--heroglow:rgba(139,92,246,.45);
  --tier-machine:#4B5563;--tier-corrected:#2B66C4;--tier-verified:#0F7A2E;--ontier:#fff;
  --markbg:#F5C66B;--onmark:#0B0F17;
  --k-question:#3987E5;--k-lesson:#8B5CF6;--k-discussion:#0E7490;--k-recitation:#B45309;--k-announcement:#4B5563;--k-other:#374151;
  --logoring:rgba(34,211,238,.6);
  --headh:56px;--tap:44px;--scale:1;--measure:70ch
}
/* ---- tokens: light. Checked for contrast: body text 17:1, secondary 7.9:1, muted 5.4:1, links 5.4:1,
        text on cyan 5.4:1, amber on its tint 6.8:1, violet on its tint 7.8:1, white on every tier badge >= 5.4:1. ---- */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F4F6FA;--card:#FFFFFF;--line:#D7DDE7;--ink:#0B0F17;--ink2:#44526A;--mute:#5B6B7F;
    --cyan:#0E7490;--cyan2:#0E7490;--oncyan:#FFFFFF;--cyanbg:#E0F7FB;--cyanline:#8ED9E6;--cyantint:rgba(14,116,144,.45);--cyanglow:rgba(14,116,144,.25);
    --violet:#6D28D9;--violet2:#5B21B6;--violetbg:#F1ECFF;
    --amber:#7A4B00;--amberbg:#FFF4D6;--amberline:rgba(122,75,0,.3);
    --blue:#1D5FBF;--strong:#0B0F17;
    --glass:rgba(11,15,23,.04);--glassline:rgba(11,15,23,.12);--glassline2:rgba(11,15,23,.2);--hairline:rgba(11,15,23,.08);
    --hover:#EEF2F8;--headbg:rgba(244,246,250,.9);--popbg:rgba(255,255,255,.95);--shadow:rgba(15,23,42,.14);--shadow2:rgba(15,23,42,.2);
    --player1:#E6EBF3;--player2:#CBD3E0;--pill:#0E7490;--pillbg:rgba(14,116,144,.08);--pillline:rgba(14,116,144,.35);
    --hero1:#0B0F17;--hero2:#0E7490;--hero3:#5B21B6;--heroglow:rgba(139,92,246,.18);
    --tier-machine:#4B5563;--tier-corrected:#1D5FBF;--tier-verified:#166F26;
    --markbg:#FDE68A;--onmark:#0B0F17;--logoring:rgba(11,15,23,.14);
    --k-discussion:#0E7490
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F6FA;--card:#FFFFFF;--line:#D7DDE7;--ink:#0B0F17;--ink2:#44526A;--mute:#5B6B7F;
  --cyan:#0E7490;--cyan2:#0E7490;--oncyan:#FFFFFF;--cyanbg:#E0F7FB;--cyanline:#8ED9E6;--cyantint:rgba(14,116,144,.45);--cyanglow:rgba(14,116,144,.25);
  --violet:#6D28D9;--violet2:#5B21B6;--violetbg:#F1ECFF;
  --amber:#7A4B00;--amberbg:#FFF4D6;--amberline:rgba(122,75,0,.3);
  --blue:#1D5FBF;--strong:#0B0F17;
  --glass:rgba(11,15,23,.04);--glassline:rgba(11,15,23,.12);--glassline2:rgba(11,15,23,.2);--hairline:rgba(11,15,23,.08);
  --hover:#EEF2F8;--headbg:rgba(244,246,250,.9);--popbg:rgba(255,255,255,.95);--shadow:rgba(15,23,42,.14);--shadow2:rgba(15,23,42,.2);
  --player1:#E6EBF3;--player2:#CBD3E0;--pill:#0E7490;--pillbg:rgba(14,116,144,.08);--pillline:rgba(14,116,144,.35);
  --hero1:#0B0F17;--hero2:#0E7490;--hero3:#5B21B6;--heroglow:rgba(139,92,246,.18);
  --tier-machine:#4B5563;--tier-corrected:#1D5FBF;--tier-verified:#166F26;
  --markbg:#FDE68A;--onmark:#0B0F17;--logoring:rgba(11,15,23,.14);
  --k-discussion:#0E7490
}
/* text size: three steps, chosen in the header menu and kept in localStorage */
:root[data-text="s"]{--scale:.9}:root[data-text="l"]{--scale:1.15}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--headh) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:calc(16px * var(--scale));line-height:1.5;overflow-wrap:break-word}
img,svg,iframe{max-width:100%}
a{color:var(--cyan2)}h1,h2,h3{font-family:'Space Grotesk',Inter,sans-serif;letter-spacing:-.02em;margin:.2em 0;overflow-wrap:anywhere}
h1{font-size:clamp(22px,6vw,40px);line-height:1.15}h2{font-size:20px}h3{font-size:16px}
[lang="ar"]{font-family:'Noto Naskh Arabic',serif}[lang="ur"]{font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
#main>h1:first-child,#main>.prose:first-child>h1:first-child{margin-top:24px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.head{justify-content:space-between;margin:28px 0 12px}
.row.tight{gap:8px}.row.between{justify-content:space-between;align-items:flex-end}.grow{flex:1 1 280px;min-width:0}.small{font-size:13px}
code{font-size:12px;background:var(--bg);border-radius:4px;padding:1px 6px;overflow-wrap:anywhere}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:9;background:var(--cyan);color:var(--oncyan);font-weight:700;padding:10px 14px;border-radius:8px;text-decoration:none}.skip:focus{top:8px}
.notice{background:var(--amberbg);color:var(--amber);font-size:12px;font-weight:600;text-align:center;padding:6px 16px}
.note{margin:0;font-size:13px;border-radius:8px;padding:8px 12px;background:var(--card);border:1px solid var(--line)}
.tablewrap{overflow-x:auto;max-width:100%}table{border-collapse:collapse;min-width:480px}
p.lead{font-size:calc(17px * var(--scale));line-height:1.55;max-width:var(--measure)}
/* header */
.top{position:sticky;top:0;z-index:5;background:var(--headbg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.top .row{min-height:var(--headh);flex-wrap:nowrap;gap:8px;position:relative}
.brand .beta{font:700 10px/1 var(--sans,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--pill);background:var(--pillbg);border:1px solid var(--pillline);border-radius:999px;padding:4px 7px;margin-inline-start:-2px}
.brand{color:var(--strong);text-decoration:none;font-weight:800;font-size:17px;display:flex;align-items:center;gap:10px;min-height:var(--tap);flex:0 0 auto}.brand .name{display:none}
/* the logo: the channel's black-and-white avatar, a circle with a thin accent ring so its dark edge reads on the dark header */
.logo{display:block;width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:var(--player2);box-shadow:0 0 0 1.5px var(--logoring),0 0 16px var(--cyanglow)}
.hsearch{display:none;flex:1 1 160px;min-width:0;max-width:360px}.hsearch input{width:100%;background:var(--glass);border:1px solid var(--glassline);border-radius:10px;color:var(--ink);padding:10px 12px;font:inherit;font-size:14px;min-height:var(--tap)}
.actions{margin-inline-start:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ibtn{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:var(--ink);background:transparent;border:1px solid transparent;cursor:pointer;text-decoration:none;padding:0}.ibtn:hover{border-color:var(--line);background:var(--card)}
.ibtn[aria-expanded="true"]{border-color:var(--line);background:var(--card)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 14px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer;text-decoration:none}.btn:hover{border-color:var(--cyantint)}
.btn.primary,.btn.yt{color:var(--oncyan);background:var(--cyan);border-color:var(--cyan)}.btn.yt:hover{background:var(--cyan2);border-color:var(--cyan2)}
.btn.pat{color:var(--ink);background:var(--glass);border-color:var(--glassline2)}
.btn.small{min-height:36px;padding:0 10px;font-size:13px}
.btn.save[aria-pressed="true"]{color:var(--oncyan);background:var(--cyan);border-color:var(--cyan)}.btn.save[aria-pressed="true"] svg{fill:currentColor}
.top .btn{padding:0 10px}.top .btn span{display:none}.top .btn.yt{width:var(--tap);padding:0}.top .btn.pat{width:var(--tap);padding:0}
.top nav{display:flex;flex-direction:column;position:absolute;top:100%;inset-inline:0;background:var(--card);border-bottom:1px solid var(--line);padding:8px 16px 12px;box-shadow:0 20px 40px var(--shadow)}
.top nav a{color:var(--ink2);text-decoration:none;font-weight:600;font-size:16px;display:flex;align-items:center;min-height:var(--tap);padding:0 8px;border-radius:8px}.top nav a:hover{color:var(--strong);background:var(--glass)}
.js .top nav:not(.open){display:none}
.prefsbtn,.savedbtn{display:none}
/* display settings (theme and text size): inside the menu on narrow screens, a popover from the header on wide ones */
.prefs{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);margin-top:8px;padding:12px 8px 0}
.prefs p{margin:0}
.pref{border:0;margin:0;padding:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.pref legend,.pref .legend{float:inline-start;font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;padding:0;margin-inline-end:8px;min-width:72px}
.pref label{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;background:var(--bg)}
.pref label:has(input:checked){background:var(--cyan);color:var(--oncyan);border-color:var(--cyan)}
.pref label:has(input:focus-visible){outline:2px solid var(--cyan2);outline-offset:2px}
.pref input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pref .ts-s{font-size:12px}.pref .ts-m{font-size:15px}.pref .ts-l{font-size:19px}
/* hero and tiles */
.hero{text-align:center;padding:36px 0 28px;display:flex;flex-direction:column;align-items:center;gap:16px;background:radial-gradient(ellipse 60% 70% at 50% -10%,var(--heroglow),transparent 70%)}
.hero h1{font-size:clamp(26px,7vw,52px);line-height:1.08;max-width:880px;background:linear-gradient(90deg,var(--hero1),var(--hero2) 45%,var(--hero3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--ink2);max-width:720px;margin:0;font-size:16px}.hero p.small{font-size:13px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--pill);border:1px solid var(--pillline);background:var(--pillbg);border-radius:999px;padding:6px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.bigsearch{display:flex;gap:6px;width:100%;max-width:820px;background:var(--glass);border:1px solid var(--glassline);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;padding:6px;box-shadow:0 20px 60px var(--shadow)}
.bigsearch input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px;padding:10px 10px;min-height:var(--tap)}
.bigsearch button,button.play{font:inherit;font-weight:700;color:var(--oncyan);background:var(--cyan);border:0;border-radius:10px;padding:0 18px;min-height:var(--tap);cursor:pointer}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}.tiles .tile{padding:14px}
.tile,.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);min-width:0}
.tile b{font-size:24px;letter-spacing:-.02em;line-height:1.15}.tiles .tile span{font-size:calc(13px * var(--scale));line-height:1.4}.tile span,.card span{color:var(--ink2);font-size:calc(14px * var(--scale))}.card small{color:var(--mute);font-size:12px}.card b{font-size:16px;line-height:1.3}.card .t{text-decoration:none;color:inherit}
.card:hover,a.tile:hover{border-color:var(--cyantint);transform:translateY(-2px);transition:.15s}
.grid3{display:grid;grid-template-columns:1fr;gap:12px}
.continue{margin-top:16px}.continue .rel{padding:4px 0}.continue .eyebrow{display:block;margin-bottom:2px}
/* lists */
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.item{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 16px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);align-items:center;min-width:0}
.item:first-child{border-top:0}a.item:hover{background:var(--hover)}.kind{font-size:12px;color:var(--mute);text-transform:capitalize}.meta{font-size:13px;color:var(--mute)}
.item .t{min-width:0}.item.seg .t small,.item.gap .t small{display:block;font-size:12px;color:var(--mute)}.item.gap .kind{text-transform:none}.item .meta .tier{margin-inline-end:6px}.list.quiet .item{color:var(--ink2)}
.item.feed .kind{color:var(--amber)}.item.feed .t small{display:block;font-size:12px;color:var(--mute)}.item.feed .meta a{font-weight:700;text-decoration:none}
.muted{color:var(--ink2)}.crumbs{font-size:13px;color:var(--ink2);margin:14px 0 8px}.crumbs{line-height:1.7}.crumbs a{text-decoration:none;font-weight:600;padding:10px 2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.chip{display:inline-flex;align-items:center;min-height:36px;font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:0 12px;color:var(--ink);background:var(--card)}.chip:hover{border-color:var(--cyantint)}
.filter{width:100%;max-width:420px;margin:12px 0;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 12px;font:inherit;font-size:16px;min-height:var(--tap)}
/* player: a 16:9 placeholder until play is pressed; once playing it sticks under the header as a bar */
.player{aspect-ratio:16/9;background:radial-gradient(ellipse at 50% 50%,var(--player1),var(--player2));border:1px solid var(--hairline);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink2);font-size:13px;margin:16px 0;overflow:hidden;text-align:center;padding:12px}
.player b{font-size:15px;color:var(--strong)}.player a{color:var(--strong);font-size:13px;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px}
button.play{width:64px;height:64px;border-radius:50%;font-size:24px;padding:0}
/* thumbnail behind the play button: the whole placeholder is the play target */
.player[data-yt]:not(.playing){position:relative;cursor:pointer;isolation:isolate}
.player .pthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.player:has(.pthumb):not(.playing)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72))}
.player:has(.pthumb):not(.playing),.player:has(.pthumb):not(.playing) b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.player:has(.pthumb):not(.playing):hover button.play{transform:scale(1.06)}
button.play{transition:transform .15s}
.player.playing{position:sticky;top:var(--headh);z-index:4;aspect-ratio:auto;height:calc(56.25vw + var(--tap));padding:0;gap:0;margin:12px -16px;border-radius:0 0 14px 14px;background:var(--player2);border-inline:0}
.player.playing iframe{width:100%;flex:1;min-height:0;border:0}
.player.playing.compact{height:calc(120px + var(--tap))}.player.playing.compact iframe{flex:0 0 120px}
.pctl{display:flex;justify-content:flex-end;gap:4px;width:100%;height:var(--tap);padding:0 8px;background:var(--bg);border-top:1px solid var(--line)}
.pctl button{font:inherit;font-size:12px;font-weight:700;color:var(--ink2);background:transparent;border:0;min-width:var(--tap);min-height:var(--tap);padding:0 10px;cursor:pointer;border-radius:8px}.pctl button:hover{color:var(--strong);background:var(--card)}
/* tier badges, with the trust tooltip (data-tip) on hover, tap and focus */
.tier{display:inline-block;position:relative;font-size:12px;font-weight:700;color:var(--ontier);border-radius:4px;padding:3px 8px;text-transform:capitalize;line-height:1.3}.tier.machine{background:var(--tier-machine)}.tier.corrected{background:var(--tier-corrected)}.tier.verified{background:var(--tier-verified)}
.tier[data-tip]{cursor:help}.tier[data-tip]:focus{outline:none}.tier[data-tip]:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}
.tier[data-tip]:hover::after,.tier[data-tip]:focus::after{content:attr(data-tip);position:absolute;inset-inline-start:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:min(260px,80vw);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;font-weight:500;line-height:1.4;text-transform:none;white-space:normal;text-align:start;box-shadow:0 10px 30px var(--shadow)}
.right .tier[data-tip]:hover::after,.right .tier[data-tip]:focus::after,.meta .tier[data-tip]:hover::after,.meta .tier[data-tip]:focus::after{inset-inline-start:auto;inset-inline-end:0}
/* transcript: a comfortable measure, glossary terms dotted (glossary.css) */
.transcript{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:16px}.transcript .head{margin:0 0 12px}
.para{display:flex;gap:12px;align-items:flex-start;padding:6px 0}.para p{margin:0;font-size:calc(16px * var(--scale));line-height:1.65;min-width:0;max-width:var(--measure)}.ts{flex:0 0 60px;font-size:13px;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;min-height:var(--tap);padding-top:3px}
@media (max-width:639.98px){.para{flex-direction:column;gap:0}.ts{flex:0 0 auto;min-height:32px;align-items:center;padding-top:0}}
.para.active{background:var(--cyanbg);border-radius:8px;margin:0 -8px;padding:6px 8px}
.para:target{background:var(--cyanbg);border-radius:8px;margin:0 -8px;padding:6px 8px}
/* share, save, cite */
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.share-btn{font:inherit;font-size:14px;font-weight:700;color:var(--oncyan);background:var(--cyan);border:1px solid var(--cyan);border-radius:10px;padding:0 12px;min-height:var(--tap);cursor:pointer}
.share-btn.alt{color:var(--ink);background:var(--card);border-color:var(--line)}
.share-btn:hover{border-color:var(--cyan2)}.share-btn:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}
.share-status{display:block;font-size:13px;color:var(--ink2);min-height:1.2em;flex:1 1 100%}.share .share-status:empty{min-height:0;margin-top:-8px}
.cite-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:20px}
.cite-box .head{margin:0 0 12px}.cite-box .muted{font-size:13px}
.cite-archive{font-size:15px;line-height:1.6;margin:0 0 16px}
.cite-formats{margin:0;display:grid;gap:6px}.cite-formats dt{font-weight:700;font-size:14px;color:var(--ink2);display:flex;gap:10px;align-items:center;margin-top:8px}
.cite-formats dd{margin:0}.cite-formats pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.55;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.cite-box .copy{font:inherit;font-size:12px;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-height:32px;cursor:pointer}
.cite-box .copy:hover{border-color:var(--cyan2)}.cite-box .copy:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}
.cite-box .share-status{margin-top:8px}
/* segment layer */
.cols{display:flex;flex-direction:column;gap:20px;margin-top:8px}.main{min-width:0;display:flex;flex-direction:column;gap:16px}.side{min-width:0;display:flex;flex-direction:column;gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}.panel h2{font-size:15px;font-weight:800;margin:0}.panel p{margin:0}.panel .head{margin:0}
.panel>.kv{min-height:32px;padding:2px 0;font-size:14px;font-weight:600}.panel>.kv+.kv{margin-top:-6px}.panel>.rel{padding:4px 0;min-height:36px}.panel .chips{margin:0}
.eyebrow{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}.eyebrow.guest{color:var(--amber)}.eyebrow.quoted{color:var(--violet2)}
.seghead{display:flex;flex-direction:column;gap:10px}.seghead h1{margin:0;font-size:clamp(22px,6vw,32px);line-height:1.2}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.topbar .save{margin-inline-start:auto}
.meta2{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:var(--ink2);margin:0}.summary{margin:0;font-size:calc(16px * var(--scale));color:var(--ink2);max-width:var(--measure)}
.question{margin:0;background:var(--card);border-inline-start:3px solid var(--violet);border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:12px;border-end-end-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.question p{margin:0;font-size:calc(16px * var(--scale));line-height:1.6;max-width:var(--measure)}
/* the quoted-view callout: a view stated in order to be discussed is never shown as his position */
.callout{margin:0;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;border:1px solid}.callout p{margin:0;font-size:14px;line-height:1.5}
.callout.quoted{background:var(--violetbg);border-color:var(--violet2);color:var(--ink)}.callout.quoted .eyebrow{color:var(--violet2)}.callout.quoted.soft{border-style:dashed}
.badge{display:inline-block;font-size:12px;font-weight:700;border-radius:4px;padding:3px 8px;font-style:normal;vertical-align:middle;line-height:1.3}.badge.latest{color:var(--oncyan);background:var(--cyan)}.badge.superseded{color:var(--amber);background:var(--amberbg);border:1px solid var(--amberline)}.segcard .t .badge,.item .t .badge{margin-inline-end:8px}
.banner{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink);border-radius:12px;padding:12px 14px;border:1px solid}.banner.newer,.banner.revised{background:var(--amberbg);border-color:var(--amberline)}.banner.newer .eyebrow,.banner.revised .eyebrow{color:var(--amber)}.banner.latest{background:var(--cyanbg);border-color:var(--cyanline)}.banner.latest .eyebrow{color:var(--cyan2)}.banner .t{font-size:15px;font-weight:700}.banner .small{color:var(--ink2)}.banner:hover{border-color:var(--cyan)}
/* the compact form: one line (eyebrow and count) that links to the earlier-answers list */
.banner.compact{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:8px 14px}.banner.compact .t{font-size:14px}
.segnav{display:flex;flex-direction:column;gap:8px}.segnav a,.segnav .end{text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-height:var(--tap)}.segnav .t{font-size:14px;font-weight:600}.segnav .end a{display:inline;border:0;background:none;padding:0;min-height:0;border-radius:0}.segnav a:hover{border-color:var(--cyantint)}
.note.guest{background:var(--amberbg);color:var(--amber);border-color:var(--amberline)}.note.quoted{background:var(--violetbg);color:var(--violet2);border-color:var(--violetbg)}
.position{margin:0;font-size:calc(15px * var(--scale));line-height:1.55}
/* a checked position (docs/VERIFICATION.md): the label, the host's own words with their moment, the report link */
.posblock .checked-by .small{color:var(--ink2);min-width:0}
.evidence{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.evidence blockquote{margin:0;border-inline-start:3px solid var(--cyanline);padding:2px 0 2px 12px;padding-inline:12px 0}
.evidence blockquote p{margin:0;font-size:calc(14px * var(--scale));line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.evlinks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.evlinks a{min-height:var(--tap);display:inline-flex;align-items:center}
.evts{font-variant-numeric:tabular-nums;font-weight:700}
.posblock .report{min-height:var(--tap);display:inline-flex;align-items:center}
.ent{text-decoration:none;color:inherit;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 0;min-height:var(--tap)}.ent .t{font-size:14px;font-weight:600}
.rel{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:inherit;font-size:14px;padding:8px 0;min-height:var(--tap)}.rel .when{flex:0 0 72px;font-size:13px;font-weight:700;color:var(--cyan2);font-variant-numeric:tabular-nums}.rel .t{font-weight:600;flex:1;min-width:0}.rel.this .t{color:var(--ink2)}.earlier .rel{border-top:1px solid var(--line)}.earlier .rel .when{flex-basis:100px}
.cite{margin:0;font-size:13px;color:var(--ink2);line-height:1.5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);border-radius:6px;padding:10px;overflow-wrap:anywhere}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;text-decoration:none;color:inherit;padding:8px 0;min-height:var(--tap);align-items:center}.kv a{text-decoration:none;color:inherit}
.barrow{display:flex;flex-direction:column;gap:4px;font-size:13px}.barrow .kv{padding:4px 0;min-height:0}.bar{display:block;height:8px;background:var(--blue);border-radius:4px}
.topichead{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:12px;display:flex;flex-direction:column;gap:8px}.topichead h1{margin:0}.topichead .crumbs,.topichead .muted{margin:0}
.topichead .row.between{align-items:center}.topichead a.latest{flex:1 1 100%;text-decoration:none;color:inherit;background:var(--cyanbg);border:1px solid var(--cyanline);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}.topichead a.latest .eyebrow{color:var(--cyan2)}.topichead a.latest .t{font-size:15px;font-weight:700}
.examples{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}.examples li{border-inline-start:3px solid var(--cyanline);padding-inline-start:10px}.examples a{display:inline-block;padding:10px 0;text-decoration:none;font-weight:600;font-size:15px;line-height:1.4}
.chart .cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin:0;flex-direction:row}
.chart .col{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:6px;min-height:150px;text-decoration:none;color:var(--ink2);font-size:11px;text-align:center;font-variant-numeric:tabular-nums;min-width:0}
.chart .col .bar{height:var(--h,24px);min-height:4px;background:var(--blue);border-radius:4px 4px 0 0;flex:0 0 auto}.chart a.col:hover .bar{background:var(--cyan)}.chart .col.zero .bar{height:2px;background:var(--line)}
.chart .col .y{display:block;border-top:1px solid var(--line);padding-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart .col.max .y{font-weight:700;color:var(--ink)}
.seglist{display:flex;flex-direction:column;gap:10px}.yearhead{font-size:16px;margin:10px 0 0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.yearhead.sub{font-size:14px;color:var(--ink2);font-family:Inter,system-ui,sans-serif;font-weight:600}.yearhead.earlier{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink2)}
.segcard{text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;min-width:0}.segcard:hover{border-color:var(--cyantint)}
.segcard .when{flex:1 1 100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}.segcard .when strong{color:var(--ink);font-size:14px}
.segcard .body{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px}.segcard .t{font-size:calc(16px * var(--scale));font-weight:700;line-height:1.35}.segcard .s{font-size:calc(14px * var(--scale));color:var(--ink2);line-height:1.45}
.segcard .tags{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink2)}.segcard .tags span{border:1px solid var(--line);border-radius:999px;padding:2px 8px}.tags .quoted{color:var(--violet2);border-color:var(--violet2)}.tags .guest{color:var(--amber)}.tags .checked{color:var(--cyan2);border-color:var(--cyanline);background:var(--cyanbg)}
.segcard .right{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px}
.segcard.quiet{background:transparent;padding:12px 16px}.segcard.quiet .t{font-size:calc(15px * var(--scale));color:var(--ink2)}.segcard.quiet .when strong{color:var(--ink2)}.segcard.is-latest{border-color:var(--cyanline)}
.segments{display:flex;flex-direction:column;gap:12px;margin-top:16px}.segments .head{margin:0}.segments h3{margin:8px 0 0}
.segmap{display:flex;gap:2px;height:28px;border-radius:8px;overflow:hidden}.segmap a{display:block;flex:1 1 0;min-width:3px}.segmap a:hover{filter:brightness(1.4)}
.legend{display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px;color:var(--ink2)}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:6px;vertical-align:middle}
.segmap .k-question,.legend .k-question{background:var(--k-question)}.segmap .k-lesson,.legend .k-lesson{background:var(--k-lesson)}.segmap .k-discussion,.legend .k-discussion{background:var(--k-discussion)}.segmap .k-recitation,.legend .k-recitation{background:var(--k-recitation)}.segmap .k-announcement,.legend .k-announcement{background:var(--k-announcement)}.segmap .k-other,.legend .k-other{background:var(--k-other)}
.subtitle{margin:0;font-size:15px}.summary.lead{color:var(--ink);font-size:calc(17px * var(--scale));line-height:1.5}
.flags{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}.flags li{font-size:12px;color:var(--amber);background:var(--amberbg);border:1px solid var(--amberline);border-radius:999px;padding:4px 10px}
.rel .t small{display:block;font-size:12px;font-weight:500}
/* collections */
.collist{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.collitem{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}.collitem:hover{border-color:var(--cyantint)}
.collitem .num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--cyanbg);color:var(--cyan2);font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.collitem .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.collitem .t{font-weight:700;font-size:calc(16px * var(--scale));line-height:1.35}.collitem .note{font-size:14px;color:var(--ink2);background:transparent;border:0;padding:0}.collitem .right{flex:0 0 auto}
.chapter{margin-top:8px}
/* saved */
.saved-item{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line)}.saved-item:first-child{border-top:0}.saved-item .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.saved-item .t{font-weight:700;text-decoration:none;color:inherit;font-size:calc(16px * var(--scale))}.saved-item .meta{font-size:13px}.saved-item .remove{font:inherit;font-size:12px;font-weight:700;color:var(--ink2);background:transparent;border:1px solid var(--line);border-radius:8px;min-height:36px;padding:0 10px;cursor:pointer}.saved-item .remove:hover{color:var(--ink);border-color:var(--cyantint)}
/* corrections (docs/CORRECTIONS-INTAKE.md): "Something wrong here?" under the transcript, and the takedown and question
   form on the about page. A disclosure; the form inside is hidden until static/corrections.js runs. */
.corrections{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0 16px;margin-top:16px}
.corrections summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);min-height:48px;display:flex;align-items:center;gap:10px;list-style:none;margin:0 -16px;padding:0 16px;border-radius:16px}
.corrections summary::-webkit-details-marker{display:none}.corrections summary:hover{color:var(--strong)}.corrections summary:focus-visible{outline:2px solid var(--cyan2);outline-offset:-2px}
.corrections summary::before{content:"+";flex:0 0 22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--cyanbg);color:var(--cyan2);font-weight:800;font-size:16px;line-height:1}
.corrections[open] summary::before{content:"\2212"}
.corr-intro{margin:4px 0 12px;font-size:14px;color:var(--ink2);max-width:var(--measure)}
.corr-nojs{margin:0 0 14px;max-width:var(--measure)}
.corr-form{display:flex;flex-direction:column;gap:12px;margin:0 0 12px;max-width:var(--measure)}
.corr-field{display:flex;flex-direction:column;gap:4px}.corr-field>span{font-size:13px;font-weight:700;color:var(--ink2)}.corr-field small{font-size:12px;color:var(--mute)}
.corr-form select,.corr-form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:var(--tap)}
.corr-form textarea{resize:vertical;line-height:1.5}
.corr-form select:focus-visible,.corr-form textarea:focus-visible{outline:2px solid var(--cyan2);outline-offset:1px}
.corr-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.corr-moment{margin:0}
.corr-status{display:block;font-size:14px;color:var(--ink2);flex:1 1 200px;min-height:1.2em}.corr-form.sent .corr-status{color:var(--cyan2);font-weight:600}
.corr-form button[disabled]{opacity:.6;cursor:progress}
.corr-privacy{margin:0 0 14px;font-size:12px;max-width:var(--measure)}
/* footer: the support column (brand line, Subscribe and Patreon side by side, the channel link, the Patreon note and
   a row of social icons) and the disclaimers, one line each with a link to the About section that has the full text;
   then one row of utility links and the build date. One column on a phone, two from 900px. */
.foot{border-top:1px solid var(--hairline);color:var(--ink2);font-size:13px;line-height:1.55;padding:32px 0 20px;margin-top:56px}
.foot a:not(.btn){color:var(--strong);text-decoration:none;font-weight:600}.foot a:not(.btn):hover{color:var(--cyan2)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.fsupport{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.foot .fbrand{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:-.01em}.fbrand .logo{width:28px;height:28px}
.fabout{margin:-6px 0 0;max-width:46ch}
.fcta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:8px;width:100%;max-width:440px}
.fcta .btn{min-height:42px;padding:0 8px;font-size:13px;gap:6px;white-space:nowrap}
.foot a.fchan{grid-column:1/-1;justify-self:start;font-size:13px;color:var(--ink2);padding:2px 0;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.fnote{margin:-4px 0 0;font-size:12.5px;color:var(--mute);max-width:46ch}
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;color:var(--ink2);background:var(--glass)}
.foot .social a{color:var(--ink2)}.social a:hover,.foot .social a:hover{color:var(--strong);border-color:var(--cyantint)}
.social span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top nav .menu-social{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line)}.top nav .menu-social a{width:var(--tap);height:var(--tap);padding:0;justify-content:center;color:var(--ink2)}
.fnotes{min-width:0}
.fnotes h2{font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 4px}
.fnotes ul{list-style:none;margin:0;padding:0}
.fnotes li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--hairline)}.fnotes li:first-child{border-top:0;padding-top:4px}
.fnotes li>a{align-self:flex-start;font-size:13px}.fnotes li>a::after{content:"\00a0\203A";color:var(--mute);font-weight:500}html[dir="rtl"] .fnotes li>a::after{content:"\00a0\2039"}
.fnotes p{margin:0}
.ftiers{display:inline-flex;gap:4px;margin-inline-end:4px;vertical-align:1px}.ftiers .tier{font-size:11px;padding:2px 6px}
.footbar{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:20px;padding-top:12px;border-top:1px solid var(--hairline)}
.flinks{display:flex;flex-wrap:wrap;gap:0 16px;flex:1 1 auto;min-width:0}
.foot .flinks a{display:inline-flex;align-items:center;min-height:36px;font-size:13px;font-weight:500;color:var(--ink2)}
.footbar .built{margin-inline-start:auto;color:var(--mute);font-size:12px;white-space:nowrap}
/* text pages (about): a reading measure, section headings with air, the three tiers as cards */
.prose{max-width:820px}.prose p{max-width:var(--measure);line-height:1.65}.prose h2{margin:32px 0 8px}
.tiercards{list-style:none;margin:12px 0 16px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.tiercards li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink2);line-height:1.5}
/* search: the search page styles are in typeahead.css (appended at the end of this file) */
/* wider screens */
@media (min-width:640px){
  .brand .name{display:inline}.brand{font-size:18px}
  .grid3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .item{grid-template-columns:110px 1fr auto;gap:14px;padding:12px 18px}.meta{white-space:nowrap}.item.gap .meta{white-space:normal}
  .segnav{flex-direction:row;flex-wrap:wrap}.segnav a,.segnav .end{flex:1 1 240px}.segnav .next{text-align:end;align-items:flex-end}
  .segcard{flex-wrap:nowrap;gap:20px;padding:18px 20px}.segcard .when{flex:0 0 96px;flex-direction:column;gap:2px}.segcard .body{flex:1}.segcard .right{flex-direction:column;align-items:flex-end;gap:6px}.segcard .t{font-size:calc(17px * var(--scale))}
  .fcta{display:flex;flex-wrap:wrap;width:auto;max-width:none}.fcta .btn{padding:0 14px;font-size:14px;gap:8px}.foot a.fchan{padding:8px 4px}
  .fnotes li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:baseline}
  .hero{padding:56px 0 40px}.head{margin:40px 0 14px}
  .transcript{padding:24px}.ts{flex-basis:64px}.para{gap:16px}
  .panel{padding:20px}.topichead{padding:20px 24px}.topichead a.latest{flex:0 1 380px}
  .cite-box{padding:24px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tiles .tile{padding:16px 18px}.tile b{font-size:28px}
  .player:not(.playing){width:100%;max-height:440px}
  .tiercards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .player.playing{margin:12px 0;border-radius:14px;height:calc(min(56.25vw,420px) + var(--tap));border-inline:1px solid var(--hairline)}
}
@media (min-width:900px){
  :root{--headh:64px}
  .top .row{gap:12px}.brand .name{display:none}
  .top nav{position:static;flex-direction:row;background:transparent;border:0;padding:0;box-shadow:none;gap:0;margin-inline-start:auto;flex:0 1 auto;min-width:0}.top nav a{font-size:13.5px;padding:0 7px;white-space:nowrap}.js .top nav:not(.open){display:flex}.menu{display:none}.actions{margin-inline-start:0}.top nav .menu-social,.top nav .m-only{display:none}
  .prefsbtn,.savedbtn{display:inline-flex}
  .top nav .prefs{position:absolute;top:calc(100% + 6px);inset-inline-end:0;width:340px;margin:0;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px var(--shadow);display:none;z-index:6}
  .top nav .prefs.open{display:flex}
  .cols{flex-direction:row;flex-wrap:wrap;gap:24px;align-items:flex-start;margin-top:12px}.main{flex:999 1 560px}.side{flex:1 1 300px;max-width:380px}
  .topichead .row.between{flex-wrap:nowrap}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
}
@media (min-width:1100px){
  .brand .name{display:inline}.top nav a{padding:0 9px}
}
@media (min-width:1200px){
  .top .row{gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.card:hover,a.tile:hover{transform:none}}

/* ---- languages (docs/I18N.md): the switcher (one labelled row in the display-settings panel and in the footer bar),
        the draft notice, the per-page note and the RTL mirrors. Direction comes from <html dir>; the rules above use
        logical properties, so right-to-left needs no overrides for layout. Arabic reads in Noto Naskh Arabic, Urdu in
        Noto Nastaliq Urdu with the taller line it needs; joined scripts never get letter-spacing. English content inside
        a mirror page is isolated as <span lang="en" dir="ltr">. ---- */
.langs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.langs a,.top nav .langs a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink2);background:var(--bg);text-decoration:none;white-space:nowrap}
.langs a:hover,.top nav .langs a:hover{color:var(--ink);border-color:var(--cyantint);background:var(--bg)}
.langs a[aria-current],.top nav .langs a[aria-current]{background:var(--cyan);color:var(--oncyan);border-color:var(--cyan)}
.langs a:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}
/* the switcher labels use Naskh for both scripts so an English page never fetches the Nastaliq face for one word */
.langs a[lang="ar"],.langs a[lang="ur"]{font-family:'Noto Naskh Arabic',Inter,system-ui,sans-serif}
.foot .langs a{padding:0 12px}
.notice.lang-notice{background:var(--cyanbg);color:var(--cyan2);font-weight:500}.notice.lang-notice a{color:inherit;font-weight:700;margin-inline-start:6px}
.langnote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:12px 0}
.langnote .btn{margin-inline-start:auto}
html[lang="ar"] body{font-family:'Noto Naskh Arabic',Inter,system-ui,sans-serif;line-height:1.7}
html[lang="ur"] body{font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',Inter,system-ui,sans-serif;line-height:2}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .yearhead.sub,html[dir="rtl"] .fnotes h2,html[dir="rtl"] #search{font-family:inherit;letter-spacing:0}
html[dir="rtl"] h1{line-height:1.45}html[dir="rtl"] .hero h1{line-height:1.5}html[dir="rtl"] .seghead h1{line-height:1.5}
html[lang="ur"] h1{line-height:1.7}html[lang="ur"] .hero h1{line-height:1.8}html[lang="ur"] .seghead h1{line-height:1.8}html[lang="ur"] .para p{line-height:2.1}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .pref legend,html[dir="rtl"] .pref .legend,html[dir="rtl"] .gl-vars span,html[dir="rtl"] .gl-card-vars span,html[dir="rtl"] .ta-label,html[dir="rtl"] .tier,html[dir="rtl"] .kind{letter-spacing:0;text-transform:none}
html[dir="rtl"] [lang="en"]{font-family:Inter,system-ui,sans-serif;line-height:1.5}
html[dir="rtl"] h1 [lang="en"],html[dir="rtl"] h2 [lang="en"],html[dir="rtl"] h3 [lang="en"]{font-family:'Space Grotesk',Inter,sans-serif;letter-spacing:-.02em}
html[dir="rtl"] .cite,html[dir="rtl"] code,html[dir="rtl"] pre,html[dir="rtl"] .ts,html[dir="rtl"] .segcard .when,html[dir="rtl"] .rel .when{font-family:Inter,system-ui,sans-serif}
html[dir="rtl"] .cite,html[dir="rtl"] .cite-formats pre{direction:ltr;text-align:left}
html[dir="rtl"] .gl-ar,html[dir="rtl"] .gl-card-ar{margin-inline-start:0}
.crumbs bdi{white-space:nowrap;flex:0 0 auto}

/* answer page and sorting */
/* ---- (design/answer-page-and-sorting) One block, appended last so it overrides nothing above by accident:
        the answer-first segment page (segment.html), the share row (partials/share_button.html), the
        "m:ss on YouTube" link on every segment row (_macros.html ytat), the stretched-title rows that make room
        for it, and the sort control (static/sort.js, search.js). Colours are tokens only. ---- */
html:not(.js) .jsonly{display:none!important}

/* "m:ss on YouTube": a quiet secondary link with a 44px target, above the row's stretched title link */
.ytat{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:0 10px;border-radius:10px;font-size:13px;font-weight:700;color:var(--cyan2);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.ytat:hover{background:var(--glass);color:var(--strong)}.ytat:focus-visible{outline:2px solid var(--cyan2);outline-offset:0}
.ytat svg{flex:0 0 auto}.ytat .on{font-weight:600;color:var(--ink2)}

/* rows whose title is the link: the link's ::after covers the row, other controls sit above it */
.segcard,.item.seg,.collitem{position:relative}
.segcard a.t,.collitem a.t,.item.seg a.go{color:inherit;text-decoration:none}
.segcard a.t::after,.collitem a.t::after,.item.seg a.go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.segcard a.t:hover,.collitem a.t:hover,.item.seg a.go:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.segcard a.t:focus-visible,.collitem a.t:focus-visible,.item.seg a.go:focus-visible{outline:none}
.segcard:has(a.t:focus-visible),.collitem:has(a.t:focus-visible),.item.seg:has(a.go:focus-visible){outline:2px solid var(--cyan2);outline-offset:2px}
.segcard .tier,.item.seg .tier,.collitem .tier{z-index:1}
.item.seg:hover{background:var(--hover)}
.segcard .right{flex:1 1 100%;flex-wrap:wrap;gap:4px 10px;justify-content:flex-start}.segcard .right .ytat{margin-inline-start:auto;margin-inline-end:-10px}
.item.seg .meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}.item.seg .meta .ytat{margin-inline-start:-10px}
.collitem .right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.collitem .right .ytat{margin-inline-end:-10px}

/* the sort control */
.sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 8px}
.sortbar label{font-size:13px;font-weight:700;color:var(--ink2)}
.sortbar select{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;min-height:var(--tap);padding:0 12px;max-width:100%;cursor:pointer}
.sortbar select:hover{border-color:var(--cyantint)}.sortbar select:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}
.row.head .sortbar{margin:0}
.listtools{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}.listtools .filter{flex:1 1 260px}
#search+.sortbar,.sortbar+#search{margin-top:8px}

/* the answer page: one column on phones in reading order; from 960px the connections sit in a column beside the
   answer and the transcript (DOM order unchanged: answer, connections, transcript) */
.answerpage{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.ans-top,.ans-side,.ans-bottom{display:flex;flex-direction:column;gap:16px;min-width:0}
.ans-bottom .transcript,.ans-bottom .corrections{margin-top:0}
.anshead h1{font-size:clamp(26px,6.4vw,40px);line-height:1.15}
.anshead .topbar .badge.superseded{text-decoration:none}.anshead .topbar a.badge.superseded:hover{border-color:var(--amber)}
.ansmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:14px;color:var(--ink2)}
.ansmeta a{color:var(--ink2);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;padding:6px 0}.ansmeta a:hover{color:var(--strong);text-decoration-color:currentColor}
.kindbadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.kindbadge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k-other)}
.kindbadge.k-question::before{background:var(--k-question)}.kindbadge.k-lesson::before{background:var(--k-lesson)}.kindbadge.k-discussion::before{background:var(--k-discussion)}.kindbadge.k-recitation::before{background:var(--k-recitation)}.kindbadge.k-announcement::before{background:var(--k-announcement)}
.qtype{font-size:13px}

/* watch: the player cued to the answer and, beside it, the same second on YouTube */
.watch{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.watch .player{margin:0}
.watchside{display:flex;flex-direction:column;justify-content:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.watchside h2{margin:0}.watchside p{margin:0}
.btn.ytbig{min-height:52px;font-size:15px;justify-content:flex-start;padding:0 16px;text-align:start}
.seginfo{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink)}
.watchside .btn.small{align-self:flex-start}

/* the share bar (partials/share_button.html, static/share.js): "Share" (a disclosure; the system share sheet on
   phones), "Copy link" and "Save for later" in one row. The panel and the status line are positioned over the page,
   so opening, closing or confirming never moves the content (no layout shift). */
.sharebar{position:relative;flex-wrap:nowrap;gap:8px;margin:0}
.sharebar .share-btn,.sharebar .btn.save{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:var(--tap);min-height:var(--tap);white-space:nowrap;text-decoration:none}
.sharemenu{position:relative;display:inline-flex}
.sharemenu>summary{list-style:none;-webkit-user-select:none;user-select:none;padding:0 16px}
.sharemenu>summary::-webkit-details-marker{display:none}
.sharemenu>summary::marker{content:""}
.sharebar .share-btn.alt:hover{border-color:var(--cyantint);color:var(--strong)}
.sharemore{padding:0;width:var(--tap);margin-inline-start:-4px}
.sharemore[aria-expanded="true"] svg{transform:rotate(180deg)}
.sharecopy .sc{display:inline-grid}.sharecopy .sc>span{grid-area:1/1}
.sharecopy .sc-done{visibility:hidden;color:var(--cyan2)}
.sharecopy.is-done .sc-idle{visibility:hidden}.sharecopy.is-done .sc-done{visibility:visible}
.sharepop{position:absolute;z-index:40;top:calc(100% + 6px);inset-inline-start:0;width:min(340px,calc(100vw - 32px));display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.sharepop .sitem{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-decoration:none;text-align:start;cursor:pointer}
.sharepop .sitem[hidden]{display:none}
.sharepop .sitem:hover{background:var(--cyanbg);color:var(--strong)}
.sharepop .sitem:focus-visible{outline:2px solid var(--cyan2);outline-offset:-2px}
.sharepop .sitem svg{flex:0 0 auto;color:var(--cyan2)}
.sharebar .share-status{position:absolute;top:calc(100% + 4px);inset-inline-start:0;margin:0;padding:6px 10px;border-radius:8px;background:var(--card);border:1px solid var(--line);z-index:39;font-size:13px;color:var(--ink);max-width:min(100%,calc(100vw - 32px));pointer-events:none}
.sharebar .share-status:empty{display:none}
.sharebar:has(.sharemenu[open]) .share-status{display:none}
/* phones: "Save for later" keeps its name for screen readers but shows only its icon, so the bar fits one row */
@media (max-width:479.98px){
  .sharebar .btn.save{padding:0;width:var(--tap)}
  .sharebar .btn.save span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* the answer in brief */
.brief{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--cyan);border-radius:16px;padding:16px 18px}
.briefhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}.briefhead h2{margin:0;font-size:19px}
.brief .summary.lead{font-size:calc(18px * var(--scale));line-height:1.55;color:var(--ink)}
.brief .question{background:var(--bg)}
.more summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--cyan2);min-height:var(--tap);display:inline-flex;align-items:center}
.more[open] summary{margin-bottom:4px}.more .summary{font-size:calc(15px * var(--scale))}

/* sources cited, grouped by type */
.sources .srcgroup{display:flex;flex-direction:column;gap:0}.sources .srcgroup+.srcgroup{border-top:1px solid var(--line);padding-top:8px}
.sources .srcgroup h3{margin:0}.sources ul{list-style:none;margin:0;padding:0}
.sources .ent:hover .t{text-decoration:underline;text-underline-offset:3px}

/* the transcript, last: a disclosure */
.transcript.tx{padding-top:4px;padding-bottom:12px}
.tx>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:56px;border-radius:12px}
.tx>summary::-webkit-details-marker{display:none}
.tx>summary::before{content:"+";flex:0 0 24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--cyanbg);color:var(--cyan2);font-weight:800;font-size:17px;line-height:1}
.tx[open]>summary::before{content:"\2212"}
.tx>summary:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}
.txhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}.txhead h2{margin:0}
.txtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 10px}.txtools .share-status{font-size:13px;color:var(--ink2)}
.txtools .btn svg{flex:0 0 auto}

@media (min-width:640px){
  .segcard .right{flex:0 0 auto}.segcard .right .ytat{margin:0 -10px 0 0;margin-inline:0 -10px}
  .watch{grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr)}
  .watch:has(.player.playing){grid-template-columns:minmax(0,1fr)}
  .brief{padding:20px 24px}
}
@media (min-width:960px){
  .answerpage{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-areas:"top side" "bottom side";grid-template-rows:auto 1fr;gap:20px 28px;align-items:start}
  .ans-top{grid-area:top}.ans-side{grid-area:side}.ans-bottom{grid-area:bottom}
}

/* docs/SEO.md patch 5: reserve the sort bar's space before sort.js reveals it (no layout shift) */
.js .sortbar[hidden]{display:flex!important;visibility:hidden}

/* ---- glossary.css (appended so one stylesheet blocks rendering, docs/SEO.md patch 4) ---- */
/* Glossary: marked terms in transcripts, the hover card, and the glossary page.
   Every colour comes from the theme variables in style.css (--bg --card --line --ink --ink2 --mute --cyan --cyan2),
   so a light theme only has to redefine those. Shadows and tints use transparency, not fixed colours. */

/* marked term */
.gl{border-bottom:1px dotted var(--cyan2);cursor:help;border-radius:3px;padding:0 1px;transition:background .12s}
.gl:hover,.gl[aria-expanded="true"]{background:rgba(34,211,238,.14);background:color-mix(in srgb,var(--cyan) 16%,transparent)}
.gl:focus{outline:none}
.gl:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}

/* card */
.gl-card{position:fixed;z-index:60;width:min(340px,calc(100vw - 32px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 18px 50px var(--shadow);font-size:14px;line-height:1.5}
.gl-card[hidden]{display:none}
.gl-card:focus{outline:none}
.gl-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.gl-card-head{display:flex;align-items:baseline;gap:10px}
.gl-card-term{font-size:16px;font-weight:700;letter-spacing:-.01em}
.gl-card-ar,.gl-ar{font-family:'Noto Naskh Arabic','Amiri',serif;font-size:19px;font-weight:400;color:var(--ink2);margin-inline-start:auto;white-space:nowrap}
.gl-card-close{flex:0 0 auto;background:transparent;border:0;color:var(--mute);font:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;margin-block:-2px 0;margin-inline:0 -4px;border-radius:6px}
.gl-card-close:hover,.gl-card-close:focus-visible{color:var(--ink);outline:none;background:rgba(127,127,127,.15)}
.gl-card-meaning{margin:8px 0 0}
.gl-card-vars,.gl-vars{display:block;margin:6px 0 0;color:var(--mute);font-size:12.5px;line-height:1.45}
.gl-card-vars span,.gl-vars span{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-inline-end:4px}
.gl-card-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;text-decoration:none}
.gl-card-more:hover{text-decoration:underline}
@media (prefers-reduced-motion:no-preference){
  .gl-card:not([hidden]){animation:gl-in .12s ease-out}
  @keyframes gl-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .gl-card-above:not([hidden]){animation-name:gl-in-up}
  @keyframes gl-in-up{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* glossary page */
.gl-toc{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.gl-toc small{color:var(--mute);font-weight:600;margin-inline-start:6px}
.gl-cat{margin-top:36px;scroll-margin-top:84px}
.gl-cat h2{margin-bottom:0}
.gl-cat>.muted{margin:2px 0 0;font-size:14px}
.gl-list{margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.gl-entry{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;scroll-margin-top:84px;transition:border-color .15s}
.gl-entry:target{border-color:var(--cyan);box-shadow:0 0 0 3px var(--pillbg)}
.gl-entry dt{display:flex;align-items:baseline;gap:10px;font-weight:700;font-size:16px}
.gl-entry dd{margin:6px 0 0;font-size:14.5px}
.gl-anchor{color:inherit;text-decoration:none}
.gl-anchor:hover,.gl-anchor:focus-visible{color:var(--cyan2)}
.gl-foot{margin-top:40px;font-size:13px}
.gl-foot code{font-size:12px;color:var(--ink2)}
@media (max-width:640px){.gl-list{grid-template-columns:1fr}.gl-card{font-size:14.5px}}

/* ---- typeahead.css (appended so one stylesheet blocks rendering, docs/SEO.md patch 4) ---- */
/* Typeahead dropdown and the search page (static/typeahead.js, static/search.js). Uses the tokens from style.css (--popbg, --glassline, --ink, --ink2, --mute, --cyan, --blue, --card, --line), so light mode needs no rule here. */
.ta-host{position:relative}
.ta-pop{position:absolute;top:100%;inset-inline-start:0;z-index:30;margin-top:10px;min-width:min(560px,calc(100vw - 32px));max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--popbg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--glassline);border-radius:16px;
  box-shadow:0 30px 80px var(--shadow2),0 0 0 1px var(--pillbg);padding:8px;text-align:start;color:var(--ink);font:400 15px/1.3 Inter,system-ui,sans-serif}
.ta-pop[hidden]{display:none}
.ta-list{display:flex;flex-direction:column;gap:4px}
.bigsearch.ta-host .ta-pop{inset-inline-end:0;min-width:0}
.ta-group{display:flex;flex-direction:column;gap:2px}
.ta-label{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px 4px}
.ta-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);cursor:pointer;scroll-margin:8px}
.ta-opt:hover,.ta-opt[aria-selected="true"]{background:var(--pillbg);box-shadow:inset 0 0 0 1px var(--pillline)}
.ta-opt .ta-text{flex:1;min-width:0;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-opt .ta-text strong{color:var(--ink);font-weight:700}
.ta-all .ta-text{color:var(--ink)}
.ta-icon{width:18px;flex:0 0 auto;text-align:center;color:var(--cyan);font-weight:700}
.ta-meta{font-size:12px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.ta-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.ta-dot-q{background:var(--blue);box-shadow:0 0 10px var(--blue)}
.ta-dot-t{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.ta-dot-f{background:var(--violet);box-shadow:0 0 10px var(--violet)}
.ta-dot-e{background:#D95926;box-shadow:0 0 10px #D95926}
.ta-dot-s{background:#199E70;box-shadow:0 0 10px #199E70}
.ta-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 12px 6px;margin-top:4px;border-top:1px solid var(--hairline);font-size:12px;color:var(--mute)}
.ta-hint{display:inline-flex;align-items:center;gap:6px;min-width:0}
.ta-spark{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:0 0 auto}
.ta-keys{margin-inline-start:auto;white-space:nowrap}
.ta-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
input[data-typeahead]::-webkit-search-decoration{-webkit-appearance:none}
@media (max-width:640px){
  .ta-pop{max-height:min(60vh,480px)}
  .ta-opt .ta-text{white-space:normal}
  .ta-opt .ta-meta{display:none}
  .ta-keys{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .ta-pop{animation:ta-in .12s ease-out}
  @keyframes ta-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media (prefers-contrast:more){
  .ta-pop{background:var(--bg);border-color:var(--ink2)}
  .ta-opt:hover,.ta-opt[aria-selected="true"]{outline:2px solid var(--cyan);outline-offset:-2px}
}

/* "Read on quran.com / sunnah.com" beside a cited verse or hadith */
.srcgroup li{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}.srcgroup li .ent{flex:1 1 14em;min-width:0}
.srcgroup li .ent .t{overflow-wrap:anywhere}
.extsrc{font-size:12.5px;font-weight:600;color:var(--pill);text-decoration:none;white-space:nowrap;min-height:var(--tap);padding:0 2px;display:inline-flex;align-items:center;border-radius:6px}
.extsrc:hover{text-decoration:underline;text-underline-offset:3px}
.extsrc:focus-visible,.extbtn:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}
.extsrc.unsure{color:var(--ink2);font-weight:500}
.extsrc>span[aria-hidden],.extbtn>span[aria-hidden]{margin-inline-start:3px}
.extrow{margin:6px 0 0}
/* the search page: one box, a status line, then the results in groups (answers, recordings, transcript moments, pages) */
.searchpage{max-width:820px}
.searchpage .bigsearch{margin:8px 0 6px}
.sp-help{margin:0 0 12px}
.sp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:var(--tap)}
.sp-tools.is-off{visibility:hidden}
.sp-status{margin:0;font-weight:600;color:var(--ink)}
.sp-tools .sortbar{margin:0}
/* the results area holds a full screen from the first paint, so nothing below it moves when the results arrive */
.sp-results{min-height:100vh}
.sp-results.is-loading{opacity:.55;transition:opacity .15s}
.sp-fix,.sp-alts{margin:8px 0 12px;font-size:15px}
.sp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px}
.sp-chips-l{font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;margin-inline-end:4px}
.sp-group{margin:22px 0 0}
.sp-group h2{font-size:calc(18px * var(--scale));margin:0 0 2px}
.sp-count{color:var(--mute);font-weight:600}
.sp-note{margin:0 0 8px}
.sp-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sp-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.sp-h{margin:0;font-size:calc(16px * var(--scale));line-height:1.35;font-weight:700}
.sp-title{color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.sp-title:hover,.sp-title:focus-visible{text-decoration:underline}
.sp-meta{margin:4px 0 0;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.sp-ex{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}
.sp-ex mark{background:var(--markbg);color:var(--onmark);border-radius:3px;padding:0 2px}
.sp-moment{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);margin-top:4px;font-weight:700;font-size:14px;color:var(--cyan);text-decoration:none}
.sp-moment:hover,.sp-moment:focus-visible{text-decoration:underline}
.sp-play{font-size:11px}
.sp-weak{border-style:dashed}
.sp-more{margin:18px 0 0;min-height:var(--tap)}
.sp-empty h2{font-size:calc(18px * var(--scale));margin:16px 0 6px}
@media (min-width:900px){
  .sp-item{padding:14px 18px}
}