/* The document demos (/try and /verify), on /public/assets/brand.css.
   The class names are the ones try.js and verify.js write, so the scripts
   did not change. */

:root {
  /* the names the scripts reach for */
  --accent: var(--cb-sig); --critical: var(--cb-bad); --ink-2: var(--cb-ink-2);
  --ink: var(--cb-ink); --ink-soft: var(--cb-ink-3); --ink-faint: var(--cb-ink-4);
  --positive: var(--cb-ok); --warn: var(--cb-warn);
  --rule: var(--cb-line-2); --rule-soft: var(--cb-line);
  --paper: var(--cb-panel-2); --paper-2: var(--cb-panel); --paper-sunk: var(--cb-panel-3);
  --accent-ink: var(--cb-sig); --accent-wash: var(--cb-sig-dim);
  --bg: var(--cb-bg); --white: var(--cb-ink); --muted: var(--cb-ink-2);
  --display: var(--cb-sans); --body: var(--cb-sans); --mono: var(--cb-mono);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 76px; background: var(--cb-bg); }
body { background: var(--cb-bg); color: var(--cb-ink); font: 16px/1.6 var(--cb-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; font-feature-settings: "cv11", "tnum"; }
a { color: var(--cb-sig); }
:focus-visible { outline: 1.5px solid var(--cb-sig); outline-offset: 3px; border-radius: 4px; }

/* status line under the band */
.t-status { display: inline-flex; align-items: center; gap: 9px; font: 400 12.5px/1.3 var(--cb-mono); color: var(--cb-ink-3); margin: 6px 0 0;
  padding: 7px 12px; border-radius: 6px; background: var(--cb-panel); border: 1px solid var(--cb-line-2); }
.t-status::before { content: ""; width: 6px; height: 6px; background: var(--cb-warn); flex: none; }
.t-status.ok { color: var(--cb-ok); }
.t-status.ok::before { background: var(--cb-ok); }
.t-status.bad { color: var(--cb-bad); }
.t-status.bad::before { background: var(--cb-bad); }

.t-main { max-width: 1200px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 32px) 96px; display: grid; gap: 20px; counter-reset: card; }

/* cards: numbered panels */
.t-card { position: relative; background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: var(--cb-r); padding: clamp(22px, 3vw, 32px); }
.t-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 4px; }
.t-num { flex: none; width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--cb-sig); font: 500 13px var(--cb-mono);
  background: var(--cb-sig-dim); border: 1px solid rgba(62, 224, 255, .2); }
.t-head h2 { font: 600 clamp(21px, 2.2vw, 26px)/1.2 var(--cb-sans); letter-spacing: -.03em; margin: 1px 0 8px; }
.t-head p { margin: 0; color: var(--cb-ink-2); max-width: 72ch; font-size: 15.5px; line-height: 1.62; }

/* controls */
.t-controls { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: end; margin: 24px 0 18px; padding: 16px 18px; border-radius: 8px;
  background: var(--cb-bg-1); border: 1px solid var(--cb-line); }
.t-controls label { display: grid; gap: 6px; font: 400 11.5px var(--cb-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--cb-ink-3); min-width: 200px; }
.t-controls label output { color: var(--cb-ink); font: 500 14px var(--cb-mono); text-transform: none; letter-spacing: 0; }
.t-controls label > span { display: inline; }
.t-controls input[type=range] { width: 230px; max-width: 100%; }
.t-controls select { font: 400 13.5px var(--cb-mono); padding: 8px 32px 8px 10px; border: 1px solid var(--cb-line-2); border-radius: 6px; color: var(--cb-ink); text-transform: none; letter-spacing: 0;
  background: var(--cb-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%236b7380' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center/12px no-repeat;
  -webkit-appearance: none; appearance: none; }
.t-check { display: flex !important; align-items: center; gap: 10px; min-width: 0 !important; color: var(--cb-ink-2) !important; font: 400 14px var(--cb-sans) !important; text-transform: none !important; letter-spacing: 0 !important; }
.t-check input { width: 16px; height: 16px; accent-color: var(--cb-sig); }
button { font: 500 13.5px var(--cb-sans); border: 1px solid transparent; border-radius: 7px; padding: 10px 16px; background: var(--cb-ink); color: var(--cb-bg); cursor: pointer; transition: background .18s, border-color .18s; }
button:hover { background: #fff; }
button:disabled { opacity: .45; cursor: wait; }

/* tables */
.t-scroll { overflow-x: auto; border: 1px solid var(--cb-line); border-radius: 8px; }
.t-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 560px; }
.t-table th, .t-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--cb-line); font-variant-numeric: tabular-nums; }
.t-table tr:last-child td { border-bottom: 0; }
.t-table th { font: 400 10.5px var(--cb-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--cb-ink-4); background: var(--cb-bg-1); }
.t-table td { color: var(--cb-ink-2); }
.t-table td:first-child { color: var(--cb-ink); }
.t-table tbody tr { transition: background .25s; }
.t-table tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.t-table tr.win td { background: var(--cb-sig-dim); color: var(--cb-ink); }
.t-table tr.win td:first-child { box-shadow: inset 2px 0 0 var(--cb-sig); }
.t-table input { width: 84px; font: 400 13.5px var(--cb-mono); padding: 5px 8px; border: 1px solid var(--cb-line-2); border-radius: 5px; background: var(--cb-bg); color: var(--cb-ink); }
.t-table input:focus { border-color: var(--cb-sig); outline: none; }
.t-verdict { margin: 16px 0 0; font-size: 15.5px; color: var(--cb-ink-2); }
.t-verdict b { color: var(--cb-ink); font-weight: 550; }
.pill { display: inline-block; font: 500 11px/1 var(--cb-mono); padding: 5px 7px; border-radius: 4px; background: rgba(255, 255, 255, .06); color: var(--cb-ink-2); white-space: nowrap; }
.pill.ok { background: var(--cb-ok-dim); color: var(--cb-ok); }
.pill.bad { background: var(--cb-bad-dim); color: var(--cb-bad); }
.pill.warn { background: var(--cb-warn-dim); color: var(--cb-warn); }

/* outputs */
.t-out { display: grid; gap: 8px; }
.t-sub { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--cb-line-2); }
.t-sub > b, .t-out > p > b { color: var(--cb-ink); }
.lever { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 10px 18px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-bg-1); transition: border-color .2s; }
.lever:hover { border-color: var(--cb-line-2); }
.lever b { font: 500 15px var(--cb-sans); }
.lever .mv { font: 13px var(--cb-mono); color: var(--cb-ink-2); }
.lever button { padding: 7px 12px; font-size: 12.5px; }
@media (max-width: 560px) { .lever { grid-template-columns: 1fr; } }
.console { background: var(--cb-bg); color: var(--cb-ink); border-radius: 8px; padding: 16px 18px; font: 12.8px/1.7 var(--cb-mono); overflow-x: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--cb-line-2); }
.console .k { color: var(--cb-sig); }
.console .g { color: var(--cb-ok); }
.console .r { color: var(--cb-bad); }
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 120px 1fr 210px; gap: 14px; align-items: center; font-size: 14px; }
.bar > :first-child { font-weight: 500; }
.bar .track { position: relative; height: 22px; background: var(--cb-bg-1); border: 1px solid var(--cb-line); border-radius: 4px; overflow: hidden; }
.bar .est { position: absolute; top: 6px; height: 8px; background: var(--cb-sig); opacity: .85; border-radius: 1px; transition: width .6s cubic-bezier(.2, .7, .2, 1), left .6s; }
.bar .ci { position: absolute; top: 9.5px; height: 1.5px; background: var(--cb-ink); opacity: .6; }
.bar .truth { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cb-warn); }
.bar .num { font: 12.5px var(--cb-mono); color: var(--cb-ink-2); }
@media (max-width: 560px) { .bar { grid-template-columns: 90px 1fr; } .bar .num { grid-column: 1 / -1; } }
.legend { font: 400 11.5px var(--cb-mono); color: var(--cb-ink-3); display: flex; gap: 18px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 6px; vertical-align: middle; margin-right: 6px; border-radius: 1px; }
.t-foot { font: 400 12.5px/1.6 var(--cb-mono); color: var(--cb-ink-3); margin: 10px 0 0; }
.bar .num .pill { white-space: normal; }
.t-main > *, .t-card, .t-out, .t-controls label { min-width: 0; }
@media (max-width: 560px) {
  .t-controls { padding: 14px; } .t-controls label { min-width: 0; width: 100%; } .t-controls input[type=range] { width: 100%; }
  .t-card { padding: 20px 16px; } .t-head { gap: 12px; }
}
.t-main > .t-foot { text-align: center; max-width: 76ch; justify-self: center; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }