/* Holder's Assistant. Built to the picture in art/ref/ref_site.jpg: pure black, one acid ink,
   hairline containers, pill tabs, label left and control right on one axis. The picture's dither
   stage stood in the left column until 2026-10-12, when Vadim had it replaced by the tool panel:
   state anybody can read, in the same hairline language. Nothing here is an SVG and nothing here is
   a bordered box pretending to be an object: the hairlines, the blocks and the type ARE the
   machine (RULES/REFERENCE.md). */

@font-face { font-family: "Nippo"; src: url("/fonts/Nippo-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "OG"; src: url("/fonts/OverusedGrotesk-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OG"; src: url("/fonts/OverusedGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "OG"; src: url("/fonts/OverusedGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sligoil"; src: url("/fonts/Sligoil-Micro.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sligoil"; src: url("/fonts/Sligoil-MicroBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ink: #000000;
  --surface: #0A0A0A;
  --sunk: #050505;
  --line: #373737;
  --line-soft: #1E1E1E;
  --text: #FFFFFF;
  --dim: #8A8A8A;
  --dimmer: #5A5A5A;
  --acid: #CDFF00;

  --r: 12px;
  --r-pill: 10px;

  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 20px; --s5: 24px; --s6: 28px; --s7: 34px; --s8: 48px; --s9: 72px;

  --t-mark: 46px;
  --t-task: 25px;
  --t-row: 20px;
  --t-sub: 17px;
  --t-tab: 16px;
  --t-cap: 16px;
  --t-mono: 19px;
  --t-fig: 40px;

  --pad: 28px;
  --console: clamp(580px, 46%, 700px);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--ink); overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 var(--t-row)/1.45 "OG", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: var(--s7) var(--s8) var(--s9);
  scrollbar-gutter: stable;
}
.mono { font-family: "Sligoil", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--acid); color: #000; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

/* ------------------------------------------------------------------ the sheet */
.sheet {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--console);
  gap: var(--s7);
  align-items: start;
}

/* -------------------------------------- THE TOOL PANEL: the assistant's three hands
   One hairline panel, three sections, one per tool: the status word, the figure when that hand
   reports one, and the line of what it is doing right now. The indicator is the dot: acid while
   the hand is working, white while it waits on somebody else, an empty ring while it is idle.
   The acid is the accent only, the live state and the figures; everything resting is grey. */
.view {
  grid-column: 1; grid-row: 1;
  position: sticky;
  top: var(--s7);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.view-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4);
  flex-wrap: wrap;
  padding: var(--s5) var(--pad);
  border-bottom: 1px solid var(--line);
}
.view-mark { font-size: var(--t-cap); color: var(--dim); letter-spacing: .04em; }
.view-mark.is-sample { color: var(--acid); }

.tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.tool {
  flex: 1 1 auto;
  display: grid;
  /* the biggest text in this box is the figure, so the sides carry its own em (RULES/05) */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "top fig" "name fig" "now now" "shot shot";
  gap: var(--s2) var(--s5);
  align-content: center;
  min-height: 148px;
  padding: var(--s5) 32px;
}
.tool + .tool { border-top: 1px solid var(--line-soft); }
.tool-top { grid-area: top; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.tool-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dimmer); flex: 0 0 auto; }
.tool-id { font-size: var(--t-cap); color: var(--dim); letter-spacing: .08em; }
.tool-k { grid-area: name; font: 500 var(--t-task)/1.2 "OG", system-ui, sans-serif; color: var(--text); }
.tool-fig {
  grid-area: fig; align-self: center; justify-self: end;
  display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s2) var(--s3); flex-wrap: wrap;
}
.tool-c { font-size: var(--t-fig); line-height: .9; color: var(--acid); }
.tool-s { font: 500 var(--t-row)/1.2 "OG", system-ui, sans-serif; color: var(--dim); }
.tool-now { grid-area: now; margin: var(--s1) 0 0; font-size: var(--t-sub); color: var(--dim); line-height: 1.45; text-wrap: pretty; }
.tool-shot {
  grid-area: shot; justify-self: start; margin-top: var(--s2);
  font-size: var(--t-cap); color: var(--dim); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.tool-shot:hover { color: var(--acid); border-color: var(--acid); }

.tool[data-state="active"] { background: var(--surface); }
.tool[data-state="active"] .tool-dot { background: var(--acid); }
.tool[data-state="active"] .tool-s { color: var(--acid); }
.tool[data-state="waiting"] .tool-dot { background: var(--text); }
.tool[data-state="waiting"] .tool-s { color: var(--text); }
.tool[data-state="idle"] .tool-dot { background: transparent; border: 1px solid var(--line); }
.tool[data-state="idle"] .tool-k { color: var(--dim); }
.tool[data-state="idle"] .tool-now { color: var(--dimmer); }

.view-note {
  margin: 0;
  padding: var(--s4) var(--pad) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-cap); line-height: 1.5; color: var(--dimmer);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- THE CONSOLE */
.console { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }

.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.tab {
  appearance: none;
  min-height: 52px;
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--dim);
  font: 700 var(--t-tab)/1 "OG", system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .12s linear, background-color .12s linear;
}
.tab:hover { color: var(--text); }
.tab.is-on { background: var(--text); color: #000; }

.notice {
  margin: 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--acid);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--acid);
  font-size: var(--t-sub);
}

.mode { display: flex; flex-direction: column; gap: var(--s5); }

.block {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: var(--pad);
}
.block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.block-t { font: 700 var(--t-cap)/1.2 "OG", system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--text); }
.block-n { font-size: var(--t-cap); color: var(--dim); letter-spacing: .03em; white-space: nowrap; }

.standfirst { margin: 0 0 var(--s4); font-size: var(--t-row); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.rule { height: 1px; background: var(--line-soft); margin: var(--s4) 0; }

.row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4);
  flex-wrap: wrap;
  min-height: 34px;
  padding: var(--s1) 0;
}
/* when a row has to wrap, the value stays on the right instead of sliding under the label */
.row > .val, .row > .pill { margin-left: auto; }
.row-tight { padding-top: 0; }
.row-k { font: 500 var(--t-row)/1.3 "OG", system-ui, sans-serif; color: var(--text); min-width: 0; }
.row-sub { margin: 0 0 var(--s3); font-size: var(--t-sub); color: var(--dim); line-height: 1.45; text-wrap: pretty; }
.row-sub-top { margin-top: calc(var(--s1) * -1); }
.val { font: 400 var(--t-row)/1.3 "OG", system-ui, sans-serif; color: var(--dim); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.val.mono { font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-mono); }
a.val { text-decoration: none; }
a.val:hover { color: var(--acid); text-decoration: underline; text-underline-offset: 4px; }

.pill {
  display: inline-block;
  padding: 10px var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: 500 var(--t-sub)/1.2 "OG", system-ui, sans-serif;
  color: var(--text);
  white-space: nowrap;
}
.pill.is-live { border-color: var(--acid); color: var(--acid); }

.task { margin: 0 0 var(--s4); font: 500 var(--t-task)/1.35 "OG", system-ui, sans-serif; color: var(--text); text-wrap: pretty; }

/* --------------------------------------------------------------- the journal */
.journal { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s2); min-height: 196px; }
.journal li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.j-t { font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-cap); color: var(--dimmer); }
.j-x { font-size: var(--t-sub); color: var(--dim); line-height: 1.4; overflow-wrap: anywhere; }
.journal li[data-kind="action"] .j-x { color: var(--text); }
.journal li[data-kind="spend"] .j-x { color: var(--acid); }
/* every empty state is one dim line that fills its list, whatever grid the list uses */
.j-empty { display: block; grid-column: 1 / -1; color: var(--dimmer); font-size: var(--t-sub); line-height: 1.5; }
.journal .j-empty, .props .j-empty, .receipts .j-empty, .authors .j-empty { padding: var(--s1) 0; }

/* ----------------------------------------------------------------- the keys */
.key {
  appearance: none;
  display: flex; align-items: center; justify-content: center; gap: var(--s1);
  flex-direction: column;
  min-height: 56px;
  padding: var(--s2) 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--text);
  font: 500 var(--t-cap)/1.2 "OG", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear, transform .06s linear;
}
.key:hover { border-color: var(--text); }
.key:active { transform: translateY(1px); }
.key-wide { width: 100%; }
.key-go { background: var(--acid); border-color: var(--acid); color: #000; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; min-height: 60px; }
.key-go:hover { background: #DBFF3B; border-color: #DBFF3B; }
.key[disabled], .key.is-off { color: var(--dimmer); border-color: var(--line-soft); cursor: default; pointer-events: none; }
.key[disabled] .mk, .key.is-off .mk { opacity: .35; }
.key-mark { min-height: 78px; padding: var(--s2) var(--s2); }
.key-l { font-size: var(--t-cap); line-height: 1.1; }
.mk { width: 22px; height: 22px; object-fit: contain; }
.key-x { min-height: 48px; flex-direction: row; padding: var(--s2) var(--s4); }

.result { margin: var(--s3) 0 0; min-height: 46px; font-size: var(--t-sub); color: var(--dim); line-height: 1.4; overflow-wrap: anywhere; }
.result.is-good { color: var(--acid); }
.result.is-bad { color: #FF6B4A; }

/* ---------------------------------------------------------------- the fields */
.field-l { display: block; font: 500 var(--t-cap)/1.2 "OG", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: var(--s2); }
.field {
  display: block; width: 100%;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--text);
  font: 400 var(--t-row)/1.45 "OG", system-ui, sans-serif;
  resize: vertical;
  margin-bottom: var(--s3);
}
.field-one { resize: none; }
.field::placeholder { color: var(--dimmer); }
.field:focus { border-color: var(--acid); outline: none; }

/* ------------------------------------------------------------- the proposals */
.props, .receipts, .authors, .list, .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.props { min-height: 160px; }
.prop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s4); align-items: center;
  padding: var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--sunk);
}
.prop-t { font-size: var(--t-sub); line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.prop-m { font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-cap); color: var(--dim); }
.prop .key { min-height: 48px; flex-direction: row; padding: var(--s2) var(--s5); }
.prop.is-won { border-color: var(--acid); }

.receipts { min-height: 160px; }
.rc {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
  width: 100%;
  text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  color: inherit; cursor: pointer; font: inherit;
}
.rc:hover .rc-t { color: var(--acid); }
.rc-d { font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-cap); color: var(--dimmer); }
.rc-t { font-size: var(--t-sub); color: var(--text); overflow-wrap: anywhere; }
.rc-s { font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-cap); color: var(--dim); white-space: nowrap; }
.rc.is-failed .rc-s { color: #FF6B4A; }

.authors li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; }
.au-n { font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-cap); color: var(--dimmer); }
.au-w { font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-v { font-size: var(--t-cap); color: var(--dim); white-space: nowrap; }

.list + .row-sub { margin-top: var(--s4); }
.steps li:last-child, .list li:last-child { padding-bottom: 2px; }
.list li { position: relative; padding-left: 30px; font-size: var(--t-sub); line-height: 1.5; color: var(--text); }
.list li::before { position: absolute; left: 0; top: 0; font-family: "Sligoil", ui-monospace, monospace; font-size: var(--t-sub); }
.list-yes li::before { content: "+"; color: var(--acid); }
.list-no li::before { content: "x"; color: var(--dim); }

.steps li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: var(--s2) 0; }
.steps li + li { border-top: 1px solid var(--line-soft); }
.step-n { font-size: var(--t-cap); color: var(--acid); }
.step-t { font-size: var(--t-sub); color: var(--text); line-height: 1.45; }

/* --------------------------------------------------------------- the meters */
.meter { display: grid; grid-template-columns: minmax(0, auto) minmax(90px, 1fr) 96px; gap: var(--s4); align-items: center; min-height: 38px; padding: var(--s1) 0; }
.track { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.knob { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--text); }
.meter .val { text-align: right; }
.meter.is-acid .knob { background: var(--acid); }

/* ------------------------------------------------------- THE IDENTITY PLATE */
.plate {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: var(--pad);
  text-align: center;
}
.mark { margin: 0; font: 700 var(--t-mark)/1 "Nippo", system-ui, sans-serif; letter-spacing: .005em; white-space: nowrap; }
.mark-a { color: var(--text); }
.mark-b { color: var(--acid); margin-left: .2em; }
.mark-sub { margin: var(--s2) 0 0; font-size: var(--t-cap); letter-spacing: .22em; color: var(--dim); }

.slot {
  display: flex; align-items: center; gap: var(--s4);
  margin: var(--s5) 0 var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--sunk);
  text-align: left;
}
.slot-k { font-size: var(--t-cap); color: var(--dimmer); letter-spacing: .1em; flex: 0 0 auto; }
.slot-v { font-size: var(--t-mono); color: var(--text); overflow-wrap: anywhere; min-width: 0; -webkit-user-select: all; user-select: all; }
.slot-v.is-empty { color: var(--dim); -webkit-user-select: auto; user-select: auto; }

.keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); }
/* Copy carries no brand mark, so in the one row of five it gets the mark's room anyway and all
   five labels sit on one line */
@media (min-width: 721px) {
  .keys .key-mark:first-child::before { content: ""; display: block; width: 22px; height: 22px; }
}
.plate-foot { margin-top: var(--s5); }
.key-wallet { width: 100%; flex-direction: row; min-height: 56px; }
.risk { margin: var(--s4) 0 0; padding: 0 var(--s1); font-size: var(--t-cap); line-height: 1.5; color: var(--dimmer); text-align: left; }

/* ---------------------------------------------------------------- the dialog */
.dlg {
  width: min(760px, calc(100vw - 32px));
  max-height: 84vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
}
.dlg::backdrop { background: rgba(0, 0, 0, .88); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) var(--pad); border-bottom: 1px solid var(--line-soft); }
.dlg-body { padding: var(--pad); overflow-y: auto; max-height: calc(84vh - 90px); }
.dlg-body .journal { min-height: 0; }

/* ------------------------------------------------------------- the breakpoints */
@media (max-width: 1179px) {
  :root { --console: 100%; --t-mark: 40px; --t-fig: 32px; }
  body { padding: var(--s5) var(--s5) var(--s8); }
  /* one column: the panel folds under the console, which comes first in the markup */
  .sheet { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .console { grid-column: 1; grid-row: auto; }
  .view { grid-column: 1; grid-row: auto; position: static; }
}

@media (max-width: 720px) {
  :root {
    --t-mark: 34px; --t-task: 22px; --t-row: 18px; --t-sub: 16px; --t-mono: 17px; --t-fig: 24px;
    --pad: 20px; --s7: 20px;
  }
  body { padding: 16px 16px 40px; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keys .key-mark:first-child { grid-column: 1 / -1; }
  .journal li { grid-template-columns: 74px minmax(0, 1fr); }
  .meter { grid-template-columns: minmax(0, auto) minmax(60px, 1fr) 74px; gap: var(--s3); }
  .prop { grid-template-columns: minmax(0, 1fr); }
  .prop .key { width: 100%; }
  .rc { grid-template-columns: 66px minmax(0, 1fr); }
  .rc-s { grid-column: 1 / -1; }
  .tool { padding: var(--s5) var(--s5); min-height: 0; }
}

@media (max-width: 400px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 374px) {
  :root { --t-mark: 28px; --pad: 16px; }
  /* the figure drops under the name rather than squeezing the tool's own title */
  .tool { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "name" "fig" "now" "shot"; }
  .tool-fig { justify-self: start; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .tab, .key { transition: none; }
}