/* ============================================================
   InterviewPrepBeforeMinutes — stylesheet
   ============================================================ */

:root{
  --bg:#f6f7fb;
  --bg-elev:#ffffff;
  --bg-soft:#eef1f7;
  --panel:#ffffff;
  --border:#e2e6ef;
  --border-strong:#cfd6e4;
  --text:#141a24;
  --text-dim:#5a6478;
  --text-mute:#8b95a8;
  --accent:#4f46e5;
  --accent-2:#0ea5e9;
  --accent-soft:rgba(79,70,229,.10);
  --good:#0f9d58;
  --warn:#d97706;
  --code-bg:#f2f4f9;
  --code-text:#1f2937;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18);
  --shadow-lg:0 24px 60px -24px rgba(16,24,40,.35);
  --radius:14px;
  --ring:0 0 0 3px rgba(79,70,229,.25);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sbw:288px;
  color-scheme:light;
}

[data-theme="dark"]{
  --bg:#0b0e14;
  --bg-elev:#111725;
  --bg-soft:#151c2b;
  --panel:#111725;
  --border:#1e2739;
  --border-strong:#2b3852;
  --text:#e8edf7;
  --text-dim:#9fadc4;
  --text-mute:#6d7b93;
  --accent:#7c8cff;
  --accent-2:#38bdf8;
  --accent-soft:rgba(124,140,255,.14);
  --good:#34d399;
  --warn:#fbbf24;
  --code-bg:#0d1320;
  --code-text:#d7e0f0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(124,140,255,.3);
  color-scheme:dark;
}

/* ---------- extra palettes ----------
   Every palette must restate --shadow, --shadow-lg and --ring: those are
   defined on :root with LIGHT values, so a dark palette that omits them
   inherits pale shadows and looks flat. */

/* Carbon — true black, for OLED screens */
[data-theme="carbon"]{
  --bg:#000000;
  --bg-elev:#0a0a0c;
  --bg-soft:#121217;
  --panel:#0a0a0c;
  --border:#1c1c23;
  --border-strong:#2d2d38;
  --text:#eceff4;
  --text-dim:#9aa1ae;
  --text-mute:#6a707e;
  --accent:#22d3ee;
  --accent-2:#a78bfa;
  --accent-soft:rgba(34,211,238,.14);
  --good:#34d399;
  --warn:#fbbf24;
  --code-bg:#0e0e13;
  --code-text:#d8dce6;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 10px 30px -14px rgba(0,0,0,.9);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.95);
  --ring:0 0 0 3px rgba(34,211,238,.28);
  color-scheme:dark;
}

/* Nord — muted arctic blue */
[data-theme="nord"]{
  --bg:#2e3440;
  --bg-elev:#3b4252;
  --bg-soft:#434c5e;
  --panel:#3b4252;
  --border:#4c566a;
  --border-strong:#5e6b85;
  --text:#eceff4;
  --text-dim:#c3cbd8;
  --text-mute:#8d97a8;
  --accent:#88c0d0;
  --accent-2:#b48ead;
  --accent-soft:rgba(136,192,208,.16);
  --good:#a3be8c;
  --warn:#ebcb8b;
  --code-bg:#272c36;
  --code-text:#d8dee9;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.75);
  --ring:0 0 0 3px rgba(136,192,208,.32);
  color-scheme:dark;
}

/* Dracula — purple and pink */
[data-theme="dracula"]{
  --bg:#282a36;
  --bg-elev:#343746;
  --bg-soft:#3c3f51;
  --panel:#343746;
  --border:#44475a;
  --border-strong:#5a5e78;
  --text:#f8f8f2;
  --text-dim:#c8c9d6;
  --text-mute:#8f92a8;
  --accent:#bd93f9;
  --accent-2:#ff79c6;
  --accent-soft:rgba(189,147,249,.17);
  --good:#50fa7b;
  --warn:#ffb86c;
  --code-bg:#21222c;
  --code-text:#f0f0ea;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.65);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.8);
  --ring:0 0 0 3px rgba(189,147,249,.32);
  color-scheme:dark;
}

/* Forest — deep green */
[data-theme="forest"]{
  --bg:#0c1512;
  --bg-elev:#111f1a;
  --bg-soft:#16281f;
  --panel:#111f1a;
  --border:#1e3329;
  --border-strong:#2c4a3a;
  --text:#e6f2ea;
  --text-dim:#9fb8ab;
  --text-mute:#6d8a7c;
  --accent:#4ade80;
  --accent-2:#2dd4bf;
  --accent-soft:rgba(74,222,128,.14);
  --good:#4ade80;
  --warn:#fbbf24;
  --code-bg:#0a1310;
  --code-text:#d5e8dd;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(74,222,128,.28);
  color-scheme:dark;
}

/* Solarized — warm light, low contrast */
[data-theme="solarized"]{
  --bg:#fdf6e3;
  --bg-elev:#fffbf0;
  --bg-soft:#f4ecd8;
  --panel:#fffbf0;
  --border:#e8dcc0;
  --border-strong:#d0c09c;
  --text:#073642;
  --text-dim:#586e75;
  --text-mute:#778787;
  --accent:#12658f;
  --accent-2:#2aa198;
  --accent-soft:rgba(18,101,143,.12);
  --good:#6b8e00;
  --warn:#b58900;
  --code-bg:#f2ebd8;
  --code-text:#073642;
  --shadow:0 1px 2px rgba(101,86,50,.08), 0 8px 24px -12px rgba(101,86,50,.24);
  --shadow-lg:0 24px 60px -24px rgba(101,86,50,.4);
  --ring:0 0 0 3px rgba(18,101,143,.25);
  color-scheme:light;
}

/* Sepia — paper, for long reading sessions */
[data-theme="sepia"]{
  --bg:#f3ece1;
  --bg-elev:#fbf6ee;
  --bg-soft:#ebe2d4;
  --panel:#fbf6ee;
  --border:#ded2be;
  --border-strong:#c5b59a;
  --text:#2f2a23;
  --text-dim:#6b6152;
  --text-mute:#968b78;
  --accent:#a2542e;
  --accent-2:#7a6a3f;
  --accent-soft:rgba(162,84,46,.12);
  --good:#4d7c4d;
  --warn:#b06a1a;
  --code-bg:#efe7da;
  --code-text:#33302a;
  --shadow:0 1px 2px rgba(80,62,40,.08), 0 8px 24px -12px rgba(80,62,40,.24);
  --shadow-lg:0 24px 60px -24px rgba(80,62,40,.4);
  --ring:0 0 0 3px rgba(162,84,46,.22);
  color-scheme:light;
}

*{box-sizing:border-box}

/* The HTML `hidden` attribute hides via the USER-AGENT rule [hidden]{display:none},
   and author styles always beat the UA origin. So any author rule that sets a
   display value — `.fab{display:grid}`, or `.sheet-scrim{display:block}` inside a
   media query — silently un-hides the element while JS still believes it is hidden.
   That shipped a full-viewport backdrop over the mobile site that blurred the page
   and swallowed every tap. Make the attribute authoritative. */
[hidden]{display:none!important}
html{
  scroll-behavior:smooth;
  /* Anchored cards land below the sticky header instead of under it */
  scroll-padding-top:88px;
  /* Stops the page jittering when a short view replaces a tall one */
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
}
/* Momentum-style easing for the custom scroll-to-top and search jumps */
@supports (scroll-behavior: smooth){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
body.no-scroll{overflow:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- scroll progress ----------
   Animated with transform (compositor only) rather than width, which
   would force a layout on every scroll frame. */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:200;will-change:transform;
}

/* ---------- typography switcher ---------- */
.type-wrap{position:relative;flex-shrink:0}
.type-btn{width:auto;gap:7px;padding:0 12px}
.font-name{
  font-size:12.5px;font-weight:600;max-width:104px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Fixed to the viewport, and deliberately a child of <body>: .topbar sets a
   backdrop-filter, which would otherwise become this panel's containing block
   and pin the mobile sheet to the header. */
.font-panel{
  position:fixed;top:58px;right:14px;width:308px;
  max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:10px;z-index:140;
  animation:pop .16s ease;
}
.sheet-scrim{display:none}
.fp-grab{display:none}
.tp-head{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px 8px;font-size:10.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--text-mute);
}
.tp-count{
  font-family:var(--mono);font-size:10px;padding:1px 7px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);letter-spacing:0;
}
/* Theme swatches. Each button paints itself with its OWN palette via inline
   custom properties, so the preview is the real thing rather than a guess. */
.theme-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 4px 12px}
.theme-item{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:7px 3px 6px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-soft);
  color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:600;
  transition:.18s ease;
}
.theme-item:hover{color:var(--text);border-color:var(--border-strong);transform:translateY(-1px)}
.theme-item.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.th-chip{
  width:100%;height:26px;border-radius:7px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid rgba(128,128,128,.25);
}
.th-chip i{display:block}
.th-chip i:first-child{background:var(--sw-bg)}
.th-chip i:last-child{background:var(--sw-accent)}
.theme-item.on .th-chip{box-shadow:0 0 0 1px var(--accent)}
.th-name{line-height:1;letter-spacing:.2px}

.size-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 4px 10px}
.size-item{
  padding:8px 4px;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-soft);
  color:var(--text-dim);font-family:inherit;font-size:11.5px;font-weight:600;
  transition:.18s ease;
}
.size-item:hover{color:var(--text);border-color:var(--border-strong)}
.size-item.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.font-list{display:flex;flex-direction:column;gap:3px}
.fp-cat{
  position:sticky;top:-10px;z-index:1;
  margin:10px 0 2px;padding:6px 8px 5px;
  background:var(--panel);
  font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-mute);border-bottom:1px solid var(--border);
}
.fp-cat:first-child{margin-top:0}
.font-item{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:1px 10px;align-items:center;
  padding:9px 11px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;background:none;color:var(--text);
  text-align:left;transition:background .16s ease,border-color .16s ease;
}
.font-item:hover{background:var(--bg-soft)}
.font-item.on{background:var(--accent-soft);border-color:var(--accent)}
.fi-name{font-size:13.5px;font-weight:600;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-note{grid-column:1;font-size:10.5px;color:var(--text-mute);font-family:var(--sans)}
.fi-sample{
  grid-column:2;grid-row:1 / span 2;
  font-size:14px;color:var(--text-mute);white-space:nowrap;letter-spacing:.3px;
}
.font-item.on .fi-sample{color:var(--accent)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  height:64px;display:flex;align-items:center;gap:14px;
  padding:0 18px;
  background:color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-mark{
  width:38px;height:38px;display:grid;place-items:center;font-size:19px;
  border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px -8px var(--accent);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:15px;font-weight:800;letter-spacing:-.3px}
.brand-text strong em{font-style:normal;color:var(--accent)}
.brand-text small{font-size:11px;color:var(--text-mute)}

.icon-btn{
  width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  border-radius:11px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text-dim);cursor:pointer;
  transition:.2s ease;
}
.icon-btn:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0)}
#themeToggle .i-moon{display:none}
[data-theme="dark"] #themeToggle .i-sun{display:none}
[data-theme="dark"] #themeToggle .i-moon{display:block}
.menu-toggle{display:none}

/* ---------- search ---------- */
.search-wrap{position:relative;flex:1;max-width:560px;margin-left:auto}
.search-wrap input{
  width:100%;height:42px;padding:0 44px 0 42px;
  border-radius:11px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);
  font-family:var(--sans);font-size:14px;outline:none;
  transition:.2s ease;
}
.search-wrap input:focus{border-color:var(--accent);box-shadow:var(--ring);background:var(--bg-elev)}
.search-wrap input::placeholder{color:var(--text-mute)}
.search-icon{position:absolute;left:13px;top:11px;color:var(--text-mute);pointer-events:none}
.kbd-hint{
  position:absolute;right:12px;top:11px;font-family:var(--mono);font-size:11px;
  padding:2px 7px;border-radius:6px;border:1px solid var(--border-strong);
  color:var(--text-mute);background:var(--bg-elev);pointer-events:none;
}
.search-results{
  position:absolute;top:52px;left:0;right:0;max-height:min(66vh,520px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:8px;z-index:120;
  animation:pop .18s ease;
}
.sr-item{
  display:block;padding:10px 12px;border-radius:10px;color:var(--text);
  cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit;
}
.sr-item:hover,.sr-item.active{background:var(--accent-soft)}
.sr-item .sr-q{font-size:13.5px;font-weight:600;line-height:1.4;display:block}
.sr-item .sr-meta{font-size:11px;color:var(--text-mute);margin-top:3px;display:block;text-transform:uppercase;letter-spacing:.5px}
.sr-empty{padding:22px;text-align:center;color:var(--text-mute);font-size:13px}
mark{background:linear-gradient(transparent 55%, var(--accent-soft) 55%);color:inherit;padding:0 1px;border-radius:2px}

/* ---------- layout ---------- */
.layout{display:flex;min-height:calc(100vh - 64px)}
.sidebar{
  width:var(--sbw);flex-shrink:0;
  border-right:1px solid var(--border);
  background:var(--bg-elev);
}
.sidebar-inner{
  position:sticky;top:64px;height:calc(100vh - 64px);
  display:flex;flex-direction:column;overflow:hidden;
}
/* Mobile browsers shrink the viewport as their toolbar hides; dvh tracks that,
   vh does not — without this the sidebar overflows behind the address bar. */
@supports (height:100dvh){
  .sidebar-inner{height:calc(100dvh - 64px)}
}
.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 10px;font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--text-mute);
}
.pill{
  font-size:10.5px;padding:2px 8px;border-radius:999px;letter-spacing:.4px;
  background:var(--accent-soft);color:var(--accent);font-weight:700;
}
.nav-tree{flex:1;overflow-y:auto;padding:0 10px 10px;scrollbar-width:thin}
.nav-tree::-webkit-scrollbar{width:8px}
.nav-tree::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
.sidebar-foot{padding:12px 16px;border-top:1px solid var(--border)}
.ghost-btn{
  width:100%;padding:9px;border-radius:9px;cursor:pointer;
  border:1px dashed var(--border-strong);background:transparent;
  color:var(--text-mute);font-family:inherit;font-size:12px;transition:.2s;
}
.ghost-btn:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- nav groups (dropdowns) ---------- */
.nav-group{margin-bottom:4px}
.nav-group-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  background:none;border:none;color:var(--text-dim);
  font-family:inherit;font-size:12.5px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;transition:.18s;
}
.nav-group-btn:hover{background:var(--bg-soft);color:var(--text)}
.nav-group-btn .chev{margin-left:auto;transition:transform .25s ease;width:16px;height:16px}
.nav-group.open .nav-group-btn{color:var(--text)}
.nav-group.open .chev{transform:rotate(90deg)}
.nav-group-body{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.nav-group.open .nav-group-body{grid-template-rows:1fr}
.nav-group-body > div{overflow:hidden}
.nav-link{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px 8px 14px;margin:2px 0 2px 8px;
  border-left:2px solid transparent;border-radius:0 9px 9px 0;
  color:var(--text-dim);font-size:13.5px;cursor:pointer;
  transition:.18s ease;text-decoration:none;
}
.nav-link:hover{background:var(--bg-soft);color:var(--text);text-decoration:none;transform:translateX(2px)}
.nav-link.active{
  background:var(--accent-soft);color:var(--accent);
  border-left-color:var(--accent);font-weight:600;
}
.nav-link .ic{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.nav-link .n{margin-left:auto;font-size:10.5px;color:var(--text-mute);font-family:var(--mono)}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.view{flex:1;max-width:1000px;width:100%;margin:0 auto;padding:34px 30px 60px}

/* ---------- home / hero ---------- */
.hero{
  position:relative;overflow:hidden;
  border:1px solid var(--border);border-radius:22px;
  padding:44px 38px;margin-bottom:32px;
  background:
    radial-gradient(1000px 380px at 8% -30%, var(--accent-soft), transparent 65%),
    var(--panel);
  box-shadow:var(--shadow);
  animation:rise .5s ease both;
}
.hero h1{
  margin:0 0 12px;font-size:clamp(28px,4.4vw,44px);font-weight:800;
  letter-spacing:-1.4px;line-height:1.08;
}
.hero h1 span{background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:var(--text-dim);font-size:16px;max-width:62ch;line-height:1.65}
.hero-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px}
.hstat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.8px}
.hstat span{font-size:11.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.9px}

.sec-title{
  display:flex;align-items:baseline;gap:12px;
  margin:38px 0 16px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.3px;color:var(--text-mute);
}
.sec-title::after{content:"";flex:1;height:1px;background:var(--border)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr));gap:15px}
.tcard{
  position:relative;overflow:hidden;
  padding:20px;border-radius:16px;border:1px solid var(--border);
  background:var(--panel);cursor:pointer;color:inherit;text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .25s, border-color .25s;
  animation:rise .45s ease both;
}
.tcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg);text-decoration:none}
.tcard::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(var(--accent),var(--accent-2));
  transform:scaleY(0);transform-origin:top;transition:transform .3s ease;
}
.tcard:hover::before{transform:scaleY(1)}
.tcard .ic{font-size:24px;display:block;margin-bottom:10px}
.tcard h3{margin:0 0 6px;font-size:15.5px;font-weight:700;letter-spacing:-.3px}
.tcard p{margin:0;font-size:12.5px;color:var(--text-mute);line-height:1.55;min-height:34px}
.tcard .foot{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;color:var(--text-mute);font-family:var(--mono)}
.tcard .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- topic page ---------- */
.crumbs{font-size:12px;color:var(--text-mute);margin-bottom:12px;overflow-wrap:anywhere}
.crumbs a{color:var(--text-mute)}
.crumbs a:hover{color:var(--accent)}

.topic-head{margin-bottom:22px;animation:rise .4s ease both}
.topic-head h1{margin:0 0 8px;font-size:clamp(24px,3.6vw,36px);font-weight:800;letter-spacing:-1.1px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;overflow-wrap:anywhere}
.topic-head .blurb{margin:0;color:var(--text-dim);font-size:14.5px;line-height:1.65;max-width:70ch}

.toolbar{
  position:sticky;top:64px;z-index:50;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:12px 0;margin-bottom:18px;
  background:linear-gradient(var(--bg) 78%, transparent);
}
.seg{
  display:inline-flex;padding:3px;border-radius:11px;
  background:var(--bg-soft);border:1px solid var(--border);
}
.seg button{
  padding:7px 16px;border:none;border-radius:8px;cursor:pointer;
  background:none;color:var(--text-dim);font-family:inherit;
  font-size:12.5px;font-weight:600;transition:.22s ease;white-space:nowrap;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}
.filter-in{
  flex:1;min-width:190px;height:38px;padding:0 14px;
  border-radius:10px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);font-family:inherit;font-size:13px;outline:none;transition:.2s;
}
.filter-in:focus{border-color:var(--accent);box-shadow:var(--ring)}
.count-tag{font-size:12px;color:var(--text-mute);font-family:var(--mono);white-space:nowrap}
.tool-btn{
  padding:8px 13px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;
  border:1px solid var(--border);background:var(--bg-soft);color:var(--text-dim);transition:.2s;
}
.tool-btn:hover{color:var(--accent);border-color:var(--accent)}
.firm-select{
  height:38px;padding:0 30px 0 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-soft);color:var(--text-dim);
  font-family:inherit;font-size:12.5px;font-weight:600;outline:none;
  appearance:none;transition:.2s;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px, calc(100% - 11px) 17px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.firm-select:hover,.firm-select:focus{color:var(--accent);border-color:var(--accent)}

/* ---------- Q&A accordion ---------- */
.qlist{display:flex;flex-direction:column;gap:10px}
.qcard{
  border:1px solid var(--border);border-radius:14px;
  scroll-margin-top:96px;
  background:var(--panel);overflow:hidden;
  transition:border-color .22s, box-shadow .22s;
  animation:rise .35s ease both;
  /* Skip layout and paint for cards scrolled out of view. On a topic with
     40+ long answers this is the single biggest scrolling win. */
  content-visibility:auto;
  contain-intrinsic-size:auto 64px;
}
.qcard:hover{border-color:var(--border-strong)}
.qcard.open{border-color:var(--accent);box-shadow:var(--shadow)}
.qhead{
  display:flex;align-items:flex-start;gap:13px;width:100%;
  padding:16px 18px;cursor:pointer;background:none;border:none;
  text-align:left;font-family:inherit;color:var(--text);
}
.qnum{
  flex-shrink:0;min-width:30px;height:26px;padding:0 7px;
  display:grid;place-items:center;border-radius:7px;
  background:var(--bg-soft);color:var(--text-mute);
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  transition:.22s;
}
.qcard.open .qnum{background:var(--accent);color:#fff}
.qicon{
  flex-shrink:0;font-size:16px;line-height:1.4;width:22px;text-align:center;
  filter:grayscale(.25);transition:filter .2s ease, transform .2s ease;
}
.qcard:hover .qicon,.qcard.open .qicon{filter:none;transform:scale(1.12)}
.qtext{flex:1;font-size:14.8px;font-weight:600;line-height:1.5;letter-spacing:-.2px}

/* Companies known to ask a question */
.qfirms{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:18px 0 2px;padding-top:14px;border-top:1px dashed var(--border);
}
.qfirms-label{
  font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-mute);margin-right:2px;
}
.firm{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;
  background:var(--bg-soft);color:var(--text-dim);
  border:1px solid var(--border);white-space:nowrap;
  text-decoration:none;transition:.16s ease;
}
.firm:hover{
  color:var(--accent);border-color:var(--accent);
  background:var(--accent-soft);text-decoration:none;
}
.firm::before{content:"🏢";font-size:9px;opacity:.7}
.qbadges{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-top:2px}
.badge{
  font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.badge.hot{background:rgba(239,68,68,.13);color:#ef4444}
.badge.beg{background:rgba(16,185,129,.14);color:var(--good)}
.badge.adv{background:rgba(217,119,6,.15);color:var(--warn)}
.qchev{flex-shrink:0;color:var(--text-mute);transition:transform .3s ease;margin-top:2px}
.qcard.open .qchev{transform:rotate(180deg);color:var(--accent)}
.qbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.qcard.open .qbody{grid-template-rows:1fr}
.qbody-inner{overflow:hidden}
.answer{
  padding:2px 20px 20px 89px;
  scroll-margin-top:88px;
  font-size:14.2px;line-height:1.75;color:var(--text-dim);
  border-top:1px solid transparent;
  /* Long identifiers and URLs must not push the card wider than the screen */
  overflow-wrap:break-word;
}
.answer > *:first-child{margin-top:0}
.answer p{margin:0 0 12px}
.answer strong{color:var(--text);font-weight:650}
.answer ul,.answer ol{margin:0 0 12px;padding-left:20px}
.answer li{margin-bottom:7px}
.answer li::marker{color:var(--accent)}
.answer code{
  font-family:var(--mono);font-size:12.6px;padding:2px 6px;border-radius:5px;
  background:var(--code-bg);color:var(--accent);border:1px solid var(--border);
}
.answer pre{
  margin:0 0 14px;padding:15px 17px;border-radius:11px;overflow-x:auto;
  background:var(--code-bg);border:1px solid var(--border);
}
.answer pre code{
  padding:0;border:none;background:none;color:var(--code-text);
  font-size:12.6px;line-height:1.65;display:block;white-space:pre;
}
.answer table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13px;display:block;overflow-x:auto}
.answer th,.answer td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
.answer th{background:var(--bg-soft);color:var(--text);font-weight:650;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.answer blockquote{
  margin:0 0 14px;padding:11px 16px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 10px 10px 0;color:var(--text);
}
.answer blockquote p:last-child{margin-bottom:0}
.answer .fig{
  margin:0 0 16px;padding:18px;border-radius:12px;
  background:var(--bg-soft);border:1px solid var(--border);text-align:center;
}
.answer .fig svg{width:100%;height:auto;max-width:640px;stroke-width:1.4}
.answer .fig figcaption{margin-top:10px;font-size:11.5px;color:var(--text-mute);letter-spacing:.3px}
/* diagram tokens */
.dg-box{fill:var(--panel);stroke:var(--border-strong)}
.dg-fill{fill:var(--accent-soft);stroke:var(--accent)}
.dg-fill2{fill:rgba(14,165,233,.12);stroke:var(--accent-2)}
.dg-line{stroke:var(--text-mute);fill:none}
.dg-t{fill:var(--text);font:600 12px var(--sans);stroke:none}
.dg-s{fill:var(--text-mute);font:400 10.5px var(--sans);stroke:none}
.dg-m{fill:var(--accent);font:500 11px var(--mono);stroke:none}
/* Arrowheads live inside <marker> and reuse .dg-line for their colour. That
   class sets fill:none for connector lines, which would leave every arrowhead
   a hollow outline — a descendant selector wins and fills them back in. */
.answer .fig marker path{fill:var(--text-mute);stroke:none}
/* Inline complexity / verdict callout used by the coding questions */
.answer .cx{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;
  padding:11px 14px;border-radius:11px;
  background:var(--bg-soft);border:1px solid var(--border);
}
.answer .cx b{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  color:var(--accent);white-space:nowrap;
}
.answer .cx span{font-size:12.5px;color:var(--text-mute)}

.qfoot{display:flex;align-items:center;gap:10px;padding:0 20px 16px 89px;flex-wrap:wrap}
.chip{
  font-size:10.5px;padding:3px 9px;border-radius:999px;
  background:var(--bg-soft);color:var(--text-mute);border:1px solid var(--border);
  font-family:var(--mono);
}
.mark-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border);background:transparent;
  color:var(--text-mute);font-family:inherit;font-size:11.5px;font-weight:600;transition:.2s;
}
.mark-btn:hover{color:var(--good);border-color:var(--good)}
.mark-btn.done{background:rgba(16,185,129,.12);color:var(--good);border-color:var(--good)}

/* ---------- per-topic identity ----------
   Each topic gets a solid, technology-coloured band with its motif drawn
   large inside it. The band is opaque so it reads as a real header; the motif
   stays inside the band rather than behind the body text, which keeps the
   answers at full contrast. */
.topic-banner{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:132px;margin:0 0 20px;padding:24px 26px;
  border-radius:18px;border:1px solid var(--border);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 26%, var(--panel)) 0%,
      color-mix(in srgb, var(--accent) 10%, var(--panel)) 48%,
      var(--panel) 100%);
  animation:rise .42s cubic-bezier(.22,1,.36,1) both;
}
/* A hairline of the topic colour, so the band is unmistakably "this stack". */
.topic-banner::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--accent),transparent);
}
.tb-art{
  position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  color:var(--accent);opacity:.22;pointer-events:none;
}
.banner-motif{width:168px;height:168px;stroke-width:1.1}
[data-theme="dark"] .tb-art{opacity:.3}
.tb-copy{position:relative;z-index:1;max-width:min(72%,760px)}
.tb-copy h1{
  margin:0 0 7px;font-size:clamp(23px,3.2vw,33px);font-weight:800;
  letter-spacing:-1px;display:flex;flex-wrap:wrap;align-items:center;gap:11px;
}
.tb-icon{font-size:1.05em}
.tb-copy .blurb{margin:0;font-size:13.6px;color:var(--text-dim);line-height:1.62}
.tb-sheet{
  display:inline-flex;align-items:center;gap:6px;margin-top:13px;
  padding:8px 15px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.2px;
  text-decoration:none;box-shadow:0 6px 18px -8px var(--accent);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s;
}
.tb-sheet:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 10px 22px -8px var(--accent)}
.tb-sheet:active{transform:translateY(0)}

/* ---------- cheatsheets ---------- */
.cs-hero h1{font-size:clamp(28px,4vw,40px)}
.cs-kicker{
  display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
}
.cs-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
  gap:15px;align-items:start;
}
.cs-card{
  border:1px solid var(--border);border-radius:15px;background:var(--panel);
  padding:17px 19px 19px;box-shadow:var(--shadow);
  content-visibility:auto;contain-intrinsic-size:280px;
  animation:rise .4s ease both;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.cs-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.cs-card h2{
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--border);
  font-size:12px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--accent);
}
.cs-card table{width:100%;border-collapse:collapse;font-size:13px;display:block;overflow-x:auto}
.cs-card th,.cs-card td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.cs-card th{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-mute);font-weight:700}
.cs-card td{color:var(--text-dim);line-height:1.55}
.cs-card tr:last-child td{border-bottom:none}
.cs-card ul{margin:0;padding-left:19px;font-size:13.4px;color:var(--text-dim);line-height:1.72}
.cs-card li{margin:5px 0}
.cs-card li::marker{color:var(--accent)}
.cs-card pre{
  margin:0;padding:13px 14px;border-radius:10px;overflow-x:auto;
  background:var(--code-bg);border:1px solid var(--border);
}
.cs-card pre code{font-family:var(--mono);font-size:12.1px;line-height:1.65;color:var(--code-text)}
.cs-card pre[data-lang]::before{
  content:attr(data-lang);display:block;margin:-4px 0 8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-mute);
}
.cs-quote{
  margin:0;padding:11px 15px;border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;background:var(--accent-soft);
  font-size:13.4px;line-height:1.68;color:var(--text-dim);font-style:italic;
}
.cs-card code{
  font-family:var(--mono);font-size:.9em;padding:1px 5px;border-radius:5px;
  background:var(--bg-soft);color:var(--code-text);
}
.cs-card pre code{background:none;padding:0}
.cs-nav{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
}
.cs-nav a{
  padding:10px 15px;border-radius:11px;border:1px solid var(--border);
  background:var(--panel);color:var(--text-dim);font-size:13px;font-weight:600;
  text-decoration:none;transition:.2s ease;
}
.cs-nav a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}

/* Cheatsheet index tiles carry their topic's colour */
.cs-tile{position:relative;overflow:hidden;border-top:3px solid var(--tint)}
.cs-tile:hover{border-color:var(--tint);border-top-color:var(--tint)}
.cs-tile-art{
  position:absolute;right:-10px;bottom:-14px;color:var(--tint);opacity:.13;
  pointer-events:none;transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.tile-motif{width:96px;height:96px;stroke-width:1.2}
.cs-tile:hover .cs-tile-art{transform:scale(1.12) rotate(-6deg);opacity:.2}
.cs-tile .tc-go{color:var(--tint)}

/* ---------- company pages ---------- */
.nav-special{
  display:flex;align-items:center;gap:9px;
  margin:2px 0 10px;padding:10px 12px;
  border-radius:10px;border:1px dashed var(--border-strong);
  color:var(--text-dim);font-size:13.5px;font-weight:600;
  text-decoration:none;transition:.18s ease;
}
.nav-special:hover{
  color:var(--accent);border-color:var(--accent);
  background:var(--accent-soft);text-decoration:none;
}
.nav-special.active{
  color:var(--accent);border-style:solid;border-color:var(--accent);
  background:var(--accent-soft);
}
.nav-special .ic{font-size:14px;width:18px;text-align:center}

.sec-note{margin:-8px 0 14px;font-size:12.5px;color:var(--text-mute)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.co-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel);
  color:var(--text-dim);font-size:12.5px;font-weight:600;
  text-decoration:none;transition:.2s cubic-bezier(.34,1.4,.64,1);
}
.co-chip:hover{
  color:var(--accent);border-color:var(--accent);
  transform:translateY(-2px);text-decoration:none;
}
.co-n{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  padding:1px 6px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
}
.co-chip.co-all{border-style:dashed;color:var(--accent)}
.cs-chip{border-left:3px solid var(--tint)}
.cs-chip:hover{color:var(--tint);border-color:var(--tint);border-left-color:var(--tint)}

.company-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(212px,100%),1fr));gap:13px}
.ccard{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 18px;border-radius:14px;
  border:1px solid var(--border);background:var(--panel);
  color:inherit;text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .25s, border-color .25s;
  animation:rise .4s ease both;
}
.ccard:hover{
  transform:translateY(-3px);border-color:var(--accent);
  box-shadow:var(--shadow-lg);text-decoration:none;
}
.cc-name{font-size:15px;font-weight:700;letter-spacing:-.3px}
.cc-count{font-size:11.5px;color:var(--accent);font-family:var(--mono)}
.cc-topics{font-size:11.5px;color:var(--text-mute);line-height:1.5;margin-top:3px}

/* topic separators inside a company's question list */
.qgroup-head{
  display:flex;align-items:center;gap:9px;
  margin:22px 0 2px;padding:0 2px 8px;
  border-bottom:1px solid var(--border);
  font-size:12px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-mute);
}
.qgroup-head:first-child{margin-top:0}
.qgroup-head .ic{font-size:15px}
.qgroup-head a{color:var(--text-dim)}
.qgroup-head a:hover{color:var(--accent)}
.qgroup-n{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:0;
  padding:1px 7px;border-radius:999px;background:var(--bg-soft);color:var(--text-mute);
}
.hot-toggle.on{background:rgba(239,68,68,.13);color:#ef4444;border-color:#ef4444}
.sr-company .sr-q{color:var(--accent)}

/* ---------- misc ---------- */
.empty{padding:60px 20px;text-align:center;color:var(--text-mute)}
.empty h3{color:var(--text-dim);font-weight:600;margin:0 0 6px}
.loading{padding:70px;text-align:center;color:var(--text-mute);font-size:13.5px}
.spinner{
  width:26px;height:26px;margin:0 auto 14px;border-radius:50%;
  border:2.5px solid var(--border);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
.site-foot{
  padding:26px 30px;border-top:1px solid var(--border);
  text-align:center;font-size:12.5px;color:var(--text-dim);
}
.site-foot p{margin:0 0 4px}
.site-foot .muted{color:var(--text-mute);font-size:11.5px}
.fab{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--border);
  background:var(--panel);color:var(--accent);box-shadow:var(--shadow-lg);
  animation:pop .25s ease;transition:.2s;
}
.fab:hover{transform:translateY(-3px)}
.scrim{display:none}

/* ---------- progress ring on topic cards ---------- */
.prog-track{height:3px;border-radius:2px;background:var(--bg-soft);overflow:hidden;margin-top:12px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--good),var(--accent-2));width:0;transition:width .5s ease}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- interaction polish ----------
   Everything here is transform/opacity only, so it stays on the compositor
   and never triggers layout during a scroll. */

/* Views fade in on navigation instead of snapping */
.view{animation:view-in .3s cubic-bezier(.22,1,.36,1) both}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Question cards lift on hover and press in on click */
.qcard{transition:border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.34,1.4,.64,1)}
.qcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.qcard:has(.qhead:active){transform:translateY(0) scale(.995)}
.qcard.open{border-color:var(--accent)}
/* The number badge fills with the topic colour once the card is open */
.qcard.open .qnum{background:var(--accent);color:#fff;border-color:var(--accent)}
.qnum{transition:background .25s ease, color .25s ease, border-color .25s ease}
.qchev{transition:transform .28s cubic-bezier(.34,1.4,.64,1)}
.qcard.open .qchev{transform:rotate(180deg)}

/* Topic cards on the home grid */
.tcard{transition:transform .26s cubic-bezier(.34,1.4,.64,1), box-shadow .26s ease, border-color .26s ease}
.tcard:hover{transform:translateY(-4px)}
.tcard:active{transform:translateY(-1px)}

/* Buttons acknowledge the press */
.tool-btn,.seg button,.mark-btn,.ghost-btn{transition:.18s ease}
.tool-btn:active,.seg button:active,.mark-btn:active{transform:scale(.96)}

/* A revised card recedes, so what is left to do stands out */
.qcard:has(.mark-btn.done) .qnum{background:var(--good);border-color:var(--good);color:#fff}
.qcard:has(.mark-btn.done):not(.open) .qtext{opacity:.62}

/* Sidebar links slide toward their content */
.nav-link{transition:color .18s ease, background .18s ease, padding-left .18s ease}
.nav-link:hover{padding-left:18px}

/* Focus rings for keyboard users only — no rings on mouse clicks */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.qhead:focus-visible{outline-offset:-2px}

/* Copy button on every code block, revealed on hover */
.answer pre,.cs-card pre{position:relative}
.copy-btn{
  position:absolute;top:8px;right:8px;
  padding:5px 10px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border);background:var(--panel);color:var(--text-mute);
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.5px;
  opacity:0;transform:translateY(-3px);transition:.18s ease;
}
pre:hover .copy-btn,.copy-btn:focus-visible{opacity:1;transform:none}
.copy-btn:hover{color:var(--accent);border-color:var(--accent)}
.copy-btn.done{color:var(--good);border-color:var(--good);opacity:1;transform:none}

/* Anything that animates in should not do so for people who asked it not to */
@media (prefers-reduced-motion:reduce){
  .view,.qcard,.tcard,.cs-card,.topic-banner{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ---------- responsive ----------
   Breakpoints: 1000 trims the brand, 900 collapses the type button to an icon,
   860 turns the sidebar into a drawer, 640 turns the type panel into a bottom
   sheet and makes diagrams scrollable, 560 compacts the toolbar. */
@media (max-width:1000px){
  .brand-text small{display:none}
}

@media (max-width:900px){
  .font-name{display:none}
  .type-btn{width:40px;padding:0}
}

@media (max-width:860px){
  .menu-toggle{display:grid}
  .sidebar{
    position:fixed;top:64px;left:0;bottom:0;z-index:110;
    width:min(var(--sbw), 86vw);
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:none}
  .scrim{
    display:block;position:fixed;inset:64px 0 0;z-index:105;
    background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .scrim.on{opacity:1;pointer-events:auto}
  .view{padding:22px 16px 50px}
  .hero{padding:30px 22px;border-radius:18px}
  .brand-text{display:none}
  .answer{padding-left:20px}
  .qfoot{padding-left:20px}
  .qicon{display:none}
  .toolbar{position:static}
}

/* ---- phones: the type panel becomes a bottom sheet ---- */
@media (max-width:640px){
  .font-panel{
    top:auto;bottom:0;left:0;right:0;width:auto;
    max-height:min(78vh,560px);
    border-radius:18px 18px 0 0;border-bottom:none;
    padding:0 12px calc(14px + env(safe-area-inset-bottom, 0px));
    animation:sheet-up .24s cubic-bezier(.32,.72,0,1);
  }
  @supports (height:100dvh){
    .font-panel{max-height:min(78dvh,560px)}
  }
  .sheet-scrim{
    display:block;position:fixed;inset:0;z-index:135;
    background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
    animation:fade-in .2s ease;
  }
  /* A grab handle, so the sheet reads as one and there is somewhere to tap */
  .fp-grab{
    display:block;position:sticky;top:0;z-index:2;
    margin:0 -12px 4px;padding:10px 0 8px;
    background:var(--panel);cursor:pointer;
  }
  .fp-grab::before{
    content:"";display:block;width:38px;height:4px;margin:0 auto;
    border-radius:999px;background:var(--border-strong);
  }
  .fp-cat{top:30px}
  .size-item{padding:11px 4px;font-size:12.5px}
  .font-item{padding:11px}

  /* Diagrams keep a legible size and scroll sideways instead of shrinking
     their labels to a few pixels. */
  .answer .fig{padding:14px 10px;overflow-x:auto;overscroll-behavior-x:contain}
  .answer .fig svg{min-width:500px}

  /* iOS Safari zooms the page when a focused input is under 16px */
  .search-wrap input,.filter-in,.firm-select{font-size:16px}

  /* Banner shrinks and the motif steps back so the copy stays readable */
  .topic-banner{min-height:0;padding:18px;border-radius:15px}
  .tb-copy{max-width:100%}
  .banner-motif{width:112px;height:112px}
  .tb-art{right:-24px;opacity:.15}
  [data-theme="dark"] .tb-art{opacity:.2}
  .cs-grid{grid-template-columns:1fr;gap:12px}
  .cs-card{padding:15px 15px 17px}
  .cs-card pre code{font-size:11.6px}
  .cs-card table{font-size:12.4px}
  .cs-nav{flex-direction:column}
  .cs-nav a{text-align:center}

  /* Comfortable tap targets */
  .mark-btn{padding:8px 14px;font-size:12px}
  .tool-btn{padding:10px 13px}
  .seg button{padding:9px 15px}
  .nav-link{padding:11px 12px 11px 14px}
  .co-chip{padding:9px 14px}
}

@media (max-width:560px){
  .topbar{padding:0 12px;gap:9px}
  .search-wrap{max-width:none}
  .kbd-hint{display:none}
  .hero{padding:26px 18px}
  .hero-stats{gap:18px}
  .qhead{padding:14px}
  .qbadges .badge:not(.hot){display:none}
  .view{padding:18px 12px 44px}

  /* Let each control own a full row rather than squeezing into a shared one */
  .toolbar{gap:9px}
  .seg{flex:1 1 100%}
  .seg button{flex:1;padding:9px 6px}
  .filter-in{flex:1 1 100%;min-width:0}
  .firm-select{flex:1 1 100%}
  .count-tag{flex:1 1 100%}
  .tool-btn{flex:1}

  .topic-banner{padding:16px 15px}
  .tb-art{display:none}          /* below this width the motif crowds the text */
  .tb-copy h1{gap:8px}
  .tb-sheet{width:100%;justify-content:center}
  .answer{font-size:14px;padding-right:14px}
  .answer pre{padding:13px 12px;border-radius:9px}
  .answer pre code{font-size:12px}
  .answer table{font-size:12.5px}
  .answer th,.answer td{padding:8px 10px}
  .qgroup-head{font-size:11px}
  .fab{right:16px;bottom:16px}
}

/* Very narrow phones and large accessibility text sizes */
@media (max-width:380px){
  .brand-mark{width:34px;height:34px;font-size:17px}
  .icon-btn{width:36px;height:36px}
  .hero h1{letter-spacing:-.8px}
  .answer .fig svg{min-width:440px}
}

/* Coarse pointers get bigger targets regardless of viewport width */
@media (pointer:coarse){
  .qhead{min-height:52px}
  .size-item,.font-item{min-height:44px}
}