/* ─────────────────────────────────────────────────────────────────────────
   Agent Gateway control panel — "ink & signal".

   The visual idea is a personnel archive, not an admin console: warm paper,
   hairline rules, catalogue numbers down the margin, one hot accent. Boxes are
   drawn with borders rather than shadows, and every piece of metadata is set in
   mono so an id always looks like an id.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --paper:   #F3EFE6;
  --paper-2: #EAE4D7;
  --paper-3: #DFD7C6;
  --ink:     #16130E;
  --ink-2:   #443D31;
  --ink-3:   #726A5B;
  --rule:    #D3C9B3;
  --rule-2:  #BCAF94;
  --signal:  #A8401A;
  --signal-2:#C25A2E;
  --on-signal:#FBF3EA;
  --pine:    #1F5747;
  --ochre:   #8A6612;
  --wine:    #7A2233;

  --sans: "Archivo", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rail-w: 236px;
  --wonk: "SOFT" 0, "WONK" 1;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #131109;
    --paper-2: #1C1913;
    --paper-3: #26221A;
    --ink:     #F0E9DA;
    --ink-2:   #C6BCA6;
    --ink-3:   #8C8371;
    --rule:    #332E24;
    --rule-2:  #4A4335;
    --signal:  #E2814D;
    --signal-2:#F09A66;
    --on-signal:#1A1208;
    --pine:    #74B7A0;
    --ochre:   #D6A64C;
    --wine:    #D97A8C;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Paper grain. Cheap, static, and the one thing that keeps large empty
   areas from reading as a blank browser window. */
.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .38; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { .grain { mix-blend-mode: screen; opacity: .16; } }

::selection { background: var(--signal); color: var(--on-signal); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ── Rail ───────────────────────────────────────────────────────────────── */
.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 26px 0 18px;
}

.mark { display: block; padding: 0 22px 24px; text-decoration: none; }
.mark-rule { display: block; width: 34px; height: 3px; background: var(--signal); margin-bottom: 14px; }
.mark-name {
  display: block; font-family: var(--display); font-variation-settings: var(--wonk);
  font-size: 21px; line-height: 1.15; font-weight: 600; letter-spacing: -.015em;
}
.mark-sub {
  display: block; margin-top: 5px; font: 500 10px/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

#nav { display: flex; flex-direction: column; }
#nav a {
  position: relative; display: flex; align-items: baseline; gap: 10px;
  padding: 9px 22px 9px 21px; text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 14px; color: var(--ink-2);
  transition: background .12s ease, color .12s ease;
}
#nav a::before {
  content: attr(data-idx);
  font: 500 10px/1 var(--mono); color: var(--rule-2); letter-spacing: .06em;
}
#nav a:hover { background: var(--paper-3); color: var(--ink); }
#nav a.on {
  border-left-color: var(--signal); background: var(--paper);
  color: var(--ink); font-weight: 600;
}
#nav a.on::before { color: var(--signal); }
#nav em {
  font-style: normal; margin-left: auto;
  font: 500 10px/1 var(--mono); color: var(--on-signal);
  background: var(--signal); padding: 3px 6px; border-radius: 2px;
}
#nav em:empty { display: none; }

.rail-foot { margin-top: auto; padding: 18px 22px 0; border-top: 1px solid var(--rule); }
.tokenbox span {
  display: block; font: 500 10px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.tokenbox input {
  width: 100%; font: 400 12px/1 var(--mono); padding: 7px 8px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 2px;
}
.who { margin-top: 10px; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.who b { color: var(--ink); font-weight: 600; }
.stamp { margin-top: 12px; font: 400 10px/1.5 var(--mono); color: var(--rule-2); }

.linkish {
  margin-top: 10px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 11px/1 var(--mono); color: var(--signal);
  border-bottom: 1px solid currentColor; letter-spacing: .04em;
}
.linkish:hover { color: var(--ink); }

/* ── Main ───────────────────────────────────────────────────────────────── */
main { min-width: 0; padding: 44px 52px 96px; max-width: 1180px; }
main:focus { outline: none; }
.loading { font: 400 13px/1 var(--mono); color: var(--ink-3); }

.page-head { margin-bottom: 30px; }
.eyebrow {
  font: 600 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--signal); display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
h1 {
  font-family: var(--display); font-variation-settings: var(--wonk);
  font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.04;
  letter-spacing: -.02em; margin: 14px 0 0;
}
h1 .thin { font-weight: 300; font-style: italic; color: var(--ink-2); }
.lede { margin: 12px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 15.5px; }

h2 {
  font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin: 42px 0 14px;
  display: flex; align-items: center; gap: 12px;
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
h2 .count { color: var(--rule-2); }

h3 {
  font-family: var(--display); font-variation-settings: var(--wonk);
  font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 0 0 6px;
}

.back {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.back:hover { color: var(--signal); }

/* ── Stat strip ─────────────────────────────────────────────────────────── */
.stats {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-2);
  margin-top: 26px;
}
.stat { flex: 1 1 128px; padding: 16px 18px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat b {
  display: block; font-family: var(--display); font-variation-settings: var(--wonk);
  font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: 7px; font: 500 10px/1.3 var(--mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.stat.hot b { color: var(--signal); }

/* ── Listing rows ───────────────────────────────────────────────────────── */
.list { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline;
  padding: 15px 12px 15px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; cursor: pointer;
  border-left: 3px solid transparent; padding-left: 9px;
  transition: background .12s ease, border-color .12s ease;
  animation: rise .32s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.row:hover { background: var(--paper-2); border-left-color: var(--signal); }
.row .idx { font: 500 11px/1.7 var(--mono); color: var(--rule-2); font-variant-numeric: tabular-nums; }
.row .body { min-width: 0; }
.row .name {
  font-family: var(--display); font-variation-settings: var(--wonk);
  font-size: 17.5px; font-weight: 600; letter-spacing: -.01em;
}
.row .desc {
  margin-top: 4px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row .aside { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

@keyframes rise { from { opacity: 0; transform: translateY(7px); } }

/* ── Chips ──────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  font: 500 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 8px; border: 1px solid var(--rule-2); border-radius: 2px;
  color: var(--ink-3); white-space: nowrap; background: none;
  text-decoration: none; cursor: default;
}
a.chip, button.chip { cursor: pointer; }
a.chip:hover, button.chip:hover { border-color: var(--signal); color: var(--signal); }
.chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.sig   { color: var(--signal); border-color: var(--signal); }
.chip.pine  { color: var(--pine);   border-color: var(--pine); }
.chip.ochre { color: var(--ochre);  border-color: var(--ochre); }
.chip.wine  { color: var(--wine);   border-color: var(--wine); }
.chip.ghost { border-style: dashed; }
.chip.lower { text-transform: none; letter-spacing: 0; }

.meta { font: 400 11.5px/1.6 var(--mono); color: var(--ink-3); }
.meta b { color: var(--ink-2); font-weight: 500; }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel {
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-2);
  padding: 20px 22px; margin-top: 16px;
}
.panel.plain { background: none; }
.panel + .panel { margin-top: 14px; }
.panel p:first-child { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; }
@media (max-width: 1040px) { .split { grid-template-columns: 1fr; } }

.note {
  border-left: 3px solid var(--ochre); background: var(--paper-2);
  padding: 12px 16px; margin: 16px 0; font-size: 13.5px; color: var(--ink-2);
  border-radius: 0 3px 3px 0;
}
.note.bad { border-left-color: var(--wine); }
.note.good { border-left-color: var(--pine); }
.note b { color: var(--ink); }

.empty {
  padding: 34px 0; color: var(--ink-3); font-size: 14px;
  border-bottom: 1px solid var(--rule);
}

/* ── Buttons + fields ───────────────────────────────────────────────────── */
button, .btn {
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 15px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: opacity .12s ease, background .12s ease, color .12s ease;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
button:disabled { opacity: .4; cursor: default; }
button.ghost { background: none; color: var(--ink-2); border-color: var(--rule-2); }
button.ghost:hover { color: var(--signal); border-color: var(--signal); background: none; }
button.tiny { padding: 6px 9px; font-size: 10.5px; }
button.danger:hover { background: var(--wine); border-color: var(--wine); color: var(--paper); }

input[type=text], input[type=password], input[type=datetime-local], select, textarea {
  width: 100%; font: 400 13.5px/1.55 var(--sans);
  padding: 9px 11px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: 2px;
}
textarea { resize: vertical; min-height: 90px; }
textarea.code { font: 400 13px/1.65 var(--mono); min-height: 460px; }
label.field { display: block; margin-bottom: 12px; }
label.field > span {
  display: block; margin-bottom: 5px;
  font: 500 10px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
}
.field-row { display: flex; gap: 12px; }
.field-row > * { flex: 1; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.actions .spacer { flex: 1; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin: 26px 0 22px; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-3); padding: 10px 14px; border-radius: 0;
  text-transform: uppercase; letter-spacing: .12em;
}
.tabs button:hover { background: var(--paper-2); color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--signal); }

/* ── Document rendering ─────────────────────────────────────────────────── */
.doc { max-width: 74ch; font-size: 15px; }
.doc h1, .doc h2, .doc h3, .doc h4 {
  font-family: var(--display); font-variation-settings: var(--wonk);
  letter-spacing: -.01em; color: var(--ink); text-transform: none;
  display: block; margin: 26px 0 8px; font-weight: 600;
}
.doc h1 { font-size: 27px; }
.doc h2 { font-size: 21px; }
.doc h2::after { display: none; }
.doc h3 { font-size: 17px; }
.doc h4 { font-size: 15px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin: 4px 0; }
.doc code {
  font: 400 .88em/1.4 var(--mono); background: var(--paper-3);
  padding: 1px 5px; border-radius: 2px; color: var(--ink);
}
.doc pre {
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: 3px;
  padding: 13px 15px; overflow-x: auto;
}
.doc pre code { background: none; padding: 0; }
.doc blockquote {
  margin: 14px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--rule-2);
  color: var(--ink-3); font-style: italic;
}
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 26px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.doc th, .doc td { border: 1px solid var(--rule); padding: 7px 10px; text-align: left; }

/* ── Topic list (what a file covers) ────────────────────────────────────── */
.topics { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.topics li {
  break-inside: avoid; padding: 6px 0 6px 22px; position: relative;
  font-size: 13.5px; color: var(--ink-2); border-bottom: 1px solid var(--rule);
}
.topics li::before {
  content: counter(t, decimal-leading-zero); counter-increment: t;
  position: absolute; left: 0; top: 8px;
  font: 500 10px/1 var(--mono); color: var(--rule-2);
}
.topics { counter-reset: t; }
@media (max-width: 720px) { .topics { columns: 1; } }

/* ── Org chart ──────────────────────────────────────────────────────────── */
.chart-scroll { overflow-x: auto; padding: 22px 4px 12px; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { display: flex; justify-content: center; min-width: max-content; }
.tree li { position: relative; padding: 26px 12px 0; text-align: center; }
.tree ul { display: flex; justify-content: center; }

/* Orthogonal connectors, drawn with borders. */
.tree li::before, .tree li::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 26px;
  border-top: 1px solid var(--rule-2);
}
.tree li::before { right: 50%; }
.tree li::after  { left: 50%; border-left: 1px solid var(--rule-2); }
.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-top: 26px; }
.tree li:first-child::before, .tree li:last-child::after { border: 0; }
.tree li:last-child::before { border-right: 1px solid var(--rule-2); }
.tree > li { padding-top: 0; }
.tree > li::before, .tree > li::after { display: none; }
.tree ul::before {
  content: ""; position: absolute; top: 0; left: 50%;
  height: 26px; border-left: 1px solid var(--rule-2);
}
.tree ul { position: relative; padding-top: 26px; }

.node {
  display: inline-block; min-width: 168px; max-width: 210px; text-align: left;
  padding: 11px 13px; border: 1px solid var(--rule-2); border-radius: 3px;
  background: var(--paper-2); text-decoration: none; color: inherit;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.node:hover { border-color: var(--signal); background: var(--paper); transform: translateY(-1px); }
.node .n-name {
  font-family: var(--display); font-variation-settings: var(--wonk);
  font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -.01em;
}
.node .n-sub {
  margin-top: 5px; font: 400 10px/1.3 var(--mono); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
}
.node .n-meta { margin-top: 8px; font: 400 10px/1 var(--mono); color: var(--rule-2); }
.node.org { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.node.org .n-sub, .node.org .n-meta { color: var(--rule-2); }
.node.person { background: none; border-style: dashed; }

/* ── Chat transcript ────────────────────────────────────────────────────── */
.transcript {
  border-top: 1px solid var(--rule); max-height: 52vh; overflow-y: auto;
  margin-bottom: 16px;
}
.turn {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px;
  padding: 15px 4px; border-bottom: 1px solid var(--rule);
  animation: rise .3s cubic-bezier(.2,.7,.3,1) backwards;
}
.turn .speaker {
  font: 600 10px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); text-align: right;
}
.turn.user .speaker { color: var(--signal); }
.turn .said { white-space: pre-wrap; color: var(--ink-2); font-size: 14.5px; }
.turn.user .said { color: var(--ink); }
.turn .turn-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.transcript .hint { padding: 26px 4px; color: var(--ink-3); font-size: 13.5px; }

.composer { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { min-height: 52px; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule-2);
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
table.grid td { padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid tr:hover td { background: var(--paper-2); }
table.grid td.when { font: 400 12px/1.5 var(--mono); color: var(--ink-3); white-space: nowrap; }
table.grid td.act { text-align: right; white-space: nowrap; }
table.grid td .t-title { font-weight: 600; }

/* ── Checklist (bundle builder) ─────────────────────────────────────────── */
.checklist { border-top: 1px solid var(--rule); max-height: 380px; overflow-y: auto; }
.checkrow {
  display: flex; gap: 11px; align-items: flex-start; padding: 10px 6px;
  border-bottom: 1px solid var(--rule); cursor: pointer;
}
.checkrow:hover { background: var(--paper-2); }
.checkrow input { margin: 3px 0 0; accent-color: var(--signal); }
.checkrow .c-name { font-weight: 600; font-size: 14px; }
.checkrow .c-meta { font: 400 11px/1.5 var(--mono); color: var(--ink-3); }

.steps { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: s; }
.steps li {
  position: relative; padding: 9px 0 9px 34px; border-bottom: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-2);
}
.steps li::before {
  content: counter(s, decimal-leading-zero); counter-increment: s;
  position: absolute; left: 0; top: 11px;
  font: 500 10px/1 var(--mono); color: var(--signal);
}
.steps li .flag {
  font: 600 9px/1 var(--mono); letter-spacing: .1em; color: var(--ochre);
  border: 1px solid var(--ochre); border-radius: 2px; padding: 3px 5px;
  margin-right: 8px; vertical-align: 1px;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 90px);
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  border-radius: 3px; font: 500 12px/1 var(--mono); letter-spacing: .05em;
  z-index: 1000; opacity: 0; transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .26s;
  max-width: 78vw; text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.bad { background: var(--wine); color: #fff; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  #nav { flex-direction: row; flex-wrap: wrap; padding: 0 14px; }
  #nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 9px 10px; }
  #nav a.on { border-left: 0; border-bottom-color: var(--signal); }
  .rail-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .tokenbox { flex: 1 1 180px; }
  main { padding: 28px 20px 70px; }
}

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