/* ../../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: settings-group-flash var(--duration-flash) ease-in-out forwards;
}
@keyframes settings-group-flash {
	from,
	35% {
		opacity: var(--opacity-full);
	}
	to {
		opacity: var(--opacity-hidden);
	}
}
@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);
}
.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;
}
@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);
}
/* 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;
}
.agent-thread-notice {
	flex-shrink: 0;
	width: 100%;
	max-width: var(--agent-thread-max);
	margin-inline: auto;
	padding: var(--space-0) var(--space-14) var(--space-8);
}
.agent-thread-composer {
	flex-shrink: 0;
	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;
}

/* 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;
}

/* 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 {
	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-text {
	margin: var(--space-0);
	padding: var(--space-8) var(--space-10);
	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;
}

/* 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);
	}
}