/* AccessAIbility HQ redesign layer (Nice GUIAs, 25 Oct 2026). Kiln draft for Arc, after Flick's direction:
   dark-first ink and slate surfaces, one blue accent, 8 px rhythm, underline tabs, restrained cards,
   150-200 ms motion with a reduced-motion fallback, status shown by text plus colour.
   Loaded LAST in index.html. CSS only: no markup, JS, ARIA, state class or behaviour changes.
   Way back: remove the one <link rel="stylesheet" href="/hq-redesign.css"> line. */

/* ---------- tokens ---------- */
body.a11y-unified {
  --hq-bg: #0b0f14;
  --hq-surface: #121821;
  --hq-raised: #18202c;
  --hq-hover: #1f2937;
  --hq-input: #0e141c;
  --hq-border: #253041;
  --hq-border-strong: #38465c;
  --hq-fg: #e8edf4;
  --hq-muted: #9aa8bb;          /* 7.1:1 on --hq-surface */
  --hq-accent: #2563eb;         /* filled controls, white text 5.2:1 */
  --hq-accent-text: #6ea8ff;    /* accent used as text or underline on dark */
  --hq-accent-soft: rgba(59, 130, 246, 0.14);
  --hq-focus: #9cc4ff;
  --hq-success: #3ddc97;
  --hq-success-bg: rgba(61, 220, 151, 0.12);
  --hq-warning: #f5c04e;
  --hq-warning-bg: rgba(245, 192, 78, 0.12);
  --hq-danger: #ff8a9a;
  --hq-danger-bg: rgba(255, 99, 125, 0.12);
  --hq-s1: 8px; --hq-s2: 16px; --hq-s3: 24px; --hq-s4: 32px;
  --hq-r-control: 8px; --hq-r-card: 12px; --hq-r-dialog: 16px;
  --hq-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  --hq-shadow-float: 0 24px 64px rgba(0, 0, 0, 0.5);
  --hq-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hq-fast: 150ms;
  --hq-std: 200ms;
  --hq-font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --hq-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  /* re-point the existing aliases so every older rule follows the new palette */
  --a11y-ui-bg: var(--hq-bg);
  --a11y-ui-surface: var(--hq-surface);
  --a11y-ui-raised: var(--hq-raised);
  --a11y-ui-interactive: var(--hq-hover);
  --a11y-ui-accent: var(--hq-accent);
  --a11y-ui-accent-hover: #3b82f6;
  --a11y-ui-accent-soft: var(--hq-accent-soft);
  --a11y-ui-focus-color: var(--hq-focus);
  --a11y-ui-fg: var(--hq-fg);
  --a11y-ui-muted: var(--hq-muted);
  --a11y-ui-border: var(--hq-border);
  --bg: var(--hq-bg); --paper: var(--hq-surface); --panel: var(--hq-raised);
  --ink: var(--hq-fg); --muted: var(--hq-muted); --line: var(--hq-border);
  --brand-blue: var(--hq-accent); --brand-blue-dark: var(--hq-accent); --brand-cyan: var(--hq-focus);

  font: 15px/1.5 var(--hq-font);
  background:
    radial-gradient(1200px 480px at 70% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
    var(--hq-bg);
  background-attachment: fixed;
  color: var(--hq-fg);
}

/* ---------- focus: always visible, never colour-only ---------- */
body.a11y-unified :is(button, input, select, textarea, summary, a, [tabindex]):focus-visible,
body.a11y-unified .task-item:focus-visible {
  outline: 3px solid var(--hq-focus);
  outline-offset: 2px;
}

/* ---------- headings and type ---------- */
body.a11y-unified :is(h1, h2, h3) { font-family: var(--hq-font-display); letter-spacing: -0.01em; color: var(--hq-fg); }
body.a11y-unified h2 { font-size: 17px; font-weight: 600; }
body.a11y-unified h3 { font-size: 15px; font-weight: 600; }
body.a11y-unified :is(.eyebrow, .rail-title) { color: var(--hq-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- top bar ---------- */
body.a11y-unified .topbar {
  padding: var(--hq-s2) var(--hq-s4);
  background: transparent;
  border-bottom: 1px solid var(--hq-border);
  gap: var(--hq-s3);
}
body.a11y-unified .brand-lockup { gap: 12px; }
body.a11y-unified .brand-icon { width: 36px; height: 36px; border-radius: 10px; }
body.a11y-unified h1.unified-brand { font: 600 19px/1.2 var(--hq-font-display); letter-spacing: -0.015em; color: var(--hq-fg); }
body.a11y-unified .unified-brand b { color: var(--hq-accent-text); }
body.a11y-unified .topbar-controls { gap: var(--hq-s2); align-items: center; }
body.a11y-unified .date-cluster label { color: var(--hq-muted); font-size: 12px; font-weight: 600; }

/* ---------- counters: the Codex counter and the provider strip ---------- */
body.a11y-unified .codex-usage {
  padding: 12px var(--hq-s2);
  background: var(--hq-surface);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-r-card);
  box-shadow: none;
}
body.a11y-unified .codex-usage-heading { font-size: 12px; font-weight: 600; color: var(--hq-muted); gap: var(--hq-s1); }
body.a11y-unified .codex-usage-heading strong { color: var(--hq-fg); font-size: 14px; }
body.a11y-unified .codex-usage-track { height: 4px; border-radius: 999px; background: var(--hq-hover); }
body.a11y-unified .codex-usage-track span { border-radius: 999px; background: var(--hq-accent-text); }
body.a11y-unified .codex-usage small { color: var(--hq-muted); font-size: 12px; }
/* the strip carries inline styles in index.html, so these few need !important */
body.a11y-unified #provider-usage { padding: 12px var(--hq-s4) 0 !important; }
body.a11y-unified #provider-usage .provider-usage-title { font: 600 12px/1.3 var(--hq-font) !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hq-muted); margin-bottom: var(--hq-s1) !important; }
body.a11y-unified #provider-usage-list { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px !important; }
body.a11y-unified .provider-usage-card { min-width: 0; min-height: 58px; padding: 8px 10px; border-radius: 8px; }
body.a11y-unified .provider-usage-card .codex-usage-heading { font-size: 11px; gap: 6px; }
body.a11y-unified .provider-usage-card .codex-usage-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.a11y-unified .provider-usage-card .codex-usage-heading strong { flex: 0 0 auto; font-size: 12px; }
body.a11y-unified .provider-usage-card .codex-usage-track { height: 3px; margin: 7px 0 0; }
body.a11y-unified .provider-usage-card small { display: none; }
body.a11y-unified .provider-usage-card[data-status="critical"] { border-color: color-mix(in srgb, var(--hq-danger) 65%, var(--hq-border)); background: var(--hq-danger-bg); }
body.a11y-unified .provider-usage-card[data-status="critical"] .codex-usage-heading strong { color: var(--hq-danger); }
body.a11y-unified .provider-usage-card[data-status="critical"] .codex-usage-track span { background: var(--hq-danger); }
body.a11y-unified .provider-usage-card[data-status="warning"] { border-color: color-mix(in srgb, var(--hq-warning) 65%, var(--hq-border)); background: var(--hq-warning-bg); }
body.a11y-unified .provider-usage-card[data-status="warning"] .codex-usage-heading strong { color: var(--hq-warning); }
body.a11y-unified .provider-usage-card[data-status="warning"] .codex-usage-track span { background: var(--hq-warning); }
body.a11y-unified .provider-usage-card[data-status="unavailable"] { border-style: dashed; }
body.a11y-unified .provider-usage-card[data-status="unavailable"] .codex-usage-heading strong { color: var(--hq-danger); }
body.a11y-unified .provider-usage-empty { color: var(--hq-muted); }

/* ---------- layout and team rail ---------- */
body.a11y-unified .layout { grid-template-columns: 232px minmax(0, 1fr); gap: var(--hq-s4); padding: var(--hq-s3) var(--hq-s4) var(--hq-s4); }
body.a11y-unified .team-rail { padding: 0 var(--hq-s1) 0 0; border: 0; }
body.a11y-unified .rail-title { margin: 0 0 var(--hq-s1) var(--hq-s1); }
body.a11y-unified .team-list { gap: 2px; }
body.a11y-unified .team-button {
  min-height: 48px;
  padding: var(--hq-s1) 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hq-r-control);
  color: var(--hq-fg);
  box-shadow: none;
  transition: background-color var(--hq-fast) var(--hq-ease), border-color var(--hq-fast) var(--hq-ease);
}
body.a11y-unified .team-button:hover { background: var(--hq-surface); border-color: var(--hq-border); }
body.a11y-unified .team-button.is-active {
  background: var(--hq-raised);
  border-color: var(--hq-border-strong);
  box-shadow: inset 3px 0 0 var(--team-color, var(--hq-accent-text));
}
body.a11y-unified .team-button.is-active .team-name { font-weight: 700; }
body.a11y-unified .avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; font-weight: 700; }
body.a11y-unified .team-name { font-size: 14px; font-weight: 600; }
body.a11y-unified .team-hint { color: var(--hq-muted); font-size: 12px; }

/* ---------- workspace tabs: underline style, state also shown by weight ---------- */
body.a11y-unified .workspace { grid-template-columns: 168px minmax(0, 1fr); column-gap: var(--hq-s4); row-gap: 0; align-items: start; }
body.a11y-unified .workspace-nav {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 12;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 4px;
  padding: 0 12px 0 0;
  border-bottom: 0;
  border-right: 1px solid var(--hq-border);
  position: sticky;
  top: 16px;
}
body.a11y-unified .workspace > :not(.workspace-nav) { grid-column: 2; }
body.a11y-unified .workspace-tab {
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--hq-r-control);
  color: var(--hq-muted);
  font-weight: 600;
  text-align: left;
  box-shadow: inset 3px 0 0 transparent;
  transition: color var(--hq-fast) var(--hq-ease), box-shadow var(--hq-fast) var(--hq-ease), background-color var(--hq-fast) var(--hq-ease);
}
body.a11y-unified .workspace-tab:hover { background: var(--hq-surface); color: var(--hq-fg); border: 0; }
body.a11y-unified .workspace-tab.is-active {
  background: transparent;
  color: var(--hq-fg);
  font-weight: 700;
  border: 0;
  box-shadow: inset 3px 0 0 var(--hq-accent-text);
}

/* Page and detail titles must lead the information hierarchy. */
body.a11y-unified .hq-missions h2,
body.a11y-unified .hq-assignments .assignments-head h2 { font-size: clamp(28px, 2.35vw, 34px); line-height: 1.16; }
body.a11y-unified .hq-missions .mission-detail-head h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.2; }
body.a11y-unified .hq-assignments .assignments-section h3 { font-size: 20px; }

/* ---------- welcome, metrics, daily briefing ---------- */
body.a11y-unified .welcome-panel { padding: 0 0 var(--hq-s2); border-bottom: 0; }
body.a11y-unified .metric-row { gap: var(--hq-s1); }
body.a11y-unified .metric {
  padding: 12px var(--hq-s2);
  background: var(--hq-surface);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-r-card);
}
body.a11y-unified .metric strong { font: 600 24px/1.2 var(--hq-font-display); color: var(--hq-fg); }
body.a11y-unified .metric span { color: var(--hq-muted); font-size: 12px; }
body.a11y-unified .daily-briefing {
  padding: var(--hq-s2);
  grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr);
  background: var(--hq-surface);
  border: 1px solid var(--hq-border);
  border-left: 3px solid var(--hq-accent-text);
  border-radius: var(--hq-r-card);
}
body.a11y-unified .briefing-queue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.a11y-unified .briefing-task { min-height: 48px; max-width: none; padding: 8px 10px; background: var(--hq-raised); border: 1px solid var(--hq-border); border-radius: var(--hq-r-control); text-align: left; white-space: normal; }

/* ---------- buttons ---------- */
body.a11y-unified button {
  min-height: 44px;
  padding: var(--hq-s1) var(--hq-s2);
  border: 1px solid var(--hq-border-strong);
  border-radius: var(--hq-r-control);
  background: var(--hq-raised);
  color: var(--hq-fg);
  font: 600 14px/1.3 var(--hq-font);
  transition: background-color var(--hq-fast) var(--hq-ease), border-color var(--hq-fast) var(--hq-ease), color var(--hq-fast) var(--hq-ease);
}
body.a11y-unified button:hover { background: var(--hq-hover); border-color: var(--hq-accent-text); }
body.a11y-unified button:active { background: var(--hq-accent-soft); }
body.a11y-unified button.ghost { background: transparent; border-color: var(--hq-border); }
body.a11y-unified button.ghost:hover { background: var(--hq-surface); }
body.a11y-unified :is(.add-task-button, #task-save-btn, .unified-primary, button.complete-action) {
  background: var(--hq-accent);
  border-color: var(--hq-accent);
  color: #fff;
}
body.a11y-unified :is(.add-task-button, #task-save-btn, .unified-primary, button.complete-action):hover { background: #1d4ed8; border-color: #1d4ed8; }
body.a11y-unified .icon-button { width: 44px; padding: 0; }

/* ---------- inputs ---------- */
body.a11y-unified :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  min-height: 44px;
  padding: 10px 12px;
  background: var(--hq-input);
  border: 1px solid var(--hq-border-strong);
  border-radius: var(--hq-r-control);
  color: var(--hq-fg);
  transition: border-color var(--hq-fast) var(--hq-ease);
}
body.a11y-unified :is(input:not([type=checkbox]):not([type=radio]), select, textarea):hover { border-color: #4a5a74; }
body.a11y-unified :is(input, select, textarea):focus-visible { border-color: var(--hq-accent-text); }
body.a11y-unified :is(.task-filters label, .field-label, .task-dialog label span) { color: var(--hq-muted); font-size: 12px; font-weight: 600; }

/* ---------- filters toolbar ---------- */
body.a11y-unified .task-filters {
  gap: 12px;
  padding: var(--hq-s2);
  background: var(--hq-surface);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-r-card);
  align-items: end;
}

/* ---------- task board ---------- */
body.a11y-unified .task-board { gap: var(--hq-s4); }
body.a11y-unified .active-task-lanes { gap: var(--hq-s3); }
body.a11y-unified .bucket-header { padding: 0 0 12px; align-items: center; }
body.a11y-unified .bucket-header h2 { font-size: 16px; }
body.a11y-unified .count-pill {
  min-width: 28px; min-height: 24px;
  padding: 0 var(--hq-s1);
  border-radius: 999px;
  background: var(--hq-raised);
  border: 1px solid var(--hq-border);
  color: var(--hq-fg);
  font-size: 12px; font-weight: 700;
}
body.a11y-unified .segmented-control { padding: 4px; gap: 4px; background: var(--hq-surface); border: 1px solid var(--hq-border); border-radius: 10px; }
body.a11y-unified .segmented-control button { min-height: 36px; border: 1px solid transparent; background: transparent; color: var(--hq-muted); }
body.a11y-unified .segmented-control button.is-active,
body.a11y-unified .segmented-control button[aria-pressed="true"] { background: var(--hq-raised); border-color: var(--hq-border-strong); color: var(--hq-fg); font-weight: 700; }
body.a11y-unified .task-list { gap: var(--hq-s1); }

/* ---------- task cards: restrained ---------- */
body.a11y-unified :is(.task-item, .document-item, .gallery-item) {
  padding: var(--hq-s2);
  background: var(--hq-surface);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-r-card);
  box-shadow: none;
}
body.a11y-unified .task-item {
  gap: 12px;
  transition: border-color var(--hq-fast) var(--hq-ease), background-color var(--hq-fast) var(--hq-ease);
}
body.a11y-unified .task-item:hover { background: var(--hq-raised); border-color: var(--hq-border-strong); }
body.a11y-unified .task-item:focus-within { border-color: var(--hq-accent-text); }
body.a11y-unified .task-title { font-size: 17px; font-weight: 700; }
body.a11y-unified .assigned-by-caption { margin: 0 0 8px; padding: 4px 0; background: transparent; border: 0; border-left: 2px solid var(--hq-warning); border-radius: 0; color: var(--hq-muted); font-size: 12px; font-weight: 600; text-decoration: none; }
body.a11y-unified .assigned-by-caption:hover { background: transparent; color: var(--hq-fg); outline: none; }
body.a11y-unified .team-button.is-secondary { filter: none; opacity: .82; }
body.a11y-unified :is(.order-number, .backlog-dot, .completed-check) {
  width: 32px; height: 32px;
  border-radius: 10px;
  font: 700 14px/1 var(--hq-font);
  background: var(--hq-accent-soft);
  color: var(--hq-accent-text);
}
body.a11y-unified .backlog-dot { background: var(--hq-raised); color: var(--hq-muted); }
body.a11y-unified .completed-check { background: var(--hq-success-bg); color: var(--hq-success); }
body.a11y-unified .task-title { font: 600 15px/1.4 var(--hq-font); color: var(--hq-fg); }
body.a11y-unified .task-description-preview { color: var(--hq-muted); font-size: 14px; }
body.a11y-unified .task-description-preview.is-expanded { color: var(--hq-fg); }
body.a11y-unified .task-actions { gap: var(--hq-s1); margin-top: 12px; }
body.a11y-unified .task-actions button { min-height: 36px; padding: 6px 12px; font-size: 13px; }

/* chips: one quiet shape; status keeps its words, colour only reinforces */
body.a11y-unified .task-meta { gap: 6px; }
body.a11y-unified .task-meta :is(.priority, .task-type, .project-chip, .work-state-chip, .overdue-chip, .needs-barry-chip, .completed-chip, .current-task-chip, .media-chip, .attachment-count-chip) {
  padding: 2px var(--hq-s1);
  border: 1px solid var(--hq-border);
  border-radius: 999px;
  background: transparent;
  color: var(--hq-muted);
  font-size: 12px; font-weight: 600;
}
body.a11y-unified .task-meta .task-type { border-left: 1px solid var(--hq-border); box-shadow: inset 3px 0 0 var(--task-type-color, var(--hq-accent-text)); padding-left: 12px; }
body.a11y-unified .task-meta :is(.priority.high, .overdue-chip, .needs-barry-chip, .work-state-chip.blocked) { background: var(--hq-danger-bg); color: var(--hq-danger); border-color: rgba(255, 138, 154, 0.35); }
body.a11y-unified .task-meta :is(.completed-chip, .work-state-chip.started) { background: var(--hq-success-bg); color: var(--hq-success); border-color: rgba(61, 220, 151, 0.35); }

/* ---------- dialogs, toast, status ---------- */
body.a11y-unified .task-dialog {
  border: 1px solid var(--hq-border-strong);
  border-radius: var(--hq-r-dialog);
  background: var(--hq-surface);
  color: var(--hq-fg);
  box-shadow: var(--hq-shadow-float);
}
body.a11y-unified .task-dialog::backdrop { background: rgba(4, 6, 10, 0.72); }
body.a11y-unified .task-dialog-actions { gap: var(--hq-s1); padding-top: var(--hq-s2); border-top: 1px solid var(--hq-border); }
body.a11y-unified .toast {
  border: 1px solid var(--hq-border-strong);
  border-radius: var(--hq-r-card);
  background: var(--hq-raised);
  color: var(--hq-fg);
  box-shadow: var(--hq-shadow-float);
}
body.a11y-unified .service-status { background: var(--hq-danger-bg); border: 1px solid rgba(255, 138, 154, 0.45); border-radius: var(--hq-r-card); color: var(--hq-fg); }
body.a11y-unified .unified-footer { padding: var(--hq-s2) var(--hq-s4) var(--hq-s3); border-top: 1px solid var(--hq-border); }

/* ---------- small screens keep the same order, only spacing changes ---------- */
@media (max-width: 980px) {
  body.a11y-unified .layout { grid-template-columns: 1fr; gap: var(--hq-s3); padding: var(--hq-s2); }
  body.a11y-unified .topbar { padding: var(--hq-s2); }
  body.a11y-unified #provider-usage { padding: var(--hq-s2) var(--hq-s2) 0 !important; }
  body.a11y-unified #provider-usage-list { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  body.a11y-unified .workspace { grid-template-columns: 1fr; row-gap: var(--hq-s2); }
  body.a11y-unified .workspace-nav { grid-column: auto; grid-row: auto; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); padding: 0; border-right: 0; border-bottom: 1px solid var(--hq-border); position: static; }
  body.a11y-unified .workspace > :not(.workspace-nav) { grid-column: auto; }
  body.a11y-unified .briefing-queue { grid-template-columns: 1fr; }
}

/* ---------- motion and contrast safety ---------- */
@media (prefers-reduced-motion: reduce) {
  body.a11y-unified *, body.a11y-unified *::before, body.a11y-unified *::after { transition: none !important; animation: none !important; }
  body.a11y-unified { background-attachment: scroll; }
}
@media (forced-colors: active) {
  body.a11y-unified :is(.task-item, .metric, .daily-briefing, .task-filters, .codex-usage, .team-button.is-active) { border: 1px solid CanvasText; }
  body.a11y-unified .workspace-tab.is-active { text-decoration: underline; text-underline-offset: 6px; }
  body.a11y-unified .team-button.is-active { outline: 2px solid Highlight; }
  body.a11y-unified :is(button, input, select, textarea, summary, a, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* an empty briefing (live region) stays in the page but draws nothing */
body.a11y-unified .daily-briefing:empty { padding: 0; background: transparent; border-color: transparent; }

/* ---------- r3: ink shell, paper workspace ----------
   The first two renders proved that moving the old dark cards around was not
   enough. Keep the dark operational shell, but give the work itself a calm,
   high-contrast paper canvas. DOM order and controls are unchanged. */
body.a11y-unified .workspace {
  --hq-bg: #eef3f8;
  --hq-surface: #ffffff;
  --hq-raised: #f4f7fb;
  --hq-hover: #e8f0fa;
  --hq-input: #ffffff;
  --hq-border: #d3deea;
  --hq-border-strong: #98abc1;
  --hq-fg: #142033;
  --hq-muted: #526276;
  --hq-accent: #006bcf;
  --hq-accent-text: #005aa9;
  --hq-accent-soft: rgba(0, 107, 207, 0.12);
  --hq-focus: #004f9e;
  --hq-success: #087a52;
  --hq-success-bg: #e4f5ec;
  --hq-warning: #8a5200;
  --hq-warning-bg: #fff3d7;
  --hq-danger: #b4233f;
  --hq-danger-bg: #fee8ed;
  --hq-font-display: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  /* Older Mission and Assignments sheets resolve these aliases at their own
     scope, so reset both token families here rather than leaving dark text
     and dark surfaces stranded inside the light canvas. */
  --a11y-ui-bg: var(--hq-bg);
  --a11y-ui-surface: var(--hq-surface);
  --a11y-ui-raised: var(--hq-raised);
  --a11y-ui-interactive: var(--hq-hover);
  --a11y-ui-accent: var(--hq-accent);
  --a11y-ui-accent-hover: #005aa9;
  --a11y-ui-accent-soft: var(--hq-accent-soft);
  --a11y-ui-focus-color: var(--hq-focus);
  --a11y-ui-fg: var(--hq-fg);
  --a11y-ui-muted: var(--hq-muted);
  --a11y-ui-border: var(--hq-border);
  --bg: var(--hq-bg);
  --paper: var(--hq-surface);
  --panel: var(--hq-raised);
  --ink: var(--hq-fg);
  --muted: var(--hq-muted);
  --line: var(--hq-border);
  --brand-blue: var(--hq-accent);
  --brand-blue-dark: var(--hq-accent);
  --brand-cyan: var(--hq-focus);
  padding: 24px;
  background: #eef3f8;
  border: 1px solid #c9d6e4;
  border-radius: 20px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.16);
}
body.a11y-unified .workspace :is(.task-item, .document-item, .gallery-item) {
  box-shadow: 0 1px 0 rgba(20, 32, 51, 0.05), 0 6px 18px rgba(20, 32, 51, 0.06);
}
body.a11y-unified .workspace .workspace-nav {
  background: #e3ebf4;
  border: 1px solid #c9d6e4;
  border-radius: 14px;
  padding: 8px;
}
body.a11y-unified .workspace .workspace-tab.is-active {
  background: #ffffff;
  box-shadow: inset 3px 0 0 var(--hq-accent), 0 1px 2px rgba(20, 32, 51, 0.10);
}
body.a11y-unified .welcome-panel h2 {
  font: 650 clamp(28px, 2.2vw, 34px)/1.1 var(--hq-font-display);
  letter-spacing: -0.025em;
}

/* Provider values are operational data, not decoration: every value keeps a
   fixed right column and the explanatory line remains visible.  Existing
   styles give cards a 280px minimum, which caused the observed overlap. */
body.a11y-unified #provider-usage-list {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 8px !important;
}
body.a11y-unified #provider-usage-list .provider-usage-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 74px;
  padding: 9px 10px;
  overflow: hidden;
}
body.a11y-unified #provider-usage-list .provider-usage-card .codex-usage-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 7px;
}
body.a11y-unified #provider-usage-list .provider-usage-card .codex-usage-heading span,
body.a11y-unified #provider-usage-list .provider-usage-card .codex-usage-heading strong {
  font-size: 13px;
}
body.a11y-unified #provider-usage-list .provider-usage-card .codex-usage-heading span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.a11y-unified #provider-usage-list .provider-usage-card .codex-usage-heading strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.a11y-unified #provider-usage-list .provider-usage-card small {
  display: block;
  margin-top: 4px;
  min-height: 24px;
  overflow: visible;
  color: var(--hq-muted);
  font-size: 10px;
  line-height: 1.2;
  white-space: normal;
}

/* Today leads with the person and task, not a wall of equally loud controls. */
body.a11y-unified .task-item .task-title { font: 650 18px/1.3 var(--hq-font-display); }
body.a11y-unified .task-actions { gap: 5px; margin-top: 8px; }
body.a11y-unified .task-actions button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
body.a11y-unified .task-description-preview:not(.is-expanded) {
  display: -webkit-box !important;
  max-height: 3em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Pass-four measured contrast repair.  These are labels, not decoration: use
   the paper canvas's tested secondary grey rather than inherited dark-surface
   styling. */
body.a11y-unified .workspace .metric span,
body.a11y-unified .workspace .briefing-copy strong {
  color: #526276;
}
body.a11y-unified .workspace .count-pill {
  color: #526276;
  border-color: #98abc1;
}
body.a11y-unified #provider-usage-list .provider-usage-card small {
  font-size: 13px;
}
body.a11y-unified .assigned-by-caption {
  border-left: 0;
  padding-left: 0;
}
body.a11y-unified .task-meta .task-type {
  border-left: 1px solid var(--hq-border);
  box-shadow: none;
  padding-left: var(--hq-s1);
}

/* Explicit foregrounds for the legacy selectors which carried dark literals.
   These make secondary copy at least 4.5:1 against the paper canvas. */
body.a11y-unified .workspace :is(
  .mission-list-item, .mission-list-item h3, .mission-detail,
  .mission-detail h3, .mission-detail p, .mission-detail li,
  .hq-missions, .hq-missions h2, .hq-missions h3,
  .hq-assignments, .hq-assignments h2, .hq-assignments h3,
  .assignments-head, .assignments-section, .assignments-missions-head,
  .assignments-mission-heading, .assignments-section p
) { color: var(--hq-fg); }
body.a11y-unified .workspace :is(
  .mission-list-item p, .mission-date, .mission-detail .muted,
  .assignments-head p, .assignments-section .muted, .mission-list-item .muted
) { color: var(--hq-muted); }
body.a11y-unified .workspace :is(.mission-list-item, .mission-detail, .mission-human-grid article) {
  background: var(--hq-surface);
  border-color: var(--hq-border);
}
body.a11y-unified .workspace :is(.mission-filter, .mission-filters input, .mission-filters select,
  .assignments-missions-head input, .assignments-list-controls select) {
  background: var(--hq-surface);
  border-color: var(--hq-border-strong);
  color: var(--hq-fg);
}

@media (max-width: 1180px) {
  body.a11y-unified #provider-usage-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}