/* ==========================================================================
   BLACK CHAMBER - shared mockup stylesheet
   Design artifact, NOT product code. No build step, no framework.

   THEME v2, 2026-08-21. The v1 palette was unreadable: the page sat at
   OKLCH L 0.09, body text at L 0.77, and the accents carried chroma ~0.08.
   Near-black is a mood, not a contrast ratio.

   This ports the ladder already solved in ~/projects/remote-claude
   (web/src/components/theme-playground/, the "V1-deep" preset):

     EIGHT SURFACE RUNGS, each with a job. A slider labelled --surface-overlay
     tells you nothing; "windows, menus, floating" tells you whether the thing
     you are dragging is the thing you are unhappy with.

     FOUR TEXT RUNGS, none below L 0.57. v1's --fg-ghost sat at L 0.30 and
     was used for real content. That was the single worst call in the set.

     NEON ACCENTS. Chroma 0.155 to 0.235, lightness 0.70 to 0.87, so an
     accent reads as emitted light rather than tinted paint. Amber is human
     light, cyan is machine light, and that distinction still holds - it just
     holds at a brightness you can actually see now.

   Everything still obeys the aesthetic: flat fills, hairline borders, square
   corners, monospace for data. Glow is used, but only where something is
   LIVE or SELECTED, never as decoration.
   ========================================================================== */

:root {
  /* ---- surfaces: the eight-rung ladder, bottom to top ------------------ */
  --sunken:    oklch(0.135 0.016 265);   /* inputs, code wells, track      */
  --bg:        oklch(0.185 0.020 265);   /* the page itself                */
  --panel:     oklch(0.235 0.026 265);   /* panels, cards, list rows       */
  --panel-2:   oklch(0.278 0.032 265);   /* windows, menus, floating       */
  --panel-3:   oklch(0.335 0.042 265);   /* hover + active fills           */
  --line:      oklch(0.325 0.038 265);   /* dividers, table rules          */
  --line-2:    oklch(0.425 0.052 265);   /* ordinary borders               */
  --line-3:    oklch(0.520 0.066 265);   /* window edges, focus            */

  /* ---- text: four rungs, nothing below L 0.57 ------------------------- */
  --fg-hi:     oklch(0.970 0.014 265);   /* headings, selected values      */
  --fg:        oklch(0.885 0.028 265);   /* body text                      */
  --fg-dim:    oklch(0.760 0.040 265);   /* secondary text                 */
  --fg-faint:  oklch(0.700 0.045 265);   /* slugs, ages, refs              */
  --fg-ghost:  oklch(0.630 0.045 265);   /* furniture, column headers      */

  /* ---- neon ----------------------------------------------------------- */
  --cyan:      oklch(0.855 0.155 197);   /* machine light, the Grid, data  */
  --cyan-mid:  oklch(0.700 0.135 197);
  --cyan-dim:  oklch(0.560 0.105 197);
  --amber:     oklch(0.845 0.165 82);    /* human light, sodium, warning   */
  --amber-mid: oklch(0.700 0.145 78);
  --amber-dim: oklch(0.545 0.110 74);
  --red:       oklch(0.720 0.195 22);    /* contradiction, loss, danger    */
  --red-hi:    oklch(0.790 0.170 22);
  --red-dim:   oklch(0.480 0.150 22);
  --green:     oklch(0.865 0.230 150);   /* corroborated, live, confirmed  */
  --violet:    oklch(0.760 0.175 300);

  /* ---- the six Chambers, at map-fill lightness ------------------------- */
  --f-slate:   oklch(0.545 0.118 250);
  --f-teal:    oklch(0.565 0.105 185);
  --f-oxblood: oklch(0.495 0.158 22);
  --f-sickly:  oklch(0.595 0.125 85);
  --f-violet:  oklch(0.520 0.138 300);
  --f-grey:    oklch(0.545 0.016 265);
  --f-none:    oklch(0.285 0.014 265);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", Consolas, monospace;

  /* Glow means LIVE or SELECTED. It is never decoration. */
  --glow-cyan:  0 0 12px oklch(0.855 0.155 197 / 0.45);
  --glow-amber: 0 0 12px oklch(0.845 0.165 82 / 0.40);
  --glow-red:   0 0 12px oklch(0.720 0.195 22 / 0.45);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }
body.scrollable { overflow: auto; }

::selection { background: oklch(0.855 0.155 197 / 0.30); color: var(--fg-hi); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sunken); }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--fg-hi); text-shadow: var(--glow-cyan); }

button, input, textarea, select {
  font: inherit; color: inherit;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
}

/* ---------------------------------------------------------------- shell -- */

.app {
  display: grid;
  grid-template-rows: 36px 1fr 24px;
  height: 100vh;
}

/* top bar --------------------------------------------------------------- */

.topbar {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line-2);
  background: var(--panel);
  font-size: 11px;
  letter-spacing: 0.09em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--fg-dim);
}

.topbar .seg {
  padding: 0 14px;
  height: 100%;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  border-right: 1px solid var(--line);
}
.topbar .seg.grow {
  flex: 1 1 auto; min-width: 0; border-right: none;
  overflow: hidden; text-overflow: ellipsis; display: block;
  line-height: 36px;
}
.topbar .seg.right { border-right: none; border-left: 1px solid var(--line); padding: 0; }
.topbar .seg b { color: var(--fg-hi); font-weight: 400; }
.topbar .mark {
  color: var(--cyan); letter-spacing: 0.22em;
  text-shadow: var(--glow-cyan);
}

/* status bar ------------------------------------------------------------ */

.statusbar {
  display: flex; align-items: center;
  border-top: 1px solid var(--line-2);
  background: var(--panel);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  white-space: nowrap; overflow: hidden;
}
.statusbar .seg { padding: 0 12px; border-right: 1px solid var(--line); height: 100%; display: flex; align-items: center; }
.statusbar .seg:last-child { border-right: none; }
.statusbar .seg.right { margin-left: auto; border-right: none; border-left: 1px solid var(--line); }

/* nav across the mockup set --------------------------------------------- */

.setnav { display: flex; align-items: center; height: 100%; }
.setnav a {
  padding: 0 9px; height: 100%;
  display: flex; align-items: center;
  color: var(--fg-faint);
  border-right: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: 0.1em;
}
.setnav a:last-child { border-right: none; }
.setnav a:hover { color: var(--fg-hi); background: var(--panel-2); text-shadow: none; }
.setnav a.on {
  color: var(--cyan); background: var(--panel-2);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

/* ------------------------------------------------------------- columns -- */

.cols { display: grid; min-height: 0; overflow: hidden; }
.col { min-height: 0; overflow-y: auto; border-right: 1px solid var(--line-2); }
.col:last-child { border-right: none; }

/* ---------------------------------------------------------------- panel -- */

.panel { border-bottom: 1px solid var(--line-2); }
.panel:last-child { border-bottom: none; }

.panel-h {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-2);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  text-transform: uppercase;
  position: sticky; top: 0; z-index: 4;
}
.panel-h .r { margin-left: auto; color: var(--fg-faint); letter-spacing: 0.08em; }
.panel-b { padding: 12px; }
.panel-b.tight { padding: 0; }

/* ----------------------------------------------------------- typography -- */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.eyebrow {
  font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--fg-faint); text-transform: uppercase;
  margin-bottom: 6px;
}
.title-lg { font-size: 17px; letter-spacing: 0.13em; color: var(--fg-hi); }
.title-md { font-size: 14px; letter-spacing: 0.1em;  color: var(--fg-hi); }
.dim   { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.ghost { color: var(--fg-ghost); }
.hi    { color: var(--fg-hi); }
.cy    { color: var(--cyan); }
.am    { color: var(--amber); }
.ox    { color: var(--red); }
.num   { font-variant-numeric: tabular-nums; }
.up    { text-transform: uppercase; letter-spacing: 0.12em; }
.right { text-align: right; }

/* analyst prose - the hedged voice. Never dimmer than --fg-dim. */
.prose {
  font-size: 13px; line-height: 1.75;
  color: var(--fg);
  max-width: 74ch;
}
.prose + .prose { margin-top: 12px; }
.prose em { font-style: normal; color: var(--fg-hi); }
.hedge { color: var(--fg-dim); }

/* a solid redaction bar, inline in prose. Physical document texture. */
.redact {
  display: inline-block;
  background: oklch(0.09 0 0);
  border: 1px solid oklch(0.09 0 0);
  height: 1em;
  vertical-align: -0.18em;
  margin: 0 1px;
}

/* rubber stamp */
.stamp {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid currentColor;
  font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.stamp.red   { color: var(--red);   text-shadow: var(--glow-red); }
.stamp.amber { color: var(--amber); text-shadow: var(--glow-amber); }

/* -------------------------------------------------------------- chips -- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.chip.solid { background: var(--panel-3); color: var(--fg); }

/* Source reliability A-D. Deliberately NOT a rainbow: reliability degrades
   toward the warning colour. A is bright and plain, D is red. */
.grade { display: inline-block; width: 15px; text-align: center; font-weight: 400; }
.grade-A { color: var(--fg-hi); }
.grade-B { color: var(--fg); }
.grade-C { color: var(--amber); }
.grade-D { color: var(--red); }

/* Corroboration state. This is the honest half of the interface, so it is
   also the brightest thing on a card. */
.corr { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.corr-2, .corr-3 { color: var(--green); }
.corr-0 { color: var(--fg-faint); }
.corr-x { color: var(--red); }
.corr-c { color: var(--amber); }

/* -------------------------------------------------------------- cards -- */

.card {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  border: none; border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.card:hover { background: var(--panel-2); }
.card.on {
  background: var(--panel-3);
  border-left-color: var(--cyan);
  box-shadow: inset 3px 0 10px -4px var(--cyan);
}
.card:focus-visible { outline: 1px solid var(--cyan); outline-offset: -1px; }

.card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.card-h .age { margin-left: auto; color: var(--fg-faint); font-size: 10.5px; }
.card-subject { font-size: 10.5px; letter-spacing: 0.14em; color: var(--fg-faint); text-transform: uppercase; }
.card-head { font-size: 12.5px; color: var(--fg); margin: 2px 0 5px; line-height: 1.5; }
.card.on .card-head { color: var(--fg-hi); }
.card-f { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------- key/value -- */

.kv { display: grid; grid-template-columns: 122px 1fr; gap: 4px 12px; font-size: 12px; }
.kv dt { color: var(--fg-faint); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; color: var(--fg); }

/* ------------------------------------------------------------- tables -- */

table.data { width: 100%; border-collapse: collapse; font-size: 12px; }
table.data th {
  text-align: left; font-weight: 400;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-2);
  color: var(--fg-faint);
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  white-space: nowrap;
}
table.data td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data tr:last-child td { border-bottom: none; }
table.data tr.hover:hover td { background: var(--panel-2); }
table.data td.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------------------------------------------------- provenance chain -- */

.chain { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.chain li {
  position: relative;
  padding: 0 0 11px 20px;
  border-left: 1px solid var(--line-2);
  margin-left: 4px;
}
.chain li:last-child { border-left-color: transparent; padding-bottom: 0; }
.chain li::before {
  content: ""; position: absolute; left: -3px; top: 6px;
  width: 5px; height: 5px; background: var(--line-3);
}
.chain li.term::before { background: var(--cyan); box-shadow: var(--glow-cyan); }
.chain .step-k { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-faint); }
.chain .step-v { color: var(--fg); }
.chain .step-t { color: var(--fg-faint); font-size: 11px; }

/* --------------------------------------------------------------- pips -- */

.pips { display: inline-flex; gap: 3px; vertical-align: -1px; }
.pip { width: 9px; height: 12px; border: 1px solid var(--line-3); }
.pip.on { background: var(--fg); border-color: var(--fg); }
.pip.on.ops { background: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.pip.spent { background: transparent; border-color: var(--line-2); }
.pip.cap { background: transparent; border-color: var(--red-dim); }
.pip.cap.on { background: var(--red); border-color: var(--red); box-shadow: var(--glow-red); }

/* --------------------------------------------------------------- bars -- */

/* Confidence BAND, never a confidence number. A band has two ends and a
   width; a number is a lie with decimals. */
.band { position: relative; height: 10px; border: 1px solid var(--line-2); background: var(--sunken); }
.band .rangefill { position: absolute; top: 0; bottom: 0; background: var(--line-3); }
.band .pt { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--amber); box-shadow: var(--glow-amber); }
.band.wide .rangefill { background: oklch(0.46 0.055 265); }

.bandscale { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg-ghost); margin-top: 3px; }

/* --------------------------------------------------------------- misc -- */

.rule { height: 1px; background: var(--line); margin: 12px 0; border: none; }
.rule.hi { background: var(--line-2); }

.note {
  border-left: 2px solid var(--line-3);
  padding: 9px 13px;
  background: var(--panel);
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.7;
}
.note.warn { border-left-color: var(--amber); background: oklch(0.235 0.030 82); }
.note.bad  { border-left-color: var(--red);   background: oklch(0.235 0.038 22); }
.note.cy   { border-left-color: var(--cyan);  background: oklch(0.235 0.030 197); }
.note b { color: var(--fg-hi); font-weight: 400; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-3);
  background: var(--panel-2);
  color: var(--fg);
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  cursor: pointer;
}
.btn:hover { background: var(--panel-3); color: var(--fg-hi); border-color: var(--fg-faint); }
.btn.primary { border-color: var(--cyan-dim); color: var(--cyan); }
.btn.primary:hover {
  background: oklch(0.30 0.055 197); border-color: var(--cyan);
  box-shadow: var(--glow-cyan); color: var(--fg-hi);
}
.btn.danger { border-color: var(--red-dim); color: var(--red-hi); }
.btn.danger:hover {
  background: oklch(0.30 0.065 22); border-color: var(--red);
  box-shadow: var(--glow-red);
}
.btn[disabled] { color: var(--fg-ghost); border-color: var(--line); cursor: not-allowed; background: transparent; }

.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* faction swatch */
.sw { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; border: 1px solid oklch(0.14 0 0 / 0.6); }

/* keyboard hint */
.kbd {
  display: inline-block; min-width: 16px; text-align: center;
  padding: 0 4px;
  border: 1px solid var(--line-3);
  color: var(--fg-dim);
  font-size: 10.5px;
}

/* a scheduled / queued order row */
.order { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.order:last-child { border-bottom: none; }
.order-h { display: flex; align-items: baseline; gap: 8px; }
.order-k { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-dim); }
.order-t { color: var(--fg); font-size: 12px; }
.order-m { font-size: 11px; color: var(--fg-faint); margin-top: 3px; }
.order-v { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 5px; }
.order-v.tonight  { color: var(--cyan);  text-shadow: var(--glow-cyan); }
.order-v.tomorrow { color: var(--amber); text-shadow: var(--glow-amber); }

/* the countdown lives in a tooltip, per OPEN-QUESTIONS D7's current lean:
   binary prominent, countdown available to whoever goes looking. */
.order[title] { cursor: help; }

/* fullbleed sheet for the paper-document screens */
.sheet {
  max-width: 940px;
  margin: 0 auto;
  padding: 26px 34px 60px;
}