/* klbr web — v3. The aesthetic is taken from one place, not averaged: the t4t associates git viewer
   (--bg-col/-2/-3, --fg-col/-mute, --accent-col, and its syntax palette). Two ideas come with it:
     - the ground is a warm near-black, not a grey; layers step up by value, never by shadow;
     - colour is a *category* system, not decoration. Sorcery colours languages; we colour lanes.
   Plus two honest additions from the wire: the daemon reports token usage and a context budget, so the
   header carries real numbers instead of counters we invented. */

@font-face { font-family: "mono"; src: url("/fonts/ioskeley/IoskeleyMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "mono"; src: url("/fonts/ioskeley/IoskeleyMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "mono"; src: url("/fonts/ioskeley/IoskeleyMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "sans"; src: url("/fonts/inter/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --mono: "mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ground, taken from the reference verbatim */
  --bg: #100e11;
  --bg-2: #181419;
  --bg-3: #211a22;
  --fg: #f3eef2;
  --fg-mute: #b3a4ae;

  --accent: #ff9df5;
  --accent-mute-1: #b86caf;
  --accent-mute-2: #493045;
  --accent-fade: #ffd0fb;

  /* the reference's syntax palette, doing duty as the lane palette */
  --c-slate: #9da8bb;    /* scratchpad — private, muted by nature */
  --c-cyan: #9bedff;     /* cells — the machine's output */
  --c-pink: #ff94d1;     /* states that need a human eye */
  --c-mint: #95ffc3;     /* lifecycle — transitions, healthy */
  --c-lav: #d8a8ff;      /* the agent's voice */
  --c-amber: #ffc07a;    /* added: warning, absent from the reference */
  --c-red: #ff7b8a;      /* added: failure */

  --lane-speech: var(--c-lav);
  --lane-cell: var(--c-cyan);
  --lane-scratchpad: var(--c-slate);
  --lane-lifecycle: var(--c-mint);
  --lane-input: var(--accent);

  --ok: var(--c-mint);
  --warn: var(--c-amber);
  --err: var(--c-red);

  /* edges raised above the reference's own values: dawn asked for high contrast, and a hairline
     nobody can see is not structure. */
  --line: #3a3042;
  --line-2: #56465f;
  --raise: #2b2231;

  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px;
  --lh: 1.5; --measure: 74ch;
  --col: 780px;              /* one column, centred. nothing spans the viewport. */

  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px; --s-6: 16px; --s-7: 24px; --s-8: 32px;
  --t-fast: 90ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --r: 6px; --r-lg: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* the page speaks in sans: conversation, labels, controls. mono is a deliberate choice for the
     machine's own surfaces (code, kernel output, registered values), not the default voice. */
  font-family: var(--sans);
  font-size: var(--fs-2);
  line-height: var(--lh);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-mute-2); color: var(--accent-fade); }
:root { caret-color: var(--accent); accent-color: var(--accent); }
::placeholder { color: color-mix(in srgb, var(--fg-mute) 70%, transparent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; border-radius: var(--r); }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4c3f56; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-mute-1); }
a:hover { text-decoration-color: var(--accent); }

/* ---------------------------------------------------------------- controls
   icon-first. an icon button is a shape at rest: raised fill + a hairline, and it
   always carries a title and an aria-label, because an icon without a name is a guess. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  height: 26px; min-width: 26px; padding: 0 var(--s-4);
  font-family: var(--sans); font-size: var(--fs-2); font-weight: 500; color: var(--fg);
  background: var(--raise); border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--bg-3); border-color: var(--accent-mute-2); }
.btn:active { background: var(--bg-2); }
.btn:disabled { color: var(--fg-mute); border-color: var(--line); background: transparent; cursor: not-allowed; }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-fade); background: var(--bg-3); }

.btn-icon { padding: 0; width: 26px; flex: 0 0 26px; }
/* a lane button is not a square icon button: it carries an icon *and* a count, so it sizes to its
   content. `.btn-icon`'s fixed width silently clipped them. */
.btn-lane { width: auto; min-width: 32px; padding: 0 var(--s-3); gap: var(--s-2); }
/* "ghost" means low emphasis, never invisible: it keeps a resting hairline, because a control with no
   resting shape is a control nobody finds (that was v1's whole failure). */
/* a ghost control keeps its hit target and gives up its fill. it keeps a faint edge, because a control
   that is always visible and looks like decoration is not calmer, it is broken. */
.btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--line-2) 55%, transparent); color: var(--fg-mute); }
.btn-ghost:hover { color: var(--fg); border-color: var(--line-2); background: var(--raise); }
.btn-ghost.is-armed { border-color: var(--err); color: var(--err); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #1b0b1a; font-weight: 600; }
.btn-primary:hover { background: var(--accent-fade); border-color: var(--accent-fade); }
.btn-primary:disabled { background: transparent; border-color: var(--line); color: var(--fg-mute); }

.btn-danger { color: var(--c-red); border-color: color-mix(in srgb, var(--c-red) 45%, var(--line)); }
.btn-danger:hover { background: color-mix(in srgb, var(--c-red) 14%, transparent); border-color: var(--c-red); }
.btn-danger.is-armed { background: color-mix(in srgb, var(--c-red) 22%, transparent); color: var(--c-red); border-color: var(--c-red); font-weight: 600; }

.field {
  font-family: var(--sans); font-size: var(--fs-3); color: var(--fg);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r);
}
.field:focus, .field:focus-visible { border-color: var(--accent); outline: none; }

/* chips: not interactive. status words, lane names, counts. icon + one word, never a sentence. */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 20px; padding: 0 var(--s-3);
  font-family: var(--sans); font-size: var(--fs-1); font-weight: 500; line-height: 1;
  color: var(--fg-mute); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r);
}
.chip > svg { transform: translateY(-0.5px); }
.chip-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.chip-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.chip-err { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.chip-agent { color: var(--c-lav); border-color: color-mix(in srgb, var(--c-lav) 35%, var(--line)); }
.chip-code { color: var(--lane-cell); border-color: color-mix(in srgb, var(--lane-cell) 35%, var(--line)); }
.chip-action { cursor: pointer; border-color: var(--line-2); background: var(--raise); }
.chip-action:hover { border-color: var(--accent); color: var(--accent-fade); }

/* lane colours, one place */
.lane-speech { color: var(--lane-speech); }
.lane-cell { color: var(--lane-cell); }
.lane-scratchpad { color: var(--lane-scratchpad); }
.lane-lifecycle { color: var(--lane-lifecycle); }
.lane-input { color: var(--lane-input); }

.mute { color: var(--fg-mute); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .err-t { color: var(--err); }
.agent { color: var(--c-lav); }
.num { font-variant-numeric: tabular-nums; }

/* the agent's spoken word: the one place prose is typeset, and the only serif-free break in the mono */
.voice { font-family: var(--sans); font-size: var(--fs-3); color: var(--fg); max-width: var(--measure); }

/* registered machine values: timestamps, record kinds, commands, ids. fixed width, so columns line up. */
.reg-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.faint { color: color-mix(in srgb, var(--fg-mute) 62%, var(--bg)); }
.hr-b { border-bottom: 1px solid var(--line); }

/* an icon beside a word is centred on the word's ink, not on its em box: Inter's ink centre sits
   about a pixel below the box centre, so a geometric centring reads as a high icon. */
.icon-word { display: inline-flex; align-items: center; gap: var(--s-2); line-height: 1; }
.icon-word > svg { transform: translateY(0.5px); }

.inset { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); }
.hair { border-top: 1px solid var(--line); }

/* a connected session is a state, not an event: the dot states it once and stops moving. */
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
@keyframes arrive { from { background: color-mix(in srgb, var(--accent) 8%, transparent); } to { background: transparent; } }
.arrive { animation: arrive 700ms var(--ease) 1; }

/* chrome recedes until a hand reaches for it. a row has one primary action; every secondary
   action (copy, expand, open) waits for hover or keyboard focus instead of holding the eye. */
.copy-btn { opacity: 0; }
.record:hover .copy-btn,
.record:focus-within .copy-btn,
.copy-btn:focus-visible,
.copy-btn.is-copied { opacity: 1; }

/* a disclosure is a glyph, not a button: no box, no fill, no border. it lights only under the cursor. */
.disclosure {
  height: 22px; min-width: 22px; padding: 0;
  color: var(--fg-mute); background: none; border: none;
}
.disclosure:hover { color: var(--accent-fade); background: none; border: none; }
.disclosure:focus-visible { outline: 1px solid var(--accent-mute-1); outline-offset: 1px; }

/* a chip that only names its own lane is a sentence fragment, not a badge. say it as text. */
.chip-quiet { padding: 0; color: var(--fg-mute); background: none; border-color: transparent; }
.chip-quiet > svg { transform: translateY(-0.5px); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }