/* app.css — the Henge console's one stylesheet.
 *
 * Before this existed, all fourteen pages carried their own inline <style>:
 * 595 lines, 35 distinct colour literals, and no shared source. The rules were
 * copies, and the copies had drifted — `nav` was byte-identical everywhere,
 * but `.empty` had four different greys (#888/#777/#666/inherit), `h1` three
 * sizes, and `body` five max-widths with no relationship to what the page
 * actually renders (tree.html, the widest content in the console, was the
 * narrowest at 960px). Nobody chose any of that; it accumulated.
 *
 * So: tokens here, page-specific rules stay inline. This sheet is linked
 * BEFORE each page's own <style>, so anything a page still declares wins —
 * which makes stripping a page's duplicated rules safe to do incrementally.
 *
 * ness, 2026-09-06: "the entire henge ux needs to be css'd to match the rest
 * of sovereign-cloud stuff." This is step one — one source to change. Matching
 * SC's visual language is step two and is a call ness has not made yet (SC's
 * own pages are inline-styled too, so it may mean *defining* the shared thing
 * rather than adopting one). Nothing here invents a new look: these are the
 * values already in use, converged.
 */

:root {
  /* SC portcullis band (sovereign-cloud core/portcullis/wiki/01-band.md). The
     proxy injects :root{--sc-band-height:40px} at the top of <head>, BEFORE
     this sheet, so an unguarded :root default here would win the cascade and
     put the page back under the band. Guard the 0px default on "not behind
     the proxy". */
  --page-max: 1100px;

  /* Both themes, declared together (P0, ness 2026-09-07: "black background +
     black text"). Five pages said `color-scheme: light dark`, so a dark-
     preferring browser painted the canvas black while this sheet set the ink
     to #111 and never declared a body background. Rule from here: the page
     ground and the ink are ALWAYS declared together, here, for both schemes;
     pages never set one without the other. */
  color-scheme: light dark;
  --bg: #fff;
  --on-color: #fff;   /* text on a coloured tag/bar, either theme */

  --font: system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ink, muted through four steps. Was #111/#444/#555/#666/#777/#888 chosen
     ad hoc per page; these are the same values, named. */
  --ink: #111;
  --ink-2: #444;
  --ink-3: #666;
  --ink-4: #888;

  --rule: #eee;      /* row separators */
  --border: #ccc;    /* card and control borders */
  --bg-soft: #fafafa;

  /* The de-facto semantic palette. These four were already used consistently
     across pages for exactly these meanings — they are the closest thing the
     console had to a design system, so they are the first thing to name. */
  --ok: #15803d;     /* done, matched, satisfied */
  --busy: #1d4ed8;   /* leased, in flight */
  --warn: #b45309;   /* hitl, waiting on a human, would-act */
  --bad: #b91c1c;    /* overdue, stalled, failed, drain */

  --fs-h1: 1.2rem;
  --fs-h2: 0.98rem;
  --fs-h3: 0.85rem;
  --fs-body: 0.85rem;
  --fs-meta: 0.78rem;
  --fs-small: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --ink: #e8e8e8;
    --ink-2: #c4c4c4;
    --ink-3: #9a9a9a;
    --ink-4: #7a7a7a;
    --rule: #2a2f36;
    --border: #444b55;
    --bg-soft: #1a1e24;
    --ok: #4ade80;
    --busy: #7aa2ff;
    --warn: #f0a44a;
    --bad: #f47272;
  }
}

:root:not(:has([data-sc-band])) { --sc-band-height: 0px; }
body:has([data-sc-band]) .sc-own-identity { display: none !important; }

body {
  font-family: var(--font);
  margin: 1.5rem;
  max-width: var(--page-max);
  background: var(--bg);
  color: var(--ink);
}
html { background: var(--bg); }
a { color: var(--busy); }
code, pre { color: var(--ink); }
input, select, textarea { background: var(--bg); color: var(--ink); border: 1px solid var(--border); }

/* ── Navigation ───────────────────────────────────────────────────────────
   Grouped into three tiers (ness, 2026-09-06), in the order a human needs
   them: what needs you → who is doing the work → what the work is.
     1. Now · Inbox · History        "what should a human look at first"
     2. Roster · Commissions · Collegium   "manage the agents, scale, structure"
     3. LOBs · Goals · Tree · Formulas     "lob, goal, task-tree breakdown"
   Interop sits outside all three deliberately (it is the protocol surface,
   not a management facet) and `+ New` stays last as the way in to anything. */
nav { font-size: var(--fs-body); margin-bottom: 1rem; }
nav a { margin-right: 1rem; color: inherit; }
nav a.current { font-weight: 700; text-decoration: underline; }
nav .sep {
  display: inline-block;
  margin: 0 0.9rem 0 0;
  color: var(--border);
  user-select: none;
}

h1 { font-size: var(--fs-h1); margin: 0 0 0.5rem; }
h2 { font-size: var(--fs-h2); margin: 1.5rem 0 0.5rem; }
h3 { font-size: var(--fs-h3); margin: 0.8rem 0 0.2rem; color: var(--ink-2); }

/* ── Prose and secondary text ─────────────────────────────────────────── */
.note { font-size: var(--fs-meta); color: var(--ink-2); }
.meta { font-size: var(--fs-meta); color: var(--ink-3); }
.empty { color: var(--ink-3); font-size: var(--fs-body); font-style: italic; }

/* ── Rows and cards ──────────────────────────────────────────────────── */
.row { font-size: var(--fs-body); padding: 0.25rem 0; border-bottom: 1px solid var(--rule); }
.row a { color: inherit; }
.row .when { color: var(--ink-4); font-variant-numeric: tabular-nums; margin-right: 0.5rem; }

.card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0;
}

/* ── Controls ────────────────────────────────────────────────────────── */
button {
  font-size: var(--fs-meta);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
  color: inherit;
}
button:hover:not(:disabled) { background: var(--bg-soft); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.danger { color: var(--bad); border-color: var(--bad); }

/* ── Status ──────────────────────────────────────────────────────────── */
.ok  { color: var(--ok); }
.err { color: var(--bad); }
.gap { color: var(--warn); }

.status-done   { color: var(--ok); }
.status-leased { color: var(--busy); }
.status-hitl   { color: var(--warn); }
.status-todo   { color: #555; }

code { font-family: var(--font-mono); }

/* Wide content must scroll inside itself rather than pushing the page — the
   console is read on a phone often enough for this to matter. */
.scroll-x { overflow-x: auto; }

@media (max-width: 700px) {
  body { margin: 0.9rem; }
  nav .sep { display: none; }
}

/* ── The shell (static/ui/shell.js, 2026-10-05, HG-004 D6): tiles as the menu ─────────────
 * A tile is a value, a word and a door. The same row opens every page; the tile whose door
 * is this page is marked. Pages that are no tile's door are the small links under it. */
nav.shell { margin-bottom: 1.2rem; }
nav.shell .tiles { display: flex; gap: 0.6rem; flex-wrap: wrap; }
nav.shell .tile {
  display: flex; flex-direction: column; justify-content: flex-end; margin: 0;
  border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.8rem;
  font-size: var(--fs-meta); color: var(--ink-2); text-decoration: none; min-width: 4.5rem;
}
nav.shell .tile b { font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2; }
nav.shell .tile.home span { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
nav.shell .tile.warn b { color: var(--warn); }
nav.shell .tile:hover { border-color: var(--ink-3); }
nav.shell .tile.current { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); background: var(--bg-soft); }
nav.shell .more { margin-top: 0.5rem; font-size: var(--fs-meta); }
nav.shell .more a { color: var(--ink-3); margin-right: 0.9rem; }
nav.shell .more a.current { color: var(--ink); }

/* The help toggle: a page's lead text is behind the (?) beside its title. */
.help-text { display: none; }
body.help-open .help-text { display: block; }
.help-toggle {
  font-size: 0.7rem; font-weight: 600; width: 1.3rem; height: 1.3rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; color: var(--ink-3); cursor: pointer; vertical-align: middle;
}
.help-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* The list control's note (static/ui/list.js): the page is holding a redraw while you read. */
.held-note {
  position: fixed; right: 1rem; bottom: 1rem; font-size: var(--fs-small); color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 0.4rem; padding: 0.3rem 0.6rem;
}

/* The HITL card (static/ui/hitl.js): the Inbox's card, wherever a question waits on a person. */
.hitl-card {
  border: 1px solid var(--border); border-radius: 0.4rem; padding: 0.6rem 0.85rem; margin: 0.4rem 0;
  font-size: 0.9rem; cursor: pointer; background: transparent;
}
.hitl-card:hover { background: var(--bg-soft); }
.hitl-card .row { display: flex; justify-content: space-between; gap: 0.8rem; align-items: flex-start; border: 0; padding: 0; }
.hitl-card .path { color: var(--ink-4); font-size: 0.75rem; margin-top: 0.15rem; }
.hitl-card .prompt {
  margin: 0.4rem 0; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hitl-card .badge {
  display: inline-block; text-align: center; border-radius: 0.3rem; padding: 0 0.4rem; margin-right: 0.5rem;
  font-size: 0.75rem; font-weight: 600;
}
.hitl-card .badge.hitl { background: var(--warn); color: var(--on-color); }
.hitl-card .cat-badge {
  display: inline-block; border-radius: 0.3rem; padding: 0 0.4rem; margin-right: 0.5rem;
  font-size: 0.7rem; font-weight: 600; border: 1px solid var(--border); color: var(--ink-2);
}
.hitl-card .hitl-id { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
.hitl-card .quick-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.hitl-card .quick-actions button { white-space: nowrap; }
.hitl-card .btn-go { border-color: var(--ok); color: var(--ok); }
.hitl-card .btn-stop { border-color: var(--bad); color: var(--bad); }

/* The history row (static/ui/history.js): a fact from the Record, the same on every page. */
.fact-row { font-size: var(--fs-body); padding: 0.25rem 0; border-bottom: 1px solid var(--rule); }
.fact-row .when { color: var(--ink-4); font-variant-numeric: tabular-nums; margin-right: 0.5rem; }
.fact-row .kind { color: var(--ink-3); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.4rem; }
.fact-row a { color: inherit; }
.fact-row .lane { color: var(--ink-3); font-size: var(--fs-small); margin-left: 0.4rem; }
.fact-row .by { color: var(--busy); font-size: var(--fs-small); margin-left: 0.4rem; }
.fact-row .detail { color: var(--ink-3); font-size: var(--fs-meta); margin-left: 0.4rem; }
.fact-row .k-node_done, .fact-row .k-completed { color: var(--ok); }
.fact-row .k-node_abandoned, .fact-row .k-abandoned { color: var(--bad); }
.fact-row .k-hitl_answered, .fact-row .k-hitl_raised { color: var(--warn); }
.fact-row .k-unfolded { color: var(--busy); }

/* A snoozed question's fold (static/ui/hitl.js snoozedSection, 2026-10-06): under the live ones. */
details.snoozed { margin-top: 0.6rem; border-top: 1px dashed var(--border); padding-top: 0.3rem; }
details.snoozed > summary { color: var(--ink-3); font-size: var(--fs-small); cursor: pointer; }
details.snoozed .hitl-card { opacity: 0.8; }
.hitl-card [data-hitl-snooze] input[type="date"] { font: inherit; font-size: var(--fs-small); }
.hitl-card [data-hitl-snooze] input[name="reason"] { font: inherit; font-size: var(--fs-small); width: 14rem; }
.hitl-card [data-snoozed-until] b { color: var(--warn); }

/* The goal-state control (static/ui/goal.js, HG-008). */
.gs-word { font-weight: 600; } .gs-word[data-tone="ok"] { color: var(--ok); } .gs-word[data-tone="bad"] { color: var(--bad); }
.gs-word[data-tone="warn"] { color: var(--warn); } .gs-word[data-tone="busy"] { color: var(--busy); } .gs-word[data-tone="unsure"] { color: var(--ink-3); }
.gs-says { color: var(--ink-2); } .gs-kind { color: var(--ink-3); font-size: var(--fs-small); }
/* A goal's reading (Henge.goal.reading, static/ui/goal.js): the Estate's lanes and the room's goal panel. */
.kept { margin: 0.3rem 0 0 1rem; font-size: 0.82rem; color: var(--ink-2); border-left: 2px solid var(--border); padding-left: 0.6rem; }
.kept .line { color: var(--ink); }
.kept .stale { color: var(--bad); font-weight: 600; }
.kept .unsure { color: var(--warn); }
.kept .ok { color: var(--ok); }
.kept ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.gs-panel h3 { font-size: var(--fs-h3); margin: 0.6rem 0 0.2rem; color: var(--ink-2); }
.gs-panel ul { margin: 0.1rem 0; padding-left: 1.1rem; } .gs-panel li { margin: 0.1rem 0; }
.gs-criteria .gs-met { display: inline-block; width: 1em; } .gs-criteria li[data-met="true"] .gs-met { color: var(--ok); }
.gs-fold summary { color: var(--ink-3); font-size: var(--fs-small); cursor: pointer; }
.gs-verb { font: inherit; font-size: var(--fs-small); }

/* A subject's record (Henge.subject, static/ui/subject.js): the subject page and the room's subject panel. */
/* Three states, never two. `--warn` is deliberately NOT `--bad`: "cannot say" is
   not a failure, and painting it red would assert something nobody measured. */
.is-ok    { color: var(--ok); }
.is-bad   { color: var(--bad); }
.is-unsaid{ color: var(--warn); }
.is-none  { color: var(--ink-3); }
.cond {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 0.4rem;
  padding: 0.5rem 0.75rem; margin-bottom: 0.5rem;
}
.cond.is-ok     { border-left-color: var(--ok); }
.cond.is-bad    { border-left-color: var(--bad); }
.cond.is-unsaid { border-left-color: var(--warn); }
.cond .headline { font-weight: 600; font-size: 0.95rem; }
.cond .meta { color: var(--ink-3); font-size: 0.78rem; margin-top: 0.2rem; }
.cond .kind { color: var(--ink-4); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hist .cond { opacity: 0.75; border-left-color: var(--rule); }
/* The strip: one band per kind over the window, a column per slice. Four things, never
   three: ok, not ok, cannot say, and UNREPORTED (the hatch), which is none of them. */
.window { font-size: 0.8rem; color: var(--ink-3); margin: 0.2rem 0 0.5rem; }
.band {
  display: flex; height: 2.2rem; border: 1px solid var(--border); border-radius: 0.3rem; overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 4px, var(--rule) 4px 6px);
}
.band .slice { flex: 1 1 0; display: flex; flex-direction: column-reverse; min-width: 0; text-decoration: none; }
.band a.slice:hover { outline: 1px solid var(--ink); outline-offset: -1px; }
.band .slice i { display: block; }
.band .s-ok { background: var(--ok); }
.band .s-bad { background: var(--bad); }
.band .s-unsaid { background: var(--warn); }
.axis { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-4); margin: 0.15rem 0 0.4rem; }
ul.states { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.85rem; }
ul.states li { padding: 0.15rem 0; }
ul.states .meta { color: var(--ink-3); font-size: 0.78rem; }
.legend { font-size: 0.75rem; color: var(--ink-3); margin: 0 0 0.3rem; }
.legend i { display: inline-block; width: 0.7rem; height: 0.7rem; vertical-align: -0.05rem; margin: 0 0.25rem 0 0.7rem; border: 1px solid var(--border); }
.legend i.s-none { background: repeating-linear-gradient(135deg, transparent 0 2px, var(--rule) 2px 4px); }
.legend i.s-ok { background: var(--ok); } .legend i.s-bad { background: var(--bad); } .legend i.s-unsaid { background: var(--warn); }
.cond details pre {
  white-space: pre-wrap; word-break: break-word; font-size: 0.78rem;
  background: rgba(128,128,128,0.08); padding: 0.5rem; border-radius: 0.3rem;
  max-height: 18rem; overflow-y: auto; margin: 0.4rem 0 0;
}

/* An agent, drawn whole (Henge.agent, static/ui/agent.js): the agent page and the room's agent panel. */
.agent-view dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; font-size: 0.9rem; }
.agent-view dl.facts dt { opacity: 0.65; }
.agent-view dl.facts dd { margin: 0; }
.agent-view .gap { color: #d9a021; }
.agent-view .ok { color: #2e8b57; }
.agent-view .card {
border: 1px solid rgba(128,128,128,0.3); border-radius: 0.4rem;
padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; font-size: 0.85rem;
cursor: pointer;
}
.agent-view .card.pinned { border-color: #2e8b57; }
.agent-view .card.evicted { opacity: 0.5; }
.agent-view .card.landed { outline: 2px solid var(--warn); outline-offset: 2px; }
.agent-view .card .kind { color: var(--ink-4); font-size: 0.75rem; margin-right: 0.5rem; }
.agent-view .card .stat { float: right; font-size: 0.75rem; color: var(--border); }
.agent-view .card .preview { margin-top: 0.15rem; }
.agent-view .card .annotation { font-size: 0.8rem; color: var(--ink-4); margin-top: 0.25rem; }
/* The context manifest as a structure: a line per kind and per source, a bar for its share. */
/* A run card's lines flow under its title (the card's `stat` floats right, for the manifest). */
.agent-view .card.run .rline { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.15rem; clear: both; }
.agent-view .card.run .rline.outcome { color: var(--ink-2); }
.agent-view .card.run .dirty { color: var(--bad); font-weight: 600; }
.agent-view .card.run ul.rsteps, .agent-view .card.run ul.rfindings { margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.78rem; color: var(--ink-3); }
.agent-view .card.run li[data-step-state="failed"] { color: var(--bad); }
.agent-view .mf-sum { font-size: 0.85rem; color: var(--ink-2); margin: 0.2rem 0 0.4rem; }
.agent-view .mf-group { font-size: 0.85rem; padding: 0.3rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.agent-view .mf-group.mf-source { padding-left: 1.2rem; color: var(--ink-2); }
.agent-view .mf-items { padding-left: 1.2rem; margin: 0.3rem 0 0.6rem; }
.agent-view .vol { display: inline-block; width: 8rem; height: 0.5rem; background: var(--rule); vertical-align: middle; margin-left: 0.4rem; }
.agent-view .vol i { display: block; height: 100%; background: var(--busy); }
.agent-view .card .detail {
cursor: default; margin-top: 0.5rem; padding-top: 0.5rem;
border-top: 1px solid rgba(128,128,128,0.25);
}
.agent-view .card .detail pre {
white-space: pre-wrap; word-break: break-word; font-size: 0.8rem;
background: rgba(128,128,128,0.08); padding: 0.5rem; border-radius: 0.3rem;
max-height: 16rem; overflow-y: auto;
}
.agent-view .card .detail .actions { margin-top: 0.4rem; }
.agent-view button {
font: inherit; font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 0.3rem;
border: 1px solid rgba(128,128,128,0.4); background: transparent; color: inherit; cursor: pointer;
margin-right: 0.3rem;
}
.agent-view button:hover { background: rgba(128,128,128,0.15); }
.agent-view button:disabled { opacity: 0.4; cursor: default; }
.agent-view #curator { font: inherit; font-size: 0.8rem; padding: 0.2rem 0.4rem; width: 12rem; }
/* What is known of the agent, first: the scene's figure for this row and one sentence.
A state the agent never reported has its own ink: dim and italic, never a dash. */
.agent-view .known { display: flex; gap: 0.9rem; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0 0 1rem; }
.agent-view .known .pose { width: 44px; height: 58px; flex-shrink: 0; }
.agent-view .known .pose .ink { stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.agent-view .known .pose .solid { fill: var(--ink); stroke: none; }
.agent-view .known .says { font-size: 0.95rem; color: var(--ink); }
.agent-view .known .sub { font-size: 0.8rem; color: var(--ink-3); }
.agent-view .unsaid { color: var(--ink-4); font-style: italic; }
.agent-view .agent-err { color: var(--bad); font-size: 0.85rem; border-left: 3px solid var(--bad); padding-left: 0.6rem; margin: 0.4rem 0; }