/* ============================================
   FETTLE WORKBENCH — STYLESHEET
   Professional, utilitarian design for extended use
   ============================================ */

/* The suite's shared colour tokens. The Scanner panel defines the same
   roles under the same names, so a colour means the same thing in both
   products; extension/shared/palette.js mirrors the dark values for the
   surfaces the Scanner injects into a page. Every pair below is measured
   against the surface it actually meets. */
:root {
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'JetBrains Mono', Consolas, Menlo, monospace;

	/* The suite's one type scale, shared with the Scanner panel under the
	   same names. --font-md is the 16px functional-text floor; hierarchy
	   only ever builds upward from it. Roles: md body, labels, hints, meta,
	   badges, code; lg (600) checklist questions, finding descriptions,
	   group headings, dialog titles; xl (700) section headings, fieldset
	   legends, stat numbers; xxl (700) the page title, once per page. */
	--font-md: 1rem;
	--font-lg: 1.1875rem;
	--font-xl: 1.4375rem;
	--font-xxl: 1.75rem;

	/* Four line heights: tight for xl and xxl, snug for lg, --leading for
	   body text, and --leading-loose for report prose only. */
	--leading-tight: 1.3;
	--leading-snug: 1.4;
	--leading: 1.5;
	--leading-loose: 1.6;

	/* The 4px spacing scale. Roles: 1 icon gaps · 2 control-row gaps ·
	   3 in-card rhythm and input padding-y · 4 input padding-x ·
	   5 card padding · 6 between cards and dialog padding ·
	   7 between sections · 8 page padding · 9 major divisions ·
	   10 the report title block. Spacing between siblings is a flex or grid
	   gap wherever the markup allows one. */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 2rem;
	--space-8: 2.5rem;
	--space-9: 3rem;
	--space-10: 4rem;
	/* Page padding, which has to hold at the 320px reflow floor as well as on
	   a wide screen: it grows with the viewport between two steps of the
	   scale and stops at the page-padding step. The floor is the side gutter
	   the page keeps at every width, so it never drops below 16px. */
	--space-page: clamp(var(--space-4), 2vw, var(--space-8));

	/* Radius by role: xs checkboxes and code strips · sm inputs, buttons and
	   chips · md cards and banners · lg dialogs · pill status pills and count
	   badges. 50% is reserved for true circles. */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	/* The five widths anything may branch on. A media query cannot read a
	   custom property, so each @media below restates one of these values;
	   these definitions are what the values mean. --bp-panel is the reflow
	   floor, --bp-narrow the header and mode-tab adaptations, --bp-surface
	   the width past which a shell stops centring a column, --bp-wide the
	   width at which two-column layouts hold, and --bp-full the width at
	   which card lists tile into more than one column. */
	--bp-panel: 20rem;
	--bp-narrow: 30rem;
	--bp-surface: 40rem;
	--bp-wide: 64rem;
	--bp-full: 100rem;

	/* The page has no pixel cap, so the readable line length lives on the
	   running prose itself rather than on the shell around it. */
	--measure-prose: 46rem;

	/* The status row's first column. One width, shared with the
	   Scanner panel, so the titles of a status list line up down the page
	   whatever each row's status word is. */
	--status-column: 6.875rem;

	--bg: #f2f3f5;
	--bg-card: #ffffff;
	--bg-input: #fafbfc;
	--bg-hover: #e9ebee;
	/* The ground under code and keys, one step off the card. */
	--bg-code: #eceef1;

	--text: #1a1d21;
	--text-secondary: #40474f;
	--text-muted: #555d66;
	--text-on-accent: #ffffff;

	--accent: #2563eb;
	/* Accent used as a fill under --text-on-accent. Split from --accent so a
	   value that reads well as link text cannot quietly fail behind text.
	   These two names are the only organisation-override hook, so they must
	   keep their names. */
	--accent-fill: #2563eb;
	--accent-hover: #1d4ed8;
	--accent-bg: #eaf1fe;

	/* Consistent selection / focus indicator: a solid yellow outline used everywhere.
	   A 1.5px dark hairline is layered just outside the yellow so the ring stays
	   visible on white as well as on coloured (pass/fail/accent) backgrounds.
	   Box-shadow follows border-radius; a transparent outline keeps a focus
	   indicator in Windows High Contrast / forced-colours mode. */
	--ring: #f5c000;
	--ring-width: 3px;
	--ring-box: 0 0 0 var(--ring-width) var(--ring), 0 0 0 calc(var(--ring-width) + 1.5px) var(--ring-outline);
	/* Same ring, drawn inside the box, for controls that cannot show an
	   outer ring. One definition so the two cannot drift apart. */
	--ring-box-inset: inset 0 0 0 var(--ring-width) var(--ring), inset 0 0 0 calc(var(--ring-width) + 1.5px) var(--ring-outline);

	/* Status. Each set is a text/indicator colour, its tonal surface, and a
	   solid fill that carries --text-on-accent. The fills are the same value
	   in both themes: white on them is measured once and holds everywhere. */
	--pass: #15803d;
	--pass-bg: #f0f7f1;
	--pass-fill: #15803d;
	--fail: #b91c1c;
	--fail-bg: #fbf1f0;
	--fail-fill: #b91c1c;
	--na: #555d66;
	--na-bg: #eff0f2;
	--na-fill: #525860;
	--warning-text: #5c3d00;
	--warning-bg: #fbf3cf;
	--warning-border: #8a6400;

	/* Advisory / suggestion surface – indigo, the suite-wide advisory hue.
	   Not green: green reads as a pass state. */
	--advisory-bg: #eef1ff;
	--advisory-text: #313c8f;

	/* Neutral inverting chip, shared with the Scanner. */
	--badge-bg: #1f2937;
	--badge-text: #ffffff;

	/* A control that cannot be used right now. These three are the one place
	   in the suite where a colour pair is deliberately below the text
	   minimum: an unavailable control has to read as unavailable, and WCAG
	   1.4.3 exempts it. They still have to be legible, so they are measured
	   and held near 2.4:1 rather than left to an opacity that stacks
	   unpredictably on whatever is behind it. */
	--disabled-text: #8a939d;
	--disabled-bg: #e9ebee;
	--disabled-border: #d5d9de;

	/* Tooltip: the badge pair, deliberately inverted against the page. */
	--tooltip-bg: var(--badge-bg);
	--tooltip-text: var(--badge-text);

	/* Report-preview links, kept distinct from --accent so preview text reads
	   like a document rather than like interface chrome. */
	--link-report: #0756c7;
	--link-visited: #5b21b6;

	/* Overlays and tints. */
	--scrim: rgba(0, 0, 0, 0.4);
	--hover-tint: rgba(0, 0, 0, 0.04);
	--hover-tint-strong: rgba(0, 0, 0, 0.06);
	--ring-outline: rgba(0, 0, 0, 0.6);
	--pulse: rgba(21, 128, 61, 0.35);
	--pulse-fade: rgba(21, 128, 61, 0);
	--pulse-accent: rgba(37, 99, 235, 0.35);
	--pulse-accent-fade: rgba(37, 99, 235, 0);

	--border: #d5d9de;
	/* Boundaries that identify a form control. WCAG 1.4.11 wants 3:1 against
	   the adjacent surface, which the decorative --border does not reach. */
	--border-control: #6f7884;
	--border-light: #e4e7ea;
	/* Elevation is flat: a card is --bg-card plus --border and nothing else.
	   The one shadow left belongs to things that float over the page. */
	--shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.2);
	--scrollbar-track: var(--border-light);
	--scrollbar-thumb: var(--na);
	--scrollbar-thumb-hover: var(--text-secondary);

	/* ---- The disclosure chevron ---- */
	/* One geometry for every collapsible row in both products, from the
	   shared icon set (16x16 box, 1.75 stroke). It is drawn as a mask and
	   filled with currentColor, so one asset serves both themes and forced
	   colours, where the pair of theme-baked images it replaced could not. */
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,6 8,10.5 12.5,6'/%3E%3C/svg%3E");
	/* Native widget chrome (date/month picker indicators, select
	   dropdowns, scrollbars) must follow the app theme — without this the
	   dark theme renders the light calendar glyph invisibly. */
	color-scheme: light;
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--bg: #13161a;
	--bg-card: #1d2126;
	--bg-input: #262b31;
	--bg-hover: #2c323a;
	--bg-code: #232830;
	--text: #edf0f3;
	--text-secondary: #c3cad2;
	--text-muted: #a5aeb8;
	--text-on-accent: #ffffff;
	--accent: #6ea1ff;
	--accent-fill: #3a72d8;
	--accent-hover: #85b0ff;
	--accent-bg: #182640;
	--ring: #f5c000;
	--pass: #4ade80;
	--pass-bg: #12301d;
	--pass-fill: #15803d;
	--fail: #f87171;
	--fail-bg: #371a18;
	--fail-fill: #b91c1c;
	--na: #a5aeb8;
	--na-bg: #2a2f35;
	--na-fill: #525860;
	--warning-text: #ffe9ad;
	--warning-bg: #332900;
	--warning-border: #d6a600;
	--advisory-bg: #2c3170;
	--advisory-text: #dfe4ff;
	--badge-bg: #e5e9f0;
	--badge-text: #16202e;
	--disabled-text: #6d7680;
	--disabled-bg: #2c323a;
	--disabled-border: #333a42;
	--link-report: #9dccff;
	--link-visited: #d8b4fe;
	--scrim: rgba(0, 0, 0, 0.4);
	--hover-tint: rgba(255, 255, 255, 0.08);
	--hover-tint-strong: rgba(255, 255, 255, 0.08);
	--ring-outline: rgba(255, 255, 255, 0.72);
	--pulse: rgba(74, 222, 128, 0.35);
	--pulse-fade: rgba(74, 222, 128, 0);
	--pulse-accent: rgba(110, 161, 255, 0.42);
	--pulse-accent-fade: rgba(110, 161, 255, 0);
	--border: #454d57;
	--border-control: #79828e;
	--border-light: #333a42;
	--shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 16px; /* 1rem = 16px = 12pt minimum throughout */
	scroll-padding-top: 64px; /* keep focused elements clear of the slimmer sticky header when tabbing */
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	scrollbar-width: thin;
}

* {
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	scrollbar-width: thin;
}

/* Interface links hold one colour in both themes, visited included - a
   worked section's links must not fade to the browser's visited purple.
   Document previews override this with the report link pair, which keeps
   its measured visited colour because there the page simulates a document. */
:where(a, a:visited) {
	color: var(--accent);
}

::-webkit-scrollbar {
	width: 0.75rem;
	height: 0.75rem;
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border: 2px solid var(--scrollbar-track);
	border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

body {
	font-family: var(--font-body);
	font-size: var(--font-md);
	line-height: var(--leading);
	color: var(--text);
	background: var(--bg);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: anywhere;
}

body.modal-open {
	overflow: hidden;
}

/* Code, keys and samples: the bundled mono face on the code ground, held at
   the 16px floor because they are functional text. Light: --text on
   --bg-code is 14.55:1; dark: 12.95:1. */
code,
kbd,
samp {
	font-family: var(--font-mono);
	font-size: var(--font-md);
	background: var(--bg-code);
	border-radius: var(--radius-xs);
	padding: 0 var(--space-1);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

[hidden],
body:not([data-audit-mode='linear']) .linear-mode-only {
	display: none !important;
}

.is-hidden { display: none !important; }
.is-collapsed { display: none !important; }

.app-tooltip {
	position: fixed;
	z-index: 1000;
	max-width: min(18rem, calc(100vw - 1rem));
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--tooltip-bg);
	color: var(--tooltip-text);
	box-shadow: var(--shadow-overlay);
	font-size: var(--font-md);
	line-height: var(--leading-snug);
	pointer-events: none;
}

/* ---- HEADER ---- */
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-2) var(--space-page);
	min-height: 56px;
	background: var(--bg-card);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-left {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	flex: 0 1 auto;
}

header h1 {
	font-size: var(--font-xxl);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* One deterministic slim row: the status chip sits
   first so any squeeze presses on controls, never the status, and the
   Tools disclosure is always a collapsed menu, so nothing here ever
   needs a second row above 480px. */
.header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
	flex: 1 1 auto;
	flex-wrap: nowrap;
	min-width: 0;
}

.header-theme-toggle,
.header-workspace-settings,
.header-save-status {
	flex: 0 0 auto;
}

.header-save-status {
	flex: 0 1 auto;
	min-width: 0;
}

.header-tools {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
}

.header-tools-summary {
	display: inline-flex;
	justify-content: center;
	list-style: none;
	width: auto;
	margin-left: 0;
}

header.header-tools-empty .header-tools {
	display: none;
}

.header-tools:not([open]) > .header-buttons {
	display: none;
}

.header-tools[open] > .header-buttons {
	position: absolute;
	top: calc(100% + 0.45rem);
	right: 0;
	z-index: 110;
	display: grid;
	grid-template-columns: 1fr;
	width: min(22rem, calc(100vw - 1.5rem));
	max-height: min(70vh, 28rem);
	overflow: auto;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	box-shadow: var(--shadow-overlay);
}

.header-tools[open] .header-buttons .btn {
	width: 100%;
	min-width: 0;
	justify-content: center;
	white-space: normal;
}

/* Each menu entry names its outcome under its label. The description is part
   of the button, so it is there for keyboard and touch as well as pointer. */
.header-tools[open] .header-buttons .header-tool-btn {
	justify-content: flex-start;
	align-items: start;
	text-align: left;
	gap: var(--space-2);
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
	height: auto;
}

.header-tools[open] .header-buttons .header-tool-btn svg {
	flex: 0 0 auto;
	margin-top: var(--space-1);
}

.header-tool-text {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}

.header-tool-label {
	font-weight: 600;
	line-height: var(--leading-tight);
}

.header-tool-desc {
	color: var(--text-secondary);
	font-size: var(--font-md);
	font-weight: 400;
	line-height: var(--leading-snug);
	overflow-wrap: anywhere;
}

.header-tools-summary::-webkit-details-marker {
	display: none;
}

.linear-workspace-settings-layout {
	display: grid;
	grid-template-columns: minmax(12rem, 0.26fr) minmax(0, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-4);
	align-items: start;
}

.linear-workspace-category-list {
	position: sticky;
	top: 0;
	display: grid;
	gap: var(--space-1);
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}

.linear-workspace-category-list a {
	display: block;
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
}

.linear-workspace-category-list a:hover,
.linear-workspace-category-list a:focus-visible {
	background: var(--bg-hover);
	color: var(--accent);
}

.linear-workspace-settings-panel {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}

.linear-workspace-settings-group {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}

.linear-workspace-settings-group legend {
	padding: 0 var(--space-1);
	font-weight: 700;
	color: var(--text);
}

.linear-workspace-component {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-2);
	align-items: start;
	padding: var(--space-2);
	border-radius: var(--radius-sm);
}

.linear-workspace-component:hover {
	background: var(--bg-hover);
}

.linear-workspace-component span,
.linear-workspace-component small {
	display: block;
	min-width: 0;
}

.linear-workspace-component small {
	margin-top: var(--space-1);
	color: var(--text-secondary);
	font-size: var(--font-md);
	line-height: var(--leading-snug);
}

.report-style-examples {
	/* The cards share the row. A grid cannot do this: empty tracks stay alive,
	   so two cards sat in the first two of four and the rest of the row stayed
	   blank. Flex has no tracks to keep alive, so the cards grow to the full
	   row at any width and wrap to one per line when the row is narrow. */
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.report-style-examples-fold > summary { margin-top: var(--space-2); }

.report-style-example {
	flex: 1 1 min(100%, 15rem);
	min-width: 0;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
}

.report-style-example h3 {
	margin: 0 0 var(--space-2);
	font-size: var(--font-md);
}

.report-style-example p {
	margin: var(--space-1) 0 0;
	line-height: var(--leading);
}

.session-message-region {
	padding: 0 var(--space-page);
}

/* ---- BANNERS ---- */
/* One banner anatomy for the suite: an icon, the message, radius-md and
   space-3/space-4 padding on a tonal ground with a matching boundary. The
   role says how urgently it interrupts — advisory and progress banners are
   role="status", a failure is role="alert" — and forced colours tell the
   three apart by border PATTERN rather than by colour (L16). */
.banner {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--advisory-text);
	border-radius: var(--radius-md);
	background: var(--advisory-bg);
	color: var(--advisory-text);
	font-size: var(--font-md);
	line-height: var(--leading);
}

.banner .icon { flex: none; }

.banner.is-warning {
	border-color: var(--warning-border);
	background: var(--warning-bg);
	color: var(--warning-text);
}

.banner.is-fail {
	border-color: var(--fail);
	background: var(--fail-bg);
	color: var(--fail);
}

.banner.is-pass {
	border-color: var(--pass);
	background: var(--pass-bg);
	color: var(--text);
}

/* The session banner is that anatomy with a dismiss control on the end of
   the line. */
.session-message {
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin: var(--space-4) 0 0;
}

.session-message-text {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
}

.session-message.success {
	border-color: var(--pass);
	background: var(--pass-bg);
	color: var(--text);
}

.session-message.warning {
	border-color: var(--warning-border);
	background: var(--warning-bg);
	color: var(--warning-text);
}

.session-message-close {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
	color: var(--text);
	font: inherit;
	font-size: var(--font-md);
	font-weight: 600;
	padding: var(--space-1) var(--space-3);
	cursor: pointer;
}

.session-message-close:hover {
	background: var(--bg-hover);
}

/* ---- TABS ---- */
/* One tab pattern for the suite, shared with the Scanner panel's view
   switcher: a row of tabs along a rule, and the selected one carries a
   tonal fill, weight 600 and a 3px accent underline as well as
   aria-selected — never colour alone (L30), and never the focus yellow
   (L14). The pill tray this replaced signalled selection with a border
   colour that changed hue between themes. */
.mode-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	border-bottom: 1px solid var(--border);
	min-width: 0;
}

.mode-tab {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-md);
	font-weight: 500;
	font-family: var(--font-body);
	border: 1px solid transparent;
	border-bottom: 3px solid transparent;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 120ms ease;
}

.mode-tab:hover { color: var(--text); background: var(--bg-hover); }

.mode-tab[aria-selected='true'] {
	background: var(--accent-bg);
	color: var(--text);
	font-weight: 600;
	border-color: var(--border);
	border-bottom-color: var(--accent);
}

/* ---- BUTTONS ---- */
/* One button anatomy for the suite: space-2/space-4 padding (a ~41px tall
   target at the 16px floor), weight 600, radius-sm, a 1px boundary that is
   transparent where the variant does not need one, and exactly one
   transition — the background, at 120ms, off under reduced motion. */

/* A control name wraps between its words, never inside one. The page ground
   sets overflow-wrap: anywhere so pasted URLs and selectors stay inside their
   boxes, and a button inherits it: that both permits a mid-word break and
   shrinks the button's intrinsic minimum width to a single character, so a
   flex row could squeeze a one-word label into fragments. Buttons opt back
   out; anything inside a button that genuinely needs mid-word breaking
   carries overflow-wrap on its own element. */
button {
	overflow-wrap: normal;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--font-md);
	font-weight: 600;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms ease;
	white-space: normal;
	text-align: center;
	min-width: 0;
}

/* ---- ICONS ---- */
/* One icon language: inline SVG on a 16×16 viewBox, 1.75 stroke,
   currentColor, sized in em so an icon tracks the text line it sits on (a
   19px heading gets a 19px icon). Every icon is decorative — the label
   beside it carries the meaning (L30). */
.icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chip-done-mark {
	display: inline-flex;
	align-items: center;
	margin-left: var(--space-1);
}

.mode-tab svg,
.header-tools-summary svg {
	flex: 0 0 auto;
}

.btn-primary {
	background: var(--accent-fill);
	color: var(--text-on-accent);
	border-color: var(--accent-fill);
}
.btn-primary:hover { background: var(--accent-hover); }

/* Secondary: the card ground behind a 3:1 control boundary. */
.btn-secondary {
	background: var(--bg-card);
	color: var(--text);
	border-color: var(--border-control);
}
.btn-secondary:hover { background: var(--bg-hover); }

/* Ghost: no fill and no boundary at rest, so it never competes with the
   one filled primary on the surface (L10). */
.btn-ghost {
	background: transparent;
	color: var(--accent);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--accent-hover); }

/* Danger is two-step (L11): this ghost INITIATES a destructive flow and
   the filled variant below COMMITS it. Neither is ever a second primary. */
.btn-danger-ghost {
	background: transparent;
	color: var(--fail);
}
.btn-danger-ghost:hover { background: var(--fail-bg); }

/* The filled commit. The fill is --fail-fill, the same #b91c1c in both
   themes under --text-on-accent (6.47:1). The boundary is --fail: in light
   that is the fill's own colour, which the fill does not need because it
   already clears 3:1 against a card; in dark it is the lighter #f87171,
   which is what carries the boundary the dark fill cannot (L9). */
.btn-danger {
	background: var(--fail-fill);
	color: var(--text-on-accent);
	border-color: var(--fail);
}

/* Unavailable, in both products now. The colours are exempt from the text
   minimum; what matters is that the control stops looking pressable and
   stops responding. A native disabled control is out of the tab order
   already, so pointer-events only has to cover the ones that are not. */
.btn:disabled,
.btn[disabled] {
	background: var(--disabled-bg);
	color: var(--disabled-text);
	border-color: var(--disabled-border);
	cursor: not-allowed;
	pointer-events: none;
}
/* aria-disabled is the other half of the pair: the control keeps its place
   in the tab order and its own handler explains why nothing happened, so it
   stays clickable and only its appearance changes. */
.btn[aria-disabled='true'] {
	background: var(--disabled-bg);
	color: var(--disabled-text);
	border-color: var(--disabled-border);
	cursor: not-allowed;
}

.btn-block { width: 100%; }

.btn-sm {
	padding: var(--space-1) var(--space-2);
	font-size: var(--font-md);
}

/* ---- PAGE LAYOUT (LINEAR) ---- */
.page-wrapper {
	display: grid;
	/* No pixel cap: the shell spans the viewport and the grid owns the
	   measure, so extra width goes to the work rather than to margin. The
	   sidebar track has an upper bound because it holds short cards; the
	   work column takes everything else. */
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
	gap: var(--space-6);
	padding: var(--space-page);
}

.page-wrapper > main {
	min-width: 0;
}

.section-controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

/* ---- SIDEBAR ---- */
/* The sidebar is held to the window below the sticky header. The log actions
   sit first and never scroll; the progress list below them is the part that
   scrolls, so a long list neither pushes the actions out of reach nor slides
   underneath them and hides a focused row. A sticky box cannot leave the page
   wrapper, so at the end of the page the wrapper's padding and the footer
   below it push a taller sidebar up under the header: the height leaves room
   for both. */
#tips-sidebar {
	position: sticky;
	top: 6rem;
	height: fit-content;
	max-height: calc(100vh - 6rem - var(--space-page) - 7rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

#tips-sidebar > .sidebar-actions { flex: none; }

#tips-sidebar > #progress-card {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sidebar-card {
	background: var(--bg-card);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}

.sidebar-card h2 {
	font-size: var(--font-md);
	color: var(--text-muted);
	margin: 0 0 var(--space-3) 0;
}

.sidebar-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* Progress. A task list, not a bar: one row per section of the job, each
   naming its own state in words and carrying its own count, under a line
   that totals them. Nothing here is coloured-only — the status word is the
   status, and the count says how far in the section has got. */
.task-list-progress {
	margin: 0 0 var(--space-3);
	font-size: var(--font-md);
	color: var(--text-secondary);
	font-weight: 500;
}

.task-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--border-light);
}

/* One line per band: the band's name and how many of its rows are done. The
   rows themselves follow underneath. */
.task-list-band { border-bottom: 1px solid var(--border-light); }

.task-list-band-line {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) 0 var(--space-1);
	font-size: var(--font-md);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--band-hue);
	border-left: 4px solid var(--band-hue);
	padding-left: var(--space-2);
}

.task-list-band-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.task-list-band-rows > .task-list-item:last-child { border-bottom: none; }

.task-list-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-1) var(--space-2);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--border-light);
}

.task-list-link {
	grid-column: 1;
	grid-row: 1;
	font-size: var(--font-md);
	font-weight: 500;
}

/* The section being worked in is marked in weight as well as in the state
   assistive technology reads. */
.task-list-link[aria-current="step"] { font-weight: 700; }

.task-list-status {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--font-md);
	font-weight: 700;
	color: var(--text-secondary);
	white-space: nowrap;
}

.task-list-item .task-list-status.is-complete { color: var(--pass); }

.task-list-count {
	grid-column: 1 / -1;
	grid-row: 2;
	font-size: var(--font-md);
	color: var(--text-muted);
}

/* ---- FORM STRUCTURE ---- */
#audit-form {
	background: var(--bg-card);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* ---- BANDS ---- */
/* The form runs in three bands. Each band takes one hue, on every surface
   that shows bands, and no surface relies on the hue alone: the form names
   its band in a heading, the progress list in a band line, and a guided
   stage chip in its accessible name. */
.form-band[data-band='before-testing'],
.task-list-band[data-band='before-testing'],
.phase-chip[data-band='before-testing'] { --band-hue: var(--na); }
.form-band[data-band='testing'],
.task-list-band[data-band='testing'],
.phase-chip[data-band='testing'] { --band-hue: var(--accent); }
.form-band[data-band='report'],
.task-list-band[data-band='report'],
.phase-chip[data-band='report'] { --band-hue: var(--advisory-text); }

.form-band {
	border-top: 3px solid var(--band-hue);
}

.form-band-heading {
	font-size: var(--font-md);
	font-weight: 700;
	line-height: var(--leading-tight);
	margin: 0;
	padding: var(--space-3) var(--space-5) 0;
	color: var(--band-hue);
}

fieldset {
	border: none;
	border-top: 1px solid var(--border-light);
	padding: 0;
	margin: 0;
}

fieldset:first-child { border-top: none; }
.form-band > fieldset:first-of-type { border-top: none; }

legend {
	padding: 0;
	margin: 0;
	width: 100%;
}

.legend-toggle {
	font-family: inherit;
	font-size: var(--font-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	padding: var(--space-4) var(--space-5);
	cursor: pointer;
	width: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text);
	background: none;
	border: none;
	text-align: left;
	transition: background 0.15s ease;
}

.legend-toggle:hover { background: var(--bg-hover); }
.legend-toggle:focus-visible {
	outline: 2px solid transparent;
	outline-offset: -4px;
	box-shadow: var(--ring-box-inset);
}

/* The disclosure chevron is an icon from the shared set, drawn in
   currentColor: one asset for both themes, where the image it replaced was
   a data URI with the stroke colour baked in and a second copy of itself
   for the dark theme. It leads the row, as on every other disclosure in the
   suite, and turns to point down when the section opens. */
.legend-chevron {
	flex: 0 0 auto;
	transform: rotate(-90deg);
	transition: transform 120ms ease;
}
.legend-toggle[aria-expanded="true"] .legend-chevron {
	transform: rotate(0deg);
}

/* ---- THE one disclosure pattern ---- */
/* Every collapsible thing in the app is this shape: the whole header row is
   the control (a button, or the summary that already is one), a chevron
   leads it, and any count sits at the trailing edge. The chevron points
   right when the row is closed and turns to point down when it opens; the
   open/closed state that assistive technology reads comes from the element,
   not from the chevron. Rotation is the only motion, and the
   reduced-motion block below turns the transition off.
   The marker is the shared icon geometry drawn as a mask, so the summaries
   the app generates as HTML need no injected markup and the row's own
   colour paints the chevron. */
details > summary {
	list-style: none;
	cursor: pointer;
}
details > summary::-webkit-details-marker {
	display: none;
}
details > summary::before {
	content: "";
	display: inline-block;
	vertical-align: -0.15em;
	width: 1em;
	height: 1em;
	margin-right: var(--space-2);
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--icon-chevron) no-repeat center / 1em 1em;
	mask: var(--icon-chevron) no-repeat center / 1em 1em;
	transform: rotate(-90deg);
	transition: transform 120ms ease;
}
details[open] > summary::before {
	transform: rotate(0deg);
}
/* The two summaries drawn as buttons are menu openers rather than section
   header rows: they keep the same chevron, at the trailing edge where a menu
   button carries it, and let the button's own gap space it. */
.header-tools-summary::before,
.guided-stage-jump-summary::before { order: 1; margin-right: 0; }
/* A count on a disclosure row sits at the trailing edge, opposite the
   chevron, so the row reads label-first however long the label is. */
details > summary > .disclosure-count { margin-left: auto; }

.fieldset-content {
	padding: var(--space-5);
	border-top: 1px solid var(--border-light);
}

.form-section { margin-bottom: var(--space-6); }

hr {
	border: none;
	border-top: 1px dashed var(--border);
	margin: var(--space-6) 0;
}

/* ---- FORM INPUTS ---- */
label {
	display: block;
	font-size: var(--font-md);
	font-weight: 500;
	color: var(--text);
	margin-bottom: var(--space-1);
}

input, select, textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-control);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--font-md);
	background: var(--bg-input);
	color: var(--text);
	transition: border-color 120ms ease;
}

textarea { resize: vertical; min-height: 80px; }

/* The user-agent default placeholder grey falls under 4.5:1 on the input
   ground in both themes, so the muted text token carries it instead. */
::placeholder { color: var(--text-muted); opacity: 1; }

.form-group { margin-bottom: var(--space-4); }

.form-group-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--space-4);
}

/* ---- MONTH AND YEAR DATE ENTRY ---- */
.date-entry {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.date-entry > legend {
	display: block;
	width: auto;
	max-width: 100%;
	padding: 0;
	margin-bottom: var(--space-1);
	font-size: var(--font-md);
	font-weight: 500;
	color: var(--text);
}

.date-entry .field-hint { margin-bottom: var(--space-2); }

.date-entry-error { margin: 0 0 var(--space-2); }
.date-entry-error span { display: block; }

.date-entry-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.date-entry-field { margin: 0; }
.date-entry-field label { font-weight: 400; }
.date-entry-input { width: auto; }
.date-entry-month { width: 4.5rem; }
.date-entry-year { width: 6.5rem; }

.checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 400;
	margin-bottom: 0;
	cursor: pointer;
	font-size: var(--font-md);
}
/* Checkboxes and radios are drawn rather than tinted. Tinting a native
   control leaves its size and its boundary to the platform, which is how
   the same control ended up 13px in one browser and 16px in another, behind
   a boundary under 3:1. Explicit 20px, the shared control boundary, and a
   mark drawn inside the fill. */
input[type='checkbox'],
input[type='radio'] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 20px;
	padding: 0;
	margin: 0;
	display: inline-grid;
	place-content: center;
	border: 1px solid var(--border-control);
	background: var(--bg-input);
	cursor: pointer;
	transition: background 120ms ease;
}
input[type='checkbox'] { border-radius: var(--radius-xs); }
input[type='radio'] { border-radius: 50%; }
input[type='checkbox']:checked,
input[type='radio']:checked {
	background: var(--accent-fill);
	border-color: var(--accent-fill);
}
/* The mark is the icon set's check, drawn in the box rather than loaded:
   a currentColor stroke on the fill, so it follows the theme and survives
   forced colours. */
input[type='checkbox']::before {
	content: '';
	width: 12px;
	height: 12px;
	transform: scale(0);
	background: var(--text-on-accent);
	clip-path: polygon(19% 47%, 8% 58%, 39% 89%, 92% 27%, 81% 17%, 38% 67%);
}
input[type='checkbox']:checked::before { transform: scale(1); }
input[type='radio']::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transform: scale(0);
	background: var(--text-on-accent);
}
input[type='radio']:checked::before { transform: scale(1); }
input[type='checkbox']:disabled,
input[type='radio']:disabled {
	background: var(--disabled-bg);
	border-color: var(--disabled-border);
	cursor: not-allowed;
}

/* ---- CHECKLIST ITEMS ---- */
/* The suite's one card anatomy: the card ground, a 1px boundary,
   radius-md and space-5 padding. The 4px left rule reinforces the answer;
   the answered pill beside the question is what states it, so the card no
   longer tints its whole ground behind the evidence fields. */
.checklist-item {
	background: var(--bg-card);
	padding: var(--space-5);
	border: 1px solid var(--border);
	border-left-width: 4px;
	border-left-color: var(--border);
	border-radius: var(--radius-md);
	/* Cards stand apart by the between-cards step. A section interleaves
	   headings and hints with its cards, so this one keeps a margin where a
	   container gap would space the prose the same way. */
	margin-bottom: var(--space-6);
	transition: border-left-color 0.2s;
}

.checklist-item p {
	margin: 0 0 var(--space-3) 0;
	font-size: var(--font-lg);
	font-weight: 600;
	line-height: var(--leading-snug);
}

.checklist-item.is-pass { border-left-color: var(--pass); }
.checklist-item.is-fail { border-left-color: var(--fail); }
.checklist-item.is-na { border-left-color: var(--na); }
.checklist-item.is-untested { border-left-color: var(--warning-border); border-left-style: dashed; }

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

.checklist-options label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-weight: 400;
	cursor: pointer;
	font-size: var(--font-md);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-xs);
	transition: background 0.1s;
}
.checklist-options label:hover { background: var(--hover-tint); }
:root[data-theme='dark'] .checklist-options label:hover { background: var(--hover-tint); }

/* Action buttons inside checklist */
.checklist-actions {
	margin-left: 0;
	display: flex;
	gap: var(--space-2);
	align-items: center;
	flex-wrap: wrap;
	flex: 1 1 16rem;
	justify-content: flex-end;
	min-width: 0;
}

/* The icon-only form of the ghost button: same colours and the same one
   transition, sized to the icon rather than to a label. The icon is
   currentColor SVG and the accessible name is on the button. */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	padding: var(--space-1);
	border-radius: var(--radius-sm);
	color: var(--accent);
	font-size: var(--font-md);
	line-height: var(--leading-tight);
	transition: background 120ms ease;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--accent-hover); }
/* Icon-only danger ghost: removing something is the initiating half of the
   two-step (L11), so it carries the failure colour at rest, not on hover. */
.icon-btn.danger { color: var(--fail); }
.icon-btn.danger:hover { background: var(--fail-bg); color: var(--fail); }

/* Sub-question, details, conditional boxes */
.details-box,
.sub-question-box,
.image-uploader-box,
.browser-consistency-box,
.structured-details-box,
.conditional-input-box {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--border);
}

/* One evidence-editor anatomy, shared by the checklist grid and the linear
   editor: the same box, the same field labels, the same input ground. */
.evidence-grid,
.linear-evidence-editor {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-3);
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
}
.evidence-grid label,
.linear-evidence-editor label,
.linear-field-label {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--font-md);
	font-weight: 600;
	color: var(--text);
}
.evidence-grid input,
.evidence-grid textarea,
.linear-evidence-editor input,
.linear-evidence-editor textarea {
	background: var(--bg-input);
	font-weight: 400;
}
.evidence-cue {
	color: var(--text-secondary);
	font-size: var(--font-md);
	font-weight: 400;
}
.insert-example-slot {
	margin: var(--space-1) 0;
}
.evidence-grid .insert-example-slot {
	margin: 0;
}
.evidence-grid .evidence-wide { grid-column: 1 / -1; }
.evidence-grid.is-pass .evidence-fail,
.evidence-grid.is-pass .evidence-na,
.evidence-grid.is-fail .evidence-pass,
.evidence-grid.is-fail .evidence-na,
.evidence-grid.is-na .evidence-pass,
.evidence-grid.is-na .evidence-fail,
.evidence-grid.is-unanswered .evidence-pass,
.evidence-grid.is-unanswered .evidence-fail,
.evidence-grid.is-unanswered .evidence-na,
.evidence-grid.is-untested .evidence-pass,
.evidence-grid.is-untested .evidence-fail,
.evidence-grid.is-untested .evidence-na,
.evidence-grid:not(.is-untested) .evidence-untested {
	display: none;
}
.linear-evidence-editor > label,
.linear-evidence-editor > .linear-optional-panel,
.linear-evidence-editor > .linear-screenshot-panel,
.linear-evidence-editor > .customisation-section,
.linear-evidence-editor > .page-picker,
.linear-evidence-editor > .evidence-cue,
.linear-evidence-editor > .linear-add-field {
	grid-column: 1 / -1;
}
.linear-report-text-field textarea {
	min-height: 9rem;
	font-size: var(--font-md);
	line-height: var(--leading-loose);
}
.linear-structured-module {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-3);
}
.linear-structured-module label {
	min-width: 0;
}
.linear-evidence-editor.is-fail > label:first-of-type {
	grid-column: 1 / -1;
}
.linear-optional-panel {
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}
.linear-screenshot-panel {
	padding: 0;
	border: 0;
	background: transparent;
}
.linear-optional-panel:not(.is-open) {
	display: none;
}
.linear-optional-panel.is-frameless {
	padding: 0;
	border: 0;
	background: transparent;
}
.customisation-section {
	display: grid;
	gap: var(--space-3);
}
.customisation-section h4,
.customisation-browser-card h5 {
	margin: 0;
	font-size: var(--font-md);
	line-height: var(--leading-snug);
}
.customisation-browser-list {
	display: grid;
	gap: var(--space-3);
}
.customisation-browser-card,
.customisation-image-control {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}
.customisation-browser-card label {
	display: grid;
	gap: var(--space-1);
}
.customisation-image-control .field-hint {
	margin: 0;
}
.linear-optional-body {
	display: grid;
	gap: var(--space-3);
}
.linear-field-choice-list {
	display: grid;
	gap: var(--space-1);
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}
.linear-field-choice-list .checkbox-label {
	justify-content: flex-start;
}
.linear-browser-note {
	display: grid;
	gap: var(--space-3);
}
.report-editor-shell {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(min(100%, 17rem), 0.9fr);
	gap: var(--space-4);
	align-items: start;
	min-width: 0;
}
.report-editor-shell.is-barebones {
	grid-template-columns: minmax(0, 1fr);
}
.report-editor-fields {
	min-width: 0;
}
.details-note-label {
	display: block;
	margin-top: var(--space-3);
	font-weight: 600;
	color: var(--text);
}
.report-preview {
	position: sticky;
	top: 88px;
	margin-top: var(--space-3);
	max-height: calc(100vh - 120px);
	overflow: auto;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	color: var(--text);
}
.linear-preview-module {
	min-width: 0;
}
.linear-preview-module > summary {
	font-weight: 700;
	cursor: pointer;
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
	color: var(--text);
}
.linear-preview-module[open] > summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.linear-preview-module .report-preview,
.linear-preview-module .report-preview-jump {
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
#linear-mode-container[data-linear-show-element-hints='false'] .element-hint-slot,
#linear-mode-container[data-linear-show-automated-evidence='false'] .automated-criterion-suggestion-slot,
#linear-mode-container[data-linear-show-automated-preview='false'] .automated-report-preview-slot,
#linear-mode-container[data-linear-show-summary-helper='false'] .summary-helper-panel,
#linear-mode-container[data-linear-show-summary-helper='false'] .summary-helper,
#linear-mode-container[data-linear-show-page-summary='false'] .page-summary-panel,
#linear-mode-container[data-linear-show-page-summary='false'] .page-summary,
#linear-mode-container[data-linear-show-coverage-view='false'] .coverage-view-panel,
#linear-mode-container[data-linear-show-coverage-view='false'] .coverage-view {
	display: none;
}

/* ---- STATUS ROW ---- */
/* The suite's one status row, shared with the Scanner panel. The criterion
   roll-up, the criterion coverage view, the imported Scanner review queue
   and the per-page summary were four class vocabularies and four sets of
   status modifiers describing the same shape; this is that shape. Anatomy:
   a status cell (icon + word) on a fixed column so titles line up down the
   list, a title, meta or a count, and one action. The word carries the
   status — the colour and the 4px left rule only reinforce it (L30) — and
   the icon is hidden from assistive technology. Rows live inside one list
   card rather than each carrying its own border. */
.status-row-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.status-row-item {
	border-bottom: 1px solid var(--border-light);
	border-left: 4px solid transparent;
}
.status-row-item:last-child { border-bottom: none; }
.status-row-item.is-pass { border-left-color: var(--pass); }
.status-row-item.is-fail { border-left-color: var(--fail); }
.status-row-item.is-na { border-left-color: var(--na); }
.status-row-item.is-warning { border-left-color: var(--warning-border); }
.status-row-item.is-untested { border-left-color: var(--warning-border); border-left-style: dashed; }
.status-row-item.is-untested .status-row-status { color: var(--warning-text); }

.status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-3);
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-md);
	min-width: 0;
}
.status-row-status {
	flex: 0 0 var(--status-column);
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1);
	font-weight: 600;
	color: var(--text);
}
.status-row-list .is-pass .status-row-status { color: var(--pass); }
.status-row-list .is-fail .status-row-status { color: var(--fail); }
.status-row-list .is-na .status-row-status { color: var(--na); }
.status-row-list .is-warning .status-row-status { color: var(--warning-text); }
.status-row-title {
	flex: 1 1 12rem;
	min-width: 0;
	overflow-wrap: anywhere;
}
.status-row-meta { color: var(--text-muted); }
/* Anything a row carries below its one line — a note, an actions row, a
   disclosure's contents. */
.status-row-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 0 var(--space-4) var(--space-3);
}
.status-row-body > p,
.status-row-body > ul { margin: 0; }
.status-row-note { font-weight: 600; }
.status-row-item > summary {
	cursor: pointer;
	font-weight: 600;
	padding: var(--space-3) var(--space-4);
}
/* A row that is a disclosure and a status row at once: the chevron is the
   line's first item, so the row's own gap spaces it instead of the marker's
   margin. A row in the same list with nothing to disclose keeps that space
   empty, so every status word in the list starts on the same line. */
.status-row-item > summary.status-row::before,
.page-summary .status-row-item > .status-row::before {
	content: "";
	align-self: center;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	margin-right: 0;
}
.status-row-summary-line { font-weight: 600; margin: 0 0 var(--space-3); }
.status-row-aside { margin: var(--space-4) 0 0; }
.status-row-aside > :first-child { margin-top: 0; }
.status-row-aside p { margin: var(--space-1) 0 0; }
.status-row-aside ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* ---- POST-IMPORT GUIDE ---- */
/* ---- Question pack editor ---- */
/* Two class names, matching the other editor deviations, so this rule
   outranks the shell's own 560px width instead of losing to it on source
   order. */
.modal.pack-editor-modal {
	width: min(96vw, 100rem);
	max-width: 100rem;
	max-height: min(88vh, 920px);
	overflow-y: auto;
}
.pack-editor-modal .pe-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; margin: var(--space-3) 0; }
.pack-editor-modal .pe-meta-field { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 600; min-width: 0; }
.pack-editor-modal .pe-version { width: 5rem; }
.pack-editor-modal .pe-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-5);
	align-items: start;
	margin-top: var(--space-4);
}
.pack-editor-modal .pe-column { min-width: 0; }
.pack-editor-modal .pe-column > .section-heading:first-child { margin-top: 0; }
.pack-editor-modal .pe-operations { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.pack-editor-modal .pe-operation {
	display: flex; justify-content: space-between; align-items: start; gap: var(--space-3);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	padding: var(--space-2); margin: var(--space-1) 0; background: var(--bg-card);
}
.pack-editor-modal .pe-operation-text { display: grid; gap: var(--space-1); min-width: 0; }
.pack-editor-modal .pe-operation-name { line-height: var(--leading-snug); overflow-wrap: anywhere; }
.pack-editor-modal .pe-operation-action { font-weight: 700; }
.pack-editor-modal .pe-question-id {
	display: block;
	color: var(--text-muted);
	font-size: var(--font-md);
	font-weight: 400;
	overflow-wrap: anywhere;
}
.pack-editor-modal .pe-errors .pe-question-id,
.pack-editor-modal .pe-effect .pe-question-id { display: inline; }
.pack-editor-modal .pe-no-operations { color: var(--text-muted); }
.pack-editor-modal .pe-add-op { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.pack-editor-modal .pe-add-op > .field-label { display: block; margin: var(--space-2) 0 var(--space-1); font-weight: 600; }
.pack-editor-modal .pe-fieldset {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3) var(--space-3);
	margin: var(--space-3) 0;
	min-width: 0;
}
.pack-editor-modal .pe-fieldset legend { font-weight: 700; padding: 0 var(--space-1); }
.pack-editor-modal .pe-fieldset .field-label { display: block; margin: var(--space-2) 0 var(--space-1); font-weight: 600; }
.pack-editor-modal .pe-fieldset .field-hint { margin: var(--space-1) 0 0; }
.pack-editor-modal input[type='text'],
.pack-editor-modal input[type='search'],
.pack-editor-modal input[type='number'],
.pack-editor-modal textarea,
.pack-editor-modal select { max-width: 100%; }
.pack-editor-modal .pe-add-op input[type='text'],
.pack-editor-modal .pe-add-op input[type='search'],
.pack-editor-modal .pe-add-op textarea,
.pack-editor-modal .pe-add-op select { width: 100%; min-width: 0; }
.pack-editor-modal .pe-check { font-weight: 400; display: flex; align-items: start; gap: var(--space-1); margin: var(--space-1) 0; }
.pack-editor-modal .pe-check input { width: auto; min-width: 0; margin: var(--space-1) 0 0; }
.pack-editor-modal .pe-picker { margin: var(--space-1) 0 0; min-width: 0; }
/* One picker anatomy. The pack editor's question and criterion pickers and
   the audit-fact picker are the same control to the auditor, so the scroll
   cap, the boundary and the row treatment are declared once and the surfaces
   carry only their own deltas. */
.picker-list {
	display: grid;
	gap: var(--space-1);
	max-height: 12rem;
	overflow: auto;
	margin-top: var(--space-2);
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.picker-option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-2);
	align-items: start;
	margin: 0;
	padding: var(--space-1);
	border-radius: var(--radius-sm);
	font-weight: 400;
}
.picker-option:hover { background: var(--bg-hover); }
.picker-option input { width: auto; min-width: 0; margin: var(--space-1) 0 0; }
.picker-option-text { display: grid; gap: var(--space-1); min-width: 0; }
.picker-option-name { line-height: var(--leading-snug); overflow-wrap: anywhere; }
.pack-editor-modal .pe-option-note { color: var(--text-secondary); font-size: var(--font-md); line-height: var(--leading-snug); }
.pack-editor-modal .pe-layer-choice { display: grid; gap: var(--space-1); }
.pack-editor-modal .pe-layer-option { font-weight: 400; }
.pack-editor-modal .pe-layer-option .picker-option-name { font-weight: 700; }
.pack-editor-modal .pe-op-error { color: var(--fail); font-weight: 600; }
.pack-editor-modal .pe-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.pack-editor-modal .pe-valid { font-weight: 600; margin: 0 0 var(--space-2); }
.pack-editor-modal .pe-invalid { color: var(--fail); margin: 0 0 var(--space-2); }
.pack-editor-modal .pe-errors { margin: 0; padding-left: var(--space-5); }
.pack-editor-modal .pe-effect { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.pack-editor-modal .pe-effect-questions { margin: var(--space-1) 0 var(--space-2); padding-left: var(--space-4); }
.pack-editor-modal .pe-coverage-warning { margin: 0; }
@media (max-width: 64rem) {
	.pack-editor-modal .pe-layout { grid-template-columns: minmax(0, 1fr); }
}

.screenshot-state-box { margin: var(--space-2) 0 0; }
.screenshot-state-box label { display: block; margin: 0 0 var(--space-1); font-weight: 600; }
.finding-screenshot-state { margin: var(--space-2) 0 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.finding-screenshot-state label { font-weight: 600; }
.screenshot-state-note { margin: var(--space-1) 0 0; }
.finding-screenshot-state .screenshot-state-note { flex-basis: 100%; }
.screenshot-state-note:empty { display: none; }

.audit-share-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0 0; }
.review-feedback-panel { margin: var(--space-6) 0 0; }
.review-feedback-list { list-style: none; margin: 0; padding: 0; }
.review-feedback-row {
	border: 1px solid var(--border);
	border-left-width: 4px;
	border-left-color: var(--warning-border);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	margin: var(--space-2) 0;
	background: var(--bg-card);
}
.review-feedback-row.is-addressed { border-left-color: var(--pass); }
.review-feedback-meta { margin: 0; color: var(--text-muted); font-size: var(--font-md); }
.review-feedback-text { margin: var(--space-1) 0 0; font-weight: 600; }
.review-feedback-anchor { margin: var(--space-1) 0 0; color: var(--text-muted); }
.review-feedback-actions { margin: var(--space-1) 0 0; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.review-feedback-addressed { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }

.statement-panel { margin: var(--space-6) 0 0; }

/* The statement preview simulates the published document, so its links
   take the report link pair rather than the interface accent. */
.statement-panel a {
	color: var(--link-report);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
}
.statement-panel a:visited {
	color: var(--link-visited);
}
.statement-derived-note { font-weight: 600; margin: var(--space-2) 0; }
.statement-group { margin-top: var(--space-6); }
.statement-group > .section-heading { margin-bottom: var(--space-1); }
.statement-group .form-group-grid .form-group { margin-bottom: 0; }
.statement-group .form-group-grid + .form-group { margin-top: var(--space-4); }
.statement-adaptation-notice {
	margin: var(--space-3) 0;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
}
.statement-adaptation-notice > .section-heading { margin: 0 0 var(--space-1); }
.statement-adaptation-notice p { margin: 0 0 var(--space-2); }
.statement-adaptation-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.statement-changelog { margin: var(--space-4) 0 0; }
.statement-changelog-list { list-style: none; margin: 0; padding: 0; }
.statement-changelog-entry { margin: 0 0 var(--space-3); }
.statement-changelog-entry p { margin: 0 0 var(--space-1); }
.audit-share-status { color: var(--text-muted); }
.export-file-identity { margin: var(--space-2) 0 var(--space-3); color: var(--text-muted); font-size: var(--font-md); }
.report-preview h4 {
	margin: 0 0 var(--space-1);
	font-size: var(--font-md);
}
.report-preview p {
	margin: var(--space-1) 0 0;
	line-height: var(--leading-loose);
}
.report-preview a {
	color: var(--link-report);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
}
.report-preview a:visited {
	color: var(--link-visited);
}
.report-preview-jump {
	position: sticky;
	top: 88px;
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	color: var(--text);
}
.report-preview-jump p {
	margin: 0 0 var(--space-3);
	line-height: var(--leading);
}
.report-preview-jump .btn {
	width: 100%;
	justify-content: center;
}
.report-preview-current {
	outline: 2px solid transparent;
	box-shadow: var(--ring-box);
}
.report-preview-note,
.report-preview-meta,
.report-preview-context {
	color: var(--text-secondary);
	font-size: var(--font-md);
	font-weight: 600;
}
.report-preview-heading {
	color: var(--text);
	font-size: var(--font-md);
	font-weight: 700;
}
.report-preview-entry + .report-preview-entry {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--border);
}
.report-preview-question {
	font-weight: 600;
	color: var(--text);
}
.report-preview-screenshot {
	margin: var(--space-2) 0 0;
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
}
.report-preview-screenshot img {
	display: block;
	max-width: 100%;
	max-height: 12rem;
	object-fit: contain;
}
.report-preview-screenshot figcaption {
	margin-top: var(--space-1);
	color: var(--text-secondary);
	font-size: var(--font-md);
}
.details-box.is-na-answer .structured-details-box,
.details-box.is-na-answer .browser-consistency-box,
.details-box.is-na-answer .conditional-input-box,
.details-box.is-na-answer .page-picker,
.guided-fail-extra.is-na-answer .page-picker,
.vs-fail-extra.is-na-answer .page-picker,
.guided-fail-extra.is-untested-answer .page-picker,
.guided-fail-extra.is-untested-answer .guided-note-field,
.guided-fail-extra.is-untested-answer .automated-criterion-suggestion-slot,
.vs-fail-extra.is-untested-answer .page-picker,
.vs-fail-extra.is-untested-answer .details-note-label,
.vs-fail-extra.is-untested-answer .vs-note,
.vs-fail-extra.is-untested-answer .automated-criterion-suggestion-slot {
	display: none;
}
@media (max-width: 64rem) {
	.report-editor-shell {
		grid-template-columns: 1fr;
	}
	.report-preview {
		position: static;
		max-height: none;
	}
	.report-preview-jump {
		position: static;
	}
}
.evidence-browser-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.evidence-browser-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
}

.conditional-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 200px;
}

.conditional-input-wrapper .static-suffix {
	position: absolute;
	right: 0.75rem;
	color: var(--text-muted);
	pointer-events: none;
	font-size: var(--font-md);
}

.conditional-input-wrapper input { padding-right: var(--space-7); }

/* Section heading inside checklist */
.section-heading {
	font-size: var(--font-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--text);
	margin: var(--space-6) 0 var(--space-3) 0;
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--border-light);
}

.section-heading:first-child { margin-top: 0; }

/* Generated headings carry their step as a class rather than inheriting a
   browser default. Two levels: --font-lg for a dialog title or a group
   heading, --font-md for an item heading inside a card or panel. */
.heading-lg {
	font-size: var(--font-lg);
	font-weight: 600;
	line-height: var(--leading-snug);
}

.heading-md {
	font-size: var(--font-md);
	font-weight: 600;
	line-height: var(--leading);
}

/* Phase actions, one set per phase: Clear answers on its own line, and the
   rarer delete behind the More phase actions disclosure. */
.phase-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-4);
}
.phase-more-actions > summary { font-size: var(--font-md); }
.phase-more-actions[open] > .delete-phase-btn { margin-top: var(--space-2); }

.reset-phase-btn {
	font-size: var(--font-md);
	color: var(--fail);
	background: transparent;
	border: 1px solid var(--fail);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-xs);
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 500;
	transition: all 0.15s;
}
.reset-phase-btn:hover { background: var(--fail-bg); }

/* ---- IMAGE HANDLING ---- */
.paste-box {
	border: 2px dashed var(--border-control);
	padding: var(--space-5);
	text-align: center;
	border-radius: var(--radius-md);
	background: var(--bg);
	min-height: 60px;
	color: var(--text-muted);
	font-size: var(--font-md);
	cursor: text;
	transition: border-color 0.15s;
}

.paste-box:focus-within { border-color: var(--accent); }
.paste-box.is-invalid { border: 2px solid var(--fail); }

.paste-box:empty::before {
	content: 'Click to focus, then paste an image (Ctrl+V)';
}

.browse-btn {
	background: none;
	border: none;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	font-size: var(--font-md);
	font-family: var(--font-body);
}

.paste-box-checklist {
	display: flex;
	/* The row has to survive the text-spacing overrides at the reflow floor:
	   without wrapping, the label and the browse control grew past the box and
	   pushed every card around them over its own border. */
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	border-width: 3px;
	background: var(--accent-bg);
	color: var(--text);
	font-weight: 700;
	text-align: left;
	cursor: default;
}
.paste-box-checklist > * {
	min-width: 0;
}
.paste-box-checklist .browse-btn {
	flex: 0 0 auto;
	font-weight: 700;
}

.image-preview-container {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-top: var(--space-2);
	padding: var(--space-2);
}

/* The filled danger commit, drawn as a disc over the screenshot it removes:
   the fill is --fail-fill so --text-on-accent holds in both themes, and the
   ring of page colour separates it from the image behind it. */
.delete-image-btn {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fail-fill);
	color: var(--text-on-accent);
	border: 2px solid var(--bg);
	border-radius: 50%;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	cursor: pointer;
	font-size: var(--font-md);
	font-weight: 600;
	line-height: var(--leading-tight);
	text-align: center;
	transition: background 120ms ease;
}

.image-preview-checklist,
#image-preview {
	max-width: 100%;
	max-height: 300px;
	display: block;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

/* ---- FINDING ITEMS ---- */
/* The list holds one kind of child, so the between-cards step is its gap. */
.finding-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Empty state for any finding list, in both Linear and Guided mode. Owns no
   font-size, so it inherits the 16px body floor (UX-01). */
.finding-list-empty {
	color: var(--text-muted);
	margin: 0;
}

/* The finding card, on the shared card anatomy. Its list carries the
   between-cards step as a gap. */
.finding-item {
	display: grid;
	grid-template-columns: minmax(0, 80px) minmax(0, 1fr) auto;
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
}
.finding-item.no-image {
	grid-template-columns: minmax(0, 1fr) auto;
}

.finding-item img {
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--radius-xs);
	background: var(--bg);
}

.finding-details {
	min-width: 0;
	display: grid;
	gap: var(--space-1);
}
.finding-meta-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1);
	min-width: 0;
}
.finding-details p { margin: 0; font-size: var(--font-md); }
.finding-details strong { color: var(--accent); font-size: var(--font-md); }
.finding-criterion {
	overflow-wrap: anywhere;
}
.finding-description {
	line-height: var(--leading);
	max-width: 72ch;
}

/* Icon-only danger ghosts, the initiating half of the two-step (L11). */
.delete-finding-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--font-md);
	color: var(--fail);
	padding: var(--space-1);
	transition: background 120ms ease;
}
.delete-finding-btn:hover { background: var(--fail-bg); }

/* Logged elements */
.logged-elements-list {
	list-style: none;
	padding: 0;
	margin: var(--space-2) 0 0;
}

.logged-elements-list strong {
	font-size: var(--font-md);
	color: var(--text-muted);
	display: block;
	margin-bottom: var(--space-1);
}

.logged-elements-list li {
	padding: var(--space-2);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xs);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-1);
	font-size: var(--font-md);
	background: var(--bg-card);
}

.logged-elements-list li a { font-weight: 600; color: var(--accent); }

/* ---- MODALS ---- */
/* Elevation level 2, the suite's one overlay layer: the scrim behind, a
   boundary and the overlay shadow on the panel. The scrim carries no blur,
   matching the Scanner: the scrim and the panel's shadow alone separate the
   layers. */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: var(--scrim);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	overscroll-behavior: contain;
}

/* The things a confirmation affects, one per line, under its message. */
.modal-item-list {
	margin: var(--space-2) 0 var(--space-4);
	padding-left: var(--space-5);
}

.modal {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	width: 90%;
	max-width: 560px;
	max-height: 85vh;
	overflow-y: auto;
	padding: var(--space-6);
	box-shadow: var(--shadow-overlay);
}

/* A confirmation or a notice asks one question, so it takes the narrower
   shell. */
.app-confirm-overlay .modal,
.app-notice-overlay .modal { max-width: 440px; }

/* Editors are the shell's one documented deviation: a two-column question
   pack, finding form, element log or organiser needs its content width, so it
   widens from 560px while keeping every other part of the shell. Each cap is
   a rem figure inside min() with a viewport share, so it scales with the type
   scale and never exceeds the window. Confirmations and notices narrow
   instead. */
.modal.linear-workspace-modal {
	width: min(96vw, 100rem);
	max-width: 100rem;
	max-height: min(88vh, 920px);
}

#finding-modal-overlay .modal {
	width: min(96vw, 90rem);
	max-width: 90rem;
	max-height: calc(100vh - 2rem);
	padding: var(--space-6);
}

#element-modal-overlay .modal {
	width: min(96vw, 60rem);
	max-width: 60rem;
}

#finding-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-5);
	row-gap: var(--space-3);
}

#finding-form > h2,
#finding-form > #finding-form-hint,
#attach-to-question-group,
#finding-duplicate-slot,
#finding-form .modal-actions {
	grid-column: 1 / -1;
}

#finding-form .form-group {
	margin-bottom: 0;
}

.finding-form-layout {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-5);
	row-gap: var(--space-3);
}

.finding-form-column,
.not-tested-fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.finding-description-group {
	grid-column: 1 / -1;
	min-width: 0;
}

#finding-description {
	min-height: 9rem;
	resize: vertical;
}

#finding-form .finding-wcag-group,
#finding-form .finding-page-group {
	align-self: start;
}

#finding-form h2 {
	margin-bottom: var(--space-1);
}

#finding-form #finding-form-hint {
	margin-bottom: 0;
}

#finding-form.is-guided-automated-wizard {
	grid-template-columns: minmax(0, 1fr);
}

#finding-form.is-guided-automated-wizard .finding-form-layout {
	grid-template-columns: minmax(0, 1fr);
}

#finding-form.is-guided-automated-wizard .finding-form-column {
	display: contents;
}

.finding-wizard-nav {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}

.finding-wizard-progress {
	margin: 0;
	font-weight: 700;
	color: var(--text);
}

.finding-wizard-actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

#finding-form.is-guided-automated-wizard .modal-actions {
	margin-top: 0;
}

@media (max-width: 64rem) {
	#finding-modal-overlay .modal {
		width: 94vw;
	}

	#finding-form {
		grid-template-columns: 1fr;
	}

	.finding-form-layout {
		grid-template-columns: 1fr;
	}

	.finding-description-group {
		grid-column: 1;
	}
}

.modal h2 {
	font-size: var(--font-lg);
	font-weight: 600;
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-4);
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

/* ---- GUIDED MODE ---- */
.guided-wrapper {
	padding: 0 var(--space-page) var(--space-9);
}

/* Guided mode is the maintained fallback: a single compact
   signpost to the Scanner, never a panel that pushes the work down. */
.guided-scanner-signpost {
	margin: var(--space-2) 0 var(--space-1);
	padding: 0 var(--space-4);
	color: var(--text-secondary);
	font-size: var(--font-md);
}

.guided-phase-nav {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-3) 0 0;
	overflow-x: visible;
	flex-wrap: wrap;
}

.guided-stage-jump {
	margin: var(--space-4) 0 0;
}
.guided-stage-jump-summary {
	width: fit-content;
	max-width: 100%;
	cursor: pointer;
}

.phase-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	min-width: 8.5rem;
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-md);
	font-weight: 500;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg-card);
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.15s;
	white-space: normal;
	text-align: center;
	font-family: var(--font-body);
}

.phase-chip:hover { border-color: var(--accent); color: var(--accent); }
.phase-chip.is-active { background: var(--accent-fill); color: var(--text-on-accent); border-color: var(--accent-fill); }
.phase-chip.is-done:not(.is-active) { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
/* The band edge holds through the active and done states, which carry the
   stage's own progress rather than its band. */
.phase-chip[data-band] { border-left: 4px solid var(--band-hue); }
.phase-chip-main {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-weight: 700;
	line-height: var(--leading-tight);
	text-align: left;
}
.phase-chip-status {
	font-size: var(--font-md);
	line-height: var(--leading-tight);
	text-align: left;
	/* Full opacity: fading this line over the active chip's accent fill
	   drops it under 4.5:1 in both themes. */
	color: currentColor;
}

.guided-card-area {
	padding-top: var(--space-2);
}

.guided-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	min-height: 200px;
	animation: cardIn 0.25s ease;
}
.guided-card.guided-focused-question {
	margin-top: var(--space-5);
	padding: var(--space-6);
}
.guided-card-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-bottom: var(--space-4);
}
.guided-card-context {
	min-width: 0;
}
.guided-stage-caption {
	margin: 0;
	font-size: var(--font-md);
	font-weight: 700;
	color: var(--text-muted);
}
.guided-local-progress {
	margin: var(--space-1) 0 0;
	font-size: var(--font-md);
	color: var(--text-secondary);
}

@keyframes cardIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.guided-card .section-heading {
	font-size: var(--font-md);
	font-weight: 600;
	color: var(--text-muted);
	border-bottom: none;
	margin: 0 0 var(--space-2);
	padding: 0;
}

.guided-card .guided-question-text {
	font-size: var(--font-lg);
	font-weight: 600;
	margin: 0 0 var(--space-6);
	line-height: var(--leading-snug);
}

/* Guided question tip. Owns no font-size so it inherits the 16px floor
   (UX-01); it is an aria-describedby target, so it is read as well as seen. */
/* The hint marker is the icon set's info glyph in currentColor, beside the
   hint rather than in place of it. */
.guided-question-tip {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--text-secondary);
	margin: 0 0 var(--space-6);
	padding: var(--space-3);
	background: var(--accent-bg);
	border-radius: var(--radius-sm);
	max-width: var(--measure-prose);
}
.guided-question-tip .icon { height: 1.5em; }

/* Browser-impact controls on checks where runtime differences are plausible. */
.browser-impact-label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.browser-impact-hint {
	color: var(--text-muted);
	margin: 0;
}

.guided-card .checklist-options {
	gap: var(--space-2);
}

.guided-card .checklist-options label {
	font-size: var(--font-md);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
	transition: border-color 0.15s, background 0.15s;
}

.guided-card .checklist-options label:hover {
	border-color: var(--accent);
	background: var(--accent-bg);
}

/* Selected answer: shown by a fill (not a ring) and no weight/colour change, so it
   never competes with the yellow focus ring and never reflows the layout. */
.guided-card .checklist-options input[type="radio"]:checked + span {
	color: inherit;
	font-weight: inherit;
}
.guided-card .checklist-options label:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-bg);
}

.guided-nav-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.guided-step-counter {
	font-size: var(--font-md);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* Guided card form inputs */
.guided-card .form-group { margin-bottom: var(--space-4); }
.guided-card textarea { min-height: 120px; }
.guided-report-toolbar {
	margin: 0;
	display: flex;
	align-items: flex-end;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.guided-report-toolbar .btn {
	min-height: 2.7rem;
}
.guided-automated-current-page select {
	min-width: 0;
	width: 100%;
}
.guided-question-panel {
	display: grid;
	gap: var(--space-4);
	justify-items: stretch;
}
.guided-answer-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
/* The card takes the viewport; the reading measure belongs to the running
   text inside it, so the question and its kicker stay readable however wide
   the window is. */
.guided-focused-question .guided-kicker {
	margin: 0 auto;
	max-width: var(--measure-prose);
	text-align: center;
}
.guided-focused-question .guided-question-text {
	display: block;
	width: 100%;
	max-width: var(--measure-prose);
	margin: 0 auto var(--space-5);
	text-align: center;
	font-size: var(--font-xl);
	line-height: var(--leading-tight);
	color: var(--text);
}
.guided-question-tip {
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--accent-bg);
	color: var(--text-secondary);
	font-size: var(--font-md);
	line-height: var(--leading);
}
.guided-focused-question .guided-answer-options {
	display: grid;
	gap: var(--space-2);
}
.guided-focused-question .guided-answer-options label {
	justify-content: center;
	width: 100%;
	min-height: 3rem;
	text-align: center;
}
.guided-local-detail-toggle {
	justify-self: center;
}
.guided-focused-question .guided-fail-extra {
	margin-top: var(--space-5);
}
.guided-page-scan-layout {
	display: grid;
	grid-template-columns: minmax(min(100%, 18rem), 0.85fr) minmax(0, 1.35fr);
	gap: var(--space-4);
	align-items: start;
	min-width: 0;
}
.guided-page-scan-layout.is-single-step {
	grid-template-columns: minmax(0, 1fr);
}
.guided-page-scan-stepbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border-light);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
}
.guided-page-scan-status {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--text);
	font-size: var(--font-md);
	line-height: var(--leading-snug);
}
.guided-page-scan-step-index {
	display: block;
	font-size: var(--font-md);
	font-weight: 600;
	color: var(--text-secondary);
}
.guided-page-scan-status strong {
	display: block;
}
.guided-page-scan-step-nav {
	flex: 0 1 auto;
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin: 0;
}
@media (max-width: 64rem) {
	.guided-page-scan-stepbar {
		align-items: stretch;
	}
	.guided-page-scan-status,
	.guided-page-scan-step-nav {
		flex-basis: 100%;
	}
	.guided-page-scan-step-nav {
		justify-content: flex-start;
	}
	.guided-page-scan-step-nav .btn {
		flex: 1 1 12rem;
	}
}
.guided-page-scan-panel {
	min-width: 0;
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.guided-current-page-panel {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--accent);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent-bg);
	color: var(--text);
}
.guided-current-page-panel.is-empty {
	border-color: var(--border);
	border-left-color: var(--warning-border);
	background: var(--bg-card);
}
.guided-current-page-title {
	margin: 0;
	font-size: var(--font-md);
	font-weight: 700;
	line-height: var(--leading-snug);
	overflow-wrap: anywhere;
}
.guided-current-page-hint {
	margin: var(--space-1) 0 0;
	font-size: var(--font-md);
	line-height: var(--leading-snug);
	color: var(--text-secondary);
}
.guided-page-scan-notice {
	margin: 0 0 var(--space-3);
}
.guided-page-scan-panel .vs-elements,
.guided-page-scan-panel .vs-cluster {
	margin-top: 0;
}
.guided-selected-tools-panel,
.guided-page-completion-panel,
.guided-automated-review {
	margin: var(--space-3) 0;
	padding: var(--space-3);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
}
.guided-selected-tools-panel h5,
.guided-page-completion-panel h4 {
	margin: 0 0 var(--space-2);
	font-size: var(--font-md);
}
.guided-selected-tools-line {
	margin: 0;
	font-size: var(--font-md);
	line-height: var(--leading-snug);
	overflow-wrap: anywhere;
}
.guided-selected-tools-panel ul {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.guided-selected-tools-panel li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.guided-selected-tools-panel li span {
	color: var(--text-secondary);
}
.guided-automated-review summary {
	cursor: pointer;
	font-weight: 700;
}
.guided-page-completion-panel p {
	margin: 0 0 var(--space-2);
}
.guided-page-completion-actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-top: var(--space-3);
}
.guided-soft-gate {
	margin: var(--space-4) 0;
	padding: var(--space-3) var(--space-4);
	border: 2px solid var(--warning-border);
	border-radius: var(--radius-md);
	background: var(--warning-bg);
	color: var(--text);
}
.guided-soft-gate h3 {
	margin: 0 0 var(--space-2);
	font-size: var(--font-md);
}
.guided-soft-gate ul {
	margin: var(--space-1) 0 0;
	padding-left: var(--space-5);
}
.guided-soft-gate p {
	margin: var(--space-2) 0;
}


/* ---- FIELD HINTS ---- */
.field-hint {
	font-size: var(--font-md);
	color: var(--text-muted);
	margin: 0 0 var(--space-2);
	line-height: var(--leading);
	max-width: var(--measure-prose);
}
.req {
	color: var(--fail);
	font-weight: 600;
}

/* ---- STATUS BADGE (text, not colour alone) ---- */
/* A status pill: radius-pill, the word inside it, and a fill measured
   against --text-on-accent. */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-md);
	font-weight: 600;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-control);
	color: var(--text-secondary);
	background: var(--bg-card);
	white-space: nowrap;
}
.status-badge.is-pass { color: var(--text-on-accent); border-color: var(--pass-fill); background: var(--pass-fill); }
.status-badge.is-fail { color: var(--text-on-accent); border-color: var(--fail-fill); background: var(--fail-fill); }
.status-badge.is-na { color: var(--text-on-accent); border-color: var(--na-fill); background: var(--na-fill); }
.status-badge.is-untested { color: var(--warning-text); border-color: var(--warning-border); border-style: dashed; background: var(--warning-bg); }
.status-badge.is-needs-reason { color: var(--fail); border-color: var(--fail); background: var(--bg-card); }

/* ---- COULD NOT TEST ---- */
/* The reason a check could not be tested sits under the chosen answer as
   its own required field. A reason the auditor remembered is offered above
   it on the suite's advisory surface, never inserted on its own. */
.not-tested-reason-field,
.not-tested-remember {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.not-tested-reason-field .field-hint,
/* The hint lines up with the checkbox label's text, past the box. */
.not-tested-remember .field-hint { margin: 0; padding-left: var(--space-7); }
.status-line { margin: 0; color: var(--text-secondary); }
.status-line:empty { display: none; }
.status-line strong { color: var(--text); }
.suggestion {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--advisory-text);
	border-radius: var(--radius-sm);
	background: var(--advisory-bg);
	color: var(--advisory-text);
}
.suggestion p { margin: 0; }
.suggestion-title { font-weight: 700; display: flex; gap: var(--space-2); align-items: baseline; }
.suggestion-title .icon { align-self: center; }
.suggestion blockquote { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--advisory-text); }
.suggestion .btn-secondary { align-self: flex-start; }

/* Combinations not tested: reference-level, one collapsed line under the
   answer row with its count at the trailing edge. */
.gap-disclosure {
	margin-top: var(--space-3);
	border-top: 1px dashed var(--border);
	padding-top: var(--space-2);
}
.gap-disclosure > summary {
	display: flex;
	align-items: center;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--accent);
	font-weight: 600;
}
.gap-disclosure > summary:hover { background: var(--bg-hover); }
.gap-disclosure .disclosure-count {
	min-width: 1.75em;
	padding: 0 var(--space-2);
	border: 1px solid var(--warning-border);
	border-radius: var(--radius-pill);
	background: var(--warning-bg);
	color: var(--warning-text);
	text-align: center;
}
.gap-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0 0; }
.gap-body > .field-hint { margin: 0; }
.gap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); align-self: stretch; }
.gap-entry {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	align-items: baseline;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-left: 4px dashed var(--warning-border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}
.gap-entry-text { flex: 1 1 16rem; min-width: 0; margin: 0; }
.gap-entry-text strong { display: block; }
.gap-entry .actions-row { margin-left: auto; }
.gap-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-self: stretch;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}
.gap-form-heading { margin: 0; font-weight: 600; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.field-row > .field { flex: 1 1 12rem; }

/* Last year's "Could not test", raised again on a retest. */
.last-year-slot:empty { display: none; }
.last-year-slot .banner { margin-bottom: var(--space-3); }
.banner-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.banner-body p { margin: 0; }
.banner-body .btn { align-self: flex-start; }
.last-year-kept { margin-top: var(--space-3); }
.last-year-panel { margin-bottom: var(--space-5); }

/* ---- PAGE PICKER (aria-pressed toggles + tick + text) ---- */
.page-picker { margin-top: var(--space-3); }
.page-picker:empty { display: none; }
.page-picker-label {
	display: block;
	font-size: var(--font-md);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--space-2);
}
.page-picker-hint {
	font-size: var(--font-md);
	color: var(--text-muted);
	margin: var(--space-2) 0 0;
}
.page-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-body);
	font-size: var(--font-md);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--bg-card);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 120ms ease;
}
.page-tag:hover { border-color: var(--accent); color: var(--accent); }
.page-tag.on {
	background: var(--accent-fill);
	border-color: var(--accent-fill);
	color: var(--text-on-accent);
}

/* ---- SAMPLE PAGES MANAGER ---- */
.sample-pages-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-2);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.sample-pages-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: var(--space-2);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
	font-size: var(--font-md);
}
.sample-pages-list .sp-name { font-weight: 600; }
.sample-pages-list li a {
	color: var(--accent);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	max-width: 100%;
	min-width: 0;
}
.sample-pages-list li a:hover { text-decoration: underline; }
.sample-pages-list .sp-delete { margin-left: auto; }
.sample-pages-list .sp-states {
	flex-basis: 100%;
	color: var(--text-muted);
	font-size: var(--font-md);
	font-weight: 400;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
}
.sample-pages-list .sp-state {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0 var(--space-1) 0 var(--space-2);
}
.sample-pages-list .sp-state-remove {
	font-size: var(--font-md);
	line-height: var(--leading-tight);
	padding: var(--space-1);
}
.sp-empty { color: var(--text-muted); }
.sp-add { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; }
.sp-add-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 10rem; min-width: 0; }
.sp-add-field.sp-add-field-url { flex-basis: 14rem; }
.sp-add-field label { margin-bottom: 0; }
.sp-add-field input { width: 100%; }

/* ---- PER-PAGE SUMMARY (text counts + native disclosure) ---- */
/* Rows here are the shared status row; only the list's own outer
   spacing is local. */
.page-summary { margin: var(--space-2) 0 var(--space-4); }
.ps-detail { padding-left: var(--space-4); font-weight: 400; }
.ps-detail li { margin-bottom: var(--space-1); }
/* The link out carries the external-link icon after its label, on the line. */
.status-row-body > a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--accent);
	font-size: var(--font-md);
	align-self: flex-start;
}
.ps-empty { color: var(--text-muted); font-size: var(--font-md); }

/* ---- PHASE 7 REGIONS ---- */
/* Phase 7 holds two jobs: writing the report, and the checks that precede
   generating it. Each is one region on the suite's disclosure pattern, so
   the writing is what the section opens on and the checks are a row away. */
.summary-region > .summary-region-label {
	display: flex;
	align-items: center;
	font-size: var(--font-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--text);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--border-light);
}
.summary-region + .summary-region { margin-top: var(--space-6); }
.summary-region-body { padding-top: var(--space-4); }

/* ---- SUMMARY WRITING HELPER ---- */
.summary-writing-workspace {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(min(100%, 24rem), 0.6fr);
	gap: var(--space-5);
	align-items: start;
	margin: var(--space-3) 0 var(--space-4);
}
.summary-writing-workspace > .checklist-item {
	margin: 0;
}
.summary-writing-workspace textarea {
	min-height: 11rem;
}
.summary-helper-panel {
	min-width: 0;
	position: sticky;
	top: 88px;
}
/* ---- INSERT FROM THE AUDIT / SUMMARY COMPOSITION AIDS ---- */
.summary-composer-slot:empty { display: none; }
.summary-composer-slot {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	min-width: 0;
}
.audit-fact-picker-body {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-2) 0 0;
	min-width: 0;
}
.audit-fact-kind {
	display: block;
	color: var(--text-muted);
	font-size: var(--font-md);
	font-weight: 400;
}
.audit-fact-insert { justify-self: start; }
.summary-count-line { margin: 0; }
.summary-composer-setting,
.followup-structured-setting { margin: var(--space-2) 0; font-weight: 400; }
.followup-action-card .audit-fact-picker { margin: var(--space-2) 0; }
.summary-insert-panel { margin: var(--space-4) 0 0; }
.summary-insert-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.summary-insert-item { margin: 0; }
.summary-insert-text { margin: 0 0 var(--space-1); }
.summary-helper {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-2) 0 var(--space-4);
}
.summary-helper-queue {
	display: grid;
	gap: var(--space-3);
}
.summary-helper-toolbar {
	display: grid;
	gap: var(--space-1);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--border-light);
}
.summary-helper-progress {
	margin: 0;
	font-size: var(--font-md);
	color: var(--text-secondary);
}
.summary-helper-shortcut-inline {
	font-size: var(--font-md);
}
.summary-helper-status {
	margin: 0;
	padding: var(--space-2);
	border: 1px solid var(--pass);
	border-radius: var(--radius-sm);
	background: var(--pass-bg);
	font-size: var(--font-md);
	color: var(--pass);
	font-weight: 700;
	animation: summary-status-pulse 1.2s ease-in-out 1;
}
@keyframes summary-status-pulse {
	0% { box-shadow: 0 0 0 0 var(--pulse); }
	70% { box-shadow: 0 0 0 8px var(--pulse-fade); }
	100% { box-shadow: none; }
}
.summary-helper-list {
	display: grid;
	gap: var(--space-2);
}
.summary-helper-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3);
	border: 1px solid var(--border-light);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
}
.summary-helper-row.is-current {
	border-left-width: 5px;
	border-color: var(--accent);
	background: var(--accent-bg);
}
.summary-helper-row.is-covered {
	border-left-color: var(--pass);
	background: var(--pass-bg);
}
.summary-helper-kicker,
.summary-helper-title,
.summary-helper-meta,
.summary-helper-snippet,
.summary-helper-empty {
	font-size: var(--font-md);
	line-height: var(--leading);
}
.summary-helper-kicker {
	margin: 0 0 var(--space-1);
	color: var(--text-secondary);
	font-weight: 700;
}
.summary-helper-title {
	margin: 0 0 var(--space-1);
	font-weight: 700;
	color: var(--text);
}
.summary-helper-meta {
	margin: 0 0 var(--space-1);
	color: var(--text-secondary);
}
/* An issue that is not the one on show is a single line: its name and where it
   was found, with nothing under it to space away from. */
.summary-helper-row:not(.is-current) .summary-helper-meta { margin-bottom: 0; }
/* The current issue: the wording the report will print, with the recorded
   evidence beside it rather than run on to the end of it. */
.summary-helper-detail {
	display: grid;
	/* The evidence sits beside the wording only where both still have a
	   column to read in. In a narrow queue the split left the evidence a
	   sliver that broke each value one character per line, so below two full
	   columns the evidence goes underneath at the panel's own width. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-3);
	align-items: start;
	margin-top: var(--space-2);
}
.summary-helper-report,
.summary-helper-evidence { min-width: 0; }
.summary-helper-subhead {
	margin: 0 0 var(--space-1);
	font-size: var(--font-md);
	font-weight: 700;
	color: var(--text-secondary);
}
.summary-helper-snippet {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-left: 3px solid var(--border);
	background: var(--bg-input);
	color: var(--text);
}
.summary-helper-snippet p { margin: 0; }
.summary-helper-snippet p + p { margin-top: var(--space-2); }
.summary-helper-evidence-list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
}
.summary-helper-evidence-row {
	display: grid;
	/* The label takes what it needs up to a bounded share of the row, so the
	   value always keeps the majority. An unbounded auto label swallowed the
	   row and broke the value one character per line. */
	grid-template-columns: fit-content(40%) minmax(0, 1fr);
	gap: var(--space-2);
	font-size: var(--font-md);
	line-height: var(--leading-snug);
}
.summary-helper-evidence-row dt {
	margin: 0;
	color: var(--text-secondary);
	font-weight: 700;
}
.summary-helper-evidence-row dd {
	margin: 0;
	color: var(--text);
	overflow-wrap: break-word;
}
.summary-helper-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-width: 0;
}
.summary-helper-actions .checkbox-label {
	margin: 0;
}
.summary-helper-upcoming,
.summary-helper-covered {
	display: grid;
	gap: var(--space-2);
}
.summary-helper-upcoming .summary-helper-row,
.summary-helper-covered .summary-helper-row {
	gap: var(--space-2);
	padding: var(--space-2);
}
.summary-helper-upcoming .summary-helper-title,
.summary-helper-covered .summary-helper-title {
	margin-bottom: var(--space-1);
}
.summary-helper-upcoming .summary-helper-meta,
.summary-helper-covered .summary-helper-meta {
	margin-bottom: 0;
}
.summary-helper-upcoming .summary-helper-list {
	max-height: 18rem;
	overflow: auto;
	padding-right: var(--space-1);
}
.summary-helper-upcoming h4,
.summary-helper-covered summary {
	margin: 0;
	font-size: var(--font-md);
	font-weight: 700;
	cursor: pointer;
}
.summary-helper-covered .summary-helper-list {
	margin-top: var(--space-2);
	max-height: 16rem;
	overflow: auto;
}
.summary-helper-empty {
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-card);
	color: var(--text-muted);
}
.summary-editor-open {
	margin: var(--space-2) 0 0;
}
.summary-editor-modal {
	/* Full page, less a gutter that keeps the scrim visible on every edge so
	   the dialog still reads as a layer above the audit. */
	width: calc(100% - 1.5rem);
	max-width: none;
	height: calc(100% - 1.5rem);
	max-height: calc(100% - 1.5rem);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
/* Two columns that each scroll on their own: scrolling the queue leaves the
   text being typed where it was, the way a second copy of the report open
   beside the document does. */
.summary-editor-modal .summary-editor-layout {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	align-items: stretch;
	grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 26rem), 1fr);
}
.summary-editor-modal .summary-editor-main {
	min-height: 0;
	overflow: auto;
	padding-right: var(--space-2);
}
.summary-editor-main,
.gap-form .field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}
.summary-editor-main label {
	font-weight: 600;
}
.summary-editor-modal .summary-editor-text {
	flex: 1 1 auto;
	min-height: min(58vh, 32rem);
	resize: vertical;
}
.summary-editor-tools {
	display: grid;
	gap: var(--space-1);
	flex: 0 0 auto;
}
.summary-editor-modal .summary-helper-panel {
	position: static;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.summary-editor-modal .summary-helper {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	margin: var(--space-2) 0 0;
	padding-right: var(--space-2);
}
/* One scroll for the whole queue inside the editor: the lists inside it keep
   their own height only where the queue sits in the page. */
.summary-editor-modal .summary-helper-upcoming .summary-helper-list,
.summary-editor-modal .summary-helper-covered .summary-helper-list {
	max-height: none;
	overflow: visible;
}
.summary-editor-modal .section-heading {
	margin-top: 0;
}
/* ---- Scanner review editor ---- */
/* The panel in the report checks is a count and a way in; the queue itself
   opens as the same full-page dialog the summary editor uses, with the item
   under judgement on the left and the whole queue on the right. */
.scanner-review-count {
	margin: var(--space-2) 0 0;
	font-weight: 600;
}
.scanner-review-open {
	margin: var(--space-2) 0 0;
}
.scanner-review-modal {
	width: calc(100% - 1.5rem);
	max-width: none;
	height: calc(100% - 1.5rem);
	max-height: calc(100% - 1.5rem);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.scanner-review-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(min(100%, 22rem), 1fr);
	gap: var(--space-5);
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	align-items: stretch;
}
.scanner-review-item,
.scanner-review-rail {
	min-height: 0;
	overflow: auto;
	padding-right: var(--space-2);
}
.scanner-review-rail {
	display: flex;
	flex-direction: column;
}
.scanner-review-rail .section-heading {
	margin-top: 0;
}
.scanner-review-position {
	margin: 0;
	color: var(--text-muted);
}
.scanner-review-title {
	margin: var(--space-1) 0 var(--space-3);
	font-size: var(--font-xl);
	line-height: var(--leading-snug);
}
.scanner-review-facts {
	display: grid;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}
.scanner-review-facts > div {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	gap: var(--space-3);
}
.scanner-review-facts dt {
	font-weight: 600;
}
.scanner-review-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}
.scanner-review-check {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.scanner-review-outcome-group,
.scanner-review-report-choice {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin: 0;
	display: grid;
	gap: var(--space-2);
}
.scanner-review-outcome-group legend,
.scanner-review-report-choice legend {
	font-weight: 600;
	padding: 0 var(--space-2);
}
.scanner-review-report-choice {
	flex: 0 0 auto;
}
/* The rail row is the shared status row made operable: the button fills the
   row so the whole line is the target. */
.scanner-review-rail-btn {
	width: 100%;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.scanner-review-rail-btn[aria-current="true"] {
	background: var(--bg-hover);
	font-weight: 600;
}
@media (max-width: 64rem) {
	.summary-writing-workspace {
		grid-template-columns: 1fr;
	}
	.summary-helper-panel {
		position: static;
	}
	.summary-editor-modal .summary-editor-layout {
		overflow: auto;
	}
	.summary-editor-modal .summary-editor-main,
	.summary-editor-modal .summary-helper {
		overflow: visible;
		padding-right: 0;
	}
	.summary-editor-modal .summary-editor-text {
		min-height: 18rem;
	}
	.summary-helper-detail {
		grid-template-columns: 1fr;
	}
	.scanner-review-layout {
		grid-template-columns: 1fr;
		overflow: auto;
	}
	.scanner-review-item,
	.scanner-review-rail {
		overflow: visible;
		padding-right: 0;
	}
	.scanner-review-facts > div {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 64rem) {
	.summary-helper-row {
		grid-template-columns: 1fr;
	}
	.summary-helper-actions {
		justify-content: flex-start;
		min-width: 0;
	}
}

/* ---- SCREEN-READER REVISIT ---- */
.rv-help { font-size: var(--font-md); color: var(--text-secondary); margin: 0 0 var(--space-2); }
.revisit-list {
	list-style: none;
	padding: 0;
	margin: var(--space-2) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.revisit-list li {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
}
.rv-q { display: block; font-weight: 500; font-size: var(--font-md); }
.rv-meta { display: block; font-size: var(--font-md); color: var(--text-muted); margin-top: var(--space-1); }

/* ---- GUIDED STAGE TRIMMINGS ---- */
.stage-intro {
	font-size: var(--font-md);
	color: var(--text-secondary);
	margin: 0 0 var(--space-5);
	line-height: var(--leading);
}
.guided-kicker {
	font-size: var(--font-md);
	color: var(--text-muted);
	font-weight: 600;
	margin: 0 0 var(--space-2);
}
.guided-fail-extra {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px dashed var(--border);
}

/* Finding page tag */
.finding-page {
	display: inline-block;
	font-size: var(--font-md);
	color: var(--text-secondary);
	background: var(--bg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xs);
	padding: var(--space-1) var(--space-2);
	margin: var(--space-1) 0;
}
.finding-question-list,
.finding-wcag-list,
.finding-page-options {
	display: grid;
	gap: var(--space-1);
	max-height: 8rem;
	overflow: auto;
	margin-top: var(--space-2);
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.finding-page-options:empty {
	display: none;
}
.finding-skip-wcag {
	margin: var(--space-1) 0 0;
}
#finding-modal-overlay .paste-box {
	min-height: 48px;
	padding: var(--space-3);
}
.finding-paste-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	border-width: 3px;
	background: var(--accent-bg);
	color: var(--text);
	font-weight: 700;
}
.finding-paste-box .browse-btn {
	flex: 0 0 auto;
	font-weight: 700;
}
.finding-image-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.finding-image-list:empty {
	display: none;
}
.finding-image-preview-item {
	margin: 0;
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
}
.finding-image-preview-item img {
	display: block;
	width: 100%;
	max-height: 7rem;
	object-fit: contain;
	background: var(--bg);
	border-radius: var(--radius-sm);
}
.finding-image-preview-item figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--font-md);
}
.finding-page-add {
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.finding-page-add > summary {
	font-weight: 600;
}
.finding-page-add .sp-add {
	margin-top: var(--space-1);
}
.finding-list-fold > summary {
	font-weight: 600;
	padding: var(--space-2) 0;
}
.linear-workspace-component .linear-workspace-differs {
	display: inline;
	margin-left: var(--space-2);
	color: var(--text-secondary);
	font-size: var(--font-md);
}
.finding-page-add-status {
	margin-top: var(--space-1);
}
.finding-page-add-status.is-error {
	color: var(--fail);
	font-weight: 600;
}
.finding-page-add-status.is-ok {
	color: var(--pass);
	font-weight: 600;
}
.finding-wcag-list.is-invalid,
.finding-page-options.is-invalid {
	border: 2px solid var(--fail);
}
.finding-wcag-option,
.finding-page-option {
	align-items: flex-start;
	margin: 0;
	padding: var(--space-1);
	border-radius: var(--radius-sm);
}
.finding-page-option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--space-2);
	align-items: start;
}
.finding-page-option label {
	cursor: pointer;
	line-height: var(--leading-snug);
}
.finding-page-name,
.finding-page-url {
	display: block;
}
.finding-page-url {
	color: var(--text-muted);
	font-size: var(--font-md);
	/* Wrap rather than ellipsise. This names the page a finding was found on,
	   so truncating it loses evidence; the sample-page list already wraps and
	   is the pattern followed here. min-width:0 lets it shrink inside its
	   grid column instead of forcing the row wider. */
	overflow-wrap: anywhere;
	white-space: normal;
	min-width: 0;
	max-width: 100%;
}
.finding-page-open {
	color: var(--accent);
	font-size: var(--font-md);
	font-weight: 600;
	/* The label wraps rather than holding the row open. Kept on one line it
	   set the width of its own column, and under the text-spacing overrides
	   at the reflow floor that column pushed the whole form past its box. */
	min-width: 0;
}
.finding-page-open:hover {
	text-decoration: underline;
}
.finding-question-option:hover,
.finding-wcag-option:hover,
.finding-page-option:hover {
	background: var(--bg-hover);
}
.finding-question-option span,
.finding-wcag-option span,
.finding-page-option span {
	line-height: var(--leading-snug);
}
.finding-wcag-count {
	margin-top: var(--space-1);
}
input[type='search']::-webkit-search-cancel-button {
	cursor: pointer;
}
:root[data-theme='dark'] input[type='search']::-webkit-search-cancel-button {
	filter: invert(1) brightness(1.6);
}
.finding-duplicate-slot:empty {
	display: none;
}
.finding-duplicate-panel {
	margin: var(--space-3) 0 var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--warning-border);
	border-radius: var(--radius-sm);
	background: var(--warning-bg);
	color: var(--warning-text);
}
.finding-duplicate-title {
	margin: 0 0 var(--space-2);
	font-size: var(--font-md);
	font-weight: 700;
}
.finding-duplicate-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--warning-border);
}
.finding-duplicate-card p {
	margin: 0 0 var(--space-1);
	font-size: var(--font-md);
	line-height: var(--leading);
}
.finding-duplicate-card .btn {
	flex: 0 0 auto;
	white-space: normal;
	max-width: 13rem;
}
.finding-duplicate-meta {
	font-size: var(--font-md);
	color: var(--warning-text);
}
.automated-criterion-suggestion-slot:empty {
	display: none;
}
.automated-criterion-suggestions {
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--advisory-text);
	border-radius: var(--radius-sm);
	background: var(--advisory-bg);
	color: var(--advisory-text);
}
.automated-criterion-suggestions > summary {
	cursor: pointer;
}
.automated-criterion-title {
	margin: 0 0 var(--space-1);
	font-size: var(--font-md);
	font-weight: 700;
}
.automated-criterion-suggestions p,
.automated-criterion-suggestions li {
	font-size: var(--font-md);
	line-height: var(--leading);
}
.automated-criterion-suggestions p {
	margin: 0 0 var(--space-2);
}
.automated-criterion-suggestions ul {
	margin: 0;
	padding-left: var(--space-5);
}
.automated-criterion-suggestions span {
	display: inline-block;
	margin-left: var(--space-1);
	color: var(--advisory-text);
}
.finding-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
}
.finding-actions .delete-finding-btn {
	position: static;
	flex: 0 0 auto;
}
.finding-review-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-1) 0;
}
.finding-review-badge {
	display: inline-block;
	font-size: var(--font-md);
	font-weight: 700;
	line-height: var(--leading-tight);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-xs);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text-secondary);
}
.finding-origin {
	color: var(--text-muted);
	font-size: var(--font-md);
	font-weight: 400;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0 var(--space-2);
	white-space: nowrap;
}
.finding-review-badge.is-warning {
	border-color: var(--warning-border);
	background: var(--warning-bg);
	color: var(--warning-text);
}
.finding-review-badge.is-ok {
	border-color: var(--pass);
	background: var(--pass-bg);
	color: var(--pass);
}
.automated-no-error-panel {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.automated-tools-prerequisite {
	flex-wrap: wrap;
	margin: var(--space-3) 0 0;
}
.automated-tools-prerequisite > span { flex: 1 1 16rem; }
.automated-report-preview-slot {
	margin-top: var(--space-4);
}
.automated-report-preview ul {
	margin: var(--space-1) 0 var(--space-3) var(--space-5);
	padding: 0;
}
.automated-report-preview li {
	font-size: var(--font-md);
	line-height: var(--leading);
	margin-bottom: var(--space-1);
}
.automated-report-preview li span {
	display: block;
	margin-top: var(--space-1);
	color: var(--text-secondary);
}
.automated-no-error-row {
	display: grid;
	grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
	gap: var(--space-2);
	align-items: center;
}
.automated-coverage-row {
	padding-top: var(--space-3);
	border-top: 1px dashed var(--border);
}
.automated-coverage-row .field-hint {
	margin: var(--space-1) 0 0;
}
.automated-no-error-row .field-hint {
	margin: 0;
}
.audit-review-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--space-2);
	margin: var(--space-4) 0;
}
.audit-review-summary div {
	padding: var(--space-3);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.audit-review-summary strong {
	display: block;
	font-size: var(--font-xl);
	color: var(--text);
}
.audit-review-summary span {
	display: block;
	font-size: var(--font-md);
	color: var(--text-muted);
}
.validation-list-grouped > li {
	margin-bottom: var(--space-3);
}
.validation-list-grouped ul {
	margin: var(--space-1) 0 0;
	padding-left: var(--space-5);
}
.review-fix-btn {
	margin-left: var(--space-2);
	margin-top: var(--space-1);
}
/* The criterion roll-up sits with the grouped warnings it belongs beside,
   closed until the reviewer asks for it. */
.final-review-rollup {
	margin: var(--space-4) 0;
}
.final-review-rollup > .final-review-rollup-label {
	display: flex;
	align-items: center;
	font-size: var(--font-lg);
	font-weight: 600;
	color: var(--text);
}
.final-review-rollup .field-hint { margin: var(--space-2) 0; }
.review-jump-target {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
	border-radius: var(--radius-md);
	animation: review-target-pulse 1.2s ease-in-out 1;
}
@keyframes review-target-pulse {
	0% { box-shadow: 0 0 0 0 var(--pulse-accent); }
	70% { box-shadow: 0 0 0 10px var(--pulse-accent-fade); }
	100% { box-shadow: none; }
}
:root[data-theme='dark'] .review-jump-target {
	animation-name: review-target-pulse-dark;
}
@keyframes review-target-pulse-dark {
	0% { box-shadow: 0 0 0 0 var(--pulse-accent); }
	70% { box-shadow: 0 0 0 10px var(--pulse-accent-fade); }
	100% { box-shadow: none; }
}
.review-detail {
	margin: var(--space-2) 0 var(--space-1);
}
.review-detail summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--text-secondary);
}
.review-detail ul {
	margin-top: var(--space-1);
}
.validation-ok {
	padding: var(--space-3);
	border: 1px solid var(--pass);
	border-radius: var(--radius-md);
	background: var(--pass-bg);
	color: var(--pass);
	font-weight: 700;
}
.guided-review-queue {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px dashed var(--border);
}
.guided-review-queue h3 {
	margin: 0 0 var(--space-3);
	font-size: var(--font-lg);
	font-weight: 600;
	line-height: var(--leading-snug);
}
.guided-review-group {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.guided-review-group h4 {
	margin: 0 0 var(--space-2);
	font-size: var(--font-md);
}
.guided-review-group ul {
	margin: 0;
	padding-left: var(--space-5);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 64rem) {
	.page-wrapper {
		grid-template-columns: 1fr;
	}
	#tips-sidebar {
		position: static;
		max-height: none;
		/* Below the two-column width the sidebar follows main. Ahead of it,
		   the progress list and the sidebar actions pushed the first field of
		   the primary task off several screens. */
		order: 1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
	}
	.sidebar-actions {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
	}
	/* One column of page flow: the page scrolls, not the list. */
	#tips-sidebar > #progress-card {
		overflow-y: visible;
	}
	.report-editor-shell {
		grid-template-columns: 1fr;
	}
	.report-preview,
	.report-preview-jump {
		position: static;
		max-height: none;
	}
	/* 481-1024px is where 300 percent zoom lands on common monitors. Full
	   text labels on the secondary controls reserved a fixed block of the
	   row, so the shrinkable mode switcher and save-status chip were
	   crushed until their text wrapped one letter per line. The secondary
	   controls become icon-only here; their names stay in the
	   accessibility tree. */
	.header-theme-label,
	.header-workspace-settings-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0,0,0,0);
		border: 0;
	}
	.header-theme-toggle,
	.header-workspace-settings,
	.header-tools-summary {
		min-height: 2rem;
		padding: var(--space-1);
		font-size: var(--font-md);
		line-height: var(--leading-tight);
		gap: var(--space-1);
	}
	.header-theme-toggle svg,
	.header-workspace-settings svg,
	.header-tools-summary svg {
		width: 1rem;
		height: 1rem;
	}
}

@media (max-width: 64rem) {
	.mode-tab {
		justify-content: center;
		padding-inline: var(--space-2);
	}
	html { scroll-padding-top: 5rem; }
	.linear-workspace-settings-layout {
		grid-template-columns: 1fr;
	}
	.linear-workspace-category-list {
		position: static;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	}
	#tips-sidebar { grid-template-columns: 1fr; }
	.form-group-grid { grid-template-columns: 1fr; }
	.guided-card { padding: var(--space-4); }
	.phase-chip {
		flex: 1 1 10rem;
		min-width: 0;
	}
	.guided-card-header,
	.guided-report-toolbar {
		align-items: stretch;
	}
	.guided-report-toolbar .btn {
		flex: 1 1 100%;
	}
	.guided-page-scan-layout { grid-template-columns: 1fr; }
	.guided-nav-buttons {
		align-items: stretch;
	}
	.guided-nav-buttons .btn,
	.guided-step-counter {
		flex: 1 1 100%;
	}
	.checklist-actions {
		justify-content: flex-start;
	}
	.finding-item {
		grid-template-columns: 1fr;
	}
	.finding-item img {
		width: min(100%, 80px);
	}
	.automated-no-error-row {
		grid-template-columns: 1fr;
	}
	.guided-action-step {
		grid-template-columns: 1fr;
	}
	.guided-action-marker {
		border-radius: var(--radius-sm);
		width: fit-content;
		padding: 0 var(--space-3);
	}
	.summary-helper-row {
		grid-template-columns: 1fr;
	}
	.summary-helper-actions {
		justify-content: flex-start;
	}
	.ct-postcode-row .ct-postcode-btn,
	.sp-add .btn {
		flex: 1 1 100%;
	}
}

@media (max-width: 30rem) {
	header {
		display: block;
		padding-block: var(--space-2);
	}
	.header-left {
		display: none;
	}
	.header-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		gap: var(--space-1);
	}
	.mode-switcher {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-column: 1 / -1;
	}
	.mode-tab {
		min-height: 2rem;
		padding: var(--space-1);
		justify-content: center;
		gap: var(--space-1);
		font-size: var(--font-md);
		line-height: var(--leading-tight);
	}
	.mode-tab svg {
		width: 0.875rem;
		height: 0.875rem;
	}
	.mode-tab-label,
	.header-tools-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
	.header-tools,
	.header-theme-toggle,
	.header-workspace-settings,
	.header-tools-summary {
		width: 100%;
	}
	.header-theme-toggle,
	.header-workspace-settings {
		min-height: 2rem;
		padding: var(--space-1);
		font-size: var(--font-md);
		line-height: var(--leading-tight);
		gap: var(--space-1);
	}
	.header-theme-toggle svg,
	.header-workspace-settings svg {
		width: 1rem;
		height: 1rem;
	}
	.header-save-status {
		justify-self: start;
		max-width: min(100%, 10rem);
		font-size: var(--font-md);
		padding: var(--space-1);
		/* The chip sits first in the DOM (it must never be pushed by
		   wrapping). The mode switcher takes the full first row, then the
		   chip shares the second row with the first icon control and the
		   remaining icon controls fill the third, so the header stays
		   three rows tall at 500 percent zoom. */
		order: 1;
	}
	.header-theme-toggle,
	.header-workspace-settings,
	.header-tools {
		order: 2;
	}
	.header-tools-summary {
		min-height: 2rem;
		margin-left: 0;
		padding: var(--space-1);
		justify-content: center;
		gap: var(--space-1);
		font-size: var(--font-md);
		line-height: var(--leading-tight);
	}
	.header-tools-summary svg {
		width: 1rem;
		height: 1rem;
	}
	/* Card padding at the reflow floor costs more than it buys, and the
	   text-spacing overrides need the pixels back. */
	.paste-box {
		padding: var(--space-3);
	}
}

/* ---- WIDE VIEWPORTS ---- */
/* The stylesheet's one upward branch. Below it a shell is one column of work
   beside one column of reference; above it there is more room than a single
   column of cards can use, so card lists tile and the two-pane editors give
   the second pane a real share. Running prose keeps --measure-prose either
   way, so the line length never follows the window. */
@media (min-width: 100rem) {
	/* A phase is a list of check cards, so it tiles. Anything that is not a
	   plain card — a heading, a finding logger, a summary region, a check
	   whose report detail is open and carrying its own two-pane editor —
	   takes the whole row. The cards keep their own bottom margin, so the
	   grid supplies the column gap only. */
	.form-section {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(max(30rem, calc(50% - var(--space-6))), 1fr));
		gap: 0 var(--space-6);
		align-items: start;
	}
	.form-section > * {
		grid-column: 1 / -1;
	}
	.form-section > .checklist-item {
		grid-column: auto;
	}
	.form-section > .checklist-item:has(> .details-box:not(.is-hidden)) {
		grid-column: 1 / -1;
	}
	/* With the row to itself an open check can carry a preview pane wide
	   enough to read rather than a sliver beside the fields. */
	.report-editor-shell {
		grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 26rem), 0.9fr);
	}
	/* The finding list is a card list too. */
	.finding-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(max(30rem, calc(50% - var(--space-4))), 1fr));
		gap: var(--space-4);
		align-items: start;
	}
}

/* A short viewport is what 500 percent zoom produces: sticky chrome must not
   consume it (WCAG 1.4.10 reflow, technique C34). */
@media (max-height: 500px) {
	header {
		position: static;
		top: auto;
	}
	html {
		scroll-padding-top: 0;
	}
}

/* ---- PRINT ---- */
@media print {
	header, #tips-sidebar, .guided-nav-buttons, .mode-switcher,
	.phase-actions, .icon-btn, .header-buttons, .sidebar-actions, .section-controls { display: none !important; }
	.page-wrapper { display: block; }
	.is-collapsed { display: block !important; }
	fieldset { break-inside: avoid; }
	.checklist-item { break-inside: avoid; }
}

/* ---- BROWSER VERSIONS ---- */
.browser-list { display: flex; flex-direction: column; gap: var(--space-2); }
/* Grid, not flex: the label column keeps the version inputs aligned while the
   label's clickable box stays only as wide as the checkbox and browser name –
   a stretched label made empty row space toggle the checkbox. */
.browser-row { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.browser-row .checkbox-label { justify-self: start; }
.browser-version-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: 0; }
.browser-version-input { width: 100%; max-width: 240px; min-width: 0; }
.browser-version-input.is-invalid,
.ct-email.is-invalid, .ct-phone.is-invalid, .ct-other.is-invalid { border: 2px solid var(--fail); }
.ct-hint { margin: var(--space-2) 0 0; font-size: var(--font-md); }
.ct-hint:empty { display: none; }
.ct-hint.is-error { color: var(--fail); font-weight: 600; }
.ct-hint.is-recommend { color: var(--warning-text); }

/* ---- CONTACTS ---- */
.contact-row { padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); margin-bottom: var(--space-2); }
.contact-row .field-label { font-size: var(--font-md); font-weight: 500; }
.contact-row .req { color: var(--fail); font-weight: 600; }
.contact-row .opt { color: var(--text-muted); font-weight: 400; }
.contact-row .ct-remove { margin-top: var(--space-2); }
.ct-methods { margin-top: var(--space-3); }
.ct-method-options {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-top: var(--space-1);
	padding: var(--space-1) 0;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
}
.ct-method-options.is-invalid {
	border: 2px solid var(--fail);
	padding-inline: var(--space-1);
}
.ct-method-fields { margin-top: var(--space-3); }
.ct-address-block {
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-input);
}
.ct-address-block .ct-other {
	min-height: 8rem;
	margin-top: var(--space-1);
	background: var(--bg-card);
}
.ct-postcode-lookup { margin-top: var(--space-2); }
.ct-postcode-row { display: flex; gap: var(--space-2); align-items: stretch; flex-wrap: wrap; margin-top: var(--space-1); }
.ct-postcode-row .ct-postcode { flex: 1 1 12rem; min-width: 0; }
.ct-postcode-row .ct-postcode-btn { flex: 0 0 auto; }
.ct-postcode-status { display: block; margin-top: var(--space-1); font-size: var(--font-md); }
.ct-postcode-status:empty { display: none; }
.ct-postcode-status.is-error { color: var(--fail); font-weight: 600; }
.ct-postcode-status.is-ok { color: var(--pass); font-weight: 600; }

/* ---- DISCREET SCREENSHOT ---- */
.screenshot-reveal-btn { margin-top: var(--space-1); }
.finding-logger-prominent {
	margin: var(--space-4) 0 var(--space-6);
	padding: var(--space-4);
	border: 2px solid var(--accent);
	border-radius: var(--radius-md);
	background: var(--accent-bg);
}
.finding-logger-prominent .add-finding-btn {
	margin-top: var(--space-4) !important;
}
.automated-results-status {
	margin-top: var(--space-6);
	padding-top: var(--space-2);
}

/* ---- VISUAL SCAN (two-section guided) ---- */
.vs-gatebar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-1) 0 var(--space-3); }
.visual-scan-main { min-width: 0; }
.vs-cluster { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--bg-card); }
.vs-cluster-title { margin: 0 0 var(--space-2); font-size: var(--font-md); font-weight: 700; }
.vs-row { padding: var(--space-2) 0; border-top: 1px solid var(--border-light); }
.vs-row:first-of-type { border-top: none; }
.vs-q { margin: 0 0 var(--space-1); font-size: var(--font-md); }
.vs-tip { margin: 0 0 var(--space-2); font-size: var(--font-md); color: var(--text-secondary); line-height: var(--leading-snug); }
.vs-options { gap: var(--space-2); }
.vs-fail-extra { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border); }
.vs-note { width: 100%; margin-bottom: var(--space-2); }
.scan-recommendation {
	margin: var(--space-3) 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--warning-border);
	border-left: 4px solid var(--warning-border);
	border-radius: var(--radius-md);
	background: var(--warning-bg);
	color: var(--warning-text);
}
.scan-recommendation h4 {
	margin: 0 0 var(--space-1);
	font-size: var(--font-md);
	font-weight: 700;
	color: var(--warning-text);
}
.scan-recommendation p,
.scan-recommendation ul { margin: 0; }
.scan-recommendation ul { padding-left: var(--space-5); }
.scan-recommendation li { margin: var(--space-1) 0; }
.guided-automated-actions {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-4) 0;
	padding: var(--space-4);
	border: 2px solid var(--accent);
	border-radius: var(--radius-md);
	background: var(--accent-bg);
}
.guided-action-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
}
.guided-action-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--accent-fill);
	color: var(--text-on-accent);
	font-weight: 700;
}
.guided-automated-findings {
	margin-top: var(--space-4);
}
.guided-automated-current-page {
	margin: 0 0 var(--space-3);
}

/* Areas to follow up — structured items */
.followup-compact-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin: var(--space-2) 0 var(--space-3);
}
.followup-count,
.followup-empty {
	margin: 0;
	font-size: var(--font-md);
	color: var(--text-secondary);
}
.followup-plain-editor {
	margin-top: var(--space-1);
	display: grid;
	gap: var(--space-3);
	justify-items: start;
}
.followup-plain-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-3);
	width: 100%;
}
.followup-plain-row {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	padding: var(--space-3);
	display: grid;
	gap: var(--space-2);
	justify-items: start;
}
.followup-plain-row .fu-text {
	width: 100%;
	line-height: var(--leading);
}
.followup-plain-sources {
	margin: 0;
	font-size: var(--font-md);
	color: var(--text-secondary);
}
.followup-overview-list {
	margin: var(--space-1) 0 0;
	padding-left: var(--space-6);
	display: grid;
	gap: var(--space-1);
}
.followup-overview-row {
	padding: var(--space-1) 0;
	border: 0;
	border-bottom: 1px solid var(--border-light);
	border-radius: 0;
	line-height: var(--leading-snug);
}
.followup-overview-row::marker {
	font-weight: 700;
	color: var(--text-secondary);
}
.followup-overview-text {
	display: block;
	font-weight: 600;
	color: var(--text);
}
.followup-overview-meta {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-md);
	color: var(--text-secondary);
}
.modal.followup-organiser-modal {
	width: min(96vw, 60rem);
	max-width: 60rem;
	max-height: min(90vh, 920px);
}
.followup-organiser-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: end;
	margin: var(--space-3) 0 var(--space-4);
}
.followup-merge-label {
	display: grid;
	gap: var(--space-1);
	font-weight: 400;
}
.followup-action-panel {
	min-width: 0;
}
.followup-action-panel h3 {
	margin: 0 0 var(--space-2);
	font-size: var(--font-md);
}
.followup-action-list {
	display: grid;
	gap: var(--space-2);
	max-height: 58vh;
	overflow: auto;
	padding-right: var(--space-1);
}
.followup-action-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	padding: var(--space-3);
}
.followup-action-select {
	margin: 0 0 var(--space-2);
	font-weight: 400;
}
.followup-action-footer,
.followup-action-card-header,
.followup-action-move,
.tutorial-panel-actions,
.actions-row {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	align-items: center;
}
.followup-action-card-header {
	justify-content: space-between;
	margin-bottom: var(--space-2);
}
.followup-action-card h4 {
	margin: 0;
	font-size: var(--font-md);
}
.followup-action-footer {
	justify-content: space-between;
	margin-top: var(--space-3);
}
.followup-action-card textarea {
	min-height: 6.2rem;
	line-height: var(--leading);
}
.followup-source-chip-list {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
	margin-top: var(--space-3);
}
.followup-source-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-width: 0;
	max-width: 100%;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
	font-size: var(--font-md);
}
.followup-source-detach {
	border: 0;
	background: transparent;
	color: var(--accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: var(--space-1);
}
.followup-source-empty {
	margin: var(--space-1) 0 0;
	color: var(--text-secondary);
	font-size: var(--font-md);
}
.followup-row {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-2);
}
.followup-row .fu-text { width: 100%; }

@media (max-width: 64rem) {
	.followup-action-list {
		max-height: none;
	}
	.followup-action-footer {
		justify-content: flex-start;
	}
}

/* Pre-export validation modal */
.validation-list {
	margin: var(--space-2) 0 0;
	padding-left: var(--space-5);
	max-height: 50vh;
	overflow-y: auto;
}
.validation-list li { margin-bottom: var(--space-1); }

/* Save-status indicator */
.save-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	font-size: var(--font-md);
	font-weight: 600;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	align-self: center;
	/* Wrap rather than clip: an ellipsis hid the state the pill exists to
	   show (the text did not reflow at narrow widths).
	   The visible text is always the short label;
	   the full sentence lives in the accessible name and title, and
	   storage remediation arrives as a dismissible session message. */
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
	line-height: var(--leading-tight);
	max-width: 11rem;
}
.save-status-icon {
	flex: 0 0 auto;
	width: 0.9rem;
	height: 0.9rem;
}
.save-status-short {
	display: inline;
}
.save-status.warn { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning-border); }
.save-status.ok { color: var(--pass); background: var(--pass-bg); border-color: var(--pass); }

@media (max-width: 64rem) {
	.save-status {
		padding: var(--space-1);
		max-width: 11rem;
	}
}

@media (max-width: 30rem) {
	.save-status {
		padding: var(--space-1);
		line-height: var(--leading-tight);
		max-width: 9rem;
	}
}

/* Skip to main content link */
.skip-link {
	position: absolute;
	left: 0.5rem;
	top: -3rem;
	z-index: 2000;
	padding: var(--space-2) var(--space-4);
	/* --accent-fill, not --accent: this is white text on a fill, and the
	   dark accent reads well as link text but sits below AA behind text. */
	background: var(--accent-fill);
	color: var(--text-on-accent);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s ease;
}
.skip-link:focus {
	top: 0;
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--ring-box);
}

.navigation-undo-btn {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 var(--space-3);
}

/* The surface's one focus rule: every focusable element gets the same ring,
   in the same place, from the same tokens. A component only writes its own
   focus rule when the outer ring would be clipped by its container, and
   then it uses the inset form of the same construction (.legend-toggle is
   the only one). The transparent outline keeps an indicator in
   forced-colours mode, where box-shadow is dropped. */
:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--ring-box);
}

/* ---- PAGE-ELEMENT INVENTORY ---- */
.element-hint {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	margin: 0 0 var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: var(--warning-bg);
	border: 1px solid var(--warning-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-md);
	color: var(--warning-text);
}
.element-hint:empty { display: none; }
.element-hint-slot:empty { display: none; }
/* The hint's icon centres on the first line of the note beside it. */
.element-hint-icon {
	display: flex;
	align-items: center;
	height: calc(1em * var(--leading));
	line-height: var(--leading-snug);
}
.element-hint ul { margin: 0; padding-left: 0; list-style: none; }
.element-hint li { line-height: var(--leading); }
.scanner-pointer-fold { flex: 1 1 auto; min-width: 0; }
.scanner-pointer-fold > summary { cursor: pointer; font-weight: 600; }
.scanner-pointer-fold > ul { margin-top: var(--space-2); }
.scanner-pointer-guidance-more {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.vs-elements { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--bg-card); }
.guided-page-logger {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin: var(--space-4) 0;
	background: var(--bg-card);
}
.guided-page-logger .sample-pages-list {
	margin-bottom: var(--space-3);
}
.element-logger { display: flex; flex-direction: column; gap: var(--space-2); }
.el-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--border-light); }
.el-row:first-child { border-top: none; }
.el-label { flex: 0 0 14rem; font-size: var(--font-md); font-weight: 600; }
.el-row .page-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.element-page-add {
	margin: var(--space-3) 0 var(--space-4);
}
.element-inventory-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.element-inventory-list h3 {
	margin: 0;
	font-size: var(--font-lg);
}
.element-page-card {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	padding: var(--space-3);
}
.element-page-card h4 {
	margin: 0 0 var(--space-1);
	font-size: var(--font-md);
}
.element-page-card p {
	margin: 0 0 var(--space-3);
	font-size: var(--font-md);
	overflow-wrap: anywhere;
}

/* An invalid field is never the border alone (L30): a 2px --fail boundary,
   the cross from the icon set, and a message that says what to do. The icon
   is drawn as a mask rather than inline markup because these messages are
   written with textContent from a dozen call sites — a mask keeps the
   message plain text while still painting the icon in currentColor, one
   asset for both themes and for forced colours. */
.field-error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	margin: var(--space-1) 0 0;
	font-size: var(--font-md);
	color: var(--fail);
	font-weight: 600;
}
.field-error::before {
	content: '';
	width: 1em;
	/* One line box tall, with the 1em icon centred in it, so the icon sits
	   on the first line of the message rather than above it. */
	height: 1.5em;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round'%3E%3Cline x1='4' y1='4' x2='12' y2='12'/%3E%3Cline x1='12' y1='4' x2='4' y2='12'/%3E%3C/svg%3E") center / 1em 1em no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round'%3E%3Cline x1='4' y1='4' x2='12' y2='12'/%3E%3Cline x1='12' y1='4' x2='4' y2='12'/%3E%3C/svg%3E") center / 1em 1em no-repeat;
}
/* A message element that is present but empty (the date fields keep theirs
   in place for their live region) shows nothing at all. */
.field-error:empty::before { content: none; }
select.is-invalid,
input.is-invalid,
textarea.is-invalid { border: 2px solid var(--fail); }
.auto-tool-other-wrap {
	margin-top: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	:focus-visible,
	.skip-link:focus {
		outline: 3px solid Highlight;
		outline-offset: 2px;
		box-shadow: none;
	}
	/* Every button variant carries a boundary here, including the ones whose
	   boundary is transparent by design (L16). */
	.btn,
	.icon-btn,
	.delete-finding-btn,
	.mode-tab,
	.header-theme-toggle,
	.header-workspace-settings,
	.header-tools-summary,
	.phase-chip,
	.phase-chip[data-band],
	input,
	select,
	textarea,
	details,
	.guided-card,
	.checklist-item {
		border-color: ButtonText;
	}
	.status-badge.is-untested,
	.status-badge.is-needs-reason,
	.disclosure-count,
	.suggestion,
	.gap-entry {
		border-color: CanvasText;
	}
	/* Drawn checkboxes and radios have no platform rendering to fall back
	   on here, so the mark is painted in the system's own selection pair. */
	input[type='checkbox'],
	input[type='radio'] {
		forced-color-adjust: none;
		background: Canvas;
		border-color: CanvasText;
	}
	input[type='checkbox']:checked,
	input[type='radio']:checked {
		background: Highlight;
		border-color: Highlight;
	}
	input[type='checkbox']::before,
	input[type='radio']::before {
		background: HighlightText;
	}
	.btn:disabled,
	.btn[disabled],
	.btn[aria-disabled='true'] {
		color: GrayText;
		border-color: GrayText;
	}
	.mode-tab[aria-selected='true'],
	.phase-chip.is-active,
	.guided-card .checklist-options label:has(input:checked) {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
		border-color: Highlight;
		box-shadow: none;
	}
	.status-badge.is-pass,
	.status-badge.is-fail,
	.status-badge.is-na {
		forced-color-adjust: none;
		background: Canvas;
		color: CanvasText;
		border-color: CanvasText;
	}
	/* Status by border PATTERN, not by colour (L16): solid passes, double
	   fails, dashed is neither. The status row and the checklist card share
	   the one vocabulary. */
	.checklist-item.is-pass,
	.status-row-item.is-pass {
		border-left: 5px solid CanvasText;
	}
	.checklist-item.is-fail,
	.status-row-item.is-fail {
		border-left: 5px double CanvasText;
	}
	.checklist-item.is-na,
	.status-row-item.is-na,
	.status-row-item.is-warning {
		border-left: 5px dashed CanvasText;
	}
	/* Banners tell themselves apart the same way: advisory solid, warning
	   dashed, failure double. */
	.banner {
		border: 1px solid CanvasText;
	}
	.banner.is-warning,
	.session-message.warning {
		border: 2px dashed CanvasText;
	}
	.banner.is-fail {
		border: 3px double CanvasText;
	}
	.field-error,
	.ct-hint.is-error,
	.ct-postcode-status.is-error,
	.finding-page-add-status.is-error {
		color: CanvasText;
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
	input.is-invalid,
	select.is-invalid,
	textarea.is-invalid,
	.finding-wcag-list.is-invalid,
	.finding-page-options.is-invalid {
		border: 3px solid CanvasText;
	}
	a {
		color: LinkText;
	}
	/* A disclosure row is a control, so it takes the button colour and its
	   chevron is painted in the same ink rather than dropped with the mask. */
	details > summary {
		color: ButtonText;
	}
	details > summary::before {
		forced-color-adjust: none;
		background-color: ButtonText;
	}
}

/* ---- App footer ---- */
/* Always visible under either mode: the statement, privacy and support
   links belong to the page, not to a workspace. */
.app-footer {
	margin: var(--space-7) 0 var(--space-6);
	padding: var(--space-3) var(--space-page) 0;
	border-top: 1px solid var(--border-light);
	text-align: center;
}
.app-footer p {
	margin: 0;
	font-size: var(--font-md);
	color: var(--text-muted);
}

/* ---- AI assistance ---- */
/* A standing property of the field, in the same weight and colour as the
   other field notes. It is not an alert and not a live region. */
.provenance-note {
	display: block;
	font-size: var(--font-md);
	color: var(--text-muted);
	font-weight: 600;
	margin: 0 0 var(--space-1);
	line-height: var(--leading);
}

/* A single column of fields and long provider values, so it takes an editor
   width rather than the confirmation shell. */
.modal.ai-settings-modal {
	display: grid;
	gap: var(--space-3);
	width: min(96vw, 60rem);
	max-width: 60rem;
}
.ai-settings-status {
	margin: 0;
	font-weight: 600;
}
.ai-settings-group {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
	display: grid;
	gap: var(--space-2);
}
.ai-settings-group legend {
	font-weight: 600;
	padding: 0 var(--space-1);
}
.ai-settings-group .field-hint { margin: 0; }
.ai-settings-group input[type='text'],
.ai-settings-group input[type='url'],
.ai-settings-group input[type='password'] { max-width: 100%; }
.ai-feature {
	border-top: 1px solid var(--border);
	padding-top: var(--space-2);
	display: grid;
	gap: var(--space-1);
}
.ai-feature-sends {
	margin: 0 0 var(--space-1);
	padding-left: var(--space-4);
	font-size: var(--font-md);
	color: var(--text-muted);
}
.ai-settings-readout p { margin: 0 0 var(--space-1); }
/* Reference material in the AI settings dialog sits behind a disclosure so
   the service and key block stays the one primary surface. */
.ai-settings-disclosure {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
}
.ai-settings-summary {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
}
.ai-settings-disclosure-body {
	display: grid;
	gap: var(--space-2);
	padding-top: var(--space-2);
}
.ai-settings-disclosure-body .field-hint { margin: 0; }
.ai-settings-inline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-1);
}

/* ---- AI proposals ----
   Every drafting feature renders into the same shell: the flag, a heading,
   the proposed wording, and the actions that write it in. Set apart from the
   field it belongs to by a tonal surface and a left rule, so nothing that is
   still a proposal reads as part of the report. */
.ai-action-slot { margin: 0 0 var(--space-2); }
.ai-proposal,
.ai-advisory {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--bg-input);
	display: grid;
	gap: var(--space-2);
}
.ai-proposal > *,
.ai-advisory > * { margin: 0; }
.ai-proposal-heading { margin: 0; }
.ai-proposal-status {
	margin: 0 0 var(--space-2);
	color: var(--text-muted);
}
.ai-proposal-error { color: var(--fail); }
.ai-proposal-text {
	margin: 0;
	white-space: pre-wrap;
}
.ai-proposal-subhead {
	margin: 0;
	font-weight: 600;
}
/* One list anatomy for every proposal-shaped readout; the cross-check and
   statement-issue rows are taller, so the gap is their only delta. */
.ai-proposal-list,
.ai-proofread-list,
.ai-cross-check-list,
.statement-issue-list {
	margin: 0;
	padding-left: var(--space-4);
	display: grid;
	gap: var(--space-3);
}
.ai-cross-check-list,
.statement-issue-list { gap: var(--space-4); }
.ai-proposal-notes {
	margin: 0;
	padding-left: var(--space-4);
	color: var(--text-muted);
}
.ai-proposal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.ai-proposal-compare {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.ai-advisory-outcome {
	margin: 0;
	font-weight: 600;
}
.ai-proofread-item p { margin: 0 0 var(--space-1); }
/* Advisory surfaces. Each renders beside a control the auditor already
   uses, so it takes the proposal shell's tone without competing with it. */
.ai-proposal-quote {
	margin: 0;
	padding-left: var(--space-3);
	border-left: 3px solid var(--border);
	color: var(--text-muted);
	white-space: pre-wrap;
}
.ai-cross-check-panel { margin: var(--space-4) 0; }
.ai-cross-check-row > p { margin: 0 0 var(--space-2); }
.ai-feedback-slot:empty { display: none; }
.ai-feedback-line { font-weight: 600; }
.statement-issue-panel { margin: var(--space-4) 0; }
.statement-issue-source {
	margin: 0 0 var(--space-2);
	padding-left: var(--space-3);
	border-left: 3px solid var(--border);
	color: var(--text-secondary);
}
.statement-issue-row textarea { width: 100%; }

/* ============================================
   THE INTERACTIVE TUTORIAL
   ============================================ */

/* The step panel is one compact block, docked clear of the form so the
   control each step names stays operable while it is open. It sits below the
   modal layer: a step that opens a dialog hands the screen to that dialog. */
.tutorial-panel {
	position: fixed;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 900;
	width: min(22rem, calc(100vw - var(--space-6)));
	padding: var(--space-4);
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-overlay);
}

.tutorial-panel-progress {
	margin: 0 0 var(--space-1);
	color: var(--text-secondary);
}

.tutorial-panel-heading {
	margin: 0 0 var(--space-2);
	font-size: var(--font-lg);
}

.tutorial-panel-instruction {
	margin: 0 0 var(--space-3);
}

/* The outlined control. Dashed and offset, so the highlight differs in shape
   as well as in colour, and distinct from the focus ring, which stays the
   one thing that says where the keyboard is. */
.is-tutorial-target {
	outline: 3px dashed var(--accent);
	outline-offset: 3px;
}

/* One line, offered once, above the work it interrupts. */
.tutorial-invite {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	margin: 0 0 var(--space-4);
}