/* Konsiar design system (owner: lead). Apple's layout, spacing and component grammar; the Konsiar theme (Sire, 5 Nov 2026):
   oxblood, claret, stone and ivory, Michroma for the logo and headings, JetBrains Mono for labels and navigation.
   Spec: .claude/skills/jewellery-inbox-ui/SKILL.md. Components use tokens only.
   Contrast for every used pair: python3 scripts/contrast-check.py.
   Look: soft ivory paper, warm charcoal ink, oxblood for actions, the logo and page titles. Colour comes in small doses: a coloured icon per section, coloured initials per customer,
   channel and status dots. No shadows on chrome, no gradients, no script faces. */

/* Instrument Sans (self-hosted, SIL OFL 1.1, Google Fonts v4), variable weight 400 to 700. Latin-ext carries the rupee sign. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Konsiar theme faces (self-hosted, SIL OFL 1.1, Google Fonts): Michroma 400 for the logo and headings, JetBrains Mono 500 for
   labels and navigation. Self-hosted so the strict font-src 'self' policy stays and no visitor data goes to Google. */
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/michroma-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/michroma-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens: dark claret (device setting dark, or chosen) ---------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151012; --bg-raised: #1E1719; --bg-inset: #2A2124;   /* warm near-black; claret only in the top bar */
  --border: #332A2D; --border-strong: #463B3F; --control-border: #857674;
  --text: #F3ECE1; --text-2: #CFC4B4; --text-3: #ADA197;
  --accent: #EADCC8; --accent-hover: #F3ECE1; --accent-soft: rgba(243, 236, 225, .10); --accent-ink: #3E0D14; /* ivory actions */
  --success: #7DD39A; --warning: #F2A65F; --warning-soft: rgba(242, 166, 95, .14); --warning-ink: #2A1400; --danger: #FF8D83;
  --hover: rgba(243, 236, 225, .05);
  --shadow: none;
  --toast-bg: #F3ECE1; --toast-ink: #2A080D;
  --nav-bg: #2A080D; --nav-ink: #F3ECE1; --nav-ink-2: #CFC4B4; --nav-field: rgba(243, 236, 225, .10); --nav-line: rgba(243, 236, 225, .22);
  --nav-ig: #FF6FA0; --nav-wa: #3DDC84; --nav-ok: #3DDC84;
  --ig: #F0679A; --wa: #2BC46A;
  --c-blue: #0A84FF; --c-orange: #F07A2A; --c-green: #2DB863; --c-purple: #9B63F0; --c-pink: #EC4A80;
  --c-indigo: #6C6CE6; --c-sky: #2AA9E6; --c-yellow: #E0A21A; --c-grey: #8E8E98;
  --av-1: #FF9CBF; --av-2: #FFC978; --av-3: #C7A6FF; --av-4: #8ED3FF; --av-5: #8FE0AE; --av-6: #FFB08A; --av-7: #B4B6FF;
}
/* ---------- tokens: light (device setting, unless the user chose dark) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #FAF9F7; --bg-raised: #FFFFFF; --bg-inset: #F1EFEC;   /* Sire, 6 Nov: a slight off-white page (was ivory #F7F3EC), white panels, light wells */
    --border: #E7E4DF; --border-strong: #D6D1CA; --control-border: #8C7B71;
    --text: #2E2326; --text-2: #5C4A44; --text-3: #6B5A53;       /* warm charcoal ink, muted brown */
    --accent: #3E0D14; --accent-hover: #2A080D; --accent-soft: rgba(62, 13, 20, .06); --accent-ink: #F3ECE1; /* oxblood actions */
    --success: #1D6A38; --warning: #94470A; --warning-soft: rgba(148, 71, 10, .10); --warning-ink: #FFFFFF; --danger: #AE2A1F;
    --hover: rgba(46, 35, 38, .04);
    --shadow: none;
    --toast-bg: #2A080D; --toast-ink: #F3ECE1;
    --nav-bg: #2A080D; --nav-ink: #F3ECE1; --nav-ink-2: #CFC4B4; --nav-field: rgba(243, 236, 225, .10); --nav-line: rgba(243, 236, 225, .24);
    --nav-ig: #FF6FA0; --nav-wa: #3DDC84; --nav-ok: #3DDC84;
    --ig: #C2255C; --wa: #157F44;
    --c-blue: #0A84FF; --c-orange: #E5650F; --c-green: #22A355; --c-purple: #8A4BE8; --c-pink: #E0306C;
    --c-indigo: #5B5BD6; --c-sky: #1C9BD8; --c-yellow: #C98A00; --c-grey: #8E8E96;
    --av-1: #A3214F; --av-2: #8A4B00; --av-3: #5E2DB3; --av-4: #0B5F8A; --av-5: #17693A; --av-6: #9A3D0B; --av-7: #3E3EA8;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FAF9F7; --bg-raised: #FFFFFF; --bg-inset: #F1EFEC;   /* Sire, 6 Nov: a slight off-white page (was ivory #F7F3EC), white panels, light wells */
  --border: #E7E4DF; --border-strong: #D6D1CA; --control-border: #8C7B71;
  --text: #2E2326; --text-2: #5C4A44; --text-3: #6B5A53;       /* warm charcoal ink, muted brown */
  --accent: #3E0D14; --accent-hover: #2A080D; --accent-soft: rgba(62, 13, 20, .06); --accent-ink: #F3ECE1; /* oxblood actions */
  --success: #1D6A38; --warning: #94470A; --warning-soft: rgba(148, 71, 10, .10); --warning-ink: #FFFFFF; --danger: #AE2A1F;
  --hover: rgba(46, 35, 38, .04);
  --shadow: none;
  --toast-bg: #2A080D; --toast-ink: #F3ECE1;
  --nav-bg: #2A080D; --nav-ink: #F3ECE1; --nav-ink-2: #CFC4B4; --nav-field: rgba(243, 236, 225, .10); --nav-line: rgba(243, 236, 225, .24);
  --nav-ig: #FF6FA0; --nav-wa: #3DDC84; --nav-ok: #3DDC84;
  --ig: #C2255C; --wa: #157F44;
  --c-blue: #0A84FF; --c-orange: #E5650F; --c-green: #22A355; --c-purple: #8A4BE8; --c-pink: #E0306C;
  --c-indigo: #5B5BD6; --c-sky: #1C9BD8; --c-yellow: #C98A00; --c-grey: #8E8E96;
  --av-1: #A3214F; --av-2: #8A4B00; --av-3: #5E2DB3; --av-4: #0B5F8A; --av-5: #17693A; --av-6: #9A3D0B; --av-7: #3E3EA8;
}
:root {
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', ui-sans-serif, system-ui, 'Segoe UI', 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
  --display: 'Michroma', 'Instrument Sans', system-ui, sans-serif;           /* logo and headings, uppercase */
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* labels, navigation, tagline, uppercase */
  /* Konsiar palette (Sire, 5 Nov 2026). The theme tokens above are built from these. */
  --k-oxblood: #3E0D14; --k-claret: #2A080D; --k-stone: #CFC4B4; --k-ivory: #F3ECE1; --k-muted: #5C4A44;
  --account: #F3ECE1; --account-ink: #3E0D14; /* account circle on the claret bar: ivory with oxblood initials, both themes */
  --r-sm: 4px; --r-md: 4px; --r: 8px; --r-pill: 999px;   /* 4 buttons and fields, 8 cards and popovers; pill only for badges and dots */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --appbar: 48px; --nav: 232px; --list: 344px; --context: 300px; --tabbar: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* component display rules must never reveal hidden elements */
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 14px/1.43 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; color: var(--text); }
/* Sire, 6 Nov: Michroma for the KONSIAR wordmark only (uppercase, tracked 0.08em, its one weight 400). Page titles, display
   and body are Instrument Sans. */
.logo { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
h1 { font-family: var(--font); font-weight: 600; letter-spacing: -0.015em; font-size: 22px; line-height: 1.2; color: var(--accent); }  /* large title */
h2, h3 { font-family: var(--font); font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; } /* headline */
h3 { font-size: 14px; }
h4 { font-size: 14px; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
.num, time, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
/* Konsiar theme: small labels and the sidebar group names in JetBrains Mono, uppercase, lightly tracked, muted. */
.label, .tagline, .kicker, .group { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); }
.btn .label, button .label, a .label { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; } /* words inside buttons and links stay as written */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent-soft); color: var(--text); }
.icon { width: 16px; height: 16px; flex: none; fill: currentColor; }
.icon.sm { width: 14px; height: 14px; }
.kicker, .group { font-size: 10.5px; }
.text-attn { color: var(--warning); font-weight: 600; }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.dot.ok { background: var(--success); } .dot.attn { background: var(--warning); } .dot.bad { background: var(--danger); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; background: var(--accent); color: var(--accent-ink); }
.badge.attn { background: var(--warning); color: var(--warning-ink); }
.icon.ch-instagram { color: var(--ig); } .icon.ch-whatsapp { color: var(--wa); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 34px; padding: 0 14px;
  border-radius: var(--r-md); border: 0; background: var(--bg-inset); color: var(--text); box-shadow: inset 0 0 0 1px var(--border);
  font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform .12s var(--ease), background-color .12s var(--ease); }   /* pearl capsule */
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-sm); padding: 0 20px; box-shadow: none; } /* the one CTA per view */
.btn.primary:hover { background: var(--accent-hover); }
.btn.quiet { background: transparent; box-shadow: none; color: var(--text-2); }
.btn.quiet:hover { color: var(--text); }
.btn.tint { background: transparent; box-shadow: none; color: var(--accent); }   /* text action in accent, e.g. Add */
.btn.tint:hover { background: var(--accent-soft); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); border-radius: var(--r-sm); }
.btn.secondary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); border-radius: var(--r-sm); } /* ghost button */
.btn.resume .icon { color: var(--success); }
.btn.small { min-height: 30px; padding: 0 12px; font-size: 13px; }
.btn.icon-only { width: 34px; padding: 0; border-radius: var(--r-sm); }
.btn.small.icon-only { width: 30px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.field { display: grid; gap: 6px; }
.field > label, legend.label { font: 600 12.5px/1.4 var(--font); text-transform: none; letter-spacing: 0; color: var(--text); }
.help { font-size: 12.5px; color: var(--text-3); }
.err { font-size: 12.5px; color: var(--danger); }
.err:empty { display: none; }
.input, .textarea, .select { width: 100%; min-height: 36px; padding: 7px 12px; border-radius: var(--r-md);
  border: 1px solid var(--control-border); background: var(--bg-raised); color: var(--text); font-size: 14px; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.check { display: flex; align-items: center; gap: var(--s3); min-height: 36px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
/* status: neutral chips are a hairline capsule; meaning chips are coloured text led by a small dot (or an icon) */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap; background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); }
.chip.ok, .chip.attn, .chip.bad, .chip.accent { border: 0; padding: 0; }
.chip.ok { color: var(--success); } .chip.attn { color: var(--warning); } .chip.bad { color: var(--danger); } .chip.accent { color: var(--accent); }
.chip.ok::before, .chip.attn::before, .chip.bad::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip:has(> .icon)::before { display: none; }
.chip .icon { width: 12px; height: 12px; }
.switch { position: relative; width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--bg-inset);
  border: 1px solid var(--control-border); cursor: pointer; flex: none; transition: background-color .15s var(--ease); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-2); transition: transform .15s var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--accent-ink); }
.switch[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- shell ---------- */
.shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.appbar { display: none; }
.rail { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3); min-height: 52px;
  padding: var(--s2) var(--s4); background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } /* frosted sub-nav */
@supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg); } }
.topbar h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar { position: fixed; z-index: 30; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(var(--tabs, 5), 1fr);
  height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent); border-top: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.tabbar a { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; color: var(--text-2);
  text-decoration: none; font-size: 11px; font-weight: 600; min-height: 44px; }
.tabbar a .icon { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--accent); }
.tabbar .count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  border: 2px solid var(--bg-raised); background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; }
.tabbar .count.attn { background: var(--warning); color: var(--warning-ink); }
.content { padding: var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start; }

@media (min-width: 1024px) {
  .shell { grid-template-columns: var(--nav) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
  .appbar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1fr); gap: var(--s4);
    align-items: center; height: var(--appbar); padding: 0 var(--s4) 0 20px; background: var(--nav-bg); color: var(--nav-ink); } /* global bar */
  .appbar .global-search { grid-column: 2; position: relative; }
  .appbar .global-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--nav-ink-2); }
  .appbar .global-search input { padding-left: 34px; min-height: 32px; border-radius: var(--r-sm); background: var(--nav-field); border: 0; color: var(--nav-ink); font-size: 13px; }
  .appbar .global-search input::placeholder { color: var(--nav-ink-2); }
  .appbar .account { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s3); }
  .appbar .logo { grid-column: 1; justify-self: start; color: var(--nav-ink); text-decoration: none; font-size: 15px; line-height: 1; white-space: nowrap; } /* the Konsiar wordmark */
  .appbar .logo:focus-visible { outline-color: var(--nav-ink); }
  .rail { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding: 18px var(--s3);
    border-right: 1px solid var(--border); background: var(--bg); min-height: 0; }
  .rail > .brand { display: none; }
  .rail .group { margin: 22px 10px 6px; }
  .rail .group:first-of-type { margin-top: var(--s1); }
  .rail a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm);
    color: var(--text); text-decoration: none; font-weight: 400; font-size: 14px; position: relative; }
  .rail a .icon { width: 18px; height: 18px; color: var(--tone, var(--text-2)); }
  .rail a:hover { background: var(--hover); }
  .rail a[aria-current="page"] { background: var(--accent-soft); font-weight: 600; }
  .rail a .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
  .rail a .count.attn { background: var(--warning); color: var(--warning-ink); }
  .rail .foot { margin-top: auto; display: grid; gap: var(--s2); padding: var(--s4) 10px var(--s2); border-top: 1px solid var(--border); }
  .rail .foot:empty { display: none; }
  .main { padding-bottom: 0; min-height: 0; overflow-y: auto; }
  .tabbar { display: none; }
  .content { padding: var(--s5) var(--s6); max-width: 1040px; width: 100%; }
  .topbar { padding: var(--s2) var(--s6); min-height: 60px; }
}
/* section colours: a line icon per sidebar item, never a filled tile */
.tone-blue { --tone: var(--c-blue); } .tone-orange { --tone: var(--c-orange); } .tone-green { --tone: var(--c-green); }
.tone-purple { --tone: var(--c-purple); } .tone-pink { --tone: var(--c-pink); } .tone-indigo { --tone: var(--c-indigo); }
.tone-sky { --tone: var(--c-sky); } .tone-yellow { --tone: var(--c-yellow); } .tone-grey { --tone: var(--c-grey); }

/* channel status: two brand-coloured icons with status dots; hover or focus opens the detail card */
.chs { position: relative; }
.chs > a { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--bg-inset); color: var(--text-2); text-decoration: none; }
.chs .ch-dot { display: inline-flex; align-items: center; gap: 6px; }
.chs .ch-dot .icon { width: 15px; height: 15px; }
.chs .ch-dot.instagram .icon { color: var(--ig); } .chs .ch-dot.whatsapp .icon { color: var(--wa); }
.chs-pop { display: none; position: absolute; top: 100%; right: 0; z-index: 40; padding-top: var(--s2); }
.chs:hover .chs-pop, .chs:focus-within .chs-pop { display: block; }
.chs-card { width: 300px; display: grid; padding: 6px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text); }
.chs-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; }
.chs-row + .chs-row, .chs-card > a { border-top: 1px solid var(--border); }
.chs-row > .icon { width: 20px; height: 20px; justify-self: center; color: var(--text-2); }
.chs-row.instagram > .icon { color: var(--ig); } .chs-row.whatsapp > .icon { color: var(--wa); }
.chs-row .label { display: block; font: 600 14px/1.4 var(--font); text-transform: none; letter-spacing: 0; color: var(--text); }
.chs-row .sub { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chs-card > a { padding: 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
.appbar .chs > a { background: transparent; border: 1px solid var(--nav-line); height: 30px; color: var(--nav-ink-2); }
.appbar .chs .ch-dot.instagram .icon { color: var(--nav-ig); } .appbar .chs .ch-dot.whatsapp .icon { color: var(--nav-wa); }
.appbar .chs > a .dot { background: var(--nav-ink-2); } .appbar .chs > a .dot.ok { background: var(--nav-ok); }
.appbar .chs > a .dot.attn { background: var(--c-orange); } .appbar .chs > a .dot.bad { background: var(--danger); }
.account-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; cursor: pointer;
  background: var(--account); color: var(--account-ink); font-size: 12px; font-weight: 600; text-transform: uppercase; }

.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.brand .mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font); font-weight: 600; font-size: 13px; }
.brand .name { font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .name.logo { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; } /* the wordmark keeps Michroma */
.brand .sub { display: block; font-family: var(--font); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-3); margin-top: 1px; }

/* ---------- panels and rows ---------- */
.panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.panel.gilded { border-color: var(--border); }
.panel-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); flex-wrap: wrap; min-height: 46px; }
.panel-head > .icon { color: var(--text-3); }
.panel-head h2 { flex: 1; min-width: 0; }
.panel-body { padding: var(--s4); display: grid; gap: var(--s4); }
.rows > * + * { border-top: 1px solid var(--border); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); min-height: 48px; }
.row .grow { flex: 1 1 200px; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stack { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.actions .grow { flex: 1 1 220px; min-width: 0; }
.health { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.health-row { display: flex; align-items: center; gap: var(--s2); min-height: 24px; color: var(--text-2); font-size: 12.5px; }
.health-row .grow { flex: 1; }
.rail a.health { display: grid; min-height: 0; padding: var(--s1) 0; }
.rail a.health:hover { background: transparent; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { margin-bottom: 6px; }

/* ---------- inbox: list | thread | context ---------- */
.inbox { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; flex: 1; }
.inbox .list { display: flex; flex-direction: column; min-width: 0; background: var(--bg-raised); }
.inbox .pane, .inbox .context { display: none; }
.inbox.has-open .list { display: none; }
.inbox.has-open .pane { display: flex; }
@media (min-width: 1024px) {
  .main:has(> .inbox) { overflow: hidden; }
  .inbox { grid-template-columns: var(--list) minmax(0, 1fr); height: 100%; }
  .inbox .list { display: flex !important; border-right: 1px solid var(--border); overflow: hidden; }
  .inbox .pane { display: flex !important; overflow: hidden; }
  .inbox .scroll { overflow-y: auto; }
  .phone-top { display: none !important; }
}
@media (min-width: 1280px) {
  .inbox.has-open { grid-template-columns: var(--list) minmax(0, 1fr) var(--context); }
  .inbox.has-open .context { display: block; overflow-y: auto; border-left: 1px solid var(--border); background: var(--bg); padding: 20px var(--s4); }
}
.inbox .list > .topbar { position: static; flex-wrap: wrap; background: var(--bg-raised); border-bottom: 0; padding: 20px 20px var(--s2); min-height: 0; }
.phone-top { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.phone-top .logo { margin-right: auto; color: var(--text); text-decoration: none; font-size: 14px; line-height: 1; white-space: nowrap; } /* Konsiar wordmark on phones */
.answered { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--success); white-space: nowrap; }
.answered .icon { width: 12px; height: 12px; }
/* filters: a segmented control (inset track, the chosen option raised) */
.filters { display: flex; gap: 2px; margin: var(--s2) var(--s4) var(--s3); padding: 2px; border-radius: var(--r-sm); background: var(--bg-inset);
  overflow-x: auto; scrollbar-width: none; }
.filters button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 8px;
  border-radius: 3px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 400; color: var(--text-2); cursor: pointer; }
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text); font-weight: 600; }
.filters .sep { flex: none; width: 1px; background: var(--border-strong); margin: 4px 2px; }
.search { position: relative; padding: var(--s1) var(--s4); }
.search .icon { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.search input { padding-left: 34px; border: 0; border-radius: var(--r-sm); background: var(--bg-inset); }
.inbox .list .scroll { display: grid; gap: 2px; align-content: start; padding: 0 var(--s2) var(--s3); }
.conv { display: grid; grid-template-columns: 10px 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  width: 100%; min-height: 64px; padding: 11px 12px 11px 4px; border: 0; border-radius: 6px; background: transparent; text-align: left;
  cursor: pointer; color: inherit; position: relative; }
.conv:hover { background: var(--hover); }
.conv[aria-current="true"] { background: var(--accent-soft); }
.conv > .unread-slot { grid-row: span 2; justify-self: center; display: flex; }
.conv > .avatar { grid-row: span 2; }
.avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-inset); color: var(--text-2); font-weight: 600; font-size: 14px; text-transform: uppercase; flex: none; }
.avatar.av-1 { color: var(--av-1); } .avatar.av-2 { color: var(--av-2); } .avatar.av-3 { color: var(--av-3); } .avatar.av-4 { color: var(--av-4); }
.avatar.av-5 { color: var(--av-5); } .avatar.av-6 { color: var(--av-6); } .avatar.av-7 { color: var(--av-7); }
.avatar .ch { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--text-3); border: 2px solid var(--bg-raised); color: #FFFFFF; }
.avatar .ch.instagram { background: var(--ig); } .avatar .ch.whatsapp { background: var(--wa); }
.avatar .ch .icon { width: 10px; height: 10px; }
.conv .who { grid-column: 3; font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv time { grid-column: 4; font-size: 12px; color: var(--text-3); justify-self: end; }
.conv .preview { grid-column: 3; font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .state { grid-column: 4; justify-self: end; display: flex; gap: 6px; align-items: center; }
.conv .state .chip { border: 0; padding: 0; }
.conv.unread .preview { color: var(--text); font-weight: 600; }
.conv.unread time { color: var(--accent); font-weight: 600; }
.unread-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.pane { flex-direction: column; min-width: 0; background: var(--bg-raised); container-type: inline-size; }
.thread-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4) var(--s3) 20px; min-height: 64px; border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.thread-head .grow { flex: 1; min-width: 0; }
.thread-head .who { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.thread-head .sub { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.thread-head .avatar { width: 38px; height: 38px; font-size: 13px; }
@container (max-width: 560px) { .thread-head .btn .label { display: none; } .thread-head .btn.small { width: 34px; padding: 0; } }
@media (min-width: 1024px) { .thread-head .back { display: none; } }
.thread { flex: 1; overflow-y: auto; padding: 20px var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.notices { display: grid; gap: var(--s2); margin-bottom: var(--s2); }
.day { align-self: center; margin: var(--s2) 0 2px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.msg { max-width: min(72%, 560px); display: grid; gap: 4px; }
@media (max-width: 767px) { .msg { max-width: 86%; } }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; justify-items: end; }
/* customer: soft grey; automatic reply: white with a hairline; your team: solid accent */
.bubble { padding: 9px 14px; border-radius: 12px; background: var(--bg-inset); border: 1px solid transparent;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; font-size: 16px; color: var(--text); }
.msg.out .bubble { background: var(--bg-raised); border-color: var(--border-strong); }
.msg.out.human .bubble { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.msg .meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 6px; align-items: center; font-size: 12px; color: var(--text-3); padding: 0 var(--s2); }
.msg.in .meta { justify-content: flex-start; }
.msg .meta > * { white-space: nowrap; }
.msg.out .meta .src { font-weight: 600; color: var(--accent); }
.msg.out.human .meta .src { color: var(--text-2); }
.attach { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 10px; border-radius: var(--r-sm); border: 1px dashed var(--control-border);
  font-size: 12.5px; color: var(--text-2); }
/* notices: a soft grey card; meaning is carried by the icon colour, never a coloured box or edge */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 6px; font-size: 14px;
  background: var(--bg-inset); color: var(--text-2); border: 0; flex-wrap: wrap; }
.notice > .icon { margin-top: 2px; color: var(--text-3); }
.notice.attn, .notice.bad, .notice.ok { color: var(--text); }
.notice.attn > .icon { color: var(--warning); } .notice.bad > .icon { color: var(--danger); } .notice.ok > .icon { color: var(--success); }
.notice .grow { flex: 1 1 180px; min-width: 0; }
.notice strong { color: var(--text); }
/* review card: the conversation is waiting on the team (shown above the composer) */
.review { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px var(--s3); align-items: start; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-raised); }
.review > * { grid-column: 2; }
.review > .icon { grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 2px; color: var(--c-orange); }
.review .src { font-size: 12px; font-weight: 600; color: var(--warning); }
.review .why { color: var(--text); font-weight: 600; font-size: 15px; }
.review .detail { color: var(--text-2); font-size: 14px; }
.review .actions { margin-top: 6px; }
.composer { padding: var(--s3) 20px calc(var(--s4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: grid; gap: 10px;
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.composer > p.faint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.composer > p.faint::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.composer form { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; padding: 11px 16px; border-radius: var(--r); font-size: 16px; line-height: 1.35; }
.composer form .btn.primary { min-height: 44px; }
@media (max-width: 1023px) {
  body.thread-open .tabbar { display: none; }
  /* phone thread: fixed-height column, messages scroll, hand-off card and composer stay pinned at the bottom */
  body.thread-open .shell { display: flex; flex-direction: column; height: 100dvh; }
  body.thread-open .main { flex: 1; min-height: 0; padding-bottom: 0; }
  body.thread-open .inbox { flex: 1; min-height: 0; }
  body.thread-open .inbox .pane { min-height: 0; height: 100%; }
  body.thread-open .review { padding: var(--s2) var(--s3); }
  body.thread-open .review .detail { display: none; }
  .thread { padding: var(--s4); }
}
/* context panel: white cards on the grey page */
.context .section { padding: var(--s4); margin-bottom: var(--s4); border-radius: var(--r); background: var(--bg-raised); display: grid; gap: var(--s3); }
.context .section > .actions { flex-wrap: nowrap; } .context .section > .actions .grow { flex: 1 1 0; }
.context .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s3); margin: 0; font-size: 14px; }
.context .kv dt, .context .kv dd { padding: 9px 0; border-top: 1px solid var(--border); }
.context .kv dt { color: var(--text-2); } .context .kv dd { margin: 0; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.context .order { display: grid; gap: 2px; padding: var(--s2) 0; border-top: 1px solid var(--border); font-size: 13px; }
.context .order:first-of-type { border-top: 0; }

/* ---------- stats, meters, steps, empty, loading ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.panel > .stats:last-child { border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.stat { background: var(--bg-raised); padding: var(--s3) var(--s4); display: grid; gap: 2px; align-content: start; }
.stat .v { font-family: var(--font); font-size: 28px; font-weight: 600; line-height: 1.14; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 12.5px; color: var(--text-2); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.meter { display: grid; gap: 5px; }
.meter .top { display: flex; justify-content: space-between; gap: var(--s3); font-size: 13px; }
.meter .bar { height: 4px; border-radius: 2px; background: var(--bg-inset); overflow: hidden; }
.meter .bar > span { display: block; height: 100%; background: var(--accent); }
.meter.over .bar > span { background: var(--danger); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-top: 1px solid var(--border); }
.step:first-child { border-top: 0; }
.step .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1px solid var(--control-border); color: var(--text-3); }
.step.done .dot { border-color: var(--success); color: var(--success); }
.step.blocked .dot { border-color: var(--warning); color: var(--warning); }
.empty { display: grid; justify-items: center; gap: var(--s2); text-align: center; padding: 48px var(--s5); color: var(--text-2); }
.empty .icon { width: 22px; height: 22px; color: var(--text-3); }
.empty h3 { font-size: 20px; line-height: 1.2; }
.empty p { max-width: 42ch; font-size: 13px; }
.skeleton { background: linear-gradient(90deg, var(--bg-inset), var(--hover), var(--bg-inset)); background-size: 200% 100%;
  border-radius: var(--r-sm); animation: shimmer 1.4s linear infinite; color: transparent !important; border-color: transparent !important; }
@keyframes shimmer { to { background-position: -200% 0; } }
.toast-zone { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; gap: var(--s2); width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--toast-bg); color: var(--toast-ink);
  font-size: 13.5px; font-weight: 400; box-shadow: var(--shadow); animation: rise .18s var(--ease); }
.toast.bad { background: var(--danger); color: var(--bg); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 1024px) { .toast-zone { bottom: var(--s5); } }

/* ---------- sheet (dialog) ---------- */
dialog.sheet { border: 1px solid var(--border); padding: 0; width: min(100vw, 560px); max-height: 92dvh; border-radius: var(--r);
  background: var(--bg-raised); color: var(--text); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .3); }
dialog.sheet::backdrop { background: rgba(10, 10, 14, .45); }
@media (max-width: 767px) { dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--r) var(--r) 0 0; border-bottom: 0; } }
.sheet header { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.sheet header h2 { flex: 1; }
.sheet .body { padding: var(--s4); display: grid; gap: var(--s4); overflow-y: auto; max-height: calc(92dvh - 130px); }
.sheet footer { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }

/* ---------- tables (platform console) ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font-weight: 600; color: var(--text-3); font-size: 12px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td.n { text-align: right; font-variant-numeric: tabular-nums; }
pre.mono { margin: 0; padding: var(--s3); border-radius: var(--r); background: var(--bg-inset); border: 1px solid var(--border); overflow: auto; color: var(--text-2); white-space: pre-wrap; }

/* ---------- auth (operational, not a marketing hero) ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.auth .art { display: none; }
.auth .form-col { display: grid; place-items: center; padding: 48px var(--s5); }
.auth form, .auth .card { width: min(100%, 380px); display: grid; gap: var(--s4); padding: var(--s6) var(--s5); background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.auth h1 { font-size: 22px; line-height: 1.2; }
.auth .lede { color: var(--text-2); font-size: 13.5px; }
.auth .brand .name { font-size: 18px; }
.rule { height: 2px; width: 40px; background: var(--accent); border: 0; margin: 0; border-radius: 1px; }
@media (min-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth .art { display: grid; align-content: end; gap: var(--s3); padding: 56px; background: var(--bg-raised); border-right: 1px solid var(--border); }
  .auth .art blockquote { margin: 0; max-width: 22ch; font-family: var(--font); font-size: 34px; letter-spacing: -0.02em; font-weight: 600; line-height: 1.12; color: var(--text); }
  .auth .art p { color: var(--text-3); font-size: 12.5px; max-width: 44ch; }
}

/* ---------- theme toggle ---------- */
.theme-toggle { justify-content: flex-start; }

/* ---------- touch screens: every control reaches 44px ---------- */
@media (pointer: coarse) {
  .btn, .btn.small { min-height: 44px; }
  .btn.icon-only, .btn.small.icon-only { width: 44px; }
  .filters button { height: 40px; }
  .input, .select { min-height: 44px; }
  /* 44px tap area, 32px visible shape: the transparent border is part of the target, not of the paint */
  .chs > a { height: 44px; border: 6px solid transparent; background-clip: padding-box; padding: 0 6px; }
  .account-btn { width: 44px; height: 44px; border: 6px solid transparent; background-clip: padding-box; }
  .switch { width: 46px; height: 28px; } .switch::after { width: 22px; height: 22px; } .switch[aria-checked="true"]::after { transform: translateX(18px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (forced-colors: active) { .btn.primary { border: 2px solid ButtonText; } .unread-mark, .dot, .chip::before { forced-color-adjust: none; } }

/* ---------- products (owner: lead): list, form, options, history, import ---------- */
.mode-line { display: grid; gap: var(--s2); }
.mode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 13px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: 0 var(--s4) var(--s3); border-bottom: 1px solid var(--border); }
.filter-bar .filters { margin: 0; flex: 1 1 320px; }
.filter-bar .selects { display: flex; gap: var(--s2); flex-wrap: wrap; }
.filters .n { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.select.compact { width: auto; min-height: 28px; padding: 3px 11px; border-radius: var(--r-sm); font-size: 12.5px; }
.thumb { width: 48px; height: 48px; border-radius: var(--r-md); object-fit: cover; border: 1px solid var(--border); background: var(--bg-inset); display: block; }
.thumb.none { display: grid; place-items: center; color: var(--text-3); }
.prow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "t m p" "t c c"; gap: 4px var(--s3); align-items: center;
  padding: var(--s3) var(--s4); min-height: 72px; color: inherit; text-decoration: none; }
.prow:hover { background: var(--hover); }
.prow > .thumb { grid-area: t; align-self: start; }
.pmain { grid-area: m; min-width: 0; }
.pname { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pprice { grid-area: p; justify-self: end; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pprice.quiet { font-weight: 400; font-size: 13px; color: var(--text-2); }
.pchips { grid-area: c; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.pwhen { display: none; }
.prow.loading { pointer-events: none; }
.skeleton.line { height: 12px; width: 60%; } .skeleton.line.short { width: 35%; margin-top: 6px; }
.more { display: flex; justify-content: center; padding: 0 var(--s4); }
.more:not(:empty) { padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--border); }
.actions.center { justify-content: center; }
@media (min-width: 900px) {
  .prow { grid-template-columns: 48px minmax(0, 1fr) 170px 230px 130px; grid-template-areas: "t m p c w"; }
  .pprice { justify-self: end; }
  .pchips { justify-content: flex-start; padding-left: var(--s4); }
  .pwhen { display: block; grid-area: w; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* form */
.pgrid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.pform { display: grid; gap: var(--s4); min-width: 0; }
.pside { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
@media (min-width: 1180px) { .pgrid { grid-template-columns: minmax(0, 1fr) 300px; } .pside { position: sticky; top: 76px; } }
.basics { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 480px) { .basics { grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3); } }
.photo { display: grid; gap: 6px; justify-items: start; }
.photo-tile { width: 100%; aspect-ratio: 1; border-radius: var(--r); border: 1px dashed var(--control-border); background: var(--bg-inset);
  display: grid; place-items: center; overflow: hidden; cursor: pointer; position: relative; }
.photo-tile:has(img:not([hidden])) { border-style: solid; border-color: var(--border); }
.photo-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .ph { display: grid; justify-items: center; gap: 4px; color: var(--text-2); font-size: 12px; }
.photo-tile .ph .icon { width: 22px; height: 22px; }
.photo .btn.quiet { padding: 0; min-height: 24px; }
.pstate-line { font-size: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--bg-inset); max-width: 100%; justify-self: start; }
.seg-opt { min-height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--text-2); cursor: pointer; font-size: 14px; }
.seg-opt:hover { color: var(--text); }
.seg-opt[aria-checked="true"] { background: var(--bg-raised); color: var(--text); font-weight: 600; border-color: var(--border-strong); }
.seg-opt:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) { .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); width: 100%; } .seg-opt { padding: 0 6px; } }
.amount { display: grid; grid-template-columns: 112px minmax(0, 220px); gap: var(--s2); }
details.more-details { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r); }
details.more-details > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); min-height: 46px;
  font-family: var(--font); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
details.more-details > summary::-webkit-details-marker { display: none; }
details.more-details > summary::before { content: ''; align-self: center; width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg); transition: transform .15s var(--ease); margin-right: 4px; }
details.more-details[open] > summary::before { transform: rotate(45deg); }
details.more-details[open] > summary { border-bottom: 1px solid var(--border); }
details.more-details > summary .faint { font-weight: 400; letter-spacing: 0; }
.label-row { display: grid; gap: 2px; } .label-row .label { font: 600 12.5px/1.4 var(--font); text-transform: none; letter-spacing: 0; color: var(--text); }
.variants { display: grid; gap: var(--s2); container-type: inline-size; }
.variant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "l s x" "p a a"; gap: var(--s2); align-items: center;
  padding: var(--s2); border-radius: var(--r-md); border: 1px solid var(--border); }
.variant > input:nth-child(1) { grid-area: l; } .variant > input:nth-child(2) { grid-area: s; }
.variant > .vprice { grid-area: p; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.variant > select { grid-area: a; } .variant > button { grid-area: x; }
.variant .err { grid-column: 1 / -1; }
@container (max-width: 520px) { .variant { grid-template-areas: "l s x" "p p p" "a a a"; } }
.savebar { position: sticky; bottom: var(--s3); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--bg-raised); border: 1px solid var(--border); }
.savebar .grow { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.pside .kv { display: grid; gap: 2px; }
ol.history { list-style: none; margin: 0; padding: 0; }
ol.history li { display: grid; gap: 3px; padding: var(--s3) var(--s4); border-top: 1px solid var(--border); font-size: 13px; }
ol.history li:first-child { border-top: 0; }
ol.history .chip { margin-left: 6px; vertical-align: 1px; }
ol.history .btn.quiet { justify-self: start; padding: 0; min-height: 28px; }
.change { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.change .old { color: var(--text-3); text-decoration: line-through; }
.changes { display: grid; border: 1px solid var(--border); border-radius: var(--r-md); }
.change-row { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); grid-template-areas: "l l l" "o i n"; gap: 2px var(--s2); align-items: center; padding: var(--s3); }
.change-row + .change-row { border-top: 1px solid var(--border); }
.change-row .label { grid-area: l; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.change-row .old { grid-area: o; color: var(--text-2); text-decoration: line-through; }
.change-row .icon { grid-area: i; color: var(--text-3); }
.change-row .new { grid-area: n; color: var(--text); font-weight: 600; }
.map-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
details.imp-list > summary { cursor: pointer; font-weight: 600; padding: var(--s2) 0; }
details.imp-list .rows { border: 1px solid var(--border); border-radius: var(--r-md); }
@media (max-width: 1023px) {
  body.form-open .tabbar { display: none; }
  body.form-open .main { padding-bottom: 0; }
  .savebar { bottom: 0; margin: 0 calc(-1 * var(--s4)); border-radius: 0; border-width: 1px 0 0;
    padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-raised) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .savebar .btn { flex: 1 1 auto; }
}
@media (pointer: coarse) { .seg-opt { min-height: 44px; } .select.compact { min-height: 40px; } }
.topbar .back { order: -1; margin-left: calc(-1 * var(--s2)); }
.change-row .old.none { text-decoration: none; color: var(--text-3); }
.pside > .btn.danger { justify-self: start; }
.pform .notices:empty { display: none; }
.pform .notices { margin-bottom: 0; }
@media (max-width: 600px) { .seg:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- team rights, setup card, order hint (owner: lead, 5 Nov) ---------- */
.rights-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rights-list li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 13px; color: var(--text); }
.rights-list .icon { margin-top: 2px; color: var(--text-3); }
.rights-table td:not(:first-child), .rights-table th:not(:first-child) { text-align: center; white-space: nowrap; }
.rights-table td:first-child { min-width: 220px; }
.rights-table .icon { color: var(--success); }
ol.howto { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.rights-boxes { display: grid; gap: 4px; }
.check.right { align-items: flex-start; padding: 6px 0; }
.check.right input { margin-top: 3px; }
.check.right > span { display: grid; gap: 1px; }
.setup-card:empty { display: none; }
.setup-card { padding: var(--s2) var(--s4) 0; }
.setup-card .notice { padding: var(--s2) var(--s3); }
.thread-head .btn .icon + .label { margin-left: 0; }
/* Create order keeps its words even in a narrow chat pane (Sire could not find it as an icon) */
@container (max-width: 560px) { .thread-head .btn.small.order { width: auto; padding: 0 12px; } .thread-head .btn.order .label { display: inline; } }

/* lead (reply guide, 5 Nov): past-chat pairs and example rows */
.panel-body .filters { margin: 0; }
.pair, .row.example .grow { display: grid; gap: 2px; font-size: 13px; }
.pair .faint, .row.example .faint { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.row.example { align-items: flex-start; }
.row.example .chip { justify-self: start; margin-top: 6px; }
.handover-always { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.handover-always li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 13px; }
.handover-always .icon { margin-top: 2px; color: var(--text-3); flex: none; }
@media (max-width: 600px) { .row.example { flex-direction: column; } .row.example .actions { width: 100%; } }
/* lead (plan and usage, 5 Nov) */
.meter + .meter { margin-top: var(--s3); }
.meter .meter-help { font-size: 12px; line-height: 1.45; }
.meter.near .bar > span { background: var(--warning); }
/* lead (ManyChat gaps, 5 Nov) */
.ice-rows { display: grid; gap: var(--s2); }
.ice-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: var(--s2); }
@media (max-width: 600px) { .ice-row { grid-template-columns: 1fr; } }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip.tag { background: var(--bg-inset); }
.notes { display: grid; gap: var(--s2); }
.note { background: var(--warning-soft); border-radius: var(--r-md); padding: var(--s2) var(--s3); font-size: 13px; display: grid; gap: 2px; }
.note .faint { font-size: 11px; }
.saved-list .row { cursor: pointer; }

/* ---------- UX pass (5 Nov 2026): skip link, password reveal, busy buttons, single-column error pages ---------- */
.skip-link { position: absolute; left: var(--s3); top: -100px; z-index: 100; padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus, .skip-link:focus-visible { top: var(--s3); outline: 2px solid var(--text); outline-offset: 2px; }
.reveal-wrap { position: relative; display: flex; align-items: stretch; }
.reveal-wrap .input { padding-right: 72px; }
.reveal-wrap .reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 28px; padding: 0 10px; }
.btn[aria-busy="true"]::after { content: ''; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: k-spin .8s linear infinite; }
@keyframes k-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: .5; } }
.break { overflow-wrap: anywhere; }
@media (min-width: 900px) { .auth.single { grid-template-columns: minmax(0, 1fr); } }
/* The sign-in page's #view holder carried the card style and the form inside it too: one card, not two (seen 5 Nov). */
.auth #view.card { padding: 0; border: 0; background: none; box-shadow: none; }

/* ---------- Motion (6 Nov 2026, Sire: "animate what can be animated") ----------
   Animate UI's motion rules and tokens (github.com/imskyleen/animate-ui, MIT + Commons Clause; parts of its rules from Emil
   Kowalski's skills, MIT), written as plain CSS: no package, no framework. Subtle level. Only transform, opacity and filter
   move (heights only where a disclosure pushes the page). Springs are sampled into linear() curves (stiffness/damping as in
   the tokens); browsers without linear() keep the ease-out fallback. Reduced motion: the rule near the top of this file cuts
   every animation to an instant, and the scripts skip their waits (ui.js reducedMotion()). */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* enters or leaves */
  --ease-soft: cubic-bezier(0.215, 0.61, 0.355, 1);  /* unfolds, dims the page, a sheet slides in */
  --ease-away: cubic-bezier(0.33, 0.17, 0.67, 0.5);  /* dismissed, speeding away */
  --ease-color: cubic-bezier(0.25, 0.1, 0.25, 1);    /* colour */
  --spring-press: var(--ease-out); --spring-pop: var(--ease-out); --spring-toast: var(--ease-out);
  --spring-thumb: var(--ease-out); --spring-entrance: var(--ease-out); --spring-dialog: var(--ease-soft);
  --t-press: 420ms; --t-pop: 400ms; --t-toast: 480ms; --t-thumb: 460ms; --t-entrance: 560ms; --t-dialog: 560ms;
  --t-color: 200ms; --t-reveal: 300ms; --t-disclosure: 350ms; --t-sheet: 400ms; --t-overlay: 400ms; --t-dismiss: 200ms;
  --t-menu: 220ms; --t-swap: 150ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-press: linear(0, 0.073, 0.241, 0.437, 0.625, 0.785, 0.91, 0.993, 1.043, 1.067, 1.072, 1.065, 1.053, 1.039, 1.025, 1.014, 1.005, 1, 0.997, 0.995, 0.995, 0.995, 0.996, 0.997, 1); /* 550/30 */
    --spring-pop: linear(0, 0.051, 0.168, 0.31, 0.462, 0.603, 0.725, 0.825, 0.901, 0.955, 0.993, 1.017, 1.03, 1.035, 1.035, 1.032, 1.027, 1.022, 1.017, 1.012, 1.008, 1.005, 1.002, 1.001, 1); /* 400/29 */
    --spring-toast: linear(0, 0.049, 0.163, 0.304, 0.455, 0.596, 0.719, 0.82, 0.896, 0.954, 0.993, 1.019, 1.032, 1.038, 1.038, 1.035, 1.03, 1.024, 1.019, 1.013, 1.009, 1.006, 1.003, 1.001, 1); /* 280/24 */
    --spring-thumb: linear(0, 0.05, 0.162, 0.308, 0.455, 0.597, 0.717, 0.818, 0.896, 0.952, 0.992, 1.016, 1.03, 1.036, 1.037, 1.034, 1.029, 1.023, 1.018, 1.013, 1.009, 1.005, 1.003, 1.001, 1); /* 300/25 */
    --spring-entrance: linear(0, 0.046, 0.159, 0.3, 0.447, 0.59, 0.712, 0.814, 0.895, 0.953, 0.994, 1.021, 1.036, 1.042, 1.042, 1.039, 1.033, 1.027, 1.021, 1.015, 1.01, 1.006, 1.003, 1.001, 1); /* 200/20 */
    --spring-dialog: linear(0, 0.055, 0.173, 0.307, 0.437, 0.552, 0.648, 0.729, 0.791, 0.841, 0.879, 0.909, 0.931, 0.948, 0.961, 0.971, 0.978, 0.984, 0.988, 0.991, 0.993, 0.995, 0.996, 0.997, 1); /* 150/25, calm */
    --t-dialog: 730ms;
  }
}
@keyframes k-fade-in { from { opacity: 0; } }
@keyframes k-fade-out { to { opacity: 0; } }
@keyframes k-clear { from { opacity: 0; filter: blur(2px); } }

/* Press (used all day: quick, no hover scale). Colour changes ease instead of cutting. */
.btn { transition: transform var(--t-press) var(--spring-press), background-color var(--t-color) var(--ease-color),
  color var(--t-color) var(--ease-color), border-color var(--t-color) var(--ease-color); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled:active { transform: none; }
.conv, .row, .rail a, .tabbar a, .input, .textarea, .select, .chip, a { transition: background-color var(--t-color) var(--ease-color),
  color var(--t-color) var(--ease-color), border-color var(--t-color) var(--ease-color); }

/* Switch: the thumb glides on a spring with a hint of overshoot. */
.switch { transition: background-color var(--t-color) var(--ease-color), border-color var(--t-color) var(--ease-color); }
.switch::after { transition: transform var(--t-thumb) var(--spring-thumb), background-color var(--t-color) var(--ease-color); }

/* Sheets and dialogs: a calm scale and fade out of a light blur; on phones the sheet slides up from its edge. Both leave
   at once, quicker than they came. The page behind dims instead of cutting to dark. */
@keyframes k-dialog-in { from { opacity: 0; transform: scale(0.95); filter: blur(4px); } }
@keyframes k-dialog-out { to { opacity: 0; transform: scale(0.97); filter: blur(2px); } }
@keyframes k-sheet-in { from { opacity: 0; transform: translateY(100%); } }
@keyframes k-sheet-out { to { opacity: 0; transform: translateY(100%); } }
dialog.sheet[open] { animation: k-dialog-in var(--t-dialog) var(--spring-dialog) backwards; }
dialog.sheet[open]::backdrop { animation: k-fade-in var(--t-overlay) var(--ease-soft) backwards; }
dialog.sheet.leaving { animation: k-dialog-out var(--t-dismiss) var(--ease-away) forwards; }
dialog.sheet.leaving::backdrop { animation: k-fade-out var(--t-dismiss) var(--ease-away) forwards; }
@media (max-width: 767px) {
  dialog.sheet[open] { animation: k-sheet-in var(--t-sheet) var(--ease-soft) backwards; }
  dialog.sheet.leaving { animation: k-sheet-out var(--t-dismiss) var(--ease-away) forwards; }
}

/* Toasts rise from their edge out of a light blur on a spring that lands, and leave at once. */
@keyframes k-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); filter: blur(4px); } }
@keyframes k-toast-out { to { opacity: 0; transform: translateY(6px) scale(0.96); filter: blur(2px); } }
.toast { animation: k-toast-in var(--t-toast) var(--spring-toast) backwards; }
.toast.leaving { animation: k-toast-out var(--t-dismiss) var(--ease-away) forwards; }

/* Moving to another section: the content arrives (fade plus a short rise). Only when the section changes, never on a
   refresh; `backwards` so no transform is left behind once it lands. */
@keyframes k-rise-8 { from { transform: translateY(8px); } }
.content.arrive { animation: k-fade-in var(--t-reveal) var(--ease-out) backwards, k-rise-8 var(--t-entrance) var(--spring-entrance) backwards; }

/* A message that arrives while the chat is open pops in from its side. */
@keyframes k-msg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(2px); } }
.msg.arrive { animation: k-msg-in var(--t-pop) var(--spring-pop) backwards; }
.msg.out.arrive { transform-origin: bottom right; } .msg.in.arrive { transform-origin: bottom left; }

/* The sign-in error fades in place when it appears (only there: dashboard notices redraw with their page and must not flash
   on a refresh); a swapped label clears out of a light blur. */
.auth .notice:not([hidden]) { animation: k-clear var(--t-reveal) var(--ease-out) backwards; }
.swap { animation: k-clear var(--t-swap) var(--ease-out) backwards; }

/* Lead (quotes and bookings, 6 Nov): the owner's questions and the customer's answers, on the hand-off card and in the
   context column. Plain list on hairlines, question quiet above the answer; no tint, no box. */
.lead-lines { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.lead-lines li { padding: var(--s2) 0; border-top: 1px solid var(--border); }
.lead-lines li:first-child { border-top: 0; padding-top: 0; }
.lead-lines .q { color: var(--text-2); font-size: 12px; }
.lead-lines .a { color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.lead-lines .a.faint { color: var(--text-3); }

/* Channels page (lead, 6 Nov 2026): three guided cards, one per channel. Email uses the brand accent as its channel colour. */
.icon.ch-email { color: var(--accent); }
.chs .ch-dot.email .icon, .chs-row.email > .icon { color: var(--accent); }
.appbar .chs .ch-dot.email .icon { color: var(--nav-ink); }
.avatar .ch.email { background: var(--accent); color: var(--accent-ink); }
.channel-card .panel-body { display: grid; gap: var(--s3); align-content: start; }
.channel-card .panel-body > p, .channel-card .panel-body > .field { margin: 0; }
.channel-card .kicker { margin-top: 2px; }
.before { display: grid; gap: 6px; }
ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.ticks li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 13px; color: var(--text-2); }
ul.ticks .icon { margin-top: 2px; color: var(--success); flex: none; }
.copy-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: 4px; }
code.addr { font-family: var(--mono); font-size: 13px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--bg-inset);
  border: 1px solid var(--border); color: var(--text); word-break: break-all; user-select: all; }
.notice .code { font-family: var(--mono); letter-spacing: 0.08em; }
.btn.small.inline { min-height: 0; padding: 0 2px; vertical-align: baseline; text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
.connect-page .card h1 { margin-top: var(--s3); }