/* Context Playground V2 — design tokens + rules. See DESIGN_STYLE_V2.md for rationale.
   Source of truth for the visual system: approved mockup a2.html (warehouse-console world). */

:root{
  --ground:#f4f6f8;
  --paper:#ffffff;
  --rule:#dfe4ea;
  --rule-soft:#eceff3;
  --tint:#f8fafb;

  --ink:#16202b;
  --ink-2:#4a5866;
  --ink-3:#7c8896;

  --accent:#1b47c4;
  --accent-2:#5a79db;
  --accent-3:#a8b8ec;
  --accent-wash:#eef1fc;

  --safe:#0f7a52;
  --error:#b3261e;
  --error-bg:#fbeceb;
  --warn:#8a5a00;
  --warn-bg:#fdf3d9;

  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--ground);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.shell{max-width:1040px;margin:0 auto;padding:0 24px}

/* ── header ───────────────────────────────────────────── */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
.masthead-row{display:flex;align-items:center;gap:26px;height:54px}
.wordmark{font-size:14px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;color:var(--ink)}
.tabs{display:flex;gap:20px;align-self:stretch;align-items:center;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-size:13.5px;color:var(--ink-2);text-decoration:none;display:flex;align-items:center;height:100%;position:relative;white-space:nowrap;transition:color .12s}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{color:var(--ink);font-weight:500}
.tab[aria-current="page"]::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-1px;height:2px;background:var(--accent)}
.masthead-end{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none;padding-left:8px}
.identity{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.signout{font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.signout:hover{color:var(--ink);text-decoration:underline}

/* ── connection strip: schema-browser vernacular ──────── */
.connbar{background:var(--paper);border-bottom:1px solid var(--rule-soft)}
.conn{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:8px 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.conn-item{padding:0 14px;border-right:1px solid var(--rule-soft);display:flex;align-items:center;gap:6px}
.conn-item:first-child{padding-left:0}
.conn-item:last-child{border-right:0}
.conn-item b{font-weight:500;color:var(--ink-2)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--safe);flex:none}
.conn-item.safe b{color:var(--safe)}

/* ── page head ────────────────────────────────────────── */
.pagehead{padding:30px 0 22px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);margin-bottom:8px}
.eyebrow .sep{color:var(--accent-3);padding:0 2px}
h1{font-size:26px;font-weight:600;letter-spacing:-.022em;line-height:1.15;color:var(--ink)}
.lede{color:var(--ink-2);font-size:14.5px;margin-top:7px;max-width:62ch}

/* ── SIGNATURE: assembly gauge (Context tab only) ─────── */
.gauge{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px 14px;margin-bottom:20px}
.gauge-top{display:flex;align-items:baseline;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.gauge-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-3)}
.gauge-figure{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.gauge-figure b{color:var(--ink);font-weight:600}
.bar{display:flex;height:8px;border-radius:2px;overflow:hidden;background:var(--rule-soft);gap:1.5px}
.seg{height:100%;transition:opacity .14s}
.seg-1{background:var(--accent)}
.seg-2{background:var(--accent-2)}
.seg-3{background:var(--accent-3)}
.gauge:hover .seg{opacity:.45}
.gauge .seg:hover{opacity:1}
.legend{display:flex;gap:22px;margin-top:11px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px}
.leg{display:flex;align-items:center;gap:7px;color:var(--ink-3)}
.swatch{width:8px;height:8px;border-radius:2px;flex:none}
.leg .nm{color:var(--ink-2)}
.leg .tk{color:var(--ink-3)}

/* ── cards ────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.card-head{padding:15px 18px;border-bottom:1px solid var(--rule-soft);display:flex;align-items:flex-start;gap:14px}
.ord{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-wash);border-radius:4px;padding:2px 6px;line-height:1.5;flex:none;margin-top:1px}
.card-head h2{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.card-head p{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.card-meta{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;padding-top:2px}
.card-body{padding:18px}
.card-body.flush{padding:0}
/* the global *{padding:0} reset strips list indents, which clips wide markers
   (e.g. "10." in the benchmark question list) — put the indent back. */
.card-body ol,.card-body ul{padding-left:1.6em}
.card-body li{margin-bottom:5px}
.card-foot{padding:11px 18px;border-top:1px solid var(--rule-soft);background:var(--tint);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foot-note{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* ── editor ───────────────────────────────────────────── */
.editor{width:100%;font-family:var(--mono);font-size:13px;line-height:1.68;color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:13px 15px;resize:vertical;background:var(--tint);outline:none;display:block;transition:border-color .12s,background .12s}
.editor:focus{border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 3px var(--accent-wash)}

/* ── buttons ──────────────────────────────────────────── */
/* .btn-primary carries the full base too, so it works standalone — it only ever
   overrode colour, and templates that wrote class="btn-primary" alone were losing
   padding, radius and border entirely. */
.btn,.btn-primary{font-family:var(--sans);font-size:13px;font-weight:500;padding:7px 14px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{background:var(--tint);border-color:var(--ink-3)}
.btn:disabled,.btn-primary:disabled{cursor:not-allowed;opacity:.5}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#1739a3;border-color:#1739a3}
.btn-primary:disabled:hover{background:var(--accent);border-color:var(--accent)}

/* ── file rows ────────────────────────────────────────── */
.files{list-style:none}
.file{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rule-soft);transition:background .12s}
.file:last-child{border-bottom:0}
.file:hover{background:var(--tint)}
.caret{font-size:9px;color:var(--ink-3);flex:none;width:8px}
/* summary.file scoped only: other pages rely on the native disclosure marker.
   Chrome declares list-style:disclosure-closed directly on summary, which beats
   the inherited .files{list-style:none} and doubles up with .caret. */
summary.file{list-style:none}
summary.file::-webkit-details-marker{display:none}
details[open] > summary.file .caret{transform:rotate(90deg)}
.fname{font-family:var(--mono);font-size:13px;color:var(--ink)}
.fpath{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.file-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.pill{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);background:var(--rule-soft);border-radius:4px;padding:2px 7px}
.ftok{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);min-width:66px;text-align:right}
/* the masthead is the only sticky element (54px) -- offset an anchored #f-…/#new-file
   details row clear of it. */
.files details{scroll-margin-top:68px}
/* .card-body.flush has padding:0, so a banner dropped straight in touches the card
   edges -- give it back the card-body inset on its own. */
.card-body.flush > .warn{margin:14px 18px 0}

/* ── auth pages ───────────────────────────────────────── */
/* login + admin login render without the masthead, so the card has to carry the
   page: a narrow panel, optically centred a little above the true middle. */
.auth{max-width:360px;margin:0 auto;padding:12vh 0 6vh}
.auth .wordmark{display:block;text-align:center;margin-bottom:16px}
.auth .card{margin-bottom:0}
.auth .card-body>div{margin-bottom:10px}
.auth .card-body input{width:100%}
.auth .btn-primary{width:100%}
.auth-note{text-align:center;margin-top:14px}

/* ── progress / busy: JS-driven, deliberately quieter than the Context gauge's
   .bar (8px, segmented, --accent) — DESIGN_STYLE_V2.md "spend boldness once".
   prefers-reduced-motion (line 35, universal !important) kills every CSS
   transition/animation, so meaning must live in text a script updates; any
   motion here is a JS-set width, not a CSS animation, so it isn't blocked —
   but nothing here should rely on a CSS transition to read as "working". ─── */
.progress{height:4px;border-radius:2px;overflow:hidden;background:var(--rule-soft)}
.progress > .fill{height:100%;background:var(--accent-3);width:0%}
.ask-note{margin-bottom:12px}
/* A locked (submitting) textarea: signal non-editable and kill the focus ring
   that would otherwise imply it still accepts input. readOnly (never disabled)
   keeps the field in the submitted POST body. */
.editor[readonly]{background:var(--rule-soft);color:var(--ink-2);cursor:not-allowed}
.editor[readonly]:focus{border-color:var(--rule);box-shadow:none;background:var(--rule-soft)}
.busy{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.busy .dot{display:inline-block}

/* ── benchmark: run progress + results detail ────────────────────────── */
/* A full-width hairline flush at the run card's bottom edge while a run is in
   flight; app.js drives .fill's width (never to 100%). Reuses .progress but
   square, since it sits inside the card's rounded overflow:hidden clip. */
.bench-progress{border-radius:0}
.bench-status:empty{display:none}

/* Score header — answer "too plain" with typography (a large mono figure), not
   a second bold bar that would compete with the Context gauge one page over. */
.scorehead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:20px 18px;border-bottom:1px solid var(--rule-soft)}
.scorenum{font-family:var(--mono);font-weight:600;font-size:44px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.scorenum .of{font-size:20px;font-weight:500;color:var(--ink-3);margin-left:5px}
.scoreside{display:flex;flex-direction:column;gap:3px}
.scoreside .cap{font-size:12.5px;color:var(--ink-2)}
.scoreside .meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* "Check for results" banner — a GET link (never a POST, which would burn a run). */
.benchbanner{display:block;margin-bottom:16px;padding:11px 14px;border-radius:var(--r);background:var(--accent-wash);border:1px solid var(--accent-3);color:var(--ink-2);font-size:13px;text-decoration:none}
.benchbanner:hover{border-color:var(--accent-2)}
.benchbanner b{color:var(--accent);font-weight:600}

/* Per-question detail: the trap leads (it's the whole lesson, not a footnote),
   the two SQLs sit side by side and each column scrolls within itself. */
.trap{border-radius:6px;padding:10px 12px;margin-bottom:14px;font-size:12.5px;line-height:1.5}
.trap .trap-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.trap-fail{background:var(--warn-bg);color:var(--warn)}
.trap-pass{background:var(--tint);color:var(--ink-2)}
.trap-pass .trap-label{color:var(--ink-3)}
.sql-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sql-col{min-width:0}
.sql-col > * + *{margin-top:8px}
.sql-col-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.sql-col-h.you{color:var(--ink-2)}
.qmsg{margin-top:14px}
@media (max-width:900px){.sql-cols{grid-template-columns:1fr;gap:20px}}

/* ── legacy classes, restyled to the new system (names preserved — used by
   ask/benchmark/leaderboard/history/admin templates) ─── */
.muted{color:var(--ink-3);font-size:12.5px}
.warn{color:var(--warn);background:var(--warn-bg);padding:8px 12px;border-radius:6px;font-size:13px}
.error{color:var(--error);background:var(--error-bg);padding:8px 12px;border-radius:6px;font-size:13px}

.top-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}

.row-actions form{display:inline}
.row-actions form + form{margin-left:8px}
.pw-input{width:9rem}

.status-pass{color:var(--safe);font-weight:600;font-family:var(--mono);font-size:12.5px}
.status-fail{color:var(--error);font-weight:600;font-family:var(--mono);font-size:12.5px}
.status-clarify{color:var(--warn);font-weight:600;font-family:var(--mono);font-size:12.5px}

.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r)}
.table-wrap table{border:0;margin:0}

table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--rule-soft)}
th{background:var(--tint);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
td{color:var(--ink-2)}
tr:last-child td{border-bottom:0}
/* Two different signals so they read at a glance and can co-occur on one row:
   rank-first fills, is-you marks the left edge. */
tr.rank-first{background:var(--accent-wash)}
tr.is-you td{color:var(--ink);font-weight:500}
tr.is-you td:first-child{box-shadow:inset 3px 0 0 var(--accent-2)}

pre,code{font-family:var(--mono);font-size:12.5px;background:var(--tint);border-radius:6px}
pre{padding:12px 14px;display:block;overflow-x:auto;white-space:pre-wrap;border:1px solid var(--rule)}
code{padding:.1em .35em}
pre code{padding:0;background:none;border:0}

details{margin-bottom:12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);overflow:hidden}
details summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:500;color:var(--ink-2);background:var(--tint)}
details[open] summary{border-bottom:1px solid var(--rule-soft)}
.details-body{padding:14px}
/* Context edit/create/instruction forms: stacked label+field blocks and the
   save/delete buttons need room so they don't hug each other or the card edge. */
.details-body form > div{margin-bottom:10px}
.details-body form > .btn-primary{margin-top:10px}
.details-body form + form{margin-top:12px}
/* A lone collapsible row (the Instruction card's single file) shouldn't read as
   a bordered box nested inside the card's own box — drop the row chrome when it
   stands alone, keeping only the open-state divider under the summary. */
.files > details.solo{border:0;border-radius:0;margin-bottom:0;background:transparent}
.files > details.solo > summary.file{border-bottom:0}
.files > details.solo[open] > summary.file{border-bottom:1px solid var(--rule-soft)}

hr{border:0;border-top:1px solid var(--rule-soft);margin:14px 0}

form input:not(.editor),
form select,
form textarea:not(.editor){
  font-family:var(--sans);
  font-size:13px;
  padding:7px 10px;
  border:1px solid var(--rule);
  border-radius:6px;
  color:var(--ink);
  background:var(--paper);
}
form input:not(.editor):focus,
form select:focus,
form textarea:not(.editor):focus{
  border-color:var(--accent);
  outline:none;
  box-shadow:0 0 0 3px var(--accent-wash);
}

@media (max-width:720px){
  .shell{padding:0 16px}
  .masthead-row{gap:16px}
  .identity{display:none}
  h1{font-size:22px}
  .legend{gap:14px}
  .ftok{display:none}
  .gauge-figure{margin-left:0;flex-basis:100%}
}