/* Matilda on Basecoat: amethyst (the default) and srg, each with a light and a dark mode.
   srg is black, warm ivory, and the gold from the SRG mark. Inter with a Fraunces wordmark,
   and the few layouts Basecoat has no component for. Loaded after basecoat.min.css. */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
}

/* Hex only: the dashboard charts read these at runtime, and Chart.js cannot parse oklch. */
:root {
  color-scheme: light;
  --radius: 0.625rem;
  --background: #F7F3FA;
  --foreground: #2B1540;
  --card: #FFFFFF;
  --card-foreground: #2B1540;
  --popover: #FFFFFF;
  --popover-foreground: #2B1540;
  --primary: #5A2E7A;
  --primary-foreground: #FFFFFF;
  --secondary: #EFE6F5;
  --secondary-foreground: #391A4C;
  --muted: #F1EAF6;
  --muted-foreground: #6E5E7A;
  --accent: #EFE6F5;
  --accent-foreground: #391A4C;
  --destructive: #B23A48;
  --border: #E3D8EC;
  --input: #E3D8EC;
  --ring: #8A3FFC;
  --chart-1: #8A3FFC;
  --chart-2: #5A2E7A;
  --chart-3: #B58BDA;
  --chart-4: #3F7D58;
  --chart-5: #B5842E;
  --chart-fill: #8A3FFC24;
  --sidebar: #F1EBF6;
  --sidebar-foreground: #2B1540;
  --sidebar-primary: #5A2E7A;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E5DAEE;
  --sidebar-accent-foreground: #2B1540;
  --sidebar-border: #E3D8EC;
  --sidebar-ring: #8A3FFC;
  --sidebar-width: 11.5rem;
  --warn: #B5842E;
  --ok: #3F7D58;
  --status-qualified: #3F7D58;
  --status-showing: #5A2E7A;
  --status-qualifying: #8A5FB0;
  --status-nurture: #8C7A99;
  --status-new: #A99BB5;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: var(--font-sans);
  --font-brand: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
}

.dark {
  color-scheme: dark;
  --background: #120A1C;
  --foreground: #F2EAF8;
  --card: #1B1027;
  --card-foreground: #F2EAF8;
  --popover: #1B1027;
  --popover-foreground: #F2EAF8;
  --primary: #A97BFF;
  --primary-foreground: #140B20;
  --secondary: #2A1B3C;
  --secondary-foreground: #F2EAF8;
  --muted: #221531;
  --muted-foreground: #A592B6;
  --accent: #2E1E46;
  --accent-foreground: #F2EAF8;
  --destructive: #F27D8A;
  --border: #C8A0FF24;
  --input: #C8A0FF2E;
  --ring: #A97BFF;
  --chart-1: #A97BFF;
  --chart-2: #C9A7F0;
  --chart-3: #7C3AED;
  --chart-4: #6FBF8F;
  --chart-5: #D9B45A;
  --chart-fill: #A97BFF2B;
  --sidebar: #160D21;
  --sidebar-foreground: #F2EAF8;
  --sidebar-primary: #A97BFF;
  --sidebar-primary-foreground: #140B20;
  --sidebar-accent: #2A1B3C;
  --sidebar-accent-foreground: #F2EAF8;
  --sidebar-border: #C8A0FF24;
  --sidebar-ring: #A97BFF;
  --warn: #D9B45A;
  --ok: #6FBF8F;
  --status-qualified: #6FBF8F;
  --status-showing: #C9A7F0;
  --status-qualifying: #B58BDA;
  --status-nurture: #A893B8;
  --status-new: #B8A8C6;
}

/* SRG. #CD9933 is the swoosh on the mark. Light mode deepens it so text and buttons
   clear 4.5:1 on ivory; dark mode uses the swoosh itself, with near-black text on it. */
:root[data-palette="srg"] {
  color-scheme: light;
  --background: #F6F2E8;
  --foreground: #1A140C;
  --card: #FFFCF6;
  --card-foreground: #1A140C;
  --popover: #FFFCF6;
  --popover-foreground: #1A140C;
  --primary: #7C5E14;
  --primary-foreground: #FFFCF6;
  --secondary: #EFE6D2;
  --secondary-foreground: #2A2114;
  --muted: #F0E9D8;
  --muted-foreground: #6A5E4E;
  --accent: #EFE6D2;
  --accent-foreground: #2A2114;
  --destructive: #B23A48;
  --border: #E3D6C0;
  --input: #E3D6C0;
  --ring: #8A6414;
  --chart-1: #8A6414;
  --chart-2: #7C5E14;
  --chart-3: #5C4A32;
  --chart-4: #2F6B48;
  --chart-5: #8A4E10;
  --chart-fill: #CD993328;
  --sidebar: #F3ECDE;
  --sidebar-foreground: #1A140C;
  --sidebar-primary: #7C5E14;
  --sidebar-primary-foreground: #FFFCF6;
  --sidebar-accent: #E7DCC4;
  --sidebar-accent-foreground: #1A140C;
  --sidebar-border: #E3D6C0;
  --sidebar-ring: #8A6414;
  --warn: #8A4E10;
  --ok: #2F6B48;
  --status-qualified: #2F6B48;
  --status-showing: #7C5E14;
  --status-qualifying: #8A4E10;
  --status-nurture: #6A5A48;
  --status-new: #74685A;
}

:root[data-palette="srg"].dark {
  color-scheme: dark;
  --background: #0E0D0B;
  --foreground: #F6F1E6;
  --card: #171512;
  --card-foreground: #F6F1E6;
  --popover: #1C1914;
  --popover-foreground: #F6F1E6;
  --primary: #CD9933;
  --primary-foreground: #1A1408;
  --secondary: #2A241A;
  --secondary-foreground: #F6F1E6;
  --muted: #221E17;
  --muted-foreground: #B7AA94;
  --accent: #322A1C;
  --accent-foreground: #F6F1E6;
  --destructive: #F27D8A;
  --border: #CD993330;
  --input: #CD993340;
  --ring: #E0B04A;
  --chart-1: #E0B04A;
  --chart-2: #CD9933;
  --chart-3: #F0D7A2;
  --chart-4: #6FBF8F;
  --chart-5: #E08A3C;
  --chart-fill: #CD99332E;
  --sidebar: #120F0C;
  --sidebar-foreground: #F6F1E6;
  --sidebar-primary: #CD9933;
  --sidebar-primary-foreground: #1A1408;
  --sidebar-accent: #2A241A;
  --sidebar-accent-foreground: #F6F1E6;
  --sidebar-border: #CD993330;
  --sidebar-ring: #E0B04A;
  --warn: #E08A3C;
  --ok: #6FBF8F;
  --status-qualified: #6FBF8F;
  --status-showing: #E0B04A;
  --status-qualifying: #C4A36A;
  --status-nurture: #C4B39A;
  --status-new: #A89880;
}

body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* Typography */
h1 { font-family: var(--font-heading); font-weight: 650; font-size: 28px; letter-spacing: -.025em;
  line-height: 1.15; }
h2 { font-weight: 600; font-size: 16px; letter-spacing: -.015em; }
.muted { color: var(--muted-foreground); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.none { color: var(--muted-foreground); font-style: italic; }
.mono { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.wordmark { font-family: var(--font-brand); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
pre.prompt { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.65; }
a.link { color: var(--primary); font-weight: 500; }
a.link:hover { text-decoration: underline; }
.wrap { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* Layout */
.page { max-width: 1120px; margin: 0 auto; padding: 24px 32px 80px; }
.page > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 20px; }
.page > header p { margin: 4px 0 0; color: var(--muted-foreground); }
.topbar { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--background); position: sticky; top: 0; z-index: 10; }
.stack { display: grid; gap: 20px; }
.stack-sm { display: grid; gap: 10px; }
.cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cluster .grow { flex: 1; min-width: 180px; }
.end { margin-left: auto; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.svc-grid .card > section { display: grid; gap: 8px; align-content: start; }
.svc-grid .svc-line { margin: 0; overflow-wrap: anywhere; }
.svc-grid .text-link { background: none; border: 0; padding: 0; color: var(--muted-foreground);
  cursor: pointer; font: inherit; text-decoration: underline; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.grid-2 > * { min-width: 0; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
/* Basecoat card headers are a grid; these ones lay their pieces out in a row. */
.card > header.row-head { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.card > header.row-head h2 { margin: 0; }
.card > header.row-head > div { flex: 1; min-width: 0; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }
.section { display: grid; gap: 10px; }
.section > h2 { margin: 0; }
form.inline { display: contents; }
.narrow { max-width: 440px; }
.pre { white-space: pre-wrap; }

/* Cards that hold a number */
.stat { min-width: 0; }
.stat section { display: grid; gap: 4px; align-content: start; }
.stat .k { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; }
.stat .v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; line-height: 1.1; }
.stat .v.text { font-size: 15px; letter-spacing: 0; line-height: 1.35; }
.stat .sub { color: var(--muted-foreground); font-size: 12.5px; line-height: 1.4;
  overflow-wrap: anywhere; }
.chartbox { position: relative; height: 240px; min-width: 0; }
.chartbox.mini { height: 160px; }
.chartbox canvas { max-width: 100%; }

/* Status badges share the pipeline palette on every surface. */
.badge[data-status] { background: transparent; border-color: currentColor; text-transform: lowercase; }
.badge[data-status=qualified] { color: var(--status-qualified); }
.badge[data-status=showing] { color: var(--status-showing); }
.badge[data-status=qualifying] { color: var(--status-qualifying); }
.badge[data-status=nurture] { color: var(--status-nurture); }
.badge[data-status=new] { color: var(--status-new); }
.badge[data-kind] { background: transparent; border-color: currentColor; }
.badge[data-kind=ok] { color: var(--ok); }
.badge[data-kind=warn] { color: var(--warn); }
.badge[data-kind=bad] { color: var(--destructive); }
.badge[data-kind=info] { color: var(--primary); }
.badge[data-kind=muted] { color: var(--muted-foreground); }
.is-ok { color: var(--ok); }
.is-bad { color: var(--destructive); }
.is-warn { color: var(--warn); }

/* Key/value profile list */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--muted-foreground); font-weight: 500; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* Feed of recent activity */
.feed { display: grid; min-width: 0; }
.feed > div { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border);
  align-items: baseline; min-width: 0; }
.feed > div:last-child { border-bottom: 0; }
.feed .who { font-weight: 600; flex: 0 1 132px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .txt { color: var(--muted-foreground); flex: 1; min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; line-height: 1.4; overflow-wrap: anywhere; }
.feed .when { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; flex: none; }

/* Page changes cross-fade with the sidebar held still; a slow one shows a skeleton of the next page. */
@view-transition { navigation: auto; }
.sidebar nav { view-transition-name: sidebar; }
/* Never morph the sidebar between pages: a width change would play as a zoom. */
::view-transition-group(sidebar), ::view-transition-new(sidebar) { animation: none; }
::view-transition-old(sidebar) { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.sk { display: block; max-width: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 40%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-card { display: grid; gap: 12px; padding: 18px; }
.page.loading > :not(.page-skeleton) { display: none; }
.chartbox:not(.drawn) { border-radius: 8px;
  background: linear-gradient(90deg, var(--muted) 30%, color-mix(in srgb, var(--muted) 40%, var(--card)) 50%, var(--muted) 70%);
  background-size: 300% 100%; animation: sk 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sk, .chartbox:not(.drawn) { animation: none; }
}

/* Overview cards: a grip top-left, then collapse and remove top-right */
.ov-grid { align-items: start; }
.widget > header.row-head { flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
.widget > header.row-head > .link { align-self: center; white-space: nowrap; }
.w-btn { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--muted-foreground); cursor: pointer; }
.w-btn:hover { background: var(--accent); color: var(--foreground); }
.w-btn svg { width: 16px; height: 16px; }
.w-grab { cursor: grab; margin-left: -8px; }
.w-grab:active { cursor: grabbing; }
.w-fold svg { transform: rotate(90deg); transition: transform .15s ease; }
.widget[data-collapsed] .w-fold svg { transform: none; }
.widget[data-collapsed] > section { display: none; }
.widget.dragging { opacity: .4; }
#ov-layout [role=menuitem] svg { width: 16px; height: 16px; }

/* The overview's lists: recent syncs, and the Macs and integrations with a status dot each */
.ov-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ov-list li:last-child { border-bottom: 0; }
.ov-list .who { font-weight: 600; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: inherit; text-decoration: none; }
.ov-list a.who:hover { text-decoration: underline; }
.ov-list .txt { flex: 1; min-width: 0; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ov-list .when { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; flex: none; }
.ov-list .none { color: var(--muted-foreground); }

.text-end { text-align: end; }
.tabs > [role=tabpanel] { margin-top: 16px; }
.table .avatar { width: 28px; height: 28px; font-size: 11px; }
.table form { margin: 0; }
.matrix th { vertical-align: top; width: 20%; white-space: normal; }
.table .wrap { white-space: normal; }
/* A row's action menu must not be clipped by the table's scroll container. */
.table-container:has(.dropdown-menu), .card:has(.dropdown-menu) { overflow: visible; }
.matrix td.mark { text-align: center; }
.matrix td.mark .muted { opacity: .45; }
.dialog .grid-2 { gap: 12px; }

/* Clickable record rows */
.table.clickable tbody tr[data-href] { cursor: pointer; }
.table td.lead { font-weight: 600; }
.table .progress { min-width: 90px; }
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress-row .num { font-size: 12px; font-weight: 600; color: var(--muted-foreground); width: 34px; text-align: right; }

/* Timeline of captured facts and milestones */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.timeline li:first-child { border-top: 0; }
.timeline .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.timeline .dot.done { background: var(--ok); }
.timeline .dot.pending { background: var(--border); }
.timeline .main { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.timeline .when { margin-left: auto; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }

/* Conversation transcript (dashboard) */
.convo { display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; padding: 4px 2px; }
.convo .row { display: flex; width: 100%; margin: 1px 0; }
.convo .row.lead { justify-content: flex-start; }
.convo .row.matilda { justify-content: flex-end; }
.convo .row.start { margin-top: 12px; }
.convo .msg { max-width: 76%; min-width: 0; padding: 8px 14px; border-radius: 18px; font-size: 14px;
  line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.convo .msg.matilda { background: var(--primary); color: var(--primary-foreground); }
.convo .msg.lead { background: var(--secondary); color: var(--secondary-foreground); }
.convo .msg.evt { background: transparent; border: 1px dashed var(--border); color: var(--muted-foreground);
  font-size: 12.5px; padding: 5px 12px; }
.convo .datesep { align-self: center; font-size: 11px; font-weight: 600; color: var(--muted-foreground);
  margin: 14px 0 6px; }
.convo .stamp { font-size: 10.5px; color: var(--muted-foreground); margin: 2px 6px 0; align-self: flex-start; }
.convo .stamp.matilda { align-self: flex-end; }
.convo .pagelink { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--primary); margin: 6px 0; }
.convo .quote { border-left: 2px solid currentColor; opacity: .8; padding: 2px 8px; margin: 0 0 6px; font-size: 12.5px; }
.convo .atts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.convo .att { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #7f7f7f26; }
.convo .tag { font-size: 11px; opacity: .75; margin-top: 4px; }

/* Setup: the integration cards */
.brandtile { flex: none; width: 32px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid var(--border);
  display: grid; place-items: center; }
.brandtile img, .brandtile svg { width: 18px; height: 18px; object-fit: contain; display: block; color: #2B1540; }
[data-palette="srg"] .brandtile img, [data-palette="srg"] .brandtile svg { color: #1A140C; }
/* Integrations overview: borderless Basecoat items in a grid, one status dot each. */
.integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2px 12px; }
.integrations .item { text-decoration: none; color: inherit; }
.integrations .item > figure { transform: none; align-self: center; }
.integrations .brandtile { width: 40px; height: 40px; border-radius: 10px; }
.integrations .brandtile img, .integrations .brandtile svg { width: 22px; height: 22px; }
.integrations .item p { color: var(--muted-foreground); overflow-wrap: anywhere; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.status-dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
/* Connection mark beside an integration title: colour only, the words live in the label. */
.page > header .conn { align-self: center; }
.conn { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--muted-foreground);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted-foreground) 16%, transparent); }
.conn.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.svc > header .badge { margin-left: auto; }
.svc .fields { display: grid; gap: 14px; }
.svc .field > p { margin: 0; }
.svc .locked { display: flex; align-items: center; gap: 8px; }
.svc .locked .input { flex: 1; color: var(--muted-foreground); user-select: none; display: flex; align-items: center; }
.svc .result { color: var(--muted-foreground); font-size: 13px; }
/* A pick-one row of logo cards (the AI provider) in place of a dropdown. */
.field > .choices[role=radiogroup] { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; min-width: 170px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer;
  font-weight: 500; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.choice:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card));
  box-shadow: 0 0 0 1px var(--primary); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.qr { background: #fff; padding: 10px; border-radius: 12px; width: 190px; }
.qr svg { display: block; width: 100%; height: auto; }
.reqlist { list-style: none; margin: 0; padding: 0; }
.reqlist li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 13.5px; }
.reqlist li:last-child { border-bottom: 0; }

/* One theme glyph at a time; drag handles for reordering the nav */
.if-dark { display: none; } .dark .if-dark { display: inline-flex; align-items: center; gap: 8px; }
.if-light { display: inline-flex; align-items: center; gap: 8px; } .dark .if-light { display: none; }
.sidebar nav h3 { cursor: grab; }
.sidebar nav li { cursor: grab; }
.sidebar nav .dragging { opacity: .35; }
.sidebar nav > section > [role=group] + [role=group] { border-top: 1px solid var(--sidebar-border, var(--border)); }
/* Group headings fold their group; the chevron points down while the group is open. On the rail
   the name fades and the chevron (pinned to the heading's right edge) slides onto the 28px line. A
   folded group stays folded on the rail too, so collapsing the sidebar never reflows it. */
.sidebar .group-toggle { position: relative; display: flex; align-items: center; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.sidebar .group-toggle .label { white-space: nowrap; transition: opacity .2s ease; }
.sidebar .group-toggle svg { position: absolute; right: 0; width: 14px; height: 14px; opacity: .6;
  transform: rotate(90deg); transition: transform .15s ease, translate .3s cubic-bezier(.4, 0, .2, 1); }
.sidebar [data-collapsed] .group-toggle svg { transform: none; }
@media (min-width: 768px) {
  html[data-rail]:not([data-peek]) .sidebar .group-toggle .label { opacity: 0; }
  html[data-rail]:not([data-peek]) .sidebar .group-toggle svg { translate: -5px 0; }
}
.sidebar [data-collapsed] > ul { display: none; }

/* Compact rows. Group padding plus each link's left padding keeps every icon on the rail's 28px line. */
.sidebar nav > section { gap: 0; }
.sidebar nav > section > [role=group] { padding: 4px 6px; }
.sidebar nav h3 { height: 24px; font-size: 11.5px; }
.sidebar nav ul { gap: 1px; }
.sidebar nav li > a { height: 28px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.sidebar nav > header.row-head { padding-top: 4px; padding-bottom: 4px; }

/* Sidebar branding and account */
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 5px; }
.sidebar nav > header.row-head { position: relative; flex-direction: row; align-items: center; flex-wrap: nowrap; }
/* Desktop: html[data-rail] narrows Basecoat's sidebar width variable to a 3.5rem icon rail, and
   nothing else moves. Every icon and the logo already sit on the rail's centre line (28px), the
   rows shrink with the nav, and labels fade while the edge clips them: one motion on one curve. */
.sidebar nav { overflow: hidden; transition: width .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1); }
.sidebar nav li > a { padding-left: 13px; }
.sidebar nav li > a > span:last-child, .sidebar nav h3, .sidebar .wordmark,
.sidebar nav > footer .text { white-space: nowrap; transition: opacity .2s ease; }
.sidebar nav > footer a, .sidebar nav > footer .dropdown-menu > button { overflow: hidden; }
/* The toggle rides the nav's right edge, so collapsed it lands exactly over the logo. */
.rail-toggle { position: absolute; right: 12px; top: 50%; translate: 0 -50%; transition: opacity .2s ease; }
.sidebar .brand img { transition: opacity .2s ease; }
/* Four portraits share one cell. The boot script sets html.dark and data-palette before paint,
   so the matching raster is the only one displayed. */
.mark { display: inline-grid; line-height: 0; vertical-align: middle; }
.mark > img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.mark > .for-amethyst-dark, .mark > .for-srg, .mark > .for-srg-dark { display: none; }
html.dark .mark > .for-amethyst { display: none; }
html.dark .mark > .for-amethyst-dark { display: block; }
html[data-palette="srg"] .mark > .for-amethyst,
html[data-palette="srg"] .mark > .for-amethyst-dark { display: none; }
html[data-palette="srg"] .mark > .for-srg { display: block; }
html[data-palette="srg"].dark .mark > .for-srg { display: none; }
html[data-palette="srg"].dark .mark > .for-srg-dark { display: block; }
@media (min-width: 768px) {
  html[data-rail] { --sidebar-width: 3.5rem; }
  /* A pinned sidebar owns layout space; a transient hover preview still floats over the rail offset. */
  html[data-rail][data-pin] { --sidebar-width: 11.5rem; }
  html[data-rail]:not([data-peek]) .sidebar nav li > a > span:last-child, html[data-rail]:not([data-peek]) .sidebar .wordmark,
  html[data-rail]:not([data-peek]) .sidebar nav > footer .text { opacity: 0; pointer-events: none; }
  /* Collapsed, the toggle hides over the logo and trades places with it on hover. */
  html[data-rail]:not([data-peek]) .rail-toggle { opacity: 0; }
  html[data-rail]:not([data-peek]) .row-head:hover .rail-toggle, html[data-rail]:not([data-peek]) .rail-toggle:focus-visible { opacity: 1; }
  html[data-rail]:not([data-peek]) .row-head:hover .brand img,
  html[data-rail]:not([data-peek]) .row-head:has(.rail-toggle:focus-visible) .brand img { opacity: 0; }
  /* Hovering the rail previews the full sidebar over the page; the page itself stays at the rail's offset. */
  html[data-rail][data-peek] .sidebar nav { --sidebar-width: 11.5rem; box-shadow: 0 10px 30px -8px #00000040; }
}
.sidebar .brand .mark { width: 30px; height: 30px; }
.sidebar .brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.sidebar nav > footer { gap: 2px; }
.sidebar nav > footer a, .sidebar nav > footer .dropdown-menu > button { display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px; border-radius: 8px; text-align: left; font: inherit; }
.sidebar nav > footer a { padding-left: 11px; }
.sidebar nav > footer .dropdown-menu > button { padding-left: 5px; }
.sidebar nav > footer a:hover, .sidebar nav > footer .dropdown-menu > button:hover { background: var(--sidebar-accent); }
/* The account menu spans the footer row, as wide as the sidebar's items, with evenly spaced options. */
.sidebar nav > footer .dropdown-menu { display: flex; width: 100%; }
.sidebar nav > footer .dropdown-menu > [data-popover] { width: 100%; min-width: 0; }
.sidebar nav > footer .dropdown-menu [role=menu] { display: grid; gap: 2px; }
.sidebar nav > footer .dropdown-menu [role=menu] > [role=group] { display: grid; gap: 2px; }
.sidebar nav > footer .dropdown-menu :is([role=menuitem],[role=menuitemradio]) { display: flex;
  align-items: center; padding: 10px 12px; gap: 10px; }
.sidebar nav > footer .dropdown-menu [role=menuitemradio] { padding-inline-end: 34px; }
.sidebar nav > footer .dropdown-menu [role=heading] { padding: 8px 12px 2px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
/* Empty inline spans collapse; these are flex items and also need an explicit box. */
.sidebar nav > footer .palette-swatch { display: inline-block; width: 14px; height: 14px; min-width: 14px;
  flex: 0 0 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px #00000033; }
.sidebar nav > footer .palette-swatch[data-swatch=amethyst] { background: #5A2E7A; }
.sidebar nav > footer .palette-swatch[data-swatch=srg] { background: #CD9933; }
.sidebar nav > footer .text { display: grid; min-width: 0; line-height: 1.25; }
.sidebar nav > footer .on { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav > footer .ou { font-size: 11.5px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.sidebar nav > footer svg { color: var(--primary); }
.sidebar nav li > a > .brandtile { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.sidebar nav li > a > .brandtile img { width: 13px; height: 13px; }
.sidebar .avatar { width: 30px; height: 30px; font-size: 12px; }
svg.lucide { width: 18px; height: 18px; flex: none; }
a.card.device { text-decoration: none; color: inherit; }
a.card.device:hover { --border: var(--primary); }

/* Inventory tables: search and the sliding filter share the card. */
.device-inventory, .lead-inventory { gap: 0; }
.card > header.device-bar, .card > header.lead-bar { flex-wrap: nowrap; justify-content: flex-start; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.device-inventory > section, .lead-inventory > section { padding-top: 12px; }
.device-bar .input, .lead-bar .input { flex: 1 1 8rem; width: auto; min-width: 8rem; }
.card > header.device-bar > .segment, .card > header.lead-bar > .segment { flex: none; margin-left: auto; }
.segment { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: calc(var(--radius) + 2px); background: var(--muted); }
/* One highlight slides under the selected option; offsets are set by script relative to the padding box. */
.segment-thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; border-radius: var(--radius);
  background: var(--card); box-shadow: 0 1px 2px #2B154014; }
[data-palette="srg"] .segment-thumb { box-shadow: 0 1px 2px #1A140C14; }
.segment.ready .segment-thumb { transition: transform .25s cubic-bezier(.4, 0, .2, 1), width .25s cubic-bezier(.4, 0, .2, 1); }
.segment button { border: 0; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 13px;
  font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: var(--radius); cursor: pointer; white-space: nowrap;
  transition: color .2s ease; }
.segment button[aria-pressed=true] { color: var(--foreground); }
.segment button span { margin-left: 6px; color: var(--muted-foreground); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.segment button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.device-table th { white-space: nowrap; }
.device-table td { vertical-align: middle; }
.device-table td:first-child { min-width: 190px; }
.device-table td:nth-child(2), .device-table td:nth-child(3) { min-width: 180px; }
.device-table td:nth-child(4) { min-width: 150px; }
.device-table td:last-child { min-width: 130px; }
.device-table td.lead > a { display: flex; align-items: center; gap: 8px; width: fit-content; }
.device-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, transparent); }
.device-icon svg { width: 15px; height: 15px; }
.device-issue { max-width: 240px; margin-top: 5px; color: var(--warn); font-size: 11.5px; line-height: 1.35; }
.device-capacity { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.capacity-track { width: 100%; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--muted); }
.capacity-track > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.empty-devices section { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.empty-devices p { max-width: 480px; margin: 0; }
.device-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, transparent); }
.device-empty-icon svg { width: 24px; height: 24px; }
@media (max-width: 767px) {
  .topbar { display: flex; }
  .page { padding: 20px 16px 80px; }
}

/* The public lead page shares its markup with the PDF (print.html styles the same classes). */
.masthead { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border);
  padding-bottom: 16px; margin-bottom: 24px; }
.lead-page h2 { margin: 24px 0 10px; }
.lead-page .card > section { padding-top: 0; }

/* Centered single-card pages: landing, sign-in, CRM connect */
.centered { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.centered .card { width: min(400px, 92vw); text-align: center; }
.centered .card > section { display: grid; gap: 12px; justify-items: center; }
.centered .card form { display: grid; gap: 10px; width: 100%; }
.centered .logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; overflow: hidden; }
.centered .wordmark { font-size: 30px; }
.landing { display: flex; align-items: center; gap: 20px; }

/* Web chat (installable PWA): a full-height thread between a header and the composer. */
.chat { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: 100dvh;
  height: var(--app-height, 100dvh); display: flex; flex-direction: column; overflow: hidden;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.chat > header { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--border);
  background: var(--card); }
.chat > header .avatar { width: 50px; height: 50px; }
.chat .namebar { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; }
.chat .namebar .chev { color: var(--muted-foreground); font-size: 18px; line-height: 1; }
.chat #log { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; padding: 14px 16px 12px; display: flex; flex-direction: column; }
.chat .thread { width: 100%; max-width: 720px; margin: 0 auto; flex: 1 1 auto; display: flex; flex-direction: column; }
.chat .row { display: flex; width: 100%; margin: 1px 0; align-items: flex-end; }
.chat .row.user { justify-content: flex-end; }
.chat .row.bot { justify-content: flex-start; gap: 8px; }
.chat .row.start { margin-top: 12px; }
.chat .avatar-sm { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  align-self: flex-end; margin-bottom: 3px; }
.chat .msg { position: relative; max-width: 76%; min-width: 0; padding: 9px 15px; border-radius: 20px;
  line-height: 1.36; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat .msg.user { background: var(--primary); color: var(--primary-foreground); }
.chat .msg.bot { background: var(--secondary); color: var(--secondary-foreground); }
/* iMessage tails: a coloured fin plus a page-coloured carve, so the page background stays flat. */
.chat .msg.tail.user { border-bottom-right-radius: 4px; }
.chat .msg.tail.bot { border-bottom-left-radius: 4px; }
.chat .msg.tail::before, .chat .msg.tail::after { content: ""; position: absolute; bottom: 0; }
.chat .msg.tail.user::before { right: -7px; width: 16px; height: 17px; background: var(--primary);
  border-bottom-left-radius: 16px 15px; }
.chat .msg.tail.user::after { right: -15px; width: 15px; height: 18px; background: var(--background);
  border-bottom-left-radius: 14px; }
.chat .msg.tail.bot::before { left: -7px; width: 16px; height: 17px; background: var(--secondary);
  border-bottom-right-radius: 16px 15px; }
.chat .msg.tail.bot::after { left: -15px; width: 15px; height: 18px; background: var(--background);
  border-bottom-right-radius: 14px; }
.chat .timesep { align-self: center; font-size: 11px; color: var(--muted-foreground); margin: 16px 0 10px; }
.chat .timesep b, .chat .receipt b { font-weight: 600; }
.chat .receipt { align-self: flex-end; font-size: 11px; color: var(--muted-foreground); margin: 3px 3px 2px 0; }
.chat .typing { padding: 12px 15px; }
.chat .typing span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground);
  animation: blink 1.3s infinite both; }
.chat .typing span:nth-child(2) { animation-delay: .2s; }
.chat .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-2px); } }
.chat > footer { flex: none; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border);
  background: var(--card); }
.chat > footer form { max-width: 720px; margin: 0 auto; }
.chat .composer { display: flex; align-items: flex-end; gap: 6px; background: var(--background);
  border: 1px solid var(--input); border-radius: 22px; padding: 5px 6px 5px 16px; }
.chat .composer:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px var(--chart-fill); }
.chat textarea { flex: 1 1 auto; resize: none; border: 0; padding: 6px 0; font: inherit; font-size: 16px;
  background: transparent; color: inherit; max-height: 140px; line-height: 1.35; outline: 0; }
.chat .send { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--primary);
  color: var(--primary-foreground); font-size: 18px; font-weight: 700; display: grid; place-items: center; padding: 0;
  opacity: 0; transform: scale(.7); transition: opacity .12s ease, transform .12s ease; pointer-events: none; cursor: pointer; }
.chat .send.show { opacity: 1; transform: none; pointer-events: auto; }
.chat .send:disabled { opacity: .5; cursor: default; }
.chat .none { align-self: center; margin: auto 0; text-align: center; font-style: normal; }

/* Web chat sign-in and profile */
.chat-login .card > section { display: grid; gap: 10px; justify-items: center; }
.chat-login input { text-align: center; font-size: 16px; }
.chat-login .err { color: var(--destructive); font-size: 13px; min-height: 18px; }
.profile { min-height: 100dvh; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.profile .nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--card); border-bottom: 1px solid var(--border); }
.profile .nav a { color: var(--primary); font-size: 16px; display: inline-flex; align-items: center; gap: 3px; }
.profile .nav .done { font-weight: 600; }
.profile .wrap { max-width: 640px; margin: 0 auto; padding: 8px 16px; display: grid; gap: 24px; }
.profile .hero { display: grid; justify-items: center; gap: 6px; padding: 18px 0 0; text-align: center; }
.profile .hero .avatar { width: 92px; height: 92px; }
.profile .hero h1 { margin: 4px 0 0; }
.profile .item { align-items: center; }
.profile .item .edit { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px;
  color: inherit; text-align: right; padding: 6px 4px; border-radius: 8px; -webkit-appearance: none; appearance: none; }
.profile .item .edit:focus { outline: 0; background: var(--muted); }
.profile .item .edit::placeholder { color: var(--muted-foreground); }
.profile .foot { text-align: center; color: var(--muted-foreground); font-size: 12px; }

/* Live: the selected sync as a line of the apps that handled it (templates/dashboard/_flow.html). */
.live-state { display: inline-flex; align-items: center; gap: 7px; }
.live-state > span { width: 7px; height: 7px; border-radius: 50%; background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.live-state[data-state=live] > span { background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.tree-stage { position: relative; min-height: 300px; padding: 20px 24px 28px; overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 40%),
  radial-gradient(var(--border) 1px, transparent 1px) 0 0 / 18px 18px, var(--card); }
.t-legend { position: absolute; top: 18px; right: 22px; display: flex; gap: 12px; margin: 0; padding: 0; list-style: none;
  font-size: 11.5px; color: var(--muted-foreground); }
.t-legend li { display: flex; align-items: center; gap: 5px; }
.t-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--border)); }
.t-legend .sent { --c: var(--ok); }
.t-legend .held { --c: var(--warn); }
.t-legend .pending { --c: var(--primary); }
.t-legend .failed { --c: var(--destructive); }
.flow > header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding-right: 280px; }
.flow > header .lead { font-size: 18px; font-weight: 650; color: inherit; text-decoration: none; }
.flow > header .lead:hover { text-decoration: underline; }
.flow-line { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.flow-line > li { display: flex; align-items: flex-start; animation: t-grow .25s ease both;
  animation-delay: calc(var(--i, 0) * 40ms); }
.flow-step { display: grid; justify-items: center; gap: 6px; width: 146px; text-align: center; }
.flow-step > b { font-size: 13px; font-weight: 650; }
.flow-note { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.35; }
.t-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--card);
  border: 1px solid var(--border); color: var(--primary); box-shadow: 0 6px 16px -10px var(--primary); overflow: hidden; }
.t-ico img { width: 28px; height: 28px; object-fit: contain; }
.t-ico.mark > .mark { width: 100%; height: 100%; }
.t-ico.mark img { width: 100%; height: 100%; object-fit: cover; }
.avatar > .mark { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
  overflow: hidden; background: transparent; }
.t-ico svg { width: 22px; height: 22px; }
.flow-line > li.pending .t-ico { animation: t-pulse 1.4s ease-in-out infinite; border-color: var(--primary); }
.flow-line > li.held .t-ico { border-color: var(--warn); }
.flow-line > li.failed .t-ico { border-color: var(--destructive); }
.flow-step ul { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; gap: 4px; text-align: left; }
.flow-step li { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--card);
  border: 1px solid var(--border); border-left: 3px solid var(--c, var(--border)); }
.flow-step li.sent { --c: var(--ok); }
.flow-step li.held { --c: var(--warn); }
.flow-step li b { font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
.flow-step li span { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
/* Each wire carries a dot while data is moving along it. */
.flow-line .t-wire { position: relative; flex: none; width: 16px; height: 2px; margin-top: 25px; background: var(--border); }
.t-wire.on { background: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.flow-line > li.pending > .t-wire.on::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primary); animation: t-packet 1.8s linear infinite; }
.flow-empty { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; min-height: 250px;
  color: var(--muted-foreground); }
.flow-empty .t-ico { color: var(--muted-foreground); box-shadow: none; }
.flow-empty .t-wire { position: relative; width: 56px; height: 2px; margin: 0;
  background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 11px); }
.flow-empty p { flex-basis: 100%; margin: 14px 0 0; text-align: center; font-size: 13px; }
.run-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.run-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.run-chip:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.run-chip[aria-pressed=true] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.run-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); }
.run-chip[data-kind=ok] .dot { background: var(--ok); }
.run-chip[data-kind=warn] .dot { background: var(--warn); }
.run-chip[data-kind=bad] .dot { background: var(--destructive); }
.run-chip[data-kind=info] .dot { background: var(--primary); animation: t-pulse 1.4s ease-in-out infinite; }
.run-chip .name { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-chip .when { color: var(--muted-foreground); font-size: 11.5px; }
.live-filters .select { font-size: 12.5px; }
@keyframes t-packet { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@keyframes t-pulse { 50% { transform: scale(1.07); } }
@keyframes t-grow { from { opacity: 0; transform: translateX(-10px); } }
@media (max-width: 720px) {
  .tree-stage { padding: 16px 14px 20px; }
  .t-legend { position: static; flex-wrap: wrap; margin-bottom: 14px; }
  .flow > header { padding-right: 0; }
  .flow-line { flex-direction: column; min-width: 0; }
  .flow-line > li { flex-direction: column; }
  .flow-line .t-wire { width: 2px; height: 16px; margin: 0 0 0 25px; }
  .flow-step { width: min(100%, 320px); justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .t-wire::after { display: none; }
}

/* Detailed sync cards */
.runs { display: grid; gap: 10px; }
.run { border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--card); padding: 12px 14px; display: grid; gap: 8px; }
.run > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run > header .lead { font-weight: 600; color: inherit; text-decoration: none; }
.run > header .lead:hover { text-decoration: underline; }
.run[data-outcome="running"] { border-color: var(--primary); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 0; font-size: 12.5px; color: var(--muted-foreground); }
.steps li + li::before { content: ""; width: 14px; height: 1px; background: var(--border); margin-right: 8px; }
.steps .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; }
.steps li.ok .dot, .steps li.held .dot { background: var(--ok); }
.steps li.ok, .steps li.held, .steps li.nothing, .steps li.skipped { color: var(--foreground); }
.steps li.held .dot { background: var(--warn); }
.steps li.nothing .dot { background: var(--primary); }
.steps li.skipped .dot { background: var(--muted-foreground); }
.steps li.failed .dot { background: var(--destructive); }
.steps li.failed { color: var(--destructive); }
.steps .ms { color: var(--muted-foreground); }
.gate { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted-foreground); }
.gate li { display: flex; gap: 5px; }
.gate li.fired { color: var(--foreground); font-weight: 600; }
.run details > summary { list-style: none; display: inline-flex; width: auto; }
.run details > summary::-webkit-details-marker { display: none; }
.run .detail { border-top: 1px solid var(--border); padding-top: 10px; }
.run .detail h3 { margin: 0 0 6px; font-size: 13px; }
.run .lines, .run .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.run .lines b { color: var(--muted-foreground); font-weight: 600; margin-right: 4px; }
.run .checks li { display: flex; align-items: center; gap: 6px; }
.run .checks svg { width: 14px; height: 14px; }
.run pre { margin: 0; max-height: 320px; overflow: auto; background: var(--muted); padding: 8px 10px; border-radius: 8px; }

/* Join page: pick where Matilda reaches you */
.centered .card.join-card { width: min(520px, 92vw); }
.join-channels { display: grid; gap: 10px; width: 100%; text-align: left; }
.join-channel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--card); }
.join-channel .join-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex: none; }
.join-channel .join-body { flex: 1 1 auto; min-width: 0; }
.join-channel .join-body p { margin: 2px 0 0; }
.join-channel code { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--secondary); white-space: nowrap; }

/* Member web chat (dashboard) */
.member-chat .convo { max-height: none; min-height: 320px; height: calc(100dvh - 330px); }
.convo .row.me { justify-content: flex-end; }
.convo .row.bot { justify-content: flex-start; }
.convo .msg.me { background: var(--primary); color: var(--primary-foreground); }
.convo .msg.bot { background: var(--secondary); color: var(--secondary-foreground); }
.convo .msg.bot a { color: inherit; text-decoration: underline; }
.member-chat .composer { display: flex; gap: 8px; margin-top: 10px; }
.member-chat .composer textarea { flex: 1 1 auto; min-height: 42px; max-height: 160px; resize: vertical; }