/* R7 — distribution-board workspace.
   Scoped replacement composition for the rejected board/circuit screens.
   Owns the .bw-* vocabulary outright rather than adding another tail of
   nudge overrides onto the rejected design. Loaded last so it is the real
   owner of these surfaces; it deliberately does not restyle unrelated app
   areas. Palette per BOARD_REDESIGN_DIRECTION.md. */

:root{
  --bw-page:var(--so-panel);      /* cool neutral canvas */
  --bw-surface:var(--so-panel);   /* distinct white logical surfaces */
  --bw-ink:var(--so-text);       /* charcoal text */
  --bw-ink-2:var(--so-muted);     /* secondary text */
  --bw-line:var(--so-line);
  --bw-field:var(--so-panel-2);     /* quiet grey input fill */
  --bw-accent:var(--so-accent);    /* existing Stacked Out yellow */
  --bw-accent-ink:var(--so-accent-ink);
  --bw-warn:#e94c52;
  --bw-r:15px;            /* section radius */
  --bw-r-s:11px;          /* control/field radius */
}

/* ── 1. The certificate working chrome ───────────────────────────────────
   R8. The rejected screen put SIX stacked header surfaces above the first
   board, and the board arrived 491px down an 844px viewport. R7 tried to
   shrink each of the six; the measurement did not move, because
   mobile-polish.css and product.css own most of them with !important rules
   that an ordinary new selector cannot outrank.

   So this is a replacement, in three coherent parts:
     a. `.fa-topbar2` and `.fc-pos` no longer exist in the markup at all
        (mobile-source.js now emits `.bw-chrome`), which ends their
        ownership rather than arguing with it;
     b. the legacy phone rules for `.proto-header`, `#save-state`, the
        record bar, the assessment banner and the warm `.btn-amber` are
        RETIRED AT THEIR OWNER — each is now scoped `body:not(.bw-world)`
        in product.css / mobile-polish.css, so they still apply everywhere
        else in the app and simply stop applying in this workspace;
     c. everything below owns the new world outright.

   Nothing real is hidden. The record bar, save state and live assessment
   are moved by board-workspace.js into `#bw-context`, complete. */

/* The brand bar: one 56px row. The wordmark, the real Desktop/On site
   switch, Drafts and Settings all stay and all stay on the 44px touch
   floor — the 108px only ever existed to park a save message inside it,
   and the save message now lives beside the revision it describes. */
body.bw-world .proto-header{
  height:auto; min-height:56px; padding:6px 12px; gap:8px;
  align-items:center; box-sizing:border-box;
}
body.bw-world .proto-brand{ font-size:15px; line-height:1.05; letter-spacing:-.4px; flex:0 0 auto; }
body.bw-world .proto-brand small{ display:inline; margin-left:5px; font-size:8px; letter-spacing:.09em; opacity:.66; font-weight:700; vertical-align:2px; }
/* On a 390px screen the wordmark, the CERTIFICATION suffix, the surface switch,
   Drafts and Settings do not all fit on one row — the suffix was pushing
   Settings off the right edge. The suffix is the only part that says nothing
   the page does not already say, so it is the part that goes, below 560px. */
@media(max-width:560px){ body.bw-world .proto-brand small{ display:none; } }
body.bw-world .proto-header{ flex-wrap:nowrap; }
body.bw-world .proto-brand{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.bw-world .proto-header .btn{ flex:0 0 auto; min-height:44px; padding:0 10px; font-size:12px; white-space:nowrap; }
body.bw-world .proto-switch{ margin-left:auto; flex:0 0 auto; }
body.bw-world .proto-switch button{ min-height:38px; padding:0 10px; font-size:12px; }
/* The prototype notice is a truthfulness statement, not decoration: it stays,
   in full, as one 22px line. */
body.bw-world .proto-notice{ padding:4px 12px; font-size:9.5px; line-height:1.4; letter-spacing:.02em; }
/* The page container's own desktop padding is supplied by the chrome now. */
body.bw-world #view-certs{ padding:0; max-width:none; margin:0; }
body.bw-world #certs-body{ background:var(--bw-page); }
body.bw-world .fc-shell{ background:var(--bw-page); padding-top:0; }

.bw-chrome{
  display:block; background:var(--bw-surface);
  border-bottom:1px solid var(--bw-line);
}
/* ── R15 — THE CONTEXT STRIP IS ONE COMPACT LINE ──────────────────────────
   Measured on the frozen R14 capture at 390px: brand 56 + pilot strip 27 +
   record/save row + provisional assessment + title + section row + segments
   put the board switcher at ~370px. The approved comp starts the boards after
   ONE title and ONE context line.

   So this strip is now a single row carrying the live save state and a
   labelled "Draft details" disclosure; the real record bar and the real
   assessment node sit inside `.bw-ctx-body` behind it. board-workspace.js
   forces that body open and marks the strip `.is-urgent` for every state that
   is not a clean save, so no warning is ever folded away. */
.bw-context{ display:block; }
.bw-context:not(:empty){ border-bottom:1px solid var(--bw-line); background:var(--bw-page); }
.bw-ctx-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:5px 14px; min-height:34px;
}
.bw-ctx-more{
  flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  min-height:30px; padding:0 10px; border-radius:9px;
  border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.bw-ctx-more i{ font-style:normal; color:var(--bw-ink-2); }
.bw-ctx-more[aria-expanded=true] i{ transform:rotate(180deg); }
.bw-ctx-more:focus-visible{ outline:3px solid #4795eb; outline-offset:2px; }
.bw-ctx-body{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:0 14px 8px; }
.bw-ctx-body[hidden]{ display:none; }
/* An unresolved conflict, an offline queue, a pending sync, a session failure,
   a read-only membership and an attested draft all open the body and warm the
   whole strip, so the warning reads as a warning and not as a folded label. */
.bw-context.is-urgent{ background:var(--so-warn); }
.bw-context.is-urgent .bw-ctx-more{ border-color:var(--so-line); background:var(--so-panel); }
.bw-context .product-record-bar{
  display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; flex:1 1 100%;
  min-width:0; margin:0; padding:0; background:none; border:0;
  font-size:12px; color:var(--bw-ink-2);
}
.bw-context .product-record-bar > span{ flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:650; }
/* The attested / read-only sentence product.js appends is a whole statement,
   not a label: it takes its own full line rather than being clipped. */
.bw-context .product-record-bar > span:nth-of-type(n+2){ flex:1 1 100%; white-space:normal; overflow:visible; color:var(--bw-ink); }
.bw-context .product-record-bar .btn{
  flex:0 0 auto; min-height:36px; padding:0 11px; border-radius:9px; font-size:12px;
  background:var(--bw-surface); border:1px solid var(--bw-line); color:var(--bw-ink);
}
.bw-context .product-record-bar .btn.btn-amber{ background:var(--bw-accent); border-color:var(--bw-accent); color:var(--bw-accent-ink); font-weight:750; }
/* Save state, as a readable chip beside the revision rather than 10px grey
   text floating over the wordmark. product.js keeps writing its text and
   its data-state; the colours below are the same three meanings it sets. */
/* The save chip sits ON the revision line. In its ordinary resting state
   ("Saved to workspace") it is short, so it is clamped to two 10.5px lines
   rather than being allowed to push the whole strip onto a second row.
   THE ACTIONABLE STATES ARE NOT CLAMPED: pending, offline and conflict are
   the ones that carry a recovery instruction, and each of those takes the
   full width of the strip and as many lines as its message needs. It stays
   the same tappable control product.js wrote, in every state. */
/* R15: the chip is on the compact line, so it is sized to read at a glance
   ("Saved to workspace") and is NOT clamped — a clamped save state is exactly
   the value that must never be cut. It wraps onto a second line instead. */
.bw-context #save-state{
  display:inline-flex; align-items:center; position:static;
  flex:0 1 auto; min-width:0; padding:4px 10px; border-radius:999px;
  background:var(--bw-surface); border:1px solid var(--bw-line);
  color:var(--bw-ink-2); font-size:11.5px; font-weight:700; line-height:1.3;
  white-space:normal; overflow:visible; overflow-wrap:anywhere; cursor:pointer;
}
/* offline and conflict carry a recovery instruction the engineer has to act
   on, so they get the whole strip and every line they need. `pending` is not
   an error — it is the ordinary state of a draft between autosaves — so it
   stays compact and coloured rather than expanding on every keystroke. */
.bw-context #save-state[data-state=offline],
.bw-context #save-state[data-state=conflict]{
  flex:1 1 100%; display:flex; min-height:40px;
  font-size:12px; border-radius:11px; padding:7px 11px;
}
.bw-context #save-state[data-state=pending], .bw-context #save-state[data-state=offline]{ background:rgba(255,213,0,.16); border-color:var(--so-accent); color:var(--so-accent); }
.bw-context #save-state[data-state=conflict]{ background:rgba(224,41,41,.18); border-color:#e02929; color:#ff8f85; }
/* The live assessment keeps every word workflow.js writes, and keeps looking
   PROVISIONAL: a caution surface, never an issued-certificate surface. */
.bw-context .wf-live-assessment{
  flex:1 1 100%; margin:0; padding:6px 9px; border-radius:9px;
  background:var(--so-accent); border:1px solid var(--so-accent); color:var(--so-accent-ink);
  font-size:11.5px; line-height:1.35;
}
.bw-context .wf-live-assessment strong{ font-weight:800; letter-spacing:.01em; }
.bw-context .wf-live-assessment small{ font-size:11px; color:rgba(11,11,13,.72); }

/* Identity row: back, what this certificate is, its real live status, Maisie. */
.bw-idrow{ display:flex; align-items:center; gap:8px; padding:5px 10px 1px; }
.bw-icon{
  flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
  border-radius:11px; border:1px solid var(--bw-line); background:var(--bw-surface);
  color:var(--bw-ink); cursor:pointer;
}
.bw-idname{ flex:1 1 auto; min-width:0; font-size:13px; font-weight:700; color:var(--bw-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bw-status{
  flex:0 0 auto; padding:4px 10px; border-radius:999px; font-size:10.5px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--bw-field); color:var(--bw-ink-2); border:0;
}
.bw-ask{
  flex:0 0 auto; min-height:40px; padding:0 13px; border-radius:11px;
  border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}

/* Section row: the one clear heading, and the Sections control that carries
   position and tally. */
.bw-steprow{ display:flex; align-items:center; gap:10px; padding:0 12px 6px; }
.bw-stepname{ flex:1 1 auto; min-width:0; margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--bw-ink); }
.bw-stepall{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  min-height:40px; padding:0 12px; border-radius:11px;
  border:1px solid var(--bw-line); background:var(--bw-surface);
  color:var(--bw-ink-2); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}
.bw-stepall i{ font-style:normal; font-size:11px; }
/* Progress: a 4px rule, not a card of its own. */
.bw-seg{ display:flex; gap:3px; padding:0 12px 8px; }
.bw-seg b{ flex:1 1 0; height:4px; border-radius:2px; background:var(--bw-line); }
.bw-seg b.part{ background:var(--bw-accent); }
.bw-seg b.done{ background:#85e3bc; }
.bw-seg b.here{ outline:2px solid var(--bw-ink); outline-offset:1px; }

body.bw-world .fc-body{ padding:12px; padding-bottom:96px; background:var(--bw-page); }
/* Real QS/re-test flags keep every word; only the block padding that made
   each read as a header of its own is reduced. */
body.bw-world .fc-shell > .fc-flag{ margin:12px 14px 0; padding:10px 12px; border-radius:var(--bw-r-s); font-size:12.5px; line-height:1.45; }

/* ── 2. Bottom navigation ────────────────────────────────────────────────
   Back left, Sections centre, Next (named) right. Never overlays the last
   board action: the body reserves its height plus the safe area. */
body.bw-world .fc-footbar{
  background:var(--bw-surface); border-top:1px solid var(--bw-line);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  gap:8px; align-items:stretch; backdrop-filter:none;
}
body.bw-world .fc-footbar .btn{ min-height:46px; border-radius:var(--bw-r-s); font-size:14px; }
body.bw-world .fc-footbar .btn-amber{ background:var(--bw-accent); color:var(--bw-accent-ink); border-color:var(--bw-accent); font-weight:750; }
body.proto-phone{ scroll-padding-bottom:110px; }
.bw-sections{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 14px; border-radius:var(--bw-r-s);
  border:1px solid var(--bw-line); background:var(--bw-surface);
  color:var(--bw-ink); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer;
}

/* ── 3. Board parent ─────────────────────────────────────────────────────
   One white surface per board: image + identity header (opens board
   details), circuits directly beneath, then one yellow Add circuit and
   quieter secondary actions. No card-outline soup, no button pile. */
body:has(.fc-shell) .fc-body > .fc-card{
  background:var(--bw-surface); border:1px solid var(--bw-line); border-radius:var(--bw-r);
  padding:18px 18px 20px; margin:0 0 14px; overflow:hidden;
}
/* Only the board and circuit cards run edge-to-edge (their own headers carry
   the padding). Every other section card keeps breathing room so fields never
   touch the border. */
body:has(.fc-shell) .fc-body > .fc-card > h4{ margin:0 0 12px; }
body:has(.fc-shell) .fc-body > .fc-card .fc-grid{ gap:12px 12px; }
.bw-board-head{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 14px 12px; background:none; border:0; border-bottom:1px solid var(--bw-line);
  font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.bw-board-head:active{ background:var(--so-panel); }
.bw-board-img{
  flex:0 0 auto; width:124px; height:auto; max-height:96px;
  object-fit:contain; display:block;
}
.bw-board-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.bw-board-name{ font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--bw-ink); line-height:1.2; }
.bw-board-loc{ font-size:13.5px; color:var(--bw-ink-2); }
.bw-board-open{ font-size:13px; font-weight:700; color:var(--bw-ink); text-decoration:underline; text-underline-offset:3px; }
.bw-chev{ flex:0 0 auto; color:var(--bw-ink-2); display:flex; }

.bw-ckt-head{ display:flex; align-items:baseline; gap:8px; padding:13px 14px 6px; }
.bw-ckt-head h4{ margin:0; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--bw-ink-2); }
.bw-count{ font-size:12px; font-weight:800; color:var(--bw-ink-2); }
.bw-empty{ margin:0; padding:2px 14px 12px; font-size:13.5px; color:var(--bw-ink-2); }

body:has(.fc-shell) .fc-ckt.bw-ckt{
  display:flex; align-items:center; gap:11px; width:100%; margin:0;
  padding:11px 14px; min-height:60px; border:0; border-top:1px solid var(--bw-line);
  border-radius:0; background:var(--bw-surface); text-align:left;
}
body:has(.fc-shell) .fc-ckt.bw-ckt:first-of-type{ border-top:1px solid var(--bw-line); }
body:has(.fc-shell) .fc-ckt.bw-ckt:active{ background:var(--so-panel); }
body:has(.fc-shell) .bw-ckt .fc-ckt-no{
  width:32px; height:32px; flex:0 0 auto; border-radius:9px;
  background:var(--bw-ink); color:var(--so-panel); border:0; display:grid; place-items:center;
  font-weight:800; font-size:13px;
}
body:has(.fc-shell) .bw-ckt .fc-ckt-main b{ font-size:14.5px; color:var(--bw-ink); }
body:has(.fc-shell) .bw-ckt .fc-ckt-main span{ font-size:12.5px; color:var(--bw-ink-2); }
.bw-state{ flex:0 0 auto; font-size:11.5px; font-weight:750; color:var(--bw-ink-2); white-space:nowrap; }
.bw-state-bad{ color:var(--bw-warn); }
.bw-state-warn{ color:var(--so-accent); }
.bw-state-ok{ color:#85e3bc; }

/* Actions: one yellow primary, the rest quiet and equal. */
.bw-board-acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 14px 14px; border-top:1px solid var(--bw-line); }
.bw-act{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:8px 12px; border-radius:var(--bw-r-s);
  border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink);
  font:inherit; font-size:13.5px; font-weight:650; cursor:pointer; text-align:center;
}
.bw-act svg{ flex:0 0 auto; color:var(--bw-ink-2); }
.bw-act:active{ background:var(--so-panel); }
.bw-act-primary{
  grid-column:1/-1; background:var(--bw-accent); border-color:var(--bw-accent);
  color:var(--bw-accent-ink); font-weight:800; font-size:15px; min-height:50px;
}
.bw-act-primary svg{ color:var(--bw-accent-ink); }
.bw-act[disabled], .bw-act.is-off{ opacity:.62; cursor:default; }

/* Add distribution board — its own object, its own row, unmistakably not
   Add circuit. */
.bw-addboard{
  display:flex; align-items:center; gap:12px; width:100%; margin:2px 0 8px;
  padding:12px 14px; background:var(--bw-surface);
  border:1px solid var(--bw-line); border-radius:var(--bw-r);
  font:inherit; color:var(--bw-ink); text-align:left; cursor:pointer;
}
.bw-addboard:active{ background:var(--so-panel); }
.bw-addboard-img{ flex:0 0 auto; width:64px; height:auto; object-fit:contain; opacity:.9; }
.bw-addboard-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bw-addboard-t b{ font-size:15px; font-weight:750; }
.bw-addboard-t small{ font-size:12.5px; color:var(--bw-ink-2); }
.bw-plus{ flex:0 0 auto; color:var(--bw-ink-2); display:flex; }

/* ── 4. Full-screen work surfaces (board details, circuit, table) ─────────
   An intentional work surface, not a small modal floating in another form. */
/* R10-F04 — THE SHEET NOW ACTUALLY OCCUPIES THE PHONE.
   The captures showed a ~20px backdrop strip down the right of a 390px
   screen: `width:100%` on a <dialog> resolves against its containing block
   MINUS the UA's own margin/border/padding, so "100%" was never the viewport.
   Pinning all four insets and using 100vw/100dvh makes the working surface
   the whole screen, which is what the field work needs. */
#proto-dialog:has(.bw-sheet){
  position:fixed; inset:0; box-sizing:border-box;
  width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
  margin:0; padding:0; border:0; border-radius:0; background:var(--bw-page);
  overflow:auto;
}
#proto-dialog:has(.bw-sheet) #proto-sheet{ padding:0; }
/* The generic dialog's floating × is a THIRD way out of a surface that already
   has Back (top left) and Done (top right), and on a full-screen work surface
   it lands on top of Done. The two labelled controls stay; the unlabelled
   duplicate goes, on these surfaces only — every other sheet keeps it. */
#proto-dialog:has(.bw-sheet) .proto-close{ display:none; }
.bw-sheet{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--bw-page); color:var(--bw-ink); }
.bw-head{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  padding:10px 12px calc(10px); padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:var(--bw-surface); border-bottom:1px solid var(--bw-line);
}
.bw-head-back{
  flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--bw-line); background:var(--bw-surface);
  color:var(--bw-ink); cursor:pointer;
}
.bw-head-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:center; }
.bw-head-t b{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.bw-head-t small{ font-size:12px; color:var(--bw-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bw-head-act{
  flex:0 0 auto; min-height:40px; padding:0 14px; border-radius:var(--bw-r-s);
  border:1px solid var(--bw-accent); background:var(--bw-accent); color:var(--bw-accent-ink);
  font:inherit; font-weight:750; font-size:14px; cursor:pointer;
}
.bw-sheet-body{ flex:1; padding:14px; padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:14px; }
.bw-note{ margin:0; font-size:13px; line-height:1.5; color:var(--bw-ink-2); }

/* Grouped white sections on the grey page. No nested cards. */
.bw-group{ background:var(--bw-surface); border:1px solid var(--bw-line); border-radius:var(--bw-r); padding:16px; margin:0; }
.bw-group + .bw-group{ margin-top:0; }
/* Normal case, per the direction: the legacy card styles shout every heading
   in uppercase with letter-spacing, which is harder to read at a glance on a
   bright site and is not this world's voice. */
.bw-group h3{ margin:0 0 12px; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--bw-ink); text-transform:none; }
.bw-group h4{ margin:0 0 8px; font-size:15px; font-weight:750; color:var(--bw-ink); text-transform:none; }
.bw-sheet h2, .bw-sheet h3, .bw-sheet h4, .bw-sheet legend, .bw-sheet .fc-f > span{ text-transform:none; letter-spacing:normal; }
.bw-sub{ margin:-4px 0 12px; font-size:13.5px; line-height:1.5; color:var(--bw-ink-2); }
.bw-sub-rule{ margin-top:14px; padding-top:12px; border-top:1px solid var(--bw-line); }
.bw-group .fc-card{ background:none; border:0; padding:0; margin:0; }   /* never a card inside a card */

/* Fields: 48px, 16px text, quiet grey fill, units inside and clear of text. */
.bw-sheet .fc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bw-sheet .bw-g3{ grid-template-columns:repeat(3,1fr); }
.bw-sheet .fc-f{ display:flex; flex-direction:column; gap:6px; font-size:14.5px; font-weight:650; color:var(--bw-ink); text-transform:none; letter-spacing:0; min-width:0; }
.bw-sheet .fc-f > span{ font-weight:650; }
.bw-sheet .fc-f input, .bw-sheet .fc-f select, .bw-sheet .fc-f textarea{
  min-height:48px; width:100%; min-width:0; box-sizing:border-box;
  padding:10px 44px 10px 13px; border-radius:var(--bw-r-s);
  border:1px solid transparent; background:var(--bw-field); color:var(--bw-ink);
  font-size:16px; font-weight:600;
}
/* R10-F05 — A NATIVE SELECT IGNORES min-height.
   WebKit sizes `select` from its own UA appearance, so a `min-height:48px`
   select rendered visibly shorter than the text input beside it and its
   target fell under the touch floor. Dropping the UA appearance and setting
   a real height makes the two the same control size; the chevron is drawn
   back in so nothing is lost by turning the native one off. */
.bw-sheet .fc-f select{
  appearance:none; -webkit-appearance:none;
  height:48px; line-height:1.2; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--bw-ink-2) 50%),linear-gradient(135deg,var(--bw-ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.bw-sheet .fc-f select:disabled{ opacity:1; color:var(--bw-ink-2); }
/* R10-F01 — READABLE RECORD IDENTITY AT 390px.
   Two columns inside a ~360px working width clipped the seeded board name to
   "TEST DB2 G" and its location to "TEST Detac", so the electrician could not
   confirm which object they were editing. Below 430px the grouped fields go
   to one column: the same fields, the same order, the same grouping, full
   value legibility and a wider touch target for every one of them. */
@media(max-width:430px){
  .bw-sheet .fc-grid, .bw-sheet .bw-g3{ grid-template-columns:minmax(0,1fr); }
}
.bw-sheet .fc-f textarea{ min-height:76px; padding-right:13px; }
.bw-sheet .fc-f input:focus, .bw-sheet .fc-f select:focus, .bw-sheet .fc-f textarea:focus{
  outline:2px solid var(--bw-ink); outline-offset:1px; background:var(--so-panel);
}
.bw-sheet .fc-f span i{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-style:normal; font-size:12.5px; font-weight:650; color:var(--bw-ink-2); pointer-events:none; }
.bw-sheet .fc-f{ position:relative; }
.bw-sheet .fc-inwrap{ position:relative; display:block; }
.bw-sheet .fc-f-wide, .bw-sheet .polish-wide{ grid-column:1/-1; }
.bw-sheet .fc-fhelp{ font-size:12.5px; font-weight:500; color:var(--bw-ink-2); line-height:1.45; }
.bw-sheet .fc-qf{ display:flex; gap:6px; flex-wrap:wrap; }
.bw-sheet .fc-qf button{ min-height:32px; padding:4px 11px; border-radius:8px; border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink-2); font:inherit; font-size:12px; font-weight:700; }
.bw-sheet .fc-seg{ display:flex; gap:6px; flex-wrap:wrap; }
.bw-sheet .fc-seg button{ min-height:44px; min-width:56px; border-radius:var(--bw-r-s); border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink); font:inherit; font-weight:700; }
.bw-sheet .fc-seg button.on{ background:var(--bw-ink); border-color:var(--bw-ink); color:var(--so-panel); }
.bw-sheet .fc-more summary{ font-size:13.5px; color:var(--bw-ink-2); }

/* Circuit identity, tabs and template chips. */
.bw-ckt-id{ display:flex; align-items:center; gap:11px; }
.bw-ckt-badge{ width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:var(--bw-ink); color:var(--so-panel); font-weight:800; font-size:15px; }
.bw-ckt-desc{ font-size:16px; font-weight:700; color:var(--bw-ink); min-width:0; overflow-wrap:anywhere; }
.bw-tabs{ display:flex; gap:0; padding:4px; background:var(--bw-field); border-radius:13px; }
.bw-tab{
  flex:1 1 0; min-height:44px; padding:8px 10px; border:0; border-radius:10px;
  background:none; color:var(--bw-ink-2); font:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
}
.bw-tab.on{ background:var(--bw-accent); color:var(--bw-accent-ink); }
.bw-chiprow{ display:flex; flex-direction:column; gap:10px; }
.bw-chips{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:2px; }
.bw-chip{ flex:0 0 auto; scroll-snap-align:start; min-height:40px; padding:8px 15px; border-radius:999px; border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.bw-act-tools{ align-self:flex-start; }
.bw-rows{ display:flex; flex-direction:column; gap:0; background:var(--bw-surface); border:1px solid var(--bw-line); border-radius:var(--bw-r); overflow:hidden; }
.bw-rows .fa-row{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:12px 14px; border:0; border-top:1px solid var(--bw-line); background:var(--bw-surface); font:inherit; font-size:15px; color:var(--bw-ink); text-align:left; cursor:pointer; }
.bw-rows .fa-row:first-child{ border-top:0; }
.bw-rows .fa-row[disabled]{ color:var(--bw-ink-2); cursor:default; }
/* A row label may carry a second line explaining what the control actually
   does — "Import a schedule" plus the sentence that says imported values are
   unverified. It has to read as a label and a caption, not as one run-on
   centred paragraph. */
/* R10-F06 — ONE ROW RHYTHM FOR EVERY TOOL.
   The import row was rendered by the dialog's own label/button styling as a
   centred stack: icon on its own line, caption merging into the label, the
   chevron dropped underneath. It read as an unrelated card wedged between
   three aligned rows. `#proto-dialog` wins on specificity, so the row shape
   is stated there: icon left, label and its subordinate caption in the
   middle, chevron right, on one baseline, for every row including the ones
   that are <label>s. The truthful unverified-value sentence stays; it is
   just a caption now instead of a second heading. */
#proto-dialog .bw-rows .fa-row{
  display:flex; flex-direction:row; align-items:center; gap:12px;
  text-align:left; justify-content:flex-start; min-height:64px; padding:12px 14px;
}
#proto-dialog .bw-rows .fa-row-ico{ align-self:flex-start; margin-top:2px; }
#proto-dialog .bw-rows .fa-row-l{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;
  text-align:left; font-size:15px; font-weight:700; line-height:1.3;
}
#proto-dialog .bw-rows .fa-row-l small{ font-size:12px; font-weight:400; line-height:1.4; color:var(--bw-ink-2); }
#proto-dialog .bw-rows .fa-row > svg{ flex:0 0 auto; align-self:center; }
.bw-rows .fa-row-ico, .bw-rows .fa-row > svg{ flex:0 0 auto; color:var(--bw-ink-2); display:flex; }

/* Destructive, separated and explained. */
/* A BORDER-COLOUR WITH NO BORDER-STYLE DRAWS NOTHING. This block was written
   to be a card -- it sets the colour of a border it never asked for -- so
   "Remove this board" and its warning have been sitting loose on the sheet
   with no box around them while every other block on that sheet has one, and
   the one destructive control on the screen was the only one not visibly
   contained. It gets the .bw-rows treatment in its own warning colour. */
.bw-danger{
  margin-top:16px; padding:14px;
  background:var(--bw-surface); border:1px solid #bc4e51; border-radius:var(--bw-r);
}
.bw-danger h4{ margin:0 0 6px; }
.bw-danger h4{ color:var(--bw-warn); }
.bw-danger p{ margin:0 0 12px; font-size:13.5px; color:var(--bw-ink-2); line-height:1.5; }
.bw-danger .fc-board-rm{ width:100%; min-height:46px; border-radius:var(--bw-r-s); border:1px solid #bc4e51; background:#d23737; color:var(--bw-warn); font-weight:750; }

.bw-rotate{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 12px; background:var(--so-accent); border:1px solid var(--so-accent); border-radius:var(--bw-r-s); font-size:13px; color:var(--so-accent-ink); }
.bw-rotate-go{ min-height:38px; padding:0 13px; border-radius:9px; border:1px solid var(--bw-accent); background:var(--bw-accent); color:var(--bw-accent-ink); font:inherit; font-weight:750; cursor:pointer; }

/* ── 5. The wide schedule ────────────────────────────────────────────────
   A genuine workspace using the available width up to 1440px, with the
   horizontal scroll INSIDE the schedule — not a ~620px dialog. */
.bw-table-sheet .bw-sheet-body{ padding:12px; max-width:1440px; width:100%; margin:0 auto; }
.bw-table-host{ width:100%; }
.bw-table-host .fc-table-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;
  background:var(--bw-surface); border:1px solid var(--bw-line); border-radius:var(--bw-r);
}
.bw-table-host .cert-tbl-wrap{ overflow:visible; border:0; margin:0; }
.bw-table-host table.ckt-table{ background:var(--bw-surface); }
.bw-table-host .ckt-bandbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 14px; background:var(--bw-surface); border:1px solid var(--bw-line); border-radius:var(--bw-r); margin:0 0 12px; }
.bw-table-host .ckt-bandbar .chip-btn{ min-height:40px; padding:7px 14px; border-radius:999px; border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.bw-table-host .ckt-bandbar .chip-btn.on{ background:var(--bw-accent); border-color:var(--bw-accent); color:var(--bw-accent-ink); }
.bw-table-host td input{ min-height:42px; border-radius:8px; border:1px solid transparent; background:var(--bw-field); color:var(--bw-ink); font-size:14px; padding:6px 9px; }
.bw-table-host td input:focus{ outline:2px solid var(--bw-ink); outline-offset:1px; background:var(--so-panel); }
.bw-table-host thead th{ position:sticky; top:0; z-index:2; background:var(--bw-field); color:var(--bw-ink); font-size:12.5px; }

@media (min-width:760px){
  .bw-sheet-body{ max-width:900px; width:100%; margin:0 auto; }
  .bw-table-sheet .bw-sheet-body{ max-width:1440px; }
  /* R15: the duplicate `.bw-board-img{width:145px}` that used to sit here was
     an R7/R8 leftover. The later `@media (min-width:760px)` block at the foot
     of this file owns the desktop board width (180px) and, being later at the
     same specificity, always won — so this line only existed to be overridden.
     Removed at the owner rather than overridden again. */
}

/* Read-only / attested must LOOK read-only here too: R5 review found sheet
   inputs escaped product.js's #certs-body disabling, so refused edits could
   still appear typed. */
body.pc-readonly .bw-sheet input, body.pc-readonly .bw-sheet select, body.pc-readonly .bw-sheet textarea,
.bw-sheet.is-readonly input, .bw-sheet.is-readonly select, .bw-sheet.is-readonly textarea{
  background:var(--so-panel); color:var(--bw-ink-2);
}
.bw-sheet.is-readonly .bw-act-primary, .bw-sheet.is-readonly .fc-board-rm{ opacity:.55; }
/* R10: read-only now reaches ordinary tool sheets too, so the state has to be
   visible there — a disabled row must look disabled, not merely refuse. */
.is-readonly .bw-rows .fa-row[disabled], .is-readonly .fc-board-rm[disabled],
.is-readonly .bw-act[disabled], .is-readonly .bw-chip[disabled]{
  opacity:.5; cursor:default; background:var(--so-panel);
}
.bw-ro-note{
  margin:0 0 12px; padding:10px 12px; border-radius:var(--bw-r-s);
  background:var(--so-accent); border:1px solid var(--so-accent); color:var(--so-accent-ink);
  font-size:12.5px; line-height:1.45; font-weight:600;
}
.is-readonly td input:disabled{ background:var(--so-panel); color:var(--bw-ink-2); }

/* R10-F07 — A PROPORTIONATE, STILL-UNMISTAKABLE FOCUS RING.
   The inherited treatment stacked a 3px outline on top of a bordered round
   button and read as a heavy black-and-yellow double halo that dominated
   every opened-sheet capture. One ring, high contrast, keyboard-only:
   :focus-visible means a pointer tap no longer leaves it sitting there. */
/* The sheet takes focus itself on open (see faSheet) so no control wears a ring
   it did not earn. The container must not wear one either -- it is a focus
   HOLDER, not something you chose; the controls inside it keep their own rings
   below, which is where a keyboard user needs to see where they are. */
#proto-dialog[tabindex]:focus, #proto-dialog[tabindex]:focus-visible{ outline:none; }
.bw-sheet :focus{ outline:none; }
.bw-sheet :focus-visible,
#proto-dialog .bw-rows .fa-row:focus-visible,
#proto-dialog .proto-close:focus-visible{
  outline:3px solid #4795eb; outline-offset:2px; box-shadow:none;
}
.bw-head-back:focus-visible, .bw-head-act:focus-visible{ outline:3px solid #4795eb; outline-offset:2px; }

/* ══════════════════════════════════════════════════════════════════════════
   R11 — THE APPROVED B COMPOSITION.

   Measured against APPROVED_DESIGN/option-b-focused-board.png, which Jamie
   selected and then authorised for implementation. The comp's structure, in
   the order it reads down the screen:

     black bar          STACKEDOUT wordmark, one quiet Maisie pill, nothing else
     neutral grey ground
     title              round back control · "Distribution boards" · sub line
     switcher           "DB1 · Hallway" selected, "DB2 · Garage" beside it
     WHITE GROUP 1      board image · DB1 / Hallway · Board details | Scan board
     WHITE GROUP 2      "Circuits on DB1" (3) [Tools] · numbered rows · ADD CIRCUIT
     WHITE ROW          board image · "Add distribution board" · ＋
     bottom bar         ‹ previous section · Sections · next section ›

   The two things this section is most careful about, because they are the two
   things the rejected composition got wrong:

   1. TWO WHITE GROUPS, NOT ONE CARD. The board identity and its circuits are
      separated by the grey ground, because they answer different questions.
      A single card made the board's name read as a heading for a list of
      buttons.
   2. ONE STRONG ACTION. Exactly one yellow control on the screen (Add
      circuit). Board details, Scan board and Tools are quiet and each carries
      its own word, so they are told apart by what they say rather than by
      their position in an undifferentiated row.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The compact black header ────────────────────────────────────────────
   The comp's bar carries the wordmark and one quiet entry. The prototype's
   Desktop/On site switch and Drafts control are real capabilities and are NOT
   removed — they are made compact and secondary so the bar reads as one calm
   black strip rather than a competing toolbar. */
body.bw-world .proto-header{
  min-height:56px; padding:0 12px; gap:8px; align-items:center;
  background:var(--so-page); border-bottom:0;
}
body.bw-world .proto-header .btn{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  color:var(--so-text); font-weight:650; border-radius:10px;
}
body.bw-world .proto-switch button{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:var(--so-muted); border-radius:9px; font-weight:650;
}
body.bw-world .proto-switch button.on,
body.bw-world .proto-switch button[aria-pressed=true]{ background:var(--so-panel); color:var(--so-text); }
/* R8 pinned this bar to `flex-wrap:nowrap`, which held at 390 and ran 22px off
   the right edge at 320 once workflow.js's settings control was in it (measured:
   right=342 in a 320 viewport). The bar wraps onto a second line at narrow
   widths instead: every control stays reachable and nothing is pushed off the
   screen, which is the rule that matters. */
@media (max-width:389px){
  body.bw-world .proto-header{ flex-wrap:wrap; row-gap:6px; padding:6px 10px; }
  body.bw-world .proto-header .btn,
  body.bw-world .proto-switch button{ padding:0 8px; font-size:11.5px; }
  body.bw-world .proto-switch{ margin-left:0; }
}

/* ── The title block ─────────────────────────────────────────────────────── */
.bw-idrow{ align-items:flex-start; gap:10px; padding:12px 14px 6px; }
.bw-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--bw-surface); border:1px solid var(--bw-line); color:var(--bw-ink);
  display:grid; place-items:center;
}
.bw-title{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
/* Sizes below are the comp measurement divided by the comp/breakpoint scale
   (851px comp -> 390px breakpoint, 0.4583). Recorded in
   .impeccable/build/spec.json; see font-match --measure output for cap heights. */
.bw-title .bw-stepname{
  margin:0; font-size:23px; font-weight:800; letter-spacing:-.025em; line-height:1.12;
  color:var(--bw-ink);
  /* A long section name wraps onto a second line rather than being cut. */
  white-space:normal; overflow:visible; overflow-wrap:anywhere;
}
.bw-titlesub{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  font-size:14px; line-height:1.4; color:var(--bw-ink-2);
}
/* Overrides the R8 single-line treatment: the certificate reference and the
   property are entered values, and the full-value contract applies to them
   exactly as it applies to a field. */
.bw-titlesub .bw-idname{
  flex:0 1 auto; font-size:14px; font-weight:700; color:var(--bw-ink-2);
  white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;
}
.bw-idprop{
  flex:0 1 auto; min-width:0; font-size:14px; color:var(--bw-ink-2);
  white-space:normal; overflow-wrap:anywhere;
}
.bw-titlesub .bw-idname + .bw-idprop::before{ content:'· '; }
.bw-ask{ flex:0 0 auto; align-self:flex-start; }
.bw-steprow{ padding:6px 14px 8px; }
.bw-stepall{ margin-left:auto; }
.bw-seg{ padding:0 14px 10px; }

/* ── The board switcher ──────────────────────────────────────────────────
   Labelled, so it cannot be mistaken for a filter or a tab bar, and
   horizontally scrollable so eight boards do not shrink each chip into
   illegibility. The chips wrap their own text: a board called
   "DB4 · Rear workshop plant room" is readable in full. */
.bw-switch{ padding:10px 14px 12px; }
/* R15: the group still HAS a name — it labels the chips for assistive tech —
   but it is no longer painted as a small-caps eyebrow above a control the
   screen's own title already names. The comp has no such label and the craft
   floor bans the kicker outright. */
.bw-switch-lab{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.bw-switch-row{ display:flex; gap:8px; align-items:center; }
/* Only the names scroll. + DB is pinned beside them so it cannot be pushed off
   the edge by a long board name -- see the note in fcBoardSwitchHTML. */
.bw-switch-scroll{ display:flex; gap:8px; flex:1 1 auto; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.bw-switch-add{ flex:0 0 auto; }
.bw-switch-btn{
  flex:0 1 auto; min-height:48px; max-width:100%; padding:9px 16px;
  border-radius:12px; border:1px solid var(--bw-line);
  background:var(--bw-surface); color:var(--bw-ink);
  font:inherit; font-size:15px; font-weight:750; line-height:1.3; text-align:center;
  white-space:normal; overflow-wrap:anywhere; cursor:pointer;
}
.bw-switch-btn.on{ background:var(--bw-accent); border-color:var(--bw-accent); color:var(--bw-accent-ink); }
.bw-switch-btn:focus-visible{ outline:3px solid #4795eb; outline-offset:2px; }

/* ── White group 1: the board's identity ─────────────────────────────────── */
body:has(.fc-shell) .fc-body > .fc-card.bw-boardcard{ padding:0; overflow:hidden; }
.bw-board-head{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:12px 14px; border:0; background:var(--bw-surface); text-align:left; cursor:pointer;
}
/* board-plate: 166x83 CSS px measured. object-fit:contain, never cover — the
   whole consumer unit and its margins are part of the object. */
.bw-board-img{ flex:0 0 auto; width:166px; height:auto; object-fit:contain; }
/* board-identity: measured cap height 36.6 comp px, wide black. */
.bw-board-name{ font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.bw-board-loc{ font-size:18px; font-weight:500; color:var(--bw-ink-2); line-height:1.25; }
/* The comp gives the identity area its own two named actions under a rule,
   split by a hairline. "Board details" navigates; "Scan board" captures. */
.bw-board-acts2{
  display:grid; grid-template-columns:1fr 1px 1fr; align-items:stretch;
  border-top:1px solid var(--bw-line);
}
.bw-board-acts2::before{ content:''; grid-column:2; background:var(--bw-line); }
.bw-quiet{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:10px 12px; border:0; background:var(--bw-surface);
  color:var(--bw-ink); font:inherit; font-size:16px; font-weight:750;
  line-height:1.3; text-align:center; cursor:pointer;
  white-space:normal; overflow-wrap:anywhere;
}
.bw-board-acts2 .bw-quiet:first-child{ grid-column:1; }
.bw-board-acts2 .bw-quiet:last-child{ grid-column:3; }
.bw-quiet svg{ flex:0 0 auto; color:var(--bw-ink); }
.bw-quiet-chev{ display:inline-flex; color:var(--bw-ink-2); }
.bw-quiet:active{ background:var(--so-panel); }
.bw-quiet:focus-visible{ outline:3px solid #4795eb; outline-offset:-3px; }
/* The scan control's truthful unavailable state, applied by ai-tools.js. It
   must still look like a control that explains itself, not a dead grey box. */
.bw-quiet[disabled], .bw-quiet.is-off{ color:var(--bw-ink-2); cursor:default; }

/* ── White group 2: the circuits on that board ───────────────────────────── */
body:has(.fc-shell) .fc-body > .fc-card.bw-cktcard{ padding:0; overflow:hidden; }
.bw-cktcard-h{
  display:flex; align-items:center; gap:10px; padding:12px 14px 8px;
}
/* R15 — WHY text-transform AND letter-spacing ARE SET HERE.
   source/css/style.css:30 styles bare `h3` for the whole application with
   `text-transform:uppercase; letter-spacing:.6px; color:var(--muted)`, which is
   why R14 shipped "CIRCUITS ON DB1" in grey small caps where the comp has
   sentence case in the ink colour. That is the owning rule for every other h3
   in the app and is left alone; this heading states its own three properties
   instead of inheriting them. */
.bw-cktcard-h h3{
  flex:1 1 auto; min-width:0; margin:0;
  font-size:19px; font-weight:800; line-height:1.2; color:var(--bw-ink);
  text-transform:none; letter-spacing:-.015em;
  white-space:normal; overflow-wrap:anywhere;   /* names a board, so it wraps */
}
.bw-cktcard-h .bw-count{
  flex:0 0 auto; min-width:34px; padding:4px 10px; border-radius:999px;
  background:var(--bw-field); color:var(--bw-ink-2);
  font-size:14px; font-weight:800; text-align:center;
}
/* R15: the comp keeps heading, count and Tools on ONE row with the comp's own
   short words. `white-space:nowrap` is on the CONTROL'S OWN two-word label, not
   on the board name beside it — "Tools" has no reason to wrap and R14 wrapped
   it onto a second row while the heading still had space. A longer real board
   name grows the heading and wraps within it; the control keeps its line. */
.bw-tools{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 13px; border-radius:11px; white-space:nowrap;
  border:1px solid var(--bw-line); background:var(--bw-surface); color:var(--bw-ink);
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.bw-tools svg{ color:var(--bw-ink-2); }
.bw-tools:active{ background:var(--so-panel); }
.bw-tools:focus-visible{ outline:3px solid #4795eb; outline-offset:2px; }

/* The numbered rows. The number is the way number and it is the first thing
   read, exactly as it is on the physical board. */
/* R15: the comp's three rows occupy y960-1300 (≈52 CSS px each at 390). The
   44px number tile keeps the tap target; the row padding comes down to meet
   the measurement instead of the row running 72px tall. */
body:has(.fc-shell) .bw-cktcard .fc-ckt.bw-ckt{ padding:8px 14px; }
body:has(.fc-shell) .bw-cktcard .bw-ckt .fc-ckt-no{
  width:44px; height:44px; border-radius:12px; font-size:17px;
}
/* circuit-rows: measured cap height 22.1 comp px, normal medium. */
body:has(.fc-shell) .bw-cktcard .bw-ckt .fc-ckt-main b{ font-size:15px; font-weight:700; line-height:1.3; }
body:has(.fc-shell) .bw-cktcard .bw-ckt .fc-ckt-main span{ font-size:13px; }
/* "Not tested" is the truth for an untested way and it must not be mistaken
   for a result. It is quiet grey — never a green tick, never "Passes". */
.bw-cktcard .bw-state{ font-size:14px; font-weight:650; white-space:normal; text-align:right; }

/* THE one strong action. */
.bw-addckt{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:calc(100% - 24px); margin:12px 12px; min-height:54px;
  border:0; border-radius:13px;
  background:var(--bw-accent); color:var(--bw-accent-ink);
  font:inherit; font-size:19px; font-weight:800; letter-spacing:-.01em; cursor:pointer;
}
.bw-addckt svg{ color:var(--bw-accent-ink); }
.bw-addckt:active{ filter:brightness(.95); }
.bw-addckt:focus-visible{ outline:3px solid #4795eb; outline-offset:2px; }

/* ── The separate Add distribution board row ─────────────────────────────── */
/* R15: image + label + plus on ONE row, as the comp draws it. R14 rendered
   this as three text lines because the row carried a help sentence under the
   label and the label itself was allowed to wrap in a narrow column. The label
   is a known short string and it fits at its own size — it is not shrunk. */
.bw-addboard{ min-height:76px; padding:10px 14px; gap:12px; }
.bw-addboard-img{ width:86px; }
.bw-addboard-t{ flex:1 1 auto; min-width:0; display:block; }
.bw-addboard-t b{ font-size:19px; font-weight:800; letter-spacing:-.015em; line-height:1.2; }
.bw-plus{
  width:44px; height:44px; border-radius:50%; background:var(--bw-field);
  display:grid; place-items:center; color:var(--bw-ink);
}
.bw-empty-boards{ padding:14px 16px; }

/* ── The bottom bar: previous section · Sections · named next section ────── */
body.bw-world .fc-footbar{ gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); }
body.bw-world .fc-footbar .btn, body.bw-world .fc-footbar .bw-sections{
  min-height:54px; border-radius:13px; font-size:16px; font-weight:750;
  /* A long section name is the label of this control, so it wraps rather than
     being cut — "Circuit schedule" and "Findings and observations" both fit. */
  white-space:normal; line-height:1.2; overflow-wrap:anywhere;
}
body.bw-world .fc-footbar .btn-amber{ font-weight:800; }
/* R15: the position the chrome's "Section 4 of 7" row used to occupy above the
   boards now rides on this control, which was already on the first viewport. */
body.bw-world .fc-footbar .bw-sections{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
body.bw-world .fc-footbar .bw-sections small{ font-size:11.5px; font-weight:650; color:var(--bw-ink-2); letter-spacing:0; }

/* ── Desktop is desktop, not a wide phone ────────────────────────────────── */
@media (min-width:760px){
  .bw-board-img{ width:180px; }
  .bw-switch-scroll{ flex-wrap:wrap; overflow-x:visible; }
  body:has(.fc-shell) .fc-body{ max-width:900px; margin:0 auto; }
}

/* ── Very narrow / 200% browser zoom ─────────────────────────────────────
   At 200% zoom on a 390px phone the CSS viewport is ~195px. Measured there:
   the Add distribution board plus-circle reached x201 and the footbar's next
   control reached x204, both past the 195px edge. Rows that were laid out as
   one line wrap instead of pushing content off the screen — every control
   stays on the page and keeps its full label. */
@media (max-width:340px){
  .bw-addboard{ flex-wrap:wrap; row-gap:8px; }
  .bw-addboard-t{ flex:1 1 100%; order:3; }
  .bw-addboard-img{ width:72px; }
  body.bw-world .fc-footbar{ flex-wrap:wrap; row-gap:8px; }
  body.bw-world .fc-footbar > *{ flex:1 1 100%; min-width:0; }
  .bw-switch-btn{ flex:1 1 100%; }
  .bw-cktcard-h{ row-gap:8px; }
  .bw-tools{ flex:1 1 100%; justify-content:center; }
}

/* ── Enlarged text / 200% zoom ───────────────────────────────────────────
   R15 — THIS RULE USED TO SAY `max-width:400px`, WHICH IS THE DEFECT.
   An ordinary iPhone-class portrait phone is 390px CSS wide, so every normal
   phone matched this block and got the degraded layout: the two peer board
   actions were stacked into a column and the consumer unit — the focal object
   of the approved comp, measured at ~166 CSS px — was shrunk to 112px. That is
   not what 200% text zoom looks like; it is what an ordinary phone looked like.
   Real 200% zoom on a 390px phone gives a ~195px CSS viewport, which is what
   the 340px block above is for.

   The threshold is now 320px, below the narrowest supported portrait width, so
   390 / 375 / 430 all get the comp's composition and only a genuinely narrow
   viewport stacks. Content still outranks the column when it does. */
@media (max-width:320px){
  .bw-board-acts2{ grid-template-columns:1fr; }
  .bw-board-acts2::before{ display:none; }
  .bw-board-acts2 .bw-quiet:first-child{ grid-column:1; }
  .bw-board-acts2 .bw-quiet:last-child{ grid-column:1; border-top:1px solid var(--bw-line); }
  .bw-board-head{ flex-wrap:wrap; }
  .bw-board-img{ width:112px; }
}

/* 18 Sep — explicit Table view beside Tools (was buried inside the Tools sheet). */
.bw-tools[disabled]{ opacity:.6; cursor:default; }
/* Phone widths: the heading and count take the first row; Table + Tools sit
   side by side on the second, so the board name never breaks mid-word. */
@media (max-width:560px){
  .bw-cktcard-h{ flex-wrap:wrap; row-gap:10px; }
  .bw-cktcard-h h3{ flex:1 1 calc(100% - 56px); }
  .bw-cktcard-h .bw-tools{ flex:1 1 calc(50% - 5px); justify-content:center; }
}