:root {
  /* Native iOS 27 look (canvas option 1, Ryan, 19 Oct 2026) */
  --ground: #F2F2F7;
  --surface: #FFFFFF;
  --ink: #000000;
  --muted: #6E6E73;
  --line: #E5E5EA;
  --line-soft: #E5E5EA;
  --track: #E5E5EA;
  --field: #D1D1D6;
  --accent: #0A5FD9;
  --accent-soft: #E8F1FF;
  --wa: #1E7A4C;
  --wa-icon: #1F9D55;
  --wa-soft: #DDF5E4;
  --ok: #1E7A4C;
  --ok-soft: #DDF5E4;
  --late: #D70015;
  --late-soft: #FFE5E3;
  --warn: #B04A00;
  --warn-soft: #FFF0E0;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
#root { max-width: 520px; margin: 0 auto; min-height: 100dvh; position: relative; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.splash { min-height: 100dvh; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--muted); }

/* ---- Page frame */
.page { padding: calc(20px + var(--safe-top)) 16px 0; display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
h1 { margin: 2px 0 0; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.4px; }
.body { padding: 16px 16px calc(110px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 15px; line-height: 22px; background: var(--surface); border-radius: 16px; }
.hint { font-size: 13px; line-height: 19px; color: var(--muted); padding: 0 8px; }

/* ---- Avatars and chips */
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; }
.avatar.sm { width: 22px; height: 22px; font-size: 11px; font-weight: 800; }
.avatar.md { width: 40px; height: 40px; }
.avatar.lg { width: 72px; height: 72px; font-size: 28px; font-weight: 600; }
.me-badge { border: 0; padding: 0; background: var(--accent-soft); color: var(--accent); }
.chip { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.chip.warn { color: var(--warn); background: var(--warn-soft); }
.chip.accent { color: var(--accent); background: var(--accent-soft); }
.chip.ok { color: var(--ok); background: var(--ok-soft); }
.chip.late { color: var(--late); background: var(--late-soft); }
.chip.muted { color: var(--muted); background: var(--track); }
.tone-late { color: var(--late); }
.tone-warn { color: var(--warn); }
.tone-ok { color: var(--ok); }
.tone-muted { color: var(--muted); }

/* ---- Segmented controls and filter pills */
.segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; background: var(--track); border-radius: 9px; }
.segments > * { height: 40px; border: 0; border-radius: 7px; background: transparent; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 4px; }
.segments > .on, .segments input:checked + span { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04); font-weight: 600; }
.segments .count { font-weight: 500; color: var(--muted); }
.segments label { padding: 0; position: relative; }
.segments label input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segments label span { width: 100%; height: 100%; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }
.segments label input:focus-visible + span { outline: 3px solid var(--accent); }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pill { height: 36px; padding: 0 14px; flex: none; border-radius: 18px; font-size: 15px; font-weight: 500; background: var(--surface); border: 0; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.pill.on { background: var(--accent); color: #fff; }

/* ---- Buttons */
.btn { height: 50px; border-radius: 14px; border: 0; background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; box-shadow: 0 6px 18px rgba(10, 95, 217, 0.28); display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.btn.wa { background: var(--wa); box-shadow: none; }
.btn.ghost { height: 44px; background: transparent; color: var(--accent); font-size: 17px; font-weight: 400; box-shadow: none; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-sm { height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; flex: none; }
.btn-outline { height: 36px; padding: 0 12px; border: 0; background: var(--accent-soft); color: var(--accent); border-radius: 18px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.icon-btn { width: 50px; height: 50px; flex: none; border-radius: 14px; background: var(--surface); border: 0; display: flex; align-items: center; justify-content: center; }
.wa-round { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--wa-icon); color: #fff; display: flex; align-items: center; justify-content: center; }
.wa-round.off { background: var(--track); color: var(--muted); }
.link { height: 44px; padding: 0 10px; display: inline-flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 400; color: var(--accent); background: none; border: 0; }

/* ---- Lists */
.row-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; min-height: 60px; background: var(--surface); border-radius: 16px; }
.row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 0; padding: 0; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row-title { font-size: 17px; font-weight: 500; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-size: 15px; line-height: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.list-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; gap: 8px; }
.list-head .label { font-size: 13px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.group { display: flex; flex-direction: column; gap: 8px; }
.group h2 { margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.count-badge { font-size: 12px; font-weight: 600; border-radius: 10px; padding: 1px 7px; color: var(--muted); background: var(--track); letter-spacing: 0; }
.count-badge.late { color: #fff; background: var(--late); }
.stack { background: var(--surface); border-radius: 16px; overflow: hidden; }
.stack > .item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; min-height: 60px; }
.bar { flex: 1; max-width: 120px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.due { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---- Tab bar: floating glass pill + round Add button */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 0 16px calc(14px + var(--safe-bottom)); pointer-events: none; transform: translateZ(0); }
.tabbar-inner { max-width: 488px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.tab-pill, .tab-add { pointer-events: auto; background: var(--glass); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--glass-shadow); }
.tab-pill { flex: 1; height: 60px; border-radius: 30px; padding: 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tab-pill a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tab-pill a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.tab-add { width: 60px; height: 60px; flex: none; border-radius: 50%; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tab-add[aria-current="page"] { background: var(--accent); color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tab-pill, .tab-add { background: var(--surface); } }

/* ---- Pipeline */
.board { padding: 16px 0 calc(110px + var(--safe-bottom)) 16px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; }
.board::after { content: ''; flex: none; width: 6px; }
.column { width: 236px; flex: none; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.column h2 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; gap: 8px; }
.tile { background: var(--surface); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tile-name { font-size: 17px; font-weight: 500; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.owner { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.team-table .item { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 0; align-items: center; width: 100%; background: none; border: 0; padding: 10px 16px; min-height: 60px; text-align: left; }
.team-table .num { text-align: right; font-size: 17px; font-weight: 600; }
.team-cols { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; padding: 0 16px; font-size: 12px; font-weight: 500; color: var(--muted); }
.team-cols span:not(:first-child) { text-align: right; }
.who { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 400; min-width: 0; flex-wrap: wrap; }

/* ---- Forms */
.card { background: var(--surface); border-radius: 16px; overflow: hidden; }
.card.pad { padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
.field { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; }
.field + .field::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.field-label { font-size: 13px; font-weight: 400; color: var(--muted); }
.field input, .field textarea { border: 0; outline: none; padding: 0; font-size: 17px; font-weight: 400; background: transparent; width: 100%; }
.field textarea { resize: none; font-size: 17px; font-weight: 400; line-height: 22px; }
.field input:focus, .field textarea:focus { outline: none; }
.field:focus-within { box-shadow: inset 3px 0 0 var(--accent); }
.prefix-input { display: flex; align-items: center; gap: 8px; }
.prefix-input span { font-size: 17px; font-weight: 400; color: var(--muted); }
.sub-field { display: flex; flex-direction: column; gap: 8px; }
.sub-field .segments { border-radius: 9px; background: var(--track); }
.date-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.date-row input { border: 0; border-radius: 8px; padding: 6px 10px; font-size: 17px; font-weight: 400; background: var(--track); }
.form-page { display: flex; flex-direction: column; min-height: 100dvh; }
.form-top { padding: calc(8px + var(--safe-top)) 8px 0; display: flex; align-items: center; justify-content: space-between; }
.form-body { flex: 1; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.footer { position: sticky; bottom: 0; padding: 12px 16px calc(12px + var(--safe-bottom)); background: var(--ground); border-top: 0; display: flex; gap: 10px; flex-direction: column; z-index: 4; }
.footer.row { flex-direction: row; }
.form-page.with-tabs .footer { bottom: calc(74px + var(--safe-bottom)); padding-bottom: 12px; background: transparent; }
.form-page.with-tabs { padding-bottom: calc(74px + var(--safe-bottom)); }

/* ---- Person */
.person-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 4px; }
.person-head .row-text { align-items: center; }
.person-head h1 { margin: 0; font-size: 26px; line-height: 31px; letter-spacing: -0.3px; }
.person-head .meta { font-size: 15px; line-height: 20px; color: var(--muted); }
.actions { display: flex; gap: 8px; }
.qa { flex: 1; height: 60px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 0; }
.qa.wa { background: var(--wa-soft); color: var(--wa); }
.qa.off { background: var(--track); color: var(--muted); }
.section { background: var(--surface); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.section h2 { margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.ticks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.ticks i { height: 6px; border-radius: 3px; background: var(--track); }
.ticks i.done { background: var(--accent); }
.ticks i.now { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.step-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step-name { font-size: 20px; font-weight: 600; }
.bubble { background: var(--wa-soft); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 15px; line-height: 21px; white-space: pre-wrap; }
.facts { display: grid; grid-template-columns: 110px 1fr; row-gap: 8px; column-gap: 8px; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.note { font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.note:last-child { border-bottom: 0; padding-bottom: 0; }
.note time { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---- Sheet */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 10; border: 0; width: 100%; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; max-width: 520px; margin: 0 auto; max-height: 88dvh; background: var(--ground); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18); }
/* The grabber is a full-width 24px strip (easy to catch with a thumb); the visible bar is its ::before. */
.grabber { width: 100%; height: 24px; flex: none; display: flex; justify-content: center; padding-top: 8px; cursor: grab; touch-action: none; }
.grabber::before { content: ''; width: 36px; height: 5px; border-radius: 3px; background: #C7C7CC; }
.sheet-drag, .sheet-title-row { touch-action: none; cursor: grab; }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none !important; } }
.sheet-head { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 16px; }
.sheet-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.2px; }
.sheet-list { flex: 1; overflow: auto; padding: 8px 12px 0; display: flex; flex-direction: column; gap: 4px; }
.member { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid transparent; background: var(--surface); text-align: left; }
.member.on { background: var(--accent-soft); border-color: var(--accent); }
.member .load { flex: 1; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.member .load i { display: block; height: 6px; border-radius: 3px; background: var(--accent); }
.member .load i.heavy { background: #C2410C; }
.radio { width: 24px; height: 24px; border-radius: 50%; flex: none; border: 2px solid var(--field); display: flex; align-items: center; justify-content: center; }
.member.on .radio { background: var(--accent); border-color: var(--accent); }
.sheet-foot { padding: 12px 20px calc(20px + var(--safe-bottom)); border-top: 0; display: flex; flex-direction: column; gap: 12px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.switch { width: 52px; height: 32px; flex: none; border: 0; border-radius: 16px; padding: 3px; display: flex; background: var(--field); justify-content: flex-start; }
.switch[aria-checked="true"] { background: #34C759; justify-content: flex-end; }
.switch span { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.switch:disabled { opacity: 0.5; }
.sheet textarea { width: 100%; border: 0; background: var(--surface); border-radius: 12px; padding: 12px 14px; font-size: 16px; resize: vertical; min-height: 120px; }

/* ---- Login */
.login { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(72px + var(--safe-top)) 24px calc(32px + var(--safe-bottom)); gap: 36px; }
.logo { width: 56px; height: 56px; border-radius: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.login h1 { font-size: 34px; line-height: 41px; margin: 20px 0 8px; }
.login .sub { margin: 0; font-size: 16px; line-height: 23px; color: var(--muted); }
.login form { display: flex; flex-direction: column; gap: 14px; }
.phone-box { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; background: var(--surface); border: 0; border-radius: 12px; }
.phone-box span { font-size: 17px; font-weight: 400; color: var(--muted); }
.phone-box input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0; font-size: 17px; font-weight: 400; letter-spacing: 0.02em; background: transparent; }
.code-input { height: 60px; border-radius: 12px; border: 0; background: var(--surface); text-align: center; font-size: 28px; font-weight: 800; letter-spacing: 0.4em; padding-left: 0.4em; }
.error { color: var(--late); font-size: 14px; font-weight: 600; line-height: 20px; margin: 0; }
.login .foot { margin-top: auto; font-size: 13px; line-height: 19px; color: var(--muted); text-align: center; }

/* ---- Toast */
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(92px + var(--safe-bottom)); z-index: 20; max-width: 488px; margin: 0 auto; background: rgba(28, 28, 30, 0.92); color: #fff; border-radius: 16px; padding: 14px 16px; font-size: 14px; font-weight: 600; line-height: 20px; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
#toast.show { opacity: 1; transform: none; }
#toast.bad { background: var(--late); }

.loading { padding: 40px 16px; text-align: center; color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* ---- Push opt-in banner */
.banner { background: var(--accent-soft); padding: 12px 8px 12px 14px; gap: 8px; }

/* ---- Google sign-in and team admin */
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 600; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn.google { background: var(--surface); color: var(--ink); border: 0; box-shadow: none; }
.team-table .item, .team-cols { grid-template-columns: minmax(0, 1fr) 76px 48px 60px; }
.role-btn { height: 32px; justify-self: center; padding: 0 10px; border-radius: 16px; border: 0; background: var(--track); font-size: 13px; font-weight: 500; }
.role-btn.lead { background: var(--accent); color: #fff; }
.link.inline { height: auto; padding: 0 0 0 4px; font-size: 12px; }
.request { flex-wrap: wrap; }
.request .row-text { flex: 1 1 100%; }
.request select { margin-top: 6px; height: 44px; width: 100%; border-radius: 10px; border: 0; background: var(--track); background: var(--surface); padding: 0 10px; font-size: 15px; font-weight: 600; }
.req-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.sub-head { margin: 10px 16px 7px; font-size: 13px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* ---- Swipe left to remove (inbox) */
.list-group { background: var(--surface); border-radius: 16px; overflow: hidden; }
.swipe { position: relative; overflow: hidden; }
.list-group .row-card { border-radius: 0; }
/* Hairline separators between rows. They start at the card's left padding: rows are never indented (Ryan, 19 Oct 2026). */
.list-group > * { position: relative; }
.list-group > * + *::before, .stack > .item + .item::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); z-index: 1; pointer-events: none; }
.swipe-action { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; border: 0; background: var(--late); color: #fff; font-size: 14px; font-weight: 700; }
.swipe-row { position: relative; transition: transform 0.2s ease; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.swipe.open .swipe-row { transform: translateX(-96px); }
.swipe-action { opacity: 0; }
.swipe.open .swipe-action, .swipe.dragging .swipe-action, .swipe-action:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .swipe-row { transition: none; } }
.gender-select { align-self: flex-start; order: 2; margin-top: 4px; height: 30px; border-radius: 999px; border: 1px solid var(--field); background: var(--surface); padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.gender-select:invalid, .gender-select option[disabled] { color: var(--late); }
.phone-btn { align-self: flex-start; order: 1; margin-top: 4px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--field); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--muted); }
.phone-btn.missing { color: var(--late); background: var(--late-soft); border-color: transparent; }
.sheet .phone-box { border-width: 1.5px; }

/* Growth Track: all stages, in a slide-up sheet from the person screen */
.stages-btn { min-height: 44px; border-radius: 12px; border: 0; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; }
.stage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stage-list li { display: flex; gap: 12px; align-items: flex-start; }
.stage-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--track); color: var(--muted); }
.stage-dot svg { width: 14px; height: 14px; }
.stage-list li.done .stage-dot { background: var(--accent); color: #fff; }
.stage-list li.now .stage-dot { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 2.5px var(--accent); }
.stage-name { font-size: 17px; font-weight: 500; line-height: 22px; }
.stage-list li.done .stage-name { color: var(--muted); }
.stage-list li.now .stage-name { color: var(--accent); }

/* Scan paper card (New visitor) */
.scan-btn { color: var(--ink); gap: 6px; cursor: pointer; position: relative; }
.scan-btn.busy { color: var(--muted); pointer-events: none; }
.scan-hint { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; line-height: 19px; }
.needs-check { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); }
.date-row.needs-check, fieldset.needs-check { border-radius: 12px; padding: 6px 8px !important; margin: 0 -8px !important; }

/* ==== Canvas option 1 screens (19 Oct 2026): Today, Unclaimed, Board, Team, Person, New Guest ==== */
.tone-accent { color: var(--accent); }
.chev { color: #C7C7CC; flex: none; width: 16px; height: 44px; display: flex; align-items: center; justify-content: center; }
.item .wa-round { margin-left: 4px; }
.stack .item.late .avatar { background: var(--late-soft) !important; color: #B5000F !important; }

/* Today: three counts and the Unclaimed link */
.stats { display: flex; }
.stats .stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; position: relative; }
.stats .stat + .stat::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.stat .n { font-size: 28px; font-weight: 700; line-height: 32px; letter-spacing: -0.3px; }
.stat .l { font-size: 12px; line-height: 16px; color: var(--muted); }
.nav-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; min-height: 56px; }
.nav-ico { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.nav-ico svg { width: 20px; height: 20px; }

/* Unclaimed: one card per visitor with a full-width claim button */
.nav-status { font-size: 15px; font-weight: 600; color: var(--muted); padding-right: 8px; }
.info-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; border-radius: 14px; background: var(--track); color: #3A3A3C; font-size: 13px; font-weight: 500; }
.guest { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--surface); }
.guest-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.guest-hint { white-space: normal; font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.badge { font-size: 13px; font-weight: 600; line-height: 16px; border-radius: 7px; padding: 3px 8px; flex: none; }
.badge.ok { color: var(--accent); background: var(--accent-soft); }
.badge.late { color: #B5000F; background: var(--late-soft); }
.claim { width: 100%; height: 50px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px rgba(10, 95, 217, 0.28); }
.claim.done { background: var(--ok); box-shadow: none; opacity: 1; }
.taken { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 8px; padding: 12px 8px; }
.cl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cl .n { font-size: 12px; font-weight: 600; }

/* Growth Track stepper (Board picks a stage; Person shows progress). Scrolls sideways. */
.stepper { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; padding: 14px 4px 10px; background: var(--surface); border-radius: 16px; }
.stepper::-webkit-scrollbar { display: none; }
.stepper .st { flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; color: var(--muted); }
.stepper .st::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--field); z-index: 0; }
.stepper .st:first-child::before { display: none; }
.stepper .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--field); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.stepper .lbl { font-size: 11px; line-height: 13px; padding: 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stepper .st.on .dot, .stepper .st.done .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper .st.done::before, .stepper .st.now::before { background: var(--accent); }
.stepper .st.now .dot { border: 2.5px solid var(--accent); }
.stepper .st.on .lbl, .stepper .st.now .lbl { color: var(--accent); font-weight: 600; }
.segments.mini { width: 150px; }
.segments.mini > * { height: 30px; font-size: 13px; }

/* Board: swipe right to move to the next step, then Undo */
.swipe-move { position: absolute; top: 0; bottom: 0; left: 0; width: 124px; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; text-align: center; font-size: 13px; font-weight: 600; opacity: 0; }
.swipe.dragging .swipe-move { opacity: 1; }
.list-group .item { background: var(--surface); }
.list-group > .item { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; min-height: 60px; }
.swipe-right > .item { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; min-height: 60px; position: relative; transition: transform 0.2s ease; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.undo-bar { position: fixed; left: 8px; right: 8px; bottom: calc(86px + var(--safe-bottom)); z-index: 8; max-width: 504px; margin: 0 auto; border-radius: 22px; background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); padding: 8px 8px 8px 20px; display: flex; align-items: center; gap: 12px; }
.undo-btn { height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; flex: none; }

/* Team */
.stats2 { display: flex; }
.stats2 .big { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.stats2 .big + .big::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.big .n { font-size: 34px; font-weight: 700; line-height: 38px; letter-spacing: -0.5px; }
.big .l { font-size: 13px; line-height: 17px; color: var(--muted); }
.nudge { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--accent-soft); }
.nudge-ico { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.btn-pill { height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; flex: none; }
.mrow-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.flag { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.flag.late { color: var(--late); }
.bar.wide { max-width: none; width: 100%; }
.cnt { font-size: 17px; font-weight: 600; min-width: 28px; text-align: right; flex: none; }

/* Person: detail rows and activity */
.drow { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 11px 16px; font-size: 17px; line-height: 22px; }
.drow + .drow::before, .trow + .trow::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.drow .k { flex: none; }
.drow .v { color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.trow { position: relative; display: flex; gap: 12px; padding: 10px 16px; }
.tdot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: none; }
.ttext { font-size: 15px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.actions .qa svg { width: 22px; height: 22px; }

/* New Guest */
.navbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(8px + var(--safe-top)) 8px 0; }
.nav-title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: 0; }
.scan-big { width: 100%; height: 50px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; cursor: pointer; }
.field.frow { flex-direction: row; align-items: center; gap: 12px; min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
.frow .k { width: 92px; flex: none; font-size: 17px; color: var(--ink); }
.frow .prefix-input, .frow input { flex: 1; min-width: 0; }
.row-meta.tone-late { color: var(--late); }
.row-meta.tone-accent, .empty .tone-accent { color: var(--accent); }

/* Lead reminder sheet: a visitor unclaimed for 24 h */
.sheet-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-title-row h2 { font-size: 26px; line-height: 31px; }
.sheet-x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--track); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.pill-note { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: var(--track); color: #3A3A3C; font-size: 15px; font-weight: 500; }
.pill-note.late { background: var(--late-soft); color: #B5000F; }
.pill-note svg { width: 16px; height: 16px; }
.chat { background: #EFEAE2; border-radius: 16px; padding: 12px; display: flex; justify-content: flex-end; }
.bubble.out { max-width: 88%; background: #D9FDD3; border-radius: 14px 14px 4px 14px; font-size: 16px; line-height: 22px; }
.btn.tinted { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.guest-links { display: flex; justify-content: center; gap: 16px; }

/* Section labels: 7px above their card. In .body the flex gap already adds 10px, so pull back there. */
.body > .sub-head { margin-bottom: -3px; }
/* Fixed footer: a long step name shortens with "…" instead of pushing the button off screen */
.footer.row .btn { min-width: 0; }
.footer.row .btn span { min-width: 0; }

/* Milestone rows (tap to change) and their Yes/No + date sheet */
.drow.tap { width: 100%; border: 0; background: none; text-align: left; align-items: center; color: var(--ink); }
.drow.tap .v { margin-left: auto; }
.drow.tap .chev { height: 22px; }
.v.tone-ok { color: var(--ok); }
.date-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 16px; font-size: 17px; }
.date-card input { border: 0; border-radius: 8px; padding: 6px 10px; font-size: 17px; background: var(--track); }

/* WhatsApp sheet on the person screen */
.sheet .wa-text { width: 100%; border: 1.5px solid #A7D9B8; border-radius: 14px; background: var(--wa-soft); padding: 12px 40px 12px 14px; font-size: 16px; line-height: 22px; resize: vertical; min-height: 130px; display: block; }
.wa-box { position: relative; }
.wa-pencil { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--wa); display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.wa-pencil svg { width: 15px; height: 15px; }
.edit-hint { display: flex; align-items: center; gap: 6px; margin-bottom: -6px; font-size: 13px; font-weight: 500; color: var(--wa); }
.edit-hint svg { width: 15px; height: 15px; flex: none; }
.sheet .wa-text:focus { outline: 2px solid var(--wa); }
.btn.wa { background: var(--wa); }

/* Team: Add team member button and approve-as-new gender picker */
.btn.tinted svg { width: 22px; height: 22px; }
.request select[name="gender"] { margin-top: 6px; }