/* Crewsy: the one stylesheet for the web app and the simulator (the simulator adds demo.css on top of it for its own header, clock and phones).
   Brand: navy #141A2E for structure and text, orange #FF5C3A for the one primary action of a card, the active tab, focus rings and the wave of the logo, white and a cool near-white for surfaces.
   Orange is never body-size text on white (3:1): primary buttons are orange with NAVY text, selected states are navy with white text, and dark mode puts off-white ink and orange accents on deep navy.
   Colors are tokens on the root element. The dark set applies when the system asks for dark (unless the page is set to light) and when the page is set to dark by hand ([data-theme]); the two dark blocks are identical.
   Every text color is checked for 4.5:1 on the surface it sits on, in both themes (rebrand.test.mjs). Spacing is a 4/8 px scale, one type scale, one radius family; numbers that line up use tabular figures.
   Layout is mobile first: one working column with a 16px gutter, breakpoints near 600 and 1024 px, 44 px touch targets on a phone or a touch screen, 16px form fields (no zoom), safe areas respected. The board is a wide table that
   scrolls inside its own box, never the page. No inline styles (the page runs under a policy that allows none), no outside fonts or files. */
:root {
  --bg: #f6f7fb; --panel: #ffffff; --ink: #141a2e; --mute: #58607a; --line: #e1e4ee; --line2: #cbd0df; --edge: #7f889f; --soft: #eef0f6; --hover: #e6e9f2;
  --brand: #ff5c3a; --tan: #ffb7a5; --accent: #141a2e; --accent-ink: #ffffff; --accent-soft: #ffece5; --focus: #e5441f; --sel: #141a2e; --sel-ink: #ffffff;
  --cta: #ff5c3a; --cta-ink: #141a2e; --cta-hover: #ff7152; --cta-press: #ef4f2d;
  --good: #1a7344; --warn: #845000; --bad: #b42318; --good-bg: #e2f2e9; --warn-bg: #fcefd3; --bad-bg: #fce3e0; --urgent: #b3261e; --urgent-ink: #ffffff;
  --away: #e8eaf1; --paper: #ffffff; --paper-ink: #141a2e;
  --k-kitchen: #b8431c; --k-merged: #8a3517; --k-driver: #17795c; --k-foh: #2569ab; --k-ink: #ffffff;
  --r0: #dde9f7; --r1: #e6e1f5; --r2: #ddf0e3; --r3: #f9e6d2; --r4: #f6dee6; --r5: #e9edd0;
  --sh1: 0 1px 2px rgba(20, 26, 46, .06), 0 1px 1px rgba(20, 26, 46, .04); --sh2: 0 6px 18px rgba(20, 26, 46, .12); --sh3: 0 18px 48px rgba(20, 26, 46, .24);
  --font: system-ui, -apple-system, 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --gut: 16px; --ctl: 40px; --rad-s: 6px; --rad-m: 10px; --rad-l: 14px; --ease: cubic-bezier(.2, .7, .2, 1); --fast: .14s;
  --logo-l: block; --logo-d: none; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1220; --panel: #181f36; --ink: #eef0f7; --mute: #a4adc6; --line: #2b3552; --line2: #3b4768; --edge: #6f7a9e; --soft: #202949; --hover: #283258;
  --brand: #ff5c3a; --tan: #ff8e74; --accent: #ff7a5c; --accent-ink: #0e1220; --accent-soft: #3b2531; --focus: #ff7a5c; --sel: #eef0f7; --sel-ink: #0e1220;
  --cta: #ff5c3a; --cta-ink: #141a2e; --cta-hover: #ff7152; --cta-press: #ef4f2d;
  --good: #62d69c; --warn: #f4b54e; --bad: #ff8f80; --good-bg: #15372b; --warn-bg: #3a2f15; --bad-bg: #45211f; --urgent: #d92d20; --urgent-ink: #ffffff;
  --away: #252d4a; --paper: #1d2540; --paper-ink: #eef0f7;
  --k-kitchen: #ff8a5d; --k-merged: #e8a872; --k-driver: #4fc79d; --k-foh: #6fb0ec; --k-ink: #0e1220;
  --r0: #1f3553; --r1: #2c2a52; --r2: #1e3b36; --r3: #41301f; --r4: #40253a; --r5: #353a1f;
  --sh1: 0 1px 2px rgba(0, 0, 0, .35); --sh2: 0 8px 22px rgba(0, 0, 0, .45); --sh3: 0 20px 56px rgba(0, 0, 0, .6);
  --logo-l: none; --logo-d: block; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0e1220; --panel: #181f36; --ink: #eef0f7; --mute: #a4adc6; --line: #2b3552; --line2: #3b4768; --edge: #6f7a9e; --soft: #202949; --hover: #283258;
  --brand: #ff5c3a; --tan: #ff8e74; --accent: #ff7a5c; --accent-ink: #0e1220; --accent-soft: #3b2531; --focus: #ff7a5c; --sel: #eef0f7; --sel-ink: #0e1220;
  --cta: #ff5c3a; --cta-ink: #141a2e; --cta-hover: #ff7152; --cta-press: #ef4f2d;
  --good: #62d69c; --warn: #f4b54e; --bad: #ff8f80; --good-bg: #15372b; --warn-bg: #3a2f15; --bad-bg: #45211f; --urgent: #d92d20; --urgent-ink: #ffffff;
  --away: #252d4a; --paper: #1d2540; --paper-ink: #eef0f7;
  --k-kitchen: #ff8a5d; --k-merged: #e8a872; --k-driver: #4fc79d; --k-foh: #6fb0ec; --k-ink: #0e1220;
  --r0: #1f3553; --r1: #2c2a52; --r2: #1e3b36; --r3: #41301f; --r4: #40253a; --r5: #353a1f;
  --sh1: 0 1px 2px rgba(0, 0, 0, .35); --sh2: 0 8px 22px rgba(0, 0, 0, .45); --sh3: 0 20px 56px rgba(0, 0, 0, .6);
  --logo-l: none; --logo-d: block; color-scheme: dark; }
/* a phone or a touch screen: every control is at least 44 px tall (the controls that set their own height below say so themselves) */
@media (max-width: 600px), (pointer: coarse) { :root { --ctl: 44px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; padding: 0 max(var(--gut), env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(var(--gut), env(safe-area-inset-left, 0px)); }
#app { max-width: 1200px; margin: 0 auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 8px; font-weight: 700; text-wrap: balance; }
h3 { font-size: 16px; line-height: 1.35; margin: 0 0 8px; font-weight: 650; text-wrap: balance; } h3.inline { margin: 0; }
h4 { font-size: 12px; margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 650; }
code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; } small { font-size: max(.85em, 12px); }
.mono, .mini, .csv, .wk { font-family: var(--mono); font-variant-numeric: tabular-nums; } .mute { color: var(--mute); } .small { font-size: 13px; } .center { text-align: center; }
table, .tile b, .hm b, .pr-tile b, .rv-tile b, .cg-tile b, .sph, .cnt, .num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--sel); color: var(--sel-ink); padding: 8px 12px; border-radius: var(--rad-m); z-index: 80; font-weight: 600; } .skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* loading: the space is reserved (no jump when the data arrives) and a quiet ring turns; with reduced motion it stands still */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 96px; padding: 24px 0; text-align: center; color: var(--mute); margin: 0; } main > .loading { min-height: 240px; }
.loading::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--brand); }
.skel { min-height: 1em; border-radius: var(--rad-s); background: linear-gradient(90deg, var(--soft) 25%, var(--hover) 50%, var(--soft) 75%); background-size: 200% 100%; }
@keyframes crewsy-spin { to { transform: rotate(360deg); } } @keyframes crewsy-shimmer { to { background-position: -200% 0; } }
main { outline: none; }
.boot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 18vh; } .boot .logo img { height: 56px; }

/* header: the wordmark (a light and a dark one, one shown), who is signed in, theme and sign out. On a phone the wordmark and the two buttons share the first row and the name has the second. */
.top { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo actions" "who who"; align-items: center; gap: 4px 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 0 12px; border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; grid-area: logo; justify-self: start; min-height: var(--ctl); border-radius: var(--rad-s); } .logo img { height: 32px; width: auto; display: block; } .logo .logo-l { display: var(--logo-l); } .logo .logo-d { display: var(--logo-d); }
.whoami { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; } .whoami .who-name { font-weight: 600; }
.actions-top { grid-area: actions; display: flex; gap: 8px; } .actions-top button { min-height: 36px; padding: 4px 12px; font-size: 14px; }
@media (min-width: 600px) { .top { grid-template-columns: auto 1fr auto; grid-template-areas: "logo who actions"; gap: 12px 24px; } .whoami { justify-content: flex-end; } .logo img { height: 36px; } }

/* tabs: one row; on a phone it scrolls sideways by touch (the active tab is kept in view by ui.js) with a faded edge; the active tab has the orange bar */
.tabs { position: relative; display: flex; flex-wrap: nowrap; gap: 2px; margin: 4px calc(var(--gut) * -1) 16px; padding: 0 var(--gut); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; scroll-snap-align: center; position: relative; background: transparent; border: 0; border-radius: var(--rad-m) var(--rad-m) 0 0; color: var(--mute); font-weight: 600; min-height: 44px; padding: 0 14px; white-space: nowrap; box-shadow: none; }
.tab:hover { background: var(--hover); color: var(--ink); border: 0; } .tab:active { transform: none; background: var(--hover); }
.tab.on { background: transparent; color: var(--ink); box-shadow: inset 0 -3px 0 var(--brand); } .tab.on:hover { background: var(--soft); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: transparent; } .dot.live { background: var(--brand); }
@media (min-width: 1024px) { .tabs { margin-inline: 0; padding-inline: 0; } .tab { padding: 0 16px; } }
.banners { margin: 0 0 12px; display: grid; gap: 6px; }
.banner { background: var(--soft); color: var(--ink); border-left: 3px solid var(--warn); border-radius: 0 var(--rad-m) var(--rad-m) 0; padding: 8px 12px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; } .banner b { color: var(--ink); }

/* controls: a flat bordered button, a calm hover, a visible press, a clear disabled and busy state; the primary button is orange with navy text */
button, input, select, textarea { font: inherit; color: var(--ink); }
button, .btn { cursor: pointer; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 8px 14px; min-height: var(--ctl); min-width: var(--ctl); font-weight: 550; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; }
:where(button, .btn):hover { background: var(--soft); border-color: var(--edge); }
:where(button, .btn):active { background: var(--hover); transform: translateY(1px); }      /* (:where keeps these at the lowest weight, so a button that has its own colors, a shift or a chip, keeps them when hovered) */
button.pri, .btn.pri { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); font-weight: 650; }
button.pri:hover, .btn.pri:hover { background: var(--cta-hover); border-color: var(--cta-hover); } button.pri:active, .btn.pri:active { background: var(--cta-press); border-color: var(--cta-press); }
button:disabled { cursor: not-allowed; opacity: .5; transform: none; } button:disabled:hover { background: var(--panel); border-color: var(--line2); } button.pri:disabled:hover { background: var(--cta); border-color: var(--cta); }
button.link { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: 0 4px; min-height: 32px; } button.link:hover { background: none; text-decoration-color: var(--brand); }
a.btn { color: var(--ink); } a.btn.pri { color: var(--cta-ink); }
[aria-busy="true"] button.pri, button[aria-busy="true"] { cursor: progress; opacity: .7; pointer-events: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } a:focus-visible { border-radius: 4px; } .tab:focus-visible, .seg button:focus-visible { outline-offset: -3px; }      /* (inside the box: the tab bar and the segmented control clip what sticks out) */
input[type=text], input[type=date], input[type=time], input[type=number], input[type=search], input[type=tel], input[type=email], input[type=password], select, textarea { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad-m); padding: 8px 10px; min-width: 0; min-height: var(--ctl); font-size: 16px; }
input:hover, select:hover, textarea:hover { border-color: var(--mute); }
input[type=text]:focus-visible, input[type=date]:focus-visible, input[type=time]:focus-visible, input[type=number]:focus-visible, input[type=search]:focus-visible, input[type=tel]:focus-visible, input[type=email]:focus-visible, input[type=password]:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--soft); }
input::placeholder, textarea::placeholder { color: var(--mute); opacity: 1; }
input[type=file] { max-width: 100%; min-height: var(--ctl); padding: 6px 10px; border: 1px dashed var(--edge); border-radius: var(--rad-m); background: var(--soft); font-size: 14px; }
input[type=file]::file-selector-button { min-height: 32px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--rad-s); background: var(--panel); color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; }
textarea { width: 100%; font-family: var(--mono); font-size: 16px; } input.gap { border-color: var(--warn); background: var(--warn-bg); }
.stack { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); margin: 8px 0; } .stack.grow { flex: 1 1 220px; margin: 0; } .stack input { width: 100%; }

/* cards and rows */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); padding: 20px; margin-bottom: 16px; min-width: 0; box-shadow: var(--sh1); }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .bar input[type=text] { flex: 1 1 200px; } .bar.actions { padding-bottom: 6px; } .check { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--sel); }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 1px; background: var(--line2); border: 1px solid var(--line2); border-radius: var(--rad-m); overflow: hidden; } .seg button { border: 0; border-radius: 0; background: var(--panel); } .seg button:hover { background: var(--soft); } .seg button:active { transform: none; }
.seg button.on { background: var(--sel); color: var(--sel-ink); } .seg .wk { display: flex; align-items: center; padding: 8px 12px; font-size: 13px; background: var(--panel); }
.item { border-top: 1px solid var(--line); padding: 12px 0; } .item:first-of-type { border-top: 0; } .item.urgent { border-left: 3px solid var(--bad); padding-left: 10px; } .item.dead { opacity: .65; } .item.dead b { text-decoration: line-through; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.5; background: var(--soft); color: var(--mute); }
.chip.g, .chip.green { background: var(--good-bg); color: var(--good); } .chip.y, .chip.yellow { background: var(--warn-bg); color: var(--warn); } .chip.r, .chip.red { background: var(--bad-bg); color: var(--bad); } .chip.z { background: var(--soft); }
.note { border-radius: var(--rad-m); padding: 8px 12px; margin: 6px 0; font-size: 14px; background: var(--soft); overflow-wrap: anywhere; }
.note.ok { background: var(--good-bg); color: var(--good); } .note.bad { background: var(--bad-bg); color: var(--bad); } .note.warn { background: var(--warn-bg); color: var(--warn); }
details { border-top: 1px solid var(--line); padding: 8px 0; } summary { cursor: pointer; font-weight: 600; min-height: 32px; } details > .scroll, details > .plain { margin-top: 6px; }

/* the board and other tables: they scroll inside their own box, the page never scrolls sideways */
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rad-m); max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; } .board { min-width: 860px; font-size: 13px; }
.board th, .board td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 4px; vertical-align: top; text-align: left; } .board thead th { background: var(--soft); text-align: center; font-weight: 650; }
.board tbody th { background: var(--panel); position: sticky; left: 0; white-space: nowrap; font-weight: 600; min-width: 130px; z-index: 1; }
.board td { min-width: 96px; } .board tr.sum td { background: var(--soft); text-align: center; } .board tr.open td { background: var(--warn-bg); }
.shift { border-radius: var(--rad-s); padding: 4px 6px; margin-bottom: 3px; font-size: 12.5px; line-height: 1.25; background: var(--soft); } .shift.away { background: var(--away); color: var(--mute); font-style: italic; }
.shift .ev { display: block; font-size: 11px; font-weight: 650; opacity: .85; }
.r0 { background: var(--r0); } .r1 { background: var(--r1); } .r2 { background: var(--r2); } .r3 { background: var(--r3); } .r4 { background: var(--r4); } .r5 { background: var(--r5); }
button.shift { display: block; width: 100%; text-align: left; border: 1px solid var(--warn); background: var(--panel); font-weight: 450; padding: 4px 6px; min-height: 0; } button.shift.urgent { border: 2px solid var(--bad); } .mini { display: block; font-size: 11px; color: var(--mute); }
.plain th, .plain td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; } .plain thead th { color: var(--mute); font-size: 12px; font-weight: 650; text-transform: none; } .plain input.money { width: 6.5em; } .proj td { white-space: nowrap; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .plain-list li { padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } .plain-list li[hidden] { display: none; }
.plain-list.files li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .plain-list.files .mono { overflow-wrap: anywhere; font-size: 13px; }
.plain-list.week li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .plain-list.week li > b { min-width: 6.5em; } .plain-list.week .shift { margin: 0; padding: 6px 10px; }
.w-guests { width: 6em; } .w-n3 { width: 4em; } .w-n4 { width: 5em; }

/* the events form, availability, the pay groups, setup */
.evform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; margin: 8px 0; align-items: end; } .evform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); } .evform input, .evform select { width: 100%; }
.evform .check { flex-direction: row; align-items: center; color: var(--ink); } .evform .check input { width: 18px; }
ul.tight { margin: 4px 0; padding-left: 18px; } .paste { background: var(--soft); border-radius: var(--rad-m); padding: 8px 10px; margin: 6px 0; font: 12px/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.planframe { width: 100%; height: 540px; border: 1px solid var(--line); border-radius: var(--rad-m); background: #fff; }
.avail { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; } .avail label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); } .avail select { width: 100%; }
.kp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 8px 0; } .k { border: 1px solid var(--line); border-radius: var(--rad-m); padding: 12px; min-width: 0; } .k.bad { border-color: var(--bad); }
.csv { background: var(--soft); border-radius: var(--rad-m); padding: 10px; overflow-x: auto; font-size: 12px; white-space: pre; }
.checks { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; } .checks li { display: flex; align-items: center; gap: 6px; }
.next { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--brand); background: var(--accent-soft); border-radius: 0 var(--rad-m) var(--rad-m) 0; font-size: 14px; }
.svc.ready { border-left: 3px solid var(--good); } .svc.partial { border-left: 3px solid var(--warn); } .svc.off { border-left: 3px solid var(--bad); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .tile { background: var(--soft); border-radius: var(--rad-m); padding: 10px 12px; } .tile b { display: block; font-size: 22px; font-weight: 650; line-height: 1.25; } .tile span { color: var(--mute); font-size: 13px; }
.steps .step .chip { margin-right: 6px; }
.doc { background: var(--paper); color: var(--paper-ink); border: 1px solid var(--line); border-radius: var(--rad-m); padding: 14px 16px; margin-top: 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; overflow-x: auto; } .doc h1 { font-size: 17px; margin: 0 0 4px; } .doc h2 { font-size: 13px; margin: 12px 0 6px; } .doc h3 { font-size: 12.5px; } .doc table { font-size: 12px; } .doc th, .doc td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; } .doc th { background: var(--soft); } .doc .hd { margin: 0; color: var(--mute); } .doc hr { border: 0; border-top: 1px solid var(--line); } .doc .disc { color: var(--mute); font-size: 11px; }

/* signing in */
.auth { max-width: 460px; margin: 32px auto 0; } .auth .logo { margin-bottom: 20px; } .auth .logo img { height: 48px; } .auth h1 { font-size: 22px; margin: 0 0 6px; }
.auth form { display: grid; gap: 12px; margin-top: 12px; } .auth input[type=tel], .auth input[type=text] { width: 100%; font-size: 20px; letter-spacing: .04em; } .auth input[type=tel] { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad-m); padding: 8px 12px; min-height: 52px; }
.auth button { min-height: 52px; } .auth .help { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .auth { margin-top: 16px; } .auth .card { padding: 16px; } }
/* the front door and the app's own sign-in are one page (web/signin.js): one box that takes a phone number or a work email, and a foot with the language button */
.auth input[type=text].door-id { width: 100%; font-size: 18px; letter-spacing: 0; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad-m); padding: 8px 12px; min-height: 52px; }
.auth .door-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 4px 0 0; } .auth .door-foot button.link { min-height: 44px; }

@media (max-width: 600px) {
  .card { padding: 16px; } .bar { gap: 8px; } .banner { padding: 8px 12px; } .plain-list.week li > b { min-width: 100%; }
  .seg button { padding-inline: 12px; } .planframe { height: 420px; }
  .seg { gap: 6px; background: transparent; border: 0; border-radius: 0; overflow: visible; } .seg button, .seg .wk { border: 1px solid var(--line2); border-radius: var(--rad-m); } .seg button.on { border-color: var(--sel); }      /* a segmented control that has to wrap becomes a row of separate pills on a phone */
}
@media (prefers-reduced-motion: no-preference) {
  button, .btn, .tab, input, select, textarea, a { transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform .08s var(--ease); }
  .loading::before { animation: crewsy-spin .8s linear infinite; } .skel { animation: crewsy-shimmer 1.4s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { :root:root:root { --bg: #f6f7fb; --panel: #ffffff; --ink: #141a2e; --mute: #58607a; --line: #e1e4ee; --line2: #cbd0df; --edge: #7f889f; --soft: #eef0f6; --hover: #e6e9f2; --brand: #ff5c3a; --tan: #ffb7a5; --accent: #141a2e; --accent-ink: #ffffff; --accent-soft: #ffece5; --focus: #e5441f; --sel: #141a2e; --sel-ink: #ffffff; --cta: #ff5c3a; --cta-ink: #141a2e; --cta-hover: #ff7152; --cta-press: #ef4f2d; --good: #1a7344; --warn: #845000; --bad: #b42318; --good-bg: #e2f2e9; --warn-bg: #fcefd3; --bad-bg: #fce3e0; --urgent: #b3261e; --urgent-ink: #ffffff; --away: #e8eaf1; --paper: #ffffff; --paper-ink: #141a2e; --k-kitchen: #b8431c; --k-merged: #8a3517; --k-driver: #17795c; --k-foh: #2569ab; --k-ink: #ffffff; --r0: #dde9f7; --r1: #e6e1f5; --r2: #ddf0e3; --r3: #f9e6d2; --r4: #f6dee6; --r5: #e9edd0; --sh1: 0 1px 2px rgba(20, 26, 46, .06), 0 1px 1px rgba(20, 26, 46, .04); --sh2: 0 6px 18px rgba(20, 26, 46, .12); --sh3: 0 18px 48px rgba(20, 26, 46, .24); --logo-l: block; --logo-d: none; --pc0-b: #E6F1FB; --pc0-t: #0C447C; --pc1-b: #EEEDFE; --pc1-t: #3C3489; --pc2-b: #E1F5EE; --pc2-t: #085041; --pc3-b: #FAECE7; --pc3-t: #712B13; --pc4-b: #EAF3DE; --pc4-t: #27500A; --pc5-b: #FAEEDA; --pc5-t: #633806; --gx-b: #e6e8ee; --gx-r: #a9afbf; --gx-t: #3f4659; --dot-hard: #c62b28; --dot-soft: #c77700; --star: #985a00; --scrim: rgba(14,18,32,.5); color-scheme: light; --heat1-bg: #ffef9e; --heat1-bd: #a67c00; --heat1-bar: #ffd21f; --heat2-bg: #ffc27a; --heat2-bd: #b35900; --heat2-bar: #ff9a2e; --heat3-bg: #ee7d70; --heat3-bd: #b3261e; --heat3-bar: #ff5a4d; } .top, .tabs, .banners, nav.sbar, .bar button { display: none; } body { background: #fff; color: #000; padding: 0; } .card { box-shadow: none; border-color: #999; break-inside: avoid; } .bgrid { max-height: none !important; overflow: visible !important; } .scroll { overflow: visible; } }

/* The message from the button just pressed stays pinned to the top while it shows, so on a phone it is never scrolled out of sight. */
#msg:not(:empty) { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.note.msg { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; box-shadow: 0 1px 0 var(--line), var(--sh2); } .note.msg .link { flex: none; min-height: 0; padding: 0 4px; }
.note.msg .dismiss::before { content: '\00d7'; font-size: 20px; line-height: 1; } .note.msg .dismiss { min-width: 32px; min-height: 32px; text-decoration: none; }
.impact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }

/* ---------- the schedule board (the approved mockup, on real data): web/board.js ---------- */
:root { --pc0-b: #E6F1FB; --pc0-r: #85B7EB; --pc0-t: #0C447C; --pc1-b: #EEEDFE; --pc1-r: #AFA9EC; --pc1-t: #3C3489; --pc2-b: #E1F5EE; --pc2-r: #5DCAA5; --pc2-t: #085041;
  --pc3-b: #FAECE7; --pc3-r: #F0997B; --pc3-t: #712B13; --pc4-b: #EAF3DE; --pc4-r: #97C459; --pc4-t: #27500A; --pc5-b: #FAEEDA; --pc5-r: #EF9F27; --pc5-t: #633806;
  --gx-b: #e6e8ee; --gx-r: #a9afbf; --gx-t: #3f4659; --dot-hard: #c62b28; --dot-soft: #c77700; --star: #985a00; --scrim: rgba(14,18,32,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pc0-b: #0C447C; --pc0-t: #B5D4F4; --pc1-b: #3C3489; --pc1-t: #CECBF6; --pc2-b: #085041; --pc2-t: #9FE1CB; --pc3-b: #712B13; --pc3-t: #F5C4B3; --pc4-b: #27500A; --pc4-t: #C0DD97; --pc5-b: #633806; --pc5-t: #FAC775;
  --gx-b: #2b3350; --gx-r: #6f7a9e; --gx-t: #d3d8e8; --dot-hard: #ff6b63; --dot-soft: #f4b54e; --star: #f4b54e; --scrim: rgba(5,8,18,.66); } }
:root[data-theme="dark"] { --pc0-b: #0C447C; --pc0-t: #B5D4F4; --pc1-b: #3C3489; --pc1-t: #CECBF6; --pc2-b: #085041; --pc2-t: #9FE1CB; --pc3-b: #712B13; --pc3-t: #F5C4B3; --pc4-b: #27500A; --pc4-t: #C0DD97; --pc5-b: #633806; --pc5-t: #FAC775;
  --gx-b: #2b3350; --gx-r: #6f7a9e; --gx-t: #d3d8e8; --dot-hard: #ff6b63; --dot-soft: #f4b54e; --star: #f4b54e; --scrim: rgba(5,8,18,.66); }
.pc0 { --pb: var(--pc0-b); --pr: var(--pc0-r); --pt: var(--pc0-t); } .pc1 { --pb: var(--pc1-b); --pr: var(--pc1-r); --pt: var(--pc1-t); } .pc2 { --pb: var(--pc2-b); --pr: var(--pc2-r); --pt: var(--pc2-t); }
.pc3 { --pb: var(--pc3-b); --pr: var(--pc3-r); --pt: var(--pc3-t); } .pc4 { --pb: var(--pc4-b); --pr: var(--pc4-r); --pt: var(--pc4-t); } .pc5 { --pb: var(--pc5-b); --pr: var(--pc5-r); --pt: var(--pc5-t); }
.bdw { position: relative; }
.bbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 13px; } .bbar label { display: flex; gap: 6px; align-items: center; color: var(--mute); font-size: 13px; } .bbar .warnb { border-color: var(--bad); }
.bmenu { position: absolute; left: 0; top: 46px; z-index: 8; width: min(520px, 100%); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--rad-l); padding: 12px 14px; box-shadow: var(--sh2); }
.bmenu .pre { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; align-items: center; font-size: 12px; color: var(--mute); } .bmenu .pre button { font-size: 12px; min-height: 30px; padding: 0 10px; }
.bmenu .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; } .bmenu h4 { margin: 8px 0 2px; font-size: 11px; font-weight: 650; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.bmenu label { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0; cursor: pointer; min-height: 28px; } .bmenu label.lk { color: var(--mute); cursor: default; } .bmenu .bar { margin-top: 10px; }
.bgrid { max-height: 78vh; overflow: auto; }
table.g { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 11px; }
table.g th, table.g td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table.g thead tr.dr th { font-weight: 400; color: var(--mute); font-size: 11px; padding: 0 2px; background: var(--soft); position: sticky; top: 0; z-index: 4; text-align: center; line-height: 1.3; vertical-align: middle; height: 26px; border-bottom: 1.5px solid var(--edge); }
table.g th.lab { width: 148px; text-align: left; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; z-index: 3; background: var(--soft); }
table.g thead th.lab { z-index: 6; } table.g th.tt { width: 74px; }
table.g tbody th, table.g thead tr.hx th, table.g thead tr.open th { font-weight: 400; color: var(--mute); font-size: 11px; background: var(--soft); }
table.g th.dt { font-weight: 600; color: var(--ink); } table.g th.today { color: var(--accent); box-shadow: inset 0 -3px 0 var(--brand); }      /* today: the orange bar under its date */ table.g th.dt b { font-weight: 650; font-size: 12px; }
button.dh { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; padding: 4px 2px; font-size: 11px; text-align: center; color: inherit; } button.dh:hover { background: var(--hover); } button.dh:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
table.g tr.hx td { padding: 2px; height: 34px; text-align: center; vertical-align: middle; font-size: 11px; background: var(--panel); } table.g tr.hx td.clk { cursor: pointer; } table.g tr.hx td.clk:hover { background: var(--hover); } tr.hx td b { font-weight: 650; } table.g tr.hx td.tot { background: var(--soft); }
table.g tr.open td { background: var(--warn-bg); vertical-align: top; padding: 2px; height: auto; } tr.open th { background: var(--warn-bg); color: var(--warn); font-weight: 650; }
.dpl { line-height: 1.35; white-space: nowrap; font-size: 11px; } .bd { color: var(--bad); font-weight: 650; } .wd { color: var(--warn); font-weight: 650; }
.sp { display: inline-block; font-size: 11px; padding: 0 8px; border-radius: 10px; } .sp.ok { background: var(--good-bg); color: var(--good); } .sp.bad { background: var(--bad-bg); color: var(--bad); }
.oc { display: block; width: 100%; font: inherit; font-size: 11px; text-align: left; line-height: 1.3; border: 1px dashed var(--pr); color: var(--pt); border-radius: 4px; margin: 1px 0; padding: 1px 3px; min-height: 0; background: var(--pb); cursor: grab; } .oc.urg { border: 2px solid var(--dot-hard); } .oc .mini { color: var(--pt); font-size: 11px; }
.ec { display: block; font-size: 11px; line-height: 1.3; border-radius: 4px; margin: 1px 2px; padding: 0 3px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op { color: var(--mute); font-size: 13px; line-height: 1; }
.lb { display: flex; align-items: center; gap: 4px; padding: 0 3px; } .lbn { font-size: 11px; font-weight: 650; min-width: 34px; text-align: right; } .lbn.good { color: var(--good); } .lbn.bad { color: var(--bad); }
.lbt { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); } .lbf { height: 100%; border-radius: 4px; } .lbf.good { background: var(--good); } .lbf.bad { background: var(--bad); }
.lbk { position: absolute; top: -2px; width: 2px; height: 11px; background: var(--ink); }
table.g td { padding: 2px; height: 56px; vertical-align: middle; position: relative; }
table.g td.n { font-size: 12px; padding: 2px 6px !important; background: var(--soft); position: sticky; left: 0; z-index: 2; }      /* (table.g td is position: relative: this must be as specific to stay pinned) */
button.nm { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 4px; max-width: 100%; } button.nm:hover b { text-decoration: underline; } button.nm:focus-visible { outline: 2px solid var(--focus); } button.nm b { font-weight: 450; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } button.nm svg { flex: none; }      /* a long name is cut by its own ellipsis, never the badge beside it */
td.n small { display: block; font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st { color: var(--star); letter-spacing: 1px; }
/* the target figures under a name (days and hours against what the person asked for): a button that explains them; a quiet pill for each figure, its state also in its sign (-1d short, 0 with a tick met, +2d over) and in words, never in colour alone */
button.tg { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: 11px; line-height: 1.35; color: var(--mute); } button.tg:hover .tgl { text-decoration: underline; } button.tg:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tv { display: inline-block; padding: 0 5px; border-radius: 6px; font-weight: 650; font-variant-numeric: tabular-nums; } .tv.under { background: var(--warn-bg); color: var(--warn); } .tv.over { background: var(--accent-soft); color: var(--accent); } .tv.met { background: var(--good-bg); color: var(--good); }
tr.grp td { height: auto; font-size: 11px; font-weight: 650; color: var(--mute); background: var(--bg); padding: 3px 8px; position: static; text-transform: uppercase; letter-spacing: .04em; }
.stk { display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 48px; }
.sh { position: relative; flex: 1; min-height: 0; width: 100%; border-radius: 5px; padding: 2px; text-align: center; line-height: 1.25; cursor: grab; background: var(--pb); border: 1px solid var(--pr); color: var(--pt); display: flex; flex-direction: column; justify-content: center; align-items: center; font: inherit; font-size: 11px; }
.sh:hover { border-color: var(--pt); filter: none; } .sh b { font-weight: 650; } .sh small { display: block; font-size: 11px; color: var(--pt); } .stk.two .sh small { display: none; }
.gx { position: relative; flex: 1; min-height: 0; width: 100%; border-radius: 5px; padding: 2px; text-align: center; line-height: 1.25; cursor: pointer; background: var(--gx-b); background: color-mix(in srgb, var(--gx-b) 70%, transparent); border: 1px solid var(--gx-r); color: var(--gx-t); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; white-space: nowrap; font: inherit; font-size: 11px; }
.gx b { font-weight: 400; } .gx small { display: block; font-size: 11px; color: var(--gx-t); overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .stk.two .gx { flex-direction: row; gap: 3px; } .stk.two .gx small { display: inline; }
.cdt { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--panel); } .cdt.hard { background: var(--dot-hard); } .cdt.soft { background: var(--dot-soft); }
.ics { position: absolute; bottom: 1px; right: 3px; line-height: 1; display: flex; gap: 2px; } .ic { width: 12px; height: 12px; color: var(--pt); }
.em { width: 100%; height: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 0; border-radius: 5px; color: var(--mute); background: transparent; padding: 0; font: inherit; }
.em.mini { min-height: 0; height: auto; padding: 0 0 1px; flex-direction: row; } .em:hover { background: var(--hover); } .em .pl { font-size: 16px; line-height: 1; color: var(--mute); } .em small { font-size: 11px; color: var(--mute); }
.em.ro { cursor: default; } .em.ro:hover { background: transparent; }      /* an empty box on a phone or a tablet is not a button (adding a shift is for a computer): the same box and row height, the availability text, nothing to press */
.em.no .pl { opacity: .5; } .em.to { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--soft) 5px 10px); } .em.to small { color: var(--mute); }
.dz { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft) !important; }
.tot { text-align: center; font-size: 11px; } .tot small { display: block; color: var(--mute); } .tot.ot { color: var(--bad); font-weight: 650; } .tot.ot small { color: var(--bad); }
.ov { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 0; overflow: auto; overscroll-behavior: contain; }
.pop { width: 100%; background: var(--panel); border: 1px solid var(--line2); border-bottom: 0; border-radius: var(--rad-l) var(--rad-l) 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; box-shadow: var(--sh3); } .pop:focus { outline: none; }
@media (min-width: 600px) { .ov { align-items: center; padding: 4vh 16px; } .pop { width: min(460px, 100%); border: 1px solid var(--line2); border-radius: var(--rad-l); padding: 20px 24px; } .pop.wide { width: min(680px, 100%); } }      /* a dialog is a sheet from the bottom on a phone and a centered panel from 600 px up */
.pop .bar { justify-content: space-between; flex-wrap: nowrap; margin-bottom: 4px; } .pop h3 { margin: 0; font-size: 16px; } .pop h4 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pop .x { all: unset; box-sizing: border-box; cursor: pointer; font-size: 24px; line-height: 1; width: 36px; height: 36px; text-align: center; color: var(--mute); border-radius: var(--rad-m); } .pop .x:hover { background: var(--hover); } .pop .x:focus-visible { outline: 2px solid var(--focus); }
.pop .fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; } .pop .fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.pop label.f { font-size: 12px; color: var(--mute); display: block; margin: 0 0 3px; } .pop select, .pop textarea, .pop input[type=text] { width: 100%; font-size: 14px; box-sizing: border-box; } .pop textarea { height: 56px; padding: 6px 8px; resize: none; font: inherit; }
.cf { display: flex; font-size: 13px; padding: 8px 10px; border-radius: var(--rad-m); margin: 10px 0 0; align-items: center; gap: 8px; background: var(--soft); } .cf:empty { display: none; }
.cf i.d { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--good); } .cf.bad { background: var(--bad-bg); color: var(--bad); } .cf.bad i.d { background: var(--dot-hard); } .cf.warn { background: var(--warn-bg); color: var(--warn); } .cf.warn i.d { background: var(--dot-soft); } .cf.ok { background: var(--good-bg); color: var(--good); }
.ck { display: flex; gap: 14px; font-size: 13px; margin: 8px 0; flex-wrap: wrap; } .ck label { display: flex; gap: 6px; align-items: center; min-height: 32px; }
.why { font-size: 12px; color: var(--mute); background: var(--soft); border-radius: var(--rad-m); padding: 8px 10px; margin: 8px 0; } .why.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.ft { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.ftplain button { width: 100%; min-height: 52px; font-size: 16px; font-weight: 650; }      /* a phone sheet's Close: neutral and full width (shiftnote.js plain: Store health's working of a measure) */
.lg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--mute); margin: 8px 0 0; align-items: center; } .lg i.s { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; background: var(--pb); border: 1px solid var(--pr); } .lg i.gxs { background: var(--gx-b); border-color: var(--gx-r); }
.lg i.d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; } .lg i.d.hard { background: var(--dot-hard); } .lg i.d.soft { background: var(--dot-soft); }
.stars.ro { display: block; font-size: 24px; line-height: 1.2; letter-spacing: 3px; color: var(--star); }      /* the stars of a person on a phone or a tablet: shown, not buttons */
.stars { display: flex; gap: 6px; margin: 8px 0 6px; } .stars button { font-size: 28px; line-height: 1; width: 52px; height: 52px; padding: 0; color: var(--mute); } .stars button.on { color: var(--star); border-color: var(--star); }
table.plain.ot, table.plain.avt { margin-top: 6px; } table.plain.avt th { width: 60px; text-align: left; font-weight: 600; }
.pop .plain-list { list-style: none; margin: 4px 0; padding: 0; } .pop .plain-list li { padding: 4px 0; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 640px) { .pop .fr3 { grid-template-columns: 1fr 1fr; } .bmenu .cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .sh, .gx, .em { transition: background-color .12s, border-color .12s; } }
/* the board on a phone: the person column is narrower and the type a step larger; every row keeps its exact height (the pinned header's offsets are sums of them) */
@media (max-width: 600px) {
  table.g { min-width: 880px; font-size: 12px; } table.g th.lab { width: 116px; } table.g th.tt { width: 62px; }
  table.g thead tr.dr th, table.g tbody th, table.g thead tr.hx th, table.g thead tr.open th, table.g tr.hx td, .dpl, .sp, .oc, .ec, .lbn, .sh, .gx, .sh small, .gx small, td.n small, .em small, .tot, tr.grp td { font-size: 12px; }
  table.g th.dt b, button.nm b { font-size: 13px; } table.g td.n { font-size: 13px; }
}
/* touch: a phone or a touch screen gets 44 px targets for the small controls that set their own size (the body prefix outweighs the rule that set the size; the pinned crew chips are left to their own rule) */
@media (pointer: coarse), (max-width: 600px) {
  body .hfl button, body .schips button, body .dsw button, body .actions-top button, body .sbtns button, body .kt-go, body .kt-x, body .pop .x, body .ib, body button.link, body .bmenu .pre button, body .pr-in, body .pr-vmin, body .sav7 select, body .pf-lrow input,
  body .cqset input, body .et-opt, body .ck label, body .check, body summary, body a.sbtn, body .viewas button, body .dv-days button, body .cqcn, body .cqln, body .note.msg .dismiss, body input[type=file], body .gd-tbl td input, body .cg-grid input[type=number], body .pf-field input, body .pf-field select,
  body .wk-card summary, body .ds-sch summary, body .bk-past-box summary, body .sq-ign summary, body .bnotes summary, body .fcs-det summary, body .bmenu label, body .gd-vis, body .pf-check { min-height: 44px; }      /* (the rows that open and the checkbox rows have their own smaller heights above: the body prefix outweighs them) */
  body :is(input[type=text], input[type=number], input[type=search], input[type=tel], input[type=date], input[type=time], input[type=email], select, textarea):not(.ovr, #_) { min-height: 44px; }      /* (the #_ outweighs the many boxes that set their own 32 to 40 px; the board's own sales box is left to its pinned row) */
  body .pop .x, body .ib, body .kt-x { min-width: 44px; width: 44px; } body .note.msg .dismiss { min-width: 44px; }
  body a.fct-src { display: inline-flex; align-items: center; min-height: 44px; }      /* the Forecast tab's sources are read on a phone: a link is a 44 px target */
  body button.nm::after { content: ""; position: absolute; inset: 0; } body .em.mini { min-height: 28px; }      /* the name on the board: the whole cell is the target */
}
@media (max-width: 600px) {
  body .hpill, body .hloc, body .hinc, body .cfp, body .spill, body .stag, body .cnt, body .sp, body .chip, body button.ssh small, body .hn span, body .hsec h4, body .bmenu h4, body .sc2, body .sc2 small, body .cqlv, body .cqp, body .cqu, body .cqs, body .cqsq, body .cqday small,
  body .gd-svc, body .dv-axis, body .gb, body .dsb, body .pchip small, body .urgp, body .shift .ev, body .mini, body .oc .mini, body .doc .disc, body .tot, body table.g button.dh, body .lbn, body .hoff-tbl thead th, body .hoff-tag, body .hrc { font-size: 12px; }      /* small marks are never under 12 px on a phone (web.test.mjs measures every visible text at 375 px) */
  table.g td.n small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }      /* the person column is 116 px: the stars come first and the job takes two lines instead of cutting the stars off */
  .pop .fr2 { grid-template-columns: 1fr; } .pop .fr3 > :first-child { grid-column: 1 / -1; }      /* the shift dialog: Person and Job one under the other (a name with its stars and hours does not fit half a phone), Day on its own row, Starts and Ends side by side */
  .bmenu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain; z-index: 40; border-width: 1px 0 0; border-radius: var(--rad-l) var(--rad-l) 0 0; padding-bottom: 0; box-shadow: var(--sh3); }
  .bmenu > .bar { position: sticky; bottom: 0; margin: 10px -14px 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); }      /* "Show rows" is a sheet from the bottom on a phone, as tall as the screen allows, scrolling inside itself with Done always in reach */
  .banners { gap: 4px; } .banner { padding: 6px 10px; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }      /* the setup notes take two lines each on a phone, so the first card starts higher; the full words are on a wider screen and in Setup */
  .bar.actions { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .bar.actions > * { min-width: 0; }      /* the board's four steps are a 2 by 2 grid, not four rows */
}
/* the bars (a style attribute is not allowed, so each width is a rule) */
.lbf[data-w="0"]{width:0%}.lbk[data-w="0"]{left:0%}
.lbf[data-w="5"]{width:5%}.lbk[data-w="5"]{left:5%}
.lbf[data-w="10"]{width:10%}.lbk[data-w="10"]{left:10%}
.lbf[data-w="15"]{width:15%}.lbk[data-w="15"]{left:15%}
.lbf[data-w="20"]{width:20%}.lbk[data-w="20"]{left:20%}
.lbf[data-w="25"]{width:25%}.lbk[data-w="25"]{left:25%}
.lbf[data-w="30"]{width:30%}.lbk[data-w="30"]{left:30%}
.lbf[data-w="35"]{width:35%}.lbk[data-w="35"]{left:35%}
.lbf[data-w="40"]{width:40%}.lbk[data-w="40"]{left:40%}
.lbf[data-w="45"]{width:45%}.lbk[data-w="45"]{left:45%}
.lbf[data-w="50"]{width:50%}.lbk[data-w="50"]{left:50%}
.lbf[data-w="55"]{width:55%}.lbk[data-w="55"]{left:55%}
.lbf[data-w="60"]{width:60%}.lbk[data-w="60"]{left:60%}
.lbf[data-w="65"]{width:65%}.lbk[data-w="65"]{left:65%}
.lbf[data-w="70"]{width:70%}.lbk[data-w="70"]{left:70%}
.lbf[data-w="75"]{width:75%}.lbk[data-w="75"]{left:75%}
.lbf[data-w="80"]{width:80%}.lbk[data-w="80"]{left:80%}
.lbf[data-w="85"]{width:85%}.lbk[data-w="85"]{left:85%}
.lbf[data-w="90"]{width:90%}.lbk[data-w="90"]{left:90%}
.lbf[data-w="95"]{width:95%}.lbk[data-w="95"]{left:95%}
.lbf[data-w="100"]{width:100%}.lbk[data-w="100"]{left:100%}


/* ---------- Shifts and requests (the approved hub and approvals widgets): web/hub.js ---------- */
.hscope { font-size: 12px; color: var(--mute); line-height: 1.45; background: var(--soft); border-radius: var(--rad-m); padding: 8px 10px; margin: 0 0 10px; } .hscope b { color: var(--ink); font-weight: 650; }
.cnt { display: inline-block; font-size: 11px; min-width: 18px; text-align: center; border-radius: 9px; padding: 0 5px; margin-left: 6px; background: var(--warn-bg); color: var(--warn); font-weight: 650; } .seg button.on .cnt { background: var(--accent-ink); color: var(--accent); }
.htiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.hm { background: var(--soft); border-radius: var(--rad-m); padding: 9px 10px; min-width: 0; } .hm p { margin: 0; font-size: 12px; color: var(--mute); } .hm b { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; } .hm.u b { color: var(--bad); }
.hctl { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; } .hctl label { display: flex; gap: 6px; align-items: center; color: var(--mute); }
.hfl { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } .hfl button { font-size: 12px; min-height: 32px; padding: 0 12px; } .hfl button.on { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); font-weight: 650; } .hfl button.ub:not(.on) { color: var(--bad); }
.hrule { font-size: 12px; color: var(--mute); background: var(--soft); border-radius: var(--rad-m); padding: 8px 10px; margin: 0 0 10px; line-height: 1.5; } .hrule b { color: var(--ink); font-weight: 650; }
.hgh { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 14px; font-weight: 650; } .hgh span { font-weight: 400; font-size: 12px; color: var(--mute); } .hi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; color: var(--mute); } .hi.chev { width: 16px; height: 16px; }
.hc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); margin: 0 0 8px; } .hc.urg { border: 2px solid var(--dot-hard); background: var(--bad-bg); }
button.hd { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; flex-wrap: wrap; width: 100%; min-height: 44px; border-radius: var(--rad-l); } button.hd:hover { background: var(--hover); } button.hd:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ht { flex: 1; min-width: 160px; font-size: 13px; } .ht b { display: block; font-weight: 650; font-size: 14px; } .ht span { color: var(--mute); font-size: 12px; }
.hpill { font-size: 11px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; font-weight: 650; } .hpill.wait { background: var(--warn-bg); color: var(--warn); } .hpill.ok { background: var(--good-bg); color: var(--good); } .hpill.no { background: var(--bad-bg); color: var(--bad); } .hpill.hold { background: var(--accent-soft); color: var(--accent); } .hpill.neu { background: var(--soft); color: var(--mute); border: 1px solid var(--line); } .hpill.urgent { background: var(--urgent); color: var(--urgent-ink); }
.cfp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 9px; border-radius: 10px; background: var(--panel); border: 1px solid var(--edge); color: var(--ink); font-weight: 650; } .cd { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .cd.hard { background: var(--dot-hard); } .cd.soft { background: var(--dot-soft); } .cd.pt { width: 5px; height: 5px; background: var(--mute); margin-right: 4px; vertical-align: 2px; }
.hloc { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--soft); border: 1px solid var(--edge); color: var(--mute); } .hinc { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.hbd { padding: 0 12px 12px; border-top: 1px solid var(--line); font-size: 13px; } .hsec { margin: 10px 0 0; } .hsec h4 { margin: 0 0 4px; font-size: 11px; font-weight: 650; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.cfl { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 10px; border-radius: var(--rad-m); background: var(--soft); margin: 0 0 4px; line-height: 1.45; } .cfl .cd { margin-top: 5px; }
.hrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; font-size: 13px; } .hn { width: 150px; } .hn span { display: block; font-size: 11px; color: var(--mute); }
.sc2 { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px; border-radius: 10px; margin: 2px 4px 2px 0; background: var(--soft); border: 1px solid var(--edge); color: var(--mute); } .sc2.acc { background: var(--good-bg); color: var(--good); border-color: var(--good); } .sc2.dec { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); } .sc2 small { font-size: 11px; color: inherit; }
.hlg { font-size: 12px; color: var(--mute); padding: 2px 0; } .hlg .mute { margin-left: 4px; }
.hact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; } .hact small { font-size: 12px; color: var(--mute); } .hact input[type=text] { flex: 1 1 220px; min-width: 0; }
.hskip { font-size: 12px; color: var(--mute); margin-top: 8px; line-height: 1.5; } .hskip b { color: var(--ink); font-weight: 650; }
.hc2 { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); padding: 12px 14px; margin: 0 0 10px; } .hhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hhead b { font-weight: 650; font-size: 14px; } .grow { flex: 1; }
.hline { font-size: 13px; margin: 6px 0 0; }
.hdiff { display: grid; grid-template-columns: 44px 1fr 18px 1fr; gap: 4px 8px; font-size: 12px; margin: 10px 0 0; align-items: center; } .hdiff .d { color: var(--mute); } .hdiff .d.full { grid-column: 1 / -1; } .hdiff .ch { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 2px 8px; font-weight: 650; } .hdiff .no { padding: 2px 8px; } .hdiff .ar { color: var(--mute); font-style: normal; text-align: center; }
.hflag { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; border-radius: var(--rad-m); padding: 7px 10px; margin: 8px 0 0; line-height: 1.45; } .hflag.a { background: var(--warn-bg); color: var(--warn); } .hflag.r { background: var(--bad-bg); color: var(--bad); } .hflag.i { background: var(--soft); color: var(--mute); }
.hap { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; } .hap span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 10px; border: 1px solid var(--edge); color: var(--mute); } .hap span.y { background: var(--good-bg); color: var(--good); border-color: var(--good); }
.hdc { margin-top: 8px; } .hdc textarea { width: 100%; box-sizing: border-box; height: 56px; padding: 6px 8px; font: inherit; font-size: 14px; resize: none; }
.hblk { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--mute); background: var(--soft); border-radius: var(--rad-l); }
@media (max-width: 760px) { .htiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hn { width: 100%; } }
/* ---------- what a team member sees (the approved staff phone widget): web/staff.js ---------- */
.sapp { max-width: 520px; margin: 0 auto; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { .sapp { max-width: 600px; } }
.sh2 { font-size: 16px; font-weight: 650; margin: 14px 0 8px; } .ssub { font-size: 12px; color: var(--mute); margin: -4px 0 8px; } .srow { display: flex; align-items: center; gap: 8px; } .srow > div:first-child:not(.seg) { flex: 1; min-width: 0; } .srow .grow { flex: 1; margin: 0; }
nav.sbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--panel); border-top: 1px solid var(--line); padding: 4px max(0px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(0px, env(safe-area-inset-left, 0px)); box-shadow: 0 -6px 16px -8px rgba(20, 26, 46, .18); }
@media (min-width: 768px) { nav.sbar { left: 50%; right: auto; width: 600px; transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--rad-l) var(--rad-l) 0 0; } }      /* on a wide screen the team member's bar is a panel under their column, not a strip across the whole window */
nav.sbar .tab { flex: 1; border: 0; background: transparent; border-radius: 0; min-height: 52px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--mute); font-weight: 600; box-shadow: none; white-space: normal; }
nav.sbar .tab span { max-width: 100%; text-align: center; overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; }      /* a long word (Spanish: Disponibilidad) breaks inside its place instead of spilling into the next one */
nav.sbar .tab.on { color: var(--ink); box-shadow: inset 0 3px 0 var(--brand); background: transparent; } nav.sbar .tab:hover { background: var(--hover); } .si { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sday { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: flex-start; } .sdn { width: 52px; font-size: 12px; color: var(--mute); flex: none; padding-top: 2px; } .sdn b { display: block; font-weight: 650; color: var(--ink); font-size: 13px; } .sbls { flex: 1; min-width: 0; display: grid; gap: 6px; } .soff { padding-top: 2px; display: block; }
button.ssh { width: 100%; text-align: left; border-radius: 10px; padding: 8px 10px; font-size: 13px; cursor: pointer; border: 1px solid var(--edge); min-height: 44px; display: block; font-weight: 450; line-height: 1.35; }
button.ssh.p0 { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } button.ssh.p1 { background: var(--good-bg); color: var(--good); border-color: var(--good); } button.ssh.past { background: var(--soft); color: var(--mute); border-color: var(--line); }
button.ssh b { font-weight: 650; } button.ssh small { display: block; font-size: 11px; margin-top: 2px; opacity: .9; white-space: normal; }
.sbls > .stag { justify-self: start; }
.stag { font-size: 11px; padding: 1px 8px; border-radius: 9px; background: var(--panel); border: 1px solid var(--edge); color: var(--mute); margin-left: 6px; }
.ssheet { background: var(--soft); border-radius: var(--rad-l); padding: 10px 12px; margin: 6px 0 0; font-size: 13px; } .sbtns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .sbtns button { font-size: 12px; min-height: 36px; }
.scard { border: 1px solid var(--line); border-radius: var(--rad-l); padding: 10px 12px; margin: 0 0 8px; font-size: 13px; background: var(--panel); } .scard small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; } .scard b { font-weight: 650; }
.spill { font-size: 11px; padding: 2px 9px; border-radius: 10px; white-space: nowrap; font-weight: 650; } .spill.w { background: var(--warn-bg); color: var(--warn); } .spill.o { background: var(--good-bg); color: var(--good); } .spill.n { background: var(--bad-bg); color: var(--bad); }
.swarn { font-size: 12px; border-radius: var(--rad-m); padding: 8px 10px; margin: 8px 0; line-height: 1.45; display: flex; gap: 8px; } .swarn.a { background: var(--warn-bg); color: var(--warn); } .swarn.r { background: var(--bad-bg); color: var(--bad); } .swarn.i { background: var(--soft); color: var(--mute); }
.sfrm label { display: block; font-size: 12px; color: var(--mute); margin: 8px 0 3px; } .sfrm input, .sfrm select { width: 100%; font-size: 14px; box-sizing: border-box; } .stwo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr)); gap: 8px; } .stwo > * { min-width: 0; }      /* two date boxes side by side when they fit, one under the other on the narrowest phones (320 px) instead of pushing the page sideways */ .sfull { width: 100%; margin-top: 10px; }
.sav7 { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; } .sav7 .dd { width: 38px; font-weight: 650; } .sav7 select { font-size: 13px; min-height: 36px; width: auto; padding-inline: 8px 22px; min-width: 0; } .sav7 .hrs { display: flex; align-items: center; gap: 8px; color: var(--mute); }
.schips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .schips button { font-size: 12px; min-height: 32px; padding: 0 12px; border-radius: 16px; } .schips button.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); font-weight: 650; }
#pplq { width: 100%; max-width: 520px; box-sizing: border-box; font-size: 14px; }
ul.sct { list-style: none; margin: 0; padding: 0; } ul.sct li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; } ul.sct li[hidden] { display: none; }
.sav { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 650; flex: none; } .stx { flex: 1; min-width: 0; } .stx b { display: block; font-weight: 600; } .stx small { display: block; font-size: 12px; color: var(--mute); } .sph { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Contacts, for a team member: each valid number has two links beside it, Call (tel:) and Text (sms:); the phone's own dialer or messages app opens, and Crewsy sends nothing. A number that is not valid is plain text, as before. */
.sphone { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; flex: none; }
a.sbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 56px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 20px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; }
a.sbtn:hover { background: var(--hover); }
@media (max-width: 440px) { ul.sct li.sct-p { flex-wrap: wrap; } ul.sct li.sct-p .sphone { flex: 1 0 100%; justify-content: flex-start; padding-left: 44px; } }
/* form controls stay at 16px so a phone does not zoom the page when one is focused; the page keeps its keyboard-focused control clear of the fixed bars */
.sfrm input, .sfrm select, .sav7 select, #pplq, .pop select, .pop textarea, .pop input[type=text], .hdc textarea, .hact input[type=text], .pf-lrow input, .pf-dob select { font-size: 16px; }
html { scroll-padding-top: 72px; scroll-padding-bottom: 96px; }

/* People (web/people.js): the list, the profile with its three cards, and the red under 18 badge. Every class starts with pf-. */
.pf-u18 { color: var(--dot-hard); flex: none; vertical-align: -0.2em; }
.pf-wrap { max-width: 1040px; margin: 0 auto; }
.pf-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 28px; }      /* the people list uses the width: as many columns as fit, one on a phone */
.pf-row { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start; text-align: left; background: none; border: 0; border-radius: var(--rad-m); padding: 6px 4px; min-height: 48px; font-weight: 400; } .pf-row:hover { background: var(--hover); }
.pf-row .stx b { display: flex; align-items: center; gap: 6px; }
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; align-items: start; } .pf-grid2 > .pf-card { margin: 0; }
@media (max-width: 640px) { .pf-grid2 { grid-template-columns: 1fr; } } .pf-grid2 > :only-child { grid-column: 1 / -1; }
.pf-card h3:focus { outline: none; }
.pf-name { display: flex; align-items: center; gap: 8px; font-size: 15px; } .pf-name b { font-weight: 500; }
.pf-sub, .pf-intro { font-size: 12px; color: var(--mute); margin: 2px 0 10px; }
.pf-va { margin: 0 0 10px; gap: 6px 10px; }
/* The owner's preview of a team member's screens (ui.js): a banner that stays at the top with Exit in it, in the warm warning colors so it cannot be taken for the person's own screen. */
.viewas { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; border-radius: 0 0 var(--rad-m) var(--rad-m); padding: 8px 16px; background: var(--warn-bg); color: var(--warn); border-bottom: 2px solid var(--warn); font-size: 14px; font-weight: 600; }
.viewas-t { flex: 1 1 260px; min-width: 0; } .viewas button { min-height: 40px; }
.pf-check.pf-box { display: flex; background: var(--soft); border-radius: var(--rad-m); padding: 8px 10px; }
.pf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .pf-check input { width: 18px; height: 18px; margin: 0; }
.pf-dob { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; } .pf-save { grid-column: auto; } .pf-dob label { display: grid; gap: 2px; font-size: 12px; color: var(--mute); }
.pf-msg { font-size: 12px; margin: 10px 0 0; padding: 8px 10px; border-radius: var(--rad-m); background: var(--soft); color: var(--mute); line-height: 1.5; } .pf-msg.pf-red { background: var(--bad-bg); color: var(--bad); } .pf-msg b { font-weight: 650; }
.pf-lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .pf-lrow input { width: 72px; text-align: center; min-height: 36px; padding: 4px; }
.pf-school { margin-top: 10px; display: grid; gap: 8px; } .pf-days { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; }
.pf-ro { font-size: 12px; color: var(--mute); margin: 8px 0 0; }
.pf-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rad-m); }
.pf-tbl { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; font-size: 12px; } .pf-tbl th, .pf-tbl td { border: 1px solid var(--line); padding: 4px; vertical-align: middle; } .pf-tbl thead th { background: var(--soft); color: var(--mute); font-weight: 400; }
.pf-tbl .pf-lab { width: 124px; text-align: left; background: var(--soft); font-weight: 400; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); } .pf-lab small { display: block; color: var(--mute); }
.pf-nm { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.pf-sh { position: relative; display: block; border-radius: 5px; padding: 6px 4px; text-align: center; background: var(--pb); border: 1px solid var(--pr); color: var(--pt); } .pf-sh b { font-weight: 650; } .pf-sh + .pf-sh { margin-top: 3px; }
.pf-away { background: var(--gx-b); border-color: var(--gx-r); color: var(--gx-t); } .pf-away small { display: block; color: var(--gx-t); }
.pf-bad { font-size: 12px; color: var(--bad); margin: 6px 0 0; } .pf-ok { font-size: 12px; color: var(--mute); margin: 6px 0 0; } .pf-foot { font-size: 12px; color: var(--mute); margin: 8px 0 0; }
/* The profile's Locations and roles card: the person's stores, each with its roles under it (a store that is not the manager's: its name only). It sits under the first card, so that the limits card keeps its place beside them. */
.pf-col { display: grid; gap: 12px; align-content: start; min-width: 0; } .pf-col > .pf-card { margin: 0; }
.pf-loclist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; } .pf-loc { padding: 8px 10px; background: var(--soft); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; } .pf-loc h4 { display: inline; margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.pf-roles { list-style: none; margin: 4px 0 0; padding: 0; color: var(--mute); } .pf-locnote { font-size: 12px; color: var(--mute); margin: 4px 0 0; } span.pf-locnote { margin: 0 0 0 8px; }

/* Staffing guide (web/guide.js): the settings strip, the Try panel, the worksheet table and the Roles view. Every class starts with gd-. */
.gd-wrap { max-width: 1120px; margin: 0 auto; }
.gd-set { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 14px; margin: 10px 0; } .gd-set label { display: grid; gap: 2px; font-size: 12px; color: var(--mute); } .gd-set input, .gd-set select { min-width: 96px; } .gd-reset { margin-left: auto; }
.gd-try { background: var(--soft); border-radius: var(--rad-m); padding: 10px 12px; margin: 10px 0; } .gd-try h3 { margin: 0 0 4px; } .gd-tryin { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; } .gd-tryin label { display: grid; gap: 2px; font-size: 12px; color: var(--mute); } .gd-tryin input { width: 110px; } .gd-tot { font-size: 13px; } .gd-line { font-size: 13px; margin: 6px 0 0; }
.gd-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rad-m); margin: 10px 0; }
.gd-tbl { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; font-size: 12px; } .gd-tbl th, .gd-tbl td { border: 1px solid var(--line); padding: 3px 4px; text-align: center; vertical-align: middle; } .gd-tbl thead th { background: var(--soft); color: var(--mute); font-weight: 400; }
.gd-tbl .gd-lab { width: 150px; text-align: left; font-weight: 400; background: var(--panel); position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); } .gd-lab small { display: block; color: var(--mute); }
.gd-tbl td input { width: 100%; text-align: center; min-height: 32px; padding: 2px 0; font-size: 16px; } .gd-tbl.wide9 { min-width: 820px; }
.gd-sec th { background: var(--soft); text-align: left; font-weight: 650; } .gd-sub th, .gd-sub td { background: var(--soft); color: var(--mute); } .gd-tot th, .gd-tot td { font-weight: 650; }
.gd-hot th, .gd-hot td { background: var(--accent-soft); font-weight: 650; } .gd-tbl td.gd-on { background: var(--accent-soft); } .gd-svc { font-size: 11px; color: var(--mute); }
.gd-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--warn-bg); color: var(--warn); border-radius: var(--rad-m); padding: 8px 12px; margin: 8px 0; } .gd-bar span { flex: 1; min-width: 160px; }
.gd-roles { width: 100%; border-collapse: collapse; font-size: 13px; } .gd-roles th, .gd-roles td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; } .gd-roles .gd-sec th { font-weight: 650; } .gd-vis { display: inline-flex; align-items: center; gap: 6px; } .gd-vis input { width: 18px; height: 18px; margin: 0; }

/* ---- crew quality (web/crew.js): the chips in the Crew quality row, the panel under the header, the rollover and the full screen. Every class starts with cq. No inline style: the rollover is placed by data-x and data-y (2 percent steps), the bars by data-w (5 percent steps). ---- */
.cqchip { border: 0; cursor: pointer; min-height: 28px; font-family: inherit; line-height: 1.2; }
.cqchip.sel { outline: 2px solid var(--focus); outline-offset: 1px; }
.cqchip:focus-visible, .cqln:focus-visible, .cqcell:focus-visible, .cqday:focus-visible, .cqcn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (pointer: coarse) { .cqchip { min-height: 44px; min-width: 44px; } }
table.g tr.cqpan td { padding: 0; height: auto; text-align: left; background: var(--panel); border-bottom: 2px solid var(--line); }
.cqin { position: sticky; left: 0; width: min(100%, 38rem); max-width: calc(100vw - 6rem); padding: 10px 12px; font-size: 13px; white-space: normal; }
.cqin .bar { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; } .cqin h4 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); } .cqin h4:focus { outline: none; }
.cqln { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; min-height: 36px; margin: 3px 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); color: var(--ink); text-align: left; font: inherit; font-size: 13px; cursor: pointer; } .cqln:hover { background: var(--hover); }
.cqtip { position: absolute; z-index: 70; width: min(23rem, calc(100% - 8px)); background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: 10px; padding: 10px 12px; box-shadow: var(--sh2); font-size: 12px; line-height: 1.4; text-align: left; font-weight: 400; pointer-events: none; white-space: normal; }
.cqth { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; } .cqth b { font-size: 13px; }
.cqlv { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 650; } .cqlv.ok { background: var(--good-bg); color: var(--good); } .cqlv.watch { background: var(--warn-bg); color: var(--warn); } .cqlv.weak { background: var(--bad-bg); color: var(--bad); } .cqic { width: 11px; height: 11px; flex: none; }
.cqmeter { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cqbar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); } .cqf { display: block; height: 100%; border-radius: 4px; } .cqf.ok { background: var(--good); } .cqf.watch { background: var(--warn); } .cqf.weak { background: var(--bad); } .cqk { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.cqpc { font-weight: 650; font-size: 12px; } .cqpc.g { color: var(--good); } .cqpc.y { color: var(--warn); } .cqpc.r { color: var(--bad); }
.cqun { margin: 0 0 6px; } .cqpp { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.cqp { display: inline-flex; gap: 4px; align-items: center; padding: 1px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 11px; } .cqp i { font-style: normal; letter-spacing: 1px; color: var(--warn); } .cqp.s1 { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); } .cqp.s1 i { color: var(--bad); } .cqp.s3 { background: var(--good-bg); color: var(--good); border-color: var(--good); } .cqp.s3 i { color: var(--good); }
.cqrs { margin: 4px 0; padding-left: 18px; } .cqok { margin: 4px 0; color: var(--good); }
.cqfx { margin: 6px 0 0; padding: 6px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--ink); }
.cqdc { padding: 6px 0; border-top: 1px solid var(--line); } .cqdc:first-of-type { border-top: 0; }
.pop.full { width: min(1180px, 100%); max-height: 94vh; max-height: 94dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.cqscroll { overflow: auto; min-height: 0; flex: 1; padding-bottom: 8px; }
.cqcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; } .cqcard h4 { margin: 0 0 8px; }
.cqtiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cqday { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 6px 2px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--soft); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; } .cqday b { font-size: 18px; } .cqday small { font-size: 11px; min-height: 14px; } .cqday.g { background: var(--good-bg); color: var(--good); } .cqday.y { background: var(--warn-bg); color: var(--warn); } .cqday.r { background: var(--bad-bg); color: var(--bad); } .cqday.sel { outline: 2px solid var(--focus); outline-offset: 1px; }
.cqlg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; margin: 8px 0 0; } .cqdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .cqdot.g { background: var(--good); } .cqdot.y { background: var(--warn); } .cqdot.r { background: var(--bad); }
.cqsetrow { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 10px; } .cqset { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--mute); } .pop .cqset input { width: 78px; min-height: 32px; text-align: center; font-size: 16px; } .cqset span { white-space: nowrap; }
.cqgs { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rad-m); }
.cqg { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.cqg th, .cqg td { border: 1px solid var(--line); padding: 3px 4px; text-align: center; vertical-align: middle; } .cqg thead th { background: var(--soft); color: var(--mute); font-weight: 400; } .cqg thead th small { display: block; } .cqg thead th.sel { color: var(--ink); font-weight: 650; }
.cqg .cqlab { width: 130px; text-align: left; font-weight: 400; background: var(--panel); position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); } .cqlab small { display: block; color: var(--mute); }
.cqg tr.cqsec th { background: var(--soft); text-align: left; font-weight: 650; } .cqg td.cr.weak { background: var(--bad-bg); } .cqg td.cr.watch { background: var(--warn-bg); } .cqg td.none { color: var(--mute); }
.cqcell { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 44px; padding: 2px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cqsqs { display: inline-flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.cqsq { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid var(--edge); border-radius: 3px; background: var(--panel); color: var(--ink); font-size: 11px; font-style: normal; font-weight: 650; } .cqsq.s1 { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); } .cqsq.s3 { background: var(--good-bg); color: var(--good); border-color: var(--good); }
.cqu { font-size: 11px; font-variant-numeric: tabular-nums; } .cqu.bad { color: var(--bad); font-weight: 700; } .cqu.mid { color: var(--warn); font-weight: 650; } .cqs { font-size: 11px; font-weight: 650; color: var(--ink); }
.cqkey { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; margin: 8px 0 4px; }
.cqreq { padding: 6px 0; border-top: 1px solid var(--line); } .cqreq:first-of-type { border-top: 0; }
.cqrb { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cqrt { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); } .cqrm { position: absolute; top: -4px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.cqroles { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.cqcr.red .mute { color: var(--ink); } .cqcr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 8px; border-radius: var(--rad-m); margin: 2px 0; } .cqcr.red { background: var(--bad-bg); }
.cqcn { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 4px 0; min-height: 32px; text-align: left; }
.cqbig { font-size: 18px; font-weight: 700; } .cqbig.g { color: var(--good); } .cqbig.y { color: var(--warn); } .cqbig.r { color: var(--bad); }
.cqpr { margin: 4px 0; font-size: 13px; }
@media (max-width: 480px) { .cqday b { font-size: 15px; } .cqday { padding: 4px 0; } .cqsetrow { gap: 8px 10px; } }.cqtip[data-x="0"]{left:0%}.cqtip[data-y="0"]{top:0%}
.cqtip[data-x="2"]{left:2%}.cqtip[data-y="2"]{top:2%}
.cqtip[data-x="4"]{left:4%}.cqtip[data-y="4"]{top:4%}
.cqtip[data-x="6"]{left:6%}.cqtip[data-y="6"]{top:6%}
.cqtip[data-x="8"]{left:8%}.cqtip[data-y="8"]{top:8%}
.cqtip[data-x="10"]{left:10%}.cqtip[data-y="10"]{top:10%}
.cqtip[data-x="12"]{left:12%}.cqtip[data-y="12"]{top:12%}
.cqtip[data-x="14"]{left:14%}.cqtip[data-y="14"]{top:14%}
.cqtip[data-x="16"]{left:16%}.cqtip[data-y="16"]{top:16%}
.cqtip[data-x="18"]{left:18%}.cqtip[data-y="18"]{top:18%}
.cqtip[data-x="20"]{left:20%}.cqtip[data-y="20"]{top:20%}
.cqtip[data-x="22"]{left:22%}.cqtip[data-y="22"]{top:22%}
.cqtip[data-x="24"]{left:24%}.cqtip[data-y="24"]{top:24%}
.cqtip[data-x="26"]{left:26%}.cqtip[data-y="26"]{top:26%}
.cqtip[data-x="28"]{left:28%}.cqtip[data-y="28"]{top:28%}
.cqtip[data-x="30"]{left:30%}.cqtip[data-y="30"]{top:30%}
.cqtip[data-x="32"]{left:32%}.cqtip[data-y="32"]{top:32%}
.cqtip[data-x="34"]{left:34%}.cqtip[data-y="34"]{top:34%}
.cqtip[data-x="36"]{left:36%}.cqtip[data-y="36"]{top:36%}
.cqtip[data-x="38"]{left:38%}.cqtip[data-y="38"]{top:38%}
.cqtip[data-x="40"]{left:40%}.cqtip[data-y="40"]{top:40%}
.cqtip[data-x="42"]{left:42%}.cqtip[data-y="42"]{top:42%}
.cqtip[data-x="44"]{left:44%}.cqtip[data-y="44"]{top:44%}
.cqtip[data-x="46"]{left:46%}.cqtip[data-y="46"]{top:46%}
.cqtip[data-x="48"]{left:48%}.cqtip[data-y="48"]{top:48%}
.cqtip[data-x="50"]{left:50%}.cqtip[data-y="50"]{top:50%}
.cqtip[data-x="52"]{left:52%}.cqtip[data-y="52"]{top:52%}
.cqtip[data-x="54"]{left:54%}.cqtip[data-y="54"]{top:54%}
.cqtip[data-x="56"]{left:56%}.cqtip[data-y="56"]{top:56%}
.cqtip[data-x="58"]{left:58%}.cqtip[data-y="58"]{top:58%}
.cqtip[data-x="60"]{left:60%}.cqtip[data-y="60"]{top:60%}
.cqtip[data-x="62"]{left:62%}.cqtip[data-y="62"]{top:62%}
.cqtip[data-x="64"]{left:64%}.cqtip[data-y="64"]{top:64%}
.cqtip[data-x="66"]{left:66%}.cqtip[data-y="66"]{top:66%}
.cqtip[data-x="68"]{left:68%}.cqtip[data-y="68"]{top:68%}
.cqtip[data-x="70"]{left:70%}.cqtip[data-y="70"]{top:70%}
.cqtip[data-x="72"]{left:72%}.cqtip[data-y="72"]{top:72%}
.cqtip[data-x="74"]{left:74%}.cqtip[data-y="74"]{top:74%}
.cqtip[data-x="76"]{left:76%}.cqtip[data-y="76"]{top:76%}
.cqtip[data-x="78"]{left:78%}.cqtip[data-y="78"]{top:78%}
.cqtip[data-x="80"]{left:80%}.cqtip[data-y="80"]{top:80%}
.cqtip[data-x="82"]{left:82%}.cqtip[data-y="82"]{top:82%}
.cqtip[data-x="84"]{left:84%}.cqtip[data-y="84"]{top:84%}
.cqtip[data-x="86"]{left:86%}.cqtip[data-y="86"]{top:86%}
.cqtip[data-x="88"]{left:88%}.cqtip[data-y="88"]{top:88%}
.cqtip[data-x="90"]{left:90%}.cqtip[data-y="90"]{top:90%}
.cqtip[data-x="92"]{left:92%}.cqtip[data-y="92"]{top:92%}
.cqtip[data-x="94"]{left:94%}.cqtip[data-y="94"]{top:94%}
.cqtip[data-x="96"]{left:96%}.cqtip[data-y="96"]{top:96%}
.cqtip[data-x="98"]{left:98%}.cqtip[data-y="98"]{top:98%}
.cqtip[data-x="100"]{left:100%}.cqtip[data-y="100"]{top:100%}
.cqf[data-w="0"]{width:0%}.cqk[data-w="0"]{left:0%}.cqrm[data-w="0"]{left:0%}
.cqf[data-w="5"]{width:5%}.cqk[data-w="5"]{left:5%}.cqrm[data-w="5"]{left:5%}
.cqf[data-w="10"]{width:10%}.cqk[data-w="10"]{left:10%}.cqrm[data-w="10"]{left:10%}
.cqf[data-w="15"]{width:15%}.cqk[data-w="15"]{left:15%}.cqrm[data-w="15"]{left:15%}
.cqf[data-w="20"]{width:20%}.cqk[data-w="20"]{left:20%}.cqrm[data-w="20"]{left:20%}
.cqf[data-w="25"]{width:25%}.cqk[data-w="25"]{left:25%}.cqrm[data-w="25"]{left:25%}
.cqf[data-w="30"]{width:30%}.cqk[data-w="30"]{left:30%}.cqrm[data-w="30"]{left:30%}
.cqf[data-w="35"]{width:35%}.cqk[data-w="35"]{left:35%}.cqrm[data-w="35"]{left:35%}
.cqf[data-w="40"]{width:40%}.cqk[data-w="40"]{left:40%}.cqrm[data-w="40"]{left:40%}
.cqf[data-w="45"]{width:45%}.cqk[data-w="45"]{left:45%}.cqrm[data-w="45"]{left:45%}
.cqf[data-w="50"]{width:50%}.cqk[data-w="50"]{left:50%}.cqrm[data-w="50"]{left:50%}
.cqf[data-w="55"]{width:55%}.cqk[data-w="55"]{left:55%}.cqrm[data-w="55"]{left:55%}
.cqf[data-w="60"]{width:60%}.cqk[data-w="60"]{left:60%}.cqrm[data-w="60"]{left:60%}
.cqf[data-w="65"]{width:65%}.cqk[data-w="65"]{left:65%}.cqrm[data-w="65"]{left:65%}
.cqf[data-w="70"]{width:70%}.cqk[data-w="70"]{left:70%}.cqrm[data-w="70"]{left:70%}
.cqf[data-w="75"]{width:75%}.cqk[data-w="75"]{left:75%}.cqrm[data-w="75"]{left:75%}
.cqf[data-w="80"]{width:80%}.cqk[data-w="80"]{left:80%}.cqrm[data-w="80"]{left:80%}
.cqf[data-w="85"]{width:85%}.cqk[data-w="85"]{left:85%}.cqrm[data-w="85"]{left:85%}
.cqf[data-w="90"]{width:90%}.cqk[data-w="90"]{left:90%}.cqrm[data-w="90"]{left:90%}
.cqf[data-w="95"]{width:95%}.cqk[data-w="95"]{left:95%}.cqrm[data-w="95"]{left:95%}
.cqf[data-w="100"]{width:100%}.cqk[data-w="100"]{left:100%}.cqrm[data-w="100"]{left:100%}

/* ---- Payroll import (web/payroll.js): the pay group's header, tiles, the table ADP will receive and the checks. Every class starts with pr-. ---- */
.pr-tabs { margin: 10px 0; }
.pr-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; } .pr-card .bar { align-items: center; flex-wrap: wrap; gap: 8px; }
.pr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0 0; } .pr-tile { display: flex; flex-direction: column; gap: 2px; } .pr-tile b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pr-tbl { min-width: 620px; font-variant-numeric: tabular-nums; } .pr-tbl th, .pr-tbl td { text-align: left; } .pr-tbl td:nth-child(n+3) { text-align: right; } .pr-dup td, .pr-dup th { color: var(--mute); } .pr-blank th { font-weight: 400; }
.pr-in { width: 88px; min-height: 32px; text-align: right; font-size: 16px; padding: 2px 6px; }
.pr-checks li { display: flex; gap: 8px; align-items: baseline; } .pr-checks .chip { flex: none; }
.pr-foot .bar { gap: 8px; flex-wrap: wrap; align-items: center; }
.pr-vm { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--mute); } .pr-vmin { width: 76px; min-height: 34px; font-size: 16px; text-align: right; padding: 2px 6px; }
.pr-ext td:nth-child(3), .pr-ext td:nth-child(4) { text-align: left; } .pr-ppl td { text-align: right; } .pr-over { color: var(--bad); } .pr-under { color: var(--mute); }
.pr-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border: 2px dashed var(--edge); border-radius: 10px; background: var(--soft); text-align: center; cursor: pointer; }
.pr-src input, .pr-src select { min-height: 34px; font-size: 16px; max-width: 100%; } .pr-match select { min-height: 34px; font-size: 16px; max-width: 220px; }
/* BEO tips (web/etips.js): the Payroll Tips cards (one block per final event, the rule in words, where tips come from) and Setup's "Event tips (BEO)" card. Every class starts with et-. */
.et-card h3 { margin: 0 0 6px; } .et-ev { padding-top: 8px; } .et-ev + .et-ev { border-top: 1px solid var(--line); margin-top: 10px; } .et-ev h4 { margin: 0; } .et-tbl { min-width: 820px; } .et-no th, .et-no td { color: var(--mute); }
.et-split { margin: 6px 0 4px; } .et-note { margin: 2px 0; } .et-rule { margin: 6px 0; }
.et-src { min-width: 320px; } .et-src th, .et-src td { text-align: left; }
.et-set { border: 1px solid var(--line); border-radius: var(--rad-m); margin: 8px 0; padding: 8px 10px; min-width: 0; } .et-set legend { padding: 0 4px; font-weight: 600; }
.et-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; } .et-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; } .et-opt input { margin: 0; flex: none; }
.et-grp { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .et-grp span { overflow-wrap: anywhere; } .et-grp select { max-width: 100%; min-height: 36px; }
.et-nums { display: flex; flex-wrap: wrap; gap: 8px 16px; } .et-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 220px; } .et-num input { width: 8em; max-width: 100%; min-height: 36px; }
.et-example { margin: 6px 0; } .et-ex { min-width: 420px; } .et-ex th, .et-ex td { text-align: left; }
/* the weekly audit screens (web/audit.js): the ten checks as rows that open, the register box, the header facts, and the report as a document (mockup 42: the same two sections and wording as the Revelry report) */
.chip.b { background: var(--accent-soft); color: var(--accent); }
.au-check { border-top: 1px solid var(--line); } .au-check:first-of-type { border-top: 0; }
.au-sum { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 2px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .au-sum span:first-child { min-width: 0; overflow-wrap: anywhere; }
.au-body { padding: 0 2px 8px; } .au-body .note-line { margin: 4px 0; font-size: 13px; overflow-wrap: anywhere; }
.pr-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; } .pr-meta input { min-height: 36px; font-size: 16px; }
.doc { background: var(--paper); color: var(--paper-ink); border: 1px solid var(--line); border-radius: var(--rad-m); padding: 14px 16px; font-size: 13px; overflow-wrap: anywhere; } .doc h1 { font-size: 18px; margin: 0 0 4px; } .doc h2 { font-size: 14px; margin: 12px 0 6px; } .doc h3 { font-size: 13px; margin: 10px 0 4px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 12px; } .doc th { background: var(--soft); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); } .doc td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } .doc tr:nth-child(even) td { background: var(--soft); }
.doc ul { margin: 4px 0; padding-left: 18px; } .doc hr { border: 0; border-top: 1px solid var(--edge); margin: 8px 0; } .doc .hd { margin: 0; color: var(--mute); } .doc .disc { color: var(--mute); font-size: 11px; margin-top: 10px; }
/* the kitchen card of a catering event (web/kitchen.js, mockup 45): opens under the event; tagged people as pills, the rule at the store, then every kitchen person with a reason for each who cannot be tagged */
.kt { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-width: 0; } .kt h4 { margin: 0; overflow-wrap: anywhere; } .kt h4:focus { outline-offset: 4px; } .kt .kt-bar { margin-bottom: 4px; justify-content: space-between; }
.kt-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); } .kt-row > div { min-width: 0; overflow-wrap: anywhere; }
.st-note { font-size: 12px; color: var(--mute); } .kt-st { white-space: nowrap; } .kt-st i { color: var(--edge); font-style: normal; } .kt-sub { margin: 8px 0 4px; }
.kt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .kt-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 16px; padding: 2px 4px 2px 12px; background: var(--accent-soft); color: var(--ink); font-size: 13px; min-height: 36px; }
.kt-x { border: 0; background: transparent; min-height: 36px; min-width: 36px; padding: 0; font-size: 20px; line-height: 1; border-radius: 50%; color: var(--accent); } .kt-x:hover { background: var(--hover); }
.kt-rule { background: var(--soft); border-radius: var(--rad-m); padding: 8px 10px; font-size: 13px; margin: 8px 0; overflow-wrap: anywhere; }
.kt-list { list-style: none; margin: 0; padding: 0; } .kt-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .kt-pick:first-child { border-top: 0; }
.kt-pick.dim .kt-n { opacity: .65; } .kt-n { min-width: 0; overflow-wrap: anywhere; } .kt-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; } .kt-go { min-height: 36px; padding: 2px 12px; }
@media (max-width: 560px) { .kt-pick { grid-template-columns: minmax(0, 1fr); } .kt-pick .kt-act { justify-content: flex-start; } .kt-row { grid-template-columns: 1fr; } }
/* the day view (web/day.js, mockup 44): lanes on a timeline. No inline style is allowed, so a bar is placed by two stepped attributes: data-l (quarter hours from the left edge of the axis) and data-n (quarter hours long) under the axis' data-span (16 or 24 hours). These rules are generated: 0..64 and 1..64 quarter hours for 16 hours, 0..96 and 1..96 for 24. */
[data-span="16"] > [data-l="0"]{left:0%} [data-span="16"] > [data-l="1"]{left:1.5625%} [data-span="16"] > [data-l="2"]{left:3.125%} [data-span="16"] > [data-l="3"]{left:4.6875%} [data-span="16"] > [data-l="4"]{left:6.25%} [data-span="16"] > [data-l="5"]{left:7.8125%} [data-span="16"] > [data-l="6"]{left:9.375%} [data-span="16"] > [data-l="7"]{left:10.9375%} [data-span="16"] > [data-l="8"]{left:12.5%} [data-span="16"] > [data-l="9"]{left:14.0625%} [data-span="16"] > [data-l="10"]{left:15.625%} [data-span="16"] > [data-l="11"]{left:17.1875%} [data-span="16"] > [data-l="12"]{left:18.75%} [data-span="16"] > [data-l="13"]{left:20.3125%} [data-span="16"] > [data-l="14"]{left:21.875%} [data-span="16"] > [data-l="15"]{left:23.4375%} [data-span="16"] > [data-l="16"]{left:25%} [data-span="16"] > [data-l="17"]{left:26.5625%} [data-span="16"] > [data-l="18"]{left:28.125%} [data-span="16"] > [data-l="19"]{left:29.6875%} [data-span="16"] > [data-l="20"]{left:31.25%} [data-span="16"] > [data-l="21"]{left:32.8125%} [data-span="16"] > [data-l="22"]{left:34.375%} [data-span="16"] > [data-l="23"]{left:35.9375%} [data-span="16"] > [data-l="24"]{left:37.5%} [data-span="16"] > [data-l="25"]{left:39.0625%} [data-span="16"] > [data-l="26"]{left:40.625%} [data-span="16"] > [data-l="27"]{left:42.1875%} [data-span="16"] > [data-l="28"]{left:43.75%} [data-span="16"] > [data-l="29"]{left:45.3125%} [data-span="16"] > [data-l="30"]{left:46.875%} [data-span="16"] > [data-l="31"]{left:48.4375%} [data-span="16"] > [data-l="32"]{left:50%} [data-span="16"] > [data-l="33"]{left:51.5625%} [data-span="16"] > [data-l="34"]{left:53.125%} [data-span="16"] > [data-l="35"]{left:54.6875%} [data-span="16"] > [data-l="36"]{left:56.25%} [data-span="16"] > [data-l="37"]{left:57.8125%} [data-span="16"] > [data-l="38"]{left:59.375%} [data-span="16"] > [data-l="39"]{left:60.9375%} [data-span="16"] > [data-l="40"]{left:62.5%} [data-span="16"] > [data-l="41"]{left:64.0625%} [data-span="16"] > [data-l="42"]{left:65.625%} [data-span="16"] > [data-l="43"]{left:67.1875%} [data-span="16"] > [data-l="44"]{left:68.75%} [data-span="16"] > [data-l="45"]{left:70.3125%} [data-span="16"] > [data-l="46"]{left:71.875%} [data-span="16"] > [data-l="47"]{left:73.4375%} [data-span="16"] > [data-l="48"]{left:75%} [data-span="16"] > [data-l="49"]{left:76.5625%} [data-span="16"] > [data-l="50"]{left:78.125%} [data-span="16"] > [data-l="51"]{left:79.6875%} [data-span="16"] > [data-l="52"]{left:81.25%} [data-span="16"] > [data-l="53"]{left:82.8125%} [data-span="16"] > [data-l="54"]{left:84.375%} [data-span="16"] > [data-l="55"]{left:85.9375%} [data-span="16"] > [data-l="56"]{left:87.5%} [data-span="16"] > [data-l="57"]{left:89.0625%} [data-span="16"] > [data-l="58"]{left:90.625%} [data-span="16"] > [data-l="59"]{left:92.1875%} [data-span="16"] > [data-l="60"]{left:93.75%} [data-span="16"] > [data-l="61"]{left:95.3125%} [data-span="16"] > [data-l="62"]{left:96.875%} [data-span="16"] > [data-l="63"]{left:98.4375%} [data-span="16"] > [data-l="64"]{left:100%}
[data-span="16"] > [data-n="1"]{width:1.5625%} [data-span="16"] > [data-n="2"]{width:3.125%} [data-span="16"] > [data-n="3"]{width:4.6875%} [data-span="16"] > [data-n="4"]{width:6.25%} [data-span="16"] > [data-n="5"]{width:7.8125%} [data-span="16"] > [data-n="6"]{width:9.375%} [data-span="16"] > [data-n="7"]{width:10.9375%} [data-span="16"] > [data-n="8"]{width:12.5%} [data-span="16"] > [data-n="9"]{width:14.0625%} [data-span="16"] > [data-n="10"]{width:15.625%} [data-span="16"] > [data-n="11"]{width:17.1875%} [data-span="16"] > [data-n="12"]{width:18.75%} [data-span="16"] > [data-n="13"]{width:20.3125%} [data-span="16"] > [data-n="14"]{width:21.875%} [data-span="16"] > [data-n="15"]{width:23.4375%} [data-span="16"] > [data-n="16"]{width:25%} [data-span="16"] > [data-n="17"]{width:26.5625%} [data-span="16"] > [data-n="18"]{width:28.125%} [data-span="16"] > [data-n="19"]{width:29.6875%} [data-span="16"] > [data-n="20"]{width:31.25%} [data-span="16"] > [data-n="21"]{width:32.8125%} [data-span="16"] > [data-n="22"]{width:34.375%} [data-span="16"] > [data-n="23"]{width:35.9375%} [data-span="16"] > [data-n="24"]{width:37.5%} [data-span="16"] > [data-n="25"]{width:39.0625%} [data-span="16"] > [data-n="26"]{width:40.625%} [data-span="16"] > [data-n="27"]{width:42.1875%} [data-span="16"] > [data-n="28"]{width:43.75%} [data-span="16"] > [data-n="29"]{width:45.3125%} [data-span="16"] > [data-n="30"]{width:46.875%} [data-span="16"] > [data-n="31"]{width:48.4375%} [data-span="16"] > [data-n="32"]{width:50%} [data-span="16"] > [data-n="33"]{width:51.5625%} [data-span="16"] > [data-n="34"]{width:53.125%} [data-span="16"] > [data-n="35"]{width:54.6875%} [data-span="16"] > [data-n="36"]{width:56.25%} [data-span="16"] > [data-n="37"]{width:57.8125%} [data-span="16"] > [data-n="38"]{width:59.375%} [data-span="16"] > [data-n="39"]{width:60.9375%} [data-span="16"] > [data-n="40"]{width:62.5%} [data-span="16"] > [data-n="41"]{width:64.0625%} [data-span="16"] > [data-n="42"]{width:65.625%} [data-span="16"] > [data-n="43"]{width:67.1875%} [data-span="16"] > [data-n="44"]{width:68.75%} [data-span="16"] > [data-n="45"]{width:70.3125%} [data-span="16"] > [data-n="46"]{width:71.875%} [data-span="16"] > [data-n="47"]{width:73.4375%} [data-span="16"] > [data-n="48"]{width:75%} [data-span="16"] > [data-n="49"]{width:76.5625%} [data-span="16"] > [data-n="50"]{width:78.125%} [data-span="16"] > [data-n="51"]{width:79.6875%} [data-span="16"] > [data-n="52"]{width:81.25%} [data-span="16"] > [data-n="53"]{width:82.8125%} [data-span="16"] > [data-n="54"]{width:84.375%} [data-span="16"] > [data-n="55"]{width:85.9375%} [data-span="16"] > [data-n="56"]{width:87.5%} [data-span="16"] > [data-n="57"]{width:89.0625%} [data-span="16"] > [data-n="58"]{width:90.625%} [data-span="16"] > [data-n="59"]{width:92.1875%} [data-span="16"] > [data-n="60"]{width:93.75%} [data-span="16"] > [data-n="61"]{width:95.3125%} [data-span="16"] > [data-n="62"]{width:96.875%} [data-span="16"] > [data-n="63"]{width:98.4375%} [data-span="16"] > [data-n="64"]{width:100%}
[data-span="24"] > [data-l="0"]{left:0%} [data-span="24"] > [data-l="1"]{left:1.0417%} [data-span="24"] > [data-l="2"]{left:2.0833%} [data-span="24"] > [data-l="3"]{left:3.125%} [data-span="24"] > [data-l="4"]{left:4.1667%} [data-span="24"] > [data-l="5"]{left:5.2083%} [data-span="24"] > [data-l="6"]{left:6.25%} [data-span="24"] > [data-l="7"]{left:7.2917%} [data-span="24"] > [data-l="8"]{left:8.3333%} [data-span="24"] > [data-l="9"]{left:9.375%} [data-span="24"] > [data-l="10"]{left:10.4167%} [data-span="24"] > [data-l="11"]{left:11.4583%} [data-span="24"] > [data-l="12"]{left:12.5%} [data-span="24"] > [data-l="13"]{left:13.5417%} [data-span="24"] > [data-l="14"]{left:14.5833%} [data-span="24"] > [data-l="15"]{left:15.625%} [data-span="24"] > [data-l="16"]{left:16.6667%} [data-span="24"] > [data-l="17"]{left:17.7083%} [data-span="24"] > [data-l="18"]{left:18.75%} [data-span="24"] > [data-l="19"]{left:19.7917%} [data-span="24"] > [data-l="20"]{left:20.8333%} [data-span="24"] > [data-l="21"]{left:21.875%} [data-span="24"] > [data-l="22"]{left:22.9167%} [data-span="24"] > [data-l="23"]{left:23.9583%} [data-span="24"] > [data-l="24"]{left:25%} [data-span="24"] > [data-l="25"]{left:26.0417%} [data-span="24"] > [data-l="26"]{left:27.0833%} [data-span="24"] > [data-l="27"]{left:28.125%} [data-span="24"] > [data-l="28"]{left:29.1667%} [data-span="24"] > [data-l="29"]{left:30.2083%} [data-span="24"] > [data-l="30"]{left:31.25%} [data-span="24"] > [data-l="31"]{left:32.2917%} [data-span="24"] > [data-l="32"]{left:33.3333%} [data-span="24"] > [data-l="33"]{left:34.375%} [data-span="24"] > [data-l="34"]{left:35.4167%} [data-span="24"] > [data-l="35"]{left:36.4583%} [data-span="24"] > [data-l="36"]{left:37.5%} [data-span="24"] > [data-l="37"]{left:38.5417%} [data-span="24"] > [data-l="38"]{left:39.5833%} [data-span="24"] > [data-l="39"]{left:40.625%} [data-span="24"] > [data-l="40"]{left:41.6667%} [data-span="24"] > [data-l="41"]{left:42.7083%} [data-span="24"] > [data-l="42"]{left:43.75%} [data-span="24"] > [data-l="43"]{left:44.7917%} [data-span="24"] > [data-l="44"]{left:45.8333%} [data-span="24"] > [data-l="45"]{left:46.875%} [data-span="24"] > [data-l="46"]{left:47.9167%} [data-span="24"] > [data-l="47"]{left:48.9583%} [data-span="24"] > [data-l="48"]{left:50%} [data-span="24"] > [data-l="49"]{left:51.0417%} [data-span="24"] > [data-l="50"]{left:52.0833%} [data-span="24"] > [data-l="51"]{left:53.125%} [data-span="24"] > [data-l="52"]{left:54.1667%} [data-span="24"] > [data-l="53"]{left:55.2083%} [data-span="24"] > [data-l="54"]{left:56.25%} [data-span="24"] > [data-l="55"]{left:57.2917%} [data-span="24"] > [data-l="56"]{left:58.3333%} [data-span="24"] > [data-l="57"]{left:59.375%} [data-span="24"] > [data-l="58"]{left:60.4167%} [data-span="24"] > [data-l="59"]{left:61.4583%} [data-span="24"] > [data-l="60"]{left:62.5%} [data-span="24"] > [data-l="61"]{left:63.5417%} [data-span="24"] > [data-l="62"]{left:64.5833%} [data-span="24"] > [data-l="63"]{left:65.625%} [data-span="24"] > [data-l="64"]{left:66.6667%} [data-span="24"] > [data-l="65"]{left:67.7083%} [data-span="24"] > [data-l="66"]{left:68.75%} [data-span="24"] > [data-l="67"]{left:69.7917%} [data-span="24"] > [data-l="68"]{left:70.8333%} [data-span="24"] > [data-l="69"]{left:71.875%} [data-span="24"] > [data-l="70"]{left:72.9167%} [data-span="24"] > [data-l="71"]{left:73.9583%} [data-span="24"] > [data-l="72"]{left:75%} [data-span="24"] > [data-l="73"]{left:76.0417%} [data-span="24"] > [data-l="74"]{left:77.0833%} [data-span="24"] > [data-l="75"]{left:78.125%} [data-span="24"] > [data-l="76"]{left:79.1667%} [data-span="24"] > [data-l="77"]{left:80.2083%} [data-span="24"] > [data-l="78"]{left:81.25%} [data-span="24"] > [data-l="79"]{left:82.2917%} [data-span="24"] > [data-l="80"]{left:83.3333%} [data-span="24"] > [data-l="81"]{left:84.375%} [data-span="24"] > [data-l="82"]{left:85.4167%} [data-span="24"] > [data-l="83"]{left:86.4583%} [data-span="24"] > [data-l="84"]{left:87.5%} [data-span="24"] > [data-l="85"]{left:88.5417%} [data-span="24"] > [data-l="86"]{left:89.5833%} [data-span="24"] > [data-l="87"]{left:90.625%} [data-span="24"] > [data-l="88"]{left:91.6667%} [data-span="24"] > [data-l="89"]{left:92.7083%} [data-span="24"] > [data-l="90"]{left:93.75%} [data-span="24"] > [data-l="91"]{left:94.7917%} [data-span="24"] > [data-l="92"]{left:95.8333%} [data-span="24"] > [data-l="93"]{left:96.875%} [data-span="24"] > [data-l="94"]{left:97.9167%} [data-span="24"] > [data-l="95"]{left:98.9583%} [data-span="24"] > [data-l="96"]{left:100%}
[data-span="24"] > [data-n="1"]{width:1.0417%} [data-span="24"] > [data-n="2"]{width:2.0833%} [data-span="24"] > [data-n="3"]{width:3.125%} [data-span="24"] > [data-n="4"]{width:4.1667%} [data-span="24"] > [data-n="5"]{width:5.2083%} [data-span="24"] > [data-n="6"]{width:6.25%} [data-span="24"] > [data-n="7"]{width:7.2917%} [data-span="24"] > [data-n="8"]{width:8.3333%} [data-span="24"] > [data-n="9"]{width:9.375%} [data-span="24"] > [data-n="10"]{width:10.4167%} [data-span="24"] > [data-n="11"]{width:11.4583%} [data-span="24"] > [data-n="12"]{width:12.5%} [data-span="24"] > [data-n="13"]{width:13.5417%} [data-span="24"] > [data-n="14"]{width:14.5833%} [data-span="24"] > [data-n="15"]{width:15.625%} [data-span="24"] > [data-n="16"]{width:16.6667%} [data-span="24"] > [data-n="17"]{width:17.7083%} [data-span="24"] > [data-n="18"]{width:18.75%} [data-span="24"] > [data-n="19"]{width:19.7917%} [data-span="24"] > [data-n="20"]{width:20.8333%} [data-span="24"] > [data-n="21"]{width:21.875%} [data-span="24"] > [data-n="22"]{width:22.9167%} [data-span="24"] > [data-n="23"]{width:23.9583%} [data-span="24"] > [data-n="24"]{width:25%} [data-span="24"] > [data-n="25"]{width:26.0417%} [data-span="24"] > [data-n="26"]{width:27.0833%} [data-span="24"] > [data-n="27"]{width:28.125%} [data-span="24"] > [data-n="28"]{width:29.1667%} [data-span="24"] > [data-n="29"]{width:30.2083%} [data-span="24"] > [data-n="30"]{width:31.25%} [data-span="24"] > [data-n="31"]{width:32.2917%} [data-span="24"] > [data-n="32"]{width:33.3333%} [data-span="24"] > [data-n="33"]{width:34.375%} [data-span="24"] > [data-n="34"]{width:35.4167%} [data-span="24"] > [data-n="35"]{width:36.4583%} [data-span="24"] > [data-n="36"]{width:37.5%} [data-span="24"] > [data-n="37"]{width:38.5417%} [data-span="24"] > [data-n="38"]{width:39.5833%} [data-span="24"] > [data-n="39"]{width:40.625%} [data-span="24"] > [data-n="40"]{width:41.6667%} [data-span="24"] > [data-n="41"]{width:42.7083%} [data-span="24"] > [data-n="42"]{width:43.75%} [data-span="24"] > [data-n="43"]{width:44.7917%} [data-span="24"] > [data-n="44"]{width:45.8333%} [data-span="24"] > [data-n="45"]{width:46.875%} [data-span="24"] > [data-n="46"]{width:47.9167%} [data-span="24"] > [data-n="47"]{width:48.9583%} [data-span="24"] > [data-n="48"]{width:50%} [data-span="24"] > [data-n="49"]{width:51.0417%} [data-span="24"] > [data-n="50"]{width:52.0833%} [data-span="24"] > [data-n="51"]{width:53.125%} [data-span="24"] > [data-n="52"]{width:54.1667%} [data-span="24"] > [data-n="53"]{width:55.2083%} [data-span="24"] > [data-n="54"]{width:56.25%} [data-span="24"] > [data-n="55"]{width:57.2917%} [data-span="24"] > [data-n="56"]{width:58.3333%} [data-span="24"] > [data-n="57"]{width:59.375%} [data-span="24"] > [data-n="58"]{width:60.4167%} [data-span="24"] > [data-n="59"]{width:61.4583%} [data-span="24"] > [data-n="60"]{width:62.5%} [data-span="24"] > [data-n="61"]{width:63.5417%} [data-span="24"] > [data-n="62"]{width:64.5833%} [data-span="24"] > [data-n="63"]{width:65.625%} [data-span="24"] > [data-n="64"]{width:66.6667%} [data-span="24"] > [data-n="65"]{width:67.7083%} [data-span="24"] > [data-n="66"]{width:68.75%} [data-span="24"] > [data-n="67"]{width:69.7917%} [data-span="24"] > [data-n="68"]{width:70.8333%} [data-span="24"] > [data-n="69"]{width:71.875%} [data-span="24"] > [data-n="70"]{width:72.9167%} [data-span="24"] > [data-n="71"]{width:73.9583%} [data-span="24"] > [data-n="72"]{width:75%} [data-span="24"] > [data-n="73"]{width:76.0417%} [data-span="24"] > [data-n="74"]{width:77.0833%} [data-span="24"] > [data-n="75"]{width:78.125%} [data-span="24"] > [data-n="76"]{width:79.1667%} [data-span="24"] > [data-n="77"]{width:80.2083%} [data-span="24"] > [data-n="78"]{width:81.25%} [data-span="24"] > [data-n="79"]{width:82.2917%} [data-span="24"] > [data-n="80"]{width:83.3333%} [data-span="24"] > [data-n="81"]{width:84.375%} [data-span="24"] > [data-n="82"]{width:85.4167%} [data-span="24"] > [data-n="83"]{width:86.4583%} [data-span="24"] > [data-n="84"]{width:87.5%} [data-span="24"] > [data-n="85"]{width:88.5417%} [data-span="24"] > [data-n="86"]{width:89.5833%} [data-span="24"] > [data-n="87"]{width:90.625%} [data-span="24"] > [data-n="88"]{width:91.6667%} [data-span="24"] > [data-n="89"]{width:92.7083%} [data-span="24"] > [data-n="90"]{width:93.75%} [data-span="24"] > [data-n="91"]{width:94.7917%} [data-span="24"] > [data-n="92"]{width:95.8333%} [data-span="24"] > [data-n="93"]{width:96.875%} [data-span="24"] > [data-n="94"]{width:97.9167%} [data-span="24"] > [data-n="95"]{width:98.9583%} [data-span="24"] > [data-n="96"]{width:100%}
.dv-card h3 { margin-bottom: 4px; } .dv-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .dv-days button { min-height: 40px; padding: 4px 12px; } .dv-days button.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.dv-axis, .dv-row { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 96px; gap: 8px; align-items: center; }
.dv-axis { font-size: 11px; color: var(--mute); margin-bottom: 4px; } .gax { position: relative; height: 16px; } .gax > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.dv-row { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; } .dv-lab { min-width: 0; overflow-wrap: anywhere; } .dv-time { font-size: 12px; } .dv-time .mute { display: block; }
.gl { position: relative; height: 22px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.gb { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; font-size: 11px; line-height: 18px; color: var(--k-ink); padding-left: 5px; overflow: hidden; white-space: nowrap; background: var(--k-kitchen); }
.gb.m { background: var(--k-merged); } .gb.d { background: var(--k-driver); } .gb.f { background: var(--k-foh); }
.dv-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin-top: 8px; } .dv-leg i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--k-kitchen); } .dv-leg i.m { background: var(--k-merged); } .dv-leg i.d { background: var(--k-driver); } .dv-leg i.f { background: var(--k-foh); }
.dv-card table { width: 100%; border-collapse: collapse; font-size: 13px; } .dv-card th { text-align: left; font-weight: 600; color: var(--mute); padding: 4px 6px; border-bottom: 1px solid var(--line); } .dv-card td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 560px) { .dv-axis { grid-template-columns: minmax(0, 1fr); } .dv-axis > :first-child, .dv-axis > :last-child { display: none; } .dv-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* the catering guide editor (web/cguide.js, mockup 43 tab 1): the type buttons, the crew grid and timing table (number boxes are 16px so a phone does not zoom), and "Try an event": four tiles and the lanes (the same stepped placement as the day view; .gm is the service start marker) */
.cg-card h3 { margin-bottom: 6px; } .cg-types { margin: 8px 0 0; } .cg-types button { flex: 0 1 auto; } .cg-types .mini { margin-left: 4px; }
.cg-grid th, .cg-grid td { text-align: center; padding: 3px 4px; } .cg-grid th:first-child, .cg-grid td:first-child { text-align: left; } .cg-grid input[type=number] { min-height: 36px; padding: 3px 4px; font-size: 16px; text-align: center; } .cg-grid input.w-n4 { width: 78px; } .cg-grid input.w-n3 { width: 62px; }
.cg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; } .cg-tile { background: var(--soft); border-radius: var(--rad-m); padding: 8px 10px; } .cg-tile b { display: block; font-size: 18px; } .cg-tile span { font-size: 12px; color: var(--mute); }
.cg-lanes .dv-row { grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 118px; } .gl > i.gm { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--ink); }
@media (max-width: 560px) { .cg-lanes .dv-row { grid-template-columns: minmax(0, 1fr); } }
.cg-types button.on .dot { background: var(--accent-ink); } .cg-types button.on .mini { color: inherit; }
/* the Week check card above the board (web/weekcheck.js): the tiles, the sentences about the week, and what is still open and why. Every class starts with wk-. */
.wk-card summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; list-style: none; } .wk-card summary::-webkit-details-marker { display: none; } .wk-card summary::before { content: "\25B8"; color: var(--mute); font-size: 14px; } .wk-card details[open] > summary::before { content: "\25BE"; } .wk-card summary b { font-size: 15px; } .wk-card h4 { margin: 14px 0 6px; }
.wk-tiles { margin: 10px 0 0; } .wk-tiles .tile > span { display: block; } .wk-note { margin: 8px 0 0; }
.wk-list { margin: 0; padding: 0; list-style: none; } .wk-list li { padding: 5px 0; border-top: 1px solid var(--line); line-height: 1.4; } .wk-list li:first-child { border-top: 0; } .wk-list .chip { margin-right: 4px; }
/* what was texted to the managers about a request, as it went out (web/hub.js) */
.hsms { margin: 8px 0 0; padding: 8px 10px; background: var(--soft); border-radius: var(--rad-m); } .hsms pre { margin: 4px 0 0; white-space: pre-line; font: inherit; font-size: 12px; color: var(--mute); }/* the board's top bar and small marks (web/board.js): the conflict counter, the legend's icons, the open chips' icons, the overtime watch's store lines */
.bbar .cc { margin-left: auto; } .lg .ic { color: var(--mute); vertical-align: -2px; } .oc .ic { vertical-align: -2px; margin-left: 3px; }
table.plain.ot td div { white-space: nowrap; } table.plain.ot th small { display: block; font-weight: 400; }

/* the pinned header (web/board.js): the dates, the summary rows and the open shifts are in the table's head and stay on screen while the people scroll under them. Past a short scroll the table gets the class col and the rows that\n   are not pinned (tr.hx without keep) fold away. A row's place is its class: rK counts every row, pK only the pinned ones (used when folded); heights are fixed, so the offsets below are exact. */
table.g thead tr.hx > *, table.g thead tr.open > * { position: sticky; z-index: 5; } table.g thead tr.hx th.lab, table.g thead tr.open th.lab { z-index: 6; }
table.g thead tr.open th.lab { background: var(--warn-bg); color: var(--warn); font-weight: 650; } table.g thead tr.open > * { border-bottom: 1.5px solid var(--edge); }
table.g thead tr.dr > * { height: 26px; box-sizing: border-box; } table.g thead tr.hx > * { height: 34px; box-sizing: border-box; overflow: hidden; }
table.g.col thead tr.hx:not(.keep) { display: none; } .bgrid { overflow-anchor: none; } .ocs { max-height: 64px; overflow-y: auto; }
table.g thead tr.r1 > * { top: 26px; } table.g thead tr.r2 > * { top: 60px; } table.g thead tr.r3 > * { top: 94px; } table.g thead tr.r4 > * { top: 128px; } table.g thead tr.r5 > * { top: 162px; } table.g thead tr.r6 > * { top: 196px; } table.g thead tr.r7 > * { top: 230px; } table.g thead tr.r8 > * { top: 264px; } table.g thead tr.r9 > * { top: 298px; } table.g thead tr.r10 > * { top: 332px; } table.g thead tr.r11 > * { top: 366px; } table.g thead tr.r12 > * { top: 400px; } table.g thead tr.r13 > * { top: 434px; } table.g thead tr.r14 > * { top: 468px; } table.g thead tr.r15 > * { top: 502px; } table.g thead tr.r16 > * { top: 536px; } table.g thead tr.r17 > * { top: 570px; } table.g thead tr.r18 > * { top: 604px; } table.g thead tr.r19 > * { top: 638px; } table.g thead tr.r20 > * { top: 672px; } table.g thead tr.r21 > * { top: 706px; } table.g thead tr.r22 > * { top: 740px; } table.g thead tr.r23 > * { top: 774px; } table.g thead tr.r24 > * { top: 808px; }
table.g.col thead tr.p1 > * { top: 26px; } table.g.col thead tr.p2 > * { top: 60px; } table.g.col thead tr.p3 > * { top: 94px; } table.g.col thead tr.p4 > * { top: 128px; } table.g.col thead tr.p5 > * { top: 162px; } table.g.col thead tr.p6 > * { top: 196px; } table.g.col thead tr.p7 > * { top: 230px; } table.g.col thead tr.p8 > * { top: 264px; } table.g.col thead tr.p9 > * { top: 298px; } table.g.col thead tr.p10 > * { top: 332px; } table.g.col thead tr.p11 > * { top: 366px; } table.g.col thead tr.p12 > * { top: 400px; } table.g.col thead tr.p13 > * { top: 434px; } table.g.col thead tr.p14 > * { top: 468px; } table.g.col thead tr.p15 > * { top: 502px; } table.g.col thead tr.p16 > * { top: 536px; } table.g.col thead tr.p17 > * { top: 570px; } table.g.col thead tr.p18 > * { top: 604px; } table.g.col thead tr.p19 > * { top: 638px; } table.g.col thead tr.p20 > * { top: 672px; } table.g.col thead tr.p21 > * { top: 706px; } table.g.col thead tr.p22 > * { top: 740px; } table.g.col thead tr.p23 > * { top: 774px; } table.g.col thead tr.p24 > * { top: 808px; }

/* the day's popup (web/board.js): the seven-day switch with a badge for each day, a card for each meal with the people as chips and what is still to fill as dashed ones, and Post open shift */
.dsw { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; } .dsw button { min-height: 34px; padding: 0 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; } .dsw button[aria-pressed=true] { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); font-weight: 650; }
.dsb { min-width: 16px; height: 16px; border-radius: var(--rad-m); font-size: 11px; line-height: 16px; text-align: center; padding: 0 4px; } .dsb.bad { background: var(--bad-bg); color: var(--bad); font-weight: 650; } .dsb.ok { background: var(--good-bg); } .dsb .ic { width: 10px; height: 10px; color: var(--good); vertical-align: -1px; }
.mcard { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; } .mcard .bar { justify-content: space-between; margin: 0 0 4px; } .mcard h4 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.mrow { padding: 6px 0; border-top: 1px solid var(--line); } .mcard .bar + .mrow { border-top: 0; } .mtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 4px; } .mlab { font-size: 12px; color: var(--mute); } .mlab.bd { color: var(--bad); } .mchips { display: flex; flex-wrap: wrap; gap: 4px; }
.pchip { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: var(--rad-l); background: var(--pb); border: 1px solid var(--pr); color: var(--pt); } .pchip small { font-size: 11px; opacity: .85; }
.pchip.miss { background: transparent; border: 1px dashed var(--dot-hard); color: var(--bad); } .pchip.more { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.mpost { margin: 6px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ds-sch { margin: 10px 0 0; } .ds-sch summary { cursor: pointer; font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; min-height: 28px; }

/* the open shifts popup (web/board.js): a row for each open shift with who could take it, Assign and the trash, the texting panel under it (outreach.js), and a row to add one */
.orow { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; } .ohead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; } .ohead .link { margin-left: auto; }
.urgp { font-size: 11px; font-weight: 650; padding: 0 8px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); } .oact { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 0; } .oact select { flex: 1; min-width: 180px; }
.ib { all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--edge); border-radius: var(--rad-m); color: var(--mute); } .ib:hover { background: var(--hover); } .ib:focus-visible { outline: 2px solid var(--focus); } .ib .ic { width: 16px; height: 16px; color: inherit; }
.orow .hsec, .orow .hact, .orow .hskip { margin-top: 6px; } .oadd { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }

/* a field focused or scrolled to inside the board is not left under the pinned header: the scroll padding is the header's height (spK: K summary rows showing, plus the dates and a good allowance for the open shifts) */
.bgrid.sp0 { scroll-padding-top: 98px; } .bgrid.sp1 { scroll-padding-top: 132px; } .bgrid.sp2 { scroll-padding-top: 166px; } .bgrid.sp3 { scroll-padding-top: 200px; } .bgrid.sp4 { scroll-padding-top: 234px; } .bgrid.sp5 { scroll-padding-top: 268px; } .bgrid.sp6 { scroll-padding-top: 302px; } .bgrid.sp7 { scroll-padding-top: 336px; } .bgrid.sp8 { scroll-padding-top: 370px; } .bgrid.sp9 { scroll-padding-top: 404px; } .bgrid.sp10 { scroll-padding-top: 438px; } .bgrid.sp11 { scroll-padding-top: 472px; } .bgrid.sp12 { scroll-padding-top: 506px; } .bgrid.sp13 { scroll-padding-top: 540px; } .bgrid.sp14 { scroll-padding-top: 574px; } .bgrid.sp15 { scroll-padding-top: 608px; } .bgrid.sp16 { scroll-padding-top: 642px; } .bgrid.sp17 { scroll-padding-top: 676px; } .bgrid.sp18 { scroll-padding-top: 710px; } .bgrid.sp19 { scroll-padding-top: 744px; } .bgrid.sp20 { scroll-padding-top: 778px; } .bgrid.sp21 { scroll-padding-top: 812px; } .bgrid.sp22 { scroll-padding-top: 846px; } .bgrid.sp23 { scroll-padding-top: 880px; } .bgrid.sp24 { scroll-padding-top: 914px; }
table.g thead tr.dr th.lab { z-index: 6; }      /* the Team corner stays above the day cells when the board scrolls sideways */
@media (pointer: coarse) { table.g thead tr.hx .cqchip { min-height: 28px; } }      /* the pinned rows are 34 px: the chip is not allowed to grow them (a taller tap area would move every row below its offset) */
.who-sub { font-size: 12px; color: var(--mute); } .auth h1 .lock { width: 22px; height: 22px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.6; }      /* the team member's stores under their name; the lock in front of the sign-in heading */
.hdh { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); } .hc2.done { opacity: .95; } .hc2.done .hsms { margin-top: 8px; }      /* the hub's decided cards */

/* the sales rows: a typed number (a pencil), the week's labor total against its goal, and the Override row's box */
.gd { color: var(--good); font-weight: 650; }
table.g tr.hx td .ic { width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; color: var(--mute); }
table.g input.ovr { width: 100%; max-width: 84px; min-height: 26px; padding: 1px 4px; font-size: 16px; line-height: 1.2; text-align: center; border-radius: 6px; }      /* 16 px so a phone does not zoom when the sales box is tapped; the 26 px height is the pinned row's and stays */
table.g input.ovr::placeholder { color: var(--mute); }
/* profile cards below the first two (people2.js): availability, time off, carried shifts, access, Deactivate; the Team Status tab (terms.js); View Schedule (viewsch.js) */
.pf-stack { display: grid; gap: 10px; } .pf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 480px) { .pf-row2 { grid-template-columns: 1fr; } }
.pf-field { display: grid; gap: 2px; font-size: 12px; color: var(--mute); } .pf-field input, .pf-field select, .pf-field textarea, .pf-dayedit select, .pf-lrow select { font-size: 16px; min-height: 40px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); padding: 4px 8px; } .pf-field textarea { min-height: 72px; width: 100%; box-sizing: border-box; }
.pf-days7 { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 0; } .pf-day { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .pf-day b { font-weight: 600; } .pf-day.no span { color: var(--bad); }
.pf-dayedit { display: grid; grid-template-columns: 52px minmax(120px, 160px) 1fr; gap: 6px 8px; align-items: center; font-size: 13px; } .pf-times { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pf-dayedit b { font-weight: 600; }
@media (max-width: 480px) { .pf-dayedit { grid-template-columns: 52px 1fr; } .pf-times { grid-column: 2; } }
.pf-apply { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; } .pf-apply legend { font-size: 12px; color: var(--mute); padding: 0; margin-bottom: 4px; }
.pf-radio { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rad-m); line-height: 1.4; } .pf-radio input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
button.pf-danger { background: var(--bad); color: var(--panel); border-color: var(--bad); font-weight: 650; } button.pf-danger:hover { filter: brightness(1.08); border-color: var(--bad); }
.pf-deactform { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .pf-deactform h4 { margin: 0; font-size: 14px; } .pf-deactpending { margin-bottom: 0; }
.pf-list2 { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; } .pf-list2 li { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--soft); border-radius: var(--rad-m); font-size: 13px; overflow-wrap: anywhere; } .pf-list2 small { color: var(--mute); }
.tm-list { gap: 0; } .tm-row { display: grid; gap: 4px; } .tm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .tm-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .tm-reason { margin: 0; font-size: 12px; color: var(--mute); } .tm-still { margin: 0; font-size: 12px; color: var(--mute); } .tm-stores { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; } .tm-store { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .tm-store small { font-size: 11px; }
.vs-day { margin: 0 0 10px; } .vs-day h3 { font-size: 15px; margin: 12px 0 4px; } .vs-day.today h3 { color: var(--accent); } .vs-day.today h3::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.vs-list { gap: 0; } .vs-row { display: grid; grid-template-columns: 7.5em 1fr; gap: 2px 8px; align-items: baseline; } .vs-time { font-variant-numeric: tabular-nums; } .vs-who small { color: var(--mute); margin-left: 4px; } .vs-ev, .vs-note { grid-column: 2; color: var(--mute); font-size: 12px; } .vs-open .vs-time { color: var(--warn); }
@media (max-width: 420px) { .vs-row { grid-template-columns: 1fr; } .vs-ev, .vs-note { grid-column: 1; } }
/* the publish gate's card on the board and its Setup card (gate.js) */
.gt-card { border-color: var(--warn); } .gt-card h3 { margin-top: 0; } .gt-days { gap: 0; } .gt-days li { padding: 6px 0; } .gt-days li b { font-weight: 650; }
.gt-act { display: grid; gap: 8px; margin-top: 8px; } .gt-act input[type=text] { width: 100%; max-width: 560px; box-sizing: border-box; font-size: 16px; min-height: 40px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); }
.gt-setup .pf-field input[type=text] { width: 100%; box-sizing: border-box; }
.rv { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-width: 0; } .rv h4 { margin: 10px 0 4px; overflow-wrap: anywhere; } .rv .rv-bar { margin-bottom: 4px; justify-content: space-between; } .rv .rv-bar h4 { margin: 0; } .rv h4:focus { outline-offset: 4px; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; } .rv-tile { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); min-width: 0; } .rv-tile b { font-size: 20px; font-variant-numeric: tabular-nums; } .rv-tile span { font-size: 12px; color: var(--mute); }
.rv-act { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-top: 8px; } .rv-act .pf-field { flex: 1 1 260px; min-width: 0; } .rv-act input[type=text] { width: 100%; box-sizing: border-box; font-size: 16px; min-height: 40px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); }
.tsx-sub { margin: 14px 0 4px; font-size: 15px; } .tsx-row { align-items: end; margin-bottom: 6px; } .tsx-row .link { justify-self: start; } .tsx-card .pf-field input[type=text] { width: 100%; box-sizing: border-box; }
.tsx-steps { margin: 6px 0 10px; padding-left: 20px; } .tsx-steps li { margin: 8px 0; line-height: 1.45; } .tsx-cmds { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.tsx-code { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
/* Add an event from a PDF (epdf.js): the summary of what was read, with a box only where the Worker was not sure */
#pdf-sum { margin: 8px 0; } #pdf-sum th[scope="row"] { text-align: left; font-weight: 600; white-space: normal; } #pdf-sum td input, #pdf-sum select { font-size: 16px; min-height: 44px; max-width: 100%; width: min(100%, 320px); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); padding: 4px 8px; }
/* a team member's text size (Settings): the whole screen is scaled, so every size, gap and tap target grows together */
[data-textsize="large"] #ui-view { zoom: 1.15; } [data-textsize="xlarge"] #ui-view { zoom: 1.32; }
.scn { display: block; margin-top: 2px; font-style: italic; }
.gcl{display:flex;flex-direction:column;gap:2px;margin-right:8px}.gcl select{min-height:44px;max-width:100%}
.nph{vertical-align:-2px;opacity:.85}.pub{max-width:40rem;margin:0 auto;padding:24px 0 40px;line-height:1.6}.pub h1{font-size:1.5rem}.pub h2{font-size:1.1rem;margin-top:1.4rem}
.sq-row{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}.sq-row:first-child{border-top:0}
.sq-hook{display:flex;flex-direction:column;gap:6px;margin:4px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px}.sq-hook p{margin:0}.sq-hk-lines{margin:0}.sq-hk-lines li{padding:2px 0;border:0}.sq-url{overflow-wrap:anywhere;user-select:all}
.sq-rv{margin:12px 0;padding:8px 12px 12px;border:1px solid var(--line);border-radius:10px}.sq-rv h4{margin:8px 0 4px;font-size:1rem}.sq-count{font-size:12px;vertical-align:middle;margin-left:6px}
.sq-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 16px;margin:6px 0}.sq-pair>div{min-width:0;overflow-wrap:anywhere}.sq-cands{margin:2px 0 0}.sq-cands li{padding:3px 0;border-bottom:0}.sq-list>li{padding:12px 0}.sq-list .pf-actions .pf-field{min-width:12rem}.sq-ign{margin-top:8px}.sq-ign summary{cursor:pointer;min-height:40px;display:flex;align-items:center}
.ac-card h4{margin:14px 0 6px;font-size:1rem}.ac-row{padding:12px 0}.ac-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}.ac-name{font-size:1rem}.ac-mail{margin:2px 0 4px;overflow-wrap:anywhere}.ac-all{margin:4px 0 0}.ac-lab{margin:6px 0 0}
.ac-stores{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:1px}.ac-stores li{padding:1px 0;border-bottom:0}.ac-add{margin-top:16px;padding-top:4px;border-top:1px solid var(--line)}
.ac-search{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:6px}.ac-search .pf-field{flex:1 1 220px;min-width:0}.ac-search .pf-field input{width:100%;box-sizing:border-box}
.ac-hit{display:grid;gap:3px}.ac-boxes{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0}.ac-form{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;display:grid;gap:10px}.ac-form h4{margin:0}.ac-form h4:focus{outline:none}.ac-form .pf-field input{width:100%;box-sizing:border-box;max-width:28rem}
/* Time off (Kevin, 2026-10-06): who else is approved off in a request's days (hub.js), the Blocked dates card (blocked.js) and a team member's list of blocked days (staff.js) */
.hoff-wrap{overflow-x:auto;margin:2px 0 0}.hoff-tbl{border-collapse:collapse;width:100%;font-size:13px}.hoff-tbl th{text-align:left;font-weight:600;padding:5px 12px 5px 0;vertical-align:top}.hoff-tbl thead th{font-size:11px;font-weight:650;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.hoff-tbl td{padding:5px 12px 5px 0;vertical-align:top}.hoff-tbl tbody tr{border-top:1px solid var(--line)}.hoff-tbl tr.same{background:var(--accent-soft)}.hoff-tag{display:inline-block;font-size:11px;font-weight:650;padding:1px 7px;border-radius:10px;background:var(--panel);color:var(--accent);border:1px solid var(--accent);white-space:nowrap}
.bk-row{flex-wrap:wrap}.bk-main{display:grid;gap:1px;min-width:0}.bk-main small{color:var(--mute)}.bk-why{display:block;font-size:12px}.bk-btns{display:flex;gap:4px;flex:none}.bk-ask{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12px}.bk-past{opacity:.85}.bk-past-box{margin:6px 0}.bk-past-box summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-size:13px}.bk-form{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px}.bk-form h4{margin:0}.bk-form h4:focus{outline:none}.bk-form .pf-field input[type=text]{width:100%;box-sizing:border-box}
.sblk{border:1px solid var(--line);border-radius: var(--rad-l);padding:10px 12px;margin:8px 0;background:var(--panel)}.sblk h3{margin:0 0 4px;font-size:14px}.sblk-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13px}.sblk-list small{color:var(--mute)}.sblk-m{margin:10px 0 0;font-size:13px;font-weight:650}.sblk-none{margin:6px 0 0}
/* ---- the Forecast tab (web/forecast.js): the week grid, the suggested changes, the Change % panel, day notes, sources and the accuracy table. Every class starts with fct-. No inline style. ---- */
.fct-num { font-variant-numeric: tabular-nums; }
.fct-card .chip.b { background: var(--pc0-b); color: var(--pc0-t); }      /* the blue "override" chip, only inside this tab: the plain .chip.b (the copper chip of Setup's Square card) is not touched */
.fct-badge { margin-left: 4px; padding: 0 7px; }
.fct-scroll { max-height: 78vh; }
.fct-grid { min-width: 900px; font-size: 13px; }
.fct-grid th, .fct-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px; vertical-align: top; text-align: left; }
.fct-grid thead th { background: var(--soft); text-align: center; font-weight: 650; position: sticky; top: 0; z-index: 2; }
.fct-grid tbody th { background: var(--panel); position: sticky; left: 0; z-index: 1; min-width: 150px; font-weight: 600; }
.fct-grid thead th.fct-corner { left: 0; z-index: 3; text-align: left; }
.fct-grid td { min-width: 112px; }
.fct-grid .fct-today-col { background: var(--accent-soft); }
.fct-grid thead th.fct-today-col { box-shadow: inset 0 -3px 0 var(--brand); }
.fct-srow > * { background: var(--soft); } .fct-srow th { background: var(--soft); } .fct-srow td.fct-today-col { background: var(--accent-soft); }
.fct-nm { font-size: 14px; } .fct-store .fct-tog { display: block; min-height: 28px; padding: 0; margin-top: 2px; font-size: 12px; }
.fct-val { display: block; font-size: 15px; font-weight: 650; }
.fct-parts, .fct-range, .fct-model, .fct-sugg, .fct-ev, .fct-nt, .fct-nf { display: block; font-size: 11px; color: var(--mute); font-family: var(--font); font-weight: 450; line-height: 1.3; overflow-wrap: anywhere; }
.fct-ev { color: var(--ink); } .fct-nt { color: var(--accent); }
.fct-sugg { color: var(--warn); }
.fct-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; } .fct-badges .chip { font-size: 11px; padding: 1px 7px; }
.fct-dash { color: var(--mute); font-size: 18px; line-height: 1; }
.fct-closed, .fct-past, .fct-none, .fct-later { color: var(--mute); }
.fct-chg { display: block; min-height: 28px; padding: 0; margin-top: 3px; font-size: 12px; }
.fct-wk { text-align: right; white-space: nowrap; }
.fct-na td { color: var(--mute); }
.fct-legend { margin: 6px 0 10px; line-height: 1.9; }
.fct-changes { gap: 0; } .fct-ch { padding: 12px 0; } .fct-ch.fct-flag { border-left: 3px solid var(--bad); padding-left: 10px; }
.fct-chh { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .fct-chv { font-size: 15px; margin-top: 2px; } .fct-chr { margin-top: 2px; }
.fct-btns { margin: 8px 0 0; } .fct-rej { margin-top: 8px; } .fct-rej input { width: 100%; }
.fct-bulk .bar { margin: 8px 0 0; }
.fct-edit { border-color: var(--brand); }
.fct-form { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fct-prev { margin: 8px 0; padding: 8px 12px; background: var(--soft); border-radius: 8px; } .fct-prev p { margin: 4px 0; } .fct-prev-list { gap: 0; margin: 0; } .fct-prev-list li { padding: 4px 0; }
.fct-ovs li, .fct-notes li, .fct-srcs li { padding: 10px 0; } .fct-ovn, .fct-nt-text { margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.fct-noteform, .fct-srcform { margin-top: 12px; }
.fct-src { font-weight: 600; overflow-wrap: anywhere; }
.fct-help { margin: 10px 0 0; }
.fct-acctab td, .fct-acctab th { vertical-align: top; min-width: 130px; } .fct-acctab td .mini { display: block; }
@media (max-width: 560px) { .fct-grid { min-width: 760px; } .fct-grid tbody th { min-width: 104px; } .fct-grid td { min-width: 100px; } .fct-scroll { max-height: 70vh; } }
/* the forecast in the schedule (stream FC5, web/fcfeed.js and the Forecast tab's button): where each day's sales number came from, under the board's three steps */
.fcsrc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; font-size: 13px; }
.fcs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.fcs-day { white-space: nowrap; } .fcs-d { color: var(--mute); } .fcs-typed b { color: var(--warn); } .fcs-forecast b, .fcs-forecast_override b { color: var(--good); } .fcs-none b, .fcs-event b { color: var(--mute); font-weight: 500; }
.fct-feed { margin: 4px 0 8px; } .fct-feedask .bar { margin: 8px 0 0; }

/* Copy a shift (web/shiftcopy.js; Kevin, 2026-10-07): the highlight while a shift is Shift+dragged, the right-click menu, the note of what was copied and the toast with Undo. A style attribute is not allowed, so the menu
   sits in a grid of 96 columns by 60 rows over the window and a class names the cell it starts in (the two lines of rules at the end). The menu is above the board's popups (z-index 70; it is only ever open with no popup);
   the cue, the note and the toast are BELOW them (59, the popups are 60), so they never cover a popup's buttons, and none of them takes the pointer except the note's and the toast's own buttons, so a drag over them
   still lands on the box under them. */
.dz-copy, .dz-soft, .dz-hard, .dz-no { outline-offset: -2px; }
.dz-copy { outline: 2px dashed var(--good); background: var(--good-bg) !important; } .dz-soft { outline: 2px dashed var(--warn); background: var(--warn-bg) !important; } .dz-hard { outline: 2px dashed var(--bad); background: var(--bad-bg) !important; } .dz-no { outline: 2px dashed var(--mute); background: var(--away) !important; cursor: not-allowed; }
table.g td.dz-copy::after, table.g td.dz-soft::after, table.g td.dz-hard::after, table.g td.dz-no::after { position: absolute; top: 2px; right: 3px; z-index: 1; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 650; line-height: 16px; pointer-events: none; color: var(--accent-ink); }
table.g td.dz-copy::after { content: "+ Copy"; background: var(--good); } table.g td.dz-soft::after { content: "+ Copy, heads up"; background: var(--warn); } table.g td.dz-hard::after { content: "+ Needs a reason"; background: var(--bad); } table.g td.dz-no::after { content: "Not here"; background: var(--mute); }
.cphint { white-space: nowrap; }
.cpl { display: contents; } .cpl [hidden] { display: none !important; }
.cpg { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); grid-template-rows: repeat(60, minmax(0, 1fr)); }
.cpm { pointer-events: auto; justify-self: start; align-self: start; width: 250px; max-width: 92vw; display: flex; flex-direction: column; padding: 4px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.cpm button { all: unset; box-sizing: border-box; display: block; min-height: 40px; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 22px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpm button:hover, .cpm button:focus { background: var(--hover); } .cpm button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .cpm button[aria-disabled="true"] { color: var(--mute); cursor: not-allowed; }
.cpb { position: fixed; left: 0; right: 0; bottom: 12px; z-index: 59; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; }
.cpcue, .cpclip, .cptoast { pointer-events: none; display: flex; gap: 10px; align-items: center; max-width: min(680px, 100%); padding: 8px 12px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.cpcue.hard { border-color: var(--bad); } .cpcue.soft { border-color: var(--warn); } .cpcue.no { border-color: var(--mute); } .cpcue.ok { border-color: var(--good); } .cptoast.ok { border-color: var(--good); }
.cpclip button, .cptoast button { pointer-events: auto; min-height: 32px; padding: 0 12px; flex: none; }
@media (max-width: 640px) { .cpcue, .cpclip, .cptoast { font-size: 14px; } }
.cpx1{grid-column-start:1}.cpx2{grid-column-start:2}.cpx3{grid-column-start:3}.cpx4{grid-column-start:4}.cpx5{grid-column-start:5}.cpx6{grid-column-start:6}.cpx7{grid-column-start:7}.cpx8{grid-column-start:8}.cpx9{grid-column-start:9}.cpx10{grid-column-start:10}.cpx11{grid-column-start:11}.cpx12{grid-column-start:12}.cpx13{grid-column-start:13}.cpx14{grid-column-start:14}.cpx15{grid-column-start:15}.cpx16{grid-column-start:16}.cpx17{grid-column-start:17}.cpx18{grid-column-start:18}.cpx19{grid-column-start:19}.cpx20{grid-column-start:20}.cpx21{grid-column-start:21}.cpx22{grid-column-start:22}.cpx23{grid-column-start:23}.cpx24{grid-column-start:24}.cpx25{grid-column-start:25}.cpx26{grid-column-start:26}.cpx27{grid-column-start:27}.cpx28{grid-column-start:28}.cpx29{grid-column-start:29}.cpx30{grid-column-start:30}.cpx31{grid-column-start:31}.cpx32{grid-column-start:32}.cpx33{grid-column-start:33}.cpx34{grid-column-start:34}.cpx35{grid-column-start:35}.cpx36{grid-column-start:36}.cpx37{grid-column-start:37}.cpx38{grid-column-start:38}.cpx39{grid-column-start:39}.cpx40{grid-column-start:40}.cpx41{grid-column-start:41}.cpx42{grid-column-start:42}.cpx43{grid-column-start:43}.cpx44{grid-column-start:44}.cpx45{grid-column-start:45}.cpx46{grid-column-start:46}.cpx47{grid-column-start:47}.cpx48{grid-column-start:48}.cpx49{grid-column-start:49}.cpx50{grid-column-start:50}.cpx51{grid-column-start:51}.cpx52{grid-column-start:52}.cpx53{grid-column-start:53}.cpx54{grid-column-start:54}.cpx55{grid-column-start:55}.cpx56{grid-column-start:56}.cpx57{grid-column-start:57}.cpx58{grid-column-start:58}.cpx59{grid-column-start:59}.cpx60{grid-column-start:60}.cpx61{grid-column-start:61}.cpx62{grid-column-start:62}.cpx63{grid-column-start:63}.cpx64{grid-column-start:64}.cpx65{grid-column-start:65}.cpx66{grid-column-start:66}.cpx67{grid-column-start:67}.cpx68{grid-column-start:68}.cpx69{grid-column-start:69}.cpx70{grid-column-start:70}.cpx71{grid-column-start:71}.cpx72{grid-column-start:72}.cpx73{grid-column-start:73}.cpx74{grid-column-start:74}.cpx75{grid-column-start:75}.cpx76{grid-column-start:76}.cpx77{grid-column-start:77}.cpx78{grid-column-start:78}.cpx79{grid-column-start:79}.cpx80{grid-column-start:80}.cpx81{grid-column-start:81}.cpx82{grid-column-start:82}.cpx83{grid-column-start:83}.cpx84{grid-column-start:84}.cpx85{grid-column-start:85}.cpx86{grid-column-start:86}.cpx87{grid-column-start:87}.cpx88{grid-column-start:88}.cpx89{grid-column-start:89}.cpx90{grid-column-start:90}.cpx91{grid-column-start:91}.cpx92{grid-column-start:92}.cpx93{grid-column-start:93}.cpx94{grid-column-start:94}.cpx95{grid-column-start:95}.cpx96{grid-column-start:96}
.cpy1{grid-row-start:1}.cpy2{grid-row-start:2}.cpy3{grid-row-start:3}.cpy4{grid-row-start:4}.cpy5{grid-row-start:5}.cpy6{grid-row-start:6}.cpy7{grid-row-start:7}.cpy8{grid-row-start:8}.cpy9{grid-row-start:9}.cpy10{grid-row-start:10}.cpy11{grid-row-start:11}.cpy12{grid-row-start:12}.cpy13{grid-row-start:13}.cpy14{grid-row-start:14}.cpy15{grid-row-start:15}.cpy16{grid-row-start:16}.cpy17{grid-row-start:17}.cpy18{grid-row-start:18}.cpy19{grid-row-start:19}.cpy20{grid-row-start:20}.cpy21{grid-row-start:21}.cpy22{grid-row-start:22}.cpy23{grid-row-start:23}.cpy24{grid-row-start:24}.cpy25{grid-row-start:25}.cpy26{grid-row-start:26}.cpy27{grid-row-start:27}.cpy28{grid-row-start:28}.cpy29{grid-row-start:29}.cpy30{grid-row-start:30}.cpy31{grid-row-start:31}.cpy32{grid-row-start:32}.cpy33{grid-row-start:33}.cpy34{grid-row-start:34}.cpy35{grid-row-start:35}.cpy36{grid-row-start:36}.cpy37{grid-row-start:37}.cpy38{grid-row-start:38}.cpy39{grid-row-start:39}.cpy40{grid-row-start:40}.cpy41{grid-row-start:41}.cpy42{grid-row-start:42}.cpy43{grid-row-start:43}.cpy44{grid-row-start:44}.cpy45{grid-row-start:45}.cpy46{grid-row-start:46}.cpy47{grid-row-start:47}.cpy48{grid-row-start:48}.cpy49{grid-row-start:49}.cpy50{grid-row-start:50}.cpy51{grid-row-start:51}.cpy52{grid-row-start:52}.cpy53{grid-row-start:53}.cpy54{grid-row-start:54}.cpy55{grid-row-start:55}.cpy56{grid-row-start:56}.cpy57{grid-row-start:57}.cpy58{grid-row-start:58}.cpy59{grid-row-start:59}.cpy60{grid-row-start:60}
/* hidden profiles (hidden.js; the owner's alone): a tick beside each name, the bar above the list, the question before hiding, the Hidden list */
.pf-pick{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;flex:none;cursor:pointer}.pf-pick input{width:20px;height:20px;margin:0}
.pf-bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.pf-hconf{margin:8px 0}.pf-hconf>div{flex:1;min-width:0}.pf-hconf .pf-field input{width:100%;box-sizing:border-box;max-width:28rem}
.pf-hlist li{flex-wrap:wrap}.pf-hlist .sph{margin-left:auto}
/* attendance and write-ups (web/attendance.js, and the badge on Requests and People) */
.pf-att-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}.pf-att-list>li{background:var(--soft);border-radius:8px;padding:8px 10px;font-size:13px;overflow-wrap:anywhere}.pf-att-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pf-att-list .pf-sub{margin:4px 0 0}.pf-att-notes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}.pf-att-notes li{white-space:pre-wrap;border-top:1px solid var(--line);padding-top:4px}.pf-att-box,.pf-att-form{margin-top:8px}.pf-att-form h4{margin:0}
.hatt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}

/* ---------- widths, pinned row labels, selected focus rings (stage R2, after the review) ---------- */
/* a single-line field, a select and a paste box do not stretch across a wide card (on a phone they still fill it); reading text keeps a comfortable line */
.card .stack input, .card .stack select, .pf-field input, .pf-field select, .bar input[type=text], .bar input[type=search], .hact input[type=text], .rv-act input[type=text], .gt-act input[type=text], .ac-search .pf-field input, .evform input, .evform select { max-width: 40rem; }
.card .stack textarea, .card textarea, .pf-field textarea { max-width: 48rem; }
.card .stack input[type=number], .pf-field input[type=number], .pf-field input[type=date], .pf-field input[type=time], .stack input[type=date], .stack input[type=time] { max-width: 12rem; }
.card > p:not(.loading), .card > .note, .card > .why, .card > .hscope, .card > .hrule, .card > ul, .card > ol { max-width: 72ch; }
.pf-wrap, .gd-wrap { margin-left: 0; margin-right: auto; }      /* the left edge is the tabs' edge, not a centered column */
/* a table that scrolls sideways keeps its row labels in view (the standing schedule, the sales projection, the payroll import, worked against scheduled) */
.scroll > table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
/* a number column's heading sits over its numbers (payroll import, worked against scheduled) */
.pr-tbl th:nth-child(n+3) { text-align: right; } .pr-ext th:nth-child(3), .pr-ext th:nth-child(4) { text-align: left; } .pr-ppl th:nth-child(n+2) { text-align: right; } .pr-tbl thead th { font-variant-numeric: tabular-nums; }
/* the focus ring inside a selected button is drawn in the selected text color: orange on the nearly white pill of dark mode is only 2.2:1 */
.seg button.on:focus-visible { outline-color: var(--sel-ink); } .dv-days button.on:focus-visible { outline-color: var(--sel-ink); }

/* ---------- the screens built at the same time as the Crewsy look, under its rules (the merge of lane L4, 2026-10-07): the Forecast tab, the board's target figures, copy a shift, Team Status ----------
   The Change % panel (.fct-edit) and the question before hiding a profile (its bold line) are focused by script and keep the ring like every control: a keyboard user sees it, a click does not draw it. */
@media (pointer: coarse), (max-width: 600px) {
  body .fct-store .fct-tog, body .fct-chg, body .cpm button, body .cpclip button, body .cptoast button { min-height: 44px; }      /* the Forecast tab's small links, the copy menu, Paste and Undo: 44 px on a phone or a touch screen */
  body button.tg { position: relative; z-index: 1; }      /* the target figures under a name stay their own button above the name's whole-cell target (button.nm::after) */
}
@media (max-width: 600px) {
  body button.tg, body .tm-store small, body .fct-parts, body .fct-range, body .fct-model, body .fct-sugg, body .fct-ev, body .fct-nt, body .fct-nf, body .fct-badges .chip,
  body table.g td.dz-copy::after, body table.g td.dz-soft::after, body table.g td.dz-hard::after, body table.g td.dz-no::after { font-size: 12px; }      /* their 11 px marks are 12 on a phone, like every small mark */
}
.scroll > table.fct-grid tr.fct-srow > th { background: var(--soft); }      /* the Forecast grid's store row keeps its soft fill under the pinned row-label rule above */

/* Staff Help (web/help.js: a team member's Help tab) and its Inbox and Setup card (web/inbox.js). Every class starts with hlp-, ibx- or hs-. Built from the tokens: no new color. */
.hlp .hlp-offer { margin: 8px 0; }
.hlp-msgs { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.hlp-m { border-radius: var(--rad-l); padding: 8px 12px; font-size: 14px; max-width: 92%; min-width: 0; }
.hlp-m.you { background: var(--accent-soft); color: var(--ink); justify-self: end; }
.hlp-m.bot { background: var(--soft); color: var(--ink); }
.hlp-m.admin { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.hlp-who { font-size: 12px; color: var(--mute); margin-bottom: 2px; } .hlp-who b { color: var(--ink); font-weight: 650; }
.hlp-tx, .ibx-tx { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.hlp-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 14px; }
.hlp-cats { border: 0; margin: 0; padding: 0; min-width: 0; } .hlp-cats legend { font-size: 12px; color: var(--mute); padding: 0; margin: 8px 0 3px; }
.hlp-form textarea, .ibx textarea, #hs-card textarea { font-family: inherit; font-size: 16px; }
.hlp-count { display: block; font-size: 12px; margin-top: 2px; }
.hlp-old { list-style: none; margin: 0; padding: 0; } .hlp-old > li { border-bottom: 1px solid var(--line); padding: 4px 0; } .hlp-old summary { cursor: pointer; font-size: 14px; display: flex; align-items: center; }
.spill.z { background: var(--soft); color: var(--mute); }
.ibx-cols { display: grid; gap: 12px; align-items: start; } .ibx-list, .ibx-thread { min-width: 0; }
@media (min-width: 1024px) { .ibx-cols { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); } }
@media (max-width: 1023px) { .ibx.has-open .ibx-thread { order: -1; } }      /* on a phone or a tablet the open conversation comes first, with Back to the list at its top */
.ibx-rows { display: grid; gap: 6px; } .ibx-rows > li { padding: 0; border: 0; }
button.ibx-row { width: 100%; display: grid; gap: 2px; text-align: left; justify-items: start; align-items: start; padding: 8px 10px; font-weight: 450; min-width: 0; }
button.ibx-row.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.ibx-r1 { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .ibx-r1, .ibx-r2, .ibx-r3 { min-width: 0; max-width: 100%; } .ibx-r2, .ibx-r3 { font-size: 12px; overflow-wrap: anywhere; }
.ibx-r3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ibx-n { font-variant-numeric: tabular-nums; }
.ibx-msgs { display: grid; gap: 8px; margin: 10px 0; } .ibx-msgs > li { border: 0; padding: 0; }
.ibx-m { border-radius: var(--rad-m); padding: 8px 10px; background: var(--soft); color: var(--ink); min-width: 0; }
.ibx-m.staff { background: var(--accent-soft); color: var(--ink); }
.ibx-m.admin { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.ibx-m.note { background: var(--warn-bg); color: var(--ink); }
.ibx-m.system { background: transparent; color: var(--mute); font-size: 12px; padding: 2px 10px; }
.ibx-who { font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .ibx-who b { color: var(--ink); font-weight: 650; }
.ibx-acts { align-items: flex-end; flex-wrap: wrap; } .ibx-pick { margin: 12px 0; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; }
.hs-faq { padding-left: 20px; } .hs-faq > li { padding: 8px 0; border-bottom: 1px solid var(--line); } .hs-faq > li.off .hs-q b { color: var(--mute); } .hs-a { white-space: pre-wrap; margin: 4px 0; overflow-wrap: anywhere; }

:root { --heat1-bg: #ffef9e; --heat1-bd: #a67c00; --heat1-bar: #ffd21f; --heat2-bg: #ffc27a; --heat2-bd: #b35900; --heat2-bar: #ff9a2e; --heat3-bg: #ee7d70; --heat3-bd: #b3261e; --heat3-bar: #ff5a4d; }      /* heat boxes (Willing to Work): semantic, not the brand orange; yellow lightest, red darkest */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --heat1-bg: #7a6800; --heat1-bd: #e0b800; --heat1-bar: #a98100; --heat2-bg: #7a4300; --heat2-bd: #f08a24; --heat2-bar: #b24a00; --heat3-bg: #7a1f1f; --heat3-bd: #ff6b5e; --heat3-bar: #9e2020; } }
:root[data-theme="dark"] { --heat1-bg: #7a6800; --heat1-bd: #e0b800; --heat1-bar: #a98100; --heat2-bg: #7a4300; --heat2-bd: #f08a24; --heat2-bar: #b24a00; --heat3-bg: #7a1f1f; --heat3-bd: #ff6b5e; --heat3-bar: #9e2020; }
/* Willing to Work on the Schedule screen (web/willing.js; Kevin 2026-10-09, 2026-10-10 and, made small and colored, 2026-10-15, lane WC1): the first line, one line about the colors (only when a day is colored), the how-to line and the chart of the days a person can mark
   (one row of seven small boxes for each week, Monday first, from today through the end of the week after the latest published week). Kevin, 2026-10-10: no red and no green for the person's own shifts. A day is one small box (the panel color with a quiet edge):
   the weekday letter and the date number, a dash under it when the person is not usually available, Off on a day of approved time off; once marked it is filled with the selected navy (off-white in dark mode) with a check mark in the corner, so the cue is never a color alone;
   a day of approved time off is a dashed, quiet box that cannot be tapped. Kevin, 2026-10-15: a day with open shifts (any position, any store) is tinted yellow, orange or red by the Worker's tier (heat1, heat2, heat3: lighter to darker, so it reads without the hue); a marked
   day keeps its navy and shows the tier as a band across the top. No number is ever drawn. The nine --heat tokens are semantic (not the brand orange). Every class starts with wt. The language row and the closed text size and sign out section are slang and smore. */
.wt { margin-top: 8px; }
.wt-promise { font-size: 15px; font-weight: 650; line-height: 1.45; margin: 0 0 6px; max-width: 72ch; }
.wt-told { margin: 0 0 4px; }
.wt-how { margin: 0 0 4px; max-width: 72ch; }
.wtc { margin: 6px 0 4px; }
.wtw { margin: 0 0 4px; }
.wtw-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 6px 0 4px; font-size: 13px; font-weight: 650; } .wtw-n { font-size: 12px; font-weight: 450; color: var(--mute); }
.wtw-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }      /* seven days across, Monday first: a 375 px phone gives each day 46 px, a 360 px phone 44 px */
.wtc-x { display: block; }      /* an empty place: a day of this week before today (so a column is always the same weekday) */
.wtc-d { position: relative; min-width: 0; min-height: 52px; padding: 6px 0 3px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; text-align: center; line-height: 1.1; font-size: 17px; font-weight: 650; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--rad-s); }
.wtc-t { display: block; font-size: 17px; font-weight: 650; } .wtc-t small { display: block; font-size: 12px; font-weight: 650; color: var(--mute); margin: 0; }
.wtc-a { display: block; min-height: 13px; font-size: 12px; font-weight: 450; color: var(--mute); }      /* under the date: a dash (not usually available) or Off (time off); nothing when any time */
.wtc-s { position: absolute; top: 2px; right: 2px; display: flex; }      /* marked: the check mark in the corner (the words I will work are read out, not drawn) */
.wtc-q { position: absolute; top: 4px; left: 4px; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }      /* a time off request is waiting: a small open circle (the words are read out) */
.wtc-ck { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wt-heat { margin: 0 0 4px; max-width: 72ch; }      /* the one line about the colors; drawn only when at least one day is tinted */
.wtc-d.heat1:not(.on) { background: var(--heat1-bg); border-color: var(--heat1-bd); } .wtc-d.heat2:not(.on) { background: var(--heat2-bg); border-color: var(--heat2-bd); } .wtc-d.heat3:not(.on) { background: var(--heat3-bg); border-color: var(--heat3-bd); }
.wtc-d:is(.heat1, .heat2, .heat3):not(.on) .wtc-t small, .wtc-d:is(.heat1, .heat2, .heat3):not(.on) .wtc-a { color: var(--ink); }
.wtc-d.on.heat1 { box-shadow: inset 0 4px 0 var(--heat1-bar); } .wtc-d.on.heat2 { box-shadow: inset 0 4px 0 var(--heat2-bar); } .wtc-d.on.heat3 { box-shadow: inset 0 4px 0 var(--heat3-bar); }
.wtc-d.on:is(.heat1, .heat2, .heat3) .wtc-s { top: 6px; } .wtc-d.on:is(.heat1, .heat2, .heat3) .wtc-q { top: 8px; }      /* the check mark and the request circle sit under the band */
.wtc-d.on, .wtc-d.on:hover { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); } .wtc-d.on .wtc-t small, .wtc-d.on .wtc-a, .wtc-d.on .wtc-q { color: var(--sel-ink); }
.wtc-d.to, .wtc-d.to:disabled { background: var(--soft); color: var(--mute); border: 1px dashed var(--edge); cursor: not-allowed; opacity: 1; }      /* approved time off: cannot be marked (the box is only quieter) */
.wtc-d.wait { border-style: dashed; }      /* tapped and not saved yet: it already shows as it will be, with a dashed edge until the Worker has answered */
.sfrm textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
.slang { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 2px; font-size: 13px; color: var(--mute); } .slang select { font-size: 16px; min-height: 44px; max-width: 60%; }
.smore { margin: 22px 0 0; border-top: 1px solid var(--line); } .smore summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--mute); } .smore .sfrm { padding: 4px 0 8px; }
.seg.ssw { display: flex; width: 100%; margin: 6px 0 4px; } .ssw button { flex: 1 1 0; min-height: 44px; }      /* Time off | Availability, one tab (web/staff.js) */
/* Manager view | My view (ui.js): a manager who is also a team member; under the header, on every screen width, never a tab. SMALL AND QUIET (Kevin 2026-10-12: "needs to be small and subtle, its huge"): the side that is off is plain muted text, the side that is on is one small navy pill (the brand's selected look: navy, white text).
   The button BOX keeps the 44 px target on a phone (40 on a computer) and the drawn pill is its 28 px padding box: the box's top and bottom are a transparent border that the background does not paint (background-clip). Markup, words, ids and aria are unchanged. */
.seg.ssw.vmode { display: flex; width: fit-content; max-width: none; gap: 2px; margin: 2px 0 2px auto; background: none; border: 0; overflow: visible; }
.seg.ssw.vmode button { flex: 0 0 auto; min-height: var(--ctl); padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--mute); background: transparent; border: 0 solid transparent; border-block-width: calc((var(--ctl) - 28px) / 2); background-clip: padding-box; border-radius: 999px; }
.seg.ssw.vmode button:not(.on):hover { background-color: transparent; color: var(--ink); }
.seg.ssw.vmode button.on { color: var(--sel-ink); background-color: var(--sel); border-color: transparent; }      /* (background-color, not the shorthand: the shorthand would put background-clip back to the border box) */
.seg.ssw.vmode button.on:focus-visible { outline-color: var(--focus); }      /* (a white ring on the white page would not show: the page's .seg button.on:focus-visible rule uses the selected ink) */

/* Punches (web/staff.js, worker/punches2.mjs; Kevin 2026-10-09): the hours worked in all and at each store; a tap on a store opens its punches, each with its break. Classes start with pun. */
.pun-big { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pun-total { background: var(--soft); }
.pun-store { padding: 0; overflow: hidden; }
.pun-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n h" "go go"; align-items: center; gap: 4px 10px; width: 100%; min-height: 56px; padding: 12px; text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; }
.pun-n { grid-area: n; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pun-n b { font-size: 15px; overflow-wrap: anywhere; } .pun-n small { font-size: 12px; color: var(--mute); }
.pun-head .pun-big { grid-area: h; } .pun-go { grid-area: go; font-size: 13px; font-weight: 600; color: var(--mute); }
.pun-list { margin: 0; padding: 0 12px 6px; list-style: none; border-top: 1px solid var(--line); }
.pun { padding: 10px 0; border-top: 1px solid var(--line); } .pun:first-child { border-top: 0; }
.pun-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; } .pun-day span { font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.pun-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.pun-c { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 8px; border-radius: var(--rad-s); background: var(--soft); } .pun-c small { font-size: 12px; font-weight: 650; color: var(--mute); } .pun-c b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pun-tot { background: var(--good-bg); } .pun-tot b { font-size: 16px; }
/* Willing to Work on Requests (web/willinglist.js; Kevin 2026-10-09): who can work and when, for the admin team. Every class starts with wl. */
.wl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0; } .wl-top label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); } .wl-top select { font-size: 16px; min-height: 44px; }
.wl-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wl-row { border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 10px 12px; background: var(--panel); }
.wl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .wl-head b { font-size: 15px; overflow-wrap: anywhere; } .wl-head .pf-u18 { display: inline-block; vertical-align: middle; }
.wl-stores { margin: 2px 0 0; font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.wl-days { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .wl-days li { font-size: 13px; line-height: 1.3; border: 1px solid var(--good); background: var(--good-bg); color: var(--ink); border-radius: var(--rad-s); padding: 4px 8px; } .wl-days small { display: block; font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }

/* Coverage help (stream C2: web/cover.js, web/outreach.js, web/staff.js, web/willing.js). The Likely covers panel of an open shift (managers), the line about the two waves, Setup's Store phone numbers card, a team member's
   Can't make this shift card (the store's and the GMs' numbers first, highlighted when the shift starts soon), the chip on an open shift a person said they are willing to work, and the switch on Willing to Work. Classes start with cv- or cm-. */
.cv-list, .cm-list { margin: 4px 0 0; padding: 0; list-style: none; }
.cv-row, .cm-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.cv-row:first-child, .cm-list li:first-child { border-top: 0; }
.cv-who, .cm-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; } .cv-who b, .cm-who b { font-size: 14px; overflow-wrap: anywhere; } .cv-who small, .cm-who small { font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.cv-who .pf-u18 { display: inline-block; vertical-align: middle; margin-left: 4px; } .cv-will { align-self: flex-start; font-size: 12px; } .cv-flags { color: var(--ink); }
.cv-wave { align-items: center; } .cv-wave small { flex: 1 1 220px; color: var(--mute); line-height: 1.45; }
/* Who could take it (lane Q): one list of the people who could take an open shift, in a box that scrolls on its own, each with a Text button */
.cv-take .cv-box { max-height: 18rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--rad-m); padding: 0 10px; }
.cv-take-row .cv-act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: 0 1 auto; } .cv-take-row .cv-st { font-size: 12px; color: var(--mute); } .cv-take-row .cv-why { font-size: 12px; max-width: 14rem; overflow-wrap: anywhere; }
.cv-willnote { display: block; flex: 1 1 100%; color: var(--mute); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
/* Suggested fills (lane W): a card for each day with more open shifts than the line, at the top of Alerts, Shifts; under each open shift the people who set Willing to Work for the day, with the list classes of Who could take it above */
.fl-sec { margin: 0 0 12px; } .fl-sec .hdh { margin: 0 0 4px; } .fl-sec > p { margin: 0 0 8px; }
.fl-shift { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); } .fl-shift:first-of-type { margin-top: 8px; }
.fl-sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 6px; }
.fl-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; } .fl-t b { font-size: 14px; overflow-wrap: anywhere; } .fl-t small { font-size: 12px; color: var(--mute); }
.fl-also { color: var(--mute); } .fl-none { margin: 4px 0 0; overflow-wrap: anywhere; }
.cv-plist { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cv-plist li { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; } .cv-plist li small { grid-column: 2 / -1; font-size: 12px; } .cv-plist input { width: 100%; box-sizing: border-box; font-size: 16px; }
@media (max-width: 600px) { .cv-plist li { grid-template-columns: minmax(0, 1fr) auto; } .cv-plist li label { grid-column: 1 / -1; } .cv-plist li small { grid-column: 1 / -1; } }
.cm-card { margin-top: 12px; } .cm-card h4 { margin: 12px 0 4px; font-size: 14px; }
.cm-call { border: 1px solid var(--line2); border-radius: var(--rad-l); padding: 8px 12px; margin-top: 8px; background: var(--soft); }
.cm-call.now { border: 2px solid var(--warn); background: var(--warn-bg); } .cm-call.now h4 { color: var(--ink); font-size: 16px; } .cm-call h4 { margin-top: 2px; }
.cv-mine { display: inline-block; margin-top: 4px; font-size: 12px; }
@media (pointer: coarse), (max-width: 600px) { body .cm-card .bar button, body .cv-plist button { min-height: 44px; } }
.sh small.evl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }      /* a catering event shift: the event number and a short event name instead of the role (web/evlabel.js) */

/* A phone (Kevin, 2026-10-09: pages were very long): what can go is in <span class="x"> and is hidden here; a store is a picker; the board's three steps are one row; the Refresh word is an arrow; folded notes and sales numbers. */
.loc-sel, .rfi { display: none; } .rfi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bnotes, .fcs-det { margin: 6px 0; } .fcsrc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .bnotes summary, .fcs-det summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); } .bnotes p { margin: 4px 0; } .fcs-det { display: inline-block; max-width: 100%; vertical-align: top; }
@media (max-width: 599px) {
  .x { display: none; } .rfi { display: inline-block; } button.rl { min-width: 44px; padding-inline: 10px; }
  .loc-seg { display: none; } .loc-sel { display: block; width: 100%; font-size: 16px; min-height: 44px; }
  .bar.steps { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: stretch; }      /* the board's steps share one row whatever their number: four on a computer-sized window, three on a phone (no Auto-schedule) */ .bar.steps > * { min-width: 0; text-align: center; justify-content: center; white-space: normal; line-height: 1.2; padding: 6px 4px; } .bar.steps .btn, .bar.steps button { display: inline-flex; align-items: center; min-height: 44px; }
  .card > .bar .seg[aria-label="Week"] { flex-wrap: nowrap; flex: 1 1 auto; justify-content: space-between; } .card > .bar .seg[aria-label="Week"] .wk { white-space: nowrap; align-self: center; }
  .fcsrc { display: block; } .fcs-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
}
.pp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; } .pp-tools label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); } .pp-tools select { font-size: 16px; min-height: 44px; max-width: 100%; }
.pf-grp { list-style: none; padding: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); }
@media (max-width: 599px) {
  .pp-tools { display: grid; grid-template-columns: 1fr 1fr; } .pp-tools label { display: block; } .pp-tools select { width: 100%; } .pp-tools > .loc-sel { grid-column: 1 / -1; } .pp-tools > button { grid-column: 1 / -1; justify-content: center; }
  .banners { display: flex; flex-wrap: wrap; gap: 6px; } .banners .banner { padding: 6px 10px; font-size: 13px; }
  .pf-bulk { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; } .pf-bulk > * { min-width: 0; padding-inline: 8px; }
}
.gd-lc td, .gd-lc th { font-variant-numeric: tabular-nums; } .gd-lp th small { display: block; font-size: 12px; color: var(--mute); } .gd-lp td { font-weight: 650; }

/* ---- Alerts, Punch review (Kevin, 2026-10-09; web/punchreview.js) ---- */
.pr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; } .pr-wk { font-size: 15px; }
.pr-top label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); } .pr-top select { font-size: 16px; min-height: 44px; }
.pr-sum { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pr-card { border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 10px 12px; background: var(--panel); } .pr-card[data-state="open"] { border-color: var(--warn); } .pr-card[data-state="fixing"] { border-color: var(--accent); }
.pr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .pr-head b { font-size: 15px; overflow-wrap: anywhere; } .pr-head .pf-u18 { display: inline-block; vertical-align: middle; }
.pr-meta { margin: 4px 0 0; font-size: 13px; color: var(--mute); } .pr-what { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; } .pr-how { margin: 6px 0 0; font-size: 13px; color: var(--mute); }
.pr-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--mute); } .pr-note input { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.pr-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .pr-act:empty { display: none; }
.pr-waive { border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 10px 12px; margin: 8px 0; background: var(--panel); overflow-wrap: anywhere; } .pr-waive.ok { border-color: var(--good); background: var(--good-bg); } .pr-held { margin: 0 0 6px; }

/* ---- Store log (Kevin 2026-10-09; web/storelog.js): a store and a business day: the weather the day had, how staffing felt in a daypart, the day's notes. The Log tab of a manager and a section at the end of the team member's Team schedule. Tokens only; the selected tap is navy ---- */
.sl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; } .sl-top .sh2 { margin: 6px 0; } .sl-store { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); } .sl-store select { font-size: 16px; min-height: var(--ctl); max-width: 100%; }
.sl-day { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 10px; } .sl-date { font-size: 15px; min-width: 6.5em; text-align: center; } .sl-readonly { margin: 0 0 10px; }
.sl-card h3 { margin-top: 0; } .sl-lab { margin: 10px 0 4px; font-size: 13px; font-weight: 650; color: var(--mute); } .sl-fc { margin: 0 0 4px; font-weight: 600; } .sl-ro { margin: 0 0 4px; } .sl-by { display: block; margin-top: 4px; font-size: 12px; color: var(--mute); }
.sl-seg button { min-width: var(--ctl); } .sl-dp { padding: 8px 0; border-top: 1px solid var(--line); } .sl-dph { margin-bottom: 4px; }
.sl-card textarea { display: block; width: 100%; max-width: 100%; min-height: 5.5em; box-sizing: border-box; font-size: 16px; resize: vertical; } .sl-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 4px 0 8px; font-size: 13px; }
.sl-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } .sl-row { border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 8px 12px; background: var(--panel); } .sl-rh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .sl-txt { margin: 4px 0 6px; font-size: 14px; overflow-wrap: anywhere; }
.sl-sec .sh2 { margin: 0; } .sl-toggle { width: 100%; justify-content: space-between; border: 0; background: transparent; padding: 0; font-size: 16px; font-weight: 650; } .sl-sec .sl-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 10px 0 4px; margin: 10px 0 0; }

/* ---- Day or Week (Kevin 2026-10-09; web/schedview.js): the switch, Earlier / Later and the seven day chips, on the team member's Schedule, the Team schedule and the board ---- */
.sch-bar { display: grid; gap: 8px; margin: 6px 0 10px; max-width: 640px; } .sch-bar .seg.ssw { margin: 0; }
@media (min-width: 601px) { .sch-bar .seg.ssw { max-width: 320px; } }
.sch-mode button { font-weight: 600; } .sch-mode button.on::before { content: "\2713"; margin-right: 6px; font-weight: 700; }      /* the chosen side is filled (navy with white text; off-white with navy text in the dark theme) and carries a check mark: a shape, not a color alone */
.sch-shown { margin: 0; font-size: 13px; line-height: 1.35; color: var(--mute); }      /* "Week of 10/5": what the Week side is showing, in words (in Day the Earlier / Later row's title does it) */
.sch-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sch-nav button { flex: none; }
.sch-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.sch-pick { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 0; overflow-x: auto; } .sch-pick button + button { margin-left: -1px; }      /* seven chips of at least 44 px: below about 340 px the row scrolls inside its own box, never the page */
.sch-pick button { position: relative; flex-direction: column; gap: 0; min-width: 44px; min-height: 44px; padding: 2px; font-size: 12px; line-height: 1.2; } .sch-pick button b { font-size: 13px; font-weight: 650; }
.sch-pick button[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.sch-pick button[aria-current="date"]::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }      /* today: a dot (a shape, not a color alone) and the screen-reader word */
@media (max-width: 420px) { .card > .sch-bar { margin-inline: -9px; } }      /* the board's bar sits in a padded card (the card's box is the screen less about 66 px): it takes 9 px of the card's side padding, so the seven 44 px chips (308 px) fit from 356 px up */
@media (max-width: 355px) { .sch-pick { grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 4px; overflow-x: visible; } .sch-pick button + button { margin-left: 0; } }      /* a narrower screen (a 320 px phone) draws the seven chips as four and three, each still 44 px: no chip is ever cut off */
.sch-bar button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }      /* Earlier on Monday and Later on Sunday of the Team schedule: it stays a button, so the focus is not lost */
table.g.one { min-width: 0; max-width: 720px; }      /* the board in Day: Team, one day, Hrs; the pinned header's row heights are the same as in Week */
@media (min-width: 768px) { #app[data-shell="staff"] { max-width: 600px; } }      /* a team member's page, the header with it, is one centered phone column on a wide screen (the bottom bar and the Schedule are already 600 px) */
/* Staffing guide (lane G, 2026-10-09): levels by daypart (an empty cell where a daypart has fewer levels, the level just added, the add strip and the Remove buttons), the target and the Over/On/Under chips, and the shape of a day. Tokens only. */
.gd-tbl .gd-none { background: var(--soft); }
.gd-tbl td.gd-new { background: var(--good-bg); }
.gd-lvbar th, .gd-lvbar td, .gd-lvx th { background: var(--soft); } .gd-tbl .gd-lvbar td { text-align: left; }
.gd-addlv { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); } .gd-tbl .gd-addlv input { width: 110px; }
.gd-x { font-size: 12px; padding: 2px 6px; min-height: 28px; }
.gd-st .chip { font-size: 12px; } .gd-st td { font-size: 12px; } .gd-tg input::placeholder { color: var(--mute); }
.gd-tbl.wide12 { min-width: 1080px; }
.gd-lvnote { margin: 4px 0; }
.gd-shape { background: var(--soft); border-radius: var(--rad-m); padding: 10px 12px; margin: 10px 0; } .gd-shape h3 { margin: 0 0 4px; } .gd-shape h4 { margin: 12px 0 2px; }
.gd-shgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 14px; margin: 8px 0; }
.gd-shgrid label, .gd-shroles label { display: grid; gap: 2px; font-size: 12px; color: var(--mute); } .gd-shgrid input, .gd-shroles input { width: 100%; max-width: 120px; }
.gd-shroles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; }
.gd-chk { display: inline-flex; align-items: center; gap: 6px; } .gd-chk input { width: 18px; height: 18px; margin: 0; }
.gd-shsum { margin: 6px 0; }
.gd-peaks { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 12px; } .gd-peaks th, .gd-peaks td { border: 1px solid var(--line); padding: 3px 4px; text-align: center; font-weight: 400; vertical-align: middle; } .gd-peaks th:first-child { text-align: left; }
.gd-peaks input[type=time] { width: 100%; min-width: 0; font-size: 14px; margin: 1px 0; }
/* Hours rules (the new Auto-schedule, lane Eng): the words under a name on the board and in the People list. Words, never colour alone. */
.hrc { display: block; color: var(--mute); font-size: 10px; line-height: 1.3; }
.hrc-list { color: var(--mute); }

/* shift note templates (web/cnotes.js, lane N): the Catering guide's Shift notes half and the event card's Notes on this event. Tokens only: no colour is written here. */
.cg-tabs { margin: 6px 0 10px; } .cn-card textarea.cn-text { width: 100%; min-height: 96px; font-size: 16px; resize: vertical; } .cn-tokens { gap: 6px; margin: 6px 0; } .cn-tokens button { font-size: 12px; padding-inline: 8px; }
.cn-fam { margin: 10px 0 2px; } .cn-copy { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line2); } .cn-weeks { border: 0; padding: 0; margin: 8px 0; } .cn-evg { margin: 10px 0; } .cn-evg h4 { margin: 0 0 4px; } .cn-count { margin: 4px 0; }

/* ---- the time picker (web/timepick.js; Kevin 2026-10-09, option A): a typed box with clickable suggestions, AM and PM, a Pick panel. Tokens only; the panel is part of the form (a dialog is a sheet that scrolls), never a floating list ---- */
.tp { margin: 10px 0; min-width: 0; } .pop .tp-pair { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 10px 0; } .pop .tp-pair .tp { margin: 6px 0; } .pop .fr1 { margin: 10px 0; }
.tp-line { display: flex; gap: 6px; align-items: stretch; flex-wrap: nowrap; } .pop .tp-in, .tp-in { flex: 1 1 5ch; width: auto; min-width: 0; font-size: 16px; }
.tp-in[aria-invalid="true"] { border-color: var(--bad); }
.tp-ap { display: inline-flex; flex: none; border: 1px solid var(--line2); border-radius: var(--rad-m); overflow: hidden; } .tp-apb { border: 0; border-radius: 0; min-width: var(--ctl); padding: 0 8px; background: var(--panel); } .tp-apb + .tp-apb { border-left: 1px solid var(--line2); }
.tp-apb.on { background: var(--sel); color: var(--sel-ink); } .tp-apb.on:focus-visible { outline-color: var(--sel-ink); } .tp-btn { flex: none; }
.tp-sg { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; } .tp-sg[hidden], .tp-pn[hidden] { display: none; } .tp-sg button { min-width: 72px; }
.tp-rd { margin: 4px 0 0; font-size: 12px; color: var(--mute); min-height: 16px; } .tp-rd.bad { color: var(--bad); font-weight: 600; }
.tp-pn { margin: 8px 0 0; padding: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--rad-m); } .tp-pl { font-size: 12px; color: var(--mute); margin: 4px 0; }
.tp-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .tp-g button { padding: 8px 0; } .tp-g button.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); } .tp-g button.on:focus-visible { outline-color: var(--sel-ink); }
.tp-pf { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pf-times .tp { flex: 1 1 250px; margin: 4px 0; } .tp-cell { vertical-align: top; } .tp-cell .tp { margin: 0; min-width: 230px; }

/* ---- a shift's note is a popup (web/shiftnote.js; Kevin 2026-10-09): a small mark on the shift, the note in a dialog as typed ---- */
.snm { width: 12px; height: 12px; vertical-align: -1px; opacity: .85; flex: none; }
.sn-text { white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; margin: 10px 0; }
.pop .ssheet { margin: 6px 0 0; padding: 0; background: transparent; } .pop .ssheet:empty { display: none; }
.vs-row.vs-hasnote { display: block; } .vs-rowbtn { all: unset; box-sizing: border-box; width: 100%; min-height: var(--ctl); cursor: pointer; display: grid; grid-template-columns: 7.5em 1fr; gap: 2px 8px; align-items: baseline; padding: 4px 0; border-radius: var(--rad-s); } .vs-rowbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 420px) { .vs-rowbtn { grid-template-columns: 1fr; } }.pop #bp-note { height: 92px; }

/* ---- forecast triggers (web/fctriggers.js, lane T): the Week | Triggers switch, the library matrix, the month calendar, the tag form and the learned changes. Every class starts with ftg-. No inline style. ---- */
.ftg-switch { margin: 0 0 10px; } .ftg-switch .seg button { min-width: 96px; }
.ftg-scroll { max-height: 70vh; }
.ftg-matrix, .ftg-learn { font-size: 13px; min-width: 640px; border-collapse: collapse; }
.ftg-matrix th, .ftg-matrix td, .ftg-learn th, .ftg-learn td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ftg-matrix thead th, .ftg-learn thead th { background: var(--soft); position: sticky; top: 0; z-index: 2; font-weight: 650; }
.ftg-matrix tbody th { min-width: 190px; background: var(--panel); position: sticky; left: 0; z-index: 1; font-weight: 600; } .ftg-matrix thead th:first-child { left: 0; z-index: 3; }
.ftg-nm { font-size: 14px; } .ftg-cell { white-space: nowrap; } .ftg-meal { display: block; font-size: 12px; color: var(--mute); } .ftg-act { white-space: nowrap; }
.ftg-detail td { background: var(--soft); } .ftg-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.ftg-legend { margin: 8px 0 0; line-height: 1.7; } .ftg-built { margin-top: 14px; } .ftg-built .sh2 { margin-top: 0; }
.ftg-effs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 16px; margin: 10px 0; }
.ftg-effrow { display: flex; flex-direction: column; gap: 4px; } .ftg-effrow label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); } .ftg-effrow input { width: 100%; max-width: 100%; }
.ftg-meals { display: grid; gap: 6px; padding-left: 10px; border-left: 3px solid var(--line2); }
.ftg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin: 8px 0; }
.ftg-dow { text-align: center; font-size: 12px; font-weight: 650; color: var(--mute); padding: 4px 0; }
.ftg-day { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; min-height: 76px; min-width: 0; padding: 4px; border-radius: var(--rad-s); text-align: left; font-weight: 500; overflow: hidden; }
.ftg-day.ftg-out { background: var(--soft); color: var(--mute); } .ftg-day.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.ftg-day.ftg-today .ftg-dn { box-shadow: inset 0 -3px 0 var(--brand); }
.ftg-dn { align-self: flex-start; font-size: 13px; font-weight: 650; }
.ftg-tagchip { display: block; font-size: 12px; line-height: 1.3; background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ftg-day.on .ftg-tagchip { background: var(--panel); color: var(--ink); }
.ftg-n { display: none; align-self: flex-start; font-size: 12px; font-weight: 650; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 6px; } .ftg-day.on .ftg-n { background: var(--panel); color: var(--ink); }
.ftg-cal { font-size: 12px; color: var(--mute); } .ftg-day.on .ftg-cal { color: var(--sel-ink); } .ftg-cal-key { font-size: 12px; font-weight: 650; color: var(--mute); border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; }
.ftg-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .ftg-day.on .ftg-dot { background: var(--sel-ink); }
.ftg-panel { margin: 10px 0; padding: 10px 12px; background: var(--soft); border-radius: 8px; } .ftg-panel .sh2 { margin-top: 0; } .ftg-tag { padding: 8px 0; border-top: 1px solid var(--line); } .ftg-tag:first-child { border-top: 0; }
.ftg-tagform { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); } .ftg-stores { border: 0; margin: 8px 0; padding: 0; } .ftg-stores legend { font-size: 13px; color: var(--mute); padding: 0; } .ftg-pickrow { margin-left: 18px; }
.ftg-paste { margin-top: 10px; } .ftg-paste textarea { width: 100%; font-family: var(--mono); } .ftg-pastelist { margin: 8px 0 0; }
.ftg-props { gap: 0; } .ftg-prop { padding: 12px 0; } .ftg-prop.ftg-flagged { border-left: 3px solid var(--bad); padding-left: 10px; }
.ftg-wks { gap: 0; } .ftg-wk { padding: 12px 0; } .ftg-done { margin-top: 8px; } .ftg-ev { margin-top: 4px; }
.ftg-flag .link { display: inline; min-height: 0; padding: 0; }
@media (max-width: 600px) {
  .ftg-grid { margin-inline: -12px; }      /* seven days of 44 px across a phone: the grid takes the card's padding */
  .ftg-day { min-height: 48px; padding: 2px 3px; } .ftg-tagchip { display: none; } .ftg-n { display: inline-block; } .ftg-cal { display: none; }
  .ftg-matrix, .ftg-learn { min-width: 560px; } .ftg-switch .seg { display: flex; width: 100%; } .ftg-switch .seg button { flex: 1 1 0; }
}
@media (pointer: coarse) { .ftg-flag .link { min-height: 44px; display: inline-flex; align-items: center; } }


/* ---- Store health (web/shealth.js, web/shmanage.js; lane SH, 2026-10-11). Every class starts with sh-. Tokens only: no new colours. Green, amber and red always come with a word and an icon (the .g .y .r .z letters mean good, careful, bad, no colour). ---- */
.sh-ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; margin-right: 4px; }
.sh-topcard { padding: 14px 16px; } @media (max-width: 599px) { .sh-topcard { padding: 12px 0; } .sh-top, .sh-top2 > .seg, .sh-topcard .note { margin-left: 12px; margin-right: 12px; } .sh-top2 .sh-days { gap: 1px; grid-template-columns: repeat(7, minmax(44px, 1fr)); overflow-x: auto; } }
.sh-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sh-title { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; flex: 1 1 auto; }
.sh-step { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; order: 3; width: 100%; justify-content: center; }
.sh-step button { padding: 0; width: var(--ctl); } .sh-step button.sh-this { width: auto; padding: 8px 14px; margin-left: 4px; } .sh-step .sh-ic { margin: 0; width: 18px; height: 18px; }
.sh-weeklab { min-width: 11em; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; padding: 0 4px; }
@media (min-width: 600px) { .sh-step { order: 0; width: auto; } }
.sh-top2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.sh-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; flex: 1 1 280px; }
.sh-day { flex-direction: column; gap: 0; padding: 2px 0; min-width: 0; line-height: 1.1; }
.sh-dw { font-size: 12px; color: var(--mute); } .sh-dn { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sh-day.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); } .sh-day.on .sh-dw { color: inherit; }
.sh-conf { margin: 0 0 12px; }
.sh-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
@media (min-width: 600px) { .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.sh-card.g { box-shadow: inset 5px 0 0 var(--good), var(--sh1); } .sh-card.y { box-shadow: inset 5px 0 0 var(--warn), var(--sh1); } .sh-card.r { box-shadow: inset 5px 0 0 var(--bad), var(--sh1); }
.sh-cardhead, .sh-headtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.sh-st { display: inline-flex; align-items: center; background: var(--soft); color: var(--ink); }
.chip .sh-ic { margin-right: 4px; vertical-align: -.16em; }
.sh-pctbox { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.sh-pct { font-size: 42px; line-height: 1.05; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sh-pct.g, .sh-pct-s.g, .sh-words.g, .sh-words-s.g, .sh-tw.g, .sh-rw.g { color: var(--good); } .sh-pct.y, .sh-pct-s.y, .sh-words.y, .sh-words-s.y, .sh-tw.y, .sh-rw.y { color: var(--warn); }
.sh-pct.r, .sh-pct-s.r, .sh-words.r, .sh-words-s.r, .sh-tw.r, .sh-rw.r { color: var(--bad); } .sh-pct.z, .sh-pct-s.z, .sh-words.z, .sh-words-s.z, .sh-tw.z, .sh-rw.z { color: var(--mute); }
.sh-words { display: flex; align-items: center; font-weight: 650; font-size: 15px; } .sh-words-s, .sh-rw { display: inline-flex; align-items: center; font-weight: 650; } .sh-pct-s { font-weight: 750; font-variant-numeric: tabular-nums; }
.sh-line { margin: 2px 0; } .sh-worst { margin: 2px 0; } .sh-facts { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--mute); display: grid; gap: 2px; } .sh-facts li { overflow-wrap: anywhere; }
.sh-open { margin: auto 0 0; padding-top: 8px; } .sh-open button { width: 100%; }
.sh-empty { background: var(--soft); }
.sh-backbar { margin: 0 0 12px; } .sh-back { padding-left: 10px; } .sh-back .sh-ic { margin-right: 6px; }
.sh-detail { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; } .sh-detail > .card { margin-bottom: 0; }
@media (min-width: 1024px) { .sh-detail { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; } }
.sh-head.g { box-shadow: inset 5px 0 0 var(--good), var(--sh1); } .sh-head.y { box-shadow: inset 5px 0 0 var(--warn), var(--sh1); } .sh-head.r { box-shadow: inset 5px 0 0 var(--bad), var(--sh1); }
.sh-prov, .sh-final { margin: 6px 0; font-size: 14px; } .sh-final { font-weight: 650; display: flex; align-items: center; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .sh-est { margin: 4px 0; }
.sh-att { margin: 10px 0 0; } .sh-att p { margin: 4px 0 0; }
progress.sh-prog { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: 5px; background: var(--soft); overflow: hidden; display: block; }
progress.sh-prog::-webkit-progress-bar { background: var(--soft); border-radius: 5px; } progress.sh-prog::-webkit-progress-value { background: var(--accent); border-radius: 5px; } progress.sh-prog::-moz-progress-bar { background: var(--accent); border-radius: 5px; }
.sh-latest { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--rad-m); background: var(--soft); font-size: 14px; } .sh-latest p { margin: 0; } .sh-latest .sh-ic { margin: 3px 0 0; }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 8px; }
.sh-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 2px; padding: 12px; min-height: 116px; border-radius: var(--rad-l); border: 1px solid var(--line2); background: var(--soft); color: var(--ink); font-weight: 450; min-width: 0; }
button.sh-tile:hover { border-color: var(--edge); background: var(--hover); }
.sh-tile.g, button.sh-tile.g:hover { background: var(--good-bg); border-color: var(--good); } .sh-tile.y, button.sh-tile.y:hover { background: var(--warn-bg); border-color: var(--warn); } .sh-tile.r, button.sh-tile.r:hover { background: var(--bad-bg); border-color: var(--bad); }
.sh-tl { font-size: 12px; font-weight: 650; color: var(--mute); } .sh-tv { font-size: 24px; line-height: 1.15; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sh-tg, .sh-tm, .sh-tn { font-size: 12px; color: var(--mute); } .sh-tw { display: flex; align-items: flex-start; font-size: 12.5px; font-weight: 650; margin-top: auto; padding-top: 4px; } .sh-tw .sh-ic { margin-top: 2px; }
.sh-closed { grid-column: 1 / -1; min-height: 0; } .sh-closed .sh-tv { font-size: 20px; }
.sh-sofar { margin-top: 12px; padding: 10px 12px; background: var(--soft); border-radius: var(--rad-m); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.sh-wrap { max-width: 100%; overflow-x: auto; }
.sh-table th, .sh-table td, .sh-weeks th, .sh-weeks td { vertical-align: top; } .sh-table .sh-p, .sh-table .sh-v, .sh-weeks .sh-p, .sh-weeks .sh-m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-w { display: block; font-size: 12px; color: var(--mute); font-weight: 450; } button.sh-rowbtn { text-align: left; padding: 0; min-height: 28px; font-weight: 650; text-decoration: underline; color: var(--ink); justify-content: flex-start; }
.sh-head h3:focus, .sh-card h3:focus { outline: none; } .sh-weeks td.sh-m:empty { display: none; } .sh-rn { display: block; }
.sh-row.g > :first-child { box-shadow: inset 3px 0 0 var(--good); } .sh-row.y > :first-child { box-shadow: inset 3px 0 0 var(--warn); } .sh-row.r > :first-child { box-shadow: inset 3px 0 0 var(--bad); }
.sh-table tfoot th, .sh-table tfoot td { border-top: 2px solid var(--line2); font-weight: 650; } .sh-overall th, .sh-overall td { font-weight: 700; border-top: 2px solid var(--line2); }
.sh-s .sh-chips { display: inline-flex; margin: 0; } .sh-mh { text-align: center; } .sh-hd { border: 0; padding: 0; } .sh-hd summary, .sh-live summary { min-height: var(--ctl); display: flex; align-items: center; } .sh-hd p { margin: 4px 0 0; }
.sh-live { margin-top: 12px; }
.sh-inspgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .sh-inspgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.sh-insp h4 { margin-top: 0; } .sh-insp p { margin: 4px 0; } .sh-big { font-size: 22px; font-variant-numeric: tabular-nums; }
.sh-cg { margin-top: 12px; } .sh-cg h4 { margin: 0 0 4px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.sh-ci { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .sh-cz { flex: 1 1 14em; min-width: 0; } .sh-cs { flex: none; }
.sh-more { margin-top: 6px; } .sh-allclear { display: flex; align-items: center; font-weight: 650; color: var(--good); }
.sh-badge { margin-left: 4px; padding: 0 7px; }
.sh-drill p { margin: 6px 0; } .sh-formula code { display: block; padding: 8px 10px; margin-top: 2px; background: var(--soft); border-radius: var(--rad-s); } .sh-dl b { font-size: 20px; font-variant-numeric: tabular-nums; } .sh-daytab { margin: 8px 0; font-size: 13px; }
.pop .sh-daytab th, .pop .sh-daytab td { padding: 6px 8px; }
.sh-manage .sh-sech { margin: 0; border-top: 1px solid var(--line); font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); }
button.sh-sumbtn { background: none; border: 0; padding: 4px 0; font-weight: 650; font-size: 15px; justify-content: flex-start; width: 100%; text-align: left; } button.sh-sumbtn:hover { background: none; text-decoration: underline; } button.sh-sumbtn .sh-ic { margin-right: 8px; }
button.sh-mtop { font-size: 16px; } .sh-secbody { padding: 4px 0 12px; } .sh-h5 { margin: 16px 0 6px; font-size: 14px; }
.sh-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px; margin: 8px 0; }
.sh-fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); } .sh-fld input, .sh-fld select, .sh-fld textarea { width: 100%; max-width: 40rem; color: var(--ink); } .sh-fld textarea { max-width: 48rem; } .sh-setup .sh-form { grid-template-columns: minmax(0, 40rem); } .sh-wide { grid-column: 1 / -1; } .sh-fld textarea { min-height: 160px; }
.sh-gtop { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-bottom: 8px; } .sh-gtop .sh-fld { flex: 0 1 240px; } .sh-gconf { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh-ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .sh-tiers { display: grid; gap: 4px; } .sh-tier { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-keyrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .sh-keyrow input { flex: 1 1 240px; font-family: var(--mono); } .sh-newkey { margin: 8px 0; }
.sh-improws td { vertical-align: top; } .sh-srcs li, .sh-keys li, .sh-linkrows li, .sh-hist li, .sh-county li { overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .sh-table thead, .sh-weeks thead, .sh-sheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sh-table, .sh-table tbody, .sh-table tfoot, .sh-table tr, .sh-table th, .sh-table td, .sh-weeks, .sh-weeks tbody, .sh-weeks tr, .sh-weeks th, .sh-weeks td { display: block; width: 100%; }
  .sh-table tr, .sh-weeks tr { padding: 8px 0; border-bottom: 1px solid var(--line); } .sh-table th, .sh-weeks th, .sh-table td, .sh-weeks td { border: 0; padding: 2px 0; }
  .sh-table td, .sh-weeks td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; } .sh-table td::before, .sh-weeks td::before { content: attr(data-label); color: var(--mute); font-size: 12px; flex: none; text-align: left; }
  .sh-table td.sh-s { flex-wrap: wrap; justify-content: flex-end; } .sh-table .sh-row > :first-child { padding-left: 8px; }
  .sh-weeks th[scope=row] { font-weight: 650; }
}
@media (prefers-reduced-motion: no-preference) { .sh-tile, .sh-card { transition: background-color var(--fast), border-color var(--fast); } }
/* Labor adjustments and the volunteer call (lane L; web/vto.js): the cards in Alerts and a team member's own card on Schedule. Same tokens as Punch review; every control is at least the touch size; text wraps, nothing scrolls sideways. */
.vt-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vt-card { border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 10px 12px; background: var(--panel); overflow-wrap: anywhere; } .vt-card[data-state="open"] { border-color: var(--warn); } .vt-card[data-state="filled"] { border-color: var(--good); }
.vt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .vt-head b { font-size: 15px; }
.vt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; } .vt-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--soft); font-size: 13px; font-variant-numeric: tabular-nums; } .vt-chip .x { color: var(--mute); display: inline; }      /* the label of a chip stays on a phone (the phone rule hides every .x: the numbers alone said nothing) */
.vt-what { margin: 8px 0 0; font-size: 14px; } .vt-banner { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--rad-m); background: var(--good-bg); color: var(--ink); font-size: 13px; } .vt-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--rad-m); background: var(--warn-bg); color: var(--ink); font-size: 13px; }
.vt-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; } .vt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--line); min-height: 44px; } .vt-row:first-child { border-top: 0; }
.vt-row.withdrawn .vt-who, .vt-row.notpicked .vt-who { color: var(--mute); } .vt-n { flex: none; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--mute); } .vt-who { flex: 1 1 8em; min-width: 0; font-weight: 600; } .vt-tag { font-size: 13px; color: var(--ink); } .vt-tag.mute { color: var(--mute); }
.vt-pick { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -6px 0 -6px -10px; cursor: pointer; } .vt-pick input { width: 22px; height: 22px; margin: 0; }
.vt-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .vt-act:empty { display: none; }
.vt-panel { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--soft); } .vt-panel > b { font-size: 15px; } .vt-cut { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--mute); } .vt-cut select { min-height: var(--ctl); font-size: 16px; }
.vt-willing { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--soft); overflow-wrap: anywhere; } .vt-willing p { margin: 0; } .vt-willing p + p, .vt-willing p + ul, .vt-willing ul + p { margin-top: 4px; } .vt-wh b { font-size: 14px; }
.vt-wl { list-style: none; margin: 4px 0 0; padding: 0; } .vt-wp { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; min-height: 44px; border-top: 1px solid var(--line); } .vt-wp:first-child { border-top: 0; } .vt-wp .vt-who { flex: none; } .vt-wp small { font-size: 12px; color: var(--mute); } .vt-wp small.vt-also { color: var(--ink); }
.vt-staff { margin: 10px 0; } .vt-staff .bar { align-items: center; flex-wrap: wrap; gap: 8px; } .vt-shift { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; } .vt-state { margin: 8px 0 0; font-size: 16px; } .vt-body { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }


/* Setup, Who has Crewsy access, Features (web/features.js): one section under a GM's or Operations person's row, one checkbox a feature, grouped by area */
.ft-line { margin: 4px 0 0; }
.ft-sec { margin: 8px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 8px; background: var(--panel); }
.ft-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .ft-head h4 { margin: 0; font-size: 1rem; } .ft-head h4:focus { outline: none; }
.ft-search input { width: 100%; box-sizing: border-box; max-width: 28rem; }
.ft-area { display: grid; gap: 0; } .ft-area[hidden], .ft-row[hidden], .ft-none[hidden] { display: none; }
.ft-area > h5 { margin: 10px 0 2px; font-size: .95rem; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.ft-list { margin: 0; padding: 0; list-style: none; display: grid; } .ft-row { padding: 6px 0; border-top: 1px solid var(--line); }
.ft-lab { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); } .ft-lab input { width: 20px; height: 20px; margin: 0; flex: none; } .ft-name { overflow-wrap: anywhere; }
.ft-what { margin: 2px 0 0 28px; overflow-wrap: anywhere; }
.ft-confirm { margin: 4px 0; }
.ft-locked { margin-top: 12px; } .ft-locked summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; } .ft-locked li { padding: 4px 0; overflow-wrap: anywhere; }

/* ---- staff Help, logged requests (Lane Hp, 2026-10-10): the quick forms, the draft card, My requests (web/todo.js) and the admin team's To do cards (web/todolist.js). Tokens only: nothing here adds a colour. ---- */
.tdo-chips { margin: 8px 0; } .tdo-lead { margin: 4px 0; }
.tdo-form, .tdo-draft { margin: 8px 0 12px; padding: 14px; } .tdo-form label { margin-top: 10px; }
.tdo-err { display: block; color: var(--bad); font-size: 13px; margin-top: 2px; }
.tdo-lines { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 2px 12px; margin: 6px 0; font-size: 14px; } .tdo-lines dt { color: var(--mute); } .tdo-lines dd { margin: 0; overflow-wrap: anywhere; }
.tdo-what { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.tdo-reqs { display: grid; gap: 8px; margin: 8px 0; padding: 0; list-style: none; } .tdo-req { border: 1px solid var(--line); border-radius: var(--rad-m); padding: 10px 12px; min-width: 0; background: var(--panel); }
.tdo-r1 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .tdo-r2 { margin: 2px 0; overflow-wrap: anywhere; } .tdo-line { margin: 6px 0; line-height: 1.45; overflow-wrap: anywhere; }
.tdo-q { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; } .tdo-q p { margin: 0 0 4px; overflow-wrap: anywhere; } .tdo-q textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; }
.tdo-hints { margin: 6px 0 0; } .hlp-safety { margin: 8px 0 0; }
.tdo-dot { margin-left: 4px; } nav.sbar .tab { position: relative; } nav.sbar .tab .tdo-dot { position: absolute; top: 2px; left: calc(50% + 8px); margin: 0; padding: 0 6px; }
.tdo-cards { display: grid; gap: 10px; margin: 8px 0; padding: 0; list-style: none; } .tdo-card { border: 1px solid var(--line); border-radius: var(--rad-m); padding: 12px; min-width: 0; background: var(--panel); } .tdo-card.over { border-color: var(--bad); } .tdo-card.evc { border-left-width: 6px; }
.tdo-top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .tdo-chips-row, .tdo-top .tdo-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; } .tdo-name { font-size: 15px; } .tdo-who { color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }
.tdo-linked, .tdo-how { margin: 4px 0; overflow-wrap: anywhere; } .tdo-notes { margin: 4px 0; padding: 0; list-style: none; font-size: 13px; } .tdo-notes li { border: 0; padding: 2px 0; overflow-wrap: anywhere; }
.tdo-acts { margin: 8px 0 0; } .tdo-dlg { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; } .tdo-dlg textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; } .tdo-preview { overflow-wrap: anywhere; }
.tdo-f { margin: 8px 0; } .tdo-type { margin: 4px 0 8px; } .ibx-seg { margin: 0 0 8px; }.tls-fam { border-top: 1px solid var(--line); margin-top: 6px; } .tls-fam summary { cursor: pointer; font-weight: 650; padding: 8px 0; } .tls-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 6px 12px; align-items: end; padding: 8px 0; border-top: 1px solid var(--line); } .tls-name { grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; } .tls-row select, .tls-row input[type=number] { width: 100%; box-sizing: border-box; }

/* Lane Hp part 2: the assistant in the Help tab, and Setup's Help assistant card (no new colours: the Crewsy look of stage R2) */
.hlp-auto { font-size: 0.72rem; }
.hlp-quick { margin-top: 8px; flex-wrap: wrap; }
.hlp-busy { margin: 8px 0; }
.hai-topics { display: grid; gap: 4px; margin: 6px 0; }
.hai-topic { display: flex; align-items: center; gap: 8px; min-height: var(--ctl, 44px); }
.hai-test { margin-top: 8px; }

/* Lane Hp part 3: the manager side of the assistant: the summary line's chips and the Suggest a reply draft label in the Inbox, the suggested FAQ entries, Setup's usage bars and locked topics (no new colours: the Crewsy look of stage R2) */
.ibx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.ibx-draft { margin: 4px 0 8px; }
.fg-list { display: grid; gap: 12px; margin: 8px 0; padding: 0; list-style: none; }
.fg-gap { border: 1px solid var(--line); border-radius: var(--rad-m); padding: 12px; min-width: 0; background: var(--panel); }
.fg-gap input[type="text"], .fg-gap textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; }
.fg-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: 6px; }
.hai-locked { display: grid; gap: 2px; margin: 4px 0 8px; }
.hai-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--ctl, 44px); }
.hai-usage { display: grid; gap: 4px; margin: 6px 0; }
progress.hai-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: 5px; background: var(--soft); overflow: hidden; }
progress.hai-bar::-webkit-progress-bar { background: var(--soft); border-radius: 5px; }
progress.hai-bar::-webkit-progress-value { background: var(--accent); border-radius: 5px; }
progress.hai-bar::-moz-progress-bar { background: var(--accent); border-radius: 5px; }
progress.hai-bar.high::-webkit-progress-value { background: var(--warn); } progress.hai-bar.high::-moz-progress-bar { background: var(--warn); }
progress.hai-bar.full::-webkit-progress-value { background: var(--bad); } progress.hai-bar.full::-moz-progress-bar { background: var(--bad); }

/* PHONE M begin: the manager's phone shell (lane M, Kevin 2026-10-10). A manager on a phone or a tablet (under 1024 px) gets the team member's bottom bar (nav.sbar above), ONE top bar and ONE store pill. Token names are never renamed: values only.
   Everything here is under #app[data-shell="mgr"], html[data-mtop] or its own class names, so a computer's page is not touched. Lanes M2 to M5 add their rules only between their own markers below. */
header.mtop { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 8px; min-height: calc(52px + env(safe-area-inset-top, 0px)); margin: 0 calc(-1 * max(var(--gut), env(safe-area-inset-right, 0px))) 8px calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding: env(safe-area-inset-top, 0px) max(var(--gut), env(safe-area-inset-right, 0px)) 0 max(var(--gut), env(safe-area-inset-left, 0px)); background: var(--bg); border-bottom: 1px solid var(--line); }
[data-textsize="large"] header.mtop { margin-left: calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px)) / 1.15); margin-right: calc(-1 * max(var(--gut), env(safe-area-inset-right, 0px)) / 1.15); } [data-textsize="xlarge"] header.mtop { margin-left: calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px)) / 1.32); margin-right: calc(-1 * max(var(--gut), env(safe-area-inset-right, 0px)) / 1.32); }      /* the text size zooms the page (1.15, 1.32): the bar's own pull into the gutters is divided by it, so the bar still ends at the screen's edge and the page never scrolls sideways */
header.mtop .logo { grid-area: auto; flex: none; min-height: 44px; } header.mtop .logo img { height: 28px; }
header.mtop .msp { flex: 1 1 0; min-width: 0; } header.mtop.pushed .msp { display: none; }      /* (header.mtop: the board's event card has a div.mtop of its own: the top bar's rules never reach it) */
.macct { position: relative; flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--sel); border-color: var(--sel); color: var(--sel-ink); } .macct:hover { background: var(--sel); border-color: var(--sel); opacity: .9; }
.mav { font-size: 14px; font-weight: 700; letter-spacing: .02em; line-height: 1; } .mav.big { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--sel); color: var(--sel-ink); font-size: 18px; }
.mdot { position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--bg); }
.mback { flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin-left: -10px; padding: 0; border: 0; background: transparent; color: var(--ink); } .mback .si { width: 24px; height: 24px; }
.mtitle { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 1.2; font-weight: 700; }
nav.sbar .tab .fct-badge, nav.sbar .tab .ibx-badge, nav.sbar .tab .mbadge { position: absolute; top: 2px; left: calc(50% + 8px); margin: 0; padding: 0 6px; min-width: 20px; text-align: center; line-height: 1.5; }
nav.sbar .tab .mbadge.r { background: var(--urgent); color: var(--urgent-ink); }      /* Alerts is red when anything needs the person now; Forecast and Inbox stay amber (the chip's own yellow) */
#app[data-shell="mgr"] main#main { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }      /* room for the fixed bar (the body already keeps 48 px and the safe area) */
@media (min-width: 768px) { #app[data-shell="mgr"] { max-width: 600px; } }      /* a tablet: the same bar, in a 600 px centered panel (the bar's own rule is 600 px from 768 px up) */
html[data-mtop] { scroll-padding-top: calc(60px + env(safe-area-inset-top, 0px)); }      /* a field scrolled to is not left under the top bar */
#app[data-shell="mgr"] #msg:not(:empty) { top: calc(52px + env(safe-area-inset-top, 0px)); }      /* the result of a button is pinned under the top bar, not over it */
#app[data-shell="mgr"] .note.desk { background: transparent; padding: 4px 0; margin: 8px 0; font-size: 13px; color: var(--mute); }      /* the "Open this on a computer" line is one quiet line, not a gray box */
/* More (part 2): the profile card, On your phone, Computer only, the notes, Your view and This phone. Rows are mm-row: the board's event card has crew rows with a class of their own, which are never touched. */
.mmore { padding: 16px; } .mmore h3 { margin: 0 0 8px; } .mprof { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .mprof-t { min-width: 0; } .mprof-n { display: block; font-size: 18px; overflow-wrap: anywhere; } .mprof-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.mm-prof .seg.ssw.vmode { margin: 8px 0 0 -12px; }      /* in the profile card the switch sits under the name, its first word lined up with it (the button's own 12 px side padding is pulled back) */
.mm-sec { margin: 20px 0 0; } .mm-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.mm-card { list-style: none; margin: 0; padding: 0; overflow: hidden; } .mm-card > li { border-top: 1px solid var(--line); } .mm-card > li:first-child { border-top: 0; }
.mm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 400; } .mm-row:hover { background: var(--hover); }
.mm-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--soft); color: var(--ink); }
.mm-tx { flex: 1 1 auto; min-width: 0; } .mm-tx b { display: block; font-size: 16px; font-weight: 600; } .mm-tx small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--mute); overflow-wrap: anywhere; }
.mm-row .chip { flex: none; } .mm-go { flex: none; display: flex; color: var(--mute); } .mm-go .si { width: 22px; height: 22px; }
.mm-sets { padding: 4px 14px; } .mm-set { padding: 10px 0; border-top: 1px solid var(--line); } .mm-set:first-child { border-top: 0; } .mm-set-l { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.mm-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; background: transparent; border: 0; border-radius: 0; overflow: visible; } .mm-seg button { min-height: 44px; border: 1px solid var(--line2); border-radius: var(--rad-m); } .mm-seg button.on { border-color: var(--sel); }
.mm-out { width: 100%; min-height: 52px; margin: 16px 0 0; font-size: 16px; font-weight: 600; }
.mm-pop input[type=search] { width: 100%; font-size: 16px; min-height: 44px; margin: 8px 0; } .mm-people { margin: 0; padding: 0; list-style: none; } .mm-people li { border-top: 1px solid var(--line); } .mm-people .mm-row { min-height: 56px; padding: 6px 4px; } .mm-people .mm-tx b { display: flex; align-items: center; gap: 6px; } .mm-people .mm-tx small { margin-top: 0; }
/* lane X2 (review fixes, 2026-10-11): the text size is a root zoom (1.15, 1.32), and a viewport unit is resolved first and then multiplied by it, so anything capped in vh or dvh is divided by the zoom here */
[data-textsize="large"] .pop { max-height: calc(92vh / 1.15); max-height: calc(92dvh / 1.15); } [data-textsize="xlarge"] .pop { max-height: calc(92vh / 1.32); max-height: calc(92dvh / 1.32); }      /* a bottom sheet is never taller than the screen at Large and Larger text: its title and Close stay on it */
@media (min-width: 600px) { [data-textsize="large"] .ov { padding-block: calc(4vh / 1.15); } [data-textsize="xlarge"] .ov { padding-block: calc(4vh / 1.32); } }
nav.sbar .tab .fct-badge, nav.sbar .tab .ibx-badge, nav.sbar .tab .mbadge { left: calc(50% + 4px); white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: manual; }      /* a two or three character count (20, 99+) stays one pill at any text size, over the corner of its icon */
[data-textsize="large"] header.mtop .logo img { height: calc(28px / 1.15); } [data-textsize="xlarge"] header.mtop .logo img { height: calc(28px / 1.32); }      /* the logo is as wide on the screen at Larger text as at normal size, so it takes the same room as before */
@media (min-width: 768px) { [data-textsize="large"] nav.sbar { width: calc(600px / 1.15); } [data-textsize="xlarge"] nav.sbar { width: calc(600px / 1.32); } }      /* the 600 px panel is 600 px on the screen at any text size (the zoom made it 690 and 792) */
@media (max-height: 500px) and (orientation: landscape) { #app[data-shell="mgr"] header.mtop { position: static; } }      /* a phone held sideways: the top bar scrolls away and the Publish bar is a card at the end of the page, so the content has more than a strip between the bars */
/* PHONE M end */


/* PHONE M2 begin: Schedule on a phone (lane M2). Day, All stores and the Week list of a manager's phone (web/phone-sched.js, phone-day.js, phone-week.js, storesum.js). Every class is ms-: nothing here reaches a computer's board. */
.ms { display: grid; gap: 12px; min-width: 0; } .ms > * { min-width: 0; }
.ms-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ms-mode { flex: none; } .ms-mode button { min-height: 48px; min-width: 76px; padding: 0 14px; } .ms-arrow { flex: none; width: 44px; padding: 0; font-size: 24px; line-height: 1; } .ms-state { flex: none; margin-left: auto; }
.ms-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ms-d { position: relative; flex-direction: column; gap: 0; min-width: 0; min-height: 60px; padding: 4px 0 8px; border-radius: var(--rad-m); font-weight: 500; } .ms-d > span:not(.sr) { font-size: 12px; color: var(--mute); line-height: 1.3; } .ms-d b { font-size: 17px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ms-d.on { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); } .ms-d.on > span:not(.sr) { color: var(--sel-ink); }
.ms-dot { position: absolute; bottom: 4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; } .ms-dot.r { background: var(--urgent); } .ms-dot.y { background: var(--warn); } .ms-d.on .ms-dot { box-shadow: 0 0 0 3px var(--panel); }      /* the selected day is drawn on --sel: a ring of the page's panel colour puts the dot on a surface it has 3:1 against in both themes (amber and red on navy, or amber on off-white, did not) */
.ms-head { margin: 4px 0 0; } .ms-hl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; } .ms-hl .ms-date { flex: 1 1 auto; min-width: 0; } .ms-date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 22px; line-height: 1.2; } .chip.ms-today { background: var(--accent-soft); color: var(--ink); } .ms-sub { margin: 4px 0 0; font-size: 14px; color: var(--mute); }
.ms-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ms-tiles.one { grid-template-columns: minmax(0, 1fr); }
.ms-tile { min-width: 0; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); box-shadow: var(--sh1); } .ms-tile h3 { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.ms-big { margin: 4px 0 6px; font-size: 34px; line-height: 1.1; font-weight: 750; font-variant-numeric: tabular-nums; } .ms-pct { margin-left: 2px; font-size: 16px; font-weight: 600; color: var(--mute); } .ms-na { color: var(--mute); } .ms-warn { color: var(--warn); } .ms-bad { color: var(--bad); }
.ms-meter { display: block; flex: none; width: 100%; height: 10px; margin: 2px 0 8px; } .ms-meter .lbf { display: block; } .lbf.warn { background: var(--warn); }
.ms-tx { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mute); } .ms-dl { margin: 8px 0 0; padding: 6px 8px; border: 1.5px dashed var(--warn); border-radius: var(--rad-s); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--warn); }
.ms-open { overflow: hidden; background: var(--panel); border: 2px solid var(--warn); border-radius: var(--rad-l); } .ms-open.r { border-color: var(--urgent); }
.ms-oh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--warn-bg); } .ms-open.r .ms-oh { background: var(--bad-bg); } .ms-oh h3 { margin: 0; font-size: 18px; }
.ms-open .chip.r { background: var(--urgent); color: var(--urgent-ink); }
.ms-olist { margin: 0; padding: 0; list-style: none; } .ms-orow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-top: 1px solid var(--line); }
.ms-ot { flex: none; min-width: 74px; font-size: 15px; font-variant-numeric: tabular-nums; } .ms-ow { flex: 1 1 auto; min-width: 0; } .ms-ow b { display: block; font-size: 17px; line-height: 1.3; } .ms-ow small { display: block; font-size: 14px; color: var(--mute); overflow-wrap: anywhere; }
.ms-more { width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-weight: 650; }
.ms-go { display: flex; justify-content: space-between; gap: 12px; width: calc(100% + 28px); min-height: 56px; margin: -8px -14px; padding: 8px 14px; border: 0; border-radius: 0; background: transparent; text-align: left; font-weight: 400; }
.ms-fills { padding: 12px 14px; background: var(--soft); border-top: 1px solid var(--line); } .ms-fills h4 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); } .ms-fills p { margin: 0; } .ms-fbtn { width: 100%; margin-top: 8px; font-weight: 650; }
.ms-fs { margin-top: 12px; } .ms-fh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .ms-fh b { min-width: 0; } .ms-fl2 { margin: 8px 0 0; padding: 0; list-style: none; } .ms-fp { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line2); } .ms-fw { flex: 1 1 auto; min-width: 0; } .ms-fw small { display: block; font-size: 13px; color: var(--mute); }
.ms-ev, .ms-flags { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); } .ms-ev h3, .ms-flags h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; }
.ms-evl, .ms-fll { margin: 0; padding: 0; list-style: none; } .ms-evl li { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); } .ms-evw { flex: 1 1 auto; min-width: 0; } .ms-evw b { display: block; overflow-wrap: anywhere; } .ms-evw small { font-size: 14px; color: var(--mute); }
.ms-fll li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; } .ms-fll .chip { flex: none; margin-top: 1px; } .ms-fll li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ms-ok { margin: 0; padding: 10px 14px; border-radius: var(--rad-m); background: var(--good-bg); color: var(--good); font-size: 14px; font-weight: 600; } .ms-empty { margin: 4px 0; }
.ms-groups { display: grid; gap: 8px; } .ms-grp { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); }
.ms-gh { justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; text-align: left; font-weight: 400; } .ms-gt { min-width: 0; } .ms-gt b { display: block; font-size: 18px; } .ms-gt small { display: block; font-size: 14px; color: var(--mute); }
.ms-gh .si { flex: none; width: 22px; height: 22px; color: var(--mute); } .ms-grp.open .ms-gh .si { transform: rotate(180deg); }
.ms-pl { margin: 0; padding: 0; list-style: none; } .ms-p { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; border-top: 1px solid var(--line); }
.ms-av { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: 50%; background: var(--soft); font-size: 13px; font-weight: 700; } .ms-pw { flex: 1 1 auto; min-width: 0; } .ms-pw b { display: flex; align-items: center; gap: 6px; font-size: 16px; } .ms-pw small { display: block; font-size: 14px; color: var(--mute); } .ms-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .ms-pt { flex: none; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ms-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); color: var(--ink); text-align: left; text-decoration: none; font-weight: 400; } .ms-ri { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--soft); } .ms-ri .si { width: 24px; height: 24px; } .ms-rt { flex: 1 1 auto; min-width: 0; } .ms-rt b { display: block; font-size: 16px; } .ms-rt small { display: block; font-size: 13px; line-height: 1.35; color: var(--mute); }
.ms-row > .si, .ms-sh .si, .ms-go .si, .ms-wg .si { flex: none; width: 20px; height: 20px; color: var(--mute); }
.ms-wlist { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); }
.ms-wrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 46px auto 20px; align-items: center; gap: 8px; width: 100%; min-height: 64px; padding: 8px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; font-weight: 400; } .ms-wlist > .ms-wrow:first-child { border-top: 0; } .ms-wrow.today { background: var(--hover); }
.ms-wd b { display: block; font-size: 16px; } .ms-wd small, .ms-wm small, .ms-wc small { display: block; font-size: 12px; line-height: 1.3; color: var(--mute); } .ms-wm { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ms-wm .ms-meter { margin: 0; } .ms-wc b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .ms-wo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.ms-h4 { margin: 8px 0 0; } .ms-cards { display: grid; gap: 12px; }
.ms-sc { display: block; width: 100%; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); box-shadow: var(--sh1); text-align: left; font-weight: 400; } .ms-sc.r { padding: 11px 13px; border: 2px solid var(--urgent); } .ms-sc.y { padding: 11px 13px; border: 2px solid var(--warn); }
.ms-sh { display: flex; align-items: center; gap: 8px; } .ms-sh > b { flex: 1 1 auto; min-width: 0; font-size: 18px; } .ms-ss { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; } .ms-st b { display: block; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; } .ms-st small { display: block; font-size: 13px; color: var(--mute); } .ms-sf { display: block; margin-top: 8px; font-size: 14px; color: var(--ink); }
.ms-err { display: grid; gap: 8px; }
/* M2 part 2: the docked Publish bar, its sheet, an approver's questions and the shift sheet (web/phone-act.js, phone-sheets.js). The bar is fixed just above the bottom bar (nav.sbar: 8 px + 52 px tabs + 4 px + 1 px line + the safe area) and, from 768 px, in the same 600 px column. */
.ms.has-pub { padding-bottom: 96px; }
.ms-pub { position: fixed; left: 0; right: 0; bottom: calc(65px + env(safe-area-inset-bottom, 0px)); z-index: 29; display: flex; align-items: center; gap: 12px; padding: 10px max(var(--gut), env(safe-area-inset-right, 0px)) 10px max(var(--gut), env(safe-area-inset-left, 0px)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px -8px rgba(20, 26, 46, .18); }
@media (min-width: 768px) { .ms-pub { left: 50%; right: auto; width: 600px; transform: translateX(-50%); } }
.ms-pubt { flex: 1 1 auto; min-width: 0; } .ms-pubt b { display: block; font-size: 15px; line-height: 1.3; } .ms-pubt small { display: block; font-size: 13px; line-height: 1.35; color: var(--mute); }
.ms-pubb { flex: 0 1 42%; min-height: 48px; padding: 6px 12px; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: normal; }
.ms-pop .ms-sl { margin: 8px 0; font-size: 16px; line-height: 1.45; } .ms-pop .ms-gate { margin: 12px 0; } .ms-fail { margin: 6px 0 0; padding: 0 0 0 18px; } .ms-fail li { margin: 2px 0; font-size: 15px; line-height: 1.4; }
.ms-pop .ms-tl { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--mute); }
.ms-lab { display: block; margin: 12px 0 4px; font-size: 14px; font-weight: 600; } .ms-pop input[type=text], .ms-pop textarea { width: 100%; min-height: 44px; font-size: 16px; } .ms-pop textarea { min-height: 96px; resize: vertical; }
.ms-btns { display: grid; gap: 10px; margin: 16px 0 8px; } .ms-btns button { width: 100%; min-height: 52px; font-size: 16px; font-weight: 650; }
.ms-pubpop .ms-btns { position: sticky; bottom: 0; z-index: 1; margin: 12px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); }      /* the Publish sheet's buttons stay in view while the days below the line scroll */
@media (min-width: 600px) { .ms-pubpop .ms-btns { margin: 12px -24px -20px; padding: 12px 24px; } }
.ms-sub2 { margin: 0 0 12px; font-size: 14px; color: var(--mute); } .ms-ro { margin: 8px 0; font-size: 16px; } .ms-notero { margin: 0 0 8px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-nc { display: block; margin: 4px 0 0; font-size: 13px; color: var(--mute); } .ms-hrs { margin: 8px 0; } .ms-pop .cf { margin: 8px 0; }
.ms-desk { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border: 1.5px dashed var(--line2); border-radius: var(--rad-l); background: var(--soft); color: var(--mute); } .ms-desk .si { flex: none; width: 24px; height: 24px; } .ms-dt b { display: block; font-size: 16px; color: var(--ink); } .ms-dt small { display: block; font-size: 14px; line-height: 1.35; }
.ms-p { padding: 0; } .ms-pb { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 400; } .ms-pb:hover { background: var(--hover); }
.ms-wait { padding: 12px 14px; background: var(--panel); border: 2px solid var(--warn); border-radius: var(--rad-l); } .ms-wait h3 { margin: 0 0 4px; font-size: 16px; } .ms-wl { margin: 0; padding: 0; list-style: none; } .ms-wl li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--line); }
.ms-ww { flex: 1 1 140px; min-width: 0; } .ms-ww b { display: block; font-size: 16px; overflow-wrap: anywhere; } .ms-ww small { display: block; font-size: 14px; line-height: 1.35; color: var(--mute); } .ms-wb { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-nav { display: inline-flex; flex: none; gap: 8px; }      /* the two day arrows wrap together, never one on each line */
@media (min-width: 768px) { [data-textsize="large"] .ms-pub { width: calc(600px / 1.15); } [data-textsize="xlarge"] .ms-pub { width: calc(600px / 1.32); } }      /* (and the docked Publish bar, the same) */
@media (max-height: 500px) and (orientation: landscape) { #app[data-shell="mgr"] .ms.has-pub { padding-bottom: 0; } #app[data-shell="mgr"] .ms-pub { position: static; width: auto; transform: none; margin: 4px 0 0; border: 1px solid var(--line); border-radius: var(--rad-l); box-shadow: none; } }      /* (and the Publish bar is a card at the end of the page) */
/* PHONE M2 end */


/* PHONE M3 begin: Forecast on a phone (lane M3). Days and Suggestions of a manager's phone; every class starts with mf- (web/phone-fc.js). Token names are never renamed: values only. */
.mf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 12px; } .mf-h { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; } .mf-sub { text-align: right; font-size: 14px; line-height: 1.35; color: var(--mute); }
.mf-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 12px; } .mf-seg button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-size: 16px; font-weight: 600; }
.mf-wait { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--rad-l); background: var(--warn-bg); color: var(--ink); font-size: 15px; line-height: 1.35; } .mf-wait > span { min-width: 0; } .mf-wait button { flex: none; min-height: 44px; padding: 0 18px; }
.mf-gmnote { margin: 0 0 12px; padding: 12px; border-radius: var(--rad-l); background: var(--soft); font-size: 15px; line-height: 1.4; }
.mf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .mf-grp { margin: 18px 0 0; } .mf-grp:first-of-type { margin-top: 0; } .mf-gh { margin: 0 0 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.mf-day { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left; font-weight: 400; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--rad-l); } .mf-day:hover { background: var(--hover); }
.mf-dl b { display: block; font-size: 17px; line-height: 1.2; } .mf-dl small { display: block; color: var(--mute); font-size: 13px; }
.mf-dm { min-width: 0; } .mf-nl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; } .mf-num { font-size: 22px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; } .mf-day.big .mf-num { font-size: 28px; } .mf-num.none { font-size: 16px; font-weight: 600; color: var(--mute); }
.mf-why { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--mute); } .mf-why .si, .mf-r .si { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.mf-dr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .mf-dr small { font-size: 13px; color: var(--mute); white-space: nowrap; }
[data-textsize="large"] .mf-day, [data-textsize="xlarge"] .mf-day { grid-template-columns: 52px minmax(0, 1fr); } [data-textsize="large"] .mf-dr, [data-textsize="xlarge"] .mf-dr { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 10px; text-align: left; }
.mf-vs { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .mf-vs.up { color: var(--good); } .mf-vs.down { color: var(--bad); } .mf-vs.flat { color: var(--mute); }
.mf-dw { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: var(--rad-m); background: var(--warn-bg); color: var(--ink); font-size: 14px; line-height: 1.35; } .mf-dwt { min-width: 0; }
.mf-dw .chip { flex: none; white-space: nowrap; } .mf-snote { display: block; margin-top: 6px; overflow-wrap: anywhere; }
/* the count on Suggestions is the same badge as the Alerts chips and the Inbox segments: amber is waiting (a selected segment keeps the page's inverted .seg rule) */
.mf-seg .cnt { display: inline-block; min-width: 22px; margin-left: 0; padding: 0 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.mf-store { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; width: 100%; min-height: 44px; padding: 12px; text-align: left; font-weight: 400; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--rad-l); } .mf-store:hover { background: var(--hover); }
.mf-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mf-sh b { font-size: 18px; }
.mf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mf-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: var(--rad-m); background: var(--soft); } .mf-tile small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); } .mf-tile b { font-size: 18px; font-variant-numeric: tabular-nums; } .mf-tile .mf-vs { font-size: 13px; }
.mf-na { padding: 12px 14px; list-style: none; } .mf-na p { margin: 4px 0 0; }
.mf-intro { margin: 0 0 12px; font-size: 16px; line-height: 1.45; } .mf-sec { margin: 18px 0 0; } .mf-sec:first-child { margin-top: 0; }
.mf-sh2 { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .mf-ct { font-size: 13px; }
.mf-ch { padding: 12px 14px 14px; background: var(--panel); border: 1px solid var(--line2); border-left: 4px solid var(--urgent); border-radius: var(--rad-l); } .mf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .chip.mf-store-chip { background: transparent; border: 1px solid var(--line2); color: var(--ink); }
.mf-title { display: block; font-size: 17px; } .mf-vals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 6px; font-variant-numeric: tabular-nums; } .mf-old, .mf-new { font-size: 24px; line-height: 1.2; font-weight: 700; } .mf-dd { font-size: 15px; font-weight: 650; } .mf-dd.up { color: var(--good); } .mf-dd.down { color: var(--bad); }
.mf-r { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.mf-btns2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mf-btns2 button { min-height: 48px; font-size: 16px; } .mf-alink { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 4px; font-size: 16px; } .mf-gmw { margin: 0; }
.mf-small { padding: 10px 12px; } .mf-all { width: 100%; min-height: 48px; margin: 0 0 6px; font-size: 16px; } .mf-rows { list-style: none; margin: 0; padding: 0; }
.mf-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); } .mf-rt { flex: 1 1 auto; min-width: 0; } .mf-rt b { display: block; font-size: 16px; } .mf-rt small { display: block; font-size: 13px; line-height: 1.35; color: var(--mute); overflow-wrap: anywhere; }
.mf-ic { flex: none; width: 48px; min-width: 44px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .mf-ic .si { width: 22px; height: 22px; } .mf-ic.ok { color: var(--good); }
.mf-empty { padding: 16px 4px; font-size: 15px; line-height: 1.5; } .mf-err .note { margin: 0 0 8px; } .mf-desk { margin: 18px 4px 0; font-size: 13px; line-height: 1.4; color: var(--mute); }
.mf-pop p { margin: 8px 0; } .mf-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0; } .mf-bign { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .mf-bign.none { font-size: 20px; color: var(--mute); } .mf-big .mf-vs { font-size: 22px; }
.mf-wbox { margin: 8px 0; padding: 10px 12px; border-radius: var(--rad-m); background: var(--warn-bg); color: var(--ink); font-size: 15px; line-height: 1.4; } .mf-why2 h4 { margin: 12px 0 4px; } .mf-why2 p { margin: 0 0 4px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.mf-meals { list-style: none; margin: 12px 0 0; padding: 0; } .mf-meals li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); font-size: 16px; font-variant-numeric: tabular-nums; } .mf-meals li > span { min-width: 0; overflow-wrap: anywhere; }
.mf-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; } .mf-btns button { flex: 1 1 150px; min-height: 52px; font-size: 16px; font-weight: 650; } .mf-deskl { text-align: center; }
.mf-nlab { display: block; margin: 12px 0 4px; font-weight: 600; } .mf-pop textarea { width: 100%; min-height: 96px; font-size: 16px; }
/* PHONE M3 end */


/* PHONE M4 begin: Alerts on a phone (lane M4) */
/* Alerts on a manager's phone (web/phone-alerts.js): one list, one chip row, the same compact card for every kind. Classes are prefixed ma-; nothing here reaches outside its container (no negative margins), so the Larger text sizes never scroll the page sideways. */
.ma { min-width: 0; }
.ma-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.ma-ttl { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.ma-sum { margin-left: auto; text-align: right; font-size: 14px; line-height: 1.35; color: var(--mute); }
.ma-rl { flex: none; width: var(--ctl); height: var(--ctl); padding: 0; border-radius: 50%; }
.ma-rl .rfi { display: inline-block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-chipwrap { position: relative; margin: 0 0 12px; }
.ma-chipwrap::after { content: "\203A"; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 52px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; box-sizing: border-box; pointer-events: none; font-size: 28px; line-height: 1; font-weight: 700; color: var(--ink); background: linear-gradient(to left, var(--bg) 0, var(--bg) 38%, transparent); opacity: 0; } .ma-chipwrap.more::after { opacity: 1; }      /* the right fade and a chevron: drawn only while there is more to the right (phone-alerts.js sets .more); the chip under it is cut off cleanly, never an end that looks like a mistake */
.ma-chipwrap::before { content: "\2039"; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; width: 52px; display: flex; align-items: center; justify-content: flex-start; padding-left: 8px; box-sizing: border-box; pointer-events: none; font-size: 28px; line-height: 1; font-weight: 700; color: var(--ink); background: linear-gradient(to right, var(--bg) 0, var(--bg) 38%, transparent); opacity: 0; } .ma-chipwrap.scrolled::before { opacity: 1; }      /* the left fade: drawn only once the row is scrolled from its start (phone-alerts.js sets .scrolled) */
.ma-scope { white-space: nowrap; }
.ma-chips { position: relative; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px; scroll-padding-inline: 56px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ma-chips::-webkit-scrollbar { display: none; }
.ma-chip { flex: none; gap: 8px; padding: 0 14px; border-radius: 999px; font-weight: 650; white-space: nowrap; }
.ma-chip.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); } .ma-chip.on:hover { background: var(--sel); border-color: var(--sel); } .ma-chip.on::before { content: "\2713"; flex: none; margin-inline-end: 4px; font-weight: 700; }
.ma-chip.zero:not(.on) { color: var(--mute); font-weight: 550; }
.ma-cn { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--soft); color: var(--mute); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.ma-cn.r { background: var(--urgent); color: var(--urgent-ink); }
/* the chips' count: amber waiting, red urgent, grey none, inverted on the selected chip (the same badge as Forecast's Suggestions and the Inbox's segments); the segmented control is 48px high like theirs */
.ma-chip .ma-cn { display: inline-block; min-width: 22px; margin-left: 0; padding: 0 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.ma-chip .ma-cn.r { background: var(--urgent); color: var(--urgent-ink); } .ma-chip.zero .ma-cn { background: var(--soft); color: var(--mute); } .ma-chip.on .ma-cn:not(.r) { background: var(--sel-ink); color: var(--sel); }
.ma-seg { display: flex; width: 100%; margin: 0 0 12px; } .ma-seg button { flex: 1 1 0; min-width: 0; min-height: 48px; padding-inline: 6px; }
.ma-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.ma-sec.now > .ma-h, .ma-h.urgent { color: var(--bad); }
.ma-card { position: relative; min-width: 0; margin: 0 0 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); box-shadow: var(--sh1); }
.ma-card.now { border-left: 4px solid var(--urgent); }
.ma-card.wait { background: var(--soft); box-shadow: none; }
.ma-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.ma-tag { padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--mute); font-weight: 700; }
.ma-card.wait .ma-tag { background: var(--panel); }
.ma-store { padding: 2px 10px; border: 1px solid var(--edge); border-radius: 999px; color: var(--mute); }
.ma-when { margin-left: auto; text-align: right; color: var(--mute); }
.ma-card .ma-line { margin: 8px 0 2px; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
.ma-sub { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--mute); overflow-wrap: anywhere; }
.ma-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ma-act > button { flex: 1 1 0; min-width: 120px; }
.ma-own { margin: 0; font-size: 13px; color: var(--mute); }
.ma-held { margin: 0 0 12px; padding: 12px 14px 6px; border: 1px solid var(--warn); border-radius: var(--rad-m); background: var(--warn-bg); color: var(--ink); font-size: 14px; } .ma-held p { margin: 0; }
.ma-lk { display: inline-flex; min-height: var(--ctl); padding: 0 4px; border: 0; background: none; color: var(--accent); text-decoration: underline; font-weight: 650; } .ma-lk:hover { background: none; }
.ma-empty { padding: 28px 12px; text-align: center; color: var(--mute); } .ma-empty b { display: block; color: var(--ink); font-size: 16px; } .ma-empty p { margin: 4px 0 0; }
.ma-more { width: 100%; margin: 4px 0 12px; }
.ma-foot { margin: 8px 0 0; }
.ma-embed { min-width: 0; overflow-wrap: anywhere; } .ma-embed .pr-top { flex-wrap: wrap; } .ma-embed .pr-list { padding: 0; list-style: none; } .ma-embed button, .ma-embed select { min-height: var(--ctl); }
.ma-pop { max-width: 100%; } .ma-pop textarea { width: 100%; min-height: 96px; font-size: 16px; box-sizing: border-box; } .ma-pop input[type=text] { width: 100%; font-size: 16px; box-sizing: border-box; } .ma-note { display: block; margin: 10px 0 0; } .ma-note .ma-nl { display: block; margin: 0 0 4px; font-size: 13px; color: var(--mute); }
.ma-sheet-act { display: flex; gap: 8px; margin-top: 14px; } .ma-sheet-act > button { flex: 1 1 0; }
.ma-fl-h { margin: 6px 0 4px; }
.ma-cs { padding: 10px 0; border-top: 1px solid var(--line); } .ma-cs:first-of-type { border-top: 0; }
.ma-cs-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ma-cs-h > span { min-width: 0; } .ma-cs-h small { display: block; color: var(--mute); font-size: 13px; } .ma-cs-h > button { flex: none; }
.ma-cs-b { margin-top: 6px; min-width: 0; overflow-wrap: anywhere; } .ma-cs-b .hact button { min-height: var(--ctl); }
.ma-weekbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; } .ma-wk { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 16px; } .ma-wkb { flex: none; width: var(--ctl); height: var(--ctl); padding: 0; font-size: 24px; line-height: 1; }
.ma-pills { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ma-held.pin { margin-top: 0; } .ma-held .ma-sub { margin: 4px 0 2px; } .ma-held .ma-act { margin: 8px 0 10px; } .ma-held.ok { border-color: var(--good); background: var(--good-bg); }
.ma-card .ma-note { margin: 10px 0 0; } .ma-card .ma-note input { width: 100%; box-sizing: border-box; min-height: var(--ctl); font-size: 16px; } .ma-card > .ma-lk { margin-top: 6px; }
.ma-err { margin: 10px 0 0; color: var(--bad); font-size: 14px; line-height: 1.4; }
.ma-lead { margin: 0 0 4px; }
.ma-vt .vt-list { margin: 0 0 8px; } .ma-vt .vt-card { padding: 14px; border-radius: var(--rad-l); box-shadow: var(--sh1); } .ma-vt .vt-act { margin-top: 12px; } .ma-vt .vt-act > button { flex: 1 1 0; min-width: 120px; } .ma-vt .vt-row { min-height: var(--ctl); }
.ma-td .tdo-cards { margin: 0 0 8px; } .ma-td .tdo-card { padding: 14px; border-radius: var(--rad-l); box-shadow: var(--sh1); } .ma-td .tdo-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ma-td .tdo-acts > button { flex: 1 1 0; min-width: 100px; }
.ma-tdbar { display: flex; justify-content: flex-end; margin: 0 0 4px; } .ma-tdbar .ma-lk.on { color: var(--ink); }
.ma-rows { display: grid; } .ma-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left; } .ma-row.on { font-weight: 700; color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 2px var(--sel); border-radius: var(--rad-m); }
.ma-pop .vt-panel { margin: 0; padding: 0; border: 0; background: none; } .ma-pop .vt-panel[aria-label="Choose shifts"] > b { display: none; } .ma-pop .vt-cut { display: block; margin: 12px 0 0; } .ma-pop .vt-cut .x { all: unset; display: block; margin: 0 0 4px; font-size: 13px; color: var(--mute); } .ma-pop .vt-act { margin-top: 14px; } .ma-pop .vt-act > button { flex: 1 1 0; } .ma-pop .tdo-dlg { margin-top: 8px; padding-top: 0; border-top: 0; } .ma-pop .tdo-dlg .bar { display: flex; gap: 8px; } .ma-pop .tdo-dlg .bar > button { flex: 1 1 0; } .ma-pop select { width: 100%; min-height: var(--ctl); font-size: 16px; box-sizing: border-box; }
.ma-chip:focus-visible { outline-offset: -3px; }      /* the chip row scrolls, which cuts off a ring drawn outside the chip */
.ma-chip:focus-visible { position: relative; z-index: 2; }      /* a focused chip is drawn above both fades (its ring is never covered) and the row keeps 56 px clear of each edge when it scrolls a chip into view (scroll-padding-inline above) */
/* PHONE M4 end */


/* PHONE M5 begin: Inbox, Log and People on a phone (lane M5) */
/* Every class here starts with mi- and is used by the Inbox and the Store log screens of a manager's phone (web/phone-inbox-screen.js, web/phone-log.js). Tokens only; 44 px targets, 16 px fields. */
.mi, .mi-grp, .mi-th, .mi-log { min-width: 0; } .mi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; } .mi-h { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.mi-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--rad-m); } .mi-ic .si { width: 22px; height: 22px; } .mi-ic[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.mi-seg { display: flex; gap: 8px; margin: 0 0 10px; } .mi-sb { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 4px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; font-weight: 650; border-radius: var(--rad-m); } .mi-sb.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.mi-n { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; background: var(--warn-bg); color: var(--warn); font-variant-numeric: tabular-nums; } .mi-sb.on .mi-n { background: var(--sel-ink); color: var(--sel); }
.mi-fr { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; } .mi-fc { flex: 1 1 0; display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; justify-content: center; gap: 0 5px; min-width: max-content; min-height: 44px; padding: 4px 4px; font-size: 15px; font-weight: 650; line-height: 1.15; border-radius: var(--rad-m); } .mi-fc b { font-variant-numeric: tabular-nums; }
.mi-fc.on { background: var(--sel); color: var(--sel-ink); border: 2px solid var(--sel); } .mi-fc.on:not(.fun)::before, .mi-p-chip[aria-pressed="true"]::before, .mi-tap.on::before { content: "\2713"; flex: none; margin-inline-end: 4px; font-weight: 700; } .mi-fc.fun { flex: 0 0 44px; min-width: 44px; margin-left: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .mi-fc .si { width: 22px; height: 22px; }
.mi-scope { margin: 8px 4px 0; } .mi-empty { margin: 24px 4px; text-align: center; color: var(--mute); font-size: 16px; }
.mi-gh { display: flex; align-items: center; gap: 6px; margin: 16px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .mi-gh .si { width: 16px; height: 16px; }
.mi-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .mi-rows > li { border: 0; padding: 0; }
button.mi-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; align-items: start; width: 100%; min-width: 0; min-height: 56px; padding: 12px 14px; text-align: left; font-weight: 400; border-radius: var(--rad-l); background: var(--panel); border: 1px solid var(--line2); } button.mi-row.hot { border-left: 4px solid var(--urgent); }
.mi-r1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; } .mi-r1n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } .mi-r1n b { font-size: 17px; overflow-wrap: anywhere; } .mi-pin { display: inline-flex; color: var(--mute); } .mi-pin .si { width: 18px; height: 18px; } .mi-age { flex: none; padding-top: 3px; font-size: 13px; color: var(--mute); }
.mi-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; } .mi-r2 { font-size: 13px; color: var(--mute); overflow-wrap: anywhere; } .mi-r3 { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-embed { min-width: 0; } .mi-embed .tdo-f button { display: inline-flex; align-items: center; gap: 6px; } .mi-embed .tdo-card { padding: 12px; } .mi-embed .bar > .mute { flex-basis: 100%; }
.mi-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 2px; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; } .mi-name .chip { font-size: 12px; } .mi-sub { margin: 0 0 4px; font-size: 14px; color: var(--mute); overflow-wrap: anywhere; }
.mi-head { display: flex; align-items: flex-start; gap: 8px; } .mi-head .mi-name { flex: 1 1 auto; min-width: 0; } .mi-head .mi-bt.dots { margin-top: 2px; } .mi-btns { display: flex; gap: 8px; margin: 12px 0; } .mi-bt { flex: 0 1 auto; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; font-size: 15px; font-weight: 650; border-radius: var(--rad-m); } .mi-bt.own { flex: 1 1 0; } .mi-bt.dots { flex: none; width: 44px; padding: 0; }
.mi-bt .si { width: 18px; height: 18px; flex: none; } .mi-bt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mi-bt.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); } .mi-bt.urg.on { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.mi-info { margin: 0 0 12px; padding: 10px 12px; background: var(--warn-bg); color: var(--ink); border-radius: var(--rad-m); font-size: 14px; line-height: 1.45; }
.mi-msgs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; } .mi-msgs > li { border: 0; } .mi-m { min-width: 0; max-width: 94%; padding: 10px 12px; border-radius: var(--rad-l); background: var(--soft); color: var(--ink); }
.mi-m.staff { background: var(--accent-soft); justify-self: start; } .mi-m.bot { background: var(--soft); justify-self: start; } .mi-m.admin { background: var(--panel); border: 1px solid var(--line2); justify-self: end; } .mi-m.note { background: var(--warn-bg); max-width: 100%; justify-self: stretch; } .mi-m.system { background: transparent; max-width: 100%; padding: 2px 8px; text-align: center; color: var(--mute); font-size: 13px; justify-self: stretch; }
.mi-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--mute); } .mi-who b { color: var(--ink); font-size: 14px; } .mi-tx { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; font-size: 16px; } .mi-m.system .mi-tx { font-size: 13px; } .mi-mchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.mi-comp { margin: 0 0 8px; } .mi-clab { display: block; margin: 0 0 6px; font-weight: 650; } .mi-clab small { font-weight: 400; color: var(--mute); } .mi-comp textarea { display: block; width: 100%; box-sizing: border-box; min-height: 112px; font-family: inherit; font-size: 16px; }
.mi-cbar { display: flex; gap: 8px; margin-top: 8px; } .mi-send, .mi-sug { flex: 1 1 0; min-width: 0; min-height: 48px; font-size: 16px; font-weight: 650; } .mi-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--mute); }
.mi-srows { display: grid; gap: 8px; margin: 8px 0; } .mi-srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; text-align: left; font-size: 16px; font-weight: 400; border-radius: var(--rad-m); } .mi-srow.on { border: 2px solid var(--sel); background: var(--soft); color: var(--ink); font-weight: 400; }
.mi-sr-t { min-width: 0; } .mi-sr-t b { display: block; font-weight: 650; } .mi-sr-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--mute); } .mi-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge); } .mi-srow.radio { justify-content: flex-start; } .mi-srow.radio.on .mi-dot { border-color: var(--sel); background: radial-gradient(circle, var(--sel) 0 45%, transparent 50%); }
.mi-pop > p.mute { margin: 4px 0 8px; } .mi-sbtns { display: grid; gap: 8px; margin-top: 12px; } .mi-sbtns button { min-height: 52px; font-size: 16px; font-weight: 650; }
.mi-day { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 12px; } .mi-arrow { width: 48px; min-width: 48px; height: 48px; padding: 0; font-size: 26px; line-height: 1; } .mi-date { min-width: 8.5em; text-align: center; font-size: 17px; } .mi-readonly { margin: 0 0 12px; text-align: center; }
.mi-card { padding: 16px; margin: 0 0 12px; } .mi-card h3 { margin: 0 0 6px; font-size: 18px; } .mi-fcast { margin: 0 0 4px; font-weight: 600; } .mi-lab { margin: 14px 0 6px; font-size: 14px; font-weight: 650; color: var(--mute); } .mi-ro { margin: 0 0 4px; } .mi-by { display: block; margin-top: 6px; font-size: 12px; color: var(--mute); }
.mi-taps { display: flex; flex-wrap: wrap; gap: 8px; } .mi-tap { min-height: 48px; padding: 0 13px; font-size: 16px; font-weight: 600; border-radius: var(--rad-m); } .mi-tap.on, .mi-feel.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.mi-dp { padding: 10px 0; border-top: 1px solid var(--line); } .mi-dp:first-of-type { border-top: 0; } .mi-dph { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .mi-dph b { font-size: 16px; }
.mi-feels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mi-feel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 6px 4px; border-radius: var(--rad-m); } .mi-feel b { font-size: 17px; } .mi-feel small { font-size: 13px; color: var(--mute); } .mi-feel.on small { color: var(--sel-ink); }
.mi-card textarea { display: block; width: 100%; box-sizing: border-box; min-height: 5.5em; font-family: inherit; font-size: 16px; } .mi-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 4px 0 8px; font-size: 13px; } .mi-add { width: 100%; min-height: 48px; font-size: 16px; font-weight: 650; }
.mi-ents { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .mi-ent { border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 10px 12px; background: var(--panel); } .mi-eh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .mi-et { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .mi-del { min-height: 44px; margin-top: 8px; color: var(--bad); }
.mi-logline { margin: 12px 0 0; } .mi-loglink { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; text-align: left; font-size: 14px; font-weight: 400; border-radius: var(--rad-m); } .mi-loglink b { flex: none; font-size: 15px; } .mi-loglink span { min-width: 0; color: var(--mute); overflow-wrap: anywhere; }
/* People on a phone (lane M5 part 2: web/phone-people.js). Every class here starts with mi-p-. */
.mi-p, .mi-p-grp, .mi-p-prof { min-width: 0; } .mi-p [hidden], .mi-p-attopen [hidden] { display: none !important; }
.mi-p-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 4px 8px; } .mi-p-count { font-size: 14px; }
.mi-p-search { position: relative; margin: 0 0 8px; } .mi-p-search .si { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--mute); pointer-events: none; } .mi-p-search input { display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 12px 0 40px; font-size: 16px; }
.mi-p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; } .mi-p-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 650; border-radius: var(--rad-m); } .mi-p-chip .si { width: 16px; height: 16px; flex: none; } .mi-p-chip.on { background: var(--sel); color: var(--sel-ink); border: 2px solid var(--sel); }
.mi-p-att { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .mi-p-nph { margin: 4px 4px 0; } .mi-p-empty { margin: 24px 4px; text-align: center; color: var(--mute); font-size: 16px; }
.mi-p-gh { margin: 16px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
ul.mi-p-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line2); border-radius: var(--rad-l); background: var(--panel); overflow: hidden; } li.mi-p-li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px 0 0; border: 0; border-top: 1px solid var(--line); } li.mi-p-li:first-child { border-top: 0; }
button.mi-p-row { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; min-height: 64px; padding: 10px 6px 10px 12px; text-align: left; font-weight: 400; background: none; border: 0; border-radius: 0; box-shadow: none; }
.mi-p-av.sav { width: 44px; height: 44px; font-size: 15px; } .mi-p-av.sav.big { width: 64px; height: 64px; font-size: 22px; }
.mi-p-tx { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; } .mi-p-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 17px; font-weight: 650; overflow-wrap: anywhere; } .mi-p-sb, .mi-p-num { font-size: 14px; color: var(--mute); overflow-wrap: anywhere; } .mi-p-st { font-size: 14px; white-space: nowrap; } .mi-p-st.big { font-size: 22px; letter-spacing: 2px; }
.mi-p-call { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); text-decoration: none; } .mi-p-call .si { width: 22px; height: 22px; } .mi-p-call.off { border-style: dashed; color: var(--mute); opacity: .7; }
.mi-p-ph { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; } .mi-p-who { min-width: 0; } .mi-p-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; } .mi-p-sub { margin: 2px 0 0; font-size: 15px; color: var(--mute); overflow-wrap: anywhere; } .mi-p-pn { margin: 0 0 12px; font-size: 16px; color: var(--mute); }
.mi-p-cb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; } a.mi-p-cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--panel); color: var(--ink); font-size: 16px; font-weight: 650; text-decoration: none; } a.mi-p-cbtn.pri { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); } a.mi-p-cbtn .si { width: 20px; height: 20px; }
.mi-p-card { padding: 14px 16px; margin: 0 0 12px; } .mi-p-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; } .mi-p-ch h3 { margin: 0; font-size: 18px; }
.mi-p-pc { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 10px; border: 1px solid var(--line2); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mute); } .mi-p-pc .si { width: 16px; height: 16px; }
ul.mi-p-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } ul.mi-p-plain > li { margin: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--line); } ul.mi-p-plain > li:first-child { border-top: 0; padding-top: 0; } ul.mi-p-plain small { display: block; font-size: 14px; }
.mi-p-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mi-p-kv > span:first-child { min-width: 0; overflow-wrap: anywhere; } .mi-p-loc b { display: block; }
.mi-p-sk .stars { flex: 0 0 auto; margin: 0; }      /* SM1: the stars of a store on a phone's profile are three 52 px buttons (the .stars rule above), kept to the right of the job and the store */
ul.mi-p-days { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } li.mi-p-day { display: grid; gap: 2px; align-content: start; justify-items: center; min-width: 0; margin: 0; padding: 6px 2px; text-align: center; border: 0; border-radius: var(--rad-m); background: var(--soft); } li.mi-p-day b { font-size: 12px; font-weight: 650; color: var(--mute); } li.mi-p-day span { max-width: 100%; font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; } li.mi-p-day.off span { color: var(--mute); }
.mi-p-pend { margin: 4px 0 0; color: var(--warn); } .mi-p-term { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--rad-m); background: var(--bad-bg); color: var(--bad); }
button.mi-p-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px; text-align: left; font-size: 16px; font-weight: 400; border-radius: var(--rad-m); } button.mi-p-line .si { width: 18px; height: 18px; flex: none; color: var(--mute); } .mi-p-attopen { margin: 0 0 12px; } .mi-p-attopen > button.mi-p-line { margin: 0 0 8px; }
.mi-p-foot { margin: 8px 4px 16px; text-align: center; }
/* tap feedback (a row and the round call button keep their own background, so the page's lowest-weight :active rule does not reach them) */
button.mi-p-row:active, button.mi-p-line:active, a.mi-p-call:active { background: var(--hover); } a.mi-p-cbtn:active { background: var(--hover); transform: translateY(1px); } a.mi-p-cbtn.pri:active { background: var(--cta-press); }.mi-seg { overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px -3px 7px; } .mi-seg::-webkit-scrollbar { display: none; } .mi-sb { flex: 1 1 auto; flex-wrap: nowrap; white-space: nowrap; padding-inline: 4px; gap: 4px; } .mi-sb .mi-n { flex: none; white-space: nowrap; }
[data-textsize="large"] .mi-sb, [data-textsize="xlarge"] .mi-sb { font-size: 14px; padding-inline: 2px; }      /* the Inbox's three tabs: a label and its count always stay on ONE line (polish B 2026-10-11: the old wrap rule put a count on a second line at 375 px); the buttons size by their content and share what is left, and the row scrolls sideways before anything wraps */
.mi-sb:focus-visible { outline-offset: -3px; } .mi-sb.on:focus-visible { outline-color: var(--sel-ink); }      /* the segment row scrolls sideways, which cut a ring drawn outside a segment to its outer pixel (review 2026-10-11): the ring is drawn inside, as on .seg and the Alerts chips */
/* The filter row (Waiting, Mine, Urgent and the funnel; review 2026-10-11): a label and its count never part (nowrap, and a chip is never narrower than what it says). The three share the row equally while they fit, as the old fixed grid did; when they do not (Larger text, a three digit count) a whole chip, or the funnel, goes to a second line (it reflows, it never scrolls sideways or cuts a chip), and the funnel keeps the right edge. */
.mi-for { margin: 0 0 8px; font-size: 14px; line-height: 1.35; color: var(--mute); }
/* Working papers on a phone (lane WP1, papers.js): the card inside the phone's profile has its buttons side by side, and the viewer is the phone's sheet */
.mi-p-card .wp-file { margin-top: 0; } .mi-p-card .pf-actions > button, .mi-p-card .pf-actions > .btn { flex: 1 1 0; } .mi-p-card .pf-ro { margin-top: 10px; }
.mi-pop .wp-view { padding: 8px; } .mi-pop .wp-img { max-height: 50vh; }
/* PHONE M5 end */


/* PHONE M6 begin: Store health inside the phone shell (stage S1). The tab keeps its own sh- rules above; this is only what the shell changes, every selector under .sh-ph (the tab as a manager's phone draws it): no title in the top card (the top bar says it), the week stepper and Refresh on one row that wraps when the text is large. */
.sh-ph .sh-top { justify-content: space-between; flex-wrap: nowrap; }
.sh-ph .sh-top .sh-step { order: 0; width: auto; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; }
.sh-ph .sh-top .sh-refresh { order: 1; flex: none; }
.sh-ph .sh-step button { flex: none; }
.sh-ph .sh-weeklab { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }      /* the stepper is ONE row that fits at every width and text size: the dates give way (the week is also in the day strip under it), the buttons never wrap onto rows of their own */
.sh-ph .sh-thisrow { margin: 6px 12px 0; }      /* "This week" is a row of its own on a past week, never part of the stepper's row */
[data-textsize="large"] .sh-ph .sh-top2 .sh-days, [data-textsize="xlarge"] .sh-ph .sh-top2 .sh-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; overflow-x: visible; }      /* Larger text: all seven days stay in the card (the days give up their 44 px minimum width: the zoom already makes each one wider on the screen than a finger needs), never a strip that scrolls sideways with Sunday out of sight */
.sh-ph .sh-pcrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .sh-ph .sh-pcmain { flex: 1 1 auto; min-width: 0; } .sh-ph .sh-pcrow > .chip { flex: none; margin-top: 4px; }      /* the head card on a phone: the score, and the state chip on its own row */
.sh-ph .sh-tiles { align-items: start; }      /* a tile is as tall as its own words (two to a row, a tile never stretches to its neighbour's note) */
.sh-ph .sh-gstore { margin: 0 0 8px; }      /* Manage, goals, on a phone: the store the form edits is the pill's, said in words */
/* PHONE M6 end */


/* PHONE T1 begin: Team Status on a manager's phone (LF1, lane MORE, Kevin 2026-10-12: "team status should be available on mobile. At least deactivations and new staff"). Two sections of cards on one pushed screen under More (web/phone-terms.js); every rule is under .mts, so a computer's Team Status (the tm- and pf- rules above) is not touched. Token names are never renamed: values only. */
.mts { display: grid; gap: 12px; min-width: 0; } .mts > * { min-width: 0; }
.mts .mts-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.mts .mts-seg button { min-height: 44px; padding: 0 8px; border: 1px solid var(--line2); border-radius: var(--rad-m); font-size: 15px; font-weight: 600; } .mts .mts-seg button.on { border-color: var(--sel); }
.mts .mts-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: var(--rad-l); text-align: left; font-size: 16px; font-weight: 600; } .mts .mts-go small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--mute); } .mts .mts-go .si { flex: none; width: 22px; height: 22px; color: var(--mute); }
.mts .mts-group { margin: 0; } .mts .mts-h { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.mts .mts-intro { margin: 4px 4px 0; font-size: 13px; line-height: 1.4; color: var(--mute); }
.mts .mts-list { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.mts .mts-card { margin: 0; padding: 14px; }
.mts .mts-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; overflow-wrap: anywhere; } .mts .mts-head small { font-size: 13px; }
.mts .mts-stores { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.mts .mts-store { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.mts .mts-sn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 auto; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.mts .mts-react { flex: none; margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; }
.mts .mts-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mts .mts-line { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--mute); overflow-wrap: anywhere; }
.mts .mts-reason { margin: 8px 0 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.mts .mts-empty { margin: 0 4px; font-size: 14px; color: var(--mute); }
.mts .mts-pop .mts-ask { margin: 8px 0 12px; font-size: 16px; line-height: 1.45; } .mts .mts-pop .mts-btns { display: grid; gap: 10px; margin: 12px 0 8px; } .mts .mts-pop .mts-btns button { width: 100%; min-height: 52px; font-size: 16px; font-weight: 650; }
/* PHONE T1 end */
/* UI1 SHELL begin: the shell of the combined screens (UI1, Kevin 2026-10-12; review\UI1\BUILD-SPEC.md 2a, 2f): a counting team member's bar and More (web/staffmore.js, ui.js), the More dot on a manager's bar,
   and the computer's Inventory row above the kept frame (web/invshell.js). (Lane P2, 2026-10-13: the header's one store pill and its dropdown are gone; see the store bar at the end of this file.) Tokens only: no new colour. Nothing here is drawn for a person whose module is off. */
nav.sbar .tab .mdot { top: 4px; right: auto; left: calc(50% + 8px); width: 10px; height: 10px; }      /* the dot on More (a manager: something waits in the Inbox; a team member: a Help request changed) sits by the icon, like a number */
.invsubbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.invsub { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--rad-m); }
.invsub::-webkit-scrollbar { display: none; }
.invsub button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-right: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--ink); font-weight: 600; white-space: nowrap; }
.invsub button:last-child { border-right: 0; } .invsub button:hover { background: var(--hover); }
.invsub button.on { background: var(--sel); color: var(--sel-ink); } .invsub button.on:focus-visible { outline-color: var(--sel-ink); } .invsub button:focus-visible { outline-offset: -3px; }
.invsub .chip { margin-left: 6px; }
.invsubbar > .pri { flex: none; }
/* a counting team member's More: the profile line, Staffing or Account, and the two buttons pinned just above the bar (8 px + 52 px tabs + 4 px + 1 px line + the safe area); the page itself does not scroll at 375 x 812 */
.smo { max-width: 600px; margin: 0 auto; padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
.smo-prof { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; } .smo-prof .sav { width: 48px; height: 48px; font-size: 17px; }
.smo-pt { min-width: 0; } .smo-pt b { display: block; font-size: 18px; overflow-wrap: anywhere; } .smo-pt small { display: block; font-size: 13px; color: var(--mute); overflow-wrap: anywhere; }
.smo-card { list-style: none; margin: 0; padding: 0; overflow: hidden; } .smo-card > li { border-top: 1px solid var(--line); } .smo-card > li:first-child { border-top: 0; }
.smo-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 400; } .smo-row:hover { background: var(--hover); }
.smo-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--ink); }
.smo-tx { flex: 1 1 auto; min-width: 0; } .smo-tx b { display: block; font-size: 16px; font-weight: 600; } .smo-tx small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--mute); overflow-wrap: anywhere; }
.smo-row .chip { flex: none; } .smo-go { flex: none; display: flex; color: var(--mute); }
.smo-note { margin: 12px 4px 0; }
.smo-sets { padding: 4px 14px; } .smo-set { padding: 10px 0; border-top: 1px solid var(--line); } .smo-set:first-child { border-top: 0; } .smo-set-l { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.smo-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; background: transparent; border: 0; border-radius: 0; overflow: visible; } .smo-seg button { min-height: 44px; border: 1px solid var(--line2); border-radius: var(--rad-m); } .smo-seg button.on { border-color: var(--sel); }
.smo-out { width: 100%; min-height: 52px; margin: 16px 0 0; font-size: 16px; font-weight: 600; }
.smo-segs { position: fixed; z-index: 29; left: 0; right: 0; bottom: calc(65px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px; background: var(--bg); border-top: 1px solid var(--line); }
.smo-segs button { min-height: 48px; font-size: 16px; font-weight: 650; } .smo-segs button.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); } .smo-segs button.on:focus-visible { outline-color: var(--sel-ink); }
@media (min-width: 768px) { .smo-segs { left: 50%; right: auto; width: 600px; transform: translateX(-50%); } }
@media (min-width: 768px) { [data-textsize="large"] .smo-segs { width: calc(600px / 1.15); } [data-textsize="xlarge"] .smo-segs { width: calc(600px / 1.32); } }      /* (the text size is a root zoom: the 600 px panel stays 600 px on the screen, as the bar does) */
.smo-back { display: flex; align-items: center; gap: 4px; margin: 4px 0 8px -10px; } .smo-bk { flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); } .smo-bk .si { width: 24px; height: 24px; }
.smo-title { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 700; }
/* (UI1 review 2 SVD2-3) a computer with the Inventory module on has two more tabs (Home first, Inventory): the row keeps every tab inside the 1200 px page from 1200 px up (the design draws all of them), so each tab is a little narrower */
@media (min-width: 1024px) { nav.tabs:has(> .tab[data-t="home"]) > .tab { padding: 0 11px; } }
/* UI1 SHELL end */
/* UI1 ALERTS begin */
/* Alerts as ONE list of rows (Inventory ON; web/alertrows.js, web/phone-alerts.js, web/hub.js). Class prefix al1-: no ma- rule is added here. */
.al1-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); overflow: hidden; box-shadow: var(--sh1); }
.al1-row { all: unset; box-sizing: border-box; width: 100%; min-height: 64px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; cursor: pointer; color: var(--ink); background: var(--panel); }
.al1-row + .al1-row { border-top: 1px solid var(--line); }
.al1-row:hover { background: var(--hover); }
.al1-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.al1-row.urg { box-shadow: inset 4px 0 0 var(--urgent); }
.al1-ict { width: 40px; height: 40px; border-radius: var(--rad-m); background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.al1-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.al1-star { width: 16px; height: 16px; margin-right: 4px; vertical-align: -2px; fill: #f2b824; stroke: #5a4300; stroke-width: 1.2; stroke-linejoin: round; }
.al1-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al1-txt b { font-size: 15px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al1-line { font-size: 13px; line-height: 1.3; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al1-pill { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--mute); background: var(--soft); }
.al1-pill.red { color: var(--bad); background: var(--bad-bg); }
.al1-pill.amber { color: var(--warn); background: var(--warn-bg); }
.al1-pill.grey { color: var(--mute); background: var(--soft); }
.al1-pill.green { color: var(--good); background: var(--good-bg); }
.al1-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--rad-m); font-size: 14px; font-weight: 650; white-space: nowrap; color: var(--cta-ink); background: var(--cta); }
.al1-chev { width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.al1-pager { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.al1-pager .al1-pn { margin-right: auto; font-size: 14px; color: var(--mute); }
.al1-pager .al1-pb { min-width: 72px; }
.al1-muted { all: unset; box-sizing: border-box; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: var(--rad-m); font-size: 14px; line-height: 1.3; color: var(--mute); background: var(--soft); }
button.al1-muted { cursor: pointer; }
button.al1-muted:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.al1-empty { margin: 4px 0; padding: 16px 12px; border: 1px dashed var(--line2); border-radius: var(--rad-l); font-size: 15px; color: var(--mute); }
.al1.desk .al1-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.al1.desk .al1-head h2 { margin: 0; font-size: 22px; }
.al1.desk .al1-head > button { margin-left: auto; }
.al1-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.al1-split.one { grid-template-columns: minmax(0, 1fr); }
.al1-needs h3 { margin: 4px 0 8px; font-size: 16px; }
.al1-list.desk .al1-row { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
.al1-dfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; }
.al1-dfoot .al1-pager { margin: 0; }
.al1-dfoot .al1-pager .al1-pn { display: none; }
.al1-watch { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); padding: 10px 12px; box-shadow: var(--sh1); }
.al1-watch h3 { margin: 0 0 6px; font-size: 16px; }
.al1-wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; border-top: 1px solid var(--line); }
.al1-foot { margin: 8px 0 0; }
@media (max-width: 1023px) { .al1-split { grid-template-columns: minmax(0, 1fr); } }
/* UI1 ALERTS end */
/* UI1 REVIEW begin (2026-10-12, the fixer; review\UI1\RESULT.md): SVD-4 and SVD-11. Manager phone only (#app[data-shell="mgr"]); nothing here reaches a computer or a team member. */
/* SVD-4: while the kept Inventory frame shows, the empty main (only its hidden heading) and the top bar's gap give their room to the frame: it starts right under the top bar */
#app[data-shell="mgr"]:has(> #inv-keep:not([hidden])) main#main { padding-bottom: 0; }
#app[data-shell="mgr"]:has(> #inv-keep:not([hidden])) header.mtop { margin-bottom: 0; }
/* SVD-11: the phone's Alerts screen fills the space between the top bar and the bar, so the pager sits just above the bar ("buttons at the bottom"); a longer page still scrolls and the pager stays above the bar */
#app[data-shell="mgr"] .ma.al1 { display: flex; flex-direction: column; min-height: calc(100dvh - 144px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="large"] .ma.al1 { min-height: calc(100dvh / 1.15 - 144px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="xlarge"] .ma.al1 { min-height: calc(100dvh / 1.32 - 144px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"] .ma.al1 > .al1-pager { margin-top: auto; padding-top: 8px; position: sticky; bottom: calc(73px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
/* UI1 REVIEW end */
/* UI1 HOME begin: Home, a manager's first screen with the Inventory module on (lane HOME, Kevin 2026-10-12; review\UI1\BUILD-SPEC.md 2b; web/home.js). Every rule is under .uh; tokens only (the amber of a dot or a bar is the
   board's own --dot-soft). The phone: one fitted panel (the strip, at most three blocks, the foot just above the bar; nothing scrolls at 390 x 844 or 375 x 812). The computer: the strip, three tiles and one table. */
.uh { color: var(--ink); }
.uh.ph { display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin: 0 auto; }
#app[data-shell="mgr"] .uh.ph { min-height: calc(100dvh - 144px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="large"] .uh.ph { min-height: calc(100dvh / 1.15 - 144px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="xlarge"] .uh.ph { min-height: calc(100dvh / 1.32 - 144px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
.uh .uh-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-l); box-shadow: var(--sh1); padding: 12px 16px; }
.uh .uh-k { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: var(--mute); }
.uh .uh-k2 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.uh .uh-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin: -8px 0 -8px; }
.uh .uh-ch:not(:has(.uh-see)) { margin: 0; }
.uh .uh-chip, .uh .uh-pill { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 650; line-height: 1.35; white-space: nowrap; }
.uh .uh-chip.green, .uh .uh-pill.green { color: var(--good); background: var(--good-bg); }
.uh .uh-chip.amber, .uh .uh-pill.amber { color: var(--warn); background: var(--warn-bg); }
.uh .uh-chip.red, .uh .uh-pill.red { color: var(--urgent-ink); background: var(--urgent); }
.uh .uh-chip.grey, .uh .uh-pill.grey { color: var(--mute); background: var(--soft); }
.uh .uh-chip.today { color: var(--ink); background: var(--accent-soft); }
.uh .uh-dot { display: inline-block; width: 10px; height: 10px; margin: 0 6px 0 0; border-radius: 50%; vertical-align: 0; background: var(--edge); }
.uh .uh-dot.green { background: var(--good); } .uh .uh-dot.amber { background: var(--dot-soft); } .uh .uh-dot.red { background: var(--dot-hard); }
.uh .uh-chev { width: 18px; height: 18px; flex: none; color: var(--mute); }
/* the strip: what needs the person, and the one orange circle above the bar */
.uh .uh-strip { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: var(--rad-l); background: var(--panel); color: var(--ink); box-shadow: var(--sh1); }
.uh .uh-strip:hover { background: var(--hover); }
.uh .uh-strip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.uh .uh-strip.urg { box-shadow: inset 4px 0 0 var(--urgent), var(--sh1); }
.uh .uh-bell { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--rad-m); background: var(--soft); color: var(--ink); }
.uh .uh-strip.ok .uh-bell { color: var(--good); background: var(--good-bg); }
.uh .uh-rdot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--urgent); }
.uh .uh-st { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.uh .uh-l1 { font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.uh .uh-l2 { min-width: 0; font-size: 14px; line-height: 1.3; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh .uh-go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--cta-ink); background: var(--cta); }
.uh .uh-go .uh-chev { color: var(--cta-ink); width: 20px; height: 20px; }
/* labor against the goal */
.uh .uh-big { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.uh .uh-pct { flex: none; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.uh .uh-pct small { margin-left: 2px; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.uh .uh-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 15px; line-height: 1.3; }
.uh .uh-side b { font-size: 16px; font-weight: 700; }
.uh .uh-worst, .uh .uh-why { color: var(--mute); }
.uh .uh-why { font-size: 15px; line-height: 1.35; }
.uh p.uh-why { margin: 8px 0 0; }
.uh .uh-meter { display: block; flex: none; width: 100%; height: 10px; } .uh .uh-meter .lbf { display: block; } .uh .lbf.warn { background: var(--dot-soft); }
.uh .uh-dollars { margin: 10px 0 0; padding: 5px 12px; border: 2px dashed var(--dot-soft); border-radius: var(--rad-m); font-size: 15px; font-weight: 700; color: var(--warn); }
.uh .uh-halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 10px 0 0; }
.uh .uh-half .uh-pct { display: block; margin: 2px 0 10px; font-size: 36px; }
.uh .uh-hl { margin: 8px 0 0; font-size: 14px; line-height: 1.3; color: var(--mute); }
/* the stores, the ones to look at first */
.uh .uh-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0 2px; }
.uh .uh-see, .uh .uh-link { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 0 0 6px; font-size: 14px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.uh .uh-see:focus-visible, .uh .uh-link:focus-visible, .uh .uh-store:focus-visible, .uh .uh-orow:focus-visible, .uh .uh-more:focus-visible, .uh .uh-rowgo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.uh .uh-see:hover, .uh .uh-link:hover { text-decoration: underline; }
.uh .uh-stores { display: flex; flex-direction: column; gap: 8px; }
.uh .uh-store { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: var(--rad-l); background: var(--panel); color: var(--ink); box-shadow: var(--sh1); }
.uh .uh-store:hover, .uh .uh-orow:hover, .uh .uh-more:hover { background: var(--hover); }
.uh .uh-sn { min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh .uh-sl, .uh .uh-so { font-size: 13px; color: var(--mute); white-space: nowrap; }
.uh .uh-sl b { color: var(--ink); font-size: 15px; font-weight: 700; } .uh .uh-so b { color: var(--ink); font-size: 16px; font-weight: 700; } .uh .uh-so b.red { color: var(--bad); }
/* open shifts */
.uh .uh-open.urg, .uh .uh-gopen.urg { border: 2px solid var(--urgent); }
.uh .uh-nl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 2px; }
.uh .uh-n { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.uh .uh-tx { font-size: 15px; color: var(--mute); }
.uh .uh-line { margin: 2px 0 0; font-size: 14px; line-height: 1.35; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh .uh-none { margin: 8px 0 0; font-size: 15px; color: var(--mute); }
.uh .uh-gopen { padding: 0; overflow: hidden; }
.uh .uh-gh { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 16px; }
.uh .uh-gopen.urg .uh-gh { background: var(--bad-bg); } .uh .uh-gopen.urg .uh-gh .uh-k { color: var(--bad); }
.uh .uh-gopen .uh-none { margin: 0; padding: 0 16px 14px; }
.uh .uh-orow { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 8px 10px 8px 16px; border-top: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.uh .uh-ot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uh .uh-ot b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uh .uh-ot span { font-size: 14px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh .uh-more { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 16px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 650; color: var(--ink); }
.uh .uh-err .uh-retry { min-height: 44px; margin: 8px 0 0; }
.uh .uh-foot { display: flex; align-items: center; margin: auto 0 0; font-size: 14px; color: var(--mute); }
/* the computer: the title with its "?", the date line, the strip on one line, three tiles, one table */
.uh.desk { display: flex; flex-direction: column; gap: 16px; }
.uh .uh-dh { display: flex; align-items: center; gap: 10px; } .uh .uh-dh h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.uh .uh-help { width: var(--ctl); min-width: var(--ctl); height: var(--ctl); padding: 0; border-radius: 50%; font-weight: 700; }
.uh .uh-tip { margin: -8px 0 0; padding: 8px 12px; max-width: 72ch; border-radius: var(--rad-m); font-size: 14px; color: var(--ink); background: var(--soft); }
.uh .uh-date { margin: -10px 0 0; font-size: 14px; color: var(--mute); }
.uh .uh-strip.desk { min-height: 52px; gap: 14px; }
.uh .uh-strip.desk .uh-l1 { flex: none; }
.uh .uh-strip.desk .uh-l2 { flex: 1 1 auto; padding: 4px 0 4px 14px; border-left: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.uh .uh-u { color: var(--bad); }
.uh .uh-oa { flex: none; font-size: 15px; font-weight: 700; }
.uh .uh-tiles { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 16px; align-items: stretch; }
.uh .uh-tile { display: flex; flex-direction: column; min-width: 0; }
.uh .uh-tile .uh-link { margin-top: auto; padding: 0; min-height: var(--ctl); align-self: flex-start; font-size: 14px; }
.uh .uh-cogs { border-style: dashed; }
.uh .uh-cg { margin: 8px 0 2px; } .uh .uh-cv { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; } .uh .uh-star { margin-left: 2px; font-size: 18px; } .uh .uh-cp { font-size: 20px; font-weight: 700; color: var(--mute); }
.uh .uh-table { padding: 0; overflow: hidden; }
.uh .uh-th { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 20px 10px; } .uh .uh-th h3 { margin: 0; font-size: 17px; }
.uh .uh-m { font-size: 14px; color: var(--mute); }
.uh .uh-tw { overflow-x: auto; }
.uh .uh-tbl { width: 100%; border-collapse: collapse; }
.uh .uh-tbl th, .uh .uh-tbl td { height: 48px; padding: 4px 20px; border-top: 1px solid var(--line); text-align: left; font-size: 15px; font-weight: 400; white-space: nowrap; }
.uh .uh-tbl thead th { height: 40px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.uh .uh-tbl tbody th { font-weight: 700; }
.uh .uh-go-c { width: 64px; text-align: right; }
.uh .uh-rowgo { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: var(--ctl); height: var(--ctl); border-radius: var(--rad-m); }
.uh .uh-rowgo:hover { background: var(--hover); }
.uh .uh-tfoot { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
/* (UI1 review 2 SVD2-8) the phone keeps the approved mock's type scale (review\design-combined\combined-phone.css: .tile .big 30 px, the open shifts 21 px, the side text 13 px, cards 8 / 12 px); the computer keeps its own */
.uh.ph .uh-card { padding: 8px 12px; }
.uh.ph .uh-gopen { padding: 0; }
.uh.ph .uh-pct { font-size: 30px; }
.uh.ph .uh-pct small { font-size: 16px; }
.uh.ph .uh-half .uh-pct { margin: 2px 0 8px; font-size: 30px; }
.uh.ph .uh-side { font-size: 13px; }
.uh.ph .uh-side b { font-size: 14px; }
.uh.ph .uh-why { font-size: 13px; }
.uh.ph .uh-n { font-size: 21px; }
.uh.ph .uh-tx { font-size: 13px; }
/* UI1 HOME end */
/* UI1 MORE begin (UI1 lane MORE, Kevin 2026-10-12; review\design-combined\REVISION-v9.md, review\UI1\BUILD-SPEC.md 2d): the small Manager view | My view switch (a grey track, a white chip, navy text, no orange), More as two panes (Phone | Account) pinned above the bar,
   and Team Status as one list of rows (web/more.js, web/phone-terms.js). Names mm-, mts- and the switch's own classes. Tokens only: no new colour. */
/* ---- the switch (v9 .vswitch): a 28 px grey track, the side that is on a 24 px white chip with navy text, each option a 44 px touch box (40 on a computer); the markup, words and ids are the page's own ---- */
.seg.ssw.vmode { position: relative; isolation: isolate; display: flex; width: fit-content; max-width: none; gap: 0; margin: 2px 0 2px auto; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.seg.ssw.vmode::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 14px); height: 28px; border-radius: 999px; background: var(--soft); z-index: -2; }
.seg.ssw.vmode button { position: relative; flex: 0 0 auto; min-height: var(--ctl); padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--mute); background: transparent; background-color: transparent; border: 0; border-radius: 999px; }
.seg.ssw.vmode button:not(.on):hover { background-color: transparent; color: var(--ink); }
.seg.ssw.vmode button.on { color: var(--ink); background: transparent; background-color: transparent; border: 0; }
.seg.ssw.vmode button.on::before { content: ""; position: absolute; left: 2px; right: 2px; top: calc(50% - 12px); height: 24px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh1); z-index: -1; }
.seg.ssw.vmode button.on:focus-visible { outline-color: var(--focus); }
.mm-prof.mmore { padding: 10px 14px; } .mm-prof .mprof-s { margin-top: 2px; } .mm-prof .mprof { align-items: flex-start; margin: 0; } .mm-prof .mprof-t { flex: 1 1 auto; min-width: 0; }`n.mm-prof .seg.ssw.vmode { margin: -6px 0 -9px -2px; }      /* in the profile card the switch sits in the second column under the name and its chips, the track lined up with them; the 44 px touch box overlaps the room above and below it, so the card stays about 100 px tall */
/* ---- More: two panes (Phone | Account) and the two buttons pinned above the bar ---- */
.mm { position: relative; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }      /* (SM1: the Phone | Account buttons that were pinned above the bar are gone, so the page keeps no room for them) */
.mm-pane[hidden] { display: none; }
.mm-pane .mm-sec { margin-top: 10px; } .mm-pane .mm-h { margin: 0 0 4px 4px; line-height: 1.2; }
.mprof-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mprof-row .mprof-n { flex: 1 1 auto; min-width: 0; }
.mm-acct { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; min-height: 44px; margin: -6px -6px -6px 0; padding: 0 6px 0 12px; font-size: 15px; font-weight: 650; }      /* the Account button of the profile card: at the right end of the name's row, 44 px high (its box overlaps the room above and below, so the card stays about as tall as it was) */
.mm-acct .si { width: 18px; height: 18px; flex: 0 0 auto; }
.mm-card.mm-dense .mm-row { min-height: 56px; gap: 10px; padding: 6px 12px; } .mm-card.mm-dense .mm-ic { width: 40px; height: 40px; } .mm-card.mm-dense .mm-tx small { font-size: 12px; } .mm-card.mm-dense .mm-go .si { width: 20px; height: 20px; }      /* eight rows (Kevin's More with Store health): 56 px each, so the list never scrolls at 390 x 844 or 375 x 812 */
.mm-card.mm-denser .mm-row { min-height: 48px; padding: 3px 12px; } .mm-card.mm-denser .mm-ic { width: 36px; height: 36px; }      /* nine rows (Kevin's and Erick's More with the Events row of lane EV1): 48 px each, still more than the 44 px of a tap, so the list does not scroll at 375 x 812 */
.mm-pane { position: relative; max-height: calc(100dvh - 52px - 8px - 65px - 4px - 2 * env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }      /* below about 740 px of height a pane scrolls inside itself, never the page. position: relative (lane NH1, review NH1-R1): the screen-reader-only text of a row's number chip (.sr, absolute) is placed against the pane, so it scrolls and is clipped with it; against .mm (outside the pane) it stuck out of the clipped pane and made the page itself scroll once ten rows ran past the fold on a short phone */
/* ---- Team Status (web/phone-terms.js): the row of tabs, the title row, one card of rows, Show all and the foot (TS2: nothing is pinned above the bar any more: the two buttons moved to the row of tabs at the top and the pager became Show all) ---- */
.mts .mts-main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.mts .mts-titlerow { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.mts .mts-deact { min-height: 44px; padding: 0 18px; border-radius: var(--rad-m); font-size: 16px; font-weight: 650; background: var(--cta); color: var(--cta-ink); border-color: var(--cta); } .mts .mts-deact:hover { background: var(--cta-hover); border-color: var(--cta-hover); } .mts .mts-deact:active { background: var(--cta-press); border-color: var(--cta-press); }
.mts .mts-note { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.mts .mts-foot { margin: 10px 0 0; font-size: 14px; color: var(--mute); } .mts .mts-rows + .mts-note { margin: 10px 0 0; }
.mts .mts-empty { margin: 8px 4px; font-size: 15px; color: var(--mute); }
.mts .mts-rows { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.mts .mts-r { padding: 12px 14px; min-height: 72px; border-top: 1px solid var(--line); } .mts .mts-r:first-child { border-top: 0; }
.mts .mts-r1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mts .mts-nm { font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.mts .mts-pill { flex: none; max-width: 64%; margin-left: auto; font-size: 13px; text-align: center; white-space: normal; }
.mts .mts-r2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 4px; }
.mts .mts-ln { flex: 1 1 140px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--mute); overflow-wrap: anywhere; }
.mts .mts-act { flex: none; min-height: 44px; min-width: 44px; padding: 0 16px; font-size: 15px; font-weight: 650; }
.mts .mts-rb { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 80px; padding: 12px 14px; cursor: pointer; color: var(--ink); } .mts .mts-rb:hover { background: var(--hover); } .mts .mts-rb:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.mts .mts-rt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mts .mts-rt .mts-r1, .mts .mts-rt .mts-r2 { margin: 0; }
.mts .mts-r3 { font-size: 14px; color: var(--mute); overflow-wrap: anywhere; }
.mts .mts-chev { flex: none; display: flex; color: var(--mute); } .mts .mts-chev .si { width: 22px; height: 22px; }
.mts .mts-h1row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 2px 10px; }
.mts .mts-h1 { margin: 0; font-size: 20px; line-height: 1.2; } .mts .mts-sub { font-size: 14px; color: var(--mute); text-align: right; }
.mts .mts-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--warn-bg); color: var(--warn); }
.mts .mts-n.z { background: var(--soft); color: var(--mute); }      /* a tab with nothing in it (0), still being read (...) or not read (?): the number is there, but it is not asking for anybody */
/* ---- TS2 (2026-10-13): the phone's row of tabs at the top of Team Status (the same .tabs / .tab the manager's row uses: orange bar under the tab that is on), a list that could not be read, and a pair of Possible duplicates as a card ---- */
.mts .mts-tabs { margin: 0; } .mts .mts-tabs .tab { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; padding: 0 12px; font-size: 16px; } .mts .mts-tabs .tab.on .mts-n.z { color: var(--ink); }
.mts .mts-lerr { display: grid; justify-items: start; gap: 8px; margin: 8px 4px; } .mts .mts-lerr .pf-bad { margin: 0; font-size: 16px; font-weight: 650; } .mts .mts-lerr .small { margin: 0; font-size: 14px; } .mts .mts-lerr button { min-height: 44px; min-width: 88px; font-size: 16px; font-weight: 650; }
.mts .mts-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mts .mts-pair { margin: 0; padding: 14px; display: grid; gap: 10px; min-width: 0; }
.mts .mts-pp { display: grid; gap: 2px; min-width: 0; } .mts .mts-pp + .mts-pp { border-top: 1px solid var(--line); padding-top: 10px; }
.mts .mts-pair .mts-line { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mute); overflow-wrap: anywhere; }
.mts .mts-pair .mts-blocked { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }      /* what is attached, said in full: why this pair cannot be merged (a phone reads the pairs only: question TS2-1) */
.mts .mts-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 10px 2px 0; } .mts .mts-more .small { font-size: 14px; } .mts .mts-more button { min-height: 44px; min-width: 88px; padding: 0 16px; font-size: 16px; font-weight: 650; }      /* "Showing 5 of 265" and Show all / Show 5 under a list */
/* ---- the sheets of Team Status: Mark welcomed, the question before a store is brought back and the Deactivate sheet ---- */
.mts .mts-lab { margin: 14px 0 6px; font-size: 15px; font-weight: 650; }
.mts .mts-pop input[type=search] { width: 100%; font-size: 16px; min-height: 44px; margin: 0 0 8px; }
.mts .mts-people { margin: 0; padding: 0; list-style: none; max-height: 42dvh; overflow-y: auto; overscroll-behavior: contain; } .mts .mts-people li { border-top: 1px solid var(--line); }
.mts .mts-pr { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 4px; cursor: pointer; color: var(--ink); } .mts .mts-pr:hover { background: var(--hover); } .mts .mts-pr:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.mts .mts-wt { flex: 1 1 auto; min-width: 0; } .mts .mts-wt b { display: flex; align-items: center; gap: 6px; font-size: 16px; overflow-wrap: anywhere; } .mts .mts-wt small { display: block; font-size: 14px; color: var(--mute); overflow-wrap: anywhere; }
.mts .mts-who { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: var(--rad-l); background: var(--panel); }
.mts .mts-chg { flex: none; margin-left: auto; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font-weight: 650; text-decoration: underline; }
.mts .mts-fs { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; } .mts .mts-fs legend { margin: 0 0 6px; padding: 0; font-size: 15px; font-weight: 650; }
.mts .mts-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mts .mts-tick { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--panel); font-size: 16px; font-weight: 600; } .mts .mts-tick input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.mts .mts-f { display: grid; gap: 6px; margin: 12px 0 0; font-size: 15px; font-weight: 650; } .mts .mts-two > .mts-f { margin-top: 12px; }
.mts .mts-f input, .mts .mts-f select, .mts .mts-f textarea { width: 100%; min-height: 44px; font-size: 16px; font-weight: 400; }
.mts .mts-red { margin: 12px 0 0; font-size: 15px; font-weight: 650; color: var(--bad); }
.mts .mts-err { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--rad-m); font-size: 15px; font-weight: 650; background: var(--bad-bg); color: var(--bad); }
.mts .mts-mute { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--mute); }
.mts .mts-q { margin: 8px 0 6px; font-size: 17px; }
.mts .mts-pop .mts-ask { margin: 8px 0 12px; font-size: 16px; line-height: 1.45; } .mts .mts-pop .mts-btns { display: grid; gap: 10px; margin: 12px 0 8px; } .mts .mts-pop .mts-btns button { width: 100%; min-height: 52px; font-size: 16px; font-weight: 650; }
/* UI1 MORE end */
/* STORE BAR begin (lane P2, Kevin 2026-10-13: no store button in the header; web/storebar.js). A screen that depends on a store carries its own control inside the screen: chips (the .schips row People always had) from 600 px up, a menu on a phone (.loc-sel, shown by the
   shared phone rules above), or, for a person with one store, the store's name. Tokens only. */
.scrstore { margin: 0 0 6px; }
.scrstore .schips { margin: 0; }
.scrstore .loc-sel { margin: 0; }
.scrstore.one { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; color: var(--mute); }
.scrstore.one .si { width: 18px; height: 18px; flex: none; }
.scrstore.one b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 650; }
.scrstore .scr-ask { margin: 6px 0 0; font-size: 14px; font-weight: 650; color: var(--ink); }
@media (max-width: 599px) { .scrstore .loc-sel select { width: 100%; font-size: 16px; min-height: 44px; } }
/* The phone's Home fills the screen (its foot is docked above the bottom bar by the min-height rules of .uh.ph above): the store bar above it takes its own height off, 50 px for the menu (44 + 6) and 38 px for a fixed store name (32 + 6). The row heights of the pinned board header are not touched. */
#app[data-shell="mgr"] .scrstore ~ .uh.ph { min-height: calc(100dvh - 194px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"] .scrstore.one ~ .uh.ph { min-height: calc(100dvh - 182px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="large"] .scrstore ~ .uh.ph { min-height: calc(100dvh / 1.15 - 194px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="large"] .scrstore.one ~ .uh.ph { min-height: calc(100dvh / 1.15 - 182px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="xlarge"] .scrstore ~ .uh.ph { min-height: calc(100dvh / 1.32 - 194px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
#app[data-shell="mgr"][data-textsize="xlarge"] .scrstore.one ~ .uh.ph { min-height: calc(100dvh / 1.32 - 182px - env(safe-area-inset-top, 0px) - 2 * env(safe-area-inset-bottom, 0px)); }
/* STORE BAR end */
/* Setup as tabs (lane S2, Kevin 2026-10-13; web/setuptabs.js): one row of tabs and the cards of the tab chosen under it. The row is of the same family as the other screens' choosers (navy with white text when chosen, never orange text),
   44 px tall, and it scrolls sideways inside its own box when the window is narrow. The small number on a tab is how many of its cards need a look (amber), red when one of them could not be read. */
.su-tabs { position: relative; display: flex; flex-wrap: nowrap; gap: 6px; margin: 4px 0 16px; padding: 2px 0 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.su-tabs::-webkit-scrollbar { display: none; }
.su-tab { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--panel); color: var(--ink); font-weight: 600; white-space: nowrap; }
.su-tab:hover { background: var(--soft); border-color: var(--edge); }
.su-tab:focus-visible { outline-offset: -3px; }
.su-tab.on, .su-tab.on:hover { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.su-tab.on:focus-visible { outline-color: var(--sel-ink); }
.su-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 650; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; }
.su-n.r { background: var(--bad-bg); color: var(--bad); }
.su-panel[hidden] { display: none; }
.su-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 16px; }
/* On a computer (1024 px and up, where Setup is drawn at all) the eight tabs are two even lines of four, never one long line: with Kevin's numbers on the tabs one line was 1,305 px in a column of at most 1,200, its scrollbar is hidden, and
   the last tabs were cut off with nothing to say there were more (S2-1). A name that does not fit its column (a larger text size) wraps inside its tab. Under 1024 px Setup is not drawn (it says it is for a computer), so the scrolling line above is only a fallback. */
@media (min-width: 1024px) {
  .su-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  .su-tab { justify-content: center; min-width: 0; padding: 0 12px; text-align: center; white-space: normal; }
}
/* Setup as tabs end *//* ---- Working papers (lane WP1, Kevin 2026-10-14): the card on a profile, the file chooser, the viewer. Tokens only, so light and dark both follow the app. The small picture on the card is an icon, never the paper itself. ---- */
.wp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; } .wp-top h3 { margin: 0; }
.wp-line { margin: 0 0 8px; }
.wp-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 2px 0 4px; }
.wp-thumb { width: 72px; height: 72px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--soft); overflow: hidden; display: block; } .wp-thumb svg, .wp-thumb img { display: block; width: 100%; height: 100%; } .wp-thumb img { object-fit: cover; }
.wp-name { display: block; font-weight: 600; overflow-wrap: anywhere; } .wp-meta { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; overflow-wrap: anywhere; }
.wp-pic-page { fill: var(--panel); stroke: var(--line2); stroke-width: 2; } .wp-pic-dot { fill: var(--line2); }
.wp-pdf-page { fill: var(--panel); stroke: var(--line2); stroke-width: 2; } .wp-pdf-fold { fill: var(--soft); stroke: var(--line2); stroke-width: 2; } .wp-pdf-tag { fill: var(--ink); } .wp-pdf-txt { fill: var(--panel); font-family: var(--font); }
.wp-card .pf-actions { margin-top: 10px; } .wp-card .pf-ro, .wp-card .pf-bad { margin-top: 10px; }
.wp-pick { position: relative; } .wp-pick:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }      /* the real file box sits inside the label, clipped away: a keyboard stops on it, a tap or a click on the label opens the picker with no script */
.wp-prev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 4px 0 6px; padding: 10px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--soft); } .wp-prev .wp-thumb { width: 120px; height: 120px; background: var(--panel); }
.wp-bar { display: grid; gap: 4px; margin: 8px 0 2px; font-size: 12px; color: var(--mute); } .wp-bar progress { width: 100%; height: 8px; accent-color: var(--sel); }
.wp-hist { margin: 12px 0 0; padding: 0; } .wp-hist summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; color: var(--mute); } .wp-hist ul { margin: 0; padding: 0; list-style: none; }
.wp-hist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; } .wp-hist li > span { min-width: 0; overflow-wrap: anywhere; } .wp-hist li small { display: block; color: var(--mute); }
.wp-view { margin: 8px 0 10px; padding: 14px; border-radius: var(--rad-m); background: var(--soft); border: 1px solid var(--line); display: grid; place-items: center; } .wp-view.pdf { background: var(--line2); padding: 8px; }
.wp-img { display: block; max-width: 100%; max-height: 70vh; height: auto; border-radius: 4px; box-shadow: var(--sh2); } .wp-frame { display: block; width: 100%; height: 70vh; min-height: 320px; border: 0; border-radius: 4px; background: var(--panel); } .wp-wait { margin: 24px 0; } .wp-view .wp-wait { color: var(--ink); font-size: 14px; text-align: center; }      /* the line said where a PDF cannot be shown: on the viewer's soft background the muted grey is only 4:1 */
.wp-vtop { margin: 0; }
@media (pointer: coarse), (max-width: 600px) { .wp-hist summary, .wp-hist li button { min-height: var(--ctl); } .wp-frame { height: 60vh; } }
/* Working papers end */
/* ---- the Changes log (Schedule, Board | Changes; web/changes.js, Kevin 2026-10-14): computer only, view only. Tokens only: both themes follow the app. ---- */
.chg-top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 6px; }
.chg-lead { margin: 0 0 8px; font-size: 13px; }
.chg-pub { margin: 10px 0 12px; font-size: 15px; line-height: 1.5; }
.chg-pub b { font-weight: 650; }
.chg-bar { margin: 8px 0 2px; }
.chg-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 4px 0 4px; }
.chg-filters .schips { margin: 0; flex: 1 1 560px; }
.chg-filters .schips button .ibx-n { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .85; }
.chg-filters .schips button.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.chg-search { min-width: 14rem; }
.chg-search input { width: 100%; box-sizing: border-box; }
.chg-count { margin: 6px 0 4px; font-size: 13px; }
.chg-none { margin: 10px 0 0; }
.chg-top .small { flex: 1 1 24rem; }
.chg-empty { text-align: center; padding: 32px 12px 36px; }
.chg-empty b { display: block; font-size: 18px; margin-bottom: 4px; }
.chg-empty p { max-width: 56ch; margin: 0 auto; }
.chg-stores { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 12px 0 0; }
.chg-st-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); font-weight: 650; margin-right: 2px; }
.stc { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.stc b { font-weight: 650; }
details.chg-day { border: 1px solid var(--line); border-radius: var(--rad-m); margin: 10px 0; background: var(--panel); }
details.chg-day > summary { cursor: pointer; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 15px; list-style: none; min-height: 44px; box-sizing: border-box; }
details.chg-day > summary::-webkit-details-marker { display: none; }
details.chg-day > summary::before { content: "\25B8"; color: var(--mute); font-size: 13px; width: 12px; flex: none; }
details.chg-day[open] > summary::before { content: "\25BE"; }
details.chg-day > summary .mute { font-size: 13px; }
details.chg-day[open] > summary { border-bottom: 1px solid var(--line); }
.chg-day .scroll { border: 0; padding: 0 6px 6px; }
table.chg { width: 100%; min-width: 1000px; }
table.chg.allst { min-width: 1080px; }
table.chg th { white-space: nowrap; font-size: 12px; }
table.chg td { vertical-align: top; }
table.chg td small, table.chg th small { display: block; color: var(--mute); font-size: 12px; }
table.chg td.tm { white-space: nowrap; width: 78px; font-variant-numeric: tabular-nums; }
table.chg td.chg-st { white-space: nowrap; width: 96px; font-weight: 650; }
table.chg td.chg-who { min-width: 9.5rem; }
table.chg td.wh { min-width: 20rem; }
table.chg td.ppl { min-width: 8rem; }
table.chg td.tx { min-width: 12rem; }
.chg .sub { display: flex; gap: 8px; align-items: baseline; margin: 0 0 6px; }
.chg .sub:last-child { margin-bottom: 0; }
.chg .sub .chip { flex: none; min-width: 4.6rem; text-align: center; }
.chg .sub > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.chg .who-sys { font-weight: 650; }
.chg .pp { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; }
.chg .pp + .pp { margin-left: 10px; }
.chg .pp .pf-u18 { vertical-align: middle; }
.chg .openx { color: var(--mute); font-size: 13px; }
.chg .cst { font-size: 13px; color: var(--mute); line-height: 1.4; }
.chg .cst small { display: block; }
.chg .cst.sent { color: var(--good); }
.chg .cst.wait { color: var(--warn); font-weight: 650; }
.evtag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border: 1px solid var(--line2); border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 12px; font-weight: 650; white-space: nowrap; margin-top: 4px; }
.chg .chip.evdef { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.chg-day .evline { margin: 0 0 6px 0; }
.chg .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px 5.4rem; max-width: 42rem; }
.chg .ba > div { border: 1px solid var(--line); border-radius: var(--rad-m); padding: 6px 10px; background: var(--soft); font-size: 13px; line-height: 1.45; }
.chg .ba > div.after { background: var(--panel); box-shadow: inset 3px 0 0 var(--sel); }
.chg .ba h5 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); font-weight: 650; }
.chg .ba b { font-weight: 650; }
.chg .ba .none { color: var(--mute); }
/* Republish (stage B): the waiting rows, the Republish bands of the log, Unpublished changes, the summary dialog and the To do card's note. Tokens only: the app's own colours in both themes. */
.tiles .tile.wait b { color: var(--warn); }
.chg tr.wt td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.chg tr.chg-rep td { background: var(--soft); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
.chg tr.chg-rep td:first-child { box-shadow: inset 3px 0 0 var(--sel); }
.chg tr.chg-rep td b { font-weight: 650; }
.chg tr.chg-rep td.chg-st { font-weight: 650; }
.pend { box-shadow: inset 4px 0 0 var(--warn), var(--sh1); }
.pend .pend-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 4px; }
.pend .pend-h h2 { margin: 0; font-size: 18px; }
.pend-lead { margin: 4px 0 10px; font-size: 14px; max-width: 72ch; }
.pend-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .pend-grid { grid-template-columns: minmax(0, 1fr); } }
.pend h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pplist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--rad-m); }
.pplist li { padding: 8px 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.pplist li:first-child { border-top: 0; }
.pplist .nm { font-weight: 650; display: inline-flex; align-items: center; gap: 4px; }
.pplist .nm .pp { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
.pplist .ln { display: block; margin: 0 0 3px; font-size: 14px; }
.pplist .ln:last-child { margin-bottom: 0; }
.pplist .ln .chip { margin-right: 6px; }
.pplist small { display: block; color: var(--mute); }
.pplist li.open { background: var(--soft); }
.pend .pend-act { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 0; }
.pend .pend-act .mute { font-size: 13px; }
.pend .pend-who { margin: 8px 0 0; font-size: 13px; }
.pend-note { margin: 8px 0 0; }
.asknote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px dashed var(--line2); border-radius: var(--rad-m); background: var(--soft); font-size: 14px; margin: 12px 0 0; }
.asknote .si { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pend-stores li.pst { grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 900px) { .pend-stores li.pst { grid-template-columns: minmax(0, 1fr); } }
.pend-stores .pst button { justify-self: end; }
#rp-pop.pop.xwide { width: min(1000px, 100%); max-height: none; flex: none; }      /* lane CH1's Republish dialog only: the Events Fill panel (#ev-fill-pop, lane EV1) is a .pop.xwide too and must keep .pop's own max-height, so that it scrolls inside and its footer stays at the bottom of the dialog */
.rp-sub { margin: 2px 0 8px; color: var(--mute); font-size: 14px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 6px; }
@media (max-width: 860px) { .rp-grid { grid-template-columns: minmax(0, 1fr); } }
.rp-grid h4 { margin: 0 0 4px; }
.rp-grid .pplist + h4 { margin-top: 12px; }
.rp-pick { display: inline-flex; align-items: center; min-height: 28px; }
.rp-pick input { width: 20px; height: 20px; accent-color: var(--sel); margin: 0 6px 0 0; }
.rp-why { color: var(--warn); }
.rp-days { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--rad-m); }
.rp-days li { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.rp-days li:first-child { border-top: 0; }
.rp-days b { display: block; font-size: 13px; margin-bottom: 2px; }
.rp-days .ln { display: block; margin: 0 0 2px; }
.rp-text { background: var(--soft); border-radius: var(--rad-m); padding: 10px 12px; margin: 6px 0 0; font: 13px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); max-width: 34ch; }
.rp-silent { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); }
.rp-silent input { width: 22px; height: 22px; accent-color: var(--sel); flex: none; margin-top: 2px; }
.rp-silent b { display: block; }
.rp-silent small { color: var(--mute); font-size: 13px; }
.rp-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line2); }
.rp-foot .l { display: grid; gap: 2px; font-size: 13px; }
.rp-foot .r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-check { margin: 10px 0 0; font-size: 13px; }
.chg-tdnote { margin: 0 0 8px; }
/* end of the Changes log */
/* ---- Permissions (web/features.js, web/permtabs.js, web/invsetup.js; Kevin 2026-10-14, the Setup access screens): the tabs under each person, the Inventory tab, the access card and its dialog. Tokens only: nothing here adds a colour. ----
   The tab row IS the app's own tab row (.tabs and .tab above): nothing about the tab is restyled. Only three small things are added: the outer spacing (the row sits inside a card), the dots, and the divider before Inventory.
   Dots, after the name: quiet = something in the tab differs from the level's defaults (saved); amber = changes not saved on that tab, or waiting to reach Inventory; red = Inventory did not accept the last save. */
.ac-card ul.ac-list { max-width: none; } .ac-card .ac-inv { margin: 2px 0 4px; } .ac-invteam { margin-top: 18px; }
.pm-sec { gap: 10px; }
.pm-top { align-items: center; } .pm-top h4 { flex: 1 1 auto; min-width: 0; }
.pm-search { margin: 0 0 0 auto; } .pm-search input { width: 260px; max-width: 100%; }
.pm-tabs.tabs { margin: 2px 0 4px; padding-inline: 0; }
.tab .pm-dot { margin-left: 6px; } .tab .pm-dot + .sr + .pm-dot { margin-left: 4px; }
.pm-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sel); }
.pm-dot.pm-warn { background: var(--dot-soft); } .pm-dot.pm-bad { background: var(--dot-hard); }
.pm-sep { flex: none; width: 1px; margin: 10px 10px; background: var(--line2); }
.pm-panel { display: grid; gap: 4px; padding-top: 4px; } .pm-panel[hidden], .iv-pop[hidden] { display: none; } .pm-panel:focus-visible { outline-offset: 2px; }
.pm-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; } .pm-h { margin: 0; font-size: 1.05rem; }
.pm-na { padding: 12px 14px; border: 1px dashed var(--line2); border-radius: var(--rad-m); background: var(--soft); font-size: 14px; margin: 6px 0 4px; max-width: 80ch; }
.pm-locklist { margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; } .pm-locklist li { padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.pm-names { margin: 2px 0 0; padding: 0; list-style: none; } .pm-names li { padding: 6px 0; border-top: 1px solid var(--line); color: var(--mute); font-size: 14px; }
.pm-zero { margin: 6px 0 2px; font-size: 13px; }
.ft-row.draft { background: var(--soft); box-shadow: inset 3px 0 0 var(--sel); margin-inline: -8px; padding-inline: 8px; }      /* the shading reaches 8 px past the list, so the words keep the column of the other rows */
.pm-save { display: grid; gap: 4px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); } .pm-save .pf-actions { margin-top: 0; } .pm-save .pf-sub { margin: 2px 0 0; }
/* the quick view (Changed from the defaults) is a panel in the page, above the tab row, so the tabs stay in sight and nothing is covered or clipped */
.iv-chgbtn { cursor: pointer; border: 0; min-height: 28px; min-width: 0; padding: 2px 12px; }
.iv-pop { padding: 12px 14px; background: var(--soft); border: 1px solid var(--line2); border-radius: var(--rad-m); text-align: left; } .iv-pop h4 { margin: 0 0 4px; font-size: 1rem; } .iv-pop .pf-actions { margin-top: 10px; }
.iv-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.iv-cmp th, .iv-cmp td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.iv-cmp thead th { border-top: 0; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); } .iv-cmp tbody th { font-weight: 550; }
.pm-qgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px 28px; align-items: start; } .pm-qg { margin: 10px 0 0; }
.pm-qgh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.pm-qg .iv-cmp { margin-top: 2px; table-layout: fixed; } .pm-qg .iv-cmp th:nth-child(2), .pm-qg .iv-cmp td:nth-child(2) { width: 84px; } .pm-qg .iv-cmp th:nth-child(3), .pm-qg .iv-cmp td:nth-child(3) { width: 112px; } .pm-qg .iv-cmp .chip { white-space: nowrap; }
/* the Inventory tab: the three controls on top, then one box a row: its name on the left, the 3-state control (or the word of a 2-state box) on the right */
.iv-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 16px 28px; align-items: start; padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.iv-blk { min-width: 0; margin: 0; padding: 0; border: 0; } .iv-blk h5 { margin: 0 0 6px; font-size: .95rem; } .iv-blk .seg { margin: 0; } .iv-blk .pf-sub { margin: 8px 0 0; }
.iv-blk.pf-apply legend { font-size: .95rem; font-weight: 650; color: var(--ink); margin: 0 0 6px; padding: 0; } .iv-blk .pf-radio b { font-weight: 650; }
.iv-row { display: grid; grid-template-columns: minmax(0, 1fr) 272px; column-gap: 16px; align-items: center; }
.iv-row .iv-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .iv-row .iv-r { justify-self: end; display: flex; align-items: center; }
.iv-row .iv-what { grid-column: 1 / -1; margin: 2px 0 0 28px; max-width: 80ch; } .iv-row .iv-nm { padding-left: 28px; } .iv-row .ft-name { font-size: 14px; }
.iv-seg button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.iv-word { font-size: 13px; color: var(--mute); min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
.iv-row.draft { background: var(--soft); box-shadow: inset 3px 0 0 var(--sel); margin-inline: -8px; padding-inline: 8px; }
@media (max-width: 760px) { .iv-top { grid-template-columns: minmax(0, 1fr); } .iv-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .iv-row .iv-r { justify-self: start; } .pm-search { margin-left: 0; } }
@media (pointer: coarse), (max-width: 600px) { .iv-seg button, .iv-chgbtn { min-height: var(--ctl); } .iv-blk .pf-radio { min-height: var(--ctl); } }
/* the profile's Crewsy access card, the Permissions card under it, and the dialog of Allow manager access (the dialog is the app's own .ov and .pop) */
.pa-card .pa-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 2px; font-size: 14px; } .pa-card .pa-sign { margin: 4px 0 0; }
.pa-card .pf-actions { margin-top: 10px; } .pa-card .pf-actions + .pf-sub { margin-top: 6px; } .pa-perm .pm-sec { margin-top: 4px; }
#ac-dlg.pop.wide { max-height: none; } @media (min-width: 600px) { #ac-dlg.pop.wide { width: min(780px, 100%); } }
#ac-dlg > .pf-apply, #ac-dlg > .pf-field, #ac-dlg > .pf-check { margin: 8px 0 0; } #ac-dlg .ac-pick .pf-sub { margin: 0; } #ac-dlg .pf-field input { width: 100%; box-sizing: border-box; max-width: none; }
.ga-prev { margin: 12px 0 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--soft); } .ga-prev h4 { margin: 0 0 4px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 6px 0 4px; padding: 0; list-style: none; }
.ga-grid li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 13px; } .ga-grid li > span { min-width: 0; }
.ga-grid li > b { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; } .ga-grid li > b.ga-none { font-weight: 500; font-style: italic; color: var(--mute); }
@media (max-width: 600px) { .ga-grid { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse), (max-width: 600px) { #ac-dlg .pf-radio { min-height: var(--ctl); } }
/* OL2 begin (lane OL2, Kevin 2026-10-15: Sign in with: Work email | Phone number. The app's own tokens only; light and dark follow the app.) */
.ga-via { margin: 8px 0 0; } .ga-via .seg { margin: 0; justify-self: start; } .ga-via .seg button { min-width: 150px; }
.pf-radio.pa-off { background: var(--soft); }
.ga-phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rad-m); } .ga-phone b { font-weight: 650; font-variant-numeric: tabular-nums; }
.ga-fix { margin: 2px 0 0; } .ga-fix .link { font-size: 13px; }
.ac-via { margin-inline-start: auto; }
@media (pointer: coarse), (max-width: 600px) { .ga-via .seg button { min-height: var(--ctl); } .ga-fix .link { min-height: var(--ctl); } }
/* OL2 end */
/* TS3 begin (lane TS3, Kevin 2026-10-14: the Tripleseat status of an event is shown to managers on its shifts, quietly for Tentative and Definite, with a warning on Prospect only; web/evstatus.js draws it). Colours are the existing tokens only:
   the warning is the amber pair --warn on --warn-bg (the same pair as a yellow chip, 4.5:1 or better in the light and the dark theme), never orange text, and it is a shape and words as well as a colour (a triangle mark and the word Prospect).
   No font size is set here: the status takes the size of the place it sits in (a board box, a card, a phone row). In a board box with two shifts in one day only the mark is kept (the words are in the tooltip and the screen-reader text). */
.evst { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: baseline; white-space: nowrap; line-height: 1.3; }
.evst .evst-t { overflow: hidden; text-overflow: ellipsis; }
.evst .ic { width: 12px; height: 12px; flex: none; color: inherit; }
.evst-q { font-weight: 400; color: var(--mute); }
.evst-w { padding: 1px 6px; border: 1px solid var(--warn); border-radius: 999px; font-weight: 650; background: var(--warn-bg); color: var(--warn); }
.sh .evs { display: block; align-self: flex-start; max-width: calc(100% - 28px); margin: 1px 0 0 3px; line-height: 1.2; }      /* left, and short of the note, lock and event marks in the corner (.ics), so the two never overlap */
.sh .evs .evst-w { gap: 2px; padding: 0 3px; }
.sh .evs .ic { width: 9px; height: 9px; }
.sh .evs .evst-q { color: var(--pt); }
.stk.two .sh .evs .evst-q, .stk.two .sh .evs .evst-t { display: none; }
.stk.two .sh .evs .evst-w { padding: 0 2px; border-radius: 4px; }
.oc .evst { margin-left: 3px; }
.ohead .evst, .item .evst, .plain-list .evst { margin-left: 4px; }
.ms-pw > .evst, .ms-evw > .evst, .ms-ow > .evst { margin-top: 2px; align-self: flex-start; }
.ms-pw > .evst, .ms-evw > .evst, .ms-ow > .evst { white-space: normal; align-items: flex-start; }      /* on a phone the whole warning is kept: it wraps inside its pill, it is never cut with three dots */
.ms-pw > .evst-w, .ms-evw > .evst-w, .ms-ow > .evst-w { border-radius: 10px; }
.ms-pw > .evst .evst-t, .ms-evw > .evst .evst-t, .ms-ow > .evst .evst-t { white-space: normal; overflow: visible; text-overflow: clip; }
.ms-pw > .evst .ic, .ms-evw > .evst .ic, .ms-ow > .evst .ic { margin-top: 2px; }
.mcard .bar .evst { margin-left: 8px; }
/* TS3 end */
/* EV1 begin (lane EV1, Kevin 2026-10-14: the Events tab, step 1: the list, the event page, the phone cards and the Setup box; web/events.js). The class names and rules are the approved pictures' (handoff\review\EVENTS-TAB\mock\events-mock.css and events-mock2.css), tokens only: no colour of its own, so light and dark follow the app.
   Orange stays on the primary button, the active tab and the dot on More; Definite is a navy-outline chip, a picked row is grey with a navy edge, only Prospect is amber. */
.evh1 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; margin: 0; font-weight: 700; text-wrap: balance; }
.ev-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ev-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 12px 0 8px; }
.ev-filters .stack { margin: 0; }
.ev-filters .stack select { min-width: 12rem; }
.ev-filters .check { min-height: var(--ctl); }
.ev-filters .seg button .n { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .8; }
.ev-count { margin: 0 0 6px; font-size: 13px; }
.chip.evdef { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.evwarn { color: var(--warn); font-weight: 650; }
.evwarn::before { content: "\26A0\FE0E "; }
/* the events table */
.evt { width: 100%; min-width: 1000px; }
.evt th { white-space: nowrap; }
.evt td { vertical-align: top; }
.evt tr.need td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.evt tr.done td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.evt td small, .evt th small { display: block; color: var(--mute); font-size: 12px; }
.evt td small.evwarn { color: var(--warn); font-size: 13px; }
.evt .evname, .evc .evname { all: unset; box-sizing: border-box; cursor: pointer; font-weight: 650; font-size: 15px; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.evt .evname:hover, .evc .evname:hover { text-decoration-color: var(--brand); }
.evt .evname:focus-visible, .evc .evname:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.evt td:nth-child(2) { white-space: nowrap; }
.evt td .chip { white-space: nowrap; }
.evmeter { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
progress.evp { width: 84px; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--soft); accent-color: var(--sel); appearance: none; -webkit-appearance: none; flex: none; }
progress.evp::-webkit-progress-bar { background: var(--line2); border-radius: 999px; }
progress.evp::-webkit-progress-value { background: var(--sel); border-radius: 999px; }
progress.evp::-moz-progress-bar { background: var(--sel); }
progress.evp.full::-webkit-progress-value { background: var(--good); }
progress.evp.full::-moz-progress-bar { background: var(--good); }
.evt td.act { text-align: right; white-space: nowrap; }
.evt td.act button { min-height: 40px; }
.evt tr.evgrp th { background: var(--soft); color: var(--mute); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; text-align: left; }
.evt tr.evgrp th b { color: var(--ink); }
.evt tr.evgrp + tr td { border-top: 0; }
.ev-legend { margin: 10px 0 0; font-size: 12.5px; color: var(--mute); display: grid; gap: 4px; }
.ev-empty { text-align: center; padding: 32px 12px; }
.ev-empty b { display: block; font-size: 18px; margin-bottom: 4px; }
.ev-empty .bar { justify-content: center; }
.evcancelled { display: block; }
/* one event beside the list */
.evcols { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .evcols { grid-template-columns: minmax(270px, 320px) minmax(0, 1fr); } }
.evrail .ibx-r1 b { font-size: 14px; }
.evrail .ibx-r2 { opacity: .9; }
.evrail .ibx-r3 { display: flex; align-items: center; gap: 6px; -webkit-line-clamp: unset; }
.evrail button.ibx-row.on .chip { box-shadow: 0 0 0 1px var(--sel-ink); }
.evrail button.ibx-row { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
.evrail .ev-f { display: grid; gap: 8px; margin: 10px 0; }
.evrail .ev-f select { width: 100%; }
.evh { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.evh h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.evh .meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.evfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.evfacts div { min-width: 0; }
.evfacts dt { font-size: 12px; color: var(--mute); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.evfacts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.evfacts .wide { grid-column: 1 / -1; }
.evpos { min-width: 640px; }
.evpos th, .evpos td { vertical-align: top; }
.evpos td.n, .evpos th.n { text-align: center; width: 84px; }
.evpos td small, .evpos th small { display: block; color: var(--mute); font-size: 12px; }
.evpos .nt { max-width: 22rem; font-size: 13px; color: var(--mute); }
.evpos .chip { white-space: nowrap; }
.evpeople { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.evpeople .p { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.evpeople .pf-u18, .crewlist .pf-u18, .evpc .pf-u18 { vertical-align: middle; }
.evopen { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1.5px dashed var(--warn); border-radius: 999px; color: var(--warn); background: var(--warn-bg); font-size: 12px; font-weight: 650; }
.evopenlist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.evopenlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.evopenlist li:first-child { border-top: 0; }
.evopenlist .w { min-width: 0; flex: 1 1 260px; }
.evopenlist .w b { font-size: 15px; }
.evopenlist .w small { display: block; color: var(--mute); font-size: 12.5px; }
.evopenlist .a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card > ul.evopenlist, .card > ul.crewlist { max-width: none; }
.crewlist { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.crewlist li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 14px; }
.crewlist li small { color: var(--mute); font-size: 12px; }
/* the phone */
.evc { padding: 14px; margin: 0 0 10px; }
.evc .evr1 { margin-bottom: 2px; }
.evc .evr1n b, .evc .evbig { font-size: 17px; }
.evc .evbig { font-size: 22px; }
.evc .evr2 { margin-top: 2px; }
.evc .evmeter { margin: 8px 0 10px; }
.evc .evmeter progress.evp { flex: 1 1 auto; width: auto; }
.evc .evname { min-height: 44px; display: inline-flex; align-items: center; text-align: left; text-decoration: none; }
.evc .evname b { font-size: 17px; }
.evfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.evfoot button { min-height: 44px; min-width: 88px; font-size: 16px; font-weight: 650; flex: none; }
.evfoot .evchips { min-width: 0; }
ul.evcards { list-style: none; margin: 0; padding: 0; }
.evsum { margin: 0 4px 8px; }
.evpc { padding: 14px; margin: 0 0 10px; }
.evpc h4 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink); }
.evpc .t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.evpc .t span { font-size: 13px; color: var(--mute); }
.evpc .ppl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.evpc .ppl .p { display: flex; align-items: center; gap: 6px; font-size: 16px; min-height: 28px; }
.evpc .nt { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.evpc .nt b { color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 2px; }
.evfacts2 { grid-template-columns: 1fr 1fr; margin-top: 10px; }
.evtiles { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }
.evc .btns { display: grid; gap: 8px; }
.evc .btns button { min-height: 48px; font-size: 16px; font-weight: 650; width: 100%; }
.evnotep { margin: 0 0 8px; }
.evc .evopenlist { margin-top: 6px; }
.evc .evopenlist .a button { min-height: 44px; min-width: 72px; }
.evc .evopenlist .w small { font-size: 13px; }
.ev-deskonly { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 12px; border: 1.5px dashed var(--line2); border-radius: var(--rad-m); background: var(--soft); color: var(--mute); font-size: 13px; }
.ev-deskonly .si { flex: none; width: 20px; height: 20px; }
.evsheet .evchip.on { background: var(--sel); color: var(--sel-ink); border: 2px solid var(--sel); }
.evsheet .evpick { display: grid; gap: 8px; margin: 8px 0 0; }
.evsheet .evpick input { width: 100%; }
/* Setup, Who has Crewsy access: the Events tab box of a person's row, and the card that says who starts with it */
.evswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--soft); }
.evswitch .pf-check { font-size: 15px; font-weight: 650; min-height: 32px; }
.evswitch .pf-check input { width: 20px; height: 20px; accent-color: var(--sel); }
.evswitch small { color: var(--mute); font-size: 13px; flex: 1 1 260px; }
.evswitch.na { background: transparent; border-style: dashed; }
.evswitch.na .pf-check { color: var(--mute); }
.ac-card .evswitch { max-width: 560px; }
.accard-rules { margin: 14px 0 0; }
.rules { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.rules li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 12px; }
.rules li b { font-weight: 650; color: var(--ink); }
.card > ul.rules { max-width: none; }
@media (max-width: 760px) { .rules li { grid-template-columns: minmax(0, 1fr); } }
/* crew quality of an event (Kevin 2026-10-14): a chip with the percent and a word (Strong, Watch, Weak) on the list, the phone cards and the event page, and the block of the event's crews. Tokens only. */
.evt .evmeter { flex-wrap: wrap; row-gap: 4px; }
.evq { white-space: nowrap; }
.evqbig .chip { font-size: 15px; min-height: 30px; padding: 3px 12px; }
.evqt { min-width: 780px; }
.evqt th, .evqt td { vertical-align: top; }
.evqt td.n, .evqt th.n { text-align: center; white-space: nowrap; width: 110px; }
.evqt td small, .evqt th small { display: block; color: var(--mute); font-size: 12px; }
.evqt .chip { white-space: nowrap; }
.evqt th:nth-child(2), .evqt td:nth-child(2) { white-space: nowrap; }
.evqr { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 2px; }
.evq3, .evqh { margin: 6px 0 0; }
.evqh b, .evqhint b { color: var(--ink); }
.evqhint { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--sel); border-radius: var(--rad-m); background: var(--soft); }
.evqrule { margin: 4px 0 10px; }
.evqtop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.evqc { padding: 10px 0 8px; border-top: 1px solid var(--line); }
.evqtop + .evqrule + .evqc { margin-top: 4px; }
.evqc .t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.evqc .t .chip { flex: none; white-space: nowrap; }
.evqc h4 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink); }
.evqc p { margin: 4px 0 0; }
.evc .evqhint { margin-top: 10px; }
/* the Fill panel (step 2, Kevin 2026-10-14: web/evfill.js; pictures D3 to D4b and P3). A dialog on a computer, a bottom sheet on a phone; the list on the left, the offer on the right and the picked person under both. Tokens only. */
@media (min-width: 600px) { .pop.xwide { width: min(1000px, 100%); } }
.pop.tall { max-height: 94vh; max-height: 94dvh; }
.fill-sub { margin: 2px 0 0; color: var(--mute); font-size: 14px; }
.fill-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; }
.fill-list { margin: 0; padding: 0 10px; list-style: none; border: 1px solid var(--line); border-radius: var(--rad-m); }
.fill-list .cv-row { align-items: flex-start; padding: 8px 0; }
.fill-list .cv-row.on { background: var(--soft); margin: 0 -10px; padding-left: 10px; padding-right: 10px; box-shadow: inset 3px 0 0 var(--sel); }
.fill-list .cv-who { min-width: 0; flex: 1 1 220px; }
.fill-list .cv-who small { display: block; line-height: 1.4; }
.fill-list .cv-act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; justify-content: flex-end; flex: 0 0 auto; }
.fill-list .cv-why { font-size: 12px; max-width: 12rem; text-align: right; }
.evtick { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; min-height: 40px; }
.evtick input { width: 20px; height: 20px; accent-color: var(--sel); }
.cv-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cv-nm b { font-size: 15px; }
.fill-flag { color: var(--warn); font-weight: 650; }
.fill-flag.red { color: var(--bad); }
.fill-text { background: var(--soft); border-radius: var(--rad-m); padding: 10px 12px; margin: 6px 0 0; font: 13px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); }
.fill-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; margin-top: 6px; }
@media (max-width: 860px) { .fill-grid { grid-template-columns: minmax(0, 1fr); } }
.fill-side { position: sticky; top: 0; }
.fill-offer { display: block; padding: 12px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--panel); }
.fill-offer h4 { margin: 0 0 4px; }
.fill-offer .counts { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0; }
.fill-offer .pri { margin-top: 10px; }
.pop .seg button .n { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: .8; }
.fill-foot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 12px -16px calc(-16px - env(safe-area-inset-bottom, 0px)); padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line2); }
@media (min-width: 600px) { .fill-foot { bottom: -20px; margin: 12px -24px -20px; padding: 12px 24px 14px; } }
.fill-foot .l, .fill-foot .r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fill-foot .l { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.evres { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0; }
.evres .sc2 { font-size: 13px; padding: 3px 10px; }
.ph-fill .cv-row { padding: 10px 0; align-items: flex-start; }
.ph-fill .cv-act button { min-height: 44px; }
.ph-fill .cv-who .cv-why { display: block; text-align: left; max-width: none; font-size: 13px; }
.ph-fill .more-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; }
.ev-sheetfoot { display: grid; gap: 8px; margin: 12px 0 0; }
.ev-sheetfoot button { min-height: 52px; font-size: 16px; font-weight: 650; }
.ev-sheetfoot summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; }
#ev-nofill { margin: 0 0 8px; }
.fill-conflict { margin: 12px 0 0; }
.fill-conflict .f { display: block; margin: 8px 0; } .fill-conflict .f input { width: 100%; max-width: none; margin-top: 4px; }
.fill-conflict .ft { margin-top: 8px; }
#ev-fill-pop { scroll-padding-bottom: 96px; }
/* Events tab, step 3 (Kevin 2026-10-14: the bulk note, the tags and the overlapping shifts; pictures D5 and D6; web/evbulkview.js). Tokens only. The strips are SVG, so they are drawn with attributes and these classes: no inline style. */
.evtags { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.evtag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border: 1px solid var(--line2); border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 12px; font-weight: 650; white-space: nowrap; }
.evtag i { font-style: normal; font-weight: 500; color: var(--mute); }
.evtag.home { background: var(--panel); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.evtag.more { background: var(--panel); border-style: dashed; }
.evpos td.tg, .evpos th.tg { width: 210px; }
.evpos .ntc { font-size: 13px; color: var(--mute); }
.evpos .ntc b { color: var(--ink); }
.evpos th.tick, .evpos td.tick { width: 40px; text-align: center; vertical-align: middle; }
.evpos th.tick input, .evpos td.tick input { width: 20px; height: 20px; accent-color: var(--sel); }
.evpos tr.sel > th, .evpos tr.sel > td { background: var(--soft); }
.evsel { margin: 10px 0 0; align-items: center; }
.evsel .link { min-height: 36px; }
.evtwo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 16px; }
@media (max-width: 1100px) { .evtwo { grid-template-columns: minmax(0, 1fr); } }
.evtwo > .card { margin: 0; }
.tagpick { display: grid; gap: 0; margin: 8px 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--rad-m); }
.tagpick li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 12px; min-height: 44px; border-top: 1px solid var(--line); }
.tagpick li:first-child { border-top: 0; }
.tagpick li.on { background: var(--soft); box-shadow: inset 3px 0 0 var(--sel); }
.tagpick label { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.tagpick input { width: 20px; height: 20px; accent-color: var(--sel); flex: none; }
.tagpick small { display: block; color: var(--mute); font-size: 12.5px; }
.card > ul.tagpick, .card > ul.evrm { max-width: none; }
.evrm li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.bxrow { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; margin: 10px 0 0; }
.bxrow figure { margin: 0; }
.bxrow figcaption { margin: 4px 0 0; font-size: 12px; color: var(--mute); max-width: 24ch; }
.bxwrap { display: flex; width: 150px; height: 46px; }
.bxwrap .sh { cursor: default; }
.evbulk textarea { min-height: 84px; max-width: none; }
.evnomargin { margin-top: 0; }
.ev-count-c { margin: 2px 0 8px; text-align: right; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.ovrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: end; padding: 14px 0; border-top: 1px solid var(--line); }
.ovrow > .ovstrip { grid-column: 1 / -1; }
.ovrow:first-of-type { border-top: 0; }
.ovwho b { display: block; font-size: 15px; } .ovwho small { display: block; color: var(--mute); font-size: 12.5px; }
.ovsum { text-align: right; } .ovsum b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; } .ovsum small { display: block; color: var(--mute); font-size: 12.5px; }
.ovtags { margin: 6px 0 0; }
.ovnote { margin: 10px 0 0; }
.evstrip { display: block; width: 100%; height: auto; max-height: 260px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); }
.evstrip .gl { stroke: var(--line); stroke-dasharray: 3 3; height: auto; background: none; overflow: visible; border-radius: 0; }
.evstrip .ax { fill: var(--mute); font-size: 12px; }
.evstrip .ly { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; }
.evstrip .ly.l1 { opacity: .55; } .evstrip .ly.l2 { opacity: .75; } .evstrip .ly.l3 { fill: var(--soft); }
.evstrip .tx { fill: var(--ink); font-size: 13px; font-weight: 700; }
.evstrip .bk { fill: var(--soft); stroke: var(--ink); stroke-width: 1.5; }
.evstrip .bk.office { fill: var(--panel); stroke: var(--edge); stroke-dasharray: 4 3; }
.evstrip .bk.other { fill: var(--panel); stroke: var(--line2); }
.evstrip .bkt { fill: var(--ink); font-size: 12px; font-weight: 650; }
.evstrip .un { fill: var(--sel); }
.evstrip .ovl { fill: var(--line2); opacity: .6; }
.pop.ovw { width: min(800px, 100%); max-height: 94vh; max-height: 94dvh; }
.pop.ovw .scroll { max-height: 36vh; overflow: auto; }
.pop.ovw .scroll table { margin: 6px 0 0; }
.pop.ovw .evprev td, .pop.ovw .evprev th { font-size: 13px; vertical-align: top; }
.pop.ovw .evprev td small { display: block; }
.owold { color: var(--mute); overflow-wrap: anywhere; }
.pop.ovw .fill-text { max-width: none; font: 13.5px/1.45 var(--font); }
.sh.stkd { box-shadow: 4px -4px 0 -1px var(--line2), 8px -8px 0 -2px var(--line); }
.sh.stkd[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
/* Events tab, step 4 (Kevin 2026-10-14: the Prospect check; pictures D7, D7b, D8, P4 and P5; web/prospect.js, web/pubwatch.js). Tokens only: no colour of its own, so light and dark follow the app. */
.evsalesline { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
.evsalesline b { color: var(--ink); font-weight: 650; }
.ibx-row .evsalesline { color: inherit; opacity: .92; }
.ibx-row .evsalesline b { color: inherit; }
.ev-top .link, .ev-top > button { margin-left: auto; }
.evpcbar { margin: 0 0 8px; }
.pcgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; margin-top: 10px; align-items: start; }
@media (max-width: 1100px) { .pcgrid { grid-template-columns: minmax(0, 1fr); } }
.pcsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pcsteps li { position: relative; padding: 0 0 14px 34px; }
.pcsteps li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; border-left: 2px solid var(--line2); }
.pcsteps li:last-child { padding-bottom: 0; }
.pcsteps li:last-child::before { display: none; }
.pcsteps .mk { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--panel); border: 2px solid var(--ink); color: var(--ink); }
.pcsteps .mk.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.pcsteps .mk.ok { border-color: var(--good); color: var(--good); background: var(--good-bg); }
.pcsteps .mk.wait { border-style: dashed; border-color: var(--edge); color: var(--mute); }
.pcsteps b { font-size: 15px; }
.pcsteps .d { display: block; font-size: 13.5px; color: var(--mute); margin-top: 1px; }
.pcsteps .d b { color: var(--ink); font-size: 13.5px; }
.pcsteps .pst { margin-left: 6px; vertical-align: 1px; }
.pcwho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--soft); }
.pcwho b { font-size: 15px; }
.pcwho small { color: var(--mute); }
.pch { margin: 12px 0 2px; }
.pcap { margin: 6px 0 0; }
.replies { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.replies li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
.replies li b { font-family: var(--mono); }
.pcdo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pcnote { margin: 6px 0 0; }
.pcintro { margin: 0 0 8px; }
.pct { width: 100%; table-layout: fixed; }      /* six columns share the card at 1024 px and wider (the phone has cards, not this table): the text wraps, nothing scrolls sideways */
.pct th:nth-child(1) { width: 20%; } .pct th:nth-child(2) { width: 20%; } .pct th:nth-child(3) { width: 17%; } .pct th:nth-child(4) { width: 9%; } .pct th:nth-child(5) { width: 13%; } .pct th:nth-child(6) { width: 21%; }
.pct th, .pct td { vertical-align: top; }
.pct td small, .pct th small { display: block; color: var(--mute); font-size: 12px; }
.pct td b { font-size: 14.5px; }
.pct td .chip { white-space: nowrap; }
.pct .evname { all: unset; box-sizing: border-box; cursor: pointer; font-weight: 650; font-size: 15px; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.pct .evname:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.planlist { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--rad-m); }
.planlist li { display: grid; grid-template-columns: 150px 190px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.planlist li:first-child { border-top: 0; }
@media (max-width: 1100px) { .planlist li { grid-template-columns: minmax(0, 1fr); } }
.planlist .w { font-weight: 650; font-variant-numeric: tabular-nums; }
.ptexts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; align-items: start; }
@media (max-width: 1100px) { .ptexts { grid-template-columns: minmax(0, 1fr); } }
.ptexts h4 { margin: 0 0 4px; }
.ptexts .fill-text { max-width: none; }
.card > ul.planlist { max-width: none; }
.pcard { padding: 14px; margin: 0 0 10px; }
.pcard .kv { display: grid; gap: 10px; margin: 0; }
.pcard .kv div { padding-top: 10px; border-top: 1px solid var(--line); }
.pcard .kv div:first-child { padding-top: 0; border-top: 0; }
.pcard .kv dt { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pcard .kv dd { margin: 2px 0 0; font-size: 15px; }
.pcard .kv dd small { display: block; color: var(--mute); font-size: 13px; }
.pcard .btns { display: grid; gap: 8px; margin-top: 12px; }
.pcard .btns button { min-height: 48px; font-size: 16px; font-weight: 650; width: 100%; }
.pcc .kv { display: grid; gap: 8px; margin: 8px 0 0; }
.pcc .kv div { padding-top: 8px; border-top: 1px solid var(--line); }
.pcc .kv dt { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pcc .kv dd { margin: 2px 0 0; font-size: 15px; }
.pcc .kv dd small { display: block; color: var(--mute); font-size: 13px; }
.ph-pc .seg { display: flex; }
.ph-pc .seg button { flex: 1 1 0; min-height: 44px; }
.ph-pc .fill-text { max-width: none; }
.ph-pc .btns { display: grid; gap: 8px; margin: 10px 0 0; }
.ph-pc .btns button { min-height: 48px; font-size: 16px; font-weight: 650; }
.ph-pc h4 { margin: 12px 0 4px; }
.ph-pc .replies li { grid-template-columns: 56px minmax(0, 1fr); font-size: 14px; }
.pc-alerts ul { margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.pc-alerts li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
/* Setup's "Review and publish by" card, the board's note and Alerts' lines (web/pubwatch.js) */
.pw-form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 10px 0 6px; }
.pw-form .f { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pw-next { margin: 4px 0 0; }
.pw-board { margin: 10px 0; }
.pw-hub { margin: 10px 0; }
.pw-hub .pw-h { margin: 0 0 4px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.pw-hub .pw-h + .pw-list { margin-bottom: 8px; }
.pw-list { margin: 0; padding: 0; display: grid; gap: 4px; }
.pw-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 32px; }
/* EV1 end */

/* TS2 begin: Team Status as tabs on a computer (lane TS2, 2026-10-13; Kevin: tabs at the top, Show all for each list, a number on every tab). The row is the manager row's own .tabs / .tab (orange bar under the tab that is on); the switch inside Deactivations is the page's .seg (navy when selected). Tokens only: no new colour. */
.tm-tabs { margin: 0 0 14px; } .tm-tabs .tab { display: inline-flex; align-items: center; gap: 2px; }
.tm-n { margin-left: 4px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--mute); } .tab.on .tm-n { color: var(--ink); } .seg button.on .tm-n { color: inherit; }
.tm-panel { min-width: 0; } .tm-panel:focus-visible { outline-offset: 2px; }
.tm-segs { margin: 0 0 12px; }
.tm-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 0; }
.tm-err { display: grid; justify-items: start; gap: 6px; margin: 8px 0 2px; } .tm-err .pf-bad { font-size: 14px; margin: 0; font-weight: 650; }
.tm-look p, .tm-came p { margin: 0; } .tm-look, .tm-came { padding: 10px 0; } .tm-look .pf-actions, .tm-came .pf-actions { margin-top: 6px; }      /* CF1 (2026-10-14): the rows of Needs a look and Came in: lines close together (a grid does not collapse the margins of a paragraph), the buttons a little below */
/* TS2 end */

/* FAQ screen (lane H2, 2026-10-13: web/faqscreen.js): every FAQ entry with how it is doing, and the suggestions learned from the questions and answers; only tokens, no color of its own */
.fq .fq-sum { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0 12px; }
.fq .fq-sec { margin: 14px 0; } .fq .fq-sec h4 { margin: 0 0 6px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); } .fq .fq-sec .bar h4 { margin: 0; }
.fq .fq-sugs, .fq .fq-list { display: grid; gap: 8px; } .fq .fq-sugs > li, .fq .fq-list > li { padding: 0; border: 0; }
.fq .fq-sug { border: 1px solid var(--line2); border-radius: var(--rad-m); padding: 10px 12px; background: var(--panel); min-width: 0; }
.fq .fq-top { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .fq .fq-title { margin: 6px 0 2px; overflow-wrap: anywhere; } .fq .fq-why { margin: 0 0 6px; overflow-wrap: anywhere; }
.fq .fq-ex li, .fq .fq-chg li { padding: 3px 0; border: 0; font-size: 13px; overflow-wrap: anywhere; } .fq .fq-ex li { color: var(--mute); }
.fq .fq-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 4px 0 8px; font-size: 13px; } .fq .fq-dl dt { color: var(--mute); } .fq .fq-dl dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.fq .fq-find { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: end; } .fq .fq-find .stack { margin: 4px 0; } .fq .fq-find .stack.grow { flex: 1 1 240px; } .fq .fq-n { font-variant-numeric: tabular-nums; }
button.fq-row { width: 100%; display: grid; gap: 2px; text-align: left; justify-items: start; align-items: start; padding: 8px 10px; font-weight: 450; min-width: 0; } button.fq-row.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.fq .fq-r1 { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; max-width: 100%; } .fq .fq-r2, .fq .fq-r3 { font-size: 12px; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.fq .fq-detail { border: 1px solid var(--line); border-radius: 0 0 var(--rad-m) var(--rad-m); padding: 10px 12px; margin-top: -1px; background: var(--panel); min-width: 0; }
.fq .fq-tx { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; } .fq .fq-kw { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.fq .fq-nums li, .fq .fq-flags li { padding: 4px 0; border: 0; font-size: 13px; } .fq .fq-chlist li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 0; } .fq .fq-form { margin: 8px 0; } .fq .fq-detail h4 { margin: 14px 0 6px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
@media (min-width: 1024px) { .fq .fq-sec > .fq-sugs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (pointer: coarse), (max-width: 600px) { body .fq button, body .fq .schips button { min-height: 44px; } }
/* FAQ screen end *//* SYNC SQUARE begin (Kevin 2026-10-13; web/squaresync.js): the Sync Square button in the manager's header, put in after every draw. Tokens only; no orange text; no motion. On a computer it sits first in the actions with the line beside it
   (Synced 2:14 PM, or the plain line for an error); on a manager's phone it is a 44 px square in the top bar, the arrow over the time or the countdown, and its words go to a screen reader. */
.sqs { display: inline-flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.sqs-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.sqs-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sqs-s { display: none; }
.sqs-t { max-width: 17em; font-size: 13px; line-height: 1.25; color: var(--mute); } .sqs-t.bad { color: var(--bad); }
.sqs[data-st="fail"] .sqs-b::after { content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg); }
header.mtop .sqs { gap: 0; }
header.mtop .sqs-b { flex-direction: column; gap: 1px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
header.mtop .sqs-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header.mtop .sqs-s { display: block; font-size: 12px; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; }
header.mtop .sqs-t { display: none; }
@media (max-width: 599px) { header.top .sqs { gap: 0; } header.top .sqs-b { flex-direction: column; gap: 1px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; } header.top .sqs-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } header.top .sqs-s { display: block; font-size: 12px; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; } header.top .sqs-t { display: none; } }      /* the old header (a narrow window that still draws the tab row: the simulator's phone frames, a test) takes the same compact button as the phone's top bar: the words and the line beside it pushed the page 80 px sideways at 375 px (found at the integration, step 26) */
/* SYNC SQUARE end */
/* AV1 begin: the availability flow (lane AV1, Kevin 2026-10-15; web/availflow.js for a team member, web/availmgr.js for the managers). Only tokens of this file are used (no new colour), so light and dark both follow the app. Drawn only while the settings row avail_rules is on. */
.av-bn { display: grid; gap: 8px; margin: 10px 0; padding: 12px; border: 1px solid var(--warn); border-radius: var(--rad-l); background: var(--warn-bg); color: var(--ink); }
.av-bn-t { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.av-bn-i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: var(--panel); font-weight: 700; font-size: 14px; flex: none; }
.av-bn p { margin: 0; font-size: 14px; }
.av-bn-act { display: flex; gap: 8px; flex-wrap: wrap; }
.av-bn-act button { flex: 1 1 140px; min-height: var(--ctl); }

.av-pc { display: grid; gap: 8px; margin: 10px 0; padding: 12px; border: 1px solid var(--line2); border-radius: var(--rad-l); background: var(--panel); }
.av-pc b { font-size: 15px; }
.av-pc small { color: var(--mute); font-size: 13px; }
.av-pc-act { display: flex; gap: 8px; }
.av-pc-act button { flex: 1 1 0; min-height: var(--ctl); }
.av-ok { display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--soft); font-size: 14px; color: var(--mute); }
.av-ok svg { color: var(--good); flex: none; }
.av-oc { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin: 8px 0; }
.av-oc .link { min-height: var(--ctl); }
.av-first { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 8px 0; font-size: 14px; }
.av-blk { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; min-height: var(--ctl); margin: 0 0 8px; padding: 0 12px; border: 1px dashed var(--edge); border-radius: var(--rad-m); font-size: 14px; }
.av-blk .link { min-height: var(--ctl); padding-inline: 0; text-align: start; }      /* the link is the first words of the one line: Add your availability (opens the availability setup) */
.av-cut { margin: 8px 0; text-align: center; letter-spacing: .3em; }
/* On call only: the second choice at the top of the availability form (a team member's own screen and a manager's entry for a person), and the three lines that replace the hours grid */
.av-mode { margin: 4px 0 8px; }
.pf-card .av-mode { margin: 2px 0 12px; }
.av-three-f { margin: 6px 0 10px; }
.av-rem { margin: 14px 0; }
.av-rem .seg { margin: 6px 0; }
.av-rem .sfrm label { margin-top: 10px; }
.av-rem .av-pick { min-height: var(--ctl); }
.av-na { display: grid; gap: 10px; }
.av-na-top { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.av-na-top h3 { margin: 0; font-size: 1.05rem; }
.av-na .seg { margin: 0; }
.av-na .hflag { margin: 0; }
.av-tbl { width: 100%; border-collapse: collapse; }
.av-tbl th, .av-tbl td { padding: 8px 8px; text-align: left; vertical-align: middle; }
.av-tbl thead th { font-size: 12px; font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--line2); white-space: nowrap; }
.av-tbl tbody td, .av-tbl tbody th { border-top: 1px solid var(--line); }
.av-tbl tbody tr:first-child td, .av-tbl tbody tr:first-child th { border-top: 0; }
.av-tbl th[scope=row] { font-weight: 600; }
.av-tbl .av-end { text-align: right; white-space: nowrap; }
.av-tbl .av-mute { color: var(--mute); font-size: 13px; }
.av-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.av-stores { display: flex; gap: 4px; flex-wrap: wrap; }
.av-count { font-variant-numeric: tabular-nums; }
.av-phone-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.av-phone-sum b { font-size: 1rem; }
.av-line { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin: 8px 0; }
.av-line .link { min-height: var(--ctl); }
td.n .av-nochip { display: inline-block; margin-top: 2px; font-size: 12px; }
.av-sk { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.av-sk li { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.av-sk li:first-child { border-top: 0; }
.av-sk .av-skact { margin-inline-start: auto; }
.av-res { display: grid; gap: 10px; }
.av-res h4 { margin: 4px 0 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.av-three { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.av-three li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.av-three svg { color: var(--good); flex: none; }
.av-sheet-act { display: grid; gap: 8px; margin: 10px 0 0; }
.av-sheet-act button { min-height: var(--ctl); }
.av-date { display: block; }
.av-date-row { display: flex; gap: 8px; align-items: stretch; margin-top: 3px; }
.av-date-row input { flex: 1 1 auto; min-width: 0; min-height: var(--ctl); }
.av-date-row button { flex: none; min-height: var(--ctl); }
.av-cal { margin: 6px 0 4px; }
.av-cal-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.av-cal-h b { font-size: 16px; }
.av-cal-h button { min-width: var(--ctl); min-height: var(--ctl); }
.av-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.av-cal-w { text-align: center; font-size: 12px; color: var(--mute); padding: 2px 0; }
.av-cal-d { min-height: var(--ctl); padding: 0; border-radius: var(--rad-m); font-size: 15px; font-weight: 600; }
.av-cal-d[disabled] { color: var(--mute); background: transparent; border-color: transparent; opacity: .55; }
.av-cal-d.on { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.av-lastc { margin: 8px 0 0; display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
@media (pointer: coarse), (max-width: 600px) { .av-line .link, .av-oc .link, .av-blk .link, .av-tbl button, .av-na button { min-height: var(--ctl); } }
/* AV1 end */
/* NH1 begin: Payroll > New hires (web/newhires.js; the approved pictures are handoff\review\PAYROLL-NEWHIRES). Tokens of this file only: no new colour, so light and dark follow the app. */
.nh-wrap { display: grid; gap: 14px; }
.nh-wrap .pr-tabs { margin: 0; }
.nh-wrap .pr-tabs .chip { margin-left: 6px; }
.nh-sec { margin: 0; }
.nh-top { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.nh-top h3 { margin: 0; }
.nh-q { margin: 0; padding: 14px 0; }
.nh-tbl { width: 100%; border-collapse: collapse; }
.nh-tbl th, .nh-tbl td { padding: 6px 8px; text-align: left; vertical-align: middle; }
.nh-tbl thead th { font-size: 12px; font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--line2); white-space: nowrap; }
.nh-tbl tbody td, .nh-tbl tbody th { border-top: 1px solid var(--line); }
.nh-tbl tbody tr:first-child td, .nh-tbl tbody tr:first-child th { border-top: 0; }
.nh-tbl th[scope=row] { font-weight: 600; }
.nh-tbl .nh-c { text-align: center; }
.nh-tbl .nh-end { text-align: right; white-space: nowrap; }
.nh-tbl .nh-wait { color: var(--mute); font-size: 12px; white-space: nowrap; }
.nh-tbl .nh-date { white-space: nowrap; font-size: 13px; }
.nh-also { display: block; font-size: 12px; color: var(--mute); font-weight: 400; }
.nh-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* a tick: a native box inside a label (the label is the touch target); Scheduled is a box that cannot be pressed */
.nh-tick { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; position: relative; cursor: pointer; }
.nh-tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--sel); }
.nh-tick.auto { cursor: default; }
.nh-ab { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--edge); background: var(--soft); color: var(--ink); flex: none; }
.nh-ab svg { display: block; }
.nh-th { display: inline-flex; align-items: center; gap: 6px; }
/* who ticked a box and when: shown when the box is pointed at or reached with the keyboard (a computer only; the phone does not draw it) */
.nh-tip { display: none; position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: var(--rad-m); background: var(--ink); color: var(--panel); font-size: 12px; box-shadow: var(--sh2); pointer-events: none; }
.nh-tip:after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.nh-tick:hover .nh-tip, .nh-tick:focus-within .nh-tip { display: block; }
.nh-act { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nh-sure { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin: 0; padding: 8px 12px; border: 1px solid var(--line2); border-radius: var(--rad-m); background: var(--soft); }
.nh-conf td { padding: 4px 0 8px; }
.nh-sure b { font-weight: 600; }
.nh-sure .bar { margin: 0; gap: 8px; }
.nh-done { margin: 0; padding: 0; }
.nh-done > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; padding: 0 14px; list-style: none; font-weight: 600; }
.nh-done > summary::-webkit-details-marker { display: none; }
.nh-done > summary:before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(-45deg); margin-right: 4px; }
.nh-done[open] > summary:before { transform: rotate(45deg); }
.nh-done .nh-body { padding: 0 14px 10px; }
.nh-done .nh-more { margin: 4px 0 0; }
.nh-msg { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.note.msg .nh-msg .link { min-height: var(--ctl); min-width: var(--ctl); }
.nh-retry { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the phone: one card for each person */
.nh-pc { display: grid; gap: 8px; margin: 0 0 10px; padding: 12px; }
.nh-pc .nh-name b { font-size: 15px; }
.nh-sub { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--mute); }
.nh-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.nh-ticks .nh-tick { justify-content: flex-start; gap: 8px; min-height: 44px; font-size: 14px; }
.nh-ticks .nh-tick span { min-width: 0; }
.nh-pc .nh-full { width: 100%; }
.nh-pc .nh-sure { padding: 10px; }
.nh-pc .nh-sure .bar button { flex: 1 1 0; }
.nh-phead { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.nh-phead h3 { margin: 0; }
.nh-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nh-dl-i { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.nh-dl-i:first-child { border-top: 0; }
.mm-hires { padding: 0 12px 12px; }
.mm-hires .nh-done > summary { padding: 0 12px; }
@media (pointer: coarse), (max-width: 600px) { .nh-tick { min-height: var(--ctl); min-width: var(--ctl); } .nh-done > summary, .nh-wrap button.link { min-height: var(--ctl); } }
/* NH1 end */
/* U2 begin (lane U2, Kevin 2026-10-13: "no phone number button doesn't change to show its selected. This is true throughout the software. It should click or stay a color when selected").
   THE PRESSED LOOK, ONE FOR EVERY TOGGLE. A toggle button (a filter chip, a store chip, No phone number, Day or Week, a tick drawn as a button) carries aria-pressed="true" or "false" from the real state on every render (web/pressed.js);
   this block is what the eye sees: the Crewsy selected colour (navy with white text, off-white with navy text in the dark theme: --sel and --sel-ink, 4.5:1 or better in both), a firmer weight and, on the chips and segments of words,
   a check mark, which is a shape, so the state is not told by colour alone. The fill is the LIGHTEST rule of the sheet (:where adds no weight): any older rule that names its own look for an on button (the day tiles, the stars, the rows of a
   pick list, the Urgent button, the Manager view | My view pill, a text link) keeps it, and a toggle nobody styled gets this one (No phone number on People had none, and neither had Pin on the Inbox thread). Only the crew cell with its
   traffic-light tone (.cqday) and the gold stars are left out by name. The old peach and soft looks of the chips (.schips, .hfl, .dsw and the phone's filter chips) were changed in their own rules to this navy. The size of the button is not
   touched (44 px on a phone stays 44 px). The check is drawn only where a row of words has room for it: the chips below, and a segmented control (.seg) from 1024 px (on a phone or a tablet its segments must fit three to a row, so the fill alone
   says it there); the phone's own chips carry theirs in their own sections. The board's day switch (.dsw) has no check mark: a fully staffed day already carries its own check (the green badge), so the fill and the weight say the
   chosen day. An older rule that gives an on button its own look uses --sel and --sel-ink as well, never the orange (the Day view chips did until the review of 2026-10-14: orange in the dark theme; u2dom.mjs now fails on it). */
:where(button:not(.cqday, .stars *))[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); font-weight: 650; }
:is(.schips, .hfl, .pp-tools, .dv-days, .ibx-acts, .pf-bulk) > button[aria-pressed="true"]::before { content: "\2713"; flex: none; margin-inline-end: 6px; font-weight: 700; }
@media (min-width: 1024px) { .seg:not(.ssw) > button[aria-pressed="true"]::before { content: "\2713"; flex: none; margin-inline-end: 6px; font-weight: 700; } }
/* U2: the spaces that went missing in a button ("No phonenumber", "Select allshown", "Hideselected"). A button is a flex box, and a flex box drops the spaces at the edges of each part of its text: a word kept in its own
   <span class="x"> (the words a phone leaves out) lost its first or last space, and a count or a note that followed the label (a plain space, then a <span>) lost it too. The spans that hold words keep their edge spaces here (x, and ksp
   for words that stay on a phone); the three places that put a count after a label have a small gap of their own. A new button that needs a space at the edge of a part says so in one of these two ways (togglesU2.test.mjs checks it,
   and u2dom.mjs checks every screen the web suite draws). */
button > .x, button > .ksp, .btn > .x, .btn > .ksp { white-space: pre; }      /* .ksp: words with an edge space that stay on a phone (a count after a label); not .sp, which is the board's little pill */
.schips button .ibx-n { margin-inline-start: .4em; }
.bbar button .chip { margin-inline-start: 6px; }
.cqcn .mute { margin-inline-start: .4em; }
.schips button .fq-n { margin-inline-start: .4em; }      /* (merged with lane H2: the FAQ screen's filter chips, "All 26", "Needs a look 0": the same count after a label) */
/* U2 end */