/* ══════════════════════════════════════════════════════════════
   PHONE LAYER (Kate, 25 Sep 2026)
   Loaded last, so it wins ties with index.html's own rules. Three bands only:
     ≤ 900px  tablet      (the existing overlay-nav band; nothing new here yet)
     ≤ 760px  phones      everything below, and phones on their side
              (any touch screen 480px tall or less, whatever its width)
     ≤ 480px  small phones
   Every rule here sits inside a max-width query or targets an element that is
   display:none from 761px up, so the desktop page is untouched. mobile.js does
   the moving: on phones it lifts the section label, the meta rule and the
   filters OUT of the fixed header (same nodes, same ids) and back again above
   760px.
   ══════════════════════════════════════════════════════════════ */

/* Phone-only pieces exist in the markup at every width; they only show below. */
.mast-body,.fsheet,.fsheet-scrim,#fSheetBtn,.nav-phone,.m-avg,.svc-m,.cmp-fold,.slv-m,.slv-cur-note{display:none}

/* ===== MOBILE (≤ 760px) · 1. COMPACT HEADER ===== */
@media(max-width:760px),(hover:none) and (max-height:480px){
  /* One row: wordmark, filters summary, sections. 56px + the notch. */
  .topbar{padding-top:env(safe-area-inset-top);
    transition:transform 220ms var(--card-ease),box-shadow 220ms var(--card-ease)}
  .topbar-in{padding:0 16px}
  .topbar.stuck{padding-bottom:0}
  .topbar .mast,.topbar.stuck .mast{padding:6px 0}
  .mast-top{align-items:center;min-height:44px}
  .mast-logo,.topbar.stuck .mast-logo{width:108px}
  /* Kate, 1 Oct 2026: with the acts fixed, a tight row squeezed the lockup instead, and
     SALONS (which has a 7.5px floor) ended up wider than TARA ROSE. The lockup holds its
     size; the filters pill is what gives way, it already truncates. */
  .mast-top > .mast-logo,.mast-top > .m-logo-hit,.m-logo-hit > .mast-logo{flex-shrink:0}
  /* Scrolling down tucks it away, any scroll up brings it back (mobile.js). */
  .topbar.tb-hide{transform:translateY(-100%);box-shadow:none}
  /* Kate, 28 Sep 2026: bars that park under the header (Stylist Levels' pills) left
     a band of page showing above them once the header tucked away. While it is
     tucked they park at the very top instead. */
  .slv-top{transition:top 220ms var(--card-ease),padding .15s}
  body:has(.topbar.tb-hide) .slv-top{top:env(safe-area-inset-top)}

  /* Buttons. Dark mode moves into the drawer; Hide filters becomes the sheet. */
  .mast-acts,body.ledger-chrome .mast-acts{display:flex;flex-wrap:nowrap;gap:8px;flex-shrink:1;min-width:0}
  .mast-acts > *{flex-shrink:0}   /* the round buttons keep their size; #fSheetBtn shrinks */
  /* Sign out lives in the drawer's footer on a phone (Log Out); the greeting is
     already hidden under 760px by the page's own rule. */
  #filtersBtn,#themeBtn,#signOutBtn{display:none!important}
  /* Kate, 2 Oct 2026: the mint Home button was the one people tapped first, and it
     took them out of the dashboard. On a phone the bar is now Menu (first, in mint,
     with its name on it), search, filters; Team Home lives at the top of the menu. */
  #homeBtn{display:none!important}
  #navBtn{order:-1;position:relative;display:inline-flex;align-items:center;height:44px;min-height:44px;
    padding:0 16px 0 42px;border-radius:22px;background:var(--accent-mint);border-color:var(--accent-mint);color:#1A1A1A;
    /* toggleNav writes "Sections" / "Hide sections" here for screen readers; the eye reads "Menu". */
    font-size:0;white-space:nowrap}
  #navBtn::after{content:'Menu';font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:none}
  #navBtn::before{content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);
    width:16px;height:12px;
    background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
               linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,
               linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
  #fSheetBtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
    max-width:min(52vw,220px);min-width:0;flex-shrink:1;font-size:12.5px;letter-spacing:.02em;text-transform:none;color:var(--text)}
  #fSheetBtn.off{display:none}
  #fSheetBtn svg{flex-shrink:0}
  #fSheetSum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  /* "Door" when clients are counted through the door (Kate, 1 Oct 2026); never truncated. */
  #fSheetDoor{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--text);color:var(--bg)}
  #fSheetDoor[hidden]{display:none}
  /* Kate, 3 Oct 2026: Bahrain read in AED, the same tag in mint. */
  #fSheetCur{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:999px;background:var(--accent-mint);color:#1A1A1A}
  #fSheetCur[hidden]{display:none}
  /* Team Home at the top of the menu reads as the way back out: a back arrow and a
     light mint tint, not the solid button the dashboard lists sit under. */
  .nav-home{justify-content:flex-start;gap:10px;padding:10px 14px;border-radius:12px;
    background:rgba(153,246,228,.28);color:var(--text);font-size:14px;letter-spacing:.02em;text-transform:none}
  [data-theme="dark"] .nav-home{background:rgba(153,246,228,.14);color:var(--accent-mint)}
  .nav-home svg{display:none}
  .nav-home::before{content:'';width:7px;height:7px;margin-left:3px;border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg)}

  /* What used to ride in the header now opens the page: section label (with the
     Comparison switch and the org chart links) and the branch · range · feed line. */
  .mast-body{display:block;padding:8px 0 2px}
  .mast-body > div{flex-wrap:wrap;row-gap:4px;margin-top:0!important}
  .mast-body .mast-sub{font-size:12px;letter-spacing:.16em;max-height:none;opacity:1}
  /* Kate, 28 Sep 2026: the rule read as three ragged lines, two left and the feeds
     right-aligned and wrapping. Now two quiet left-aligned lines: branch · range,
     then the feeds. The page's own header says the same in full just below. */
  .mast-body .mast-rule{margin-top:10px;max-height:none;opacity:1;display:block;padding:8px 0;
    font-size:12px;letter-spacing:.05em;line-height:1.5}
  .mast-body #mastBranch::after{content:'\00a0\00b7\00a0'}
  .mast-body .mast-fresh{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 12px;margin-top:3px;letter-spacing:.04em}
  .mast-body #ocOpenNewWin,.mast-body #ocPrintBtn{display:inline-flex;align-items:center;
    min-height:44px;font-size:12px!important}
  .mast-body #ocOpenNewWin[style*="display: none"],.mast-body #ocPrintBtn[style*="display: none"]{display:none!important}

  /* Filters: a bottom sheet, opened from the header. */
  .fsheet-scrim{display:block;position:fixed;inset:0;z-index:130;background:rgba(26,26,26,.38);
    opacity:0;pointer-events:none;transition:opacity 220ms var(--card-ease)}
  .fsheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:131;
    max-height:min(80dvh,80vh);background:var(--bg);border-radius:18px 18px 0 0;
    box-shadow:0 -12px 30px -12px rgba(0,0,0,.35);
    padding:0 16px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(105%);visibility:hidden;overscroll-behavior:contain;
    transition:transform 260ms var(--card-ease),visibility 0s linear 260ms}
  body.fsheet-open .fsheet{transform:none;visibility:visible;transition:transform 260ms var(--card-ease),visibility 0s}
  body.fsheet-open .fsheet-scrim{opacity:1;pointer-events:auto}
  body.fsheet-open{overflow:hidden}
  .fsheet-head{display:flex;align-items:center;justify-content:space-between;
    padding:10px 0;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}
  .fsheet-head b{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .fsheet-body{overflow-y:auto;padding-top:6px}
  .fsheet .filters-wrap{display:block!important}
  .fsheet .filters-wrap.closed{grid-template-rows:none;opacity:1}
  .fsheet .filters-wrap.closed .filters{visibility:visible}
  .fsheet .filters{flex-direction:column;align-items:stretch;gap:14px;padding:10px 0 4px}
  .fsheet .f-row{flex-direction:column;align-items:stretch;gap:8px}
  .fsheet .f-lbl{font-size:12px}
  /* Chips as pills, not middot text: they are the whole control on a phone. */
  .fsheet .chipset{gap:8px}
  .fsheet .chipset .sep{display:none}
  .fsheet .chip{min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:999px;
    background:var(--surface);color:var(--text);font-size:14px}
  .fsheet .chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
  /* The UAE | All switch takes its own full-width row, two equal halves, above the branch pills. */
  .fsheet .seg{display:flex;flex:1 0 100%;padding:3px;gap:3px;background:var(--surface)}
  .fsheet .seg .seg-b{flex:1;min-height:42px;border:0;border-radius:999px;background:none;color:var(--muted2);font-size:15px}
  .fsheet .seg .seg-b[aria-pressed="true"]{background:var(--text);color:var(--bg)}
  .fsheet .f-dates{margin-left:0;gap:8px;align-items:center}
  .fsheet .f-dates input,.fsheet .f-dates select,.fsheet .f-dates .lg-month-sel{font-size:16px;min-height:44px}
  .fsheet .f-dates button{min-height:44px;font-size:14px!important}

  /* The drawer carries Dark mode now. */
  .nav-phone{display:flex;align-items:center;min-height:48px}
  .nav-phone .nt-light{display:none}
  [data-theme="dark"] .nav-phone .nt-dark{display:none}
  [data-theme="dark"] .nav-phone .nt-light{display:inline}

  /* Second sticky bars would stack under the header: on phones they scroll. */
  .tp-bar,.sc-bar,#spfBar{position:relative;top:auto}
  /* Staff Benchmarks' bar: Sort, A-Z and Month on one row, the team switch under
     them. The spacer that right-aligns Sort on a desktop left Month alone on a
     line of its own; the pills tighten a touch so all three fit a 360px phone. */
  #spfBar{justify-content:flex-start;gap:6px}
  #spfBar .sc-bar-sp{display:none}
  #spfBar .sc-btn{padding:0 9px;font-size:12.5px}
  #spfBar .spf-dd-btn{gap:5px}
  #spfBar #spfSortWrap{gap:6px!important}

  /* Jumps land below whatever the header is at the time. */
  .eyebrow[id],[id^="s-"],[id^="sec-"]{scroll-margin-top:calc(var(--topbar-cond-h,64px) + 12px)}
}

/* ===== MOBILE (≤ 760px) · 3. TABLES ===== */
@media(max-width:760px),(hover:none) and (max-height:480px){
  /* The label column gives the figures room: capped, wrapped, tighter cells.
     Group-heading rows span the table, so they are left alone. */
  table.lg td,table.lg th{padding-left:9px;padding-right:9px}
  table.lg tbody tr:not(.lg-grp) > td:first-child:not([colspan]),
  table.lg thead th:first-child:not([colspan]){
    width:min(42vw,260px);max-width:min(42vw,260px);min-width:120px;white-space:normal;line-height:1.25;
    overflow-wrap:anywhere}
  table.lg,table.lg td.r,table.lg th.r{font-variant-numeric:tabular-nums}
  .lg-wrap.sx-l table.lg td:first-child,.lg-wrap.sx-l table.lg th:first-child{
    box-shadow:6px 0 8px -7px rgba(0,0,0,.35)}

  /* "Swipe for more" the first time a scroller has more to the right. */
  .lg-sx{--hint:''}
  .m-swipe{position:absolute;right:8px;bottom:10px;z-index:4;pointer-events:none;
    font-size:12px;letter-spacing:.06em;color:var(--text);background:var(--surface);
    border:1px solid var(--border);border-radius:999px;padding:4px 10px;
    box-shadow:var(--shadow-card);transition:opacity 200ms}
  .m-swipe.gone{opacity:0}

  /* Cards / Table for the widest tables (mobile.js builds the cards). */
  .m-tv{display:flex;gap:8px;margin:0 0 10px}
  .m-tv button{min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:999px;
    background:var(--surface);color:var(--muted);font:inherit;font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;cursor:pointer}
  .m-tv button[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
  .m-cards-on > .lg-wrap{display:none}
  .m-cards-on > .lg-sx,.lg-sx.m-cards-on .lg-wrap{display:none}
  .m-cards{display:grid;gap:8px}
  .m-cards[hidden]{display:none}
  .m-grp{margin:14px 0 2px;font-size:12px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .m-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
  .m-card.tot{border-color:var(--text)}
  .m-card summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
    gap:10px;min-height:48px;padding:10px 14px;cursor:pointer;font-weight:600;font-size:15px}
  .m-card summary::-webkit-details-marker{display:none}
  .m-card summary::after{content:'+';font-weight:400;color:var(--muted);font-size:20px;line-height:1}
  .m-card[open] summary::after{content:'–'}
  .m-card summary .m-lead{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
  /* BP5: net take and rebook % on a staff card's face. Kate, 3 Oct 2026: a long name
     (Virginija Lisauskaite) takes a second line instead of being cut short. */
  .m-card summary .m-nm{min-width:0;overflow-wrap:anywhere}
  .m-card summary .m-lead{white-space:nowrap;text-align:right}
  .m-card summary .m-lead small{font-weight:400;color:var(--muted);font-size:13px}
  /* Financial Totals: the table's total column, its name under the figure. */
  .m-card summary .m-lead-col small{display:block;font-size:12px;line-height:1.2}
  .m-hid{margin:6px 2px 0;font-size:13px;color:var(--muted)}
  .m-card dl{margin:0;padding:0 14px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 14px;font-size:14px}
  .m-card dt{color:var(--muted);min-width:0;overflow-wrap:anywhere}
  .m-card dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .m-card dt.band{grid-column:1/-1;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--text);opacity:.75}

  /* Service Rankings: one branch per card, # · Service · AED. */
  .svc-scroll-wrap{overflow-x:visible}
  .svc-grid-4{grid-template-columns:1fr;min-width:0}
  .svc-grid-4 table th:nth-child(4),.svc-grid-4 table td:nth-child(4){display:none}
  .svc-grid-4 table td:nth-child(2){white-space:normal!important;max-width:none!important}
  .svc-bhead{flex-wrap:wrap;gap:6px 12px}
  .svc-bhead > div:last-child{text-align:left!important}
  /* Kate, 2 Oct 2026: the tables still ran off the screen (a single branch is a
     6-column table at 489px). On a phone each is a ranked list instead (dashboard.js
     _svcMList); the table stays for desktop. */
  .svc-t{display:none}
  .svc-m{display:block}
  .svc-mrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px 10px;align-items:start;
    padding:10px 0;border-top:1px solid var(--border)}
  .svc-mrow:first-child{border-top:0}
  .svc-mrow .top3-rank{font-size:14px;line-height:1.35}
  .svc-mname{font-size:14px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
  .svc-mname small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--muted)}
  .svc-mname .svc-d{font-size:12.5px}
  .svc-mamt{font-family:'Playfair Display',serif;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.35;text-align:right}
  .svc-mamt small{display:block;margin-top:2px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;color:var(--muted)}
  /* Comparison (Kate, 2 Oct 2026): the A and B windows fold into two summary
     lines until "Change branches or dates" is tapped (compare.js cmpEditOpen). */
  .cmp-fold{display:grid;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:12px;
    padding:12px 14px;margin-bottom:12px}
  .cmp-fold-row{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.35}
  .cmp-fold-row small{color:var(--muted);font-size:12.5px;white-space:nowrap}
  .cmp-fold-row .cmp-tag{flex:none}
  .cmp-fold-btn{min-height:44px;margin-top:2px;border:1px solid var(--border);background:var(--surface2);color:var(--text);
    border-radius:999px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
  .cmp-sides:not(.open){display:none}
  /* Products' week table (Kate, 2 Oct 2026): Professional and Total were cut off.
     Shorter heads ("Pro", "Total") and tighter cells fit one branch on a phone;
     several branches add columns, which still scroll inside the card. */
  .prd-wk .prd-lg{display:none}
  .prd-wk th,.prd-wk td{padding:9px 6px;font-size:13px}
  .prd-wk th:first-child,.prd-wk td:first-child{min-width:0;padding-left:0}
  .prd-wk th:last-child,.prd-wk td:last-child{padding-right:0}
  .cli-mname{display:flex;gap:8px;align-items:flex-start}
  .cli-mname > div{min-width:0}
  .cli-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;color:#2D2E37;flex-shrink:0}
  .svc-grid-2{grid-template-columns:minmax(0,1fr)}
  .svc-grid-2 > .card,.svc-grid-4 > .card{min-width:0}
  /* Rows and View on one line: the select sized to its number, the two views
     splitting the rest. The Year group (when shown) keeps its own line. */
  #svc-controls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:10px}
  #svc-controls .yr-group{grid-column:1/-1}
  #svc-controls .ctrl-group{margin-left:0!important;min-width:0}
  #svc-rows{min-width:76px}
  #svc-controls .ctrl-group:last-child > div:last-child{display:grid!important;grid-template-columns:1fr 1fr}
  #svc-controls .f-pill{width:100%;justify-content:center}

  /* The "Open in Google Sheets" style buttons are one long nowrap line; let them wrap. */
  .lgx-b-lg{white-space:normal;max-width:100%;text-align:left}
  /* Page-level sideways scroll: nothing in the masthead may be wider than the screen. */
  .topbar-in,.mast,.mast-top{max-width:100%;min-width:0}
  .mast-top > div:first-child{min-width:0}
}

/* ===== MOBILE (≤ 760px) · 4. ORG CHART AS AN INDENTED LIST ===== */
@media(max-width:760px),(hover:none) and (max-height:480px){
  body:not(.orgchart-pop) .oc-container{padding:14px 12px 16px;--oc-scale:1!important}
  body:not(.orgchart-pop) .oc-zoom-controls{display:none}
  body:not(.orgchart-pop) .oc-lines{display:none}
  body:not(.orgchart-pop) .oc-tree,body:not(.orgchart-pop) .oc-tree ul{display:block;overflow:visible}
  body:not(.orgchart-pop) .oc-tree ul{padding:0 0 0 8px;margin:6px 0 0 6px;border-left:2px solid var(--border)}
  body:not(.orgchart-pop) .oc-tree li{display:block;padding:0;margin:0 0 6px!important}
  /* Photo on the left over two rows, name over role, the fold mark on the right. */
  body:not(.orgchart-pop) .oc-node,body:not(.orgchart-pop) .oc-node.has-photo{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;
    align-content:center;column-gap:12px;row-gap:2px;width:100%;min-width:0;
    padding:8px 12px;text-align:left;box-sizing:border-box}
  body:not(.orgchart-pop) .oc-node > *{grid-column:2;min-width:0}
  body:not(.orgchart-pop) .oc-photo{grid-column:1;grid-row:1/3;align-self:center;
    height:56px;width:auto;margin:0}
  body:not(.orgchart-pop) .oc-name,body:not(.orgchart-pop) .oc-node.has-photo .oc-name{
    font-size:15px;text-align:left;white-space:normal;overflow-wrap:anywhere}
  body:not(.orgchart-pop) .oc-role,body:not(.orgchart-pop) .oc-node.has-photo .oc-role{
    font-size:12px;text-align:left;letter-spacing:.06em}
  /* Tap a card with a team under it to fold that team away. */
  body:not(.orgchart-pop) .oc-tree li.m-fold > ul{display:none}
  body:not(.orgchart-pop) .oc-tree li.m-kids > .oc-node{cursor:pointer}
  body:not(.orgchart-pop) .oc-tree li.m-kids > .oc-node::after{content:'–';grid-column:3;grid-row:1/3;
    align-self:center;color:var(--muted);font-size:20px;line-height:1}
  body:not(.orgchart-pop) .oc-tree li.m-kids.m-fold > .oc-node::after{content:'+'}
}

/* ===== MOBILE · 5. TAP TARGETS (P1) =====
   44x44 minimum. Controls in a list or a row get real height, so neighbours never
   share a hit area. Small visual marks (the + on a pod, a name you can tap in a
   sentence) keep their look and get an invisible 44px ::after around them. */
@media(max-width:760px),(hover:none) and (max-height:480px){
  .side-nav a,.lg-side .side-nav a{min-height:44px;display:flex;align-items:center;box-sizing:border-box}
  .lg-side .side-nav{gap:8px;align-items:center}
  .hc-list button,#revealBtn,.hero-cta{min-height:44px;align-items:center}
  .r-more{min-height:44px;align-items:center}
  .chip,.f-pill,.sc-btn,.tp-btn,.lgx-b,.lgx-b-lg{min-height:44px;box-sizing:border-box}
  .chip{padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  .lgx-bar{gap:8px}
  .lgx-b{padding:0 14px;font-size:12px}
  .sc-seg button,.tp-seg button,.cmp-mode button{min-height:44px;padding:0 15px}
  /* Marketing pages (Kate, 6 Oct 2026: "too chunky on phone view"): the window and
     Daily/Weekly pills stay one slim row: "7 days" without "Last", 36px high, and the
     custom dates pill as slim (16px text kept so iPhones do not zoom into it). */
  #googleAdsContent .sc-seg button,#websiteContent .sc-seg button,#socialContent .sc-seg button{min-height:36px;padding:0 9px;font-size:12.5px;letter-spacing:0;white-space:nowrap}
  #googleAdsContent .mk-lg,#websiteContent .mk-lg,#socialContent .mk-lg{display:none}
  #googleAdsContent .mk-dates input,#websiteContent .mk-dates input,#socialContent .mk-dates input{min-height:0;height:30px;padding:0 4px}
  .chip{min-width:44px;justify-content:center}
  .cmp-chip,.cmp-tchip,.cmp-bp-btn{min-height:44px}
  .cmp-swap{width:44px;height:44px;min-width:44px}
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){display:flex;align-items:center;gap:10px;min-height:44px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;flex-shrink:0}
  .sc-seg{padding:2px}
  select,.lg-month-sel,.svc-yr-sel,.svc-date-inp,input[type=date],input[type=search],input[type=text],
  input[type=email],input[type=password],input:not([type]){
    min-height:44px;font-size:16px}
  .nav-kids-btn{width:44px;height:44px;margin:-10px -10px -10px 0}
  /* Pulse, Kate, 3 Oct 2026: the target strip's segments are 40px taps (were 26), the
     receipt's Per staff | Per visit switch 40px (was 31) with a 12px label, and a long
     benchmark chip (103% OF TARGET · BEAUTY SHORT) wraps instead of squeezing the name. */
  .hero-targets .ht-seg{margin:-15px 0}
  .hero-targets .ht-cell{padding:15px 0}
  .r-cl-k{font-size:12px}
  .r-cl-seg button{min-height:40px;padding:5px 14px}
  .att-chip{max-width:140px;white-space:normal;text-align:center;line-height:1.35}
  .att-name{letter-spacing:.06em}
  /* Branch Performance's charts (mix, benchmarks, clients): 320px tall (were 240), so the bars
     aren't squeezed under the legend and the slanted branch names. */
  #view-branchperf .bp-chart:not(.bp-chart-tall){height:320px}
  /* Team page (Kate, 3 Oct 2026): a long name takes a second line instead of being cut
     (Ashleigh Fairg…, Clarissa Destacam…). */
  #view-team .tp-row-nm,#view-team .tp-row-nm .who{white-space:normal;overflow:visible}
  /* Staff Cards' branch headings (Kate, 3 Oct 2026): the count line makes them two or three
     lines on a phone, and the dash and branch dot sat in the middle of the block, apart
     from the name. The dash goes; the dot lines up with the first line. */
  #view-stylists .section-label[id^="scBranch-"]{align-items:flex-start!important}
  #view-stylists .section-label[id^="scBranch-"]::before{display:none}
  #view-stylists .section-label[id^="scBranch-"]>span:first-child{margin-top:6px}
  /* The sign-in card. Kate, 3 Oct 2026: a 16px gutter so the torn edges show, tighter
     padding and gaps inside, and the gate scrolls (margin:auto keeps it centred) when a
     short or landscape screen can't fit the whole card. */
  #loginGate{padding:24px 16px;overflow-y:auto;align-items:flex-start}
  .login-card{margin:auto;padding:30px 22px 26px;gap:13px}
  .login-logo{gap:8px}
  .login-lockup .mark{width:140px}
  .login-word{font-size:10px}
  .login-dash-lbl{font-size:15px;padding:3px 12px}
  #loginGoogle,#loginBtn{min-height:44px}
  .login-links a{display:inline-flex;align-items:center;min-height:44px}
  /* Both links on one line at 375px; if a narrower phone wraps them, no 12px gap on top of the 44px rows. */
  .login-links{font-size:12.5px;gap:0 8px}
  /* The eye is already absolutely placed inside the field, which anchors the ::after. */
  #loginEyeBtn::after{content:'';position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));
    left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
  /* Staff Benchmarks' team-key card (inline-styled). */
  #spfKeyCard input,#spfKeyCard button{min-height:44px!important;font-size:16px!important}
  /* Tap-to-open names and small round buttons: the look stays, the target grows. */
  .who,.tp-add,a[href*="instagram.com"],#spfKeyReset a,#ocOpenNewWin,#ocPrintBtn{position:relative}
  #spfKeyReset a,#ocOpenNewWin,#ocPrintBtn{display:inline-block}
  .who::after,.tp-add::after,a[href*="instagram.com"]::after,#spfKeyReset a::after,
  #ocOpenNewWin::after,#ocPrintBtn::after{content:'';position:absolute;
    top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));
    left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
  /* The wordmark goes back to the top; its tap area is the row it sits in. */
  .mast-top > .m-logo-hit{display:flex;align-items:center;min-height:44px;min-width:96px;cursor:pointer}
  button,[role=button],a,.chip{-webkit-tap-highlight-color:transparent}
  button:active,[role=button]:active,.chip:active,.nav-sub:active{opacity:.7}
}

/* ===== MOBILE · 6. FLOATING CONTROLS (P1) ===== */
@media(max-width:760px),(hover:none) and (max-height:480px){
  /* The header's menu icon is the way in; the edge tab only covered text. */
  .nav-edge{display:none}
  /* TOP: two screens down before it shows, never while you are scrolling, clear of
     the home indicator and of the Team tray. mobile.js sets the two classes. */
  .totop{bottom:calc(16px + var(--tray-h,0px) + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right))}
  body:not(.m-deep) .totop.on,body.m-scrolling .totop.on{opacity:0;pointer-events:none;transform:translateY(10px)}
  .totop-k{font-size:12px;letter-spacing:.1em;margin-right:-.1em}
  /* Room under the last line for TOP (the Pulse's closed cover keeps its zero, its
     own rule is more specific), and under the footer for the tray while it is up. */
  .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body{padding-bottom:var(--tray-h,0px)}
  .tp-tray-in{padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
}

/* ===== MOBILE · 7. FULL-WIDTH CARDS, NOTHING CLIPPED (P1) ===== */
@media(max-width:760px),(hover:none) and (max-height:480px){
  /* These views kept their 28px desktop gutters inside an already padded page
     (inline styles, hence !important), so every card sat indented with dead space. */
  #teamContent,#teamQuadContent,#stylistCardsContent,#orgChartContent,#view-staffperf > main,#stylistLevelsContent,#staffWeeksContent,#lostClientsContent,#googleAdsContent,#websiteContent,#socialContent{
    padding-left:0!important;padding-right:0!important}
  .tp-bar,.sc-bar,.slv-top{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .sc-grid{grid-template-columns:1fr}
  /* Google Ads (Kate, 6 Oct 2026): spend, clicks and conversions fit a phone; the
     per-click column goes and the campaign names wrap. Website & Search drops its
     search "place" column the same way. */
  .gads-pc,.web-st{display:none}
  /* Team reserves its tray room itself (56vh, tray up or not); on a phone the
     page reserves the tray's measured height instead (section 6). */
  .tp-tray-space{display:none}
  /* Names wrap rather than run under the card edge; branch tags get their own row. */
  .tp-pod-top,.tp-pod-who,.sc-head,.sc-meta{min-width:0}
  .tp-pod-nm,.sc-meta .sc-name,.sc-head .who{overflow-wrap:anywhere}
  .tp-pod-who > div:last-child,.tp-row-s{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;row-gap:2px}
  /* The receipt keeps its paper width, centred in the column. */
  .receipt{margin-left:auto;margin-right:auto}
  /* Ledger block headers: title first, the export buttons on their own row under it. */
  .support-section-hdr{flex-wrap:wrap;row-gap:10px}
  .support-section-hdr > div:first-child{flex-wrap:wrap;flex:1 1 100%;row-gap:2px}
  .support-section-hdr > div:first-child > span:last-child{white-space:normal!important;overflow:visible!important}
  .support-section-hdr > span:last-child{flex:1 1 100%;justify-content:space-between;flex-wrap:wrap;row-gap:8px}
  .lgx-bar{flex-wrap:wrap}
  .sc-handle{overflow-wrap:anywhere}
  /* HAIR / BEAUTY labels on the split bars had a 44px column, too narrow for BEAUTY. */
  .sp{grid-template-columns:60px minmax(24px,1fr) auto 44px}
  .att-bars .bar-line{grid-template-columns:60px 1fr 72px}
  /* Long spaced-caps eyebrows: less tracking so they wrap into two lines, not six. */
  .section-label,.lg-head-k,.eyebrow,.sc-bar-t,.mast-sub{letter-spacing:.08em}
  .section-label .sl-sub{display:block;margin-top:3px;text-transform:none;letter-spacing:0;
    font-weight:400;color:var(--muted);font-size:13px}
  .section-label .sl-dot{display:none}
  .ctrl-label{display:block}
}

/* ===== MOBILE · 8. CHARTS (P1) ===== */
@media(max-width:760px),(hover:none) and (max-height:480px){
  /* Group average: said once above the columns (mobile.js copies the line's own
     label), instead of a 10.5px tag sitting on top of the bars it measures. */
  .avgline b{display:none}
  .m-avg{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .m-avg::before{content:'';width:18px;border-top:2px dashed var(--text);opacity:.55}
  .cols-plot{padding-top:12px}
  .cx-k{font-size:12px;letter-spacing:.06em}
  .cx-s,.fn-head,.fn-c{font-size:12px}
  .fn-head{letter-spacing:.08em}
  /* Benchmark bars: each metric already says its target in words, so the floating
     "Target" over every tick (10px, overlapping Hair and Beauty) goes. */
  .att-bars .bar-tick b{display:none}
  /* Staff Quadrant (Kate, 1 Oct 2026): team-performance.js draws a 360-wide canvas on
     a phone; the card loses most of its padding so the chart gets the width, and the
     two switches sit one above the other, each button an equal half. */
  .tp-q-plot{padding:8px 4px}
  .tp-q-ax,.tp-q-ttl,.tp-q-tgt-l{font-size:11px}
  .tp-q-segs{gap:8px}
  .tp-q-segs .tp-seg{display:flex;flex:1 1 100%}
  .tp-q-segs .tp-seg button{flex:1 1 0;line-height:1.2}
  .tp-q-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Staff Levels (Kate, 2 Oct 2026). At this level: a card per stylist instead of
     the 8-column table (stylist-levels.js slvAtCards). The guide: tighter cells, the
     measure column may wrap, so Minimum / Aim / next level fit the card. */
  .slv-at-t{display:none}
  .slv-m{display:grid;gap:10px}
  .slv-mc{border:1px solid var(--border);border-radius:12px;padding:12px}
  .slv-mc-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}
  .slv-mc-h b{font-size:15px}
  .slv-mc-n{text-align:right;flex:none}
  .slv-mc-n b{display:block;font-size:15px;color:var(--hair)}
  .slv-mc-n span{font-size:12px;color:var(--muted)}
  .slv-mts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .slv-mt{border-radius:8px;padding:6px 8px;background:var(--surface2);min-width:0;line-height:1.3}
  .slv-mt span{display:block;font-size:12px;color:var(--muted)}
  .slv-mt b{display:block;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slv-mt small{display:block;font-size:12px;opacity:.85}
  .slv-mt.good{background:var(--good-bg)}.slv-mt.good b{color:var(--good)}
  .slv-mt.mid{background:var(--warn-bg)}.slv-mt.mid b{color:var(--warn)}
  .slv-mt.bad{background:var(--bad-bg)}.slv-mt.bad b{color:var(--bad)}
  .slv-guide th,.slv-guide td{padding:8px 5px;font-size:13px}
  .slv-guide thead th{white-space:normal;vertical-align:bottom}
  .slv-guide th:first-child,.slv-guide td:first-child{min-width:0;padding-left:0}
  .slv-guide th:last-child,.slv-guide td:last-child{padding-right:0}
  .slv-guide .slv-cur{display:none}
  .slv-cur-note{display:inline}
  /* Podium Race (Kate, 2 Oct 2026): the rings' figures were 11px, their labels
     10.5px and the aims 10px, the smallest text on any page. On a phone the rings
     draw at 60px (the figure scales with them, to about 14px), labels and aims go
     to 12px, and the four share the card's width. The rank 4+ tiles do the same. */
  .tp-rings{gap:6px;flex-wrap:nowrap}
  .tp-ring{flex:1 1 0;min-width:0;width:auto;max-width:76px;font-size:12px;letter-spacing:.02em}
  .tp-ring svg{width:60px;height:60px}
  .tp-aim{font-size:12px;opacity:.9}
  .tp-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tp-tile{padding:5px 6px}
  .tp-tile span{font-size:12px;letter-spacing:.02em}
}

/* ===== MOBILE · 9. TYPE FLOOR (P2) =====
   12px for every label, less tracking so a spaced-caps label does not wrap, and
   16px on every form control (iOS zooms the page on focus below that, section 5). */
@media(max-width:760px),(hover:none) and (max-height:480px){
  .tp-last,.fine p,.fine p *,.lg-tag,.cmp-f-n,.bar-lbl,.tp-mtr-l,.tp-mtr-l *,
  .hc-list button i,.win-k,.tagb,.lg-sub,.sp-k,.side-k,.att-chip,.bp-gc-rk,.bn-k,.bn-grp-k,
  table.lg th,.lg-blk-t,.lg-grp-t,.cmp-stat-k,.tp-k,.r-sec span,.ht-k,.lg-head-k,.lg-grain-k,
  .cmp-mode button,.cmp-tag,.cmp-ans-k0,.cmp-ans-k,.lgx-own,.mast-fresh,#mastBranch,#mastRange,
  .f-lbl,.upd-eye,.upd-aff,.upd-foot,.ht-lbl,.nav-note{font-size:12px}
  .uc-banner{letter-spacing:.08em}
  .svc-bhead > div:last-child > div:first-child{font-size:12px!important}
  .att-bars .bar-lbl,body.ledger-chrome .lg-tag{font-size:12px}
  .fine p span{font-size:12px!important}
  .tp-mtr-l,.win-k,.tagb,.side-k,.bn-k,.bn-grp-k,.lg-grain-k,.lg-head-k,.ht-k,.hc-list button i,
  .cmp-stat-k,.tp-k,.lg-blk-t,.lg-grp-t,table.lg th,.att-chip{letter-spacing:.06em}
  /* Running text: a 14px floor for the muted explanatory paragraphs. */
  .lg-stand,.lg-note,.lgx-hint,.card-sub,.m-def{font-size:max(14px,1em)}
}

/* ===== MOBILE · 10. THE DRAWER (P2) ===== */
/* The drag-to-resize strip is a mouse affordance. */
@media(hover:none),(max-width:900px){.nav-resize{display:none}}
@media(max-width:760px),(hover:none) and (max-height:480px){
  /* A set width, not the saved desktop drag width (--nav-w may be inline on :root). */
  aside.sidebar{width:min(85vw,320px);
    padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  aside.sidebar .nav-sub{min-height:48px;display:flex;align-items:center;box-sizing:border-box}
  aside.sidebar .nav-title.nav-fold{min-height:44px}
  /* The page under an open drawer stays put. */
  body.nav-open{overflow:hidden}
  /* The drawer's own close button: the header's menu button sits under the open
     drawer, so this is the visible way out besides the scrim and the swipe. */
  aside.sidebar .nav-close{display:grid;place-items:center;position:absolute;
    top:calc(8px + env(safe-area-inset-top));right:8px;width:44px;height:44px;padding:0;
    border:0;border-radius:50%;background:transparent;color:var(--muted);
    font-size:26px;line-height:1;cursor:pointer;z-index:2}
  aside.sidebar .nav-close:active{background:rgba(250,248,243,.08);color:var(--text)}
}

/* ===== MOBILE · 12. VIEWPORT, SAFE AREAS, iOS (P2) =====
   The header, drawer, TOP, the Team tray and the filters sheet already take the
   safe-area insets (sections 1, 6 and 10; viewport-fit=cover is on the meta tag).
   100vh on a phone is the height with the address bar hidden, so anything sized to
   it overflows while the bar shows: dvh, with the vh line above as the fallback. */
@media(max-width:760px),(hover:none) and (max-height:480px){
  body{min-height:100vh;min-height:100dvh}
  .tp-tray{max-height:52vh;max-height:52dvh}
  #view-calendar iframe,#view-giveaway iframe,#view-trk iframe{
    height:calc(100vh - 120px)!important;height:calc(100dvh - 120px)!important}
  /* Comparison's native date pickers: full height, and From / To stack on a small
     phone, where two side by side cut the year off. */
  .cmp-dates input[type=date]{min-height:44px;width:100%;box-sizing:border-box}
}
@media(max-width:480px){.cmp-dates{grid-template-columns:1fr}}

/* ===== MOBILE · 13. FIRST SCREEN WITHOUT THE JUMP (P2) =====
   The Pulse cover arrives as "Reading the numbers…" and fills in when the data
   lands, pushing everything under it down (CLS 0.285 at 390px). While the page is
   still booting (body.m-boot, lifted by mobile.js the moment the headline is
   written) each piece holds the height it will have: measured at 320, 390 and
   430px. Nothing stays reserved once it is filled. */
@media(max-width:760px),(hover:none) and (max-height:480px){
  body.m-boot .mast-body .mast-rule{min-height:82px;box-sizing:border-box}
  body.m-boot #pulseHeadline{min-height:3lh}
  body.m-boot #pulseDeck:empty{min-height:3lh}
  body.m-boot #pulseStandfirst:empty{min-height:6lh}
  body.m-boot #heroTargets:empty{display:block;min-height:38px}
  body.m-boot #heroReceipt:empty{min-height:442px}
  /* Photos hold their shape before they load; the file's own ratio wins after. */
  .sc-photo,.tp-av,img.av{aspect-ratio:auto 200/228}
  .oc-photo{aspect-ratio:auto 375/435}
}

/* ===== 14. ACCESSIBILITY (P2) ===== */
/* A visible keyboard ring wherever a control has none of its own. :where() keeps
   it at zero specificity, so every existing focus style still wins; it only shows
   on keyboard focus, never on a click or a tap. */
:where(button,a,[role=button],summary,[tabindex]:not(input):not(select):not(textarea)):focus-visible{
  outline:2px solid var(--good);outline-offset:2px}
@media(max-width:760px),(hover:none) and (max-height:480px){
  /* Muted text at 4.5:1 on every surface it sits on. Measured: light muted2 was
     4.32 on the tinted surface, the warning amber 3.3-3.7, dark muted2 3.7-4.4,
     the drawer's section headings 3.1. The smallest change that clears 4.5. */
  :root:not([data-theme="dark"]){--muted2:#736D67;--warn:#9A6113}
  :root[data-theme="dark"]{--muted2:rgba(250,248,243,.6)}
  aside.sidebar{--muted2:rgba(250,248,243,.6)}
}

/* ===== SMALL PHONES (≤ 480px) ===== */
@media(max-width:480px){
  .mast-logo,.topbar.stuck .mast-logo{width:100px}
  /* Kate, 1 Oct 2026: a step smaller on 360-380px phones, so the filters pill keeps a word or two. */
  @media(max-width:380px){.mast-logo,.topbar.stuck .mast-logo{width:88px}}
  body:not(.orgchart-pop) .oc-photo{height:44px}
  body:not(.orgchart-pop) .oc-node,body:not(.orgchart-pop) .oc-node.has-photo{column-gap:9px;padding:7px 9px}
  #fSheetBtn{padding:0 11px;max-width:48vw}
  #fSheetBtn.door{max-width:58vw;gap:5px}
  #fSheetBtn.door #fSheetDoor{padding:2px 6px;font-size:9.5px}
  #fSheetBtn.cur{max-width:58vw;gap:5px}
  #fSheetBtn.cur #fSheetCur{padding:2px 6px;font-size:9.5px}
}

@media(prefers-reduced-motion:reduce){
  .topbar,.fsheet,.fsheet-scrim{transition:none!important}
}