/* ../../ui/theme/index.css */
/* Tokens first (the only files with raw values), then base, then one file per component group. */
/* ./tokens/core.css */
/*
 * Core tokens. Every raw value (px, ms, hex, rgba, z-index, opacity) lives in
 * src/ui/theme/tokens/*.css; everything else uses var(--token).
 * Light is the base; [data-theme='dark'] overrides colors only.
 */
:root,
[data-theme='light'] {
	color-scheme: light;

	/* Color */
	--color-app: #e5e5e5;
	--color-surface: #f0f0f0;
	--color-surface-2: #ffffff;
	--color-ink: #2c2c2c;
	/* Text tokens are ≥4.5:1 on app, surface, surface-2 and hover (WCAG 1.4.3). */
	--color-muted: #5c5c5c;
	--color-border: rgba(0, 0, 0, 0.1);
	--color-hover: #dadada;
	--color-accent: #1473e6;
	--color-accent-ink: #105ab3;
	/* Heat grids' darkest cell: white text passes on it (see heat.ts heatBands). */
	--color-heat: var(--color-accent-ink);
	--color-accent-muted: color-mix(
		in srgb,
		var(--color-accent) 20%,
		transparent
	);
	--color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, #000000);
	--color-on-accent: #ffffff;
	/* Links inside hint popovers (surface-2): 6.7:1 on white (WCAG AA ≥4.5:1). */
	--hint-link: var(--color-accent-ink);
	/* Brand (the Loop and the slash in user/path): the accent blue, lighter on dark. The app tile stays the accent in both themes. */
	--color-brand: #1473e6;
	--color-brand-tile: #1473e6;
	--color-on-brand-tile: #ffffff;
	--color-danger: #d7373f;
	--color-danger-muted: color-mix(
		in srgb,
		var(--color-danger) 18%,
		transparent
	);
	--color-danger-hover: color-mix(in srgb, var(--color-danger) 88%, #000000);
	/* Warn as a badge fill (risky, not yet bad); mixes the theme's warn. */
	--color-warn-muted: color-mix(in srgb, var(--color-warn) 18%, transparent);
	/* Status colors as text: darker (light) or lighter (dark) than the fills. */
	--color-danger-ink: #a82b31;
	--color-live: #1b8a4a;
	--color-live-ink: #157040;
	/* Categorical hues (dataviz reference palette, validated in this order):
	 * identity only, never status. Each mark sits next to its name. */
	--color-cat-blue: #2a78d6;
	--color-cat-orange: #eb6834;
	--color-cat-aqua: #1baf7a;
	--color-cat-yellow: #eda100;
	--color-cat-magenta: #e87ba4;
	--color-cat-violet: #4a3aa7;
	--color-live-glow: color-mix(in srgb, var(--color-live) 60%, transparent);
	/* ≥3:1 as a fill or line on the surfaces (WCAG 1.4.11). */
	--color-warn: #8f6a00;
	--color-warn-ink: #7b5a00;
	--color-focus: var(--color-accent);
	/* Focus rings, list bars and search underlines: as thin as the borders they sit among. */
	--focus-width: var(--border-width);
	--link-underline-offset: 2px;
	/* The highlighted option or focused item in a list: an accent edge (≥3:1), not just a tint. */
	--focus-bar: inset var(--focus-width) 0 0 var(--color-focus);
	/* Search fields inside popovers: an accent underline while focused. */
	--focus-underline: inset 0 calc(var(--focus-width) * -1) 0 var(--color-focus);

	/* Type */
	--font-ui: Inter, system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-size-2xs: 10px;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-md: 13px;
	--font-size-lg: 15px;
	--font-size-xl: 18px;
	--font-size-stat: 22px;
	--font-size-kpi: 26px;
	--font-size-display: 28px;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--leading-tight: 1.2;
	--leading-base: 1.35;
	--leading-prose: 1.45;
	--leading-relaxed: 1.5;
	--leading-code: 1.6;
	--tracking-tight: -0.02em;
	--tracking-caps: 0.01em;

	/* Space (2px grid) */
	--space-0: 0px;
	--space-1: 1px;
	--space-2: 2px;
	--space-3: 3px;
	--space-4: 4px;
	--space-5: 5px;
	--space-6: 6px;
	--space-7: 7px;
	--space-8: 8px;
	--space-9: 9px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;

	/* Size */
	--control-height: 25px;
	--control-height-sm: 22px;
	--control-height-xs: 20px;
	--icon-button-size: 24px;
	/* Space between an icon button's edge and its glyph: edge buttons shift by it to align by the glyph. */
	--icon-button-inset: calc((var(--icon-button-size) - var(--icon-md)) / 2);
	--row-height-nav: 28px;
	--row-height: 32px;
	--row-height-md: 40px;
	--row-height-lg: 48px;
	--panel-header-height: 36px;
	--topbar-height: 44px;
	--sidebar-width: 212px;
	--viewport-height: 100vh;
	--badge-height: 18px;
	--dot-size: 6px;
	--dot-size-lg: 8px;
	--icon-xs: 10px;
	--icon-sm: 12px;
	--icon-md: 14px;
	--meter-sm: 4px;
	--meter-md: 6px;
	--avatar-sm: 22px;
	--avatar-md: 26px;
	--avatar-lg: 40px;
	--logo-sm: 20px;
	--logo-md: 24px;
	/* The logo lockup (mark + user/path) by height; its cap height is 72% of it. */
	--logo-lockup-sm: 16px;
	--logo-lockup-md: 20px;
	--chip-remove-size: 16px;
	/* Smallest pointer target (WCAG 2.5.8); small controls get an invisible hit area this big. */
	--target-min: 24px;
	--font-size-avatar-lg: 14px;
	--kbd-size: 18px;
	--popover-min-width: 160px;
	--hint-max-width: 280px;
	/* A follow cell (a feed beside a chart) never shrinks below a few lines. */
	--page-grid-follow-min-height: 240px;
	/* HScroll: how far a clipped edge fades, and its ‹ › (a toolbar control's size). */
	--hscroll-fade: 28px;
	--hscroll-arrow-size: var(--control-height);
	/* Content-sized popovers never outgrow the screen. */
	--popover-max-viewport: calc(100vw - 24px);
	--popover-wide-width: 220px;
	/* Menus whose items carry a description: narrow enough that it wraps to two lines. */
	--menu-described-width: 248px;
	/* A menu whose items carry a second line of tokens (an audience's rules). */
	--menu-detailed-width: 360px;
	--popover-max-height: 420px;
	--tooltip-max-width: 240px;
	--sheet-max-height: 85vh;

	/* Shape */
	--border-width: 1px;
	--border-width-strong: 2px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-full: 999px;
	--shadow-selected: inset 0 var(--border-width-strong) 0 var(--color-accent);
	--focus-offset: 1px;
	--scrollbar-size: 6px;
	--color-scrollbar: color-mix(in srgb, var(--color-muted) 35%, transparent);
	--color-scrollbar-hover: color-mix(
		in srgb,
		var(--color-muted) 60%,
		transparent
	);

	/* Touch and device */
	--touch-target: 44px;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);

	/* Motion and state */
	--duration-fast: 120ms;
	--duration-pulse: 1.6s;
	/* A settings group reached from the nav: held, then faded out. */
	--duration-flash: 1.2s;
	--pulse-spread: 6px;
	--opacity-disabled: 0.5;
	--opacity-hidden: 0;
	--duration-base: 180ms;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	/* Above a sibling inside the same component (an edge over a bar). */
	--z-raised: 1;
	--z-sticky: 50;
	/* The desktop sidebar: over the page's sticky bars, so its edge handle shows on the border. */
	--z-sidebar: 60;
	--z-drawer: 150;
	--z-popover: 200;
	--z-tooltip: 240;
	--z-dialog: 300;
	--z-toast: 400;
	--shadow-popover:
		0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--color-border);
	--color-backdrop: rgba(0, 0, 0, 0.32);
}

/*
 * Breakpoints are container widths (components respond to the space they get,
 * so the DS can preview them at any size). CSS can't use var() in conditions,
 * so these are the only literal widths allowed outside tokens:
 *   phone   < 640px     @container (max-width: 639px)
 *   tablet  640–1023px
 *   desktop ≥ 1024px    @container (min-width: 1024px)
 * Touch devices get larger controls; dense desktop stays 25px.
 */
@media (pointer: coarse) {
	:root {
		--control-height: 36px;
		--control-height-sm: 30px;
		--control-height-xs: 26px;
		--icon-button-size: 36px;
		--row-height-nav: 40px;
	}
}

[data-theme='dark'] {
	color-scheme: dark;
	--color-app: #1d1d1d;
	--color-surface: #2a2a2a;
	--color-surface-2: #1f1f1f;
	--color-ink: #e8e8e8;
	--color-brand: #3d8ff0;
	--color-muted: #adadad;
	--color-border: #3e3e3e;
	--color-hover: #333333;
	--color-accent-ink: color-mix(in srgb, var(--color-accent) 62%, #ffffff);
	--color-heat: var(--color-accent);
	--color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, #ffffff);
	/* Lighter than accent-ink: 8.1:1 on the #1f1f1f popover, 6.2:1 on hover. */
	--hint-link: color-mix(in srgb, var(--color-accent) 50%, #ffffff);
	--color-danger: #e34850;
	--color-danger-hover: color-mix(in srgb, var(--color-danger) 88%, #ffffff);
	--color-danger-ink: #eb7f84;
	--color-live: #3dcc6f;
	--color-live-ink: var(--color-live);
	--color-cat-blue: #3987e5;
	--color-cat-orange: #d95926;
	--color-cat-aqua: #199e70;
	--color-cat-yellow: #c98500;
	--color-cat-magenta: #d55181;
	--color-cat-violet: #9085e9;
	--color-warn: #e6b800;
	--color-warn-ink: var(--color-warn);
	--shadow-popover:
		0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-border);
	--color-backdrop: rgba(0, 0, 0, 0.56);
}


/* ./tokens/shell.css */
/* Shell and navigation tokens: raw values for components/shell.css. */
:root {
	/* One side gutter for the top bar, toolbars and page content, so their edges line up. */
	--page-gutter: 20px;
	--page-gutter-phone: 12px;
	--crumb-link-min-width: 36px;
	--crumb-title-min-width: 96px;
	/* A lower bound on one title character's width, so a short title's floor never exceeds the title. */
	--crumb-char-min-width: 0.5em;
	--toolbar-height: 36px;
	--page-toolbar-height: 40px;
	/* Between a toolbar's controls (chips, selects, search), the same on every page; page tabs keep more room before them. */
	--toolbar-gap: var(--space-6);
	--toolbar-tabs-gap: var(--space-24);
	--tab-height-page: 40px;
	--tab-height-boxed: 32px;
	/* The top bar's height less the sidebar's top padding: the switcher's bottom edge lines up with the top bar's. */
	--switcher-height: calc(var(--topbar-height) - var(--space-8));
	--split-list-width: 280px;
	--split-nav-width: 200px;
	--split-inspector-width: 380px;
	/* SplitView panel (Agents): wide enough for the computer's 16:9 screen; narrower below desktop. */
	--split-panel-width: 440px;
	--split-panel-width-narrow: 340px;
	/* SplitView rail (the agents list beside a panel split). */
	--split-rail-width: 220px;
	--settings-content-max: 760px;
	/* Settings rows: the icon tile, and room for the save bar under the last group. */
	--settings-icon-tile: 32px;
	--settings-bottom-space: 96px;
	/* Where a group scrolled to from the nav lands, and where the nav sticks: under the top bar. */
	--settings-group-scroll-margin: calc(
		var(--topbar-height) + var(--safe-top) + var(--space-16)
	);
	/* Where the nav sits anyway (the aside's padding less the nav's own), so sticking never moves it. */
	--settings-nav-sticky-top: calc(var(--topbar-height) + var(--space-12));
	/* A group under the current section in the settings nav. */
	--row-height-nav-sub: 24px;
	--section-divider-gap: 18px;
	--tab-underline: 2px;
	--nav-meta-min: 16px;
	/* The sidebar's collapse handle: the hover strip centered on its border, and the chevron grip. */
	--sidebar-edge-hit: 8px;
	--sidebar-edge-grip-width: 16px;
	--sidebar-edge-grip-height: 28px;
	/* DS previews: height of a composed shell or sidebar on its page. */
	--shell-preview-height: 640px;
	/* A segment that can't be chosen: fainter than the others; its lock stays muted. */
	--seg-disabled-ink: color-mix(in srgb, var(--color-muted) 55%, transparent);
}

/* Touch: the settings nav's groups get a finger-sized row, like its sections. */
@media (pointer: coarse) {
	:root {
		--row-height-nav-sub: 36px;
	}
}


/* ./tokens/controls.css */
/* Controls and feedback group tokens: raw values for components/controls.css. */
:root {
	/* AddressInput: the typing field's narrowest width, and its height inside the chips row. */
	--address-input-min: 120px;
	--address-input-field-height: 24px;
	/* Switch: md in settings/forms, sm inside buttons (CompareToggle). */
	--switch-md-width: 26px;
	--switch-md-height: 14px;
	--switch-md-thumb: 12px;
	--switch-sm-width: 18px;
	--switch-sm-height: 10px;
	--switch-sm-thumb: 8px;
	--switch-inset: 1px;
	/* A small switch beside its label sits this much lower: text's visual middle (its x-height) is under its line box's. */
	--switch-sm-optical-offset: 1px;
	/* Off track: dark enough in light mode that the white thumb reads against light surfaces. */
	/* ≥3:1 against the surfaces and the white thumb (WCAG 1.4.11). */
	--switch-off-track: #8a8a8a;

	/* Field widths and label columns. */
	--field-width-sm: 160px;
	--field-width-md: 200px;
	--field-width-lg: 260px;
	--field-width-xl: 320px;
	--picker-min-width: 220px;
	--label-width-sm: 96px;
	--label-width-lg: 180px;
	--select-icon-space: 22px;
	/* TextInput's ×: a 24px target 1px in from the edge; filled text stops before it. */
	--input-clear-inset: 1px;
	--input-clear-space: 27px;
	--input-focus-ring: 0 0 0 var(--border-width-strong) var(--color-accent-muted);
	/* DraftButton: the notes panel. SnoozePicker: its list of choices. SchedulePicker: its choices with when each goes. */
	--draft-btn-panel-width: 280px;
	--snooze-width: 220px;
	--schedule-width: 260px;

	/* Step builder. */
	--step-number-size: 18px;
	--step-conditions-indent: 50px;
	--step-drag-opacity: 0.5;
	--opacity-full: 1;

	/* Empty state. */
	--empty-state-height: 120px;
	/* EmptyState celebrate: the drawn check, its sparks and its float. */
	--celebrate-height: 220px;
	--celebrate-size: 80px;
	--celebrate-text-width: 56ch;
	--celebrate-stroke: 2.5px;
	--celebrate-draw: 700ms;
	--celebrate-check-delay: 450ms;
	--celebrate-pop: 500ms;
	--celebrate-spark-delay: 800ms;
	--celebrate-spark-stagger: 90ms;
	--celebrate-twinkle: 2.8s;
	--celebrate-float: 5s;
	--celebrate-float-lift: -3px;
	--celebrate-halo-scale: 1.12;
	--celebrate-spark-dim: 0.35;
	--celebrate-spark-on: 1;
	--celebrate-halo: color-mix(in srgb, var(--color-live) 18%, transparent);
	/* EmptyMark: a ring and a glyph that draw themselves, in the accent; draw and float are celebrate's. */
	--empty-mark-size: 56px;
	--empty-mark-stroke: 2.5px;
	--empty-mark-ring: color-mix(in srgb, var(--color-accent) 40%, transparent);
	--empty-mark-halo: color-mix(in srgb, var(--color-accent) 10%, transparent);
	--empty-mark-glyph-delay: 300ms;
	--empty-mark-delay: 0ms;
}

[data-theme='dark'] {
	--switch-off-track: #7a7a7a;
}


/* ./tokens/data.css */
/* data group tokens: raw values for src/ui/theme/components/data.css. */
:root {
	/* Stat */
	--font-size-stat-sm: 16px;

	/* Table columns (fixed widths used in column configs) */
	--table-col-xs: 44px;
	--table-col-sm: 70px;
	--table-col-md: 80px;
	--table-col-spark-sm: 110px;
	--table-col-spark: 150px;
	/* Two small row buttons (Add, Dismiss). */
	--table-col-actions: 150px;
	/* The grab strip on a resizable column's edge (as wide as the sidebar's). */
	--table-resize-hit: 8px;

	/* Activity rows: dot, event name, who, time */
	--activity-col-dot: 8px;
	--activity-col-name: 110px;
	--activity-col-via: 110px;
	--activity-col-who: 150px;
	--activity-col-time: 44px;

	/* Timeline: time, rail */
	--timeline-col-time: 44px;
	--timeline-col-rail: 16px;
	--timeline-row-min: 30px;
	/* Everything in a row centers on the event's first line (body text, below the row padding). */
	--timeline-row-pad: var(--space-6);
	--timeline-line: calc(var(--font-size-sm) * var(--leading-base));
	--timeline-dot-offset: calc(
		var(--timeline-row-pad) + (var(--timeline-line) - var(--dot-size)) / 2
	);
	--timeline-text-offset: calc(
		var(--timeline-row-pad) +
			(var(--timeline-line) - var(--font-size-xs) * var(--leading-base)) / 2
	);
	/* Details: the visit's info button keeps the header's height; names that open a popover. */
	--timeline-head-button-pull: -4px;
	--timeline-name-underline: color-mix(in srgb, currentColor 45%, transparent);
	--timeline-popover-width: 300px;

	/* Key/value, facts, bar lists */
	--fact-col-label: 90px;
	--fact-col-value: 44px;
	--bar-list-col-label: 140px;
	--bar-list-col-value: 56px;
	--prop-col-key: 160px;
	--prop-col-label: 200px;
	--prop-col-value: 70px;

	/* Lists and insights */
	--list-trailing-width: 52px;
	/* The right column never takes more than this: a long page path ellipsizes instead of squeezing the name out. */
	--list-trailing-max: 45%;
	--insight-dot-offset: 5px;
	--breakdown-bar-inset: 3px;

	/* Controls inside a linked table row sit above the row link overlay. */
	--z-row-control: 1;
	--table-skeleton-max: 160px;
	/* Opportunities › Two pages, one query: the days-on-top meter and its percentage. */
	--shared-query-meter: 96px;
	--shared-query-share: 64px;
	/* RankChangeList: the move column ("Down 12"). */
	--rank-move-width: 72px;

	/* Board: columns never narrower than this (they scroll sideways instead); on phones one column and a peek of the next. */
	--board-col-min: 240px;
	--board-col-phone: 82%;
	--board-col-gap: var(--space-12);
	--board-card-gap: var(--space-6);
	/* A card while it's dragged: what stays behind fades. */
	--board-drag-opacity: 0.4;
	/* An empty column: its sentence wraps to two balanced lines; marks draw one column after another. */
	--board-empty-text-width: 30ch;
	--board-empty-stagger: 120ms;
}


/* ./tokens/charts.css */
/* charts group tokens: raw values for src/ui/theme/components/charts.css. */
:root {
	--chart-line-width: 2px;
	--chart-hairline: 1px;
	--sparkline-width: 1.5px;
	--chart-dot-ring: 2px;
	--chart-tooltip-min-width: 138px;
	--chart-tooltip-gap: 12px;
	--legend-swatch-width: 12px;
	--legend-swatch-height: 2px;
	--funnel-pct-md: 14px;
	--funnel-pct-sm-leading: 16px;
	--funnel-drop-note-max: 220px;
	--mini-funnel-bar: 6px;
	--mini-funnel-event-width: 160px;
	--mini-funnel-event-width-phone: 96px;
	--mini-funnel-rate-width: 32px;
	--waterfall-name-width: 120px;
	--waterfall-value-width: 56px;
	--waterfall-row-height: 30px;
	--waterfall-track: 10px;
	--segment-gap: 2px;
	/* Gauge: the ring's box and its stroke (in the 36-unit viewBox). */
	--gauge-sm: 20px;
	--gauge-md: 32px;
	--gauge-stroke: 4.5;
	/* A lighter step of the accent: the middle stage in waterfalls and legends. */
	--chart-accent-soft: color-mix(
		in srgb,
		var(--color-accent) 72%,
		var(--color-surface)
	);
	--waterfall-axis-height: 18px;
	/* The band a drag across a chart selects. */
	--chart-selection: color-mix(in srgb, var(--color-accent) 16%, transparent);

	/* Funnel fills */
	--funnel-fill-start: var(--color-accent);
	--funnel-fill-mid: color-mix(in srgb, var(--color-accent) 72%, transparent);
	--funnel-fill-end: color-mix(in srgb, var(--color-accent) 48%, transparent);
	--funnel-gloss: rgba(255, 255, 255, 0.18);
	--funnel-clear: rgba(255, 255, 255, 0);
	--funnel-shade: rgba(0, 0, 0, 0.14);
	/* A dark halo under the white % labels: the fill fades too light for white text alone. */
	--funnel-pct-halo: 3px;
	--funnel-drop: color-mix(in srgb, var(--color-danger) 16%, transparent);
	/* HitStrip: one square per try. */
	--hit-size: 12px;
	--hit-gap: 3px;
}


/* ./tokens/chat.css */
/* chat group tokens: raw values for src/ui/theme/components/chat.css. */
:root {
	--ask-width: 420px;
	/* LinkPreview: the card's width, its image's shape, its text's lines. */
	--link-preview-width: 320px;
	--link-preview-max-width: calc(100vw - 16px);
	--link-preview-image-ratio: 1.91;
	--link-preview-lines: 3;
	--link-icon-size: 14px;
	--ask-bubble-max: 300px;
	--ask-empty-max: 300px;
	--composer-min-height: 51px;
	--composer-max-height: 160px;
	--pending-dot-size: 4px;
	--pending-duration: 1.2s;
	--pending-stagger: 0.15s;
	--pending-dim: 0.3;
	--pending-full: 1;
	/* DS preview frame for the full panel. */
	--ask-preview-height: 720px;

	/* Markdown (bud's scale: headings 1.28 / 1.18 / 1.10 / 1.05 × body). */
	--md-gap: 10px;
	--md-h1: 15px;
	--md-h2: 14px;
	--md-h3: 13px;
	--md-h4: 12.5px;
	--md-code-size: 11px;
	--md-code-bg: color-mix(in srgb, var(--color-ink) 8%, transparent);
	--md-list-indent: 18px;
	--md-quote-width: 2px;

	/* Thinking sparkles (bud's constants: spin °/s → one turn; breathe rate → half period). */
	--spark-a-turn: 1.846s;
	--spark-b-turn: 1.412s;
	--spark-c-turn: 1.161s;
	--spark-a-breathe: 1.571s;
	--spark-b-breathe: 1.208s;
	--spark-c-breathe: 0.982s;
	--spark-b-phase: -1.2s;
	--spark-c-phase: -2.1s;
	--spark-opacity-low: 0.58;
	--spark-opacity-high: 0.9;
	--spark-opacity-still: 0.8;
	--spark-glow-low: 0.08;
	--spark-glow-high: 0.24;
	--label-pulse-duration: 1.6s;

	/* Reasoning, tools, turn states. */
	--reasoning-bg: color-mix(in srgb, var(--color-ink) 5%, transparent);
	--tool-done-ink: color-mix(in srgb, var(--color-ink) 72%, transparent);
	--tool-rail-indent: 20px;
	--spinner-size: 12px;
	--spinner-duration: 0.8s;
	--block-pending-height: 96px;
	--user-pending-opacity: 0.6;
	--chip-pill-height: 26px;
	--opacity-visible: 1;

	/* Log and history. */
	--scroll-bottom-size: 32px;
	--scroll-bottom-offset: 12px;
	--unread-dot-size: 8px;
	--history-width: 300px;
	--history-list-max: 320px;

	/* DiffView: added and removed lines, tinted (the + and − signs say it too). */
	--diff-add-bg: color-mix(in srgb, var(--color-live) 14%, transparent);
	--diff-remove-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
	--diff-marker-width: 14px;
	--diff-max-height: 360px;
}


/* ./tokens/overlays.css */
/* overlays group tokens: raw values for src/ui/theme/components/overlays.css. */
:root {
	--dialog-sm: 400px;
	--dialog-md: 520px;
	--dialog-lg: 720px;
	--dialog-max-height: 85vh;
	--dialog-margin: 16px;
	--palette-width: 640px;
	--palette-top: 12vh;
	--palette-list-max: 420px;
	--palette-row-height: 36px;
	--toast-width: 360px;
	--app-switcher-min-width: 220px;
	--app-switcher-max-width: 320px;
	--app-switcher-list-max: 340px;
	--shortcuts-col-min: 260px;
	--sequence-hint-max: 1120px;
	--overlay-vw: 100vw;
	--overlay-dvh: 100dvh;
	/* Contact support: how tall the screenshot preview gets. */
	--support-shot-max: 220px;
}


/* ./tokens/mobile.css */
/* Mobile & PWA tokens: raw values for components/mobile.css. */
:root {
	/* Tablet: icon-only sidebar rail. */
	--sidebar-rail-width: 56px;
	/* Phone: floating bottom tab bar. */
	--bottom-nav-height: 52px;
	--bottom-nav-item-width: 60px;
	--bottom-nav-badge-size: 16px;
	--bottom-nav-float: 12px;
	/* Sheets: detents as a share of the screen (or of the containing frame). */
	--sheet-height-medium: 50dvh;
	--sheet-height-large: 94dvh;
	--sheet-contained-medium: 50%;
	--sheet-contained-large: 94%;
	--sheet-side-width: 360px;
	--sheet-side-max: 88%;
	--sheet-float-width: 560px;
	--sheet-float-max-height: 80vh;
	--sheet-handle-width: 36px;
	--sheet-handle-height: 5px;
	--sheet-behind-scale: 0.96;
	--sheet-radius: 12px;
	/* Pull to refresh. */
	--pull-indicator-size: 28px;
	--pull-spinner-size: 16px;
	--pull-spinner-stroke: 2px;
	--pull-spin-duration: 0.8s;
	--pull-unit: 1px;
	--pull-rotate-unit: 3deg;
	--opacity-full: 1;
	/* Floating glass pill. */
	--bottom-nav-backdrop: blur(16px) saturate(1.4);
	/* DS previews: a composed desktop shell scrolling inside its stage. */
	--shell-preview-tall: 820px;
	/* PWA prompts. */
	--install-card-max: 420px;
	--update-pill-height: 32px;
}


/* ./tokens/forms.css */
/* Dates & forms group tokens: raw values for components/forms.css. */
:root {
	/* TextEditor: a field's height before it scrolls, the link form */
	--text-editor-min: 72px;
	--text-editor-min-lg: 200px;
	--text-editor-max: 240px;
	--editor-link-form-width: 280px;
	--editor-link-max: 220px;
	/* A campaign's: a page's starting height, the space between blocks, an upload's fade, the cursor by an image */
	--text-editor-min-page: 360px;
	--text-editor-block-gap: 12px;
	--text-editor-uploading-from: 0.35;
	--text-editor-uploading-to: 0.7;
	--text-editor-gapcursor-width: 20px;
	--text-editor-blink: 1.1s;
	/* A campaign's composer: the notes over an image, a merge field, a button, the slash menu, an upload's bar before it has a number */
	--text-editor-chip-height: 22px;
	--text-editor-merge-height: 18px;
	--text-editor-button-height: 36px;
	--editor-slash-width: 240px;
	--text-editor-upload-waiting: 30%;
	--text-editor-image-broken-height: 72px;

	/* Calendar */
	--calendar-cell: 32px;
	--calendar-month-gap: 20px;
	--calendar-today-dot: 3px;

	/* Date range picker */
	--drp-presets-width: 136px;

	/* Checkbox and radio */
	--check-size: 14px;
	--radio-dot: 6px;
	/* Unchecked boxes need more than a hairline to read on dark surfaces. */
	--check-border: var(--color-muted);
	--choice-card-min: 180px;
	/* Choice tiles: a mark over a name, five to a dialog's row. */
	--choice-tile-min: 80px;

	/* Pickers */
	--fp-panel-min-width: 200px;
	--fp-panel-max-width: 360px;
	--fp-list-max: 280px;
	/* SavedViews */
	/* Fits its content between these. */
	--sv-min-width: 220px;
	--sv-max-width: 360px;
	--sv-list-max: 360px;
	--sv-icon-box: 26px;
	--combobox-list-max: 260px;
	--number-stepper-width: 16px;

	--spin-duration: 0.9s;
}

@media (pointer: coarse) {
	:root {
		--calendar-cell: 40px;
		--check-size: 18px;
	}
}


/* ./tokens/blocks.css */
/* blocks group tokens: raw values for src/ui/theme/components/blocks.css. */
:root {
	--ui-stat-min: 110px;
	--ui-skeleton-line: 10px;
	--ui-skeleton-block: 96px;
	--ui-skeleton-short: 40%;
	--confirm-icon-size: 26px;
	--confirm-spinner-size: 10px;
	--duration-spin: 0.8s;
	--duration-shimmer: 1.4s;
	--ui-frame-width: 420px;
}


/* ./tokens/utility.css */
/* utility group tokens: raw values for src/ui/theme/components/utility.css. */
:root {
	/* Skeleton */
	--skeleton-base: color-mix(in srgb, var(--color-ink) 8%, transparent);
	--skeleton-shine: color-mix(in srgb, var(--color-ink) 4%, transparent);
	--skeleton-duration: 1.4s;
	--skeleton-list-row: 40px;

	/* Spinner */
	--spinner-xs: 12px;
	--spinner-sm: 16px;
	--spinner-md: 24px;
	--spinner-duration: 0.8s;
	--spinner-stroke: 2;
	--spinner-block-min: 120px;

	/* Favicon, flags */
	--favicon-sm: 16px;
	--favicon-md: 20px;
	--flag-size: 14px;

	/* AvatarGroup */
	--avatar-overlap: -6px;

	/* Onboarding */
	--onboarding-marker: 20px;
	--onboarding-body-indent: 30px;
	--opacity-visible: 1;

	/* Error state */
	--error-code-size: 48px;
	--error-icon-size: 32px;
	--error-state-max: 420px;
	--error-state-min-page: 320px;

	/* Banner */
	--banner-height: 36px;

	/* Retention, heatmap */
	--retention-cell-min: 56px;
	--retention-label-min: 88px;
	--heatmap-cell: 18px;
	--heatmap-gap: 2px;
	--heatmap-day-col: 32px;
	--heatmap-swatch: 10px;
	--cal-heatmap-cell: 10px;
	--cal-heatmap-cell-max: 14px;
	--cal-heatmap-gap: 3px;
	--cal-heatmap-day-col: 26px;
	/* Set per calendar from its `weeks` prop. */
	--cal-heatmap-weeks: 26;
}


/* ./tokens/models.css */
/* Model picker tokens: raw values for src/ui/theme/components/models.css. */
:root {
	--mp-width: min(520px, calc(100vw - 32px));
	/* Fixed so the popover never resizes (and jumps) as rows are hovered. */
	--mp-body-height: min(320px, calc(100vh - 240px));
	--mp-options-height: 44px;
	--mp-detail-width: 204px;
	--mp-mark-md: 22px;
	--mp-mark-sm: 16px;
	--mp-pill-max-width: 200px;
	--mp-field-width: 320px;
	--mp-opacity-visible: 1;
	--mp-search-height: 40px;
	--mp-score-label-width: 76px;
	--mp-mark-anthropic: #c96442;
	--mp-mark-openai: #10a37f;
	--mp-mark-google: #4285f4;
	--mp-mark-xai: #6e6e6e;
	--mp-mark-cursor: #2c2c2c;
}

[data-theme='dark'] {
	--mp-mark-xai: #9a9a9a;
	--mp-mark-cursor: #e8e8e8;
}


/* ./tokens/extras.css */
/* extras group tokens: raw values for src/ui/theme/components/extras.css. */
:root {
	/* Slider */
	--slider-rail-height: 4px;
	--slider-thumb-size: 16px;
	--slider-track-height: 20px;
	--slider-tick-size: 4px;
	--slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	--slider-focus-ring: 0 0 0 4px var(--color-accent-muted);
	--slider-bubble-offset: 8px;
	--slider-marks-height: 16px;
	/* SaveBar: clears the floating phone bottom bar. */
	--save-bar-phone-offset: 76px;
	--save-bar-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	--save-bar-max-width: 560px;
	/* InlineEdit */
	--inline-edit-pad: 4px;
}

@media (pointer: coarse) {
	:root {
		--slider-thumb-size: 24px;
		--slider-track-height: 32px;
	}
}

[data-theme='dark'] {
	--slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	--save-bar-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}


/* ./tokens/states.css */
/* states group tokens: raw values for src/ui/theme/components/states.css. */
:root {
	--route-progress-height: 2px;
	--z-route-progress: 500;
	--route-progress-duration: 200ms;
	--route-progress-fade: 250ms;

	--auth-card-width: 400px;
	--auth-min-height: 560px;
	--auth-done-icon: 40px;

	/* Google sign-in button (their guidelines: light, dark and neutral themes). */
	--google-button-height: 40px;
	--google-mark-size: 18px;
	--google-button-font: 14px;
	--google-bg: #ffffff;
	--google-border: #747775;
	--google-ink: #1f1f1f;
	--google-neutral-bg: #f2f2f2;
	--google-neutral-ink: #1f1f1f;
	--google-red: #ea4335;
	--google-blue: #4285f4;
	--google-yellow: #fbbc05;
	--google-green: #34a853;
	/* Microsoft's four squares (MicrosoftMark). */
	--microsoft-red: #f25022;
	--microsoft-green: #7fba00;
	--microsoft-blue: #00a4ef;
	--microsoft-yellow: #ffb900;
	/* RefreshButton */
	--refresh-spin-duration: 0.9s;
}

[data-theme='dark'] {
	--google-bg: #131314;
	--google-border: #8e918f;
	--google-ink: #e3e3e3;
}


/* ./tokens/inbox.css */
/* inbox group tokens: raw values for src/ui/theme/components/inbox.css. */
:root {
	--inbox-list-width: 320px;
	--inbox-context-width: 296px;
	/* The list's head (its views, then the order and filter line) and the
	   thread's: one height, so their bottom borders meet across the panes. */
	--inbox-head-height: calc(
		var(--tab-height-page) + var(--space-4) + var(--control-height-sm) +
			var(--space-6) + var(--border-width)
	);
	/* The thread's readable measure: emails stay a comfortable line length on wide screens. */
	--inbox-thread-measure: 760px;
	/* An email's body lines up with the sender's name, past the avatar. */
	--mail-body-inset: 48px;
	/* What they did between messages: the event name and time columns. */
	--between-col-name: 168px;
	--between-col-time: 64px;
	/* Phones: a narrower name column, so the detail keeps some room. */
	--between-col-name-phone: 112px;
	--between-col-time-phone: 40px;
	/* The reply box: room for a few lines, then it scrolls. */
	--reply-input-min: 96px;
	--reply-input-max: 280px;
	/* An email's pictures, as thumbnails; a file chip's widest. */
	--mail-thumb-size: 96px;
	--mail-file-max: 280px;
	/* The mailbox's mark beside the From address. */
	--reply-mark-size: 14px;
	--mail-out-fill: color-mix(
		in srgb,
		var(--color-accent) 7%,
		var(--color-surface)
	);
	--mail-note-fill: color-mix(
		in srgb,
		var(--color-warn) 10%,
		var(--color-surface)
	);
}


/* ./tokens/sitechat.css */
/* sitechat group tokens: raw values for src/ui/theme/components/sitechat.css. */
:root {
	/* A chat bubble's widest: chats read as short lines, not pages. */
	--chatline-measure: 520px;
	--chatline-radius: 16px;
	/* The corner nearest the author is tighter, like every chat. */
	--chatline-radius-tail: 4px;
	--chatline-in-fill: var(--color-surface);
	--chatline-out-fill: color-mix(
		in srgb,
		var(--color-accent) 12%,
		var(--color-surface)
	);
}


/* ./tokens/campaigns.css */
/* campaigns group tokens: raw values for src/ui/theme/components/campaigns.css. */
:root {
	/* The width mail apps give an email on a phone. */
	--email-phone-width: 375px;
	/* Before the email's own height is known (the first paint). */
	--email-preview-min-height: 320px;
	/* A sticky preview never grows taller than the screen under the top bar. */
	--email-preview-sticky-top: calc(var(--topbar-height) + var(--space-16));
	--email-preview-busy-opacity: 0.55;
	/* Dark preview: the page a mail app in dark mode puts around the email (the same in either theme). */
	--email-preview-dark-page: #121212;
	/* EmailComposer: the envelope's rows and their names */
	--email-composer-row-height: 34px;
	--email-composer-label-width: 62px;
	/* A wrapping row's value gives way down to this much (an account picker still reads "@statu…") before its end drops under it. */
	--email-composer-value-min: 88px;
	/* LogoPicker: the thumbnail in settings, and at the email's own 26px over its text */
	--logo-picker-size: 40px;
	--logo-picker-size-sm: 26px;
}

/* RuleBuilder: the joining word's column ("and", "or"), and how far a rule's controls shrink before its value wraps */
:root {
	--rule-join-width: 28px;
	--rule-value-min: 72px;
	--rule-chips-min: 120px;
	--rule-combo-input-min: 24px;
	--rule-number-min: 36px;
	--rule-number-max: 72px;
}


/* ./tokens/social.css */
/* social group tokens: raw values for src/ui/theme/components/social.css. */
:root {
	/* NetworkMark: xs, sm and md share the icon sizes. */
	--network-mark-lg: 16px;
	--network-mark-xl: 24px;
	/* The networks' brand colors; X is drawn in the ink, so it follows the theme. */
	--network-x: var(--color-ink);
	--network-bluesky: #1185fe;
	--network-mastodon: #6364ff;
	--network-linkedin: #0a66c2;
	--network-reddit: #ff4500;
}

[data-theme='dark'] {
	/* LinkedIn's blue is under 3:1 on the dark surfaces: lifted to stay visible. */
	--network-linkedin: #4a90d9;
}


/* ./tokens/agents.css */
/* agents group tokens: raw values for src/ui/theme/components/agents.css. */
:root {
	/* AgentAvatar: each agent's color as a solid tile, initials in one ink (≥4.5:1 on every tile). */
	--agent-ink: #ffffff;
	--agent-blue: #2a6ccf;
	--agent-violet: #6a4fc4;
	--agent-green: #1e7a4a;
	--agent-amber: #9a5b00;
	--agent-rose: #c23a62;
	--agent-teal: #137479;
	--agent-slate: #5a6472;
	--agent-avatar-radius-sm: 5px;
	--agent-avatar-radius-md: 6px;
	--agent-avatar-font-sm: 9px;

	/* AgentList: the rail's rows (avatar and two lines). */
	--agent-row-height: 40px;

	/* ScreenView: the computer's desktop, dark in either theme. */
	--screen-aspect: 16 / 9;
	--screen-bg: #121418;
	--screen-ink: #f2f2f2;
	--screen-muted: rgba(242, 242, 242, 0.72);
	/* The last frame before it slept, behind the Asleep line. */
	--screen-still-opacity: 0.3;
	--screen-still-blur: 2px;
	/* Pills and buttons drawn over the screen. */
	--screen-chip-bg: rgba(0, 0, 0, 0.62);
	--screen-chip-hover: rgba(0, 0, 0, 0.78);
	--screen-chip-border: rgba(255, 255, 255, 0.14);
	/* Hovering the live screen in the panel: it dims under "Expand". */
	--screen-hover-veil: rgba(0, 0, 0, 0.35);
	/* Waking: the indeterminate bar. */
	--screen-progress-width: 160px;
	--screen-progress-height: 2px;
	--screen-progress-track: rgba(255, 255, 255, 0.16);
	--screen-progress-bar: 35%;
	--screen-progress-duration: 1.4s;
	/* Expanded: fills the window over everything but popovers and tooltips. */
	--z-screen-expanded: 180;
	--screen-expanded-bg: #0b0c0e;
	--screen-expanded-gap: 12px;
	/* The screen at the largest 16:9 that fits the expanded overlay (a size container). */
	--screen-expanded-width: min(100cqw, calc(100cqh * 16 / 9));

	/* AskCard: the command, clipped to a few lines until Show all. */
	--ask-card-summary-lines: 4;
	--ask-card-summary-max-height: 320px;

	/* PermissionList: a compact three-way control per row. */
	--perm-seg-height: 20px;
	--perm-allow-bg: color-mix(in srgb, var(--color-live) 16%, transparent);
	--perm-never-bg: var(--color-danger-muted);
}

[data-theme='dark'] {
	/* Lifted a little on the dark surfaces; white initials still ≥4.5:1. */
	--agent-blue: #3a74d0;
	--agent-violet: #7258c9;
	--agent-green: #23794d;
	--agent-amber: #97600a;
	--agent-rose: #c0406a;
	--agent-teal: #18767b;
	--agent-slate: #626c7a;
}

/* AgentThreadLayout: the thread's reading width on wide screens. */
:root {
	--agent-thread-max: 760px;
}

/* FileList: the size and modified columns, how long one breadcrumb part gets. */
:root {
	--file-size-width: 64px;
	--file-time-width: 56px;
	--file-crumb-max: 160px;
}


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

html,
body {
	margin: 0;
	background: var(--color-app);
	color: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--color-ink);
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

button:disabled,
button[aria-disabled='true'] {
	cursor: not-allowed;
	opacity: var(--opacity-disabled);
}

h1,
h2,
h3,
p {
	margin: var(--space-0);
}

:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

::selection {
	background: var(--color-accent-muted);
}

.num {
	font-variant-numeric: tabular-nums;
}

.mono {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
}

.muted {
	color: var(--color-muted);
}

.sr-only,
.sr-only-focusable:not(:focus-visible) {
	position: absolute;
	width: var(--space-1);
	height: var(--space-1);
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/*
 * Hidden until keyboard focus (a Close for sheets without a header): a tap
 * or click that opens the sheet focuses it without showing it.
 */
.sr-only-focusable:focus-visible {
	margin: var(--space-4) var(--space-8);
	padding: var(--space-2) var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	color: var(--color-ink);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Thin scrollbars inside components (menus, pickers, panels, chat, tables).
 * The page itself (html/body) keeps the native scrollbar.
 */
body * {
	scrollbar-width: thin;
	scrollbar-color: var(--color-scrollbar) transparent;
}
body *::-webkit-scrollbar {
	width: var(--scrollbar-size);
	height: var(--scrollbar-size);
}
body *::-webkit-scrollbar-track {
	background: transparent;
}
body *::-webkit-scrollbar-thumb {
	border-radius: var(--radius-full);
	background: var(--color-scrollbar);
}
body *::-webkit-scrollbar-thumb:hover {
	background: var(--color-scrollbar-hover);
}
body *::-webkit-scrollbar-corner {
	background: transparent;
}

/*
 * Links inside running text (messages, legal notes) are underlined: color
 * alone doesn't mark them (WCAG 1.4.1). Nav, rows and buttons stay plain.
 */
.md-link,
.auth-note a,
.consent-account a,
.ui-prose a {
	text-decoration: underline;
	text-underline-offset: var(--link-underline-offset);
}

/*
 * Windows High Contrast / forced colors: backgrounds and box-shadows that
 * carry state disappear. Selected and highlighted things take the system
 * highlight; focus uses a real outline.
 */
@media (forced-colors: active) {
	:focus-visible,
	.input:focus-visible,
	.search:focus-within,
	.composer-box:focus-within {
		outline: var(--border-width-strong) solid Highlight;
	}
	.nav-item.is-active,
	.sub-nav-item.is-active,
	.sub-nav-sub.is-active,
	.list-nav-item.is-on,
	.bottom-nav-item.is-active,
	.seg-item.is-on,
	.toggle.is-on,
	.drp-preset.is-on,
	.icon-btn.is-on,
	.menu-item:focus-visible,
	.palette-row.is-active,
	.app-switcher-row.is-active,
	.combobox-option.is-active,
	.fp-row.is-active,
	.mp-row.is-active,
	.sv-row.is-on,
	.dt-row.is-selected,
	.dt-row.is-focused,
	.bd-row.is-active,
	.calendar-day.is-selected {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}
	.tab.is-on {
		border-bottom-color: Highlight;
	}
	.dot,
	.route-progress-bar,
	.switch.is-on,
	.fp-check.is-on {
		forced-color-adjust: none;
		background: CanvasText;
	}
}


/* ./components/core.css */
/* Core primitives: Icon, Logo, Button, IconButton, StatusDot/StatusLabel, Avatar, AppIcon, Badge, Kbd, Meter, Chip. */

/* Icon */
.icon {
	flex-shrink: 0;
}
.icon-xs {
	width: var(--icon-xs);
	height: var(--icon-xs);
}
.icon-sm {
	width: var(--icon-sm);
	height: var(--icon-sm);
}
.icon-md {
	width: var(--icon-md);
	height: var(--icon-md);
}
.icon-accent {
	color: var(--color-accent-ink);
}

/* Button */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	height: var(--control-height);
	padding: var(--space-0) var(--space-8);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	/* The label's line is the font's own height: a taller one puts its spare
	   room under the text, so the words sat above the icon's centre. */
	line-height: normal;
	white-space: nowrap;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}
.btn-primary {
	gap: var(--space-4);
	padding: var(--space-0) var(--space-10);
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.btn-primary:hover:not(:disabled) {
	background: var(--color-accent-hover);
	color: var(--color-on-accent);
}
.btn-secondary {
	border-color: var(--color-border);
	background: var(--color-surface-2);
	color: var(--color-ink);
}
.btn-secondary:hover:not(:disabled) {
	background: var(--color-hover);
}
.btn-ghost {
	background: transparent;
	color: var(--color-muted);
}
.btn-ghost:hover:not(:disabled) {
	background: var(--color-hover);
	color: var(--color-ink);
}
.btn-danger {
	padding: var(--space-0) var(--space-10);
	background: var(--color-danger);
	color: var(--color-on-accent);
}
.btn-danger:hover:not(:disabled) {
	background: var(--color-danger-hover);
	color: var(--color-on-accent);
}

/* IconButton */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--icon-button-size);
	height: var(--icon-button-size);
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-sm);
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}
.icon-btn-ghost,
.icon-btn-subtle {
	background: transparent;
	color: var(--color-muted);
}
.icon-btn-subtle {
	background: var(--color-hover);
}
.icon-btn-ghost:hover:not(:disabled),
.icon-btn-subtle:hover:not(:disabled) {
	background: var(--color-hover);
	color: var(--color-ink);
}
/* Pressed reads apart from hover: the accent tint and ink. */
.icon-btn.is-on {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.icon-btn-primary {
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.icon-btn-primary:hover:not(:disabled) {
	background: var(--color-accent-hover);
}

/* StatusDot / StatusLabel */
.dot {
	display: inline-block;
	flex-shrink: 0;
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: var(--radius-full);
}
.dot-lg {
	width: var(--dot-size-lg);
	height: var(--dot-size-lg);
}
.dot-live {
	background: var(--color-live);
}
.dot-warn {
	background: var(--color-warn);
}
.dot-danger {
	background: var(--color-danger);
}
.dot-accent {
	background: var(--color-accent);
}
.dot-ink {
	background: var(--color-ink);
}
.dot-muted {
	background: var(--color-muted);
}
.dot-none {
	background: transparent;
}
/* EventDot: an event's category (identity, not status). */
.dot-event-pages {
	background: var(--color-cat-blue);
}
.dot-event-custom {
	background: var(--color-cat-violet);
}
.dot-event-engagement {
	background: var(--color-cat-aqua);
}
.dot-event-revenue {
	/* Money reads green; the same green as "live", which never sits in an event row. */
	background: var(--color-live);
}
.dot-event-media {
	background: var(--color-cat-magenta);
}
.dot-event-forms {
	background: var(--color-cat-orange);
}
.dot-event-system {
	background: var(--color-muted);
}
.dot-event-error {
	background: var(--color-danger);
}
.dot-event-emails {
	background: var(--color-cat-yellow);
}
.dot-ring {
	box-shadow: 0 0 0 var(--border-width-strong) var(--color-surface);
}
.dot-pulse {
	animation: dot-pulse var(--duration-pulse) ease-out infinite;
}
@keyframes dot-pulse {
	from {
		box-shadow: 0 0 0 0 var(--color-live-glow);
	}
	to {
		box-shadow: 0 0 0 var(--pulse-spread) transparent;
	}
}
.status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.status-strong {
	gap: var(--space-5);
	color: var(--color-ink);
}

/* Logo: the Loop and user/path; the word takes the text color, the mark and slash the brand color. */
.logo {
	display: block;
	flex-shrink: 0;
}
.logo-lockup.logo-sm {
	height: var(--logo-lockup-sm);
}
.logo-lockup.logo-md {
	height: var(--logo-lockup-md);
}
.logo-lockup {
	width: auto;
}
.logo-mark.logo-sm,
.logo-tile.logo-sm {
	width: var(--logo-sm);
	height: var(--logo-sm);
}
.logo-mark.logo-md,
.logo-tile.logo-md {
	width: var(--logo-md);
	height: var(--logo-md);
}
.logo-loop {
	stroke: var(--color-brand);
}
.logo-word {
	fill: currentColor;
}
.logo-slash {
	fill: var(--color-brand);
}
.logo-tile-bg {
	fill: var(--color-brand-tile);
}
.logo-tile .logo-loop {
	stroke: var(--color-on-brand-tile);
}

/* Avatar / AppIcon */
.avatar,
.app-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-weight: var(--font-weight-semibold);
	line-height: 1;
}
.avatar {
	position: relative;
	overflow: hidden;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--font-size-2xs);
}
/* Their picture over the initials; hidden until it has loaded. */
.avatar-img {
	position: absolute;
	inset: var(--space-0);
	width: 100%;
	height: 100%;
	object-fit: cover;
	visibility: hidden;
}
.avatar-img.is-loaded {
	visibility: visible;
}
.avatar-sm {
	width: var(--avatar-sm);
	height: var(--avatar-sm);
}
.avatar-md {
	width: var(--avatar-md);
	height: var(--avatar-md);
}
.avatar-lg {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-color: transparent;
	font-size: var(--font-size-avatar-lg);
}
.avatar-known {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.avatar-neutral {
	background: var(--color-surface-2);
	color: var(--color-ink);
}
.avatar-anonymous {
	background: var(--color-surface-2);
	color: var(--color-muted);
}
.app-icon {
	border-radius: var(--radius-md);
	font-size: var(--font-size-xs);
}
.app-icon-sm {
	width: var(--logo-sm);
	height: var(--logo-sm);
}
.app-icon-md {
	width: var(--logo-md);
	height: var(--logo-md);
}
.app-icon {
	position: relative;
	overflow: hidden;
}
/* The site's icon on a quiet tile; hidden until it has loaded (the letter shows meanwhile). */
.app-icon-image {
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface-2);
}
.app-icon-img {
	position: absolute;
	inset: var(--space-2);
	width: calc(100% - var(--space-4));
	height: calc(100% - var(--space-4));
	object-fit: contain;
	visibility: hidden;
}
.app-icon-img.is-loaded {
	visibility: visible;
}
.app-icon-accent {
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.app-icon-inverse {
	background: var(--color-ink);
	color: var(--color-surface);
}
.app-icon-neutral {
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface-2);
	color: var(--color-ink);
}

/* Badge */
.badge {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: var(--badge-height);
	padding: var(--space-0) var(--space-6);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}
.badge-accent {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.badge-neutral {
	border-color: var(--color-border);
	color: var(--color-muted);
}
.badge-danger {
	background: var(--color-danger-muted);
	color: var(--color-danger-ink);
}
.badge-warn {
	background: var(--color-warn-muted);
	color: var(--color-warn-ink);
}

/* Kbd */
.kbd {
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}

/* Meter */
.meter {
	display: flex;
	width: 100%;
	border-radius: var(--radius-full);
	background: var(--color-hover);
	overflow: hidden;
}
.meter-sm {
	height: var(--meter-sm);
}
.meter-md {
	height: var(--meter-md);
}
.meter-fill {
	border-radius: var(--radius-full);
}
.meter-accent .meter-fill {
	background: var(--color-accent);
}
.meter-muted .meter-fill {
	background: var(--color-muted);
}

/* Chip */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	height: var(--control-height-sm);
	padding: var(--space-0) var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	font-size: var(--font-size-xs);
	white-space: nowrap;
}
.chip-sm {
	height: var(--control-height-xs);
}
.chip-removable {
	padding: var(--space-0) var(--space-4) var(--space-0) var(--space-7);
}
.chip-label {
	color: var(--color-muted);
}
.chip-remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--chip-remove-size);
	height: var(--chip-remove-size);
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
}
/* The 16px button gets a 24px hit area. */
.chip-remove::before {
	content: '';
	position: absolute;
	inset: calc((var(--chip-remove-size) - var(--target-min)) / 2);
}
.chip-remove:hover {
	background: var(--color-hover);
	color: var(--color-ink);
}
.chip-icon {
	flex-shrink: 0;
	color: var(--color-muted);
}
/* A mark in front instead of an icon (the network a contact is on). */
.chip-leading {
	display: inline-flex;
	flex-shrink: 0;
}
.chip.has-icon {
	padding-left: var(--space-4);
}
/* A whole-chip toggle or link (the GitHub pill in Ask). */
.chip-action {
	color: var(--color-ink);
	cursor: pointer;
	transition:
		background var(--duration-fast),
		border-color var(--duration-fast);
}
.chip-action:hover {
	background: var(--color-hover);
	color: var(--color-ink);
}
.chip-action.is-on {
	border-color: var(--color-accent);
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.chip-action.is-on .chip-icon {
	color: var(--color-accent-ink);
}
/* The one that matters in a set (the app among an answer's brands). */
.chip.is-accent {
	border-color: var(--color-accent);
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.chip.is-accent .chip-label,
.chip.is-accent .chip-icon {
	color: var(--color-accent-ink);
}
/* A suggestion not taken yet (Ask's phrases): dashed and muted, like the add button. */
.chip.is-suggested {
	border-style: dashed;
	background: transparent;
	color: var(--color-muted);
}
.chip-action.is-suggested:hover {
	border-color: var(--color-muted);
	background: transparent;
	color: var(--color-ink);
}
.chip-action.is-suggested:hover .chip-icon {
	color: var(--color-ink);
}

/* Shortcut */
.shortcut {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
}
.shortcut-step {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.shortcut-then {
	margin-right: var(--space-2);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.shortcut-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--kbd-size);
	height: var(--kbd-size);
	padding: var(--space-0) var(--space-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	font-family: var(--font-ui);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	color: var(--color-muted);
}

/* Popover */
/* An empty chart keeps the plot's height (set inline), its message centered. */
.chart-empty {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* A stat's change line with something beside it ("▲ 4% from 1,084 · ● 3 live"). */
.stat-line {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-8);
}
/* One line, one thing at each end: a secondary link and "Open …". */
.split-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	min-width: 0;
}
/* Hint: a muted question mark after a number that opens a short explanation. */
.hint-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-inline-start: var(--space-6);
	padding: calc(var(--space-4) / 2);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--color-muted);
	cursor: pointer;
}
/* The 16px button gets a 24px hit area (taps on phones). */
.hint-trigger::before {
	content: '';
	position: absolute;
	inset: calc((var(--icon-sm) + var(--space-4) - var(--target-min)) / 2);
}
/* After a panel title: right beside it, the meta and actions stay on the right. */
.panel-title.has-hint {
	flex-grow: 0;
}
.panel-header > .hint-trigger {
	margin-inline: calc(var(--space-6) - var(--space-12)) auto;
}
/* After a column header: closer, and the same small caps colour until hovered. */
.dt-head .hint-trigger {
	margin-inline-start: var(--space-2);
}
.hint-metric {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-0) var(--space-4);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.hint-metric + .hint-metric {
	margin-inline-start: var(--space-4);
}
/* A row of metrics (Inline): its gap spaces them, and the first one's icon
   lines up with the text above and below instead of sitting in its padding. */
.inline > .hint-metric + .hint-metric {
	margin-inline-start: var(--space-0);
}
.inline > .hint-metric:first-child {
	margin-inline-start: calc(var(--space-4) * -1);
}
.hint-metric.is-static {
	cursor: inherit;
}
button.hint-metric:hover,
.hint-metric[aria-expanded='true'] {
	background: var(--color-hover);
	color: var(--color-ink);
}
.hint-trigger:hover,
.hint-trigger[aria-expanded='true'] {
	background: var(--color-hover);
	color: var(--color-ink);
}
.hint-body {
	max-width: var(--hint-max-width);
	padding: var(--space-12);
	font-size: var(--font-size-sm);
	color: var(--color-ink);
}
.hint-body p + p {
	margin-top: var(--space-8);
}
.hint-body a {
	color: var(--hint-link);
	text-decoration: none;
}
.hint-body a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: var(--link-underline-offset);
}
.popover {
	position: fixed;
	z-index: var(--z-popover);
	min-width: var(--popover-min-width);
	max-height: var(--popover-max-height);
	overflow: auto;
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	box-shadow: var(--shadow-popover);
	outline: var(--border-width-strong) solid transparent;
	animation: popover-in var(--duration-fast) var(--ease-out);
}
@keyframes popover-in {
	from {
		opacity: var(--opacity-hidden);
		transform: translateY(calc(var(--space-4) * -1));
	}
}
.popover[data-placement^='top'] {
	animation-name: popover-in-up;
}
@keyframes popover-in-up {
	from {
		opacity: var(--opacity-hidden);
		transform: translateY(var(--space-4));
	}
}
.popover-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--z-popover);
	background: var(--color-backdrop);
	animation: fade-in var(--duration-base) var(--ease-out);
}
@keyframes fade-in {
	from {
		opacity: var(--opacity-hidden);
	}
}
.popover.popover-sheet {
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	max-height: var(--sheet-max-height);
	padding-bottom: var(--safe-bottom);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	animation: sheet-in var(--duration-base) var(--ease-out);
}
@keyframes sheet-in {
	from {
		transform: translateY(100%);
	}
}

/* Menu */
.menu-popover.is-wide {
	min-width: var(--popover-wide-width);
}
.menu {
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
}
.menu-item {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	min-height: var(--row-height-nav);
	padding: var(--space-0) var(--space-8) var(--space-0) var(--space-6);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: var(--font-size-sm);
	text-align: left;
	color: var(--color-ink);
}
.menu-item:hover:not(:disabled),
.menu-item:focus-visible {
	outline: var(--border-width-strong) solid transparent;
	background: var(--color-hover);
}
.menu-item:focus-visible {
	box-shadow: var(--focus-bar);
}
.menu-item.is-danger {
	color: var(--color-danger-ink);
}
.menu-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--icon-md);
	color: var(--color-muted);
}
.menu-item.is-danger .menu-item-icon {
	color: var(--color-danger-ink);
}
/* A checkable item's mark: the check keeps the icon's place. */
.menu-item-leading {
	display: inline-flex;
	flex-shrink: 0;
}
.menu-item-label {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.menu-item-hint {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* A menu of described items keeps a fixed width; descriptions wrap under their label. */
.menu-popover:has(.menu-item.has-description) {
	width: var(--menu-described-width);
}
/* Label over a description: taller rows, icon and hint on the first line. */
.menu-item.has-description {
	align-items: flex-start;
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}
.menu-item.has-description :is(.menu-item-icon, .menu-item-hint) {
	display: inline-flex;
	align-items: center;
	height: calc(var(--font-size-sm) * var(--leading-base));
}
.menu-item-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-1);
	min-width: 0;
}
.menu-item-description {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* Tokens under the label (an audience's rules): a wider menu, a line apart. */
.menu-popover:has(.menu-item.has-detail) {
	width: var(--menu-detailed-width);
}
.menu-item-text:has(> .menu-item-detail) {
	gap: var(--space-4);
}
.menu-item-detail {
	display: flex;
	min-width: 0;
}
.menu-separator {
	height: var(--border-width);
	margin: var(--space-4) var(--space-0);
	background: var(--color-border);
}
.menu-label {
	padding: var(--space-6) var(--space-8) var(--space-4);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}

/* Tooltip */
.tooltip-anchor {
	display: inline-flex;
}
/* No box of its own: the child keeps its place in the parent's layout. */
.tooltip-anchor.is-contents {
	display: contents;
}
.tooltip {
	position: fixed;
	z-index: var(--z-tooltip);
	display: flex;
	align-items: center;
	gap: var(--space-8);
	max-width: var(--tooltip-max-width);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-sm);
	background: var(--color-ink);
	color: var(--color-surface);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	animation: fade-in var(--duration-fast) var(--ease-out);
}
.tooltip-hint {
	color: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.tooltip .shortcut-key {
	border-color: transparent;
	background: color-mix(in srgb, var(--color-surface) 18%, transparent);
	color: var(--color-surface);
}

/* ---------- HScroll ---------- */
.hscroll {
	/* Room an arrow takes at a clipped edge: the content is hidden under it and fades in past it (none on touch). */
	--hscroll-arrow-room: var(--space-0);
	position: relative;
	min-width: 0;
}
.hscroll-track {
	display: flex;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.hscroll-track::-webkit-scrollbar {
	display: none;
}
/* Fade whichever edge still hides items: hidden under its arrow, then fading in. */
.hscroll.can-start .hscroll-track {
	mask-image: linear-gradient(
		90deg,
		transparent var(--hscroll-arrow-room),
		var(--color-ink) calc(var(--hscroll-arrow-room) + var(--hscroll-fade))
	);
}
.hscroll.can-end .hscroll-track {
	mask-image: linear-gradient(
		90deg,
		var(--color-ink)
			calc(100% - var(--hscroll-arrow-room) - var(--hscroll-fade)),
		transparent calc(100% - var(--hscroll-arrow-room))
	);
}
.hscroll.can-start.can-end .hscroll-track {
	mask-image: linear-gradient(
		90deg,
		transparent var(--hscroll-arrow-room),
		var(--color-ink) calc(var(--hscroll-arrow-room) + var(--hscroll-fade)),
		var(--color-ink)
			calc(100% - var(--hscroll-arrow-room) - var(--hscroll-fade)),
		transparent calc(100% - var(--hscroll-arrow-room))
	);
}
/* ‹ › over a clipped edge's fade, above the row (its mask makes it a layer of its own). */
.hscroll-arrow {
	display: none;
	position: absolute;
	top: 50%;
	z-index: var(--z-raised);
	width: var(--hscroll-arrow-size);
	height: var(--hscroll-arrow-size);
	transform: translateY(-50%);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	color: var(--color-ink);
}
.hscroll-arrow-start {
	left: 0;
}
.hscroll-arrow-end {
	right: 0;
}
/* The arrows are for a mouse or trackpad; touch swipes the row. */
@media (hover: hover) and (pointer: fine) {
	.hscroll {
		--hscroll-arrow-room: calc(var(--hscroll-arrow-size) + var(--space-4));
	}
	.hscroll-arrow {
		display: inline-flex;
	}
}

/* A whole-screen wait (Contact support's screenshot): a small box in the middle, the page left as it is. */
.screen-busy {
	position: fixed;
	inset: var(--space-0);
	z-index: var(--z-toast);
	display: grid;
	place-items: center;
	pointer-events: none;
}
.screen-busy-box {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-10) var(--space-16);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-popover);
	font-size: var(--font-size-sm);
	color: var(--color-ink);
}


/* ./components/shell.css */
/* Shell and navigation. Tokens only: see tokens/core.css and tokens/shell.css. */

/* AppShell */
/*
 * The shell is a size container (`shell`): the frame, the top bar and the
 * bottom nav respond to its width in components/mobile.css. Page content is a
 * container too, so grids and strips respond to the space they actually get.
 */
.app-shell {
	container: shell / inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-app);
	color: var(--color-ink);
}
.app-shell-frame {
	/* The sidebar's column: the rail width on tablets (mobile.css, unless `.is-full`) and when collapsed. */
	--shell-sidebar-column: var(--sidebar-width);
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: var(--shell-sidebar-column) minmax(0, 1fr);
	min-height: var(--viewport-height);
}
.app-shell.is-rail .app-shell-frame {
	--shell-sidebar-column: var(--sidebar-rail-width);
}
/*
 * A size container (`sidebar`): the sidebar shows icons only whenever its
 * column is rail-narrow (mobile.css). Above the page's sticky bars, so the
 * edge handle can sit over the border; the sidebar scrolls inside, so the
 * handle isn't clipped.
 */
.app-shell-sidebar {
	container: sidebar / inline-size;
	position: sticky;
	top: 0;
	z-index: var(--z-sidebar);
	align-self: start;
	height: var(--viewport-height);
	min-width: 0;
}
.app-shell-sidebar > .sidebar {
	height: 100%;
	overflow-y: auto;
}
/* A docked panel (Ask): its own column, pinned while the page scrolls. */
.app-shell-frame.has-aside {
	grid-template-columns: var(--shell-sidebar-column) minmax(0, 1fr) auto;
}
.app-shell-aside {
	position: sticky;
	top: 0;
	display: flex;
	align-self: start;
	height: var(--viewport-height);
	min-width: 0;
}
/* A container, so the bars and content compact by the width they actually get (not the shell's, which includes the sidebar). */
.app-main {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.page-content {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-16) var(--page-gutter);
}

/* Contained: fill the parent and scroll inside (previews, embedded frames). */
.app-shell.is-contained {
	height: 100%;
	overflow: hidden;
}
.app-shell.is-contained .app-shell-frame {
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
}
.app-shell.is-contained .app-shell-sidebar {
	align-self: stretch;
	height: auto;
}
.app-shell.is-contained .app-main {
	overflow-y: auto;
}
.app-shell.is-contained .app-shell-aside {
	align-self: stretch;
	height: auto;
	min-height: 0;
}
.shell-layer {
	position: absolute;
	inset: 0;
	z-index: var(--z-drawer);
	pointer-events: none;
}
.shell-layer > * {
	pointer-events: auto;
}

/* Sidebar edge: the collapse handle (AppShell `onSidebarModeChange`). A strip
 * centered on the border; the grip shows on hover or keyboard focus. Phones
 * hide the whole column (the drawer takes over), handle included. */
.sidebar-edge {
	position: absolute;
	top: 0;
	right: calc(var(--sidebar-edge-hit) / -2);
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sidebar-edge-hit);
	padding: var(--space-0);
	border: none;
	background: transparent;
	color: var(--color-muted);
	cursor: pointer;
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast) var(--ease-out);
}
/* The border lights up along its length. */
.sidebar-edge::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - var(--border-width-strong) / 2);
	width: var(--border-width-strong);
	background: var(--color-focus);
}
.sidebar-edge:hover,
.sidebar-edge:focus-visible {
	opacity: var(--opacity-full);
}
.sidebar-edge:hover {
	color: var(--color-ink);
}
.sidebar-edge:focus-visible {
	outline: none;
}
.sidebar-edge-grip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sidebar-edge-grip-width);
	height: var(--sidebar-edge-grip-height);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	box-shadow: var(--shadow-popover);
}
.sidebar-edge:focus-visible .sidebar-edge-grip {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

/* Sidebar */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--space-8);
	border-right: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.sidebar-spacer {
	flex-grow: 1;
}
.switcher {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	height: var(--switcher-height);
	margin-bottom: var(--space-10);
	padding: var(--space-0) var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
}
a.switcher:hover {
	border-color: var(--color-muted);
}
.switcher-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}
.switcher-name {
	font-weight: var(--font-weight-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.switcher-chevron {
	color: var(--color-muted);
}
.nav-item {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-8);
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-muted);
	text-align: left;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}
.nav-item:hover {
	background: var(--color-hover);
	color: var(--color-ink);
}
.nav-item.is-active {
	background: var(--color-hover);
	color: var(--color-ink);
	font-weight: var(--font-weight-medium);
}
.nav-item.is-active .nav-item-icon {
	color: var(--color-accent-ink);
}
.nav-item-label {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nav-item-meta {
	min-width: var(--nav-meta-min);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--color-muted);
	text-align: right;
}
/* NavItem's dot (Computer while it's awake): at the row's end, its right edge on the counts' own. */
.nav-item-dot {
	margin-right: var(--space-0);
}
.nav-palette {
	margin-bottom: var(--space-8);
}
.nav-ask {
	margin-bottom: var(--space-4);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface-2);
	color: var(--color-ink);
}
.user-card {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-top: var(--space-6);
	padding: var(--space-10) var(--space-8) var(--space-2);
	border-top: var(--border-width) solid var(--color-border);
}
.user-card-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.user-card-name {
	font-weight: var(--font-weight-medium);
}
.user-card-role {
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.usage-meter {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-bottom: var(--space-6);
	padding: var(--space-10) var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
}
.usage-meter-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
}

/* TopBar */
.top-bar {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	gap: var(--space-12);
	flex-shrink: 0;
	height: var(--topbar-height);
	padding: var(--space-0) var(--page-gutter);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.top-bar-title {
	display: flex;
	align-items: center;
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
}
.crumbs {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
}
/* The nav only groups the parents for screen readers; they stay flex items of .crumbs. */
.crumbs-trail {
	display: contents;
}
.crumbs-link,
.crumbs-sep {
	color: var(--color-muted);
	white-space: nowrap;
}
/* Parent crumbs give way long before the page title does, down to a readable stub ("Us…"); a label shorter than the stub keeps its own width. */
.crumbs-link {
	flex: 0 10 auto;
	min-width: min(
		var(--crumb-link-min-width),
		calc(var(--crumb-chars, 99) * var(--crumb-char-min-width))
	);
	overflow: hidden;
	text-overflow: ellipsis;
}
.crumbs-sep {
	flex-shrink: 0;
}
/* The title keeps a readable floor, capped at its own (estimated) width so short titles reserve nothing extra. */
.crumbs-title {
	min-width: min(
		var(--crumb-title-min-width),
		calc(var(--crumb-title-chars) * var(--crumb-char-min-width))
	);
}
a.crumbs-link:hover {
	color: var(--color-ink);
}
.crumbs-title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.top-bar-status {
	display: flex;
	min-width: 0;
}
.top-bar-actions,
.top-bar-overflow {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	flex-shrink: 0;
}
.top-bar-overflow {
	gap: var(--space-8);
}
.top-bar-menu,
.top-bar-more,
.period-compact {
	display: none;
}
/* Icon-only buttons at the bar's edges line up by their glyph, like the text and bordered controls around them. */
.top-bar-menu {
	margin-left: calc(var(--icon-button-inset) * -1);
}
.top-bar-more,
.top-bar-actions > .refresh:last-child {
	margin-right: calc(var(--icon-button-inset) * -1);
}
.period-control {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}
.period {
	display: inline-flex;
}
/* The range reads first, next to the data age: "Updated just now · Last 7 days · 24h 7d …". */
.period-range {
	display: inline-flex;
	order: -1;
}
/* Refresh glyph to "Last 7 days" reads like "days ⌄" to the quick periods:
 * take back the ghost button's padding and the icon button's inset. */
.refresh + .period-control {
	margin-left: calc((var(--space-8) + var(--icon-button-inset)) * -1);
}
/* Below desktop width the top bar keeps only what it must. */
@container (max-width: 1023px) {
	/* Folded away, the bordered quick periods come first: normal spacing again. */
	.refresh + .period-control:not(.is-custom) {
		margin-left: 0;
	}
	/* Folded away, it stays after the quick periods: the calendar then opens under their end. */
	.period-control:not(.is-custom) .period-range {
		order: 0;
		width: 0;
		overflow: hidden;
		visibility: hidden;
	}
	.compare-toggle-label {
		position: absolute;
		width: var(--space-1);
		height: var(--space-1);
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
.header-status {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin-left: var(--space-10);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}
.header-status a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: var(--space-2);
}
.header-status a:hover {
	color: var(--color-ink);
}
.header-status-open {
	padding: var(--space-0);
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: var(--space-2);
	cursor: pointer;
}
.header-status-open:hover {
	color: var(--color-ink);
}

/* Toolbars */
.toolbar {
	display: flex;
	align-items: center;
	gap: var(--toolbar-gap);
	flex-shrink: 0;
	height: var(--toolbar-height);
	padding: var(--space-0) var(--page-gutter);
	border-bottom: var(--border-width) solid var(--color-border);
}
/* Filters stay one row: the chips scroll sideways (HScroll) and the note keeps its place. */
.filter-bar {
	gap: var(--space-12);
}
.filter-bar-scroll {
	flex: 1 1 auto;
}
.filter-bar-items {
	gap: var(--space-6);
}
.filter-bar-items > *,
.filter-bar .fp-picker > * {
	flex-shrink: 0;
}
.filter-bar .fp-picker {
	flex-wrap: nowrap;
}
.page-toolbar {
	height: var(--page-toolbar-height);
}
/* The tabs' strip (and its ›) keeps clear of the controls after it. */
.page-toolbar > .toolbar-spacer {
	min-width: calc(var(--toolbar-tabs-gap) - 2 * var(--toolbar-gap));
}
/* One shape for a page toolbar's controls: chips and the add button take the search box's height and padding, so they line up. */
.page-toolbar .chip,
.page-toolbar .add-btn-chip {
	height: var(--control-height);
}
.page-toolbar .chip {
	gap: var(--space-6);
}
.page-toolbar .chip:not(.chip-removable),
.page-toolbar .add-btn-chip {
	padding: var(--space-0) var(--space-8);
}
.toolbar-hint {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.toolbar-spacer {
	flex-grow: 1;
}
.toolbar-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-5);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}
.toolbar-trailing {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
}
/* A note that renders nothing (no bot hits) takes no room or gap. */
.toolbar-trailing:empty {
	display: none;
}
.toolbar-link:hover {
	color: var(--color-ink);
}

/* Panel */
.panel {
	min-width: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.panel-flush {
	overflow: hidden;
}
.panel-padded {
	padding: var(--space-0) var(--space-16) var(--space-12);
}
.panel-breakdown {
	padding: var(--space-0) var(--space-12) var(--space-10);
}
.panel-breakdown > .panel-header {
	padding: var(--space-0) var(--space-4);
}
.panel-body {
	padding: var(--space-12) var(--space-16);
}
.panel-header {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	height: var(--panel-header-height);
}
.panel-header.is-bordered {
	padding: var(--space-0) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
}
.panel-title {
	flex: 1 0 auto;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* A note that runs long cuts off instead of pushing the header's controls out
   (narrow screens); explanations belong in the hint. */
.panel-meta {
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* SplitView */
.split {
	display: grid;
	flex-grow: 1;
	min-height: 0;
}
.split-main {
	min-width: 0;
}
.split-list {
	grid-template-columns: var(--split-list-width) minmax(0, 1fr);
}
.split-list > .split-aside {
	border-right: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.split-list > .split-main {
	padding: var(--space-16) var(--space-20);
}
.split-nav {
	grid-template-columns: var(--split-nav-width) minmax(0, 1fr);
}
.split-nav > .split-aside {
	padding: var(--space-16) var(--space-10);
	border-right: var(--border-width) solid var(--color-border);
}
/* The settings nav stays under the top bar while the page scrolls; a long one scrolls itself (its padding keeps focus rings unclipped). */
.split-nav > .split-aside > .sub-nav-frame {
	position: sticky;
	top: var(--settings-nav-sticky-top);
	max-height: calc(
		var(--viewport-height) - var(--settings-nav-sticky-top) - var(--space-12)
	);
	margin: calc(var(--space-4) * -1);
	padding: var(--space-4);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.split-nav > .split-main {
	max-width: var(--settings-content-max);
	padding: var(--space-28) var(--space-32) var(--settings-bottom-space);
}
.split-inspector {
	grid-template-columns: minmax(0, 1fr) var(--split-inspector-width);
	gap: var(--space-24);
	padding: var(--space-20) var(--space-24);
}
/* One row exactly as tall as the window under the top bar: each column
   scrolls inside it, so a long thread can't push the page past the window. */
.split-panel {
	grid-template-columns: minmax(0, 1fr) var(--split-panel-width);
	grid-template-rows: minmax(0, 1fr);
	height: calc(var(--viewport-height) - var(--topbar-height));
}
.split-panel > .split-main,
.split-panel > .split-aside {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.split-panel > .split-aside {
	border-left: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
@container (max-width: 1023px) {
	.split-panel {
		grid-template-columns: minmax(0, 1fr) var(--split-panel-width-narrow);
	}
}
.split-rail {
	grid-template-columns: var(--split-rail-width) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	height: calc(var(--viewport-height) - var(--topbar-height));
}
.split-rail > .split-aside {
	padding: var(--space-12) var(--space-8);
	border-right: var(--border-width) solid var(--color-border);
	overflow-y: auto;
}
.split-rail > .split-main {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
/* An empty state in the rail's main area: a card in the middle, not a band on top. */
.split-rail > .split-main > .empty-state {
	margin: auto;
}
/* A panel split inside the rail takes the rail's height, not the window's. */
.split-rail > .split-main > .split-panel {
	height: 100%;
}

/* SectionHeading */
.section-heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.section-heading.is-divided {
	padding-top: var(--section-divider-gap);
	border-top: var(--border-width) solid var(--color-border);
}
.section-heading-lg .section-heading-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
}
.section-heading-md .section-heading-title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.section-heading-desc {
	color: var(--color-muted);
	line-height: var(--leading-prose);
}

/* SegmentedControl */
.seg {
	display: inline-flex;
	flex-shrink: 0;
	width: fit-content;
	height: var(--control-height);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	overflow: hidden;
}
.seg-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-0) var(--space-9);
	border: none;
	background: transparent;
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}
.seg-item + .seg-item {
	border-left: var(--border-width) solid var(--color-border);
}
.seg-item:hover {
	color: var(--color-ink);
}
.seg-item.is-on {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
/* Can't be chosen here; with a reason it shows a lock and opens why. */
.seg-item.is-disabled,
.seg-item.is-disabled:hover {
	color: var(--seg-disabled-ink);
}
.seg-item.is-disabled:not([aria-haspopup]) {
	cursor: not-allowed;
}
.seg-item.is-disabled > .network-mark {
	opacity: var(--opacity-disabled);
}
.seg-lock {
	color: var(--color-muted);
}
.seg-item.is-disabled[aria-expanded='true'] {
	background: var(--color-hover);
}

/* Tabs: the strip is an HScroll's row (scrolling, fades, ‹ ›); its wrapper is what a toolbar or header lays out. */
.tabs-scroll {
	display: flex;
	align-self: stretch;
}
.tabs {
	/* Holds a count's screen-reader words: scrolled out of view, they stay inside instead of widening the page. */
	position: relative;
	display: flex;
	align-items: stretch;
	min-width: 0;
}
.tabs-scroll > .tabs {
	flex: 1 1 auto;
}
/* A scrolling strip clips focus rings drawn outside: draw them inside. */
.tabs .tab:focus-visible {
	outline-offset: calc(-1 * var(--focus-width));
}
.tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-0);
	border: none;
	border-bottom: var(--tab-underline) solid transparent;
	background: transparent;
	color: var(--color-muted);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}
.tab:hover {
	color: var(--color-ink);
}
.tab.is-on {
	border-bottom-color: var(--color-accent);
	color: var(--color-ink);
}
.tab-count {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--color-muted);
}
.tabs-panel {
	gap: var(--space-12);
	align-self: stretch;
}
.tabs-panel .tab {
	padding: var(--space-10) var(--space-0) var(--space-9);
	font-size: var(--font-size-xs);
}
.tabs-page {
	gap: var(--space-18);
	align-self: stretch;
}
.tabs-page .tab {
	height: var(--tab-height-page);
	font-size: var(--font-size-sm);
}
.tabs-boxed {
	gap: var(--space-16);
	padding: var(--space-0) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.tabs-boxed .tab {
	height: var(--tab-height-boxed);
	font-size: var(--font-size-xs);
}

/* SubNav: a column; its HScroll row only scrolls on a phone (mobile.css), so here nothing clips the focus rings. */
.sub-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
	overflow: visible;
}
.sub-nav-item {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-10);
	border-radius: var(--radius-md);
	color: var(--color-muted);
}
.sub-nav-item:hover {
	background: var(--color-hover);
}
.sub-nav-item.is-active {
	background: var(--color-hover);
	color: var(--color-ink);
	font-weight: var(--font-weight-medium);
}
.sub-nav-item.is-danger,
.sub-nav-item.is-danger:hover {
	color: var(--color-danger-ink);
}
.sub-nav-item > .icon {
	flex-shrink: 0;
}
.sub-nav-group {
	padding: var(--space-10) var(--space-10) var(--space-4);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.sub-nav-group:first-child {
	padding-top: var(--space-0);
}
/* The current section's groups: indented on a hairline under its icon. */
.sub-nav-outline {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: var(--space-2) var(--space-0) var(--space-6)
		calc(var(--space-10) + var(--icon-md) / 2);
	padding-left: var(--space-6);
	border-left: var(--border-width) solid var(--color-border);
}
.sub-nav-sub {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
	height: var(--row-height-nav-sub);
	padding: var(--space-0) var(--space-6);
	border-radius: var(--radius-md);
	color: var(--color-muted);
}
.sub-nav-sub:hover {
	background: var(--color-hover);
	color: var(--color-ink);
}
.sub-nav-sub > .icon {
	flex-shrink: 0;
}
.sub-nav-sub-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sub-nav-sub.is-active {
	color: var(--color-ink);
	font-weight: var(--font-weight-medium);
}

/* ListNav */
.list-nav {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.list-nav-header {
	padding: var(--space-10) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.list-nav-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-8) var(--space-8);
	overflow-y: auto;
}
.list-nav-label {
	padding: var(--space-8) var(--space-8) var(--space-4);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.list-nav-item {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-8);
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-ink);
	text-align: left;
}
.list-nav-item:hover {
	background: var(--color-hover);
}
.list-nav-item.is-on {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.list-nav-text {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list-nav-count {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.list-nav-empty {
	padding: var(--space-12) var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* LinkAction */
.link-action {
	display: inline;
	padding: var(--space-0);
	border: none;
	background: transparent;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}
/* A long link cuts off at its container's width; in a wrapping row it takes a line of its own first. */
.link-action.is-truncated {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
}
.link-action-accent,
.link-action-accent:hover {
	color: var(--color-accent-ink);
}
.link-action-accent:hover {
	text-decoration: underline;
}
.link-action-muted {
	color: var(--color-muted);
	font-weight: var(--font-weight-regular);
}
.link-action-muted:hover {
	color: var(--color-ink);
}

/* Skip link: off screen until it has keyboard focus. */
.skip-link {
	position: absolute;
	top: var(--space-8);
	left: var(--space-8);
	z-index: var(--z-toast);
	padding: var(--space-6) var(--space-10);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	color: var(--color-ink);
	font-size: var(--font-size-sm);
	box-shadow: var(--shadow-popover);
	transform: translateY(-200%);
}
.skip-link:focus {
	transform: none;
}
.app-main:focus {
	outline: var(--border-width-strong) solid transparent;
}


/* ./components/controls.css */
/* Controls and feedback: Switch, CompareToggle, TextInput, Textarea, Select, SearchInput,
 * PickerButton, Field, FieldGrid, CopyField, AddButton, StepCard, StepBuilder, Callout,
 * EmptyState, Settings (page, group, row), DraftButton, SnoozePicker. Tokens only: see
 * tokens/controls.css. */

/* Switch */
.switch {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: var(--switch-inset);
	border: none;
	border-radius: var(--radius-full);
	background: var(--switch-off-track);
	transition: background var(--duration-fast);
}
.switch-md {
	width: var(--switch-md-width);
	height: var(--switch-md-height);
}
.switch-sm {
	width: var(--switch-sm-width);
	height: var(--switch-sm-height);
}
.switch-thumb {
	display: block;
	border-radius: var(--radius-full);
	background: var(--color-on-accent);
	transition: transform var(--duration-fast);
}
.switch-md .switch-thumb {
	width: var(--switch-md-thumb);
	height: var(--switch-md-thumb);
}
.switch-sm .switch-thumb {
	width: var(--switch-sm-thumb);
	height: var(--switch-sm-thumb);
}
.switch.is-on {
	background: var(--color-accent);
}
.switch-md.is-on .switch-thumb {
	transform: translateX(
		calc(
			var(--switch-md-width) - var(--switch-md-thumb) - 2 * var(--switch-inset)
		)
	);
}
.switch-sm.is-on .switch-thumb {
	transform: translateX(
		calc(
			var(--switch-sm-width) - var(--switch-sm-thumb) - 2 * var(--switch-inset)
		)
	);
}
.switch-field {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}
.switch-field.is-off .switch-label {
	color: var(--color-muted);
}
.switch-field > .switch-sm {
	position: relative;
	top: var(--switch-sm-optical-offset);
}

/* TextInput / Textarea */
.input,
.textarea-field,
.select select,
.search,
.picker-field,
.copy-field-value {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	transition:
		border-color var(--duration-fast),
		box-shadow var(--duration-fast);
}
.input {
	height: var(--control-height);
	padding: var(--space-0) var(--space-8);
	font-size: var(--font-size-sm);
}
.input::placeholder,
.textarea::placeholder,
.search input::placeholder {
	color: var(--color-muted);
}
.input:focus-visible,
.textarea-field:focus-visible,
.select select:focus-visible,
.search:focus-within,
.picker-field:focus-visible {
	outline: var(--border-width-strong) solid transparent;
	border-color: var(--color-accent);
	box-shadow: var(--input-focus-ring);
}
.input[aria-invalid='true'],
.textarea[aria-invalid='true'],
.select select[aria-invalid='true'] {
	border-color: var(--color-danger);
}
.input:disabled,
.textarea:disabled,
.select select:disabled,
.search input:disabled {
	cursor: not-allowed;
	opacity: var(--opacity-disabled);
}
.is-mono {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
}
.input-w-sm {
	width: var(--field-width-sm);
}
.input-w-md {
	width: var(--field-width-md);
}
.input-w-lg {
	width: var(--field-width-lg);
}
.input-w-xl {
	width: var(--field-width-xl);
}
.input-w-full {
	width: 100%;
}
.input-w-fit {
	width: auto;
}
.select.input-w-fit select {
	width: auto;
}
/* Clearable TextInput: the box takes the width; the × sits inside its right edge. */
.input-box {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	vertical-align: middle;
}
.input-box > .input {
	width: 100%;
	min-width: 0;
}
.input-box.has-clear > .input {
	padding-right: var(--input-clear-space);
}
.input-box > .input-clear {
	position: absolute;
	right: var(--input-clear-inset);
}
.input-clear {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--target-min);
	height: var(--target-min);
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
	cursor: pointer;
	touch-action: manipulation;
}
.input-clear:hover {
	color: var(--color-ink);
}
/* Our × replaces the browser's own clear button on search fields. */
.input[type='search']::-webkit-search-cancel-button,
.search input::-webkit-search-cancel-button {
	display: none;
	appearance: none;
}
.textarea {
	display: block;
	width: 100%;
	resize: none;
	font-size: var(--font-size-sm);
	line-height: var(--leading-prose);
}
.textarea-field {
	padding: var(--space-6) var(--space-8);
}
.textarea-bare {
	padding: var(--space-0);
	border: none;
	background: transparent;
	outline: var(--border-width-strong) solid transparent;
}
/* A Textarea with a limit: the field, then its counter on the right. */
.textarea-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	min-width: 0;
}
.textarea-counter {
	align-self: flex-end;
	color: var(--color-muted);
	font-size: var(--font-size-2xs);
}
.textarea-counter.is-near {
	color: var(--color-warn-ink);
}
.textarea-counter.is-over {
	color: var(--color-danger-ink);
	font-weight: var(--font-weight-medium);
}

/* Select */
.select {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.select select {
	width: 100%;
	height: var(--control-height);
	padding: var(--space-0) var(--select-icon-space) var(--space-0) var(--space-6);
	font-size: var(--font-size-xs);
	appearance: none;
	cursor: pointer;
}
.select-icon {
	position: absolute;
	right: var(--space-8);
	color: var(--color-muted);
	pointer-events: none;
}

/* SearchInput */
.search {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	height: var(--control-height);
	padding: var(--space-0) var(--space-8);
}
.search-icon {
	color: var(--color-muted);
}
.search input {
	flex-grow: 1;
	min-width: 0;
	height: 100%;
	padding: var(--space-0);
	border: none;
	background: transparent;
	font-size: var(--font-size-xs);
	outline: var(--border-width-strong) solid transparent;
}
/* The × sits in the row; the edge padding shrinks so its glyph lines up with the icon's. */
.search.has-clear {
	padding-right: var(--input-clear-inset);
}

/* PickerButton */
.picker {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
	white-space: nowrap;
}
.picker-field {
	height: var(--control-height);
	min-width: var(--picker-min-width);
	padding: var(--space-0) var(--space-8);
	color: var(--color-ink);
}
.picker-field:hover:not(:disabled) {
	border-color: var(--color-muted);
}
.picker-ghost {
	gap: var(--space-4);
	height: var(--control-height-sm);
	padding: var(--space-0) var(--space-8);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
}
.picker-ghost:hover:not(:disabled) {
	background: var(--color-hover);
	color: var(--color-ink);
}
/* Narrowing what's shown (filters set): the accent, like a pressed chip. */
.picker-ghost.is-on,
.picker-ghost.is-on:hover:not(:disabled) {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.picker.is-empty .picker-value {
	color: var(--color-muted);
}
.picker-value {
	overflow: hidden;
	text-overflow: ellipsis;
}
.picker-icon {
	color: var(--color-muted);
}

/* Field / FieldGrid */
.field-label {
	display: flex;
	align-items: center;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.field-label.is-top {
	align-items: flex-start;
	padding-top: var(--space-6);
}
.field-control {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--space-4);
	min-width: 0;
}
.field-row .field-label,
.field-row .field-control {
	min-height: var(--control-height);
}
/* Full-width controls fill the field in every layout (inline rows and stacked). */
.field-control > .input-w-full,
.field-control > .textarea,
.field-control > .text-editor-field {
	align-self: stretch;
}
.field-note {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.field-note.is-error {
	color: var(--color-danger-ink);
}
.field-stacked {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.field-row {
	display: contents;
}
.field-grid {
	display: grid;
	gap: var(--space-10) var(--space-12);
	align-items: start;
}
.field-grid-sm {
	grid-template-columns: var(--label-width-sm) minmax(0, 1fr);
}
.field-grid-lg {
	grid-template-columns: var(--label-width-lg) minmax(0, 1fr);
}
.field-grid-title {
	grid-column: 1 / -1;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

/* CopyField */
.copy-field {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	max-width: 100%;
}
.copy-field-value {
	display: flex;
	align-items: center;
	height: var(--control-height);
	min-width: 0;
	padding: var(--space-0) var(--space-8);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* AddButton */
.add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	border: var(--border-width) dashed var(--color-border);
	background: transparent;
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	transition:
		border-color var(--duration-fast),
		color var(--duration-fast);
}
.add-btn:hover:not(:disabled) {
	border-color: var(--color-muted);
	color: var(--color-ink);
}
.add-btn-chip {
	height: var(--control-height-sm);
	padding: var(--space-0) var(--space-8);
	border-radius: var(--radius-sm);
}
.add-btn-block {
	width: 100%;
	height: var(--row-height);
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-medium);
}

/* StepCard / StepBuilder */
.step-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-10) var(--space-12);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.step-card-row {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}
.step-handle {
	display: inline-flex;
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
	cursor: grab;
}
.step-handle:disabled {
	cursor: default;
	opacity: var(--opacity-full);
}
/* Move buttons: shown on touch (no drag there); with a mouse they appear once focused. */
.step-move {
	display: inline-flex;
	gap: var(--space-2);
}
@media (hover: hover) {
	.step-move:not(:focus-within) {
		position: absolute;
		width: var(--space-1);
		height: var(--space-1);
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--step-number-size);
	height: var(--step-number-size);
	border-radius: var(--radius-full);
	background: var(--color-hover);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-semibold);
}
.step-count {
	flex-grow: 1;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.step-conditions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
	padding-left: var(--step-conditions-indent);
}
.step-conditions:empty {
	display: none;
}
.step-builder {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.step-builder-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-xs);
}
.step-builder-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}
.step-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.step-list li.is-dragging {
	opacity: var(--step-drag-opacity);
}
.step-list li.is-drop-target .step-card {
	border-color: var(--color-accent);
}

/* Callout */
.callout {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	line-height: var(--leading-prose);
}
.callout-box {
	padding: var(--space-10) var(--space-12);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.callout-inline {
	align-items: flex-start;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.callout-inline .callout-dot {
	margin-top: var(--space-5);
}
.callout-text {
	flex-grow: 1;
	min-width: 0;
}
.callout-text strong {
	font-weight: var(--font-weight-semibold);
}
.callout-action {
	flex-shrink: 0;
}

/* EmptyState */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	min-height: var(--empty-state-height);
	padding: var(--space-16);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	text-align: center;
}
.empty-state-text {
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
/* On the page itself, like a board's empty column: no card around it. */
.empty-state-bare {
	border: none;
	background: transparent;
}
.empty-state-bare .empty-state-text {
	max-width: var(--celebrate-text-width);
}
/* EmptyState celebrate: empty is good news (no errors). */
.empty-state-celebrate {
	gap: var(--space-8);
	min-height: var(--celebrate-height);
}
.empty-state-title {
	color: var(--color-ink);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
}
.empty-state-celebrate .empty-state-text {
	max-width: var(--celebrate-text-width);
}
.celebrate-mark {
	width: var(--celebrate-size);
	height: var(--celebrate-size);
	overflow: visible;
	animation: celebrate-float var(--celebrate-float) ease-in-out
		calc(var(--celebrate-draw) + var(--celebrate-check-delay)) infinite;
}
.celebrate-halo {
	fill: var(--celebrate-halo);
	transform-origin: center;
	transform-box: fill-box;
	animation: celebrate-halo var(--celebrate-float) ease-in-out infinite;
}
.celebrate-ring,
.celebrate-check {
	fill: none;
	stroke: var(--color-live);
	stroke-width: var(--celebrate-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: celebrate-draw var(--celebrate-draw) var(--ease-out) forwards;
}
.celebrate-ring {
	transform-origin: center;
	transform: rotate(-90deg);
	transform-box: fill-box;
}
.celebrate-check {
	animation-delay: var(--celebrate-check-delay);
}
.celebrate-spark {
	fill: var(--color-live);
	opacity: var(--opacity-hidden);
	transform-origin: center;
	transform-box: fill-box;
	animation:
		celebrate-pop var(--celebrate-pop) var(--ease-out) forwards,
		celebrate-twinkle var(--celebrate-twinkle) ease-in-out infinite;
	animation-delay:
		var(--celebrate-spark-delay),
		calc(var(--celebrate-spark-delay) + var(--celebrate-pop));
}
.celebrate-spark:nth-of-type(even) {
	fill: var(--color-accent);
}
.celebrate-spark:nth-of-type(2) {
	animation-delay:
		calc(var(--celebrate-spark-delay) + var(--celebrate-spark-stagger)),
		calc(
			var(--celebrate-spark-delay) + var(--celebrate-pop) +
				var(--celebrate-twinkle) / 3
		);
}
.celebrate-spark:nth-of-type(3) {
	animation-delay:
		calc(var(--celebrate-spark-delay) + var(--celebrate-spark-stagger) * 2),
		calc(
			var(--celebrate-spark-delay) + var(--celebrate-pop) +
				var(--celebrate-twinkle) / 2
		);
}
.celebrate-spark:nth-of-type(4) {
	animation-delay:
		calc(var(--celebrate-spark-delay) + var(--celebrate-spark-stagger) * 3),
		calc(
			var(--celebrate-spark-delay) + var(--celebrate-pop) +
				var(--celebrate-twinkle) / 4
		);
}
.celebrate-spark:nth-of-type(5) {
	animation-delay:
		calc(var(--celebrate-spark-delay) + var(--celebrate-spark-stagger) * 4),
		calc(
			var(--celebrate-spark-delay) + var(--celebrate-pop) +
				var(--celebrate-twinkle) * 2 / 3
		);
}
.celebrate-spark:nth-of-type(6) {
	animation-delay:
		calc(var(--celebrate-spark-delay) + var(--celebrate-spark-stagger) * 5),
		calc(
			var(--celebrate-spark-delay) + var(--celebrate-pop) +
				var(--celebrate-twinkle) * 3 / 4
		);
}
/* EmptyMark: what an empty spot waits for, drawn in a ring. Setting `--empty-mark-delay` on one staggers marks side by side. */
.empty-mark {
	flex-shrink: 0;
	width: var(--empty-mark-size);
	height: var(--empty-mark-size);
	overflow: visible;
	animation: celebrate-float var(--celebrate-float) ease-in-out
		calc(var(--celebrate-draw) + var(--empty-mark-delay)) infinite;
}
.empty-mark-halo {
	fill: var(--empty-mark-halo);
}
.empty-mark-ring,
.empty-mark-glyph {
	fill: none;
	stroke-width: var(--empty-mark-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: celebrate-draw var(--celebrate-draw) var(--ease-out)
		var(--empty-mark-delay) forwards;
}
.empty-mark-ring {
	stroke: var(--empty-mark-ring);
	transform-origin: center;
	transform: rotate(-90deg);
	transform-box: fill-box;
}
.empty-mark-glyph {
	stroke: var(--color-accent);
	animation-delay: calc(
		var(--empty-mark-delay) + var(--empty-mark-glyph-delay)
	);
}
@keyframes celebrate-draw {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes celebrate-pop {
	from {
		opacity: var(--opacity-hidden);
		transform: scale(0);
	}
	60% {
		opacity: var(--celebrate-spark-on);
		transform: scale(1.4);
	}
	to {
		opacity: var(--celebrate-spark-on);
		transform: scale(1);
	}
}
@keyframes celebrate-twinkle {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.55);
		opacity: var(--celebrate-spark-dim);
	}
}
@keyframes celebrate-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(var(--celebrate-float-lift));
	}
}
@keyframes celebrate-halo {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(var(--celebrate-halo-scale));
	}
}
@media (prefers-reduced-motion: reduce) {
	.celebrate-mark,
	.celebrate-halo,
	.celebrate-ring,
	.celebrate-check,
	.celebrate-spark,
	.empty-mark,
	.empty-mark-ring,
	.empty-mark-glyph {
		animation: none;
	}
	.celebrate-ring,
	.celebrate-check,
	.empty-mark-ring,
	.empty-mark-glyph {
		stroke-dashoffset: 0;
	}
	.celebrate-spark {
		opacity: var(--celebrate-spark-on);
	}
}

/* Settings: SettingsPage, SettingsGroup, SettingsRow */
.settings-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}
.settings-page-header,
.settings-group-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-16);
}
.settings-page-text,
.settings-group-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}
.settings-page-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
}
.settings-page-desc {
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.settings-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	/* Scrolled to from the settings nav: it lands clear of the sticky top bar. */
	scroll-margin-top: var(--settings-group-scroll-margin);
}
/* Focused from the nav so the next Tab goes in; the nav and the highlight already mark it. */
.settings-group[tabindex='-1']:focus {
	outline: none;
}
/*
 * Reached from the nav or a link's hash: an accent ring and tint over the
 * group (title and card) that holds, then fades, so even a short scroll shows
 * where you landed. Drawn on top, so nothing moves. With reduced motion it
 * shows plainly and goes at the end, without fading.
 */
.settings-group[data-flash] {
	position: relative;
}
.settings-group[data-flash]::after {
	content: '';
	position: absolute;
	inset: calc(var(--space-6) * -1);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
	pointer-events: none;
	opacity: var(--opacity-hidden);
	animation: landed-flash var(--duration-flash) ease-in-out forwards;
}
@media (prefers-reduced-motion: reduce) {
	.settings-group[data-flash]::after {
		animation-timing-function: step-end;
	}
}
.settings-group-title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.settings-group-desc {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.settings-card {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	overflow: hidden;
}
.settings-card > * + * {
	border-top: var(--border-width) solid var(--color-border);
}
.settings-group.is-danger .settings-card {
	border-color: var(--color-danger-muted);
}
.settings-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-12) var(--space-16);
	padding: var(--space-14) var(--space-16);
}
.settings-row.has-icon {
	grid-template-columns: var(--settings-icon-tile) minmax(0, 1fr) auto;
	column-gap: var(--space-12);
}
.settings-row-icon {
	display: grid;
	place-items: center;
	width: var(--settings-icon-tile);
	height: var(--settings-icon-tile);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	color: var(--color-muted);
}
.settings-row.is-danger .settings-row-icon {
	border-color: transparent;
	background: var(--color-danger-muted);
	color: var(--color-danger-ink);
}
/* Greyed out: there for information, not to pick. */
.settings-row.is-muted .settings-row-icon {
	border-style: dashed;
	background: transparent;
}
.settings-row.is-muted .settings-row-label {
	color: var(--color-muted);
}
.settings-row-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.settings-row.is-labelled .settings-row-text {
	cursor: pointer;
}
.settings-row-label {
	font-weight: var(--font-weight-medium);
}
.settings-row-desc {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.settings-row-control {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-8);
	min-width: 0;
}
.settings-row-control > form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
}
.settings-row-body {
	grid-column: 1 / -1;
	min-width: 0;
}
.settings-row.has-icon .settings-row-control > form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
}
/* Under the text: beside the icon tile when there's one, full width when not. */
.settings-row.has-icon .settings-row-body {
	grid-column: 2 / -1;
}
/* A flush group holds a table or code edge to edge: the card is their frame. */
.settings-card.is-flush > .code-box,
.settings-card .dt,
.settings-card > .empty-state {
	border: none;
	border-radius: 0;
}
.settings-row-desc.is-error {
	color: var(--color-danger-ink);
}

/* AddressInput: email addresses as chips, then a field to type more. */
.address-input {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	min-height: var(--control-height);
	padding: var(--space-2) var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}
.address-input:focus-within {
	border-color: var(--color-accent);
	box-shadow: var(--input-focus-ring);
}
.address-input.is-invalid {
	border-color: var(--color-danger);
}
.address-input-field {
	flex: 1 1 var(--address-input-min);
	min-width: var(--address-input-min);
	height: var(--address-input-field-height);
	padding: var(--space-0) var(--space-2);
	border: none;
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
	font-size: var(--font-size-sm);
	color: var(--color-ink);
}
.address-input-field::placeholder {
	color: var(--color-muted);
}

/* ---------- ProblemCard: what stops or hurts something about to go out ---------- */
.problem-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.problem-card.is-blocking {
	border-color: var(--color-danger-muted);
}
.problem-card.is-warning {
	border-color: var(--color-warn-muted);
}
.problem-card-head {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.problem-card-icon {
	flex-shrink: 0;
}
.problem-card.is-blocking .problem-card-icon {
	color: var(--color-danger-ink);
}
.problem-card.is-warning .problem-card-icon {
	color: var(--color-warn-ink);
}
.problem-card-title {
	margin: var(--space-0);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}
.problem-card-list {
	display: flex;
	flex-direction: column;
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.problem-card-item {
	display: flex;
	align-items: baseline;
	gap: var(--space-12);
	padding: var(--space-8) var(--space-12);
	font-size: var(--font-size-sm);
	line-height: var(--leading-prose);
}
.problem-card-item + .problem-card-item {
	border-top: var(--border-width) solid var(--color-border);
}
.problem-card-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.problem-card-detail {
	color: var(--color-muted);
}
.problem-card-action {
	flex-shrink: 0;
}

/* ---------- DraftButton: Ask's draft in one click, a chevron for notes ---------- */
/* SplitButton: the main half, then a chevron with the other ways in. */
.split-btn {
	display: inline-flex;
	align-items: stretch;
}
.split-btn > .split-btn-main {
	border-top-right-radius: var(--space-0);
	border-bottom-right-radius: var(--space-0);
}
.split-btn-more {
	margin-inline-start: var(--border-width);
	padding: var(--space-0) var(--space-4);
	border-top-left-radius: var(--space-0);
	border-bottom-left-radius: var(--space-0);
}
.split-btn > .btn:focus-visible {
	position: relative;
	z-index: var(--z-raised);
}

.draft-btn {
	display: inline-flex;
	align-items: stretch;
}
.draft-btn > .draft-btn-main {
	border-top-right-radius: var(--space-0);
	border-bottom-right-radius: var(--space-0);
}
.draft-btn-more {
	margin-inline-start: calc(var(--border-width) * -1);
	padding: var(--space-0) var(--space-4);
	border-top-left-radius: var(--space-0);
	border-bottom-left-radius: var(--space-0);
	color: var(--color-muted);
}
.draft-btn-more[aria-expanded='true'] {
	background: var(--color-hover);
	color: var(--color-ink);
}
/* The focused half's ring shows over its neighbour's edge. */
.draft-btn > .btn:focus-visible {
	position: relative;
	z-index: var(--z-raised);
}
.draft-btn-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	width: var(--draft-btn-panel-width);
	max-width: var(--popover-max-viewport);
	padding: var(--space-12);
}
.popover-sheet .draft-btn-panel {
	width: auto;
	max-width: none;
}
.draft-btn-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}
.draft-btn-option {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.draft-btn-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-8);
}
.draft-btn-count {
	margin-inline-end: auto;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ---------- SchedulePicker: quick choices, a day and time picked, Unschedule ---------- */
.schedule.menu {
	min-width: var(--schedule-width);
}
.schedule-state {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin: var(--space-0);
	padding: var(--space-4) var(--space-8) var(--space-4) var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.schedule-state > svg {
	flex-shrink: 0;
	width: var(--icon-md);
}
.schedule.is-picking {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-8);
}
.schedule-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.schedule-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

/* ---------- SnoozePicker: quick choices, a day picked, Unsnooze ---------- */
.snooze.menu {
	min-width: var(--snooze-width);
}
.snooze-state {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin: var(--space-0);
	padding: var(--space-4) var(--space-8) var(--space-4) var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.snooze-state > svg {
	flex-shrink: 0;
	width: var(--icon-md);
}
.snooze.is-picking {
	padding: var(--space-8);
}
.snooze-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}
.snooze-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}


/* ./components/data.css */
/* data group components. Tokens only: see tokens/data.css. */

/* ---------- Stat ---------- */
.stat-strip {
	display: grid;
	grid-template-columns: repeat(var(--stat-cols), minmax(0, 1fr));
	/* Hairlines are the gap over the border colour: any column count reflows cleanly. */
	gap: var(--border-width);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-border);
	overflow: hidden;
}
/* Beats .stat-button's transparent background; its :hover (later, same weight) still wins. */
.stat-strip > :is(.stat, .stat-button) {
	background: var(--color-surface);
}
/* Inset: part of the panel around it, not a card inside it. */
.stat-strip.is-inset {
	border: none;
	border-bottom: var(--border-width) solid var(--color-border);
	border-radius: 0;
}
.stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	padding: var(--space-12) var(--space-16) var(--space-14);
	text-align: left;
}
/* A lone stat in a padded sheet's section keeps the sheet's padding, not its own too. */
.sheet-section > .stat {
	padding: var(--space-0);
}
.stat-button {
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	transition: background var(--duration-fast);
}
.stat-button:hover,
.stat-link:hover {
	background: var(--color-hover);
}
.stat.is-selected {
	box-shadow: var(--shadow-selected);
}
.stat-label {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.stat-value {
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	overflow-wrap: anywhere;
}
.stat-value-kpi {
	font-size: var(--font-size-kpi);
}
.stat-value-stat {
	font-size: var(--font-size-stat);
}
.stat-value-sm {
	font-size: var(--font-size-stat-sm);
}
.stat-unit {
	font-weight: var(--font-weight-medium);
	letter-spacing: normal;
	color: var(--color-muted);
}
.stat-value-kpi .stat-unit {
	font-size: var(--font-size-md);
}
.stat-value-stat .stat-unit {
	font-size: var(--font-size-sm);
}
.stat-value-sm .stat-unit {
	font-size: var(--font-size-xs);
}
.stat-sub {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* DeltaText */
.delta {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.delta-good {
	color: var(--color-live-ink);
}
.delta-bad {
	color: var(--color-danger-ink);
}
.delta-flat {
	color: var(--color-muted);
}

/* VitalStat */
.vital {
	gap: var(--space-6);
}
.vital-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-8);
}
.vital-head .status {
	white-space: nowrap;
}
.vital-percentile {
	font-weight: var(--font-weight-regular);
}
/* ---------- DataTable ---------- */
.dt {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	overflow: hidden;
}
/* Inside a flush panel the panel is the frame: no second border. */
.panel-flush .dt {
	border: none;
	border-radius: 0;
}
.dt-row {
	position: relative;
	display: grid;
	grid-template-columns: var(--dt-cols);
	gap: var(--space-12);
	align-items: center;
	padding: var(--space-0) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
}
.dt-md .dt-row {
	min-height: var(--row-height);
}
.dt-lg .dt-row {
	min-height: var(--row-height-lg);
}
/* Rows grow with their content (a two-line cell never touches the rules). */
.dt-row:not(.dt-head) {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}
.dt .dt-head {
	height: var(--row-height);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.dt > [role='rowgroup']:last-child .dt-row:last-child {
	border-bottom: none;
}
.dt-row.is-link:hover,
.dt-row.is-selected {
	background: var(--color-hover);
}
/* Keyboard focus (J/K) and the selected row (a filter that's on): an accent edge on the hover color. */
.dt-row.is-selected,
.dt-row.is-focused {
	background: var(--color-hover);
	box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent);
}
.dt-cell {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dt-cell.is-end {
	text-align: right;
}
.dt-cell.is-strong {
	font-weight: var(--font-weight-medium);
}
.dt-row-link {
	color: inherit;
}
.dt-row-link:hover {
	color: inherit;
}
.dt-row-link::after {
	content: '';
	position: absolute;
	inset: 0;
}
.dt-row-link:focus-visible {
	outline: var(--border-width-strong) solid transparent;
}
.dt-row-link:focus-visible::after {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: calc(var(--focus-width) * -1);
}
/* Controls in a linked row sit above its link: buttons, links, checkboxes (their wrapper: the input inside stays absolutely placed over its box). */
.dt-cell a:not(.dt-row-link),
.dt-cell button,
.dt-cell .checkbox {
	position: relative;
	z-index: var(--z-row-control);
}
.dt .dt-empty {
	grid-template-columns: minmax(0, 1fr);
	height: var(--row-height-lg);
	text-align: center;
	color: var(--color-muted);
}
/* The last row's border already separates it; a note may wrap to a second line. */
.dt-footer {
	display: flex;
	align-items: center;
	min-height: var(--panel-header-height);
	padding: var(--space-8) var(--space-16);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.dt-footer-cell {
	flex: 1 1 auto;
	min-width: 0;
}
.dt-footer-split {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4) var(--space-16);
}
.dt-footer-start {
	min-width: 0;
}
.dt-footer-end {
	margin-inline-start: auto;
	white-space: nowrap;
}
.dt-more {
	padding: var(--space-0);
	border: none;
	background: transparent;
	color: var(--color-ink);
}
.dt-more:hover {
	text-decoration: underline;
}
/* Show more / Show fewer: rows that expand in place, a chevron saying which way. */
/* SEO › Opportunities › Two pages, one query: one query's pages, each with its share of days on top. */
.shared-query {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
	padding-block: var(--space-4);
}
.shared-query-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4) var(--space-12);
}
.shared-query-pages {
	display: grid;
	gap: var(--space-6);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.shared-query-pages > li {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}
.shared-query-pages > li + li {
	padding-top: var(--space-8);
	border-top: var(--border-width) solid var(--color-border);
}
.shared-query-line {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
}
.shared-query-line > .meter {
	flex: 1 1 auto;
	max-width: var(--shared-query-meter);
}
.shared-query-page {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-ink);
}
.shared-query-share {
	min-width: var(--shared-query-share);
	text-align: end;
}
.shared-query-metrics {
	display: flex;
	margin-inline-start: calc(var(--space-4) * -1);
}
.dt-expand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-0);
	border: none;
	background: transparent;
	font: inherit;
	color: var(--color-ink);
	cursor: pointer;
}
.dt-expand:hover {
	color: var(--color-ink);
	text-decoration: underline;
}

/* Sorting */
.dt-sort {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	max-width: 100%;
	padding: var(--space-0);
	border: none;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}
.dt-sort:hover,
.dt-sort.is-sorted {
	color: var(--color-ink);
}
.dt-sort-icon {
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast);
}
.dt-sort:hover .dt-sort-icon,
.dt-sort:focus-visible .dt-sort-icon,
.dt-sort.is-sorted .dt-sort-icon {
	opacity: var(--opacity-visible);
}
.dt-cell.is-end .dt-sort {
	flex-direction: row-reverse;
}

/*
 * Column resizing (`resizeId`): a strip centred on the gap after a header
 * cell. Hovered, focused or dragged, its rule lights up down the column
 * like the sidebar's edge; `--dt-edge-length` (set on hover) stops it at
 * the last row.
 */
.dt-resize {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Half the row's column gap plus half the strip: centred on the gap. */
	right: calc((var(--space-12) + var(--table-resize-hit)) / -2);
	z-index: var(--z-row-control);
	width: var(--table-resize-hit);
	cursor: col-resize;
	touch-action: none;
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast) var(--ease-out);
}
.dt-resize::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - var(--border-width-strong) / 2);
	width: var(--border-width-strong);
	height: var(--dt-edge-length, 100%);
	background: var(--color-focus);
}
.dt-resize:hover,
.dt-resize:focus-visible,
.dt-resize.is-active {
	opacity: var(--opacity-full);
}
.dt-resize:focus-visible {
	outline: none;
}
.dt.is-resizing,
.dt.is-resizing * {
	cursor: col-resize;
	user-select: none;
}

/* Sticky header: clip (not hidden) so the header can stick to the page scroll. */
.dt-sticky {
	overflow: clip;
}
.dt-sticky .dt-head-group {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: var(--color-surface);
}
.dt-sticky.dt-scroll {
	overflow: auto;
}

.dt-loading .skeleton {
	max-width: var(--table-skeleton-max);
}
.dt-cell.is-end .skeleton {
	margin-left: auto;
}

/* Phone: rows become stacked cards (first column as the title, then label: value). */
.dt-wrap.has-cards {
	container-type: inline-size;
}
@container (max-width: 639px) {
	.has-cards .dt-head-group {
		display: none;
	}
	.has-cards .dt-row:not(.dt-empty) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
		height: auto;
		padding: var(--space-10) var(--space-16);
	}
	.has-cards .dt-cell {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-12);
		text-align: left;
		white-space: normal;
	}
	.has-cards .dt-cell[data-label]::before {
		content: attr(data-label);
		flex-shrink: 0;
		font-size: var(--font-size-xs);
		color: var(--color-muted);
	}
	.has-cards .dt-cell:first-child {
		font-weight: var(--font-weight-medium);
	}
	/* A row link holding an entity (title and badge) shrinks with the card, so a long title ellipsizes instead of pushing its badge out. */
	.has-cards .dt-cell > .dt-row-link {
		min-width: var(--space-0);
	}
	.has-cards .dt-cell.is-phone-hidden {
		display: none;
	}
}

.dt-dot-value {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}

/* EntityCell */
.entity {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-width: 0;
}
.entity-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.entity-title-row {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
}
.entity-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
.entity-title.mono {
	font-weight: var(--font-weight-regular);
}
.entity-title.is-strong {
	font-weight: var(--font-weight-semibold);
}
.entity-title.is-plain {
	font-weight: var(--font-weight-regular);
}
.entity-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.entity-sub.mono {
	font-size: var(--font-size-2xs);
}

/* ---------- Breakdown ---------- */
.bd-columns {
	display: flex;
	justify-content: space-between;
	padding: var(--space-6) var(--space-4) var(--space-4);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.bd-caption-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.bd-caption-select select {
	appearance: none;
	padding: var(--space-0) var(--space-16) var(--space-0) var(--space-0);
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}
.bd-caption-select select:hover {
	color: var(--color-ink);
}
.bd-caption-select select:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-width);
	border-radius: var(--radius-sm);
}
.bd-caption-select .icon {
	position: absolute;
	right: var(--space-0);
	pointer-events: none;
}
.bd-row {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-6);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	text-align: left;
}
.bd-row.is-interactive:hover {
	background: var(--color-hover);
}
/* The page's filter: an accent edge (as tall as the bar) and ink label; clicking again removes it. */
.bd-row.is-active::before {
	content: '';
	position: absolute;
	top: var(--breakdown-bar-inset);
	bottom: var(--breakdown-bar-inset);
	left: 0;
	z-index: var(--z-raised);
	width: var(--border-width-strong);
	border-radius: var(--radius-sm);
	background: var(--color-accent);
}
.bd-row.is-active .bd-label {
	color: var(--color-ink);
	font-weight: var(--font-weight-semibold);
}
.bd-bar {
	position: absolute;
	top: var(--breakdown-bar-inset);
	bottom: var(--breakdown-bar-inset);
	left: 0;
	border-radius: var(--radius-sm);
}
.bd-bar-accent {
	background: var(--color-accent-muted);
}
.bd-bar-neutral {
	background: var(--color-hover);
}
.bd-label,
.bd-sub,
.bd-value {
	position: relative;
}
.bd-label {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bd-sub {
	margin-right: var(--space-10);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.bd-value {
	font-weight: var(--font-weight-medium);
}
/* A row with icon metrics: the label's link stretches over the row, the metrics' buttons sit above it. */
.bd-row.has-metrics .bd-hit {
	position: static;
	padding: var(--space-0);
	border: 0;
	background: none;
	text-align: left;
	color: inherit;
}
.bd-hit::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-sm);
}
.bd-hit:focus-visible {
	outline: var(--border-width-strong) solid transparent;
}
.bd-hit:focus-visible::after {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: calc(var(--focus-width) * -1);
}
.bd-hit-text {
	position: relative;
}
.bd-row.has-metrics .bd-value,
.bd-row.has-metrics .bd-metrics {
	pointer-events: none;
}
.bd-metrics .hint-metric {
	position: relative;
	z-index: var(--z-row-control);
	pointer-events: auto;
}
.bd-more {
	padding: var(--space-6) var(--space-4) var(--space-0);
	font-size: var(--font-size-xs);
}
.bd-more a {
	color: var(--color-muted);
}
.bd-empty {
	padding: var(--space-12) var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ---------- CheckList ---------- */
.checklist {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.checklist-item {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
}
.checklist-icon {
	flex-shrink: 0;
	color: var(--color-live-ink);
}
.checklist-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}
.checklist-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.checklist-item > .hint-trigger {
	margin-inline-start: var(--space-0);
}
/* Needs work: a warning sign, what it means under the name, where to fix it at the end. */
.checklist-item.has-detail {
	align-items: flex-start;
}
.checklist-item.has-detail .checklist-icon {
	margin-top: var(--space-2);
}
.checklist-item.is-warn .checklist-icon {
	color: var(--color-warn-ink);
}
/* Must be fixed first: red, the page holds back what it stops. */
.checklist-item.is-block .checklist-icon {
	color: var(--color-danger-ink);
}
.checklist-detail {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.checklist-action {
	flex-shrink: 0;
	margin-inline-start: auto;
}

/* ---------- KeyValueList / FactRow ---------- */
.kv {
	margin: var(--space-0);
}
.kv-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-12);
	padding: var(--space-6) var(--space-0);
	border-top: var(--border-width) solid var(--color-border);
}
.kv-key {
	flex-shrink: 0;
	color: var(--color-muted);
}
.kv-value {
	min-width: 0;
	margin: var(--space-0);
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kv-value.is-numeric {
	color: var(--color-muted);
}
.kv-value.is-wide {
	flex-grow: 1;
}
.kv-value.is-wrap {
	flex-grow: 1;
	overflow-wrap: anywhere;
	text-align: left;
	white-space: normal;
}
/* Icon metrics keep their focus ring and popover anchor. */
.kv-value:has(.hint-metric) {
	overflow: visible;
}
.fact {
	display: grid;
	grid-template-columns: var(--fact-col-label) minmax(0, 1fr) var(
			--fact-col-value
		);
	gap: var(--space-10);
	align-items: center;
	padding: var(--space-8) var(--space-0);
	border-bottom: var(--border-width) solid var(--color-border);
}
.fact-label {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.fact-value {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}
.fact-share {
	font-size: var(--font-size-xs);
	text-align: right;
}

/* ---------- BarList / PropertyDistribution ---------- */
.bar-row {
	display: grid;
	grid-template-columns: var(--bar-list-col-label) minmax(0, 1fr) var(
			--bar-list-col-value
		);
	gap: var(--space-12);
	align-items: center;
	padding: var(--space-6) var(--space-0);
	border-top: var(--border-width) solid var(--color-border);
}
/* In a list the rows share one set of columns: the value column grows to the
   widest value ("13 · 2 done"), so values stay on one line and every meter
   starts and ends with the others. */
.bar-list {
	display: grid;
	grid-template-columns:
		var(--bar-list-col-label) minmax(0, 1fr)
		minmax(var(--bar-list-col-value), max-content);
	column-gap: var(--space-12);
}
.bar-list > [role='listitem'],
.bar-list > .bar-row,
.bar-list > [role='listitem'] > .bar-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
}
.bar-row-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bar-row-value {
	font-size: var(--font-size-xs);
	text-align: right;
	white-space: nowrap;
}
.prop {
	display: grid;
	grid-template-columns: var(--prop-col-key) minmax(0, 1fr);
	gap: var(--space-16);
	padding: var(--space-12) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
}
.prop-key {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.prop-name {
	font-size: var(--font-size-sm);
}
.prop-type {
	font-size: var(--font-size-xs);
}
.prop-values {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.prop-value {
	display: grid;
	grid-template-columns: var(--prop-col-label) minmax(0, 1fr) var(
			--prop-col-value
		);
	gap: var(--space-12);
	align-items: center;
}
.prop-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.prop-count {
	font-size: var(--font-size-xs);
	text-align: right;
}

/* ---------- ActivityRow ---------- */
.activity {
	display: grid;
	grid-template-columns:
		var(--activity-col-dot) var(--activity-col-name) minmax(0, 1fr)
		var(--activity-col-who) var(--activity-col-time);
	gap: var(--space-10);
	align-items: center;
	height: var(--row-height);
	padding: var(--space-0) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
}
.activity.no-who {
	grid-template-columns:
		var(--activity-col-dot) var(--activity-col-name) minmax(0, 1fr)
		var(--activity-col-time);
}
.activity.has-via {
	grid-template-columns:
		var(--activity-col-dot) var(--activity-col-name) minmax(0, 1fr)
		var(--activity-col-via) var(--activity-col-who) var(--activity-col-time);
}
.activity.is-link:hover {
	background: var(--color-hover);
}
.activity-name,
.activity-detail,
.activity-via,
.activity-who {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.activity-path {
	margin-left: var(--space-8);
}
.activity-via,
.activity-who {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.activity-time {
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
	text-align: right;
}

/* Event kind colours for names (timeline) */
.kind-plain {
	color: var(--color-muted);
}
.kind-key {
	color: var(--color-ink);
}
.kind-goal {
	/* Purchases: green, like their dot. */
	color: var(--color-live-ink);
}
.kind-error {
	color: var(--color-danger-ink);
}

/* ---------- Timeline ---------- */
.timeline-session {
	padding-bottom: var(--space-8);
	border-bottom: var(--border-width) solid var(--color-border);
}
.timeline-session:last-of-type {
	border-bottom: none;
}
/* Like the table footer: a bordered row that offers older visits. */
.timeline-foot {
	display: flex;
	align-items: center;
	height: var(--panel-header-height);
	padding: var(--space-0) var(--space-16);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-xs);
}
.timeline-more {
	padding: var(--space-0);
	border: none;
	background: transparent;
	color: var(--color-ink);
}
.timeline-more:hover {
	text-decoration: underline;
}
.timeline-head {
	display: flex;
	align-items: baseline;
	gap: var(--space-10);
	padding: var(--space-10) var(--space-16) var(--space-6);
}
.timeline-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}
.timeline-meta {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.timeline-events {
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.timeline-event {
	display: grid;
	grid-template-columns:
		var(--timeline-col-time) var(--timeline-col-rail)
		minmax(0, 1fr) auto;
	gap: var(--space-8);
	align-items: start;
	min-height: var(--timeline-row-min);
	padding: var(--space-0) var(--space-16);
}
.timeline-time,
.timeline-path {
	padding-top: var(--timeline-text-offset);
	font-size: var(--font-size-xs);
	line-height: var(--leading-base);
	color: var(--color-muted);
}
.timeline-rail {
	position: relative;
	display: flex;
	justify-content: center;
	align-self: stretch;
}
.timeline-rail::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--border-width);
	background: var(--color-border);
}
.timeline-event:first-child .timeline-rail::before {
	top: var(--timeline-dot-offset);
}
.timeline-event:last-child .timeline-rail::before {
	bottom: auto;
	height: var(--timeline-dot-offset);
}
.timeline-rail .dot {
	position: relative;
	margin-top: var(--timeline-dot-offset);
}
/* The dot centers on the event's line; the rail's line-box must not push it. */
.timeline-rail {
	align-items: flex-start;
	line-height: 0;
}
.timeline-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--timeline-row-pad) var(--space-0);
	line-height: var(--leading-base);
}
.timeline-body .mono {
	font-size: var(--font-size-xs);
}
.timeline-detail {
	margin-left: var(--space-8);
}
.timeline-sub {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* Visit details: the info button sits at the header's end, centred on its line. */
.timeline-head-end {
	display: inline-flex;
	align-self: center;
	margin: var(--timeline-head-button-pull) var(--space-0)
		var(--timeline-head-button-pull) auto;
}
/* An event name that opens its details: still the name (its kind colour), with a dotted underline. */
.timeline-name {
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font: inherit;
	text-decoration: underline dotted;
	text-decoration-color: var(--timeline-name-underline);
	text-underline-offset: var(--link-underline-offset);
	cursor: pointer;
}
.timeline-name:hover,
.timeline-name[aria-expanded='true'] {
	text-decoration-color: currentColor;
}
/* An email's row opens its conversation. */
.timeline-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--timeline-name-underline);
	text-underline-offset: var(--link-underline-offset);
}
.timeline-link:hover {
	text-decoration-color: currentColor;
}
.timeline-popover {
	width: var(--timeline-popover-width);
	max-width: var(--popover-max-viewport);
	padding: var(--space-8) var(--space-12);
	font-size: var(--font-size-sm);
	color: var(--color-ink);
}
/* Key/value rows inside: no rule above the first one. */
.timeline-popover .kv-row:first-child {
	border-top: none;
}
.timeline-popover > .link-action {
	display: inline-block;
	margin-top: var(--space-8);
}

/* ---------- ListItem ---------- */
.li {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-height: var(--row-height-md);
	padding: var(--space-8) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
}
.li.is-link:hover {
	background: var(--color-hover);
}
/* A row that acts in place (scrolls to it): a button that looks like the rest. */
button.li {
	width: 100%;
	border-width: var(--space-0) var(--space-0) var(--border-width);
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.li-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-2);
	min-width: 0;
}
.li-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
.li-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* Icon metrics on the right, small and muted: they keep their width and the title ellipsizes first. */
.li-meta {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}
.li-meta > .hint-metric {
	margin-inline-start: var(--space-0);
	padding-inline: var(--space-0);
}
.li-trailing {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-2);
	flex-shrink: 0;
	min-width: 0;
	max-width: var(--list-trailing-max);
}
.li-trailing-main,
.li-trailing-sub {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.li-trailing-main {
	font-weight: var(--font-weight-medium);
}
.li-trailing-sub {
	min-width: min(var(--list-trailing-width), 100%);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-align: right;
}

/* ---------- Insight ---------- */
.insight {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	line-height: var(--leading-prose);
}
.insight-dot {
	margin-top: var(--insight-dot-offset);
}
.insight-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-3);
	min-width: 0;
}
.insight-meta {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.insight-row {
	gap: var(--space-10);
	padding: var(--space-12) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
}
.insight-row.is-link:hover {
	background: var(--color-hover);
}
/* Insight with an action: the sentence (a link or not) and a button beside it. */
.insight-row.has-action {
	align-items: center;
	padding-block: var(--space-6);
}
.insight-main {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: var(--space-10);
	min-width: 0;
	padding-block: var(--space-6);
}
.insight-main.is-link:hover .insight-text {
	text-decoration: underline;
}
.insight-action {
	flex-shrink: 0;
}
.insight-compact {
	align-items: center;
	padding: var(--space-5) var(--space-0);
	border-top: var(--border-width) solid var(--color-border);
	line-height: var(--leading-base);
}
.insight-compact .insight-dot {
	margin-top: var(--space-0);
}

/* ---------- CodeBlock ---------- */
.code {
	margin: var(--space-0);
	padding: var(--space-10) var(--space-12);
	overflow-x: auto;
	background: var(--color-surface-2);
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	line-height: var(--leading-code);
	white-space: pre-wrap;
	word-break: break-word;
}
/* Shiki tokens carry both themes' colors as variables. */
.code-token {
	color: var(--shiki-light);
}
[data-theme='dark'] .code-token {
	color: var(--shiki-dark);
}
.code-bordered {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
}
.code-box {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.code-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	min-height: var(--row-height);
	padding: var(--space-0) var(--space-4) var(--space-0) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.code-bar .tabs-boxed {
	align-self: stretch;
	padding: var(--space-0);
	border-bottom: none;
	background: transparent;
}

.code-copy-only {
	position: relative;
}
.code-copy-only .code {
	padding-right: var(--space-48);
}
.code-copy {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
}

/* Rows inside a card: the card border closes the list. */
.li:last-child,
.activity:last-child,
.insight-row:last-child {
	border-bottom: none;
}

/* ---------- EventToken / EventFlow ---------- */
.event-token {
	display: inline-block;
	padding: var(--space-1) var(--space-5);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	white-space: nowrap;
}
.event-flow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}
.event-flow-step {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
}
.event-flow-arrow {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ---------- ProfileHeader / EntityTitle ---------- */
.profile {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	padding: var(--space-4) var(--space-2);
}
.profile-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}
.profile-name-row {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}
.profile-name {
	min-width: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
}
.profile-meta {
	color: var(--color-muted);
}
/* A journey opened on a stretch of time (the Inbox's "and 12 more"): it scrolls into view under the top bar. */
.journey-anchor {
	scroll-margin-top: calc(var(--topbar-height) + var(--space-12));
}
.journey-window {
	padding: var(--space-8) var(--space-14);
	border-bottom: var(--border-width) solid var(--color-border);
}
.entity-heading {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}
.entity-heading-text {
	display: grid;
	flex-grow: 1;
	gap: var(--space-4);
	min-width: 0;
}
.entity-heading-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
}
.entity-heading-name {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
}
.entity-heading-meta {
	color: var(--color-muted);
	font-size: var(--font-size-sm);
}
.timeline-event:only-child .timeline-rail::before {
	display: none;
}

/* ---------- ApiKeyRow ---------- */
.api-key {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	min-height: var(--row-height-lg);
	padding: var(--space-10) var(--space-12) var(--space-10) var(--space-16);
	transition: background-color var(--duration-fast) var(--ease-out);
}
.api-key:hover,
.api-key:focus-within {
	background: var(--color-hover);
}
.api-key-list > .api-key + .api-key {
	border-top: var(--border-width) solid var(--color-border);
}
.api-key-reach {
	display: inline-flex;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
}
.api-key-reach-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--logo-md);
	height: var(--logo-md);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-muted);
}
.api-key-main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-2);
	min-width: 0;
}
.api-key-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
.api-key-prefix {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.api-key-facts {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-4);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.api-key-fact-body {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	height: var(--control-height-sm);
	padding: var(--space-0) var(--space-6);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	cursor: default;
}
.api-key-fact-body:hover {
	color: var(--color-ink);
}
.api-key-fact.is-accent .api-key-fact-body {
	color: var(--color-accent-ink);
}
/* Fixed widths, so the icons line up from row to row. */
.api-key-fact-used .api-key-fact-body,
.api-key-fact-requests .api-key-fact-body {
	min-width: var(--table-col-sm);
}
.api-key-fact-creator .api-key-fact-body {
	justify-content: center;
	min-width: var(--table-col-xs);
}
.api-key-actions {
	flex-shrink: 0;
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast) var(--ease-out);
}
.api-key:hover .api-key-actions,
.api-key:focus-within .api-key-actions,
.api-key-actions:has([aria-expanded='true']) {
	opacity: var(--opacity-visible);
}
@media (hover: none) {
	.api-key-actions {
		opacity: var(--opacity-visible);
	}
}
/* Phones: the facts move under the name instead of squeezing it. */
@media (max-width: 639px) {
	.api-key {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			'reach main actions'
			'. facts facts';
		row-gap: var(--space-6);
	}
	.api-key-reach {
		grid-area: reach;
	}
	.api-key-main {
		grid-area: main;
	}
	.api-key-actions {
		grid-area: actions;
	}
	.api-key-facts {
		grid-area: facts;
		margin-left: calc(var(--space-6) * -1);
	}
}

/* RankChangeList: who moved between two rankings. */
.rank-list {
	display: flex;
	flex-direction: column;
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.rank-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto var(--rank-move-width);
	align-items: center;
	gap: var(--space-12);
	min-height: var(--row-height);
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-sm);
}
.rank-row:last-child {
	border-bottom: none;
}
.rank-name {
	min-width: var(--space-0);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rank-row.is-own .rank-name {
	color: var(--color-accent-ink);
	font-weight: var(--font-weight-semibold);
}
.rank-places {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	color: var(--color-muted);
}
.rank-row.is-own .rank-places {
	color: var(--color-ink);
}
.rank-arrow {
	color: var(--color-muted);
}
.rank-move {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
	color: var(--color-muted);
	font-size: var(--font-size-xs);
}
.rank-move.is-good {
	color: var(--color-accent-ink);
}
.rank-move.is-bad {
	color: var(--color-danger-ink);
}

/* UrlStatus: a page's HTTP answer, `301 → /`, as a small mono chip. */
.url-status {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-3);
	min-width: var(--space-0);
	max-width: 100%;
	height: var(--badge-height);
	padding: var(--space-0) var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-muted);
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	vertical-align: middle;
}
.url-status.is-note {
	font-family: inherit;
}
.url-status.is-moved {
	border-color: transparent;
	background: var(--color-warn-muted);
	color: var(--color-warn-ink);
}
.url-status.is-failed {
	border-color: transparent;
	background: var(--color-danger-muted);
	color: var(--color-danger-ink);
}
.url-status.is-unknown {
	border-style: dashed;
}
.url-status-code {
	flex-shrink: 0;
}
.url-status-to {
	min-width: var(--space-0);
	overflow: hidden;
	text-overflow: ellipsis;
}
.url-status-arrow {
	flex-shrink: 0;
}
/* ---------- FixList ---------- */
.fix-list {
	display: flex;
	flex-direction: column;
	margin: var(--space-0);
	padding: var(--space-0);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	list-style: none;
	overflow: hidden;
}
.fix-row + .fix-row {
	border-top: var(--border-width) solid var(--color-border);
}
.fix-row-link {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-width: var(--space-0);
	min-height: var(--row-height-md);
	padding: var(--space-10) var(--space-16);
	color: inherit;
	text-decoration: none;
}
.fix-row-link:hover {
	background: var(--color-hover);
}
.fix-row-link:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: calc(var(--focus-width) * -1);
}
.fix-row-dot {
	flex-shrink: 0;
}
.fix-row-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	min-width: var(--space-0);
}
.fix-row-title {
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-tight);
	overflow-wrap: anywhere;
}
.fix-row-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-0) var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* The dot ends a fact, so a wrapped line never starts with one. */
.fix-row-facts > span:not(:last-child)::after {
	content: '·';
	margin-left: var(--space-6);
}
.fix-row-arrow {
	flex-shrink: 0;
	color: var(--color-muted);
}
/* A fix opened: lead, then quiet titled sections. */
.fix-detail {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	min-width: var(--space-0);
}
.fix-detail-lead {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.fix-level {
	font-size: var(--font-size-xs);
}
.fix-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: var(--space-0);
}
.fix-section-title {
	margin: var(--space-0);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.fix-why,
.fix-what {
	margin: var(--space-0);
	line-height: var(--leading-prose);
}
.fix-evidence,
.fix-related {
	display: flex;
	flex-direction: column;
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.fix-evidence > li,
.fix-related > li {
	padding: var(--space-6) var(--space-0);
	min-width: var(--space-0);
}
.fix-evidence > li + li,
.fix-related > li + li {
	border-top: var(--border-width) solid var(--color-border);
}
.fix-evidence > li {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.fix-evidence-text {
	min-width: var(--space-0);
	overflow-wrap: anywhere;
}
.fix-evidence-detail,
.fix-evidence-aside {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.fix-related > li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
}
.fix-related-icon {
	flex-shrink: 0;
	margin-top: var(--space-2);
	color: var(--color-muted);
}
.fix-related-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: var(--space-0);
}
.fix-related-label {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.fix-related-text {
	overflow-wrap: anywhere;
}
.fix-tags,
.fix-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
}
/* ---------- DnsRecords ---------- */
.dns-records {
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.dns-record {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-10) var(--space-12);
}
.dns-record + .dns-record {
	border-top: var(--border-width) solid var(--color-border);
}
.dns-record-head {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
}
.dns-record-purpose {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-0) var(--space-8);
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}
.dns-record-priority {
	color: var(--color-muted);
	font-weight: var(--font-weight-regular);
}
.dns-record-state {
	flex-shrink: 0;
}
/* Name and value boxes line up, their copy buttons on one edge. */
.dns-record .copy-field {
	align-self: stretch;
}
.dns-record .copy-field-value {
	flex: 1;
}

/* Board: stages as columns of cards, all as tall as the tallest; sideways scroll when they don't fit. */
.board {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--board-col-min), 1fr);
	gap: var(--board-col-gap);
	align-items: stretch;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--space-0);
}
.board-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	scroll-snap-align: start;
}
.board-col-head {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	height: var(--panel-header-height);
	padding: var(--space-0) var(--space-8) var(--space-0) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.board-col-title {
	min-width: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.board-col-count {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.board-col-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	margin-left: auto;
}
.board-cards {
	display: flex;
	flex-direction: column;
	gap: var(--board-card-gap);
	margin: var(--space-0);
	padding: var(--space-8);
	list-style: none;
}
.board-item {
	min-width: 0;
}
/* Dragging: the card left behind fades, columns that take it are dashed, the one under it lights up. */
.board-card.is-draggable {
	cursor: grab;
}
.board-card.is-dragging {
	opacity: var(--board-drag-opacity);
}
.board.is-dragging .board-col {
	transition:
		border-color var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out);
}
.board-col.is-droppable {
	border-style: dashed;
	border-color: var(--color-muted);
}
.board-col.is-drop-over {
	border-color: var(--color-accent);
	background: var(--color-accent-muted);
}
/* An empty column: mark, two lines, one small action, each at a set height so empty columns line up. */
.board-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-16) var(--space-12);
	text-align: center;
}
.board-empty-text {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--font-size-xs) * var(--leading-prose) * 2);
	max-width: var(--board-empty-text-width);
	margin: var(--space-0);
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
	color: var(--color-muted);
	text-wrap: balance;
}
.board-empty-action {
	display: flex;
	align-items: center;
	min-height: var(--control-height);
}
/* No empty column has an action: no row to keep. */
.board:not(:has(.board-empty-action > *)) .board-empty-action {
	display: none;
}
/* Marks draw left to right. */
.board-col:nth-child(2) .empty-mark {
	--empty-mark-delay: var(--board-empty-stagger);
}
.board-col:nth-child(3) .empty-mark {
	--empty-mark-delay: calc(var(--board-empty-stagger) * 2);
}
.board-col:nth-child(4) .empty-mark {
	--empty-mark-delay: calc(var(--board-empty-stagger) * 3);
}
.board-col:nth-child(5) .empty-mark {
	--empty-mark-delay: calc(var(--board-empty-stagger) * 4);
}
.board-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	width: 100%;
	min-width: 0;
	padding: var(--space-8) var(--space-10);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	color: inherit;
	font: inherit;
	text-align: left;
}
a.board-card:hover,
button.board-card:hover {
	color: inherit;
	border-color: var(--color-muted);
}
.board-card.is-selected {
	border-color: var(--color-accent);
	box-shadow: inset var(--border-width) 0 0 var(--color-accent);
}
.board-card-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	min-width: 0;
}
.board-card-lead {
	display: inline-flex;
	flex-shrink: 0;
	padding-top: var(--space-1);
}
.board-card-titles {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.board-card-title,
.board-card-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.board-card-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}
.board-card-sub {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.board-card-badge {
	flex-shrink: 0;
}
.board-card-body {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
}
.board-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.board.is-loading .board-card {
	gap: var(--space-8);
}
@media (max-width: 639px) {
	.board {
		grid-auto-columns: var(--board-col-phone);
		scroll-snap-type: x mandatory;
	}
}

/* Quote: words set apart from the app's own (an AI's answer, the note Ask drafts from). */
.quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: var(--space-0);
	padding: var(--space-2) var(--space-0) var(--space-2) var(--space-10);
	border-left: var(--space-2) solid var(--color-accent-muted);
	min-width: var(--space-0);
}
.quote-caption {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.quote-text {
	margin: var(--space-0);
	color: var(--color-ink);
	overflow-wrap: anywhere;
}


/* ./components/charts.css */
/* charts group components. Tokens only: see tokens/charts.css. */

/* Chart frame used by LineChart and ColumnChart */
.chart,
.funnel-plot {
	position: relative;
	width: 100%;
	min-width: 0;
}
.chart svg,
.funnel-plot svg {
	display: block;
	/* Fill the container so the measured width never props it open. */
	width: 100%;
	overflow: visible;
}
.chart:focus-visible,
.funnel-plot:focus-visible {
	outline-offset: var(--space-2);
	border-radius: var(--radius-sm);
}
.chart-grid line {
	stroke: var(--color-border);
	stroke-width: var(--chart-hairline);
}
.chart-axis {
	fill: var(--color-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-2xs);
	font-variant-numeric: tabular-nums;
}
.chart-label {
	fill: var(--color-ink);
	font-family: var(--font-ui);
	font-size: var(--font-size-2xs);
}
.chart-line {
	fill: none;
	stroke-width: var(--chart-line-width);
	stroke-linejoin: round;
	stroke-linecap: round;
}
.chart-line-accent {
	stroke: var(--color-accent);
}
.chart-line-muted {
	stroke: var(--color-muted);
}
/* Other entities beside the accent one: categorical hues, each named in the legend. */
.chart-line-orange {
	stroke: var(--color-cat-orange);
}
.chart-line-aqua {
	stroke: var(--color-cat-aqua);
}
.chart-line-violet {
	stroke: var(--color-cat-violet);
}
.chart-area {
	fill: var(--color-accent-muted);
	stroke: none;
}
.chart-threshold {
	stroke: var(--color-warn);
	stroke-width: var(--chart-hairline);
}
.chart-crosshair {
	stroke: var(--color-muted);
	stroke-width: var(--chart-hairline);
}
.chart-dot {
	fill: var(--color-accent);
	stroke: var(--color-surface);
	stroke-width: var(--chart-dot-ring);
}
.chart-dot.is-muted {
	fill: var(--color-muted);
}
.chart-dot.is-orange {
	fill: var(--color-cat-orange);
}
.chart-dot.is-aqua {
	fill: var(--color-cat-aqua);
}
.chart-dot.is-violet {
	fill: var(--color-cat-violet);
}
.chart-dot.is-danger {
	fill: var(--color-danger);
}
.chart-dot.is-warn {
	fill: var(--color-warn);
}
.chart-hit {
	fill: transparent;
	cursor: crosshair;
}
/* LineChart fill: the panel becomes a column and the chart takes what's left.
 * Basis 0 (with the chart's own height as the floor) so it can shrink back. */
.panel:has(.chart.is-fill) {
	display: flex;
	flex-direction: column;
}
.panel:has(.chart.is-fill) > .data-state {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
}
.chart.is-fill {
	flex: 1 1 0;
	overflow: hidden;
}
/* Selectable charts: drag for a range, click for one point. */
.chart.is-selectable .chart-hit {
	cursor: pointer;
	touch-action: pan-y;
}
.chart.is-selectable {
	-webkit-user-select: none;
	user-select: none;
}
.chart-selection {
	fill: var(--chart-selection);
	pointer-events: none;
}
.chart-column {
	fill: var(--color-accent);
	transition: fill var(--duration-fast);
}
.chart-column.is-active {
	fill: var(--color-accent-hover);
}
.chart-tone-warn .chart-column {
	fill: var(--color-warn);
}
.chart-tone-danger .chart-column {
	fill: var(--color-danger);
}
.chart-tone-danger .chart-column.is-active {
	fill: var(--color-danger-hover);
}
/* The measure below the baseline (lost under new) is always danger. */
.chart-column-below {
	fill: var(--color-danger);
}
.chart-column-below.is-active {
	fill: var(--color-danger-hover);
}
.chart-baseline {
	stroke: var(--color-muted);
	stroke-width: var(--chart-hairline);
}

/* ChartTooltip */
.chart-tooltip {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: max-content;
	min-width: var(--chart-tooltip-min-width);
	padding: var(--space-6) var(--space-10) var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	color: var(--color-ink);
	font-size: var(--font-size-xs);
	pointer-events: none;
}
.chart-tooltip.is-anchored {
	position: absolute;
	z-index: var(--z-tooltip);
}
.chart-tooltip.is-flipped {
	transform: translateX(-100%);
}
.chart-tooltip-title {
	margin-bottom: var(--space-2);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.chart-tooltip-row {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.chart-tooltip-row.is-secondary {
	color: var(--color-muted);
}
.chart-tooltip-label {
	flex-grow: 1;
}
.chart-tooltip-value {
	font-weight: var(--font-weight-medium);
}
.chart-tooltip-row.is-secondary .chart-tooltip-value {
	font-weight: var(--font-weight-regular);
}
.chart-tooltip-sub {
	color: var(--color-muted);
}

/* Legend */
.legend {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
}
.legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}
.legend-label-short {
	display: none;
}
@container (max-width: 639px) {
	/* Visually hidden, not display:none: screen readers keep the full name (the short one is aria-hidden). */
	.legend-label-full {
		position: absolute;
		width: var(--space-1);
		height: var(--space-1);
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.legend-label-short {
		display: inline;
	}
}
.legend-swatch {
	display: inline-block;
	flex-shrink: 0;
	width: var(--legend-swatch-width);
	height: var(--legend-swatch-height);
	border-radius: var(--radius-full);
}
.legend-swatch.is-dashed {
	height: 0;
	border-top: var(--legend-swatch-height) dashed var(--color-muted);
	border-radius: 0;
	background: none;
}
.legend-accent {
	background: var(--color-accent);
}
.legend-soft {
	background: var(--chart-accent-soft);
}
.legend-muted {
	background: var(--color-muted);
}
.legend-ink {
	background: var(--color-ink);
}
.legend-live {
	background: var(--color-live);
}
.legend-warn {
	background: var(--color-warn);
}
.legend-danger {
	background: var(--color-danger);
}
.legend-orange {
	background: var(--color-cat-orange);
}
.legend-aqua {
	background: var(--color-cat-aqua);
}
.legend-violet {
	background: var(--color-cat-violet);
}

/* Sparkline */
.sparkline {
	display: block;
	flex-shrink: 0;
}
.sparkline polyline {
	fill: none;
	stroke-width: var(--sparkline-width);
	stroke-linejoin: round;
}
/* Fill: as wide as the cell, stretched sideways only; the line keeps its weight. */
.sparkline.is-fill {
	width: 100%;
}
.sparkline.is-fill polyline {
	vector-effect: non-scaling-stroke;
}
.sparkline-accent polyline {
	stroke: var(--color-accent);
}
.sparkline-danger polyline {
	stroke: var(--color-danger);
}
.sparkline-muted polyline {
	stroke: var(--color-muted);
}

/* FunnelChart */
.funnel {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}
.funnel-head,
.funnel-foot {
	display: grid;
}
.funnel-head {
	padding-bottom: var(--space-10);
}
.funnel-foot {
	align-items: start;
	padding-top: var(--space-10);
}
.funnel-step-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}
.funnel-step-name {
	display: flex;
	align-items: baseline;
	gap: var(--space-6);
	min-width: 0;
}
.funnel-index {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.funnel-event {
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.funnel-count {
	font-size: var(--font-size-stat);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
}
.funnel-unit {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: normal;
	color: var(--color-muted);
}
.funnel-track {
	fill: var(--color-surface-2);
}
.funnel-separator {
	stroke: var(--color-border);
	stroke-width: var(--chart-hairline);
}
.funnel-stop-start {
	stop-color: var(--funnel-fill-start);
}
.funnel-stop-mid {
	stop-color: var(--funnel-fill-mid);
}
.funnel-stop-end {
	stop-color: var(--funnel-fill-end);
}
.funnel-stop-gloss {
	stop-color: var(--funnel-gloss);
}
.funnel-stop-clear {
	stop-color: var(--funnel-clear);
}
.funnel-stop-shade {
	stop-color: var(--funnel-shade);
}
.funnel-stop-drop {
	stop-color: var(--funnel-drop);
}
.funnel-pct {
	fill: var(--color-on-accent);
	paint-order: stroke;
	stroke: var(--color-heat);
	stroke-width: var(--funnel-pct-halo);
	stroke-linejoin: round;
	font-family: var(--font-ui);
	font-weight: var(--font-weight-semibold);
	pointer-events: none;
}
.funnel-pct-lg {
	font-size: var(--font-size-lg);
}
.funnel-pct-md {
	font-size: var(--funnel-pct-md);
}
.funnel-pct-sm {
	font-size: var(--font-size-sm);
}
.funnel-pct-outside {
	fill: var(--color-ink);
	stroke: none;
	font-size: var(--font-size-sm);
}
.funnel-caption {
	padding: var(--space-0) var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.funnel-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-0) var(--space-4);
	text-align: center;
}
.funnel-caption:first-child {
	padding-left: var(--space-0);
}
.funnel-drop-count {
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
	color: var(--color-danger-ink);
}
.funnel-drop-note {
	max-width: var(--funnel-drop-note-max);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.funnel-drop-link {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-accent-ink);
}
a.funnel-drop:hover .funnel-drop-link {
	text-decoration: underline;
}

/* MiniFunnel */
.mini-funnel {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}
.mini-funnel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-12);
	min-width: 0;
	font-size: var(--font-size-sm);
}
.mini-funnel-title {
	min-width: 0;
	overflow: hidden;
	font-weight: var(--font-weight-medium);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mini-funnel-overall {
	flex-shrink: 0;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}
/* Event, bar, count, step rate: the columns line up across rows. */
.mini-funnel-steps {
	display: grid;
	grid-template-columns:
		minmax(0, var(--mini-funnel-event-width)) minmax(0, 1fr)
		auto;
	align-items: center;
	gap: var(--space-6) var(--space-10);
}
.mini-funnel-steps.has-rates {
	grid-template-columns:
		minmax(0, var(--mini-funnel-event-width)) minmax(0, 1fr)
		auto var(--mini-funnel-rate-width);
}
.mini-funnel-step {
	display: contents;
}
.mini-funnel-event {
	overflow: hidden;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mini-funnel-track {
	display: flex;
	height: var(--mini-funnel-bar);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--color-hover);
}
.mini-funnel-bar {
	border-radius: var(--radius-full);
	background: var(--color-accent);
}
.mini-funnel-step + .mini-funnel-step .mini-funnel-bar {
	background: var(--chart-accent-soft);
}
.mini-funnel-step:last-child .mini-funnel-bar {
	background: var(--color-accent);
}
.mini-funnel-count {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	text-align: right;
}
.mini-funnel-rate {
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
	text-align: right;
}

/* Waterfall */
.waterfall {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.waterfall-rows {
	display: flex;
	flex-direction: column;
}
.waterfall-row {
	display: grid;
	grid-template-columns: var(--waterfall-name-width) minmax(0, 1fr) var(
			--waterfall-value-width
		);
	gap: var(--space-12);
	align-items: center;
	height: var(--waterfall-row-height);
	border-top: var(--border-width) solid var(--color-border);
}
.waterfall-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.waterfall-track {
	position: relative;
	height: var(--waterfall-track);
}
.waterfall-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: var(--radius-sm);
	background: var(--color-accent);
}
.waterfall-bar-soft {
	background: var(--chart-accent-soft);
}
.waterfall-bar-muted {
	background: var(--color-muted);
}
.waterfall-bar-live {
	background: var(--color-live);
}
.waterfall-bar-warn {
	background: var(--color-warn);
}
.waterfall-bar-danger {
	background: var(--color-danger);
}
/* Faint time gridlines behind the bars, one per axis tick. */
.waterfall-grid {
	position: absolute;
	top: calc(var(--waterfall-track) / 2 - var(--waterfall-row-height) / 2);
	bottom: calc(var(--waterfall-track) / 2 - var(--waterfall-row-height) / 2);
	width: var(--chart-hairline);
	background: var(--color-border);
}
.waterfall-axis {
	display: grid;
	grid-template-columns: var(--waterfall-name-width) minmax(0, 1fr) var(
			--waterfall-value-width
		);
	gap: var(--space-12);
	height: var(--waterfall-axis-height);
}
.waterfall-ticks {
	position: relative;
}
.waterfall-tick {
	position: absolute;
	top: 0;
	color: var(--color-muted);
	font-size: var(--font-size-2xs);
	transform: translateX(-50%);
	white-space: nowrap;
}
.waterfall-tick:first-child {
	transform: none;
}
.waterfall-value {
	font-size: var(--font-size-xs);
	text-align: right;
}

/* Gauge */
.gauge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	vertical-align: middle;
}
.gauge-ring {
	display: block;
	flex-shrink: 0;
}
.gauge-sm .gauge-ring {
	width: var(--gauge-sm);
	height: var(--gauge-sm);
}
.gauge-md .gauge-ring {
	width: var(--gauge-md);
	height: var(--gauge-md);
}
.gauge-ring circle {
	fill: none;
	stroke-width: var(--gauge-stroke);
}
.gauge-track {
	stroke: var(--color-hover);
}
.gauge-accent .gauge-arc {
	stroke: var(--color-accent);
}
.gauge-muted .gauge-arc {
	stroke: var(--color-muted);
}
.gauge-sm {
	gap: var(--space-6);
}

/* SegmentedBar */
.segmented-bar-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	min-width: 0;
}
.segmented-bar {
	display: flex;
	gap: var(--segment-gap);
	width: 100%;
}
.segmented-bar-sm {
	height: var(--meter-sm);
}
.segmented-bar-md {
	height: var(--meter-md);
}
/* Nothing to split yet: the empty track, so the row doesn't look broken. */
.segmented-bar.is-empty {
	border-radius: var(--radius-sm);
	background: var(--color-border);
}
.segment {
	flex-basis: 0;
	min-width: var(--segment-gap);
	border-radius: var(--radius-sm);
}
.segment-accent {
	background: var(--color-accent);
}
.segment-muted {
	background: var(--color-muted);
}
.segment-live {
	background: var(--color-live);
}
.segment-warn {
	background: var(--color-warn);
}
.segment-danger {
	background: var(--color-danger);
}
.segmented-bar-legend {
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.segmented-bar-wrap.is-ends {
	flex-direction: row;
	align-items: center;
	gap: var(--space-8);
}
.segmented-bar-wrap.is-ends .segmented-bar {
	flex: 1 1 auto;
	min-width: var(--space-32);
}
.segmented-bar-end {
	flex-shrink: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}

/* HitStrip: one square per try, oldest first. */
.hit-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hit-gap);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.hit-square {
	flex-shrink: 0;
	width: var(--hit-size);
	height: var(--hit-size);
	border: var(--border-width) solid var(--color-muted);
	border-radius: var(--radius-sm);
}
.hit-square.is-hit {
	border-color: var(--color-accent);
	background: var(--color-accent);
}
.hit-square.is-empty {
	border-style: dashed;
	border-color: var(--color-border);
}


/* ./components/chat.css */
/* chat group: AskPanel, ChatLog, messages, ChatTurn, Markdown, Thinking, ToolCalls, ChatError, Suggestions, ChatHistory, ResultTable, Composer. Tokens only: see tokens/chat.css. */

/* AskPanel */
.ask {
	display: flex;
	flex-direction: column;
	width: var(--ask-width);
	max-width: 100%;
	height: 100%;
	min-height: var(--space-0);
	border-left: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
}
.ask-head {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--space-6);
	height: var(--topbar-height);
	padding: var(--space-0) var(--space-8) var(--space-0) var(--space-14);
	border-bottom: var(--border-width) solid var(--color-border);
}
.ask-title {
	flex-grow: 1;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.ask-banner {
	flex-shrink: 0;
	padding: var(--space-8) var(--space-14) var(--space-0);
}
.ask-context {
	flex: 1 1 auto;
}
.ask-context-track {
	gap: var(--space-4);
}
.ask-context-track > * {
	flex-shrink: 0;
}
.followups-label {
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.ask-log {
	flex-grow: 1;
	min-height: var(--space-0);
}
.ask-suggestions {
	flex-shrink: 0;
	padding: var(--space-8) var(--space-14) var(--space-10);
}
/* Phone-sized container: the panel takes the whole screen. */
@container (max-width: 639px) {
	.ask {
		width: 100%;
		border-left: none;
	}
}

/* AskEmpty */
.ask-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	margin: auto var(--space-0);
	text-align: center;
}
.ask-empty-title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.ask-empty-text {
	max-width: var(--ask-empty-max);
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.ask-empty-starters {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: var(--space-6);
	margin-top: var(--space-8);
	text-align: left;
}

/* Messages */
.msg-user-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
}
.msg-user-copy {
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast);
}
.msg-user-row:hover .msg-user-copy,
.msg-user-row:focus-within .msg-user-copy {
	opacity: var(--opacity-visible);
}
.msg-user.is-pending {
	opacity: var(--user-pending-opacity);
}
.msg-user {
	max-width: var(--ask-bubble-max);
	padding: var(--space-8) var(--space-10);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	line-height: var(--leading-prose);
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}
.msg-assistant {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	line-height: var(--leading-relaxed);
}
.msg-assistant p {
	margin: var(--space-0);
}
.msg-assistant strong {
	font-weight: var(--font-weight-semibold);
}
.msg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
}
.version-switcher {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.version-switcher-count {
	min-width: var(--space-24);
	text-align: center;
}
.msg-tools {
	display: inline-flex;
	gap: var(--space-2);
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast);
}
.msg-assistant:hover .msg-tools,
.msg-tools:focus-within,
.msg-tools:has([aria-pressed='true']) {
	opacity: var(--opacity-visible);
}
@media (hover: none) {
	.msg-user-copy,
	.version-switcher {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--font-size-xs);
		color: var(--color-muted);
	}
	.version-switcher-count {
		min-width: var(--space-24);
		text-align: center;
	}
	.msg-tools {
		opacity: var(--opacity-visible);
	}
}
.msg-pending {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.msg-pending-dots {
	display: inline-flex;
	gap: var(--space-3);
}
.msg-pending-dots span {
	width: var(--pending-dot-size);
	height: var(--pending-dot-size);
	border-radius: var(--radius-full);
	background: var(--color-accent-ink);
	animation: msg-pending var(--pending-duration) ease-in-out infinite;
}
.msg-pending-dots span:nth-child(2) {
	animation-delay: var(--pending-stagger);
}
.msg-pending-dots span:nth-child(3) {
	animation-delay: calc(var(--pending-stagger) * 2);
}
@keyframes msg-pending {
	0%,
	100% {
		opacity: var(--pending-dim);
	}
	50% {
		opacity: var(--pending-full);
	}
}
@media (prefers-reduced-motion: reduce) {
	.msg-pending-dots span {
		opacity: var(--pending-dim);
	}
}
.msg-error {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--color-danger-ink);
	font-size: var(--font-size-xs);
}
.msg-error-text {
	flex-grow: 1;
}

/* FollowUps */
.followups {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-top: auto;
}
.followup {
	padding: var(--space-7) var(--space-10);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: transparent;
	text-align: left;
	line-height: var(--leading-prose);
	transition: background var(--duration-fast);
}
.followup:hover {
	background: var(--color-hover);
}

/* ResultTable */
.result-table {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	overflow: hidden;
}
.result-table table {
	width: 100%;
	border-collapse: collapse;
	line-height: var(--leading-base);
}
.result-table th,
.result-table td {
	padding: var(--space-6) var(--space-10);
	border-bottom: var(--border-width) solid var(--color-border);
	text-align: left;
}
.result-table tbody tr:last-child td {
	border-bottom: none;
}
.result-table th {
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.result-table .is-numeric {
	text-align: right;
}
.result-table td.is-emphasis {
	font-weight: var(--font-weight-medium);
}
.result-table.is-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}
.result-table.is-scroll th,
.result-table.is-scroll td {
	white-space: nowrap;
}

/* Composer */
.composer {
	flex-shrink: 0;
	margin: var(--space-0);
	padding: var(--space-10) var(--space-14) var(--space-14);
	border-top: var(--border-width) solid var(--color-border);
}
.composer-box {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	transition: border-color var(--duration-fast);
}
.composer-box:focus-within {
	border-color: var(--color-accent);
}
.composer-input {
	min-height: var(--composer-min-height);
	max-height: var(--composer-max-height);
	padding: var(--space-8) var(--space-10);
	border: none;
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
	resize: none;
	font-size: var(--font-size-sm);
	line-height: var(--leading-prose);
}
.composer-input::placeholder {
	color: var(--color-muted);
}
.composer-foot {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	border-top: var(--border-width) solid var(--color-border);
}
.composer-attachments {
	display: flex;
	flex-grow: 1;
	align-items: center;
	gap: var(--space-4);
	min-width: var(--space-0);
}
.composer-model {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.composer-box.is-disabled {
	opacity: var(--opacity-disabled);
}
.composer-stop {
	color: var(--color-ink);
}

/* ChatLog */
.chat-log {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--space-0);
}
/*
 * Positioned so what sits absolutely inside a message (a card's sr-only
 * status) scrolls with it instead of making the page taller.
 */
.chat-log-scroll {
	position: relative;
	flex-grow: 1;
	min-height: var(--space-0);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Focusable so the keyboard can scroll it: show that it has focus. */
.chat-log-scroll:focus-visible {
	outline-offset: calc(var(--border-width-strong) * -1);
}
.chat-log-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	min-height: 100%;
	padding: var(--space-14);
}
.scroll-bottom {
	position: absolute;
	bottom: var(--scroll-bottom-offset);
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--scroll-bottom-size);
	height: var(--scroll-bottom-size);
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	box-shadow: var(--shadow-popover);
	color: var(--color-ink);
	transform: translateX(-50%);
	animation: fade-in var(--duration-fast) var(--ease-out);
}
.scroll-bottom-dot {
	position: absolute;
	top: var(--space-0);
	right: var(--space-0);
	width: var(--unread-dot-size);
	height: var(--unread-dot-size);
	border: var(--border-width-strong) solid var(--color-surface-2);
	border-radius: var(--radius-full);
	background: var(--color-accent);
}

/* Markdown */
.md {
	display: flex;
	flex-direction: column;
	gap: var(--md-gap);
	line-height: var(--leading-relaxed);
	overflow-wrap: anywhere;
}
.md-sm {
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
}
.md-muted {
	color: var(--color-muted);
}
.md p,
.md ul,
.md ol,
.md blockquote {
	margin: var(--space-0);
}
.md strong {
	font-weight: var(--font-weight-semibold);
}
.md ul,
.md ol {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-left: var(--md-list-indent);
}
.md li > * + * {
	margin-top: var(--space-4);
}
.md blockquote {
	padding-left: var(--space-10);
	border-left: var(--md-quote-width) solid var(--color-border);
	color: var(--color-muted);
}
.md hr {
	width: 100%;
	height: var(--border-width);
	margin: var(--space-0);
	border: none;
	background: var(--color-border);
}
.md-heading {
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-base);
}
.md-h1 {
	font-size: var(--md-h1);
}
.md-h2 {
	font-size: var(--md-h2);
}
.md-h3 {
	font-size: var(--md-h3);
}
.md-h4 {
	font-size: var(--md-h4);
}
.md-code {
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--md-code-bg);
	font-family: var(--font-mono);
	font-size: var(--md-code-size);
}
/* A word the reader is looking for (the app's name in an answer). */
.md-mark {
	padding: var(--space-0) var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
	font-weight: var(--font-weight-semibold);
}
.md-link {
	color: var(--color-accent-ink);
}
.md-link:hover {
	color: var(--color-accent-ink);
	text-decoration: underline;
}

/* DayDivider: where a day starts in a chat */
.day-divider {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.day-divider::before,
.day-divider::after {
	content: '';
	flex: 1 1 var(--space-12);
	height: var(--border-width);
	background: var(--color-border);
}
.day-divider-text {
	flex-shrink: 0;
}

/* PreviewLink: the site's icon before the words; LinkPreviewCard on hover */
.preview-link-wrap {
	display: inline;
}
.preview-link-icon {
	display: inline-block;
	width: var(--link-icon-size);
	height: var(--link-icon-size);
	margin-right: var(--space-4);
	border-radius: var(--radius-sm);
	vertical-align: text-bottom;
}
.link-preview-popover {
	width: var(--link-preview-width);
	max-width: var(--link-preview-max-width);
	padding: var(--space-0);
	overflow: hidden;
}
.link-preview-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.link-preview {
	display: flex;
	flex-direction: column;
}
.link-preview-image {
	display: block;
	width: 100%;
	aspect-ratio: var(--link-preview-image-ratio);
	object-fit: cover;
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.link-preview-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-10) var(--space-12);
}
.link-preview-title {
	margin: var(--space-0);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-ink);
	line-height: var(--leading-tight);
}
.link-preview-text {
	display: -webkit-box;
	margin: var(--space-0);
	overflow: hidden;
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
	color: var(--color-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--link-preview-lines);
}
.link-preview-url {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin: var(--space-0);
	padding-top: var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.link-preview-address {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.link-preview-open {
	flex-shrink: 0;
}

/* ThinkingSparkles, StillWorking */
.sparkles {
	flex-shrink: 0;
	overflow: visible;
	color: var(--color-accent-ink);
	fill: currentColor;
}
.sparkles-glow {
	opacity: var(--spark-glow-low);
}
.spark,
.spark-breathe {
	transform-box: fill-box;
	transform-origin: center;
}
.spark-breathe {
	opacity: var(--spark-opacity-still);
}
.sparkles.is-active .spark {
	animation: spark-turn linear infinite;
}
.sparkles.is-active .spark-breathe {
	animation: spark-breathe ease-in-out infinite alternate;
}
.sparkles.is-active .sparkles-glow {
	animation: spark-glow var(--spark-a-breathe) ease-in-out infinite alternate;
}
.sparkles.is-active .spark-a {
	animation-duration: var(--spark-a-turn);
}
.sparkles.is-active .spark-a .spark-breathe {
	animation-duration: var(--spark-a-breathe);
}
.sparkles.is-active .spark-b {
	animation-duration: var(--spark-b-turn);
	animation-direction: reverse;
	animation-delay: var(--spark-b-phase);
}
.sparkles.is-active .spark-b .spark-breathe {
	animation-duration: var(--spark-b-breathe);
	animation-delay: var(--spark-b-phase);
}
.sparkles.is-active .spark-c {
	animation-duration: var(--spark-c-turn);
	animation-delay: var(--spark-c-phase);
}
.sparkles.is-active .spark-c .spark-breathe {
	animation-duration: var(--spark-c-breathe);
	animation-delay: var(--spark-c-phase);
}
@keyframes spark-turn {
	to {
		transform: rotate(1turn);
	}
}
@keyframes spark-breathe {
	from {
		opacity: var(--spark-opacity-low);
		transform: scale(0.94);
	}
	to {
		opacity: var(--spark-opacity-high);
		transform: scale(1.02);
	}
}
@keyframes spark-glow {
	from {
		opacity: var(--spark-glow-low);
	}
	to {
		opacity: var(--spark-glow-high);
	}
}
.chat-thinking {
	display: flex;
	padding: var(--space-4) var(--space-0);
}
.still-working {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ReasoningDisclosure */
.reasoning {
	border-radius: var(--radius-md);
	background: var(--reasoning-bg);
}
.reasoning-head {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: 100%;
	padding: var(--space-8) var(--space-10);
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	text-align: left;
	color: var(--color-muted);
}
.reasoning-label {
	flex-grow: 1;
}
.reasoning-label.is-active {
	animation: label-pulse var(--label-pulse-duration) ease-in-out infinite
		alternate;
}
@keyframes label-pulse {
	from {
		opacity: var(--spark-opacity-low);
	}
	to {
		opacity: var(--spark-opacity-high);
	}
}
.reasoning-chevron,
.tool-group-chevron,
.tool-row-chevron {
	transition: transform var(--duration-fast) var(--ease-out);
}
.reasoning.is-open .reasoning-chevron,
.tool-group.is-open .tool-group-chevron,
.tool-row.is-open .tool-row-chevron {
	transform: rotate(90deg);
}
.reasoning-preview {
	padding: var(--space-0) var(--space-10) var(--space-8)
		calc(var(--space-10) + var(--icon-md) + var(--space-6));
	overflow: hidden;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.reasoning-body {
	padding: var(--space-0) var(--space-10) var(--space-10);
	animation: fade-in var(--duration-base) var(--ease-out);
}

/* ToolGroup, ToolRow, ToolDetail */
.chat-spinner {
	display: inline-block;
	flex-shrink: 0;
	width: var(--spinner-size);
	height: var(--spinner-size);
	border: var(--border-width-strong) solid var(--color-border);
	border-top-color: var(--color-accent-ink);
	border-radius: var(--radius-full);
	animation: spin var(--spinner-duration) linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}
.tool-group-head,
.tool-row-main {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: 100%;
	padding: var(--space-2) var(--space-0);
	border: none;
	background: transparent;
	font-size: var(--font-size-xs);
	text-align: left;
	color: var(--color-muted);
}
.tool-group-head {
	width: auto;
	font-weight: var(--font-weight-medium);
}
.tool-group-head:hover,
button.tool-row-main:hover {
	color: var(--color-ink);
}
.tool-group-failed {
	color: var(--color-danger-ink);
}
.tool-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin: var(--space-6) var(--space-0) var(--space-0) var(--space-6);
	padding: var(--space-0) var(--space-0) var(--space-0)
		calc(var(--tool-rail-indent) - var(--space-6));
	border-left: var(--border-width) solid var(--color-border);
	list-style: none;
	animation: fade-in var(--duration-base) var(--ease-out);
}
.tool-row.is-done .tool-row-main {
	color: var(--tool-done-ink);
}
.tool-row.is-failed .tool-row-main {
	color: var(--color-danger-ink);
}
.tool-row-label {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.tool-row-duration {
	flex-shrink: 0;
	color: var(--color-muted);
}
.tool-detail {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin: var(--space-6) var(--space-0) var(--space-4);
}
.tool-detail-meta {
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}

/* ChatTurn states */
.chat-block-pending {
	height: var(--block-pending-height);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	animation: label-pulse var(--label-pulse-duration) ease-in-out infinite
		alternate;
}
.chat-stopped {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ChatError */
.chat-error {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
}
.chat-error-message {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	line-height: var(--leading-prose);
}
.chat-error-error .chat-error-message {
	color: var(--color-danger-ink);
}
.chat-error-limit .chat-error-message .icon {
	color: var(--color-muted);
}
.chat-error-status {
	color: var(--color-muted);
}

/* SuggestionPills (an HScroll row) */
.pills {
	gap: var(--space-6);
}
.pill {
	flex-shrink: 0;
	height: var(--chip-pill-height);
	padding: var(--space-0) var(--space-10);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	transition: background var(--duration-fast);
}
.pill:hover:not(:disabled) {
	background: var(--color-hover);
}

/* ChatHistory */
.history-body {
	display: flex;
	flex-direction: column;
	width: var(--history-width);
	max-width: var(--popover-max-viewport);
	padding: var(--space-4);
}
.popover-sheet .history-body {
	width: 100%;
	max-width: none;
}
/* New chat reads as one more row: same height, padding and hover. */
.history-new {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--row-height-nav);
	padding: var(--space-0) var(--space-8);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font-weight: var(--font-weight-medium);
	text-align: left;
}
.history-new:hover,
.history-more-row:hover {
	background: var(--color-hover);
}
.history-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	max-height: var(--history-list-max);
	margin: var(--space-4) var(--space-0) var(--space-0);
	padding: var(--space-4) var(--space-0) var(--space-0);
	border-top: var(--border-width) solid var(--color-border);
	overflow-y: auto;
	list-style: none;
}
/* Title and time on the left (the current chat's row is lit), a spinner on
 * the right while it answers; the actions lie over the row's end on hover or
 * focus, so nothing holds space for them. */
.history-row {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: var(--radius-sm);
}
.history-row:hover,
.history-row:focus-within,
.history-row.is-current {
	background: var(--color-hover);
}
.history-open {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-2);
	min-width: var(--space-0);
	padding: var(--space-6) var(--space-8);
	border: none;
	background: transparent;
	text-align: left;
}
.history-title {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: var(--space-0);
	font-weight: var(--font-weight-medium);
}
.history-title-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.history-star {
	flex-shrink: 0;
	color: var(--color-warn-ink);
}
.history-time {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.history-trail {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--icon-button-size);
	margin-right: var(--space-4);
}
.history-actions {
	position: absolute;
	top: 50%;
	right: var(--space-4);
	display: inline-flex;
	gap: var(--space-2);
	padding-left: var(--space-12);
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-hover) var(--space-12)
	);
	opacity: var(--opacity-hidden);
	pointer-events: none;
	transform: translateY(-50%);
}
.history-row:hover .history-actions,
.history-row:focus-within .history-actions {
	opacity: var(--opacity-visible);
	pointer-events: auto;
}
/* The actions take the status slot's place while they show. */
.history-row:hover .history-trail,
.history-row:focus-within .history-trail {
	visibility: hidden;
}
@media (hover: none) {
	.history-actions {
		position: static;
		padding-left: var(--space-0);
		background: none;
		opacity: var(--opacity-visible);
		pointer-events: auto;
		transform: none;
	}
}
.history-more-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	min-height: var(--row-height);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.history-state {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	padding: var(--space-10) var(--space-8);
	font-size: var(--font-size-xs);
}

/* DiffView */
.diff {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: var(--space-0);
}
.diff-file {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.diff-head {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-4) var(--space-8);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface-2);
	color: var(--color-muted);
}
.diff-path {
	flex: 1 1 auto;
	min-width: var(--space-0);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-ink);
}
.diff-count {
	flex-shrink: 0;
	font-size: var(--font-size-2xs);
}
.diff-added {
	color: var(--color-live-ink);
}
.diff-removed {
	color: var(--color-danger);
}
.diff-lines {
	margin: var(--space-0);
	max-height: var(--diff-max-height);
	overflow-y: auto;
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	line-height: var(--leading-code);
	white-space: pre-wrap;
	word-break: break-word;
}
.diff-line {
	display: block;
	padding: var(--space-0) var(--space-8) var(--space-0) var(--space-2);
}
.diff-marker {
	display: inline-block;
	width: var(--diff-marker-width);
	color: var(--color-muted);
	user-select: none;
}
.diff-line.is-add {
	background: var(--diff-add-bg);
}
.diff-line.is-remove {
	background: var(--diff-remove-bg);
}
.diff-line.is-gap {
	padding: var(--space-2) var(--space-8);
	background: var(--color-surface-2);
	color: var(--color-muted);
	font-family: var(--font-ui);
}
.diff-cut {
	padding: var(--space-4) var(--space-8);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}


/* ./components/overlays.css */
/* overlays group components: Dialog, Toast, CommandPalette, ShortcutsHelp, SequenceHint, AppSwitcher. Tokens only. */

/* Dialog (native <dialog> in the top layer) */
.dialog,
.palette {
	max-width: calc(var(--overlay-vw) - var(--dialog-margin) * 2);
	max-height: var(--dialog-max-height);
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	color: var(--color-ink);
	box-shadow: var(--shadow-popover);
	overflow: hidden;
}
.dialog::backdrop,
.palette::backdrop {
	background: var(--color-backdrop);
	animation: fade-in var(--duration-base) var(--ease-out);
}
.dialog[open] {
	display: flex;
	animation: dialog-in var(--duration-base) var(--ease-out);
}
@keyframes dialog-in {
	from {
		opacity: var(--opacity-hidden);
		transform: translateY(var(--space-8));
	}
}
.dialog-sm {
	width: var(--dialog-sm);
}
.dialog-md {
	width: var(--dialog-md);
}
.dialog-lg {
	width: var(--dialog-lg);
}
.dialog-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}
.dialog-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-16) var(--space-12) var(--space-0) var(--space-20);
}
.dialog-heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	flex-grow: 1;
	min-width: 0;
	padding-top: var(--space-4);
}
.dialog-title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.dialog-description {
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.dialog-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--space-16) var(--space-20) var(--space-0);
	overflow-y: auto;
	line-height: var(--leading-prose);
}
.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-8);
	padding: var(--space-16) var(--space-20);
}
.dialog-error {
	color: var(--color-danger-ink);
}
/* Who provides what the dialog sets up: one small line under the footer, past a hairline. */
.dialog-note {
	padding: var(--space-10) var(--space-20);
	border-top: var(--border-width) solid var(--color-border);
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
}
.dialog-body + .dialog-note {
	margin-top: var(--space-16);
}
/* The provider's name links to it: the hint link color, readable on the dialog in both themes. */
.dialog-note a {
	color: var(--hint-link);
}
.dialog-note a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: var(--link-underline-offset);
}
@media (max-width: 639px) {
	.dialog-md[open],
	.dialog-lg[open] {
		width: var(--overlay-vw);
		max-width: none;
		height: var(--overlay-dvh);
		max-height: none;
		border-radius: 0;
		padding-top: var(--safe-top);
		padding-bottom: var(--safe-bottom);
	}
	.dialog-sm[open] {
		width: var(--overlay-vw);
		max-width: none;
		margin: auto var(--space-0) var(--space-0);
		border-radius: var(--radius-md) var(--radius-md) 0 0;
		padding-bottom: var(--safe-bottom);
		animation-name: sheet-in;
	}
	.dialog-actions {
		flex-direction: column-reverse;
	}
	.dialog-actions > .btn {
		height: var(--touch-target);
	}
}

/* Toast */
.toast-region {
	position: fixed;
	right: var(--space-16);
	bottom: calc(var(--space-16) + var(--safe-bottom));
	z-index: var(--z-toast);
	width: var(--toast-width);
	max-width: calc(var(--overlay-vw) - var(--space-32));
	pointer-events: none;
}
.toast-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.toast {
	display: flex;
	align-items: flex-start;
	gap: var(--space-10);
	padding: var(--space-10) var(--space-8) var(--space-10) var(--space-12);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	box-shadow: var(--shadow-popover);
	pointer-events: auto;
	animation: toast-in var(--duration-base) var(--ease-out);
}
@keyframes toast-in {
	from {
		opacity: var(--opacity-hidden);
		transform: translateY(var(--space-8));
	}
}
.toast-icon {
	margin-top: var(--space-2);
}
.toast-success .toast-icon {
	color: var(--color-live-ink);
}
.toast-info .toast-icon {
	color: var(--color-accent-ink);
}
.toast-warn .toast-icon {
	color: var(--color-warn-ink);
}
.toast-danger .toast-icon {
	color: var(--color-danger-ink);
}
.toast-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex-grow: 1;
	min-width: 0;
	padding-top: var(--space-2);
}
.toast-title {
	font-weight: var(--font-weight-medium);
}
.toast-description {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	line-height: var(--leading-prose);
}
.toast-action {
	flex-shrink: 0;
	height: var(--icon-button-size);
	padding: var(--space-0) var(--space-8);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--color-accent-ink);
}
.toast-action:hover {
	background: var(--color-hover);
}
@media (max-width: 639px) {
	.toast-region {
		right: var(--space-8);
		left: var(--space-8);
		width: auto;
		max-width: none;
	}
	/* Above the phone tab bar, like the update pill. */
	body:has(.app-bottom-nav) .toast-region {
		bottom: calc(
			var(--space-16) + var(--bottom-nav-height) + var(--bottom-nav-float) +
				var(--safe-bottom)
		);
	}
}

/* Command palette */
.palette {
	width: var(--palette-width);
	margin-top: var(--palette-top);
}
.palette[open] {
	display: flex;
	animation: dialog-in var(--duration-fast) var(--ease-out);
}
.palette-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}
.palette-crumbs {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-10) var(--space-14) var(--space-0);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.palette-crumb {
	padding: var(--space-0);
	border: none;
	background: transparent;
	color: var(--color-muted);
}
.palette-crumb:hover {
	color: var(--color-ink);
}
.palette-crumb-step {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	color: var(--color-ink);
}
.palette-search {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-0) var(--space-14);
	border-bottom: var(--border-width) solid var(--color-border);
}
.palette-search-icon {
	color: var(--color-muted);
}
.palette-input {
	flex-grow: 1;
	min-width: 0;
	height: var(--topbar-height);
	padding: var(--space-0);
	border: none;
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
	font-size: var(--font-size-md);
}
.palette-input::placeholder {
	color: var(--color-muted);
}
.palette-list {
	flex: 1 1 auto;
	max-height: var(--palette-list-max);
	padding: var(--space-4) var(--space-6) var(--space-8);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.palette-section + .palette-section {
	margin-top: var(--space-4);
}
.palette-section-label {
	padding: var(--space-8) var(--space-8) var(--space-4);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.palette-row {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-height: var(--palette-row-height);
	padding: var(--space-0) var(--space-8);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.palette-row.is-active {
	background: var(--color-hover);
	box-shadow: var(--focus-bar);
}
.palette-row.is-disabled {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
}
.palette-row-icon {
	display: inline-flex;
	justify-content: center;
	width: var(--icon-md);
	flex-shrink: 0;
	color: var(--color-muted);
}
.palette-row.is-active .palette-row-icon {
	color: var(--color-accent-ink);
}
.palette-row-label {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.palette-row-hint,
.palette-row-group {
	flex-shrink: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.palette-row-check {
	color: var(--color-accent-ink);
}
.palette-row-more {
	color: var(--color-muted);
}
.palette-empty {
	padding: var(--space-24) var(--space-8);
	text-align: center;
	color: var(--color-muted);
}
.palette-foot {
	display: flex;
	gap: var(--space-16);
	padding: var(--space-8) var(--space-14);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.palette-foot span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
}
@media (max-width: 639px) {
	.palette {
		width: var(--overlay-vw);
		max-width: none;
		max-height: var(--overlay-dvh);
		margin: var(--space-0);
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		padding-top: var(--safe-top);
	}
	.palette-row {
		min-height: var(--touch-target);
	}
	.palette-foot {
		display: none;
	}
}

/* Shortcuts help */
.shortcuts-help {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-bottom: var(--space-20);
}
.shortcuts-help-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(var(--shortcuts-col-min), 1fr)
	);
	gap: var(--space-20) var(--space-24);
}
.shortcuts-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.shortcuts-group-label {
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.shortcuts-list {
	display: flex;
	flex-direction: column;
	margin: var(--space-0);
}
.shortcuts-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	min-height: var(--row-height-nav);
	border-bottom: var(--border-width) solid var(--color-border);
}
.shortcuts-row dd {
	margin: var(--space-0);
}

/* Pending sequence ("G then…") */
.sequence-hint {
	position: fixed;
	bottom: calc(var(--space-20) + var(--safe-bottom));
	left: 50%;
	z-index: var(--z-toast);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6) var(--space-12);
	/* Sized to its options: one row when it fits, wrapping only on narrow screens. */
	width: max-content;
	max-width: min(
		var(--sequence-hint-max),
		calc(var(--overlay-vw) - var(--space-32))
	);
	padding: var(--space-8) var(--space-12);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	box-shadow: var(--shadow-popover);
	font-size: var(--font-size-xs);
	transform: translateX(-50%);
	animation: fade-in var(--duration-fast) var(--ease-out);
}
.sequence-prefix,
.sequence-option {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
}

/* App switcher */
.app-switcher-trigger {
	width: 100%;
	text-align: left;
	color: inherit;
	cursor: pointer;
}
.app-switcher-trigger:hover {
	border-color: var(--color-muted);
}
.app-switcher {
	width: max-content;
	min-width: var(--app-switcher-min-width);
	max-width: min(var(--app-switcher-max-width), var(--popover-max-viewport));
}
.popover-sheet .app-switcher {
	width: 100%;
	max-width: none;
}
.app-switcher-search {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-0) var(--space-10);
	border-bottom: var(--border-width) solid var(--color-border);
}
.app-switcher-search input {
	flex-grow: 1;
	height: var(--panel-header-height);
	border: none;
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
}
.app-switcher-list {
	max-height: var(--app-switcher-list-max);
	padding: var(--space-4);
	overflow-y: auto;
}
.app-switcher-heading {
	margin-top: var(--space-4);
	padding: var(--space-8) var(--space-8) var(--space-4);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.app-switcher-heading:first-child {
	margin-top: var(--space-0);
	border-top: none;
}
.app-switcher-row {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-height: var(--row-height-md);
	padding: var(--space-0) var(--space-8);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.app-switcher-row.is-link {
	min-height: var(--row-height);
	color: var(--color-muted);
}
.app-switcher-row.is-active {
	background: var(--color-hover);
	color: var(--color-ink);
	box-shadow: var(--focus-bar);
}
.app-switcher-link-icon {
	display: inline-flex;
	justify-content: center;
	width: var(--logo-sm);
}
.app-switcher-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}
.app-switcher-name {
	flex-grow: 1;
	font-weight: var(--font-weight-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app-switcher-sub {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app-switcher-check {
	color: var(--color-accent-ink);
}
.app-switcher-empty {
	padding: var(--space-16) var(--space-8);
	text-align: center;
	color: var(--color-muted);
}
@media (max-width: 639px) {
	.app-switcher-row {
		min-height: var(--touch-target);
	}
}

/* Contact support (Support.tsx): message, screenshot, what's attached. */
.support {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-bottom: var(--space-16);
}
.support-shot-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
}
.support-shot {
	display: block;
	width: 100%;
	max-height: var(--support-shot-max);
	object-fit: contain;
	object-position: top;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}


/* ./components/mobile.css */
/*
 * Mobile & PWA: responsive shell rules, BottomNav, Sheet, PageGrid,
 * PullToRefresh, PWA prompts. Tokens only (tokens/core.css, tokens/mobile.css);
 * breakpoints are container widths: phone < 640px, tablet 640–1023px.
 */

/* ---------- Shell: tablet rail (640–1023px) ---------- */
/* Unless the viewer chose the full sidebar (`.is-full`, AppShell `sidebarMode`). */
@container shell (min-width: 640px) and (max-width: 1023px) {
	.app-shell:not(.is-full) .app-shell-frame {
		--shell-sidebar-column: var(--sidebar-rail-width);
	}
}
/*
 * The rail look, one set of rules: whenever the sidebar's column is
 * rail-narrow, at tablet widths or collapsed by choice (`.app-shell.is-rail`).
 * The threshold sits between --sidebar-rail-width and --sidebar-width; keep
 * it equal to `sidebarRailMaxWidth` in AppShell.tsx.
 */
@container sidebar (max-width: 120px) {
	.app-shell-sidebar .sidebar {
		padding: var(--space-8) var(--space-6);
	}
	.app-shell-sidebar :is(.nav-item-label, .switcher-text, .user-card-text) {
		position: absolute;
		width: var(--space-1);
		height: var(--space-1);
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.app-shell-sidebar
		:is(
			.nav-item-meta,
			.switcher-chevron,
			.nav-ask .kbd,
			.nav-palette-keys,
			.usage-meter
		) {
		display: none;
	}
	.app-shell-sidebar :is(.nav-item, .switcher, .user-card) {
		justify-content: center;
		gap: var(--space-0);
		padding-right: var(--space-0);
		padding-left: var(--space-0);
	}
	.app-shell-sidebar .switcher {
		border-color: transparent;
		background: transparent;
	}
	/* The dot rides on the icon's corner. */
	.app-shell-sidebar .nav-item {
		position: relative;
	}
	.app-shell-sidebar .nav-item-dot {
		position: absolute;
		top: var(--space-6);
		right: var(--space-6);
		margin-right: var(--space-0);
	}
}

/* ---------- Shell: phone (< 640px) ---------- */
.app-bottom-nav {
	display: none;
}
@container shell (max-width: 639px) {
	.app-shell-frame {
		grid-template-columns: minmax(0, 1fr);
	}
	.app-shell-sidebar {
		display: none;
	}
	/* The docked panel covers the page (the shell's layer when contained). */
	.app-shell-frame.has-aside {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Stretch, or the docked `align-self: start` sizes the fixed box to its content. */
	.app-shell-aside {
		position: fixed;
		inset: 0;
		z-index: var(--z-drawer);
		align-self: stretch;
		height: auto;
		padding-bottom: var(--safe-bottom);
		background: var(--color-surface);
	}
	.app-shell.is-contained .app-shell-aside {
		position: absolute;
	}
	.app-bottom-nav {
		position: sticky;
		bottom: 0;
		z-index: var(--z-sticky);
		display: block;
		margin-top: auto;
		padding: var(--space-8) var(--bottom-nav-float)
			calc(var(--bottom-nav-float) + var(--safe-bottom));
		pointer-events: none;
	}
	.page-content {
		gap: var(--space-12);
		padding: var(--space-12) var(--page-gutter);
	}
	/* Only while the sidebar is hidden: a narrow page beside it (full sidebar on a tablet, Ask docked) keeps it. */
	.top-bar-menu {
		display: inline-flex;
	}
}

/* Tablet width: five or six stats become rows of three; filters stay one scrolling row. */
@container (max-width: 1023px) {
	/* The trailing note shrinks to an ellipsis instead of running off the edge. */
	.filter-bar > .toolbar-trailing {
		flex-shrink: 1;
		overflow: hidden;
	}
	.filter-bar .toolbar-trailing > .toolbar-link {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.filter-bar .toolbar-trailing > .toolbar-link svg {
		vertical-align: middle;
	}
	.stat-strip:is([data-count='5'], [data-count='6']) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.stat-strip[data-count='5'] > :last-child {
		grid-column: span 2;
	}
}

/* Top bar, filter bar and period respond to their nearest container
 * (the shell in the app, the stage in the DS). */
@container (max-width: 639px) {
	/* Phones: a narrower gutter, still shared by the bars and the content. */
	.top-bar,
	.toolbar,
	.page-content {
		--page-gutter: var(--page-gutter-phone);
	}
	.top-bar {
		gap: var(--space-8);
		height: auto;
		min-height: calc(var(--topbar-height) + var(--safe-top));
		padding: var(--safe-top) var(--page-gutter) var(--space-0);
	}
	.top-bar-more {
		display: inline-flex;
	}
	.top-bar-overflow,
	.top-bar-status,
	.crumbs-link,
	.crumbs-sep {
		display: none;
	}
	.top-bar-actions {
		gap: var(--space-6);
	}
	.filter-bar {
		padding-inline: var(--page-gutter);
	}
	/* Page tabs scroll in their own row; search and filters get a full-width row below. */
	.page-toolbar {
		flex-wrap: wrap;
		gap: var(--space-0) var(--space-8);
		height: auto;
		padding: var(--space-0) var(--page-gutter) var(--space-8);
	}
	.page-toolbar > .tabs-scroll {
		flex: 1 1 100%;
	}
	.page-toolbar > .toolbar-spacer {
		display: none;
	}
	.page-toolbar > :not(.tabs-scroll, .toolbar-spacer) {
		flex: 1 1 auto;
		min-width: 0;
	}
	.page-toolbar > .search {
		width: auto;
	}
	.filter-bar .toolbar-hint {
		display: none;
	}
	.period-seg {
		display: none;
	}
	.period-compact {
		display: inline-flex;
	}
	.period-compact .picker {
		min-width: 0;
	}
	/* A header with tabs and a segmented filter, or a legend of several series, doesn't fit one phone row: the controls wrap under the title. */
	.panel-header:has(.seg),
	.panel-header:has(.legend) {
		flex-wrap: wrap;
		row-gap: var(--space-6);
		height: auto;
		min-height: var(--panel-header-height);
		padding-block: var(--space-8);
	}
	.panel-header:has(.seg) .panel-meta {
		display: none;
	}
	/* Same weight as the tablet rule above, and later, so phones get two columns. */
	.stat-strip,
	.stat-strip[data-count] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* An odd one out takes the whole last row instead of leaving a hole. */
	.stat-strip > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.stat-value-kpi {
		font-size: var(--font-size-stat);
	}
}

/* ---------- PageGrid / Stack ---------- */
.page-grid {
	display: grid;
	grid-template-columns: var(--grid-cols);
	gap: var(--space-16);
	min-width: 0;
}
/* A cell across two columns of an equal-column grid, so its edges line up with the grids around it. */
.page-grid-span-2 {
	grid-column: span 2;
}
/* A cell that takes its row's height instead of setting it (a feed beside a chart): the content scrolls. */
.page-grid-follow {
	position: relative;
	min-height: var(--page-grid-follow-min-height);
}
.page-grid-follow > * {
	position: absolute;
	inset: 0;
	overflow: auto;
}
@container (max-width: 1023px) {
	.page-grid-stack-tablet {
		grid-template-columns: minmax(0, 1fr);
	}
	.page-grid-stack-tablet > .page-grid-follow > * {
		position: static;
	}
	.page-grid-stack-tablet > .page-grid-span-2 {
		grid-column: auto;
	}
}
@container (max-width: 639px) {
	.page-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-12);
	}
	.page-grid-follow > * {
		position: static;
	}
	.page-grid > .page-grid-span-2 {
		grid-column: auto;
	}
}
/* ---------- Settings rows on phones ---------- */
/* Fields drop under the text; switches, buttons and badges stay on the right. */
@container (max-width: 639px) {
	.settings-row-control:has(
		.input,
		.select,
		.combobox,
		.number-input,
		.copy-field,
		.seg
	) {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
	.settings-row.has-icon
		.settings-row-control:has(
			.input,
			.select,
			.combobox,
			.number-input,
			.copy-field,
			.seg
		) {
		grid-column: 2 / -1;
	}
}
/* ---------- Forms on phones ---------- */
/* Labels sit above their controls; a segmented choice spans the row. */
@container (max-width: 639px) {
	.field-grid,
	.field-grid-sm,
	.field-grid-lg {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-4);
	}
	.field-row .field-label {
		min-height: auto;
		padding-top: var(--space-0);
	}
	.field-grid .field-row + .field-row .field-label {
		margin-top: var(--space-10);
	}
	.field-control > .seg {
		align-self: stretch;
		width: auto;
	}
	.field-control > .seg .seg-item {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
		padding-inline: var(--space-4);
	}
	.step-card {
		padding: var(--space-8) var(--space-10);
	}
	.step-card-row {
		gap: var(--space-8);
	}
	.step-card-row > .combobox {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
	.step-card-row > .step-count:empty {
		display: none;
	}
	.step-conditions {
		padding-left: var(--space-0);
	}
	.step-builder-hint {
		display: none;
	}
	.mini-funnel-steps {
		--mini-funnel-event-width: var(--mini-funnel-event-width-phone);
	}
}
.stack {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.stack-sm {
	gap: var(--space-8);
}
.stack-md {
	gap: var(--space-16);
}
.stack-lg {
	gap: var(--space-24);
}
/* Children grow into the row's leftover height, so side-by-side columns end together. */
.stack-fill > * {
	flex-grow: 1;
}
/* Inline: a row that wraps (chips, a small form). */
.inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
}
.inline-xs {
	gap: var(--space-4);
}
/* Inline nowrap: one line; labels shrink and ellipsize, icons keep their size. */
.inline-nowrap {
	flex-wrap: nowrap;
	white-space: nowrap;
}
.inline-nowrap > * {
	flex-shrink: 0;
}
/* Text gives up width with an ellipsis; a tooltip's anchor (a span around a control) never does. */
.inline-nowrap > :is(span:not(.tooltip-anchor), .icon-label) {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* A search field gives up width too, so the controls beside it stay on the line (a panel header on a phone). */
.inline-nowrap > .search {
	flex-shrink: 1;
	min-width: var(--space-0);
}
.inline-sm {
	gap: var(--space-8);
}

/* ---------- BottomNav ---------- */
.bottom-nav {
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.bottom-nav-pill {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--bottom-nav-height);
	padding: var(--space-4);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-surface) 86%, transparent);
	-webkit-backdrop-filter: var(--bottom-nav-backdrop);
	backdrop-filter: var(--bottom-nav-backdrop);
	box-shadow: var(--shadow-popover);
	pointer-events: auto;
}
.bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: var(--bottom-nav-item-width);
	height: 100%;
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
	touch-action: manipulation;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
}
.bottom-nav-item:hover {
	color: var(--color-ink);
}
.bottom-nav-item.is-active {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.bottom-nav-icon {
	position: relative;
	display: inline-flex;
}
.bottom-nav-badge {
	position: absolute;
	top: calc(var(--space-4) * -1);
	left: calc(100% - var(--space-4));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--bottom-nav-badge-size);
	height: var(--bottom-nav-badge-size);
	padding: var(--space-0) var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
}
.bottom-nav.is-collapsed .bottom-nav-item:not(.is-active),
[data-sheet-open] .bottom-nav-item:not(.is-active),
.bottom-nav.is-collapsed .bottom-nav-label,
[data-sheet-open] .bottom-nav-label {
	display: none;
}
.bottom-nav.is-collapsed .bottom-nav-item,
[data-sheet-open] .bottom-nav-item {
	width: var(--bottom-nav-height);
}

/* ---------- Sheet ---------- */
.sheet-root {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-drawer) + var(--sheet-level, 0) * 2);
}
.sheet-root.is-contained {
	position: absolute;
}
.sheet-backdrop {
	position: absolute;
	inset: 0;
	background: var(--color-backdrop);
	animation: fade-in var(--duration-base) var(--ease-out);
}
.sheet {
	position: absolute;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface);
	color: var(--color-ink);
	box-shadow: var(--shadow-popover);
	outline: var(--border-width-strong) solid transparent;
	transition: transform var(--duration-base) var(--ease-out);
}
.sheet-bottom {
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
	animation: sheet-in var(--duration-base) var(--ease-out);
	transition:
		height var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out);
}
.sheet-bottom.is-dragging {
	transition: none;
}
.sheet-detent-medium {
	height: var(--sheet-height-medium);
}
.sheet-detent-large {
	height: var(--sheet-height-large);
}
.sheet-root.is-contained .sheet-detent-medium {
	height: var(--sheet-contained-medium);
}
.sheet-root.is-contained .sheet-detent-large {
	height: var(--sheet-contained-large);
}
.sheet-left,
.sheet-right {
	top: 0;
	bottom: 0;
	width: min(var(--sheet-side-width), var(--sheet-side-max));
	padding-top: var(--safe-top);
	padding-bottom: var(--safe-bottom);
}
.sheet-left {
	left: 0;
	animation: sheet-in-left var(--duration-base) var(--ease-out);
}
.sheet-right {
	right: 0;
	animation: sheet-in-right var(--duration-base) var(--ease-out);
}
@keyframes sheet-in-left {
	from {
		transform: translateX(-100%);
	}
}
@keyframes sheet-in-right {
	from {
		transform: translateX(100%);
	}
}
@keyframes sheet-out-bottom {
	to {
		transform: translateY(100%);
	}
}
@keyframes sheet-out-left {
	to {
		transform: translateX(-100%);
	}
}
@keyframes sheet-out-right {
	to {
		transform: translateX(100%);
	}
}
@keyframes fade-out {
	to {
		opacity: var(--opacity-hidden);
	}
}
.sheet-root.is-closing .sheet-backdrop {
	animation: fade-out var(--duration-base) var(--ease-out) forwards;
}
.sheet-root.is-closing .sheet-bottom {
	animation: sheet-out-bottom var(--duration-base) var(--ease-out) forwards;
}
.sheet-root.is-closing .sheet-left {
	animation: sheet-out-left var(--duration-base) var(--ease-out) forwards;
}
.sheet-root.is-closing .sheet-right {
	animation: sheet-out-right var(--duration-base) var(--ease-out) forwards;
}
.sheet-root.is-behind .sheet {
	transform: scale(var(--sheet-behind-scale));
	transform-origin: top center;
}
.sheet-top {
	flex-shrink: 0;
}
.sheet-top.is-grabbable {
	padding-top: var(--space-8);
	cursor: grab;
	touch-action: none;
}
.sheet-top.is-grabbable:active {
	cursor: grabbing;
}
.sheet-handle-button {
	display: block;
	width: 100%;
	padding: var(--space-0);
	border: none;
	background: transparent;
}
.sheet-handle {
	display: block;
	width: var(--sheet-handle-width);
	height: var(--sheet-handle-height);
	margin: var(--space-0) auto var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-border);
}
.sheet-header {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--panel-header-height);
	padding: var(--space-4) var(--space-8) var(--space-4) var(--space-16);
}
.sheet-title {
	flex-grow: 1;
	min-width: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.sheet-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sheet-bottom .sheet-body:last-child {
	padding-bottom: var(--safe-bottom);
}
.sheet-body.is-padded {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-12) var(--space-16);
}
/* Content that loads (DataState) stacks like the body's own children: its
   sections keep the body's gap above their hairlines, so a section's last
   rows never run into the next one's title. */
.sheet-body.is-padded > .data-state {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}
/* List rows in a padded sheet run edge to edge: their own padding lines their text up with the sheet's, and the narrow sheet keeps its width for the content. */
.sheet-body.is-padded .li {
	margin-inline: calc(var(--space-16) * -1);
}
.sheet-bottom .sheet-body.is-padded:last-child {
	padding-bottom: calc(var(--space-12) + var(--safe-bottom));
}
/* SheetSection: a group in a padded sheet. Its hairline runs across the whole
   sheet (the section steps out of the padding and puts it back), so the sheet
   reads as sections; the body's gap is the space above the line. */
.sheet-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: var(--space-0);
	margin-inline: calc(var(--space-16) * -1);
	padding: var(--space-12) var(--space-16) var(--space-0);
	border-top: var(--border-width) solid var(--color-border);
}
.sheet-section:first-child {
	padding-top: var(--space-0);
	border-top: none;
}
.sheet-section-head {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-width: var(--space-0);
}
/* The quiet title a fix's sections use: small caps, muted. A long one (a page's name) cuts off instead of widening the sheet. */
.sheet-section-title {
	flex-shrink: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: var(--space-0);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.sheet-section-head > .hint-trigger {
	margin-inline-start: calc(var(--space-4) - var(--space-8));
}
/* A status or actions on the right; a long status cuts off before it pushes. */
.sheet-section-aside {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-8);
	min-width: var(--space-0);
	margin-left: auto;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}
/* The section's hairline already sets a list off: no second line under the title. */
.sheet-section > .kv > .kv-row:first-child,
.sheet-section > .bar-list > :first-child,
.sheet-section > .bar-list > :first-child > .bar-row {
	border-top: none;
}
/* A timeline in a section: the section's padding is its edge (no second
   inset), and each event's name and detail keep to one line (the name's
   popover holds the rest). */
.sheet-section .timeline-head,
.sheet-section .timeline-event {
	padding-inline: var(--space-0);
}
.sheet-section .timeline-body > :first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* An email in a section: the text runs under the avatar, not beside it, so
   the narrow sheet keeps its width for what was written. */
.sheet-section .mail-body,
.sheet-section .mail-foot {
	padding-left: var(--space-14);
}
/* Rows in a section (its links, the contact): one compact line each, and the
   section's own hairline ends the last one. */
.sheet-section .li {
	min-height: var(--row-height);
	padding-block: var(--space-4);
}
.sheet-section .li:last-child {
	border-bottom: none;
}
/* A row's own padding is the space between it and a section's hairline: a
   section that ends with rows takes back most of the gap above the next
   line, and one that starts with rows most of its room under its own. */
.sheet-section:has(> .li:last-child, > div:last-child > .li:last-child) {
	margin-bottom: calc(var(--space-4) - var(--space-12));
}
.sheet-section:not(:first-child):has(
		> .li:first-child,
		> div:first-child > .li:first-child
	) {
	padding-top: var(--space-4);
}
.sheet-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-8);
	flex-shrink: 0;
	padding: var(--space-10) var(--space-16)
		calc(var(--space-10) + var(--safe-bottom));
	border-top: var(--border-width) solid var(--color-border);
}
.sheet-left .sheet-footer,
.sheet-right .sheet-footer {
	padding-bottom: var(--space-10);
}
@media (min-width: 768px) {
	.sheet-root:not(.is-contained) .sheet-bottom {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		width: min(var(--sheet-float-width), calc(100% - var(--space-32)));
		height: auto;
		max-height: var(--sheet-float-max-height);
		border-radius: var(--radius-md);
		transform: translate(-50%, -50%);
		animation-name: fade-in;
	}
	.sheet-root:not(.is-contained).is-closing .sheet-bottom {
		animation-name: fade-out;
	}
	.sheet-root:not(.is-contained).is-behind .sheet-bottom {
		transform: translate(-50%, -50%) scale(var(--sheet-behind-scale));
	}
	.sheet-root:not(.is-contained) .sheet-bottom .sheet-top.is-grabbable {
		padding-top: var(--space-0);
		cursor: default;
	}
	.sheet-root:not(.is-contained) .sheet-bottom .sheet-handle {
		display: none;
	}
}

/* Navigation drawer (AppShell on phones) */
.shell-drawer-body {
	display: flex;
	height: 100%;
	overflow-y: auto;
}
.shell-drawer-body > .sidebar {
	flex: 1 1 auto;
	border-right: none;
}

/* SheetFrame: sheets open inside it (previews, embedded demos). */
.sheet-frame {
	position: relative;
	overflow: hidden;
}
.sheet-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.sheet-layer > * {
	pointer-events: auto;
}

/* ---------- PullToRefresh ---------- */
.pull {
	position: relative;
	overflow: hidden;
}
.pull-indicator {
	position: absolute;
	top: var(--space-0);
	left: 50%;
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pull-indicator-size);
	height: var(--pull-indicator-size);
	margin-left: calc(var(--pull-indicator-size) / -2);
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	box-shadow: var(--shadow-popover);
	opacity: var(--opacity-hidden);
	transform: translateY(
		calc(
			var(--pull-distance) * var(--pull-unit) - var(--pull-indicator-size) -
				var(--space-4)
		)
	);
}
.pull:not(.is-idle) .pull-indicator {
	opacity: var(--opacity-full);
}
.pull-content {
	transform: translateY(calc(var(--pull-distance) * var(--pull-unit)));
}
.pull:is(.is-idle, .is-refreshing) :is(.pull-content, .pull-indicator) {
	transition:
		transform var(--duration-base) var(--ease-out),
		opacity var(--duration-base) var(--ease-out);
}
.pull-spinner {
	width: var(--pull-spinner-size);
	height: var(--pull-spinner-size);
	border: var(--pull-spinner-stroke) solid var(--color-border);
	border-top-color: var(--color-muted);
	border-radius: var(--radius-full);
	transform: rotate(calc(var(--pull-distance) * var(--pull-rotate-unit)));
}
.pull.is-armed .pull-spinner,
.pull.is-refreshing .pull-spinner {
	border-top-color: var(--color-accent);
}
.pull.is-refreshing .pull-spinner {
	animation: pull-spin var(--pull-spin-duration) linear infinite;
}
@keyframes pull-spin {
	to {
		transform: rotate(1turn);
	}
}

/* ---------- PWA prompts ---------- */
.install-prompt {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--space-12);
	max-width: var(--install-card-max);
	padding: var(--space-12) var(--space-14);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.install-prompt-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	line-height: var(--leading-prose);
}
.install-prompt-text strong {
	font-weight: var(--font-weight-semibold);
}
.install-prompt-text .icon {
	vertical-align: text-bottom;
}
.install-prompt-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-6);
	width: 100%;
}
.update-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	height: var(--update-pill-height);
	padding: var(--space-0) var(--space-12);
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-ink);
	color: var(--color-surface);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	box-shadow: var(--shadow-popover);
	white-space: nowrap;
}
.update-pill-action {
	text-decoration: underline;
	text-underline-offset: var(--space-2);
}
.update-pill.is-floating {
	position: fixed;
	bottom: calc(
		var(--space-16) + var(--bottom-nav-height) + var(--bottom-nav-float) +
			var(--safe-bottom)
	);
	left: 50%;
	z-index: var(--z-toast);
	transform: translateX(-50%);
}
.offline-banner {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--row-height);
	padding: var(--space-6) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
	background: color-mix(in srgb, var(--color-warn) 12%, var(--color-surface));
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
}
.offline-banner > .icon {
	color: var(--color-warn-ink);
}
.offline-banner-text {
	flex-grow: 1;
	min-width: 0;
}
.offline-banner-retry {
	flex-shrink: 0;
	padding: var(--space-0);
	border: none;
	background: transparent;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-accent-ink);
}

/* ---------- SplitView on narrow containers ---------- */
/* Stacks: the aside goes on top. Settings sub-nav becomes a scrolling strip. */
@container (max-width: 639px) {
	.split-list,
	.split-nav,
	.split-inspector {
		grid-template-columns: minmax(0, 1fr);
	}
	/* The aside keeps its own height; the page gets the rest (stretched auto rows
	   split the leftover space and left a band under the settings tabs). */
	.split-list,
	.split-nav {
		grid-template-rows: auto minmax(0, 1fr);
	}
	.split-inspector {
		align-content: start;
	}
	.split-list > .split-aside,
	.split-nav > .split-aside {
		border-right: none;
		border-bottom: var(--border-width) solid var(--color-border);
	}
	.split-nav > .split-aside {
		padding: var(--space-6) var(--space-8);
	}
	/* The column becomes its HScroll's row: it scrolls sideways again. */
	.split-nav > .split-aside .sub-nav {
		flex-direction: row;
		overflow-x: auto;
	}
	.split-nav > .split-aside .sub-nav-item {
		flex-shrink: 0;
	}
	.split-nav > .split-aside .sub-nav-group,
	.split-nav > .split-aside .sub-nav-outline {
		display: none;
	}
	/* The strip scrolls with the page, as before. */
	.split-nav > .split-aside > .sub-nav-frame {
		position: static;
		max-height: none;
		margin: var(--space-0);
		padding: var(--space-0);
		overflow: visible;
	}
	.split-list > .split-main {
		padding: var(--space-12);
	}
	/* Settings: the 16px phone gutter, and room under the last group for the save bar. */
	.split-nav > .split-main {
		padding: var(--space-20) var(--space-16) var(--settings-bottom-space);
	}
	.settings-page {
		gap: var(--space-24);
	}
	.split-inspector {
		gap: var(--space-16);
		padding: var(--space-12);
	}
	/* The main column keeps one screen under the top bar with its composer
	   above the tab bar; the panel follows below it. */
	.split-panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows:
			calc(
				var(--viewport-height) - var(--topbar-height) - var(--safe-top) -
					var(--bottom-nav-height) - var(--bottom-nav-float) - var(--space-8) -
					var(--safe-bottom)
			)
			auto;
		height: auto;
	}
	.split-panel > .split-aside {
		border-top: var(--border-width) solid var(--color-border);
		border-left: none;
	}
	/* The rail's list goes on top; the rest keeps its own height. */
	.split-rail {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		height: auto;
	}
	.split-rail > .split-aside {
		border-right: none;
		border-bottom: var(--border-width) solid var(--color-border);
	}
	.split-rail > .split-main > .split-panel {
		height: auto;
	}
}


/* ./components/forms.css */
/* Dates & forms: Calendar, DateRangePicker, FilterPicker, Combobox, Checkbox, Radio, ToggleGroup, NumberInput, TextEditor. */

/* ---------- Calendar ---------- */
.calendar {
	display: flex;
	gap: var(--calendar-month-gap);
	padding: var(--space-8);
}
.calendar-month {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.calendar-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.calendar-title {
	flex-grow: 1;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-align: center;
}
.calendar-nav-space {
	width: var(--icon-button-size);
	flex-shrink: 0;
}
.calendar-grid {
	border-collapse: collapse;
	table-layout: fixed;
}
.calendar-weekday {
	width: var(--calendar-cell);
	padding-bottom: var(--space-4);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.calendar-cell,
.calendar-empty {
	width: var(--calendar-cell);
	height: var(--calendar-cell);
	padding: var(--space-0);
}
.calendar-cell.is-within {
	background: var(--color-accent-muted);
}
.calendar-cell.is-start:not(.is-end) {
	background: linear-gradient(
		90deg,
		transparent 50%,
		var(--color-accent-muted) 50%
	);
}
.calendar-cell.is-end:not(.is-start) {
	background: linear-gradient(
		90deg,
		var(--color-accent-muted) 50%,
		transparent 50%
	);
}
.calendar-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	font-size: var(--font-size-sm);
	font-variant-numeric: tabular-nums;
	color: var(--color-ink);
}
.calendar-day:hover:not([aria-disabled='true']) {
	background: var(--color-hover);
}
.calendar-day:focus-visible {
	outline-offset: calc(var(--border-width-strong) * -1);
}
.calendar-day.is-selected,
.calendar-day.is-selected:hover:not(:disabled) {
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-weight: var(--font-weight-semibold);
}
.calendar-day.is-pending {
	box-shadow: 0 0 0 var(--border-width-strong) var(--color-accent-muted);
}
.calendar-day.is-today::after {
	content: '';
	position: absolute;
	bottom: var(--space-3);
	width: var(--calendar-today-dot);
	height: var(--calendar-today-dot);
	border-radius: var(--radius-full);
	background: currentColor;
}
.calendar-day[aria-disabled='true'] {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
}
/* Two months need room; a narrow container shows one. */
@container (max-width: 559px) {
	.calendar.is-double .calendar-month + .calendar-month {
		display: none;
	}
}

/* ---------- DateRangePicker ---------- */
.drp {
	display: flex;
}
.drp-presets {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: var(--drp-presets-width);
	flex-shrink: 0;
	padding: var(--space-8) var(--space-6);
	border-right: var(--border-width) solid var(--color-border);
}
.drp-preset {
	display: flex;
	align-items: center;
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-8);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: var(--font-size-sm);
	text-align: left;
	color: var(--color-ink);
}
.drp-preset:hover {
	background: var(--color-hover);
}
.drp-preset.is-on {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
	font-weight: var(--font-weight-medium);
}
.drp-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.drp-compare {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-12);
	border-top: var(--border-width) solid var(--color-border);
}
.drp-compare-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.drp-foot {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-12);
	border-top: var(--border-width) solid var(--color-border);
}
.drp-summary {
	flex-grow: 1;
	min-width: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.popover-sheet .drp {
	flex-direction: column;
}
.popover-sheet .drp-presets {
	flex-direction: row;
	flex-wrap: wrap;
	width: auto;
	border-right: none;
	border-bottom: var(--border-width) solid var(--color-border);
}
.popover-sheet .calendar {
	justify-content: center;
}

/* ---------- ToggleGroup ---------- */
.toggle-group {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
}
.toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	height: calc(var(--control-height) - var(--space-6));
	padding: var(--space-0) var(--space-8);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
	white-space: nowrap;
}
/* Icon toggles are under 24px: space them so each 24px target stays clear of the next (WCAG 2.5.8). */
.toggle-group.is-icons {
	gap: var(--space-6);
}
.toggle-group.is-icons .toggle {
	width: calc(var(--control-height) - var(--space-6));
	padding: var(--space-0);
}
.toggle:hover:not(:disabled) {
	background: var(--color-hover);
	color: var(--color-ink);
}
.toggle.is-on,
.toggle.is-on:hover:not(:disabled) {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}

/* ---------- Checkbox ---------- */
.checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}
.checkbox.has-label {
	align-items: flex-start;
	cursor: pointer;
}
.checkbox.is-disabled {
	cursor: not-allowed;
	opacity: var(--opacity-disabled);
}
.checkbox-control {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: var(--check-size);
	height: var(--check-size);
	margin-top: var(--space-1);
}
.checkbox-input,
.radio-input {
	position: absolute;
	inset: 0;
	margin: var(--space-0);
	opacity: var(--opacity-hidden);
	cursor: inherit;
}
.checkbox-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: var(--border-width) solid var(--check-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	color: var(--color-on-accent);
	pointer-events: none;
}
.checkbox-input:checked + .checkbox-box,
.checkbox-input:indeterminate + .checkbox-box {
	border-color: var(--color-accent);
	background: var(--color-accent);
}
.checkbox-input[aria-invalid='true'] + .checkbox-box {
	border-color: var(--color-danger);
}
.checkbox-input:focus-visible + .checkbox-box,
.radio-input:focus-visible + .radio-dot {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}
.checkbox-dash {
	width: 60%;
	height: var(--border-width-strong);
	border-radius: var(--radius-full);
	background: currentColor;
}
.checkbox-text,
.radio-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.checkbox-label,
.radio-label {
	font-size: var(--font-size-sm);
}
.checkbox-description,
.radio-description {
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
	color: var(--color-muted);
}

/* ---------- Radio ---------- */
.radio-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.radio-group.is-inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-16);
}
.radio-group-cards {
	display: grid;
	align-self: stretch;
	grid-template-columns: repeat(auto-fit, minmax(var(--choice-card-min), 1fr));
	gap: var(--space-8);
}
.radio,
.choice-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	cursor: pointer;
}
.radio.is-disabled,
.choice-card.is-disabled {
	cursor: not-allowed;
	opacity: var(--opacity-disabled);
}
.radio-input {
	width: var(--check-size);
	height: var(--check-size);
}
.radio-dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--check-size);
	height: var(--check-size);
	margin-top: var(--space-1);
	border: var(--border-width) solid var(--check-border);
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	pointer-events: none;
}
.radio-input:checked + .radio-dot {
	border-color: var(--color-accent);
	background: var(--color-accent);
}
.radio-input:checked + .radio-dot::after {
	content: '';
	width: var(--radio-dot);
	height: var(--radio-dot);
	border-radius: var(--radius-full);
	background: var(--color-on-accent);
}
.radio-group[aria-invalid='true'] .radio-dot {
	border-color: var(--color-danger);
}
.choice-card {
	padding: var(--space-10) var(--space-12);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
}
.choice-card:hover:not(.is-disabled) {
	border-color: var(--color-muted);
}
.choice-card.is-checked {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 var(--border-width) var(--color-accent);
}
.choice-card .radio-input {
	width: 100%;
	height: 100%;
}
.choice-card .radio-label {
	font-weight: var(--font-weight-medium);
}
.choice-card-icon {
	margin-bottom: var(--space-2);
	color: var(--color-accent-ink);
}
.choice-card-mark {
	display: flex;
}
/* A card with a button of its own: the button is laid over the room left at the card's bottom. */
.choice-card-cell {
	display: grid;
	min-width: 0;
}
.choice-card-cell > * {
	grid-area: 1 / 1;
}
.choice-card.has-action {
	padding-bottom: calc(
		var(--space-10) + var(--control-height) + var(--space-10)
	);
}
.choice-card-action {
	position: relative;
	align-self: end;
	justify-self: start;
	margin: var(--space-0) var(--space-12) var(--space-10)
		calc(var(--space-12) + var(--check-size) + var(--space-8));
}

/* Choice tiles: a mark over a name; the chosen one in the accent. */
.radio-group-tiles {
	display: grid;
	align-self: stretch;
	grid-template-columns: repeat(auto-fit, minmax(var(--choice-tile-min), 1fr));
	gap: var(--space-8);
}
.choice-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	min-width: 0;
	padding: var(--space-12) var(--space-8) var(--space-10);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	cursor: pointer;
	transition:
		background var(--duration-fast),
		border-color var(--duration-fast);
}
.choice-tile:hover:not(.is-disabled, .is-checked) {
	border-color: var(--color-muted);
}
.choice-tile.is-checked {
	border-color: var(--color-accent);
	background: var(--color-accent-muted);
}
.choice-tile.is-disabled {
	cursor: not-allowed;
	opacity: var(--opacity-disabled);
}
.choice-tile:has(.radio-input:focus-visible) {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}
.choice-tile .radio-input {
	width: 100%;
	height: 100%;
}
.choice-tile-mark {
	display: flex;
}
.choice-tile-label {
	max-width: 100%;
	overflow: hidden;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.choice-tile.is-checked .choice-tile-label {
	color: var(--color-accent-ink);
}

/* ---------- NumberInput ---------- */
.number-input {
	display: inline-flex;
	align-items: stretch;
	height: var(--control-height);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	overflow: hidden;
	transition: border-color var(--duration-fast);
}
.number-input:focus-within {
	border-color: var(--color-accent);
	box-shadow: var(--input-focus-ring);
}
.number-input.is-invalid {
	border-color: var(--color-danger);
}
.number-input.is-disabled {
	opacity: var(--opacity-disabled);
}
.number-field {
	flex-grow: 1;
	min-width: 0;
	padding: var(--space-0) var(--space-6);
	border: none;
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
	font-size: var(--font-size-sm);
	text-align: right;
}
.number-affix {
	display: inline-flex;
	align-items: center;
	padding: var(--space-0) var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.number-affix:first-child {
	padding-right: var(--space-0);
}
.number-steppers {
	display: flex;
	flex-direction: column;
	width: var(--number-stepper-width);
	border-left: var(--border-width) solid var(--color-border);
}
.number-steppers button {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: var(--space-0);
	border: none;
	background: transparent;
	color: var(--color-muted);
}
.number-steppers button + button {
	border-top: var(--border-width) solid var(--color-border);
}
.number-steppers button:hover:not(:disabled) {
	background: var(--color-hover);
	color: var(--color-ink);
}

/* ---------- Combobox ---------- */
.combobox {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	min-height: var(--control-height);
	padding: var(--space-1) var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	cursor: text;
	transition: border-color var(--duration-fast);
}
.combobox:focus-within {
	border-color: var(--color-accent);
	box-shadow: var(--input-focus-ring);
}
.combobox.is-invalid {
	border-color: var(--color-danger);
}
.combobox.is-disabled {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
}
.combobox-input {
	flex: 1;
	min-width: var(--space-48);
	height: calc(var(--control-height) - var(--space-4));
	padding: var(--space-0) var(--space-2);
	border: none;
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
	font-size: var(--font-size-sm);
}
.combobox-input::placeholder {
	color: var(--color-muted);
}
.combobox-icon {
	color: var(--color-muted);
}
.combobox-icon.is-spinning {
	animation: forms-spin var(--spin-duration) linear infinite;
}
@keyframes forms-spin {
	to {
		transform: rotate(1turn);
	}
}
.combobox-list {
	max-height: var(--combobox-list-max);
	margin: var(--space-0);
	padding: var(--space-4);
	overflow-y: auto;
	list-style: none;
}
.combobox-group,
.fp-group {
	padding: var(--space-6) var(--space-8) var(--space-2);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.combobox-status,
.fp-empty {
	padding: var(--space-8);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}
.combobox-option {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--row-height-nav);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	cursor: pointer;
}
.combobox-option.is-active {
	background: var(--color-hover);
	box-shadow: var(--focus-bar);
}
.combobox-option[aria-disabled='true'] {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
}
.combobox-option.is-create {
	color: var(--color-accent-ink);
}
.combobox-option-icon {
	color: var(--color-muted);
}
.combobox-option-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}
.combobox-option-description {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.combobox-check {
	color: var(--color-accent-ink);
}

/* ---------- FilterPicker ---------- */
.fp-picker {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
}
.fp-chip-edit {
	padding: var(--space-0);
	border: none;
	background: transparent;
	font-size: inherit;
}
.fp-chip-edit:hover {
	text-decoration: underline;
}
/* A filter this page's data can't answer: kept, but visibly not applied. */
.chip.is-unused {
	border-style: dashed;
	background: transparent;
	color: var(--color-muted);
}
.fp-panel {
	display: flex;
	flex-direction: column;
	/* Fits its content between the min and max; see useSettledWidth. */
	width: max-content;
	min-width: var(--fp-panel-min-width);
	max-width: min(var(--fp-panel-max-width), var(--popover-max-viewport));
}
.popover-sheet .fp-panel {
	width: 100%;
}
.fp-back {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-8) var(--space-8) var(--space-0);
	border: none;
	background: transparent;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.fp-back:hover {
	color: var(--color-ink);
}
.fp-search {
	height: var(--row-height);
	margin: var(--space-4);
	padding: var(--space-0) var(--space-8);
	border: none;
	border-bottom: var(--border-width) solid var(--color-border);
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
	font-size: var(--font-size-sm);
}
.fp-search::placeholder {
	color: var(--color-muted);
}
.fp-list {
	max-height: var(--fp-list-max);
	margin: var(--space-0);
	padding: var(--space-0) var(--space-4) var(--space-4);
	overflow-y: auto;
	list-style: none;
}
.fp-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-8);
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-8);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	cursor: pointer;
}
.fp-row.is-active {
	background: var(--color-hover);
	box-shadow: var(--focus-bar);
}
.fp-bar {
	position: absolute;
	top: var(--space-3);
	bottom: var(--space-3);
	left: 0;
	border-radius: var(--radius-sm);
	background: var(--color-accent-muted);
	pointer-events: none;
}
.fp-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--check-size);
	height: var(--check-size);
	border: var(--border-width) solid var(--check-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	color: var(--color-on-accent);
}
.fp-check.is-on {
	border-color: var(--color-accent);
	background: var(--color-accent);
}
.fp-row-label {
	position: relative;
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fp-row-count {
	position: relative;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.fp-row-next {
	color: var(--color-muted);
}
.fp-foot {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8);
	border-top: var(--border-width) solid var(--color-border);
}
.fp-count {
	flex-grow: 1;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ---------- SavedViews ---------- */
.sv-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	max-width: var(--sv-max-width);
	height: var(--control-height-sm);
	padding: var(--space-0) var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	white-space: nowrap;
	transition:
		border-color var(--duration-fast),
		color var(--duration-fast);
}
.sv-trigger:hover,
.sv-trigger[aria-expanded='true'] {
	border-color: var(--color-muted);
	color: var(--color-ink);
}
.sv-trigger.is-active {
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}
.sv-trigger-label {
	overflow: hidden;
	text-overflow: ellipsis;
}
.sv-count {
	color: var(--color-muted);
}
.sv {
	display: flex;
	flex-direction: column;
	width: max-content;
	min-width: var(--sv-min-width);
	max-width: min(var(--sv-max-width), 100%);
}
.sv-list {
	max-height: var(--sv-list-max);
	margin: var(--space-0);
	padding: var(--space-4);
	overflow-y: auto;
	list-style: none;
}
.sv-group {
	padding: var(--space-6) var(--space-6) var(--space-2);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.sv-empty {
	padding: var(--space-8);
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
	color: var(--color-muted);
}
.sv-row {
	display: flex;
	align-items: center;
	border-radius: var(--radius-sm);
}
.sv-row:hover,
.sv-row.is-on {
	background: var(--color-hover);
}
.sv-apply {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
	padding: var(--space-6);
	border: none;
	background: transparent;
	color: var(--color-ink);
	text-align: left;
}
.sv-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--sv-icon-box);
	height: var(--sv-icon-box);
	border-radius: var(--radius-sm);
	background: var(--color-hover);
	color: var(--color-muted);
}
.sv-row.is-on .sv-icon {
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.sv-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}
.sv-name {
	overflow: hidden;
	font-size: var(--font-size-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sv-detail {
	overflow: hidden;
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sv-check {
	flex-shrink: 0;
	color: var(--color-accent-ink);
}
/* Faded out, not hidden: still reachable with Tab (it shows when focused). */
.sv-delete {
	opacity: var(--opacity-hidden);
}
.sv-row:hover .sv-delete,
.sv-row:focus-within .sv-delete {
	opacity: var(--opacity-full);
}
.sv-save {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	padding: var(--space-8);
	border-top: var(--border-width) solid var(--color-border);
}
.sv-save .input-box {
	flex: 1 1 0;
	min-width: 0;
}
.sv-error {
	flex-basis: 100%;
	margin: var(--space-0);
	font-size: var(--font-size-xs);
	color: var(--color-danger-ink);
}
@media (hover: none) {
	.sv-delete {
		opacity: var(--opacity-full);
	}
}

/* Search fields inside popovers (palette, app switcher, filters, models). */
.palette-input:focus-visible,
.app-switcher-search input:focus-visible,
.fp-search:focus-visible,
.mp-search input:focus-visible {
	box-shadow: var(--focus-underline);
}

/* ---------- Footnote ---------- */
.footnote {
	display: grid;
	gap: var(--space-2);
	min-width: 0;
	padding-top: var(--space-12);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ---------- PickList ---------- */
.pick-list {
	display: grid;
	gap: var(--space-16);
	min-width: 0;
}
.pick-list-group {
	display: grid;
	gap: var(--space-4);
	min-width: 0;
}
.pick-list-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-8);
}
.pick-list-title {
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.pick-list-count {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.pick-list-items {
	display: grid;
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.pick-list-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	min-width: 0;
	padding: var(--space-6) var(--space-0);
}
.pick-list-item + .pick-list-item {
	border-top: var(--border-width) solid var(--color-border);
}
.pick-list-body {
	display: grid;
	flex-grow: 1;
	gap: var(--space-2);
	min-width: 0;
}
.pick-list-text {
	color: var(--color-muted);
	overflow-wrap: anywhere;
	cursor: pointer;
}
.pick-list-item.is-checked .pick-list-text {
	color: var(--color-ink);
}
.pick-list-input {
	/* The negative margin gives the padding back: the text stays where it was. */
	width: calc(100% + var(--inline-edit-pad) * 2);
	min-width: 0;
	margin: calc(var(--inline-edit-pad) * -1);
	padding: var(--inline-edit-pad);
	border: var(--border-width) solid var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	font: inherit;
	color: var(--color-ink);
	outline: var(--border-width-strong) solid transparent;
	box-shadow: var(--slider-focus-ring);
}
.pick-list-input.is-invalid {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-muted);
}
.pick-list-note {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.pick-list-note.is-error {
	color: var(--color-danger-ink);
}
.pick-list-edit {
	flex-shrink: 0;
	margin-top: calc(var(--space-2) * -1);
}

/* ---------- TextEditor ---------- */
/* What ProseMirror needs from its root: spaces and breaks kept as typed. */
.ProseMirror {
	position: relative;
	white-space: pre-wrap;
	white-space: break-spaces;
	overflow-wrap: break-word;
	font-variant-ligatures: none;
	font-feature-settings: 'liga' 0;
}
.ProseMirror [contenteditable='false'] {
	white-space: normal;
}
img.ProseMirror-separator {
	display: inline !important;
	margin: var(--space-0) !important;
	border: none !important;
}
.ProseMirror-hideselection *::selection {
	background: transparent;
}
.ProseMirror-hideselection {
	caret-color: transparent;
}
.text-editor {
	display: flex;
	flex-direction: column;
	min-width: var(--space-0);
}
.text-editor-content,
.text-editor-source {
	display: block;
	width: 100%;
	overflow-y: auto;
	outline: var(--border-width-strong) solid transparent;
	font-size: var(--font-size-sm);
	line-height: var(--leading-prose);
	color: var(--color-ink);
}
/* Padding comes from where it sits (the composer's input, a field), the same as the formatted text's. */
.text-editor-source {
	border: none;
	background: transparent;
	resize: none;
}
.text-editor-source::placeholder,
.text-editor-placeholder {
	color: var(--color-muted);
}
/* Each line is a paragraph of its own; an empty one is the blank line between paragraphs. */
.text-editor-content p {
	margin: var(--space-0);
}
.text-editor-content ul,
.text-editor-content ol {
	margin: var(--space-0);
	padding-left: var(--md-list-indent);
}
/* Lists and quotes stand apart from the lines around them, as in the email. */
.text-editor-content > :is(ul, ol, blockquote) {
	margin-block: var(--space-8);
}
.text-editor-content > :is(ul, ol, blockquote):first-child {
	margin-top: var(--space-0);
}
.text-editor-content blockquote {
	margin: var(--space-0);
	padding-left: var(--space-10);
	border-left: var(--md-quote-width) solid var(--color-border);
	color: var(--color-muted);
}
.text-editor-content strong {
	font-weight: var(--font-weight-semibold);
}
/* Links read as links while writing: they don't open from here. */
.text-editor-content .md-link {
	text-decoration: underline;
	text-underline-offset: var(--space-2);
	cursor: text;
}
.text-editor-content p.is-editor-empty:first-child::before {
	content: attr(data-placeholder);
	float: left;
	height: var(--space-0);
	color: var(--color-muted);
	pointer-events: none;
}
/* In a form: the box of a Textarea, with Link and Markdown under the text. */
.text-editor-field {
	display: flex;
	flex-direction: column;
	min-width: var(--space-0);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	transition:
		border-color var(--duration-fast),
		box-shadow var(--duration-fast);
}
.text-editor-field:focus-within {
	border-color: var(--color-accent);
	box-shadow: var(--input-focus-ring);
}
.text-editor-field.is-invalid {
	border-color: var(--color-danger);
}
.text-editor-field .text-editor-content,
.text-editor-field .text-editor-source {
	min-height: var(--text-editor-min);
	max-height: var(--text-editor-max);
	padding: var(--space-6) var(--space-8);
}
.text-editor-field.is-lg .text-editor-content,
.text-editor-field.is-lg .text-editor-source {
	min-height: var(--text-editor-min-lg);
}
.text-editor-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-top: var(--border-width) solid var(--color-border);
}
/* Over the selection: the format tools, a link's address, or the link form. */
.editor-bubble {
	min-width: var(--space-0);
	padding: var(--space-2);
}
.editor-tools {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.editor-tools-gap {
	align-self: stretch;
	width: var(--border-width);
	margin: var(--space-2) var(--space-2);
	background: var(--color-border);
}
.editor-link-href {
	max-width: var(--editor-link-max);
	overflow: hidden;
	padding: var(--space-0) var(--space-6);
	font-size: var(--font-size-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-accent-ink);
}
.editor-link-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: var(--editor-link-form-width);
	max-width: 100%;
}
.editor-link-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.editor-link-row > .input,
.editor-link-row > :first-child {
	flex: 1 1 auto;
	min-width: var(--space-0);
}
/* A whole page (a campaign): it grows with the text and the page scrolls. */
.text-editor-field.is-page .text-editor-content,
.text-editor-field.is-page .text-editor-source {
	min-height: var(--text-editor-min-page);
	max-height: none;
}
/* A campaign: paragraphs a blank line apart, headings, rules and images, as the email shows them. */
.text-editor-content.is-campaign {
	font-size: var(--font-size-md);
}
.text-editor-content.is-campaign > * {
	margin-block: var(--space-0);
}
.text-editor-content.is-campaign > * + * {
	margin-top: var(--text-editor-block-gap);
}
.text-editor-content.is-campaign h2,
.text-editor-content.is-campaign h3 {
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-tight);
}
.text-editor-content.is-campaign h2 {
	font-size: var(--font-size-xl);
}
.text-editor-content.is-campaign h3 {
	font-size: var(--font-size-lg);
}
.text-editor-content.is-campaign hr {
	border: none;
	border-top: var(--border-width) solid var(--color-border);
}
.text-editor-content.is-campaign blockquote > * + * {
	margin-top: var(--text-editor-block-gap);
}
.text-editor-image {
	margin: var(--space-0);
}
.text-editor-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}
/* While it uploads: the file from this browser, faded and breathing. */
.text-editor-image.is-uploading img {
	animation: text-editor-uploading var(--duration-pulse) ease-in-out infinite
		alternate;
}
@keyframes text-editor-uploading {
	from {
		opacity: var(--text-editor-uploading-from);
	}
	to {
		opacity: var(--text-editor-uploading-to);
	}
}
.text-editor-image.ProseMirror-selectednode img,
.text-editor-verbatim.ProseMirror-selectednode {
	outline: var(--border-width-strong) solid var(--color-accent);
	outline-offset: var(--space-2);
}
/* Markdown kept as written (a code block, a table): edit it as Markdown. */
.text-editor-verbatim {
	overflow-x: auto;
	padding: var(--space-6) var(--space-8);
	border-radius: var(--radius-md);
	background: var(--md-code-bg);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	line-height: var(--leading-code);
	white-space: pre;
}
.text-editor-drop {
	background: var(--color-accent);
}
/* The cursor beside an image or rule at the very start or end. */
.ProseMirror-gapcursor {
	display: none;
	position: absolute;
	pointer-events: none;
}
.ProseMirror-gapcursor::after {
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--space-2) * -1);
	width: var(--text-editor-gapcursor-width);
	border-top: var(--border-width) solid var(--color-ink);
	animation: text-editor-blink var(--text-editor-blink) steps(2, start) infinite;
}
@keyframes text-editor-blink {
	to {
		visibility: hidden;
	}
}
.ProseMirror-focused .ProseMirror-gapcursor {
	display: block;
}
/* Under the text: an image uploading (Markdown) or why one couldn't go in. */
.text-editor-note {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: var(--space-0);
	padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.text-editor-note.is-error {
	color: var(--color-danger-ink);
}
.text-editor-note-text {
	flex: 1 1 auto;
	min-width: var(--space-0);
}
.editor-image-alt {
	max-width: var(--editor-link-max);
	overflow: hidden;
	padding: var(--space-0) var(--space-6);
	font-size: var(--font-size-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.editor-image-alt.is-empty {
	color: var(--color-muted);
}
/* ---------- A campaign's composer: tools on top, the text under them (the card around it is EmailComposer's) ---------- */
.text-editor-composer {
	display: flex;
	flex-direction: column;
	min-width: var(--space-0);
}
/* The tools are an HScroll's row; the line under them stays whole while the row fades at a clipped edge. */
.text-editor-toolbar-scroll {
	border-bottom: var(--border-width) solid var(--color-border);
}
.text-editor-toolbar {
	gap: var(--space-2);
	padding: var(--space-4) var(--space-8);
}
.text-editor-toolbar > * {
	flex: none;
}
.text-editor-toolbar-end {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-inline-start: auto;
}
.text-editor-composer .text-editor-content,
.text-editor-composer .text-editor-source {
	min-height: var(--text-editor-min-page);
	padding: var(--space-14) var(--space-16) var(--space-18);
}
/* An image's notes over its bottom edge: where it's stored, its size and link; no description. */
.text-editor-image {
	position: relative;
}
.ProseMirror-focused .text-editor-image.is-selected img {
	outline: var(--border-width-strong) solid var(--color-accent);
	outline-offset: var(--space-2);
}
/* An image that didn't load (a wrong address): a block its notes can sit on. */
.text-editor-image.is-broken {
	min-height: var(--text-editor-image-broken-height);
	border: var(--border-width) dashed var(--color-border);
	border-radius: var(--radius-md);
}
.text-editor-image.is-broken img {
	display: none;
}
.text-editor-image-broken {
	display: block;
	padding: var(--space-10) var(--space-12);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.text-editor-image-chips {
	position: absolute;
	right: var(--space-8);
	bottom: var(--space-8);
	left: var(--space-8);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	pointer-events: none;
}
.text-editor-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	max-width: 100%;
	height: var(--text-editor-chip-height);
	padding: var(--space-0) var(--space-8);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	box-shadow: var(--shadow-popover);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	color: var(--color-ink);
}
.text-editor-chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
}
.text-editor-chip-ok {
	flex: none;
	color: var(--color-live);
}
.text-editor-chip.is-warn {
	color: var(--color-warn-ink);
}
/* An image on its way: its name, a bar, how far along. */
.text-editor-upload {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	margin: var(--space-0);
	padding: var(--space-9) var(--space-12);
	border: var(--border-width) dashed var(--color-muted);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}
.ProseMirror-focused .text-editor-upload.is-selected {
	border-color: var(--color-accent);
}
.text-editor-upload-name {
	max-width: var(--editor-link-max);
	overflow: hidden;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-ink);
}
.text-editor-upload-track {
	flex: 1 1 auto;
	min-width: var(--space-40);
	height: var(--space-4);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--color-hover);
}
.text-editor-upload-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: var(--radius-full);
	background: var(--color-accent);
	transition: width var(--duration-fast) linear;
}
/* No percentage yet: a short bar going back and forth. */
.text-editor-upload-track.is-waiting .text-editor-upload-fill {
	width: var(--text-editor-upload-waiting);
	animation: text-editor-upload-wait var(--duration-pulse) ease-in-out infinite
		alternate;
}
@keyframes text-editor-upload-wait {
	from {
		margin-inline-start: var(--space-0);
	}
	to {
		margin-inline-start: calc(100% - var(--text-editor-upload-waiting));
	}
}
.text-editor-upload-label {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* A button: its words on the accent, where it goes beside it. */
.text-editor-button-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
}
.text-editor-button {
	display: inline-flex;
	align-items: center;
	min-height: var(--text-editor-button-height);
	padding: var(--space-0) var(--space-16);
	border-radius: var(--radius-md);
	background: var(--color-accent);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-on-accent);
	text-decoration: none;
}
.text-editor-button-block .text-editor-chip {
	background: var(--color-hover);
	box-shadow: none;
	color: var(--color-muted);
}
.ProseMirror-focused .text-editor-button-block.is-selected .text-editor-button {
	outline: var(--border-width-strong) solid var(--color-accent);
	outline-offset: var(--space-2);
}
/* A merge field: `first_name|there`, filled in per person. */
.text-editor-merge {
	display: inline-flex;
	align-items: center;
	height: var(--text-editor-merge-height);
	padding: var(--space-0) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	white-space: nowrap;
	vertical-align: var(--space-1);
	color: var(--color-accent-ink);
}
.text-editor-merge.ProseMirror-selectednode {
	outline: var(--border-width-strong) solid var(--color-accent);
}
/* Typing `/`: the blocks it can add. */
.editor-slash {
	display: grid;
	gap: var(--space-1);
	width: var(--editor-slash-width);
	max-width: 100%;
}
.editor-slash-item {
	display: grid;
	grid-template-columns: var(--space-20) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-6);
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	font: inherit;
	font-size: var(--font-size-sm);
	text-align: start;
	color: var(--color-ink);
	cursor: pointer;
}
.editor-slash-item .icon {
	color: var(--color-muted);
}
.editor-slash-item.is-on {
	background: var(--color-accent-muted);
}
.editor-slash-key {
	font-family: var(--font-mono);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}


/* ./components/blocks.css */
/* blocks group components: generative UI cards in Ask answers. Tokens only: see tokens/blocks.css. */

/* ChatCard */
.chat-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	overflow: hidden;
}
.chat-card-head {
	display: flex;
	align-items: baseline;
	gap: var(--space-8);
	padding: var(--space-10) var(--space-12) var(--space-8);
}
.chat-card-title {
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chat-card-meta {
	flex-grow: 1;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}
.chat-card-open {
	flex-shrink: 0;
	margin-left: auto;
}
.chat-card-body {
	padding: var(--space-0) var(--space-12) var(--space-12);
}
.chat-card-body:first-child {
	padding-top: var(--space-12);
}
.chat-card-body.is-flush {
	padding: var(--space-0);
}
.chat-card-head + .chat-card-body.is-flush {
	border-top: var(--border-width) solid var(--color-border);
}

/* Card bodies */
/* Each cell draws its right and bottom hairline; the card clips the outer ones. */
.ui-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--ui-stat-min), 1fr));
	margin: var(--space-0) calc(var(--border-width) * -1)
		calc(var(--border-width) * -1) var(--space-0);
}
.ui-stats > .stat {
	padding: var(--space-10) var(--space-12);
	border-right: var(--border-width) solid var(--color-border);
	border-bottom: var(--border-width) solid var(--color-border);
}
.ui-chart {
	padding: var(--space-8) var(--space-12) var(--space-4);
}
.ui-rows {
	display: flex;
	flex-direction: column;
	padding: var(--space-6) var(--space-8);
}
.ui-live {
	display: flex;
	flex-direction: column;
}
.ui-live > .stat {
	padding: var(--space-10) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.ui-person {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}
.ui-insights {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.ui-empty {
	padding: var(--space-4) var(--space-0);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.ui-empty.is-error {
	color: var(--color-danger-ink);
}
.ui-preview {
	margin-top: var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.ui-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Segments: prose and cards in one answer */
.ui-segments {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	line-height: var(--leading-relaxed);
}
.ui-prose {
	white-space: pre-wrap;
}

/* Skeleton */
.ui-skeleton {
	gap: var(--space-10);
	padding: var(--space-12);
}
.ui-skeleton-line,
.ui-skeleton-block {
	display: block;
	border-radius: var(--radius-sm);
	background: linear-gradient(
		90deg,
		var(--color-hover),
		var(--color-surface-2),
		var(--color-hover)
	);
	background-size: 200% 100%;
	animation: ui-shimmer var(--duration-shimmer) ease-in-out infinite;
}
.ui-skeleton-line {
	height: var(--ui-skeleton-line);
}
.ui-skeleton-line.is-short {
	width: var(--ui-skeleton-short);
}
.ui-skeleton-block {
	height: var(--ui-skeleton-block);
}
@keyframes ui-shimmer {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: -100% 0;
	}
}

/* Fallback */
.ui-fallback {
	gap: var(--space-8);
	padding: var(--space-10) var(--space-12);
	border-style: dashed;
	background: transparent;
}
.ui-fallback-head {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.ui-fallback-details summary {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	cursor: pointer;
}
.ui-fallback-details[open] {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.ui-fallback-error {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	color: var(--color-danger-ink);
}

/* ConfirmCard */
.confirm-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: var(--space-12);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.confirm-card.is-done {
	border-color: color-mix(in srgb, var(--color-live) 40%, var(--color-border));
}
.confirm-card.is-error {
	border-color: color-mix(
		in srgb,
		var(--color-danger) 40%,
		var(--color-border)
	);
}
.confirm-card.is-cancelled {
	opacity: var(--opacity-disabled);
}
.confirm-head {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}
.confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--confirm-icon-size);
	height: var(--confirm-icon-size);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.confirm-heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.confirm-title {
	font-weight: var(--font-weight-semibold);
}
.confirm-meta {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.confirm-notes {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.confirm-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
}
.confirm-actions {
	display: flex;
	gap: var(--space-6);
}
.confirm-state {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.confirm-state.is-done {
	font-weight: var(--font-weight-medium);
	color: var(--color-live-ink);
}
.confirm-state.is-error {
	flex-basis: 100%;
	color: var(--color-danger-ink);
}
.confirm-spinner {
	display: inline-block;
	width: var(--confirm-spinner-size);
	height: var(--confirm-spinner-size);
	border: var(--border-width-strong) solid currentColor;
	border-right-color: transparent;
	border-radius: var(--radius-full);
	animation: confirm-spin var(--duration-spin) linear infinite;
}
/* ReplyDraftCard: a confirm card's chrome around the drafted text */
.reply-draft-text {
	margin: var(--space-0);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: var(--font-size-md);
	line-height: var(--leading-prose);
}
.reply-draft-text.is-clamped {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
}
.reply-draft-more {
	align-self: flex-start;
	padding: var(--space-0);
	border: none;
	background: transparent;
	font-size: var(--font-size-xs);
	color: var(--color-accent-ink);
	cursor: pointer;
}
.reply-draft-more:hover {
	text-decoration: underline;
}
@keyframes confirm-spin {
	to {
		transform: rotate(360deg);
	}
}


/* ./components/utility.css */
/* utility group components. Tokens only: see tokens/utility.css. */

/* Skeleton */
.skeleton {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: var(--radius-sm);
	background:
		linear-gradient(
				90deg,
				transparent 0%,
				var(--skeleton-shine) 50%,
				transparent 100%
			)
			0 0 / 200% 100% no-repeat,
		var(--skeleton-base);
	animation: skeleton-shimmer var(--skeleton-duration) ease-in-out infinite;
}
/* Where you landed (src/ui/flash.ts): holds, then fades. */
@keyframes landed-flash {
	from,
	35% {
		opacity: var(--opacity-full);
	}
	to {
		opacity: var(--opacity-hidden);
	}
}
@keyframes skeleton-shimmer {
	from {
		background-position:
			150% 0,
			0 0;
	}
	to {
		background-position:
			-50% 0,
			0 0;
	}
}
.skeleton-circle {
	flex-shrink: 0;
	border-radius: var(--radius-full);
}
.skeleton-block {
	border-radius: var(--radius-sm);
}
/* A text line: its own font size and line height give it the real line's height. */
.skeleton-line {
	height: 1lh;
	background-clip: content-box;
	padding: var(--space-2) var(--space-0);
}
.skeleton-text-2xs {
	font-size: var(--font-size-2xs);
	line-height: var(--leading-base);
}
.skeleton-text-xs {
	font-size: var(--font-size-xs);
	line-height: var(--leading-base);
}
.skeleton-text-sm {
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
}
.skeleton-text-md {
	font-size: var(--font-size-md);
	line-height: var(--leading-base);
}
.skeleton-text-xl {
	font-size: var(--font-size-xl);
	line-height: var(--leading-base);
}
.skeleton-code {
	display: grid;
}
/* One skeleton line per code line, at the code's own line height. */
.skeleton-code .skeleton-text-xs {
	line-height: var(--leading-code);
}
.skeleton-text-stat-sm {
	font-size: var(--font-size-stat-sm);
	line-height: var(--leading-tight);
}
.skeleton-text-stat {
	font-size: var(--font-size-stat);
	line-height: var(--leading-tight);
}
.skeleton-text-kpi {
	font-size: var(--font-size-kpi);
	line-height: var(--leading-tight);
}
.skeleton-stack {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}
.skeleton-entity {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}
.skeleton-chart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.skeleton-gridline {
	display: block;
	height: var(--border-width);
	background: var(--color-border);
}
.skeleton-chart-area {
	position: absolute;
	inset: 40% 0 0 0;
	width: auto;
	opacity: var(--opacity-disabled);
}
.skeleton-rows .bd-row {
	gap: var(--space-8);
}
.skeleton-bar {
	height: 100%;
	max-height: calc(100% - var(--space-6));
}
.skeleton-row-value {
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
	width: var(--space-32);
}
.skeleton-list {
	display: flex;
	flex-direction: column;
}
.skeleton-list-row {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-height: var(--skeleton-list-row);
	padding: var(--space-8) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
}
.skeleton-list-row > .skeleton-line:last-child {
	flex-shrink: 0;
	width: var(--space-32);
}

/* Spinner */
.spinner-inline {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}
.spinner {
	flex-shrink: 0;
	animation: spinner-turn var(--spinner-duration) linear infinite;
}
.spinner-xs {
	width: var(--spinner-xs);
	height: var(--spinner-xs);
}
.spinner-sm {
	width: var(--spinner-sm);
	height: var(--spinner-sm);
}
.spinner-md {
	width: var(--spinner-md);
	height: var(--spinner-md);
}
.spinner-track,
.spinner-arc {
	fill: none;
	stroke-width: var(--spinner-stroke);
	stroke-linecap: round;
}
.spinner-track {
	stroke: var(--color-border);
}
.spinner-arc {
	stroke: var(--color-accent);
}
@keyframes spinner-turn {
	to {
		transform: rotate(360deg);
	}
}
.spinner-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	min-height: var(--spinner-block-min);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* Favicon */
.favicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	vertical-align: middle;
}
.favicon-sm {
	width: var(--favicon-sm);
	height: var(--favicon-sm);
	font-size: var(--font-size-2xs);
}
.favicon-md {
	width: var(--favicon-md);
	height: var(--favicon-md);
	font-size: var(--font-size-xs);
}
.favicon-image {
	object-fit: contain;
}
.favicon-letter {
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface-2);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	color: var(--color-muted);
}
.favicon-direct {
	background: var(--color-hover);
	color: var(--color-muted);
}

/* CountryFlag */
.country {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}
.country-flag {
	font-size: var(--flag-size);
	line-height: 1;
}
.country-unknown {
	color: var(--color-muted);
}

/* AvatarGroup */
.avatar-group {
	display: inline-flex;
	align-items: center;
}
.avatar-group > * + * {
	margin-left: var(--avatar-overlap);
}
.avatar-group > .avatar {
	box-shadow: 0 0 0 var(--border-width-strong) var(--color-surface);
}
.avatar-more {
	background: var(--color-hover);
	color: var(--color-muted);
}

/* Onboarding */
.onboarding {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: var(--space-14) var(--space-16);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.onboarding-head {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}
.onboarding-title {
	display: flex;
	flex-grow: 1;
	align-items: baseline;
	gap: var(--space-10);
}
.onboarding-title h2 {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.onboarding-title span {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.onboarding-steps {
	display: flex;
	flex-direction: column;
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.onboarding-step {
	border-top: var(--border-width) solid var(--color-border);
}
.onboarding-step-head {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	width: 100%;
	min-height: var(--row-height-md);
	padding: var(--space-0);
	border: none;
	background: transparent;
	text-align: left;
}
.onboarding-step-head:disabled {
	cursor: default;
	opacity: var(--opacity-visible);
}
.onboarding-step-title {
	flex-grow: 1;
	font-weight: var(--font-weight-medium);
}
.onboarding-step.is-done .onboarding-step-title {
	color: var(--color-muted);
	text-decoration: line-through;
	text-decoration-color: var(--color-border);
}
.onboarding-optional {
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.onboarding-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--onboarding-marker);
	height: var(--onboarding-marker);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted);
}
.onboarding-marker.is-done {
	border-color: transparent;
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.onboarding-marker.is-waiting {
	border-color: transparent;
}
.onboarding-step.is-open .onboarding-marker:not(.is-done) {
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}
.onboarding-step-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-0) var(--space-0) var(--space-12)
		var(--onboarding-body-indent);
	line-height: var(--leading-prose);
}
.onboarding-waiting {
	color: var(--color-muted);
}
.onboarding-action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
}

/* ErrorState */
.error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	margin: var(--space-0) auto;
	max-width: var(--error-state-max);
	padding: var(--space-24) var(--space-16);
	text-align: center;
}
.error-state-page {
	min-height: var(--error-state-min-page);
}
.error-state h2 {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.error-state p {
	line-height: var(--leading-prose);
}
.error-code {
	font-size: var(--error-code-size);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
	line-height: 1;
	color: var(--color-muted);
}
.error-icon {
	display: inline-flex;
	color: var(--color-muted);
}
.error-icon .icon {
	width: var(--error-icon-size);
	height: var(--error-icon-size);
}
.error-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
	margin-top: var(--space-6);
}
.error-details {
	width: 100%;
	margin-top: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-align: left;
}
.error-details summary {
	cursor: pointer;
	text-align: center;
}
.error-details-body {
	margin-top: var(--space-8);
	padding: var(--space-8) var(--space-10);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	font-family: var(--font-mono);
	overflow-wrap: anywhere;
}

/* Banner */
.banner {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--banner-height);
	padding: var(--space-6) var(--space-8) var(--space-6) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
}
.banner-info {
	background: var(--color-surface);
}
.banner-info .banner-icon {
	color: var(--color-muted);
}
.banner-accent {
	background: var(--color-accent-muted);
}
.banner-accent .banner-icon {
	color: var(--color-accent-ink);
}
.banner-warn {
	background: color-mix(in srgb, var(--color-warn) 16%, var(--color-surface));
}
.banner-warn .banner-icon {
	color: var(--color-warn-ink);
}
.banner-danger {
	background: var(--color-danger-muted);
}
.banner-danger .banner-icon {
	color: var(--color-danger-ink);
}
.banner-text {
	flex-grow: 1;
	min-width: 0;
}
.banner-text strong {
	font-weight: var(--font-weight-semibold);
}
.banner-action {
	flex-shrink: 0;
}

/* RetentionGrid */
.retention {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}
.retention-scroll {
	overflow-x: auto;
}
.retention-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: var(--space-2);
	font-size: var(--font-size-xs);
}
.retention-table th {
	padding: var(--space-4) var(--space-6);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-muted);
}
.retention-table tbody th {
	min-width: var(--retention-label-min);
	font-size: var(--font-size-xs);
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-ink);
}
.retention-table .is-end {
	text-align: right;
}
.retention-table td {
	padding: var(--space-4) var(--space-6);
}
.retention-cell {
	min-width: var(--retention-cell-min);
	border-radius: var(--radius-sm);
	text-align: center;
}
.retention-cell.is-strong {
	color: var(--color-on-accent);
}
.retention-cell.is-base {
	background: var(--color-hover);
	color: var(--color-muted);
}
.retention-cell.is-empty {
	background: transparent;
}
.retention-cell:hover,
.retention-cell:focus-visible {
	outline: var(--border-width-strong) solid var(--color-ink);
	outline-offset: calc(var(--border-width) * -1);
}
.retention-readout,
.heatmap-readout {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* Heatmap */
.heatmap {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}
.heatmap-scroll {
	overflow-x: auto;
}
.heatmap-grid {
	display: grid;
	grid-template-columns: var(--heatmap-day-col) repeat(
			24,
			minmax(var(--heatmap-cell), 1fr)
		);
	gap: var(--heatmap-gap);
	width: max-content;
	min-width: 100%;
}
.heatmap-hour,
.heatmap-day {
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.heatmap-day {
	align-self: center;
}
.heatmap-cell {
	aspect-ratio: 1;
	min-height: var(--heatmap-cell);
	border-radius: var(--radius-sm);
}
.heatmap-cell:hover,
.heatmap-cell.is-active {
	outline: var(--border-width-strong) solid var(--color-ink);
	outline-offset: calc(var(--border-width) * -1);
}
.heatmap-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
}
.heatmap-legend {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.heatmap-swatch {
	width: var(--heatmap-swatch);
	height: var(--heatmap-swatch);
	border-radius: var(--radius-sm);
}

/* CalendarHeatmap (shares the Heatmap's foot, readout and legend) */
.cal-heatmap {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}
.cal-heatmap-scroll {
	overflow-x: auto;
}
.cal-heatmap-grid {
	display: grid;
	grid-template-columns:
		var(--cal-heatmap-day-col)
		repeat(
			var(--cal-heatmap-weeks),
			minmax(var(--cal-heatmap-cell), var(--cal-heatmap-cell-max))
		);
	gap: var(--cal-heatmap-gap);
	/* Cells shrink to their minimum before the calendar scrolls. */
	width: max-content;
	max-width: 100%;
	min-width: min-content;
}
.cal-heatmap-month,
.cal-heatmap-day {
	font-size: var(--font-size-2xs);
	line-height: 1;
	color: var(--color-muted);
	white-space: nowrap;
}
/* A month name may run over the next weeks' columns. */
.cal-heatmap-month {
	overflow: visible;
	width: 0;
}
.cal-heatmap-day {
	align-self: center;
}
.cal-heatmap-cell {
	aspect-ratio: 1;
	min-height: var(--cal-heatmap-cell);
	border-radius: var(--radius-sm);
}
.cal-heatmap-cell:hover,
.cal-heatmap-cell.is-active {
	outline: var(--border-width-strong) solid var(--color-ink);
	outline-offset: calc(var(--border-width) * -1);
}

/* DeviceIcons */
.device-icons {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	color: var(--color-muted);
	vertical-align: middle;
}

/* IconLabel */
.icon-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
	max-width: 100%;
	vertical-align: middle;
}
.icon-label-icon {
	flex-shrink: 0;
	color: var(--color-muted);
}
.icon-label-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ./components/models.css */
/* ModelPicker. Tokens only: see tokens/models.css. */

/* Provider marks: neutral letters on a soft tint of each provider's color. */
.mp-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	--mp-tint: var(--color-accent);
	background: color-mix(in srgb, var(--mp-tint) 16%, transparent);
	color: color-mix(in srgb, var(--mp-tint) 78%, var(--color-ink));
}
.mp-mark-md {
	width: var(--mp-mark-md);
	height: var(--mp-mark-md);
	font-size: var(--font-size-xs);
}
.mp-mark-sm {
	width: var(--mp-mark-sm);
	height: var(--mp-mark-sm);
	font-size: var(--font-size-2xs);
}
.mp-mark-auto {
	color: var(--color-accent-ink);
}
.mp-mark-anthropic {
	--mp-tint: var(--mp-mark-anthropic);
}
.mp-mark-openai {
	--mp-tint: var(--mp-mark-openai);
}
.mp-mark-google {
	--mp-tint: var(--mp-mark-google);
}
.mp-mark-xai {
	--mp-tint: var(--mp-mark-xai);
}
.mp-mark-cursor {
	--mp-tint: var(--mp-mark-cursor);
}

/* Trigger */
.mp-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-ink);
	text-align: left;
	transition:
		background var(--duration-fast),
		border-color var(--duration-fast);
}
.mp-trigger:disabled {
	cursor: not-allowed;
	opacity: var(--opacity-disabled);
}
.mp-trigger-pill {
	max-width: var(--mp-pill-max-width);
	height: var(--icon-button-size);
	padding: var(--space-0) var(--space-6) var(--space-0) var(--space-4);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.mp-trigger-pill:hover:not(:disabled),
.mp-trigger-pill[aria-expanded='true'] {
	background: var(--color-hover);
	color: var(--color-ink);
}
.mp-trigger-field {
	width: var(--mp-field-width);
	max-width: 100%;
	min-height: var(--control-height);
	padding: var(--space-6) var(--space-8);
	border-color: var(--color-border);
	background: var(--color-surface-2);
}
.mp-trigger-field:hover:not(:disabled),
.mp-trigger-field[aria-expanded='true'] {
	border-color: var(--color-muted);
}
.mp-trigger-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}
.mp-trigger-name,
.mp-trigger-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mp-trigger-field .mp-trigger-name {
	font-weight: var(--font-weight-medium);
}
.mp-trigger-sub {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.mp-trigger-chevron {
	color: var(--color-muted);
}

/* Popover body */
.popover.mp-popover {
	width: var(--mp-width);
	max-height: none;
	overflow: hidden;
}
.popover.popover-sheet.mp-popover {
	width: auto;
}
.mp {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-sm);
}
.mp-search {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	height: var(--mp-search-height);
	padding: var(--space-0) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
	color: var(--color-muted);
}
.mp-search input {
	flex-grow: 1;
	min-width: 0;
	border: none;
	outline: var(--border-width-strong) solid transparent;
	background: transparent;
	font-size: var(--font-size-sm);
	color: var(--color-ink);
}
.mp-search input::placeholder {
	color: var(--color-muted);
}
.mp-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mp-detail-width);
	height: var(--mp-body-height);
}
.mp-list {
	min-height: var(--space-0);
	padding: var(--space-4);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mp-section {
	padding: var(--space-8) var(--space-8) var(--space-4);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.mp-empty {
	padding: var(--space-20) var(--space-12);
	text-align: center;
	color: var(--color-muted);
}

/* Rows */
.mp-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-8) var(--space-2) var(--space-8) var(--space-8);
	border-radius: var(--radius-md);
	cursor: pointer;
}
.mp-row > .mp-mark {
	align-self: start;
	margin-top: var(--space-2);
}
.mp-row.is-active {
	background: var(--color-hover);
	box-shadow: var(--focus-bar);
}
.mp-row.is-unavailable {
	cursor: not-allowed;
}
.mp-row.is-unavailable .mp-mark,
.mp-row.is-unavailable .mp-row-name,
.mp-row.is-unavailable .mp-row-desc {
	opacity: var(--opacity-disabled);
}
.mp-row-main {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.mp-row-name,
.mp-row-desc,
.mp-row-meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mp-row-name {
	font-weight: var(--font-weight-medium);
}
.mp-row-desc {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* Third line: cost and capabilities as quiet text, separated by dots. */
.mp-row-meta {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin-top: var(--space-2);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.mp-row-meta.is-warning {
	display: block;
	color: var(--color-warn-ink);
}
.mp-cap::before {
	content: '·';
	margin-right: var(--space-6);
}
.mp-cost {
	letter-spacing: var(--tracking-caps);
}
.mp-slot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-button-size);
	height: var(--icon-button-size);
}
/* The current model shows its check; hovering the row swaps in the star. */
.mp-slot.is-current .mp-star,
.mp-row:hover .mp-slot.is-current .mp-check {
	display: none;
}
.mp-row:hover .mp-slot.is-current .mp-star {
	display: inline-flex;
}
/* No hover on touch: the current model shows its star too, so it can be favorited. */
@media (hover: none) {
	.mp-slot.is-current .mp-star {
		display: inline-flex;
	}
	.mp-slot.is-current .mp-check {
		display: none;
	}
}
.mp-check {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent-ink);
}
.mp-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-button-size);
	height: var(--icon-button-size);
	padding: var(--space-0);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast);
}
.mp-row:hover .mp-star,
.mp-row.is-active .mp-star,
.mp-star.is-on {
	opacity: var(--mp-opacity-visible);
}
.mp-star:hover {
	background: var(--color-surface-2);
	color: var(--color-ink);
}
.mp-star.is-on {
	color: var(--color-warn-ink);
}
.mp-star.is-on svg {
	fill: currentColor;
}
/* Detail pane */
.mp-detail {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	min-height: var(--space-0);
	padding: var(--space-14) var(--space-14);
	overflow-y: auto;
	border-left: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
.mp-detail-head {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}
.mp-detail-head > span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mp-detail-head strong {
	font-weight: var(--font-weight-semibold);
}
.mp-detail-provider,
.mp-detail-label {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.mp-detail-desc {
	line-height: var(--leading-prose);
}
.mp-detail-unavailable {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-warn-ink);
}
.mp-scores {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.mp-score {
	display: grid;
	grid-template-columns: var(--mp-score-label-width) minmax(0, 1fr) var(
			--space-24
		);
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
}
.mp-score-label {
	color: var(--color-muted);
}
.mp-score-hint {
	text-align: right;
	color: var(--color-muted);
}
.mp-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4) var(--space-12);
	margin: var(--space-0);
	font-size: var(--font-size-xs);
}
.mp-facts dt {
	color: var(--color-muted);
}
.mp-facts dd {
	margin: var(--space-0);
	text-align: right;
}
.mp-goodfor {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.mp-goodfor ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-0);
	padding-left: var(--space-14);
	font-size: var(--font-size-xs);
}

/* Options bar + footer */
.mp-options {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	height: var(--mp-options-height);
	overflow: hidden;
	gap: var(--space-8) var(--space-12);
	padding: var(--space-8) var(--space-12);
	border-top: var(--border-width) solid var(--color-border);
}
.mp-options-name {
	flex-grow: 1;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}
.mp-foot {
	display: flex;
	gap: var(--space-14);
	padding: var(--space-6) var(--space-12);
	border-top: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.mp-foot > span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
}

/* Phones and narrow panels: no detail pane or key hints; rows carry the essentials. */
@container (max-width: 519px) {
	.mp-body {
		grid-template-columns: minmax(0, 1fr);
	}
	.mp-detail,
	.mp-foot {
		display: none;
	}
	.mp-star {
		opacity: var(--mp-opacity-visible);
	}
}

.mp-inline {
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	box-shadow: var(--shadow-popover);
}


/* ./components/extras.css */
/* extras group components: Slider, SaveBar, InlineEdit, ThemePicker, UserMenu. Tokens only: see tokens/extras.css. */

/* ---------- Slider ---------- */
.slider {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	width: 100%;
	min-width: 0;
}
.slider-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
}
.slider-label {
	color: var(--color-muted);
}
.slider-value {
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
}
.slider-track {
	position: relative;
	height: var(--slider-track-height);
	margin: var(--space-0) calc(var(--slider-thumb-size) / 2);
	cursor: pointer;
	touch-action: none;
}
.slider-rail,
.slider-fill {
	position: absolute;
	top: 50%;
	height: var(--slider-rail-height);
	border-radius: var(--radius-full);
	transform: translateY(-50%);
}
.slider-rail {
	left: calc(var(--slider-thumb-size) / -2);
	right: calc(var(--slider-thumb-size) / -2);
	background: var(--color-hover);
}
.slider-fill {
	background: var(--color-accent);
}
.slider-tick {
	position: absolute;
	top: 50%;
	width: var(--slider-tick-size);
	height: var(--slider-tick-size);
	border-radius: var(--radius-full);
	background: var(--color-border);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.slider-tick.is-in {
	background: color-mix(in srgb, var(--color-on-accent) 70%, transparent);
}
.slider-thumb {
	position: absolute;
	top: 50%;
	width: var(--slider-thumb-size);
	height: var(--slider-thumb-size);
	border: var(--border-width-strong) solid var(--color-accent);
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	box-shadow: var(--slider-thumb-shadow);
	transform: translate(-50%, -50%);
	transition:
		box-shadow var(--duration-fast),
		transform var(--duration-fast);
	cursor: grab;
}
.slider-thumb:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--border-width-strong);
	box-shadow: var(--slider-thumb-shadow), var(--slider-focus-ring);
}
.slider-thumb.is-active {
	transform: translate(-50%, -50%) scale(1.1);
	cursor: grabbing;
}
.slider.is-dragging .slider-track {
	cursor: grabbing;
}
.slider-bubble {
	position: absolute;
	bottom: calc(100% + var(--slider-bubble-offset));
	left: 50%;
	padding: var(--space-2) var(--space-6);
	border-radius: var(--radius-sm);
	background: var(--color-ink);
	color: var(--color-surface);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}
.slider-marks {
	position: relative;
	height: var(--slider-marks-height);
	margin: var(--space-0) calc(var(--slider-thumb-size) / 2);
	font-size: var(--font-size-2xs);
	color: var(--color-muted);
}
.slider-mark {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}
.slider.is-disabled {
	opacity: var(--opacity-disabled);
}
.slider.is-disabled .slider-track,
.slider.is-disabled .slider-thumb {
	cursor: not-allowed;
}

/* ---------- SaveBar ---------- */
.save-bar {
	position: sticky;
	bottom: calc(var(--safe-bottom) + var(--space-12));
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	gap: var(--space-12);
	width: 100%;
	max-width: var(--save-bar-max-width);
	margin: var(--space-0) auto;
	padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	box-shadow: var(--save-bar-shadow);
	animation: save-bar-in var(--duration-base) var(--ease-out);
}
@keyframes save-bar-in {
	from {
		opacity: var(--opacity-hidden);
		transform: translateY(var(--space-8));
	}
}
@container (max-width: 639px) {
	.save-bar {
		bottom: calc(var(--safe-bottom) + var(--save-bar-phone-offset));
	}
}
.save-bar-status {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.save-bar-dot {
	width: var(--dot-size);
	height: var(--dot-size);
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background: var(--color-warn);
}
.save-bar-ok {
	color: var(--color-live-ink);
}
.save-bar-error {
	color: var(--color-danger-ink);
}
.save-bar.is-error .save-bar-status {
	color: var(--color-danger-ink);
}
.save-bar-actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
}
.save-bar-key .shortcut-key {
	border-color: transparent;
	background: color-mix(in srgb, var(--color-on-accent) 18%, transparent);
	color: var(--color-on-accent);
}

/* ---------- InlineEdit ---------- */
.inline-edit {
	display: inline-flex;
	flex-direction: column;
	max-width: 100%;
	min-width: 0;
}
button.inline-edit {
	flex-direction: row;
	align-items: center;
	gap: var(--space-6);
	/* The negative margin gives the padding back, so the text keeps the full width. */
	max-width: calc(100% + var(--inline-edit-pad) * 2);
	margin: calc(var(--inline-edit-pad) * -1);
	padding: var(--inline-edit-pad);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	text-align: left;
	color: var(--color-ink);
}
button.inline-edit:hover:not(:disabled) {
	border-color: var(--color-border);
}
.inline-edit-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.inline-edit-text.is-empty {
	color: var(--color-muted);
}
.inline-edit-icon {
	color: var(--color-muted);
	opacity: var(--opacity-hidden);
	transition: opacity var(--duration-fast);
}
button.inline-edit:hover .inline-edit-icon,
button.inline-edit:focus-visible .inline-edit-icon {
	opacity: var(--opacity-disabled);
}
/* No hover on touch: keep the pencil showing so the title reads as editable. */
@media (hover: none) {
	.inline-edit-icon {
		opacity: var(--opacity-disabled);
	}
}
.inline-edit-md {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.inline-edit-lg {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
}
.inline-edit-xl {
	font-size: var(--font-size-stat);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
}
.inline-edit.is-editing {
	gap: var(--space-4);
	margin: calc(var(--inline-edit-pad) * -1);
}
.inline-edit-input {
	min-width: 0;
	padding: var(--inline-edit-pad);
	border: var(--border-width) solid var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	font: inherit;
	letter-spacing: inherit;
	color: var(--color-ink);
	outline: var(--border-width-strong) solid transparent;
	box-shadow: var(--slider-focus-ring);
}
.inline-edit-input.is-invalid {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-muted);
}
.inline-edit-note {
	padding: var(--space-0) var(--inline-edit-pad);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	letter-spacing: normal;
	color: var(--color-muted);
}
.inline-edit-note.is-error {
	color: var(--color-danger-ink);
}

/* ---------- ThemePicker ---------- */
.theme-picker-current {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}

/* ---------- UserMenu ---------- */
.user-menu-trigger {
	width: 100%;
	border-right: none;
	border-bottom: none;
	border-left: none;
	border-radius: var(--space-0);
	background: transparent;
	text-align: left;
	color: var(--color-ink);
	cursor: pointer;
}
.user-menu-trigger:hover .user-card-name,
.user-menu-trigger[aria-expanded='true'] .user-card-name {
	color: var(--color-accent-ink);
}
.user-menu-trigger .user-card-text {
	flex-grow: 1;
}
.user-menu-chevron {
	color: var(--color-muted);
}


/* ./components/states.css */
/* states group components: DataState, ErrorBoundary, RouteProgress, Auth. Tokens only: see tokens/states.css. */

/* DataState */
.data-state {
	position: relative;
	min-width: 0;
}
/* A panel showing only an error or empty state centers it in whatever height its row gives the panel. */
.panel:has(> .data-state > :is(.error-state, .empty-state):only-child) {
	display: flex;
	flex-direction: column;
}
.panel > .data-state:has(> :is(.error-state, .empty-state):only-child) {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
}
.data-state-chip {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	z-index: var(--z-sticky);
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	height: var(--control-height-xs);
	padding: var(--space-0) var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface-2);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
	animation: fade-in var(--duration-base) var(--ease-out);
}
/* Refreshing: the spinner alone, no pill around it. */
.data-state-chip.is-quiet {
	padding: var(--space-0);
	border-color: transparent;
	background: none;
	box-shadow: none;
}
.data-state-chip.is-error {
	padding-right: var(--space-2);
	color: var(--color-warn-ink);
}
.data-state-chip .data-state-retry {
	height: var(--control-height-xs);
	padding: var(--space-0) var(--space-6);
	font-size: var(--font-size-2xs);
}

/* ErrorBoundary (panel) */
.boundary-panel {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--panel-header-height);
	padding: var(--space-8) var(--space-12);
	border: var(--border-width) dashed var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-muted);
}
.boundary-icon {
	color: var(--color-warn-ink);
}
.boundary-text {
	flex-grow: 1;
	min-width: 0;
}

/* RouteProgress */
.route-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--z-route-progress);
	height: var(--route-progress-height);
	pointer-events: none;
}
.route-progress.is-contained {
	position: absolute;
}
.route-progress-bar {
	display: block;
	height: 100%;
	background: var(--color-accent);
	transform-origin: left center;
	transition: transform var(--route-progress-duration) var(--ease-out);
}
.route-progress.is-finishing {
	opacity: var(--opacity-hidden);
	transition: opacity var(--route-progress-fade) ease-in
		var(--route-progress-duration);
}
@media (prefers-reduced-motion: reduce) {
	.route-progress-bar {
		transform: none !important;
	}
}

/* Auth */
.auth {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-24);
	padding: calc(var(--space-24) + var(--safe-top)) var(--space-16)
		calc(var(--space-24) + var(--safe-bottom));
	background: var(--color-app);
}
.auth-fill-viewport {
	min-height: var(--viewport-height);
}
.auth-fill-container {
	min-height: var(--auth-min-height);
}
.auth-logo {
	display: inline-flex;
	color: var(--color-ink);
}
.auth-card {
	width: 100%;
	max-width: var(--auth-card-width);
	padding: var(--space-28) var(--space-24);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.auth-footer {
	display: flex;
	gap: var(--space-16);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.auth-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}
.auth-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.auth-head h1 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
}
.auth-head p {
	line-height: var(--leading-prose);
}
.auth-error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-10);
	border-radius: var(--radius-md);
	background: var(--color-danger-muted);
	color: var(--color-danger-ink);
	line-height: var(--leading-prose);
}
.auth-error .icon {
	margin-top: var(--space-2);
}
.auth-note {
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
	color: var(--color-muted);
}
.auth-note a,
.consent-account a {
	color: var(--color-accent-ink);
}

/* Google button */
.google-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	width: 100%;
	height: var(--google-button-height);
	padding: var(--space-0) var(--space-12);
	border: var(--border-width) solid var(--google-border);
	border-radius: var(--radius-md);
	background: var(--google-bg);
	color: var(--google-ink);
	font-size: var(--google-button-font);
	font-weight: var(--font-weight-medium);
}
.google-button-neutral {
	border-color: transparent;
	background: var(--google-neutral-bg);
	color: var(--google-neutral-ink);
}
.google-button:hover:not(:disabled) {
	box-shadow: var(--shadow-popover);
}
/* As a link: keep Google's ink on hover, not the link color. */
a.google-button:hover {
	color: var(--google-ink);
}
a.google-button-neutral:hover {
	color: var(--google-neutral-ink);
}
.google-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--google-mark-size);
	height: var(--google-mark-size);
}
.google-mark {
	width: var(--google-mark-size);
	height: var(--google-mark-size);
}
.google-red {
	fill: var(--google-red);
}
.google-blue {
	fill: var(--google-blue);
}
.google-yellow {
	fill: var(--google-yellow);
}
.google-green {
	fill: var(--google-green);
}
.microsoft-red {
	fill: var(--microsoft-red);
}
.microsoft-green {
	fill: var(--microsoft-green);
}
.microsoft-blue {
	fill: var(--microsoft-blue);
}
.microsoft-yellow {
	fill: var(--microsoft-yellow);
}

/* Consent */
.consent-marks {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: var(--space-4);
}
.consent-client {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--logo-md);
	height: var(--logo-md);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
}
.consent-scopes {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: var(--space-0);
	padding: var(--space-12) var(--space-0);
	border-top: var(--border-width) solid var(--color-border);
	border-bottom: var(--border-width) solid var(--color-border);
	list-style: none;
}
.consent-scopes li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-10);
	line-height: var(--leading-prose);
}
.consent-scopes li > .icon {
	margin-top: var(--space-2);
	color: var(--color-accent-ink);
}
.consent-scopes li > span {
	display: flex;
	flex-direction: column;
}
.consent-scopes strong {
	font-weight: var(--font-weight-medium);
}
.consent-scopes .muted {
	font-size: var(--font-size-xs);
}
.consent-account {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
}
.consent-account-text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}
.consent-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
}
.auth-done {
	align-items: center;
	text-align: center;
}
.auth-done-icon {
	display: inline-flex;
	color: var(--color-live-ink);
}
.is-failed .auth-done-icon {
	color: var(--color-danger-ink);
}
.auth-done-icon .icon {
	width: var(--auth-done-icon);
	height: var(--auth-done-icon);
}

/* ---------- RefreshButton ---------- */
.refresh {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}
.refresh-age {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}
.refresh.is-refreshing .icon-btn svg {
	animation: refresh-spin var(--refresh-spin-duration) linear infinite;
}
@keyframes refresh-spin {
	to {
		transform: rotate(1turn);
	}
}
@media (prefers-reduced-motion: reduce) {
	.refresh.is-refreshing .icon-btn svg {
		animation: none;
		opacity: var(--opacity-disabled);
	}
}
@container (max-width: 1023px) {
	.refresh-age {
		display: none;
	}
}

/* ---------- Guide (on-demand how-to) ---------- */
.guide {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.guide-head {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	width: 100%;
	padding: var(--space-12) var(--space-16);
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-ink);
	text-align: left;
	transition: background var(--duration-fast);
}
.guide-head:hover {
	background: var(--color-hover);
}
.guide.is-open .guide-head {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.guide-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--logo-md);
	height: var(--logo-md);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
}
.guide-text {
	display: grid;
	flex-grow: 1;
	gap: var(--space-2);
	min-width: 0;
}
.guide-title {
	font-weight: var(--font-weight-semibold);
}
.guide-summary {
	color: var(--color-muted);
	font-size: var(--font-size-sm);
}
.guide-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
	color: var(--color-accent-ink);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}
.guide-steps {
	display: grid;
	gap: var(--space-16);
	margin: var(--space-0);
	padding: var(--space-16);
	border-top: var(--border-width) solid var(--color-border);
	list-style: none;
}
.guide-step {
	display: grid;
	grid-template-columns: var(--avatar-sm) minmax(0, 1fr);
	gap: var(--space-12);
	align-items: start;
}
.guide-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--avatar-sm);
	height: var(--avatar-sm);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}
.guide-step-number.is-done {
	border-color: transparent;
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.guide-step-number.is-waiting {
	border-color: transparent;
	color: var(--color-accent-ink);
}
.guide-step.is-done .guide-step-title {
	color: var(--color-muted);
}
.guide-progress {
	flex-shrink: 0;
	color: var(--color-muted);
	font-size: var(--font-size-sm);
	white-space: nowrap;
}
/* On a phone the toggle says enough; the steps show the progress. */
@media (max-width: 639px) {
	.guide-progress {
		display: none;
	}
}
.guide-step-content {
	display: grid;
	gap: var(--space-8);
	min-width: 0;
	padding-top: var(--space-2);
}
.guide-step-title {
	font-size: var(--font-size-md);
}
.guide-step-body {
	min-width: 0;
	color: var(--color-muted);
	font-size: var(--font-size-sm);
}
/* What to click, in order, under a step that takes a few. */
.guide-actions {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-0);
	padding-left: var(--space-18);
	color: var(--color-ink);
	list-style: lower-alpha;
}


/* ./components/inbox.css */
/*
 * Inbox: the three panes (InboxPanes), ConversationRow, MailMessage and
 * MailText, ThreadActivity. Tokens only (tokens/inbox.css, tokens/core.css).
 * Below desktop width the person's pane folds into a strip over the thread;
 * on phones one pane shows at a time: the list, or the open conversation.
 */

/* ---------- InboxPanes ---------- */
.inbox {
	display: grid;
	grid-template-columns:
		var(--inbox-list-width) minmax(0, 1fr)
		var(--inbox-context-width);
	/* One row exactly as tall as the window under the top bar: each pane
	   scrolls inside it, and a long thread can't push the page past the window. */
	grid-template-rows: minmax(0, 1fr);
	height: calc(var(--viewport-height) - var(--topbar-height));
	min-height: 0;
}
.inbox.no-context {
	grid-template-columns: var(--inbox-list-width) minmax(0, 1fr);
}
.inbox-list {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: auto;
	border-right: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
/* The narrow list's views sit closer than a page's. */
.inbox-list-head .tabs-page {
	gap: var(--space-14);
}
.inbox-list-head {
	position: sticky;
	top: 0;
	z-index: var(--z-raised);
	min-height: var(--inbox-head-height);
	padding: var(--space-0) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}
/* The order and the filter under the views: one line, two quiet menus. */
.inbox-list-tools {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-0) var(--space-6);
	margin-inline: calc(-1 * var(--space-8));
}
.inbox-list-empty {
	padding: var(--space-24) var(--space-16);
}
.inbox-thread {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}
/* The open conversation's loading wrapper (DataState) fills the pane, so the
   messages scroll and the reply box stays at the bottom. */
.inbox-thread > .data-state {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}
.inbox-context {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	min-width: 0;
	min-height: 0;
	overflow: auto;
	padding: var(--space-16) var(--space-14);
	border-left: var(--border-width) solid var(--color-border);
}
/* Panels keep their height and the pane scrolls: a flush panel hides its
   overflow, so shrinking it would cut its last rows off. */
.inbox-context > * {
	flex-shrink: 0;
}
.inbox-context .profile {
	align-items: flex-start;
}
.inbox-context-search {
	padding: var(--space-8) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.inbox-context-note {
	margin: var(--space-0);
	padding: var(--space-8) var(--space-12);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.inbox-context > .inbox-context-note {
	padding: var(--space-0);
}
.inbox-context-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}
.inbox-idle {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	padding: var(--space-24);
}

/* The open conversation: its header, the messages, a footer line. */
.thread-head {
	display: flex;
	/* A long thread scrolls under the header; it never squeezes it. */
	flex-shrink: 0;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	gap: var(--space-4) var(--space-12);
	min-height: var(--inbox-head-height);
	padding: var(--space-12) var(--space-24);
	border-bottom: var(--border-width) solid var(--color-border);
}
.thread-back {
	display: none;
	flex-shrink: 0;
	margin-left: calc(var(--icon-button-inset) * -1);
}
.thread-subject {
	flex: 1 1 0;
	min-width: 0;
	margin: var(--space-0);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-tight);
	overflow-wrap: anywhere;
}
.thread-actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
}
/* The status and the facts: a line of their own under the subject and the actions. */
.thread-meta {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-8);
	min-width: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* Who it's with, when the person's pane has folded away. */
.thread-person {
	display: none;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-24);
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* Ask's summary, pinned over the thread. */
.thread-summary {
	padding: var(--space-8) var(--space-24) var(--space-10);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-accent-muted);
	font-size: var(--font-size-sm);
}
.thread-summary-head {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.thread-summary-head > .icon {
	color: var(--color-accent);
}
.thread-summary-title {
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
}
.thread-summary-tools {
	display: flex;
	gap: var(--space-2);
	margin-left: auto;
}
.thread-summary-points {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-4) var(--space-0) var(--space-0);
	padding-left: var(--space-16);
	color: var(--color-ink);
}
.thread-summary-loading {
	display: grid;
	gap: var(--space-6);
	padding-top: var(--space-6);
}
.thread-summary-error {
	margin: var(--space-4) var(--space-0) var(--space-0);
	color: var(--color-danger);
}
.thread-person-name {
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
}
.thread-person .link-action {
	margin-left: auto;
}
/* Errors they hit while the thread went on: chips to each error. */
.thread-errors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
}
.thread-error {
	max-width: 100%;
}
.thread-error .chip-icon {
	color: var(--color-danger-ink);
}
.thread-error-name {
	display: inline-block;
	max-width: 24ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
.thread-scroll {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: var(--space-16) var(--space-24) var(--space-20);
}
.thread-scroll > * {
	flex-shrink: 0;
	max-width: var(--inbox-thread-measure);
}

/* ---------- ReplyBox ---------- */
.reply {
	flex-shrink: 0;
	container-type: inline-size;
	margin: var(--space-0);
	padding: var(--space-10) var(--space-24) var(--space-16);
	border-top: var(--border-width) solid var(--color-border);
}
.reply > .composer-box {
	max-width: var(--inbox-thread-measure);
}
.reply > .composer-box.is-note {
	background: var(--mail-note-fill);
}
.reply-head {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-6) var(--space-8);
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* One line, always: who it goes to and where it goes out from shorten
   (their whole address in the tooltip) before anything wraps. */
.reply-head .chip {
	min-width: 0;
	overflow: hidden;
	color: var(--color-ink);
}
.reply-head .chip > span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.reply-from {
	display: inline-flex;
	flex-shrink: 2;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
	margin-left: auto;
}
.reply-from-address {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gmail-mark,
.microsoft-mark {
	flex-shrink: 0;
	width: var(--reply-mark-size);
	height: var(--reply-mark-size);
}
/* UserPath's mail or an SMTP server: a plain mail icon where Gmail and Microsoft have their marks. */
.reply-from-icon {
	flex-shrink: 0;
	color: var(--color-muted);
}
/* The thread header's assignee: their avatar opens the picker. */
.thread-assignee {
	display: inline-flex;
	padding: var(--space-2);
	border: none;
	border-radius: var(--radius-full);
	background: transparent;
	cursor: pointer;
}
.thread-assignee:hover {
	background: var(--color-hover);
}
/* New email: people found by name, under the To field. */
.compose-people {
	overflow: hidden;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
}

/* An error's people: the count of the rest under the list. */
.error-people-more {
	margin: 0;
	padding: var(--space-8) var(--space-16);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* "Let them know": who this one goes to, then Skip and Send. */
.follow-up-who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6) var(--space-8);
	font-size: var(--font-size-sm);
}
.follow-up-count {
	color: var(--color-muted);
}
.follow-up-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-8);
}

/* Cc: a quiet toggle in the header, then a row of addresses under it. */
.reply-cc-toggle {
	padding: var(--space-0) var(--space-4);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	cursor: pointer;
}
.reply-cc-toggle:hover {
	color: var(--color-ink);
	background: var(--color-hover);
}
.reply-cc {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-8);
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.reply-cc .address-input {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--space-0);
	border: none;
	background: transparent;
	box-shadow: none;
}
.reply-blocked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-6) var(--space-10);
	border-bottom: var(--border-width) solid var(--color-border);
	background: var(--color-warn-muted);
	font-size: var(--font-size-xs);
}
.reply-input {
	min-height: var(--reply-input-min);
	max-height: var(--reply-input-max);
	font-size: var(--font-size-md);
}
/* Preview: the reply as it goes out, where the text box was, the same size and inset. */
.reply-preview {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-height: var(--reply-input-min);
	max-height: var(--reply-input-max);
	overflow-y: auto;
	padding: var(--space-8) var(--space-10);
	font-size: var(--font-size-md);
	line-height: var(--leading-relaxed);
	overflow-wrap: anywhere;
}
.reply-preview p {
	margin: var(--space-0);
}
.reply-preview-empty {
	color: var(--color-muted);
}
.reply-preview-signature {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
/* Files going out with the reply, between the text and the buttons. */
.reply-files {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-6) var(--space-10);
	border-top: var(--border-width) solid var(--color-border);
}
.reply-files-over {
	font-size: var(--font-size-xs);
	color: var(--color-danger);
}
/* Once Ask drafted the reply: where it came from, Draft again, Undo. */
/* Under the text, where the signature will go. */
.reply-signature {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-10);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.reply-signature a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: var(--space-2);
}
.reply-signature a:hover {
	color: var(--color-ink);
}
.reply-assist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-8);
	padding: var(--space-4) var(--space-10);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.reply-assist > .icon {
	color: var(--color-accent);
}
.reply-assist.is-error,
.reply-assist.is-error > .icon {
	color: var(--color-danger);
}
.reply-assist-text {
	flex: 1 1 auto;
	min-width: var(--space-0);
}
.reply-assist-action {
	padding: var(--space-0) var(--space-4);
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	font: inherit;
	color: var(--color-accent);
	cursor: pointer;
}
.reply-assist-action:hover:not(:disabled) {
	background: var(--color-hover);
}
.reply-assist-action:disabled {
	color: var(--color-muted);
	cursor: default;
}
.reply-hint {
	flex-grow: 1;
	min-width: var(--space-0);
	overflow: hidden;
	padding-left: var(--space-6);
	font-size: var(--font-size-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-muted);
}
/* The follow-up and the send buttons keep together; a box too narrow for
   one line puts them on the next, at the end. */
.reply-foot {
	flex-wrap: wrap;
}
.reply-foot > .reply-hint {
	flex-basis: 0;
}
.reply-send {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-left: auto;
}
/* A narrow box (the footer needs about 600px with the hint and every name):
   the buttons get the room, so the hint goes (⌘↵ still sends, and its place
   still pushes them to the end) and Draft with Ask and Follow up show only
   their icons, their names in the tooltip and for screen readers. Under
   about 440px the send buttons go on the next line. */
@container (max-width: 599px) {
	.reply-hint {
		visibility: hidden;
	}
	.reply .reply-tool-label {
		position: absolute;
		width: var(--space-1);
		height: var(--space-1);
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
/* The head keeps one line: under about 640px Preview shows only its eye
   (the sender's address shortening as it must), under about 560px the
   sender only its mark; the address stays in the tooltip and for screen
   readers. */
@container (max-width: 639px) {
	.reply-head .reply-tool-label {
		position: absolute;
		width: var(--space-1);
		height: var(--space-1);
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
@container (max-width: 559px) {
	.reply-head .reply-from-address {
		position: absolute;
		width: var(--space-1);
		height: var(--space-1);
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@container (max-width: 1023px) {
	.inbox,
	.inbox.no-context {
		grid-template-columns: var(--inbox-list-width) minmax(0, 1fr);
	}
	.inbox-context {
		display: none;
	}
	.thread-person {
		display: flex;
	}
}
@container (max-width: 639px) {
	.inbox,
	.inbox.no-context {
		display: block;
		height: auto;
	}
	.inbox.is-thread .inbox-list,
	.inbox:not(.is-thread) .inbox-thread {
		display: none;
	}
	.inbox-list {
		overflow: visible;
		border-right: none;
	}
	.inbox-list-head {
		top: var(--topbar-height);
	}
	.thread-back {
		display: inline-flex;
	}
	.thread-person {
		flex-wrap: wrap;
	}
	/* The subject gets the width; the actions go under the facts. */
	.thread-actions {
		order: 1;
	}
	.thread-scroll,
	.reply {
		padding-right: var(--page-gutter);
		padding-left: var(--page-gutter);
	}
	.thread-scroll {
		overflow: visible;
	}
}

/* ---------- ConversationRow ---------- */
.convo {
	position: relative;
	display: flex;
	gap: var(--space-10);
	padding: var(--space-10) var(--space-12) var(--space-10) var(--space-16);
	border-bottom: var(--border-width) solid var(--color-border);
	color: var(--color-ink);
	text-decoration: none;
}
.convo:hover {
	background: var(--color-hover);
}
/* The open one, and keyboard focus (J/K): an accent edge on the hover color, like table rows. */
.convo.is-selected,
.convo.is-focused {
	background: var(--color-hover);
	box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent);
}
.convo-unread {
	position: absolute;
	top: var(--space-16);
	left: var(--space-5);
	display: inline-flex;
}
.convo-avatar {
	position: relative;
	flex-shrink: 0;
	align-self: flex-start;
}
.convo-online {
	position: absolute;
	right: calc(var(--space-2) * -1);
	bottom: calc(var(--space-2) * -1);
	display: inline-flex;
}
.convo-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex-grow: 1;
	min-width: 0;
}
.convo-top {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
}
.convo-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
.convo.is-unread .convo-name,
.convo.is-unread .convo-subject {
	font-weight: var(--font-weight-semibold);
}
/* A customer's value and today's errors, beside the badge. */
.convo-value {
	flex-shrink: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.convo-errors {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	color: var(--color-danger);
}
.convo-time {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	margin-left: auto;
	flex-shrink: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.convo-assignee {
	display: inline-flex;
}
.convo-subject {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--font-size-sm);
}
.convo-snippet {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--font-size-xs);
	line-height: var(--leading-base);
	color: var(--color-muted);
	overflow-wrap: anywhere;
}
.convo-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* ---------- MailMessage ---------- */
.mail {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.mail.is-out {
	background: var(--mail-out-fill);
}
.mail.is-note {
	border-style: dashed;
	background: var(--mail-note-fill);
}
.mail-head {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-10) var(--space-14) var(--space-0);
}
.mail-who {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex-grow: 1;
	min-width: 0;
}
.mail-from {
	display: flex;
	align-items: baseline;
	gap: var(--space-6);
	min-width: 0;
}
.mail-name {
	flex-shrink: 0;
	font-weight: var(--font-weight-semibold);
}
.mail-addr,
.mail-to {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.mail-time {
	flex-shrink: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.mail-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-10) var(--space-14) var(--space-12)
		var(--mail-body-inset);
	font-size: var(--font-size-md);
	line-height: var(--leading-relaxed);
	overflow-wrap: anywhere;
}
.mail-body p {
	margin: var(--space-0);
	white-space: pre-line;
}
/* What a member wrote in Markdown (MailMarkdown), in the thread and a reply's Preview: lists and quotes. */
.mail-body ul,
.mail-body ol,
.reply-preview ul,
.reply-preview ol {
	margin: var(--space-0);
	padding-left: var(--md-list-indent);
}
.mail-body strong,
.reply-preview strong {
	font-weight: var(--font-weight-semibold);
}
.mail-quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin: var(--space-0);
	padding-left: var(--space-10);
	border-left: var(--md-quote-width) solid var(--color-border);
	color: var(--color-muted);
}
.mail-quoted {
	margin: var(--space-0);
	padding-left: var(--space-10);
	border-left: var(--border-width-strong) solid var(--color-border);
	color: var(--color-muted);
	white-space: pre-line;
}
.mail-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-0) var(--space-14) var(--space-10) var(--mail-body-inset);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* A reply's delivery: the reason wraps; a bounce or spam reads in the danger tone. */
.mail-delivery {
	white-space: normal;
	overflow-wrap: anywhere;
}
.mail-delivery.is-danger {
	color: var(--color-danger-ink);
}
/* Visits through a reply's links: one per line under its delivery and read. */
.mail-visits {
	display: flex;
	flex-basis: 100%;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}
.mail-visit {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
}
.mail-visit-page {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
/* The files an email carried: thumbnails, then chips. */
.mail-files {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-0) var(--space-14) var(--space-12) var(--mail-body-inset);
}
.mail-thumbs,
.mail-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}
.mail-thumb {
	display: block;
	overflow: hidden;
	width: var(--mail-thumb-size);
	height: var(--mail-thumb-size);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
}
.mail-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mail-thumb:hover,
.mail-thumb:focus-visible {
	border-color: var(--color-accent);
}
.mail-file {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	max-width: var(--mail-file-max);
	padding: var(--space-4) var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	color: var(--color-ink);
	font-size: var(--font-size-xs);
	text-decoration: none;
}
a.mail-file:hover,
a.mail-file:focus-visible {
	border-color: var(--color-accent);
}
.mail-file.is-skipped {
	color: var(--color-muted);
}
.mail-file-name {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-file-size {
	flex-shrink: 0;
	color: var(--color-muted);
}

@container (max-width: 639px) {
	.mail-body,
	.mail-foot,
	.mail-files {
		padding-left: var(--space-14);
	}
}

/* ---------- ThreadActivity ---------- */
.between {
	--activity-col-name: var(--between-col-name);
	--activity-col-time: var(--between-col-time);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-left: var(--space-24);
	padding: var(--space-2) var(--space-0) var(--space-2) var(--space-14);
	border-left: var(--border-width) dashed var(--color-border);
}
.between-head {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.between-head strong {
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
}
.between-head .link-action {
	margin-left: auto;
}
.between .activity {
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-4);
	border-bottom: none;
	font-size: var(--font-size-xs);
}
.between-more {
	padding-left: var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
@container (max-width: 639px) {
	.between {
		--activity-col-name: var(--between-col-name-phone);
		--activity-col-time: var(--between-col-time-phone);
		margin-left: var(--space-8);
		padding-left: var(--space-8);
	}
}

/* ---------- SavedReplyFields ---------- */
.placeholder-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.placeholder-chip {
	padding: var(--space-0) var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	color: var(--color-ink);
	cursor: pointer;
}
.placeholder-chip:hover {
	background: var(--color-hover);
}

/* Loading (InboxSkeleton): the panes' own shapes, standing still. */
.convo.is-skeleton:hover {
	background: transparent;
}
.inbox-skeleton-tools {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	height: var(--control-height-sm);
	padding-inline: var(--space-8);
}
.inbox-skeleton-thread {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}
.mail.is-skeleton .mail-body {
	gap: var(--space-6);
}
.kv-value > .skeleton.is-end {
	margin-left: auto;
}

/* ---------- MailFooter: an email's footer, as its reader sees it ---------- */
.mail-footer {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: var(--space-0);
	padding: var(--space-12) var(--space-14);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.mail-footer-body {
	color: var(--color-muted);
	line-height: var(--leading-relaxed);
}
.mail-footer-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-10);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
	color: var(--color-muted);
	overflow-wrap: anywhere;
}
.mail-footer-text:first-child {
	padding-top: var(--space-0);
	border-top: none;
}
.mail-footer-missing {
	padding: var(--space-0) var(--space-4);
	border: var(--border-width) dashed var(--color-warn);
	border-radius: var(--radius-sm);
	color: var(--color-warn-ink);
	/* A placeholder wraps as one piece, never half a box per line. */
	white-space: nowrap;
}
.mail-footer-end {
	display: flex;
	align-items: center;
}
.mail-footer-unsubscribe,
.mail-footer-link {
	text-decoration: underline;
}

/* A campaign's footer: centered under the email's card, as the email has it (CampaignFooter). */
.campaign-footer {
	gap: var(--space-16);
}
.campaign-footer-card {
	padding: var(--space-12) var(--space-14);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-muted);
	line-height: var(--leading-relaxed);
}
.campaign-footer-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
	font-size: var(--font-size-xs);
	line-height: var(--leading-prose);
	color: var(--color-muted);
	overflow-wrap: anywhere;
}
.campaign-footer-link {
	text-decoration: underline;
}
.mail-footer-end > .hint-trigger {
	margin-inline-start: var(--space-4);
}
/* Bare: no box and no hairline, just the lines under the text box they end. */
.mail-footer.is-bare {
	padding: var(--space-0);
	border: none;
	background: none;
}
.mail-footer.is-bare > .mail-footer-text {
	padding-top: var(--space-0);
	border-top: none;
}
/* Collapsible: one line, its parts cut off before Unsubscribe; the chevron shows it whole. */
.mail-footer-end > .icon-btn {
	margin-inline-start: auto;
}
.mail-footer.is-collapsible .mail-footer-end {
	gap: var(--space-4);
}
.mail-footer.is-collapsible .mail-footer-end > .hint-trigger {
	margin-inline-start: var(--space-0);
}
.mail-footer.is-collapsed > .mail-footer-text {
	flex-direction: row;
	align-items: center;
	gap: var(--space-8);
}
.mail-footer.is-collapsed .mail-footer-line {
	flex: 1 1 auto;
	min-width: var(--space-0);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-footer.is-collapsed .mail-footer-end {
	flex-shrink: 0;
}


/* ./components/sitechat.css */
/* ---------- ChatLine: a message in a chat on the app's site ---------- */
/* Each line spans the thread's measure; the bubble sits on its author's side. */
.chatline {
	display: flex;
	align-items: flex-end;
	gap: var(--space-8);
	width: 100%;
}
.chatline.is-out {
	flex-direction: row-reverse;
}
/* Following lines from the same author sit under the first, without the avatar. */
.chatline-avatar {
	flex-shrink: 0;
	width: var(--avatar-md);
}
.chatline-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	max-width: var(--chatline-measure);
}
.chatline.is-out .chatline-body {
	align-items: flex-end;
}
.chatline-who {
	display: flex;
	align-items: baseline;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.chatline-name {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}
.chatline-bubble {
	padding: var(--space-8) var(--space-12);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--chatline-radius);
	border-bottom-left-radius: var(--chatline-radius-tail);
	background: var(--chatline-in-fill);
	font-size: var(--font-size-md);
	line-height: var(--leading-relaxed);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.chatline.is-out .chatline-bubble {
	border-color: transparent;
	border-bottom-left-radius: var(--chatline-radius);
	border-bottom-right-radius: var(--chatline-radius-tail);
	background: var(--chatline-out-fill);
}
.chatline-foot {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* The row's mark before a chat's subject. */
.convo-chat {
	display: inline-flex;
	vertical-align: middle;
	margin-right: var(--space-4);
	color: var(--color-accent-ink);
}


/* ./components/campaigns.css */
/* ---------- EmailPreview: an email as its reader gets it ---------- */
.email-preview {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	overflow: hidden;
}
.email-preview.is-sticky {
	position: sticky;
	top: var(--email-preview-sticky-top);
}
.email-preview-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-10) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.email-preview-envelope {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.email-preview-from,
.email-preview-line {
	overflow: hidden;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.email-preview-subject {
	overflow: hidden;
	font-weight: var(--font-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.email-preview-modes {
	flex-shrink: 0;
	margin-inline-start: auto;
}
.email-preview-canvas {
	display: flex;
	justify-content: center;
	padding: var(--space-12);
	background: var(--color-app);
	transition: opacity var(--duration-base) var(--ease-out);
}
.email-preview.is-busy .email-preview-canvas {
	opacity: var(--email-preview-busy-opacity);
}
.email-preview-frame {
	display: block;
	width: 100%;
	min-height: var(--email-preview-min-height);
	border: none;
	border-radius: var(--radius-md);
	/* Emails draw their own background; one without paints on white, like a mail app. */
	background: var(--color-surface-2);
}
.email-preview-canvas.is-phone .email-preview-frame {
	width: min(100%, var(--email-phone-width));
}
/* Dark: the mail app's own dark page around the flipped email. */
.email-preview-canvas.is-dark {
	background: var(--email-preview-dark-page);
}
.email-preview-text {
	width: 100%;
	margin: var(--space-0);
	padding: var(--space-12) var(--space-14);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	line-height: var(--leading-relaxed);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
@container (max-width: 639px) {
	.email-preview-head {
		flex-wrap: wrap;
	}
	.email-preview-canvas {
		padding: var(--space-8);
	}
}

/* ---------- EmailComposer: an email being written, in one card ---------- */
.email-composer {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
}
.email-composer-row {
	display: grid;
	grid-template-columns: var(--email-composer-label-width) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--email-composer-row-height);
	padding: var(--space-4) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-sm);
}
.email-composer-row-label {
	color: var(--color-muted);
}
.email-composer-row-value {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.email-composer-row-value > * {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.email-composer-row-end {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
/* A row that keeps its label, value and end on one line in a narrow card
   (From, its account and how it goes, in a side sheet): the label as wide
   as its word, the value right after it, giving way (its words cut short)
   before the end does; the end drops under it only when even then they
   can't share the line. */
.email-composer-row.is-wrapping {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--space-4);
	padding-block: var(--space-4);
}
.email-composer-row.is-wrapping > .email-composer-row-label {
	flex: 0 0 auto;
}
.email-composer-row.is-wrapping > .email-composer-row-value {
	flex: 1 1 var(--email-composer-value-min);
}
.email-composer-row.is-wrapping > .email-composer-row-end {
	flex: 0 0 auto;
	margin-left: auto;
}
/* A hint beside the value keeps its size (the value's words give way first) and sits at the value's own gap. */
.email-composer-row-value > .hint-trigger {
	flex-shrink: 0;
	margin-inline-start: var(--space-0);
	overflow: visible;
}
/* It gives way first when the row is narrow. */
.email-composer-row-value > .email-composer-note {
	flex-shrink: 100;
}
.email-composer-note {
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.email-composer-input,
.email-composer-title {
	width: 100%;
	min-width: 0;
	padding: var(--space-0);
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	color: var(--color-ink);
}
.email-composer-input::placeholder,
.email-composer-title::placeholder {
	color: var(--color-muted);
}
.email-composer-row:focus-within .email-composer-row-label {
	color: var(--color-accent-ink);
}
.email-composer-input[aria-invalid='true']::placeholder {
	color: var(--color-danger-ink);
}
.email-composer-count {
	font-size: var(--font-size-xs);
	font-variant-numeric: tabular-nums;
	color: var(--color-muted);
}
.email-composer-count.is-over {
	color: var(--color-warn-ink);
}
/* The title over the text: the email's own heading. */
.email-composer-title {
	padding: var(--space-14) var(--space-16) var(--space-0);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-tight);
}
.email-composer .text-editor-composer .text-editor-content,
.email-composer .text-editor-composer .text-editor-source {
	padding-top: var(--space-10);
}
.email-composer .text-editor-note {
	border-top: var(--border-width) solid var(--color-border);
}
/* A smaller email (an outreach one, in a side sheet): a form's editor or a
   plain text box without a box of its own, the footer as a row, and the last
   row (From and Send) without a line under it. */
.email-composer > .text-editor-field {
	border: none;
	border-radius: var(--space-0);
	background: transparent;
	box-shadow: none;
}
.email-composer > .text-editor-field .text-editor-content,
.email-composer > .text-editor-field .text-editor-source,
.email-composer > .textarea-bare,
.email-composer > .textarea-box {
	padding: var(--space-8) var(--space-12);
}
.email-composer > .mail-footer.is-bare {
	padding: var(--space-6) var(--space-8) var(--space-6) var(--space-12);
}
.email-composer
	> :is(.text-editor-field, .textarea-bare, .textarea-box, .mail-footer):not(
		:last-child
	) {
	border-bottom: var(--border-width) solid var(--color-border);
}
.email-composer > .email-composer-row:last-child {
	border-bottom: none;
}
/* Inside a panel (a click map): the panel draws the box. */
.email-preview.is-flush {
	border: none;
	border-radius: 0;
}

/* ---------- LogoPicker: the small logo at an email's top ---------- */
.logo-picker {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-width: 0;
}
.logo-picker-tile {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--logo-picker-size);
	height: var(--logo-picker-size);
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	color: var(--color-muted);
}
.logo-picker-tile.is-empty {
	border: var(--border-width) dashed var(--color-border);
}
.logo-picker-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.logo-picker-note {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-size-sm);
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-muted);
}
.logo-picker-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-4);
}
/* Over an email's text: the tile at the email's own size, the line quieter. */
.logo-picker.is-compact {
	padding: var(--space-12) var(--space-16) var(--space-0);
}
.logo-picker.is-compact .logo-picker-tile {
	width: var(--logo-picker-size-sm);
	height: var(--logo-picker-size-sm);
}
.logo-picker.is-compact .logo-picker-note {
	font-size: var(--font-size-xs);
}

/* ---------- RuleBuilder: rules read as a sentence ---------- */
.rule-builder {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
}
/* The sentence's first line: "People who" and the rule that's always on. */
.rule-builder-lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--control-height);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted);
}
.rule-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.rule-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	min-width: 0;
}
.rule-join {
	display: inline-flex;
	flex: none;
	align-items: center;
	width: var(--rule-join-width);
	height: var(--control-height);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.rule-body {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-4);
	min-width: 0;
}
/* A rule's controls share its line: an operator (a `fit` Select) is as wide
   as what's picked, a number as wide as its digits, and values (inputs,
   comboboxes, a `full` Select) take the rest, shrinking to a floor before
   the last one wraps (under the field, never under "and"). */
.rule-body > .select {
	flex: none;
}
.rule-body > .select.input-w-fit select {
	field-sizing: content;
}
.rule-body > :is(.combobox, .input, .input-box, .select.input-w-full) {
	flex: 1 1 var(--rule-value-min);
	width: auto;
	min-width: var(--rule-value-min);
}
.rule-body > .select.input-w-full select {
	text-overflow: ellipsis;
}
.rule-body .combobox-input {
	min-width: var(--rule-combo-input-min);
	text-overflow: ellipsis;
}
/* Picked values need room for their chips: without it, the box moves under
   the field whole. Until it's typed in, a box with chips is just its chips:
   the text field takes no room and the chevron steps aside, so a lone
   chevron never wraps onto a line of its own. */
.rule-body > .combobox.is-multiple:has(.chip) {
	flex-basis: var(--rule-chips-min);
	min-width: var(--rule-chips-min);
}
.rule-body
	> .combobox.is-multiple:has(.chip):not(:focus-within)
	.combobox-input {
	min-width: var(--space-4);
}
.rule-body
	> .combobox.is-multiple:has(.chip):not(:focus-within)
	.combobox-icon {
	display: none;
}
.rule-body > .number-input {
	flex: none;
	width: auto;
}
.rule-body .number-field {
	flex-grow: 0;
	min-width: var(--rule-number-min);
	max-width: var(--rule-number-max);
	field-sizing: content;
}
.rule-field {
	display: inline-flex;
	align-items: center;
	height: var(--control-height);
	padding: var(--space-0) var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}
.rule-row.is-invalid .rule-field {
	border-color: var(--color-warn);
}
/* The rule that's always on: a token in the first line that can't be removed. */
.rule-locked {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	height: var(--control-height);
	padding: var(--space-0) var(--space-6);
	border-radius: var(--radius-sm);
	background: var(--color-hover);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
	white-space: nowrap;
}
.rule-locked .icon {
	color: var(--color-muted);
}
.rule-remove {
	flex: none;
	margin-inline-start: auto;
}
.rule-row.is-group {
	align-items: stretch;
}
.rule-group {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
	padding: var(--space-6);
	border: var(--border-width) dashed var(--color-border);
	border-radius: var(--radius-md);
}
.rule-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/* ---------- RuleSummary: an audience's rules as a sequence of tokens ---------- */
.rule-summary {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
	max-width: 100%;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	line-height: var(--leading-tight);
	color: var(--color-ink);
}
.rule-summary.is-empty {
	color: var(--color-muted);
}
/* "and [token]" wraps as one. */
.rule-summary-line {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-4);
	min-width: 0;
	max-width: 100%;
}
.rule-summary-join {
	flex: none;
	color: var(--color-muted);
}
.rule-summary.is-inline .rule-summary-join:empty {
	display: none;
}
.rule-token {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	max-width: 100%;
	height: var(--control-height-xs);
	padding: var(--space-0) var(--space-6);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-2);
	white-space: nowrap;
}
.rule-token-field {
	flex: none;
	font-weight: var(--font-weight-medium);
}
.rule-token-op {
	flex: none;
	color: var(--color-muted);
}
.rule-token-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Rules where one is enough: boxed like the builder's "Any of", joined by "or". */
.rule-summary-group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
	max-width: 100%;
	padding: var(--space-2);
	border: var(--border-width) dashed
		color-mix(in srgb, var(--color-muted) 55%, transparent);
	border-radius: var(--radius-md);
}
.rule-summary.is-inline .rule-summary-group .rule-summary-join:empty {
	display: none;
}
.rule-summary-more {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: var(--control-height-xs);
	padding: var(--space-0) var(--space-6);
	border: var(--border-width) dashed var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-muted);
	white-space: nowrap;
}
/* Stacked: a rule per line, the joining word in its own column. */
.rule-summary.is-stacked,
.rule-summary.is-stacked .rule-summary-group {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	justify-items: start;
	gap: var(--space-4) var(--space-6);
}
.rule-summary.is-stacked .rule-summary-line {
	display: contents;
}
/* Stacked has the room to say a rule in full: a long value wraps in its token. */
.rule-summary.is-stacked .rule-token {
	flex-wrap: wrap;
	row-gap: var(--space-0);
	height: auto;
	min-height: var(--control-height-xs);
	padding-block: var(--space-2);
	white-space: normal;
}
.rule-summary.is-stacked .rule-token-value {
	overflow: visible;
}
/* On a tooltip (light on ink): tokens and words in the tooltip's colors. */
.tooltip .rule-summary {
	color: inherit;
}
.tooltip .rule-token {
	border-color: transparent;
	background: color-mix(in srgb, var(--color-surface) 16%, transparent);
}
.tooltip :is(.rule-summary-join, .rule-token-op, .rule-summary-more) {
	color: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.tooltip :is(.rule-summary-group, .rule-summary-more) {
	border-color: color-mix(in srgb, var(--color-surface) 35%, transparent);
}


/* ./components/social.css */
/* social group components: NetworkMark. Tokens only. */

/* NetworkMark */
.network-mark {
	flex-shrink: 0;
	fill: currentColor;
}
.network-mark-xs {
	width: var(--icon-xs);
	height: var(--icon-xs);
}
.network-mark-sm {
	width: var(--icon-sm);
	height: var(--icon-sm);
}
.network-mark-md {
	width: var(--icon-md);
	height: var(--icon-md);
}
.network-mark-lg {
	width: var(--network-mark-lg);
	height: var(--network-mark-lg);
}
.network-mark-xl {
	width: var(--network-mark-xl);
	height: var(--network-mark-xl);
}
.network-x {
	fill: var(--network-x);
}
.network-bluesky {
	fill: var(--network-bluesky);
}
.network-mastodon {
	fill: var(--network-mastodon);
}
.network-linkedin {
	fill: var(--network-linkedin);
}
.network-reddit {
	fill: var(--network-reddit);
}


/* ./components/agents.css */
/* Agents: AgentAvatar, AgentList, RunDivider, AskCard, PermissionList, ScreenView. */

/* AgentAvatar */
.agent-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--agent-ink);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	user-select: none;
}
.agent-avatar-sm {
	width: var(--avatar-sm);
	height: var(--avatar-sm);
	border-radius: var(--agent-avatar-radius-sm);
	font-size: var(--agent-avatar-font-sm);
}
.agent-avatar-md {
	width: var(--avatar-md);
	height: var(--avatar-md);
	border-radius: var(--agent-avatar-radius-md);
	font-size: var(--font-size-2xs);
}
.agent-blue {
	background: var(--agent-blue);
}
.agent-violet {
	background: var(--agent-violet);
}
.agent-green {
	background: var(--agent-green);
}
.agent-amber {
	background: var(--agent-amber);
}
.agent-rose {
	background: var(--agent-rose);
}
.agent-teal {
	background: var(--agent-teal);
}
.agent-slate {
	background: var(--agent-slate);
}

/* AgentList: the rail */
.agent-list {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	padding: var(--space-6);
}
.agent-list-items {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.agent-item {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--agent-row-height);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	color: var(--color-ink);
	transition: background var(--duration-fast);
}
.agent-item:hover {
	background: var(--color-hover);
	color: var(--color-ink);
}
.agent-item.is-current {
	background: var(--color-accent-muted);
}
.agent-item-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}
.agent-item-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
.agent-item.is-current .agent-item-name {
	color: var(--color-accent-ink);
}
.agent-item-status {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-width: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.agent-item-status-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.agent-list-footer {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-4);
}
.agent-list-computer {
	margin-top: auto;
	padding-top: var(--space-6);
	border-top: var(--border-width) solid var(--color-border);
}
.agent-computer {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	height: var(--row-height-nav);
	padding: var(--space-0) var(--space-6);
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-ink);
	text-align: left;
}
.agent-computer.is-link:hover {
	background: var(--color-hover);
	color: var(--color-ink);
}
.agent-computer-icon {
	color: var(--color-muted);
}
.agent-computer-label {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
.agent-computer-state {
	display: inline-flex;
	align-items: center;
	gap: var(--space-5);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	white-space: nowrap;
}

/* RunDivider */
.run-divider {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.run-divider::before,
.run-divider::after {
	content: '';
	flex: 1 1 var(--space-12);
	height: var(--border-width);
	background: var(--color-border);
}
.run-divider-text {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
	max-width: 80%;
}
.run-divider-label {
	display: flex;
	min-width: 0;
}
.run-divider-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Keeps its leading space, so the text reads "<name> · <at>". */
.run-divider-at {
	flex-shrink: 0;
	white-space: pre;
}
.run-divider-text > .icon {
	flex-shrink: 0;
}

/* AskCard: ConfirmCard's chrome around what the agent wants to do */
.ask-card-head {
	gap: var(--space-8);
}
.ask-card-summary {
	margin: var(--space-0);
	max-height: var(--ask-card-summary-max-height);
	padding: var(--space-6) var(--space-8);
	overflow: auto;
	border-radius: var(--radius-md);
	background: var(--md-code-bg);
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	line-height: var(--leading-code);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.ask-card-summary.is-clamped {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ask-card-summary-lines);
}
.ask-card-pattern {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	overflow-wrap: anywhere;
}
.ask-card-pattern code {
	font-family: var(--font-mono);
	color: var(--color-ink);
}
.ask-card.is-denied .confirm-state,
.ask-card.is-expired .confirm-state {
	color: var(--color-muted);
}
.ask-card .confirm-state:focus {
	outline: none;
}

/* PermissionList */
.perm-list {
	display: flex;
	flex-direction: column;
}
.perm-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-8) var(--space-0);
}
.perm-group + .perm-group {
	border-top: var(--border-width) solid var(--color-border);
}
.perm-group-title {
	padding-bottom: var(--space-2);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-muted);
}
.perm-rows {
	display: flex;
	flex-direction: column;
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.perm-row {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--row-height-nav);
}
.perm-what {
	display: flex;
	align-items: baseline;
	gap: var(--space-6);
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.perm-label,
.perm-pattern {
	overflow: hidden;
	text-overflow: ellipsis;
}
.perm-label {
	flex-shrink: 0;
	max-width: 100%;
}
.perm-pattern {
	min-width: 0;
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
}
.perm-label + .perm-pattern {
	color: var(--color-muted);
}
.perm-remove {
	opacity: var(--opacity-hidden);
}
.perm-row:hover .perm-remove,
.perm-row:focus-within .perm-remove {
	opacity: var(--opacity-visible);
}
@media (hover: none) {
	.perm-remove {
		opacity: var(--opacity-visible);
	}
}
.perm-seg {
	height: var(--perm-seg-height);
}
.perm-seg .seg-item {
	padding: var(--space-0) var(--space-6);
	font-size: var(--font-size-2xs);
}
.perm-row.is-allow .perm-seg .seg-item.is-on {
	background: var(--perm-allow-bg);
	color: var(--color-live-ink);
}
.perm-row.is-never .perm-seg .seg-item.is-on {
	background: var(--perm-never-bg);
	color: var(--color-danger-ink);
}
.perm-row.is-ask .perm-seg .seg-item.is-on {
	background: var(--color-hover);
	color: var(--color-ink);
}
/* Read-only: the other two fade, the rule in force stays legible. */
.perm-seg .seg-item.is-on[aria-disabled='true'] {
	opacity: var(--opacity-visible);
	cursor: default;
}

/* ScreenView: the computer's screen */
.screen {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.screen-stage {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
}
.screen-box {
	position: relative;
	width: 100%;
	aspect-ratio: var(--screen-aspect);
	overflow: hidden;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--screen-bg);
	color: var(--screen-ink);
}
.screen.is-control .screen-box {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 var(--border-width) var(--color-accent);
}
.screen-frame {
	position: absolute;
	inset: var(--space-0);
	width: 100%;
	height: 100%;
	border: none;
	background: var(--screen-bg);
}
.screen-frame:focus-visible {
	outline: none;
}
/* The desktop is (re)connecting: our spinner over it, under the pill and buttons. */
.screen-connecting {
	position: absolute;
	inset: var(--space-0);
	z-index: var(--z-raised);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--screen-bg);
	color: var(--screen-muted);
}
/* View-only: over the desktop, under the pill and buttons. */
.screen-shield {
	position: absolute;
	inset: var(--space-0);
	z-index: var(--z-raised);
}
/*
 * Live in the panel: a click anywhere expands; hovering dims the screen under
 * Expand and Take over (always shown where nothing hovers, e.g. phones).
 */
.screen-shield.is-expandable {
	padding: var(--space-0);
	border: none;
	background: transparent;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-out);
}
.screen-box:hover .screen-shield.is-expandable,
.screen-box:focus-within .screen-shield.is-expandable {
	background: var(--screen-hover-veil);
}
.screen-actions {
	position: absolute;
	inset: var(--space-0);
	z-index: var(--z-raised);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	opacity: var(--opacity-hidden);
	pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-out);
}
.screen-actions > * {
	pointer-events: auto;
}
.screen-box:hover .screen-actions,
.screen-actions:focus-within {
	opacity: var(--opacity-visible);
}
@media (hover: none) {
	.screen-actions {
		opacity: var(--opacity-visible);
	}
}
.screen-chip-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	height: var(--control-height);
	padding: var(--space-0) var(--space-12);
	border: var(--border-width) solid var(--screen-chip-border);
	border-radius: var(--radius-full);
	background: var(--screen-chip-bg);
	color: var(--screen-ink);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}
.screen-chip-button:hover {
	background: var(--screen-chip-hover);
}
.screen-pill {
	position: absolute;
	top: var(--space-8);
	left: var(--space-8);
	z-index: var(--z-raised);
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	max-width: calc(100% - var(--space-48));
	height: var(--badge-height);
	padding: var(--space-0) var(--space-8);
	border: var(--border-width) solid var(--screen-chip-border);
	border-radius: var(--radius-full);
	background: var(--screen-chip-bg);
	color: var(--screen-ink);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}
.screen-pill-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.screen-corner {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	z-index: var(--z-raised);
}
.screen-corner .icon-btn {
	border: var(--border-width) solid var(--screen-chip-border);
	background: var(--screen-chip-bg);
	color: var(--screen-ink);
}
.screen-corner .icon-btn:hover {
	background: var(--screen-chip-hover);
	color: var(--screen-ink);
}
.screen-take {
	position: absolute;
	right: var(--space-8);
	bottom: var(--space-8);
	z-index: var(--z-raised);
}
/* Asleep: the last frame, dimmed, under the words. */
.screen-still {
	position: absolute;
	inset: var(--space-0);
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--screen-still-opacity);
	filter: grayscale(1) blur(var(--screen-still-blur));
}
.screen-wake {
	position: absolute;
	inset: var(--space-0);
	display: flex;
	padding: var(--space-0);
	border: none;
	background: transparent;
	color: var(--screen-ink);
}
.screen-wake:hover .screen-veil-line {
	color: var(--screen-ink);
	text-decoration: underline;
}
.screen-wake:focus-visible {
	outline-offset: calc(var(--focus-width) * -2);
}
.screen-veil {
	position: absolute;
	inset: var(--space-0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	padding: var(--space-16);
	color: var(--screen-ink);
	text-align: center;
}
.screen-veil-icon {
	color: var(--screen-muted);
}
.screen-veil-title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
}
.screen-veil-line {
	max-width: var(--hint-max-width);
	font-size: var(--font-size-xs);
	color: var(--screen-muted);
}
.screen-veil-button {
	height: var(--control-height);
	margin-top: var(--space-4);
	padding: var(--space-0) var(--space-12);
	border: none;
	border-radius: var(--radius-full);
	background: var(--screen-ink);
	color: var(--screen-bg);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}
.screen-veil-button:hover {
	background: var(--screen-muted);
}
.screen-progress {
	position: relative;
	width: var(--screen-progress-width);
	max-width: 70%;
	height: var(--screen-progress-height);
	margin: var(--space-4) var(--space-0);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--screen-progress-track);
}
.screen-progress-bar {
	position: absolute;
	top: var(--space-0);
	bottom: var(--space-0);
	left: var(--space-0);
	width: var(--screen-progress-bar);
	border-radius: var(--radius-full);
	background: var(--screen-ink);
	animation: screen-progress var(--screen-progress-duration) var(--ease-out)
		infinite;
}
@keyframes screen-progress {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(300%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.screen-progress-bar {
		left: 33%;
	}
}
/* Control: a bar under the screen, the desktop free of overlays. */
.screen-bar {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--row-height);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	color: var(--color-ink);
	font-size: var(--font-size-sm);
}
.screen-bar-icon {
	flex-shrink: 0;
	color: var(--color-accent-ink);
}
.screen-bar-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-8);
	flex-grow: 1;
	min-width: 0;
}
.screen-bar-text strong {
	font-weight: var(--font-weight-semibold);
}
.screen-bar-muted {
	color: var(--color-muted);
}
.screen-caption {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
/* Under the screen: its line, and Sleep now while it's up. */
.screen-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	min-height: var(--space-24);
}
/* Expanded: the window, the screen at the largest 16:9 that fits. */
.screen.is-expanded {
	position: fixed;
	inset: var(--space-0);
	z-index: var(--z-screen-expanded);
	padding: var(--screen-expanded-gap);
	background: var(--screen-expanded-bg);
}
.screen.is-expanded .screen-stage {
	flex-grow: 1;
	min-height: 0;
	gap: var(--screen-expanded-gap);
}
.screen.is-expanded .screen-fit {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	min-height: 0;
	container-type: size;
}
.screen.is-expanded .screen-box {
	width: var(--screen-expanded-width);
	border-color: transparent;
}
.screen.is-expanded .screen-caption {
	color: var(--screen-muted);
}
.screen.is-expanded .screen-bar {
	border: var(--border-width) solid var(--color-accent);
	background: var(--color-surface-2);
}

/* AgentThreadLayout: the log scrolls, the composer stays at the bottom */
.agent-thread {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	background: var(--color-app);
}
.agent-thread-log {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}
.agent-thread-log > .chat-log {
	flex-grow: 1;
}
/* An empty thread: its empty state in the middle of the space. */
.agent-thread-log .chat-log-content:has(> .empty-state:only-child) {
	min-height: 100%;
	justify-content: center;
}
/* Tasks to start from, under an empty thread's line. */
.agent-thread-starters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
}
/* A readable measure on wide screens, centered like the composer below it. */
.agent-thread-log .chat-log-content {
	width: 100%;
	max-width: var(--agent-thread-max);
	margin-inline: auto;
}
/*
 * The log, the notice and the composer keep the same room for a scrollbar,
 * so the thread's text lines up with the message box where scrollbars always
 * show (the log centers its text beside its own).
 */
.agent-thread-log .chat-log-scroll {
	scrollbar-gutter: stable;
}
.agent-thread-notice,
.agent-thread-composer {
	flex-shrink: 0;
	overflow: hidden;
	scrollbar-gutter: stable;
}
.agent-thread-notice-body {
	max-width: var(--agent-thread-max);
	margin-inline: auto;
	padding: var(--space-0) var(--space-14) var(--space-8);
}
.agent-thread-composer {
	border-top: var(--border-width) solid var(--color-border);
}
.agent-thread-composer > .composer {
	max-width: var(--agent-thread-max);
	margin-inline: auto;
	border-top: none;
}

/* Under the thread: what waits behind the agent's current run. */
.agent-thread-waiting {
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	text-align: center;
}

/* AgentPanel: tabs on top, the body scrolls */
.agent-panel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.agent-panel-tabs {
	flex-shrink: 0;
	padding: var(--space-0) var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.agent-panel-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-12);
	min-height: 0;
	padding: var(--space-12);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* The app's numbers under the computer, two to a row: an odd one out takes the row. */
/* A third number takes the whole row. */
.agent-activity-stats > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
/*
 * One run's messages in the thread, spaced like the log (.chat-log-content).
 * Scrolled to from the panel's latest runs, clear of the top edge, then
 * highlighted like a settings group (src/ui/flash.ts).
 */
.agent-run {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	scroll-margin-top: var(--space-16);
}
.agent-run[data-flash] {
	position: relative;
}
.agent-run[data-flash]::after {
	content: '';
	position: absolute;
	inset: calc(var(--space-6) * -1);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
	pointer-events: none;
	opacity: var(--opacity-hidden);
	animation: landed-flash var(--duration-flash) ease-in-out forwards;
}
@media (prefers-reduced-motion: reduce) {
	.agent-run[data-flash]::after {
		animation-timing-function: step-end;
	}
}

/* WeekdayPicker: ToggleGroup's look, seven square letters */
.weekday-picker {
	width: fit-content;
}
.weekday-picker .weekday {
	width: calc(var(--control-height) - var(--space-6));
	padding: var(--space-0);
}

/* TimeList: chips, then Add time or the time field */
.time-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}
.time-list-input {
	width: auto;
	height: var(--control-height-sm);
	font-variant-numeric: tabular-nums;
}

/* FileList: a breadcrumb, then one hairline row per entry */
.file-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
}
/* The breadcrumb, then New folder and Upload at the end of the line. */
.file-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	min-width: 0;
}
.file-head-actions {
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--space-2);
}
/* The columns to sort by, over the rows' name, size and time. */
.file-sort {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr) var(--file-size-width) var(--file-time-width)
		var(--icon-button-size);
	gap: var(--space-8);
	padding: var(--space-0) var(--space-0) var(--space-0) var(--space-4);
	border-bottom: var(--border-width) solid var(--color-border);
}
.file-sort-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-0);
	border: none;
	background: transparent;
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	white-space: nowrap;
}
.file-sort-button:hover,
.file-sort-button.is-current {
	color: var(--color-ink);
}
.file-sort-size,
.file-sort-time {
	justify-content: flex-end;
}
/* Files dragged over the list: where they'll land. */
.file-drop {
	position: absolute;
	inset: var(--space-0);
	z-index: var(--z-raised);
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--border-width-strong) dashed var(--color-accent);
	border-radius: var(--radius-md);
	background: var(--color-accent-muted);
	color: var(--color-accent-ink);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	pointer-events: none;
}
.file-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.file-crumb {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.file-crumb-sep {
	padding: var(--space-0) var(--space-4);
}
.file-crumb-button {
	max-width: var(--file-crumb-max);
	padding: var(--space-2) var(--space-2);
	overflow: hidden;
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.file-crumb-button:hover {
	color: var(--color-ink);
	text-decoration: underline;
}
.file-crumb-button.is-current {
	color: var(--color-ink);
	font-weight: var(--font-weight-medium);
}
.file-rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-0);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}
.file-rows > li + li {
	border-top: var(--border-width) solid var(--color-border);
}
/* A row, then its ⋯ (shown on hover, focus or while its menu is open). */
.file-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--icon-button-size);
	align-items: center;
}
.file-item:hover,
.file-item.is-menu-open {
	background: var(--color-hover);
}
.file-row-more {
	opacity: var(--opacity-hidden);
}
.file-item:hover .file-row-more,
.file-item:focus-within .file-row-more,
.file-item.is-menu-open .file-row-more {
	opacity: var(--opacity-visible);
}
@media (hover: none) {
	.file-row-more {
		opacity: var(--opacity-visible);
	}
}
div.file-rows {
	gap: var(--space-10);
	padding: var(--space-8) var(--space-0);
}
.file-row {
	display: grid;
	grid-template-columns:
		auto minmax(0, 1fr) var(--file-size-width)
		var(--file-time-width);
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	min-height: var(--row-height-nav);
	padding: var(--space-0) var(--space-0) var(--space-0) var(--space-4);
	border: none;
	background: transparent;
	color: var(--color-ink);
	text-align: left;
}
/* A name being typed: the field takes the name, size and time columns. */
.file-row.is-editing {
	grid-template-columns: auto minmax(0, 1fr);
}
.file-name-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	padding: var(--space-2) var(--space-0);
}
.file-name-input {
	width: 100%;
	min-width: 0;
	padding: var(--space-2) var(--space-4);
	border: var(--border-width) solid var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-ink);
	font: inherit;
}
.file-name-input[aria-invalid='true'] {
	border-color: var(--color-danger);
}
.file-name-problem {
	font-size: var(--font-size-xs);
	color: var(--color-danger);
}
/* Where a context menu opens: a point, nothing to see. */
.context-menu-anchor {
	position: fixed;
	width: var(--space-0);
	height: var(--space-0);
	pointer-events: none;
}
.file-row-icon {
	color: var(--color-muted);
}
.file-row-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.file-row-size,
.file-row-time {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-align: right;
	white-space: nowrap;
}
/* An empty folder: its mark and Upload, in the list's own space. */
.file-empty-state {
	min-height: var(--space-0);
	padding: var(--space-20) var(--space-8);
}
.file-empty {
	padding: var(--space-12) var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}

/* FileView: back, the name, then the text */
.file-view {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}
.file-view-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
	margin-left: calc(var(--icon-button-inset) * -1);
}
.file-view-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}
.file-view-note {
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.file-view-switch {
	flex: none;
}
/* Code in a narrow panel: lines wrap, tabs take two columns. */
.file-view-code .code {
	border-radius: var(--radius-md);
	tab-size: 2;
	overflow-wrap: anywhere;
}
/* A Markdown file's front matter (a skill's name and description): key, then value. */
.file-view-meta {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-0);
	padding: var(--space-8) var(--space-10);
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	font-size: var(--font-size-xs);
}
.file-view-meta-row {
	display: grid;
	grid-template-columns: minmax(var(--space-0), max-content) 1fr;
	gap: var(--space-10);
	min-width: 0;
}
.file-view-meta dt {
	color: var(--color-muted);
	font-family: var(--font-mono);
}
.file-view-meta dd {
	margin: var(--space-0);
	min-width: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* MailAskCard: an email an agent wants to send, as the email itself */
.mail-card-head {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.mail-card-kind {
	font-weight: var(--font-weight-medium);
	color: var(--color-ink);
}
.mail-card-meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail-card-subject {
	margin: var(--space-0);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-ink);
}
/* The subject and the envelope's rows sit on the card's own padding, not a second one. */
.mail-card .email-composer-title {
	padding: var(--space-0);
	font-size: var(--font-size-md);
}
.mail-card-rows .email-composer-row {
	padding-inline: var(--space-0);
}
/* From reads like the other rows' values: the picker only adds its chevron. */
.mail-card-rows .picker-ghost {
	padding-inline: var(--space-0);
	font-size: inherit;
	color: var(--color-ink);
}
.mail-card-reply-to {
	white-space: normal;
}
.mail-card-text {
	width: 100%;
	min-width: 0;
	margin: var(--space-0);
	padding: var(--space-0);
	border: none;
	outline: none;
	background: transparent;
	color: var(--color-ink);
	font: inherit;
	font-size: var(--font-size-sm);
	line-height: var(--leading-prose);
	white-space: pre-wrap;
	resize: vertical;
	/* Grows with what's written where browsers can; elsewhere its rows. */
	field-sizing: content;
}
.mail-card-footer {
	margin: var(--space-0);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
}
.mail-card-problem {
	margin: var(--space-0);
	font-size: var(--font-size-xs);
	color: var(--color-danger-ink);
}
.mail-card-foot {
	justify-content: space-between;
}




/* ./tokens.css */
/* App-only raw values: a few page sizes. */
:root {
	--app-skeleton-num: 48px;
}


/* ./site/tokens.css */
/* Raw values for the public site (site.css): the landing page, Terms and Privacy. */
:root {
	--site-bg: var(--color-surface-2);
	/* The text column every section sits in. */
	--site-column: 760px;
	/* The product screenshot: wider than the column. */
	--site-width: 1120px;
	--site-text-width: 600px;
	--site-gutter: 24px;
	--site-gutter-phone: 16px;
	--site-section-gap: 96px;
	--site-section-gap-phone: 64px;
	/* A showcase's heading to its screenshot. */
	--site-showcase-gap: 32px;
	--site-showcase-gap-phone: 24px;
	--site-hero-pad: 80px;
	--site-hero-pad-phone: 40px;
	--site-hero-size: 44px;
	--site-hero-size-phone: 32px;
	--site-hero-line: 1.08;
	--site-hero-tracking: -0.03em;
	--site-heading-size: 28px;
	--site-heading-size-phone: 24px;
	--site-lede-size: 17px;
	--site-lede-size-phone: 15px;
	--site-eyebrow-tracking: 0.08em;
	--site-action-width: 300px;
	--site-button-height: 32px;
	--site-radius: 10px;
	--site-feature-pad: 24px;
	--site-feature-icon: 32px;
	--site-cta-pad: 56px;
	--site-cta-pad-phone: 36px;
	/* /waitlist: the brand tile the Loop draws itself on, and the confetti layer. */
	--site-waitlist-tile: 72px;
	--site-waitlist-tile-radius: 16px;
	--site-waitlist-tile-shadow: 0 12px 32px rgba(20, 115, 230, 0.28);
	--site-waitlist-mark: 44px;
	--site-waitlist-stroke: 3.5px;
	--site-waitlist-pop: 360ms;
	--site-waitlist-pop-from: 0.6;
	--site-waitlist-draw: 900ms;
	--site-confetti-z: var(--z-toast);
	--site-frame-bar: 36px;
	--site-frame-dot: 10px;
	--site-frame-address-width: 240px;
	/* Share of the view the bottom fade covers. */
	--site-frame-fade: 24%;
	--site-frame-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 64px -24px rgba(0, 0, 0, 0.18);
	--site-frame-dot-color: rgba(0, 0, 0, 0.14);
	/* Long-form reading (Terms, Privacy). */
	--site-prose-size: 15px;
	--site-prose-line: 1.7;
	--site-prose-heading-size: 19px;
	--site-prose-subheading-size: 15px;
	--site-legal-title-size: 36px;
	--site-legal-title-size-phone: 30px;
	--site-legal-pad: 64px;
	--site-legal-pad-phone: 32px;
	--site-prose-list-indent: 20px;
	--site-prose-code-size: 13px;
}

[data-theme='dark'] {
	--site-bg: var(--color-app);
	--site-frame-shadow:
		0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 64px -24px rgba(0, 0, 0, 0.7);
	--site-frame-dot-color: rgba(255, 255, 255, 0.16);
}


/* ./app.css */
/* ---------- A page loading while signed out (RouteLoading): just the background ---------- */
.route-loading {
	min-height: 100dvh;
	background: var(--color-app);
}

/* ---------- Signed-in screens ---------- */
.portfolio-metric {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-6);
}
.portfolio-live {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}
.auth-pending {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	margin: 0;
	color: var(--color-muted);
}
.goal-editor,
.goal-preview {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Settings: the invite form's email, role and button on one line */
.invite-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
}
/* Settings: profile */
.profile-name {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}


/* ./site/site.css */
/* The public site (site/Site.tsx, site/Legal.tsx): page, header, hero, sections, feature grid, browser frame, CTA band, footer, long-form legal text. */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	container-type: inline-size;
	background: var(--site-bg);
	color: var(--color-ink);
}
/* Header and footer rows: the text column. */
.site-inner {
	width: 100%;
	max-width: calc(var(--site-column) + var(--site-gutter) * 2);
	margin: var(--space-0) auto;
	padding-inline: var(--site-gutter);
}

/* Header */
.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	padding-block: var(--space-16);
}
.site-brand {
	display: inline-flex;
	color: var(--color-ink);
}
.site-header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}
.site-header-actions .btn {
	height: var(--site-button-height);
	padding-inline: var(--space-12);
	font-size: var(--font-size-md);
}

/* Sections: every child sits in the text column; SiteWide spans the page width. */
.site-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--site-section-gap);
	width: 100%;
	max-width: calc(var(--site-width) + var(--site-gutter) * 2);
	margin-inline: auto;
	padding: var(--space-0) var(--site-gutter) var(--site-section-gap);
}
.site-main > * {
	width: 100%;
	max-width: var(--site-column);
	margin-inline: auto;
}
.site-main > .site-wide,
.site-main > .site-showcase {
	max-width: none;
}
.site-eyebrow {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--site-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--color-accent-ink);
}
.site-lede {
	margin: var(--space-0);
	max-width: var(--site-text-width);
	font-size: var(--site-lede-size);
	line-height: var(--leading-relaxed);
	color: var(--color-muted);
	text-wrap: pretty;
}
.site-actions {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: var(--site-action-width);
}
.site-note {
	margin: var(--space-0);
	max-width: var(--site-text-width);
	font-size: var(--font-size-sm);
	line-height: var(--leading-prose);
	color: var(--color-muted);
	text-wrap: pretty;
}
/* Links in running text are underlined: color alone doesn't mark them. */
.site-note a,
.legal a {
	color: var(--color-accent-ink);
	text-decoration: underline;
	text-underline-offset: var(--link-underline-offset);
}

/* Hero */
.site-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	padding-top: var(--site-hero-pad);
	text-align: center;
}
.site-hero h1 {
	margin: var(--space-0);
	font-size: var(--site-hero-size);
	font-weight: var(--font-weight-semibold);
	line-height: var(--site-hero-line);
	letter-spacing: var(--site-hero-tracking);
	text-wrap: balance;
}
.site-hero .site-actions {
	margin-top: var(--space-8);
}

.site-section {
	display: grid;
	gap: var(--space-24);
}
.site-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}
.site-section-head h2,
.cta-band h2 {
	margin: var(--space-0);
	font-size: var(--site-heading-size);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}
.site-section-body {
	min-width: var(--space-0);
}

/* Showcase: a feature's heading centered in the column, its screenshot page-wide under it. */
.site-showcase {
	display: grid;
	gap: var(--site-showcase-gap);
}
.site-showcase > .site-section-head {
	align-items: center;
	width: 100%;
	max-width: var(--site-column);
	margin-inline: auto;
	text-align: center;
}

/* Feature grid: equal cells, hairlines between them */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
	gap: var(--border-width);
	margin-block: var(--space-0);
	padding: var(--space-0);
	overflow: hidden;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--site-radius);
	background: var(--color-border);
	list-style: none;
}
.feature-cell {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--site-feature-pad);
	background: var(--site-bg);
}
.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--site-feature-icon);
	height: var(--site-feature-icon);
	margin-bottom: var(--space-8);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-accent-ink);
}
.feature-title {
	margin: var(--space-0);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-tight);
}
.feature-cell p {
	margin: var(--space-0);
	font-size: var(--font-size-md);
	line-height: var(--leading-relaxed);
	color: var(--color-muted);
}

/* Browser frame */
.browser-frame {
	margin: var(--space-0);
	overflow: hidden;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--site-radius);
	background: var(--color-surface);
	box-shadow: var(--site-frame-shadow);
}
.browser-frame-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--site-frame-bar);
	padding-inline: var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}
.browser-frame-dots {
	display: inline-flex;
	gap: var(--space-6);
}
.browser-frame-dots span {
	width: var(--site-frame-dot);
	height: var(--site-frame-dot);
	border-radius: var(--radius-full);
	background: var(--site-frame-dot-color);
}
.browser-frame-address {
	width: var(--site-frame-address-width);
	max-width: 100%;
	padding: var(--space-2) var(--space-12);
	overflow: hidden;
	border-radius: var(--radius-full);
	background: var(--color-app);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.browser-frame-view {
	position: relative;
	background: var(--color-app);
}
/* A screenshot cropped mid-page fades into the window instead of ending on a cut. */
.browser-frame-fade .browser-frame-view::after {
	content: '';
	position: absolute;
	inset: auto var(--space-0) var(--space-0);
	height: var(--site-frame-fade);
	background: linear-gradient(to bottom, transparent, var(--color-app));
	pointer-events: none;
}
.browser-frame figcaption {
	padding: var(--space-8) var(--space-12);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}

/* Themed image: the light or the dark version, never both */
.themed-image {
	display: block;
	width: 100%;
	height: auto;
}
.themed-image-dark,
[data-theme='dark'] .themed-image-light {
	display: none;
}
[data-theme='dark'] .themed-image-dark {
	display: block;
}

/* CTA band */
.cta-band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	padding: var(--site-cta-pad) var(--site-gutter);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--site-radius);
	background: var(--color-surface);
	text-align: center;
}
.cta-band .site-actions {
	margin-top: var(--space-8);
}

/* Footer */
.site-footer {
	border-top: var(--border-width) solid var(--color-border);
}
.site-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	padding-block: var(--space-24);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}
.site-footer-end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
}
.site-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}
.site-footer-social {
	display: inline-flex;
}
.site-footer-social svg {
	width: var(--icon-sm);
	height: var(--icon-sm);
}
.site-footer-inner a {
	color: var(--color-muted);
}
.site-footer-inner a:hover {
	color: var(--color-ink);
}

/* Legal pages: a title, the date, numbered sections of plain prose. */
.legal {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	padding-top: var(--site-legal-pad);
	font-size: var(--site-prose-size);
	line-height: var(--site-prose-line);
}
.legal-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-bottom: var(--space-32);
	border-bottom: var(--border-width) solid var(--color-border);
}
.legal-head h1 {
	margin: var(--space-0);
	font-size: var(--site-legal-title-size);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--site-hero-tracking);
}
.legal-updated {
	margin: var(--space-0);
	font-size: var(--font-size-md);
	color: var(--color-muted);
}
.legal-intro {
	margin: var(--space-0);
	color: var(--color-muted);
	text-wrap: pretty;
}
.legal-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}
.legal-section h2 {
	margin: var(--space-0);
	font-size: var(--site-prose-heading-size);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}
.legal-section h3 {
	margin: var(--space-8) var(--space-0) var(--space-0);
	font-size: var(--site-prose-subheading-size);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-tight);
}
.legal-section p,
.legal-section ul {
	margin: var(--space-0);
	text-wrap: pretty;
}
.legal-section ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding-left: var(--site-prose-list-indent);
}
.legal-section strong {
	font-weight: var(--font-weight-semibold);
}
.legal-section code {
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-family: var(--font-mono);
	font-size: var(--site-prose-code-size);
}

@container (max-width: 639px) {
	.site-inner,
	.site-main {
		padding-inline: var(--site-gutter-phone);
	}
	.site-main {
		gap: var(--site-section-gap-phone);
		padding-bottom: var(--site-section-gap-phone);
	}
	.site-hero {
		padding-top: var(--site-hero-pad-phone);
	}
	.site-showcase {
		gap: var(--site-showcase-gap-phone);
	}
	.site-hero h1 {
		font-size: var(--site-hero-size-phone);
	}
	.site-section-head h2,
	.cta-band h2 {
		font-size: var(--site-heading-size-phone);
	}
	.site-lede {
		font-size: var(--site-lede-size-phone);
	}
	.site-header-actions {
		gap: var(--space-4);
	}
	.site-header-actions .btn {
		padding-inline: var(--space-8);
	}
	.feature-grid {
		grid-template-columns: minmax(var(--space-0), 1fr);
	}
	.cta-band {
		padding: var(--site-cta-pad-phone) var(--site-gutter-phone);
	}
	.browser-frame-address {
		width: auto;
	}
	.legal {
		padding-top: var(--site-legal-pad-phone);
	}
	.legal-head h1 {
		font-size: var(--site-legal-title-size-phone);
	}
}

/* /waitlist: the mark draws itself on a brand tile, confetti over everything. */
.waitlisted {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	padding-block: var(--site-hero-pad);
	text-align: center;
}
.waitlisted h1 {
	margin: var(--space-0);
	font-size: var(--site-hero-size);
	font-weight: var(--font-weight-semibold);
	line-height: var(--site-hero-line);
	letter-spacing: var(--site-hero-tracking);
	text-wrap: balance;
}
.waitlisted .site-lede {
	max-width: var(--site-text-width);
	margin: var(--space-0);
}
.waitlisted-confetti {
	position: fixed;
	inset: var(--space-0);
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: var(--site-confetti-z);
}
.waitlisted-tile {
	display: grid;
	place-items: center;
	width: var(--site-waitlist-tile);
	height: var(--site-waitlist-tile);
	margin-bottom: var(--space-8);
	border-radius: var(--site-waitlist-tile-radius);
	background: var(--color-brand-tile);
	color: var(--color-on-brand-tile);
	box-shadow: var(--site-waitlist-tile-shadow);
}
.waitlisted-mark {
	width: var(--site-waitlist-mark);
	height: var(--site-waitlist-mark);
}
.waitlisted-mark path {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--site-waitlist-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
	.waitlisted-tile {
		animation: waitlisted-pop var(--site-waitlist-pop) var(--ease-out) both;
	}
	.waitlisted-mark path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: waitlisted-draw var(--site-waitlist-draw) var(--ease-out)
			var(--site-waitlist-pop) forwards;
	}
}
@keyframes waitlisted-pop {
	from {
		opacity: var(--opacity-hidden);
		transform: scale(var(--site-waitlist-pop-from));
	}
}
@keyframes waitlisted-draw {
	to {
		stroke-dashoffset: 0;
	}
}
.waitlisted-next {
	width: 100%;
	max-width: var(--site-text-width);
	margin-block: var(--space-16);
	padding: var(--site-feature-pad);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--site-radius);
	text-align: left;
}
.waitlisted-next h2 {
	margin: var(--space-0) var(--space-0) var(--space-8);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}
.waitlisted-next a {
	color: var(--color-accent-ink);
	text-decoration: underline;
	text-underline-offset: var(--link-underline-offset);
}
.waitlisted-next ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin: var(--space-0);
	padding-left: var(--space-16);
	color: var(--color-muted);
}
@container (max-width: 639px) {
	.waitlisted {
		padding-block: var(--site-hero-pad-phone);
	}
	.waitlisted h1 {
		font-size: var(--site-hero-size-phone);
	}
}