:root {
  color-scheme: light;
  --canvas: #f6f3ea;
  --paper: #fffdf6;
  --raised: #faf7ef;
  --ink: #4a3429;
  --muted: #6f6259;
  --line: #ded4c2;
  --line-strong: #b8a98f;
  --bronze: #986d3f;
  --info: #4d6f96;
  --success: #4f7a55;
  --warning: #b98922;
  --critical: #b54d37;
  --aubergine: #68425e;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1a1614;
  --paper: #231e1a;
  --raised: #2a2420;
  --ink: #e8d5c8;
  --muted: #a0948b;
  --line: #3a322a;
  --line-strong: #5a4e42;
  --bronze: #c8945a;
  --info: #6d8fb8;
  --success: #6ba07a;
  --warning: #d4a43a;
  --critical: #d4654f;
  --aubergine: #8c5e7e;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--canvas); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
button, input { font: inherit; }
button, a, input { outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, tr:focus-visible { outline: 2px solid var(--info); }
button { color: inherit; }
a { color: inherit; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; display: flex; flex-direction: column; padding: 16px 12px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--raised) 82%, var(--canvas)); z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; background: var(--ink); color: var(--canvas); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.route-count { margin: 0 8px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--muted); font-size: 11px; }
.route-count span { color: var(--ink); font-weight: 800; }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding-right: 3px; }
.nav-group { margin: 0 0 14px; }
.nav-group h2, .eyebrow { margin: 0 8px 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nav-link { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid transparent; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 12px; }
.nav-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.nav-link.active { border-color: color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-weight: 700; }
.nav-link small { color: var(--bronze); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.operator-card { display: grid; gap: 3px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.operator-card .eyebrow { margin: 0 0 3px; }
.sidebar-role-wrap select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); color: var(--ink); font-size: 11px; font-weight: 700; }
.operator-card strong { font-size: 12px; }
.operator-card span:last-child { color: var(--muted); font-size: 11px; }

.workspace { width: calc(100% - 238px); margin-left: 238px; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 8; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); }
.global-search-wrap { width: min(680px, 58vw); height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.search-label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.global-search-wrap input { min-width: 0; min-height: 24px; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); }
.global-search-wrap kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 10px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.environment { padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.icon-button, .secondary-button, .filter-chip { min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); cursor: pointer; }
.icon-button:hover, .secondary-button:hover, .filter-chip:hover { border-color: var(--line-strong); background: var(--raised); }
.badge { min-width: 17px; display: inline-grid; place-items: center; margin-left: 4px; padding: 1px 4px; border-radius: 9px; background: var(--critical); color: var(--paper); font-size: 9px; font-weight: 800; }
.mobile-only { display: none; }

#page-root { max-width: 1800px; min-height: calc(100vh - 68px); margin: 0 auto; padding: 20px; }
#page-root:focus { outline: 0; }
.page { display: grid; gap: 14px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 11px; }
.breadcrumbs a { min-height: 24px; display: inline-flex; align-items: center; text-decoration: none; }
.breadcrumbs strong { color: var(--ink); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.page-heading .eyebrow, .surface .eyebrow, .metric .eyebrow, .auth-card .eyebrow, .panel-heading .eyebrow { margin: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 7px; font-size: 23px; line-height: 1.15; letter-spacing: 0; }
h2 { margin-bottom: 6px; font-size: 17px; line-height: 1.2; }
h3 { font-size: 14px; }
.page-heading p { max-width: 760px; margin-bottom: 0; color: var(--muted); line-height: 1.45; }
.heading-actions { display: flex; align-items: center; gap: 10px; }
.freshness { color: var(--muted); font-size: 11px; white-space: nowrap; }
.primary-button { min-height: 40px; padding: 9px 14px; border: 1px solid var(--ink); border-radius: 5px; background: var(--ink); color: var(--canvas); font-weight: 700; cursor: pointer; white-space: nowrap; }
.primary-button:hover { opacity: .88; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric { min-height: 112px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.metric-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 14px; }
.metric-line strong { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-line span { padding: 3px 6px; border-radius: 4px; background: var(--raised); color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.metric p { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.tone-info .metric-line strong, .tone-info .status-dot { color: var(--info); background-color: var(--info); }
.tone-success .metric-line strong, .tone-success .status-dot { color: var(--success); background-color: var(--success); }
.tone-warning .metric-line strong, .tone-warning .status-dot { color: var(--warning); background-color: var(--warning); }
.tone-critical .metric-line strong, .tone-critical .status-dot { color: var(--critical); background-color: var(--critical); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip { min-height: 32px; color: var(--muted); font-size: 11px; }
.filter-chip.active { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.contract-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.contract-main, .contract-rail { display: grid; gap: 12px; min-width: 0; }
.contract-purpose, .contract-work, .contract-signals, .contract-ownership, .contract-actions, .contract-drilldown, .contract-states { overflow: hidden; }
.contract-id { color: var(--bronze); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.contract-anatomy { padding: 0 15px 15px; }
.contract-anatomy ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.contract-anatomy li { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.contract-anatomy li span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas); font-size: 10px; font-weight: 800; }
.contract-anatomy li strong { font-size: 11px; }
.contract-work .mode-tabs { padding: 0 15px; }
.contract-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 15px; border-top: 1px solid var(--line); }
.contract-table-scroll { overflow-x: auto; border-top: 1px solid var(--line); margin-top: 10px; }
.contract-table-scroll table { min-width: 720px; }
.contract-signals .surface-heading, .contract-ownership .surface-heading, .contract-actions .surface-heading, .contract-drilldown .surface-heading, .contract-states .surface-heading { min-height: 56px; border-bottom: 1px solid var(--line); }
.contract-signal { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.contract-signal:last-child { border-bottom: 0; }
.contract-signal > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.contract-signal span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.contract-signal strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.contract-signal p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.contract-signal.tone-info strong { color: var(--info); }
.contract-signal.tone-success strong { color: var(--success); }
.contract-signal.tone-warning strong { color: var(--warning); }
.contract-signal.tone-critical strong { color: var(--critical); }
.contract-ownership dl { display: grid; gap: 0; margin: 0; padding: 0 14px 12px; }
.contract-ownership dl div { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.contract-ownership dl div:last-child { border-bottom: 0; }
.contract-ownership dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.contract-ownership dd { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.35; }
.contract-action-list { display: grid; gap: 7px; padding: 12px 14px 14px; }
.contract-action-list button { width: 100%; text-align: left; }
.contract-drilldown > p { margin: 12px 14px 2px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.contract-drilldown .full-width { margin-top: 12px; margin-bottom: 14px; }
.contract-chip-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 4px; }
.contract-chip-list span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); color: var(--muted); font-size: 10px; }
.fixture-note { margin: 9px 14px 14px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.surface { border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.surface-heading { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; }
.surface-heading h2 { margin: 5px 0 0; }
.registry { min-width: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: color-mix(in srgb, var(--ink) 2%, var(--paper)); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
td { color: var(--muted); font-size: 12px; line-height: 1.35; }
td strong { color: var(--ink); }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr:focus { background: color-mix(in srgb, var(--info) 5%, var(--paper)); }
.empty-state { padding: 40px; text-align: center; }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { margin-top: 5px; color: var(--muted); }
.insights { padding: 15px; }
.insights h2 { margin-top: 5px; }
.ai-contract { padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); color: var(--muted); font-size: 10px; line-height: 1.4; }
.insight-list { display: grid; gap: 8px; }
.insight { padding: 11px; border: 1px solid var(--line); border-radius: 5px; }
.insight div { display: flex; align-items: center; gap: 7px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.insight strong { font-size: 12px; }
.insight p { margin: 6px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.insight button { min-height: 24px; display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--info); font-size: 11px; font-weight: 700; cursor: pointer; }

.side-panel { position: fixed; inset: 0 0 0 auto; width: min(430px, 92vw); z-index: 31; padding: 20px; border-left: 1px solid var(--line); background: var(--paper); transform: translateX(100%); transition: transform 200ms cubic-bezier(.16, 1, .3, 1); overflow-y: auto; }
.side-panel.open { transform: translateX(0); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin-top: 5px; }
.panel-heading button { min-height: 24px; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.scrim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--ink) 34%, transparent); }
.notification-list article { padding: 15px 0; border-bottom: 1px solid var(--line); }
.notification-list p { margin: 5px 0; color: var(--muted); line-height: 1.4; }
.notification-list span { color: var(--muted); font-size: 10px; }
.quick-view dl { display: grid; gap: 0; margin: 20px 0; }
.quick-view dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.quick-view dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.quick-view dd { margin: 0; }
.workflow-context { margin: 16px 0; padding: 13px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--raised); }
.workflow-context span, .workflow-context strong { display: block; }
.workflow-context span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.workflow-context strong { margin-top: 5px; font-size: 13px; }
.workflow-context p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.workflow-section { padding: 15px 0; border-top: 1px solid var(--line); }
.workflow-section h3 { margin: 5px 0 9px; font-size: 13px; }
.workflow-section dl { margin: 0; }
.workflow-evidence { display: flex; flex-wrap: wrap; gap: 6px; }
.workflow-evidence span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); color: var(--muted); font-size: 10px; }
.workflow-actions { display: grid; gap: 7px; }
.workflow-actions button { width: 100%; text-align: left; }
.workflow-return { margin-top: 6px; }
.timeline { display: grid; gap: 13px; padding-left: 18px; }
.timeline li::marker { color: var(--info); }
.timeline strong, .timeline span { display: block; }
.timeline span { color: var(--muted); font-size: 10px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--ink); color: var(--canvas); opacity: 0; transform: translate(-50%, 12px); transition: 180ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.auth-stage { min-height: calc(100vh - 108px); display: grid; place-items: center; }
.auth-card { width: min(460px, 100%); padding: 28px; }
.auth-card h1 { margin-top: 7px; }
.auth-card > p { color: var(--muted); line-height: 1.5; }
.auth-card label { display: grid; gap: 6px; margin: 24px 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.auth-card input { min-height: 42px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--raised); color: var(--ink); }
.auth-card .primary-button { width: 100%; }
.auth-note { margin: 14px 0 0; text-align: center; font-size: 10px; }

.permission-page { min-height: calc(100vh - 108px); }
.permission-card { width: min(720px, 100%); margin: 52px auto 0; padding: 28px; border-color: var(--warning); background: color-mix(in srgb, var(--warning) 4%, var(--paper)); }
.permission-card h1 { margin: 8px 0; }
.permission-card > p { max-width: 62ch; color: var(--muted); line-height: 1.55; }
.permission-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0; }
.permission-card dl div { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.permission-card dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.permission-card dd { margin: 7px 0 0; font-size: 11px; font-weight: 700; line-height: 1.4; }
.permission-actions { display: flex; align-items: center; gap: 14px; }
.permission-actions .primary-button { display: inline-flex; align-items: center; text-decoration: none; }
.permission-actions p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.secondary-context-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 12px; }
.secondary-record, .secondary-evidence, .secondary-history { overflow: hidden; }
.secondary-record .surface-heading, .secondary-evidence .surface-heading, .secondary-history .surface-heading { border-bottom: 1px solid var(--line); }
.secondary-record dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.secondary-record dl div { padding: 13px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.secondary-record dl div:nth-child(even) { border-right: 0; }
.secondary-record dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.secondary-record dd { margin: 6px 0 0; font-size: 12px; font-weight: 700; }
.secondary-evidence > article { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.secondary-evidence > article:last-child { border-bottom: 0; }
.secondary-evidence strong { font-size: 11px; }
.secondary-evidence p { margin: 5px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.secondary-evidence article > span { color: var(--info); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.secondary-history .timeline { margin: 0; padding: 15px 15px 15px 34px; }
.secondary-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.secondary-footer .secondary-button { display: inline-flex; align-items: center; text-decoration: none; }
.secondary-footer span { color: var(--muted); font-size: 10px; }

@media (max-width: 1080px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench { grid-template-columns: 1fr; }
  .contract-layout { grid-template-columns: 1fr; }
  .contract-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .insights { order: -1; }
}

@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
  .nav-open .sidebar { transform: translateX(0); }
  .workspace { width: 100%; margin-left: 0; }
  .mobile-only { display: inline-block; }
  .topbar { padding: 10px 12px; }
  .global-search-wrap { width: 100%; }
  .search-label, .global-search-wrap kbd, .environment, #notification-toggle { display: none; }
  #page-root { padding: 14px; }
  .page-heading { flex-direction: column; }
  .heading-actions { width: 100%; justify-content: space-between; }
  .metrics { grid-template-columns: 1fr; }
  .contract-rail { grid-template-columns: 1fr; }
  .contract-anatomy ol { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Forward-looking product patterns: profile workspaces, trust, evidence, and bounded AI. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.profile-select-wrap select { min-height: 36px; max-width: 174px; padding: 7px 25px 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; }
.trust-bar { min-height: 45px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 13px; }
.trust-bar > div, .trust-items, .trust-items span { display: flex; align-items: center; gap: 7px; }
.trust-bar strong { font-size: 11px; }
.trust-bar span { color: var(--muted); font-size: 10px; }
.trust-items { flex-wrap: wrap; justify-content: flex-end; }
.trust-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
.trust-dot.success, .agent-pulse.success { background: var(--success); }
.trust-dot.warning, .agent-pulse.warning { background: var(--warning); }
.trust-dot.info, .agent-pulse.info { background: var(--info); }
.trust-dot.critical, .agent-pulse.critical { background: var(--critical); }
.command-toolbar { min-height: 66px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 11px 14px; }
.command-toolbar strong, .command-toolbar span { display: block; }
.command-toolbar strong { margin-top: 3px; font-size: 12px; }
.range-controls { display: flex; gap: 6px; }
.capacity { display: flex; align-items: center; gap: 7px; padding-left: 14px; border-left: 1px solid var(--line); }
.capacity strong { color: var(--bronze); font-size: 16px; }
.capacity span { color: var(--muted); font-size: 10px; }
.command-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 14px; align-items: start; }
.command-main { display: grid; gap: 14px; min-width: 0; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.section-intro h2 { margin: 4px 0 0; }
.command-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.command-card { min-height: 138px; padding: 13px; }
.card-kicker, .card-title-line, .agent-head, .agent-confidence, .capacity-head, .capacity-foot, .card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-kicker { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.card-menu { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; letter-spacing: 2px; }
.card-title-line { margin-top: 13px; }
.card-title-line h3 { margin: 0; font-size: 13px; }
.card-title-line > strong { color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.card-detail { min-height: 30px; margin: 8px 0 11px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.text-button { min-height: 24px; display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--info); font-size: 11px; font-weight: 750; cursor: pointer; }
.command-card.tone-critical { background: color-mix(in srgb, var(--critical) 4%, var(--paper)); }
.command-card.tone-warning { background: color-mix(in srgb, var(--warning) 5%, var(--paper)); }
.command-card.tone-info { background: color-mix(in srgb, var(--info) 4%, var(--paper)); }
.exception-queue { overflow: hidden; }
.exception-queue .surface-heading { border-bottom: 1px solid var(--line); }
.escalation-ladder { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.escalation-ladder span { padding: 8px 10px; color: var(--muted); font-size: 10px; text-align: center; }
.escalation-ladder .ladder-current { background: color-mix(in srgb, var(--warning) 12%, var(--paper)); color: var(--warning); font-weight: 800; }
.exception-list { display: grid; }
.exception-row { display: grid; grid-template-columns: 82px 1fr auto; align-items: start; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.exception-row:last-child { border-bottom: 0; }
.exception-mark { padding: 4px 6px; border-radius: 4px; background: var(--raised); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.exception-row.critical .exception-mark { background: color-mix(in srgb, var(--critical) 12%, var(--paper)); color: var(--critical); }
.exception-row.warning .exception-mark { background: color-mix(in srgb, var(--warning) 13%, var(--paper)); color: var(--warning); }
.exception-row.info .exception-mark { background: color-mix(in srgb, var(--info) 12%, var(--paper)); color: var(--info); }
.exception-row strong { font-size: 12px; }
.exception-row p { margin: 5px 0 6px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.exception-row span { color: var(--muted); font-size: 10px; }
.action-queue { overflow: hidden; }
.action-queue .surface-heading { border-bottom: 1px solid var(--line); }
.action-queue-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.action-work-list { display: grid; }
.action-work { display: grid; gap: 6px; padding: 13px; border-bottom: 1px solid var(--line); }
.action-work strong { font-size: 12px; }
.action-work p { margin: 0; color: var(--muted); font-size: 10px; }
.action-work .text-button { justify-self: start; }
.queue-separation { margin: 0; padding: 11px 13px; background: var(--raised); color: var(--muted); font-size: 10px; line-height: 1.45; }
.swarm-rail { overflow: hidden; }
.swarm-rail .surface-heading { border-bottom: 1px solid var(--line); }
.swarm-rail > .ai-contract { margin: 12px; }
.agent-list { display: grid; gap: 8px; padding: 0 12px; }
.agent-card { padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.agent-head { justify-content: flex-start; }
.agent-pulse { width: 8px; height: 8px; border-radius: 50%; }
.agent-status { margin-left: auto; color: var(--muted); font-size: 10px; }
.agent-confidence { margin-top: 8px; color: var(--muted); font-size: 10px; }
.agent-confidence span:first-child { color: var(--ink); font-weight: 700; }
.agent-card p { margin: 5px 0 7px; color: var(--muted); font-size: 11px; }
.autonomy-note { margin: 12px; padding: 11px; border: 1px solid color-mix(in srgb, var(--bronze) 30%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--bronze) 8%, var(--paper)); }
.autonomy-note .eyebrow { margin: 0; }
.autonomy-note strong { display: block; margin: 6px 0 4px; font-size: 11px; }
.autonomy-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.flow-surface { overflow: hidden; }
.flow-surface .surface-heading { border-bottom: 1px solid var(--line); }
.state-flow { display: grid; grid-template-columns: repeat(4, 1fr); }
.state-flow > div { position: relative; display: grid; gap: 4px; padding: 16px; border-right: 1px solid var(--line); }
.state-flow > div:last-child { border-right: 0; }
.state-flow span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas); font-size: 10px; font-weight: 800; }
.state-flow strong { font-size: 12px; }
.state-flow small { color: var(--muted); font-size: 10px; }
.card-canvas { overflow: hidden; }
.surface-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.canvas-actions { display: flex; gap: 8px; }
.canvas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px 14px; }
.mini-chart-card { min-height: 155px; display: grid; align-content: start; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.mini-chart-card .eyebrow { margin: 0; }
.mini-chart-card > strong { font-size: 18px; }
.bar-chart { height: 46px; display: flex; align-items: end; gap: 5px; padding-top: 5px; border-bottom: 1px solid var(--line); }
.bar-chart i { flex: 1; display: block; min-height: 6px; border-radius: 3px 3px 0 0; background: var(--bronze); }
.segmented-meter { height: 10px; display: flex; overflow: hidden; border-radius: 3px; background: var(--line); }
.segmented-meter span:nth-child(1) { background: var(--critical); }.segmented-meter span:nth-child(2) { background: var(--warning); }.segmented-meter span:nth-child(3) { background: var(--success); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 9px; }
.legend-dot { width: 6px; height: 6px; display: inline-block; margin-right: 3px; border-radius: 50%; }.legend-dot.critical { background: var(--critical); }.legend-dot.warning { background: var(--warning); }.legend-dot.success { background: var(--success); }
.blocked-card { background: color-mix(in srgb, var(--warning) 5%, var(--paper)); }
.blocked-card p { min-height: 38px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.canvas-empty { grid-column: 1 / -1; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 5px; background: var(--raised); }
.canvas-empty p { margin: 7px 0 12px; color: var(--muted); font-size: 11px; }
.return-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 5px; background: color-mix(in srgb, var(--info) 5%, var(--paper)); }
.return-context > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 3px 10px; }
.return-context .eyebrow { grid-column: 1 / -1; }
.return-context strong { font-size: 11px; }
.return-context span:last-child { color: var(--muted); font-size: 10px; }
.return-context .secondary-button { display: inline-flex; align-items: center; text-decoration: none; }
.dashboard-capacity { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.dashboard-capacity div { padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.dashboard-capacity span, .dashboard-capacity strong { display: block; }
.dashboard-capacity span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.dashboard-capacity strong { margin-top: 5px; font-size: 12px; }
.dashboard-card-catalog { display: grid; gap: 7px; max-height: 44vh; overflow: auto; }
.dashboard-card-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.dashboard-card-option.focused { border-color: var(--bronze); background: color-mix(in srgb, var(--bronze) 5%, var(--paper)); }
.dashboard-card-option strong { display: block; margin-top: 4px; font-size: 11px; }
.dashboard-card-option p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.dashboard-share { margin: 16px 0; padding: 13px; border: 1px solid var(--line); border-radius: 5px; }
.dashboard-share h3 { margin: 5px 0; }
.dashboard-share p { color: var(--muted); font-size: 10px; line-height: 1.45; }
.share-output { display: grid; gap: 3px; margin-top: 10px; }
.share-output strong { color: var(--success); font-size: 11px; }
.share-output span { color: var(--muted); font-size: 10px; }
.mode-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); }
.mode-tab { min-height: 38px; padding: 8px 13px; border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; }
.mode-tab.active { border-color: var(--line); background: var(--paper); color: var(--ink); }
.mode-tab span { margin-left: 4px; padding: 2px 5px; border-radius: 9px; background: var(--critical); color: var(--paper); font-size: 9px; }
.planning-grid { display: grid; grid-template-columns: minmax(0, 1fr) 325px; gap: 12px; align-items: start; }
.route-workbench, .constraint-rail { overflow: hidden; }
.route-workbench .surface-heading { border-bottom: 1px solid var(--line); }
.route-summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
.route-summary strong { display: block; margin-top: 4px; font-size: 12px; }
.status-inline { display: inline-block; }.status-inline.warning { color: var(--warning); }
.stop-sequence { display: grid; gap: 0; padding: 14px; }
.stop-node { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.stop-index { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas); font-size: 10px; font-weight: 800; }
.stop-node strong, .stop-node small { display: block; }.stop-node strong { font-size: 12px; }.stop-node small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.stop-state { color: var(--success); font-size: 10px; font-weight: 800; }.stop-node.delivery .stop-state { color: var(--warning); }.stop-node.crossdock .stop-state { color: var(--info); }
.stop-connector { height: 25px; display: flex; align-items: center; padding-left: 43px; color: var(--muted); font-size: 10px; }
.capacity-envelope { margin: 0 14px 14px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.capacity-head, .capacity-foot { font-size: 10px; }.capacity-head strong { color: var(--ink); }.capacity-foot { margin-top: 6px; color: var(--muted); }
.capacity-track { height: 10px; margin-top: 10px; overflow: hidden; border-radius: 4px; background: var(--line); }.capacity-track span { display: block; height: 100%; background: var(--info); }
.optimization-diff { display: flex; justify-content: space-between; gap: 12px; margin: 0 14px 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--info) 30%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--info) 5%, var(--paper)); }.optimization-diff strong, .optimization-diff p { display: block; }.optimization-diff strong { margin-top: 5px; font-size: 12px; }.optimization-diff p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.diff-actions { display: flex; align-items: center; gap: 7px; }.constraint-rail { padding-bottom: 13px; }.constraint-rail > .eyebrow, .constraint-rail > h2, .constraint-rail > p { margin-left: 14px; margin-right: 14px; }.constraint-rail h2 { margin-top: 5px; }.constraint-list { display: grid; gap: 0; margin: 14px 0; padding: 0; list-style: none; }.constraint-list li { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line); }.constraint-list li > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }.constraint-list strong, .constraint-list small { display: block; }.constraint-list strong { font-size: 11px; }.constraint-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }.constraint-list .passed > span { color: var(--success); }.constraint-list .warning > span { color: var(--warning); }.constraint-list .blocked > span { color: var(--critical); }.full-width { width: calc(100% - 28px); margin: 0 14px; }
.ai-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.ai-summary { min-height: 105px; padding: 14px; }.ai-summary strong { display: block; margin-top: 11px; font-size: 23px; }.ai-summary p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }.ai-workbench-grid { display: grid; grid-template-columns: minmax(0, 1fr) 345px; gap: 12px; align-items: start; }.agent-board, .review-rail { overflow: hidden; }.agent-board .surface-heading, .review-rail .surface-heading { border-bottom: 1px solid var(--line); }.agent-board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }.agent-large { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }.agent-large.is-blocked { background: color-mix(in srgb, var(--warning) 6%, var(--paper)); }.agent-large p { min-height: 30px; margin: 10px 0; color: var(--muted); font-size: 11px; }.agent-large-foot { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }.review-rail { padding-bottom: 14px; }.queue-count { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--critical); color: var(--paper); font-size: 10px; font-weight: 800; }.proposal-card { margin: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }.proposal-kicker { color: var(--warning); font-size: 10px; font-weight: 800; letter-spacing: .05em; }.proposal-card strong { display: block; margin-top: 7px; font-size: 12px; }.proposal-card p { min-height: 47px; margin: 6px 0 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }.proposal-card .primary-button, .proposal-card .secondary-button { width: 100%; margin-top: 10px; }.evidence-chips { display: flex; flex-wrap: wrap; gap: 5px; }.evidence-chips span { padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 9px; }
.dashboard-manage { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }.dashboard-manage > div:first-child { display: grid; gap: 3px; min-width: 230px; }.dashboard-manage > div:first-child strong { font-size: 12px; }.dashboard-manage > div:first-child span:last-child { color: var(--muted); font-size: 10px; }.dashboard-tabs { display: flex; flex: 1; gap: 3px; }.dashboard-tabs .mode-tab { border: 1px solid var(--line); border-radius: 5px; }.report-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.report-card { min-height: 190px; padding: 13px; }.report-card .card-kicker span:last-child { color: var(--success); }.report-card.blocked-card .card-kicker span:last-child { color: var(--warning); }.report-card h2 { margin: 17px 0 8px; }.report-card > strong { display: block; font-size: 23px; }.report-card > p { min-height: 30px; margin: 6px 0; color: var(--muted); font-size: 10px; }.report-spark { height: 37px; display: flex; align-items: end; gap: 4px; margin: 8px 0; border-bottom: 1px solid var(--line); }.report-spark i { flex: 1; min-height: 4px; background: var(--bronze); border-radius: 2px 2px 0 0; }.settings-grid { display: grid; gap: 12px; }.settings-section { overflow: hidden; }.settings-section .surface-heading { border-bottom: 1px solid var(--line); }.setting-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--line); }.setting-row:last-child { border-bottom: 0; }.setting-row strong { font-size: 12px; }.setting-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.state-pill { padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; }.state-pill.success { background: color-mix(in srgb, var(--success) 12%, var(--paper)); color: var(--success); }.state-pill.warning { background: color-mix(in srgb, var(--warning) 13%, var(--paper)); color: var(--warning); }.state-pill.neutral { background: var(--raised); color: var(--muted); }.automation-rule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 14px; border-bottom: 1px solid var(--line); }.rule-trigger { padding: 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }.rule-trigger span { display: block; color: var(--bronze); font-size: 9px; font-weight: 800; }.rule-trigger strong { display: block; margin-top: 6px; font-size: 11px; }.rule-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }.rule-foot .text-button { margin-left: auto; }.permission-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }.permission-matrix div { padding: 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }.permission-matrix strong, .permission-matrix span { display: block; }.permission-matrix strong { font-size: 11px; }.permission-matrix span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }

.settings-masthead { background: #3b4437; }
.settings-priority { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 20px; border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--warning) 7%, var(--paper)); }
.settings-priority h2 { margin: 4px 0 5px; font-size: 16px; }
.settings-priority p { max-width: 72ch; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.settings-restored { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--info) 34%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--info) 5%, var(--paper)); }
.settings-restored strong { font-size: 11px; }
.settings-restored span:last-child { margin-left: auto; color: var(--muted); font-size: 10px; }
.priority-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.settings-workbench { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .45fr); gap: 16px; align-items: start; }
.settings-index, .settings-detail, .settings-child-work { overflow: hidden; }
.settings-index .surface-heading, .settings-detail .surface-heading, .settings-child-work .surface-heading { border-bottom: 1px solid var(--line); }
.settings-search { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.settings-search input { width: 180px; min-height: 34px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); padding: 0 10px; color: var(--ink); }
.settings-section-list { display: grid; }
.settings-section-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.settings-section-row:last-child { border-bottom: 0; }
.settings-section-row:hover, .settings-section-row:focus-visible, .settings-section-row.active { background: color-mix(in srgb, var(--bronze) 8%, var(--paper)); }
.settings-section-row span:first-child { display: grid; gap: 3px; }
.settings-section-row strong { font-size: 11px; }
.settings-section-row small, .settings-section-row time { color: var(--muted); font-size: 9px; }
.settings-section-row time { text-align: right; }
.settings-detail { position: sticky; top: 84px; }
.settings-version { display: grid; gap: 4px; padding: 17px; border-bottom: 1px solid var(--line); }
.settings-version span, .settings-facts dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.settings-version strong { font-size: 18px; }
.settings-version small { color: var(--success); font-size: 10px; }
.settings-facts { margin: 0; }
.settings-facts div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; padding: 12px 17px; border-bottom: 1px solid var(--line); }
.settings-facts dd { margin: 0; font-size: 11px; font-weight: 700; text-align: right; }
.settings-detail-actions { display: grid; gap: 8px; padding: 16px; }
.settings-child-work table { min-width: 820px; }
.settings-child-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.settings-child-footer > div { display: grid; gap: 10px; align-content: start; }
.settings-return { display: inline-flex; width: fit-content; align-items: center; text-decoration: none; }

@media (max-width: 1100px) { .command-grid, .planning-grid, .ai-workbench-grid, .settings-workbench { grid-template-columns: 1fr; }.settings-detail { position: static; }.swarm-rail, .constraint-rail, .review-rail { order: -1; }.canvas-grid, .report-card-grid { grid-template-columns: repeat(2, 1fr); }.ai-summary-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-manage { flex-wrap: wrap; }.dashboard-tabs { order: 3; flex-basis: 100%; } }
@media (max-width: 760px) { .profile-select-wrap, .trust-items { display: none; }.trust-bar { display: block; }.trust-bar > div:first-child { justify-content: space-between; }.command-toolbar { grid-template-columns: 1fr; gap: 10px; }.capacity { padding: 0; border-left: 0; }.command-cards, .canvas-grid, .agent-board-grid, .report-card-grid, .ai-summary-grid, .permission-matrix { grid-template-columns: 1fr; }.exception-row { grid-template-columns: 1fr; gap: 7px; }.exception-row .text-button { justify-self: start; }.state-flow { grid-template-columns: repeat(2, 1fr); }.state-flow > div:nth-child(2) { border-right: 0; }.state-flow > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.route-summary, .optimization-diff { display: grid; }.diff-actions { justify-content: flex-start; }.stop-node { grid-template-columns: 24px 1fr; }.stop-state { grid-column: 2; }.automation-rule { grid-template-columns: 1fr; }.rule-foot { grid-column: 1; flex-wrap: wrap; }.permission-matrix { padding-top: 0; }.setting-row { grid-template-columns: 1fr auto; }.setting-row .text-button { grid-column: 1 / -1; justify-self: start; } }

/* Visual iteration 03: operational editorial hierarchy */
:root {
  --canvas: #eeeae1;
  --paper: #fffdf7;
  --raised: #f7f3e9;
  --ink: #392b24;
  --muted: #74675e;
  --line: #d9d0c1;
  --line-strong: #aa9c88;
  --bronze: #a66f32;
}

body { letter-spacing: -.006em; }
.sidebar { width: 224px; padding: 18px 12px; border-right: 0; background: #302721; color: #f2eadf; }
.workspace { width: calc(100% - 224px); margin-left: 224px; }
.brand { padding: 2px 8px 20px; color: #f7efe5; }
.brand-mark { background: #bd8243; color: #302721; }
.brand small, .sidebar .nav-group h2, .sidebar .operator-card span:last-child { color: #b9aca0; }
.sidebar .nav-group h2 { margin: 0 10px 5px; font-size: 9px; letter-spacing: .13em; }
.nav-link { min-height: 32px; padding: 6px 9px; color: #cfc2b7; }
.nav-link:hover { background: rgba(255, 253, 247, .07); color: #fffaf3; }
.nav-link.active { border-color: rgba(255, 253, 247, .12); background: #f0e7da; color: #392b24; }
.nav-link small { color: #dfa55f; }
.operator-card { border-color: rgba(255, 253, 247, .14); background: rgba(255, 253, 247, .055); }
.operator-card strong { color: #f6ede2; }
.sidebar-role-wrap select { border-color: rgba(255, 253, 247, .14); background: #3b3029; color: #f6ede2; }

.topbar { min-height: 64px; padding: 10px 28px; background: color-mix(in srgb, var(--paper) 97%, transparent); box-shadow: 0 1px 0 rgba(57, 43, 36, .05); }
.global-search-wrap { height: 38px; border-color: transparent; background: var(--canvas); }
#page-root { max-width: 1720px; min-height: calc(100vh - 64px); padding: 24px 28px 56px; }
.page { gap: 16px; }
.breadcrumbs { min-height: 24px; align-items: center; color: color-mix(in srgb, var(--muted) 82%, transparent); }
.breadcrumbs strong { font-weight: 720; }

.page-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  overflow: hidden;
  padding: 28px 30px 0;
  border-radius: 7px;
  background: #392f29;
  color: #f8f0e5;
}
.page-masthead .masthead-copy { max-width: 820px; }
.page-masthead .eyebrow { margin: 0 0 9px; color: #d7ad78; letter-spacing: .11em; }
.page-masthead h1 { margin: 0 0 9px; font-size: 32px; font-weight: 760; letter-spacing: -.035em; }
.page-masthead p { max-width: 72ch; margin: 0; color: #cbbfb5; font-size: 14px; line-height: 1.55; }
.masthead-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 9px; }
.masthead-actions .freshness { max-width: 290px; color: #bcaea3; white-space: normal; text-align: right; line-height: 1.35; }
.page-masthead .primary-button { border-color: #f8f0e5; background: #f8f0e5; color: #392f29; }
.page-masthead .secondary-button { border-color: rgba(248, 240, 229, .26); background: transparent; color: #f8f0e5; }
.masthead-signals { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px -30px 0; border-top: 1px solid rgba(248, 240, 229, .13); }
.masthead-signals > div { min-height: 88px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 18px; padding: 17px 30px; border-right: 1px solid rgba(248, 240, 229, .13); }
.masthead-signals > div:last-child { border-right: 0; }
.masthead-signals span { color: #c5b8ad; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.masthead-signals strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #fff8ef; font-size: 27px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.masthead-signals small { color: #a99c92; font-size: 11px; }
.masthead-signals .tone-critical strong { color: #ef927d; }
.masthead-signals .tone-warning strong { color: #e2b660; }
.masthead-signals .tone-success strong { color: #94c09b; }
.masthead-signals .tone-info strong { color: #94acd0; }

[data-archetype="command"] .page-masthead { background: #3c2b22; }
[data-archetype="registry"] .page-masthead { background: #34302b; }
[data-archetype="workbench"] .page-masthead { background: #30352f; }
[data-archetype="record"] .page-masthead { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-archetype="record"] .page-masthead .eyebrow { color: var(--bronze); }
[data-archetype="record"] .page-masthead p, [data-archetype="record"] .masthead-actions .freshness { color: var(--muted); }
[data-archetype="record"] .page-masthead .primary-button { border-color: var(--ink); background: var(--ink); color: var(--paper); }
[data-archetype="record"] .masthead-signals { border-top-color: var(--line); }
[data-archetype="record"] .masthead-signals > div { border-right-color: var(--line); }
[data-archetype="record"] .masthead-signals span, [data-archetype="record"] .masthead-signals small { color: var(--muted); }
[data-archetype="record"] .masthead-signals strong { color: var(--ink); font-size: 17px; }

.trust-bar { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--success) 6%, var(--paper)); }
.surface { border-color: color-mix(in srgb, var(--line) 88%, transparent); border-radius: 6px; }
.surface-heading { min-height: 62px; }
.operational-lens { overflow: hidden; padding: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); background: transparent; }
.operational-lens .surface-heading { min-height: 54px; padding: 10px 0; }
.operational-lens .contract-anatomy { padding: 0 0 12px; }
.operational-lens .contract-anatomy ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.operational-lens .contract-anatomy li { min-height: 52px; padding: 8px 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.operational-lens .contract-anatomy li:first-child { padding-left: 0; }
.operational-lens .contract-anatomy li:last-child { border-right: 0; }
.operational-lens .contract-anatomy li span { width: 26px; height: 26px; flex: 0 0 26px; background: var(--bronze); }

.contract-layout { grid-template-columns: minmax(0, 1fr) 292px; gap: 16px; }
.contract-main, .contract-rail { gap: 16px; }
.contract-work { border: 0; background: var(--paper); box-shadow: 0 8px 28px rgba(57, 43, 36, .045); }
.contract-work .surface-heading { padding: 16px 18px; }
.contract-work .mode-tabs { padding: 0 18px; }
.contract-filter-bar { padding: 10px 18px 13px; }
.contract-table-scroll { margin-top: 0; }
.contract-table-scroll th { padding-top: 13px; padding-bottom: 13px; background: #f4efe5; }
.contract-table-scroll td { padding-top: 14px; padding-bottom: 14px; }
.contract-rail .surface { background: color-mix(in srgb, var(--paper) 92%, var(--canvas)); }
.contract-actions { order: -1; border-color: var(--line-strong); }
.contract-action-list button { min-height: 40px; }
.contract-drilldown { background: color-mix(in srgb, var(--bronze) 4%, var(--paper)) !important; }

.command-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }
.command-main, .action-queue, .card-canvas { min-width: 0; }
.command-cards { gap: 12px; }
.command-card { min-height: 154px; padding: 17px; border: 0; border-top: 3px solid var(--line-strong); box-shadow: 0 7px 24px rgba(57, 43, 36, .05); }
.command-card.tone-critical { border-top-color: var(--critical); }
.command-card.tone-warning { border-top-color: var(--warning); }
.command-card.tone-success { border-top-color: var(--success); }
.command-card.tone-info { border-top-color: var(--info); }
.command-card .card-title-line strong { font-size: 30px; }
.command-toolbar { border: 0; background: transparent; padding: 4px 0; }
.action-queue { box-shadow: 0 8px 28px rgba(57, 43, 36, .05); }
.exception-row { background: var(--paper); }
.flow-surface, .card-canvas { border: 0; border-top: 1px solid var(--line-strong); background: transparent; }
.mini-chart-card { border: 0; border-top: 2px solid var(--line); border-radius: 0; background: transparent; }

.secondary-context-grid { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .45fr); gap: 16px; }
.secondary-record { border: 0; box-shadow: 0 8px 28px rgba(57, 43, 36, .045); }
.secondary-evidence, .secondary-history { background: transparent; }
.secondary-history { border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; }
.secondary-record dl div { min-height: 76px; padding: 17px 18px; }

table { font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color 160ms cubic-bezier(.16, 1, .3, 1); }
tbody tr:hover, tbody tr:focus { background: #f2eadc; }
.filter-chip { border-color: transparent; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.filter-chip.active { border-color: var(--ink); }
.primary-button, .secondary-button, .filter-chip, .icon-button { transition: background-color 170ms cubic-bezier(.16, 1, .3, 1), border-color 170ms cubic-bezier(.16, 1, .3, 1), color 170ms cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 1100px) {
  .command-grid, .contract-layout { grid-template-columns: 1fr; }
  .contract-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-masthead { grid-template-columns: 1fr; }
  .masthead-actions { justify-content: flex-start; }
  .masthead-actions .freshness { text-align: left; }
  .masthead-signals { grid-template-columns: 1fr; }
  .masthead-signals > div { border-right: 0; border-bottom: 1px solid rgba(248, 240, 229, .13); }
  .masthead-signals > div:last-child { border-bottom: 0; }
  .operational-lens .contract-anatomy ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sidebar { width: 224px; transform: translateX(-100%); }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .workspace { width: 100%; margin-left: 0; }
  #page-root { padding: 18px; }
}

@media (max-width: 640px) {
  .page-masthead { padding: 22px 20px 0; }
  .page-masthead h1 { font-size: 27px; }
  .masthead-signals { margin-right: -20px; margin-left: -20px; }
  .masthead-signals > div { padding: 15px 20px; }
  .operational-lens .contract-anatomy ol { grid-template-columns: 1fr; }
  .operational-lens .contract-anatomy li { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .contract-rail { grid-template-columns: 1fr; }
  .card-canvas .surface-heading, .canvas-actions { flex-wrap: wrap; }
}

.quote-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.quote-registry, .quote-review, .quote-flow { overflow: hidden; }
.quote-registry .surface-heading, .quote-review .surface-heading, .quote-flow .surface-heading { border-bottom: 1px solid var(--line); }
.quote-filter-bar { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.quote-registry table { min-width: 790px; }
.quote-registry td, .quote-registry th { vertical-align: middle; }
.quote-status { display: inline-flex; width: fit-content; align-items: center; padding: 4px 7px; border-radius: 4px; background: var(--raised); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.quote-status.success { background: color-mix(in srgb, var(--success) 13%, var(--paper)); color: var(--success); }
.quote-status.warning { background: color-mix(in srgb, var(--warning) 14%, var(--paper)); color: var(--warning); }
.quote-status.critical { background: color-mix(in srgb, var(--critical) 12%, var(--paper)); color: var(--critical); }
.quote-review { padding-bottom: 14px; }
.quote-review .surface-heading { align-items: center; }
.quote-focus { display: grid; gap: 13px; padding: 14px; }
.quote-focus > div { display: grid; gap: 3px; }
.quote-focus strong { font-size: 13px; }
.quote-focus span:not(.eyebrow) { color: var(--muted); font-size: 10px; }
.quote-focus-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.quote-focus-grid > div { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
.quote-focus-grid strong { font-size: 12px; }
.quote-evidence { display: flex !important; flex-wrap: wrap; gap: 5px; }
.quote-evidence span { padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); color: var(--ink) !important; font-size: 9px !important; font-weight: 700; }
.quote-review-actions { display: grid; gap: 8px; padding: 0 14px; }
.quote-review-actions button { width: 100%; }
.quote-lifecycle { display: grid; grid-template-columns: repeat(5, 1fr); }
.quote-lifecycle-step { display: grid; align-content: start; gap: 7px; min-height: 128px; padding: 14px; border-right: 1px solid var(--line); }
.quote-lifecycle-step:last-child { border-right: 0; }
.quote-lifecycle-step.current { background: color-mix(in srgb, var(--warning) 7%, var(--paper)); }
.quote-lifecycle-step.exception { background: color-mix(in srgb, var(--critical) 4%, var(--paper)); }
.quote-step-index { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas); font-size: 10px; font-weight: 800; }
.quote-lifecycle-step.current .quote-step-index { background: var(--warning); }
.quote-lifecycle-step.exception .quote-step-index { background: var(--critical); }
.quote-lifecycle-step strong { font-size: 11px; letter-spacing: .04em; }
.quote-lifecycle-step small { color: var(--muted); font-size: 10px; line-height: 1.4; }

@media (max-width: 1100px) { .quote-workbench { grid-template-columns: 1fr; }.quote-review { order: -1; } }
@media (max-width: 760px) { .quote-lifecycle { grid-template-columns: repeat(2, 1fr); }.quote-lifecycle-step:nth-child(2) { border-right: 0; }.quote-lifecycle-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.quote-lifecycle-step:nth-child(4) { border-right: 0; }.quote-lifecycle-step:nth-child(3), .quote-lifecycle-step:nth-child(4) { border-bottom: 1px solid var(--line); }.quote-lifecycle-step:last-child { grid-column: 1 / -1; border-right: 0; } }

@media (max-width: 1080px) {
  .secondary-context-grid { grid-template-columns: 1fr; }
  .action-queue { order: -1; }
}

@media (max-width: 760px) {
  .return-context, .secondary-footer, .permission-actions { align-items: stretch; flex-direction: column; }
  .return-context .secondary-button, .secondary-footer .secondary-button, .permission-actions .primary-button { justify-content: center; }
  .secondary-record dl, .permission-card dl, .dashboard-capacity { grid-template-columns: 1fr; }
  .secondary-record dl div { border-right: 0; }
  .dashboard-card-option { grid-template-columns: 1fr; }
  .dashboard-card-option button { width: 100%; }
  .settings-priority, .priority-meta { align-items: stretch; flex-direction: column; }
  .settings-restored { align-items: flex-start; flex-direction: column; }
  .settings-restored span:last-child { margin-left: 0; }
  .priority-meta { white-space: normal; }
  .settings-index .surface-heading { align-items: stretch; flex-direction: column; }
  .settings-search input { width: 100%; }
  .settings-section-row { grid-template-columns: minmax(0, 1fr) auto; }
  .settings-section-row time { grid-column: 1 / -1; text-align: left; }
  .settings-child-footer { grid-template-columns: 1fr; }
}