/* ─────────────────────────────────────────────────────────────────────────
   Showcase design system — reusable component styles for interactive
   research/paper pages (layout: showcase).

   Everything here is scoped under `.showcase` (the content wrapper each
   showcase page renders inside) so it never leaks onto the rest of the
   site. Chrome colors (background, ink, borders, links) are pulled from
   the site's own theme variables in assets/css/custom.css, so a showcase
   page follows the site's light/dark toggle automatically. The semantic
   "good / bad / lora" trio is a separate, deliberately distinct palette
   for encoding meaning in data (e.g. retained vs. lost vs. intervention)
   and is kept apart from the site's link/accent color on purpose.

   To build a new showcase page: add front matter `layout: showcase` and
   `classes: showcase-page`, wrap your content in `<div class="showcase">`,
   and reuse the components below (.sc-nav, .card, .toggle, .chartwrap,
   .key-insight, .data-table, etc).
   ───────────────────────────────────────────────────────────────────────── */

/* layout plumbing: this page has no sidebar and manages its own width */
body.showcase-page #main {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
body.showcase-page .page,
body.showcase-page .page__inner-wrap,
body.showcase-page .page__content {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.showcase-page .page__meta,
body.showcase-page .page__related { display: none !important; }

/* ── design tokens ── */
.showcase {
  --bg: var(--background-color);
  --bg-alt: var(--surface-muted-background);
  --ink: var(--heading-color);
  --muted: var(--text-color);
  --faint: #8592a6;
  --border: var(--border-color);
  --border-strong: #c2cede;

  --accent: var(--link-color);
  --accent-hover: var(--link-color-hover);
  --accent-soft: var(--surface-muted-background);

  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, .12);
  --bad: #e0484d;
  --bad-soft: rgba(224, 72, 77, .12);
  --lora: #7c3aed;
  --lora-soft: rgba(124, 58, 237, .12);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: var(--surface-shadow);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --maxw: 1040px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* no local font-size override: this site's root is 16px (see _reset.scss),
     so 1rem = 16px here exactly like every other page — keep all sizing
     below in rem so it stays tied to that one shared scale. */
  display: block;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

html.dark-theme .showcase {
  --faint: #64748b;
  --border-strong: #35455a;
  --accent-soft: rgba(126, 199, 160, .12);
  --good: #2dd4bf;
  --good-soft: rgba(45, 212, 191, .14);
  --bad: #f87171;
  --bad-soft: rgba(248, 113, 113, .14);
  --lora: #a78bfa;
  --lora-soft: rgba(167, 139, 250, .14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

.showcase * { box-sizing: border-box; }

.showcase .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.showcase .narrow { max-width: 680px; }

.showcase a { color: var(--accent); text-decoration: none; }
.showcase a:hover { color: var(--accent-hover); text-decoration: underline; }

.showcase h1, .showcase h2, .showcase h3 { line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; color: var(--ink); }
.showcase h2 { font-size: 1.5rem; margin: 0 0 .4em; }
.showcase h3 { font-size: 1.15rem; margin: 0 0 .3em; }

.showcase .eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 .7em;
}
.showcase .lead { font-size: 1.05rem; color: var(--muted); }
.showcase .muted { color: var(--muted); }
.showcase .mono { font-family: var(--mono); }

/* ── layout: sections ── */
.showcase section { padding: 56px 0; border-bottom: 1px solid var(--border); }
.showcase section.alt { background: var(--bg-alt); }
.showcase .section-head { max-width: 680px; margin-bottom: 32px; }

/* ── in-page nav ── */
.showcase .sc-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.showcase .sc-nav .wrap {
  display: flex; align-items: center; gap: 4px; height: 52px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: none;
}
.showcase .sc-nav .wrap::-webkit-scrollbar { display: none; }
.showcase .sc-nav .brand { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: var(--ink); flex-shrink: 0; }
.showcase .sc-nav .spacer { flex: 1 0 16px; }
.showcase .sc-nav a.navlink { color: var(--muted); font-size: .85rem; padding: 6px 9px; border-radius: 8px; flex-shrink: 0; }
.showcase .sc-nav a.navlink:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
@media (max-width: 720px){ .showcase .sc-nav .navlink.hide-sm { display: none; } }

/* ── status banner (relationship to the published paper) ── */
.showcase .status-banner { background: var(--accent-soft); border-bottom: 1px solid var(--border); padding: 12px 0; }
.showcase .status-banner .wrap { max-width: 820px; }
.showcase .status-banner p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ink); }
.showcase .status-banner a { font-weight: 600; }

/* ── hero ── */
.showcase .hero { padding: 40px 0 56px; border-bottom: 1px solid var(--border); }
.showcase .hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .35em; }
.showcase .hero .sub { font-size: 1.05rem; color: var(--muted); max-width: 620px; }
.showcase .hero .tag {
  display: inline-block; font-size: .82rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 22px;
}
.showcase .hero-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.showcase .stat {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 20px; box-shadow: var(--shadow-sm); min-width: 130px;
}
.showcase .stat .num { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.showcase .stat .lbl { font-size: .82rem; color: var(--muted); }

/* ── buttons / pills (namespaced sc-btn to avoid the site's global .btn) ── */
.showcase .sc-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--ink); border-radius: 10px; padding: 9px 16px;
  font-size: .95rem; font-weight: 500; font-family: var(--font);
  transition: all .12s ease;
}
.showcase .sc-btn:hover { border-color: var(--accent); color: var(--accent); }
.showcase .sc-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.showcase .sc-btn.primary:hover { background: var(--accent-hover); color: #fff; }

.showcase .toggle {
  display: inline-flex; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px; gap: 2px;
}
.showcase .toggle button {
  border: 0; background: transparent; cursor: pointer; font-family: var(--font);
  font-size: .92rem; font-weight: 600; color: var(--muted);
  padding: 8px 18px; border-radius: 999px; transition: all .14s ease;
}
.showcase .toggle button.active { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }
.showcase .toggle.q button.active[data-q="first"] { color: var(--good); }
.showcase .toggle.q button.active[data-q="last"]  { color: var(--bad); }
.showcase .toggle.ba button.active[data-v="base"] { color: var(--ink); }
.showcase .toggle.ba button.active[data-v="lora"] { color: var(--lora); }

/* ── card ── */
.showcase .card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px;
}

/* ── §1 demo ── */
.showcase #demo-target { font-size: .92rem; }
.showcase #demo-target .tk { font-family: var(--mono); font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 3px 10px; border-radius: 8px; }
.showcase #demo-target .dk { color: var(--faint); font-family: var(--mono); font-size: .85rem; }

.showcase .demo-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; margin-top: 20px; align-items: start; }
@media (max-width: 720px){ .showcase .demo-layout { grid-template-columns: 1fr; } }

.showcase .stream-caption { font-size: .8rem; color: var(--muted); margin-bottom: 8px; letter-spacing: .02em; }
.showcase .stream-list {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-y: auto;
  max-height: 420px; background: var(--bg-alt); padding: 8px;
}
.showcase .srow {
  display: grid; grid-template-columns: minmax(96px, 36%) 1fr auto; gap: 12px;
  align-items: baseline; font-family: var(--mono); font-size: .9rem;
  padding: 5px 12px; border-radius: 8px; border-left: 3px solid transparent;
  transition: background .15s;
}
.showcase .srow .sk { text-align: right; color: var(--faint); font-size: .82rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.showcase .srow .sv { font-weight: 600; color: var(--ink); }
.showcase .srow.distractor { opacity: .5; }
.showcase .srow.distractor .sv { font-weight: 500; color: var(--muted); }
.showcase .srow.tgt { background: var(--accent-soft); border-left-color: var(--accent); }
.showcase .srow.tgt .sk { color: var(--accent); font-weight: 600; }
.showcase .srow .tag { font-size: .6rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.showcase .srow.is-first { background: var(--good-soft); border-left-color: var(--good); }
.showcase .srow.is-first .sv { color: var(--good); }
.showcase .srow.is-first .sk { color: var(--good); }
.showcase .srow.is-first .tag { background: var(--good); color: #fff; }
.showcase .srow.is-last { background: var(--bad-soft); border-left-color: var(--bad); }
.showcase .srow.is-last  .sv { color: var(--bad); }
.showcase .srow.is-last  .sk { color: var(--bad); }
.showcase .srow.is-last  .tag { background: var(--bad); color: #fff; }
.showcase .srow.is-pred { background: var(--accent-soft); border-left-color: var(--accent); opacity: 1; }
.showcase .srow.is-pred .tag.pred { background: var(--accent); color: #fff; }
.showcase .srow.is-pred .sv { color: var(--accent); }
.showcase .collapse-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
  font-family: var(--font); font-size: .82rem; color: var(--muted);
  padding: 7px 12px; margin: 3px 0; border-radius: 8px; border: 1px dashed var(--border-strong);
  background: var(--bg); transition: all .15s;
}
.showcase .collapse-row:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.showcase .collapse-row .dots { letter-spacing: 2px; color: var(--faint); }
.showcase .collapse-row .chev { margin-left: auto; font-size: .9rem; }

.showcase .memory-panel { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
.showcase .mem-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .9rem; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.showcase .mem-row:last-child { border-bottom: 0; }
.showcase .mem-row .mk { color: var(--muted); }
.showcase .mem-row .mv { font-weight: 600; color: var(--ink); }
.showcase .mem-row.tgt .mk { color: var(--accent); font-weight: 600; }

.showcase #demo-answer { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.showcase .qline { font-size: 1.02rem; margin: 0 0 14px; }
.showcase .answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.showcase .answer-box .k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.showcase .answer-box .v { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; margin-top: 3px; word-break: break-word; }
.showcase .verdict { display:inline-block; font-weight: 700; padding: 5px 13px; border-radius: 999px; font-size: .88rem; margin-top: 14px; }
.showcase .verdict.ok  { background: var(--good-soft); color: var(--good); }
.showcase .verdict.bad { background: var(--bad-soft); color: var(--bad); }
.showcase .verdict-note { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.showcase .demo-nscrub { margin-top: 20px; }
.showcase .demo-nscrub input[type=range] { accent-color: var(--accent); }
.showcase .demo-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; }

/* ── charts ── */
.showcase .chartwrap { width: 100%; overflow: visible; }
.showcase svg text { font-family: var(--font); fill: var(--ink); }
.showcase .axis line, .showcase .axis path { stroke: var(--border-strong); }
.showcase .gridline { stroke: var(--border); stroke-dasharray: 2 3; }
.showcase .sc-tip {
  position: fixed; pointer-events: none; z-index: 100; opacity: 0;
  background: var(--ink); color: var(--bg); font-size: .82rem; padding: 7px 11px;
  border-radius: 8px; transition: opacity .1s; box-shadow: var(--shadow); max-width: 240px;
}
.showcase .sc-tip .t-title { font-weight: 700; }
.showcase .sc-tip .t-row { color: var(--bg); opacity: .8; }

.showcase .legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .88rem; color: var(--muted); margin-top: 10px; }
.showcase .legend .dot { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align: -1px; }

/* ── slider ── */
.showcase .scrub { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.showcase .scrub input[type=range] { flex: 1; accent-color: var(--accent); }
.showcase .scrub .lyr { font-family: var(--mono); font-size: .9rem; min-width: 116px; color: var(--ink); }
.showcase .controls-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }

/* ── bars ── */
.showcase .barpair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 10px; }
@media (max-width: 620px){ .showcase .barpair { grid-template-columns: 1fr; } }
.showcase .bargroup .head { font-weight: 700; margin-bottom: 12px; }
.showcase .bar-row { margin: 14px 0; }
.showcase .bar-row .lab { display:flex; justify-content: space-between; font-size:.9rem; margin-bottom: 5px; color: var(--ink); }
.showcase .bar-track { height: 26px; background: var(--bg-alt); border-radius: 7px; overflow: hidden; border: 1px solid var(--border); }
.showcase .bar-fill { height: 100%; border-radius: 6px 0 0 6px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.showcase .bar-fill.fvq { background: var(--good); }
.showcase .bar-fill.cvq { background: var(--bad); }
.showcase .gap-badge { display:inline-block; font-weight:700; padding:4px 12px; border-radius:999px; font-size:.9rem; }

/* ── callout / note ── */
.showcase .note {
  font-size: .92rem; color: var(--muted); border-left: 3px solid var(--border-strong);
  padding: 4px 0 4px 16px; margin-top: 22px;
}
.showcase .key-insight {
  background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 18px 22px; margin-top: 24px; font-size: 1.02rem; color: var(--ink);
}
.showcase .key-insight strong { color: var(--accent); }

/* ── tables ── */
.showcase .data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.showcase .data-table th, .showcase .data-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--ink); }
.showcase .data-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.showcase .data-table td.num { font-family: var(--mono); text-align: right; }
.showcase .data-table tr:last-child td, .showcase .data-table tbody tr:last-child td { border-bottom: 0; }
.showcase .data-table .gap-pos { color: var(--bad); font-weight: 600; }
.showcase .data-table .gap-neg { color: var(--good); font-weight: 600; }
.showcase .data-table tbody tr:hover { background: var(--bg-alt); }
.showcase .tbl-wrap { margin-top: 16px; max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* findings / TL;DR */
.showcase .findings table { width: 100%; border-collapse: collapse; }
.showcase .findings td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .98rem; color: var(--ink); }
.showcase .findings tr:last-child td { border-bottom: 0; }
.showcase .f-claim { font-weight: 600; }
.showcase .f-result { color: var(--muted); }
.showcase .f-where a { font-size: .82rem; color: var(--accent); white-space: nowrap; font-weight: 600; }

/* stakes grid (why it matters) */
.showcase .stakes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 680px){ .showcase .stakes-grid { grid-template-columns: 1fr; } }
.showcase .stake { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; background: var(--bg); }
.showcase .stake .s-emoji { font-size: 1.4rem; }
.showcase .stake .s-title { font-weight: 700; margin: 6px 0 4px; color: var(--ink); }
.showcase .stake .s-body { font-size: .92rem; color: var(--muted); }
.showcase .stake .s-body .stale { color: var(--bad); font-weight: 600; }

/* comparison grid (vs lost-in-middle / vs humans) */
.showcase .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
@media (max-width: 680px){ .showcase .compare-grid { grid-template-columns: 1fr; } }
.showcase .compare-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; }
.showcase .compare-card.ours { border-color: var(--accent); background: var(--accent-soft); }
.showcase .compare-card .c-head { font-weight: 700; font-size: .95rem; margin-bottom: 10px; color: var(--ink); }
.showcase .compare-card .c-head .badge { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--border); color: var(--muted); margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }
.showcase .compare-card.ours .c-head .badge { background: var(--accent); color: #fff; }
.showcase .compare-card ul { margin: 0; padding-left: 18px; }
.showcase .compare-card li { font-size: .9rem; color: var(--muted); margin: 6px 0; }
.showcase .compare-card.ours li { color: var(--ink); }

/* appendix / details */
.showcase .appendix { border-top: 1px solid var(--border); padding-top: 8px; }
.showcase details.panel { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 12px; background: var(--bg); }
.showcase details.panel > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.showcase details.panel > summary::-webkit-details-marker { display: none; }
.showcase details.panel > summary::after { content: "+"; color: var(--muted); font-size: 1.2rem; }
.showcase details.panel[open] > summary::after { content: "\2212"; }
.showcase details.panel .panel-body { padding: 0 18px 18px; font-size: .92rem; color: var(--muted); }
.showcase details.panel .panel-body ul { padding-left: 18px; }
.showcase details.panel .panel-body li { margin: 6px 0; }
.showcase pre.codeblock { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: .82rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }

/* ── footer ── */
.showcase footer { padding: 56px 0 80px; color: var(--muted); font-size: .92rem; border-top: 1px solid var(--border); }
.showcase footer .links { display:flex; flex-wrap:wrap; gap: 18px; margin-bottom: 18px; }
.showcase footer .links a { font-weight: 600; }

.showcase .dim-label { font-size: .78rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.showcase .spin { animation: sc-spin 1s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg);} }
.showcase .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.showcase .reveal.in { opacity: 1; transform: none; }