/* ============================================================
   Slab mobile — LIGHT-MODE design tokens + shared components
   Locked 2026-08-09 with Adrienne (field clock-in + Owner home).
   The mobile PWA (field crew, PM, Owner/Brian, Office/Adrienne) is
   LIGHT for sun readability; the desktop app stays dark. Import this
   on every mobile page:  <link rel="stylesheet" href="slab-mobile-light.css">
   Title Case everywhere for titles + buttons.

   MOTION IS NOT DEFINED HERE. The five primitives — .slab-press, .slab-rise,
   .slab-settle, .slab-wait, .slab-draw — live in /slab-motion.css, which every
   m-*.html links directly (they do not load nav.js, so nothing injects it for
   them). A page that wants motion adds one of those classes; it does not write a
   keyframe. The only motion concern in THIS file is the token bridge below.
   ============================================================ */
:root{
  /* chrome (dark navy header, blue accent stroke) */
  --nav-bg:#192438;
  --nav-stroke:#4A7FB5;      /* header bottom stroke, 4px */
  --badge-bg:#3C6997;        /* BFB square (blue) */
  --wordmark:#FFFFFF;        /* SLAB wordmark (white) */

  /* surfaces (warm sage light) */
  --page:#EEF2F7;            /* page background */
  --card:#E1E8E6;            /* section cards */
  --card-stroke:#D0D9D6;
  --tile:#C8DCD6;            /* quick-action tiles */
  --tile-stroke:#A8C2B9;
  --tile-chip:#DBEBE6;       /* icon chip inside a tile */

  /* brand + actions */
  --green:#2E5E4E;           /* primary buttons, icons, checkboxes, avatar */
  --green-bright:#21AA7F;    /* language-toggle active, positive margin */
  /* TOKEN BRIDGE for /slab-motion.css. Its settle wash paints with --accent-green,
     which is declared in slab-tokens.css — a file the mobile tree does not load, so
     on these pages the property would resolve to nothing and the wash would be
     invisible. Mapped to the mobile palette's own positive green: token to token,
     no new colour, and the primitive keeps its single definition. */
  --accent-green:var(--green-bright);
  --blue:#3C6997;            /* accent labels, badge, mid margin */
  --blue-bright:#4A7FB5;     /* nav stroke + accents */

  /* inputs (blue family — deliberate accent vs the sage surfaces) */
  --field:#EEF5FC;
  --field-stroke:#B4D0EA;

  /* flip clock */
  --flip-tile:#EEF4FB;
  --flip-stroke:#A9C7E4;
  --flip-digit:#20344F;

  /* text ramp (warm) */
  --text:#272E2B;           /* darkest */
  --text-muted:#667771;     /* lightest */

  /* status / data-viz */
  --danger:#C0533B;         /* count badge, low margin */
  --track:#CDD6D3;          /* donut track */
  --white:#FFFFFF;

  --radius:14px;
  --radius-sm:11px;
  --font:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
body.m{background:var(--page);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;}
/* the focus ring is BLUE on mobile (Adrienne, 2026-09-05: "make focus state blue") — same shared ring, mobile colour */
body.m :focus-visible:not([tabindex="-1"]){outline-color:var(--blue-bright);box-shadow:0 0 0 4px color-mix(in srgb, var(--blue-bright) 22%, transparent);}

/* ---- header band (navy + 4px blue stroke) ---- */
.m-band{background:var(--nav-bg);border-bottom:4px solid var(--nav-stroke);padding:32px 22px;}
.m-band-top{display:flex;align-items:center;justify-content:space-between;}
.m-logo{display:flex;align-items:center;gap:11px;}
.m-logo .sq{background:var(--badge-bg);color:#fff;border-radius:7px;font-size:15px;font-weight:700;line-height:1;padding:8px;display:inline-flex;letter-spacing:.02em;}
.m-logo .wm{font-size:20px;font-weight:800;letter-spacing:.13em;color:var(--wordmark);}
.m-hr{display:flex;align-items:center;gap:13px;}
.m-av{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;}

/* ---- language toggle (green) ---- */
.m-lang{display:inline-flex;border-radius:999px;overflow:hidden;font-size:16px;font-weight:800;border:1.5px solid var(--green-bright);}
.m-lang span{padding:7px 16px;cursor:pointer;}
.m-lang .on{background:var(--green-bright);color:#0E3D2E;}
.m-lang .off{background:rgba(33,170,127,.14);color:var(--green-bright);}

/* ---- section label ---- */
.m-sec{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.m-sec h2{font-size:17px;font-weight:800;color:var(--text);}
.m-sec .ct{font-size:15px;font-weight:800;color:#fff;background:var(--danger);border-radius:999px;padding:1px 8px;}

/* ---- card ---- */
.m-card{background:var(--card);border:1px solid var(--card-stroke);border-radius:var(--radius);}

/* ---- fields (blue inputs) ---- */
.m-lbl{font-size:16px;font-weight:800;color:var(--text-muted);}
.m-field{width:100%;border-radius:var(--radius);background:var(--field);border:1.5px solid var(--field-stroke);padding:17px 18px;font-size:20px;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:space-between;}
.m-field .chev{width:10px;height:10px;border-right:2.5px solid #7C9BC0;border-bottom:2.5px solid #7C9BC0;transform:rotate(45deg);margin-top:-3px;}

/* ---- buttons ---- */
.m-btn{border:none;border-radius:16px;background:var(--green);color:#fff;font-family:inherit;font-size:20px;font-weight:800;padding:21px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;}
.m-btn-2{background:var(--white);border:1.5px solid var(--green);color:var(--green);}   /* secondary */
.m-btn,.m-btn.slab-press{transition:transform var(--dur-press) var(--ease),background var(--dur-pop) var(--ease-out),color var(--dur-pop) var(--ease-out);}   /* beats .slab-press's transform-only transition so the unlock fades too */   /* a form becoming valid "unlocks" (motion audit 2026-09-06) */

/* ---- checkbox ---- */
.m-box{width:22px;height:22px;border-radius:7px;background:#fff;border:2px solid var(--green);flex-shrink:0;position:relative;}
.m-box{transition:background var(--dur-pop) var(--ease-out),border-color var(--dur-pop) var(--ease-out);}
.m-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg) scale(.6);opacity:0;transition:opacity var(--dur-pop) var(--ease-out),transform var(--dur-pop) var(--ease-out);}
.m-box.done{background:var(--green);}
.m-box.done::after{opacity:1;transform:rotate(45deg) scale(1);}   /* the tick pops in, the punch-list way (motion audit 2026-09-06) */

/* ---- quick-action tiles ---- */
/* grid-auto-rows:1fr keeps every ROW the same height. At 14.5px every tile label fit on
   one line and the rows matched by accident; at 16px "Receive Payment" wraps, and without
   this the row holding it stands 20px taller than the row above it. Nothing is clipped
   either way — this is about the rows reading as one grid. */
.m-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;grid-auto-rows:1fr;}
.m-tile{background:var(--tile);border:1.5px solid var(--tile-stroke);border-radius:var(--radius);padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;}
.m-tile .ic{width:44px;height:44px;border-radius:12px;background:var(--tile-chip);display:flex;align-items:center;justify-content:center;}
.m-tile .ic svg{width:23px;height:23px;fill:none;stroke:var(--green);stroke-width:2;}
.m-tile .tl{font-size:16px;font-weight:800;color:var(--text);}   /* 16px, not 14.5 — the app’s type scale has no 14.5 step */

/* ---- flip clock (centered; stacked AM) ---- */
.m-flip{display:flex;align-items:center;justify-content:center;gap:7px;}
.m-flip .tile{position:relative;width:60px;height:84px;border-radius:12px;background:var(--flip-tile);border:2px solid var(--flip-stroke);overflow:hidden;}
.m-flip .tile .dg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:50px;font-weight:800;color:var(--flip-digit);font-variant-numeric:tabular-nums;}
.m-flip .tile .seam{position:absolute;left:0;right:0;top:50%;height:1.5px;background:rgba(66,120,172,.28);}
.m-flip .colon{font-size:44px;font-weight:800;color:var(--blue);padding:0 1px;}
.m-flip .ampm{display:flex;flex-direction:column;align-items:center;line-height:1.05;margin-left:3px;}
.m-flip .ampm span{font-size:16px;font-weight:800;color:#8AA4C2;}

/* ---- margin donut ---- */
.m-donut{position:relative;width:62px;height:62px;border-radius:50%;}
.m-donut .hole{position:absolute;inset:7px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--text);}

/* ════════════════════════════════════════════════════════════════════════════════════
   TREATMENT B — "NAVY SHEET" with the round-button action row. APPROVED by Adrienne
   2026-09-03 ("approved, roll it out to the other homes") after a day of review on her own
   home (m-office.html) in the iOS Simulator. Every mobile home wears this. The rules below
   were lifted verbatim from that page; the tokens above are unchanged.

   THE SHAPE OF A HOME
     .topbar   pinned (sticky) navy bar: logo · bell · avatar. Its bottom 28px band is
               see-through with two navy corner "ears", so content passes above the hard cut
               but below the navy, and the sheet's rounded top reads again as it goes under.
               A tap on the bar (not the bell/avatar) scrolls to the top.
     .hero     navy: greeting, big digital time (+ date under it), View My Hours pill to the
               right of the time, the on-the-clock pill (.cstatus) underneath.
     .sheet    the page curves up over the hero (28px radius). Inside it, in each person's
               own rank order: the clock controls, .sec eyebrows (uppercase blue), the .qa
               action row (round white buttons, first one solid green, two-line labels),
               white .m-card cards with a hairline sage stroke and no shadow, the punch-list
               donuts (.pl-row), the week card (.wkc: ‹ This Week range › + seven .wk-pill +
               the picked day's list).
     Clock In  disabled = a light of the Clock Out rust (rust text); active = solid green;
               Clock Out = solid rust. Both punches play the confirmation animation (.c2/.c3).
   The old .m-band / .m-flip / .m-tiles rules above stay for m.html, punchlist.html and the
   type gallery until they are restyled; the homes no longer use them.
   ═══════════════════════════════════════════════════════════════════════════════════ */
  html,body{min-height:100%;}
  body.m{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;}
  /* Pull-down (the rubber band) revealed the page's light ground above the navy bar. A navy slab
     parked above the top of the document fills that gap; it scrolls with the content, so it is
     only ever seen while the page is pulled past its top (Adrienne, 2026-09-07: "when i pull
     down the background should be the same as the top nav"). */
  body.m{position:relative;}
  body.m::before{content:"";position:absolute;left:0;right:0;top:-100vh;height:100vh;background:var(--nav-bg);pointer-events:none;}
  /* A phone page opened on a wide screen (the review pane, a desktop tab) holds a phone
     column instead of stretching. On a phone this rule never applies. */
  /* sheets follow the page column: full width on a phone, the same 430px cap on a wide screen
     (Adrienne, 2026-09-05: "on this view it doesn't go full width") */
  @media (min-width:560px){ .tsheet,.tsheet.full{max-width:430px;} }
  @media (min-width:560px){
    html{background:#0F1622;}
    body.m{max-width:430px;margin:0 auto;min-height:100vh;background:var(--page);}
  }

  /* ---- the hero: navy, greeting, big time, the pill ---- */
  /* THE PINNED BAR. Navy on top; its bottom 28px band is TRANSPARENT with two navy corner
     "ears", so scrolling content passes above the hard cut but below the navy (Adrienne,
     2026-09-03: "can the content be above the hard cut but below the top navy background?").
     The ears are what makes the sheet's rounded top read again as it goes under. No fade. */
  .topbar{position:sticky;top:0;z-index:50;color:#fff;cursor:pointer;
    padding:calc(env(safe-area-inset-top) + 14px) 22px 40px;
    background:linear-gradient(var(--nav-bg),var(--nav-bg)) top/100% calc(100% - 28px) no-repeat;}
  .topbar::before,.topbar::after{content:"";position:absolute;bottom:0;width:28px;height:28px;pointer-events:none;}
  .topbar::before{left:0;background:radial-gradient(circle at 100% 100%, rgba(25,36,56,0) 27.5px, var(--nav-bg) 28.5px);}
  .topbar::after{right:0;background:radial-gradient(circle at 0 100%, rgba(25,36,56,0) 27.5px, var(--nav-bg) 28.5px);}
  .topbar .m-av{background:var(--green-bright);color:#0E3D2E;}
  .hero{background:var(--nav-bg);color:#fff;padding:10px 22px 58px;margin-top:-28px;}   /* sits fully under the bar's see-through band, so at the top of the page the band shows navy, not the page behind the bar */
  .bellbtn{width:44px;height:44px;margin-right:-6px;border:none;background:none;color:#B8C6DA;
    display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;}
  .bellbtn .mi{font-size:var(--ico-lg);}
  .bellbtn{position:relative;}
  .bellbtn .bdot{position:absolute;right:8px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid var(--nav-bg);}   /* unread (2026-09-06) */
  .greet h1{font-size:22px;font-weight:800;color:#fff;}
  .greet p{font-size:14px;color:#B8C6DA;margin-top:3px;font-weight:600;}
  /* the time and the on-the-clock pill share ONE line (Adrienne, 2026-09-03) */
  .timerow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:22px;}
  .timerow .hrsbtn{margin-top:10px;}
  .bigtime{display:flex;align-items:baseline;gap:8px;flex-shrink:0;}
  .bigtime b{font-size:56px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
  .bigtime span{font-size:16px;font-weight:800;color:#B8C6DA;}
  .cdate{font-size:14px;font-weight:600;color:#B8C6DA;margin-top:6px;}   /* tight under the time */
  /* View My Hours lives under the date, in the hero (Adrienne, 2026-09-03) */
  .hrsbtn{flex-shrink:0;min-height:36px;border-radius:999px;border:1.5px solid #B8C6DA;background:none;color:#fff;
    font-family:inherit;font-size:13px;font-weight:800;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
  .hrsbtn .mi{font-size:var(--ico-sm);}
  /* THE RECORD — on navy now, so white text; the live green stays the live green */
  .cstatus{display:none;align-items:center;justify-content:center;gap:9px;min-width:0;margin-top:14px;max-width:100%;
    background:rgba(33,170,127,.18);border:1.5px solid var(--green-bright);border-radius:999px;
    padding:8px 12px;font-size:13px;font-weight:800;color:#fff;
    white-space:nowrap;overflow:hidden;}
  .cstatus.on{display:inline-flex;}
  .cstatus .dot{width:8px;height:8px;border-radius:50%;background:var(--green-bright);flex-shrink:0;}
  .cstatus #cstatusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .cstatus.settled{background:rgba(255,255,255,.10);border-color:#B8C6DA;color:#fff;}
  .cstatus.settled .dot{background:#B8C6DA;}

  /* ---- the sheet that curves up over the hero ---- */
  .sheet{background:var(--page);border-radius:28px 28px 0 0;margin-top:-30px;
    padding:20px 18px calc(env(safe-area-inset-bottom) + 34px);position:relative;}
  .sec{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:32px 4px 10px;}   /* a little more air between sections, everywhere (Adrienne, 2026-09-06) */
  .sec h2{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);}
  .sec .ct{font-size:12px;font-weight:800;color:#fff;background:var(--green);border-radius:999px;padding:2px 8px;}
  .sec .ctwrap{display:flex;align-items:center;gap:8px;}

  /* ---- the clock's controls live at the top of the sheet ---- */
  .m-lbl{display:block;margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);}
  .cselwrap{position:relative;display:flex;}
  select.cfield{width:100%;border-radius:var(--radius);background:#fff;
    border:1px solid var(--card-stroke);padding:16px 44px 16px 18px;font-family:inherit;
    font-size:18px;font-weight:700;color:var(--text);cursor:pointer;
    appearance:none;-webkit-appearance:none;min-height:56px;}
  select.cfield:focus{border-color:var(--blue-bright);}   /* the shared focus ring stays — only the border colour is ours */
  select.cfield.ph{color:#7C9BC0;font-weight:600;}
  select.cfield:disabled{opacity:.72;cursor:default;}
  .cselwrap .chev{position:absolute;right:19px;top:50%;width:10px;height:10px;
    border-right:2.5px solid #7C9BC0;border-bottom:2.5px solid #7C9BC0;
    transform:translateY(-70%) rotate(45deg);pointer-events:none;}
  .cbottom{margin-top:14px;}
  /* the punch button is the RUST primary in both states — Clock In and Clock Out — with the
     light rust tint for disabled (Adrienne, 2026-09-03: "active clock in button should be
     orange"). Green is reserved for the confirmation fill that banks through it. */
  .m-btn{min-height:60px;border-radius:18px;font-size:18px;position:relative;overflow:hidden;
    background:var(--danger);box-shadow:0 10px 24px rgba(192,83,59,.28);}
  .m-btn.out{background:var(--danger);}
  /* the outlined secondary (Open Full Calendar) keeps its white/green look under the rust base */
  .m-btn.m-btn-2{background:var(--white);color:var(--green);border:1.5px solid var(--green);box-shadow:none;}
  /* an icon inside a primary button wears the button's text colour (white on rust, green on the outlined secondary) */
  .m-btn .mi{color:inherit;}
  /* inactive = a LIGHT ORANGE of the primary (Adrienne, 2026-09-03: "the clock in button
     inactive should be a light orange since the primary is orange") — a tint of --danger
     with rust text, not a greyed-out green */
  /* THE FIELD FLAG — a control that is missing when its button is tapped (SlabField.flag) */
  .tfield.bad,.pickbtn.bad,.cap.bad,.inv-wrap.bad{border-color:var(--danger) !important;}
  .fmsg{margin-top:8px;font-size:14px;font-weight:700;color:var(--danger);line-height:1.4;}
  /* a button that is not ready is .is-off, not [disabled] — it still takes the tap, so it can say what is missing */
  .m-btn.is-off,.m-btn[disabled]{opacity:1;box-shadow:none;
    background:rgba(192,83,59,.38);color:#fff;border:none;}
  .m-btn[disabled]{pointer-events:none;}   /* only the real disabled state swallows the tap — .is-off must take it, to say what is missing */
  .m-btn.is-off .clk{border-color:#fff;}   /* a light of the Clock Out rust with WHITE text (Adrienne, 2026-09-05: "change to white text on button") */
  .m-btn[disabled] .clk{border-color:#fff;}
  .m-btn[disabled] .clk::before,.m-btn[disabled] .clk::after{background:#fff;}
  .m-btn[disabled]:active{transform:none;}
  /* THE RUST OFF-STATE ABOVE IS FOR THE PRIMARY ONLY. .m-btn-2 is the secondary look (white
     fill, green border, green text — see the base rule near the top of this file); without
     this override, .is-off / [disabled] on a secondary button wins on equal specificity and
     paints it as a solid rust block. Live bug, found on a real device 2026-09-11:
     m-sub.html's #btnNotYou ("Not You?", a secondary) sits beside #btnFb ("My Name Isn't
     Here", also secondary, never off) and only one of the two read as a button.
     (0,3,0) beats the (0,2,0) rule above AND any page's own copy of it, wherever that copy
     lives, so this is the one place to fix it. A disabled/off secondary stays a secondary,
     just dimmed — keep the outline, drop the contrast — never the primary's rust. */
  .m-btn.m-btn-2.is-off,.m-btn.m-btn-2[disabled]{opacity:1;box-shadow:none;
    background:var(--white);color:var(--text-muted);border:1.5px solid var(--card-stroke);}
  .m-btn > *{position:relative;z-index:1;}

  /* ---- THE CONFIRMATION ANIMATION — on BOTH punches (unchanged from the first build) ---- */
  /* both punches: green banks up through the rust button (the server said yes), the hands
     turn once, then the fill is released back onto the rust of the next state */
  .cbank{position:absolute;inset:0;z-index:0;background:var(--green);transform:translateY(100%);}
  .m-btn.c3,.m-btn.c2{background:var(--danger);}
  .m-btn.c3 .cbank,.m-btn.c2 .cbank{animation:c-bank .42s var(--ease-out) both;}
  @keyframes c-bank{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .m-btn .clk{width:18px;height:18px;border:2.5px solid var(--white);border-radius:50%;
    position:relative;flex-shrink:0;}
  .m-btn .clk::before,.m-btn .clk::after{content:"";position:absolute;
    left:50%;bottom:50%;margin-left:-1px;width:2px;background:var(--white);border-radius:1px;
    transform-origin:50% 100%;}
  .m-btn .clk::before{height:4.5px;}
  .m-btn .clk::after{height:6.5px;}
  .m-btn.c3 .clk::before,.m-btn.c2 .clk::before{animation:c-hour .6s var(--ease) both;}
  .m-btn.c3 .clk::after,.m-btn.c2 .clk::after{animation:c-min .6s var(--ease) both;}
  .m-btn.cdone .clk::before{transform:rotate(30deg);}
  @keyframes c-hour{from{transform:rotate(0)}to{transform:rotate(30deg)}}
  @keyframes c-min{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  /* ---- the same button carrying Slab's animated clock icons (Adrienne 2026-08-30, built
     2026-09-06). `.clk.ico` holds the inlined SVG from public/icons/clock-in|out.svg; the CSS
     circle + pseudo-hands above stay as the fallback when the icon could not be fetched.
     At REST no keyframe runs (the rule: only a confirmed punch may move it) and the hands sit
     on the pose the animation lands on — 10 past, hour on the hour — so the last frame of a
     play and the resting frame are the same picture. */
  .m-btn .clk.ico{width:22px;height:22px;border:none;border-radius:0;}
  .m-btn .clk.ico::before,.m-btn .clk.ico::after{display:none;}
  .m-btn .clk.ico svg{display:block;width:100%;height:100%;color:#fff;overflow:visible;}
  .m-btn .clk.ico.rest svg *{animation:none !important;}
  .m-btn .clk.ico.rest .ci-min,.m-btn .clk.ico.rest .co-min{transform:rotate(10deg);transform-origin:24px 24px;}
  .cnote{margin-top:12px;font-size:15px;font-weight:600;color:var(--text-muted);text-align:center;line-height:1.4;}
  .cnote.bad{color:var(--danger);}
  .cnote .abtn{display:inline-block;margin-top:12px;}

  /* ---- A's action row: round buttons, labels under, scrolls sideways ---- */
  .qa{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .qa::-webkit-scrollbar{display:none;}
  .qa .m-tile{flex:0 0 auto;width:86px;background:none;border:none;padding:0;gap:7px;text-align:center;}
  .qa .m-tile .ic{width:62px;height:62px;border-radius:20px;background:#fff;border:1px solid var(--card-stroke);}
  .qa .m-tile .ic .mi{font-size:var(--ico-xl);color:var(--green);}
  .qa .m-tile.k .ic{background:var(--green);border-color:var(--green);}
  .qa .m-tile.k .ic .mi{color:#fff;}
  .qa .m-tile .tl{font-size:12px;font-weight:700;line-height:1.2;color:var(--text);min-height:29px;}   /* two lines, always */
  /* a button in the row may be a real link (Punch List → /punchlist.html): no underline, no link blue */
  .qa a.m-tile,.qa a.m-tile:visited{text-decoration:none;color:inherit;}

  /* ---- Slab Tasks: white card, hairline stroke ---- */
  .s-add{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--green);
    font-family:inherit;font-size:13px;font-weight:800;padding:8px 4px;cursor:pointer;min-height:44px;}
  .s-add .mi{font-size:var(--ico-sm);}
  .s-mic{width:100%;margin-bottom:10px;min-height:54px;border-radius:var(--radius);
    background:#fff;border:1.5px solid var(--green);color:var(--green);
    font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:10px;}
  .s-mic .mi{font-size:var(--ico-md);}
  .m-card{background:#fff;border:1px solid var(--card-stroke);border-radius:18px;}
  .stask{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid #EAF0EE;cursor:pointer;}
  .stask:last-child{border-bottom:none;}
  .stask .tx{font-size:16px;font-weight:700;color:var(--text);line-height:1.3;}
  .stask .td{font-size:13px;font-weight:600;color:var(--text-muted);margin-top:3px;}
  .stask .td.urg{color:var(--danger);}
  .stask.done .tx{color:var(--text-muted);text-decoration:line-through;}
  .stask.busy{opacity:.5;pointer-events:none;}
  .m-box{border-radius:7px;}
  .s-note{padding:20px 16px;font-size:16px;font-weight:600;color:var(--text-muted);text-align:center;}
  .s-note .sub{display:block;margin-top:6px;font-size:15px;font-weight:600;}
  .s-retry{display:flex;justify-content:center;margin-top:12px;}
  .s-btn,.abtn{border-radius:11px;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;
    text-align:center;background:var(--white);color:var(--green);border:1.5px solid var(--green);
    padding:0 22px;height:44px;line-height:41px;display:inline-block;}
  .s-sk{height:63px;border-bottom:1px solid #EAF0EE;position:relative;}
  .s-sk:last-child{border-bottom:none;}
  .s-sk .s-late,.sk-note{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    padding:0 16px;font-size:16px;font-weight:600;color:var(--text-muted);text-align:center;}

  /* ---- CREW ON SITE — a quick glance at who is on the clock RIGHT NOW, by job (Adrienne,
     2026-09-06: "a quick glance thing on the homepage for myself, brian, and crew supervisor
     role" · "show GC'd projects first" · "stack the employees and their start time so you can
     fit more" · "add a cap and view all button that goes to a page"). SlabCrewSite in
     slab-mobile-picker.js draws it; the home caps the people shown and View All opens
     m-crew.html, which shows everyone. ---- */
  .cs-job{display:flex;align-items:center;gap:8px;padding:12px 16px 2px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);border-top:1px solid #EAF0EE;}
  .cs-job:first-child{border-top:none;}
  .cs-gc{font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--green);border-radius:6px;padding:2px 6px;line-height:1.2;}
  .cs-more{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--text-muted);background:var(--page);border:1px solid var(--card-stroke);border-radius:6px;padding:2px 6px;line-height:1.2;white-space:nowrap;}   /* the cap trimmed this job (Adrienne, 2026-09-06) */
  .cs-rest{padding:10px 16px 12px;font-size:13px;font-weight:700;color:var(--text-muted);border-top:1px solid #EAF0EE;}
  .cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:4px 16px 10px;}
  .cs-p{min-height:44px;padding:5px 0;min-width:0;}
  .cs-p .nm{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cs-p .nm .dot{width:9px;height:9px;border-radius:50%;background:var(--green-bright);flex-shrink:0;}
  .cs-p .nm .you{font-weight:600;color:var(--text-muted);}
  .cs-p .since{padding-left:17px;font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap;display:flex;align-items:center;gap:4px;}
  .cs-p .since .mi{font-size:var(--ico-xs);}
  /* a worker from the SUBS' time clock (Adrienne, 2026-09-06): the directory's blue SUB tag after the name, the company after the time */
  /* on the name's line (Adrienne, 2026-09-06: "make the tag on the same line as the name"); a very long company trims with an ellipsis */
  .cs-p .nm .cs-sub{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:6px;padding:2px 5px;line-height:1.2;}   /* 9px: SAN IGNACIO beside a six-letter name fits a 375px phone's column */
  .cs-more{margin-top:12px;min-height:54px;font-size:16px;border-radius:var(--radius);padding:14px;box-shadow:none;}
  .cs-more .mi{font-size:var(--ico-md);}

  /* ---- 7 — Punch List: completion donuts per project + a link to the full tool
     (Adrienne, 2026-09-03: "lets make this a section of completion donuts and a link to
     lead to the full tool. remove from quick actions") ---- */
  .sec .s-link{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--green);
    font-size:13px;font-weight:800;text-decoration:none;min-height:44px;padding:0 4px;}
  .sec .s-link .mi{font-size:var(--ico-sm);}
  /* exactly THREE donuts fill the card; a fourth pushes the row into a sideways scroll
     (Adrienne, 2026-09-03). Names stay on ONE line and ellipsise; the full name rides on
     the column's title. */
  .pl-row{display:flex;gap:6px;overflow-x:auto;padding:16px 10px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .pl-row::-webkit-scrollbar{display:none;}
  .pl-col{flex:0 0 calc((100% - 12px) / 3);min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
  .pl-col .m-donut{width:66px;height:66px;}
  .pl-col .m-donut .hole{background:#fff;font-size:15px;}
  .pl-col .m-donut.full .hole{color:var(--green);}
  .pl-col .pn{font-size:14px;font-weight:800;letter-spacing:.03em;color:var(--text);line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pl-col .ps{font-size:12px;font-weight:600;color:var(--text-muted);margin-top:-4px;}
  .pl-sk{height:126px;}

  /* ---- This Week: one white card holding the week row, the pills and the day list ---- */
  .wkc{background:#fff;border:1px solid var(--card-stroke);border-radius:18px;padding:8px 12px 4px;}
  .wk-hdr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;}
  .wk-nav{width:44px;height:44px;flex-shrink:0;border:none;background:none;color:var(--green);cursor:pointer;
    border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .wk-nav .mi{font-size:var(--ico-lg);}
  .wk-t{display:flex;align-items:baseline;gap:8px;min-width:0;}
  .wk-t h2{font-size:16px;font-weight:800;color:var(--text);white-space:nowrap;}
  .wk-t .wk-range{font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap;}
  .wk-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
  .wk-pill{min-height:76px;border-radius:14px;background:none;border:none;
    padding:9px 0 7px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;}
  .wk-pill .n{font-size:16px;font-weight:800;color:var(--text);}
  .wk-pill .d{font-size:12px;font-weight:700;color:var(--text-muted);}
  .wk-pill.today .n{color:var(--green);}
  .wk-pill .mk{display:flex;gap:2px;margin-top:6px;height:3px;}
  .wk-pill .mk i{display:block;width:5px;height:3px;border-radius:2px;background:#E4EAE8;}
  .wk-pill .mk i.on{background:var(--green-bright);}
  .wk-pill.sel{background:var(--nav-bg);}
  .wk-pill.sel .n{color:#fff;} .wk-pill.sel .d{color:#B8C6DA;}
  .wk-pill.sel .mk i{background:rgba(255,255,255,.18);} .wk-pill.sel .mk i.on{background:var(--green-bright);}
  .wk-dayh{padding:14px 4px 4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);}
  .wk{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 4px;border-top:1px solid #EAF0EE;}
  .wk .wt{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;}
  .wk .ws{font-size:12px;font-weight:600;color:var(--text-muted);margin-top:3px;}
  .wk .tag{font-size:12px;font-weight:800;border-radius:999px;padding:5px 10px;white-space:nowrap;flex-shrink:0;
    background:var(--field);color:var(--blue);}
  .wk .tag.allday{background:rgba(33,170,127,.16);color:var(--green);}
  #wkCard{border:none;border-radius:0;background:none;}
  #wkCard .s-note{padding:18px 4px 14px;}
  .sk-row{border-bottom:1px solid #EAF0EE;position:relative;}
  .sk-row:last-child{border-bottom:none;}
  .sk-wk{height:65px;}
  .wk-open{margin-top:12px;min-height:54px;font-size:16px;border-radius:var(--radius);padding:14px;box-shadow:none;}
  .wk-open .mi{font-size:var(--ico-md);}

  @media (prefers-reduced-motion:reduce){
    .m-btn.c3,.m-btn.c2{background:var(--danger);}
    .m-btn.c3 .cbank,.m-btn.c2 .cbank{animation:none;}
    .m-btn.c3 .clk::before,.m-btn.c2 .clk::before{animation:none;transform:rotate(30deg);}
    .m-btn.c3 .clk::after,.m-btn.c2 .clk::after{animation:none;}
    .m-btn .clk.ico svg *{animation:none !important;}   /* the icon's own reduced-motion rule, restated here for the inlined copy */
    .m-btn .clk.ico .ci-min,.m-btn .clk.ico .co-min{transform:rotate(10deg);transform-origin:24px 24px;}
    .ctoast{transition:opacity var(--dur-pop) linear;transform:translateX(-50%);}
    .ctoast.show{transform:translateX(-50%);}
    .m-box::after,.m-box{transition:none;}
    .tscrim.open,.tscrim.open .tsheet,.done.on,.m-btn{animation:none;transition:none;}
  }

  /* ---- THE FULL-SCREEN PICKER (slab-mobile-picker.js). Adrienne, 2026-09-05: "when you click
     on pick a project can it be a full screen scroll to pick a project". The native select
     stays as the source of truth, hidden; .pickbtn is the field the person sees. ---- */
  .pick-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}
  /* `select.cfield{width:100%}` (0,1,1) out-ranked `.pick-hidden` (0,1,0), so a picker's hidden native
     select stayed full width; absolutely positioned inside a non-relative field it hung 35px past the
     right edge and widened the whole page (found on m-sub-details, 2026-09-11). Pin it at 1px, left 0. */
  .cfield.pick-hidden,select.pick-hidden,input.pick-hidden{width:1px;min-width:0;left:0;padding:0;border:0;}
  /* the button carries the whole field look itself: pages style `select.cfield`, which a button never matches */
  .pickbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;
    width:100%;min-height:56px;border-radius:var(--radius);background:#fff;border:1px solid var(--card-stroke);
    padding:15px 16px 15px 18px;font-family:inherit;font-size:18px;font-weight:700;color:var(--text);}
  .pickbtn.ph{color:#7C9BC0;font-weight:600;}
  /* the sheet base, shared: the pickers open on screens that have no sheet of their own */
  .tscrim{position:fixed;inset:0;z-index:90;background:rgba(16,23,34,.5);display:none;align-items:flex-end;justify-content:center;}
  .tscrim.open{display:flex;animation:slab-scrim var(--dur-pop) var(--ease-out);}
  .tscrim.open .tsheet{animation:slab-sheet var(--dur-move) var(--ease-out);}   /* a bottom sheet is presented: it slides up (motion audit 2026-09-06) */
  .tscrim.open .tsheet.full{animation:slab-scrim var(--dur-pop) var(--ease-out);}   /* the full-screen picker is a modal: it cross-fades */
  @keyframes slab-scrim{from{opacity:0}to{opacity:1}}
  @keyframes slab-sheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @keyframes slab-rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .done.on{animation:slab-rise-in var(--dur-move) var(--ease-out);}   /* the done card arrives, it does not pop */
  .tsheet{width:100%;max-width:none;background:var(--page);border-top-left-radius:22px;border-top-right-radius:22px;
    border-top:4px solid var(--nav-stroke);padding:12px 22px calc(env(safe-area-inset-bottom) + 22px);max-height:92vh;overflow-y:auto;}
  .tsgrip{width:42px;height:4px;border-radius:2px;background:var(--card-stroke);margin:0 auto 10px;}
  /* THE SHEET HEADER (Adrienne, 2026-09-06): a centred title, no ×. A sheet closes by its own Cancel /
     secondary button or a tap on the scrim. The full-screen picker's navy BAR keeps its × — it is a bar. */
  .tsheet .tst{display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:var(--text);margin:10px 0 16px;}
  .ts-x{background:none;border:none;font-family:inherit;font-size:26px;line-height:1;color:var(--text-muted);cursor:pointer;padding:0 2px;min-width:44px;min-height:44px;}
  .pickbtn .pk-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pickbtn .mi{font-size:var(--ico-lg);color:#7C9BC0;flex-shrink:0;}
  .pickbtn:disabled{opacity:.72;cursor:default;}
  .tscrim.full{align-items:stretch;}
  .tsheet.full{max-width:none;height:100%;max-height:100%;border-radius:0;border-top:none;padding:0;display:flex;flex-direction:column;overflow:hidden;}
  /* THE RULE (Adrienne, 2026-09-05: "top nav bar shape should apply to all top nav currently and in
     future screens"): every navy bar at the top of a screen OR a sheet is built like .topbar — navy
     on top, a see-through 28px band with two navy ears at the bottom, the content curving up under
     it. Reuse .navbar-shape for any new bar. */
  .navbar-shape,.pk-bar{position:relative;color:#fff;padding-bottom:40px;
    background:linear-gradient(var(--nav-bg),var(--nav-bg)) top/100% calc(100% - 28px) no-repeat;}
  .navbar-shape::before,.navbar-shape::after,.pk-bar::before,.pk-bar::after{content:"";position:absolute;bottom:0;width:28px;height:28px;pointer-events:none;}
  .navbar-shape::before,.pk-bar::before{left:0;background:radial-gradient(circle at 100% 100%, rgba(25,36,56,0) 27.5px, var(--nav-bg) 28.5px);}
  .navbar-shape::after,.pk-bar::after{right:0;background:radial-gradient(circle at 0 100%, rgba(25,36,56,0) 27.5px, var(--nav-bg) 28.5px);}
  .pk-bar{padding-top:calc(env(safe-area-inset-top) + 14px);padding-left:22px;padding-right:22px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;z-index:2;}
  .pk-title{font-size:18px;font-weight:800;}
  .pk-bar .ts-x{color:#fff;}   /* white, like every other mark on a navy bar (Adrienne, 2026-09-05: "this doesn't look white") */
  /* the list curves up under the bar's band, exactly like a home's sheet under its topbar */
  .pk-searchwrap{padding:12px 18px 0;flex-shrink:0;margin-top:-28px;background:var(--page);border-radius:28px 28px 0 0;padding-top:22px;position:relative;z-index:1;}
  .pk-searchwrap[style*="display: none"] + .pk-list{margin-top:-28px;border-radius:28px 28px 0 0;padding-top:22px;}
  .pk-search{width:100%;border-radius:var(--radius);background:#fff;border:1px solid var(--card-stroke);padding:12px 16px;
    font-family:inherit;font-size:16px;font-weight:600;color:var(--text);-webkit-appearance:none;appearance:none;min-height:48px;}
  .pk-search:focus{border-color:var(--blue-bright);}   /* the shared focus ring stays — only the border colour is ours */
  .pk-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 18px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;gap:8px;}
  .pk-row{min-height:60px;width:100%;border-radius:16px;background:#fff;border:1px solid var(--card-stroke);color:var(--text);
    font-family:inherit;font-size:17px;font-weight:700;text-align:left;padding:0 18px;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .pk-row,.pk-row.slab-press{transition:transform var(--dur-press) var(--ease),background var(--dur-pop) var(--ease-out),border-color var(--dur-pop) var(--ease-out);}   /* beats .slab-press's transform-only rule */
  .slab-settle::after{background:var(--green-bright);}   /* the settle wash in the mobile green (the primitive names a desktop token) */
  .pk-row.on{border-color:var(--green);background:var(--chip, #DBEBE6);}
  .pk-row.act{border:1.5px dashed var(--green);color:var(--green);justify-content:center;gap:8px;}   /* an action row: the dashed secondary */
  .pk-row.act .mi{font-size:var(--ico-sm);color:var(--green);}
  .pk-row.act .pk-lbl{flex:0 0 auto;}
  .pk-row .pk-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pk-row .mi{font-size:var(--ico-lg);color:var(--green);flex-shrink:0;}
  .pk-empty{padding:26px 16px;text-align:center;font-size:16px;font-weight:600;color:var(--text-muted);}

  /* ---- THE DATE PICKER (slab-mobile-picker.js, SlabDate): a Slab calendar sheet instead of
     the phone's wheel (Adrienne, 2026-09-05: "should be stylized") ---- */
  .tsheet.dp{padding-bottom:calc(env(safe-area-inset-bottom) + 18px);}
  .dp-hdr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 8px;}
  .dp-title{font-size:17px;font-weight:800;color:var(--text);}
  .dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;}
  .dp-dow span{text-align:center;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--text-muted);}
  .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .dp-pad{min-height:44px;}
  .dp-day{min-height:44px;border-radius:14px;border:1.5px solid transparent;background:#fff;color:var(--text);
    font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums;}
  .dp-day.today{border-color:var(--green-bright);color:var(--green);}
  .dp-day.sel{background:var(--nav-bg);color:#fff;border-color:var(--nav-bg);}
  .dp-foot{margin-top:14px;}
  .dp-foot .m-btn{min-height:54px;font-size:16px;border-radius:14px;white-space:nowrap;}
  .datebtn .pk-val{font-variant-numeric:tabular-nums;}
  /* ---- THE PHASE MODULE (SlabPhase): a project's phase off the Slab schedule, editable % ---- */
  .ph-card{background:#fff;border:1px solid var(--card-stroke);border-radius:18px;padding:12px 14px 0;overflow:hidden;}
  .ph-card.ack{margin-top:14px;}
  .ph-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
  .ph-eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ph-link{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--green);text-decoration:none;}
  .ph-link .mi{font-size:var(--ico-sm);color:inherit;}
  .ph-row{display:flex;align-items:center;gap:6px;}
  .ph-mid{flex:1;min-width:0;text-align:center;}   /* Adrienne 2026-09-06: "center align and add arrows on the side to switch between phases" */
  .ph-arrow{width:40px;height:40px;flex:none;border:none;background:none;color:var(--green);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:0;}
  .ph-arrow .mi{font-size:var(--ico-lg);color:inherit;}
  .ph-arrow[disabled]{color:#C9D1D8;cursor:default;}
  .ph-cur{font-size:18px;font-weight:800;color:var(--text);line-height:1.25;}
  .ph-dates{font-size:12px;font-weight:600;color:var(--text-muted);margin-top:2px;}
  .ph-dates.late{color:var(--danger);font-weight:700;}
  .ph-barrow{display:flex;align-items:center;gap:10px;margin-top:10px;}
  .ph-bar{flex:1;height:10px;border-radius:999px;background:var(--page);overflow:hidden;}
  .ph-bar i{display:block;height:100%;border-radius:999px;background:var(--green);transition:width var(--dur-pop) var(--ease-out);}
  .ph-bar.done i{background:var(--green-bright);}
  .ph-pct{font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}
  .ph-step{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;}   /* room above the row (Adrienne, 2026-09-06) */
  .ph-stepbtn{width:44px;height:44px;flex-shrink:0;border-radius:999px;border:1.5px solid var(--green);background:#fff;color:var(--green);cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .ph-stepbtn .mi{font-size:var(--ico-md);color:inherit;}
  .ph-stepbtn[disabled]{border-color:var(--card-stroke);color:var(--card-stroke);}
  .ph-step .m-btn{flex:1;min-height:44px;font-size:14px;border-radius:14px;padding:0 8px;white-space:normal;line-height:1.15;}
  .ph-go.ok{background:var(--green);color:#fff;box-shadow:none;gap:6px;}   /* confirmed — green, with a check */
  .ph-go.ok .mi{font-size:var(--ico-sm);color:inherit;}
  .ph-err{margin-top:8px;font-size:13px;font-weight:700;color:var(--danger);}
  /* the NEXT row: blue with white text, bleeding to the card's edges (Adrienne, 2026-09-06) */
  /* #4578AD: the lightest tint of the Slab blue that keeps white text at WCAG AA (4.62:1 measured) — Adrienne, 2026-09-06: "as light blue as you can while still passing ADA" */
  .ph-next{margin:20px -14px 0;padding:12px 14px;background:#4578AD;color:#fff;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;}
  .ph-next b{color:#fff;font-weight:800;}
  .ph-next .ph-nk{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;flex-shrink:0;}   /* full white — the eyebrow is small text, so no opacity */
  .ph-none{font-size:13px;font-weight:600;color:var(--text-muted);padding-bottom:12px;}
  .ph-cur:last-child{padding-bottom:12px;}
  /* ---- THE TIME SHEET (SlabTime): three snapping wheels in Slab's clothes ---- */
  .timebtn{justify-content:center;gap:8px;text-align:center;}
  .timebtn .pk-val{font-variant-numeric:tabular-nums;font-weight:800;}
  .timebtn.ph .pk-val{font-weight:700;}
  .tsheet.tp{padding-bottom:calc(env(safe-area-inset-bottom) + 18px);}
  .tp-big{text-align:center;font-size:40px;font-weight:800;color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:6px 0 18px;}
  .tp-cols{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;height:156px;margin-bottom:22px;}   /* three rows showing — one either side of the pick (Adrienne, 2026-09-06: "a little less tall") */
  .tp-band{position:absolute;left:0;right:0;top:50%;height:52px;transform:translateY(-50%);border-radius:14px;background:var(--chip, #DBEBE6);pointer-events:none;}
  .tp-col{position:relative;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tp-col::-webkit-scrollbar{display:none;}
  .tp-pad{height:52px;}
  .tp-row{display:block;width:100%;height:52px;scroll-snap-align:center;border:none;background:none;font-family:inherit;font-size:22px;font-weight:700;color:var(--text-muted);cursor:pointer;font-variant-numeric:tabular-nums;}
  .tp-row.on{color:var(--text);font-weight:800;}

  /* ---- GET THE APP PROMPT (slab-mobile-picker.js, SlabGetAppPrompt): the first-sign-in
     "Get Slab On Your Phone" sheet, on every home and m-sub.html ---- */
  .gap-sheet{padding-bottom:calc(env(safe-area-inset-bottom) + 22px);text-align:center;}
  .gap-hd h3{font-size:19px;font-weight:800;color:var(--text);margin:4px 0 8px;}
  .gap-hd p{font-size:15px;font-weight:600;color:var(--text-muted);line-height:1.45;margin:0 6px 20px;}
  .gap-get{margin-top:4px;}
  .gap-keep{margin-top:10px;box-shadow:none;}

  /* ---- THE SCROLL BOX: the desktop's pill scrollbar (nav.js), in the mobile tokens — a track with
     a hairline, a rounded thumb inset by a transparent border (Adrienne, 2026-09-05: "stylize the
     scroll by giving pill padding like on slab desktop"). Touch phones draw their own overlay bar
     and ignore this; it is for the pane, Chrome and the desktop-sized review. ---- */
  /* NO scrollbar-width / scrollbar-color here: once either is set, Chromium ignores every
     ::-webkit-scrollbar rule below and draws a flat-ended bar instead of the pill. Firefox only: */
  @supports not selector(::-webkit-scrollbar){.slab-scroll{scrollbar-width:thin;scrollbar-color:var(--blue-bright) transparent;}}
  .slab-scroll::-webkit-scrollbar{width:14px;height:14px;}
  .slab-scroll::-webkit-scrollbar-track{background:transparent;border-radius:999px;margin:6px 0;}   /* no ring around the track (Adrienne, 2026-09-05) — just the pill */
  .slab-scroll::-webkit-scrollbar-thumb{background:var(--blue-bright);border-radius:999px;border:4px solid transparent;background-clip:padding-box;min-height:36px;}
  .slab-scroll::-webkit-scrollbar-corner{background:transparent;}