/* office.css: the office's own layer, loaded after firma.css. firma.css
   gives the tokens (colour, type, space, radii, motion) and the base
   components (buttons, fields, badges, cards, empty and loading states);
   this file lays out the board's screen with them.

   It is unlayered, so it wins over firma's layer wherever it sets a
   property: it restyles by class (.tab, .node, .ledger-title), never a bare
   `button` or `input`, so firma's button variants keep working. */

/* ------------------------------------------------------------ The frame */

html, body { height: 100%; }
body.office-page { display: flex; flex-direction: column; }
.office-page .office { font-size: var(--fs-2); }
.office-page h1, .office-page h2, .office-page h3, .office-page h4, .office-page h5, .office-page h6 { margin: 0; }
.office-page p { margin: 0; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface-subtle); padding: 0.0625rem 0.3125rem; border-radius: 4px; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.span-all { grid-column: 1 / -1; }
input.narrow { width: 5em; }

/* State words, said the same way everywhere: "On shift", "Waiting for you". */
.badge::first-letter, .status::first-letter { text-transform: uppercase; }
.badge.keep-case::first-letter { text-transform: none; }

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

.top {
  flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
body.signed-out .top { display: none; }
/* Editing unlocked: a line of the action colour across the top, as well as the pill. */
body.editing .top { box-shadow: inset 0 3px 0 var(--primary); }

.top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
}
.nav-row { padding-top: 0; }

.brand { display: flex; align-items: baseline; gap: var(--sp-2); flex: none; }
.brand-place { color: var(--text-secondary); font-size: var(--fs-2); font-weight: 600; }

.who {
  display: grid;
  min-width: 0;
  flex: 0 1 auto;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--divider);
  line-height: 1.3;
}
.who-company { font-weight: 600; overflow-wrap: anywhere; }
.who-company.is-id { font-family: var(--font-mono); font-size: var(--fs-2); }
.who-line { color: var(--text-secondary); font-size: var(--fs-1); overflow-wrap: anywhere; }

/* What needs the board: amber, in words, with its count. */
.needs-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--attention-fill);
  color: var(--attention);
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.3;
}
.needs-pill:not(:disabled):hover { background: var(--attention-fill); border-color: var(--attention); }
.needs-count {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--attention);
  color: var(--attention-fill);
  font-variant-numeric: tabular-nums;
}
.needs-pill.calm {
  padding: var(--sp-1) var(--sp-4);
  background: transparent;
  border-color: var(--divider);
  color: var(--text-secondary);
  font-weight: 500;
}
.needs-pill.calm:not(:disabled):hover { background: var(--surface-subtle); border-color: var(--control-border); color: var(--text); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-left: auto; }
.mode {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--selected);
  color: var(--primary);
  font-size: var(--fs-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mode::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary); }

/* The views: a segmented control, the active one marked (aria-current). */
.tabs, .seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--divider);
  border-radius: calc(var(--r-control) + 3px);
  background: var(--surface-subtle);
  max-width: 100%;
}
.tab, .seg-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.tab:not(:disabled):hover, .seg-btn:not(:disabled):hover { background: transparent; border-color: transparent; color: var(--text); }
.tab[aria-current="page"], .seg-btn[aria-pressed="true"],
.tab[aria-current="page"]:not(:disabled):hover, .seg-btn[aria-pressed="true"]:not(:disabled):hover {
  background: var(--surface);
  border-color: var(--divider);
  color: var(--text);
}
.tab .count {
  min-width: 1.375rem;
  padding: 0 0.375rem;
  border-radius: var(--r-pill);
  background: var(--divider);
  color: var(--text);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.stamp { margin-left: auto; max-width: 60ch; color: var(--text-secondary); font-size: var(--fs-1); text-align: right; }

/* ------------------------------------------------------------ Signing in */

.signin {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--sp-7) var(--sp-4);
}
.signin-card {
  width: min(28rem, 100%);
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--divider);
  border-radius: var(--r-dialog);
  background: var(--surface);
}
.signin-mark { display: flex; align-items: baseline; gap: var(--sp-2); }
.signin h1 { font-family: var(--font-serif); font-size: var(--fs-5); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
.signin .lede { color: var(--text-secondary); }
.signin-google { display: grid; gap: var(--sp-3); }
.signin-google .primary { width: 100%; }
label.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--text-secondary);
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}
input[type="checkbox"] { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.0625rem 0 0; accent-color: var(--primary); }
.signin-key { border-top: 1px solid var(--divider); padding-top: var(--sp-3); }
.signin-key form { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.signin-key form label { font-weight: 600; }
.signin-key form button { justify-self: start; }
.signin .help { font-size: var(--fs-1); }

/* Disclosures: a quiet line with a turning chevron. */
summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: var(--fs-2); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.6rem 0.15rem 0.1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease);
}
details[open] > summary::before { transform: rotate(45deg); }

/* ------------------------------------------------------------ Dialogs */

.dialog {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgb(23 27 24 / 0.45);
  animation: office-fade var(--dur-panel) var(--ease);
}
.dialog-card {
  width: min(28rem, 100%);
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--divider);
  border-radius: var(--r-dialog);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
}
.dialog-card h2 { font-size: var(--fs-4); }
.dialog-card .help { font-size: var(--fs-2); }
.dialog-card .field .help { font-size: var(--fs-1); }
.dialog-actions { padding-top: var(--sp-1); }
.or { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-secondary); font-size: var(--fs-1); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
@keyframes office-fade { from { opacity: 0; } }

/* ------------------------------------------------------------ The office */

.office {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(22.5rem, 32vw, 27.5rem);
}
.view { min-width: 0; min-height: 0; overflow: auto; }
.table-view { padding: var(--sp-5) var(--sp-6) var(--sp-7); }
.view-head { display: grid; gap: var(--sp-1); max-width: 75ch; }
.view-head h2 { font-size: var(--fs-4); }
.view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--divider);
}

/* Filters: a toolbar of labelled controls, labels above. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  background: var(--surface);
}
.filters > label:not(.check) { display: grid; gap: var(--sp-1); flex: 1 1 10rem; max-width: 16rem; }
.filter-label { color: var(--text-secondary); font-size: var(--fs-1); font-weight: 600; }
.filters select, .filters input:not([type="checkbox"]) { width: 100%; font-size: var(--fs-2); padding: 0.4375rem var(--sp-3); }
.filters label.check { align-items: center; min-height: 2.5rem; }
.filter-actions { display: flex; gap: var(--sp-2); }
.more { margin-top: var(--sp-3); }

/* Tables: 48px rows, a header that stays, each row's link explicit. */
.table-wrap { overflow: auto; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); }
#agents { margin-top: var(--sp-4); max-height: 60vh; }
#agents > .empty, #schedules > .empty, .table-wrap > .loading, .table-wrap > .failed { margin: var(--sp-3); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-2); }
th, td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; }
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-1);
  font-weight: 600;
  white-space: nowrap;
}
tbody th { font-weight: 400; }
tbody tr { height: 3rem; cursor: pointer; }
tbody tr:hover > * { background: var(--surface-subtle); }
tbody tr:last-child > * { border-bottom: 0; }
tbody th .link { font-weight: 600; text-align: left; white-space: nowrap; }

/* The Agents tab's panels: one card each, titled. */
.panels { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); max-width: 60rem; }
.panel {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  background: var(--surface);
}
.panel-title { font-size: var(--fs-4); }
.panel h4 { font-size: var(--fs-2); margin-top: var(--sp-2); }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
/* A computer's pairing code, shown once. */
.code-box, .codes {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--primary);
  border-radius: var(--r-card);
  background: var(--selected);
}
.code-box .code { font: 600 1.5rem/1.2 var(--font-mono); letter-spacing: 0.08em; overflow-wrap: anywhere; }
.codes-list { user-select: all; letter-spacing: 0.02em; }

/* ------------------------------------------------------------ Resources */

/* Where the company's work comes from. With nothing connected: the question,
   then the ways to connect (the funnel), each a card. Then a card per
   connection: its facts, its workers, what stops it, the board's controls;
   and "Connect another". */
.resources { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); max-width: 75rem; }
.resources-summary { font-size: var(--fs-3); font-weight: 600; }
.resources-note { color: var(--text-secondary); }
.ask { display: grid; gap: var(--sp-1); }
.ask h3 { font-family: var(--font-serif); font-size: var(--fs-5); font-weight: 400; line-height: 1.15; }
.ask > p:not(.small) { font-size: var(--fs-3); }
.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.funnel > li { display: grid; min-width: 0; }
.option {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  background: var(--surface);
}
.option h4 { font-size: var(--fs-3); }
.option-paid { font-size: var(--fs-2); }
/* Said in words; the colour only repeats it. */
.option .closed-note { color: var(--attention); }
.option .seen { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.option > .edit-only { justify-self: start; margin-top: var(--sp-1); }
.funnel-row > .row { gap: var(--sp-2); }
.connect-another { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.connect-another h3 { font-size: var(--fs-4); }
body.editing .locked-only { display: none; }

/* The connect panel and the connection's editors: the review card below. */
.connect-panel h4 { font-size: var(--fs-3); }
/* What the board needs to know before it confirms: amber, and said in words. */
.notice { padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--attention); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--attention-fill); color: var(--text); }
.resources .editor-slot { margin-top: var(--sp-2); }
.plain-fieldset { display: grid; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.plain-fieldset > legend { margin-bottom: var(--sp-1); padding: 0; color: var(--text-secondary); font-size: var(--fs-2); font-weight: 600; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.checks label.check { flex-wrap: wrap; align-items: baseline; color: var(--text); }
.checks .agent-id { font-weight: 600; white-space: nowrap; }

.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}
.sources > li { min-width: 0; }
.source {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  background: var(--surface);
}
.source-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
.source-titles { display: grid; gap: 2px; min-width: 0; }
.source-head h3 { font-size: var(--fs-4); line-height: 1.25; overflow-wrap: anywhere; }

/* A connection's workers: each with its presence in words, the client it
   named, its status and seat. A dot marks "active now"; the words say it. */
.workers { display: grid; gap: var(--sp-2); }
.workers h4 { font-size: var(--fs-2); }
.worker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.worker { display: grid; gap: 2px; min-width: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--divider); border-radius: var(--r-control); }
.worker .presence { font-size: var(--fs-2); overflow-wrap: anywhere; }
.presence-active::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: var(--sp-2); border-radius: 50%; background: var(--success); vertical-align: 0.1em; }
.worker-facts { color: var(--text-secondary); font-size: var(--fs-1); overflow-wrap: anywhere; }
.worker-note { font-size: var(--fs-1); overflow-wrap: anywhere; }
.worker-access { font-size: var(--fs-1); overflow-wrap: anywhere; }
.worker-edit { margin-top: var(--sp-1); }
/* An agent's id stays whole: never "claude-" on one line and "1" on the next. */
.agent-id .link { white-space: nowrap; }

/* What stops a connection now: amber, and said in words. */
.blockers {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--attention);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--attention-fill);
}
.blockers h4 { margin: 0; color: var(--attention); font-size: var(--fs-2); }
.blockers ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--sp-1); color: var(--text); }

/* How a worker connects: the steps, each command whole, to copy. */
.how-to { border-top: 1px solid var(--divider); }
.how-to > p { margin-top: var(--sp-2); }
.how-steps { margin: var(--sp-2) 0; padding-left: 1.25rem; display: grid; gap: var(--sp-3); font-size: var(--fs-2); }
.how-steps > li { overflow-wrap: anywhere; }
pre.command { margin: var(--sp-1) 0; user-select: all; }
.connection-edit { padding-top: var(--sp-3); border-top: 1px solid var(--divider); }
.cloud-links { gap: var(--sp-2) var(--sp-4); }

/* ------------------------------------------------------------ The org */

.org-view { display: flex; flex-direction: column; overflow: hidden; }
.office.org-as-list .org-view { overflow: auto; }
.org-bar { flex: none; background: var(--page); }
.canvas-controls { display: inline-flex; gap: 2px; }
.canvas-controls button { min-width: 2.25rem; min-height: 2.25rem; padding: 0 var(--sp-2); font-size: var(--fs-3); }
.legend { margin-left: auto; color: var(--text-secondary); font-size: var(--fs-1); }
.office.org-as-list .legend-hint { display: none; }

.canvas-wrap { position: relative; flex: 1; min-height: 22.5rem; overflow: hidden; overflow: clip; }
.canvas { position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.canvas.dragging { cursor: grabbing; }
.canvas.dragging .node { cursor: grabbing; }
.canvas-empty { position: absolute; inset: var(--sp-5) var(--sp-5) auto; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.edges path { fill: none; stroke: var(--control-border); stroke-width: 1.25; }

/* A role as a card: its name, its path, its seats with their state, its
   work and its shift. Needing attention adds an amber rail and the words. */
.node, .tree-row {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 2px);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
}
/* 160px holds the board's and a role's lines (~156px). Its parts never
   shrink: squeezed to fit, a clipped line lost the tails of its y, g and p. */
.node { position: absolute; width: 240px; height: 160px; }
.node > * { flex-shrink: 0; }
.node:not(:disabled):hover, .tree-row:not(:disabled):hover { background: var(--surface); border-color: var(--control-border); }
.node:focus-visible { outline-width: calc(3px / var(--k, 1)); outline-offset: calc(3px / var(--k, 1)); }
.node.attention::before, .tree-row.attention::before, .ledger-item.waiting::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--attention);
}
.node.selected, .tree-row.selected,
.node.selected:not(:disabled):hover, .tree-row.selected:not(:disabled):hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 0 0 5px var(--selected);
}
/* The board: above every role, on the action colour's own tint. */
.node.board, .tree-row.board,
.node.board:not(:disabled):hover, .tree-row.board:not(:disabled):hover { background: var(--selected); }
.node.board:not(.selected), .tree-row.board:not(.selected) { border-color: var(--primary); }

/* A planned role (the starting team's draft, orgdraft.ts): the same card,
   dashed, on the page's own colour and labelled Planned: it isn't a role
   yet. Its connector is dashed too. Selected, it keeps its dashes. */
.node.ghost, .tree-row.ghost,
.node.ghost:not(:disabled):hover, .tree-row.ghost:not(:disabled):hover { border-style: dashed; background: var(--page); }
.node.ghost:not(.selected), .tree-row.ghost:not(.selected) { border-color: var(--control-border); }
.node.ghost:not(:disabled):hover, .tree-row.ghost:not(:disabled):hover { background: var(--surface-subtle); }
.node.ghost .node-lines { border-top-style: dashed; }
.edges path.ghost { stroke-dasharray: 5 4; }
.node-head > .badge { flex: none; }

.node-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.node-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3); font-weight: 600; }
.node-flag {
  flex: none;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--attention-fill);
  color: var(--attention);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.node-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: var(--fs-1); }
.node-lines { display: grid; gap: 1px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--divider); }
.node.board .node-lines { border-top-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.node-line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); }
.node-line.seat { display: flex; align-items: center; gap: var(--sp-2); }
.node-key { flex: none; width: 3.5rem; color: var(--text-secondary); }
.node-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--control-border); }
.tone-good .dot { background: var(--success); }
.tone-bad .dot { background: var(--error); }
.tone-warn .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--attention); }
.tone-none .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--control-border); }
.tone-warn { color: var(--attention); }
.tone-bad { color: var(--error); }
.tone-good { color: var(--success); }
.tone-info { color: var(--primary); }
.tone-dim, .tone-none { color: var(--text-secondary); }
.seat.tone-good { color: var(--text); }
.tone-warn, .tone-bad { font-weight: 600; }
/* A seat's label stays a label; its state is in the dot and the words after it. */
.seat .node-key { color: var(--text-secondary); font-weight: 400; }

/* The same tree as a list: nested rows, a guide line per level. */
.org-list { padding: var(--sp-4) var(--sp-5) var(--sp-7); }
.tree, .tree-group { list-style: none; margin: 0; padding: 0; }
.tree-group { margin-left: var(--sp-4); padding-left: var(--sp-4); border-left: 1px solid var(--divider); }
.tree li { padding-top: var(--sp-2); }
.tree-row {
  width: 100%;
  min-height: 3rem;
  display: grid;
  /* The facts keep the same columns at every depth: they line up down the list. */
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 13rem) minmax(0, 16rem);
  align-items: start;
  gap: var(--sp-1) var(--sp-4);
}
.row-id, .row-facts { display: grid; gap: 1px; min-width: 0; }

/* ------------------------------------------------------------ Beside the org: Chat and Details */

/* Two tabs over the right-hand column: the setup chat, and the inspector. */
.side-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  margin: var(--sp-3) var(--sp-5) 0;
  padding: 3px;
  border: 1px solid var(--divider);
  border-radius: calc(var(--r-control) + 3px);
  background: var(--surface-subtle);
}
.side-tab {
  flex: 1 1 0;
  min-height: 36px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-2);
  font-weight: 600;
}
.side-tab:not(:disabled):hover { background: transparent; border-color: transparent; color: var(--text); }
.side-tab[aria-selected="true"], .side-tab[aria-selected="true"]:not(:disabled):hover { background: var(--surface); border-color: var(--divider); color: var(--text); }
.details, .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* The chat: its head, the messages (they scroll), and the composer. */
/* The head: who you're talking to and what's left of free setup on one line, what it does below. */
.chat-head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--divider);
}
.chat-head > .back, .chat-head > .chat-about { grid-column: 1 / -1; justify-self: start; }
#chat-title { font-size: var(--fs-4); line-height: 1.25; }
#chat-title:focus { outline: none; }
.chat-head .help { font-size: var(--fs-1); }
.chat-funding { color: var(--text-secondary); font-size: var(--fs-1); font-weight: 600; text-align: right; }
.chat-funding.used-up { color: var(--attention); }
.chat-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.chat-log > .chat-empty, .chat-log > .chat-state { align-self: stretch; }
/* The Director on the left, the board on the right. */
.chat-msg { display: grid; gap: var(--sp-1); justify-items: start; min-width: 0; max-width: 94%; }
.chat-msg.from-runner { align-self: flex-start; }
.chat-msg.from-board { align-self: flex-end; justify-items: end; }
.chat-who { color: var(--text-secondary); font-size: var(--fs-1); overflow-wrap: anywhere; }
.chat-name { color: var(--text); font-weight: 600; }
.from-board .chat-who { text-align: right; }
.chat-bubble {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-card);
  font-size: var(--fs-2);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.from-runner .chat-bubble { background: var(--surface-subtle); border-top-left-radius: 4px; }
.from-board .chat-bubble { background: var(--selected); border-top-right-radius: 4px; }
.from-runner .chat-bubble.chat-failed { border: 1px solid var(--attention); background: var(--attention-fill); }
.chat-pending .chat-meta { font-style: italic; }
/* "Thinking…": the words, and three dots that pulse (at rest under reduced motion). */
.chat-thinking { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-secondary); }
.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots > span { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; opacity: 0.35; animation: chat-dot 1.2s var(--ease) infinite; }
.chat-dots > span:nth-child(2) { animation-delay: 0.2s; }
.chat-dots > span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
.chat-note { color: var(--text-secondary); font-size: var(--fs-1); }
/* firma's own words beside a reply: what was left out of its draft, and why. */
.chat-notes { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--control-border); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface); font-size: var(--fs-1); }
.chat-notes-head { color: var(--text-secondary); font-weight: 600; }
.chat-notes ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 2px; }
/* A draft the Director made: dashed like the planned cards it put on the chart. */
.chat-draft {
  display: grid;
  gap: var(--sp-2);
  width: 100%;
  min-width: 0;
  padding: var(--sp-3);
  border: 1px dashed var(--control-border);
  border-radius: var(--r-card);
  background: var(--page);
  font-size: var(--fs-2);
}
.chat-draft.open { border-color: var(--primary); }
.chat-draft-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
.chat-draft-title { font-weight: 600; }
.chat-draft-roles, .chat-draft-lines { margin: 0; padding-left: 1.1rem; display: grid; gap: 2px; }
.chat-draft-roles .link { text-align: left; overflow-wrap: anywhere; }
.chat-draft-lines { color: var(--text-secondary); font-size: var(--fs-1); }
/* The whole review Set it up approves: each role, dashed like its planned
   card, with its purpose, objective and maker; then firma's lines. */
.chat-review { display: grid; gap: var(--sp-2); min-width: 0; }
.chat-review-from { color: var(--text-secondary); font-size: var(--fs-1); }
.chat-draft-roles.proposed { list-style: none; padding: 0; gap: var(--sp-2); }
.chat-draft-role { display: grid; gap: 2px; min-width: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 2px dashed var(--control-border); }
.chat-draft-role-head .link { font-weight: 600; }
.chat-draft-role .kv.stacked dd { margin-bottom: var(--sp-1); font-size: var(--fs-2); }
.chat-draft .blockers { padding: var(--sp-2) var(--sp-3); }
.chat-draft .blockers ul { font-size: var(--fs-1); }
.chat-actions { display: grid; gap: var(--sp-2); }
/* firma's card for the board's next step (Start work): firma's words, set
   apart from the Director's bubbles by the action colour's tint. */
.chat-next { max-width: 100%; align-self: stretch; }
.chat-next-card { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--primary); border-radius: var(--r-card); background: var(--selected); font-size: var(--fs-2); }
.chat-next-title { font-weight: 600; }
.chat-actions > .row { gap: var(--sp-2); }
.chat-compose { flex: none; display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--divider); background: var(--surface); }
.chat-compose textarea { width: 100%; min-height: 3.5rem; max-height: 12rem; resize: vertical; }
.chat-send-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.chat-count { color: var(--text-secondary); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.chat-count.over { color: var(--error); font-weight: 600; }
.chat-compose .help { font-size: var(--fs-1); }
.org-chat { flex: none; }

/* ------------------------------------------------------------ The inspector */

.inspector { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--divider); background: var(--surface); }
.inspector-head {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--divider);
}
.inspector-titles { display: grid; gap: var(--sp-1); min-width: 0; justify-items: start; }
#i-title { font-size: var(--fs-4); line-height: 1.25; overflow-wrap: anywhere; }
#i-title:focus { outline: none; }
.back { margin-bottom: var(--sp-1); }
.inspector-body { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--sp-5) var(--sp-7); }
.inspector-body > .empty, .inspector-body > .loading, .inspector-body > .failed { margin-top: var(--sp-5); }

/* Sections: sentence-case titles, space between, a hairline above each. */
.section { display: grid; gap: var(--sp-3); padding: var(--sp-5) 0; border-top: 1px solid var(--divider); }
.inspector-body > .section:first-child { border-top: 0; }
.section h3 { font-size: var(--fs-3); }
.section h4 { font-size: var(--fs-2); margin-top: var(--sp-2); }
.section h5 { font-size: var(--fs-2); margin-top: var(--sp-2); }
.section.level-4 { padding: var(--sp-4) 0 0; border-top: 0; }
.section.level-4 > .section-head h4 { font-size: var(--fs-3); margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.section-body { display: grid; gap: var(--sp-3); min-width: 0; }
/* An assignment's text: prose, kept as written. */
pre.contract {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-control);
  background: var(--surface-subtle);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The board's page: groups (Your company, Settings) of sections. */
.group { display: grid; gap: var(--sp-2); padding: var(--sp-5) 0; border-top: 1px solid var(--divider); }
.group-title { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 400; }
.group > .section + .section { margin-top: var(--sp-3); }

/* Facts: a label, its value, and (while editing) its Edit button. */
.kv { display: grid; grid-template-columns: minmax(5.5rem, 30%) minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: baseline; margin: 0; }
.kv > * { min-width: 0; }
/* Each fact on its own row, whether or not its Edit button shows. */
.kv dt { grid-column: 1; color: var(--text-secondary); font-size: var(--fs-1); font-weight: 600; }
.kv dd { grid-column: 2; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kv .edit-btn { grid-column: 3; display: none; }
/* Prose: the label above, the value the full width below it. */
.kv.stacked { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
.kv.stacked dt { grid-column: 1; }
.kv.stacked dd { grid-column: 1; margin-bottom: var(--sp-2); }
.kv.stacked .edit-btn { grid-column: 2; }
body.editing .kv .edit-btn { display: inline-flex; }
.edit-btn[aria-expanded="true"] { background: var(--surface-subtle); }
.edit-only { display: none !important; }
body.editing .edit-only { display: inline-flex !important; }
body.editing .edit-only.block { display: block !important; }

/* An editor: the fields, then Review; below it, the review card. */
.editor { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-card); background: var(--surface-subtle); }
.editor-slot { margin-top: var(--sp-1); }
.editor > label:not(.check):not(.row) { display: grid; gap: var(--sp-1); color: var(--text-secondary); font-size: var(--fs-2); font-weight: 600; }
.editor > label.row { align-items: flex-start; flex-wrap: nowrap; color: var(--text-secondary); font-size: var(--fs-2); }
.editor > label > select, .editor > label > input:not([type="checkbox"]), .editor > label > textarea,
.editor > input:not([type="checkbox"]), .editor > textarea, .editor > select { width: 100%; }
.editor textarea { min-height: 6rem; }
.editor .field > label { font-size: var(--fs-2); }
.editor .help, .field .help { font-size: var(--fs-1); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-3); }
.field { gap: var(--sp-1); }
.field-note { color: var(--text-secondary); font-weight: 400; }
details.block > summary, details.edit-only > summary { padding: var(--sp-2) 0; }
details.block > .editor, details.edit-only > .editor { margin-top: var(--sp-1); }
details.block, details.edit-only.block { margin-top: var(--sp-1); }

/* Review, then confirm: Current and Proposed, the reason, the verb. */
.review {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--control-border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.review-values { display: grid; gap: var(--sp-3); margin: 0; }
.review-value { display: grid; gap: 2px; padding-left: var(--sp-3); border-left: 3px solid var(--divider); }
/* Proposed in ink, not green: green means done or ok, and this is neither yet. */
.review-value.proposed { border-left-color: var(--text); }
.review-value dt { color: var(--text-secondary); font-size: var(--fs-1); font-weight: 600; }
.review-value dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-value.proposed dd { color: var(--text); font-weight: 500; }
.review .field > label { font-size: var(--fs-2); }
.review-actions { padding-top: var(--sp-1); }
button[aria-busy="true"] { cursor: progress; }

/* Lists in the inspector: items with a hairline between. */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--sp-2) 0; }
.list > li + li { border-top: 1px solid var(--divider); }
/* Revoking a grant: its own line under it, asked once more in the page. */
.access-revoke { margin-top: var(--sp-1); }
.access-revoke > p { margin: 0 0 var(--sp-1); }
.access-revoke button { white-space: nowrap; }
.access-revoke button + button { margin-left: var(--sp-2); }
.item {
  display: grid;
  gap: 2px;
  width: calc(100% + var(--sp-4));
  margin: 0 calc(-1 * var(--sp-2));
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
.item:not(:disabled):hover { background: var(--surface-subtle); border-color: transparent; }
.item .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.item .title { font-weight: 600; overflow-wrap: anywhere; }
.item .meta { color: var(--text-secondary); font-size: var(--fs-1); }
.item .text, .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.runs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.runs > li { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--divider); border-radius: var(--r-control); background: var(--surface); }

/* A task's status and a journal entry's tag: small, spelled out. */
.status {
  display: inline-block;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}
.status.submitted { background: var(--selected); color: var(--primary); }
.status.escalated { background: var(--attention-fill); color: var(--attention); }
.status.closed, .status.done { background: var(--success-fill); color: var(--success); }
.status.cancelled { background: transparent; box-shadow: inset 0 0 0 1px var(--divider); }
.tag {
  display: inline-block;
  padding: 0 0.375rem;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}
.tag.OPEN, .tag.PROPOSAL { color: var(--attention); }
.tag.DECISION, .tag.kind-decision, .tag.kind-change { color: var(--primary); }
.tag.DID, .tag.RESOLVED { color: var(--success); }
.verdict { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--divider); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface-subtle); }
.verdict.accept { border-left-color: var(--success); }
.verdict.reject { border-left-color: var(--error); }
pre.raw {
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  padding: var(--sp-3);
  border: 1px solid var(--divider);
  border-radius: var(--r-control);
  background: var(--surface-subtle);
  font-size: var(--fs-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-body { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--control-border); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface-subtle); }
.sender {
  padding: 0 var(--sp-2);
  border-radius: 4px;
  background: var(--selected);
  color: var(--primary);
  font-size: var(--fs-1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The starting team: firma's review (Current and Proposed, as the review
   card has them), its lines, and the board's actions. The planned role a
   card was opened from is marked. */
.team-review { margin-top: var(--sp-1); }
/* The plan's words read as text: only each path is bold. */
.team-review .review-value.proposed dd { font-weight: 400; }
.team-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); white-space: normal; }
.team-list > li { min-width: 0; overflow-wrap: anywhere; }
.team-path { font-weight: 600; overflow-wrap: anywhere; }
.team-role { display: grid; gap: var(--sp-1); padding: var(--sp-3); border: 1px dashed var(--control-border); border-radius: var(--r-control); background: var(--page); }
.team-role.focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.team-role-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
.team-role .kv.stacked dd { margin-bottom: var(--sp-1); }
.team-lines { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--sp-1); color: var(--text-secondary); }
.team-actions > .row { gap: var(--sp-2); }
.team-actions, .team-unlock { display: grid; gap: var(--sp-2); }
.team-unlock { justify-items: start; }
.team-editor { display: grid; gap: var(--sp-2); }
.team-role-edit > summary { overflow-wrap: anywhere; }

/* Start work: the goal the board approved (or the first plan's proposal),
   the review card, and the team below the Director: real roles, so a solid
   border, never the planned one's dashes. */
.goal-block { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--primary); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface-subtle); }
.goal-block h5 { margin: 0; }
.goal-text { margin: 0; font-size: var(--fs-3); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.work-team { display: grid; gap: var(--sp-2); }
.work-team .team-role { border-style: solid; }

/* The Director waiting on the work it gave: each task, where it stands; and
   on a task it waits on, that it does. */
.awaited-tasks { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--sp-1); color: var(--text-secondary); overflow-wrap: anywhere; }
.awaited { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--primary); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface-subtle); }

/* Blocked work (blockers.ts): firma's own words, on an error-red rail, apart
   from anything a worker or the Director wrote. A blocked role's card says
   so in its flag and in its last line. */
.blocked-work { display: grid; gap: var(--sp-3); }
.blocker {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--error);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--error-fill);
  overflow-wrap: anywhere;
}
.blocker > p { margin: 0; }
.blocker-reason { color: var(--text); }
.blocker .evidence > summary { color: var(--text-secondary); font-size: var(--fs-1); }
.firma-tag {
  display: inline-block;
  padding: 0 0.375rem;
  border-radius: 4px;
  background: var(--text);
  color: var(--surface);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}
.firma-lines { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--error); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface-subtle); }
.firma-lines > p { margin: 0; }
.firma-said { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-2); overflow-wrap: anywhere; }
.node.blocked .node-flag, .tree-row.blocked .node-flag { background: var(--error-fill); color: var(--error); }
.node.blocked::before, .tree-row.blocked::before { background: var(--error); }
.status.blocked { background: var(--error-fill); color: var(--error); }
.tag.kind-blocker { color: var(--error); }
.item .meta.blocked-line { color: var(--error); font-weight: 600; }
.blocked-inbox { display: grid; gap: var(--sp-3); max-width: 60rem; margin: var(--sp-4) 0 var(--sp-5); }
.blocked-inbox > * { margin: 0; }
.blocked-item > p { margin: 0; }

/* Checked outcomes (start-work.md 6d): firma's words on how work is checked
   when its giver checks it (on the primary rail: nothing's blocked), its
   card for each verified outcome (on the success rail), the verdict a giver
   gave, and the outcomes a completion cites. */
.checked-by-giver, .firma-checks {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--surface-subtle);
  overflow-wrap: anywhere;
}
.checked-by-giver > p, .firma-checks > p { margin: 0; }
.firma-outcomes { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--success); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--surface-subtle); }
.firma-outcomes > p { margin: 0; }
.outcome-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-2); overflow-wrap: anywhere; }
.outcome-card { display: grid; gap: 2px; }
.outcome-card > p { margin: 0; }
.verdict.giver { border-left-style: double; }
.cited { overflow-wrap: anywhere; }
.item .meta.check-line.verified { color: var(--success); }
.item .meta.check-line.rejected, .item .meta.check-line.mismatch { color: var(--error); }
.check-words.verified { color: var(--success); font-weight: 600; }
.check-words.rejected { color: var(--error); }
.check-words.mismatch { color: var(--error); font-weight: 600; }

/* The first plan: the start page's document (.doc, .doc-part, .roles and
   .timeline are firma.css's), at the inspector's size. */
.plan-doc .doc-part { display: grid; gap: var(--sp-2); padding: var(--sp-4); }
.plan-doc h5 { font-size: var(--fs-3); }
.plan-doc h5.kicker { font-size: var(--fs-1); }
.plan-doc h6 { margin-top: var(--sp-2); font-size: var(--fs-2); font-weight: 600; }
.plan-doc h6:first-letter { text-transform: uppercase; }
.plan-doc .role-head > h6 { margin: 0; }
.doc-mission { font-size: var(--fs-3); }
.doc-goal { font-size: var(--fs-3); font-weight: 600; line-height: 1.4; }
.plan-doc .pack-title { font-size: var(--fs-4); line-height: 1.25; }
.plan-doc .draft { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-2); }
.plan-doc .timeline > li { grid-template-columns: 4.5rem minmax(0, 1fr); }

/* ------------------------------------------------------------ The ledger: inbox, changes, history */

.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 60rem; }
.ledger-item {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  background: var(--surface);
}
.ledger-item.message:hover { border-color: var(--control-border); }
.ledger-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); color: var(--text-secondary); font-size: var(--fs-1); }
.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.ledger-head .about, .ledger-head .muted { color: var(--text-secondary); }
/* A message's title opens it; the whole card answers the pointer. */
.ledger-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.ledger-title:not(:disabled):hover { background: none; text-decoration: underline; text-underline-offset: 0.18em; }
.ledger-title::after { content: ""; position: absolute; inset: 0; }
.ledger-item.waiting { border-color: color-mix(in srgb, var(--attention) 45%, var(--divider)); }
.why { font-size: var(--fs-2); }
.changes-table { display: grid; gap: var(--sp-2); font-size: var(--fs-1); }
.change { display: grid; gap: 2px; padding-left: var(--sp-3); border-left: 2px solid var(--divider); }
.change-field { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr); gap: var(--sp-2); }
.change-field > * { min-width: 0; overflow-wrap: anywhere; }
.before { color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.after { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.arrow { color: var(--text-secondary); }
details.asked > summary { color: var(--text-secondary); font-size: var(--fs-1); }
details.asked > pre { margin-top: var(--sp-2); }
.inspector .ledger { gap: var(--sp-2); }
.inspector .ledger-item { padding: var(--sp-3) var(--sp-4); }

/* A region a refresh left as it was, because the board is working in it:
   amber (it needs the board to know), with the way to the latest. */
.held {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--attention);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--attention-fill);
  color: var(--text);
  font-size: var(--fs-2);
}
.held > button { margin-left: calc(-1 * var(--sp-3)); }
#i-held { flex: none; margin: var(--sp-3) var(--sp-5) 0; }
#agents-held { margin-top: var(--sp-4); max-width: 60rem; }
#agents-title:focus { outline: none; }

/* States: loading says what; a failure says what failed, and offers again. */
.state { list-style: none; }
.loading { padding: var(--sp-2) 0; }
.failed {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--error);
  border-radius: var(--r-card);
  background: var(--error-fill);
}
.inspector-body .empty { padding: var(--sp-4); }

/* ------------------------------------------------------------ Narrower screens */

@media (max-width: 1100px) {
  .table-view { padding: var(--sp-5); }
}

/* The inspector goes below the view; the page scrolls as one. */
@media (max-width: 900px) {
  html, body { height: auto; }
  body.office-page { display: block; min-height: 100%; }
  .office { display: block; }
  .view, .org-view, .office.org-as-list .org-view { overflow: visible; }
  .canvas-wrap { flex: none; height: 62vh; min-height: 20rem; }
  /* Tall enough that opening something can bring its top to the top of the screen. */
  .inspector { min-height: 100vh; min-height: 100dvh; border-left: 0; border-top: 1px solid var(--divider); }
  .inspector-body { overflow: visible; }
  #schedules { max-height: 75vh; }
  .stamp { margin-left: 0; text-align: left; flex-basis: 100%; }
}
/* A phone: the chat isn't in the page's flow (Details is); it opens as a
   full-width view of its own, with Back, over the rest (which is inert). */
@media (max-width: 900px) {
  body:not(.chat-full) #chat { display: none !important; }
  body.chat-full { overflow: hidden; }
  body.chat-full .inspector { position: fixed; inset: 0; z-index: 15; min-height: 0; height: 100vh; height: 100dvh; border: 0; }
  body.chat-full #side-tabs, body.chat-full #details { display: none !important; }
  body.chat-full .chat-head, body.chat-full .chat-log, body.chat-full .chat-compose { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (min-width: 901px) {
  #org-chat, #chat-back { display: none !important; }
  #i-back { display: none !important; }
  /* The schedules table fills the view, and scrolls under its own header. */
  #view-schedules:not([hidden]) { display: flex; flex-direction: column; }
  #view-schedules > * { flex: none; }
  #schedules { flex: 0 1 auto; min-height: 8rem; }
}

@media (max-width: 700px) {
  .top-row { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2) var(--sp-3); }
  .who { flex: 1 1 12rem; }
  .actions { margin-left: 0; }
  .actions > button { padding: 0.4375rem var(--sp-3); font-size: var(--fs-2); }
  .nav-row { padding-bottom: var(--sp-3); }
  .tabs { display: flex; width: 100%; }
  .tab { flex: 1 1 auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-1); }
  .table-view { padding: var(--sp-4); }
  .view-bar { padding: var(--sp-3) var(--sp-4); }
  .org-list { padding: var(--sp-3) var(--sp-4) var(--sp-6); }
  .tree-row { grid-template-columns: minmax(0, 1fr); }
  .tree-group { margin-left: var(--sp-2); padding-left: var(--sp-3); }
  .filters { padding: var(--sp-3); }
  .filters > label:not(.check) { flex: 1 1 calc(50% - var(--sp-2)); min-width: 8rem; max-width: none; }
  /* Nothing waiting: the board card says so; the bar keeps its room. */
  .needs-pill.calm { display: none; }
  .filters select, .filters input:not([type="checkbox"]) { font-size: var(--fs-3); }
  .ledger-item { padding: var(--sp-3) var(--sp-4); }
  .panel { padding: var(--sp-4); }
  .source { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .option { padding: var(--sp-3) var(--sp-4); }
  .ask h3 { font-size: var(--fs-4); }
  .inspector-head, .inspector-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  #i-held { margin-inline: var(--sp-4); }
  .signin { padding: var(--sp-5) var(--sp-4); place-items: start center; }
  .signin-card { padding: var(--sp-5); }
  .dialog-card { padding: var(--sp-5); }
  .kv { grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr) auto; }
}

/* Six views on a phone: two even rows of three, rather than one stray tab
   on a row of its own (one row fits from about 430px, the inbox's count
   included from about 460px). */
@media (max-width: 460px) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab { padding: var(--sp-1); }
}

@media (pointer: coarse) {
  .needs-pill, .actions > button { min-height: 44px; }
  /* Touch: every control a full 44px target. */
  .tab, .seg-btn, .canvas-controls button, .office button.small:not(.link) { min-height: 44px; }
}

@media (prefers-color-scheme: dark) {
  .dialog { background: rgb(0 0 0 / 0.6); }
}

/* Forced colours (Windows High Contrast) drop fills and shadows: the chosen
   card, the active view and what needs attention keep a visible mark. */
@media (forced-colors: active) {
  .node.selected:not(:focus-visible), .tree-row.selected:not(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
  .tab[aria-current="page"], .seg-btn[aria-pressed="true"] { border-color: Highlight; }
  .node.attention::before, .tree-row.attention::before, .ledger-item.waiting::before { background: CanvasText; }
  .edges path.ghost { stroke: CanvasText; }
  .node-flag, .needs-count { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .dialog { animation: none; }
  summary::before { transition: none; }
  /* Still "Thinking…", in words, with the dots at rest. */
  .chat-dots > span { animation: none; opacity: 0.6; }
}