/*
 * components.css — Reusable component patterns
 *
 * Phase C of design system architecture refactor (2026-05-20).
 * Governing SOW: ThomOS/Merlin/Scopes/SOW_design_system_architecture_2026-05-20.md
 *
 * Loaded AFTER tokens.css, mpower.css, base.css, layout.css. Loaded BEFORE
 * pro-t.css during transition — components migrate from pro-t.css into
 * this file across Phase C PRs.
 *
 * Owns: every reusable visual pattern paired with a Django partial in
 * templates/components/. Page-specific styling (per-page <style> blocks)
 * does NOT live here — that's local to the page.
 *
 * Discipline:
 *   - NO !important declarations. components.css loads after mpower.css
 *     and uses same-specificity cascade. Authoritative.
 *   - Each component section maps to one partial in templates/components/.
 *   - All values reference tokens (var(--pro-*)); no hardcoded hex.
 *   - Comments name the partial and document any non-obvious behavior.
 *
 * Phase C PR sequence:
 *   C-1: Foundation (page_header, card, pill) — this PR
 *   C-2: Dashboard (metric_tile, data_table, completion_bar)
 *   C-3: Chart family (bar_chart_horizontal, bar_chart_vertical, bar_chart_time)
 *   C-4: Filter family (filter_bar, time_selector)
 *   C-5: Shell (sidebar_nav, topnav)
 */

/* =================================================================
 * CARD-TITLE override
 * Paired with: templates/components/card.html
 *
 * mpower.css defines .card-title base styling (font-size, font-weight,
 * color, margin). This rule layers the PRO-T typography on top —
 * Source Serif → DM Sans family via tokens, slight negative tracking
 * for editorial weight at 16px.
 *
 * Local <style> blocks that redefine .card-title (e.g., training_compliance
 * eyebrow style) still win via cascade order (page-local <style> tag loads
 * after components.css).
 * ================================================================= */
.card-title {
  font-family: var(--pro-serif);
  letter-spacing: -0.005em;
}

/* =================================================================
 * PILL system — status and category indicators
 * Paired with: templates/components/pill.html
 *
 * Two emphasis levels × five semantic colors.
 *   .pill.solid — solid background, light text (status: Done, Failed, Live)
 *   .pill.soft  — tinted background, dark text (category: BETA, Active, Planned)
 *
 * Tokens consumed: --pro-success, --pro-warning, --pro-error, --pro-info,
 * --pro-neutral (solid backgrounds) and --pro-*-bg variants (soft backgrounds).
 * --pro-bg for solid text color (cream against colored backgrounds).
 * ================================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

.pill.solid           { color: var(--pro-bg); }
.pill.solid.success   { background: var(--pro-success); }
.pill.solid.warning   { background: var(--pro-warning); }
.pill.solid.error     { background: var(--pro-error); }
.pill.solid.info      { background: var(--pro-info); }
.pill.solid.neutral   { background: var(--pro-neutral); }

.pill.soft.success    { background: var(--pro-success-bg); color: var(--pro-success); }
.pill.soft.warning    { background: var(--pro-warning-bg); color: var(--pro-warning); }
.pill.soft.error      { background: var(--pro-error-bg);   color: var(--pro-error); }
.pill.soft.info       { background: var(--pro-info-bg);    color: var(--pro-info); }
.pill.soft.neutral    { background: var(--pro-neutral-bg); color: var(--pro-neutral); }

/* =================================================================
 * METRIC TILE — dashboard metric strip
 * Paired with: templates/components/metric_tile.html
 *
 * Canonical values reflect the latest operator-validated tuning
 * (owner_production.html, 2026-05-20): 24px / 600 weight / -0.015em
 * tracking. Quieter than the page title (30px / 700 / -0.025em) so
 * metric strips don't compete with the page anchor.
 *
 * The .metric-grid wrapper auto-fills tiles into responsive columns.
 * .metric-top-producer variant has primary border + smaller font for
 * long-name displays (Top Producer name vs. dollar amounts).
 * ================================================================= */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.metric-box {
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  padding: var(--space-lg);
  text-align: center;
}
.metric-value {
  font-family: var(--pro-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--pro-primary);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.metric-label {
  font-size: 11px;
  color: var(--pro-text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Variant: Top Producer (primary border + smaller font for long names) */
.metric-box.metric-top-producer {
  border-color: var(--pro-primary);
}
.metric-box.metric-top-producer .metric-value {
  font-size: 15px;
  letter-spacing: -0.008em;
}

/* Variant: Error (e.g., canceled counts) */
.metric-box.metric-error {
  border-color: var(--pro-error);
}
.metric-box.metric-error .metric-value {
  color: var(--pro-error);
}

/* Variant: Clickable — tile is a navigation link. Pair with <a class="metric-box metric-clickable" href="..."> */
.metric-box.metric-clickable {
  /* tier: clickable */
  /* register: uniform-grid */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.16);
  transition: background 0.15s, border-color 0.15s;
}
.metric-box.metric-clickable:hover {
  /* tier: clickable / register: uniform-grid */
  background: var(--pro-bg);
  border-color: var(--pro-border-strong);
}

/* =================================================================
 * DATA TABLE — sortable data table pattern
 * Paired with: templates/components/data_table.html
 *
 * Canonical values reflect the latest operator-validated tuning
 * (openings/closings/owner_production, 2026-05-20). Uppercase tracked
 * column headers in DM Sans. Numeric cells in JetBrains Mono via
 * .num class. Navy-tinted row hover.
 *
 * Wrap tables in <div style="overflow-x: auto;"> for horizontal scroll
 * safety on narrow viewports.
 * ================================================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--pro-border);
  color: var(--pro-text-muted);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.data-table th:hover {
  color: var(--pro-primary);
}
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--pro-border);
  color: var(--pro-text);
}
.data-table tr:hover td {
  background: rgba(46, 86, 135, 0.04);
}
.data-table .num {
  text-align: right;
  font-family: var(--pro-mono);
  font-variant-numeric: tabular-nums;
}

/* Truncation utility — caps column width, ellipsis-clips overflow.
 * Pair with title attribute on the cell for hover-reveal of full value. */
.data-table .col-truncate {
  max-width: 35ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =================================================================
 * COMPLETION BAR — green/red split indicator
 * Paired with: templates/components/completion_bar.html
 *
 * Use for "done vs open" / "completed vs pending" / "filled vs unfilled"
 * surfaces. Extracted from pro-t.css (was earlier addition).
 * ================================================================= */
.completion-bar {
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}
.completion-bar .done { background: var(--pro-success); height: 100%; }
.completion-bar .open { background: var(--pro-error);   height: 100%; }

.completion-stats {
  display: flex;
  gap: 16px;
  font-size: 11px;
  margin-top: 8px;
}
.completion-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pro-text-secondary);
}
.completion-stat .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.completion-stat .num {
  font-family: var(--pro-mono);
  font-weight: 600;
  color: var(--pro-text);
}

/* =================================================================
 * TOOL CARD — landing tile (clickable card with icon + title + desc + badge)
 * Paired with: templates/components/tool_card.html
 *
 * Used on landing pages for "pick a room" navigation. Three-column grid
 * layout (icon | text content | badge). Extracted from pro-t.css; the
 * !important markers there are dropped — components.css loads after
 * mpower.css and same-specificity cascade wins.
 *
 * Variants:
 *   .badge-live    — primary navy background (active feature)
 *   .badge-coming  — muted cream background (planned / preview)
 *   :has(.badge-coming) — hides the icon emphasis (icon background muted)
 * ================================================================= */
.card-grid {
  display: grid;
  /* Fixed 360px columns (not minmax + 1fr) so cards have uniform WIDTH across
   * all landing pages regardless of how many fit per row. Trade-off: wide
   * viewports with few cards have empty right-side space; that's intentional.
   * auto-fit wraps responsively on narrow viewports. */
  grid-template-columns: repeat(auto-fit, 360px);
  gap: 14px;
  background: transparent;
}

.tool-card {
  /* tier: clickable */
  /* register: uniform-grid */
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: start;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.16);
  text-decoration: none;
  color: inherit;
}

.tool-card:hover {
  /* tier: clickable / register: uniform-grid */
  background: var(--pro-bg);
  border-color: var(--pro-border-strong);
}

.tool-card-icon {
  color: var(--pro-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.tool-card-title {
  font-family: var(--pro-serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 3px 0;
  color: var(--pro-text);
  letter-spacing: -0.005em;
  grid-column: 2;
  grid-row: 1;
}

.tool-card-desc {
  font-family: var(--pro-sans);
  font-size: 12.5px;
  color: var(--pro-text-secondary);
  margin: 0;
  line-height: 1.5;
  grid-column: 2 / -1;
  grid-row: 2;
  /* Cap at 3 lines so cards have uniform height across landing pages.
   * Longer descriptions ellipsis-truncate. Promoted 2026-05-24 from amy.html
   * page-local trial during landing-pages-tool-card-migration. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-card-badge {
  font-family: var(--pro-sans);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  position: static;
  top: auto;
  right: auto;
}

.tool-card-badge.badge-live,
.badge-live {
  background: var(--pro-primary);
  color: var(--pro-bg);
}

.tool-card-badge.badge-coming,
.badge-coming {
  background: var(--pro-sidebar-bg);
  color: var(--pro-text-muted);
  border: 1px solid var(--pro-border-strong);
}

/* Some items live, others placeholder — used for category tiles whose
 * landing page mixes live + coming-soon children (e.g., Finance Operations
 * has Chase + FedEx live but QuickBooks placeholder). Added 2026-05-24. */
.tool-card-badge.badge-partial,
.badge-partial {
  background: var(--pro-warning);
  color: var(--pro-bg);
}

/* Tools with "Coming" badges get a muted icon — gray-faded but legible.
 * Drops the prior tan background highlight (vestigial from when
 * .tool-card-icon was a 36px filled navy button). The icon now reads as
 * not-active via color shift to muted text. */
.tool-card:has(.badge-coming) .tool-card-icon {
  color: var(--pro-text-muted);
}

/* =================================================================
 * CHART FAMILY — derived from the Refined Navy palette exploration
 * (2026-05-20_color_palettes.html). Four chart-family components:
 *   .pro-bar-h-*       horizontal track-bar (ranked lists, distributions)
 *   .pro-bar-v-*       vertical bar column (time series, year ladders)
 *   .pro-bar-v-time-*  vertical bar with click-filter + tooltip (dashboard time selectors)
 *   .pro-bar-stacked   two-or-more segment stacked horizontal (share splits, SLA bars)
 *
 * Plus chart card wrapper (.pro-chart-card) for chart sections inside cards.
 *
 * Numeric values default to JetBrains Mono via --pro-mono.
 * State modifiers: .selected (click-filter active), .dimmed (filtered out).
 * Extracted from pro-t.css; !important markers dropped — components.css
 * cascade-wins after mpower.css.
 * ================================================================= */

/* --- Horizontal track-bar ---
 * Paired with: templates/components/bar_chart_horizontal.html
 * Layout: label | track→fill | value (mono) | optional secondary count
 * Value sits OUTSIDE the track in mono, dark text. */
.pro-bar-h-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 5px;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.pro-bar-h-row.clickable { cursor: pointer; }
.pro-bar-h-row.clickable:hover { background: rgba(46, 86, 135, 0.05); }
.pro-bar-h-row.selected {
  background: rgba(46, 86, 135, 0.09);
  border-left-color: var(--pro-primary);
}
.pro-bar-h-row.dimmed { opacity: 0.42; }

.pro-bar-h-label {
  min-width: 180px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pro-text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-bar-h-track {
  flex: 1;
  height: 18px;
  background: var(--pro-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pro-bar-h-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--pro-primary);
  transition: width 0.3s;
}
/* Optional inline value inside the fill (use sparingly; prefer .pro-bar-h-value beside the track) */
.pro-bar-h-fill-value {
  font-family: var(--pro-mono);
  font-size: 10.5px;
  color: var(--pro-card-bg);
  font-weight: 500;
  padding: 0 8px;
  line-height: 18px;
  display: block;
  text-align: right;
}

.pro-bar-h-value {
  min-width: 78px;
  font-family: var(--pro-mono);
  font-size: 11.5px;
  color: var(--pro-text);
  text-align: right;
  font-weight: 500;
}
/* Variant for short-integer values (counts, percentages-without-symbol).
 * Default .pro-bar-h-value width (78px) accommodates formatted currency
 * (e.g., "$12,450"); .compact narrows for short integers (e.g., "12").
 * Promoted 2026-05-23 per BLK_page_review_owner_production F7.
 */
.pro-bar-h-value.compact {
  min-width: 38px;
}
.pro-bar-h-count {
  min-width: 42px;
  font-family: var(--pro-mono);
  font-size: 11.5px;
  color: var(--pro-text-secondary);
  text-align: right;
}

/* Categorical color modifiers — for phase / status / semantic bars.
 * Defaults to primary navy; override per-row with these or inline. */
.pro-bar-h-fill.success { background: var(--pro-success); }
.pro-bar-h-fill.warning { background: var(--pro-warning); }
.pro-bar-h-fill.error   { background: var(--pro-error); }
.pro-bar-h-fill.neutral { background: var(--pro-neutral); }
.pro-bar-h-fill.muted   { background: var(--pro-chart-3); }

/* --- Vertical bar column ---
 * Paired with: templates/components/bar_chart_vertical.html
 * Layout: wrap → optional value → bar(height) → label below. */
.pro-bar-v-grid {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  padding: 0 6px;
  position: relative;
}
.pro-bar-v-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.pro-bar-v-wrap.clickable { cursor: pointer; }

.pro-bar-v-value {
  font-family: var(--pro-mono);
  font-size: 10.5px;
  color: var(--pro-text);
  font-weight: 500;
  min-height: 14px;
}
.pro-bar-v {
  width: 100%;
  max-width: 44px;
  background: var(--pro-primary);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s, opacity 0.2s;
  min-height: 2px;
  opacity: 0.92;
}
.pro-bar-v-wrap:hover .pro-bar-v { opacity: 1; }
.pro-bar-v.dimmed { opacity: 0.35; }
.pro-bar-v-wrap.selected .pro-bar-v {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--pro-card-bg), 0 0 0 3px var(--pro-primary);
}
.pro-bar-v-label {
  font-size: 10.5px;
  color: var(--pro-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Chart-palette modifiers for year ladders (oldest → newest = lightest → darkest) */
.pro-bar-v.chart-1 { background: var(--pro-chart-1); }
.pro-bar-v.chart-2 { background: var(--pro-chart-2); }
.pro-bar-v.chart-3 { background: var(--pro-chart-3); }

/* Grouped variant — multiple bars per period (year-over-year per month) */
.pro-bar-v-group {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
  justify-content: center;
}

/* --- Time-bar (vertical, click-filter, tooltip) ---
 * Paired with: templates/components/bar_chart_time.html
 * Distinct from .pro-bar-v-*: built-in interactive filter UX, taller default (200px),
 * count printed inside bar in mono, hover tooltip absolute-positioned above. */
.pro-bar-v-time-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  padding: 0 4px;
  border-bottom: 1px solid var(--pro-border);
}
.pro-bar-v-time-chart.quarters { gap: 14px; }
.pro-bar-v-time-col {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
  position: relative;
  transition: transform 0.1s;
}
.pro-bar-v-time-col:hover { transform: translateY(-2px); }
.pro-bar-v-time {
  width: 100%;
  background: var(--pro-chart-2);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  transition: background 0.12s, opacity 0.12s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  color: var(--pro-card-bg);
  font-family: var(--pro-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pro-bar-v-time-col:hover .pro-bar-v-time {
  background: var(--pro-primary-light);
}
.pro-bar-v-time-col.selected .pro-bar-v-time {
  background: var(--pro-primary);
}
.pro-bar-v-time-col.dimmed .pro-bar-v-time { opacity: 0.35; }
.pro-bar-v-time-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pro-text);
  color: var(--pro-card-bg);
  padding: 5px 9px;
  border-radius: 4px;
  font-family: var(--pro-sans);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  margin-bottom: 6px;
  z-index: 5;
  font-variant-numeric: tabular-nums;
}
.pro-bar-v-time-col:hover .pro-bar-v-time-tooltip { opacity: 1; }
.pro-bar-v-time-label {
  text-align: center;
  font-family: var(--pro-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--pro-text-muted);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
/* Mobile — force month/day onto separate lines via word-spacing trick.
 * Labels like "May 25" become a vertical stack instead of wrapping
 * unpredictably at narrow widths (the "snake" footer effect). Font size
 * stays at canonical 11px — stacked layout gives each line room. */
@media (max-width: 600px) {
  .pro-bar-v-time-label {
    word-spacing: 100vw;
    line-height: 1.15;
  }
}
.pro-bar-v-time-col.selected .pro-bar-v-time-label {
  color: var(--pro-primary);
  font-weight: 700;
}

/* --- Stacked horizontal ---
 * Paired with: templates/components/bar_chart_stacked.html
 * Two-or-more segment distributions. Defaults: done=success, out=error.
 * Override children with semantic classes (.done/.out/.warn/.neutral). */
.pro-bar-stacked {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--pro-border);
}
.pro-bar-stacked.thin   { height: 8px; border-radius: 3px; }
.pro-bar-stacked.thick  { height: 24px; border-radius: 5px; }
.pro-bar-stacked > * { height: 100%; transition: width 0.3s; }
.pro-bar-stacked .done    { background: var(--pro-success); }
.pro-bar-stacked .out     { background: var(--pro-error); }
.pro-bar-stacked .warn    { background: var(--pro-warning); }
.pro-bar-stacked .neutral { background: var(--pro-neutral); }

/* --- Chart card wrapper ---
 * Subtle border + soft inner padding. For chart sections inside cards or
 * as standalone surfaces. Pair with .card-title for the heading. */
.pro-chart-card {
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  padding: 16px;
}
.pro-chart-card h4,
.pro-chart-card .pro-chart-eyebrow {
  font-family: var(--pro-sans);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--pro-text-muted);
  font-weight: 600;
  margin: 0 0 12px 0;
}

/* =================================================================
 * FILTER BAR — multi-dimension click-filter display
 * Paired with: templates/components/filter_bar.html
 *
 * Shows active filters as dismissible pills + a Reset All button.
 * Two-tone family pills encode hierarchy:
 *   .team   — primary navy        (top-level categorical)
 *   .agent  — deeper navy         (child categorical)
 *   .time   — primary-light navy  (temporal: month/quarter)
 *
 * Elevated from owner_production.html (2026-05-20).
 * ================================================================= */
.pro-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding: 10px 14px;
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
}
.pro-filter-bar-label {
  font-family: var(--pro-sans);
  font-size: 10.5px;
  color: var(--pro-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pro-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border-radius: 999px;
  background: var(--pro-primary);
  color: var(--pro-card-bg);
  font-family: var(--pro-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.pro-filter-pill.team   { background: var(--pro-primary); }
.pro-filter-pill.agent  { background: var(--pro-primary-dark); }
.pro-filter-pill.time   { background: var(--pro-primary-light); }
.pro-filter-pill .x {
  cursor: pointer;
  opacity: 0.8;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  font-weight: 400;
  color: inherit;              /* honors pill's white text when .x is an <a> tag — */
  text-decoration: none;       /* default <a> color would render black/blue otherwise. */
}
.pro-filter-pill .x:hover { opacity: 1; color: inherit; }
.pro-filter-pill .x:visited { color: inherit; }
.pro-filter-reset {
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid var(--pro-primary-deepest);
  border-radius: 6px;
  background: var(--pro-primary-deepest);
  color: var(--pro-card-bg);
  cursor: pointer;
  font-family: var(--pro-sans);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, transform 0.1s;
}
.pro-filter-reset:hover {
  background: #03194a;
  border-color: #03194a;
  transform: translateY(-1px);
}
.pro-filter-reset svg { flex-shrink: 0; }

/* =================================================================
 * TIME SELECTOR — year tabs + view-mode toggle
 * Paired with: templates/components/time_selector.html
 *
 * Used at the top of dashboards with temporal filtering.
 * Year tabs and view-toggle buttons share 12.5px/600/7×14 padding
 * for visual symmetry across the row (operator-validated 2026-05-20).
 *
 * Elevated from owner_production.html.
 * ================================================================= */
.pro-time-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.pro-year-tabs { display: flex; gap: 4px; }
.pro-year-tab {
  padding: 7px 14px;
  border: 1px solid var(--pro-border);
  border-radius: 6px 6px 0 0;
  background: var(--pro-card-bg);
  color: var(--pro-text);
  cursor: pointer;
  font-family: var(--pro-sans);
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: all 0.15s;
  letter-spacing: -0.005em;
}
.pro-year-tab:hover { background: rgba(46, 86, 135, 0.04); }
.pro-year-tab.active {
  border-bottom-color: var(--pro-primary);
  color: var(--pro-primary);
}
.pro-view-toggle {
  display: inline-flex;
  border: 1px solid var(--pro-border);
  border-radius: 6px;
  overflow: hidden;
}
.pro-view-toggle-btn {
  padding: 7px 14px;
  border: none;
  background: var(--pro-card-bg);
  color: var(--pro-text-muted);
  cursor: pointer;
  font-family: var(--pro-sans);
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.12s;
  letter-spacing: -0.005em;
}
.pro-view-toggle-btn.active {
  background: var(--pro-primary);
  color: var(--pro-card-bg);
}
.pro-view-toggle-btn:not(.active):hover {
  background: rgba(46, 86, 135, 0.04);
  color: var(--pro-text);
}

/* =================================================================
 * CARD — base structural styling (Phase E-2 migration from mpower.css)
 * The card-title font-family override (PRO-T serif) and the tool-card
 * landing-tile family above provide the editorial layer. These base
 * declarations provide the structural foundation that mpower.css used
 * to own. After Phase E-4 deletion of mpower.css, these are authoritative.
 * ================================================================= */
.card {
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.card-subtitle {
  font-size: 13px;
  color: var(--pro-text-muted);
  margin-bottom: var(--space-lg);
}

/* =================================================================
 * BIZSEG-CARD — Business Segment card primitive (Owner / Office,
 * by-Type aggregates). Canonical chrome for the Clickable tier.
 * Consolidated 2026-06-08 from page-local definitions in pipeline.html,
 * escrow_openings.html, escrow_closings.html — per BLK_merlin_interaction_grammar
 * (REF Open Question 1). Page-locals override only padding + content-grid
 * specifics; chrome (border, shadow, hover, selected, chevron) lives here.
 * Source contract: GUIDE_merlin_design.md §3 — Clickable tier.
 * ================================================================= */
.bizseg-card {
  /* tier: clickable */
  background: var(--pro-card-bg);
  border: 1px solid var(--card-border-click);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.16);
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.bizseg-card::after {
  content: '›';
  position: absolute;
  top: 4px;
  right: 10px;
  font-size: 16px;
  line-height: 1;
  color: var(--pro-text-muted);
  opacity: 0.55;
  font-weight: 700;
  pointer-events: none;
  transition: opacity 0.15s, color 0.15s;
}
.bizseg-card:hover {
  /* tier: clickable */
  background: var(--pro-bg);
  border-color: var(--pro-border-hover);
}
.bizseg-card:hover::after {
  opacity: 0.95;
  color: var(--pro-text);
}
.bizseg-card.selected {
  /* tier: clickable */
  background: #f2f0ea;
  border-color: var(--pro-text);
  box-shadow: 0 0 0 2px rgba(26,34,51,0.10);
}
.bizseg-card.selected::after {
  color: var(--pro-text);
  opacity: 1;
}
.bizseg-card.dimmed {
  opacity: 0.55;
}
.bizseg-card.dimmed::after {
  opacity: 0.25;
}

/* =================================================================
 * PIPE-FILTERS — filter shelf chassis + tab pills + dropdown chrome.
 * The canonical filter shelf for pages that need Time-slicer pill row +
 * dropdown filter rows composed on the same shelf as peers.
 *
 * Chassis:
 *   .pipe-filters       — warm-cream shelf, flex-wrap, peer-layout
 *   .pipe-filter-row    — label-on-top column (Time / Segment / etc.)
 *   .pipe-filter-lbl    — 10px uppercase muted label
 *   .pipe-filter-tabs   — flex row of .pipe-pill children
 *
 * Pills (Clickable tier — cross-filter tab variant):
 *   .pipe-pill          — folder-tab shape (rounded top + transparent
 *                         bottom border), .pipe-pill.active fills the
 *                         bottom border with neutral --pro-text accent
 *   .pipe-pill .cnt     — mono count badge inside a pill
 *
 * Dropdowns (Clickable tier — mirrors card chrome):
 *   .pipe-dropdowns     — display: contents on the wrapping <form>, so
 *                         .pipe-select children sit as direct peers of
 *                         other filter groups inside .pipe-filters
 *   .pipe-select        — label-on-top column wrapping a native select
 *   .pipe-select-lbl    — 10px uppercase muted label
 *   .pipe-select select — Clickable card chrome (border + shadow + hover)
 *
 * Consolidated from pipeline.html page-local 2026-07-08 — Pipeline was
 * first consumer; APS Review second consumer triggered promotion. Same
 * pattern .bizseg-card followed 2026-06-08. Source contract:
 * GUIDE_merlin_design.md §3 (Clickable tier — cross-filter register).
 * ================================================================= */
.pipe-filters {
  position: relative; /* anchors .filters-toggle in upper right when used */
  background: #fbfaf4;
  border: 1px solid var(--pro-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  padding-right: 32px; /* leave room for the chevron toggle when present */
  margin-bottom: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-start;
}
.pipe-filter-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.pipe-filter-lbl {
  font-size: 10px;
  color: var(--pro-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.pipe-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pipe-pill {
  /* tier: clickable */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 4px;
  border: 1px solid var(--card-border-click);
  border-radius: 6px 6px 0 0;
  border-bottom: 3px solid transparent;
  background: var(--pro-card-bg, #fff);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.16);
  color: var(--pro-text-secondary);
  font-family: var(--pro-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pipe-pill:hover {
  /* tier: clickable */
  background: var(--pro-bg);
  border-color: var(--pro-border-hover);
  color: var(--pro-text);
}
.pipe-pill.active {
  /* tier: clickable — Selected uses neutral dark var(--pro-text). */
  border-bottom-color: var(--pro-text);
  color: var(--pro-text);
  font-weight: 700;
}
.pipe-pill .cnt {
  font-family: var(--pro-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--pro-text-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.pipe-pill.active .cnt {
  color: var(--pro-primary-dark);
}
.pipe-dropdowns {
  /* Transparent to layout so .pipe-select children sit as direct peers of
     other .pipe-filter-row groups inside .pipe-filters. */
  display: contents;
}
.pipe-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pipe-select-lbl {
  font-size: 10px;
  color: var(--pro-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 2px;
}
.pipe-select select {
  /* tier: clickable — mirrors Clickable card chrome (border + shadow + hover). */
  min-width: 180px;
  max-width: 320px;
  appearance: none;
  -webkit-appearance: none;
  /* Padding tuned to match .pipe-pill total height (24px) so tabs +
     dropdowns sit at the same baseline when peered on one row. */
  padding: 7px 28px 7px 12px;
  background-color: var(--pro-card-bg);
  border: 1px solid var(--card-border-click);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.16);
  border-radius: 6px;
  font-family: var(--pro-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--pro-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7868' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pipe-select select:focus {
  outline: none;
  border-color: var(--pro-primary);
  box-shadow: 0 0 0 3px rgba(46,86,135,0.10);
}
.pipe-select select:hover {
  background-color: var(--pro-bg);
  border-color: var(--pro-border-hover);
}

/* =================================================================
 * BADGE — generic badge classes (Phase E-2 migration)
 * Distinct from .pill (which is the canonical system). Kept for
 * backward compat with templates still using .badge-live / .badge-coming.
 * ================================================================= */
.badge-live {
  background: var(--pro-success-bg);
  color: var(--pro-success);
}
.badge-coming {
  background: var(--pro-info-bg);
  color: var(--pro-info);
}
.badge-planned {
  background: var(--pro-info-bg);
  color: var(--pro-primary-dark);
}

/* =================================================================
 * FORM CONTROLS — input, button (Phase E-2 migration)
 * Used by login.html, admin forms, occasional dashboard filters.
 * ================================================================= */
.input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-md);
  font-family: var(--pro-sans);
  font-size: 14px;
  color: var(--pro-text);
  background: var(--pro-card-bg);
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: var(--pro-primary);
  box-shadow: 0 0 0 3px rgba(46, 86, 135, 0.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--pro-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.btn-primary {
  background: var(--pro-primary);
  color: var(--pro-card-bg);
}
.btn-primary:hover {
  background: var(--pro-primary-light);
}
.btn-secondary {
  background: var(--pro-card-bg);
  color: var(--pro-text-secondary);
  border: 1px solid var(--pro-border);
}
.btn-secondary:hover {
  background: rgba(46, 86, 135, 0.06);
  color: var(--pro-text);
}

/* =================================================================
 * CHART ANNOTATIONS — footnote + legend
 *
 * Small typographic chrome below/above chart graphics. Used by
 * operational reports (closings, openings, owner_production) and
 * dashboards that surface bar/time charts with annotated context.
 *
 * Elevated 2026-05-21 from 3 per-page <style> blocks.
 * ================================================================= */
.chart-footnote {
  font-size: 11px;
  color: var(--pro-text-muted);
  margin-top: var(--space-sm);
}
.chart-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 11px;
  color: var(--pro-text-secondary);
  margin-top: 4px;
}

/* =================================================================
 * FILTER BAR — segmented filter button group
 *
 * Distinct from the `.pro-filter-bar` widget (richer label+select).
 * `.filter-bar` is a flat segmented button group used to filter a
 * displayed list (e.g., "All / Active / Closed"). Visually similar
 * to `.period-bar` but semantically distinct (filter vs. period).
 *
 * Elevated 2026-05-21 from 3 per-page <style> blocks (closed,
 * report_day_range, reports). Per-page versions had a recurring
 * `var(--pro-card-bg))` paren bug — fixed on elevation.
 * ================================================================= */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-md);
  background: var(--pro-card-bg);
  color: var(--pro-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.filter-btn:hover {
  border-color: var(--pro-primary);
}
.filter-btn.active {
  background: var(--pro-primary);
  color: var(--pro-card-bg);
  border-color: var(--pro-primary);
}

/* =================================================================
 * METRIC SUB — secondary line under a metric tile value
 *
 * Used by report pages alongside `.metric-box` / `.metric-value` to
 * display a contextual delta or qualifier under the headline number.
 *
 * Elevated 2026-05-21 from 3 per-page <style> blocks. The
 * escrow_processing variant (12px / margin-top 1px) stays page-local.
 * ================================================================= */
.metric-sub {
  font-size: 13px;
  color: var(--pro-text-secondary);
  margin-top: 2px;
}

/* =================================================================
 * STATUS ICON — small inline status indicator
 *
 * Renders as an 18×18 box (square for completed/not-activated) or
 * circle (outstanding). White on color for completed/outstanding,
 * dark on light for not-activated (deactivated state).
 *
 * Markup pattern:
 *   <span class="status-icon completed">✓</span>
 *   <span class="status-icon outstanding">✗</span>
 *   <span class="status-icon not-activated">—</span>
 *
 * Hex literals replaced with semantic tokens 2026-05-21 — completed
 * → success, outstanding → error, not-activated → neutral. Dark-mode
 * overrides removed (anti-pattern; belongs in [data-theme="dark"]
 * block in tokens.css when populated).
 *
 * Elevated 2026-05-21 from 3 per-page <style> blocks.
 * ================================================================= */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 800;
  color: var(--pro-bg);
  line-height: 1;
}
.status-icon.completed {
  background: var(--pro-success);
  border-radius: 3px;
}
.status-icon.outstanding {
  background: var(--pro-error);
  border-radius: 50%;
}
.status-icon.not-activated {
  background: var(--pro-neutral-bg);
  color: var(--pro-text-secondary);
  border-radius: 3px;
}

/* =================================================================
 * SIGNALS — canonical 6-type × 2-variant signal library
 *
 * Six semantic signal types each available in two visual variants:
 *
 *   1. Outline glyph (.signal-<type>)         — bare colored glyph, 14px,
 *                                                inline with text. Use in
 *                                                table cells, prose
 *                                                annotations, label
 *                                                prefixes.
 *
 *   2. Filled chip   (.signal-<type>-chip)    — white glyph on colored
 *                                                background, 18px shape.
 *                                                Use for tile zero-marks,
 *                                                table status columns,
 *                                                prominent annotations.
 *
 * Types:
 *   success     ✓  green   — done, zero gap, all-clear
 *   outstanding ●  muted   — awaiting action, not overdue
 *   past-due    ✗  brick   — severity, overdue, file-integrity violation
 *   warning     ⚠  amber   — approaching deadline, caution
 *   info        ⓘ  navy    — neutral context annotation
 *   hold        ⏸  slate   — paused / parked files (Hold-phase color)
 *
 * Glyphs are Unicode for now. When the Icon System SOW (SOW_icon_system_2026-05-23)
 * ships, glyphs swap to Tabler SVG in this single canonical block — no
 * consumer churn.
 *
 * Compatibility: the older .status-icon family (above) stays in place
 * until consumers are migrated to .signal-* classes. Both can coexist.
 *
 * Established 2026-06-26.
 * ================================================================= */

/* Outline glyph variant — inline annotation. Self-contained: one class. */
.signal-success,
.signal-outstanding,
.signal-past-due,
.signal-warning,
.signal-info,
.signal-hold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  font-size: 14px;
  user-select: none;
  flex-shrink: 0;
}
.signal-success     { color: var(--pro-success); }
.signal-outstanding { color: var(--pro-text-muted); }
.signal-past-due    { color: var(--pro-brick); }
.signal-warning     { color: #d4a73a; }
.signal-info        { color: var(--pro-primary); }
.signal-hold        { color: #8a7e92; }

/* Filled chip variant — prominent annotation. White glyph on colored bg.
   Self-contained: one class. Square chips for "state in progress"
   signals (success/past-due/warning); circle chips for "punctuation"
   signals (outstanding/info/hold). */
.signal-success-chip,
.signal-outstanding-chip,
.signal-past-due-chip,
.signal-warning-chip,
.signal-info-chip,
.signal-hold-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 13px;
  font-weight: 800;
  color: var(--pro-bg);
  user-select: none;
}
.signal-success-chip,
.signal-past-due-chip,
.signal-warning-chip   { border-radius: 3px; }
.signal-outstanding-chip,
.signal-info-chip,
.signal-hold-chip      { border-radius: 50%; }

.signal-success-chip     { background: var(--pro-success); }
.signal-outstanding-chip { background: var(--pro-text-muted); }
.signal-past-due-chip    { background: var(--pro-brick); }
.signal-warning-chip     { background: #d4a73a; }
.signal-info-chip        { background: var(--pro-primary); }
.signal-hold-chip        { background: #8a7e92; }

/* =================================================================
 * SECTION HEADER (operational) — flex header with right-aligned action
 *
 * Used by operational pages (closings, openings, expense_chase,
 * expense_fedex) that have a title on the left and a small action on
 * the right (e.g., collapse toggle). `align-items: flex-start` so
 * multi-line subtitles align cleanly with the action button top.
 *
 * Elevated 2026-05-21 from 2 pages (closings, openings). Expense
 * pages keep their `align-items: center` variant page-local.
 * ================================================================= */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}
.collapse-toggle {
  font-size: 11.5px;
  color: var(--pro-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  padding: 4px 8px;
}
.collapse-toggle:hover {
  color: var(--pro-primary);
}

/* =================================================================
 * SECTION (workshop) — clickable collapsible section
 *
 * Used by admin / workshop / playground pages where each section
 * collapses independently and the whole page has an expand-all /
 * collapse-all control bar above.
 *
 * Markup pattern:
 *   <div class="collapse-controls">
 *     <button class="collapse-btn-page">Expand all</button>
 *     <button class="collapse-btn-page">Collapse all</button>
 *   </div>
 *   <h2 class="section-title" onclick="...">
 *     <span class="section-chevron">›</span> Section name
 *   </h2>
 *   <div class="section-content">...</div>
 *
 * Elevated 2026-05-21 from 4 pages (admin, amy_playground,
 * officers/erin, payroll_commission_analysis).
 * ================================================================= */
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-md);
  margin-top: var(--space-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.section-title:first-of-type {
  margin-top: 0;
}
.section-title:hover {
  color: var(--pro-primary);
}
.section-chevron {
  transition: transform 0.2s;
  font-size: 12px;
}
.section-chevron.collapsed {
  transform: rotate(-90deg);
}
.section-content.collapsed {
  display: none;
}
.collapse-controls {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-lg);
}
.collapse-btn-page {
  padding: 4px 12px;
  font-size: 11px;
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-md);
  background: var(--pro-card-bg);
  color: var(--pro-text-muted);
  cursor: pointer;
}
.collapse-btn-page:hover {
  border-color: var(--pro-primary);
  color: var(--pro-primary);
}

/* =================================================================
 * PERIOD BAR — segmented period selector buttons
 *
 * Different from `time_selector` (which is a richer year-tab + range
 * widget). `.period-bar` is a flat segmented button group: pick one of
 * N periods (e.g., Day / Week / Month / Year).
 *
 * Elevated 2026-05-21 from 2 operational pages (closings, openings).
 * expense_chase / expense_fedex have a slightly looser dashboard
 * variant kept page-local (also contains a pre-existing paren bug —
 * see SOW §13b).
 * ================================================================= */
.period-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.period-btn {
  padding: 5px 12px;
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-md);
  background: var(--pro-card-bg);
  color: var(--pro-text);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  transition: all 0.15s;
}
.period-btn:hover {
  border-color: var(--pro-primary);
}
.period-btn.active {
  background: var(--pro-primary);
  color: var(--pro-card-bg);
  border-color: var(--pro-primary);
}

/* =================================================================
 * PHASE BADGES — escrow lifecycle phase indicators
 *
 * Used by report pages (reports, dashboards/escrow_processing) to surface
 * the escrow phase of each row/tile. Four phases map to existing semantic
 * tokens:
 *   .phase-opening    → info (Refined Navy blue) — early life
 *   .phase-processing → warning (amber) — active work
 *   .phase-funding    → success (green) — money moving
 *   .phase-closing    → neutral (gray) — closing-out / done-ish
 *
 * Closing → neutral is a deliberate "use what we have" call 2026-05-21
 * (operator decision — no purple in palette; secondary-palette work
 * captured separately for future consideration).
 *
 * Hex literals replaced with semantic tokens; dark-mode overrides removed
 * (anti-pattern — belongs in [data-theme="dark"] block in tokens.css
 * when populated).
 *
 * Elevated 2026-05-21 from 3 per-page <style> blocks.
 * ================================================================= */
.phase-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 600;
}
/* Legacy class-based phase colors — used by dashboards/escrow_processing (pre-2026-06 Funding/Closing naming). */
/* New consumers (past-due phase pill, etc.) should pull color_hex inline from cae.dim_bin_phase.color_hex — canonical source of truth. */
.phase-opening    { background: var(--pro-info-bg);    color: var(--pro-info); }
.phase-processing { background: var(--pro-warning-bg); color: var(--pro-warning); }
.phase-funding    { background: var(--pro-success-bg); color: var(--pro-success); }
.phase-closing    { background: var(--pro-neutral-bg); color: var(--pro-neutral); }

/* =================================================================
 * IMPORTANCE / GATE BADGES — RBJ template badge family
 *
 * Used by report pages (closed, rbj_template, reports, report_day_range)
 * to surface progress-item template importance and gate-type. Rendered
 * inline in JS-emitted table rows via class-string concatenation.
 *
 * Hex literals replaced with tokens 2026-05-21 — visual register shifts
 * to the unified Refined Navy semantic palette. Dark-mode overrides
 * removed (anti-pattern); will follow the [data-theme="dark"] block in
 * tokens.css when dark mode is populated.
 *
 * Elevated from 4 per-page <style> blocks (SOW §13b elevation pass).
 * ================================================================= */
.importance-badge,
.gate-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-lg);
  font-size: 10px;
  font-weight: 600;
}
.gate-badge { margin-left: 4px; }

.imp-high,  .gate-hard { background: var(--pro-error-bg);   color: var(--pro-error); }
.imp-medium             { background: var(--pro-warning-bg); color: var(--pro-warning); }
.imp-low,   .gate-info  { background: var(--pro-neutral-bg); color: var(--pro-neutral); }
.gate-soft              { background: var(--pro-info-bg);    color: var(--pro-info); }

/* =================================================================
 * LOADING — centered loading state placeholder
 *
 * Inline "loading…" indicator used while async tables/charts populate.
 * Elevated 2026-05-21 from 6 per-page <style> blocks. admin.html keeps
 * its `padding: 20px` override (tighter density in the admin context).
 * ================================================================= */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--pro-text-muted);
}

/* =================================================================
 * REPORT TILES — landing-page tile grid
 *
 * Used by landing/index pages that present a grid of report links
 * (agent_outreach, business_administration, business_performance,
 * finance_operations, social_media, strategic_deals — 6 pages).
 *
 * Markup uses either `<div class="report-tile">` (non-interactive stub)
 * or `<a class="report-tile" href="...">` (clickable). Hover lift is
 * keyed to the anchor variant via `a.report-tile:hover` so stubs do
 * not visually lift on mouseover.
 *
 * Elevated 2026-05-21 from 6 per-page <style> blocks (SOW §13b
 * elevation pass).
 * ================================================================= */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
  max-width: 960px;
}
.report-tile {
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
a.report-tile:hover {
  border-color: var(--pro-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(46, 86, 135, 0.08);
}
.report-icon {
  color: var(--pro-primary);
  margin-bottom: 12px;
  line-height: 0;
}
.report-icon svg {
  width: 28px;
  height: 28px;
}
.report-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--pro-text);
}
.report-desc {
  font-size: 12px;
  color: var(--pro-text-muted);
  margin-top: 6px;
  line-height: 1.45;
}
.report-stub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pro-text-muted);
  margin-top: 12px;
  opacity: 0.6;
}
@media (max-width: 900px) {
  .report-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .report-grid { grid-template-columns: 1fr; }
}

/* =================================================================
 * CRUMBS — breadcrumb / context line above page header
 *
 * Sits above the page_header on landing-page-style templates and
 * select operational pages (e.g., owner_production). Compact muted
 * label with explicit sans family + tracking, links resolve to
 * primary on hover.
 *
 * Elevated 2026-05-21 from 15 per-page <style> blocks (SOW §13b
 * elevation pass). The owner_production polish (DM Sans, 11.5px,
 * weight 500, letter-spacing 0.01em) was promoted to canonical
 * 2026-05-23 per BLK_page_review_owner_production_2026-05-23 F1 —
 * strays-to-canonical convergence.
 * ================================================================= */
.crumbs {
  font-family: var(--pro-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--pro-text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.crumbs a {
  color: var(--pro-text-muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--pro-primary);
}

/* =================================================================
 * PAGE REVIEW 2026-05-23 — primitives elevated from owner_production
 *
 * Origin: BLK_page_review_owner_production_2026-05-23.md
 * Findings F2, F3, F4, F7 (variant), F8 elevated per the walk.
 * Each primitive replaces a per-page inline-style pattern that was
 * accumulating sediment from the design-system conversion (closed
 * under SOW_design_system_architecture_2026-05-20).
 * ================================================================= */

/* EMPTY-STATE — F2: centered muted "no data" message for cards/sections
 * that conditionally show empty content. Replaces inline:
 *   style="text-align:center;padding:20px;color:var(--pro-text-muted);"
 */
.empty-state {
  text-align: center;
  padding: var(--space-lg);
  color: var(--pro-text-muted);
}

/* DATA-TABLE-WRAP — F3: scrollable wrapper for .data-table on narrow
 * viewports. Tables can't overflow-x:auto directly without breaking
 * table layout, so this wrapper is the structural pattern. Standard
 * usage: <div class="data-table-wrap"><table class="data-table">...</table></div>
 */
.data-table-wrap {
  overflow-x: auto;
}

/* CHART-BODY — F4: vertical padding for chart inner content inside
 * a .card. Replaces inline style="padding: var(--space-md) 0;" used
 * around .pro-bar-h-row / .pro-bar-v family children.
 */
.chart-body {
  padding: var(--space-md) 0;
}

/* PRO-FILTER-GROUP — F8: composable subgroup primitive for filter
 * regions. Used INSIDE .pro-time-selector (which provides outer
 * left/right split via justify-content: space-between) to group
 * filters that travel together. Future multi-row filter pages
 * compose multiple .pro-filter-group elements.
 */
.pro-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* SECTION-HEADING + SECTION-HEADING-SUB — title+subtitle for sub-sections
 * within a page (BELOW the page_header). Replaces inline h2/p style
 * blocks previously duplicated across business_performance.html /
 * finance_operations.html / people_team.html. Use inline `style="margin-top:0"`
 * on the first .section-heading per page when it sits immediately after
 * page_header (one-line override beats a modifier class).
 *
 * Distinct from .section-label (uppercase tracking label used on
 * business_administration.html — that's a label, this is a heading).
 */
.section-heading {
  font-size: 16px;
  font-weight: 700;
  margin: 40px 0 4px;
  color: var(--pro-text);
}
.section-heading-sub {
  font-size: 12px;
  color: var(--pro-text-muted);
  margin-top: 0;
}

/* =================================================================
 * FILTERS-TOGGLE — chevron toggle for collapsing filter section
 * containers (.pipe-filters / .pd-filters). Visible on all viewports.
 * Default open state set per viewport in Alpine x-data: open on
 * desktop (>600px), collapsed on mobile (≤600px). Clicking the
 * chevron toggles .is-collapsed on the container, hiding all filter
 * content except the toggle itself. State is Alpine-driven and resets
 * on every HTMX partial swap.
 * ================================================================= */
/* Absolute-positioned in the upper right of the filter container so it
   doesn't disturb the flex flow of the filter rows. Container has
   position: relative set on .pipe-filters / .pd-filters separately. */
.filters-toggle {
  position: absolute;
  top: 4px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--pro-text-muted);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  z-index: 1;
}
.filters-toggle:hover { color: var(--pro-text); }
.filters-toggle .chevron {
  display: inline-block;
  transition: transform 0.15s;
}
.filters-toggle.expanded .chevron {
  transform: rotate(90deg);
}

.pipe-filters.is-collapsed > :not(.filters-toggle),
.pd-filters.is-collapsed > :not(.filters-toggle) {
  display: none;
}
.pipe-filters.is-collapsed,
.pd-filters.is-collapsed {
  /* Min-height so the absolutely-positioned chevron sits cleanly inside
     the container (chevron is ~26px tall including its own padding).
     Margin-bottom shrunk so the collapsed bar doesn't push the next
     section too far — it's a compact summary, not a data section. */
  min-height: 32px;
  padding: 6px 32px 6px 12px;
  margin-bottom: var(--space-sm);
}

/* =================================================================
 * PERSPECTIVE-LABEL — section anchor label above card groups
 * (Totals · Projected Fees · Business Performance · Operations
 * Workload · File Integrity etc.)
 * Consolidated 2026-06-08 from page-local definitions in pipeline /
 * escrow_openings / escrow_closings / owner_production /
 * owner_assignments / owner_overrides.
 * ================================================================= */
.perspective-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pro-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 4px 6px;
}

/* SUBNAV-V2 — horizontal tab bar for sub-page navigation within a
 * multi-tab landing (e.g., /payroll-v2/ → Overview / YTD / Time Off /
 * Commission). Active tab is underlined; inactive tabs are muted.
 * Substrate runway: when HTMX adoption begins, tabs become hx-get
 * targets and the active state moves to the swapped fragment.
 * Extracted from templates/portal/payroll_v2/_subnav.html.
 */
.subnav-v2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  border-bottom: 1px solid var(--pro-border);
  padding-bottom: 2px;
}
.subnav-v2 .tab {
  font-size: 13px;
  font-weight: 600;
  color: var(--pro-text-muted);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
}
.subnav-v2 .tab.active {
  color: var(--pro-primary);
  border-bottom-color: var(--pro-primary);
}
.subnav-v2 .tab:hover {
  color: var(--pro-text);
}

/* =================================================================
   Rank Table — Bar-as-Background Pill
   =================================================================
   Canonical attribution surface. Bar visualization sits behind the
   name cell as a ::before pseudo (width driven by `--bar-pct` custom
   property); numeric columns adjacent. Sticky table header inside a
   scrollable `.rank-table-wrap` (per Bloomberg/financial-report convention).

   Consumers as of canonicalization 2026-06-07:
     - pipeline.html (By Listing Broker, By Listing Agent) — promoted from page-local
     - past-due.html (Past-Due Items by Type) — second consumer (triggered promotion)
   ================================================================= */
.rank-table-wrap { overflow-x: auto; max-height: 440px; overflow-y: auto; }
.rank-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.rank-table-wrap::-webkit-scrollbar-track { background: transparent; }
.rank-table-wrap::-webkit-scrollbar-thumb { background: rgba(46, 86, 135, 0.25); border-radius: 3px; }

.rank-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 360px; }
.rank-table th {
  text-align: right; padding: 6px 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pro-text-muted); font-weight: 700;
  border-bottom: 1px solid var(--pro-border);
  background: var(--pro-card-bg, #fff); position: sticky; top: 0; z-index: 1;
}
.rank-table th.name { text-align: left; }
.rank-table th.sortable { cursor: pointer; user-select: none; }
.rank-table th.sortable:hover { color: var(--pro-text); }
.rank-table td { padding: 6px 10px; border-bottom: 1px solid var(--pro-border); }
.rank-table tr:last-child td { border-bottom: none; }
.rank-table tr.clickable { cursor: pointer; transition: background 0.12s; }
.rank-table tr.clickable:hover { background: rgba(46,86,135,0.06); }
/* Selected row — pill-shaped chrome (2026-06-09). Replaces the prior thin-outline
   treatment per operator: 'sharp table cells with one boxed-with-outline row reads
   as we tried to highlight it. A pill reads as deliberate selection — it owns the
   visual treatment.' The bg sits stronger than hover; rounded ends via border-
   radius on first / last td (mid cells stay straight, which IS the pill effect —
   rounded ends, flat middle). Bottom border hidden on selected row so the pill
   chrome reads uninterrupted. */
.rank-table tr.selected {
  background: rgba(46, 86, 135, 0.10);
}
.rank-table tr.selected td { border-bottom-color: transparent; }
.rank-table tr.selected td:first-child {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
.rank-table tr.selected td:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.rank-table tr.selected td.name { font-weight: 700; }

/* Selection outline — dark-gray pill border via inset box-shadow. First/last
   tds carry the pill rounding (border-radius 999px); inset shadow follows
   that curvature so the outline traces the pill ends cleanly. Middle tds
   get top+bottom-only shadows so the outline reads continuous across the
   row without vertical bars between cells. Added 2026-06-10 per operator —
   prior 10% wash + bold + accent wasn't apparent enough on its own. */
.rank-table tr.selected td {
  box-shadow: inset 0 1px 0 var(--pro-text-secondary), inset 0 -1px 0 var(--pro-text-secondary);
}
.rank-table tr.selected td:first-child {
  box-shadow:
    inset 0 1px 0 var(--pro-text-secondary),
    inset 0 -1px 0 var(--pro-text-secondary),
    inset 1px 0 0 var(--pro-text-secondary);
}
.rank-table tr.selected td:last-child {
  box-shadow:
    inset 0 1px 0 var(--pro-text-secondary),
    inset 0 -1px 0 var(--pro-text-secondary),
    inset -1px 0 0 var(--pro-text-secondary);
}

/* Name cell: proportional pill bar as pseudo-element behind text. Rounded
   ends + top/bottom breathing room so the row reads as a discrete pill bar,
   not a wall-to-wall fill that blends with the next row. */
.rank-table td.name {
  position: relative;
  isolation: isolate; /* contains the ::before pill within this cell's stacking context */
  color: var(--pro-text); font-weight: 500;
  min-width: 160px; max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 12px;
}
.rank-table td.name::before {
  content: '';
  position: absolute;
  top: 5px; bottom: 5px;
  left: 6px;
  width: calc((100% - 12px) * var(--bar-pct, 0%) / 100%);
  background: rgba(46, 86, 135, 0.18);
  border-radius: 3px;
  z-index: -1;
}
/* Selected data bar — stay at default opacity. The bar already shows magnitude;
   intensifying it on selection darkens the cell BEHIND the name text and drowns
   the font. Selection signal is carried by the row wash + bold + left accent. */
.rank-table tr.selected td.name::before { background: rgba(46, 86, 135, 0.18); }

/* Past-due variant — swap navy accent for the canonical --pro-error family
   (#a04545). Reinforces the page context (past-due) without going alarm-red.
   Applied via class on the rank-table itself; pipeline page rank-tables stay
   navy. */
.rank-table.past-due tr.clickable:hover { background: rgba(160, 69, 69, 0.05); }
.rank-table.past-due tr.selected { background: rgba(160, 69, 69, 0.10); }
.rank-table.past-due td.name::before { background: rgba(160, 69, 69, 0.16); }
.rank-table.past-due tr.selected td.name::before { background: rgba(160, 69, 69, 0.16); }

.rank-table td.num {
  text-align: right; font-family: var(--pro-mono, 'JetBrains Mono', monospace);
  font-weight: 600; white-space: nowrap;
}
/* Semantic column color modifiers — opt-in per consumer */
.rank-table td.units { color: var(--pro-text); min-width: 50px; }
.rank-table td.fees { min-width: 64px; }
.rank-table td.share { color: var(--pro-text-muted); min-width: 46px; }
.rank-table td.pd { color: var(--pro-text); min-width: 50px; }
.rank-table td.pct { color: var(--pro-text-muted); min-width: 50px; }
.rank-table td.dao { color: var(--pro-text-muted); min-width: 50px; }

@media (max-width: 600px) {
  .rank-table { font-size: 13px; }
  .rank-table td.name { min-width: 140px; max-width: 200px; }
}

/* =================================================================
 * EDITORIAL METRIC CARD — .pe-* family (canonical per
 * Design/SPEC_metric_card_primitives.md)
 *
 * Presentation card for elevated summary metrics. Variant model:
 *   - Variant A — primary-only (single .pe-cell)
 *   - Variant B — primary + secondary tiered (.pe-metrics + .pe-secondary)
 *   - Variant C — equal-cell with divider (.pe-metrics with 2-4 .pe-cell)
 *
 * Promoted from _pipeline_content.html inline <style> 2026-06-12 when
 * Openings became the second consumer. Canonical reference: the SPEC.
 * ================================================================= */

/* Grid containers — .pe-row is the canonical 4-up; .pe-row-2up is the
 * Openings-style 2-up. Both wrap responsively. */
.pe-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.pe-row-2up {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (max-width: 1100px) { .pe-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pe-row, .pe-row-2up { grid-template-columns: 1fr; } }

.pe-card {
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pe-eyebrow {
  font-family: var(--pro-sans, 'DM Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pro-text);
}
.pe-metrics { display: flex; gap: 24px; align-items: flex-end; }
.pe-metrics.col-3 { gap: 18px; }
.pe-cell { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pe-cell + .pe-cell { border-left: 1px solid var(--pro-border); padding-left: 24px; }
.pe-metrics.col-3 .pe-cell + .pe-cell { padding-left: 18px; }
.pe-val {
  font-family: var(--pro-serif, 'Source Serif 4', Georgia, serif);
  font-size: 24px;
  font-weight: 700;
  /* "Metric navy" — between --pro-primary-dark (#1f3d63) and
     --pro-primary (#2e5687). Inline pending palette graduation as
     --pro-metric-blue per the SPEC. */
  color: #264975;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pe-lbl {
  font-family: var(--pro-sans, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--pro-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Narrative foot — sits below a thin rule, alignment-friendly for cards
 * that have no secondary tier but need to match a sibling card's height. */
.pe-foot {
  font-family: var(--pro-serif, 'Source Serif 4', serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--pro-text-secondary);
  line-height: 1.4;
  border-top: 1px solid var(--pro-border);
  padding-top: 6px;
  margin-top: 6px;
}

/* Secondary tier — 2 metrics in equal cells with hash divider, sits below
 * a thin rule. Used on tiered cards (Contracted Fees, Forward) to surface
 * supporting metrics below the primary. */
.pe-secondary {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--pro-border);
  padding-top: 6px;
  margin-top: 6px;
}
.pe-secondary-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--pro-mono, 'JetBrains Mono', monospace);
}
.pe-secondary-cell + .pe-secondary-cell {
  border-left: 1px solid var(--pro-border);
  padding-left: var(--space-md);
}
.pe-secondary-val {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pro-text);
  font-variant-numeric: tabular-nums;
}
.pe-secondary-lbl {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pro-text-muted);
}

/* Variant B inline-comparison flavor — primary .pe-val sits on the same row
 * as a 'vs N' annotation and a trend indicator. Used on MTD/YTD home cards
 * where the comparison reads as immediate context to the current value. */
.pe-val-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
/* Trend indicator — matches .pe-secondary-val sizing so it reads as a
 * peer to the comparison value inside a .pe-val-row. */
.pe-trend {
  font-family: var(--pro-mono, 'JetBrains Mono', monospace);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pe-trend.up { color: var(--pro-success); }
.pe-trend.down { color: var(--pro-error); }
.pe-trend.flat { color: var(--pro-text-muted); }

/* Comparison "vs N" cell variant — same chrome as .pe-secondary-val but
 * one shade lighter (medium gray) to signal it's an annotation, not a
 * primary metric. */
.pe-secondary-cell.compare .pe-secondary-val {
  color: var(--pro-text-secondary);
}

/* Variant A foot — mono numerator/denominator readout below a single
 * primary value. Used on home outstanding-items cards. */
.pe-foot-mono {
  font-family: var(--pro-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--pro-text-muted);
  margin-top: 5px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow dot — colored bullet prefix for the eyebrow text (used to
 * encode card-type or status in the home outstanding row). */
.pe-eyebrow-dot {
  font-size: 9px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Mono primary — opt-in variant where the .pe-val is rendered in mono
 * tabular instead of serif. Used for percentage readouts where leading
 * digits + the % sign read best in mono. Color is set per-instance. */
/* .mono modifier — font-family swap ONLY. All other tokens stay
 * canonical (24px / 700 / -0.02em) so the metric reads at canonical
 * weight, just in tabular mono numerals. */
.pe-val.mono {
  font-family: var(--pro-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
}

/* Clickable .pe-card variant — hover affordance for cards that link to
 * a destination (e.g., home page Pipeline card → /reports/pipeline/). */
a.pe-card,
.pe-card.pe-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
a.pe-card:hover,
.pe-card.pe-card-link:hover {
  border-color: var(--pro-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Task detail panel — rendered by templates/portal/_post_closing_drill.html
 * and swapped into #task-detail-section on Closing Desk / Opening / Processing
 * row clicks. Lived in closing_desk.html extra_css until Opening + Processing
 * inherited the partial without these styles and the panel collapsed inline. */
.task-detail-panel {
  background: var(--pro-card-bg);
  border: 1px solid var(--pro-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}
.task-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--pro-border);
}
.task-detail-title { font-size: 16px; font-weight: 600; }
.task-detail-close {
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--pro-border);
  border-radius: var(--radius);
  background: var(--pro-card-bg);
  color: var(--pro-text);
  font-size: 12px;
}
.task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pro-border);
  font-size: 13px;
}
.task-item:last-child { border-bottom: none; }
.task-summary {
  display: flex;
  gap: 16px;
  margin-bottom: var(--space-md);
  font-size: 13px;
}
.task-summary-item { display: flex; align-items: center; gap: 4px; }
.last-updated { font-size: 11px; color: var(--pro-text-muted); margin-top: var(--space-sm); }

/* Task/items ratio label (e.g. "1/56") on the items-bar of phase rank tables —
   Hold / Opening / Processing / Closing Desk / Post-Closing all consume this.
   Promoted 2026-07-08 from duplicated page-local rules per operator direction
   ("more visible"): color bumped var(--pro-text-muted) #7a7868 → var(--pro-text-secondary) #5a6478. */
.task-bar-text {
  font-size: 11px;
  color: var(--pro-text-secondary);
  font-variant-numeric: tabular-nums;
}