/*
 * OpsDesk on phones. Everything here is inside the phone media query, so at
 * 1000px and wider this file changes nothing.
 *
 * v2.js injects ~28 style blocks with !important after the stylesheets, and
 * they target bare elements (header, main, nav, button). Rules here carry
 * body.phone and, where those blocks reach, !important - and are judged by
 * what the browser resolves, not by what this file says.
 */
@media (max-width: 999.98px) {

  /* The desktop page stays loaded under the phone layer, out of sight. */
  body.phone .shell { display: none !important; }

  body.phone { overflow: hidden !important; }

  /* ---- the frame: top bar over a screen that scrolls on its own ---- */
  body.phone #phoneRoot {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column;
    background: var(--bg, #f4f6f8);
    color: var(--ink, #0f1c28);
    font-family: var(--ops-sans, Inter, "Segoe UI", Arial, sans-serif);
    z-index: 10;
  }

  /* The toast is a body-level element after #phoneRoot (itself a stacking
     context, z 10). Menu closed: the toast is above the whole layer. Menu
     open: it drops under the layer, so the menu, its dim area and Sign out
     are never covered by it. Centred inside the gutters. */
  body.phone .toast {
    z-index: 11;
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    text-align: center; font-size: 14px;
  }
  /* Hidden, the toast still sits (translated, invisible) over whatever is at its place:
     with an overlay open that is the buttons. It takes no tap until it shows. */
  body.phone .toast:not(.show) { pointer-events: none; }

  body.phone #phoneRoot .ph-main {
    flex: 1 1 auto; min-height: 0; min-width: 0;
    margin: 0 !important; padding: 0 !important;
    overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.phone #phoneRoot .ph-screen { display: block; min-width: 0; }

  /* .ph-main is a <main>, so the desktop's own `body.<tab>-mode main > header
     { display:none }` rules match a header placed directly in it. */
  body.phone #phoneRoot .ph-main > header:not([hidden]) { display: block; }
  body.phone #phoneRoot.menu-open ~ .toast { z-index: 1; }

  /* ---- top bar ---- */
  body.phone #phoneRoot .ph-top {
    flex: 0 0 48px; height: 48px; min-height: 48px;
    display: flex !important; align-items: center; gap: 4px;
    margin: 0 !important; padding: 0 4px !important;
    background: var(--ops-rail, #071f35);
    color: #fff;
    position: relative; z-index: 1;
  }

  body.phone #phoneRoot .ph-menu,
  body.phone #phoneRoot .ph-actions button {
    flex: 0 0 auto;
    min-width: 44px; min-height: 44px;
    margin: 0; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #fff;
    border: 0; border-radius: 8px;
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-menu svg { display: block; }

  body.phone #phoneRoot .ph-title {
    flex: 1 1 auto; min-width: 0;
    font-size: 16px; font-weight: 600; line-height: 1.2;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  body.phone #phoneRoot .ph-actions {
    flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  }

  /* ---- the slide-out menu ---- */
  body.phone #phoneRoot .ph-scrim {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(7, 31, 53, .35);
    visibility: hidden; opacity: 0;
    z-index: 2;
  }
  body.phone #phoneRoot .ph-scrim.open { visibility: visible; opacity: 1; }

  body.phone #phoneRoot .ph-drawer {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 260px; max-width: 85vw;
    display: flex !important; flex-direction: column; align-content: flex-start; gap: 4px;
    margin: 0 !important; padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto;
    background: var(--ops-rail, #071f35);
    color: var(--ops-rail-ink-2, #b8cad9);
    box-shadow: 8px 0 24px rgba(0, 0, 0, .25);
    transform: translateX(-100%);
    visibility: hidden;
    z-index: 3;
  }
  body.phone #phoneRoot .ph-drawer.open { transform: translateX(0); visibility: visible; }

  body.phone #phoneRoot .ph-item {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 48px; margin: 0; padding: 0 12px;
    background: transparent; color: var(--ops-rail-ink-2, #b8cad9);
    border: 0; border-radius: 8px;
    font: inherit; font-size: 16px; font-weight: 500; text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-item[aria-current="page"] {
    background: var(--ops-rail-active, #1b435f);
    color: var(--ops-rail-ink, #fff);
  }
  body.phone #phoneRoot .ph-icon { flex: 0 0 20px; display: inline-flex; width: 20px; height: 20px; }
  body.phone #phoneRoot .ph-icon svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  body.phone #phoneRoot .ph-label { flex: 1 1 auto; min-width: 0; }
  body.phone #phoneRoot .ph-count {
    flex: 0 0 auto; min-width: 24px; padding: 2px 8px;
    border-radius: 999px; text-align: center;
    background: var(--ops-rail-chip, #24465f); color: #fff;
    font-style: normal; font-size: 12px; font-weight: 600; line-height: 20px;
  }

  /* account footer: the signed-in person, then the two actions */
  body.phone #phoneRoot .ph-account {
    margin-top: auto; padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; flex-direction: column; gap: 4px;
  }
  body.phone #phoneRoot .ph-account[hidden] { display: none; }
  body.phone #phoneRoot .ph-who {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px;
  }
  body.phone #phoneRoot .ph-avatar {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ops-rail-chip, #24465f); color: #fff;
    font-size: 13px; font-weight: 700; font-style: normal;
  }
  body.phone #phoneRoot .ph-copy { display: flex; flex-direction: column; min-width: 0; }
  body.phone #phoneRoot .ph-name {
    color: var(--ops-rail-ink, #fff); font-size: 15px; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.phone #phoneRoot .ph-role { font-size: 12px; line-height: 1.25; color: var(--ops-rail-ink-2, #b8cad9); }
  body.phone #phoneRoot .ph-act {
    flex: 0 0 auto; display: flex; align-items: center;
    width: 100%; min-height: 48px; margin: 0; padding: 0 12px;
    background: transparent; color: var(--ops-rail-ink-2, #b8cad9);
    border: 0; border-radius: 8px;
    font: inherit; font-size: 16px; font-weight: 500; text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-act[hidden] { display: none; }

  body.phone #phoneRoot .ph-act:focus-visible,
  body.phone #phoneRoot .ph-menu:focus-visible,
  body.phone #phoneRoot .ph-actions button:focus-visible,
  body.phone #phoneRoot .ph-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

  /* ---- overlays: bottom panel, side panel, full-screen form ----
     An overlay fills the layer down to the keyboard (--ph-kb, set by mobile.js
     from the visual viewport), so whatever is pinned to its bottom is pinned
     above the keyboard. Above the top bar (1), the dim area of the menu (2)
     and the menu (3). */
  body.phone #phoneRoot .ph-overlay {
    position: fixed; top: var(--ph-vv-top, 0px); right: 0; left: 0; bottom: var(--ph-kb, 0px);
    z-index: 5;
  }
  body.phone #phoneRoot .ph-form-wrap { background: var(--bg, #f4f6f8); }

  /* The toast is outside the layer, above it (z 11). With an overlay open it
     lifts above the buttons pinned at the overlay's bottom (--ph-toast-lift is
     measured by mobile.js), so a confirmation or a save error never hides Save. */
  body.phone.phone-overlay .toast { bottom: calc(var(--ph-toast-lift, 0px) + 12px); }

  body.phone #phoneRoot .ph-overlay [hidden] { display: none !important; }

  /* shared: buttons */
  body.phone #phoneRoot .ph-btn {
    box-sizing: border-box; flex: 1 1 0; min-width: 44px; min-height: 48px;
    margin: 0; padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 9px;
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-btn-primary { background: var(--blue, #1677e8); color: #fff; }
  body.phone #phoneRoot .ph-btn-danger { background: #b42318; color: #fff; }
  body.phone #phoneRoot .ph-btn-ghost { background: #fff; color: #3d4d5c; border-color: var(--ops-line, #dfe5ea); }
  body.phone #phoneRoot .ph-btn[aria-disabled="true"],
  body.phone #phoneRoot .ph-back[aria-disabled="true"] { opacity: .55; cursor: default; }

  /* shared: what goes in a body - fields are 16px (no zoom on focus), 44px tall */
  body.phone #phoneRoot .ph-ov-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.phone #phoneRoot .ph-ov-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  body.phone #phoneRoot .ph-ov-body select,
  body.phone #phoneRoot .ph-ov-body textarea {
    box-sizing: border-box; display: block; width: 100%; max-width: 100%;
    min-height: 44px !important; margin: 0;
    padding: 0 10px; font: inherit; font-size: 16px !important; line-height: 1.3;
    color: var(--ink, #0f1c28); background: #fff;
    border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
  }
  body.phone #phoneRoot .ph-ov-body textarea { padding: 10px; min-height: 88px !important; }

  /* ---- panel ---- */
  body.phone #phoneRoot .ph-ov-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(7, 31, 53, .35); }
  body.phone #phoneRoot .ph-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 90%;
    box-sizing: border-box; display: flex; flex-direction: column;
    background: #fff; color: var(--ink, #0f1c28);
    border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(7, 31, 53, .22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    outline: none;
  }
  body.phone #phoneRoot .ph-grab { flex: 0 0 4px; width: 36px; height: 4px; margin: 10px auto 6px; border-radius: 2px; background: var(--ops-line, #dfe5ea); }
  body.phone #phoneRoot .ph-panel-head {
    flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 4px 16px 10px;
  }
  body.phone #phoneRoot .ph-panel-title { flex: 0 0 auto; font-size: 16px; font-weight: 600; line-height: 1.3; }
  body.phone #phoneRoot .ph-panel-sub {
    flex: 0 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: #5b6c7b; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.phone #phoneRoot .ph-panel-body {
    flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
    padding: 0 16px 12px; font-size: 14px; line-height: 1.45;
  }
  body.phone #phoneRoot .ph-panel-foot {
    flex: 0 0 auto; box-sizing: border-box;
    padding: 10px 16px 12px; border-top: 1px solid var(--ops-line, #dfe5ea);
  }
  body.phone #phoneRoot .ph-panel-actions { display: flex; gap: 8px; }

  /* ---- form ---- */
  body.phone #phoneRoot .ph-form {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    box-sizing: border-box; display: flex; flex-direction: column;
    background: #fff; color: var(--ink, #0f1c28);
    outline: none;
  }
  body.phone #phoneRoot .ph-form-head {
    flex: 0 0 48px; height: 48px; box-sizing: border-box;
    display: flex; align-items: center; gap: 4px;
    padding: 0 12px 0 4px; border-bottom: 1px solid var(--ops-line, #dfe5ea); background: #fff;
  }
  body.phone #phoneRoot .ph-back {
    flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ink, #0f1c28); border: 0; border-radius: 8px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-back svg { display: block; }
  body.phone #phoneRoot .ph-form-title {
    flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.phone #phoneRoot .ph-form-body {
    flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
    padding: 16px; font-size: 14px; line-height: 1.45;
  }
  body.phone #phoneRoot .ph-form-foot {
    flex: 0 0 auto; box-sizing: border-box;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ops-line, #dfe5ea); background: #fff;
  }
  body.phone #phoneRoot.kb-open .ph-form-foot { padding-bottom: 10px; }
  body.phone #phoneRoot .ph-error { margin: 0 0 8px; font-size: 14px; line-height: 1.35; font-weight: 500; color: #b42318; }
  body.phone #phoneRoot .ph-form-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }

  /* Discard changes? - a question over the form, not a second overlay. */
  body.phone #phoneRoot .ph-discard {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(7, 31, 53, .45);
  }
  body.phone #phoneRoot .ph-discard-card {
    box-sizing: border-box; width: 100%; max-width: 340px; padding: 18px 16px 16px;
    background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(7, 31, 53, .3);
  }
  body.phone #phoneRoot .ph-discard-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
  body.phone #phoneRoot .ph-discard-text { margin: 6px 0 14px; font-size: 14px; line-height: 1.4; color: #3d4d5c; }
  body.phone #phoneRoot .ph-discard-btns { display: flex; gap: 8px; }

  /* ---- landscape: side panel (340px, under the top bar); form one column, 640px at most ----
     The panel is 340px, or 48% of the screen on phones under 708px wide (both iPhone SE
     sizes), so the list beside it keeps room for its titles (user, 2026-10-07). */
  body.phone #phoneRoot { --ph-side: min(340px, 48vw); }
  /* No dim area and nothing inert: the list stays visible and live beside the panel. */
  body.phone-landscape #phoneRoot .ph-ov-scrim { display: none; }
  body.phone-landscape #phoneRoot .ph-panel-wrap { pointer-events: none; }
  body.phone-landscape #phoneRoot .ph-panel-wrap .ph-panel,
  body.phone-landscape #phoneRoot .ph-panel-wrap .ph-discard { pointer-events: auto; }
  body.phone-landscape #phoneRoot .ph-grab { display: none; }
  body.phone-landscape #phoneRoot .ph-panel {
    left: auto; right: 0; top: 48px; bottom: 0; max-height: none;
    width: calc(var(--ph-side) + env(safe-area-inset-right, 0px));
    padding: 12px env(safe-area-inset-right, 0px) 0 0;
    border-radius: 0; box-shadow: -8px 0 24px rgba(7, 31, 53, .18);
  }
  /* The list beside the side panel: it keeps the room the panel leaves, so every
     row can still be tapped (the panel sits over the right 340px). */
  body.phone-landscape.phone-overlay #phoneRoot .ph-main { padding-right: calc(var(--ph-side) + env(safe-area-inset-right, 0px)) !important; }
  body.phone-landscape #phoneRoot .ph-form {
    left: 0; right: 0; width: 640px; max-width: 100%; margin: 0 auto;
  }
  body.phone-landscape #phoneRoot .ph-form-body,
  body.phone-landscape #phoneRoot .ph-form-foot {
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  body.phone-landscape #phoneRoot .ph-form-head { padding-left: max(4px, env(safe-area-inset-left, 0px)); }

  /* ---- landscape, per spec 5.6 (the frozen landscape mockup) ---------------------
     Shared: the tab's week selector (or Audit's count) in the top bar; padding on the
     notch side, whichever side it is on; two columns where content would stretch.
     (body.phone.phone-landscape: these must win over the portrait rules further down.) */
  body.phone #phoneRoot .ph-top-slot { display: none; }
  body.phone.phone-landscape #phoneRoot .ph-top {
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important; padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
  }
  body.phone.phone-landscape #phoneRoot .ph-title { flex: 0 1 auto; }
  body.phone.phone-landscape #phoneRoot .ph-top-slot { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; }
  body.phone.phone-landscape #phoneRoot .ph-main {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
  /* ...and beside an open side panel the list keeps the room the panel leaves (as above). */
  body.phone.phone-landscape.phone-overlay #phoneRoot .ph-main { padding-right: calc(var(--ph-side) + env(safe-area-inset-right, 0px)) !important; }
  /* the week selector in the top bar: one compact row, on the navy */
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week { flex-wrap: nowrap; gap: 6px; padding: 0; margin: 0; }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-nav {
    flex: 0 0 auto; height: 46px; box-sizing: border-box;
    background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22);
  }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-step { color: #fff; height: 44px; min-height: 44px; }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-mid { flex: 0 0 auto; padding: 0 2px; }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-range { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-note { display: none; }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-today {
    height: 46px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .22);
  }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-step:disabled,
  body.phone.phone-landscape #phoneRoot .ph-top .ph-week-today:disabled { opacity: .45; }
  body.phone.phone-landscape #phoneRoot .ph-top .ph-audit-count { padding: 0 6px; font-size: 13px; color: #b8cad9; white-space: nowrap; }

  /* Dashboard: greeting on its own row; the four tiles in one row; Weekly score full
     width with its graph alongside; cards two by two. */
  body.phone.phone-landscape #phoneRoot .ph-screen[data-view="dashboard"] { padding: 12px 0 20px; }
  body.phone.phone-landscape #phoneRoot .ph-greet { font-size: 20px; margin-bottom: 10px; }
  body.phone.phone-landscape #phoneRoot #dashboardView .kpi-new { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.phone.phone-landscape #phoneRoot #dashboardView .kpi-new .kpi-score {
    grid-column: 1 / -1 !important; display: grid !important;
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; align-items: center;
  }
  body.phone.phone-landscape #phoneRoot #dashboardView .kpi-score .kpi-label { grid-column: 1; grid-row: 1; }
  body.phone.phone-landscape #phoneRoot #dashboardView .kpi-score .kpi-value { grid-column: 1; grid-row: 2; }
  body.phone.phone-landscape #phoneRoot #dashboardView .kpi-score svg { grid-column: 2; grid-row: 1 / span 2; width: 100% !important; }
  body.phone.phone-landscape #phoneRoot #dashboardView .dashboard-primary-grid,
  body.phone.phone-landscape #phoneRoot #dashboardView .dashboard-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; }

  /* Review: the Completion review takes the full width and splits; the left (the
     submission, the note, Return and Approve) stays put; the history on the right scrolls. */
  body.phone.phone-landscape #phoneRoot .ph-form:has(.ph-cr) { width: auto; max-width: none; }
  body.phone.phone-landscape #phoneRoot .ph-form-body:has(.ph-cr) { overflow: hidden; padding: 0; display: flex; }
  body.phone.phone-landscape #phoneRoot .ph-cr {
    flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.phone.phone-landscape #phoneRoot .ph-review-left,
  body.phone.phone-landscape #phoneRoot .ph-review-right {
    min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  body.phone.phone-landscape #phoneRoot .ph-review-left { padding-left: max(16px, env(safe-area-inset-left, 0px)); border-right: 1px solid var(--ops-line, #dfe5ea); }
  body.phone.phone-landscape #phoneRoot .ph-review-right { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body.phone.phone-landscape #phoneRoot .ph-review-right .ph-tl-sec { margin-top: 0; padding-top: 0; border-top: 0; }
  /* On the shortest phones the left half cannot hold everything at once: Return and Approve
     stay pinned at its foot, always in reach, and what is above them scrolls on its own
     (the history on the right never moves with it). */
  body.phone.phone-landscape #phoneRoot .ph-review-left .ph-cr-btns {
    position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); z-index: 1;
    margin: 0 -14px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff;
    box-shadow: 0 -1px 0 var(--ops-line, #dfe5ea);
  }
  body.phone.phone-landscape #phoneRoot .ph-review-left textarea { min-height: 64px !important; }

  /* Audit: one fixed toolbar row (search, segments, All time, All people, Export CSV),
     the count in the top bar, only the list (and the side panel) scroll. */
  body.phone.phone-landscape #phoneRoot .ph-audit-fixed {
    display: flex; align-items: center; gap: 8px; height: 52px; box-sizing: border-box; padding: 4px 0;
  }
  body.phone.phone-landscape #phoneRoot .ph-audit-fixed .ph-search { flex: 1 1 140px; min-width: 80px; }
  body.phone.phone-landscape #phoneRoot .ph-audit-segs { flex: 0 0 auto; grid-template-columns: 52px repeat(4, 44px); }
  body.phone.phone-landscape #phoneRoot .ph-audit-tools { flex: 0 1 auto; display: flex; gap: 6px; min-width: 0; }
  body.phone.phone-landscape #phoneRoot .ph-audit-tool { flex: 0 1 auto; min-width: 44px; }
  body.phone.phone-landscape #phoneRoot .ph-audit-fixed .ph-audit-count { display: none; }
  /* The toolbar keeps the full width with a side panel open; the panel opens under it,
     beside the list (as in the landscape mockup). */
  body.phone.phone-landscape.phone-overlay #phoneRoot .ph-main:has(> .ph-screen[data-view="audit"]) { padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; }
  body.phone.phone-landscape.phone-overlay #phoneRoot .ph-screen[data-view="audit"] .ph-audit-list { margin-right: calc(var(--ph-side) + env(safe-area-inset-right, 0px) - max(16px, env(safe-area-inset-right, 0px))); }
  body.phone.phone-landscape #phoneRoot:has(.ph-screen[data-view="audit"]) .ph-panel { top: 100px; }
  body.phone #phoneRoot .ph-tool-narrow-icon { display: none; }
  /* A short landscape phone: All time / All people / Export CSV become icons (their words stay
     for screen readers). */
  @media (max-width: 759.98px) {
    body.phone.phone-landscape #phoneRoot .ph-audit-tool .ph-tool-label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    body.phone.phone-landscape #phoneRoot .ph-audit-tool { position: relative; padding: 0 8px; }
    body.phone.phone-landscape #phoneRoot .ph-audit-tool > svg:last-child:not(:first-child) { display: none; }
    body.phone.phone-landscape #phoneRoot .ph-tool-narrow-icon { display: block; width: 18px !important; height: 18px !important; }
  }

  body.phone #phoneRoot .ph-btn:focus-visible,
  body.phone #phoneRoot .ph-back:focus-visible { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: 2px; }

  /* ---- All Tasks: week bar, tabs, compact list ---- */
  body.phone #phoneRoot .ph-screen[data-view="tasks"] { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

  body.phone #phoneRoot .ph-week {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px 2px;
  }
  body.phone #phoneRoot .ph-week-nav {
    flex: 1 1 220px; min-width: 0; display: flex; align-items: center;
    background: #fff; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 10px;
  }
  body.phone #phoneRoot .ph-week-step {
    flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ops-accent-ink, #1268c4);
    border: 0; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-week-step:disabled,
  body.phone #phoneRoot .ph-week-today:disabled { opacity: .4; cursor: default; }
  body.phone #phoneRoot .ph-week-mid {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center;
    text-align: center; line-height: 1.2;
  }
  body.phone #phoneRoot .ph-week-range { font-size: 15px; font-weight: 600; }
  body.phone #phoneRoot .ph-week-note { font-size: 12px; color: #5b6c7b; }
  body.phone #phoneRoot .ph-week-today {
    flex: 0 0 auto; min-width: 44px; height: 46px; min-height: 44px; margin: 0; padding: 0 14px;
    background: #fff; color: var(--ops-accent-ink, #1268c4);
    border: 1px solid var(--ops-line, #dfe5ea); border-radius: 10px;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }

  body.phone #phoneRoot .ph-tabs {
    display: flex; gap: 6px; padding: 8px 12px 4px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.phone #phoneRoot .ph-tabs::-webkit-scrollbar { display: none; }
  body.phone #phoneRoot .ph-tab {
    flex: 0 0 auto; min-height: 44px; margin: 0; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: #3d4d5c;
    border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
    font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-tab b { font-weight: 600; margin: 0; }
  body.phone #phoneRoot .ph-tab[aria-selected="true"] {
    background: #eaf3ff; color: var(--ops-accent-ink, #1268c4); border-color: #b9d6f7; font-weight: 600;
  }

  body.phone #phoneRoot .ph-list { margin-top: 8px; background: #fff; border-top: 1px solid var(--ops-line, #dfe5ea); }
  body.phone #phoneRoot .ph-row {
    box-sizing: border-box; width: 100%; min-height: 64px; margin: 0;
    padding: 10px 8px 10px 14px;
    display: flex; align-items: center; gap: 8px;
    background: #fff; color: var(--ink, #0f1c28); text-align: left;
    border: 0; border-bottom: 1px solid #f0f3f6; border-radius: 0;
    font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-row[aria-current="true"] { background: #eaf3ff; }
  body.phone #phoneRoot .ph-row > svg { flex: 0 0 24px; color: #8494a3; }
  body.phone #phoneRoot .ph-row-main { flex: 1 1 auto; min-width: 0; display: block; }
  body.phone #phoneRoot .ph-row-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 15px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere;
  }
  body.phone #phoneRoot .ph-row-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px;
    font-size: 13px; line-height: 20px; color: #5b6c7b;
  }
  body.phone #phoneRoot .ph-row[aria-current="true"] .ph-pill { box-shadow: inset 0 0 0 1px rgba(18, 104, 196, .3); }
  body.phone #phoneRoot .ph-late { color: #b42318; font-weight: 600; }
  body.phone #phoneRoot .ph-pill {
    display: inline-block; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap;
  }
  body.phone #phoneRoot .ph-pill-progress { background: #eaf3ff; color: #1268c4; }
  body.phone #phoneRoot .ph-pill-blocked { background: #fff0dc; color: #8f5206; }
  body.phone #phoneRoot .ph-pill-new { background: #edf1f4; color: #4d5e6d; }
  body.phone #phoneRoot .ph-pill-review { background: #f0ecff; color: #5b3fb0; }
  body.phone #phoneRoot .ph-pill-done { background: #e7f7f1; color: #0d5e4c; }
  body.phone #phoneRoot .ph-more {
    box-sizing: border-box; display: block; width: calc(100% - 24px); min-height: 48px; margin: 12px;
    background: #fff; color: var(--ops-accent-ink, #1268c4);
    border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  body.phone #phoneRoot .ph-empty { padding: 36px 16px; text-align: center; }
  body.phone #phoneRoot .ph-empty-title { margin-bottom: 14px; font-size: 16px; font-weight: 600; color: #3d4d5c; }
  body.phone #phoneRoot .ph-empty .ph-btn { flex: none; min-width: 160px; }

  /* the top bar's New task: a plus, 44px, like the menu button */
  body.phone #phoneRoot .ph-actions .ph-add svg { display: block; }

  /* the task panel: the number and title, then every field */
  body.phone #phoneRoot .ph-tp-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-tp-note { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #5b6c7b; }
  body.phone #phoneRoot .ph-tp-note.ph-late { color: #b42318; }
  body.phone #phoneRoot .ph-row-var { color: #5b6c7b; }
  body.phone #phoneRoot .ph-row-sep { color: #8494a3; }
  /* Delete, at the foot of the Edit task form, asked in the page first */
  body.phone #phoneRoot .ph-delete { margin-top: 20px; padding-top: 14px; border-top: 1px solid #f0f3f6; }
  body.phone #phoneRoot .ph-delete-btn { width: 100%; color: #b42318; border-color: #f3c7c0; }
  body.phone #phoneRoot .ph-delete-ask { padding: 12px; border: 1px solid #f3c7c0; border-radius: 10px; background: #fdf3f1; }
  body.phone #phoneRoot .ph-delete-text { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #3d4d5c; }
  body.phone #phoneRoot .ph-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
  body.phone #phoneRoot .ph-facts > div { min-width: 0; }
  body.phone #phoneRoot .ph-facts dt { margin: 0; font-size: 12px; line-height: 1.3; color: #5b6c7b; }
  body.phone #phoneRoot .ph-facts dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
  /* four actions in a row, also in the 340px side panel */
  body.phone #phoneRoot .ph-panel-actions .ph-btn { padding: 0 6px; min-width: 0; }

  /* Submit / Block / Continue: the note, the files */
  body.phone #phoneRoot .ph-label { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #3d4d5c; }
  body.phone #phoneRoot .ph-note .ph-label:first-child { margin-top: 0; }
  body.phone #phoneRoot .ph-required { font-style: normal; font-weight: 600; color: #b42318; }
  body.phone #phoneRoot .ph-drop {
    position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 56px; padding: 8px 12px; text-align: center;
    background: #f7f9fb; border: 1.5px dashed #bccbd7; border-radius: 9px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #3d4d5c;
  }
  body.phone #phoneRoot .ph-drop-sub { font-size: 12px; font-weight: 400; color: #5b6c7b; }
  /* the real input lies over the whole zone: one big target, the camera/file sheet on tap */
  body.phone #phoneRoot .ph-file-input {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 16px;
  }
  body.phone #phoneRoot .ph-files { margin-top: 8px; }
  body.phone #phoneRoot .ph-file { padding: 2px 0 6px; border-bottom: 1px solid #f0f3f6; }
  body.phone #phoneRoot .ph-file-line { display: flex; align-items: center; gap: 8px; min-height: 44px; }
  body.phone #phoneRoot .ph-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
  body.phone #phoneRoot .ph-file-size { flex: 0 0 auto; font-size: 12px; color: #5b6c7b; }
  body.phone #phoneRoot .ph-file-remove {
    flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #3d4d5c; border: 0; border-radius: 8px; cursor: pointer;
  }
  body.phone #phoneRoot .ph-file-error { font-size: 13px; line-height: 1.35; color: #b42318; }

  /* New / Edit task */
  body.phone #phoneRoot .ph-tf .ph-field { margin: 0 0 4px; }
  body.phone #phoneRoot .ph-tf > .ph-field:first-child .ph-label { margin-top: 0; }
  body.phone #phoneRoot .ph-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  body.phone #phoneRoot .ph-two .ph-field { min-width: 0; }
  body.phone #phoneRoot .ph-field-error { margin-top: 4px; font-size: 13px; line-height: 1.35; font-weight: 500; color: #b42318; }
  body.phone #phoneRoot .ph-slider-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; }
  body.phone #phoneRoot .ph-step {
    box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #3d4d5c; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 8px;
    font: inherit; font-size: 20px; font-weight: 500; cursor: pointer;
  }
  body.phone #phoneRoot .ph-step:disabled { opacity: .45; cursor: default; }
  body.phone #phoneRoot .ph-ov-body input.ph-slider {
    box-sizing: border-box; display: block; width: 100%; min-height: 44px; margin: 0; padding: 0;
    font: inherit; font-size: 16px; background: transparent; border: 0; accent-color: var(--blue, #1677e8);
  }
  body.phone #phoneRoot .ph-lock { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: #8f5206; }
  body.phone #phoneRoot .ph-choices { display: grid; gap: 5px; }
  /* One row of buttons while each can be at least 44px wide; on the narrowest phone
     (iPhone SE upright) the six Level buttons go three by two instead. */
  body.phone #phoneRoot .ph-choices-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.phone #phoneRoot .ph-choices-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  @media (max-width: 359.98px) {
    body.phone #phoneRoot .ph-choices-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  body.phone #phoneRoot .ph-choice {
    box-sizing: border-box; min-width: 0; min-height: 44px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #2b3d4d; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 8px;
    font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  }
  body.phone #phoneRoot .ph-choice[aria-pressed="true"] {
    background: #eaf3ff; color: var(--ops-accent-ink, #1268c4); border-color: #aecdf1; font-weight: 600;
  }
  body.phone #phoneRoot .ph-snapshot {
    margin: 14px 0 4px; background: #f7f9fb; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
  }
  body.phone #phoneRoot .ph-snapshot summary {
    box-sizing: border-box; min-height: 44px; padding: 0 12px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; font-weight: 600; color: #3d4d5c; cursor: pointer; list-style: none;
  }
  body.phone #phoneRoot .ph-snapshot summary::-webkit-details-marker { display: none; }
  body.phone #phoneRoot .ph-snapshot summary::after { content: "\25BE"; color: #5b6c7b; }
  body.phone #phoneRoot .ph-snapshot[open] summary::after { content: "\25B4"; }
  body.phone #phoneRoot .ph-snap-list { padding: 0 12px 10px; }
  body.phone #phoneRoot .ph-snap-week { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 14px; border-top: 1px solid #e9eef2; }
  body.phone #phoneRoot .ph-snap-now { font-weight: 600; }
  body.phone #phoneRoot .ph-snap-what { color: #3d4d5c; text-align: right; }
  body.phone #phoneRoot .ph-snap-none { margin: 0; font-size: 14px; color: #5b6c7b; }
  body.phone #phoneRoot .ph-form-btns-one { grid-template-columns: 1fr; }

  /* task history: the number and title above the shared timeline */
  body.phone #phoneRoot .ph-hist-num { font: 500 13px var(--ops-mono, Consolas, monospace); color: var(--ops-accent-ink, #1268c4); }
  body.phone #phoneRoot .ph-hist-title { margin: 2px 0 12px; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-hist-none { margin: 0; font-size: 14px; color: #5b6c7b; }
  /* ---- the history timeline: one look for Review and Task history ---- */
  body.phone #phoneRoot .ph-timeline { margin: 0; }
  body.phone #phoneRoot .ph-tl-status {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px;
    font-size: 14px; line-height: 1.35; color: #5b6c7b;
  }
  body.phone #phoneRoot .ph-tl-retry {
    box-sizing: border-box; min-width: 44px; min-height: 44px; margin: 0; padding: 0 14px;
    background: #fff; color: var(--ops-accent-ink, #1268c4);
    border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-tl-retry:focus-visible { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: 2px; }
  body.phone #phoneRoot .ph-ev {
    position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px;
    padding-bottom: 14px;
  }
  body.phone #phoneRoot .ph-ev::before {
    content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--ops-line, #dfe5ea);
  }
  body.phone #phoneRoot .ph-ev:last-child { padding-bottom: 0; }
  body.phone #phoneRoot .ph-ev:last-child::before { display: none; }
  body.phone #phoneRoot .ph-dot {
    box-sizing: border-box; position: relative; z-index: 1; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #5b6c7b; border: 1.5px solid var(--ops-line, #dfe5ea); border-radius: 50%;
  }
  body.phone #phoneRoot .ph-dot svg {
    display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  body.phone #phoneRoot .ph-dot-progress, body.phone #phoneRoot .ph-dot-completion { background: #eaf3ff; color: #1268c4; border-color: #b9d6f7; }
  body.phone #phoneRoot .ph-dot-completed { background: #f0ecff; color: #5b3fb0; border-color: #d6ccf5; }
  body.phone #phoneRoot .ph-dot-status { background: #fff0dc; color: #8f5206; border-color: #f0d3a6; }
  body.phone #phoneRoot .ph-dot-deleted { background: #fdeceb; color: #b42318; border-color: #f0c4c0; }
  body.phone #phoneRoot .ph-ev-main { min-width: 0; }
  body.phone #phoneRoot .ph-what { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-what-f { font-weight: 600; }
  body.phone #phoneRoot .ph-what-v { font-weight: 400; color: #3d4d5c; }
  body.phone #phoneRoot .ph-when { margin-top: 2px; font-size: 13px; line-height: 1.35; color: #5b6c7b; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-evnote {
    margin-top: 6px; padding: 6px 10px; font-size: 14px; line-height: 1.4; color: #3d4d5c;
    background: #f7f9fb; border-left: 2px solid var(--ops-line, #dfe5ea); border-radius: 0 6px 6px 0;
    overflow-wrap: anywhere; white-space: pre-wrap;
  }
  body.phone #phoneRoot .ph-ev-files { display: grid; gap: 6px; margin-top: 8px; }
  body.phone #phoneRoot .ph-att {
    box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 0 12px;
    background: #fff; color: var(--ops-accent-ink, #1268c4); text-decoration: none;
    border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
    font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  }
  body.phone #phoneRoot .ph-att:focus-visible { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: 2px; }

  /* ---- Review: search, and the Completion review ---- */
  body.phone #phoneRoot .ph-screen[data-view="review"] { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  body.phone #phoneRoot .ph-search { padding: 4px 12px 0; }
  body.phone #phoneRoot .ph-search input {
    box-sizing: border-box; display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 12px;
    font: inherit; font-size: 16px; line-height: 1.3; color: var(--ink, #0f1c28);
    background: #fff; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
    -webkit-appearance: none; appearance: none;
  }
  body.phone #phoneRoot .ph-search input:focus-visible { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: 1px; }
  body.phone #phoneRoot .ph-cr { padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.phone #phoneRoot .ph-cr-question { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: #3d4d5c; }
  body.phone #phoneRoot .ph-cr-label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #3d4d5c; }
  body.phone #phoneRoot .ph-cr-hint { font-weight: 400; color: #5b6c7b; }
  body.phone #phoneRoot .ph-cr-box {
    padding: 10px 12px; font-size: 14px; line-height: 1.45; color: #3d4d5c; white-space: pre-wrap; overflow-wrap: anywhere;
    background: #f7f9fb; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
  }
  body.phone #phoneRoot .ph-cr-none { font-size: 14px; color: #5b6c7b; }
  body.phone #phoneRoot .ph-cr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  body.phone #phoneRoot .ph-cr-btns .ph-btn { min-height: 48px; }
  body.phone #phoneRoot .ph-btn-return { background: #fff; color: #b42318; border-color: #e2b4b4; }
  body.phone #phoneRoot .ph-btn-approve { background: #116b57; color: #fff; }
  body.phone #phoneRoot .ph-cr .ph-error { margin: 10px 0 0; }
  body.phone #phoneRoot .ph-tl-sec { margin-top: 20px; padding-top: 14px; border-top: 1px solid #f0f3f6; }
  body.phone #phoneRoot .ph-tl-head { margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #3d4d5c; }
  body.phone #phoneRoot .ph-btn-return:focus-visible, body.phone #phoneRoot .ph-btn-approve:focus-visible { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: 2px; }

  body.phone #phoneRoot .ph-row:focus-visible,
  body.phone #phoneRoot .ph-tab:focus-visible,
  body.phone #phoneRoot .ph-week-step:focus-visible,
  body.phone #phoneRoot .ph-week-today:focus-visible,
  body.phone #phoneRoot .ph-more:focus-visible,
  body.phone #phoneRoot .ph-choice:focus-visible,
  body.phone #phoneRoot .ph-step:focus-visible,
  body.phone #phoneRoot .ph-file-remove:focus-visible,
  body.phone #phoneRoot .ph-snapshot summary:focus-visible { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: -2px; }
  body.phone #phoneRoot .ph-drop:focus-within { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: 2px; }

  /* ---- Audit History: a fixed top, one list that scrolls ---------------------
     The screen is exactly as tall as the room under the top bar (#phoneRoot is fixed to
     the viewport, so this holds as the browser bars come and go); the top is one flex
     item that does not shrink, the list the other, and the only one that scrolls. */
  body.phone #phoneRoot .ph-screen[data-view="audit"] {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  }
  body.phone #phoneRoot .ph-audit-fixed {
    flex: 0 0 auto; display: grid; gap: 8px; padding: 8px 12px 0;
    background: var(--bg, #f4f6f8);
  }
  body.phone #phoneRoot .ph-audit-fixed .ph-search { padding: 0; }
  body.phone #phoneRoot .ph-audit-segs {
    display: grid; grid-template-columns: 1.3fr repeat(4, 1fr);
    background: #fff; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px; overflow: hidden;
  }
  body.phone #phoneRoot .ph-audit-seg {
    box-sizing: border-box; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #2b3d4d; border: 0; border-right: 1px solid var(--ops-line, #dfe5ea); border-radius: 0;
    font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-audit-seg:last-child { border-right: 0; }
  body.phone #phoneRoot .ph-audit-seg[aria-pressed="true"] {
    background: #eaf3ff; color: var(--ops-accent-ink, #1268c4); font-weight: 600; box-shadow: inset 0 0 0 1px #aecdf1;
  }
  body.phone #phoneRoot .ph-audit-seg[data-type="completion"] { color: #116b57; }
  body.phone #phoneRoot .ph-seg-icon { display: inline-flex; width: 22px; height: 22px; }
  body.phone #phoneRoot .ph-seg-icon svg,
  body.phone #phoneRoot .ph-tool-icon svg {
    width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }
  body.phone #phoneRoot .ph-audit-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
  body.phone #phoneRoot .ph-audit-tool {
    box-sizing: border-box; min-width: 44px; min-height: 44px; margin: 0; padding: 0 10px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #fff; color: #2b3d4d; border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
    font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-audit-tool svg { flex: 0 0 auto; width: 16px; height: 16px; }
  body.phone #phoneRoot .ph-audit-tool .ph-tool-icon { width: 18px; height: 18px; flex: 0 0 18px; }
  body.phone #phoneRoot .ph-tool-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.phone #phoneRoot .ph-audit-count { padding: 0 2px 6px; font-size: 12px; line-height: 1.3; color: #5b6c7b; text-align: right; }
  /* The narrowest phones upright (320px): Export CSV becomes its icon (its words stay for
     screen readers), so All time and All people keep their words whole. */
  @media (max-width: 359.98px) {
    body.phone #phoneRoot .ph-audit-tool[data-export] { position: relative; padding: 0 12px; }
    body.phone #phoneRoot .ph-audit-tool[data-export] .ph-tool-label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
  }

  body.phone #phoneRoot .ph-audit-list {
    flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: #fff; border-top: 1px solid var(--ops-line, #dfe5ea);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.phone #phoneRoot .ph-audit-entry {
    box-sizing: border-box; width: 100%; min-height: 64px; margin: 0; padding: 10px 6px 10px 12px;
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; gap: 0 10px;
    background: #fff; color: var(--ink, #0f1c28); text-align: left;
    border: 0; border-bottom: 1px solid #f0f3f6; border-radius: 0;
    font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* .ph-who is also the menu's signed-in block; inside an entry it is the initials and the time */
  body.phone #phoneRoot .ph-audit-entry .ph-who {
    display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 0; padding: 0; min-width: 0;
  }
  body.phone #phoneRoot .ph-audit-entry .ph-chip {
    box-sizing: border-box; max-width: 100%; min-width: 40px; height: 28px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eaf3ff; color: var(--ops-accent-ink, #1268c4); border-radius: 7px;
    font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  }
  body.phone #phoneRoot .ph-audit-entry .ph-chip-system { background: #edf1f4; color: #4d5e6d; font-weight: 600; }
  body.phone #phoneRoot .ph-audit-entry .ph-time {
    font: 12px/1.25 var(--ops-mono, Consolas, monospace); color: #5b6c7b; text-align: center; overflow-wrap: anywhere;
  }
  body.phone #phoneRoot .ph-audit-entry .ph-ln { display: grid; gap: 3px; min-width: 0; }
  /* number and name: one run of text, so one size and one baseline; two lines at most, then an ellipsis */
  body.phone #phoneRoot .ph-audit-entry .ph-l1 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere;
  }
  body.phone #phoneRoot .ph-audit-entry .ph-sn { font-family: var(--ops-mono, Consolas, monospace); font-weight: 500; color: var(--ops-accent-ink, #1268c4); }
  body.phone #phoneRoot .ph-audit-entry .ph-l2 { font-size: 13px; line-height: 18px; color: #3d4d5c; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-audit-entry .ph-f { font-weight: 600; }
  body.phone #phoneRoot .ph-audit-entry .ph-from { color: #5b6c7b; }
  body.phone #phoneRoot .ph-audit-entry .ph-to { font-weight: 600; }
  body.phone #phoneRoot .ph-audit-entry .ph-extra { color: #5b6c7b; white-space: nowrap; }
  body.phone #phoneRoot .ph-audit-entry .ph-l3 { font-size: 12px; line-height: 18px; color: #5b6c7b; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-audit-entry .ph-l3 em {
    font-style: normal; color: #3d4d5c; background: #edf1f4; border-radius: 4px; padding: 0 6px;
  }
  body.phone #phoneRoot .ph-audit-entry .ph-trail { display: flex; align-items: center; align-self: center; gap: 2px; color: #8494a3; }
  body.phone #phoneRoot .ph-audit-entry .ph-trail > svg { flex: 0 0 24px; }
  body.phone #phoneRoot .ph-note-icon { display: inline-flex; width: 20px; height: 20px; color: #5b6c7b; }
  body.phone #phoneRoot .ph-note-icon svg {
    width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  body.phone #phoneRoot .ph-audit-entry:focus-visible,
  body.phone #phoneRoot .ph-audit-seg:focus-visible,
  body.phone #phoneRoot .ph-audit-tool:focus-visible,
  body.phone #phoneRoot .ph-person:focus-visible { outline: 2px solid var(--ops-accent-ink, #1268c4); outline-offset: -2px; }
  body.phone #phoneRoot .ph-audit-foot:empty { display: none; }

  /* the details panel */
  body.phone #phoneRoot .ph-audit-detail .ph-id-line { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
  body.phone #phoneRoot .ph-audit-detail .ph-id-sn { flex: 0 0 auto; font: 500 15px/1.35 var(--ops-mono, Consolas, monospace); color: var(--ops-accent-ink, #1268c4); }
  body.phone #phoneRoot .ph-audit-detail .ph-id-name { min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-audit-detail .ph-when { margin: 0; font-size: 13px; line-height: 1.4; color: #3d4d5c; }
  body.phone #phoneRoot .ph-audit-detail .ph-weekvia { margin: 2px 0 14px; font-size: 13px; line-height: 1.4; color: #5b6c7b; }
  body.phone #phoneRoot .ph-audit-detail .ph-weekvia b { font-weight: 600; color: var(--ink, #0f1c28); }
  body.phone #phoneRoot .ph-audit-detail .ph-via { font-style: normal; font-weight: 600; color: #3d4d5c; background: #edf1f4; border-radius: 4px; padding: 0 6px; }
  body.phone #phoneRoot .ph-audit-table { width: 100% !important; min-width: 0 !important; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.35; }
  body.phone #phoneRoot .ph-audit-table td, body.phone #phoneRoot .ph-audit-table th { font-family: inherit; }
  body.phone #phoneRoot .ph-audit-table td { font-size: 14px !important; line-height: 1.35 !important; }
  body.phone #phoneRoot .ph-audit-table th {
    padding: 0 8px 6px 0 !important; text-align: left; font-size: 12px !important; font-weight: 600; color: #5b6c7b;
    text-transform: none !important; letter-spacing: 0 !important; background: transparent !important;
    border: 0 !important; border-bottom: 1px solid var(--ops-line, #dfe5ea) !important;
  }
  body.phone #phoneRoot .ph-audit-table td { padding: 8px 8px 8px 0; vertical-align: top; border-bottom: 1px solid #f0f3f6; overflow-wrap: anywhere; }
  body.phone #phoneRoot .ph-audit-table th:first-child, body.phone #phoneRoot .ph-audit-table td:first-child { width: 38%; }
  body.phone #phoneRoot .ph-audit-table .ph-ct-field { font-weight: 600; }
  body.phone #phoneRoot .ph-audit-table .ph-ct-from { color: #5b6c7b; }
  body.phone #phoneRoot .ph-audit-table .ph-ct-to { font-weight: 600; }
  body.phone #phoneRoot .ph-audit-table .ph-ct-none { font-weight: 400; font-style: italic; color: #8494a3; }
  body.phone #phoneRoot .ph-audit-table .ph-auto-tag { font-size: 12px; font-weight: 600; color: #5b6c7b; background: #edf1f4; border-radius: 4px; padding: 0 5px; }
  body.phone #phoneRoot .ph-audit-note { margin-top: 14px; }
  body.phone #phoneRoot .ph-audit-note-head { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #3d4d5c; }
  body.phone #phoneRoot .ph-audit-note-text {
    margin: 6px 0 0; padding: 8px 12px; font-size: 14px; line-height: 1.45; color: #3d4d5c; white-space: pre-wrap; overflow-wrap: anywhere;
    background: #f7f9fb; border-left: 2px solid var(--ops-line, #dfe5ea); border-radius: 0 6px 6px 0;
  }

  /* the people panel */
  body.phone #phoneRoot .ph-audit-people { display: grid; gap: 6px; }
  body.phone #phoneRoot .ph-person {
    box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 0 14px;
    display: flex; align-items: center; background: #fff; color: #2b3d4d; text-align: left;
    border: 1px solid var(--ops-line, #dfe5ea); border-radius: 9px;
    font: inherit; font-size: 15px; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.phone #phoneRoot .ph-person[aria-pressed="true"] {
    background: #eaf3ff; color: var(--ops-accent-ink, #1268c4); border-color: #aecdf1; font-weight: 600;
  }

  /* the calendar panel: the desktop's own node, made large enough to touch */
  body.phone #phoneRoot .ph-audit-cal #auditRangeMenu {
    display: block !important; position: static !important; width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
  }
  body.phone #phoneRoot .ph-audit-cal #auditRangeMenu button {
    box-sizing: border-box; min-width: 44px; min-height: 44px !important; height: 44px !important; margin: 0; padding: 0 4px;
    font: inherit; font-size: 15px !important; line-height: 1.2;
  }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-head { height: auto !important; grid-template-columns: 48px 1fr 48px !important; gap: 4px; margin-bottom: 6px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-head .audit-calendar-title { font-size: 16px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-weekdays { gap: 2px !important; margin-bottom: 2px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-weekdays span { height: 24px !important; font-size: 12px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-grid { gap: 2px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-selection {
    min-height: 0 !important; margin-top: 10px !important; padding: 8px !important; gap: 6px;
    grid-template-columns: 1fr 20px 1fr !important; text-align: center;
  }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-selection small { font-size: 12px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-selection input {
    box-sizing: border-box; display: block; width: 100%; height: 44px !important; min-height: 44px !important; padding: 0 10px !important;
    font: inherit; font-size: 16px !important; color: var(--ink, #0f1c28); background: #fff;
    border: 1px solid var(--ops-line, #dfe5ea) !important; border-radius: 9px !important;
  }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-actions { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; margin-top: 10px !important; padding-top: 10px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-actions button { font-size: 13px !important; border: 1px solid var(--ops-line, #dfe5ea) !important; border-radius: 9px !important; background: #fff; color: #3d4d5c; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-actions button.apply { height: 48px !important; min-height: 48px !important; font-size: 15px !important; background: var(--blue, #1677e8); color: #fff; border-color: transparent !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-picker-head { grid-template-columns: 48px 1fr 48px !important; height: auto !important; gap: 4px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-picker-head input { box-sizing: border-box; height: 44px !important; min-height: 44px !important; font-size: 16px !important; text-align: center; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-months { gap: 6px !important; }
  body.phone #phoneRoot .ph-audit-cal .audit-calendar-back { width: 100%; margin-top: 10px !important; }

  /* ---- the sign-in screen on a phone (spec 8: "the existing sign-in screen, styled for
     phones"). Signed out, the phone layer is not drawn, so these hang off #authRoot. ---- */
  #authRoot .login-card label { font-size: 12px !important; }
  #authRoot .login-card input { font-size: 16px !important; min-height: 44px; }
  #authRoot #togglePassword { min-width: 44px; min-height: 44px; font-size: 13px !important; }
  #authRoot .login-error:not(:empty) { margin-top: 10px; }

  /* ---- notices under the top bar (spec 8): offline; a load that failed, with Retry ---- */
  body.phone #phoneRoot .ph-notices { flex: 0 0 auto; }
  body.phone #phoneRoot .ph-notices:empty { display: none; }
  body.phone #phoneRoot .ph-offline {
    padding: 8px max(16px, env(safe-area-inset-left, 0px)); font-size: 13px; line-height: 1.35; font-weight: 500;
    color: #fff; background: #3d4d5c;
  }
  body.phone #phoneRoot .ph-load-error {
    display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px max(16px, env(safe-area-inset-left, 0px));
    font-size: 13px; line-height: 1.35; color: #8f2a1b; background: #fdecea; border-bottom: 1px solid #f3c7c0;
  }
  body.phone #phoneRoot .ph-notice-text { flex: 1 1 auto; min-width: 0; }
  body.phone #phoneRoot .ph-notice-btn {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: 0; padding: 0 14px;
    background: #fff; color: #8f2a1b; border: 1px solid #f3c7c0; border-radius: 9px;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  body.phone #phoneRoot button:disabled[data-offline] { opacity: .5; cursor: not-allowed; }

  /* ---- Dashboard ----
     The desktop's own #dashboardView sits in the phone screen (mobile.js renderDashboard).
     Only the four approved changes are made here: greeting one size smaller, the week
     selector on its own row, Weekly score full width, Delivery health inside its card
     (drawn at the card's width by the desktop's own chart code, mobile.js chartSize).
     Needs attention keeps its header and rows; titles wrap. Everything else is the
     desktop's, in its order and colours. */
  body.phone #phoneRoot .ph-screen[data-view="dashboard"] { padding: 16px 16px 24px; }
  body.phone #phoneRoot .ph-greet {
    margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    color: var(--ink, #0f1c28); overflow-wrap: anywhere;
  }
  body.phone #phoneRoot .ph-screen[data-view="dashboard"] > .ph-week { margin: 0 0 12px; padding: 0; }
  body.phone #phoneRoot #dashboardView { display: block !important; margin: 0; padding: 0; min-width: 0; }
  body.phone #phoneRoot #dashboardView .dashboard-kpis { margin: 0 0 12px !important; }
  body.phone #phoneRoot #dashboardView .kpi-new { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.phone #phoneRoot #dashboardView .kpi-new .kpi-score { grid-column: 1 / -1 !important; }
  body.phone #phoneRoot #dashboardView .kpi-tile { min-width: 0; }
  body.phone #phoneRoot #dashboardView .dashboard-primary-grid,
  body.phone #phoneRoot #dashboardView .dashboard-secondary-grid {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin: 0 0 12px !important;
  }
  body.phone #phoneRoot #dashboardView .dashboard-card { min-width: 0; }
  body.phone #phoneRoot #dashboardView .delivery-chart { overflow: visible !important; }
  body.phone #phoneRoot #dashboardView .delivery-chart svg { min-width: 0 !important; width: 100% !important; height: auto !important; overflow: hidden !important; }
  body.phone #phoneRoot #dashboardView .delivery-chart text { font-size: 12px !important; }
  /* The desktop gives card headers a fixed height; on a phone a header grows to hold what wraps
     (the chart key under its title, View all at 44px). */
  body.phone #phoneRoot #dashboardView .dashboard-card > header { height: auto !important; min-height: 0 !important; }
  body.phone #phoneRoot #dashboardView .delivery-card > header { flex-wrap: wrap; gap: 6px 14px; padding-bottom: 12px !important; }
  /* Phone minimum: no visible text under 12px (sizes only; words, order and colours as on the desktop). */
  body.phone #phoneRoot #dashboardView .kpi-label,
  body.phone #phoneRoot #dashboardView .chart-key span,
  body.phone #phoneRoot #dashboardView .overdue-summary,
  body.phone #phoneRoot #dashboardView .dashboard-link,
  body.phone #phoneRoot #dashboardView .quality-stats span { font-size: 12px !important; }
  /* View all: a 44px target, its words and colour unchanged; the header grows a little to hold it. */
  body.phone #phoneRoot #dashboardView .dashboard-link {
    display: inline-flex !important; align-items: center; justify-content: flex-end;
    min-height: 44px; min-width: 44px; margin: 0 !important; padding: 0 !important;
  }
  body.phone #phoneRoot #dashboardView .att-text,
  body.phone #phoneRoot #dashboardView .att-text b,
  body.phone #phoneRoot #dashboardView .att-text strong {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere;
  }

  /* ---- Users ----
     The User block is the desktop's own markup (.user-identity, .user-avatar), styled by
     the desktop's rules; only what the desktop's table cell gives it is set here: the
     cell's typeface and ink (the computed values of the desktop's User column). */
  body.phone #phoneRoot .ph-user-block { flex: 1 1 auto; min-width: 0; display: block; font-family: Inter, "Segoe UI", sans-serif; color: #263d50; }
  body.phone #phoneRoot .ph-user-block .user-identity { min-width: 0; }
  body.phone #phoneRoot .ph-user-block .user-identity > span { min-width: 0; }
  body.phone #phoneRoot .ph-user-block .user-identity strong,
  body.phone #phoneRoot .ph-user-block .user-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.phone #phoneRoot .ph-user-block .user-avatar { flex: 0 0 auto; }
  body.phone #phoneRoot .ph-user-role { flex: 0 0 auto; font-size: 12px !important; font-weight: 600; line-height: 1.3; white-space: nowrap; }
  body.phone #phoneRoot .ph-up .ph-user-block { margin: 0 0 14px; }
  /* As the approved panel: the User block heads it. The name stays the panel's
     accessible heading, out of sight, rather than said twice. */
  body.phone #phoneRoot .ph-panel:has(.ph-up) .ph-panel-title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body.phone #phoneRoot .ph-handle {
    display: inline-block; padding: 3px 8px; border-radius: 6px;
    font-family: var(--ops-mono, "JetBrains Mono", Consolas, monospace); font-size: 14px; font-weight: 500;
    color: var(--ops-accent-ink, #1268c4); background: var(--ops-accent-wash, #eaf3ff);
  }
  body.phone #phoneRoot .ph-uf select { padding-right: 28px; }


  /* ---- motion: only for people who have not asked for less ---- */
  @media (prefers-reduced-motion: no-preference) {
    body.phone #phoneRoot .ph-overlay:not(.open) .ph-ov-scrim { opacity: 0; }
    body.phone #phoneRoot .ph-ov-scrim { transition: opacity .2s ease; }
    body.phone #phoneRoot .ph-overlay:not(.open) .ph-panel { transform: translateY(100%); }
    body.phone #phoneRoot .ph-panel { transition: transform .22s ease; }
    body.phone-landscape #phoneRoot .ph-overlay:not(.open) .ph-panel { transform: translateX(100%); }
    body.phone #phoneRoot .ph-overlay:not(.open) .ph-form { opacity: 0; }
    body.phone #phoneRoot .ph-form { transition: opacity .15s ease; }
    body.phone #phoneRoot .ph-drawer { transition: transform .2s ease, visibility 0s linear .2s; }
    body.phone #phoneRoot .ph-drawer.open { transition: transform .2s ease, visibility 0s; }
    body.phone #phoneRoot .ph-scrim { transition: opacity .2s ease, visibility 0s linear .2s; }
    body.phone #phoneRoot .ph-scrim.open { transition: opacity .2s ease, visibility 0s; }
  }
}