/* =====================================================================
   GLOW Ops — rebuilt to match the GLOW design (desktop checklist +
   responsive manager dashboard). Brand: white wordmark dot, magenta accent.
   ===================================================================== */
@font-face{
  font-family:"Gilroy";
  src:url("../fonts/gilroy-heavy.woff2") format("woff2");
  font-weight:400 900;          /* single Heavy file covers any requested weight, no synthetic bolding */
  font-style:normal;
  font-display:swap;
}
/* Poppins self-hosted (latin subset) — no Google Fonts round-trip, no visible
   font swap on flaky shop wifi, and the SW caches these so the installed PWA
   renders identically offline. */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
:root{
  --bg:#060606;
  --card:#0a0a0a;
  --text:#f5f5f7;
  --magenta:#FF1464;
  --pink:#ff5e94;          /* light-pink text accent */
  --amber:#d9a23a;         /* overdue */
  --red:#ff3b30;           /* emergency only — never used for ordinary UI */
  --line:rgba(255,255,255,0.06);
  --line-2:rgba(255,255,255,0.08);
  --hl-green:#30d158;      /* dashboard health lights — distinct from the emergency-only --red */
  --hl-amber:#e0a63e;
  --hl-red:#ff453a;
  --m-40:rgba(245,245,247,0.5);      /* was .4 (~3.5:1, failed WCAG AA); .5 ≈ 4.9:1 on the dark surfaces */
  --m-45:rgba(245,245,247,0.55);     /* was .45 (~4.2:1); .55 ≈ 5.5:1 — legible secondary copy */
  --m-50:rgba(245,245,247,0.5);
  --m-55:rgba(245,245,247,0.55);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0}
/* Vertical scrolling + pinch-zoom (low-vision staff can magnify — WCAG 1.4.4),
   no horizontal pan, no iOS text auto-resize. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  touch-action:pan-y pinch-zoom;
  overflow-x:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;   /* no grey flash/stick on tap (mobile) */
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -8%,rgba(224,64,160,0.055),transparent 60%),
    radial-gradient(1000px 700px at 102% 112%,rgba(255,20,100,0.05),transparent 58%);
  background-attachment:fixed;
  color:var(--text);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;
}
@keyframes tickPop{0%{transform:scale(.5)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.stage{
  max-width:1260px;margin:0 auto;
  padding:48px 40px 56px;
  padding-left:max(40px,env(safe-area-inset-left));
  padding-right:max(40px,env(safe-area-inset-right));
  padding-bottom:calc(112px + env(safe-area-inset-bottom));   /* clear the floating Bella button so it never covers the footer */
}

/* ---------- card shell ---------- */
.card{
  position:relative;
  background:var(--card);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:28px;
  box-shadow:0 40px 130px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
}

/* ---------- chrome bar ---------- */
.chrome{
  min-height:62px;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0));
}
.chrome-left{display:flex;align-items:center;gap:18px;min-width:0;overflow:hidden}
.brand{font-family:"Gilroy","Poppins",sans-serif;font-weight:800;font-size:23px;letter-spacing:-0.01em;line-height:1;white-space:nowrap;flex:none}
.brand-dot{color:var(--text);font-size:26px}      /* brand rule: white dot, never pink */
.chrome-div{width:1px;height:22px;background:rgba(255,255,255,0.1);flex:none}
.shop{
  display:inline-flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;
  background:none;border:0;color:var(--text);font:inherit;
  font-size:15px;font-weight:500;cursor:pointer;padding:6px 2px;
}
/* "Newcastle" was rendering as 80px of text in a 61px box on Ellie's phone (3 Aug)
   — .chrome-left clips, and the locked (staff) variant had no inner span, so the
   ellipsis rule below never applied to it. It has one now, and dropping Manager
   login + Switch shop off this row gives the name the width it always needed. */
.shop>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}   /* ellipsize long shop names instead of overlapping the view pill */
.shop-locked{cursor:default;padding-left:0}
.shop svg{opacity:.55;flex:none}
.chrome-meta{font-size:13.5px;font-weight:400;color:var(--m-50);white-space:nowrap}
.ops-name{font-size:15px;font-weight:500}

/* live pill (dashboard) */
.live{
  display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;
  background:rgba(255,20,100,0.1);border:1px solid rgba(255,20,100,0.22);
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--magenta);
  box-shadow:0 0 8px rgba(255,20,100,0.7);animation:livePulse 1.8s ease-in-out infinite}
.live-text{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--pink)}
.chrome-right{display:flex;align-items:center;gap:18px;flex:none}

/* shop dropdown */
.shop-menu{
  position:absolute;top:58px;left:120px;z-index:40;min-width:180px;max-width:min(320px,calc(100vw - 40px));
  background:#141414;border:1px solid var(--line-2);border-radius:14px;padding:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);display:none;
}
.shop-menu button>span:first-child{white-space:normal;line-height:1.35}   /* "Switch shop — I'm working somewhere else today" wraps rather than overflows */
.shop-menu.open{display:block}
.shop-menu button{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  background:none;border:0;color:var(--text);font:inherit;font-weight:500;font-size:14.5px;
  padding:11px 12px;border-radius:9px;cursor:pointer;text-align:left
}
.shop-menu button:hover{background:rgba(255,255,255,0.05)}
.shop-menu .tick{color:var(--magenta);opacity:0}
.shop-menu button[aria-selected="true"] .tick{opacity:1}

/* ---------- card body ---------- */
.body{padding:36px 40px 40px}

/* on-shift strip */
.shiftbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.shiftbar.nudge{animation:nudge .28s ease}
.shift-label{font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--m-40)}
.chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);
  border-radius:999px;cursor:pointer;font:inherit;color:var(--text);
  transition:border-color .2s var(--ease),background .2s var(--ease)
}
.chip:hover{border-color:rgba(255,255,255,0.16)}
.chip.you{border-color:rgba(255,20,100,0.55);background:rgba(255,20,100,0.08)}
.avatar{
  position:relative;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;color:var(--text)
}
.presence{
  position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:var(--magenta);border:2px solid var(--card);
  animation:livePulse 2.6s ease-in-out infinite
}
.chip-name{font-size:13px;font-weight:500}
.chip .you-tag{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);margin-left:2px}

.rule{height:1px;background:var(--line);margin:28px 0}

/* title + ring */
.headrow{display:flex;align-items:center;justify-content:space-between;gap:24px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,20,100,0.85);margin-bottom:10px}
.h1{font-size:32px;font-weight:600;letter-spacing:-0.02em;line-height:1}
.subtitle{font-size:14.5px;font-weight:400;color:var(--m-45);margin-top:9px}

.ring{position:relative;flex:none}
.ring-arc{transition:stroke-dashoffset .7s var(--ease);filter:drop-shadow(0 0 7px rgba(255,20,100,0.55))}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-pct{font-size:27px;font-weight:600;letter-spacing:-0.02em;line-height:1}
.ring-label{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--m-40);margin-top:3px}

/* segmented control row */
.segrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 22px;flex-wrap:wrap}
.segment{
  display:inline-flex;gap:3px;padding:4px;
  background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:13px;
}
.seg-btn{
  padding:9px 22px;border-radius:10px;border:0;cursor:pointer;font:inherit;
  font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--m-50);background:transparent;
  transition:all .22s ease
}
.seg-btn.active{
  font-weight:600;color:#fff;background:rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 1px 6px rgba(0,0,0,0.3)
}
.hide-toggle{
  padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:none;
  color:var(--m-50);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer
}
.hide-toggle[aria-pressed="true"]{border-color:rgba(255,20,100,0.5);color:#fff;background:rgba(255,20,100,0.1)}
.hide-toggle:disabled{opacity:.35;cursor:default}

/* task list */
.tasks{display:flex;flex-direction:column;gap:9px}
.task{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:17px 20px;border-radius:16px;cursor:pointer;font:inherit;color:inherit;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.055);
  transition:background .25s ease,border-color .25s ease
}
@media(hover:hover){.task:hover{border-color:rgba(255,255,255,0.13)}}
.task.done{background:rgba(255,20,100,0.05);border-color:rgba(255,20,100,0.14)}
.task-check{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,0.22);background:transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease
}
.task-check svg{opacity:0;width:15px;height:15px}
.task.done .task-check{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 18px rgba(255,20,100,0.5)}
.task.done .task-check svg{opacity:1}
.task.pop .task-check{animation:tickPop .42s cubic-bezier(.34,1.56,.64,1)}
.task-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
/* collapse/expand chevron on a sub-task parent (squash the long lists) */
.task-parent{cursor:pointer}
.sub-chev{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  transition:transform .2s ease;opacity:.8}
.sub-chev.open{transform:rotate(180deg)}
.list-div{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);padding:14px 4px 4px;display:flex;align-items:center;gap:10px}
.div-count{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--m-50);background:rgba(255,255,255,0.05);border:1px solid var(--line-2);border-radius:8px;padding:2px 8px}
.div-count.all{color:var(--pink);background:rgba(255,20,100,0.1);border-color:rgba(255,20,100,0.22)}
.task-name{font-size:15.5px;font-weight:500;letter-spacing:-0.005em;color:var(--text);transition:color .25s ease}
.task.done .task-name{color:var(--m-50)}
/* Wraps for the same reason .task-tags does: this line carries "Ellie Pearson ·
   10:11" AND whatever chips the tick earned (Recovered, Bella's scanning it, a
   logged reading), and they don't fit side by side in a ~140px column. */
.task-meta{font-size:12.5px;font-weight:400;color:var(--m-40);display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;min-width:0}
.task-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--magenta);flex:none}
.task-spacer{flex:1}
/* flex:0 1 auto, NOT flex:none. .task-main is only ~140px wide on a 375px phone
   (a sub-task parent spends 28px on the check circle and 22px on the chevron),
   and these chips get long: "Missed its window — tick now to save it · 45m left"
   measures ~370px. With flex:none they couldn't shrink, so .task-tags wrapped
   between chips but a single over-wide chip still spilled straight out of the
   row. Now the chip shrinks and its own text wraps inside the pill. */
.kh-tag{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
  flex:0 1 auto;min-width:0;line-height:1.35;text-align:left;
  background:rgba(255,255,255,0.045);border:1px solid var(--line-2);
  font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:rgba(245,245,247,0.62)
}
.kh-tag svg{width:13px;height:13px;flex:none}   /* the glyph never squashes — only the words wrap */

/* completion banner */
.done-banner{
  display:flex;align-items:center;gap:14px;margin-top:14px;padding:16px 18px;
  background:linear-gradient(135deg,rgba(255,20,100,.14),rgba(224,64,160,.07));
  border:1px solid rgba(255,20,100,.34);border-radius:16px
}
.done-banner-ico{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--magenta);color:#0a0a0a}
.done-banner-ico svg{width:18px;height:18px}
.done-banner b{font-size:15px;font-weight:700;display:block}
.done-banner span{font-size:12.5px;color:var(--m-45)}

/* ---------- manager dashboard ---------- */
.ops-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.ops-h1{font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1}
.ops-sub{font-size:14px;color:var(--m-45);margin-top:8px}
.shops{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shopcard{background:rgba(255,255,255,0.035);border:1px solid var(--line);border-radius:22px;padding:26px;min-width:0}
.shopcard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.shopcard-name{font-size:17px;font-weight:600}
.shop-dot{width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 8px rgba(255,20,100,0.6)}
.ringrow{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.ringrow .ring-mini-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600}
.ringrow-done{font-size:14px;font-weight:500}
.ringrow-status{font-size:12.5px;margin-top:4px;color:var(--m-45)}
.ringrow-status.clear{color:rgba(255,94,148,0.9)}
.lines{display:flex;flex-direction:column;gap:13px}
.line{display:flex;align-items:center;gap:11px;min-width:0}
.line-check{width:18px;height:18px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,0.25)}
.line-check.done{background:var(--magenta);border-color:var(--magenta)}
.line-check.overdue{border-color:rgba(217,162,58,0.55)}
.line-check svg{width:10px;height:10px}
.line-label{font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.line-label.dim{color:var(--m-55)}
.line-spacer{flex:1}
.line-time{font-size:12px;color:rgba(245,245,247,0.55);flex:none}
.tag{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:7px;flex:none}
.tag.kh{color:var(--m-50);background:rgba(255,255,255,0.05);border:1px solid var(--line-2)}
.tag.overdue{color:var(--amber);background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.22)}

/* ---------- owner COMMAND CENTRE ---------- */
.ops-flags{color:var(--hl-red);font-weight:600}
.ops-period{margin:0 0 20px;width:100%;max-width:420px}
/* traffic-light tones */
.tl-green,.tl-h-green{--hl:var(--hl-green)} .tl-amber,.tl-h-amber{--hl:var(--hl-amber)} .tl-red,.tl-h-red{--hl:var(--hl-red)}
.tl-h-off{--hl:rgba(245,245,247,0.35)}   /* not-open-yet shop: neutral, no traffic light */
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--hl);flex:none;box-shadow:0 0 6px color-mix(in srgb,var(--hl) 55%,transparent)}

/* at-a-glance strip */
.glance{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.tl-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:rgba(255,255,255,0.035);border:1px solid var(--line);border-radius:16px;padding:13px 16px;cursor:pointer;color:var(--text);transition:background .18s var(--ease)}
@media(hover:hover){.tl-row:hover{background:rgba(255,255,255,0.06)}}
.tl-health{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--hl);background:color-mix(in srgb,var(--hl) 14%,transparent);border:1px solid color-mix(in srgb,var(--hl) 34%,transparent)}
.tl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tl-name{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.tl-medal{font-size:13px}
.tl-line{font-size:12.5px;color:var(--m-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-dots{display:flex;gap:7px;flex:none}
@media(max-width:520px){.tl-dots{display:none}}
.tl-go{flex:none;color:var(--m-40);display:flex;align-items:center;align-self:center}
.tl-go svg{width:18px;height:18px}
.sd-day-seg{margin:0 0 14px;width:100%;max-width:280px}
/* Today vs Yesterday completion bars inside a strip row */
.tl-bars{display:flex;flex-direction:column;gap:5px;margin-top:8px;width:100%}
.tl-bar-row{display:flex;align-items:center;gap:10px;min-width:0}
.tl-bar-lbl{flex:none;width:64px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m-40)}
.tl-bar{flex:1;height:7px;border-radius:5px;background:rgba(255,255,255,0.08);overflow:hidden}
.tl-bar-fill{display:block;height:100%;border-radius:5px;background:var(--magenta)}
.tl-bar-y .tl-bar-fill{background:rgba(245,245,247,0.32)}
.tl-bar-num{flex:none;font-size:11px;font-weight:600;color:var(--m-55);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* mini-leagues */
.ml-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.ml-card{background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.ml-ttl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.ml-lead{font-size:14px;font-weight:600;display:flex;align-items:baseline;gap:6px}
.ml-v{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text)}
.ml-rest{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.ml-row{font-size:12.5px;color:var(--m-45);display:flex;justify-content:space-between}
.ml-row b{color:var(--m-55);font-weight:600;font-variant-numeric:tabular-nums}
.sotd{background:rgba(255,20,100,0.08);border:1px solid rgba(255,20,100,0.2);border-radius:14px;padding:12px 16px;font-size:14px;margin-bottom:26px;display:flex;align-items:center;gap:8px}
.sotd-v{margin-left:auto;color:var(--pink);font-weight:700;font-variant-numeric:tabular-nums}

/* compare cards */
.ops-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.oc{background:rgba(255,255,255,0.035);border:1px solid var(--line);border-radius:20px;padding:20px;min-width:0}
.oc-open{border-color:var(--line-2);background:rgba(255,255,255,0.05)}
.oc-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;color:var(--text);cursor:pointer;padding:0;margin-bottom:16px}
.oc-health{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--hl);background:color-mix(in srgb,var(--hl) 14%,transparent);border:1px solid color-mix(in srgb,var(--hl) 34%,transparent)}
.oc-title{font-size:17px;font-weight:600;flex:1;text-align:left}
.oc-caret{color:var(--m-40);font-size:13px}
.oc-taskbar{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.oc-bar{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden}
.oc-fill{display:block;height:100%;border-radius:6px;background:var(--magenta)}
.oc-fill.full{background:var(--hl-green)}
.oc-tasknum{font-size:12.5px;font-weight:600;color:var(--m-55);font-variant-numeric:tabular-nums;flex:none}
.oc-sub{font-size:12px;color:var(--m-40);margin-bottom:14px}
.oc-chips{display:flex;flex-wrap:wrap;gap:8px}
.oc-chip{font-size:12px;font-weight:500;padding:5px 10px;border-radius:9px;background:rgba(255,255,255,0.05);border:1px solid var(--line-2);color:var(--m-55);display:inline-flex;align-items:center;gap:5px}
.oc-chip b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.oc-chip .oc-x{color:var(--m-40);font-size:11px}
.oc-green{color:var(--hl-green);border-color:color-mix(in srgb,var(--hl-green) 30%,transparent);background:color-mix(in srgb,var(--hl-green) 10%,transparent)}
.oc-amber{color:var(--hl-amber);border-color:color-mix(in srgb,var(--hl-amber) 30%,transparent);background:color-mix(in srgb,var(--hl-amber) 10%,transparent)}
.oc-red{color:var(--hl-red);border-color:color-mix(in srgb,var(--hl-red) 32%,transparent);background:color-mix(in srgb,var(--hl-red) 10%,transparent)}
.oc-chip.oc-amber b,.oc-chip.oc-red b,.oc-chip.oc-green b{color:inherit}
.oc-clear{font-size:12.5px;color:var(--hl-green)}
.oc-detail{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ocd-row{display:flex;gap:12px;font-size:12.5px}
.ocd-k{flex:none;width:78px;color:var(--m-40);font-weight:600}
.ocd-v{color:var(--m-55);min-width:0}
.ocd-loading{font-size:12.5px;color:var(--m-40)}
.ocd-li{display:block;line-height:1.5}
.ocd-sev{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:6px;vertical-align:middle}
.ocd-sev-urgent{color:var(--hl-red);background:color-mix(in srgb,var(--hl-red) 12%,transparent)}
.ocd-sev-major{color:var(--hl-amber);background:color-mix(in srgb,var(--hl-amber) 12%,transparent)}
.ocd-age{font-size:11px;color:var(--m-40);font-variant-numeric:tabular-nums}
.ocd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.ocd-btn{background:var(--magenta);color:#0a0a0a;border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}
.ocd-btn.ghost{background:rgba(255,255,255,0.06);color:var(--text);border:1px solid var(--line-2)}
@media(max-width:760px){
  .ops-grid{grid-template-columns:1fr}
  .ml-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){.ml-strip{grid-template-columns:1fr}}

/* activity log */
.act-open{width:100%;text-align:left;background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:14px;padding:13px 16px;color:var(--m-55);font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:20px;transition:background .18s var(--ease)}
@media(hover:hover){.act-open:hover{background:rgba(255,255,255,0.07);color:var(--text)}}
.act-filters{display:flex;flex-direction:column;gap:12px;padding:0 2px 14px;border-bottom:1px solid var(--line)}
.act-chips{display:flex;flex-wrap:wrap;gap:8px}
.act-chip{background:rgba(255,255,255,0.05);border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--m-50);cursor:pointer}
.act-chip.on{background:rgba(255,20,100,0.14);border-color:rgba(255,20,100,0.3);color:var(--pink)}
.act-day{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin:18px 0 10px;position:sticky;top:0;background:#121212;padding:4px 0}   /* matches the .modal it scrolls inside — var(--card) painted a darker bar */
.act-day:first-child{margin-top:6px}
.act-list{display:flex;flex-direction:column}
.act-row{display:flex;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line)}
.act-ic{flex:none;font-size:15px;line-height:1.4;width:20px;text-align:center}
.act-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.act-text{font-size:13.5px;color:var(--text);line-height:1.35}
.act-text b{font-weight:600}
.act-meta{font-size:11.5px;color:var(--m-40);font-variant-numeric:tabular-nums}
.act-k-issue_raised .act-ic,.act-k-fault_raised .act-ic,.act-k-incident .act-ic{filter:none}
.act-k-incident{background:rgba(255,69,58,0.05)}
.act-more{margin:16px auto 4px;display:block}
.act-end{text-align:center;font-size:12px;color:var(--m-40);padding:16px 0 6px}

/* manager home — the shop dashboard as a full page (not a modal) */
.mgh-page{max-height:none;overflow:visible;padding:0}
.mgh-lists{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:4px}

/* collapsible checklist sections + Up next (staff declutter) */
.list-div-btn{width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.div-chev{display:inline-flex;flex:none;width:14px;height:14px;color:var(--m-40);transition:transform .18s var(--ease);transform:rotate(-90deg)}
.div-chev.open{transform:rotate(0deg)}
.div-chev svg{width:14px;height:14px}
.div-lbl{flex:1;min-width:0}
/* ===== redesign (Jul 2026): slim header + the ONE "Up Next" hero card ===== */
/* slim title row + one quiet motivator chip */
.headrow-slim{align-items:flex-start;gap:14px;margin-bottom:14px}
.h1-slim{font-size:25px}
.trophy-chip{flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:11.5px;font-weight:600;color:var(--gold-2,#ffd479);
  background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.3);border-radius:999px;padding:6px 11px;margin-top:2px}

/* the slim progress strip (replaces the big ring + banners) */
.progstrip{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:14px}
/* Wraps since v6.12.0: the right-hand side used to be a fixed "12 of 75 done"
   and is now a sentence ("2 due this afternoon · 25 done · 2 missed"), which at
   375px doesn't fit beside the label. It drops to its own line rather than
   spilling out of the strip. */
.progstrip-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin-bottom:9px}
.progstrip-top .ps-l{font-size:13px;font-weight:600;color:var(--m-55);min-width:0}
.progstrip-top .ps-r{font-size:13px;font-weight:600;color:var(--m-55);font-variant-numeric:tabular-nums;min-width:0;margin-left:auto}
.progstrip-top .ps-r b{color:var(--text);font-weight:700}
.pbar{height:8px;border-radius:99px;background:rgba(255,255,255,0.06);overflow:hidden}
.pbar-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--magenta));box-shadow:0 0 10px rgba(255,20,100,0.5);transition:width .4s var(--ease)}
.pbar-fill.full{background:var(--hl-green)}

/* the ONE hero card — your next task, always populated */
.nextcard{background:linear-gradient(180deg,rgba(255,20,100,0.09),rgba(255,20,100,0.02));border:1px solid rgba(255,20,100,0.34);border-radius:16px;padding:14px 15px;margin-bottom:16px}
.nextcard-l{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pink);margin:0 0 10px}
.upnext-hero{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;color:var(--text);padding:0}
.uh-name{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.25}
.uh-meta{flex:none;display:inline-flex;align-items:center;gap:8px}
.uh-cam{display:inline-flex;color:var(--m-55)}
.uh-cam svg{width:15px;height:15px}
.nextcard-then{font-size:12.5px;color:var(--m-55);margin:10px 0 0;padding-left:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextcard-then b{color:var(--m-70,rgba(245,245,247,0.74));font-weight:600}
/* calmer tiers: no timed pressure → quiet accent, not magenta */
.nextcard-anytime,.nextcard-week,.nextcard-month{background:rgba(255,255,255,0.03);border-color:var(--line-2)}
.nextcard-anytime .nextcard-l,.nextcard-week .nextcard-l,.nextcard-month .nextcard-l{color:var(--m-55)}
/* all-caught-up */
.nextcard-caught{background:linear-gradient(180deg,rgba(48,209,88,0.1),rgba(48,209,88,0.02));border-color:rgba(48,209,88,0.3)}
.nextcard-caught .nextcard-l{color:var(--hl-green)}
.uh-caught{display:flex;flex-direction:column;gap:3px}
.uh-caught-h{font-size:16px;font-weight:600}
.uh-caught-s{font-size:12.5px;color:var(--m-55)}

/* the chip inside the hero (reused from the old up-next strip) */
.upnext-chip{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:8px;white-space:nowrap}
.upnext-chip svg{width:11px;height:11px}
.upnext-soon{color:var(--m-55);background:rgba(255,255,255,0.05);border:1px solid var(--line-2)}
.upnext-late{color:var(--amber);background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.25)}
.upnext-recover{color:var(--hl-red);background:color-mix(in srgb,var(--hl-red) 10%,transparent);border:1px solid color-mix(in srgb,var(--hl-red) 30%,transparent)}
.upnext-anytime{color:var(--pink);background:rgba(255,20,100,0.1);border:1px solid rgba(255,20,100,0.25)}
.upnext-week,.upnext-month{color:var(--m-55);background:rgba(255,255,255,0.05);border:1px solid var(--line-2)}

/* folded morning handover — one tappable line */
.ho-fold{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(217,162,58,0.06);border:1px solid rgba(217,162,58,0.22);border-radius:12px;padding:11px 13px;margin-bottom:16px;cursor:pointer;font:inherit;color:var(--text)}
@media(hover:hover){.ho-fold:hover{background:rgba(217,162,58,0.1)}}
.ho-fold-i{flex:none;font-size:14px}
.ho-fold-t{flex:1;min-width:0;font-size:12.5px;color:var(--m-55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-fold-t b{color:var(--gold-2,#ffd479);font-weight:600}
.ho-fold-chev{flex:none;color:var(--m-40);display:inline-flex}
.ho-fold-chev svg{width:15px;height:15px}

/* ---------- AI photo review deck (Mitchell) ---------- */
.pd-modal{max-width:440px}
.pd-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--magenta);color:#0a0a0a;font-size:12px;font-weight:800;vertical-align:middle;margin-left:6px}
.pd-body{padding:4px 2px}
.pd-count{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m-40);text-align:center;margin-bottom:10px}
.pd-imgwrap{border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line-2);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  position:relative;width:100%;padding:0;cursor:zoom-in}   /* one definition — a duplicate further down used to strip the black letterbox + border */
.pd-img{width:100%;height:100%;object-fit:contain;display:block}
.pd-img-load{color:var(--m-40);font-size:13px}
.pd-meta{margin:14px 2px 0;text-align:center}
.pd-task{font-size:18px;font-weight:600;letter-spacing:-0.01em}
.pd-sub{font-size:13px;color:var(--m-45);margin-top:4px}
.pd-ai{margin-top:10px;font-size:12.5px;color:var(--amber);background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.22);border-radius:10px;padding:8px 12px;display:inline-block}
.pd-note{width:100%;margin-top:14px;background:rgba(255,255,255,0.05);border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;color:var(--text);font:inherit;font-size:16px;resize:none}   /* 16px: stops iOS focus-zoom */
.pd-note:focus{outline:none;border-color:rgba(255,255,255,0.25)}
.pd-actions{display:flex;gap:12px;margin-top:14px}
.pd-btn{flex:1;border:0;border-radius:14px;padding:16px 12px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:transform .12s var(--ease),filter .12s var(--ease)}
.pd-btn:active{transform:scale(.97)}
.pd-btn:disabled{opacity:.55;cursor:default}
.pd-decline{background:color-mix(in srgb,var(--hl-red) 16%,transparent);color:var(--hl-red);border:1px solid color-mix(in srgb,var(--hl-red) 38%,transparent)}
.pd-approve{background:var(--hl-green);color:#062a12}
.pd-suppress{width:100%;margin-top:10px;min-height:44px;background:none;border:1px dashed var(--line-2);border-radius:12px;
  color:var(--m-55);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}
@media (hover:hover){ .pd-suppress:hover{border-color:rgba(255,255,255,0.22);color:var(--text)} }
.pd-suppress:disabled{opacity:.5;cursor:default}
.pd-empty{padding:34px 16px;text-align:center;color:var(--m-45);font-size:14px}
.pd-clear-tick{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:color-mix(in srgb,var(--hl-green) 16%,transparent);color:var(--hl-green);font-size:30px;display:flex;align-items:center;justify-content:center}
.pd-clear-h{font-size:20px;font-weight:600;color:var(--text)}
.pd-clear-s{font-size:13.5px;color:var(--m-45);margin:8px auto 0;max-width:300px;line-height:1.5}
.pd-doneb{margin-top:20px}

/* morning quote — a warm line to open the day (till 9am) */
.mq{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,rgba(255,20,100,0.08),rgba(255,94,148,0.04));border:1px solid rgba(255,20,100,0.16);border-radius:18px;padding:18px 20px;margin-bottom:18px}
.mq-mark{font-family:Georgia,serif;font-size:40px;line-height:.7;color:var(--pink);flex:none;margin-top:6px}
.mq-text{font-size:16px;font-weight:500;line-height:1.45;letter-spacing:-0.01em;color:var(--text);align-self:center}

/* re-open a dismissed handover */
.ho-reopen{display:inline-flex;align-items:center;gap:6px;background:rgba(217,162,58,0.06);border:1px solid rgba(217,162,58,0.2);border-radius:999px;padding:6px 12px;color:var(--amber);font:inherit;font-size:12px;font-weight:600;cursor:pointer;margin-bottom:16px}
@media(hover:hover){.ho-reopen:hover{background:rgba(217,162,58,0.1)}}

/* Bella's daily insights (owner command centre) */
.bi{background:linear-gradient(135deg,rgba(255,20,100,0.07),rgba(255,94,148,0.03));border:1px solid rgba(255,20,100,0.18);border-radius:20px;padding:20px;margin-bottom:26px}
.bi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bi-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px}
.bi-face{font-size:20px}
.bi-refresh{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2);background:rgba(255,255,255,0.05);color:var(--text);font-size:15px;cursor:pointer}
.bi-refresh:disabled{opacity:.5;cursor:default}
.bi-load{font-size:13.5px;color:var(--m-45);padding:8px 2px}
.bi-cards{display:flex;flex-direction:column;gap:10px}
.bi-card{background:rgba(255,255,255,0.035);border:1px solid var(--line);border-left:3px solid var(--m-40);border-radius:12px;padding:12px 15px}
.bi-card-t{font-size:14px;font-weight:600;margin-bottom:3px}
.bi-card-d{font-size:13px;color:var(--m-55);line-height:1.45}
.bi-good{border-left-color:var(--hl-green)}
.bi-watch{border-left-color:var(--hl-amber)}
.bi-bad{border-left-color:var(--hl-red)}
.bi-info{border-left-color:var(--pink)}
.bi-when{font-size:11px;color:var(--m-40);margin-top:12px;text-align:right}

/* shop weather strip (manager dashboard) */
.wx{background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;margin-bottom:4px}
.wx-load{color:var(--m-40);font-size:12.5px}
.wx-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.wx-row{display:flex;gap:6px;justify-content:space-between}
.wx-cell{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:12px;padding:9px 4px}
.wx-t{font-size:11px;color:var(--m-45);font-variant-numeric:tabular-nums}
.wx-ic{font-size:19px;line-height:1}
.wx-temp{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.wx-rain{font-size:10px;font-weight:600;color:#4da3ff;min-height:12px}
.wx-rain.wx-dry{color:transparent}

/* Quarterly Cup — staff banner (blind) */
.cup-banner{background:linear-gradient(135deg,rgba(217,162,58,0.12),rgba(255,20,100,0.06));border:1px solid rgba(217,162,58,0.28);border-radius:16px;padding:14px 16px;margin:0 0 16px}
.cup-banner.cup-lead{background:linear-gradient(135deg,rgba(217,162,58,0.2),rgba(255,20,100,0.1));border-color:rgba(217,162,58,0.45)}
.cup-main{display:flex;align-items:center;gap:10px}
.cup-ic{font-size:18px;flex:none}
.cup-txt{font-size:13.5px;font-weight:500;line-height:1.4}
.cup-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-left:28px}
.cup-chip{font-size:11.5px;font-weight:600;color:var(--m-55);background:rgba(255,255,255,0.06);border:1px solid var(--line-2);border-radius:999px;padding:4px 10px}
.cup-chip.cup-prize{color:var(--amber);background:rgba(217,162,58,0.12);border-color:rgba(217,162,58,0.3)}

/* Quarterly Cup — owner panel */
.cupo{background:rgba(217,162,58,0.05);border:1px solid rgba(217,162,58,0.22);border-radius:20px;padding:20px;margin-bottom:26px}
.cupo-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cupo-title{font-size:17px;font-weight:700;letter-spacing:-0.01em}
.cupo-days{font-size:11.5px;color:var(--m-40)}
.cupo-prize{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--m-55);margin-bottom:16px;flex-wrap:wrap}
.cupo-prize b{color:var(--amber)}
.cupo-prize .viewlink{margin-left:auto}
.cupo-prize-editing{gap:8px}
.cupo-prize-input{flex:1;min-width:160px}
.cupo-table{display:flex;flex-direction:column;gap:8px}
.cupo-row{display:flex;align-items:center;gap:12px}
.cupo-pos{flex:none;width:26px;font-size:15px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--m-50)}
.cupo-name{flex:0 0 auto;min-width:96px;font-size:14px;font-weight:600}
.cupo-lead .cupo-name{color:var(--amber)}
.cupo-bar{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden;min-width:40px}
.cupo-fill{display:block;height:100%;border-radius:6px;background:var(--amber)}
.cupo-lead .cupo-fill{background:linear-gradient(90deg,#e0a63e,#ffd479)}
.cupo-pct{flex:none;width:44px;text-align:right;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.cupo-actions{margin-top:16px}
.cupo-hof{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cupo-hof-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.cupo-hof-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 0;color:var(--m-55)}
.cupo-hof-row b{color:var(--text)}
.cupo-hof-q{flex:none;width:70px;color:var(--m-40)}
.cupo-hof-prize{margin-left:auto;font-size:11.5px;color:var(--m-40)}

/* zoomable image viewer */
.zoom-ovl{background:rgba(0,0,0,0.94);display:flex;align-items:center;justify-content:center;padding:0;touch-action:none;z-index:600}   /* ABOVE the navtop (500): the ✕ must never sit under the bar / the Help panic button */
.zoom-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:zoom-in}
.zoom-img{max-width:100%;max-height:100%;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.zoom-close{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.zoom-bar{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px;background:rgba(20,20,20,0.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);border-radius:999px;padding:6px}
.zoom-btn{min-width:44px;height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,0.1);border:0;color:#fff;font:inherit;font-size:18px;font-weight:700;cursor:pointer}
.zoom-btn.zoom-reset{font-size:13px;font-weight:600}
.zoom-hint{position:absolute;bottom:calc(84px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:rgba(255,255,255,0.5);font-size:11.5px;z-index:1;pointer-events:none}
.tm-head-actions{display:flex;align-items:center;gap:14px}
.pd-zoom-hint{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,0.6);color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:8px;pointer-events:none}

/* deep-clean hours panel */
.dch{background:rgba(255,20,100,0.05);border:1px solid rgba(255,20,100,0.16);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.dch-top{display:flex;align-items:flex-start;gap:11px}
.dch-ic{font-size:18px;flex:none;line-height:1.2}
.dch-txt{min-width:0}
.dch-h{font-size:14px;font-weight:600}
.dch-sub{font-size:12.5px;color:var(--m-50);margin-top:2px}
.dch-sub b{color:var(--text)}
.dch-help{font-size:12px;color:var(--m-45);line-height:1.45;margin:10px 0 12px}
.dch-btn{background:var(--magenta);color:#0a0a0a;border:0;border-radius:11px;padding:11px 16px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;width:100%}
.dch-done{display:flex;align-items:center;gap:11px;background:rgba(48,209,88,0.06);border-color:rgba(48,209,88,0.2)}
.dch-done .dch-ic{color:var(--hl-green)}
.bh-last{font-size:13px;color:var(--m-55);background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:14px}
.bh-last b{color:var(--text)}
.bh-help{font-size:12px;color:var(--m-45);line-height:1.45;margin-top:9px}
.bh-warn{font-size:12.5px;line-height:1.45;color:var(--hl-amber);background:color-mix(in srgb,var(--hl-amber) 9%,transparent);border:1px solid color-mix(in srgb,var(--hl-amber) 28%,transparent);border-radius:10px;padding:9px 12px;margin-top:12px}
.bh-warn b{color:inherit}
/* The SalonTracker-sourced beds (Spennymoor 6 and 7) get the same box in a neutral
   tone — it's an instruction, not a warning; the amber one tells you NOT to use
   SalonTracker, and on these two beds that would be exactly the wrong advice. */
.bh-warn.bh-warn-st{color:var(--m-45);background:rgba(255,255,255,0.05);border-color:var(--line-2)}

/* handover feedback */
.ho-fb{margin-top:14px;width:100%;text-align:left;background:rgba(255,255,255,0.045);border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;color:var(--m-55);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
@media(hover:hover){.ho-fb:hover{background:rgba(255,255,255,0.08);color:var(--text)}}
.nf-desktop{font-size:12.5px;color:var(--m-45);background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin:2px 0 4px}
.nf-item-kind{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.nf-kind-ho{color:var(--pink);background:rgba(255,20,100,0.12);border:1px solid rgba(255,20,100,0.24)}
.nf-item-meta{margin-top:3px}
.nf-item-from{font-size:12px;color:var(--m-45);font-weight:600}
.nf-item-from.anon{opacity:.7;font-style:italic}

/* ---------- footer ---------- */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:18px 6px 0;color:var(--m-40);font-size:12.5px
}
.foot-left{display:flex;align-items:center;gap:10px}
.foot-ver{opacity:.5;letter-spacing:.02em;font-variant-numeric:tabular-nums}   /* subtle build tag */
.net-dot{width:9px;height:9px;border-radius:50%;background:#3ad07a;box-shadow:0 0 0 3px rgba(58,208,122,.15)}
.net-dot.offline{background:#8d8580;box-shadow:0 0 0 3px rgba(141,133,128,.15)}
.foot-right{display:flex;align-items:center;gap:14px}
/* Tap target ≥44px (WCAG) without shifting layout: the negative margin cancels the
   extra padding so the visual position is unchanged, only the hit area grows. */
.viewlink{background:none;border:0;color:var(--pink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:12px 10px;min-height:44px;margin:-8px -6px;display:inline-flex;align-items:center;vertical-align:middle}
.install-btn{background:var(--magenta);color:#0a0a0a;border:0;border-radius:999px;padding:8px 15px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}

/* ---------- login ---------- */
.login{min-height:82vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{
  position:relative;width:100%;max-width:440px;background:var(--card);text-align:center;
  border:1px solid rgba(255,255,255,0.07);border-radius:28px;
  box-shadow:0 40px 130px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.04);padding:40px 34px
}
.login-brand{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-bottom:20px}
.login-brand .brand{font-size:28px}
.login-ops{font-size:15px;font-weight:600;color:var(--m-50);letter-spacing:.02em}
.login-h{font-size:22px;font-weight:600;letter-spacing:-0.02em}
.login-note{font-size:13.5px;color:var(--m-45);margin:8px auto 0;line-height:1.5;max-width:340px}
.login-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--m-40);margin:26px 0 12px}
.tile-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tile{
  display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;justify-content:center;
  flex:1 1 128px;max-width:180px;min-height:64px;
  padding:16px;border-radius:16px;cursor:pointer;font:inherit;color:var(--text);min-width:0;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);
  transition:border-color .2s var(--ease),background .2s var(--ease)
}
@media (hover:hover){ .tile:hover{border-color:rgba(255,20,100,0.5);background:rgba(255,20,100,0.06)} }
.tile-name{font-size:15px;font-weight:600}
.tile-sub{font-size:11px;color:var(--m-40);letter-spacing:.03em}
/* emergency help sits at the bottom, centred — always reachable, never crowding the wordmark */
.login-help-row{display:flex;justify-content:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.login-help{margin:0!important}

/* ---------- staff cover (working a shop your device isn't set up for) ---------- */
.login-cover{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.login-cover-btn{font-size:14px;font-weight:600}
.login-cover-note{font-size:12px;color:var(--m-40);margin:6px auto 0;line-height:1.45;max-width:320px}
/* B19 — verbatim UK GDPR / monitoring notice at the point of collection (sign-in). */
.login-legal{font-size:11px;color:var(--m-40);margin:22px auto 0;padding-top:16px;border-top:1px solid var(--line);line-height:1.5;max-width:340px;text-align:center}
.pin-cover-link{display:block;margin:14px auto 2px;font-size:13.5px}
/* amber, to read as "temporary / covering" — distinct from the pink brand actions */
.cover-pill{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#f0b429;padding:5px 11px;border-radius:999px;background:rgba(240,180,41,0.12);border:1px solid rgba(240,180,41,0.3);white-space:nowrap}
.chrome-signin.cover-end{background:transparent;color:var(--m-50);border:1px solid var(--line);font-weight:600}

/* ---------- manager bits ---------- */
.mgr-pill{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);padding:5px 11px;border-radius:999px;background:rgba(255,20,100,0.1);border:1px solid rgba(255,20,100,0.22);white-space:nowrap}
.shop.shop-locked{cursor:default}
.chip-ro{cursor:default}
.chip-ro:hover{border-color:rgba(255,255,255,0.07)}
.foot-who{color:var(--m-45)}
.shopcard-btn{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;display:block}
.shopcard-btn:hover{border-color:rgba(255,20,100,0.4);background:rgba(255,255,255,0.05)}
.shopcard-cta{margin-top:18px;font-size:12.5px;font-weight:600;color:var(--pink)}
/* open shop-issue / sunbed-fault heads-up on an owner shop card */
.shopcard-alert{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 11px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--amber);background:rgba(217,162,58,0.12);border:1px solid rgba(217,162,58,0.3)}
.shopcard-alert svg{width:13px;height:13px;flex:none}
/* owner hub "N open issues · M faults — view →" jump under the shop cards */
.lb-jump{display:flex;align-items:center;gap:9px;width:100%;margin-top:16px;padding:13px 16px;border-radius:14px;
  background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.3);color:var(--amber);
  font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
.lb-jump svg{width:15px;height:15px;flex:none}

/* dashboard per-shop day/week/month bars */
.dstats{display:flex;flex-direction:column;gap:13px;margin-top:6px}
.dstat{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:12px}
.dstat-lbl{font-size:12.5px;color:var(--m-55)}
.dstat-bar{height:7px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden}
.dstat-fill{display:block;height:100%;border-radius:999px;background:var(--magenta);transition:width .3s ease}
.dstat-fill.full{background:#3ad07a}
.dstat-num{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}

/* back to dashboard from a shop (overseers) */
.chrome-back{background:none;border:0;color:var(--pink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:11px 8px;margin:-8px -6px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}

/* small segmented control (dashboard month toggle + leaderboard period) */
.seg-sm{padding:3px}
.seg-sm .seg-btn{padding:7px 13px;font-size:12.5px}

/* leaderboard */
.lb{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.lb-h{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:0}
.lb-sub{font-size:12px;font-weight:500;color:var(--m-45);letter-spacing:.01em;margin-left:6px}
.lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lb-row{display:grid;grid-template-columns:24px 1fr 100px auto;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:0}
.lb-rank{font-size:13px;font-weight:700;color:var(--m-45);text-align:center;font-variant-numeric:tabular-nums}
.lb-rank.top{color:var(--pink)}
.lb-name{font-size:14.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-bar{height:7px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden}
.lb-fill{display:block;height:100%;border-radius:999px;background:var(--magenta)}
.lb-count{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;min-width:28px;text-align:right}

/* ---------- confirm modal ---------- */
/* The overlay itself scrolls (overflow-y:auto) and the modal centres via
   margin:auto — so a modal taller than the screen starts at its TOP and the
   whole sheet scrolls, instead of clipping at both ends (the old
   align-items:center overflow trap). overscroll-behavior:contain stops a
   backdrop drag/wheel from scrolling the page underneath (scroll bleed). */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(4,4,4,0.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;padding:20px;padding-top:calc(66px + env(safe-area-inset-top));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal{width:100%;max-width:380px;margin:auto;background:#121212;border:1px solid var(--line-2);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,0.7);padding:24px}
/* NO POP-UP MAY CLIP ITS OWN CONTENT (Mitchell, 26 Jul: "the writing is running off
   the bottom of the grey pop-up box... happening in most of the pop-up boxes").
   Cause: the capped variants (.sb-modal/.tm-modal/.te-modal) set max-height with
   display:flex but no child could scroll, so a long list overflowed the rounded box
   and the tail was unreachable. Fix = cap EVERY modal to the space the overlay
   actually leaves (its own 66px top + 20px bottom padding) and let it scroll; give
   flex children min-height:0 so an inner list shrinks instead of spilling. This only
   engages when content is genuinely too tall, so short modals are untouched.
   NB the cap is written as `.modal-overlay>.modal` on purpose: the per-modal
   variants below (88/90/92vh) and the mobile svh overrides come LATER in this file,
   so a plain `.modal` rule would lose on source order. Two classes outrank one. */
.modal-overlay>.modal{max-height:calc(100dvh - 86px - env(safe-area-inset-top));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* These variants are column flexboxes with a max-height. Children must NOT shrink
   below their content (the default flex-shrink:1 + min-height:0 crushed every child
   flat and the text overlapped — the broken Staff screen, 28 Jul). Instead the modal
   itself scrolls (overflow-y:auto above). Only the designated inner scrollers
   (.tm-list / .te-body / .te-form) may shrink, and they scroll themselves. */
.sb-modal>*,.tm-modal>*,.te-modal>*{flex-shrink:0}
.tm-modal>.tm-list,.te-modal>.te-body,.te-modal>.te-form{flex-shrink:1;min-height:0}
/* The Close button must stay reachable while the body scrolls under it. The negative
   margins + matching padding make the sticky header cover the modal's own top
   padding, otherwise scrolled content shows through that band ABOVE the title.
   Margin must match each modal's padding: 24px default, 22px for tm-/te-modal.
   Sticky top must be NEGATIVE by that same padding: top:0 pins to the content box,
   which sits 24px below the modal's edge and leaves a see-through band. */
.modal>.te-head{position:sticky;top:-24px;z-index:3;background:#121212;
  margin:-24px -24px 10px;padding:24px 24px 10px;border-radius:20px 20px 0 0}
.tm-modal>.te-head,.te-modal>.te-head{top:-22px;margin:-22px -22px 10px;padding:22px 22px 10px}
/* NB: no entrance animation on .modal/.modal-overlay — several modals (the PIN pad,
   Bella, the grid) re-render themselves on every interaction, which would replay the
   animation and make them visibly flicker/"flick off" on each keypress. */
.modal-title{font-size:18px;font-weight:600;letter-spacing:-0.01em}
.modal-body{font-size:13.5px;color:var(--m-55);margin-top:10px;line-height:1.5}
.modal-body strong{color:var(--text);font-weight:600}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.btn-ghost{background:none;border:1px solid var(--line-2);color:var(--text);border-radius:11px;padding:10px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn-primary{background:var(--magenta);border:0;color:#0a0a0a;border-radius:11px;padding:10px 18px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}

/* ---------- focus (quality floor) ---------- */
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.task:focus-visible{outline-offset:-2px}
:focus:not(:focus-visible){outline:none}
/* A modal's container is focused programmatically on open (moves keyboard focus
   into the dialog for a11y) — it must never paint a visible ring itself. */
.modal:focus,.modal:focus-visible,[role="dialog"]:focus,[role="dialog"]:focus-visible{outline:none}

/* ---------- responsive (manager view on phones + laptops) ---------- */
@media (max-width:1000px){
  .stage{padding:28px 20px 40px}
  .body{padding:28px 24px 30px}
  .h1{font-size:27px}
  .shops{grid-template-columns:1fr;gap:14px}
}
@media (max-width:600px){
  .stage{padding:18px 12px 32px}
  .card{border-radius:22px}
  .body{padding:22px 18px 26px}
  .chrome{padding:0 18px}
  .chrome-meta{display:none}
  .shop-menu{left:14px}   /* the wordmark + divider are hidden here, so the shop name starts at the left edge */
  .shiftbar{flex-direction:column;align-items:flex-start;gap:12px}
  .headrow{flex-direction:row}
  .h1{font-size:23px}
  .ring{transform:scale(.86);transform-origin:right center}
  .seg-btn{padding:9px 16px}
  .task{padding:15px 16px;gap:13px}
  .task-name{font-size:14.5px}
}
/* Phones: keep the top content below the status bar / notch (black-translucent
   means the page paints under it). Nothing fixed lives at the bottom any more
   (the bubble-nav + floating Bella are retired) — just home-indicator clearance. */
@media (max-width:759.98px){
  .stage{
    padding-top:calc(70px + env(safe-area-inset-top));   /* clear the fixed mobile top bar (52px + breathing room) */
    padding-bottom:calc(36px + env(safe-area-inset-bottom));
  }
  .stage.has-view-pill{padding-top:calc(112px + env(safe-area-inset-top))}   /* also clear the floating "Viewing X" pill */
}
@media (max-width:520px){
  .tile-grid{display:grid;grid-template-columns:1fr 1fr}   /* was grid-template on a flex box — a no-op, so tiles stacked one per row on phones */
  .tile{max-width:none}
  .login-card{padding:28px}
  .login-h{font-size:20px}
}
/* ---------- "Viewing as" / shop-preview pill ---------- */
/* Sits BELOW the fixed top bar (mobile ~52px); the desktop override drops it a
   touch lower for the taller 58px bar. Must clear the bar so GLOW. stays tappable. */
.va-bar{position:fixed;top:calc(60px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9800;
  max-width:calc(100% - 16px);   /* narrow phones: a long name must squeeze, not shove Exit off-screen */
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-radius:999px;white-space:nowrap;
  background:rgba(16,10,14,0.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,20,100,0.45);color:var(--text);font-size:13px;font-weight:600;
  box-shadow:0 6px 24px rgba(0,0,0,0.5)}
.va-bar b{color:var(--pink)}
.va-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* the label gives way; Exit never leaves the screen */
.va-exit{border:0;border-radius:999px;padding:6px 13px;min-height:32px;background:var(--magenta);color:#0a0a0a;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
@media (min-width:760px){
  .va-bar{top:calc(58px + env(safe-area-inset-top) + 12px)}   /* clear the fixed desktop navtop — never cover its tabs */
  .stage.has-view-pill{padding-top:calc(126px + env(safe-area-inset-top))}
}
/* (.navtip — the "Tap GLOW. to get home" callout — was removed on 3 Aug along
   with the code behind it: the home ICON in the top bar teaches the same thing
   permanently, and the callout was covering the shop row while it taught.) */

/* ---------- write-auth: PIN sign-in bar, read-only rows, PIN pad ---------- */
.authbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,0.03);border:1px solid var(--line-2)
}
.authbar.authed{background:rgba(255,20,100,0.06);border-color:rgba(255,20,100,0.22)}
.authbar-txt{font-size:13px;font-weight:500;color:var(--m-55);display:inline-flex;align-items:center;gap:9px}
.authbar.authed .authbar-txt{color:var(--text)}
.authbar-txt b{font-weight:700}
.authbar-dot{width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 8px rgba(255,20,100,0.6);flex:none;animation:livePulse 2.6s ease-in-out infinite}
.authbar-signin{padding:9px 16px}
.authbar-actions{display:inline-flex;gap:8px;flex-wrap:wrap}
.authbar-btn{background:none;border:1px solid var(--line-2);color:var(--m-55);font:inherit;font-size:12.5px;font-weight:600;border-radius:10px;padding:8px 14px;cursor:pointer}
.authbar-btn:hover{border-color:rgba(255,255,255,0.2);color:var(--text)}

/* task "more info" */
.task-wrap{display:flex;flex-direction:column}
.task-row{display:flex;align-items:stretch;gap:9px;min-width:0}
/* min-width:0 matters: a flex item defaults to min-width:auto, i.e. it refuses
   to shrink below its own content. A row carrying BOTH trailing 54px buttons
   (ⓘ and view-photo) has ~200px left for the task on a 375px phone, and without
   this the button just pushed out past the card edge instead of giving way. */
.task-row .task{flex:1;min-width:0}
.task-info{
  flex:none;width:54px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.055);
  color:var(--m-45);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease
}
/* Phones: 44px, the smallest target that's still accessible. A row can carry two
   of these (ⓘ and view-photo) and it's a sub-task parent, which also spends 28px
   on the check circle and 22px on the chevron — that left the task name 77px.
   The 20px this gives back is the difference between a readable chip and a
   seven-line sliver. */
@media (max-width:520px){ .task-info{width:44px} }
.task-info:hover{border-color:rgba(255,255,255,0.16);color:var(--text)}
.task-info.open{background:rgba(255,20,100,0.08);border-color:rgba(255,20,100,0.3);color:var(--pink)}
.task-detail{
  margin-top:8px;padding:14px 18px;border-radius:13px;
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);
  color:var(--m-55);font-size:13.5px;line-height:1.55;white-space:pre-wrap
}
/* The full task name, when the row is showing a short title (item 9). Brighter
   than the note below it — this is the instruction, not the footnote. */
.task-detail-full{display:block;color:var(--text);font-weight:600;margin-bottom:6px}
.task-detail-full:only-child{margin-bottom:0}
/* B5 sub-steps — a nested checklist beneath a container task */
.sub-count{display:inline-flex;align-self:flex-start;align-items:center;padding:2px 9px;border-radius:8px;flex:none;
  background:rgba(255,20,100,0.1);border:1px solid rgba(255,20,100,0.22);
  font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--pink)}
.subtasks{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px 13px;padding-left:14px;
  border-left:2px solid rgba(255,255,255,0.07)}
.subtask{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:12px 16px;border-radius:13px;cursor:pointer;font:inherit;color:inherit;
  background:rgba(255,255,255,0.018);border:1px solid rgba(255,255,255,0.045);
  transition:background .25s ease,border-color .25s ease
}
.subtask:hover{border-color:rgba(255,255,255,0.12)}
.subtask.done{background:rgba(255,20,100,0.045);border-color:rgba(255,20,100,0.13)}
.subtask.task-ro{cursor:default}
.sub-check{
  width:23px;height:23px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,0.22);background:transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease
}
.sub-check svg{opacity:0;width:13px;height:13px}
.subtask.done .sub-check{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 14px rgba(255,20,100,0.45)}
.subtask.done .sub-check svg{opacity:1}
.sub-name{font-size:14px;font-weight:500;letter-spacing:-0.005em;color:var(--text);transition:color .25s ease;min-width:0}
.subtask.done .sub-name{color:var(--m-50)}
/* a sub-step with a drop-down instruction note (ⓘ) */
.sub-item{display:flex;flex-direction:column}
.sub-line{display:flex;align-items:stretch;gap:8px}
.sub-line .subtask{flex:1}
.sub-info{
  flex:none;width:44px;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,0.018);border:1px solid rgba(255,255,255,0.045);
  color:var(--m-45);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease
}
.sub-info:hover{border-color:rgba(255,255,255,0.16);color:var(--text)}
.sub-info.open{background:rgba(255,20,100,0.08);border-color:rgba(255,20,100,0.3);color:var(--pink)}
.sub-detail{margin-top:6px;margin-bottom:2px;font-size:13px;padding:12px 15px}
.sub-detail a{color:var(--pink);font-weight:600;word-break:break-word}
.task-ro{cursor:default;opacity:.9}
.task-ro:hover{border-color:rgba(255,255,255,0.055)}
.task-ro .task-check{border-style:dashed}

.pin-modal{max-width:340px}
.pin-modal-pick{max-width:480px}
.pin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pin-search{width:100%;margin:10px 0 12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.05);color:var(--text);font:inherit;font-size:16px}   /* 16px: stops iOS focus-zoom */
.pin-search:focus{outline:none;border-color:rgba(255,20,100,0.5)}
.pin-people{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:52vh;overflow-y:auto;padding:2px 2px 4px;-webkit-overflow-scrolling:touch}
.pin-who{display:flex;flex-direction:column;gap:3px;align-items:center;margin:8px 0 18px;text-align:center}
.pin-who-name{font-size:18px;font-weight:600}
.pin-who-role{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--m-40)}
.pin-hint{margin:2px 0 16px;padding:11px 14px;border-radius:12px;background:rgba(255,20,100,0.08);border:1px solid rgba(255,20,100,0.18);color:var(--text);font-size:13px;line-height:1.45;text-align:center}
.pin-dots{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0}
.pin-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.28);transition:background .15s ease,border-color .15s ease}
.pin-dot.on{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 10px rgba(255,20,100,0.5)}
.pin-dots.err .pin-dot{border-color:rgba(217,162,58,0.6)}
.pin-note{min-height:18px;text-align:center;font-size:12.5px;color:var(--m-45);margin:12px 0 16px}
.pin-note.err{color:var(--amber)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pin-key{
  height:58px;border-radius:14px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.04);color:var(--text);font:inherit;font-size:22px;font-weight:500;cursor:pointer;
  transition:background .15s ease,border-color .15s ease
}
.pin-key:hover{background:rgba(255,255,255,0.08)}
.pin-key:active{background:rgba(255,20,100,0.16);border-color:rgba(255,20,100,0.4)}
.pin-key:disabled{opacity:.4;cursor:default}
.pin-key-blank{background:none;border:0;cursor:default}
.pin-key-fn{font-size:20px;color:var(--m-55)}

/* today's takings (owner + chosen managers) — inline card */
.rev-card{padding:24px 28px;margin-bottom:18px}
.rev-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rev-card-h{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1;margin:2px 0 0}
.rev-refresh{flex:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,0.04);color:var(--text);font-size:17px;cursor:pointer}
.rev-refresh:hover{border-color:rgba(255,255,255,0.2)}
.rev-refresh:disabled{opacity:.5;cursor:default}
.rev-list{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.rev-row{display:flex;align-items:baseline;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}
.rev-row:last-child{border-bottom:0}
.rev-shop{font-size:15px;font-weight:500;flex:1;min-width:0}
.rev-amt{font-size:16px;font-weight:700;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;flex:none;margin-left:auto}
.rev-amt.rev-none{color:var(--m-40);font-weight:500}
.rev-when{font-size:11.5px;color:var(--m-40);flex:none}
.rev-total{margin-top:6px;border-top:1px solid var(--line-2);border-bottom:0;padding-top:15px}
.rev-total .rev-shop{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--m-55)}
.rev-total .rev-amt{color:var(--pink)}
.rev-empty{padding:22px 4px;text-align:center;color:var(--m-45);font-size:13.5px}
.rev-stale{margin:2px 0 6px;padding:9px 13px;border-radius:10px;background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.25);color:var(--amber);font-size:12.5px}

/* revenue hero + trends */
.rev-hero{display:flex;align-items:baseline;gap:12px;margin-top:10px;flex-wrap:wrap}
.rev-hero-amt{font-size:34px;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1}
.rev-delta{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rev-delta.up{color:var(--hl-green)} .rev-delta.down{color:var(--hl-red)} .rev-delta.flat{color:var(--m-45)}
.rev-yesterday{font-size:12.5px;color:var(--m-45);margin-top:6px}
.rev-yesterday b{color:var(--m-55);font-weight:600;font-variant-numeric:tabular-nums}
.rev-spark{width:64px;height:20px;flex:none;color:var(--m-40);opacity:.9}
@media(max-width:520px){.rev-spark{display:none}}   /* cramped next to long names; the ▲▼ delta carries the trend */
.rev-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;min-width:0}
/* Narrow phones: the amount stays on line 1 next to the name; the "as of" +
   ▲▼ delta drop to their OWN right-aligned second line. Without this the nowrap
   delta forces the row wider than the screen and the £ overprints the shop name. */
@media(max-width:520px){
  .rev-row{flex-wrap:wrap;row-gap:4px}
  .rev-side{flex-basis:100%;flex-direction:row;justify-content:flex-end;align-items:baseline;gap:8px}
}
.rev-row .rev-shop{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.rev-shop-nm{font-size:15px;font-weight:500}
.rev-onsite{font-size:11.5px;font-weight:400;color:var(--m-40);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ocd-mini{background:rgba(255,255,255,0.06);border:1px solid var(--line-2);border-radius:7px;padding:2px 8px;font:inherit;font-size:11px;font-weight:600;color:var(--pink);cursor:pointer;vertical-align:middle}
.rev-more{margin-top:12px;width:100%;text-align:center;background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:12px;padding:12px 15px;color:var(--m-55);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .18s var(--ease)}
@media(hover:hover){.rev-more:hover{background:rgba(255,255,255,0.07);color:var(--text)}}
.rev-seg{margin-bottom:14px;width:100%;max-width:360px}
.rvc{width:100%;height:auto;display:block;margin:4px 0 10px}
.rvc-lbl{fill:rgba(245,245,247,0.55);font-size:11px;font-family:inherit}
.rvl-strip{display:flex;flex-wrap:wrap;gap:8px 18px;padding:4px 2px 14px;border-bottom:1px solid var(--line)}
.rvl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--m-55)}
.rvl b{color:var(--text);font-variant-numeric:tabular-nums}
.rvr{margin-top:14px}
.rvr-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.rvr-row{display:flex;align-items:center;gap:9px;font-size:13px;padding:6px 0;color:var(--m-55)}
.rvr-row b{color:var(--text);margin-left:auto;font-variant-numeric:tabular-nums}
.rvr-when{font-size:11.5px;color:var(--m-40);flex:none;width:52px;text-align:right}
.rvr-dot{width:9px;height:9px;border-radius:50%;flex:none}
.rvr-note{margin-top:16px;font-size:11.5px;color:var(--m-40);line-height:1.5}


/* auto-update bar */
.update-bar{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;
  background:var(--magenta);color:#0a0a0a;font-weight:700;font-size:13px;
  padding:11px 18px;border-radius:999px;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.5)}

/* =========================================================
   TASK CONTROL — owner manage tasks, approval inbox, requests
   ========================================================= */
/* owner hub controls */
.owner-controls{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.oc-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.04);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.oc-btn:hover{border-color:rgba(255,255,255,0.2)}
.oc-btn-inbox.has{border-color:rgba(255,20,100,0.4);background:rgba(255,20,100,0.08)}
.oc-btn-on{border-color:rgba(255,20,100,0.45);background:rgba(255,20,100,0.1);color:var(--pink)}
.inbox-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--magenta);color:#0a0a0a;font-size:12px;font-weight:800;line-height:1}

/* shared panel modal (manage tasks + inbox): taller, scrollable */
.tm-modal{max-width:440px;max-height:88vh;display:flex;flex-direction:column;padding:22px}
.tm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex:none}
.tm-controls{display:flex;gap:10px;margin-bottom:14px;flex:none}
.tm-select{flex:1;min-width:0}
.tm-add{flex:none;white-space:nowrap}
.tm-list{overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding:2px 2px 4px;margin:-2px}
.tm-empty{padding:26px 6px;text-align:center;color:var(--m-45);font-size:13.5px}
.tm-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  background:rgba(255,255,255,0.035);border:1px solid var(--line)}
.tm-row-main{flex:1;min-width:0}
.tm-row-label{font-size:14.5px;font-weight:500;line-height:1.3}
.tm-row-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.tm-freq{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--m-50)}
.tm-freq.tm-oneoff{color:var(--pink)}
.tm-badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--m-50);
  padding:3px 8px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid var(--line-2)}
.tm-badge-info{color:var(--pink);background:rgba(255,20,100,0.08);border-color:rgba(255,20,100,0.2)}
.tm-row-actions{display:flex;gap:6px;flex:none}
.tm-btn{background:none;border:1px solid var(--line-2);color:var(--text);border-radius:9px;padding:7px 11px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.tm-btn:hover{border-color:rgba(255,255,255,0.22)}
.tm-btn-del{color:var(--amber)}
.tm-btn-del:hover{border-color:rgba(217,162,58,0.4)}

/* add / edit form */
.te-modal{max-width:420px;max-height:90vh;display:flex;flex-direction:column;padding:22px}
.te-body{overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;margin:-2px;padding:2px}
.te-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--m-45);margin:16px 0 7px}
.te-label:first-child{margin-top:4px}
.te-opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--m-40)}
.te-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.05);color:var(--text);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.te-input:focus{outline:none;border-color:rgba(255,20,100,0.5)}
.te-textarea{resize:vertical;min-height:46px;line-height:1.45}
select.te-input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='rgba(245,245,247,0.45)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.te-seg{margin-top:0}
.te-recur-seg{margin-top:16px}
.te-check{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14.5px;color:var(--text);cursor:pointer}
.te-check input{width:20px;height:20px;accent-color:var(--magenta)}
.te-error{margin-top:14px;padding:10px 13px;border-radius:11px;background:rgba(217,162,58,0.1);
  border:1px solid rgba(217,162,58,0.28);color:var(--amber);font-size:13px}
/* compact form-modal header/body/actions — used by the sunbed + shop-issue
   report/resolve modals (were previously unstyled: classes didn't exist) */
.te-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex:none}
.te-title{font-size:18px;font-weight:600;letter-spacing:-0.01em}
.te-form{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;margin:-2px;padding:2px}
.te-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex:none}

/* approval inbox cards */
.inbox-card{padding:15px 16px;border-radius:15px;background:rgba(255,255,255,0.035);border:1px solid var(--line-2)}
.inbox-kind{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin-bottom:9px}
.inbox-kind-add{color:var(--pink);background:rgba(255,20,100,0.1);border:1px solid rgba(255,20,100,0.24)}
.inbox-kind-rm{color:var(--amber);background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.26)}
.inbox-task{font-size:16px;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
.inbox-detail{font-size:12.5px;color:var(--m-50);margin-top:5px}
.inbox-reason{font-size:13px;color:var(--m-55);margin-top:9px;line-height:1.45}
.inbox-by{font-size:12px;color:var(--m-40);margin-top:9px}
.inbox-where{display:flex;align-items:center;gap:10px;margin-top:13px;font-size:13px;color:var(--m-50)}
.inbox-where select{flex:1;min-width:0;font-size:15px;padding:9px 12px;padding-right:34px}
.inbox-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
.inbox-decline{color:var(--amber);border-color:rgba(217,162,58,0.3)}

/* staff: request a change */
.req-change{display:block;width:100%;margin-top:16px;padding:13px;border-radius:13px;
  border:1px dashed var(--line-2);background:none;color:var(--pink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.req-change:hover{border-color:rgba(255,20,100,0.4);background:rgba(255,20,100,0.04)}
.req-toast{background:#1a1a1a;color:var(--text);border:1px solid rgba(255,20,100,0.4)}

/* photo proof */
.photo-tag{color:var(--pink);background:rgba(255,20,100,0.08);border-color:rgba(255,20,100,0.22)}
.photo-tag svg{width:13px;height:13px}
.task-photo-btn{color:var(--pink)}
.task-photo-btn.task-info.open{}  /* no toggle state for the photo button */
/* B6.1: inline edit affordance for owners/managers — narrower + muted so it reads
   as an editor control, distinct from the pink info/photo buttons. */
.task-edit-btn{width:44px;color:var(--m-45)}
.task-edit-btn:hover{border-color:rgba(255,255,255,0.16);color:var(--text)}
.photo-modal{max-width:420px}
.photo-stage{margin:4px 0 2px;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;min-height:200px}
.photo-stage-wait{min-height:160px;color:var(--m-45);font-size:13.5px;background:rgba(255,255,255,0.03)}
.photo-shot{display:block;width:100%;max-height:62vh;object-fit:contain}
/* AI photo verdict chip */
.ai-chip{display:inline-flex;align-items:center;gap:4px;margin-top:7px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.01em;line-height:1.3;max-width:100%}
.ai-pass{color:rgba(120,200,150,0.85);background:rgba(80,200,140,0.08);border:1px solid rgba(80,200,140,0.22)}
.ai-flag,.ai-review{color:var(--amber);background:rgba(217,162,58,0.12);border:1px solid rgba(217,162,58,0.32)}
.ai-checking{color:var(--m-55);background:rgba(255,255,255,0.05);border:1px solid var(--line-2)}
.ai-spin{animation:ai-spin 0.8s linear infinite}
@keyframes ai-spin{to{transform:rotate(360deg)}}

/* ===== Bella — the GLOW assistant ===== */
.bella-av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:inline-block;overflow:hidden;background:#000}
.bella-av.sm{width:28px;height:28px}
.bella-av-img{width:100%;height:100%;object-fit:cover;display:block}
/* fallback "B" only shows if the image fails to load */
.bella-av-fallback{background:linear-gradient(145deg,#2a1a22,#181016);box-shadow:0 0 0 1.5px rgba(255,20,100,0.4)}
.bella-av-fallback .bella-av-img{display:none}
.bella-av-fallback::after{content:"B";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:Gilroy,sans-serif;font-weight:800;color:#fff;font-size:18px}
.bella-av.sm.bella-av-fallback::after{font-size:13px}

.bella-modal{max-width:440px;height:min(620px,86vh);display:flex;flex-direction:column;padding:0;overflow:hidden}
.bella-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex:none}
.bella-head-txt{flex:1;min-width:0}
.bella-name{font-size:17px;font-weight:700;letter-spacing:-0.01em}
.bella-sub{font-size:12px;color:var(--pink);font-weight:600;letter-spacing:.02em}
.bella-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px;display:flex;flex-direction:column;gap:14px}
.bella-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.bella-bot{justify-content:flex-start}
.bella-user{justify-content:flex-end}
.bella-bubble{max-width:80%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;white-space:normal;word-wrap:break-word}
.bella-bot .bella-bubble{background:rgba(255,255,255,0.06);border:1px solid var(--line-2);border-bottom-left-radius:5px;color:var(--text)}
.bella-user .bella-bubble{background:var(--magenta);color:#0a0a0a;font-weight:500;border-bottom-right-radius:5px}
.bella-bubble b{font-weight:700}
.bella-typing{display:flex;gap:5px;align-items:center}
.bella-typing span{width:7px;height:7px;border-radius:50%;background:var(--m-45);animation:bellaBounce 1.2s infinite ease-in-out}
.bella-typing span:nth-child(2){animation-delay:.18s}
.bella-typing span:nth-child(3){animation-delay:.36s}
@keyframes bellaBounce{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.bella-errline{text-align:center;font-size:12.5px;color:var(--amber);padding:4px}
.bella-input-row{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line);flex:none;align-items:center}
.bella-input{flex:1;min-width:0;padding:12px 15px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.05);color:var(--text);font:inherit;font-size:16px}
.bella-input:focus{outline:none;border-color:rgba(255,20,100,0.5)}
.bella-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--magenta);color:#0a0a0a;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.bella-send:disabled{opacity:.5;cursor:default}
.bella-ico{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,0.04);
  color:var(--m-55);display:flex;align-items:center;justify-content:center;cursor:pointer}
.bella-ico:hover{border-color:rgba(255,255,255,0.2);color:var(--text)}
.bella-ico.on{color:var(--pink);border-color:rgba(255,20,100,0.45);background:rgba(255,20,100,0.1)}
.bella-mic{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,0.05);
  color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.bella-mic.live{background:var(--magenta);color:#0a0a0a;border-color:var(--magenta);animation:micPulse 1.2s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,20,100,0.5)}50%{box-shadow:0 0 0 9px rgba(255,20,100,0)}}
/* Bella admin misuse transcript */
.ba-convo{margin:10px 0 4px;padding:10px 12px;border-radius:11px;background:rgba(0,0,0,0.35);border:1px solid var(--line);
  max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.ba-msg{font-size:13px;line-height:1.4;color:var(--m-55)}
.ba-msg b{color:var(--text);font-weight:600}
.ba-msg.ba-u b{color:var(--pink)}

@media (max-width:520px){
  .tm-controls{flex-wrap:wrap}
  .tm-row{flex-wrap:wrap}
  .tm-row-actions{width:100%;justify-content:flex-end}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* =====================================================================
   SUNBED ISSUE TRACKER
   ===================================================================== */
.issues-modebar{margin-bottom:16px}
.sb-tabs{margin-bottom:16px}
/* shop-issue extras (reuses the .sb-* styles) */
.si-cat{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--pink)}
.si-shoptab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;margin-left:5px;
  border-radius:999px;background:var(--magenta);color:#0a0a0a;font-size:11px;font-weight:800;line-height:1;vertical-align:middle}
.sb-shoptab.active .si-shoptab-badge{background:#0a0a0a;color:#fff}
.sb-err{background:rgba(217,60,60,0.12);border:1px solid rgba(217,60,60,0.3);color:#f0a;color:#ff8a8a;border-radius:10px;padding:9px 12px;font-size:13.5px;margin:10px 0}
.sb-loading,.sb-none,.sb-empty-shop{color:var(--m-45);font-size:14px;padding:18px 4px;text-align:center}
.sb-none{text-align:left;padding:14px 2px}

/* shop switcher */
.sb-shopbar{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.sb-shoptab{flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,0.03);
  color:var(--m-55);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.sb-shoptab.active{background:var(--magenta);border-color:var(--magenta);color:#fff}

.sb-actionrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.sb-report-btn{flex:0 0 auto}

/* bed grid */
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.sb-card{text-align:left;background:rgba(255,255,255,0.035);border:1px solid var(--line-2);border-radius:15px;
  padding:13px 13px 11px;cursor:pointer;color:var(--text);font:inherit;display:flex;flex-direction:column;gap:5px;
  transition:border-color .2s var(--ease),transform .1s var(--ease);border-left-width:3px}
.sb-card:active{transform:scale(.985)}
.sb-card-sb-ok{border-left-color:#3ec77a}
.sb-card-sb-bad{border-left-color:var(--amber)}
.sb-card-sb-oos{border-left-color:#e0556b}
.sb-card-dim{opacity:.5;cursor:default}
.sb-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sb-card-no{font-size:15px;font-weight:700}
.sb-card-model{font-size:12.5px;color:var(--m-55);line-height:1.25}
.sb-card-brand{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--m-40)}
.sb-card-foot{margin-top:3px;display:flex;align-items:baseline;gap:10px}   /* flex so the hours chip's margin-left:auto separates it from "No faults" instead of concatenating */
.sb-card-open{font-size:12px;font-weight:700;color:var(--amber)}
.sb-card-ok{font-size:12px;font-weight:500;color:var(--m-40)}
.sb-badge{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:999px;white-space:nowrap}
.sb-badge.sb-ok{background:rgba(62,199,122,0.15);color:#5fd998}
.sb-badge.sb-bad{background:rgba(217,162,58,0.16);color:var(--amber)}
.sb-badge.sb-oos{background:rgba(224,85,107,0.16);color:#ef7d8e}
.sb-badge.sb-empty{background:rgba(255,255,255,0.06);color:var(--m-45)}

/* bed detail */
.sb-detail{margin-top:18px;background:rgba(255,255,255,0.025);border:1px solid var(--line-2);border-radius:16px;padding:15px}
.sb-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.sb-detail-bed{font-size:15.5px;font-weight:700}
.sb-detail-route{font-size:13px;color:var(--m-55);margin-top:4px;line-height:1.4}
.sb-detail-route strong{color:var(--pink);font-weight:600}

/* issue card */
.sb-issue{background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:11px}
.sb-issue-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-issue-chips{display:flex;align-items:center;gap:6px;flex:none}
.sb-issue-title{font-size:14.5px;font-weight:600}
.sb-issue-meta{font-size:12px;color:var(--m-40);margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sb-issue-desc{font-size:13.5px;color:var(--m-55);margin-top:8px;line-height:1.45}
.sb-sev{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:999px}
/* Low sits below Medium: outlined rather than filled, so a cosmetic scuff
   never competes for attention with a bed that's off. */
.sb-sev-low{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.13);color:var(--m-45)}
.sb-sev-minor{background:rgba(255,255,255,0.07);color:var(--m-55)}
.sb-sev-major{background:rgba(217,162,58,0.16);color:var(--amber)}
.sb-sev-out_of_service{background:rgba(224,85,107,0.16);color:#ef7d8e}
/* The line under the urgency picker that says what the level you're about to
   choose actually means. Reserves its own height so switching between levels
   doesn't shuffle the buttons under the thumb that's tapping them. */
.sb-sev-hint{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--m-45);min-height:2.8em}
.sb-sev-hint.urgent{color:#ef7d8e;font-weight:600}
.sb-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.sb-chip-open{background:rgba(217,162,58,0.16);color:var(--amber)}
.sb-chip-rep{background:rgba(90,140,255,0.16);color:#88a8ff}
.sb-chip-fixed{background:rgba(62,199,122,0.15);color:#5fd998}
/* Count-up of days a fault's been down — escalates neutral → amber → red with age. */
.sb-days{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;background:rgba(255,255,255,0.08);color:var(--m-55);font-variant-numeric:tabular-nums}
.sb-days-warn{background:rgba(217,162,58,0.16);color:var(--amber)}
.sb-days-urgent{background:rgba(224,85,107,0.18);color:#ef7d8e}
.sb-thumbs{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.sb-thumb{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);background:rgba(255,255,255,0.05);
  color:var(--m-50);cursor:pointer;display:flex;align-items:center;justify-content:center}

/* known quick-fix */
.sb-fixes{margin-top:11px}
.sb-fix{background:rgba(255,94,148,0.07);border:1px solid rgba(255,94,148,0.22);border-radius:11px;padding:11px;margin-top:8px}
.sb-fix-title{font-size:13.5px;font-weight:700;color:var(--pink)}
.sb-fix-steps{font-size:13px;color:var(--m-55);margin-top:5px;line-height:1.45}
.sb-fix-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sb-fix-yes,.sb-fix-no{padding:7px 12px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--line-2)}
.sb-fix-yes{background:rgba(62,199,122,0.16);border-color:rgba(62,199,122,0.3);color:#5fd998}
.sb-fix-no{background:transparent;color:var(--m-55)}

/* AI diagnose */
.sb-diag{margin-top:11px;background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:11px;padding:11px;font-size:13px;color:var(--m-55);line-height:1.45}
.sb-diag-known{background:rgba(217,162,58,0.1);border-color:rgba(217,162,58,0.28)}
.sb-diag-load{color:var(--m-40)}
.sb-diag-h{font-weight:700;color:var(--text);margin-bottom:4px}
.sb-diag-try{margin-top:6px;color:var(--pink);font-weight:500}

.sb-issue-actions,.sb-fix-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.sb-act{flex:0 0 auto}
/* Overseer fault edits (Alex, 15 Jul): move-to-bed picker + bed-status override */
.sb-move-open{display:inline-block;margin-top:10px;font-size:13px}
.sb-move{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sb-move-h{font-size:12px;color:var(--m-45);font-weight:600;flex-basis:100%}
.sb-bedstatus{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:2px 0 14px;padding:11px 13px;background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:11px}
.sb-bedstatus-now{font-size:13px;color:var(--m-55)}
.sb-bedstatus-note{font-size:12px;color:var(--m-45);flex-basis:100%;line-height:1.4}
.sb-none{color:var(--m-45);font-size:13.5px;padding:8px 2px}

/* fault log */
.sb-log-row{background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:10px}
.sb-log-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-log-bed{font-size:13px;font-weight:600;color:var(--m-55)}
.sb-log-title{font-size:14.5px;font-weight:600;margin-top:6px}
.sb-log-fix{font-size:13px;color:var(--m-55);margin-top:7px;line-height:1.45}
.sb-log-fix strong{color:var(--text);font-weight:600}
.sb-log-nofix{color:var(--m-40);font-style:italic}
.sb-log-meta{font-size:11.5px;color:var(--m-40);margin-top:8px}

/* stats */
.sb-stat-h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin:18px 0 9px}
.sb-stat{background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px}
.sb-stat-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.sb-stat-sub{font-size:11px;font-weight:600;color:var(--m-40);text-transform:uppercase;letter-spacing:.03em}
.sb-stat-nums{display:flex;gap:16px;margin-top:8px;font-size:13px;color:var(--m-50);flex-wrap:wrap}
.sb-stat-nums b{color:var(--text);font-weight:700}
.sb-stat-open b{color:var(--amber)}

/* report form */
.sb-modal{max-width:440px;max-height:92vh;display:flex;flex-direction:column}   /* scroll on short phones instead of overflowing */
.sb-rf-ta{resize:vertical;min-height:60px;font:inherit}
.sb-rf-photos{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.sb-rf-thumb{position:relative;width:62px;height:62px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2)}
.sb-rf-thumb img{width:100%;height:100%;object-fit:cover}
.sb-rf-rm{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,0.65);
  color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sb-rf-rm::after{content:"";position:absolute;inset:-12px}   /* 44px hit area on a 20px visual — a mis-tap here removes an attached photo */
/* "✓ Photo attached" row (bed hours / fire / certificate / CoSHH forms): without this
   rule the absolutely-positioned × resolved against the modal overlay and floated at
   the top-right corner of the SCREEN, nowhere near the row. */
.fire-media-done{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--hl-green)}
.fire-media-done .sb-rf-rm{position:static;flex:none}
.sb-rf-add{width:62px;height:62px;border-radius:10px;border:1px dashed var(--line-2);background:rgba(255,255,255,0.03);
  color:var(--m-45);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-size:10px}
.sb-rf-add:disabled{opacity:.4;cursor:default}
.fire-proofs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}   /* B18: panel/signs photo links in the log row */

/* ---------- B1: accident & incident logbook + RIDDOR ---------- */
.sb-chip-urgent{background:rgba(224,85,107,0.18);color:#ef7d8e}
.acc-modal{max-width:480px}
.acc-note{font-size:13px;line-height:1.5;color:var(--m-55);background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;margin:2px 0 4px}
.acc-req{color:#ef7d8e;font-weight:600;text-transform:none;letter-spacing:0}
.acc-opt{color:var(--m-45);font-weight:400;text-transform:none;letter-spacing:0}
.acc-subhead{font-size:13px;font-weight:700;color:var(--text);margin:20px 0 2px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08)}
.acc-row{display:flex;gap:12px}
.acc-row>div{flex:1;min-width:0}
.acc-check{display:flex;align-items:center;gap:9px;margin:13px 0 2px;font-size:14px;color:var(--text);cursor:pointer}
.acc-check input{width:18px;height:18px;accent-color:var(--pink);flex:none}
.acc-tabs{margin:0 0 14px}
.acc-card{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,0.03);border:1px solid var(--line-2);border-radius:13px;padding:13px 14px;font:inherit;color:var(--text);margin-bottom:10px}
.acc-card:hover{border-color:rgba(255,255,255,0.2)}
.acc-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acc-card-cat{font-size:13.5px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-card-desc{font-size:13.5px;line-height:1.45;color:var(--m-55)}
.acc-card-meta{font-size:12px;color:var(--m-45);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.acc-detail{gap:0}
.acc-d-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.acc-d-cat{font-size:15px;font-weight:700;color:var(--text)}
.acc-d-shop{font-size:12.5px;color:var(--m-45);margin-bottom:12px}
.acc-d-desc{font-size:14.5px;line-height:1.5;color:var(--text);background:rgba(255,255,255,0.04);border-radius:11px;padding:12px 13px;margin-bottom:6px;white-space:pre-wrap}
.acc-d-sub{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--m-45);margin:18px 0 8px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08)}
.acc-d-group{display:flex;flex-direction:column;gap:9px}
.acc-d-row{display:flex;gap:12px;align-items:baseline}
.acc-d-k{flex:none;width:130px;font-size:12.5px;color:var(--m-45)}
.acc-d-v{flex:1;min-width:0;font-size:14px;color:var(--text);white-space:pre-wrap;word-break:break-word}
.acc-d-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08)}
@media (max-width:430px){ .acc-row{flex-direction:column;gap:0} }

/* ---------- statutory inspections log ---------- */
.sb-chip-muted{background:rgba(255,255,255,0.08);color:var(--m-55)}
.insp-row{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:8px 6px;margin:0 -6px;border-radius:9px;transition:background .15s var(--ease)}
@media(hover:hover){.insp-row:hover{background:rgba(255,255,255,0.05)}}
.insp-row:active{background:rgba(255,255,255,0.07)}
.insp-row .acc-d-k{width:auto;flex:1;min-width:0;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.insp-row .acc-d-v{flex:none;text-align:right;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;white-space:normal}
.insp-when{font-size:11.5px;color:var(--m-45)}
.insp-suggest{background:none;border:0;color:var(--pink);cursor:pointer;font:inherit;font-size:11.5px;margin-left:8px;font-weight:600;padding:2px 4px}
/* progress/chase note under an inspection status line (Lee, 13 Jul) — also the contractor file */
.insp-note{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;font-size:12px;color:var(--m-45);padding:0 6px 4px 22px;margin:-6px 0 0;border-radius:8px;line-height:1.45}
@media(hover:hover){.insp-note:hover .insp-note-txt{text-decoration:underline}}
.insp-note-txt{color:var(--text)}
.insp-note-meta{color:var(--m-45)}
.insp-note-add{color:var(--pink);font-weight:600;font-size:11.5px;padding-left:22px}
.insp-note-inline{display:block;font-size:11.5px;font-weight:400;color:var(--m-45);margin-top:2px}
.hs-card-badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;border-radius:9px;background:#ff1464;color:#fff;font-size:11.5px;font-weight:800;vertical-align:middle;text-align:center}
.coshh-row-foot{display:flex;gap:16px;align-items:center;margin-top:8px;flex-wrap:wrap}
.coshh-rm{color:var(--m-45)}
/* ---------- sunbed training: the padlocked task + the matrix ---------- */
.train-tag{color:var(--amber);border-color:rgba(217,162,58,0.4)}
.task-trainlock{opacity:0.62}
.task-trainlock .task-check{border-style:dashed;opacity:0.5}
.train-modal{max-width:640px}
.train-wrap{overflow-x:auto;margin:4px -4px 0;padding:0 4px;-webkit-overflow-scrolling:touch}
.train-matrix{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
.train-matrix th{font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--m-45);font-weight:600;padding:6px 4px;text-align:center}
.train-matrix th.tr-name,.train-matrix td.tr-name{text-align:left;position:sticky;left:0;background:#121212;padding-right:10px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.train-matrix td{padding:3px;text-align:center;border-top:1px solid var(--line)}
.tr-cell{width:40px;height:36px;border-radius:9px;border:1px solid var(--line-2);background:rgba(255,255,255,0.03);font-size:15px;color:inherit;cursor:pointer}
.tr-yes{color:var(--hl-green);border-color:rgba(48,209,88,0.4);background:rgba(48,209,88,0.08)}
.tr-no{color:var(--m-45);border-style:dashed}
.train-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;background:rgba(255,255,255,0.03);margin:0 0 6px;color:inherit;font:inherit;font-size:13.5px;line-height:1.35;cursor:pointer}
.train-item.on{border-color:rgba(48,209,88,0.45);background:rgba(48,209,88,0.07)}
.train-item .train-box{flex:0 0 20px;height:20px;border:1.5px solid var(--line-2);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.train-item.on .train-box{border-color:var(--hl-green);background:var(--hl-green);color:#060606}
.train-pin{letter-spacing:0.35em;font-size:18px;text-align:center;max-width:170px}
.train-meta{color:var(--m-45);font-size:12.5px;margin:4px 0}
.train-shown{margin:8px 0}
.train-shown-row{font-size:13px;padding:3px 0;color:var(--m-55)}

/* ---------- main navigation: bottom bar (mobile) + top bar (both) ---------- */
/* Top bar — EVERY screen, every user type, both breakpoints (Mitchell, 14 Jul):
   just the GLOW. wordmark dead centre (like the signage) + Help on the right.
   No left-hand tab row (everything's a Home tile — tap GLOW to come back), no
   back arrow (every screen has its own Close/Back; mobile keeps a Home tab in the
   bottom bubble). Dead simple. */
.navtop{display:block;position:fixed;left:0;right:0;top:0;z-index:500;   /* above modal overlays (100): GLOW. must stay tappable on EVERY page */
  padding-top:env(safe-area-inset-top);
  background:rgba(8,8,8,0.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.navtop-inner{position:relative;display:flex;align-items:center;gap:12px;padding:0 12px;height:52px}
.nav-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:none;border:0;color:var(--text);
  font-family:Gilroy,"Poppins",sans-serif;font-weight:800;font-size:21px;letter-spacing:.4px;cursor:pointer;padding:6px 10px}
.nav-dot{color:#fff}
/* Home, top left (3 Aug). A house, because staff weren't reading the wordmark as
   a button. Sits in the flex flow; the brand is absolutely centred, so it can't
   push GLOW. off centre. 44px touch target. */
.nav-home{display:inline-flex;align-items:center;gap:7px;flex:none;
  background:rgba(255,255,255,0.05);border:1px solid var(--line-2);border-radius:999px;
  color:var(--text);cursor:pointer;padding:0 12px;height:38px;min-width:44px;justify-content:center}
.nav-home svg{width:20px;height:20px;display:block;flex:none}
.nav-home-lbl{font:inherit;font-size:13px;font-weight:600;letter-spacing:-0.01em}
.nav-home:active{transform:scale(.94)}
@media (hover:hover){ .nav-home:hover{background:rgba(255,255,255,0.1);border-color:var(--line)} }
@media (max-width:400px){ .nav-home-lbl{display:none} }   /* very narrow: the house alone, still 44px wide */
.navtop-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.navtop .nav-who{display:none}
/* EMERGENCY — red and worded, on phones too (3 Aug). As a bare gold circle beside
   the bell it was being read as a profile picture, which is a bad thing to be
   wrong about. This is the ONE panic button that changes: the others (login card,
   H&S header, update gate) already carry the words "Emergency help". */
/* .panic-btn.panic-btn-top, not .panic-btn-top: the shared .panic-btn gold is
   declared further down this file, and at equal specificity the later rule wins. */
.panic-btn.panic-btn-top{border-radius:999px;gap:6px;padding:0 12px;height:38px;min-width:44px;
  background:rgba(255,59,48,0.16);border-color:rgba(255,59,48,0.55);color:#ff6b60}
.panic-btn.panic-btn-top .panic-btn-lbl{display:inline;font:inherit;font-size:13px;font-weight:700;white-space:nowrap}
@media (hover:hover){ .panic-btn.panic-btn-top:hover{background:rgba(255,59,48,0.28)} }
@media (max-width:400px){ .panic-btn.panic-btn-top .panic-btn-lbl{display:none} }
.chrome .brand,.chrome .brand + .chrome-div{display:none}   /* the top bar owns the wordmark everywhere now */
/* owner Home: the "this computer is pinned to a shop" pill (two-tap unpin) */
.home-pinned{display:block;width:100%;text-align:left;margin:0 0 16px;padding:11px 14px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:13px;line-height:1.5;color:var(--m-55);
  background:rgba(217,162,58,0.08);border:1px solid rgba(217,162,58,0.28)}
.home-pinned b{color:var(--amber)}
.home-pinned.armed{color:var(--amber);border-color:rgba(217,162,58,0.55);background:rgba(217,162,58,0.14);font-weight:600}
.modal-intro{font-size:13px;line-height:1.5;color:var(--m-55);background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;margin:0 0 12px}
.modal-empty{color:var(--m-45);padding:8px 2px}
.panic-modal{max-width:400px}
.panic-intro{font-size:13px;line-height:1.5;color:var(--m-55);background:rgba(255,59,48,0.06);border:1px solid rgba(255,59,48,0.18);border-radius:11px;padding:11px 13px;margin:0 0 14px}
.panic-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.panic-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-radius:13px;
  background:rgba(255,255,255,0.035);border:1px solid var(--line-2);text-decoration:none;color:var(--text);cursor:pointer;transition:background .15s var(--ease)}
.panic-row:hover,.panic-row:active{background:rgba(255,255,255,0.07)}
.panic-row-999{background:rgba(255,59,48,0.12);border-color:rgba(255,59,48,0.35)}
.panic-row-999:hover{background:rgba(255,59,48,0.2)}
.panic-row-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.panic-row-name{font-size:15.5px;font-weight:600}
.panic-row-999 .panic-row-name{color:var(--red);font-size:17px}
.panic-row-role{font-size:12px;color:var(--m-50)}
.panic-row-ic{width:20px;height:20px;color:var(--pink);flex:none;line-height:0}
.panic-row-999 .panic-row-ic{color:var(--red)}
.panic-row-ic svg{width:20px;height:20px;display:block}
.panic-reveal{font-size:30px;font-weight:700;letter-spacing:.02em;text-align:center;font-variant-numeric:tabular-nums;
  padding:14px;margin-top:-2px;background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:13px}
.nav-ovl{position:fixed;inset:0;z-index:510;background:rgba(4,4,4,0.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}   /* menus sit above the bars, as before */
.nav-panel{position:absolute;left:0;right:0;bottom:0;background:#121212;border-top:1px solid var(--line-2);
  border-radius:20px 20px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,0.5);padding:6px 0 calc(12px + env(safe-area-inset-bottom));
  max-height:74vh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:navSheetUp .2s var(--ease)}
@keyframes navSheetUp{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}
.nav-grab{width:38px;height:4px;border-radius:3px;background:var(--line-2);margin:8px auto 4px}
.nav-sheet-h{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--m-45);padding:6px 22px 8px}
.nav-row{display:flex;align-items:center;gap:15px;width:100%;background:none;border:0;color:var(--text);font:inherit;font-size:15.5px;
  text-align:left;cursor:pointer;padding:13px 22px}
@media (hover:hover){ .nav-row:hover{background:rgba(255,255,255,0.04)} }
.nav-row:active{background:rgba(255,255,255,0.07)}
.nav-row-ic{width:23px;height:23px;color:var(--pink);flex:none;line-height:0}
.nav-row-ic svg{width:23px;height:23px;display:block}
.nav-row-lbl{flex:1;min-width:0}
.nav-row-rt{margin-left:auto;color:var(--m-40);width:18px;height:18px;line-height:0}
.nav-row-rt svg{width:18px;height:18px;display:block}
.nav-badge{margin-left:auto;background:var(--magenta);color:#fff;font-size:11.5px;font-weight:700;min-width:20px;text-align:center;padding:1px 7px;border-radius:11px}
/* panic / help — amber (the "no takings" warning tone), distinct from the brand pink */
.panic-btn{background:rgba(217,162,58,0.14);border:1px solid rgba(217,162,58,0.42);color:var(--amber);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease),transform .1s var(--ease)}
.panic-btn svg{width:18px;height:18px;display:block}
.panic-btn:active{transform:scale(.94)}
@media (hover:hover){ .panic-btn:hover{background:rgba(217,162,58,0.22)} }
/* notifications inbox */
.ntf-list{display:flex;flex-direction:column}
.ntf{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:13px 4px;cursor:pointer;color:var(--text)}
.ntf-unread{background:rgba(255,20,100,0.04)}
.ntf-ic{flex:none;font-size:18px;line-height:1.3;width:24px;text-align:center}
.ntf-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ntf-title{font-size:14px;font-weight:600}
.ntf-unread .ntf-title{color:var(--text)}
.ntf-text{font-size:13px;color:var(--m-55);line-height:1.4}
.ntf-meta{font-size:11.5px;color:var(--m-40);font-variant-numeric:tabular-nums}
.ntf-udot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--magenta);margin-top:6px}
.ntf-empty-sub{font-size:12.5px;color:var(--m-45);line-height:1.5}
/* login card: a small Help pill (a shop computer's login screen sees this) */
.login-help{margin-left:auto;border-radius:999px;gap:6px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600}
.login-help .panic-btn-lbl{white-space:nowrap}
.panic-btn-top{font:inherit;margin-right:14px}   /* the rest of this button is set with the .navtop block above */
@media (min-width:760px){
  .navtop-inner{max-width:1260px;margin:0 auto;gap:16px;padding:0 20px;height:58px}
  .nav-brand{font-size:23px}
  .navtop .nav-who{display:inline;font-size:12.5px;color:var(--m-45)}
  .nav-home{height:40px}
  .panic-btn.panic-btn-top{width:auto;height:40px;padding:0 14px;gap:6px}
  .stage{padding-top:calc(86px + env(safe-area-inset-top))}
}

/* =====================================================================
   B16 HOME LAUNCHER — iPad-style app grid (the post-GLOW. landing).
   Full-bleed springboard on the dark body glow (no heavy card shell), so it
   reads as a home screen, not another panel. Tokens lifted 1:1 from the live
   app. NO CSS `animation:` entrances anywhere here — renderApp() swaps
   innerHTML on every 6s poll and an entrance would replay (v5.28.1 flicker).
   ===================================================================== */
.home{max-width:680px;margin:0 auto;padding:0 2px calc(36px + env(safe-area-inset-bottom))}   /* contained width so tiles cluster like a real springboard on iPad/desktop instead of scattering across the full stage (bottom nav + floating Bella are retired — no dead scroll) */
.home-toprow{display:flex;justify-content:flex-end;padding:2px 6px 0}   /* Manager-login sits on its own row so the greeting keeps full width */
.home-greet{padding:4px 6px 8px}
.home-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}   /* solid --pink: 4.5:1+ on the dark body (the .85 magenta failed AA) */
.home-hi{font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin:7px 0 0}
.home-mgr{flex:none;background:rgba(255,255,255,0.05);border:1px solid var(--line-2);color:var(--m-55);
  font:inherit;font-size:12.5px;font-weight:600;padding:10px 16px;min-height:44px;border-radius:999px;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.home-mgr:active{transform:scale(.96)}
@media (hover:hover){ .home-mgr:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.16)} }
/* tile count pip — magenta, hidden at 0 (only rendered when >0) */
.ht-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--magenta);color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums;border:2px solid var(--bg);box-shadow:0 0 10px rgba(255,20,100,0.5)}
.home-sec{margin-top:8px}
.home-sec-h{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin:0;padding:14px 6px 12px}
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px}

/* tile = a rounded glyph square + a label beneath it (a real <button>) */
.ht{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .1s var(--ease)}
.ht-ic{position:relative;width:58px;height:58px;border-radius:17px;color:#f5f5f7;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.ht-ic svg{width:26px;height:26px;display:block}
.ht-lbl{font-size:10.5px;font-weight:500;line-height:1.25;color:rgba(245,245,247,0.72);
  text-align:center;max-width:72px;overflow-wrap:anywhere}
.ht-accent .ht-ic{color:var(--magenta)}
.ht-dim .ht-ic{color:rgba(245,245,247,0.6);background:rgba(255,255,255,0.03)}
.ht-dim .ht-lbl{color:rgba(245,245,247,0.5)}
.ht:active{transform:scale(.94)}
.ht:active .ht-ic{background:rgba(255,255,255,0.08)}
@media (hover:hover){ .ht:hover .ht-ic{border-color:rgba(255,255,255,0.16)} }
.ht:focus-visible{outline:none}
/* iPad + desktop: a proper springboard — bigger glyphs, readable labels, roomier grid */
@media (min-width:640px){
  .home-hi{font-size:30px}
  .home-eyebrow{font-size:11.5px}
  .home-sec-h{font-size:11px;padding:18px 6px 14px}
  .home-grid{gap:22px 12px}
  .ht{gap:9px}
  .ht-ic{width:68px;height:68px;border-radius:20px}
  .ht-ic svg{width:30px;height:30px}
  .ht-lbl{font-size:12px;max-width:88px}
  .ht-badge{min-width:20px;height:20px;line-height:20px;font-size:11px;top:-6px;right:-6px}
}
.ht:focus-visible .ht-ic{outline:2px solid var(--pink);outline-offset:2px}

@media (min-width:560px){ .home-grid{grid-template-columns:repeat(6,1fr);gap:18px 8px} }
@media (min-width:820px){
  .home{padding-bottom:40px}   /* desktop uses the top nav; no fixed bottom bar to clear */
  .home-grid{grid-template-columns:repeat(8,1fr)}
  .home-hi{font-size:30px}
}

/* ---------- B16 command centre: "Needs a look" triage rail ----------
   The single cross-shop action list; every row jumps to its record. */
.oc-needs{margin:14px 0;background:rgba(255,255,255,0.02);border:1px solid var(--line);border-radius:16px;padding:6px 6px 8px}
.oc-needs-h{display:flex;align-items:center;gap:9px;padding:10px 10px 8px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.oc-needs-n{background:var(--magenta);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;line-height:19px;
  text-align:center;border-radius:10px;font-variant-numeric:tabular-nums;padding:0 5px}
.oc-needs-clear{padding:4px 10px 12px;color:var(--m-50);font-size:13px}
.oc-need-list{display:flex;flex-direction:column;gap:5px}
.oc-need-more{width:100%;min-height:44px;background:none;border:1px dashed var(--line-2);border-radius:12px;color:var(--m-55);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
@media (hover:hover){ .oc-need-more:hover{border-color:rgba(255,255,255,0.2);color:var(--text)} }
.oc-need{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;text-align:left;color:var(--text);font:inherit;cursor:pointer;
  background:rgba(255,255,255,0.025);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.oc-need:active{transform:scale(.99)}
@media (hover:hover){ .oc-need:hover{background:rgba(255,255,255,0.06)} }
.oc-need-red{background:rgba(255,69,58,0.07);border-color:rgba(255,69,58,0.22)}
@media (hover:hover){ .oc-need-red:hover{background:rgba(255,69,58,0.12)} }
.oc-need-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hl-amber)}
.oc-need-red .oc-need-dot{background:var(--hl-red);box-shadow:0 0 8px rgba(255,69,58,0.7)}
.oc-need-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oc-need-tx b{font-size:12.5px;font-weight:600;line-height:1.3}
.oc-need-tx span{font-size:11px;color:var(--m-50);font-weight:600;letter-spacing:.02em}
.oc-need-go{flex:none;color:var(--m-40);width:16px;height:16px;line-height:0}
.oc-need-go svg{width:16px;height:16px;display:block}

/* ---------- B3: time-gated night tasks + toast ---------- */
/* Timed jobs: make the WINDOW pop — staff were missing them when the time was a faint chip. */
.time-tag{color:var(--amber);border-color:rgba(217,162,58,0.45);background:rgba(217,162,58,0.14);font-size:12.5px;font-weight:800;letter-spacing:.03em;padding:5px 11px}
.time-tag svg{width:15px;height:15px}
.task-gated{opacity:.6}
.task-gated .task-check{border-style:dashed}
/* ---------- daily timing: missed window (deadline passed, not done) ---------- */
/* Running late — still your job, amber, tick it now (in the grace window). */
.late-tag{color:var(--amber);border-color:rgba(217,162,58,0.5);background:rgba(217,162,58,0.16);font-weight:700}
.late-tag svg{width:13px;height:13px}
/* Missed — past the grace window. Auto-resolves to a tidy, greyed, non-nagging
   row (not a red lock): visible + still counted against the shop, but it no
   longer blocks the list from reaching 100%. */
.missed-tag{color:var(--amber);border-color:rgba(217,162,58,0.30);background:rgba(217,162,58,0.07)}
.missed-tag svg{width:13px;height:13px}
.task-missed{opacity:.5}
.task-missed .task-name{color:var(--m-55);font-weight:500;font-size:14px}
.task-missed .task-check{border-color:var(--line-2);border-style:dashed;background:transparent;box-shadow:none}
.task-missed .task-check svg{opacity:0}
.miss-note{color:var(--amber);font-weight:600}
/* Recovery window — deadline + grace blown, but STILL tickable for a short while
   to save it (banked at half credit). Warm + urgent, but NOT greyed like a lock. */
.recover-tag{color:#eab54d;border-color:rgba(234,181,77,0.55);background:rgba(234,181,77,0.16);font-weight:700}
.recover-tag svg{width:13px;height:13px}
.task-recover .task-check{border-color:rgba(234,181,77,0.7)}
.task-recover .task-name{color:var(--text)}
/* A task that was saved inside the recovery window (done, but late). */
.recovered-chip{display:inline-flex;align-items:center;gap:4px;margin-top:7px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;color:var(--amber);background:rgba(217,162,58,0.12);border:1px solid rgba(217,162,58,0.3)}
.recovered-chip svg{width:12px;height:12px}
/* Phase 2: missed-tasks report panel (overseers) */
.miss-sub{padding:0 18px 10px;color:var(--m-50,#8a8a8a);font-size:12px;line-height:1.45}
.miss-list{display:flex;flex-direction:column;gap:14px}
.miss-shop{border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden}
.miss-shop-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(255,255,255,0.03)}
.miss-shop-name{font-weight:600}
.miss-count{background:rgba(255,90,90,0.15);color:#ff7a7a;border-radius:999px;padding:2px 11px;font-size:13px;font-weight:700}
.miss-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;padding:9px 14px;border-top:1px solid rgba(255,255,255,0.05)}
.miss-task{font-size:14px;flex:1 1 auto}
.miss-win{color:#ff8a8a;font-size:12px;font-weight:600}
.miss-who{flex-basis:100%;color:var(--m-50,#9a9a9a);font-size:12px}
/* B10: task-history browser — date bar + tappable shop rows */
.hist-datebar{display:flex;align-items:center;justify-content:center;gap:16px;padding:2px 0 12px}
.hist-nav{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.hist-nav.off{opacity:.28;cursor:default}
.hist-date{font-weight:600;font-size:15px;min-width:150px;text-align:center}
.hist-shop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;background:rgba(255,255,255,0.03);color:#fff;cursor:pointer}
.hist-shop:active{background:rgba(255,255,255,0.06)}
.hist-shop-name{font-weight:600;font-size:15px;flex:1 1 auto}
.hist-badge{border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700}
.hist-badge.miss{background:rgba(255,90,90,0.15);color:#ff7a7a}
.hist-badge.ok{background:rgba(120,200,140,0.14);color:#7fd39a}
.hist-badge.off{background:rgba(255,255,255,0.06);color:var(--m-45)}   /* not open yet */
.hist-chev{color:var(--m-50,#8a8a8a);font-size:20px}
/* B10: per-shop day detail — missed (with a kind heads-up) + done timeline */
.sd-title{font-size:15px;flex:1 1 auto;text-align:center}
.sd-list{gap:6px}
.sd-sec-h{display:flex;align-items:center;gap:8px;margin:12px 2px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--m-50,#8a8a8a)}
.sd-sec-h:first-child{margin-top:0}
.sd-sec-h.miss{color:#ff7a7a}
.sd-n{background:rgba(255,255,255,0.08);border-radius:999px;padding:1px 8px;font-size:11px}
.sd-sec-h.miss .sd-n{background:rgba(255,90,90,0.15);color:#ff7a7a}
.sd-allclear{color:var(--m-50,#9a9a9a);font-size:13px;padding:6px 2px}
.sd-miss{border:1px solid rgba(255,90,90,0.18);border-radius:10px;padding:9px 12px;background:rgba(255,90,90,0.04)}
.sd-miss-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sd-miss-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.sd-miss .sd-task{flex:1 1 auto;font-size:14px}
.sd-win{color:#ff8a8a;font-size:12px;font-weight:600;flex:none}
.sd-who{color:var(--m-50,#c7c7c7);font-size:12.5px}
.sd-nudge{border:1px solid rgba(240,190,90,0.35);background:rgba(240,190,90,0.1);color:var(--amber,#f0be5a);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.sd-nudge:active{background:rgba(240,190,90,0.18)}
.sd-done{display:flex;align-items:baseline;gap:10px;padding:7px 12px;border:1px solid rgba(255,255,255,0.06);border-radius:9px}
.sd-at{color:var(--m-50,#8a8a8a);font-size:12px;font-variant-numeric:tabular-nums;flex:none;min-width:38px}
.sd-done .sd-task{flex:1 1 auto;font-size:14px}
.sd-by{color:var(--m-50,#9a9a9a);font-size:12px;flex:none}

/* ── Task history: the photo proof + per-person filter (B, 1 Aug) ────────────
   The evidence was being collected and stored and then shown nowhere. */
.sd-n-ph{background:rgba(255,20,100,.14);color:var(--pink,#ff1464);border-radius:999px;padding:1px 8px;font-size:11px;text-transform:none;letter-spacing:0}
/* flex-shrink:0 is load-bearing: this list is a column flex parent, and without
   it the chip row gets crushed to a sliver behind the gallery (the v6.4.2
   modal-crush trap, same cause). */
.sd-who-row{display:flex;flex:none;gap:6px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sd-who-row::-webkit-scrollbar{display:none}
.sd-chip{flex:none;border:1px solid var(--line-2,rgba(255,255,255,.12));background:transparent;color:var(--m-50,#9a9a9a);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;white-space:nowrap;cursor:pointer}
.sd-chip.on{border-color:rgba(255,20,100,.45);background:rgba(255,20,100,.12);color:#fff;font-weight:600}
.sd-chip-ph.on{border-color:rgba(255,20,100,.45)}
/* Contact sheet — big enough to actually judge a clean from, on a phone. */
.sd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin:2px 0 12px}
.sd-shot{padding:0;border:1px solid var(--line-2,rgba(255,255,255,.1));background:var(--card,#141416);
  border-radius:11px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;text-align:left}
.sd-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:rgba(255,255,255,.04)}
.sd-shot-cap{padding:6px 8px;font-size:11px;line-height:1.35;color:var(--m-50,#9a9a9a)}
.sd-row{display:flex;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,0.06);border-radius:10px;margin-bottom:6px}
.sd-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sd-row-top{display:flex;align-items:baseline;gap:8px}
.sd-row-top .sd-task{flex:1 1 auto;font-size:14px;min-width:0}
.sd-row-bot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sd-thumb{flex:none;width:46px;height:46px;border-radius:8px;overflow:hidden;padding:0;border:1px solid var(--line-2,rgba(255,255,255,.1));
  background:rgba(255,255,255,.04);cursor:pointer;display:block}
.sd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sd-thumb-none{border-style:dashed;opacity:.35;cursor:default}
/* A task that REQUIRED a photo and hasn't got one is the interesting row. */
.sd-thumb-missing{border-color:rgba(240,190,90,.5);background:rgba(240,190,90,.1);color:var(--amber,#f0be5a);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;cursor:default}
.sd-reading{color:var(--amber,#f0be5a);font-size:12px}
.sd-ai{color:var(--m-50,#8a8a8a);font-size:11.5px;line-height:1.4}

/* Phase 3: timing fields in the task editor */
.te-timing{margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08)}
.te-row2{display:flex;gap:10px}
.te-row2 .te-col{flex:1;min-width:0}
.te-hint{color:var(--m-50,#8a8a8a);font-size:11px;margin-top:7px;line-height:1.45}
/* B6.1 sub-step editor */
.te-subs{margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08)}
.te-sub-empty{color:var(--m-50,#8a8a8a);font-size:12px;line-height:1.45;margin:2px 0 4px}
.te-sub-row{display:flex;align-items:flex-start;gap:8px;margin:8px 0}
.te-sub-num{flex:none;width:20px;height:34px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--m-45)}
.te-sub-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.te-sub-fields .te-input{margin:0}
.te-sub-note{font-size:12px}
.te-sub-ctrls{flex:none;display:flex;flex-direction:column;gap:4px}
.te-sub-btn{width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:15px;line-height:1;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);color:var(--m-45);
  display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease}
.te-sub-btn:hover:not(:disabled){border-color:rgba(255,255,255,0.18);color:var(--text)}
.te-sub-btn:disabled{opacity:.3;cursor:default}
.te-sub-del{color:#e77}
.te-sub-del:hover:not(:disabled){border-color:rgba(255,90,90,0.4);color:#ff8a8a}
.te-sub-add{margin-top:6px}
.tm-badge-shared{background:rgba(120,160,255,0.15);color:#9db8ff;border-color:rgba(120,160,255,0.3)}
/* spreadsheet-style task grid (owner) */
.grid-modal{max-width:1000px;width:96vw}
.grid-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 18px 8px;flex-wrap:wrap}
.grid-add-btn{padding:8px 14px;font-size:14px}
.grid-sub{padding:0 18px 10px;color:var(--m-50,#8a8a8a);font-size:12px;line-height:1.45}
.grid-scroll{overflow:auto;max-height:64vh;border-top:1px solid rgba(255,255,255,0.08)}
.grid-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.grid-th{position:sticky;top:0;z-index:2;background:#160d12;color:#fff;font-weight:600;padding:10px 8px;text-align:center;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,0.1)}
.grid-th-task{position:sticky;left:0;z-index:3;text-align:left;background:#160d12;min-width:150px;max-width:230px}
th.grid-th-task[scope="row"]{z-index:1;font-weight:500;color:#eee;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,0.05);vertical-align:top}
.grid-row-win{display:block;color:#ff8a8a;font-size:11px;font-weight:600;margin-top:2px}
.grid-cell{text-align:center;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,0.05);border-left:1px solid rgba(255,255,255,0.04);cursor:pointer;white-space:nowrap;font-size:12px}
.grid-cell.on{color:#fff;background:rgba(255,20,100,0.08)}
.grid-cell.on:hover{background:rgba(255,20,100,0.18)}
.grid-cell.grid-shared{color:#9db8ff;background:rgba(120,160,255,0.1)}
.grid-cell.off{color:rgba(245,245,247,0.5)}   /* was #5a5a5a — ~2.7:1 on the modal, unreadable on a dim phone */
.grid-cell.off:hover{background:rgba(255,255,255,0.05);color:#fff}
.grid-empty{padding:24px;text-align:center;color:var(--m-50,#888)}
/* "what's new" notes (the old dismissible update banner is gone — the forced
   .upd-gate below is the only update surface) */
.upd-notes{margin:0;padding-left:18px;color:#d8c4cd;font-size:13px;line-height:1.5}
.upd-notes li{margin-bottom:5px}
/* Forced-update GATE — a non-dismissible full-screen block until they tap Update.
   z-index 9990: above all app content + modals (100), but BELOW the emergency Help
   sheet (.panic-ovl 9994) + distress alert (9995) + toast (9999) so a staffer can still
   summon help / see the offline hint while the gate is up. */
.upd-gate{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,6,6,0.72);-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05)}
.upd-gate-card{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;text-align:center;
  background:linear-gradient(180deg,#241019,#150a10);border:1px solid rgba(255,20,100,0.35);
  border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,0.6);padding:30px 24px 26px}
.upd-gate-spark{font-size:38px;line-height:1;margin-bottom:8px}
.upd-gate-ttl{font-weight:800;color:#fff;font-size:22px;letter-spacing:-.01em}
.upd-gate-sub{color:#c8aebb;font-size:14px;line-height:1.55;margin:10px auto 0;max-width:320px}
.upd-gate-nh{color:var(--pink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 8px;text-align:left}
.upd-gate-notes{margin:0;padding-left:20px;color:#e2d2d9;font-size:14px;line-height:1.55;text-align:left}
.upd-gate-notes li{margin-bottom:7px}
.upd-gate-empty{color:#c8aebb;font-size:14px;text-align:left}
.upd-gate-btn{display:block;width:100%;margin-top:24px;background:var(--magenta);color:#fff;border:none;border-radius:14px;
  padding:17px;font-weight:800;font-size:17px;cursor:pointer;box-shadow:0 8px 24px rgba(255,20,100,0.35)}
.upd-gate-btn:hover{filter:brightness(1.08)}
.upd-gate-btn:active{transform:scale(.98)}
.upd-gate-foot{color:var(--m-40);font-size:12px;margin-top:14px}
/* Escape hatch — only shown after an update has failed twice on this device, so a
   refresh that won't take can never brick a shop till (30 Jul). Deliberately quiet:
   updating is still the thing we want them to do. */
.upd-gate-skip{display:block;width:100%;margin-top:10px;background:none;border:1px solid var(--line-2);
  color:var(--m-55);border-radius:14px;padding:12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;min-height:44px}
.upd-gate-skip:active{transform:scale(.98)}
.upd-gate-help{margin-top:16px;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;font-size:14px;font-weight:600}
/* Forced fridge/freezer alert pop-up (styled like the update card). */
.tp-ovl{z-index:9990}
.tp-modal{max-width:400px;text-align:center;background:linear-gradient(180deg,#241019,#150a10);
  border:1px solid rgba(255,20,100,0.35);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,0.6);padding:30px 24px 26px}
.tp-spark{font-size:38px;line-height:1;margin-bottom:8px}
.tp-ttl{font-weight:800;color:#fff;font-size:21px;letter-spacing:-.01em;line-height:1.25}
.tp-body{color:#e2d2d9;font-size:15px;line-height:1.55;margin:12px auto 0;max-width:330px}
.tp-acts{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.tp-ack{width:100%;background:var(--magenta);color:#fff;border:none;border-radius:14px;
  padding:16px;font-weight:800;font-size:17px;cursor:pointer;box-shadow:0 8px 24px rgba(255,20,100,0.35)}
.tp-ack:hover{filter:brightness(1.08)}
.tp-ack:active{transform:scale(.98)}
.tp-view{width:100%;background:transparent;color:#fff;border:1px solid var(--line-2);border-radius:14px;
  padding:15px;font-weight:700;font-size:15px;cursor:pointer}
.tp-view:active{transform:scale(.98)}
.upd-empty{color:#b89aa6;font-size:13px}
.foot-ver{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.foot-privacy{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-left:12px;opacity:.5;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.wn-modal .wn-body{padding:6px 18px 18px}
.privacy-note{margin:0;font-size:14px;line-height:1.6;color:var(--m-70)}
.inbox-sec{font-weight:700;color:#fff;font-size:12px;margin:8px 2px 8px;text-transform:uppercase;letter-spacing:.04em;opacity:.8}
.inbox-kind-edit{background:rgba(120,160,255,0.18);color:#9db8ff}
.grid-cam{opacity:.9;font-size:11px}
.grid-th-row{cursor:pointer}
.grid-th-row:hover{background:#1f1118}
/* Was opacity:0 + hover-reveal — invisible on touch, so nobody on a phone could
   ever discover the rename tap. Faintly visible always, brighter on hover. */
.grid-row-pen{opacity:.45;margin-left:6px;font-size:11px;color:var(--magenta,#ff1464)}
.grid-th-row:hover .grid-row-pen{opacity:.85}
/* Section headings, search + no-match rows for the task grid */
.grid-sec{cursor:pointer}
.grid-sec th{position:sticky;left:0;z-index:1;text-align:left;background:#1c1016;color:#ff8ab0;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:10px 10px;border-bottom:1px solid rgba(255,255,255,0.06);user-select:none}
.grid-sec:hover th{background:#241419}
.grid-sec.collapsed th{color:#e69ab8}
.grid-sec-chev{display:inline-block;width:14px;color:#ff5e94;font-weight:700}
.grid-sec-count{margin-left:8px;color:rgba(255,138,176,0.55);font-weight:700;letter-spacing:0}
.grid-nores td{padding:22px;text-align:center;color:var(--m-50,#888)}
.grid-search-row{padding:0 18px 10px}
.grid-search{width:100%;padding:10px 13px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,0.05);color:var(--text);font-size:14px;font-family:inherit;-webkit-appearance:none;appearance:none}
.grid-search::placeholder{color:var(--m-45,#8a8a8a)}
.grid-search:focus{outline:none;border-color:rgba(255,20,100,0.55)}
.te-remove{margin-right:auto;color:#ff7a7a}
.sub-meta{display:block;font-size:11px;color:#9a8a92;font-weight:400;margin-top:3px}
.sub-meta .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--magenta,#ff1464);margin-right:5px;vertical-align:middle}
.glow-toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);
  transform:translateX(-50%) translateY(8px);
  max-width:88%;padding:12px 18px;border-radius:13px;
  background:rgba(20,20,22,0.96);border:1px solid var(--line-2);
  color:var(--text);font-size:13.5px;font-weight:500;text-align:center;
  box-shadow:0 10px 34px rgba(0,0,0,0.45);
  opacity:0;pointer-events:none;z-index:9999;
  transition:opacity .2s var(--ease),transform .2s var(--ease)
}
.glow-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Toast with an inline action (e.g. Undo). */
.glow-toast{display:flex;align-items:center;justify-content:center;gap:14px}
.glow-toast-msg{white-space:normal;line-height:1.4;overflow-wrap:break-word;min-width:0}
.glow-toast-act{
  pointer-events:auto;background:none;border:0;color:var(--magenta);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;padding:2px 2px;
  border-left:1px solid var(--line-2);padding-left:14px
}

/* ============ v5.17 delight + reliability polish ============ */
/* Gold ring at 100%: recolour the progress arc + centre text (CSS beats the
   inline stroke presentation attribute). */
.ring.gold .ring-arc{stroke:#FFCF5A;filter:drop-shadow(0 0 9px rgba(255,207,90,0.6))}
.ring.gold .ring-pct,.ring.gold .ring-label{color:#FFCF5A}

/* Sync dot: amber + soft pulse while ticks are queued to send. */
.net-dot.pending{background:var(--amber);box-shadow:0 0 0 3px rgba(217,162,58,.16);animation:netpulse 1.4s ease-in-out infinite}
@keyframes netpulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Tap-to-switch recent-sign-in chips. */
.chip-btn{cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit;color:var(--text);transition:border-color .18s var(--ease),background .18s var(--ease),transform .1s var(--ease)}
@media(hover:hover){.chip-btn:hover{border-color:rgba(255,20,100,0.4);background:rgba(255,20,100,0.06)}}
.chip-btn:active{transform:scale(.97)}
/* (.chip-me / .chip-tick — the "this is you ✓" chip — went on 3 Aug: the greeting
   already says who you are, and the chip repeated it right underneath.) */
.shiftbar-solo{gap:0}

/* One-shot celebration overlay (shop hits 100%). Pure CSS, non-interactive. */
.glow-celebrate{position:fixed;inset:0;z-index:10000;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s var(--ease)}
.glow-celebrate.show{opacity:1}
.glow-celebrate .cmsg{text-align:center;transform:scale(.82);transition:transform .45s cubic-bezier(.2,.9,.25,1.4)}
.glow-celebrate.show .cmsg{transform:scale(1)}
.cmsg-h{font-family:"Poppins",sans-serif;font-weight:800;font-size:26px;letter-spacing:-0.01em;color:var(--text);text-shadow:0 6px 30px rgba(0,0,0,.6)}
.cmsg-s{margin-top:6px;font-size:14px;color:var(--m-55);max-width:16em}
.cbits{position:absolute;inset:0;overflow:hidden}
.cbit{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:0;animation:cfall 2.4s cubic-bezier(.3,.6,.4,1) forwards}
.cbit-0{background:#FF1464}.cbit-1{background:#FFCF5A}.cbit-2{background:#ff5e94}.cbit-3{background:#5ac8fa}.cbit-4{background:#a55eff}.cbit-5{background:#3ad07a}
@keyframes cfall{0%{transform:translateY(-10px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(102vh) rotate(540deg);opacity:.9}}
@media(prefers-reduced-motion:reduce){.cbit{display:none}.glow-celebrate .cmsg,.glow-celebrate.show .cmsg{transition:none;transform:none}}

/* Due-soon chip on timed tasks. */
.due-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(217,162,58,0.14);border:1px solid rgba(217,162,58,0.34);color:var(--amber);white-space:nowrap}
.due-chip.soon{background:rgba(255,59,48,0.1);border-color:rgba(255,59,48,0.3);color:#ff6b60}

/* Accident-book export bar + head actions. */
.acc-export-bar{padding:2px 0 10px}
.acc-export-btn{width:100%;font-size:13px}
.te-head-actions{display:flex;align-items:center;gap:14px}

/* Re-tube plan (cross-shop). */
.plan-wrap{display:flex;flex-direction:column;gap:12px}
.plan-summary{font-size:13.5px;color:var(--m-55);padding:10px 14px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid var(--line-2)}
.plan-summary.alarm{color:var(--amber);background:rgba(217,162,58,0.08);border-color:rgba(217,162,58,0.25)}
.plan-summary.ok{color:#8fd9a8}
.plan-summary b{color:var(--text);font-weight:700}
.plan-list{display:flex;flex-direction:column;gap:8px}
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,0.02);
  color:var(--text);font:inherit;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),transform .1s var(--ease)}
@media(hover:hover){.plan-row:hover{border-color:rgba(255,255,255,0.16);background:rgba(255,255,255,0.04)}}
.plan-row:active{transform:scale(.995)}
.plan-row.plan-overdue{border-color:rgba(255,59,48,0.4);background:rgba(255,59,48,0.06)}
.plan-row.plan-due{border-color:rgba(217,162,58,0.4);background:rgba(217,162,58,0.05)}
.plan-main{min-width:0;flex:1}
.plan-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan-shop{font-weight:700;font-size:14px}
.plan-bed{font-size:13px;color:var(--m-55)}
.plan-sub{font-size:12px;color:var(--m-45);margin-top:3px;overflow:hidden;text-overflow:ellipsis}
/* re-tube timeline: hours done along the bed's life to the end-of-line */
.rt-tl{margin-top:9px}
.rt-tl-empty{font-size:11.5px;color:var(--m-40);font-style:italic}
.rt-tl-bar{position:relative;height:8px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden}
.rt-tl-fill{position:absolute;left:0;top:0;height:100%;border-radius:6px}
.rt-tl-ok{background:linear-gradient(90deg,var(--hl-green),#7be0a0)}
.rt-tl-due{background:linear-gradient(90deg,#e0a63e,#ffd479)}
.rt-tl-over{background:linear-gradient(90deg,#ff453a,#ff8079)}
.rt-tl-booked{background:linear-gradient(90deg,#4da3ff,#8ec6ff)}
.rt-tl-alert{position:absolute;top:-2px;width:2px;height:12px;background:rgba(255,255,255,0.55);border-radius:2px}
.rt-tl-scale{display:flex;justify-content:space-between;margin-top:5px;font-size:10.5px;color:var(--m-40);font-variant-numeric:tabular-nums}
.rt-tl-eol{color:var(--m-45)}
.plan-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.plan-forecast{font-size:12.5px;font-weight:600;color:var(--m-55);white-space:nowrap}
.plan-ok{font-size:11px;font-weight:600;color:#8fd9a8}
.plan-act{font-size:12px;padding:5px 10px}
.plan-export{width:100%;font-size:13px;margin-top:2px}

/* Night sign-off log. */
.slog-rollup{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:rgba(255,255,255,0.02)}
.slog-rollup-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.slog-tally{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0}
.slog-tally-n{color:var(--amber);font-weight:700}
.slog-list{display:flex;flex-direction:column;gap:8px}
.slog-card{border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,0.02)}
.slog-top{display:flex;align-items:center;gap:10px}
.slog-shop{font-weight:700;font-size:14px}
.slog-date{font-size:12px;color:var(--m-45)}
.slog-missed{margin-left:auto;font-size:11px;font-weight:700;color:var(--amber);background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.26);padding:2px 8px;border-radius:999px}
.slog-clean{margin-left:auto;font-size:11px;font-weight:600;color:#8fd9a8}
.slog-by{font-size:12.5px;color:var(--m-55);margin-top:4px}
.slog-note{font-size:13px;line-height:1.5;margin-top:8px;white-space:pre-wrap;color:var(--text)}
.slog-missitems{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.slog-missitem{font-size:12.5px;color:var(--m-55)}
.slog-export{width:100%;font-size:13px;margin-top:12px}

/* iOS Add-to-Home-Screen sheet. */
.install-steps p{margin:0 0 10px;color:var(--m-55);font-size:13.5px;line-height:1.5}
.install-steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.install-steps li{font-size:14px;line-height:1.5}
.install-steps b{font-weight:700}
.ios-share{display:inline-flex;vertical-align:-5px;color:var(--pink);margin:0 2px}

/* ============ Print: one clean A4 incident record (for HSE / insurers) ============
   The app is a dark full-screen PWA; when printing a single incident we drop the
   chrome and force black-on-white so it photocopies + files properly. */
@media print{
  body.printing-record{background:#fff !important;color:#000 !important}
  body.printing-record .stage>*{display:none !important}
  body.printing-record .navbot,body.printing-record .navtop,body.printing-record .foot,
  body.printing-record .glow-toast,body.printing-record .glow-celebrate{display:none !important}
  /* Show only the incident-detail overlay, laid out as a normal page. */
  body.printing-record #accDetailOverlay{position:static !important;display:block !important;background:#fff !important;inset:auto !important;padding:0 !important}
  body.printing-record #accDetailOverlay .modal{position:static !important;max-width:none !important;width:auto !important;box-shadow:none !important;border:0 !important;background:#fff !important;color:#000 !important;transform:none !important;max-height:none !important}
  body.printing-record .te-head-actions{display:none !important}
  body.printing-record .te-title{color:#000 !important;font-size:20px}
  body.printing-record .acc-detail,body.printing-record .acc-d-desc,body.printing-record .acc-d-v,body.printing-record .acc-d-k,body.printing-record .acc-d-shop,body.printing-record .acc-d-cat,body.printing-record .acc-d-sub{color:#000 !important}
  body.printing-record .acc-d-group{border-color:#ccc !important}
  body.printing-record .acc-d-actions,body.printing-record .sb-thumbs,body.printing-record .sb-thumb{display:none !important}
  body.printing-record .sb-chip,body.printing-record .sb-sev{color:#000 !important;background:#eee !important;border:1px solid #999 !important}
  @page{margin:18mm}
}

/* ---------- B2: shift sign-off + handover ---------- */
.eod-btn{display:flex;flex-direction:column;gap:2px;width:100%;margin:0 0 16px;padding:14px 18px;border-radius:16px;text-align:left;cursor:pointer;
  background:rgba(255,20,100,0.1);border:1px solid rgba(255,20,100,0.34);color:var(--text);transition:background .15s var(--ease),transform .1s var(--ease)}
.eod-btn:active{transform:scale(.99)}
@media (hover:hover){ .eod-btn:hover{background:rgba(255,20,100,0.16)} }
.eod-btn-t{font-size:15.5px;font-weight:700}
.eod-btn-s{font-size:12.5px;color:var(--m-50)}
/* shop competition — the owner league table */
.league{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.league-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.league-title{font-size:15px;font-weight:700}
.league-seg{flex:none}
.league-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.league-row:last-child{border-bottom:0}
.league-lead .league-name{color:var(--amber);font-weight:700}
.league-pos{width:26px;text-align:center;font-size:15px;flex:none}
.league-name{flex:none;min-width:92px;font-size:14.5px;font-weight:600}
.league-bar{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,0.06);overflow:hidden;min-width:50px}
.league-fill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--magenta),var(--pink))}
.league-lead .league-fill{background:linear-gradient(90deg,#d9a23a,#f0c66a)}
.league-pct{width:44px;text-align:right;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
/* ---------- Blind daily leaderboard banner (shop devices) — only ever names #1 ---------- */
.score-banner{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:12px 15px;border-radius:14px;
  background:rgba(255,255,255,0.03);border:1px solid var(--line-2)}
.score-banner.score-lead{background:linear-gradient(100deg,rgba(217,162,58,0.18),rgba(217,162,58,0.05));border-color:rgba(217,162,58,0.42)}
.score-medal{font-size:22px;line-height:1;flex:none}
.score-txt{font-size:14px;color:var(--text);line-height:1.4}
.score-txt b{font-weight:700}
.score-lead .score-txt b{color:#f0c66a}
/* ---------- Owner "Today's leaderboard" — raw completed-task count per shop ---------- */
.board{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.board-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.board-title{font-size:15px;font-weight:700}
.board-sub{font-size:12px;color:var(--m-45)}
.board-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.board-row:last-child{border-bottom:0}
.board-pos{width:26px;text-align:center;font-size:15px;flex:none;font-variant-numeric:tabular-nums;color:var(--m-50)}
.board-lead .board-pos{color:inherit}
.board-name{flex:none;min-width:92px;font-size:14.5px;font-weight:600}
.board-lead .board-name{color:#f0c66a}
.board-bar{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,0.06);overflow:hidden;min-width:50px}
.board-fill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--magenta),var(--pink));transition:width .5s var(--ease)}
.board-lead .board-fill{background:linear-gradient(90deg,#d9a23a,#f0c66a)}
.board-count{width:40px;text-align:right;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
/* sunbed lamp-hours + re-tube alerts */
.sb-card-hours{margin-left:auto;font-size:12px;font-weight:700;color:var(--m-45);font-variant-numeric:tabular-nums}
.sb-card-retube{box-shadow:inset 0 0 0 1.5px rgba(217,162,58,0.45)}
.rt-badge{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:9px}
.rt-badge.rt-due{color:var(--amber);background:rgba(217,162,58,0.14);border:1px solid rgba(217,162,58,0.32)}
.rt-badge.rt-overdue{color:var(--red);background:rgba(255,59,48,0.14);border:1px solid rgba(255,59,48,0.36)}
.rt-badge.rt-booked{color:#37d67a;background:rgba(55,214,122,0.12);border:1px solid rgba(55,214,122,0.3)}
/* 750h "coming up" — deliberately quieter than the amber "due" badge: this is a
   heads-up to get the supplier lined up, not something to act on today. */
.rt-badge.rt-soon{color:var(--m-45);background:rgba(255,255,255,0.05);border:1px solid var(--line-2)}
.rt-sec{margin:4px 0 14px;padding:14px 15px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid var(--line-2)}
.rt-sec-flag{background:rgba(217,162,58,0.07);border-color:rgba(217,162,58,0.28)}
.rt-sec-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rt-sec-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m-45)}
.rt-hours{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:2px}
.rt-hours-u{font-size:14px;font-weight:600;color:var(--m-45);margin-left:1px}
.rt-hours-none{color:var(--m-40)}
.rt-updated{font-size:11.5px;color:var(--m-40);margin-top:3px}
.rt-status{margin-top:10px}
.rt-line{font-size:13px;line-height:1.45}
.rt-line.rt-due{color:var(--amber)}
.rt-line.rt-overdue{color:var(--red)}
.rt-line.rt-booked{color:#37d67a}
.rt-line.rt-soon{color:var(--m-45)}
.rt-line.rt-ok{color:var(--m-50)}
.rt-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.rt-act{flex:none}
.rt-pred{margin-top:8px;font-size:12.5px;color:var(--m-55)}
.rt-pred b{color:var(--text);font-weight:700}
.rt-pred-none{color:var(--m-40);font-size:12px}
/* owner: shop access codes */
.sc-list{display:flex;flex-direction:column;gap:13px;margin-top:6px}
.sc-row{display:flex;flex-direction:column;gap:7px}
.sc-name{font-size:14px;font-weight:600}
.sc-set{font-size:11.5px;font-weight:700;color:#37d67a;margin-left:6px}
.sc-entry{display:flex;gap:8px}
.sc-input{flex:1;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.sc-set-btn{flex:none}
/* owner: assign which manager runs each shop (toggle chips) */
.smg-list{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.smg-shop-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.smg-shop-name{font-size:14px;font-weight:700}
.smg-shop-cur{font-size:12px;color:var(--m-50);text-align:right}
.smg-none{color:var(--m-40);font-style:italic}
.smg-chips{display:flex;flex-wrap:wrap;gap:8px}
.smg-chip{font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:7px 12px;border-radius:999px;
  color:var(--m-55);background:rgba(255,255,255,0.04);border:1px solid var(--line-2);white-space:nowrap;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.smg-chip.on{color:var(--pink);background:rgba(255,20,100,0.12);border-color:rgba(255,20,100,0.4)}
.smg-chip:disabled{opacity:.5;cursor:default}
/* cover QR shown on the shop computer */
.cqr-modal{text-align:center}
.cqr-code{width:min(300px,72vw);margin:10px auto 4px;background:#fff;padding:14px;border-radius:16px}
.cqr-code svg{display:block;width:100%;height:auto}
.cover-qr-btn{background:transparent;color:var(--m-50);border:1px solid var(--line);font-weight:600}
/* (.switch-shop-btn removed 3 Aug — Switch shop moved off the top row and behind
   a tap on the shop name; it's also still in the nav menu under Device.) */
.signoff-btn{display:block;width:100%;margin-top:14px;padding:14px 18px;border-radius:14px;
  border:1px solid rgba(255,20,100,0.34);background:rgba(255,20,100,0.10);color:var(--pink);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:center}
.signoff-btn:hover{background:rgba(255,20,100,0.16)}
.signoff-missed{margin-bottom:12px}
.signoff-missed-label{font-size:13px;font-weight:600;margin-bottom:5px}
.signoff-allgood{font-size:14px;color:var(--m-45);padding:6px 0 4px}
/* simplified close (16 Jul): headline count + an optional peek, no per-task reasons */
.signoff-summary{font-size:15px;line-height:1.4;padding:2px 0 4px}
.signoff-summary b{font-weight:700;font-variant-numeric:tabular-nums}
.signoff-peek{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0 2px;margin:0;color:var(--pink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.signoff-peek-chev{display:inline-flex;color:var(--m-40);transition:transform .18s var(--ease)}
.signoff-peek-chev svg{width:15px;height:15px}
.signoff-peek-chev.open{transform:rotate(90deg)}
.signoff-list{margin:8px 0 4px;padding:10px 14px;list-style:none;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid var(--line);max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.signoff-list li{font-size:13px;color:var(--m-55);line-height:1.35}
.ho-panel{margin:0 0 16px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(217,162,58,0.08)}
.ho-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ho-head b{font-size:14px;font-weight:600;color:var(--amber)}
.ho-msg{font-size:14px;line-height:1.5;white-space:pre-wrap}
.ho-missedhead{font-size:12px;font-weight:600;color:var(--m-45);margin-top:8px}
.ho-missed{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.5}
.ho-reason{color:var(--m-45)}
/* time-window tag on a missed task, so repeats of one task read as distinct (mop dupe fix) */
.ho-win{font-size:11px;color:var(--amber);opacity:.85;font-weight:600;white-space:nowrap}
.signoff-missed-win{font-size:11px;color:var(--amber);opacity:.85;font-weight:600;margin-left:4px}
/* handover media — capture (sign-off) + playback (morning) */
.ho-add-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.ho-add{flex:1 1 auto;min-width:92px;padding:11px 10px;border-radius:12px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line-2);background:rgba(255,255,255,0.04);color:var(--text);cursor:pointer}
.ho-add:disabled{opacity:.5;cursor:default}
.ho-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ho-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;font-size:13px;font-weight:600;
  border:1px solid rgba(217,162,58,0.32);background:rgba(217,162,58,0.10);color:var(--amber)}
.ho-chip-busy{color:var(--m-45);border-color:var(--line-2);background:rgba(255,255,255,0.04);padding-right:12px}
.ho-chip-rm{border:0;background:rgba(255,255,255,0.08);color:var(--text);width:20px;height:20px;border-radius:50%;
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.ho-chip-rm::after{content:"";position:absolute;inset:-12px}   /* 44px hit area */
.ho-media{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ho-mbtn{padding:9px 14px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1px solid rgba(217,162,58,0.38);background:rgba(217,162,58,0.14);color:var(--amber)}
.ho-mbtn:active{transform:scale(0.97)}
.photo-stage-audio{min-height:96px;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(255,255,255,0.03)}
.photo-stage-audio audio{width:100%}
.photo-stage-pdf{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px;background:rgba(255,255,255,0.03)}
.pdf-frame{display:block;width:100%;height:62vh;border:0;border-radius:10px;background:#fff}
.pdf-fallback{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--m-45);font-size:14px}
.pdf-open{text-align:center;padding:4px}
/* staff administration (owners + managers) */
.sa-wait{padding:18px 2px;color:var(--m-45);font-size:14px;text-align:center}
.sa-add-btn{width:100%;margin:2px 0 12px;padding:12px;font-size:14px;font-weight:600}
.sa-list{display:flex;flex-direction:column;gap:8px}
.sa-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(255,255,255,0.03)}
.sa-row-off{opacity:.6}
/* The name column keeps a readable floor and the actions wrap into what's left —
   without the floor, six action buttons squeezed the name to 0px wide and its
   text painted underneath them (the broken Staff screen, 28 Jul). */
.sa-main{flex:1 1 auto;min-width:130px}
.sa-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sa-meta{font-size:12px;color:var(--m-45);margin-top:2px}
.sa-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:6px}
.sa-off{background:rgba(255,90,90,0.14);color:#ff8a8a}
.sa-tmp{background:rgba(217,162,58,0.14);color:var(--amber)}
.sa-ok{background:rgba(52,199,89,0.15);color:#5fd97f}
/* Connecteam link picker (B24) — sits alongside the row's mini buttons. */
.sa-ctsel{background:#141416;color:var(--text);border:1px solid var(--line-2);border-radius:9px;
  padding:6px 8px;font:inherit;font-size:12.5px;max-width:170px}
.sa-acts{display:flex;gap:6px;flex-shrink:1;min-width:0}
.sa-acts-none{font-size:12px;color:var(--m-45);font-style:italic}
/* home-shop picker (cover accountability) */
.sa-nohome{color:var(--pink);font-weight:600}
/* a floater has no home shop BY DESIGN — informational, not the pink warning */
.sa-float{color:#8ab4ff;font-weight:600}
.sa-home-opts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sa-home-opt{width:100%;text-align:left;padding:11px 14px}
.sa-home-cur{border-color:var(--pink);color:var(--pink);font-weight:700}
.sa-home-none{color:var(--m-45)}
.sa-mini{padding:7px 11px;font-size:12.5px;font-weight:600}
.sa-danger{color:#ff8a8a;border-color:rgba(255,90,90,0.32);background:rgba(255,90,90,0.08)}
.sa-hint{font-size:12px;color:var(--m-45);margin-top:-2px}
/* A staff row now carries up to 6 actions (Call + Add/Edit number joined View as /
   Home / Reset PIN / Remove on 26 Jul), which overflowed the card on a phone —
   the buttons ran off-screen and collided with the name. Wrap, and stack the
   actions under the name on narrow screens. */
.sa-acts{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:600px){
  .sa-row{flex-direction:column;align-items:stretch}
  .sa-acts{justify-content:flex-start;margin-top:2px}
  .sa-acts-none{text-align:left}
}
/* tap-to-call + Connecteam number sync (staff admin) */
.sa-call{color:var(--hl-green);border-color:rgba(48,209,88,0.32);background:rgba(48,209,88,0.08);
  text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.sa-sync-btn{margin-top:-6px}
.sa-sync-report{border:1px solid var(--line-2);background:rgba(255,255,255,0.03);border-radius:12px;
  padding:11px 12px;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.sa-sync-line{font-size:12.5px;color:var(--m-45);line-height:1.45}
.sa-sync-line b{color:#f5f5f7;font-weight:600}
.sa-sync-ok b{color:var(--hl-green)}
.sa-sync-warn b{color:var(--amber)}
.sa-sync-x{align-self:flex-start;margin-top:2px}

/* ---- "In the shop right now" (owner shop preview) ---- */
.os-card{padding:18px 16px;margin-bottom:14px}
.os-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.os-title{font-size:15px;font-weight:700;letter-spacing:-0.01em}
.os-asof{font-size:11.5px;color:var(--m-40);font-variant-numeric:tabular-nums}
.os-money{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:0 0 12px;margin-bottom:12px;
  border-bottom:1px solid var(--line)}
.os-money-l{font-size:12.5px;color:var(--m-45)}
.os-money-amt{font-size:22px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;margin-right:2px}
.os-list{display:flex;flex-direction:column;gap:8px}
.os-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(255,255,255,0.03)}
.os-row-next{opacity:.72}
/* booked off but still rostered — quieter again, and no call button */
.os-row-away{opacity:.5}
.os-row-away .os-nm{text-decoration:line-through;text-decoration-thickness:1px}
.os-who{min-width:0}
.os-nm{font-size:14.5px;font-weight:600;display:block}
.os-meta{font-size:12px;color:var(--m-45);margin-top:2px;display:block}
.os-meta b{color:var(--amber);font-weight:700}
.os-call{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:11px;
  font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  color:var(--hl-green);border:1px solid rgba(48,209,88,0.32);background:rgba(48,209,88,0.10)}
.os-call:active{background:rgba(48,209,88,0.2)}
.os-nonum{flex:none;font-size:12px;color:var(--m-40);font-style:italic}
.os-next-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--m-40);margin:6px 0 -2px}
.os-wait{font-size:13px;color:var(--m-45);padding:2px 0}
.os-err{color:var(--amber)}
/* requires_reading input (e.g. fridge temp) */
.task-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;min-width:0}
.reading-tag{color:var(--amber);border-color:rgba(217,162,58,0.32);background:rgba(217,162,58,0.08)}
.reading-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.reading-lbl{font-size:12.5px;color:var(--m-45)}
.reading-input{width:110px;max-width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.04);color:var(--text);font:inherit;font-size:16px}   /* 16px: stops iOS zooming/lurching on focus */
.reading-input:focus{outline:none;border-color:var(--magenta)}
.reading-temp{display:inline-flex;align-items:center;gap:8px}
.reading-input-temp{width:96px;text-align:center}
.reading-sign{flex:0 0 auto;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.04);color:var(--text);font:inherit;font-size:22px;line-height:1;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.reading-sign:active{transform:scale(0.94)}
.reading-sign:focus-visible{outline:none;border-color:var(--magenta)}
/* two-button sign selector — staff must tick − or + (no default) */
.reading-signs{flex:0 0 auto;display:inline-flex;gap:6px}
.reading-sign2{width:44px;height:42px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.04);color:var(--m-45);font:inherit;font-size:22px;line-height:1;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  transition:border-color .12s,background .12s,color .12s}
.reading-sign2:active{transform:scale(0.94)}
.reading-sign2:focus-visible{outline:none;border-color:var(--magenta)}
.reading-sign2.on{background:var(--magenta);border-color:var(--magenta);color:#fff}
.reading-unit{font-size:13px;color:var(--m-45);font-weight:600}
/* freezer: a fixed, non-interactive "−" (the value is always recorded below zero) */
.reading-temp-fz{gap:6px}
.reading-fixed-sign{flex:0 0 auto;width:34px;height:42px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.04);color:var(--text);font-size:22px;line-height:1;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
/* cash float count: a fixed "£" in front, same furniture as the freezer's "−" */
.reading-cash{display:inline-flex;align-items:center;gap:6px}
.reading-input-cash{width:110px;text-align:center;font-variant-numeric:tabular-nums}
.reading-hint{flex-basis:100%;font-size:12px;color:var(--m-45);margin-top:2px}
.reading-chip{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:8px;
  background:rgba(217,162,58,0.12);color:var(--amber);font-size:12px;font-weight:600}
/* B4 — anonymous cleandown feedback */
.nf-btn{display:block;width:100%;margin-top:10px;padding:11px 16px;border-radius:14px;border:1px solid var(--line-2);
  background:rgba(255,255,255,0.03);color:var(--m-45);font:inherit;font-size:13px;cursor:pointer;text-align:center}
.nf-btn:hover{background:rgba(255,255,255,0.06)}
.nf-blurb{font-size:13px;color:var(--m-45);line-height:1.5;margin-bottom:10px}
.nf-item{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.nf-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nf-item-head b{font-size:14px;font-weight:600}
.nf-item-date{font-size:12px;color:var(--m-45)}
.nf-item-note{font-size:13px;line-height:1.5;margin-top:6px;white-space:pre-wrap}
.nf-item-actions{display:flex;gap:16px;margin-top:8px}

/* ============ Tactile press feedback (mount-independent, snappy) ============ */
/* A slight, springy scale-down on press with a smooth settle-back on release —
   the iOS "this is tappable" tactile signature. Transition-based, so it never
   replays on a live re-render. */
.task:active,.tile:active,.eod-btn:active,.seg-btn:active,.sb-card:active,.acc-card:active,
.nav-tab:active,.pin-key:active,.chip-btn:active,.plan-row:active,.slog-card:active,
.shopcard:active,.task-info:active,.hide-toggle:active,.viewlink:active,.mgd-tile:active{
  transform:scale(.97);transition:transform .16s cubic-bezier(.2,.8,.3,1)
}
/* Gentle reveal for an ⓘ task-detail drop-down. It's toggled in place (not via a
   re-render), so this plays exactly once when the drop-down opens. */
.task-detail:not([hidden]){animation:detailIn .22s var(--ease)}
@keyframes detailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Respect reduced-motion: kill the celebratory + press + entrance motion. */
@media(prefers-reduced-motion:reduce){
  .task:active,.tile:active,.eod-btn:active,.seg-btn:active,.sb-card:active,.acc-card:active,
  .nav-tab:active,.pin-key:active,.chip-btn:active,.plan-row:active,
  .shopcard:active,.task-info:active,.hide-toggle:active,.viewlink:active,.mgd-tile:active{transform:none}
  .ring-arc{transition:none}
  .task-detail:not([hidden]){animation:none}
}

/* ---------- Manager dashboard (single-shop overview overlay) ---------- */
.mgd-modal{max-width:560px;width:100%}
.mgd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 6px}
.mgd-hi{font-size:22px;font-weight:800;letter-spacing:-.01em}
.mgd-shop{color:var(--m-50);font-size:13px;margin-top:2px}
.mgd-body{padding:8px 20px 22px;display:flex;flex-direction:column;gap:14px}
.mgd-ring-row{display:flex;align-items:center;gap:16px;padding:6px 0 2px}
.mgd-ring{position:relative;width:78px;height:78px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--magenta) calc(var(--p)*1%), rgba(255,255,255,0.07) 0);}
.mgd-ring::after{content:"";position:absolute;top:9px;left:9px;width:60px;height:60px;border-radius:50%;background:var(--card)}
.mgd-ring span{position:relative;z-index:1;font-size:21px;font-weight:800}
.mgd-ring span i{font-style:normal;font-size:12px;color:var(--m-55);margin-left:1px}
.mgd-ring-meta{display:flex;flex-direction:column;gap:5px}
.mgd-ring-h{font-size:16px;font-weight:700}
.mgd-alert{color:var(--amber);font-weight:700;font-size:13.5px}
.mgd-ok{color:var(--m-55);font-size:13.5px}
.mgd-bars{margin:2px 0}
.mgd-sec-h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pink);margin-top:4px}
.mgd-muted{color:var(--m-50);font-size:14px;padding:8px 2px}
.mgd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.mgd-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border-radius:16px;
  background:rgba(255,255,255,0.03);border:1px solid var(--line-2);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer}
.mgd-tile-ic{width:22px;height:22px;color:var(--pink)}
.mgd-tile-ic svg{width:100%;height:100%}
/* open shop-issue / sunbed-fault count badge on a dashboard jump tile */
.mgd-tile-badge{position:absolute;top:8px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--amber);color:#1a1206;font-size:11px;font-weight:800;line-height:18px;text-align:center}
@media(hover:hover){.mgd-tile:hover{background:rgba(255,255,255,0.06)}}
.mgd-tile:active{transform:scale(.97)}

/* ---------- Silent distress alert (in the Help sheet) ---------- */
.distress-btn{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:15px 16px;margin:0 0 12px;
  border-radius:16px;cursor:pointer;background:rgba(255,59,48,0.12);border:1px solid rgba(255,59,48,0.42);color:#ff6b60}
.distress-btn:disabled{opacity:.6;cursor:default}
.distress-btn-t{font-size:16px;font-weight:800;letter-spacing:-.01em}
.distress-btn-s{font-size:12.5px;color:var(--m-55);font-weight:500}
@media(hover:hover){.distress-btn:hover{background:rgba(255,59,48,0.18)}}
.distress-btn:active{transform:scale(.99)}
.distress-note{padding:14px 16px;margin:0 0 12px;border-radius:16px;font-size:14px;font-weight:600;line-height:1.45}
.distress-ok{background:rgba(80,200,140,0.10);border:1px solid rgba(80,200,140,0.30);color:rgba(120,200,150,0.95)}
.distress-fail{background:rgba(217,162,58,0.12);border:1px solid rgba(217,162,58,0.34);color:var(--amber)}
/* full-screen escalation — takes over the whole screen so an accidental tap can't fire it */
.panic-ovl{z-index:9994}   /* emergency Help sheet must sit ABOVE the forced-update gate (9990) */
.distress-full{position:fixed;inset:0;z-index:9995;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(10,6,6,0.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.ds-card{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px}
.ds-badge{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800}
.ds-badge-warn{background:rgba(255,59,48,0.14);border:2px solid rgba(255,59,48,0.5)}
.ds-badge-ok{background:rgba(80,200,140,0.14);border:2px solid rgba(80,200,140,0.5);color:#7fd39a}
.ds-badge-fail{background:rgba(217,162,58,0.16);border:2px solid rgba(217,162,58,0.5);color:var(--amber)}
.ds-title{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
.ds-text{font-size:15px;line-height:1.5;color:var(--m-70,#c7c7c7);margin:0;max-width:34ch}
.ds-btn{width:100%;padding:18px;border-radius:16px;font-size:17px;font-weight:800;cursor:pointer;border:1px solid transparent}
.ds-btn:active{transform:scale(.99)}
.ds-btn-go,.ds-btn-send{background:#e5342a;color:#fff;box-shadow:0 6px 22px rgba(229,52,42,0.4)}
.ds-btn-cancel{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);color:#fff}
.ds-btn-done{background:rgba(80,200,140,0.16);border-color:rgba(80,200,140,0.4);color:#8fe0aa}
.ds-btn-back{background:rgba(217,162,58,0.16);border-color:rgba(217,162,58,0.4);color:var(--amber)}
.ds-spinner{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,0.15);border-top-color:#e5342a;animation:ds-spin .8s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ---------- SalonTracker "Full figures" hub (owners) ---------- */
.rev-figures-cta{display:block;width:100%;margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2,rgba(255,255,255,0.12));background:rgba(255,255,255,0.04);color:var(--text,#fff);font-size:14px;font-weight:600;cursor:pointer;text-align:center}
.rev-figures-cta:active{transform:scale(.99)}
.fig-modal{max-width:900px}
.fig-tabs{margin:2px 0 14px}
.fig-body{min-height:120px}
.fig-note{font-size:12px;color:var(--m-55,#9a9a9a);margin:-6px 2px 12px;text-align:center}
.fig-total{font-size:15px;color:var(--m-70,#c7c7c7);margin:0 2px 12px;text-align:center}
.fig-total b{color:var(--text,#fff);font-weight:800}
.fig-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.fig-grid{grid-template-columns:1fr 1fr 1fr}}
.fig-card{background:rgba(255,255,255,0.035);border:1px solid var(--line-2,rgba(255,255,255,0.1));border-radius:14px;padding:14px}
.fig-card-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:10px;color:var(--text,#fff)}
.fig-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.fig-load{font-size:13px;color:var(--m-55,#9a9a9a);padding:8px 0}
.fig-loading{display:flex;flex-direction:column;align-items:center;gap:11px;padding:26px 0}
.fig-spinner{width:38px;height:38px;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--pink,#ff1464));-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);animation:fig-spin .8s linear infinite;filter:drop-shadow(0 0 7px rgba(255,20,100,0.5))}
@keyframes fig-spin{to{transform:rotate(360deg)}}
.fig-loadtxt{font-size:12.5px;color:var(--m-55,#9a9a9a)}
/* redesign: quieter chrome — these were bright-pink pills competing with the tasks;
   ghost them so the task list is what draws the eye. */
.chrome-signin{background:transparent;color:var(--m-55);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
@media(hover:hover){.chrome-signin:hover{color:var(--text);border-color:var(--line)}}
.chrome-signin:active{transform:scale(.96)}
.fig-err{font-size:13px;color:var(--amber,#e0a63e);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fig-retry{padding:5px 10px;border-radius:9px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.05);color:var(--text,#fff);font-size:12px;font-weight:600;cursor:pointer}
.fig-big{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text,#fff)}
.fig-sub{font-size:12px;color:var(--m-55,#9a9a9a);margin-top:3px}
.fig-rows{display:flex;flex-direction:column;gap:6px}
.fig-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--m-70,#c7c7c7)}
.fig-row b{color:var(--text,#fff);font-weight:700}
.fig-row-lead{font-size:16px;padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,0.08)}
.fig-row-lead span{color:var(--text,#fff);font-weight:600}
.fig-crown{font-size:13px}
.fig-chart-sec{margin-top:12px}
.fig-chart-sec:first-child{margin-top:0}
.fig-chart-t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--m-55,#9a9a9a);margin-bottom:6px}
.fig-bars{display:flex;flex-direction:column;gap:5px}
.fig-bar{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:8px;font-size:12px;color:var(--m-70,#c7c7c7)}
.fig-bar-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fig-bar-track{height:8px;border-radius:5px;background:rgba(255,255,255,0.07);overflow:hidden}
.fig-bar-fill{display:block;height:100%;border-radius:5px;background:var(--pink,#ff1464)}
.fig-bar-val{font-weight:700;color:var(--text,#fff);white-space:nowrap}
.fig-none{font-size:12px;color:var(--m-55,#9a9a9a);padding:2px 0}
.fig-spark{width:100%;height:34px;color:var(--pink,#ff1464);display:block}
.fig-spark-tot{font-size:12px;color:var(--m-70,#c7c7c7);font-weight:700}

/* ---------- Owner nightly Sales Report ---------- */
.rpt-modal{max-width:560px}
.rpt-body .up{color:#34c759}
.rpt-body .down{color:#ff5a5f}
.rpt-hero{text-align:center;padding:10px 0 6px}
.rpt-hero-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--m-55,#9a9a9a)}
.rpt-hero-amt{font-size:44px;font-weight:800;letter-spacing:-.02em;color:var(--text,#fff);line-height:1.05;margin:4px 0 10px}
.rpt-tag{display:inline-block;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,0.06)}
.rpt-tag.up{color:#34c759;background:rgba(52,199,89,0.12)}
.rpt-tag.down{color:#ff5a5f;background:rgba(255,90,95,0.12)}
.rpt-context{text-align:center;margin:8px 0 2px}
.rpt-avg,.rpt-wk{font-size:13px;color:var(--m-70,#c7c7c7);margin:3px 0}
.rpt-avg b,.rpt-wk b{color:var(--text,#fff)}
.rpt-shops-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--m-55,#9a9a9a);margin:18px 2px 6px}
.rpt-shops{display:flex;flex-direction:column}
.rpt-shop{display:flex;align-items:center;gap:10px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,0.06)}
.rpt-shop:last-child{border-bottom:0}
.rpt-shop-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.rpt-shop-nm{font-size:16px;font-weight:600;color:var(--text,#fff)}
.rpt-medal{font-size:14px}
.rpt-shop-d{font-size:12px;font-weight:700}
.rpt-shop-d.up{color:#34c759}
.rpt-shop-d.down{color:#ff5a5f}
.rpt-shop-amt{margin-left:auto;font-size:18px;font-weight:800;color:var(--text,#fff)}
.rpt-more{display:block;width:100%;margin-top:18px;padding:13px;border-radius:12px;border:1px solid var(--line-2,rgba(255,255,255,0.12));background:rgba(255,255,255,0.04);color:var(--text,#fff);font-size:14px;font-weight:600;cursor:pointer}
.rpt-more:active{transform:scale(.99)}
.rpt-empty{font-size:14px;color:var(--m-55,#9a9a9a);text-align:center;padding:30px 12px;line-height:1.5}

/* B11: weekly-jobs nudge + catch-up pins (daily list) */
.cu-block{margin:14px 0 4px;padding:14px 15px;border-radius:14px;background:rgba(255,90,95,0.07);border:1px solid rgba(255,90,95,0.3)}
.cu-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#ff5a5f}
.cu-sub{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--m-55)}
.cu-sub b{color:var(--text)}
.cu-row{display:flex;align-items:center;gap:10px;padding:10px 0 2px;margin-top:8px;border-top:1px solid rgba(255,90,95,0.18)}
.cu-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cu-label{font-size:14.5px;font-weight:600}
.cu-behind{font-size:11.5px;font-weight:700;color:#ff5a5f}
.cu-tick{flex:none;background:rgba(255,255,255,0.08);border:1px solid var(--line-2);border-radius:10px;padding:8px 14px;color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cu-tick:active{transform:scale(.97)}
.cu-tick:disabled{opacity:.5}
.cu-signin{flex:none;font-size:11.5px;color:var(--m-40)}
.wk-nudge{display:flex;flex-direction:column;gap:3px;width:100%;margin:10px 0 4px;padding:13px 15px;border-radius:14px;text-align:left;background:rgba(217,162,58,0.08);border:1px solid rgba(217,162,58,0.3);color:var(--text);font:inherit;cursor:pointer}
.wk-nudge:active{transform:scale(.99)}
.wk-nudge-t{font-size:14px;font-weight:700;color:var(--amber)}
.wk-nudge-s{font-size:12.5px;color:var(--m-55)}

/* B11: weekly/monthly report view */
.rpt2-shop{margin-top:14px;padding:14px 15px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid var(--line-2)}
.rpt2-shop-head{display:flex;align-items:center;gap:8px}
.rpt2-shop-nm{font-size:15.5px;font-weight:700}
.rpt2-shop-amt{margin-left:auto;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.rpt2-sec{margin-top:11px}
.rpt2-sec-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--m-55)}
.rpt2-list{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.rpt2-list li{font-size:13.5px;line-height:1.4}
.rpt2-dim li{color:var(--m-55)}
.rpt2-n{font-weight:700;color:#ff5a5f}
.rpt2-clean{margin-top:10px;font-size:13px;font-weight:600;color:var(--hl-green)}

/* B14: cover transparency notice (shown before a cover sign-in) */
.cover-notice{margin-top:16px;padding:13px 15px;border-radius:12px;background:rgba(217,162,58,0.08);border:1px solid rgba(217,162,58,0.28)}
.cover-notice-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--amber)}
.cover-notice-list{margin:7px 0 0;padding-left:17px;display:flex;flex-direction:column;gap:4px}
.cover-notice-list li{font-size:12.5px;line-height:1.4;color:var(--m-55)}

/* Lee's H&S/HR home — minimal, accident-book focused */
.hs-home .hs-tag{font-size:12px;font-weight:700;color:var(--m-55);letter-spacing:.04em;margin-left:8px}
.hs-hi{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin-top:6px}
.hs-sub{font-size:14px;color:var(--m-55);margin:4px 0 18px}
.hs-card{display:block;width:100%;text-align:left;margin-bottom:12px;padding:18px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid var(--line-2);color:var(--text);font:inherit;cursor:pointer;transition:background .18s var(--ease)}
.hs-card:active{transform:scale(.99)}
@media(hover:hover){.hs-card:hover{background:rgba(255,255,255,0.07)}}
.hs-card-main{background:rgba(255,20,100,0.10);border-color:rgba(255,20,100,0.35)}
@media(hover:hover){.hs-card-main:hover{background:rgba(255,20,100,0.15)}}
.hs-card-t{font-size:17px;font-weight:700}
.hs-card-s{font-size:13px;color:var(--m-55);margin-top:3px}
.hs-card-s b{color:var(--text);font-variant-numeric:tabular-nums}
.hs-soon{margin-top:18px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px dashed var(--line-2)}
.hs-soon-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--m-45)}
.hs-soon-t{font-size:12.5px;color:var(--m-55);margin-top:5px;line-height:1.45}
.hs-help{margin-top:22px;display:flex;justify-content:center}

/* =====================================================================
   FULL CHECK-OVER (2026-07-12) — scroll, iPad mini, motion.
   ===================================================================== */

/* Modern small-viewport units: vh on iOS overshoots the visible area (the
   address bar / home indicator), which squeezed capped modals. svh is the
   real visible height — override every vh cap where supported. */
@supports (height: 1svh){
  .home2{min-height:100svh}
  .login{min-height:82svh}
  .sb-modal{max-height:94svh}
  .tm-modal{max-height:92svh}
  .te-modal{max-height:92svh}
  .bella-modal{height:min(620px,92svh)}
  .upd-gate-card{max-height:92svh}
  .grid-scroll{max-height:70svh}
  .pin-people{max-height:56svh}
  .panic-list{max-height:62svh}
  .nav-panel{max-height:78svh}
  .photo-shot{max-height:64svh}
}

/* Phone: the task grid becomes a full-height sheet — the table gets the whole
   screen edge-to-edge instead of a cramped box, and cells grow to finger size. */
@media (max-width:640px){
  .modal-overlay:has(> .grid-modal){padding:10px;padding-top:calc(10px + env(safe-area-inset-top))}
  .grid-modal{width:100%;max-width:none;height:100%;display:flex;flex-direction:column;padding:16px 14px 0}
  .grid-modal .tm-head{margin-bottom:10px}
  .grid-controls{padding:0 2px 8px}
  .grid-search-row{padding:0 2px 8px}
  .grid-sub{padding:0 2px 8px}
  .grid-scroll{flex:1 1 auto;min-height:0;max-height:none;margin:0 -14px;padding-bottom:env(safe-area-inset-bottom)}
  .grid-cell{padding:12px 8px}
  th.grid-th-task[scope="row"]{padding:11px 10px}
  .grid-th-task{min-width:116px;max-width:160px}
}

/* iPad + desktop: the "app" panels (fire log, inspections, accident book,
   reports, notifications…) get room to breathe instead of a phone-width
   column floating in space. */
@media (min-width:700px){
  .sb-modal{max-width:560px}
  .tm-modal{max-width:560px}
  .acc-modal{max-width:600px}
  .rpt-modal{max-width:620px}
}

/* iPad portrait (640–759px: still the bubble-nav layout): the Report/Manage/More
   sheet floats as a centred panel above the nav bar instead of a full-width
   phone sheet stretched across the tablet. */
@media (min-width:640px) and (max-width:759.98px){
  .nav-panel{
    left:50%;right:auto;transform:translateX(-50%);width:440px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    border:1px solid var(--line-2);border-radius:20px;
  }
  .nav-grab{display:none}
}

/* View transition — plays ONLY when renderApp is told the base view changed
   (the .vt-in class is included on that render alone, so the 6s poll's
   innerHTML swaps never replay it — the v5.28.1 rule). */
@media (prefers-reduced-motion: no-preference){
  .vt-in{animation:viewIn .28s var(--ease) both}
  @keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ============================================================================
   NEW COMMAND-CENTRE HOME  (renderHomeV2 — flag-gated via ?home=new)
   ============================================================================ */
/* No own gradient: the body already paints the identical FIXED full-page glow.
   .home2 starts ~86px down and is a centred 1180px box, so a second gradient
   clipped to that box created a hard rectangular seam top-left (the "fade starts
   at the wrong point"). One body gradient = seamless, full-bleed. */
.home2{min-height:100vh;}
/* body — the fixed .navtop is the ONLY top bar (the old .h2-bar top-bar CSS is
   retired); .stage already clears it + owns the side gutters, so keep side
   padding tiny here (wider content on phones). Bottom: home-indicator room only
   — the fixed bottom nav this used to clear is gone. */
.h2-body{max-width:1180px;margin:0 auto;padding:6px 2px 40px;}
.h2-toprow{display:flex;justify-content:flex-end;gap:8px;margin-bottom:6px;}
.h2-toolbtn{background:rgba(255,255,255,0.05);border:1px solid var(--line-2);color:var(--m-55);font:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;min-height:40px;border-radius:999px;cursor:pointer;}
@media(hover:hover){.h2-toolbtn:hover{color:var(--text);border-color:var(--line)}}
.h2-toolbtn:active{transform:scale(.97)}
.h2-greet{margin-bottom:22px;}
.h2-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,94,148,0.9);margin-bottom:9px;}
.h2-hi{font-family:"Gilroy","Poppins",sans-serif;font-size:27px;font-weight:700;letter-spacing:-0.02em;line-height:1.05;margin:0;color:#fff;}
/* owner cards */
.h2-cards{display:grid;grid-template-columns:1fr 1.35fr;gap:18px;margin-bottom:20px;}
@media(max-width:720px){.h2-cards{grid-template-columns:1fr;}}
.h2-card{text-align:left;width:100%;padding:18px 20px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.09);box-shadow:0 16px 40px rgba(0,0,0,0.42),inset 0 1px 0 rgba(255,255,255,0.08);color:var(--text);font:inherit;display:block;}
button.h2-card{cursor:pointer;}
.h2-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.h2-card-t{font-size:14.5px;font-weight:600;letter-spacing:-0.01em;color:#fff;}
.h2-tk-delta{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:7px;}
.h2-tk-delta.up{color:#ff5e94;background:rgba(255,20,100,0.1);border:1px solid rgba(255,20,100,0.22);}
.h2-tk-delta.down{color:var(--amber);background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.25);}
.h2-tk-total{font-size:27px;font-weight:700;letter-spacing:-0.02em;line-height:1;color:#fff;}
.h2-card-div{height:1px;background:rgba(255,255,255,0.07);margin:14px 0;}
.h2-tk-list{display:flex;flex-direction:column;gap:9px;}
.h2-tk-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.h2-tk-shop{font-size:13px;color:var(--m-45);}
.h2-tk-amtcol{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.15;}
.h2-tk-amt{font-size:13.5px;font-weight:600;color:#f5f5f7;font-variant-numeric:tabular-nums;}
/* Dashboard shop row (26 Jul): shop + who's on site (tap to call) on the left,
   takings + vs-last-week + customers on the right. Two lines, no tapping into a
   shop. align-items:flex-start so a wrapped list of names keeps the money aligned
   to the shop name, not floating in the middle. */
.h2-tk-row2{align-items:flex-start;padding:7px 0;border-top:1px solid var(--line-2);}
.h2-tk-row2:first-child{border-top:0;}
.h2-tk-l{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
.h2-tk-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.15;flex-shrink:0;}
.h2-tk-row2 .h2-tk-shop{font-size:13px;font-weight:600;color:#f5f5f7;}
.h2-tk-who{display:flex;flex-wrap:wrap;gap:4px 6px;}
.h2-tk-dim{font-size:11.5px;color:var(--m-40);font-style:italic;}
/* One person = name + two compact icon buttons (call, WhatsApp). Real <a> links so
   iOS dials / opens WhatsApp natively; they carry no data-action, so the card's own
   rev-open never swallows the tap. Sized to keep a shop row ONE line tall. */
.h2-tk-p{display:inline-flex;align-items:center;gap:4px;}
.h2-tk-nm{font-size:11.5px;color:var(--m-45);}
.h2-tk-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:999px;text-decoration:none;flex:none;}
.h2-tk-tel{color:#7ee08a;background:rgba(126,224,138,0.10);border:1px solid rgba(126,224,138,0.30);}
.h2-tk-tel:active{background:rgba(126,224,138,0.22);}
.h2-tk-wa{color:#25d366;background:rgba(37,211,102,0.10);border:1px solid rgba(37,211,102,0.32);}
.h2-tk-wa:active{background:rgba(37,211,102,0.22);}
.h2-tk-noph{font-size:11.5px;color:var(--m-45);padding:2px 0;}
.h2-tk-cust{font-size:11px;color:var(--m-40);font-variant-numeric:tabular-nums;}
.h2-tk-d{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.h2-tk-d.up{color:var(--hl-green);}
.h2-tk-d.down{color:var(--hl-red);}
.h2-tk{cursor:pointer;}
.h2-tk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;}
.h2-tk-asof{font-size:11.5px;color:var(--m-45);font-variant-numeric:tabular-nums;}
.h2-tk-refresh{font:inherit;font-size:11.5px;font-weight:600;color:#ff5e94;background:rgba(255,20,100,0.08);border:1px solid rgba(255,20,100,0.2);border-radius:8px;padding:5px 11px;cursor:pointer;}
.h2-tk-refresh:hover{background:rgba(255,20,100,0.14);}
.h2-tk-refresh:disabled{opacity:0.5;cursor:default;}
.h2-tk-refresh:focus-visible{outline:2px solid #ff5e94;outline-offset:2px;}
.h2-bl-list{display:flex;flex-direction:column;gap:10px;}
.h2-bl-row{display:flex;align-items:flex-start;gap:11px;}
.h2-bl-dot{width:7px;height:7px;flex:none;margin-top:6px;border-radius:50%;}
.h2-bl-txt{font-size:13px;line-height:1.45;color:rgba(245,245,247,0.78);}
.h2-bl-txt strong{font-weight:600;color:#f5f5f7;}
.h2-cardlink,.h2-card-empty{font-size:12.5px;}
.h2-cardlink{display:inline-flex;align-items:center;gap:5px;margin-top:14px;padding:0;background:none;border:0;color:#ff5e94;font:inherit;font-weight:500;cursor:pointer;}
.h2-cardlink svg{width:13px;height:13px;}
.h2-card-empty{color:var(--m-45);padding:6px 0;}
/* search */
.h2-search{display:flex;align-items:center;gap:11px;margin-bottom:26px;padding:12px 15px;border-radius:14px;background:rgba(255,255,255,0.035);border:1px solid var(--line-2);}
.h2-search-ic{display:inline-flex;color:var(--m-40);}
.h2-search-in{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:inherit;font-size:16px;}   /* 16px: stops iOS focus-zoom */
.h2-search-in::placeholder{color:var(--m-40);}
/* sections */
.h2-sec{margin-bottom:30px;}
.h2-sec-h{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.h2-sec-t{font-size:11.5px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,94,148,0.85);white-space:nowrap;}
.h2-sec-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.09),rgba(255,255,255,0));}
.h2-edit{flex:none;background:none;border:0;color:var(--m-40);font:inherit;font-size:11.5px;font-weight:500;cursor:pointer;white-space:nowrap;}
@media(hover:hover){.h2-edit:hover{color:var(--m-70,rgba(245,245,247,0.74))}}
/* pinned */
.h2-pins{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:720px){.h2-pins{grid-template-columns:1fr;}}
.h2-pins-empty{font-size:12.5px;color:var(--m-40);padding:2px 2px 6px;}
/* app grid */
.h2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:20px 8px;}
@media(min-width:720px){.h2-grid{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:26px 16px;}}
/* tile */
.h2-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;background:none;border:0;cursor:pointer;font:inherit;color:var(--text);text-decoration:none;transition:transform .16s var(--ease);}
@media(hover:hover){.h2-tile:hover{transform:translateY(-3px);}}
.h2-tile:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:14px;}
.h2-ic{position:relative;width:66px;height:66px;border-radius:18px;background:linear-gradient(155deg,rgba(255,255,255,0.08),rgba(255,255,255,0.018));border:1px solid rgba(255,255,255,0.09);box-shadow:0 8px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.09);display:flex;align-items:center;justify-content:center;transition:border-color .16s var(--ease),box-shadow .16s var(--ease);}
@media(min-width:720px){.h2-ic{width:76px;height:76px;border-radius:20px;}}
@media(hover:hover){.h2-tile:hover .h2-ic{border-color:rgba(255,20,100,0.35);box-shadow:0 12px 28px rgba(0,0,0,0.5),0 0 20px rgba(255,20,100,0.16),inset 0 1px 0 rgba(255,255,255,0.12);}}
.h2-ic svg{width:28px;height:28px;color:#f5f5f7;}
.h2-accent .h2-ic{background:linear-gradient(155deg,rgba(255,20,100,0.22),rgba(255,20,100,0.05));border-color:rgba(255,20,100,0.3);}
.h2-accent .h2-ic svg{color:#ff9ec0;}
.h2-txt{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;}
.h2-lbl{font-size:12px;font-weight:500;color:rgba(245,245,247,0.72);text-align:center;line-height:1.2;}
@media(min-width:720px){.h2-lbl{font-size:13px;}}
.h2-sub{font-size:11.5px;color:var(--m-40);text-align:center;}
.h2-stat{font-size:11px;font-weight:600;letter-spacing:0.02em;}
.h2-badge{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--magenta);border:2.5px solid #0a0a0a;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;box-shadow:0 0 12px rgba(255,20,100,0.55);}
.h2-flag{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:#e0a13a;border:2.5px solid #0a0a0a;box-shadow:0 0 10px rgba(224,161,58,0.6);}
.h2-pinmark{position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:50%;background:#161616;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;color:var(--m-45);}
.h2-pinmark.on{background:var(--magenta);border-color:var(--magenta);color:#fff;}
/* big pinned tile: horizontal card */
.h2-tile-big{flex-direction:row;gap:15px;padding:16px 18px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.09);box-shadow:0 12px 30px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.08);}
.h2-tile-big .h2-ic{width:50px;height:50px;border-radius:14px;}
.h2-tile-big .h2-ic svg{width:24px;height:24px;}
.h2-tile-big .h2-txt{align-items:flex-start;flex:1;}
.h2-tile-big .h2-lbl{font-size:15px;font-weight:600;color:#f5f5f7;text-align:left;}
.h2-tile-big .h2-chev{flex:none;color:var(--m-40);display:inline-flex;}
.h2-tile-big .h2-chev svg{width:16px;height:16px;}
@media(hover:hover){.h2-tile-big:hover{border-color:rgba(255,20,100,0.32);}.h2-tile-big:hover .h2-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);}}

/* =====================================================================
   TOUCH-TARGET + POLISH PASS (2026-07-16) — the stragglers the earlier
   44px sweeps missed. Two house recipes, layout untouched either way:
   (a) padding + negative margin (see .viewlink), (b) an ::after halo
   (see .sb-rf-rm). Halos grow VERTICALLY only where neighbours sit
   beside each other, so a tap can never land on the wrong button.
   ===================================================================== */
.seg-btn,.tm-btn,.act-chip,.sb-shoptab,.sb-fix-yes,.sb-fix-no,.bi-refresh,.hist-nav,.rev-refresh{position:relative}
.seg-btn::after,.act-chip::after,.sb-shoptab::after{content:"";position:absolute;inset:-6px 0}
.tm-btn::after,.sb-fix-yes::after,.sb-fix-no::after{content:"";position:absolute;inset:-7px 0}
.bi-refresh::after{content:"";position:absolute;inset:-5px}    /* 34px visual -> 44px hit */
.hist-nav::after,.rev-refresh::after{content:"";position:absolute;inset:-3px}   /* 38px visual -> 44px hit */
.tm-row-actions{gap:10px}                       /* Edit sat 6px from Delete — too close to mis-tap */
.zoom-btn{height:44px}
.insp-suggest{padding:12px 10px;min-height:44px;margin:-12px -6px;display:inline-flex;align-items:center}
.h2-edit{padding:12px 10px;min-height:44px;margin:-12px -10px;display:inline-flex;align-items:center}
.h2-cardlink{padding:12px 10px;min-height:44px;margin:2px -10px -12px}   /* 14px visual top gap preserved (14-12) */
.foot-ver,.foot-privacy{padding:12px 8px;min-height:44px;margin:-12px -8px;display:inline-flex;align-items:center}
.foot-privacy{margin-left:4px}                  /* keeps the old 12px visual gap after the hit-area margins */

/* Home search: honest empty state when nothing matches */
.h2-noresults{font-size:13px;color:var(--m-45);padding:14px 4px 4px;text-align:center}

/* ---------- lost & found ---------- */
.lf-wrap{max-width:720px;margin:0 auto;padding:18px 16px 90px}
.lf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.lf-h{font-family:var(--font-head,inherit);font-size:24px;margin:0 0 4px;color:#fff}
.lf-sub{font-size:13px;color:var(--m-45);max-width:40ch}
.lf-chips{flex-wrap:wrap;margin-bottom:8px}
.lf-toggle{margin:2px 0 12px}
.lf-list{display:flex;flex-direction:column;gap:10px}
.lf-card{padding:14px}
.lf-card.lf-closed{opacity:.62}
.lf-row{display:flex;gap:13px;align-items:flex-start}
.lf-thumb{position:relative;flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#1a1a1d;border:1px solid rgba(255,255,255,.08);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px}
.lf-thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.lf-thumb img.on{opacity:1}
.lf-thumb-none{cursor:default}
.lf-more{position:absolute;right:3px;bottom:3px;font-size:10px;font-weight:700;background:rgba(0,0,0,.65);color:#fff;border-radius:6px;padding:1px 5px}
.lf-main{flex:1;min-width:0}
.lf-item{font-weight:650;font-size:15px;color:#f5f5f7}
.lf-meta{font-size:12.5px;color:var(--m-45);margin-top:2px}
.lf-desc{font-size:13px;color:rgba(245,245,247,.75);margin-top:4px}
.lf-stat{display:inline-block;font-size:12px;font-weight:600;margin-top:6px}
.lf-ret{color:var(--hl-green)}
.lf-disp{color:var(--m-45)}
.lf-acts{display:flex;gap:8px;margin-top:12px}
.lf-act{font-size:13px}
.lf-empty{color:var(--m-45);font-size:14px;text-align:center;padding:38px 12px;border:1px dashed rgba(255,255,255,.12);border-radius:14px}
@media (max-width:560px){ .lf-head{flex-direction:column} .lf-head .btn-primary{align-self:stretch} }

/* ---------- notifications bell in the top bar (B23) ----------
   Always visible so nobody has to remember where the alerts live. */
.ntf-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;background:transparent;border:0;color:var(--text);
  cursor:pointer;padding:0;flex:none;-webkit-tap-highlight-color:transparent}
.ntf-bell svg{width:21px;height:21px}
.ntf-bell:active{background:rgba(255,255,255,.07)}
.ntf-bell-badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--magenta);color:#fff;font-size:10.5px;font-weight:800;
  line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--bg)}

/* ---------- order uniform (B22, Workwear Express) ----------
   Garment-led: the photo is the thing staff recognise, not the product code.
   Two columns on a phone, three on anything wider. No prices anywhere. */
/* ── "You're not clocked in" — top of the daily list (item 11a, 3 Aug) ────────
   Mitchell: "make it really stand out". It sits above Next up, which is the only
   other thing allowed at the top of this screen, so it has to out-shout a card
   that is already pink. Amber + a filled action pill does it without pretending
   to be an emergency (that colour is spoken for, top right). */
.clk-cta{display:flex;align-items:center;gap:13px;flex-wrap:wrap;width:100%;text-align:left;cursor:pointer;
  margin:0 0 14px;padding:14px 15px;border-radius:16px;font:inherit;color:var(--text);
  background:linear-gradient(180deg,rgba(217,162,58,0.18),rgba(217,162,58,0.06));
  border:1px solid rgba(217,162,58,0.55)}
.clk-cta:active{transform:scale(.99)}
@media (hover:hover){ .clk-cta:hover{background:linear-gradient(180deg,rgba(217,162,58,0.24),rgba(217,162,58,0.09))} }
.clk-cta-ic{flex:none;display:flex;color:var(--amber)}
.clk-cta-ic svg{width:24px;height:24px;display:block}
.clk-cta-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.clk-cta-t{font-size:16px;font-weight:700;letter-spacing:-0.01em;color:var(--amber)}
.clk-cta-s{font-size:12.5px;line-height:1.4;color:var(--m-55)}
.clk-cta-go{flex:none;border-radius:999px;padding:0 15px;height:38px;display:inline-flex;align-items:center;
  background:var(--amber);color:#171207;font-size:13.5px;font-weight:700;white-space:nowrap}
/* Phones: the pill drops onto its own full-width row rather than squeezing
   "You're not clocked in" into a two-line column beside it. */
@media (max-width:520px){
  .clk-cta{gap:11px 13px}
  .clk-cta-go{flex:1 0 100%;justify-content:center;height:44px;font-size:15px}
}
/* The sheet a blocked tick raises (item 11b). Never a dead end — the way out is
   the thing being asked for. */
.clk-gate-modal{max-width:400px}
.clk-gate-why{margin:10px 0 0;font-size:13px;color:var(--m-45);line-height:1.5}

/* ── Clock in / out (B24) ────────────────────────────────────────────────────
   Deliberately one big card and one big button: this is the first thing someone
   does with cold hands on the way through the door, so the tap target is huge
   and the state is readable at arm's length. */
.clk-wrap{max-width:560px;margin:0 auto;padding:18px 16px 110px}
.clk-head{margin-bottom:16px}
.clk-h{font-family:var(--font-head,inherit);font-size:24px;margin:0 0 4px;color:#fff}
.clk-sub{font-size:13px;color:var(--m-45);max-width:46ch}
.clk-msg{background:rgba(255,20,100,.09);border:1px solid rgba(255,20,100,.28);color:#ffd9e5;
  font-size:13.5px;border-radius:12px;padding:11px 13px;margin-bottom:12px;line-height:1.45}
.clk-card{background:var(--card);border:1px solid var(--line-2);border-radius:18px;
  padding:22px 18px;display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center}
/* Green while on the clock, pink when ready to start — the colour alone should
   answer "am I clocked in?" before any of the words are read. */
.clk-card.clk-on{border-color:rgba(52,199,89,.42);background:linear-gradient(180deg,rgba(52,199,89,.10),transparent 62%)}
.clk-card.clk-ready{border-color:rgba(255,20,100,.36);background:linear-gradient(180deg,rgba(255,20,100,.09),transparent 62%)}
.clk-state{font-family:var(--font-head,inherit);font-size:21px;color:#fff;line-height:1.25}
.clk-where{font-size:13.5px;color:var(--m-45)}
.clk-dur{font-size:12.5px;color:var(--m-45);opacity:.85}
.clk-note{font-size:13.5px;color:var(--m-45);line-height:1.5;max-width:38ch}
.clk-warn{background:rgba(255,180,0,.10);border:1px solid rgba(255,180,0,.32);color:#ffe6ad;
  font-size:12.5px;border-radius:11px;padding:9px 11px;margin-top:6px;line-height:1.45;text-align:left}
.clk-btn{margin-top:14px;width:100%;max-width:320px;min-height:56px;font-size:17px;border-radius:15px}
/* Settling-in period: an explainer that leaves on its own, and the quieter
   "I got here earlier" escape hatch for a forgotten clock-in. */
.clk-new{background:rgba(255,255,255,.04);border:1px solid var(--line-2,rgba(255,255,255,.1));border-radius:14px;
  padding:13px 15px;margin-bottom:14px;font-size:13px;line-height:1.5;color:var(--m-45)}
.clk-new b{display:block;color:#fff;font-size:13.5px;margin-bottom:3px}
.clk-link{margin-top:12px;background:none;border:0;color:var(--m-45);font:inherit;font-size:13px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 4px}
.clk-link:active{color:#fff}
.clk-late{margin-top:14px;width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px;text-align:left}
.clk-late label{font-size:12.5px;color:var(--m-45)}
.clk-late input{background:#141416;color:var(--text);border:1px solid var(--line-2);border-radius:11px;
  padding:12px;font:inherit;font-size:16px}
.clk-late-btns{display:flex;gap:8px}
.clk-late-btns button{flex:1;min-height:44px;border-radius:11px}
.clk-hint{font-size:12px;color:var(--m-45);line-height:1.45;margin:-2px 0 2px}

/* "Text me before my shift" — their own choice, so it sits on their own screen
   rather than in a manager's settings. */
.clk-opt{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 15px;
  background:var(--card);border:1px solid var(--line-2);border-radius:14px}
.clk-opt-t{flex:1;min-width:0;font-size:13px;line-height:1.45}
.clk-opt-t b{display:block;color:#fff;font-size:13.5px;margin-bottom:2px}
.clk-opt-t span{color:var(--m-45)}
.clk-toggle{flex:0 0 auto;width:52px;height:32px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.08);position:relative;cursor:pointer;padding:0;
  transition:background .18s ease,border-color .18s ease}
.clk-toggle span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:transform .18s ease}
.clk-toggle.on{background:rgba(52,199,89,.55);border-color:rgba(52,199,89,.6)}
.clk-toggle.on span{transform:translateX(20px)}
.clk-toggle:disabled{opacity:.5}

/* Owners + managers: everyone's clock, on the same screen as their own. */
.clk-board{margin-top:22px;text-align:left}
.clk-board-h{font-family:var(--font-head,inherit);font-size:17px;color:#fff;margin:0 0 10px}
.clk-board-sec{margin-top:14px}
.clk-board-sh{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--m-45);margin-bottom:7px}
.clk-board-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 12px;border:1px solid var(--line-2);border-radius:11px;margin-bottom:6px;
  background:var(--card);font-size:13.5px;color:#fff}
.clk-board-when{flex:0 0 auto;color:var(--m-45);font-size:12.5px;text-align:right}
.clk-board-empty{font-size:13px;color:var(--m-45);padding:2px 2px 4px}
.clk-board-bad{background:rgba(255,180,0,.09);border:1px solid rgba(255,180,0,.34);
  border-radius:14px;padding:13px 14px;margin-bottom:6px}
.clk-board-bad>b{display:block;color:#ffe6ad;font-size:13.5px;margin-bottom:4px}
.clk-board-badnote{font-size:12.5px;color:var(--m-45);line-height:1.5;margin-bottom:9px}
.clk-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--line-2);font-size:11px;color:var(--m-45)}
.clk-tag.warn{background:rgba(255,180,0,.13);border-color:rgba(255,180,0,.34);color:#ffe6ad}
@media (max-width:420px){
  .clk-board-row{flex-direction:column;gap:2px}
  .clk-board-when{text-align:left}
}

.ww-wrap{max-width:720px;margin:0 auto;padding:18px 16px 110px}
.ww-head{margin-bottom:14px}
.ww-h{font-family:var(--font-head,inherit);font-size:24px;margin:0 0 4px;color:#fff}
.ww-sub{font-size:13px;color:var(--m-45);max-width:46ch}
.ww-tabs{flex-wrap:wrap;margin-bottom:12px}
.ww-forwho{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ww-forwho label{flex:1;min-width:150px;font-size:12px;color:var(--m-45);display:flex;flex-direction:column;gap:5px}
.ww-forwho select{background:#141416;color:var(--text);border:1px solid var(--line-2);border-radius:11px;padding:10px 11px;font:inherit;font-size:14px}
.ww-msg{background:rgba(255,20,100,.09);border:1px solid rgba(255,20,100,.28);color:#ffd9e5;
  font-size:13.5px;border-radius:12px;padding:11px 13px;margin-bottom:12px}
.ww-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:620px){ .ww-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ww-card{background:var(--card);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.ww-card.ww-out{opacity:.66}
/* White plate behind the cut-outs: every product shot is black kit on white, so
   a dark tile would render them as an invisible smudge. */
.ww-img{background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ww-img img{width:100%;height:100%;object-fit:contain}
.ww-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.ww-name{font-weight:650;font-size:14px;color:#f5f5f7;line-height:1.3}
.ww-meta{font-size:11.5px;color:var(--m-45)}
.ww-left{font-size:12px;font-weight:600;color:var(--pink)}
.ww-left-out{color:var(--m-45);font-weight:500}
.ww-sizes{display:flex;flex-wrap:wrap;gap:5px}
.ww-size{background:#141416;color:var(--text);border:1px solid var(--line-2);border-radius:9px;
  min-width:38px;min-height:34px;padding:5px 7px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.ww-size.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.ww-size:disabled{opacity:.45;cursor:default}
.ww-qty{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.ww-step{width:36px;height:36px;border-radius:10px;background:#141416;border:1px solid var(--line-2);
  color:var(--text);font-size:19px;line-height:1;cursor:pointer}
.ww-step:disabled{opacity:.4;cursor:default}
.ww-qn{font-size:15px;font-weight:700;min-width:16px;text-align:center}
.ww-empty{color:var(--m-45);font-size:14px;text-align:center;padding:38px 12px;border:1px dashed rgba(255,255,255,.12);border-radius:14px}
/* Send bar — sticky so the basket is always one thumb away on a phone. */
.ww-send{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom,0px));margin-top:16px;z-index:5}
.ww-send-btn{width:100%;padding:15px;font-size:15px}
.ww-ask{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:14px;margin-bottom:12px}
.ww-ask-h{font-weight:650;font-size:14.5px;margin-bottom:9px}
.ww-ask textarea{width:100%;background:#141416;color:var(--text);border:1px solid var(--line-2);
  border-radius:11px;padding:10px 11px;font:inherit;font-size:14px;resize:vertical}
.ww-ask-btns{display:flex;gap:9px;justify-content:flex-end;margin-top:10px}
.ww-hist{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:13px;margin-bottom:10px}
.ww-hist-bad{border-color:rgba(255,59,48,.4)}
.ww-hist-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:6px}
.ww-hist-top span{color:var(--m-45);font-size:12.5px;flex:none}
.ww-hist-lines{font-size:13px;color:rgba(245,245,247,.8);line-height:1.5}
.ww-hist-foot{font-size:12px;color:var(--m-45);margin-top:6px}
/* garment requests — Workwear Express links only */
.ww-greq-note{font-size:12.5px;color:var(--m-45);margin-bottom:9px;line-height:1.5}
.ww-ask input[type=url]{width:100%;background:#141416;color:var(--text);border:1px solid var(--line-2);
  border-radius:11px;padding:11px;font:inherit;font-size:14px;margin-bottom:8px}
.ww-greq-link{display:block;font-size:12.5px;color:var(--pink);word-break:break-all;margin:4px 0 2px;text-decoration:none}
.ww-greq-link:hover{text-decoration:underline}
.ww-greq-ok{border-color:rgba(48,209,88,.35)}
.ww-greq-acts{display:flex;gap:9px;justify-content:flex-end;margin-top:10px}

/* ===================================================================
   NIGHT WATCH — owner-only nightly Action-Log scan (see app.js renderNightWatch)
   =================================================================== */
.nw-badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,0.1);color:var(--text);font-size:11px;font-weight:700;line-height:16px;text-align:center;vertical-align:middle}
.nw-badge-open{background:var(--magenta);color:#fff}
.nw-badge-clear{background:rgba(48,209,88,0.16);color:var(--hl-green)}
.nw-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 6px;flex-wrap:wrap}
.nw-toggle{border:1px solid var(--line-2);background:rgba(255,255,255,0.03);color:var(--m-55);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.nw-toggle.on{background:rgba(255,20,100,0.12);border-color:rgba(255,20,100,0.4);color:var(--pink)}
.nw-days{display:flex;gap:6px}
.nw-daybtn{border:1px solid var(--line-2);background:rgba(255,255,255,0.03);color:var(--m-50);border-radius:999px;padding:6px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.nw-daybtn.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.nw-day{margin-top:16px}
.nw-day-h{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--m-45);margin:0 2px 8px}
.nw-shop{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:11px}
.nw-shop-h{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.nw-shop-name{font-size:15.5px;font-weight:700;color:var(--text)}
.nw-summary{font-size:14px;line-height:1.42;color:var(--m-55);margin:2px 0 7px}
.nw-stat{font-size:12.5px;color:var(--m-45);margin-bottom:9px}
.nw-clear{font-size:13px;color:var(--hl-green);padding:4px 2px}
.nw-flag{border:1px solid var(--line-2);border-left:3px solid var(--m-40);border-radius:11px;padding:10px 12px;margin-top:8px;background:rgba(255,255,255,0.015)}
.nw-flag.nw-sev-high{border-left-color:var(--hl-red)}
.nw-flag.nw-sev-medium{border-left-color:var(--amber)}
.nw-flag.nw-sev-low{border-left-color:var(--m-40)}
.nw-flag-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nw-sev-badge{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.nw-sev-badge.nw-sev-high{background:rgba(255,69,58,0.16);color:var(--hl-red)}
.nw-sev-badge.nw-sev-medium{background:rgba(224,166,62,0.16);color:var(--hl-amber)}
.nw-sev-badge.nw-sev-low{background:rgba(255,255,255,0.08);color:var(--m-55)}
.nw-flag-title{font-size:14px;font-weight:700;color:var(--text)}
.nw-cat{margin-left:auto;font-size:11px;color:var(--m-45);text-transform:uppercase;letter-spacing:.03em}
.nw-flag-detail{font-size:13.5px;line-height:1.4;color:var(--m-55);margin-top:5px}
.nw-ev{margin-top:7px}
.nw-ev summary{font-size:12px;color:var(--pink);cursor:pointer;user-select:none}
.nw-ev-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.5;color:var(--m-50);word-break:break-word;padding:2px 0 2px 10px;border-left:1px solid var(--line-2);margin-top:4px}
.nw-flag-note{font-size:12.5px;color:var(--m-55);margin-top:6px;font-style:italic}
.nw-flag-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:10px}
.nw-act{border:1px solid var(--line-2);background:rgba(255,255,255,0.03);color:var(--text);border-radius:9px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.nw-act-normal{border-color:rgba(48,209,88,0.35);color:var(--hl-green)}
.nw-act-teach{border-color:rgba(255,20,100,0.35);color:var(--pink)}
.nw-status{font-size:12px;color:var(--m-45)}
.nw-status-normal{color:var(--hl-green)}
.nw-status-resolved{color:var(--m-50)}
.nw-rules-intro{font-size:13px;line-height:1.45;color:var(--m-55);margin:12px 2px 12px}
.nw-rules-intro b{color:var(--text)}
.nw-rule{border:1px solid var(--line-2);border-radius:11px;padding:10px 12px;margin-top:9px;background:rgba(255,255,255,0.015)}
.nw-rule-top{display:flex;align-items:center;gap:8px}
.nw-rule-kind{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,0.08);color:var(--m-55)}
.nw-rule-kind.nw-rule-ignore{background:rgba(255,255,255,0.08);color:var(--m-55)}
.nw-rule-kind.nw-rule-watch{background:rgba(255,20,100,0.14);color:var(--pink)}
.nw-rule-kind.nw-rule-context{background:rgba(90,160,255,0.14);color:#7fb0ff}
.nw-rule-scope{font-size:12px;color:var(--m-45)}
.nw-rule-off{margin-left:auto;background:none;border:0;color:var(--m-45);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.nw-rule-body{font-size:13.5px;line-height:1.42;color:var(--text);margin-top:6px}
.nw-ruleform{border:1px solid var(--line-2);border-radius:12px;padding:12px;margin:6px 0 10px;background:rgba(255,255,255,0.02)}
.nw-form-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.nw-form-lbl{font-size:12px;color:var(--m-45);min-width:66px}
.nw-chiprow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.nw-chip{border:1px solid var(--line-2);background:rgba(255,255,255,0.03);color:var(--m-55);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.nw-chip.active{background:var(--magenta);border-color:var(--magenta);color:#fff}
.nw-hint{font-size:12px;color:var(--m-45)}
.nw-textarea{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;color:var(--text);font:inherit;font-size:14px;padding:10px;resize:vertical;line-height:1.4}
.nw-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.btn-primary.is-busy{opacity:.6}

/* ===================================================================
   WHO'S MISSING TASKS — owner-only per-person miss rollup (app.js renderTaskMisses)
   =================================================================== */
.pm-intro{font-size:13px;line-height:1.45;color:var(--m-55);margin:12px 2px 4px}
.pm-total{font-size:13.5px;font-weight:700;color:var(--text)}
.pm-exnote{font-size:12px;color:var(--m-45);margin:2px 2px 12px}
.pm-person{border:1px solid var(--line-2);border-radius:12px;margin-top:9px;background:rgba(255,255,255,0.015);overflow:hidden}
.pm-person.open{border-color:rgba(255,20,100,0.3)}
.pm-person-row{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:12px 13px;text-align:left}
.pm-rank{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.06);color:var(--m-55);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pm-person:nth-child(1) .pm-rank,.pm-person.top .pm-rank{background:var(--magenta);color:#fff}
.pm-name{flex:1 1 auto;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pm-role{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,0.08);color:var(--m-55)}
.pm-role-manager{background:rgba(255,20,100,0.14);color:var(--pink)}
.pm-role-senior{background:rgba(90,160,255,0.14);color:#7fb0ff}
.pm-count{flex:0 0 auto;font-size:19px;font-weight:800;color:var(--text);min-width:26px;text-align:right}
.pm-caret{flex:0 0 auto;color:var(--m-45);font-size:13px;width:14px;text-align:center}
.pm-shops{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px 11px 48px}
.pm-shopchip{font-size:11.5px;color:var(--m-50);background:rgba(255,255,255,0.04);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px}
.pm-detail{border-top:1px solid var(--line);padding:8px 13px 11px}
.pm-missrow{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.03);font-size:13px}
.pm-missrow:last-child{border-bottom:0}
.pm-missday{flex:0 0 54px;color:var(--m-45);font-size:12px}
.pm-missshop{flex:0 0 auto;color:var(--pink);font-size:12px;font-weight:600}
.pm-misslabel{flex:1 1 auto;color:var(--text)}
.pm-misswin{color:var(--m-45);font-size:11.5px}
.pm-none{color:var(--m-45);font-size:13px}
.pm-more{font-size:11.5px;color:var(--m-45);margin-top:7px;text-align:center}

/* ===================================================================
   PULL-TO-REFRESH — the swipe-down spinner (app.js initPullToRefresh)
   Rides in the gap above the app as #app rubber-bands down. Sits below the
   top nav (z500) which moves with #app during the pull.
   =================================================================== */
#ptr{position:fixed;top:0;left:0;right:0;height:0;display:flex;justify-content:center;z-index:400;pointer-events:none;opacity:0;will-change:transform,opacity}
#ptr .ptr-spinner{margin-top:calc(-46px + env(safe-area-inset-top));width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line-2);box-shadow:0 6px 18px rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;color:var(--m-55);transition:color .18s,border-color .18s}
#ptr .ptr-spinner svg{transition:transform .12s ease}
#ptr.ptr-ready .ptr-spinner{color:var(--magenta);border-color:rgba(255,20,100,0.45)}
#ptr.ptr-spin .ptr-spinner{color:var(--magenta);border-color:rgba(255,20,100,0.45);animation:ptr-spin .7s linear infinite}
#ptr.ptr-spin .ptr-spinner svg{transform:none}
@keyframes ptr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ #ptr.ptr-spin .ptr-spinner{animation-duration:1.1s} }

/* customers count on the shop rows — small people glyph, aligned to the numerals */
.h2-tk-cust{display:inline-flex;align-items:center;gap:3px;}
.h2-cust-ic{opacity:.75;flex:0 0 auto;position:relative;top:-0.5px;}
/* "Email faults to Lisa" sits alongside Report/Alerts and wraps on a phone */
.sb-mail-btn{white-space:nowrap;}
/* photo picker on the fault/issue forms — the hint above it stops people missing it */
.sb-rf-hint{font-size:11.5px;color:var(--m-40);margin:-2px 0 6px;line-height:1.35;}

/* Notifications gate — same card as the update gate. Asked on every open until
   they're on, because the clock-in nudge reaches nobody without them (2 Aug:
   4 devices enabled across the whole business, none of them shop staff). */
.ng-steps{text-align:left;margin-top:20px;background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);border-radius:14px;padding:14px 16px}
.ng-steps b{display:block;color:#fff;font-size:14px;margin-bottom:8px;line-height:1.4}
.ng-steps ol{margin:0;padding-left:20px;color:#e2d2d9;font-size:13.5px;line-height:1.6}
.ng-steps li{margin-bottom:5px}
.ng-steps li b{display:inline;margin:0;font-size:inherit}

/* ── Blue Tanning: the engineer's job, shown under a fault ─────────────────
   Lisa works her side in blue.html; this is what GLOW sees of it. Deliberately
   visible to everyone — a girl on the floor knowing an engineer is booked for
   Tuesday is the difference between "nobody's fixing it" and "it's in hand".
   The money lines inside are overseer-only (see btJobPanelHTML).
   NOTE: the portal's own classes are also bt-*, but they live in blue.html's
   inline <style> and none of them are named below — CSS matches exact class
   names, so the two sets never meet. */
.bt-j{margin-top:11px;background:rgba(48,209,88,0.07);border:1px solid rgba(48,209,88,0.22);
  border-radius:11px;padding:11px 12px;font-size:13px;line-height:1.5}
.bt-j-head{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--text);font-size:13.5px}
.bt-j-dot{width:7px;height:7px;border-radius:50%;background:var(--hl-green);flex:none}
.bt-j-lines{margin-top:6px;color:var(--m-55)}
.bt-j-lines div+div{margin-top:3px}
.bt-j-lines strong{color:var(--text);font-weight:600}
/* The job's history, on our side. Same idea as .bt-tl in the portal but this
   sits inside an already-busy fault card, so it's denser and folded by default. */
.bt-j-tlbtn{margin-top:8px;display:inline-block}
.bt-j-tl{list-style:none;margin:8px 0 0;padding:0 0 0 11px;border-left:1px solid var(--line-2)}
.bt-j-tl li{position:relative;padding:0 0 9px 11px;font-size:12.5px;line-height:1.45;color:var(--m-55)}
.bt-j-tl li:last-child{padding-bottom:0}
.bt-j-tl li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;
  border-radius:999px;background:var(--line-2)}
/* our moves stand out from hers, without a legend */
.bt-j-tl li.glow::before{background:var(--pink,#ff1464)}
.bt-j-tl li span{color:var(--text)}
.bt-j-tl li em{display:block;font-style:normal;font-size:11.5px;color:var(--m-45);margin-top:1px}
.bt-j-money{margin-top:7px;padding-top:7px;border-top:1px solid var(--line-2);
  color:var(--m-55);font-size:12.5px;font-weight:600}
.bt-j-open{display:inline-block;margin-top:9px;font-size:13px}
.bt-j-reply{margin-top:10px}
.bt-j-ta{width:100%;min-height:74px;resize:vertical;background:rgba(255,255,255,0.05);
  border:1px solid var(--line-2);border-radius:10px;color:var(--text);
  font:inherit;font-size:15px;padding:10px 11px}
.bt-j-replyrow{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* Quotes over the £300 limit, waiting on an owner. Sits at the top of the
   sunbed board so it's found without anyone going looking for it. */
.bt-q{background:rgba(217,162,58,0.1);border:1px solid rgba(217,162,58,0.3);
  border-radius:14px;padding:13px 14px;margin-bottom:14px}
.bt-q-h{font-weight:700;font-size:14px;margin-bottom:10px}
.bt-q-row+.bt-q-row{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.bt-q-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bt-q-amt{font-size:19px;font-weight:800}
.bt-q-bed{font-size:12.5px;color:var(--m-45)}
.bt-q-what{font-size:13.5px;line-height:1.45;margin-top:3px}
.bt-q-meta{font-size:12px;color:var(--m-45);margin-top:4px;line-height:1.45}
.bt-q-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.bt-sp-total{font-size:26px;font-weight:800;margin:0 0 10px}
.bt-sp-total span{font-size:13px;font-weight:500;color:var(--m-45);margin-left:8px}
.bt-sp-shops{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px;font-size:12.5px;color:var(--m-45)}
.bt-sp-shops b{color:var(--text)}

/* ===== The GLOW Ops guide (5 Aug 2026) =====================================
   Read-it-through, next-next-next, five questions. Deliberately wider line
   height and bigger type than the rest of the app: this is the one screen
   somebody actually READS rather than scans. */
.gd-wrap{position:fixed;inset:0;z-index:600;background:var(--bg);display:flex;flex-direction:column}
.gd-bar{display:flex;align-items:center;gap:12px;flex-shrink:0;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
  border-bottom:1px solid var(--line);background:rgba(6,6,6,.94)}
.gd-bar-t{font-size:15px;font-weight:600;color:var(--m-55)}
.gd-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 18px calc(env(safe-area-inset-bottom,0px) + 32px);max-width:720px;margin:0 auto;width:100%}
.gd-load{padding:40px 0;text-align:center;color:var(--m-45)}
/* progress: the reason people keep going is knowing how much is left */
.gd-prog{height:3px;border-radius:999px;background:var(--line-2);overflow:hidden;margin-bottom:10px}
.gd-prog span{display:block;height:100%;background:var(--pink,#ff1464);transition:width .25s ease}
.gd-step{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--m-45);margin-bottom:14px}
.gd-h1{font-size:27px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.gd-sub{font-size:15px;line-height:1.5;color:var(--m-55);margin:0 0 22px}
.gd-title{font-size:21px;font-weight:700;margin:0 0 14px;line-height:1.25}
.gd-img{width:100%;border-radius:14px;border:1px solid var(--line-2);margin:0 0 18px;display:block}
.gd-body{font-size:16px;line-height:1.62}
.gd-body p{margin:0 0 14px}
.gd-passed{margin:0 0 18px;padding:11px 14px;border-radius:12px;font-size:14px;
  background:rgba(48,209,88,.1);border:1px solid rgba(48,209,88,.3);color:#9de8b3}
.gd-tip{margin:20px 0 0;padding:14px 16px;border-radius:14px;font-size:14.5px;line-height:1.55;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.gd-tip strong{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--m-45);margin-bottom:5px}
.gd-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px}
.gd-nav .btn-primary{min-width:150px}
.gd-err{margin-top:16px;color:#ef7d8e;font-size:14px}
/* the questions */
.gd-q{margin:0 0 26px}
.gd-q-t{font-size:16px;font-weight:600;line-height:1.45;margin:0 0 12px;display:flex;gap:10px}
.gd-q-t span{flex:none;width:23px;height:23px;border-radius:999px;background:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.gd-opt{display:block;width:100%;text-align:left;margin:0 0 8px;padding:13px 15px;border-radius:12px;
  background:transparent;border:1px solid var(--line-2);color:var(--text);
  font:inherit;font-size:15px;line-height:1.4;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gd-opt.on{background:rgba(255,20,100,.12);border-color:rgba(255,20,100,.5)}
/* the result */
.gd-result{text-align:center;padding:26px 20px;border-radius:18px;margin-bottom:24px;border:1px solid var(--line-2)}
.gd-result.pass{background:rgba(48,209,88,.09);border-color:rgba(48,209,88,.3)}
.gd-result.fail{background:rgba(224,85,107,.09);border-color:rgba(224,85,107,.3)}
.gd-score{font-size:42px;font-weight:800;letter-spacing:-.02em}
.gd-verdict{font-size:17px;font-weight:700;margin-bottom:8px}
.gd-result p{font-size:14.5px;line-height:1.5;color:var(--m-55);margin:0}
.gd-mark{padding:13px 0;border-top:1px solid var(--line-2)}
.gd-mark-q{font-size:14.5px;font-weight:600;line-height:1.45;margin:0 0 5px}
.gd-mark-a{font-size:14px;margin:0 0 4px}
.gd-mark-w{font-size:13.5px;line-height:1.5;color:var(--m-45);margin:0}
/* the board */
.gd-tally{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.gd-tally span{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05)}
.gd-tally .ok{color:#9de8b3}.gd-tally .warn{color:var(--amber)}
.gd-tally .bad{color:#ef7d8e}.gd-tally .none{color:var(--m-45)}
.gd-rows{margin-top:14px}
.gd-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.gd-row-l{flex:1;min-width:0}
.gd-row-n{display:block;font-size:15px;font-weight:600}
.gd-row-s{display:block;font-size:12.5px;color:var(--m-45);margin-top:1px}
.gd-row-r{text-align:right;flex:none}
.gd-state{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.gd-state.ok{color:#9de8b3}.gd-state.warn{color:var(--amber)}
.gd-state.bad{color:#ef7d8e}.gd-state.none{color:var(--m-45)}
.gd-row-d{display:block;font-size:12px;color:var(--m-45);margin-top:2px}
/* Owners and managers previewing the other course. Only they ever see this —
   it's how you check what your team was actually told. */
.gd-switch{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.gd-switch>span{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--m-45)}
.gd-sw{background:transparent;border:1px solid var(--line-2);color:var(--m-55);font:inherit;
  font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer}
.gd-sw.on{background:rgba(255,20,100,.13);border-color:rgba(255,20,100,.45);color:var(--text)}