/* ============================================================================
   PORTAL CHROME — enterprise proportions (Fluent family).
   Sentence case throughout. Hierarchy from weight and the neutral scale,
   never from capitals or letterspacing. 32px controls, 4px radius.
   Every value comes from tokens.css.
   ============================================================================ */

.shell { display: flex; min-height: 100vh; }

/* ---------- sidebar -------------------------------------------------------- */
.sidebar {
  flex: 0 0 var(--w-sidebar);
  position: sticky;
  top: var(--s0);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-right: var(--bw) solid var(--stroke-2);
  padding: var(--s5) var(--s3) var(--s4);
}

.brand { padding: var(--s0) var(--s3) var(--s5); }
.brand-name {
  margin: var(--s0);
  font-family: var(--ui-font-display);
  font-size: var(--ui-subtitle);
  line-height: var(--ui-subtitle-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.brand-sub {
  margin: var(--sh) var(--s0) var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-3);
}

.nav-scroll { flex: 1 1 auto; overflow-y: auto; }

/* group headings mirror the org board: each section of the portal sits under
   the division that owns its function, so the app teaches the board */
.nav-group {
  margin: var(--s4) var(--s3) var(--s1);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}
.nav-group:first-child { margin-top: var(--s0); }
.nav-group .div-no { font-weight: var(--w-regular); color: var(--fg-4); }

.nav { list-style: none; margin: var(--s0); padding: var(--s0); }
.nav li { margin-bottom: var(--sh); }
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--ctrl-h);
  padding: var(--s1) var(--s3);
  border-left: var(--bw-accent) solid transparent;
  border-radius: var(--radius);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  color: var(--fg-1);
  text-decoration: none;
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active {
  background: var(--brand-wash);
  border-left-color: var(--brand);
  color: var(--brand);
  font-weight: var(--w-semibold);
}
.nav-item.soon {
  color: var(--fg-4);
  cursor: default;
}
.nav-item.soon:hover { background: none; }
.nav-item.soon em {
  font-style: normal;
  font-size: var(--ui-caption);
  color: var(--fg-4);
}

.sidebar-tail { margin-top: auto; }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--ctrl-h);
  padding: var(--s1) var(--s3);
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--fg-2);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--fg-1); }
.theme-toggle:focus-visible { outline: var(--sh) solid var(--brand); outline-offset: var(--sh); }

.sidebar-foot {
  margin: var(--s3) var(--s3) var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-4);
}

/* icons -------------------------------------------------------------------- */
.icon { width: var(--s4); height: var(--s4); flex: none; display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
:root:not([data-theme="dark"]) .icon-sun { display: none; }

/* ---------- content -------------------------------------------------------- */
.content {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: var(--bw) solid var(--stroke-2);
  background: var(--bg-1);
}
.masthead h1 {
  margin: var(--s0);
  font-family: var(--ui-font-display);
  font-size: var(--ui-title);
  line-height: var(--ui-title-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.masthead .sub {
  margin: var(--sh) var(--s0) var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-3);
}

/* ---------- zoom controls -------------------------------------------------- */
.zoombar {
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.zbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  height: var(--ctrl-h);
  min-width: var(--ctrl-h);
  padding: var(--s0) var(--ctrl-px);
  border: var(--bw) solid var(--stroke-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  cursor: pointer;
}
.zbtn:hover { background: var(--bg-hover); }
.zbtn:focus-visible { outline: var(--sh) solid var(--brand); outline-offset: var(--sh); }
.zbtn.on {
  background: var(--brand-wash);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: var(--w-semibold);
}
.zbtn.icon-only { padding: var(--s0); }
.zsep { width: var(--bw); height: var(--s5); background: var(--stroke-1); margin: var(--s0) var(--s2); }
.zlevel {
  min-width: var(--w-zlevel);
  text-align: center;
  font-size: var(--ui-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}

/* ---------- views ----------------------------------------------------------- */
.view { flex: 1 1 auto; min-height: 0; }
.scroller { overflow-y: auto; background: var(--bg-3); }
.page-pad { padding: var(--s5) var(--s6) var(--s10); max-width: 1100px; }

.card {
  margin-bottom: var(--s5);
  border: var(--bw) solid var(--stroke-2);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  padding: var(--s4) var(--s5) var(--s5);
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--bw) solid var(--stroke-2);
}
.card-title {
  margin: var(--s0);
  font-family: var(--ui-font-display);
  font-size: var(--ui-subtitle);
  line-height: var(--ui-subtitle-lh);
  font-weight: var(--w-semibold);
}
.card-note { font-size: var(--ui-caption); color: var(--fg-3); }
.card-lead { margin: var(--s0) var(--s0) var(--s3); color: var(--fg-2); }
.card-foot { margin: var(--s3) var(--s0) var(--s0); font-size: var(--ui-caption);
             line-height: var(--ui-caption-lh); color: var(--fg-3); }
.link { color: var(--brand); }

.items { display: flex; flex-direction: column; }
.item {
  padding: var(--s3) var(--s0);
  border-bottom: var(--bw) solid var(--stroke-2);
}
.item:last-child { border-bottom: none; padding-bottom: var(--s0); }
.item-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s1);
}
.item-title {
  margin: var(--s0);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  font-weight: var(--w-semibold);
}
.item-detail { margin: var(--s0) var(--s0) var(--s2); color: var(--fg-2); }
.item-unblocks { margin: var(--s0) var(--s0) var(--s1); color: var(--fg-2); }
.item-unblocks .lbl {
  display: inline-block;
  min-width: 5.5rem;
  font-size: var(--ui-caption);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}
.item-source {
  margin: var(--s1) var(--s0) var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-4);
}

.chip {
  flex: none;
  padding: var(--sh) var(--s2);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  white-space: nowrap;
}
.chip-gate    { background: var(--status-open-bg); color: var(--status-open-fg); }
.chip-ruling  { background: var(--brand-wash);     color: var(--brand); }
.chip-decision{ background: var(--brand-wash);     color: var(--brand); }

.stats { display: flex; gap: var(--s6); flex-wrap: wrap; }
.stat { min-width: 6rem; }
.stat-n {
  margin: var(--s0);
  font-family: var(--ui-font-display);
  font-size: var(--ui-display);
  line-height: var(--ui-display-lh);
  font-weight: var(--w-semibold);
}
.stat-l { margin: var(--s0); font-size: var(--ui-body); color: var(--fg-2); }
.stat-note { margin: var(--s0); font-size: var(--ui-caption); color: var(--fg-4); }

/* ---------- hats ------------------------------------------------------------ */
.hats-div {
  margin: var(--s6) var(--s0) var(--s3);
  font-family: var(--ui-font-display);
  font-size: var(--ui-subtitle);
  line-height: var(--ui-subtitle-lh);
  font-weight: var(--w-semibold);
}
.hats-div:first-child { margin-top: var(--s0); }
.hats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s3);
}
.hat {
  display: flex;
  border: var(--bw) solid var(--stroke-2);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  overflow: hidden;
}
/* .hat-bar itself is declared once, below, in the summary-row-companions
   block — it is the disc-sum colour swatch (hats.js), not a full-height card
   bar (gate cleanup, 2026-07-25: a second, later rule had silently overridden
   this one; reconciled to the single rule that actually matches its one use). */
.hat-body { padding: var(--s3) var(--s4) var(--s4); flex: 1 1 auto; }
.hat-where {
  display: block;
  margin: var(--s0) var(--s0) var(--s2);
  padding: var(--s0);
  border: none;
  background: none;
  text-align: left;
  color: var(--fg-3);
  font-family: var(--ui-font);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  cursor: pointer;
}
.hat-where:hover { color: var(--brand); text-decoration: underline; }
.hat-vfp {
  margin: var(--s0) var(--s0) var(--s2);
  padding-left: var(--s3);
  border-left: var(--bw-accent) solid var(--brand);
  color: var(--fg-1);
}
.hat-fn { margin: var(--s0) var(--s0) var(--s1); color: var(--fg-2); }
.hat-skills {
  margin: var(--s0) var(--s0) var(--s3);
  color: var(--fg-3);
  font-style: italic;
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
}
.hat-open {
  height: var(--ctrl-h);
  padding: var(--s0) var(--ctrl-px);
  border: var(--bw) solid var(--stroke-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  cursor: pointer;
}
.hat-open:hover { background: var(--bg-hover); }

.search {
  height: var(--ctrl-h);
  width: 22rem;
  max-width: 50vw;
  padding: var(--s0) var(--s3);
  border: var(--bw) solid var(--stroke-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
}
.search:focus-visible { outline: var(--sh) solid var(--brand); outline-offset: var(--sh); }
.empty { color: var(--fg-3); }

.nav-where {
  display: block;
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  font-weight: var(--w-regular);
  color: var(--fg-4);
}
.nav-item { flex-direction: column; align-items: flex-start; gap: var(--s0); }
.nav-item.active .nav-where { color: var(--brand); }

/* ---------- training ------------------------------------------------------- */
.program { }
.prog { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.prog-bar {
  flex: 1 1 auto; height: var(--s2);
  border-radius: var(--r-pill);
  background: var(--bg-3);
  overflow: hidden;
}
.prog-fill { height: 100%; background: var(--brand); }
.prog-n { flex: none; font-size: var(--ui-caption); color: var(--fg-3); }

.target-block { margin: var(--s3) var(--s0); }
.block-label {
  margin: var(--s0) var(--s0) var(--s1);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}
.block-text { margin: var(--s0); color: var(--fg-2); }
.program-note {
  margin: var(--s0) var(--s0) var(--s3);
  padding: var(--s2) var(--s3);
  border-left: var(--bw-accent) solid var(--stroke-1);
  background: var(--bg-2);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-3);
}
.program-toggle { margin-top: var(--s2); }
.target-group { margin-top: var(--s4); }

.target {
  padding: var(--s2) var(--s0) var(--s2) var(--s3);
  border-left: var(--bw-accent) solid var(--stroke-2);
  border-bottom: var(--bw) solid var(--stroke-2);
}
.target:last-child { border-bottom: none; }
.target.status-certified { border-left-color: var(--brand); }
.target.status-gated     { border-left-color: var(--status-open-fg); }
.target.status-in-force  { border-left-color: var(--brand); }
.target-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s1);
}
.target-no {
  font-family: var(--ui-mono);
  font-size: var(--ui-caption);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}
.target-text { margin: var(--s0); color: var(--fg-1); }
.target-note {
  margin: var(--s1) var(--s0) var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-4);
}
.chip-certified { background: var(--brand-wash); color: var(--brand); }
.chip-gated     { background: var(--status-open-bg); color: var(--status-open-fg); }
.chip-in-force  { background: var(--brand-wash); color: var(--brand); }
.chip-na        { background: var(--bg-2); color: var(--fg-4); }

/* ---------- the canvas viewport -------------------------------------------- */
.viewport {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--s5);
  background: var(--bg-3);
  cursor: grab;
}
.viewport.dragging { cursor: grabbing; user-select: none; }
.canvas { position: relative; }
.canvas > .board { transform-origin: top left; box-shadow: var(--shadow-pop); }

/* ---------- detail panel ---------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 20; }
.panel {
  position: fixed;
  top: var(--s0); right: var(--s0); bottom: var(--s0);
  width: min(94vw, var(--w-panel));
  overflow-y: auto;
  background: var(--bg-1);
  box-shadow: var(--shadow-panel);
  z-index: 21;
}
.panel-accent { height: var(--s1); }
.panel-inner { padding: var(--s5) var(--s6) var(--s10); }

.closebtn {
  position: absolute;
  top: var(--s3); right: var(--s4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctrl-h);
  height: var(--ctrl-h);
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--fg-3);
  cursor: pointer;
}
.closebtn:hover { background: var(--bg-hover); color: var(--fg-1); }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s3);
  padding: var(--s0);
  border: none;
  background: none;
  color: var(--brand);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  cursor: pointer;
}
.crumb:hover { text-decoration: underline; }

.p-kicker {
  margin: var(--s0) var(--s0) var(--s1);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-3);
}
.p-title {
  margin: var(--s0) var(--s0) var(--s1);
  font-family: var(--ui-font-display);
  font-size: var(--ui-title);
  line-height: var(--ui-title-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.p-sub {
  margin: var(--s0) var(--s0) var(--s5);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  color: var(--fg-3);
}
.p-sect {
  margin: var(--s6) var(--s0) var(--s2);
  padding-bottom: var(--s1);
  border-bottom: var(--bw) solid var(--stroke-2);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}
.p-body {
  margin: var(--s0) var(--s0) var(--s2);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  color: var(--fg-1);
}
.p-vfp {
  padding: var(--s3) var(--s4);
  border-left: var(--bw-accent) solid var(--brand);
  border-radius: var(--s0) var(--radius) var(--radius) var(--s0);
  background: var(--brand-wash);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  color: var(--fg-1);
}
.p-list { list-style: none; margin: var(--s0); padding: var(--s0); }
.p-list li {
  padding: var(--s2) var(--s0);
  border-bottom: var(--bw) solid var(--stroke-2);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  color: var(--fg-2);
}
.p-list li:last-child { border-bottom: none; }
.p-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: calc(100% + var(--s4));
  margin: 0 calc(-1 * var(--s2));
  padding: var(--s1) var(--s2);
  border: none;
  border-radius: var(--radius);
  background: none;
  text-align: left;
  color: var(--fg-1);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  cursor: pointer;
}
.p-row:hover { background: var(--bg-hover); }
.p-row:hover .t { color: var(--brand); text-decoration: underline; }
.p-row .t { font-weight: var(--w-medium); }
.p-skills { color: var(--fg-2); font-style: italic; }

.p-basis {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  background: var(--bg-2);
  border: var(--bw) solid var(--stroke-2);
  color: var(--fg-2);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
}
.p-basis .lbl {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}

/* ---------- communication-line diagram ------------------------------------
   The department as a node, its despatches drawn as flows in and out — source's
   three-basket line made visible rather than listed. Every line stays verbatim. */
.comm-diagram { margin-top: var(--s2); }

.comm-group { position: relative; padding-left: var(--s5); }
.comm-group::before {           /* the spine */
  content: "";
  position: absolute;
  left: var(--s2);
  top: var(--s1);
  bottom: var(--s1);
  border-left: var(--bw) solid var(--stroke-1);
}
.comm-label {
  margin: var(--s0) var(--s0) var(--s1);
  margin-left: calc(-1 * var(--s5));
  padding-left: var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}
.comm-item {
  position: relative;
  margin-bottom: var(--s2);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  color: var(--fg-2);
}
.comm-item::before {            /* the tick joining the spine */
  content: "";
  position: absolute;
  left: calc(-1 * var(--s3));
  top: var(--s2);
  width: var(--s2);
  border-top: var(--bw) solid var(--stroke-1);
}

.comm-node {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s2) var(--s0);
  padding: var(--s2) var(--s3);
  border: var(--bw) solid var(--brand);
  border-left-width: var(--bw-accent);
  border-radius: var(--radius);
  background: var(--brand-wash);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.comm-arrow {
  display: block;
  margin-left: var(--s2);
  color: var(--fg-4);
}
.comm-foot {
  margin: var(--s2) var(--s0) var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-4);
}

.badge {
  display: inline-block;
  padding: var(--sh) var(--s2);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  white-space: nowrap;
}
.badge.open { color: var(--status-open-fg); background: var(--status-open-bg); }

.gate {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: var(--bw) solid var(--stroke-2);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
}
.gate strong { color: var(--fg-1); font-weight: var(--w-semibold); }

.assign-btn {
  margin-top: var(--s3);
  height: var(--ctrl-h);
  padding: var(--s0) var(--ctrl-px);
  border: var(--bw) solid var(--stroke-1);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--fg-4);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
}
.assign-btn[disabled] { cursor: not-allowed; }

/* ---------- narrow --------------------------------------------------------- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: static;
    flex: none;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: var(--bw) solid var(--stroke-2);
  }
  .content { height: auto; }
}

/* ---------- People: post, unit, outward title ------------------------------
   App vocabulary only — this is portal chrome, never the chart's face.      */
.person { }
.p-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.p-name {
  margin: var(--s0);
  font-family: var(--ui-font-display);
  font-size: var(--ui-subtitle);
  line-height: var(--ui-subtitle-lh);
  font-weight: var(--w-semibold);
}
.p-title {
  margin: var(--sh) var(--s0) var(--s0);
  color: var(--fg-2);
  font-size: var(--ui-body);
}
.p-title-state {
  margin-left: var(--s2);
  padding: 0 var(--s2);
  border-radius: var(--radius);
  font-size: var(--ui-caption);
  vertical-align: baseline;
}
.p-title-state.proposed { background: var(--status-open-bg); color: var(--status-open-fg); }
.p-title-state.approved { background: var(--brand-wash);     color: var(--brand); }

.p-counts { display: flex; align-items: center; gap: var(--s4); }
.chip-human     { background: var(--brand-wash); color: var(--brand); }
.chip-assistant { background: var(--bg-2);       color: var(--fg-3); }
.p-count { text-align: right; }
.pc-n {
  display: block;
  font-family: var(--ui-font-display);
  font-size: var(--ui-subtitle);
  line-height: var(--ui-subtitle-lh);
  font-weight: var(--w-semibold);
}
.pc-l { display: block; font-size: var(--ui-caption); color: var(--fg-3); }

.p-note { margin: var(--s3) var(--s0) var(--s0); color: var(--fg-2); font-size: var(--ui-caption); }
.p-empty { margin: var(--s3) var(--s0) var(--s0); color: var(--fg-3); font-size: var(--ui-caption); }

.p-units { display: flex; flex-wrap: wrap; gap: var(--s2); }
.unit-chip {
  padding: var(--sh) var(--s2);
  border: var(--bw) solid var(--stroke-2);
  border-radius: var(--radius);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
}
.unit-chip.is-held { border-style: dashed; color: var(--fg-3); }
.unit-chip .uc-role { font-weight: var(--w-semibold); }
.unit-chip .uc-tag { margin-left: var(--s1); font-style: italic; color: var(--fg-4); }

.p-posts { margin-top: var(--s4); display: grid; gap: var(--s4); }
.p-div-h {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s0) var(--s0) var(--s1);
  font-size: var(--ui-caption);
  color: var(--fg-2);
  font-weight: var(--w-semibold);
}
.swatch {
  width: 0.75rem; height: 0.75rem;
  border: var(--bw) solid var(--stroke-2);
  flex: none;
}
.p-post-list { list-style: none; margin: var(--s0); padding: var(--s0); display: grid; gap: var(--sh); }
.p-post {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  width: 100%;
  border: none;
  background: none;
  padding: var(--sh) var(--s2);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
}
.p-post:hover { background: var(--bg-2); }
.p-post:focus-visible { outline: var(--bw-mark) solid var(--brand); }
.pp-title { font-weight: var(--w-semibold); }
.pp-where { color: var(--fg-3); font-size: var(--ui-caption); }
.pp-tag { margin-left: auto; color: var(--fg-4); font-size: var(--ui-caption); font-style: italic; }
.p-post-list li.is-held .pp-title { font-weight: var(--w-regular); color: var(--fg-2); }

/* the command channel inside the detail panel */
.badge.held { color: var(--fg-3); background: var(--bg-2); font-style: italic; }
.unit-head-panel {
  border: var(--bw) solid var(--stroke-2);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
}
.unit-head-panel.is-held { border-style: dashed; }
.uhp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s0); }
.uhp-role { font-weight: var(--w-semibold); font-size: var(--ui-body); }
.uhp-note { margin: var(--s2) var(--s0) var(--s0); color: var(--fg-3); font-size: var(--ui-caption); line-height: var(--ui-caption-lh); }
.gate-note { margin: var(--s2) var(--s0) var(--s0); color: var(--fg-3); font-size: var(--ui-caption); line-height: var(--ui-caption-lh); }
.p-unit-groups { display: grid; gap: var(--s3); margin-top: var(--s4); }
.p-unit-group { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s3); align-items: start; }
.p-unit-label {
  margin: var(--sh) var(--s0) var(--s0);
  font-size: var(--ui-caption);
  color: var(--fg-3);
  text-align: right;
}

/* the board's find control, in the toolbar */
.bfind { width: 15rem; }

/* ---------- DISCLOSURE — summary first, detail on demand (2026-07-24) ------
   His correction, third repetition, now doctrine: every list collapses to
   identity lines. One row = one thing; detail exists only when asked for.  */
.disc-list { display: flex; flex-direction: column; }
.disc {
  border-bottom: var(--bw) solid var(--stroke-2);
}
.disc:last-child { border-bottom: none; }
.disc-sum {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 2.5rem;
  padding: var(--s2) var(--s2);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
}
.disc-sum::-webkit-details-marker { display: none; }
.disc-sum::before {
  content: "";
  flex: none;
  width: 0.5rem; height: 0.5rem;
  border-right: var(--bw) solid var(--fg-3);
  border-bottom: var(--bw) solid var(--fg-3);
  transform: rotate(-45deg);
  transition: transform 120ms ease-out;
  margin: 0 var(--s1);
}
.disc[open] > .disc-sum::before { transform: rotate(45deg); }
.disc-sum:hover { background: var(--bg-2); }
.disc-sum:focus-visible { outline: var(--bw-mark) solid var(--accent); outline-offset: calc(-1 * var(--bw-mark)); }
.disc-title { font-weight: var(--w-semibold); }
.disc-body { padding: var(--s1) var(--s2) var(--s4) calc(1rem + var(--s3)); }
.disc-nested { margin-top: var(--s3); border: var(--bw) solid var(--stroke-2); border-radius: var(--radius); }
.disc-nested > .disc-sum { min-height: 2.25rem; }
.disc-nested > .disc-body { padding-bottom: var(--s2); }

/* ============================================================================
   THE WRITE LAYER — login screen, buttons, dialogs, fields, toasts.
   STYLE-GUIDE.md §13 (Forms & interaction) is the source for this block.
   ============================================================================ */

/* ---------- login screen ---------------------------------------------------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
}
.login-card {
  width: min(92vw, 22rem);
  padding: var(--s6) var(--s6) var(--s8);
  border: var(--bw) solid var(--stroke-2);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: var(--shadow-pop);
}
.login-brand {
  margin: var(--s0) var(--s0) var(--s6);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-3);
  text-align: center;
}
.login-title {
  margin: var(--s0) var(--s0) var(--s5);
  font-family: var(--ui-font-display);
  font-size: var(--ui-title);
  line-height: var(--ui-title-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-1);
  text-align: center;
}
.login-form { display: flex; flex-direction: column; gap: var(--s4); }
.login-error {
  margin: var(--s0);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
}
.login-submit { width: 100%; }

/* ---------- sidebar signed-in state ------------------------------------------ */
.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s3);
  border-bottom: var(--bw) solid var(--stroke-2);
  margin-bottom: var(--s2);
}
.su-name {
  margin: var(--s0);
  font-size: var(--ui-body);
  font-weight: var(--w-medium);
  color: var(--fg-1);
}
.su-role {
  display: block;
  font-size: var(--ui-caption);
  font-weight: var(--w-regular);
  color: var(--fg-3);
}
.su-signout {
  flex: none;
  height: var(--ctrl-h);
  padding: var(--s0) var(--s2);
  border: none;
  background: none;
  color: var(--brand);
  font-family: var(--ui-font);
  font-size: var(--ui-caption);
  cursor: pointer;
}
.su-signout:hover { text-decoration: underline; }
.su-signout:focus-visible { outline: var(--sh) solid var(--brand); outline-offset: var(--sh); }

/* ---------- buttons — one hierarchy, three weights --------------------------
   primary: exactly one per dialog/context, the action it will actually take.
   secondary: the .zbtn look, for anything else that isn't destructive-free.
   subtle: text-only — Cancel, and other non-committing actions. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  height: var(--ctrl-h);
  padding: var(--s0) var(--ctrl-px);
  border-radius: var(--radius);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  cursor: pointer;
}
.btn:disabled { cursor: not-allowed; opacity: .6; }
.btn:focus-visible { outline: var(--sh) solid var(--brand); outline-offset: var(--sh); }
.btn-primary {
  border: var(--bw) solid var(--brand);
  background: var(--brand);
  color: var(--brand-fg);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-secondary {
  border: var(--bw) solid var(--stroke-1);
  background: var(--bg-1);
  color: var(--fg-1);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }
.btn-subtle {
  border: none;
  background: none;
  color: var(--fg-2);
}
.btn-subtle:hover:not(:disabled) { background: var(--bg-hover); }

/* ---------- fields ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field-label {
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  font-weight: var(--w-semibold);
  color: var(--fg-3);
}
.field input, .field textarea, .field select {
  padding: var(--s2) var(--s3);
  border: var(--bw) solid var(--stroke-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
}
.field input { height: var(--ctrl-h); }
.field textarea { min-height: var(--textarea-min-h); resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: var(--sh) solid var(--brand);
  outline-offset: var(--sh);
}
.field-error {
  margin: var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--danger);
}
.field.has-error input, .field.has-error textarea {
  border-color: var(--danger);
}

/* ---------- dialogs -----------------------------------------------------------
   Native <dialog> — Esc closes and focus is trapped for free. Every mutating
   control states what it will write before it writes it (STYLE-GUIDE §13):
   the .dlg-lead line names the field/value the primary button commits. */
.dlg {
  width: min(92vw, 30rem);
  padding: var(--s0);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  color: var(--fg-1);
  box-shadow: var(--shadow-pop);
}
.dlg::backdrop { background: var(--scrim); }
/* the compose dialog is wider than a plain form dialog — its Preview step
   holds a full-form despatch sheet (STYLE-GUIDE §13, "Preview step"), not
   just a column of fields. */
.dlg-compose { width: min(92vw, 40rem); }
.dlg-form { display: flex; flex-direction: column; padding: var(--s6); gap: var(--s4); }
.dlg-title {
  margin: var(--s0);
  font-family: var(--ui-font-display);
  font-size: var(--ui-title);
  line-height: var(--ui-title-lh);
  font-weight: var(--w-semibold);
}
.dlg-lead { margin: var(--s0); color: var(--fg-2); }
.dlg-body { display: flex; flex-direction: column; gap: var(--s4); }
.dlg-error {
  margin: var(--s0);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
}
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }

/* ---------- toasts --------------------------------------------------------------
   Quiet confirmation only — never where a decision is made. */
.toast-root {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-items: flex-end;
}
.toast {
  padding: var(--s2) var(--s4);
  border-radius: var(--radius);
  background: var(--fg-1);
  color: var(--bg-1);
  font-size: var(--ui-body);
  line-height: var(--ui-body-lh);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(var(--s2));
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.toast.show { opacity: 1; transform: translateY(0); }
/* --brand-fg checked against --danger in both themes (light: brand-fg #fff on
   danger #c42b1c ≈ unchanged; dark: brand-fg #14203a on danger #ff99a4 ≈ 8:1
   contrast) — reads correctly in both, so no new token needed (gate cleanup,
   2026-07-25). */
.toast-error { background: var(--danger); color: var(--brand-fg); }

/* ---------- Station: item actions & the Ruled group -------------------------- */
.item-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.item-actions-note {
  margin: var(--s2) var(--s0) var(--s0);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
  color: var(--fg-4);
}
.ruled-group { margin-top: var(--s3); border-top: var(--bw) solid var(--stroke-2); padding-top: var(--s2); }
.ruled-row-status { font-style: italic; color: var(--fg-3); }
.ruling-text {
  margin: var(--s2) var(--s0) var(--s0);
  padding: var(--s2) var(--s3);
  border-left: var(--bw-accent) solid var(--brand);
  background: var(--brand-wash);
  color: var(--fg-1);
}

/* ---------- People: title actions -------------------------------------------- */
.p-title-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* ---------- Training: target status actions ---------------------------------- */
.target-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* ---------- Despatches (BUILD-PLAN-despatches.md, Phase 4) ------------------- */
.compose-slot:empty { display: none; }

.disp-where { color: var(--fg-3); font-size: var(--ui-caption); white-space: nowrap; }
.disp-age {
  margin-left: auto;
  flex: none;
  color: var(--fg-4);
  font-size: var(--ui-caption);
  white-space: nowrap;
}
/* "handled daily": a quiet marker once a despatch has sat a full day in its
   current state — no red, no alarm (BUILD-PLAN-despatches.md, UI). */
.disp-age.is-aged { color: var(--status-open-fg); }

/* The two terminal states, side by side and deliberately NOT alike (Marlowe's
   ruling, 2026-07-25, condition (f)): a close is the receiver's word about the
   work and stays in the neutral chip every other completed thing uses; a
   withdrawal is the originator's word about his own paper and takes the
   status tint, so the eye separates them without a second accent colour being
   introduced. Declared as a pair so a change to one can never silently move
   the other. */
.chip-closed    { background: var(--bg-2);            color: var(--fg-3); }
.chip-withdrawn { background: var(--status-open-bg);  color: var(--status-open-fg); }

/* the Closed disclosure's own caption — one line, at the caption step */
.closed-note {
  margin: var(--s0) var(--s0) var(--s2);
  color: var(--fg-3);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
}

/* renderDespatch() — the one shared renderer (STYLE-GUIDE §13.1): the printed
   sheet itself is chart vocabulary (chart.css, .despatch-sheet); the subject
   and class chip have no home on source's own form, so they print as an app-
   vocabulary caption strip above the sheet instead of being invented onto it. */
.despatch-render { display: flex; flex-direction: column; gap: var(--s2); }
.despatch-meta { display: flex; align-items: baseline; gap: var(--s2); }
.despatch-meta-subject { font-weight: var(--w-semibold); color: var(--fg-1); }
.despatch-events { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.event-row {
  margin: var(--s0);
  padding: var(--s1) var(--s0);
  border-bottom: var(--bw) solid var(--stroke-2);
  font-size: var(--ui-caption);
  line-height: var(--ui-caption-lh);
}
.event-row:last-child { border-bottom: none; }
.event-kind { font-weight: var(--w-semibold); color: var(--fg-1); margin-right: var(--s2); }
.event-by { color: var(--fg-4); }
.event-note {
  margin: var(--s1) var(--s0) var(--s0);
  padding: var(--s2) var(--s3);
  border-left: var(--bw-accent) solid var(--brand);
  background: var(--brand-wash);
  color: var(--fg-1);
  font-size: var(--ui-body);
}
.reply-block {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--bw) solid var(--stroke-2);
}

/* the addressee/from post picker: a filter box over a native multi-row
   select (built-in typeahead, optgroups by division/department) */
.picker-filter { width: 100%; margin-bottom: var(--s2); }
.picker-select {
  width: 100%;
  padding: var(--s1);
  border: var(--bw) solid var(--stroke-1);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--ui-font);
  font-size: var(--ui-body);
}
.picker-select:focus-visible { outline: var(--sh) solid var(--brand); outline-offset: var(--sh); }
/* the reachability annotation (Marlowe's ruling, 2026-07-25): the option still
   selects like any other — the tech does not forbid despatching to it — it
   simply reads quieter. The words carry the meaning; this colour only keeps
   the annotation from shouting, and nothing depends on it rendering (a browser
   that ignores option colour still shows the text). */
.picker-select option.is-unreachable { color: var(--fg-3); }

/* summary-row companions */
.p-title-sum { color: var(--fg-2); }
.p-count-sum { margin-left: auto; color: var(--fg-3); font-size: var(--ui-caption); white-space: nowrap; }
/* the ONE .hat-bar rule (gate cleanup, 2026-07-25 — was two colliding rules,
   the first stale after the disclosure-doctrine refactor moved hats.js's
   colour swatch into this one-line disc-sum row): a small colour swatch,
   width == --s1 (matches the original card-accent-bar era), height == --s5
   so it reads at a glance inside the text row, radius == --radius-sm. */
.hat-bar { flex: none; width: var(--s1); height: var(--s5); border-radius: var(--radius-sm); }
.hat-where-sum { color: var(--fg-3); font-size: var(--ui-caption); }
.disc .badge { margin-left: auto; }
.disc .chip { flex: none; }
.disc-sum .prog { margin-left: auto; width: 10rem; }