/* Staff workspace: the app layer. Layout and screen patterns built from the Miisk design system
   (/staff/assets/miisk.css). Only role tokens appear here; no raw colors. */

/* ---------- Shell ---------- */
.app-frame {
  display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh; background: var(--surface-shell); isolation: isolate;
}
.app-frame--minimal { display: block; }
.app-frame--minimal > .main-content { margin: var(--space-1); }

.sidebar {
  position: sticky; top: 0; height: 100dvh; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3);
}
.sidebar-head { display: flex; align-items: center; min-height: var(--control-lg); padding: 0 var(--space-1); }
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-1); margin-inline-start: calc(-1 * var(--space-1));
  border-radius: var(--radius-md); color: var(--text-primary);
  font-size: var(--text-body); font-weight: var(--weight-semibold); letter-spacing: -.02em;
}
.wordmark-mark { width: 20px; height: 20px; color: var(--text-primary); }
.workspace-label { color: var(--text-secondary); padding: 0 var(--space-1); }

.scope-form { display: grid; gap: var(--space-1); }
.scope-label {
  padding: 0 var(--space-1); color: var(--text-tertiary);
  font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.scope-choice { display: flex; gap: var(--space-1); }
.scope-choice .select-control { flex: 1; }
.scope-choice select { --field-h: var(--control-md); font-weight: var(--weight-medium); }
.scope-choice .button { --button-h: var(--control-md); --button-bg: transparent; --button-shadow: none; --button-fg: var(--text-secondary); }
.scope-choice .button:hover { --button-bg-hover: var(--fill-ghost-hover); --button-fg: var(--text-primary); }

.page-finder {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  height: var(--control-md); padding: 0 var(--space-1-5) 0 var(--space-2);
  border: 0; border-radius: var(--radius-lg);
  background: var(--control); box-shadow: var(--shadow-hairline);
  color: var(--text-secondary); text-align: start;
  transition: background-color var(--duration-quick) var(--ease-standard);
}
.page-finder:hover { background: var(--control-hover); color: var(--text-primary); }
.page-finder > span { flex: 1; }
.page-finder .icon { color: var(--text-tertiary); }

.sidebar-navigation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-1 * var(--space-1)); padding: 0 var(--space-1) var(--space-6); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-6)), transparent); }
.nav-theme { display: none; }
.sidebar-navigation > summary { display: none; }
.nav-group + .nav-group { margin-top: var(--space-3); }
.nav-group-label {
  padding: var(--space-1-5) var(--space-2) var(--space-1);
  color: var(--text-tertiary); font-weight: var(--weight-medium);
}
/* The navigation holds the stacking layer, so the current link's pill paints under every label as it slides. */
.sidebar-navigation > nav { position: relative; isolation: isolate; }
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary); font-weight: var(--weight-medium);
  transition: background-color var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard);
}
.nav-link .icon { color: var(--text-tertiary); transition: color var(--duration-quick) var(--ease-standard); }
.nav-link:hover { background: var(--fill-subtle); color: var(--text-primary); }
.nav-link:hover .icon { color: var(--text-secondary); }
/* The current page is a raised pill, not a hover tint, so selection never looks like a pointer passing over. The pill
   is drawn behind the label so motion.js can slide it from the page just left; the current icon takes the brand. */
.nav-link.is-active, .nav-link.is-active:hover { background: transparent; color: var(--text-primary); }
.nav-link.is-active::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--selected-pill-bg); box-shadow: var(--selected-pill-shadow);
}
.nav-link.is-active .icon { color: var(--brand-text); }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.nav-count {
  margin-inline-start: auto; min-width: 20px; height: 18px; padding: 0 var(--space-1-5);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--attention-subtle); color: var(--attention-text);
  font-size: var(--text-caption); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
}
.nav-more {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  height: var(--control-sm); border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--text-tertiary); font-size: var(--text-caption-lg);
}
.nav-more:hover { color: var(--text-primary); background: var(--fill-ghost-hover); }
.nav-more .icon { width: 12px; height: 12px; }

.sidebar-foot { display: grid; gap: var(--space-2-5); padding-top: var(--space-3); box-shadow: inset 0 .5px 0 var(--border-default); }
/* The signed-in person (docs/53 §4.5): a disclosure at the sidebar's foot whose menu opens upward over the navigation. */
.user-menu { position: relative; }
.user-menu-trigger {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  min-height: var(--control-xl); padding: var(--space-1) var(--space-1-5); margin: 0 calc(-1 * var(--space-1));
  border-radius: var(--radius-lg); color: var(--text-primary);
  transition: background-color var(--duration-quick) var(--ease-standard);
}
summary.user-menu-trigger:hover, .user-menu[open] > .user-menu-trigger { background: var(--fill-ghost-hover); }
.user-menu-trigger > .icon { color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.user-menu[open] > .user-menu-trigger > .icon { transform: rotate(180deg); }
.user-menu-who { display: grid; min-width: 0; }
.user-menu-who strong, .user-menu-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-who strong { font-weight: var(--weight-medium); }
.user-menu-who small { color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.user-menu-panel { position: absolute; inset-inline: calc(-1 * var(--space-1)); bottom: calc(100% + var(--space-1-5)); z-index: var(--layer-overlay); min-width: 0; }
.user-menu-appearance { padding: 0 var(--space-1) var(--space-1); }
/* theme.js reveals the switch; without it, the Appearance row says nothing it cannot do. */
.user-menu-appearance:has(> [data-theme-switch][hidden]) { display: none; }
.nav-account { display: none; }

/* The workspace: a rounded page floating on the shell. */
.main-content {
  position: relative; z-index: 1; min-width: 0;
  min-height: calc(100dvh - var(--space-2));
  margin: var(--space-1) var(--space-1) var(--space-1) 0;
  padding: var(--space-3) var(--space-8) var(--space-6);
  border-radius: var(--radius-3xl);
  background: var(--surface-page);
  box-shadow: var(--shadow-hairline), inset 0 0 0 .5px var(--surface-page-edge);
  outline: none;
}
.main-content { display: flex; flex-direction: column; }
.main-content > * { width: 100%; max-width: var(--content-max); margin-inline: auto; }
/* Beside the sidebar the frame fills the window and never scrolls: the page keeps its gap on every edge and scrolls
   inside its own rounded edge, so the sidebar and the gap stay put. */
@media (min-width: 900px) {
  .app-frame:not(.app-frame--minimal) { height: 100dvh; min-height: 0; overflow: hidden; }
  .app-frame:not(.app-frame--minimal) > .main-content { height: calc(100dvh - 2 * var(--space-1)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
.workspace-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--control-lg); margin-bottom: var(--space-6);
  color: var(--text-secondary); font-size: var(--text-body-sm);
}
.workspace-bar .breadcrumb { min-width: 0; overflow-wrap: anywhere; }
.mode-label { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.live-label {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  color: var(--info-text); font-size: var(--text-caption-lg); font-weight: var(--weight-medium);
}
.live-label::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.page-notice, .loading-notice {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  background: var(--attention-subtle); color: var(--attention-text); box-shadow: inset 0 0 0 .5px var(--attention-border);
}
.page-notice[hidden], .loading-notice[hidden] { display: none; }
.account-notice { margin-bottom: var(--space-4); }
.page-notice a { color: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; margin-inline-start: var(--space-1); }
.loading-notice {
  position: fixed; z-index: var(--layer-toast); top: var(--space-3); left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100% - var(--space-8));
  margin: 0; padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-full);
  background: var(--surface-overlay); color: var(--text-secondary); box-shadow: var(--shadow-raised);
  font-size: var(--text-caption-lg); font-weight: var(--weight-medium); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  /* A fast swap never flashes the notice: it waits 300ms before it appears. aria-busy and the announcer stay immediate. */
  .loading-notice:not([hidden]) { animation: t-reveal var(--duration-fast) var(--ease-smooth-out) 300ms both; }
}
.page-footer {
  margin-top: auto; padding-top: var(--space-10);
  color: var(--text-tertiary); font-size: var(--text-caption-lg); text-align: end;
}

/* ---------- Page and section headings ---------- */
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-heading > div { min-width: 0; }
.page-heading h1 { letter-spacing: var(--tracking-display); }
.page-heading p { margin-top: var(--space-0-5); color: var(--text-secondary); }
.page-heading > .button, .page-heading > nav { flex: none; }
.title-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-2-5); }
.section-heading { display: grid; gap: var(--space-0-5); margin-bottom: var(--space-3); }
.section-heading h2 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.results-heading {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--text-caption-lg);
}
.results-heading :is(h2, h3) { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.results-heading > span { font-variant-numeric: tabular-nums; }
.queue-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.timezone { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.timezone .icon { width: 13px; height: 13px; }
.filter-form { display: flex; align-items: center; gap: var(--space-2); }
.filter-form label { color: var(--text-secondary); white-space: nowrap; }
.filter-form select { --field-h: var(--control-md); min-width: 200px; }
/* Leads search and filters (docs/48): label above each control, one row on a wide screen. */
.leads-filters {
  display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto; align-items: end;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.leads-filters input, .leads-filters select { --field-h: var(--control-lg); }
.leads-filter-actions { display: flex; gap: var(--space-2); }
.leads-filter-actions .button { --button-h: var(--control-lg); }
.freshness {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-5);
  color: var(--text-tertiary); font-size: var(--text-caption-lg);
}
.section-label { margin: var(--space-4) 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-caption-lg); font-weight: var(--weight-medium); }
.panel-intro { color: var(--text-secondary); margin-bottom: var(--space-3); max-width: var(--reading-max); }
.panel-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--control-sm); margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--text-caption-lg);
}
.panel-kicker > span:first-child { color: var(--text-primary); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }

/* ---------- Home (docs/53 §4.2): today's numbers, then the work queue ---------- */
.home-today { margin-bottom: var(--space-2); }
.home-today .results-heading { justify-content: flex-start; }
.home-today .results-heading > .link { margin-inline-start: auto; }
.home-today--unavailable { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.home-today--unavailable .results-heading { margin-bottom: 0; }
/* docs/58 §3.5: each count's today under it, and the upcoming first classes after the tiles. */
.result-today { color: var(--text-secondary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.home-upcoming { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.home-upcoming .results-heading { justify-content: flex-start; flex-wrap: wrap; row-gap: var(--space-1); margin-bottom: 0; }
.home-upcoming .results-heading > .timezone { margin-inline-start: auto; }
.home-upcoming-empty { color: var(--text-secondary); }

/* ---------- Work queue ---------- */
.queue-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: var(--space-4); align-items: start; }
.queue-layout--empty { grid-template-columns: minmax(0, 1fr); }
.queue-list { min-width: 0; }
.task-table { table-layout: fixed; }
.task-table thead th:nth-child(1) { width: 18%; }
.task-table thead th:nth-child(2) { width: 28%; }
.task-table thead th:nth-child(3) { width: 24%; }
.task-table thead th:nth-child(4) { width: 24%; }
.task-table thead th:last-child { width: 48px; }
.lead-table thead th:nth-child(n) { width: auto; }
.lead-table thead th:first-child { width: 22%; }
.lead-table thead th:last-child { width: 48px; }
.pending-table thead th:nth-child(n) { width: 20%; }
.conversation-table thead th:nth-child(n) { width: auto; }
.conversation-table thead th:nth-child(1) { width: 16%; }
.conversation-table thead th:nth-child(2), .conversation-table thead th:nth-child(3) { width: 14%; }
.conversation-table thead th:nth-child(5) { width: 20%; }
.conversation-table td small { display: block; margin-top: var(--space-0-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.feed-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.feed-unavailable { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text-secondary); }
.feed-unavailable .icon { color: var(--text-tertiary); }
.feed-status { font-weight: var(--weight-medium); }
/* The status word leads with a dot in its own tone; a neutral word gets a quiet one. */
.feed-status::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: var(--space-1-5); vertical-align: 1px;
  border-radius: var(--radius-full); background: currentColor;
}
.feed-status:not([class*="tone-"])::before { background: var(--border-strong); }
/* Results (docs/49): tiles carry their definition and denominator; the per-day table is the readable equivalent. */
.results-toolbar .results-custom { flex: 1 0 100%; }
.results-notices { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.results-range-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-top: var(--space-2); }
.results-range-form input { --field-h: var(--control-lg); }
.results-range-form .button { --button-h: var(--control-lg); }
.results-range-form .field-hint { flex-basis: 100%; }
.result-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-6); }
.result-tile { display: flex; flex-direction: column; gap: var(--space-1); }
/* Each tile's series keeps one hue (docs/34 DS-D23): a swatch beside its name and the range's days as bars. */
.result-tile[data-tone="confirmed"] { --hue-solid: var(--confirmed-solid); }
.result-tile dt { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-weight: var(--weight-medium); }
.result-tile dt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-xs); background: var(--hue-solid, var(--text-tertiary)); }
.result-tile dd { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; margin: 0; min-width: 0; }
.spark { display: block; width: 100%; height: 28px; margin-top: auto; padding-top: var(--space-2); box-sizing: content-box; fill: var(--hue-solid, var(--text-tertiary)); }
.spark .spark-zero { fill: var(--border-strong); }
.spark .spark-unknown { fill: none; stroke: var(--unknown-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.result-value { color: var(--text-primary); font-size: var(--text-heading-5); line-height: var(--leading-heading-5); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); font-variant-numeric: tabular-nums; }
.result-value--unknown { color: var(--text-secondary); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); letter-spacing: 0; }
.result-detail { color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); overflow-wrap: anywhere; }
.result-detail .tone-failure, .result-detail .tone-attention { font-weight: var(--weight-medium); }
.results-days { margin-bottom: var(--space-6); }
.results-table thead th:nth-child(n) { width: auto; }
.results-table thead th:first-child { width: 16%; }
.results-table tbody th small, .results-table td small { display: block; margin-top: var(--space-0-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); font-weight: var(--weight-regular); }
.results-table td small.tone-failure, .results-table td small .tone-failure { color: var(--failure-text); font-weight: var(--weight-medium); }
.results-definitions > h2 + .facts { margin-top: var(--space-2); }
.results-definitions > h2:not(:first-child) { margin-top: var(--space-5); }
.results-limits { display: grid; gap: var(--space-1); margin-top: var(--space-2); padding-inline-start: var(--space-5); color: var(--text-secondary); max-width: 96ch; }
/* Team & access (docs/52 §2): your access beside the roster; a narrow screen stacks them. */
.team-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-6); }
.team-access .facts, .team-roster-note p { margin-top: var(--space-2); }
.team-roster-note p { color: var(--text-secondary); }
.team-table thead th:nth-child(n), .golive-table thead th:nth-child(n), .golive-switch-table thead th:nth-child(n) { width: auto; }
.team-table thead th:first-child, .golive-table thead th:first-child { width: 24%; }
.team-table thead th:last-child { width: 18%; }
/* The roster's long numeric heading keeps its own width (wrapping when the table is narrow); Change starts after a gap. */
.team-members thead th:first-child { width: 18%; }
.team-members thead th.numeric { width: 19%; white-space: normal; }
.team-table thead th.team-change { width: 21%; }
@media (min-width: 640px) { .team-table .team-change { padding-inline-start: var(--space-4); } }
.team-confirm > form .button { max-width: 100%; height: auto; padding-block: var(--space-1); white-space: normal; text-align: start; }
.team-note { margin-top: var(--space-2); }
.team-changes { margin-bottom: var(--space-6); }
@media (max-width: 1279px) { .team-layout { grid-template-columns: minmax(0, 1fr); } }
/* Team changes (docs/53 §3.4): native forms in the rows, a two-step Remove, the invite form under the invitations. */
.team-messages { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.team-invitations, .team-invite { margin-bottom: var(--space-6); }
.team-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.team-confirm > summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm); cursor: pointer; color: var(--text-secondary); }
.team-confirm[open] > form, .team-confirm[open] > .team-form { margin-top: var(--space-2); }
.team-form { display: grid; gap: var(--space-4); max-width: var(--reading-max); }
.team-form input[type="email"] { --field-h: var(--control-lg); }
.team-locations { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.team-locations > legend { width: 100%; margin-bottom: var(--space-1-5); font-weight: var(--weight-medium); }
.team-address { display: block; color: var(--text-secondary); font-size: var(--text-caption-lg); font-weight: var(--weight-regular); }
/* Go-live (docs/52 §4): panels in two columns on a wide screen; the carry-over and the history full width. */
.golive-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; margin-bottom: var(--space-6); }
.golive-owner { margin: var(--space-2) 0 var(--space-3); }
.golive-owner .badge { margin-inline-end: var(--space-1-5); }
.golive-owner small { display: block; margin-top: var(--space-1); color: var(--text-secondary); }
.golive-carry, .golive-switches { margin-bottom: var(--space-6); }
.golive-next, .golive-facts { margin-bottom: var(--space-3); }
.golive-code { white-space: nowrap; }
.golive-carry h3 { margin-top: var(--space-4); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.golive-diffs, .golive-pages, .golive-gap-list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.golive-diffs li, .golive-pages li, .golive-gap-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.golive-pages small, .golive-gap-list small { flex-basis: 100%; color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.golive-gap-list li { justify-content: space-between; padding-top: var(--space-2); }
.golive-gap-list li + li { border-top: var(--hairline) solid var(--border-default); }
.golive-watch > p, .golive-switches > p { margin-top: var(--space-2); color: var(--text-secondary); }
.golive-note { margin-bottom: var(--space-4); }
.golive-switch-table thead th:first-child { width: 18%; }
.golive-switch-table thead th:last-child { width: 32%; }
@media (max-width: 1279px) { .golive-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .team-table td.numeric, .golive-table td.numeric { text-align: start; }
  .team-table td .badge { justify-self: start; }
}
/* Operations and Brand & usage (docs/52 §3, §5): labelled tables and fact panels; reports, not live lists. */
.ops-section { margin-bottom: var(--space-6); }
.ops-section .queue-toolbar { margin-bottom: var(--space-3); }
.ops-table thead th:nth-child(n) { width: auto; }
.ops-table thead th:first-child { width: 36%; }
.ops-table tbody th small, .ops-table td small { display: block; margin-top: var(--space-0-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); font-weight: var(--weight-regular); }
.ops-table .ops-group th { color: var(--text-secondary); font-size: var(--text-caption-lg); font-weight: var(--weight-medium); }
.ops-table td > .badge, .brand-panels dd > .badge { justify-self: start; }
.brand-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-4); margin-bottom: var(--space-6); }
.brand-panels .facts + .field-hint { margin-top: var(--space-3); }
.brand-panels .results-limits { margin-top: 0; padding-inline-start: var(--space-4); }
/* Test lane and Review (docs/52 §6-§7): lane-only pages from panels, facts, tiles and tables. */
.lane-run, .lane-grid, .lane-start, .lane-section, .review-blind, .review-shadow { margin-bottom: var(--space-6); }
.lane-run-head, .review-pair-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.lane-run-head h2, .review-pair-head h3 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.lane-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.lane-breakers { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lane-breakers li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.lane-breakers small { color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.lane-start { display: grid; justify-items: start; gap: var(--space-3); }
.lane-start p { max-width: var(--reading-max); color: var(--text-secondary); }
.lane-reset { padding-top: var(--space-3); border-top: var(--hairline) solid var(--border-default); justify-self: stretch; }
.lane-table thead th:nth-child(n) { width: auto; }
.lane-table td small { display: block; margin-top: var(--space-0-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.lane-table td .badge { justify-self: start; }
.lane-table code, .review-lane code { font-family: var(--font-mono); font-size: var(--text-caption-lg); overflow-wrap: anywhere; }
.lane-capabilities thead th:first-child { width: 18%; }
.review-lane { margin-bottom: var(--space-4); max-width: 520px; }
.review-sheets { margin-bottom: var(--space-3); }
.review-sheets small { margin-inline-start: var(--space-1-5); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.review-blind > .notice, .review-tally { margin-bottom: var(--space-4); }
.review-pairs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.review-pairs a {
  display: inline-grid; place-items: center; min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--space-1-5); text-decoration: none;
  border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-caption-lg); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 var(--hairline) var(--border-default);
}
.review-pairs a:hover { background: var(--fill-ghost-hover); color: var(--text-primary); }
.review-pairs a.is-scored { background: var(--fill-subtle); color: var(--text-primary); }
.review-pairs a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--brand-border); color: var(--brand-text); font-weight: var(--weight-semibold); }
.review-pair { display: grid; gap: var(--space-4); }
.review-texts dd { max-width: var(--reading-max); }
.review-form { display: grid; gap: var(--space-4); }
.review-question { display: grid; gap: var(--space-2); }
.review-question legend { margin-bottom: var(--space-2); color: var(--text-secondary); font-weight: var(--weight-medium); }
.review-question .segmented { justify-self: start; }
.review-form textarea { max-width: var(--reading-max); }
/* The blind read (docs/53 §5.4): the lead's message first, then the two replies side by side as choice cards, each with
   its own two checks under it; stacked on a phone. */
.blind-lead { margin-top: calc(-1 * var(--space-2)); }
.blind-question legend { color: var(--text-primary); font-size: var(--text-body); font-weight: var(--weight-semibold); }
.blind-replies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.blind-reply { display: grid; grid-template-rows: 1fr auto; gap: var(--space-2); }
.blind-checks { display: grid; gap: 0; padding-inline-start: var(--space-1); }
.blind-same { justify-self: start; }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.review-step { display: flex; justify-content: space-between; gap: var(--space-2); }
.review-shadow p { max-width: var(--reading-max); color: var(--text-secondary); }
@media (max-width: 899px) { .lane-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .lane-start .button, .review-actions .button { width: 100%; }
  .lane-table td.numeric { text-align: start; }
  .review-question .segmented { justify-self: stretch; }
  .review-question .segmented > label { flex: 1; justify-content: center; }
  .review-pairs a { min-width: var(--control-md); height: var(--control-md); }
  .blind-replies { grid-template-columns: minmax(0, 1fr); }
}
/* The studio Review page (docs/53 §5.2): the reply to rate in the main column, "Your agent" beside it on wide screens and
   above it on narrow ones. */
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); grid-template-areas: "main aside"; gap: var(--space-5); align-items: start; margin-bottom: var(--space-6); }
.review-aside { grid-area: aside; position: sticky; top: var(--space-4); }
.review-main { grid-area: main; display: grid; gap: var(--space-4); min-width: 0; }
.review-tabs { margin-bottom: var(--space-4); }
.agent-panel { display: grid; gap: var(--space-2); }
.agent-panel h3 { margin-top: var(--space-2); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.agent-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.agent-score strong { font-size: var(--text-heading-6); line-height: var(--leading-heading-6); font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.agent-score span, .agent-ratings { color: var(--text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.agent-meter { width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--radius-full); background: var(--fill); overflow: hidden; }
.agent-meter::-webkit-progress-bar { background: var(--fill); border-radius: var(--radius-full); }
.agent-meter::-webkit-progress-value { background: var(--brand-solid); border-radius: var(--radius-full); }
.agent-meter::-moz-progress-bar { background: var(--brand-solid); border-radius: var(--radius-full); }
.agent-changes dd .link { display: inline-block; margin-top: var(--space-0-5); }
.home-agent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); }
.home-agent h2 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.home-agent p { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rate-receipt ul { margin: var(--space-1) 0 0; padding-inline-start: var(--space-4); color: var(--text-secondary); }
.rate-receipt li + li { margin-top: var(--space-0-5); }
.rate-card { display: grid; gap: var(--space-3); }
.rate-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.rate-card-head h2 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.rate-card-head span { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rate-eyebrow { color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); font-weight: var(--weight-medium); }
.rate-thread { padding: 0; }
.rate-earlier .timeline { padding: var(--space-2) 0 0; }
.rate-question { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--hairline) solid var(--border-default); }
.rate-question h3 { font-weight: var(--weight-semibold); color: var(--text-primary); }
.rate-verdicts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.rate-fix > summary { cursor: pointer; }
.rate-fix[open] { flex-basis: 100%; }
.rate-fix-form { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.rate-checks { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.rate-checks legend { margin-bottom: var(--space-1); color: var(--text-secondary); font-weight: var(--weight-medium); }
.rate-check { align-items: flex-start; padding-block: var(--space-1); }
.rate-check > input { margin-top: 3px; }
.rate-check > span { display: grid; gap: var(--space-0-5); }
.rate-fix-form textarea, .review-send-form textarea, .review-example-form textarea { max-width: var(--reading-max); }
.rate-after { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.rate-send { flex-basis: 100%; }
.review-send-form, .review-example-form { display: grid; gap: var(--space-3); margin-top: var(--space-2); max-width: var(--reading-max); }
.review-send-form .button { justify-self: start; }
.review-send-panel { display: grid; gap: var(--space-2); }
.review-send-panel h2 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.review-section { display: grid; gap: var(--space-3); }
.review-intro { max-width: var(--reading-max); }
.review-item { display: grid; gap: var(--space-3); }
.review-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.review-item-head h3 { font-weight: var(--weight-semibold); color: var(--text-primary); }
.review-item-head span { color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.review-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.review-suggestion { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); background: var(--fill-subtle); }
.review-suggestion p:last-child { color: var(--text-paragraph); max-width: var(--reading-max); overflow-wrap: anywhere; white-space: pre-wrap; }
.review-sent td small { display: block; }
.review-sent thead th:nth-child(1) { width: 16%; }
.review-sent thead th:nth-child(2) { width: 18%; }
.review-sent thead th:nth-child(3) { width: 15%; }
.review-sent thead th:nth-child(4) { width: 25%; }
.review-sent thead th:last-child { width: 26%; }
.review-sent thead th { white-space: normal; }
.review-sent .badge { justify-self: start; height: auto; min-height: 20px; white-space: normal; text-align: start; }
.message-receipt > a.link::before { content: "·"; margin-inline-end: var(--space-2); color: var(--text-disabled); }
/* Admin → Review queue (docs/53 §5.5): the list across studios; an item's conversation beside its triage. */
.review-queue-counts { margin-bottom: var(--space-5); }
.review-queue-section { margin-bottom: var(--space-6); }
.review-queue-table th small, .review-queue-table td small { display: block; color: var(--text-tertiary); }
.review-queue-table thead th:nth-child(1) { width: 20%; }
.review-queue-table thead th:nth-child(2) { width: 18%; }
.review-queue-table thead th:nth-child(3) { width: 18%; }
.review-queue-table thead th:nth-child(4) { width: 24%; }
.review-queue-table thead th:last-child { width: 20%; }
.review-queue-table thead th { white-space: normal; }
.review-queue-table .badge { justify-self: start; height: auto; min-height: 20px; white-space: normal; text-align: start; }
.queue-back { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); }
.queue-triage, .queue-conversation, .queue-said { display: grid; gap: var(--space-3); }
.queue-triage h2, .queue-conversation h2, .queue-said h2 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.queue-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.queue-form .button { justify-self: start; }
.queue-triage > .button { justify-self: start; }
.queue-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.queue-ratings { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.queue-rating { display: grid; gap: var(--space-2); }
.queue-rating > p small { display: block; color: var(--text-tertiary); }
.queue-conversation .timeline { padding: 0; }
@media (max-width: 1279px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "main"; }
  .review-aside { position: static; }
  /* Above the reply, the panel stays short: what changed in two columns. */
  .review-aside .agent-changes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .review-aside .agent-changes .fact:nth-child(2) { border-top: 0; }
}
@media (max-width: 639px) {
  .rate-verdicts > form, .rate-verdicts > .rate-fix, .rate-verdicts .button--lg { width: 100%; }
  .rate-fix > summary { justify-content: center; }
}
.lead-cell { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
.lead-cell > .lead-link { min-width: 0; }
.lead-link { display: inline-flex; align-items: center; min-height: var(--control-md); font-weight: var(--weight-medium); color: var(--text-primary); border-radius: var(--radius-sm); }
.lead-link:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.lead-link[aria-current="true"] { color: var(--brand-text); }
.need-label, .owner-label { display: inline-flex; align-items: center; gap: var(--space-2); }
/* A tile or avatar sets the row's line, so a label with a glyph and one without sit on the same text line. */
.lead-cell, .need-label, .owner-label { vertical-align: middle; min-height: 22px; }
.need-label > .icon, .owner-label > .icon { color: var(--text-tertiary); }
.acceptance-label { display: block; margin-top: var(--space-0-5); }
.deadline { font-variant-numeric: tabular-nums; }
.task-table td small.tone-failure, .task-table td small.tone-attention { font-weight: var(--weight-medium); }
.task-table td small.tone-failure { color: var(--failure-text); }
.task-table .row-open { padding-inline: var(--space-1); text-align: end; }
.row-open .icon { transition: transform var(--duration-quick) var(--ease-out-quint); }
@media (hover: hover) { .task-table tbody tr:hover .row-open .icon { transform: translateX(2px); } }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md);
  color: var(--text-tertiary);
  transition: background-color var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard);
}
.icon-button:hover { background: var(--fill-ghost-hover); color: var(--text-primary); }

/* Selected task */
.task-panel { position: sticky; top: var(--space-4); }
.task-title { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.task-title > .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--text-secondary); }
.task-title > .tile { margin-top: 1px; }
.task-panel > .badge { margin-bottom: var(--space-1); }
.task-panel .facts { margin: var(--space-3) 0; padding-top: var(--space-1); box-shadow: inset 0 .5px 0 var(--border-default); }
.task-panel > .button, .task-panel > form { margin-top: var(--space-3); }
.task-panel > .notice { margin-top: var(--space-3); }

/* Command receipts use the system receipt; the staff page only spaces it. */
.command-result { margin-bottom: var(--space-4); }
[data-staff-command][aria-busy="true"], .guided-reply [aria-busy="true"] { cursor: progress; }
[data-staff-command][aria-busy="true"] .button--primary { --button-bg: var(--inverted-active); }
.is-stale [data-command-link] { pointer-events: none; color: var(--text-disabled); }
.is-stale [data-command-link].button { --button-bg: var(--disabled); --button-fg: var(--text-disabled); --button-shadow: none; }
.action-button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.action-button-row .button { white-space: normal; }
.action-unavailable .button { margin-top: var(--space-3); }

/* Conversation control and resolution */
.conversation-control h2 { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.control-description { color: var(--text-secondary); }
.conversation-control .facts { margin: var(--space-3) 0 0; }
.conversation-control .notice { margin-top: var(--space-3); }
.conversation-control > .button, .conversation-control > form { margin-top: var(--space-3); }
.conversation-control[data-action-confirmation] { box-shadow: var(--shadow-hairline), inset 0 0 0 1px var(--brand-border); outline: none; }
.resolution-record { margin-top: var(--space-4); padding-top: var(--space-4); box-shadow: inset 0 .5px 0 var(--border-default); }
.resolution-outcome {
  display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-lg); background: var(--confirmed-subtle); box-shadow: inset 0 0 0 .5px var(--confirmed-border);
}
.resolution-outcome > .icon { margin-top: 2px; color: var(--confirmed-text); }
.resolution-outcome strong { color: var(--confirmed-text); }
.resolution-outcome p { color: var(--text-secondary); font-size: var(--text-caption-lg); }
.resolution-record > h3 { margin: var(--space-4) 0 var(--space-1); color: var(--text-secondary); font-size: var(--text-caption-lg); }
.resolution-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.resolution-evidence { margin-top: var(--space-2); }
.resolution-evidence > p { color: var(--text-secondary); font-size: var(--text-caption-lg); }
.evidence-reference { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-caption-lg); }
.callback-section { margin-top: var(--space-4); padding-top: var(--space-4); box-shadow: inset 0 .5px 0 var(--border-default); }
.callback-section > h3 { margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }
.callback-section > p { color: var(--text-secondary); margin-top: var(--space-1); }
.callback-section form { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.callback-section [role="alert"] { color: var(--failure-text); }

/* Dialog content */
.action-dialog > form { display: flex; flex-direction: column; min-height: 0; }
.dialog-scope { display: inline-flex; margin-top: var(--space-2); padding: 0 var(--space-1-5); height: 20px; align-items: center; border-radius: var(--radius-sm); background: var(--fill); color: var(--text-secondary); font-size: var(--text-caption-lg); font-weight: var(--weight-medium); }
.dialog-heading h2:focus { outline: none; }
.dialog-body > .notice { margin-bottom: var(--space-3); }
.form-field { display: grid; gap: var(--space-1-5); margin-bottom: var(--space-4); min-width: 0; }
.form-field > label { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: var(--weight-medium); }
.form-field > label > span { color: var(--text-tertiary); font-size: var(--text-caption-lg); font-weight: var(--weight-regular); }
.form-field .fine-print { margin-top: 0; }
.evidence-field { margin: 0 0 var(--space-4); min-width: 0; }
.evidence-field legend { margin-bottom: var(--space-1-5); font-weight: var(--weight-medium); }
.evidence-choice {
  display: flex; align-items: flex-start; gap: var(--space-2-5); margin-bottom: var(--space-1-5);
  padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-lg);
  background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default);
  transition: background-color var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
.evidence-choice:hover { background: var(--fill); }
.evidence-choice:has(input:checked) { background: var(--fill-selected); box-shadow: inset 0 0 0 1px var(--brand-border); }
.evidence-choice input { margin-top: 2px; }
.evidence-choice > span { min-width: 0; }
.evidence-choice strong { display: block; }
.evidence-choice small { display: block; margin-top: var(--space-1); }
.evidence-excerpt { display: block; margin-top: var(--space-1); color: var(--text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---------- Lead workspace ---------- */
.lead-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-4);
  border-radius: var(--radius-2xl); background: var(--surface-panel); box-shadow: var(--shadow-hairline);
}
.lead-summary > div { display: flex; align-items: flex-start; gap: var(--space-2-5); min-width: 0; padding: var(--space-3) var(--space-4); }
.lead-summary > div + div { box-shadow: inset .5px 0 0 var(--border-default); }
.lead-summary > div > .icon { margin-top: 2px; color: var(--text-tertiary); }
.lead-summary span:not(.tile) { color: var(--text-secondary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.lead-summary strong { display: block; margin-top: var(--space-0-5); color: var(--text-primary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.lead-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--space-4); align-items: start; }
.lead-primary, .lead-evidence { min-width: 0; }
.lead-evidence { display: grid; gap: var(--space-3); }
.record-details { margin-top: var(--space-3); padding: 0 var(--space-4); border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default); }
.record-details > summary, .other-tasks > summary {
  display: flex; align-items: center; min-height: var(--control-xl); color: var(--text-secondary); font-weight: var(--weight-medium);
}
.record-details > summary::after, .other-tasks > summary::after {
  content: ""; margin-inline-start: auto; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.record-details[open] > summary::after, .other-tasks[open] > summary::after { transform: rotate(45deg); }
.record-details > summary:hover, .other-tasks > summary:hover { color: var(--text-primary); }
.record-details .facts { padding-bottom: var(--space-3); max-width: 520px; }

/* Conversation */
.conversation-panel { padding: 0; }
.conversation-panel > .panel-heading { margin: 0; padding: var(--space-3) var(--space-4); }
.conversation-panel > .panel-heading h2 { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.timeline-context {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2-5); color: var(--text-tertiary); font-size: var(--text-caption-lg);
  box-shadow: inset 0 -.5px 0 var(--border-default);
}
.conversation-panel > .notice { margin: var(--space-3) var(--space-4) 0; }
.timeline-pagination { padding: 0 var(--space-4); margin: 0 0 var(--space-3); }
.conversation-foot {
  display: grid; gap: var(--space-0-5); padding: var(--space-3) var(--space-4);
  box-shadow: inset 0 .5px 0 var(--border-default); color: var(--text-tertiary); font-size: var(--text-caption-lg);
}
.conversation-foot > span { display: flex; align-items: center; gap: var(--space-1-5); color: var(--text-secondary); font-weight: var(--weight-medium); }
.conversation-foot .icon { width: 14px; height: 14px; }

/* Evidence aside */
.evidence-panel > h2 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.evidence-panel > h2 .icon { color: var(--text-tertiary); }
.evidence-item + .evidence-item { margin-top: var(--space-3); padding-top: var(--space-3); box-shadow: inset 0 .5px 0 var(--border-default); }
.evidence-item > h3, .evidence-item > h4 { margin-bottom: var(--space-1); }
.evidence-item > p { margin-top: var(--space-1); }
.evidence-panel .notice { margin-top: var(--space-3); }
.empty-label { color: var(--text-secondary); }
.other-tasks { padding-block: 0; }
.other-tasks .evidence-item { padding-bottom: var(--space-3); }

/* ---------- Guided reply ---------- */
.guided-reply, .reply-result { margin: 0 var(--space-4) var(--space-4); padding: var(--space-4); border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default); scroll-margin-top: var(--space-6); outline: none; }
.reply-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.reply-heading h3 { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.reply-authority { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text-secondary); font-size: var(--text-caption-lg); }
.reply-authority .icon { width: 14px; height: 14px; }
.reply-target { color: var(--text-tertiary); font-size: var(--text-caption-lg); margin-bottom: var(--space-3); }
.reply-choices legend, .reply-label { display: block; margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--text-caption-lg); }
.reply-choices { display: grid; gap: var(--space-1-5); }
.reply-choices label {
  display: flex; align-items: center; gap: var(--space-2-5); min-height: var(--control-xl); padding: 0 var(--space-3);
  border-radius: var(--radius-lg); background: var(--surface-panel); box-shadow: var(--shadow-hairline), inset 0 0 0 .5px var(--border-default);
  transition: background-color var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
.reply-choices label:hover { background: var(--control-hover); }
.reply-choices label:has(input:checked) { background: var(--fill-selected); box-shadow: inset 0 0 0 1px var(--brand-border); }
.reply-selection { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-weight: var(--weight-medium); }
.reply-selection a { color: var(--brand-text); font-size: var(--text-caption-lg); font-weight: var(--weight-medium); }
.reply-selection a:hover { text-decoration: underline; text-underline-offset: 3px; }
.reply-preview { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-panel-strong); box-shadow: var(--shadow-hairline), inset 0 0 0 .5px var(--border-default); }
.reply-preview p { font-size: var(--text-body); line-height: var(--leading-body); max-width: var(--reading-max); overflow-wrap: anywhere; color: var(--text-paragraph); }
.reply-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.reply-gate { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--text-secondary); font-size: var(--text-caption-lg); font-weight: var(--weight-medium); }
.reply-gate .icon { width: 14px; height: 14px; }
.reply-help { margin-top: var(--space-3); color: var(--text-tertiary); font-size: var(--text-caption-lg); max-width: var(--reading-max); }
.reply-bottom .reply-help { margin-top: 0; }
.reply-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
.reply-status > .icon { margin-top: 3px; color: var(--attention-text); }
.reply-status h3, .reply-result h2 { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.reply-status p, .reply-result > div > p { margin-top: var(--space-0-5); color: var(--text-secondary); max-width: var(--reading-max); }
.reply-status .reply-evidence { margin-top: var(--space-2); color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.reply-result > .button { margin-top: var(--space-3); }
.reply-result[data-command-state="pending"] .reply-status > .icon { color: var(--info-text); }
.reply-result--confirmed { background: var(--confirmed-subtle); box-shadow: inset 0 0 0 .5px var(--confirmed-border); }
.reply-result--confirmed .reply-status > .icon, .reply-result--confirmed h3 { color: var(--confirmed-text); }
.reply-form-error { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--failure-subtle); color: var(--failure-text); }

/* ---------- Schedule ---------- */
.pending-table td small { display: block; margin-top: var(--space-1); color: var(--text-secondary); }
.pending-table .badge { max-width: 100%; }
.pending-note { margin: var(--space-4) 0 0; color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); max-width: 96ch; }
.pending-heading { margin-top: 0; }

/* ---------- Studio settings ---------- */
.page-tabs, .lead-tabs { margin: calc(-1 * var(--space-2)) 0 var(--space-5); }
.hours-sections { display: flex; width: fit-content; margin: calc(-1 * var(--space-1)) 0 var(--space-5); }
.studio-profile { margin-bottom: var(--space-4); }
.studio-profile .facts, .studio-profile .field-hint { margin-top: var(--space-2); }
.studio-profile .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); }
.studio-profile .fact + .fact { border-top: 0; }
@media (max-width: 899px) { .studio-profile .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The registry's profile (docs/53 §6.3): Giant Brands edits one section at a time. */
.studio-profile--edit { display: grid; gap: var(--space-4); }
.studio-profile--edit > .field-hint { margin-top: 0; }
.profile-form { display: grid; gap: var(--space-2-5); padding-top: var(--space-4); box-shadow: inset 0 .5px 0 var(--border-default); }
.profile-form h3 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.profile-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: start; gap: var(--space-3); }
.profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-group { display: grid; gap: var(--space-4); }

/* ---------- Setup (docs/53 §6.3) ---------- */
.page-heading > .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: none; }
.setup-progress { display: grid; gap: var(--space-1-5); justify-items: end; flex: none; width: 168px; }
.setup-progress strong { font-variant-numeric: tabular-nums; }
.setup-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; margin-bottom: var(--space-6); }
.setup-steps { list-style: none; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.setup-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-panel); box-shadow: var(--shadow-hairline); }
.setup-step-icon { display: inline-flex; padding-top: 2px; color: var(--text-tertiary); }
.setup-step[data-status="done"] .setup-step-icon { color: var(--confirmed-text); }
.setup-step[data-status="waiting"] .setup-step-icon { color: var(--text-secondary); }
.setup-step[data-status="unknown"] .setup-step-icon { color: var(--unknown-text); }
.setup-step h3 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.setup-step-line { margin-top: var(--space-0-5); color: var(--text-secondary); }
.setup-step-meta { margin-top: var(--space-1-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.setup-parts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; padding: 0; color: var(--text-secondary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.setup-parts li { display: inline-flex; align-items: center; gap: var(--space-1); }
.setup-parts .icon { width: 12px; height: 12px; color: var(--text-tertiary); }
.setup-parts li[data-done="true"] .icon { color: var(--confirmed-text); }
.setup-step-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-top: var(--space-2-5); }
.setup-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); min-width: 0; }
.setup-form--campaign .field { flex: 1 1 220px; min-width: 0; }
.setup-golive { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.setup-golive p { color: var(--text-secondary); }
.setup-golive .setup-form .field-hint { flex-basis: 100%; }
.setup-ids { margin-bottom: var(--space-4); }
.setup-ids .facts { margin-top: var(--space-2); }
.setup-checks-title { margin-top: var(--space-4); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.home-setup { margin-bottom: var(--space-4); }
.home-setup .link { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.studio-new-form { display: grid; gap: var(--space-5); max-width: 640px; }
.studio-new-group { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.studio-new-group legend { margin-bottom: var(--space-1); padding: 0; font-weight: var(--weight-semibold); }
.studio-new-form > .panel-actions { margin-top: 0; }
/* The sidebar card sits above the foot; its one-line bar is for the narrow header. */
.sidebar > .setup-card { flex: none; }
.sidebar > .setup-card--bar { display: none; }
@media (max-width: 1279px) { .setup-layout { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Desk & alerts (docs/53 §6.3, phase 4 part B) ---------- */
.desk-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.desk-panel { display: grid; gap: var(--space-3); min-width: 0; }
.desk-panel > .field-hint { margin-top: calc(-1 * var(--space-2)); }
.desk-group { display: grid; gap: var(--space-2); padding-top: var(--space-4); box-shadow: inset 0 .5px 0 var(--border-default); }
.desk-group h3, .desk-form h3 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.desk-group > p { color: var(--text-secondary); }
.desk-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); color: var(--text-secondary); }
.desk-recipients { list-style: none; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.desk-recipient { display: grid; gap: var(--space-1-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-inset); box-shadow: var(--shadow-hairline); min-width: 0; }
.desk-recipient-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5) var(--space-3); }
.desk-number { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.desk-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.desk-code { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.desk-code .field { width: 132px; }
.desk-code input { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
@media (max-width: 1279px) { .desk-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .page-heading:has(> .setup-progress) { flex-direction: column; } .setup-progress { justify-items: start; width: 100%; } }
.hours-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-4); align-items: start; }
.hours-editor, .hours-current, .facts-current, .facts-editor, .knowledge-editor { min-width: 0; }
.hours-current { position: sticky; top: var(--space-4); }
.hours-current > p { margin-top: var(--space-3); color: var(--text-secondary); }
.hours-current > p.muted { color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.hours-result {
  display: grid; gap: var(--space-0-5); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--confirmed-subtle); box-shadow: inset 0 0 0 .5px var(--confirmed-border);
}
.hours-result h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--confirmed-text); }
.hours-result p { color: var(--text-secondary); }
.hours-error { margin-bottom: var(--space-4); }
.panel .hours-error { margin-bottom: var(--space-3); }

.hours-day {
  display: grid; grid-template-columns: 104px auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-2-5) 0; margin: 0;
  box-shadow: inset 0 .5px 0 var(--border-default);
}
.hours-day > legend { float: left; grid-column: 1; grid-row: 1; padding: 0; font-weight: var(--weight-semibold); }
.hours-closed { grid-column: 2; grid-row: 1; }
.hours-unset { grid-column: 3; grid-row: 1; color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.hours-day > .hours-add { grid-column: 4; grid-row: 1; justify-self: end; }
.hours-day > [data-hours-windows] { grid-column: 2 / -1; grid-row: 2; }
.hours-closed, .hours-midnight { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); color: var(--text-secondary); white-space: nowrap; }
[data-hours-windows] { display: grid; gap: var(--space-2); }
.hours-window { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-2-5); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default); }
.hours-time { display: inline-flex; align-items: center; gap: var(--space-2); }
.hours-time label { color: var(--text-secondary); }
.hours-time input { --field-h: var(--control-md); width: 128px; }
.hours-midnight { font-size: var(--text-caption-lg); }
.hours-window > .hours-remove { margin-inline-start: auto; }
.hours-effective-day {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-2) 0; box-shadow: inset 0 -.5px 0 var(--border-default);
}
.hours-effective-day span { text-align: end; font-variant-numeric: tabular-nums; }
.hours-effective-day strong { font-weight: var(--weight-medium); }
.hours-effective-day span { color: var(--text-secondary); }
.hours-effective-day span .button { margin-inline-start: var(--space-2); }
.hours-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hours-editor .pending-note { margin-top: var(--space-4); }
/* The weekly form (docs/54): each day's Open and Staffed sides, side by side when there is room. */
.hours-layout--week { grid-template-columns: minmax(0, 1fr); }
.hours-layout--week .hours-current { position: static; }
.week-copy {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); background: var(--surface-inset); box-shadow: var(--shadow-hairline); color: var(--text-secondary);
}
.week-copy > label { color: var(--text-primary); font-weight: var(--weight-medium); }
.week-copy .select-control { width: 148px; }
.week-day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); padding: var(--space-3) 0; box-shadow: inset 0 .5px 0 var(--border-default); }
.week-day > legend { float: left; grid-column: 1 / -1; font-weight: var(--weight-semibold); }
.week-side { display: grid; align-content: start; gap: var(--space-2); min-width: 0; container: week-side / inline-size; }
.week-side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); }
.week-side-title { min-width: 64px; color: var(--text-secondary); font-size: var(--text-caption-lg); font-weight: var(--weight-medium); }
.week-side > .hours-unset { grid-column: auto; grid-row: auto; }
.week-side-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.week-side .hours-window { display: grid; grid-template-columns: minmax(96px, 128px) auto minmax(96px, 128px) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.week-side .hours-time { display: block; min-width: 0; }
.week-side .hours-time input { width: 100%; }
.week-side .hours-window > .hours-remove { margin-inline-start: 0; }
.hours-to { color: var(--text-tertiary); }
.week-table { table-layout: fixed; }
.week-table thead th:first-child { width: 26%; }
.week-table tbody th { overflow-wrap: normal; }
.hours-editor .week-table { margin-top: var(--space-2); }
@media (max-width: 899px) { .week-day { grid-template-columns: minmax(0, 1fr); } }
/* A side too narrow for one window row (about 420 px) puts the midnight box and remove on a second row. */
@container week-side (max-width: 439px) {
  .week-side .hours-window { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .week-side .hours-midnight { grid-column: 1 / 3; grid-row: 2; }
  .week-side .hours-window > .hours-remove { grid-column: 3; grid-row: 2; justify-self: end; }
}
@media (max-width: 639px) {
  .week-table thead th:first-child { width: 32%; }
  .week-table th, .week-table td { padding-inline: var(--space-2); }
}

.closure-form > p { color: var(--text-secondary); }
.closure-form > label { display: block; margin: var(--space-4) 0 var(--space-1-5); font-weight: var(--weight-medium); }
.closure-form > h3 { margin: var(--space-4) 0 var(--space-1); color: var(--text-secondary); font-size: var(--text-caption-lg); }
.closure-add { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default); }
.closure-add > legend { float: left; width: 100%; padding: 0; font-weight: var(--weight-semibold); }
.closure-add > div { display: grid; gap: var(--space-1-5); }
.closure-add label { color: var(--text-secondary); }
.closure-add input { --field-h: var(--control-md); width: 180px; }
.closure-reason { white-space: pre-wrap; overflow-wrap: anywhere; }
.closure-form .muted { margin-top: var(--space-1-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); }

.facts-intro { max-width: var(--reading-max); margin-bottom: var(--space-4); color: var(--text-secondary); }
.facts-layout, .knowledge-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; }
.facts-current > h2 { margin-bottom: var(--space-1); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.fact-current { padding: var(--space-4) 0; box-shadow: inset 0 -.5px 0 var(--border-default); }
.fact-current:last-of-type { box-shadow: none; }
.fact-current h3 { font-weight: var(--weight-semibold); }
.fact-current .hours-actions { justify-content: flex-start; margin-top: var(--space-2); }
.knowledge-answer { margin: var(--space-1-5) 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-paragraph); font-size: var(--text-body); line-height: var(--leading-body); max-width: var(--reading-max); }
.fact-empty { margin: var(--space-1-5) 0; }
.fact-current .muted, .knowledge-card .muted { color: var(--text-tertiary); font-size: var(--text-caption-lg); overflow-wrap: anywhere; }
.knowledge-source { margin-top: var(--space-1-5); }
.knowledge-source > summary {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm);
  color: var(--text-secondary); font-size: var(--text-caption-lg); font-weight: var(--weight-medium);
}
.knowledge-source > summary::before {
  content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-smooth-out); margin-inline-end: var(--space-1);
}
.knowledge-source[open] > summary::before { transform: rotate(45deg); }
.knowledge-source[open] > summary { color: var(--text-primary); }
.knowledge-source p { font-family: var(--font-mono); font-size: var(--text-caption-lg); }
.facts-editor, .knowledge-editor { position: sticky; top: var(--space-4); }
.facts-editor form, .knowledge-editor form { display: grid; gap: var(--space-1-5); }
.facts-editor form > label, .knowledge-editor form > label { margin-top: var(--space-3); font-weight: var(--weight-medium); }
.facts-editor form > label:first-of-type, .knowledge-editor form > label:first-of-type { margin-top: 0; }
.facts-editor form > h3, .knowledge-editor form > h3 { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-caption-lg); }
.facts-editor > p, .knowledge-editor > p { color: var(--text-secondary); margin-top: var(--space-2); }
.knowledge-editor > h2, .facts-editor > h2 { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.facts-editor .muted, .knowledge-editor .muted { color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.fact-comparison { padding: var(--space-3); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default); }
.fact-comparison h3 { color: var(--text-secondary); font-size: var(--text-caption-lg); }
.fact-withdraw-note { padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-lg); background: var(--attention-subtle); color: var(--attention-text); box-shadow: inset 0 0 0 .5px var(--attention-border); }
.knowledge-sources { display: grid; gap: var(--space-3); min-width: 0; }
.knowledge-sources > .section-heading { margin-bottom: 0; }
.knowledge-card-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.knowledge-card h2 { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.knowledge-card .hours-actions { justify-content: flex-start; margin-top: var(--space-3); }
.knowledge-empty { padding: 0; }

/* ---------- Failure pages ----------
   The server page wraps an empty state; client.js builds a bare h1, p and link inside a minimal frame. */
.failure-page { padding: var(--space-16) var(--space-4); }
.failure-page .empty-state { max-width: 440px; }
.app-frame--minimal > .failure-page, .app-frame--minimal > .failure-page > #command-result {
  display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center;
}
.app-frame--minimal > .failure-page { min-height: calc(100dvh - var(--space-2)); padding-top: 24dvh; }
.app-frame--minimal > .failure-page h1 { font-size: var(--text-body); line-height: var(--leading-body); }
.app-frame--minimal > .failure-page .fine-print { margin: 0 0 var(--space-2); font-size: var(--text-body-sm); max-width: 44ch; }
.app-frame--minimal > .failure-page[aria-busy="true"] > p { color: var(--text-secondary); }

/* ---------- Sign-in pages (docs/43) ----------
   One centred column on the shell surface. Clerk's card draws inside .auth-mount from the same role tokens. */
.auth-frame { min-height: 100dvh; background: var(--surface-shell); }
.auth-main { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); min-height: 100dvh; padding: 12dvh var(--space-4) var(--space-6); }
.auth-wordmark { margin: 0; padding: 0; }
.auth-panel { display: grid; justify-items: center; gap: var(--space-4); width: min(100%, 400px); }
.auth-card { width: min(100%, 400px); }
.auth-panel[data-sign-in="account"] { width: min(100%, 880px); }
.auth-state { padding: var(--space-6) var(--space-2) var(--space-4); }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.auth-state .auth-actions .button { margin-top: 0; }
.auth-status { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg); color: var(--text-secondary); }
.auth-mount { display: grid; justify-items: center; width: 100%; }
.auth-mount:empty { display: none; }
.auth-failure { display: grid; justify-items: center; gap: var(--space-1); width: 100%; }
.auth-failure .notice { width: 100%; }
.auth-note { max-width: 40ch; color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); text-align: center; }
.auth-foot { display: grid; justify-items: center; gap: var(--space-3); margin-top: auto; color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.auth-foot .theme-switch { width: 220px; }

/* ---------- Command palette ---------- */
.page-palette { width: min(560px, calc(100% - 32px)); max-height: min(520px, calc(100dvh - 96px)); margin-top: 12dvh; }
.palette-top { display: flex; align-items: center; gap: var(--space-2-5); padding: 0 var(--space-3) 0 var(--space-4); box-shadow: inset 0 -.5px 0 var(--border-default); }
.palette-top > .icon { color: var(--text-tertiary); }
#page-query {
  --field-h: 48px; flex: 1; padding: 0; background: transparent; box-shadow: none; outline: none;
  font-size: var(--text-body); line-height: var(--leading-body);
}
#page-query:focus-visible { outline: none; box-shadow: none; }
.palette-top:has(#page-query:focus-visible) { box-shadow: inset 0 -2px 0 var(--border-focus); }
.palette-description { padding: var(--space-2) var(--space-4) 0; color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.palette-results { display: grid; gap: 0; padding: var(--space-1-5); overflow-y: auto; overscroll-behavior: contain; }
.palette-results a {
  display: flex; align-items: center; gap: var(--space-2-5); min-height: 40px; padding: 0 var(--space-2-5);
  border-radius: var(--radius-lg); color: var(--text-primary);
}
.palette-results a > .icon:first-child { color: var(--text-tertiary); }
.palette-results a > span:first-of-type { flex: 1; display: flex; align-items: baseline; gap: var(--space-2); }
.palette-results small { color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.palette-results a:is(:hover, .is-highlighted) :is(small, .palette-status) { color: var(--text-secondary); }
.palette-results a > .icon:last-child { width: 14px; height: 14px; color: var(--text-tertiary); opacity: 0; transition: opacity var(--duration-quick) var(--ease-standard); }
.palette-results a:hover, .palette-results a.is-highlighted { background: var(--fill-ghost-hover); }
.palette-results a:hover > .icon:last-child, .palette-results a.is-highlighted > .icon:last-child { opacity: 1; }
.palette-status { color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.palette-empty { padding: var(--space-6) var(--space-4); color: var(--text-secondary); text-align: center; }
.palette-foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); color: var(--text-tertiary); font-size: var(--text-caption-lg); box-shadow: inset 0 .5px 0 var(--border-default); }
.palette-foot span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Unified demo toolbar ---------- */
.demo-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default);
}
.demo-run { display: flex; align-items: center; gap: var(--space-2-5); flex: 1; min-width: 220px; }
.demo-run > .icon { color: var(--info-text); }
.demo-run strong { display: block; font-weight: var(--weight-semibold); }
.demo-run span { display: block; color: var(--text-tertiary); font-size: var(--text-caption-lg); }
.demo-actions { display: flex; gap: var(--space-1-5); }

/* ---------- Live views ----------
   client.js re-reads in place. New entries settle in; the indicator never pulses. */
@media (prefers-reduced-motion: no-preference) {
  .live-label::before { transition: background-color var(--duration-fast) var(--ease-standard); }
  .timeline > .is-new { animation: t-reveal var(--duration-slow) var(--ease-smooth-out) both; }
}
.timeline > .is-new .message-bubble { box-shadow: var(--shadow-hairline), inset 0 0 0 1px var(--brand-border); }

/* ---------- Arrival (motion.js) ----------
   motion.js marks #staff-app once, after a swap the person caused, never after a live re-read: fx-route for another
   page, fx-tab for the same page under another filter, fx-select for another task in the queue. The next swap
   replaces the frame and with it the class, so nothing replays. A live re-read marks only rows it had not shown. */
@media (prefers-reduced-motion: no-preference) {
  .fx-route .page-body > * { animation: t-rise var(--duration-medium) var(--ease-out-quint) both; }
  .fx-route .page-body > :nth-child(2) { animation-delay: var(--duration-stagger); }
  .fx-route .page-body > :nth-child(3) { animation-delay: calc(2 * var(--duration-stagger)); }
  .fx-route .page-body > :nth-child(n + 4) { animation-delay: calc(3 * var(--duration-stagger)); }
  /* Tiles rise on their own, not inside a rising section; a tab strip the person just used stays put. */
  .fx-route .page-body > :has(> .result-tiles), .fx-route .page-body > .tabs { animation: none; }
  .fx-route .result-tiles > * { animation: t-rise var(--duration-medium) var(--ease-out-quint) calc(3 * var(--duration-stagger)) both; }
  .fx-route .result-tiles > :nth-child(n + 5) { animation-delay: calc(4 * var(--duration-stagger)); }
  /* The tabs just used, Home's numbers and the queue's own heading and filter stay put; the content under them moves. */
  .fx-tab .page-body > :not(.page-heading, .queue-toolbar, .leads-filters, .page-tabs, .hours-sections, .home-today, .home-upcoming, .home-queue),
  .fx-tab .home-queue > :not(.section-heading, .queue-toolbar) { animation: t-rise var(--duration-fast) var(--ease-out-quint) both; }
  .fx-select .task-panel { animation: t-slide-in var(--duration-fast) var(--ease-out-quint) both; }
  :is(.fx-route, .fx-tab) .spark rect { transform-box: fill-box; transform-origin: bottom; animation: t-grow-y var(--duration-very-slow) var(--ease-out-quint) calc(3 * var(--duration-stagger)) both; }
  :is(.fx-route, .fx-tab) .spark rect:nth-child(n + 8) { animation-delay: calc(4 * var(--duration-stagger)); }
  :is(.fx-route, .fx-tab) .spark rect:nth-child(n + 15) { animation-delay: calc(5 * var(--duration-stagger)); }
  :is(.fx-route, .fx-tab) .spark rect:nth-child(n + 22) { animation-delay: calc(6 * var(--duration-stagger)); }
  .page-body tbody > tr.is-new { animation: t-wash var(--duration-settle) var(--ease-out-quint) both; }
  .timeline > .is-new .message-bubble { animation: t-wash var(--duration-settle) var(--ease-out-quint) both; }
  /* Miisk's bubble already rests on the brand tint, so its wash starts a step stronger. */
  .timeline > .is-new[data-author="miisk"] .message-bubble { --wash: var(--brand-border); }
  /* A read-back that just turned applied: the record already says so, the ring and check only point at it. */
  #command-result.fx-applied { --ring: var(--confirmed-border); animation: t-ring var(--duration-settle) var(--ease-out-quint) both; }
  #command-result.fx-applied > .icon, #command-result.fx-applied .reply-status > .icon { animation: t-pop 420ms var(--ease-spring) both; }
}
.is-loading .refresh-button .icon { animation: spinner-turn 900ms var(--ease-linear) infinite; }

/* ---------- Touch ---------- */
@media (pointer: coarse) {
  .nav-more, .breadcrumb-inline, .knowledge-source > summary, .record-details > summary, .other-tasks > summary, .reply-selection a { min-height: var(--touch-target); }
  .nav-more, .reply-selection a { display: inline-flex; align-items: center; }
  .user-menu-trigger, .nav-account .menu-item { min-height: var(--touch-target); }
}

/* ---------- Responsive ---------- */
@media (min-width: 1600px) { .main-content { padding-inline: var(--space-10); } }
@media (max-width: 1279px) {
  :root { --sidebar-width: 232px; }
  .main-content { padding-inline: var(--space-6); }
  .queue-layout, .hours-layout, .facts-layout, .knowledge-layout { grid-template-columns: minmax(0, 1fr); }
  .lead-layout { grid-template-columns: minmax(0, 1fr) 288px; }
  .task-panel, .hours-current, .facts-editor, .knowledge-editor { position: static; }
  .queue-layout > .task-panel .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .queue-layout > .task-panel .fact + .fact { border-top: 0; }
  .queue-layout > .task-panel .button--wide { width: auto; }
  .leads-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leads-search, .leads-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .result-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-panels { grid-template-columns: minmax(0, 1fr); }
  .app-frame { display: block; padding: 0 var(--space-2) var(--space-2); }
  .sidebar {
    position: relative; top: auto; height: auto;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-1) var(--space-2);
  }
  .sidebar-head { grid-column: 1; grid-row: 1; }
  .scope-form { grid-column: 2; grid-row: 1; max-width: 280px; justify-self: end; width: 100%; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
  .scope-label { padding: 0; }
  .sidebar-navigation { grid-column: 3; grid-row: 1; margin: 0; padding: 0; overflow: visible; position: relative; mask-image: none; }
  .sidebar-navigation > summary {
    display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-md); padding: 0 var(--space-2-5);
    border-radius: var(--radius-lg); background: var(--control); box-shadow: var(--shadow-hairline); color: var(--text-primary); font-weight: var(--weight-medium);
  }
  .sidebar-navigation > summary .icon { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-smooth-out); }
  .sidebar-navigation[open] > summary .icon { transform: rotate(180deg); }
  .sidebar-navigation > nav {
    position: absolute; z-index: var(--layer-overlay); inset-inline-end: 0; top: calc(100% + var(--space-1-5));
    width: min(320px, calc(100vw - 24px)); max-height: 70dvh; overflow-y: auto; padding: var(--space-1-5);
    border-radius: var(--radius-xl); background: var(--surface-overlay); box-shadow: var(--shadow-raised);
  }
  .page-finder { grid-column: 1 / -1; grid-row: 2; }
  /* Several organizations: Studio sits under Organization in the same column, the page finder under both. */
  .scope-form--org + .scope-form { grid-row: 2; }
  .scope-form--org ~ .page-finder { grid-row: 3; }
  .scope-form--org, .scope-form--org + .scope-form { grid-template-columns: 5rem minmax(0, 1fr); }
  .nav-more { display: none !important; }
  .sidebar-foot { display: none; }
  .sidebar > .setup-card:not(.setup-card--bar) { display: none; }
  .sidebar > .setup-card--bar { display: grid; grid-column: 1 / -1; }
  .nav-theme, .nav-account { display: block; margin-top: var(--space-2); padding: var(--space-2) var(--space-1) var(--space-1); box-shadow: inset 0 .5px 0 var(--border-default); }
  .nav-account .user-menu-trigger { margin: 0 0 var(--space-1); padding-inline: var(--space-1); }
  .main-content { margin: 0; min-height: 0; padding: var(--space-3) var(--space-5) var(--space-5); border-radius: var(--radius-2xl); }
  .lead-layout { grid-template-columns: minmax(0, 1fr); }
  .lead-layout > .lead-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .workspace-bar { margin-bottom: var(--space-4); }
  .demo-actions { width: 100%; }
}
@media (max-width: 639px) {
  .app-frame { padding: 0 var(--space-1) var(--space-1); }
  .sidebar { grid-template-columns: auto minmax(0, 1fr); }
  .scope-form { grid-column: 1 / -1; grid-row: 2; max-width: none; justify-self: stretch; }
  .sidebar-navigation { grid-row: 1; justify-self: end; }
  .sidebar { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .page-finder { grid-column: 3; grid-row: 1; width: var(--control-md); padding: 0; justify-content: center; }
  .page-finder > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-finder kbd { display: none; }
  .scope-form--org + .scope-form { grid-row: 3; }
  .scope-form--org ~ .page-finder { grid-row: 1; }
  .sidebar-navigation { grid-column: 4; }
  [data-page-kind]:not([data-page-kind="lead"]) .workspace-bar .breadcrumb { display: none; }
  .queue-filter { mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); padding-inline-end: var(--space-5); }
  .workspace-bar { justify-content: flex-end; margin-bottom: var(--space-3); }
  .page-tabs { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); padding-inline-end: var(--space-6); }
  .main-content { padding: var(--space-3) var(--space-4) var(--space-4); }
  .workspace-bar { flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-caption-lg); }
  .page-heading { gap: var(--space-3); }
  .queue-toolbar .timezone { width: 100%; }
  .filter-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .filter-form label { grid-column: 1 / -1; }
  .filter-form select { min-width: 0; }
  .leads-filters { grid-template-columns: minmax(0, 1fr); }
  .leads-filter-actions .button { flex: 1; }
  .results-range-form .field { flex: 1 1 140px; }

  /* Tables become labelled records. */
  .table-surface { background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
  .task-table, .task-table tbody { display: block; }
  .task-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .task-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-2); padding: var(--space-3);
    border-radius: var(--radius-xl); background: var(--surface-container); box-shadow: var(--shadow-hairline);
  }
  .task-table tr.is-selected { box-shadow: var(--shadow-hairline), inset 0 0 0 1px var(--brand-border); }
  .task-table tbody th, .task-table td { padding: 0; box-shadow: none !important; }
  .task-table tbody th { grid-column: 1; grid-row: 1; }
  .task-table td { grid-column: 1 / -1; }
  .task-table td[data-label] { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-0-5) var(--space-3); }
  .task-table td[data-label]::before { content: attr(data-label); color: var(--text-tertiary); font-size: var(--text-caption-lg); padding-top: 2px; }
  .task-table td small { grid-column: 2; margin-top: 0; }
  .task-table td.row-open { grid-column: 2; grid-row: 1; padding: 0; }
  /* Results records pair their counts, two to a row. */
  .results-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .results-table tbody th { grid-column: 1 / -1; }
  .results-table td { grid-column: auto; }
  .results-table td[data-label] { grid-template-columns: 72px minmax(0, 1fr); }
  .results-table td.numeric { text-align: start; }
  .ops-table td[data-label] { grid-template-columns: 120px minmax(0, 1fr); }
  .lead-link { min-height: var(--touch-target); font-size: var(--text-body); }
  .icon-button { width: var(--touch-target); height: var(--touch-target); }

  .lead-summary { grid-template-columns: minmax(0, 1fr); }
  .lead-summary > div + div { box-shadow: inset 0 .5px 0 var(--border-default); }
  .lead-layout > .lead-evidence { grid-template-columns: minmax(0, 1fr); }
  .queue-layout > .task-panel .facts { display: grid; grid-template-columns: minmax(0, 1fr); }
  .queue-layout > .task-panel .fact + .fact { border-top: var(--hairline) solid var(--border-default); }
  .queue-layout > .task-panel .button--wide { width: 100%; }
  .timeline { padding: var(--space-3); }
  .message { max-width: 94%; }
  .guided-reply, .reply-result { margin: 0 var(--space-3) var(--space-3); padding: var(--space-3); }
  .reply-bottom { flex-direction: column; align-items: stretch; }
  .reply-bottom .button, .reply-result > .button { width: 100%; }
  .action-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .dialog-footer .button { flex: 1; }
  .hours-day { grid-template-columns: minmax(0, 1fr) auto; }
  .hours-day > legend { grid-column: 1; grid-row: 1; }
  .hours-closed { grid-column: 1; grid-row: 2; }
  .hours-day > .hours-add { grid-column: 2; grid-row: 1; align-self: center; }
  .hours-unset { grid-column: 1 / -1; grid-row: 3; }
  .hours-day > [data-hours-windows] { grid-column: 1 / -1; grid-row: 4; }
  .hours-time input { width: 100%; }
  .hours-time { flex: 1 1 140px; }
  .page-palette { margin-top: var(--space-4); width: calc(100% - 16px); }
  .palette-foot { display: none; }
  .page-footer { text-align: start; }
  .freshness { flex-direction: column; }
  .failure-page { padding: var(--space-8) 0; }
}

@media (forced-colors: active) {
  .nav-link.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .main-content, .lead-summary, .command-result { border: 1px solid CanvasText; }
}