/* Dashboard Quick View on a phone (handoff 8d): stacked sections and the swipeable month strip.
   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).

   Every section stays in the desktop order. What 8d changes: card headers stack (title over meta); the
   month-by-month table becomes a strip of month tiles (QuickViewPage RenderMonthStrip, m-only) and an
   empty chart becomes a dashed box without axes; Trend Summary's tiles become rows; the NPS table
   becomes score, total, a split bar, group rows and score columns (RenderNpsPhone, m-only); table rows
   carry their bar under or beside them, so the separate bar chart and the donut's legend give way to
   the rows; Program Summary's figures sit at the row's end with the percentage under the label.
   Every rule is scoped to .qv-page or a .qv-* class (other mobile files load after this one). */

/* ----- Page: cards 12px from the screen edge, text 16px, as drawn ----- */

.app-content:has(> .qv-page) { padding-left: 12px; padding-right: 12px; }

.qv-page .title-block { display: block; margin: 0 0 14px; padding: 0 4px; }
.qv-page .title-block .eyebrow { margin: 0 0 8px; font-size: 10.5px; }
.qv-page .title-block h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.2; letter-spacing: -0.5px; }
.qv-page .title-block .report-subtitle { font-size: 13.5px; line-height: 1.45; }

/* Modify Quick View: the full-width 44px tinted button with the pencil. */
.qv-page .qv-modify {
	width: 100%;
	height: 44px;
	margin-top: 14px;
	justify-content: center;
	padding: 0 16px;
	background: var(--tint-navy);
	border-color: var(--active-nav-ring);
	border-radius: 10px;
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
}

.qv-page .qv-modify > svg:not(.m-only) { display: none; }

.qv-page .drill-banner { margin: 0 0 12px; }
.report-card.qv-page > .validation,
.report-card.qv-page > .report-subtitle { margin: 0 0 12px; padding: 0 4px; }

.qv-page .qv-footer { padding: 2px 4px 0; font-size: 12px; color: var(--text-quiet); }

/* A count that opens its records takes the height of its row and 44px across as its tap area. */
.qv-page :is(a.qv-count, a.qv-ps-figure) { position: relative; }
.qv-page :is(a.qv-count, a.qv-ps-figure)::after { content: ""; position: absolute; inset: -10px -12px; min-width: 44px; }

/* ----- Cards: 12px apart; the header stacks its title over its meta ----- */

.qv-page .qv-section { margin: 0 0 12px; }
.qv-page .qv-section > .chart-summary + .chart-summary { margin-top: 12px; }

.qv-page .summary-header { display: block; padding: 14px 16px 12px; font-size: 14.5px; line-height: 1.3; }
.qv-page .summary-header .summary-caption { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; text-align: left; }

/* A footnote closes the card body, 8px under its last row, without the desktop strip's rule. */
.qv-page .chart-summary > .qv-note { margin: -8px 0 0; padding: 0 16px 16px; border-top: 0; font-size: 11.5px; }

/* ----- Month by month ----- */

.qv-page .qv-chart { padding: 14px 16px 16px; }
.qv-page .qv-legend { gap: 6px 14px; margin-bottom: 12px; }
.qv-page .qv-legend .qv-legend-item { gap: 5px; font-size: 12px; }
.qv-page .qv-legend .qv-swatch { width: 8px; height: 8px; }

/* No rated month: the dashed box alone, no axes. */
.qv-page .qv-chart:has(.qv-empty-wrap) :is(.qv-yaxis, .qv-xaxis, .qv-zero) { display: none; }
.qv-page .qv-chart:has(.qv-empty-wrap) .qv-line { display: block; }
.qv-page .qv-chart:has(.qv-empty-wrap) .qv-plot { height: auto; border: 0; background-image: none !important; }
.qv-page .qv-empty-wrap { position: static; display: block; padding: 0; }

.qv-page .qv-empty {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 12px;
	text-align: center;
	background: var(--surface-hover);
	border: 1px dashed var(--zero);
	border-radius: 12px;
	box-shadow: none;
}

.qv-page .qv-empty > svg:not(.m-only) { display: none; }
.qv-page .qv-empty-title { font-size: 13.5px; }
.qv-page .qv-empty-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.45; }

/* A plotted chart: the values are in the strip under it, so the point labels give way; every third
   month keeps its axis label (the first span is the 44px axis column's blank). */
.qv-page .qv-dot-label { display: none; }
.qv-page .qv-xaxis > span:not(:nth-child(3n+2)) { visibility: hidden; }
.qv-page .qv-xaxis span { font-size: 10.5px; }

/* The month table gives way to the strip; the NPS table to its phone breakdown. */
.qv-page .trend-scroll { display: none; }

/* The strip runs edge to edge in the card and swipes; tiles 58px, a month's value over its (n). */
.qv-page .qv-m-strip {
	display: flex;
	gap: 6px;
	margin: -4px 0 16px;
	padding: 0 16px 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 16px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.qv-page .qv-m-strip::-webkit-scrollbar { display: none; }

.qv-page .qv-m-month {
	flex: none;
	box-sizing: border-box;
	min-width: 58px;
	padding: 8px 4px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 9px;
	scroll-snap-align: start;
}

.qv-page .qv-m-month-label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--text-quiet);
	white-space: nowrap;
}

.qv-page .qv-m-month-value {
	margin-top: 4px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
}

.qv-page .qv-m-month-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-quiet); white-space: nowrap; }
.qv-page .qv-m-month.empty .qv-m-month-value { color: var(--text-quiet); }
.qv-page .qv-m-month.zero .qv-m-month-value { color: var(--zero); }
.qv-page .qv-m-month:is(.empty, .zero) .qv-m-month-n { color: var(--zero-n); }

/* Several lines: each line's swatch, value and (n) on its own row. */
.qv-page .qv-m-month.multi { padding: 8px 10px; }
.qv-page .qv-m-month-line { display: flex; align-items: center; gap: 5px; margin-top: 4px; text-align: left; }
.qv-page .qv-m-month-line .qv-swatch { width: 8px; height: 8px; }
.qv-page .qv-m-month-line .qv-m-month-value { margin: 0; font-size: 12px; }
.qv-page .qv-m-month-line .qv-m-month-n { font-size: 10px; }
.qv-page .qv-m-month-line.empty .qv-m-month-value { color: var(--text-quiet); }
.qv-page .qv-m-month-line.zero .qv-m-month-value { color: var(--zero); }
.qv-page .qv-m-month-line:is(.empty, .zero) .qv-m-month-n { color: var(--zero-n); }

/* ----- Trend Summary: a row per window, label and period left, figure and (n) right ----- */

.qv-page .qv-trend { padding: 14px 16px 16px; }
.qv-page .qv-trend-row + .qv-trend-row { margin-top: 14px; }
.qv-page .qv-trend-label { margin: 0; font-size: 13px; color: var(--ink-body); }
.qv-page .qv-tiles { display: block; }

.qv-page .qv-tile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 10px;
	padding: 11px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
}

.qv-page .qv-tile:last-child { border-bottom: 0; }

.qv-page .qv-tile-caption {
	grid-column: 1;
	font-family: var(--font-ui);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

.qv-page .qv-tile-period { grid-column: 1; margin: 2px 0 0; font-size: 12px; color: var(--text-quiet); }
.qv-page .qv-tile-figures { grid-column: 2; grid-row: 1 / span 2; align-items: center; gap: 10px; }
.qv-page .qv-tile-value { font-size: 22px; letter-spacing: -0.5px; }
.qv-page .qv-tile.empty .qv-tile-value { color: var(--text-quiet); }
.qv-page .qv-tile-n { min-width: 52px; text-align: right; font-size: 12px; }

/* ----- NPS breakdown (RenderNpsPhone) ----- */

.qv-page .qv-m-nps { padding: 14px 16px 20px; }
.qv-page .qv-m-nps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qv-page .qv-m-nps-right { text-align: right; }
.qv-page .qv-m-nps-cap { font-size: 12px; color: var(--text-quiet); }

.qv-page .qv-m-nps-score {
	margin-top: 4px;
	font-family: var(--font-mono);
	font-size: 34px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--ink);
}

.qv-page .qv-m-nps-total { margin-top: 4px; font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--ink); }
.qv-page :is(.qv-m-nps-score, .qv-m-nps-total).zero { color: var(--zero); }

/* The three groups' shares as one 10px bar (segments grow by their counts inline). */
.qv-page .qv-m-nps-bar { display: flex; gap: 2px; height: 10px; margin-bottom: 6px; overflow: hidden; border-radius: 5px; }
.qv-page .qv-m-nps-bar.empty { background: var(--track); }
.qv-page .qv-m-nps-bar > span { flex: 1 1 0; min-width: 0; }

.qv-page .qv-m-nps-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.qv-page .qv-m-nps-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.qv-page .qv-m-nps-pct { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.qv-page .qv-m-nps-n { min-width: 46px; text-align: right; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.qv-page .qv-m-nps-row.zero :is(.qv-m-nps-pct, .qv-m-nps-n) { color: var(--zero); }

.qv-page .qv-m-caption {
	padding: 14px 0 10px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

/* Ratings by score, 10 down to 0: each column's count, its bar (70px at the most-given score), the score. */
.qv-page .qv-m-cols { display: flex; align-items: flex-end; gap: 4px; }
.qv-page .qv-m-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qv-page .qv-m-col-n { font-family: var(--font-mono); font-size: 9px; letter-spacing: -0.2px; color: var(--text-quiet); white-space: nowrap; }
.qv-page .qv-m-col.zero .qv-m-col-n { color: var(--zero); }
.qv-page .qv-m-col-bar { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--track); }
.qv-page .qv-m-col-score { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--ink-body); }

/* ----- Chart Summary and distribution rows ----- */

.qv-page .qv-bars,
.qv-page .qv-donut-legend,
.qv-page .qv-grid-head { display: none; }

.qv-page .qv-grid { padding: 14px 16px 16px; }

/* One rule between rows, none above the first or under the last. */
.qv-page .qv-grid-row { gap: 0 10px; padding: 10px 0; border-bottom: 0; border-top: 1px solid var(--rule); }
.qv-page .qv-grid-head + .qv-grid-row { border-top: 0; }

.qv-page .qv-grid-label { gap: 10px; font-size: 14px; }
.qv-page .qv-grid-n .qv-count { font-weight: 500; }

/* Chart Summary: label, value and (n) on a line, the bar under them. */
.qv-page .qv-chart-table .qv-grid-row { grid-template-columns: minmax(0, 1fr) auto 46px; align-items: baseline; }
.qv-page .qv-m-bar { grid-column: 1 / -1; display: block; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: var(--track); }
.qv-page .qv-m-bar > span { display: block; height: 100%; border-radius: 3px; }

/* Distribution: after a donut the rows start at once. */
.qv-page .qv-donut-row { justify-content: center; gap: 0; padding: 18px 16px 10px; }
.qv-page .qv-donut { width: 128px; height: 128px; }
.qv-page .qv-donut-hole { inset: 16px; }
.qv-page .qv-donut-value { font-size: 19px; }
.qv-page .qv-donut-caption { margin-top: 3px; font-size: 10.5px; }
.qv-page .qv-donut-row + .qv-grid { padding-top: 0; }

.qv-page .qv-dist .qv-grid-row { padding: 9px 0; }
.qv-page .qv-dist .qv-dist-bar { gap: 10px; }
.qv-page .qv-dist .qv-dist-pct { width: 48px; }

/* Score answers: swatch and score, the bar, its share, its (n) on one line. */
.qv-page .qv-dist[data-m-rows="scores"] .qv-grid-row { grid-template-columns: auto minmax(0, 1fr) 42px; }
.qv-page .qv-dist[data-m-rows="scores"] .qv-grid-label { min-width: 39px; }

/* Other answers: label, share and (n) on a line, the bar under them across the row. */
.qv-page .qv-dist[data-m-rows="answers"] .qv-grid-row:not(.muted) {
	position: relative;
	grid-template-columns: minmax(0, 1fr) auto 40px;
	align-items: baseline;
	padding-bottom: 21px;
}

.qv-page .qv-dist[data-m-rows="answers"] .qv-track { position: absolute; left: 0; right: 0; bottom: 9px; }
.qv-page .qv-dist[data-m-rows="answers"] .qv-dist-pct { width: auto; }

/* No response: quiet, label left, count right. */
.qv-page .qv-dist .qv-grid-row.muted { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; padding: 10px 0 0; }
.qv-page .qv-grid-row.muted .qv-grid-label { font-size: 12.5px; font-weight: 400; color: var(--text-secondary); }
.qv-page .qv-grid-row.muted .qv-count { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

/* The donut's left-out answers, as a row after the answers (RenderPhoneRest). */
.qv-page .qv-m-rest {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--rule);
	font-size: 13px;
	color: var(--text-secondary);
}

.qv-page .qv-m-rest-pct { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.qv-page .qv-dist + .qv-m-rest { margin: -16px 16px 16px; }

/* ----- Program Summary: label and figure on a line, the percentage under the label ----- */

.qv-page .qv-ps { padding: 14px 16px 16px; }

.qv-page .qv-ps-row {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0 10px;
	padding: 9px 0 9px 10px;
	border-left: 2px solid var(--border-card);
}

.qv-page .qv-ps-row.head { padding: 10px 0; background: none; border-top: 0; border-left: 0; border-bottom: 1px solid var(--rule); }
.qv-page .qv-ps-caption { padding: 12px 0 2px; }
.qv-page .qv-ps-label { grid-column: 1; grid-row: 1; font-size: 13.5px; }
.qv-page .qv-ps-row.head .qv-ps-label { font-size: 14px; }
.qv-page .qv-ps-figure { grid-column: 2; grid-row: 1; font-size: 13.5px; font-weight: 500; }
.qv-page .qv-ps-row.head .qv-ps-figure { font-size: 16px; font-weight: 500; }
.qv-page .qv-ps-pct { grid-column: 1; grid-row: 2; margin-top: 2px; text-align: left; font-family: var(--font-ui); font-size: 11.5px; }
.qv-page .qv-ps-pct:empty { display: none; }