/* ══════════════════════════════════════════════════════════════
   PHONE LAYER, LATE (Kate, 15 Oct 2026)
   mobile.css is loaded before the page stylesheets that came after it
   (client-mix.css, lost-lists.css, lost-queue.css, wv-blast.css), so on a tie
   those win. The phone rules for those pages live here, loaded after them.
   Same band and same rule as mobile.css: everything sits inside the phone
   query, so desktop (above 760px) is untouched.

   Re-audit of 15 Oct 2026 (every view at 375px, live data) found: Lost Clients
   scrolling sideways, controls under 44px on the pages built since 25 Sep, and
   labels under 12px. Left alone on purpose: the 36px Marketing pills and the
   38px Daily Performance bar pills (Kate asked for them slim, 6 and 13 Oct), the
   Pulse target strip's 40px segments (3 Oct), the proportional bar segments and
   the dots on the Staff Quadrant (their width is the data), and the TARA ROSE
   lockup type.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:760px),(hover:none) and (max-height:480px){

  /* ===== TAP TARGETS ===== */
  /* Lost Clients and Clients: every filter group takes a full row (Visits and Days
     away shared one, so six buttons were squeezed to 29px and the page ran 15px
     wider than the screen), and each button is at least 44px wide. */
  .lc-grp{flex:1 1 100%}
  .lc-bar .sc-seg button{min-width:44px}
  .lc-nums > summary,:root .dpf details > summary{display:flex;align-items:center;min-height:44px}

  /* Lost Clients' lists (and the Wellness Voucher blast, which shares them). */
  .ll-fchip{min-height:44px;min-width:44px;padding:0 12px}
  .tglr,.tglr.signout,.tglr.lc-btn,.ll-tools .tglr,.ll-tools .tglr.lc-btn,.ll-filters .tglr{min-height:44px}
  .ll-tools .ll-search{min-height:44px;font-size:16px}
  /* Small marks keep their look; an invisible 44px area goes round them. */
  .ll-rv-btn,.lc-more,:root .dpf .dp-linkbtn{position:relative}
  .ll-rv-btn::after,.lc-more::after,:root .dpf .dp-linkbtn::after{content:'';position:absolute;inset:-13px -6px}

  /* Client Mix and Service Rankings. */
  .cm-tab,.cm-chip,.cm-pill,#srCopy,#cmCopy{min-height:44px}

  /* Stylist Levels' pills, Marketing's table rows, the Staff Quadrant's key. */
  .slv-ladder button{min-height:44px}
  .mk-row > td{height:44px}
  .tp-q-chip{min-height:44px}

  /* ===== TYPE FLOOR: 12px ===== */
  .slv-eyebrow,.ih-i,.cmp-f-sub,.lg-inline,.lg-last,
  .tglr,.tglr.signout,
  .cm-seg button em,.cm-tag,
  .ll-fchip,.ll-fchip em,.ll-tag,.ll-d,.ll-ch,.ll-mix,.ll-pct,.ll-chip,.ll-explain,.ll-foot,
  .ll-tools .ll-hide,.lc-wrap.ll-wrap thead th,.ll-wrap .slv-note,.ll-wrap .lc-others,.ll-pill,
  .ll-wrap .lc-2nums,.ll-wrap .lc-hint,.ll-wrap .lc-more,.ll-thb span,.ll-pt,.ll-pn,.ll-opt em,
  .ll-g,.ll-rv-btn,
  .lqw-leg,.lqw-res span,#lostListsContent .lqw-lab,
  :root .dpf .dp-tag,:root .dpf .dp-wc small,:root .dpf .dp-wh{font-size:12px}
  :root .slv-guide th{font-size:12px}
  /* Daily Performance (Kate, 15 Oct 2026): no container round each card on a phone, it read tighter and tighter. The margins
     stay as they were; a hairline now separates one section from the next. */
  :root .dpf .dp-card,:root .dpf .dp-tile{background:none;border:0;border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
  :root .dpf .dp-card,:root .dpf .dp-tile{border-top:1px solid var(--border);padding-top:16px}
  /* The charts' own labels (heat-map cells, day letters) were 10.5 to 11.5px. */
  :root .dpf svg text{font-size:12px!important}
  /* The Pulse (Kate, 18 Oct 2026: "tanggalin na lang natin yung defined containers pag phone view, para hindi constricting"):
     the same treatment Daily Performance got. No box round a card or a stat block on a phone, a hairline between one
     section and the next. The stat blocks keep their status colour as a short bar above the label (it was the 3px top edge
     of the box). Laptops keep the cards as they were. */
  #mainContent .card,#mainContent .metric{background:none;border:0;border-radius:0;box-shadow:none;padding-left:0;padding-right:0;transform:none}
  #mainContent .card{border-top:1px solid var(--border);padding-top:18px;margin-bottom:0}
  #mainContent .metric,#mainContent .three .metric{border:0;border-top:1px solid var(--border);padding-top:18px}
  #mainContent .metric::before{left:0;right:auto;top:-1px;width:28px;height:3px;border-radius:2px}
  #mainContent .card:hover{transform:none;box-shadow:none}
  #mainContent .perf2,#mainContent .perf2 > *{min-width:0}
  /* Daily Performance, 18 Oct 2026. (1) "nipisan mo yung sticky header": the bar was 44px pills plus padding, over 55px tall. The
     pills and the Measure menu are 34px in the bar now (the page keeps its 44px taps). (2) "pill tags don't look good, dapat
     aligned": on a phone the weakest and strongest day rows had the date leaf and the percentage chip floating mid-row, and the
     "Also low that day" pills starting after the label and then wrapping under it. The leaf sits at the left with the chip right
     beside it (the chip first floated out at the right edge, away from its date), the label gets its own line, and the pills line
     up under it from the left edge. */
  :root .dpf .dp-bar{padding:3px 0}
  :root .dpf .dp-bar .dp-pill,:root .dpf .dp-bar .ps-btn{min-height:34px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  :root .dpf .dp-swr-r{flex:1 0 100%;display:flex;justify-content:flex-start;align-items:center;gap:12px}
  :root .dpf .dp-pl{gap:6px}
  :root .dpf .dp-pll{flex:0 0 100%;margin:0}
  :root .dpf .dp-lead .dp-pill{min-height:38px;display:inline-flex;align-items:center}
  /* The measure's (i) wrapped onto a second line of the sticky bar and made it taller; the tiles carry the same (i) on a phone. */
  :root .dpf .dp-bar .dp-info{display:none}
  /* "yung sticky header not ok, pwede naman yung last metric katabi na agad nung beauty toggle" (Kate, 18 Oct 2026): the Team pills
     and the Measure menu wrapped onto two rows (79px). Now one row (41px at 375px): the pills keep their width, the menu takes the
     rest and shortens its words with an ellipsis if a long measure name does not fit. */
  :root .dpf .dp-bar-row{flex-wrap:nowrap;gap:0 6px}
  :root .dpf .dp-bar .dp-bf:first-child{flex:0 0 auto}
  :root .dpf .dp-bar .dp-bf:not(:first-child){flex:1 1 0;min-width:0}
  :root .dpf .dp-bar .dp-pills{gap:3px}
  :root .dpf .dp-bar .dp-pill{padding-left:8px;padding-right:8px}
  :root .dpf .dp-bar .ps{display:flex;width:100%;min-width:0}
  :root .dpf .dp-bar .ps-btn{width:100%;min-width:0;padding-left:9px;padding-right:7px;gap:4px;justify-content:space-between}
  :root .dpf .dp-bar .ps-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Podium Race and Staff Quadrant (Kate, 18 Oct 2026: "toggles in here don't look too good"): each switch was only as wide as its
     words, so the three switches and the Rank by menu stacked at four different widths with 44px segments. Each is one full-width
     row now, its two halves equal, 38px tall, the menu the same width and a little taller than its text, so they line up. */
  :root .tp-bar{gap:8px}
  :root .tp-bar .tp-seg{flex:1 1 100%;display:flex}
  :root .tp-bar .tp-seg button{flex:1 1 0;min-height:38px;padding:0 8px;font-size:14px;line-height:1.2;text-align:center;white-space:nowrap}
  :root .tp-bar .ps{flex:1 1 100%;display:block}
  :root .tp-bar .ps .ps-btn{width:100%;min-height:40px;display:flex;align-items:center;justify-content:space-between}
  /* Podium Race and Staff Quadrant (Kate, 18 Oct 2026, "option 3": the four controls were about 230px): the bar is one summary line,
     "Hair · With leavers · Phorest · Net take", and the controls drop down from it. It starts closed and stays open until it is
     tapped again, so Hair and Beauty can be flipped back and forth. */
  :root .tp-bar .tp-sum{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 13px 'Inter',sans-serif;letter-spacing:.02em;text-align:left;cursor:pointer;min-width:0;max-width:100%;box-sizing:border-box}
  :root .tp-bar .tp-sum span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :root .tp-bar .tp-sum svg{flex:none;width:10px;height:10px;transition:transform .18s}
  :root .tp-bar.open .tp-sum{border-color:var(--accent)}
  :root .tp-bar.open .tp-sum svg{transform:rotate(180deg)}
  :root .tp-bar .tp-ctl{display:none}
  :root .tp-bar.open .tp-ctl{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:8px}
}
/* Daily Performance injects its own sheet after this one, so these carry :root to win. */
@media(max-width:560px){
  :root .dpf .dp-wc,:root .dpf .dp-wh{font-size:12px}
}

/* Sideways tables (scroll-edges.js, audit 18 Oct 2026): the edge that still has more to scroll to fades out, so a cut-off
   column reads as "there is more" and not as the end. The hint line sits above the table until the first swipe. */
@media(max-width:760px){
  .se-on.se-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent)}
  .se-on.se-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 38px),transparent)}
  .se-on.se-l.se-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 38px,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(to right,transparent,#000 38px,#000 calc(100% - 38px),transparent)}
  .se-hint{margin:2px 0 6px;font-size:12px;line-height:1.3;color:var(--muted)}
  .se-hint::after{content:" 92"}
}
@media(min-width:761px){.se-hint{display:none}}

/* Tap targets (audit 18 Oct 2026, P1-13, P3-17): the controls that measured under 44px at 375px. Visual size stays; the
   hit area grows. The month grid on Over the Years is widened in its own sheet so its cells reach 44 wide. */
@media(max-width:760px){
  :root .hero-targets .ht-cell{min-height:44px;box-sizing:border-box}
  :root .tp-bar .tp-seg button{min-height:44px}
  :root .oty .oty-how>summary{padding-top:8px;padding-bottom:8px;min-height:44px;box-sizing:border-box}
}

/* The phone masthead, condensed from the start (index.html sizeTopbar): trimmed again so it sits under 15% of a 640px screen. */
@media(max-width:760px){
  :root .topbar.stuck .mast{padding-top:4px;padding-bottom:4px}
  :root .topbar.stuck .gs-trig{margin-top:4px}
}

/* Staff Cards names (audit 18 Oct 2026, P1-13). The first name is the Instagram link and sits inside the .who span, whose own
   44px ::after (mobile.css) painted over it: a tap on the first name landed on the span, not the link. The link now sits above that
   area and has a real 44px box (padding with an equal negative margin, so the row does not grow), not a ::after. The surname and
   the space around the name still open the hover menu; the click handler in staff-links.js already ignores a click on a link. */
@media(max-width:760px){
  .who a{position:relative;z-index:1}
  .sc-name .who a,.sc-handle a{display:inline-block;box-sizing:border-box}
  .sc-name .who a{padding:12px 5px;margin:-12px -5px}
  .sc-handle a{padding:12px 0;margin:-12px 0}
  .sc-name .who a::after,.sc-handle a::after{display:none}
  .mode-pills .sc-head{min-height:44px;box-sizing:border-box}
}

/* The Pulse's seven target cells were 43.1px wide at 375px (strip 325px, 4px gaps): 2px gaps make them 44.7. */
@media(max-width:760px){
  :root .hero-targets .ht-seg{gap:2px}
}

/* Type floor, audit 18 Oct 2026 (P1-13): Daily Performance's pills, calendar and eyebrow (10.5 to 11.5px) and the Podium rings (11px). */
@media(max-width:760px){
  :root .dpf .dp-pi,:root .dpf .dp-cal-m,:root .dpf .dp-cal-w,:root .dpf .dp-pll,:root .dpf .dp-lab,:root .dpf .dp-eyebrow,:root .dpf .dp-tile .dp-eyebrow{font-size:12px}
  :root .tp-ring,:root .tp-ring text{font-size:12px}
}

/* Phone folds (phone-fold.js, audit 18 Oct 2026, P4-20): a filter bar, an explainer or the wave cards behind one tappable row. */
@media(max-width:760px){
  details.pf{border-bottom:1px solid var(--border);margin:6px 0}
  details.pf > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600;font-size:15px}
  details.pf > summary::-webkit-details-marker{display:none}
  details.pf > summary::after{content:'+';margin-left:auto;font-weight:400;color:var(--muted);font-size:20px;line-height:1}
  details.pf[open] > summary::after{content:'\2212'}
  details.pf > summary .pf-t{flex:none}
  details.pf > summary .pf-l{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:13.5px;color:var(--muted)}
  details.pf > .lc-bar{position:static;margin-top:4px}
  details.pf[open] > :not(summary){margin-bottom:10px}
}

/* Stylist's Benchmarks' group heads and Staff's 13 Week's group row were 11.5px (audit 18 Oct 2026, P1-13). */
@media(max-width:760px){
  :root .slv-table tr.slv-g th,:root .w13-down thead tr.w13-gh th{font-size:12px}
}


/* Phone ops, 18 Oct 2026 (Kate, from her phone on Lost Clients).
   1. The Clients family kept the 28px desktop gutter on top of the page's own, and every section sat in a bordered box, so the
      content was a narrow strip with a box inside it. No gutter of its own, no box (16 Oct ruling: a hairline between sections).
   2. The search box was 100% wide plus its padding and border, so it ran past the right edge.
   3. "On this page" was a wrapping pile of pills, four ragged rows. It is one row that scrolls sideways, with an edge fade. */
@media(max-width:760px){
  #topClientsContent,#clientMixContent,#lostClientsContent,#lostListsContent,#wvBlastContent{padding-left:0!important;padding-right:0!important}
  :root #topClientsContent .slv-card,:root #clientMixContent .slv-card,:root #lostClientsContent .slv-card,:root #lostListsContent .slv-card,:root #wvBlastContent .slv-card{
    background:none;border:0;border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
  :root #topClientsContent .slv-card + .slv-card,:root #clientMixContent .slv-card + .slv-card,:root #lostClientsContent .slv-card + .slv-card,:root #lostListsContent .slv-card + .slv-card,:root #wvBlastContent .slv-card + .slv-card{
    border-top:1px solid var(--border);padding-top:16px}
  :root .ll-tools .ll-search,:root .lc-tools input[type=search]{box-sizing:border-box;width:100%;min-width:0;max-width:100%}
  :root .lg-side .side-nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-right:28px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  :root .lg-side .side-nav::-webkit-scrollbar{display:none}
  :root .lg-side .side-nav .side-k,:root .lg-side .side-nav a{flex:none;white-space:nowrap}
}

/* One thickness for every on/off toggle on a phone (Kate, 23 Oct 2026: "too thick, uniform across all toggles", measured against the Refine
   button on Google Reviews, which is 32px to look at and keeps a 44px tap area through ::after). The segmented switches (.sc-seg, .tp-seg,
   .cmp-mode) were 44px, 40px, 38px and 36px depending on the page; they are now 32px outside (26px buttons in a 2px frame) with the same 44px
   tap area, so the thin look costs no thumb. The Pulse target strip and the filter sheet keep their own sizes. */
@media(max-width:760px){
  :root .sc-seg button,:root .tp-seg button,:root .tp-bar .tp-seg button,:root #googleAdsContent .sc-seg button,:root #websiteContent .sc-seg button,:root #socialContent .sc-seg button{
    min-height:26px!important;padding-top:0!important;padding-bottom:0!important;line-height:1.15;position:relative}
  :root .cmp-mode button{min-height:30px!important;padding-top:0;padding-bottom:0;position:relative}
  :root .sc-seg button::after,:root .tp-seg button::after,:root .cmp-mode button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* The first column of a table that scrolls sideways stays in view (Kate, 23 Oct 2026; scroll-edges.js marks the table se-stk and the wrapper
   se-sl once it has moved). Any width, so a laptop table that overflows gets it too. The column's colour is read from what is behind the table,
   so it covers the figures passing under it; a soft edge shows once something is tucked beneath. */
.se-stk tr > :first-child:not([colspan]){position:sticky;left:0;z-index:2;background-color:var(--se-bg,var(--bg));max-width:46vw}
.se-stk thead tr > :first-child{z-index:3}
.se-sl .se-stk tr > :first-child:not([colspan]){box-shadow:8px 0 8px -8px rgba(0,0,0,.45)}

/* One narrow side margin for the whole dashboard on a phone (Kate, 23 Oct 2026: "inconsistent margins, set a universal one, narrow, to maximise
   space"). It was a stack: 18px on the page shell, then 15px or 28px of each page's own padding, then the card's, and the masthead sat on 16px, so
   the left edge of the content was 18, 33 or 46px depending on the page and never lined up with the logo. Now the masthead, the shell and every page
   sit on --gut (10px a side) and a page adds none of its own; cards keep their inner padding so the text still has room. The embedded voucher
   report and Team Home use the same 10px. */
@media(max-width:760px){
  :root{--gut:10px}
  .topbar-in{padding-left:var(--gut);padding-right:var(--gut)}
  #wrap.wrap,.wrap{padding-left:var(--gut)!important;padding-right:var(--gut)!important}
  [id$="Content"]{padding-left:0!important;padding-right:0!important}
}

/* Filter chips are toggles too: the same 32px as the segmented switches and the Refine button, with a 44px tap area (Kate, 23 Oct 2026). */
@media(max-width:760px){
  :root .ll-fchip{min-height:32px!important;padding-top:0;padding-bottom:0;position:relative}
  :root .ll-fchip::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* The page-size and Prev / Next bar under every long list on a phone (Kate, 23 Oct 2026, from the Blast 4 send list): Show 10 / 20 / 50 / 100 sat on a
   line of its own with dead space beside it, and Prev and Next were a second, tall row. Now one thin row: Show and its four sizes on the left, Prev
   and Next filling the rest, and "Page 1 of 32, 1 to 10 of 312" under them. */
@media(max-width:760px){
  :root .lc-pager{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:8px 6px;align-items:center}
  :root .lc-pager .lc-pg-nav{display:contents}
  :root .lc-pager .lc-pg-size{grid-column:1;grid-row:1;flex-wrap:nowrap}
  :root .lc-pager .lc-pg-nav .tglr{grid-row:1;min-width:0;min-height:32px;padding:0 6px;white-space:nowrap;position:relative}
  :root .lc-pager .lc-pg-nav .tglr::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  :root .lc-pager .lc-pg-txt{grid-column:1/-1;grid-row:2;margin:0}
  :root .lc-pager .sc-seg button{padding-left:9px;padding-right:9px}
}