/* ============================================================================
   BOARD v2 — the seven-column org board, and its edit mode.

   LOADED LAST, AND IT TOUCHES NOTHING ELSE. `chart.css` is on the design
   harness's byte-identical list and is not edited here; the July chart's own
   rules still exist and still apply to the July renderer, which is parked.
   Board v2 reuses exactly one class name from it — `.col-banner`, so the
   harness's "does the app's green land on the chart's green?" measurement
   keeps measuring a real banner — and overrides what it needs on top.

   ── THE COLOUR LAW, AND THE ONE DECLARED EXCEPTION ─────────────────────────

   The portal's standing law (shell.css) is DIVISION COLOURS ARE IDENTITY,
   NEVER DATA: a 3px rail or a swatch beside a text label, never a fill.

   THE BOARD IS THE EXCEPTION, and it is his: "division colors as the column
   fills exactly as the MAKH reference shows — this is the one surface where
   the certified colors ARE the design; they are the board's own data."

   So the fill is source's colour, and the LEGIBILITY IS COMPUTED rather than
   hoped for: `boardv2.js` sets `--dv-fill` and `--dv-ink` per column from a
   WCAG luminance measurement, and nothing in this sheet sets a text colour on
   a coloured surface except `var(--dv-ink)`. The harness re-measures every
   column in a real browser, in both themes.

   ── BOTH THEMES ────────────────────────────────────────────────────────────

   The chart is printed matter: the seven colours DO NOT CHANGE between
   themes (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"). What
   changes is the sheet the columns sit on, and `chart.css` already re-locks
   that on `.board` for both themes. This sheet inherits it.
   ============================================================================ */

/* ---------- the sheet: responsive, not a fixed-width canvas --------------- */
.board.board-v2 {
  width: auto;
  min-width: 0;
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  font-family: var(--ui-font, var(--face-text));
}

#view-board:has(.board-v2),
.view.viewport:has(.board-v2) { overflow: auto; }

.board-v2 * { box-sizing: border-box; }

/* ---------- the board names itself, for the wall ------------------------- */
.bv2-title {
  margin: 0 0 14px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- THE EXECUTIVE LAYER — blue, and drawn as the chart draws it ----
   Division 7's own colour fills every box and every connector; the ink on it
   is measured in boardv2.js exactly as a column's is. The horizontal positions
   come from the source image (see boardv2.js); the vertical ones are these
   anchors, and both the boxes and the lines read the same variables, so a box
   and the line that reaches it cannot come apart. */
/* ── THE BOXES SIZE TO THEIR CONTENT, AND THE LINES FOLLOW ─────────────────
   His ruling on the defect he photographed, 2026-08-07: nothing overflows, in
   either theme, in view AND edit mode — and where the chart-fraction geometry
   conflicts with a content-sized box, THE BOX WINS and the connectors adapt.

   What was wrong: every box carried a hard height (44px, 50px) and
   `overflow: hidden`. A two-line title lost its first line ("FOUNDERS", "CHIEF
   EXECUTIVE OFFICER") and edit mode's holder chip hung out of the bottom edge.

   What is right now: no height, no clipping, and a minimum width at the
   chart's own fraction so the geometry is kept where it can be. The eleven
   vertical anchors below are FALLBACKS ONLY — `bv2LayoutExec()` measures the
   real boxes after layout and writes them, and every connector reads the same
   variables, so a box and the line reaching it cannot come apart. */
.bv2-exec {
  position: relative;
  margin: 0 0 18px;
  --yfounder-t: 0px;
  --yfounder-b: 44px;
  --ybod-t: 58px;
  --ybod-b: 108px;
  --yceo-t: 122px;
  --yceo-b: 166px;
  --yexbus: 180px;
  --yex-t: 194px;
  --yex-b: 238px;
  --ydivbus: 252px;
  --yfloor: 268px;
  height: var(--yfloor);
}
.bv2-exec-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 12px;
  border-radius: 3px;
  background: var(--ex-fill);
  color: var(--ex-ink);
  text-align: center;
  overflow: visible;
}
.bv2-exec-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
}
.bv2-exec-box .bv2-seat { font-size: 12px; font-weight: 600; justify-content: center; }
.bv2-exec-box .bv2-add { color: var(--ex-ink); border-color: currentColor; }

.at-founder { left: 0;       top: var(--yfounder-t); min-width: 17%; max-width: 30%; }
.at-bod     { left: 4%;      top: var(--ybod-t);     min-width: 96px; max-width: 20%; }
.at-ceo     { left: 50%;     top: var(--yceo-t);     min-width: 20%; max-width: 32%;
              transform: translateX(-50%); }
.at-comms   { left: 28.571%; top: var(--yex-t);      min-width: 17%; max-width: 27%;
              transform: translateX(-50%); }
.at-ops     { left: 71.428%; top: var(--yex-t);      min-width: 17%; max-width: 27%;
              transform: translateX(-50%); }

.bv2-exec-lines { position: absolute; inset: 0; pointer-events: none; }
.bv2-exec-line { position: absolute; background: var(--ex-fill); }
.bv2-exec-line.is-v { width: 2px; margin-left: -1px; }
.bv2-exec-line.is-h { height: 2px; margin-top: -1px; }

/* BELOW SEVEN-ACROSS THERE IS NO SEVEN-COLUMN GEOMETRY TO DRAW. The columns
   step down at 1500px, so the executives can no longer sit over the divisions
   they span: the layer becomes A COMPACT CHANNEL LIST — one row per office,
   in the chart's own order, role on the left and holder on the right — and its
   connectors are not drawn, because a line pointing at the wrong column is
   worse than no line. */
@media (max-width: 1499px) {
  .bv2-exec {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ex-fill);
    border-radius: 3px;
    overflow: hidden;
  }
  .bv2-exec-box {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
    text-align: left;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    padding: 8px 12px;
  }
  /* A ROW THAT CANNOT SHRINK IS A ROW THAT OVERFLOWS. A flex item's default
     minimum is its own content, so at 768px the role and the holder together
     ran 111px past the edge of the box — measured, not guessed. Both may
     shrink and the holder drops to its own line when it must. */
  .bv2-exec-box > * { min-width: 0; }
  .bv2-exec-box .bv2-exec-role { flex: 1 1 auto; }
  .bv2-exec-box:last-of-type { border-bottom: none; }
  .bv2-exec-lines { display: none; }
}

/* ---------- the seven columns --------------------------------------------
   REAL BREAKPOINTS, 7 -> 4 -> 2 -> 1, chosen against the room the columns
   actually get (the viewport less the 216px navigation) rather than against
   round numbers: a column narrower than about 240px cannot carry a post title
   and a holder on the same line. */
.bv2-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
@media (max-width: 1499px) { .bv2-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .bv2-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 859px)  { .bv2-columns { grid-template-columns: 1fr; } }

.bv2-col {
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
  /* the fill and the ink are set per column, in the markup, from the
     measurement in boardv2.js — never from this sheet */
}

.col-banner.bv2-banner {
  display: block;
  width: 100%;
  border: none;
  padding: 12px 10px 10px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.bv2-banner .bv2-banner-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.bv2-banner .sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-left: 0;
}
.bv2-banner:hover { filter: none; text-decoration: underline; }

.bv2-secretary {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.bv2-sec-role {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.bv2-col-body { padding: 0 12px 10px; flex: 1 1 auto; }

/* ---------- THE ZONES: grouping that is SEEN, not inferred ----------------
   His correction, 2026-08-07: "The text isn't clearly organized/grouped?" Each
   column carries the same zones in the same order — leadership, what it is,
   departments — and each is set off by a rule above it and opened by a small
   label. Spacing, a rule and a weight step do the work; nothing depends on the
   reader noticing where one thing ends and the next begins. */
.bv2-zone { padding: 9px 0 2px; }
.bv2-zone + .bv2-zone { border-top: 1px solid currentColor; margin-top: 2px; }
.bv2-zone-lbl {
  margin: 0 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 1;
}
.bv2-zone.is-depts > .bv2-dept:first-of-type { padding-top: 2px; }

/* ---------- long source text is clamped, and says so on its own face ------
   A description block shows its first lines and carries its own expander;
   the whole text is always on the element's sheet. No hidden menu, nothing
   behind a caret — his standing instruction about this board. */
.bv2-prose { margin: 0; }
/* CLAMPED, NOT FADED. A gradient mask over the last line was tried and
   measured: it drops the ink under the contrast floor on the pale columns,
   which is exactly the fault the sheet's own comment above the lead-in rule
   warns about. The block simply ends, and the button says there is more.

   AND IT ENDS BETWEEN TWO LINES, NEVER THROUGH ONE. `max-height: 6.6em` was
   4.55 line-boxes deep at this type (12.5px on 1.45), so the clamp sliced the
   fifth line in half and left a row of chopped letter-tops on the face of six
   of the seven columns — "NO CLIPPED TEXT EVER" includes that.

   The rhythm is now built out of ONE unit. The line box is `--bv2-lh` tall, a
   paragraph gap is exactly one line box, and the clamp is exactly five of
   them — so every possible cut lands on a line boundary no matter how the
   paragraphs fall. `test_relayout.py` §9 measures the clamped height against
   the line height and fails on any remainder. */
.bv2-prose-body {
  --bv2-lh: calc(12.5px * 1.45);
  line-height: var(--bv2-lh);
}
.bv2-prose-body .bv2-para,
.bv2-prose-body .bv2-lead-in {
  line-height: var(--bv2-lh);
  margin: 0 0 var(--bv2-lh);
}
.bv2-prose-body > :last-child { margin-bottom: 0; }
.bv2-prose-body.is-clamped {
  max-height: calc(5 * var(--bv2-lh));
  overflow: hidden;
}
.bv2-expand {
  margin-top: 3px;
  padding: 1px 7px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
}
.bv2-expand:hover { text-decoration: underline; }

/* ---------- the chart's own words ----------------------------------------
   Set on the column's own ink, never in a grey of its own: the fills are seven
   different colours and one fixed "muted" ink would fail its contrast on at
   least two of them. `--dv-ink` is the colour measured for this column. */
.bv2-para {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
}
.bv2-para:last-child { margin-bottom: 0; }

.bv2-div-about { padding: 0; }
/* NOTHING ON A COLOURED COLUMN IS FADED, AND THAT IS A MEASUREMENT RATHER
   THAN A PREFERENCE. Division 5's grey clears 4.5:1 by 0.16 with the sheet's
   dark ink, so on that column ANY opacity below about 0.98 drops the text
   under the floor — 80% lands at 2.7:1 — while the column's own contrast
   reading stays a comfortable 4.66 and hides it. (Measured 2026-08-07; the
   faded labels had been shipping since this morning.) Secondary text on this
   board is therefore told apart by size, weight, italic and capitals, never by
   fading, and `test_board.py` §4 measures every line BLENDED against the fill
   it sits on, in both themes. */
.bv2-lead-in {
  margin: 10px 0 2px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* A DEPARTMENT IS ITS OWN BLOCK, stepped in from the zone's edge and marked by
   a rule when it follows another one, so a column of six departments reads as
   six things rather than as one long page. */
.bv2-dept { padding: 9px 0 10px; }
.bv2-dept + .bv2-dept { border-top: 1px solid rgba(0, 0, 0, .18); }
.bv2-dept-about { border-left: 2px solid currentColor; padding-left: 8px; }

/* THE SMALL LABEL — Source, Existence, Conditions … drawn the way the chart
   draws it: small capitals with a rule under them, above the name. */
.bv2-dept-theme {
  margin: 0 0 3px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.bv2-dept-src,
.bv2-vfp-src {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  /* the chart lists two products under Divisions 5 and 6, on their own lines */
  white-space: pre-line;
}
.bv2-vfp-txt { white-space: pre-line; }
.bv2-vfp-src-lbl,
.bv2-dept-src { font-style: italic; }
.bv2-dept-about { margin-top: 5px; }

.bv2-dept-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bv2-dept-name {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}
.bv2-dept-name:hover { text-decoration: underline; }
.bv2-dept-no { font-size: 13px; }

/* THE HEAD OF A LEVEL — one line, drawn only when a head title exists. */
.bv2-headline {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.bv2-head-role { font-weight: 600; }
.bv2-headline.is-division { font-size: 13.5px; }

/* SECTIONS AND UNITS — the nesting is drawn as nesting: each level steps in
   and carries a rule down its left edge, so depth is visible without a label
   having to say it. */
.bv2-node {
  margin: 5px 0 5px 4px;
  padding-left: 8px;
  border-left: 2px solid currentColor;
}
.bv2-node-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bv2-node-name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.bv2-node-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* A STATISTIC ON THE FACE OF THE BOARD — the element it hangs on carries its
   name; the figure and the graph are the OIC's. */
.bv2-stats { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.bv2-stat {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.bv2-stat-unit { font-weight: 400; }

.bv2-posts { list-style: none; margin: 6px 0 0; padding: 0; }
.bv2-post { padding: 1px 0; }
.bv2-post-line {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  padding: 3px 0;
  cursor: pointer;
  text-align: left;
}
.bv2-post-line:hover .bv2-post-title { text-decoration: underline; }
.bv2-post-title { font-size: 13px; line-height: 1.35; }

/* THE SEAT — the one thing this chart exists to show. A name, or OPEN. */
/* WRAPS, DELIBERATELY. A seat is a person's name and a PROPOSED mark beside
   it, and a column is 190px wide at seven-across — measured in the browser,
   "Andrew Thompson PROPOSED" on one unbreakable line was clipped by the
   column's own overflow and the mark disappeared off the edge. A mark he
   cannot see is not a mark. */
.bv2-seat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
}
.bv2-seat.is-open .bv2-seat-name {
  font-weight: 600;
  letter-spacing: .04em;
}
.bv2-proposed {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
  padding: 0 4px;
  border: 1px dashed currentColor;
  border-radius: 2px;
  white-space: nowrap;
}

.bv2-vfp {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(0, 0, 0, .14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bv2-vfp-lbl {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bv2-vfp-txt { font-size: 13px; line-height: 1.4; }

.bv2-foot {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rule, var(--line));
  border-radius: 2px;
  color: var(--ink);
}
.bv2-foot-lbl { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.bv2-foot-stmt { margin: 2px 0; font-size: 13px; line-height: 1.5; }

/* ---------- find your place ---------------------------------------------- */
.bv2-finding .find-dim { opacity: .25; }
.bv2-finding .find-hit { outline: 2px solid currentColor; outline-offset: 1px; }

/* ---------- edit mode ----------------------------------------------------- */
#bv2-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#bv2-editing-flag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--on-accent, #fff);
  background: var(--accent);
}

/* THE EMPTY SLOTS. In edit mode every level shows what can be created inside
   it, where it would appear: "+ head title", "+ Section", "+ Unit", "+ Post".
   Dashed, because it is a slot rather than a thing; labelled, because a slot
   that does not say what it makes is a menu with the lid off. */
.bv2-edit-btn,
.bv2-add,
.bv2-sheet-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 1px 7px;
  border: 1px dashed currentColor;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.bv2-sheet-btn { border-style: solid; }
.bv2-edit-btn:hover,
.bv2-add:hover,
.bv2-sheet-btn:hover { text-decoration: underline; }

.bv2-slots {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
}

/* TEXT EDITS WHERE IT STANDS. In edit mode a name shows it can be typed on;
   in view mode nothing about it changes at all. */
.board-v2.is-editing .bv2-inplace {
  border-bottom: 1px dashed currentColor;
  cursor: text;
}
.bv2-inplace-input {
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 4px;
  max-width: 100%;
}

/* EDIT MODE IS MARKED ONCE, ON THE TOOLBAR, and not by dressing every row.
   A first cut outlined each department and railed each post; measured on
   screen it read as damage rather than as a mode. The controls themselves are
   the only thing that appears. */
.board-v2.is-editing .bv2-post + .bv2-post { margin-top: 2px; }

/* ---------- the detail panel's two live controls --------------------------
   `.assign-btn` was drawn for a control that was PERMANENTLY DISABLED — muted
   ink on a wash, the look of a button that refuses. It does not refuse any
   more: on his account it opens the holder picker and the post editor. It is
   restyled here, in this sheet, rather than in `app.css`, because the change
   belongs to Board v2 and nothing else in the portal draws this class. */
#panel .assign-btn {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  font-weight: 600;
  cursor: pointer;
}
#panel .assign-btn:hover { background: var(--bg-hover); }
#panel .assign-btn:first-of-type {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
#panel .assign-btn:first-of-type:hover { background: var(--brand-hover); }

/* ---------- print: a wall chart belongs on a wall -------------------------- */
@media print {
  .sidebar, .masthead, #panel, #scrim, .bv2-edit-btn,
  .bv2-add, .bv2-slots, .bv2-sheet-btn { display: none !important; }
  .board.board-v2 { max-width: none; padding: 0; }
  .bv2-columns { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .bv2-col { break-inside: avoid; }
}