/* T395 (doc 57): top header topline paint — health pill, Launch primary, quiet ghosts.
   Scoped to the topbar; no layout changes — the topbar grid owns structure. */
#board-health {
  border-radius: 999px;
  padding-inline: 0.75rem;
  font-family: var(--font-ui);
  font-weight: 600;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
#board-health .health-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
#board-health:not(.reconnecting) { color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 9%, transparent); }
#board-health.reconnecting, #board-health[data-state="attention"] {
  color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 11%, transparent);
  border-color: color-mix(in srgb, var(--ui-warning) 26%, transparent);
}
.topbar .button.primary {
  border: none;
  border-radius: 0.7rem;
  background: var(--ui-accent);
  color: var(--ui-accent-ink, #04141d);
  font-family: var(--font-ui);
  font-weight: 650;
  transition: filter 140ms ease, transform 140ms ease;
}
.topbar .button.primary:hover { filter: brightness(1.08); }
.topbar .button.primary:active { filter: brightness(0.95); transform: translateY(1px); }
.topbar .button.quiet {
  border-radius: 0.7rem;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  color: var(--ui-text-soft);
  font-family: var(--font-ui);
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}
.topbar .button.quiet:hover { background: var(--ui-panel-hover, var(--ui-hover)); color: var(--ui-text); }
.topbar .button.quiet:active { transform: translateY(1px); }

/* T399: mobile bottom navigation — prototype paint (phone surface only). */
@media (max-width: 820px) {
  .mobile-frequency-bar { border-top: 1px solid var(--ui-line-soft); }
  .mobile-frequency-item {
    color: var(--ui-text-soft);
    font-family: var(--font-ui);
    transition: color 140ms ease, background 140ms ease;
  }
  .mobile-frequency-item svg { width: 1.25rem; height: 1.25rem; }
  .mobile-frequency-item span { font-size: 0.6rem; font-weight: 600; }
  .mobile-frequency-item[aria-current="page"],
  .mobile-frequency-item[aria-selected="true"],
  .mobile-frequency-item.active {
    color: var(--ui-accent);
  }
  .mobile-frequency-item[aria-current="page"] svg,
  .mobile-frequency-item[aria-selected="true"] svg,
  .mobile-frequency-item.active svg {
    color: var(--ui-accent);
  }
}

/* T402: the Connections rail label never breaks mid-word on desktop. */
@media (min-width: 821px) {
  #connections-tab-control .shell-nav-label-wide,
  #connections-tab-control span { white-space: nowrap; }
}
/* T403 (doc 57): prototype layout fidelity — the look lives in the structure.
   Clean canvas (no grid paper), floating chrome (no hard topbar), the
   prototype's radii, type scale, and section rhythm. Paint + spacing only. */

/* 1. Clean canvas: the prototype has no graph-paper background. */
.tab-panel {
  background-image: none;
  padding-block: 1.6rem 3.5rem;
}

/* 2. Floating chrome: the prototype has no full-width hard bar. The actions
      stay functional but the bar dissolves into the page — but "dissolves"
      means matching the plain page tone, not literally transparent. A fully
      transparent .topbar lets the body's T376 console-glow radial-gradient
      (peak at 85% viewport width, just above the top edge) bleed straight
      through: the topbar's right side reads visibly brighter/cooler than
      its left (measured: dark #08111d→#08182710.. i.e. rgb(8,17,29) at the
      left edge to rgb(8,26,39) near the glow peak; light rgb(247,245,240)
      warm-paper on the left cooling to rgb(236,239,235) on the right — a
      real, measurable directional gradient, worse in light mode because the
      color-temperature shift reads more visibly against a light base).
      Doc 57 §9 rules out decorative top-bar content; operator directive
      (18 Aug) confirmed removal. The rail is ALSO nominally transparent but
      sits far from the glow's peak (near 0% viewport width) so it reads
      flat already — matching that same effective flat tone here (plain
      --ui-bg, not --ui-panel, so the bar still "dissolves" rather than
      reading as a raised card) is the fix at the source, not a painted-over
      patch. */
.topbar {
  background: var(--ui-bg);
  border-bottom: none;
  box-shadow: none;
}

/* 3. The prototype's radius language (18px cards). */
/* T497 (doc 57/65 Routines rebuild): #routines-tab .routine-summary and
   .routine-row excised — the Routines rebuild owns this radius directly in
   static/routines/routines.css, one source of truth instead of two rules
   fighting cascade order (same precedent as T496's Workforce exclusion). */
#approvals-tab .approval-card,
.pin-card,
.files-alt-row,
#settings-drawer .capacity-card {
  border-radius: 1.125rem;
}

/* 4. Type scale: hero 30px, section heads 17px, body up. */
.page-header p { font-size: 0.9rem; }

/* T404 (doc 57): glass panels + prototype card language.
   Panels are barely-tinted glass over the glow background, with the
   prototype's soft elevation; attention cards carry the tinted icon chip
   and quiet meta; panel-head links are the prototype's accent actions. */

/* Glass cards (theme-safe: 3% text tint ≈ prototype's 2.8% white on dark). */
/* T497: #routines-tab excised (see above) — routines.css owns its own
   glass treatment now. */
#approvals-tab .approval-card,
.pin-card {
  background: color-mix(in srgb, var(--ui-text) 3%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* T407: glass everywhere — the remaining surfaces join the card system. */
#connections-tab .assistant-system-card,
#connections-tab .credits-card,
#settings-drawer .capacity-card,
#settings-drawer .settings-pane .permissions-card {
  background: color-mix(in srgb, var(--ui-text) 3%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ui-line);
  border-radius: 1.125rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
#connections-tab .conn-pane h3,
#connections-tab .conn-pane-head h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
#approvals-tab .approvals-count-box strong { font-family: var(--font-mono); }

/* T409: interior scale across surfaces — the workforce treatment everywhere.
   Prototype measurements: list rows 15px padding, 14.5px names, 11px mono
   meta, 18px radius, 10px rhythm. */

/* T497: Routines rows excised — sizes now live in routines.css directly. */

/* Approvals cards */
#approvals-tab .approval-card { padding: 1rem 1.1rem; }
#approvals-tab .approval-card h3 { font-size: 0.95rem; font-weight: 650; }
#approvals-tab .approval-card .approval-meta,
#approvals-tab .approval-card time { font-size: 0.68rem; }
#approvals-tab .approvals-count-box strong { font-size: 1.5rem; font-family: var(--font-mono); }

/* Files tree rows */
.files-tree .file-entry { padding: 0.42rem 0.5rem; border-radius: 0.6rem; }
.files-tree .file-name { font-size: 0.84rem; }
.files-tree .file-time { font-size: 0.64rem; }

/* T410: connections interior joins the board scale. */
#connections-tab .conn-pane h3 { font-size: 1.0625rem; }
#connections-tab .conn-pane p,
#connections-tab .conn-pane .conn-pane-explainer { font-size: 0.84rem; }
#connections-tab .conn-subtabs button,
#connections-tab .conn-subtab { font-size: 0.82rem; font-weight: 600; }
#connections-tab .catalog-chip { font-size: 0.68rem; }
#connections-tab .conn-list,
#connections-tab .connector-list,
#connections-tab .secret-list { display: grid; gap: 0.55rem; }
#connections-tab .conn-list > *,
#connections-tab .connector-list > *,
#connections-tab .secret-list > * {
  border-radius: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ui-line);
  background: color-mix(in srgb, var(--ui-text) 2%, transparent);
}
#connections-tab .conn-list strong,
#connections-tab .connector-list strong { font-size: 0.88rem; font-weight: 600; }
#connections-tab .conn-list span,
#connections-tab .connector-list span,
#connections-tab .conn-list small { font-size: 0.7rem; }

/* Accent focus rings everywhere interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: 0.4rem;
}

/* Quiet scrollbars. */
.tab-panel,
.dock-transcript,
.files-tree,
.overview-list,
.settings-body,
.conn-pane {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-text) 18%, transparent) transparent;
}

/* Accent selection. */
::selection {
  background: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

@media (min-width: 821px) {
  /* OAS6: the sidebar column retired — one full-width column; the docked
     grid (multi-dock-push.css) adds the dock track when columns mount. */
  body {
    grid-template-areas:
      "topbar"
      "workspace";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* The old topbar becomes the content topline: pill left, actions right.
     Topbar round (18 Aug): this desktop-width rule was the actual live
     culprit for the right-brighter-than-left glow bleed (it loads after,
     and re-overrides, the base .topbar rule above at every viewport this
     product is normally used at, >=821px) — flattened to match. */
  .topbar {
    border-bottom: none;
    background: var(--ui-bg);
    padding-block: 1rem 0.2rem;
    align-items: center;
  }
  .topbar .title-row:empty { display: none; }
  .topbar-actions { width: 100%; }
  .topbar #board-health { margin-right: auto; }
  .tab-panel { padding-top: 0.6rem; }
}

.shell-nav-section-label,
.shell-nav-label,
.shell-nav-secondary-label {
  margin-top: 0.875rem;
  padding: 0 0.625rem 0.375rem;
}

/* Bottom toggle above the operator footer. */
.shell-nav-foot {
  display: flex;
  justify-content: flex-start;
  padding: 0.25rem 0.625rem 0.5rem;
  border-top: 1px solid var(--ui-line-soft);
  margin-top: 0.5rem;
}
.shell-nav-toggle { border: none; background: transparent; }

/* Operator: 30px avatar + plan line. */
.shell-operator-avatar { width: 1.875rem; height: 1.875rem; }
.shell-operator-plan {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ui-muted);
}

/* T417 (doc 57): topline chrome, exactly the prototype (board-wide topbar). */

/* Topline: prototype metrics — pill and buttons sized, 30px below. */
.topbar #board-health {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}
.topbar .button.primary { padding: 0.5rem 0.95rem; font-size: 0.8125rem; }
.topbar .button.quiet { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
.topbar .topbar-icon-control { width: 2.125rem; height: 2.125rem; }
@media (min-width: 821px) {
  .topbar { padding-block: 1.1rem 0; margin-bottom: 0.9rem; }
}


/* T418 (doc 57): rail content parity.
   The prototype rail carries exactly: brand, Workspace (Today/Workforce/
   Files/Routines), Needs you (Approvals + badge), System (Connections),
   bottom toggle, operator foot. No Apps item, no operations strip. */
#apps-tab-control { display: none; }
.shell-nav-foot { margin-top: auto; }

/* T419 (doc 57): rail geometry and item model, exactly.
   232px expanded / 64px collapsed (prototype .shell columns); items are
   simple flex rows (no border box, no grid columns) with the prototype
   gap; clicks don't leave a focus ring. */
:root {
}

/* T420 (doc 57): the rail has no rule lines above section labels, and one
   single soft line above the footer (prototype: labels are spaced with
   padding only; rail-foot carries the only border). */
.shell-nav-section-label,
.shell-nav-label,
.shell-nav-secondary-label {
  border-top: none;
  padding-top: 0.375rem;
}
.shell-operator {
  border-top: none;
  margin-top: 0;
}
.shell-nav-foot { border-top: 1px solid var(--ui-line-soft); }

/* T421 (doc 57): toggle + collapsed rail, exactly to prototype.
   Expanded: chevron + "Collapse" word as a quiet nav-styled row at the
   foot. Collapsed: 64px rail, centered 20px icons, all text/badges/labels
   and the operator hidden, toggle centered with rotated chevron. */

.shell-nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.6875rem;
  font-family: var(--font-ui);
  font-size: 0.8438rem;
  font-weight: 500;
  color: var(--ui-text-muted);
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}
.shell-nav-toggle:hover {
  background: var(--ui-panel-hover, var(--ui-hover));
  color: var(--ui-text);
}
.shell-nav-toggle svg { width: 1rem; height: 1rem; flex: none; }
.shell-nav-toggle::after {
  content: "Collapse";
  font-size: 0.8438rem;
  font-weight: 500;
}
.shell-nav-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* T423 (doc 57): topline action icons — prototype glyphs and metrics.
   34px rounded icon buttons with 16px glyphs, prototype gaps; the extra
   avatar chip is quiet on the desktop topline. */
.topbar .topbar-icon-control {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  display: grid;
  place-items: center;
}
.topbar .topbar-icon-control svg { width: 1.125rem; height: 1.125rem; }
.topbar-actions { gap: 0.5625rem; }
@media (min-width: 821px) {
  .topbar-avatar { display: none; }
}

/* T424 (doc 57): prototype stroke weights (CSS was overriding inline attrs) and
   the assistant-attention pill state. */
#launch-open .ui-icon { stroke-width: 2.4; }
#board-health[data-assistant="attention"] {
  color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 11%, transparent);
  border-color: color-mix(in srgb, var(--ui-warning) 26%, transparent);
}) already matches the prototype exactly, so the override here is
   removed rather than kept redundant.
*/

/* T426 (doc 57): light theme exactly to prototype tokens.
   Page back to the prototype paper #f7f5f0 (an earlier contrast pass had
   darkened it); cards are the prototype's warm-white #fcfbf7; selected and
   hover pills are SOLID WHITE like the prototype's light mode. */
html[data-theme="light"] body,
html[data-theme="light"] .tab-panel { background-color: #f7f5f0; }
/* Topbar round (18 Aug): this used to force light-theme .topbar back to
   transparent (re-breaking the flat-background fix above, since this rule
   loads later in the same file). The base .topbar rule already reads
   var(--ui-bg), which resolves to the correct light value on its own —
   no theme-specific override needed. */

html[data-theme="light"] .overview-attention-card,
html[data-theme="light"] #overview-live-list .overview-row,
html[data-theme="light"] #overview-routines-list .overview-row,
html[data-theme="light"] .files-tree-pane,
html[data-theme="light"] .file-preview-pane,
html[data-theme="light"] #approvals-tab .approval-card,
html[data-theme="light"] .pin-card,
html[data-theme="light"] #connections-tab .assistant-system-card,
html[data-theme="light"] #connections-tab .credits-card,
html[data-theme="light"] #settings-drawer .capacity-card {
  background: #fcfbf7;
  border-color: rgba(20, 32, 51, 0.1);
  box-shadow: 0 10px 30px rgba(20, 32, 51, 0.07);
}

/* T427: toggle chevron to prototype metrics (16px, stroke 2.2, muted → hover text). */
.shell-nav-toggle .chev-ico { width: 1rem; height: 1rem; stroke-width: 2.2; }

/* T428: topline buttons to prototype build — the shipped .button base forced
   37.6px height and 20px icons; the prototype buttons are ~34px with 14px
   glyphs. Scoped to the topline so other button contexts keep their metrics. */
.topbar .button.primary,
.topbar .button.quiet {
  min-height: auto;
  height: auto;
  padding: 0.5rem 0.9375rem;      /* 8px 15px */
  font-size: 0.8125rem;           /* 13px */
  line-height: 1.2;
}
.topbar .button.quiet { padding: 0.5rem 0.875rem; }
/* Icon glyph size (operator report, 19 Aug): icon-only controls (Apps/
   Settings/Help/theme) are ALSO .button.quiet, so this rule's .ui-icon half
   (meant for Launch/Ask only) was matching their svgs too at higher
   specificity than T423/T437's .topbar-icon-control svg{width:1rem} rule,
   silently shrinking them to 14px. Prototype measures them at 16px (theme
   toggle 15px, see chrome-fidelity.css). Excluding .topbar-icon-control
   restores the 16px rule as the winner for those four. */
.topbar .button:not(.topbar-icon-control) .ui-icon,
.topbar .global-action-icon svg {
  width: 0.875rem;                /* 14px like the prototype */
  height: 0.875rem;
}
.topbar .button.primary .ui-icon { stroke-width: 2.4; }

/* T430: the Launch button ink, exactly — prototype tokens per theme. */
:root { --ui-accent-ink: #061620; }
html[data-theme="light"] { --ui-accent-ink: #ffffff; }

.topbar .button.primary {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
  border: none;
}
.topbar .button.primary:hover { filter: brightness(1.08); }
.topbar .button.primary:active { filter: brightness(0.95); transform: translateY(1px); }

/* T431 (doc 57): font-color audit — the legacy primary pair now aliases the
   prototype action colors in BOTH themes. Light mode had --ui-primary as
   dark navy (#10263d), turning every primary button outside the topline
   (Upload, launch submit, welcome CTA, dialog confirms) navy; the prototype
   action is the accent with its per-theme ink. */
:root,
html[data-theme="light"] {
  --ui-primary: var(--ui-accent);
  --ui-primary-text: var(--ui-accent-ink);
}
.button.primary {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
  border: none;
}
.button.primary:hover { filter: brightness(1.08); }
.button.primary:active { filter: brightness(0.95); transform: translateY(1px); }

/* T432: sidebar fonts, exact — operator plan is regular 12.5px muted (not
   mono), labels at 11px/0.09em, brand name tracking. */
.shell-operator-plan {
  font-family: var(--font-ui);
  font-size: 0.78125rem;             /* 12.5px */
  color: var(--ui-muted);
  font-weight: 400;
}
.shell-nav-section-label,
.shell-nav-label,
.shell-nav-secondary-label {
  font-size: 0.6875rem;              /* 11px */
  letter-spacing: 0.09em;
}

/* T437 (doc 57): topline icon buttons to the prototype .icon-btn build —
   34px, borderless and transparent at rest, hover fills with a soft pill
   and line; icon 16px at 90% feel. */
.topbar .topbar-icon-control {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ui-text-soft);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.topbar .topbar-icon-control:hover {
  background: var(--ui-panel-hover, var(--ui-hover));
  color: var(--ui-text);
  border-color: var(--ui-line);
}
.topbar .topbar-icon-control:active { transform: translateY(1px); }
.topbar .topbar-icon-control svg { width: 1.125rem; height: 1.125rem; }

/* T497: T441's routines block excised entirely — every rule here (chip,
   summary numbers, search, row padding, chevron) now lives once in
   static/routines/routines.css. #routines-tab .routine-status was dead
   weight: the detail dialog's #routine-status lives outside #routines-tab
   (own top-level overlay), styled already by app-shell/overlays.css. */

/* T442 (doc 57): approvals detail pass — larger heading, 20px count numbers,
   prominent action pair, 11px mono meta, urgency dot chips, card rhythm. */
#approvals-tab .page-header h2 { font-size: 1.6rem; letter-spacing: -0.015em; }
#approvals-tab .page-header-kicker { opacity: 1; }
#approvals-tab .approvals-count-box strong { font-size: 1.25rem; }
#approvals-tab .approval-card .actions,
#approvals-tab .approval-card .button { gap: 0.6rem; }
#approvals-tab .approval-card .button.approve,
#approvals-tab .approval-card .button.primary {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
  border: none;
  font-weight: 650;
}
#approvals-tab .approval-card .approval-meta,
#approvals-tab .approval-card time { font-size: 0.6875rem; }
#approvals-tab .approval-card h3 { display: flex; align-items: center; gap: 0.5rem; }
#approvals-tab .approval-card h3::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--ui-warning);
  flex: none;
}
#approvals-tab .approval-card.permission h3::before { background: var(--ui-accent); }
#approvals-tab .approval-card + .approval-card,
#approvals-tab .approval-session-group .approval-card + .approval-card { margin-top: 0.45rem; }