/* Ringtime GTM Ops console.
   Part 1 is the design system's token files, verbatim: fonts, colors, typography, spacing, base.
   Part 2 is the design system's own components, verbatim from _ds_bundle.js: Card, MetricCard,
   Badge, Button, Input. The canvas imports them, so the console carries the same rules.
   Part 3 is the canvas "Ringtime GTM Ops.dc.html", every inline style as a class with the
   same value. The only additions are marked "deviation". */

/* ---- tokens/fonts.css ---- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@400;500;600&display=swap");

/* ---- tokens/colors.css ---- */
:root {
	--voice-50: rgb(232, 240, 255);
	--voice-200: rgb(221, 233, 255);
	--voice-500: rgb(201, 220, 253);
	--voice-700: rgb(180, 207, 255);
	--voice-900: rgb(119, 168, 255);
	--glow-50: rgb(255, 244, 230);
	--glow-200: rgb(255, 227, 191);
	--glow-500: rgb(255, 194, 102);
	--glow-700: rgb(255, 167, 38);
	--glow-900: rgb(245, 124, 0);
	--link-50: rgb(230, 247, 255);
	--link-200: rgb(186, 231, 255);
	--link-500: rgb(64, 169, 255);
	--link-700: rgb(9, 109, 217);
	--link-900: rgb(0, 58, 140);
	--grey-50: rgb(249, 250, 251);
	--grey-100: rgb(243, 244, 246);
	--grey-200: rgb(229, 231, 235);
	--grey-300: rgb(209, 213, 219);
	--grey-400: rgb(156, 163, 175);
	--grey-500: rgb(107, 114, 128);
	--grey-600: rgb(75, 85, 99);
	--grey-700: rgb(55, 65, 81);
	--grey-800: rgb(31, 41, 55);
	--grey-900: rgb(17, 24, 39);
	--white: rgb(255, 255, 255);
	--black: rgb(0, 0, 0);
	--success-bg: oklch(0.962 0.044 156.743);
	--success-fg: oklch(0.448 0.119 151.328);
	--success-solid: #059669;
	--warning-bg: oklch(0.962 0.059 95.617);
	--warning-fg: oklch(0.473 0.137 46.201);
	--danger-solid: #dc2626;
	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.145 0 0);
	--primary: var(--voice-900);
	--primary-foreground: var(--white);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--accent: oklch(0.97 0 0);
	--accent-foreground: oklch(0.205 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
	--chart-1: oklch(0.646 0.222 41.116);
	--chart-2: oklch(0.6 0.118 184.704);
	--chart-3: oklch(0.398 0.07 227.392);
	--chart-4: oklch(0.828 0.189 84.429);
	--chart-5: oklch(0.769 0.188 70.08);
	--sidebar: oklch(0.985 0 0);
	--sidebar-foreground: oklch(0.145 0 0);
	--sidebar-primary: oklch(0.205 0 0);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.945 0 0);
	--sidebar-accent-foreground: oklch(0.205 0 0);
	--sidebar-border: oklch(0.922 0 0);
	--sidebar-ring: oklch(0.708 0 0);
}

.dark {
	--background: oklch(0.145 0 0);
	--foreground: oklch(0.985 0 0);
	--card: oklch(0.205 0 0);
	--card-foreground: oklch(0.985 0 0);
	--popover: oklch(0.205 0 0);
	--popover-foreground: oklch(0.985 0 0);
	--primary: oklch(0.922 0 0);
	--primary-foreground: oklch(0.205 0 0);
	--secondary: oklch(0.269 0 0);
	--secondary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.269 0 0);
	--muted-foreground: oklch(0.708 0 0);
	--accent: oklch(0.269 0 0);
	--accent-foreground: oklch(0.985 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 15%);
	--ring: oklch(0.556 0 0);
	--chart-1: oklch(0.488 0.243 264.376);
	--chart-2: oklch(0.696 0.17 162.48);
	--chart-3: oklch(0.769 0.188 70.08);
	--chart-4: oklch(0.627 0.265 303.9);
	--chart-5: oklch(0.645 0.246 16.439);
	--sidebar: oklch(0.205 0 0);
	--sidebar-foreground: oklch(0.985 0 0);
	--sidebar-primary: oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.269 0 0);
	--sidebar-accent-foreground: oklch(0.985 0 0);
	--sidebar-border: oklch(1 0 0 / 10%);
	--sidebar-ring: oklch(0.556 0 0);
}

/* ---- tokens/typography.css ---- */
:root {
	--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--base-font-size: 18px;
	--text-h1: 2.5rem;
	--text-h2: 2rem;
	--text-h3: 1.75rem;
	--text-h4: 1.5rem;
	--text-h5: 1.25rem;
	--text-h6: 1.125rem;
	--text-base: 1rem;
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--leading-tight: 1.2;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--tracking-tight: -0.0125em;
	--tracking-normal: 0;
}

/* ---- tokens/spacing.css ---- */
:root {
	--radius: 0.625rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--radius-full: 9999px;
	--space-0_5: 0.125rem;
	--space-1: 0.25rem;
	--space-1_5: 0.375rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--ring-width: 3px;
}

/* ---- tokens/base.css ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: var(--base-font-size, 16px);
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	background: var(--background);
	color: var(--foreground);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0;
}

/* ---- the canvas helmet ---- */
body { margin: 0; background: oklch(0.145 0 0); }
a { color: rgb(119,168,255); text-decoration: none; }
a:hover { color: rgb(180,207,255); }
::selection { background: rgba(119,168,255,0.28); }

/* ================= Part 2: the design system's components ================= */

/* ---- components/core/Card.jsx ---- */
.rt-card {
	display: flex; flex-direction: column; gap: var(--space-6);
	background: var(--card); color: var(--card-foreground);
	border: 1px solid var(--border); border-radius: var(--radius-xl);
	padding: var(--space-6) 0; box-shadow: var(--shadow-sm);
	font-family: var(--font-sans);
}
.rt-card__content { padding: 0 var(--space-6); }

/* ---- components/product/MetricCard.jsx ---- */
.rt-metric { padding: var(--space-4) 0 !important; gap: 0 !important; }
.rt-metric__inner { padding: 0 var(--space-5) !important; display: flex; flex-direction: column; gap: var(--space-1); }
/* The title is a <p> and the design system resets no margin on it. The canvas renders with
   the browser default, so the console keeps it. */
.rt-metric__title { font-size: var(--text-sm); color: var(--muted-foreground); }
.rt-metric__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.rt-metric__value { font-size: var(--text-h4); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.rt-metric__change { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.rt-metric__spark { height: 32px; width: 64px; flex-shrink: 0; }
.rt-metric__spark[hidden] { display: none; }
/* MetricCard without a `change` value paints changeLabel and the line in the muted colour. */
.rt-metric__change--muted { color: var(--muted-foreground); }
.rt-metric__spark-line { stroke: var(--muted-foreground); }

/* ---- components/core/Badge.jsx ---- */
.rt-badge {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
	width: fit-content; white-space: nowrap; flex-shrink: 0; overflow: hidden;
	border-radius: var(--radius-full); border: 1px solid transparent;
	padding: 2px var(--space-2); font-family: var(--font-sans);
	font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.4;
}
.rt-badge svg { width: 0.75rem; height: 0.75rem; }
.rt-badge--default { background: var(--primary); color: var(--primary-foreground); }
.rt-badge--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.rt-badge--destructive { background: var(--destructive); color: var(--white); }
.rt-badge--outline { color: var(--foreground); border-color: var(--border); background: transparent; }
.rt-badge--success { background: var(--success-bg); color: var(--success-fg); }
.rt-badge--warning { background: var(--warning-bg); color: var(--warning-fg); }

/* ---- components/core/Button.jsx ---- */
.rt-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--space-2); white-space: nowrap; flex-shrink: 0;
	font-family: var(--font-sans); font-size: var(--text-sm);
	font-weight: var(--weight-medium); line-height: 1;
	border-radius: var(--radius-sm); border: 1px solid transparent;
	cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
	outline: none; user-select: none;
}
.rt-btn:focus-visible { box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 50%, transparent); border-color: var(--ring); }
.rt-btn:disabled { pointer-events: none; opacity: .5; }
.rt-btn svg { width: 1em; height: 1em; pointer-events: none; flex-shrink: 0; }
.rt-btn--default { height: 2.25rem; padding: 0 var(--space-4); }
.rt-btn--sm { height: 2rem; padding: 0 var(--space-3); font-size: var(--text-sm); }
.rt-btn--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.rt-btn--secondary:hover:not(:disabled) { background: color-mix(in oklch, var(--secondary) 80%, black 6%); }
.rt-btn--outline { background: var(--background); color: var(--foreground); border-color: var(--border); box-shadow: var(--shadow-xs); }
.rt-btn--outline:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }
.rt-btn--ghost { background: transparent; color: var(--foreground); }
.rt-btn--ghost:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }

/* ---- components/core/Input.jsx ---- */
.rt-input {
	height: 2.25rem; width: 100%; min-width: 0;
	border-radius: var(--radius-sm); border: 1px solid var(--input);
	background: transparent; padding: 0 var(--space-3);
	font-family: var(--font-sans); font-size: var(--text-sm); color: var(--foreground);
	box-shadow: var(--shadow-xs); outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.rt-input::placeholder { color: var(--muted-foreground); }
.rt-input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 50%, transparent); }

/* ================= Part 3: the canvas, class by class ================= */

.app {
	--acc: rgb(119,168,255);
	--primary: rgb(119,168,255);
	--primary-foreground: oklch(0.145 0 0);
	--mono: 'Geist Mono', ui-monospace, monospace;
	--up: rgb(52,211,153);
	--down: rgb(255,167,38);
	/* Trends. The band of a country and the band of a channel, by position in the document and
	   never by rank, so turning a country off cannot repaint the rest. The last band is grey on
	   purpose: it is the accounts with no country at all, which is a hole in the data and not a
	   market, so it never takes a country's colour. */
	--geo-1: rgb(119,168,255);
	--geo-2: rgb(255,167,38);
	--geo-3: oklch(0.696 0.17 162.48);
	--geo-4: oklch(0.627 0.265 303.9);
	--geo-none: rgb(107,114,128);
	--chan-1: rgb(119,168,255);
	--chan-2: rgb(255,167,38);
	--chan-3: oklch(0.696 0.17 162.48);
	--chan-4: rgb(64,169,255);
	--chan-5: oklch(0.627 0.265 303.9);
	--chan-6: oklch(0.645 0.246 16.439);
	--chan-7: rgb(180,207,255);
	min-height: 100vh;
	background: oklch(0.13 0 0);
	color: var(--foreground);
	font-family: 'Geist', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	padding: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	-webkit-font-smoothing: antialiased;
}

/* ---- the sidebar ---- */
.side { flex: 1 1 200px; max-width: 236px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 10px 8px 12px; }
.side__brand { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 0; min-width: 0; }
.side__lockup { width: 116px; max-width: 100%; height: auto; display: block; }
.side__sub { font-size: 12px; font-weight: 300; letter-spacing: 0.02em; color: var(--muted-foreground); white-space: nowrap; line-height: 1; margin-left: 35px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer; transition: background 130ms ease, color 130ms ease; background: transparent; color: var(--muted-foreground); }
.nav__item:hover { background: var(--sidebar-accent, var(--accent)); }
.nav__item.is-active { background: rgba(119,168,255,0.14); color: var(--acc, rgb(119,168,255)); }
.nav__icon { flex: none; display: block; }
/* The gear sits at the foot of the rail, away from the four tabs that are the work. */
.nav--foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---- the main card ---- */
.main { flex: 999 1 520px; min-width: 0; background: oklch(0.172 0 0); border: 1px solid var(--border); border-radius: 14px; padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 18px; }
.page { display: flex; align-items: center; gap: 10px; }
.page__icon { display: block; flex: none; color: var(--acc, rgb(119,168,255)); }
.page__icon[hidden] { display: none; }
.page__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }

/* The note on how to read the page. Grey until you point at it. */
.hint { position: relative; display: inline-flex; align-items: center; }
.hint[hidden] { display: none; }
.hint__btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; margin: 0; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; line-height: 1; color: var(--muted-foreground); cursor: help; transition: color 130ms ease, background 130ms ease; }
.hint__btn:hover, .hint:focus-within .hint__btn { color: var(--foreground); background: var(--accent); }
.hint__btn svg { display: block; flex: none; }
.hint__body { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 380px; max-width: min(380px, 72vw); padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--popover); color: var(--popover-foreground); font-size: 12px; line-height: 1.5; box-shadow: 0 10px 28px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; }
.hint__btn:hover + .hint__body, .hint:focus-within .hint__body { opacity: 1; visibility: visible; transform: translateY(0); }

.pane { display: flex; flex-direction: column; gap: 18px; }
.pane[hidden] { display: none; }
.soon { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 56px 0 64px; max-width: 46ch; }
.soon__icon { display: block; color: var(--muted-foreground); }
.soon__title { font-size: 15px; font-weight: 500; }
.soon__body { font-size: 13px; color: var(--muted-foreground); }

/* ---- the metric row ---- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* ---- the filter bar ---- */
.bar { background: var(--muted); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.bar__search { position: relative; flex: 1 1 240px; min-width: 200px; display: flex; align-items: center; }
.bar__glass { position: absolute; left: 10px; display: block; color: var(--muted-foreground); pointer-events: none; }
.bar__input { flex: 1 1 auto; width: 100%; height: 32px; padding: 0 12px 0 31px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--foreground); font-family: 'Geist', system-ui, sans-serif; font-size: 12px; outline: none; }
.bar__input::placeholder { color: var(--muted-foreground); }
.bar__input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent); }

.bar__filter { position: relative; }
.bar__country { height: 32px; padding: 0 10px; font-size: 12px; font-weight: 400; gap: 6px; }
.bar__count { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); }
.bar__count[hidden] { display: none; }
.bar__chev { display: block; opacity: 0.6; }

.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 230px; background: var(--popover); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.menu[hidden] { display: none; }
.menu__list { display: flex; flex-direction: column; gap: 1px; }
.menu__scrim { position: fixed; inset: 0; z-index: 10; }
.menu__scrim[hidden] { display: none; }
.menu__item { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 7px 9px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--foreground); transition: background 130ms ease; }
.menu__item:hover { background: var(--accent); }
.menu__box { width: 15px; height: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); }
.menu__item.is-on .menu__box { background: var(--acc, rgb(119,168,255)); border-color: var(--acc, rgb(119,168,255)); }
.menu__tick { display: block; fill: none; stroke: oklch(0.145 0 0); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__count { font-family: var(--mono); font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.menu__rule { height: 1px; background: var(--border); margin: 5px 3px; }
.rt-reset-all { width: 100%; justify-content: flex-start; color: var(--muted-foreground); }

.seg[hidden] { display: none; }
.seg { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px; background: var(--background); border: 1px solid var(--border); }
.seg__item { font: inherit; font-size: 12px; font-weight: 400; height: 26px; padding: 0 10px; border: 0; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background 130ms ease, color 130ms ease; background: transparent; color: var(--muted-foreground); }
.seg__item:hover { color: var(--foreground); }
.seg__item.is-active { background: var(--secondary); color: var(--foreground); }

/* ---- the list and the detail ---- */
.split { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }

.list { flex: 1 1 300px; max-width: 340px; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.list__sort { display: flex; align-items: center; gap: 4px; }
.sort { font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border: 0; border-radius: 6px; cursor: pointer; transition: background 130ms ease, color 130ms ease; background: transparent; color: var(--muted-foreground); }
.sort.is-active { background: var(--accent); color: var(--foreground); }
.list__count { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
.list__rows { display: flex; flex-direction: column; }

.row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 58px 44px; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; transition: background 130ms ease; background: transparent; }
.row:hover { background: var(--accent); }
.row.is-active { background: var(--accent); border-left-color: var(--acc, rgb(119,168,255)); }
.row__rank { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.row__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row__line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row__name { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
.row__hubspot { width: 13px; height: 13px; flex: none; display: block; opacity: 0.9; }
.row__target { width: 13px; height: 13px; flex: none; display: block; color: var(--acc, rgb(119,168,255)); }
.row__sub { font-size: 11px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark { display: block; overflow: visible; }
.spark__line { fill: none; stroke: var(--acc, rgb(119,168,255)); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.spark__dot { fill: var(--acc, rgb(119,168,255)); }
.row__score { font-family: var(--mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--foreground); }
.row.is-active .row__score { color: var(--acc, rgb(119,168,255)); }

.list__empty { padding: 28px 16px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.list__empty[hidden] { display: none; }
.list__empty-title { font-size: 13px; color: var(--foreground); }
.list__empty-hint { font-size: 12px; color: var(--muted-foreground); }

.detail { flex: 3 1 420px; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px 24px; }
.detail__inner { display: flex; flex-direction: column; }
.detail__top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
.detail__id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.detail__name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.detail__hub { display: inline-flex; flex: none; border-bottom: 0; }
.detail__hubimg { width: 15px; height: 15px; display: block; }
.detail__target { width: 15px; height: 15px; flex: none; display: block; color: var(--acc, rgb(119,168,255)); }
.detail__domain { font-size: 13px; color: var(--muted-foreground); text-decoration: none; border-bottom: 1px solid transparent; transition: color 130ms ease, border-color 130ms ease; }
.detail__domain:hover { color: var(--foreground); border-color: var(--border); }
.detail__rank { font-family: var(--mono); font-size: 12px; color: var(--muted-foreground); }
.detail__right { display: flex; align-items: center; gap: 8px; }
/* deviation: the canvas has no destructive control. The one write on the page is an icon the
   size of the rank beside it, quiet until the pointer is on it. */
.act { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted-foreground); cursor: pointer; outline: none; transition: background 130ms ease, color 130ms ease, border-color 130ms ease; }
.act:hover:not(:disabled) { background: color-mix(in oklch, var(--danger-solid) 14%, transparent); color: var(--danger-solid); }
.act--back:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }
.act:focus-visible { box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 50%, transparent); border-color: var(--ring); }
.act:disabled { opacity: .5; pointer-events: none; }
.act.is-bad { color: var(--danger-solid); border-color: color-mix(in oklch, var(--danger-solid) 40%, var(--border)); }
.act__icon { width: 15px; height: 15px; }
/* Every attribute on one hairline row, one weight, one colour. Each item is one unit: a row
   wraps between items and never inside a status. */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 7px; font-size: 12px; color: var(--muted-foreground); }
.meta__i { line-height: 1.3; white-space: nowrap; }
.meta__i + .meta__i { border-left: 1px solid var(--border); padding-left: 10px; }
/* deviation: the canvas has one colour here. Amber marks the two items that are a reason not to
   act on the account, an open lead and why it is off the list. */
.meta__i--flag { color: rgb(255,167,38); }

.stat { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.stat__line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stat__n { font-family: var(--mono); font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--acc, rgb(119,168,255)); }
.stat__trend { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1; color: var(--muted-foreground); }
.stat__trend--up { color: rgb(52,211,153); }
.stat__trend--down { color: rgb(255,167,38); }
.stat__arrow { width: 14px; height: 14px; display: block; }
.stat__delta { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; }
.stat__meta { font-size: 12px; color: var(--muted-foreground); }

/* One chip per channel, all of them always: an empty chip says the channel never landed. */
.chans { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.chans__eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); }
.chans__row { display: flex; flex-wrap: wrap; gap: 6px; }
.chan { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); }
.chan__icon { width: 13px; height: 13px; display: block; flex: none; }
.chan__label { font-size: 12px; }
.chan__n { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.chan.is-on { border-color: rgba(119,168,255,0.35); background: rgba(119,168,255,0.08); color: var(--acc, rgb(119,168,255)); }
.chan.is-on .chan__label { color: var(--foreground); }
.chan--who { margin-left: 4px; font: inherit; }
button.chan--who { cursor: pointer; }
.chan--who.is-on { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); color: rgb(52,211,153); }
.chan--who.is-on:hover { background: rgba(52,211,153,0.18); }

.chart { position: relative; margin-top: 18px; }
.chart__svg { display: block; width: 100%; height: auto; }
.chart__base { stroke: var(--border); stroke-width: 1; }
.chart__max { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.chart__area { fill: var(--acc, rgb(119,168,255)); opacity: 0.14; }
.chart__line { fill: none; stroke: var(--acc, rgb(119,168,255)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mark { cursor: default; }
.mark__line { stroke: var(--muted-foreground); opacity: 0.5; stroke-width: 1; stroke-dasharray: 2 3; }
.mark__dot { fill: var(--acc, rgb(119,168,255)); stroke: var(--card); stroke-width: 1.5; }
.mark__hit { fill: transparent; }
.chart__label { position: absolute; left: 4.2%; transform: translate(-100%, -50%); font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); pointer-events: none; }
.chart__label--zero { top: 86.4%; }
.chart__tick { position: absolute; top: 93%; font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); pointer-events: none; white-space: nowrap; }
.chart__tick--start { transform: translateX(0); }
.chart__tick--mid { transform: translateX(-50%); }
.chart__tick--end { transform: translateX(-100%); }
.tip { position: absolute; pointer-events: none; transform: translate(-50%, -132%); background: var(--popover); border: 1px solid var(--border); color: var(--popover-foreground); padding: 7px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.45); transition: opacity 100ms ease; z-index: 2; left: 0%; top: 0%; opacity: 0; }
.tip.is-on { opacity: 1; }
.tip__when { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted-foreground); }
.tip__body { display: block; }
.tip__line { display: block; }
.chart__cap { margin: 10px 0 0; font-size: 12px; color: var(--muted-foreground); }

.sigs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 26px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sigs__title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); }
.sigs__window { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
.sigs { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding-right: 12px; }
.sig { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border); }
.sig__date { font-family: var(--mono); font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sig__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sig__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sig__label { font-size: 13px; font-weight: 500; }
.sig__src { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--muted-foreground); white-space: nowrap; }
.sig__detail { font-size: 12px; color: var(--muted-foreground); overflow-wrap: break-word; }
.sig__weight { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--acc, rgb(119,168,255)); }
.sigs__none { margin: 14px 0 0; font-size: 12px; color: var(--muted-foreground); }

/* deviation: the hot list hides customers, open deals and our own domains, and three of the four
   biggest LinkedIn engagement clusters are among them. The toggle puts them one click away
   instead of out of reach. Off by default, because the list exists to find work nobody is on. */
.toggle { display: inline-flex; align-items: center; gap: 9px; padding: 0 11px 0 9px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--muted-foreground); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; transition: color 130ms ease; }
.toggle:hover { color: var(--foreground); }
.toggle__switch { position: relative; width: 28px; height: 16px; border-radius: 999px; flex: none; background: var(--border); transition: background 130ms ease; }
.toggle__knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 999px; background: #fff; transition: left 130ms ease; }
.toggle.is-active { color: var(--foreground); }
.toggle.is-active .toggle__switch { background: var(--acc, rgb(119,168,255)); }
.toggle.is-active .toggle__knob { left: 14px; }
.toggle__n { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--secondary); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* The person and the post they acted on, side by side. */
.person__line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* deviation: the store names the person behind a LinkedIn signal, the canvas predates it.
   A person's name is a link to their profile and reads as one. The headline replaces the detail
   line, because on these signals it is the detail worth reading. */
.sig__who { font-size: 13px; font-weight: 600; color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); }
.sig__who:hover { border-bottom-color: var(--muted-foreground); }
.sig__post { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; border-bottom: 1px solid var(--border); }
.sig__post:hover { color: var(--foreground); }
/* deviation: "who do I call" is a different question from "what happened", so it gets its own
   block. One row per person however often they acted, newest first. */
.people { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.person__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person__name { font-size: 13px; font-weight: 500; color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); align-self: flex-start; }
.person__name:hover { border-bottom-color: var(--muted-foreground); }
.person__headline { font-size: 12px; color: var(--muted-foreground); overflow-wrap: break-word; }
.person__n { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }

/* ---- the trends tab ---- */
.pane--trends { gap: 16px; }
.tcard { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.tcard__head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; justify-content: space-between; }
.tcard__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* The 320px basis is a width, and it is only a width next to the picker in a row head.
   Directly under .tcard the main axis is vertical, where it becomes a 320px tall gap. */
.tcard__head .tcard__id { flex: 1 1 320px; }
.tcard__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.tcard__sub { margin: 0; font-size: 12px; color: var(--muted-foreground); max-width: 64ch; }
.tnote[hidden] { display: none; }
.tnote { margin: 0; font-size: 12px; color: var(--muted-foreground); max-width: 82ch; }

.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: transparent; color: var(--muted-foreground); transition: background 130ms ease, color 130ms ease; }
.tchip.is-on { background: var(--accent); color: var(--foreground); }
.tchip__dot { width: 9px; height: 9px; border-radius: 2px; display: block; opacity: 0.25; }
.tchip.is-on .tchip__dot { opacity: 1; }
.tchip__n { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.tplot { position: relative; }
.tplot__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tplot__grid { stroke: var(--border); stroke-width: 1; }
.tplot__base { stroke: var(--muted-foreground); stroke-width: 1; opacity: 0.35; }
.tplot__band { fill-opacity: 0.7; stroke-width: 1; stroke-opacity: 0.9; }
.tplot__cross { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.tplot__cross.is-on { opacity: 0.6; }
.tplot__hit { fill: transparent; }
.tplot__label { position: absolute; left: 6.4%; transform: translate(-100%, -50%); font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); pointer-events: none; }
.tplot__tick { position: absolute; top: 92%; font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); pointer-events: none; white-space: nowrap; }
.tplot__tick--start { transform: translateX(0); }
.tplot__tick--mid { transform: translateX(-50%); }
.tplot__tick--end { transform: translateX(-100%); }

.ttip { position: absolute; top: 4px; z-index: 5; min-width: 172px; pointer-events: none; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.5); transform: translateX(-50%); transition: opacity 100ms ease; left: 0%; opacity: 0; }
.ttip.is-on { opacity: 1; }
.ttip__when { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); margin-bottom: 6px; }
.ttip__row { display: flex; align-items: center; gap: 8px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.ttip__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ttip__n { margin-left: auto; padding-left: 18px; }
.ttip__row--total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; font-weight: 600; }

.tlegend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--muted-foreground); }
.tlegend__item { display: inline-flex; align-items: center; gap: 7px; }
.tlegend__dot { width: 9px; height: 9px; border-radius: 2px; display: block; }
/* The leading channel is a name, not a number. At the metric size it would wrap. */
.rt-metric__value--word { font-size: var(--text-h5); }

/* ---- deviations from the canvas, on purpose ---- */
/* The caveat on the score. The canvas has no room for it, the number still needs it. */
.foot { padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); max-width: 68ch; }
/* Keyboard focus. The canvas has none. The design system's ring, on focus-visible only. */
.nav__item:focus-visible, .seg__item:focus-visible, .sort:focus-visible, .row:focus-visible,
.menu__item:focus-visible, .tchip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 50%, transparent);
}
/* Hiring pressure, the second axis. One row per weekly sweep, a bar against the busiest week. */
.hiring { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.hiring__week { display: grid; grid-template-columns: 52px 1fr 36px; align-items: center; gap: 10px; font-size: 12px; }
.hiring__date { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
.hiring__bar { display: block; height: 8px; background: var(--muted, rgba(127,127,127,0.12)); border-radius: 4px; overflow: hidden; }
.hiring__fill { display: block; height: 100%; background: var(--acc, rgb(119,168,255)); opacity: 0.7; border-radius: 4px; }
/* One colour per board, by its position in the document. The second takes the second channel
   colour of the Trends palette so the two axes never share a hue for two different things. */
.hiring__fill--1 { background: var(--acc, rgb(119,168,255)); }
.hiring__fill--2 { background: var(--chan-2, rgb(245,166,35)); }
.hiring__n { font-family: var(--mono); font-size: 11px; text-align: right; }
.hiring__legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--muted-foreground); }
.hiring__key { display: inline-flex; align-items: center; gap: 6px; }
.hiring__swatch { display: inline-block; width: 10px; height: 8px; border-radius: 2px; opacity: 0.7; }

/* The TAM tab: one table, busiest this week first. */
.tam__wrap { overflow-x: auto; margin-top: 12px; }
.tam { width: 100%; border-collapse: collapse; font-size: 13px; }
.tam th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tam th.is-num, .tam td.is-num { text-align: right; font-family: var(--mono); }
.tam td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tam td.tam__name { white-space: normal; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.tam td.tam__name img { width: 12px; height: 12px; }
.tam__flag { font-size: 11px; color: var(--warning-fg); }
.tam__link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); transition: border-color 130ms ease; }
.tam__link:hover { border-color: var(--foreground); }
#tam-markets { margin-top: 12px; }
.tam__empty { padding: 32px 0; font-size: 13px; color: var(--muted-foreground); }
.tam__more td { text-align: center; padding: 12px 10px; }
.tam__more-btn { font: inherit; font-size: 12px; color: var(--muted-foreground); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.tam__more-btn:hover { color: var(--foreground); border-color: var(--foreground); }

/* ---- the settings tab ---- */
.pane--settings { gap: 16px; max-width: 900px; }
/* Health is a wide table with a run strip at its right edge. It takes the full width, the other
   settings keep the reading width. */
.pane--settings:has(#set-health:not([hidden])) { max-width: none; }
.set__get { text-decoration: none; }
.set__get[hidden] { display: none; }
.set__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted-foreground); max-width: 78ch; }
.set__steps b { color: var(--foreground); font-weight: 500; }
.set__code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 5px; color: var(--foreground); user-select: all; }
.set__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.set__label { font-size: 12px; color: var(--muted-foreground); }
.set__input { width: 180px; flex: none; }
.set__token { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 12px; font-size: 13px; }
.set__token[hidden] { display: none; }
.set__token p { margin: 0; }
.set__token .set__muted { color: var(--muted-foreground); font-size: 12px; }
.set__ok { color: var(--up); }
.set__bad { color: var(--danger-solid); }
.set__key { font-family: var(--mono); font-size: 12px; word-break: break-all; user-select: all; padding: 10px 12px; border-radius: 8px; background: var(--background); border: 1px solid var(--border); }
.set__stale { color: var(--down); }
.set__tabs { align-self: flex-start; }
.set__sub { display: flex; flex-direction: column; gap: 16px; }
.set__sub[hidden] { display: none; }

/* Health. One word per state, and the same four colours in the words and in the strips. */
.hl td { vertical-align: top; }
.hl__state { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.hl__state--ok { color: var(--up); }
.hl__state--failed, .hl__state--stuck { color: var(--danger-solid); }
.hl__state--stale, .hl__state--never { color: var(--down); }
.hl__state--running, .hl__state--skipped { color: var(--muted-foreground); }
.hl__src { font-family: var(--mono); font-size: 12px; }
.hl__muted { color: var(--muted-foreground); }
.hl__via { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 11px; color: var(--muted-foreground); }
.hl tr.hl__err td { border-bottom: 1px solid var(--border); padding-top: 0; white-space: normal; font-family: var(--mono); font-size: 11px; color: var(--danger-solid); word-break: break-word; }
.hl tr.hl__has-err td { border-bottom: 0; }
.hl tr.hl__err--quiet td { color: var(--muted-foreground); }
.hl__lines { margin: 0; padding: 0; list-style: none; white-space: normal; font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); display: flex; flex-direction: column; gap: 2px; }
.hl__dots { display: inline-flex; gap: 3px; align-items: center; }
.hl__dot { width: 8px; height: 14px; border-radius: 2px; background: var(--up); }
.hl__dot--failed, .hl__dot--stuck { background: var(--danger-solid); }
.hl__dot--running { background: var(--muted-foreground); }
.hl__dot--quiet { opacity: 0.45; }
.hl__nights { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted-foreground); }
.hl__nights:empty { display: none; }

/* A few hundred rows. The detail stays in view while the list scrolls. */
@media (min-width: 760px) {
  .list, .detail { max-height: calc(100vh - 32px); overflow-y: auto; }
  .detail { position: sticky; top: 16px; }
  /* The rail holds the screen, so the gear at its foot is in the corner of the window and not
     at the end of whichever page is the longest. */
  .side { position: sticky; top: 12px; align-self: flex-start; height: calc(100vh - 24px); }
}

/* ---- the sign-in page, from the canvas "Ringtime GTM Ops Login.dc.html" ---- */
.signin {
	/* The canvas paints the button with the accent, not with the dark theme's near white. */
	--primary: var(--voice-900);
	--primary-foreground: oklch(0.145 0 0);
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	padding: 32px 20px; background: oklch(0.13 0 0); color: var(--foreground);
	font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.signin__stack { width: 100%; max-width: 348px; display: flex; flex-direction: column; gap: 20px; }
.signin__brand { display: flex; justify-content: center; }
.signin__lockup { width: 210px; max-width: 100%; height: auto; display: block; }
.signin__card { background: oklch(0.172 0 0); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.signin__panel { display: flex; flex-direction: column; gap: 14px; }
.signin__panel--sent { gap: 12px; }
.signin__panel[hidden] { display: none; }
.signin__head { display: flex; flex-direction: column; gap: 3px; }
.signin__title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.signin__copy { margin: 0; font-size: 13px; color: var(--muted-foreground); }
.signin__group { display: flex; flex-direction: column; gap: 6px; }
.signin__group[hidden] { display: none; }
.signin__label { font-size: 12px; color: var(--muted-foreground); }
.signin__input {
	width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border);
	border-radius: 6px; background: var(--background); color: var(--foreground);
	font-family: var(--font-sans); font-size: 14px; box-shadow: none; outline: none;
	transition: border-color 130ms ease, box-shadow 130ms ease;
}
.signin__input::placeholder { color: var(--muted-foreground); }
.signin__input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 40%, transparent); }
.signin__input--code { font-family: var(--font-mono); letter-spacing: 0.3em; text-align: center; }
.signin__submit { width: 100%; height: 38px; font-size: 14px; background: var(--primary); color: var(--primary-foreground); }
.signin__submit:hover:not(:disabled) { background: color-mix(in oklch, var(--primary) 90%, transparent); }
.signin__icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(119,168,255,0.14); color: var(--voice-900); }
.signin__icon svg { display: block; }
.signin__back { align-self: flex-start; font: inherit; font-size: 13px; padding: 0; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; border-bottom: 1px solid var(--border); transition: color 130ms ease; }
.signin__back:hover { color: var(--foreground); }
.signin__note { margin: 0; font-size: 12px; color: var(--muted-foreground); }
.signin__note.is-bad { color: var(--destructive); }
.signin__note[hidden] { display: none; }
.signin__help { margin: 0; padding-left: 2px; font-size: 12px; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
.signin__help a { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.signin__help a:hover { color: var(--foreground); }
.signin__help svg { width: 13px; height: 13px; display: block; flex: none; }
.signin__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- who followed us ----
   One question per row: the person on the left, the employer we would create, the three answers.
   The row is a card and not a table row, because a headline runs long and a table would either
   clip it or set the column width from the longest one. Decision 0021. */
.rvq { display: flex; flex-direction: column; gap: 10px; }
.rvq__row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.rvq__who { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rvq__name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.rvq__link { color: inherit; text-decoration: none; }
.rvq__link:hover { text-decoration: underline; }
.rvq__why { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc, rgb(119,168,255)); }
.rvq__head { font-size: 12px; color: var(--muted-foreground); max-width: 64ch; }
.rvq__prop { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rvq__proplabel { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.rvq__propname { font-size: 14px; font-weight: 500; }
.rvq__slug { font-size: 12px; color: var(--muted-foreground); text-decoration: none; }
.rvq__slug:hover { text-decoration: underline; }
.rvq__acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rvq__btn { font: inherit; font-size: 12px; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; transition: background 130ms ease, color 130ms ease, border-color 130ms ease; }
.rvq__btn:hover:not(:disabled) { background: var(--accent); color: var(--foreground); }
.rvq__btn:disabled { opacity: .5; pointer-events: none; }
.rvq__btn--yes { color: var(--acc, rgb(119,168,255)); border-color: color-mix(in oklch, rgb(119,168,255) 40%, var(--border)); }
.rvq__btn--yes:hover:not(:disabled) { background: rgba(119,168,255,0.14); color: var(--acc, rgb(119,168,255)); }
.rvq__btn--no:hover:not(:disabled) { background: color-mix(in oklch, var(--danger-solid) 14%, transparent); color: var(--danger-solid); }
.rvq__bad { flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--danger-solid); }

.nav__count { margin-left: auto; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: rgba(119,168,255,0.16); color: var(--acc, rgb(119,168,255)); }
.nav__count[hidden] { display: none; }

/* The push block. The mirror of the bin, and the only place the console writes outside the store.
   Geometry only: the button and the inputs are the design system's own classes. */
.push { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.push__go { padding: 0 11px; font-size: var(--text-xs); font-weight: 400; gap: 7px; }
.push__logo { width: 14px; height: 14px; display: block; }
/* Empty until the send says something, and then it is the only thing in the block. */
.push__msg:empty { display: none; }
.push__msg:not(:empty) { margin-top: var(--space-3); }
.push__form { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; margin-top: var(--space-3); }
.push__field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 200px; }
.push__label { font-size: var(--text-xs); color: var(--muted-foreground); }
.push__msg { margin: 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.push.is-bad .push__msg { color: var(--danger-solid); }

/* The crm_create questions, a second pile in the same tab. Decision 0023. */
.rvq__section { padding: var(--space-3) 0 0; }
.rvq__sectionname { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--foreground); }
.rvq__sectionnote { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.rvq__typed { height: 2rem; width: 13rem; flex: 0 0 auto; }