/* ═══════════════════════════════════════════════════════════════
   BLVD Field — Desktop Styles
   Consolidated from inline phases 1-13 (commit history: e14b2f4 →
   2ccfa9f). Every rule scoped under `body.desktop` — mobile path
   is provably unaffected when the class is absent.

   Detection (see desktop.js): (min-width: 1024px) AND (pointer: fine)
   ═══════════════════════════════════════════════════════════════ */

/* ════════ shell ════════ */
body.desktop {
    --ds-w: 224px;
    --ds-bg: #0a1d36;
    --ds-border: #1f3559;
    --ds-content-max: 1400px;
  }

  /* ─── Light-theme sidebar tokens ───
     In light mode the rail renders LIGHT (its dark background is overridden by
     the light theme, and the brand logo switches to a dark-on-light variant),
     so the rail's foreground/surface tokens must be light-mode values too. An
     earlier dark-rail re-pin left these pinned dark, which made the user's NAME
     render white-on-white (invisible) and the collapse edge-tabs paint as dark
     navy smudges. Pin them to the light palette, scoped to the rail + edge
     tabs only. */
  body.theme-light.desktop #desktop-sidebar,
  body.theme-light.desktop #ds-hide-btn,
  body.theme-light.desktop #ds-show-tab {
    --ds-bg: #ffffff;
    --ds-border: #d6dde8;
    --text: #0a1d36;
    --muted: #5b6f8a;
    --muted-2: #617790;
    --gold: #a87b1d;
    --gold-bright: #c79a2d;
    --navy-deep: #ffffff;
  }

  /* Push #app right by sidebar width so screens fill the remaining viewport. */
  body.desktop #app {
    width: calc(100vw - var(--ds-w));
    margin-left: var(--ds-w);
  }

  /* Bottom-nav is never visible on desktop — sidebar replaces it. */
  body.desktop .bottom-nav { display: none !important; }

  /* Reclaim the 90px reserved for bottom-nav. */
  body.desktop .scroll-body { padding-bottom: 32px; }

  /* ─── Sidebar ─── */
  #desktop-sidebar { display: none; }
  #ds-show-tab { display: none; }
  body.desktop #desktop-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--ds-w);
    background: var(--ds-bg);
    border-right: 1px solid var(--ds-border);
    z-index: 100;
    user-select: none;
    transition: transform 200ms ease;
  }
  /* Hide-sidebar tab — vertically centered on the sidebar's right edge so
     it's discoverable at a glance (David, 2026-05-14: "easier to see").
     Mirrors #ds-show-tab in style; together they form a symmetric pair —
     ‹ on the right edge when open, › on the left edge when hidden. */
  #ds-hide-btn { display: none; }
  body.desktop #ds-hide-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 50%; left: calc(var(--ds-w) - 1px);
    transform: translateY(-50%);
    z-index: 101;   /* one above the sidebar so it floats over the border */
    width: 18px; height: 64px;
    background: var(--ds-bg);
    border: 1px solid var(--ds-border);
    border-left: none;
    border-top-right-radius: 8px; border-bottom-right-radius: 8px;
    color: var(--muted); cursor: pointer;
    font-size: 18px; line-height: 1;
    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    transition: background 120ms, color 120ms, left 200ms ease;
  }
  body.desktop #ds-hide-btn:hover {
    background: rgba(201,160,78,0.18);
    color: var(--gold);
  }
  /* When the sidebar collapses, the show-tab takes over — hide the
     right-edge tab so we don't paint two tabs on top of each other. */
  body.desktop.sidebar-hidden #ds-hide-btn { display: none; }
  /* The "show sidebar" tab — only renders when sidebar is hidden.
     Sits flush against the left edge, narrow tab the user can grab. */
  body.desktop #ds-show-tab {
    display: none;
    position: fixed; top: 50%; left: 0;
    transform: translateY(-50%);
    z-index: 99;
    width: 18px; height: 64px;
    background: var(--ds-bg);
    border: 1px solid var(--ds-border);
    border-left: none;
    border-top-right-radius: 8px; border-bottom-right-radius: 8px;
    color: var(--muted); cursor: pointer;
    font-size: 18px; line-height: 1;
    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    transition: background 120ms, color 120ms;
  }
  body.desktop #ds-show-tab:hover {
    background: rgba(201,160,78,0.18);
    color: var(--gold);
  }
  /* Hidden-sidebar state: shift sidebar off-screen, zero the layout var,
     and reveal the show-tab. Everything else (#app width, FAB offsets,
     screen positioning, container queries) automatically adapts via the
     --ds-w cascade. */
  body.desktop.sidebar-hidden {
    --ds-w: 0px;
  }
  body.desktop.sidebar-hidden #desktop-sidebar {
    transform: translateX(-100%);
    pointer-events: none;
  }
  body.desktop.sidebar-hidden #ds-show-tab {
    display: flex; align-items: center; justify-content: center;
  }
  body.desktop #desktop-sidebar .ds-brand {
    display: flex; align-items: center; gap: 8px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--ds-border);
  }
  /* Image-based brand logo — replaces the old text wordmark. Sized so the
   * gold "Field" word and BETA chip read at the same height. */
  body.desktop #desktop-sidebar .ds-brand-logo {
    height: 24px; width: auto;
    display: block;
    /* The PNG is white-on-transparent; preserve that so the navy sidebar
     * shows through. */
    flex: 0 0 auto;
  }
  body.desktop #desktop-sidebar .ds-brand-text {
    font-weight: 700; font-size: 17px; letter-spacing: 0.4px; color: var(--text);
  }
  body.desktop #desktop-sidebar .ds-brand-app {
    color: var(--gold); font-weight: 600; font-size: 14px;
  }
  /* Today screen's mobile-style header (logo + FIELD chip) is redundant on
   * desktop because the sidebar's brand block sits right next to it. Drop
   * the brand section but keep the right-side icons (search, bell, stale
   * indicator) — those still make sense at the top of the content area. */
  body.desktop #screen-today .app-header .brand {
    display: none;
  }
  body.desktop #desktop-sidebar .ds-brand-tag {
    margin-left: auto;
    color: var(--gold); font-weight: 600; font-size: 10px;
    background: rgba(201,160,78,0.10);
    border: 1px solid rgba(201,160,78,0.28);
    border-radius: 4px; padding: 2px 6px; letter-spacing: 0.5px;
  }
  body.desktop #desktop-sidebar .ds-nav {
    display: flex; flex-direction: column;
    padding: 12px 10px 4px; gap: 2px;
  }
  body.desktop #desktop-sidebar .ds-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px;
    color: var(--muted); cursor: pointer;
    font-size: 14px; font-weight: 500;
    transition: background 120ms, color 120ms;
  }
  body.desktop #desktop-sidebar .ds-item:hover {
    background: rgba(255,255,255,0.04); color: var(--text);
  }
  body.desktop #desktop-sidebar .ds-item.active {
    background: rgba(201,160,78,0.13); color: var(--gold-bright);
    position: relative;
  }
  /* Subtle 1.5s breathing pulse on the gold accent stripe of the active
     sidebar item — makes the current location unmissable without being
     obnoxious. 4px bar on the left edge instead of a full background so
     the row text doesn't strobe. */
  body.desktop #desktop-sidebar .ds-item.active::before {
    content: '';
    position: absolute;
    top: 6px; bottom: 6px; left: 0;
    width: 3px;
    background: var(--gold-bright);
    border-radius: 2px;
    animation: ds-active-pulse 1.6s ease-in-out infinite;
  }
  @keyframes ds-active-pulse {
    0%, 100% { opacity: 0.55; box-shadow: 0 0 0 0 rgba(244,196,48,0.0); }
    50%      { opacity: 1.00; box-shadow: 0 0 6px 1px rgba(244,196,48,0.45); }
  }
  /* Reduced-motion respect — flip to a static gold bar so we don't strobe
     anyone with vestibular sensitivity. */
  @media (prefers-reduced-motion: reduce) {
    body.desktop #desktop-sidebar .ds-item.active::before {
      animation: none;
      opacity: 1;
    }
  }
  body.desktop #desktop-sidebar .ds-item .ic {
    width: 18px; height: 18px; display: inline-flex;
    align-items: center; justify-content: center; flex: 0 0 auto;
  }
  body.desktop #desktop-sidebar .ds-item .ic svg { width: 18px; height: 18px; }
  body.desktop #desktop-sidebar .ds-divider {
    height: 1px; background: var(--ds-border); margin: 8px 12px;
  }
  body.desktop #desktop-sidebar .ds-spacer { flex: 1; }
  body.desktop #desktop-sidebar .ds-user {
    padding: 10px 12px; margin: 6px 10px; border-radius: 8px;
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ds-border);
    transition: background 120ms;
  }
  body.desktop #desktop-sidebar .ds-user:hover { background: rgba(255,255,255,0.06); }
  body.desktop #desktop-sidebar .ds-user:active { background: rgba(255,255,255,0.10); }
  body.desktop #desktop-sidebar .ds-user:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  body.desktop #desktop-sidebar .ds-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gold); color: var(--navy-deep);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; flex: 0 0 auto;
  }
  body.desktop #desktop-sidebar .ds-uname {
    font-size: 13px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;
  }
  body.desktop #desktop-sidebar .ds-urole {
    font-size: 11px; color: var(--muted-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;
  }
  /* Tiny sidebar-scoped action row above the version footer. Currently
     hosts the Customize Sidebar gear icon — small icon so it doesn't
     compete with real nav items. Easy to tuck more icons in later. */
  body.desktop #desktop-sidebar .ds-mini-tools {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 6px 10px 4px;
  }
  body.desktop #desktop-sidebar .ds-mini-btn {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted-2); cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
  }
  body.desktop #desktop-sidebar .ds-mini-btn svg {
    width: 14px; height: 14px;
  }
  body.desktop #desktop-sidebar .ds-mini-btn:hover {
    background: rgba(201,160,78,0.10);
    color: var(--gold);
    border-color: rgba(201,160,78,0.30);
  }

  body.desktop #desktop-sidebar .ds-foot {
    padding: 10px 16px 14px; font-size: 11px; color: var(--muted-2);
    text-align: center; border-top: 1px solid var(--ds-border);
  }

  /* Hide sidebar (and reclaim full width) while splash is the active screen.
     Floating hide/show tabs go with it — they have nothing to collapse or
     reveal when no one's signed in, so they were floating mid-splash on the
     login screen. Drops both regardless of .sidebar-hidden state. */
  body.desktop:has(#screen-splash.active) #desktop-sidebar { display: none; }
  body.desktop:has(#screen-splash.active) #app { width: 100vw; margin-left: 0; }
  body.desktop:has(#screen-splash.active) #ds-hide-btn,
  body.desktop:has(#screen-splash.active) #ds-show-tab { display: none; }

  /* ─── Content widths on list/table screens ─── */
  body.desktop #screen-today .scroll-body,
  body.desktop #screen-schedule .scroll-body,
  body.desktop #screen-mypay .scroll-body,
  body.desktop #screen-team .scroll-body,
  body.desktop #screen-more .scroll-body,
  body.desktop #screen-past-jobs .scroll-body,
  body.desktop #screen-files .scroll-body,
  body.desktop #screen-chat .scroll-body,
  body.desktop #screen-chats .scroll-body,
  body.desktop #screen-emi .scroll-body,
  body.desktop #screen-permissions .scroll-body,
  body.desktop #screen-triage .scroll-body,
  body.desktop #screen-admin-users .scroll-body,
  body.desktop #screen-directory .scroll-body,
  body.desktop #screen-pending-additions .scroll-body,
  body.desktop #screen-admin-knowledge .scroll-body,
  body.desktop #screen-admin-easter-eggs .scroll-body,
  body.desktop #screen-pres-announcements .scroll-body,
  body.desktop #screen-ai-memory .scroll-body,
  body.desktop #screen-pending-uploads .scroll-body,
  body.desktop #screen-sync-status .scroll-body,
  body.desktop #screen-profile .scroll-body,
  body.desktop #screen-project-detail .scroll-body,
  body.desktop #screen-project-schedule .scroll-body {
    max-width: var(--ds-content-max);
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* internal-header gets desktop padding to align with content */
  body.desktop .internal-header { padding-left: 24px; padding-right: 24px; }

  /* ─── DETAIL — single-column layout (no grid, no sticky) ───────────
     Earlier rebuild used a 1.7fr:1fr grid with the action button + time
     card + quick actions sticky in the right rail. Two problems:
       (1) grid-auto-flow:dense was intermittently shoving content cards
           (weather, notes, this-job) into the narrow 1fr column → the
           "weather is squished" report.
       (2) Multiple sticky cards floating as the user scrolled was
           visually noisy and unwanted.
     Switched to a clean single column capped at ds-content-max with
     normal document flow. Action button scrolls inline with everything
     else. ─────────────────────────────────────────────────────────── */
  body.desktop #screen-detail .scroll-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 40px 60px;
    max-width: var(--ds-content-max);
    margin: 0 auto;
    align-items: stretch;
  }
  body.desktop #screen-detail .scroll-body > * { min-width: 0; }

  /* Hide the JS-injected Quick Actions panel on desktop — its actions
     (Weather / Show on Map / Call PM / Open in Sitetracker) duplicate
     the hero buttons + the on-page weather card, so it adds clutter
     instead of value once we're not in a right-rail layout. */
  body.desktop #screen-detail .scroll-body > .ds-quick-actions {
    display: none !important;
  }

  /* ─── Detail card polish (was using mobile-tuned dimensions on a wide
     desktop, so cards felt cramped). All scoped under #screen-detail. ─── */

  /* Cards with `margin: 14px 14px 0` from mobile have horizontal margins
     that don't make sense inside the desktop grid (the grid already
     handles spacing via column-gap/row-gap). Strip them. */
  body.desktop #screen-detail .scroll-body > .weather-block,
  body.desktop #screen-detail .scroll-body > .notes-card,
  body.desktop #screen-detail .scroll-body > .tech-notes-card,
  body.desktop #screen-detail .scroll-body > .this-job,
  body.desktop #screen-detail .scroll-body > .work-summary,
  body.desktop #screen-detail .scroll-body > .ur-card,
  body.desktop #screen-detail .scroll-body > .splits-admin,
  body.desktop #screen-detail .scroll-body > .history-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }

  /* Weather block — dominant card on Detail. Big temp on the left, stat
     block on the right, prominent 6-hour strip below. Generous vertical
     padding because the temp glyph at 88px overflows its line-box (the
     mobile .weather-block has overflow:hidden which clipped the digits
     and made the card feel "squished top and bottom"). */
  body.desktop #screen-detail .weather-block {
    padding: 24px 28px 22px !important;
    border-radius: 14px;
    overflow: visible !important;        /* let glyph descenders breathe */
  }
  /* The decorative gradient pseudo-element relied on overflow:hidden to
     stay inside the card. Re-clip just the ::before via clip-path so we
     can keep overflow:visible on the parent. */
  body.desktop #screen-detail .weather-block::before {
    clip-path: inset(0 round 14px);
  }
  /* Replace the mobile flex with a real grid so the right stat block
     gets explicit room and can't be squeezed by a long condition string. */
  body.desktop #screen-detail .weather-now {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 76px;
  }
  body.desktop #screen-detail .weather-now .left .temp {
    font-size: 64px !important;
    line-height: 1.05 !important;
    letter-spacing: -3px !important;
    font-weight: 200;
    padding-bottom: 2px;
  }
  body.desktop #screen-detail .weather-now .left .cond {
    font-size: 14px !important;
    margin-top: 8px !important;
    line-height: 1.4;
    color: #cdd9eb !important;
  }
  body.desktop #screen-detail .weather-now .right {
    font-size: 12px !important;
    line-height: 1.85 !important;
    text-align: right;
    color: #b8c5d6 !important;
    white-space: nowrap;
  }
  body.desktop #screen-detail .weather-now .right b {
    font-size: 13px;
    color: #fff !important;
    margin-left: 5px;
  }
  body.desktop #screen-detail .weather-strip {
    margin-top: 18px !important;
    padding-top: 16px !important;
    gap: 6px;
  }
  body.desktop #screen-detail .weather-hour {
    padding: 4px 0 !important;
  }
  body.desktop #screen-detail .weather-hour .h {
    font-size: 10px !important;
    letter-spacing: 1.4px !important;
    margin-bottom: 6px !important;
  }
  body.desktop #screen-detail .weather-hour .ic {
    font-size: 22px !important;
    margin-bottom: 4px !important;
    line-height: 1;
  }
  body.desktop #screen-detail .weather-hour .t {
    font-size: 14px !important;
  }
  body.desktop #screen-detail .weather-alert {
    margin-top: 16px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    line-height: 1.5;
    border-radius: 10px;
  }

  /* Wx alert banner (above weather-block) — full-width inline */
  body.desktop #screen-detail .wx-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    border-radius: 12px;
  }

  /* Notes (Access Notes) — bigger reading width on desktop */
  body.desktop #screen-detail .notes-card {
    padding: 16px 20px !important;
    border-radius: 12px;
  }
  body.desktop #screen-detail .notes-card .text {
    font-size: 14px;
    line-height: 1.55;
  }

  /* Tech notes / Site Notes — match notes-card */
  body.desktop #screen-detail .tech-notes-card {
    padding: 14px 20px 16px !important;
    border-radius: 12px;
  }
  body.desktop #screen-detail .tech-notes-card .text {
    font-size: 14px;
    line-height: 1.55;
  }

  /* This Job — the action items list. Bump item padding so 56px-ish
     icons + 14px text don't feel compressed at desktop scale. */
  body.desktop #screen-detail .this-job .lab {
    font-size: 10px;
    margin-bottom: 10px;
  }
  body.desktop #screen-detail .this-job .item {
    padding: 14px 16px !important;
  }
  body.desktop #screen-detail .this-job .item .ic-wrap {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px;
  }
  body.desktop #screen-detail .this-job .item .meta .t {
    font-size: 14px !important;
  }
  body.desktop #screen-detail .this-job .item .meta .s {
    font-size: 12px !important;
    margin-top: 2px;
  }

  /* Work Summary — now actually full-width (was shadowed by .work-summary-card
     typo). Bump grid to 4-col on full-width desktop so the 8 stat rows
     fit in 2 visual rows instead of 4. */
  body.desktop #screen-detail .work-summary {
    padding: 16px 22px !important;
    border-radius: 14px;
  }
  body.desktop #screen-detail .work-summary .ws-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px 24px !important;
  }
  /* On narrower screen widths (<1280px) drop back to 2-col so
     labels/values don't truncate. Uses @container so split-pane half-
     width screens trigger this even when viewport is wide. */
  @container screen (max-width: 1280px) {
    body.desktop #screen-detail .work-summary .ws-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  /* History banner — keep it slim, but stop the mobile 14px side margins */
  body.desktop #screen-detail .history-banner {
    padding: 12px 16px !important;
  }

  /* UR card + Files section + Splits admin — same horizontal margin strip
     handled above; here just lift the radius/padding a touch. */
  body.desktop #screen-detail .ur-card,
  body.desktop #screen-detail .splits-admin,
  body.desktop #screen-detail #job-files-section {
    border-radius: 12px;
  }

  /* Pathfinder Live Collab card — on desktop the scroll-body is a flex
     column that collapsed the card to zero height (see 6a443ea). Force
     the card + iframe to their natural sizes on desktop only. Mobile
     keeps the plain block layout from the inline styles, otherwise
     iOS WebKit honored `flex-basis:560px` on the iframe in unexpected
     ways and rendered the whole app at ~half viewport width with the
     navy showing through on the right.

     #screen-detail = flex column → align-self:stretch fills cross-axis (width).
     #screen-project-detail = flex ROW wrap → cross-axis is vertical, so
     align-self does the wrong thing; force flex-basis:100% to span the
     full row alongside .proj-hero / .proj-stats. Without this the card
     sized to content width and rendered as a tall narrow column
     ("one long box" — David 2026-05-22). */
  body.desktop #pf-card-detail {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    min-height: 608px;
  }
  body.desktop #pf-card-project {
    flex: 0 0 100%;
    width: 100%;
    min-height: 608px;
  }
  body.desktop #pf-card-detail-iframe,
  body.desktop #pf-card-project-iframe {
    min-height: 560px;
  }

  /* Splash spans full viewport on desktop — see two-pane block below. */
  /* (Was: max-width 480px centered; David asked to fit the whole screen.) */

  /* Subtle hover affordance on big card-like rows */
  body.desktop .job-card,
  body.desktop .pm-card {
    transition: transform 120ms, box-shadow 120ms;
  }
  body.desktop .job-card:hover,
  body.desktop .pm-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  }

  /* AI fab + PTO fab pinned to bottom-right of viewport on desktop */
  body.desktop #ai-fab { bottom: 24px; right: 24px; }
  body.desktop #pto-fab { bottom: 24px; right: 88px; }

  /* Universal back chip: nudge past the sidebar so it lives in the content
     column (not buried behind the sidebar). Mobile places it at left:12px;
     on desktop the screen content starts at --ds-w, so the chip lives at
     --ds-w + 16px. The brand sits inside the content column too — same
     left coordinate — so the mobile padding-nudge applies on desktop as
     well, otherwise the chip overlaps the TEAM/BLVD logo. */
  body.desktop #global-back-btn { left: calc(var(--ds-w) + 16px); top: 18px; }

/* ════════ polish ════════ */
/* ─── Screen transitions: opacity fade on desktop (no slide) ─── */
  body.desktop .screen {
    transition: opacity 160ms ease;
    transform: none !important;
    /* Container query context — lets @container screen rules below
       respond to the screen's actual rendered width, not viewport.
       Critical for split-pane mode: a half-width pinned/active screen
       triggers narrow-layout rules even though viewport stays wide. */
    container-type: inline-size;
    container-name: screen;
  }
  body.desktop .screen.active { opacity: 1; z-index: 2; pointer-events: auto; }
  body.desktop .screen:not(.active) { opacity: 0; z-index: 1; pointer-events: none; }
  body.desktop .screen.exit-left { opacity: 0; }

  /* ─── Multi-panel — desktop split-pane ─── */
  /* Pinning a screen (sidebar Pin button or cmd+\) gives that screen
     .pinned-right and adds body.has-pinned-screen. Pinned screen
     occupies the right half of the post-sidebar viewport; active
     non-pinned screen takes the left half. Toggle again to restore
     single-pane. One pin at a time — second pin replaces the first.
     Implementation: both screens stay opacity:1 + pointer-events:auto;
     left/right edges split the remaining width. No transforms or
     clip-paths so click coordinates stay native. */
  /* .screen is position:absolute; inset:0 INSIDE #app, which on desktop
     already has margin-left:var(--ds-w). So .screen edges are relative
     to the post-sidebar region — 50% values give a clean split without
     re-applying the sidebar offset. */
  body.desktop.has-pinned-screen .screen.pinned-right {
    opacity: 1 !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    left: 50% !important;
    right: 0 !important;
    /* Hard clip — if a descendant has an intrinsic min-width bigger
       than the half-pane, this prevents horizontal overflow from
       bleeding into the other half or under the sidebar. The scroll-
       body inside still handles vertical scroll normally. */
    overflow: hidden !important;
    border-left: 1px solid rgba(255,255,255,0.12);
  }
  body.desktop.has-pinned-screen .screen.active:not(.pinned-right) {
    left: 0 !important;
    right: 50% !important;
    overflow: hidden !important;
  }
  /* Defensive min-width:0 on scroll-body so flex/grid descendants can
     shrink below their content's intrinsic min-width. Without this,
     a grid like job-list with minmax(380px, 1fr) would stay at 380px+
     even when the container is narrower, overflowing horizontally. */
  body.desktop.has-pinned-screen .screen.pinned-right .scroll-body,
  body.desktop.has-pinned-screen .screen.active:not(.pinned-right) .scroll-body {
    min-width: 0;
    overflow-x: hidden;
  }
  /* Per-screen pin button — injected into every .internal-header on
     desktop. Matches the existing .header-icon-btn family; flips to a
     gold "active" state when this screen is the pinned one. */
  body.desktop .header-icon-btn.pin-btn.pinned {
    background: rgba(201,160,78,0.22);
    color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(201,160,78,0.55);
  }
  /* Sidebar nav item marker for the pinned screen — small 📌 + gold
     tint so the user always sees which screen is anchored on the right,
     even after navigating away. */
  body.desktop #desktop-sidebar .ds-item.ds-pinned {
    background: rgba(201,160,78,0.10);
    color: var(--gold);
    position: relative;
  }
  body.desktop #desktop-sidebar .ds-item.ds-pinned::after {
    content: '📌';
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
  }
  /* Stronger divider on the pinned screen — 2px gold so the split is
     obvious without relying on a chip. */
  body.desktop.has-pinned-screen .screen.pinned-right {
    border-left: 2px solid rgba(201,160,78,0.35) !important;
  }

  /* ─── Team tab: split-pane belt-and-suspenders ─── */
  /* @container queries above SHOULD handle column drops for split
     pane, but in case browser support / specificity quirks let them
     fall through, explicitly force narrow layouts when body has the
     has-pinned-screen state. These rules use higher specificity than
     the @container path so they always win when in split mode. */
  body.desktop.has-pinned-screen #screen-team .team-pm-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.desktop.has-pinned-screen #screen-team .team-pm-grid > .team-month-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* team-stats: 3 stat tiles in a row → stack vertically (or 1 wide row) */
  body.desktop.has-pinned-screen #screen-team .team-stats {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px 12px 0 !important;
  }
  body.desktop.has-pinned-screen #screen-team .team-stats .day-stat .num {
    font-size: 20px !important;
  }
  /* team-week-grid: minimum width was 140 + 7*80 = 700px. At narrow
     widths we let the row-head shrink + cells shrink. Below ~600px
     wrap the wrapper into an overflow-x scroller as the last resort. */
  body.desktop.has-pinned-screen #screen-team .team-week-grid {
    grid-template-columns: 100px repeat(7, minmax(48px, 1fr)) !important;
    font-size: 11px;
  }
  body.desktop.has-pinned-screen #screen-team .team-week-grid-wrap {
    overflow-x: auto;
  }
  /* The per-PM month calendar wraps inside team-pm-grid; let it sit
     full width without the auto-margin centering that capped it at
     920px (overkill for half-width). */
  body.desktop.has-pinned-screen #screen-team .team-pm-grid > .pm-cal-wrap {
    max-width: none !important;
  }

  /* ─── Today tab: split-pane overrides ─── */
  /* The desktop Today layout centers content at max-width 1400px,
     caps day-stats at 600px centered, and uses 32px side padding —
     all designed for full-width single-pane. In split-pane the
     screen is much narrower, so those constraints squeeze the
     content into a tiny centered column with dead space. Force the
     fill-width path when pinned. */
  body.desktop.has-pinned-screen #screen-today .scroll-body {
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.desktop.has-pinned-screen #screen-today .day-stats {
    max-width: none !important;
    margin: 0 !important;
    gap: 8px !important;
  }
  body.desktop.has-pinned-screen #screen-today .day-stats .day-stat {
    padding: 12px !important;
  }
  body.desktop.has-pinned-screen #screen-today .day-stats .day-stat .num {
    font-size: 22px !important;
  }
  body.desktop.has-pinned-screen #screen-today .greet {
    padding: 16px 0 12px !important;
  }
  body.desktop.has-pinned-screen #screen-today .greet .greet-name {
    font-size: 20px !important;
  }
  /* job-list: at any half-pane width (including tiny laptop halves
     ~300px wide) just go single-column with no minimum — content
     fills the available room and never overflows horizontally.
     Card-level overrides match the flex layout used by the unpinned rule. */
  body.desktop.has-pinned-screen #screen-today .job-list {
    gap: 10px !important;
  }
  body.desktop.has-pinned-screen #screen-today .job-list > .job-card {
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }
  /* Same banner padding is too generous in narrow widths */
  body.desktop.has-pinned-screen #screen-today .chauncey-banner {
    margin: 12px 0 !important;
    padding: 10px 12px !important;
  }

  /* In split-pane the team-tab cells are effectively mobile-width even
     though the viewport is wide. Hide the inline info (it would just
     spew text vertically in a 60-80px cell) — tap-to-expand popover
     fills the gap on the click router side. */
  body.desktop.has-pinned-screen #screen-team .pm-cal-cell .info,
  body.desktop.has-pinned-screen #screen-team .twg-cell .info {
    display: none !important;
  }

  /* ─── Defensive truncation for team-tab PM cards ─── */
  /* Even at the right column count, a very long PM name can push the
     status pill out of position when the card is narrow. Truncate
     defensively. Scoped to team only. */
  body.desktop #screen-team .team-pm-head { min-width: 0; }
  body.desktop #screen-team .team-pm-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.desktop #screen-team .team-pm-head > div:nth-child(2) {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  /* ─── Typography polish ─── */
  body.desktop { font-size: 15px; line-height: 1.5; }
  body.desktop h1 { font-size: 32px; line-height: 1.18; letter-spacing: -0.4px; font-weight: 700; }
  body.desktop h2 { font-size: 23px; line-height: 1.3;  letter-spacing: -0.2px; }
  body.desktop h3 { font-size: 18px; line-height: 1.35; }
  /* Internal-header titles: bump on desktop — current mobile sizing left
     too much chrome breathing room. */
  body.desktop .internal-header .big { font-size: 21px; letter-spacing: -0.2px; }
  body.desktop .internal-header .small { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); }
  /* Today greet headline + day-stat numbers — bump on desktop so the
     Today landing reads as a real dashboard, not a phone screen. */
  body.desktop #screen-today .greet-line { font-size: 13px; letter-spacing: 1.6px; }
  body.desktop #screen-today .greet-name { font-size: 32px; line-height: 1.15; letter-spacing: -0.4px; }
  body.desktop #screen-today .greet-date { font-size: 14px; }
  body.desktop #screen-today .day-stat .num { font-size: 34px; }
  /* Revenue + Detail "big" numbers — tabular and uppercased label pair. */
  body.desktop #screen-mypay .rev-headline,
  body.desktop #screen-detail .detail-earnings { font-variant-numeric: tabular-nums; }

  /* ─── Custom scrollbars (mobile hides them; desktop should show subtle ones) ─── */
  body.desktop .scroll-body::-webkit-scrollbar { width: 10px !important; display: block !important; }
  body.desktop .scroll-body::-webkit-scrollbar-track { background: transparent; }
  body.desktop .scroll-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  body.desktop .scroll-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: padding-box; }

  /* ─── Detail action button + status row: inline in single-col flow ─── */
  body.desktop #screen-detail .scroll-body > #primary-action-wrap {
    position: static !important;
    grid-column: auto !important;
    margin: 0;
  }
  body.desktop #screen-detail .scroll-body > #status-row {
    position: static !important;
    grid-column: auto !important;
  }
  /* Action button gets desktop padding/typography */
  body.desktop #screen-detail #primary-action-wrap button {
    font-size: 16px;
    padding: 14px 18px;
    border-radius: 12px;
  }

  /* ─── Sidebar polish ─── */
  body.desktop #desktop-sidebar {
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.02);
  }
  body.desktop #desktop-sidebar .ds-item {
    position: relative;
  }
  /* keyboard hint badge on first 6 nav items */
  body.desktop #desktop-sidebar .ds-item .ds-key {
    margin-left: auto;
    font-size: 10px;
    color: var(--muted-2);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    line-height: 1.4;
    transition: opacity 120ms;
  }
  body.desktop #desktop-sidebar .ds-item:hover .ds-key,
  body.desktop #desktop-sidebar .ds-item.active .ds-key { opacity: 1; }
  body.desktop #desktop-sidebar .ds-item .ds-key { opacity: 0.55; }
  body.desktop #desktop-sidebar .ds-item.active .ds-key {
    background: rgba(201,160,78,0.10);
    border-color: rgba(201,160,78,0.35);
    color: var(--gold);
  }

  /* sidebar search trigger — faux-input pill at top of nav. Clicking opens
     #search-overlay via openSearch(); the "/" hotkey already focuses the
     same overlay (see bootstrap shortcut block). Mobile uses the existing
     header search icon — this row only shows because #desktop-sidebar
     itself is body.desktop-gated. */
  body.desktop #desktop-sidebar .ds-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 6px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    transition: background 120ms, border-color 120ms, color 120ms;
  }
  body.desktop #desktop-sidebar .ds-search:hover,
  body.desktop #desktop-sidebar .ds-search:focus-visible {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: var(--text);
    outline: none;
  }
  body.desktop #desktop-sidebar .ds-search-ic {
    width: 14px; height: 14px; flex: 0 0 14px;
    opacity: 0.7;
  }
  body.desktop #desktop-sidebar .ds-search-ph {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.desktop #desktop-sidebar .ds-search-key {
    font-size: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--muted-2);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.4;
    flex: 0 0 auto;
  }

  /* sidebar bell row (notifications + chat) */
  body.desktop #desktop-sidebar .ds-bells {
    display: flex; gap: 6px;
    padding: 8px 12px;
    margin: 0 4px 4px;
  }
  body.desktop #desktop-sidebar .ds-bell {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    transition: background 120ms, color 120ms, border-color 120ms;
    position: relative;
  }
  body.desktop #desktop-sidebar .ds-bell:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border-color: rgba(255,255,255,0.12);
  }
  body.desktop #desktop-sidebar .ds-bell svg { width: 16px; height: 16px; }
  body.desktop #desktop-sidebar .ds-bell .ds-bell-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--red);
    color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 9px;
    display: none;
    align-items: center; justify-content: center;
    border: 2px solid var(--ds-bg);
    line-height: 1;
  }
  body.desktop #desktop-sidebar .ds-bell.has-count .ds-bell-count { display: flex; }

  /* shortcut hint at sidebar bottom */
  body.desktop #desktop-sidebar .ds-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  body.desktop #desktop-sidebar .ds-foot .ds-foot-hint {
    font-size: 10px;
    color: var(--muted-2);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 120ms, color 120ms;
  }
  body.desktop #desktop-sidebar .ds-foot .ds-foot-hint:hover {
    background: rgba(255,255,255,0.04);
    color: var(--muted);
  }
  body.desktop #desktop-sidebar .ds-foot .ds-foot-hint kbd {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ds-border);
    border-radius: 3px;
    padding: 1px 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9px;
  }

  /* ─── Hover/focus polish on cards & rows ─── */
  body.desktop .menu-row,
  body.desktop .item-list .item,
  body.desktop .schedule-card,
  body.desktop .past-job-row,
  body.desktop .team-row {
    transition: background 120ms, transform 100ms;
  }
  body.desktop .menu-row:hover,
  body.desktop .item-list .item:hover,
  body.desktop .schedule-card:hover,
  body.desktop .past-job-row:hover,
  body.desktop .team-row:hover {
    background: rgba(255,255,255,0.025);
  }

  /* ─── Buttons: focus ring on desktop ─── */
  body.desktop button:focus-visible,
  body.desktop .ds-item:focus-visible,
  body.desktop .ds-bell:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* ═══════════════════════════════════════════════════════════════ */
  /* ─── Splash: full-screen two-pane layout (desktop) ──────────── */
  /* ═══════════════════════════════════════════════════════════════ */
  /* Mobile bit-identical: every rule below is scoped to body.desktop. */
  /* Markup is a parent .splash-screen with TWO children: */
  /*   .splash-logo-wrap  → LEFT pane (brand: logo + FIELD + greet) */
  /*   .splash-actions    → RIGHT pane (form: sign-in + footer) */
  /* The layout: CSS grid, 1.2fr / 1fr, full viewport height. */
  body.desktop #screen-splash .splash-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: 0;
    margin: 0;
  }
  /* ── LEFT pane: brand panel ── */
  body.desktop #screen-splash .splash-logo-wrap {
    flex: none;
    height: 100vh;
    padding: 60px 80px;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #061427 100%);
    position: relative;
    overflow: hidden;
    /* Center the brand stack vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* Keep the parent-level corner glow radials hidden — we re-paint */
  /* them inside the LEFT pane below at sizes proportional to the pane. */
  body.desktop #screen-splash .splash-screen::before,
  body.desktop #screen-splash .splash-screen::after { display: none; }
  body.desktop #screen-splash .splash-logo-wrap::before {
    content: '';
    position: absolute;
    top: -180px; right: -180px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(201,160,78,0.22), transparent 65%);
    pointer-events: none;
  }
  body.desktop #screen-splash .splash-logo-wrap::after {
    content: '';
    position: absolute;
    bottom: -200px; left: -200px;
    width: 580px; height: 580px;
    background: radial-gradient(circle, rgba(93,173,226,0.14), transparent 65%);
    pointer-events: none;
  }
  /* Logo: bigger than the polish pass, sized for half-screen presence. */
  body.desktop #screen-splash .splash-logo {
    width: auto;
    max-width: 320px;
    margin-bottom: 24px;
    filter: drop-shadow(0 10px 30px rgba(201,160,78,0.28));
    position: relative; z-index: 1;
  }
  /* FIELD chip: a touch larger to match the bigger logo. */
  body.desktop #screen-splash .splash-app-label {
    font-size: 14px;
    letter-spacing: 8px;
    padding: 7px 18px;
    margin-bottom: 40px;
    position: relative; z-index: 1;
  }
  /* Welcome / name greeting on the brand pane. */
  body.desktop #screen-splash .splash-greet { position: relative; z-index: 1; }
  body.desktop #screen-splash .splash-greet .l1 {
    font-size: 12px;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.55);
  }
  body.desktop #screen-splash .splash-greet .l2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
  }
  /* ── RIGHT pane: form panel ── */
  body.desktop #screen-splash .splash-actions {
    height: 100vh;
    padding: 60px 80px;
    background: rgba(0,0,0,0.18);
    border-left: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    /* Tighten the inner column so wide monitors do not stretch the button. */
    box-sizing: border-box;
  }
  /* Cap the form column inside the right pane so it does not stretch. */
  body.desktop #screen-splash .splash-actions > * {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Primary button: calmer than mobile, with hover lift + focus ring. */
  body.desktop #screen-splash .splash-btn {
    padding: 15px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(201,160,78,0.25);
  }
  body.desktop #screen-splash .splash-btn:hover {
    box-shadow: 0 6px 18px rgba(201,160,78,0.35);
    transform: translateY(-1px);
  }
  body.desktop #screen-splash .splash-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  /* Stay-signed-in: slight bump in contrast + a real focus ring on the box. */
  body.desktop #screen-splash .splash-remember {
    font-size: 13px;
    margin-top: 16px;
    color: rgba(255,255,255,0.92);
  }
  body.desktop #screen-splash .splash-remember input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  /* Admin trouble link: more presence than 11px muted-grey on desktop. */
  body.desktop #screen-splash .splash-trouble-link {
    font-size: 12px;
    margin-top: 22px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.4px;
  }
  body.desktop #screen-splash .splash-trouble-link:hover {
    color: rgba(255,255,255,0.9);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  body.desktop #screen-splash .splash-trouble-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
  }
  /* Admin login section inputs: real focus rings (keyboard tab-through). */
  body.desktop #screen-splash .splash-input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }
  /* Version footer: 11px is the readable floor on big monitors. */
  body.desktop #screen-splash .splash-version {
    font-size: 11px;
    margin-top: 32px;
  }
  /* ── Narrow-desktop fallback ── */
  /* Below 880px, collapse to a single centered column (right pane only feel). */
  @media (max-width: 880px) {
    body.desktop #screen-splash .splash-screen {
      grid-template-columns: 1fr;
    }
    body.desktop #screen-splash .splash-logo-wrap {
      height: auto;
      padding: 40px 32px;
    }
    body.desktop #screen-splash .splash-actions {
      height: auto;
      padding: 32px 32px 40px;
      border-left: none;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    body.desktop #screen-splash .splash-logo { max-width: 220px; }
    body.desktop #screen-splash .splash-greet .l2 { font-size: 24px; }
  }

  /* ─── Keyboard shortcut help modal ─── */
  #kbd-help-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
  }
  #kbd-help-overlay.open { display: flex; }
  #kbd-help-overlay .kbd-help-card {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    min-width: 360px; max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  }
  #kbd-help-overlay .kbd-help-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
  }
  #kbd-help-overlay .kbd-help-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  #kbd-help-overlay .kbd-help-row:last-child { border-bottom: none; }
  #kbd-help-overlay .kbd-help-row .kbd-help-lab { color: var(--muted); }
  #kbd-help-overlay .kbd-help-row kbd {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 7px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text);
    margin-left: 4px;
  }
  #kbd-help-overlay .kbd-help-close {
    margin-top: 18px;
    font-size: 11px;
    color: var(--muted-2);
    text-align: center;
  }

/* ════════ tabs ════════ */
/* ─── More tab: 3-col card grid + compact header (rewritten 2026-05-07) ─── */
  /* Was 2-col with grid-auto-flow:row dense. Dense packing reordered cards by */
  /* whichever fit best, producing the overlap/jumbling David flagged. The new */
  /* layout: 3-col grid (5 sections fit cleanly), no dense, align stretch.    */
  /* 2026-05-10: switched from CSS Grid (3 fixed-row equal-height columns,    */
  /* leaving big empty tails under short cards like PO Tracker / Chauncey)    */
  /* to CSS multi-column on a .more-masonry wrapper. Cards now pack into the  */
  /* shortest column instead of a fixed 3xN grid. .scroll-body returns to     */
  /* normal block flow so profile-card, quick-stats, and more-bottom stack   */
  /* full-width above and below the masonry without grid-spanning hacks.     */
  body.desktop #screen-more .scroll-body {
    display: block;
  }
  body.desktop #screen-more .more-masonry {
    column-count: 3;
    column-gap: 12px;
    column-fill: balance;
  }
  body.desktop #screen-more .more-masonry > .menu-section {
    /* break-inside keeps a card from being sliced across two columns; */
    /* display block + width 100% pin it inside one column.            */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    width: 100%;
    margin: 0 0 12px;
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px 8px;
  }
  /* Compact profile card: was a 1400px banner with the chevron 1300px from   */
  /* the avatar. Now a tighter 18px-padded header with the components grouped. */
  body.desktop #screen-more .scroll-body > .profile-card {
    padding: 24px 24px;
    min-height: 96px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy-card) 0%, #234a7a 100%);
    border: 1px solid var(--border);
    align-items: center;
    margin: 0 0 12px;
  }
  body.desktop #screen-more .scroll-body > .profile-card::before {
    /* Hide the gold radial blob baked into mobile .profile-card — sized for a */
    /* 360px-wide phone card, looks like an artifact at desktop scale.          */
    display: none;
  }
  body.desktop #screen-more .scroll-body > .profile-card:hover {
    border-color: rgba(201,160,78,0.35);
    background: rgba(255,255,255,0.025);
  }
  /* Light mode: the base gradient ends in a hardcoded dark blue (#234a7a) that
     never flips, leaving this header card a dark panel on the light page. Flat
     light card to match the mobile More profile card. */
  body.theme-light.desktop #screen-more .scroll-body > .profile-card,
  body.theme-light.desktop #screen-more .scroll-body > .profile-card:hover {
    background: var(--navy-card);
    border: 1px solid var(--border);
  }
  /* Cap quick-stats so the 2 stat cells are not 700px-wide hollow boxes */
  body.desktop #screen-more .scroll-body > .quick-stats {
    max-width: 560px;
    margin: 0 auto 12px;
    gap: 14px;
  }
  /* Same cap on the search bar — without this, the input stretches full
     content width (~1200px) above 3 narrow columns of cards. Mirrors
     quick-stats so the two centered controls visually align. */
  body.desktop #screen-more .scroll-body > .more-search {
    max-width: 560px;
    margin: 0 auto 12px;
  }
  body.desktop #screen-more .scroll-body > .more-search-empty {
    max-width: 560px;
    margin: 0 auto 8px;
  }
  body.desktop #screen-more .menu-section .heading {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: 0;
    font-weight: 700;
  }
  body.desktop #screen-more .menu-list {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
  }
  body.desktop #screen-more .menu-row {
    border-radius: 10px;
    padding: 11px 12px;
    border-bottom: 0 !important;
    margin-bottom: 2px;
    transition: background 120ms;
  }
  body.desktop #screen-more .menu-row:hover {
    background: rgba(255,255,255,0.05);
  }
  /* Security sub-section (sessions toggle) — match menu-row treatment so it  */
  /* does not look like a separate card-within-card.                           */
  body.desktop #screen-more .sessions-section {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 6px;
  }
  body.desktop #screen-more .sessions-toggle {
    border-radius: 10px;
    padding: 11px 12px;
    transition: background 120ms;
  }
  body.desktop #screen-more .sessions-toggle:hover {
    background: rgba(255,255,255,0.05);
  }
  /* Footer: small centered version label below the masonry */
  body.desktop #screen-more .scroll-body > .more-bottom {
    text-align: center;
    padding: 18px 0 8px;
    font-size: 11px;
    color: var(--muted-2);
    letter-spacing: 0.6px;
  }
  /* Narrower screen widths (laptops + split-pane halves): collapse so
     cards do not become slivers. */
  @container screen (max-width: 1180px) {
    body.desktop #screen-more .more-masonry {
      column-count: 2;
    }
  }
  @container screen (max-width: 820px) {
    body.desktop #screen-more .more-masonry {
      column-count: 1;
    }
  }

  /* Splash trouble-link / back hint colors stay consistent on desktop */

/* ════════ tables ════════ */
/* ─── Generic desktop table ─── */
  body.desktop .dt {
    width: 100%;
    border-collapse: collapse;
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    font-size: 13px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  }
  body.theme-light.desktop .dt thead th {
    /* rgba(0,0,0,0.22) reads as a dark slate bar on the white table surface;
       use a pale neutral header with darker label text in light mode. */
    background: #eef1f6;
    color: var(--muted-2);
  }
  body.desktop .dt thead th {
    background: rgba(0,0,0,0.22);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 11px 14px;
    text-align: left;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  body.desktop .dt thead th.num { text-align: right; }
  body.desktop .dt thead th.no-sort { cursor: default; }
  body.desktop .dt thead th:hover:not(.no-sort) {
    color: var(--text);
    background: rgba(255,255,255,0.04);
  }
  body.desktop .dt thead th:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    color: var(--text);
  }
  body.desktop .dt thead th .dt-sort-arrow {
    color: var(--gold);
    font-size: 9px;
    margin-left: 4px;
    opacity: 0;
  }
  body.desktop .dt thead th.sort-asc .dt-sort-arrow,
  body.desktop .dt thead th.sort-desc .dt-sort-arrow { opacity: 1; }
  body.desktop .dt thead th.sort-asc .dt-sort-arrow::before { content: '▲'; }
  body.desktop .dt thead th.sort-desc .dt-sort-arrow::before { content: '▼'; }
  body.desktop .dt tbody tr {
    transition: background 100ms;
  }
  body.desktop .dt tbody tr.clickable { cursor: pointer; }
  /* Subtle zebra striping — eases horizontal tracking across wide data tables
     (1400px content). Kept faint so it reads as rhythm, not banding; hover
     wins via source order below. */
  body.desktop .dt tbody tr:nth-child(even) { background: rgba(255,255,255,0.018); }
  body.theme-light.desktop .dt tbody tr:nth-child(even) { background: rgba(15,39,71,0.025); }
  body.desktop .dt tbody tr:hover,
  body.theme-light.desktop .dt tbody tr:hover { background: rgba(201,160,78,0.10); }
  body.desktop .dt tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text);
    vertical-align: middle;
  }
  body.desktop .dt tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  body.desktop .dt tbody td.muted { color: var(--muted); }
  body.desktop .dt tbody tr:last-child td { border-bottom: none; }
  body.desktop .dt tbody td.cell-name {
    font-weight: 600;
    color: var(--text);
  }
  body.desktop .dt tbody td.cell-avatar {
    width: 38px; padding-right: 0;
  }
  body.desktop .dt-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(201,160,78,0.16);
    color: var(--gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
    border: 1px solid rgba(201,160,78,0.32);
  }
  body.desktop .dt .dt-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--muted);
    margin-right: 4px;
  }
  body.desktop .dt .dt-pill.gold {
    background: rgba(201,160,78,0.16);
    border-color: rgba(201,160,78,0.34);
    color: var(--gold);
  }
  body.desktop .dt .dt-pill.red {
    background: rgba(255,87,87,0.16);
    border-color: rgba(255,87,87,0.34);
    color: var(--red);
  }
  body.desktop .dt .dt-pill.muted {
    background: rgba(139,165,198,0.10);
    color: var(--muted);
  }
  body.desktop .dt-loading,
  body.desktop .dt-empty,
  body.desktop .dt-error {
    text-align: center;
    padding: 40px 16px;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: rgba(0,0,0,0.12);
  }
  body.desktop .dt-error { color: var(--red); border-color: rgba(255,87,87,0.32); }

  /* ─── Triage as responsive 2-col grid of cards ─── */
  body.desktop #triage-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
    align-items: start;
    padding: 8px 0 24px;
  }
  body.desktop #triage-list .triage-card { margin: 0; }

  /* ─── Past Jobs / Admin Users / Directory ─── */
  body.desktop #past-jobs-list,
  body.desktop #admin-users-list,
  body.desktop #directory-list {
    padding: 0;
  }

/* ════════ polish-2 ════════ */
/* ─── REVENUE ─── */
  body.desktop #screen-mypay #rev-body {
    max-width: var(--ds-content-max); /* was 1100px → 2026-05-09: too much empty margin
                                         on wide displays; 1400 lets the 2-col row grid
                                         below actually have room to breathe. */
    margin: 0 auto;
    padding: 24px 32px 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  /* #rev-body is the scroll container (height = viewport), so its flex
     children must NOT shrink — otherwise a long page (e.g. the program
     drill-in's tall section list) compresses fixed cards like the Program
     Total, and their content spills out the bottom. flex-shrink is ignored
     on the .rev-md grid variant, so this is safe across both layouts. */
  body.desktop #screen-mypay #rev-body > * { flex-shrink: 0; }
  body.desktop #screen-mypay .rev-month-nav {
    align-self: center;
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
  }
  body.desktop #screen-mypay .rev-toggle,
  body.desktop #screen-mypay .rev-view-mode {
    align-self: center;
  }
  body.desktop #screen-mypay .mypay-mtd {
    background: linear-gradient(135deg, rgba(201,160,78,0.10) 0%, rgba(201,160,78,0.02) 100%);
    border: 1px solid rgba(201,160,78,0.30);
    border-radius: 14px;
    padding: 28px 32px;
    margin: 0;
    text-align: center;
  }
  body.desktop #screen-mypay .mypay-mtd .lab {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
  }
  body.desktop #screen-mypay .mypay-mtd .amt {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 8px 0 4px;
    font-variant-numeric: tabular-nums;
  }
  body.desktop #screen-mypay .mypay-mtd .sub { color: var(--muted); font-size: 13px; }
  body.desktop #screen-mypay .mypay-section {
    margin: 0;
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px 6px;
  }
  body.desktop #screen-mypay .mypay-section .heading {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  body.desktop #screen-mypay .rev-region-row,
  body.desktop #screen-mypay .rev-pm-row,
  body.desktop #screen-mypay .rev-proj-row {
    border-radius: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 100ms;
  }
  body.desktop #screen-mypay .rev-region-row:last-child,
  body.desktop #screen-mypay .rev-pm-row:last-child,
  body.desktop #screen-mypay .rev-proj-row:last-child { border-bottom: 0; }
  body.desktop #screen-mypay .rev-region-row:hover,
  body.desktop #screen-mypay .rev-pm-row:hover {
    background: rgba(255,255,255,0.04);
  }
  /* Row-list 2-column grid — auto-fills the wider content area instead of
     leaving single rows in a sparse 1400px-wide column. minmax(560px, 1fr)
     gracefully degrades to 1 column at narrow widths and to 2 cols at the
     1400px content cap. column-gap separates the two grid lanes; row-gap 0
     because each .rev-*-row already has its own 1px bottom border between
     siblings (intentional — we keep that as the inter-row hairline). */
  body.desktop #screen-mypay .mypay-history {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
  }
  body.desktop #screen-mypay .mypay-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: rgba(0,0,0,0.12);
  }

  /* ─── REVENUE master-detail (desktop, top view, admin/RM, >1 region) ───
     Toggled on by renderRevenueMasterDetail() via #rev-body.rev-md. The
     screen-mypay scroll-body provides the page scroll; the master rail
     position-stickies inside it so the regions list stays visible while
     a long PM/project detail scrolls. */
  body.desktop #screen-mypay #rev-body.rev-md {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
    row-gap: 14px;
    align-items: start;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-toolbar,
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-strip {
    grid-column: 1 / -1;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-toolbar {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 12px;
  }
  /* Strip = compact KPI replacement for the giant gold hero. One row
     of "$total · scope · counts · date range". Keeps the gold accent
     so the headline number still pops without eating 100px of height. */
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-strip {
    background: linear-gradient(135deg, rgba(201,160,78,0.12) 0%, rgba(201,160,78,0.02) 100%);
    border: 1px solid rgba(201,160,78,0.30);
    border-radius: 12px;
    padding: 14px 22px;
    display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 14px;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-strip .big {
    font-size: 28px; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-strip .meta { color: var(--muted); font-size: 12.5px; }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-strip .live-pill { margin-left: 6px; }

  /* Master rail */
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-master {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    align-self: start;
    position: sticky; top: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-region {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px; row-gap: 2px;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 100ms;
    border-left: 3px solid transparent;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-region .name { font-weight: 600; color: #fff; font-size: 14px; }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-region .rev  { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-region .meta { color: var(--muted); font-size: 11px; grid-column: 1 / 2; }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-region .share { color: var(--gold); font-size: 12px; font-weight: 600; text-align: right; }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-region:hover { background: rgba(255,255,255,0.04); }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-region.selected {
    background: rgba(201,160,78,0.08);
    border-left-color: var(--gold);
  }

  /* Detail pane */
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-detail {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    min-height: 240px;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-detail-head {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-detail-head .name {
    font-size: 18px; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: 0.8px;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-detail-head .meta {
    color: var(--muted); font-size: 12.5px; margin-top: 4px;
  }
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-section-heading {
    color: var(--gold); font-size: 11px; letter-spacing: 1px;
    text-transform: uppercase; margin: 16px 0 8px;
  }
  /* Inside the detail pane the rows are already in a single column — don't
     stack the page-level 2-col mypay-history grid on top of it. */
  body.desktop #screen-mypay #rev-body.rev-md .rev-md-detail .mypay-history {
    display: block;
  }

  /* ─── Light theme overrides for the master-detail layout ───
     This whole rev-md section was hardcoded color:#fff against a navy
     card background; on light theme those text rules turn into white-on-
     white. Override the text colors to navy ink + flip the card surfaces
     to white-on-light. David flagged the big total + region names as
     unreadable 2026-05-14. */
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-strip {
    background: linear-gradient(135deg, rgba(168,123,29,0.12) 0%, rgba(168,123,29,0.02) 100%);
    border: 1px solid rgba(168,123,29,0.40);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-strip .big {
    color: var(--text);   /* big total — was #fff (invisible on light) */
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-strip .meta {
    color: var(--muted);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-master {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(10,29,54,0.06);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-region .name {
    color: var(--text);   /* region name — was #fff */
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-region .rev {
    color: #1f7a44;       /* forest green for $ amount */
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-region .meta {
    color: var(--muted);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-region .share {
    color: var(--gold);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-region:hover {
    background: rgba(10,29,54,0.04);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-region.selected {
    background: rgba(168,123,29,0.12);
    border-left-color: var(--gold);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-detail {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(10,29,54,0.06);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-detail-head {
    border-bottom: 1px solid var(--border);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-detail-head .name {
    color: var(--text);   /* detail headline — was #fff */
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-detail-head .meta {
    color: var(--muted);
  }
  body.desktop.theme-light #screen-mypay #rev-body.rev-md .rev-md-section-heading {
    color: var(--gold);
  }

  /* ─── TEAM ─── */
  body.desktop #screen-team .scroll-body {
    max-width: var(--ds-content-max);
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }
  /* Stats row: more breathing room on desktop */
  body.desktop #screen-team .team-stats {
    gap: 16px;
    padding: 16px 0;
  }
  body.desktop #screen-team .team-stats .day-stat {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
  }
  body.desktop #screen-team .team-stats .day-stat .num { font-size: 28px; }
  /* Roster padding only — column-template owned by the canonical rule       */
  /* further down the file (search "PM card grid"). Splitting padding off    */
  /* keeps cascade obvious if the column rule ever moves. */
  body.desktop #screen-team .team-pm-grid {
    padding: 12px 0 24px !important;
  }
  body.desktop #screen-team .team-pm-card {
    transition: transform 120ms, box-shadow 120ms, border-color 120ms;
  }
  body.desktop #screen-team .team-pm-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    border-color: rgba(201,160,78,0.35);
  }
  body.desktop #screen-team .team-scale-toggle {
    align-self: center;
    margin: 0 auto 12px;
    max-width: 360px;
  }
  body.desktop #screen-team .team-region-strip {
    padding: 12px 0;
  }
  body.desktop #screen-team .section-title {
    padding: 16px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }

  /* ─── SCHEDULE ─── */
  body.desktop #screen-schedule .scroll-body {
    max-width: var(--ds-content-max);
    margin: 0 auto;
    padding: 16px 32px 60px;
  }
  body.desktop #screen-schedule .week-strip {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin: 0 0 16px;
  }
  body.desktop #screen-schedule .week-strip > * {
    /* let JS-rendered day cells breathe */
  }
  body.desktop #screen-schedule .month-grid-wrap {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
  }
  body.desktop #screen-schedule .month-grid {
    /* Larger calendar cells for desktop */
    gap: 6px !important;
  }
  body.desktop #screen-schedule .week-summary {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 12px;
  }
  /* Day-view timeline: explicit 3-col on desktop (2026-05-10). Same         */
  /* rationale as Team PM grid — auto-fill at minmax(360px, 1fr) collapsed  */
  /* to 1 narrow column on common laptop widths, leaving most of the page  */
  /* horizontally empty. Each .timeline-row keeps its own time-col + rail  */
  /* dot internally; the per-row rail becomes a stop indicator rather than */
  /* a continuous itinerary line, but rows aren't sliced across columns.   */
  body.desktop #screen-schedule .timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  body.desktop #screen-schedule .timeline > * {
    margin: 0 !important;
  }
  @container screen (max-width: 1180px) {
    body.desktop #screen-schedule .timeline {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container screen (max-width: 820px) {
    body.desktop #screen-schedule .timeline {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  /* Date-range header gets more weight on desktop */
  body.desktop #screen-schedule .internal-header .big {
    font-size: 22px;
  }

  /* ─── SYNC STATUS / PENDING UPLOADS ─── */
  body.desktop #screen-sync-status .menu-section,
  body.desktop #screen-pending-uploads .menu-section {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 14px;
  }
  body.desktop #screen-sync-status .menu-list,
  body.desktop #screen-pending-uploads .menu-list {
    background: transparent;
    border: 0;
    padding: 0;
  }
  body.desktop #screen-sync-status .menu-row,
  body.desktop #screen-pending-uploads .menu-row {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 10px 12px;
  }
  body.desktop #screen-sync-status .menu-row:last-child,
  body.desktop #screen-pending-uploads .menu-row:last-child { border-bottom: 0; }
  body.desktop #screen-sync-status .menu-row:hover,
  body.desktop #screen-pending-uploads .menu-row:hover {
    background: rgba(255,255,255,0.03);
  }

  /* ─── AI MEMORY / KNOWLEDGE / EASTER EGGS / ANNOUNCEMENTS ─── */
  body.desktop #screen-ai-memory .scroll-body,
  body.desktop #screen-admin-knowledge .scroll-body,
  body.desktop #screen-admin-easter-eggs .scroll-body,
  body.desktop #screen-pres-announcements .scroll-body {
    /* already capped at 1400px from Phase 1 */
  }
  /* Edit screens centered narrower for form readability */
  body.desktop #screen-admin-knowledge-edit .scroll-body,
  body.desktop #screen-admin-easter-eggs-edit .scroll-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 32px 60px;
  }

  /* ─── PROJECT DETAIL / PROJECT SCHEDULE light polish ─── */
  body.desktop #screen-project-detail .scroll-body,
  body.desktop #screen-project-schedule .scroll-body {
    /* keep existing layout, just give it the wider rail (already from Phase 1) */
  }

  /* ─── HEATMAP — keep map full-bleed, polish controls ─── */
  body.desktop #screen-heatmap .scroll-body {
    /* already overridden by existing `padding: 0; overflow: hidden` rule */
  }

/* ════════ polish-3 ════════ */
/* ─── TODAY ─── */
  body.desktop #screen-today .scroll-body {
    /* width:100% is load-bearing (same flex shrink-wrap trap as Projects):
       .screen is a column flex and margin:0 auto collapsed this to its
       content width, so the greeting/stats/schedule sat in a narrow ~700px
       column adrift in empty navy. Fill the content area so the job-list
       goes 3-up and the day-schedule panel spans the width like Team does. */
    width: 100%;
    box-sizing: border-box;
    max-width: var(--ds-content-max);
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }
  body.desktop #screen-today .greet {
    text-align: center;
    padding: 28px 0 18px;
  }
  body.desktop #screen-today .greet .greet-line {
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  body.desktop #screen-today .greet .greet-name {
    font-size: 26px;
    font-weight: 700;
    margin: 6px 0 4px;
  }
  body.desktop #screen-today .greet .greet-date {
    font-size: 13px;
    color: var(--muted);
  }
  body.desktop #screen-today .day-stats {
    gap: 16px;
    padding: 8px 0 16px;
    max-width: 600px;
    margin: 0 auto;
  }
  body.desktop #screen-today .day-stats .day-stat {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    flex: 1;
  }
  body.desktop #screen-today .day-stats .day-stat .num {
    font-size: 30px;
  }
  body.desktop #screen-today .section-title {
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  /* Job list: flex-wrap so the last-row card(s) grow back to fill instead
     of leaving phantom auto-fill tracks. 4 jobs in 3-track-wide container
     was rendering as 3 + (1 card + 2 holes) — same gap pattern as the
     Team / Schedule grids. */
  body.desktop #screen-today .job-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    padding: 8px 0 24px;
  }
  body.desktop #screen-today .job-list > * { margin: 0 !important; }
  body.desktop #screen-today .job-list > .job-card {
    flex: 1 1 calc(33.333% - 9.33px);
    min-width: 360px;
    box-sizing: border-box;
  }
  @container screen (max-width: 1180px) {
    body.desktop #screen-today .job-list > .job-card {
      flex-basis: calc(50% - 7px);
    }
  }
  @container screen (max-width: 820px) {
    body.desktop #screen-today .job-list > .job-card {
      flex-basis: 100%;
    }
  }
  /* Empty state (Chauncey "nothing on the books" message) spans the row. */
  body.desktop #screen-today .job-list > .empty-state {
    flex: 0 0 100%;
  }

  /* Chauncey banner stays full-width, padded */
  body.desktop #screen-today .chauncey-banner { margin: 0 0 12px; }

  /* Install hint hidden on desktop (PWA install is iOS Safari only) */
  body.desktop #screen-today .install-hint { display: none !important; }

  /* ─── PROJECT DETAIL ─── */
  /* Flex-wrap, not CSS grid: a lonely mid-section card (e.g. only Customer PM
     filled in) grows to fill the row instead of leaving a phantom half-row
     gap. Mirrors the Project Schedule layout so the two screens are visually
     consistent. */
  body.desktop #screen-project-detail .scroll-body {
    max-width: var(--ds-content-max);
    margin: 0 auto;
    padding: 24px 32px 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px;
  }
  body.desktop #screen-project-detail .scroll-body > .proj-hero,
  body.desktop #screen-project-detail .scroll-body > .proj-stats {
    flex: 0 0 100%;
  }
  /* Mid-section cards pair up at ~half-width with a min-width safety; a
     lonely card grows back to 100% via flex-grow:1. */
  body.desktop #screen-project-detail .scroll-body > .proj-card:not(#proj-jobs-section):not(#proj-files-section) {
    flex: 1 1 calc(50% - 9px);
    min-width: 320px;
  }
  body.desktop #screen-project-detail .proj-hero {
    background: linear-gradient(135deg, rgba(201,160,78,0.10) 0%, rgba(201,160,78,0.03) 60%, transparent 100%);
    border: 1px solid rgba(201,160,78,0.28);
    border-radius: 14px;
    padding: 26px 30px;
  }
  /* The mobile gold edge-bar makes no sense as a freestanding card on
     desktop — suppress it there. */
  body.desktop #screen-project-detail .proj-hero::before { display: none; }
  body.desktop #screen-project-detail .proj-hero .ph-name {
    font-size: 28px;
  }
  body.desktop #screen-project-detail .proj-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0;
  }
  body.desktop #screen-project-detail .proj-stats .ps-cell {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px;
    transition: background 0.15s, border-color 0.15s;
  }
  body.desktop #screen-project-detail .proj-stats .ps-cell:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(201,160,78,0.3);
  }
  body.desktop #screen-project-detail .proj-stats .ps-cell .num {
    font-size: 28px;
  }
  body.desktop #screen-project-detail .proj-card {
    margin: 0;
    transition: background 0.15s, border-color 0.15s;
  }
  body.desktop #screen-project-detail .proj-card.tappable:hover {
    background: rgba(201,160,78,0.04);
    border-color: rgba(201,160,78,0.35);
  }

  /* ─── PROJECT SCHEDULE ─── (overrides further down in /polish-3 take over) */
  body.desktop #screen-project-schedule .scroll-body {
    max-width: var(--ds-content-max);
    margin: 0 auto;
    padding: 24px 32px 60px;
  }

  /* ─── HEATMAP ─── */
  /* Controls panel: pin top-right, narrower, on desktop. Coords are
     relative to .scroll-body (now position:relative), which already sits
     below the internal-header — no header-height offset needed. */
  body.desktop #screen-heatmap .hm-controls {
    left: auto !important;
    right: 16px !important;
    top: 16px !important;
    /* Clamp so the panel can't overflow on a 1024-wide laptop; falls
       back to the full 380px on anything wider than ~412px. */
    width: min(380px, calc(100% - 32px));
    max-width: 380px;
  }
  /* Legend: pin to bottom-right, stacked */
  body.desktop #screen-heatmap .hm-legend {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background: rgba(10,29,54,0.93);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(244,196,48,0.22);
    border-radius: 12px;
    padding: 10px 14px;
    z-index: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55);
    max-width: 220px;
  }
  body.desktop #screen-heatmap #heatmap-map {
    inset: 0 !important;
  }

  /* ─── DETAIL right-column: bring quick contact actions into the rail ─── */
  /* The CPM call/email and Directions are inside .hero on Detail; on desktop
     we keep them in the hero (full-span) but make the buttons larger touch
     targets. No DOM move — just bigger sizing. */
  body.desktop #screen-detail .hero .actions {
    gap: 10px;
  }
  body.desktop #screen-detail .hero-btn {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* ─── Modals: cap width on desktop so they don't stretch ─── */
  body.desktop .pto-modal {
    max-width: 520px !important;
  }
  /* Generic centered modal cards (admin-user-modal etc.): if the modal has
     an obvious "card" child, cap it at 720px on desktop for readability.
     #notif-overlay is intentionally NOT in this list — it has its own
     right-anchored side-panel layout further down (see "Notification
     overlay" block). */
  body.desktop #admin-user-modal > div,
  body.desktop #directory-modal > div,
  body.desktop #search-modal > div {
    max-width: 720px;
    width: 90vw;
    margin: 0 auto;
  }

  /* ─── Notification row interaction polish ─── */
  body.desktop .notif-row {
    transition: background 100ms;
  }
  body.desktop .notif-row:hover {
    background: rgba(255,255,255,0.04);
  }

  /* ─── Files screen polish ─── */
  body.desktop #screen-files .scroll-body {
    max-width: var(--ds-content-max);
  }

  /* ─── PROJECT DETAIL / SCHEDULE — fact grids ─── */
  /* Mobile uses CSS grid auto-fit; on desktop the card itself is ~560px wide
     (half of --ds-content-max in the 2-col scroll-body), and a single .pc-row
     stretched across that whole width left "Price" on the left and "$1900"
     on the right with 500px of empty air between them. Switch to flex-wrap
     with capped row width so each k:v pair stays compact and rows pack
     left-to-right with a clean gutter. */
  body.desktop #screen-project-detail .pc-grid,
  body.desktop #screen-project-schedule .pc-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px 36px;
    grid-template-columns: none !important;
  }
  body.desktop #screen-project-detail .pc-grid .pc-row,
  body.desktop #screen-project-schedule .pc-grid .pc-row {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 340px;
    /* Keep mobile's space-between so label-left / value-right scans, just
       within a sane row width instead of the whole card. */
  }

  /* Schedule summary 2x2 — same story when only 1-2 cells survive after
     .is-empty collapse: the stacked label/value isn't the gap, the cell
     itself becomes too wide. Cap each cell so multiple-cell rows stay
     readable and a 1-cell row doesn't look like a banner. */
  body.desktop #screen-project-detail .pc-summary-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px 36px;
    grid-template-columns: none !important;
  }
  body.desktop #screen-project-detail .pc-summary-cell {
    flex: 0 1 auto;
    min-width: 180px;
    max-width: 260px;
  }

/* ════════ fixes ════════ */
/* ─── Modal centering for bottom-sheet patterns ─── */
  /* Inline `align-items:flex-end` on the wrapper makes the card hug the
     bottom of the screen — fine on phones, awkward on desktop. Center it. */
  body.desktop #directory-modal,
  body.desktop #admin-user-modal {
    align-items: center !important;
  }
  body.desktop #directory-modal > div,
  body.desktop #admin-user-modal > div {
    max-width: 640px !important;
    max-height: 86vh !important;
    width: 90vw !important;
    border-radius: 14px !important;
    border: 1px solid rgba(201,160,78,0.4) !important;
    margin: 0 !important;
  }
  /* Their inline border-top-left/right-radius is set explicitly; CSS class
     override above forces overall border-radius which wins for unspecified
     corners, but inline still pins TL/TR. Re-zero those via specific keys. */
  body.desktop #directory-modal > div,
  body.desktop #admin-user-modal > div {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
  }

  /* search-modal cap was a blind guess — drop it entirely. */
  body.desktop #search-modal > div {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* ─── Heatmap legend wider for the program list ─── */
  body.desktop #screen-heatmap .hm-legend {
    max-width: 320px !important;
  }
  /* The program legend has long names — let it grow taller too */
  body.desktop #screen-heatmap #hm-legend-program {
    max-width: 320px !important;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* ─── Sidebar: scroll if items overflow short viewports ─── */
  body.desktop #desktop-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* Slim scrollbar for the sidebar itself (custom-scrollbar treatment) */
  body.desktop #desktop-sidebar::-webkit-scrollbar { width: 6px; }
  body.desktop #desktop-sidebar::-webkit-scrollbar-track { background: transparent; }
  body.desktop #desktop-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
  }
  body.desktop #desktop-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.12);
  }

  /* ─── Detail: keep ONLY action button sticky; status row scrolls ─── */
  /* Status row in single-col flow — was previously pinned to col 2 but
     we no longer have a right rail. Just flow normally. */
  body.desktop #screen-detail .scroll-body > #status-row {
    position: static !important;
    grid-column: auto !important;
    align-self: stretch !important;
  }

  /* ─── Today greet typography precedence ─── */
  /* Existing globals at line 381-390 set greet-line=11px small-cap, etc.
     My desktop overrides need higher specificity to win cleanly. */
  body.desktop #screen-today .greet .greet-line {
    font-size: 12px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
  }
  body.desktop #screen-today .greet .greet-name {
    font-size: 26px !important;
    font-weight: 700 !important;
    margin: 6px 0 4px !important;
  }
  body.desktop #screen-today .greet .greet-date {
    font-size: 13px !important;
    color: var(--muted) !important;
  }

  /* ─── More tab: chevron breathing room ─── */
  body.desktop #screen-more .menu-row .right,
  body.desktop #screen-more .menu-row .chevron,
  body.desktop #screen-more .menu-row .arrow {
    padding-right: 4px;
  }

  /* ─── Detail strip-facts: center cells on desktop with 3 columns ─── */
  body.desktop #screen-detail .strip-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  body.desktop #screen-detail .strip-facts .cell.earnings[style*="display:none"] {
    display: none !important;
  }
  /* Hide earnings cell collapse — when displayed via JS toggle, it joins as 3rd col */

  /* ─── Project Detail: pc-summary-grid stays 2-col inside its card ─── */
  body.desktop #screen-project-detail .pc-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ─── Splash: avoid sidebar leak on browsers without :has() support ─── */
  /* Defensive — works only when :has() supported, but no harm if not.
     Add an explicit body-class fallback that desktop bootstrap script can
     toggle if we ever need to drop :has(). */
  body.desktop.splash-active #desktop-sidebar { display: none; }
  body.desktop.splash-active #app { width: 100vw; margin-left: 0; }

  /* ─── Job-list breakpoint sanity ─── */
  /* On a typical 13" laptop window (1280-1440px), the 380px minmax can
     squeeze. Drop floor to 340px so 2-up still fits comfortably. */
  body.desktop #screen-today .job-list {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  /* ─── Detail action-button readability when in static-status state ─── */
  body.desktop #screen-detail #primary-action-wrap .static-status {
    font-size: 14px !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
  }

  /* ─── Sidebar bell column gap fix ─── */
  /* On narrow sidebars the two bell cells can crowd. Tighten gap. */
  body.desktop #desktop-sidebar .ds-bells {
    gap: 8px;
  }

/* ════════ rev-team ════════ */
/* ═══════════════════ REVENUE ═══════════════════ */

  /* Flatten the inner card — .mypay-history was its own card with bg/border/
     radius INSIDE .mypay-section (also a card on desktop). Drop the inner
     chrome so we get one clean card per section. */
  body.desktop #screen-mypay .mypay-history {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Region rows: 3-col grid (name+sub | share-pct | rev | arrow). Rids the
     huge flex gap that sat between name and revenue at desktop widths. */
  body.desktop #screen-mypay .rev-region-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 70px 140px 16px !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 13px 14px 17px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  body.desktop #screen-mypay .rev-region-row:last-child { border-bottom: 0 !important; }
  body.desktop #screen-mypay .rev-region-row .name { margin: 0 !important; }
  body.desktop #screen-mypay .rev-region-row .share-pct { margin: 0 !important; min-width: 0 !important; }
  body.desktop #screen-mypay .rev-region-row .rev { margin: 0 !important; }
  body.desktop #screen-mypay .rev-region-row .arrow {
    color: var(--muted-2);
    font-size: 18px;
    text-align: center;
  }

  /* PM rows: 4-col grid (avatar | name+sub | rev | arrow) */
  body.desktop #screen-mypay .rev-pm-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 140px 16px !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 12px 14px 16px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  body.desktop #screen-mypay .rev-pm-row:last-child { border-bottom: 0 !important; }
  body.desktop #screen-mypay .rev-pm-row .av { margin: 0 !important; }
  body.desktop #screen-mypay .rev-pm-row .rev { margin: 0 !important; }
  body.desktop #screen-mypay .rev-pm-row .arrow {
    color: var(--muted-2);
    font-size: 18px;
    text-align: center;
  }

  /* Reposition share-bar to fit the new row padding */
  body.desktop #screen-mypay .rev-share-bar {
    left: 14px !important;
    right: 14px !important;
    bottom: 5px !important;
  }

  /* Project rows: tighten left accent + clean borders */
  body.desktop #screen-mypay .rev-proj-row {
    background: rgba(201,160,78,0.04) !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 12px 14px 12px 18px !important;
    margin: 0 !important;
  }
  body.desktop #screen-mypay .rev-proj-row:last-child { border-bottom: 0 !important; }

  /* Hover: subtle bg highlight, no transform-shift */
  body.desktop #screen-mypay .rev-region-row:hover,
  body.desktop #screen-mypay .rev-pm-row:hover {
    background: rgba(255,255,255,0.04) !important;
  }

  /* Section heading: lift outside the card visually */
  body.desktop #screen-mypay .mypay-section .heading {
    margin: 0 0 12px 2px !important;
    color: var(--gold) !important;
  }

  /* Empty state inside a section card */
  body.desktop #screen-mypay .mypay-section .mypay-empty {
    border: 0 !important;
    background: transparent !important;
    padding: 24px 8px !important;
  }

  /* ═══════════════════ TEAM ═══════════════════ */

  /* PM card grid: flex-wrap 3-up on desktop. Was a CSS grid (`repeat(3, 1fr)`)
     which left the last row with visible empty cells when the PM count
     wasn't a multiple of 3 (e.g. 10 PMs → row 4 had 1 card + 2 holes).
     Flex-grow:1 makes a lonely card fill its row, and the same min-width-
     based breakpoints fall to 2 / 1 cards-per-row on narrower laptops.
     align-items: start keeps short "OFF" cards from stretching to match a
     tall expanded-job-row card in the same row. */
  body.desktop #screen-team .team-pm-grid {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    grid-template-columns: none !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  body.desktop #screen-team .team-pm-grid > .team-pm-card {
    flex: 1 1 calc(33.333% - 9.33px);
    min-width: 340px;
    box-sizing: border-box;
  }
  @container screen (max-width: 1180px) {
    body.desktop #screen-team .team-pm-grid > .team-pm-card {
      flex-basis: calc(50% - 7px);
    }
  }
  @container screen (max-width: 820px) {
    body.desktop #screen-team .team-pm-grid > .team-pm-card {
      flex-basis: 100%;
    }
  }

  /* Week + Month single-child wrappers — each of these renderers injects
     exactly ONE child into team-pm-grid, so it should span the whole row. */
  body.desktop #screen-team .team-pm-grid > .team-week-grid-wrap,
  body.desktop #screen-team .team-pm-grid > .team-month-list,
  body.desktop #screen-team .team-pm-grid > .pm-cal-wrap {
    flex: 0 0 100%;
  }

  /* ─── Team Month — Step 1 (PM list with density bars) ─── */
  /* Same flex-wrap 3-up as Day view so the last-row card(s) grow back to
     fill instead of leaving phantom cells. "Pick a PM…" pick-label header
     spans the full row. */
  body.desktop #screen-team .team-pm-grid > .team-month-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
    padding: 12px 0 24px;
  }
  body.desktop #screen-team .team-month-list > .pick-label {
    flex: 0 0 100%;
    padding: 0 4px 4px;
  }
  body.desktop #screen-team .team-month-list > .pm-list-card {
    flex: 1 1 calc(33.333% - 9.33px);
    min-width: 320px;
    margin-bottom: 0;
    transition: background 120ms, border-color 120ms;
  }
  body.desktop #screen-team .team-month-list > .pm-list-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(201,160,78,0.32);
  }
  @container screen (max-width: 1180px) {
    body.desktop #screen-team .team-month-list > .pm-list-card {
      flex-basis: calc(50% - 7px);
    }
  }
  @container screen (max-width: 820px) {
    body.desktop #screen-team .team-month-list > .pm-list-card {
      flex-basis: 100%;
    }
  }

  /* ─── Team Month — Step 2 (per-PM calendar) ─── */
  /* Spans all team-pm-grid tracks (rule above) so it fills horizontally,    */
  /* but cap centred at 920px so the 7 aspect-ratio:1 cells don't blow up to */
  /* 190px squares on a 1336px content width. 920px / 7 ≈ 130px cells —     */
  /* same readable size as the Day timeline cards.                          */
  body.desktop #screen-team .team-pm-grid > .pm-cal-wrap {
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
  }

  /* Team stats: cap container width so 3 cards don't stretch to 1100px+ */
  body.desktop #screen-team .team-stats {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Team Day card hover: subtler, no transform shift */
  body.desktop #screen-team .team-pm-card {
    transition: background 120ms, border-color 120ms !important;
    transform: none !important;
  }
  body.desktop #screen-team .team-pm-card:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(201,160,78,0.32) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Nested job rows inside each PM card are already clickable (mobile
     baseline sets cursor:pointer + onclick=openSearchJob), but had no
     hover feedback on desktop. */
  body.desktop #screen-team .team-pm-job {
    transition: background 100ms, border-color 100ms;
  }
  body.desktop #screen-team .team-pm-job:hover {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(201,160,78,0.28) !important;
  }

  /* ─── Team Week grid: bigger cells on desktop ─── */
  body.desktop #screen-team .team-week-grid-wrap {
    overflow-x: visible;
    padding: 6px 0 24px;
  }
  body.desktop #screen-team .team-week-grid {
    grid-template-columns: 160px repeat(7, minmax(80px, 1fr));
    gap: 6px;
    min-width: 0;
  }
  /* On 13–14" laptops (or split-pane halves) the 80px cell min crowds
     the 18px DOM number against the day-of-week label. Trim the row-
     head and bump cell min. */
  @container screen (max-width: 1400px) {
    body.desktop #screen-team .team-week-grid {
      grid-template-columns: 140px repeat(7, minmax(100px, 1fr)) !important;
    }
  }
  body.desktop #screen-team .team-week-grid .twg-cell {
    min-height: 64px;
    padding: 6px 6px;
  }
  body.desktop #screen-team .team-week-grid .twg-cell .ct {
    font-size: 14px;
  }
  body.desktop #screen-team .team-week-grid .twg-col-head {
    padding: 10px 4px;
  }
  body.desktop #screen-team .team-week-grid .twg-col-head .dow {
    font-size: 10px;
  }
  body.desktop #screen-team .team-week-grid .twg-col-head .dom {
    font-size: 18px;
  }
  body.desktop #screen-team .team-week-grid .twg-row-head {
    padding: 10px 12px;
    /* sticky no longer needed without horizontal scroll */
    position: static;
  }
  body.desktop #screen-team .team-week-grid .twg-row-head .av {
    width: 30px; height: 30px;
    font-size: 11px;
  }
  body.desktop #screen-team .team-week-grid .twg-row-head .nm {
    font-size: 13px;
  }

  /* ─── Team scale toggle: pill-style, prominent ─── */
  body.desktop #screen-team .team-scale-toggle {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    display: inline-flex;
    margin: 14px auto;
  }
  body.desktop #screen-team .team-scale-toggle button {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    transition: background 120ms, color 120ms;
  }
  body.desktop #screen-team .team-scale-toggle button:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
  }
  body.desktop #screen-team .team-scale-toggle button.active {
    background: rgba(201,160,78,0.18);
    color: var(--gold);
  }

  /* ─── Team region strip: chip styling parity with sidebar items ─── */
  body.desktop #screen-team .team-region-strip {
    padding: 12px 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* ─── Period nav (under scale toggle) ─── */
  body.desktop #screen-team .team-period-nav {
    text-align: center;
    padding: 4px 0 12px;
    color: var(--muted);
    font-size: 13px;
  }

  /* ─── Section title row breathing on desktop ─── */
  body.desktop #screen-team .section-title {
    padding: 14px 0 10px !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
  }

/* ════════ polish-final ════════ */
/* ═══════════════════ MAP ═══════════════════ */
  /* Date pickers in the header get more breathing room on desktop. */
  body.desktop #screen-map .internal-header .small {
    gap: 10px !important;
  }
  body.desktop #screen-map .map-date-input {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
  }

  /* Team-view toggle bar: card-like with proper desktop padding */
  body.desktop #screen-map #map-team-bar {
    padding: 10px 24px !important;
    font-size: 12px !important;
  }
  body.desktop #screen-map #map-team-bar label {
    font-size: 12px !important;
  }

  /* Region chips: flex-wrap, proper desktop spacing */
  body.desktop #screen-map #map-region-chips {
    padding: 10px 24px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Map team legend: pin top-right of canvas (mobile pins bottom-full-width) */
  body.desktop #screen-map #map-team-legend {
    left: auto !important;
    right: 16px !important;
    top: 16px !important;
    bottom: auto !important;
    max-width: 240px;
    max-height: 60vh;
  }

  /* Map summary card: stays bottom-left, narrower */
  body.desktop #screen-map .map-summary-card {
    max-width: 360px;
  }

  /* ═══════════════════ PROFILE ═══════════════════ */
  body.desktop #screen-profile .scroll-body {
    max-width: 760px !important;
    margin: 0 auto;
    padding: 24px 32px 60px !important;
  }
  body.desktop #screen-profile .profile-card {
    padding: 24px !important;
    margin: 0 0 18px !important;
  }
  body.desktop #screen-profile .profile-card .avatar {
    width: 64px !important;
    height: 64px !important;
    font-size: 22px !important;
  }
  body.desktop #screen-profile .profile-card .name {
    font-size: 20px !important;
  }
  body.desktop #screen-profile .menu-section {
    margin: 0 !important;
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px 6px;
  }
  body.desktop #screen-profile .menu-section .heading {
    color: var(--gold) !important;
    margin: 0 0 12px !important;
  }
  body.desktop #screen-profile .menu-list {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* ═══════════════════ FILES ═══════════════════ */
  body.desktop #screen-files .scroll-body {
    max-width: var(--ds-content-max);
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }
  body.desktop #screen-files .files-search-wrap {
    padding: 16px 0 8px !important;
  }
  body.desktop #screen-files .files-chips-row {
    padding: 8px 0 !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Project list: 2-col grid on desktop */
  body.desktop #screen-files .files-proj-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 10px;
    padding: 8px 0 32px !important;
  }
  body.desktop #screen-files .files-proj-row {
    margin: 0 !important;
    transition: background 120ms, border-color 120ms;
  }
  body.desktop #screen-files .files-proj-row:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(201,160,78,0.32) !important;
  }

  /* ═══════════════════ CHAT ═══════════════════ */
  /* Cap chat-body reading width on desktop; the body fills the screen
     between header and compose. Center the messages. */
  body.desktop #screen-chat .chat-body {
    /* keep vertical layout; cap inner readable width */
  }
  body.desktop #screen-chat #chat-msg-list {
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
  }
  body.desktop #screen-chat .chat-pin-strip {
    max-width: 880px;
    margin: 0 auto;
  }
  /* Compose bar: cap matching width so it aligns with messages */
  body.desktop #screen-chat .chat-compose {
    background: var(--navy-deep);
  }
  body.desktop #screen-chat .chat-compose-row {
    max-width: 880px;
    margin: 0 auto;
  }
  body.desktop #screen-chat .chat-typing,
  body.desktop #screen-chat .chat-empty,
  body.desktop #screen-chat .chat-load-more {
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* New-message pill repositioned a touch higher above compose */
  body.desktop #screen-chat .chat-new-pill {
    bottom: 80px;
  }
  /* Message rows get a subtle hover ink-tint on desktop so the row
     reads as interactive (long-press actions, reactions, reply) at
     reading distance — mobile uses :active feedback which doesn't
     translate to mouse. System messages and tombstones suppress
     the hover so they don't compete with real conversation. */
  body.desktop #screen-chat .chat-msg {
    transition: background 0.12s;
    border-radius: 6px;
    padding: 8px 14px;
  }
  body.desktop #screen-chat .chat-msg:hover {
    background: rgba(255,255,255,0.025);
  }
  body.desktop.theme-light #screen-chat .chat-msg:hover {
    background: rgba(0,0,0,0.025);
  }
  body.desktop #screen-chat .chat-msg.system:hover,
  body.desktop #screen-chat .chat-msg.deleted:hover {
    background: transparent;
  }
  /* Avatar bumps up a tick at desktop reading distance. */
  body.desktop #screen-chat .chat-msg .av {
    width: 36px; height: 36px; font-size: 13px;
    flex: 0 0 36px;
  }
  body.desktop #screen-chat .chat-msg .text { font-size: 14.5px; }

  /* ═══════════════════ BANNERS ═══════════════════ */
  /* Chauncey banner gets a centered max-width on Today */
  body.desktop #screen-today .chauncey-banner {
    max-width: 800px;
    margin: 0 auto 14px !important;
  }
  /* Site memory banner on Detail (full-span in grid) gets normal looking width */
  body.desktop #screen-detail .site-memory-banner {
    border-radius: 12px;
  }
  /* Pre-arrival banner — same */
  body.desktop #screen-detail .pre-arrival-banner {
    border-radius: 12px;
  }

  /* ═══════════════════ AI CHAUNCEY OVERLAY ═══════════════════ */
  /* The AI assistant (Chauncey) overlay is what fires from #ai-fab. It
     likely has its own modal. Cap it to a sane desktop width if present. */
  body.desktop #ai-overlay,
  body.desktop #ai-chat-overlay {
    /* Reset any > div blunder in case I add something later */
  }

  /* ═══════════════════ TODAY: refresh button polish ═══════════════════ */
  /* The .section-refresh icon in Today's section-title needs to feel clickable */
  body.desktop #screen-today .section-refresh {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 120ms;
  }
  body.desktop #screen-today .section-refresh:hover {
    background: rgba(255,255,255,0.06);
  }

  /* ═══════════════════ Triage cards: row-head consistency ═══════════════════ */
  body.desktop #screen-triage .triage-card {
    transition: border-color 120ms;
  }
  body.desktop #screen-triage .triage-card:hover {
    border-color: rgba(201,160,78,0.28);
  }

  /* ═══════════════════ HEATMAP: refresh button + back button polish ═══════════════════ */
  body.desktop #screen-heatmap .header-icon-btn,
  body.desktop #screen-heatmap .back-btn {
    transition: background 120ms;
  }

  /* ═══════════════════ PENDING UPLOADS: stat tiles ═══════════════════ */
  body.desktop #screen-pending-uploads .scroll-body {
    max-width: 1100px !important;
  }

  /* ═══════════════════ ADMIN KNOWLEDGE / EASTER EGGS list rows ═══════════════════ */
  body.desktop #screen-admin-knowledge .menu-row,
  body.desktop #screen-admin-easter-eggs .menu-row,
  body.desktop #screen-pres-announcements .menu-row {
    border-radius: 8px;
    margin-bottom: 1px;
    transition: background 120ms;
  }
  body.desktop #screen-admin-knowledge .menu-row:hover,
  body.desktop #screen-admin-easter-eggs .menu-row:hover,
  body.desktop #screen-pres-announcements .menu-row:hover {
    background: rgba(255,255,255,0.04);
  }

  /* ═══════════════════ DETAIL: hero pill+actions polish on desktop ═══════════════════ */
  body.desktop #screen-detail .hero {
    padding: 22px 26px !important;
  }
  body.desktop #screen-detail .hero h1 {
    font-size: 22px !important;
  }
  body.desktop #screen-detail .hero .ids {
    font-size: 12px;
    color: var(--muted-2);
    margin-top: 4px;
  }

  /* ═══════════════════ Project Detail badges/proj-card fixes ═══════════════════ */
  body.desktop #screen-project-detail .ph-pct-bar {
    margin-top: 14px;
  }
  body.desktop #screen-project-detail .pc-hdr {
    color: var(--gold);
  }

  /* ═══════════════════ Sync Status pills consistent ═══════════════════ */
  body.desktop #screen-sync-status .pill {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* ═══════════════════ Sidebar: subtle active-tab indicator ═══════════════════ */
  /* Add a 3px gold bar on the left edge of active items */
  body.desktop #desktop-sidebar .ds-item.active {
    position: relative;
  }
  body.desktop #desktop-sidebar .ds-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--gold);
    border-radius: 0 2px 2px 0;
  }

/* ════════ schedule-fix ════════ */
/* ─── Timeline: 1-col centered (chronological reads top-to-bottom) ─── */
  body.desktop #screen-schedule .timeline {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 800px;
    margin: 0 auto;
    padding: 8px 0 24px !important;
  }
  body.desktop #screen-schedule .timeline > * {
    margin: 0 0 12px !important;
  }
  body.desktop #screen-schedule .timeline > *:last-child { margin-bottom: 0 !important; }

  /* ─── Week strip: lose the navy card chrome, let pills breathe ─── */
  body.desktop #screen-schedule .week-strip {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px 0 12px !important;
    margin: 0 auto 8px !important;
    max-width: 800px;
  }
  /* Day-pills: bigger and more prominent on desktop */
  body.desktop #screen-schedule .day-pill {
    padding: 12px 0 14px !important;
    border-radius: 12px !important;
    transition: background 120ms !important;
  }
  body.desktop #screen-schedule .day-pill:hover {
    background: rgba(255,255,255,0.04);
  }
  body.desktop #screen-schedule .day-pill.selected {
    background: rgba(244,196,48,0.15) !important;
    border-color: rgba(244,196,48,0.4) !important;
  }
  body.desktop #screen-schedule .day-pill .dow {
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
  }
  body.desktop #screen-schedule .day-pill .dom {
    font-size: 22px !important;
    margin-top: 5px !important;
  }
  body.desktop #screen-schedule .day-pill .count-num {
    font-size: 11px !important;
    margin-top: 6px !important;
  }
  body.desktop #screen-schedule .day-pill .count-dot {
    width: 8px !important;
    height: 8px !important;
    margin-top: 7px !important;
  }

  /* ─── Month grid: bigger cells and a taller open height for desktop ─── */
  body.desktop #screen-schedule .month-grid-wrap {
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin: 0 auto 16px !important;
    max-width: 800px;
  }
  body.desktop #screen-schedule .month-grid-wrap.open {
    max-height: 520px !important;
  }
  body.desktop #screen-schedule .month-grid {
    gap: 6px !important;
  }
  body.desktop #screen-schedule .month-grid-labels > div {
    font-size: 10px;
    padding: 8px 0 6px;
  }
  body.desktop #screen-schedule .month-cell {
    min-height: 64px !important;
    padding: 6px 0 8px;
    border-radius: 10px;
    transition: background 120ms;
  }
  body.desktop #screen-schedule .month-cell:hover {
    background: rgba(255,255,255,0.04);
  }
  body.desktop #screen-schedule .month-cell.selected {
    padding: 5px 0 7px;
  }
  body.desktop #screen-schedule .month-cell .dom {
    font-size: 16px !important;
    margin-top: 6px !important;
  }
  body.desktop #screen-schedule .month-cell .count-num {
    font-size: 11px !important;
    margin-top: 5px !important;
  }

  /* ─── Week summary: tighter, header-like ─── */
  body.desktop #screen-schedule .week-summary {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px 0 8px !important;
    margin: 0 auto !important;
    max-width: 800px;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  body.desktop #screen-schedule .week-summary .l {
    font-size: 18px;
  }
  body.desktop #screen-schedule .week-summary .r {
    font-size: 11px;
  }

  /* ─── Schedule prev/next week arrows: larger desktop click targets ─── */
  body.desktop #screen-schedule .sched-week-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  /* ─── PTO bar in timeline: wider cap to match new timeline width ─── */
  body.desktop #screen-schedule .sched-pto-bar {
    margin-bottom: 10px;
  }

  /* ─── Today button polish ─── */
  body.desktop #screen-schedule .sched-today-pill {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
  }

/* ════════ schedule-2 ════════ */
/* Reset earlier 800px caps + grid attempts */
  body.desktop #screen-schedule .week-strip,
  body.desktop #screen-schedule .month-grid-wrap,
  body.desktop #screen-schedule .week-summary,
  body.desktop #screen-schedule .timeline {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Two-pane scroll-body: left = nav panel, right = timeline */
  body.desktop #screen-schedule .scroll-body {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 0 28px;
    padding: 16px 32px 32px !important;
    align-items: start;
  }
  /* On wider monitors, give the month grid + week strip more room — at
     360px the 7-col month grid is cramped (≈45px per cell after padding).
     The timeline still gets ≥1000px on a 1600+ viewport. */
  @media (min-width: 1600px) {
    body.desktop #screen-schedule .scroll-body {
      grid-template-columns: 460px minmax(0, 1fr) !important;
    }
  }

  /* LEFT pane (nav): week strip + month grid + today button stacked */
  body.desktop #screen-schedule .week-strip {
    grid-column: 1;
    grid-row: 1;
    background: var(--navy-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 10px 8px !important;
    margin: 0 0 12px !important;
    display: flex !important;
    gap: 4px !important;
  }
  body.desktop #screen-schedule .month-grid-wrap {
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 12px !important;
    /* Panel styling for the OPEN (month-view) state. Was force-opened with
       max-height:520 regardless of view — but #month-grid only populates on
       month toggle, so week view showed an empty bordered strip (bare weekday
       labels). Now it respects .open like mobile; the date-range header (▾)
       expands it on demand. */
    background: var(--navy-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  /* Week view (not month) — collapse fully so no empty strip remains. The
     base max-height:0 only clips content; padding/border/margin would still
     paint a ~30px ghost box, so zero them too. */
  body.desktop #screen-schedule .month-grid-wrap:not(.open) {
    max-height: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* RIGHT pane: week summary stuck to top, timeline below */
  body.desktop #screen-schedule .week-summary {
    grid-column: 2;
    grid-row: 1;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 0 14px !important;
    margin: 0 0 8px !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
  }
  body.desktop #screen-schedule .week-summary .l {
    font-size: 22px !important;
    font-weight: 700 !important;
  }
  body.desktop #screen-schedule .week-summary .r {
    font-size: 11px !important;
    color: var(--muted) !important;
    letter-spacing: 1.4px !important;
    font-weight: 700 !important;
  }
  body.desktop #screen-schedule .timeline {
    grid-column: 2;
    grid-row: 2 / span 3;
    padding: 0 !important;
    margin: 0 !important;
    /* 2-up flex-wrap so the wide right pane doesn't stretch each job card
       (top row uses justify-content: space-between, so a 900px-wide card
       left Time on the far left and the status pill on the far right with
       huge air in the middle). Block bars still span full width since
       they're meant to read as horizontal day-dividers. */
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
  }
  body.desktop #screen-schedule .timeline > * {
    margin: 0 !important;
  }
  body.desktop #screen-schedule .timeline > .sched-pto-bar {
    flex: 0 0 100%;
  }
  body.desktop #screen-schedule .timeline > .sched-job-card,
  body.desktop #screen-schedule .timeline > .job-card {
    flex: 1 1 calc(50% - 6px);
    min-width: 360px;
    box-sizing: border-box;
  }
  /* Empty-state takes the full row instead of hugging the left. */
  body.desktop #screen-schedule .timeline > [style*="text-align:center"] {
    flex: 0 0 100%;
  }

  /* Day-pills inside the left card: vertically compact, prominent */
  body.desktop #screen-schedule .day-pill {
    padding: 10px 0 12px !important;
    border-radius: 10px !important;
  }
  body.desktop #screen-schedule .day-pill .dow {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
  }
  body.desktop #screen-schedule .day-pill .dom {
    font-size: 18px !important;
    margin-top: 4px !important;
  }
  body.desktop #screen-schedule .day-pill .count-num {
    font-size: 10px !important;
    margin-top: 5px !important;
  }
  body.desktop #screen-schedule .day-pill.selected {
    background: rgba(244,196,48,0.18) !important;
    border-color: rgba(244,196,48,0.45) !important;
  }
  body.desktop #screen-schedule .day-pill:hover {
    background: rgba(255,255,255,0.05);
  }

  /* Month grid — slightly tighter cells in the 360px left col */
  body.desktop #screen-schedule .month-grid-labels {
    padding: 0 6px;
  }
  body.desktop #screen-schedule .month-grid-labels > div {
    font-size: 9px !important;
    padding: 6px 0 4px !important;
  }
  body.desktop #screen-schedule .month-grid {
    padding: 0 6px 6px !important;
    gap: 4px !important;
  }
  body.desktop #screen-schedule .month-cell {
    min-height: 40px !important;
    padding: 4px 0 6px !important;
    border-radius: 6px !important;
  }
  body.desktop #screen-schedule .month-cell .dom {
    font-size: 13px !important;
    margin-top: 4px !important;
  }
  body.desktop #screen-schedule .month-cell .count-num {
    font-size: 10px !important;
    margin-top: 3px !important;
  }

  /* Today button: keep right-aligned in summary */
  body.desktop #screen-schedule .sched-today-pill {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  /* Internal header: trim sched-date-range to fit */
  body.desktop #screen-schedule .internal-header .big {
    font-size: 18px !important;
  }
  body.desktop #screen-schedule .sched-week-arrow {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  /* Margins on timeline children are owned by the flex `gap`; no per-item
     margin-bottom needed here. Selectors kept for any cascade ordering. */
  body.desktop #screen-schedule .timeline .sched-pto-bar,
  body.desktop #screen-schedule .timeline .job-card {
    margin: 0 !important;
  }

  /* When the screen gets narrower than 1100px (small laptop or split-
     pane half), collapse to single column. */
  @container screen (max-width: 1100px) {
    body.desktop #screen-schedule .scroll-body {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto auto auto auto !important;
    }
    body.desktop #screen-schedule .week-strip,
    body.desktop #screen-schedule .month-grid-wrap,
    body.desktop #screen-schedule .week-summary,
    body.desktop #screen-schedule .timeline {
      grid-column: 1 !important;
      grid-row: auto !important;
    }
  }

/* ════════ map-fix ════════ */
/* ─── Map summary card: actually float bottom-left as a card ─── */
  body.desktop #screen-map .map-summary-card {
    left: 16px !important;
    right: auto !important;
    bottom: 16px !important;
    width: 380px !important;
    max-width: 380px !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(8px);
    background: rgba(15,29,54,0.93) !important;
  }
  body.desktop #screen-map .map-summary-card .lab {
    font-size: 10px;
  }
  body.desktop #screen-map .map-summary-card .next-line {
    font-size: 15px;
  }

  /* ─── Map empty state: cleaner desktop card ─── */
  body.desktop #screen-map #map-empty {
    background: rgba(10,29,54,0.92) !important;
    backdrop-filter: blur(6px);
  }

  /* ─── Internal header: restructure date display for desktop ─── */
  /* Mobile pattern: small (date pickers) on top, big (— stops) below.
     On desktop we want: big stops count primary, dates inline beside. */
  body.desktop #screen-map .internal-header .title {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center;
    gap: 4px;
  }
  body.desktop #screen-map .internal-header .big#map-header {
    font-size: 18px !important;
    font-weight: 700;
    letter-spacing: -0.2px;
  }
  body.desktop #screen-map .internal-header .small {
    font-size: 12px !important;
    gap: 8px !important;
  }
  body.desktop #screen-map .map-date-input {
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px;
  }

  /* ─── Team-view bar: better desktop padding + alignment ─── */
  body.desktop #screen-map #map-team-bar {
    display: flex !important;
    padding: 10px 24px !important;
    background: rgba(10,29,54,0.55) !important;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 11px !important;
  }
  /* The element starts with display:none; we need a way to flip it WHEN
     it becomes visible. Trick: keep style:display:none default, but when
     JS un-hides it (script sets display:flex inline), our flex above
     stays in effect. Actually the inline display:none → display:'' or
     display:flex toggle is what JS does. Force flex via !important when
     it's NOT display:none. */
  body.desktop #screen-map #map-team-bar[style*="display:flex"],
  body.desktop #screen-map #map-team-bar[style*="display: flex"] {
    /* Already flex via inline; just ensure spacing */
    gap: 12px !important;
  }

  /* ─── Region chips bar: desktop padding ─── */
  body.desktop #screen-map #map-region-chips {
    padding: 10px 24px !important;
    background: rgba(10,29,54,0.55) !important;
    backdrop-filter: blur(6px);
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Light mode: the desktop dark-glass bars above win over the theme-light
     white override by specificity + !important, leaving a dark band on the
     light map chrome. Re-light them here (higher specificity still). */
  body.theme-light.desktop #screen-map #map-team-bar,
  body.theme-light.desktop #screen-map #map-region-chips {
    background: rgba(255,255,255,0.94) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* ─── Map controls (zoom buttons if shown): desktop click target ─── */
  body.desktop #screen-map .map-ctrl-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
  }

  /* ─── Leaflet zoom controls polish ─── */
  body.desktop #screen-map .leaflet-bar a {
    background-color: rgba(15,29,54,0.93) !important;
    color: #fff !important;
    border-color: var(--border) !important;
    backdrop-filter: blur(6px);
  }
  body.desktop #screen-map .leaflet-bar a:hover {
    background-color: rgba(20,45,80,0.95) !important;
  }

  /* ─── Map team legend: bigger min-width for PM list ─── */
  body.desktop #screen-map #map-team-legend {
    min-width: 200px !important;
    max-width: 280px !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    background: rgba(15,29,54,0.93) !important;
  }

  /* ─── Refresh icon button on header ─── */
  body.desktop #screen-map .header-icon-btn {
    transition: background 120ms;
  }
  body.desktop #screen-map .header-icon-btn:hover {
    background: rgba(255,255,255,0.06);
  }

/* ════════ map-corners ════════ */
/* Move team-legend from top-right to bottom-right */
  body.desktop #screen-map #map-team-legend {
    top: auto !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    max-width: 280px !important;
    max-height: 50vh !important;
  }

  /* Cap summary card width tighter so on narrower viewports it doesn't
     drift toward the team-legend in bottom-right. */
  body.desktop #screen-map .map-summary-card {
    width: min(360px, calc(100% - 320px)) !important;
    max-width: 360px !important;
  }

  /* Leaflet layer selector (topright): subtle desktop polish */
  body.desktop #screen-map .leaflet-control-layers {
    background: rgba(15,29,54,0.93) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  }
  body.desktop #screen-map .leaflet-control-layers-toggle {
    background-color: rgba(15,29,54,0.93) !important;
  }
  body.desktop #screen-map .leaflet-control-layers-expanded {
    padding: 10px 14px !important;
  }
  body.desktop #screen-map .leaflet-control-layers-expanded label {
    color: #fff !important;
    margin-bottom: 4px !important;
  }

/* ════════ quick-fixes ════════ */
/* ─── (1) Detail strip-facts: 3-col when earnings shown, 2-col when hidden ─── */
  body.desktop #screen-detail .strip-facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  body.desktop #screen-detail .strip-facts:has(.cell.earnings[style*="display:none"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Defensive: any hidden cell still shouldnt occupy a track. */
  body.desktop #screen-detail .strip-facts .cell[style*="display:none"] {
    display: none !important;
  }

  /* ─── (2) Today .job-list: cap at 3 cols on ultrawide ─── */
  body.desktop #screen-today .job-list {
    max-width: 1100px;
    margin: 0 auto;
  }

/* ════════ sidebar-2 ════════ */
/* Sidebar Today+Sync stats widget removed 2026-05-14 (David) — see
   public/js/desktop.js for the matching injection-code removal. */

  /* Admin section: visually grouped — same .ds-item styling, with a divider above */
  body.desktop #desktop-sidebar .ds-admin-section {
    display: contents;
  }

/* ════════ detail-rail (deprecated — Detail is now single-column) ════════
   Right-rail sticky layout was abandoned 2026-05-07: cards intermittently
   landed in the narrow 1fr column and the floating-on-scroll behavior was
   unwanted. Time card now flows inline; Quick Actions panel is hidden
   entirely (its actions duplicate hero buttons). Kept neutralized rules
   below in case anything else still references the selectors. */
  body.desktop #screen-detail .scroll-body > .time-card {
    position: static !important;
    grid-column: auto !important;
    margin: 0 !important;
    max-width: none;
    cursor: default;
  }
  body.desktop #screen-detail .scroll-body > .time-card .arrow {
    display: none;
  }

  /* Quick-actions panel — hidden on desktop now (rule above does the
     display:none). Keep the visual styles in case it's ever re-enabled. */
  body.desktop #screen-detail .scroll-body > .ds-quick-actions {
    position: static !important;
    grid-column: auto !important;
    margin: 0 !important;
    max-width: none;
    background: var(--navy-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    flex-direction: column;
    gap: 2px;
  }
  body.desktop #screen-detail .ds-quick-actions .ds-qa-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 120ms;
  }
  body.desktop #screen-detail .ds-quick-actions .ds-qa-btn:hover {
    background: rgba(255,255,255,0.05);
  }
  body.desktop #screen-detail .ds-quick-actions .ds-qa-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  body.desktop #screen-detail .ds-quick-actions .ds-qa-btn .ic {
    width: 18px;
    height: 18px;
    color: var(--gold);
    flex: 0 0 auto;
  }
  body.desktop #screen-detail .ds-quick-actions .ds-qa-btn .ic svg {
    width: 18px;
    height: 18px;
  }
  body.desktop #screen-detail .ds-quick-actions .ds-qa-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 8px;
  }
  body.desktop #screen-detail .ds-quick-actions .ds-qa-title {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted-2);
    font-weight: 700;
    padding: 8px 12px 4px;
  }

/* ════════ keys ════════ */
/* ─── Command Palette ─── */
  #cmd-palette-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 12000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
  }
  #cmd-palette-overlay.open { display: flex; }
  #cmd-palette {
    width: 90vw;
    max-width: 600px;
    background: var(--navy-card);
    border: 1px solid var(--gold);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: hidden;
  }
  #cmd-palette-input {
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
    outline: none;
  }
  #cmd-palette-input:focus {
    border-bottom-color: var(--gold);
    box-shadow: 0 2px 0 -1px rgba(201,160,78,0.35);
  }
  #cmd-palette-list {
    overflow-y: auto;
    padding: 6px;
    flex: 1;
  }
  .cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    user-select: none;
  }
  .cmd-palette-item:hover,
  .cmd-palette-item.cmd-active {
    background: rgba(201,160,78,0.14);
    color: var(--gold-bright);
  }
  .cmd-palette-item .cmd-ic {
    width: 18px; height: 18px;
    color: var(--gold);
    flex: 0 0 auto;
  }
  .cmd-palette-item .cmd-ic svg { width: 18px; height: 18px; }
  .cmd-palette-item .cmd-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted-2);
    letter-spacing: 0.4px;
  }
  .cmd-palette-empty {
    text-align: center;
    color: var(--muted-2);
    font-size: 13px;
    padding: 24px;
  }

/* ════════ Chauncey: floating panel (post-consolidation) ════════ */
/* On mobile, .ai-panel is a full-screen iOS-sheet that slides up from
   the bottom (transform: translateY(100%) → 0). On desktop that's
   overkill — Chauncey is for quick Q&A while you're working in another
   tab, not a take-over experience. Make it a 420×680 floating card
   anchored bottom-right with a subtle scale-fade-in. */
body.desktop .ai-panel {
  inset: auto !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 420px !important;
  height: 680px !important;
  max-height: calc(100vh - 48px) !important;
  border-radius: 16px !important;
  border: 1px solid var(--gold) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35) !important;
  transform: translateY(16px) scale(0.96) !important;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.18s ease !important;
  overflow: hidden;
}
body.desktop .ai-panel.open {
  transform: translateY(0) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

/* Hide the iOS-sheet grabber pill (no swipe-to-close on desktop) */
body.desktop .ai-panel .ai-grabber { display: none !important; }

/* Header: no safe-area padding on desktop, smaller avatar (the 80px
   avatar is overkill in a 420px-wide panel). */
body.desktop .ai-panel .ai-header {
  padding: 14px 18px !important;
}
body.desktop .ai-panel .ai-header-avatar {
  width: 44px !important;
  height: 44px !important;
}
body.desktop .ai-panel .ai-header .title {
  font-size: 14px !important;
}

/* Close button gets cursor + hover */
body.desktop .ai-panel .close-btn {
  cursor: pointer;
  transition: background 120ms;
}
body.desktop .ai-panel .close-btn:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* AI fab: keep in same bottom-right corner. When panel is open, fab
   is visually behind it — that's fine; user clicks the close button
   in the panel. Optionally hide the fab while panel is open. */
body.desktop .ai-panel.open ~ #ai-fab {
  /* Sibling combinator may not match if fab is elsewhere in DOM; the
     JS toggles fab visibility separately. Leave this rule as a hint. */
}

/* When the panel is closed AND we're on desktop, restyle the fab itself
   slightly — it lives bottom-right; ensure it sits in the standard spot. */
body.desktop #ai-fab {
  bottom: 24px !important;
  right: 24px !important;
  width: 60px !important;
  height: 60px !important;
}

/* On 13–14" laptops (≤1400px wide), the 420×680 panel covers the Detail
   right-rail (time card + quick actions). Shrink it so the rail still
   peeks out on the left of the panel. ds-quick-actions/time-card cap at
   320px so they sit inside the gap. */
@media (max-width: 1400px) {
  body.desktop .ai-panel {
    width: 360px !important;
    height: 580px !important;
  }
}

/* ════════ revenue tweaks (post-consolidation) ════════ */
/* "Buttons need tweaking and it can fill the space a little more" */

/* Wider rail — bumped from 1100 to 1240 so the headline + cards
   stop looking lonely on a 1400px content area. */
body.desktop #screen-mypay #rev-body {
  max-width: 1240px !important;
}

/* Section cards already span full rev-body. Inside them, keep the
   actual row content (the .mypay-history stack) in a readable
   column so names + numbers don't drift apart at the new width. */
body.desktop #screen-mypay .mypay-section .mypay-history {
  max-width: 980px;
  margin: 0 auto;
}

/* PRIMARY toggle (All Regions ↔ My Region): pill segmented control,
   centered, bigger touch + read targets. */
body.desktop #screen-mypay .rev-toggle {
  margin: 0 auto 14px !important;
  max-width: 480px;
  padding: 5px !important;
  border-radius: 12px !important;
  background: var(--navy-card) !important;
  border: 1px solid var(--border) !important;
}
body.desktop #screen-mypay .rev-toggle .chip {
  padding: 11px 8px !important;
  font-size: 12px !important;
  letter-spacing: 1.1px !important;
  border-radius: 9px !important;
  white-space: nowrap !important;
  transition: background 120ms, color 120ms !important;
}
body.desktop #screen-mypay .rev-toggle .chip:not(.active):hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
body.desktop #screen-mypay .rev-toggle .chip:disabled,
body.desktop #screen-mypay .rev-toggle .chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent !important;
  color: var(--muted-2) !important;
}

/* SECONDARY toggle (PM ↔ Site): bigger pills, centered too */
body.desktop #screen-mypay .rev-toggle.rev-view-mode {
  margin: 0 auto 18px !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
}
body.desktop #screen-mypay .rev-toggle.rev-view-mode .chip {
  padding: 8px 20px !important;
  font-size: 11px !important;
  border-radius: 18px !important;
  white-space: nowrap !important;
}
body.desktop #screen-mypay .rev-toggle.rev-view-mode .chip:not(.active):hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

/* MONTH NAV: keep arrows but bump the label, give the whole row
   more presence (was 14px tight margin). */
body.desktop #screen-mypay .rev-month-nav {
  margin: 0 auto 14px !important;
  max-width: 480px;
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
}
body.desktop #screen-mypay .rev-month-nav .arrow {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 0 !important;
  transition: background 120ms;
}
body.desktop #screen-mypay .rev-month-nav .arrow:not(.disabled):hover {
  background: rgba(255,255,255,0.06) !important;
}
body.desktop #screen-mypay .rev-month-nav .label {
  font-size: 16px !important;
  font-weight: 700;
}

/* JUMP TO CURRENT MONTH button: more visible, more clickable */
body.desktop #screen-mypay .rev-month-jump {
  margin: -2px auto 16px !important;
  justify-content: center;
}
body.desktop #screen-mypay .rev-month-jump button {
  padding: 8px 18px !important;
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  transition: background 120ms, border-color 120ms;
}
body.desktop #screen-mypay .rev-month-jump button:hover {
  background: rgba(201,160,78,0.18) !important;
  border-color: rgba(201,160,78,0.55) !important;
}

/* HEADLINE card: a touch more pad on the wider rail so the $44px
   amount doesn't sit too tight against the gold border. */
body.desktop #screen-mypay .mypay-mtd {
  padding: 32px 36px !important;
}
body.desktop #screen-mypay .mypay-mtd .amt {
  font-size: 48px !important;
}

/* ════════ Projects browser (desktop sidebar tab) ════════
   Server-paginated grid of rich project cards. Reuses .files-search-* +
   .files-chips-row from the Files browser; everything below the chips
   is bespoke. */

body.desktop #screen-projects .scroll-body {
  /* width:100% is load-bearing: .screen is a column flex and `margin:0 auto`
     on a flex item shrink-wraps it to content width — which collapsed the
     auto-fill card grid below to a single ~644px column centered in a sea of
     empty navy. Pinning width:100% lets it fill the content area (up to the
     cap) so the grid can form its 2-3 columns. */
  width: 100%;
  box-sizing: border-box;
  max-width: var(--ds-content-max);
  margin: 0 auto;
  padding: 16px 32px 32px;
}

/* List → multi-col card grid. minmax(580px) → 2 cols on a 14" MBP
   (~1226px content area), 3 cols at 1700px+, 4 cols at 2400px+.
   Stretched-card preference 2026-05-09 — bigger preview tiles each
   carrying the full card body (name + status + customer + PM +
   progress + milestone strip + footer meta) with room to breathe. */
body.desktop #screen-projects .files-proj-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(540px, 1fr));
  gap: 14px;
  padding: 12px 0 24px !important;
}

/* Status pill — colors mirror the broader app palette. */
#screen-projects .pr-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
}
#screen-projects .pr-status-pill.pst-in-progress {
  background: rgba(122,170,255,0.14);
  border-color: rgba(122,170,255,0.32);
  color: #8fb8ff;
}
#screen-projects .pr-status-pill.pst-hold {
  background: rgba(255,180,80,0.14);
  border-color: rgba(255,180,80,0.34);
  color: #ffc167;
}
#screen-projects .pr-status-pill.pst-completed {
  background: rgba(118,201,140,0.14);
  border-color: rgba(118,201,140,0.34);
  color: #92d6a6;
}
#screen-projects .pr-status-pill.pst-unk {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--muted);
}

/* ─── Project card layout ─── */
#screen-projects .pr-card {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 120ms;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
#screen-projects .pr-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(201,160,78,0.34);
}

/* Top row: name + status pill */
#screen-projects .pr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
#screen-projects .pr-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Customer + PM line */
#screen-projects .pr-cust {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#screen-projects .pr-cust.pr-cust-empty {
  color: var(--muted-2);
  font-style: italic;
  font-weight: 400;
}
#screen-projects .pr-pm {
  font-size: 11px;
  color: var(--muted);
  margin-top: -4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Issue banner — only shown when project_issue=true */
#screen-projects .pr-issue {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255,87,87,0.10);
  border: 1px solid rgba(255,87,87,0.32);
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#screen-projects .pr-issue::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--red);
  color: var(--navy-deep);
  font-size: 10px;
  font-weight: 800;
  flex: 0 0 auto;
}

/* Progress bar (pct_complete) */
#screen-projects .pr-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#screen-projects .pr-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
#screen-projects .pr-bar-label {
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 9px;
  color: var(--muted-2);
}
#screen-projects .pr-bar-pct {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}
#screen-projects .pr-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
#screen-projects .pr-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright, #d9b878));
  border-radius: inherit;
  transition: width 200ms;
}
#screen-projects .pr-footage {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ─── Milestone progression strip ─── */
/* 6 dots connected by lines, in the canonical order:
   Scheduled+Upload → Field Complete → Export → Drafting → Deliverable → Invoice */
#screen-projects .pr-milestones {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 2px;
}
#screen-projects .pr-ms {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-size: 9px;
  color: var(--muted-2);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
#screen-projects .pr-ms .pr-ms-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: transparent;
  margin-bottom: 4px;
  z-index: 1;
}
#screen-projects .pr-ms.done .pr-ms-dot {
  background: var(--gold);
  border-color: var(--gold);
}
#screen-projects .pr-ms.current .pr-ms-dot {
  background: transparent;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,160,78,0.18);
}
#screen-projects .pr-ms.done {
  color: var(--text);
}
#screen-projects .pr-ms.current {
  color: var(--gold);
}
/* Connector lines between dots — drawn as ::after on each except the
   last; sits behind the dot via z-index. */
#screen-projects .pr-ms:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  width: 100%;
  height: 1.5px;
  background: rgba(255,255,255,0.10);
  z-index: 0;
}
#screen-projects .pr-ms.done:not(:last-child)::after {
  background: var(--gold);
}

/* Footer meta row: jobs · type · po · last modified · price (admin) */
#screen-projects .pr-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 8px;
  margin-top: auto;
}
#screen-projects .pr-foot .pr-foot-strong {
  color: var(--text);
  font-weight: 600;
}
#screen-projects .pr-foot .pr-price {
  margin-left: auto;
  background: rgba(201,160,78,0.10);
  border: 1px solid rgba(201,160,78,0.32);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* 811 / type badges */
#screen-projects .pr-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
}
#screen-projects .pr-tag.pr-tag-811 {
  background: rgba(122,170,255,0.10);
  border-color: rgba(122,170,255,0.28);
  color: #8fb8ff;
}

/* Pager: prev / info / next at the bottom of the list. */
#screen-projects .projects-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 0 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
#screen-projects .projects-pager-btn {
  background: var(--navy-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
#screen-projects .projects-pager-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(201,160,78,0.32);
}
#screen-projects .projects-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
#screen-projects .projects-pager-info {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 130px;
  text-align: center;
}

/* ════════ Weather drawer desktop treatment ════════
   On mobile .wx-panel is a full-viewport drawer that slides up from the
   bottom (position:fixed; inset:0; transform: translateY(100%)→0). On
   desktop that means clicking the in-page weather card covered the
   entire screen — sidebar, content, everything — with mobile-tuned
   typography (42px hero temp, 18px hour icons, 320px radar) marooned
   on a 1920px viewport. David: "no information can be seen".
   Same pattern Chauncey had, same fix: bound the panel to a centered
   modal with desktop-scale internal sizing + a backdrop. */

/* Backdrop — pseudo-element on the panel itself when open.
   ::before sits behind the panel content (z-index trick: the panel is
   positioned fixed at z:320, the ::before is also fixed and covers the
   viewport behind the modal at z:319-via-position-stacking). */
body.desktop .wx-panel::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: -1;
}
body.desktop .wx-panel.open::before {
  opacity: 1;
}

/* Panel itself — centered modal, ~860 × min(720, 85vh). */
body.desktop .wx-panel {
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  width: min(880px, calc(100vw - 80px)) !important;
  height: min(760px, 88vh) !important;
  max-height: 88vh !important;
  border-radius: 18px !important;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 8px 18px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%) scale(0.96) !important;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s ease !important;
  pointer-events: none;
  overflow: hidden;
}
body.desktop .wx-panel.open {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}

/* Header — drop the safe-area-top padding (no notch on desktop) and
   bump the title typography. */
body.desktop .wx-panel .wx-header {
  padding: 18px 24px 16px !important;
}
body.desktop .wx-panel .wx-header .title {
  font-size: 18px !important;
}
body.desktop .wx-panel .wx-header .subtitle {
  font-size: 13px !important;
  margin-top: 4px !important;
}
body.desktop .wx-panel .wx-header .close-btn {
  width: 36px !important;
  height: 36px !important;
  cursor: pointer;
}

/* Body padding — was 12px / safe-bottom; bump for desktop scale. */
body.desktop .wx-panel .wx-body {
  padding: 16px 24px 24px !important;
}

/* Section titles between Current / Next Hours / Radar etc. */
body.desktop .wx-panel .wx-section-title {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  margin: 18px 4px 10px !important;
}

/* Hero card — big temp, big icon, room for the meta block. */
body.desktop .wx-panel .wx-hero {
  padding: 24px 28px !important;
  border-radius: 16px !important;
  gap: 24px !important;
}
body.desktop .wx-panel .wx-hero .icon {
  font-size: 72px !important;
}
body.desktop .wx-panel .wx-hero .temp {
  font-size: 64px !important;
  line-height: 1 !important;
}
body.desktop .wx-panel .wx-hero .meta {
  font-size: 14px !important;
  line-height: 1.7 !important;
}
body.desktop .wx-panel .wx-hero .meta b {
  font-size: 15px !important;
}

/* Alert cards — bigger event label + body text. */
body.desktop .wx-panel .wx-alert-card {
  padding: 16px 18px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}
body.desktop .wx-panel .wx-alert-card .ev {
  font-size: 13px !important;
}
body.desktop .wx-panel .wx-alert-card .hl {
  font-size: 14px !important;
}
body.desktop .wx-panel .wx-alert-card .exp {
  font-size: 12px !important;
}
body.desktop .wx-panel .wx-alert-card .btn {
  padding: 10px 16px !important;
  font-size: 13px !important;
}

/* Hour strip — bigger cells, no scroll on desktop (full row visible). */
body.desktop .wx-panel .wx-hour-strip {
  gap: 8px !important;
  overflow-x: visible !important;
  padding: 4px 0 8px !important;
}
body.desktop .wx-panel .wx-hour {
  flex: 1 1 0 !important;
  padding: 12px 6px !important;
  border-radius: 12px !important;
}
body.desktop .wx-panel .wx-hour .h {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}
body.desktop .wx-panel .wx-hour .ic {
  font-size: 28px !important;
  margin-bottom: 4px !important;
}
body.desktop .wx-panel .wx-hour .t {
  font-size: 17px !important;
}
body.desktop .wx-panel .wx-hour .sub {
  font-size: 11px !important;
}

/* Radar — taller on desktop, larger controls. */
body.desktop .wx-panel .wx-radar-wrap {
  border-radius: 14px !important;
}
body.desktop .wx-panel .wx-radar-map {
  height: 340px !important;
}
body.desktop .wx-panel .wx-radar-controls {
  padding: 10px 14px !important;
}
body.desktop .wx-panel .wx-radar-btn {
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
}
body.desktop .wx-panel .wx-radar-time {
  font-size: 13px !important;
}


/* ════════════════════════════════════════════════════════════════════════ */
/* ─── 2026-05-07 polish sweep: globals + sev-1 per-screen ─────────────── */
/* ════════════════════════════════════════════════════════════════════════ */
/* Triggered by David's "another dive across the UI" review. Two parallel  */
/* agent reviews surfaced ~30 sev-1 issues. Most are cross-cutting leaks   */
/* (mobile filter-strips on desktop, .menu-row not keyboard-focusable, ↻  */
/* ASCII glyph used as button, iOS-blue undefined-var fallback, etc.).    */
/* All overrides scoped to body.desktop — mobile bit-identical.           */

/* ─── G2: Filter strips on admin screens ─── */
/* Mobile pattern (overflow-x:auto, gap:6px, hugging left edge with a */
/* thousand empty pixels of unused horizontal space) was leaking to     */
/* desktop on admin-users / directory / pending-additions / files /     */
/* projects / heatmap. Single rule, multiple targets. */
body.desktop #admin-users-filters,
body.desktop #pending-additions-filters,
body.desktop #directory-region-strip,
body.desktop #admin-users-region-strip,
body.desktop #files-region-strip,
body.desktop #files-chips-row,
body.desktop #projects-chips-row,
body.desktop .team-region-strip {
  overflow: visible !important;
  flex-wrap: wrap !important;
  padding: 14px 0 !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

/* ─── G3: Search inputs on admin screens ─── */
/* Inline-styled full-bleed inputs stretched to 1400px on desktop = a   */
/* banner-sized text field. Cap, add focus glow, raise size.            */
body.desktop #admin-users-search,
body.desktop #directory-search,
body.desktop #files-search-input,
body.desktop #projects-search-input,
body.desktop input[id$="-search"],
body.desktop input[id$="-search-input"] {
  max-width: 480px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

/* ─── G4: .menu-row keyboard focus ─── */
/* .menu-row is used on More/Past Jobs/Sync Status/Pending Uploads/KB/  */
/* Easter Eggs/Pres Announcements/AI Memory/Profile — clickable <div>   */
/* with cursor:pointer but no Tab/Enter support. Renderer changes add  */
/* tabindex/role; CSS provides the visible focus ring.                 */
body.desktop .menu-row[tabindex]:focus-visible,
body.desktop .menu-row[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  background: rgba(255,255,255,0.06);
}

/* ─── G5: Bottom-sheet modals → centered modals on desktop ─── */
/* Extend the existing center+cap+radius rule (lines 1388-1410) to the */
/* modals that were missed: confirm/install/demo/pending-add/nav-sheet */
body.desktop #confirm-modal,
body.desktop #install-modal,
body.desktop #demo-modal,
body.desktop #pending-add-modal,
body.desktop #nav-sheet {
  align-items: center !important;
}
body.desktop #confirm-modal > *,
body.desktop #install-modal > *,
body.desktop #demo-modal > *,
body.desktop #pending-add-modal > *,
body.desktop #nav-sheet > * {
  border-radius: 14px !important;
  max-width: 520px !important;
  width: calc(100% - 64px) !important;
}

/* ─── G6: Form input focus rings ─── */
/* Inline-styled inputs in admin edit screens have no :focus state.    */
/* Global rule for any form control on desktop.                        */
body.desktop input:not([type="checkbox"]):not([type="radio"]):focus-visible,
body.desktop textarea:focus-visible,
body.desktop select:focus-visible {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,160,78,0.18) !important;
}

/* ─── G7: Header refresh + icon button polish ─── */
/* The 16 header-icon-btn .↻ glyphs were just replaced with SVG; now   */
/* give them a real hover/focus state so they read as buttons.          */
body.desktop .header-icon-btn {
  transition: background 120ms, transform 120ms;
  border-radius: 8px;
}
body.desktop .header-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: auto;
}
body.desktop .header-icon-btn:hover {
  background: rgba(255,255,255,0.06);
}
body.desktop .header-icon-btn:active {
  transform: scale(0.95);
}
body.desktop .header-icon-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────────────────── */
/* Sev-1 per-screen polish (CSS-only — JS renderer changes minimal)     */
/* ────────────────────────────────────────────────────────────────────── */

/* ─── Detail: cap reading width + elevate primary action ─── */
/* Was 1400px (--ds-content-max). Reading text + Workspace cards at     */
/* 1400px stretches lines past 100ch and the action button vanishes in  */
/* the flat stack. Cap at 1080px for reading; elevate primary action.   */
body.desktop #screen-detail .scroll-body {
  max-width: 1080px !important;
}
body.desktop #screen-detail #primary-action-wrap .action-btn,
body.desktop #screen-detail #primary-action-wrap button {
  padding: 14px 22px;
  box-shadow: 0 6px 22px rgba(201,160,78,0.32);
  letter-spacing: 0.5px;
}

/* ─── Project Detail: drop dense flow (was reordering cards silently) ─ */
/* `dense` packing breaks logical document order. Replace with row.      */
body.desktop #screen-project-detail .scroll-body {
  grid-auto-flow: row !important;
}
/* Long-content cards (Jobs list, Files list) get full-width slots */
body.desktop #screen-project-detail #proj-jobs-section,
body.desktop #screen-project-detail #proj-files-section {
  flex: 0 0 100% !important;
}

/* ─── Project Schedule: desktop overhaul — mirror Project Detail's 2-col grid
   so Next-Up + Milestones + Activity + Info pack side-by-side instead of
   stacking as wide-stretched single-column cards. Hero / stats / issue
   banner / jobs list still span the full width. ─── */
body.desktop #screen-project-schedule .proj-card {
  margin: 0 !important;
  border-radius: 14px;
  padding: 22px 26px;
}
body.desktop #screen-project-schedule .scroll-body {
  max-width: var(--ds-content-max) !important;
  margin: 0 auto;
  /* Flex-wrap, not grid: a single mid-section card (e.g. only Next Up shown)
     grows to 100% via flex-grow instead of leaving a phantom half-row gap. */
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 18px;
  padding: 22px 32px 32px !important;
}
/* Full-width slots — hero, 3-up stats, issue banner, per-job list. */
body.desktop #screen-project-schedule .scroll-body > .proj-hero,
body.desktop #screen-project-schedule .scroll-body > .proj-stats,
body.desktop #screen-project-schedule .scroll-body > .proj-issue-banner,
body.desktop #screen-project-schedule #psch-jobs-section {
  flex: 0 0 100%;
}
/* Mid-section cards pair up at ~half-width; a lonely card grows to fill
   its row instead of leaving an empty cell. */
body.desktop #screen-project-schedule .scroll-body > .proj-card:not(#psch-jobs-section) {
  flex: 1 1 calc(50% - 9px);
  min-width: 320px;
}
/* Hero gets the same gold-tinted treatment as Project Detail so the two
   screens read as a family on desktop. */
body.desktop #screen-project-schedule .proj-hero {
  background: linear-gradient(135deg, rgba(201,160,78,0.10) 0%, rgba(201,160,78,0.03) 60%, transparent 100%);
  border: 1px solid rgba(201,160,78,0.28);
  border-radius: 14px;
  padding: 26px 30px;
}
body.desktop #screen-project-schedule .proj-hero::before { display: none; }
body.desktop #screen-project-schedule .proj-hero .ph-name { font-size: 26px; }
/* Match Project Detail's 3-up stat-cell styling. */
body.desktop #screen-project-schedule .proj-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
}
body.desktop #screen-project-schedule .proj-stats .ps-cell {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px;
}
body.desktop #screen-project-schedule .proj-stats .ps-cell .num { font-size: 28px; }
/* Per-job rows on the full-width jobs list: when the card is ~1100px wide,
   stretch the meta column and let the title + sub take the room they need,
   pill anchored on the right (existing layout already does this). */
body.desktop #screen-project-schedule .proj-job {
  padding: 14px 16px 14px 18px;
}
body.desktop #screen-project-schedule .proj-milestone-hdr {
  font-size: 11px;
  letter-spacing: 0.6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
body.desktop #screen-project-schedule .psch-edit-btn {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 8px;
}
body.desktop #screen-project-schedule .proj-issue-banner {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
}

/* ─── CODING STUDIO (admin BETA) — 2-pane: video left, panel right ─── */
/* Desktop overrides the mobile column-stack from index.html. Video pane
   takes ~60%, side panel ~40%. Both panes scroll independently — the
   video stays anchored as the obs list grows. */
body.desktop #screen-coding-studio .cs-layout {
  flex-direction: row !important;
  height: 100%;
  overflow: hidden;
}
body.desktop #screen-coding-studio .cs-video-pane {
  flex: 1 1 60%;
  position: static !important;        /* override mobile sticky */
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  border-right: 1px solid var(--border);
}
body.desktop #screen-coding-studio .cs-video-wrap {
  flex: 1 1 auto;                     /* fill remaining vertical */
  aspect-ratio: auto;
  min-height: 0;
}
body.desktop #screen-coding-studio .cs-side-pane {
  flex: 0 0 40%;
  max-width: 520px;
  border-top: none;
}
body.desktop #screen-coding-studio .cs-controls {
  border-top: 1px solid var(--border);
}
body.desktop #screen-coding-studio .cs-hud-corner {
  font-size: 13px;
  padding: 5px 12px;
}
body.desktop #screen-coding-studio .cs-tab-body {
  padding: 18px;
}
/* When the viewport is narrow (vertical screen rotation, split-pane), fall
   back to the stacked mobile layout. */
@container screen (max-width: 900px) {
  body.desktop #screen-coding-studio .cs-layout {
    flex-direction: column !important;
  }
  body.desktop #screen-coding-studio .cs-video-pane {
    flex: 0 0 auto;
  }
  body.desktop #screen-coding-studio .cs-video-wrap {
    aspect-ratio: 16 / 9;
  }
  body.desktop #screen-coding-studio .cs-side-pane {
    flex: 1 1 auto;
    max-width: none;
    border-top: 1px solid var(--border);
  }
}

/* ─── UNASSIGNED PROJECTS (admin) — 2-pane drag-to-assign board ─── */
body.desktop #screen-unassigned-projects .scroll-body {
  max-width: var(--ds-content-max);
  margin: 0 auto;
  padding: 0 32px 32px !important;
}
body.desktop #screen-unassigned-projects .upr-hint .upr-hint-desktop { display: inline; }
body.desktop #screen-unassigned-projects .upr-hint .upr-hint-mobile  { display: none; }
body.desktop #screen-unassigned-projects .upr-board {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 24px;
  padding: 18px 0 24px;
  align-items: start;
}
@container screen (max-width: 1100px) {
  body.desktop #screen-unassigned-projects .upr-board {
    grid-template-columns: minmax(0, 1fr);
  }
}
body.desktop #screen-unassigned-projects .upr-projects,
body.desktop #screen-unassigned-projects .upr-pms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 4px 8px 4px 2px;
}
/* Mobile hides .upr-pms; reveal on desktop. */
body.desktop #screen-unassigned-projects .upr-pms { display: flex; }

body.desktop #screen-unassigned-projects .upr-card {
  cursor: grab;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
body.desktop #screen-unassigned-projects .upr-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(201,160,78,0.4);
}
body.desktop #screen-unassigned-projects .upr-card:active { cursor: grabbing; }
body.desktop #screen-unassigned-projects .upr-card.dragging { transform: rotate(-1deg); }

body.desktop #screen-unassigned-projects .upr-pm-card {
  cursor: copy;   /* hint that this is a drop target */
}
body.desktop #screen-unassigned-projects .upr-pm-card:hover {
  border-color: rgba(201,160,78,0.4);
}

/* ─── Notification overlay: right-anchored side panel on desktop ─── */
/* Backdrop fills the viewport (dim + blur). The header and body are DOM
   siblings (not wrapped in a panel container); we stack them as a single
   460px column on the right by giving each child width:460px and laying
   the overlay out as a flex column with align-items:flex-end. The header
   sits at the top of that column; the body fills the rest with scroll.
   Slide-in via @starting-style on .open. Click-outside-to-close lives in
   public/js/desktop.js (mousedown listener mirroring the weather modal). */
body.desktop #notif-overlay {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(4px) !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
}
body.desktop #notif-overlay .notif-header,
body.desktop #notif-overlay .notif-filterbar,
body.desktop #notif-overlay .notif-body {
  width: 460px !important;
  max-width: 460px !important;
  background: var(--navy-deep) !important;
  border-left: 1px solid var(--border) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Slide-in: each pane translates from offscreen-right to 0. Default
     state (overlay closed) has them already at 0 so they don't animate
     out, but @starting-style on .open re-runs the slide on each open. */
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.desktop #notif-overlay.open .notif-header,
body.desktop #notif-overlay.open .notif-filterbar,
body.desktop #notif-overlay.open .notif-body {
  transform: translateX(0);
}
@starting-style {
  body.desktop #notif-overlay.open .notif-header,
  body.desktop #notif-overlay.open .notif-filterbar,
  body.desktop #notif-overlay.open .notif-body {
    transform: translateX(100%);
  }
}
body.desktop #notif-overlay .notif-header {
  /* Mobile baseline uses safe-area top padding; desktop has no safe area */
  padding: 16px 22px 14px !important;
  border-bottom: 2px solid var(--gold) !important;
  flex-shrink: 0 !important;
}
body.desktop #notif-overlay .notif-body {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  padding: 12px 14px 24px !important;
  /* Prevent the column from collapsing past the viewport bottom */
  min-height: 0 !important;
}
body.desktop #notif-overlay .notif-row {
  border-radius: 10px;
  margin-bottom: 6px;
  padding: 12px 14px;
  border-bottom: none;
}
body.desktop #notif-overlay .notif-row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
/* Stronger Clear-button visual: red text alone reads as a label, not a
   destructive action. Add a subtle red-tinted border that intensifies on
   hover so it's clearly a button + clearly destructive. */
body.desktop #notif-overlay .notif-header .clear-all {
  border: 1px solid rgba(226, 82, 74, 0.3);
}
body.desktop #notif-overlay .notif-header .clear-all:hover {
  background: rgba(226, 82, 74, 0.12);
  border-color: rgba(226, 82, 74, 0.5);
}
body.desktop #notif-overlay .notif-header .mark-all {
  border: 1px solid transparent;
}
body.desktop #notif-overlay .notif-header .mark-all:hover {
  background: rgba(244, 196, 48, 0.10);
  border-color: rgba(244, 196, 48, 0.30);
}
/* Empty state: mobile uses 60px vertical padding; tighten on desktop. */
body.desktop #notif-overlay .notif-empty {
  padding: 36px 16px !important;
  font-size: 12.5px !important;
}

/* ─── Past Jobs: 2-col card grid (was thin 1400px-wide menu list) ─── */
body.desktop #past-jobs-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
}
body.desktop #past-jobs-list .menu-row {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
body.desktop #past-jobs-list .menu-row:hover {
  border-color: rgba(201,160,78,0.4);
  background: rgba(201,160,78,0.04);
}

/* ─── Sync Status: card layout instead of single thin list ─── */
body.desktop #screen-sync-status .scroll-body {
  max-width: 1200px !important;
}
body.desktop #screen-sync-status .menu-section {
  border-radius: 14px;
}
body.desktop #screen-sync-status .menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 10px;
  padding: 14px;
}
body.desktop #screen-sync-status .menu-row {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

/* ─── Pending Uploads: color-coded stats + max-width cap ─── */
body.desktop #screen-pending-uploads .scroll-body {
  max-width: 1200px !important;
}
body.desktop #screen-pending-uploads .quick-stats {
  gap: 14px !important;
  padding: 4px 0 !important;
}
body.desktop #screen-pending-uploads .quick-stats .qstat {
  border-radius: 12px;
  padding: 18px 14px !important;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
body.desktop #screen-pending-uploads .quick-stats .qstat .num {
  font-size: 30px !important;
}
body.desktop #screen-pending-uploads .quick-stats .qstat .lab {
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
}
/* Color-code by position (Pending/Processing/Failed/Dead) — assumes order */
body.desktop #screen-pending-uploads .quick-stats .qstat:nth-child(1) {
  border-color: rgba(244,196,48,0.3);
}
body.desktop #screen-pending-uploads .quick-stats .qstat:nth-child(2) {
  border-color: rgba(93,173,226,0.3);
}
body.desktop #screen-pending-uploads .quick-stats .qstat:nth-child(3) {
  border-color: rgba(255,87,87,0.4);
  background: rgba(255,87,87,0.04);
}
body.desktop #screen-pending-uploads .quick-stats .qstat:nth-child(4) {
  border-color: rgba(255,87,87,0.55);
  background: rgba(255,87,87,0.08);
}

/* ─── Pending Additions: grid layout ─── */
body.desktop #pending-additions-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
  gap: 12px !important;
}
body.desktop #pending-additions-list .team-pm-card,
body.desktop #pending-additions-list .menu-row {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}

/* ─── Section title typography polish (global, sev-2 but high frequency) ── */
body.desktop .section-title {
  font-size: 12px !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  padding: 14px 4px 10px !important;
}
body.desktop .menu-section .heading {
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

/* ─── Big interactive cards: hover affordance (sev-2 but spans 6 cards) ─ */
body.desktop .weather-block,
body.desktop .wx-banner {
  cursor: pointer;
  transition: background 140ms, border-color 140ms, transform 120ms;
}
body.desktop .weather-block:hover,
body.desktop .wx-banner:hover {
  border-color: rgba(201,160,78,0.35);
  background: rgba(255,255,255,0.025);
}

/* ─── Inner-overflow scrollbars (extend the .scroll-body custom bar) ─── */
body.desktop .tc-items::-webkit-scrollbar,
body.desktop .notif-body::-webkit-scrollbar,
body.desktop .ai-messages::-webkit-scrollbar,
body.desktop .hm-multi-list::-webkit-scrollbar { width: 8px; }
body.desktop .tc-items::-webkit-scrollbar-track,
body.desktop .notif-body::-webkit-scrollbar-track,
body.desktop .ai-messages::-webkit-scrollbar-track,
body.desktop .hm-multi-list::-webkit-scrollbar-track { background: transparent; }
body.desktop .tc-items::-webkit-scrollbar-thumb,
body.desktop .notif-body::-webkit-scrollbar-thumb,
body.desktop .ai-messages::-webkit-scrollbar-thumb,
body.desktop .hm-multi-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
body.desktop .tc-items::-webkit-scrollbar-thumb:hover,
body.desktop .notif-body::-webkit-scrollbar-thumb:hover,
body.desktop .ai-messages::-webkit-scrollbar-thumb:hover,
body.desktop .hm-multi-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* ─── Toast: anchor bottom-right on desktop, cap width ─── */
body.desktop .toast {
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  transform: translateX(0) translateY(20px) !important;
  max-width: 420px !important;
}
body.desktop .toast.show {
  transform: translateX(0) translateY(0) !important;
}
/* Avoid Chauncey panel overlap when ai-panel is open */
body.desktop .ai-panel.open ~ .toast,
body.desktop:has(.ai-panel.open) .toast {
  right: 460px !important;
}


/* Round-2 polish: restore Today's section-title divider (polish G stripped it) */
body.desktop #screen-today .section-title {
  padding-top: 16px !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 8px !important;
}

/* Round-2 polish: strip card-on-card chrome on Past Jobs + Sync Status (parent
   .menu-list still had border + bg from mobile, while polish gave each row its
   own card chrome — visible double-frame). */
body.desktop #past-jobs-list,
body.desktop #screen-sync-status .menu-list {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Round-2 polish: keyboard a11y shim selector broadening */
body.desktop .profile-card[role="button"]:focus-visible,
body.desktop .sessions-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* ─── All Chats screen — desktop polish ─────────────────────────────
   - Rows get a clear hover state (cursor:pointer + ink tint) so the
     "this is clickable" affordance is obvious on desktop where touch
     :active feedback doesn't help.
   - Toolbar widens its sticky bg to span the centered content column.
   - Avatar bumps up a tick for better readability at desktop reading
     distance.
   ----------------------------------------------------------------- */
body.desktop #screen-chats .all-chats-row {
  padding: 14px 18px;
  transition: background 0.12s;
}
body.desktop #screen-chats .all-chats-row:hover {
  background: rgba(255,255,255,0.04);
}
body.desktop.theme-light #screen-chats .all-chats-row:hover {
  background: rgba(0,0,0,0.03);
}
body.desktop #screen-chats .all-chats-av {
  width: 44px; height: 44px; font-size: 15px;
}
body.desktop #screen-chats .all-chats-name { font-size: 15px; }
body.desktop #screen-chats .all-chats-preview { font-size: 13px; }
body.desktop #screen-chats .all-chats-group-head {
  padding: 18px 18px 8px;
}
body.desktop #screen-chats .all-chats-group-head:hover {
  background: rgba(255,255,255,0.03);
}
body.desktop #screen-chats .all-chats-toolbar {
  padding: 12px 18px;
}
/* Quiet the ⋯ menu button until the row is hovered — keeps the list
   visually clean on a wide desktop scan, then surfaces on intent. */
body.desktop #screen-chats .all-chats-menu-btn {
  opacity: 0;
  transition: opacity 0.12s;
}
body.desktop #screen-chats .all-chats-row:hover .all-chats-menu-btn,
body.desktop #screen-chats .all-chats-menu-btn:focus-visible {
  opacity: 1;
}

/* New-chat sheet — on mobile it's bottom-docked; on desktop center it
   so it doesn't anchor to the screen edge of a wide window. */
body.desktop .new-chat-sheet { align-items: center; }
body.desktop .ncs-card {
  border-radius: 14px;
  max-width: 480px;
  max-height: 70vh;
  box-shadow: 0 14px 48px rgba(0,0,0,0.45);
}

/* Same treatment for the per-job timeline sheet — bottom-anchored on
   mobile, centered modal on desktop. */
body.desktop .jt-sheet { align-items: center; }
body.desktop .jt-card {
  border-radius: 14px;
  max-width: 600px;
  max-height: 75vh;
  box-shadow: 0 14px 48px rgba(0,0,0,0.45);
}

/* Support sheet (user report + admin triage) — same treatment. */
body.desktop .sup-sheet { align-items: center; }
body.desktop .sup-card {
  border-radius: 14px;
  max-width: 540px;
  max-height: 80vh;
  box-shadow: 0 14px 48px rgba(0,0,0,0.45);
}
body.desktop .sup-card.big { max-width: 720px; }

/* ─── 2026-05-15 polish sweep — desktop parity gaps ───
   Surfaces that stretched edge-to-edge on wide monitors get the
   same content-max-width treatment the rest of the app uses. */
body.desktop #screen-files .file-list,
body.desktop #screen-files .files-hdr-row {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.desktop .month-grid-wrap {
  max-width: 520px;
  margin: 0 auto;
}
body.desktop .team-week-grid-wrap {
  max-width: 900px;
  margin: 0 auto;
}
body.desktop #screen-mypay .mypay-history,
body.desktop #screen-mypay .mypay-mtd {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Today screen hover state on day-stat cards — surfaces the new
   :active feedback at reading distance on desktop. */
body.desktop .day-stat {
  transition: background 0.15s, border-color 0.15s;
}
body.desktop .day-stat:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(201,160,78,0.30);
}

/* Team PM card hover state — long missing; the row now visibly
   advertises interactivity at desktop reading distance. */
body.desktop .team-pm-card {
  transition: background 0.12s, border-color 0.12s;
}
body.desktop .team-pm-card:hover {
  background: rgba(201,160,78,0.06);
  border-color: rgba(201,160,78,0.30);
}

/* ─── App Activity by Region (admin-only desktop tile/modal) ─── */
.rt-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 64px 24px; overflow-y: auto;
}
.rt-panel {
    width: 100%; max-width: 760px;
    background: var(--navy-card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    color: var(--text);
}
.rt-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.rt-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.rt-title .ic svg { width: 18px; height: 18px; fill: var(--gold); }
.rt-close {
    background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1;
    cursor: pointer; padding: 0 4px;
}
.rt-close:hover { color: var(--text); }
.rt-toggle { display: flex; gap: 8px; padding: 14px 20px 4px; }
.rt-pbtn {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.rt-pbtn:hover { color: var(--text); }
.rt-pbtn.active { background: var(--gold); border-color: var(--gold); color: #1a1f2b; font-weight: 600; }
.rt-body { padding: 12px 20px 22px; }
.rt-empty { color: var(--muted); text-align: center; padding: 32px 0; }
.rt-total { color: var(--muted); font-size: 13px; margin: 6px 0 14px; }
.rt-total b { color: var(--text); }
.rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rt-tile { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.rt-tile-unreg { border-color: var(--red); border-style: dashed; }
.rt-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rt-region { font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
.rt-headcount { color: var(--muted); font-size: 12px; white-space: nowrap; }
.rt-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 3px; margin: 8px 0 12px; overflow: hidden; }
.rt-bar span { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.rt-tile-unreg .rt-bar span { background: var(--red); }
.rt-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rt-metric { text-align: center; }
.rt-metric b { display: block; font-size: 18px; font-weight: 700; color: var(--text); }
.rt-metric span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.rt-unreg-note { margin-top: 10px; font-size: 11px; color: var(--red); }
@media (max-width: 560px) { .rt-grid { grid-template-columns: 1fr; } }

/* Drillable region tiles → per-person breakdown */
.rt-tile-click { cursor: pointer; transition: border-color .12s, background .12s; }
.rt-tile-click:hover { border-color: var(--gold); background: rgba(201,160,78,0.05); }
.rt-tile-click:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rt-drill-hint { margin-top: 10px; font-size: 11px; color: var(--gold); font-weight: 600;
  opacity: 0; transition: opacity .12s; }
.rt-tile-click:hover .rt-drill-hint, .rt-tile-click:focus-visible .rt-drill-hint { opacity: 1; }

/* Per-person breakdown view */
.rt-bd-head { display: flex; align-items: center; gap: 12px; padding: 2px 0 14px; }
.rt-back { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rt-back:hover { border-color: var(--gold); color: var(--gold); }
.rt-bd-title { font-weight: 800; font-size: 16px; letter-spacing: 0.02em; }
.rt-bd-sub { color: var(--muted); font-size: 12px; margin-left: auto; }
.rt-u-list { display: flex; flex-direction: column; }
.rt-u-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 4px; border-bottom: 1px solid var(--border); }
.rt-u-row.rt-u-idle { opacity: 0.55; }
.rt-u-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rt-u-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rt-u-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; flex: 0 0 auto; }
.rt-u-badge { font-size: 10px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; flex: 0 0 auto; }
.rt-u-metrics { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.rt-u-metrics b { color: var(--text); font-weight: 700; }
.rt-u-seen { min-width: 78px; text-align: right; }
@media (max-width: 560px) {
  .rt-u-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rt-u-metrics { flex-wrap: wrap; gap: 10px; }
  .rt-u-seen { min-width: 0; text-align: left; }
}