/* ============================================================================
   work-mobile.css — PHONE-ONLY layer for the Work Hub.

   Every rule in this file lives inside `@media (max-width: 640px)`, so it is
   inert on tablets and desktops. The existing desktop layout is untouched:
   nothing here applies above the phone breakpoint.

   Loaded LAST in Work.html so it wins the cascade on small screens. Goal:
   the full Work OS — create tasks / work streams / projects / grants, track
   everything — usable one-handed on a phone.
   ============================================================================ */

@media (max-width: 640px) {

  /* ── Kill horizontal page scroll ──────────────────────────────────────────
     `overflow-x: clip` (NOT hidden — hidden forces overflow-y:auto and would
     break the sticky top nav, per the sticky/overflow trap). We clip the
     content panels only; the sticky `.ph-nav-wrap` is a sibling above them and
     stays a normal body-scrolled element. */
  .wk-tab-panel,
  .ph-content,
  .ph-hub { overflow-x: clip; }

  .wt-page-bg,
  .wt-page-frame,
  .wt-page-shell { max-width: 100vw; }

  img, svg, canvas, video { max-width: 100%; }

  /* ── Global page padding — reclaim edge space ─────────────────────────── */
  .wk-app { padding: 0 10px 40px !important; }
  .ph-content { padding-right: 0 !important; }
  .ph-hub { gap: 12px; }

  /* ═══════════════════════════════════════════════════════════════════════
     TOP NAVIGATION — horizontally scrollable pill bar, thumb-sized targets
     ═══════════════════════════════════════════════════════════════════════ */
  .ph-nav-wrap {
    position: sticky; top: 0; z-index: 800;
    padding: 8px 0 6px;
    /* fade the right edge so it reads as scrollable */
  }
  .ph-nav {
    justify-content: flex-start !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 4px 10px 8px;
    gap: 6px;
  }
  .ph-nav::-webkit-scrollbar { display: none; }
  .ph-nav { scrollbar-width: none; }
  .ph-nav-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 9px 15px !important;
    font-size: 13px !important;
    min-height: 40px;
    border-radius: 20px;
  }
  .ph-nav-badge { font-size: 10px; }

  /* ── Global search — full width, drop the ⌘K hint ─────────────────────── */
  .wk-gs { margin: 0 10px 6px; padding: 10px 14px; }
  .wk-gs-kbd { display: none !important; }
  .wk-gs input { font-size: 16px; } /* 16px stops iOS auto-zoom on focus */
  #wkGlobalSearchResults { max-height: 60vh; }

  /* ═══════════════════════════════════════════════════════════════════════
     IN-TAB SIDEBARS → horizontal chip rows (extends the 900px behaviour, but
     tuned for touch). Add/quick-action buttons stay visible & tappable.
     ═══════════════════════════════════════════════════════════════════════ */
  .ph-sidebar {
    position: static !important;
    max-height: none !important;
    display: flex; flex-wrap: nowrap; gap: 6px;
    padding: 4px 0 8px !important;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ph-sidebar::-webkit-scrollbar { display: none; }
  .ph-sb-label { display: none; }
  .ph-sb-item {
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    min-height: 38px;
    border-radius: 10px;
    flex: 0 0 auto;
    justify-content: flex-start !important;
    white-space: nowrap;
  }
  /* Add / quick-action buttons get an accent so they read as primary actions */
  .ph-sb-item.ph-sb-add,
  .ph-sb-item.ph-qa-btn { font-weight: 700; }

  /* ── Content cards / stat rows / grids: single column by default ──────── */
  .wk-body { grid-template-columns: 1fr !important; }
  .wk-container-2col { grid-template-columns: 1fr !important; }
  .wk-member-grid,
  .wk-member-stats,
  .wk-insight-grid { grid-template-columns: 1fr !important; }

  /* Scorecard tiles: 2-up so several fit above the fold */
  .ax-cards-row {
    flex-wrap: wrap;
    overflow-x: visible !important;
    padding: 4px 0 !important;
    gap: 8px;
  }
  .ax-card {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 6px);
    box-sizing: border-box;
    padding: 14px 8px !important;
  }

  /* Kanban / board views stack */
  .wk-kanban-board { grid-template-columns: 1fr !important; }
  .wk-focus-list.wk-view-board { grid-template-columns: 1fr !important; }

  /* Financials fixed-count grids → readable on a narrow screen */
  .wk-fc-stats { grid-template-columns: 1fr 1fr !important; }
  .frc-stats { grid-template-columns: 1fr 1fr !important; }
  .fin-filter-cards { grid-template-columns: 1fr 1fr !important; }
  .fin-stage-row { grid-template-columns: 1fr !important; }

  /* ── Wide data grids (plan, budget, calendar matrix): let them scroll
        horizontally inside their own box rather than blow out the page.
        These already sit in overflow-x:auto wrappers upstream; this just
        guarantees the wrapper is width-bounded. ─────────────────────────── */
  .pb-grid-scroll,
  .ppg-grid-scroll,
  .wk-plan-grid-wrap,
  [class*="-grid-scroll"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ═══════════════════════════════════════════════════════════════════════
     OVERLAYS & DRAWERS → full-screen sheets. On a phone a centred 90vh card
     with margins wastes space and clips forms; make the primary create/edit
     surfaces fill the viewport (using dvh so the browser chrome is handled).
     ═══════════════════════════════════════════════════════════════════════ */

  /* Task profile popup */
  .tp-popup {
    width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    max-width: 100vw !important; max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  .tp-overlay.is-open .tp-popup { transform: none !important; }
  .tp-header { padding: 14px 16px !important; cursor: default !important; }
  .tp-header, .tp-body { touch-action: pan-y; }
  /* Header is a single nowrap flex row on desktop: the ~575px action-chip
     cluster (EDITING / status / Draft with AI / share / complete / Create)
     starves the title (flex:1 1 0; min-width:0) down to ~16px, so "New Task"
     wraps one letter per line. Stack it on a phone: title on its own row, the
     chip cluster wraps onto rows below. */
  .tp-header { flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 8px !important; }
  .tp-header-title { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; font-size: 18px !important; line-height: 1.25 !important; white-space: normal !important; }
  .tp-header-right { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; flex-wrap: wrap !important; gap: 6px !important; }

  /* Generic report / member / picker modals */
  .wk-modal {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .wk-modal-head { padding: 16px; cursor: default !important; }
  .wk-modal-body { padding: 16px !important; }
  .wk-modal-body .wk-field-row,
  .wk-modal-body .wk-field-row-3 { grid-template-columns: 1fr !important; }

  /* Report designer */
  .wk-designer-frame,
  .wk-designer-overlay .wk-designer-frame {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    max-height: 100dvh !important; border-radius: 0 !important;
  }

  /* Project / engagement / detail popups (shared .gp / .gd shells) */
  .gp-popup,
  .gp-popup.gp-popup--project-mini,
  .gd-popup,
  .pb-shell {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    max-height: 100dvh !important; border-radius: 0 !important;
    transform: none !important;
  }

  /* Project / program / grant / goal builder drawers already flex to 100%
     width; just drop the max-width cap and any rounded corners so they read
     as full-screen sheets. */
  .wk-pbd-drawer,
  .wk-pjd-drawer,
  .wk-gbd-drawer,
  .wk-gld-drawer {
    max-width: 100vw !important; width: 100vw !important;
    border-radius: 0 !important;
  }

  /* AI-builder / mode sub-popups opened from a Project */
  .gp-mode-popup,
  .gp-mode-popup--big,
  .gp-aib-shell,
  .gp-ais-card {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    max-height: 100dvh !important; border-radius: 0 !important;
  }
  /* The AI-builder side chat wraps under the main column on phone */
  .gp-aib-chat { width: 100% !important; }

  /* Bottom slide-up drawers: full width */
  .wk-completed-drawer,
  .wk-filter-popup { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; border-radius: 14px 14px 0 0 !important; }

  /* Quick-action popups (log time, budget, task picker) — near-full width */
  .wk-qa-popup { width: 94vw !important; max-width: 94vw !important; max-height: 90dvh !important; }

  /* ── Form fields: 16px min font stops iOS zoom-on-focus; bigger tap area ─ */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 16px !important;
  }
  .wk-field input, .wk-field select, .wk-field textarea,
  .wked-form-input { min-height: 42px; }
  textarea { min-height: 80px; }

  /* Buttons: comfortable minimum tap target */
  .os-cmd-btn,
  .wk-action-btn,
  .wk-focus-new-btn,
  .mw-quick-add-btn,
  .wk-qa-btn,
  .ph-nav-btn { min-height: 40px; }

  /* Two-column command button rows wrap */
  .os-cmd-row, .wk-action-row { flex-wrap: wrap; }
  .os-cmd-btn { flex: 1 1 calc(50% - 8px); }

  /* Quick-add capture bars: full width, stack input above button */
  .mw-quick-add { flex-wrap: wrap; gap: 8px; }
  .mw-quick-add input { flex: 1 1 100%; min-width: 0; }

  /* ═══════════════════════════════════════════════════════════════════════
     SHARED APP CHROME (dashboard-meta.js) — phone reflow.
     The shared MPMA Grants header injects a full-bleed hero banner, relocates the
     8-section pill nav into one fixed-height bar, and floats a stack of
     page-editor FABs — none of which collapses for phones. We tame it here,
     Work-scoped and ≤640px only, so desktop + the other MPMA Grants apps that share
     dashboard-meta stay untouched. Selectors are `html`-prefixed so they out-
     rank dashboard-meta's runtime-injected stylesheet on any !important tie
     (its <style> is appended after this file in the cascade). */

  /* Hero banner (#wtHeaderContainer): a decorative page header on desktop, but
     on a phone it balloons to ~720px of near-empty blue — its inner row keeps a
     310px desktop right-gutter reservation (max-width:calc(100% - 310px);
     padding-right:310px) that crushes content into a tall narrow column. The
     compact top bar already carries the logo/title/bell/avatar, so the hero is
     pure dead space here. Drop it and let content start right under the nav. */
  html #wtHeaderContainer { display: none !important; }

  /* Top bar: keep it a single compact ~57px row (brand + bell/avatar). The
     8-section pill nav and the in-tab sub-lens rail both move into a slide-out
     drawer (built by work-mobile.js), the way the marketing site's phone menu
     works — cramming tabs into this bar never fit. Hide the pill row + rail;
     the drawer reads them (they stay in the DOM, just display:none). */
  html .ai-topnav { position: sticky !important; top: 0 !important; z-index: 900 !important; }
  html .ai-topnav-inner { padding-left: 66px !important; }  /* clear the hamburger + a little breathing room before the logo */
  html .ai-topnav-inner .ph-nav { display: none !important; }
  /* Sub-lens rail (.ph-sidebar) is NOT in the drawer — the primary Sections and
     the in-tab views must be two separate controls. On a phone the horizontal
     chip row got clipped, so it becomes a DROPDOWN (built by work-mobile.js,
     styled near the bottom of this file): a compact "Overview ▾" button that
     opens a menu of the current tab's views. Hide the raw rail. */
  .wk-tab-panel .ph-sidebar { display: none !important; }

  /* Page-editor FABs (Improve this page / Toggle edit mode / Notes / New tab)
     are desktop authoring tools — hide on a phone. Keep Miles (the AI
     assistant); its inline style pins it top-right with !important, which no
     stylesheet rule can override, so nudge it to the bottom-right corner with a
     transform. It stacks above the create FAB (also bottom-right); hide it
     while the create speed-dial is open so the two never collide. */
  html .wt-improve-fab, html .wt-notes-fab, html .wt-bookmark-add-fab,
  html .wt-edit-fab-panel, html .wt-ask-ai-fab[aria-label="Toggle edit mode"] { display: none !important; }
  /* Miles: a small clean circle, stacked above the create FAB (bottom-right).
     dashboard-meta sizes/rounds it via the #wtAskAiBtn ID, so we must include
     the ID to win — the [aria-label] guard keeps this off the edit-mode twin. */
  #wtAskAiBtn[aria-label^="Miles"] { width: 46px !important; height: 46px !important; border-radius: 50% !important; transform: translateY(calc(100dvh - 340px)) !important; }
  html.wk-create-open .wt-ask-ai-fab[aria-label^="Miles"] { opacity: 0 !important; pointer-events: none !important; }

  /* ── Settings tab: dense label|control rows are laid out for a wide desktop
        column; on a phone the fixed-ish right side starves the label into a
        vertical sliver. Let these rows wrap/stack so labels stay readable. */
  .set-row { flex-wrap: wrap !important; gap: 6px 12px !important; align-items: flex-start !important; }
  .set-notif-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .set-notif-label { width: 100% !important; }
  .set-card-head { flex-wrap: wrap !important; }
  .set-card-head > * { min-width: 0 !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE CREATE — a + FAB (bottom-right) that opens a BOTTOM SHEET of all
     create options (Jobber/Apple pattern), so every option fits. Options carry
     data-wk-quickadd and reuse the app's existing create dispatch.
     ═══════════════════════════════════════════════════════════════════════ */
  #wkMobileCreate {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 9998;
    width: 56px; height: 56px; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--wt-theme-primary, #649954); color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    align-items: center; justify-content: center;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
  }
  #wkMobileCreate svg { width: 26px; height: 26px; transition: transform .22s ease; }
  #wkMobileCreate[aria-expanded="true"] { transform: rotate(45deg); }

  #wkMobileCreateScrim {
    position: fixed; inset: 0; z-index: 10080;
    background: rgba(15,23,42,.4);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  #wkMobileCreateScrim.is-open { opacity: 1; pointer-events: auto; }

  #wkCreateSheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10081;
    background: var(--surf, #fff); border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.2);
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
    max-height: 80vh; overflow-y: auto;
  }
  #wkCreateSheet.is-open { transform: none; }
  #wkCreateSheet .wkcs-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border, #e2e8f0); margin: 6px auto 12px; }
  #wkCreateSheet .wkcs-title { font: 800 12px/1 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .6px; color: var(--ink3, #94a3b8); padding: 0 4px 12px; }
  #wkCreateSheet .wkcs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #wkCreateSheet .wkcs-item {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: var(--surf, #fff);
    cursor: pointer; font: 600 14px/1.15 Inter, system-ui, sans-serif; color: var(--ink, #1e293b); text-align: left;
  }
  #wkCreateSheet .wkcs-item:active { background: var(--wt-bg, #f8fafc); }
  #wkCreateSheet .wkcs-dot { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; }
  #wkCreateSheet .wkcs-dot svg { width: 18px; height: 18px; }

  /* ── Apple-style press feedback: a quick, springy scale-down on tap so every
        control feels responsive (Messages/HIG). Applied to the phone controls. */
  #wkCreateSheet .wkcs-item, #wkMobileNav .wkmn-item, #wkSubDD,
  #wkSubDDMenu button, #wkMobileCreate, #wkNavBurger, .ax-card, .mw-task-card {
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s cubic-bezier(.2,.8,.2,1), background-color .15s ease, box-shadow .15s ease;
  }
  #wkCreateSheet .wkcs-item:active, #wkMobileNav .wkmn-item:active, #wkSubDD:active,
  #wkSubDDMenu button:active, .ax-card:active, .mw-task-card:active { transform: scale(.97) !important; }
  #wkMobileCreate:active { transform: scale(.92); }
  #wkNavBurger:active { transform: scale(.9); }

  /* ═══════════════════════════════════════════════════════════════════════
     SLIDE-OUT NAV DRAWER (built by work-mobile.js) — the phone home for the
     8 sections + the active tab's sub-lenses, like the marketing site's menu.
     ═══════════════════════════════════════════════════════════════════════ */
  #wkNavBurger {
    position: fixed; top: 9px; left: 10px; z-index: 950;
    width: 40px; height: 40px; border-radius: 11px;
    border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff);
    color: var(--ink, #0f172a); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: pointer;
  }
  #wkNavScrim {
    position: fixed; inset: 0; z-index: 10050; background: rgba(15,23,42,.42);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  #wkNavScrim.is-open { opacity: 1; pointer-events: auto; }
  #wkMobileNav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 320px; z-index: 10060;
    background: var(--surf, #fff); box-shadow: 2px 0 24px rgba(0,0,0,.18);
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column;
  }
  #wkMobileNav.is-open { transform: none; }
  #wkMobileNav .wkmn-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border, #eef1f5); overflow: hidden; min-height: 56px; }
  #wkMobileNav .wkmn-logo { font-weight: 800; font-size: 17px; color: var(--wt-theme-primary, #649954); }
  /* Real logo swapped in by work-mobile.js (ensureLogo); crop the padded PNG. */
  #wkMobileNav .wkmn-logo-img { height: 170px; width: auto; margin: 0 -66px; object-fit: contain; }
  #wkMobileNav .wkmn-close { border: none; background: none; font-size: 26px; line-height: 1; color: var(--ink3, #94a3b8); cursor: pointer; padding: 0 4px; }
  #wkMobileNav .wkmn-body { flex: 1; overflow-y: auto; padding: 12px 12px 24px; }
  #wkMobileNav .wkmn-sec { margin-bottom: 14px; }
  #wkMobileNav .wkmn-sec-lbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--ink3, #94a3b8); padding: 6px 10px; }
  #wkMobileNav .wkmn-item, #wkMobileNav .wkmn-sub {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: none; background: none; cursor: pointer; border-radius: 10px; font-family: inherit;
  }
  #wkMobileNav .wkmn-item { padding: 12px; font-size: 15px; font-weight: 600; color: var(--ink, #1e293b); }
  #wkMobileNav .wkmn-item.is-active { background: color-mix(in srgb, var(--wt-theme-primary, #649954) 15%, transparent); color: var(--wt-theme-primary, #649954); }
  #wkMobileNav .wkmn-sub { padding: 9px 12px; font-size: 13.5px; font-weight: 500; color: var(--ink2, #475569); }
  #wkMobileNav .wkmn-sub.is-active { background: color-mix(in srgb, var(--wt-theme-primary, #649954) 10%, transparent); color: var(--wt-theme-primary, #649954); font-weight: 600; }

  /* ── Sub-lens DROPDOWN (built by work-mobile.js) — the current tab's views as
        a compact "Overview ▾" button + menu, replacing the clipped chip row. ── */
  #wkSubDD {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; width: 100%;
    border: 1px solid var(--border, #e2e8f0); background: var(--surf, #fff); border-radius: 12px; cursor: pointer;
    font: 700 14px/1 Inter, system-ui, sans-serif; color: var(--ink, #1e293b);
  }
  #wkSubDD .wksdd-caret { margin-left: auto; opacity: .5; }
  #wkSubDDMenu {
    position: fixed; left: 12px; right: 12px; z-index: 10070; background: var(--surf, #fff);
    border: 1px solid var(--border, #e2e8f0); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.2);
    padding: 8px; opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity .16s, transform .16s; max-height: 70vh; overflow-y: auto;
  }
  #wkSubDDMenu.is-open { opacity: 1; pointer-events: auto; transform: none; }
  #wkSubDDMenu button {
    display: flex; align-items: center; width: 100%; text-align: left; border: none; background: none;
    padding: 12px; border-radius: 9px; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: var(--ink, #1e293b); cursor: pointer;
  }
  #wkSubDDMenu button.is-active { background: color-mix(in srgb, var(--wt-theme-primary, #649954) 12%, transparent); color: var(--wt-theme-primary, #649954); }
  #wkSubDDScrim { position: fixed; inset: 0; z-index: 10069; background: transparent; pointer-events: none; }
  #wkSubDDScrim.is-open { pointer-events: auto; }

  /* ── Content: bottom room so the corner FABs clear the last card ── */
  .ph-content, .ph-sub { padding-bottom: 96px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE = BASIC FUNCTIONS ONLY. A phone is for tracking what's getting done
     and adding to it — not the full desktop dashboard. Strip the extras:
       • the "What are you trying to do?" hero — redundant with the create FAB
       • the right-side widget stack (Upcoming / Recent Activity / Completions)
       • the Home financial summary row (Budget / Time / Engagements / Team)
     What stays: the key task-count tiles, the quick-add bar, and the task list.
     ═══════════════════════════════════════════════════════════════════════ */
  /* NOT `display:none` any more. The hero is now the host of the hub's ONE
     search box (#wkGlobalSearch moved in here from above the pill nav), and
     hiding the bar would leave a phone with no way to search at all. So the
     bar survives, stripped to just the search: its prompt line and its row of
     desktop create buttons are what the create FAB actually duplicates. */
  .os-command-bar {
    background: none !important; padding: 0 !important;
    margin-bottom: 10px !important; border-radius: 0 !important;
  }
  .os-command-prompt, .os-command-actions { display: none !important; }
  /* The generic .wk-gs phone rule above indents for a full-bleed bar; inside
     .ph-content (already padded) that reads as a double margin. */
  .wk-gs--home { margin: 0 0 10px !important; padding: 4px 6px 4px 12px !important; }
  .wk-support-stack { display: none !important; }
  #wkCommandCenter { display: none !important; }

  /* ── Scorecards → small 3-up stat chips: flat, number-forward, left accent.
        Small so all the counts fit without dominating the screen. ── */
  .ax-cards-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; overflow: visible !important; margin-bottom: 12px !important; padding: 0 !important; }
  .ax-card {
    flex: none !important; min-width: 0 !important; width: auto !important;
    height: 54px !important; min-height: 0 !important;
    flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; text-align: left !important;
    padding: 0 8px 0 11px !important; border-radius: 10px !important;
    box-shadow: none !important; border: 1px solid var(--border, #e8ecf1) !important;
    background: var(--surf, #fff) !important; transform: none !important;
  }
  .ax-card::before { top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: 3px !important; height: auto !important; border-radius: 10px 0 0 10px !important; }
  .ax-card-body { text-align: left !important; width: 100% !important; }
  .ax-card-val { font-size: 17px !important; letter-spacing: -.4px !important; }
  .ax-card-lbl { font-size: 8px !important; margin-top: 1px !important; letter-spacing: .3px !important; white-space: normal !important; line-height: 1.1 !important; }
  .ax-card-sub { display: none !important; }

  /* ── The Capacity hero is ONE card, not a 3-up grid of tiles, so it has to
        opt out of everything the block above just forced onto every scorecard
        row. Its chips carry `.ax-card` (the shared filter delegate keys off
        that class) which is the only reason they need naming here — otherwise
        they inherit the 54px stat-tile geometry and the row's grid columns. ── */
  /* ⚠️ `:not([hidden])` is load-bearing, and the guard below it is the belt to
        that braces. work.css hides the view you are not looking at with
        `.ax-cards-row[hidden] { display: none !important }` (0,2,0). A bare
        `.ax-cards-row.wk-cap-herorow` is ALSO (0,2,0), and this file loads
        AFTER work.css — so on equal specificity the later `display: block
        !important` won and BOTH heroes rendered stacked on every phone,
        Employees above Clients, whichever one the switch said was off. The
        generic `.ax-cards-row` rule above is only (0,1,0) so it never had this
        problem; a two-class selector does.
        ⚠️ AND THAT IS WHY THE SCOPE BELOW IS `:where(...)` RATHER THAN A PLAIN
        CLASS: `:where()` weighs ZERO, so these stay (0,2,0) and the tie above
        resolves exactly as it did before the split. A plain `.wk-caps--supply`
        would make them (0,3,0), quietly changing which rule wins here and in
        work.css. */
  /* ── supply: Team → Capacity → Employees, and Mine → Capacity ── */
  .ax-cards-row.wk-cap-herorow:where(.wk-caps--supply):not([hidden]) { display: block !important; grid-template-columns: none !important; margin-bottom: 12px !important; }
  .ax-cards-row.wk-cap-herorow:where(.wk-caps--supply)[hidden] { display: none !important; }

  /* ── demand: Team → Capacity → Clients ── */
  .ax-cards-row.wk-cap-herorow:where(.wk-caps--demand):not([hidden]) { display: block !important; grid-template-columns: none !important; margin-bottom: 12px !important; }
  .ax-cards-row.wk-cap-herorow:where(.wk-caps--demand)[hidden] { display: none !important; }
  .wk-cap-hero { padding: 11px 13px 12px !important; border-radius: 12px !important; }
  /* ⚠️ …EXCEPT THE SCORECARD BAND, which is no longer a panel at any width —
     see the `--sc` block in work.css. Padding on a borderless, groundless box
     is just an inset that stops the tiles reaching the edge of a phone. */
  .wk-cap-hero.wk-cap-hero--sc { padding: 0 !important; border-radius: 0 !important; }
  .wk-cap-hero-head { margin-bottom: 10px !important; }
  .wk-cap-hero-split { gap: 12px !important; }
  .wk-cap-hero-val { font-size: 23px !important; letter-spacing: -.8px !important; }
  .wk-cap-hero-lbl { font-size: 8.5px !important; margin-top: 3px !important; }
  .wk-cap-hero-note { font-size: 10.5px !important; }
  .wk-cap-hero-chips { gap: 5px !important; }
  .ax-cards-row .wk-cap-chip {
    height: auto !important; min-height: 0 !important;
    flex-direction: row !important; align-items: baseline !important;
    justify-content: flex-start !important;
    padding: 4px 9px !important; border-radius: 999px !important;
    background: var(--surf2, #f8fafc) !important;
  }
  .ax-cards-row .wk-cap-chip::before { display: none !important; }
  .ax-cards-row .wk-cap-chip .ax-card-lbl { font-size: 9.5px !important; margin-top: 0 !important; letter-spacing: .1px !important; }

  /* ── The Capacity scorecards, for the same reason the chips are here: they
        are `.ax-card`s (the filter delegate keys off that class) and would
        otherwise inherit the 54px stat-chip geometry from the block above —
        which crops a tile carrying a figure, a label, a sentence AND a meter
        down to about its first line. Two-up rather than the row's three: five
        tiles at a third of a phone leaves no room for the second line, and the
        second line is where the companies and the pace verdict live.
        The left accent rail stays as the block above set it — on a phone that
        IS the house scorecard, and these are scorecards. ── */
  .wk-capsc { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .ax-cards-row .wk-capsc-card {
    height: auto !important; min-height: 0 !important;
    flex-direction: column !important; align-items: flex-start !important;
    justify-content: flex-start !important; text-align: left !important;
    padding: 10px 11px 11px !important; border-radius: 12px !important;
    background: var(--surf, #fff) !important;
  }
  .wk-capsc-card .ax-card-val { font-size: 20px !important; letter-spacing: -.5px !important; }
  .wk-capsc-card .ax-card-lbl { margin-top: 3px !important; }
  .wk-capsc-sub { font-size: 9.5px !important; margin-top: 4px !important; }
  /* ⚠️ THE FOOT WRAPS ON A PHONE. It is `white-space:nowrap` on desktop, where
     a tile is a fifth of a laptop and the sentence always fits; two-up on a
     390px screen it does not, and "Nothing was allocated for this mo…" was
     being cut off mid-word by the tile's own overflow. The period picker made
     the string longer ("this month" for "this week") and turned a tight fit
     into a clipped one. */
  .wk-capsc-foot { font-size: 9px !important; margin-top: 5px !important;
    white-space: normal !important; line-height: 1.3 !important; }
  .wk-capsc-meter { margin-top: 7px !important; }

  /* ── THE LEAD TILE SPANS THE PHONE, and it is the one tile that must ──────
        The 2026-08-17 redesign made the first tile a wide summary carrying two
        figures, a bar and a verdict sentence. The two-up rule above would hand
        it half a 390px screen — which is how the tile that exists to answer
        "how much still needs allocating and can we take it" ends up as the
        narrowest thing on the panel. It goes full width; the quiet four keep
        their 2 × 2. The desktop stylesheet already stacks its two figures at
        this width, so only the span and the headline size are restated here.
        ⚠️ `!important` throughout — every rule it is overriding above carries
        it, so a plain declaration loses however specific it is. */
  .wk-capsc--lead { grid-template-columns: 1fr 1fr !important; }
  .wk-capsc--lead .wk-capld { grid-column: 1 / -1 !important; padding: 13px 13px 12px !important; }
  .wk-capsc-card.wk-capld .wk-capld-v { font-size: 27px !important; letter-spacing: -.5px !important; }
  /* 🚨 THE VERDICT IS NO LONGER IN THE LEAD TILE (2026-09-02) — it is
     `.wk-capsc-verdict`, a strip under the whole band, because two wrapped
     lines inside the lead made every tile in the row ~27px taller. On a phone
     it WRAPS rather than clipping: the desktop rule pins it to one line so the
     strip cannot push the grid down, and at this width the sentence cannot fit
     on one line at all — an ellipsis there would hide the whole judgement to
     save a row of pixels the phone has already spent stacking the tiles. */
  .wk-capsc-verdict { font-size: 10.5px !important; align-items: flex-start !important; }
  .wk-capsc-verdict-t { white-space: normal !important; overflow: visible !important; }
  .wk-capld-leg { font-size: 9.5px !important; gap: 3px 9px !important; }
  /* The head's three controls wrap onto their own lines on a phone; the week
     picker keeps its full width because a mis-tapped week is a wrong number. */
  .wk-cap-hero-tools { gap: 6px !important; width: 100% !important; }
  .wk-capwk { flex: 1 1 auto !important; }
  .wk-capwk-btn { flex: 1 1 0 !important; padding: 5px 6px !important; font-size: 9.5px !important; }

  /* ── The client band is a RAIL of per-client tiles, and its tiles are
        `.ax-card`s too — so they inherit the 54px stat-chip geometry and the
        left accent rail from the block above, both of which flatten a tile
        that has four stacked lines in it. Restore the tile, and swipe the rail
        sideways: one card per screen-and-a-bit is how a phone reads four
        clients two-up instead of one tall stack. The row itself is already
        `display:block` via the `.wk-cap-herorow` rule above. ── */
  .wk-clcap { padding: 11px 13px 12px !important; border-radius: 12px !important; }
  .wk-clcap-head { margin-bottom: 10px !important; gap: 10px !important; }
  .wk-clcap-tot { gap: 14px !important; }
  .wk-clcap-tot-i > b { font-size: 17px !important; }
  .wk-clcap-state { font-size: 11.5px !important; }
  .wk-clcap-rail { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .ax-cards-row .wk-clcap-tile {
    height: auto !important; min-height: 0 !important;
    flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; text-align: left !important;
    padding: 10px 11px 11px !important; border-radius: 12px !important;
    background: var(--surf, #fff) !important;
  }
  .ax-cards-row .wk-clcap-tile::before {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: auto !important; height: 3px !important; border-radius: 12px 12px 0 0 !important;
  }
  .ax-cards-row .wk-clcap-t-nm { font-size: 11.5px !important; margin-top: 0 !important; letter-spacing: -.1px !important; }
  .wk-clcap-t-fig > b { font-size: 19px !important; }

  /* ── The pie is an `.ax-card` too, and the 54px stat-chip geometry above
        would crush a two-ring chart to a sliver. Same restoration as the tiles,
        stacked full-width above them: on a phone the ring is the one thing
        worth showing at size, and the rail below it is already two-up.
        The stacking itself comes from work.css's max-width:900px rule — this
        block only has to re-state the gap, because the desktop `.wk-clcap-rail`
        negative margin is answered by the tighter mobile gap. ── */
  .wk-clcap-demand { gap: 10px !important; }
  .ax-cards-row .wk-clcap-pie {
    height: auto !important; min-height: 0 !important;
    flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; text-align: left !important;
    padding: 11px 12px 12px !important; border-radius: 12px !important;
    background: var(--surf, #fff) !important;
  }
  .ax-cards-row .wk-clcap-pie::before {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: auto !important; height: 3px !important; border-radius: 12px 12px 0 0 !important;
  }
  .ax-cards-row .wk-clcap-pie-eb .ax-card-lbl { font-size: 11.5px !important; margin-top: 0 !important; letter-spacing: -.1px !important; }
  .wk-clcap-pie .wk-clcap-ring { max-width: 204px !important; }
  .wk-clcap-ring .wk-capbd-ring-v { font-size: 26px !important; }

  /* ── Task rows → dense list. Drop the description snippet, tighten padding,
        flatten: ~54px rows instead of ~90px cards. The status left-rail + the
        priority/subtask pills stay. ── */
  .mw-task-card { min-height: 0 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; }
  .mw-card-left { padding: 9px 0 9px 12px !important; gap: 9px !important; }
  .mw-card-right { padding: 9px 12px 9px 8px !important; }
  .mw-card-desc { display: none !important; }
  .mw-task-card-title { font-size: 13px !important; margin-bottom: 2px !important; line-height: 1.3 !important; }
  .mw-card-meta { margin-top: 2px !important; gap: 4px !important; }
  .wk-focus-list, .wk-focus-list.wk-view-board { display: flex !important; flex-direction: column !important; gap: 8px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     ROUND-2 POLISH — bigger logo, un-crammed task rows, compact AI box, tidier
     popups, drawer uses the real logo.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Logo: scale the padded PNG + its crop margins proportionally (source is
     120px / -47px; 190px / -74px = same clean crop, ~1.58x bigger). */
  html .ai-topnav-brand img { height: 190px !important; margin-left: -74px !important; margin-right: -74px !important; }

  /* Drawer header uses the real brand logo (work-mobile.js) instead of text.
     The padded PNG is oversized + centre-cropped inside a fixed-height header. */
  #wkMobileNav .wkmn-head { height: 58px !important; padding: 0 16px 0 18px !important; overflow: hidden !important; }
  #wkMobileNav .wkmn-logo-img { height: 150px; width: auto; margin: 0 -59px; object-fit: contain; }

  /* Task rows: make the whole title READABLE — wrap to 2 lines (Jobber/Apple
     style) instead of truncating, at a slightly smaller size. Drop the
     assignee NAME label + "No date" placeholder, shrink avatar + pills so the
     title owns the width. */
  .mw-card-assignee-label { display: none !important; }
  .mw-card-due--none { display: none !important; }
  .mw-card-right { padding: 8px 10px 8px 4px !important; gap: 6px !important; }
  .mw-card-content { min-width: 0 !important; }
  .mw-task-card-title {
    white-space: normal !important; overflow: hidden !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    font-size: 12.5px !important; line-height: 1.25 !important;
  }
  .mw-card-pill { font-size: 9px !important; padding: 2px 7px !important; }
  .mw-pill--pri, .mw-pill--status { font-size: 8px !important; padding: 2px 7px !important; }
  .mw-pill--goal { max-width: 92px !important; }
  .mw-card-avatar { width: 24px !important; height: 24px !important; }

  /* Quick-add / AI capture box: single compact row (was wrapping the AI toggle,
     input and options onto separate lines → a tall 130px panel). No taller than
     the desktop bar now. The extra option row hides on phone — the full create
     popup (+ sheet) carries those. */
  .mw-quick-add { flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; padding: 8px 10px !important; }
  .mw-quick-add-input, .mw-quick-add input, .mw-quick-add textarea { flex: 1 1 auto !important; width: auto !important; min-height: 34px !important; max-height: 40px !important; }
  .mw-quick-add .qa-options { display: none !important; }

  /* Popups: breathing room + icon-only "Draft with AI" (hide its text span). */
  .tp-main { padding: 18px 16px 20px !important; }
  .tp-field, .tp-section { margin-bottom: 16px !important; }
  .wk-aifill-top { max-width: none !important; padding: 8px 10px !important; }
  .wk-aifill-top span { display: none !important; }
  .tp-action-btn--create { padding: 9px 14px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     BOTTOM SECTION BAR (built by work-mobile.js) — the phone's primary nav.
     Seven sections at 390px is ~55px each, so the LABEL is the constraint: 9.5px
     and a short word picked by tab id (SHORT in work-mobile.js), never the
     button's own text, which carries a badge count.
     ═══════════════════════════════════════════════════════════════════════ */
  #wkPhoneNav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    align-items: stretch;
    /* the home strip is PADDING, not height — as height the labels would sit
       inside the gesture area */
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surf, #fff) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border, #e6ebf2);
    box-shadow: 0 -2px 14px rgba(15, 23, 42, .06);
  }
  #wkPhoneNav .wkpn-item {
    flex: 1 1 0; min-width: 0;          /* ⚠️ min-width:0 or "Settings" widens its own track */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px 8px; border: none; background: none; cursor: pointer;
    font-family: inherit; color: var(--ink3, #94a3b8);
    -webkit-tap-highlight-color: transparent;
    transition: color .14s ease, transform .12s ease;
  }
  #wkPhoneNav .wkpn-ic { position: relative; display: flex; line-height: 0; }
  #wkPhoneNav .wkpn-lbl {
    font-size: 9.5px; font-weight: 700; letter-spacing: -.1px; line-height: 1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #wkPhoneNav .wkpn-item.is-active { color: var(--wt-theme-primary, #649954); }
  #wkPhoneNav .wkpn-item.is-active .wkpn-lbl { font-weight: 800; }
  #wkPhoneNav .wkpn-item:active { transform: scale(.93); }
  /* the count the real nav button keeps in its text ("Work 9"), as a badge */
  #wkPhoneNav .wkpn-badge {
    position: absolute; top: -4px; right: -8px; min-width: 15px; height: 15px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
    border-radius: 9px; background: #dc2626; color: #fff;
    font-size: 9px; font-weight: 800; font-style: normal; line-height: 1;
  }
  /* display:flex above beats [hidden]'s display:none, so say it again */
  #wkPhoneNav .wkpn-badge[hidden] { display: none; }

  /* The burger is the FALLBACK now, hidden only once the bar has actually
     built. If it never does, a phone still has a way off the tab it loaded on. */
  html.wk-has-phonenav #wkNavBurger { display: none !important; }

  /* The create FAB has to clear the bar, and so does the content under it. */
  html.wk-has-phonenav #wkMobileCreate {
    bottom: calc(env(safe-area-inset-bottom) + 74px);
  }
  /* ⚠️ AND MILES HAS TO MOVE WITH IT. Lifting the create FAB 74px to clear the
     bar pushed it straight into #wtAskAiBtn, which sat at 684..730 - measured
     as a 40x16px overlap, the + drawn on top of Miles's face. Miles is placed
     by transform (dashboard-meta owns its box), so the constant moves rather
     than the position model; the number is verified by measurement, not
     arithmetic - see ~/_pwverify/_wkphonefabs.cjs. */
  #wtAskAiBtn[aria-label^="Miles"] { transform: translateY(calc(100dvh - 414px)) !important; }
  html.wk-has-phonenav .ph-content,
  html.wk-has-phonenav .ph-sub {
    padding-bottom: calc(env(safe-area-inset-bottom) + 118px) !important;
  }

  /* 🚨 A 190px INVISIBLE LOGO WAS EATING EVERY TAP UNDER THE TOP BAR.
     .ai-topnav is 57px tall with overflow:visible, and the brand <img> inside is
     sized 190px with negative margins to crop a padded PNG — so its box measures
     top:-67 to bottom:123 and hangs 66px BELOW the visible bar, over the content,
     transparent and fully hit-testable. #wkSubDD sits at 77–115px, squarely
     inside it: Playwright reported ".ai-topnav-brand … intercepts pointer
     events", and a finger got the same answer — the sub-lens control could not
     be opened at all.
     The anchor's box is pinned to the bar so the tap area IS the bar; the image
     keeps its oversize so the crop still looks right, and simply stops being
     tappable through. Phone-only: on a desktop nothing sits under the bar. */
  html .ai-topnav-brand {
    max-height: 46px; align-self: center;
    display: inline-flex; align-items: center; overflow: visible;
  }
  html .ai-topnav-brand img { pointer-events: none; }

}

/* The mobile create FAB + nav drawer are display:none everywhere except phones.
   Declared OUTSIDE the media query so the default (hidden) always applies; the
   query above only styles them, this hides them on wider screens. */
#wkMobileCreate, #wkMobileCreateScrim, #wkCreateSheet, #wkNavBurger, #wkNavScrim, #wkMobileNav,
#wkSubDD, #wkSubDDMenu, #wkSubDDScrim, #wkPhoneNav { display: none; }
@media (max-width: 640px) {
  #wkMobileCreate { display: flex; }
  #wkMobileCreateScrim { display: block; }
  #wkCreateSheet { display: block; }
  #wkNavBurger { display: flex; }
  #wkNavScrim { display: block; }
  #wkMobileNav { display: flex; }
  #wkSubDD { display: flex; }
  #wkSubDDMenu { display: block; }
  #wkSubDDScrim { display: block; }
  #wkPhoneNav { display: flex; }
}