/* =====================================================================
   Remly Glass · components.css
   Implements 03-components.md. Uses ONLY tokens from tokens.css.
   Naming: one block class per component (.row, .bubble, .vm ...),
   modifiers with "--" (.btn--primary), states with "is-" (.is-on),
   and data attributes for variants that JS toggles.
   If you need a new value, add a token first. No raw hex below this line
   except the white/black used inside the Remy mark.
   ===================================================================== */

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { font-size: 16px; }                       /* the prototype's "Dynamic Type" control changes this */
body {
  font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased;
  background: #05070a; overflow: hidden; overscroll-behavior: none;
  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: center; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
svg.i { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---------- Device frame (from shell.css): full screen on a phone, framed on desktop ---------- */
.devbar { display: none; }
.phone { flex: 1; position: relative; overflow: hidden; min-height: 0; isolation: isolate; background: var(--wall-calm-base); }
@media (min-width: 640px) and (min-height: 720px) {
  body { align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 50% 0%, #1a2233, #05070a); }
  .devbar { display: flex; gap: 4px 6px; flex-wrap: wrap; justify-content: center; width: min(760px, 100%); padding: 0 0 10px; font-size: 12px; color: #8b949e; }
  .devbar button { padding: 5px 10px; border-radius: 99px; background: #1b1f26; color: #e6edf3; font-weight: 600; }
  .devbar button[aria-pressed="true"] { background: #e6edf3; color: #0d0f1a; }
  .phone { flex: none; width: 390px; height: min(844px, calc(100dvh - 100px));
    border-radius: 50px; box-shadow: 0 0 0 11px #111418, 0 0 0 12px #2b3038, 0 50px 100px rgba(0,0,0,.6); }
}

/* ---------- Wallpaper ---------- */
.wall { position: absolute; inset: -40px; z-index: 0; pointer-events: none; transition: opacity var(--d-fade); }
.wall--calm { background: var(--wall-calm); opacity: var(--wall-calm-opacity); }
.wall--vivid { background: var(--wall-vivid); opacity: 0; }
.phone[data-wall="vivid"] .wall--vivid { opacity: 1; }

/* ---------- Materials ---------- */
/* Glass: chrome only. The rim is a 1px gradient border drawn with a masked ::before (c6). */
.glass {
  position: relative; isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: var(--e-2), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-edge-2), inset 1px 0 0 var(--glass-edge-2);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, var(--glass-edge), transparent 35%, transparent 65%, var(--glass-edge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass--strong { background: var(--glass-fill-strong); }
/* Frosted: short glanceable cards (c2 .card) */
.frost {
  background: var(--frost-fill); -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter);
  border: .5px solid var(--frost-border); box-shadow: var(--e-1); border-radius: var(--r-2xl); overflow: hidden;
}
/* Solid: dense content (lists, thread, transcripts, forms) */
.solid {
  background: var(--surface); -webkit-backdrop-filter: var(--surface-filter); backdrop-filter: var(--surface-filter);
  border: .5px solid var(--line); border-radius: var(--r-2xl); overflow: hidden;
}

/* ---------- Press feedback (c6 .tap) ---------- */
.tap { transition: transform var(--d-press) var(--ease-press); }
.tap:active { transform: scale(var(--press-scale)); }

/* ---------- Screens + navigation transitions (shell.css, retimed via tokens) ---------- */
.view { position: absolute; inset: 0; z-index: var(--z-content); }
.scr {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  padding: 0 var(--gutter) calc(var(--tabbar-clearance) + env(safe-area-inset-bottom));
  transition: transform var(--d-push) var(--ease-signature), opacity var(--d-fade) ease; will-change: transform;
}
.scr::-webkit-scrollbar { display: none; }
.scr--notab { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.scr--notab:has(.composer, .composer-block) { padding-bottom: 0; }   /* the composer carries the safe area */
.scr--fixed { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.scr.enter-push { transform: translateX(100%); }
.scr.leave-push { transform: translateX(-28%); opacity: 0; }
.scr.enter-pop { transform: translateX(-28%); opacity: 0; }
.scr.leave-pop { transform: translateX(100%); }
.scr.enter-fade { opacity: 0; transform: translateY(8px); }
.scr.leave-fade { opacity: 0; }
.rise > * { animation: rise var(--d-rise) var(--ease-rise) both; }
.rise > *:nth-child(2) { animation-delay: calc(var(--rise-stagger) * 1); }
.rise > *:nth-child(3) { animation-delay: calc(var(--rise-stagger) * 2); }
.rise > *:nth-child(4) { animation-delay: calc(var(--rise-stagger) * 3); }
.rise > *:nth-child(5) { animation-delay: calc(var(--rise-stagger) * 4); }
.rise > *:nth-child(n+6) { animation-delay: calc(var(--rise-stagger) * 5); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------- Nav bar (c2 sticky .top: clear at rest, glass once scrolled) ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav); margin: 0 calc(var(--gutter) * -1);
  padding: calc(env(safe-area-inset-top) + 10px) var(--gutter) 8px;
  display: grid; grid-template-columns: minmax(44px, auto) 1fr minmax(44px, auto); align-items: center; gap: 8px;
  transition: background var(--d-tint) var(--ease-tint);
}
.nav.is-stuck, .nav--always { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 .5px 0 var(--line); }
.nav__title { text-align: center; font-size: var(--t-headline); font-weight: var(--w-bold); opacity: 0; transition: opacity var(--d-tint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav.is-stuck .nav__title, .nav--always .nav__title { opacity: 1; }
.nav__end { display: flex; justify-content: flex-end; gap: 8px; }
.large-title { font-size: var(--t-large-title); font-weight: var(--w-black); letter-spacing: -.8px; line-height: 1.1; margin: 2px 2px 4px; }
.large-sub { font-size: var(--t-subhead); color: var(--text-2); font-weight: var(--w-semibold); margin: 0 2px 14px; }
.display { font-size: var(--t-display); font-weight: var(--w-black); letter-spacing: -1.4px; line-height: 1.02; margin: 14px 4px 18px; }
.display span { color: var(--text-2); }
.eyebrow { font-size: var(--t-label); font-weight: var(--w-heavy); letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.section { font-size: var(--t-section); font-weight: var(--w-heavy); letter-spacing: .7px; text-transform: uppercase; color: var(--text-2); margin: 22px 6px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.section a, .section button { text-transform: none; letter-spacing: 0; font-size: var(--t-subhead); color: var(--accent-text); font-weight: var(--w-bold); min-height: 44px; display: inline-flex; align-items: center; margin: -14px 0; }

/* ---------- Buttons ---------- */
.btn {
  min-height: var(--tap-min); padding: 0 18px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--t-row-title); font-weight: var(--w-bold); white-space: nowrap;
  transition: transform var(--d-press) var(--ease-press), opacity var(--d-tint);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn--lg { min-height: 54px; width: 100%; font-size: var(--t-headline); font-weight: var(--w-heavy); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: var(--t-subhead); position: relative; }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; }          /* keeps the 44pt hit area */
.btn--primary { color: var(--text-on-accent); background: linear-gradient(180deg, var(--accent-sheen), var(--accent-strong) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--accent-glow); }
.btn--secondary { background: var(--surface-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--glass { background: var(--glass-fill-strong); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--e-2); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
.btn--plain { background: none; color: var(--accent-text); padding: 0 10px; }
.btn--danger { background: var(--danger-soft); color: var(--danger); }
.btn--icon { width: var(--tap-min); padding: 0; }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; box-shadow: none; }
.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--text-on-accent); border-right-color: transparent; animation: spin .8s linear infinite; }
.btn--secondary.is-loading::before, .btn--glass.is-loading::before { border-color: var(--ink); border-right-color: transparent; }
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn-row > .btn { flex: 1; }
/* Action tiles (c6 .act): Call / Text / Map */
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.act { min-height: 72px; border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--t-footnote); font-weight: var(--w-bold); background: var(--surface); box-shadow: inset 0 0 0 .5px var(--line); }
.act svg.i { color: var(--accent); }

/* ---------- Tab bar (c6 floating glass bar + lens + Remy orb) ---------- */
.tabbar { position: absolute; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: var(--z-tabbar); display: flex; gap: 10px; align-items: center; transition: transform var(--d-sheet) var(--ease-sheet), opacity var(--d-fade); }
.tabbar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.tabs { flex: 1; height: 66px; border-radius: var(--r-pill); display: flex; padding: 5px; box-shadow: var(--e-3), inset 0 1px 0 var(--glass-highlight); }
.tabs__lens { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: var(--r-pill); background: var(--glass-fill-strong); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -6px 14px rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.12); transition: transform var(--d-lens) var(--ease-lens), width var(--d-press); z-index: 0; }
.tab { flex: 1; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: min(var(--t-tab), 13px);  /* stops growing at Large, like native */ font-weight: var(--w-bold); color: var(--text-2); z-index: 1; position: relative; transition: color var(--d-tint); }
.tab svg.i { width: 23px; height: 23px; }
.tab[aria-current="page"] { color: var(--accent-text); }
.tab[aria-current="page"] svg.i { color: var(--accent); }
.tab .badge { position: absolute; top: 4px; left: calc(50% + 6px); }
.remy-orb { width: 66px; height: 66px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: var(--e-3), inset 0 1px 0 var(--glass-highlight); }
.remy-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--remy-gradient); box-shadow: var(--remy-glow); animation: spin var(--remy-spin) linear infinite; display: grid; place-items: center; }
.remy-mark--sm { width: 28px; height: 28px; box-shadow: none; }
.remy-mark--sm::after { content: "✦"; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-raised); display: grid; place-items: center; font-size: 11px; color: var(--ink); animation: spin var(--remy-spin) linear infinite reverse; }
.remy-mark.is-paused { animation-play-state: paused; filter: grayscale(1); opacity: .6; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Sheets (c6 geometry, c8/c10 timing) ---------- */
.scrim { position: absolute; inset: 0; z-index: var(--z-scrim); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--d-fade); }
.scrim.is-on { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: var(--z-sheet); border-radius: var(--r-sheet); padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 88%; overflow-y: auto; scrollbar-width: none; background: var(--glass-fill-strong); transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform var(--d-sheet) var(--ease-sheet), visibility 0s linear var(--d-sheet); }
.sheet.is-on { transform: none; visibility: visible; transition: transform var(--d-sheet) var(--ease-sheet), visibility 0s; }
.grabber { width: 40px; height: 5px; border-radius: var(--r-xs); background: var(--text-2); opacity: .4; margin: 2px auto 14px; }
.sheet__head { display: flex; gap: 14px; align-items: center; }
.sheet__title { font-size: var(--t-title); font-weight: var(--w-black); letter-spacing: -.4px; }
.sheet__sub { font-size: var(--t-subhead); color: var(--text-2); font-weight: var(--w-semibold); margin-top: 2px; }
.sheet__close { margin-left: auto; align-self: flex-start; }
.panel { background: var(--surface); border-radius: var(--r-xl); padding: 14px 16px; margin-top: 12px; box-shadow: inset 0 0 0 .5px var(--line); }
.panel__k { font-size: var(--t-label); font-weight: var(--w-heavy); letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.panel p { font-size: var(--t-body); line-height: 1.45; margin-top: 5px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.kv .panel { margin: 0; }
.kv b { font-size: var(--t-headline); display: block; margin-top: 4px; }

/* ---------- Lists + rows ---------- */
.list { padding: 6px; }
.row { display: flex; gap: 12px; align-items: center; padding: 11px 10px; min-height: 64px; border-radius: var(--r-xl); width: 100%; text-align: left; position: relative; transition: background var(--d-tint); }
.row:active { background: var(--surface-sunken); }
.row + .row::before { content: ""; position: absolute; top: 0; left: 66px; right: 10px; border-top: .5px solid var(--line); }
.row__body { flex: 1; min-width: 0; display: block; }
.row__title { font-size: var(--t-row-title); font-weight: var(--w-semibold); display: flex; gap: 6px; align-items: center; min-width: 0; }
.row__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-unread .row__title { font-weight: var(--w-black); }
.row__text { display: block; font-size: var(--t-subhead); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.row.is-unread .row__text { color: var(--ink); }
.row__meta { font-size: var(--t-caption); color: var(--text-2); font-weight: var(--w-semibold); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--t-caption); color: var(--text-2); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; flex: none; }
.row__chev { color: var(--text-3); }
.row--setting { min-height: 52px; }
.row--setting .row__title { font-weight: var(--w-semibold); }

/* Avatar with channel badge. Gradient = channel colour (shipping apps). */
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: var(--w-heavy); color: #fff; font-size: 15px; position: relative; background: linear-gradient(135deg, var(--ch, var(--ch-web)), color-mix(in srgb, var(--ch, var(--ch-web)) 60%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(0,0,0,.15); }
.avatar--lg { width: 58px; height: 58px; font-size: 20px; }
.avatar svg.i { width: 20px; height: 20px; }
.avatar[data-ch="sms"] { --ch: var(--ch-sms); } .avatar[data-ch="whatsapp"] { --ch: var(--ch-whatsapp); }
.avatar[data-ch="web"] { --ch: var(--ch-web); } .avatar[data-ch="voicemail"] { --ch: var(--ch-voicemail); }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ch); display: inline-block; flex: none; }
.ch-dot[data-ch="sms"] { --ch: var(--ch-sms); } .ch-dot[data-ch="whatsapp"] { --ch: var(--ch-whatsapp); }
.ch-dot[data-ch="web"] { --ch: var(--ch-web); } .ch-dot[data-ch="voicemail"] { --ch: var(--ch-voicemail); }

/* Unread badge */
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--accent-strong); color: var(--text-on-accent); font-size: var(--t-tag); font-weight: var(--w-black); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.badge--dot { min-width: 10px; height: 10px; padding: 0; }

/* Status chips (soft fill + strong text). data-tone or data-stage picks the colour. */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-tag); font-weight: var(--w-heavy); white-space: nowrap; background: var(--neutral-soft); color: var(--neutral); }
.chip[data-tone="ok"] { background: var(--ok-soft); color: var(--ok); }
.chip[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); }
.chip[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.chip[data-tone="info"] { background: var(--info-soft); color: var(--info); }
.chip[data-tone="accent"] { background: var(--accent-soft); color: var(--accent-text); }
.chip[data-tone="remy"] { background: var(--remy-tint); color: var(--ink); }
.chip[data-stage] { background: color-mix(in srgb, var(--dot) 18%, transparent); color: var(--txt); }
.chip[data-stage]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
[data-stage="new"] { --dot: var(--stage-new); --txt: var(--stage-new-text); }
[data-stage="contacted"] { --dot: var(--stage-contacted); --txt: var(--stage-contacted-text); }
[data-stage="quoted"] { --dot: var(--stage-quoted); --txt: var(--stage-quoted-text); }
[data-stage="scheduled"] { --dot: var(--stage-scheduled); --txt: var(--stage-scheduled-text); }
[data-stage="closed"] { --dot: var(--stage-closed); --txt: var(--stage-closed-text); }
[data-stage="collections"] { --dot: var(--stage-collections); --txt: var(--stage-collections-text); }
[data-stage="lost"], [data-stage="garbage"] { --dot: var(--stage-lost); --txt: var(--stage-lost-text); }
[data-stage="urgent"] { --dot: var(--urgent); --txt: var(--urgent-text); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Filter chips row (scrolls sideways) */
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 12px; padding: 2px var(--gutter); }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; min-height: 36px; padding: 0 13px; border-radius: var(--r-pill); font-size: var(--t-subhead); font-weight: var(--w-bold); color: var(--text-2); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-edge-2); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); display: inline-flex; align-items: center; gap: 6px; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--surface-raised); }
.filter small { font-weight: var(--w-semibold); opacity: .75; }

/* ---------- Controls ---------- */
.seg { display: flex; padding: 4px; border-radius: var(--r-pill); position: relative; margin: 4px 0 14px; }
.seg__knob { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: var(--r-pill); background: var(--glass-fill-strong); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 12px rgba(0,0,0,.08); transition: transform var(--d-lens) var(--ease-lens), width var(--d-press); }
.seg button { text-align: center; flex: 1; min-height: 36px; border-radius: var(--r-pill); font-weight: var(--w-semibold); font-size: var(--t-subhead); color: var(--text-2); z-index: 1; position: relative; transition: color var(--d-tint); }
.seg button::after { content: ""; position: absolute; inset: -4px 0; }
.seg button[aria-selected="true"] { color: var(--ink); }
.search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); margin-bottom: 12px; color: var(--text-2); }
.search input { flex: 1; border: 0; background: none; outline: none; font-size: var(--t-body); color: var(--ink); min-width: 0; }
.search input::placeholder { color: var(--text-2); }
.field { display: block; margin-top: 12px; }
.field__label { display: block; font-size: var(--t-footnote); font-weight: var(--w-bold); color: var(--text-2); margin: 0 4px 6px; }
.field__input { width: 100%; min-height: 50px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface-raised); font-size: var(--t-body); outline: none; transition: border-color var(--d-tint); }
.field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field__hint { display: block; font-size: var(--t-footnote); color: var(--text-2); margin: 6px 4px 0; }
.field.is-error .field__input { border-color: var(--danger); }
.field.is-error .field__hint { color: var(--danger); font-weight: var(--w-semibold); }
.field__input:disabled { opacity: .5; }
.toggle { position: relative; width: 52px; height: 32px; flex: none; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--d-tint); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform var(--d-lens) var(--ease-lens); }
.toggle[aria-checked="true"] { background: var(--ok); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }
.toggle:disabled { opacity: .4; }
.toggle::before { content: ""; position: absolute; inset: -6px -2px; }

/* ---------- Dashboard: stat tile + chart card (c6 .stat, c2 .rev) ---------- */
.hero { padding: 20px; display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; }
.hero__num { font-size: var(--t-hero); font-weight: var(--w-black); letter-spacing: -3px; line-height: .9; font-variant-numeric: tabular-nums; }
.hero__lbl { font-size: var(--t-headline); font-weight: var(--w-semibold); }
.hero__lbl small { display: block; color: var(--text-2); font-weight: var(--w-medium); font-size: var(--t-subhead); margin-top: 2px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.stat { padding: 16px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; width: 100%; }
.stat__icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.stat__icon svg.i { width: 19px; height: 19px; }
.stat__value { font-size: var(--t-stat); font-weight: var(--w-black); letter-spacing: -1px; display: block; margin-top: 10px; font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--t-subhead); color: var(--text-2); font-weight: var(--w-semibold); }
.chart-card { padding: 20px 20px 14px; }
.chart-card__value { font-size: 2.875rem; font-weight: var(--w-black); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 14px; }
.chart > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart b { width: 100%; border-radius: 9px; background: linear-gradient(180deg, var(--accent), var(--accent-sheen)); transform-origin: bottom; animation: grow .9s var(--ease-rise) both; }
.chart b.is-future { background: var(--line-strong); }
.chart span { font-size: var(--t-caption); font-weight: var(--w-semibold); color: var(--text-2); }
@keyframes grow { from { transform: scaleY(0); } }

/* ---------- Thread ---------- */
.thread { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 12px; }
.day-sep { align-self: center; font-size: var(--t-caption); font-weight: var(--w-heavy); color: var(--text-2); padding: 4px 12px; margin: 12px 0 6px; border-radius: var(--r-pill); background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 22px; font-size: var(--t-body); line-height: 1.4; position: relative; word-wrap: break-word; }
.bubble.is-group-end { margin-bottom: 8px; }
.bubble--customer { align-self: flex-start; background: var(--surface-raised); box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 .5px var(--line); }
.bubble--customer.is-group-end { border-bottom-left-radius: 8px; }
.bubble--owner { align-self: flex-end; background: var(--accent-strong); color: var(--text-on-accent); }
.bubble--owner.is-group-end { border-bottom-right-radius: 8px; }
.bubble--remy { align-self: flex-end; background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--remy-edge); }
.bubble--remy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--remy-tint); pointer-events: none; }
.bubble--remy.is-group-end { border-bottom-right-radius: 8px; }
.bubble__who { font-size: var(--t-caption); font-weight: var(--w-heavy); display: flex; align-items: center; gap: 5px; margin-bottom: 3px; color: var(--text-2); }
.bubble__meta { display: flex; justify-content: flex-end; gap: 4px; align-items: center; font-size: var(--t-caption); margin-top: 3px; opacity: .8; font-variant-numeric: tabular-nums; }
.bubble--owner .bubble__meta { color: var(--text-on-accent); }
.bubble__photo { display: block; width: 200px; height: 150px; border-radius: 14px; background: linear-gradient(135deg, var(--w3), var(--w4)); }
.bubble__react { position: absolute; bottom: -10px; right: 8px; font-size: 13px; background: var(--surface-raised); border-radius: var(--r-pill); padding: 1px 6px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.bubble.is-failed { opacity: .85; }
.bubble__retry { align-self: flex-end; font-size: var(--t-footnote); font-weight: var(--w-bold); color: var(--danger); min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.event-line { align-self: center; display: flex; align-items: center; gap: 6px; font-size: var(--t-footnote); font-weight: var(--w-semibold); color: var(--text-2); padding: 6px 0; }
.event-line svg.i { width: 15px; height: 15px; }
.note-card { align-self: stretch; margin: 6px 0 10px; padding: 10px 14px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); background: var(--warn-soft); font-size: var(--t-body); }
.note-card__k { font-size: var(--t-caption); font-weight: var(--w-heavy); color: var(--warn); display: flex; gap: 5px; align-items: center; margin-bottom: 3px; }

/* Thread header (nav bar variant with avatar + name + subtitle) */
.thread-head { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.thread-head .avatar { width: 34px; height: 34px; font-size: 13px; }
.thread-head b { font-size: var(--t-row-title); font-weight: var(--w-bold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-head small { font-size: var(--t-caption); color: var(--text-2); font-weight: var(--w-semibold); }

/* Banners (Remy paused, held by teammate, alerts off, consent, window closed) */
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); margin: 8px 0; text-align: left; width: 100%; }
.banner__body { flex: 1; min-width: 0; font-size: var(--t-subhead); line-height: 1.35; }
.banner__body b { display: block; font-size: var(--t-row-title); }
.banner--remy { background: var(--surface); box-shadow: inset 0 0 0 1px var(--remy-edge); }
.banner--warn { background: var(--warn-soft); color: var(--ink); }
.banner--danger { background: var(--danger-soft); color: var(--ink); }
.banner--glass { box-shadow: var(--e-2); }

/* Remy suggestion card */
.suggest { padding: 14px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--remy-edge), var(--e-1); position: relative; margin: 6px 0 10px; }
.suggest::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--remy-tint); pointer-events: none; }
.suggest__head { display: flex; align-items: center; gap: 8px; font-size: var(--t-label); font-weight: var(--w-heavy); letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.suggest__text { font-size: var(--t-body); line-height: 1.45; margin-top: 8px; position: relative; }
.suggest__why { font-size: var(--t-footnote); color: var(--text-2); margin-top: 6px; position: relative; }
.suggest .btn-row { position: relative; margin-top: 12px; }
.suggest.is-sent { opacity: .5; }
/* Auto-send countdown (native AutoSendBar): 5s, Stop button, progress bar */
.autosend__bar { height: 4px; border-radius: var(--r-xs); background: var(--line); overflow: hidden; margin-top: 10px; position: relative; }
.autosend__bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: countdown var(--auto-send-countdown) linear forwards; }
@keyframes countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Voicemail card: player + transcript (c6 .player/.tx) */
.vm { padding: 16px; border-radius: var(--r-2xl); }
.vm__head { display: flex; gap: 12px; align-items: center; }
.vm__title { font-size: var(--t-row-title); font-weight: var(--w-bold); }
.vm__sub { font-size: var(--t-footnote); color: var(--text-2); font-weight: var(--w-semibold); }
.player { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px 14px 10px 10px; border-radius: var(--r-xl); background: var(--surface-sunken); }
.play { width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--ink); color: var(--surface-raised); display: grid; place-items: center; }
.play svg.i { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.play:disabled { background: var(--line-strong); color: var(--text-2); }
.wave { display: flex; align-items: center; gap: 2px; height: 34px; flex: 1; min-width: 0; }
.wave i { flex: 1; border-radius: 2px; background: var(--ink); opacity: .3; }
.wave i.is-played { opacity: 1; background: var(--accent); }
.player__time { font-size: var(--t-caption); color: var(--text-2); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.transcript { font-size: var(--t-body); line-height: 1.5; margin-top: 6px; }
.transcript mark { background: rgba(255, 226, 122, .6); color: inherit; border-radius: 4px; padding: 0 2px; }
.transcript.is-empty { color: var(--text-2); font-style: italic; }
details.panel summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
details.panel summary::-webkit-details-marker { display: none; }
details.panel summary::after { content: "⌄"; color: var(--text-2); transition: transform var(--d-press); }
details.panel[open] summary::after { transform: rotate(180deg); }

/* Missed-call / lead / booking cards inside a thread (centre-aligned system cards) */
.sys-card { align-self: stretch; margin: 8px 0 12px; padding: 14px; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 .5px var(--line), var(--e-1); }
.sys-card__head { display: flex; align-items: center; gap: 10px; }
.sys-card__icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--danger-soft); color: var(--danger); }
.sys-card[data-kind="lead"] .sys-card__icon { background: var(--accent-soft); color: var(--accent-text); }
.sys-card[data-kind="booking"] .sys-card__icon { background: var(--ok-soft); color: var(--ok); }
.sys-card__title { font-size: var(--t-row-title); font-weight: var(--w-bold); }
.sys-card__sub { font-size: var(--t-footnote); color: var(--text-2); font-weight: var(--w-semibold); }

/* Composer */
.composer { position: sticky; bottom: 0; z-index: var(--z-nav); margin: 0 calc(var(--gutter) * -1); padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; }
.composer__field { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 16px; border-radius: 22px; border: 1px solid var(--line-strong); background: var(--surface-raised); font-size: var(--t-body); line-height: 1.35; resize: none; outline: none; }
.composer__send { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-strong); color: var(--text-on-accent); }
.composer__send:disabled { background: var(--line-strong); color: var(--text-2); }
.composer-block { position: sticky; bottom: 0; z-index: var(--z-nav); margin: 0 calc(var(--gutter) * -1); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }

/* ---------- Pipeline (c8) ---------- */
.board { flex: 1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) calc(var(--tabbar-clearance) - 30px); margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; min-height: 0; scroll-padding: 0 var(--gutter); }
.col { flex: none; width: calc(100% - 44px); max-width: 330px; scroll-snap-align: start; border-radius: 28px; display: flex; flex-direction: column; min-height: 0; }
.col__head { padding: 16px 16px 10px; display: flex; justify-content: space-between; align-items: flex-end; }
.col__name { display: flex; gap: 8px; align-items: center; font-size: var(--t-headline); font-weight: var(--w-heavy); }
.col__name i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 10px var(--dot); }
.col__name small { font-size: var(--t-footnote); color: var(--text-2); font-weight: var(--w-semibold); }
.col__sum { font-size: var(--t-title); font-weight: var(--w-black); letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.col__bar { height: 4px; border-radius: var(--r-xs); margin: 0 16px 10px; background: var(--line); overflow: hidden; }
.col__bar i { display: block; height: 100%; background: var(--dot); }
.col__cards { flex: 1; overflow-y: auto; padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 9px; scrollbar-width: none; }
.job-card { border-radius: var(--r-lg); padding: 13px 14px; text-align: left; width: 100%; background: var(--surface); box-shadow: inset 0 0 0 .5px var(--line), 0 6px 18px rgba(0,0,0,.08); transition: transform var(--d-press) var(--ease-press), opacity var(--d-tint); }
.job-card:active { transform: scale(var(--press-scale)); }
.job-card__top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-row-title); font-weight: var(--w-bold); }
.job-card__amt { font-weight: var(--w-black); font-variant-numeric: tabular-nums; }
.job-card p { font-size: var(--t-footnote); color: var(--text-2); margin-top: 3px; }
.job-card__meta { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.job-card.is-stuck { box-shadow: inset 0 0 0 1.5px var(--stage-quoted), 0 0 0 3px var(--warn-soft); }
.job-card.is-lifted { opacity: .25; }
.job-card.is-dragging { position: absolute; z-index: var(--z-drag); width: 260px; transform: rotate(-3deg) scale(1.04); box-shadow: var(--e-drag); pointer-events: none; }
.col__drop { border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 14px; text-align: center; font-size: var(--t-footnote); color: var(--text-2); font-weight: var(--w-semibold); }

/* ---------- Calendar (c10) ---------- */
.daystrip { display: flex; gap: 6px; margin: 6px 0 10px; }
.daystrip button { flex: 1; min-height: 52px; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--t-caption); font-weight: var(--w-bold); color: var(--text-2); }
.daystrip button b { font-size: var(--t-headline); color: var(--ink); font-weight: var(--w-heavy); }
.daystrip button[aria-selected="true"] { background: var(--ink); color: var(--surface-raised); }
.daystrip button[aria-selected="true"] b { color: var(--surface-raised); }
.daystrip i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.timeline { position: relative; margin: 0 0 0 44px; --H: 74px; }
.timeline__hr { position: absolute; left: -44px; right: 0; border-top: 1px solid var(--line); font-size: var(--t-caption); font-weight: var(--w-semibold); color: var(--text-2); }
.timeline__hr span { position: absolute; top: -8px; left: 0; width: 36px; text-align: right; }
.timeline__now { position: absolute; left: -6px; right: 0; height: 2px; background: var(--accent); z-index: 5; box-shadow: 0 0 10px var(--accent); }
.event { position: absolute; left: 0; right: 0; border-radius: var(--r-md); padding: 8px 12px 8px 16px; overflow: hidden; text-align: left; background: var(--surface); box-shadow: inset 0 0 0 .5px var(--line); isolation: isolate; }
.event::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c, var(--accent)); }
.event::after { content: ""; position: absolute; inset: 0; background: var(--c, var(--accent)); opacity: .12; z-index: -1; }
.event b { font-size: var(--t-subhead); font-weight: var(--w-bold); display: block; }
.event small { font-size: var(--t-caption); color: var(--text-2); font-weight: var(--w-semibold); }
.event.is-done { opacity: .55; } .event.is-cancelled b { text-decoration: line-through; }
.event--ghost { background: transparent; box-shadow: none; border: 2px dashed var(--c, var(--accent)); animation: breathe 2.4s ease-in-out infinite; }
.event--ghost::after { opacity: .06; }
.event__tag { font-size: var(--t-caption); font-weight: var(--w-black); color: var(--c); text-transform: uppercase; letter-spacing: .4px; }
@keyframes breathe { 50% { opacity: .62; } }

/* ---------- States ---------- */
.empty { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-2); margin-bottom: 6px; }
.empty__title { font-size: var(--t-headline); font-weight: var(--w-heavy); }
.empty__text { font-size: var(--t-subhead); color: var(--text-2); max-width: 280px; line-height: 1.45; }
.empty .btn { margin-top: 10px; }
.skeleton { background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--line-strong) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
:root[data-motion="reduced"] .skeleton { animation: none; }
.sk-row { display: flex; gap: 12px; align-items: center; padding: 12px 10px; }
.sk-row .skeleton:first-child { width: 44px; height: 44px; border-radius: 50%; flex: none; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.offline-pill { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translate(-50%, -80px); z-index: var(--z-toast); display: flex; gap: 6px; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--t-footnote); font-weight: var(--w-bold); background: var(--ink); color: var(--surface-raised); transition: transform var(--d-sheet) var(--ease-sheet); pointer-events: none; }
.offline-pill.is-on { transform: translate(-50%, 0); }
.offline-pill svg.i { width: 16px; height: 16px; }
.toast { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; padding: 11px 18px; border-radius: var(--r-pill); background: rgba(20, 22, 28, .92); color: #fff; font-size: var(--t-subhead); font-weight: var(--w-bold); white-space: nowrap; z-index: var(--z-toast); transition: transform var(--d-toast) var(--ease-signature), opacity var(--d-toast); pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone="danger"] { background: var(--danger); }
/* Full-screen primer / sign-in layouts */
.center-screen { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40px 8px; gap: 12px; }
.primer__icon { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; margin: 0 auto 8px; color: var(--accent); }
.primer__icon svg.i { width: 40px; height: 40px; }
.stub { padding: 16px; margin-top: 12px; }
.stub h3 { font-size: var(--t-headline); font-weight: var(--w-heavy); margin-bottom: 6px; }
.stub ul { margin: 8px 0 0 18px; font-size: var(--t-subhead); line-height: 1.55; color: var(--ink); }
.stub code { font-size: .85em; background: var(--surface-sunken); padding: 1px 5px; border-radius: 5px; }