/*
   L3 - the SUIO/CHARA Layout Kit shell (V01).
   One persistent 3-column working grammar for every lifecycle layer:
     .l3-left  = navigation + context (search/filters + the layer navigator)
     .l3-main  = the primary work surface (widened; dominant)
     .l3-right = the standardized contextual rail (the Inspector)
   Generalized from the proven HOT execution surface (.hot-exec-grid / .hot-nav /
   .hot-tws / .hot-insp), made layer-neutral and toned to Theme A (calm/flat).
   Layer identity is a small accent (--l3-accent), never a paint job.
   New namespaces only (.l3-x, .rail-x): does not touch existing .hot or .dp rules.
   Spec: ux/LAYOUT_KIT_V01.md
*/

.l3 {
  --l3-accent: var(--accent);
  --l3-left-w: 280px;
  --l3-right-w: 312px;
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--grey-100);
}
/* Per-layer accent - a quiet identity tint, not a fill (Theme A tone pass). */
.l3[data-layer="cold"]    { --l3-accent: var(--accent-deep); }
.l3[data-layer="hot"]     { --l3-accent: var(--orange); }
.l3[data-layer="action"]  { --l3-accent: var(--yellow); }
.l3[data-layer="report"]  { --l3-accent: var(--green); }
.l3[data-layer="archive"] { --l3-accent: var(--grey-500); }

/* ── Columns ─────────────────────────────────────────────────────────────── */
.l3-left {
  width: var(--l3-left-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--grey-50);
  border-right: 1px solid var(--grey-200);
}
.l3-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.l3-right {
  width: var(--l3-right-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--grey-50);
  border-left: 1px solid var(--grey-200);
}

/* Drag handle between columns (pointer-resize, persisted by l3.js). */
.l3-resize {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--grey-200);
  transition: background .12s;
  user-select: none;
}
.l3-resize:hover, .l3-resize.dragging { background: var(--l3-accent); }

/* ── Left column: identity + find + navigator ────────────────────────────── */
.l3-left-hdr {
  padding: 9px 12px 8px;
  border-bottom: 1px solid var(--grey-100);
  background: var(--grey-50);
  flex-shrink: 0;
  position: relative;
}
.l3-left-eyebrow {
  font: 600 10px var(--font-mono);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--grey-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.l3-left-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--l3-accent);
  flex-shrink: 0;
}
.l3-left-name { font-size: 14px; font-weight: 700; color: var(--text-strong); letter-spacing: -.2px; margin-top: 2px; }
.l3-left-ctx  { font-size: 11px; color: var(--grey-500); margin-top: 1px; }

/* Pinned action area - anchored above the find bar, never scrolls. Layers use this
   to surface their primary feature entry points (Command Center, Matrix Builder, etc). */
.l3-pinned {
  padding: 6px 10px 5px;
  border-bottom: 1px solid var(--grey-100);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.l3-pinned-btn {
  width: 100%; box-sizing: border-box; text-align: left;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 7px 10px; border-radius: 6px; border: 1px solid var(--grey-200);
  background: var(--surface); cursor: pointer; color: var(--grey-700);
  transition: background .12s, border-color .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l3-pinned-btn:hover { background: var(--grey-100); border-color: var(--grey-300); }
.l3-pinned-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.l3-pinned-btn.primary:hover { background: var(--navy-2); }

/* Find bar - the single, fixed home for search + filters (top-left, every layer). */
.l3-find { padding: 8px 10px 6px; border-bottom: 1px solid var(--grey-100); flex-shrink: 0; }
.l3-find-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  color: var(--grey-900);
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  outline: none;
  background: var(--surface);
}
.l3-find-input:focus { border-color: var(--l3-accent); }
.l3-find-select {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  cursor: pointer;
}
.l3-find-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.l3-chip {
  font-size: 11px;
  font-family: inherit;
  padding: 3px 9px;
  border: 1px solid var(--grey-200);
  border-radius: 13px;
  background: var(--surface);
  color: var(--grey-600);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.l3-chip:hover { background: var(--grey-100); }
.l3-chip.on { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.l3-chip-n { opacity: .6; font-size: 10px; margin-left: 2px; }

/* Navigator - scroll region; layers supply their own row markup inside. */
.l3-nav { flex: 1; overflow-y: auto; padding: 4px 0 10px; }
.l3-nav-grp {
  font: 700 10px var(--font-sans);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--grey-400);
  padding: 10px 12px 4px;
}
.l3-nav-empty { padding: 18px 14px; color: var(--grey-400); font-size: 12px; font-style: italic; text-align: center; line-height: 1.5; }

/* ── Center column: bar + body ───────────────────────────────────────────── */
.l3-main-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--grey-100);
  background: var(--grey-50);
  font-size: 12px;
  color: var(--grey-500);
  flex-shrink: 0;
  min-height: 22px;
}
.l3-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; }
.l3-crumb .sep { color: var(--grey-300); }
.l3-crumb .cur { color: var(--grey-900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l3-main-pos { margin-left: auto; font-size: 11px; color: var(--grey-400); flex-shrink: 0; }
.l3-main-body { flex: 1; overflow: auto; padding: 20px 26px 30px; }
/* Center content wraps and stays inside its frame (annotation: "doesn't go outside its frame"). */
.l3-main-body, .l3-main-body * { min-width: 0; }
.l3-main-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--grey-400); font-size: 13px; gap: 8px; text-align: center;
}

/* ── Right column: the standardized rail (the Inspector) ─────────────────── */
.l3-right-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 6px; flex-shrink: 0;
}
.l3-right-title { font: 700 11px var(--font-mono); letter-spacing: .6px; text-transform: uppercase; color: var(--grey-500); }
.l3-rail { padding: 4px 14px 22px; }
.rail-sec { margin-bottom: 16px; }
.rail-sec:last-child { margin-bottom: 4px; }
.rail-sec-h {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--grey-400); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.rail-sec-h[data-collapse] { cursor: pointer; user-select: none; }
.rail-sec-h[data-collapse]:hover { color: var(--grey-600); }
.rail-sec-h .rail-sec-tag { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.rail-sec-caret {
  margin-left: auto; font-size: 11px; color: var(--grey-400);
  display: inline-block; flex-shrink: 0;
  transition: transform .15s ease;
}
.rail-sec-h .rail-sec-tag + .rail-sec-caret { margin-left: 4px; }
.rail-sec.collapsed .rail-sec-caret { transform: rotate(-90deg); }
.rail-sec.collapsed > *:not(.rail-sec-h) { display: none; }
.rail-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--grey-100); }
.rail-row:last-child { border-bottom: none; }
.rail-k { color: var(--grey-500); font-size: 11.5px; flex-shrink: 0; }
.rail-v { color: var(--grey-900); font-weight: 500; font-size: 11.5px; text-align: right; word-break: break-word; }
.rail-v.mono { font-family: var(--font-mono); font-weight: 400; }
.rail-empty { color: var(--grey-400); font-size: 11.5px; font-style: italic; }
.rail-note { font-size: 11px; color: var(--grey-500); margin-top: 8px; padding: 9px 11px; background: var(--grey-100); border-radius: 6px; line-height: 1.5; }
.rail-note b { color: var(--grey-700); font-weight: 600; }

/* Chips / links (provenance, source jumps, dependencies). */
.rail-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 9px; border-radius: 13px;
  background: var(--grey-200); color: var(--grey-700); cursor: pointer;
  border: none; font-family: inherit;
}
.rail-chip:hover { background: var(--grey-300); }
.rail-chip .nm { font-size: 10px; opacity: .65; }

/* Contact rows (vendor / counterparty rail). */
.rail-contact { display: flex; flex-direction: column; gap: 7px; }
.rail-contact-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--grey-800); }
.rail-contact-row .ico { color: var(--grey-400); flex-shrink: 0; margin-top: 1px; }
.rail-contact-row a { color: var(--accent-deep); text-decoration: none; word-break: break-all; }
.rail-contact-row a:hover { text-decoration: underline; }

/* Action buttons - full-width; gated buttons read as gated, never silent no-ops. */
.rail-btn {
  width: 100%; text-align: left; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 8px 11px; border-radius: 6px; border: 1px solid var(--grey-200);
  background: var(--surface); cursor: pointer; color: var(--grey-700);
  margin-bottom: 6px; transition: background .12s, border-color .12s;
  display: flex; align-items: center; gap: 7px;
}
.rail-btn:hover { background: var(--grey-100); }
.rail-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.rail-btn.primary:hover { background: var(--navy-2); }
.rail-btn:disabled, .rail-btn.gated {
  cursor: not-allowed; pointer-events: none; opacity: .55; background: var(--grey-100);
  color: var(--grey-400); border-color: var(--grey-200);
}
.rail-btn:disabled:hover, .rail-btn.gated:hover { background: var(--grey-100); }
.rail-btn .rail-btn-gate { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--grey-400); }
.rail-btn-tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Notes textarea (notes move into the rail). */
.rail-notes {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: var(--grey-700);
  border: 1px solid var(--grey-200); border-radius: 6px; padding: 8px 10px;
  resize: vertical; min-height: 72px; background: var(--surface);
}
.rail-notes:focus { outline: none; border-color: var(--l3-accent); }

/* Deliverables / files. */
.rail-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--grey-200); border-radius: 6px; margin-bottom: 5px; background: var(--surface); font-size: 12px; }
.rail-file-ico { font: 600 9px var(--font-mono); color: var(--grey-500); background: var(--grey-100); padding: 3px 5px; border-radius: 4px; flex-shrink: 0; }
.rail-file-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--grey-800); }
.rail-dropzone {
  border: 1px dashed var(--grey-300); border-radius: 7px; padding: 14px 10px;
  text-align: center; font-size: 11.5px; color: var(--grey-500); background: var(--grey-50); cursor: pointer;
}
.rail-dropzone:hover { border-color: var(--l3-accent); color: var(--grey-700); }

/* Rail collapse - drop the right column to a thin reopen strip (persisted). */
.l3-rail-toggle, .l3-nav-toggle {
  background: none; border: none; cursor: pointer; color: var(--grey-400);
  font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
  transition: transform .15s ease;
}
.l3-rail-toggle:hover, .l3-nav-toggle:hover { background: var(--grey-100); color: var(--grey-700); }

/* Nav-toggle is pinned to the top-right of the left header, visible even when collapsed. */
.l3-nav-toggle { position: absolute; top: 8px; right: 6px; }

/* Right rail collapse */
.l3.rail-collapsed .l3-right { width: 34px !important; overflow: hidden; }
.l3.rail-collapsed .l3-resize[data-resize="right"] { display: none; }
.l3.rail-collapsed .l3-rail, .l3.rail-collapsed .l3-right-title { display: none; }
.l3.rail-collapsed .l3-right-hdr { padding: 10px 6px; justify-content: center; }
/* Flip chevron direction when the rail is collapsed (› → ‹), matching the nav toggle below */
.l3.rail-collapsed .l3-rail-toggle { transform: rotate(180deg); }

/* Left nav collapse */
.l3.nav-collapsed .l3-left { width: 34px !important; overflow: hidden; }
.l3.nav-collapsed .l3-resize[data-resize="left"] { display: none; }
.l3.nav-collapsed .l3-nav, .l3.nav-collapsed .l3-find, .l3.nav-collapsed .l3-pinned,
.l3.nav-collapsed .l3-left-eyebrow, .l3.nav-collapsed .l3-left-name,
.l3.nav-collapsed .l3-left-ctx { display: none; }
.l3.nav-collapsed .l3-left-hdr { padding: 10px 0; min-height: 34px; }
/* Flip chevron direction when nav is collapsed (‹ → ›) */
.l3.nav-collapsed .l3-nav-toggle { transform: rotate(180deg); }

/* Archived-project record embedded in the L3 center bench: the L3 body already
   pads + scrolls, so drop the standalone page's outer padding and let it fill. */
.l3-main-body .arc-detail-page.arc-detail-embed { max-width: 960px; margin: 0; padding: 2px 0 10px; }

/* Selected row in a kit-hosted layer navigator (e.g. COLD's .lp-row list). */
.l3-nav .lp-row.sel { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--l3-accent); }

/* Category section headers inside a kit nav (Report / Activation left column). */
.lp-section-head { padding: 8px 12px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--grey-400); display: flex; align-items: center; gap: 6px; }
.lp-section-ct { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--grey-300); }

/* Center-top filter bar over a table (search + count) - reused by COLD/Report/Activation. */
.l3-tablebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.l3-tablebar-note { font-size: 11.5px; color: var(--grey-500); }
.l3-table-hint { font-size: 11px; color: var(--grey-400); font-style: italic; margin-top: 9px; }

/* COLD work surface: center the document in the work box at a readable bounded width
   (centered + fit-width), so a template/checklist reads like a page instead of stretching
   the full pane. Both-axis scroll comes from .l3-main-body (overflow:auto). Scoped to .l3 so
   it only retunes the kit-hosted COLD surface, not the legacy .doc-preview classes elsewhere. */
.l3 .doc-preview-canvas-body { justify-content: flex-start; flex-direction: column; align-items: center; gap: 22px; padding: 22px 28px; }
.l3 .rt-sheet { max-width: 1000px; width: 100%; }
.l3 .doc-mockup { max-width: 1000px; margin: 0 auto; }
/* Delivered-template document preview: centered column under the summary card. */
.l3 .rt-doc-preview { width: 100%; display: flex; flex-direction: column; align-items: center; }
.l3 .rt-doc-preview .doc-mockup { max-width: 1000px; }

/* ── Standardized table (consolidates .ed-table / .report-table / .matrix) ── */
.l3-table-wrap { overflow-x: auto; border: 1px solid var(--grey-200); border-radius: 9px; background: var(--surface); }
.l3-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.l3-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 9px 12px; background: var(--grey-50);
  font: 700 10px var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--grey-500);
  border-bottom: 1px solid var(--grey-200); white-space: nowrap;
}
.l3-table thead th.num { text-align: right; }
.l3-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--grey-100); color: var(--grey-800); vertical-align: top; }
.l3-table tbody td.num { text-align: right; font-family: var(--font-mono); }
.l3-table tbody tr { cursor: pointer; transition: background .1s; }
.l3-table tbody tr:hover { background: var(--grey-50); }
.l3-table tbody tr.sel { background: var(--accent-tint); }
.l3-table tbody tr:last-child td { border-bottom: none; }
.l3-cell-sub { display: block; font-size: 10.5px; color: var(--grey-400); margin-top: 1px; }
/* table_kit.js behaviors (shell/table_kit.js) - sortable headers, lazy more-row, honest
   states, keyboard focus. Non-selectable tables opt out of the row hover/pointer. */
.l3-table.static tbody tr { cursor: default; }
.l3-table.static tbody tr:hover { background: none; }
.l3-table thead th.sortable { padding: 0; }
.l3-th-btn {
  display: flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box;
  padding: 9px 12px; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
}
.l3-table thead th.num .l3-th-btn { justify-content: flex-end; }
.l3-table thead th[aria-sort="ascending"] .l3-th-btn::after { content: "\2191"; }
.l3-table thead th[aria-sort="descending"] .l3-th-btn::after { content: "\2193"; }
.l3-table thead th.sortable:hover { color: var(--grey-700); }
.l3-more-row td { padding: 0; }
.l3-more-btn {
  width: 100%; padding: 8px 12px; background: var(--grey-50); border: 0; cursor: pointer;
  font: 500 11.5px var(--font-sans); color: var(--grey-600);
}
.l3-more-btn:hover { background: var(--grey-100); color: var(--grey-800); }
.l3-table-state { padding: 8px 0; }
.l3-table tbody tr:focus-visible, .l3-th-btn:focus-visible, .l3-more-btn:focus-visible {
  outline: 2px solid var(--l3-accent); outline-offset: -2px;
}
/* Expandable disclosure row (table_kit `detail` option): the kit owns open/closed across its own
   rerenders, so the open data row and its full-width detail sibling share the accent tint. The
   detail row is itself inert (no pointer/hover); its own <td> paints the tint. */
.l3-table tbody tr.open { background: var(--accent-tint); }
.l3-table tbody tr.l3-detail-row { cursor: default; }
.l3-table tbody tr.l3-detail-row:hover { background: none; }
.l3-detail-row > td { padding: 0 14px 12px; background: var(--accent-tint); }

/* ── Standardized modal (consolidates pit-modal / acf-modal / inst / planner) ─
   Enter/exit motion (UX Kit B4): the overlay is always display:flex and hides via
   opacity + visibility (display:none cannot transition); modal.js appends hidden,
   flushes, then adds .open. Durations/easing come from the Foundation motion tokens;
   the global reduced-motion floor in tokens.css collapses them for reduce users. */
.l3-modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(22,38,58,.46);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 16px 16px; overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--motion-2) var(--ease-out),
              visibility 0s linear var(--motion-2);
}
.l3-modal-overlay.open {
  opacity: 1; visibility: visible;
  transition: opacity var(--motion-2) var(--ease-out), visibility 0s;
}
/* during the exit fade the dying overlay must not eat clicks (visibility stays visible for the
   fade's duration by design; pointer-events flips instantly - modal.js also sets inert) */
.l3-modal-overlay:not(.open) { pointer-events: none; }
.l3-modal {
  width: 560px; max-width: 96vw;
  background: var(--surface); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  max-height: 86vh;
  transform: translateY(8px);
  transition: transform var(--motion-2) var(--ease-out);
}
.l3-modal-overlay.open .l3-modal { transform: none; }
.l3-modal.sm { width: 460px; }
.l3-modal.lg { width: 760px; }
.l3-modal.xl { width: 980px; }
.l3-modal-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--grey-100); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.l3-modal-title { font-size: 16px; font-weight: 700; color: var(--text-strong); letter-spacing: -.2px; }
.l3-modal-sub { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.l3-modal-close { background: none; border: none; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; color: var(--grey-500); font-size: 15px; flex-shrink: 0; }
.l3-modal-close:hover { background: var(--grey-100); color: var(--grey-900); }
.l3-modal-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.l3-modal-foot { padding: 12px 20px; border-top: 1px solid var(--grey-100); display: flex; justify-content: flex-end; gap: 8px; background: var(--grey-50); }

/* ── Schema-driven field controls (controls.js) ──────────────────────────── */
.l3-field { display: flex; flex-direction: column; gap: 5px; }
.l3-field-label { font-size: 12px; font-weight: 600; color: var(--grey-700); display: flex; align-items: center; gap: 6px; }
.l3-field-req { color: var(--orange); font-size: 11px; }
.l3-field-hint { font-size: 11px; color: var(--grey-500); line-height: 1.45; }
.l3-input, .l3-select {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 13px; color: var(--grey-900);
  padding: 8px 10px; border: 1px solid var(--grey-300); border-radius: 7px; background: var(--surface); outline: none;
}
.l3-input:focus, .l3-select:focus { border-color: var(--l3-accent); }
.l3-input.err { border-color: var(--red); }
.l3-input-wrap { position: relative; display: flex; align-items: center; }
.l3-input-wrap .l3-unit { position: absolute; right: 10px; font-size: 11px; color: var(--grey-400); font-family: var(--font-mono); pointer-events: none; }
.l3-input-err { font-size: 11px; color: var(--red); display: none; }
.l3-input-err.show { display: block; }
.l3-radio-row { display: flex; flex-wrap: wrap; gap: 6px; }
.l3-radio {
  font-size: 12.5px; font-family: inherit; padding: 6px 12px;
  border: 1px solid var(--grey-300); border-radius: 7px; background: var(--surface); color: var(--grey-700); cursor: pointer;
}
/* keyboard focus must be visible, not just functional (a11y pass) */
.l3-radio:focus-visible, .l3-modal-close:focus-visible { outline: 2px solid var(--l3-accent); outline-offset: 1px; }
.l3-radio.on { background: var(--navy); color: #fff; border-color: var(--text-strong); }
/* the opt-in "(none)" clear chip (Gap-A wave F): de-emphasized + dashed so it reads as an escape,
   not a peer option; when it is the active choice it inverts like any other selected radio. */
.l3-radio-clear { border-style: dashed; color: var(--grey-500); }
.l3-radio-clear.on { background: var(--grey-500); color: var(--surface); border-color: var(--grey-500); }

/* ── Responsive - collapse the rail first, then narrow the nav (mirrors HOT). ─ */
@media (max-width: 1180px) { .l3 { --l3-right-w: 280px; } }
@media (max-width: 1040px) {
  .l3-right, .l3-resize[data-resize="right"] { display: none !important; }
  .l3 { --l3-left-w: 240px; }
}