/*
  BIT.Web.UI component styles (B-2). Semantic tokens only (T-1): colours, type,
  spacing, radii and component geometry (section 3.5, Amendment 4) all come from
  bit-tokens.css. The only literal sizes left are the two breakpoints (custom
  properties cannot be used in @media; they match --bit-bp-*, section 7) and the
  screen-reader-only and skip-link idioms (1px clip, off-screen offset).
  Box-shadow is used only for focus rings and floating overlays (P-4).
*/

/* ==== Base ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--bit-font-ui);
  font-size: var(--bit-fs-body);
  line-height: 1.45;
  color: var(--bit-text-primary);
  background: var(--bit-surface-page);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; background: var(--bit-surface-page); color: var(--bit-text-primary); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }                 /* T-6: 400/500 only */
h1 { font-size: var(--bit-fs-page); }
h2 { font-size: var(--bit-fs-title); }
h3 { font-size: var(--bit-fs-body); }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--bit-border-control); text-underline-offset: var(--bit-space-half); }
a:hover { text-decoration-color: currentColor; }
b, strong { font-weight: 500; }
:focus-visible { outline: none; box-shadow: var(--bit-focus-ring); }   /* A-3 */
[hidden] { display: none !important; }
.bit-num, .bit-grid td.bit-grid__num, .bit-metric__value, time { font-variant-numeric: tabular-nums; }   /* P-10, T-8 */
.bit-mono { font-family: var(--bit-font-mono); font-size: var(--bit-fs-caption); }
.bit-secondary { color: var(--bit-text-secondary); }
.bit-caption { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); }
.bit-micro { font-size: var(--bit-fs-micro); color: var(--bit-text-secondary); }
.bit-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bit-skip { position: absolute; left: var(--bit-space-2); top: -100px; z-index: 50; }
.bit-skip:focus { top: var(--bit-space-2); }

/* Status words (S-2: text-coloured, never chips, in grids; A-2: always a word) */
.bit-status-ok      { color: var(--bit-status-ok); }
.bit-status-danger  { color: var(--bit-status-danger); }
.bit-status-accent  { color: var(--bit-accent-text); }
.bit-status-neutral { color: var(--bit-status-neutral); }

/* ==== App shell — section 5 regions (L-1) =================================== */
.bit-app {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: var(--bit-rail-w) minmax(0, 1fr) auto;   /* L-1 */
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "scope scope scope"
    "rail  trail trail"
    "rail  main  panel";
}
.bit-app--norail { grid-template-columns: 0 minmax(0, 1fr) auto; }
.bit-app__main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
.bit-content { flex: 1; padding: var(--bit-space-6); min-width: 0; }
.bit-content > * + * { margin-top: var(--bit-space-5); }
.bit-page-head { display: flex; align-items: center; gap: var(--bit-space-3); flex-wrap: wrap; }
.bit-page-head h1 { flex: 1; min-width: 0; }

/* ==== C-10 Scope bar (L-2) ================================================== */
.bit-scope {
  grid-area: scope;
  display: flex; align-items: center; gap: var(--bit-space-3);
  min-height: var(--bit-scope-h);
  padding: var(--bit-space-2) var(--bit-space-4);
  background: var(--bit-surface-chrome);
  border-bottom: var(--bit-hairline) solid var(--bit-border-hairline);
}
.bit-scope__trail { display: flex; align-items: center; gap: var(--bit-space-2); flex: 1; min-width: 0; flex-wrap: wrap; }
.bit-scope__ancestor { color: var(--bit-text-secondary); text-decoration: none; }
.bit-scope__ancestor:hover { color: var(--bit-text-primary); text-decoration: underline; }
.bit-scope__sep { color: var(--bit-text-faint); }
.bit-scope__current { font-weight: 500; font-size: var(--bit-fs-body); margin: 0; }
.bit-scope__meta { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); display: flex; gap: var(--bit-space-3); align-items: center; white-space: nowrap; }
.bit-scope__meta a { color: var(--bit-text-secondary); }
.bit-scope__back { display: none; }
.bit-scope__compact { display: none; }

/* ==== C-9 Signal dot ======================================================== */
.bit-dot { display: inline-block; flex: none; width: var(--bit-dot); height: var(--bit-dot); border-radius: 50%; background: var(--bit-accent-signal); }   /* C-9 */

/* ==== C-11 Command rail ===================================================== */
.bit-rail {
  grid-area: rail;
  width: var(--bit-rail-w);
  background: var(--bit-surface-chrome);
  border-right: var(--bit-hairline) solid var(--bit-border-hairline);
  padding: var(--bit-space-2) 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--bit-space-1);
}
.bit-rail__group + .bit-rail__group { border-top: var(--bit-hairline) solid var(--bit-border-hairline); padding-top: var(--bit-space-1); margin-top: var(--bit-space-1); }
.bit-rail__group { display: flex; flex-direction: column; gap: var(--bit-space-1); }
.bit-rail__tool {
  display: grid; place-items: center;
  width: var(--bit-rail-tool); height: var(--bit-rail-tool);
  border: var(--bit-hairline) solid transparent;
  border-radius: var(--bit-radius-card);
  color: var(--bit-text-secondary);
  text-decoration: none;
}
.bit-rail__tool:hover { color: var(--bit-text-primary); border-color: var(--bit-border-hairline); }
.bit-rail__tool[aria-current="page"] {                               /* active: accent triple */
  background: var(--bit-accent-bg); border-color: var(--bit-accent-border); color: var(--bit-accent-text);
}
.bit-rail__tool svg { width: var(--bit-icon-md); height: var(--bit-icon-md); }   /* C-11 glyphs */
.bit-rail__label { display: none; }

/* R-1 bottom tab bar (mobile) */
.bit-tabbar { display: none; }

/* ==== C-15 Step trail ======================================================= */
.bit-steps {
  grid-area: trail;
  display: flex; align-items: center; gap: var(--bit-space-2);
  padding: var(--bit-space-3) var(--bit-space-6);
  background: var(--bit-surface-page);
  border-bottom: var(--bit-hairline) solid var(--bit-border-hairline);
  font-size: var(--bit-fs-caption);
}
.bit-steps ol { display: flex; align-items: center; gap: var(--bit-space-2); list-style: none; margin: 0; padding: 0; flex: 1; flex-wrap: wrap; }
.bit-steps li { display: flex; align-items: center; gap: var(--bit-space-2); }
.bit-steps li + li::before { content: ""; width: var(--bit-space-4); border-top: var(--bit-hairline) solid var(--bit-border-hairline); }
.bit-step { padding: var(--bit-space-half) var(--bit-space-2); border: var(--bit-hairline) solid transparent; border-radius: var(--bit-radius-control); color: var(--bit-text-secondary); }
.bit-step--done { color: var(--bit-status-ok); text-decoration: none; }
.bit-step--done:hover { text-decoration: underline; }
.bit-step--current { background: var(--bit-accent-bg); border-color: var(--bit-accent-border); color: var(--bit-accent-text); font-weight: 500; }
.bit-steps__count { color: var(--bit-text-faint); white-space: nowrap; }
.bit-steps__compact { display: none; }

/* ==== C-1 Metric card (R-6) ================================================= */
.bit-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--bit-col-metric), 1fr)); gap: var(--bit-space-3); max-width: var(--bit-content-max); }
.bit-metric {
  background: var(--bit-surface-raised);
  border: var(--bit-hairline) solid var(--bit-border-card);
  border-radius: var(--bit-radius-card);
  padding: var(--bit-space-3) var(--bit-space-4);
}
.bit-metric__label { font-size: var(--bit-fs-micro); color: var(--bit-text-secondary); }
.bit-metric__value { font-size: var(--bit-fs-metric); font-weight: 500; margin-top: var(--bit-space-1); }
.bit-metric__value--ok { color: var(--bit-status-ok); }
.bit-metric__value--danger { color: var(--bit-status-danger); }
.bit-metric__value--accent { color: var(--bit-accent-text); }
.bit-metric__detail { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); }

/* ==== Cards / sections (P-4: hairlines and background steps, no nesting chrome) */
.bit-card {
  background: var(--bit-surface-raised);
  border: var(--bit-hairline) solid var(--bit-border-card);
  border-radius: var(--bit-radius-card);
  padding: var(--bit-space-4);
}
.bit-card > * + * { margin-top: var(--bit-space-3); }
.bit-section > * + * { margin-top: var(--bit-space-3); }
.bit-section__head { display: flex; align-items: center; gap: var(--bit-space-3); }
.bit-section__head h2 { flex: 1; }
/* L-5 (Amendment 5): in a data form, each section after the first is set off by one field's height
   (label + gap + control), so the gap follows density */
.bit-section:has(> .bit-form-grid) ~ .bit-section:has(> .bit-form-grid) {
  margin-top: calc(var(--bit-label-h) + var(--bit-space-1) + var(--bit-control-h));
}

/* ==== C-2 Data grid ========================================================= */
.bit-grid-wrap { display: flex; flex-direction: column; gap: var(--bit-space-3); }
.bit-grid-tools { display: flex; flex-wrap: wrap; gap: var(--bit-space-2); align-items: center; }
.bit-grid-tools .bit-search { flex: 1 1 var(--bit-col-field); max-width: var(--bit-search-max); }
.bit-grid-tools .bit-filter { flex: 0 1 var(--bit-filter-w); width: auto; }
.bit-grid-scroll { overflow-x: auto; }
.bit-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bit-cell-fs);
  background: var(--bit-surface-raised);
  border: var(--bit-hairline) solid var(--bit-border-card);
  border-radius: var(--bit-radius-card);
}
.bit-grid th {
  font-size: var(--bit-fs-micro); font-weight: 400; color: var(--bit-text-secondary);
  text-align: left; white-space: nowrap;
  padding: var(--bit-space-2) var(--bit-space-3);
  border-bottom: var(--bit-hairline) solid var(--bit-border-hairline);
}
.bit-grid th a, .bit-grid th button {
  color: inherit; text-decoration: none; background: none; border: 0; font: inherit; padding: 0; cursor: pointer;
}
.bit-grid th[aria-sort] { color: var(--bit-text-primary); }
.bit-grid th .bit-sort { color: var(--bit-text-faint); margin-left: var(--bit-space-half); }
.bit-grid td {
  padding: var(--bit-row-pad-y) var(--bit-space-3);
  border-bottom: var(--bit-hairline) solid var(--bit-border-hairline);
  vertical-align: middle;
}
[data-bit-density="compact"] .bit-grid td { border-bottom-color: var(--bit-border-row); }
.bit-grid tr > :first-child { border-left: var(--bit-edge) solid transparent; }  /* room for the T-9 marker */
.bit-grid tbody tr:last-child td { border-bottom: 0; }
.bit-grid .bit-grid__num, .bit-grid th.bit-grid__num { text-align: right; }
.bit-grid tbody tr:hover { background: var(--bit-surface-chrome); }
.bit-grid tbody tr[aria-selected="true"], .bit-grid tbody tr.bit-row--expanded {
  background: var(--bit-accent-bg);
}
.bit-grid tbody tr[aria-selected="true"] > :first-child,
.bit-grid tbody tr.bit-row--expanded > :first-child { border-left-color: var(--bit-accent-signal); }   /* T-9 */
.bit-grid__link { font-weight: 500; text-decoration: none; }
.bit-grid__link:hover { text-decoration: underline; }
.bit-grid__actions { text-align: right; white-space: nowrap; width: 1%; }
.bit-grid__actions form { display: inline; }
.bit-grid__empty td { padding: 0; }
.bit-expand-toggle {
  display: inline-grid; place-items: center; width: var(--bit-target-sm); height: var(--bit-target-sm); padding: 0;
  border: 0; background: none; color: var(--bit-text-faint); cursor: pointer; border-radius: var(--bit-radius-control);
}
.bit-expand-toggle svg { width: var(--bit-icon-xs); height: var(--bit-icon-xs); transition: transform .12s; }
.bit-expand-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* ==== C-13 Expansion body =================================================== */
.bit-grid tr.bit-expansion { background: var(--bit-surface-chrome); }
.bit-grid tr.bit-expansion:hover { background: var(--bit-surface-chrome); }
.bit-grid tr.bit-expansion > td:first-child { border-left-color: var(--bit-accent-signal); }   /* continues T-9 */
.bit-expansion__body { padding: var(--bit-space-2) var(--bit-space-2) var(--bit-space-3); font-size: var(--bit-fs-caption); }
.bit-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bit-col-pair), 1fr)); gap: var(--bit-space-2) var(--bit-space-5); margin: 0; }
.bit-pairs > div { min-width: 0; }
.bit-pairs dt { font-size: var(--bit-fs-micro); color: var(--bit-text-secondary); }
.bit-pairs dd { margin: 0; overflow-wrap: anywhere; }

/* Pager */
.bit-pager { display: flex; align-items: center; gap: var(--bit-space-3); font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); }
.bit-pager__count { flex: 1; font-variant-numeric: tabular-nums; }

/* ==== C-3 Well, labels and E-1 ============================================== */
.bit-form-grid {                                                    /* L-5 2–3 column header fields */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bit-col-field), 1fr));
  gap: var(--bit-space-3) var(--bit-space-4); max-width: var(--bit-content-max);
}
.bit-form-grid .bit-field--wide { grid-column: 1 / -1; }
.bit-field { display: flex; flex-direction: column; gap: var(--bit-space-1); min-width: 0; }
.bit-label { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); }
/* Amendment 5: required fields carry an asterisk; optional fields carry nothing */
.bit-label-row { display: flex; align-items: center; gap: var(--bit-space-1); min-width: 0; min-height: var(--bit-label-h); }
.bit-label__req { color: var(--bit-text-primary); margin-left: var(--bit-space-half); }

/* ==== C-20 Info tip (Amendment 5): an explanation behind a button after the label == */
.bit-info {
  display: inline-grid; place-items: center; flex: none;
  width: var(--bit-icon-sm); height: var(--bit-icon-sm); padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--bit-text-secondary); cursor: help;
}
.bit-info:hover, .bit-info[aria-expanded="true"] { color: var(--bit-accent-text); }
.bit-info svg { width: var(--bit-icon-xs); height: var(--bit-icon-xs); }
.bit-tip[popover] {
  position: fixed; inset: auto; margin: 0;                         /* placed by bit-info.js */
  width: max-content; max-width: min(var(--bit-tip-w), calc(100vw - 2 * var(--bit-space-4)));
  padding: var(--bit-space-2) var(--bit-space-3);
  background: var(--bit-surface-raised); color: var(--bit-text-primary);
  border: var(--bit-hairline) solid var(--bit-border-card); border-radius: var(--bit-radius-card);
  box-shadow: var(--bit-shadow-float);                              /* floating layer (P-4, P-5) */
  font-size: var(--bit-fs-caption); line-height: 1.45; overflow-wrap: anywhere;
}
.bit-well {
  width: 100%;
  min-height: var(--bit-control-h);
  padding: 0 var(--bit-space-3);
  font: inherit; font-size: var(--bit-fs-body); color: var(--bit-text-primary);
  background: var(--bit-surface-well);
  border: var(--bit-hairline) solid var(--bit-border-control);
  border-radius: var(--bit-radius-control);
}
textarea.bit-well { padding: var(--bit-space-2) var(--bit-space-3); min-height: calc(var(--bit-control-h) * 2.5); resize: vertical; }
select.bit-well { padding-right: var(--bit-space-6); }
/* C-3b (proposed amendment, Music Service reporting D-R15): a native multi-select as a well. Its own
   size attribute shows five rows; the single-line well height would clip it. */
select[multiple].bit-well { height: auto; padding: var(--bit-space-1) var(--bit-space-2); }
select[multiple].bit-well option { padding: var(--bit-space-half) var(--bit-space-1); border-radius: var(--bit-radius-control); }
.bit-card .bit-well, .bit-panel .bit-well { background: var(--bit-surface-well-inset); }
.bit-well:focus-visible { box-shadow: var(--bit-focus-ring); }
.bit-well--accent { border-color: var(--bit-accent-border); color: var(--bit-accent-text); }   /* C-3 amber-meaning value */
.bit-well[aria-invalid="true"], .bit-well.input-validation-error { border-color: var(--bit-status-danger); }   /* E-1 */
.bit-field__error, .field-validation-error { font-size: var(--bit-fs-caption); color: var(--bit-status-danger); }
.field-validation-valid { display: none; }
.bit-check { display: inline-flex; align-items: center; gap: var(--bit-space-2); min-height: var(--bit-control-h); }
.bit-check input { width: var(--bit-checkbox); height: var(--bit-checkbox); accent-color: var(--bit-text-primary); margin: 0; }
.bit-search { min-width: 0; }
/* Read-only values never look like wells (P-8) */
.bit-value { min-height: var(--bit-control-h); display: flex; align-items: center; overflow-wrap: anywhere; }

/* ==== C-4 Pill ============================================================== */
.bit-pills { display: flex; flex-wrap: wrap; gap: var(--bit-space-2); }
.bit-pill {
  display: inline-flex; align-items: center; gap: var(--bit-space-1);
  min-height: var(--bit-pill-h); padding: 0 var(--bit-space-3);                   /* horizontal padding only */
  font: inherit; font-size: var(--bit-fs-caption); color: var(--bit-text-secondary);
  background: var(--bit-surface-well);
  border: var(--bit-hairline) solid var(--bit-border-control);
  border-radius: var(--bit-radius-control);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bit-pill:hover { color: var(--bit-text-primary); }
.bit-pill[aria-pressed="true"], .bit-pill[aria-current="true"] {
  background: var(--bit-accent-bg); border-color: var(--bit-accent-border); color: var(--bit-accent-text);
}

/* ==== C-5 Badge ============================================================= */
.bit-badge {
  display: inline-flex; align-items: center; gap: var(--bit-space-1);
  padding: 0 var(--bit-space-2);
  font-size: var(--bit-fs-caption); line-height: var(--bit-badge-h); font-weight: 400;
  border: var(--bit-hairline) solid; border-radius: var(--bit-radius-control); white-space: nowrap;
}
.bit-badge--accent { background: var(--bit-accent-bg); border-color: var(--bit-accent-border); color: var(--bit-accent-text); }
.bit-badge--danger { background: var(--bit-status-danger-bg); border-color: var(--bit-status-danger); color: var(--bit-status-danger); }

/* ==== C-6 Notice ============================================================ */
.bit-notice {
  display: flex; gap: var(--bit-space-2); align-items: flex-start;
  padding: var(--bit-space-2) var(--bit-space-3);
  border: var(--bit-hairline) solid; border-radius: var(--bit-radius-card);
  font-size: var(--bit-fs-body);
}
.bit-notice--accent { background: var(--bit-accent-bg); border-color: var(--bit-accent-border); color: var(--bit-accent-text); }
.bit-notice--danger { background: var(--bit-status-danger-bg); border-color: var(--bit-status-danger); color: var(--bit-status-danger); }
.bit-notice svg { width: var(--bit-icon-sm); height: var(--bit-icon-sm); flex: none; margin-top: var(--bit-space-half); }
/* Proposed amendment, C-6 status bar (Music Service ACCOUNTS-SPEC D-A17): one non-dismissible notice for an
   organisation-wide condition, directly under the scope bar, the content's full width, one line, one link */
.bit-statusbar { padding: var(--bit-space-3) var(--bit-space-6) 0; }
.bit-statusbar .bit-notice a { color: inherit; font-weight: 500; }

/* ==== C-7 Buttons =========================================================== */
.bit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bit-space-2);
  min-height: var(--bit-control-h); min-width: var(--bit-tap-min);
  padding: 0 var(--bit-space-4);
  font: inherit; font-size: var(--bit-fs-body); font-weight: 500; line-height: 1;
  border: var(--bit-hairline) solid transparent; border-radius: var(--bit-radius-control);
  background: transparent; color: var(--bit-text-secondary);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bit-btn svg { width: var(--bit-icon-sm); height: var(--bit-icon-sm); }
.bit-btn--primary { background: var(--bit-action-primary-bg); color: var(--bit-action-primary-text); border-color: var(--bit-action-primary-bg); }
.bit-btn--secondary { border-color: var(--bit-border-control); }
.bit-btn--secondary:hover, .bit-btn--ghost:hover { color: var(--bit-text-primary); }
.bit-btn--ghost { padding: 0 var(--bit-space-2); }
.bit-btn--destructive { background: var(--bit-status-danger); color: var(--bit-text-inverse); border-color: var(--bit-status-danger); }   /* C-16 only */
.bit-btn[disabled], .bit-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.bit-btn--icon { padding: 0; width: var(--bit-control-h); }
.htmx-request.bit-btn, .htmx-request .bit-btn[type="submit"] { opacity: .7; }

/* ==== C-8 Add-affordance ==================================================== */
.bit-add {
  display: inline-flex; align-items: center; gap: var(--bit-space-2);
  min-height: var(--bit-control-h); padding: 0 var(--bit-space-4);
  font: inherit; color: var(--bit-text-secondary); background: transparent;
  border: var(--bit-hairline) dashed var(--bit-border-affordance);  /* the only dashed border */
  border-radius: var(--bit-radius-control);
  text-decoration: none; cursor: pointer;
}
.bit-add:hover { color: var(--bit-text-primary); }
.bit-add svg { width: var(--bit-icon-sm); height: var(--bit-icon-sm); }

/* ==== C-12 Inspector (R-4) ================================================== */
.bit-panel {
  grid-area: panel;
  width: var(--bit-panel-w);                                        /* L-1 */
  background: var(--bit-surface-chrome);
  border-left: var(--bit-hairline) solid var(--bit-border-hairline);
  padding: var(--bit-space-4);
  display: flex; flex-direction: column; gap: var(--bit-space-3);
}
.bit-panel__title { font-size: var(--bit-fs-micro); color: var(--bit-text-secondary); }
.bit-mini {
  background: var(--bit-surface-raised);
  border: var(--bit-hairline) solid var(--bit-border-card);
  border-radius: var(--bit-radius-card);
  padding: var(--bit-space-3);
}
.bit-mini__label { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); }
.bit-mini__value { font-weight: 500; overflow-wrap: anywhere; }
.bit-mini__detail { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); overflow-wrap: anywhere; }
.bit-mini a { text-decoration: none; }
.bit-mini a:hover { text-decoration: underline; }
.bit-chips { display: none; }
.bit-sheet__close { display: none; }

/* ==== C-14 Action bar (R-5) ================================================= */
.bit-actionbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--bit-space-3); flex-wrap: wrap;
  padding: var(--bit-space-3) var(--bit-space-6);
  background: var(--bit-surface-chrome);
  border-top: var(--bit-hairline) solid var(--bit-border-hairline);
}
.bit-actionbar__total { display: flex; flex-direction: column; }
.bit-actionbar__total-label { font-size: var(--bit-fs-micro); color: var(--bit-text-secondary); }
.bit-actionbar__total-value { font-size: var(--bit-fs-metric); font-weight: 500; font-variant-numeric: tabular-nums; }
.bit-actionbar__spacer { flex: 1; }
.bit-actionbar__notices { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--bit-space-2); }
.bit-actionbar__notices:empty { display: none; }
.bit-actionbar__errors { font-size: var(--bit-fs-caption); color: var(--bit-status-danger); }

/* ==== C-16 Confirm dialog (P-5) ============================================= */
.bit-dialog {
  width: min(var(--bit-narrow-w), calc(100vw - 2 * var(--bit-space-4)));   /* C-16 */
  padding: var(--bit-space-5);
  color: var(--bit-text-primary);
  background: var(--bit-surface-chrome);
  border: var(--bit-hairline) solid var(--bit-border-hairline);
  border-radius: var(--bit-radius-overlay);                          /* C-16 */
  box-shadow: var(--bit-shadow-dialog);                              /* floating overlay (P-4) */
}
.bit-dialog::backdrop { background: var(--bit-scrim); }
.bit-dialog__title { font-size: var(--bit-fs-title); font-weight: 500; }
.bit-dialog__body { margin-top: var(--bit-space-2); color: var(--bit-text-secondary); }
.bit-dialog__actions { display: flex; gap: var(--bit-space-2); margin-top: var(--bit-space-5); }
.bit-dialog__actions .bit-dialog__confirm { margin-left: auto; }

/* ==== C-17 Toast ============================================================ */
.bit-toasts { position: fixed; left: 50%; bottom: var(--bit-space-6); transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - 2 * var(--bit-space-4)); }
.bit-toast {
  display: flex; align-items: center; gap: var(--bit-space-4);
  padding: var(--bit-space-2) var(--bit-space-4);
  background: var(--bit-action-primary-bg); color: var(--bit-action-primary-text);
  border-radius: var(--bit-radius-card);
  font-size: var(--bit-fs-caption);
  box-shadow: var(--bit-shadow-float);                               /* floating overlay (P-4) */
}
.bit-toast__action {
  background: none; border: 0; padding: var(--bit-space-1) 0; font: inherit; font-weight: 500;
  color: var(--bit-accent-signal); cursor: pointer;                  /* C-17 */
}

/* ==== C-18 Page state ======================================================= */
.bit-state { display: grid; place-items: center; text-align: center; padding: var(--bit-space-6) var(--bit-space-4); min-height: var(--bit-state-min-h); }
.bit-state__inner { display: flex; flex-direction: column; align-items: center; gap: var(--bit-space-2); max-width: var(--bit-narrow-w); }
.bit-state__glyph { color: var(--bit-text-faint); }
.bit-state__glyph svg { width: var(--bit-icon-xl); height: var(--bit-icon-xl); }   /* C-18 */
.bit-state__title { font-size: var(--bit-fs-title); font-weight: 500; }
.bit-state__body { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); }
.bit-state__action { margin-top: var(--bit-space-2); }

/* ==== C-19 Document (Amendment 4): read-only letter / email content ========== */
.bit-doc { background: var(--bit-surface-raised); border: var(--bit-hairline) solid var(--bit-border-card); border-radius: var(--bit-radius-card); padding: var(--bit-space-6); max-width: var(--bit-doc-max); }
/* C-19 document, framed variant: a stored document (captured email) in a sandboxed frame. Same card, no inner padding (the frame's document pads itself). */
.bit-doc--frame { display: block; width: 100%; height: 70vh; padding: 0; margin-top: var(--bit-space-4); }

/* ==== Narrow: inspector collapses first (section 7, R-4) ===================== */
@media (max-width: 960px) {
  .bit-app { grid-template-columns: var(--bit-rail-w) minmax(0, 1fr) 0; }
  .bit-panel--inspector { display: none; }
  .bit-panel--inspector.bit-sheet--open {                          /* R-4 pull-up sheet, the single floating layer */
    display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 75vh; overflow-y: auto;
    border-left: 0; border-top: var(--bit-hairline) solid var(--bit-border-hairline);
    border-radius: var(--bit-radius-overlay) var(--bit-radius-overlay) 0 0;
    box-shadow: var(--bit-shadow-sheet);
  }
  .bit-panel--inspector.bit-sheet--open .bit-sheet__close { display: inline-flex; align-self: flex-end; }
  .bit-chips {
    display: flex; gap: var(--bit-space-2); overflow-x: auto; padding-bottom: var(--bit-space-1);
    scrollbar-width: none;
  }
  .bit-chip {
    flex: none; display: inline-flex; gap: var(--bit-space-1); align-items: center;
    min-height: var(--bit-chip-h); padding: 0 var(--bit-space-3);
    font: inherit; font-size: var(--bit-fs-caption); color: var(--bit-text-primary);
    background: var(--bit-surface-raised); border: var(--bit-hairline) solid var(--bit-border-card);
    border-radius: var(--bit-radius-control); white-space: nowrap; cursor: pointer;
  }
  .bit-chip__label { color: var(--bit-text-secondary); }
  .bit-panel--action { display: none; }
}

/* ==== Mobile collapse (section 7) =========================================== */
@media (max-width: 640px) {
  .bit-info { width: var(--bit-tap-min); height: var(--bit-tap-min); margin-block: calc((var(--bit-tap-min) - var(--bit-icon-sm)) / -2); }   /* C-20 touch target */
  .bit-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "scope" "trail" "main";
    padding-bottom: calc(var(--bit-bar-h-mobile) + var(--bit-space-2));                                            /* room for the tab / action bar */
  }
  .bit-content { padding: var(--bit-space-4); }                      /* 16px side gutter */
  .bit-statusbar { padding: var(--bit-space-3) var(--bit-space-4) 0; }   /* the status bar keeps the gutter */

  /* R-2 scope bar -> back header */
  .bit-scope { padding: var(--bit-space-2) var(--bit-space-4); min-height: var(--bit-bar-h-mobile); }
  .bit-scope__trail { display: none; }
  .bit-scope__meta { display: none; }
  .bit-scope__back {
    display: inline-grid; place-items: center; width: var(--bit-tap-min); height: var(--bit-tap-min); margin-left: calc(-1 * var(--bit-space-3));
    color: var(--bit-text-primary); text-decoration: none; border-radius: var(--bit-radius-control);
  }
  .bit-scope__back svg { width: var(--bit-icon-md); height: var(--bit-icon-md); }
  .bit-scope__compact { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .bit-scope__compact-anc { font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bit-scope__compact-cur { font-size: var(--bit-fs-title); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bit-scope > .bit-dot { order: 10; }                              /* signal dot to the trailing edge */

  /* R-1 rail -> bottom tab bar */
  .bit-rail { display: none; }
  .bit-tabbar {
    display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    background: var(--bit-surface-chrome); border-top: var(--bit-hairline) solid var(--bit-border-hairline);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bit-tabbar__tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bit-space-half);
    min-height: var(--bit-bar-h-mobile); min-width: var(--bit-tap-min);
    font-size: var(--bit-fs-micro);                                  /* R-1: 11px label (Amendment 4, T-7) */
    color: var(--bit-text-secondary); text-decoration: none;
  }
  .bit-tabbar__tab svg { width: var(--bit-icon-lg); height: var(--bit-icon-lg); }
  .bit-tabbar__tab[aria-current="page"] { color: var(--bit-accent-text); }   /* R-1 accent text */
  .bit-tabbar__more[open] .bit-tabbar__menu { display: flex; }
  .bit-tabbar__more { flex: 1; position: relative; }
  .bit-tabbar__more > summary { list-style: none; cursor: pointer; }
  .bit-tabbar__more > summary::-webkit-details-marker { display: none; }
  .bit-tabbar__menu {
    display: none; flex-direction: column; position: absolute; right: var(--bit-space-2); bottom: calc(var(--bit-bar-h-mobile) + var(--bit-space-2));
    min-width: var(--bit-menu-min); padding: var(--bit-space-2);
    background: var(--bit-surface-chrome); border: var(--bit-hairline) solid var(--bit-border-hairline);
    border-radius: var(--bit-radius-card); box-shadow: var(--bit-shadow-sheet);
  }
  .bit-tabbar__menu a { display: flex; gap: var(--bit-space-2); align-items: center; min-height: var(--bit-tap-min); padding: 0 var(--bit-space-3); text-decoration: none; }
  .bit-tabbar__menu a[aria-current="page"] { color: var(--bit-accent-text); }
  .bit-tabbar__menu svg { width: var(--bit-icon-md); height: var(--bit-icon-md); }

  /* R-5 action bar -> sticky bottom bar; it replaces the tab bar while a form is active */
  .bit-app:has(.bit-actionbar) .bit-tabbar { display: none; }
  .bit-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
    padding: var(--bit-space-2) var(--bit-space-4) calc(var(--bit-space-2) + env(safe-area-inset-bottom));
  }
  .bit-actionbar .bit-btn--ghost { display: none; }
  .bit-actionbar__notices { order: -1; }                              /* notices sit immediately above the bar */

  /* W-8 step trail */
  .bit-steps { padding: var(--bit-space-2) var(--bit-space-4); flex-direction: column; align-items: stretch; gap: var(--bit-space-1); }
  .bit-steps ol, .bit-steps__count { display: none; }
  .bit-steps__compact { display: block; font-size: var(--bit-fs-caption); }
  .bit-steps__bar { height: var(--bit-edge); background: var(--bit-border-hairline); }
  .bit-steps__bar > span { display: block; height: 100%; background: var(--bit-accent-signal); }

  /* R-6 metrics 2-up */
  .bit-metrics { grid-template-columns: 1fr 1fr; }
  .bit-metric--secondary { display: none; }

  /* R-3 grid -> row-cards by column priority */
  .bit-grid, .bit-grid tbody { display: block; background: transparent; border: 0; }
  .bit-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bit-grid tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    gap: var(--bit-space-half) var(--bit-space-3);
    background: var(--bit-surface-raised);
    border: var(--bit-hairline) solid var(--bit-border-card);
    border-radius: var(--bit-radius-row-card);
    padding: var(--bit-space-3);
    margin-bottom: var(--bit-space-2);
    position: relative;
  }
  .bit-grid tbody tr > :first-child { border-left: 0; }
  .bit-grid tbody tr[aria-selected="true"], .bit-grid tbody tr.bit-row--expanded { border-left: var(--bit-edge) solid var(--bit-accent-signal); border-radius: 0 var(--bit-radius-row-card) var(--bit-radius-row-card) 0; }
  .bit-grid td { display: block; border: 0; padding: 0; min-width: 0; }
  .bit-grid td[data-p="p1"] { order: 1; font-weight: 500; }
  .bit-grid td[data-p="p1"] .bit-grid__link { display: inline-block; min-height: var(--bit-target-sm); }
  .bit-grid td[data-p="p2"] { order: 2; text-align: right; }
  .bit-grid td[data-p="p3"] { order: 3; grid-column: 1 / -1; font-size: var(--bit-fs-caption); color: var(--bit-text-secondary); }
  .bit-grid td[data-p="p4"] { display: none; }
  .bit-grid td.bit-grid__actions { order: 4; grid-column: 1 / -1; text-align: left; width: auto; }
  .bit-grid td.bit-grid__expander { position: absolute; right: var(--bit-space-2); bottom: var(--bit-space-2); }
  /* expanded state survives as an attached card section continuing the edge marker */
  .bit-grid tr.bit-expansion {
    margin-top: calc(-1 * var(--bit-space-2) - var(--bit-hairline)); border-top: 0;
    border-left: var(--bit-edge) solid var(--bit-accent-signal);
    border-radius: 0 0 var(--bit-radius-row-card) 0;
    background: var(--bit-surface-chrome);
    display: block;
  }
  .bit-grid tr.bit-expansion td { display: block; }
  .bit-grid tr.bit-expansion td[data-p] { display: block; }
  .bit-grid__empty, .bit-grid__empty td { display: block; border: 0; background: transparent; }
  .bit-pager { flex-wrap: wrap; }

  .bit-form-grid { grid-template-columns: 1fr; }
  .bit-dialog__actions { flex-direction: column-reverse; }
  .bit-dialog__actions .bit-dialog__confirm { margin-left: 0; }
  .bit-dialog__actions .bit-btn { width: 100%; }
  .bit-toasts { bottom: calc(var(--bit-bar-h-mobile) + var(--bit-space-5)); }
}