/* ============================================================================
   gb-components.css — GlazBox design-system component classes (R1, S2)
   ----------------------------------------------------------------------------
   Authored per docs/DESIGN_R1_RECON.md DR2 ("Proposed gb-components.css class
   inventory"), extracting the token-consuming inline patterns of
   design/GlazBox-DS-2-Components.dc.html, design/GlazBox-DS-3-Patterns.dc.html
   and design/GlazBox-Prototype-v2.dc.html into classes.

   Rules of this file (R-D1):
   - Consumes SEMANTIC tokens (--gb-*) only — never the raw palette.
   - Existing gb-* structural hook names from Prototype-v2 are KEPT
     (.gb-shell/.gb-aside/.gb-content/.gb-topbar/.gb-selectwrap/.gb-2col/
     .gb-listtools/.gb-formfoot/.gb-scrim).
   - Everything is class-scoped (base styles live under .gb-root) so legacy
     screens that merely load this file are NOT restyled — R-D2 coexistence.

   Section order mirrors the DR2 map; deviations from the map are flagged
   with "DEV-n" comments and enumerated in the S2 stage report.
   ========================================================================== */

/* ---- 0 · Base scope + icon primitive + keyframes ------------------------ */

.gb-root {
  font-family: var(--gb-font-ui);
  background: var(--gb-app);
  color: var(--gb-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
.gb-root *, .gb-root *::before, .gb-root *::after { box-sizing: border-box; }

/* .ic adopted verbatim from the DS pages (DS-2:20 / DS-3:20 / Prototype:17) */
.ic {
  width: 1.15em; height: 1.15em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}

@keyframes gbSpin { to { transform: rotate(360deg); } }
@keyframes gbShimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
@keyframes gbToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gbDrawerIn { from { transform: translateX(40px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@keyframes gbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gbPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---- 1 · Buttons (DS-2 §1.0, btn() :321–334) ---------------------------- */

.gb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--gb-radius-3);
  font-size: 12.5px; font-weight: 650; font-family: inherit;
  white-space: nowrap; cursor: pointer;
}
.gb-btn:active { transform: translateY(1px); }
.gb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }

.gb-btn--primary {
  border-color: var(--gb-brand); background: var(--gb-brand);
  color: var(--gb-on-brand); box-shadow: var(--gb-elev-brand);
}
.gb-btn--primary:hover { border-color: var(--gb-brand-2); background: var(--gb-brand-2); }

.gb-btn--secondary {
  border-color: var(--gb-line); background: var(--gb-surface); color: var(--gb-text-2);
}
.gb-btn--secondary:hover { border-color: var(--gb-field-border); background: var(--gb-surface-2); color: var(--gb-text); }
.gb-btn--secondary:active { background: var(--gb-line-2); color: var(--gb-text); }

.gb-btn--ghost { background: none; color: var(--gb-accent); }
.gb-btn--ghost:hover { background: var(--gb-accent-bg); color: var(--gb-accent-strong); }

.gb-btn--success {
  border-color: var(--gb-success); background: var(--gb-success); color: var(--gb-on-brand);
}
.gb-btn--success:hover { border-color: var(--gb-success-strong); background: var(--gb-success-strong); }

.gb-btn--danger-soft {
  border-color: var(--gb-danger-border); background: var(--gb-danger-bg); color: var(--gb-danger);
}
.gb-btn--danger-soft:hover { border-color: var(--gb-danger); color: var(--gb-danger-strong); }
.gb-btn--danger-soft:active { background: var(--gb-danger-border); }
.gb-btn--danger-soft:focus-visible { box-shadow: 0 0 0 3px var(--gb-danger-bg); }

.gb-btn--danger-solid {
  border-color: var(--gb-danger); background: var(--gb-danger); color: var(--gb-on-brand);
}
.gb-btn--danger-solid:hover { border-color: var(--gb-danger-strong); background: var(--gb-danger-strong); }
.gb-btn--danger-solid:focus-visible { box-shadow: 0 0 0 3px var(--gb-danger-bg); }

/* Disabled never removes the label (DS-2:51, factory :332) */
.gb-btn:disabled, .gb-btn.is-disabled {
  border-color: var(--gb-line-2); background: var(--gb-line-2);
  color: var(--gb-faint); cursor: not-allowed; box-shadow: none; transform: none;
}

/* Submitting state — locks and spins, no double submits (DS-2:233) */
.gb-btn.is-loading { cursor: progress; opacity: .85; }
.gb-spinner {
  width: 13px; height: 13px; flex: 0 0 auto;
  border: 2px solid var(--gb-on-brand-border); border-top-color: var(--gb-on-brand);
  border-radius: 50%; animation: gbSpin .7s linear infinite;
}

/* ---- 2 · Icon buttons (DS-2:66–70 · DS-3:87–90) ------------------------- */

.gb-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid transparent; border-radius: 7px;
  background: none; color: var(--gb-muted); cursor: pointer;
}
.gb-iconbtn .ic { width: 15px; height: 15px; }
.gb-iconbtn:hover { border-color: var(--gb-line); background: var(--gb-surface); color: var(--gb-accent); }
.gb-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-iconbtn--danger:hover { border-color: var(--gb-danger-border); background: var(--gb-danger-bg); color: var(--gb-danger); }
/* DEV-2: 29px grid-row size from DS-3:87 encoded as a --sm modifier */
.gb-iconbtn--sm { width: 29px; height: 29px; }
.gb-iconbtn--sm .ic { width: 14px; height: 14px; }

/* ---- 3 · Status pills (DS-2 §2.0, pill() :319, vocab :345–353) ---------- */

.gb-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--gb-radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.gb-pill--dot::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.gb-pill--success { background: var(--gb-success-bg); color: var(--gb-success); }
.gb-pill--pending { background: var(--gb-pending-bg); color: var(--gb-pending); }
.gb-pill--danger  { background: var(--gb-danger-bg);  color: var(--gb-danger); }
.gb-pill--neutral { background: var(--gb-neutral-bg); color: var(--gb-neutral); }
/* Deleted — audit contexts only, neutral + strikethrough, never red (DS-2:350) */
.gb-pill--struck { text-decoration: line-through; }
.gb-pill--mono { font-family: var(--gb-font-mono); font-size: 10.5px; text-transform: none; letter-spacing: 0; border-radius: var(--gb-radius-2); }

/* ---- 4 · Tags (badge() DS-2:320 · pending tag :96 · concept DS-3:186) --- */

.gb-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--gb-radius-2);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.gb-tag--maker    { background: var(--gb-badge-maker-bg);    color: var(--gb-badge-maker-fg); }
.gb-tag--approver { background: var(--gb-badge-approver-bg); color: var(--gb-badge-approver-fg); }
.gb-tag--admin    { background: var(--gb-badge-admin-bg);    color: var(--gb-badge-admin-fg); }
.gb-tag--pending {
  padding: 3px 9px;
  background: var(--gb-pending-bg); color: var(--gb-pending);
  border: 1px solid var(--gb-pending-border);
}
/* DEV-3: DS-3:84 in-cell pending tag is smaller — encoded as a --sm variant */
.gb-tag--sm { padding: 2px 7px; border-radius: 5px; font-size: 9px; }
.gb-tag--concept {
  padding: 1px 6px; border-radius: var(--gb-radius-1);
  background: var(--gb-surface); border: 1px solid var(--gb-danger-border);
  font-size: 8.5px; font-weight: 750; letter-spacing: .05em; color: var(--gb-muted);
}

/* ---- 5 · Status-reason sub-line (DS-2:100–107) -------------------------- */

.gb-subline {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--gb-muted);
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 6 · Y/N pill toggle (DS-2 §3.0, yn() :318, container :120) --------- */

.gb-yn {
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1px solid var(--gb-field-border); border-radius: var(--gb-radius-pill);
  background: var(--gb-field); flex: 0 0 auto;
}
.gb-yn__btn {
  min-width: 52px; padding: 6px 12px;
  border: 0; border-radius: var(--gb-radius-pill);
  font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  background: transparent; color: var(--gb-muted);
  transition: background .15s, color .15s;
}
.gb-yn__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-yn__btn[aria-pressed="true"] {
  font-weight: 700; background: var(--gb-brand); color: var(--gb-on-brand);
  box-shadow: 0 1px 3px var(--gb-shadow);
}
/* Mandatory-unanswered group state (Prototype :1778) */
.gb-yn.is-invalid {
  border-color: var(--gb-danger); background: var(--gb-danger-bg);
  box-shadow: 0 0 0 3px var(--gb-danger-bg);
}
/* FR1-F5: required-toggle no-default helper (Prototype :1779–1780) —
   "No default — select one" faint; missed-after-submit flips danger. */
.gb-ynhint { font-size: 10.5px; color: var(--gb-faint); white-space: nowrap; }
.gb-ynhint.is-missed { color: var(--gb-danger); font-weight: 650; }

/* ---- 48 · Role-builder function tree (FR2-F2-5, Sangram spec) ------------ */
/* Folder-tree per family group: MAIN parent row (auto-managed, disabled
   checkbox + AUTO tag), children indented under a continuous left rule with
   a horizontal tick per row. Plain CSS borders; always fully visible. */
.gb-fntree { padding: 2px 0; }
.gb-fntree__parent {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0 6px 2px; font-size: 12.5px;
}
.gb-fntree__parent input[type=checkbox] {
  width: 15px; height: 15px; accent-color: var(--gb-brand);
  cursor: not-allowed; flex: 0 0 auto;
}
.gb-fntree__auto {
  display: inline-flex; padding: 2px 7px; margin-left: 2px;
  border: 1px solid var(--gb-line); border-radius: 5px;
  background: var(--gb-surface-2); color: var(--gb-muted);
  font-size: 9px; font-weight: 750; letter-spacing: .06em; cursor: default;
}
.gb-fntree__children {
  margin-left: 9px; padding-left: 18px;
  border-left: 1px solid var(--gb-line);
}
.gb-fntree__child {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 6px 0; cursor: pointer; font-size: 12.5px;
}
.gb-fntree__child::before {
  content: ""; position: absolute; left: -18px; top: 50%;
  width: 12px; height: 1px; background: var(--gb-line);
}
.gb-fntree__child input[type=checkbox] {
  width: 15px; height: 15px; accent-color: var(--gb-brand);
  cursor: pointer; flex: 0 0 auto;
}
.gb-fnlabel__name { color: var(--gb-text); }
.gb-fnlabel__id { font-family: var(--gb-font-mono); font-size: 11px; color: var(--gb-muted); }

/* ---- 49 · Wide add-row affordance (FR3-F3-6; Proto :774) ----------------- */
.gb-addrow {
  display: block; width: 100%; margin-top: 12px; height: 38px;
  border: 1.5px dashed var(--gb-accent); border-radius: 9px;
  background: var(--gb-accent-bg); color: var(--gb-accent-strong);
  font-size: 12px; font-weight: 650; cursor: pointer; font-family: inherit;
}
.gb-addrow:hover { border-color: var(--gb-accent-strong); }
.gb-addrow:disabled { opacity: .45; cursor: not-allowed; }

/* ---- 7 · Form fields (DS-2 §4.0 :141–144 · Prototype :24–32) ------------ */

.gb-field { min-width: 0; }
.gb-label {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
  color: var(--gb-text-2); font-size: 11px; font-weight: 700;
}
.gb-req { color: var(--gb-danger); font-weight: 700; }
.gb-input {
  width: 100%; height: 38px; padding: 0 11px;
  border: 1px solid var(--gb-field-border); border-radius: var(--gb-radius-3);
  background: var(--gb-field); color: var(--gb-text);
  font-size: 12.5px; font-family: inherit; outline: none;
}
.gb-input::placeholder { color: var(--gb-faint); }
.gb-input:focus { border-color: var(--gb-accent); box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-input[data-invalid="true"] { border-color: var(--gb-danger); box-shadow: 0 0 0 3px var(--gb-danger-bg); }
.gb-input:disabled {
  background: var(--gb-surface-2); color: var(--gb-faint);
  border-color: var(--gb-line); cursor: not-allowed;
}
/* DEV-4: mono-value inputs (IDs, BICs — DS-2:142/:143 examples) */
.gb-input--mono { font-family: var(--gb-font-mono); }
textarea.gb-input { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; }
select.gb-input {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px; cursor: pointer;
}
.gb-help  { margin: 5px 0 0; color: var(--gb-faint); font-size: 10px; }
.gb-error { margin: 5px 0 0; color: var(--gb-danger); font-size: 10px; font-weight: 600; }

/* ---- 8 · Select wrapper (kept name — Prototype :27–28) ------------------ */

.gb-selectwrap { position: relative; min-width: 0; }
.gb-selectwrap > svg {
  position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--gb-faint); pointer-events: none;
}

/* ---- 9 · Searchable combobox (DS-2:157–167) ----------------------------- */

.gb-combobox {
  border: 1px solid var(--gb-accent); border-radius: var(--gb-radius-3);
  background: var(--gb-surface); box-shadow: 0 0 0 3px var(--gb-focus);
  overflow: hidden;
}
.gb-combobox__search {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-bottom: 1px solid var(--gb-line-2);
  font-size: 12.5px; color: var(--gb-text);
}
.gb-combobox__list { padding: 4px; }
.gb-combobox__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 9px; border-radius: var(--gb-radius-2);
  font-size: 12px; color: var(--gb-text-2); cursor: pointer;
}
.gb-combobox__row.is-active { background: var(--gb-accent-bg); color: var(--gb-ink); font-weight: 600; }

/* ---- 10 · Locked-identity chips (DS-2:170–181 · DS-3:125–128) ----------- */

.gb-lockchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-3);
  background: var(--gb-surface-2);
}
.gb-lockchip .ic { width: 12px; height: 12px; color: var(--gb-faint); }
.gb-lockchip__key {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gb-faint);
}
.gb-lockchip__val { font-family: var(--gb-font-mono); font-size: 11.5px; color: var(--gb-ink); }

/* ---- 11 · Filter chip · count pill · category tag (DS-2:193–199) -------- */

.gb-chip {
  padding: 5px 11px; border-radius: var(--gb-radius-pill);
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
  border: 1px solid var(--gb-line); background: var(--gb-surface); color: var(--gb-text-2);
}
.gb-chip:hover { border-color: var(--gb-field-border); }
.gb-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-chip.is-on { border-color: var(--gb-accent); background: var(--gb-accent-bg); color: var(--gb-accent-strong); }
.gb-count {
  display: inline-flex; min-width: 24px; justify-content: center;
  padding: 2px 9px; border-radius: 20px;
  background: var(--gb-neutral-bg); color: var(--gb-text-2);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.gb-cattag {
  display: inline-flex; padding: 2px 7px; border-radius: 5px;
  background: var(--gb-accent-bg); color: var(--gb-accent-strong);
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
}

/* ---- 12 · Tabs (DS-2:200–206 · DS-3:205–208) ---------------------------- */

.gb-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--gb-line); }
.gb-tab {
  padding: 9px 2px; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 650; font-family: inherit; color: var(--gb-muted);
}
.gb-tab:hover { color: var(--gb-text); }
.gb-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-tab[aria-selected="true"] { color: var(--gb-accent-strong); box-shadow: inset 0 -2px 0 var(--gb-accent); }

/* ---- 13 · Pagination (DS-2:207–214) ------------------------------------- */

.gb-pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gb-pagebtn {
  min-width: 29px; height: 29px; padding: 0 8px;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-2);
  background: var(--gb-surface); color: var(--gb-text-2);
  font-size: 11px; font-family: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.gb-pagebtn:hover { border-color: var(--gb-field-border); }
.gb-pagebtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-pagebtn[aria-current="page"] {
  border-color: var(--gb-brand); background: var(--gb-brand); color: var(--gb-on-brand);
}
.gb-pagebtn:disabled { color: var(--gb-faint); cursor: default; }

/* ---- 14 · Breadcrumb + kbd (DS-2:215–224) ------------------------------- */

.gb-breadcrumb { display: flex; align-items: center; gap: 7px; color: var(--gb-muted); font-size: 11px; }
.gb-breadcrumb code { font-family: var(--gb-font-mono); font-size: 10.5px; }
.gb-kbd {
  padding: 2px 6px; border: 1px solid var(--gb-field-border); border-radius: 5px;
  background: var(--gb-surface); font-size: 10px; color: var(--gb-muted); font-family: inherit;
}

/* ---- 15 · Toasts (DS-2:230–231) ----------------------------------------- */

.gb-toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-4);
  background: var(--gb-surface); box-shadow: var(--gb-elev-2);
  font-size: 12px; color: var(--gb-text);
  animation: gbToastIn .18s ease;
}
.gb-toast .ic { width: 18px; height: 18px; }
.gb-toast--success { border-color: var(--gb-success-border); }
.gb-toast--success > .ic { color: var(--gb-success); }
.gb-toast--danger { border-color: var(--gb-danger-border); }
.gb-toast--danger > .ic { color: var(--gb-danger); }

/* ---- 16 · Skeleton shimmer (DS-2:236–249) ------------------------------- */

.gb-skeleton {
  display: block; height: 11px; border-radius: var(--gb-radius-1);
  background: linear-gradient(90deg, var(--gb-line-2) 25%, var(--gb-surface-2) 40%, var(--gb-line-2) 55%);
  background-size: 360px 100%;
  animation: gbShimmer 1.3s linear infinite;
}
.gb-skeleton--pill { border-radius: var(--gb-radius-pill); }

/* ---- 17 · Card (recurring article shell, DS-2:52/80 · DS-3:50) ---------- */

.gb-card {
  background: var(--gb-surface); border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-5); box-shadow: var(--gb-elev-1);
  overflow: hidden;
}
.gb-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--gb-line-2);
  background: var(--gb-surface-2);
}
.gb-card__title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gb-text-2);
}
.gb-card__note { font-size: 10px; color: var(--gb-faint); }

/* ---- 18 · Grid toolbar + density segment (DS-3:51–62, seg() :348) ------- */

.gb-listtools {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--gb-line-2); flex-wrap: wrap;
}
.gb-listtools__search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.gb-listtools__search > .ic {
  position: absolute; top: 50%; left: 11px; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--gb-faint);
}
.gb-listtools__search > input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--gb-field-border); border-radius: var(--gb-radius-3);
  outline: none; font-size: 12px; font-family: inherit;
  background: var(--gb-field); color: var(--gb-text);
}
.gb-listtools__search > input:focus { border-color: var(--gb-accent); box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-listtools__count { margin-left: auto; color: var(--gb-muted); font-size: 11px; }

.gb-seg {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-3);
  background: var(--gb-surface-2);
}
.gb-seg__btn {
  padding: 5px 11px; border: 0; border-radius: var(--gb-radius-2);
  font-size: 11px; font-family: inherit; cursor: pointer;
  font-weight: 600; background: transparent; color: var(--gb-muted);
}
.gb-seg__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-seg__btn[aria-pressed="true"] {
  font-weight: 650; background: var(--gb-surface); color: var(--gb-ink);
  box-shadow: 0 1px 2px var(--gb-shadow);
}

/* ---- 19 · Data grid — pending-pinned (DS-3:63–102, styles :361–373) ----- */

.gb-gridwrap { overflow-x: auto; }
.gb-grid { width: 100%; border-collapse: collapse; }
.gb-grid th {
  padding: 10px 14px; border-bottom: 1px solid var(--gb-line);
  background: var(--gb-surface-2); color: var(--gb-muted);
  font-size: 9.5px; font-weight: 750; letter-spacing: .06em;
  text-align: left; text-transform: uppercase; white-space: nowrap;
}
.gb-grid td {
  padding: 12px 14px; border-bottom: 1px solid var(--gb-line-2);
  color: var(--gb-text-2); font-size: 12px; vertical-align: middle;
}
/* DEV-5: row hover is a map-directed state; DS source silent — value chosen
   as the neutral hover surface */
.gb-grid tbody tr:hover { background: var(--gb-surface-2); }
.gb-grid tbody tr.is-pending, .gb-grid tbody tr.is-pending:hover { background: var(--gb-warn-row); }
.gb-grid--compact th, .gb-grid--compact td { padding: 7px 14px; }

.gb-sortbtn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.gb-sortbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-sortbtn.is-sorted { color: var(--gb-accent-strong); }
.gb-sortbtn__arrow { font-size: 8px; line-height: 1; }

.gb-grouphead td {
  padding: 6px 14px; border-bottom: 1px solid var(--gb-line-2);
  font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.gb-grouphead--pending td {
  background: var(--gb-pending-bg); color: var(--gb-pending);
  border-top: 1px solid var(--gb-pending-border);
}
.gb-grouphead--rest td { background: var(--gb-surface-2); color: var(--gb-muted); }
/* Group heads are structural rows — exempt them from the data-row hover */
.gb-grid tbody tr.gb-grouphead:hover td { background: inherit; }
.gb-grid tbody tr.gb-grouphead--pending:hover td { background: var(--gb-pending-bg); }
.gb-grid tbody tr.gb-grouphead--rest:hover td { background: var(--gb-surface-2); }

.gb-cell-duo__main { display: block; color: var(--gb-ink); font-size: 12px; font-weight: 650; }
.gb-cell-duo__sub {
  display: block; margin-top: 1px; color: var(--gb-faint);
  font-size: 10px; font-family: var(--gb-font-mono);
}
.gb-rowactions { display: flex; justify-content: flex-end; gap: 2px; }

/* ---- 20 · Empty state (DS-3:104–112) ------------------------------------ */

.gb-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 20px; text-align: center; }
.gb-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--gb-radius-5);
  background: var(--gb-accent-bg); color: var(--gb-accent);
}
.gb-empty__icon .ic { width: 20px; height: 20px; }
.gb-empty__title { font-size: 13px; font-weight: 700; color: var(--gb-ink); }
.gb-empty__hint { font-size: 12px; color: var(--gb-muted); max-width: 380px; }
.gb-empty__actions { display: flex; gap: 8px; margin-top: 4px; }

/* ---- 21 · Numbered section card + 2-col grid (DS-3:119–123 · Proto:475) - */

.gb-section__head {
  display: flex; align-items: center; gap: 11px; padding: 13px 18px;
  border-bottom: 1px solid var(--gb-line-2);
}
.gb-secnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 9px; background: var(--gb-accent-bg); color: var(--gb-accent-strong);
  font-size: 12px; font-weight: 800;
}
.gb-section__title {
  margin: 0; color: var(--gb-ink); font-size: 14px; font-weight: 750;
  letter-spacing: -.01em; white-space: nowrap;
}
.gb-section__meta { margin-left: auto; font-size: 10px; color: var(--gb-faint); }
.gb-2col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; padding: 20px 18px;
}

/* ---- 22 · Conditional-field tag (DS-3:136) ------------------------------ */

.gb-conditional {
  margin-left: auto; font-size: 9px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--gb-pending);
}

/* ---- 23 · Sticky action bar (kept name .gb-formfoot — DS-3:147 · Proto:543) */
/* DEV-1: geometry follows the operative Prototype values (radius 14, 12/20). */

.gb-formfoot {
  position: sticky; bottom: 16px; z-index: var(--gb-z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px;
  background: var(--gb-surface); border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-6); box-shadow: var(--gb-elev-3);
}
.gb-formfoot__note { margin: 0; color: var(--gb-muted); font-size: 10.5px; }
.gb-formfoot__actions { display: flex; gap: 8px; }

/* ---- 24 · Pending-diff banner (DS-3:161–191 · Proto:446–471) ------------ */

.gb-diffbanner {
  background: var(--gb-warn-row); border: 1px solid var(--gb-warn-border);
  border-radius: var(--gb-radius-5); overflow: hidden; box-shadow: var(--gb-elev-1);
}
.gb-diffbanner__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 18px 0; flex-wrap: wrap;
}
.gb-diffbanner__id { display: flex; gap: 11px; min-width: 0; }
.gb-diffbanner__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  background: var(--gb-pending-bg); color: var(--gb-pending);
  border: 1px solid var(--gb-pending-border);
}
.gb-diffbanner__icon .ic { width: 16px; height: 16px; }
.gb-diffbanner__title { display: block; font-size: 13.5px; font-weight: 700; color: var(--gb-warn-ink); }
.gb-diffbanner__meta { display: block; margin-top: 2px; font-size: 11px; color: var(--gb-warn-ink); opacity: .85; }
.gb-diffbanner__meta code { font-family: var(--gb-font-mono); font-size: 10.5px; }
.gb-diffbanner__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 18px 14px; flex-wrap: wrap;
}
.gb-diffbanner__note { font-size: 10.5px; color: var(--gb-warn-ink); opacity: .8; }

.gb-difftable {
  margin: 12px 18px; border: 1px solid var(--gb-warn-border);
  border-radius: var(--gb-radius-4); overflow: hidden; background: var(--gb-surface);
}
.gb-difftable__head, .gb-difftable__row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--gb-line-2);
  font-size: 12px; align-items: baseline;
}
.gb-difftable__head {
  padding: 8px 14px; background: var(--gb-surface-2); border-bottom: 1px solid var(--gb-line);
  font-size: 9.5px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gb-muted);
}
.gb-difftable__field { font-weight: 650; color: var(--gb-text); }
.gb-difftable__cur { color: var(--gb-danger); }
.gb-difftable__prop { color: var(--gb-success); font-weight: 700; }

/* ---- 25 · Audit drawer + governance record (DS-3:194–226 · Proto:1823) -- */

.gb-scrim {
  position: fixed; inset: 0; z-index: var(--gb-z-scrim);
  background: var(--gb-scrim); animation: gbFade .15s ease;
}
/* DEV-8: centring glue for the modal demo/runtime */
.gb-scrim--center { display: flex; align-items: center; justify-content: center; padding: 20px; }
.gb-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(680px, 100%); z-index: var(--gb-z-drawer);
  background: var(--gb-surface); border-left: 1px solid var(--gb-line);
  box-shadow: var(--gb-elev-4); overflow-y: auto;
  animation: gbDrawerIn .24s ease;
}
.gb-govrecord { border: 1px solid var(--gb-line); border-radius: var(--gb-radius-4); overflow: hidden; }
.gb-govrecord__head {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 13px;
  background: var(--gb-surface-2); border-bottom: 1px solid var(--gb-line-2);
}
.gb-govrecord__title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gb-text-2);
}
.gb-govrecord__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px; padding: 12px 13px;
}
.gb-govrecord__k {
  display: block; font-size: 8.5px; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gb-faint);
}
.gb-govrecord__v { display: block; margin-top: 3px; font-size: 11px; color: var(--gb-ink); }
.gb-govrecord__v--mono { font-family: var(--gb-font-mono); font-size: 11.5px; }

/* ---- 26 · Version comparison (DS-3:228–243) ----------------------------- */

.gb-vcompare { border: 1px solid var(--gb-line); border-radius: 9px; overflow: hidden; }
.gb-vcompare__head, .gb-vcompare__row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--gb-line-2); font-size: 11px;
}
.gb-vcompare__head {
  background: var(--gb-surface-2); border-bottom: 1px solid var(--gb-line);
  font-size: 9px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gb-muted);
}
.gb-vcompare__head code {
  font-family: var(--gb-font-mono); text-transform: none;
  font-size: 10px; color: var(--gb-accent-strong);
}
/* FR4-F4-3: long values (URLs, emails) single-line clip with ellipsis —
   full value rides the title tooltip; the changed-cell highlight sits on
   the SAME element so it survives truncation. min-width:0 lets grid
   children actually shrink. */
.gb-vcompare__label {
  font-weight: 650; color: var(--gb-text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-vcompare__val {
  color: var(--gb-text-2);
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-vcompare__changed {
  color: var(--gb-success); font-weight: 650;
  background: var(--gb-success-bg); border-radius: var(--gb-radius-1);
  padding: 0 5px; justify-self: start;
}

/* ---- 27 · Modal — destructive confirm (DS-3:244–261) -------------------- */

.gb-modal {
  width: min(400px, 100%);
  background: var(--gb-surface); border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-5); box-shadow: var(--gb-elev-4);
  overflow: hidden; animation: gbPop .18s ease;
}
.gb-modal__body { display: flex; gap: 12px; padding: 16px 18px 4px; }
.gb-modal__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--gb-radius-4);
  background: var(--gb-danger-bg); color: var(--gb-danger);
}
.gb-modal__icon .ic { width: 17px; height: 17px; }
.gb-modal__title { display: block; font-size: 14px; font-weight: 700; color: var(--gb-ink); }
.gb-modal__title code { font-family: var(--gb-font-mono); font-size: 12.5px; }
.gb-modal__text { margin: 6px 0 0; font-size: 12px; color: var(--gb-muted); }
.gb-modal__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }

/* ---- 28 · Top bar (kept name — DS-3:271–279 · Proto:186) ---------------- */
/* DEV-9: operative Prototype geometry (64px, sticky, blur); z from tokens.
   DEV-20 (R2-1 S2, amends DEV-9): z re-slotted --gb-z-nav(60) → --gb-z-sticky(40).
   The operative Prototype topbar z is literal 20 — BELOW panels (:186); at 60 the
   equal-z nav aside (earlier in DOM) would paint under the topbar in drawer mode.
   The sticky slot preserves the operative ordering within existing tokens:
   content < topbar(40) < scrim(55) < drawer(56) < nav-aside(60) < toast(80). */

.gb-topbar {
  position: sticky; top: 0; z-index: var(--gb-z-sticky);
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 26px;
  border-bottom: 1px solid var(--gb-line);
  background: var(--gb-topbar);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.gb-topbar__brand { display: flex; align-items: center; gap: 10px; }
.gb-topbar__brand strong { font-size: 14px; letter-spacing: -.2px; color: var(--gb-ink); }
.gb-topbar__mark {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 2px;
  width: 26px; height: 26px; padding: 5px;
  border-radius: var(--gb-radius-3); border: 1px solid var(--gb-line); background: var(--gb-surface);
}
.gb-topbar__mark span { border-radius: 1.5px; background: var(--gb-mark-1); }
.gb-topbar__mark span:nth-child(1) { height: 6px; }
.gb-topbar__mark span:nth-child(2) { height: 12px; background: var(--gb-mark-2); }
.gb-topbar__mark span:nth-child(3) { height: 9px; }
.gb-topbar__crumb { display: flex; align-items: center; gap: 7px; color: var(--gb-muted); font-size: 11px; }
.gb-topbar__crumb code { font-family: var(--gb-font-mono); font-size: 10.5px; }
.gb-topbar__tenant {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  padding: 5px 11px; border: 1px solid var(--gb-line); border-radius: var(--gb-radius-pill);
  background: var(--gb-surface); font-size: 10.5px; color: var(--gb-text-2);
}
.gb-topbar__tenant .ic { width: 13px; height: 13px; color: var(--gb-accent); }
.gb-topbar__tenant code { font-family: var(--gb-font-mono); font-size: 10px; }
.gb-topbar__bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--gb-line); border-radius: 9px;
  background: var(--gb-surface); color: var(--gb-text-2); cursor: pointer;
}
.gb-topbar__bell:hover { color: var(--gb-accent); }
.gb-topbar__bell .ic { width: 16px; height: 16px; }
.gb-topbar__dot {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border: 2px solid var(--gb-surface); border-radius: 50%; background: var(--gb-danger);
}
.gb-topbar__userpill {
  display: flex; align-items: center; gap: 8px; padding: 3px 11px 3px 3px;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-pill);
  background: var(--gb-surface); cursor: pointer; font-family: inherit;
}
.gb-topbar__userpill:hover { border-color: var(--gb-field-border); }
.gb-topbar__userpill strong { font-size: 11px; font-weight: 650; color: var(--gb-text); }
.gb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(145deg, var(--gb-avatar-a), var(--gb-avatar-b));
  color: var(--gb-on-brand); font-size: 10px; font-weight: 700;
}
/* ---- 29 · App shell + left nav (Proto:33–38/:154–207/:1983–1994) -------- */
/* DEV-6: .gb-aside = layout column (Prototype hook), .gb-sidebar = nav
   surface; DEV-7: 256px operative width (Prototype) over DS-3's 230px demo.
   FR1-F6 (R3 fix round 1, amends DEV-9's rail model): the OPERATIVE Prototype
   shell is a slide-in overlay drawer at EVERY width (Proto :33–38 — .gb-shell
   forced to one column, aside fixed + translateX(-100%), hamburger always
   visible; open state = data-nav="open" on .gb-root, scrim closes it). The
   ≥1025px persistent rail is retired. FR1-F2: item/label type scale + 18px
   per-item icons per Proto :166/:1987. */

.gb-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.gb-aside {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: var(--gb-z-nav);
  width: 256px; transform: translateX(-100%); transition: transform .24s ease;
  box-shadow: 8px 0 40px var(--gb-shadow);
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--gb-sidebar); color: var(--gb-sidebar-ink-strong);
  border-right: 1px solid var(--gb-sidebar-border);
}
.gb-root[data-nav="open"] .gb-aside { transform: translateX(0); }
.gb-root[data-nav="open"] .gb-shell-scrim {
  display: block; position: fixed; inset: 0;
  z-index: var(--gb-z-scrim); background: var(--gb-scrim);
}
.gb-content { padding: 28px 26px 56px; }

.gb-sidebar { padding: 14px 12px; }
.gb-sidebar__label {
  margin: 18px 8px 7px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--gb-sidebar-label);
}
.gb-nav-section:first-of-type .gb-sidebar__label { margin-top: 8px; }
.gb-sidebar__item {
  display: flex; align-items: center; gap: 11px; margin: 2px 0; padding: 9px 12px;
  border-radius: 9px; font-size: 13px; font-weight: 550;
  color: var(--gb-sidebar-ink); cursor: pointer; text-decoration: none;
}
.gb-sidebar__item .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.gb-sidebar__item:hover { background: var(--gb-sidebar-hover); color: var(--gb-sidebar-ink-strong); }
.gb-sidebar__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-sidebar__item.is-active {
  background: var(--gb-sidebar-active-bg); color: var(--gb-sidebar-ink-strong);
  box-shadow: inset 2px 0 0 var(--gb-sidebar-active-bar);
}

/* FR1-F6: hamburger always visible (Proto :38) — 38px per Proto :187. */
.gb-hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--gb-line); border-radius: 9px;
  background: var(--gb-surface); color: var(--gb-text-2); cursor: pointer;
}
.gb-shell-scrim { display: none; }

@media (max-width: 640px) {
  .gb-topbar { padding: 0 12px; gap: 10px; }
  .gb-content { padding: 18px 13px 44px; }
  .gb-2col { grid-template-columns: 1fr; }
  .gb-formfoot { flex-wrap: wrap; }
  .gb-listtools { gap: 8px; }
  .gb-listtools__search { max-width: none; flex: 1 1 100%; }
}

/* ---- 30 · Login card (DS-3:304–317) ------------------------------------- */

.gb-logincard {
  max-width: 360px; margin: 0 auto;
  background: var(--gb-surface); border-radius: var(--gb-radius-6);
  box-shadow: var(--gb-elev-4); padding: 26px 26px 22px;
}

/* ==========================================================================
   R2-1 additions (Design R2-1 S2, per R2D-3) — recon RC1.5 class gaps.
   DEV numbering continues the R1 sequence (DEV-1..12 recorded at S2 review).
   ========================================================================== */

/* ---- 31 · Page header (Prototype :212/:314/:417/:791, responsive :62) ---- */
/* DEV-13: extracted from the Prototype's inline pagehead pattern. */

.gb-pagehead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 20px;
}
.gb-pagehead__crumb {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  color: var(--gb-muted); font-size: 11px;
}
.gb-pagehead__crumb .ic { width: 12px; height: 12px; }
.gb-pagehead__crumblink {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--gb-accent); font-weight: 600; font-size: 11px; font-family: inherit;
  text-decoration: none;
}
.gb-pagehead__crumblink:hover { color: var(--gb-accent-strong); }
.gb-pagehead__crumblink:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-pagehead__title {
  margin: 0; font-size: 24px; font-weight: 750;
  letter-spacing: -.03em; color: var(--gb-ink);
}
.gb-pagehead__sub { margin: 7px 0 0; max-width: 680px; color: var(--gb-muted); font-size: 13px; }
.gb-pagehead__actions { display: flex; gap: 9px; flex: 0 0 auto; flex-wrap: wrap; }
@media (max-width: 640px) {
  .gb-pagehead { flex-direction: column; align-items: stretch; }
}

/* ---- 32 · Detail grid + read-only items (Prototype :473–487) ------------- */
/* DEV-14: dt/dd item styling from the Prototype's detail dl (:482). */

.gb-detailgrid { display: grid; gap: 16px; align-items: start; }
.gb-detailgrid dl.gb-2col { margin: 0; gap: 18px 28px; }
.gb-detailgrid dt {
  margin-bottom: 4px; color: var(--gb-text-2);
  font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
}
.gb-detailgrid dd { margin: 0; color: var(--gb-text); font-size: 13px; overflow-wrap: anywhere; }

/* ---- 33 · Form grid (Prototype :520) ------------------------------------- */
/* DEV-15 */

.gb-formgrid { display: grid; gap: 16px; align-items: start; }

/* ---- 34 · Identity strip (Prototype :430–444, responsive :63–64) --------- */
/* DEV-16 */

.gb-idstrip {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  margin-bottom: 18px; padding: 20px 22px;
  background: var(--gb-surface); border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-5); box-shadow: var(--gb-elev-1);
}
.gb-idstrip__main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gb-idstrip__initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: 0 0 auto;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-6);
  background: linear-gradient(145deg, var(--gb-accent-bg), var(--gb-surface));
  color: var(--gb-accent-strong); font-size: 17px; font-weight: 780;
}
.gb-idstrip__name {
  margin: 0; font-size: 20px; letter-spacing: -.02em; color: var(--gb-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-idstrip__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; margin-top: 8px;
}
.gb-idstrip__id { font-family: var(--gb-font-mono); font-size: 11px; color: var(--gb-text-2); }
.gb-idstrip__reason { flex-basis: 100%; margin-top: 2px; font-size: 11.5px; color: var(--gb-muted); }
@media (max-width: 640px) {
  .gb-idstrip { grid-template-columns: 1fr; }
}

/* ---- 35 · Neutral tag (Prototype badgeMeta default :1542) ---------------- */
/* DEV-17: classification badges (Internal/External) fall to neutral. */

.gb-tag--neutral { background: var(--gb-neutral-bg); color: var(--gb-neutral); }

/* ---- 36 · Lock-on-pending notice (user_edit; NO design counterpart) ------ */
/* DEV-18: bespoke — the design's edit template doesn't model lock-on-pending. */

.gb-pendnotice {
  display: none; align-items: flex-start; gap: 10px;
  margin-bottom: 18px; padding: 13px 16px;
  background: var(--gb-warn-row); border: 1px solid var(--gb-warn-border);
  border-radius: var(--gb-radius-4); color: var(--gb-warn-ink); font-size: 12px;
}
.gb-pendnotice.show { display: flex; }
.gb-pendnotice .ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gb-pending); }

/* ---- 37 · Shell-lift glue (R2D-3) ---------------------------------------- */
/* DEV-19: loader slots become transparent grid members so the injected
   .gb-aside / .gb-topbar sit as true .gb-shell / .gb-main children;
   .gb-main column from Prototype :185. */

#gb-top-nav-container, #gb-left-nav-container { display: contents; }
.gb-main { min-width: 0; display: flex; flex-direction: column; }

/* ---- 38 · Login split panel (R2-1b; operative Prototype :91–150) --------- */
/* DEV-21: the operative login is this split panel (R-D9); §30's .gb-logincard
   (DS-3 demo anatomy) stays as authored for reference. Brand/form TEXT
   elements carry inline token styles (Prototype-style) — only the structural
   classes below are authored, per the locked R2-1b proposal. */

.gb-login {
  display: grid; grid-template-columns: 1.05fr 1fr;
  min-height: 100vh; background: var(--gb-surface);
}
.gb-login__brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  padding: 48px clamp(36px, 5vw, 72px);
  background: var(--gb-brand); color: var(--gb-on-brand);
}
/* Decorative rings (Prototype :94–95) */
.gb-login__brand::before, .gb-login__brand::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid var(--gb-on-brand-surface);
}
.gb-login__brand::before { top: -160px; right: -120px; width: 460px; height: 460px; }
.gb-login__brand::after { top: 60px; right: -40px; width: 300px; height: 300px; }
.gb-login__mark {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px;
  width: 36px; height: 36px; padding: 7px; flex: 0 0 auto;
  border: 1px solid var(--gb-on-brand-border); border-radius: 10px;
  background: var(--gb-on-brand-surface);
}
.gb-login__mark span { border-radius: 2px; background: var(--gb-mark-1); }
.gb-login__mark span:nth-child(1) { height: 9px; }
.gb-login__mark span:nth-child(2) { height: 18px; background: var(--gb-mark-2); }
.gb-login__mark span:nth-child(3) { height: 13px; }
.gb-login__form {
  display: flex; flex-direction: column; justify-content: center;
  max-width: 460px; width: 100%; margin: 0 auto;
  padding: 48px clamp(28px, 5vw, 56px);
}
.gb-login__mini { display: none; align-items: center; gap: 10px; margin-bottom: 26px; }
.gb-login__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0; color: var(--gb-faint); font-size: 11px;
}
.gb-login__divider::before, .gb-login__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--gb-line);
}
.gb-login__msg {
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-3);
  font-size: 12px;
}
.gb-login__msg--error { background: var(--gb-danger-bg); color: var(--gb-danger); border-color: var(--gb-danger-border); }
.gb-login__msg--success { background: var(--gb-success-bg); color: var(--gb-success); border-color: var(--gb-success-border); }
.gb-login__aux { margin-top: 22px; text-align: center; font-size: 12px; }
.gb-login__aux a { color: var(--gb-accent); font-weight: 600; text-decoration: none; }
.gb-login__aux a:hover { text-decoration: underline; }
.gb-login__aux a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
@media (max-width: 900px) {
  .gb-login { grid-template-columns: 1fr; }
  .gb-login__brand { display: none; }
  .gb-login__mini { display: flex; }
}

/* ==========================================================================
   R2-2 additions (Design R2-2 S1, per the locked proposal's class kit +
   SD-5). DEV numbering continues the sequence (DEV-13..21 above).
   ========================================================================== */

/* ---- 39 · Access master-detail (Prototype :803 / :807–814 / :819–825) ---- */
/* DEV-22: two-pane access geometry + operator list rows + right-pane header.
   Pane cards themselves are .gb-card reuse. Stacks at the shell drawer
   breakpoint (1024px), list pane above detail pane. */

.gb-accessgrid {
  display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 18px; align-items: start;
}
@media (max-width: 1024px) {
  .gb-accessgrid { grid-template-columns: 1fr; }
}
.gb-accesslist { margin: 0; padding: 6px 8px 10px; list-style: none; display: grid; gap: 2px; }
.gb-accessrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--gb-radius-3);
  background: none; cursor: pointer; text-align: left; font-family: inherit;
}
.gb-accessrow:hover { background: var(--gb-surface-2); }
.gb-accessrow:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-accessrow[aria-selected="true"] { background: var(--gb-accent-bg); }
.gb-accessrow__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(145deg, var(--gb-avatar-a), var(--gb-avatar-b));
  color: var(--gb-on-brand); font-size: 10px; font-weight: 700;
}
.gb-accessrow__main { min-width: 0; flex: 1; }
.gb-accessrow__name {
  display: block; font-size: 12px; font-weight: 650; color: var(--gb-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-accessrow__sub {
  display: block; margin-top: 1px; color: var(--gb-muted); font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-accesshead {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--gb-line-2); flex-wrap: wrap;
}
.gb-accesshead__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gb-accesshead__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--gb-avatar-a), var(--gb-avatar-b));
  color: var(--gb-on-brand); font-size: 15px; font-weight: 700;
}
.gb-accesshead__name { margin: 0; font-size: 16px; color: var(--gb-ink); }
.gb-accesshead__meta {
  margin: 2px 0 0; color: var(--gb-muted); font-size: 11.5px;
  font-family: var(--gb-font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-accesshead__side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ---- 40 · Persona role-group kit (Prototype :589–616, fn chips :607–611) - */
/* DEV-23: maker/approver group sections + role rows + function-preview chips
   + the persona_view per-role collapsible (bespoke composition per D-2 —
   the design's generic persona detail is deliberately NOT applied). */

.gb-rolegroup { border: 1px solid var(--gb-line); border-radius: var(--gb-radius-5); overflow: hidden; }
.gb-rolegroup__head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--gb-surface-2); border-bottom: 1px solid var(--gb-line);
}
.gb-rolegroup__hint { font-size: 10.5px; color: var(--gb-muted); }
.gb-rolegroup__count {
  margin-left: auto; font-size: 10.5px; color: var(--gb-text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gb-rolegroup__body { display: grid; gap: 8px; padding: 12px 14px; }
.gb-rolerow { border: 1px solid var(--gb-line); border-radius: var(--gb-radius-4); background: var(--gb-surface); }
.gb-rolerow.is-checked { border-color: var(--gb-accent); background: var(--gb-accent-bg); }
.gb-rolerow__main { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.gb-rolerow__main input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--gb-brand);
  cursor: pointer; flex: 0 0 auto; margin: 0;
}
.gb-rolerow__exp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-2);
  background: var(--gb-surface-2); color: var(--gb-text-2);
  cursor: pointer; font-size: 14px; line-height: 1; font-family: inherit;
}
.gb-rolerow__exp:hover { border-color: var(--gb-accent); color: var(--gb-accent); }
.gb-rolerow__exp:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-rolerow__name {
  font-size: 12.5px; color: var(--gb-ink); font-weight: 650;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gb-rolerow__id {
  display: block; margin-top: 2px; font-size: 10px; color: var(--gb-muted);
  letter-spacing: .04em; font-family: var(--gb-font-mono);
}
.gb-fnchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 62px; }
.gb-fnchip {
  display: inline-flex; padding: 3px 9px; border-radius: var(--gb-radius-2);
  background: var(--gb-surface-2); border: 1px solid var(--gb-line);
  color: var(--gb-text-2); font-size: 10.5px; font-family: var(--gb-font-mono);
}

/* persona_view per-role collapsible (D-2 bespoke card content) */
.gb-acc { border: 1px solid var(--gb-line); border-radius: var(--gb-radius-4); overflow: hidden; background: var(--gb-surface); }
.gb-acc + .gb-acc { margin-top: 8px; }
.gb-acc__head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px;
  border: 0; background: var(--gb-surface-2); cursor: pointer;
  font-family: inherit; text-align: left;
}
.gb-acc__head:hover { background: var(--gb-accent-bg); }
.gb-acc__head:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gb-focus); }
.gb-acc__chev { transition: transform .18s ease; color: var(--gb-muted); font-size: 11px; }
.gb-acc.open .gb-acc__chev { transform: rotate(90deg); }
.gb-acc__name { font-weight: 650; font-size: 12.5px; color: var(--gb-ink); }
.gb-acc__id { margin-left: auto; font-family: var(--gb-font-mono); font-size: 10.5px; color: var(--gb-faint); }
.gb-acc__body { display: none; padding: 10px 14px 12px 38px; border-top: 1px solid var(--gb-line-2); }
.gb-acc.open .gb-acc__body { display: block; }
.gb-fnrow { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.gb-fnrow > .ic { width: 14px; height: 14px; color: var(--gb-success); margin-top: 2px; }
.gb-fnrow__id { font-family: var(--gb-font-mono); font-size: 11.5px; color: var(--gb-text); }
.gb-fnrow__name { color: var(--gb-muted); font-size: 11.5px; }

/* ---- 41 · Granted-roles persona folder (Prototype :836–848) -------------- */
/* DEV-24: access view-state "granted roles by persona" folder cards. */

.gb-personafolder { border: 1px solid var(--gb-line-2); border-radius: var(--gb-radius-4); overflow: hidden; }
.gb-personafolder__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; background: var(--gb-surface-2); border-bottom: 1px solid var(--gb-line-2);
}
.gb-personafolder__name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--gb-accent-strong);
}
.gb-personafolder__name .ic { width: 15px; height: 15px; }
.gb-personafolder__row {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-bottom: 1px solid var(--gb-line-2);
}
.gb-personafolder__row:last-child { border-bottom: 0; }
.gb-personafolder__row > .ic { width: 16px; height: 16px; color: var(--gb-faint); flex: 0 0 auto; }
.gb-personafolder__rmain { flex: 1; min-width: 0; }
.gb-personafolder__rname { font-size: 12.5px; font-weight: 600; color: var(--gb-text); }
.gb-personafolder__rmeta {
  margin-top: 2px; font-family: var(--gb-font-mono); font-size: 10.5px; color: var(--gb-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 42 · Market dual-list (SD-5) ---------------------------------------- */
/* DEV-25: bespoke — NO design counterpart (the design access screen carries
   no markets section). Anatomy/tokens per the locked proposal SD-5;
   design-feedback entry queued at close so the design source gains the
   pattern. Stacks with the accessgrid at 1024px (supersedes legacy 820px). */

.gb-duallist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1024px) { .gb-duallist { grid-template-columns: 1fr; } }
.gb-duallist__pane {
  border: 1px solid var(--gb-line); border-radius: var(--gb-radius-4);
  overflow: hidden; background: var(--gb-surface);
}
.gb-duallist__head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--gb-surface-2); border-bottom: 1px solid var(--gb-line-2);
  font-weight: 700; font-size: 12px; color: var(--gb-text);
}
.gb-duallist__body { max-height: 360px; overflow: auto; min-height: 120px; }
.gb-mktrow {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--gb-line-2);
}
.gb-mktrow:last-child { border-bottom: 0; }
.gb-mktrow__main { flex: 1; min-width: 0; }
.gb-mktrow__code { font-weight: 700; font-family: var(--gb-font-mono); font-size: 12px; color: var(--gb-text); }
.gb-mktrow__name { font-size: 11.5px; color: var(--gb-muted); margin-left: 6px; }
.gb-duallist__act {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-weight: 650; font-size: 12px; white-space: nowrap;
  padding: 4px 8px; border-radius: var(--gb-radius-2); font-family: inherit;
}
.gb-duallist__act:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gb-focus); }
.gb-duallist__act--add { color: var(--gb-accent); }
.gb-duallist__act--add:hover { background: var(--gb-accent-bg); }
.gb-duallist__act--rm { color: var(--gb-danger); }
.gb-duallist__act--rm:hover { background: var(--gb-danger-bg); }
.gb-dirtydot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gb-pending); margin-left: 8px;
}
.gb-warnnote {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 11px 14px;
  background: var(--gb-warn-row); border: 1px solid var(--gb-warn-border);
  border-radius: var(--gb-radius-4); color: var(--gb-warn-ink); font-size: 12px;
}

/* ---- 43 · Effective-access footer (Prototype :851–857; SD-6 copy) -------- */
/* DEV-26: chips row + summary sentence (+ action slot in edit state). The
   design's "maker-checked" clause is dropped per D-5/P-TRUTH. */

.gb-efffoot { padding: 16px 20px; border-top: 1px solid var(--gb-line-2); background: var(--gb-surface-2); }
.gb-efffoot__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.gb-efffoot__chips {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--gb-muted);
}
.gb-effchip {
  display: inline-flex; align-items: center; padding: 4px 11px;
  border-radius: var(--gb-radius-pill); background: var(--gb-info-bg); color: var(--gb-info);
  font-size: 11.5px; font-weight: 600;
}
.gb-efffoot__summary { margin: 10px 0 0; color: var(--gb-muted); font-size: 10.5px; }

/* ---- 44 · List footer bar + toolbar select (Prototype :397–409, :332) ---- */
/* DEV-27 (R-D10/SD-14): range label + rows-per-page + pagination cluster;
   plus the toolbar status-select sizing (design :332). Buttons reuse §13. */

.gb-listfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 12px 16px;
  border-top: 1px solid var(--gb-line-2);
  color: var(--gb-muted); font-size: 11px;
}
.gb-listfoot__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gb-listfoot__rpp { display: inline-flex; align-items: center; gap: 8px; color: var(--gb-muted); }
.gb-listfoot__rpp select {
  height: 29px; padding: 0 24px 0 9px;
  border: 1px solid var(--gb-field-border); border-radius: var(--gb-radius-2);
  outline: none; background: var(--gb-surface); color: var(--gb-text-2);
  font-size: 11px; font-family: inherit;
}
.gb-listtools__select select {
  height: 36px; padding: 0 28px 0 11px;
  border: 1px solid var(--gb-field-border); border-radius: var(--gb-radius-3);
  outline: none; background: var(--gb-surface); color: var(--gb-text-2);
  font-size: 12px; font-family: inherit;
}
.gb-listtools__select select:focus { border-color: var(--gb-accent); box-shadow: 0 0 0 3px var(--gb-focus); }

/* ---- 45 · Filter panel (Prototype :336–353) ------------------------------ */
/* DEV-28 (R-D10/SD-14): the Filters-affordance facet panel + count badge. */

.gb-filterpanel { padding: 14px 16px 13px; border-bottom: 1px solid var(--gb-line-2); background: var(--gb-surface-2); }
.gb-filterpanel__groups { display: grid; gap: 11px; }
.gb-filterpanel__grouprow { display: flex; align-items: flex-start; gap: 14px; }
.gb-filterpanel__label {
  flex: 0 0 130px; padding-top: 6px;
  font-size: 9.5px; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gb-faint);
}
.gb-filterpanel__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-filterpanel__foot {
  display: flex; align-items: center; gap: 16px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--gb-line-2);
  font-size: 11px; color: var(--gb-muted);
}
.gb-filterpanel__clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 650; color: var(--gb-accent); font-family: inherit;
}
.gb-filterbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--gb-accent); color: var(--gb-on-brand);
  font-size: 10px; font-weight: 700;
}

/* R2-2 matrix round 2, Defect 1 (amends §8's consumer contract globally):
   .gb-selectwrap draws its OWN chevron — suppress the native <select> arrow
   so it never doubles. Covers every selectwrap consumer (form selects,
   toolbar status dropdowns, rows-per-page). */
.gb-selectwrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px; /* FR1-F4: clear the drawn chevron (design :26 = 34px) */
}
/* FR1-F4: FORM-context wrapped selects get the full design field skin
   (Prototype :532) — several migrated forms shipped wrapped-but-classless
   selects that rendered native. Scoped to .gb-field so the compact toolbar/
   pager selectwraps (.gb-listtools/.gb-listfoot) keep their own DEV-27 skin. */
.gb-field .gb-selectwrap { display: block; }
.gb-field .gb-selectwrap select {
  width: 100%; min-height: 38px; padding: 9px 30px 9px 11px;
  border: 1px solid var(--gb-field-border); border-radius: var(--gb-radius-3);
  background: var(--gb-field-bg); color: var(--gb-text);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.gb-field .gb-selectwrap select:focus {
  outline: none; border-color: var(--gb-brand); box-shadow: 0 0 0 3px var(--gb-focus);
}
.gb-field .gb-selectwrap select:hover { border-color: var(--gb-brand); }
.gb-field .gb-selectwrap select:disabled {
  background: var(--gb-surface-2); color: var(--gb-faint); cursor: not-allowed;
}

/* ---- 46 · Unresolved-role card (R2-2 round 2, Sangram-ruled; P-TRUTH) ---- */
/* DEV-29: honest degradation when a granted role cannot be resolved against
   the catalog (today's Defect-2 404 path, or any future genuine dangling
   grant) — muted card, raw mono role_id, caption; NEVER a fabricated badge
   or phantom verb values. Permanent regardless of the Defect-2 outcome. */

.gb-unresolved {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px dashed var(--gb-line);
  border-radius: var(--gb-radius-3); background: var(--gb-surface-2);
}
.gb-unresolved__id { font-family: var(--gb-font-mono); font-size: 11.5px; color: var(--gb-text-2); }
.gb-unresolved__cap { font-size: 11px; color: var(--gb-faint); }

/* 47) DEV-30 (R3 S6): audit children-delta table — the LOB / capability
   drawers' Added/Removed/Changed child rows, migrated from the legacy
   .audit-child-* inline styles onto tokens. Rendered inside the audit
   drawer timeline via the family eventExtra hook. */
.gb-childdelta { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11.5px; }
.gb-childdelta th {
  text-align: left; padding: 6px 10px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gb-faint);
  border-bottom: 1px solid var(--gb-line);
}
.gb-childdelta td { padding: 6px 10px; border-bottom: 1px solid var(--gb-line-2); color: var(--gb-text-2); }
.gb-childdelta__ccy { font-family: var(--gb-font-mono); font-size: 11px; color: var(--gb-text); }
.gb-childdelta__arrow { color: var(--gb-faint); padding: 0 4px; }
.gb-childdelta__tag {
  display: inline-flex; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.gb-childdelta__tag--added { background: var(--gb-success-bg, #dcf3e6); color: var(--gb-success); }
.gb-childdelta__tag--removed { background: var(--gb-danger-bg, #fde8e8); color: var(--gb-danger); }
.gb-childdelta__tag--changed { background: var(--gb-warn-row); color: var(--gb-warn-ink); }
.gb-childdelta tr.is-removed td { opacity: .68; }