/* eSMART design system — tokens and login screens.
   Source of truth: design_handoff_esmart_modernization v3 README (Downloads\eSMART UI
   modernization 3), restyled to the design_handoff_esmart_6a README (Josh, 2026-10-30; handoff
   6a): the 6a palette, Geist type, soft-elevation cards. Values are the handoffs' exact specs —
   do not tune by eye. 6a is drawn for Program Summary; every other page takes its look through
   these shared rules with its layout unchanged (ASSUMPTIONS #40). */

:root {
	/* Color tokens (6a README §Design tokens). The older names stay so every rule that already
	   uses them follows; the 6a names are added beside them. */
	--brand-orange: #F36422;             /* 6a --orange: eyebrow, active-nav dot, Hot Sheets donut, number hover */
	--brand-orange-dark: #DE5715;
	--brand-orange-text: #C04F14;        /* 6a --orange-text: the Open Hot Sheets label */
	--navy: #29527A;
	--navy-deep: #12304C;
	--navy-mid: #2F6F9E;
	--ink: #15222F;                      /* headings, figures */
	--ink-body: #3C4A5A;                 /* button labels, body text (lighter than before, as 6a draws it) */
	--ink-muted: #3C4A5A;
	--text-nav: #5A6878;                 /* inactive nav items */
	--text-secondary: #6A7787;           /* captions, subtitle, percentages */
	--text-tertiary: #6A7787;
	--text-quiet: #8B97A5;               /* mono group labels, "% of …" sub-lines, zero-row labels */
	--text-disabled: #B0B9C0;            /* disabled controls; zero figures use --zero */
	--zero: #C3CDD8;                     /* zero figures and zero percentages */
	--zero-n: #B3BDC8;                   /* the "(0)" under an empty month (7a) */
	--axis: #8B97A5;
	--border: #E3E8EF;                   /* header/nav/toolbar rules, buttons */
	--border-card: #E6EAF0;              /* card and tile borders */
	--border-input: #DDE3EA;             /* select and field borders */
	--border-control: #E3E8EF;
	--border-hover: #C3CDD8;             /* header/toolbar button hover border */
	--rule: #EEF1F6;                     /* row dividers inside cards */
	--page: #EEF1F6;                     /* page background */
	--surface: #FFFFFF;
	--surface-soft: #F3F5F9;             /* header buttons, nav hover, select fill */
	--surface-hover: #F5F7FB;            /* row hover, Hot Sheet Tracking box, table headings */
	--surface-quiet: #FAFBFD;            /* Quick View empty tiles and Program Summary header rows (7a) */
	--surface-sunken: var(--page);
	--surface-rail: var(--surface-soft);
	--surface-zebra: #F8FAFC;
	--tint-navy: #EEF3F8;                /* 6a --active-nav-bg */
	--active-nav-ring: #D5E0EA;
	--hot-bg: #FFF4EE;
	--hot-ring: #FBD9C6;
	--hot-sub: #B07A5C;
	--track: #E4E9F0;
	--track-empty: #F0F3F7;
	--note-bg: #FDF6F0;
	--note-border: #F3E3D6;
	--note-text: #7A5A44;
	--tile-label-on-navy: #B9CDE0;       /* Survey Responses tile caption */

	/* Chart series, in order (6a). Orange stays reserved for hot sheets. */
	--blue-light: #7AA7D1;
	--grey-series: #C3CDD8;
	--peach: #F3A37B;
	--series-1: var(--navy);
	--series-2: var(--blue-light);
	--series-3: var(--grey-series);
	--series-4: var(--peach);

	/* The 6a README's own names for tokens the older names already carry. */
	--orange: var(--brand-orange);
	--orange-text: var(--brand-orange-text);
	--active-nav-bg: var(--tint-navy);

	--success: #2F8A4E;
	--success-text: #2F6B3C;
	--warning: #C9A227;
	--danger: #C0392B;

	--shadow-card: 0 1px 2px rgba(20, 40, 70, .05), 0 6px 20px rgba(20, 40, 70, .05);

	/* The 120ms ease on colour, background and border every interactive element shares (6a §Behavior). */
	--ease-ui: color 120ms ease, background-color 120ms ease, border-color 120ms ease;

	--font-ui: "Geist", "Segoe UI", system-ui, sans-serif;
	--font-mono: "Geist Mono", Consolas, monospace;

	/* DevExpress widgets (Fluent) read their font from this; esmart.css loads after the theme. */
	--dxds-font-family-sans-serif: var(--font-ui);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-ui);
	color: var(--ink-body);
	background: var(--page);
}

/* Form controls don't inherit the page font by default. */
button, input, select, textarea { font-family: inherit; }

/* 6a draws no focus state: a navy ring for keyboard focus only — 8:1 on white and 7:1 on the page
   colour (a focus ring needs 3:1). It sits 2px outside the control, so on the few dark
   surfaces that hold focusable things it turns white. DevExpress controls keep their own. */
:where(a, button, select, summary):focus-visible:not([class*="dxbl"]) {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

.ps-tile.emph :focus-visible,
.login-footer :focus-visible { outline-color: #FFFFFF; }

/* ---------- Authenticated chrome (handoff §Global chrome) ---------- */

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* 6a header: 63px band (14 + 34 + 14 + 1), 32px gutters. */
.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--surface);
	padding: 14px 32px;
	border-bottom: 1px solid var(--border);
}

.app-header img { height: 34px; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: 8px; }

.menu-host { position: relative; }

.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 30;
	background: transparent;
}

/* Help and account: soft-filled 34px buttons; hover darkens the border and label only. */
.header-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px;
	background: var(--surface-soft);
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-body);
	white-space: nowrap;
	cursor: pointer;
	transition: var(--ease-ui);
}

.header-btn:hover,
.header-btn[aria-expanded="true"] { border-color: var(--border-hover); color: var(--ink); }

.header-btn svg { flex: none; }

.account-btn { padding: 0 11px 0 4px; gap: 9px; }

.avatar {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--navy);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 6a draws the menus closed; the dropdown keeps its shape in the 6a tokens. */
.dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 230px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(20, 40, 70, .06), 0 10px 28px rgba(20, 40, 70, .14);
	padding: 6px;
	z-index: 40;
	display: flex;
	flex-direction: column;
}

.dropdown a {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: 7px;
	font-size: 13px;
	color: var(--ink-body);
	text-decoration: none;
	transition: var(--ease-ui);
}

.dropdown a:hover { background: var(--surface-hover); color: var(--ink); }

.account-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 12px 11px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 5px;
}

.account-header strong { font-size: 13px; color: var(--ink); }
.account-header span { font-size: 12px; color: var(--text-tertiary); }

/* 6a nav row: white, 51px (8 + 34 + 8 + 1), 34px pills with 7px corners instead of the old
   underline. It wraps rather than scrolls: with Overview (first, kept from the modern app) and
   the four menu chevrons it is about 1274px wide at the 6a 13px pill padding, past the 1265px a
   1280 window leaves beside a scrollbar. So under 1320px the pills tighten to 11px (1238px) — a
   deliberate deviation from the mock, for Josh (ASSUMPTIONS #40); at 1024 it takes two rows. */
.app-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 2px;
	background: var(--surface);
	padding: 8px 28px;
	border-bottom: 1px solid var(--border);
}

.nav-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 13px;
	background: none;
	border: none;
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-nav);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--ease-ui);
}

/* The menu chevrons stay (the mock draws none): 9px, in the label's colour, 6px after it. */
.nav-item .chev { flex: none; }

.nav-item:hover,
.nav-item[aria-expanded="true"] { background: var(--surface-soft); color: var(--ink); }

.nav-item.active,
.nav-item.active:hover {
	background: var(--active-nav-bg);
	box-shadow: inset 0 0 0 1px var(--active-nav-ring);
	font-weight: 600;
	color: var(--navy);
}

/* The orange dot before the active label: 8px to the label (the 6px gap + 2px). */
.nav-item.active::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-right: 2px;
	border-radius: 50%;
	background: var(--orange);
}

@media (max-width: 1320px) {
	.nav-item { padding: 0 11px; }
}

.nav-menu-host { position: relative; display: flex; }

.nav-dropdown {
	left: 0;
	right: auto;
	top: calc(100% + 6px);
	min-width: 260px;
}

.nav-dropdown .list-caption { margin: 8px 12px 4px; }

.nav-dropdown button {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border: none;
	border-radius: 6px;
	background: none;
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--ink-body);
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: var(--ease-ui);
}

.nav-dropdown button:hover { background: var(--surface-hover); color: var(--ink); }
.nav-dropdown button:disabled { color: var(--text-quiet); cursor: default; }
.nav-dropdown button:disabled:hover { background: none; }

.nav-dropdown hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 6px 4px;
}

.nav-dropdown .menu-help {
	font-size: 12.5px;
	color: var(--navy);
	font-weight: 500;
}

/* 6a toolbar: on the page colour (no band of its own), 53px a row (10 + 32 + 10 + 1), 32px gutters.
   Every group the modern app has stays (Display, Tools, Export, Share); with all four the row is
   about 1520px plus gutters, so at 1280 it wraps to two rows (93px), as it did before (ASSUMPTIONS #40). */
.app-toolbar {
	background: transparent;
	padding: 10px 32px;
	border-bottom: 1px solid var(--border);
}

/* The groups sit 37px apart (18 + the 1px divider + 18). Each divider is drawn by the group after
   it, in that gap, and this box clips 4px past its edge, so a group that starts a row loses its
   divider and none hangs at a row's end. The 4px inset (cancelled by the margin) keeps the
   buttons' focus rings inside the clip. */
.toolbar-groups {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 37px;
	margin: -4px;
	padding: 4px;
	overflow: hidden;
}

.toolbar-group { position: relative; display: flex; align-items: center; gap: 18px; }

.toolbar-group + .toolbar-group::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -19px;
	width: 1px;
	height: 20px;
	margin-top: -10px;
	background: var(--border);
}

.group-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

/* Separate 8px-cornered buttons 6px apart (6a), no longer a joined segmented strip. */
.segmented { display: flex; gap: 6px; }

.tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--ease-ui);
}

/* 15px line icons (6a), whatever size the markup asks for. */
.tool-btn > svg { flex: none; width: 15px; height: 15px; }

.tool-btn:hover {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--border-hover);
}

.app-content {
	flex: 1;
	background: var(--page);
	padding: 32px 32px 36px;
}

/* Centred "Powered by" + the SERVICE 800 logo on the page colour. */
.app-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: transparent;
	border-top: 1px solid var(--border);
	padding: 16px;
	font-size: 11.5px;
	color: var(--text-quiet);
}

.app-footer img { height: 17px; width: auto; display: block; }

/* ---------- Report view (handoff screen 1) ---------- */

/* The page card every report sits in, as a 6a card (14px corners, soft shadow). Program
   Summary drops it to lay its own cards on the page (.ps-page). */
.report-card {
	max-width: 1224px;
	margin: 0 auto;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	padding: 22px 24px;
}

.title-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 22px;
}

/* 6a H1: Geist 600 30px/1.15, -0.8px. */
.report-card h1 {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.8px;
	color: var(--ink);
}

.report-card .eyebrow { margin-bottom: 4px; }

/* A page title's eyebrow is the 6a orange mono label; the shared .eyebrow (modal and aside
   field labels) stays quiet. */
.title-block .eyebrow,
.records-title .eyebrow {
	margin: 0 0 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--orange);
}

.report-subtitle { margin: 0; font-size: 14px; font-weight: 400; color: var(--text-secondary); }

.hint-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #EEF6EF;
	border: 1px solid #CFE3D1;
	border-radius: 7px;
	padding: 8px 13px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--success-text);
	white-space: nowrap;
}

.category-row {
	display: flex;
	gap: 14px;
	padding: 10px 4px 0 44px;
}

.category-label {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink-muted);
}

.category-label .n-value { font-weight: 400; color: var(--text-quiet); }

/* A summary table's card inside the page card: 6a card corners and border, no second shadow,
   and the 6a card title (Geist 600 14px ink) in place of the navy bar. */
.chart-summary {
	border: 1px solid var(--border-card);
	border-radius: 14px;
	margin-top: 30px;
	overflow: hidden;
	background: var(--surface);
}

.summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--surface);
	padding: 16px 18px 14px;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}

.summary-caption { font-size: 12px; font-weight: 400; color: var(--text-secondary); }

.chart-summary table { width: 100%; border-collapse: collapse; }

.chart-summary thead tr {
	background: var(--surface-hover);
	border-bottom: 1px solid var(--border-card);
}

/* Table headings take the 6a group-label voice: Geist Mono 500 11px, uppercase, quiet. */
.chart-summary th {
	padding: 9px 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-quiet);
	text-align: right;
}

.chart-summary td { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.chart-summary tbody tr:last-child td { border-bottom: none; }

/* Text and controls placed straight in a Chart Summary card, outside its header and table, take the
   header's 18px sides: the 6a white card shows the edge the old box hid (Josh, 2026-10-30: Overview
   "Question scores", Quick View notes). */
.chart-summary > :is(p, .hs-controls) { padding-inline: 18px; }
.chart-summary > p:last-child { padding-bottom: 14px; }

.chart-summary .row-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.chart-summary .row-label.muted { font-weight: 400; color: var(--text-quiet); }

.chart-summary .figure {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	text-align: right;
}

.chart-summary .figure.low { color: var(--brand-orange-text); }

.chart-summary .figure.n {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-tertiary);
}

/* ---------- Records grid (handoff screen 7) ---------- */

.records-content { padding: 28px 32px 30px; }

.records-title {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	max-width: 1224px;
	margin: 0 auto 16px;
}

.records-title h1 {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.8px;
	color: var(--ink);
}

.tool-btn-34 { height: 34px; text-decoration: none; }

.grid-card {
	max-width: 1224px;
	margin: 0 auto;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.grid-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--rule);
}

.grid-search { width: 290px; flex: none; }

.grid-search input { height: 34px; font-size: 13px; }

.grid-hint { font-size: 12.5px; color: var(--text-quiet); }

.grid-scroller { overflow-x: auto; }

.grid-scroller table {
	border-collapse: collapse;
	white-space: nowrap;
	min-width: 100%;
}

.grid-scroller thead tr {
	background: var(--surface-hover);
	border-bottom: 1px solid var(--border-card);
}

.grid-scroller th {
	padding: 9px 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-quiet);
	text-align: left;
	cursor: pointer;
	user-select: none;
	transition: var(--ease-ui);
}

.grid-scroller th.sorted { color: var(--navy); }

.grid-scroller th span { margin-left: 4px; font-size: 9px; }

.grid-scroller td {
	padding: 9px 12px;
	font-size: 12.5px;
	color: var(--ink-body);
	border-bottom: 1px solid var(--rule);
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.grid-scroller tbody tr:nth-child(even) { background: var(--surface-zebra); }
.grid-scroller tbody tr:nth-child(odd) { background: var(--surface); }
.grid-scroller tbody tr:hover { background: var(--surface-hover); }

.grid-scroller .cell-mono {
	font-family: var(--font-mono);
	color: var(--ink-muted);
}

/* Frozen first column: header above body, zebra shows through via inherit. */
.sticky-col {
	position: sticky;
	left: 0;
	background: inherit;
	border-right: 1px solid var(--rule);
	z-index: 1;
}

thead .sticky-col { z-index: 2; background: var(--surface-hover); }

.detail-col { min-width: 74px; max-width: none; }

.detail-link {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
}

.detail-link:hover { color: var(--brand-orange); }

/* Left, not centred: the cell spans every column, and on a wide grid (Records can be
   8,000+ px across) a centred message lands far off-screen. */
.grid-empty {
	text-align: left;
	padding: 22px 0;
	font-size: 13px;
	color: var(--text-tertiary);
}

/* Pinned to the scroller's left edge, so the message stays visible even after the grid has
   been scrolled sideways. */
.grid-empty-msg { position: sticky; left: 12px; width: max-content; max-width: calc(100vw - 80px); }
.grid-scroller td.grid-empty { overflow: visible; max-width: none; }

.grid-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
	background: var(--surface-zebra);
}

.pager-info { font-size: 12.5px; color: var(--text-secondary); }

.pager-info strong {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--ink);
}

.pager-controls { display: flex; gap: 6px; }

.pager-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 11px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-body);
	cursor: pointer;
	transition: var(--ease-ui);
}

.pager-btn:hover:not(:disabled) { border-color: var(--border-hover); color: var(--ink); }
.pager-btn:disabled:not(.current) { opacity: .45; cursor: default; }

.pager-btn.page-num {
	min-width: 32px;
	justify-content: center;
	padding: 0 6px;
	font-family: var(--font-mono);
	font-weight: 500;
}

.pager-btn.current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	font-weight: 600;
	cursor: default;
	opacity: 1;
}

.return-link-row {
	text-align: center;
	padding: 26px 0 4px;
	margin: 0;
}

.return-link-row a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
}

.return-link-row a:hover { color: var(--brand-orange); }

/* The same link above a title block (All Records, Program Summary records): left, in line with the title. */
.return-link-row.return-link-top {
	text-align: left;
	max-width: 1224px;
	padding: 0;
	margin: 0 auto 12px;
}

/* ---------- Modals (handoff screens 5/6) ---------- */

.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(21, 34, 47, .35);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 60px 20px 20px;
}

/* 6a does not draw the dialogs: they take its card corners and tokens. */
.modal {
	max-width: 100%;
	background: var(--surface);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(20, 40, 70, .18);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 90px);
	/* The backdrop is fixed, so a panel taller than the window has to scroll inside itself
	   (Data Detail scrolls as a whole; panels with a .modal-body scroll just the body). */
	overflow-y: auto;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid var(--rule);
}

.modal-header h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }

.modal-close {
	width: 28px;
	height: 28px;
	border: none;
	background: none;
	border-radius: 7px;
	font-size: 18px;
	color: var(--text-quiet);
	cursor: pointer;
	transition: var(--ease-ui);
}

.modal-close:hover { background: var(--surface-soft); color: var(--ink); }

.modal-search { padding: 20px 22px 8px; }

.modal-search label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-muted);
	margin-bottom: 6px;
}

.search-box { position: relative; }

.search-box svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-quiet);
}

.search-box input {
	width: 100%;
	height: 42px;
	padding: 0 12px 0 36px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 14px;
	color: var(--ink);
}

.search-box input:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(41, 82, 122, .13);
}

.modal-list {
	max-height: 280px;
	overflow-y: auto;
	padding: 12px 12px 4px;
}

/* Group captions in menus and dialogs: the 6a mono group label. */
.list-caption {
	margin: 8px 12px 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	font-family: var(--font-ui);
	cursor: pointer;
	text-align: left;
	transition: var(--ease-ui);
}

.list-row:hover { background: var(--surface-hover); }

/* Selected reads like the active nav pill. */
.list-row.selected {
	background: var(--active-nav-bg);
	border-color: var(--active-nav-ring);
}

.list-row .row-name { font-size: 13.5px; font-weight: 500; color: var(--ink-body); }
.list-row.selected .row-name { font-weight: 600; color: var(--ink); }
.list-row .row-meta { font-size: 12px; color: var(--text-quiet); white-space: nowrap; }

.list-empty {
	text-align: center;
	padding: 22px 0;
	font-size: 13px;
	color: var(--text-tertiary);
}

.list-empty-text { max-width: 420px; margin: 0 auto 12px; line-height: 1.5; color: var(--ink-body); }

.modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	background: var(--surface-hover);
	border-top: 1px solid var(--rule);
	border-radius: 0 0 14px 14px;
}

.footer-help { font-size: 12.5px; color: var(--navy); text-decoration: none; transition: var(--ease-ui); }
.footer-help:hover { color: var(--brand-orange); }

.footer-actions { display: flex; gap: 10px; }

/* Secondary buttons look like the 6a toolbar buttons: hover darkens the border and label. */
.btn-secondary {
	height: 38px;
	padding: 0 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--font-ui);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-body);
	cursor: pointer;
	transition: var(--ease-ui);
}

.btn-secondary:hover { border-color: var(--border-hover); color: var(--ink); }

.btn-primary-sm {
	height: 38px;
	padding: 0 18px;
	background: var(--brand-orange);
	border: 1px solid var(--brand-orange-dark);
	border-radius: 8px;
	font-family: var(--font-ui);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.btn-primary-sm:hover { background: var(--brand-orange-dark); }

.btn-primary-sm:disabled {
	opacity: .45;
	cursor: not-allowed;
	background: var(--brand-orange);
}

/* A scrolling body can shrink inside the panel's flex column, so on a short window the
   body scrolls and the header and the footer's buttons stay on screen. */
.modal-body { padding: 20px 22px 8px; overflow-y: auto; }

.mode-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.mode-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	font-family: var(--font-ui);
	cursor: pointer;
	text-align: left;
	transition: var(--ease-ui);
}

.mode-card:hover { border-color: var(--border-hover); background: var(--surface-hover); }

.mode-card.selected { background: var(--active-nav-bg); border-color: var(--active-nav-ring); }

.radio-dot {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	border: 1.5px solid var(--text-disabled);
	background: var(--surface);
}

.radio-dot.on { border: 5px solid var(--navy); }

.mode-text { display: flex; flex-direction: column; gap: 3px; }
.mode-text strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mode-text span { font-size: 12px; line-height: 1.4; color: var(--text-tertiary); }

.preset-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.chip {
	height: 32px;
	padding: 0 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-body);
	cursor: pointer;
	transition: var(--ease-ui);
}

.chip:hover { border-color: var(--border-hover); color: var(--ink); }

.date-row {
	display: grid;
	grid-template-columns: 52px 1fr 1fr 1fr;
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}

.date-label {
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--ink-muted);
}

.date-row select {
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 13.5px;
	color: var(--ink);
	background: var(--surface);
}

.confirm-line {
	background: var(--surface-hover);
	border: 1px solid var(--border-card);
	border-radius: 8px;
	padding: 11px 14px;
	margin: 4px 0 14px;
	font-size: 12.5px;
	color: var(--text-secondary);
}

.rdo-values { margin-top: 4px; }
.rdo-values.disabled { opacity: .5; }

.rdo-checks { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }

.rdo-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-body);
	cursor: pointer;
}

.rdo-check input { width: 16px; height: 16px; accent-color: var(--navy); }

.confirm-line.error {
	color: var(--danger);
	background: #FDF3F2;
	border-color: #EFD4D0;
}

/* ---------- Data Detail panel (handoff screen 8) ---------- */

.modal-xl { width: 1110px; }

.dd-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--rule);
}

.dd-header h2 { margin: 2px 0 0; font-size: 19px; font-weight: 700; color: var(--ink); }

.dd-header-actions { display: flex; align-items: center; gap: 8px; }

.tool-btn-36 { height: 36px; border-radius: 7px; }

.dd-divider { width: 1px; height: 24px; background: var(--border); }

.dd-close { width: 30px; height: 30px; font-size: 19px; }

/* Data Detail "Listen to Recording" strip (ASSUMPTIONS #37) */
.dd-recording { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--border-card); border-radius: 10px; background: var(--surface-hover); }
.dd-audio { flex: 1 1 320px; min-width: 0; height: 36px; }
.dd-recording-link { font-size: 12.5px; color: var(--navy); }
.dd-recording-status { flex: 1 1 auto; font-size: 13px; color: var(--ink); }
.dd-recording-note { flex: 1 1 100%; font-size: 12px; color: #7A5A12; }
.dd-recording-close { margin-left: auto; border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 2px 6px; }
.dd-recording-close:hover { color: var(--ink); }

.dd-fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px 28px;
	padding: 20px 24px 4px;
}

.dd-field { display: flex; gap: 8px; padding: 6px 0; align-items: baseline; min-width: 0; }

.dd-field.stacked { flex-direction: column; gap: 3px; }

.dd-label { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }

.dd-field.stacked .dd-label { white-space: normal; }

.dd-value {
	font-size: 12.5px;
	color: var(--ink-body);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dd-value.cell-mono { font-family: var(--font-mono); }

.dd-value.empty { color: var(--zero); }

.nps-chip {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	margin-right: 6px;
}

.nps-promoter { color: var(--success-text); font-weight: 600; }
.nps-promoter .nps-chip { background: var(--success); }
.nps-passive { color: #8A711C; font-weight: 600; }
.nps-passive .nps-chip { background: var(--warning); }
.nps-detractor { color: var(--danger); font-weight: 600; }
.nps-detractor .nps-chip { background: var(--danger); }

.dd-panels {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 16px;
	padding: 18px 24px 24px;
	align-items: start;
}

.dd-panel-stack { display: grid; gap: 16px; }

.dd-panel {
	border: 1px solid var(--border-card);
	border-radius: 14px;
	overflow: hidden;
}

/* 6a card title in place of the navy bar. */
.dd-panel-header {
	background: var(--surface);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--rule);
}

/* The notes card is an INPUT panel, not a data panel — a tinted header. */
.dd-panel-header.input-header {
	background: var(--surface-hover);
	color: var(--ink-body);
	border-bottom: 1px solid var(--rule);
}

.dd-panel-body { padding: 4px 16px; }

.dd-response {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--rule);
}

.dd-panel-body .dd-response:last-child { border-bottom: none; }

.dd-response.free-text { flex-direction: column; gap: 5px; }

.dd-question { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }

.dd-answer { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }

.dd-answer.rating-low { color: var(--brand-orange-text); }
.dd-answer.rating-nps-high { color: var(--success-text); }

.dd-answer-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-body); }

.dd-notes-body { padding: 16px; display: flex; flex-direction: column; }

.dd-notes-body label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-muted);
	margin: 0 0 6px;
}

.dd-notes-body select {
	height: 40px;
	padding: 0 10px;
	margin-bottom: 14px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 13.5px;
	color: var(--ink);
	background: var(--surface);
}

.dd-notes-body select:disabled { background: var(--surface-rail); color: var(--text-quiet); }

.dd-notes-body textarea {
	height: 96px;
	resize: vertical;
	padding: 10px 12px;
	margin-bottom: 14px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink);
}

.dd-notes-body textarea:focus,
.dd-notes-body select:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(41, 82, 122, .13);
}

.dd-save { height: 42px; margin-top: 0; }

.dd-saved {
	margin: 10px 0 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--success-text);
}

/* ---------- Program Summary (handoff screen 3, restyled to handoff 6a) ---------- */

/* Shared with Hot Sheet Stats (.ps-card, .ps-header, .ps-overview, .ps-tile*): the 6a card, card
   title and KPI figure, with that page's layout unchanged (its figures stay cells of one card).
   Program Summary's own 6a layout — tiles as separate cards, donuts, legend rows, the excluded
   bars — is scoped to .ps-page further down (Josh, 2026-10-30; handoff 6a). */

.ps-card {
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	padding: 22px 24px;
	margin-bottom: 16px;
	overflow: hidden;
}

/* Inside another page's card (Hot Sheet Stats), no second shadow — as the summary-table cards. */
.report-card:not(.ps-page) .ps-card { box-shadow: none; }

/* The 6a card title (Geist 600 14px ink) in place of the navy bar. */
.ps-header {
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

/* Hot Sheet Stats: five figures as cells of one card, divided by rules. A column grows to fit
   its figure (which never wraps), as before; Program Summary's tiles are equal (.ps-page below). */
.ps-overview {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.ps-tile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 2px 18px;
	border-left: 1px solid var(--rule);
	color: var(--ink);
}

.ps-tile:first-child { padding-left: 0; border-left: none; }

.ps-tile-caption { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* 6a KPI figure: Geist Mono 500, -1px. Hot Sheet Stats keeps its 24px size (30px would wrap
   "412.5 days" at 1024); Program Summary's tiles take the 6a 30px (.ps-page below). A linked
   figure hovers orange; a zero is plain text. */
.ps-tile-figure {
	font-family: var(--font-mono);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--ease-ui);
}

a.ps-tile-figure:hover { color: var(--orange); }
.ps-tile-figure.zero { color: var(--zero); }

/* Series swatch (also the NPS band chips). */
.ps-chip { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }

/* ----- Program Summary page (.ps-page) ----- */

/* The 6a cards sit straight on the page, on the same 32px gutter as the header and toolbar at any
   width (no 1224px cap). The page card keeps its class — the print rules and js/print-fit.js look
   for .report-card — and drops its own box. */
.report-card.ps-page {
	max-width: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Title row: eyebrow, H1 and subtitle on the left, the Filter by tray on the right, bottoms
   aligned. The tray drops under the title when the row runs out of room. */
.ps-page .title-block {
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-bottom: 26px;
}

.ps-title-text { flex: 1 1 320px; min-width: 0; }

/* Filter by tray (6a): white, 10px corners, 5px inset. "Filter by" captions the first select and
   "Value" (not in the mock, kept) the second; the active filter's chip and × follow them.
   .ps-filter stays on it: print hides the tray (the subtitle carries the filter). */
.ps-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: none;
	max-width: 100%;
	padding: 5px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.ps-filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

.ps-filter-caption {
	padding: 0 6px 0 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
}

/* The native arrow stays (the PNG shows it). */
.ps-filter select {
	height: 32px;
	max-width: 260px;
	padding: 0 10px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	background-color: var(--surface-soft);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: var(--ease-ui);
}

.ps-filter select:hover:not(:disabled),
.ps-filter select:focus { border-color: var(--border-hover); }

.ps-filter select:disabled { color: var(--text-quiet); cursor: default; }

.ps-filter-chip {
	gap: 6px;
	margin-right: 3px;
	padding: 3px 4px 3px 10px;
	background: var(--hot-bg);
	border-color: var(--hot-ring);
}

.ps-filter-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	font-size: 15px;
	line-height: 1;
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--ease-ui);
}

.ps-filter-clear:hover { background: var(--surface); color: var(--orange); }

/* Under the title row, in their order before the restyle: the drill-down banner (16px under the
   row), then the filter's notes (12px under the row, 10px under the banner, 6px apart), then the
   KPIs. Each is pulled up into the title row's 26px. */
.ps-page .drill-banner { margin: -10px 0 16px; }
.ps-page .ps-filter-note { margin: -14px 0 20px; }
.ps-page .drill-banner + .ps-filter-note { margin-top: -6px; }
.ps-page .ps-filter-note + .ps-filter-note { margin-top: -14px; }

/* Record Overview (6a): its heading in the card-title style (the mock draws none; it stays, on
   screen and on paper), then five tile cards 12px apart. */
.ps-kpis { margin-bottom: 16px; }
.ps-kpis > .ps-header { margin-bottom: 12px; }

.ps-page .ps-overview { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.ps-page .ps-tile {
	display: block;
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
}

.ps-page .ps-tile-caption { margin-bottom: 12px; }
.ps-page .ps-tile-figure { font-size: 30px; }

/* Survey Responses: the one emphasised tile — navy, white figure. The colour sits on the tile so
   the printed link (a { color: inherit }) stays white. Its hover is peach: the README's orange
   reads 2.6:1 on navy, #F3A37B 4.0:1. */
.ps-page .ps-tile.emph {
	background: var(--navy);
	border-color: var(--navy);
	box-shadow: none;
	color: #FFFFFF;
}

.ps-page .ps-tile.emph .ps-tile-caption { color: var(--tile-label-on-navy); }
.ps-page .ps-tile.emph .ps-tile-figure { color: inherit; }
.ps-page .ps-tile.emph a.ps-tile-figure:hover { color: var(--peach); }
.ps-page .ps-tile.emph .ps-tile-figure.zero { color: var(--tile-label-on-navy); }

.ps-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

.ps-pair .ps-card { margin-bottom: 0; }

/* Donuts (6a): a conic-gradient ring from 12 o'clock, clockwise, with a white centre holding the
   figure. CSS only, so js/print-fit.js never rewrites them, and print-color-adjust keeps the ring
   on paper. The rows beside each donut are its legend, with counts. */
.ps-donut {
	position: relative;
	flex: none;
	width: 132px;
	height: 132px;
	border-radius: 50%;
}

.ps-donut-hole {
	position: absolute;
	inset: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--surface);
}

.ps-donut-value {
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	color: var(--ink);
}

.ps-donut-caption { margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--text-secondary); }

.ps-donut.lg { width: 140px; height: 140px; }
.ps-donut.lg .ps-donut-hole { inset: 15px; }
.ps-donut.lg .ps-donut-value { font-size: 24px; }

.ps-pie-body { display: flex; align-items: center; gap: 26px; }

/* Legend rows: the label (after its swatch), a "% of …" sub-line, the figure on the right. */
.ps-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ps-lines.ps-hot-lines { gap: 10px; }

/* The row carries the figure's ink, so the printed link (a { color: inherit }) keeps it too. */
.ps-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--ink);
	transition: var(--ease-ui);
}

.ps-line:hover { background: var(--surface-hover); }

.ps-line-name { display: block; min-width: 0; }

.ps-line-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

.ps-line-sub { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--text-quiet); }

/* Under the label text, past the 8px swatch and its 8px gap. */
.ps-line.swatched .ps-line-sub { margin-left: 16px; }

.ps-line-count {
	flex: none;
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--ease-ui);
}

a.ps-line-count:hover { color: var(--orange); }
.ps-line-count.zero { font-weight: 400; color: var(--zero); }

/* A zero row in the donut cards' legends: the label at 400 #8B97A5 (6a type table). Not Open Hot
   Sheets (emphasised at zero too), nor Items of Interest (the PNG draws those labels un-greyed). */
.ps-pie-body .ps-line.zero:not(.hot) .ps-line-label { font-weight: 400; color: var(--text-quiet); }

/* Hot Sheet Tracking (6a): a tinted box holding Open and Closed Hot Sheets. On the tint, a row's
   hover fill is white: the README's #F5F7FB is the tint itself and would not show. A deviation
   the designer should approve (ASSUMPTIONS #40). */
.ps-tracking {
	padding: 6px;
	background: var(--surface-hover);
	border: 1px solid var(--border-card);
	border-radius: 10px;
}

.ps-tracking-caption {
	display: block;
	padding: 8px 10px 4px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.ps-tracking .ps-line { padding: 9px 10px; }
.ps-tracking .ps-line:hover { background: var(--surface); }

/* Open Hot Sheets: the page's one call-to-action number, emphasised even at zero. Its colour sits
   on the row so the printed link (a { color: inherit }) stays orange. */
.ps-line.hot,
.ps-line.hot:hover {
	background: var(--hot-bg);
	box-shadow: inset 0 0 0 1px var(--hot-ring);
	border-radius: 7px;
	color: var(--orange);
}

.ps-line.hot .ps-line-label { font-weight: 600; color: var(--orange-text); }
.ps-line.hot .ps-line-sub { color: var(--hot-sub); }
.ps-line.hot .ps-line-count { font-size: 16px; font-weight: 600; color: inherit; }
.ps-line.hot a.ps-line-count:hover { color: var(--orange-text); }
.ps-line.hot .ps-line-count.zero { color: var(--zero); }

/* Records Excluded During Import (6a): the donut beside one column of every row in source order —
   label / bar and percentage / 56px count. The 6a middle column is 240px (a 186px bar, the 44px
   percentage); it is 304px here so the kept "of excluded" fits beside the same 186px bar. Zero
   rows stay: grey label, empty track. */
.ps-excluded { display: flex; align-items: flex-start; gap: 34px; }

.ps-ex-list { flex: 1; min-width: 0; }

.ps-ex-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 304px 56px;
	align-items: center;
	gap: 18px;
	padding: 9px 10px;
	border-bottom: 1px solid var(--rule);
	transition: var(--ease-ui);
}

.ps-ex-row:last-child { border-bottom: none; }

/* Rounded only while filled, so the divider stays straight at rest. */
.ps-ex-row:hover { background: var(--surface-hover); border-radius: 8px; }

.ps-ex-label { font-size: 13px; font-weight: 500; color: var(--ink); }

.ps-ex-bar { display: flex; align-items: center; gap: 10px; }

.ps-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }

.ps-bar-fill { display: block; height: 4px; border-radius: 2px; }

/* The percentage in the 6a 44px right-aligned mono slot, then "of excluded" in Geist (kept from
   before the restyle; the mock shows the bare figure). The words are the same on every row, so
   every bar keeps one length. */
.ps-pct {
	flex: none;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--text-secondary);
	white-space: nowrap;
}

.ps-pct-value { display: inline-block; width: 44px; text-align: right; font-family: var(--font-mono); }
.ps-pct.none .ps-pct-of { visibility: hidden; }

/* The ink sits on the cell, so the printed link (a { color: inherit }) keeps it. */
.ps-count { text-align: right; color: var(--ink); }

.ps-count a {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	transition: var(--ease-ui);
}

.ps-count a:hover { color: var(--orange); }
.ps-count .zero { font-family: var(--font-mono); font-size: 14px; font-weight: 400; color: var(--zero); }

.ps-ex-row.zero .ps-ex-label { font-weight: 400; color: var(--text-quiet); }
.ps-ex-row.zero .ps-bar { background: var(--track-empty); }
.ps-ex-row.zero .ps-pct { color: var(--zero); }

/* Items of Interest (6a): plain divided rows; labels in body ink, never greyed at zero; no hover
   (the rows run edge to edge of the card's inset). */
.ps-card.ps-ioi { padding: 20px 24px; }
.ps-ioi .ps-header { margin-bottom: 10px; }
.ps-ioi .ps-lines { gap: 0; }

.ps-ioi .ps-line,
.ps-ioi .ps-line:hover {
	padding: 10px 0;
	border-radius: 0;
	border-bottom: 1px solid var(--rule);
	background: none;
}

.ps-ioi .ps-line:last-child { padding-bottom: 0; border-bottom: none; }
.ps-ioi .ps-line-label { color: var(--ink-body); }
.ps-ioi .ps-line-count { font-size: 14px; }
.ps-ioi .ps-empty .ps-line-name { font-size: 13px; font-weight: 400; color: var(--text-quiet); }

/* Footnote (6a): an orange info icon and the advisory, verbatim. */
.ps-advisory {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--note-bg);
	border: 1px solid var(--note-border);
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--note-text);
}

.ps-advisory svg { flex: none; }

/* Narrower than the 1280 frame (6a is desktop-only; these keep it from overflowing). Screen only:
   a printed page is narrower than 860px, and print has its own sizing below. */
@media screen and (max-width: 860px) {
	.ps-page .ps-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ps-pair { grid-template-columns: minmax(0, 1fr); }
	.ps-excluded { flex-direction: column; }
	.ps-ex-list { width: 100%; }
	/* An 86px bar (as before), its percentage and "of excluded". */
	.ps-ex-row { grid-template-columns: minmax(0, 1fr) 204px 56px; gap: 12px; }
}

@media screen and (max-width: 560px) {
	.ps-page .ps-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ps-pie-body { flex-direction: column; align-items: stretch; }
	.ps-pie-body .ps-donut { align-self: center; }
	/* Too narrow for three columns: the bar goes under its label, the count beside both (the
	   reading order stays label, bar, count). */
	.ps-ex-row { grid-template-columns: minmax(0, 1fr) 56px; gap: 6px 12px; }
	.ps-ex-bar { grid-column: 1; grid-row: 2; }
	.ps-count { grid-column: 2; grid-row: 1 / 3; }
}

/* ---------- NPS / Recommend (handoff screen 4) ---------- */

.nps-layout {
	display: grid;
	grid-template-columns: 270px 1fr;
	gap: 24px;
	align-items: start;
	margin-bottom: 30px;
}

.nps-panel {
	background: var(--surface-hover);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	padding: 26px 26px 24px;
}

/* Vertical rhythm: label — 10 — score — 20 — rail — 8 — ticks — 18 — rule — 14 — sentence. */
.nps-panel .eyebrow { margin-bottom: 10px; }

/* Mono figures top out at 600, the heaviest Geist Mono weight loaded (App.razor). */
.nps-score {
	display: block;
	font-family: var(--font-mono);
	font-size: 56px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -2px;
	color: var(--success-text);
	margin: 0 0 20px;
}

.nps-rail {
	position: relative;
	height: 8px;
	border-radius: 5px;
	background: linear-gradient(90deg, #C0392B, #E8B84B, #2F8A4E);
}

.nps-marker {
	position: absolute;
	top: -4px;
	width: 3px;
	height: 16px;
	background: var(--ink);
	transform: translateX(-50%);
}

.nps-ticks {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--axis);
	margin-top: 8px;
}

.nps-panel hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0 14px; }

.nps-sentence { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

.nps-bands { display: flex; flex-direction: column; gap: 18px; }

.nps-band-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 7px;
}

.nps-band-name { font-size: 13px; font-weight: 600; color: var(--ink); }

.nps-band-range { font-weight: 400; color: var(--text-tertiary); }

.nps-band-meta { font-size: 12.5px; color: var(--text-tertiary); }

.nps-band-meta strong { font-family: var(--font-mono); color: var(--ink); }

.nps-track {
	height: 26px;
	border-radius: 5px;
	background: var(--rule);
	overflow: hidden;
}

.nps-fill { height: 100%; border-radius: 5px 0 0 5px; }

.band-promoter { background: var(--success); }
.band-passive { background: var(--warning); }
.band-detractor { background: var(--danger); }

.ps-chip.band-promoter { background: var(--success); }
.ps-chip.band-passive { background: var(--warning); }
.ps-chip.band-detractor { background: var(--danger); }

.nps-summary-table th { text-align: right; }
.nps-summary-table th.left, .nps-summary-table td.left { text-align: left; }

.nps-summary-table .band-name { font-weight: 600; }
.nps-summary-table .band-name .ps-chip { margin-right: 7px; }

.nps-summary-table .zero-cell { color: var(--zero); }

.nps-total-row td { background: var(--surface-hover); font-weight: 600; }

.nps-final { color: var(--success-text); font-weight: 600; }

/* DxChart SVG overrides (proven in spikes/ChartParity): mono numerals, token colors. The chart's
   own text (axis categories, legends) keeps Segoe UI unless told, so it takes Geist here (6a). */
.report-card .dxc-labels-group text { font-family: var(--font-mono) !important; }

.report-card .dxc-val-elements text {
	font-family: var(--font-mono) !important;
	fill: var(--axis) !important;
	font-size: 11px !important;
}

.report-card .dxc-arg-elements text,
.report-card .dxc-legend text { font-family: var(--font-ui) !important; }

.report-card .dxc-val-grid path { stroke: var(--rule) !important; }
.report-card .dxc-arg-line path { stroke: var(--border-card) !important; }

/* ---------- Login shell (handoff screen 2: simplified header · 1fr 1fr body · navy footer) ---------- */

.login-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.login-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--surface);
	padding: 14px 32px;
	border-bottom: 1px solid var(--border);
}

/* The same 34px logo as the signed-in header (6a). */
.login-header img { height: 34px; width: auto; display: block; }

.login-header nav { display: flex; gap: 22px; }

.login-header nav a {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-muted);
	text-decoration: none;
}

.login-header nav a:hover { color: var(--navy); }
.login-header nav a.active { color: var(--navy); font-weight: 600; }

.login-body {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 24px;
	min-height: 720px;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 40px 28px;
}

/* ---------- The card family ---------- */

.login-card {
	justify-self: center;
	width: 100%;
	max-width: 400px;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	padding: 38px 36px 34px;
}

.login-card .icon-tile {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--tint-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--navy);
	margin-bottom: 18px;
}

.login-card h1 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--ink);
}

.login-card .subtitle {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-secondary);
}

.login-card label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-muted);
	margin-bottom: 6px;
}

.login-card input[type="text"],
.login-card input[type="password"] {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 14.5px;
	color: var(--ink);
	background: var(--surface);
	margin-bottom: 16px;
}

.login-card input:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(41, 82, 122, .13);
}

.login-card input[readonly] {
	background: var(--surface-rail);
	border-color: var(--border-control);
	color: var(--text-secondary);
}

.field-with-action {
	display: flex;
	align-items: center;
	gap: 12px;
}

.field-with-action input { flex: 1; }

.field-with-action .change-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 16px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
	white-space: nowrap;
}

.field-with-action .change-link:hover { color: var(--brand-orange); }

.btn-primary {
	width: 100%;
	height: 46px;
	margin-top: 18px;
	background: var(--brand-orange);
	border: 1px solid var(--brand-orange-dark);
	border-radius: 8px;
	color: #fff;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.btn-primary:hover { background: var(--brand-orange-dark); }

.login-links {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
}

.login-links a {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
}

.login-links a:hover { color: var(--brand-orange); }

.login-card hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 22px 0 16px;
}

.support-line {
	margin: 0;
	font-size: 13px;
	color: var(--text-secondary);
}

.support-line a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
}

.support-line a:hover { color: var(--brand-orange); }

.validation {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--danger);
}

/* ---------- Card variants (screens 9/10) ---------- */

.login-card--wide { max-width: 430px; padding: 34px 36px 32px; }
.login-card--reset { max-width: 410px; }

.login-card .input-42 { height: 42px; }

.login-card .btn-primary:disabled {
	background: var(--brand-orange);
	opacity: .45;
	cursor: not-allowed;
}

.login-links .link-muted { color: var(--text-tertiary); }
.login-links .link-muted:hover { color: var(--brand-orange); }

.confirm-check { margin-bottom: 14px; }

/* ---------- Right-column aside stack (rules / warning / steps) ---------- */

.login-aside {
	justify-self: center;
	width: 100%;
	max-width: 400px;
	display: grid;
	gap: 16px;
	align-content: start;
}

/* Field and aside labels everywhere (dialogs, login asides): the 6a mono group label, quiet. A page
   title's eyebrow is orange instead (.title-block .eyebrow). */
.eyebrow {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.rules-card,
.steps-card {
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	padding: 26px 28px;
}

.rules-list,
.steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.rules-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-tertiary);
}

.rules-list li.met { color: var(--ink-body); }

.rule-icon { flex: none; margin-top: 1px; }

.rule-circle {
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--border-input);
	border-radius: 50%;
}

.rule-chars {
	font-family: var(--font-mono);
	color: var(--ink-muted);
}

/* Set-password page (ResetComplete): the rules as a plain list between the fields and the button. */
.reset-rules { margin: 4px 0 18px; }

.reset-rules-title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-body);
}

.reset-rules .rules-list li { color: var(--ink-body); }

.rules-card hr,
.steps-card hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 18px 0 14px;
}

.rules-note,
.steps-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-secondary);
}

.steps-note a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
}

.steps-note a:hover { color: var(--brand-orange); }

.steps-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-body);
}

.step-circle {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tint-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--navy);
}

.note-warning {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--note-bg);
	border: 1px solid var(--note-border);
	border-radius: 12px;
	padding: 16px 18px;
}

.note-warning svg { flex: none; margin-top: 1px; }

.note-warning p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--note-text);
}

/* ---------- Right column: video panel ---------- */

.login-promo { max-width: 560px; width: 100%; justify-self: center; }

.login-promo .eyebrow {
	margin: 0 0 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.login-promo h2 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.4px;
	color: var(--ink);
}

.login-promo .video-frame {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--border-card);
	border-radius: 14px;
	overflow: hidden;
	background: var(--surface);
}

.login-promo iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* A marketing image in place of the video (ASSUMPTIONS #42): its own aspect ratio, the video frame's border and
   corners. A linked image's keyboard focus is the app-wide navy ring (the :focus-visible rule at the top); the link
   is a block with the image's corners so the ring follows the image, not an inline box. */
.login-promo .promo-image {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border-card);
	border-radius: 14px;
}

.login-promo-image a { display: block; border-radius: 14px; }

/* ---------- Support (handoff screen 11) ---------- */

.support-body {
	flex: 1;
	padding: 40px 28px 44px;
}

.support-inner { max-width: 1120px; margin: 0 auto; }

.support-heading {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.6px;
	color: var(--brand-orange);
}

.support-intro {
	margin: 0 0 28px;
	max-width: 660px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-secondary);
	text-wrap: pretty;
}

.support-columns {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 24px;
	align-items: start;
}

.support-form-card,
.support-contact-card {
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
}

.support-form-card { padding: 26px 28px 28px; }
.support-contact-card { padding: 22px 24px; }

.support-form-card .eyebrow { margin-bottom: 18px; }

.support-form-card label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-muted);
	margin-bottom: 6px;
}

.support-form-card input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	margin-bottom: 16px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 14px;
	color: var(--ink);
}

.support-form-card textarea {
	width: 100%;
	height: 130px;
	resize: vertical;
	padding: 10px 12px;
	margin-bottom: 18px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
}

.support-form-card input:focus,
.support-form-card textarea:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(41, 82, 122, .13);
}

.field-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.support-submit {
	width: auto;
	padding: 0 30px;
	margin-top: 0;
}

.support-thanks {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
}

.support-contact-card .eyebrow { margin-bottom: 12px; }

.support-contact-card hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 0 0 18px;
}

.contact-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.contact-row:last-child { margin-bottom: 4px; }

.contact-icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--tint-navy);
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-phone {
	font-family: var(--font-mono);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	align-self: center;
}

.contact-phone:hover { color: var(--brand-orange); }

.contact-address { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.contact-address strong { font-weight: 500; color: var(--ink); }

.contact-email {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
	word-break: break-all;
	align-self: center;
}

.contact-email:hover { color: var(--brand-orange); }

/* ---------- Navy footer ---------- */

.login-footer {
	background: var(--navy-deep);
	padding: 22px 28px 16px;
}

.login-footer .footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1280px;
	margin: 0 auto;
}

.login-footer img { height: 30px; display: block; }

.login-footer .footer-links { display: flex; gap: 26px; }

.login-footer .footer-links a {
	font-size: 13px;
	color: #C9D8E4;
	text-decoration: none;
}

.login-footer .footer-links a:hover { color: var(--brand-orange); }

.login-footer .footer-social { display: flex; gap: 10px; }

.login-footer .footer-social span {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .28);
}

.login-footer .footer-rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	margin: 16px 0 12px;
}

.login-footer .footer-copyright {
	margin: 0;
	text-align: center;
	font-size: 11.5px;
	color: #8FA7BD;
}

/* ---------- Chart drill-down affordance ---------- */

/* Bars are clickable (drill-down to the category's rating distribution) —
   DevExpress renders the series as SVG rects inside .dxc-series groups. */
.report-card .dxc-series rect { cursor: pointer; }

/* ---------- Trend view (toolbar Trend View toggle) ---------- */

.trend-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.trend-chip {
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-body);
	cursor: pointer;
	transition: var(--ease-ui);
}

.trend-chip:hover { border-color: var(--border-hover); color: var(--ink); }

/* The chosen chip reads like the active nav pill (6a). */
.trend-chip.active,
.trend-chip.active:hover {
	background: var(--active-nav-bg);
	border-color: var(--active-nav-ring);
	color: var(--navy);
	font-weight: 600;
}

/* Months run wide — the summary table scrolls inside its card. */
.trend-scroll { overflow-x: auto; }
.trend-summary th, .trend-summary td { white-space: nowrap; }

a.hint-pill { text-decoration: none; }
a.hint-pill:hover { color: var(--brand-orange); }

.pager-ellipsis {
	padding: 0 4px;
	font-size: 12px;
	color: var(--text-quiet);
	align-self: center;
}

/* ---------- Key Performers (legacy mdlKeyPerf + results page) ---------- */

.kp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.kp-list {
	max-height: 180px;
	overflow-y: auto;
	border: 1px solid var(--border-input);
	border-radius: 8px;
	padding: 6px;
	display: grid;
	gap: 2px;
}

.kp-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--ink-body);
	cursor: pointer;
}

.kp-option:hover { background: var(--surface-hover); }

.kp-option input { accent-color: var(--navy); }

.kp-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.kp-footnote { margin: 10px 0 22px; }

.kp-program-row td { background: var(--surface-rail); font-weight: 600; }

.cmp-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmp-count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-quiet);
}

.cmp-more { margin: 8px 0 0; font-size: 12px; }

/* ---------- Drill-down (legacy mdlDrillDown / Current Selections) ---------- */

/* The Current Selections strip: sits under a report's title block, on every screen
   that honors the drill path. Orange accent = "you are looking at a subset". */
.drill-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: -8px 0 20px;
	padding: 9px 14px;
	background: var(--hot-bg);
	border: 1px solid var(--hot-ring);
	border-radius: 10px;
	color: var(--ink-body);
	font-size: 12.5px;
}

.drill-banner svg { color: var(--brand-orange); flex: none; }

/* The 6a mono label voice, in the orange text colour. */
.drill-banner-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--orange-text);
	margin-right: 2px;
}

.drill-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--hot-ring);
	font-size: 12.5px;
	color: var(--ink);
}

.drill-chip-col { color: var(--text-secondary); }

.drill-reset {
	margin-left: auto;
	padding: 5px 11px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	transition: var(--ease-ui);
}

.drill-reset:hover { border-color: var(--border-hover); color: var(--brand-orange); }

/* Drill Down Menu modal */
.dd-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 22px;
	margin-bottom: 14px;
}

.dd-list { max-height: 360px; }

.dd-option {
	width: 100%;
	border: none;
	background: none;
	text-align: left;
	font-family: var(--font-ui);
}

.dd-option:hover .radio-dot { border-color: var(--navy); }

.dd-selection {
	border: 1px solid var(--border-input);
	border-radius: 8px;
	padding: 6px 12px;
	display: grid;
	gap: 2px;
}

.dd-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 13px;
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}

.dd-line:last-child { border-bottom: none; }
.dd-line.muted { color: var(--text-secondary); font-style: italic; }
.dd-key { color: var(--text-secondary); flex: none; }

.dd-gap { margin-top: 18px; }

.dd-actions { display: grid; gap: 8px; }

.dd-action { width: 100%; text-align: center; }

.dd-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-sizing: border-box;
}

.dd-inline { display: flex; gap: 10px; }
.dd-inline .dd-action { width: auto; flex: 1; }

.dd-help { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }

/* Value-picker chart (a grouping chosen in the menu): the bars are values, not categories. */
.dd-picker-note { margin: -10px 0 14px; font-size: 12.5px; color: var(--text-secondary); }

/* ---------- Locate Specific Results ---------- */

.loc-input {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	font-family: var(--font-ui);
	font-size: 13.5px;
	color: var(--ink);
}

.loc-input:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(41, 82, 122, .13);
}

.loc-or { margin: 12px 0 8px; }
.loc-exact { margin-top: 8px; padding-left: 0; }

.em-gap { margin-top: 16px; }

.em-recipients {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.em-message { height: 110px; resize: vertical; padding: 10px 12px; }

.em-result { padding: 12px 0 4px; }

.search-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 8px 5px 12px;
	background: var(--tint-navy);
	border: 1px solid var(--navy);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--navy);
	max-width: 420px;
}

.search-chip a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--navy);
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
	flex: none;
}

.search-chip a:hover { background: var(--brand-orange); }

/* ---------- NPS benchmark (Insert NPS® Benchmark) ---------- */

.nps-marker.bench {
	background: #B8860B;
	width: 3px;
	height: 16px;
	border-radius: 2px;
}

.nps-bench {
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-left: 4px solid #B8860B;
	border-radius: 14px;
	padding: 22px 26px;
	margin: 26px 0 30px;
}

.nps-bench-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 26px;
	flex-wrap: wrap;
}

.nps-bench-score {
	display: block;
	font-family: var(--font-mono);
	font-size: 38px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -1px;
	color: #B8860B;
	margin: 6px 0 10px;
}

.nps-bench-delta { margin: 0; font-size: 13.5px; font-weight: 600; }
.nps-bench-delta.up { color: var(--success-text); }
.nps-bench-delta.down { color: var(--danger); }
.nps-bench-delta.muted-delta { color: var(--text-tertiary); font-weight: 500; }

.nps-bench-spread {
	display: grid;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text-secondary);
	padding-top: 6px;
}

.nps-bench-spread strong {
	font-family: var(--font-mono);
	color: var(--ink);
	margin-right: 4px;
}

.nps-bench-range {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--text-quiet);
}

.nps-bench-participants {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.bench-chip {
	padding: 3px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-rail);
	font-size: 11.5px;
	color: var(--ink-muted);
}

.nps-bench-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--note-bg);
	border: 1px solid var(--note-border);
	border-radius: 12px;
	padding: 14px 18px;
	margin: 22px 0 26px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--note-text);
}

.nps-bench-note svg { flex: none; margin-top: 1px; }

.corr-matrix .key-cell {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--navy);
	width: 34px;
}

.corr-matrix th, .corr-matrix td { white-space: nowrap; }

.corr-group-toggle { margin: 16px 0 12px; padding-left: 0; font-weight: 600; }

/* The Web Dashboard control sizes to its host and shares that height between its items by
   their layout weights, so a short frame clips gauges and pies (720px did on the NPS dashboard);
   legacy gave the viewer about 100px per layout node. */
.dashboard-host {
	height: 1200px;
	border: 1px solid var(--border-card);
	border-radius: 14px;
	overflow: hidden;
}

.corr-segment { margin-bottom: 34px; }

.corr-segment-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--navy);
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--tint-navy);
}

.corr-segment-n {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-quiet);
	margin-left: 10px;
}

.cmp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0 0 14px;
}

.cmp-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-body);
}

.cmp-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex: none;
}

/* ---------- Trend chart summary (Chart Summary Options) ---------- */

.trend-summary-table .th-dates {
	display: block;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-quiet);
	margin-top: 2px;
}

.trend-summary-table .figure.hilite-up {
	background: #E7F3EA;
	color: var(--success-text);
	font-weight: 600;
}

.trend-summary-table .figure.hilite-down {
	background: #FBEAEA;
	color: var(--danger);
	font-weight: 600;
}

/* ---------- Quick View (legacy Executive Summary), handoff 7a (ASSUMPTIONS #41) ---------- */

/* The cards sit straight on the page at the 32px gutter (no 1224px cap), as Program Summary's do
   (.ps-page). The wrapper keeps .report-card — the print rules and js/print-fit.js look for it —
   and drops its own box. Every 7a rule is scoped to .qv-page or a .qv-* class: .chart-summary,
   .summary-header and .summary-caption are shared by every report. */
.report-card.qv-page {
	max-width: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Title row: bottoms aligned, 26px (the mock's 10px + its 16px stack gap) above the first card. */
.qv-page .title-block {
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-bottom: 26px;
}

.qv-page .drill-banner { margin: -10px 0 16px; }
.qv-page > .validation,
.qv-page > .report-subtitle { margin: 0 0 16px; }

/* Modify Quick View / Continue to drill down: white, 36px, navy text and the filter icon (in place
   of the green pill). */
.qv-modify {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	background: var(--surface);
	border: 1px solid var(--border-input);
	border-radius: 8px;
	box-shadow: var(--shadow-card);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	color: var(--navy);
	white-space: nowrap;
	cursor: pointer;
	transition: var(--ease-ui);
}

.qv-modify:hover { border-color: var(--navy); }
.qv-modify > svg { flex: none; }

/* Every card 16px from the next, within a section and between sections, with the card shadow.
   Line height is the font's own (normal: 17px at 13px), as in the mock, which sets every font with
   the shorthand; the app's 20px made each row and tile 3px taller than 7a. */
.qv-section { margin: 0 0 16px; }
.qv-page .chart-summary { margin: 0; box-shadow: var(--shadow-card); line-height: normal; }
.qv-page .qv-section > .chart-summary + .chart-summary { margin-top: 16px; }

/* Card header: the title left, the meta right on its baseline. */
.qv-page .summary-header { align-items: baseline; gap: 20px; padding: 16px 22px; }
.qv-page .summary-caption { color: var(--text-quiet); text-align: right; }

/* Footnote strip along the card's foot (only rendered when there is one). */
.qv-page .chart-summary > .qv-note {
	margin: 0;
	padding: 10px 22px 14px;
	border-top: 1px solid var(--rule);
	font-size: 11.5px;
	font-weight: 400;
	color: var(--text-quiet);
}

/* "Scale of 1 to 5 where 5 is Greatest", centred under the last card. */
.qv-footer {
	margin: 0;
	padding-top: 6px;
	text-align: center;
	font-size: 12.5px;
	color: var(--text-secondary);
}

/* The 9px swatch, everywhere on the page. */
.qv-swatch { flex: none; width: 9px; height: 9px; border-radius: 2px; }

/* A count that opens its records: navy mono, orange on hover. Zero counts, and counts with no
   exact records search, are plain. */
.qv-count {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--navy);
	text-decoration: none;
	transition: var(--ease-ui);
}

a.qv-count:hover { color: var(--orange); }
.qv-count.plain { color: var(--text-quiet); }
.qv-count.zero { color: var(--zero); }

/* Table headings on this page: Geist Mono 500 10.5px, +0.6px, on #F5F7FB, one line. */
.qv-page .chart-summary thead tr { border-bottom: 0; }

.qv-page .chart-summary th {
	padding: 9px 12px;
	background: var(--surface-hover);
	border-bottom: 1px solid var(--rule);
	font-size: 10.5px;
	letter-spacing: 0.6px;
	white-space: nowrap;
}

/* ----- Month by month (7a sections 1 and 6) ----- */

.qv-chart { padding: 18px 22px 10px; }

.qv-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }

.qv-legend-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-body);
}

/* A 44px value axis beside the 200px plot. Labels centre on their tick (top = y − 7px). */
.qv-line { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.qv-yaxis { position: relative; height: 200px; }

.qv-yaxis span {
	position: absolute;
	right: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 14px;
	color: var(--text-quiet);
	white-space: nowrap;
}

/* 200px inside its axis lines (content-box), gridlines at every tick from an inline gradient. */
.qv-plot {
	position: relative;
	box-sizing: content-box;
	height: 200px;
	border-left: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.qv-zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--zero); }

.qv-lines-layer { position: absolute; inset: 0; }

.qv-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* The SVG stretches to the plot; the stroke keeps its 2px. */
.qv-lines path {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.qv-dot {
	position: absolute;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px var(--surface);
}

.qv-dot-label {
	position: absolute;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
	color: var(--ink);
	white-space: nowrap;
	pointer-events: none;
}

/* No rated month: the axes stay, and a card says so over the plot (7a fix 3). */
.qv-empty-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}

.qv-empty {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(20, 40, 70, .07);
}

.qv-empty > svg { flex: none; color: var(--text-quiet); }
.qv-empty-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.qv-empty-sub { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }

/* Month labels, one per month column under the plot: Geist Mono (README: every axis label) at the
   mock's 11.5px #6A7787. */
.qv-xaxis { display: grid; padding-top: 8px; }

.qv-xaxis span {
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-secondary);
	white-space: nowrap;
}

/* The month table (7a fixes 4 and 5): a fixed 220px label column — the width on the first th and
   td — and the months sharing the rest; each month's value over its (n). */
.qv-months { table-layout: fixed; }

.qv-months th:first-child,
.qv-months td:first-child { width: 220px; text-align: left; }

.qv-page .qv-months td { padding: 10px 12px; text-align: right; }
.qv-page .qv-months td:first-child { padding-left: 22px; text-align: left; }

/* Month cells are right-aligned, so only their right padding shows. A 4px left side lets the 55px
   "SEP 2020" header fit the 72px floor column instead of spilling into the next month. */
.qv-page .qv-months :is(th, td):not(:first-child) { padding-left: 4px; }

.qv-row-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

.qv-m-value { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.qv-m-n { margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-quiet); }
.qv-months td:is(.empty, .zero) .qv-m-value { color: var(--zero); }
.qv-months td:is(.empty, .zero) .qv-m-n { color: var(--zero-n); }

/* ----- Trend Summary (7a fix 7): three equal tiles per line ----- */

.qv-trend { padding: 18px 22px 20px; }
.qv-trend-row + .qv-trend-row { margin-top: 18px; }
.qv-trend-label { margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--ink-body); }
.qv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.qv-tile {
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 12px;
}

.qv-tile.empty { background: var(--surface-quiet); }

.qv-tile-caption {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.qv-tile-period { margin: 3px 0 14px; font-size: 12px; color: var(--text-secondary); }
.qv-tile-figures { display: flex; align-items: baseline; gap: 10px; }

.qv-tile-value {
	font-family: var(--font-mono);
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--ink);
	white-space: nowrap;
}

.qv-tile.empty .qv-tile-value { color: var(--zero); }
.qv-tile-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-quiet); white-space: nowrap; }

/* A +/- indicator against the section's baseline colours the Current figure (no cell fill). */
.qv-tile-value.hilite-up { color: var(--success-text); }
.qv-tile-value.hilite-down { color: var(--danger); }

/* ----- NPS breakdown (7a fix 6): all 14 columns inside the card at 1280, no scroller; the first
   column takes what is left and the total row's label may wrap ----- */

.qv-page .qv-nps th { text-align: right; }
.qv-page .qv-nps th:first-child { padding-left: 22px; text-align: left; }

.qv-page .qv-nps td {
	padding: 11px 10px;
	text-align: right;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-body);
}

.qv-page .qv-nps td:first-child { padding: 11px 12px 11px 22px; text-align: left; font-family: var(--font-ui); }

.qv-nps-group {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}

.qv-page .qv-nps td.qv-nps-sum { font-weight: 500; color: var(--ink); }
.qv-page .qv-nps td.zero { color: var(--zero); }
.qv-page .qv-nps tr.qv-nps-total td { background: var(--surface-hover); border-bottom: 0; }
.qv-page .qv-nps tr.qv-nps-total td:first-child { padding: 12px 12px 12px 22px; font-weight: 600; color: var(--ink); }
.qv-page .qv-nps tr.qv-nps-total td.qv-nps-sum { font-weight: 600; }

.qv-page .qv-nps td.qv-nps-score {
	padding: 12px 22px 12px 10px;
	font-weight: 600;
	color: var(--navy);
	white-space: nowrap;
}

/* ----- Chart Summary and distribution tables (7a sections 4–9): grid rows ----- */

.qv-grid-head,
.qv-grid-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px 100px;
	gap: 20px;
	padding: 11px 22px;
}

.qv-dist .qv-grid-head,
.qv-dist .qv-grid-row { grid-template-columns: minmax(0, 1fr) 260px 80px; }

.qv-grid-head {
	padding: 9px 22px;
	background: var(--surface-hover);
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.qv-grid-head > :not(:first-child) { text-align: right; }

.qv-grid-row { align-items: center; border-bottom: 1px solid var(--rule); }
.qv-dist .qv-grid-row { padding: 10px 22px; }
.qv-grid-row:last-child { border-bottom: 0; }

.qv-grid-label {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

.qv-grid-row.muted .qv-grid-label { font-weight: 400; color: var(--text-quiet); }

.qv-grid-figure { text-align: right; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.qv-grid-figure.zero { color: var(--zero); }
/* The cell takes its count's 13px mono, so the line box is the count's 17px, not the row's 14px Geist. */
.qv-grid-n { text-align: right; font-family: var(--font-mono); font-size: 13px; }

/* The 260px cell: a 5px bar in the answer's colour on the track, then its percentage. */
.qv-dist-bar { display: flex; align-items: center; gap: 12px; }
.qv-track { display: block; flex: 1; height: 5px; border-radius: 3px; background: var(--track); }
.qv-fill { display: block; height: 5px; border-radius: 3px; }

.qv-dist-pct {
	flex: none;
	width: 52px;
	text-align: right;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

/* ----- Donuts (7a fix 8): 150px with an 18px ring, the answers in the middle ----- */

.qv-donut-row { display: flex; align-items: center; gap: 36px; padding: 22px 22px 20px; }

.qv-donut {
	position: relative;
	flex: none;
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.qv-donut-hole {
	position: absolute;
	inset: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--surface);
}

.qv-donut-value {
	font-family: var(--font-mono);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--ink);
}

.qv-donut-caption { margin-top: 4px; font-size: 11px; color: var(--text-secondary); }

/* Two columns, filled row by row in slice order; the left-out answers last, muted. */
.qv-donut-legend { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 40px; }
.qv-donut-legend .qv-legend-item { gap: 8px; font-size: 13px; }
.qv-legend-pct { font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; color: var(--text-quiet); }
.qv-donut-legend .qv-legend-item.rest { font-weight: 400; color: var(--text-quiet); }

/* ----- Horizontal bars (7a section 7) ----- */

/* Score labels take a 28px column, category names 220px. The plot runs to the card's padding, as
   drawn; a bar past 90% carries its value inside its end (.inside), so it never runs off the card. */
.qv-bars { --qv-bar-label: 28px; padding: 20px 22px 14px; }
.qv-bars.categories { --qv-bar-label: 220px; }

.qv-bars-plot {
	margin-left: var(--qv-bar-label);
	border-left: 1px solid var(--border);
}

.qv-bars-rows { margin-left: calc(-1 * var(--qv-bar-label)); }

.qv-bar-row {
	display: grid;
	grid-template-columns: var(--qv-bar-label) minmax(0, 1fr);
	align-items: center;
	min-height: 34px;
}

.qv-bar-label { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-body); }

.qv-bars.categories .qv-bar-label {
	padding-right: 12px;
	font-family: var(--font-ui);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.qv-bar-cell { display: flex; align-items: center; align-self: stretch; min-height: 34px; }
.qv-bar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: flex-end;
	height: 20px;
	border-radius: 0 4px 4px 0;
}

.qv-bar-value {
	margin-left: 8px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
}

.qv-bar-value.inside { margin: 0 8px 0 0; } /* colour inline: ink or white on the bar */

.qv-bars-axis {
	display: flex;
	justify-content: space-between;
	margin: 6px 0 0 var(--qv-bar-label);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-quiet);
}

/* ----- Program Summary (7a fix 9): header-level rows, then each group's caption over its
   indented rows ----- */

.qv-ps { padding: 4px 0 8px; }

.qv-ps-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 140px 200px;
	align-items: center;
	gap: 20px;
	padding: 9px 22px 9px 44px;
}

/* Each header-level row keeps both rules, so Usable over Records Completed meet in a double seam, as drawn. */
.qv-ps-row.head {
	padding: 12px 22px;
	background: var(--surface-quiet);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.qv-ps-caption {
	padding: 12px 22px 6px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.qv-ps-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.qv-ps-row.head .qv-ps-label { font-weight: 600; }

.qv-ps-figure {
	text-align: right;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
	transition: var(--ease-ui);
}

.qv-ps-row.head .qv-ps-figure { font-weight: 600; color: var(--ink); }
.qv-ps-row a.qv-ps-figure:hover { color: var(--orange); }
.qv-ps-pct { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-quiet); }

/* A zero row, header-level or member: quiet label, plain grey figure and percentage. */
.qv-ps-row.zero .qv-ps-figure { font-weight: 400; color: var(--zero); }
.qv-ps-row.zero .qv-ps-pct { color: var(--zero); }
.qv-ps-row.zero .qv-ps-label { color: var(--text-quiet); }

/* ---------- Project History / Project Favorites ---------- */

.hist-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.hist-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 16px;
	border: 1px solid var(--border-card);
	border-radius: 10px;
	background: var(--surface);
}

/* Legacy clsDropDownItemSelected: the row you're looking at (the active-nav tint). */
.hist-item.current {
	background: var(--active-nav-bg);
	border-color: var(--active-nav-ring);
}

.hist-main { display: grid; gap: 3px; min-width: 0; }
.hist-title { font-size: 14.5px; color: var(--ink); }
.hist-range { font-size: 13px; color: var(--ink-body); }
.hist-line { font-size: 12.5px; color: var(--text-secondary); }

.hist-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 11.5px;
	color: var(--text-quiet);
}

.hist-tag {
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--hot-bg);
	border: 1px solid var(--hot-ring);
	color: var(--orange-text);
	font-weight: 600;
}

.hist-tag.muted {
	background: var(--surface-rail);
	border-color: var(--border);
	color: var(--text-secondary);
	font-weight: 500;
}

.hist-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	flex: none;
}

.hist-actions .btn-secondary, .hist-actions .btn-primary-sm { white-space: nowrap; }
.hist-remove:hover { border-color: var(--danger); color: var(--danger); }
.hist-clear { white-space: nowrap; }
.hist-empty { padding: 26px 4px; }
.hist-paging { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.hist-sep { margin: 0 10px; color: var(--text-quiet); }

.btn-primary-sm.btn-danger { background: var(--danger); }
.btn-primary-sm.btn-danger:hover { background: #B3261E; }

.confirm-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
.confirm-body p:last-child { margin-bottom: 6px; }

@media (max-width: 720px) {
	.hist-item { flex-direction: column; }
	.hist-actions { justify-content: flex-start; }
}

/* ---------- Help / Definitions / About (legacy help/*.aspx) ---------- */

.help-shell {
	max-width: 1224px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 22px;
	align-items: start;
}

.help-toc {
	position: sticky;
	top: 18px;
	max-height: calc(100vh - 36px);
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	padding: 18px 16px;
}

.help-toc nav { display: grid; gap: 2px; }

.help-toc nav a {
	display: block;
	padding: 6px 8px;
	border-radius: 7px;
	font-size: 13px;
	color: var(--ink-body);
	text-decoration: none;
	transition: var(--ease-ui);
}

.help-toc nav a:hover { background: var(--surface-soft); color: var(--ink); }
.help-toc-gap { margin-top: 18px; }
.help-toc-back {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: -4px -4px 14px;
	padding: 8px 10px;
	border-radius: 6px;
	border-bottom: 1px solid var(--rule);
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
}
.help-toc-back:hover { background: var(--surface-soft); }

.help-card { max-width: none; }

.help-section {
	padding: 22px 0 8px;
	border-top: 1px solid var(--rule);
	margin-top: 18px;
	scroll-margin-top: 18px;
}

.help-section h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: var(--navy);
}

.help-section p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-body);
}

.help-videos, .help-links {
	margin: 6px 0 12px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.help-videos a, .help-links a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
}

.help-videos a::before { content: "▶ "; color: var(--brand-orange); }
.help-videos a:hover, .help-links a:hover { color: var(--brand-orange); }

/* Definitions accordion (legacy Bootstrap panels) as native details/summary. */
.def {
	border: 1px solid var(--border-card);
	border-radius: 10px;
	margin-bottom: 6px;
	background: var(--surface);
	scroll-margin-top: 18px;
}

.def summary {
	cursor: pointer;
	padding: 10px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

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

.def summary::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--text-quiet);
	border-bottom: 2px solid var(--text-quiet);
	transform: rotate(-45deg);
	flex: none;
	transition: transform .15s;
}

.def[open] summary::before { transform: rotate(45deg); }
.def[open] summary { border-bottom: 1px solid var(--rule); }
.def-body { padding: 10px 14px 4px 31px; }
.def-body p, .def-body li { font-size: 13.5px; line-height: 1.55; color: var(--ink-body); }
.def-body ol, .def-body ul { margin: 0 0 12px; padding-left: 22px; }
.def-plain { list-style: none; padding-left: 0 !important; }
.def-plain li { padding-left: 2em; text-indent: -2em; margin-bottom: 6px; }

@media (max-width: 860px) {
	.help-shell { grid-template-columns: 1fr; }
	.help-toc { position: static; }
}

/* ---------- Loading states (LoadingPanel + skeleton lines) ---------- */

.loading-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 64px 24px;
}

.loading-panel.compact {
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 0;
}

.spinner {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid var(--tint-navy);
	border-top-color: var(--brand-orange);
	animation: esmart-spin .7s linear infinite;
}

.loading-panel.compact .spinner {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

@keyframes esmart-spin { to { transform: rotate(360deg); } }

.loading-text {
	display: grid;
	gap: 7px;
	justify-items: start;
}

.loading-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-muted);
}

.loading-panel.compact .loading-label { font-size: 13px; }

.loading-bar {
	width: 220px;
	height: 5px;
	border-radius: 999px;
	background: var(--tint-navy);
	overflow: hidden;
}

.loading-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--brand-orange);
	transition: width .25s ease;
}

.loading-count {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-quiet);
}

/* Shimmer placeholders for text that hasn't resolved yet (program title/subtitle). */
.skeleton-line {
	display: inline-block;
	height: 1em;
	width: 240px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--track) 25%, var(--surface-hover) 45%, var(--track) 65%);
	background-size: 200% 100%;
	animation: esmart-shimmer 1.3s ease-in-out infinite;
}

.skeleton-line.sk-sub { width: 340px; height: .8em; }

@keyframes esmart-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.spinner { animation-duration: 1.6s; }
	.skeleton-line { animation: none; background: var(--track); }
}

/* ---------- Print (the Print / PDF toolbar buttons → window.print) ---------- */

@page {
	margin: 12mm;
}

@media print {
	/* Chart fills, pie gradients, and swatches must survive the printer's
	   background-stripping default. */
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* App chrome disappears — the report is the page. */
	.app-header,
	.app-nav,
	.app-toolbar,
	.app-footer,
	.login-footer,
	.hint-pill,
	.qv-modify,
	.trend-picker,
	.ps-filter, /* the subtitle says "· Country = UK" */
	.ps-filter-listnote,
	.grid-toolbar,
	.grid-pager,
	.grid-hint,
	.records-title .segmented,
	.return-link-row,
	.menu-overlay,
	.modal-backdrop,
	.loading-panel,
	.nps-bench-note,
	.ps-advisory,
	.detail-col {
		display: none !important;
	}

	body,
	.app-shell,
	.app-content {
		background: #FFFFFF !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.report-card,
	.grid-card,
	.ps-card,
	.nps-panel,
	.nps-bench,
	.support-form-card,
	.support-contact-card {
		border: none !important;
		box-shadow: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Summary counts print as plain figures, not links. (Program Summary's navy tile and Open Hot
	   Sheets row set their figure colour on the parent, so it survives this.) */
	a { color: inherit !important; text-decoration: none !important; }

	/* Program Summary (6a): its cards and tiles keep a light border and their inset on paper, with
	   no shadows, sized for the 690px sheet js/print-fit.js measures with. These must stay in this
	   top-level print rule — print-fit copies only top-level print rules into its measurement. */
	.ps-tile { box-shadow: none !important; }

	.ps-page .ps-card,
	.ps-page .ps-tile {
		border: 1px solid var(--border-card) !important;
		box-shadow: none !important;
	}

	.ps-page .ps-card { padding: 14px 16px !important; }
	.ps-page .ps-tile { padding: 12px; }
	.ps-page .ps-tile.emph { border-color: var(--navy) !important; }
	.ps-page .ps-overview { gap: 8px; }
	.ps-page .ps-tile-figure { font-size: 22px; }
	.ps-pair { gap: 10px; }
	.ps-pie-body { gap: 16px; }
	.ps-donut, .ps-donut.lg { width: 104px; height: 104px; }
	.ps-donut-hole, .ps-donut.lg .ps-donut-hole { inset: 11px; }
	.ps-donut-value, .ps-donut.lg .ps-donut-value { font-size: 18px; }
	.ps-excluded { gap: 20px; }
	.ps-ex-row { grid-template-columns: minmax(0, 1fr) 196px 48px; gap: 12px; } /* an 86px bar beside "100.0% of excluded" */
	.ps-pct { font-size: 10px; }

	/* Quick View (7a): its cards keep their light border, with no shadow, sized for the same 690px
	   sheet. The month table lets its headings wrap and sizes to its content, so print-fit finds a
	   table too wide and compacts or zooms it, instead of the fixed layout overlapping its cells. */
	.qv-page .chart-summary { box-shadow: none !important; }
	.qv-page .qv-months { table-layout: auto; min-width: 0 !important; }
	.qv-page .qv-months th { white-space: normal; }
	.qv-page .qv-months th:first-child,
	.qv-page .qv-months td:first-child { width: auto; }
	/* The chart's month labels: about 46–53px a month on the sheet for 12–13 months, where "Sep 2020"
	   at 11.5px is 55px — at 9px it is 42px and clears its neighbours. */
	.qv-xaxis span { font-size: 9px; letter-spacing: -0.2px; }
	.qv-page .qv-tile { padding: 12px 14px; }
	.qv-page .qv-tile-value { font-size: 24px; }
	.qv-donut-row { gap: 20px; }
	.qv-donut { width: 112px; height: 112px; }
	.qv-donut-hole { inset: 14px; }
	.qv-donut-value { font-size: 18px; }
	.qv-dist .qv-grid-head,
	.qv-dist .qv-grid-row { grid-template-columns: minmax(0, 1fr) 200px 64px; gap: 12px; }
	.qv-bars.categories { --qv-bar-label: 160px; }

	/* Tables: repeat headers across pages, keep rows whole, shrink to fit. */
	table { font-size: 10.5px; }
	thead { display: table-header-group; }
	tr { break-inside: avoid; }
	.chart-summary, .nps-bench, .ps-card, .ps-kpis, .nps-layout { break-inside: avoid; }

	/* Scroll containers flatten — paper doesn't scroll. */
	.grid-scroller,
	.trend-scroll {
		overflow: visible !important;
		max-height: none !important;
	}

	.sticky-col {
		position: static !important;
		box-shadow: none !important;
	}

	/* Charts scale to the sheet: js/print-fit.js gives each fixed-size chart SVG a viewBox for
	   the print (without one, narrowing the SVG only crops it) and zooms dashboard frames. */
	svg[data-print-fit], svg.dxc-chart, .dxbl-widget-container svg {
		max-width: 100% !important;
		height: auto !important;
	}

	/* A shrunk chart would otherwise sit in its on-screen height (e.g. 340px), leaving a gap. */
	.dxbl-chart-root,
	.dxbl-chart-with-legend-container,
	.dxbl-widget-container {
		height: auto !important;
	}

	.category-row { padding-left: var(--print-axis-inset, 44px) !important; }

	[data-print-zoom] { zoom: var(--print-zoom, 1); }
	.dashboard-host { break-inside: avoid; }
}

/* Set by js/print-fit.js only while printing, and outside @media print so it can measure the
   compact width before the print layout exists. */
table[data-print-compact] th,
table[data-print-compact] td {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

/* ---- Open Hot Sheets (all programs, mass close) ---- */
.hs-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.hs-selected { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }

.hs-check-col { width: 44px; min-width: 44px; max-width: 44px; text-align: center; padding-left: 12px; padding-right: 12px; }

.hs-check-col input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--navy);
	cursor: pointer;
	vertical-align: middle;
}

.grid-scroller tbody tr.hs-selected-row,
.grid-scroller tbody tr.hs-selected-row:hover { background: var(--tint-navy); }

.hs-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }

.hs-filter select {
	height: 34px;
	max-width: 320px;
	padding: 0 10px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	background-color: var(--surface-soft);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	transition: var(--ease-ui);
}

.hs-filter select:hover:not(:disabled) { border-color: var(--border-hover); }

.hs-summary {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin: 0 0 14px;
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--border-card);
	border-radius: 10px;
	background: var(--surface);
	font-size: 13px;
	color: var(--ink-body);
}

.hs-count strong { font-weight: 600; }
.hs-count.ok strong { color: var(--success-text); }
.hs-count.bad strong { color: var(--danger); }

.hs-dismiss {
	position: absolute;
	top: 6px;
	right: 8px;
	border: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: var(--text-quiet);
	cursor: pointer;
}

.hs-fail-list { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-muted); }

@media print {
	.hs-actions, .hs-check-col, .hs-summary { display: none !important; }
}

/* ---- Hot sheet close options + closure statistics ---- */
.hs-close-options { display: grid; gap: 6px; margin-top: 12px; }
.hs-close-options label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-top: 6px; }
.hs-close-options select,
.hs-close-options textarea {
	width: 100%;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	color: var(--ink-body);
	background: var(--surface);
}
.hs-close-options select:disabled { background: var(--surface-rail); color: var(--text-quiet); }
.hs-close-options textarea { min-height: 70px; resize: vertical; }

.hs-muted { font-size: 12.5px; color: var(--text-tertiary); margin: 10px 0 0; }

.hs-controls { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin: 0 0 18px; }
.hs-controls label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.hs-controls select {
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--border-input);
	border-radius: 7px;
	background-color: var(--surface-soft);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	transition: var(--ease-ui);
}

.hs-controls select:hover:not(:disabled) { border-color: var(--border-hover); }

.hs-stats .ps-tile-figure { cursor: default; }
.hs-stats .ps-tile-figure:hover { color: inherit; }
.hs-stats .ps-tile-figure.warn { color: var(--brand-orange); }
.hs-stats .chart-summary { margin-bottom: 18px; }
.hs-chart { padding: 8px 12px 0; }
.hs-chart-legend { padding: 10px 12px 0; }
.hs-stats .hs-empty-row td { color: var(--zero); }

@media print {
	.hs-controls { display: none !important; }
}

.hs-inset { padding: 10px 12px 0; margin: 0; }

.hs-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-body); }
.hs-check input { accent-color: var(--navy); width: 15px; height: 15px; }
.hs-muted-inline { color: var(--text-tertiary); font-size: 12px; }

/* Hot-sheet toolbars carry two filters plus the hint: let them wrap on narrow panes instead of overflowing the card. */
.grid-toolbar:has(.hs-filter) { flex-wrap: wrap; row-gap: 10px; }
.grid-toolbar:has(.hs-filter) .grid-hint { flex: 1 1 200px; }

/* Overview landing (/overview) */
.ov-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ov-toggle button { border: 0; background: var(--surface); padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: var(--ease-ui); }
.ov-toggle button:hover:not(.on) { background: var(--surface-soft); color: var(--ink); }
.ov-toggle button + button { border-left: 1px solid var(--border); }
.ov-toggle button.on { background: var(--navy); color: #fff; }
.ov-question { margin: 14px 0 6px; }
.ov-page tr.ov-selected td { background: var(--surface-hover); }
.ov-page .title-block .tool-btn { white-space: nowrap; }

/* Overview tabs */
.ov-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 16px; overflow-x: auto; overflow-y: hidden; }
.ov-tabs button { border: 0; border-bottom: 3px solid transparent; background: none; padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; margin-bottom: -1px; transition: var(--ease-ui); }
.ov-tabs button:hover { color: var(--ink); }
.ov-tabs button.on { color: var(--navy); border-bottom-color: var(--navy); }
/* The NPS panel and bands sit inside the card on the Overview: give them the card's inset. */
.chart-summary .ov-nps { padding: 22px 22px 0; margin-bottom: 18px; }
/* Overview chart hover popup */
.ov-tip { padding: 8px 10px; font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.ov-tip-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--text-quiet); }
.ov-tip-value { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.ov-tip-meta { color: var(--text-secondary); white-space: nowrap; }
.ov-trend-note { display: flex; align-items: center; gap: 8px; margin: 6px 12px 14px; }
.ov-trend-key { display: inline-block; width: 26px; border-top: 2px dashed var(--text-secondary); }
/* Sortable table headings on the Overview */
.ov-page th.ov-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ov-page th.ov-sort:hover { color: var(--ink); }
.ov-page th.ov-sort.sorted { color: var(--navy); }
.ov-sort-arrow { font-size: 10px; }

/* Call transcript popup (opened over Data Detail) */
.tr-backdrop { z-index: 1200; }
/* Height comes from .modal (it matches the backdrop's 60px/20px padding; 100vh - 48px ran 12px past the window). */
.tr-modal { width: 760px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; }
.tr-modal .modal-header .eyebrow { margin: 0 0 2px; }
.tr-body { overflow-y: auto; padding-bottom: 16px; }
.tr-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--text-secondary); margin: 0 0 14px; }
.tr-meta b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.tr-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tr-line { display: grid; grid-template-columns: 44px 120px 1fr; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.tr-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); text-align: right; }
.tr-speaker { font-weight: 700; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-line.s800 .tr-speaker { color: var(--navy); }
.tr-line.contact .tr-speaker { color: var(--success); }
.tr-line.contact .tr-text { background: var(--surface-hover); border-radius: 8px; padding: 6px 10px; }
.tr-line.s800 .tr-text { padding: 6px 10px; }
.tr-sample { background: #FFF6E5; border: 1px solid #F0D9A8; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: #7A5A12; margin: 0 0 14px; }
.tr-foot { font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 560px) {
	.tr-line { grid-template-columns: 40px 1fr; }
	.tr-line .tr-text { grid-column: 1 / -1; }
}

/* Transcript popup: Download / Copy for Voice Recordings users (ASSUMPTIONS #38). The export row
   takes the footer's first line; the Dialpad credit and Close stay on the line below. */
.tr-footer { flex-wrap: wrap; gap: 10px 16px; }
.tr-export { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.tr-mask { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-body); cursor: pointer; }
.tr-mask input { width: 15px; height: 15px; accent-color: var(--navy); }
.tr-mask-hint { font-size: 12px; color: #7A5A12; }
.tr-export-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* .btn-secondary is a button style; the downloads are links (download attribute). */
.tr-export-actions a.btn-secondary { display: inline-flex; align-items: center; text-decoration: none; }
.tr-copy-status { font-size: 12px; color: var(--ink-muted); }
.tr-export-note { flex: 1 1 100%; font-size: 12px; color: var(--text-tertiary); }

/* Export transcripts… dialog (All Records) */
.te-modal { width: 580px; max-width: calc(100vw - 32px); }
.te-modal .modal-header .eyebrow { margin: 0 0 2px; }
.te-body { padding-bottom: 14px; }
.te-body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
.te-scope { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px; font-size: 12.5px; color: var(--text-secondary); }
.te-scope b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.te-count strong { font-size: 15px; color: var(--ink); }
.te-body .te-allowance { font-size: 12.5px; color: var(--text-secondary); }
.te-body .te-sample { font-size: 12.5px; color: #7A5A12; }
.te-body .te-refusal { padding: 8px 12px; font-size: 12.5px; color: var(--danger); background: #FDF3F2; border: 1px solid #EFD4D0; border-radius: 8px; }
.te-options { display: grid; gap: 8px; margin: 4px 0 14px; padding: 12px 14px; background: var(--surface-rail); border: 1px solid var(--border); border-radius: 8px; }
.te-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-body); cursor: pointer; }
.te-check input { flex: none; width: 15px; height: 15px; accent-color: var(--navy); }
.te-body .te-hint { margin: -2px 0 2px 23px; font-size: 12px; color: #7A5A12; }
.te-notes { margin: 0 0 6px; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.te-body .te-started { font-weight: 600; color: var(--success-text); }
.te-started a { color: var(--navy); }
.te-started a:hover { color: var(--brand-orange); }
.te-modal a.btn-primary-sm { display: inline-flex; align-items: center; text-decoration: none; }

/* /exports — the user's transcript exports */
.exports-page .title-block { margin-bottom: 18px; }
.exports-empty { padding: 26px 4px; }
.exports-notice { margin: 0 0 14px; padding: 8px 12px; font-size: 12.5px; color: var(--navy); background: var(--tint-navy); border: 1px solid var(--active-nav-ring); border-radius: 8px; }
.exports-scroll { overflow-x: auto; border: 1px solid var(--border-card); border-radius: 10px; }
.exports-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exports-table thead tr { background: var(--surface-hover); border-bottom: 1px solid var(--border-card); }
.exports-table th { padding: 9px 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-quiet); text-align: left; white-space: nowrap; }
.exports-table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-body); }
.exports-table tbody tr:last-child td { border-bottom: none; }
.exports-program { display: block; color: var(--ink); }
.exports-program strong { margin-right: 4px; font-weight: 700; }
.exports-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.exports-badge { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--success-text); background: #EEF6EF; border: 1px solid #CDE5D3; }
.exports-badge.unmasked { color: var(--danger); background: #FDF3F2; border-color: #EFD4D0; }
.exports-badge.sample { color: #7A5A12; background: #FFF6E5; border-color: #F0D9A8; }
.exports-badge.muted { font-weight: 500; color: var(--text-secondary); background: var(--surface-rail); border-color: var(--border); }
.exports-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.exports-filter { max-width: 280px; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.exports-when { white-space: nowrap; }
.exports-status { min-width: 210px; }
.exports-state { display: block; font-weight: 600; color: var(--ink); }
.exports-row.done .exports-state { color: var(--success-text); }
.exports-row.failed .exports-state { color: var(--danger); }
.exports-row.ended .exports-state { color: var(--text-secondary); }
.exports-bar { height: 6px; margin: 7px 0 2px; overflow: hidden; border-radius: 999px; background: var(--tint-navy); }
.exports-bar-fill { height: 100%; border-radius: inherit; background: var(--brand-orange); transition: width 400ms ease; }
.exports-error { display: block; max-width: 320px; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
.exports-actions-col { width: 1%; }
.exports-actions { text-align: right; white-space: nowrap; }
.exports-btn { display: inline-flex; align-items: center; height: 32px; margin: 0 0 6px 6px; padding: 0 12px; font-size: 12.5px; text-decoration: none; vertical-align: top; }
.exports-delete:hover { border-color: var(--danger); color: var(--danger); }
/* The actions column heading, for screen readers only. */
.exports-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
	/* All Records' toolbar gained Export transcripts…: let it wrap under the title. */
	.records-title { flex-wrap: wrap; }
	.records-title .segmented { flex-wrap: wrap; }

	/* Each export becomes a card, its cells labelled from data-label. */
	.exports-scroll { overflow: visible; border: 0; border-radius: 0; }
	.exports-table thead { display: none; }
	.exports-table,
	.exports-table tbody,
	.exports-table tr,
	.exports-table td { display: block; width: 100%; }
	.exports-table tr { margin-bottom: 10px; padding: 6px 0; border: 1px solid var(--border); border-radius: 9px; }
	.exports-table td,
	.exports-table tbody tr:last-child td { padding: 6px 14px; border-bottom: 0; }
	.exports-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-quiet); }
	.exports-filter, .exports-error { max-width: none; }
	.exports-status { min-width: 0; }
	.exports-actions { text-align: left; white-space: normal; padding-bottom: 10px; }
	.exports-btn { margin: 4px 6px 0 0; }
}

@media (max-width: 560px) {
	.tr-export-actions { width: 100%; margin-left: 0; }
	.tr-export-actions .btn-secondary { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
	.te-modal .footer-actions { flex-wrap: wrap; justify-content: flex-end; }
}