:root {
    --bg: #0e0f12;
    --bg-2: #14161a;
    --surface: #1a1d22;
    --surface-2: #22262d;
    --surface-3: #2b3038;
    --line: #2c3037;
    --line-strong: #3a4049;
    --ink: #e8eaed;
    /* Bumped in v1.8.88 from #9ba3ad after user feedback that secondary
       text felt washed out. New value gives 9.89:1 on --bg, 8.72:1 on
       --surface — solidly AAA across the board while staying clearly
       distinct from the brighter --ink. */
    --ink-soft: #b3bbc6;
    /* Bumped in v1.8.85 from #6a7280 (3.95:1 fail) to #8b94a1, then
       again in v1.8.88 to #a3acb8 after Danny said the muted greys were
       still hard to read. New value gives 8.35:1 on --bg, 7.36:1 on
       --surface — AAA across all common backgrounds, including the
       previously-borderline --surface-3 (5.78). */
    --ink-faint: #a3acb8;
    --accent: #d4ff3a;
    --accent-dim: #b8e030;
    --accent-glow: rgba(212, 255, 58, 0.15);
    --warn: #ffb547;
    --danger: #ff5a5f;
    --ok: #4ade80;
    --info: #6cb6ff;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* Material Symbols base — used in place of emoji throughout */
  .mat-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    user-select: none;
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 20;
  }
  .mat-icon.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
  .mat-icon.bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
  .mat-icon.sm { font-size: 0.85em; }
  .mat-icon.lg { font-size: 1.4em; }
  /* Dismiss / close buttons that use a material icon: keep the icon visually
     similar to the original × character size (~18px). Wrap in a flex so
     icon centers vertically inside the button. */
  button.cf-dismiss .mat-icon,
  button.aab-dismiss .mat-icon,
  button.yi-dismiss .mat-icon,
  button.viewer-remove .mat-icon,
  button.parse-toast-close .mat-icon {
    font-size: 18px;
  }
  button.cf-dismiss,
  button.aab-dismiss,
  button.yi-dismiss,
  button.viewer-remove,
  button.parse-toast-close {
    display: inline-flex; align-items: center; justify-content: center;
  }

  html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    min-height: 100vh;
  }
  body { background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }

  .app {
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px 32px 80px;
  }

  /* HEADER */
  .sticky-block {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    transition: box-shadow 0.2s;
  }
  .sticky-block.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--line-strong);
  }
  header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  /* brand + clock are fixed-size header anchors — never shrink/grow, so
     the day-status grid in the middle is the only flexible child. */
  .brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
  .brand-mark {
    width: 32px; height: 32px;
    background: transparent;
    display: grid; place-items: center;
    overflow: hidden;
    flex-shrink: 0;
  }
  .brand-mark svg {
    width: 100%; height: 100%;
    display: block;
  }

  /* Brand-mark animation system.
     The three <rect class="bar bar-N"> elements share a transform-box so
     SVG transforms behave like HTML transforms. Modifier classes opt the
     mark into different animations:
       .brand-reveal     — one-shot stagger reveal (used on initial mount)
       .brand-loading    — looping shimmer (used on the auth loading state)
       .brand-interactive — hover/click micro-interaction (header mark)
     prefers-reduced-motion disables everything. */
  .brand-mark .bar {
    transform-box: fill-box;
    transform-origin: left center;
  }

  .brand-mark.brand-reveal .bar { animation: brandReveal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .brand-mark.brand-reveal .bar-1 { animation-delay: 0s; }
  .brand-mark.brand-reveal .bar-2 { animation-delay: 0.10s; }
  .brand-mark.brand-reveal .bar-3 { animation-delay: 0.20s; }
  @keyframes brandReveal {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
  }

  .brand-mark.brand-loading .bar {
    animation: brandLoading 1.4s ease-in-out infinite;
  }
  .brand-mark.brand-loading .bar-1 { animation-delay: 0s; }
  .brand-mark.brand-loading .bar-2 { animation-delay: 0.18s; }
  .brand-mark.brand-loading .bar-3 { animation-delay: 0.36s; }
  @keyframes brandLoading {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    40%      { transform: scaleX(0.20); opacity: 0.45; }
    70%      { transform: scaleX(1); opacity: 1; }
  }

  .brand-mark.brand-interactive { cursor: pointer; transition: filter 0.2s; }
  .brand-mark.brand-interactive:hover { filter: brightness(1.15); }
  .brand-mark.brand-interactive:hover .bar { animation: brandHover 0.65s ease-in-out; }
  .brand-mark.brand-interactive:hover .bar-1 { animation-delay: 0s; }
  .brand-mark.brand-interactive:hover .bar-2 { animation-delay: 0.08s; }
  .brand-mark.brand-interactive:hover .bar-3 { animation-delay: 0.16s; }
  @keyframes brandHover {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6%); }
  }

  /* Click-pulse — fires once on click via the .clicked class added by JS. */
  .brand-mark.clicked .bar { animation: brandClick 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .brand-mark.clicked .bar-1 { animation-delay: 0s; }
  .brand-mark.clicked .bar-2 { animation-delay: 0.05s; }
  .brand-mark.clicked .bar-3 { animation-delay: 0.10s; }
  @keyframes brandClick {
    0%   { transform: scaleX(1); }
    40%  { transform: scaleX(1.15); }
    100% { transform: scaleX(1); }
  }

  /* Mini variant — used inline (loginLoading badge, sync status, etc) */
  .brand-mark.brand-mark-mini { width: 24px; height: 24px; }

  @media (prefers-reduced-motion: reduce) {
    .brand-mark .bar { animation: none !important; }
  }
  h1 { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
  h1 span { color: var(--ink-faint); font-weight: 400; margin-left: 8px; }
  /* Version number links to the release-notes page */
  .version-link { text-decoration: none; }
  .version-link span { transition: color 0.15s; }
  .version-link:hover span { color: var(--accent); }
  .clock { display: flex; align-items: center; gap: 14px; font-family: 'IBM Plex Mono', monospace; flex: 0 0 auto; }
  .clock-block { text-align: right; margin-left: 10px; }
  .clock-time { font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
  .clock-date {
    font-size: 11px; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px;
  }
  .live-dot {
    width: 8px; height: 8px; background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
    animation: pulse 2s ease-in-out infinite;
  }

  /* Settings + keyboard help buttons */
  .settings-btn, .kb-help-btn, .viewer-preview-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    width: 32px; height: 32px;
    cursor: pointer;
    font-size: 16px;
    display: grid; place-items: center;
    transition: all 0.15s;
    font-family: 'IBM Plex Sans', sans-serif;
  }
  .kb-help-btn { font-weight: 600; }
  .settings-btn:hover, .kb-help-btn:hover, .viewer-preview-btn:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--surface-2);
  }
  /* Hide the preview trigger when the user is REALLY a viewer — only
     owner-mode sessions should see it. `.viewer-preview` is added alongside
     `.viewer-mode` during preview, so the selector matches "viewer-mode
     without preview" = a real viewer session. */
  body.viewer-mode:not(.viewer-preview) .viewer-preview-btn { display: none; }
  /* Visual cue when actively in preview mode — the button shifts to the
     accent so the user knows they're in preview and can click again to exit. */
  body.viewer-preview .viewer-preview-btn {
    color: var(--bg);
    background: var(--info);
    border-color: var(--info);
  }
  /* Floating banner shown during preview. Sits at the top centre, info-blue
     so it reads as "informational mode indicator" rather than a warning. */
  .viewer-preview-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--info);
    color: var(--bg);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9000;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--info);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
  .viewer-preview-banner .mat-icon { font-size: 14px; }
  .viewer-preview-banner .vpb-label { font-weight: 500; }
  .viewer-preview-banner .vpb-exit {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--bg);
    padding: 4px 10px;
    font-family: inherit;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .viewer-preview-banner .vpb-exit:hover { background: var(--surface-2); color: var(--ink); }

  /* Sync indicator */
  .sync-indicator {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all 0.2s;
    cursor: default;
  }

  /* Viewer-presence pill — appears when a manager is actively watching the
     owner's dashboard. Subtle info-blue, gentle pulse on the dot. Visible
     only on owner side; viewers themselves never see this. */
  .viewer-presence {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--info);
    background: rgba(108, 182, 255, 0.06);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--info);
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: help;
    transition: all 0.2s;
  }
  .viewer-presence .vp-dot {
    width: 6px; height: 6px;
    background: var(--info);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(108, 182, 255, 0.15);
    animation: vp-pulse 2.4s ease-in-out infinite;
  }
  .viewer-presence .vp-eye { font-size: 12px; line-height: 1; }
  .viewer-presence .vp-label { font-weight: 500; }
  @keyframes vp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
  }
  @media (prefers-reduced-motion: reduce) {
    .viewer-presence .vp-dot { animation: none; }
  }
  /* On a narrow header, hide the label to save space, just show dot + eye */
  @media (max-width: 720px) {
    .viewer-presence .vp-label { display: none; }
    .viewer-presence { padding: 6px 8px; }
  }
  /* Viewers themselves never see this indicator — they're the ones being
     "watched", the indicator is for the owner. */
  body.viewer-mode .viewer-presence { display: none !important; }

  .sync-indicator .sync-dot {
    width: 6px; height: 6px;
    background: var(--ink-faint);
    border-radius: 50%;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .sync-indicator.synced .sync-dot {
    background: var(--ok);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.15);
  }
  .sync-indicator.syncing .sync-dot,
  .sync-indicator.dirty .sync-dot {
    background: var(--warn);
    box-shadow: 0 0 0 2px rgba(255, 181, 71, 0.15);
    animation: sync-pulse 1.2s ease-in-out infinite;
  }
  .sync-indicator.error .sync-dot {
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(255, 90, 95, 0.2);
  }
  .sync-indicator.error {
    cursor: pointer;
    border-color: var(--danger);
    color: var(--danger);
  }
  .sync-indicator.error:hover { background: rgba(255,90,95,0.05); }
  .sync-indicator.offline .sync-dot {
    background: var(--ink-faint);
  }
  .sync-indicator.offline {
    color: var(--ink-faint);
  }
  @keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* Stats view */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .stats-card {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 18px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .stats-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
  .stats-card .label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .stats-card .value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 28px; font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .stats-card .value.accent { color: var(--accent); }
  .stats-card .value.warn { color: var(--warn); }
  .stats-card .sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    margin-top: 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  /* Latest-archive card — manager's end-of-day summary at top of stats. Big,
     clear, single glance. Uses .la-* prefix because it's a focused mini-section,
     not a regular stats-card. */
  .latest-archive {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--info);
    padding: 22px 24px;
    margin-bottom: 24px;
  }
  .la-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .la-date-block { display: flex; flex-direction: column; gap: 4px; }
  .la-ago {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--info);
    text-transform: uppercase; letter-spacing: 0.12em;
  }
  .la-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .la-hero-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .la-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .la-stat {
    background: var(--surface);
    padding: 18px 14px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .la-stat-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 28px; font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .la-stat-num.accent { color: var(--accent); }
  .la-stat-num.warn { color: var(--warn); }
  .la-stat-suffix {
    font-size: 14px; font-weight: 400;
    color: var(--ink-faint);
    margin-left: 4px;
  }
  .la-stat-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  /* Subtle entrance — when a new archive lands the listener triggers a
     re-render; the .la-fresh class adds a brief lime accent so the manager
     notices the new day. */
  .latest-archive.la-fresh {
    border-left-color: var(--accent);
    animation: la-fresh-pulse 1.6s ease-out;
  }
  @keyframes la-fresh-pulse {
    0% { box-shadow: 0 0 0 0 var(--accent-glow, rgba(212, 255, 58, 0.4)); }
    100% { box-shadow: 0 0 0 8px rgba(212, 255, 58, 0); }
  }
  @media (max-width: 720px) {
    .latest-archive { padding: 18px; }
    .la-stats { grid-template-columns: repeat(2, 1fr); }
    .la-stat-num { font-size: 22px; }
    .la-head { flex-direction: column; align-items: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) {
    .latest-archive.la-fresh { animation: none; }
  }

  .stats-section {
    margin-top: 24px;
  }
  .stats-section-title {
    font-size: 11px; font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding: 0 0 8px 10px;
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .stats-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 9px;
    width: 2px;
    background: var(--accent);
    opacity: 0.7;
  }
  /* Section sub-line (under titles) — small descriptor for context */
  .stats-section-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    margin-bottom: 10px;
    padding-left: 10px;
  }
  .stats-actuals-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    margin-top: 6px;
  }
  .stats-actuals-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--ink-faint);
    font-weight: 500;
    border-bottom: 1px solid var(--line);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .stats-actuals-table th:nth-child(2),
  .stats-actuals-table th:nth-child(3) { text-align: right; }
  .stats-actuals-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }
  .stats-actuals-table tr:last-child td { border-bottom: none; }
  .stats-actuals-table td.num { text-align: right; font-weight: 600; }
  .stats-actuals-table td.num.warn { color: var(--warn); }
  .stats-actuals-table td.num.ok { color: var(--ok); }
  .stats-actuals-table td.muted { color: var(--ink-faint); font-size: 10px; }
  .stats-actuals-table .qid-mini {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    padding: 1px 5px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-soft);
  }
  .stats-actuals-table th.trend-col {
    text-align: left;
    width: 100px;
  }
  .stats-actuals-table td.trend-cell {
    width: 100px;
    padding: 4px 8px;
  }
  .actuals-sparkline {
    display: block;
  }
  .actuals-sparkline .spark-baseline {
    stroke: var(--line-strong);
    stroke-width: 0.5;
    opacity: 0.6;
  }
  .actuals-sparkline .bar {
    transition: opacity 0.1s;
  }
  .actuals-sparkline .bar:hover { opacity: 0.7; }
  .actuals-sparkline .bar-warn { fill: var(--warn); }
  .actuals-sparkline .bar-ok { fill: var(--ok); }
  .actuals-sparkline .bar-neutral { fill: var(--ink-faint); }
  .actuals-sparkline .bar-clip {
    fill: var(--ink);
  }
  .stats-empty-sub {
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    padding: 12px 0;
    font-style: italic;
  }
  .stats-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 60px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
  }
  .stats-bar-row .label { color: var(--ink-soft); }
  .stats-bar-track {
    height: 6px;
    background: var(--surface-2);
    overflow: hidden;
    position: relative;
  }
  .stats-bar-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
  }
  .stats-bar-fill.warn { background: var(--warn); }
  .stats-bar-fill.ok { background: var(--ok); }
  .stats-bar-row .num {
    text-align: right;
    color: var(--ink-faint);
    font-size: 10px;
  }

  .stats-empty {
    padding: 60px 20px;
    text-align: center;
    border: 1px dashed var(--line);
    color: var(--ink-faint);
  }
  .stats-empty p { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
  .stats-empty span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }

  /* Settings modal sections.
     The bottom-border under each title underlines the section. For
     sections after the first, the `.spaced` modifier also draws a
     stronger separator above the title so the modal reads as discrete
     chunks rather than one long scroll. */
  .settings-section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .settings-section-title.spaced {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line-strong);
  }
  .settings-stats {
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 10px 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-soft);
    margin-bottom: 12px;
  }
  .settings-stats div { margin: 2px 0; }
  .settings-stats strong { color: var(--ink); font-weight: 600; }
  .settings-data-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }
  .settings-warning {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--warn);
    line-height: 1.5;
    padding: 8px 10px;
    border-left: 2px solid var(--warn);
    background: rgba(255, 181, 71, 0.05);
  }

  /* Settings toggle row (e.g. auto-sort) */
  .settings-toggle-row {
    padding: 10px 0;
  }
  .toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
  }
  .toggle-label input[type="checkbox"] {
    width: 16px; height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
  }
  .toggle-text {
    display: flex; flex-direction: column; gap: 4px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    color: var(--ink);
  }
  .toggle-text strong {
    font-weight: 600;
    color: var(--ink);
  }
  .toggle-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    line-height: 1.5;
    font-weight: 400;
  }

  /* Sync indicator brief flash (e.g. on smart auto-sort) */
  .sync-indicator.flashed {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
  }
  .sync-indicator.flashed .sync-dot {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.2);
  }

  /* Undo toast variant */
  .toast.undo-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
  }
  .toast.undo-toast button {
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    padding: 4px 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s;
  }
  .toast.undo-toast button:hover { background: var(--accent-dim); }

  /* New-version-available toast (PWA service worker update) */
  .toast.update-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-color: var(--info);
    box-shadow: 0 0 24px rgba(108, 182, 255, 0.15);
    /* Override the base .toast auto-fade — the update prompt has to stay
       on screen until the user clicks Refresh now or dismisses it. */
    animation: toast-in 0.3s ease-out;
  }
  .toast.update-toast button {
    background: var(--info);
    color: var(--bg);
    border: 1px solid var(--info);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    padding: 4px 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer;
    transition: filter 0.15s;
  }
  .toast.update-toast button:hover { filter: brightness(1.1); }

  /* End-of-day modal */
  .eod-modal { max-width: 540px; }

  /* Entrance: subtle slide-up + fade. Plays once when the modal opens. */
  .eod-modal.eod-enter {
    animation: eod-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes eod-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .eod-modal.eod-enter { animation: none; }
  }

  /* EOD header — date as a small caption above the heroLine */
  .eod-head {
    align-items: flex-start;
  }
  .eod-date-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 2px;
  }

  /* Hero band — big number + meta. Designed to be screenshottable. */
  .eod-hero {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 20px;
    background: linear-gradient(135deg, var(--bg-2), var(--surface));
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    margin-bottom: 18px;
  }
  .eod-hero.hero-ok {
    border-left-color: var(--ok);
    background: linear-gradient(135deg, rgba(74,222,128,0.05), var(--surface));
  }
  .eod-hero.hero-warn {
    border-left-color: var(--warn);
  }
  .eod-hero-pct {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 56px; font-weight: 500;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .eod-hero.hero-ok .eod-hero-pct { color: var(--ok); }
  .eod-hero.hero-warn .eod-hero-pct { color: var(--warn); }
  .eod-hero-pct-suffix {
    font-size: 28px;
    color: var(--ink-faint);
    margin-left: 4px;
    font-weight: 400;
  }
  .eod-hero-meta {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
  }
  .eod-hero-line {
    font-size: 12px;
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
  }
  .eod-hero-target {
    color: var(--ink-faint);
    font-size: 11px;
  }
  @media (max-width: 540px) {
    .eod-hero { gap: 12px; padding: 16px 14px; }
    .eod-hero-pct { font-size: 44px; }
    .eod-hero-pct-suffix { font-size: 22px; }
  }

  /* Workload-journey block embedded in the EOD modal. Inherits all
     .workload-hero / .workload-balance styling — we just override
     spacing so it sits cleanly between the hero and the summary grid. */
  .eod-workload {
    margin: 14px 0 6px;
  }

  /* "Finish ready quotes (X)" row — sits between the workload block
     and the summary grid when there are quotes whose items are all
     resolved but never explicitly FINISH'd. */
  .eod-finish-ready-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 6px 0 10px;
    background: var(--accent-glow);
    border-left: 2px solid var(--accent);
  }
  .eod-finish-ready-msg {
    flex: 1;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
  }
  .eod-finish-ready-msg strong { color: var(--ink); }
  #eodFinishReadyBtn {
    font-size: 11px;
    padding: 6px 12px;
    white-space: nowrap;
  }
  @media (max-width: 540px) {
    .eod-finish-ready-row { flex-direction: column; align-items: stretch; }
    #eodFinishReadyBtn { width: 100%; }
  }

  .eod-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 18px;
  }
  .eod-stat {
    background: var(--surface);
    padding: 14px 12px;
  }
  .eod-stat-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
  .eod-stat-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px; font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .eod-stat-of {
    font-size: 12px; font-weight: 400;
    color: var(--ink-faint);
    margin-left: 4px;
  }
  .eod-stat-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    margin-top: 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .eod-section {
    margin-top: 14px;
  }
  .eod-section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .eod-incomplete-list {
    max-height: 180px;
    overflow-y: auto;
    background: var(--bg-2);
    border: 1px solid var(--line);
  }
  .eod-incomplete-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    align-items: center;
    cursor: pointer;
    transition: background 0.12s;
  }
  .eod-incomplete-row:hover { background: var(--surface-2); }
  .eod-incomplete-row:last-child { border-bottom: none; }
  .eod-incomplete-row .eod-carry-check {
    width: 14px; height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
  }
  .eod-incomplete-row .eod-qid { color: var(--ink); font-weight: 500; }
  .eod-incomplete-row .eod-meta { color: var(--warn); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
  .eod-incomplete-row .eod-time { color: var(--ink-faint); font-size: 10px; }
  .eod-section-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    margin-top: 8px;
    line-height: 1.5;
  }

  /* Tomorrow-paste queue inside the EOD modal (v1.8.105) */
  .eod-tomorrow-queue .eod-tomorrow-text {
    width: 100%;
    margin-top: 10px;
    min-height: 80px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
  }
  .eod-tomorrow-queue .eod-tomorrow-text:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--accent);
  }
  .eod-tomorrow-queue .eod-tomorrow-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }
  .eod-tomorrow-queue .eod-tomorrow-status {
    flex: 1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ok);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .eod-tomorrow-queue .btn-sub {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .eod-tomorrow-queue .btn-sub:hover {
    color: var(--danger);
    border-color: var(--danger);
  }
  .queued-alloc-banner {
    border-left-color: var(--info) !important;
    background: rgba(108, 182, 255, 0.08) !important;
  }
  .queued-alloc-banner .cf-icon { color: var(--info); }

  /* === REFERENCE MODAL (v1.8.121) === */
  .ref-grading-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    margin-top: 8px;
  }
  .ref-grading-table th {
    text-align: left;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
  }
  .ref-grading-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
  }
  .ref-grading-table tr:last-child td { border-bottom: none; }
  .ref-grading-table tr:nth-child(even) td { background: rgba(255,255,255,0.012); }
  .ref-grading-table .ref-grade {
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
  }

  .ref-phrase-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }
  .ref-phrases-empty {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    padding: 10px 0;
  }
  .ref-phrase-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
  }
  .ref-phrase-main {
    flex: 1;
    cursor: copy;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .ref-phrase-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }
  .ref-phrase-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .ref-phrase-main:hover .ref-phrase-text { color: var(--accent); }
  .ref-phrase-main:hover .ref-phrase-label { color: var(--accent-dim); }
  .ref-phrase-row .btn-sub {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
  }
  .ref-phrase-row .ref-phrase-copy:hover { color: var(--accent); border-color: var(--accent); }
  .ref-phrase-row .ref-phrase-del:hover { color: var(--danger); border-color: var(--danger); }

  /* Carry-forward banner shown at top of main content on a new day */
  .carry-forward-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--accent-glow);
    border-left: 2px solid var(--accent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
  }
  .carry-forward-banner .cf-icon {
    color: var(--accent);
    font-size: 14px;
  }
  .carry-forward-banner .cf-text {
    flex: 1;
    line-height: 1.5;
  }
  .carry-forward-banner .cf-text strong { color: var(--accent); font-weight: 600; }
  .carry-forward-banner .cf-dismiss {
    background: transparent; border: none;
    color: var(--ink-faint);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.15s;
  }
  .carry-forward-banner .cf-dismiss:hover { color: var(--ink); }

  /* Auto-archive nudge banner */
  .auto-archive-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: rgba(255, 181, 71, 0.06);
    border-left: 2px solid var(--warn);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
  }
  .auto-archive-banner .aab-icon {
    color: var(--warn);
    font-size: 14px;
  }
  .auto-archive-banner .aab-text {
    flex: 1; line-height: 1.5;
  }
  .auto-archive-banner .aab-text strong {
    color: var(--warn);
    font-weight: 600;
  }
  .auto-archive-banner .btn.primary {
    background: var(--warn);
    border-color: var(--warn);
    padding: 5px 12px;
    font-size: 10px;
  }
  .auto-archive-banner .btn.primary:hover {
    background: #f5a435;
    border-color: #f5a435;
  }
  .auto-archive-banner .aab-dismiss {
    background: transparent; border: none;
    color: var(--ink-faint);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.15s;
  }
  .auto-archive-banner .aab-dismiss:hover { color: var(--ink); }

  /* Per-quote notes — compact button in qhead */
  .qnotes-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer;
    padding: 4px 8px;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.15s;
  }
  .qnotes-btn:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--surface-2);
  }
  .qnotes-btn.has-note {
    color: var(--info);
    border-color: var(--info);
    background: rgba(108, 182, 255, 0.06);
  }
  .qnotes-btn.has-note:hover {
    background: rgba(108, 182, 255, 0.12);
  }
  .qnotes-btn .qnotes-icon {
    font-size: 11px;
    line-height: 1;
  }
  .qnotes-btn-label { font-size: 10px; }
  .qnotes-editor {
    padding: 10px 14px 12px;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
  }
  .qnotes-textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 10px;
    resize: vertical;
  }
  .qnotes-textarea:focus { outline: none; border-color: var(--accent); }
  .qnotes-actions {
    display: flex; justify-content: flex-end; gap: 6px;
    margin-top: 8px;
  }
  .qnotes-actions .btn { padding: 5px 12px; font-size: 10px; }
  .qnotes-counter {
    margin-top: 4px;
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    transition: color 0.15s;
  }
  .qnotes-counter.warn { color: var(--warn); }
  .qnotes-counter.over { color: var(--danger); font-weight: 600; }

  /* History search */
  .history-search-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .history-search-row input[type="search"] {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    transition: border-color 0.15s;
  }
  .history-search-row input[type="search"]:focus {
    outline: none; border-color: var(--accent);
  }
  .history-search-stats {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  .history-recover-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .history-recover-btn:hover {
    border-color: var(--info);
    color: var(--info);
    background: rgba(108, 182, 255, 0.04);
  }
  .history-recover-btn .mat-icon { font-size: 14px; }

  /* Manager tutorial modal */
  .mgr-tutorial-modal {
    max-width: 560px;
  }
  .mgr-tut-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--info);
    text-transform: uppercase; letter-spacing: 0.14em;
    margin-bottom: 4px;
  }
  .mgr-tut-intro {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 18px;
    padding: 12px 14px;
    background: rgba(108, 182, 255, 0.05);
    border-left: 2px solid var(--info);
  }
  .mgr-tut-section {
    margin-bottom: 18px;
  }
  .mgr-tut-section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 8px;
    padding-left: 10px;
    position: relative;
  }
  .mgr-tut-section-title::before {
    content: '';
    position: absolute;
    left: 0; top: 1px; bottom: 1px;
    width: 2px;
    background: var(--accent);
    opacity: 0.7;
  }
  .mgr-tut-section p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-soft);
    padding-left: 10px;
  }
  .mgr-tut-rows {
    display: flex; flex-direction: column;
    gap: 10px;
    padding-left: 10px;
  }
  .mgr-tut-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: start;
  }
  .mgr-tut-key {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.08em;
    padding-top: 1px;
  }
  .mgr-tut-val {
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .mgr-tut-foot {
    display: flex; justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
  }
  @media (max-width: 560px) {
    .mgr-tut-row { grid-template-columns: 1fr; gap: 2px; }
  }

  /* Recover modal */
  .recover-modal { max-width: 560px; }
  .recover-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 14px;
  }
  .recover-summary-cell {
    background: var(--surface);
    padding: 12px 10px;
    text-align: center;
  }
  .recover-summary-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 22px; font-weight: 500;
    color: var(--ink);
    line-height: 1;
  }
  .recover-summary-num.warn { color: var(--warn); }
  .recover-summary-num.ok { color: var(--ok); }
  .recover-summary-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-top: 4px;
  }
  .recover-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--line);
    margin-bottom: 14px;
  }
  .recover-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }
  .recover-row:last-child { border-bottom: none; }
  .recover-row .rec-date { color: var(--ink); font-weight: 500; }
  .recover-row .rec-meta { color: var(--ink-faint); font-size: 10px; }
  .recover-row .rec-status {
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 3px 8px;
    border: 1px solid var(--line);
  }
  .recover-row .rec-status.synced { color: var(--ok); border-color: var(--ok); background: rgba(74, 222, 128, 0.06); }
  .recover-row .rec-status.local-only { color: var(--warn); border-color: var(--warn); background: rgba(255, 181, 71, 0.06); }
  .recover-empty {
    padding: 28px;
    text-align: center;
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }
  @media (max-width: 720px) {
    .history-recover-btn .recover-label { display: none; }
  }
  .history-empty-search {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }

  /* Yesterday-incomplete banner */
  .yesterday-incomplete-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: rgba(108, 182, 255, 0.06);
    border-left: 2px solid var(--info);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
  }
  .yesterday-incomplete-banner .yi-icon {
    color: var(--info);
    font-size: 14px;
  }
  .yesterday-incomplete-banner .yi-text {
    flex: 1; line-height: 1.5;
  }
  .yesterday-incomplete-banner .yi-text strong {
    color: var(--info);
    font-weight: 600;
  }
  .yesterday-incomplete-banner .btn.primary {
    background: var(--info);
    border-color: var(--info);
    color: var(--bg);
    padding: 5px 12px;
    font-size: 10px;
  }
  .yesterday-incomplete-banner .btn.primary:hover {
    filter: brightness(1.1);
  }
  .yesterday-incomplete-banner .yi-dismiss {
    background: transparent; border: none;
    color: var(--ink-faint);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.15s;
  }
  .yesterday-incomplete-banner .yi-dismiss:hover { color: var(--ink); }

  /* Reference panel hints expander */
  .legend-hints {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .legend-hints summary {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .legend-hints summary::-webkit-details-marker { display: none; }
  .legend-hints summary::before {
    content: '▸ ';
    font-size: 10px;
    transition: transform 0.15s;
  }
  .legend-hints[open] summary::before { content: '▾ '; }
  .legend-hints summary:hover { color: var(--ink); }
  .legend-hint-body {
    margin-top: 8px;
    line-height: 1.7;
  }

  /* Access-revoked banner (viewer mode, fatal) */
  .access-revoked-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--surface);
    border-bottom: 2px solid var(--danger);
    padding: 14px 20px;
    display: flex; align-items: center; gap: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  }
  .access-revoked-banner .ar-icon {
    color: var(--danger);
    font-size: 18px;
  }
  .access-revoked-banner .ar-text {
    flex: 1; line-height: 1.4;
  }
  .access-revoked-banner .btn.primary {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--bg);
  }

  /* === VIEWER MODE === Read-only access for managers / sharing.
     Hides write affordances and process metrics. */
  body.viewer-mode .input-panel,
  body.viewer-mode .stats-panel,
  body.viewer-mode .add-meeting-btn,
  body.viewer-mode .archive-btn,
  body.viewer-mode .qcheck,
  body.viewer-mode .qmissing-btn,
  body.viewer-mode .qremove-btn,
  body.viewer-mode .qdupe-btn,
  body.viewer-mode .add-item-row,
  body.viewer-mode .qstart-btn,
  body.viewer-mode .quote-pause-btn,
  body.viewer-mode .quote-index-grip,
  body.viewer-mode .suggestion-banner,
  body.viewer-mode .settings-btn,
  body.viewer-mode .reset-btn,
  body.viewer-mode .input-collapse-toggle {
    display: none !important;
  }
  body.viewer-mode .qcheck-cell { visibility: hidden; }
  body.viewer-mode .quote { cursor: default; }
  body.viewer-mode aside { display: none; }
  body.viewer-mode .layout { grid-template-columns: 60px 1fr; }
  body.viewer-mode main { grid-column: 2; }

  /* Old viewer-banner kept for backwards compat; new viewer-hero is below. */
  .viewer-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: rgba(108, 182, 255, 0.06);
    border-left: 2px solid var(--info);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--info);
  }
  .viewer-banner .vb-icon { font-size: 14px; color: var(--info); }
  .viewer-banner .vb-text {
    flex: 1; line-height: 1.5;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 10px;
    color: var(--ink-soft);
  }
  .viewer-banner .vb-text strong {
    color: var(--info); font-weight: 500;
    text-transform: none;
  }

  /* === MANAGER STATUS VIEW === */
  /* The manager-facing 30-second check-in. Hierarchy, scannability, and
     restraint above all else — a manager who opens this should know what's
     happening in five seconds without scrolling. */
  #view-status #statusContent {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 24px 60px;
  }
  .status-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
  }
  .status-header-left { display: flex; align-items: baseline; gap: 16px; }
  .status-title {
    font-size: 20px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0;
  }
  .status-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .status-pill {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink);
  }
  .status-pill.ok { border-color: var(--ok); color: var(--ok); background: rgba(74, 222, 128, 0.06); }
  .status-pill.warn { border-color: var(--warn); color: var(--warn); background: rgba(255, 181, 71, 0.06); }
  .status-pill.danger { border-color: var(--danger); color: var(--danger); background: rgba(255, 90, 95, 0.06); }
  .status-pill.neutral { border-color: var(--line-strong); color: var(--ink-faint); }

  .status-section { margin-bottom: 26px; }
  .status-section-title {
    display: flex; align-items: center; gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--accent);
  }
  .status-section-count {
    font-size: 10px; color: var(--ink-faint);
    background: var(--surface-2);
    padding: 2px 6px;
    border: 1px solid var(--line);
  }
  .status-copy-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 4px 10px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all 0.15s;
    display: inline-flex; align-items: center;
  }
  .status-copy-btn:hover {
    border-color: var(--info);
    color: var(--info);
    background: rgba(108, 182, 255, 0.05);
  }

  /* === NOW: active quote card === */
  .status-now-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    padding: 14px 16px;
  }
  .status-now-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
  }
  .status-now-qid {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px; font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  .status-now-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 2px 8px;
  }
  .status-now-status.running { color: var(--bg); background: var(--accent); border: 1px solid var(--accent); }
  .status-now-status.paused { color: var(--bg); background: var(--warn); border: 1px solid var(--warn); }
  .status-now-status.pending { color: var(--ink-faint); border: 1px solid var(--line); }
  .status-now-metrics {
    display: flex; gap: 28px; flex-wrap: wrap;
  }
  .status-now-metric { display: flex; flex-direction: column; gap: 3px; }
  .status-now-mlabel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .status-now-mvalue {
    font-size: 16px; font-weight: 500;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .status-now-mvalue.warn { color: var(--warn); }
  .status-now-mof { color: var(--ink-faint); font-size: 0.7em; }

  .status-empty-state {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 14px 16px;
    color: var(--ink-soft);
    display: flex; align-items: center; gap: 10px;
    font-size: 12px;
  }
  .status-empty-state.ok { border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.05); color: var(--ok); }
  .status-empty-state .mat-icon { font-size: 18px; }

  /* === Metric grids (shared between Today / Last day / This week) === */
  .status-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .status-metrics-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .status-metrics-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 540px; }
  .status-metric-card {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .status-metric-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .status-metric-value {
    font-size: 22px; font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .status-metric-value.ok { color: var(--ok); }
  .status-metric-value.warn { color: var(--warn); }
  .status-metric-value.danger { color: var(--danger); }
  .status-metric-of { color: var(--ink-faint); font-size: 0.55em; font-weight: 400; }
  .status-metric-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
    line-height: 1.3;
  }

  /* === Active flags list === */
  .status-flag-list {
    background: var(--surface);
    border: 1px solid var(--warn);
    border-left-width: 3px;
  }
  .status-flag-row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
  }
  .status-flag-row:last-child { border-bottom: none; }
  .status-flag-qid {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
  }
  .status-flag-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-flag-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--warn);
    min-width: 32px;
    text-align: right;
  }

  /* Mobile/narrow viewport: stack metrics into 2 columns */
  @media (max-width: 760px) {
    .status-metrics-grid,
    .status-metrics-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .status-metrics-grid-2 { grid-template-columns: 1fr; }
    .status-now-metrics { gap: 16px; }
  }

  /* === INSIGHTS LIST === */
  /* Auto-generated observations on stats page. One row per insight, simple
     icon + prose. Subtle accent on the icon by insight type. */
  .status-insights-list {
    display: flex; flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .status-insight-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 12px;
    line-height: 1.5;
  }
  .status-insight-row:last-child { border-bottom: none; }
  .status-insight-icon {
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
    color: var(--ink-faint);
  }
  .status-insight-row.pace-improving .status-insight-icon { color: var(--ok); }
  .status-insight-row.pace-slipping .status-insight-icon { color: var(--warn); }
  .status-insight-row.pace-steady .status-insight-icon { color: var(--info); }
  .status-insight-row.pace-current .status-insight-icon { color: var(--info); }
  .status-insight-row.dow-pattern .status-insight-icon { color: var(--accent); }
  .status-insight-row.streak .status-insight-icon { color: var(--accent); }
  .status-insight-row.top-flag .status-insight-icon { color: var(--warn); }

  /* === SLOW-QUOTE ITEMS LIST === */
  /* Each row shows: item name, "in X of Y slow quotes" count, a bar
     visualising the proportion, and a small note about how often it's also
     in on-pace quotes (so a manager can spot "this is in everything" vs
     "this skews to slow quotes"). */
  .slow-items-list {
    display: flex; flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .slow-item-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  .slow-item-row:last-child { border-bottom: none; }
  .slow-item-main {
    display: flex; align-items: baseline; gap: 12px;
    justify-content: space-between;
  }
  .slow-item-name {
    color: var(--ink); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .slow-item-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--warn);
    text-transform: uppercase; letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  .slow-item-bar {
    width: 100%; height: 4px;
    background: var(--surface-2);
  }
  .slow-item-bar > span {
    display: block; height: 100%;
    background: var(--warn);
    transition: width 0.3s;
  }
  .slow-item-note {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  /* === PACE HEATMAP === */
  /* Grid of (weekday × hour) cells coloured by avg pace ratio. Cell labels
     show the numeric ratio so the manager can read it without hovering.
     Empty cells (insufficient data) stay neutral so they don't distort
     the visual pattern. */
  .heatmap-grid {
    display: grid;
    grid-template-columns: 50px repeat(9, minmax(40px, 1fr));
    gap: 3px;
    margin-top: 8px;
  }
  .heatmap-corner { /* empty top-left intersection */ }
  .heatmap-hour-label,
  .heatmap-day-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
    text-align: center;
    align-self: center;
  }
  .heatmap-day-label { text-align: right; padding-right: 6px; }
  .heatmap-cell {
    aspect-ratio: 1.4 / 1;
    min-height: 36px;
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.12s;
    cursor: help;
  }
  .heatmap-cell:hover { transform: scale(1.06); }
  .heatmap-cell .heatmap-cell-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--bg);
    font-weight: 600;
  }
  .heatmap-cell.empty {
    background: var(--surface);
    border-color: var(--line);
  }
  .heatmap-cell.fast { background: var(--accent); border-color: var(--accent); }
  .heatmap-cell.ontrack { background: var(--info); border-color: var(--info); }
  .heatmap-cell.slightly-slow { background: var(--warn); border-color: var(--warn); }
  .heatmap-cell.slow { background: var(--danger); border-color: var(--danger); }

  .heatmap-legend {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .heatmap-legend .hl-dot {
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
  }
  .heatmap-legend .hl-dot.fast { background: var(--accent); }
  .heatmap-legend .hl-dot.ontrack { background: var(--info); }
  .heatmap-legend .hl-dot.slightly-slow { background: var(--warn); }
  .heatmap-legend .hl-dot.slow { background: var(--danger); }
  .heatmap-legend .hl-text { margin-right: 6px; }

  @media (max-width: 760px) {
    .heatmap-grid {
      grid-template-columns: 40px repeat(9, 1fr);
      gap: 2px;
    }
    .heatmap-cell { min-height: 28px; }
    .heatmap-cell .heatmap-cell-value { font-size: 10px; }
  }

  /* Viewer-mode banner already styled above (.viewer-banner). The rich
     manager dashboard hero is .viewer-hero, styled near the stats section. */

  /* Viewer list (in Settings) */
  .viewer-list {
    display: flex; flex-direction: column; gap: 4px;
  }
  .viewer-empty {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    padding: 8px 0;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .viewer-row {
    display: flex; align-items: center;
    padding: 6px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
  }
  .viewer-email {
    flex: 1;
    color: var(--ink);
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  }
  .viewer-remove {
    background: transparent; border: none;
    color: var(--ink-faint);
    font-size: 16px; line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    transition: color 0.15s;
  }
  .viewer-remove:hover { color: var(--danger); }
  .viewer-add-row {
    display: flex; gap: 6px; margin-top: 8px;
  }
  .viewer-add-row input {
    flex: 1;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
  }
  .viewer-add-row input:focus { outline: none; border-color: var(--accent); }
  .viewer-add-row .btn {
    padding: 7px 14px;
    flex-shrink: 0;
  }

  /* Active "working on now" row in viewer stats */
  .stats-active-row {
    display: flex; align-items: center; gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--accent-glow);
    border-left: 2px solid var(--accent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
  }
  .stats-active-label {
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 10px;
  }
  .stats-active-name {
    color: var(--ink); font-weight: 500;
    flex: 1;
  }
  .eod-warnings {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(255, 181, 71, 0.05);
    border-left: 2px solid var(--warn);
  }
  .eod-warn-row {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--warn);
    line-height: 1.5;
  }

  /* EOD changes section: lists items added, removed, and currently flagged
     missing during the day. Subtle and compact — sits in the EOD modal as
     an audit aid for reconciling the day against the original allocation. */
  .eod-changes {
    margin-top: 18px;
  }
  .eod-changes .eod-change-cat {
    margin-top: 10px;
    border: 1px solid var(--line);
    background: var(--surface-2);
  }
  .eod-changes .eod-change-cat-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-soft);
    background: var(--surface);
  }
  .eod-changes .eod-change-cat-head .eod-change-icon {
    font-size: 14px;
    line-height: 1;
  }
  .eod-changes .eod-change-cat-head .eod-change-count {
    margin-left: auto;
    color: var(--ink-faint);
    font-weight: 500;
  }
  /* Per-category accent on the head bar */
  .eod-changes .kind-added .eod-change-cat-head { color: var(--ok); border-bottom-color: rgba(74, 222, 128, 0.2); }
  .eod-changes .kind-added .eod-change-icon { color: var(--ok); }
  .eod-changes .kind-removed .eod-change-cat-head { color: var(--danger); border-bottom-color: rgba(255, 90, 95, 0.2); }
  .eod-changes .kind-removed .eod-change-icon { color: var(--danger); }
  .eod-changes .kind-missing .eod-change-cat-head { color: var(--warn); border-bottom-color: rgba(255, 181, 71, 0.2); }
  .eod-changes .kind-missing .eod-change-icon { color: var(--warn); }

  .eod-changes .eod-change-cat-list {
    /* No fixed height — let it grow. The modal scrolls if needed. */
  }
  .eod-changes .eod-change-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.4;
  }
  .eod-changes .eod-change-row:last-child { border-bottom: none; }
  .eod-changes .eod-change-qid {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
  }
  .eod-changes .eod-change-name {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .eod-changes .eod-change-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    text-align: right;
    min-width: 40px;
  }
  /* Strikethrough removed items so the visual matches the meaning */
  .eod-changes .kind-removed .eod-change-name {
    text-decoration: line-through;
    text-decoration-color: var(--ink-faint);
    text-decoration-thickness: 1px;
    color: var(--ink-soft);
  }
  .eod-modal .modal-foot .btn.primary {
    background: var(--warn);
    border-color: var(--warn);
  }
  .eod-modal .modal-foot .btn.primary:hover {
    background: #f5a435;
    border-color: #f5a435;
    box-shadow: 0 4px 12px rgba(255, 181, 71, 0.2);
  }

  /* Meeting modal mode tabs (single vs bulk) */
  .meeting-mode-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
  }
  .mm-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--ink-faint);
    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    position: relative;
  }
  .mm-tab:hover { color: var(--ink-soft); background: var(--surface-2); }
  .mm-tab.active {
    color: var(--ink);
    background: var(--surface);
  }
  .mm-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--accent);
  }
  #mfBulkBody textarea {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; line-height: 1.5;
    resize: vertical;
  }
  #mfBulkBody textarea:focus { outline: none; border-color: var(--accent); }
  #mfBulkBody code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    background: var(--bg);
    padding: 1px 4px;
    border: 1px solid var(--line);
    color: var(--accent);
  }

  /* Pull-forward button on history rows */
  .pull-forward {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 4px 9px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all 0.15s;
  }
  .pull-forward:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
  }
  .history-toggle-untracked {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 7px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all 0.15s;
    margin-left: 6px;
  }
  .history-toggle-untracked:hover {
    border-color: var(--ink-soft);
    color: var(--ink);
  }
  .history-print-spares {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    cursor: pointer;
    padding: 3px 7px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s;
  }
  .history-print-spares:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Keyboard help modal */
  .kb-section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .kb-section-title:not(:first-child) { margin-top: 16px; }
  .kb-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    color: var(--ink-soft);
  }
  .kb-row kbd {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    padding: 2px 6px;
    min-width: 22px; text-align: center;
    letter-spacing: 0.04em;
  }
  .kb-row span { flex: 1; margin-left: 4px; }

  /* "Now" line between quote cards */
  .now-line {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    padding: 0;
    pointer-events: none;
  }
  .now-line .now-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 700;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--accent-dim);
    padding: 2px 8px;
    text-transform: uppercase; letter-spacing: 0.1em;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .now-line .now-label::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    animation: pulse 2s ease-in-out infinite;
  }
  .now-line .now-bar {
    height: 1px;
    background: linear-gradient(to right, var(--accent), transparent);
  }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

  /* Lunch block — sits inline with the quotes in the schedule.
     Click anywhere to open the per-day lunch override modal.
     Visual treatment: slim, amber-tinted, distinct from cards but on the schedule grain. */
  .lunch-block {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    margin: 10px 0;
    background: rgba(255, 181, 71, 0.05);
    border: 1px dashed var(--warn);
    border-left: 3px solid var(--warn);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .lunch-block:hover {
    background: rgba(255, 181, 71, 0.1);
  }
  .lunch-block.overridden {
    border-color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(212, 255, 58, 0.05);
  }
  .lunch-block.overridden:hover { background: rgba(212, 255, 58, 0.08); }
  .lunch-block .lunch-icon {
    width: 32px; height: 32px;
    border: 1px solid var(--warn);
    background: rgba(255, 181, 71, 0.1);
    color: var(--warn);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .lunch-block.overridden .lunch-icon {
    border-color: var(--accent);
    background: rgba(212, 255, 58, 0.1);
    color: var(--accent);
  }
  .lunch-block .lunch-icon .mat-icon { font-size: 18px; }
  .lunch-block .lunch-info { min-width: 0; }
  .lunch-block .lunch-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 700;
    color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 2px;
  }
  .lunch-block.overridden .lunch-label { color: var(--accent); }
  .lunch-block .lunch-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--ink-soft);
    letter-spacing: 0.04em;
  }
  .lunch-block .lunch-edit {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 5px 9px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .lunch-block:hover .lunch-edit {
    border-color: var(--ink-soft);
    color: var(--ink-soft);
  }
  .lunch-block.overridden .lunch-edit { border-color: var(--accent-dim); color: var(--accent); }

  /* TABS */
  .tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    background: var(--bg);
  }
  .tab {
    padding: 14px 22px; background: none; border: none;
    color: var(--ink-faint); font-family: inherit;
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    cursor: pointer; position: relative;
    transition: color 0.15s;
  }
  .tab::before {
    content: ''; position: absolute;
    bottom: -1px; left: 12px; right: 12px;
    height: 1px; background: var(--ink-faint);
    opacity: 0;
    transition: opacity 0.15s;
  }
  .tab:hover { color: var(--ink-soft); }
  .tab:hover:not(.active)::before { opacity: 1; }
  .tab.active { color: var(--ink); }
  .tab.active::after {
    content: ''; position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px; background: var(--accent);
  }
  .tab .tab-count {
    transition: background 0.15s, color 0.15s;
  }
  .tab:hover .tab-count { background: var(--surface-3); color: var(--ink); }
  .tab-count {
    display: inline-block; margin-left: 8px;
    padding: 1px 7px; background: var(--surface-2);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
  }
  .tab.active .tab-count { background: var(--accent); color: var(--bg); }
  .tab .tab-icon {
    font-size: 16px;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--ink-faint);
    transition: color 0.15s;
  }
  .tab:hover .tab-icon { color: var(--ink-soft); }
  .tab.active .tab-icon { color: var(--accent); }
  /* Mid-size button icon (sidebar Actions, modal action buttons) */
  .btn .btn-icon {
    font-size: 14px;
    vertical-align: -3px;
    margin-right: 6px;
    opacity: 0.8;
  }
  /* Section title icon for status-section-title across Status/Stats/Strengths */
  .status-section-title .section-icon {
    font-size: 16px;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--accent);
    opacity: 0.85;
  }
  /* Narrow-viewport: hide tab icons so labels still fit */
  @media (max-width: 720px) {
    .tab .tab-icon { display: none; }
  }

  /* LAYOUT */
  .layout {
    display: grid;
    grid-template-columns: 80px 1fr 360px;
    gap: 24px;
    align-items: flex-start;
  }

  /* TIME RAIL */
  .timerail {
    position: sticky; top: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--ink-faint);
    padding-top: 8px;
  }
  .timerail-inner {
    position: relative;
    border-left: 1px solid var(--line);
    padding-left: 12px;
  }
  .timetick {
    position: absolute; left: -1px;
    padding-left: 14px;
    text-transform: uppercase; letter-spacing: 0.06em;
    transform: translateY(-6px);
  }
  .timetick::before {
    content: ''; position: absolute;
    left: -1px; top: 5px;
    width: 8px; height: 1px; background: var(--line-strong);
  }
  .timetick.hour { color: var(--ink-soft); font-weight: 500; }
  .timetick.hour::before { width: 12px; background: var(--ink-soft); }
  .timetick.lunch {
    color: var(--warn);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, transform 0.15s;
  }
  .timetick.lunch::before { background: var(--warn); }
  .timetick.lunch:hover { color: var(--ink); }
  .timetick.lunch:hover::before { background: var(--ink); width: 14px; }
  .timetick.lunch.overridden {
    color: var(--accent);
    font-weight: 600;
  }
  .timetick.lunch.overridden::before { background: var(--accent); }
  /* Lunch as a block — spans the full lunch duration on the rail so
     it's visually obvious where "no work happens" sits in the day.
     Replaces the single-line lunch tick. The legacy .timetick.lunch
     styling above remains for back-compat (no callers as of v1.8.82). */
  .timetick.lunch-block {
    position: absolute;
    left: 0;
    right: -2px;
    background: rgba(255, 181, 71, 0.06);
    border-top: 1px dashed var(--warn);
    border-bottom: 1px dashed var(--warn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 1;
  }
  .timetick.lunch-block:hover { background: rgba(255, 181, 71, 0.12); }
  .timetick.lunch-block .lunch-block-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--warn);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
  }
  .timetick.lunch-block.overridden {
    background: rgba(212, 255, 58, 0.08);
    border-color: var(--accent);
  }
  .timetick.lunch-block.overridden:hover { background: rgba(212, 255, 58, 0.14); }
  .timetick.lunch-block.overridden .lunch-block-label { color: var(--accent); }
  .timetick.meeting { color: var(--info); }
  .timetick.meeting::before { background: var(--info); }
  .nowline {
    position: absolute; left: -1px; right: -8px;
    height: 1px; background: var(--accent);
    z-index: 5; box-shadow: 0 0 12px var(--accent);
  }
  .nowline::before {
    content: ''; position: absolute;
    left: -4px; top: -3px;
    width: 8px; height: 8px; background: var(--accent);
  }
  .nowline::after {
    content: 'NOW'; position: absolute;
    right: 4px; top: -16px;
    background: var(--accent); color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 2px 5px; letter-spacing: 0.08em;
  }

  main { min-height: 60vh; }
  .quotes { display: flex; flex-direction: column; gap: 8px; }

  .quote {
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    position: relative;
  }
  .quote:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
  .quote.complete:hover {
    transform: none;
    box-shadow: none;
  }
  /* Completed quote: keep the header readable (qid, delta, time pill, action buttons),
     dim only the items list and the secondary metadata. */
  .quote.complete { background: var(--bg-2); }
  .quote.complete .qitems { opacity: 0.55; }
  .quote.complete .qnotes-btn { opacity: 0.7; }
  /* Add-item row stays visible on complete quotes too — user might realise
     after-the-fact they need to add another item. Adding will auto-uncomplete
     the quote. */
  .quote.complete .qduration .strong { color: var(--ok); }
  /* Stronger second-channel cue beyond the background tint and qid color:
     a solid green left-border accent and a check icon prefix on the qid. */
  .quote.complete { border-left: 3px solid var(--ok); }
  .quote.complete .quote-index-num::before {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-feature-settings: 'liga';
    font-size: 14px;
    color: var(--ok);
    display: block;
    margin-bottom: 2px;
    line-height: 1;
  }

  /* Compact mode for completed quotes — collapse the items list to save vertical
     space late in the day. Click the expand button in the header to view items.
     Default for completed quotes; user can toggle per-quote.
     The body's padding shrinks too so the card becomes a thin strip. */
  .quote.complete.compact .qitems,
  .quote.complete.compact .qadd-row,
  .quote.complete.compact .qbulk-admin,
  .quote.complete.compact .qnotes-editor,
  .quote.complete.compact .quote-progress { display: none; }
  .quote.complete.compact .quote-body { padding: 8px 18px; }
  .quote.complete.compact .qhead { margin-bottom: 0; }
  .qexpand-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    cursor: pointer;
    padding: 3px 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
  }
  .qexpand-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
  .qexpand-btn .mat-icon { font-size: 14px; transition: transform 0.2s; }
  .quote.complete.compact .qexpand-btn .mat-icon { transform: rotate(-90deg); }
  .quote.dragging { opacity: 0.3; }

  /* Gap-fill flash */
  .quote.gap-filled {
    animation: gapfill-flash 1.5s ease-out;
  }
  @keyframes gapfill-flash {
    0% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow); }
    60% { box-shadow: 0 0 0 1px var(--accent-dim), 0 0 12px var(--accent-glow); }
    100% { box-shadow: none; }
  }

  /* === Polish round v1.8.24 ===
     Subtle animations at the moments your brain notices something happened.
     None of these add information — they make the existing information feel alive. */

  /* Active quote breathes — very subtle 4s pulse on the lime border accent so
     the running quote doesn't look static. Pauses while paused. */
  .quote.active:not(.paused) {
    animation: active-breath 4s ease-in-out infinite;
  }
  @keyframes active-breath {
    0%, 100% { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 0 transparent; }
    50% { box-shadow: inset 3px 0 0 var(--accent), 0 0 24px rgba(212,255,58,0.18); }
  }

  /* Quote completion sweep — when a work quote becomes complete, a brief lime
     wave washes left-to-right across the card before settling. Triggered by
     adding .just-completed class for ~900ms then removing. */
  .quote.just-completed {
    position: relative;
    overflow: hidden;
  }
  .quote.just-completed::after {
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212,255,58,0.35), transparent);
    pointer-events: none;
    animation: complete-sweep 0.9s ease-out forwards;
    z-index: 1;
  }
  @keyframes complete-sweep {
    0% { left: -40%; }
    100% { left: 110%; }
  }

  /* Item tick bounce — checkbox scales up briefly when ticked. Uses CSS
     transition rather than animation so it feels reactive to your click,
     not a canned effect. */
  .qcheck { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .qcheck:active { transform: scale(0.92); }
  .qcheck.checked.just-checked { animation: tick-bounce 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes tick-bounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }

  /* Target hit pulse — fires once when day target crosses 100% for the first
     time today. Whole strip glows lime briefly. */
  .day-status.target-hit-pulse {
    animation: target-hit 1.2s ease-out;
  }
  @keyframes target-hit {
    0% { box-shadow: 0 0 0 0 var(--accent-glow); }
    30% { box-shadow: 0 0 24px 4px rgba(212,255,58,0.35); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* Day target progress bar — slightly different from plan progress bar,
     uses a gradient to distinguish at a glance. Caps visually but label can
     show >100% (e.g. "115%"). */
  .progressfill.day-target-fill {
    background: linear-gradient(90deg, var(--accent), var(--ok));
  }

  /* Day kickoff stagger — when state.quotes is freshly populated (from a TSV
     parse), each quote card slides in with a tiny stagger. Sets the tone for
     the day vs. just dumping a list at you. Class added to container + cards
     by the parse handler, removed after animation. */
  .quotes-kickoff .quote {
    animation: kickoff-slide 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .quotes-kickoff .quote:nth-child(1) { animation-delay: 0.00s; }
  .quotes-kickoff .quote:nth-child(2) { animation-delay: 0.04s; }
  .quotes-kickoff .quote:nth-child(3) { animation-delay: 0.08s; }
  .quotes-kickoff .quote:nth-child(4) { animation-delay: 0.12s; }
  .quotes-kickoff .quote:nth-child(5) { animation-delay: 0.16s; }
  .quotes-kickoff .quote:nth-child(6) { animation-delay: 0.20s; }
  .quotes-kickoff .quote:nth-child(7) { animation-delay: 0.24s; }
  .quotes-kickoff .quote:nth-child(8) { animation-delay: 0.28s; }
  .quotes-kickoff .quote:nth-child(9) { animation-delay: 0.32s; }
  .quotes-kickoff .quote:nth-child(10) { animation-delay: 0.36s; }
  .quotes-kickoff .quote:nth-child(n+11) { animation-delay: 0.40s; }
  @keyframes kickoff-slide {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Respect reduced-motion preference globally */
  @media (prefers-reduced-motion: reduce) {
    .quote.active:not(.paused),
    .quote.just-completed::after,
    .qcheck.checked.just-checked,
    .day-status.target-hit-pulse,
    .quotes-kickoff .quote {
      animation: none !important;
    }
  }

  /* Suggestion banner */
  .suggestion-banner {
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-left: 3px solid var(--accent);
    padding: 7px 12px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    animation: suggest-in 0.25s ease-out;
  }
  .suggestion-banner.urgent {
    border-color: var(--warn);
    border-left-color: var(--warn);
    background: rgba(255, 181, 71, 0.05);
  }
  .suggestion-banner.urgent .suggestion-icon {
    color: var(--warn);
    border-color: var(--warn);
    background: rgba(255, 181, 71, 0.15);
  }
  .suggestion-banner.urgent .suggestion-apply {
    background: var(--warn);
    border-color: var(--warn);
  }
  @keyframes suggest-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Meds reminder banner — passive, sits above day status. Tap to mark taken.
     Hides for the rest of the day once ticked. Resets next day. */
  .meds-reminder {
    background: var(--surface);
    border: 1px solid var(--info);
    border-left: 3px solid var(--info);
    padding: 8px 12px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    animation: suggest-in 0.25s ease-out;
  }
  .meds-reminder.overdue {
    border-color: var(--warn);
    border-left-color: var(--warn);
    background: rgba(255, 181, 71, 0.05);
  }
  .meds-reminder .meds-icon {
    color: var(--info);
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1px solid var(--info);
    background: rgba(108, 182, 255, 0.1);
    flex-shrink: 0;
  }
  .meds-reminder.overdue .meds-icon {
    color: var(--warn);
    border-color: var(--warn);
    background: rgba(255, 181, 71, 0.15);
  }
  .meds-reminder .meds-icon .mat-icon { font-size: 16px; }
  .meds-reminder .meds-text {
    font-size: 12px;
    color: var(--ink);
    line-height: 1.4;
  }
  .meds-reminder .meds-text .meds-time {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--ink-soft);
    font-size: 11px;
    margin-left: 6px;
  }
  .meds-reminder .meds-mark {
    background: var(--info);
    border: 1px solid var(--info);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .meds-reminder .meds-mark:hover { filter: brightness(1.15); }
  .meds-reminder.overdue .meds-mark { background: var(--warn); border-color: var(--warn); }
  .suggestion-icon {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--accent);
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 1px solid var(--accent-dim);
    background: var(--accent-glow);
  }
  .suggestion-text {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
  }
  .suggestion-text .suggestion-detail {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .suggestion-apply {
    background: var(--accent); color: var(--bg);
    border: 1px solid var(--accent);
    padding: 6px 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s;
  }
  .suggestion-apply:hover { background: var(--accent-dim); }
  .suggestion-dismiss {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    padding: 6px 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .suggestion-dismiss .mat-icon { font-size: 16px; }
  .suggestion-dismiss:hover { border-color: var(--ink); color: var(--ink); }

  /* Active quote (currently happening) */
  .quote.active {
    border-color: var(--accent);
    box-shadow: -3px 0 0 0 var(--accent), 0 0 24px rgba(212, 255, 58, 0.08);
  }
  /* Late quote — started, not yet complete, past its planned end time.
     Tinted ribbon + soft background so it draws the eye without screaming.
     A late quote can also be .active (still being worked on past plan); in
     that case .active's accent ribbon wins for the ribbon, but the soft
     background hint stays so the user knows pace is over. */
  .quote.late:not(.complete) {
    box-shadow: -3px 0 0 0 var(--danger), 0 0 18px rgba(255, 90, 95, 0.06);
  }
  .quote.late.active:not(.complete) {
    /* active wins the ribbon (accent), but keep a danger glow so the
       "running over" signal isn't lost. */
    box-shadow: -3px 0 0 0 var(--accent), 0 0 18px rgba(255, 90, 95, 0.10);
  }
  /* Pinned quote — top-of-list priority. Visible pin badge in the index
     column (see .quote-index-pin) plus a subtle info-blue accent on the
     index column itself. */
  .quote.pinned .quote-index {
    background: var(--info);
  }
  .quote.pinned .quote-index-num,
  .quote.pinned .quote-index-grip { color: var(--bg); }
  /* When pinned + active, the active accent wins on the index (it's the
     more urgent state). */
  .quote.pinned.active .quote-index { background: var(--accent); }
  .quote.active .quote-index { background: var(--accent); }
  .quote.active .quote-index-num { color: var(--bg); }
  .quote.active .quote-index-grip { color: var(--bg); opacity: 0.6; }

  .active-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--accent); color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 3px 7px;
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .active-pill::before {
    content: ''; display: inline-block;
    width: 6px; height: 6px; background: var(--bg);
    animation: pulse 1.4s ease-in-out infinite;
  }

  /* "Next up" subtle highlight — softer than active */
  .quote.next-up {
    box-shadow: -2px 0 0 0 var(--info);
  }
  .quote.next-up .quote-index {
    background: rgba(108, 182, 255, 0.10);
  }
  .quote.next-up .quote-index-num {
    color: var(--info);
  }
  .next-up-pill {
    display: inline-flex; align-items: center;
    background: transparent;
    color: var(--info);
    border: 1px solid var(--info);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 2px 7px;
    text-transform: uppercase; letter-spacing: 0.1em;
  }

  /* Time delta badge (ahead/behind schedule) */
  .delta-pill {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 2px 6px;
    border: 1px solid;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .delta-pill.ahead { color: var(--ok); border-color: var(--ok); }
  .delta-pill.behind { color: var(--warn); border-color: var(--warn); }
  .delta-pill.ontrack { color: var(--ink-faint); border-color: var(--line); }

  /* Actuals pill — typical-vs-planned ratio for unstarted quotes
     with prior history. Visually similar to delta-pill but uses info-blue
     for "ahead" so it's distinct from completion delta. */
  .actuals-pill {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 2px 6px;
    border: 1px solid;
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: help;
  }
  .actuals-pill.ahead { color: var(--info); border-color: var(--info); background: rgba(108,182,255,0.06); }
  .actuals-pill.behind { color: var(--warn); border-color: var(--warn); background: rgba(255,181,71,0.06); }
  .actuals-pill.ontrack { color: var(--ink-faint); border-color: var(--line); }

  /* Spillover pill — surfaces "this quote will probably run past workday end" or
     "this quote crosses lunch". Distinct from the actuals pill (which is per-qid
     historical) — spillover is forward-looking and schedule-aware. */
  .spillover-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 2px 6px;
    border: 1px solid;
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: help;
  }
  .spillover-pill.warn { color: var(--warn); border-color: var(--warn); background: rgba(255,181,71,0.08); }
  .spillover-pill.danger { color: var(--danger); border-color: var(--danger); background: rgba(255,90,95,0.1); }
  /* Subtle left-border accent on the whole quote when spillover detected */
  .quote.spillover-warn .quote-index-num { color: var(--warn); }
  .quote.spillover-danger .quote-index-num { color: var(--danger); }

  /* Live countdown appended to active quote's time window */
  .qcountdown {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    margin-left: 2px;
    transition: color 0.2s;
  }
  .qcountdown.ontrack { color: var(--accent); }
  .qcountdown.amber { color: var(--warn); }
  .qcountdown.red { color: var(--danger); font-weight: 600; }

  /* "Next: …" peek row at the bottom of the active quote card */
  .next-peek-row {
    display: flex; align-items: center;
    padding: 8px 14px;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
  }
  .next-peek-row strong {
    color: var(--ink);
    font-weight: 600;
    margin: 0 4px;
  }

  /* Meeting card variant */
  .quote.is-meeting {
    background: var(--surface);
    border-color: rgba(108, 182, 255, 0.3);
  }
  .quote.is-meeting:hover { border-color: var(--info); }
  .quote.is-meeting .quote-index {
    background: rgba(108, 182, 255, 0.15);
    border-right-color: rgba(108, 182, 255, 0.3);
  }
  .quote.is-meeting .quote-index-num { color: var(--info); }
  .quote.is-meeting .qid {
    color: var(--info); border-color: var(--info);
    background: rgba(108, 182, 255, 0.08);
    cursor: default;
  }
  .quote.is-meeting .qid:hover {
    color: var(--info); border-color: var(--info);
    background: rgba(108, 182, 255, 0.08);
  }
  .quote.is-meeting .qid::after { display: none; }
  .quote.is-meeting .qtimewindow {
    color: var(--info); border-color: var(--info);
    background: rgba(108, 182, 255, 0.08);
  }
  .meeting-pinned {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 2px 6px;
    background: var(--info); color: var(--bg);
    text-transform: uppercase; letter-spacing: 0.1em;
  }

  /* Untracked block — distinct neutral grey, dashed border, no "calendar event" feel */
  .quote.is-meeting.is-untracked {
    background: repeating-linear-gradient(
      45deg,
      var(--bg-2),
      var(--bg-2) 10px,
      var(--surface) 10px,
      var(--surface) 20px
    );
    border: 1px dashed var(--line-strong);
    border-color: var(--line-strong);
  }
  .quote.is-meeting.is-untracked:hover { border-color: var(--ink-soft); }
  .quote.is-meeting.is-untracked .quote-index {
    background: var(--bg-2);
    border-right-color: var(--line);
  }
  .quote.is-meeting.is-untracked .quote-index-num { color: var(--ink-soft); }
  .quote.is-meeting.is-untracked .qid {
    color: var(--ink-soft); border-color: var(--line-strong);
    background: var(--bg-2);
  }
  .quote.is-meeting.is-untracked .qid:hover {
    color: var(--ink-soft); border-color: var(--line-strong);
    background: var(--bg-2);
  }
  .quote.is-meeting.is-untracked .qtimewindow {
    color: var(--ink-soft); border-color: var(--line-strong);
    background: var(--bg-2);
  }
  .quote.is-meeting.is-untracked .meeting-title {
    color: var(--ink-soft);
    font-style: italic;
  }
  /* Unauthorised untracked: same striped look as authorised but with a warm
     tint so it reads "required, not credited" at a glance. The pattern
     differs slightly so a manager can spot uncredited work shape on
     Danny's day at a distance. */
  .quote.is-meeting.is-untracked.is-unauth {
    background: repeating-linear-gradient(
      45deg,
      var(--bg-2),
      var(--bg-2) 10px,
      rgba(255, 181, 71, 0.06) 10px,
      rgba(255, 181, 71, 0.06) 20px
    );
    border-color: var(--warn);
  }
  .quote.is-meeting.is-untracked.is-unauth:hover { border-color: var(--warn); }
  .quote.is-meeting.is-untracked.is-unauth .meeting-title { color: var(--warn); }
  .untracked-pill {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 2px 6px;
    background: var(--surface-3); color: var(--ink-faint);
    border: 1px solid var(--line-strong);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .untracked-pill.unauth {
    background: rgba(255, 181, 71, 0.12);
    color: var(--warn);
    border-color: var(--warn);
  }

  /* === PRODUCT LOOKUP TAB === */
  /* A standalone search-and-act surface. Search input at the top, results
     below as scannable rows with name/SKU/minutes/usage and two action
     buttons (Add to a quote, Open in NOVA). Designed for fast keyboard-only
     use — focus drops into the input on tab open, results filter as you
     type, Esc clears. */
  .lookup-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 24px 60px;
  }
  .lookup-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .lookup-header h2 {
    font-size: 18px;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 4px;
  }
  .lookup-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .lookup-search-row {
    display: flex; gap: 8px;
    margin-bottom: 16px;
  }
  .lookup-search-row input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
  }
  .lookup-search-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
  }

  .lookup-section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 6px;
    padding-left: 10px;
    border-left: 2px solid var(--accent);
  }
  .lookup-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 12px;
    border: 1px dashed var(--line);
    background: var(--surface);
  }
  .lookup-results { display: flex; flex-direction: column; gap: 4px; }

  .lookup-row {
    display: grid;
    grid-template-columns: 1fr 200px auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color 0.12s;
  }
  .lookup-row:hover { border-color: var(--accent); }
  .lookup-row-main {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .lookup-row-name {
    color: var(--ink); font-size: 13px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lookup-row-sku {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .lookup-row-meta {
    display: flex; flex-direction: column; gap: 2px;
    align-items: flex-end;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .lookup-row-mins {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .lookup-row-mins-empty { color: var(--ink-faint); font-weight: 400; }
  .lookup-row-usage { color: var(--ink-faint); }
  .lookup-row-actions {
    display: flex; gap: 6px;
    align-items: center;
  }
  .lookup-btn {
    display: inline-flex; align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.12s;
  }
  .lookup-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
  }
  .lookup-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
  .lookup-btn.nova-btn .mat-icon { font-size: 12px; }

  /* Add-to-quote picker modal styling */
  .add-to-quote-list {
    display: flex; flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
  }
  .add-to-quote-row {
    display: flex; align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    transition: all 0.12s;
  }
  .add-to-quote-row:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
  }
  .add-to-quote-row.complete { opacity: 0.55; }
  .add-to-quote-row .atq-qid {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--ink);
    min-width: 90px;
  }
  .add-to-quote-row .atq-info {
    color: var(--ink-soft);
    font-size: 11px;
    flex: 1;
  }
  .add-to-quote-row .atq-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ok);
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  @media (max-width: 720px) {
    .lookup-row {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .lookup-row-meta {
      flex-direction: row;
      gap: 12px;
      align-items: center;
      justify-content: flex-start;
    }
    .lookup-row-actions { justify-content: flex-end; }
  }

  /* === DAILY TEMPLATE block rows in settings === */
  .template-block-row {
    display: grid;
    grid-template-columns: 60px 50px 1fr 90px auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    margin-bottom: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
  }
  .template-block-row .tb-time {
    color: var(--ink); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .template-block-row .tb-dur {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .template-block-row .tb-title {
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .template-block-row .tb-type {
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
    text-align: center;
    padding: 2px 6px;
    border: 1px solid var(--line);
  }
  .template-block-row .tb-type-meeting { color: var(--info); border-color: var(--info); }
  .template-block-row .tb-type-auth { color: var(--ink-soft); border-color: var(--line-strong); }
  .template-block-row .tb-type-unauth { color: var(--warn); border-color: var(--warn); }
  .template-block-row .tb-edit,
  .template-block-row .tb-delete {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .template-block-row .tb-edit:hover { border-color: var(--accent); color: var(--accent); }
  .template-block-row .tb-delete:hover { border-color: var(--danger); color: var(--danger); }

  /* === Workload-balance editable target === */
  .workload-balance .wb-target-editable {
    cursor: pointer;
    text-decoration: underline dotted var(--ink-faint);
    text-underline-offset: 2px;
  }
  .workload-balance .wb-target-editable:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
  }

  /* Meeting type radios in modal */
  .meeting-type-row {
    display: flex; gap: 8px;
  }
  .meeting-type-opt {
    flex: 1;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
  }
  .meeting-type-opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
  }
  .meeting-type-opt input { width: auto; margin: 0; }
  .meeting-title {
    font-size: 14px; font-weight: 500;
    color: var(--ink);
    padding: 8px 0;
  }
  .meeting-actions {
    display: flex; gap: 8px;
    margin-top: 8px;
  }
  .meeting-edit, .meeting-delete {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
  }
  .meeting-edit:hover { border-color: var(--info); color: var(--info); }
  .meeting-delete:hover { border-color: var(--danger); color: var(--danger); }
  .meeting-done {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
  }
  .meeting-done:hover { border-color: var(--ok); color: var(--ok); }
  .quote.is-meeting.complete .meeting-done { background: var(--ok); border-color: var(--ok); color: var(--bg); }

  /* Day status strip */
  /* Day-status strip lives in the page header. Compact horizontal layout —
     four blocks side-by-side, separated by thin vertical dividers. The
     header itself uses `justify-content: space-between` so dayStatus claims
     the middle space between brand (left) and clock controls (right). */
  .day-status {
    background: transparent;
    border: 1px solid var(--line);
    padding: 6px 12px;
    display: grid;
    /* Five equal, shrinkable columns. The earlier auto-fit version
       collapsed to a SINGLE column (→ 5 stacked rows → 228px-tall
       header) because .day-status had no flex-grow in the header's
       flex row, so it sat at min-content width and auto-fit only fit
       one column. Fixed: flex: 1 1 auto lets it claim the middle space,
       and repeat(5, minmax(0,1fr)) keeps it a real 5-across row that
       shrinks rather than wraps. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 14px;
    align-items: center;
    transition: background 0.4s, border-color 0.4s;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 720px;
    margin: 0 auto;
  }
  .day-status.sev-warn {
    background: rgba(255, 181, 71, 0.06);
    border-color: var(--warn);
  }
  .day-status.sev-warn .ds-block { border-right-color: rgba(255, 181, 71, 0.25); }
  .day-status.sev-danger {
    background: rgba(255, 90, 95, 0.06);
    border-color: var(--danger);
  }
  .day-status.sev-danger .ds-block { border-right-color: rgba(255, 90, 95, 0.25); }
  .day-status.sev-danger .ds-value { font-weight: 600; }
  .ds-block {
    border-right: 1px solid var(--line);
    padding-right: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .ds-block:last-child { border-right: none; padding-right: 0; }
  .ds-block .ds-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    line-height: 1;
  }
  .ds-block .ds-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    white-space: nowrap;
  }
  /* Hide the sub-text inside ds-value (the small "3h 5m / 7h 0m mixed" hint)
     in the header — saves horizontal space. The full info is still in the
     tooltip on hover. */
  .day-status .ds-value > span {
    display: none;
  }
  /* Below ~1180px the header can't fit brand + 4 blocks + clock side-by-side.
     Previously: hidden entirely. Now: wraps to its own full-width row
     below the header so the at-a-glance metrics (drift / projected end /
     target / items) stay visible on mobile + tablet too.
     Make header flex-wrap and the day-status take full width via order/grow. */
  @media (max-width: 1180px) {
    header { flex-wrap: wrap; }
    .day-status {
      order: 99;            /* push below brand + clock onto its own row */
      flex-basis: 100%;
      margin-top: 12px;
      padding: 8px 10px;
      gap: 10px 14px;
    }
    /* On its own row the blocks may wrap to multiple rows — drop the
       right-hand dividers entirely so wrapped rows don't show stray
       borders at the wrap point. */
    .day-status .ds-block {
      padding-right: 0;
      border-right: none;
    }
    .day-status .ds-block .ds-value { font-size: 12px; }
  }
  .ds-value.ahead { color: var(--ok); }
  .ds-value.behind { color: var(--warn); }
  .ds-value.danger { color: var(--danger); }

  /* Meeting form modal */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(14, 15, 18, 0.8);
    z-index: 100;
    display: grid; place-items: center;
    backdrop-filter: blur(4px);
  }
  .modal {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    width: 90%; max-width: 420px;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  /* Desktop: content-heavy modals get more room. The per-modal inline
     max-widths are sized for laptop/mobile and read cramped on a wide
     screen. Each tier is scaled up by targeting its inline style value
     directly (no JS change needed). The 380px confirm modals are left
     compact — small is the right size for a yes/no prompt. */
  @media (min-width: 1024px) {
    .modal[style*="max-width: 420px"] { max-width: 540px !important; }
    .modal[style*="max-width: 460px"],
    .modal[style*="max-width: 480px"] { max-width: 640px !important; }
    .modal[style*="max-width: 520px"],
    .modal[style*="max-width:540px"],
    .modal[style*="max-width: 540px"] { max-width: 720px !important; }
    .modal[style*="max-width: 560px"] { max-width: 780px !important; }
  }
  .modal-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
  }
  .modal-head h3 {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .modal-close {
    background: none; border: none;
    color: var(--ink-faint);
    cursor: pointer; font-size: 18px;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px;
  }
  .modal-close:hover { color: var(--ink); }
  .modal-close .mat-icon { font-size: 20px; }
  .modal-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .modal-body::-webkit-scrollbar { width: 6px; }
  .modal-body::-webkit-scrollbar-track { background: transparent; }
  .modal-body::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
  }
  .modal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
  .field { margin-bottom: 14px; }
  .field label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .field input, .field select {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }
  .field input:focus, .field select:focus {
    outline: none; border-color: var(--accent);
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .modal-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    display: flex; gap: 8px; justify-content: flex-end;
    flex-shrink: 0;
    background: var(--surface);
  }

  /* Pause state */
  .quote.paused {
    border-color: var(--warn);
    box-shadow: -3px 0 0 0 var(--warn);
  }
  .pause-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--warn); color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 3px 7px;
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .pause-pill::before {
    content: 'pause';
    font-family: 'Material Symbols Outlined';
    font-size: 12px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
  }
  /* Resumed quote that had pause time — informational, not active warning */
  .pause-pill.resumed {
    background: transparent;
    color: var(--ink-faint);
    border: 1px solid var(--line);
  }
  .pause-pill.resumed::before {
    content: 'pause';
    color: var(--ink-faint);
  }

  /* Inline editable timestamp pills (Started / Finished) */
  .time-pill-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .time-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .time-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .time-pill .tp-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }
  .time-pill:hover .tp-label { color: var(--accent); }
  .time-pill .tp-value {
    color: var(--ink);
    font-weight: 600;
  }
  .time-pill:hover .tp-value { color: var(--accent); }
  .time-pill.missing {
    border-color: var(--warn);
    color: var(--warn);
  }
  /* Live-pace pill — shows elapsed/planned for an in-progress quote with
     a colour cue based on current ratio. Non-clickable; pure status. */
  .time-pill.live-pace {
    cursor: default;
    border-color: var(--accent-dim);
    background: var(--accent-glow);
  }
  .time-pill.live-pace:hover {
    border-color: var(--accent-dim);
    color: var(--ink-faint);
  }
  .time-pill.live-pace:hover .tp-label,
  .time-pill.live-pace:hover .tp-value { color: inherit; }
  .time-pill.live-pace .tp-value.ok { color: var(--ok); }
  .time-pill.live-pace .tp-value.warn { color: var(--warn); }
  .time-pill.live-pace .tp-value.danger { color: var(--danger); }
  .time-pill.live-pace.warn {
    border-color: var(--warn);
    background: rgba(255, 181, 71, 0.08);
  }
  .time-pill.live-pace.danger {
    border-color: var(--danger);
    background: rgba(255, 90, 95, 0.08);
  }
  .time-pill.live-pace .lp-end {
    color: var(--ink-faint);
    font-size: 9px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .time-pill.missing .tp-label { color: var(--warn); }
  .time-pill.missing:hover {
    background: rgba(255, 181, 71, 0.08);
  }
  .time-pill.editing {
    padding: 0;
    border-color: var(--accent);
  }
  .time-pill input {
    background: var(--bg);
    border: none;
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    padding: 3px 7px;
    width: 70px;
    outline: none;
  }
  .qpause-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
  }
  .qpause-btn:hover { border-color: var(--warn); color: var(--warn); }
  .quote.paused .qpause-btn { background: var(--warn); border-color: var(--warn); color: var(--bg); }

  /* Reopen button — only shown on completed quotes */
  .qreopen-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
  }
  .qreopen-btn:hover { border-color: var(--ink-soft); color: var(--ink); }

  /* Finish button — only shown when all items in a started work quote are
     resolved AND the quote isn't yet completedAtMin'd. Filled lime so it
     reads as a positive, primary action ("yes, this is done"). The icon
     gives it weight and visual distinction from other action buttons. */
  .qfinish-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
    display: inline-flex; align-items: center;
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: qfinish-pulse 2.4s ease-in-out infinite;
  }
  .qfinish-btn:hover {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
    animation: none;
  }
  .qfinish-btn:active { transform: translateY(1px); }
  @keyframes qfinish-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50%      { box-shadow: 0 0 0 5px var(--accent-glow); }
  }
  @media (prefers-reduced-motion: reduce) {
    .qfinish-btn { animation: none; }
  }
  /* Hide for viewer mode — managers shouldn't be able to finish quotes */
  body.viewer-mode .qfinish-btn { display: none !important; }

  /* Start button (big call-to-action when quote is unstarted) */
  .qstart-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--bg);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 5px;
    line-height: 1.4;
  }
  .qstart-btn::before {
    content: 'play_arrow';
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
  }
  .qstart-btn:hover {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
  }
  .qstart-btn.subtle {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
  }
  .qstart-btn.subtle:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Context menu */
  .ctx-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    z-index: 500;
    min-width: 200px;
    padding: 4px 0;
    font-family: 'IBM Plex Sans', sans-serif;
    user-select: none;
  }
  .ctx-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.08s;
    gap: 16px;
  }
  .ctx-item:hover { background: var(--surface-2); }
  .ctx-item.danger { color: var(--danger); }
  .ctx-item.danger:hover { background: rgba(255, 90, 95, 0.12); }
  .ctx-item.accent { color: var(--accent); }
  .ctx-item.accent:hover { background: var(--accent-glow); }
  .ctx-item.disabled {
    color: var(--ink-faint);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }
  .ctx-item .ctx-shortcut {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .ctx-item-label {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .ctx-item-icon {
    font-size: 16px;
    color: var(--ink-faint);
    flex-shrink: 0;
  }
  .ctx-item:hover .ctx-item-icon { color: var(--ink); }
  .ctx-item.danger .ctx-item-icon { color: var(--danger); }
  .ctx-item.accent .ctx-item-icon { color: var(--accent); }
  .ctx-divider {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
  }
  .ctx-header {
    padding: 6px 14px 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* Toast container — stacks regular toasts at bottom-center */
  .toast-container {
    position: fixed;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column-reverse; /* newest on top of older */
    gap: 8px;
    z-index: 200;
    pointer-events: none;
  }
  .toast-container > .toast { pointer-events: auto; position: static; transform: none; left: auto; bottom: auto; }

  /* Search-jump overlay — type `/` to open, then live-filter items across all
     today's quotes. Click a result to scroll-to and highlight. */
  .search-jump-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 220;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 10vh;
    animation: tip-in 0.15s ease-out;
  }
  .search-jump-modal {
    width: min(640px, 90vw);
    background: var(--surface);
    border: 1px solid var(--accent);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 30px var(--accent-glow);
    max-height: 70vh;
    display: flex; flex-direction: column;
  }
  .search-jump-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .search-jump-input-row input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    padding: 4px 0;
    outline: none;
  }
  .search-jump-input-row input::placeholder { color: var(--ink-faint); }
  .search-jump-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    border: 1px solid var(--line);
    padding: 2px 6px;
  }
  .search-jump-results {
    overflow-y: auto;
    max-height: calc(70vh - 60px);
  }
  .search-jump-result {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.1s;
  }
  .search-jump-result:hover, .search-jump-result.kb-focus {
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    padding-left: 13px;
  }
  .search-jump-result .sjr-status {
    width: 12px; height: 12px;
    border: 1px solid var(--line);
    flex-shrink: 0;
  }
  .search-jump-result .sjr-status.done { background: var(--ok); border-color: var(--ok); }
  .search-jump-result .sjr-status.partial { background: var(--accent); border-color: var(--accent); }
  .search-jump-result .sjr-status.missing { background: var(--danger); border-color: var(--danger); }
  .search-jump-result .sjr-status.declined { background: var(--warn); border-color: var(--warn); }
  .search-jump-result .sjr-name {
    font-size: 12px;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .search-jump-result .sjr-qid {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
  }
  .search-jump-result .sjr-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
  }
  .search-jump-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 11px;
  }
  /* Highlight effect when scrolled-to */
  .qitem.search-flash { animation: search-flash 1.4s ease-out; }
  @keyframes search-flash {
    0%, 100% { background: var(--bg-2); }
    20% { background: var(--accent-glow); box-shadow: 0 0 0 2px var(--accent); }
  }

  /* Custom tooltip — replaces native browser title popups (which are slow,
     unstyleable, and inconsistent). Activated by mouseenter on any element
     with [title] or [data-tip]. Single global element repositioned per hover. */
  .app-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    line-height: 1.4;
    padding: 6px 9px;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: none;
    white-space: pre-wrap;
    letter-spacing: 0.02em;
    animation: tip-in 0.12s ease-out;
  }
  .app-tooltip::before {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    background: var(--surface);
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    transform: rotate(45deg);
  }
  .app-tooltip[data-arrow="bottom"]::before { bottom: -4px; left: 50%; margin-left: -3px; }
  .app-tooltip[data-arrow="top"]::before { top: -4px; left: 50%; margin-left: -3px; transform: rotate(225deg); }
  @keyframes tip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

  .toast {
    position: fixed;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--accent);
    padding: 12px 20px;
    box-shadow: 0 0 30px var(--accent-glow);
    z-index: 200;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    animation: toast-in 0.3s ease-out, toast-out 0.3s ease-in 1.7s forwards;
  }
  /* Inside container: animate without fixed positioning */
  .toast-container > .toast.regular-toast {
    animation: toast-in-stack 0.25s ease-out, toast-out-stack 0.3s ease-in 1.7s forwards;
  }
  @keyframes toast-in-stack {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes toast-out-stack {
    to { opacity: 0; transform: translateY(8px); }
  }
  /* Remote-update toast — quieter, lives top-right not bottom-center */
  .toast.remote-toast {    bottom: auto; left: auto;
    top: 80px; right: 24px;
    transform: none;
    background: var(--surface);
    border: 1px solid var(--info);
    box-shadow: 0 0 20px rgba(108, 182, 255, 0.15);
    color: var(--info);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 10px;
    padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
    animation: remote-toast-in 0.25s ease-out, remote-toast-out 0.3s ease-in 1.9s forwards;
  }
  .toast.remote-toast .remote-icon {
    color: var(--info);
    font-size: 12px;
    animation: remote-spin 0.5s ease-out;
  }
  @keyframes remote-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes remote-toast-out {
    to { opacity: 0; transform: translateX(20px); }
  }
  @keyframes remote-spin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
  }

  /* Parse-feedback toast (longer-lived, dismissible, with skipped-line samples) */
  .toast.parse-toast {
    bottom: 24px; left: 24px;
    transform: none;
    background: var(--surface);
    border: 1px solid var(--accent);
    box-shadow: 0 0 24px var(--accent-glow);
    color: var(--ink);
    text-transform: none; letter-spacing: 0.02em;
    font-size: 11px;
    padding: 12px 36px 12px 14px;
    max-width: 380px;
    line-height: 1.5;
    animation: parse-toast-in 0.25s ease-out;
    position: fixed;
  }
  .toast.parse-toast .parse-toast-main {
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 10px;
    color: var(--ink-soft);
  }
  .toast.parse-toast .parse-toast-main strong {
    color: var(--accent); font-weight: 600;
  }
  .toast.parse-toast .parse-toast-warn {
    color: var(--warn);
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
  }
  .toast.parse-toast .parse-toast-samples {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    line-height: 1.5;
  }
  .toast.parse-toast .parse-toast-close {
    position: absolute;
    top: 6px; right: 8px;
    background: transparent; border: none;
    color: var(--ink-faint);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    transition: color 0.15s;
  }
  .toast.parse-toast .parse-toast-close:hover { color: var(--ink); }
  @keyframes parse-toast-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
  @keyframes toast-out {
    to { opacity: 0; transform: translate(-50%, 20px); }
  }

  /* Undo toast — stays longer (8s default) and includes an action button.
     Replaces native confirm dialogs for many destructive actions: act first,
     give a 5–8s window to undo. ADHD-friendly: low friction + safety net. */
  .toast.undo-toast {
    background: var(--surface);
    border: 1px solid var(--info);
    box-shadow: 0 0 24px rgba(108, 182, 255, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 16px;
    text-transform: none;
    letter-spacing: 0.02em;
    animation: toast-in 0.25s ease-out;
  }
  .toast.undo-toast .undo-msg {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
  }
  .toast.undo-toast .undo-btn {
    background: var(--info);
    color: var(--bg);
    border: 1px solid var(--info);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: filter 0.15s;
  }
  .toast.undo-toast .undo-btn:hover { filter: brightness(1.15); }
  .toast.undo-toast .undo-progress {
    position: absolute; bottom: 0; left: 0;
    height: 2px; background: var(--info);
    animation: undo-progress 8s linear forwards;
  }
  @keyframes undo-progress { from { width: 100%; } to { width: 0; } }
  /* Stack-depth indicator — shows when there are earlier actions
     still undo-able via keyboard (Ctrl+Z). Subtle so it doesn't
     compete with the Undo button. */
  .toast.undo-toast .undo-depth {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 8px;
    padding: 3px 6px;
    border: 1px solid var(--line);
  }
  .quote.drop-above::before, .quote.drop-below::after {
    content: ''; position: absolute;
    left: -4px; right: -4px;
    height: 3px; background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    z-index: 10;
  }
  .quote.drop-above::before { top: -5px; }
  .quote.drop-below::after { bottom: -5px; }

  .quote-index {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 40px;
    background: var(--surface-2);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: grab; user-select: none;
    transition: background 0.15s;
  }
  .quote-index:hover { background: var(--surface-3); }
  .quote.dragging .quote-index, .quote-index:active { cursor: grabbing; }
  .quote-index-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px; font-weight: 600;
    color: var(--ink); line-height: 1;
  }
  .quote-index-grip {
    color: var(--ink-faint);
    font-size: 10px; margin-top: 6px;
    letter-spacing: -1px;
  }
  .quote.complete .quote-index { background: var(--bg-2); }
  .quote.complete .quote-index-num { color: var(--ok); }

  .quote-body { margin-left: 40px; padding: 16px 18px; }

  /* Quote-level progress bar — sits between qhead and items list.
     Two segments: solid (resolved: done+missing+declined-done), soft (partial: any in-progress). */
  .quote-progress {
    position: relative;
    height: 3px;
    background: var(--surface-2);
    margin: -4px 0 12px;
    overflow: hidden;
  }
  .qprog-fill {
    position: absolute;
    top: 0; bottom: 0;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), left 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s;
  }
  .qprog-fill.resolved { left: 0; background: var(--accent); }
  .qprog-fill.resolved.all-done { background: var(--ok); }
  .qprog-fill.partial { background: var(--accent-dim); opacity: 0.55; }
  /* Active quote: chunkier, glowing progress so each tick feels like real
     progress, not a 3px hairline you can barely see. The fill pulses briefly
     on width change via JS-applied .qprog-just-ticked class. */
  .quote.active .quote-progress {
    height: 6px;
    margin: -2px 0 14px;
    box-shadow: 0 0 0 1px var(--surface-2) inset;
  }
  .quote.active .qprog-fill.resolved {
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .quote.active .qprog-fill.qprog-just-ticked {
    animation: qprog-tick-flash 0.6s ease-out;
  }
  @keyframes qprog-tick-flash {
    0% { filter: brightness(1.6); box-shadow: 0 0 16px var(--accent), 0 0 0 1px var(--accent); }
    100% { filter: brightness(1); box-shadow: 0 0 8px var(--accent-glow); }
  }
  /* Item-count badge in the active quote head. Updates on every tick so the
     user has a clean numeric anchor for "where am I in this quote". */
  .qprog-count {
    display: inline-flex; align-items: baseline; gap: 2px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--accent);
    padding: 3px 9px;
    border: 1px solid var(--accent-dim);
    background: var(--accent-glow);
    letter-spacing: 0.04em;
    transition: transform 0.18s ease;
  }
  .qprog-count .qprog-num { font-size: 13px; }
  .qprog-count .qprog-divider { color: var(--ink-faint); margin: 0 2px; }
  .qprog-count .qprog-total { color: var(--ink-soft); }
  .qprog-count.qprog-count-tick {
    animation: qprog-count-bounce 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes qprog-count-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .quote.active .qprog-fill.qprog-just-ticked { animation: none; }
    .qprog-count.qprog-count-tick { animation: none; }
  }

  .qhead {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  /* Almost-done pill (1 item remaining on an in-progress quote) */
  .almost-done-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid var(--accent-dim);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 3px 7px;
    text-transform: uppercase; letter-spacing: 0.1em;
  }

  /* Keyboard-focused quote (J/K nav) */
  .quote.kb-focus {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 16px var(--accent-glow);
  }

  /* Merge drag — qid drag affordances */
  .qid[draggable="true"] {
    cursor: grab;
  }
  .qid[draggable="true"]:active { cursor: grabbing; }
  .quote.merge-target {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 0 2px var(--accent);
  }
  .quote.merge-target::before {
    content: 'MERGE INTO THIS QUOTE';
    position: absolute;
    top: 8px; right: 8px;
    background: var(--accent); color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 700;
    padding: 3px 8px;
    letter-spacing: 0.1em;
    z-index: 12;
  }
  .quote.merge-source { opacity: 0.4; }

  /* Time/duration copy interaction */
  .qduration .strong, .qtimewindow {
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
  }
  .qduration .strong:hover { color: var(--accent); }
  .qtimewindow:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }
  .qduration .strong.just-copied,
  .qtimewindow.just-copied {
    background: var(--accent) !important;
    color: var(--bg) !important;
    border-color: var(--accent) !important;
  }

  .qid {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; font-weight: 500;
    color: var(--ink-soft);
    background: var(--surface-2);
    padding: 4px 8px;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    user-select: none;
  }
  .qid:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--surface-3);
  }
  .qid:active { transform: scale(0.96); }
  .qid::after {
    content: 'copy';
    position: absolute;
    top: -6px; right: -4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600;
    padding: 1px 4px;
    background: var(--surface-3);
    color: var(--ink-faint);
    border: 1px solid var(--line-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
  }
  .qid:hover::after { opacity: 1; }
  .qid.just-copied {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }
  .qid.just-copied::after {
    content: 'copied';
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    opacity: 1;
  }
  .qid-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 500;
    color: var(--ink-faint);
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .qid-link:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--accent-glow);
  }
  .qid-link .arrow { font-size: 13px; }
  /* Buttons that look like qid-link (e.g. Spares print) */
  button.qid-link {
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
  }
  .spares-print-btn:hover {
    color: var(--info);
    border-color: var(--info);
    background: rgba(108, 182, 255, 0.06);
  }
  .quote.complete .qid { color: var(--ok); border-color: var(--ok); }
  .qduration {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
  }
  .qduration .strong { color: var(--ink); font-weight: 500; }
  .qtimewindow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px; font-weight: 500;
    color: var(--accent);
    padding: 4px 10px;
    background: var(--accent-glow);
    border: 1px solid var(--accent-dim);
  }
  .quote.complete .qtimewindow {
    background: transparent; border-color: var(--line);
    color: var(--ink-faint);
    opacity: 0.7;
  }

  .qitems {
    list-style: none;
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
  }
  .qitem {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto auto auto;
    align-items: center; gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    transition: background 0.15s, padding-left 0.15s;
    border-left: 2px solid transparent;
  }
  .qitem:last-child { border-bottom: none; }
  .qitem:hover {
    background: var(--surface-2);
    border-left-color: var(--accent);
  }

  /* Two-phase check cluster: inspection + admin */
  .check-cluster {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .check-cluster .check-divider {
    width: 1px; height: 14px; background: var(--line);
  }

  .qitem.done { background: rgba(74, 222, 128, 0.04); }
  .qitem.done .qname { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--ok); }
  .qitem.missing { background: rgba(255, 90, 95, 0.04); }
  .qitem.missing .qname { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--danger); }
  .qitem.missing .qtime { text-decoration: line-through; color: var(--ink-faint); }
  /* Declined item — amber treatment, similar to missing but visually distinct.
     Declined items still need admin (label + box), so we keep the admin checkbox active. */
  .qitem.declined { background: rgba(255, 181, 71, 0.05); }
  .qitem.declined .qname { color: var(--ink-faint); }
  .qitem.declined .qtime { color: var(--ink-faint); }
  /* Declined + admin done = strikethrough name; declined + waiting on admin = no strikethrough */
  .qitem.declined-done .qname { text-decoration: line-through; text-decoration-color: var(--warn); }
  /* Declined cluster — DECL badge + admin checkbox */
  .check-cluster.declined-cluster { gap: 6px; }
  .declined-badge {
    display: inline-flex; align-items: center;
    background: var(--warn); color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
    flex-shrink: 0;
  }

  .qcheck {
    appearance: none; -webkit-appearance: none;
    /* Bumped 16 -> 22 for desktop. The phase icons inside (eye / note / printer)
       were too small to read at a glance, especially in low-light and on the
       lower-contrast unchecked state. Larger boxes also give a better tap
       target for trackpad clicks and accidental hovers. */
    width: 22px; height: 22px;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    cursor: pointer; position: relative;
    flex-shrink: 0; transition: all 0.15s;
  }
  .qcheck:hover { border-color: var(--accent); }
  .qcheck.inspect:checked { background: var(--ok); border-color: var(--ok); }
  .qcheck.nova:hover { border-color: var(--accent); }
  .qcheck.nova:checked { background: var(--accent); border-color: var(--accent); }
  .qcheck.admin { border-style: solid; }
  .qcheck.admin:hover { border-color: var(--info); }
  .qcheck.admin:checked { background: var(--info); border-color: var(--info); }

  /* Phase icons inside each unchecked box — visual hint of what each box does.
     Inspect = eye, Nova = note/form, Admin = printer. Hidden when checked
     (the tick takes over). Icon size and opacity bumped (11px/0.55 -> 16px/0.75)
     so the unchecked icon is much easier to identify at a glance. */
  .qcheck::before {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: var(--ink-soft);
    opacity: 0.75;
    pointer-events: none;
    transition: opacity 0.15s, color 0.15s;
  }
  .qcheck[data-phase="inspect"]::before { content: 'visibility'; }
  .qcheck[data-phase="nova"]::before { content: 'edit_note'; }
  .qcheck[data-phase="admin"]::before { content: 'print'; }
  .qcheck:hover::before { opacity: 1; color: var(--ink); }
  .qcheck:checked::before { opacity: 0; }

  .qcheck:checked::after {
    /* Checkmark scaled up to suit the larger box. The 16px box used a
       5x9 mark at (4,1); the 22px box uses 7x12 at (6,2) for similar
       proportional placement. */
    content: ''; position: absolute;
    left: 6px; top: 2px;
    width: 7px; height: 12px;
    border: solid var(--bg);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    z-index: 1;
  }
  .qcheck:disabled { cursor: not-allowed; opacity: 0.4; }

  /* Item states: partial-done (inspected but admin pending) */
  .qitem.inspected:not(.done) {
    background: rgba(74, 222, 128, 0.06);
  }
  .qitem.inspected:not(.done) .qname {
    color: var(--ink-soft);
  }

  .qname { font-size: 13px; color: var(--ink); line-height: 1.4; }
  .qsku {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 5px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    cursor: help;
  }
  .qsku.fuzzy {
    color: var(--warn);
    border-color: var(--warn);
    background: rgba(255, 181, 71, 0.06);
    text-transform: none;
    letter-spacing: normal;
  }
  /* Per-item note indicator — small icon next to the name when item has notes.
     Click to edit. Tooltip preview on hover. */
  .qitem-note-indicator {
    display: inline-flex; align-items: center;
    margin-left: 6px;
    color: var(--info);
    cursor: pointer;
    transition: color 0.15s;
  }
  .qitem-note-indicator:hover { color: var(--ink); }
  .qtime {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: var(--ink-soft);
    min-width: 36px; text-align: right;
  }
  .qtime-libnote {
    margin-left: 4px;
    color: var(--warn);
    cursor: help;
    font-weight: 600;
  }

  /* Item library import UI */
  .library-import-row { display: flex; align-items: center; flex-wrap: wrap; }
  .library-preview-summary {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-soft);
    margin-bottom: 8px;
    line-height: 1.5;
  }
  .library-preview-summary strong { color: var(--ink); font-weight: 600; }
  .library-preview-sample {
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 4px 0;
    max-height: 180px;
    overflow-y: auto;
  }
  .library-preview-row {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    border-bottom: 1px solid var(--line);
  }
  .library-preview-row:last-child { border-bottom: none; }
  .library-preview-row .lp-name {
    flex: 1; color: var(--ink);
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  }
  .library-preview-row .lp-sku {
    color: var(--ink-faint);
    text-transform: uppercase;
    font-size: 10px;
  }
  .library-preview-row .lp-time {
    color: var(--accent);
    min-width: 40px; text-align: right;
  }
  .library-preview-row .lp-time.muted { color: var(--ink-faint); }
  .library-preview-more {
    padding: 4px 10px;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--ink-faint);
    text-align: center;
    font-style: italic;
  }
  .library-preview-actions {
    display: flex; gap: 6px; justify-content: flex-end;
    margin-top: 10px;
  }
  .library-preview-actions .btn { padding: 6px 12px; font-size: 10px; }
  .qmissing-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 7px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
  }
  .qmissing-btn:hover { border-color: var(--danger); color: var(--danger); }
  .qitem.missing .qmissing-btn { background: var(--danger); border-color: var(--danger); color: var(--bg); }

  /* Missing-cluster wraps the missing button + the copy-message button into
     one grid cell, so we don't have to touch the .qitem grid template. */
  .missing-cluster {
    display: inline-flex; align-items: center; gap: 4px;
  }
  /* Copy-message button — only shown after item is marked missing. Drafts a
     pre-formatted Teams-friendly note for the manager about the missing item. */
  .qmissing-copy-btn {
    display: none; /* hidden by default, only revealed on missing items */
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    padding: 3px 5px;
    cursor: pointer;
    transition: all 0.15s;
    align-items: center; justify-content: center;
  }
  .qmissing-copy-btn .mat-icon { font-size: 13px; line-height: 1; }
  .qitem.missing .qmissing-copy-btn { display: inline-flex; }
  .qmissing-copy-btn:hover {
    border-color: var(--info);
    color: var(--info);
    background: rgba(108, 182, 255, 0.05);
  }
  .qmissing-copy-btn.just-copied {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
    animation: missing-copy-flash 0.6s ease-out;
  }
  @keyframes missing-copy-flash {
    0% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  body.viewer-mode .qmissing-copy-btn { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    .qmissing-copy-btn.just-copied { animation: none; }
  }

  /* Decline button — amber, distinct from missing's red.
     Used when an item is declined at unbox: assessed quickly, not normal inspection. */
  .qdecline-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 7px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 3px;
  }
  .qdecline-btn:hover { border-color: var(--warn); color: var(--warn); }
  .qitem.declined .qdecline-btn { background: var(--warn); border-color: var(--warn); color: var(--bg); }

  .qremove-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    cursor: pointer;
    padding: 3px 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .qremove-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(255, 90, 95, 0.06); }

  .qdupe-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    cursor: pointer;
    padding: 3px 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .qdupe-btn:hover { border-color: var(--info); color: var(--info); background: rgba(108, 182, 255, 0.06); }

  /* Bulk admin button */
  .qbulk-admin {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center; gap: 12px;
    padding: 8px 12px;
    border-top: 1px dashed var(--line);
    background: rgba(108, 182, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s;
    color: var(--info);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .qbulk-admin:hover { background: rgba(108, 182, 255, 0.15); }
  .qbulk-admin .check-icon {
    width: 16px; height: 16px;
    background: var(--info);
    color: var(--bg);
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700;
  }

  /* Add-item row */
  .qadd-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center; gap: 12px;
    padding: 8px 12px;
    border-top: 1px dashed var(--line);
    background: var(--bg-2);
    cursor: pointer;
    transition: background 0.15s;
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .qadd-row:hover { background: var(--surface-2); color: var(--ink); }
  .qadd-row .plus {
    width: 16px; height: 16px;
    border: 1px dashed var(--line-strong);
    display: grid; place-items: center;
    color: var(--ink-faint);
    font-weight: 600;
  }
  .qadd-row:hover .plus { border-color: var(--accent); color: var(--accent); }

  .qadd-form {
    display: grid;
    grid-template-columns: 1fr 90px auto auto;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    align-items: center;
  }
  .qadd-form input {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 8px 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
  }
  .qadd-form input.time-input {
    font-family: 'IBM Plex Mono', monospace;
    text-align: right;
  }
  .qadd-form input:focus { outline: none; border-color: var(--accent); }
  .qadd-form input::placeholder { color: var(--ink-faint); }
  .qadd-form .qadd-submit {
    background: var(--accent); color: var(--bg);
    border: 1px solid var(--accent);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: background 0.15s;
  }
  .qadd-form .qadd-submit:hover { background: var(--accent-dim); }
  .qadd-form .qadd-cancel {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.15s;
  }
  .qadd-form .qadd-cancel:hover { border-color: var(--ink); color: var(--ink); }
  .qadd-name-wrap { position: relative; }
  .qadd-name-wrap input.name-input { width: 100%; box-sizing: border-box; }
  .qadd-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
  }
  .qadd-suggestion {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background 0.1s;
  }
  .qadd-suggestion:last-child { border-bottom: none; }
  .qadd-suggestion:hover, .qadd-suggestion.active {
    background: var(--accent-glow);
  }
  .qadd-suggestion .qas-name {
    flex: 1;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    color: var(--ink);
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  }
  .qadd-suggestion .qas-sku {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    padding: 1px 5px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .qadd-suggestion .qas-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--accent);
    min-width: 36px; text-align: right;
  }
  /* Fuzzy match — slightly muted name, badge with ≈ symbol */
  .qadd-suggestion.fuzzy .qas-name {
    color: var(--ink-soft);
    font-style: italic;
  }
  .qadd-suggestion .qas-fuzzy {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--warn);
    margin-left: 4px;
    font-weight: 600;
  }

  .qfoot {
    display: flex; align-items: center; gap: 14px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .qfoot-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .qpref-bar { flex: 1; display: flex; gap: 3px; max-width: 200px; }
  .qpref-cell {
    flex: 1; height: 18px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    cursor: pointer; transition: all 0.1s;
  }
  .qpref-cell:hover { border-color: var(--accent); }
  .qpref-cell.active { background: var(--accent); border-color: var(--accent); }
  .qpref-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: var(--ink-soft);
    min-width: 32px;
  }
  .qpref-val .num { color: var(--accent); font-weight: 600; }

  /* ASIDE */
  aside {
    position: sticky;
    top: 144px; /* clear the sticky header (header ~70px + tabs ~46px + buffer) */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    align-self: start; /* prevent stretching to grid row height */
    display: flex; flex-direction: column;
    gap: 12px;
    /* hide scrollbar visually; behavior preserved */
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  aside::-webkit-scrollbar { width: 6px; }
  aside::-webkit-scrollbar-track { background: transparent; }
  aside::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
  }
  aside::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
  .panel { background: var(--surface); border: 1px solid var(--line); }
  .panel-head {
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
  }
  .panel-head h3 {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink);
  }
  .panel-head .panel-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--ink-faint);
  }
  .panel-body { padding: 14px 16px; }

  /* Collapsed input panel — body hidden, head clickable */
  .panel.collapsed .panel-body {
    display: none;
  }
  .panel.collapsed .panel-head {
    border-bottom: none;
  }
  .panel.collapsed .panel-head:hover {
    background: var(--surface-2);
  }
  .panel.collapsed .panel-head .panel-tag {
    color: var(--accent);
  }
  #inputPanelHead {
    transition: background 0.15s;
  }

  textarea {
    width: 100%; min-height: 110px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; line-height: 1.5;
    resize: vertical; transition: border-color 0.15s;
  }
  textarea:focus { outline: none; border-color: var(--accent); }
  textarea::placeholder { color: var(--ink-faint); }

  .btnrow { display: grid; gap: 6px; margin-top: 10px; }
  .btnrow.two { grid-template-columns: 1fr 1fr; }

  .btn {
    padding: 10px 14px;
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line-strong);
    font-family: inherit;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer; transition: all 0.15s;
    position: relative;
  }
  .btn:hover {
    background: var(--surface-3);
    border-color: var(--ink-faint);
    transform: translateY(-1px);
  }
  .btn:active { transform: translateY(0); }
  .btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .btn.primary:hover {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
    box-shadow: 0 4px 12px var(--accent-glow);
  }
  .btn.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 4px 12px rgba(255, 90, 95, 0.15);
  }
  /* Context-aware Archive button states (v1.8.118) — see
     refreshPrimaryActions(). Idle = nothing to archive (dimmed). Ready =
     end of day / all done (accent halo + gentle pulse to draw the eye). */
  .btn.danger.archive-idle {
    opacity: 0.45;
  }
  .btn.danger.archive-ready {
    animation: archiveReadyPulse 2.6s ease-in-out infinite;
  }
  @keyframes archiveReadyPulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 1px var(--accent), 0 0 12px 2px var(--accent-glow); }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn.danger.archive-ready { animation: none; box-shadow: 0 0 0 1px var(--accent); }
  }

  .stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--line);
    border: 1px solid var(--line);
  }
  .stat {
    background: var(--surface);
    padding: 14px;
    transition: background 0.15s;
  }
  .stat:hover { background: var(--surface-2); }
  .stat-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 24px; font-weight: 500;
    color: var(--ink); display: block;
    line-height: 1; letter-spacing: -0.02em;
  }
  .stat-num.accent { color: var(--accent); }
  .stat-lbl {
    font-size: 10px; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-top: 8px; display: block; font-weight: 500;
  }

  .progress-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .progress-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 8px;
  }
  .progress-meta .pct {
    color: var(--accent); font-weight: 600;
    font-size: 14px; letter-spacing: -0.01em;
  }
  .progressbar {
    height: 5px;
    background: var(--surface-2);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  }
  .progressfill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent));
    transition: width 0.4s ease;
    box-shadow: 0 0 8px var(--accent-glow);
  }

  /* Confetti particle (v1.8.127) — see fireConfetti(). Fixed-position so
     it bursts over whatever's on screen; Motion One drives the flight,
     this is just the base look. Self-removed when the animation ends. */
  .confetti-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    z-index: 9999;
    pointer-events: none;
    will-change: transform, opacity;
  }

  /* Allocation changes panel — folded into the workload balance below. The
     summary line is the always-visible "do I have 7h" question; clicking
     expands into the breakdown of what's been added, removed, or flagged
     missing today. State persists in localStorage so the user's preferred
     view stays put across page loads. */
  /* WORKLOAD HERO — full-width strip variant of the workload card.
     Sits above the layout grid; gets a more prominent visual treatment
     (accent border, larger summary text) and reflows the journey + groups
     horizontally on wide viewports for at-a-glance reading. */
  .workload-hero {
    margin-bottom: 16px;
    border-left: 3px solid var(--accent);
    background: var(--surface);
  }
  .workload-hero .wb-summary {
    padding: 12px 16px;
    font-size: 13px;
  }
  .workload-hero .wb-label {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
  .workload-hero .wb-value {
    font-size: 14px;
  }
  .workload-hero .wb-badge {
    font-size: 11px;
    padding: 3px 10px;
  }
  .workload-hero .wb-action {
    font-size: 10px;
  }
  .workload-hero .wb-details {
    padding: 16px 20px 18px;
    gap: 18px;
  }

  /* Hero on wide viewports: lay journey + groups horizontally. The journey
     becomes a row of metric cards (Target | Originally | Lost | Picked up |
     Currently), and the per-item groups split into side-by-side columns. */
  @media (min-width: 980px) {
    .workload-hero .wb-details {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .workload-hero .wb-journey {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: 0;
      padding: 12px 16px;
      align-items: stretch;
    }
    .workload-hero .wb-journey-row {
      flex-direction: column;
      align-items: flex-start;
      padding: 6px 12px;
      border-right: 1px solid var(--line);
      gap: 4px;
      min-height: 50px;
      justify-content: center;
    }
    .workload-hero .wb-journey-row:last-of-type { border-right: none; }
    .workload-hero .wb-journey-divider {
      display: none;
    }
    .workload-hero .wb-journey-label {
      margin-left: 0 !important;
      font-size: 10px !important;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ink-faint);
    }
    .workload-hero .wb-journey-value {
      margin-left: 0 !important;
      font-size: 16px;
    }
    .workload-hero .wb-journey-current {
      background: rgba(0, 0, 0, 0.18);
    }
    .workload-hero .wb-journey-current .wb-journey-value {
      font-size: 18px;
    }
    .workload-hero .wb-journey-status {
      grid-column: 1 / -1;
      margin: 0;
    }
    .workload-hero .wb-journey-note {
      grid-column: 1 / -1;
    }
    /* Groups laid out side-by-side at hero width so user reads
       Added | Removed | Missing as parallel columns. */
    .workload-hero .wb-groups-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 12px;
    }
    .workload-hero .wb-group {
      background: var(--bg);
      padding: 8px 12px;
      border-left: 2px solid var(--line);
    }
    .workload-hero .wb-group-added { border-left-color: rgba(74, 222, 128, 0.4); }
    .workload-hero .wb-group-removed { border-left-color: rgba(255, 90, 95, 0.4); }
    .workload-hero .wb-group-missing { border-left-color: rgba(255, 181, 71, 0.4); }
  }

  .workload-balance {
    margin-top: 10px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    line-height: 1.2;
  }
  .wb-summary {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
  }
  .wb-summary:hover { background: rgba(255,255,255,0.02); }
  .wb-summary:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
  .workload-balance .wb-label {
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 600;
  }
  .workload-balance .wb-value {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .workload-balance .wb-target {
    color: var(--ink-faint);
    font-weight: 400;
  }
  .workload-balance .wb-badge {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }
  .workload-balance .wb-mini-counts {
    color: var(--ink-faint);
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }
  .workload-balance .wb-chevron {
    color: var(--ink-faint);
    font-size: 16px !important;
    transition: transform 0.18s;
  }
  .workload-balance .wb-action {
    color: var(--ink-faint);
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
    width: 100%;
    text-align: right;
    line-height: 1;
  }
  /* SHORT: warm/amber — needs attention */
  .workload-balance.short {
    border-color: var(--warn);
    background: rgba(255, 181, 71, 0.06);
  }
  .workload-balance.short .wb-badge {
    color: var(--bg);
    background: var(--warn);
  }
  .workload-balance.short .wb-action { color: var(--warn); }
  /* OVER: lime — capacity available, can give back */
  .workload-balance.over {
    border-color: var(--accent);
    background: var(--accent-glow);
  }
  .workload-balance.over .wb-badge {
    color: var(--bg);
    background: var(--accent);
  }
  .workload-balance.over .wb-action { color: var(--accent); }
  /* ON: lime tint, no urgency */
  .workload-balance.on {
    border-color: var(--ok);
    background: rgba(74, 222, 128, 0.05);
  }
  .workload-balance.on .wb-badge {
    color: var(--bg);
    background: var(--ok);
  }

  /* Details expansion */
  .wb-details {
    border-top: 1px solid var(--line);
    padding: 10px 12px 12px;
    display: flex; flex-direction: column;
    gap: 14px;
    background: var(--bg);
  }

  /* Journey block — sits at the top of details, shows allocation as a
     running calculation: target → original → adjustments → current →
     status. Designed to make the "you're short, ask for work" / "you're
     over, can give back" signal unmissable. */
  .wb-journey {
    display: flex; flex-direction: column;
    gap: 0;
    padding: 10px 12px 12px;
    background: var(--surface);
    border-left: 2px solid var(--accent);
  }
  .wb-journey-row {
    display: flex; align-items: baseline;
    gap: 12px;
    padding: 4px 0;
  }
  .wb-journey-divider {
    height: 1px;
    background: var(--line);
    margin: 4px 0;
  }
  .wb-journey-label {
    font-size: 11px;
    color: var(--ink-soft);
  }
  .wb-journey-value {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .wb-journey-target .wb-journey-label {
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 600;
  }
  .wb-journey-target .wb-journey-value {
    color: var(--ink-soft);
  }
  .wb-journey-minus .wb-journey-label,
  .wb-journey-minus .wb-journey-value {
    color: var(--warn);
  }
  .wb-journey-plus .wb-journey-label,
  .wb-journey-plus .wb-journey-value {
    color: var(--ok);
  }
  .wb-journey-current .wb-journey-label {
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 600;
  }
  .wb-journey-current .wb-journey-value {
    font-size: 14px;
    color: var(--accent);
  }
  .wb-journey-status {
    margin-top: 6px;
    padding: 6px 10px;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    border: 1px solid var(--line);
  }
  .wb-journey-status-ok {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(0, 0, 0, 0.2);
  }
  .wb-journey-status-short {
    color: var(--warn);
    border-color: rgba(255, 181, 71, 0.4);
    background: rgba(255, 181, 71, 0.06);
  }
  .wb-journey-status-over {
    color: var(--info);
    border-color: rgba(108, 182, 255, 0.4);
    background: rgba(108, 182, 255, 0.06);
  }
  .wb-journey-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
    vertical-align: 1px;
  }
  .wb-journey-note {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(108, 182, 255, 0.05);
    border-left: 2px solid var(--info);
    display: flex; align-items: flex-start;
    gap: 6px;
    font-size: 10px;
    color: var(--ink-soft);
    line-height: 1.4;
  }
  .wb-journey-note .mat-icon {
    font-size: 13px !important;
    color: var(--info);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .wb-group-note {
    font-size: 10px;
    color: var(--ink-faint);
    line-height: 1.4;
    padding: 4px 0;
    margin-bottom: 4px;
    font-style: italic;
  }
  .wb-group {
    display: flex; flex-direction: column;
    gap: 4px;
  }
  .wb-group-head {
    display: flex; align-items: center;
    gap: 8px;
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
  }
  .wb-group-icon {
    font-size: 16px !important;
    line-height: 1;
  }
  .wb-group-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink);
  }
  .wb-group-summary {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: none; letter-spacing: 0;
  }
  .wb-group-summary strong {
    color: var(--ink);
    font-weight: 600;
  }
  .wb-group-added .wb-group-icon { color: var(--ok); }
  .wb-group-added .wb-group-head { border-bottom-color: rgba(74, 222, 128, 0.25); }
  .wb-group-added .wb-group-summary strong { color: var(--ok); }
  .wb-group-removed .wb-group-icon { color: var(--danger); }
  .wb-group-removed .wb-group-head { border-bottom-color: rgba(255, 90, 95, 0.25); }
  .wb-group-removed .wb-group-summary strong { color: var(--danger); }
  .wb-group-missing .wb-group-icon { color: var(--warn); }
  .wb-group-missing .wb-group-head { border-bottom-color: rgba(255, 181, 71, 0.25); }
  .wb-group-missing .wb-group-summary strong { color: var(--warn); }

  .wb-group-list {
    display: flex; flex-direction: column;
    gap: 1px;
  }
  .wb-row {
    display: grid;
    grid-template-columns: 38px 70px minmax(0, 1fr) auto 22px;
    gap: 8px;
    align-items: baseline;
    padding: 4px 2px;
    font-size: 11px;
    border-radius: 0;
  }
  .wb-row:hover { background: var(--surface); }
  .wb-row-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .wb-row-qid {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .wb-row-name {
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .wb-row-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
    vertical-align: 1px;
  }
  .wb-row-min {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
    font-size: 11px;
  }
  .wb-row-jump {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 18px;
    transition: all 0.12s;
  }
  .wb-row-jump:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  .wb-row-jump-spacer {
    display: block;
    width: 22px;
  }
  .wb-group-added .wb-row-min { color: var(--ok); }
  .wb-group-removed .wb-row-min { color: var(--danger); }
  .wb-group-missing .wb-row-min { color: var(--warn); opacity: 0.85; }
  .wb-empty {
    text-align: center;
    color: var(--ink-faint);
    font-size: 10px;
    padding: 8px 0;
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  /* Narrow viewport (e.g. mobile or the Today sidebar): drop the time
     column to give the name more room. The timestamp is non-essential
     for understanding the row, so it's the first thing to compress. */
  @media (max-width: 720px) {
    .wb-row {
      grid-template-columns: 60px minmax(0, 1fr) auto 22px;
    }
    .wb-row-time { display: none; }
  }

  .legend {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--ink-faint);
    line-height: 1.7;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .legend strong { color: var(--ink-soft); font-weight: 500; }
  .legend kbd {
    display: inline-block; padding: 1px 5px;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
  }

  .empty {
    text-align: center; padding: 80px 20px;
    color: var(--ink-faint);
    border: 1px dashed var(--line);
  }
  .empty-icon {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 32px; color: var(--ink-faint);
    margin-bottom: 16px; letter-spacing: -2px;
  }
  .empty p {
    font-size: 14px; font-weight: 500;
    color: var(--ink-soft); margin-bottom: 6px;
  }
  .empty span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }

  /* HISTORY
     Each archived day is a card with a clear head (date + meta pills)
     and an indented body containing per-quote lines. Refreshed to match
     the Status tab's metric-card visual language: stronger top border
     when target hit (ok-tinted), card head has a tinted surface so the
     header reads as a "card-tag" rather than the same surface as the
     quote list below it. */
  .history-day {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 3px;
    margin-bottom: 12px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .history-day:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  }
  .history-day.target-hit { border-left-color: var(--ok); }
  .history-day.target-short { border-left-color: var(--warn); }

  /* === History head (v1.8.105 overhaul) ===
     Date column on the left (day-of-week + long + relative), metric tiles
     centre, sparkline + actions on the right. Wraps on narrow viewports. */
  .history-day-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    display: grid;
    grid-template-columns: 16px minmax(140px, auto) 1fr auto auto;
    column-gap: 18px;
    row-gap: 10px;
    align-items: center;
    cursor: pointer;
    outline: none;
  }
  .history-day-head:hover { background: var(--surface-2); }
  .history-day-head:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
  .history-day-head .hd-collapse-chevron {
    font-size: 18px;
    color: var(--ink-faint);
    transition: transform 0.18s ease;
  }
  /* Collapsed: chevron points right, body + timeline hidden, head loses
     its bottom border so the card reads as a single compact row. */
  .history-day.collapsed .history-day-head { border-bottom: none; }
  .history-day.collapsed .history-day-head .hd-collapse-chevron {
    transform: rotate(-90deg);
  }
  .history-day.collapsed .history-day-body,
  .history-day.collapsed .history-day-timeline {
    display: none !important;
  }
  /* The allocation chip spans the full head — when collapsed, hide it too
     so the collapsed row is just chevron + date + tiles + actions. */
  .history-day.collapsed .hd-allocation { display: none; }
  .history-day-head .hd-date {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .history-day-head .hd-dow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
  }
  .history-day-head .hd-long {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
    margin-top: 2px;
  }
  .history-day-head .hd-rel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  .history-day-head .hd-tiles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .history-day-head .hd-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 10px;
    min-width: 70px;
    text-align: center;
  }
  .history-day-head .hd-tile-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
  }
  .history-day-head .hd-tile-of {
    color: var(--ink-faint);
    font-weight: 400;
    font-size: 11px;
  }
  .history-day-head .hd-tile-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 3px;
  }
  .history-day-head .hd-tile.ok { border-color: var(--ok); }
  .history-day-head .hd-tile.ok .hd-tile-val { color: var(--ok); }
  .history-day-head .hd-tile.warn { border-color: var(--warn); }
  .history-day-head .hd-tile.warn .hd-tile-val { color: var(--warn); }

  /* Pace sparkline — vertical bars centered at 50% (1.0× = on plan) */
  .history-day-head .hd-spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 32px;
    padding: 0 6px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .history-day-head .hd-spark-bar {
    width: 4px;
    background: var(--ink-soft);
    min-height: 4px;
    align-self: center;
    transition: filter 0.15s;
  }
  .history-day-head .hd-spark-bar.ok { background: var(--ok); }
  .history-day-head .hd-spark-bar.warn { background: var(--warn); }
  .history-day-head .hd-spark-bar.danger { background: var(--danger); }
  .history-day-head .hd-spark-bar.mid { background: var(--accent); }
  .history-day-head .hd-spark-bar:hover { filter: brightness(1.4); }
  /* Custom CSS-only tooltip for sparkline bars — replaces the raw `title`
     attribute (Chrome Claude polish note v1.8.106). Uses data-tip so the
     value can be templated by JS. Pure CSS, no JS listener required. */
  .history-day-head .hd-spark-bar { position: relative; }
  .history-day-head .hd-spark-bar[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--accent);
    padding: 4px 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }

  .history-day-head .hd-actions {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .history-day-head .hd-allocation {
    grid-column: 1 / -1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    padding-top: 8px;
    border-top: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .history-day-head .hd-allocation strong { color: var(--ink); }

  /* Week-of divider between history rows */
  .history-week-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 8px;
  }
  .history-week-divider .hwd-line {
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .history-week-divider .hwd-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }
  .history-week-divider:first-child { margin-top: 0; }

  /* Quote rows inside the body */
  .history-quote-line {
    display: grid;
    grid-template-columns: 14px auto 1fr auto auto auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }
  .history-quote-line:nth-child(even) { background: rgba(255,255,255,0.012); }
  .history-quote-line:last-child { border-bottom: none; }
  .history-quote-line .hq-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-faint);
    display: inline-block;
    flex-shrink: 0;
  }
  .history-quote-line .hq-dot.dot-done { background: var(--ok); }
  .history-quote-line .hq-dot.dot-partial { background: var(--warn); }
  .history-quote-line .hq-dot.dot-meeting { background: var(--info); }
  .history-quote-line .hq-dot.dot-untracked { background: var(--ink-soft); }
  .history-quote-line .hq-qid {
    color: var(--ink);
    font-weight: 600;
  }
  .history-quote-line .hq-meta {
    color: var(--ink-faint);
    font-size: 10px;
  }
  .history-quote-line .hq-pace {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    padding: 2px 6px;
    border: 1px solid var(--line);
    letter-spacing: 0.04em;
  }
  .history-quote-line .hq-pace.ok { color: var(--ok); border-color: var(--ok); }
  .history-quote-line .hq-pace.warn { color: var(--warn); border-color: var(--warn); }
  .history-quote-line .hq-pace.danger { color: var(--danger); border-color: var(--danger); }
  .history-quote-line.is-meeting .hq-qid {
    text-transform: uppercase;
    font-size: 10px;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
  }
  .history-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border: 1px solid;
  }
  .history-status.complete { color: var(--ok); border-color: var(--ok); }
  .history-status.partial { color: var(--warn); border-color: var(--warn); }
  .history-quote-note {
    color: var(--info);
    display: inline-flex;
    align-items: center;
    cursor: help;
  }

  /* Unified sub-button used across history actions (pull, print, delete,
     timeline). Compact, neutral, hover-tinted by context. */
  .history-day .btn-sub,
  .history-day .delete-history {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .history-day .btn-sub:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }
  .history-day .delete-history:hover {
    color: var(--danger);
    border-color: var(--danger);
  }

  /* Responsive: stack columns under ~720px */
  @media (max-width: 720px) {
    .history-day-head {
      grid-template-columns: 1fr;
    }
    .history-day-head .hd-spark { display: none; }
    .history-day-head .hd-actions { justify-self: end; }
  }

  /* === DAY NAVIGATION on Today tab (v1.8.108) ===
     Step back through archived days inline without leaving the Today
     tab. When viewing a past day, body.viewing-past-day hides the live
     hero + layout and reveals #pastDayView. */
  .day-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
  }
  .day-nav .dn-arrow {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .day-nav .dn-arrow:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
  }
  .day-nav .dn-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .day-nav .dn-arrow .mat-icon { font-size: 18px; }
  .day-nav .dn-label {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.1;
  }
  .day-nav .dn-dow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
  }
  .day-nav .dn-long {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }
  .day-nav .dn-rel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: lowercase;
    letter-spacing: 0.04em;
  }
  .day-nav .dn-today {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    cursor: pointer;
  }
  .day-nav .dn-today:hover { filter: brightness(1.1); }

  /* Past-day view */
  .past-day-view .past-day-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(108, 182, 255, 0.08);
    border: 1px solid var(--info);
    border-left-width: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
  }
  .past-day-view .past-day-banner .mat-icon {
    color: var(--info);
    font-size: 18px;
  }
  .past-day-view .past-day-banner > span { flex: 1; }
  .past-day-view .past-day-banner strong { color: var(--ink); }
  .past-day-view .past-day-banner .btn-sub {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .past-day-view .past-day-banner .btn-sub:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  .past-day-view .past-day-card .history-day-timeline {
    display: block;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
  }

  /* Read-only quote cards in the past-day view (v1.8.119). Reuse the live
     .quote / .qitems styling so a past day reads like the Today view —
     just static. The cards have no .quote-index child, so give .quote-body
     the full width here. */
  .past-day-view .pdv-quotes {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* pdv-head: the past-day card's summary header no longer carries the
     redundant date block (the day-nav strip already shows it) — just lay
     the metric tiles out, overriding the grid the live history head uses. */
  .past-day-view .pdv-head {
    display: flex;
    cursor: default;
  }
  .past-day-view .pdv-head:hover { background: var(--bg-2); }
  .past-day-view .pdv-head .hd-tiles { flex: 1; }

  /* Read-only quote cards are visibly distinct from the live Today cards:
     slightly muted + desaturated, with a thin left rule and a faint
     diagonal wash so it's obvious at a glance you can't tick anything
     here. The single live affordance — the pull button — opts back out
     of the muting so it still reads as actionable. */
  .past-day-view .pdv-quote {
    cursor: default;
    opacity: 0.92;
    filter: saturate(0.82);
    border-left: 2px solid var(--line-strong);
    position: relative;
  }
  .past-day-view .pdv-quote::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.012) 0,
      rgba(255,255,255,0.012) 6px,
      transparent 6px,
      transparent 12px
    );
    pointer-events: none;
  }
  .past-day-view .pdv-quote .quote-body {
    width: 100%;
    position: relative;  /* sit above the ::before wash */
  }
  /* Disabled tick boxes still need to read clearly as ticked / not —
     keep them at full opacity, just non-interactive. */
  .past-day-view .pdv-quote .qcheck:disabled {
    opacity: 1;
    cursor: default;
  }
  .past-day-view .pdv-quote .qid {
    cursor: default;
  }
  /* The pull button is the one live control — undo the card's muting on it. */
  .past-day-view .pdv-quote .pull-forward {
    opacity: 1;
    filter: saturate(1.3);
    position: relative;
  }
  .past-day-view .pdv-meeting .pdv-meeting-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink-soft);
    padding: 6px 0 2px;
  }
  .past-day-view .pdv-decline-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--warn);
    border: 1px solid var(--warn);
    padding: 1px 5px;
    margin-left: 6px;
  }
  /* The pull button stays interactive — everything else in the card is static. */
  .past-day-view .pdv-quote .pull-forward {
    margin-left: auto;
    cursor: pointer;
  }

  /* When viewing a past day, hide the live Today layout pieces */
  body.viewing-past-day #workloadHero,
  body.viewing-past-day #view-today .layout {
    display: none !important;
  }
  body.viewing-past-day .resume-chip,
  body.viewing-past-day #viewer-preview-banner {
    display: none !important;
  }


  @media (max-width: 1100px) {
    .layout { grid-template-columns: 60px 1fr; }
    aside {
      grid-column: 1 / -1;
      position: static;
      flex-direction: row; flex-wrap: wrap;
      max-height: none;
      overflow-y: visible;
    }
    aside > * { flex: 1; min-width: 280px; }
  }

  /* === MOBILE === */
  @media (max-width: 768px) {
    .app { padding: 14px; }
    .layout {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .timerail { display: none; }

    /* Header — tighter, drop unnecessary buttons */
    header { padding: 12px 0; }
    h1 { font-size: 12px; }
    h1 span { display: none; } /* hide version */
    .clock { gap: 8px; }
    .clock-block { margin-left: 6px; }
    .clock-time { font-size: 16px; }
    .clock-date { font-size: 10px; margin-top: 2px; }
    .live-dot { width: 6px; height: 6px; }
    .kb-help-btn { display: none; } /* irrelevant on touch */
    .settings-btn { width: 30px; height: 30px; font-size: 14px; }

    /* Sync indicator — dot only, no label, on mobile */
    .sync-indicator {
      padding: 5px 7px;
    }
    .sync-indicator .sync-label { display: none; }

    /* Tabs — slimmer */
    .tab { padding: 11px 14px; font-size: 11px; letter-spacing: 0.06em; }

    /* Aside (input panel) — keep collapsed by default on mobile */
    aside { flex-direction: column; }
    aside > * { min-width: 0; flex: 1 1 100%; }

    /* Quote cards — stacked vertical layout */
    .quote {
      grid-template-columns: 32px 1fr;
    }
    .quote-index {
      width: 32px;
    }
    .quote-index-num { font-size: 14px; }
    .quote-index-grip { display: none; } /* drag handles useless on touch */
    .quote-body { padding: 12px 12px 4px; }
    .qhead {
      flex-wrap: wrap;
      gap: 6px 8px;
    }
    .qhead .qid {
      flex-basis: auto;
    }
    .qid-link span:first-child { display: none; } /* just show ↗ arrow */
    .qduration { flex-basis: 100%; order: 5; font-size: 11px; }
    .qtimewindow { font-size: 10px; }

    /* Item rows — compact, larger tap targets.
       Grid columns: checks, name, time, decline, missing, dupe, delete (7 cells). */
    .qitem {
      grid-template-columns: auto 1fr auto auto auto auto auto;
      padding: 11px 10px;
      gap: 6px;
    }
    .qcheck { width: 26px; height: 26px; } /* bigger tap targets on mobile */
    .qcheck::before { font-size: 18px; } /* scale phase icons to match larger box */
    .qcheck:checked::after { left: 8px; top: 3px; width: 7px; height: 13px; }
    .qname { font-size: 12px; line-height: 1.35; min-width: 0; }
    /* Tighter right-side buttons so all four fit without wrapping */
    .qmissing-btn, .qdecline-btn { font-size: 10px; padding: 4px 5px; letter-spacing: 0.04em; }
    .qremove-btn, .qdupe-btn { padding: 3px 4px; }
    .qremove-btn .mat-icon, .qdupe-btn .mat-icon { font-size: 12px !important; }
    /* Lower-priority buttons hide on very narrow screens — delete + missing are kept */
    @media (max-width: 420px) {
      .qdupe-btn { display: none; }
      .qitem { grid-template-columns: auto 1fr auto auto auto auto; }
    }

    /* Day status strip — 2 columns on mobile (4 → 2x2 grid) */
    .day-status {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 10px 12px;
    }
    .ds-block { padding-right: 10px; }
    .ds-block .ds-value { font-size: 14px; }

    /* Suggestion banner — slimmer */
    .suggestion-banner {
      grid-template-columns: auto 1fr auto;
      padding: 7px 10px;
      gap: 8px;
    }
    .suggestion-banner .suggestion-dismiss { display: none; } /* tap apply or dismiss via swipe-out unrealistic; just rely on apply or close */
    .suggestion-banner .suggestion-apply { padding: 5px 10px; font-size: 10px; }
    .suggestion-text { font-size: 11px; }

    /* Stats grid — single column */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stats-card { padding: 12px; }
    .stats-card .value { font-size: 20px; }
    .stats-bar-row { grid-template-columns: 80px 1fr 50px; gap: 8px; font-size: 10px; }

    /* Modals — fill screen better */
    .modal { width: 96%; max-width: 96%; }
    .modal-body { padding: 14px; }

    /* Login screen — better mobile size */
    .login-card { padding: 20px; }

    /* Time rail removal — main column needs to stretch */
    main { grid-column: 1; }

    /* Settings sign-out row — column on tiny screens */
    .signout-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .signout-row .btn { width: 100%; padding: 10px; }

    /* "Now" line — simpler */
    .now-line .now-label { font-size: 10px; padding: 2px 6px; }

    /* Pull-forward button on history — smaller */
    .pull-forward { font-size: 10px; padding: 3px 7px; }
  }

  /* === SMALL MOBILE === */
  @media (max-width: 480px) {
    .app { padding: 10px; }
    h1 { font-size: 11px; }
    .brand-mark { width: 26px; height: 26px; font-size: 13px; }
    .tab { padding: 10px 12px; font-size: 10px; }
    .tab-count { font-size: 10px; padding: 1px 5px; margin-left: 4px; }

    /* Stats grid — single column on phones */
    .stats-grid { grid-template-columns: 1fr; }

    /* Day status — stack all 4 */
    .day-status { grid-template-columns: 1fr; }
    .day-status .ds-block:nth-child(2),
    .day-status .ds-block:nth-child(3),
    .day-status .ds-block:nth-child(4) {
      grid-column: 1;
      border-right: none;
      border-top: 1px solid var(--line);
      padding-top: 8px;
    }

    /* Quote header — even more compact */
    .qid-link { padding: 3px 6px; font-size: 10px; }
    .qid-link .arrow { font-size: 12px; }
  }

  /* Login screen */
  #loginScreen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: grid; place-items: center;
    z-index: 1000;
    overflow: hidden;
    animation: login-fade-in 0.4s ease-out;
  }
  @keyframes login-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Decorative background — oversized faded logo bars */
  #loginScreen::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: min(80vw, 900px);
    height: min(80vw, 900px);
    transform: translate(-50%, -50%) rotate(-12deg);
    background:
      linear-gradient(transparent 28%, rgba(58,58,58,0.08) 28%, rgba(58,58,58,0.08) 38%, transparent 38%),
      linear-gradient(transparent 44%, rgba(212,255,58,0.06) 44%, rgba(212,255,58,0.06) 60%, transparent 60%),
      linear-gradient(transparent 64%, rgba(90,90,90,0.07) 64%, rgba(90,90,90,0.07) 74%, transparent 74%);
    pointer-events: none;
    z-index: 0;
  }
  .login-wrap {
    position: relative;
    z-index: 1;
    display: flex; flex-direction: column;
    align-items: center;
    width: 92%; max-width: 380px;
    animation: login-rise 0.5s ease-out;
  }
  @keyframes login-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .login-hero {
    width: 76px; height: 76px;
    margin-bottom: 22px;
  }
  .login-hero svg { width: 100%; height: 100%; display: block; }
  .login-card {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    width: 100%;
    padding: 28px 26px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    position: relative;
  }
  /* Lime accent stripe at the top of the card */
  .login-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: var(--accent);
  }
  .login-title {
    font-size: 14px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 4px;
  }
  .login-subtitle {
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 22px;
  }
  .login-form .field { margin-bottom: 12px; }
  .login-form .field label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 5px;
  }
  .login-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .login-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.12);
  }
  .login-form .btn {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  .login-error {
    color: var(--danger);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    margin-top: 12px;
    padding: 8px 10px;
    border-left: 2px solid var(--danger);
    background: rgba(255, 90, 95, 0.05);
    display: none;
    animation: login-error-shake 0.3s ease-out;
  }
  .login-error.show { display: block; }
  @keyframes login-error-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
  }
  .login-loading {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    text-align: center;
    color: var(--ink-faint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 8px 0;
  }
  /* Animated brand-mark replaces the old pulse dot (.brand-mark.brand-loading) */
  .login-footer {
    margin-top: 18px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.14em;
    text-align: center;
  }
  /* Sign-out button in Settings modal */
  .signout-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    margin-top: 16px;
    border-top: 1px solid var(--line);
  }
  .signout-row .signout-info {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-soft);
  }
  .signout-row .signout-info .email { color: var(--ink); }
  .signout-row .btn { padding: 7px 14px; font-size: 11px; }

  /* === STRENGTHS TAB ===
     Reuses .status-section / .status-section-title / .status-metric-card
     from the Status tab — same visual language. Classes below are only for
     the bits Strengths needs that Status doesn't have: horizontal pace
     bars centred on 1.00× and per-item rows. */
  .strengths-empty {
    padding: 24px 0 8px;
  }

  /* Horizontal category bars. Track centred on 1.00× — bar fills from the
     centre out toward the median ratio, so left of centre reads as "faster
     than planned" and right of centre as "slower". */
  .strengths-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .strengths-bar-row { display: flex; flex-direction: column; gap: 6px; }
  .strengths-bar-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 12px;
  }
  .strengths-bar-label {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
  }
  .strengths-bar-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .strengths-bar-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 56px;
    text-align: right;
  }
  .strengths-bar-value.ok { color: var(--ok); }
  .strengths-bar-value.warn { color: var(--warn); }
  .strengths-bar-value.danger { color: var(--danger); }
  .strengths-bar-track {
    position: relative;
    height: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
  }
  .strengths-bar-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--accent-dim);
  }
  .strengths-bar-fill.ok { background: var(--ok); opacity: 0.85; }
  .strengths-bar-fill.warn { background: var(--warn); opacity: 0.85; }
  .strengths-bar-fill.danger { background: var(--danger); opacity: 0.85; }
  /* Centre marker = the "1.00× exactly on plan" tick. */
  .strengths-bar-marker {
    position: absolute;
    top: -2px; bottom: -2px;
    left: 50%;
    width: 1px;
    background: var(--ink-faint);
    pointer-events: none;
  }
  .strengths-bar-legend {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    margin-top: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .strengths-bar-legend-cell:nth-child(2) { text-align: center; }
  .strengths-bar-legend-cell:nth-child(3) { text-align: right; }

  /* Per-item row lists (top performers, hit-or-miss). Dense, scannable. */
  .strengths-item-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: var(--surface);
  }
  .strengths-item-row {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
  }
  .strengths-item-row:last-child { border-bottom: none; }
  .strengths-item-cat {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
  }
  .strengths-item-name {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .strengths-item-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
  }
  .strengths-item-pace {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 56px;
    text-align: right;
  }
  .strengths-item-pace.ok { color: var(--ok); }
  .strengths-item-pace.warn { color: var(--warn); }
  .strengths-item-pace.danger { color: var(--danger); }
  .strengths-item-hint {
    margin-top: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  @media (max-width: 700px) {
    .strengths-item-row {
      grid-template-columns: 72px 1fr auto;
      gap: 8px;
    }
    .strengths-item-meta { display: none; }
    .strengths-bar-head {
      grid-template-columns: 1fr auto;
    }
    .strengths-bar-meta { display: none; }
    .strengths-bar-legend { grid-template-columns: 1fr; gap: 2px; text-align: center; }
    .strengths-bar-legend-cell:nth-child(3) { text-align: center; }
  }

  /* === VIEWER STATS SUB-TABS ===
     Compartmentalises the manager's Stats view into Now / Concerns /
     Trends / All-time. Sticks at the top of the view so the manager
     can flip narratives without scrolling back up. */
  .vstats-subtabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 4px;
    padding: 10px 0;
    margin-bottom: 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .vstats-subtab {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 7px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .vstats-subtab:hover { color: var(--ink); border-color: var(--line-strong); }
  .vstats-subtab.active {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
  }
  .vstats-subtab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 600;
    background: var(--warn);
    color: var(--bg);
    border-radius: 0;
  }
  .vstats-subtab.active .vstats-subtab-count {
    background: var(--bg);
    color: var(--warn);
  }
  /* Hide non-active tab groups. CSS-only toggle keeps chart canvases
     mounted (display:none preserves DOM, doesn't destroy chart state). */
  .vstats-tab-group { display: none; }
  .vstats-tab-group.active { display: block; }

  /* === LIBRARY BROWSER ===
     Sub-modal opened from Settings. Surface the item library that
     previously powered smart-match invisibly. Search + sort + inline
     edit + delete. */
  .lib-browser-modal .modal-body { padding-top: 0; }
  .lib-browser-body { max-height: 70vh; display: flex; flex-direction: column; }
  .lib-controls {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: wrap;
  }
  .lib-search {
    flex: 1;
    min-width: 200px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    padding: 7px 10px;
  }
  .lib-search:focus { border-color: var(--accent); outline: none; }
  .lib-sort {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    padding: 7px 10px;
    cursor: pointer;
  }
  .lib-table-wrap {
    flex: 1;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .lib-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
  }
  .lib-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-2);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
  }
  .lib-table thead th.lib-num { text-align: right; }
  .lib-table tbody tr { border-bottom: 1px solid var(--line); }
  .lib-table tbody tr:hover { background: var(--surface-2); }
  .lib-table tbody tr.editing { background: var(--surface-2); }
  .lib-table td {
    padding: 7px 12px;
    color: var(--ink);
    vertical-align: middle;
  }
  .lib-table .lib-name { color: var(--ink); }
  .lib-table .lib-sku { color: var(--ink-soft); }
  .lib-table .lib-num { text-align: right; color: var(--ink-soft); }
  .lib-table .lib-actions { text-align: right; white-space: nowrap; }
  .lib-table .lib-actions .btn { font-size: 10px; padding: 4px 8px; margin-left: 4px; }
  .lib-table input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: inherit;
    font-size: inherit;
    padding: 4px 6px;
  }
  .lib-table input:focus { border-color: var(--accent); outline: none; }
  .lib-empty {
    text-align: center;
    color: var(--ink-faint);
    padding: 24px;
    font-style: italic;
  }
  .lib-table-foot {
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
  }

  /* === DAY TIMELINE (Stats > Now) ===
     Editing-timeline-style SVG of a day. Quote/lunch/meeting bands sit
     on a "gap" background so any uncovered area = in-between time.
     Tick events plot as colored dots beneath. Now-line marks current
     time on today's timeline. */
  .day-timeline-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  .day-timeline-wrap .stats-section-title { margin-top: 0; margin-bottom: 8px; }
  .day-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .day-timeline-zoom {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .day-timeline-zoom .dtz-btn {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    min-width: 28px;
    transition: all 0.15s;
  }
  .day-timeline-zoom .dtz-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .day-timeline-zoom .dtz-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 4px;
  }
  /* Scroll container. Native horizontal scrollbar handles pan when
     zoomed in. Cursor changes to grab when content overflows. */
  .day-timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* Thin scrollbar so it doesn't dominate */
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) var(--bg);
  }
  .day-timeline-scroll.dragging { cursor: grabbing; }
  .day-timeline-scroll::-webkit-scrollbar { height: 8px; }
  .day-timeline-scroll::-webkit-scrollbar-track { background: var(--bg); }
  .day-timeline-scroll::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 0;
  }
  .day-timeline-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
  /* History-row timeline wraps in its own block when toggled open. */
  .history-day-timeline {
    border-top: 1px solid var(--line);
    padding: 12px 14px;
  }
  .history-day-timeline .day-timeline-wrap {
    margin-bottom: 0;
    border: none;
    padding: 0;
    background: transparent;
  }
  .history-timeline-toggle {
    background: transparent;
    border: 1px solid var(--info);
    color: var(--info);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .history-timeline-toggle:hover {
    background: var(--info);
    color: var(--bg);
  }
  .tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
  }
  .tl-leg { display: inline-flex; align-items: center; gap: 5px; }
  .tl-swatch {
    display: inline-block;
    width: 12px;
    height: 10px;
    border: 1px solid var(--line);
  }
  .tl-swatch.q-active { background: var(--accent); border-color: var(--accent); }
  .tl-swatch.q-done { background: var(--ok); border-color: var(--ok); }
  .tl-swatch.lunch { background: rgba(255, 181, 71, 0.4); border-color: var(--warn); }
  .tl-swatch.meeting { background: rgba(108, 182, 255, 0.4); border-color: var(--info); }
  .tl-swatch.untracked { background: rgba(155, 163, 173, 0.3); border-color: var(--ink-soft); }
  .tl-swatch.gap {
    background: repeating-linear-gradient(
      45deg,
      rgba(255, 90, 95, 0.15) 0,
      rgba(255, 90, 95, 0.15) 4px,
      transparent 4px,
      transparent 8px
    );
    border-color: rgba(255, 90, 95, 0.3);
  }
  .tl-dot-leg {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .tl-dot-leg.inspect { background: var(--info); }
  .tl-dot-leg.nova { background: var(--accent); }
  .tl-dot-leg.admin { background: var(--ok); }

  .day-timeline {
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
  }
  .tl-grid {
    stroke: var(--line);
    stroke-width: 1;
    opacity: 0.5;
  }
  .tl-grid-minor {
    stroke: var(--line);
    stroke-width: 1;
    opacity: 0.25;
  }
  .tl-axis-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    fill: var(--ink-faint);
  }
  .tl-gap-bg {
    fill: repeating-linear-gradient(
      45deg,
      rgba(255, 90, 95, 0.12) 0,
      rgba(255, 90, 95, 0.12) 4px,
      transparent 4px,
      transparent 8px
    );
    /* SVG doesn't support repeating-linear-gradient as fill; use solid wash */
    fill: rgba(255, 90, 95, 0.06);
    stroke: rgba(255, 90, 95, 0.18);
    stroke-width: 1;
  }
  .tl-band-quote { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 1; }
  .tl-band-quote.active { fill: var(--accent); stroke: var(--accent); }
  .tl-band-quote.done { fill: var(--ok); stroke: var(--ok); opacity: 0.85; }
  .tl-band-quote.partial { fill: var(--accent-dim); stroke: var(--accent-dim); }
  .tl-band-lunch { fill: rgba(255, 181, 71, 0.35); stroke: var(--warn); stroke-width: 1; }
  .tl-band-meeting { fill: rgba(108, 182, 255, 0.35); stroke: var(--info); stroke-width: 1; }
  .tl-band-untracked { fill: rgba(155, 163, 173, 0.3); stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 2; }
  .tl-ev-inspect { fill: var(--info); stroke: var(--bg); stroke-width: 1; }
  .tl-ev-nova { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }
  .tl-ev-admin { fill: var(--ok); stroke: var(--bg); stroke-width: 1; }
  .tl-now {
    stroke: var(--danger);
    stroke-width: 2;
    stroke-dasharray: 4 3;
  }
  .tl-now-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    fill: var(--danger);
    letter-spacing: 0.08em;
  }

  /* === DAY TIMELINE v2 — Premiere-Pro-style multi-track layout ===
     New scoped under .day-timeline-v2 so the old single-band version (used
     anywhere we haven't migrated yet) keeps its old appearance. */
  .day-timeline-v2 .day-timeline-scroll { position: relative; }
  .day-timeline-v2 .tl-track-bg {
    fill: rgba(255, 255, 255, 0.018);
    stroke: var(--line);
    stroke-width: 0.5;
  }
  .day-timeline-v2 .tl-ruler-bg {
    fill: rgba(255, 255, 255, 0.025);
    stroke: var(--line);
    stroke-width: 0.5;
  }
  .day-timeline-v2 .tl-ruler-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    fill: var(--ink-soft);
    letter-spacing: 0.06em;
  }
  .day-timeline-v2 .tl-track-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8.5px;
    fill: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .day-timeline-v2 .tl-band-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    fill: var(--bg);
    pointer-events: none;
    user-select: none;
  }
  .day-timeline-v2 .tl-band-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    fill: var(--bg);
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
  }
  .day-timeline-v2 .tl-band-quote.paused {
    fill: rgba(255, 181, 71, 0.5);
    stroke: var(--warn);
  }
  .day-timeline-v2 .tl-event-group {
    cursor: pointer;
    transition: filter 0.12s, transform 0.12s;
    transform-box: fill-box;
    transform-origin: center;
    outline: none;
  }
  .day-timeline-v2 .tl-event-group:hover { filter: brightness(1.18); }
  .day-timeline-v2 .tl-event-group:focus-visible rect,
  .day-timeline-v2 .tl-event-group:focus-visible polygon,
  .day-timeline-v2 .tl-event-group:focus-visible circle {
    stroke: var(--accent);
    stroke-width: 2;
  }
  .day-timeline-v2 .tl-event-group.selected rect,
  .day-timeline-v2 .tl-event-group.selected polygon,
  .day-timeline-v2 .tl-event-group.selected circle {
    stroke: var(--accent);
    stroke-width: 2;
    filter: drop-shadow(0 0 4px var(--accent-glow));
  }
  /* Diagonal stripe overlay for the paused portion of a quote band */
  .day-timeline-v2 .tl-pause-hatch {
    fill: url(#tlPauseHatchPattern);
    opacity: 0.45;
  }
  .day-timeline-v2 .tl-tick:hover polygon,
  .day-timeline-v2 .tl-tick:hover circle,
  .day-timeline-v2 .tl-tick:hover rect {
    transform: scale(1.5);
    transform-box: fill-box;
    transform-origin: center;
  }
  /* Playhead — thicker arrow head + accent tail for visibility */
  .day-timeline-v2 .tl-now-head {
    fill: var(--danger);
  }
  /* Swatches for new legend entries */
  .tl-swatch.q-paused {
    background: rgba(255, 181, 71, 0.5);
    border-color: var(--warn);
  }
  .tl-icon-leg {
    display: inline-block;
    width: 8px; height: 8px;
    vertical-align: -1px;
    margin-right: 4px;
  }
  .tl-icon-leg.inspect {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid var(--info);
  }
  .tl-icon-leg.nova {
    border-radius: 50%;
    background: var(--accent);
  }
  .tl-icon-leg.admin {
    background: var(--ok);
  }
  /* Event popover */
  .tl-popover {
    position: absolute;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--accent);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 16px var(--accent-glow);
    padding: 10px 12px 12px;
    min-width: 200px;
    max-width: 320px;
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--ink);
    animation: tlp-in 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes tlp-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .tl-popover .tlp-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .tl-popover .tlp-type {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--accent-dim);
    color: var(--bg);
    padding: 2px 6px;
    border: 1px solid var(--accent);
  }
  .tl-popover .tlp-type-inspect { background: var(--info); border-color: var(--info); }
  .tl-popover .tlp-type-nova { background: var(--accent); border-color: var(--accent); }
  .tl-popover .tlp-type-admin { background: var(--ok); border-color: var(--ok); }
  .tl-popover .tlp-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tl-popover .tlp-status {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 5px;
    border: 1px solid var(--line);
  }
  .tl-popover .tlp-status.ok { color: var(--ok); border-color: var(--ok); }
  .tl-popover .tlp-status.warn { color: var(--warn); border-color: var(--warn); }
  .tl-popover .tlp-status.accent { color: var(--accent); border-color: var(--accent); }
  .tl-popover .tlp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 8px;
  }
  .tl-popover .tlp-cell {
    display: flex; flex-direction: column; gap: 2px;
  }
  .tl-popover .tlp-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .tl-popover .tlp-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .tl-popover .tlp-val.warn { color: var(--warn); }
  .tl-popover .tlp-val.ok { color: var(--ok); }
  .tl-popover .tlp-val .tlp-of {
    color: var(--ink-faint);
    font-weight: 400;
  }
  .tl-popover .tlp-close {
    position: absolute;
    top: 4px; right: 6px;
    background: transparent;
    border: none;
    color: var(--ink-faint);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
  }
  .tl-popover .tlp-close:hover { color: var(--ink); }

  /* === DAY TIMELINE v3 — HTML/CSS rewrite (v1.8.104) ===
     Replaces the SVG version. preserveAspectRatio="none" + width-scaling
     caused anisotropic stretching at every zoom level (ruler text, band
     labels, playhead arrow all distorted). The new version positions
     bands as <button> elements with `left: %` / `width: %`, so the inner
     container's `width` can scale via CSS without distorting children.
     Sticky lane-headers (left column) prevent the old text-overlap issue. */
  .day-timeline-v3 .dt-frame {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    background: var(--bg);
  }
  .day-timeline-v3 .dt-lane-headers {
    flex: 0 0 88px;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    position: sticky;
    left: 0;
    z-index: 8;
  }
  .day-timeline-v3 .dt-lane-header {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    border-bottom: 1px solid var(--line);
  }
  .day-timeline-v3 .dt-lh-ruler { height: 24px; }
  .day-timeline-v3 .dt-lh-quotes { height: 44px; }
  .day-timeline-v3 .dt-lh-meetings { height: 24px; }
  .day-timeline-v3 .dt-lh-ticks { height: 28px; border-bottom: none; }

  .day-timeline-v3 .dt-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    user-select: none;
    cursor: grab;
    outline: none;
  }
  .day-timeline-v3 .dt-scroll.dragging { cursor: grabbing; }
  .day-timeline-v3 .dt-scroll:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
  .day-timeline-v3 .dt-scroll::-webkit-scrollbar { height: 8px; }
  .day-timeline-v3 .dt-scroll::-webkit-scrollbar-track { background: var(--bg); }
  .day-timeline-v3 .dt-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .day-timeline-v3 .dt-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
  .day-timeline-v3 .dt-inner {
    position: relative;
    height: 120px;
    width: 100%;
    min-width: 100%;
  }

  /* --- Ruler --- */
  .day-timeline-v3 .dt-ruler {
    position: relative;
    height: 24px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--line);
  }
  .day-timeline-v3 .dt-hour-tick {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    border-left: 1px solid var(--line);
  }
  .day-timeline-v3 .dt-hour-label {
    position: absolute;
    left: 4px;
    top: 5px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    letter-spacing: 0.04em;
  }
  .day-timeline-v3 .dt-half-tick {
    position: absolute;
    top: 70%;
    height: 30%;
    width: 0;
    border-left: 1px solid var(--line);
    opacity: 0.5;
  }
  .day-timeline-v3 .dt-half-tick.half {
    top: 50%;
    height: 50%;
    opacity: 0.8;
  }

  /* --- Vertical hour grid behind tracks --- */
  .day-timeline-v3 .dt-grid {
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }
  .day-timeline-v3 .dt-hour-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.04);
  }

  /* --- Tracks --- */
  .day-timeline-v3 .dt-track {
    position: relative;
    background: rgba(255, 255, 255, 0.014);
    border-bottom: 1px solid var(--line);
  }
  .day-timeline-v3 .dt-track-quotes { height: 44px; }
  .day-timeline-v3 .dt-track-meetings { height: 24px; }
  .day-timeline-v3 .dt-track-ticks { height: 28px; border-bottom: none; }

  /* --- Bands --- */
  .day-timeline-v3 .dt-band {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: transparent;
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    padding: 0 6px;
    cursor: pointer;
    outline: none;
    font-family: 'IBM Plex Mono', monospace;
    overflow: hidden;
    white-space: nowrap;
    transition: filter 0.12s, box-shadow 0.12s;
    text-align: left;
    color: var(--bg);
  }
  .day-timeline-v3 .dt-band-status-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bg);
    opacity: 0.7;
  }
  .day-timeline-v3 .dt-band-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--bg);
    margin-left: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    pointer-events: none;
  }
  .day-timeline-v3 .dt-band-sub {
    font-size: 9px;
    font-weight: 500;
    color: var(--bg);
    opacity: 0.85;
    margin-left: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    pointer-events: none;
  }
  .day-timeline-v3 .dt-band-icon {
    font-size: 11px;
    color: var(--bg);
    pointer-events: none;
  }
  /* Quote band variants */
  .day-timeline-v3 .dt-band-quote { background: var(--accent-dim); border-color: var(--accent); }
  .day-timeline-v3 .dt-band-active {
    background: var(--accent);
    border-color: var(--accent);
    animation: dtBandPulse 2.4s ease-in-out infinite;
  }
  @keyframes dtBandPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { box-shadow: 0 0 12px 2px var(--accent-glow); }
  }
  .day-timeline-v3 .dt-band-active .dt-band-status-stripe { background: var(--ok); opacity: 1; }
  .day-timeline-v3 .dt-band-paused {
    background: rgba(255, 181, 71, 0.55);
    border-color: var(--warn);
  }
  .day-timeline-v3 .dt-band-paused .dt-band-status-stripe { background: var(--warn); opacity: 1; }
  .day-timeline-v3 .dt-band-done {
    background: var(--ok);
    border-color: var(--ok);
  }
  .day-timeline-v3 .dt-band-done .dt-band-status-stripe { background: var(--bg); opacity: 0.6; }
  .day-timeline-v3 .dt-band-partial {
    background: rgba(212, 255, 58, 0.5);
    border-color: var(--accent-dim);
  }
  .day-timeline-v3 .dt-band-partial .dt-band-status-stripe { background: var(--accent); opacity: 1; }

  /* Pause hatch overlay — applied to any band that accumulated pause time */
  .day-timeline-v3 .dt-band[data-paused="1"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
      rgba(255, 181, 71, 0.55) 0,
      rgba(255, 181, 71, 0.55) 2.5px,
      transparent 2.5px,
      transparent 6px);
    pointer-events: none;
  }
  /* Meeting & lunch bands */
  .day-timeline-v3 .dt-band-lunch {
    background: rgba(255, 181, 71, 0.4);
    border-color: var(--warn);
  }
  .day-timeline-v3 .dt-band-meeting {
    background: rgba(108, 182, 255, 0.4);
    border-color: var(--info);
  }
  .day-timeline-v3 .dt-band-untracked {
    background: rgba(155, 163, 173, 0.3);
    border-color: var(--ink-soft);
    border-style: dashed;
  }
  .day-timeline-v3 .dt-band:hover {
    filter: brightness(1.18);
    z-index: 4;
  }
  .day-timeline-v3 .dt-band:focus-visible {
    box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--accent-glow);
    z-index: 5;
  }
  .day-timeline-v3 .dt-band.selected {
    box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--accent-glow);
    z-index: 6;
  }

  /* --- Ticks --- */
  .day-timeline-v3 .dt-tick {
    position: absolute;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    outline: none;
  }
  .day-timeline-v3 .dt-tick-shape {
    display: block;
    pointer-events: none;
  }
  .day-timeline-v3 .dt-tick-inspect { top: 2px; }
  .day-timeline-v3 .dt-tick-inspect .dt-tick-shape {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--info);
  }
  .day-timeline-v3 .dt-tick-nova { top: 4px; }
  .day-timeline-v3 .dt-tick-nova .dt-tick-shape {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
  }
  .day-timeline-v3 .dt-tick-admin { top: 6px; }
  .day-timeline-v3 .dt-tick-admin .dt-tick-shape {
    width: 10px;
    height: 10px;
    background: var(--ok);
  }
  .day-timeline-v3 .dt-tick:hover .dt-tick-shape {
    filter: brightness(1.5);
    transform: scale(1.4);
  }
  .day-timeline-v3 .dt-tick:focus-visible,
  .day-timeline-v3 .dt-tick.selected {
    background: rgba(212, 255, 58, 0.12);
    box-shadow: 0 0 0 2px var(--accent);
  }

  /* --- Playhead --- */
  .day-timeline-v3 .dt-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 10;
    pointer-events: none;
  }
  .day-timeline-v3 .dt-playhead-line {
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--danger);
    transform: translateX(-1px);
    box-shadow: 0 0 6px rgba(255, 90, 95, 0.5);
  }
  .day-timeline-v3 .dt-playhead-head {
    position: absolute;
    top: 2px;
    left: 0;
    transform: translateX(-50%);
    background: var(--danger);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    white-space: nowrap;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Fixed-position popover (renders into document.body to escape clip) */
  .tl-popover-fixed {
    position: fixed !important;
    z-index: 9000;
  }

  /* Ready-to-finish nudge in the sidebar Progress panel.
     Subtle accent-tinted row that appears only when there are ticked-but-
     not-finished quotes. ADHD gap recovery: easy to forget the explicit
     FINISH button after ticking all items. */
  .ready-to-finish-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .ready-to-finish-row .rtf-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--bg);
  }
  .ready-to-finish-row .rtf-label {
    flex: 1;
  }
  .ready-to-finish-row .btn.small {
    background: var(--bg);
    color: var(--accent);
    border: 1px solid var(--bg);
    font-size: 10px;
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    cursor: pointer;
  }
  .ready-to-finish-row .btn.small:hover { filter: brightness(1.08); }
  body.viewer-mode .ready-to-finish-row { display: none !important; }

  /* === QUOTE FINISH FANFARE BADGE ===
     Ephemeral 'DONE' badge that fades in then out over the centre of the
     just-completed quote card. Motion One drives the keyframes; CSS just
     sets the starting style + positioning. */
  .quote-finish-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: var(--ok);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 24px rgba(74, 222, 128, 0.5);
  }
  .quote-finish-badge .mat-icon { font-size: 22px; }

  /* === DEFECT AGGREGATION (Stats > Items & quotes) ===
     Horizontal-bar list of finding-type counts. The bar uses warn-tint
     since these are always "things that needed attention" — count >0
     is by definition something to look at. */
  .defect-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 12px 14px;
  }
  .defect-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px;
    column-gap: 12px;
  }
  .defect-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
  }
  .defect-bar-track {
    height: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    position: relative;
  }
  .defect-bar-fill {
    display: block;
    height: 100%;
    background: var(--warn);
    opacity: 0.75;
  }
  .defect-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 32px;
  }
  .defect-samples {
    grid-column: 2 / span 2;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    margin-top: -2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .defect-foot {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 8px;
  }
  @media (max-width: 540px) {
    .defect-row { grid-template-columns: 100px 1fr auto; }
    .defect-label { font-size: 10px; }
  }

  /* === INSPECTION FINDINGS ===
     Chip row in the item-note modal for picking a defect type. Click an
     active chip to clear; only one type at a time. The selected type
     shows as a small badge on the item row in renderQuotes. */
  .finding-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .finding-chip {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .finding-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
  .finding-chip.active {
    background: var(--warn);
    color: var(--bg);
    border-color: var(--warn);
    font-weight: 600;
  }
  /* Badge on the item row showing the active finding type. Warn-tinted
     so it's clear something needs attention. Hover reveals the full
     note text via tooltip. */
  .qitem-finding-badge {
    display: inline-block;
    background: var(--warn);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: 1px;
  }
  .qitem-finding-badge:hover { filter: brightness(1.1); }
  body.viewer-mode .qitem-finding-badge { cursor: default; }

  /* === WHAT'S NEXT BANNER ===
     Strengths-driven suggestion of which item to tackle next. Sits
     above the workload-hero on Today. Distinct from .suggestion-banner
     (gap-filling scheduler hint) by visual: info-blue accent rather
     than warn-amber. */
  .whats-next-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--info);
    border-left: 3px solid var(--info);
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .whats-next-banner .wn-icon {
    color: var(--info);
    font-size: 22px;
    flex-shrink: 0;
  }
  .whats-next-banner .wn-content { flex: 1; min-width: 0; }
  .whats-next-banner .wn-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
  }
  .whats-next-banner .wn-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    font-weight: 600;
  }
  .whats-next-banner .wn-qid {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--info);
    font-weight: 600;
  }
  .whats-next-banner .wn-item {
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
  }
  .whats-next-banner .wn-reason {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
  .whats-next-banner .wn-reason-text { color: var(--ink-soft); }
  .whats-next-banner .wn-sep { color: var(--ink-faint); }
  .whats-next-banner .wn-eta { color: var(--ink); font-weight: 500; }
  .whats-next-banner .wn-planned-of { color: var(--ink-faint); font-weight: 400; }
  .whats-next-banner .wn-jump {
    background: var(--info);
    color: var(--bg);
    border: 1px solid var(--info);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
    transition: filter 0.15s;
  }
  .whats-next-banner .wn-jump:hover { filter: brightness(1.15); }
  .whats-next-banner .wn-dismiss {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.15s;
  }
  .whats-next-banner .wn-dismiss:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }
  /* Flash the target item briefly after a Jump click so the user sees
     what they jumped to. */
  .wn-target-flash {
    animation: wn-target-flash-anim 1.4s ease-out;
  }
  @keyframes wn-target-flash-anim {
    0% { box-shadow: 0 0 0 0 var(--info); }
    20% { box-shadow: 0 0 0 4px rgba(108, 182, 255, 0.25); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* === MORNING BRIEF ===
     First-load banner on Today before 11:00 — gives day shape in one
     line. Dismissed per-day via localStorage. */
  .morning-brief {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .morning-brief .mb-icon {
    color: var(--accent);
    font-size: 20px;
  }
  .morning-brief .mb-content { flex: 1; }
  .morning-brief .mb-greeting {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .morning-brief .mb-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .morning-brief .mb-stat strong { color: var(--ink); }
  .morning-brief .mb-stat strong.ok { color: var(--ok); }
  .morning-brief .mb-stat strong.warn { color: var(--warn); }
  .morning-brief .mb-sep { color: var(--ink-faint); }
  .morning-brief .mb-dismiss {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.15s;
  }
  .morning-brief .mb-dismiss:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }

  /* Post-lunch resume hint. Same visual family as morning-brief but the
     left border is warn-coloured to signal "attention pending". Includes
     an action button so resume is one tap. */
  .post-lunch-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid rgba(255, 181, 71, 0.35);
    border-left: 3px solid var(--warn);
    padding: 12px 14px;
    margin-bottom: 14px;
    animation: tlp-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .post-lunch-hint .plh-icon {
    color: var(--warn);
    font-size: 20px;
  }
  .post-lunch-hint .plh-content { flex: 1; }
  .post-lunch-hint .plh-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink);
  }
  .post-lunch-hint .plh-line strong { color: var(--accent); }
  .post-lunch-hint .plh-sub {
    color: var(--ink-faint);
    margin-left: 6px;
  }
  .post-lunch-hint .plh-resume {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
  }
  .post-lunch-hint .plh-dismiss {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.15s;
  }
  .post-lunch-hint .plh-dismiss:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }
  body.viewer-mode .post-lunch-hint { display: none !important; }

  /* === RESUME CHIP ===
     Floating button at bottom-right showing the active in-progress
     quote on every tab. Click jumps back to Today + scrolls to the
     card. Hidden when nothing active. Sits above most z-stacks so
     it's always reachable. */
  .resume-chip {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  }
  .resume-chip:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 6px 22px rgba(212, 255, 58, 0.18);
  }
  .resume-chip .rc-tag {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border: 1px solid;
    font-weight: 600;
  }
  .resume-chip .rc-tag.live { color: var(--accent); border-color: var(--accent-dim); }
  .resume-chip .rc-tag.paused { color: var(--warn); border-color: var(--warn); }
  .resume-chip .rc-qid { font-weight: 600; color: var(--ink); }
  .resume-chip .rc-remain { color: var(--ink-faint); }
  /* Stale-pause escalation — the chip pulses warn-amber once the active
     quote has been paused 25+ minutes, so it's hard to leave forgotten. */
  .resume-chip.rc-stale {
    border-color: var(--warn);
    animation: rcStalePulse 2.2s ease-in-out infinite;
  }
  @keyframes rcStalePulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 14px 2px rgba(255, 181, 71, 0.4); }
  }
  @media (prefers-reduced-motion: reduce) {
    .resume-chip.rc-stale { animation: none; }
  }
  /* Hide on Today tab when we're already looking at the cards. CSS-only
     trick: when body has data-active-tab=today AND the user can see
     quotes, the chip is redundant. But we don't currently set that
     attribute, so leave the chip always-on when active. Safe to add a
     future hide rule when needed. */
  body.viewer-mode .resume-chip { display: none !important; }
  @media (max-width: 540px) {
    .resume-chip {
      bottom: 12px;
      right: 12px;
      font-size: 10px;
      padding: 6px 10px;
    }
  }

  /* === HISTORY HEATMAP CALENDAR ===
     12-week grid sitting at the top of the History tab. Each cell is a
     day: green = target hit, amber = below 70%, neutral = no data.
     Click a cell to scroll to that day's history card. */
  .history-heatmap {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  .hheat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .hheat-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .hheat-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .hheat-legend-cell { display: inline-flex; align-items: center; gap: 5px; }
  .hheat-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
  }
  .hheat-swatch.nodata { background: var(--surface-2); }
  .hheat-swatch.short { background: var(--warn); border-color: var(--warn); opacity: 0.7; }
  .hheat-swatch.partial { background: var(--accent-dim); border-color: var(--accent-dim); opacity: 0.5; }
  .hheat-swatch.hit { background: var(--ok); border-color: var(--ok); }

  .hheat-months {
    display: grid;
    grid-template-columns: 28px repeat(auto-fit, minmax(0, 1fr));
    gap: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    min-height: 12px;
  }
  .hheat-month-label { grid-row: 1; }

  .hheat-grid {
    display: grid;
    grid-template-columns: 28px repeat(auto-fit, minmax(0, 1fr));
    gap: 3px;
  }
  .hheat-daycol {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
  }
  .hheat-daylabel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    height: 14px;
  }
  .hheat-col {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    gap: 3px;
  }
  .hheat-cell {
    background: var(--surface-2);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    height: 14px;
  }
  .hheat-cell.empty { background: transparent; border-color: transparent; cursor: default; }
  .hheat-cell.nodata { background: var(--surface-2); cursor: default; }
  .hheat-cell.short { background: var(--warn); border-color: var(--warn); opacity: 0.7; }
  .hheat-cell.partial { background: var(--accent-dim); border-color: var(--accent-dim); opacity: 0.5; }
  .hheat-cell.hit { background: var(--ok); border-color: var(--ok); }
  .hheat-cell:not(.empty):not(.nodata):hover {
    transform: scale(1.3);
    border-color: var(--ink);
    z-index: 2;
    position: relative;
  }

  /* When a heatmap cell click scrolls to a history day, flash the
     target card briefly so the user can see what they jumped to. */
  .history-day-flash {
    animation: history-day-flash-anim 1.4s ease-out;
  }
  @keyframes history-day-flash-anim {
    0% { box-shadow: 0 0 0 0 var(--accent); }
    20% { box-shadow: 0 0 0 4px var(--accent-glow); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }