/* ============================================================================
   dashboard kernel  ·  shared design system  (tokens + shell + component vocabulary)
   ----------------------------------------------------------------------------
   The reusable half of brain's dashboard, factored out so EVERY module dashboard
   (brain, td-learn, wire-learn, future submodules) renders in one visual language.
   Sans body text + mono for numerals/code/ids (opt in via .mono; see the
   brain-refine-2-full.html spec mockup — tokens ported 2026-07-19). Radii are
   token-only (--radius-card/--radius-chip) — no existing component has been
   retrofitted with border-radius yet, that is follow-up UI work, not a token port.
   Theme toggles (mode/base/intensity) are driven by theme.js (companion file).
   Per-module IDENTITY = override --accent (+ a few identity rules) in the module's
   own app.css, which loads AFTER this file. brain keeps the default look.
   Source of truth: this file is copied verbatim into each module dashboard.
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════
   THEME SYSTEM — verbatim from grid-semantic.html
   ══════════════════════════════════════════════════════ */

:root {
  /* ── NEUTRALS · dark base ── */
  --bg:        #0a0a0b;
  --cell-bg:   #0f0f11;
  --rule:      #1e1e22;
  --rule-mid:  #26262b;
  --dim:       #54545b;
  --muted:     #7d7d86;
  --label:     #8f8f98;
  --text:      #bebcb8;
  --text-hi:   #e8e6e1;
  --num:       #f2f0eb;
  --amber: #e3b86a; --amber-dim:#6f5c33;
  /* selection blue (distinct from amber — a lit chip is a CHOICE, not a CTA)
     and the Horizons imaginative-lane accent. Net-new: promoted from brain's
     dashboard.css so every module dashboard gets them, not just brain. */
  --pick: #62a0db; --pick-dim: #2f4a63;
  --dream: #a98be0; --dream-dim: #4b3d6e;
  --panel-2: #131316;
  /* sidebar brand-mark gradient (kernel token port; was brain-local) */
  --brand-a: #efc477; --brand-b: #c99433; --brand-ink: #1a1408;
  /* module square-dot identity (Overview/Modules cross-module rows) */
  --mtd: #8cc06a; --mwire: #c678dd; --msc: #6a9fd8; --memail: #5fc9b4;
  /* IDENTITY accent — per-module override in app.css gives each dashboard a
     recognisable colour. Defaults to amber so brain is unchanged. */
  --accent: var(--amber);
  --sans: -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* ── SEMANTIC · dark · MEDIUM (default) ── */
  --ok:   #8cc06a;
  --warn: #e3b86a;
  --err:  #df6c75;
  --info: #62a0db;
  --idle: #6a6a6a;
  /* card / chip radii (net-new — the flat kernel had none; components opt in) */
  --radius-card: 12px;
  --radius-chip: 8px;
}

/* intensity · dark */
:root[data-intensity="soft"] {
  --ok:#93b87a; --warn:#d2b079; --err:#c47e7b; --info:#85a6c4;
}
:root[data-intensity="vivid"] {
  --ok:#46b95c; --warn:#e7b743; --err:#e85c5c; --info:#5a9be0;
}

/* ── BASE: paper (light) ── */
:root[data-base="paper"] {
  --bg:        #f4f3ef;
  --cell-bg:   #fbfaf7;
  --rule:      #e2e0d7;
  --rule-mid:  #d2cfc3;
  --dim:       #9a9689;
  --muted:     #6f6c5f;
  --label:     #5f5c50;
  --text:      #42403a;
  --text-hi:   #26241d;
  --num:       #1e1c15;
  --amber: #9a6c14; --amber-dim: #d9c79b;
  --pick: #3f6fb0; --pick-dim: #bcd0e6;
  --dream: #6d54ab; --dream-dim: #cabfe4;
  --panel-2: #f0eee7;
  --brand-a: #e3b358; --brand-b: #b9861f; --brand-ink: #fbfaf7;
  --mtd: #4f8a3f; --mwire: #8a4bb0; --msc: #3f6fb0; --memail: #2f8a76;
  --ok:   #4f8a3f;
  --warn: #9a6c14;
  --err:  #c0524e;
  --info: #3f6fb0;
  --idle: #8a8678;
}
/* intensity · paper */
:root[data-base="paper"][data-intensity="soft"] {
  --ok:#5d7d4f; --warn:#97772f; --err:#a8554f; --info:#466e98;
}
:root[data-base="paper"][data-intensity="vivid"] {
  --ok:#3f8a2c; --warn:#b8791a; --err:#c8463f; --info:#2f66ad;
}

/* ── MODE: mono — greyscale ── */
:root[data-mode="mono"] {
  --ok:#cfcfcf; --warn:#bdbdbd; --err:#ededed; --info:#a8a8a8; --idle:#5a5a5a;
}
:root[data-base="paper"][data-mode="mono"] {
  --ok:#56544c; --warn:#6c685f; --err:#26241e; --info:#827e74; --idle:#a29e92;
}

/* ══════════════════════════════════════════════════════
   BASE TYPOGRAPHY + LAYOUT
   ══════════════════════════════════════════════════════ */

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  height: 100%;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* explicit mono opt-in — numerals/code/ids stay tabular-mono even though
   body text is now sans (see brain-refine-2-full.html spec) */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════
   APP SHELL — sidebar-centric (spec: brain-refine-2-full.html, 2026-07-20)
   Flex row: fixed sidebar (brand · icon nav · settings · theme toggle) + main
   column (content-bar / scrolling content-area / footer). content-area is the
   scroll box so .view-flex workbench panes scroll independently. Brand tokens +
   --panel-2 live in the :root block above; the narrow layer is @media 760 below.
   Consumers add ONLY per-dashboard identity (brand text, nav list, --accent).
   ══════════════════════════════════════════════════════ */
.app-shell { display: flex; height: 100vh; min-height: 0; border: none; }

.side {
  width: 210px; flex: none; height: 100%; overflow-y: auto;
  border-right: 1px solid var(--rule); padding: 20px 14px;
  display: flex; flex-direction: column; gap: 2px; position: relative;
}
.side .brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 20px; }
.side .brand .m {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(150deg, var(--brand-a), var(--brand-b));
  display: grid; place-items: center; color: var(--brand-ink);
}
.side .brand .m svg { width: 18px; height: 18px; display: block; }
.side .brand .brand-n { font-weight: 600; color: var(--text-hi); font-size: 14px; line-height: 1.1; }
.side .brand .brand-n span {
  display: block; font-size: 10px; color: var(--muted); font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px;
}

/* nav (reuse .nav-item markup; win over any base rule via .side specificity) */
.side .left-nav { display: flex; flex-direction: column; gap: 2px; border: none; background: none; }
.side .nav-item {
  position: relative; font-size: 13px; color: var(--text);
  padding: 8px 11px; height: auto; border: none; border-radius: 8px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.side .nav-item:hover { background: var(--cell-bg); color: var(--text-hi); }
.side .nav-item:focus-visible { outline: 2px solid var(--pick); outline-offset: 1px; }
.side .nav-item.active { background: var(--panel-2); color: var(--num); font-weight: 600; }
.side .nav-item.active::before {
  content: ""; position: absolute; left: -14px; width: 3px; height: 18px;
  background: var(--amber); border-radius: 2px;
}
.side .nav-item .ic { width: 15px; flex: none; text-align: center; color: var(--muted); font-size: 12px; }
.side .nav-item.active .ic { color: var(--amber); }
.side .nav-item .nav-label { flex: none; }
.side .nav-item .nav-badge { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.side .nav-item.active .nav-badge { color: var(--amber); }
.side .nav-item.nav-ext { color: var(--muted); text-decoration: none; }
.side .nav-item.nav-ext .nav-ext-arrow { margin-left: auto; font-size: 10px; opacity: 0.6; }

.side-spacer { flex: 1 1 auto; }

/* settings pop (color / intensity, opens above the Settings item) */
.settings-pop {
  position: absolute; left: 12px; bottom: 60px; z-index: 60;
  background: var(--panel-2); border: 1px solid var(--rule-mid); border-radius: 8px;
  padding: 9px; display: flex; flex-direction: column; gap: 9px; min-width: 156px;
}
.settings-pop[hidden] { display: none; }
.settings-pop .sp-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.settings-pop .sp-label {
  width: 100%; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label);
}
.settings-pop button {
  font-size: 11px; color: var(--muted); cursor: pointer; padding: 3px 8px;
  border-radius: 6px; border: 1px solid var(--rule); background: none; font-family: inherit;
}
.settings-pop button:hover { color: var(--text-hi); border-color: var(--dim); }
.settings-pop button.on { color: var(--pick); border-color: var(--pick-dim); }

/* theme toggle pinned at the sidebar bottom */
.side-foot {
  padding: 12px 8px 0; border-top: 1px solid var(--rule); margin-top: 8px;
  display: flex; align-items: center; gap: 8px; flex: none;
}
.side-foot .sf-label { margin-right: auto; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.side-foot .th {
  font-size: 11px; color: var(--muted); cursor: pointer; padding: 3px 8px;
  border-radius: 6px; border: 1px solid var(--rule); background: none; font-family: inherit;
}
.side-foot .th:hover { color: var(--text-hi); border-color: var(--dim); }
.side-foot .th.on { color: var(--pick); border-color: var(--pick-dim); }

/* main column: fixed top content-bar, scrolling content-area, fixed footer */
.main-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.content-bar {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 16px 24px 14px; border-bottom: 1px solid var(--rule);
}
.content-bar .view-title { font-size: 19px; font-weight: 600; color: var(--text-hi); letter-spacing: -0.01em; }
.content-bar .cb-updated { font-size: 11px; color: var(--muted); }
.content-bar .cb-spacer { flex: 1; }
.content-bar .cb-actions { display: flex; align-items: center; gap: 8px; }
.content-bar .refresh-btn {
  font-family: var(--mono); font-size: 11px; background: none; border: 1px solid var(--rule);
  color: var(--muted); padding: 5px 10px; border-radius: var(--radius-chip, 8px); cursor: pointer; letter-spacing: 0.04em;
}
.content-bar .refresh-btn:hover { color: var(--text-hi); border-color: var(--rule-mid); }
.content-bar .synth-btn, .content-bar .mine-btn {
  font-size: 11px; background: none; border: 1px solid var(--amber-dim); color: var(--amber);
  padding: 5px 10px; border-radius: var(--radius-chip, 8px); cursor: pointer; font-weight: 500;
}
.content-bar .synth-btn:hover, .content-bar .mine-btn:hover { border-color: var(--amber); color: var(--text-hi); background: none; }
.content-bar .refresh-btn:disabled, .content-bar .synth-btn:disabled, .content-bar .mine-btn:disabled { opacity: 0.4; cursor: default; }

/* content-area stays the scroll container (keeps .view-flex workbench intact);
   no padding — the views own their gutters */
.content-area { flex: 1 1 0; min-height: 0; overflow: auto; padding: 0; }
.content-area .view.view-flex.active { height: 100%; }

.app-footer { flex: none; padding: 8px 34px; border-top: 1px solid var(--rule); }
.footer-left { font-size: 8.5px; color: var(--dim); letter-spacing: 0.08em; }
.footer-right { font-size: 8.5px; color: var(--muted); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════
   VIEWS — show/hide
   ══════════════════════════════════════════════════════ */

.view { display: none; }
.view.active { display: block; }
/* Workbench views fill the content area so the rail + pane scroll independently
   and the page itself never scrolls. Opt in with class="view view-flex". */
.view.view-flex.active { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ══════════════════════════════════════════════════════
   KPI ROW — verbatim from grid-semantic.html
   ══════════════════════════════════════════════════════ */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--rule);
}
.kpi-cell {
  padding: 10px 14px 12px;
  border-right: 1px solid var(--rule);
}
.kpi-cell:last-child { border-right: none; }
.kpi-label {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 6px;
  display: block;
}
.kpi-value {
  font-size: 26px;
  font-weight: 400;
  color: var(--num);
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  font-size: 9px;
  color: var(--muted);
  margin-top: 5px;
  display: block;
  letter-spacing: 0.04em;
}
.kpi-sub.warn { color: var(--warn); }
.kpi-sub.err  { color: var(--err); }

/* ══════════════════════════════════════════════════════
   SECTION HEADER — verbatim
   ══════════════════════════════════════════════════════ */

.section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.section-title {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.section-count { font-size: 8.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════
   TIGHT TABLE — verbatim + extensions
   ══════════════════════════════════════════════════════ */

.tbl { width: 100%; border-collapse: collapse; }
.tbl thead tr { border-bottom: 1px solid var(--rule-mid); }
.tbl thead th {
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--label);
  padding: 5px 14px;
  text-align: left;
  font-weight: 400;
}
.tbl thead th.r { text-align: right; }
.tbl tbody tr { border-bottom: 1px solid var(--rule); }
.tbl tbody tr:last-child { border-bottom: none; }
.tbl tbody td {
  padding: 5px 14px;
  font-size: 11px;
  color: var(--text);
  vertical-align: middle;
}
.tbl tbody td.num {
  text-align: right;
  color: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.tbl tbody td.num.warn { color: var(--warn); }
.tbl tbody td.num.err  { color: var(--err); }
.tbl tbody td.num.ok   { color: var(--ok); }
.tbl tbody td.dim      { color: var(--muted); font-size: 10px; }
.tbl tbody td.label-cell { color: var(--text-hi); font-size: 10.5px; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover td { background: var(--cell-bg); }
.tbl tbody tr.err-row td { color: var(--err); }
.tbl tbody tr.err-row td.label-cell { color: var(--err); }

/* ══════════════════════════════════════════════════════
   INLINE BAR — verbatim + colour variants
   ══════════════════════════════════════════════════════ */

.bar-wrap { display: flex; align-items: center; gap: 5px; }
.bar-track { width: 80px; height: 3px; background: var(--rule-mid); flex-shrink: 0; position: relative; }
.bar-fill { height: 100%; background: var(--dim); }
.bar-fill.amber { background: var(--muted); }
.bar-fill.ok    { background: var(--ok); }
.bar-fill.warn  { background: var(--warn); }
.bar-fill.err   { background: var(--err); }
.bar-fill.info  { background: var(--info); }

/* ══════════════════════════════════════════════════════
   INBOX COUNT STRIP — verbatim
   ══════════════════════════════════════════════════════ */

.inbox-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}
.inbox-count-cell {
  padding: 7px 14px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.inbox-count-cell:last-child { border-right: none; }
.inbox-count-label { font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.inbox-count-val { font-size: 16px; color: var(--num); font-variant-numeric: tabular-nums; line-height: 1; }
.inbox-count-val.zero  { color: var(--muted); }
.inbox-count-val.ok    { color: var(--ok); }
.inbox-count-val.warn  { color: var(--warn); }
.inbox-count-val.info  { color: var(--info); }
.inbox-count-val.idle  { color: var(--idle); }

/* ══════════════════════════════════════════════════════
   DETAIL ROW (Overview extras)
   ══════════════════════════════════════════════════════ */

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.detail-col { border-right: 1px solid var(--rule); }
.detail-col:last-child { border-right: none; }

/* ══════════════════════════════════════════════════════
   LEGEND STRIP — verbatim
   ══════════════════════════════════════════════════════ */

.legend-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  padding: 7px 14px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  font-size: 9px;
  letter-spacing: 0.06em;
}
.legend-bar .legend-title { color: var(--label); text-transform: uppercase; letter-spacing: 0.14em; }
.legend-bar .legend-neutral { color: var(--num); }

/* ══════════════════════════════════════════════════════
   SEMANTIC COLOUR HELPERS — verbatim
   ══════════════════════════════════════════════════════ */

.kpi-value.err { color: var(--err); }
.kpi-value.warn { color: var(--warn); }
.kpi-value.ok { color: var(--ok); }
.s-ok   { color: var(--ok); }
.s-warn { color: var(--warn); }
.s-err  { color: var(--err); }
.s-info { color: var(--info); }
.s-idle { color: var(--idle); }
.s-num  { color: var(--num); }

/* ══════════════════════════════════════════════════════
   SEARCH VIEW
   ══════════════════════════════════════════════════════ */

.search-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-bar input {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--cell-bg);
  border: 1px solid var(--rule-mid);
  color: var(--text-hi);
  padding: 4px 8px;
  flex: 1;
  outline: none;
}
.search-bar input:focus { border-color: var(--dim); }
.search-bar input::placeholder { color: var(--muted); }
.search-count { font-size: 9px; color: var(--dim); }

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */

#modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#modal.show { display: flex; }
.modal-box {
  background: var(--bg);
  border: 1px solid var(--rule-mid);
  min-width: 320px;
  max-width: 480px;
  width: 100%;
}
.modal-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-hi);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
.modal-body-text {
  font-size: 11px;
  color: var(--text);
  padding: 10px 14px;
  line-height: 1.5;
}
.modal-field { padding: 6px 14px; }
.modal-field label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); display: block; margin-bottom: 4px; }
.modal-field input,
.modal-field textarea {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--cell-bg);
  border: 1px solid var(--rule-mid);
  color: var(--text-hi);
  padding: 4px 8px;
  width: 100%;
  outline: none;
  resize: vertical;
}
.modal-field input:focus,
.modal-field textarea:focus { border-color: var(--dim); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
}
.modal-actions button {
  font-family: var(--mono);
  font-size: 9px;
  background: none;
  border: 1px solid var(--rule-mid);
  color: var(--muted);
  padding: 4px 12px;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.modal-actions button:hover { color: var(--text-hi); border-color: var(--dim); }
.modal-actions button.modal-ok { border-color: var(--ok); color: var(--ok); }
.modal-actions button.modal-ok:hover { background: var(--ok); color: var(--bg); }
.modal-actions button.modal-danger { border-color: var(--err); color: var(--err); }
.modal-actions button.modal-danger:hover { background: var(--err); color: var(--bg); }

/* ══════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════ */

#toast {
  position: fixed;
  bottom: 30px;
  right: 20px;
  background: var(--text-hi);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border: 1px solid var(--dim);
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  font-family: var(--mono);
}
#toast.show { opacity: 1; }

/* ══════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════ */

.empty-state {
  padding: 20px 14px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════
   SPAN HELPERS
   ══════════════════════════════════════════════════════ */

.span-full { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════════
   COUNT-FLEXIBLE MODIFIERS — additive; default kpi-row is 6-up (brain).
   Module dashboards with fewer metrics opt in (e.g. <div class="kpi-row cols-5">).
   ══════════════════════════════════════════════════════ */

.kpi-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.inbox-counts.cols-3 { grid-template-columns: repeat(3, 1fr); }
.inbox-counts.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ══════════════════════════════════════════════════════
   WORKBENCH — two-pane view scaffold (navigator rail + detail pane)
   ----------------------------------------------------------------------------
   The answer to "a flat list where every row repeats its own buttons". The rail
   navigates (projects, status buckets, panels); the pane shows ONE selection
   with a SINGLE sticky action bar. N x per-row buttons collapse to one bar.
   Adopted by brain (Work / Horizons / Inbox) and available to every module.
   Rail width: default 230px, .rail-sm 190px (short labels, e.g. status
   buckets), .rail-lg 280px (long project paths).
   ══════════════════════════════════════════════════════ */

.wb { display: grid; grid-template-columns: 230px minmax(0, 1fr); height: 100%; min-height: 0; }
.wb.rail-sm { grid-template-columns: 190px minmax(0, 1fr); }
.wb.rail-lg { grid-template-columns: 280px minmax(0, 1fr); }

/* ── RAIL ── */
.wb-rail { border-right: 1px solid var(--rule); display: flex; flex-direction: column; overflow: auto; min-height: 0; }
.wb-rail-top {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--rule); flex: none;
}
.wb-filter {
  font-family: var(--mono); font-size: 9px; line-height: 1;
  background: var(--cell-bg); border: 1px solid var(--rule-mid); color: var(--text-hi);
  padding: 4px 7px; outline: none; letter-spacing: 0.04em; flex: 1; min-width: 0;
}
.wb-filter:focus { border-color: var(--dim); }
.wb-filter::placeholder { color: var(--muted); }
.wb-grp {
  padding: 12px 12px 5px; font-size: 8px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--label); flex: none;
}
.wb-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  cursor: pointer; user-select: none; border-left: 2px solid transparent; flex: none;
}
.wb-item:hover { background: var(--cell-bg); }
.wb-item.sel { background: var(--cell-bg); border-left-color: var(--accent); }
.wb-item-name {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-item.sel .wb-item-name { color: var(--text-hi); }
.wb-item-n { font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.wb-item.sel .wb-item-n { color: var(--muted); }
/* rail divider before trailing panel entries (e.g. Live agents / Machines) */
.wb-rail-sep { border-top: 1px solid var(--rule); margin-top: 8px; flex: none; }

/* status dot — one hue per state, the ONLY colour the rail carries */
.wb-dot { width: 5px; height: 5px; flex: none; display: inline-block; background: var(--dim); }
.wb-dot.ok { background: var(--ok); }
.wb-dot.warn { background: var(--warn); }
.wb-dot.err { background: var(--err); }
.wb-dot.info { background: var(--info); }
.wb-dot.accent { background: var(--accent); }
.wb-dot.idle { background: var(--dim); }

/* ── PANE ── */
.wb-pane { display: flex; flex-direction: column; overflow: auto; min-width: 0; min-height: 0; }
.wb-phdr { padding: 15px 20px 12px; border-bottom: 1px solid var(--rule); flex: none; }
.wb-ptitle { font-size: 16px; color: var(--text-hi); letter-spacing: 0.01em; line-height: 1.25; margin-bottom: 7px; }
.wb-pmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 9.5px; color: var(--muted); letter-spacing: 0.03em;
}
.wb-pmeta .sep { color: var(--dim); }

/* the single action bar — replaces per-row button repetition */
.wb-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 20px; border-bottom: 1px solid var(--rule);
  background: var(--cell-bg); position: sticky; top: 0; z-index: 5; flex: none;
}
.wb-bar-label { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.wb-bar-spacer { margin-left: auto; }
.wb-bar-note { font-size: 9px; color: var(--dim); letter-spacing: 0.03em; }

.wb-sub { padding: 14px 20px 6px; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.wb-rows { display: flex; flex-direction: column; }
.wb-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--rule); font-size: 11.5px;
}
.wb-row:hover { background: var(--cell-bg); }
.wb-row-text { flex: 1; min-width: 0; line-height: 1.55; color: var(--text); word-break: break-word; }
.wb-row-actions { display: flex; gap: 6px; flex: none; opacity: 0; transition: opacity .12s ease; }
.wb-row:hover .wb-row-actions,
.wb-row:focus-within .wb-row-actions { opacity: 1; }
/* card grid inside a pane (idea cards, entry cards) */
.wb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 14px 20px; }
.wb-empty { padding: 22px 20px; font-size: 10px; color: var(--muted); line-height: 1.6; }

/* square checkbox — native controls break the mono/1px language */
.wb-check {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 11px; height: 11px; margin-top: 4px;
  border: 1px solid var(--dim); background: none; cursor: pointer;
}
.wb-check:hover { border-color: var(--accent); }
.wb-check:checked { border-color: var(--accent); background: var(--accent); }

/* ── NARROW: rail becomes a horizontal strip above the pane ──
   Breakpoint 680→760 (2026-07-19 mobile polish port, spec:
   brain-refine-2-full.html — its mobile layer is @media 760). */
@media (max-width: 760px) {
  .wb, .wb.rail-sm, .wb.rail-lg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; }
  .wb-rail {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: none; border-bottom: 1px solid var(--rule);
  }
  /* Rail contents are usually held in a render container (#…-rail-list) rather
     than being direct children. Flatten it so the ITEMS join the strip's flex
     row — without this they stack vertically inside the wrapper. */
  .wb-rail > div:not(.wb-rail-top) { display: contents; }
  .wb-rail-top { border-bottom: none; border-right: 1px solid var(--rule); padding: 6px 8px; }
  .wb-rail-top .wb-filter { width: 96px; flex: 0 0 auto; }
  .wb-grp { display: flex; align-items: center; padding: 0 6px 0 12px; border-right: 1px solid var(--rule); }
  .wb-item { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .wb-item.sel { border-bottom-color: var(--accent); }
  .wb-item-name { overflow: visible; }
  .wb-rail-sep { display: none; }
  .wb-cards { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .wb-phdr, .wb-bar, .wb-row, .wb-sub, .wb-empty { padding-left: 12px; padding-right: 12px; }
  /* the shell already stacks on narrow; a fixed-height workbench would squash it */
  .view.view-flex.active { height: auto; }

  /* ── MOBILE POLISH (2026-07-19 port, spec brain-refine-2-full.html) ──
     Generic only — brain-view rules live in the consumer's own css. */
  /* tap targets ~42-44px */
  .wb-item { min-height: 42px; }
  .nav-item { height: auto; min-height: 42px; }
  .wb-filter, .search-bar input { min-height: 42px; }
  .modal-actions button { min-height: 42px; padding: 8px 14px; }
  .hdr-meta .refresh-btn { min-height: 42px; }
  /* inbox count strip scrolls horizontally instead of squeezing (spec .bkcards) */
  .inbox-counts, .inbox-counts.cols-3, .inbox-counts.cols-5 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(96px, max-content);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}