/* ui.css · owner-app 0.23.x · build console_0.23.1 (★ 0.23.5: + stage 5b, 08 photos & events) · THE REDESIGN: stage 1 tokens + shell · stage 2 onboarding (01 · 02 · 03).
 * Loaded by every page AFTER its own <style>, so these win. It changes the look only: no page's
 * ids, words or logic depend on it (every drive must still pass without it).
 * Tokens: LETTER_TO_OWNERS_REDESIGN_WORKFLOW_2026-11-02.md §3 (5c725287bd677e24).
 * Font: Plus Jakarta Sans, self-hosted (the edge's CSP allows only 'self'), SIL OFL 1.1 (OFL-jakarta.txt). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(jakarta-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(jakarta-500.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(jakarta-600.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(jakarta-700.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(jakarta-800.woff2) format('woff2')}

/* ── tokens. The old names are kept, so every page's own CSS takes the new values. Light only:
 *    the staff screens (05–06) get their own dark ground in stage 4, not from the system setting. */
:root,:root:not(#x){
  --ground:#F5F6F8;--surface:#FFFFFF;--border:#E4E7EC;
  --ink:#101828;--ink2:#475467;--ink3:#667085;--navy:#101828;
  --action:#1D3B8B;--action-hover:#142B66;--accent:#3E63DD;--tint:#EEF2FB;
  --open:#067647;--open-bg:#ECFDF3;--open-line:#ABEFC6;
  --filling:#93370D;--filling-bg:#FFFAEB;--filling-line:#FEDF89;
  --full:#912018;--full-bg:#FEF3F2;--full-line:#FECDCA;
  --closed:#344054;--closed-bg:#F2F4F7;--closed-line:#D0D5DD;
  --bg:var(--surface);--bg2:var(--ground);--text:var(--ink);--text2:var(--ink2);--text3:var(--ink3);
  --line:var(--border);--line2:#D0D5DD;
  --ok-bg:var(--open-bg);--ok:var(--open);--warn-bg:var(--filling-bg);--warn:var(--filling);
  --bad-bg:var(--full-bg);--bad:var(--full);--info-bg:var(--tint);--info:var(--action);
  --teal-bg:var(--open-bg);--teal:var(--open);--amber-bg:var(--filling-bg);--amber:var(--filling);
  --red-bg:var(--full-bg);--red:var(--full);
  --r:10px;--r2:16px;--font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root,:root:not(#x){
  --bg:var(--surface);--bg2:var(--ground);--text:var(--ink);--text2:var(--ink2);--text3:var(--ink3);
  --line:var(--border);--line2:#D0D5DD;
  --ok-bg:var(--open-bg);--ok:var(--open);--warn-bg:var(--filling-bg);--warn:var(--filling);
  --bad-bg:var(--full-bg);--bad:var(--full);--info-bg:var(--tint);--info:var(--action);
  --teal-bg:var(--open-bg);--teal:var(--open);--amber-bg:var(--filling-bg);--amber:var(--filling);
  --red-bg:var(--full-bg);--red:var(--full);
}}

/* ── type and ground */
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
h2{font-size:18px;font-weight:700;letter-spacing:-.01em}
h3{font-weight:700}
a{color:var(--action)}a:hover{color:var(--action-hover)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ── cards */
main section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:20px 22px}

/* ── controls (44 px targets) */
button.primary{background:var(--action);color:#fff;border-radius:var(--r);font-weight:700;min-height:44px}
button.primary:hover:not(:disabled){background:var(--action-hover)}
button.plain{background:var(--surface);border:1px solid var(--line2);color:var(--closed);border-radius:var(--r);font-weight:600;min-height:44px}
button.plain:hover:not(:disabled){background:var(--closed-bg)}
button.danger{border-radius:var(--r);font-weight:600;min-height:44px}
button.link{color:var(--action);font-weight:600}
input[type=text],input[type=url],input[type=email],input[type=tel],input[type=number],input[type=time],input[type=date],select,textarea{
  font-family:var(--font);border-radius:var(--r);border-color:var(--line2);min-height:44px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:3px solid var(--tint);outline-offset:0}
label{color:var(--ink2);font-weight:600}
.chip{background:var(--surface);border-color:var(--border);color:var(--ink2);font-weight:600}
.note{border-radius:var(--r);background:var(--tint);color:var(--action)}

/* ── the shell: a navy side menu on desktop, a bottom bar on a phone (Main · 04) */
.ui-shell{display:none}
body.ui-has-shell .ui-shell{display:flex}
.ui-shell{position:fixed;z-index:20;background:var(--navy);color:#fff;font-family:var(--font)}
.ui-brand{display:flex;align-items:center;gap:10px;padding:0 8px 20px;font-weight:700;font-size:17px;color:#fff;text-decoration:none}
.ui-brand .ui-logo{width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800}
.ui-brand .ui-dim{font-weight:500;color:#98A2B3}
.ui-shell a.ui-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;color:#D0D5DD;text-decoration:none;font-weight:500;min-height:44px;box-sizing:border-box}
.ui-shell a.ui-item:hover{background:#1A2333;color:#fff}
.ui-shell a.ui-item[aria-current=page]{background:#1F2A3D;color:#fff;font-weight:700}
.ui-shell svg{flex:0 0 auto}
.ui-who{margin-top:auto;padding:16px 12px 0;border-top:1px solid #344054;font-size:13px;color:#98A2B3}
.ui-who b{color:#fff;font-weight:600}
@media (min-width:900px){
  .ui-shell{top:0;bottom:0;left:0;width:248px;flex-direction:column;gap:6px;padding:24px 16px;box-sizing:border-box;overflow-y:auto}
  body.ui-has-shell{padding-left:248px}
  body.ui-has-shell main{max-width:880px;padding:32px 40px 120px}
  body.ui-has-shell .bar{left:248px}
}
@media (max-width:899.98px){
  .ui-shell{left:0;right:0;bottom:0;height:auto;flex-direction:row;padding:6px 4px calc(6px + env(safe-area-inset-bottom));overflow-x:auto;border-top:1px solid #1F2A3D}
  .ui-shell .ui-brand,.ui-shell .ui-who{display:none}
  .ui-shell a.ui-item{flex:1 0 64px;flex-direction:column;gap:2px;padding:6px 4px;font-size:12px;text-align:center;justify-content:center;min-height:52px}
  /* ★ 0.23.6 · stage 6: short words, and every item shares the width (was 64 px each, so 7 items scrolled and Plan was off-screen) */
  .ui-shell{overflow-x:visible}
  .ui-shell a.ui-item{flex:1 1 0;min-width:0;padding:6px 0;font-size:11px;letter-spacing:-.1px;white-space:nowrap}
  .ui-shell .ui-lbl{display:none}
  .ui-shell a.ui-item::after{content:attr(data-short);display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.ui-has-shell{padding-bottom:72px}
  body.ui-has-shell .bar{bottom:66px}
}

/* ── status words carry an icon + word (never colour alone) — reusable chips for stage 3 */
.ui-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 14px;font-weight:700;border:1px solid}
.ui-pill.open{color:var(--open);background:var(--open-bg);border-color:var(--open-line)}
.ui-pill.filling{color:var(--filling);background:var(--filling-bg);border-color:var(--filling-line)}
.ui-pill.full{color:var(--full);background:var(--full-bg);border-color:var(--full-line)}
.ui-pill.closed{color:var(--closed);background:var(--closed-bg);border-color:var(--closed-line)}

@media print{.ui-shell{display:none!important}body.ui-has-shell{padding:0}}

/* ══ STAGE 2 · onboarding 01–03 (console_0.23.1) ══════════════════════════════════════════════ */
/* 01 · the front door: a navy band that says why to sign in, then the form */
.ob-hero{background:var(--navy);color:#fff;margin:-24px -16px 24px;padding:40px 24px 32px}
.ob-hero .ui-brand{padding:0 0 24px;font-size:20px}
.ob-hero .ob-why{color:#fff;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 14px}
.ob-hero p{color:#D0D5DD;font-size:16px;margin:0}
.ob-top{display:flex;align-items:center;gap:10px;font-weight:700;margin:0 0 20px}
.ob-top .ui-logo{width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.ob-top .ui-dim{font-weight:500;color:var(--ink3)}
.ob-or{display:flex;align-items:center;gap:12px;color:var(--ink3);margin:16px 0}
.ob-or::before,.ob-or::after{content:"";flex:1;border-top:1px solid var(--border)}
.ob-new{color:var(--ink2);font-size:14px;margin:16px 0 0}
footer.help{color:var(--ink3)}
footer.help a{color:var(--action)}

/* the step label (02 "Step 1 of 3", 03 "Step 3 of 3") */
.ob-step{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:8px 0 4px}

/* ★ the six-box code: ONE real <input> (inputmode numeric, one-time-code, maxlength 6, paste fills all),
 *   drawn as six boxes. The boxes are pictures of the input's value; the input stays the control that
 *   autofill, screen readers and the drives use. */
.ob-code{position:relative;display:flex;gap:8px;justify-content:space-between;max-width:360px;margin:4px 0 0}
.ob-code .ob-box{flex:1 1 0;aspect-ratio:5/6;max-width:52px;border:1.5px solid var(--line2);border-radius:var(--r);background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ob-code.focus .ob-box.at{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.ob-code.bad .ob-box{border-color:var(--full-line)}
.ob-code input.code{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;margin:0;min-height:0;cursor:text;
  letter-spacing:0;caret-color:transparent;color:transparent;background:transparent}

/* 02 · the venue card + how claiming works */
.ob-venue{background:var(--surface);border:2px solid var(--action);border-radius:var(--r2);padding:18px;margin:0 0 16px}
.ob-venue .ob-vhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ob-venue h2{margin:0 0 2px;font-size:20px}
.ob-state{font-size:13px;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--closed-bg);color:var(--closed);white-space:nowrap}
.ob-state.pending{background:var(--filling-bg);color:var(--filling)}
.ob-how{background:var(--tint);border-radius:var(--r2);padding:16px 18px;margin:0 0 16px}
.ob-how h2{font-size:16px;margin:0 0 6px}
.ob-how p{margin:0;color:var(--ink)}
a.primary,button.primary.big{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;background:var(--action);color:#fff;
  border-radius:var(--r);font-weight:700;min-height:52px;font-size:17px;text-decoration:none;padding:12px 18px;border:0}
a.primary:hover{background:var(--action-hover);color:#fff}
.ob-add{text-align:center;color:var(--ink2);margin:16px 0 0}

/* 03 · first setup: progress bar + the 5-step checklist (done = green tick, next = blue outline) */
.ob-bar{height:10px;border-radius:99px;background:var(--border);overflow:hidden;margin:16px 0 8px}
.ob-bar span{display:block;height:100%;background:var(--accent);border-radius:99px}
.ob-count{font-weight:700;color:var(--ink2);margin:0 0 20px}
.ob-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px}
.ob-item{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px 18px;
  text-decoration:none;color:var(--ink);min-height:44px}
a.ob-item:hover{border-color:var(--accent);color:var(--ink)}
.ob-item.next{border:2px solid var(--accent)}
.ob-item .ob-dot{flex:0 0 40px;height:40px;border-radius:50%;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink2)}
.ob-item.next .ob-dot{border-color:var(--accent);color:var(--accent)}
/* ★ 0.23.7 · 03 step 4: areas at setup (v249A) — a card under the step, the same surface as the steps */
.ob-areas{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px 18px;margin:8px 0 0}
.ob-areas-h{font-size:18px;margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ob-areas .ob-count2{font-size:14px;font-weight:700;color:var(--ink2)}
.ob-zones{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column}
.ob-zone{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--border)}
.ob-zone:first-child{border-top:0;padding-top:0}
.ob-cap{display:flex;flex-direction:column;gap:4px;font-size:14px}
.ob-cap input{max-width:120px}
.ob-watch{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);min-height:44px}
.ob-watch input{width:22px;height:22px;margin:0;flex:0 0 auto}
.ob-hint{font-size:13px;margin:4px 0 12px}
.ob-add{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);padding-top:12px}
.ob-add #newCap{max-width:120px}
.ob-add button{align-self:flex-start;margin-top:6px;min-height:44px}
.ob-limit{background:var(--tint);border-radius:var(--r);padding:10px 12px;font-size:14px;margin:0 0 8px}
.ob-areas .msg{margin:8px 0 0;font-size:14px;min-height:0}
.ob-areas .msg.ok{color:var(--open,#067647)}.ob-areas .msg.bad{color:var(--full,#B42318)}
.ob-item.done .ob-dot{background:#12B76A;border-color:#12B76A;color:#fff}
.ob-item .ob-txt{flex:1;min-width:0}
.ob-item b{display:block;font-size:17px}
.ob-item .ob-sub{color:var(--ink2);font-size:14px}
.ob-item .ob-go{color:var(--accent);font-size:22px;font-weight:700}
.ob-item .ob-why2{display:block;color:var(--ink3);font-size:13px;margin-top:2px}
button.plain.big,a.plain.big{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;font-size:17px;font-weight:700;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);color:var(--ink);text-decoration:none;box-sizing:border-box}

/* ══ STAGE 3 · Today (console_0.23.2) · desktop Main + phone 04 ═════════════════════════════════ */
/* the editor's message bar on Today: only when it has something to say (status taps report there), never a Save */
body[data-page=today] #save{display:none}
body[data-page=today] .bar:has(#msg:empty){display:none}
body[data-page=today] main{max-width:1040px}
@media (min-width:900px){body.ui-has-shell[data-page=today] main{max-width:1120px}}

/* the head: date · name · place, with the status pill. (.full is index.html's own terminal-screen class: never let it stretch the pill) */
.ui-pill.full{min-height:0;display:inline-flex;flex-direction:row;text-align:left}
.td-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px;margin:8px 0 6px}
.td-head .td-title{flex:1 1 320px;min-width:0}
.td-date{margin:0 0 2px;font-size:15px;font-weight:600;color:var(--ink2)}
.td-head h1{font-size:34px;margin:0}
.td-place{margin:4px 0 0;font-size:16px;color:var(--ink2)}
.td-pill{margin:6px 0 0;font-size:16px;padding:10px 18px}
.td-pill b{font-weight:800}
.td-dot{width:10px;height:10px;border-radius:50%;background:currentColor;flex:0 0 auto}
.td-hours{margin:0 0 18px;font-size:14px;color:var(--ink2)}

/* cards */
main section.td-card{padding:24px 26px;margin:0 0 20px}
.td-card h2{font-size:20px;margin:0 0 4px}
.td-cardhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 16px}
.td-cardhead .sub{margin:0}
.td-more{margin:14px 0 0;font-weight:600}

/* "What's true right now?" — big buttons: icon + word, tinted in their own colour; the chosen one ringed (never colour alone) */
.td-states{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
button.state.td-state{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;
  border:1.5px solid var(--closed-line);background:var(--closed-bg);color:var(--closed);border-radius:var(--r2);font-size:18px;font-weight:700;line-height:1.2;text-align:center}
button.state.td-state.k-open{background:var(--open-bg);border-color:var(--open-line);color:var(--open)}
button.state.td-state.k-filling{background:var(--filling-bg);border-color:var(--filling-line);color:var(--filling)}
button.state.td-state.k-full{background:var(--full-bg);border-color:var(--full-line);color:var(--full)}
button.state.td-state.k-other{background:var(--tint);border-color:#C7D2F0;color:var(--action)}
button.state.td-state[aria-pressed=true]{border-width:3px;border-color:currentColor;box-shadow:0 0 0 3px var(--surface),0 0 0 5px currentColor;font-weight:800}
button.state.td-state:hover:not(:disabled){filter:brightness(.97)}
button.state.td-state:disabled{opacity:.45}
button.state.td-state.cap:disabled{opacity:.4;cursor:not-allowed}
.td-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:16px 0 0}
button.link.td-link{background:none;border:0;padding:10px 0;min-height:44px;font:inherit;font-weight:700;color:var(--action);text-decoration:underline;cursor:pointer}
.td-links p{margin:0;font-size:14px;color:var(--ink2)}
.caphint{font-size:14px}

/* areas + on their way, side by side on a desktop */
.td-grid{display:grid;grid-template-columns:1fr;gap:0 20px}
@media (min-width:900px){.td-grid{grid-template-columns:1fr 1fr}.td-grid>div:empty{display:none}}
.td-grid:has(>div:empty)>div:not(:empty){grid-column:1/-1}
ul.td-areas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.td-areas li{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-weight:600;font-size:16px}
.td-chip{font-size:14px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.td-chip.c-open{background:var(--open-bg);color:var(--open)}
.td-chip.c-filling{background:var(--filling-bg);color:var(--filling)}
.td-chip.c-full{background:var(--full-bg);color:var(--full)}
.td-chip.c-closed,.td-chip.c-none{background:var(--closed-bg);color:var(--closed)}
.td-chip.c-none{font-weight:600}
.td-badge{background:var(--action);color:#fff;font-weight:700;font-size:14px;padding:4px 12px;border-radius:999px}
.td-omw{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:0 0 10px}
.td-omw.new{background:var(--tint);border-color:#C7D2F0;flex-direction:column;align-items:flex-start}
.td-omw.new b{font-size:17px}
.td-omw .sub{margin:0}
a.primary.td-reply{width:auto;min-height:44px;font-size:16px;padding:10px 20px;margin-top:4px}
.td-said{color:var(--open);font-weight:700}

/* the setup strip: "Finish setting up · n of 5 done" + the next steps */
.td-setup{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.td-setupl{flex:1 1 280px}
.td-setupl h2{margin:0}
.td-setupl .ob-bar{margin:12px 0 0;max-width:420px}
.td-setupr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
a.plain.td-step{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line2);border-radius:var(--r);color:var(--ink);font-weight:600;text-decoration:none;background:var(--surface)}
a.plain.td-step:hover{border-color:var(--accent)}
.td-all{font-weight:600}

/* phone (04): one column, the pill under the name, 2×2 status buttons */
@media (max-width:899.98px){
  .td-head h1{font-size:28px}
  .td-states{grid-template-columns:1fr 1fr;gap:12px}
  button.state.td-state{min-height:76px;font-size:17px}
  main section.td-card{padding:20px}
  .td-grid>#omwCard{order:-1}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
 * ★ STAGE 4 (0.23.3) · the staff screens 05–06: phone.html (quick status) and board.html with the staff look.
 *   LETTER §4: dark ground #0B0F17, surfaces #161C27, white text; solid bright buttons with dark text; each ≥ 150 px with a
 *   56 px icon, a 24 px word and a hint; the chosen one gets a 5 px ring and an outer ring in its own colour.
 *   ★ Paul: a Day / Night switch. Night = the letter's dark (the default). Day = high-contrast light for bright sun: white
 *   ground, near-black text, the same bright buttons with a dark edge. The choice is on <html data-theme>, per phone.
 *   Scoped to body.staff, so no other page changes. Every colour pair here passes WCAG AA for its text size. */
body.staff{
  --ground:#0B0F17;--surface:#161C27;--border:#344054;--ink:#FFFFFF;--ink2:#D0D5DD;--ink3:#98A2B3;
  --bg:var(--surface);--bg2:var(--ground);--text:var(--ink);--text2:var(--ink2);--text3:var(--ink3);--line:var(--border);--line2:#475467;
  --ok-bg:#054F31;--ok:#75E0A7;--warn-bg:#4E1D09;--warn:#FEC84B;--bad-bg:#55160C;--bad:#FDA29B;--info-bg:#1D2939;--info:#A4BCFD;
  --teal-bg:#054F31;--teal:#75E0A7;--amber-bg:#4E1D09;--amber:#FDB022;--red-bg:#55160C;--red:#FDA29B;
  --action:#A4BCFD;--action-hover:#C7D7FE;--accent:#A4BCFD;--tint:#1D2939;
  --st-sp:#32D583;--st-sp-ink:#052E16;--st-fi:#FDB022;--st-fi-ink:#3B1D02;--st-fu:#F97066;--st-fu-ink:#3A0A07;--st-cl:#D0D5DD;--st-cl-ink:#101828;
  --st-ring:#FFFFFF;--st-edge:transparent;--st-omw:#1D3B8B;
  background:var(--ground);color:var(--ink);color-scheme:dark;
}
html[data-theme=day] body.staff{
  --ground:#FFFFFF;--surface:#F2F4F7;--border:#98A2B3;--ink:#101828;--ink2:#344054;--ink3:#475467;
  --line2:#667085;
  --ok-bg:#ECFDF3;--ok:#05603A;--warn-bg:#FFFAEB;--warn:#7A2E0E;--bad-bg:#FEF3F2;--bad:#912018;--info-bg:#EEF2FB;--info:#1D3B8B;
  --teal-bg:#ECFDF3;--teal:#05603A;--amber-bg:#FFFAEB;--amber:#B54708;--red-bg:#FEF3F2;--red:#912018;
  --action:#1D3B8B;--action-hover:#142B66;--accent:#1D3B8B;--tint:#EEF2FB;
  --st-ring:#101828;--st-edge:#101828;
  color-scheme:light;
}
body.staff main{max-width:520px;padding:18px 16px 120px}
body.staff a{color:var(--action)}
body.staff main section{background:var(--surface);border-color:var(--border)}
body.staff .chip{background:transparent;border-color:var(--line2);color:var(--ink2)}
body.staff .bar{background:var(--surface);border-top-color:var(--border)}
body.staff button.plain{background:transparent;color:var(--ink);border:2px solid var(--line2)}
body.staff button.plain:hover:not(:disabled){background:var(--surface)}
body.staff button.primary{background:var(--ink);color:var(--ground)}
body.staff :focus-visible{outline:3px solid var(--action);outline-offset:3px}

/* the top row: the place (kicker) and the area / screen (title), Day / Night, the OnMyWay button */
.st-top{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.st-head{flex:1 1 auto;min-width:0}
.st-kicker{font-size:14px;font-weight:600;color:var(--ink3);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
body.staff h1.st-title{font-size:24px;font-weight:800;margin:2px 0 0;line-height:1.2}
.st-theme{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;border-radius:14px;border:2px solid var(--line2);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.st-omw,.st-backbtn{position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;text-decoration:none}
body.staff .st-omw{background:var(--st-omw);color:#FFFFFF}
body.staff .st-backbtn{background:var(--surface);border:1px solid var(--border);color:var(--ink);width:52px;height:52px}
.st-badge{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#FDB022;color:#101828;
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.st-ask{font-size:17px;font-weight:700;color:var(--ink2);margin:0 0 10px}
.st-note{font-size:15px;color:var(--ink2);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin:0 0 12px}
.st-areas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.st-area{min-height:48px;padding:0 16px;border-radius:12px;border:2px solid var(--line2);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.st-area[aria-pressed=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* the big buttons (05): 2 × 2, solid, ≥ 150 px */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px}
body.staff button.st-big{border-radius:20px;border:2px solid var(--st-edge);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:150px;padding:12px;font:inherit;cursor:pointer;text-align:center;opacity:1}
body.staff button.st-big .st-word{font-size:24px;font-weight:800;line-height:1.15}
body.staff button.st-big .st-hint{font-size:14px;font-weight:600;opacity:.9}
body.staff button.st-big.sp{background:var(--st-sp);color:var(--st-sp-ink)}
body.staff button.st-big.fi{background:var(--st-fi);color:var(--st-fi-ink)}
body.staff button.st-big.fu{background:var(--st-fu);color:var(--st-fu-ink)}
body.staff button.st-big.cl{background:var(--st-cl);color:var(--st-cl-ink)}
body.staff button.st-big[aria-pressed=true]{border:5px solid var(--st-ring);box-shadow:0 0 0 3px var(--ground),0 0 0 7px var(--st-tone,var(--st-ring))}
body.staff button.st-big.sp{--st-tone:var(--st-sp)}body.staff button.st-big.fi{--st-tone:var(--st-fi)}
body.staff button.st-big.fu{--st-tone:var(--st-fu)}body.staff button.st-big.cl{--st-tone:var(--st-cl)}
body.staff button.st-big:disabled{cursor:wait}
body.staff button.st-big.cap:disabled{cursor:not-allowed;opacity:.4}

/* "Customers now see: X" */
.st-now{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin:0 0 14px}
.st-now b{display:block;font-size:16px;font-weight:800}
.st-now span{display:block;font-size:14px;color:var(--ink3)}
.st-dot{flex:0 0 14px;width:14px;height:14px;border-radius:50%;background:var(--st-cl)}
.st-dot.sp{background:var(--st-sp)}.st-dot.fi{background:var(--st-fi)}.st-dot.fu{background:var(--st-fu)}
html[data-theme=day] .st-dot{box-shadow:0 0 0 2px var(--ink)}

/* the venue's smaller taps, "Back to our usual hours", sign out */
body.staff main section.st-venue{padding:16px;margin:0 0 14px;border-radius:16px}
body.staff .st-venue h2{font-size:16px;margin:0 0 10px}
body.staff button.state.st-small{min-height:52px;flex:1 1 140px;border-radius:12px;border:2px solid var(--line2);background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:700}
body.staff button.state.st-small[aria-pressed=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
body.staff button.state.st-small:disabled{opacity:.5}
.st-back{width:100%;min-height:52px;border-radius:12px;border:2px solid var(--line2);background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer;margin:0 0 14px}
.st-foot{text-align:center;margin:8px 0 0}
body.staff .who2{color:var(--ink3);margin:-6px 0 12px}
body.staff .caphint{color:var(--ink3)}

/* the board with the staff look (06): the waiting ones framed amber, "NEW · REPLY NOW", three big replies stacked */
.st-new{display:none}
body.staff .summary,body.staff .stats{background:var(--surface);border-color:var(--border)}
body.staff .lane h2{font-size:17px;color:var(--ink2)}
body.staff .card{background:var(--surface);border-color:var(--border);border-radius:20px;padding:16px}
body.staff #laneWaiting .card{border:3px solid #FDB022;box-shadow:none}
html[data-theme=day] body.staff #laneWaiting .card{border-color:#B54708}
body.staff #laneWaiting .st-new{display:flex;align-items:center;gap:10px;color:var(--amber);font-weight:800;font-size:15px;letter-spacing:.04em;margin:0 0 12px}
body.staff .party{background:var(--tint);min-width:64px;height:64px;border-radius:16px}
body.staff .party b{font-size:28px}
body.staff .facts .line1{font-size:20px;font-weight:800}
body.staff .facts .line2{font-size:15px;color:var(--ink2)}
body.staff .replies{flex-direction:column;gap:10px;margin:14px 0 0}
body.staff button.reply{width:100%;min-height:64px;border-radius:16px;font-size:20px;font-weight:800;border:2px solid var(--st-edge)}
body.staff button.reply[data-reply=space_held]{min-height:84px;font-size:22px;background:var(--st-sp);color:var(--st-sp-ink)}
body.staff button.reply[data-reply=come_on_in]{background:var(--st-sp);color:var(--st-sp-ink)}
body.staff button.reply[data-reply=worth_the_wait]{min-height:72px;background:var(--st-fi);color:var(--st-fi-ink)}
body.staff button.reply[data-reply=full]{background:transparent;color:var(--red);border-color:var(--st-fu)}
html[data-theme=day] body.staff button.reply[data-reply=full]{border-color:#912018}
body.staff button.reply[aria-pressed=true]{border:5px solid var(--st-ring)}
body.staff .confirm{background:var(--red-bg);color:var(--red);border-radius:16px;font-size:16px}
body.staff .confirm button{min-height:52px;font-size:16px}
body.staff .said{font-size:16px;color:var(--ink2)}body.staff .said b{color:var(--ink)}
body.staff .reward{background:var(--amber-bg);color:var(--amber)}
body.staff .card .top{flex-wrap:wrap}
body.staff .card .facts{flex:1 1 180px}
body.staff .card .clock{flex:1 1 100%;font-size:16px;font-weight:700;color:var(--ink2)}
body.staff .card .clock.urgent{color:var(--amber)}
body.staff main section.lane{background:transparent;border:0;padding:0}

/* ════════════════════════════════════════════════════════════════════════════
 * ★ STAGE 5 (0.23.4) · 07 YOUR LISTING (desktop): two columns from 1000 px — the form, and a side column with
 *   "How we've checked you" and the Save card (the page's #bar, docked there by index-page.js dockBar()).
 *   Phone: one column, the bar stays at the bottom as before. Scoped to body[data-page=listing].
 * ════════════════════════════════════════════════════════════════════════════ */
body[data-page=listing] .ls-head{align-items:center}
body[data-page=listing] .ls-head h1{font-size:32px;font-weight:800;letter-spacing:-.01em}
body[data-page=listing] .ls-preview{font-weight:700;color:var(--action);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
body[data-page=listing] #listingIntro{font-size:16px;margin:-8px 0 20px}
body[data-page=listing] main section{border-radius:var(--r2);padding:22px 24px;margin:0 0 16px}
body[data-page=listing] main section h2{font-size:20px;font-weight:700;margin:0 0 10px}
body[data-page=listing] main label,body[data-page=listing] .lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px}
body[data-page=listing] main input[type=text],body[data-page=listing] main input[type=url],body[data-page=listing] main input[type=tel],
body[data-page=listing] main input[type=email]{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);padding:12px 14px;min-height:48px}
body[data-page=listing] .ls-ro{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--ground);font-size:16px;color:var(--ink)}
body[data-page=listing] .ls-warn{margin:12px 0 0;padding:12px 14px;border:1px solid var(--filling-line);border-radius:var(--r);background:var(--filling-bg);color:var(--filling);font-size:14px}
body[data-page=listing] .ls-two{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){body[data-page=listing] .ls-two{grid-template-columns:1fr 1fr}}
body[data-page=listing] .ls-read{margin:16px 0 0;padding:14px 16px;border-radius:var(--r);background:var(--ground)}
body[data-page=listing] .ls-read .lbl{font-weight:700;margin:0 0 8px}
body[data-page=listing] .ls-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
body[data-page=listing] .ls-days b{display:block;font-size:14px;color:var(--ink)}
body[data-page=listing] .ls-days span{display:block;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
body[data-page=listing] .ls-days .shut b,body[data-page=listing] .ls-days .shut span{color:var(--ink3)}
@media (max-width:560px){body[data-page=listing] .ls-days{grid-template-columns:repeat(4,minmax(0,1fr))}}
body[data-page=listing] .ls-card h2{font-size:20px}
body[data-page=listing] .ls-ticks{list-style:none;margin:12px 0 0;padding:0}
body[data-page=listing] .ls-ticks li{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
body[data-page=listing] .ls-ticks .ic{flex:0 0 20px;padding-top:2px}
body[data-page=listing] .ls-ticks li.ok .ic{color:var(--open)}
body[data-page=listing] .ls-ticks li.todo .ic{color:var(--ink3)}
body[data-page=listing] .ls-ticks .why{font-size:14px;color:var(--ink2)}
body[data-page=listing] .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body[data-page=listing] .bar .reach{flex:1 0 100%;margin:0;font-size:13px;color:var(--ink2);text-align:center}
body[data-page=listing] .bar div{flex-wrap:wrap}
@media (max-width:999.98px){body[data-page=listing] .bar .reach{display:none}}
@media (min-width:1000px){
  body.ui-has-shell[data-page=listing] main{max-width:1240px}
  body[data-page=listing] .ls-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
  body[data-page=listing] .ls-side{position:sticky;top:24px}
  body[data-page=listing] main{padding-bottom:48px}
  body[data-page=listing] .bar.docked{position:static;border:1px solid var(--border);border-radius:var(--r2);padding:20px;background:var(--surface)}
  body[data-page=listing] .bar.docked div{flex-direction:column;align-items:stretch;gap:10px}
  body[data-page=listing] .bar.docked .msg{order:3;text-align:center}
  body[data-page=listing] .bar.docked button.primary{background:var(--action);color:#fff;min-height:52px;font-size:17px;border-radius:12px}
  body[data-page=listing] .bar.docked button.primary:hover:not(:disabled){background:var(--action-hover)}
}

/* ★ STAGE 5b (0.23.5) · 08 PHOTOS & EVENTS (phone first): the "Logo & photos" tile grid and the "Events" card.
 *   Scoped to body[data-page=photos]. Three tiles a row on a phone, four from 700 px. Every action button stays
 *   visible (no hover-only controls): the drives press them, and so do thumbs. */
body[data-page=photos] main{max-width:760px}
body[data-page=photos] .pe-top{display:block;margin:8px 0 18px}
body[data-page=photos] .pe-top h1{font-size:32px;font-weight:800;letter-spacing:-.01em;margin:0}
body[data-page=photos] .pe-top .sub{font-size:17px;margin:4px 0 0}
body[data-page=photos] .pe-card{border:1px solid var(--border);border-radius:22px;padding:22px 20px;margin:0 0 18px;background:var(--surface)}
body[data-page=photos] .pe-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
body[data-page=photos] .pe-head h2{font-size:22px;font-weight:700;margin:0}
body[data-page=photos] .pe-count{font-size:15px;font-weight:600;color:var(--ink2);white-space:nowrap}
body[data-page=photos] #rule{font-size:14px;margin:0 0 14px}
body[data-page=photos] .pe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (min-width:700px){body[data-page=photos] .pe-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
body[data-page=photos] #list{display:contents}
body[data-page=photos] .pe-tile-w{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;border:0}
body[data-page=photos] .pe-ph{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#D0D5DD}
body[data-page=photos] .pe-ph img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;background:transparent}
body[data-page=photos] .pe-ph.logo{background:#E4E7EC}
body[data-page=photos] .pe-ph.logo img{object-fit:contain;padding:10px;background:#fff}
body[data-page=photos] .pe-ph.empty{display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--ink2);font-size:15px;text-align:center;padding:8px}
body[data-page=photos] .pe-ph.logo.empty{padding:34px 8px 8px}   /* ★ 0.23.6 · stage 6: "No logo yet" clears the Logo badge (they overlapped at 390) */
body[data-page=photos] .ph.hidden .pe-ph img{opacity:.45}
body[data-page=photos] .pe-badge{position:absolute;top:8px;left:8px;margin:0;font-size:13px;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--navy);color:#fff}
body[data-page=photos] .pe-badge.soft{background:rgba(255,255,255,.9);color:var(--ink2);font-weight:600}
body[data-page=photos] .pe-badge.off{top:auto;bottom:8px;right:8px;background:var(--filling-bg);color:var(--filling);font-weight:600;font-size:12px;text-align:center}
body[data-page=photos] .pe-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
body[data-page=photos] .pe-acts .pe-btn{width:100%;padding-left:2px;padding-right:2px}
body[data-page=photos] .pe-acts .wide{grid-column:1/-1;justify-content:center}
body[data-page=photos] .pe-acts .is{color:var(--ink2);border-color:transparent;background:var(--ground);cursor:default}
body[data-page=photos] .pe-acts button:disabled{opacity:.35;cursor:default}
body[data-page=photos] #logo .pe-acts{grid-template-columns:1fr}
body[data-page=photos] .pe-what .nw{display:inline;white-space:nowrap;font-size:inherit;color:inherit}
body[data-page=photos] .pe-btn{font:inherit;font-size:13px;font-weight:600;min-height:36px;padding:4px 6px;justify-content:center;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--action);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
body[data-page=photos] .pe-btn.del{color:var(--full)}
body[data-page=photos] .pe-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
body[data-page=photos] label.pe-btn{position:relative;margin:0}
body[data-page=photos] .pe-add{position:relative;aspect-ratio:1/1;border:2px dashed #98A2B3;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--action);font-weight:700;font-size:16px;cursor:pointer;margin:0;background:var(--surface)}
body[data-page=photos] .pe-add .plus{font-size:34px;line-height:1;font-weight:500}
body[data-page=photos] .pe-add:focus-within{outline:3px solid var(--accent);outline-offset:2px}
body[data-page=photos] .pe-note{font-size:15px;color:var(--ink2);margin:16px 0 0}
body[data-page=photos] .preview{margin:16px 0 0;padding:14px;border:1px solid var(--border);border-radius:14px}
body[data-page=photos] .pe-new{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:14px;background:var(--action);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
body[data-page=photos] .pe-new:hover{background:var(--action-hover)}
body[data-page=photos] #evList{display:flex;flex-direction:column;gap:12px;margin:14px 0 0}
body[data-page=photos] .pe-ev{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:16px;color:var(--ink);text-decoration:none}
body[data-page=photos] .pe-ev:hover{border-color:var(--line2)}
body[data-page=photos] .pe-tile{flex:0 0 64px;height:64px;border-radius:12px;background:var(--closed-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
body[data-page=photos] .pe-tile.live{background:var(--tint)}
body[data-page=photos] .pe-tile b{font-size:14px;font-weight:600;color:var(--ink2)}
body[data-page=photos] .pe-tile.live b{color:var(--action)}
body[data-page=photos] .pe-tile span{font-size:24px;font-weight:800;color:var(--ink)}
body[data-page=photos] .pe-what{flex:1 1 auto;min-width:0}
body[data-page=photos] .pe-what b{display:block;font-size:17px;font-weight:700;overflow-wrap:anywhere}
body[data-page=photos] .pe-what span{display:block;font-size:15px;color:var(--ink2)}
body[data-page=photos] .pe-chip{flex:0 0 auto;font-size:14px;font-weight:700;padding:5px 10px;border-radius:8px}
body[data-page=photos] .pe-chip.live{background:var(--open-bg);color:var(--open)}
body[data-page=photos] .pe-chip.draft{background:var(--closed-bg);color:var(--closed)}
body[data-page=photos] .pe-chip.wait{background:var(--filling-bg);color:var(--filling)}
body[data-page=photos] .pe-soon{font-size:17px;font-weight:700;margin:10px 0 4px}
body[data-page=photos] .pe-more{margin:12px 0 0;font-weight:600}
@media (max-width:380px){body[data-page=photos] .pe-head{flex-wrap:wrap}}

/* ★ 0.23.8 · v115 an area's capacity (R240) + who changed it (R241): 05 count · tables · gate · Today · team panel */
body.staff .st-count{text-align:center;margin:0 0 14px}
body.staff .st-stepper{display:flex;align-items:center;justify-content:center;gap:18px}
body.staff button.st-step{width:96px;height:96px;border-radius:24px;border:2px solid var(--line2);background:var(--surface);color:var(--ink);font:inherit;font-size:48px;font-weight:800;line-height:1}
body.staff button.st-step:active:not(:disabled){transform:scale(.97)}
body.staff button.st-step:disabled{opacity:.5}
body.staff .st-n{min-width:110px;font-size:64px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.st-of{font-size:17px;font-weight:700;color:var(--ink2);margin:8px 0 0;text-align:center}
body.staff .st-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:10px 0 14px}
body.staff button.st-table{min-height:84px;border-radius:16px;border:2px solid var(--open-line);background:var(--open-bg);color:var(--open);font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
body.staff button.st-table b{font-size:20px}
body.staff button.st-table span{font-size:14px;font-weight:700}
body.staff button.st-table.occupied{border-color:var(--full-line);background:var(--full-bg);color:var(--full)}
body.staff button.st-table.reserved{border-color:var(--filling-line);background:var(--filling-bg);color:var(--filling)}
.st-gate{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin:0 0 12px;color:var(--ink)}
.st-gate .inline{display:flex;gap:8px;margin:6px 0}.st-gate input{flex:1;min-width:0}
.st-gatechip{font-size:14px;color:var(--ink2);margin:0 0 10px}.st-gatechip button{min-height:32px;padding:0 10px;font-size:13px}
.st-say{margin:0 0 12px}.st-say summary{cursor:pointer;font-weight:700;color:var(--ink2);min-height:44px;display:flex;align-items:center}
.st-say .states{display:flex;flex-wrap:wrap;gap:8px}
.lastchg{display:block;font-size:13px;color:var(--ink3)}
.actlog{list-style:none;padding:0;margin:8px 0 0;font-size:14px;color:var(--ink2)}.actlog li{padding:6px 0;border-top:1px solid var(--border)}
.panel.cap{margin:6px 0 12px}.panel.cap fieldset{border:0;padding:0;margin:8px 0}.panel.cap fieldset:disabled{opacity:.55}
.panel.cap .trow{padding:6px 0}
.capsum{margin:-4px 0 8px}
.td-count{display:inline-flex;align-items:center;gap:6px}.td-count button{min-width:44px;min-height:44px;font-size:22px;font-weight:800}
.td-count output{min-width:56px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.st-say summary::before{content:'▸';margin-right:8px}.st-say[open] summary::before{content:'▾'}
.panel.cap{background:var(--surface);border:1px solid var(--border);color:var(--ink)}.panel.cap b{color:var(--ink)}
/* 0.23.8 · Today: a counted area wraps — name + chip on the first line, the count (or tables) on the second */
ul.td-areas li{flex-wrap:wrap}
ul.td-areas li>span:first-child{flex:1 1 60%;min-width:0}
ul.td-areas li .td-count{order:3;flex:0 0 auto}
ul.td-areas li .td-of{order:4;flex:1 1 auto;font-weight:600}
ul.td-areas li .td-chip{order:2}
ul.td-areas li .lastchg{font-weight:500}
ul.td-areas li .td-of{align-self:center}
/* ★ 0.23.10 · named entrances (v256A, read-gated): the setup block, the pick (05 · Today · Your team), the totals line */
.entr{border-top:1px solid var(--border);padding-top:10px}.entr label b{font-size:15px}
/* ★ 0.23.11 · v258C §4: a dormant list (the area stopped being counted): greyed, no number, no add, no pick; rename and remove still work */
.entr.dormant{opacity:.6}.entr.dormant .entlist b{color:var(--muted,#6b7280);text-decoration:none}
/* ★ 0.23.11 · R243c: the offsite map point, read-only (no drag handle) */
.evpin{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:8px;background:var(--surface,#fff)}.evpin .pinmark{flex:0 0 auto;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brand,#0f766e);margin-top:4px;pointer-events:none}.evpin.approx .pinmark{background:#b45309}.evpin.none .pinmark{background:#9ca3af}.evpin p{margin:0}
.entlist{list-style:none;padding:0;margin:8px 0}.entlist li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border)}.entlist li .who{flex:1}
.entpick{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink2)}.entpick select{min-height:40px;font-size:15px}
.entpick.big select{min-height:52px;font-size:17px;width:100%}
.td-entpick{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);margin-right:6px}.td-entpick select{min-height:32px;font-size:13px}
.entlimit{color:var(--ink2)}.enttot{margin:8px 0 0}