/* 00-tokens.css — owner: core toolkit (palette, type, spacing, geometry).
 * Source of truth: meta/plans/assets/2026-09-10-ui-redesign-css-toolkit/
 * kroemo-ui-implementation-handoff.md, sections 3 and 8.
 * Every canonical token carries the --k- prefix so it cannot collide with the
 * nine independent legacy token systems the census found. */

:root {
	/* palette (handoff §8) */
	--k-text: #17212b;
	--k-text-muted: #596675;
	--k-surface: #ffffff;
	--k-canvas: #f6f8f9;
	--k-border: #dce3e7;
	--k-primary: #08633f;
	--k-primary-soft: #eaf4ed;
	--k-frog: #9cc52f;
	--k-camera: #d78114;
	--k-camera-text: #92500b;
	--k-camera-soft: #fff3e5;
	--k-chat: #246a9c;
	--k-chat-soft: #eaf3fc;
	--k-warning-text: #8a5700;
	--k-warning-dot: #d78114;
	--k-danger: #b42318;

	/* type family and roles (handoff §8) */
	--k-font-sans: Assistant, system-ui, sans-serif;
	--k-font-greeting: 700 32px/40px var(--k-font-sans);
	--k-font-wordmark: 700 26px/32px var(--k-font-sans);
	--k-font-context-title: 700 24px/32px var(--k-font-sans);
	--k-font-conversation-title: 700 22px/30px var(--k-font-sans);
	--k-font-section: 600 20px/28px var(--k-font-sans);
	--k-font-body: 400 16px/24px var(--k-font-sans);
	--k-font-control: 600 15px/22px var(--k-font-sans);
	--k-font-meta: 400 14px/20px var(--k-font-sans);
	--k-font-label: 600 12px/18px var(--k-font-sans);

	/* spacing scale 4 · 8 · 12 · 16 · 24 · 32 · 48 */
	--k-space-1: 4px;
	--k-space-2: 8px;
	--k-space-3: 12px;
	--k-space-4: 16px;
	--k-space-5: 24px;
	--k-space-6: 32px;
	--k-space-7: 48px;

	/* radii and borders */
	--k-radius-control: 8px;
	--k-radius-card: 12px;
	--k-radius-tile: 10px;
	--k-border-width: 1px;
	--k-shadow-popover: 0 12px 32px rgba(23, 33, 43, 0.16);

	/* focus ring */
	--k-focus-color: var(--k-primary);
	--k-focus-width: 2px;
	--k-focus-offset: 2px;

	/* motion (handoff §8: 120–180ms colour/opacity only) */
	--k-motion-fast: 120ms;
	--k-motion-slow: 180ms;
	--k-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* shell geometry (handoff §3) */
	--k-rail: 72px;
	--k-context: 280px;
	--k-context-compact: 248px;
	--k-context-header: 72px;
	--k-gutter: 24px;
	--k-gutter-wide: 32px;
	--k-gutter-mobile: 16px;
	/* reading measure of the Home column (UI Consolidation slice 2) */
	--k-measure-home: 880px;
	/* dense Forecast canvas (UI Consolidation slice 3); not Home's reading measure */
	--k-measure-forecast: 1180px;
	--k-control-height: 44px;
	--k-rail-target: 48px;
}

/* The unprefixed legacy palette. UI Consolidation slice 0 deleted
 * 90-legacy.css and moved its :root here, so the bundle declares every token
 * once. The surface partials that follow (Vault, capture, product, admin,
 * forecast, Datenpool, Protect, Haushalt, Beraterpool) still consume these
 * names; recolouring them onto the canonical --k-* palette is a per-surface
 * design pass with browser proof, not a concat move. */

:root {
	--green: #b1cc41;
	--green-dark: #7d9427;
	--green-soft: #f2f6e2;
	--ink: #23281a;
	--muted: #6b7358;
	--paper: #ffffff;
	--line: #e6e8de;
	--retake: #c0392b;
	--accept: #2e7d32;
	--col: 860px;
	/* two-lane nav master-item accent tokens (masterplan-bound; distinct
	 * colour is the OUTLINE of each item, never a fill). */
	--nav-capture: #d97706;
	--nav-review: #7c3aed;
	--nav-vault: #15803d;
	--nav-chat: #0369a1;
	/* live-measured by nav.js from the persistent nav lanes; the fallback
	 * matches the master lane alone so pages that never run nav.js still
	 * reserve the right amount of room. */
	--kroemo-nav-height: 88px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--k-motion-fast: 0ms;
		--k-motion-slow: 0ms;
	}
}
/* 10-base.css — owner: core toolkit (reset, Assistant typography, focus).
 * Assistant is self-hosted from src/assets/fonts; no third-party font host is
 * contacted at runtime. Licence: src/assets/fonts/OFL.txt.
 * Unicode ranges come from src/assets/fonts/assistant-variable.manifest.txt. */

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(/assets/fonts/assistant-latin-wght-200-800.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(/assets/fonts/assistant-latin-ext-wght-200-800.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(/assets/fonts/assistant-hebrew-wght-200-800.woff2) format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }

/* Visible focus for anything the legacy sheet does not already handle. Legacy
 * and route rules carry class specificity and keep winning where they exist. */
:focus-visible {
	outline: var(--k-focus-width) solid var(--k-focus-color);
	outline-offset: var(--k-focus-offset);
}

/* Toolkit typography root. Slice 1 keeps this class-scoped so the legacy sheet
 * that follows in the bundle is not restyled; slice 2 puts .k-root on <body>. */
.k-root {
	font: var(--k-font-body);
	color: var(--k-text);
	background: var(--k-canvas);
	-webkit-text-size-adjust: 100%;
}

.k-root :where(h1) { font: var(--k-font-greeting); margin: 0; }
.k-root :where(h2) { font: var(--k-font-context-title); margin: 0; }
.k-root :where(h3) { font: var(--k-font-section); margin: 0; }
.k-root :where(h4, h5, h6) { font: var(--k-font-control); margin: 0; }
.k-root :where(p) { margin: 0; }

.k-root :where(a) {
	color: var(--k-primary);
	text-underline-offset: 2px;
}

.k-root :where(a):hover { color: var(--k-text); }

.k-meta { font: var(--k-font-meta); color: var(--k-text-muted); }

.k-label {
	font: var(--k-font-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--k-text-muted);
}

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

/* One screen-reader-only atom. `.visually-hidden` and `.nav-sr-only` are the
 * legacy spellings the shell, navigation and product templates still carry;
 * they share this rule instead of restating it (UI Consolidation slice 0). */
.k-visually-hidden,
.visually-hidden,
.nav-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* 20-controls.css — owner: core toolkit (buttons, inputs, toolbars).
 * Handoff §8: strong primary, quiet secondary border, tertiary text link;
 * control height 40–44px, radius 8px, 120–180ms colour transitions only. */

/* UI Consolidation slice 0 deleted the global `button, .button-link` rule that
 * gave every bare <button> a 999px pill and a green fill. The three legacy
 * control classes below are aliases of the toolkit primitive, not a second
 * implementation: `.button-link` is the <a> spelling, `.button-quiet` the
 * secondary look, `.danger`/`.button-danger` the destructive one. Markup that
 * carried no class at all now opts into `.k-button` / `.k-input` / `.k-select`
 * directly. */
.k-button,
.button-link,
.button-quiet,
.danger,
.button-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-space-2);
	min-height: var(--k-control-height);
	padding: 0 var(--k-space-4);
	border: var(--k-border-width) solid transparent;
	border-radius: var(--k-radius-control);
	background: var(--k-primary);
	color: var(--k-surface);
	font: var(--k-font-control);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--k-motion-fast) var(--k-ease),
		color var(--k-motion-fast) var(--k-ease),
		border-color var(--k-motion-fast) var(--k-ease);
}

.k-button:disabled,
.button-link:disabled,
.button-quiet:disabled,
.danger:disabled,
.button-danger:disabled,
.k-button[aria-disabled='true'] {
	opacity: 0.45;
	cursor: default;
}

.k-button--secondary,
.button-quiet {
	background: var(--k-surface);
	color: var(--k-text);
	border-color: var(--k-border);
}

.k-button--quiet {
	background: transparent;
	color: var(--k-primary);
	border-color: transparent;
	padding: 0 var(--k-space-2);
}

.k-button--danger,
.danger,
.button-danger { background: var(--k-danger); color: var(--k-surface); }

.k-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--k-control-height);
	block-size: var(--k-control-height);
	padding: 0;
	border: var(--k-border-width) solid transparent;
	border-radius: var(--k-radius-control);
	background: transparent;
	color: var(--k-text-muted);
	cursor: pointer;
	transition: background-color var(--k-motion-fast) var(--k-ease),
		color var(--k-motion-fast) var(--k-ease);
}

.k-icon-button:hover { background: var(--k-primary-soft); color: var(--k-text); }

.k-input {
	inline-size: 100%;
	min-height: var(--k-control-height);
	padding: 0 var(--k-space-3);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-control);
	background: var(--k-surface);
	color: var(--k-text);
	font: var(--k-font-body);
}

.k-input::placeholder { color: var(--k-text-muted); }

/* Inline width for the controls the legacy sheet sized intrinsically (short
 * numeric and date fields inside grids and toolbars). */
.k-input--auto { inline-size: auto; }

/* Native select: the toolkit had no select primitive, so the legacy sheet's
 * bare `select` rule was the only thing dressing 23 of them. */
.k-select {
	min-height: var(--k-control-height);
	padding: 0 var(--k-space-3);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-control);
	background: var(--k-surface);
	color: var(--k-text);
	font: var(--k-font-body);
	max-inline-size: 100%;
}

.k-field {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-1);
}

.k-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-space-3);
}

.k-toolbar > .k-toolbar-grow { flex: 1 1 220px; min-inline-size: 0; }
/* 30-surfaces.css — owner: core toolkit (cards, panels, preview wells).
 * Handoff §8: card radius 12px, 1px border, shadows reserved for popovers. */

.k-card {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-2);
	padding: var(--k-space-4);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
}

.k-card-title { font: var(--k-font-section); color: var(--k-text); }

.k-card-well {
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: var(--k-radius-tile);
	background: var(--k-canvas);
}

.k-card-well > img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.k-panel {
	padding: var(--k-space-5);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
}

.k-popover {
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	box-shadow: var(--k-shadow-popover);
}

.k-section {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-3);
}

.k-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--k-space-3);
}

.k-divider {
	block-size: var(--k-border-width);
	background: var(--k-border);
	border: 0;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Legacy surface atoms, folded in by UI Consolidation slice 0 (from the
 * deleted 90-legacy.css). `.card` is NOT collapsed onto `.k-card`: it is a
 * block box with its own padding and shadow, while `.k-card` is a flex column
 * with a gap, so the two are not interchangeable without re-authoring the ~40
 * admin/advisor/product card bodies that assume block flow. Recorded as a gap;
 * the per-surface design passes own it.
 * ------------------------------------------------------------------------- */

.card {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	padding: 20px 22px;
	box-shadow: 0 2px 10px rgba(35, 40, 26, 0.05);
}

.card p { margin: 8px 0; }
.card-facts { color: var(--muted); font-size: 13px; }
.card-action-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.card-action-row input { flex: 1; min-width: 220px; }

/* Page structure atoms shared by the product, admin, advisor and vault
 * surfaces. `h2`/`h3` element rules that used to sit here were design, not a
 * reset, and are gone: `.k-root :where(h2/h3)` in 10-base.css now decides
 * heading type. */
.view-header { display: flex; justify-content: space-between; align-items: end; margin: 26px 0 12px; }
.eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: 0.12em; color: var(--green-dark); font-weight: 700; }
.custody-note { color: var(--muted); font-size: 13px; max-width: 620px; }
.locked-note { color: var(--muted); }
.locked-note a { color: var(--green-dark); }

/* Teaser card (the forecast teaser page links a whole card). The selector was
 * `a.card-teaser`; the element half is gone so no element selector carries
 * design outside 10-base.css. */
.card-teaser {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	text-decoration: none; color: inherit;
	border-left: 5px solid var(--green);
	transition: box-shadow 0.15s ease;
}
.card-teaser:hover { box-shadow: 0 6px 20px rgba(125, 148, 39, 0.18); }
.card-teaser-cta { color: var(--green-dark); font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.card-teaser { transition: none; }
}
/* 40-status.css — owner: core toolkit (status chips, loading, empty).
 * Handoff §5 status semantics. Colour never carries meaning alone: every chip
 * pairs a dot with its own text. */

.k-status {
	display: inline-flex;
	align-items: center;
	gap: var(--k-space-2);
	font: var(--k-font-meta);
	color: var(--k-text-muted);
}

.k-status-dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.k-status--done { color: var(--k-primary); }
.k-status--review { color: var(--k-warning-text); }
.k-status--review .k-status-dot { background: var(--k-warning-dot); }
.k-status--pending { color: var(--k-text-muted); }
.k-status--processing { color: var(--k-chat); }
.k-status--unknown { color: var(--k-text-muted); }
.k-status--failed { color: var(--k-danger); }

.k-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--k-space-1);
	padding: var(--k-space-1) var(--k-space-2);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-control);
	background: var(--k-surface);
	font: var(--k-font-meta);
	color: var(--k-text-muted);
}

.k-skeleton {
	border-radius: var(--k-radius-tile);
	background: var(--k-border);
	opacity: 0.6;
	animation: k-skeleton-pulse 1.2s ease-in-out infinite;
}

@keyframes k-skeleton-pulse {
	50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.k-skeleton { animation: none; }
}

.k-empty {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-2);
	padding: var(--k-space-5);
	color: var(--k-text-muted);
	font: var(--k-font-body);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Legacy status atoms, folded in by UI Consolidation slice 0.
 * The pill radius on `.badge` is deliberate: badges and chips are the surfaces
 * the toolkit *wants* fully rounded. The pill that broke the design was the
 * global `button` rule, which is gone.
 * ------------------------------------------------------------------------- */

.badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff; margin-left: 6px; vertical-align: middle; }
.badge-accept { background: var(--accept); }
.badge-retake { background: var(--retake); }
.badge-default { background: #9aa38a; }

.loading-spinner {
	width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--green-dark), transparent 72%);
	border-top-color: var(--green-dark); border-radius: 50%; animation: kroemo-spin .8s linear infinite;
}
@keyframes kroemo-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
	.loading-spinner { animation: none; }
}
/* 50-dialog.css — owner: core toolkit (shell dialog host).
 * The shell owns one general route-content dialog; slice 3 converges the
 * route-local hosts onto it. Custody dialogs keep their own owner. */

.k-dialog {
	inline-size: min(720px, calc(100vw - 2 * var(--k-space-5)));
	max-block-size: calc(100dvh - 2 * var(--k-space-5));
	padding: 0;
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	color: var(--k-text);
	box-shadow: var(--k-shadow-popover);
	overflow: hidden;
}

.k-dialog::backdrop { background: rgba(23, 33, 43, 0.44); }

.k-dialog-panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	max-block-size: inherit;
}

.k-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-space-3);
	padding: var(--k-space-4) var(--k-space-5);
	border-block-end: var(--k-border-width) solid var(--k-border);
}

.k-dialog-body {
	padding: var(--k-space-5);
	overflow: auto;
	min-block-size: 0;
}

.k-dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--k-space-3);
	padding: var(--k-space-4) var(--k-space-5);
	border-block-start: var(--k-border-width) solid var(--k-border);
}

.vault-idle-dialog {
	inline-size: min(28rem, calc(100vw - 2 * var(--k-space-5)));
	padding: var(--k-space-6);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	color: var(--k-text);
	box-shadow: var(--k-shadow-popover);
}

.vault-idle-dialog::backdrop { background: rgba(23, 28, 18, 0.55); }

.vault-idle-dialog h2 { margin-block: var(--k-space-2) var(--k-space-3); }

.vault-idle-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--k-space-3);
	margin-block-start: var(--k-space-5);
}

.vault-idle-expiry-guard {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	place-items: center;
	background: var(--k-background);
	color: var(--k-text);
}

html[data-kroemo-vault-idle-expired="true"] .vault-idle-expiry-guard { display: grid; }
html[data-kroemo-vault-idle-expired="true"] [data-kroemo-shell] > :not(.vault-idle-expiry-guard):not(script) { visibility: hidden; }

@media (max-width: 520px) {
	.vault-idle-actions { flex-direction: column-reverse; }
	.vault-idle-actions > button { min-block-size: 44px; }
}

/* ------------------------- the one general modal host -------------------------
 * Slice 3 converged the route-local `.kroemo-modal` shells (Vault document
 * workspace, delete confirmation) onto this shell-owned dialog. The ⋮ modal
 * routes (owner latency, device add) bring their own panel chrome, so the bare
 * host stays transparent; converged route content gets its chrome from the host
 * and declares its kind with [data-kroemo-modal-content]. */
.kroemo-modal-shell {
	width: min(calc(100% - 2rem), 40rem);
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	overflow: auto;
	background: transparent;
}

.kroemo-modal-shell::backdrop { background: rgba(23, 28, 18, 0.55); }

/* [data-kroemo-modal-stale] means the route-modal frame still carries the
 * PREVIOUS route's content: the host has been re-pointed but the frame has not
 * rendered under its new destination yet. Stale content never wins the host and
 * is never displayed, so leaving Vault with a document open and then opening a
 * ⋮ destination shows the ⋮ content, not a zombie workspace. */
.kroemo-modal-shell[data-kroemo-modal-stale] > [data-hm-frame="route-modal"] { display: none; }

.kroemo-modal-shell:not([data-kroemo-modal-stale]):has([data-kroemo-modal-content]) {
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	color: var(--k-text);
	box-shadow: var(--k-shadow-popover);
}

/* one host, one content owner: the ⋮ modal frame yields to converged route
 * content instead of rendering underneath it */
.kroemo-modal-shell:not([data-kroemo-modal-stale]):has([data-kroemo-modal-content]) > [data-hm-frame="modal"] { display: none; }
.kroemo-modal-shell:not(:has([data-kroemo-modal-content])) > [data-hm-frame="route-modal"] { display: none; }

.kroemo-modal-shell:not([data-kroemo-modal-stale]):has([data-kroemo-modal-content="workspace"]) {
	width: min(96vw, 1180px);
	max-height: 94vh;
	overflow-y: auto;
}

.kroemo-modal-shell:not([data-kroemo-modal-stale]):has([data-kroemo-modal-content="delete"]) { width: min(92vw, 460px); }

@media (max-width: 720px) {
	.kroemo-modal-shell:not([data-kroemo-modal-stale]):has([data-kroemo-modal-content]) {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}
/* 55-chrome.css — owner: application chrome that is not route content.
 * Folded out of the deleted 90-legacy.css by UI Consolidation slice 0: the
 * Font Awesome glyph box, the controller recovery block, the view transitions,
 * the lane-0 boot splash, the render-failure notice, the sign-out dialog, the
 * owner latency modal and the diagnostics-share menu entry. All of it is
 * authored in _components/kroemo-page.html or the navigation component and is
 * present on every shell route, which is why it lives in the bundle rather
 * than in a route partial. */

/* Graph-owned Font Awesome SVG components preserve the former webfont glyph
   box without recreating any Font Awesome class authority. */
.fa-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
}

.fa-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.controller-recovery-block {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink);
  background: rgba(23, 28, 18, 0.82);
}

.controller-recovery-block > section {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.controller-recovery-block h2 {
  margin: 8px 0;
}

@view-transition { navigation: auto; }
:root { view-transition-name: none; }
::view-transition-old(kroemo-page-shell) { animation: 140ms ease-in both kroemo-view-out; }
::view-transition-new(kroemo-page-shell) { animation: 220ms cubic-bezier(.22, 1, .36, 1) both kroemo-view-in; }
::view-transition-old(kroemo-bottom-nav),
::view-transition-new(kroemo-bottom-nav) { animation: none; }
@keyframes kroemo-view-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes kroemo-view-in { from { opacity: 0; transform: translateY(7px); } }

/* Lane-0 boot surface: static markup and the offline-owned brand asset make
 * this the first useful paint. Runtime code only advances typed state. */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper);
}

.boot-splash-panel {
  width: min(72vw, 280px);
  display: grid;
  justify-items: center;
  gap: 18px;
}

.boot-splash-logo {
  width: clamp(88px, 22vw, 112px);
  height: auto;
  color: var(--green);
}

.boot-splash progress {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  color: var(--green-dark);
  accent-color: var(--green-dark);
  background: var(--green-soft);
}

.boot-splash progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--green-soft);
}

.boot-splash progress::-webkit-progress-value {
  border-radius: inherit;
  background: var(--green-dark);
}

.boot-splash progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--green-dark);
}

.boot-chip-wait,
.boot-chip-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.boot-chip-wait {
  display: inline-block;
  border: 2px solid var(--line);
}

.boot-chip-spinner {
  display: none;
  border: 2px solid color-mix(in srgb, var(--green) 24%, transparent);
  border-top-color: var(--green-dark);
  animation: none;
}

@keyframes boot-splash-spin { to { transform: rotate(1turn); } }

.boot-engine-phases {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 7px;
  margin: -4px 0;
}

[data-boot-engine-chip] {
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 360px) {
  .boot-splash { padding-inline: 12px; }
  .boot-splash-panel { width: min(100%, 280px); }
  .boot-engine-phases { gap: 4px; }
  [data-boot-engine-chip] {
    padding-inline: 6px;
    gap: 4px;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
  }
}

html:not([data-boot-engine-phase]):not([data-boot-stage="ready"]):not([data-boot-stage="stalled"]) [data-boot-engine-chip="fetching"],
html[data-boot-engine-phase="fetching"] [data-boot-engine-chip="fetching"],
html[data-boot-engine-phase="instantiating"] [data-boot-engine-chip="instantiating"],
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="rendering"] {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-soft);
}

html:not([data-boot-engine-phase]):not([data-boot-stage="ready"]):not([data-boot-stage="stalled"]) [data-boot-engine-chip="fetching"] .boot-chip-spinner,
html[data-boot-engine-phase="fetching"] [data-boot-engine-chip="fetching"] .boot-chip-spinner,
html[data-boot-engine-phase="instantiating"] [data-boot-engine-chip="instantiating"] .boot-chip-spinner,
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="rendering"] .boot-chip-spinner {
  display: inline-block;
  animation: boot-splash-spin 800ms linear infinite;
}

html:not([data-boot-engine-phase]):not([data-boot-stage="ready"]):not([data-boot-stage="stalled"]) [data-boot-engine-chip="fetching"] .boot-chip-wait,
html:not([data-boot-stage="stalled"])[data-boot-engine-phase="fetching"] [data-boot-engine-chip="fetching"] .boot-chip-wait,
html:not([data-boot-stage="stalled"])[data-boot-engine-phase="instantiating"] [data-boot-engine-chip="instantiating"] .boot-chip-wait,
html:not([data-boot-stage="stalled"])[data-boot-engine-phase="rendering"] [data-boot-engine-chip="rendering"] .boot-chip-wait,
html[data-boot-engine-phase="instantiating"] [data-boot-engine-chip="fetching"] .boot-chip-wait,
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="fetching"] .boot-chip-wait,
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="instantiating"] .boot-chip-wait,
html[data-boot-stage="ready"] [data-boot-engine-chip] .boot-chip-wait {
  display: none;
}

html[data-boot-engine-phase="instantiating"] [data-boot-engine-chip="fetching"],
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="fetching"],
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="instantiating"] {
  border-color: color-mix(in srgb, var(--green) 48%, var(--line));
  color: var(--green-dark);
}

.boot-chip-check {
  display: none;
  width: 12px;
  flex: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1;
  text-align: center;
}

html[data-boot-engine-phase="instantiating"] [data-boot-engine-chip="fetching"] .boot-chip-check,
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="fetching"] .boot-chip-check,
html[data-boot-engine-phase="rendering"] [data-boot-engine-chip="instantiating"] .boot-chip-check,
html[data-boot-stage="ready"] [data-boot-engine-chip] .boot-chip-check {
  display: inline-block;
}

html[data-boot-stage="ready"] [data-boot-engine-chip] .boot-chip-spinner,
html[data-boot-stage="stalled"] [data-boot-engine-chip] .boot-chip-spinner {
  display: none;
  animation: none;
}

[data-boot-stage-variant] { display: none; }
html:not([data-boot-stage]) [data-boot-stage-variant="shell"],
html[data-boot-stage="shell"] [data-boot-stage-variant="shell"],
html[data-boot-stage="engine-fetch"] [data-boot-stage-variant="engine-fetch"],
html[data-boot-stage="engine-compile"] [data-boot-stage-variant="engine-compile"],
html[data-boot-stage="engine-ready"] [data-boot-stage-variant="engine-ready"],
html[data-boot-stage="engine-render"] [data-boot-stage-variant="engine-render"],
html[data-boot-stage="graph"] [data-boot-stage-variant="graph"],
html[data-boot-stage="vault"] [data-boot-stage-variant="vault"],
html[data-boot-stage="ready"] [data-boot-stage-variant="ready"],
html[data-boot-stage="stalled"] [data-boot-stage-variant="stalled"] { display: inline; }

.boot-splash-confession,
[data-boot-stalled-variant],
[data-boot-share-variant] { display: none; }

html[data-boot-stage="stalled"] .boot-splash-confession {
  display: grid;
  gap: 14px;
  justify-items: center;
}

html[data-boot-stalled-stage="shell"] [data-boot-stalled-variant="shell"],
html[data-boot-stalled-stage="engine-fetch"] [data-boot-stalled-variant="engine-fetch"],
html[data-boot-stalled-stage="engine-compile"] [data-boot-stalled-variant="engine-compile"],
html[data-boot-stalled-stage="engine-ready"] [data-boot-stalled-variant="engine-ready"],
html[data-boot-stalled-stage="engine-render"] [data-boot-stalled-variant="engine-render"],
html[data-boot-stalled-stage="graph"] [data-boot-stalled-variant="graph"],
html[data-boot-stalled-stage="vault"] [data-boot-stalled-variant="vault"],
html[data-boot-share-state="sharing"] [data-boot-share-variant="sharing"],
html[data-boot-share-state="shared"] [data-boot-share-variant="shared"],
html[data-boot-share-state="failed"] [data-boot-share-variant="failed"] { display: inline; }

.boot-splash-confession-stage,
.boot-splash-share-status { margin: 0; color: var(--muted); }
.boot-splash-confession-stage { font-weight: 700; }
.boot-splash-share-status { min-height: 1.4em; font-size: 0.82rem; }
.boot-splash-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* No minimum display time or exit animation: a warm boot may be sub-second. */
html[data-boot-stage="ready"] .boot-splash {
  visibility: hidden;
  pointer-events: none;
}

/* Render-failure notice: markup is authored in kroemo-page.html; app.js only
 * sets html[data-kroemo-render-failure] when the main frame refused a render. */
.render-failure-notice { display: none; }
html[data-kroemo-render-failure] .render-failure-notice {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  gap: 10px;
  margin: 0 auto 12px;
  padding: 14px 20px;
  max-width: var(--col);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.render-failure-notice p { margin: 0; }
[data-render-failure-variant] { display: none; }
html[data-kroemo-render-failure="retained"] [data-render-failure-variant="retained"],
html[data-kroemo-render-failure="unavailable"] [data-render-failure-variant="unavailable"] { display: block; }

.product-sign-out-dialog {
  width: min(calc(100% - 2rem), 34rem); max-height: calc(100dvh - 2rem);
  padding: clamp(1.4rem, 5vw, 2.25rem); border: 1px solid var(--line);
  border-radius: 20px; background: #f4f7ef; color: var(--ink);
  box-shadow: 0 24px 70px rgba(23, 28, 18, 0.4);
}
.product-sign-out-dialog::backdrop { background: rgba(23, 28, 18, 0.55); }
.product-sign-out-dialog h2 { margin: 4px 0 10px; }
.product-sign-out-warnings { display: grid; gap: 8px; padding-left: 1.25rem; }
.product-sign-out-status { min-height: 3em; color: var(--muted); }
.product-sign-out-status p, .product-sign-out-actions button { display: none; }
.product-sign-out-dialog[data-product-sign-out-state="confirm"] [data-product-sign-out-status-variant="confirm"],
.product-sign-out-dialog[data-product-sign-out-state="revoking"] [data-product-sign-out-status-variant="revoking"],
.product-sign-out-dialog[data-product-sign-out-state="pre-revoke-failed"] [data-product-sign-out-status-variant="pre-revoke-failed"],
.product-sign-out-dialog[data-product-sign-out-state="cleaning"] [data-product-sign-out-status-variant="cleaning"],
.product-sign-out-dialog[data-product-sign-out-state="local-cleanup-incomplete"] [data-product-sign-out-status-variant="local-cleanup-incomplete"],
.product-sign-out-dialog[data-product-sign-out-state="complete"] [data-product-sign-out-status-variant="complete"] { display: block; }
.product-sign-out-dialog:is([data-product-sign-out-state="pre-revoke-failed"], [data-product-sign-out-state="local-cleanup-incomplete"]) .product-sign-out-status { color: var(--retake); font-weight: 700; }
.product-sign-out-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.product-sign-out-actions button { min-height: 44px; }
.product-sign-out-dialog[data-product-sign-out-state="confirm"] :is([data-product-sign-out-cancel], [data-product-sign-out-confirm]),
.product-sign-out-dialog[data-product-sign-out-state="pre-revoke-failed"] :is([data-product-sign-out-cancel], [data-product-sign-out-retry-revoke]),
.product-sign-out-dialog[data-product-sign-out-state="local-cleanup-incomplete"] [data-product-sign-out-retry-cleanup] { display: inline-block; }
.product-sign-out-destructive { background: var(--retake); color: #fff; }
.product-sign-out-dialog :focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }

/* Phone-native, value-free unlock timing workflow opened from the ⋮ menu.
 * The .kroemo-modal-shell host itself moved to styles/50-dialog.css in slice 3. */
.owner-latency-modal {
  display: block;
}
.owner-latency-modal-dialog {
  position: relative; width: min(100%, 34rem); margin: auto;
  padding: clamp(1.4rem, 5vw, 2.25rem); border-radius: 20px;
  background: #f4f7ef; box-shadow: 0 24px 70px rgba(23, 28, 18, 0.4);
}
.owner-latency-modal-dialog h2 { margin: 4px 2.75rem 10px 0; }
.owner-latency-modal-close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  padding: 2px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink);
}
.owner-latency-browser, .owner-latency-status, .owner-latency-privacy { color: var(--muted); }

.vault-diagnostic-submit-modal {
  position: relative; width: min(100%, 34rem); margin: auto;
  padding: clamp(1.4rem, 5vw, 2.25rem); border-radius: 20px;
  background: #f4f7ef; box-shadow: 0 24px 70px rgba(23, 28, 18, 0.4);
}
.vault-diagnostic-submit-modal h2 { margin: 4px 2.75rem 10px 0; }
.vault-diagnostic-submit-modal form { display: grid; gap: 8px; margin-top: 20px; }
.vault-diagnostic-submit-modal textarea { resize: vertical; min-height: 7.5rem; }
.vault-diagnostic-optional, .vault-diagnostic-form-status { color: var(--muted); }
.vault-diagnostic-form-status { min-height: 1.5em; margin: 0; }
.vault-diagnostic-submit-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vault-diagnostic-submit-actions button { min-height: 44px; }
.vault-diagnostic-submit-modal :focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.owner-latency-browser p, .owner-latency-status p { display: none; margin: 0; }
.owner-latency-modal[data-owner-latency-browser="unknown"] [data-owner-latency-browser-variant="unknown"],
.owner-latency-modal[data-owner-latency-browser="chromium"] [data-owner-latency-browser-variant="chromium"],
.owner-latency-modal[data-owner-latency-browser="firefox"] [data-owner-latency-browser-variant="firefox"],
.owner-latency-modal[data-owner-latency-browser="refused"] [data-owner-latency-browser-variant="refused"] { display: block; }
.owner-latency-modal[data-owner-latency-browser="refused"] .owner-latency-browser { color: var(--retake); font-weight: 700; }
.owner-latency-network { display: grid; gap: 7px; margin: 18px 0; font-weight: 700; }
.owner-latency-network select {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--ink); font: inherit;
}
.owner-latency-progress { display: grid; gap: 7px; margin: 18px 0; }
.owner-latency-progress progress { width: 100%; height: 14px; accent-color: var(--green-dark); }
.owner-latency-progress strong { display: none; }
.owner-latency-modal[data-owner-latency-run-count="0"] [data-owner-latency-count-variant="0"],
.owner-latency-modal[data-owner-latency-run-count="1"] [data-owner-latency-count-variant="1"],
.owner-latency-modal[data-owner-latency-run-count="2"] [data-owner-latency-count-variant="2"],
.owner-latency-modal[data-owner-latency-run-count="3"] [data-owner-latency-count-variant="3"],
.owner-latency-modal[data-owner-latency-run-count="4"] [data-owner-latency-count-variant="4"],
.owner-latency-modal[data-owner-latency-run-count="5"] [data-owner-latency-count-variant="5"] { display: inline; }
.owner-latency-status { min-height: 3em; }
.owner-latency-modal[data-owner-latency-status="ready"] [data-owner-latency-status-variant="ready"],
.owner-latency-modal[data-owner-latency-status="preparing"] [data-owner-latency-status-variant="preparing"],
.owner-latency-modal[data-owner-latency-status="unlock"] [data-owner-latency-status-variant="unlock"],
.owner-latency-modal[data-owner-latency-status="saved"] [data-owner-latency-status-variant="saved"],
.owner-latency-modal[data-owner-latency-status="complete"] [data-owner-latency-status-variant="complete"],
.owner-latency-modal[data-owner-latency-status="population-mismatch"] [data-owner-latency-status-variant="population-mismatch"],
.owner-latency-modal[data-owner-latency-status="capture-error"] [data-owner-latency-status-variant="capture-error"],
.owner-latency-modal[data-owner-latency-status="start-error"] [data-owner-latency-status-variant="start-error"],
.owner-latency-modal[data-owner-latency-status="next-error"] [data-owner-latency-status-variant="next-error"],
.owner-latency-modal[data-owner-latency-status="downloaded"] [data-owner-latency-status-variant="downloaded"],
.owner-latency-modal[data-owner-latency-status="download-error"] [data-owner-latency-status-variant="download-error"],
.owner-latency-modal[data-owner-latency-status="reset"] [data-owner-latency-status-variant="reset"] { display: block; }
.owner-latency-modal[data-owner-latency-state="error"] .owner-latency-status { color: var(--retake); font-weight: 700; }
.owner-latency-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.owner-latency-actions button { display: none; }
.owner-latency-modal[data-owner-latency-state="idle"] [data-owner-latency-start],
.owner-latency-modal[data-owner-latency-state="ready-next"] [data-owner-latency-next],
.owner-latency-modal[data-owner-latency-state="complete"] [data-owner-latency-download],
.owner-latency-modal:not([data-owner-latency-state="idle"]) [data-owner-latency-reset] { display: inline-block; }
.owner-latency-privacy { margin: 18px 0 0; font-size: 12px; }




[data-device-add-status] [data-nav-status-variant] { display: none; }
[data-device-add-status][data-nav-status="device-add-module-error"] [data-nav-status-variant="device-add-module-error"] { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .boot-chip-spinner { animation: none !important; }
}

/* Diagnostics-share menu entry: label selected by typed share state on the
 * button (idle -> copied/failed feedback, reset by nav.js after a beat). */
[data-vault-diagnostics-share] [data-diag-share-variant] { display: none; }
[data-vault-diagnostics-share]:not([data-share-state]) [data-diag-share-variant="idle"],
[data-vault-diagnostics-share][data-share-state="idle"] [data-diag-share-variant="idle"] { display: inline; }
[data-vault-diagnostics-share][data-share-state="copied"] [data-diag-share-variant="copied"] { display: inline; }
[data-vault-diagnostics-share][data-share-state="failed"] [data-diag-share-variant="failed"] { display: inline; }

[data-vault-diagnostic-submit-host][hidden],
[data-vault-diagnostic-submit-host]:not([data-vault-diagnostic-eligible="true"]) { display: none; }
[data-vault-diagnostic-retry] { display: none; }
[data-vault-diagnostic-submit-host][data-vault-diagnostic-retryable="true"] [data-vault-diagnostic-retry] { display: inline; }
[data-vault-diagnostic-report-id]::after { content: attr(data-report-id); }
[data-vault-diagnostic-open] [data-vault-diagnostic-submit-variant],
[data-vault-diagnostic-status] [data-vault-diagnostic-status-variant] { display: none; }
[data-vault-diagnostic-submit-host]:not([data-vault-diagnostic-state]) [data-vault-diagnostic-submit-variant="idle"],
[data-vault-diagnostic-submit-host][data-vault-diagnostic-state="idle"] [data-vault-diagnostic-submit-variant="idle"],
[data-vault-diagnostic-submit-host][data-vault-diagnostic-state="sending"] [data-vault-diagnostic-submit-variant="sending"],
[data-vault-diagnostic-submit-host][data-vault-diagnostic-state="sent"] [data-vault-diagnostic-submit-variant="sent"],
[data-vault-diagnostic-submit-host][data-vault-diagnostic-state="failed"] [data-vault-diagnostic-submit-variant="failed"] { display: inline; }
[data-vault-diagnostic-submit-host][data-vault-diagnostic-state="sending"] [data-vault-diagnostic-status-variant="sending"],
[data-vault-diagnostic-submit-host][data-vault-diagnostic-state="sent"] [data-vault-diagnostic-status-variant="sent"],
[data-vault-diagnostic-submit-host][data-vault-diagnostic-state="failed"] [data-vault-diagnostic-status-variant="failed"] { display: inline; }

/* Page-level "preparing" surface (Home and the three product index pages).
 * Uses .loading-spinner from 40-status.css. */
.dashboard-preparing {
	min-height: calc(100dvh - 118px); display: grid; place-content: center; justify-items: center;
	gap: 18px; padding: 32px 0; text-align: center;
}
.dashboard-preparing img { width: min(440px, 78vw); height: auto; }
.dashboard-preparing p { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(kroemo-page-shell),
	::view-transition-new(kroemo-page-shell) { animation-duration: 1ms; }
}
/* 60-shell.css — owner: core toolkit (rail / context / canvas geometry).
 * Handoff §3. Slice 2 adopts this on the real application shell: the runtime
 * root carries .k-app-shell, the navigation frame is transparent so its
 * <nav class="k-rail"> is the first grid column, and the main frame is the
 * canvas. The context lane is the middle column when a route supplies one. */

.k-app-shell {
	display: grid;
	grid-template-columns: var(--k-rail) minmax(0, 1fr);
	block-size: 100dvh;
	font: var(--k-font-body);
	color: var(--k-text);
	background: var(--k-canvas);
	/* Same named view transition the legacy `.shell` rule carried, so the
	 * restrained ::view-transition-*(kroemo-page-shell) rules and their
	 * reduced-motion override in 90-legacy.css keep applying. */
	view-transition-name: kroemo-page-shell;
}

.k-app-shell:has(> .k-context:not([data-kroemo-context-empty='true'])) {
	grid-template-columns: var(--k-rail) var(--k-context) minmax(0, 1fr);
}

/* Intermediate widths (handoff §7): between the mobile threshold and the full
 * desktop threshold the shared context lane takes the 248px compact width so
 * two lanes plus the canvas still read without crowding. */
@media (min-width: 769px) and (max-width: 1099px) {
	.k-app-shell:has(> .k-context:not([data-kroemo-context-empty='true'])) {
		grid-template-columns: var(--k-rail) var(--k-context-compact) minmax(0, 1fr);
	}
}

/* The navigation frame is a transparent region: the rail it renders is the
 * grid item, so the shell geometry does not depend on the frame wrapper. */
.k-app-shell > [data-hm-frame='navigation'] { display: contents; }

/* The main frame is the canvas and the main scroll owner. */
.k-app-shell > [data-hm-frame='main'] {
	grid-column: 2;
	grid-row: 1;
	min-inline-size: 0;
	min-block-size: 0;
	overflow: auto;
}

.k-app-shell:has(> .k-context:not([data-kroemo-context-empty='true'])) > [data-hm-frame='main'] { grid-column: 3; }

/* Chat keeps its header and composer stable and scrolls its own history, so
 * the canvas is not a second scroll owner there. */
body[data-section='chat-room'] .k-app-shell > [data-hm-frame='main'] { overflow: hidden; }

/* Route content inside the canvas carries the gutters. */
.k-app-shell .page-layout { min-inline-size: 0; padding: var(--k-space-5) var(--k-gutter); }
.k-app-shell .page-layout-wide,
.k-app-shell .page-layout-chat-room { padding: 0; }

/* The render-failure alert overlays the canvas row instead of claiming a
 * fourth track; it stays the sticky, top-aligned surface app.js reveals. */
.k-app-shell > .render-failure-notice {
	grid-row: 1;
	grid-column: 1 / -1;
	align-self: start;
	justify-self: center;
	inline-size: min(100%, var(--col, 860px));
}

/* ------------------------------- app rail -------------------------------- */

.k-rail {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--k-space-2);
	padding: var(--k-space-3) 0;
	border-inline-end: var(--k-border-width) solid var(--k-border);
	background: var(--k-surface);
	min-inline-size: 0;
	min-block-size: 0;
	/* The rail replaces the bottom nav; it keeps that element's view-transition
	 * name so the existing "animation: none" rule still suppresses chrome
	 * movement between routes. */
	view-transition-name: kroemo-bottom-nav;
}

.k-rail-items {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--k-space-2);
	min-block-size: 0;
}

.k-rail-menu { margin-block-start: auto; position: relative; }

/* Custody control (slice 2): the shield is the first item of the bottom
 * cluster, directly above the ⋮ overflow, so it — not the menu — carries the
 * auto margin that pushes the cluster down. */
.k-rail-security { margin-block-start: auto; }
.k-rail-security + .k-rail-menu { margin-block-start: 0; }

.k-rail-home,
.k-rail .k-rail-target {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: var(--k-rail-target);
	block-size: var(--k-rail-target);
	border-radius: var(--k-radius-tile);
	color: var(--k-text-muted);
	background: transparent;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--k-motion-fast) var(--k-ease),
		color var(--k-motion-fast) var(--k-ease);
}

.k-rail-home:hover,
.k-rail-target:hover { background: var(--k-canvas); }

.k-rail-icon { display: grid; place-items: center; font-size: 22px; line-height: 1; }

/* Area accents (handoff §3): camera orange, vault green, chat blue. */
.k-rail-capture { --k-rail-accent: var(--k-camera-text); --k-rail-accent-soft: var(--k-camera-soft); }
.k-rail-vault { --k-rail-accent: var(--k-primary); --k-rail-accent-soft: var(--k-primary-soft); }
.k-rail-chat { --k-rail-accent: var(--k-chat); --k-rail-accent-soft: var(--k-chat-soft); }

/* Selected area. The shell already projects the area on <body data-section>;
 * the rail reads that same contract instead of a second navigation state. */
body[data-section='dashboard'] .k-rail-home { background: var(--k-primary-soft); }
body[data-section='capture'] .k-rail-capture,
body[data-section='vault'] .k-rail-vault,
body[data-section='chat-room'] .k-rail-chat {
	background: var(--k-rail-accent-soft);
	color: var(--k-rail-accent);
}

.k-rail-disabled { cursor: not-allowed; opacity: 0.55; }

/* Labels are available on hover and keyboard focus, never permanently shown
 * in the desktop rail (handoff §3). */
.k-rail-label {
	position: absolute;
	inset-inline-start: calc(100% + var(--k-space-2));
	z-index: 30;
	padding: var(--k-space-1) var(--k-space-2);
	border-radius: var(--k-radius-control);
	background: var(--k-text);
	color: var(--k-surface);
	font: var(--k-font-meta);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--k-motion-fast) var(--k-ease);
}

.k-rail-home:hover .k-rail-label,
.k-rail-target:hover .k-rail-label,
.k-rail-home:focus-visible .k-rail-label,
.k-rail-target:focus-visible .k-rail-label { opacity: 1; }

/* Real state only: a count appears when the projection reports pending work
 * or unread activity, never as decoration. */
.k-rail-badge {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	block-size: 18px;
	padding: 0 5px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: var(--k-danger);
	color: var(--k-surface);
	font: 700 11px/1 var(--k-font-sans);
	font-variant-numeric: tabular-nums;
}

.k-rail-capture .k-rail-badge { background: var(--k-camera); }

/* The unread count is projected as data, the badge renders it. */
.k-rail-chat .k-rail-badge::before,
[data-nav-chat-unread-value]::before { content: attr(data-chat-unread); }

.k-rail-chat:not([data-chat-state='available-unread']) .k-rail-badge,
.k-rail-chat [data-nav-chat-status-variant] { display: none; }
.k-rail-chat[data-chat-state='unavailable'] { opacity: 0.6; }
.k-rail-chat[data-chat-state='unavailable'] [data-nav-chat-status-variant='unavailable'],
.k-rail-chat:is([data-chat-state='available-empty'], [data-chat-state='available-unread']) [data-nav-chat-status-variant='available'] { display: inline; }

/* ⋮ overflow: the established home for account/help actions. It is not a
 * primary destination. */
.k-rail-menu-button::marker { content: ''; }
.k-rail-menu-button::-webkit-details-marker { display: none; }

.k-rail-menu-list {
	display: none;
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: calc(100% + var(--k-space-2));
	z-index: 100;
	min-inline-size: 210px;
	padding: var(--k-space-1);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	box-shadow: var(--k-shadow-popover);
}

.k-rail-menu[open] .k-rail-menu-list { display: block; }

.k-rail-menu-list :is(a, button) {
	display: block;
	inline-size: 100%;
	min-block-size: var(--k-control-height);
	padding: var(--k-space-3);
	border: 0;
	border-radius: var(--k-radius-control);
	background: transparent;
	color: var(--k-text);
	font: var(--k-font-control);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.k-rail-menu-list :is(a, button):hover { background: var(--k-primary-soft); }
.k-rail-menu-list :is(a, button):focus-visible {
	outline: var(--k-focus-width) solid var(--k-focus-color);
	outline-offset: var(--k-focus-offset);
}
.k-rail-menu-list button[disabled] { opacity: 0.5; cursor: not-allowed; }

.k-rail-menu-review[hidden] { display: none; }
.k-rail-menu-review [data-review-availability-variant],
.k-rail-menu-review [data-review-availability-status-variant] { display: none; }
.k-rail-menu-review[data-review-availability='off'] [data-review-availability-variant='off'],
.k-rail-menu-review[data-review-availability='on'] [data-review-availability-variant='on'],
.k-rail-menu-review[data-review-availability='draft'] [data-review-availability-variant='on'],
.k-rail-menu-review[data-review-availability='off'] [data-review-availability-status-variant='off'],
.k-rail-menu-review[data-review-availability='on'] [data-review-availability-status-variant='on'],
.k-rail-menu-review[data-review-availability='draft'] [data-review-availability-status-variant='draft'] { display: inline; }

/* The custody panel is a top-layer popover (80-vault.css owns its chrome), so
 * the rail's overflow never clips it. It opens beside the rail with its bottom
 * edge on the shield; where CSS anchor positioning exists it tracks the toggle
 * instead of the rail's nominal width. */
.k-rail-security-toggle[aria-expanded='true'] { background: var(--k-primary-soft); color: var(--k-primary); }

.k-rail .vault-security-popover {
	position: fixed;
	top: auto;
	right: auto;
	bottom: var(--k-space-3);
	left: calc(var(--k-rail) + var(--k-space-2));
}

/* Where CSS anchor positioning exists the panel's bottom edge tracks the
 * shield itself, so it stays aligned when the bottom cluster grows. Its inline
 * edge stays the rail's own width: anchoring it to the toggle would put it
 * 4px inside the rail, because the 48px target is centred in the 72px column. */
@supports (anchor-name: --a) {
	.k-rail-security-toggle { anchor-name: --k-rail-security; }

	.k-rail .vault-security-popover {
		position-anchor: --k-rail-security;
		bottom: anchor(bottom);
	}
}

/* ----------------------------- context lane ------------------------------ */
/* Route-owned content; both Vault and Chat take their width from --k-context
 * and never from a per-route value. */

.k-context {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	min-block-size: 0;
	border-inline-end: var(--k-border-width) solid var(--k-border);
	background: var(--k-surface);
}

.k-context-header {
	display: flex;
	align-items: center;
	min-block-size: var(--k-context-header);
	padding: 0 var(--k-space-4);
	font: var(--k-font-context-title);
}

/* One intentional scroll owner per lane. */
.k-context-body {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow: auto;
	padding: 0 var(--k-space-3) var(--k-space-4);
}

/* A route without a lane keeps the shell-owned aside in the document but
 * hidden; nothing below may re-display it. */
.k-context[data-kroemo-context-empty='true'] { display: none !important; }

/* -------------------------------- canvas --------------------------------- */

.k-canvas {
	min-inline-size: 0;
	min-block-size: 0;
	overflow: auto;
	padding: var(--k-space-5) var(--k-gutter);
}

@media (min-width: 1100px) {
	.k-app-shell .page-layout,
	.k-canvas { padding-inline: var(--k-gutter-wide); }
	.k-app-shell .page-layout-wide,
	.k-app-shell .page-layout-chat-room { padding-inline: 0; }
}

/* ------------------------------ mobile bar ------------------------------- */
/* Below the handoff's mobile threshold the same four destinations become a
 * safe-area-aware bottom bar, and the shared context lane stops reserving a
 * stacked row: it becomes a page-local sheet the route reveals over the
 * content cell (Chat by its room view, Vault by a toolbar toggle), so mobile
 * never squeezes two columns beside tiny cards (handoff §7). The named-slot
 * contract is untouched; only the lane's mobile geometry changes here. */

@media (max-width: 768px) {
	.k-app-shell,
	.k-app-shell:has(> .k-context:not([data-kroemo-context-empty='true'])) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.k-app-shell > [data-hm-frame='main'],
	.k-app-shell:has(> .k-context:not([data-kroemo-context-empty='true'])) > [data-hm-frame='main'] {
		grid-column: 1;
		grid-row: 1;
	}

	/* The context lane overlays the content cell as a full-bleed page sheet and
	 * is hidden until the owning route reveals it; Home offers no lane and is
	 * unaffected. */
	.k-context {
		grid-column: 1;
		grid-row: 1;
		z-index: 20;
		display: none;
		border-inline-end: 0;
	}

	.k-app-shell .page-layout { padding-inline: var(--k-gutter-mobile); }

	.k-rail {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		justify-content: space-around;
		align-items: stretch;
		gap: 0;
		padding: var(--k-space-1) var(--k-space-2);
		padding-block-end: calc(var(--k-space-1) + env(safe-area-inset-bottom, 0px));
		border-inline-end: 0;
		border-block-start: var(--k-border-width) solid var(--k-border);
	}

	.k-rail-items {
		flex: 1 1 auto;
		flex-direction: row;
		justify-content: space-around;
	}

	.k-rail-security,
	.k-rail-menu { margin-block-start: 0; align-self: center; }

	/* The bottom cluster stays icon-only here, like the ⋮ it sits beside: the
	   bar already carries four labelled destinations, and a fifth label would
	   crowd them. The accessible name is the toggle's aria-label. */
	.k-rail-security .k-rail-label { display: none; }

	/* The rail is the bottom bar here, so the panel opens above it and takes
	   the gutter width instead of anchoring to the (absent) side column. */
	.k-rail .vault-security-popover {
		top: auto;
		right: auto;
		bottom: calc(var(--kroemo-nav-height, 88px) + var(--k-space-2));
		left: var(--k-gutter-mobile);
		margin-inline-start: 0;
	}

	.k-rail-home,
	.k-rail-target {
		inline-size: auto;
		min-inline-size: var(--k-rail-target);
		block-size: auto;
		min-block-size: var(--k-rail-target);
		padding: var(--k-space-1) var(--k-space-2);
		align-content: center;
	}

	/* Mobile shows the destination labels permanently under the icon. */
	.k-rail-label {
		position: static;
		opacity: 1;
		padding: 0;
		background: transparent;
		color: inherit;
		font: var(--k-font-label);
		letter-spacing: 0;
		text-transform: none;
	}

	.k-rail-menu-list {
		inset-block-end: calc(100% + var(--k-space-2));
		inset-inline-start: auto;
		inset-inline-end: 0;
	}
}
/* 70-home.css — owner: Home route (slice 4).
 * Handoff §3 "Recent-file strip" and §8. Replaces the legacy dashboard card
 * stack (ledger blocks 94, 94c, 95, 96 and rule 97). Every colour, radius and
 * spacing value comes from 00-tokens.css. */

/* UI Consolidation slice 2: one centred column at the toolkit's reading
 * measure, instead of a left-aligned full-bleed canvas. */
.k-home {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-6);
	inline-size: 100%;
	max-inline-size: var(--k-measure-home);
	margin-inline: auto;
}

/* Lane 0 is the only Home state with a single task. Centre that custody task
 * in the shell's available canvas; the canvas, not the viewport, accounts for
 * the desktop rail and mobile bottom bar. */
.page-layout-standard:has(> .k-home[data-kroemo-lane-zero]) {
	min-block-size: 100%;
	display: grid;
	place-items: center;
}

.k-home[data-kroemo-lane-zero] .k-home-custody {
	inline-size: 100%;
	margin-inline: auto;
}

/* ------------------------------- identity -------------------------------- */
/* "Krömo sits beside the frog on the main background" — the frog is the rail's
 * Home target, so the wordmark is the first thing in the canvas. Slice 2 lifts
 * it out of the column flow wherever the centred column leaves a free gutter
 * (see the wordmark block below). */

.k-home-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--k-space-4);
}

.k-home-identity { display: flex; flex-direction: column; gap: var(--k-space-1); min-inline-size: 0; }
.k-home-wordmark { font: var(--k-font-wordmark); color: var(--k-text); }
.k-home-greeting { font: var(--k-font-greeting); color: var(--k-text); margin-block-start: var(--k-space-3); }
.k-home-subtitle { font: var(--k-font-body); color: var(--k-text-muted); }

/* The wordmark belongs to the logo, not to the column. From the width at which
 * the centred column leaves a gutter wide enough for it, it leaves the flow and
 * gets the same inset from the rail as from the top, vertically centred on the
 * frog (rail padding + half the difference between the rail target and the
 * wordmark line box). It never takes pointer events, and below that width it
 * simply stays the column's first line, so it is never clipped and never
 * overlaps rail or column.
 * Ownership: Home, not the shell — every other route fills the canvas edge to
 * edge (Vault and Chat even start their context lane there), so a shell-owned
 * wordmark would sit on top of route content. */
@media (min-width: 1280px) {
	.page-layout-standard:has(> .k-home) { position: relative; }

	.k-home-wordmark {
		position: absolute;
		inset-block-start: calc(var(--k-space-3) + (var(--k-rail-target) - 32px) / 2);
		inset-inline-start: calc(var(--k-space-3) + (var(--k-rail-target) - 32px) / 2);
		pointer-events: none;
	}
}

/* ---------------------------- custody surface ---------------------------- */

.k-home-custody { max-inline-size: 620px; display: flex; flex-direction: column; gap: var(--k-space-3); }
.k-home-custody > div { display: flex; flex-direction: column; gap: var(--k-space-3); }
.k-home-custody .card-action-row { margin-block-start: 0; }

/* ---------------------------- product entries ---------------------------- */
/* One entitled entry per row. The whole row is the link, so no stretched
 * overlay element is needed and nothing nests inside an interactive element. */

.k-product-entries { display: flex; flex-direction: column; gap: var(--k-space-3); }

.k-product-entry {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--k-space-4);
	min-block-size: 104px;
	padding: var(--k-space-4) var(--k-space-5);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	color: var(--k-text);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--k-motion-fast) var(--k-ease),
		background-color var(--k-motion-fast) var(--k-ease);
}

.k-product-entry:hover { border-color: var(--k-primary); background: var(--k-primary-soft); color: var(--k-text); }

.k-product-entry-icon {
	display: grid;
	place-items: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--k-radius-tile);
	background: var(--k-primary-soft);
	color: var(--k-primary);
	font-size: 26px;
}

.k-product-entry-icon svg { inline-size: 28px; block-size: 28px; }

.k-product-entry-text { display: flex; flex-direction: column; gap: var(--k-space-1); min-inline-size: 0; }
.k-product-entry-title { font: var(--k-font-section); color: var(--k-text); }
.k-product-entry-detail { font: var(--k-font-body); color: var(--k-text-muted); }
.k-product-entry-fact { font: var(--k-font-meta); color: var(--k-primary); }

/* Decorative illustration, Home product entries only (handoff §8). */
.k-product-entry-art {
	inline-size: min(30vw, 260px);
	block-size: 88px;
	object-fit: contain;
	object-position: right center;
}

.k-product-entry-chevron { color: var(--k-text-muted); font-size: 18px; }
.k-product-entry-chevron svg { inline-size: 16px; block-size: 16px; }

/* --------------------------- recent-file strip --------------------------- */

.k-recents { display: flex; flex-direction: column; gap: var(--k-space-3); }

.k-recents-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--k-space-3);
}

.k-recents-title { font: var(--k-font-section); color: var(--k-text); }
.k-recents-link { font: var(--k-font-control); color: var(--k-primary); text-decoration: none; white-space: nowrap; }
.k-recents-link:hover { text-decoration: underline; }
.k-recents-empty { font: var(--k-font-body); color: var(--k-text-muted); }

/* Exactly one row, in a single horizontal scroller. The camera action is the
 * last item and never wraps to a second line (handoff §3). The scroller owns
 * the overflow, so a full strip never widens the page. */
.k-recents-strip {
	display: flex;
	gap: var(--k-space-3);
	margin: 0;
	padding: 0 0 var(--k-space-2);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
}

.k-recent-item { flex: 0 0 auto; inline-size: 180px; display: flex; }

/* The capture action carries no metadata line, so the tiles are made equal
 * height by the layout rather than by padding the action with fake copy. */
.k-recent-item > * { block-size: 100%; }
.k-capture-tile { justify-content: flex-start; }

.k-recent-open,
.k-capture-tile {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-2);
	inline-size: 100%;
	padding: var(--k-space-3);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	color: var(--k-text);
	font: var(--k-font-body);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--k-motion-fast) var(--k-ease),
		background-color var(--k-motion-fast) var(--k-ease);
}

.k-recent-open:hover,
.k-capture-tile:hover { border-color: var(--k-primary); background: var(--k-primary-soft); }

.k-recent-preview {
	position: relative;
	display: grid;
	place-items: center;
	block-size: 132px;
	overflow: hidden;
	border-radius: var(--k-radius-tile);
	background: var(--k-canvas);
}

.k-recent-preview > canvas,
.k-recent-preview > img {
	grid-area: 1 / 1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Missing preview → the document's type placeholder, never a broken image. */
.k-recent-preview-fallback { grid-area: 1 / 1; display: grid; place-items: center; color: var(--k-text-muted); }
.k-recent-preview-fallback svg { inline-size: 34px; block-size: 34px; }
.k-recent-preview > canvas:not([data-thumbnail-state="ready"]) { display: none; }
.k-recent-preview > img:not([src]) { display: none; }
.k-recent-preview > canvas[data-thumbnail-state="ready"] ~ .k-recent-preview-fallback,
.k-recent-preview > img[src] ~ .k-recent-preview-fallback { display: none; }

/* Long filenames stay reachable: the accessible name is the full title, the
 * visual line is clamped rather than clipped to an unreadable stub. */
.k-recent-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font: var(--k-font-control);
	color: var(--k-text);
	overflow-wrap: anywhere;
}

.k-recent-meta { font: var(--k-font-meta); color: var(--k-text-muted); font-variant-numeric: tabular-nums; }

.k-capture-tile { color: var(--k-camera-text); }
.k-capture-tile .k-recent-title { color: var(--k-camera-text); }

.k-capture-tile-icon {
	display: grid;
	place-items: center;
	block-size: 132px;
	border-radius: var(--k-radius-tile);
	background: var(--k-camera-soft);
	color: var(--k-camera);
}

.k-capture-tile-icon svg { inline-size: 40px; block-size: 40px; }

/* The camera action is pinned to the scroller's right edge: with the strip
 * bounded at eight documents the row still overflows on a narrow canvas, and
 * the owner must never have to scroll to reach "Dokument aufnehmen"
 * (owner, 2026-09-11). It stays the LAST item in DOM order, hence the last tab
 * stop; the solid box-shadow extends its background over the flex gap so the
 * tiles scroll out of sight underneath it instead of peeking through. */
.k-recents-strip .k-recent-capture {
	position: sticky;
	inset-inline-end: 0;
	background: var(--k-canvas);
	box-shadow: calc(-1 * var(--k-space-3)) 0 0 var(--k-canvas);
}

/* Loading is a skeleton, never an empty history. */
.k-recent-item-skeleton { display: flex; flex-direction: column; gap: var(--k-space-2); padding: var(--k-space-3); }
.k-recent-item-skeleton .k-recent-preview { block-size: 132px; }
.k-recent-item-skeleton .k-recent-title { block-size: 20px; }

@media (max-width: 768px) {
	.k-home { gap: var(--k-space-5); }

	.k-product-entry {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: var(--k-space-3) var(--k-space-4);
		min-block-size: 0;
	}

	.k-product-entry-icon { inline-size: 48px; block-size: 48px; }
	/* The illustration is the first thing to go on a narrow canvas. */
	.k-product-entry-art { display: none; }

	.k-recent-item { inline-size: 150px; }
	.k-recent-preview,
	.k-capture-tile-icon { block-size: 108px; }
}


/* ---------------------------------------------------------------------------
 * Receipt-backed customer composition (index.html only), folded in by UI
 * Consolidation slice 0 from the deleted 90-legacy.css.
 * ------------------------------------------------------------------------- */

/* --------------------- receipt-backed customer composition --------------------- */
.page-layout-standard:has(> .customer-composition) {
  max-width: 1120px;
  padding-inline: clamp(16px, 3.5vw, 40px);
}
.customer-composition {
  display: grid;
  gap: 28px;
  padding: clamp(18px, 4vw, 38px) 0 28px;
}
.customer-composition-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  min-height: 230px;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 28px;
  color: #f8faef;
  background:
    radial-gradient(circle at 82% 12%, rgba(177, 204, 65, .3), transparent 30%),
    linear-gradient(135deg, #1f2919 0%, #344127 58%, #56652f 100%);
  box-shadow: 0 24px 70px -42px rgba(35, 40, 26, .72);
}
.customer-composition-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 250px;
  height: 250px;
  right: -54px;
  bottom: -130px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 48% 52% 62% 38%;
  transform: rotate(18deg);
}
.customer-composition-hero > div { max-width: 690px; }
.customer-composition-hero .eyebrow { color: #dbea9f; }
.customer-composition-hero h1 {
  max-width: 630px;
  margin: 6px 0 12px;
  font: 750 clamp(34px, 6vw, 58px)/.98 ui-serif, Georgia, serif;
  letter-spacing: -.035em;
}
.customer-composition-hero p { max-width: 650px; margin: 0; color: rgba(248, 250, 239, .82); }
.customer-composition-hero .customer-composition-refresh {
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border-color: rgba(255, 255, 255, .4);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.customer-composition-hero .customer-composition-refresh:hover { background: rgba(255, 255, 255, .16); }
.customer-composition-refresh:focus-visible,
.customer-widget a:focus-visible,
.customer-composition-receipt summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.customer-reassurance,
.customer-composed-document { display: grid; gap: 14px; }
.customer-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.customer-section-heading h2 { margin: 2px 0 0; font: 740 clamp(24px, 4vw, 34px)/1.08 ui-serif, Georgia, serif; }
.customer-reassurance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.customer-reassurance-axis {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 14px;
  background: #fbfcf7;
}
.customer-reassurance-axis > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.customer-reassurance-axis strong { display: block; margin-top: 6px; font-size: 18px; line-height: 1.2; }
.customer-reassurance-axis p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.customer-composition-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.customer-widget-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.customer-widget {
  grid-column: span 4;
  min-width: 0;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px -24px rgba(35, 40, 26, .65);
}
.customer-widget h3 { margin: 6px 0 8px; font-size: 21px; line-height: 1.18; }
.customer-widget p { margin: 8px 0; color: var(--muted); font-size: 13px; }
.customer-widget a { color: var(--green-dark); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.customer-widget-foundation {
  grid-column: span 8;
  color: #f8faef;
  border-color: #35422a;
  background: #2c3724;
}
.customer-widget-foundation .eyebrow { color: #dbea9f; }
.customer-widget-foundation p { color: rgba(248, 250, 239, .72); }
.customer-widget-foundation a { color: #dbea9f; }
.customer-widget-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.customer-widget-meta > span:last-child { overflow: hidden; color: var(--muted); font: 11px/1.2 ui-monospace, monospace; text-overflow: ellipsis; }
.customer-widget-value { display: block; margin: 18px 0; font: 760 clamp(25px, 4vw, 38px)/1 ui-serif, Georgia, serif; }
.customer-widget-validity { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .01em; }
.customer-widget-destination {
  position: relative;
  background: linear-gradient(145deg, #fff 0%, var(--green-soft) 100%);
}
.customer-widget-vault { border-color: color-mix(in srgb, var(--accept) 28%, var(--line)); }
.customer-composition-receipt {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafbf7;
}
.customer-composition-receipt summary { min-height: 48px; padding: 13px 16px; cursor: pointer; font-weight: 800; }
.customer-composition-receipt > div { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.customer-composition-receipt p { margin: 10px 0 0; overflow-wrap: anywhere; font-size: 12px; }
.customer-composition-pending { min-height: 220px; display: grid; align-content: center; }

@media (max-width: 820px) {
  .customer-composition-hero { align-items: start; flex-direction: column; min-height: 0; }
  .customer-reassurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-widget, .customer-widget-foundation { grid-column: span 6; }
}

@media (max-width: 560px) {
  .customer-composition { gap: 22px; padding-top: 12px; }
  .customer-composition-hero { padding: 24px 20px; border-radius: 20px; }
  .customer-composition-hero h1 { font-size: 38px; }
  .customer-composition-refresh { width: 100%; }
  .customer-section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .customer-reassurance-grid { grid-template-columns: 1fr; }
  .customer-widget, .customer-widget-foundation { grid-column: 1 / -1; min-height: 0; }
  .customer-widget-grid { gap: 10px; }
}
/* 80-vault.css — owner: the Tresor surface (Vault, Prüfen, Notfallordner and
 * the document workspace the shell modal host renders on every route).
 *
 * UI Consolidation slice 0: this was `src/assets/vault-organizer.css`, linked
 * by vault.html, review.html and haushalt.html only. That is why the Home
 * document modal came up unstyled and why the retained context lane lost its
 * rules mid-navigation: a route <link> enters and leaves with the main frame.
 * The sheet is now a bundle partial, always loaded. The legacy Vault blocks
 * that used to live in 90-legacy.css are prepended below so they keep losing
 * to the redesigned rules that follow, exactly as they did when the route
 * sheet was linked after the bundle. */

/* --- legacy Vault blocks, folded out of the deleted 90-legacy.css --------- */

/* Full page width below the title — scoped to the admin product index
 * (!admin/index.html, .product-index-full) and the vault
 * (body[data-section="vault"]). The title/header keeps the reading-column
 * width so it stays visually as-is and aligned with the advisor header;
 * everything below the header fills the page. Selectors are deliberately
 * narrow so the other page-layout-standard pages are not affected. */
main.page-layout-standard.product-index-full,
body[data-section="vault"] main.page-layout-standard {
  max-width: none;
  margin: 0;
  padding: 8px clamp(20px, 4vw, 40px) 0;
}
main.page-layout-standard.product-index-full > .product-page-header,
body[data-section="vault"] main.page-layout-standard > .product-page-header {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}
body[data-section="vault"] .vault-facts { margin: 16px 0 4px; }

/* unlock, reset and the vault status line */
.vault-facts { display: flex; gap: 16px; color: var(--muted); }
.vault-status { color: var(--green-dark); margin: 6px 0 0; font-size: 13px; }
.vault-status[data-kind="retake"] { color: var(--retake); }
.vault-status[data-kind="accept"] { color: var(--accept); }
[data-vault-unlock-submit] [data-vault-submit-variant="ready"],
[data-vault-unlock-submit]:not(:disabled) [data-vault-submit-variant="preparing"] { display: none; }
[data-vault-unlock-submit]:not(:disabled) [data-vault-submit-variant="ready"] { display: inline; }
.vault-unlock-feedback [data-vault-unlock-feedback-variant] { display: none; }
html:not([data-kroemo-vault-unlock-feedback]) [data-vault-unlock-feedback-variant="idle"],
html[data-kroemo-vault-unlock-feedback="idle"] [data-vault-unlock-feedback-variant="idle"],
html[data-kroemo-vault-unlock-feedback="unlocking"] [data-vault-unlock-feedback-variant="unlocking"],
html[data-kroemo-vault-unlock-feedback="wrong-passphrase"] [data-vault-unlock-feedback-variant="wrong-passphrase"],
html[data-kroemo-vault-unlock-feedback="unlock-error"] [data-vault-unlock-feedback-variant="unlock-error"] { display: block; }
.vault-reset { margin-top: 16px; }
.vault-reset-confirmation,
.vault-reset [data-vault-reset-status] { display: none; }
.vault-reset[data-vault-reset-state="confirm"] .vault-reset-confirmation,
.vault-reset[data-vault-reset-state="blocked"] .vault-reset-confirmation { display: block; }
.vault-reset[data-vault-reset-state="confirm"] > [data-vault-reset-arm],
.vault-reset[data-vault-reset-state="deleting"] > [data-vault-reset-arm],
.vault-reset[data-vault-reset-state="blocked"] > [data-vault-reset-arm],
.vault-reset[data-vault-reset-state="deleted"] > [data-vault-reset-arm],
.vault-reset[data-vault-reset-state="error"] > [data-vault-reset-arm] { display: none; }
.vault-reset[data-vault-reset-state="deleting"] [data-vault-reset-status="deleting"],
.vault-reset[data-vault-reset-state="blocked"] [data-vault-reset-status="blocked"],
.vault-reset[data-vault-reset-state="error"] [data-vault-reset-status="error"] { display: block; }
.vault-reset-confirmation { margin-top: 12px; padding: 14px; border: 1px solid var(--retake); border-radius: 12px; background: #fff8f7; }
.vault-reset-acknowledgement { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; }
.vault-reset-acknowledgement input { margin-top: 3px; }

/* --- custody security panel (lock + biometric management) --------------- */
/* UI Consolidation slice 2 moved the control out of the Home header into the
 * persistent rail, so the toggle and the panel's placement are rail geometry
 * and live in 60-shell.css; only the panel itself is styled here. */
.vault-security-popover {
  display: none; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 14px; width: min(380px, calc(100vw - 24px));
  box-shadow: 0 10px 30px rgba(35, 40, 26, 0.18);
  flex-direction: column; gap: 10px;
}
.vault-security-popover:popover-open,
.vault-security-popover.is-open { display: flex; }
/* Dashboard JS projects typed state; the LZR template owns every affordance
 * and biometric message variant. Keep initial controls hidden until capability
 * checks explicitly reveal them, so no dead fingerprint action flashes. */
.vault-security-popover [data-dashboard-visibility="hidden"],
#vault-biometric-unlock[data-dashboard-visibility="hidden"] { display: none; }
.vault-security-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.vault-security-popover .button-quiet { width: 100%; text-align: center; }
.vault-security-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.vault-security-form input { width: 100%; }
.vault-security-popover .vault-status { margin: 0; }
.vault-selector { display: grid; gap: 12px; }
.vault-selector h3, .vault-selector p { margin: 0; }
.vault-selector form, .vault-selector fieldset { display: grid; gap: 8px; margin: 0; min-width: 0; }
.vault-selector fieldset { padding: 0; border: 0; }
.vault-selector-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.vault-selector-row input { inline-size: 20px; block-size: 20px; }
.vault-selector-row span { display: grid; min-width: 0; }
.vault-selector-row small { color: var(--muted); }
.vault-selector .k-input { width: 100%; font-size: 16px; }
.vault-selector [data-vault-selector-status]:empty { display: none; }
#vault-biometric-error[data-dashboard-message="idle"],
#vault-biometric-status[data-dashboard-message="idle"],
[data-dashboard-message] [data-dashboard-message-variant] { display: none; }
[data-dashboard-message="checking"] [data-dashboard-message-variant="checking"],
[data-dashboard-message="unlock-failed"] [data-dashboard-message-variant="unlock-failed"],
[data-dashboard-message="post-unlock-failed"] [data-dashboard-message-variant="post-unlock-failed"],
[data-dashboard-message="unavailable"] [data-dashboard-message-variant="unavailable"],
[data-dashboard-message="passphrase-custody-only"] [data-dashboard-message-variant="passphrase-custody-only"],
[data-dashboard-message="enrollment-unavailable"] [data-dashboard-message-variant="enrollment-unavailable"],
[data-dashboard-message="confirm-passphrase"] [data-dashboard-message-variant="confirm-passphrase"],
[data-dashboard-message="form-open-failed"] [data-dashboard-message-variant="form-open-failed"],
[data-dashboard-message="passphrase-required"] [data-dashboard-message-variant="passphrase-required"],
[data-dashboard-message="enrolling"] [data-dashboard-message-variant="enrolling"],
[data-dashboard-message="enrolled"] [data-dashboard-message-variant="enrolled"],
[data-dashboard-message="wrong-passphrase"] [data-dashboard-message-variant="wrong-passphrase"],
[data-dashboard-message="enroll-failed"] [data-dashboard-message-variant="enroll-failed"],
[data-dashboard-message="removing"] [data-dashboard-message-variant="removing"],
[data-dashboard-message="removed"] [data-dashboard-message-variant="removed"],
[data-dashboard-message="remove-failed"] [data-dashboard-message-variant="remove-failed"] { display: inline; }
[data-dashboard-biometric-detail]::before { content: attr(data-dashboard-biometric-detail); }

/* ------------------------------ documents ------------------------------ */
/* Slice 5 (ledger block 103): the document grid, cards and preview well moved
 * to vault-organizer.css when Vault adopted the redesigned grid; Home recents
 * use their own .k-recents-strip (slice 4). Only the two rules still referenced
 * off Vault stay here: .doc-thumb-loading and .doc-hash are used by the
 * document-workspace component, which renders in the shell modal host on routes
 * that do not load vault-organizer.css. */
/* .doc-thumb-loading was declared twice (legacy + redesign); the redesigned
 * rule further down owns it now. */
.doc-hash { font-family: monospace; font-size: 11px; color: #8a927a; }

/* ------------------------------- review ------------------------------- */
.review-counts { display: flex; gap: 16px; color: var(--muted); }
.review-empty { border-top: 1px solid var(--line); padding: 24px 0; }
.review-empty p { color: var(--muted); }
.review-layout { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 22px; }
.review-queue { border-right: 1px solid var(--line); padding-right: 14px; }
.review-queue-heading { display: flex; justify-content: space-between; padding: 8px 8px 12px; }
.review-queue-item {
  width: 100%; min-height: 78px; display: grid; gap: 2px; text-align: left;
  background: transparent; color: var(--ink); border-radius: 6px; padding: 10px;
  border: 1px solid transparent;
}
.review-queue-item:hover { background: var(--green-soft); }
.review-queue-item.active { border-color: var(--green-dark); background: var(--green-soft); }
.review-queue-title { font-weight: 700; }
.review-queue-meta { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.review-queue-state { color: var(--green-dark); font-size: 12px; }
.review-detail { min-width: 0; }
.review-document { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: center; }
.review-preview { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--green-soft); overflow: hidden; border-radius: 6px; }
.review-preview img { width: 100%; height: 100%; object-fit: cover; }
.review-preview img:not([src]) { display: none; }
.review-preview img[src] + .doc-thumb-loading { display: none; }
.review-document-meta, .review-guidance { color: var(--muted); margin: 4px 0; }
.review-section { border-top: 1px solid var(--line); padding: 18px 0; margin-top: 18px; }
.review-section-heading, .review-complete { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.review-section-heading h3 { margin: 2px 0 0; }
.review-proposal { margin: 10px 0; }
.review-decision { color: var(--accept); margin: -4px 0 10px; }
.review-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.review-actions button, .review-correction button { padding: 7px 12px; }
.review-fields { border-bottom: 1px solid var(--line); }
.review-field { border-top: 1px solid var(--line); }
.review-field-summary { align-items: center; cursor: pointer; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, auto); min-height: 44px; padding: 7px 2px; }
.review-field-summary::marker { color: var(--muted); }
.review-field-label { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-confidence { background: transparent; color: var(--ink); font-weight: 700; isolation: isolate; max-width: min(42vw, 360px); overflow: hidden; padding: 0 4px; position: relative; text-overflow: ellipsis; white-space: nowrap; }
.review-confidence::before { background: var(--review-marker); bottom: -0.04em; clip-path: polygon(0 18%, 8% 8%, 29% 15%, 53% 5%, 76% 13%, 100% 2%, 98% 88%, 72% 82%, 48% 94%, 21% 85%, 2% 96%); content: ""; left: 0; opacity: 0.62; position: absolute; right: 0; top: -0.04em; transform: rotate(-0.45deg) skewX(-5deg); transform-origin: center; z-index: -1; }
.review-field:nth-child(3n + 2) .review-confidence::before { clip-path: polygon(1% 5%, 17% 14%, 39% 6%, 63% 16%, 84% 7%, 99% 18%, 97% 96%, 79% 84%, 58% 92%, 34% 82%, 0 91%); transform: rotate(0.65deg) skewX(4deg); }
.review-field:nth-child(3n) .review-confidence::before { clip-path: polygon(0 14%, 13% 4%, 31% 12%, 57% 2%, 82% 16%, 100% 9%, 99% 82%, 86% 94%, 61% 85%, 38% 97%, 16% 83%, 2% 90%); transform: rotate(-0.8deg) skewX(2deg); }
.review-confidence-high { --review-marker: #83dda0; }
.review-confidence-medium { --review-marker: #d5e56f; }
.review-confidence-low { --review-marker: #efb36f; }
.review-field-details { border-top: 1px dashed var(--line); padding: 10px 2px 14px; }
.review-field-meta { color: var(--muted); display: flex; font-size: 12px; justify-content: space-between; margin-bottom: 8px; }
.review-field-status { color: var(--muted); font-size: 12px; font-weight: 700; }
.review-field-status-accepted, .review-field-status-corrected { color: var(--accept); }
.review-field-status-rejected { color: var(--retake); }
.review-missing { color: var(--retake) !important; }
.review-final { color: var(--accept); margin: 5px 0; }
.review-validation { margin: 4px 0; color: var(--accept); font-size: 12px; }
.review-validation.invalid { color: var(--retake); font-weight: 700; }
.review-correction { display: flex; gap: 8px; margin-top: 8px; }
.review-correction input { flex: 1; min-width: 0; }
.semantic-preview-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.semantic-backfill[data-hm-write-state="pending"] { opacity: 0.65; }
.semantic-backfill[data-hm-write-state="complete"]::after { content: " · fertig"; }
.semantic-backfill[data-hm-write-state="error"] { border-color: var(--retake); color: var(--retake); }
.review-complete { border-top: 2px solid var(--green); padding-top: 18px; margin-top: 18px; }
.review-complete p { color: var(--muted); margin: 3px 0; }
@media (max-width: 760px) {
  .review-counts { display: none; }
  .review-layout { grid-template-columns: 1fr; }
  .review-queue { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .review-queue-heading { grid-column: 1 / -1; }
  .review-document { grid-template-columns: 88px minmax(0, 1fr); }
  .review-section-heading { align-items: flex-start; }
  .review-field-status { flex: 0 1 44%; overflow-wrap: anywhere; text-align: right; }
  .review-correction { flex-wrap: wrap; }
  .review-correction input { flex-basis: 210px; }
  .review-complete { align-items: flex-start; flex-direction: column; }
}

/* --- end of the folded legacy Vault blocks ------------------------------ */

/* vault-organizer.css — Vault-owned surface: context lane, toolbar, filter
 * panel, scoped result row, document grid and cards, plus the preserved tag,
 * document-menu, workspace and OCR contracts. Route sheet loaded by vault.html
 * and review.html; layered on the canonical --k-* toolkit tokens. Slice 5
 * redesign (2026-09-10). */

.reading-column {
  max-width: 720px;
  margin-inline: auto;
}

/* ------------------------------ context lane ------------------------------ */
/* The Datentresor context lane content, rendered by /context/vault.html into
 * the shell's transparent context frame. */

/* The context body is offered through the shell's named `context` slot; a
 * vault-context frame renders the folder tree inside it. Scope the stacking to
 * the Vault component so the shared lane geometry (60-shell.css) is untouched
 * for other routes. */
vault-context {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-5);
  min-width: 0;
}

/* The mobile sheet toggle and its close control are hidden on desktop, where
 * the context lane is a persistent column (handoff §7). Their mobile-visible
 * rules and the :has() reveal live in the max-width: 768px block below. */
.vault-context-trigger,
.vault-context-close { display: none; }

.context-note {
  color: var(--k-text-muted);
  font: var(--k-font-meta);
  padding: var(--k-space-2) var(--k-space-2) 0;
}

.folder-list {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-1);
}

.folder-btn {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  width: 100%;
  min-height: var(--k-control-height);
  padding: var(--k-space-2) var(--k-space-3);
  border: var(--k-border-width) solid transparent;
  border-radius: var(--k-radius-control);
  background: transparent;
  color: var(--k-text);
  font: var(--k-font-control);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--k-motion-fast) var(--k-ease), color var(--k-motion-fast) var(--k-ease);
}

.folder-btn:hover { background: var(--k-canvas); }

/* Only one context is selected at a time: a pale green row with stronger text
 * and icon (handoff §5). */
.folder-btn.is-active {
  background: var(--k-primary-soft);
  color: var(--k-primary);
  font-weight: 700;
}

.folder-btn.is-pending { opacity: 0.6; }

.folder-label {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-icon { color: var(--k-text-muted); }
.folder-btn.is-active .folder-icon { color: var(--k-primary); }

/* Notfallordner reuses the Vault lane. Cold and warm fills are the shared
 * /context/vault.html, so the active row is painted from shell state rather
 * than a slot attribute that warm navigation would drop. */
.k-app-shell:has(.notfall-page) .folder-notfallordner {
  background: var(--k-primary-soft);
  color: var(--k-primary);
  font-weight: 700;
}
.k-app-shell:has(.notfall-page) .folder-notfallordner .folder-icon { color: var(--k-primary); }
.k-app-shell:has(.notfall-page) .folder-all.is-active {
  background: transparent;
  color: var(--k-text);
  font-weight: 600;
}
.k-app-shell:has(.notfall-page) .folder-all.is-active .folder-icon { color: var(--k-text-muted); }

.folder-count {
  flex: 0 0 auto;
  color: var(--k-text-muted);
  font: var(--k-font-label);
}

.folder-status {
  flex: 0 0 auto;
  color: var(--k-text-muted);
  font: var(--k-font-label);
  white-space: nowrap;
}

.folder-group { display: flex; flex-direction: column; gap: var(--k-space-1); }

.folder-group-title {
  margin: var(--k-space-3) 0 var(--k-space-1);
  padding-inline: var(--k-space-3);
  color: var(--k-text-muted);
  font: var(--k-font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.folder-row { display: flex; align-items: center; gap: var(--k-space-1); }
.folder-row .folder-btn { flex: 1 1 auto; }

.folder-delete {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-control);
  background: var(--k-surface);
  color: var(--k-text-muted);
  cursor: pointer;
}

.folder-delete:hover { border-color: var(--k-danger); color: var(--k-danger); }

.context-section { display: flex; flex-direction: column; gap: var(--k-space-2); }

.context-section-title {
  margin: 0;
  color: var(--k-text-muted);
  font: var(--k-font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.context-empty-note { margin: 0; color: var(--k-text-muted); font: var(--k-font-meta); }

/* "Ansicht speichern" is presentation-only in this wave: visibly unavailable,
 * no write, no success, no persistence (owner ruling). */
.vault-save-view {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  align-self: flex-start;
  min-height: 40px;
  padding: var(--k-space-2) var(--k-space-3);
  border: var(--k-border-width) dashed var(--k-border);
  border-radius: var(--k-radius-control);
  background: transparent;
  color: var(--k-text-muted);
  font: var(--k-font-control);
  cursor: not-allowed;
}

.vault-own-folders .organizer-create { margin-top: var(--k-space-2); }

/* -------------------------------- toolbar --------------------------------- */
/* One responsive toolbar on the canvas: search, Filter, sort, view, add. */

.organizer {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-4);
  min-width: 0;
}

.organizer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-3);
  min-width: 0;
}

.vault-search {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  flex: 1 1 320px;
  min-width: 220px;
  min-height: var(--k-control-height);
  padding: 0 var(--k-space-3);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: 999px;
  background: var(--k-surface);
}

.vault-search:focus-within {
  border-color: var(--k-primary);
  box-shadow: 0 0 0 var(--k-focus-width) var(--k-primary-soft);
}

.vault-search-icon { color: var(--k-text-muted); display: inline-grid; place-items: center; }

.vault-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: var(--k-font-body);
  color: var(--k-text);
}

.vault-search input:focus-visible { outline: none; }

.vault-search-apply,
.vault-search-clear {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--k-text-muted);
  cursor: pointer;
}

.vault-search-apply { background: var(--k-primary-soft); color: var(--k-primary); }
.vault-search-clear:hover { color: var(--k-danger); }

/* Filter and sort share the quiet outlined idiom and open a popover panel. */
.vault-filter, .vault-sort { position: relative; }

.vault-filter-summary,
.vault-sort-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: var(--k-control-height);
  padding: 0 var(--k-space-4);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-control);
  background: var(--k-surface);
  color: var(--k-text);
  font: var(--k-font-control);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.vault-filter-summary::-webkit-details-marker,
.vault-sort-summary::-webkit-details-marker { display: none; }

.vault-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--k-primary);
  color: #fff;
  font: var(--k-font-label);
}

.vault-filter-panel {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  margin-top: var(--k-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--k-space-4);
  width: min(520px, 90vw);
  padding: var(--k-space-4);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-card);
  background: var(--k-surface);
  box-shadow: var(--k-shadow-popover);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-2);
  min-width: 0;
}

.filter-group-label {
  flex: 0 0 100%;
  color: var(--k-text-muted);
  font: var(--k-font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.filter-chip,
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  min-height: 32px;
  padding: var(--k-space-1) var(--k-space-3);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: 999px;
  background: var(--k-surface);
  color: var(--k-text);
  font: var(--k-font-meta);
  cursor: pointer;
  transition: background var(--k-motion-fast) var(--k-ease), border-color var(--k-motion-fast) var(--k-ease);
}

.filter-chip:hover,
.tag-chip:hover { background: var(--k-canvas); }

.filter-chip.is-active {
  background: var(--k-primary);
  border-color: var(--k-primary);
  color: #fff;
}

.filter-chip.is-pending { opacity: 0.6; }

.chip-count { color: var(--k-text-muted); font: var(--k-font-label); }
.filter-chip.is-active .chip-count { color: rgba(255, 255, 255, 0.85); }

.filter-mini {
  min-height: 30px;
  padding: var(--k-space-1) var(--k-space-3);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: 999px;
  background: var(--k-surface);
  color: var(--k-primary);
  font: var(--k-font-label);
  cursor: pointer;
}

.filter-custom {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  flex-wrap: wrap;
}

.filter-custom input[type="date"] {
  min-height: 32px;
  padding: 2px var(--k-space-2);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-control);
  font: var(--k-font-meta);
}

.filter-custom.is-active { outline: var(--k-border-width) solid var(--k-primary); border-radius: var(--k-radius-control); padding: 2px; }

.filter-reset {
  align-self: flex-start;
  min-height: 32px;
  padding: var(--k-space-1) var(--k-space-3);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: 999px;
  background: var(--k-surface);
  color: var(--k-primary);
  font: var(--k-font-meta);
  cursor: pointer;
}

.organizer-create { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); }
.organizer-field-label { flex: 0 0 100%; color: var(--k-text-muted); font: var(--k-font-label); }
.organizer-create-row { display: flex; gap: var(--k-space-2); flex: 1 1 auto; min-width: 0; }
.organizer-create input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: var(--k-space-1) var(--k-space-3);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-control);
  font: var(--k-font-meta);
}
.organizer-create button {
  min-height: 36px;
  padding: var(--k-space-1) var(--k-space-4);
  border: 0;
  border-radius: var(--k-radius-control);
  background: var(--k-primary);
  color: #fff;
  font: var(--k-font-control);
  cursor: pointer;
}

.organizer-empty-note { color: var(--k-text-muted); font: var(--k-font-meta); }

.organizer-demo { border-top: var(--k-border-width) solid var(--k-border); padding-top: var(--k-space-3); }
.organizer-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: 36px;
  padding: var(--k-space-1) var(--k-space-3);
  border: var(--k-border-width) dashed var(--k-border);
  border-radius: var(--k-radius-control);
  background: transparent;
  color: var(--k-text-muted);
  font: var(--k-font-meta);
  cursor: pointer;
}
.organizer-demo-note { margin: 0; color: var(--k-text-muted); font: var(--k-font-label); }
.demo-badge {
  padding: 1px var(--k-space-2);
  border-radius: 999px;
  background: var(--k-warning-dot);
  color: #fff;
  font: var(--k-font-label);
}

.vault-sort-menu {
  position: absolute;
  z-index: 20;
  inset-inline-end: 0;
  margin-top: var(--k-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--k-space-1);
  min-width: 200px;
  padding: var(--k-space-2);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-card);
  background: var(--k-surface);
  box-shadow: var(--k-shadow-popover);
}

.vault-sort-option {
  min-height: 40px;
  padding: var(--k-space-2) var(--k-space-3);
  border: 0;
  border-radius: var(--k-radius-control);
  background: transparent;
  color: var(--k-text);
  font: var(--k-font-control);
  text-align: left;
  cursor: pointer;
}
.vault-sort-option:hover { background: var(--k-canvas); }
.vault-sort-option.is-active { background: var(--k-primary-soft); color: var(--k-primary); }

.vault-view-toggle {
  display: inline-flex;
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-control);
  overflow: hidden;
}
.vault-view-btn {
  display: inline-grid;
  place-items: center;
  width: var(--k-control-height);
  height: var(--k-control-height);
  border: 0;
  background: var(--k-surface);
  color: var(--k-text-muted);
  cursor: pointer;
}
.vault-view-btn + .vault-view-btn { border-inline-start: var(--k-border-width) solid var(--k-border); }
.vault-view-btn.is-active { background: var(--k-primary-soft); color: var(--k-primary); }

.vault-add {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  cursor: pointer;
}
.vault-add-label {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: var(--k-control-height);
  padding: 0 var(--k-space-5);
  border-radius: var(--k-radius-control);
  background: var(--k-primary);
  color: #fff;
  font: var(--k-font-control);
}
.vault-add:hover .vault-add-label { background: color-mix(in srgb, var(--k-primary) 88%, #000); }
.vault-add:focus-within .vault-add-label { outline: var(--k-focus-width) solid var(--k-primary); outline-offset: var(--k-focus-offset); }
[data-kroemo-file-drop="active"] .organizer-toolbar .vault-add-label { outline: var(--k-focus-width) dashed var(--k-primary); }

.vault-intake-status {
  margin: 0;
  padding: var(--k-space-2) var(--k-space-3);
  border-radius: var(--k-radius-control);
  background: color-mix(in srgb, var(--k-danger) 8%, var(--k-surface));
  color: var(--k-danger);
  font: var(--k-font-meta);
  font-weight: 600;
}

/* ---------------------------- scoped result row --------------------------- */

.vault-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-3);
  flex-wrap: wrap;
  border-bottom: var(--k-border-width) solid var(--k-border);
}

.vault-scope-tabs { display: inline-flex; gap: var(--k-space-4); }

.vault-scope-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: 40px;
  padding: 0 0 var(--k-space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--k-text-muted);
  font: var(--k-font-control);
  cursor: pointer;
}
.vault-scope-tab.is-active { color: var(--k-text); border-bottom-color: var(--k-primary); font-weight: 700; }
.vault-scope-count { color: var(--k-text-muted); font: var(--k-font-label); }
.vault-scope-tab.is-active .vault-scope-count { color: var(--k-primary); }
.vault-scope-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-warning-dot); }

/* -------------------------------- document grid --------------------------- */

.vault-empty, .organizer-empty-results {
  padding: var(--k-space-6) var(--k-space-4);
  color: var(--k-text-muted);
  font: var(--k-font-body);
}
.vault-empty a, .organizer-empty-results a { color: var(--k-primary); }
.organizer-empty-results {
  display: grid;
  gap: var(--k-space-3);
  justify-items: start;
  border: var(--k-border-width) dashed var(--k-border);
  border-radius: var(--k-radius-card);
  background: var(--k-surface);
}
.organizer-empty-results button {
  min-height: 40px;
  padding: var(--k-space-2) var(--k-space-4);
  border: 0;
  border-radius: var(--k-radius-control);
  background: var(--k-primary);
  color: #fff;
  font: var(--k-font-control);
  cursor: pointer;
}

/* Regular responsive grid — container width decides column count. */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--k-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-grid-list { grid-template-columns: minmax(0, 1fr); }

.doc-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-card);
  background: var(--k-surface);
  overflow: hidden;
}

.doc-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: 100%;
}

/* Fixed preview well; page images fit with contain, never cropped/stretched. */
.doc-thumb {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 190px;
  background: var(--k-canvas);
  overflow: hidden;
}
.doc-thumb img,
.doc-thumb canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.doc-thumb img:not([src]) { display: none; }
.doc-thumb img[src] + .doc-thumb-loading { display: none; }
.doc-thumb canvas:not([data-thumbnail-state="ready"]) { display: none; }
.doc-thumb-fallback { display: none; color: var(--k-primary); }
.doc-thumb-fallback svg { width: 44px; height: 44px; }
.doc-thumb canvas[data-thumbnail-state="fallback"] ~ .doc-thumb-fallback { display: grid; }
.doc-thumb canvas[data-thumbnail-state="ready"] ~ .doc-thumb-loading,
.doc-thumb canvas[data-thumbnail-state="fallback"] ~ .doc-thumb-loading { display: none; }
.doc-thumb-loading { color: var(--k-text-muted); font: var(--k-font-label); }

.doc-grid-list .doc-card { flex-direction: row; align-items: stretch; }
.doc-grid-list .doc-open { width: auto; }
.doc-grid-list .doc-thumb { block-size: auto; inline-size: 160px; }

.doc-meta {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-1);
  padding: var(--k-space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.doc-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-space-2); }

.doc-title-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--k-text);
  font: var(--k-font-control);
  text-align: left;
  cursor: pointer;
}
.doc-title-btn strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc-title-btn:hover strong,
.doc-title-btn:focus-visible strong { text-decoration: underline; }

.doc-facts { color: var(--k-text-muted); font: var(--k-font-meta); }

/* One dominant processing status: dot + text (handoff §5 status table). */
.doc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  font: var(--k-font-meta);
  font-weight: 600;
  color: var(--k-text-muted);
}
.doc-status-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.doc-status-complete { color: var(--k-primary); }
.doc-status-needs_review { color: var(--k-warning-text); }
.doc-status-needs_review .doc-status-dot { background: var(--k-warning-dot); }
.doc-status-failed { color: var(--k-danger); }
.doc-status-processing, .doc-status-unprocessed, .doc-status-unknown { color: var(--k-text-muted); }

/* Capture quality is independent of workflow review (handoff §5): a subdued
 * secondary line, never merged into the dominant processing status. */
.doc-quality { font: var(--k-font-label); color: var(--k-text-muted); }
.doc-quality-review { color: var(--k-warning-text); }

/* -------------------------------- focus rings ----------------------------- */
.folder-btn:focus-visible,
.filter-chip:focus-visible,
.tag-chip:focus-visible,
.doc-tag:focus-visible,
.doc-tag-option:focus-visible,
.tag-color-btn:focus-visible,
.folder-delete:focus-visible,
.doc-title-btn:focus-visible,
.doc-open:focus-visible,
.vault-scope-tab:focus-visible,
.vault-view-btn:focus-visible,
.vault-sort-option:focus-visible,
.vault-filter-summary:focus-visible,
.vault-sort-summary:focus-visible {
  outline: var(--k-focus-width) solid var(--k-focus-color);
  outline-offset: var(--k-focus-offset);
}

/* -------------------------------- responsive ------------------------------ */
@media (max-width: 720px) {
  .organizer-toolbar { gap: var(--k-space-2); }
  .vault-search { flex: 1 1 100%; }
  .vault-add { margin-inline-start: 0; }
  .vault-add-label { padding-inline: var(--k-space-4); }
  .doc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--k-space-3); }
  .doc-thumb { block-size: 150px; }
}

/* Mobile context sheet (handoff §7), matched to the shell threshold (768px):
 * the "Ordner & Ansichten" toggle appears, and checking it reveals the shared
 * context lane as a full-bleed sheet over the canvas. The lane's default
 * mobile state (display: none) is owned by 60-shell.css. */
@media (max-width: 768px) {
  .vault-context-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    align-self: flex-start;
    min-height: var(--k-control-height);
    margin-block-end: var(--k-space-3);
    padding: 0 var(--k-space-3);
    border: var(--k-border-width) solid var(--k-border);
    border-radius: var(--k-radius-control);
    background: var(--k-surface);
    color: var(--k-text);
    font: var(--k-font-control);
    cursor: pointer;
  }

  .k-app-shell:has(#vault-context-toggle:checked) .k-context { display: flex; }

  /* The checkbox is visually hidden but stays in the tab order; paint the
   * toolkit focus ring on its visible trigger and on the lane's close label. */
  .vault-context-toggle:focus-visible + .vault-context-trigger,
  .k-app-shell:has(#vault-context-toggle:focus-visible) .vault-context-close {
    outline: var(--k-focus-width) solid var(--k-focus-color);
    outline-offset: var(--k-focus-offset);
  }

  .vault-context-close {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    align-self: flex-start;
    min-height: var(--k-control-height);
    padding: 0 var(--k-space-3);
    border: var(--k-border-width) solid var(--k-border);
    border-radius: var(--k-radius-control);
    background: var(--k-surface);
    color: var(--k-text);
    font: var(--k-font-control);
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .folder-btn, .filter-chip, .tag-chip { transition: none; }
}


/* ------------------------------------ tags ------------------------------------ */

.tag-chip {
  --tag-color: var(--green-dark);
}

.tag-chip.is-active {
  background: var(--tag-color);
  border-color: var(--tag-color);
  color: #fff;
}

.tag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tag-color, var(--green-dark));
  flex: 0 0 auto;
}

.tag-chip.is-active .tag-dot {
  background: #fff;
}

.tag-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tag-create input[type="text"] {
  width: 96px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
}

.tag-color-choice {
  display: inline-flex;
  gap: 3px;
}

/* Quiet colour-picker buttons: the create-tag action must not read as a green
 * "confirm" control (green = primary/confirm in this UI). They use the neutral
 * button-quiet idiom — transparent/light surface, muted border — and carry the
 * target tag colour only as a small inner dot. */
/* Scoped under .tag-color-choice so these beat `.organizer-create button`
 * (the green "Speichern" idiom), which also matches these buttons by tag. */
.tag-color-choice .tag-color-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.tag-color-choice .tag-color-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tag-color, var(--green-dark));
}

.tag-color-choice .tag-color-btn:hover {
  border-color: var(--tag-color, var(--green-dark));
  background: rgba(35, 40, 26, 0.04);
}


/* ---------------------- document card: tags & folder assignment ------------ */
.doc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.doc-tag {
  --tag-color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--tag-color);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.doc-tag:hover {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}

.doc-tag:hover .tag-dot {
  background: #fff;
}

.doc-tag-add {
  position: relative;
  font-size: 11px;
}

.doc-tag-add summary {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.doc-tag-add summary::-webkit-details-marker {
  display: none;
}

.doc-tag-add summary:hover {
  border-color: var(--green-dark);
  color: var(--green-dark);
}

.doc-tag-menu {
  position: absolute;
  z-index: 5;
  margin-top: 4px;
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(35, 40, 26, 0.14);
}

.doc-tag-option {
  --tag-color: var(--green-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.doc-tag-option:hover {
  background: var(--green-soft);
}

.doc-notfallordner {
  margin-top: 10px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.doc-notfallordner-selection {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}

.doc-notfallordner-selection label {
  font-size: 12px;
  font-weight: 600;
}

.doc-notfallordner-selection select {
  width: 100%;
  min-width: 0;
}

.doc-notfallordner-selection button {
  justify-self: start;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.doc-notfallordner-status {
  color: var(--muted);
  font-size: 11px;
}

.doc-notfallordner-status {
  margin: 8px 0 0;
}


/* --------------------------------- icons ------------------------------------ */
/* Native graph-owned SVG components replace the former emoji/text icons. */
.doc-delete-icon {
  font-size: 16px;
  line-height: 1;
}

.folder-delete-icon {
  font-size: 13px;
  line-height: 1;
}

.doc-tag-icon {
  font-size: 10px;
}

.doc-tag-add-icon {
  font-size: 10px;
}

/* ------------------------------- document menu -------------------------------- */

.doc-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

.doc-menu-summary {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.doc-menu-summary::-webkit-details-marker {
  display: none;
}

.doc-menu-summary:hover,
.doc-menu-summary:focus-visible {
  border-color: var(--green-dark);
}

.doc-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  min-width: 160px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 28, 18, 0.16);
}

.doc-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.doc-menu-item:hover,
.doc-menu-item:focus-visible {
  background: var(--green-soft);
}

.doc-menu-item-danger {
  color: var(--retake, #8a2d22);
}

.doc-menu-item-icon {
  width: 14px;
  font-size: 12px;
}


.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.workspace-head h2 {
  margin: 2px 0 4px;
  font-size: 20px;
}

.workspace-name-editor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}

.workspace-name-editor label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workspace-name-editor input {
  width: min(360px, 48vw);
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.workspace-facts {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.workspace-close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}

.workspace-close:hover,
.workspace-close:focus-visible {
  border-color: var(--green-dark);
}

.workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  min-height: 0;
  overflow: hidden;
}

.workspace-viewer {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid var(--line);
  background: #f3f3f1;
}

.workspace-toolbar {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 56px);
  padding: 8px;
  border: 1px solid rgba(214, 216, 207, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 12px rgba(23, 28, 18, 0.14);
  backdrop-filter: blur(8px);
}

.workspace-zoom-group,
.workspace-source-group,
.workspace-pages {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.workspace-zoom-group {
  align-items: center;
  min-width: 180px;
}

.workspace-zoom-group label,
.workspace-zoom-group output {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workspace-zoom-group input {
  width: 92px;
}

.workspace-stage {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.workspace-stage.is-panning {
  cursor: grabbing;
}

.workspace-stage:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: -3px;
}

/* zoom scales the surface visually from its top-left corner: the layout box
 * keeps the stage width, so the LZR structure page never reflows wider and the
 * modal tracks never grow; the scaled overflow is what the stage scrolls */
.workspace-surface {
  transform: scale(var(--workspace-zoom, 1));
  transform-origin: 0 0;
}

.workspace-surface[hidden],
.workspace-stage[data-workspace-structure="true"] .workspace-surface[data-workspace-surface="original"] {
  display: none;
}

.workspace-stage[data-workspace-ocr-overlay="false"] .workspace-ocr-overlay,
.workspace-stage[data-workspace-source="original"] [data-workspace-source-surface="ocr-raster"],
.workspace-stage[data-workspace-source="ocr-raster"] [data-workspace-source-surface="original"] {
  display: none;
}

.workspace-page {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: none;
}

.workspace-page-surface {
  position: relative;
  display: block;
  line-height: 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 28, 18, 0.14);
}

.workspace-page canvas {
  display: block;
  width: 100%;
  height: auto;
}

.workspace-page canvas:not([data-workspace-ready]) {
  min-height: 120px;
}

.workspace-page figcaption {
  padding-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.workspace-page .doc-thumb-loading {
  position: absolute;
  top: 12px;
  left: 12px;
}

.workspace-page[data-workspace-media-state="ready"] .doc-thumb-loading,
.workspace-pdf-loader[data-workspace-media-state="ready"] .doc-thumb-loading {
  display: none;
}

.workspace-page[data-workspace-media-state="unavailable"]::after,
.workspace-pdf-loader[data-workspace-media-state="unavailable"]::after {
  content: "Original konnte nicht entschlüsselt werden.";
  display: block;
  padding: 12px;
  color: var(--retake, #8a2d22);
  font-size: 13px;
}

.workspace-ocr-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.workspace-ocr-box {
  fill: rgba(21, 128, 61, 0.14);
  stroke: rgba(21, 128, 61, 0.9);
  stroke-width: 0.002;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}

.workspace-structure-page {
  min-width: 640px;
  padding: 24px;
  line-height: normal;
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 28, 18, 0.14);
}

.workspace-structure-page .semantic-inspected-document {
  max-width: none;
}

.workspace-ocr-box-medium {
  fill: rgba(217, 119, 6, 0.14);
  stroke: rgba(217, 119, 6, 0.9);
}

.workspace-ocr-box-low {
  fill: rgba(190, 40, 30, 0.14);
  stroke: rgba(190, 40, 30, 0.9);
}

.workspace-unsupported {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fff;
}

.workspace-tools {
  min-height: 0;
  padding: 4px 20px 20px;
  overflow: visible;
  overscroll-behavior: contain;
}

.workspace-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.workspace-section h3 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.workspace-section h4 {
  margin: 0 0 6px;
  font-size: 15px;
}

.workspace-section .review-section {
  margin-top: 12px;
  padding: 12px 0 0;
}

.workspace-section .button-link {
  display: inline-block;
  margin-top: 10px;
}

.workspace-processing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
}

.workspace-section.doc-notfallordner {
  padding: 16px 0;
}

.doc-tag-menu-inline {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

.workspace-danger button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.review-route-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .workspace-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(40vh, auto) minmax(0, 1fr);
    overflow: visible;
  }

  .workspace-viewer {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .workspace-stage {
    max-height: 60vh;
  }

  .workspace-close,
  .doc-menu-summary,
  .doc-menu-item,
  .workspace-toolbar .filter-chip {
    min-height: 44px;
  }

  .workspace-name-editor {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .workspace-name-editor input {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .workspace-toolbar {
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
  }

  .doc-menu-summary {
    min-width: 44px;
  }
}
/* 82-capture.css — owner: the Erfassen surface (capture page, the identity
 * convergence scanner, the guided scan product and the capture conductor).
 *
 * UI Consolidation slice 0: this was `src/assets/guided-scan.css`, linked by
 * scan/guided.html only. The legacy capture, scanner, OCR-debug and conductor
 * blocks folded out of the deleted 90-legacy.css are prepended so the guided
 * scan rules keep winning over them, as they did when the sheet was a route
 * <link> after the bundle. */

/* --- legacy capture blocks, folded out of the deleted 90-legacy.css ------- */

/* ------------------------------- capture ------------------------------- */
.capture-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 16px; }
.capture-stage video, .capture-stage img { width: 100%; border-radius: 14px; background: #111; min-height: 240px; }
.capture-controls { display: grid; gap: 10px; align-content: start; }
.capture-metrics { font-family: monospace; font-size: 12px; color: var(--green-dark); }
.capture-help { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .capture-grid { grid-template-columns: 1fr; } }

/* --- identity-convergence scanner (2026-07-13): camera dominates, all
 * controls live inside the feed. --- */
.scan-stage {
  position: relative; width: 100%; min-height: 380px;
  background: #0c0e08; border-radius: 16px; overflow: hidden;
  margin-top: 14px; display: grid; place-items: center;
}
.scan-stage video { display: none; }
.scan-stage #scan-ocr-overlay {
  position: absolute; top: 50%; left: 50%; width: auto; height: auto;
  max-width: 100%; max-height: calc(100dvh - var(--kroemo-nav-height) - 24px);
  transform: translate(-50%, -50%); object-fit: contain;
  pointer-events: none;
}
.scan-stage #scan-ocr-overlay[data-visible="false"] { display: none; }

.scan-meters {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 14px; align-items: center;
  background: rgba(12, 14, 8, 0.55); border-radius: 999px;
  padding: 6px 14px; color: #fff; font-size: 12px; backdrop-filter: blur(4px);
}
.scan-meter { display: flex; align-items: center; gap: 6px; flex: 1; }
.scan-meter > span { min-width: 92px; }
.scan-meter output { font-variant-numeric: tabular-nums; }
.scan-meter progress {
  appearance: none; flex: 1; min-width: 64px; height: 6px; border: 0;
  border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.25);
}
.scan-meter progress::-webkit-progress-bar { background: rgba(255,255,255,0.25); }
.scan-meter progress::-webkit-progress-value { background: var(--scan-quality-color, #c52f2f); }
.scan-meter progress::-moz-progress-bar { background: var(--scan-quality-color, #c52f2f); }
.scan-settle { width: 11px; height: 11px; border-radius: 50%; background: var(--retake); }
.scan-settle[data-ok="true"] { background: var(--green); }
.scan-state {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  max-width: 86%; text-align: center; color: #fff;
  background: rgba(12, 14, 8, 0.6); border-radius: 14px; padding: 10px 18px;
  display: grid; gap: 2px; backdrop-filter: blur(4px);
}
.scan-state strong { font-size: 16px; }
.scan-state span { font-size: 12.5px; opacity: 0.9; }
.scan-state [data-phase-variant], .scan-state [data-step-variant], .scan-state [data-notice-variant],
.scan-state [data-manual-store-variant], .scan-state [data-camera-error-variant] { display: none; }
.scan-state [data-dry-variant] { display: none; }
.scan-stage[data-phase="starting"] .scan-state [data-phase-variant="starting"],
.scan-stage[data-phase="searching"] .scan-state [data-phase-variant="searching"],
.scan-stage[data-phase="locked-view"] .scan-state [data-phase-variant="locked-view"],
.scan-stage[data-phase="converging"] .scan-state [data-phase-variant="converging"],
.scan-stage[data-phase="processing"] .scan-state [data-phase-variant="processing"],
.scan-stage[data-phase="captured"] .scan-state [data-phase-variant="captured"],
.scan-stage[data-phase="known"] .scan-state [data-phase-variant="known"],
.scan-stage[data-phase="stored"] .scan-state [data-phase-variant="stored"],
.scan-stage[data-phase="no-camera"] .scan-state [data-phase-variant="no-camera"] { display: grid; }
.scan-stage[data-step="identity"] .scan-state [data-step-variant="identity"],
.scan-stage[data-step="ocr"] .scan-state [data-step-variant="ocr"],
.scan-stage[data-notice="movement"] .scan-state [data-notice-variant="movement"],
.scan-stage[data-notice="scan-refused"] .scan-state [data-notice-variant="scan-refused"],
.scan-stage[data-notice="acquisition-failed"] .scan-state [data-notice-variant="acquisition-failed"],
.scan-stage[data-notice="torch-unavailable"] .scan-state [data-notice-variant="torch-unavailable"] { display: block; }
.scan-stage[data-camera-error="permission-denied"] .scan-state [data-camera-error-variant="permission-denied"],
.scan-stage[data-camera-error="no-device"] .scan-state [data-camera-error-variant="no-device"],
.scan-stage[data-camera-error="device-busy"] .scan-state [data-camera-error-variant="device-busy"],
.scan-stage[data-camera-error="constraints"] .scan-state [data-camera-error-variant="constraints"],
.scan-stage[data-camera-error="insecure-context"] .scan-state [data-camera-error-variant="insecure-context"],
.scan-stage[data-camera-error="unsupported"] .scan-state [data-camera-error-variant="unsupported"],
.scan-stage[data-camera-error="request-timeout"] .scan-state [data-camera-error-variant="request-timeout"],
.scan-stage[data-camera-error="unknown"] .scan-state [data-camera-error-variant="unknown"] { display: block; }
.scan-stage[data-dry="true"] .scan-state [data-dry-variant="true"],
.scan-stage[data-dry="false"] .scan-state [data-dry-variant="false"] { display: block; }
.scan-stage[data-dry="true"][data-manual-store="ready"] .scan-state [data-manual-store-variant="ready"],
.scan-stage[data-dry="true"][data-manual-store="saving"] .scan-state [data-manual-store-variant="saving"],
.scan-stage[data-dry="true"][data-manual-store="stored"] .scan-state [data-manual-store-variant="stored"],
.scan-stage[data-dry="true"][data-manual-store="failed"] .scan-state [data-manual-store-variant="failed"] { display: block; }
.scan-hints { color: var(--green); }
.scan-stage[data-phase="captured"] .scan-state { background: rgba(125, 148, 39, 0.82); }
.scan-stage[data-phase="stored"] .scan-state { background: rgba(46, 125, 50, 0.82); }
.scan-stage[data-phase="known"] .scan-state { background: rgba(125, 148, 39, 0.82); }
.scan-stage[data-phase="converging"] .scan-state { background: rgba(125, 148, 39, 0.55); }
.scan-store-btn {
  min-height: 40px; margin: 8px auto 0; padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.72); border-radius: 999px;
  background: #fff; color: #1f5e25; font-weight: 700;
}
.scan-store-btn:hover { background: #f4f8ed; }
.scan-store-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.scan-fab {
  position: absolute; left: 14px; bottom: 14px;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: rgba(12, 14, 8, 0.6); color: #fff; backdrop-filter: blur(4px);
}
.scan-retry {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* --- mobile: camera + thin padding + compact nav --- */
@media (max-width: 760px) {
  body[data-section="capture"] main .view-header, body[data-section="capture"] .locked-note { margin: 4px 8px; }
  .scan-stage { margin-top: 0; border-radius: 12px; }
  .scan-store-btn { min-height: 44px; }
  .scan-meters { gap: 8px; padding: 6px 8px; }
  .scan-meter { min-width: 0; }
  .scan-meter > span { min-width: 0; white-space: nowrap; }
  .scan-meter progress { display: none; }
  .scan-meters > div.scan-meter { flex: 0 0 11px; }
  .scan-meters > div.scan-meter > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

@media (max-width: 360px) {
  .scan-meter-label { display: none; }
}


/* scanner v0.3: canvas display, alignment meter, dry-run toggle */
.scan-stage canvas { width: 100%; height: auto; display: block; }
.scan-fab-top { top: 14px; bottom: auto; }
.scan-dry-badge {
  position: absolute; top: 64px; left: 14px;
  background: rgba(192, 57, 43, 0.85); color: #fff; font-size: 12px;
  padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(4px);
}

.scan-bar-btn {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.18); color: #fff;
}
.scan-bar-btn:hover { background: rgba(255,255,255,0.32); }
.scan-dry-badge { top: 56px; left: auto; right: 10px; }
.scan-stage[data-dry="false"] .scan-dry-badge, .scan-stage[data-dry="false"] .scan-pause-dry,
.scan-stage[data-dry="true"] .scan-pause-live { display: none; }
.scan-stage[data-torch-enabled="true"] #scan-torch { background: rgba(177,204,65,0.6); }

/* scanner v0.4: capped height, center directive and top-bar menu */
/* item 5: camera area = full viewport height MINUS the two nav lanes.
 * --kroemo-nav-height is set live by nav.js and, on the capture screen,
 * includes both the master lane and the pinned ingest-queue detail lane,
 * so the feed never scrolls under or overlaps the nav. */
.scan-stage { max-height: calc(100dvh - var(--kroemo-nav-height) - 24px); }
.scan-stage canvas { max-height: calc(100dvh - var(--kroemo-nav-height) - 24px); width: auto; max-width: 100%; margin: 0 auto; }
.scan-directive {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; gap: 8px; text-align: center;
  color: #fff; background: rgba(12, 14, 8, 0.55); border-radius: 18px;
  padding: 18px 26px; backdrop-filter: blur(3px); pointer-events: none;
}
.scan-directive span { font-size: 15px; font-weight: 700; }
.scan-directive [data-directive-variant] > i { font-size: 56px; line-height: 1; }
.scan-bar-btn > i { font-size: 18px; line-height: 1; }
.scan-fab > i { font-size: 22px; line-height: 1; }
.scan-directive [data-directive-variant] { display: none; place-items: center; gap: 8px; }
.scan-stage[data-directive="none"] .scan-directive { display: none; }
.scan-stage[data-directive="place"] [data-directive-variant="place"],
.scan-stage[data-directive="single-document"] [data-directive-variant="single-document"],
.scan-stage[data-directive="closer"] [data-directive-variant="closer"],
.scan-stage[data-directive="center"] [data-directive-variant="center"],
.scan-stage[data-directive="rotate"] [data-directive-variant="rotate"],
.scan-stage[data-directive="light-up"] [data-directive-variant="light-up"],
.scan-stage[data-directive="light-down"] [data-directive-variant="light-down"],
.scan-stage[data-directive="still"] [data-directive-variant="still"],
.scan-stage[data-directive="focus"] [data-directive-variant="focus"] { display: grid; }
.scan-menu-list {
  position: absolute; top: 52px; right: 10px; z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(35,40,26,0.18); overflow: hidden;
}
.scan-stage[data-menu-open="false"] .scan-menu-list { display: none; }
.scan-menu-list button { display: block; width: 100%; border-radius: 0; background: #fff; color: var(--ink); text-align: left; padding: 10px 16px; }
.scan-menu-list button:hover { background: var(--green-soft); }
.scan-result {
  position: fixed; top: 12px; left: 12px; z-index: 40; width: 230px;
  background: rgba(255,255,255,0.96); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; margin: 0;
  box-shadow: 0 6px 20px rgba(35,40,26,0.18);
}
.scan-result canvas { max-width: 100%; width: 100%; }
.scan-result-caption { font-size: 10.5px; }
.scan-result[data-visible="false"], .scan-result [data-result-variant] { display: none; }
.scan-result [data-gates-variant] { display: none; }
.scan-result[data-kind="live"] [data-result-variant="live"],
.scan-result[data-kind="converged"] [data-result-variant="converged"],
.scan-result[data-kind="ocr"] [data-result-variant="ocr"] { display: block; }
.scan-result[data-gates-ok="true"] [data-gates-variant="true"],
.scan-result[data-gates-ok="false"] [data-gates-variant="false"] { display: inline; }
/* scanning-mode receipt: raw → page, and whether the gate let it through */
.scan-result [data-scan-gate-variant] { display: none; }
.scan-result[data-scan-gate-ok="true"] [data-scan-gate-variant="true"],
.scan-result[data-scan-gate-ok="false"] [data-scan-gate-variant="false"] { display: inline; }
.scan-result[data-scan-gate-ok="false"] .scan-scan-caption { color: #c52f2f; }
.scan-result[data-scan-upscaled="true"] .scan-scan-caption { color: #c52f2f; font-weight: 700; }

.scan-meter[data-quality="red"] { --scan-quality-color: #c52f2f; }
.scan-meter[data-quality="warning"] { --scan-quality-color: #d88a16; }
.scan-meter[data-quality="green"] { --scan-quality-color: #32854a; }

/* dev preview 3x */
.scan-result { width: min(690px, 44vw); }

/* OCR debug panels */
.scan-debug-right[data-visible="false"] { display: none; }
.scan-debug-right {
  position: fixed; top: 12px; right: 12px; z-index: 40; width: min(560px, 36vw);
  background: rgba(255,255,255,0.97); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; box-shadow: 0 6px 20px rgba(35,40,26,0.18);
  max-height: calc(100dvh - 24px); overflow: auto;
}
.scan-debug-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.scan-debug-tabs button { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 5px 12px; font-size: 12.5px; }
.scan-debug-right[data-debug-tab="layout"] [data-tab-variant="layout"],
.scan-debug-right[data-debug-tab="raw"] [data-tab-variant="raw"] { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.scan-debug-right[data-debug-tab="layout"] [data-debug-panel="raw"],
.scan-debug-right[data-debug-tab="raw"] [data-debug-panel="layout"] { display: none; }
.scan-layout-emulation {
  position: relative; width: 100%; background: #fff;
  border: 1px solid var(--line); overflow: hidden; container-type: size;
}
.scan-layout-emulation span {
  position: absolute; white-space: nowrap; overflow: visible;
  font-family: Georgia, serif; color: #1a1a1a; line-height: 1.08;
}
.scan-group-outline {
  position: absolute; border: 1px dashed rgba(59, 68, 53, 0.55);
  background: rgba(255, 255, 255, 0.03); pointer-events: none;
}
.scan-group-outline[data-group-kind="label_value"] { border-color: rgba(34, 105, 85, 0.75); }
.scan-group-outline[data-group-kind="table"] { border-color: rgba(75, 89, 138, 0.7); }
.scan-group-outline[data-group-kind="noise"] { border-color: rgba(137, 77, 69, 0.65); }
.scan-raw-text { font-size: 11.5px; white-space: pre-wrap; max-height: 60vh; overflow: auto; background: var(--green-soft); padding: 8px; border-radius: 8px; }
.scan-debug-tools {
  position: fixed; top: auto; bottom: 90px; left: 12px; z-index: 40; width: 250px;
  background: rgba(255,255,255,0.97); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; box-shadow: 0 6px 20px rgba(35,40,26,0.18);
  font-size: 12.5px;
}
.scan-debug-tools button { width: 100%; font-size: 12.5px; padding: 6px 10px; }

/* Capture conductor: a dense procedural surface built on the existing scan stage. */
.conductor [hidden] { display: none !important; }
.conductor { width: min(1180px, 100%); margin: 0 auto; padding: 22px 20px 96px; }
.conductor-header { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.conductor-header h1 { margin: 4px 0 0; font-size: 30px; letter-spacing: 0; }
.conductor-warning { max-width: 520px; margin: 0; padding: 10px 12px; border-left: 4px solid #b54c34; background: #fff2ed; color: #632719; }
.conductor-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid #d9ddd1; }
.conductor-summary > div { min-width: 0; padding: 10px 12px; border-right: 1px solid #d9ddd1; }
.conductor-summary > div:last-child { border-right: 0; }
.conductor-summary span, .conductor-summary strong { display: block; overflow-wrap: anywhere; }
.conductor-summary span { color: #69705f; font-size: 12px; }
.conductor-summary strong { margin-top: 3px; font-size: 14px; }
.conductor > progress { display: block; width: 100%; height: 8px; margin: 0 0 18px; }
.conductor-upload-refusal {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 20rem);
  align-items: baseline;
  gap: 2px 10px;
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1px solid #c97766;
  border-left: 4px solid #a02e21;
  background: #fff2ed;
  color: #632719;
  font-size: 13px;
  line-height: 1.3;
}
.conductor-upload-refusal span { min-width: 0; }
.conductor-upload-refusal code {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conductor-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 24px; align-items: start; }
.conductor-main { min-width: 0; }
.conductor-instruction { margin-bottom: 14px; padding: 16px 0; border-bottom: 1px solid #d9ddd1; }
.conductor-instruction h2, .conductor-verdict h2, .conductor-registration h2 { margin: 4px 0 8px; font-size: 20px; letter-spacing: 0; }
.conductor-instruction > p { margin: 6px 0; }
.conductor-expectation code { overflow-wrap: anywhere; color: #34522d; }
.conductor-field { display: grid; gap: 5px; min-width: 0; color: #4b5145; font-size: 13px; }
.conductor-field select, .conductor-field input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #aeb5a3; border-radius: 4px; background: #fff; color: #171a14; font: inherit; }
.conductor-ruler { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.conductor-camera { position: relative; min-height: min(62vh, 620px); overflow: hidden; background: #151713; }
.conductor-camera #scan-canvas { display: block; width: 100%; height: min(62vh, 620px); object-fit: contain; }
.conductor-camera[data-preview="video"] #scan-video {
  display: block; width: 100%; height: min(62vh, 620px); object-fit: contain;
}
.conductor-camera-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px; padding: 6px 0;
}
.conductor-camera-tools { display: flex; gap: 4px; }
.conductor-camera-tools button, .conductor-actions button { min-width: 38px; min-height: 38px; }
.conductor-camera-tools button { padding: 0; }
.conductor-camera[data-torch-enabled="true"] + .conductor-camera-controls #scan-torch {
  background: var(--green-dark); color: #fff;
}
.conductor-guidance {
  position: absolute; z-index: 3; top: 10px; left: 10px;
  display: grid; grid-template-columns: auto minmax(90px, 150px); gap: 4px 10px;
  max-width: min(72%, 330px); padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.55); background: rgba(20,22,18,.88); color: #fff;
}
.conductor-guidance strong, .conductor-guidance span { grid-column: 1 / -1; }
.conductor-guidance label { font-size: 12px; }
.conductor-guidance meter { width: 100%; }
.conductor-guidance[data-tone="ready"] { border-color: #b1cc41; }
.conductor-guidance[data-tone="warning"] { border-color: #edb44f; }
.conductor-camera-fallback { display: flex; gap: 4px; }
.conductor-camera-fallback button, .conductor-camera-fallback label {
  padding: 6px 8px; border: 1px solid #aeb5a3; background: #fff;
  color: #171a14; cursor: pointer; font-size: 13px;
}
.conductor-mobile-instruction { display: none; }
.conductor-registration { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #d9ddd1; }
.conductor-registration-image { min-width: 0; }
.conductor-registration-zoom {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px; min-height: 38px; margin-bottom: 4px;
}
.conductor-registration-zoom button { width: 38px; height: 38px; padding: 0; }
.conductor-registration-zoom output { min-width: 50px; color: #4b5145; font: 700 13px/1 system-ui, sans-serif; text-align: center; }
.conductor-registration-viewport { max-height: min(70vh, 760px); overflow: auto; overscroll-behavior: contain; border: 1px solid #aeb5a3; background: #30322d; }
.conductor-registration canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.conductor-registration-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.conductor-verdict { margin-top: 14px; padding: 14px 0; border-block: 1px solid #d9ddd1; }
.conductor-gate-bug { padding: 10px; border-left: 4px solid #b54c34; background: #fff2ed; }
.conductor-mismatch-actions { padding: 12px; background: #fff8df; }
.conductor-mismatch-actions p { margin-top: 0; }
.conductor-error { min-height: 1.4em; color: #a02e21; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.conductor-registration-status[data-tone="warning"] { color: #9b4a22; font-weight: 700; }
.conductor-registration-example { margin-top: 10px; }
.conductor-registration-example summary { color: #4b5145; font-size: 13px; cursor: pointer; }
.conductor-registration-example img { display: block; width: 100%; margin-top: 6px; border: 1px solid #aeb5a3; }
.conductor-actions, .conductor-skip { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; margin-top: 8px; }
.conductor-skip .conductor-field { flex: 1 1 260px; }
.conductor-rail { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; border-left: 1px solid #d9ddd1; padding-left: 16px; }
.conductor-rail h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: 0; }
.conductor-rail ol { margin: 0; padding: 0; list-style: none; }
.conductor-rail li { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid #e5e8df; color: #666d5f; font-size: 13px; }
.conductor-rail li[data-state="doing"] { color: #171a14; font-weight: 700; }
.conductor-rail li[data-state="matched"] { color: #2f6b37; }
.conductor-rail li[data-state="mismatch"] { color: #9b4a22; }
.conductor-rail li[data-state="skipped"] { color: #7b5220; text-decoration: line-through; }
.conductor-rail li button { width: 32px; height: 32px; padding: 0; }
.conductor-rail li[data-state="todo"] button, .conductor-rail li[data-state="doing"] button { visibility: hidden; }

@media (max-width: 760px) {
  body:has(#capture-conductor) [data-kroemo-nav] { display: none; }
  body:has(#capture-conductor) .k-app-shell { grid-template-columns: minmax(0, 1fr); }
  .conductor { padding: 8px 6px 40px; }
  .conductor-header { display: block; }
  .conductor-header h1 { font-size: 24px; }
  .conductor-warning { margin-top: 8px; padding: 8px 10px; }
  .conductor-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conductor-summary > div { padding: 6px 8px; border-bottom: 1px solid #d9ddd1; }
  .conductor > progress { margin-bottom: 8px; }
  .conductor-upload-refusal {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    margin-bottom: 6px;
    padding: 6px 8px;
  }
  .conductor-workspace { display: block; }
  .conductor-instruction { margin-bottom: 8px; padding: 8px 0; }
  .conductor-instruction h2, .conductor-verdict h2, .conductor-registration h2 { font-size: 18px; }
  .conductor-ruler { grid-template-columns: 1fr 1fr; }
  .conductor-ruler button { grid-column: 1 / -1; }
  .conductor-registration { display: block; margin-top: 8px; padding-top: 8px; }
  .conductor-registration-viewport { max-height: 68dvh; }
  .conductor-camera, .conductor-camera #scan-canvas, .conductor-camera #scan-video {
    min-height: min(52dvh, 500px);
    height: min(52dvh, 500px);
    max-height: min(52dvh, 500px);
  }
  .conductor-camera-controls { align-items: stretch; padding: 4px 0; }
  .conductor-camera-tools { gap: 4px; }
  .conductor-camera-tools button { min-width: 44px; min-height: 44px; }
  .conductor-guidance { top: 6px; left: 6px; max-width: calc(100% - 210px); padding: 7px 8px; }
  .conductor-camera-fallback { gap: 4px; }
  .conductor-camera-fallback button, .conductor-camera-fallback label { min-height: 44px; padding: 6px 8px; font-size: 13px; }
  .conductor-mobile-instruction {
    display: block;
    margin: 0;
    padding: 8px;
    border: 1px solid #d9ddd1;
    border-top: 0;
    background: #fff;
    color: #171a14;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
  }
  .conductor-actions {
    gap: 4px; margin-top: 4px; padding: 4px 0;
  }
  .conductor-skip { gap: 8px; margin-top: 10px; }
  .conductor-verdict { margin-top: 14px; padding: 14px 4px; }
  .conductor-verdict p { margin: 8px 0; }
  .conductor-mismatch-actions { margin: 12px 0; padding: 14px; }
  .conductor-mismatch-actions button { min-height: 42px; }
  .conductor-header h1 { margin: 0; font-size: 18px; }
  .conductor-summary { font-size: 11px; }
  .conductor-summary span { font-size: 10px; }
  .conductor-summary strong { margin-top: 1px; font-size: 12px; }
  .conductor-summary > div { padding: 4px 6px; }
  .conductor-field { font-size: 12px; }
  .conductor-field select, .conductor-field input { min-height: 36px; padding: 6px 8px; font-size: 16px; }
  .conductor-actions button, .conductor-skip button, .conductor-registration-actions button { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  .conductor-instruction > p { margin: 4px 0; font-size: 14px; }
  .conductor-rail li { padding: 5px 0; font-size: 12px; }
  .conductor-rail li button { width: 28px; height: 28px; }
  .conductor-rail h2 { font-size: 15px; }
  .conductor-rail { position: static; max-height: none; margin-top: 14px; border-left: 0; border-top: 1px solid #d9ddd1; padding: 10px 0 0; }
}

@media (max-width: 1180px) {
  /* The canvas is the work surface: image first, panel text after. */
  .conductor-registration { display: flex; flex-direction: column; }
  .conductor-registration-image { order: -1; margin-bottom: 10px; }
}

/* --- end of the folded legacy capture blocks ---------------------------- */

.guided-scan {
  --guided-ink: #19372e;
  --guided-paper: #f5f0e8;
  --guided-accent: #c3602d;
  display: grid;
  min-height: calc(100dvh - 8rem);
  color: var(--guided-ink);
  background: var(--guided-paper);
}

.guided-scan__header {
  order: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid color-mix(in srgb, var(--guided-ink) 24%, transparent);
}

.guided-scan__header h1,
.guided-scan__header p {
  margin: 0;
}

.guided-scan__progress {
  display: grid;
  justify-items: end;
  gap: .35rem;
  font-variant-numeric: tabular-nums;
}

.guided-scan__progress progress {
  width: min(12rem, 36vw);
  accent-color: var(--guided-accent);
}

.guided-scan__session {
  order: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid color-mix(in srgb, var(--guided-ink) 18%, transparent);
}

.guided-scan__session p {
  flex: 1;
  margin: 0;
}

.guided-scan__session > span {
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.guided-scan__viewport {
  order: 1;
  position: relative;
  min-height: 32rem;
  overflow: hidden;
  background: #151b19;
}

.guided-scan__viewport video,
.guided-scan__viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guided-scan__projection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.guided-scan__projection [data-guided-scan-target-polygon] {
  fill: rgb(0 229 255 / .08);
  stroke: #00e5ff;
  stroke-width: 2;
  stroke-dasharray: 9 7;
  vector-effect: non-scaling-stroke;
}

.guided-scan__projection .guided-scan__page-outline {
  fill: none;
  stroke: #ffe600;
  stroke-width: 2;
  stroke-dasharray: 9 7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.guided-scan__guidance-panel {
  order: 2;
  position: static;
  display: grid;
  justify-items: center;
  gap: .4rem;
  padding: .65rem clamp(1rem, 4vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--guided-ink) 18%, transparent);
  background: var(--guided-paper);
  pointer-events: none;
}

.guided-scan__message {
  max-width: min(34rem, 100%);
  margin: 0;
  padding: .7rem 1rem;
  border-radius: 999px;
  color: #fff;
  background: rgb(18 34 29 / .88);
  text-align: center;
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .25);
}

[data-product-guidance="compact"] .guided-scan__guidance-panel
  > :not(.guided-scan__compact-instruction) {
  display: none !important;
}

.guided-scan__compact-instruction {
  display: grid;
  width: min(30rem, 100%);
  height: 2.5rem;
  box-sizing: border-box;
  place-items: center;
  padding: .35rem .65rem;
  border-radius: .35rem;
  font-size: .9rem;
  line-height: 1.2;
  overflow: hidden;
}

.guided-scan__message > span,
.guided-scan__refusal > span,
.guided-scan__direction > span {
  display: none;
}

[data-state="orienting"] [data-state-view="orienting"],
[data-state="guidance"] [data-state-view="guidance"],
[data-state="dwell"] [data-state-view="dwell"],
[data-state="shutter"] [data-state-view="shutter"],
[data-state="acquiring"] [data-state-view="acquiring"],
[data-state="encrypting"] [data-state-view="encrypting"],
[data-state="acquired"] [data-state-view="acquired"],
[data-state="rejected"] [data-state-view="rejected"],
[data-state="reacquiring"] [data-state-view="reacquiring"],
[data-refusal="transform-unavailable"] [data-refusal-view="transform-unavailable"],
[data-refusal="density-unmeasured"] [data-refusal-view="density-unmeasured"],
[data-refusal="component-height-below-floor"] [data-refusal-view="component-height-below-floor"],
[data-refusal="stroke-width-below-floor"] [data-refusal-view="stroke-width-below-floor"],
[data-refusal="target-moving"] [data-refusal-view="target-moving"],
[data-refusal="underexposed"] [data-refusal-view="underexposed"],
[data-refusal="overexposed"] [data-refusal-view="overexposed"],
[data-refusal="clipping"] [data-refusal-view="clipping"],
[data-refusal="still-registration-refused"] [data-refusal-view="still-registration-refused"],
[data-refusal="target-containment-refused"] [data-refusal-view="target-containment-refused"],
[data-refusal="floor-unavailable"] [data-refusal-view="floor-unavailable"],
[data-refusal="custody-refused"] [data-refusal-view="custody-refused"],
[data-refusal="capture-refused"] [data-refusal-view="capture-refused"],
[data-refusal="lease-lost"] [data-refusal-view="lease-lost"],
[data-refusal="visibility-return"] [data-refusal-view="visibility-return"],
[data-refusal="camera-restart"] [data-refusal-view="camera-restart"],
[data-refusal="worker-restart"] [data-refusal-view="worker-restart"],
[data-refusal="constraint-change"] [data-refusal-view="constraint-change"],
[data-refusal="orientation-change"] [data-refusal-view="orientation-change"] {
  display: inline;
}

[data-direction="hold"] [data-direction-view="hold"],
[data-direction="move-closer"] [data-direction-view="move-closer"],
[data-direction="move-farther"] [data-direction-view="move-farther"],
[data-direction="move-left"] [data-direction-view="move-left"],
[data-direction="move-right"] [data-direction-view="move-right"],
[data-direction="move-up"] [data-direction-view="move-up"],
[data-direction="move-down"] [data-direction-view="move-down"],
[data-direction="rotate-clockwise"] [data-direction-view="rotate-clockwise"],
[data-direction="rotate-counterclockwise"] [data-direction-view="rotate-counterclockwise"],
[data-direction="reacquire"] [data-direction-view="reacquire"],
[data-direction="refused"] [data-direction-view="refused"] {
  display: inline;
}

[data-direction=""] .guided-scan__direction {
  display: none;
}

.guided-scan__document-guidance[hidden] {
  display: none;
}

[data-document-gate="searching"] .guided-scan__guidance-panel
  > .guided-scan__message:not(.guided-scan__document-guidance),
[data-document-gate="searching"] .guided-scan__dwell {
  display: none;
}

[data-document-gate="owner-capture-ready"] .guided-scan__guidance-panel
  > .guided-scan__message:not(.guided-scan__document-guidance),
[data-document-gate="owner-capture-ready"] .guided-scan__dwell {
  display: none;
}

.guided-scan__dwell {
  width: min(18rem, 70vw);
  accent-color: var(--guided-accent);
}

.guided-scan__control-bar {
  order: 3;
  position: static;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  padding: .65rem clamp(1rem, 4vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--guided-ink) 18%, transparent);
}

.guided-scan__review {
  order: 6;
  display: grid;
  grid-template-columns: minmax(12rem, .7fr) minmax(16rem, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--guided-ink) 18%, transparent);
  background: #fff;
}

.guided-scan__review[hidden] {
  display: none;
}

.guided-scan__review p {
  margin: .25rem 0 0;
}

.guided-scan__review label {
  display: grid;
  gap: .35rem;
  font-weight: 700;
}

.guided-scan__review textarea {
  width: 100%;
  min-height: 6rem;
  padding: .65rem;
  border: 1px solid color-mix(in srgb, var(--guided-ink) 35%, transparent);
  border-radius: .5rem;
  color: var(--guided-ink);
  background: var(--guided-paper);
  font: inherit;
  resize: vertical;
}

.guided-scan__button {
  min-width: 44px;
  min-height: 44px;
  padding: .75rem 1rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--guided-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.guided-scan__button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.guided-scan__button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.guided-scan__button--secondary {
  color: var(--guided-ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--guided-ink) 28%, transparent);
}

.guided-scan__minimap {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: min(11rem, 28vw);
  padding: .65rem;
  border-radius: .75rem;
  color: #fff;
  background: rgb(18 34 29 / .88);
}

.guided-scan__minimap,
[data-mode="unqualified"] [data-capture-action] {
  display: none;
}

[data-minimap="true"] .guided-scan__minimap {
  display: block;
}

[data-mode="reduced-manual"] [data-auto-only],
[data-mode="unqualified"] [data-auto-only] {
  display: none;
}

[data-mode="full-guided"][data-owner-capture-ready="false"] [data-manual-only] {
  display: none;
}

body[data-section="capture"]:has([data-guided-scan-stage]) .nav-detail,
body.guided-scan-product-active .nav-detail {
  display: none !important;
}

@media (max-width: 42rem) {
  body:has([data-guided-scan-stage]) [data-kroemo-nav] { display: none; }
  body:has([data-guided-scan-stage]) .k-app-shell { grid-template-columns: minmax(0, 1fr); }
  body:has([data-guided-scan-stage]) .page-layout-wide {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .guided-scan {
    position: relative;
    display: block !important;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #151b19;
  }

  .guided-scan__header {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: 44px;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 6px 8px;
    border: 0;
    color: #fff;
    background: rgb(12 20 17 / .88);
  }

  .guided-scan__header p { display: none; }
  .guided-scan__header h1 { font-size: 16px; }

  .guided-scan__progress {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }

  .guided-scan__progress progress {
    width: 56px;
  }

  .guided-scan__session {
    position: absolute;
    z-index: 4;
    top: 44px;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 48px;
    box-sizing: border-box;
    gap: 8px;
    padding: 4px 8px;
    border: 0;
    color: #fff;
    background: linear-gradient(rgb(12 20 17 / .88), transparent);
  }

  .guided-scan__session p {
    display: none;
  }

  .guided-scan__session > span,
  .guided-scan__session [data-guided-scan-report] { display: none; }

  .guided-scan__review {
    grid-template-columns: 1fr;
  }

  .guided-scan__minimap {
    display: none !important;
  }

  .guided-scan__session .guided-scan__button {
    width: auto;
    min-height: 40px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .guided-scan__control-bar {
    position: absolute !important;
    z-index: 5;
    top: 94px;
    right: 6px;
    left: 6px;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .guided-scan__control-bar .guided-scan__button {
    flex: 0 1 auto;
    min-height: 40px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .guided-scan__viewport {
    position: absolute;
    inset: 44px 0 72px;
    min-height: 0;
  }

  .guided-scan__guidance-panel {
    position: absolute !important;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 0;
    background: rgb(12 20 17 / .9);
  }

  .guided-scan__compact-instruction {
    width: 100%;
    min-height: 56px;
    height: auto;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: none;
    font-size: 14px;
    white-space: normal;
    overflow: visible;
  }

  .guided-scan__review {
    position: absolute;
    z-index: 6;
    inset: 44px 0 0;
    overflow: auto;
  }
}
/* 83-chat.css — owner: the Chat surface (room, composer, context lane content
 * and the model seat panel).
 *
 * UI Consolidation slice 0: this was `src/assets/chat-room.css`, linked by
 * chat/index.html only, plus `chat-model-seat.css`, linked by the
 * <chat-model-seat> component. Both are bundle partials now: a route <link>
 * left with the main frame, which is the restyle flash the owner saw when
 * navigating Vault -> Chat. */

/* chat-room.css — specialist sheet for the Chat room route (/chat/index.html).
 *
 * Slice 6 of the UI renewal moves the room list into the shell context lane,
 * keeps the conversation header and composer stable while the message history
 * owns the scroll, and adds the derived "Dokumente im Chat" list. The surface
 * is expressed on the canonical --k-* tokens; the toolkit owns the shell,
 * context frame, rail and the .k-button/.k-card primitives, so this sheet does
 * not restate them. Chat blue (--k-chat) is the orientation accent; outgoing
 * messages use pale green, incoming a neutral surface (handoff §5–6).
 *
 * Every [data-*-variant] display toggle below is behaviour, not decoration:
 * message states, send/grounding status, connectivity and telemetry are
 * projected as typed attributes the template carries and CSS selects. */

/* ------------------------------- context lane ---------------------------- */
/* Rendered inside the shell's <aside class="k-context"> through the chat-context
 * frame; the toolkit paints the lane frame and header. */
.chat-context-note { margin: var(--k-space-4); color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-context-note a { color: var(--k-chat); }
.chat-context-actions { display: grid; gap: var(--k-space-2); padding: var(--k-space-3) var(--k-space-3) var(--k-space-2); }
.chat-context-search { display: grid; gap: var(--k-space-1); color: var(--k-text-muted); font: var(--k-font-label); }
.chat-context-search input {
	min-height: var(--k-control-height);
	border: var(--k-border-width) solid var(--k-border);
	border-radius: var(--k-radius-control);
	padding: 0 var(--k-space-3);
	color: var(--k-text);
	background: var(--k-surface);
	font: var(--k-font-body);
}
.chat-context-new {
	min-height: var(--k-control-height);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--k-space-2);
	border: var(--k-border-width) solid var(--k-chat);
	border-radius: var(--k-radius-control);
	color: var(--k-chat); background: var(--k-chat-soft);
	font: var(--k-font-control); cursor: pointer;
}
.chat-context-views, .chat-context-rooms { padding: 0 var(--k-space-2); }
.chat-context-rooms ul { list-style: none; display: grid; gap: var(--k-space-1); margin: 0; padding: 0; }
.chat-context-empty { margin: var(--k-space-2) var(--k-space-3); color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-context-room, .chat-context-agents {
	width: 100%;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--k-space-3);
	min-height: var(--k-control-height);
	border: var(--k-border-width) solid transparent; border-radius: var(--k-radius-tile);
	padding: var(--k-space-2);
	color: var(--k-text); background: transparent;
	font: var(--k-font-body); text-align: left; cursor: pointer;
}
.chat-context-room:hover, .chat-context-agents:hover { background: var(--k-chat-soft); }
.chat-context-room[aria-current="page"], .chat-context-agents[aria-current="page"] {
	border-color: var(--k-chat); background: var(--k-chat-soft);
	box-shadow: inset 3px 0 var(--k-chat);
}
.chat-context-trigger, .chat-context-close { display: none; }
.chat-context-room-mark {
	width: 34px; height: 34px; flex: none;
	display: grid; place-items: center; border-radius: 50%;
	color: var(--k-surface); background: var(--k-chat); font-weight: 800;
}
.chat-context-room-copy { min-width: 0; display: grid; gap: 2px; }
.chat-context-room-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-context-room-copy small { overflow: hidden; color: var(--k-text-muted); font: var(--k-font-meta); text-overflow: ellipsis; white-space: nowrap; }
.chat-context-unread {
	min-width: 24px; min-height: 24px; display: grid; place-items: center;
	border-radius: 999px; color: var(--k-surface); background: var(--k-chat); font: var(--k-font-label);
}
.chat-context-archived { margin: var(--k-space-3) var(--k-space-3) var(--k-space-4); padding-top: var(--k-space-3); border-top: var(--k-border-width) solid var(--k-border); }
.chat-context-archived summary { min-height: var(--k-control-height); display: flex; align-items: center; font: var(--k-font-control); cursor: pointer; }
.chat-context-archived ul { list-style: none; display: grid; gap: var(--k-space-2); margin: var(--k-space-2) 0 0; padding: 0; }
.chat-context-archived li { display: grid; gap: 2px; padding: var(--k-space-2); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-tile); }
.chat-context-archived li span { color: var(--k-text-muted); font: var(--k-font-meta); }
[data-chat-room-filter-item][data-chat-room-filter="no-match"] { display: none; }
[data-chat-room-archived-filter-item][data-chat-room-archived-filter="no-match"] { display: none; }

/* --------------------------------- canvas -------------------------------- */
.page-layout-chat-room { height: 100%; min-height: 0; }
.chat-room-page {
	height: 100%; min-height: 0;
	display: flex; flex-direction: column;
	color: var(--k-text); background: var(--k-surface);
}
.chat-room-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }

.chat-room-page button:focus-visible,
.chat-room-page select:focus-visible, .chat-room-page textarea:focus-visible,
.chat-room-page summary:focus-visible, .chat-room-page a:focus-visible,
.chat-context-new:focus-visible, .chat-context-room:focus-visible,
.chat-context-agents:focus-visible,
.chat-context-archived summary:focus-visible, .chat-context-search input:focus-visible {
	outline: var(--k-focus-width) solid var(--k-focus-color);
	outline-offset: var(--k-focus-offset);
}

.chat-room-field { display: block; margin-bottom: var(--k-space-1); color: var(--k-text-muted); font: var(--k-font-label); }
.chat-room-page select, .chat-room-page textarea, .chat-room-page input[type="text"], .chat-room-page input[type="search"] {
	width: 100%; min-height: var(--k-control-height);
	border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-control);
	padding: 9px 11px; color: var(--k-text); background: var(--k-surface); font: var(--k-font-body);
}
.chat-room-page button, .chat-room-primary, .chat-room-secondary {
	min-height: var(--k-control-height);
	border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-control);
	padding: 9px 13px; background: var(--k-surface); color: var(--k-text);
	font: var(--k-font-control); cursor: pointer;
}
.chat-room-page button:disabled { cursor: not-allowed; opacity: .5; }
.chat-room-primary {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--k-surface); background: var(--k-chat); border-color: var(--k-chat); text-decoration: none;
}
.chat-room-state { grid-column: 1 / -1; flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--k-space-3); padding: var(--k-space-6); text-align: center; }
.chat-room-state > fa-icon { font-size: 1.8rem; color: var(--k-chat); }
.chat-room-state h2, .chat-room-state p { margin: 0; }

/* rooms welcome + agents list */
.chat-room-agent-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--k-space-4) var(--k-space-4) var(--k-space-6); }
.chat-room-agent-list header { display: flex; align-items: center; gap: var(--k-space-3); margin-bottom: var(--k-space-3); }
.chat-room-agent-list h2 { margin: 0; font: var(--k-font-section); }
.chat-room-agent-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-space-2); }
.chat-room-agent-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--k-space-3); padding: var(--k-space-3); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); }
.chat-room-agent-card p { margin: 3px 0 0; color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-room-agent-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--k-surface); background: var(--k-chat); font-weight: 900; }
.chat-room-agent-state { color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-room-welcome { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 6vw, 72px); background: var(--k-canvas); }
.chat-room-welcome-copy { width: min(520px, 100%); }
.chat-room-welcome-copy > span { color: var(--k-chat); font: var(--k-font-label); letter-spacing: .08em; text-transform: uppercase; }
.chat-room-welcome-copy h2 { margin: var(--k-space-2) 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.chat-room-welcome-copy p { margin: 0 0 var(--k-space-5); color: var(--k-text-muted); line-height: 1.55; }

/* conversation */
.chat-room-conversation { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex: 1; flex-direction: column; background: var(--k-canvas); }
.chat-room-thread-head { padding: var(--k-space-3) var(--k-space-4) var(--k-space-2); border-bottom: var(--k-border-width) solid var(--k-border); background: var(--k-surface); }
.chat-room-thread-head h2 { margin: 0 6px var(--k-space-2); font: var(--k-font-conversation-title); font-size: 1.1rem; }
.chat-room-thread-actions { display: flex; flex-wrap: wrap; gap: var(--k-space-2); padding: 0 6px var(--k-space-2); }
.chat-room-thread-actions button { min-height: 40px; }
.chat-room-undo { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-3); padding: var(--k-space-2) var(--k-space-4); color: var(--k-warning-text); background: var(--k-camera-soft); border-bottom: var(--k-border-width) solid var(--k-warning-dot); }
.chat-room-undo p { margin: 0; }
.chat-room-roster { padding: var(--k-space-2) var(--k-space-4); border-bottom: var(--k-border-width) solid var(--k-border); background: var(--k-surface); }
.chat-room-roster summary { min-height: var(--k-control-height); display: flex; align-items: center; font: var(--k-font-control); cursor: pointer; }
.chat-room-roster ul { list-style: none; display: grid; gap: 7px; margin: 6px 0; padding: 0; }
.chat-room-roster li, .chat-room-known-agent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--k-space-3); padding: 9px; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-tile); background: var(--k-surface); }
.chat-room-roster li > span { display: grid; gap: 2px; }
.chat-room-roster small, .chat-room-known-agent p { color: var(--k-text-muted); }
.chat-room-roster li[data-membership-state="historical"] { opacity: .72; }
.chat-room-known-agent { grid-template-columns: auto minmax(0, 1fr) auto; margin-top: var(--k-space-2); }
.chat-room-known-agent p { margin: 3px 0 0; font: var(--k-font-meta); }

/* message history — the main scroll owner */
.chat-room-timeline { width: min(780px, 100%); min-height: 12rem; flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--k-space-3); margin: 0 auto; padding: 22px 24px; scroll-padding-block: 16px; }
.chat-room-message { max-width: 86%; align-self: flex-start; padding: 10px 12px; border: var(--k-border-width) solid var(--k-border); border-radius: 14px 14px 14px 4px; color: var(--k-text); background: var(--k-surface); }
.chat-room-message[data-chat-room-route-target="true"] { outline: 3px solid var(--k-chat); outline-offset: 3px; }
.chat-room-message-self { align-self: flex-end; border-radius: 14px 14px 4px; background: var(--k-primary-soft); border-color: var(--k-primary-soft); }
.chat-room-message-system { align-self: center; max-width: 94%; text-align: center; color: var(--k-warning-text); background: var(--k-camera-soft); border-color: var(--k-warning-dot); border-radius: 12px; }
.chat-room-message-author { display: block; margin-bottom: var(--k-space-1); font: var(--k-font-label); }
.chat-room-message-text { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.chat-room-message footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 5px; font: var(--k-font-meta); font-size: .7rem; opacity: .8; }
.chat-room-copy { margin-top: 7px; padding: 7px 9px !important; border-color: currentColor !important; color: inherit !important; background: transparent !important; font-size: .7rem !important; }
.chat-room-message [data-message-state-variant] { display: none; }
.chat-room-message[data-message-state="sending"] [data-message-state-variant="sending"],
.chat-room-message[data-message-state="failed"] [data-message-state-variant="failed"],
.chat-room-message[data-message-state="stored"] [data-message-state-variant="stored"],
.chat-room-message[data-message-state="sent"] [data-message-state-variant="sent"],
.chat-room-message[data-message-state="delivered"] [data-message-state-variant="delivered"],
.chat-room-message[data-message-state="read"] [data-message-state-variant="read"] { display: inline; }
.chat-room-disclosure { margin: 0 0 6px; color: var(--k-text-muted); font: var(--k-font-meta); font-size: .72rem; line-height: 1.35; }
.chat-room-widget-ref { display: grid; gap: 2px; margin-top: var(--k-space-2); padding: var(--k-space-2); border-radius: var(--k-radius-control); color: var(--k-text); background: var(--k-surface); font: var(--k-font-meta); }

/* artifact reference (inline + "Dokumente im Chat") */
.chat-room-artifact { margin-top: var(--k-space-2); color: var(--k-text); }
.chat-room-artifact[hidden] { display: none; }
.chat-room-artifact-open, .chat-room-document-open {
	width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center; gap: var(--k-space-3); min-width: 0; text-align: left;
}
.chat-room-artifact-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--k-chat); background: var(--k-chat-soft); }
.chat-room-artifact-copy { min-width: 0; display: grid; gap: 2px; }
.chat-room-artifact-copy strong, .chat-room-artifact-copy small { overflow-wrap: anywhere; }
.chat-room-artifact-copy small { color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-room-artifact-identity { display: none; }
.chat-room-artifact-state { max-width: 13rem; color: var(--k-chat); font: var(--k-font-meta); font-size: .72rem; text-align: right; }
.chat-room-artifact-state [data-chat-artifact-status-variant] { display: none; }
.chat-room-artifact-open[data-chat-artifact-status="loading"] [data-chat-artifact-status-variant="loading"],
.chat-room-artifact-open[data-chat-artifact-status="available"] [data-chat-artifact-status-variant="available"],
.chat-room-artifact-open[data-chat-artifact-status="successor-available"] [data-chat-artifact-status-variant="successor-available"],
.chat-room-artifact-open[data-chat-artifact-status="unavailable"] [data-chat-artifact-status-variant="unavailable"],
.chat-room-artifact-open[data-chat-artifact-status="unsupported"] [data-chat-artifact-status-variant="unsupported"],
.chat-room-artifact-open[data-chat-artifact-status="error"] [data-chat-artifact-status-variant="error"],
.chat-room-document-open[data-chat-artifact-status="loading"] [data-chat-artifact-status-variant="loading"],
.chat-room-document-open[data-chat-artifact-status="available"] [data-chat-artifact-status-variant="available"],
.chat-room-document-open[data-chat-artifact-status="successor-available"] [data-chat-artifact-status-variant="successor-available"],
.chat-room-document-open[data-chat-artifact-status="unavailable"] [data-chat-artifact-status-variant="unavailable"],
.chat-room-document-open[data-chat-artifact-status="unsupported"] [data-chat-artifact-status-variant="unsupported"],
.chat-room-document-open[data-chat-artifact-status="error"] [data-chat-artifact-status-variant="error"] { display: inline; }
.chat-room-artifact-open[data-chat-artifact-status="unavailable"],
.chat-room-artifact-open[data-chat-artifact-status="unsupported"],
.chat-room-document-open[data-chat-artifact-status="unavailable"],
.chat-room-document-open[data-chat-artifact-status="unsupported"] { color: var(--k-text-muted); }

/* "Dokumente im Chat" — derived from the active room projection */
.chat-room-documents { margin: 0 var(--k-space-4) var(--k-space-4); padding-top: var(--k-space-3); border-top: var(--k-border-width) solid var(--k-border); }
.chat-room-documents-title { margin: 0 0 var(--k-space-2); min-height: var(--k-control-height); display: flex; align-items: center; font: var(--k-font-section); font-size: 1.05rem; cursor: pointer; }
.chat-room-documents-title::-webkit-details-marker { display: none; }
.chat-room-documents-title::marker { content: ''; }
.chat-room-documents-empty { margin: 0; color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-room-documents ul { list-style: none; display: grid; gap: var(--k-space-2); margin: 0; padding: 0; }
.chat-room-document { display: grid; gap: var(--k-space-1); padding: var(--k-space-2); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-tile); background: var(--k-surface); }
.chat-room-document-goto { justify-self: start; min-height: 36px; padding: 4px 8px; color: var(--k-chat); background: transparent; border-color: transparent; font: var(--k-font-meta); }
@media (pointer: coarse) { .chat-room-document-goto { min-height: var(--k-control-height); } }

/* agent seat task / review / workspace (unchanged behaviour) */
.chat-room-agent-task, .chat-room-review, .chat-room-workspace { align-self: stretch; display: grid; gap: 9px; padding: var(--k-space-3); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-surface); }
.chat-room-agent-task header { display: flex; align-items: center; gap: 9px; }
.chat-room-agent-task header p, .chat-room-agent-task h3, .chat-room-task-scope, .chat-room-review h3, .chat-room-review p, .chat-room-workspace p { margin: 0; }
.chat-room-agent-task header p, .chat-room-task-scope { color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-room-review article { display: grid; gap: 7px; padding: 10px; border-radius: var(--k-radius-tile); background: var(--k-chat-soft); }
.chat-room-review article > div, .chat-room-workspace > div { display: flex; flex-wrap: wrap; gap: var(--k-space-2); }
.chat-room-telemetry { min-height: 50px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--k-space-3); padding: var(--k-space-2) 10px; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-tile); cursor: pointer; }
.chat-room-telemetry input { width: 20px; height: 20px; accent-color: var(--k-chat); }
.chat-room-telemetry span:nth-of-type(1) { display: grid; gap: 2px; }
.chat-room-telemetry small { color: var(--k-text-muted); }
.chat-room-telemetry-state { min-width: 34px; color: var(--k-text-muted); font-weight: 800; }
.chat-room-telemetry [data-telemetry-state-variant="on"] { display: none; }
.chat-room-telemetry:has(input:checked) .chat-room-telemetry-state { color: var(--k-chat); }
.chat-room-telemetry:has(input:checked) [data-telemetry-state-variant="off"] { display: none; }
.chat-room-telemetry:has(input:checked) [data-telemetry-state-variant="on"] { display: inline; }
.chat-room-measurement { display: grid; gap: var(--k-space-2); padding-top: var(--k-space-2); border-top: var(--k-border-width) solid var(--k-border); }
.chat-room-measurement p { margin: 0; font: var(--k-font-meta); }
.chat-room-measurement fieldset { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin: 0; padding: var(--k-space-2) 0 0; border: 0; }
.chat-room-measurement legend { width: 100%; margin-bottom: 5px; font-weight: 750; }
.chat-room-inline-status, .chat-room-send-status { min-height: 1.2em; margin: 0; color: var(--k-text-muted); font: var(--k-font-meta); font-size: .78rem; }
.chat-room-inline-status [data-agent-grounding-status-variant], .chat-room-send-status [data-chat-room-status-variant] { display: none; }
.chat-room-page [data-chat-room-connectivity-variant] { display: none; }
.chat-room-page[data-chat-room-connectivity="online"] [data-chat-room-connectivity-variant="online"],
.chat-room-page[data-chat-room-connectivity="offline"] [data-chat-room-connectivity-variant="offline"] { display: inline; }
.chat-room-agent-task[data-agent-grounding-status="selecting"] [data-agent-grounding-status-variant="selecting"],
.chat-room-agent-task[data-agent-grounding-status="region-error"] [data-agent-grounding-status-variant="region-error"],
.chat-room-agent-task[data-agent-grounding-status="running"] [data-agent-grounding-status-variant="running"],
.chat-room-agent-task[data-agent-grounding-status="model-unavailable"] [data-agent-grounding-status-variant="model-unavailable"],
.chat-room-agent-task[data-agent-grounding-status="run-error"] [data-agent-grounding-status-variant="run-error"],
.chat-room-agent-task[data-agent-grounding-status="voting"] [data-agent-grounding-status-variant="voting"],
.chat-room-agent-task[data-agent-grounding-status="vote-error"] [data-agent-grounding-status-variant="vote-error"],
.chat-room-agent-task[data-agent-grounding-status="telemetry-error"] [data-agent-grounding-status-variant="telemetry-error"],
.chat-room-agent-task[data-agent-grounding-status="vote-saved"] [data-agent-grounding-status-variant="vote-saved"],
.chat-room-page[data-chat-room-status="sending"] [data-chat-room-status-variant="sending"],
.chat-room-page[data-chat-room-status="saving-draft"] [data-chat-room-status-variant="saving-draft"],
.chat-room-page[data-chat-room-status="draft-error"] [data-chat-room-status-variant="draft-error"],
.chat-room-page[data-chat-room-status="local-quota-error"] [data-chat-room-status-variant="local-quota-error"],
.chat-room-page[data-chat-room-status="local-corrupt-error"] [data-chat-room-status-variant="local-corrupt-error"],
.chat-room-page[data-chat-room-status="send-error"] [data-chat-room-status-variant="send-error"],
.chat-room-page[data-chat-room-status="remote-refused"] [data-chat-room-status-variant="remote-refused"],
.chat-room-page[data-chat-room-status="sent"] [data-chat-room-status-variant="sent"],
.chat-room-page[data-chat-room-status="stored"] [data-chat-room-status-variant="stored"],
.chat-room-page[data-chat-room-status="stored-draft-error"] [data-chat-room-status-variant="stored-draft-error"],
.chat-room-page[data-chat-room-status="copy-ok"] [data-chat-room-status-variant="copy-ok"],
.chat-room-page[data-chat-room-status="copy-error"] [data-chat-room-status-variant="copy-error"],
.chat-room-page[data-chat-room-status="room-error"] [data-chat-room-status-variant="room-error"],
.chat-room-page[data-chat-room-status="seat-error"] [data-chat-room-status-variant="seat-error"] { display: inline; }

/* composer — the stable bottom region */
.chat-room-composer { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: var(--k-space-2); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: var(--k-border-width) solid var(--k-border); background: var(--k-surface); }
.chat-room-composer textarea { max-height: 112px; resize: vertical; }
.chat-room-composer button { width: 48px; padding: 0; color: var(--k-surface); background: var(--k-chat); border-color: var(--k-chat); }
.chat-room-send-status { padding: 0 14px 5px; }
.chat-room-custody { margin: 0; padding: 7px 14px 0; color: var(--k-text-muted); font: var(--k-font-meta); }
.chat-room-jump { align-self: center; margin: 5px; }
.chat-room-empty { margin: auto; color: var(--k-text-muted); text-align: center; }

/* right-hand conversation info panel (Chatstatus + Dokumente im Chat + model) */
.chat-room-capability-panel { min-width: 0; min-height: 0; overflow-y: auto; border-left: var(--k-border-width) solid var(--k-border); background: var(--k-surface); }
.chat-room-capability-panel > header { padding: 20px 18px 12px; }
.chat-room-capability-panel > header span { color: var(--k-chat); font: var(--k-font-label); letter-spacing: .08em; text-transform: uppercase; }
.chat-room-capability-panel > header h2 { margin: 4px 0 0; font: var(--k-font-section); font-size: 1.15rem; }
.chat-room-capability-summary { display: grid; gap: 7px; margin: 0 14px 16px; padding: 13px; border-radius: var(--k-radius-card); background: var(--k-canvas); }
.chat-room-capability-summary strong, .chat-room-capability-summary p { margin: 0; }
.chat-room-capability-summary p { color: var(--k-text-muted); font: var(--k-font-meta); line-height: 1.45; }
.chat-room-capability-state { display: flex; align-items: center; gap: var(--k-space-2); padding-top: var(--k-space-2); color: var(--k-text-muted); font: var(--k-font-meta); font-size: .72rem; }
.chat-room-capability-state i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--k-chat); box-shadow: 0 0 0 4px var(--k-chat-soft); }
.chat-room-model-settings { padding: var(--k-space-2) var(--k-space-4); border-top: var(--k-border-width) solid var(--k-border); background: var(--k-surface); }
.chat-room-model-settings > summary { min-height: var(--k-control-height); display: flex; align-items: center; font: var(--k-font-control); cursor: pointer; }

/* create/rename form — route-owned content of the shell modal host (slice 6) */
.chat-room-modal-form { display: grid; gap: var(--k-space-4); padding: var(--k-space-5); }
.chat-room-modal-form h2 { margin: 0; font: var(--k-font-section); }
.chat-room-modal-form label { display: grid; gap: 6px; font: var(--k-font-control); }
.chat-room-modal-form input { width: 100%; min-height: var(--k-control-height); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-control); padding: 0 11px; color: var(--k-text); background: var(--k-surface); font: var(--k-font-body); }
.chat-room-modal-form > div { display: flex; justify-content: flex-end; gap: var(--k-space-2); }
.chat-room-dialog-error { display: none; margin: 0; color: var(--k-danger); }
.chat-room-modal-form[data-chat-room-dialog-status="error"] .chat-room-dialog-error { display: block; }

/* artifact preview dialog — chat authors this host (see report: not converged) */
.chat-artifact-dialog {
	width: min(920px, calc(100vw - 32px)); max-width: none; height: min(780px, calc(100dvh - 32px)); max-height: none;
	margin: auto; padding: 0; border: var(--k-border-width) solid var(--k-border); border-radius: 16px; color: var(--k-text); background: var(--k-surface);
}
.chat-artifact-dialog::backdrop { background: rgba(18, 28, 20, .62); }
.chat-artifact-dialog-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-artifact-dialog-shell > header { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-4); padding: 14px 16px; border-bottom: var(--k-border-width) solid var(--k-border); }
.chat-artifact-dialog-shell h2, .chat-artifact-dialog-eyebrow { margin: 0; }
.chat-artifact-dialog-eyebrow { color: var(--k-text-muted); font: var(--k-font-label); text-transform: uppercase; letter-spacing: .04em; }
.chat-artifact-dialog-shell h2 { font: var(--k-font-section); font-size: 1.1rem; }
.chat-artifact-dialog-shell [data-chat-artifact-kind-title] { display: none; }
.chat-artifact-dialog[data-chat-artifact-kind="source_document"] [data-chat-artifact-kind-title="source_document"],
.chat-artifact-dialog[data-chat-artifact-kind="derived-raster"] [data-chat-artifact-kind-title="derived-raster"],
.chat-artifact-dialog[data-chat-artifact-kind="semantic-document"] [data-chat-artifact-kind-title="semantic-document"],
.chat-artifact-dialog[data-chat-artifact-kind="unknown"] [data-chat-artifact-kind-title="unknown"] { display: inline; }
.chat-artifact-dialog button { min-height: var(--k-control-height); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-control); padding: 9px 13px; color: var(--k-text); background: var(--k-surface); font: var(--k-font-control); cursor: pointer; }
.chat-artifact-dialog-close { width: var(--k-control-height); padding: 0; }
.chat-artifact-dialog button:focus-visible { outline: var(--k-focus-width) solid var(--k-focus-color); outline-offset: var(--k-focus-offset); }
.chat-artifact-dialog-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.chat-artifact-dialog-state > div, .chat-artifact-dialog-preview { display: none; }
.chat-artifact-dialog[data-chat-artifact-status="loading"] [data-chat-artifact-dialog-state="loading"],
.chat-artifact-dialog[data-chat-artifact-status="unavailable"] [data-chat-artifact-dialog-state="unavailable"],
.chat-artifact-dialog[data-chat-artifact-status="unsupported"] [data-chat-artifact-dialog-state="unsupported"],
.chat-artifact-dialog[data-chat-artifact-status="error"] [data-chat-artifact-dialog-state="error"] { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: var(--k-space-2); text-align: center; }
.chat-artifact-dialog[data-chat-artifact-status="available"] .chat-artifact-dialog-preview { display: block; }
.chat-artifact-dialog-state h3, .chat-artifact-dialog-state p { margin: 0; }
.chat-artifact-dialog-spinner { width: 28px; height: 28px; border: 3px solid var(--k-border); border-top-color: var(--k-chat); border-radius: 50%; animation: chat-artifact-spin .8s linear infinite; }
.chat-artifact-dialog-preview img, .chat-artifact-dialog-preview pre { display: none; }
.chat-artifact-dialog[data-chat-artifact-renderer="image"] [data-chat-artifact-image] { display: block; max-width: 100%; max-height: calc(100dvh - 180px); margin: auto; object-fit: contain; }
.chat-artifact-dialog[data-chat-artifact-renderer="source-text"] [data-chat-artifact-source-text],
.chat-artifact-dialog[data-chat-artifact-renderer="semantic-text"] [data-chat-artifact-semantic-text] { display: block; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.55; }
.chat-artifact-dialog-shell > footer { display: flex; justify-content: flex-end; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: var(--k-border-width) solid var(--k-border); }
@keyframes chat-artifact-spin { to { transform: rotate(360deg); } }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 999px) {
	.chat-room-layout { display: flex; flex-direction: column; }
	.chat-room-welcome, .chat-room-agent-list, .chat-room-conversation { min-height: 0; flex: 1; }
	.chat-room-capability-panel { max-height: 128px; flex: none; overflow: hidden; border-left: 0; border-top: var(--k-border-width) solid var(--k-border); }
	/* The info panel is a bottom sheet: opening either the derived documents or
	 * the model disclosure expands it to a scrollable height so "Dokumente im
	 * Chat" stays reachable on narrow screens (handoff §7) instead of hidden. */
	.chat-room-capability-panel:has(.chat-room-model-settings[open]),
	.chat-room-capability-panel:has(.chat-room-documents[open]) { height: 45dvh; max-height: 45dvh; overflow-y: auto; }
	.chat-room-capability-panel .chat-room-model-settings[open] { max-height: none; overflow: visible; }
	.chat-room-capability-panel > header { display: none; }
	.chat-room-capability-summary { display: flex; align-items: center; gap: var(--k-space-3); margin: 0; padding: var(--k-space-2) var(--k-space-4); border-radius: 0; }
	.chat-room-capability-summary > p { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
	.chat-room-documents { margin: 0; padding: var(--k-space-2) var(--k-space-4); border-top: var(--k-border-width) solid var(--k-border); }
	.chat-room-documents:not([open]) { border-top: 0; }
	.chat-room-capability-state { padding-top: 0; white-space: nowrap; }
	.chat-room-model-settings { border-top: 0; }
}

/* Mobile (handoff §7): rooms/loading/locked auto-reveal the named context
 * lane. Thread and agents keep the canvas and reveal the same lane through
 * #chat-context-toggle without writing chat.room.show-rooms. */
@media (max-width: 768px) {
	.k-app-shell:has([data-chat-room-view='rooms']) .k-context,
	.k-app-shell:has([data-chat-room-view='loading']) .k-context,
	.k-app-shell:has([data-chat-room-view='locked']) .k-context { display: flex; }
	.k-app-shell:has(#chat-context-toggle:checked) .k-context { display: flex; }

	.chat-context-trigger {
		display: inline-flex;
		align-items: center;
		gap: var(--k-space-2);
		align-self: flex-start;
		min-height: var(--k-control-height);
		margin-block-end: var(--k-space-3);
		padding: 0 var(--k-space-3);
		border: var(--k-border-width) solid var(--k-border);
		border-radius: var(--k-radius-control);
		background: var(--k-surface);
		color: var(--k-text);
		font: var(--k-font-control);
		cursor: pointer;
	}

	.k-app-shell:has(#chat-context-toggle:focus-visible) .chat-context-trigger,
	.k-app-shell:has(#chat-context-toggle:focus-visible) .chat-context-close {
		outline: var(--k-focus-width) solid var(--k-focus-color);
		outline-offset: var(--k-focus-offset);
	}

	.chat-context-close {
		display: inline-flex;
		align-items: center;
		gap: var(--k-space-1);
		align-self: flex-start;
		min-height: var(--k-control-height);
		padding: 0 var(--k-space-3);
		border: var(--k-border-width) solid var(--k-border);
		border-radius: var(--k-radius-control);
		background: var(--k-surface);
		color: var(--k-text);
		font: var(--k-font-control);
		cursor: pointer;
	}

	.chat-room-thread-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; }
	.chat-room-thread-head h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 640px) {
	.chat-room-timeline { min-height: 0; padding-inline: 10px; }
	.chat-room-message { max-width: 92%; }
	.chat-room-known-agent { grid-template-columns: auto minmax(0, 1fr); }
	.chat-room-known-agent > button, .chat-room-known-agent > .chat-room-agent-state { grid-column: 1 / -1; }
	.chat-room-thread-actions button, .chat-room-roster button { min-height: var(--k-control-height); }
	.chat-room-artifact-open, .chat-room-document-open { grid-template-columns: auto minmax(0, 1fr); }
	.chat-room-artifact-state { grid-column: 2; max-width: none; text-align: left; }
	.chat-artifact-dialog { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
	.chat-room-capability-summary { min-height: 66px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding-block: 6px; }
	.chat-room-capability-summary > p { grid-column: 1; display: block; }
	.chat-room-capability-state:first-of-type { display: none; }
	.chat-room-capability-state:last-of-type { grid-column: 2; grid-row: 1 / 3; align-self: center; }
	.chat-room-capability-summary > strong { min-width: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
	.chat-room-welcome { padding: 24px 18px; }
	.chat-room-thread-actions { grid-column: 1 / -1; padding: 0; flex-wrap: nowrap; gap: 4px; }
	.chat-room-thread-actions button { padding: 8px 10px; font-size: .8rem; }
}

.chat-room-agent-list { min-height: 0; overflow-y: auto; }
.chat-room-thread-head, .chat-room-roster, .chat-room-model-settings { flex-shrink: 0; }
.chat-room-roster, .chat-room-model-settings[open] { max-height: 45%; overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
	.chat-room-page * { scroll-behavior: auto; }
	.chat-artifact-dialog-spinner { animation: none; }
}

@media (forced-colors: active) {
	.chat-room-artifact-open, .chat-room-document-open, .chat-artifact-dialog, .chat-artifact-dialog button { border-color: currentColor; }
	.chat-room-artifact-icon { forced-color-adjust: none; color: ButtonText; background: ButtonFace; }
}

/* --------------------------------------------------------------------------
 * chat-model-seat.css, folded in by UI Consolidation slice 0.
 * ----------------------------------------------------------------------- */

.chat-model-seat {
  --model-seat-border: color-mix(in srgb, currentColor 16%, transparent);
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--model-seat-border);
  border-radius: 1rem;
  background: var(--k-surface);
  color: var(--k-text);
}

.chat-model-seat__header,
.chat-model-seat__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.chat-model-seat h2,
.chat-model-seat h3,
.chat-model-seat p { margin: 0; }

.chat-model-seat__eyebrow,
.chat-model-seat__badge {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-model-seat__badge,
.chat-model-seat__privacy > span {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--k-chat-soft);
}

.chat-model-seat__privacy,
.chat-model-seat__state,
.chat-model-seat__installation {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem;
  border-radius: 0.75rem;
  background: var(--k-chat-soft);
}

.chat-model-seat fieldset {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.chat-model-seat legend { margin-bottom: 0.65rem; font-weight: 700; }

.chat-model-seat__variant {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem;
  border: 1px solid var(--model-seat-border);
  border-radius: 0.65rem;
  cursor: pointer;
}

.chat-model-seat__variant:has(input:checked) { border-color: var(--k-chat); box-shadow: 0 0 0 2px var(--k-chat-soft); }
.chat-model-seat__variant:has(input:disabled) { cursor: not-allowed; opacity: 0.65; }
.chat-model-seat__variant input { inline-size: 1.2rem; block-size: 1.2rem; }
.chat-model-seat__variant span { display: grid; gap: 0.15rem; }
.chat-model-seat__variant small { font-size: 0.875rem; }

.chat-model-seat button {
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: var(--k-border-width) solid var(--k-chat);
  border-radius: 0.65rem;
  background: var(--k-chat);
  color: var(--k-surface);
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}

.chat-model-seat button:disabled { cursor: not-allowed; opacity: 0.65; }
.chat-model-seat[data-model-action-status="pending"] button:disabled { cursor: wait; }
.chat-model-seat__secondary { background: transparent !important; color: inherit !important; }
.chat-model-seat__danger { border-color: var(--k-danger) !important; background: var(--k-danger) !important; }
.chat-model-seat button:focus-visible,
.chat-model-seat input:focus-visible { outline: var(--k-focus-width) solid var(--k-focus-color); outline-offset: var(--k-focus-offset); }

.chat-model-seat progress { inline-size: 100%; block-size: 0.8rem; accent-color: var(--k-chat); }
.chat-model-seat__live-progress [data-model-progress-group] { display: none; }
.chat-model-seat[data-model-progress-kind="download"] [data-model-progress-group="download"],
.chat-model-seat[data-model-progress-kind="verification"] [data-model-progress-group="verification"],
.chat-model-seat[data-model-progress-kind="engine"] [data-model-progress-group="engine"] { display: block; }
.chat-model-seat dl { margin: 0; }
.chat-model-seat dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; }
.chat-model-seat dt { font-weight: 650; }
.chat-model-seat dd { margin: 0; overflow-wrap: anywhere; text-align: end; }
.chat-model-seat__action-error { display: none; color: var(--k-danger); font-weight: 650; }
.chat-model-seat[data-model-action-status="error"] .chat-model-seat__action-error { display: block; }
.chat-model-seat__diagnostic { border-top: 1px solid var(--model-seat-border); padding-top: 1rem; }
.chat-model-seat__diagnostic summary { min-height: 44px; font-weight: 700; cursor: pointer; }
.chat-model-seat__diagnostic-body { display: grid; gap: 0.75rem; padding-top: 0.75rem; }
.chat-model-seat__diagnostic form { display: grid; gap: 0.65rem; }
.chat-model-seat__diagnostic textarea { inline-size: 100%; box-sizing: border-box; padding: 0.65rem; font: 0.8rem/1.45 ui-monospace, monospace; }

.chat-model-seat__sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 36rem) {
  .chat-model-seat button,
  .chat-model-seat form { inline-size: 100%; }
  .chat-model-seat button { min-height: 44px; }
  .chat-model-seat input,
  .chat-model-seat select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-model-seat *,
  .chat-model-seat *::before,
  .chat-model-seat *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* 85-onboarding.css — owner: the onboarding, device-add and device management
 * surfaces (onboarding/join.html, onboarding/household.html, device/add.html,
 * device/index.html and the device-add modal opened from the rail's ⋮ menu).
 *
 * UI Consolidation slice 0: this was `src/assets/onboarding.css`, linked by
 * three pages and one component. `household-seeding.css` and the legacy
 * device-add / device-management blocks from the deleted 90-legacy.css are
 * folded in below. */

/* Admin / device onboarding — design: meta/design/admin-onboarding.png */

:root {
  --onb-bg: #f4f7ef;
  --onb-bg-deep: #eef4e6;
  --onb-green: #5a8f2f;
  --onb-green-strong: #6b8e23;
  --onb-green-soft: #e8f2dc;
  --onb-green-ring: #6aa53a;
  --onb-text: #1a1f1c;
  --onb-muted: #5c6560;
  --onb-card: #ffffff;
  --onb-border-soft: #e2e8dc;
  --onb-inactive: #9aa39a;
}

body.onboarding-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--onb-bg);
  color: var(--onb-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 2.5rem) 1rem;
  box-sizing: border-box;
}

.onboarding-brand {
  position: fixed;
  top: clamp(1rem, 3vw, 1.9rem);
  left: clamp(1rem, 3vw, 2rem);
  width: clamp(4rem, 8vw, 5rem);
  height: clamp(4rem, 8vw, 5rem);
  z-index: 2;
  pointer-events: none;
}

.onboarding-shell {
  width: min(100%, 34rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

.onboarding-hero {
  text-align: center;
  max-width: 28rem;
}

.onboarding-hero h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--onb-text);
}

.onboarding-hero__sub {
  margin: 0.65rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--onb-muted);
}

/* Step tabs: 1 Vorbereiten · 2 Sicherung · 3 Verbinden */
.onboarding-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.onboarding-steps__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border: 1.5px solid var(--onb-border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--onb-inactive);
  font-size: 0.92rem;
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* short connector dash sitting in the gap before steps 2 and 3 */
.onboarding-steps__item + .onboarding-steps__item::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 1rem;
  height: 1.5px;
  margin-right: 0.25rem;
  transform: translateY(-50%);
  background: var(--onb-border-soft);
}

.onboarding-steps__num {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #eef1ea;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.onboarding-steps__item.is-active,
.onboarding-steps__item[aria-current="step"] {
  border-color: var(--onb-green-ring);
  background: #fff;
  color: var(--onb-green);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(106, 165, 58, 0.12);
}

.onboarding-steps__item.is-active .onboarding-steps__num,
.onboarding-steps__item[aria-current="step"] .onboarding-steps__num {
  background: var(--onb-green);
  color: #fff;
}

.onboarding-steps__item.is-complete {
  border-color: var(--onb-green-soft);
  color: var(--onb-green-strong);
}

.onboarding-steps__item.is-complete .onboarding-steps__num {
  background: var(--onb-green-soft);
  color: var(--onb-green-strong);
}

/* Card */
.onboarding-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: clamp(1.75rem, 4vw, 2.35rem) clamp(1.35rem, 4vw, 2rem);
  border: 1px solid rgba(226, 232, 220, 0.95);
  border-radius: 1.25rem;
  background: var(--onb-card);
  box-shadow:
    0 1px 2px rgba(26, 31, 28, 0.04),
    0 18px 40px rgba(26, 31, 28, 0.06);
}

.onboarding-card[hidden] {
  display: none !important;
}

/* Onboarding ceremony: LZR owns every panel and localized copy branch. */
[data-onboarding-root] > [data-onboarding-step],
[data-onboarding-root] [data-invite-chip],
[data-onboarding-root] [data-invite-error],
[data-onboarding-root] [data-invite-error-variant],
[data-onboarding-root] [data-recovery-camera],
[data-onboarding-root] [data-onboarding-complete-link],
[data-onboarding-root] [data-onboarding-status-variant] {
  display: none;
}

[data-onboarding-root][data-onboarding-step="prepare"] > [data-onboarding-step="prepare"],
[data-onboarding-root][data-onboarding-step="recovery"] > [data-onboarding-step="recovery"],
[data-onboarding-root][data-onboarding-step="join"] > [data-onboarding-step="join"],
[data-onboarding-root][data-onboarding-step="complete"] > [data-onboarding-step="complete"] {
  display: flex;
}

[data-onboarding-root][data-invite-state="checked"] [data-invite-chip],
[data-onboarding-root][data-invite-state="error"] [data-invite-error] {
  display: inline-flex;
}

[data-onboarding-root][data-invite-error="invitation_link_refused"] [data-invite-error-variant="invitation_link_refused"],
[data-onboarding-root][data-invite-error="invitation_expired_refused"] [data-invite-error-variant="invitation_expired_refused"],
[data-onboarding-root][data-invite-error="invitation_reused_refused"] [data-invite-error-variant="invitation_reused_refused"],
[data-onboarding-root][data-invite-error="onboarding_failed"] [data-invite-error-variant="onboarding_failed"],
[data-onboarding-root][data-completion-destination="admin"] [data-onboarding-complete-link="admin"],
[data-onboarding-root][data-completion-destination="customer"] [data-onboarding-complete-link="customer"],
[data-onboarding-root][data-completion-destination="advisor"] [data-onboarding-complete-link="advisor"] {
  display: inline-flex;
}

[data-onboarding-root][data-recovery-camera-state="open"] [data-recovery-camera] {
  display: grid;
}

[data-onboarding-root][data-recovery-camera-state="closed"] [data-recovery-camera] {
  display: none;
}

[data-onboarding-root][data-onboarding-step="recovery"] [data-step-indicator="prepare"],
[data-onboarding-root][data-onboarding-step="join"] [data-step-indicator="prepare"],
[data-onboarding-root][data-onboarding-step="join"] [data-step-indicator="recovery"],
[data-onboarding-root][data-onboarding-step="complete"] [data-step-indicator="prepare"],
[data-onboarding-root][data-onboarding-step="complete"] [data-step-indicator="recovery"] {
  border-color: var(--onb-green-soft);
  color: var(--onb-green-strong);
}

[data-onboarding-root][data-onboarding-step="recovery"] [data-step-indicator="prepare"] .onboarding-steps__num,
[data-onboarding-root][data-onboarding-step="join"] [data-step-indicator="prepare"] .onboarding-steps__num,
[data-onboarding-root][data-onboarding-step="join"] [data-step-indicator="recovery"] .onboarding-steps__num,
[data-onboarding-root][data-onboarding-step="complete"] [data-step-indicator="prepare"] .onboarding-steps__num,
[data-onboarding-root][data-onboarding-step="complete"] [data-step-indicator="recovery"] .onboarding-steps__num {
  background: var(--onb-green-soft);
  color: var(--onb-green-strong);
}

[data-onboarding-root][data-onboarding-status="invitation_link_refused"] [data-onboarding-status-variant="invitation_link_refused"],
[data-onboarding-root][data-onboarding-status="invitation_expired_refused"] [data-onboarding-status-variant="invitation_expired_refused"],
[data-onboarding-root][data-onboarding-status="invitation_reused_refused"] [data-onboarding-status-variant="invitation_reused_refused"],
[data-onboarding-root][data-onboarding-status="device_signing_key_refused"] [data-onboarding-status-variant="device_signing_key_refused"],
[data-onboarding-root][data-onboarding-status="device_encryption_key_refused"] [data-onboarding-status-variant="device_encryption_key_refused"],
[data-onboarding-root][data-onboarding-status="recovery_confirmation_refused"] [data-onboarding-status-variant="recovery_confirmation_refused"],
[data-onboarding-root][data-onboarding-status="recovery_account_refused"] [data-onboarding-status-variant="recovery_account_refused"],
[data-onboarding-root][data-onboarding-status="recovery_code_checksum_refused"] [data-onboarding-status-variant="recovery_code_checksum_refused"],
[data-onboarding-root][data-onboarding-status="vault_identity_reset_required_refused"] [data-onboarding-status-variant="vault_identity_reset_required_refused"],
[data-onboarding-root][data-onboarding-status="onboarding_failed"] [data-onboarding-status-variant="onboarding_failed"],
[data-onboarding-root][data-onboarding-status="invitation_admin_ready"] [data-onboarding-status-variant="invitation_admin_ready"],
[data-onboarding-root][data-onboarding-status="invitation_vault_ready"] [data-onboarding-status-variant="invitation_vault_ready"],
[data-onboarding-root][data-onboarding-status="admin_device_ready"] [data-onboarding-status-variant="admin_device_ready"],
[data-onboarding-root][data-onboarding-status="recovery_sheet_ready"] [data-onboarding-status-variant="recovery_sheet_ready"],
[data-onboarding-root][data-onboarding-status="recovery_sheet_printed"] [data-onboarding-status-variant="recovery_sheet_printed"],
[data-onboarding-root][data-onboarding-status="recovery_sheet_print_refused"] [data-onboarding-status-variant="recovery_sheet_print_refused"],
[data-onboarding-root][data-onboarding-status="recovery_camera_ready"] [data-onboarding-status-variant="recovery_camera_ready"],
[data-onboarding-root][data-onboarding-status="recovery_qr_not_found_restart"] [data-onboarding-status-variant="recovery_qr_not_found_restart"],
[data-onboarding-root][data-onboarding-status="recovery_camera_refused"] [data-onboarding-status-variant="recovery_camera_refused"],
[data-onboarding-root][data-onboarding-status="recovery_qr_not_found_retry"] [data-onboarding-status-variant="recovery_qr_not_found_retry"],
[data-onboarding-root][data-onboarding-status="recovery_confirmed"] [data-onboarding-status-variant="recovery_confirmed"],
[data-onboarding-root][data-onboarding-status="device_joined"] [data-onboarding-status-variant="device_joined"] {
  display: inline;
}

[data-onboarding-root][data-onboarding-status-tone="error"] [data-onboarding-status] {
  color: #9e1b1b;
}

[data-onboarding-root][data-onboarding-status-tone="ready"] [data-onboarding-status] {
  color: var(--onb-green-strong);
}

.onboarding-card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--onb-green-soft);
  color: var(--onb-green);
}

.onboarding-card__icon--success {
  background: #e3f5e8;
  color: #2f7a45;
}

.onboarding-card__fa {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
}

.onboarding-card__title {
  margin: 0.15rem 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.onboarding-card__copy {
  margin: 0;
  max-width: 22rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--onb-muted);
}

.onboarding-card__detail {
  margin: 0;
  max-width: 24rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--onb-muted);
}

.onboarding-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--onb-green-soft);
  color: var(--onb-green-strong);
  font-size: 0.88rem;
  font-weight: 600;
}

.onboarding-chip[hidden] {
  display: none !important;
}

/* Compact red notice (e.g. expired invitation), shown in the chip's place */
.onboarding-notice--error {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: #fbe9e9;
  color: #9e1b1b;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

.onboarding-notice--error[hidden] {
  display: none !important;
}

.onboarding-notice__icon {
  flex: none;
  display: block;
  font-size: 1.125rem;
  line-height: 1;
}

.onboarding-chip__mark {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #fff;
  color: var(--onb-green);
  font-size: 0.7rem;
  line-height: 1;
}

.onboarding-card__cta-wrap {
  width: 100%;
  margin-top: 0.5rem;
  display: grid;
  gap: 0.75rem;
}

.onboarding-cta:not([data-onboarding-complete-link]),
.onboarding-card .button-link.onboarding-cta:not([data-onboarding-complete-link]) {
  display: inline-flex;
}

.onboarding-cta,
.onboarding-card .button-link.onboarding-cta {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.15rem;
  margin-top: 0.35rem;
  padding: 0.85rem 1.25rem;
  border: none;
  border-radius: 0.85rem;
  background: var(--onb-green-strong);
  color: #fff !important;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transition: background 0.15s ease, transform 0.1s ease;
}

.onboarding-cta:hover:not(:disabled),
.onboarding-card .button-link.onboarding-cta:hover {
  background: #5c7b1e;
}

.onboarding-cta:focus-visible {
  outline: 2px solid var(--onb-green-ring);
  outline-offset: 3px;
}

.onboarding-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.onboarding-cta__arrow {
  font-weight: 500;
  opacity: 0.9;
}

.onboarding-cta--secondary {
  background: #fff;
  color: var(--onb-green-strong) !important;
  border: 1.5px solid var(--onb-green-ring);
  box-shadow: none;
}

.onboarding-cta--secondary:hover:not(:disabled) {
  background: var(--onb-green-soft);
}

.custody-warning {
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border-left: 0.25rem solid #c48a1a;
  background: #fff8ea;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #4a3b1a;
}

.recovery-code {
  display: block;
  overflow-wrap: anywhere;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #f4f5f3;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.6;ŵ
  user-select: all;
  text-align: left;
  max-height: 4rem;
  overflow: hidden;
}

.recovery-words {
  word-spacing: 0.35em;
}

.recovery-sheet {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) 1fr;
  gap: 1.25rem;
  align-items: center;
  width: 100%;
  padding: 1.25rem;
  border: 2px solid currentColor;
  border-radius: 0.75rem;
  background: #fff;
  color: #111;
  text-align: left;
}

.recovery-sheet > header,
.recovery-sheet > p {
  grid-column: 1 / -1;
}

.recovery-sheet > header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.recovery-sheet > header small {
  display: block;
  margin-top: 0.2rem;
}

.recovery-qr {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Device-add pairing: show/read tabs + QR/code sub-tabs */
.device-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}
.device-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--onb-line, #d7ddca);
  border-radius: 12px;
  background: transparent;
  color: var(--onb-muted, #5b6152);
  font: 600 14px/1.2 inherit;
  cursor: pointer;
}
.device-tab:hover { border-color: var(--onb-accent, #6b8e23); }
[data-device-add-root][data-device-panel="show"] [data-device-tab="show"],
[data-device-add-root][data-device-panel="read"] [data-device-tab="read"] {
  background: var(--onb-accent, #6b8e23);
  border-color: var(--onb-accent, #6b8e23);
  color: #fff;
}
.device-tab__icon { flex: none; font-size: 18px; line-height: 1; }

.device-subtabs {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 14px;
}
.device-subtab {
  padding: 6px 16px;
  border: 1px solid var(--onb-line, #d7ddca);
  border-radius: 999px;
  background: transparent;
  color: var(--onb-muted, #5b6152);
  font: 600 13px/1.2 inherit;
  cursor: pointer;
}
[data-device-add-root][data-device-subpanel="qr"] [data-device-subtab="qr"],
[data-device-add-root][data-device-subpanel="code"] [data-device-subtab="code"] {
  background: var(--onb-accent, #6b8e23);
  border-color: var(--onb-accent, #6b8e23);
  color: #fff;
}
.device-subpanel { grid-column: 1 / -1; }
.device-tab-panel,
[data-device-add-root] [data-device-subpanel],
[data-device-add-root] [data-pairing-sheet],
[data-device-add-root] [data-scan-camera],
[data-device-add-root] [data-pairing-result],
[data-device-add-root] [data-approve-pairing],
[data-device-add-root] [data-device-status-variant],
[data-device-add-root] [data-result-kind-variant],
[data-device-add-root] [data-result-label-variant],
[data-device-add-root] [data-result-quantity-variant] {
  display: none;
}

[data-device-add-root][data-device-panel="show"] > [data-device-panel="show"],
[data-device-add-root][data-device-panel="read"] > [data-device-panel="read"] {
  display: flex;
}

[data-device-add-root][data-device-subpanel="qr"] [data-device-subpanel="qr"],
[data-device-add-root][data-device-subpanel="code"] [data-device-subpanel="code"] {
  display: block;
}

[data-device-add-root][data-pairing-sheet-state="ready"] [data-pairing-sheet],
[data-device-add-root][data-pairing-sheet-state="ready"] [data-approve-pairing],
[data-device-add-root][data-scan-camera-state="open"] [data-scan-camera] {
  display: grid;
}

[data-device-add-root][data-pairing-result-state="complete"] [data-pairing-result] {
  display: inline-flex;
}

[data-device-add-root][data-device-status="pairing_created"] [data-device-status-variant="pairing_created"],
[data-device-add-root][data-device-status="pairing_code_malformed_refused"] [data-device-status-variant="pairing_code_malformed_refused"],
[data-device-add-root][data-device-status="pairing_version_refused"] [data-device-status-variant="pairing_version_refused"],
[data-device-add-root][data-device-status="pairing_account_refused"] [data-device-status-variant="pairing_account_refused"],
[data-device-add-root][data-device-status="pairing_vault_refused"] [data-device-status-variant="pairing_vault_refused"],
[data-device-add-root][data-device-status="pairing_enrollment_request_required"] [data-device-status-variant="pairing_enrollment_request_required"],
[data-device-add-root][data-device-status="device_enrollment_expired_refused"] [data-device-status-variant="device_enrollment_expired_refused"],
[data-device-add-root][data-device-status="pairing_registry_refused"] [data-device-status-variant="pairing_registry_refused"],
[data-device-add-root][data-device-status="pairing_requested"] [data-device-status-variant="pairing_requested"],
[data-device-add-root][data-device-status="pairing_approved"] [data-device-status-variant="pairing_approved"],
[data-device-add-root][data-device-status="pairing_complete"] [data-device-status-variant="pairing_complete"],
[data-device-add-root][data-device-status="recovery_account_refused"] [data-device-status-variant="recovery_account_refused"],
[data-device-add-root][data-device-status="recovery_snapshot_refused"] [data-device-status-variant="recovery_snapshot_refused"],
[data-device-add-root][data-device-status="recovery_code_checksum_refused"] [data-device-status-variant="recovery_code_checksum_refused"],
[data-device-add-root][data-device-status="recovery_code_incorrect_refused"] [data-device-status-variant="recovery_code_incorrect_refused"],
[data-device-add-root][data-device-status="recovery_qr_not_found"] [data-device-status-variant="recovery_qr_not_found"],
[data-device-add-root][data-device-status="recovery_qr_encode_refused"] [data-device-status-variant="recovery_qr_encode_refused"],
[data-device-add-root][data-device-status="pairing_failed"] [data-device-status-variant="pairing_failed"],
[data-device-add-root][data-device-status="camera_ready"] [data-device-status-variant="camera_ready"],
[data-device-add-root][data-device-status="camera_open_refused"] [data-device-status-variant="camera_open_refused"],
[data-device-add-root][data-device-status="pairing_code_required"] [data-device-status-variant="pairing_code_required"],
[data-device-add-root][data-result-kind="documents"] [data-result-kind-variant="documents"],
[data-device-add-root][data-result-kind="bytes"] [data-result-kind-variant="bytes"],
[data-device-add-root][data-result-label="default"] [data-result-label-variant="default"],
[data-device-add-root][data-result-label="provided"] [data-result-label-variant="provided"],
[data-device-add-root][data-result-quantity="one"] [data-result-quantity-variant="one"],
[data-device-add-root][data-result-quantity="many"] [data-result-quantity-variant="many"] {
  display: inline;
}

[data-device-add-root][data-device-status-tone="error"] [data-device-add-status] {
  color: #9e1b1b;
}

[data-device-add-root][data-device-status-tone="ready"] [data-device-add-status] {
  color: var(--onb-green-strong);
}
.device-subpanel--qr { text-align: center; }
.device-subpanel--qr .recovery-qr {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

.recovery-scan,
.recovery-scan [data-recovery-camera] {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
}

.recovery-scan h3 {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
}

.recovery-scan p {
  margin: 0;
  color: var(--onb-muted);
  font-size: 0.92rem;
}

.recovery-scan video {
  width: 100%;
  max-height: 22rem;
  border-radius: 0.75rem;
  background: #111;
}

/* Scoped by UI Consolidation slice 0: this sheet is in the always-loaded
 * bundle now, and an unscoped .button-quiet would replace the toolkit's
 * secondary button on every route. Every onboarding surface (including the
 * device-add modal the rail opens on any route) is inside .onboarding-shell
 * or on body.onboarding-page. */
body.onboarding-page .button-quiet,
.onboarding-shell .button-quiet {
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  border: none;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--onb-muted);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.onboarding-status {
  width: 100%;
  min-height: 1.5rem;
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--onb-muted);
}

.onboarding-status[data-state="error"] {
  color: #9e1b1b;
}

.onboarding-status[data-state="ready"] {
  color: var(--onb-green-strong);
}

@media (max-width: 40rem) {
  .onboarding-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .onboarding-steps__item {
    justify-content: flex-start;
  }

  .recovery-sheet {
    grid-template-columns: 1fr;
  }

  .recovery-sheet > header,
  .recovery-sheet > p {
    grid-column: auto;
  }

  .recovery-qr {
    max-width: 16rem;
    margin-inline: auto;
  }

  .onboarding-brand {
    position: absolute;
  }

  .onboarding-steps__item + .onboarding-steps__item::before {
    display: none;
  }
}

@media print {
  /* Scoped to the onboarding page since this sheet is now in the always-loaded
   * bundle (UI Consolidation slice 0); it used to be a route <link>. */
  body.onboarding-page * {
    visibility: hidden;
  }

  [data-recovery-sheet],
  [data-recovery-sheet] * {
    visibility: visible;
  }

  [data-recovery-sheet] {
    position: absolute;
    inset: 1cm;
    display: grid;
    width: auto;
    border: 2px solid #000;
    box-shadow: none;
    break-inside: avoid;
  }

  .recovery-code {
    background: transparent;
  }

  .onboarding-brand {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-page *,
  .onboarding-page *::before,
  .onboarding-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
 * household-seeding.css, folded in by UI Consolidation slice 0. It was the
 * third <link> on onboarding/household.html.
 * ----------------------------------------------------------------------- */

/* Household seeding — client onboarding form.
   The page chrome (shell, hero, step pills, card, CTA, chip, status) comes from
   onboarding.css. This file only carries household-specific form layout and the
   onboarding-palette overrides for the fieldset controls. */

/* The form card holds left-aligned fieldsets; the icon/title/copy header from
   onboarding-card stays centered above them. */
.onboarding-card--form {
  gap: 1.25rem;
}

.onboarding-fieldset {
  display: grid;
  gap: 0.8rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--onb-border-soft, #e2e8dc);
  text-align: left;
}

.onboarding-fieldset:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.onboarding-fieldset legend {
  margin-bottom: 0.4rem;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--onb-text, #1a1f1c);
}

.onboarding-fieldset label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--onb-text, #1a1f1c);
}

.onboarding-fieldset input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--onb-border-soft, #e2e8dc);
  border-radius: 0.65rem;
  background: #fff;
  color: var(--onb-text, #1a1f1c);
  font: inherit;
  font-size: 1rem;
}

.onboarding-fieldset input:focus-visible {
  outline: 2px solid var(--onb-green-ring, #6aa53a);
  outline-offset: 2px;
  border-color: var(--onb-green-ring, #6aa53a);
}

.onboarding-field-hint {
  color: var(--onb-muted, #5c6560);
  font-size: 0.85rem;
  font-weight: 500;
}

.seed-fields {
  display: grid;
  gap: 0.8rem;
}

.seed-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seed-fields--street {
  grid-template-columns: minmax(0, 1fr) minmax(6rem, 0.3fr);
}

.seed-fields--place {
  grid-template-columns: minmax(6rem, 0.35fr) minmax(0, 1fr) minmax(8rem, 0.55fr);
}

/* LZR declares every localized branch; the typed outcome selects one projection. */
[data-household-seeding-root] [data-seeding-outcome-variant],
[data-household-seeding-root] [data-seeding-status-variant],
[data-household-seeding-root] .seed-result {
  display: none;
}

[data-household-seeding-root][data-seeding-outcome="complete"] [data-household-seeding-form],
[data-household-seeding-root][data-seeding-outcome="skipped"] [data-household-seeding-form] {
  display: none;
}

[data-household-seeding-root][data-seeding-outcome="complete"] .seed-result,
[data-household-seeding-root][data-seeding-outcome="skipped"] .seed-result {
  display: flex;
}

[data-household-seeding-root][data-seeding-outcome="complete"] [data-seeding-outcome-variant="complete"],
[data-household-seeding-root][data-seeding-outcome="skipped"] [data-seeding-outcome-variant="skipped"],
[data-household-seeding-root][data-seeding-outcome="skipped"] [data-seeding-status-variant="skipped"],
[data-household-seeding-root][data-seeding-outcome="resumed"] [data-seeding-status-variant="resumed"] {
  display: inline;
}

[data-household-seeding-root][data-seeding-outcome="complete"]:not([data-onboarding-observation="refused"]) [data-seeding-status-variant="complete"],
[data-household-seeding-root][data-seeding-outcome="complete"][data-onboarding-observation="refused"] [data-seeding-status-variant="observation-refused"] {
  display: inline;
}

[data-household-seeding-root]:not([data-seeding-outcome="complete"]) [data-household-seeding-forward],
[data-household-seeding-root][data-seeding-outcome="complete"] [data-household-seeding-resume] {
  display: none;
}

[data-household-seeding-root][data-seeding-outcome="complete"] [data-household-seeding-step="haushalt"] {
  border-color: var(--onb-green-soft);
  color: var(--onb-green-strong);
}

[data-household-seeding-root][data-seeding-outcome="complete"] [data-household-seeding-step="haushalt"] .onboarding-steps__num {
  background: var(--onb-green-soft);
  color: var(--onb-green-strong);
}

.seed-boundary {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  text-align: center;
  color: var(--onb-muted, #5c6560);
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 42rem) {
  .seed-fields--two,
  .seed-fields--street,
  .seed-fields--place {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-card--form *,
  .onboarding-card--form *::before,
  .onboarding-card--form *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
 * Legacy device-add modal and device management blocks, folded out of the
 * deleted 90-legacy.css.
 * ----------------------------------------------------------------------- */

/* device-add modal (opened from the ⋮ menu) */
.device-add-modal {
  display: block;
}
.device-add-modal-dialog {
  position: relative; width: min(100%, 40rem); margin: auto;
  background: var(--onb-bg, #f4f7ef); border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2rem);
  box-shadow: 0 24px 70px rgba(23, 28, 18, 0.4);
}
.device-add-modal-dialog .onboarding-shell { width: 100%; }
.device-add-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 2px;
}
.device-add-modal-close:hover { background: var(--green-soft); }

.device-management { display: grid; gap: 20px; }
.device-management-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.device-management-header h1 { margin: 4px 0; }
.device-management-header p { margin: 0; color: var(--muted); }
.device-management-header button, .device-management-actions button { min-height: 44px; }
.device-list { display: grid; gap: 10px; }
.device-list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
.device-list-row > div:first-child { display: grid; gap: 4px; }
.device-list-row small { color: var(--muted); }
.device-list-state, .device-management-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.device-list-state button { min-height: 44px; }
[data-device-revoke-dialog] :is([data-device-revoke-cancel], [data-device-revoke-confirm]) { display: inline-block; }
[data-device-revoke-status-variant] { display: none; }
[data-device-revoke-state="confirm"] [data-device-revoke-status-variant="confirm"],
[data-device-revoke-state="pending"] [data-device-revoke-status-variant="pending"],
[data-device-revoke-state="failed"] [data-device-revoke-status-variant="failed"] { display: inline; }
[data-device-revoke-state="failed"] [data-device-revoke-status] { color: var(--retake); }
.device-list-skeleton { display: grid; gap: 10px; }
.device-list-skeleton i { display: block; min-height: 72px; border-radius: 12px; background: var(--green-soft); opacity: .55; }
.device-online-unlock-action { min-height: 44px; }
.device-online-unlock-status { margin: 8px 0 0; }
[data-device-online-unlock-status-variant] { display: none; }
[data-device-online-unlock-state="idle"] [data-device-online-unlock-status-variant="idle"],
[data-device-online-unlock-state="pending"] [data-device-online-unlock-status-variant="pending"],
[data-device-online-unlock-state="unlocked"] [data-device-online-unlock-status-variant="unlocked"],
[data-device-online-unlock-state="refused"] [data-device-online-unlock-status-variant="refused"] { display: inline; }
[data-device-online-unlock-state="refused"] .device-online-unlock-status { color: var(--retake); }

@media (max-width: 520px) {
  .device-management-header, .device-list-row { align-items: stretch; flex-direction: column; }
  .device-management-header button, .device-management-actions button { width: 100%; }
  .device-list-state { justify-content: flex-start; }
}
/* Shared product shell — products overview grid and the needs-manifest-driven
 * product page. Exploratory prototype surface (products-range-kickoff).
 * UI Consolidation slice 0: this sheet used to be inlined into the route
 * content as a <style> block by _components/product-shell.html and
 * produkt/notfallordner.html, so it entered and left with the main frame. It
 * is a bundle partial now.
 *
 * UI renewal slice 2: colours, borders, radii and focus rings were reconciled
 * with the canonical --k- toolkit tokens (styles/00-tokens.css) so product
 * pages read as the same design inside the new rail/canvas geometry. Layout,
 * content structure and type scale are unchanged; the full product pass is a
 * later wave. */

/* ------------------------------ overview grid ------------------------------ */
.produkt-intro { margin: 22px 0 8px; }
.produkt-intro h1 { margin: 2px 0 6px; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.1; }
.produkt-intro p { color: var(--k-text-muted); max-width: 62ch; margin: 0; }

.produkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 18px 0 8px;
}
.produkt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-card);
  background: var(--k-surface);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(35, 40, 26, 0.05);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.produkt-card:hover { border-color: var(--k-frog); box-shadow: 0 4px 16px rgba(35, 40, 26, 0.10); }
.produkt-card img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  object-position: center;
  background: var(--k-primary-soft);
}
.produkt-card-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.produkt-card-body h2 { margin: 0; font-size: 19px; line-height: 1.2; }
.produkt-card-body p { margin: 0; color: var(--k-text-muted); font-size: 13px; line-height: 1.45; }
.produkt-card-nr { color: var(--k-primary); font-weight: 700; font-size: 11px; letter-spacing: .12em; }
.produkt-card-foot { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--k-text-muted); }
.produkt-card a.produkt-card-link {
  position: absolute; inset: 0; z-index: 2;
  text-indent: -9999px; overflow: hidden;
}
.produkt-card a.produkt-card-link:focus-visible { outline: var(--k-focus-width) solid var(--k-focus-color); outline-offset: -3px; border-radius: var(--k-radius-card); }

/* ------------------------------- demo banner ------------------------------- */
.produkt-demo-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 0; padding: 12px 16px;
  border: 1px solid var(--k-frog); border-radius: var(--k-radius-card);
  background: var(--k-primary-soft);
  color: var(--k-text); font-size: 13px; line-height: 1.5;
}
.produkt-demo-banner .badge { margin-left: 0; flex: none; }
.produkt-stub-note { color: var(--k-text-muted); font-size: 12px; margin: 8px 0 0; }
.produkt-promise { margin: 14px 0 0; font-size: 15px; line-height: 1.55; max-width: 68ch; }

/* --------------------------- Durchschnitt meter ---------------------------- */
.produkt-meter { margin: 22px 0 6px; }
.produkt-meter-track { display: flex; gap: 4px; margin: 8px 0 6px; }
.produkt-meter-seg {
  flex: 1; height: 10px; border-radius: 999px;
  background: repeating-linear-gradient(135deg, #cfd6bb 0 5px, #e3e8d5 5px 10px);
}
.produkt-meter-seg.is-supplied { background: var(--k-primary); }
.produkt-meter-caption { color: var(--k-text-muted); font-size: 13px; margin: 0; }
.produkt-meter-caption strong { color: var(--k-text); }

/* -------------------------------- slot cards ------------------------------- */
.produkt-slots { display: grid; gap: 12px; margin: 14px 0 0; }
.produkt-slot {
  border: 1px solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-surface);
  padding: 14px 16px;
}
.produkt-slot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.produkt-slot-head strong { font-size: 15px; }
.produkt-slot-value {
  margin-left: auto; font-size: 18px; font-weight: 700; color: var(--k-text);
  white-space: nowrap;
}
.produkt-slot-meaning { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.produkt-slot-basis { margin: 6px 0 0; color: var(--k-text-muted); font-size: 12px; line-height: 1.5; }
.produkt-slot-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--k-text-muted); }

/* provenance ladder: a WORD, never only a colour */
.produkt-ladder { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.produkt-step {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--k-border); color: var(--k-text-muted); background: var(--k-surface);
}
.produkt-step.is-current { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-surface); font-weight: 600; }
.produkt-step.is-unavailable { opacity: .55; text-decoration: line-through; }

/* Wahr machen */
.produkt-wahr { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--k-radius-card); background: var(--k-primary-soft); border: 1px solid var(--k-border); }
.produkt-wahr-title { font-size: 12px; font-weight: 700; color: var(--k-primary); margin: 0 0 6px; }
.produkt-belege { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.produkt-belege li {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--k-surface); border: 1px solid var(--k-border); color: var(--k-text);
}
.produkt-belege-empty { font-size: 12px; color: var(--k-text-muted); margin: 0 0 8px; }
.produkt-wahr button { font-size: 12px; padding: 6px 14px; }
.produkt-wahr-hint { font-size: 11px; color: var(--k-text-muted); margin: 6px 0 0; }
/* .produkt-drift retired with the drift_notes disclosure: those notes are
   registry annotations for the manifest authors, not user copy. */

/* ------------------------------ page furniture ----------------------------- */
.produkt-section-head { margin: 26px 0 0; }
.produkt-section-head h2 { margin: 0 0 4px; font-size: 22px; }
.produkt-section-head p { margin: 0; color: var(--k-text-muted); font-size: 13px; max-width: 68ch; }
.produkt-facts { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; color: var(--k-text-muted); font-size: 13px; }
.produkt-facts span strong { color: var(--k-text); }
.produkt-pending { margin: 22px 0; padding: 18px 20px; border: 1px dashed var(--k-border); border-radius: var(--k-radius-card); background: var(--k-primary-soft); }
.produkt-pending h2 { margin: 0 0 6px; font-size: 20px; }
.produkt-pending p { margin: 0 0 6px; color: var(--k-text-muted); font-size: 13px; max-width: 68ch; }
.produkt-back { display: inline-block; margin: 18px 0 0; font-size: 13px; color: var(--k-primary); }

/* Notfallordner */
.notfall-page { max-width: 1200px; margin: 0 auto; }
.notfall-breadcrumb { display: flex; gap: 7px; margin-top: 18px; color: var(--k-text-muted); font-size: 13px; }
.notfall-breadcrumb a { color: var(--k-primary); }
.notfall-intro { margin-top: 14px; }
.notfall-summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 20px 0; padding: 16px 18px; border: 1px solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-surface); }
.notfall-summary h2 { margin: 0 0 5px; font-size: 19px; }
.notfall-summary p { margin: 3px 0 0; max-width: 72ch; color: var(--k-text-muted); font-size: 13px; line-height: 1.45; }
.notfall-percent { flex: none; color: var(--k-primary); font-size: 25px; }
.notfall-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.notfall-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.notfall-filters button { border: 1px solid var(--k-border); border-radius: 999px; background: var(--k-surface); color: var(--k-text); padding: 7px 12px; }
.notfall-filters button[aria-pressed="true"] { border-color: var(--k-primary); background: var(--k-primary-soft); font-weight: 700; }
.notfall-filters span { color: var(--k-text-muted); }
.notfall-filter-hint { margin: 8px 0 12px; color: var(--k-text-muted); font-size: 12px; }
.notfall-categories { display: grid; gap: 8px; }
.notfall-category { border: 1px solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-surface); overflow: hidden; }
.notfall-category-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; padding: 14px 15px; border: 0; background: transparent; color: var(--k-text); text-align: left; }
.notfall-category-toggle:focus-visible, .notfall-filters button:focus-visible, .notfall-dropzone:focus-within { outline: var(--k-focus-width) solid var(--k-focus-color); outline-offset: -3px; }
.notfall-category-title { display: inline-flex; gap: 9px; align-items: center; min-width: 0; }
.notfall-category-state { border-radius: 999px; padding: 3px 9px; color: var(--k-text-muted); background: var(--k-canvas); font-size: 12px; white-space: nowrap; }
.notfall-state-occupied { color: var(--k-primary); background: var(--k-primary-soft); }
.notfall-chevron { transition: transform .14s ease; }
.notfall-category-toggle[aria-expanded="true"] .notfall-chevron { transform: rotate(180deg); }
.notfall-category-panel { padding: 0 15px 15px 48px; border-top: 1px solid var(--k-border); }
.notfall-category-panel ul { margin: 7px 0 12px; padding-left: 19px; }
.notfall-category-panel li { margin: 4px 0; color: var(--k-text-muted); font-size: 13px; }
.notfall-examples-title, .notfall-documents-title { margin: 13px 0 0; font-size: 12px; font-weight: 700; }
.notfall-documents { list-style: none; padding-left: 0 !important; }
.notfall-dropzone { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--k-border); border-radius: var(--k-radius-control); background: var(--k-primary-soft); color: var(--k-primary); font-size: 13px; cursor: pointer; transition: border-color .14s ease, background-color .14s ease; }
.notfall-dropzone strong { text-decoration: underline; }
.notfall-dropzone-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
[data-kroemo-file-drop="active"] .notfall-dropzone { border-color: var(--k-primary); }
.notfall-dropzone[data-kroemo-file-drop-target="active"] { background: var(--k-primary-soft); border-style: solid; }
.notfall-help { display: flex; gap: 10px; padding: 15px; border: 1px solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-primary-soft); }
.notfall-help h2 { margin: 0 0 5px; font-size: 16px; }
.notfall-help p { margin: 0; color: var(--k-text-muted); font-size: 12px; line-height: 1.5; }
.notfall-empty, .notfall-state-message { padding: 18px; border: 1px dashed var(--k-border); border-radius: var(--k-radius-card); background: var(--k-primary-soft); }
@media (max-width: 760px) {
  .notfall-layout { grid-template-columns: 1fr; }
  .notfall-help { order: 2; }
  .notfall-category-toggle { min-height: 48px; grid-template-columns: minmax(0, 1fr) auto; }
  .notfall-category-state { grid-row: 2; grid-column: 1; justify-self: start; }
  .notfall-chevron { grid-row: 1 / span 2; grid-column: 2; }
  .notfall-category-panel { padding-left: 15px; }
}
/* 88-product-admin.css — owner: the assigned-role product pages and the
 * admin / advisor surfaces (!admin/*, !advisor/*, produkte.html, the product
 * page header and tabs, telemetry and the review admin tables).
 *
 * Folded out of the deleted 90-legacy.css by UI Consolidation slice 0. It was
 * always in the bundle; this partial only gives it a name and a scope comment.
 * Nothing is restyled here. */

/* -------------------------- assigned role products --------------------------
 * Slice 4 split ledger block 101 (15.3 KB, previously `unproven`) by line
 * range. It holds no Home half: `.role-product` is authored only by the
 * !admin/ and !advisor/ role pages, never by Home, and Home never carried it.
 * The one Home-owned rule inside the block's range was the
 * `.dashboard-card > :not(.dashboard-card-art)` narrow-width override in the
 * 760px media query, which slice 4 deleted with the rest of the dashboard card.
 *
 * 101a — `.role-product` … `.product-tabs a[aria-current]` plus
 *   `.product-page-context` / `.role-*` / `.admin-*` / `.advisor-*`:
 *   product-shell and admin/advisor furniture. `.product-page-header` is used
 *   by Vault, Review and every product page, so this half stays for SLICE 5
 *   (Vault) and the later product pass; deleting it now on Home's evidence
 *   alone would break three out-of-scope surfaces.
 * ------------------------------------------------------------------------ */
.role-product { padding-bottom: 24px; }
.product-page-header {
  display: flex; min-height: 150px; align-items: center; justify-content: space-between; gap: 28px;
  padding: 18px 0 16px; border-bottom: 1px solid var(--line); overflow: hidden;
}
.product-page-header h1 { margin: 2px 0 0; font-size: clamp(28px, 5vw, 42px); line-height: 1.08; }
.product-page-header img { align-self: end; width: min(40%, 320px); height: 132px; object-fit: contain; object-position: right bottom; }
.product-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.product-tabs a {
  min-height: 42px; display: inline-flex; flex: none; align-items: center; padding: 0 12px;
  border-radius: 10px; color: var(--muted); font-weight: 700; text-decoration: none;
}
.product-tabs a:hover { background: #f7f8f3; color: var(--ink); }
.product-tabs a[aria-current="page"] { color: var(--green-dark); background: var(--green-soft); }
@media (min-width: 900px) {
  .product-tabs { flex-wrap: wrap; overflow-x: visible; }
}
.product-page-context { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 22px 0 18px; }
.product-page-context > div { min-width: 0; }
.product-page-context h2 { margin: 0; }
.product-page-context .custody-note { margin: 7px 0 0; }
.role-status { flex: none; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 700; }
.role-status[data-status="ready"] { border-color: var(--green); color: var(--accept); background: var(--green-soft); }
.role-command { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-left: 5px solid var(--green); }
.role-command h3, .role-command p { margin: 0; }
.role-command p { color: var(--muted); font-size: 13px; }
.role-roster { display: grid; gap: 10px; margin-top: 16px; }
.role-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.role-row > div:first-child { display: grid; min-width: 0; }
.role-row code { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.role-row .badge { margin: 0; }
.role-row .card-action-row { margin: 0; }
.role-row-customer { grid-template-columns: minmax(0, 1fr) auto; }
.role-empty { display: grid; gap: 4px; padding: 28px; border: 1px dashed #ced4c1; border-radius: 14px; text-align: center; background: #fafbf7; }
.role-empty span { color: var(--muted); font-size: 13px; }
.role-empty-action { justify-self: center; margin-top: 12px; }
.admin-health { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin-health-card { display: grid; gap: 4px; margin: 0; }
.admin-health-card strong[data-health="up"] { color: var(--accept); }
.admin-health-card strong[data-health="down"] { color: var(--retake); }
.admin-health-card strong[data-health="degraded"] { color: var(--retake); }
.admin-health-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-trust-section { display: grid; gap: 14px; margin-top: 28px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading h3, .section-heading p { margin: 0; }
.section-heading p { max-width: 460px; color: var(--muted); font-size: 13px; text-align: right; }
.admin-storage-row { grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1fr) auto; }
.admin-compact-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.admin-compact-metrics div { min-width: 0; }
.admin-compact-metrics dt { color: var(--muted); font-size: 11px; }
.admin-compact-metrics dd { margin: 2px 0 0; font-weight: 800; }
.admin-announcement-form { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; }
.role-row-notice { grid-template-columns: minmax(0, 1fr) auto auto; }
.role-row-notice small { color: var(--muted); }
.admin-invitation, .advisor-invitation { display: grid; gap: 14px; margin-top: 16px; border-color: var(--green); background: var(--green-soft); }
.admin-invitation h3, .admin-invitation p, .advisor-invitation h3, .advisor-invitation p { margin: 0; }
.admin-invitation code, .advisor-invitation code { overflow-wrap: anywhere; padding: 10px; border-radius: 8px; background: #fff; font-size: 11px; }
.advisor-pipeline-row { grid-template-columns: minmax(0, 1fr) auto; }
.advisor-pipeline-state { display: grid; gap: 4px; justify-items: end; }
.advisor-pipeline-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.advisor-pipeline-steps li { min-width: 0; padding: 8px; border-radius: 8px; background: var(--green-soft); text-align: center; }
.advisor-pipeline-steps code { white-space: normal; }
.admin-account-row { align-items: start; }
.admin-account-row small { margin-top: 5px; color: var(--muted); }
.admin-account-details { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-account-details h4 { margin: 4px 0 0; }
.admin-hierarchy { display: grid; gap: 8px; margin-bottom: 18px; }
.admin-hierarchy-row {
  display: grid; grid-template-columns: minmax(120px, .35fr) minmax(260px, 1fr) minmax(260px, 1fr);
  align-items: end; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: #fafbf7;
}
.admin-hierarchy-row h3 { align-self: center; margin: 0; font-size: 16px; }
.admin-hierarchy-child { margin-left: 24px; border-left: 4px solid var(--green); }
.admin-hierarchy-select, .admin-hierarchy-create, .admin-advisor-name-form, .admin-advisor-create-form {
  display: flex; align-items: end; gap: 8px;
}
.admin-hierarchy-row label, .admin-advisor-name-form label, .admin-advisor-create-form label {
  display: grid; flex: 1; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700;
}
.admin-hierarchy-row select { min-width: 0; width: 100%; }
.admin-selected-team { margin: 0 0 22px 24px; }
.admin-advisor-section { display: grid; gap: 12px; margin-top: 24px; }
.admin-advisor-name-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.admin-advisor-name {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); background: #fff; text-align: left;
}
.admin-advisor-name:hover { border-color: var(--green); background: var(--green-soft); }
.admin-advisor-name small { color: var(--muted); }
.admin-advisor-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 22px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 70px rgba(20, 35, 12, .3);
}
.admin-advisor-dialog::backdrop { background: rgba(20, 35, 12, .48); }
.admin-advisor-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.admin-advisor-dialog-header h3 { margin: 3px 0 0; }
.admin-dialog-close { min-width: 44px; min-height: 44px; padding: 0; }
.admin-advisor-name-form { margin-top: 20px; }
.admin-advisor-create-form { align-items: stretch; flex-direction: column; margin-top: 20px; }
.admin-advisor-create-form p { margin: 0; color: var(--muted); font-size: 13px; }
.admin-advisor-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.admin-advisor-facts div { min-width: 0; padding: 10px; border-radius: 10px; background: var(--green-soft); }
.admin-advisor-facts dt { color: var(--muted); font-size: 12px; }
.admin-advisor-facts dd { min-width: 0; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; }
.admin-dialog-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-dialog-section h4 { margin-top: 0; }
.admin-package-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, auto); gap: 12px; align-items: start; }
.admin-package-preview code { overflow-wrap: anywhere; white-space: normal; text-align: right; }
.admin-device-identity { display: grid; min-width: 180px; margin-right: auto; }
.admin-device-identity small { color: var(--muted); }
.admin-inline-form { display: flex; align-items: end; gap: 8px; }
.admin-inline-form label, .admin-management-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-management-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr) auto; align-items: end; gap: 16px; margin-bottom: 16px; }
.admin-management-form h3, .admin-management-form p { margin: 0; }
.admin-team-card { display: grid; gap: 18px; }
.admin-team-card header { display: grid; gap: 4px; }
.admin-team-card header h3 { margin: 0; }
.admin-team-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.admin-token-list, .admin-audit-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.admin-token-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-token-list li code { margin-right: auto; }
.admin-audit { margin-top: 28px; }
.admin-audit-list li { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.admin-audit-list time { color: var(--muted); }
.admin-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.admin-product-panel { display: grid; gap: 16px; margin: 0; }
.admin-product-panel header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.admin-product-panel h3 { margin: 2px 0 0; }
.admin-panel-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.admin-panel-metrics div { padding: 10px; border-radius: 10px; background: var(--green-soft); }
.admin-panel-metrics dt { color: var(--muted); font-size: 12px; }
.admin-panel-metrics dd { margin: 4px 0 0; font-weight: 800; }
.admin-funnel { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.admin-funnel li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.admin-version-table { width: 100%; border-collapse: collapse; }
.admin-version-table th, .admin-version-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.product-page-header a:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.telemetry-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.telemetry-summary-card { display: grid; gap: 4px; margin: 0; }
.telemetry-summary-card strong { font-size: clamp(28px, 5vw, 42px); line-height: 1; }
.telemetry-summary-card small { color: var(--muted); overflow-wrap: anywhere; }
.telemetry-daily { margin-bottom: 16px; }
.telemetry-day-list { display: grid; gap: 10px; }
.telemetry-day-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.telemetry-day-row label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 13px; }
.telemetry-day-row meter { width: 100%; height: 14px; accent-color: var(--green-dark); }
.telemetry-table-wrap { overflow-x: auto; }
.telemetry-table-wrap:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.telemetry-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.telemetry-table th, .telemetry-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.review-admin-table button { min-block-size: 44px; }
.review-admin-dialog {
  width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 0; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 70px rgba(20, 35, 12, .3);
}
.review-admin-dialog::backdrop { background: rgba(20, 35, 12, .48); }
.review-admin-detail { display: grid; gap: 16px; margin: 0; border: 0; box-shadow: none; }
.review-admin-detail > header, .review-admin-meta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.review-admin-detail-actions { display: flex; align-items: center; gap: 10px; }
.review-admin-meta > div { min-inline-size: 160px; }
.review-admin-meta dt { color: var(--muted); font-size: 14px; }
.review-admin-meta dd { margin: 4px 0 0; }
.review-admin-timeline, .review-admin-notes, .review-admin-drawings { display: grid; gap: 8px; padding-inline-start: 24px; }
.review-admin-notes p { margin: 4px 0 0; white-space: pre-wrap; }
.review-admin-delete { border-block-start: 1px solid var(--line); padding-block-start: 16px; }
.review-admin-delete summary { cursor: pointer; min-block-size: 44px; }
.review-admin-more { display: flex; justify-content: center; margin-block: 16px; }
.review-admin-more button { min-block-size: 44px; }
.review-admin-diagnostic { display: grid; gap: 12px; }
.review-admin-diagnostic button { min-block-size: 44px; }
.review-replay-surface { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.review-replay-header, .review-replay-controls, .review-replay-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.review-replay-controls .k-button, .review-replay-checkpoints button { min-block-size: 44px; min-inline-size: 44px; }
.review-replay-scrub { flex: 1 1 180px; min-block-size: 44px; }
.review-replay-scrub:focus-visible, .review-replay-controls .k-button:focus-visible, .review-replay-checkpoints button:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.review-replay-stage { position: relative; overflow: auto; }
[data-review-replay-frame] { position: relative; overflow: hidden; }
.review-vault-structured { display: grid; gap: 16px; padding: 16px; }
.review-vault-structured > header, .review-workspace > header { display: flex; justify-content: space-between; gap: 12px; }
.review-source-placeholder { display: grid; place-items: center; min-width: 44px; min-height: 44px; background: repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--line) 12px 13px); border: 1px dashed var(--line); color: var(--muted); }
.review-vault-context { position: static; width: auto; }
.review-workspace { max-height: none; margin-inline: auto; }
.review-workspace-stage { position: relative; overflow: auto; min-height: 240px; }
.review-recorded-page .workspace-page-surface { width: 100%; height: calc(100% - 30px); }
.review-source-slot { width: 100%; height: 100%; max-width: none; }
.review-semantic-structure { position: relative; overflow: hidden; }
.review-semantic-block { position: absolute; overflow: hidden; }
.review-replay-coverage-stop { padding: 10px; border-left: 4px solid var(--warning); }
@media (max-width: 720px) { .review-workspace { grid-template-columns: 1fr; } }
.review-replay-viewport { position: absolute; inset: 0 auto auto 0; overflow: hidden; transform-origin: top left; background: var(--surface); }
.review-replay-content { position: absolute; inset: 0 auto auto 0; width: 100%; }
.review-replay-drawings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 760px) {
  .product-page-header { min-height: 124px; }
  .product-page-header img { width: 38%; height: 104px; }
  .product-page-context, .role-command { align-items: stretch; flex-direction: column; }
  .role-command button { min-height: 44px; }
  .role-row { grid-template-columns: 1fr auto; }
  .role-row .card-action-row { grid-column: 1 / -1; }
  .admin-health { grid-template-columns: 1fr; }
	.admin-package-preview, .admin-management-form, .admin-team-columns, .admin-storage-row, .admin-hierarchy-row, .admin-advisor-facts { grid-template-columns: 1fr; }
	.admin-hierarchy-child, .admin-selected-team { margin-left: 0; }
	.admin-hierarchy-select, .admin-hierarchy-create, .admin-advisor-name-form { align-items: stretch; flex-direction: column; }
	.admin-hierarchy-select button, .admin-hierarchy-create button, .admin-advisor-name-form button { min-height: 44px; }
	.section-heading { align-items: start; flex-direction: column; }
	.section-heading p { text-align: left; }
	.admin-compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.role-row-notice { grid-template-columns: 1fr auto; }
	.role-row-notice form { grid-column: 1 / -1; }
	.advisor-pipeline-row { grid-template-columns: 1fr; }
	.advisor-pipeline-state { justify-items: start; }
	.advisor-pipeline-steps { grid-template-columns: 1fr; }
	.admin-package-preview code { text-align: left; }
	.admin-inline-form { align-items: stretch; flex-direction: column; width: 100%; }
	.admin-inline-form input { width: 100%; }
  .admin-panel-grid, .admin-panel-metrics { grid-template-columns: 1fr; }
  .admin-version-table { display: block; overflow-x: auto; }
  .telemetry-summary { grid-template-columns: 1fr; }
  .admin-token-list li { align-items: stretch; flex-wrap: wrap; }
  .admin-token-list button { min-height: 44px; width: 100%; }
  .admin-audit-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* Advisor consulting table (advisor/consulting.html). */
.advisor-consulting {
	display: grid;
	gap: 1.25rem;
}

.consulting-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.consulting-toolbar > div:first-child {
	display: grid;
	gap: .25rem;
}

.consulting-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: var(--paper);
}

.consulting-table-wrap:focus-visible {
	outline: 3px solid var(--green-dark);
	outline-offset: 3px;
}

.consulting-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.consulting-table caption {
	padding: 1rem;
	text-align: left;
	font-weight: 700;
}

.consulting-table th,
.consulting-table td {
	padding: .8rem 1rem;
	text-align: right;
	border-top: 1px solid var(--line);
	white-space: nowrap;
}

.consulting-table th:first-child,
.consulting-table caption {
	text-align: left;
}

.consulting-versions,
.consulting-comparison {
	display: grid;
	gap: 1rem;
}

.consulting-deltas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .75rem;
}

.consulting-deltas > div {
	display: grid;
	gap: .25rem;
	padding: .9rem;
	border: 1px solid var(--line);
	border-radius: .75rem;
}
/* 89-beraterpool.css — owner: the Beraterpool surfaces (advisor/arbeitsliste
 * and advisor/kundensicht).
 *
 * UI Consolidation slice 0: this sheet used to be inlined into the route
 * content as a <style> block by both pages, so it entered and left with the
 * main frame. It is a bundle partial now. */

/* Beraterdatenpool — CRM-Schale (exploratory prototype).
 *
 * Provenance is the primary visual structure (spec §5.1 rule 1): the three
 * bands are stacked <section>s with visible <h3>s and a plain-text ownership
 * sentence each. No status is conveyed by colour alone — every token is a word.
 */

.bp-banner,
.bp-stub-note,
.bp-warnung,
.bp-widerruf-banner {
	max-width: 760px;
	margin: 12px 0;
	font-size: 13px;
	line-height: 1.55;
}

.bp-banner {
	display: flex;
	gap: 10px;
	align-items: baseline;
	color: var(--muted);
}

.bp-stub-note {
	color: var(--muted);
}

.bp-widerruf-banner {
	border: 2px solid var(--ink);
	border-radius: 14px;
	padding: 14px 16px;
	color: var(--ink);
	font-size: 14px;
}

/* A warning is carried by its words and its border, never by colour alone —
 * the same rule the state tokens follow. */
.bp-warnung {
	border: 1px dashed var(--ink);
	border-radius: 14px;
	padding: 12px 14px;
	color: var(--ink);
	font-size: 13px;
}

.bp-warnung code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
}

.bp-rows {
	display: grid;
	gap: 12px;
	margin: 16px 0 26px;
}

.bp-row {
	display: grid;
	gap: 6px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
}

.bp-row-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
}

.bp-row-head strong {
	font-size: 15px;
}

.bp-token {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bp-meta {
	color: var(--muted);
	font-size: 12px;
	margin: 0;
}

.bp-slot-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: var(--muted);
}

.bp-band {
	margin: 0 0 26px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
}

.bp-band > h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.bp-band-eigentum {
	margin: 0 0 14px;
	max-width: 620px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted);
}

.bp-band-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 14px;
	font-size: 12px;
	color: var(--muted);
}

.bp-felder {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bp-feld {
	display: grid;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.bp-feld-wert {
	font-size: 18px;
	font-weight: 700;
}

.bp-leer {
	color: var(--muted);
	font-size: 13px;
}

.bp-form {
	display: grid;
	gap: 8px;
	max-width: 640px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border: 1px dashed var(--line);
	border-radius: 14px;
}

.bp-form label {
	display: grid;
	gap: 4px;
	font-size: 13px;
}

.bp-form input,
.bp-form select,
.bp-form textarea,
.bp-form button {
	min-height: 44px;
	font-size: 14px;
	font-family: inherit;
}

.bp-form textarea {
	min-height: 66px;
	padding: 8px;
}

.bp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.bp-actions button,
.bp-row button {
	min-height: 44px;
	min-width: 44px;
	padding: 8px 14px;
	font-size: 14px;
}

.bp-divergenz {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
}

.bp-divergenz-row {
	display: grid;
	gap: 3px;
	padding: 10px 12px;
	border-left: 4px solid var(--line);
	font-size: 13px;
}

@media (max-width: 640px) {
	.bp-felder { grid-template-columns: 1fr; }
	.bp-band { padding: 14px; }
}
/* 90-projection-status.css — owner: the shared projection/write status chips
 * (<accounts-action-status> and the advisor consulting surface).
 *
 * UI Consolidation slice 0: this was `src/assets/projection-status.css`,
 * linked by the component itself and by advisor/consulting.html — which meant
 * every route that rendered the component re-linked a 12 KB sheet. It is a
 * bundle partial now. */

[data-accounts-action-status] > [data-accounts-status-variant],
[data-forecast-consulting-status] > [data-forecast-status-variant] {
  display: none;
}

[data-accounts-action-status][data-accounts-status="accounts.advisor.create"] > [data-accounts-status-variant="accounts.advisor.create"],
[data-accounts-action-status][data-accounts-status="accounts.advisor.rename"] > [data-accounts-status-variant="accounts.advisor.rename"],
[data-accounts-action-status][data-accounts-status="accounts.advisor.reinvite"] > [data-accounts-status-variant="accounts.advisor.reinvite"],
[data-accounts-action-status][data-accounts-status="accounts.advisor.enable"] > [data-accounts-status-variant="accounts.advisor.enable"],
[data-accounts-action-status][data-accounts-status="accounts.advisor.disable"] > [data-accounts-status-variant="accounts.advisor.disable"],
[data-accounts-action-status][data-accounts-status="accounts.advisor.revoke"] > [data-accounts-status-variant="accounts.advisor.revoke"],
[data-accounts-action-status][data-accounts-status="accounts.advisor.device.revoke"] > [data-accounts-status-variant="accounts.advisor.device.revoke"],
[data-accounts-action-status][data-accounts-status="accounts.advisor.device.rename"] > [data-accounts-status-variant="accounts.advisor.device.rename"],
[data-accounts-action-status][data-accounts-status="accounts.organization.configure"] > [data-accounts-status-variant="accounts.organization.configure"],
[data-accounts-action-status][data-accounts-status="accounts.organization.create"] > [data-accounts-status-variant="accounts.organization.create"],
[data-accounts-action-status][data-accounts-status="accounts.organization.select"] > [data-accounts-status-variant="accounts.organization.select"],
[data-accounts-action-status][data-accounts-status="accounts.team.create"] > [data-accounts-status-variant="accounts.team.create"],
[data-accounts-action-status][data-accounts-status="accounts.team.select"] > [data-accounts-status-variant="accounts.team.select"],
[data-accounts-action-status][data-accounts-status="accounts.team.member.put"] > [data-accounts-status-variant="accounts.team.member.put"],
[data-accounts-action-status][data-accounts-status="accounts.team.member.remove"] > [data-accounts-status-variant="accounts.team.member.remove"],
[data-accounts-action-status][data-accounts-status="accounts.team.household.put"] > [data-accounts-status-variant="accounts.team.household.put"],
[data-accounts-action-status][data-accounts-status="accounts.team.household.remove"] > [data-accounts-status-variant="accounts.team.household.remove"],
[data-accounts-action-status][data-accounts-status="accounts.assignment.put"] > [data-accounts-status-variant="accounts.assignment.put"],
[data-accounts-action-status][data-accounts-status="accounts.assignment.remove"] > [data-accounts-status-variant="accounts.assignment.remove"],
[data-accounts-action-status][data-accounts-status="accounts.entitlement-template.apply"] > [data-accounts-status-variant="accounts.entitlement-template.apply"],
[data-accounts-action-status][data-accounts-status="accounts.onboarding.begin"] > [data-accounts-status-variant="accounts.onboarding.begin"],
[data-accounts-action-status][data-accounts-status="accounts.customer.reinvite"] > [data-accounts-status-variant="accounts.customer.reinvite"],
[data-accounts-action-status][data-accounts-status="accounts.announcement.post"] > [data-accounts-status-variant="accounts.announcement.post"],
[data-accounts-action-status][data-accounts-status="accounts.announcement.read"] > [data-accounts-status-variant="accounts.announcement.read"],
[data-accounts-action-status][data-accounts-status="accounts_action_complete"] > [data-accounts-status-variant="accounts_action_complete"],
[data-accounts-action-status][data-accounts-status="accounts_identity_handoff_pending"] > [data-accounts-status-variant="accounts_identity_handoff_pending"],
[data-accounts-action-status][data-accounts-status="accounts_local_identity_handoff_refused"] > [data-accounts-status-variant="accounts_local_identity_handoff_refused"],
[data-accounts-action-status][data-accounts-status="advisor_invitation_origin_refused"] > [data-accounts-status-variant="advisor_invitation_origin_refused"],
[data-accounts-action-status][data-accounts-status="advisor_create_conflict_refused"] > [data-accounts-status-variant="advisor_create_conflict_refused"],
[data-accounts-action-status][data-accounts-status="advisor_name_refused"] > [data-accounts-status-variant="advisor_name_refused"],
[data-accounts-action-status][data-accounts-status="advisor_rename_refused"] > [data-accounts-status-variant="advisor_rename_refused"],
[data-accounts-action-status][data-accounts-status="advisor_reinvite_refused"] > [data-accounts-status-variant="advisor_reinvite_refused"],
[data-accounts-action-status][data-accounts-status="customer_invitation_origin_refused"] > [data-accounts-status-variant="customer_invitation_origin_refused"],
[data-accounts-action-status][data-accounts-status="customer_create_refused"] > [data-accounts-status-variant="customer_create_refused"],
[data-accounts-action-status][data-accounts-status="customer_reinvite_refused"] > [data-accounts-status-variant="customer_reinvite_refused"],
[data-accounts-action-status][data-accounts-status="advisor_enable_refused"] > [data-accounts-status-variant="advisor_enable_refused"],
[data-accounts-action-status][data-accounts-status="advisor_disable_refused"] > [data-accounts-status-variant="advisor_disable_refused"],
[data-accounts-action-status][data-accounts-status="advisor_revoke_refused"] > [data-accounts-status-variant="advisor_revoke_refused"],
[data-accounts-action-status][data-accounts-status="advisor_device_revoke_refused"] > [data-accounts-status-variant="advisor_device_revoke_refused"],
[data-accounts-action-status][data-accounts-status="advisor_device_rename_refused"] > [data-accounts-status-variant="advisor_device_rename_refused"],
[data-accounts-action-status][data-accounts-status="device_name_refused"] > [data-accounts-status-variant="device_name_refused"],
[data-accounts-action-status][data-accounts-status="organization_name_refused"] > [data-accounts-status-variant="organization_name_refused"],
[data-accounts-action-status][data-accounts-status="organization_configure_refused"] > [data-accounts-status-variant="organization_configure_refused"],
[data-accounts-action-status][data-accounts-status="organization_create_refused"] > [data-accounts-status-variant="organization_create_refused"],
[data-accounts-action-status][data-accounts-status="organization_context_required_refused"] > [data-accounts-status-variant="organization_context_required_refused"],
[data-accounts-action-status][data-accounts-status="team_name_refused"] > [data-accounts-status-variant="team_name_refused"],
[data-accounts-action-status][data-accounts-status="team_create_refused"] > [data-accounts-status-variant="team_create_refused"],
[data-accounts-action-status][data-accounts-status="team_member_put_refused"] > [data-accounts-status-variant="team_member_put_refused"],
[data-accounts-action-status][data-accounts-status="team_member_remove_refused"] > [data-accounts-status-variant="team_member_remove_refused"],
[data-accounts-action-status][data-accounts-status="team_household_put_refused"] > [data-accounts-status-variant="team_household_put_refused"],
[data-accounts-action-status][data-accounts-status="team_household_remove_refused"] > [data-accounts-status-variant="team_household_remove_refused"],
[data-accounts-action-status][data-accounts-status="assignment_conflict_refused"] > [data-accounts-status-variant="assignment_conflict_refused"],
[data-accounts-action-status][data-accounts-status="assignment_remove_refused"] > [data-accounts-status-variant="assignment_remove_refused"],
[data-accounts-action-status][data-accounts-status="assignment_protected_refused"] > [data-accounts-status-variant="assignment_protected_refused"],
[data-accounts-action-status][data-accounts-status="default_product_removal_refused"] > [data-accounts-status-variant="default_product_removal_refused"],
[data-accounts-action-status][data-accounts-status="entitlement_template_apply_refused"] > [data-accounts-status-variant="entitlement_template_apply_refused"],
[data-accounts-action-status][data-accounts-status="announcement_shape_refused"] > [data-accounts-status-variant="announcement_shape_refused"],
[data-accounts-action-status][data-accounts-status="announcement_post_refused"] > [data-accounts-status-variant="announcement_post_refused"],
[data-accounts-action-status][data-accounts-status="announcement_read_refused"] > [data-accounts-status-variant="announcement_read_refused"],
[data-accounts-action-status][data-accounts-status="custody_event_append_refused"] > [data-accounts-status-variant="custody_event_append_refused"],
[data-accounts-action-status][data-accounts-status="capability_product_assignment_refused"] > [data-accounts-status-variant="capability_product_assignment_refused"],
[data-accounts-action-status][data-accounts-status="capability_expired_refused"] > [data-accounts-status-variant="capability_expired_refused"],
[data-accounts-action-status][data-accounts-status="capability_rotated_refused"] > [data-accounts-status-variant="capability_rotated_refused"],
[data-accounts-action-status][data-accounts-status="capability_scope_refused"] > [data-accounts-status-variant="capability_scope_refused"],
[data-accounts-action-status][data-accounts-status="capability_account_refused"] > [data-accounts-status-variant="capability_account_refused"],
[data-accounts-action-status][data-accounts-status="capability_invalid_refused"] > [data-accounts-status-variant="capability_invalid_refused"],
[data-accounts-action-status][data-accounts-status="device_unknown_refused"] > [data-accounts-status-variant="device_unknown_refused"],
[data-accounts-action-status][data-accounts-status="device_revoked_refused"] > [data-accounts-status-variant="device_revoked_refused"],
[data-accounts-action-status][data-accounts-status="request_proof_required_refused"] > [data-accounts-status-variant="request_proof_required_refused"],
[data-accounts-action-status][data-accounts-status="request_proof_signature_refused"] > [data-accounts-status-variant="request_proof_signature_refused"],
[data-accounts-action-status][data-accounts-status="request_nonce_refused"] > [data-accounts-status-variant="request_nonce_refused"],
[data-accounts-action-status][data-accounts-status="request_replay_refused"] > [data-accounts-status-variant="request_replay_refused"],
[data-accounts-action-status][data-accounts-status="accounts_write_unknown"] > [data-accounts-status-variant="accounts_write_unknown"],
[data-accounts-action-status][data-accounts-status="service_unavailable_refused"] > [data-accounts-status-variant="service_unavailable_refused"],
[data-accounts-action-status][data-accounts-status="accounts_refresh_refused_after_commit"] > [data-accounts-status-variant="accounts_refresh_refused_after_commit"],
[data-accounts-action-status][data-accounts-status="accounts_projection_refused_after_commit"] > [data-accounts-status-variant="accounts_projection_refused_after_commit"],
[data-accounts-action-status][data-accounts-status="accounts_action_refused"] > [data-accounts-status-variant="accounts_action_refused"] {
  display: inline;
}

[data-forecast-consulting-status][data-forecast-status="forecast.planning-version.save"] > [data-forecast-status-variant="forecast.planning-version.save"],
[data-forecast-consulting-status][data-forecast-status="forecast.planning-version.compare"] > [data-forecast-status-variant="forecast.planning-version.compare"],
[data-forecast-consulting-status][data-forecast-status="forecast.planning-version.restore"] > [data-forecast-status-variant="forecast.planning-version.restore"],
[data-forecast-consulting-status][data-forecast-status="forecast.consulting.csv-export"] > [data-forecast-status-variant="forecast.consulting.csv-export"],
[data-forecast-consulting-status][data-forecast-status="forecast.consulting.broadcast-start"] > [data-forecast-status-variant="forecast.consulting.broadcast-start"],
[data-forecast-consulting-status][data-forecast-status="forecast_action_complete"] > [data-forecast-status-variant="forecast_action_complete"],
[data-forecast-consulting-status][data-forecast-status="forecast_action_refused"] > [data-forecast-status-variant="forecast_action_refused"] {
  display: inline;
}
/* 93-forecast.css — owner: the Future / forecast surface (!forecast/*, the
 * forecast fields, the scenario workspace, the runway ledger and the advisor
 * presentation view).
 *
 * Folded out of the deleted 90-legacy.css by UI Consolidation slice 0.
 * Slice 3 re-authors the layout onto toolkit tokens and centres the customer
 * canvas at --k-measure-forecast. Chart series colours stay as data encoding. */

/* ------------------------------- forecast ------------------------------ */
.fc-page {
  max-inline-size: var(--k-measure-forecast);
  margin-inline: auto;
}
.fc-sub { color: var(--k-text-muted); margin: var(--k-space-1) 0 0; }
.fc-chart { width: 100%; height: auto; background: var(--k-surface); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); margin: 14px 0; }
.fc-columns { display: grid; grid-template-columns: 3fr 2fr; gap: var(--k-space-5); }
@media (max-width: 760px) { .fc-columns { grid-template-columns: 1fr; } }
.fc-field { border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-surface); padding: var(--k-space-3) 14px; margin-bottom: 10px; }
.fc-field.fc-true { border-color: var(--k-frog); background: var(--k-primary-soft); }
.fc-field-head { display: flex; gap: var(--k-space-2); align-items: baseline; }
.fc-field-head .badge { margin-left: 0; }
.fc-field-head .fc-value { margin-left: auto; font-weight: 700; }
.fc-hint { font-size: 12.5px; color: var(--k-text-muted); margin: 6px 0; }
.fc-capture-link { color: var(--k-primary); }
.fc-edit { display: flex; gap: var(--k-space-2); }
.fc-edit input { flex: 1; }
.fc-guidance { padding-left: 18px; display: grid; gap: var(--k-space-2); }
.fc-guidance .fc-primary { color: var(--k-primary); font-weight: 700; }
.fc-guidance .fc-model-note { color: var(--k-text-muted); font-size: 13px; }

.fc-workspace { margin: 20px 0 var(--k-space-5); padding: clamp(16px, 3vw, 26px); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-canvas); }
.fc-document-badge { padding: 5px 9px; border: var(--k-border-width) solid var(--k-border); border-radius: 999px; color: var(--k-primary); background: var(--k-surface); font-size: 11px; font-weight: 750; }
.fc-scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: var(--k-space-4) 0; }
.fc-scenario-card { display: grid; align-content: start; gap: var(--k-space-2); min-width: 0; padding: 14px; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-surface); }
.fc-scenario-card.is-selected { border-color: var(--k-primary); box-shadow: inset 0 0 0 1px var(--k-primary); }
.fc-scenario-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-space-2); }
.fc-scenario-card-head span, .fc-scenario-until { color: var(--k-text-muted); font-size: 11px; }
.fc-scenario-gap { font: var(--k-font-section); font-variant-numeric: tabular-nums; }
.fc-scenario-card button { margin-top: 2px; }
.fc-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-space-3); }
.fc-control-panel { min-width: 0; padding: var(--k-space-4); border-top: 3px solid var(--k-frog); background: var(--k-surface); }
.fc-control-panel h4 { margin: 0; font-size: 16px; }
.fc-control-panel > p { margin: 6px 0 14px; color: var(--k-text-muted); font-size: 12.5px; }
.fc-assumption-grid { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(80px, .65fr) auto; gap: var(--k-space-2); align-items: center; }
.fc-assumption-grid label { font-size: 13px; font-weight: 700; }
.fc-assumption-grid label span { color: var(--k-text-muted); font-weight: 500; }
.fc-assumption-grid input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.fc-assumption-grid button { padding-inline: var(--k-space-3); }
.fc-segmented { display: inline-flex; flex-wrap: wrap; gap: var(--k-space-1); margin-top: var(--k-space-3); padding: 3px; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-control); background: var(--k-primary-soft); }
.fc-segmented button { border: var(--k-border-width) solid transparent; background: transparent; color: var(--k-text); }
.fc-segmented button[aria-pressed="true"] { border-color: var(--k-primary); background: var(--k-surface); color: var(--k-primary); }
.fc-product-catalog { display: grid; gap: 6px; }
.fc-product-option, .fc-active-product { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-3); padding: 9px 0; border-top: 1px dotted var(--k-border); }
.fc-product-option > div { display: grid; gap: 2px; }
.fc-product-option span { color: var(--k-text-muted); font-size: 11px; }
.fc-product-option button, .fc-active-product button { flex: 0 0 auto; }
.fc-active-product { color: var(--k-primary); font-size: 13px; font-weight: 700; }
.fc-chart-switcher { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-4); margin-top: var(--k-space-3); padding-top: var(--k-space-3); border-top: var(--k-border-width) solid var(--k-border); }
.fc-chart-switcher > div:first-child { display: grid; gap: 2px; }
.fc-chart-switcher span { color: var(--k-text-muted); font-size: 12px; }
.fc-chart-switcher .fc-segmented { margin-top: 0; }
.fc-deferred-contract { margin-top: var(--k-space-3); padding: 10px var(--k-space-3); border: 1px dashed var(--k-border); border-radius: var(--k-radius-control); background: var(--k-surface); }
.fc-deferred-contract summary { cursor: pointer; font-weight: 750; }
.fc-deferred-contract summary:focus-visible { outline: var(--k-focus-width) solid var(--k-focus-color); outline-offset: var(--k-focus-offset); }
.fc-deferred-contract p { color: var(--k-text-muted); font-size: 12.5px; }
.fc-deferred-contract ul { columns: 2; padding-left: 20px; font-size: 11px; }

@media (max-width: 800px) {
  .fc-scenario-grid, .fc-workspace-grid { grid-template-columns: 1fr; }
  .fc-scenario-card-head, .fc-chart-switcher { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .fc-workspace { padding: 13px; border-radius: var(--k-radius-card); }
  .fc-assumption-grid { grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr); }
  .fc-assumption-grid button { grid-column: 1 / -1; width: 100%; }
  .fc-deferred-contract ul { columns: 1; }
}

/* Forecast runway: a calm financial ledger, dense without dashboard chrome. */
.fc-runway {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 3fr) minmax(210px, 2fr);
  gap: 28px; align-items: end; margin: 18px 0 14px; padding: clamp(22px, 4vw, 36px);
  border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-canvas);
}
.fc-runway::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -96px; top: -112px;
  border: 38px solid color-mix(in srgb, var(--k-frog) 18%, transparent); border-radius: 50%; pointer-events: none;
}
.fc-runway h2 { max-width: 590px; font: var(--k-font-greeting); letter-spacing: -0.035em; }
.fc-runway-status { display: flex; align-items: center; gap: var(--k-space-2); margin: var(--k-space-4) 0 0; color: var(--k-text-muted); font-weight: 650; }
.fc-runway-status > span { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; background: var(--k-surface); }
.fc-runway[data-status="danger"] .fc-runway-status { color: var(--k-danger); }
.fc-runway[data-status="warning"] .fc-runway-status { color: var(--k-warning-text); }
.fc-runway[data-status="success"] .fc-runway-status { color: var(--k-primary); }
.fc-coverage { position: relative; z-index: 1; display: grid; gap: 7px; }
.fc-coverage label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.fc-coverage span { color: var(--k-text-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.fc-coverage progress { appearance: none; width: 100%; height: 13px; border: 0; border-radius: 999px; overflow: hidden; background: var(--k-border); }
.fc-coverage progress::-webkit-progress-bar { background: var(--k-border); }
.fc-coverage progress::-webkit-progress-value { background: repeating-linear-gradient(135deg, var(--k-primary) 0 8px, var(--k-frog) 8px 14px); }
.fc-coverage progress::-moz-progress-bar { background: repeating-linear-gradient(135deg, var(--k-primary) 0 8px, var(--k-frog) 8px 14px); }
.fc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); overflow: hidden; }
.fc-kpis div { min-width: 0; padding: 15px 17px; background: var(--k-surface); }
.fc-kpis div + div { border-left: var(--k-border-width) solid var(--k-border); }
.fc-kpis dt { color: var(--k-text-muted); font-size: 11px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.fc-kpis dd { margin: 2px 0 0; font: var(--k-font-section); font-variant-numeric: tabular-nums; }
.fc-position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.fc-ledger, .fc-drivers { border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); padding: 18px 20px; }
.fc-ledger h3, .fc-drivers h3 { margin-top: 2px; }
.fc-ledger dl { margin: 14px 0 0; }
.fc-ledger dl div { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; border-top: 1px dotted var(--k-border); }
.fc-ledger dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.fc-ledger-total { margin-top: var(--k-space-1); border-top: 2px solid var(--k-text) !important; }
.fc-drivers ol { display: grid; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none; }
.fc-drivers li > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.fc-drivers li strong { overflow-wrap: anywhere; }
.fc-drivers li span { color: var(--k-text-muted); font-variant-numeric: tabular-nums; }
.fc-driver-track { display: block; height: 7px; margin-top: 5px; border-radius: 999px; background: var(--k-primary-soft); overflow: hidden; }
.fc-driver-track span { display: block; height: 100%; border-radius: inherit; background: var(--k-primary); }
.fc-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fc-figure { min-width: 0; margin: 0; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); padding: var(--k-space-4) var(--k-space-4) 10px; background: var(--k-surface); }
.fc-figure figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-space-3); min-height: 64px; }
.fc-figure figcaption > span:first-child { display: grid; gap: 2px; }
.fc-figure figcaption strong { font-size: 16px; line-height: 1.25; }
.fc-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 10px; color: var(--k-text-muted); font-size: 10px; }
.fc-chart-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border: 1px solid currentColor; border-radius: 2px; }
.fc-chart-legend [data-series="cashflow"]::before { background: #dbe8a1; }
.fc-chart-legend [data-series="income"]::before { background: var(--k-primary); }
.fc-chart-legend [data-series="expenses"]::before { background: var(--k-danger); }
.fc-chart-detailed { margin: var(--k-space-2) 0 0; border: 0; border-radius: var(--k-radius-control); background: var(--k-surface); }
.fc-axis-zero { stroke: var(--k-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.fc-axis-label, .fc-calendar-year { fill: var(--k-text-muted); font-size: 10px; text-anchor: middle; }
.fc-liquidity-bar { fill: #cbdc83; }
.fc-liquidity-bar.is-negative { fill: #e6a59f; }
.fc-line-income, .fc-line-expenses { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fc-line-income { stroke: var(--k-primary); }
.fc-line-expenses { stroke: var(--k-danger); }
.fc-wealth-bar, .fc-wealth-legend span::before { fill: #9ab04a; background: #9ab04a; }
.fc-wealth-bar[data-component="rentalProperty"], .fc-wealth-legend [data-component="rentalProperty"]::before { fill: #61745f; background: #61745f; }
.fc-wealth-bar[data-component="privatePensionCapital"], .fc-wealth-legend [data-component="privatePensionCapital"]::before { fill: #d4a83e; background: #d4a83e; }
.fc-wealth-bar[data-component="securitiesDepot"], .fc-wealth-legend [data-component="securitiesDepot"]::before { fill: #577f93; background: #577f93; }
.fc-wealth-bar[data-component="liquidityReserve"], .fc-wealth-legend [data-component="liquidityReserve"]::before { fill: #9fc8bf; background: #9fc8bf; }
.fc-wealth-bar[data-component="businessValue"], .fc-wealth-legend [data-component="businessValue"]::before { fill: #9a745d; background: #9a745d; }
.fc-wealth-bar[data-component="cashReserve"], .fc-wealth-legend [data-component="cashReserve"]::before { fill: #cdd1c6; background: #cdd1c6; }
.fc-chart-empty { min-height: 190px; display: grid; place-content: center; gap: 5px; padding: 28px; text-align: center; border: 1px dashed var(--k-border); border-radius: var(--k-radius-card); background: var(--k-canvas); }
.fc-chart-empty span { color: var(--k-text-muted); font-size: 13px; }
.fc-calendar-section { margin: 14px 0 var(--k-space-5); padding: 18px 20px 20px; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); }
.fc-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--k-space-4); }
.fc-section-heading h3 { margin-top: 2px; }
.fc-funding-legend { display: flex; gap: var(--k-space-3); color: var(--k-text-muted); font-size: 11px; }
.fc-funding-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.fc-funding-legend .is-funded::before { background: var(--k-primary); }
.fc-funding-legend .is-unfunded::before { box-shadow: inset 0 0 0 2px var(--k-danger); background: var(--k-surface); }
.fc-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(2px, 1fr)); gap: 1px; height: 18px; margin: 14px 0 18px; overflow: hidden; border-radius: 5px; }
.fc-timeline span.is-funded { background: var(--k-primary); }
.fc-timeline span.is-unfunded { background: repeating-linear-gradient(135deg, var(--k-surface) 0 2px, #d98d86 2px 4px); border-top: 1px solid #c87870; border-bottom: 1px solid #c87870; }
.fc-calendar-scroll { overflow-x: auto; padding: var(--k-space-1) 2px var(--k-space-2); border-radius: var(--k-radius-control); }
.fc-calendar-scroll:focus-visible { outline: var(--k-focus-width) solid var(--k-focus-color); outline-offset: var(--k-focus-offset); }
.fc-life-calendar { display: block; min-width: 100%; height: auto; max-height: 190px; }
.fc-life-calendar circle.is-funded { fill: var(--k-primary); }
.fc-life-calendar circle.is-unfunded { fill: var(--k-surface); stroke: var(--k-danger); stroke-width: 1.6; }

/* Forecast explanations and customer-grade ledger details. */
.fc-explanation { margin-top: 9px; font: var(--k-font-meta); }
.fc-explanation > summary, .fc-explanation-steps > summary, .fc-annual-details > summary {
  width: fit-content; cursor: pointer; color: var(--k-primary); font-weight: 750;
}
.fc-explanation summary:focus-visible, .fc-annual-details summary:focus-visible,
.fc-detail-scroll:focus-visible {
  outline: var(--k-focus-width) solid var(--k-focus-color); outline-offset: 3px;
}
.fc-explanation-body {
  position: absolute; z-index: 4; width: min(520px, calc(100vw - 44px)); max-height: min(620px, 75vh);
  margin-top: var(--k-space-2); padding: var(--k-space-4); overflow: auto; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card);
  background: var(--k-surface); box-shadow: var(--k-shadow-popover); color: var(--k-text);
}
.fc-explanation-body > p:first-child { margin-top: 0; }
.fc-formula-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: var(--k-space-3) 0; }
.fc-formula-meta span { display: grid; gap: 2px; min-width: 0; color: var(--k-text-muted); font-size: 11px; }
.fc-formula-meta code, .fc-formula code { overflow-wrap: anywhere; color: var(--k-text); }
.fc-formula { display: grid; gap: var(--k-space-1); padding: 10px 0; border-top: 1px dotted var(--k-border); }
.fc-formula span { color: var(--k-text-muted); }
.fc-formula code { padding: 7px 9px; border-radius: var(--k-radius-control); background: var(--k-primary-soft); white-space: normal; }
.fc-explanation-steps { margin: 10px 0; }
.fc-explanation-steps ul { margin: var(--k-space-2) 0; padding: 0; list-style: none; }
.fc-explanation-steps li, .fc-explanation-facts div { display: flex; justify-content: space-between; gap: var(--k-space-3); padding: 5px 0; border-top: 1px dotted var(--k-border); }
.fc-explanation-facts { margin: 10px 0; }
.fc-explanation-facts dd { margin: 0; text-align: right; }
.fc-caveat { color: var(--k-text-muted); font-size: 11px; }

.fc-details { margin: 14px 0 26px; padding: clamp(17px, 3vw, 24px); border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-card); background: var(--k-surface); }
.fc-details h3, .fc-details h4 { margin: 2px 0 10px; }
.fc-truth-state { margin: var(--k-space-4) 0; padding: 14px var(--k-space-4); border-left: 4px solid var(--k-primary); background: var(--k-primary-soft); }
.fc-truth-state > strong { font: var(--k-font-section); }
.fc-truth-state p { margin: var(--k-space-1) 0 var(--k-space-2); color: var(--k-text-muted); }
.fc-truth-state ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.fc-truth-state li { padding: var(--k-space-1) var(--k-space-2); border: var(--k-border-width) solid var(--k-border); border-radius: 999px; background: var(--k-surface); font-size: 11px; }
.fc-detail-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: 20px; }
.fc-detail-grid > section { min-width: 0; }
.fc-detail-scroll { max-width: 100%; overflow: auto; border: var(--k-border-width) solid var(--k-border); border-radius: var(--k-radius-control); }
.fc-detail-scroll table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-detail-scroll th, .fc-detail-scroll td { padding: var(--k-space-2) 10px; border-bottom: var(--k-border-width) solid var(--k-border); text-align: right; }
.fc-detail-scroll th:first-child, .fc-detail-scroll td:first-child { text-align: left; }
.fc-detail-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--k-canvas); color: var(--k-text-muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.fc-detail-scroll tbody tr:last-child > * { border-bottom: 0; }
.fc-detail-scroll tr[data-status="gap"] td:last-child span { color: var(--k-danger); }
.fc-detail-scroll tr[data-status="funded"] td:last-child span { color: var(--k-primary); }
.fc-detail-scroll td:last-child span { display: block; font-size: 10px; font-weight: 750; }
.fc-life-hint { padding: 13px 14px; border-top: 3px solid var(--k-frog); background: var(--k-canvas); }
.fc-life-hint p { margin: 5px 0 0; color: var(--k-text-muted); font-size: 12.5px; }
.fc-annual-details { margin-top: 18px; padding-top: 14px; border-top: var(--k-border-width) solid var(--k-border); }
.fc-annual-details > p { color: var(--k-text-muted); font-size: 12px; }
.fc-annual-details .fc-detail-scroll { max-height: 420px; }

@media (max-width: 760px) {
  .fc-runway { grid-template-columns: 1fr; gap: 20px; }
  .fc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-kpis div + div { border-left: 0; }
  .fc-kpis div:nth-child(even) { border-left: var(--k-border-width) solid var(--k-border); }
  .fc-kpis div:nth-child(n + 3) { border-top: var(--k-border-width) solid var(--k-border); }
  .fc-position-grid, .fc-chart-grid { grid-template-columns: 1fr; }
  .fc-figure figcaption, .fc-section-heading { flex-direction: column; }
  .fc-chart-legend { justify-content: flex-start; }
  .fc-wealth-legend { display: none; }
  .fc-calendar-section { padding: var(--k-space-4) var(--k-space-3); }
  .fc-detail-grid { grid-template-columns: 1fr; }
  .fc-explanation-body { position: fixed; inset: auto 12px 12px; width: auto; max-height: 72vh; }
  .fc-formula-meta { grid-template-columns: 1fr; }
  .fc-edit input { min-height: var(--k-control-height); font-size: 16px; }
  .fc-edit button { min-height: var(--k-control-height); }
}

@media (prefers-reduced-motion: reduce) {
  a.card-teaser { transition: none; }
}

/* Forecast presentation view (!advisor/presentation.html, a standalone page). */
.presentation-body {
	min-height: 100vh;
	margin: 0;
	background: var(--k-canvas);
}

.forecast-presentation {
	width: min(var(--k-measure-forecast), calc(100% - 3rem));
	margin: 0 auto;
	padding: 3rem 0;
}

.forecast-presentation > header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 3rem;
}

.forecast-presentation h1,
.forecast-presentation h2 {
	margin: 0;
}

.presentation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

.presentation-grid article {
	display: grid;
	gap: .4rem;
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--k-border), transparent 20%);
	border-radius: var(--k-radius-card);
	background: var(--k-surface);
	box-shadow: var(--k-shadow-popover);
}

.presentation-grid article > strong {
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1;
}

.presentation-grid dl {
	display: grid;
	gap: .45rem;
	margin: 1rem 0 0;
}

.presentation-grid dl > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.presentation-grid dd {
	margin: 0;
	font-weight: 700;
}

.presentation-note {
	margin-top: 2rem;
	color: var(--k-text-muted);
	text-align: center;
}

@media (max-width: 700px) {
	.consulting-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.consulting-toolbar .card-action-row {
		align-items: stretch;
		flex-direction: column;
	}

	.forecast-presentation {
		width: min(100% - 1.5rem, var(--k-measure-forecast));
		padding: 1.5rem 0;
	}
}
/* Haushaltsordner prototype — Ordnerübersicht (products-range-kickoff).
 * UI Consolidation slice 0: this sheet used to be inlined into the route
 * content as a <style> block by _components/haushalt-ordner.html, so it entered
 * and left with the main frame. It is a bundle partial now; .badge-pending and
 * .demo-badge come from 80-vault.css, which is always loaded too.
 *
 * §4.7/§4.8, and this file is where they are easiest to break:
 * - No progress bar, no ring, no percentage, no meter. There is nothing here
 *   to fill up.
 * - No colour-only encoding. Every status carries a word; the row accent is a
 *   left border whose *presence* repeats what the word already says.
 * - No red for an incomplete Ordner. The only warm accent is reserved for an
 *   expired document date, and it sits beside the word "nicht gültig".
 */

.ho-head { margin: 22px 0 0; }
.ho-head h1 { margin: 2px 0 6px; font-size: clamp(24px, 4vw, 34px); line-height: 1.1; }
.ho-head p { margin: 0; color: var(--muted); max-width: 68ch; line-height: 1.55; }

.ho-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 0; padding: 12px 16px;
  border: 1px solid var(--green); border-radius: 12px;
  background: var(--green-soft);
  color: var(--ink); font-size: 13px; line-height: 1.5;
}
.ho-banner .badge, .ho-banner .demo-badge { margin-left: 0; flex: none; }
.ho-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; line-height: 1.5; max-width: 78ch; }

.ho-katalog {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline;
  margin: 14px 0 0; padding: 10px 14px;
  border: 1px dashed var(--line); border-radius: 12px;
  font-size: 12px; color: var(--muted);
}
.ho-katalog strong { color: var(--ink); font-size: 13px; }

.ho-section-head { margin: 26px 0 0; }
.ho-section-head h2 { margin: 0 0 4px; font-size: 21px; }
.ho-section-head h3 { margin: 0 0 4px; font-size: 16px; }
.ho-section-head p { margin: 0; color: var(--muted); font-size: 13px; max-width: 72ch; line-height: 1.55; }

/* ------------------------------- Zählwerte --------------------------------- */
/* Zählwerte, ausdrücklich kein Punktestand: eine Zahl und ein Satz, keine
 * Fläche, die sich füllt. */
.ho-zaehlwerte { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ho-zaehlwerte-satz { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; }
.ho-zaehlwerte-details { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.ho-zaehlwerte-details li { font-size: 13px; color: var(--muted); }
.ho-zaehlwerte-fussnote { margin: 8px 0 0; font-size: 11px; color: var(--muted); }

/* ------------------------------ Bausteinzeile ------------------------------ */
.ho-bausteine { display: grid; gap: 10px; margin: 14px 0 0; }
.ho-row {
  border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 14px; background: #fff; padding: 13px 16px;
}
.ho-row[data-status="erfuellt"] { border-left-color: var(--green-dark); }
.ho-row[data-status="nicht_anwendbar"] { border-left-style: dashed; }
.ho-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ho-row-head strong { font-size: 15px; }
.ho-row-status { margin-left: auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.ho-row-kind { font-size: 11px; color: var(--muted); }
.ho-row-grund { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.ho-row-detail { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.ho-row-abgelaufen { color: #b7791f; font-weight: 600; }
.ho-row-slots { margin: 6px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--muted); word-break: break-all; }

/* Herkunftsleiter: Wörter, nie nur Farbe. Die vierte Stufe ist gezeichnet und
 * durchgestrichen — sichtbar unerreichbar statt still weggelassen. */
.ho-leiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.ho-step { font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: #fff; }
.ho-step.is-current { background: var(--green-dark); border-color: var(--green-dark); color: #fff; font-weight: 600; }
.ho-step.is-unavailable { opacity: .55; text-decoration: line-through; }
.ho-step-note { font-size: 11px; color: var(--muted); margin: 5px 0 0; }

.ho-dims { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.ho-dim { font-size: 11px; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); background: #fafbf5; }
.ho-dim-optional { border-style: dashed; }

.ho-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.ho-actions button { font-size: 12px; padding: 6px 14px; }
.ho-actions input { max-width: 220px; font-size: 12px; }
.ho-action-hint { margin: 6px 0 0; font-size: 11px; color: var(--muted); line-height: 1.45; }

/* ------------------------------- Aufgaben ---------------------------------- */
.ho-tasks { display: grid; gap: 10px; margin: 14px 0 0; }
.ho-task { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 13px 16px; }
.ho-task-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ho-task-rang { font-size: 13px; font-weight: 700; color: var(--muted); }
.ho-task-head strong { font-size: 15px; }
.ho-task-inputs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.ho-task-inputs li { font-size: 12px; color: var(--muted); }
.ho-task-inputs li + li::before { content: "· "; }
.ho-task-inputs b { color: var(--ink); font-weight: 600; }
.ho-task-hint { margin: 7px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.ho-task-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; }
/* R12: die vierte Option ist identisch gestaltet — ein legitimes Ergebnis,
 * kein Notausgang. */
.ho-task-options button { font-size: 12px; padding: 6px 14px; }
.ho-task-reason { max-width: 260px; font-size: 12px; }

/* ---------------------------- Fassungsgruppe -------------------------------- */
.ho-fassung { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 14px; background: #fff; padding: 13px 16px; margin: 12px 0 0; }
.ho-fassung-mitglieder { display: grid; gap: 10px; margin: 10px 0 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ho-fassung-mitglied { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fafbf5; }
.ho-fassung-mitglied strong { font-size: 13px; }
.ho-fassung-mitglied p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* --------------------------- Notfall-Testansicht ---------------------------- */
.ho-notfall { margin: 14px 0 0; }
.ho-listen { display: grid; gap: 12px; margin: 12px 0 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ho-liste { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; }
.ho-liste h3 { margin: 0 0 8px; font-size: 15px; }
.ho-liste ul { margin: 0; padding-left: 18px; }
.ho-liste li { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.ho-liste li small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.ho-matrix { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 12px; }
.ho-matrix caption { text-align: left; color: var(--muted); font-size: 12px; padding-bottom: 6px; }
.ho-matrix th, .ho-matrix td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.ho-matrix th { font-weight: 600; }
.ho-matrix-scroll { overflow-x: auto; }

.ho-aktivieren {
  margin: 12px 0 0; padding: 11px 14px;
  border: 1px dashed var(--line); border-radius: 12px;
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.ho-aktivieren strong { color: var(--ink); }

/* -------------------------------- Prüfbericht ------------------------------- */
.ho-bericht { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; margin: 12px 0 0; }
.ho-bericht-kopf { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.ho-bericht-kopf strong { color: var(--ink); }
.ho-metadaten { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ho-metadaten li { font-size: 12px; color: var(--muted); line-height: 1.45; }
.ho-metadaten b { color: var(--ink); font-weight: 600; }
.ho-slotliste { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; word-break: break-all; }

.ho-back { display: inline-block; margin: 24px 0 8px; font-size: 13px; }

@media (max-width: 640px) {
  /* §4.3: ein Baustein je Zeile, Status + Grund + genau eine Handlung. */
  .ho-row-status { margin-left: 0; width: 100%; }
  .ho-zaehlwerte-satz { font-size: 15px; }
}
/* Kunden-Datenpool prototype — Faktenkarte surface (products-range-kickoff).
 * UI Consolidation slice 0: this sheet used to be inlined into the route
 * content as a <style> block by _components/datenpool-faktenkarte.html, so it
 * entered and left with the main frame. It is a bundle partial now, and the
 * semantic document/export rules are folded in below it.
 *
 * No colour-only encoding anywhere (spec §4.7): every provenance state carries
 * a word. No progress bar, no ring, no percentage — there is nothing here to
 * fill up. */

.dp-head { margin: 22px 0 0; }
.dp-head h1 { margin: 2px 0 6px; font-size: clamp(24px, 4vw, 34px); line-height: 1.1; }
.dp-head p { margin: 0; color: var(--muted); max-width: 68ch; line-height: 1.55; }

.dp-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 0; padding: 12px 16px;
  border: 1px solid var(--green); border-radius: 12px;
  background: var(--green-soft);
  color: var(--ink); font-size: 13px; line-height: 1.5;
}
.dp-banner .badge { margin-left: 0; flex: none; }
.dp-stub-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; line-height: 1.5; }
.dp-locked-note {
  margin: 12px 0 0; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: #fafbf5;
}

.dp-section-head { margin: 26px 0 0; }
.dp-section-head h2 { margin: 0 0 4px; font-size: 21px; }
.dp-section-head p { margin: 0; color: var(--muted); font-size: 13px; max-width: 68ch; line-height: 1.55; }

.dp-counts { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.dp-counts span strong { color: var(--ink); }

/* --------------------------------- slot card ------------------------------- */
.dp-slots { display: grid; gap: 12px; margin: 14px 0 0; }
.dp-slot { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; }
.dp-slot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.dp-slot-head strong { font-size: 15px; }
.dp-slot-value { margin-left: auto; font-size: 19px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.dp-slot-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.dp-slot-basis { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* a widerrufen slot says so — neutral register, no warning colour: a Widerruf
   is a supported outcome and is never framed as loss (GRADIENT-V2 §3.1) */
.dp-slot-widerrufen { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.dp-slot-consequence { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }

/* provenance ladder: a WORD, never only a colour */
.dp-ladder { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.dp-step {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: #fff;
}
.dp-step.is-current { background: var(--green-dark); border-color: var(--green-dark); color: #fff; font-weight: 600; }
.dp-step.is-unavailable { opacity: .55; text-decoration: line-through; }
.dp-step-note { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

.dp-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.dp-edit input { max-width: 190px; }
.dp-edit button { font-size: 12px; padding: 6px 14px; }
.dp-edit-hint { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

/* -------------------------------- conflicts -------------------------------- */
.dp-conflict {
  border: 1px solid var(--line); border-left: 4px solid var(--green-dark);
  border-radius: 14px; background: #fff; padding: 14px 16px; margin: 12px 0 0;
}
.dp-conflict-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.dp-conflict-head strong { font-size: 15px; }
.dp-conflict-cause { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.dp-conflict-pair { display: grid; gap: 10px; margin: 12px 0 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dp-fact { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fafbf5; }
.dp-fact-value { font-size: 17px; font-weight: 700; }
.dp-fact-line { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.dp-konfidenz { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.dp-resolution { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--green-soft); font-size: 13px; line-height: 1.5; }
.dp-open { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.dp-open button { font-size: 12px; padding: 6px 14px; margin-top: 6px; }

/* ----------------------------- Freigabevorschau ---------------------------- */
.dp-freigabe { display: grid; gap: 12px; margin: 14px 0 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dp-list { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; }
.dp-list h3 { margin: 0 0 8px; font-size: 15px; }
.dp-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dp-list li { font-size: 13px; line-height: 1.45; }
.dp-list li small { display: block; color: var(--muted); font-size: 12px; }
.dp-minimierung { margin: 12px 0 0; font-size: 13px; color: var(--ink); line-height: 1.55; }
.dp-grant-facts { display: grid; gap: 6px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* --------------------------------------------------------------------------
 * Semantic document surface, folded out of the deleted 90-legacy.css.
 * ----------------------------------------------------------------------- */

/* -------------------------- semantic document -------------------------- */
.semantic-preview-header { align-items: center; }
.semantic-preview-empty { color: var(--muted); border-top: 1px solid var(--line); padding-top: 20px; }
.semantic-export-toolbar {
  display: flex; align-items: end; justify-content: flex-end; gap: 14px;
  max-width: 900px; margin: 0 auto 16px;
}
.semantic-export-furniture { display: flex; align-items: center; gap: 7px; min-height: 38px; color: var(--muted); font-size: 13px; }
.semantic-document {
  display: grid; gap: 20px; max-width: 900px; margin: 0 auto;
  color: #20231d; font-family: Georgia, "Times New Roman", serif;
}
.semantic-inspected-document { max-width: 900px; margin: 0 auto; }
.semantic-export-source {
  position: fixed; left: -10000px; top: 0; width: 900px;
  visibility: hidden; pointer-events: none;
}
.semantic-inspection-toggle { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.semantic-inspection-toggle-label {
  display: inline-flex; align-items: center; min-height: 34px; margin: 0 0 10px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 5px; color: var(--muted); cursor: pointer; font-size: 13px;
}
.semantic-inspection-toggle:focus-visible + .semantic-inspection-toggle-label { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.semantic-inspection-toggle:checked + .semantic-inspection-toggle-label { border-color: var(--green-dark); background: var(--green-soft); color: var(--green-dark); }
.semantic-preview-stage { position: relative; }
.semantic-inspection-overlay { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.semantic-inspection-toggle:checked ~ .semantic-preview-stage .semantic-inspection-overlay { display: block; }
.semantic-inspection-overlay-page {
  position: absolute; left: var(--overlay-left); top: var(--overlay-top);
  width: var(--overlay-width); height: var(--overlay-height); pointer-events: none;
}
.semantic-inspection-box {
  position: absolute; left: var(--box-x); top: var(--box-y); width: max(2px, var(--box-w)); height: max(2px, var(--box-h));
  border: 1px solid rgba(31, 111, 235, 0.8); pointer-events: auto;
}
.semantic-inspection-word { border-color: rgba(31, 111, 235, 0.65); }
.semantic-inspection-line { border-color: rgba(174, 83, 24, 0.8); border-style: dashed; }
.semantic-inspection-region[data-region-source="semantic-node"] { border-color: rgba(24, 128, 56, 0.85); border-width: 2px; }
.semantic-inspection-region[data-region-source="producer-candidate"] { border-color: rgba(122, 70, 167, 0.75); border-style: dotted; }
.semantic-inspection-split { border-color: #c4362c; border-width: 2px; background: rgba(196, 54, 44, 0.18); }
.semantic-inspection-tooltip {
  display: none; position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5;
  width: max-content; max-width: min(320px, 80vw); padding: 4px 6px; border-radius: 3px;
  background: #171a14; color: #fff; font: 11px/1.35 system-ui, sans-serif;
}
.semantic-inspection-box:hover > .semantic-inspection-tooltip,
.semantic-inspection-box:focus-visible > .semantic-inspection-tooltip { display: block; }
.semantic-page {
  min-width: 0; padding: clamp(24px, 5vw, 56px);
  border: 1px solid #cfd4c5; border-radius: 6px; background: #fff;
  box-shadow: 0 8px 24px rgba(35, 40, 26, 0.08);
}
@media (min-width: 621px) {
  .semantic-document .semantic-page {
    display: grid; grid-template-columns: repeat(100, minmax(0, 1fr));
    grid-template-rows: repeat(100, minmax(0, 1fr));
    padding: 0; overflow: visible;
  }
  .semantic-document .semantic-page > * { min-width: 0; margin: 0; align-self: start; }
  .semantic-document .semantic-row {
    display: grid; grid-template-columns: repeat(100, minmax(0, 1fr));
    gap: 0; margin: 0; min-width: 0;
  }
  .semantic-document .semantic-column { min-width: 0; }
  .semantic-document .semantic-column > :first-child { margin-top: 0; }
  .semantic-document .semantic-column > :last-child { margin-bottom: 0; }
  .semantic-document .semantic-source-line { display: block; }
}
.semantic-page > :first-child { margin-top: 0; }
.semantic-page > :last-child { margin-bottom: 0; }
.semantic-page h1, .semantic-page h2, .semantic-page h3,
.semantic-page h4, .semantic-page h5, .semantic-page h6 {
  max-width: 100%; overflow-wrap: anywhere; color: #171a14; font-family: inherit;
}
.semantic-page h1 { font-size: 30px; line-height: 1.2; }
.semantic-page h2 { font-size: 24px; line-height: 1.25; }
.semantic-page h3 { font-size: 20px; line-height: 1.3; }
.semantic-page h4, .semantic-page h5, .semantic-page h6 { font-size: 17px; line-height: 1.35; }
.semantic-page p, .semantic-page li, .semantic-page td, .semantic-page th,
.semantic-page aside, .semantic-page figcaption, .semantic-page caption {
  max-inline-size: 100%; overflow-wrap: anywhere; word-break: break-word; line-height: 1.55;
}
.semantic-page ul, .semantic-page ol { box-sizing: border-box; min-width: 0; padding-inline-start: 1.25em; }
.semantic-page li { min-width: 0; }
.semantic-section { min-width: 0; margin: 18px 0; }
.semantic-row {
  display: flex;
  gap: clamp(18px, 4vw, 36px); align-items: start; margin: 18px 0;
}
.semantic-column { flex: var(--semantic-column-weight, 1) 1 0; min-width: 2ch; }
.semantic-page header, .semantic-page footer {
  display: flex; justify-content: space-between; gap: 16px;
  color: #69705f; font-family: system-ui, sans-serif; font-size: 12px;
}
.semantic-page header { margin-bottom: 26px; padding-bottom: 8px; border-bottom: 1px solid #e2e5dc; }
.semantic-page footer { margin-top: 26px; padding-top: 8px; border-top: 1px solid #e2e5dc; }
.semantic-page-number { flex: 0 0 auto; }
.semantic-page aside {
  margin: 16px 0; padding: 12px 14px; border-left: 3px solid #8e9b63;
  background: #f5f7ef;
}
.semantic-page .semantic-unresolved { border-left-color: #a86355; background: #fbf1ee; }
.semantic-page figure { margin: 18px 0; padding: 16px; border: 1px solid #d9ddd1; }
.semantic-page figcaption, .semantic-page caption { color: #596050; font-style: italic; text-align: left; }
.semantic-table-scroll { max-width: 100%; margin: 18px 0; overflow-x: auto; }
.semantic-page table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; font-size: 14px; }
.semantic-page caption { padding: 0 0 8px; font-family: Georgia, "Times New Roman", serif; }
.semantic-page th, .semantic-page td { min-width: 90px; padding: 8px 10px; border: 1px solid #d5d9ce; text-align: left; vertical-align: top; }
.semantic-page th { background: #f0f3e9; font-weight: 700; }

@media (max-width: 620px) {
  .semantic-preview-header { align-items: flex-start; gap: 12px; }
  .semantic-export-toolbar { align-items: stretch; flex-direction: column; }
  .semantic-export-toolbar button { width: 100%; }
  .semantic-document { gap: 12px; }
  .semantic-page { padding: 22px 18px; }
  .semantic-row { display: block; }
  .semantic-column + .semantic-column { margin-top: 20px; padding-top: 20px; border-top: 1px solid #d9ddd1; }
  .semantic-page h1 { font-size: 26px; }
  .semantic-page h2 { font-size: 22px; }
}
/* Protect prototype — Versorgungslücke surface (products-range-kickoff).
 * UI Consolidation slice 0: this sheet used to be inlined into the route
 * content as a <style> block by _components/protect-view.html, so it entered
 * and left with the main frame. It is a bundle partial now.
 *
 * NO TRAFFIC LIGHT ANYWHERE. There is deliberately no red, amber or green
 * state class in this file: a Absicherungsstufe is not good or bad, it is more
 * or less transferred. The shipped `runwayOf` traffic-light vocabulary
 * (status danger/warning/success) is right there and is not reused (F2).
 *
 * NO COLOUR-ONLY ENCODING. Every bar in the chart has its word and its number
 * beside it, and the same computed series is rendered again as a table. */

.pt-head { margin: 22px 0 0; }
.pt-head h1 { margin: 2px 0 6px; font-size: clamp(24px, 4vw, 34px); line-height: 1.1; }
.pt-head p { margin: 0; color: var(--muted); max-width: 68ch; line-height: 1.55; }

.pt-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 0; padding: 12px 16px;
  border: 1px solid var(--green); border-radius: 12px;
  background: var(--green-soft);
  color: var(--ink); font-size: 13px; line-height: 1.5;
}
.pt-banner .badge { margin-left: 0; flex: none; }

.pt-claim {
  margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--green-dark);
  font-size: 15px; line-height: 1.55; max-width: 68ch;
}
.pt-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; line-height: 1.5; max-width: 78ch; }
.pt-locked-note {
  margin: 12px 0 0; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: #fafbf5;
}

.pt-honesty { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.pt-honesty li { font-size: 12px; color: var(--muted); line-height: 1.5; padding-left: 16px; position: relative; }
.pt-honesty li::before { content: "·"; position: absolute; left: 4px; color: var(--green-dark); font-weight: 700; }

.pt-section { margin: 30px 0 0; }
.pt-section h2 { margin: 0 0 4px; font-size: 21px; }
.pt-section > p { margin: 0; color: var(--muted); font-size: 13px; max-width: 72ch; line-height: 1.55; }
.pt-section h3 { margin: 18px 0 6px; font-size: 15px; }

.pt-slot-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }

/* -------------------------------- Ereigniswahl ------------------------------ */
.pt-events { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.pt-event {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 12px 16px; min-width: 240px; flex: 1 1 260px;
}
.pt-event[data-current="true"] { border-color: var(--green-dark); border-width: 2px; }
.pt-event strong { display: block; font-size: 15px; }
.pt-event p { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.pt-event button { margin: 10px 0 0; font-size: 12px; padding: 6px 14px; }

.pt-facts { display: grid; gap: 6px; margin: 14px 0 0; }
.pt-facts p { margin: 0; font-size: 13px; line-height: 1.55; }

/* ------------------------------- Personen / Ströme -------------------------- */
.pt-people { display: grid; gap: 8px; margin: 12px 0 0; }
.pt-person {
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.pt-person strong { font-size: 15px; }
.pt-person .pt-amount { margin-left: auto; font-size: 18px; font-weight: 700; white-space: nowrap; }
.pt-person .pt-status { font-size: 12px; font-weight: 600; }
.pt-person small { flex-basis: 100%; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* --------------------------------- Leistungen ------------------------------- */
.pt-benefits { display: grid; gap: 10px; margin: 12px 0 0; }
.pt-benefit { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 16px; }
.pt-benefit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pt-benefit-head strong { font-size: 15px; }
.pt-benefit-head .pt-amount { margin-left: auto; font-size: 18px; font-weight: 700; white-space: nowrap; }
.pt-benefit p { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.pt-marker {
  display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px dashed var(--line); color: var(--muted); background: #fff;
}

/* ----------------------------------- Lücke ---------------------------------- */
.pt-gap {
  margin: 14px 0 0; padding: 16px 18px;
  border: 2px solid var(--green-dark); border-radius: 16px; background: #fff;
}
.pt-gap-value { font-size: clamp(26px, 5vw, 38px); font-weight: 800; line-height: 1.1; }
.pt-gap-band { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
.pt-gap-band strong { font-weight: 700; }
.pt-gap-path { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ------------------------------- Diagramm + Tabelle -------------------------- */
.pt-figure { margin: 14px 0 0; }
.pt-figure figcaption { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.pt-chart { width: 100%; height: auto; }
.pt-chart .pt-bar { fill: var(--green-dark); }
.pt-chart .pt-bar[data-art="bedarf"] { fill: var(--ink); }
.pt-chart .pt-bar[data-art="zufluss"] { fill: var(--green); }
.pt-chart .pt-bar-label { font-size: 11px; fill: var(--ink); }

.pt-table { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 13px; }
.pt-table caption { text-align: left; font-size: 12px; color: var(--muted); padding: 0 0 6px; }
.pt-table th, .pt-table td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; }
.pt-table td.pt-num, .pt-table th.pt-num { text-align: right; white-space: nowrap; }

/* -------------------------------- Kapitalbedarf ------------------------------ */
.pt-capital { display: grid; gap: 12px; margin: 14px 0 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pt-capital-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; }
.pt-capital-card .pt-amount { font-size: 24px; font-weight: 800; display: block; margin: 4px 0 0; }
.pt-capital-card p { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.pt-capital-card .pt-check { font-weight: 600; color: var(--ink); }

/* ------------------------------- Sensitivität -------------------------------- */
.pt-sens { display: grid; gap: 8px; margin: 12px 0 0; }
.pt-sens-row { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 16px; }
.pt-sens-row .pt-sens-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.pt-sens-row .pt-amount { margin-left: auto; font-size: 17px; font-weight: 700; white-space: nowrap; }
.pt-sens-row p { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ------------------------------- Slot-Leiter --------------------------------- */
.pt-slots { display: grid; gap: 10px; margin: 12px 0 0; }
.pt-slot { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 16px; }
.pt-slot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pt-slot-head strong { font-size: 15px; }
.pt-slot-head .pt-amount { margin-left: auto; font-size: 17px; font-weight: 700; white-space: nowrap; }
.pt-ladder { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pt-step {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: #fff;
}
.pt-step.is-current { background: var(--green-dark); border-color: var(--green-dark); color: #fff; font-weight: 600; }
.pt-step.is-unavailable { opacity: .55; text-decoration: line-through; }
.pt-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.pt-edit input { max-width: 190px; }
.pt-edit button { font-size: 12px; padding: 6px 14px; }
/* F9: der Platz eines Eingabefelds, das es bewusst nicht gibt. Keine Warnfarbe
 * — nicht gerechnet zu werden ist kein Fehler, sondern eine Tatsache. */
.pt-readonly { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* F8: die Klemme auf den Reservebestand steht als Satz da, nicht als Farbe. */
.pt-clamp { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }

/* -------------------------------- Stufen ------------------------------------- */
.pt-stufen { display: grid; gap: 12px; margin: 14px 0 0; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Same border, same background, same weight for all three: there is no winner
 * to mark and no order to imply. */
.pt-stufe { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 16px 18px; }
.pt-stufe h3 { margin: 0 0 8px; font-size: 17px; }
.pt-stufe dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.pt-stufe dt { color: var(--muted); }
.pt-stufe dd { margin: 0; text-align: right; font-weight: 700; }
.pt-stufe .pt-stufe-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

.pt-closing {
  margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--green-soft); font-size: 16px; line-height: 1.5; max-width: 68ch;
}
/* Scoped by UI Consolidation slice 0: 87-product-shell.css also declares
 * .produkt-back, and an unscoped rule here would push its margin onto every
 * product page. The Protect back link lives in .pt-section. */
.pt-section .produkt-back { display: inline-block; margin: 26px 0 10px; font-size: 13px; }

@media (max-width: 640px) {
  .pt-person .pt-amount, .pt-benefit-head .pt-amount, .pt-slot-head .pt-amount { margin-left: 0; }
  .pt-table { display: block; overflow-x: auto; }
}
/* 98-debug-review-toolbox.css — owner: the debug review toolbox the shell
 * renders when reviewEnabled is on.
 *
 * UI Consolidation slice 0: this was `src/assets/debug-review-toolbox.css`,
 * linked by the component. It is a bundle partial now. */

.debug-review-toolbox {
  --debug-review-accent: #235d46;
  position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.5rem));
  color: #17352a;
}

.debug-review-toolbox[hidden],
.debug-review-toolbox [data-debug-review-visible='false'] {
  display: none;
}

.debug-review-launcher,
.debug-review-toolbox button {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.debug-review-launcher {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid color-mix(in srgb, var(--debug-review-accent) 70%, white);
  border-radius: 999px;
  padding: .65rem 1rem;
  background: #f5fbf7;
  box-shadow: 0 .45rem 1.4rem rgb(16 54 39 / 18%);
  color: var(--debug-review-accent);
  font: inherit;
  font-weight: 750;
}

.debug-review-record-dot {
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: #b62626;
}

.debug-review-toolbox[data-debug-review-state='recording'] .debug-review-record-dot {
  box-shadow: 0 0 0 .3rem rgb(182 38 38 / 16%);
}

.debug-review-panel {
  width: min(31rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100dvh - 8rem));
  overflow: auto;
  margin-top: .65rem;
  border: 1px solid #b7cec2;
  border-radius: 1rem;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 1.2rem 3rem rgb(18 49 37 / 24%);
  overscroll-behavior: contain;
}

.debug-review-header,
.debug-review-controls,
.debug-review-row-actions,
.debug-review-drawing-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

.debug-review-header {
  justify-content: space-between;
}

.debug-review-header h2,
.debug-review-summary h3 {
  margin: 0;
}

.debug-review-eyebrow {
  margin: 0 0 .15rem;
  color: #567064;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.debug-review-close {
  border-radius: 999px;
  font-size: 1.5rem;
}

.debug-review-privacy,
.debug-review-live,
.debug-review-summary {
  margin: .85rem 0 0;
}

.debug-review-privacy {
  color: #4e665b;
  font-size: .9rem;
}

.debug-review-live,
.debug-review-summary {
  border-radius: .75rem;
  padding: .75rem;
  background: #eef6f1;
}

.debug-review-controls {
  margin-top: .8rem;
}

.debug-review-toolbox button {
  border: 1px solid var(--debug-review-accent);
  border-radius: .6rem;
  padding: .55rem .75rem;
  background: var(--debug-review-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.debug-review-toolbox button.button-quiet,
.debug-review-close {
  background: transparent;
  color: var(--debug-review-accent);
}

.debug-review-toolbox button:focus-visible,
.debug-review-toolbox textarea:focus-visible,
.debug-review-panel:focus-visible,
.debug-review-drawing-layer canvas:focus-visible {
  outline: 3px solid #e0a72f;
  outline-offset: 2px;
}

.debug-review-toolbox button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.debug-review-session,
.debug-review-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: .8rem 0;
}

.debug-review-session > div,
.debug-review-summary dl > div {
  border-radius: .65rem;
  padding: .55rem;
  background: #f4f7f5;
}

.debug-review-session output,
.debug-review-summary dd {
  display: block;
  margin: .2rem 0 0;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.debug-review-note {
  display: grid;
  gap: .45rem;
  margin-top: .8rem;
}

.debug-review-note textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  border: 1px solid #8da99b;
  border-radius: .6rem;
  padding: .65rem;
  font: inherit;
}

.debug-review-toolbox[data-debug-review-state='idle'] :is([data-debug-review-pause], [data-debug-review-resume], [data-debug-review-draw], [data-debug-review-stop], [data-debug-review-note-form]),
.debug-review-toolbox[data-debug-review-state='recording'] :is([data-debug-review-start], [data-debug-review-resume], [data-debug-review-summary]),
.debug-review-toolbox[data-debug-review-state='paused'] :is([data-debug-review-start], [data-debug-review-pause], [data-debug-review-draw]),
.debug-review-toolbox[data-debug-review-state='stopped'] :is([data-debug-review-start], [data-debug-review-pause], [data-debug-review-resume], [data-debug-review-draw], [data-debug-review-stop], [data-debug-review-note-form]) {
  display: none;
}

.debug-review-drawing-layer {
  position: fixed;
  z-index: 95;
  inset: 0;
  background: rgb(12 30 23 / 12%);
  cursor: crosshair;
  touch-action: none;
}

.debug-review-drawing-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.debug-review-drawing-actions {
  position: absolute;
  top: max(.75rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  min-width: min(36rem, calc(100vw - 1.5rem));
  border-radius: .8rem;
  padding: .55rem;
  background: #fff;
  box-shadow: 0 .8rem 2rem rgb(18 49 37 / 24%);
}

.debug-review-drawing-actions span {
  font-weight: 700;
}

@media (max-width: 42rem) {
  .debug-review-toolbox {
    right: max(.5rem, env(safe-area-inset-right));
    left: max(.5rem, env(safe-area-inset-left));
    bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 4rem));
  }

  .debug-review-panel {
    width: auto;
    max-height: calc(100dvh - 6.5rem);
  }

  .debug-review-session,
  .debug-review-summary dl {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .debug-review-launcher,
  .debug-review-panel {
    transition: box-shadow 140ms ease, transform 140ms ease;
  }

  .debug-review-launcher:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .debug-review-launcher,
  .debug-review-panel {
    scroll-behavior: auto;
    transition: none;
  }
}
/* 99-corpus-bench.css — owner: the corpus bench (the standalone
 * corpus-bench.html document served by corpus-bench-server.mjs, and the
 * .corpus-shell route corpus.html renders inside the app shell).
 *
 * UI Consolidation slice 0: this was `src/assets/corpus-bench.css`, linked by
 * both pages. It is a bundle partial now, so its five global rules — :root
 * palette + page typography, `*`, `body`, `button, input, select, textarea`
 * and `h1, h2, h3, p` — could no longer stay global: they would have restyled
 * every route. The palette tokens are declared once in 00-tokens.css, the
 * box-sizing reset is 10-base.css's, and the rest is scoped below. */

/* Page root of the standalone bench document. */
body.corpus-bench-page {
  color-scheme: light;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
}

/* Bench typography, scoped so it also holds when the bench renders inside the
 * app shell's corpus route rather than its own document. */
.bench-app,
.corpus-shell {
  color: var(--ink);
  font-family: system-ui, sans-serif;
  letter-spacing: 0;
}

.bench-app :is(button, input, select, textarea) {
  font: inherit;
  letter-spacing: 0;
}

.bench-app :is(h1, h2, h3, p) { margin: 0; }
.bench-app h1 { font-size: 1.35rem; }
.bench-app h2 { font-size: 1.05rem; }
.bench-app h3 { font-size: 0.95rem; }

.corpus-shell,
.corpus-shell [data-hm-frame='corpus-workbench'] {
  display: block;
  width: 100%;
  min-height: calc(100vh - 5.5rem);
}

.corpus-shell-state {
  display: grid;
  min-height: 50vh;
  place-items: center;
}

.corpus-shell-state[hidden],
.corpus-shell-state[data-corpus-visible='false'] {
  display: none;
}

.corpus-runtime-state {
  display: none;
}

.corpus-shell[data-corpus-runtime-state='locked'] > [data-corpus-runtime-status],
.corpus-shell[data-corpus-runtime-state='unavailable'] > [data-corpus-unavailable] {
  display: grid;
}

.corpus-shell[data-corpus-runtime-state='locked'] > [data-hm-frame='corpus-workbench'],
.corpus-shell[data-corpus-runtime-state='unavailable'] > [data-hm-frame='corpus-workbench'] {
  display: none;
}

.bench-app {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
  background: #fafbf7;
}

.bench-content {
  min-width: 0;
}

.bench-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border-right: 1px solid var(--line);
}

.bench-sidebar-heading {
  display: grid;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.bench-sidebar-heading strong {
  color: var(--green-dark);
  font-size: 1.5rem;
}

.bench-sidebar-heading span,
.bench-view-tabs span {
  color: var(--muted);
  font-size: 0.75rem;
}

.bench-batch-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
  font-size: 0.68rem;
}

.bench-batch-facts div {
  display: grid;
}

.bench-batch-facts dt {
  color: var(--muted);
}

.bench-batch-facts dd {
  margin: 0;
  color: var(--ink);
}

.bench-view-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
}

.bench-view-tabs a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem;
  color: var(--ink);
  border-radius: 6px;
  text-decoration: none;
}

.bench-view-tabs a:hover {
  background: var(--green-soft);
}

.bench-view-tabs a[aria-current='page'] {
  color: #fff;
  background: var(--green-dark);
}

.bench-header,
.bench-summary-band,
.bench-submit-band,
.bench-pane-heading,
.bench-stage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bench-header {
  padding: 1rem 1.5rem;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 3px solid var(--green);
}

.bench-eyebrow {
  margin-bottom: 0.2rem;
  color: #668072;
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.bench-header .bench-eyebrow {
  color: var(--green-dark);
}

.bench-throughput {
  display: grid;
  text-align: right;
}

.bench-header-metrics {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.bench-progress {
  display: grid;
  text-align: right;
}

.bench-progress strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.bench-progress span {
  color: var(--muted);
  font-size: 0.75rem;
}

.bench-throughput strong {
  color: var(--green-dark);
  font-size: 1.25rem;
}

.bench-throughput span,
.bench-live-status,
.bench-pane-heading > span,
.bench-submit-band span {
  color: #65736b;
  font-size: 0.75rem;
}

.bench-automation-status {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 1.5rem;
  background: #f7f9f3;
  border-bottom: 1px solid var(--line);
}

.bench-automation-heading,
.bench-automation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bench-automation-heading > div:first-child {
  display: grid;
  gap: 0.1rem;
}

.bench-automation-heading span,
.bench-automation-counts dt,
.bench-automation-active span {
  color: var(--muted);
  font-size: 0.72rem;
}

.bench-automation-actions button {
  min-height: 2.1rem;
  padding: 0.4rem 0.7rem;
  color: #fff;
  background: #315e47;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.bench-automation-counts {
  display: grid;
  grid-template-columns: repeat(8, minmax(4.5rem, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.bench-automation-counts div {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  background: #fff;
}

.bench-automation-counts dd {
  margin: 0;
  font-weight: 750;
}

.bench-automation-active {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.bench-automation-diagnostics {
  color: #7c332e;
  font-size: 0.75rem;
}

.bench-automation-diagnostics code {
  display: block;
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
}

.bench-classification-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  background: #fff7d6;
  border-bottom: 1px solid #d8c67a;
}

.bench-classification-review > div {
  display: grid;
  gap: 0.2rem;
}

.bench-classification-review form {
  display: grid;
  grid-template-columns: minmax(14rem, 24rem) auto;
  align-items: end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.bench-classification-review form label {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 700;
}

.bench-classification-review select {
  min-height: 2.4rem;
  max-width: 24rem;
  padding: 0.45rem 2rem 0.45rem 0.6rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #a99a5c;
  border-radius: 4px;
}

.bench-classification-review button {
  min-height: 2.4rem;
  padding: 0.5rem 0.75rem;
  color: #fff;
  background: var(--green-dark);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.bench-classification-review .bench-secondary-action {
  color: var(--ink);
  background: #fff;
  border: 1px solid #a99a5c;
}

.bench-live-status > span {
  display: none;
}

.bench-live-status[data-live-state='watching'] .bench-status-watching,
.bench-live-status[data-live-state='revision-stale'] .bench-status-revision-stale,
.bench-live-status[data-live-state='live-unavailable'] .bench-status-live-unavailable,
.bench-live-status[data-live-state='poll-ended'] .bench-status-poll-ended,
.bench-live-status[data-live-state='polling'] .bench-status-polling,
.bench-live-status[data-live-state='segment-approved'] .bench-status-segment-approved,
.bench-live-status[data-live-state='segment-discarded'] .bench-status-segment-discarded,
.bench-live-status[data-live-state='segment-added'] .bench-status-segment-added,
.bench-live-status[data-live-state='write-failed'] .bench-status-write-failed,
.bench-live-status[data-live-state='background-write-failed']
  .bench-status-background-write-failed,
.bench-live-status[data-live-state='pending-segments'] .bench-status-pending-segments,

.bench-queue {
  display: grid;
  gap: 1px;
  overflow-y: auto;
  padding: 6px;
  background: var(--paper);
}

.bench-queue-group {
  display: block;
  padding: 0.85rem 0.75rem 0.35rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bench-queue-item {
  display: grid;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  color: var(--muted);
  background: var(--paper);
  border-radius: 6px;
  text-decoration: none;
}

.bench-queue-item:hover {
  background: var(--green-soft);
}

.bench-queue-item.active {
  color: var(--ink);
  background: var(--green-soft);
  box-shadow: inset 3px 0 var(--green-dark);
}

.bench-new-capture {
  width: 2.75rem;
  height: 2.75rem;
  margin: auto 1rem 1rem;
  color: #fff;
  background: var(--green-dark);
  border: 0;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
}

.bench-capture-dialog {
  width: calc(100vw - 1rem);
  height: calc(100dvh - 1rem);
  max-height: calc(100dvh - 1rem);
  max-width: none;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgb(35 40 26 / 24%);
}

.bench-capture-dialog::backdrop {
  background: rgb(8 17 12 / 68%);
}

.bench-capture-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.bench-capture-controls {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
}

.bench-capture-heading,
.bench-capture-actions,
.bench-capture-options {
  padding: 1rem;
}

.bench-capture-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid #d8ded9;
}

.bench-capture-heading button {
  border: 0;
  background: transparent;
}

.bench-dialog-close {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.bench-dialog-close:hover {
  background: var(--green-soft);
}

.bench-dialog-close:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}

.bench-capture-options label {
  display: grid;
  gap: 0.3rem;
}

.bench-capture-options {
  display: grid;
  min-height: 0;
  gap: 1rem;
  align-content: start;
  overflow-y: auto;
}

.bench-capture-mode {
  display: grid;
  gap: 0.6rem;
  border: 0;
  padding: 0;
}

.bench-capture-mode label {
  display: flex;
  align-items: center;
}

.bench-capture-options [data-defect-commentary-control] {
  display: none;
}

.bench-capture-options:has([data-corpus-intake-mode][value='dirty-twin']:checked)
  [data-defect-commentary-control] {
  display: grid;
}

.bench-capture-dialog [data-hm-frame='corpus-capture'] {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #0c0e08;
}

.bench-capture-dialog [data-hm-frame='corpus-capture'] > main,
.bench-capture-dialog [data-hm-frame='corpus-capture'] .page-layout {
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.bench-capture-dialog [data-hm-frame='corpus-capture'] .scan-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

.bench-capture-dialog [data-hm-frame='corpus-capture'] .scan-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  place-self: center;
}

.bench-capture-dialog [data-hm-frame='corpus-capture'] > .bottom-nav,
.bench-capture-dialog [data-hm-frame='corpus-capture'] .scan-result,
.bench-capture-dialog [data-hm-frame='corpus-capture'] [data-hm-frame='capture-debug'] {
  display: none;
}

.bench-capture-actions {
  display: grid;
  gap: 0.65rem;
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.bench-capture-actions button {
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  color: #fff;
  background: var(--green-dark);
  border: 0;
  border-radius: 6px;
  font-weight: 650;
  cursor: pointer;
}

.bench-capture-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.bench-capture-actions output {
  min-height: 2.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

@media (max-width: 800px) {
  .bench-capture-dialog {
    width: calc(100vw - 0.5rem);
    height: calc(100dvh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
  }

  .bench-capture-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(18rem, 3fr) minmax(0, 2fr);
  }

  .bench-capture-controls {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .bench-capture-heading,
  .bench-capture-actions,
  .bench-capture-options {
    padding: 0.75rem;
  }

  .bench-capture-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .bench-capture-actions output {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .bench-capture-actions [data-commit-corpus-capture] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .bench-app {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
  .bench-sidebar-heading span,
  .bench-batch-facts,
  .bench-view-tabs span,
  .bench-queue-item strong {
    display: none;
  }
  .bench-view-tabs {
    grid-template-columns: 1fr;
  }
}

.bench-queue-item span {
  font-size: 0.72rem;
}

.bench-form {
  width: 100%;
}

.bench-summary-band,
.bench-submit-band {
  padding: 0.9rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #d8ded9;
}

.bench-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: calc(100vh - 13rem);
}

.bench-image-pane,
.bench-ladder {
  min-width: 0;
  padding: 1rem;
}

.bench-image-pane {
  border-right: 1px solid #ccd4ce;
  background: #e7ebe7;
}

.bench-ladder {
  background: #f8faf8;
}

.bench-pane-heading {
  margin-bottom: 1rem;
}

.bench-document-class {
  display: grid;
  gap: 0.2rem;
  color: #65736b;
  font-size: 0.7rem;
  font-weight: 700;
}

.bench-document-class select {
  min-height: 2rem;
  border: 1px solid #aebbb2;
  border-radius: 3px;
  background: #fff;
}

.bench-page-scroll {
  border: 1px solid #c4cdc6;
  background: #d8ddd9;
}

.bench-page {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 8px rgb(28 45 36 / 18%);
  touch-action: none;
  user-select: none;
}

.bench-page > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.bench-segment {
  position: absolute;
  left: var(--bbox-x);
  top: var(--bbox-y);
  z-index: 2;
  width: var(--bbox-width);
  height: var(--bbox-height);
  min-width: 2px;
  min-height: 2px;
  padding: 0;
  border: 1px solid #ad7f00;
  background: rgb(248 206 65 / 14%);
  outline: 0;
  cursor: crosshair;
}

.bench-segment[data-segment-verdict='approved'] {
  border-color: #1f7a4c;
  background: rgb(50 160 100 / 12%);
}

.bench-segment[data-segment-verdict='discarded'] {
  border-color: #aa4038;
  border-style: dashed;
  background: rgb(173 67 57 / 10%);
}

.bench-segment-merged {
  border-width: 2px;
}

.bench-segment-ocr-miss {
  border-width: 2px;
  border-color: #1569a8;
  background: rgb(38 126 190 / 12%);
}

.bench-segment-agent-suggested {
  border-color: #8b6f16;
  border-style: dotted;
  background: rgb(219 178 45 / 14%);
}

.bench-segment-suggestion {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding: 0.15rem 0.3rem;
  color: #18160d;
  background: #f0cf59;
  font-size: 0.62rem;
  font-weight: 750;
  white-space: nowrap;
}

.bench-segment-kind {
  position: absolute;
  right: 0;
  bottom: 100%;
  padding: 0.15rem 0.3rem;
  color: #fff;
  background: #1569a8;
  font-size: 0.62rem;
  font-weight: 750;
  white-space: nowrap;
}

.bench-segment-ocr-miss .bench-segment-suggestion {
  right: auto;
  left: 0;
}

.bench-segment[data-segment-selected='true'] {
  z-index: 4;
  outline: 3px solid #1671c5;
  outline-offset: 2px;
}

.bench-segment-index {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  min-width: 1.3rem;
  min-height: 1.3rem;
  place-items: center;
  color: #fff;
  background: #18271f;
  font-size: 0.65rem;
  font-weight: 800;
  transform: translate(-35%, -80%);
}

.bench-segment-value {
  position: absolute;
  left: 0;
  bottom: calc(100% + 3px);
  display: none;
  max-width: 26rem;
  padding: 0.25rem 0.4rem;
  overflow: hidden;
  color: #fff;
  background: #18271f;
  border-radius: 3px;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bench-segment-tools {
  position: absolute;
  left: -1px;
  top: calc(100% + 5px);
  z-index: 20;
  display: none;
  width: min(20rem, 44vw);
  padding: 0.65rem;
  color: #15201b;
  background: #fff;
  border: 1px solid #97a59b;
  border-radius: 4px;
  box-shadow: 0 8px 22px rgb(21 32 27 / 24%);
  cursor: default;
}

.bench-segment-tools-above .bench-segment-tools {
  top: auto;
  bottom: calc(100% + 5px);
}

.bench-segment-tools-right .bench-segment-tools {
  right: -1px;
  left: auto;
}

.bench-segment:hover,
.bench-segment:focus-within,
.bench-segment:focus-visible {
  z-index: 15;
}

.bench-segment:hover .bench-segment-index,
.bench-segment:focus-within .bench-segment-index,
.bench-segment:hover .bench-segment-value,
.bench-segment:focus-within .bench-segment-value {
  display: grid;
}

.bench-segment:hover .bench-segment-tools,
.bench-segment:focus-within .bench-segment-tools {
  display: grid;
  gap: 0.35rem;
}

.bench-segment-tools label {
  color: #56645c;
  font-size: 0.7rem;
  font-weight: 750;
}

.bench-segment-tools input,
.bench-segment-tools textarea,
.bench-merge-toolbar input {
  width: 100%;
  min-height: 2.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #aebbb2;
  border-radius: 3px;
  background: #fff;
  font-size: 0.85rem;
  user-select: text;
}

.bench-segment-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.bench-segment-actions button,
.bench-merge-toolbar button {
  min-height: 2.1rem;
  padding: 0.4rem 0.65rem;
  color: #fff;
  background: #276746;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 750;
}

.bench-segment-actions button[data-segment-verdict='discarded'] {
  background: #913b35;
}

.bench-selection-box {
  position: absolute;
  left: var(--selection-left);
  top: var(--selection-top);
  z-index: 30;
  display: none;
  width: var(--selection-width);
  height: var(--selection-height);
  border: 1px solid #1268b6;
  background: rgb(30 124 207 / 14%);
  pointer-events: none;
}

.bench-selection-box[data-active='true'] {
  display: block;
}

.bench-merge-toolbar {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem;
  color: #fff;
  background: #18271f;
  box-shadow: 0 -4px 16px rgb(21 32 27 / 22%);
  width: calc(50% - 2rem);
}

.bench-merge-toolbar[data-visible='false'] {
  display: none;
}

.bench-review-preparing {
  display: grid;
  min-height: 32rem;
  place-content: center;
  gap: 0.35rem;
  text-align: center;
  background: #e1e6e2;
}

.bench-review-preparing span {
  color: #65736b;
  font-size: 0.78rem;
}

.bench-review-copy-unavailable,
.bench-review-error {
  display: none;
}

.bench-review-preparing[data-review-state='unavailable'] .bench-review-copy-preparing {
  display: none;
}

.bench-review-preparing[data-review-state='unavailable'] .bench-review-copy-unavailable,
.bench-review-preparing[data-review-state='unavailable'] .bench-review-error {
  display: block;
}

.bench-structure {
  background: #fff;
  border: 1px solid #d5dcd7;
}

.bench-structure-row {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 2.2rem;
  padding: 0.45rem 0.6rem 0.45rem calc(0.6rem + var(--structure-indent));
  border-top: 1px solid #e0e5e1;
}

.bench-structure-row:first-child {
  border-top: 0;
}

.bench-structure-row > span {
  color: #65736b;
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
}

.bench-structure-row > p {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  line-height: 1.35;
}

.bench-raw-ladder {
  margin-top: 1.25rem;
  border-top: 1px solid #bdc8c0;
}

.bench-raw-ladder > summary {
  padding: 0.75rem 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
}

.bench-map-row label,
.bench-editor-label,
.bench-submit-band > label {
  color: #56645c;
  font-size: 0.75rem;
  font-weight: 700;
}

.bench-map-row input,
.bench-map-row textarea,
.bench-json-editor,
.bench-submit-band textarea {
  width: 100%;
  border: 1px solid #b8c3bb;
  border-radius: 4px;
  background: #fff;
}

.bench-map-row input {
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
}

.bench-map-row textarea {
  min-height: 3.5rem;
  padding: 0.45rem 0.5rem;
  resize: vertical;
}

.bench-shard-split {
  padding-top: 0.35rem;
  border-top: 1px solid #d8ded9;
}

.bench-shard-split summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 750;
}

.bench-shard-split[open] {
  display: grid;
  gap: 0.4rem;
}

.bench-shard-split button {
  justify-self: end;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
}

.bench-stage {
  margin-bottom: 0.75rem;
  padding: 0.9rem;
  background: #fff;
  border: 1px solid #d5dcd7;
  border-radius: 6px;
}

.bench-stage-heading > div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.bench-stage-index {
  display: inline-grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  color: #fff;
  background: #315e47;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
}

.bench-stage-state {
  font-size: 0.72rem;
  font-weight: 700;
}

.bench-stage-state-valid {
  color: #277044;
}

.bench-stage-copy-invalid,
.bench-stage-state[data-stage-valid='false'] .bench-stage-copy-valid {
  display: none;
}

.bench-stage-state[data-stage-valid='false'] .bench-stage-copy-invalid {
  display: inline;
}

.bench-stage-state[data-stage-valid='true'] .bench-stage-copy-valid {
  display: inline;
}

.bench-stage-state[data-stage-valid='true'] .bench-stage-copy-invalid {
  display: none;
}

.bench-stage-state[data-stage-valid='true'] {
  color: #277044;
}

.bench-stage-state[data-stage-valid='false'] {
  color: #9a342e;
}

.bench-stage-state-invalid,
.bench-inline-errors,
.bench-errors {
  color: #9a342e;
}

.bench-editor-label {
  display: block;
  margin: 0.75rem 0 0.3rem;
}

.bench-json-editor {
  min-height: 11rem;
  padding: 0.65rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.45;
}

.bench-json-editor:invalid,
[data-field-path]:invalid {
  border-color: #b94339;
  outline: 2px solid rgb(185 67 57 / 18%);
}

.bench-inline-errors,
.bench-errors {
  font-size: 0.75rem;
}

.bench-stage-live-error {
  display: none;
}

.bench-inline-errors[data-validation-active='true'] > p {
  display: none;
}

.bench-inline-errors[data-validation-active='true'][data-validation-valid='false']
  .bench-stage-live-error {
  display: inline;
}

.bench-errors:not(:empty) {
  padding: 0.75rem 1.5rem;
  background: #fff0ef;
  border-bottom: 1px solid #e6aaa6;
}

.bench-agreement {
  padding: 0.9rem 1.5rem;
  background: #eef3ef;
  border-bottom: 1px solid #ccd4ce;
}

.bench-agreement-heading,
.bench-drafter-economics,
.bench-agreement-stages,
.bench-drafter-economics p,
.bench-agreement-stages p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bench-agreement-heading {
  justify-content: space-between;
}

.bench-agreement-heading > p,
.bench-agreement-warning,
.bench-drafter-economics,
.bench-agreement-stages {
  font-size: 0.75rem;
}

.bench-agreement-warning {
  margin-top: 0.25rem;
  color: #795823;
  font-weight: 700;
}

.bench-drafter-economics,
.bench-agreement-stages {
  margin-top: 0.65rem;
  flex-wrap: wrap;
}

.bench-drafter-economics p,
.bench-agreement-stages p {
  min-width: 0;
  padding-right: 0.75rem;
  border-right: 1px solid #bdc8c0;
}

.bench-drafter-economics span {
  color: #56645c;
}

.bench-agreement-exact strong {
  color: #277044;
}

.bench-agreement-different strong {
  color: #9a342e;
}

.bench-submit-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
  margin: -1rem -1rem 1rem;
  border-top: 0;
  border-bottom: 1px solid #ccd4ce;
}

.bench-family-confirmation,
.bench-commentary-field {
  display: grid;
  gap: 0.3rem;
}

.bench-family-confirmation input {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #b8c3bb;
  border-radius: 4px;
  background: #fff;
}

.bench-family-confirmation label,
.bench-commentary-field label {
  color: #56645c;
  font-size: 0.75rem;
  font-weight: 700;
}

.bench-submit-band textarea {
  padding: 0.55rem;
  resize: vertical;
}

.bench-submit-band > div {
  display: grid;
  gap: 0.35rem;
  justify-items: stretch;
}

.bench-submit-actions {
  grid-template-columns: minmax(0, 1fr);
}

.bench-submit-band button {
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  color: #fff;
  background: #216642;
  border: 0;
  border-radius: 4px;
  font-weight: 750;
  cursor: pointer;
}

.bench-empty {
  padding: 3rem 1.5rem;
}

.bench-triage {
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr);
  gap: 1.25rem;
  padding: 1.25rem;
}

.bench-triage-source img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: #f4f3ef;
  border: 1px solid #d7d3c8;
}

.bench-triage-action {
  align-self: start;
}

.bench-map-candidate {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px solid #aebbb2;
}

.bench-map-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.4rem 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid #d5dcd7;
}

.bench-map-row code,
.bench-map-row span {
  color: #56645c;
  font-size: 0.72rem;
}

.bench-diagnostics > summary {
  padding: 0.7rem 1.5rem;
  color: #48564e;
  background: #e6ece8;
  border-top: 1px solid #bdc8c0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
}

.bench-triage-action form {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.bench-draft-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1rem 0 0;
  background: #cbd4cd;
}

.bench-draft-progress > div {
  padding: 0.75rem;
  background: #fff;
}

.bench-draft-progress dt {
  color: #56645c;
  font-size: 0.72rem;
  font-weight: 700;
}

.bench-draft-progress dd {
  margin: 0.2rem 0 0;
  font-weight: 800;
}

.bench-triage-action input,
.bench-triage-action select,
.bench-triage-action textarea {
  width: 100%;
  min-width: 0;
}

.bench-shakedown {
  padding: 1.25rem 1.5rem 1.5rem;
  background: #e6ece8;
  border-top: 1px solid #bdc8c0;
}

.bench-shakedown-heading,
.bench-amendment-row,
.bench-amendment-form,
.bench-owner-verdict {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bench-shakedown-heading {
  justify-content: space-between;
}

.bench-shakedown-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1rem 0;
  background: #bdc8c0;
}

.bench-shakedown-facts > div {
  padding: 0.7rem;
  background: #f8faf8;
}

.bench-shakedown-facts dt,
.bench-amendment-row > span,
.bench-amendment-form label,
.bench-owner-verdict label {
  color: #56645c;
  font-size: 0.72rem;
  font-weight: 700;
}

.bench-shakedown-facts dd {
  margin: 0.15rem 0 0;
  font-weight: 800;
}

.bench-amendment-row {
  min-height: 2.5rem;
  border-top: 1px solid #c9d2cc;
}

.bench-amendment-row > span {
  width: 6rem;
}

.bench-amendment-row > p {
  flex: 1;
}

.bench-amendment-form,
.bench-owner-verdict {
  margin-top: 0.75rem;
}

.bench-amendment-form input,
.bench-amendment-form select,
.bench-owner-verdict select,
.bench-owner-verdict textarea {
  min-height: 2.25rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid #aebbb2;
  border-radius: 4px;
  background: #fff;
}

.bench-amendment-form input,
.bench-owner-verdict textarea {
  flex: 1;
}

.bench-amendment-form button,
.bench-amendment-row button,
.bench-owner-verdict button {
  min-height: 2.25rem;
  padding: 0.45rem 0.7rem;
  color: #fff;
  background: #315e47;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .bench-automation-counts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bench-triage {
    grid-template-columns: minmax(0, 1fr);
  }

  .bench-workspace {
    grid-template-columns: 1fr;
  }

  .bench-image-pane {
    border-right: 0;
    border-bottom: 1px solid #ccd4ce;
  }

  .bench-submit-band {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .bench-agreement-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .bench-submit-band > div {
    justify-items: stretch;
  }

  .bench-shakedown-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bench-map-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .bench-segment-tools {
    width: min(20rem, 82vw);
  }

  .bench-merge-toolbar {
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 2rem);
  }

  .bench-amendment-form,
  .bench-owner-verdict {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .bench-header,
  .bench-summary-band,
  .bench-image-pane,
  .bench-ladder,
  .bench-submit-band {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .bench-automation-status {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .bench-classification-review {
    align-items: stretch;
    flex-direction: column;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .bench-automation-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bench-submit-band {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
  }

  .bench-throughput span {
    max-width: 6rem;
  }

  .bench-header-metrics {
    gap: 0.75rem;
  }
}
.product-ai { max-width: 1120px; padding: 28px 0 48px; }
.settings-modal {
	position: relative;
	width: min(100%, 48rem);
	margin: auto;
	padding: clamp(1.4rem, 5vw, 2.25rem);
	border-radius: 20px;
	background: var(--k-surface);
	box-shadow: var(--k-shadow-popover);
}
.product-ai-header, .product-ai-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.product-ai-header h1, .product-ai-header h2, .product-ai-pane h2 { margin: 0; }
.settings-modal .product-ai-header { padding-right: 2.75rem; }
.settings-modal :focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.product-ai-header p:not(.eyebrow), .product-ai-pane p { color: var(--muted); }
.product-ai-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; margin-top: 24px; }
.product-ai-tabs { display: grid; align-content: start; gap: 4px; }
.product-ai-tabs button, .product-ai-venues button { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-align: left; }
.product-ai-tabs button[aria-current="page"] { border-color: var(--green); background: var(--green-soft); font-weight: 800; }
.product-ai-pane { display: grid; gap: 14px; }
.product-ai-venues { display: grid; gap: 8px; margin: 14px 0; }
.product-ai-venues button { display: grid; gap: 3px; padding: 12px; }
.product-ai-venues button.is-selected, .product-ai-choice-grid button.is-selected { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 20%, transparent); }
.product-ai-venues button:disabled { opacity: .58; cursor: not-allowed; }
.product-ai-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.product-ai-controls label { display: grid; gap: 6px; font-weight: 700; }
.product-ai-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.product-ai-choice-grid button { display: grid; gap: 4px; min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-align: left; }
.product-ai-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.product-ai-facts div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.product-ai-facts dt { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.product-ai-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.product-ai pre { max-height: 360px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8f9f5; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.product-ai-chart { margin-top: 20px; }
.product-ai-graph { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #f8f9f5; }
.product-ai-graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-ai-graph [data-hm-graph-canvas-body-adapter] { position: absolute; inset: 0; pointer-events: none; }
.product-ai-graph [data-hm-graph-node-id] { position: absolute; display: grid; place-items: center; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-weight: 800; pointer-events: auto; }
.product-ai-graph [data-hm-graph-canvas-selected="true"] { color: var(--green); }
.product-ai-transition-table { width: 100%; margin-top: 18px; border-collapse: collapse; }
.product-ai-transition-table th, .product-ai-transition-table td { padding: 9px; border-bottom: 1px solid var(--line); text-align: left; }
.product-ai-transition-table button { min-height: 36px; }
.product-ai-trace { display: grid; gap: 6px; padding-left: 22px; }
.product-ai-trace li { display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 720px) { .product-ai-layout { grid-template-columns: 1fr; } .product-ai-tabs { grid-template-columns: 1fr; } .product-ai-controls { grid-template-columns: 1fr; } .product-ai-header { align-items: stretch; flex-direction: column; } .settings-modal { min-height: 100dvh; border-radius: 0; } }