/* ===========================================================================
   daily-driver.css — the Aug 21 2026 polish pass.
   Loaded LAST, on purpose: these rules are meant to win. Kept in one small
   documented file rather than grown into the four accreted sheets, so the next
   person can read exactly what this pass changed and why. Nothing here restyles
   the console; it adds four things it was missing.
   Plan: plans/transient-tinkering-acorn.md · card v31pMgkf.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   T1 — Value state: UNKNOWN must not look like a muted real number.
   The tagger in ui.js adds .value-unknown to any leaf whose text is exactly
   'UNKNOWN'. The load-bearing signal is the DASHED UNDERLINE: 810 inline
   var(--text-muted) styles set only `color`, so a dashed underline never
   collides with them and always shows. Colour is a secondary reinforcement,
   used only where no inline colour already muted the word. cursor:help pairs
   with the title the tagger sets. (WCAG 1.4.1: not colour alone.)
--------------------------------------------------------------------------- */
.value-unknown {
  /* Colour = the SAME --text-muted token the 810 inline styles already use, so
     where a call site set the colour inline the two resolve identically (no
     collision) and where none did, this supplies it. Not a new colour — the
     plan's rule is that the answer to "the grey is faint" is never to recolour. */
  color: var(--text-muted);
  font-weight: 500;             /* measured figures render 700; the weight drop is a second, colour-free cue */
  /* Load-bearing non-colour channel (WCAG 1.4.1): a dashed underline reads as a
     fill-in-the-blank, survives greyscale and a screen reader, and lives in a
     property none of the 810 inline colour styles touch, so it always shows.
     Deliberately NOT font-size — shrinking a .card-value reads as broken. */
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  letter-spacing: 0.04em;
  cursor: help;
}

/* ---------------------------------------------------------------------------
   T2 — Tabular figures everywhere a number lives, so columns align and a
   changing counter doesn't jitter. alisha-refresh-v2 set this on a few
   selectors; this makes it consistent. Property-level, cheap, no layout risk.
--------------------------------------------------------------------------- */
.card-value, .card-sub, .card-trend,
.data-table td, .data-table th, table td, table th,
.signal-value, .brief-signal-value, .prop-info-val,
.gauge-value, .kpi-value, .stat-value, .metric-value,
.d5-value, .ulcr-hero-num, .vizier-kpi-value,
.hud-stat, .csc-metric-value, .txn-amount,
[data-numeric] {
  /* font-variant-numeric composes with v2's font-feature-settings rather than
     clobbering it, so no !important is needed anywhere. */
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------------------------------------------------------------------------
   T4 — Mobile: the console is browsable but not usable on a phone. Three fixes.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 44x44 minimum tap target (brand-system rule; nothing on the console met it).
     min-height + inline-flex centring keeps small buttons legible without
     forcing their visual box larger than the text needs. */
  .btn, .btn-sm, .btn-xs, .date-btn, .txn-filter-btn,
  .sidebar-action-pill, .refresh-live-btn, .refresh-live-pause-btn,
  .exec-action-btn, .close-btn, .hamburger-btn,
  .sidebar a[data-section] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar a[data-section] { justify-content: flex-start; }

  /* Sticky first column on wide data tables, so the row's identity stays on
     screen while you scroll its numbers. The solid background is required —
     without it the sticky cell is transparent and the scrolled content ghosts
     through it. z-index keeps it above the scrolling cells; the header corner
     needs a higher one to sit above both axes. */
  .table-wrap { position: relative; }
  .data-table th:first-child,
  .data-table td:first-child,
  .table-wrap table th:first-child,
  .table-wrap table td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface2, #131c2e);
    z-index: 1;
    box-shadow: 1px 0 0 var(--border, #1c2842);
  }
  .data-table th:first-child,
  .table-wrap table th:first-child {
    z-index: 2;
  }
  body.light-theme .data-table th:first-child,
  body.light-theme .data-table td:first-child,
  body.light-theme .table-wrap table th:first-child,
  body.light-theme .table-wrap table td:first-child {
    background: #f4f6f8;
  }
}

@media (max-width: 480px) {
  /* Toasts spanned oddly and could sit under the hamburger. Dock them to a
     full-width strip at the bottom, above the mobile quick-view FAB. */
  .toast-container {
    left: 8px;
    right: 8px;
    bottom: 84px;
    top: auto;
    align-items: stretch;
  }
  .toast { width: auto; max-width: none; }
}

/* ---------------------------------------------------------------------------
   T3 — prefers-reduced-motion. The console runs for hours; honour the OS.
   Mechanism (both design seats agreed): DON'T use `animation: none`. Many
   console entrances use fill-mode `both` with `from { opacity: 0 }` and
   staggered delays (cardReveal, briefReveal, statusBarFill); killing the
   animation strands them invisible. Collapsing every animation to 0.01ms /
   one iteration lands `both`/`forwards` on their END frame and kills infinite
   loops, then we RE-ARM only the animations that communicate state (spinners,
   skeletons) — motion that says "working", not "decoration". This file loads
   last, so nothing re-arms these after us. (House model: pulse.css:1327.)
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  /* KEEP — loading state must still read as "in progress", not frozen.
     Class selectors (0-1-0) outrank the * blanket among !important rules. */
  .spinner { animation-duration: 0.8s !important; animation-iteration-count: infinite !important; }
  .ulcr-refresh-btn__icon--spin { animation-duration: 0.9s !important; animation-iteration-count: infinite !important; }
  .skeleton, .skeleton-line,
  .brief-attention-skeleton .skeleton-line {
    animation-duration: 1.8s !important; animation-iteration-count: infinite !important;
  }
  .signal-tile.signal-loading .signal-value {
    animation-duration: 1.5s !important; animation-iteration-count: infinite !important;
  }
}

/* ---------------------------------------------------------------------------
   T5 — Sidebar search pill. Reuses .sidebar-action-pill so the light-theme
   overrides apply for free; goes full-width on its own row above the four
   icon pills. The kbd hint reads "Ctrl K" and app.js swaps it to ⌘K on a Mac.
--------------------------------------------------------------------------- */
.sidebar-actions { flex-wrap: wrap; }
.sidebar-search-pill {
  flex: 1 1 100%;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 10px;
}
.sidebar-search-label { font-size: 0.78rem; }
.sidebar-search-kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-dim, #8497b0);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
}
@media (hover: none) { .sidebar-search-kbd { display: none; } }  /* no keyboard, no hint */

/* ---------------------------------------------------------------------------
   Social Accounts (Minbar) page, Oct 3 2026. Component-scoped (.sa-*), so nothing
   here touches another page. Status is never colour alone: every chip carries its
   word, and the table keeps a numeric column per window. Chip colours are explicit
   (not var(--text-muted)) because chip text must pass 4.5:1 on its own tint; the
   measured ratios are in MEMORY.md. Dormant and Never posted are neutral on purpose:
   a quiet channel is information, not an alarm.
--------------------------------------------------------------------------- */
.sa-lede { max-width: 720px; margin: 0 0 14px; color: var(--text); font-size: 0.92rem; line-height: 1.5; }
/* Secondary text uses its own colour, not var(--text-muted): that token measures 4.22:1 on the
   dark page (below the 4.5:1 bar for small text). Explicit values, measured on the real page. */
.sa-note { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.5; color: #8fa5bf; max-width: 760px; }
.sa-dim { color: #8fa5bf; font-size: 0.76rem; }
.sa-h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.sa-banner { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; line-height: 1.45; margin: 0 0 16px; max-width: 920px; border: 1px solid; }
.sa-banner-stale { background: #3a1d12; border-color: #fb923c; color: #ffe6d5; }
.sa-banner-unknown { background: #2a2140; border-color: #a78bfa; color: #ece6ff; }
.sa-summary, .sa-rules, .sa-group, .sa-foot { margin-top: 16px; }
.sa-sum-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.sa-sum-label { font-weight: 700; color: var(--text); min-width: 96px; }
.sa-sum { display: inline-flex; align-items: center; gap: 6px; }
.sa-meta { font-size: 0.8rem; color: #8fa5bf; margin-top: 4px; }
.sa-meta b { color: var(--text); font-weight: 600; }
.sa-rules ul, .sa-foot ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sa-rules li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.86rem; }
.sa-rules li .sa-chip { min-width: 108px; text-align: center; }
.sa-foot li { font-size: 0.84rem; line-height: 1.5; }
.sa-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.sa-group-sum { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; margin-left: auto; }
/* width:0 + min-width:100% takes the wide table out of the page's intrinsic width. Without it the
   flex item .main grows to the table's 860px and the whole console scrolls sideways on a phone. */
.sa-scroll { overflow-x: auto; width: 0; min-width: 100%; }
.sa-table { min-width: 760px; }
.sa-table th, .sa-table td { padding: 9px 8px; vertical-align: top; white-space: nowrap; }
.sa-table td:nth-child(2), .sa-table td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.sa-table th.sa-num, .sa-table td.sa-num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.sa-net { font-weight: 600; color: var(--text); }
.sa-handle { font-variant-ligatures: none; }
.sa-fail { color: #fb7185; }
/* The console draws .data-table on a WHITE surface in both themes (alisha-refresh-v2), so text
   inside the table must be dark. Measured, not eyeballed: see MEMORY.md. */
.sa-table .sa-net { color: #0f172a; }
.sa-table .sa-dim { color: #566273; }
.sa-table .sa-fail { color: #b4233a; }
.sa-name-defect { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.sa-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; border: 1px solid; white-space: nowrap; }
.sa-chip-reconnect { color: #ffd1d9; background: #5c1a28; border-color: #fb7185; }
.sa-chip-failing   { color: #ffe0c7; background: #5a2a0e; border-color: #fb923c; }
.sa-chip-active    { color: #c8f7d9; background: #123a24; border-color: #4ade80; }
.sa-chip-quiet     { color: #fdecb0; background: #4a3a0a; border-color: #fbbf24; }
.sa-chip-dormant   { color: #e2e8f0; background: #2a3550; border-color: #64748b; }
.sa-chip-never     { color: #e4dcff; background: #33295a; border-color: #a78bfa; }
body.light-theme .sa-banner-stale { background: #fff1e6; color: #6b2d05; border-color: #c2570c; }
body.light-theme .sa-banner-unknown { background: #f1ecff; color: #3b2a78; border-color: #7a5abf; }
body.light-theme .sa-fail { color: #b4233a; }
body.light-theme .sa-note, body.light-theme .sa-dim, body.light-theme .sa-meta { color: #4a5a6b; }
body.light-theme .sa-table .sa-dim { color: #566273; }
body.light-theme .sa-chip-reconnect { color: #8c1a2e; background: #fde8ec; border-color: #c43c50; }
body.light-theme .sa-chip-failing   { color: #8a3a05; background: #ffedd9; border-color: #c2570c; }
body.light-theme .sa-chip-active    { color: #0f5a2c; background: #dcf5e6; border-color: #1a8a4a; }
body.light-theme .sa-chip-quiet     { color: #6b4a00; background: #fdf0c4; border-color: #b88a0e; }
body.light-theme .sa-chip-dormant   { color: #2f3b4d; background: #e8ecf2; border-color: #7a8699; }
body.light-theme .sa-chip-never     { color: #46308a; background: #ece6ff; border-color: #7a5abf; }

/* ---------------------------------------------------------------------------
   AI Usage page, Oct 6 2026. Component-scoped (.ai-*), so nothing above moves.
   Same tokens and same banner treatment as the Social Accounts block.
   --------------------------------------------------------------------------- */
.ai-lede { max-width: 820px; margin: 0 0 14px; color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.ai-note { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.5; color: #8fa5bf; max-width: 860px; }
.ai-dim { color: #8fa5bf; font-size: 0.78rem; }
.ai-h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: var(--text); }
.ai-banner { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; line-height: 1.45; margin: 0 0 16px; max-width: 920px; border: 1px solid; }
.ai-banner-stale { background: #3a1d12; border-color: #fb923c; color: #ffe6d5; }
.ai-banner-unknown { background: #2a2140; border-color: #a78bfa; color: #ece6ff; }

.ai-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 4px; }
.ai-tile { padding: 12px 14px; }
.ai-tile-sub { margin-top: 4px; font-size: 0.72rem; color: #8fa5bf; line-height: 1.35; }

.ai-block { margin-top: 16px; }
.ai-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ai-table th { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(143, 165, 191, 0.28); color: #8fa5bf; font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.ai-table td { padding: 7px 10px; border-bottom: 1px solid rgba(143, 165, 191, 0.12); color: var(--text); }
.ai-table tr:last-child td { border-bottom: 0; }
.ai-warn { color: #fb923c; font-weight: 700; }
.ai-over { color: #fb7185; font-weight: 700; }

.ai-bars { display: flex; align-items: flex-end; gap: 12px; height: 190px; margin: 6px 0 2px; }
.ai-bar-col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ai-bar { width: 100%; max-width: 76px; background: linear-gradient(180deg, #f2c199, #e8a87c); border-radius: 4px 4px 0 0; min-height: 3px; }
.ai-bar-label { font-size: 0.7rem; color: #8fa5bf; white-space: nowrap; }
.ai-bar-value { font-size: 0.68rem; color: #8fa5bf; white-space: nowrap; }

.ai-notes { max-width: 980px; }
.ai-notes p { margin: 6px 0; font-size: 0.82rem; line-height: 1.55; color: var(--text); }
.ai-notes-list { margin: 6px 0; padding-left: 20px; font-size: 0.82rem; line-height: 1.55; color: var(--text); }
.ai-notes-list li { margin: 5px 0; }

body.light-theme .ai-banner-stale { background: #fff1e6; color: #6b2d05; border-color: #c2570c; }
body.light-theme .ai-banner-unknown { background: #f1ecff; color: #3b2a78; border-color: #7a5abf; }
body.light-theme .ai-note, body.light-theme .ai-dim, body.light-theme .ai-tile-sub,
body.light-theme .ai-bar-label, body.light-theme .ai-bar-value { color: #4a5a6b; }
body.light-theme .ai-table th { color: #4a5a6b; }
body.light-theme .ai-warn { color: #8a3a05; }
body.light-theme .ai-over { color: #b4233a; }

/* ---------------------------------------------------------------------------
   T6 — Sidebar: collapsible groups + a labelled Needs Attention pill.
   Oct 6 2026 design review, conditions 3, 4 and 6.
   The flat 43-link list is now six collapsible groups (Command Center, Revenue &
   Sales, Analytics & Reach, Network, Properties, Operations). Groups default
   OPEN so every link stays reachable; the state persists per group via
   toggleSidebarGroup() in property.js. The group label is the toggle.
--------------------------------------------------------------------------- */
.sidebar-section-label.sidebar-group-toggle { justify-content: flex-start; }
.sidebar-group-arrow { margin-left: auto; }

/* Condition 6: the pill was an icon plus a bare number with only a tooltip, so
   a reader could not tell what the count meant. It now carries a visible
   "Needs Attention" label. Full width like the search pill; the count sits at
   the end of the row instead of floating over the icon. */
.sidebar-attention-pill { flex: 1 1 100%; justify-content: flex-start; gap: 8px; padding: 7px 10px; }
.sidebar-attention-label { font-size: 0.78rem; }
.sidebar-attention-pill .sidebar-action-badge { position: static; margin-left: auto; }