/* Every other page on a phone (not in handoff 8): a safe fallback, no sideways page scroll, wide tables scroll inside their card, charts fit the width.
   Phones only: App.razor links this file with media="screen and (max-width: 719.98px) and (hover: none) and
   (pointer: coarse)", so nothing here can reach desktop or print (docs/mobile-phone-layout.md).

   Screens: Ratings by Category (/reports, its trend and group views), Overview, Summary report, NPS, Key performers,
   Comparison, Correlation, Custom dashboards, Open Hot Sheets, Hot Sheet Closure Stats, Favorites, History, Transcript
   exports, Help, Definitions, About and Privacy. No mock draws them, so they take the 8c/8d phone rules: a full-width
   card inside the 16px page gutters (chrome.css), 22px titles, title actions under the title, filter rows stacked
   with 48px / 16px selects, 44px tap targets, wide tables scrolling inside their own card with the row labels
   pinned, and charts at the card's width. Content and order are the desktop's.

   This file loads last, so every rule is scoped to these screens and never reaches Program Summary (.ps-page),
   Quick View (.qv-page), Records (.rg-*), Data Detail or the sign-in screens:
   - the report card pages:  .report-card:not(.ps-page, .qv-page)
   - Open Hot Sheets (its own page and the Overview tab):  .records-title:has(> .hs-actions), .grid-card:has(.hs-check-col)
   - Help, Definitions, About, Privacy:  .help-shell
   Modals are the chrome's (chrome.css). */

/* ---------- The page card ---------- */

.report-card:not(.ps-page, .qv-page) {
	padding: 20px 16px 22px;
	border-radius: 14px;
}

/* Title over its action: the hint pill or button drops under the title instead of squeezing it. */
.report-card:not(.ps-page, .qv-page) > .title-block {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-bottom: 18px;
}

.report-card:not(.ps-page, .qv-page) > .title-block > * { min-width: 0; }

.report-card:not(.ps-page, .qv-page) > .title-block > :is(.hint-pill, .tool-btn, .btn-secondary) { align-self: flex-start; }

/* 8c/8d title voice: 10.5px mono eyebrow, 22px H1, 14px subtitle. */
.report-card:not(.ps-page, .qv-page) .title-block .eyebrow { margin-bottom: 8px; font-size: 10.5px; }

.report-card:not(.ps-page, .qv-page) h1 {
	margin-bottom: 4px;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	overflow-wrap: break-word;
}

.report-card:not(.ps-page, .qv-page) .report-subtitle { line-height: 1.5; overflow-wrap: break-word; }

.report-card:not(.ps-page, .qv-page) .skeleton-line { max-width: 100%; }

.report-card:not(.ps-page, .qv-page) .hint-pill {
	min-height: 40px;
	white-space: normal;
	font-size: 13px;
	line-height: 1.35;
}

/* "Back to standard chart", "Change criteria": links, so 44px. */
.report-card:not(.ps-page, .qv-page) a.hint-pill { min-height: 44px; }

.report-card:not(.ps-page, .qv-page) > .title-block :is(.tool-btn, .btn-secondary) {
	height: 44px;
	padding: 0 16px;
	font-size: 14px;
}

/* Current selections strip: its reset button takes a full row and 44px. */
.report-card:not(.ps-page, .qv-page) .drill-banner { margin: -4px 0 18px; padding: 10px 12px; }

.report-card:not(.ps-page, .qv-page) .drill-reset {
	flex: 1 1 100%;
	min-height: 44px;
	margin-left: 0;
	font-size: 14px;
}

.report-card:not(.ps-page, .qv-page) .loading-panel:not(.compact) { padding: 48px 8px; }

.report-card:not(.ps-page, .qv-page) .return-link-row a,
main.records-content:has(> .records-title > .hs-actions) > .return-link-row a { min-height: 44px; }

/* ---------- Summary tables (the cards inside the page card) ---------- */

/* A table wider than the card scrolls inside it; the card's title and notes stay put while it does. */
.report-card:not(.ps-page, .qv-page) .chart-summary {
	margin-top: 22px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/* A shade at the right edge says there is more to swipe to; it goes once the table is scrolled to its end. */
.report-card:not(.ps-page, .qv-page) :is(.chart-summary, .trend-scroll) {
	background:
		linear-gradient(to left, var(--surface) 30%, rgb(255 255 255 / 0)) right center / 32px 100% no-repeat local,
		radial-gradient(farthest-side at 100% 50%, rgb(20 40 70 / .22), rgb(20 40 70 / 0)) right center / 14px 100% no-repeat scroll,
		var(--surface);
}

.report-card:not(.ps-page, .qv-page) .chart-summary > :is(.summary-header, p, .hs-controls, .cmp-legend) {
	position: sticky;
	left: 0;
}

/* Card title over its caption, as the 8d section cards. */
.report-card:not(.ps-page, .qv-page) .summary-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 14px 16px 12px;
	font-size: 14.5px;
	line-height: 1.3;
}

.report-card:not(.ps-page, .qv-page) .summary-caption { font-size: 12.5px; line-height: 1.4; }

.report-card:not(.ps-page, .qv-page) .chart-summary > :is(p, .hs-controls) { padding-inline: 16px; }

.report-card:not(.ps-page, .qv-page) .chart-summary :is(th, td) { padding: 10px; }

/* In a table that has to scroll, figures keep to one line and row labels keep a readable width. */
.report-card:not(.ps-page, .qv-page) .chart-summary td.figure { white-space: nowrap; }
.report-card:not(.ps-page, .qv-page) .chart-summary td.row-label:not(.key-cell) { min-width: 7.5em; }

/* Row labels that open options (Summary report) are 44px targets. */
.report-card:not(.ps-page, .qv-page) .chart-summary .detail-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-align: left;
	font-size: 13.5px;
}

.report-card:not(.ps-page, .qv-page) .chart-summary td:has(> .detail-link) { padding-block: 0; }
.report-card:not(.ps-page, .qv-page) .chart-summary :is(th, td):first-child { padding-left: 16px; }
.report-card:not(.ps-page, .qv-page) .chart-summary :is(th, td):last-child { padding-right: 16px; }

/* A label column's heading sits over its labels. */
.report-card:not(.ps-page, .qv-page) .chart-summary th:is(.left-th, .left) { text-align: left; }

/* The row labels stay pinned while a wide table scrolls (white behind them; a row that tints its cells keeps
   its tint, because this rule carries no weight). */
:where(.report-card:not(.ps-page, .qv-page) .chart-summary :is(th, td):first-child:not(:only-child)) {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--surface);
	box-shadow: inset -1px 0 0 var(--rule);
}

:where(.report-card:not(.ps-page, .qv-page) .chart-summary thead :is(th, td):first-child:not(:only-child)) { background: var(--surface-hover); }

/* Sortable headings (Overview) are tap targets. */
.report-card:not(.ps-page, .qv-page) .chart-summary th.ov-sort { height: 44px; }

/* ---------- Ratings by Category (/reports) ---------- */

/* The category names under the bars: a bar's column is too narrow for its name across, so the name and its n
   turn on their side (read bottom to top, ending at the axis), as phone charts label narrow bars. */
.report-card:not(.ps-page, .qv-page) > .category-row {
	gap: 4px;
	padding: 6px 0 0 40px;
}

.report-card:not(.ps-page, .qv-page) > .category-row .category-label {
	min-width: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	justify-content: center;
	align-items: flex-end;
	gap: 1px;
	font-size: 11.5px;
	line-height: 1.25;
	white-space: nowrap;
}

/* Trend view's category chips, Custom dashboards' dashboard list, History's Show More: 44px chips that wrap. */
.report-card:not(.ps-page, .qv-page) .trend-picker { gap: 8px; }

.report-card:not(.ps-page, .qv-page) .trend-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	font-size: 14px;
	text-decoration: none;
}

.report-card:not(.ps-page, .qv-page) .dd-picker-note { margin: -6px 0 14px; font-size: 13px; line-height: 1.45; }

/* ---------- NPS (report and the Overview tab) ---------- */

/* Score panel over the three bands, both full width. */
.report-card:not(.ps-page, .qv-page) .nps-layout {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-bottom: 22px;
}

.report-card:not(.ps-page, .qv-page) .nps-panel { padding: 20px 18px 18px; }
.report-card:not(.ps-page, .qv-page) .nps-score { font-size: 48px; }
.report-card:not(.ps-page, .qv-page) .nps-band-label { gap: 12px; }
.report-card:not(.ps-page, .qv-page) .nps-band-name { font-size: 14px; }
.report-card:not(.ps-page, .qv-page) .nps-band-meta { flex: none; font-size: 13px; }

.report-card:not(.ps-page, .qv-page) .chart-summary .ov-nps { padding: 16px 16px 0; }

.report-card:not(.ps-page, .qv-page) .nps-summary-table td.left { white-space: nowrap; }

.report-card:not(.ps-page, .qv-page) .nps-bench { margin: 4px 0 22px; padding: 18px 16px; }
.report-card:not(.ps-page, .qv-page) .nps-bench-note { margin: 4px 0 22px; padding: 12px 14px; }

/* ---------- Filters (Overview, Hot Sheet Closure Stats) ---------- */

/* One filter per row, its label above a full-width 48px select. */
.report-card:not(.ps-page, .qv-page) .hs-controls {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.report-card:not(.ps-page, .qv-page) .hs-controls label {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-body);
}

.report-card:not(.ps-page, .qv-page) .hs-controls select {
	width: 100%;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 16px;
}

.report-card:not(.ps-page, .qv-page) .ov-toggle { align-self: flex-start; }

.report-card:not(.ps-page, .qv-page) .ov-toggle button {
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
}

/* ---------- Overview ---------- */

.report-card:not(.ps-page, .qv-page) .ov-tabs { margin: 0 -16px 16px; padding: 0 12px; }

.report-card:not(.ps-page, .qv-page) .ov-tabs button {
	flex: none;
	min-height: 46px;
	padding: 0 12px;
	font-size: 14px;
}

.report-card:not(.ps-page, .qv-page) .hs-muted { line-height: 1.5; }

/* ---------- Comparison, Correlation, Key performers ---------- */

.report-card:not(.ps-page, .qv-page) .cmp-legend { gap: 8px 18px; }
.report-card:not(.ps-page, .qv-page) .cmp-legend-item { font-size: 13px; }

.report-card:not(.ps-page, .qv-page) .corr-segment-title { font-size: 16px; line-height: 1.3; }

.report-card:not(.ps-page, .qv-page) .corr-segment-n { display: inline-block; margin-left: 6px; }

.report-card:not(.ps-page, .qv-page) .kp-footnote { margin: 8px 0 18px; line-height: 1.45; }

/* ---------- Hot Sheet Closure Stats ---------- */

.report-card:not(.ps-page, .qv-page) .ps-card { margin-bottom: 14px; padding: 16px; }

.report-card:not(.ps-page, .qv-page) .ps-header { margin-bottom: 10px; font-size: 14.5px; }

/* Five figures: one row each, caption left and figure right, as 8c's tracking rows. */
.report-card:not(.ps-page, .qv-page) .ps-overview { grid-template-columns: minmax(0, 1fr); }

.report-card:not(.ps-page, .qv-page) .ps-tile {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-left: 0;
	border-top: 1px solid var(--rule);
}

.report-card:not(.ps-page, .qv-page) .ps-tile:first-child { padding-top: 4px; border-top: 0; }

.report-card:not(.ps-page, .qv-page) .ps-tile-caption { min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink-body); }

.report-card:not(.ps-page, .qv-page) .ps-tile-figure { flex: none; font-size: 20px; }

.report-card:not(.ps-page, .qv-page) .hs-chart { padding: 8px 4px 0; }
.report-card:not(.ps-page, .qv-page) .hs-chart-legend { padding: 10px 16px 0; }
.report-card:not(.ps-page, .qv-page) .hs-inset { padding: 10px 16px 0; }

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

.report-card:not(.ps-page, .qv-page) .hist-item { gap: 12px; padding: 14px; }

/* Display across the row, the other actions sharing the row below it. */
.report-card:not(.ps-page, .qv-page) .hist-actions { gap: 8px; }

.report-card:not(.ps-page, .qv-page) .hist-actions :is(.btn-primary-sm, .btn-secondary) {
	flex: 1 1 0;
	height: 44px;
	padding: 0 12px;
	font-size: 14px;
}

.report-card:not(.ps-page, .qv-page) .hist-actions > .btn-primary-sm { flex-basis: 100%; }

.report-card:not(.ps-page, .qv-page) .hist-paging { flex-wrap: wrap; }

/* ---------- Call transcript exports ---------- */

.report-card:not(.ps-page, .qv-page) .exports-btn {
	height: 44px;
	padding: 0 16px;
	font-size: 14px;
}

/* ---------- Custom dashboards ---------- */

.report-card:not(.ps-page, .qv-page) .dashboard-host { border-radius: 12px; }

/* The dashboard's own text fields (DevExtreme: a Combo Box or List Box filter's search, date and parameter
   editors, in the dashboard or in a popup it opens on the page) take 16px text, so iOS doesn't zoom in when
   one is focused. chrome.css's field rule leaves .dx-widget alone; the theme's ".dx-texteditor-input
   { font-size: 1em }" of a 14px widget is one class, this is two and a type. */
:is(.dashboard-host, .dx-overlay-wrapper) input.dx-texteditor-input { font-size: 16px; }

/* ---------- Open Hot Sheets (/hot-sheets and the Overview tab) ---------- */

.records-title:has(> .hs-actions) {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-bottom: 14px;
}

.records-title:has(> .hs-actions) h1 {
	margin-bottom: 4px;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

.records-title:has(> .hs-actions) .report-subtitle { line-height: 1.5; }

/* Closure stats and the count, then Reassign and Close, wrapping as they need. */
.records-title > .hs-actions {
	flex-wrap: wrap;
	gap: 8px 12px;
}

.records-title > .hs-actions > :is(.tool-btn, .btn-primary-sm) {
	height: 44px;
	padding: 0 16px;
	font-size: 14px;
}

.records-title > .hs-actions > .btn-primary-sm { flex: 1 1 auto; }

.records-title > .hs-actions > .hs-selected { font-size: 13.5px; }

.hs-summary { padding-right: 48px; }

.hs-summary > .hs-dismiss {
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
}

/* The toolbar stacks: search, then each filter on its own row with a 48px select. */
.grid-card:has(.hs-check-col) > .grid-toolbar {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
	padding: 12px 14px;
}

.grid-card:has(.hs-check-col) .grid-search { width: auto; }

.grid-card:has(.hs-check-col) .grid-search input {
	height: 48px;
	padding-left: 38px;
	border-radius: 10px;
	font-size: 16px;
}

.grid-card:has(.hs-check-col) .hs-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.grid-card:has(.hs-check-col) .hs-filter > span { flex: none; width: 60px; }

.grid-card:has(.hs-check-col) .hs-filter select {
	flex: 1;
	min-width: 0;
	max-width: none;
	height: 48px;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 16px;
}

.grid-card:has(.hs-check-col) .grid-hint { flex: none; line-height: 1.45; }

/* The table keeps its columns and scrolls inside the card; rows grow to 48px for the tick boxes and Details. */
.grid-card:has(.hs-check-col) .grid-scroller td { height: 48px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }

.grid-card:has(.hs-check-col) .hs-check-col { padding: 0; }

/* A 44px tick target with the 22px box drawn in its middle. */
.grid-card:has(.hs-check-col) .hs-check-col input {
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='1' y='1' width='20' height='20' rx='5' fill='%23fff' stroke='%23C3CDD8' stroke-width='1.6'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.grid-card:has(.hs-check-col) .hs-check-col input:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='0.5' y='0.5' width='21' height='21' rx='5.5' fill='%2329527A'/%3E%3Cpath d='M6 11.2l3.4 3.3L16.2 7.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.grid-card:has(.hs-check-col) .hs-check-col input:disabled { opacity: .45; }

.grid-card:has(.hs-check-col) .detail-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 13.5px;
}

/* Pager: the count over full-height buttons. */
.grid-card:has(.hs-check-col) > .grid-pager {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 12px 14px;
}

.grid-card:has(.hs-check-col) .pager-info { font-size: 13px; }

.grid-card:has(.hs-check-col) .pager-controls { flex-wrap: wrap; justify-content: space-between; gap: 6px; }

.grid-card:has(.hs-check-col) .pager-btn { height: 44px; padding: 0 14px; font-size: 14px; }

.grid-card:has(.hs-check-col) .pager-btn.page-num { min-width: 44px; }

/* ---------- Help, Definitions, About, Privacy ---------- */

.help-shell {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.help-shell > .help-toc {
	position: static;
	max-height: none;
	padding: 14px 16px 16px;
}

/* Each list of section links becomes one swipeable row of 44px chips (the 8c/8d chip row), so the page
   itself starts right below. The row fades out at its right edge to say it carries on; its end padding
   brings the last chip clear of the fade. */
.help-shell > .help-toc nav {
	display: flex;
	gap: 8px;
	margin: 8px -16px 0;
	padding: 0 28px 2px 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.help-shell > .help-toc nav::-webkit-scrollbar { display: none; }

.help-shell > .help-toc nav a {
	flex: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 22px;
	font-size: 14px;
	font-weight: 500;
}

.help-shell > .help-toc .help-toc-back {
	min-height: 44px;
	margin: -4px 0 12px;
	padding: 0 0 4px;
	border-radius: 0;
	font-size: 14px;
}

.help-shell .help-toc-gap { margin-top: 16px; }

.help-shell .help-section { margin-top: 14px; padding-top: 18px; }

.help-shell .help-section h2 { font-size: 17px; }

.help-shell .help-section p { font-size: 15px; }

/* Video and contact links stack as 44px rows. */
.help-shell :is(.help-videos, .help-links) { gap: 0; }

.help-shell :is(.help-videos, .help-links) a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 14.5px;
}

.help-shell .help-videos a::before { margin-right: 6px; }

/* Definitions: 48px rows that open in place. */
.help-shell .def summary {
	min-height: 48px;
	padding: 10px 14px;
	font-size: 15px;
}

.help-shell .def-body { padding: 10px 14px 4px 16px; }

.help-shell .def-body :is(p, li) { font-size: 14.5px; }