/* ============================================================================
   THE BOARD FACE — a reproduction of the source chart's form.
   Printed matter: fixed width, square corners, hairlines, flat, no shadows.

   Structure per division, in source's own slots:
     banner → DIVISION N → three-across department header band (THE FLOW LINE)
     → division source function → the lead line → the department blocks with
     their certified functions → Valuable Final Product.

   The coloured body is a SEVEN-COLUMN GRID with shared rows, so every band
   sits on one common baseline across all divisions, as source aligns them.
   The department band is the product's CYCLE OF ACTION running horizontally,
   21 → 18. The vertical axis is COMMAND. Nothing that flows is ever stacked.

   Every value here comes from tokens.css. No raw values.
   ============================================================================ */

.board {
  width: var(--board-w);
  padding: var(--s6) var(--board-padr) var(--s6) var(--board-padl);
  font-family: var(--face-text);
  position: relative;

  /* THE BOARD IS PRINTED MATTER — it keeps its own light values in every
     theme. Redefining the tokens here locks the whole chart to paper, so dark
     mode dresses the portal around it and never alters source's colours or
     the page they are printed on. */
  --ink:       var(--sheet-ink);
  --ink-soft:  var(--sheet-ink-soft);
  --ink-faint: var(--sheet-ink-faint);
  --ink-hair:  var(--sheet-ink-hair);
  --surface:   var(--paper);
  background: var(--surface);
  color: var(--ink);
}

/* DARK THEME — his ruling, 2026-07-24: "I do not want the colors of the
   divisions to change, but the rest can take on normal dark mode settings."
   So the SHEET goes properly dark (no brightness filter — the filter forced a
   composited layer and blurred the type), while every division-coloured
   surface — the banners and the tinted column bodies — keeps its printed
   colours and its printed dark ink. The `.tinted` class marks those surfaces,
   and they simply re-lock the printed values. */
:root[data-theme="dark"] .board {
  --surface:   var(--sheet-surface-dark);
  --ink:       var(--sheet-ink-dark);
  --ink-soft:  var(--sheet-ink-soft-dark);
  --ink-faint: var(--sheet-ink-faint-dark);
  --rule:      var(--sheet-rule-dark);
  --hair-c:    var(--sheet-hair-c-dark);
  --chart-hover: var(--sheet-hover-dark);
}
:root[data-theme="dark"] .board .tinted {
  --ink:       var(--sheet-ink);
  --ink-soft:  var(--sheet-ink-soft);
  --ink-faint: var(--sheet-ink-faint);
  --rule:      var(--sheet-rule);
  --hair-c:    var(--sheet-hair-c);
  --chart-hover: var(--sheet-hover);
  color: var(--ink);
}

/* ---------- the apex: source's asymmetric form ---------------------------- */
.apex { position: relative; height: var(--h-apex); }

.apex-box {
  position: absolute;
  border: var(--bw-rule) solid var(--rule);
  background: var(--surface);
  font-family: var(--face-display);
  text-align: center;
  padding: var(--s1) var(--s4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sh);
}
.apex-box .ab-title {
  font-size: var(--ft-3);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
}
.apex-box .ab-holder {
  font-size: var(--ft-2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.apex-box .ab-holder.is-held { font-style: italic; }
.apex-box.exec .ab-title { font-size: var(--ft-2); }
.apex-box.exec { border-width: var(--bw-hair); }

/* connector rules — absolutely-positioned hairlines */
.rule-v { position: absolute; width: var(--s0); border-left: var(--bw-rule) solid var(--rule); }
.rule-h { position: absolute; height: var(--s0); border-top:  var(--bw-rule) solid var(--rule); }

/* ---------- the seven-column grid with shared rows ------------------------ */
.columns {
  display: grid;
  grid-template-columns: repeat(7, var(--col-w));
  gap: var(--s0) var(--col-gap);
}
.g-banner { grid-row: 1; }
.g-divno  { grid-row: 2; }
.g-band   { grid-row: 3; }
.g-intro  { grid-row: 4; padding: var(--s4) var(--s4) var(--s2); }
.g-depts  { grid-row: 5; padding: var(--s3) var(--s4) var(--s4); }
.g-vfp    { grid-row: 6; }

/* --- the division banner -------------------------------------------------- */
.col-banner {
  display: block;
  width: 100%;
  border: none;
  padding: var(--s2) var(--s2) var(--s1);
  text-align: center;
  font-family: var(--face-display);
  font-size: var(--ft-7);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ls-slight);
  cursor: pointer;
}
.col-banner .sub {
  display: block;
  margin-top: var(--sh);
  font-size: var(--ft-0);
  font-weight: 600;
  letter-spacing: var(--ls-banner);
  padding-left: var(--ls-banner);   /* optically centre the letterspaced word */
}
/* offset so the Founder/Owner's rule passes to Department 21 */
.col-banner.inset {
  margin-left: var(--inset-apexdiv);
  width: calc(100% - var(--inset-apexdiv));
}
.col-banner:hover { filter: brightness(1.06); }
.col-banner:focus-visible { outline: var(--bw-mark) solid var(--accent); outline-offset: calc(-1 * var(--bw-mark)); }

.col-divno {
  text-align: center;
  padding: var(--s1) var(--s0) var(--s2);
}
.divno-n {
  display: block;
  font-family: var(--face-display);
  font-size: var(--ft-4);
  font-weight: 700;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
}

/* --- the command channel on the board's top layers (his direction, 2026-07-24):
   TITLE listed, PERSON beneath — on the division layer, in every department
   band cell, and as nameplates under the apex boxes. The two lines share one
   structure everywhere so they align horizontally across the whole board.
   ↑ marks held-from-above. ------------------------------------------------- */
.divno-head {
  /* a white nameplate on the coloured column (his direction, 2026-07-25) —
     printed paper in every theme, so the name reads against any tint */
  display: inline-block;
  margin-top: var(--s1);
  padding: var(--s1) var(--s3);
  background: var(--paper);
  border: var(--bw-hair) solid var(--hair-c);
  font-family: var(--face-text);
  font-size: var(--ft-1);
  line-height: var(--lh-snug);
  text-transform: none;
  letter-spacing: normal;
}
.divno-head .dh-role { display: block; font-weight: 700; }
.divno-head .dh-holder { display: block; margin-top: var(--sh); font-weight: 600; color: var(--ink); }
.divno-head.is-held .dh-holder { font-style: italic; }

.dc-head {
  display: block;
  margin-top: auto;              /* anchor to the cell bottom: one shared line
                                    across all 21 cells of the band row */
  margin-bottom: calc(-1 * var(--s2));   /* sit flush to the cell's bottom edge */
  padding: var(--s1) var(--s1) var(--s2);
  background: var(--paper);
  border-top: var(--bw-hair) solid var(--hair-c);
  font-size: var(--ft-1);
  line-height: var(--lh-tight);
}
.dc-head .dch-role { display: block; font-weight: 700; }
.dc-head .dch-holder { display: block; margin-top: var(--sh); font-weight: 600; color: var(--ink); }
.dc-head.is-held .dch-holder { font-style: italic; }

/* --- the department header band: THE FLOW LINE, three across -------------- */
.dept-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--bw-hair) solid var(--hair-c);
  border-bottom: var(--bw-hair) solid var(--hair-c);
}
.dept-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sh);
  border: none;
  border-right: var(--bw-hair) solid var(--hair-c);
  background: none;
  color: inherit;
  padding: var(--s2) var(--s1);
  text-align: center;
  font-family: var(--face-text);
  cursor: pointer;
}
.dept-cell:last-child { border-right: none; }
.dept-cell:hover { background: var(--chart-hover); }
.dept-cell:hover .dc-name { text-decoration: underline; }
.dept-cell:focus-visible { outline: var(--bw-rule) solid var(--accent); outline-offset: calc(-1 * var(--bw-rule)); }

.dc-theme {
  font-family: var(--face-display);
  font-size: var(--ft-0);
  font-weight: 700;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-decoration: underline;
  text-underline-offset: var(--bw-mark);
  white-space: nowrap;
}
.dc-no {
  font-family: var(--face-display);
  font-size: var(--ft-0);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}
.dc-name {
  margin-top: var(--sh);
  font-size: var(--ft-1);
  font-weight: 700;
  line-height: var(--lh-snug);
}
/* long names (the Div 7 offices, Records/Assets & Reserves) drop one step —
   to the floor, never below — so they don't force the band row taller */
.dc-name.long { font-size: var(--ft-0); line-height: var(--lh-tight); }

/* --- column body: the division's source function, then its departments ---- */
.div-intro {
  margin: var(--s0) var(--s0) var(--s3);
  font-size: var(--ft-1);
  line-height: var(--lh-relaxed);
}

/* Departments in the column body read as CLEAR SECTIONS (his note, 2026-07-24:
   not prominent enough, not enough space) — a heavier heading with a rule
   above it, and real air between blocks. */
.dept-block { margin: var(--s0) var(--s0) var(--s7); }
.dept-block + .dept-block {
  border-top: var(--bw-hair) solid var(--hair-c);
  padding-top: var(--s4);
}
.dept-block h3 { margin: var(--s0) var(--s0) var(--s2); }

.dept-link {
  display: block;
  width: calc(100% + var(--s2));
  margin-left: calc(-1 * var(--s1));
  border: none;
  background: none;
  padding: var(--sh) var(--s1);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: var(--face-display);
  font-size: var(--ft-3);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-slight);
}
.dept-link:hover { background: var(--chart-hover); text-decoration: underline; }
.dept-link:focus-visible { outline: var(--bw-rule) solid var(--accent); outline-offset: var(--sh); }

.fn-list {
  margin: var(--s0);
  padding-left: var(--s4);
  list-style: disc;
}
.fn-list li {
  margin: var(--s0) var(--s0) var(--s1);
  font-size: var(--ft-1);
  line-height: var(--lh-relaxed);
}
.fn-list li::marker { color: var(--ink-faint); }

/* --- the posts face: each post, its holder, its function -------------------
   Each post is a grouped block: title and holder on one line, the function
   hanging beneath a hairline indent — the same hanging structure the panel
   uses, so a post reads as one object, not three stacked lines.            */
.post-list { list-style: none; padding-left: var(--s0); }
.post-list li { margin: var(--s0) var(--s0) var(--s2); }
.post-line {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: var(--s0);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: var(--face-text);
  font-size: var(--ft-1);
  line-height: var(--lh-normal);
}
/* His direction 2026-07-24: the holder is PROMINENT, directly beneath the title.
   Title, then who wears it, then the function — the post reads top-down as one
   object: what it is, who holds it, what is done. */
.post-title {
  display: block;
  font-family: var(--face-display);
  font-size: var(--ft-1);
  font-weight: 700;
  letter-spacing: var(--ls-slight);
}
.post-line:hover .post-title { text-decoration: underline; }
.post-holder {
  display: block;
  margin-top: var(--sh);
  font-family: var(--face-display);
  font-size: var(--ft-1);
  font-weight: 600;
  color: var(--ink);
}
.post-holder.open {
  color: var(--ink);
  letter-spacing: var(--ls-wide);
}
/* held from above — a named senior answers for it; the arrow and italic mark
   it, never a smaller or lighter face (his correction, 2026-07-24) */
.post-holder.is-held { color: var(--ink); font-style: italic; }
.post-holder.is-held::before { content: "\2191\00a0"; font-style: normal; }

/* the unit's head: the command channel, posts face only */
.unit-head {
  margin: var(--sh) var(--s0) var(--s2);
  padding: var(--sh) var(--s2);
  border-left: var(--bw-mark) solid currentColor;
  font-size: var(--ft-0);
  line-height: var(--lh-snug);
}
.unit-head .uh-role {
  font-family: var(--face-display);
  font-weight: 700;
  letter-spacing: var(--ls-slight);
}
.unit-head .uh-holder { margin-left: var(--s1); color: var(--ink-soft); }
.unit-head .uh-tag {
  margin-left: var(--s1);
  font-style: italic;
  color: var(--ink-faint);
}
.unit-head.is-held { border-left-style: dotted; }
.post-fn {
  display: block;
  margin-top: var(--sh);
  padding-left: var(--s3);
  border-left: var(--bw-hair) solid var(--hair-c);
  line-height: var(--lh-normal);
}

/* --- find your place: matches lit, the rest recede ------------------------ */
.board.finding .find-dim { opacity: .22; }
.board .find-hit {
  outline: var(--bw-rule) solid var(--accent);
  outline-offset: var(--s0);
}

/* --- the Valuable Final Product row (aligned across the board) ------------ */
.col-vfp {
  padding: var(--s3) var(--s4) var(--s4);
  border-top: var(--bw-hair) solid var(--hair-c);
}
.col-vfp .lbl {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--face-italic);
  font-style: italic;
  font-size: var(--ft-1);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.col-vfp .txt {
  display: block;
  font-family: var(--face-display);
  font-size: var(--ft-2);
  line-height: var(--lh-normal);
}

/* --- the company VFP footer bar ------------------------------------------ */
.board-footbar {
  margin-top: var(--s3);
  border: var(--bw-rule) solid var(--rule);
  padding: var(--s2) var(--s4);
  font-family: var(--face-display);
  font-size: var(--ft-1);
  font-weight: 700;
  line-height: var(--lh-normal);
  text-align: center;
}

/* --- the Posts face's disclosure: each department one closed line ---------
   (chart vocabulary: hairlines, square, printed ink — not the app's discs) */
.dept-disc { border-top: var(--bw-hair) solid var(--hair-c); }
.dept-disc:first-child { border-top: none; }
.dd-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s0);
  cursor: pointer;
  list-style: none;
}
.dd-sum::-webkit-details-marker { display: none; }
.dd-sum:hover { background: var(--chart-hover); }
.dd-name {
  font-family: var(--face-display);
  font-size: var(--ft-2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-slight);
}
.dept-disc[open] .dd-name { text-decoration: underline; }
.dd-holder {
  flex: none;
  font-family: var(--face-display);
  font-size: var(--ft-2);
  font-weight: 600;
  color: var(--ink);
}
.dd-holder.is-held { font-style: italic; }
.dept-disc > .post-list { padding: var(--s0) var(--s0) var(--s3) var(--s2); }

/* ============================================================================
   THE DESPATCH SHEET — printed matter, same as the board (Mr. Thompson,
   2026-07-25: "the view should match source"). A piece of paper, not an app
   card: square corners, hairlines, printed ink, flat.

   Form read directly from MAKH 05, "Organizations Communications System:
   Despatches" (pp.87-88 — the info/advice example, since this app has no
   "via" routing mechanic built): addressee post, then the originating post
   with the date at the right, then "Dear [addressee],", the message, and a
   signature. Source's own form carries NO subject line and shows
   "(complimentary close)," only as an unfilled blank for the sender's own
   words — this app has neither field, so neither is invented onto the sheet;
   the real `subject` (a shipped, pre-existing field) prints as an app-vocabulary
   caption ABOVE the sheet instead (see .despatch-meta, app.css).
   ============================================================================ */
.despatch-sheet {
  /* re-locked light values so the sheet prints the same in every theme,
     exactly the mechanism .board uses (below overrides for dark) — and, since
     2026-07-25, off the SAME --sheet-* tokens .board reads (tokens.css), not a
     second copy of the literals. */
  --ink:      var(--sheet-ink);
  --ink-soft: var(--sheet-ink-soft);
  --ink-hair: var(--sheet-ink-hair);
  --surface:  var(--paper);
  background: var(--surface);
  color: var(--ink);
  border: var(--bw-rule) solid var(--rule);
  border-radius: var(--r-chart);
  padding: var(--s6) var(--s6) var(--s5);
  font-family: var(--face-text);
}
:root[data-theme="dark"] .despatch-sheet {
  --surface:   var(--sheet-surface-dark);
  --ink:       var(--sheet-ink-dark);
  --ink-soft:  var(--sheet-ink-soft-dark);
  --rule:      var(--sheet-rule-dark);
}
.ds-address { padding-bottom: var(--s4); border-bottom: var(--bw-hair) solid var(--ink-hair); }
.ds-to, .ds-from {
  margin: var(--s0);
  font-family: var(--face-display);
  font-size: var(--ft-2);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.ds-fromrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.ds-date {
  flex: none;
  font-family: var(--face-text);
  font-size: var(--ft-1);
  color: var(--ink-soft);
  white-space: nowrap;
}
.ds-salutation {
  margin: var(--s5) var(--s0) var(--s3);
  font-size: var(--ft-1);
  line-height: var(--lh-normal);
}
.ds-body {
  margin: var(--s0) var(--s0) var(--s5);
  font-size: var(--ft-1);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
}
.ds-signoff {
  margin-left: 60%;
  padding-top: var(--s3);
  border-top: var(--bw-hair) solid var(--ink-hair);
  font-size: var(--ft-1);
}
.ds-sig-label { display: block; color: var(--ink-soft); }
.ds-sig-name { display: block; margin-top: var(--s3); font-family: var(--face-display); font-weight: 700; }