/* ShowroomUp 2.6 — iOS dark-mode pass 3. Apple HIG tokens: true black page, #1C1C1E grouped surfaces, systemGreen accent.
   One rule per line on purpose: the file stays greppable by class name. Semantic colours (red/orange/cyan) are for status only. */
:root{color-scheme:dark;--bg:#000;--surface:#1C1C1E;--raised:#2C2C2E;--fill:rgba(120,120,128,.24);--fill2:rgba(120,120,128,.14);--border:rgba(84,84,88,.65);--text:#fff;--muted:rgba(235,235,245,.6);--faint:rgba(235,235,245,.3);--accent:#30D158;--accent-ink:#000;--tint:rgba(48,209,88,.16);--red:#FF453A;--orange:#FF9F0A;--yellow:#FFD60A;--blue:#0A84FF;--cyan:#64D2FF;--radius:12px;--hair:.5px;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:17px}
@supports (font:-apple-system-body){html{font:-apple-system-body}body{font-family:var(--font)}.page-heading h1{font:-apple-system-large-title;font-family:var(--font);font-weight:700}.modal-head h2,.panel-title,.shift-member strong{font:-apple-system-headline;font-family:var(--font)}.group-title,.group-foot,.footer,.stat-title,.panel-footer{font:-apple-system-footnote;font-family:var(--font)}}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:1rem;line-height:1.2941rem;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a,[data-action]{touch-action:manipulation}
button,.queue-row,.team-card,.choice-row,.nav a,.mobile-nav a,.avatar-tap{-webkit-touch-callout:none}
button,.chip,.segmented,.mobile-nav,.choice-row,.switch,.stepper{-webkit-user-select:none;user-select:none}
button{cursor:pointer;color:inherit;border:0;background:none;padding:0}
button:disabled{cursor:not-allowed;opacity:.4}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(48,209,88,.55);outline-offset:2px}
a{color:var(--accent)}
svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
h1,h2,h3,p{margin:0}
::selection{background:var(--accent);color:#000}
[hidden]{display:none!important}
.tabular{font-variant-numeric:tabular-nums}
.skip-link{position:fixed;left:16px;top:-60px;z-index:1000;background:var(--accent);color:#000;padding:12px 20px;border-radius:12px;font-weight:600}
.skip-link:focus{top:10px}
.boot{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}
.boot h1{font-size:1.6471rem;font-weight:700;letter-spacing:-.4px}
.boot h1 span{font-size:0.7059rem;vertical-align:top}
.boot p{color:var(--muted);font-size:0.8824rem}
.loader{width:22px;height:22px;border:2px solid var(--fill);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Brand: app-icon style mark (≈22% radius like a Home Screen icon) + plain 17px wordmark, no tracking. */
.brand-mark{width:32px;height:32px;background:var(--accent);color:#000;border-radius:8px;display:grid;place-items:center;font-size:1.5294rem;font-weight:700;line-height:1;flex-shrink:0}
.brand-mark svg{width:20px;height:20px;stroke-width:2.8}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;color:var(--text);text-decoration:none;font-size:1rem;font-weight:600;letter-spacing:-.2px;min-height:44px;flex-shrink:0}
.brand small{display:none}
.eyebrow{font-size:0.7647rem;text-transform:uppercase;letter-spacing:.3px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;line-height:1.0588rem}
/* ===== Desktop shell: black sidebar with a hairline, iPadOS-style tinted selection ===== */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.sidebar{position:sticky;top:0;height:100dvh;border-right:var(--hair) solid var(--border);padding:max(20px,env(safe-area-inset-top)) 12px 16px;display:flex;flex-direction:column;background:var(--bg);z-index:20;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.workspace{margin:20px 0 24px;padding:12px;display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:12px}
.workspace-icon{background:var(--tint);color:var(--accent);display:grid;place-items:center;width:36px;height:36px;border-radius:9px;flex-shrink:0}
.workspace-title{font-size:0.8824rem;font-weight:600;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace p{font-size:0.7647rem;color:var(--muted);margin-top:1px;line-height:1.0588rem}
.nav-label{font-size:0.7647rem;text-transform:uppercase;color:var(--muted);padding:0 16px;margin:0 0 8px;letter-spacing:.2px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;gap:12px;align-items:center;padding:0 12px;min-height:44px;border-radius:10px;text-decoration:none;color:var(--text);font-size:1rem}
.nav a svg{width:24px;height:24px;color:var(--accent)}
.nav a.active{background:var(--tint);color:var(--accent);font-weight:600}
.nav-count{margin-left:auto;font-size:0.8824rem;color:var(--muted);font-variant-numeric:tabular-nums}
.nav a.active .nav-count{color:var(--accent)}
.nav-count.alert{background:var(--red);color:#fff;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;padding:0 6px;font-size:0.7059rem}
.sidebar-bottom{margin-top:auto}
.account{display:flex;text-align:left;align-items:center;gap:10px;padding:14px 8px 0;border-top:var(--hair) solid var(--border);width:100%;min-height:44px}
.account strong{font-size:0.8824rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;font-weight:600}
.account small{font-size:0.7647rem;color:var(--muted)}
.account svg{margin-left:auto;width:14px;color:var(--faint);stroke-width:2.4}
/* Avatars: flat hue-keyed circles, white initials, no ring (iOS Contacts look). */
.avatar{--hue:120;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:hsl(var(--hue) 28% 34%);color:#fff;font-size:0.8235rem;font-weight:600;position:relative;overflow:hidden}
.avatar.large{width:72px;height:72px;font-size:1.5294rem}
.avatar.small{width:28px;height:28px;font-size:0.6471rem}
.avatar.big{width:52px;height:52px;font-size:1.0588rem}
.avatar .status-dot{position:absolute;bottom:0;right:0;border:3px solid var(--surface);width:13px;height:13px;margin:0;z-index:2}
.avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}
.avatar-tap{position:relative;display:inline-flex;cursor:pointer;border-radius:50%}
.avatar-tap .tap-x{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(255,69,58,.85);border-radius:50%;opacity:0;transition:opacity .15s}
.avatar-tap .tap-x svg{width:16px;height:16px;stroke:#fff;stroke-width:2.6}
/* ===== Top bar ===== */
.main-shell{min-width:0}
.topbar{min-height:52px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:var(--hair) solid var(--border);background:var(--bg)}
.breadcrumb{color:var(--muted);font-size:0.8824rem;display:flex;gap:8px;align-items:center;min-width:0}
.breadcrumb svg{width:16px;height:16px}
.breadcrumb b{color:var(--text);font-weight:600}
.topbar-right{display:flex;gap:12px;align-items:center;min-width:0}
.clock{font-variant-numeric:tabular-nums;font-size:0.8824rem;color:var(--text);white-space:nowrap}
.clock small{color:var(--muted);font-size:0.7647rem;margin-right:8px}
.connection{display:inline-flex;align-items:center;gap:6px;font-size:0.7647rem;font-weight:600;color:var(--accent);background:var(--tint);padding:4px 10px;border-radius:999px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.connection.demo{color:var(--orange);background:rgba(255,159,10,.16)}
.connection.stale{color:var(--red);background:rgba(255,69,58,.16)}
.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--accent);flex-shrink:0}
.connection .status-dot{background:currentColor}
.icon-btn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--fill);color:var(--accent);flex-shrink:0}
.icon-btn svg{width:18px;height:18px;stroke-width:2}
.mobile-brand{display:none}
.nav-center{display:none}
/* ===== Page ===== */
.main{padding:24px 24px 32px;max-width:1500px;margin:auto}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.page-heading h1{font-size:2rem;font-weight:700;letter-spacing:-.4px;line-height:2.4118rem}
.page-heading p{font-size:0.8824rem;color:var(--muted);margin-top:2px;line-height:1.1765rem}
.heading-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.heading-actions .btn{min-height:36px;border-radius:999px;font-size:0.8824rem;padding:0 14px}
/* Buttons: filled green primary, gray-fill secondary, red-tint destructive. Press = opacity, never a ripple. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;min-height:44px;border-radius:12px;background:var(--fill);color:var(--text);font-weight:600;font-size:1rem;white-space:nowrap;text-decoration:none}
.btn svg{width:18px;height:18px;stroke-width:2}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.secondary{background:var(--fill);color:var(--text)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.danger{background:rgba(255,69,58,.16);color:var(--red)}
.btn.tinted{background:var(--tint);color:var(--accent)}
.btn.full{width:100%;min-height:50px}
.btn.compact{min-height:34px;padding:0 12px;font-size:0.8824rem;border-radius:999px}
.btn:active:not(:disabled),.icon-btn:active,.chip:active,.queue-row:active,.choice-row:active,.link-btn:active,.segmented button:active,.mobile-nav a:active{opacity:.7}
/* Touch highlight: instant in, 180ms out. Rows get a white wash; filled controls brighten instead so green stays green. */
@media (hover:none){
 .queue-row:active,.team-card:active,.choice-row:active,.account:active,.row-link:active,.row-value:active,.chip-group.list .chip:active,.nav a:active,.customer:active{opacity:1;background-color:rgba(255,255,255,.08);transition:none}
 .btn:active:not(:disabled),.icon-btn:active,.chip:active,.segmented button:active,.link-btn:active,.stepper button:active{opacity:1;filter:brightness(1.25);transition:none}
 .mobile-nav a:active{opacity:1;background:none}
}
.queue-row,.team-card,.choice-row,.account,.row-link,.row-value,.chip,.btn,.icon-btn,.link-btn,.stepper button{transition:background-color .18s ease-out,filter .18s ease-out}
/* Banners */
.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,214,10,.12);border-radius:999px;padding:4px 4px 4px 14px;margin-bottom:16px;color:var(--yellow);font-size:0.7647rem;line-height:1.0588rem;white-space:nowrap;min-height:36px}
.demo-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.demo-banner b{font-weight:700;letter-spacing:.3px}
.demo-banner button{color:var(--yellow);font-size:0.7647rem;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:2px;min-height:28px;padding:0 8px 0 12px;border-radius:999px;background:rgba(255,214,10,.14)}
.demo-banner button svg{width:14px;height:14px;stroke-width:2.4}
.connection-banner{padding:12px 16px;background:rgba(255,69,58,.14);color:var(--red);border-radius:12px;margin-bottom:16px;font-size:0.8824rem;line-height:1.1765rem;display:flex;align-items:center;justify-content:space-between;gap:12px}
.connection-banner .btn{background:var(--red);color:#fff}
/* Stat tiles */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stat-card{padding:14px 16px;border-radius:12px;background:var(--surface)}
.stat-title{color:var(--muted);font-size:0.7647rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:8px;line-height:1.0588rem}
.stat-title svg{color:var(--accent);width:18px;height:18px}
.stat-body{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px;gap:8px;flex-wrap:wrap}
.stat-value{font-size:2rem;font-weight:700;letter-spacing:-.5px;line-height:2.3529rem;font-variant-numeric:tabular-nums}
.stat-note{color:var(--muted);font-size:0.7647rem;white-space:nowrap}
.stat-note.accent{color:var(--accent)}
.stat-spark{display:none}
/* Next-up hero: a plain #1C1C1E card — size and the green avatar carry it, no orbit art. */
.stage-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:12px;margin-bottom:16px}
.next-card{position:relative;overflow:hidden;min-height:240px;background:var(--surface);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.next-card.paused{opacity:.75}
.orbital,.next-card:after{display:none}
.next-label{display:flex;align-items:center;gap:6px;font-size:0.7647rem;font-weight:600;letter-spacing:.3px;color:var(--accent);text-transform:uppercase}
.pulse-dot{height:8px;width:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--tint)}
.next-pos{font-size:0.7647rem;color:var(--muted);margin-top:8px;line-height:1.0588rem;font-variant-numeric:tabular-nums}
.next-identity{display:flex;gap:14px;align-items:center;margin-top:18px}
.next-identity>div{min-width:0}
/* The name never wraps: it ellipsizes, and the two caption lines below stay on fixed 20/18px rhythm. */
.next-identity h2{font-size:1.6471rem;line-height:2rem;letter-spacing:-.4px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-identity p{font-size:0.8824rem;color:var(--text);margin-top:2px;line-height:1.1765rem}
.next-identity p.next-sub{font-size:0.7647rem;color:var(--muted);line-height:1.0588rem;margin-top:1px;font-variant-numeric:tabular-nums}
.next-identity .avatar{background:var(--accent);color:#000}
.next-controls{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px}
.next-controls .primary{min-width:170px}
.next-footer{display:flex;align-items:center;gap:6px;font-size:0.7647rem;color:var(--muted);margin-top:14px;line-height:1.0588rem}
.next-footer svg{width:14px;height:14px;color:var(--faint)}
.next-footer strong{color:var(--text);font-weight:600}
/* Turn meter: big tabular countdown, thin track, green → orange → red. */
.turn-meter{display:flex;flex-direction:column;gap:8px;margin:18px 0 0;position:relative;z-index:1}
.turn-meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.tm-left{font-size:2.1176rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.5px;white-space:nowrap}
.tm-at{font-size:0.7647rem;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tm-track{display:block;height:6px;border-radius:99px;background:rgba(120,120,128,.2);overflow:hidden}
.tm-fill{display:block;height:100%;border-radius:99px;background:var(--accent)}
.turn-meter.warn .tm-left{color:var(--orange)}.turn-meter.warn .tm-fill{background:var(--orange)}
.turn-meter.late .tm-left{color:var(--red)}.turn-meter.late .tm-fill{background:var(--red)}
.turn-meter.big{margin:24px 0 0;max-width:520px}.turn-meter.big .tm-left{font-size:2.8235rem}.turn-meter.big .tm-at{font-size:0.8824rem}.turn-meter.big .tm-track{height:10px}
.turn-meter.slim{margin:4px 0 0;gap:0;min-width:56px}.turn-meter.slim .tm-track{height:3px}
/* Shift card */
.shift-card{border-radius:16px;padding:20px;background:var(--surface);display:flex;flex-direction:column}
.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-heading h2{font-size:0.7647rem;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--tint);color:var(--accent);border-radius:999px;padding:3px 9px;font-size:0.7059rem;font-weight:600;white-space:nowrap;line-height:0.9412rem}
.tag .status-dot{display:none}
.tag.busy{background:rgba(255,159,10,.16);color:var(--orange)}
.tag.break{background:rgba(255,159,10,.16);color:var(--orange)}
.tag.off{background:var(--fill2);color:var(--muted)}
.tag.role{background:rgba(10,132,255,.16);color:var(--blue)}
.tag.locked{background:rgba(255,69,58,.16);color:var(--red)}
.tag.locked svg{width:12px;height:12px}
.tag.appt{font-size:0.6471rem;padding:1px 7px;vertical-align:middle}
.shift-member{display:flex;align-items:center;gap:12px;margin-top:16px}
.shift-member strong{font-size:1rem;display:block;font-weight:600}
.shift-member p{color:var(--muted);font-size:0.7647rem;margin-top:2px;line-height:1.0588rem}
.shift-numbers{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0;gap:0;background:var(--raised);border-radius:12px;padding:12px 0}
.shift-number{border-right:var(--hair) solid var(--border);text-align:center}
.shift-number:last-child{border:0}
.shift-number b{font-size:1.2941rem;font-weight:700;display:block;line-height:1.5294rem;font-variant-numeric:tabular-nums}
.shift-number small{font-size:0.7059rem;color:var(--muted);margin-top:2px;display:block}
.shift-buttons{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.shift-buttons .btn{flex:1;min-width:0;padding-left:8px;padding-right:8px}
.shift-buttons .notice{flex:1 1 100%;margin:0}
/* ===== Inset grouped lists (panels) ===== */
.lower-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:12px;align-items:start}
.panel{background:var(--surface);border-radius:12px;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.panel-title{font-size:1rem;font-weight:600;display:flex;gap:8px;align-items:center}
.panel-title .count{font-size:0.7647rem;min-width:22px;padding:1px 7px;line-height:1.0588rem;border-radius:999px;background:var(--fill);color:var(--muted);text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.panel-subtitle{color:var(--muted);font-size:0.7647rem;margin-top:2px;line-height:1.0588rem}
.link-btn{font-size:0.8824rem;color:var(--accent);display:flex;align-items:center;gap:4px;padding:6px 0;min-height:36px;font-weight:500;white-space:nowrap}
.link-btn svg{width:14px;height:14px;stroke-width:2.2}
.queue-labels{display:none}
.queue{list-style:none;padding:0;margin:0}
.queue-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto 12px;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 16px;min-height:60px;position:relative}
/* Separators start at the text, like a UITableView cell: 16 pad + 28 rank + 12 gap + 40 avatar + 10 gap. */
.queue li+li .queue-row:before{content:"";position:absolute;top:0;left:106px;right:0;height:var(--hair);background:var(--border)}
.rank{width:28px;height:28px;border-radius:50%;background:var(--fill);color:var(--muted);display:inline-grid;place-items:center;font-size:0.7647rem;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}
.queue-row.first .rank{background:var(--accent);color:#000}
.queue-row.bm .rank{background:rgba(255,159,10,.16)}
.queue-row.bm .rank svg,.display-queue-row.bm .rank svg{width:14px;height:14px;stroke:var(--orange);fill:var(--orange)}
.queue-person{display:flex;gap:10px;align-items:center;min-width:0}
.queue-person>span{min-width:0}
.queue-person strong{font-size:1rem;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-person small{display:block;font-size:0.7647rem;color:var(--muted);line-height:1.0588rem}
.queue-person small.next-text{color:var(--accent);font-weight:600}
.queue-person small.bm-text{color:var(--orange)}
.queue-wait{font-size:0.8824rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.queue-ups{font-size:0.8824rem;color:var(--muted);display:flex;gap:4px;align-items:center;font-variant-numeric:tabular-nums}
.queue-ups small{color:var(--faint);font-size:0.7647rem}
.queue-row>svg{width:12px;height:12px;color:var(--faint);stroke-width:2.6}
.panel-footer{padding:10px 16px;font-size:0.7647rem;color:var(--muted);border-top:var(--hair) solid var(--border);display:flex;align-items:center;gap:6px;line-height:1.0588rem}
.panel-footer svg{width:14px;height:14px}
.side-stack{display:grid;gap:12px}
.customer-list{padding:0 16px 4px}
.customer{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:var(--hair) solid var(--border);min-height:56px}
.customer>div{min-width:0}
.customer strong{font-size:1rem;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer p{font-size:0.7647rem;color:var(--muted);margin-top:1px;line-height:1.0588rem}
.customer .duration{margin-left:auto;font-size:0.8824rem;color:var(--cyan);font-variant-numeric:tabular-nums;white-space:nowrap}
.customer .icon-btn{width:32px;height:32px;background:var(--accent);color:#000}
.customer .icon-btn svg{width:16px;height:16px;stroke-width:2.6}
.overdue{color:var(--red);font-weight:700}
[data-limit].overdue{color:var(--red);font-weight:700}
.events-mini{padding:0 16px 8px}
.event-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:var(--hair) solid var(--border);position:relative}
.events-mini .event-item:first-child{border-top:0}
.event-point{width:10px;height:10px;border-radius:50%;background:var(--faint);flex-shrink:0;margin-top:6px}
.event-point.sold{background:var(--accent)}
.event-point.busy{background:var(--cyan)}
.event-point.break{background:var(--orange)}
.event-item p{font-size:0.8824rem;line-height:1.1765rem;color:var(--text)}
.event-item small{font-size:0.7647rem;color:var(--muted);margin-top:2px;display:block;line-height:1.0588rem}
.empty{padding:32px 20px;text-align:center}
.empty svg{width:32px;height:32px;color:var(--faint);margin-bottom:10px}
.empty h3{font-size:1rem;font-weight:600;margin-bottom:4px}
.empty p{font-size:0.8824rem;color:var(--muted);max-width:330px;margin:auto;line-height:1.1765rem}
.empty .btn{margin-top:16px}
.empty-hero h2{margin-top:20px;font-size:1.6471rem;font-weight:700;letter-spacing:-.4px;line-height:2rem}
.empty-hero p{margin:8px 0 18px;color:var(--muted);font-size:0.8824rem}
.footer{display:flex;justify-content:space-between;gap:20px;margin-top:24px;color:var(--faint);font-size:0.7647rem}
.footer strong{color:var(--muted);font-weight:500}
.footer span{display:flex;gap:6px;align-items:center}
.footer svg{width:14px;height:14px}
/* Toolbar: iOS search field + segmented control */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.search{display:flex;align-items:center;max-width:320px;flex:1;position:relative}
.search svg{position:absolute;left:10px;width:18px;height:18px;color:var(--muted)}
/* Attribute selector outranks the generic input rule below, which would otherwise reset the icon inset. */
.search input[type=search]{padding-left:36px;min-height:36px;border-radius:10px;background:var(--fill)}
.segmented{display:inline-flex;gap:2px;background:var(--fill);padding:2px;border-radius:9px;max-width:100%}
.segmented button{font-size:0.7647rem;font-weight:600;padding:0 12px;min-height:32px;border-radius:7px;color:var(--text);white-space:nowrap;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.segmented button.active{background:#636366;box-shadow:0 1px 3px rgba(0,0,0,.35)}
/* Team */
/* Team: inset grouped lists per status (READY · n …); .team-card stays the row class name for the UI suite. */
.team-sections>.group-title{margin-top:27px}.team-sections>.group-title:first-child{margin-top:0}
.team-grid{display:flex;flex-direction:column;background:var(--surface);border-radius:12px;overflow:hidden}
.team-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 16px;min-height:60px;position:relative}
.team-card+.team-card:before{content:"";position:absolute;top:0;left:68px;right:0;height:var(--hair);background:var(--border)}
.team-card-text{flex:1;min-width:0}
.team-card h2{font-size:1rem;font-weight:500;line-height:1.2941rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-card p{font-size:0.7647rem;color:var(--muted);margin-top:1px;line-height:1.0588rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-card>svg:last-child{width:12px;height:12px;color:var(--faint);stroke-width:2.6}
.activity-list .event-item{padding:12px 16px;gap:12px}
.activity-list .event-item:first-child{border-top:0}
.activity-list .event-item time{margin-left:auto;font-size:0.7647rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.activity-list .reason{color:var(--muted);font-size:0.7647rem;margin-top:4px}
/* ===== Forms ===== */
.settings-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:24px;align-items:start}
.padded{padding:16px}
.padded h2{font-size:1.1765rem;font-weight:600;margin-bottom:4px;letter-spacing:-.3px;line-height:1.4706rem}
.padded>p{font-size:0.8824rem;color:var(--muted);margin-bottom:16px;line-height:1.1765rem}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.field-label{font-size:0.7647rem;font-weight:500;color:var(--muted);line-height:1.0588rem}
.field small{font-size:0.7647rem;color:var(--faint);line-height:1.0588rem}
.input,input:not([type=checkbox]),select,textarea{width:100%;border:0;background:var(--surface);color:var(--text);padding:0 14px;min-height:44px;border-radius:12px;outline:none;min-width:0;font-size:1rem;-webkit-appearance:none;appearance:none}
.panel input:not([type=checkbox]),.panel textarea,dialog input:not([type=checkbox]),dialog textarea{background:var(--raised)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0}
input::placeholder,textarea::placeholder{color:var(--faint)}
select{color-scheme:dark}
textarea{min-height:88px;resize:vertical;padding:11px 14px;line-height:1.2941rem}
.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* Settings as iOS grouped rows: label left, value right, 44px rows, separators inset 16px. */
.settings-form{display:block}
.group-title{font-size:0.7647rem;text-transform:uppercase;color:var(--muted);padding:0 16px;margin:0 0 7px;letter-spacing:.2px;line-height:1.0588rem}
.group{background:var(--surface);border-radius:12px;margin-bottom:8px;overflow:hidden}
.group-foot{font-size:0.7647rem;color:var(--muted);padding:0 16px;margin:0 0 8px;line-height:1.0588rem}
.group+.group-title,.group-foot+.group-title{margin-top:27px}
.group .form-row{display:contents}
.group .field{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0 16px;min-height:44px;position:relative}
.group .field+.field:before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hair);background:var(--border)}
.group .field label{font-size:1rem;color:var(--text);font-weight:400;flex:0 1 auto;line-height:1.2941rem}
.group .field input{text-align:right;background:transparent;padding:0;flex:1 1 90px;color:var(--muted);border-radius:0}
.group .field input:focus{color:var(--text);outline:none}
.row-label{font-size:1rem;flex:0 1 auto;line-height:1.2941rem}
.row-value{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;flex:1;min-height:44px;color:var(--muted);font-size:1rem;text-align:right}
.row-value svg{width:12px;height:12px;color:var(--faint);stroke-width:2.6}
.group .row-link{width:100%;text-align:left;color:inherit;cursor:pointer}
.group .row-link .row-value{flex:1}
/* Numeric rows: typed value + iOS stepper (two 44×32 segments). */
.stepper-wrap{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end;min-width:0}
.group .field .stepper-wrap input{flex:0 1 64px;width:64px;padding-right:2px}
.stepper{display:inline-flex;background:var(--fill);border-radius:8px;overflow:hidden;flex-shrink:0}
.stepper button{width:44px;height:32px;font-size:1.2941rem;line-height:1;color:var(--text);display:grid;place-items:center;padding-bottom:2px}
.stepper button+button{border-left:var(--hair) solid var(--border)}
.stepper button:active{background:rgba(255,255,255,.12)}
/* Segmented control inside a row: label left, control right, like Settings › Display. */
.group.seg-row .field{flex-direction:row;align-items:center;gap:12px;padding:6px 16px;min-height:44px}
.group.seg-row .field label{font-size:1rem;color:var(--text);text-transform:none;line-height:1.2941rem;flex:0 1 auto;white-space:nowrap}
.group.seg-row .chip-group.seg{flex:1 1 150px;max-width:200px;min-width:150px}
.settings-form .form-error{margin-bottom:16px}
.settings-form>.btn{margin-top:24px}
.settings-form>.btn+.group-title{margin-top:27px}
.rule-row{display:flex;gap:12px;padding:12px 0;border-top:var(--hair) solid var(--border)}
.rule-row:first-of-type{border-top:0}
.rule-row svg{color:var(--accent);width:22px;height:22px;margin-top:1px}
.rule-row h3{font-size:1rem;font-weight:600}
.rule-row p{font-size:0.7647rem;color:var(--muted);margin-top:2px;line-height:1.0588rem}
.notice{padding:12px 14px;background:var(--raised);border-radius:12px;font-size:0.8824rem;color:var(--muted);line-height:1.1765rem}
.notice.warn{background:rgba(255,159,10,.14);color:var(--orange)}
.notice.danger{background:rgba(255,69,58,.14);color:var(--red)}
.notice svg{width:16px;height:16px;vertical-align:-3px;margin-right:5px}
.notice[data-lock] svg{color:var(--red)}
.data-table-wrap{overflow-x:auto}
.data-table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}
.data-table th{font-size:0.7059rem;letter-spacing:.3px;font-weight:500;color:var(--muted);border-bottom:var(--hair) solid var(--border);padding:10px 16px;text-transform:uppercase}
.data-table td{padding:12px 16px;border-bottom:var(--hair) solid var(--border);font-size:0.8824rem;color:var(--muted);font-variant-numeric:tabular-nums}
.data-table tr:last-child td{border:0}
.data-table td:first-child{color:var(--text);font-weight:500}
.data-table .name-cell{display:flex;align-items:center;gap:10px}
.chart-panel{padding:16px;margin-bottom:12px}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.chart-head h2{font-size:1rem;font-weight:600}
.chart-head p{font-size:0.7647rem;color:var(--muted);margin-top:2px}
.chart-legend{display:flex;gap:12px;color:var(--muted);font-size:0.7647rem}
.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;background:#636366;margin-right:5px}
.chart-legend i.sold{background:var(--accent)}
.bar-chart{height:200px;display:flex;align-items:stretch;gap:10px;margin:20px 0 0;position:relative;background:repeating-linear-gradient(to bottom,transparent,transparent 44px,rgba(255,255,255,.05) 44px,rgba(255,255,255,.05) 45px)}
.bar-group{display:flex;flex:1;min-width:0;align-items:center;flex-direction:column;justify-content:flex-end;gap:8px;position:relative}
.bars{width:100%;max-width:56px;height:170px;display:flex;align-items:flex-end;gap:4px}
.bars div{width:50%;min-height:2px;background:#636366;border-radius:4px 4px 0 0;position:relative}
.bars div.sold{background:var(--accent)}
.bars div span{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:0.6471rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bar-label{font-size:0.7059rem;color:var(--muted);white-space:nowrap}
.report-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 12px}
.report-totals .stat-card{padding:16px}
.report-note{margin:12px 0;font-size:0.7647rem;color:var(--muted);line-height:1.0588rem}
.loading-panel{padding:80px;text-align:center;color:var(--muted);font-size:0.8824rem}
.loading-panel .loader{display:block;margin:0 auto 16px}
.mobile-nav{display:none}
/* Pull-to-refresh spinner (touch only): rides the pull distance, spins once the request is in flight. */
.ptr{position:fixed;left:50%;top:calc(52px + env(safe-area-inset-top));transform:translate(-50%,calc(var(--pull,0px) * .45 - 44px));z-index:39;width:34px;height:34px;border-radius:50%;background:var(--raised);display:grid;place-items:center;opacity:0;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.ptr.show{opacity:1}
.ptr .loader{width:16px;height:16px;border-width:2px;animation-play-state:paused}
.ptr.ready .loader{border-top-color:var(--accent)}
.ptr.spin .loader{animation-play-state:running}
/* ===== Dialogs: centered card on desktop, bottom sheet on phones (see the 740px block) ===== */
dialog{background:var(--surface);color:var(--text);border:0;border-radius:14px;padding:0;max-width:420px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.sheet-grab{display:none}
.chat-scroll,.choice-stack,.data-table-wrap,.segmented{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog:focus{outline:none}
html:has(dialog[open]){overflow:hidden}
/* iOS sheet header: Cancel/Done leading, title centred (1fr auto 1fr keeps it centred), no ✕. */
.modal-head{display:grid;grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);align-items:start;gap:8px;padding:6px 16px 0}
.modal-lead{justify-self:start;font-size:1rem;color:var(--accent);min-height:44px;display:inline-flex;align-items:center}
.modal-head .modal-lead:last-child{justify-self:end}
.modal-titles{text-align:center;min-width:0;padding:11px 0}
.modal-head h2{font-size:1rem;font-weight:600;line-height:1.2941rem}
.modal-head p{font-size:0.7647rem;color:var(--muted);margin-top:1px;line-height:1.0588rem}
.modal-body{padding:8px 16px 16px}
/* Explanatory notices in sheets are footnotes under their group, not boxes; warnings stay boxed. */
.modal-body .notice:not(.warn):not(.danger){background:none;padding:0 16px;font-size:0.7647rem;line-height:1.0588rem;color:var(--muted);margin:-6px 0 18px}
.modal-body .notice.warn,.modal-body .notice.danger{margin:0 0 16px}
.modal-body .field>label{font-size:0.7647rem;text-transform:uppercase;color:var(--muted);padding:0 16px;letter-spacing:.2px}
.modal-footer{display:flex;margin-top:12px}
.modal-footer .btn{width:100%;min-height:50px}
.form-error{background:rgba(255,69,58,.14);color:var(--red);font-size:0.8824rem;line-height:1.1765rem;padding:10px 14px;border-radius:12px;margin-bottom:14px}
.form-error:empty{display:none}
.member-modal-top{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.member-modal-top h3{font-size:1.1765rem;font-weight:600;line-height:1.4706rem}
.member-modal-top p{color:var(--muted);font-size:0.8824rem;margin-top:2px;line-height:1.1765rem}
.action-stack{display:grid;gap:8px}
.action-stack .btn{justify-content:flex-start;min-height:50px}
.action-stack .btn.secondary{background:var(--raised);color:var(--text)}
.action-stack .btn.secondary svg{color:var(--accent)}
.action-stack .btn svg:last-child{margin-left:auto}
.action-stack .btn svg:first-child:last-child{margin-left:0}
.divider{height:var(--hair);background:var(--border);margin:16px 0}
.group-label{font-size:0.7647rem;text-transform:uppercase;color:var(--muted);margin-top:14px;padding-left:16px;letter-spacing:.2px}
.action-stack .group-label:first-child{margin-top:0}
/* Toasts: iOS-style banners from the top, frosted. */
.toasts{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:420px;width:calc(100% - 32px)}
.toast{padding:12px 16px;display:flex;align-items:center;gap:10px;background:rgba(44,44,46,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:var(--text);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:0.8824rem;line-height:1.1765rem;pointer-events:auto}
.toast svg{width:20px;height:20px;color:var(--accent)}
.toast.error svg{color:var(--red)}
/* Auth */
.auth-page{min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.auth-art{padding:48px 8%;background:var(--surface);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.auth-art .brand{padding:0}
.auth-art h1{font-size:clamp(36px,4.5vw,64px);font-weight:700;line-height:1.05;letter-spacing:-1.5px;max-width:520px;margin:64px 0 20px}
.auth-art h1 em{font-style:normal;color:var(--accent)}
.auth-art p{font-size:1rem;color:var(--muted);max-width:340px;line-height:1.4118rem}
.auth-art footer{font-size:0.7647rem;color:var(--faint);margin-top:64px}
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:max(50px,env(safe-area-inset-top)) 24px 50px}
.auth-form{max-width:360px;width:100%}
.auth-form .eyebrow{color:var(--accent);margin-bottom:8px}
.auth-form h2{font-size:2rem;font-weight:700;letter-spacing:-.4px;margin-bottom:6px;line-height:2.4118rem}
.auth-form>p{font-size:0.8824rem;color:var(--muted);margin-bottom:24px;line-height:1.1765rem}
.auth-form .btn{margin-top:4px;min-height:50px}
.auth-form .auth-foot{margin-top:20px;font-size:0.7647rem;color:var(--faint);line-height:1.0588rem;text-align:center}
.auth-form .form-error{margin-top:14px}
.auth-form .notice{margin-bottom:20px}
.auth-mobile-brand{display:none}
.auth-switch{display:block;width:100%;margin-top:12px;color:var(--accent);font-size:0.8824rem;text-align:center;padding:8px;min-height:44px}
/* ===== TV board: pure black, green accents, big type ===== */
.display-mode{min-height:100dvh;padding:max(30px,env(safe-area-inset-top)) max(4vw,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(4vw,env(safe-area-inset-left));background:var(--bg)}
.display-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}
.display-top-right{display:flex;align-items:center;gap:16px}
.display-name{font-size:1rem;color:var(--muted)}
.display-main{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
.display-next{background:var(--surface);border-radius:24px;padding:40px;position:relative;overflow:hidden;min-height:460px;display:flex;flex-direction:column;justify-content:center}
.display-next .eyebrow{color:var(--accent);font-size:0.8824rem;letter-spacing:.5px}
.display-next h1{font-size:clamp(48px,6vw,96px);font-weight:700;line-height:1.05;letter-spacing:-2px;position:relative;margin:20px 0;overflow-wrap:anywhere}
.display-eyebrow{gap:14px;margin-bottom:22px}
.display-rank{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#000;display:inline-grid;place-items:center;font-size:1.1765rem;font-weight:700;font-variant-numeric:tabular-nums}
.display-next p{font-size:1.1176rem;color:var(--muted);line-height:1.4118rem}
.display-next .avatar{margin-bottom:20px;background:var(--accent);color:#000}
.display-queue{display:flex;flex-direction:column;gap:8px}
.display-queue-row{display:flex;align-items:center;gap:16px;background:var(--surface);padding:14px 20px;border-radius:14px}
.display-queue-row .rank{font-size:1rem;width:36px;height:36px}
.display-queue-row h2{font-size:1.4118rem;font-weight:600;letter-spacing:-.3px}
.display-queue-row .wait{margin-left:auto;color:var(--muted);font-size:1rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.display-bottom{display:flex;align-items:center;gap:20px;padding-top:24px;margin-top:28px;border-top:var(--hair) solid var(--border);flex-wrap:wrap}
.display-bottom>.eyebrow{margin-right:10px}
.display-customer{display:flex;gap:10px;align-items:center;font-size:1rem;color:var(--text)}
.display-customer small{font-size:0.7647rem;color:var(--cyan);display:block}
.display-footer{display:flex;justify-content:space-between;margin-top:28px;color:var(--muted);font-size:0.8824rem;flex-wrap:wrap;gap:12px}
.display-goal{display:inline-flex;align-items:center;gap:10px}
.goal-track{display:inline-block;width:140px;height:6px;border-radius:4px;background:rgba(120,120,128,.2);overflow:hidden;vertical-align:middle}
.goal-track i{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .6s ease}
.confetti{position:fixed;z-index:700;pointer-events:none;top:0;width:6px;height:9px;background:var(--accent);animation:fall 1.5s ease-in forwards}
@keyframes fall{to{transform:translate3d(80px,90vh,0) rotate(430deg);opacity:0}}
/* ===== Chips: capsule by default; .seg = segmented control (2–4 plain options); .list = grouped rows with a checkmark (options with descriptions). JS picks the class in choice(). */
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:0 16px;min-height:36px;border-radius:999px;background:var(--fill);color:var(--text);font-size:0.8824rem;font-weight:600;line-height:1.1765rem}
.chip small{font-weight:400;font-size:0.7647rem;color:var(--muted)}
.chip.active{background:var(--accent);color:#000}
.chip.active small{color:rgba(0,0,0,.65)}
.chip-group.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--fill);padding:2px;border-radius:9px}
.chip-group.seg .chip{border-radius:7px;background:transparent;min-height:32px;padding:0 8px;align-items:center;font-size:0.7647rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.8824rem;text-align:center}
.chip-group.seg .chip.active{background:#636366;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.chip-group.list{flex-direction:column;gap:0;background:var(--raised);border-radius:12px;overflow:hidden}
.chip-group.list .chip{width:100%;border-radius:0;background:transparent;padding:10px 44px 10px 16px;min-height:44px;position:relative;font-weight:400;font-size:1rem;line-height:1.2941rem;color:var(--text)}
.chip-group.list .chip+.chip:before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hair);background:var(--border)}
.chip-group.list .chip small{color:var(--muted);font-size:0.7647rem;line-height:1.0588rem}
.chip-group.list .chip.active{color:var(--text);background:transparent}
.chip-group.list .chip.active small{color:var(--muted)}
.chip-group.list .chip.active:after{content:"";position:absolute;right:18px;top:50%;width:7px;height:13px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:translateY(-62%) rotate(45deg)}
/* Switch rows: real UISwitch proportions (51×31, 27px knob). Consecutive rows fuse into one inset group. */
.choice-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 16px;min-height:52px;border-radius:12px;background:var(--raised);color:var(--text);text-align:left;position:relative}
.choice-row span{display:flex;flex-direction:column;gap:0;min-width:0}
.choice-row strong{font-size:1rem;font-weight:400;line-height:1.2941rem}
.choice-row small{color:var(--muted);font-size:0.7647rem;line-height:1.0588rem}
.switch{width:51px;height:31px;border-radius:16px;background:rgba(120,120,128,.32);position:relative;flex-shrink:0;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.3),0 1px 1px rgba(0,0,0,.15);transition:transform .2s}
.choice-row.on .switch,.switch.on{background:var(--accent)}
.choice-row.on .switch::after,.switch.on::after{transform:translateX(20px)}
.choice-row:disabled{opacity:.45}
.choice-row+.choice-row{margin-top:-8px;border-top-left-radius:0;border-top-right-radius:0}
.choice-row:has(+.choice-row){border-bottom-left-radius:0;border-bottom-right-radius:0}
.choice-row+.choice-row:before{content:"";position:absolute;left:16px;right:0;top:0;height:var(--hair);background:var(--border)}
.choice-stack{display:flex;flex-direction:column;gap:0;max-height:290px;overflow:auto;margin:4px 0 14px;border-radius:12px}
.choice-stack .choice-row{border-radius:0;margin:0}
/* Chat: iMessage bubbles on black; mine = green with black text. */
.chat-panel{display:flex;flex-direction:column;max-height:calc(100dvh - 250px);min-height:340px;background:transparent;border-radius:0;overflow:visible}
.chat-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px;scrollbar-width:thin}
.chat-msg{display:flex;gap:8px;align-items:flex-end;max-width:78%}
.chat-msg.mine{margin-left:auto;flex-direction:row-reverse}
.chat-msg .avatar{width:28px;height:28px;font-size:0.6471rem}
.chat-bubble{background:var(--raised);border-radius:18px;border-bottom-left-radius:5px;padding:7px 12px}
.chat-msg.mine .chat-bubble{background:var(--accent);color:#000;border-radius:18px;border-bottom-right-radius:5px}
.chat-bubble small{display:block;color:var(--muted);font-size:0.7059rem;margin-bottom:1px;line-height:0.9412rem}
.chat-msg.mine .chat-bubble small{color:rgba(0,0,0,.55)}
.chat-bubble p{font-size:1rem;line-height:1.2941rem;overflow-wrap:anywhere}
.chat-form{display:flex;gap:8px;margin-top:12px;align-items:center}
.chat-form input{flex:1;min-width:0;background:transparent;border:1px solid var(--border);border-radius:20px;padding:0 16px;min-height:40px;color:var(--text)}
.chat-form .btn{min-height:40px;border-radius:20px;padding:0 14px}
.chat-panel .panel-footer{border-top:0;padding:10px 4px 0}
/* Alerts: customer waiting, turn requests, intros, sold bell */
.guest-banner{display:flex;align-items:center;gap:10px;font-size:0.8824rem;line-height:1.1765rem;margin-bottom:12px;animation:guest-pulse 1.8s ease-in-out infinite}
.guest-banner svg{width:20px;height:20px;margin:0;flex-shrink:0}
.guest-banner b{color:var(--red)}
@keyframes guest-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,69,58,0)}50%{box-shadow:0 0 0 3px rgba(255,69,58,.35)}}
.display-mode .guest-banner{font-size:clamp(15px,2vw,22px);padding:16px 22px;margin-bottom:22px;border-radius:14px}
.display-mode .guest-banner svg{width:26px;height:26px}
.turn-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;background:var(--surface);color:var(--text)}
.turn-banner>svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}
.turn-banner>span:first-of-type{flex:1;min-width:210px}
.turn-banner-actions{display:flex;gap:8px}
.intro-banner>svg{color:var(--cyan)}
.intro-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.intro-status>svg{width:16px;height:16px;color:var(--cyan);flex-shrink:0}
.intro-status>span{flex:1;min-width:140px;font-size:0.8824rem}
.intro-flag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(100,210,255,.16);color:var(--cyan);font-size:0.6471rem;font-weight:600;letter-spacing:.3px;text-transform:uppercase;vertical-align:middle;line-height:0.9412rem}
.intro-flag.on{background:var(--cyan);color:#000}
.display-mode .intro-flag{font-size:clamp(10px,1vw,14px)}
.float-note{margin:-2px 0 0}
@media (display-mode:standalone){.install-tip{display:none}}
/* Installed app: fade the scroll content to black under the floating tab bar so the home-indicator strip reads as solid black. */
@media (display-mode:standalone) and (max-width:740px){body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(84px + env(safe-area-inset-bottom));background:linear-gradient(to top,#000 35%,transparent);pointer-events:none;z-index:79}}
.install-tip{display:flex;gap:10px;align-items:flex-start}
.install-tip svg{color:var(--accent);margin-top:2px}
.join-code{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--raised);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.join-code span{font-size:1.4118rem;font-weight:700;letter-spacing:4px;color:var(--accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;user-select:all}
.sold-splash{position:fixed;inset:0;z-index:60;display:grid;place-items:center;text-align:center;background:rgba(0,0,0,.92);animation:splash-in .45s ease}
.sold-splash .sold-word{display:block;font-size:clamp(48px,11vw,150px);font-weight:800;letter-spacing:6px;color:var(--accent);text-shadow:0 0 60px rgba(48,209,88,.35);animation:splash-pop .5s cubic-bezier(.2,1.6,.4,1)}
.sold-splash h2{font-size:clamp(26px,5vw,64px);margin-top:8px;font-weight:700}
.sold-splash p{color:var(--muted);font-size:clamp(14px,2vw,22px);margin-top:10px}
@keyframes splash-in{from{opacity:0}to{opacity:1}}
@keyframes splash-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
/* ===== Motion: 200–250ms ease-out, nothing decorative; all off under reduced motion ===== */
@media (prefers-reduced-motion:no-preference){
 @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
 @keyframes overdue-pulse{50%{opacity:.55}}
 @keyframes msg-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
 @keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
 .overdue,[data-limit].overdue,.turn-meter.late .tm-left{animation:overdue-pulse 2s ease-in-out infinite}
 .tm-fill{transition:width 1s linear}
 .chat-msg{animation:msg-in .2s ease-out both}
 .main>*{animation:rise .22s ease-out both}
 .main>*:nth-child(2){animation-delay:.03s}.main>*:nth-child(3){animation-delay:.06s}.main>*:nth-child(4){animation-delay:.09s}
 dialog[open]{animation:pop .2s ease-out backwards}
 dialog::backdrop{animation:rise .2s ease-out both}
 .toast{animation:rise .25s ease-out both}
 .btn,.icon-btn,.chip,.queue-row,.choice-row,.link-btn,.nav a{transition:opacity .15s,background .15s,color .15s}
 .mobile-nav a{transition:color .15s,transform .12s ease-out}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.guest-banner{box-shadow:0 0 0 1px var(--red)}}
/* Hover only where a pointer can hover: iOS keeps :hover stuck on the last tap otherwise. */
@media (hover:hover){
 .btn:hover:not(:disabled),.icon-btn:hover,.chip:hover:not(.active){filter:brightness(1.12)}
 .nav a:hover:not(.active),.queue-row:hover,.choice-row:hover,.account:hover{background:var(--fill2)}
 .chip-group.list .chip:hover{filter:none;background:var(--fill2)}
 .avatar-tap:hover .tap-x{opacity:1}
 .auth-switch:hover,.link-btn:hover{text-decoration:underline;text-underline-offset:3px}
}
/* ===== Breakpoints ===== */
@media (min-width:1600px){.main{padding:32px 40px}.next-card{padding:24px;min-height:280px}.next-identity h2{font-size:2rem;line-height:2.3529rem}}
@media (max-width:1190px){.shell{grid-template-columns:208px minmax(0,1fr)}.sidebar{padding-inline:10px}.workspace-title{max-width:118px}.main{padding:20px}.topbar{padding-inline:20px}.next-identity h2{font-size:1.5294rem;line-height:1.8824rem}.next-card{padding:18px}.next-identity .avatar{width:60px;height:60px;font-size:1.2941rem}.next-controls .primary{min-width:150px}.stage-grid,.lower-grid{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr)}.queue-row{gap:10px;padding-inline:14px}.queue li+li .queue-row:before{left:102px}.queue-ups small{display:none}.clock small{display:none}.page-heading h1{font-size:1.7647rem;line-height:2.1176rem}.stat-value{font-size:1.7647rem;line-height:2.1176rem}.display-next{padding:30px}.display-queue-row{padding:12px 16px}.display-queue-row h2{font-size:1.1765rem}}
/* Tablet-narrow: icon rail. */
@media (max-width:960px){.shell{grid-template-columns:72px minmax(0,1fr)}.sidebar{padding:20px 10px}.sidebar .brand{padding:0;justify-content:center;gap:0}.sidebar .brand>span:not(.brand-mark),.workspace,.nav-label,.account>div,.account>svg,.nav a span{display:none}.nav{margin-top:28px}.nav a{justify-content:center;padding:0}.account{justify-content:center;padding:14px 0 0}.main{padding:20px}.stage-grid,.lower-grid{grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr)}.topbar{padding-inline:20px}.settings-grid{grid-template-columns:1fr}.display-main{gap:16px}.display-next h1{font-size:3.2941rem}.display-queue-row .avatar{display:none}}
/* ===== Phones: blurred 44px nav bar, large title, floating glass tab bar, bottom sheets ===== */
@media (max-width:740px){
 .shell{display:block}.sidebar{display:none}
 .topbar{min-height:calc(44px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;position:sticky;top:0;background:rgba(0,0,0,.72);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);z-index:40;gap:8px}
 .breadcrumb{display:none}
 /* Nav bar: mark left, wordmark centred (crossfades to the page title on scroll), 44px glyph buttons right. */
 .mobile-brand{display:flex}.mobile-brand.brand{padding:0;gap:0}.mobile-brand>span:not(.brand-mark){display:none}
 .mobile-brand .brand-mark{width:28px;height:28px;border-radius:7px}.mobile-brand .brand-mark svg{width:18px;height:18px}
 .nav-center{display:grid;flex:1;min-width:0;height:44px;align-items:center;justify-items:center}
 .nav-center>span{grid-area:1/1;max-width:100%;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s}
 .nav-title{opacity:0}body.title-collapsed .nav-title{opacity:1}body.title-collapsed .nav-brandname{opacity:0}
 .topbar-right{gap:4px;flex-shrink:0}.topbar-right .clock,.topbar-right [data-action=sound]{display:none}
 .topbar-right .icon-btn{width:44px;height:44px;background:transparent}.topbar-right .icon-btn svg{width:22px;height:22px}
 /* The connection pill is a dot on phones; its full text lives in the title attribute and on desktop. */
 .connection{font-size:0;padding:0;width:10px;height:10px;background:none;margin-right:4px;overflow:visible}.connection .status-dot{width:10px;height:10px}
 .main{padding:8px 16px calc(96px + env(safe-area-inset-bottom))}
 .page-heading{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
 .page-heading h1{font-size:2rem;line-height:2.4118rem}
 .page-heading p{max-width:none}
 .heading-actions{justify-content:flex-start}
 .demo-banner{margin-bottom:12px}.demo-banner .demo-extra{display:none}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
 .stat-card{padding:12px 14px}.stat-value{font-size:1.6471rem;line-height:2rem}
 .stage-grid{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
 .next-card{padding:18px 16px 16px;min-height:0}
 .next-identity h2{font-size:1.6471rem;line-height:2rem}.next-identity .avatar{width:64px;height:64px;font-size:1.2941rem}
 .next-controls{flex-direction:column;align-items:stretch;gap:8px;margin-top:18px;padding-top:0}
 .next-controls .btn{width:100%;min-height:50px;min-width:0}
 .shift-card{padding:16px}
 .shift-buttons .btn{min-height:50px;flex:1 1 45%}
 .lower-grid{grid-template-columns:1fr;gap:12px}
 /* Phone rows keep to the HIG recipe (number · avatar · name/status · wait · chevron): the ups count and the slim meter go — the hero card already shows the meter. */
 .queue-row{padding:8px 16px;min-height:60px;gap:10px;grid-template-columns:28px minmax(0,1fr) auto 12px}
 .queue-ups,.queue-wait .turn-meter.slim{display:none}.queue-wait{font-size:0.7647rem}
 .queue li+li .queue-row:before{left:104px}
 .footer{margin-top:20px}.footer span:last-child{display:none}
  .toolbar{gap:8px}.search{max-width:none;flex:1 1 100%}
 .segmented{width:100%;display:flex}.segmented button{flex:1 1 0;padding:0 6px;font-size:0.7059rem}
 .panel-head>.panel-subtitle{flex:1 1 100%;margin-top:-6px}
 .turn-meter.big .tm-left{font-size:2.3529rem}
 .settings-grid{gap:24px}
 .report-totals{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .report-totals .stat-card{padding:12px 14px}.report-totals .stat-value{font-size:1.6471rem;line-height:2rem}
 .report-totals>.stat-card:nth-child(3):last-child{grid-column:1/-1}
 .stat-note{white-space:normal}
 .chart-panel{padding:16px 12px}.bar-chart{gap:6px;height:190px}.bars{height:155px;gap:3px}.bars div span{font-size:0.5882rem}
 .data-table th,.data-table td{padding:10px 12px}
 .connection-banner{flex-direction:column;align-items:flex-start}
 .toasts{top:calc(8px + env(safe-area-inset-top))}
 /* iOS 26 floating tab bar: a glass capsule inset from the edges, selected item = green glyph on a soft green pill. */
 .mobile-nav{display:flex;position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));height:56px;border-radius:28px;background:rgba(28,28,30,.72);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:var(--hair) solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:80;padding:0 6px;justify-content:space-around;align-items:center}
 .mobile-nav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:0.5882rem;font-weight:500;text-decoration:none;color:var(--muted);height:52px;position:relative;line-height:0.7059rem}
 .mobile-nav a svg{width:24px;height:24px;border-radius:999px;padding:3px 10px;margin:-3px -10px;box-sizing:content-box}
 .mobile-nav a.active{color:var(--accent);font-weight:600}
 /* Active glyph: soft green pill + a hierarchical fill (SF Symbols style) on the same stroke icon. */
 .mobile-nav a.active svg{background:rgba(48,209,88,.18)}
 .mobile-nav a:active{opacity:1;transform:scale(.97)}
 .mobile-nav a span:not(.nav-count){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .mobile-nav .nav-count{display:none}
 .mobile-nav .nav-count.alert{display:inline-grid;position:absolute;top:5px;right:50%;transform:translateX(18px);font-size:0.6471rem;line-height:1;padding:0 5px;min-width:16px;height:16px;border-radius:8px}
 /* While the keyboard is up the fixed tab bar would float over the chat box; JS sets .typing. */
 body.typing .mobile-nav{display:none}
 /* Dialogs become sheets: grabber, 16px top corners, stacked full-width buttons (primary on top). */
 dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:calc(100dvh - env(safe-area-inset-top) - 24px);padding-bottom:env(safe-area-inset-bottom);box-shadow:none}
 /* Grabber is a real element (drag target); touch-action:none on it and the header lets the finger drive the sheet. */
 .sheet-grab{display:block;height:20px;position:relative;touch-action:none;flex-shrink:0}
 .sheet-grab:after{content:"";position:absolute;left:50%;top:8px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(235,235,245,.3)}
 .modal-head{padding-top:0;touch-action:none}
 /* Medium detent: short sheets still sit at half height with the primary action parked at the bottom; tall ones grow. */
 dialog[open]{display:flex;flex-direction:column;min-height:50dvh;will-change:transform}
 .modal-body{flex:1;display:flex;flex-direction:column}
 .modal-body>form[data-form]{display:flex;flex-direction:column;flex:1}
 .modal-footer{margin-top:auto;padding-top:12px}
 .modal-footer{flex-direction:column-reverse;gap:8px}.modal-footer .btn{width:100%;min-height:50px}
 .chat-panel{max-height:calc(100dvh - 300px - env(safe-area-inset-bottom));min-height:300px}
 .chat-msg{max-width:88%}.chat-send-label{display:none}
 .auth-page{grid-template-columns:1fr}.auth-art{display:none}
 .auth-form-wrap{min-height:100dvh;padding:max(30px,env(safe-area-inset-top)) 20px 30px}
 .auth-mobile-brand{display:flex;margin-bottom:40px;padding:0}
 .display-mode{padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .display-top{gap:12px;align-items:flex-start;margin-bottom:20px}.display-top .brand{padding:0}
 .display-top-right{gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}.display-top-right .clock{display:none}.display-name{font-size:0.7647rem}
 /* Board header on a phone: the bell becomes a glyph button (font-size 0 hides the text node the button helper emits). */
 .display-top-right .btn.compact{font-size:0;gap:0;padding:0;width:40px;min-height:40px;border-radius:50%}.display-top-right .btn.compact svg{width:20px;height:20px}
 .display-main{grid-template-columns:1fr;gap:12px}
 .display-next{min-height:280px;padding:24px;border-radius:20px}.display-next h1{font-size:2.5882rem;margin:16px 0}.display-next .avatar{width:56px;height:56px;font-size:1.1765rem;margin-bottom:16px}.display-next p{font-size:0.8824rem;line-height:1.1765rem}
 .display-queue-row{padding:12px 16px;gap:12px}.display-queue-row h2{font-size:1.1176rem}.display-queue-row .wait{font-size:0.8824rem}.display-queue-row .rank{width:30px;height:30px;font-size:0.8235rem}.display-queue-row .avatar{display:inline-flex;width:34px;height:34px;font-size:0.7059rem}
 .display-bottom{gap:14px;margin-top:20px;padding-top:20px}.display-bottom>.eyebrow{width:100%}.display-footer{font-size:0.7647rem}
}
@media (max-width:740px) and (prefers-reduced-motion:no-preference){
 @keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
 dialog[open]{animation:sheet-up .25s ease-out backwards}
}
/* Narrow phones (320–374): 12px gutters, drop the ups column and the sound button so the bar never widens the viewport. */
@media (max-width:374px){.main{padding-inline:12px}.topbar{padding-inline:12px}.page-heading h1{font-size:1.7647rem;line-height:2.1176rem}.next-card{padding-inline:14px}.next-identity h2{font-size:1.5294rem;line-height:1.8824rem}.next-identity .avatar{width:56px;height:56px;font-size:1.1765rem}.queue-row{padding-inline:12px;gap:8px}.queue li+li .queue-row:before{left:96px}.form-row{grid-template-columns:1fr}.topbar .brand-mark{width:26px;height:26px}.topbar-right .icon-btn{width:40px;height:40px}.nav-center>span{font-size:0.9412rem}.segmented button{font-size:0.6471rem;padding:0 4px}.group.seg-row .field{flex-wrap:wrap;padding-block:10px}.group.seg-row .chip-group.seg{flex-basis:100%;max-width:none}.display-top .brand{font-size:0.8824rem;gap:6px}.display-top .brand-mark{width:26px;height:26px}.display-top{gap:6px}.display-top-right{gap:6px}.display-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Short landscape phones: the sidebar can't fit every nav item, so it scrolls. */
@media (max-height:520px){.sidebar{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:10px}.nav{margin-top:12px}.nav a{min-height:40px}}
/* Touch: ≥44px targets, and inputs stay ≥16px so iOS never zooms the page on focus. */
@media (pointer:coarse),(max-width:740px){
 input:not([type=checkbox]):not([type=hidden]),select,textarea,.chat-form input,.auth-form input{font-size:1rem}
 .icon-btn{min-width:36px}
 .modal-head .icon-btn{width:36px;height:36px;margin:-4px -4px 0 0}
 .segmented button{min-height:36px}
 .chip{min-height:44px}
 .chip-group.seg .chip{min-height:36px;line-height:2.1176rem}
 .chip-group.list .chip{min-height:48px}
 .choice-row{min-height:56px}
 .panel-head .link-btn{min-height:40px}
 .demo-banner button{min-height:40px}
}