/* Records grid on a phone (handoff 8e): rows as cards, pager with 44px targets.
   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).

   Both pages that use RecordsGrid: All Records (/records) and the records behind a Program Summary count
   (/reports/program-summary/records). Everything is scoped to the classes those three components carry:
   .rg-title (the pages' title block), .rg-card (RecordsGrid's card), .rg-m / .rg-back (their m-only markup).
   The record page (/records/detail, Pages/RecordDetail) reuses the title block, the return link and the message
   card, so it takes the same band; its Data Detail panel is data-detail.css's.

   8e's layout: one white band under the header (the return link, the title and subtitle, the grid's search
   box, then the export buttons), then on the page colour the count and a sort picker, the rows as cards 12px
   from the screen edge, the pager and a one-line note on the 16px gutter. The table and its pager are desktop
   only here; the cards are RecordsGrid's m-only block, over the same rows, search, sort and page. */

/* ---------- The white band: the title block, then the grid's toolbar right under it ---------- */

/* The band starts at the header, as in 8e (only these pages put .rg-title in the content). */
main.records-content:has(> .records-title.rg-title) { padding-top: 0; }

/* Full bleed whatever the page gutter is: the margins reach the screen edges and the padding puts the text
   back on the gutter (16px at least). */
.records-title.rg-title {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	max-width: none;
	margin: 0 calc(50% - 50vw);
	padding: 8px max(16px, calc(50vw - 50%)) 10px;
	background: var(--surface);
}

/* A Program Summary link with no count, or the record page, has no grid under it: the band closes itself. */
.records-title.rg-title:not(:has(+ .grid-card.rg-card)) {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

/* Its message card keeps the desktop look, with room at the sides. */
.records-title.rg-title + .grid-card .list-empty { padding: 22px 16px; }

/* The record page's Try again (its message card) is a 44px target. */
.records-title.rg-title + .grid-card .list-empty .btn-secondary { min-height: 44px; font-size: 15px; }

/* The return link leads the band (it is last in the markup so no desktop selector sees it). 44px tall: its
   text sits where 8e's 32px link puts it. */
.rg-title > .rg-back {
	order: -1;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	margin-left: -4px;
	padding-right: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
}

.rg-title > .rg-back svg { flex: none; }

.rg-title > div:first-child { margin-bottom: 12px; }

.records-title.rg-title h1 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: var(--ink);
}

.rg-title .report-subtitle {
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-secondary);
}

.rg-title .report-subtitle + .report-subtitle { margin-top: 6px; }

.rg-title .drill-banner { margin: 10px 0 0; }

/* Export / Download and Print: two to a row, 44px tall; an odd last one takes the whole row. */
.records-title.rg-title .segmented {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.records-title.rg-title .segmented > .tool-btn {
	justify-content: center;
	min-width: 0;
	height: 44px;
	padding: 0 10px;
	background: var(--surface-soft);
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: normal; /* "Export transcripts…" takes two lines on a 320px phone rather than spilling out */
	color: var(--ink-body);
}

.records-title.rg-title .segmented > .tool-btn > svg { width: 14px; height: 14px; }

.records-title.rg-title .segmented > .tool-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* The grid's card is just a column on the page colour; its toolbar finishes the white band. */
.grid-card.rg-card {
	max-width: none;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.grid-card.rg-card > .grid-toolbar {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin: 0 calc(50% - 50vw);
	padding: 0 max(16px, calc(50vw - 50%)) 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

/* 48px with 16px text, so iOS doesn't zoom in. */
.grid-card.rg-card .grid-search { width: auto; flex: none; }

.grid-card.rg-card .grid-search input {
	height: 48px;
	padding: 0 12px 0 36px;
	border: 1px solid #D5DDE6;
	border-radius: 10px;
	font-size: 16px;
	color: var(--ink);
}

.grid-card.rg-card .grid-search input::placeholder { color: var(--text-quiet); opacity: 1; }

/* "Scroll sideways… click a column heading": the cards replace both (the note under the pager says what they show). */
.grid-card.rg-card .grid-hint { display: none; }

/* All Records' "Located:" chip; its × gets a 44px target. */
.grid-card.rg-card .search-chip { align-self: flex-start; max-width: 100%; }
.grid-card.rg-card .search-chip a { position: relative; }
.grid-card.rg-card .search-chip a::after { content: ""; position: absolute; inset: -13px; }

/* The table and its pager: desktop only. */
.grid-card.rg-card > .grid-scroller,
.grid-card.rg-card > .grid-pager { display: none; }

/* ---------- 8e's order: the search box between the subtitle and the export buttons ----------
   The buttons are in the page's title block and the search box in RecordsGrid's toolbar. With both on the page
   (a Program Summary link with no count has no grid), the two boxes step aside (display: contents) and the
   content area becomes one grid column that stacks their parts as drawn: the return link, the title, the search
   box, the buttons, then the cards. Its ::before is the white band behind the first four rows, full bleed.
   Every part names column 1 as well as its row: a part given only a row is auto-placed past the ::before (which
   fills column 1 in rows 1-4) into an implicit second column, and that column squeezes the cards.
   The return link drops the order: -1 that leads it in the flex band above: grid items paint in order, so at -1
   it would sit under the ::before, hidden and untappable.
   Without :has() support the rules above lay the band out as the markup runs (buttons, then search). The
   screen-reader order stays the markup's (ASSUMPTIONS #43). */
main.records-content:has(> .records-title.rg-title + .grid-card.rg-card) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
}

main.records-content:has(> .records-title.rg-title + .grid-card.rg-card)::before {
	content: "";
	grid-row: 1 / 5;
	grid-column: 1;
	margin: 0 calc(50% - 50vw);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

main.records-content > .records-title.rg-title:has(+ .grid-card.rg-card),
main.records-content > .records-title.rg-title + .grid-card.rg-card { display: contents; }

main.records-content > .records-title.rg-title:has(+ .grid-card.rg-card) > .rg-back { order: 0; grid-row: 1; grid-column: 1; justify-self: start; margin-top: 8px; }
main.records-content > .records-title.rg-title:has(+ .grid-card.rg-card) > div:first-child { grid-row: 2; grid-column: 1; }

main.records-content > .records-title.rg-title + .grid-card.rg-card > .grid-toolbar {
	grid-row: 3;
	grid-column: 1;
	margin: 0;
	padding: 0 0 10px;
	background: none;
	border-bottom: 0;
}

main.records-content > .records-title.rg-title:has(+ .grid-card.rg-card) > .segmented { grid-row: 4; grid-column: 1; margin: 0 0 10px; }
main.records-content > .records-title.rg-title + .grid-card.rg-card > .rg-m { grid-row: 5; grid-column: 1; }

/* ---------- The count and the sort picker ---------- */

.rg-card .rg-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0 8px;
	scroll-margin-top: 72px;
}

/* Focused by the pager only to bring the list back into view. */
.rg-card .rg-bar:focus { outline: none; }

.rg-card .rg-count {
	flex: none;
	font-size: 12.5px;
	color: var(--text-secondary);
	white-space: nowrap;
}

/* The visible chip is 8e's 32px; the transparent select over it reaches 44px, and opens the phone's own picker. */
.rg-card .rg-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	height: 32px;
	padding: 0 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-body);
}

.rg-card .rg-sort-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rg-card .rg-sort select {
	position: absolute;
	top: -7px;
	left: -1px;
	width: calc(100% + 2px);
	height: 44px;
	min-height: 0; /* chrome.css gives every select 48px; this one is the 44px target centred on the chip */
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	font-size: 16px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.rg-card .rg-sort:focus-within {
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(41, 82, 122, .13);
}

/* ---------- The cards ---------- */

/* 12px from the screen edge, as 8e draws them (and as Program Summary and Quick View put theirs): 4px out of the
   16px page gutter, where the count bar and the note stay. */
.rg-card .rg-rec,
.rg-card .rg-empty {
	margin: 0 -4px 10px;
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
}

.rg-card .rg-rec { padding: 14px 14px 12px; }

.rg-card .rg-empty {
	padding: 22px 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-tertiary);
	text-align: center;
}

.rg-card .rg-empty .loading-panel { padding: 40px 8px; }

.rg-card .rg-rec-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}

.rg-card .rg-rec-who { flex: 1; min-width: 0; }

.rg-card .rg-rec-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.rg-card .rg-rec-name.is-blank { font-weight: 500; color: var(--text-quiet); }

.rg-card .rg-rec-org {
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--text-secondary);
	overflow-wrap: anywhere;
}

.rg-card .rg-rec-badge {
	flex: none;
	max-width: 48%;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--tint-navy);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rg-card .rg-rec-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 3px 0;
}

.rg-card .rg-rec-label {
	flex: none;
	width: 108px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-quiet);
	overflow-wrap: anywhere;
}

.rg-card .rg-rec-value {
	flex: 1;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rg-card .rg-rec-value.is-contact { color: var(--navy); }
.rg-card .rg-rec-value.is-blank { color: var(--text-quiet); }

.rg-card .rg-details {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 44px;
	margin-top: 10px;
	padding: 0 12px;
	background: var(--tint-navy);
	border: 1px solid var(--active-nav-ring);
	border-radius: 10px;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	transition: var(--ease-ui);
}

.rg-card .rg-details:active { background: var(--active-nav-ring); }

.rg-card .rg-details svg { flex: none; }

/* ---------- Pager: 44px buttons, then the note ---------- */

/* On the cards' 12px inset, as 8e draws it. */
.rg-card .rg-pager {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 -4px;
	padding: 6px 0 4px;
}

/* 44px squares. RecordsGrid shows at most six buttons (Previous, four pages, Next) and one "…": 44px each from a
   360px-wide phone; on a 320px one, only with the "…" (five pages or more), they give a little width (to 40px). */
.rg-card .rg-page {
	flex: 0 1 44px;
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-body);
	cursor: pointer;
	transition: var(--ease-ui);
}

.rg-card .rg-page:disabled:not(.current) { opacity: .45; cursor: default; }

.rg-card .rg-page.current {
	background: var(--navy);
	border-color: var(--navy);
	color: #FFFFFF;
	font-weight: 600;
	cursor: default;
}

.rg-card .rg-ellipsis {
	flex: 0 1 20px;
	min-width: 12px;
	font-size: 14px;
	color: var(--text-quiet);
	text-align: center;
}

.rg-card .rg-note {
	margin: 0;
	padding: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-quiet);
}