:root {
    --steel: #16181d; --panel: #23262e; --panel2: #2b2f38; --line: #3c434f;
    --paper: #f5f6f2; --ink: #171a1f; --ink-soft: #565c66;
    --yellow: #f4c430; --orange: #ff6b35; --red: #ff3b30; --pink: #ff1053;
    --green: #2e8b57; --blue: #4a8fd6;
    --card-paper: #f5f6f2; /* cards/chips are always light "paper" regardless of theme — never flips */
    --on-accent: #16181d; /* text sitting on bright accent backgrounds (yellow buttons, active states) — always dark regardless of theme, since the accent itself stays bright in both */
    --link-blue: #7fd4ff; --yellow-text: #f4c430; /* text-specific variants of blue/yellow accents — the base --blue/--yellow stay put for backgrounds/borders/badges, but these need to darken in light mode to stay readable as body text */
    --dash-panel-bg: #101318; --dash-panel-border: #2a3a4a; /* Parts/Tow-In dashboard modals use a slightly different panel treatment than regular modals */
    --orange-text: #ff6b35; --overdue-count-text: #ff8a80;
    --muted: #9aa0aa; --muted2: #6b7280; /* the two most common ad-hoc grays used throughout, consolidated so they can flip with theme */
    --tint-rgb: 255,255,255; /* base for subtle rgba(var(--tint-rgb), X) surface tints — white in dark mode, flips to black in light mode */
    --shadow-color: rgba(0,0,0,0.4);
    --line-subtle: #212833; /* dense list-row dividers (audit log, permission tables) — quieter than --line */
    --tag-bg: #1c2530; --tag-border: #33495e; /* vendor chips, parts tags */
    color-scheme: dark;
  }
  [data-theme="light"] {
    --steel: #eef1f5; --panel: #ffffff; --panel2: #f6f7f9; --line: #d8dce2;
    --paper: #1a1d23; --ink: #171a1f; --ink-soft: #5a6270;
    --muted: #6b7280; --muted2: #767c87;
    --tint-rgb: 0,0,0;
    --shadow-color: rgba(30,35,45,0.12);
    --line-subtle: #e4e7ec;
    --tag-bg: #eaf3fb; --tag-border: #b8d7ef;
    --link-blue: #0969c7; --yellow-text: #a06800;
    --dash-panel-bg: #f9fafb; --dash-panel-border: #c8d0da;
    --orange-text: #a03d16; --overdue-count-text: #b71c1c;
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--steel); color: var(--paper); font-family: 'Inter', sans-serif; }
  button, input, select, textarea { font-family: inherit; }
  select { background: var(--steel); color: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
  h1 { font-family: 'Oswald', sans-serif; font-size: calc(19px * var(--font-scale, 1)); margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
  /* Grid/flex items default to min-width:auto, which means they refuse to
     shrink below their own content's natural size — for an <input spellcheck="true" autocorrect="on" autocapitalize="words"> that's
     often 170-200px regardless of how little space its grid track actually
     has. Every *-row layout in this app (staff rows, parts rows, tool rows,
     job overview rows, and more) puts inputs/selects inside a CSS grid with
     fr-based columns, so without this override, any modal wider than its
     content but narrower than the sum of every input's natural minimum
     forces horizontal overflow instead of the grid actually shrinking those
     columns like it's supposed to. This single reset fixes it everywhere at
     once rather than patching each row class individually.
  */
  input, select, textarea { min-width: 0; }

  /* --- login screen --- */
  #loginScreen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
  .login-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; width: 360px; }
  .roster-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--line); gap: 10px; }
  .staff-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
  .staff-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .staff-avatar-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(12px * var(--font-scale, 1)); flex-shrink: 0; font-family: 'Oswald', sans-serif; }
  .staff-role-pill { font-size: calc(10px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 10px; background: var(--steel); color: var(--muted); font-weight: 700; white-space: nowrap; }
  .staff-fields-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1.2fr auto; gap: 10px; align-items: end; margin-bottom: 12px; }
  .staff-fields-grid .field { margin-bottom: 0; }
  .staff-fields-grid label { font-size: calc(10px * var(--font-scale, 1)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
  .staff-toggles-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line-subtle); }
  .staff-toggles-row label { display: flex; align-items: center; gap: 6px; font-size: calc(11.5px * var(--font-scale, 1)); color: var(--muted); cursor: pointer; }
  .staff-toggles-row input[type="checkbox"] { width: auto; }
  .staff-save-btn { font-size: calc(11px * var(--font-scale, 1)); padding: 6px 10px; }
  .staff-delete-btn { font-size: calc(11px * var(--font-scale, 1)); padding: 6px 10px; color: var(--red); }
  .perm-override-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12.5px * var(--font-scale, 1)); }
  .perm-override-row:last-child { border-bottom: none; }
  .perm-override-row select { width: 190px; flex-shrink: 0; }
  .role-matrix-table { width: 100%; border-collapse: collapse; font-size: calc(11.5px * var(--font-scale, 1)); }
  .role-matrix-table th, .role-matrix-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-subtle); text-align: center; }
  .role-matrix-table th { color: var(--muted); font-weight: 600; font-size: calc(10px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
  .role-matrix-table td:first-child, .role-matrix-table th:first-child { text-align: left; white-space: nowrap; }
  .audit-row { display: flex; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12.5px * var(--font-scale, 1)); align-items: baseline; }
  .tech-comment-row { padding: 12px 10px; border-bottom: 1px solid var(--line-subtle); cursor: pointer; }
  .tech-comment-row:last-child { border-bottom: none; }
  .tech-comment-row:hover { background: rgba(var(--tint-rgb),0.03); }
  .tech-comment-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .tech-comment-vehicle { font-weight: 700; font-size: calc(13px * var(--font-scale, 1)); }
  .tech-comment-time { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted2); }
  .tech-comment-meta { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); margin-bottom: 6px; }
  .tech-comment-text { font-size: calc(12.5px * var(--font-scale, 1)); color: var(--paper); white-space: pre-wrap; }
  .audit-row:last-child { border-bottom: none; }
  .audit-time { flex: 0 0 140px; color: var(--muted2); font-family: 'JetBrains Mono', monospace; font-size: calc(10.5px * var(--font-scale, 1)); }
  .audit-cat { flex: 0 0 auto; font-size: calc(9px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 10px; background: rgba(var(--tint-rgb),0.06); color: var(--muted); }
  .audit-text { flex: 1 1 auto; }
  .audit-empty { padding: 30px; text-align: center; color: var(--muted2); font-size: calc(12.5px * var(--font-scale, 1)); }
  .dash-search-wrap { position: relative; margin: 4px 0 12px; }
  .dash-search-input {
    width: 100%; background: var(--steel); border: 1px solid var(--line); border-radius: 8px;
    padding: 9px 34px 9px 12px; color: var(--paper); font-size: calc(12.5px * var(--font-scale, 1)); font-family: inherit;
  }
  .dash-search-input:focus { outline: none; border-color: var(--blue); }
  .dash-search-input::placeholder { color: var(--muted2); }
  .dash-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted2); cursor: pointer; font-size: calc(14px * var(--font-scale, 1)); padding: 4px 6px; }
  .dash-search-clear:hover { color: #fff; }
  .dash-search-nomatch { padding: 24px; text-align: center; color: var(--muted2); font-size: calc(12.5px * var(--font-scale, 1)); font-style: italic; }
  .import-mapping-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
  .import-mapping-row .col-name { flex: 0 0 160px; font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .import-mapping-row select { flex: 0 0 160px; }
  .import-mapping-row .col-sample { flex: 1 1 auto; font-size: calc(11px * var(--font-scale, 1)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .import-preview-table { width: 100%; border-collapse: collapse; font-size: calc(11.5px * var(--font-scale, 1)); margin-top: 10px; }
  .import-preview-table th, .import-preview-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .import-preview-table th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: calc(9.5px * var(--font-scale, 1)); letter-spacing: 0.03em; }
  .import-summary { font-size: calc(12.5px * var(--font-scale, 1)); margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(var(--tint-rgb),0.03); border: 1px solid var(--line); }

  .stats-overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 20px; }
  .stats-card { background: rgba(var(--tint-rgb),0.03); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
  .stats-card-value { font-family: 'JetBrains Mono', monospace; font-size: calc(22px * var(--font-scale, 1)); font-weight: 700; color: var(--paper); }
  .stats-card-label { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; }
  .stats-section-title { font-family: 'Oswald', sans-serif; font-size: calc(13px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .stats-stage-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: calc(12.5px * var(--font-scale, 1)); }
  .stats-stage-name { flex: 0 0 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stats-stage-bar-wrap { flex: 1 1 auto; background: rgba(var(--tint-rgb),0.04); border-radius: 5px; height: 18px; overflow: hidden; }
  .stats-stage-bar { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 5px; }
  .stats-stage-value { flex: 0 0 150px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: calc(11.5px * var(--font-scale, 1)); color: #cbd5e1; }
  .stats-wip-row, .stats-tool-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; font-size: calc(12.5px * var(--font-scale, 1)); border-bottom: 1px solid var(--line-subtle); }
  .stats-wip-row:last-child, .stats-tool-row:last-child { border-bottom: none; }
  .stats-wip-count { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
  .stats-wip-oldest { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); }
  .stats-empty-note { color: var(--muted2); font-size: calc(11.5px * var(--font-scale, 1)); padding: 8px 2px; font-style: italic; }

  #statsDateControls { background: rgba(var(--tint-rgb),0.02); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 4px 0 18px; }
  .stats-range-block { margin-bottom: 4px; }
  .stats-range-label { font-size: calc(10px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
  .stats-preset-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .stats-preset-row select { width: 200px; }
  .stats-preset-row label { display: flex; align-items: center; gap: 6px; font-size: calc(11.5px * var(--font-scale, 1)); color: var(--muted); }
  .stats-compare-toggle { display: flex; align-items: center; gap: 7px; font-size: calc(12.5px * var(--font-scale, 1)); margin: 12px 0 4px; cursor: pointer; }
  .stats-compare-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .stats-compare-col-title { font-family: 'Oswald', sans-serif; font-size: calc(12.5px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--yellow-text); margin-bottom: 10px; }
  .stats-delta { font-size: calc(11px * var(--font-scale, 1)); font-weight: 700; margin-left: 6px; }
  .stats-delta.up { color: var(--green); }
  .stats-delta.down { color: var(--red); }
  .stats-delta.flat { color: var(--muted); }
  .overview-signedin-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(46,139,87,0.14); border: 1px solid var(--green); border-radius: 20px; padding: 5px 12px; margin: 3px 6px 3px 0; font-size: calc(12px * var(--font-scale, 1)); }
  .overview-due-row, .overview-bay-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12.5px * var(--font-scale, 1)); }
  .overview-due-row:last-child, .overview-bay-row:last-child { border-bottom: none; }
  .overview-bay-name { font-weight: 700; flex: 0 0 130px; }
  .overview-job-row { display: grid; grid-template-columns: 1.3fr 1fr 100px 100px 90px; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12px * var(--font-scale, 1)); cursor: pointer; }
  .overview-job-row:last-child { border-bottom: none; }
  .overview-job-row:hover { background: rgba(var(--tint-rgb),0.03); }
  .overview-job-row .pct-bar-wrap { background: rgba(var(--tint-rgb),0.06); border-radius: 4px; height: 6px; overflow: hidden; }
  .overview-job-row .pct-bar { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); }
  .roster-row:last-of-type { border-bottom: none; }
  .roster-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--on-accent); font-weight: 700; font-size: calc(12px * var(--font-scale, 1)); display: flex; align-items: center; justify-content: center; }
  .pin-entry { display: flex; gap: 6px; }
  .pin-input { width: 70px; background: var(--steel); border: 1px solid var(--line); color: var(--paper); padding: 7px 9px; border-radius: 6px; text-align: center; letter-spacing: 0.15em; font-family: 'JetBrains Mono', monospace; }
  .btn { background: var(--panel2); border: 1px solid var(--line); color: var(--paper); padding: 7px 13px; border-radius: 7px; cursor: pointer; font-size: calc(12.5px * var(--font-scale, 1)); font-weight: 600; }
  .btn:hover { border-color: var(--yellow); }
  .btn-primary { background: var(--yellow); color: var(--on-accent); border-color: var(--yellow); }
  /* Today's checks. Tall on purpose — this is tapped one-handed, standing up,
     often with a glove on, so the target is sized for a thumb not a mouse. */
  .maint-tick { font-weight: 600; font-size: calc(14px * var(--font-scale, 1)); }
  .maint-tick.is-done { border-color: var(--green); }
  .maint-tick:disabled { opacity: .6; }
  .maint-tab.is-on { background: var(--yellow); color: var(--on-accent); border-color: var(--yellow); }
  /* The shop priority number. Sits in the card's corner rather than inline so
     it does not push the customer name around when it appears. */
  .card-missing-info {
    margin-top: 4px; padding: 2px 6px; border-radius: 5px;
    background: rgba(255,107,53,0.14); border: 1px solid rgba(255,107,53,0.4);
    color: var(--orange-text); font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 700;
  }
  .my-alert-row {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px; margin-bottom: 8px; border-radius: 10px;
    background: rgba(255,59,48,0.14); border: 2px solid var(--red);
    animation: myAlertPulse 1.4s ease-in-out infinite;
  }
  @keyframes myAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.55); }
    50% { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
  }
  #allAlertsBox {
    margin-bottom: 10px; padding: 8px 12px; border-radius: 8px;
    background: var(--panel2); border: 1px solid var(--line);
  }
  .all-alerts-head { font-weight: 800; margin-bottom: 6px; font-size: calc(12.5px * var(--font-scale,1)); }
  .all-alert-row {
    display: flex; gap: 10px; align-items: center; cursor: pointer;
    padding: 4px 0; border-top: 1px solid var(--line-subtle);
    font-size: calc(12px * var(--font-scale,1));
  }
  .all-alert-row:hover { color: var(--yellow); }
  #approvalBox { margin-bottom: 10px; }
  .approval-row {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 14px; margin-bottom: 8px; border-radius: 10px;
    background: rgba(46,139,87,0.12); border: 2px solid var(--green);
    animation: approvalPulse 2s ease-in-out infinite;
  }
  @keyframes approvalPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,139,87,0.5); }
    50% { box-shadow: 0 0 0 7px rgba(46,139,87,0); }
  }
  .card-priority-num {
    position: absolute; top: 4px; right: 6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; background: var(--panel2); color: var(--paper);
    border: 1px solid var(--line);
    font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .card { position: relative; }
  .maint-row:hover { border-color: var(--yellow); }
  .btn-danger { background: transparent; color: var(--red); border-color: var(--red); }
  .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 0; }
  .field label { font-size: calc(11px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  .field input, .field select, .field textarea { background: var(--steel); border: 1px solid var(--line); color: var(--paper); padding: 8px 10px; border-radius: 7px; font-size: calc(13.5px * var(--font-scale, 1)); }
  .field-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .field-row > * { min-width: 0; } /* same shrinking fix as the global input/select rule above, but for the .field wrapper itself (label + input), which is its own flex item */
  .field-row .field { flex: 1 1 180px; }

  /* --- Report Issue: tappable priority picker + photo tap target ---
     Bigger, color-coded tap targets beat a <select> dropdown when this is
     filled out standing at a lift, possibly with gloves on. */
  .ri-section-label { font-size: calc(11px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
  .priority-picker { display: flex; gap: 8px; margin-bottom: 14px; }
  .priority-pick-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px; border-radius: 10px; border: 2px solid var(--line); background: var(--steel);
    color: var(--muted); font-family: inherit; font-size: calc(11.5px * var(--font-scale, 1)); font-weight: 600; cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
  }
  .priority-pick-btn span { font-size: calc(11.5px * var(--font-scale, 1)); }
  .priority-pick-btn:hover { border-color: var(--muted); }
  .priority-pick-btn.pri-critical.selected { border-color: var(--red); background: rgba(255,59,48,0.14); color: #ff8178; }
  .priority-pick-btn.pri-high.selected { border-color: var(--orange); background: rgba(255,107,53,0.14); color: var(--orange); }
  .priority-pick-btn.pri-medium.selected { border-color: #f4c430; background: rgba(244,196,48,0.14); color: #f4c430; }
  .priority-pick-btn.pri-low.selected { border-color: var(--muted); background: rgba(154,160,170,0.12); color: var(--paper); }
  .ri-photo-tap {
    display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    border: 2px dashed var(--line); border-radius: 10px; padding: 14px; color: var(--muted);
    font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; transition: border-color 0.12s, color 0.12s;
  }
  .ri-photo-tap:hover { border-color: var(--yellow-text); color: var(--paper); }
  .ri-photo-tap span:first-child { font-size: calc(18px * var(--font-scale, 1)); }

  /* --- app shell --- */
  #app { display: none; min-height: 100vh; flex-direction: column; }
  #stickyTop { position: sticky; top: 0; z-index: 60; background: var(--steel); flex: 0 0 auto; }
  header { display: flex; align-items: center; justify-content: space-between; padding: 9px 20px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; gap: 8px; flex: 0 0 auto; row-gap: 6px; }
  .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .menu-dropdown-wrap { position: relative; }
  /* The menu opens as a PANEL, the same way the RO detail panel opens off a
     card — backdrop, centred box, same surface and border — rather than as a
     small dropdown pinned under the button. Thirty-odd items in one flat
     scrolling list was unreadable; grouped and collapsible, most of it is
     folded away until wanted.
     The panel stays a child of .menu-dropdown-wrap on purpose: the existing
     outside-click handler tests .closest('.menu-dropdown-wrap'), so moving it
     elsewhere in the DOM would silently break closing the menu. */
  .menu-backdrop {
    display: none; position: fixed; inset: 0; z-index: 199;
    background: rgba(10,11,13,0.65);
  }
  .menu-backdrop.open { display: block; }
  .menu-dropdown {
    display: none; position: fixed; z-index: 200;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 24px 60px var(--shadow-color);
    width: 420px; max-width: 92vw;
    max-height: 88vh;              /* fallback; JS measures the real value on open */
    padding: 0; flex-direction: column; gap: 0;
    overflow: hidden;              /* the BODY scrolls, so head and foot stay put */
    overscroll-behavior: contain;
  }
  /* Head and foot are fixed; only the middle scrolls. Sign out was previously
     reachable only after scrolling past everything else. */
  .menu-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
  }
  .menu-panel-title { font-size: calc(16px * var(--font-scale, 1)); font-weight: 800; color: var(--fg); }
  .menu-panel-close {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: calc(26px * var(--font-scale, 1)); line-height: 1;
    padding: 0 4px; border-radius: 8px; font-family: inherit;
  }
  .menu-panel-close:hover { color: var(--fg); background: rgba(var(--tint-rgb),0.14); }
  .menu-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
  .menu-panel-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 8px; }

  /* A collapsible group, the way Tekmetric's menu folds. */
  .menu-group { margin-bottom: 2px; }
  .menu-group-head {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: calc(11px * var(--font-scale, 1));
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px;
    padding: 10px 12px; border-radius: 8px; text-align: left; min-height: 38px;
  }
  .menu-group-head:hover { background: rgba(var(--tint-rgb),0.10); color: var(--fg); }
  .menu-group-caret {
    display: inline-block; transition: transform 0.15s ease;
    font-size: calc(11px * var(--font-scale, 1)); opacity: 0.75;
  }
  .menu-group.open .menu-group-caret { transform: rotate(90deg); }
  .menu-group-name { flex: 1 1 auto; }
  .menu-group-count {
    background: rgba(var(--tint-rgb),0.16); color: var(--muted);
    border-radius: 9px; padding: 1px 7px; font-size: calc(10px * var(--font-scale, 1)); font-weight: 800;
  }
  /* Collapsed by default; the .open class is what reveals it. Display rather
     than max-height so a group with a badge in it can't be half-clipped. */
  .menu-group-items { display: none; padding: 2px 0 6px 10px; }
  .menu-group.open .menu-group-items { display: block; }
  .menu-group-items .menu-dropdown-item { width: 100%; }
  /* A visible scrollbar, because a menu that scrolls without looking like it
     scrolls is a menu people think is broken. */
  .menu-dropdown::-webkit-scrollbar { width: 10px; }
  .menu-dropdown::-webkit-scrollbar-track { background: transparent; }
  .menu-dropdown::-webkit-scrollbar-thumb {
    background: rgba(var(--tint-rgb),0.28); border-radius: 5px;
    border: 2px solid var(--panel2);
  }
  .menu-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(var(--tint-rgb),0.45); }
  .menu-dropdown { scrollbar-width: thin; scrollbar-color: rgba(var(--tint-rgb),0.28) transparent; }
  .menu-dropdown.open { display: flex; }
  /* This menu is opened dozens of times a day, often on a tablet with oily
     hands, and it had grown to 28 items in one flat list at 13px with 9px of
     padding. Bigger targets, sectioned, and enough contrast to read in daylight
     through a bay door. */
  .menu-dropdown-item {
    background: none; border: none; color: var(--fg); text-align: left;
    padding: 11px 12px; min-height: 40px;
    display: flex; align-items: center; gap: 9px;
    border-radius: 7px; cursor: pointer; font-size: calc(14px * var(--font-scale, 1)); font-family: inherit;
    line-height: 1.25;
  }
  .menu-dropdown-item:hover { background: rgba(var(--tint-rgb),0.14); }
  .menu-dropdown-item:active { background: rgba(var(--tint-rgb),0.22); }
  /* A section label, not a target. Smaller and quieter than the items so the
     eye lands on what it can click. */
  .menu-section {
    font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--muted); padding: 12px 12px 4px; pointer-events: none;
  }
  .menu-section:first-child { padding-top: 4px; }
  .menu-dropdown-divider { height: 1px; background: var(--line); margin: 4px 2px; }
  .header-alert-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
    background: var(--red); color: #fff; font-size: calc(10px * var(--font-scale, 1)); font-weight: 800; border-radius: 9px;
    margin-left: auto; padding: 0 4px; animation: headerBadgePulse 1.6s ease-in-out infinite;
  }
  /* No rule needed here: body.animations-off * and the reduced-motion media
     query further down already stop this pulse. Checked rather than assumed —
     adding a second rule would have looked like the fix while the existing one
     was doing the work. */
  @keyframes headerBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
  #board { position: relative; overflow: auto; padding: 18px; flex: 1 1 auto; }
  .board-grid { display: grid; position: relative; }
  .column { background: rgba(var(--tint-rgb),0.03); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; position: relative; overflow: hidden; min-width: 0; min-height: 0; }
  .column.collapsed .card-list, .column.collapsed .col-resize-handle-e, .column.collapsed .col-resize-handle-s, .column.collapsed .col-resize-handle-se { display: none; }
  .column.collapsed .column-header { flex-direction: column; height: 100%; padding: 12px 6px; gap: 10px; }
  .column.collapsed .col-title { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: calc(11px * var(--font-scale, 1)); }
  .col-collapse-btn { background: none; border: none; color: var(--muted2); font-size: calc(11px * var(--font-scale, 1)); cursor: pointer; padding: 3px 5px; border-radius: 4px; flex: 0 0 auto; line-height: 1; }
  .col-collapse-btn:hover { background: rgba(var(--tint-rgb),0.08); color: var(--paper); }
  .column.collapsed .col-collapse-btn { order: -1; }
  .col-resize-handle-e { position: absolute; top: 0; right: -6px; width: 12px; height: 100%; cursor: ew-resize; z-index: 5; touch-action: none; }
  .col-resize-handle-e::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 4px; width: 3px; border-radius: 3px; background: rgba(var(--tint-rgb),0.16); transition: background 0.15s; }
  .col-resize-handle-e:hover::after, .col-resize-handle-e:active::after { background: var(--yellow); }
  .col-resize-handle-s { position: absolute; left: 0; bottom: -6px; width: 100%; height: 12px; cursor: ns-resize; z-index: 5; touch-action: none; }
  .col-resize-handle-s::after { content: ''; position: absolute; left: 10px; right: 10px; top: 4px; height: 3px; border-radius: 3px; background: rgba(var(--tint-rgb),0.16); transition: background 0.15s; }
  .col-resize-handle-s:hover::after, .col-resize-handle-s:active::after { background: var(--yellow); }
  .col-resize-handle-se { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 6; touch-action: none; }
  .col-resize-handle-se::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-radius: 2px; background: rgba(var(--tint-rgb),0.22); transition: background 0.15s; }
  .col-resize-handle-se:hover::after, .col-resize-handle-se:active::after { background: var(--yellow); }

  .layout-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: calc(12.5px * var(--font-scale, 1)); }
  /* Redesigned Layout Builder card */
  .layout-card { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: rgba(var(--tint-rgb),0.02); }
  .layout-card.is-hidden { opacity: 0.55; }
  .layout-card-top { display: flex; align-items: center; gap: 9px; }
  .layout-card-handle { cursor: grab; color: var(--muted2); display: flex; flex: 0 0 auto; }
  .layout-card-handle:active { cursor: grabbing; }
  .layout-card-title { flex: 1; min-width: 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: calc(13.5px * var(--font-scale, 1)); color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout-card-count { font-size: calc(10.5px * var(--font-scale, 1)); background: rgba(var(--tint-rgb),0.1); color: var(--muted); border-radius: 10px; padding: 1px 8px; font-weight: 700; flex: 0 0 auto; }
  .layout-card-toggles { display: flex; gap: 4px; flex: 0 0 auto; }
  .layout-card-toggles .col-btn { border: 1px solid var(--line); border-radius: 6px; width: 28px; height: 28px; align-items: center; justify-content: center; }
  .layout-card-fields { display: flex; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
  .layout-card-field { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; }
  .layout-card-field > span { font-size: calc(9.5px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted2); }
  .layout-card-field input { width: 100%; text-align: center; background: var(--steel); border: 1px solid var(--line); color: var(--paper); font-size: calc(12.5px * var(--font-scale, 1)); padding: 5px 4px; border-radius: 6px; }
  .layout-card-field input:disabled { opacity: 0.4; }
  .layout-row:last-child { border-bottom: none; }
  .layout-drag-handle { cursor: grab; color: var(--muted2); display: flex; padding: 2px; }
  .layout-drag-handle:hover { color: var(--paper); }
  .layout-title { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .layout-count { font-family: 'JetBrains Mono', monospace; font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); }
  .layout-width-input { width: 55px; font-size: calc(11px * var(--font-scale, 1)); padding: 4px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--steel); color: var(--paper); }
  .layout-grid-field { display: flex; align-items: center; gap: 4px; font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); }
  .layout-grid-field input { font-size: calc(11px * var(--font-scale, 1)); padding: 4px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--steel); color: var(--paper); }
  .layout-card.drag-over-row { border-top: 2px solid var(--yellow); }
  /* Manager Board attachments */
  .mgmt-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .mgmt-attach-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--tint-rgb),0.06); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font-size: calc(11.5px * var(--font-scale, 1)); max-width: 260px; }
  .mgmt-attach-chip a { color: var(--link-blue); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
  .mgmt-attach-chip a:hover { text-decoration: underline; }
  .mgmt-attach-chip .att-size { color: var(--muted2); font-size: calc(10px * var(--font-scale, 1)); }
  .mgmt-attach-chip .att-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: calc(12px * var(--font-scale, 1)); padding: 0 2px; line-height: 1; }
  .mgmt-attach-add { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px dashed var(--line); border-radius: 7px; padding: 4px 10px; font-size: calc(11.5px * var(--font-scale, 1)); color: var(--muted); cursor: pointer; }
  .mgmt-attach-add:hover { border-color: var(--muted2); color: var(--paper); }
  .mgmt-attach-add.uploading { opacity: 0.6; cursor: default; }
  /* Manager Board redesign */
  .mgmt-stat { background: rgba(var(--tint-rgb),0.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; }
  .mgmt-stat .n { font-size: calc(24px * var(--font-scale, 1)); font-weight: 700; line-height: 1; }
  .mgmt-stat .l { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }

  /* --- Redesigned manager board: kanban columns by status --- */
  .mgmt-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
  .mgmt-col { flex: 0 0 300px; background: rgba(var(--tint-rgb),0.03); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: 72vh; }
  .mgmt-col-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 700; font-size: calc(13px * var(--font-scale,1)); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); border-radius: 12px 12px 0 0; z-index: 1; }
  .mgmt-col-head.s-open { color: #38bdf8; }
  .mgmt-col-head.s-working { color: #f5a623; }
  .mgmt-col-head.s-pending { color: #a78bfa; }
  .mgmt-col-head.s-investigating { color: #22d3ee; }
  .mgmt-col-head.s-collections { color: #fbbf24; }
  .mgmt-col-head.s-legal { color: #f87171; }
  .mgmt-col-head.s-resolved { color: #34d399; }
  .mgmt-col-count { background: rgba(var(--tint-rgb),0.1); border-radius: 10px; padding: 1px 9px; font-size: calc(11px * var(--font-scale,1)); color: var(--fg); }
  .mgmt-col-body { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .mgmt-col-empty { color: var(--muted); text-align: center; padding: 10px 0; font-size: calc(11px * var(--font-scale,1)); }
  .mgmt-card2 { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); overflow: hidden; }
  .mgmt-card2.prio-urgent { border-left: 4px solid #ef4444; }
  .mgmt-card2.prio-high { border-left: 4px solid #f97316; }
  .mgmt-card2.prio-normal { border-left: 4px solid #eab308; }
  .mgmt-card2.prio-low { border-left: 4px solid #94a3b8; }
  .mgmt-card2.is-open { box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
  .mgmt-card2-head { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px 6px; cursor: pointer; }
  .mgmt-card2-head:hover { background: rgba(var(--tint-rgb),0.03); }
  .mgmt-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; }
  .mgmt-dot.p-urgent { background: #ef4444; } .mgmt-dot.p-high { background: #f97316; }
  .mgmt-dot.p-normal { background: #eab308; } .mgmt-dot.p-low { background: #94a3b8; }
  .mgmt-card2-type { flex: 0 0 auto; }
  .mgmt-card2-note { font-size: calc(12.5px * var(--font-scale,1)); font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mgmt-card2.is-empty-note .mgmt-card2-note { font-style: italic; font-weight: 500; color: var(--muted); }
  .mgmt-empty-hint { color: var(--muted); font-style: italic; }
  .mgmt-card2-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 10px 9px; font-size: calc(10.5px * var(--font-scale,1)); color: var(--muted); }
  .mgmt-unassigned { color: #f97316; }
  /* Due-date badges on the card face. At least the note size (12.5px), never
     smaller, per the work order. Overdue red, today amber, future muted. */
  .mgmt-due { font-size: calc(12.5px * var(--font-scale,1)); font-weight: 600; padding: 0 6px; border-radius: 6px; white-space: nowrap; }
  .mgmt-due-overdue { color: #fff; background: #dc2626; }
  .mgmt-due-today { color: #7a4d00; background: #fbbf24; }
  .mgmt-due-future { color: var(--fg); background: rgba(var(--tint-rgb),0.1); }
  /* Agenda view day headings */
  .mgmt-agenda-day { font-weight: 700; font-size: calc(13px * var(--font-scale,1)); padding: 10px 4px 6px; border-bottom: 2px solid var(--line); margin-top: 10px; display: flex; align-items: center; gap: 8px; }
  .mgmt-agenda-day.is-overdue { color: #dc2626; }
  .mgmt-agenda-day.is-today { color: #d97706; }
  .mgmt-agenda-day.is-nodue { color: var(--muted); }
  .mgmt-agenda-count { background: rgba(var(--tint-rgb),0.1); border-radius: 10px; padding: 0 8px; font-size: calc(11px * var(--font-scale,1)); font-weight: 600; }
  .mgmt-agenda-items { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }

  /* View tabs (List/Board/Calendar) */
  .mgmt-viewtab { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 5px 14px; cursor: pointer; font-size: calc(12.5px * var(--font-scale,1)); font-weight: 600; }
  .mgmt-viewtab:hover { color: var(--fg); }
  .mgmt-viewtab.is-on { background: #a855f7; border-color: #a855f7; color: #fff; }

  /* --- List view: aligned rows grouped by status --- */
  .mgmt-list-group { margin-bottom: 6px; }
  .mgmt-list-grouphdr { display: flex; align-items: center; gap: 8px; padding: 8px 6px 6px; font-weight: 700; font-size: calc(12.5px * var(--font-scale,1)); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
  .mgmt-list-grouphdr .g-count { background: rgba(var(--tint-rgb),0.1); border-radius: 10px; padding: 0 8px; font-size: calc(11px * var(--font-scale,1)); }
  /* The row grid: flag | title (flex) | assignee | due | comments. Columns line
     up down the whole list so the due-date column can be scanned in one pass. */
  .mgmt-row { display: grid; grid-template-columns: 22px 20px 1fr 150px 150px 44px; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid rgba(var(--tint-rgb),0.06); cursor: pointer; }
  .mgmt-row:hover { background: rgba(var(--tint-rgb),0.04); }
  .mgmt-row .r-flag { width: 10px; height: 10px; border-radius: 50%; }
  .mgmt-row .r-flag.p-urgent { background: #ef4444; } .mgmt-row .r-flag.p-high { background: #f97316; }
  .mgmt-row .r-flag.p-normal { background: #eab308; } .mgmt-row .r-flag.p-low { background: #94a3b8; }
  .mgmt-row .r-title { font-size: calc(12.5px * var(--font-scale,1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mgmt-row .r-title .r-type { margin-right: 5px; }
  .mgmt-row .r-title.is-empty { font-style: italic; font-weight: 500; color: var(--muted); }
  .mgmt-row .r-assignee { font-size: calc(11.5px * var(--font-scale,1)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mgmt-row .r-assignee.is-unassigned { color: #f97316; }
  .mgmt-row .r-due { font-size: calc(12px * var(--font-scale,1)); font-weight: 600; white-space: nowrap; }
  .mgmt-row .r-due.due-overdue { color: #f87171; }
  .mgmt-row .r-due.due-today { color: #fbbf24; }
  .mgmt-row .r-due.due-future { color: var(--muted); }
  .mgmt-row .r-comments { font-size: calc(11px * var(--font-scale,1)); color: var(--muted); text-align: right; }
  .mgmt-list-colhead { display: grid; grid-template-columns: 22px 20px 1fr 150px 150px 44px; gap: 8px; padding: 4px 6px; font-size: calc(10px * var(--font-scale,1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  /* Quick-add row at the bottom of a status group */
  .mgmt-quickadd { display: flex; align-items: center; gap: 8px; padding: 6px 6px; opacity: 0.7; }
  .mgmt-quickadd:hover, .mgmt-quickadd:focus-within { opacity: 1; }
  .mgmt-quickadd .qa-plus { color: var(--muted); font-weight: 700; font-size: calc(15px * var(--font-scale,1)); width: 12px; text-align: center; }
  .mgmt-quickadd .qa-input { flex: 1; background: transparent; border: 1px dashed var(--line); border-radius: 6px; padding: 5px 8px; font-size: calc(12px * var(--font-scale,1)); color: var(--fg); }
  .mgmt-quickadd .qa-input:focus { border-style: solid; border-color: #a855f7; outline: none; }
  /* Bulk-action bar + row checkboxes */
  .mgmt-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; background: rgba(168,85,247,0.12); border: 1px solid #a855f7; border-radius: 9px; }
  .mgmt-bulk-count { font-weight: 700; font-size: calc(12.5px * var(--font-scale,1)); }
  .mgmt-row .r-check { width: auto; margin: 0; cursor: pointer; }
  .mgmt-row.is-checked { background: rgba(168,85,247,0.10); }
  /* Stage 8: Manager Board AI panel */
  .mgmt-ai-panel { border: 1px solid #a855f7; background: rgba(168,85,247,0.07); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
  .mgmt-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .mgmt-ai-output { margin-top: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: calc(13px * var(--font-scale,1)); line-height: 1.5; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }
  .mgmt-ai-output .ai-asof { display: block; margin-top: 8px; font-size: calc(10.5px * var(--font-scale,1)); color: var(--muted); }
  .mgmt-ai-output .ai-copy { margin-top: 8px; }
  /* Calendar view */
  .mgmt-calendar-wrap { padding: 4px; }
  .mgmt-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .mgmt-cal-title { font-weight: 700; font-size: calc(15px * var(--font-scale,1)); min-width: 180px; }
  .mgmt-cal-nav { padding: 4px 12px; font-size: calc(16px * var(--font-scale,1)); }
  .mgmt-cal-today { margin-left: 6px; }
  .mgmt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .mgmt-cal-dow { text-align: center; font-size: calc(10.5px * var(--font-scale,1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 4px 0; font-weight: 700; }
  .mgmt-cal-cell { min-height: 92px; border: 1px solid var(--line); border-radius: 7px; padding: 4px; background: var(--panel); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
  .mgmt-cal-cell.is-other-month { opacity: 0.4; }
  .mgmt-cal-cell.is-today { border-color: #a855f7; box-shadow: inset 0 0 0 1px #a855f7; }
  .mgmt-cal-cell.drop-hover { background: rgba(168,85,247,0.15); border-color: #a855f7; }
  .mgmt-cal-daynum { font-size: calc(11px * var(--font-scale,1)); color: var(--muted); font-weight: 700; }
  .mgmt-cal-item { font-size: calc(10.5px * var(--font-scale,1)); padding: 2px 5px; border-radius: 4px; background: var(--panel2); border-left: 3px solid var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mgmt-cal-item.p-urgent { border-left-color: #ef4444; }
  .mgmt-cal-item.p-high { border-left-color: #f97316; }
  .mgmt-cal-item.p-normal { border-left-color: #eab308; }
  .mgmt-cal-item.p-low { border-left-color: #94a3b8; }
  .mgmt-cal-item.is-overdue { background: rgba(220,38,38,0.14); }
  .mgmt-cal-more { font-size: calc(9.5px * var(--font-scale,1)); color: var(--muted); padding-left: 3px; }
  .mgmt-cal-nodue { margin-top: 12px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .mgmt-cal-nodue-head { font-weight: 700; font-size: calc(11.5px * var(--font-scale,1)); color: var(--muted); width: 100%; }
  /* Stage 5: parts orders in the job modal */
  .parts-order-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1.3fr 120px 30px; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 6px; font-size: calc(12px * var(--font-scale,1)); }
  .parts-order-row.is-done { opacity: 0.6; }
  .parts-order-row .po-supplier { font-weight: 700; }
  .parts-order-row .po-parts { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .parts-order-row .po-eta { font-weight: 600; }
  .parts-order-row .po-del { padding: 2px 8px; }
  .parts-order-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .parts-order-add input { padding: 6px 8px; }
  /* Card face: earliest-ETA badge with a count when there are several orders */
  .card-parts-multi { display: inline-flex; align-items: center; gap: 4px; }
  .card-parts-count { background: rgba(var(--tint-rgb),0.14); border-radius: 8px; padding: 0 5px; font-size: 0.85em; font-weight: 700; }

  /* --- Slide-over detail panel --- */
  .mgmt-slideover { position: absolute; top: 0; right: 0; height: 100%; width: 420px; max-width: 92%; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0,0,0,0.28); transform: translateX(100%); transition: transform 0.18s ease; z-index: 40; display: flex; flex-direction: column; }
  .mgmt-slideover.is-open { transform: translateX(0); }
  .mgmt-slide-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.28); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; z-index: 39; }
  .mgmt-slide-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .mgmt-slide-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .mgmt-slide-title { font-weight: 700; font-size: calc(14px * var(--font-scale,1)); }
  .mgmt-slide-body { padding: 12px 14px; overflow-y: auto; flex: 1; }
  .mgmt-row.is-selected, .mgmt-card2.is-selected { outline: 2px solid #a855f7; outline-offset: -2px; }
  .mgmt-card2-age { margin-left: auto; }
  .mgmt-card2-badge { background: rgba(var(--tint-rgb),0.08); border-radius: 8px; padding: 0 6px; }
  .mgmt-card2-detail { border-top: 1px solid var(--line); padding: 10px; background: rgba(var(--tint-rgb),0.02); }
  .mgmt-card2-job { color: var(--link-blue); cursor: pointer; font-size: calc(12px * var(--font-scale,1)); margin-bottom: 6px; }
  .mgmt-card2-fullnote { font-size: calc(12.5px * var(--font-scale,1)); line-height: 1.4; margin-bottom: 6px; white-space: pre-wrap; }
  .mgmt-card2-from { font-size: calc(10.5px * var(--font-scale,1)); color: var(--muted); margin-bottom: 8px; }
  .mgmt-card2-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .mgmt-card2-controls { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
  .mgmt-card2-controls label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(11px * var(--font-scale,1)); color: var(--muted); }
  .mgmt-card2-controls select { flex: 1; max-width: 200px; }
  .mgmt-card2-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .mgmt-assignees { margin: 4px 0 8px; }
  .mgmt-assignees-head { font-size: calc(10.5px * var(--font-scale,1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; font-weight: 700; }
  .mgmt-assignees-list { display: flex; flex-wrap: wrap; gap: 5px; }
  .mgmt-assignee-chip { display: inline-flex; align-items: center; gap: 4px; font-size: calc(11px * var(--font-scale,1)); padding: 3px 8px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--panel); user-select: none; }
  .mgmt-assignee-chip.is-on { background: rgba(168,85,247,0.15); border-color: #a855f7; }
  .mgmt-assignee-chip input { margin: 0; }
  .mgmt-checklist { margin: 8px 0; border-top: 1px dashed var(--line); padding-top: 8px; }
  .mgmt-checklist-head { font-size: calc(10.5px * var(--font-scale,1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 5px; font-weight: 700; }
  .mgmt-checklist-count { color: #a855f7; margin-left: 4px; }
  .mgmt-checklist-item { display: flex; align-items: center; gap: 7px; font-size: calc(12px * var(--font-scale,1)); padding: 3px 0; cursor: pointer; }
  .mgmt-checklist-item span { flex: 1; }
  .mgmt-checklist-item.is-done span { text-decoration: line-through; opacity: 0.55; }
  .mgmt-chk-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; opacity: 0.5; }
  .mgmt-chk-del:hover { opacity: 1; color: var(--red); }
  .mgmt-checklist-form { display: flex; gap: 6px; margin-top: 6px; }
  .mgmt-checklist-form input { flex: 1; font-size: calc(12px * var(--font-scale,1)); }
  .mgmt-card2-comments { border-top: 1px dashed var(--line); padding-top: 8px; }
  .mgmt-nocomments { font-size: calc(10.5px * var(--font-scale,1)); color: var(--muted); }
  .mgmt-comment .c-when { color: var(--muted); font-size: calc(9.5px * var(--font-scale,1)); }
  .mgmt-comment-form { display: flex; gap: 6px; margin-top: 8px; }
  .mgmt-comment-form input { flex: 1; }

  .mgmt-card { border: 1px solid var(--line); border-left: 4px solid var(--muted2); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: rgba(var(--tint-rgb),0.02); transition: box-shadow 0.15s; }
  .mgmt-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
  .mgmt-card.prio-urgent { border-left-color: #ef4444; }
  .mgmt-card.prio-high { border-left-color: #f97316; }
  .mgmt-card.prio-normal { border-left-color: #eab308; }
  .mgmt-card.prio-low { border-left-color: #9ca3af; }
  .mgmt-card.is-resolved { opacity: 0.6; }
  .mgmt-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .mgmt-pill { font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
  .mgmt-pill.type-esc { background: rgba(239,68,68,0.15); color: #fca5a5; }
  .mgmt-pill.type-task { background: rgba(34,197,94,0.15); color: #86efac; }
  .mgmt-pill.p-urgent { background: rgba(239,68,68,0.2); color: #fca5a5; }
  .mgmt-pill.p-high { background: rgba(249,115,22,0.2); color: #fdba74; }
  .mgmt-pill.p-normal { background: rgba(234,179,8,0.18); color: #fde047; }
  .mgmt-pill.p-low { background: rgba(156,163,175,0.18); color: #d1d5db; }
  .mgmt-status-pill { border: 1px solid transparent; }
  .mgmt-status-pill.s-open { background: rgba(59,130,246,0.15); color: #93c5fd; }
  .mgmt-status-pill.s-working { background: rgba(234,179,8,0.18); color: #fde047; }
  .mgmt-status-pill.s-pending { background: rgba(148,163,184,0.18); color: #cbd5e1; }
  .mgmt-status-pill.s-investigating { background: rgba(168,85,247,0.18); color: #d8b4fe; }
  .mgmt-status-pill.s-collections { background: rgba(245,158,11,0.2); color: #fcd34d; }
  .mgmt-status-pill.s-legal { background: rgba(239,68,68,0.2); color: #fca5a5; }
  .mgmt-status-pill.s-resolved { background: rgba(34,197,94,0.18); color: #86efac; }
  .mgmt-card-note { font-size: calc(13.5px * var(--font-scale, 1)); line-height: 1.5; margin: 4px 0 8px; }
  .mgmt-card-meta { font-size: calc(11px * var(--font-scale, 1)); color: var(--muted); margin-bottom: 8px; }
  .mgmt-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .mgmt-mini-btn { font-size: calc(11px * var(--font-scale, 1)); padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--paper); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
  .mgmt-mini-btn:hover { border-color: var(--muted2); background: rgba(var(--tint-rgb),0.06); }
  .mgmt-mini-btn.primary { background: var(--yellow); border-color: var(--yellow); color: var(--on-accent); font-weight: 700; }
  .mgmt-mini-btn.tek { background: #0a6cff; border-color: #0a6cff; color: #fff; text-decoration: none; font-weight: 600; }
  .mgmt-mini-select { font-size: calc(11px * var(--font-scale, 1)); padding: 4px 6px; border-radius: 7px; }
  .mgmt-comments { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
  .mgmt-comment { font-size: calc(12px * var(--font-scale, 1)); padding: 5px 0; border-bottom: 1px dashed rgba(var(--tint-rgb),0.08); }
  .mgmt-comment .c-author { font-weight: 700; font-size: calc(11px * var(--font-scale, 1)); color: var(--muted2); }
  .mgmt-comment-form { display: flex; gap: 6px; margin-top: 8px; }
  .mgmt-comment-form input { flex: 1; font-size: calc(12px * var(--font-scale, 1)); }
  .column.drag-over { border-color: var(--yellow); }
  .column-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: grab; }
  .column-header:active { cursor: grabbing; }
  .column.column-being-dragged { opacity: 0.4; }
  .col-title-input { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; color: var(--paper); font-family: 'Oswald', sans-serif; font-size: calc(12.5px * var(--font-scale, 1)); font-weight: 600; text-transform: uppercase; padding: 4px 6px; border-radius: 5px; }
  .col-title-input:hover { border-color: var(--line); }
  .col-title-input:focus { outline: none; border-color: var(--yellow); background: var(--steel); }
  .col-color-input { width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; flex: 0 0 auto; }
  .col-count { font-family: 'JetBrains Mono', monospace; font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); background: var(--steel); padding: 2px 6px; border-radius: 20px; }
  .col-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 3px; display: flex; }
  .col-btn:hover { color: var(--paper); }
  .col-btn svg { width: 13px; height: 13px; }
  .card-list { padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
  /* Cards flow left-to-right and wrap to the next row when the column runs out
     of width — so a wide stage shows several cards side by side, a narrow one
     shows a single column. Each card is a fixed, readable size; the column's
     width (how many fit per row) is what changes, not the card. A slightly
     smaller 200px base (was 246px) lets 2-3 fit across a normal-width stage
     while staying easily readable. */
  .card { flex: 0 1 calc(200px * var(--font-scale, 1) * var(--card-scale, 1)); min-width: calc(180px * var(--font-scale, 1) * var(--card-scale, 1)); max-width: calc(240px * var(--font-scale, 1) * var(--card-scale, 1)); background: var(--card-paper); color: var(--ink); border-radius: 8px; padding: 10px 12px; border-left: 5px solid var(--blue); font-size: calc(13px * var(--font-scale, 1) * var(--card-scale, 1)); cursor: grab; transform-origin: 50% 100%; box-sizing: border-box; }
  /* Density steps: as a column fills, cards tighten (less padding, smaller
     text) so a few more fit before the scrollbar appears — never below a
     readable floor. */
  .card { transition: padding 0.15s ease, font-size 0.15s ease; }

  /* ---- Density & text size -------------------------------------------
     Browser zoom is the wrong tool for fitting more cars on a screen: it
     scales click targets down with the text, and at small zoom levels a
     44px thumbnail becomes a target that's genuinely hard to hit. These
     classes shrink the SPACING and TEXT while leaving tap targets alone.
     -------------------------------------------------------------------- */
  body { --density: 1; --font-scale: 1; --base-scale: 1; --dialog-scale: 1; }
  /* Reading text is a separate problem from board text. Zooming the browser
     out far enough to see the whole board shrinks everything, pop-ups
     included, so one shared size can't serve both. Custom properties inherit,
     so redefining --font-scale on dialogs rescales every piece of text inside
     them — including what you type into a field — without touching any of the
     200-odd individual rules. */
  .overlay, .modal-box, #callPop, .toast, .menu-dropdown, #announcementBanner {
    /* Absolute, NOT multiplied by the board scale. The whole point is "board
       small, pop-ups big" — if shrinking the board also shrank pop-ups you'd
       have to keep compensating, which is the problem this is meant to solve. */
    --font-scale: var(--dialog-scale, 1);
  }
  /* Fields deserve a floor of their own. A shrunken input is the one thing you
     genuinely cannot work around by leaning in, because you're typing into it. */
  .overlay input, .overlay textarea, .overlay select,
  .modal-box input, .modal-box textarea, .modal-box select {
    /* A floor of 16px whatever else happens: below that a field is hard to
       read at arm's length, and on iPhones anything under 16px makes Safari
       zoom the page in the moment you tap into it. */
    font-size: max(16px, calc(15px * var(--font-scale, 1))) !important;
    line-height: 1.45;
  }
  .inbox-badge {
    position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff;
    border-radius:9px; padding:1px 5px; font-size:10px !important; font-weight:800;
    min-width:16px; text-align:center;
  }
  /* The screen pop. Fixed, high, and impossible to miss — it has about four
     seconds of usefulness before somebody picks up the phone. */
  #callPop {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 500; width: 460px; max-width: 94vw;
    background: var(--panel); border: 2px solid var(--green);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.6);
    display: none;
  }
  #callPop.show { display: block; animation: popIn 0.18s ease-out; }
  @keyframes popIn { from { opacity:0; transform: translateX(-50%) translateY(-10px); } }
  #callPop .pop-num { font-family:'JetBrains Mono',monospace; font-size: calc(19px * var(--font-scale,1)); font-weight:800; }
  #callPop .pop-prior { border-top:1px solid var(--line); margin-top:9px; padding-top:8px; }
  .inbox-item { border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin-bottom:8px; background:var(--panel2); }
  .inbox-item.unread { border-left:3px solid var(--orange); }
  .inbox-item.high { border-left:3px solid var(--red); }
  .call-row { display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
  .call-row:hover { background:var(--panel2); }
  .call-row.unlinked { border-left:3px solid var(--yellow); }
  /* An unheard voicemail needs a marker that cannot be confused with the
     yellow "no car on the board" edge — orange beside yellow is not a
     distinction anyone reads on a shop floor, and an inline left-border also
     overwrote the unlinked edge, hiding which calls had no car. A tinted row
     with its own dot reads differently at a glance and stacks with unlinked
     instead of fighting it. */
  .call-row.vm-unheard { background: rgba(249,115,22,0.10); }
  .call-row.vm-unheard:hover { background: rgba(249,115,22,0.16); }
  .call-row.vm-unheard .vm-dot { color: var(--orange); }
  /* Floats above everything, including dialogs (overlay is z-index 100). */
  .text-size-quick {
    position: fixed; bottom: 14px; left: 14px; z-index: 400;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 6px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--panel);
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
    opacity: 0.55; transition: opacity 0.15s;
    /* The wrapper spans a bottom-left area but is semi-transparent, so it must
       not swallow clicks meant for the interface behind it — only its own
       buttons are interactive. Without this it silently intercepted clicks on
       full-screen panel buttons in the same corner. */
    pointer-events: none;
  }
  /* Only the two buttons are interactive. The label was in this selector too,
     which quietly undid the wrapper's pointer-events:none for the WIDEST part
     of the control — "Pop-up 100%" is 73px of dead zone sitting on top of
     whatever is behind it. A label is never clicked; it must not hit-test. */
  .text-size-quick button { pointer-events: auto; }
  .text-size-quick span { pointer-events: none; user-select: none; }
  /* When a full-screen panel is open, get the control out of the way entirely so
     it can't overlap that panel's own bottom-left buttons. Only 7 of 66 dialogs
     actually carry .modal-large, so this rule alone misses most of them — the
     measured dodge below is what covers the rest. */
  body:has(.overlay.open .modal-large) .text-size-quick { display: none; }
  /* Dodge positions, chosen at runtime by syncTextSizeDodge(). Higher
     specificity than the base rule so they win without !important. */
  .text-size-quick.at-br { left: auto; right: 14px; top: auto; bottom: 14px; }
  .text-size-quick.at-tr { left: auto; right: 14px; bottom: auto; top: 14px; }
  .text-size-quick.at-tl { right: auto; left: 14px; bottom: auto; top: 14px; }
  .text-size-quick.dodge-hide { display: none; }
  .text-size-quick:hover { opacity: 1; }
  .text-size-quick button {
    /* Fixed size on purpose: the control that changes text size must not
       change size itself, or it walks away as you use it. */
    font-size: 13px !important;
    min-width: 30px; min-height: 30px; padding: 3px 7px; font-weight: 700;
  }
  #textSizeNow {
    font-size: 11px !important; color: var(--muted);
    min-width: 34px; text-align: center; font-family: 'JetBrains Mono', monospace;
  }
  body.density-compact { --density: 0.78; }
  body.density-ultra   { --density: 0.6; }

  body .card { padding: calc(9px * var(--density)) calc(12px * var(--density)); }
  body .card-list { gap: calc(8px * var(--density)); }
  body .card-vehicle { font-size: calc(13.5px * var(--font-scale)); }
  body .card-customer, body .card-ro { font-size: calc(12px * var(--font-scale)); }
  body .col-title { font-size: calc(13px * var(--font-scale)); }
  body .column { padding: calc(10px * var(--density)); }

  /* Click targets never shrink below something a person can actually hit
     with a finger or a mouse on a shop floor, whatever the density or zoom.
     The visual can be small; the hit area can't. */
  .tool-thumb, [data-tool-photo-view], .card-photo-thumb {
    min-width: 44px; min-height: 44px;
    position: relative;
  }
  .tool-thumb::after, [data-tool-photo-view]::after {
    content: ''; position: absolute; inset: -8px; /* invisible margin around the target */
  }


  /* Resource links in the stats area — always on screen, no digging into a
     car first. Sits between the counts and the stage bar so it reads as part
     of the dashboard rather than a floating toolbar. */
  #techResourceBar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
  #techResourceBar:empty { display: none; }
  #techResourceBar .res-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 7px;
    background: var(--panel2); border: 1px solid var(--line);
    color: var(--text); text-decoration: none;
    font-size: calc(12px * var(--font-scale, 1)); font-weight: 600; white-space: nowrap;
    min-height: 32px;   /* stays hittable at every density */
  }
  #techResourceBar .res-chip:hover { border-color: var(--link-blue); color: var(--link-blue); }
  #techResourceBar .res-chip.call { border-color: var(--green); color: var(--green); }
  #techResourceBar .res-label { font-size: calc(11px * var(--font-scale, 1)); color: var(--muted); margin-right: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

  .card-list.dense { gap: 6px; }
  .card-list.dense .card { padding: 7px 10px; font-size: calc(12px * var(--font-scale, 1)); }
  .card-list.extra-dense { gap: 4px; }
  .card-list.extra-dense .card { padding: 5px 9px; font-size: calc(11.5px * var(--font-scale, 1)); }
  /* A slim, unobtrusive scrollbar inside busy columns. */
  .card-list::-webkit-scrollbar { width: 8px; }
  .card-list::-webkit-scrollbar-thumb { background: rgba(var(--tint-rgb),0.25); border-radius: 4px; }
  .card-list::-webkit-scrollbar-track { background: transparent; }
  .card.rush { border-left-color: var(--orange); }
  .card.emergency { border-left-color: var(--pink); }
  .card.low { border-left-color: var(--muted); }
  .card-vehicle { font-weight: 700; }
  .card-customer { font-size: calc(11.5px * var(--font-scale, 1)); color: var(--ink-soft); }
  .card-ro { font-family: 'JetBrains Mono', monospace; font-size: calc(10px * var(--font-scale, 1)); color: var(--ink-soft); margin-top: 3px; }
  .card-value { font-size: calc(11px * var(--font-scale, 1)); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
  .card-value .cv-hours { font-weight: 700; color: var(--ink); }
  .card-value .cv-dollars { color: var(--ink-soft); }
  .card-value .cv-dollars.cv-high { color: #b8860b; font-weight: 800; }
  .card-value .cv-sep { color: var(--ink-soft); opacity: 0.5; }
  .ro-gold-star { color: #f5b301; text-shadow: 0 0 3px rgba(245,179,1,0.5); font-size: calc(13px * var(--font-scale, 1)); }
  .card-ro.rush-ro { color: var(--red); font-weight: 700; }
  /* One line of chips, only for the things this car actually has to say.
     Colour carries the meaning at three metres, the text confirms it up close.
     Sized in em against --font-scale throughout: fixed pixels inside scaling
     text is the RO-panel icon bug and it is not worth building twice. They
     WRAP rather than clipping, so a narrow column or a large text size pushes
     a chip to the next line instead of cutting it in half. */
  .card-meta {
    display: flex; align-items: center; gap: 0.45em; flex-wrap: wrap; margin-top: 0.35em;
    font-size: calc(10.5px * var(--font-scale, 1)); color: var(--ink-soft);
  }
  .card-chip {
    display: inline-flex; align-items: center; gap: 0.25em;
    padding: 0.1em 0.5em; border-radius: 1em; white-space: nowrap;
    background: rgba(0,0,0,0.18); max-width: 100%;
  }
  .card-chip.stale { background: rgba(255,107,53,0.22); color: #ff9a6b; font-weight: 700; }
  .card-chip.parts-wait { background: rgba(244,196,48,0.20); color: #f4c430; }
  .card-chip.parts-in { background: rgba(46,139,87,0.24); color: #7fd8a0; }
  .card-chip.msg { background: rgba(74,143,214,0.24); color: #8fc4ff; font-weight: 700; }
  .card-chip.esc { background: rgba(168,85,247,0.24); color: #c99cff; font-weight: 700; }
  .card-ro.emergency-ro { color: var(--pink); font-weight: 700; }
  .completion-track { height: 4px; border-radius: 2px; background: rgba(0,0,0,0.08); overflow: hidden; margin-top: 6px; }
  .completion-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); }
  .card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 6px; }
  .move-select { font-size: calc(10.5px * var(--font-scale, 1)); padding: 3px 4px; border-radius: 5px; border: 1px solid #d8dce2; max-width: 110px; }

  @keyframes cardRock { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
  @keyframes cardBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.4; } }
  @keyframes inspectionPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,26,26,0); } 50% { box-shadow: 0 0 14px 3px rgba(255,26,26,0.75); } }
  @keyframes expiredGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,16,83,0.55); } 50% { box-shadow: 0 0 0 7px rgba(255,16,83,0); } }
  .card.rocking, .card.card-flashing, .card.expired { /* animation is set inline via JS — see combinedCardAnimation() — so rock/flash/expired can play together instead of one CSS class silently overriding another's `animation` shorthand */ }
  .card.expired { border-left-color: var(--pink) !important; }

  #statsBar { display: flex; gap: 0; padding: 10px 20px; background: rgba(var(--tint-rgb),0.02); border-bottom: 1px solid var(--line); flex-wrap: wrap; flex: 0 0 auto; }
  .stat { display: flex; flex-direction: column; padding: 0 18px; border-right: 1px solid var(--line); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: none; }
  .stat-value { font-family: 'JetBrains Mono', monospace; font-size: calc(17px * var(--font-scale, 1)); font-weight: 700; line-height: 1.1; }
  .stat-label { font-size: calc(9.5px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 2px; }
  .stat.alert .stat-value { color: var(--red); }
  .stat.warn .stat-value { color: var(--orange-text); }

  #stageStatsBar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 20px 12px; background: rgba(var(--tint-rgb),0.015); border-bottom: 1px solid var(--line); flex: 0 0 auto; }

  #statsAreaWrap { flex: 0 0 auto; }
  #statsAreaToggle {
    display: block; width: 100%; background: rgba(var(--tint-rgb),0.015); border: none; border-bottom: 1px solid var(--line);
    color: var(--muted); font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 3px 20px; cursor: pointer; text-align: left; font-family: inherit;
  }
  #statsAreaToggle:hover { color: var(--paper); background: rgba(var(--tint-rgb),0.04); }
  #statsAreaWrap.collapsed #statsAreaContent { display: none; }

  #alertBox { flex: 0 0 auto; }
  #announcementBanner { flex: 0 0 auto; }
  .announcement-banner-inner {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px; margin: 0 16px 10px;
    background: linear-gradient(90deg, var(--tag-bg), #263344); border: 1px solid #4a8fd6; border-radius: 10px;
    animation: announcementSlideIn 0.3s ease-out;
  }
  @keyframes announcementSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .announcement-banner-icon { font-size: calc(20px * var(--font-scale, 1)); flex: 0 0 auto; }
  .announcement-banner-text { flex: 1 1 auto; font-size: calc(13.5px * var(--font-scale, 1)); color: var(--paper); }
  .announcement-banner-author { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--link-blue); margin-top: 2px; }
  .announcement-banner-dismiss { background: none; border: none; color: var(--muted); font-size: calc(16px * var(--font-scale, 1)); cursor: pointer; padding: 4px 8px; flex: 0 0 auto; }
  .announcement-banner-dismiss:hover { color: #fff; }
  #alertBox.has-alerts {
    background: linear-gradient(180deg, rgba(255,59,48,0.14), rgba(255,59,48,0.05));
    border-bottom: 2px solid var(--red); padding: 10px 20px 12px;
  }
  .alert-box-title { display: flex; align-items: center; gap: 7px; font-family: 'Oswald', sans-serif; font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); margin-bottom: 8px; }
  .alert-box-title .alert-count-badge { background: var(--red); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: calc(11px * var(--font-scale, 1)); padding: 1px 8px; border-radius: 10px; }
  .alert-box-title .alert-ringing-note { font-size: calc(10px * var(--font-scale, 1)); font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--muted); margin-left: 2px; }
  #alertBox.all-silenced { border-bottom-color: var(--muted2); }
  #alertBox.all-silenced .alert-box-title { color: var(--muted); }
  .alert-chip.silenced { border-left-color: var(--muted); opacity: 0.72; }
  .alert-chip.silenced:hover { opacity: 1; }
  .alert-chip.silenced .alert-chip-meta { color: var(--ink-soft); }
  .alert-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .alert-chip {
    display: flex; align-items: center; gap: 8px; background: var(--card-paper); color: var(--ink);
    border-radius: 8px; padding: 6px 10px 6px 8px; cursor: pointer; border-left: 4px solid var(--red);
    font-size: calc(12px * var(--font-scale, 1)); width: 260px; overflow: hidden;
  }
  .alert-chip:hover { filter: brightness(1.05); }
  .alert-chip-text { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .alert-chip .alert-chip-vehicle { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .alert-chip .alert-chip-meta { color: var(--ink-soft); font-size: calc(10.5px * var(--font-scale, 1)); white-space: nowrap; }
  .alert-chip .alert-chip-stage { font-size: calc(9.5px * var(--font-scale, 1)); text-transform: uppercase; color: var(--ink-soft); background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 8px; white-space: nowrap; flex: 0 0 auto; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
  .alert-chip-silence { background: none; border: 1px solid rgba(0,0,0,0.15); color: var(--ink-soft); font-size: calc(12px * var(--font-scale, 1)); padding: 3px 6px; cursor: pointer; border-radius: 5px; flex: 0 0 auto; }
  .alert-chip-silence:hover { background: rgba(0,0,0,0.08); color: var(--ink); }
  .alert-chip-clear { background: none; border: 1px solid rgba(0,0,0,0.15); color: var(--ink-soft); font-size: calc(11px * var(--font-scale, 1)); padding: 3px 7px; cursor: pointer; border-radius: 5px; flex: 0 0 auto; font-weight: 700; }
  .alert-chip-clear:hover { background: var(--red); border-color: var(--red); color: #fff; }

  #towInBox { flex: 0 0 auto; }
  #towInBox.has-tows {
    background: linear-gradient(180deg, rgba(74,143,214,0.14), rgba(74,143,214,0.05));
    border-bottom: 2px solid var(--blue); padding: 10px 20px 12px;
  }
  .towin-box-title { display: flex; align-items: center; gap: 7px; font-family: 'Oswald', sans-serif; font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--blue); margin-bottom: 8px; }
  .towin-box-title .towin-count-badge { background: var(--blue); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: calc(11px * var(--font-scale, 1)); padding: 1px 8px; border-radius: 10px; }
  .towin-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .towin-chip {
    display: flex; align-items: center; gap: 8px; background: var(--card-paper); color: var(--ink);
    border-radius: 8px; padding: 6px 10px 6px 8px; cursor: pointer; border-left: 4px solid var(--blue);
    font-size: calc(12px * var(--font-scale, 1)); width: 260px; overflow: hidden;
  }
  .towin-chip:hover { filter: brightness(1.05); }
  .towin-chip .towin-chip-vehicle { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .towin-chip .towin-chip-meta { color: var(--ink-soft); font-size: calc(10.5px * var(--font-scale, 1)); white-space: nowrap; }
  .towin-chip-stage { font-size: calc(9.5px * var(--font-scale, 1)); text-transform: uppercase; color: var(--ink-soft); background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 8px; white-space: nowrap; flex: 0 0 auto; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
  .towin-chip-ack { background: none; border: 1px solid rgba(0,0,0,0.15); color: var(--ink-soft); font-size: calc(11px * var(--font-scale, 1)); padding: 3px 7px; cursor: pointer; border-radius: 5px; flex: 0 0 auto; font-weight: 700; }
  .towin-chip-ack:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
  .towin-chip.towin-overdue { border-left-color: var(--orange); background: linear-gradient(90deg, rgba(255,107,53,0.12), var(--card-paper)); }
  .towin-chip-arrive { background: none; border: 1px solid rgba(0,0,0,0.15); font-size: calc(12px * var(--font-scale, 1)); padding: 3px 6px; cursor: pointer; border-radius: 5px; flex: 0 0 auto; }
  .towin-chip-arrive:hover { background: var(--green); border-color: var(--green); }

  /* A bright yellow light that travels around the card's border so you can
     spot exactly which one you clicked, even in a crowded column. The moving
     light is a rotating conic-gradient painted on a ::before layer sitting
     just outside the card; a separate pulsing glow makes it findable at a
     glance from across the room. Held ~4.5s — long enough to actually walk
     over and find it, not blink and miss it. */
  @property --jump-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  @keyframes jumpSpin { to { --jump-angle: 360deg; } }
  @keyframes jumpGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,214,0,0); }
    50% { box-shadow: 0 0 22px 5px rgba(255,214,0,0.75); }
  }
  /* The card whose detail panel is open stays marked for as long as the panel
     is open — distinct from .jump-highlight, which is a 4.5-second flash used
     when jumping to a card from search. Without this you read a panel with no
     idea which of sixty cards it belongs to. */
  .card.panel-open {
    outline: 3px solid var(--accent, #ff6b35);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 107, 53, 0.18);
  }

  .card.jump-highlight {
    position: relative;
    z-index: 5;
    animation: jumpGlowPulse 1.1s ease-in-out 4;
  }
  .card.jump-highlight::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 11px;
    padding: 4px;
    background: conic-gradient(from var(--jump-angle),
      rgba(255,214,0,0) 0deg,
      rgba(255,214,0,0) 250deg,
      rgba(255,236,120,1) 300deg,
      rgba(255,214,0,1) 330deg,
      rgba(255,236,120,1) 360deg);
    /* mask so the gradient only shows as a border ring, not a filled block */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: jumpSpin 1.1s linear 4;
    pointer-events: none;
    z-index: 6;
  }
  /* Fallback: if a browser doesn't support @property (so the conic angle
     can't animate), still give a strong static yellow ring rather than nothing. */
  @supports not (background: conic-gradient(from var(--jump-angle), red, blue)) {
    .card.jump-highlight::before {
      background: none;
      box-shadow: 0 0 0 4px rgba(255,214,0,0.95);
      -webkit-mask: none; mask: none;
    }
  }

  .priority-badge { display: inline-block; font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 4px; margin-bottom: 4px; }
  .priority-badge.rush { background: rgba(255,107,53,0.18); color: var(--orange-text); }
  .priority-badge.emergency { background: rgba(255,16,83,0.2); color: #ff1053; }
  .priority-badge.needs-update-badge { background: rgba(244,196,48,0.22); color: #b8860b; cursor: pointer; animation: needsUpdatePulse 2s ease-in-out infinite; }
  .priority-badge.inspection-warning-badge { background: rgba(255,59,48,0.22); color: #ff3b30; cursor: pointer; animation: needsUpdatePulse 1.6s ease-in-out infinite; }
  /* Two inspections, two looks — so a glance tells you which gate a car is stuck
     at. "Inspection In" (pre-repair) stays red; QA (final) is blue/indigo. */
  .priority-badge.inspection-badge-in { background: rgba(255,59,48,0.22); color: #ff3b30; }
  .priority-badge.inspection-badge-qa { background: rgba(88,86,214,0.22); color: #5856d6; }
  /* The 5-hour "not done yet" flag — amber, clickable to clear. */
  .priority-badge.overdue-flag-badge { background: rgba(240,180,41,0.25); color: #b8860b; cursor: pointer; animation: needsUpdatePulse 1.8s ease-in-out infinite; }
  @keyframes needsUpdatePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

  /* --- Parts Dashboard --- */
  .modal-box.parts-dash { width: 820px; max-width: 94vw; background: var(--dash-panel-bg); border: 1px solid var(--dash-panel-border); }
  .parts-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 14px; }
  .parts-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: calc(13px * var(--font-scale,1)); font-weight: 600; padding: 8px 14px; cursor: pointer; }
  .parts-tab:hover { color: var(--paper); }
  .parts-tab.is-active { color: var(--paper); border-bottom-color: var(--dash-accent, #f0b429); }
  .parts-tab-panel { display: none; }
  .parts-tab-panel.is-active { display: block; }
  .supplier-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: var(--panel); }
  .supplier-card.is-inactive { opacity: 0.55; }
  .supplier-card-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .supplier-card-name { font-weight: 700; font-size: calc(14px * var(--font-scale,1)); }
  .supplier-card-meta { font-size: calc(12px * var(--font-scale,1)); color: var(--muted); line-height: 1.5; }
  .supplier-card-actions { margin-top: 8px; display: flex; gap: 6px; }
  .po-line-row { display: grid; grid-template-columns: 1fr 2fr 60px 80px auto; gap: 6px; margin-bottom: 6px; align-items: center; }
  .po-line-row input { font-size: calc(12px * var(--font-scale,1)); }
  .parts-order-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: var(--panel); }
  .parts-order-card.is-late { border-color: var(--red); }
  .po-field-label { font-size: calc(10.5px * var(--font-scale,1)); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
  .parts-dash-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid #f4c430; }
  #vendorOverview { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .vendor-chip { display: flex; align-items: center; gap: 6px; background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: 20px; padding: 5px 6px 5px 12px; font-size: calc(11.5px * var(--font-scale, 1)); }
  .vendor-chip .vc-name { color: var(--link-blue); font-weight: 700; }
  .vendor-chip .vc-count { font-family: 'JetBrains Mono', monospace; background: rgba(var(--tint-rgb),0.08); border-radius: 12px; padding: 1px 8px; color: #cbd5e1; }
  .vendor-chip.vc-has-overdue { border-color: var(--red); }
  .vendor-chip.vc-has-overdue .vc-count { background: rgba(255,59,48,0.25); color: var(--overdue-count-text); }
  .parts-dash-header h1 { font-size: calc(20px * var(--font-scale, 1)); letter-spacing: 0.02em; }
  .parts-row {
    display: grid; grid-template-columns: 1fr 1.4fr 130px auto; align-items: center; gap: 14px;
    padding: 12px 10px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12.5px * var(--font-scale, 1));
  }
  .parts-row:last-child { border-bottom: none; }
  .parts-row.parts-overdue { background: linear-gradient(90deg, rgba(255,59,48,0.1), transparent); border-left: 3px solid var(--red); padding-left: 7px; }
  .parts-row.parts-received-row { opacity: 0.55; }
  .parts-vehicle-block .pv-vehicle { font-weight: 700; font-size: calc(13.5px * var(--font-scale, 1)); }
  .parts-vehicle-block .pv-meta { color: var(--muted); font-size: calc(11px * var(--font-scale, 1)); margin-top: 2px; }
  .parts-info-block { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; background: rgba(var(--tint-rgb),0.02); border: 1px solid var(--line-subtle); border-radius: 8px; }
  .parts-info-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pv-tek-parts { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--link-blue); cursor: help; line-height: 1.5; }
  .parts-vendor-chip {
    display: inline-block; background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--link-blue);
    font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
  }
  .parts-vendor-chip.no-vendor { background: transparent; border-style: dashed; color: var(--muted2); }
  .parts-request-badge {
    display: inline-block; background: rgba(244,196,48,0.18); border: 1px solid rgba(244,196,48,0.4); color: #f4c430;
    font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; padding: 3px 9px; border-radius: 10px; cursor: pointer; line-height: 1.5; max-width: 100%;
  }
  .parts-request-badge:hover { background: rgba(244,196,48,0.3); }
  .parts-eta { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(11.5px * var(--font-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .parts-eta-note { font-size: calc(9.5px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
  .parts-eta.eta-overdue { color: var(--red); }
  .parts-eta.eta-today { color: var(--yellow-text); }
  .parts-eta.eta-future { color: var(--link-blue); }
  .parts-eta.eta-none { color: #4b5563; }
  .parts-stage-chip { font-size: calc(9.5px * var(--font-scale, 1)); text-transform: uppercase; color: var(--muted); background: rgba(var(--tint-rgb),0.05); padding: 3px 8px; border-radius: 8px; white-space: nowrap; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
  .parts-actions { display: flex; gap: 6px; align-items: center; }
  .parts-received-btn { font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--tag-border); background: transparent; color: var(--muted); cursor: pointer; }
  .parts-received-btn.is-received { background: rgba(46,139,87,0.2); border-color: var(--green); color: var(--green); }
  .parts-view-btn { background: none; border: none; color: var(--muted); font-size: calc(14px * var(--font-scale, 1)); cursor: pointer; padding: 4px; }
  .parts-view-btn:hover { color: #fff; }
  .parts-dash-empty { text-align: center; padding: 40px 20px; color: var(--muted2); font-size: calc(13px * var(--font-scale, 1)); }
  .usage-table { width: 100%; border-collapse: collapse; font-size: calc(12.5px * var(--font-scale, 1)); }
  .usage-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: calc(11px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.03em; }
  .usage-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-subtle); }
  .usage-table tbody tr:hover { background: rgba(var(--tint-rgb),0.04); }
  .usage-event-row { display: grid; grid-template-columns: 160px 90px 100px 1fr 120px; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12px * var(--font-scale, 1)); align-items: baseline; }
  .usage-event-when { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: calc(11px * var(--font-scale, 1)); }
  .usage-event-kind { color: var(--muted); }
  .usage-event-action { font-weight: 700; }
  .usage-event-actor { color: var(--muted); font-size: calc(11px * var(--font-scale, 1)); text-align: right; }
  /* ---- Phones and tablets --------------------------------------------
     Measured on a 375px phone before this existed: 101 tap targets under
     40px (some at 24px) and 237 pieces of text under 11px. Both are the
     difference between an app someone uses on the floor and one they give
     up on and walk to the desk for. */

  /* Touch, not width — a tablet has a coarse pointer at any size, and a
     finger is the same size on all of them. */
  @media (pointer: coarse) {
    .btn, .menu-dropdown-item, .card-icon-btn, button, select,
    input[type="checkbox"] + label, .tab, .chip-btn {
      min-height: 44px;
    }
    /* These carry explicit heights of their own, so matching weight is needed
       rather than politeness. */
    .res-chip, .alert-chip, .alert-chip-silence, .alert-chip-clear,
    .text-size-quick button, .tag-chip, .col-collapse-btn {
      min-height: 44px !important; min-width: 44px !important;
    }
    /* Number boxes are the fiddliest thing on a phone — a timer set wrong
       because the box was 23px tall is a car that sits too long. */
    input[type="number"], .timer-min-input, .timer-sec-input,
    input[type="time"], input[type="date"], input[type="datetime-local"] {
      min-height: 44px !important; font-size: 16px !important;
    }
    /* Icon-only header buttons are square, so width matters as much. */
    .header-icon-btn, .card-icon-btn, .icon-btn { min-width: 44px; }
    button, .btn { touch-action: manipulation; }   /* kills the 300ms tap delay */
    /* Checkboxes are the worst offenders — they default to about 13px. */
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
    /* Give rows in long lists room for a thumb. */
    .call-row, .inbox-row, .tow-row, .part-row { min-height: 46px; }
  }

  @media (max-width: 820px) {
    /* Nothing under 12px on a phone, however the text scale is set. The
       max() keeps the A+/A- control working — it raises the floor, it
       doesn't pin the size. */
    body { --min-text: 12px; }
    .card-customer, .card-vehicle, .col-title, .stat-label, .res-chip,
    .field-hint, .call-row, .inbox-row, td, th, label, p, span, div {
      font-size: max(var(--min-text), calc(12.5px * var(--font-scale, 1)));
    }
    /* Headings should still outrank body text. */
    h1 { font-size: max(19px, calc(19px * var(--font-scale, 1))); }
    h2 { font-size: max(16px, calc(16px * var(--font-scale, 1))); }

    /* Side-by-side fields don't work at this width. */
    .field-row { flex-direction: column; gap: 8px; }
    .field-row > .field { width: 100%; max-width: none; }

    /* Dialogs should use the screen rather than float in the middle of it. */
    .modal-box {
      width: 100%; max-width: 100%; max-height: 92vh;
      border-radius: 14px 14px 0 0; margin-top: auto;
    }
    .overlay { align-items: flex-end; padding: 0; }
    /* Menu becomes a bottom sheet on a phone, like the other overlays. */
    .menu-dropdown {
      top: auto; bottom: 0; left: 0; right: 0; transform: none;
      width: 100%; max-width: 100%; max-height: 88vh;
      border-radius: 14px 14px 0 0;
    }

    /* The call pop, wrap-up and triage boxes are fixed-width by default. */
    #callPop, #callWrap, #triagePop {
      width: auto; left: 8px; right: 8px; transform: none; max-width: none;
    }

    /* Kanban columns: narrower, so more than one is visible at a time. */
    .column { min-width: 78vw; }

    /* Header buttons wrap instead of squeezing to nothing. */
    .header-actions { flex-wrap: wrap; gap: 6px; }
  }

  /* A phone in landscape has almost no vertical room — let dialogs use it. */
  @media (max-width: 900px) and (orientation: landscape) {
    .modal-box { max-height: 96vh; }
    .menu-dropdown { max-height: 80vh; }
  }


  /* Emergency cars, gathered into one box above the board.
     Scattered across nineteen columns they are easy to miss and, when there
     are several, they make the whole board look like an emergency. Collected
     in one place they are impossible to miss and the board underneath stays
     readable. */
  #emergencyBox {
    margin: 0 0 10px; padding: 9px 12px; border-radius: 11px;
    background: rgba(255,16,83,0.10); border: 1px solid rgba(255,16,83,0.45);
  }
  #emergencyBox.collapsed .em-list { display: none; }
  .em-head { display:flex; align-items:center; gap:9px; cursor:pointer; }
  .em-title { font-weight: 800; color: #ff1053; letter-spacing: 0.04em;
    font-size: calc(12px * var(--font-scale, 1)); text-transform: uppercase; }
  .em-count { background:#ff1053; color:#fff; font-weight:800; border-radius:20px;
    padding:1px 9px; font-size: calc(11.5px * var(--font-scale, 1)); }
  .em-hint { margin-left:auto; color: var(--muted); font-size: calc(11px * var(--font-scale, 1)); }
  .em-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
  .em-item {
    display:flex; align-items:center; gap:8px; background: var(--panel);
    border:1px solid rgba(255,16,83,0.5); border-radius:9px; padding:6px 10px;
    cursor:pointer; min-height:40px;
  }
  .em-item:hover { border-color:#ff1053; }
  .em-veh { font-weight:700; font-size: calc(12.5px * var(--font-scale, 1)); }
  .em-where { color: var(--muted); font-size: calc(11.5px * var(--font-scale, 1)); }
  .em-why { color: var(--yellow); font-size: calc(11.5px * var(--font-scale, 1)); font-style: italic; }
  @media (max-width: 820px) { .em-list { flex-direction: column; } .em-item { width: 100%; } }


  /* Cars that came over from Tekmetric with no VIN. Parts get ordered against
     a VIN, so a missing one is how the wrong part ends up on the wrong car —
     which is expensive and only discovered at the point of fitting it. */
  #vinBox {
    margin: 0 0 10px; padding: 9px 12px; border-radius: 11px;
    background: rgba(244,196,48,0.10); border: 1px solid rgba(244,196,48,0.5);
  }
  #vinBox.collapsed .vin-list { display: none; }
  .vin-head { display:flex; align-items:center; gap:9px; cursor:pointer; flex-wrap:wrap; }
  .vin-title { font-weight:800; color: var(--yellow); letter-spacing:0.04em;
    font-size: calc(12px * var(--font-scale, 1)); text-transform: uppercase; }
  .vin-count { background: var(--yellow); color:#1a1a1a; font-weight:800; border-radius:20px;
    padding:1px 9px; font-size: calc(11.5px * var(--font-scale, 1)); }
  .vin-why { color: var(--muted); font-size: calc(11.5px * var(--font-scale, 1)); flex-basis:100%; }
  .vin-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
  .vin-item { display:flex; align-items:center; gap:8px; background: var(--panel);
    border:1px solid rgba(244,196,48,0.55); border-radius:9px; padding:6px 10px;
    cursor:pointer; min-height:40px; }
  .vin-item:hover { border-color: var(--yellow); }
  .card-vin-flag { display:inline-block; background: rgba(244,196,48,0.22); color: var(--yellow);
    border:1px solid rgba(244,196,48,0.6); border-radius:5px; font-weight:800;
    font-size: calc(9.5px * var(--font-scale, 1)); padding:1px 5px; letter-spacing:0.04em; }
  @media (max-width: 820px) { .vin-list { flex-direction: column; } .vin-item { width:100%; } }


  /* Three or four separate bars above the board is the same crowding problem
     the maintenance screen had. When more than one is live they collapse to a
     row of counts and only the one being looked at opens. */
  #alertStrip { display:flex; gap:7px; flex-wrap:wrap; margin: 0 0 10px; }
  .as-chip { display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:20px;
    cursor:pointer; font-weight:800; min-height:40px;
    font-size: calc(12px * var(--font-scale, 1)); border:1px solid transparent; }
  .as-chip.on { outline:2px solid currentColor; outline-offset:-2px; }
  .as-em { background: rgba(255,16,83,0.14); color:#ff1053; border-color: rgba(255,16,83,0.5); }
  .as-vin { background: rgba(244,196,48,0.14); color: var(--yellow); border-color: rgba(244,196,48,0.5); }
  .as-rev { background: rgba(74,143,214,0.14); color: var(--blue); border-color: rgba(74,143,214,0.5); }

  /* Waiting on a review — only shown to the people who can actually do one. */
  #reviewBox { margin: 0 0 10px; padding: 9px 12px; border-radius: 11px;
    background: rgba(74,143,214,0.09); border: 1px solid rgba(74,143,214,0.45); }
  .rev-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .rev-title { font-weight:800; color: var(--blue); text-transform:uppercase;
    letter-spacing:0.04em; font-size: calc(12px * var(--font-scale, 1)); }
  .rev-count { background: var(--blue); color:#fff; font-weight:800; border-radius:20px;
    padding:1px 9px; font-size: calc(11.5px * var(--font-scale, 1)); }
  .rev-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
  .rev-item { display:flex; align-items:center; gap:8px; background: var(--panel);
    border:1px solid rgba(74,143,214,0.5); border-radius:9px; padding:6px 10px;
    cursor:pointer; min-height:40px; font-size: calc(12.5px * var(--font-scale, 1)); }
  @media (max-width: 820px) { .rev-list { flex-direction: column; } .rev-item { width:100%; } }


  .tc-filter { font-size: calc(11.5px * var(--font-scale, 1)); padding: 5px 12px; }
  .tc-filter.on { background: var(--blue); color: #fff; border-color: var(--blue); }
  .tech-comment-row.tc-unread { border-left: 3px solid var(--blue); padding-left: 9px; }
  .tc-new-dot { display:inline-block; background: var(--blue); color:#fff; font-weight:800;
    font-size: calc(9.5px * var(--font-scale, 1)); border-radius:20px; padding:1px 7px; margin-left:6px; }
  .tc-more { color: var(--link-blue); cursor: pointer; font-weight:700;
    font-size: calc(11.5px * var(--font-scale, 1)); }
  .tc-pri { font-weight:800; font-size: calc(9.5px * var(--font-scale,1)); border-radius:5px;
    padding:1px 6px; margin-left:6px; }
  .tc-pri.rush { background: rgba(255,107,53,0.2); color: var(--orange-text); }
  .tc-pri.emergency { background: rgba(255,16,83,0.2); color: #ff1053; }

  @media (max-width: 700px) { .usage-event-row { grid-template-columns: 1fr; gap: 2px; } .usage-event-actor { text-align: left; } }

  .tow-row {
    display: grid; grid-template-columns: 1fr 110px 130px 1fr 90px auto; align-items: center; gap: 12px;
    padding: 12px 10px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12.5px * var(--font-scale, 1));
  }
  .tow-row:last-child { border-bottom: none; }
  .tow-row.tow-needs-intake { background: linear-gradient(90deg, rgba(74,143,214,0.12), transparent); border-left: 3px solid var(--blue); padding-left: 7px; }
  .tow-row.tow-overdue { background: linear-gradient(90deg, rgba(255,107,53,0.12), transparent); border-left: 3px solid var(--orange); padding-left: 7px; }
  .tow-company-chip {
    display: inline-block; background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--link-blue);
    font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
  }
  .tow-company-chip.no-company { background: transparent; border-style: dashed; color: var(--muted2); }
  .tow-status { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(12px * var(--font-scale, 1)); }
  .tow-status.tow-status-arrived { color: var(--blue); }
  .tow-status.tow-status-overdue { color: var(--orange-text); }
  .tow-status.tow-status-upcoming { color: var(--link-blue); }
  .tow-status.tow-status-none { color: #4b5563; }
  .tow-condition { color: var(--muted); font-size: calc(11px * var(--font-scale, 1)); }
  .tow-notified { font-size: calc(15px * var(--font-scale, 1)); }
  .tow-actions { display: flex; gap: 6px; align-items: center; }
  .tow-arrive-btn, .tow-ack-btn { font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--tag-border); background: transparent; color: var(--muted); cursor: pointer; }
  .tow-arrive-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
  .tow-ack-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
  .tow-view-btn { background: none; border: none; color: var(--muted); font-size: calc(14px * var(--font-scale, 1)); cursor: pointer; padding: 4px; }
  .tow-view-btn:hover { color: #fff; }

  .chat-msg { margin-bottom: 10px; padding: 6px 8px; border-radius: 6px; border-left: 3px solid transparent; }
  .chat-msg:last-child { margin-bottom: 0; }
  .chat-msg-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
  .chat-msg-author { font-weight: 700; font-size: calc(11.5px * var(--font-scale, 1)); }
  .chat-msg-time { font-size: calc(10px * var(--font-scale, 1)); color: var(--muted2); }
  .chat-msg-text { font-size: calc(12.5px * var(--font-scale, 1)); color: var(--paper); line-height: 1.4; }
  .chat-msg.is-request .chat-msg-text { color: #f4c430; font-style: italic; }
  .chat-msg.priority-priority { border-left-color: #f4c430; background: rgba(244,196,48,0.06); }
  .chat-msg.priority-emergency { border-left-color: var(--red); background: rgba(255,59,48,0.1); }
  .chat-msg-priority-tag { font-size: calc(8.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 8px; }
  .chat-msg.priority-priority .chat-msg-priority-tag { background: rgba(244,196,48,0.2); color: #f4c430; }
  .chat-msg.priority-emergency .chat-msg-priority-tag { background: rgba(255,59,48,0.25); color: var(--red); }
  .chat-empty { color: var(--muted2); font-size: calc(12px * var(--font-scale, 1)); text-align: center; padding: 14px 0; }

  @keyframes chatFlashSlow { 0%, 59% { background: var(--panel2); border-color: var(--line); } 60%, 100% { background: rgba(46,139,87,0.35); border-color: var(--green); } }
  @keyframes chatFlashMed { 0%, 49% { background: var(--panel2); border-color: var(--line); } 50%, 100% { background: rgba(244,196,48,0.4); border-color: var(--yellow); } }
  @keyframes chatFlashFast { 0%, 49% { background: var(--panel2); border-color: var(--line); } 50%, 100% { background: rgba(255,59,48,0.8); border-color: var(--red); } }
  #teamChatBtn.chat-unread-routine { animation: chatFlashSlow 1.8s steps(1) infinite; }
  #teamChatBtn.chat-unread-priority { animation: chatFlashMed 0.9s steps(1) infinite; }
  #teamChatBtn.chat-unread-emergency { animation: chatFlashFast 0.4s steps(1) infinite; }

  .part-req-row { display: grid; grid-template-columns: 1fr 90px 100px auto; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: calc(12px * var(--font-scale, 1)); }
  .part-req-row:last-child { border-bottom: none; }
  .part-req-name { font-weight: 600; }
  .part-req-meta { color: var(--muted); font-size: calc(10.5px * var(--font-scale, 1)); }
  .part-req-status-select { font-size: calc(11px * var(--font-scale, 1)); padding: 4px 6px; border-radius: 5px; }

  .tool-row { display: grid; grid-template-columns: 1.4fr 110px 1fr 90px auto; align-items: center; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--line-subtle); font-size: calc(12.5px * var(--font-scale, 1)); }
  .tool-row:last-child { border-bottom: none; }
  .tool-row.tool-checked-out { background: linear-gradient(90deg, rgba(168,85,247,0.10), transparent); border-left: 3px solid #a855f7; padding-left: 7px; }
  .tool-row.tool-damaged { background: linear-gradient(90deg, rgba(255,59,48,0.12), transparent); border-left: 3px solid var(--red); padding-left: 7px; }
  .tool-row.tool-pending { background: linear-gradient(90deg, rgba(244,196,48,0.10), transparent); border-left: 3px solid #f4c430; padding-left: 7px; }
  .tool-row.tool-ready { background: linear-gradient(90deg, rgba(74,143,214,0.10), transparent); border-left: 3px solid #4a8fd6; padding-left: 7px; }
  .tool-pending-line { font-size: calc(10.5px * var(--font-scale, 1)); color: #f4c430; margin-top: 3px; }
  /* What is actually wrong with a damaged tool. Red enough to read as a
     warning, quiet enough not to shout over the tools that are fine. */
  .tool-damage-line {
    font-size: calc(11.5px * var(--font-scale, 1)); color: var(--red);
    margin-top: 3px; line-height: 1.35;
  }
  .tool-damage-notes { color: var(--ink-soft); margin-top: 2px; }
  .tool-damage-nonotes { font-style: italic; opacity: 0.85; }
  .tool-damage-thumb {
    width: 3.2em; height: 3.2em; object-fit: cover; border-radius: 6px;
    margin-top: 4px; cursor: pointer; border: 1px solid var(--red);
  }
  .tool-warranty-line { font-size: calc(11.5px * var(--font-scale, 1)); margin-top: 4px; }
  .tool-warranty-line.in-warranty { color: var(--green); font-weight: 700; }
  .tool-warranty-line.out-warranty { color: var(--ink-soft); }
  .tool-warranty-line.unknown { color: var(--ink-soft); font-style: italic; opacity: 0.85; }
  .tool-ready-line { font-size: calc(10.5px * var(--font-scale, 1)); color: #4a8fd6; margin-top: 3px; font-weight: 600; }
  .tool-name { font-weight: 700; }
  .tool-meta { color: var(--muted); font-size: calc(10.5px * var(--font-scale, 1)); margin-top: 1px; }
  .tool-status-badge { font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
  .tool-status-badge.status-available { background: rgba(46,139,87,0.18); color: var(--green); }
  .tool-status-badge.status-checked_out { background: rgba(168,85,247,0.18); color: #a855f7; }
  .tool-status-badge.status-pending_pickup { background: rgba(244,196,48,0.18); color: #f4c430; }
  .tool-status-badge.status-ready_for_pickup { background: rgba(74,143,214,0.18); color: #4a8fd6; }
  .tool-status-badge.status-damaged { background: rgba(255,59,48,0.18); color: var(--red); }
  .tool-cost { font-family: 'JetBrains Mono', monospace; color: #cbd5e1; }
  .tool-actions { display: flex; gap: 6px; align-items: center; }
  .tool-action-btn { font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--tag-border); background: transparent; color: var(--muted); cursor: pointer; }
  .tool-action-btn:hover { background: #a855f7; border-color: #a855f7; color: #fff; }
  .tool-action-btn.danger:hover { background: var(--red); border-color: var(--red); }
  .tool-qr-btn { background: none; border: none; color: var(--muted); font-size: calc(14px * var(--font-scale, 1)); cursor: pointer; padding: 4px; }
  .tool-qr-btn:hover { color: #fff; }
  .tool-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; cursor: pointer; flex: 0 0 auto; }
  .tool-thumb-empty { display: flex; align-items: center; justify-content: center; background: rgba(var(--tint-rgb),0.05); border: 1px dashed var(--tag-border); font-size: calc(16px * var(--font-scale, 1)); opacity: 0.6; }
  .tool-thumb-empty:hover { opacity: 1; background: rgba(var(--tint-rgb),0.1); }
  .tool-waiting { font-size: calc(10.5px * var(--font-scale, 1)); color: #f4c430; margin-top: 3px; }

  /* RO detail — the car's conversation */
  .rod-msg { padding: 6px 8px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
  .rod-msg:last-of-type { border-bottom: none; }
  .rod-msg.team { border-left-color: #a855f7; }
  .rod-msg.parts, .rod-msg.part { border-left-color: #4a8fd6; }
  .rod-msg.urgent { border-left-color: var(--red); background: rgba(255,59,48,0.06); }
  .rod-msg-tag { font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; margin-left: 6px; background: rgba(74,143,214,0.18); color: #4a8fd6; }
  .rod-msg-tag.urgent { background: rgba(255,59,48,0.18); color: var(--red); }

  /* Aging work */
  .card-chip.neglected { background: rgba(255,59,48,0.22); color: var(--red); font-weight: 800; }
  .aging-summary { font-size: calc(13px * var(--font-scale, 1)); color: var(--paper); margin: 10px 0; }
  .aging-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: calc(12px * var(--font-scale, 1)); cursor: pointer; border-left: 3px solid transparent; }
  .aging-row:hover { background: rgba(var(--tint-rgb),0.06); }
  .aging-row.sev1 { border-left-color: #f4c430; }
  .aging-row.sev2 { border-left-color: #f97316; }
  .aging-row.sev3 { border-left-color: var(--red); }
  .aging-days { font-family: 'JetBrains Mono', monospace; font-weight: 800; min-width: 3.2em; }
  .aging-row.sev1 .aging-days { color: #f4c430; }
  .aging-row.sev2 .aging-days { color: #f97316; }
  .aging-row.sev3 .aging-days { color: var(--red); }
  .aging-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aging-stage, .aging-tech, .aging-onboard { color: var(--ink-soft); white-space: nowrap; font-size: calc(11px * var(--font-scale, 1)); }
  .aging-onboard { min-width: 8em; text-align: right; }
  .aging-undated { margin-top: 10px; font-size: calc(11.5px * var(--font-scale, 1)); color: var(--ink-soft); font-style: italic; }

  /* RO detail — tools out on this car */
  .rod-tool { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: calc(12px * var(--font-scale, 1)); cursor: pointer; }
  .rod-tool:last-child { border-bottom: none; }
  .rod-tool:hover .rod-tool-name { text-decoration: underline; }
  .rod-tool-name { font-weight: 700; }
  .rod-tool-who { color: var(--ink-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rod-tool-state { color: var(--muted); white-space: nowrap; font-size: calc(10.5px * var(--font-scale, 1)); }
  .rod-tool-state.pending { color: #f4c430; }
  .rod-tool-state.broke { color: var(--red); font-weight: 700; }

  /* Manager Board — one item's history */
  .mgmt-history { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
  .mgmt-history-head { font-size: calc(11px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
  .mgmt-history-count { background: rgba(var(--tint-rgb),0.12); border-radius: 8px; padding: 1px 6px; margin-left: 4px; }
  .mgmt-history-none { font-size: calc(11.5px * var(--font-scale, 1)); color: var(--ink-soft); font-style: italic; }
  .mgmt-history-row { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: calc(11.5px * var(--font-scale, 1)); border-bottom: 1px solid var(--line); }
  .mgmt-history-row:last-child { border-bottom: none; }
  .mgmt-history-when { color: var(--ink-soft); white-space: nowrap; flex: 0 0 auto; min-width: 5.5em; }
  .mgmt-history-what { flex: 1; min-width: 0; color: var(--paper); }
  .mgmt-history-who { color: var(--ink-soft); white-space: nowrap; flex: 0 0 auto; }
  .mgmt-history-prev { color: var(--ink-soft); font-style: italic; margin-top: 2px; }
  .mgmt-hist-reopened .mgmt-history-what strong { color: #f4c430; }
  .mgmt-hist-resolved .mgmt-history-what strong { color: var(--green); }

  /* A5 — manager review of an audit finding */
  .a5-strip { flex-basis: 100%; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: calc(11.5px * var(--font-scale, 1)); }
  .a5-note { color: var(--ink-soft); }
  .a5-badge { font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
  .a5-badge.pending { background: rgba(244,196,48,0.18); color: #f4c430; }
  .a5-badge.upheld { background: rgba(255,59,48,0.15); color: var(--red); }
  .a5-badge.overturned { background: rgba(46,139,87,0.18); color: var(--green); }
  .a5-form { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 260px; }
  .a5-form input { flex: 1; min-width: 140px; }

  /* Manager Board — search results, card-face car, duplicate warning */
  .mgmt-row .r-car { display: block; color: var(--muted); font-size: calc(11px * var(--font-scale, 1)); margin-top: 2px; font-weight: 400; }
  .mgmt-card2-car { color: var(--muted); font-size: calc(11px * var(--font-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15em; }
  .mgmt-dup-warn { border: 1px solid #f4c430; background: rgba(244,196,48,0.09); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: calc(12px * var(--font-scale, 1)); }
  .mgmt-dup-head { font-weight: 800; color: #f4c430; margin-bottom: 6px; }
  .mgmt-dup-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
  .mgmt-dup-why { font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 8px; background: rgba(244,196,48,0.2); color: #f4c430; white-space: nowrap; }
  .mgmt-dup-status { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
  .mgmt-dup-foot { color: var(--ink-soft); font-style: italic; margin-top: 6px; font-size: calc(11px * var(--font-scale, 1)); }

  /* Weekly audit review */
  .wr-h { font-size: calc(12.5px * var(--font-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 18px 0 8px; }
  .wr-evidence { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-size: calc(12px * var(--font-scale, 1)); }
  .wr-evidence.thin { border-color: #f4c430; background: rgba(244,196,48,0.08); }
  .wr-evidence-head { font-weight: 800; margin-bottom: 4px; }
  .wr-evidence.thin .wr-evidence-head { color: #f4c430; }
  .wr-evidence-warn { color: var(--ink-soft); margin-top: 6px; font-style: italic; }
  .wr-generated { color: var(--ink-soft); margin-top: 6px; font-size: calc(11px * var(--font-scale, 1)); }
  .wr-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: calc(12px * var(--font-scale, 1)); }
  .wr-card.mandatory { border-color: var(--red); }
  .wr-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
  .wr-tag, .wr-who { font-weight: 800; color: var(--paper); }
  .wr-count { color: var(--muted); }
  .wr-sev { font-size: calc(10px * var(--font-scale, 1)); font-weight: 800; padding: 2px 6px; border-radius: 8px; }
  .wr-s1 { background: rgba(255,59,48,0.18); color: var(--red); }
  .wr-s2 { background: rgba(244,196,48,0.18); color: #f4c430; }
  .wr-s3 { background: rgba(var(--tint-rgb),0.12); color: var(--muted); }
  .wr-kind { font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 10px; background: rgba(var(--tint-rgb),0.12); color: var(--muted); }
  .wr-kind.mandatory { background: rgba(255,59,48,0.18); color: var(--red); }
  .wr-rule, .wr-sub { color: var(--ink-soft); margin-top: 2px; }
  .wr-ros { font-family: 'JetBrains Mono', monospace; font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); margin-top: 4px; word-break: break-word; }
  .wr-none { color: var(--ink-soft); font-style: italic; font-size: calc(12px * var(--font-scale, 1)); }
  .wr-task { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: calc(12px * var(--font-scale, 1)); }
  .wr-task:last-child { border-bottom: none; }
  .wr-task-who { margin-left: auto; color: var(--ink-soft); font-size: calc(11px * var(--font-scale, 1)); white-space: nowrap; }
  .wr-draft-note { font-size: calc(11.5px * var(--font-scale, 1)); color: var(--ink-soft); font-style: italic; margin-bottom: 8px; }
  .wr-draft { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: calc(12px * var(--font-scale, 1)); }
  .wr-draft summary { cursor: pointer; font-weight: 700; }
  .wr-source { font-size: calc(9.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 8px; margin-left: 6px; background: rgba(var(--tint-rgb),0.12); color: var(--muted); }
  .wr-source.ai { background: rgba(88,86,214,0.2); color: #8b89ff; }
  .wr-draft-body { white-space: pre-wrap; font-family: inherit; color: var(--paper); margin: 8px 0; line-height: 1.45; }
  .wr-draft-err { color: var(--ink-soft); font-style: italic; margin-bottom: 6px; }
  .wr-ai-off { font-size: calc(11.5px * var(--font-scale, 1)); color: var(--ink-soft); font-style: italic; margin-top: 8px; }
  .tool-action-btn.requested { background: rgba(244,196,48,0.18); border-color: #f4c430; color: #f4c430; }

  /* Tool return check — the photo comparison and its finding.
     Amber, not red: a proposal is not a verdict, and it should not read on the
     row like the tool is already known to be broken. */
  .tool-return-line { font-size: calc(11.5px * var(--font-scale, 1)); margin-top: 4px; line-height: 1.35; color: #f4c430; }
  .tool-return-line.decided-charge { color: var(--red); }
  .tool-return-line.decided-clear { color: var(--green); }
  .tool-return-line.review-only { color: var(--ink-soft); }
  .tool-return-reason { color: var(--ink-soft); margin-top: 2px; }
  .tool-return-thumbs { display: flex; gap: 5px; margin-top: 4px; }
  .tool-return-thumbs img { width: 3.2em; height: 3.2em; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid #f4c430; }
  .tool-action-btn.review { background: rgba(244,196,48,0.18); border-color: #f4c430; color: #f4c430; }
  .tool-action-btn.review:hover { background: #f4c430; border-color: #f4c430; color: #1a1a1a; }

  .tool-return-strip { border: 1px solid #f4c430; background: rgba(244,196,48,0.09); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
  .tool-return-strip h4 { margin: 0 0 6px; font-size: calc(12px * var(--font-scale, 1)); color: #f4c430; text-transform: uppercase; letter-spacing: 0.04em; }
  .tool-return-strip-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: calc(12px * var(--font-scale, 1)); color: var(--paper); }
  .tool-return-strip-row .who { color: var(--ink-soft); }
  .tool-return-strip-row button { margin-left: auto; }
  .tool-return-strip-note { font-size: calc(11px * var(--font-scale, 1)); color: var(--ink-soft); margin-top: 6px; font-style: italic; }

  .trc-sub { font-size: calc(12px * var(--font-scale, 1)); color: var(--muted); margin-bottom: 12px; }
  .trc-photos { display: flex; gap: 12px; }
  .trc-photo-col { flex: 1; min-width: 0; }
  .trc-photo-label { font-size: calc(10.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
  .trc-photo { width: 100%; height: 260px; object-fit: contain; background: rgba(var(--tint-rgb),0.05); border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; }
  .trc-photo-when { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--ink-soft); margin-top: 3px; }
  .trc-verdict { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: calc(12px * var(--font-scale, 1)); }
  .trc-verdict-head { font-weight: 800; margin-bottom: 4px; }
  .trc-verdict.propose { border-color: #f4c430; }
  .trc-verdict.propose .trc-verdict-head { color: #f4c430; }
  .trc-verdict.review .trc-verdict-head { color: var(--ink-soft); }
  .trc-verdict.none { border-color: var(--green); }
  .trc-verdict.none .trc-verdict-head { color: var(--green); }
  .trc-verdict ul { margin: 6px 0 0 18px; padding: 0; color: var(--paper); }
  .trc-verdict li { margin-bottom: 2px; }
  .trc-caveat { color: var(--ink-soft); margin-top: 8px; font-style: italic; }
  .trc-form-note { font-size: calc(11.5px * var(--font-scale, 1)); color: var(--ink-soft); margin: 12px 0 6px; }
  .trc-hint { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--ink-soft); margin-top: 3px; }
  .trc-decided { margin-top: 12px; border-radius: 8px; padding: 10px 12px; font-size: calc(12px * var(--font-scale, 1)); border: 1px solid var(--line); }
  .trc-decided.charge { border-color: var(--red); }
  .trc-decided.dismiss { border-color: var(--green); }

  .automation-step-row { display: grid; grid-template-columns: 24px 1fr 90px 1fr 1fr auto; align-items: center; gap: 8px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
  .automation-step-row:last-child { border-bottom: none; }
  .automation-step-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--link-blue); font-size: calc(12px * var(--font-scale, 1)); }
  .automation-step-row select, .automation-step-row input { font-size: calc(11.5px * var(--font-scale, 1)); padding: 5px 6px; border-radius: 5px; }
  .automation-remove-btn { background: none; border: none; color: var(--red); font-size: calc(15px * var(--font-scale, 1)); cursor: pointer; padding: 4px; }
  .stage-chip { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 5px 10px 5px 9px; }
  .stage-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .stage-chip-label { font-size: calc(11px * var(--font-scale, 1)); color: var(--muted); white-space: nowrap; }
  .stage-chip-count { font-family: 'JetBrains Mono', monospace; font-size: calc(11.5px * var(--font-scale, 1)); font-weight: 700; color: var(--paper); background: var(--steel); padding: 1px 7px; border-radius: 10px; min-width: 18px; text-align: center; }

  header.hazard { animation: headerHazard 1.4s ease-in-out infinite; position: relative; }
  @keyframes headerHazard { 0%,100% { box-shadow: inset 0 0 0 0 rgba(255,59,48,0); } 50% { box-shadow: inset 0 0 30px 0 rgba(255,59,48,0.25); } }
  /* A bold pulsing red glow line under the header while anything is alerting —
     impossible to miss even out of the corner of your eye. */
  header.hazard::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: #ff1a1a; box-shadow: 0 0 12px 2px rgba(255,26,26,0.9), 0 0 24px 4px rgba(255,26,26,0.5);
    animation: headerRedLine 1s ease-in-out infinite; z-index: 5;
  }
  @keyframes headerRedLine { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

  .timer-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d8dce2; flex-wrap: wrap; }
  .timer-set { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .timer-set input { width: 38px; font-size: calc(11px * var(--font-scale, 1)); padding: 3px 4px; border-radius: 5px; border: 1px solid #d8dce2; }
  .timer-display { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(13px * var(--font-scale, 1)); }
  .timer-display.overdue { color: var(--pink); }
  /* Automation countdown: same shape as a manual timer so it reads as one
     concept, tinted differently so it is clear the stage is driving it. */
  .timer-display.auto-timer { color: var(--link-blue); font-size: calc(12px * var(--font-scale, 1)); }
  .timer-display.auto-timer.overdue { color: var(--pink); }
  .card-icon-btn { background: none; border: 1px solid #d8dce2; color: var(--ink-soft); border-radius: 5px; padding: 3px 6px; font-size: calc(10px * var(--font-scale, 1)); cursor: pointer; }
  .card-icon-btn.active { background: var(--yellow); border-color: var(--yellow); color: var(--on-accent); }
  .card-icon-btn.danger { border-color: var(--pink); color: var(--pink); }
  .alert-row { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
  .empty-hint { font-size: calc(12px * var(--font-scale, 1)); color: var(--muted2); padding: 10px 4px; font-style: italic; }
  .add-stage-form { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
  /* Redesigned Manage Stages — each stage is a clean card, not a flat row. */
  .stage-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; background: rgba(var(--tint-rgb),0.02); transition: border-color 0.15s; }
  .stage-card:hover { border-color: var(--line-strong, var(--muted2)); }
  .stage-card-top { display: flex; align-items: center; gap: 9px; }
  .stage-card-top .col-color-input { width: 24px; height: 24px; }
  .stage-card-name { flex: 1; min-width: 0; background: var(--steel); border: 1px solid var(--line); color: var(--paper); font-family: 'Oswald', sans-serif; font-size: calc(13.5px * var(--font-scale, 1)); font-weight: 600; padding: 6px 9px; border-radius: 7px; }
  .stage-card-num { font-size: calc(11px * var(--font-scale, 1)); color: var(--muted2); font-weight: 700; min-width: 20px; text-align: center; }
  .stage-card-controls { display: flex; gap: 4px; align-items: center; }
  .stage-card-controls .col-btn { border: 1px solid var(--line); border-radius: 6px; width: 28px; height: 28px; align-items: center; justify-content: center; }
  .stage-card-controls .col-btn:hover:not(:disabled) { background: rgba(var(--tint-rgb),0.08); color: var(--paper); }
  .stage-card-controls .col-btn:disabled { opacity: 0.3; cursor: default; }
  .stage-card-public { display: flex; align-items: center; gap: 8px; padding-left: 33px; }
  .stage-card-public label { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; }
  .stage-card-public input { flex: 1; min-width: 0; background: var(--steel); border: 1px solid var(--line); color: var(--paper); font-size: calc(11.5px * var(--font-scale, 1)); padding: 5px 8px; border-radius: 6px; }
  .stage-card-count { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted2); padding-left: 33px; }
  .add-stage-form input[type=text] { flex: 1; background: var(--steel); border: 1px solid var(--line); color: var(--paper); padding: 7px 9px; border-radius: 7px; font-size: calc(12.5px * var(--font-scale, 1)); }
  .add-stage-form input[type=color] { width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; }

  /* --- modal --- */
  .overlay { position: fixed; inset: 0; background: rgba(10,11,13,0.65); display: none; align-items: center; justify-content: center; z-index: 100; }

  /* Right-side slide-over panel (like a detail drawer). When #jobOverlay carries
     .slide-over, its box docks to the right edge as a tall panel that slides in,
     instead of a centered modal. Clicking a card opens this. */
  #jobOverlay.slide-over { align-items: stretch; justify-content: flex-end; }
  /* Scales with the viewport rather than being the same strip on a 27-inch
     monitor and a laptop. The mobile rule at the bottom (100vw) still wins. */
  #jobOverlay.slide-over .modal-box {
    width: clamp(420px, 40vw, 720px);
  }
  #jobOverlay.slide-over .modal-box {
    width: 480px; max-width: 94vw; height: 100vh; max-height: 100vh;
    border-radius: 0; margin: 0; overflow-y: auto;
    animation: slideOverIn 0.22s ease-out;
    border-left: 3px solid var(--accent, #ff6b35);
  }
  @keyframes slideOverIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @media (max-width: 640px) {
    /* Scales with the viewport rather than being the same strip on a 27-inch
     monitor and a laptop. The mobile rule at the bottom (100vw) still wins. */
  #jobOverlay.slide-over .modal-box {
    width: clamp(420px, 40vw, 720px);
  }
  #jobOverlay.slide-over .modal-box { width: 100vw; max-width: 100vw; border-left: none; }
  }
  /* --- RO detail panel -------------------------------------------------
     Deliberately light against the dark board: this is the screen read on a
     shop floor in daylight, where the dark theme that suits a wall-mounted TV
     in a bay is hardest to read. Scoped to .ro-detail so it changes nothing
     else — this is not the start of a light theme for the whole app.
     Read-first: facts, not fields. Editing is a thing you choose. */
  #jobOverlay.slide-over .modal-box:has(.ro-detail:not([style*="display:none"])) {
    background: #fff; color: #1b1f24; padding: 0;
  }
  .ro-detail { color: #1b1f24; font-size: calc(13px * var(--font-scale,1)); }
  .ro-detail .rod-tabs {
    display: flex; gap: 2px; border-bottom: 1px solid #e3e6ea;
    padding: 10px 14px 0; position: sticky; top: 0; background: #fff; z-index: 2;
  }
  .ro-detail .rod-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: #6b7280; font-size: calc(12px * var(--font-scale,1)); font-weight: 600;
    padding: 7px 11px; cursor: pointer; white-space: nowrap;
  }
  .ro-detail .rod-tab:hover { color: #1b1f24; }
  .ro-detail .rod-tab.is-active { color: #1b1f24; border-bottom-color: #6d5ae6; }
  .ro-detail .rod-body { padding: 0 16px 20px; }
  .ro-detail .rod-panel { display: none; }
  .ro-detail .rod-panel.is-active { display: block; }

  /* The customer header block — the lavender bar in the target. */
  .ro-detail .rod-head { background: #efeafc; border-radius: 10px; padding: 11px 13px; margin: 14px 0 12px; }
  .ro-detail .rod-ro { font-size: calc(12px * var(--font-scale,1)); color: #6b5bd0; font-weight: 700; }
  .ro-detail .rod-customer { font-size: calc(17px * var(--font-scale,1)); font-weight: 700; margin-top: 1px; }
  .ro-detail .rod-vehicle { font-size: calc(12px * var(--font-scale,1)); color: #5a5f6a; margin-top: 2px; }

  /* One fact per row: small icon, grey label, bold value. */
  .ro-detail .rod-row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 2px; border-bottom: 1px solid #f1f3f5; }
  .ro-detail .rod-row:last-child { border-bottom: none; }
  /* The icon box was a fixed 15px with flex-shrink:0, holding an emoji that
     renders at roughly 1.2x the font size. The glyph was wider than its own
     box, could not shrink it, and overflowed right through the 9px gap and
     into the label — worse on platforms with a large emoji font, and worse
     again at every --font-scale step above 100%, because the box stayed 15px
     while the text around it grew. Sized in em so it scales with the text, and
     with its own font-size so it is not inheriting one the box was never built
     for. overflow:hidden is a backstop: a clipped icon beats an icon sitting
     on top of the label. */
  .ro-detail .rod-ico {
    width: 1.5em; min-width: 1.5em; flex-shrink: 0;
    font-size: calc(13px * var(--font-scale, 1));
    line-height: 1.35; text-align: center; overflow: hidden;
    opacity: 0.65;
  }
  /* min-width with flex-shrink:0 could not give way inside a panel that also
     could not grow, so on a narrow screen the label pushed the value off. It
     can shrink now; the min-width is a preference, not a floor. */
  .ro-detail .rod-label { color: #6b7280; min-width: 96px; flex: 0 1 auto; }
  .ro-detail .rod-value { font-weight: 700; flex: 1; min-width: 0; word-break: break-word; }
  /* A value the shop does not have is said plainly, never left blank or made up. */
  .ro-detail .rod-missing { font-weight: 500; color: #9aa1ab; font-style: italic; }

  .ro-detail .rod-section { font-weight: 800; margin: 18px 0 8px; font-size: calc(13px * var(--font-scale,1)); }
  .ro-detail .rod-split { display: flex; gap: 14px; margin: 10px 0; }
  .ro-detail .rod-split > div { flex: 1; min-width: 0; }
  .ro-detail .rod-cap { color: #6b7280; font-size: calc(10.5px * var(--font-scale,1)); text-transform: uppercase; letter-spacing: 0.4px; }

  /* Jobs as separate cards, each with a progress bar and a status chip. */
  .ro-detail .rod-job { border: 1px solid #e3e6ea; border-radius: 9px; padding: 10px 11px; margin-bottom: 9px; }
  .ro-detail .rod-job-top { display: flex; align-items: center; gap: 8px; }
  .ro-detail .rod-job-name { font-weight: 700; flex: 1; min-width: 0; }
  .ro-detail .rod-chip { font-size: calc(10.5px * var(--font-scale,1)); font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
  .ro-detail .rod-chip.ok { background: #dcf5e6; color: #1c7a45; }
  .ro-detail .rod-chip.wait { background: #fdf0d5; color: #8a6100; }
  .ro-detail .rod-chip.grey { background: #eef0f3; color: #5a5f6a; }
  .ro-detail .rod-bar { height: 5px; background: #eef0f3; border-radius: 4px; margin-top: 8px; overflow: hidden; }
  .ro-detail .rod-bar > i { display: block; height: 100%; background: #6d5ae6; border-radius: 4px; }
  .ro-detail .rod-job-meta { color: #6b7280; font-size: calc(11px * var(--font-scale,1)); margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }

  /* Notes: author, timestamp, and a box to add one. */
  .ro-detail .rod-note { border: 1px solid #e3e6ea; border-radius: 9px; padding: 9px 11px; margin-bottom: 8px; }
  .ro-detail .rod-note-who { font-weight: 700; }
  .ro-detail .rod-note-when { color: #9aa1ab; font-size: calc(11px * var(--font-scale,1)); }
  .ro-detail .rod-note-text { margin-top: 4px; white-space: pre-wrap; }
  .ro-detail textarea.rod-input {
    width: 100%; border: 1px solid #d7dbe0; border-radius: 8px; padding: 9px 10px;
    background: #fff; color: #1b1f24; font: inherit; resize: vertical; min-height: 58px;
  }
  .ro-detail .rod-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
  .ro-detail .rod-btn {
    border: 1px solid #d7dbe0; background: #fff; color: #1b1f24; border-radius: 8px;
    padding: 7px 13px; font-weight: 600; cursor: pointer; font-size: calc(12px * var(--font-scale,1));
  }
  .ro-detail .rod-btn:hover { background: #f5f6f8; }
  .ro-detail .rod-btn.primary { background: #6d5ae6; border-color: #6d5ae6; color: #fff; }
  .ro-detail .rod-btn.primary:hover { background: #5d4bd6; }
  .ro-detail .rod-empty { color: #9aa1ab; padding: 14px 2px; }

  .overlay.open { display: flex; }
  .modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; width: 480px; max-width: 92vw; max-height: 95vh; overflow: auto; resize: both; min-width: 320px; min-height: 200px; position: relative; }

  /* Full-page mode (Manager Board, Parts, Maintenance). These open like their
     own page — as in Tekmetric — rather than a dialog floating over the board.
     The backdrop is opaque and covers everything; the box fills the screen with
     no card chrome, and the board/header behind it are hidden while it's up. */
  .overlay.page-mode {
    background: var(--bg); align-items: stretch; justify-content: stretch; padding: 0; z-index: 90;
    /* The structural half of the pages work.
       z-index alone does NOT create a stacking context for children — so
       everything inside a "page" was still competing in the root context with
       the other 80 overlays and the floating text-size control. That is the
       collision that ate clicks on dialog buttons in 2.2.69: a full-screen
       panel put its own buttons exactly where a fixed control was floating,
       and neither knew about the other.
       isolation:isolate makes the page its own stacking context, so nothing
       inside it can be overlapped by anything outside it, and z-indexes within
       a page are only compared against each other. This is what stops the
       collisions being structural rather than fixing them one at a time. */
    isolation: isolate;
  }
  /* Anything fixed to the viewport belongs to the BOARD, not to a page that has
     taken the screen over. Hidden while a page is up rather than left floating
     on top of it — the text-size control still dodges, but it should not need
     to on a screen it has no business being on. */
  body.page-open .text-size-quick { display: none; }
  .overlay.page-mode > .modal-box {
    width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important;
    border: none; border-radius: 0; resize: none; min-width: 0; min-height: 0;
    padding: 20px 26px; overflow: auto;
  }
  /* When any full page is open, hide the board behind it so the page truly
     takes over the screen. The header stays so you can jump straight to another
     page (Parts -> Manager Board) without returning to the board first. */
  body.page-open #board,
  body.page-open #statsAreaWrap { display: none !important; }
  /* Data-heavy panels (Diagnostics, manager board, Ask the Shop AI) fill most
     of the screen, so there is room to read data and type. Small confirmations
     keep the compact size above. On a phone these already go full-bleed via the
     mobile rules. */
  .modal-box.modal-large { width: 96vw; max-width: 1400px; height: 92vh; max-height: 92vh; position: relative; }
  /* Universal ✕ close button, injected into every popup so there is always an
     obvious way out in the top-right corner, regardless of the modal's own
     buttons. */
  .modal-x-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 50; padding: 0; }
  .modal-x-close:hover { background: var(--red); border-color: var(--red); color: #fff; }
  /* The close button is styled for the dark theme, so on the light RO panel it
     came out dark-on-white and all but invisible. Restyle it there only. */
  #jobOverlay.slide-over .modal-box:has(.ro-detail:not([style*="display:none"])) .modal-x-close {
    background: #fff; border-color: #d7dbe0; color: #1b1f24;
  }
  #jobOverlay.slide-over .modal-box:has(.ro-detail:not([style*="display:none"])) .modal-x-close:hover {
    background: #d92d20; border-color: #d92d20; color: #fff;
  }

  /* --- Stage 7: turn off all animations --- */
  /* One switch (body.animations-off) stops every looping/attention animation.
     A board sitting on a wall all day should be able to go still. */
  body.animations-off * { animation: none !important; }
  body.animations-off #callPop.show { animation: none !important; }
  /* Respect the OS "reduce motion" setting: default the animations off for
     anyone who has asked their system for less motion. A person can still turn
     them back on with the toggle if they want. */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
  }

  /* --- Stage 7: card size / zoom --- */
  /* --card-scale multiplies card sizing independently of --font-scale, so the
     board can be tuned for a wall TV, a desktop, or a tablet without zooming the
     whole browser. Seven steps, 70%-130%, like the competitor's. Applied to the
     board card font size below. */
  .modal-box.modal-large .parts-dash-header { position: sticky; top: 0; background: var(--panel); z-index: 2; padding-top: 2px; }
  /* Grouped sections inside the job modal — turns one long flat list of
     fields into scannable, labeled blocks. */
  .modal-section { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 6px; margin-bottom: 12px; background: rgba(var(--tint-rgb),0.02); }
  .modal-section > .modal-section-title { display: flex; align-items: center; gap: 7px; font-size: calc(11px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 10px; }
  .modal-section > .modal-section-title .sec-icon { font-size: calc(13px * var(--font-scale, 1)); }
  /* Alert / attention controls inside the modal — a clearly separated box so
     stopping a rocking or flashing card doesn't mean hunting for the small
     buttons on the card itself. */
  .modal-alert-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: rgba(var(--tint-rgb),0.03); }
  .modal-alert-box.is-active { border-color: rgba(244,196,48,0.6); background: rgba(244,196,48,0.06); }
  .modal-alert-title { display: flex; align-items: center; gap: 7px; font-size: calc(11px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 4px; }
  .modal-alert-status { font-size: calc(12px * var(--font-scale, 1)); color: var(--muted); margin-bottom: 10px; }
  .modal-alert-status.active { color: var(--orange-text); font-weight: 600; }
  .modal-alert-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  .modal-alert-buttons .btn { flex: 1 1 auto; min-width: 120px; }
  .modal-alert-buttons .btn.alert-on { border-color: rgba(244,196,48,0.6); color: var(--orange-text); }
  .modal-actions { display: flex; justify-content: space-between; margin-top: 16px; gap: 10px; }
  #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); padding: 10px 18px; border-radius: 20px; font-size: calc(12.5px * var(--font-scale, 1)); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 150; }
  .chat-msg-popup { position: fixed; top: 18px; right: 18px; max-width: 320px; background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid #a855f7; border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px var(--shadow-color); opacity: 0; transform: translateY(-10px); transition: opacity 0.25s, transform 0.25s; z-index: 155; pointer-events: none; cursor: pointer; }
  .chat-msg-popup.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .chat-msg-popup-sender { font-weight: 700; font-size: calc(12.5px * var(--font-scale, 1)); margin-bottom: 3px; }
  .chat-msg-popup-text { font-size: calc(12px * var(--font-scale, 1)); color: var(--paper); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .chat-msg-popup-meta { font-size: calc(10px * var(--font-scale, 1)); color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }

  /* Team Chat — its own namespace (tc-*), deliberately separate from the
     .chat-msg-* classes above, which Parts Chat also renders with and
     which stay untouched. Team Chat gets a richer treatment: avatars,
     own-message alignment, and bubbles that escalate visually from
     routine to emergency, so priority reads at a glance, not just in text. */
  .tc-stats { display: flex; gap: 8px; margin-bottom: 12px; }
  .tc-stat-chip { flex: 1; display: flex; align-items: baseline; gap: 7px; padding: 9px 13px; border-radius: 10px; background: rgba(var(--tint-rgb),0.04); border: 1px solid var(--line); }
  .tc-stat-num { font-family: 'JetBrains Mono', monospace; font-size: calc(17px * var(--font-scale, 1)); font-weight: 700; line-height: 1; }
  .tc-stat-label { font-size: calc(10.5px * var(--font-scale, 1)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
  .tc-body { display: flex; gap: 16px; height: 58vh; min-height: 360px; }
  .tc-thread-list { width: 200px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; }
  .tc-thread-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; cursor: pointer; transition: background 0.12s; }
  .tc-thread-item:hover { background: rgba(var(--tint-rgb),0.06); }
  .tc-thread-item.active { background: rgba(168,85,247,0.16); }
  .tc-avatar { width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; color: #fff; letter-spacing: 0.01em; }
  .tc-thread-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px * var(--font-scale, 1)); font-weight: 600; }
  .tc-thread-badge { background: var(--red); color: #fff; font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; padding: 1px 6px; border-radius: 10px; flex: 0 0 auto; }
  .tc-thread-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .tc-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 2px 6px 2px 2px; }
  .tc-row { display: flex; gap: 8px; max-width: 76%; }
  .tc-row.own { align-self: flex-end; flex-direction: row-reverse; }
  .tc-bubble { padding: 8px 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); min-width: 0; }
  .tc-row.own .tc-bubble { background: rgba(74,143,214,0.18); border-color: rgba(74,143,214,0.35); }
  .tc-bubble.tc-priority { background: rgba(244,196,48,0.1); border-color: rgba(244,196,48,0.4); }
  .tc-bubble.tc-emergency { background: rgba(255,59,48,0.18); border-color: var(--red); box-shadow: 0 0 0 1px rgba(255,59,48,0.2); }
  .tc-bubble-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
  .tc-bubble-author { font-weight: 700; font-size: calc(11.5px * var(--font-scale, 1)); }
  .tc-bubble-time { font-size: calc(10px * var(--font-scale, 1)); color: var(--muted2); }
  .tc-bubble-text { font-size: calc(12.5px * var(--font-scale, 1)); color: var(--paper); line-height: 1.42; overflow-wrap: anywhere; }
  .tc-tag { font-size: calc(8.5px * var(--font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 8px; }
  .tc-tag-priority { background: rgba(244,196,48,0.22); color: #f4c430; }
  .tc-tag-emergency { background: rgba(255,59,48,0.3); color: #ff8178; }
  .tc-composer { display: flex; gap: 8px; margin-top: 12px; flex: 0 0 auto; }
  .tc-priority-select { width: 118px; flex-shrink: 0; }
  .tc-empty { color: var(--muted2); font-size: calc(12px * var(--font-scale, 1)); text-align: center; padding: 30px 0; margin: auto; }
  .stat-flashing .stat-value { animation: statFlash 1s steps(1) infinite; }
  @keyframes statFlash { 0%, 49% { color: var(--paper); } 50%, 100% { color: var(--yellow-text); } }

  #tek_testResult.success { background: rgba(46,139,87,0.12); border: 1px solid var(--green); color: var(--paper); }
  #tek_testResult.error { background: rgba(255,59,48,0.12); border: 1px solid var(--red); color: var(--paper); }
  #tek_testResult pre { white-space: pre-wrap; word-break: break-all; font-size: calc(10.5px * var(--font-scale, 1)); max-height: 160px; overflow-y: auto; margin: 8px 0 0; background: var(--steel); padding: 8px; border-radius: 6px; }
  #gcal_testResult.success { background: rgba(46,139,87,0.12); border: 1px solid var(--green); color: var(--paper); }
  #gcal_testResult.error { background: rgba(255,59,48,0.12); border: 1px solid var(--red); color: var(--paper); }
  #email_testResult.success { background: rgba(46,139,87,0.12); border: 1px solid var(--green); color: var(--paper); }
  #email_testResult.error { background: rgba(255,59,48,0.12); border: 1px solid var(--red); color: var(--paper); }
  .tek-mapping-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: calc(12.5px * var(--font-scale, 1)); }
  .tek-mapping-row .tek-label-text { flex: 1; font-weight: 600; }
  .tek-mapping-row .tek-unmapped-badge { font-size: calc(10px * var(--font-scale, 1)); text-transform: uppercase; color: var(--orange-text); border: 1px solid var(--orange); border-radius: 10px; padding: 1px 7px; }
  #toast.show { opacity: 1; }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

  /* Full History timeline */
  .fh-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px; background: var(--panel2); }
  .fh-row .fh-icon { font-size: calc(15px * var(--font-scale, 1)); line-height: 1.3; }
  .fh-row .fh-main { flex: 1; min-width: 0; }
  .fh-row .fh-text { font-size: calc(13px * var(--font-scale, 1)); line-height: 1.45; }
  .fh-row .fh-meta { font-size: calc(11px * var(--font-scale, 1)); color: var(--muted); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
  .fh-row .fh-meta strong { color: var(--text); font-weight: 600; }
  .fh-row .fh-when { font-size: calc(11px * var(--font-scale, 1)); color: var(--muted); white-space: nowrap; }
  .fh-row.fh-deleted { border-left: 3px solid var(--red); }
  .fh-row.fh-completed { border-left: 3px solid var(--green); }
  .fh-restore-btn { font-size: calc(11px * var(--font-scale, 1)); padding: 4px 10px; margin-top: 6px; }
  .fh-empty { text-align: center; color: var(--muted); font-size: calc(13px * var(--font-scale, 1)); padding: 30px 10px; line-height: 1.6; }


/* ---- next block ---- */


  @keyframes fireAlertPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }


/* ---- next block ---- */

td { padding: 6px; border-bottom: 1px solid #ddd; }

/* ---- next block ---- */

td { padding: 6px; border-bottom: 1px solid #ddd; }

/* ---- next block ---- */

@page { margin: 0.25in; }

/* ---- next block ---- */

@page { margin: 0.25in; } body { padding: 0 !important; text-align:left !important; }
/* ---------------------------------------------------------------------------
   Full-screen popups, and the light theme toggle.

   Both are shop-floor requests: a dialog that fills the screen is readable
   from a step back, and a light panel is readable in daylight through the bay
   door. Both are toggles, because a wall-mounted TV wants neither.

   The full-screen rule is why the text-size control has to keep dodging: a
   panel that fills the screen puts its own buttons wherever that control
   floats, which is exactly what ate clicks in build 2.2.69. syncTextSizeDodge
   measures and moves out of the way, so this is safe — but it is safe BECAUSE
   of that, not by accident.
   --------------------------------------------------------------------------- */
body.popups-fullscreen .overlay.open > .modal-box {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
/* The docked RO panel is deliberately exempt: its whole point is that the
   board stays visible beside it. Filling the screen would undo the thing it
   was built for. */
body.popups-fullscreen #jobOverlay.slide-over > .modal-box {
  width: 480px !important;
  max-width: 94vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
}

/* Light theme for popups. Scoped to dialogs, not the board: the board is read
   across a bay and the dark version wins there. Variables are overridden on
   the box rather than restyling every child, so anything added later inherits
   it for free. */
body.popups-light .overlay.open > .modal-box {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel2: #f5f6f8;
  --fg: #1b1f24;
  --muted: #5a5f6a;
  --line: #e3e6ea;
  background: #ffffff;
  color: #1b1f24;
}
body.popups-light .overlay.open > .modal-box input,
body.popups-light .overlay.open > .modal-box select,
body.popups-light .overlay.open > .modal-box textarea {
  background: #ffffff; color: #1b1f24; border-color: #d7dbe0;
}
body.popups-light .overlay.open > .modal-box .btn {
  background: #ffffff; color: #1b1f24; border-color: #d7dbe0;
}
body.popups-light .overlay.open > .modal-box .btn:hover { background: #f0f2f5; }
body.popups-light .overlay.open > .modal-box .btn-primary {
  background: #6d5ae6; border-color: #6d5ae6; color: #ffffff;
}
body.popups-light .overlay.open > .modal-box .modal-x-close {
  background: #ffffff; border-color: #d7dbe0; color: #1b1f24;
}