/* Data Detail on a phone (handoff 8f): full-screen sheet, one field column with section tabs, Save/Email pinned.
   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).

   Everything is scoped to the panel's own classes (.dd-backdrop, .dd-modal: DataDetailModal.razor), so the other
   dialogs and their "dd-" classes (Drill Down) are untouched. Sizes and colours are mock 8f's. */

/* ---------- The sheet: the whole screen, scrolling as one; header and tabs stay on top, Save/Email at the bottom ---------- */

.modal-backdrop.dd-backdrop {
	padding: 0;
	align-items: stretch;
	background: var(--page);
}

.modal-backdrop.dd-backdrop > .modal.dd-modal {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: none;
	border-radius: 0;
	box-shadow: none;
	background: var(--page);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* While the sheet is open the page behind it is locked: chrome.css's rule for every dialog (html:has(.modal-backdrop)). */

/* The sheet is a scrolling flex column: no part of it may shrink to fit. */
.modal.dd-modal > * { flex: none; }

/* The desktop header's Email / Save Details and their divider are d-only (chrome.css): they move to the footer. */

/* ---------- Header: eyebrow, program and the 40px close; then the tab bar ---------- */

.modal.dd-modal .dd-header {
	position: sticky;
	top: 0;
	z-index: 3;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	padding: 0 12px 0 16px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

/* Title and close fill the first row (8px above, 10px below the 40px button, the text centred on it), so View
   Transcript / Listen to Recording (when shown) wrap to a row of their own. */
.modal.dd-modal .dd-header > div:first-child {
	flex: 1 1 calc(100% - 50px);
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 8px 0 10px;
}

.modal.dd-modal .dd-header .eyebrow {
	margin: 0;
	font-size: 10.5px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.9px;
	color: var(--brand-orange);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal.dd-modal .dd-header h2 {
	margin: 3px 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The actions' buttons join the header's own rows. */
.modal.dd-modal .dd-header-actions { display: contents; }

.modal.dd-modal .dd-close {
	order: 1;
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	margin: 8px 0 10px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--surface-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C4A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	font-size: 0;
	color: transparent;
}

/* 44px tap target around the 40px button. */
.modal.dd-modal .dd-close::after {
	content: "";
	position: absolute;
	inset: -3px;
}

/* View Transcript / Listen to Recording: a row of 44px buttons under the title. */
.modal.dd-modal .dd-header-actions > .tool-btn {
	order: 2;
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	height: 44px;
	margin: 0 0 10px;
	border-radius: 10px;
	font-size: 14px;
}

/* The first of them lines up with the tab bar and the cards (12px in), like the last. */
.modal.dd-modal .dd-header-actions > .d-only:first-child + .tool-btn { margin-left: -4px; }

/* Section tabs (m-only): Record / Responses / Hot Sheet. */
.modal.dd-modal .dd-m-tabs {
	order: 3;
	flex: 0 0 calc(100% + 28px);
	display: flex;
	gap: 6px;
	margin: 0 -12px 0 -16px;
	padding: 10px 12px;
	border-top: 1px solid var(--border);
}

.modal.dd-modal .dd-m-tab {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 36px;
	padding: 0 8px;
	border: 0;
	border-radius: 18px;
	background: var(--surface-soft);
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-body);
	white-space: nowrap;
	cursor: pointer;
	transition: var(--ease-ui);
	-webkit-tap-highlight-color: transparent;
}

.modal.dd-modal .dd-m-tab[aria-current="true"] {
	background: var(--navy);
	color: #FFFFFF;
	font-weight: 600;
}

/* 44px tap target: the 36px pill plus 4px of the bar above and below. */
.modal.dd-modal .dd-m-tab::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

/* ---------- Call recording strip ---------- */

.modal.dd-modal .dd-recording { margin: 12px 12px 0; background: var(--surface); }
.modal.dd-modal .dd-audio { flex: 1 1 100%; height: 44px; }
.modal.dd-modal .dd-recording-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.modal.dd-modal .dd-recording-status { font-size: 14px; }
.modal.dd-modal .dd-recording-close { width: 44px; height: 44px; padding: 0; font-size: 22px; }

/* ---------- Cards: Record, Response Data, Hot Sheet ---------- */

.modal.dd-modal .dd-fields,
.modal.dd-modal .dd-panel,
.modal.dd-modal .dd-panel-stack {
	background: var(--surface);
	border: 1px solid var(--border-card);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

/* Record: the three field columns become one. */
.modal.dd-modal .dd-fields {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 12px 12px 12px;
	padding: 0 16px 16px;
}

/* A section a tab moved focus to (DataDetailModal.razor.js) is not a control: no ring. */
.modal.dd-modal :is(.dd-fields, .dd-panels > .dd-panel, .dd-panel-stack):focus { outline: none; }

/* Its title (m-only, last in the markup) leads the card. */
.modal.dd-modal .dd-m-title {
	order: -1;
	margin: 0 -16px 14px;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.modal.dd-modal .dd-field {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 9px 0;
	border-bottom: 1px solid var(--rule);
}

.modal.dd-modal .dd-field:last-of-type { border-bottom: 0; }

/* Label over value. */
.modal.dd-modal .dd-label,
.modal.dd-modal .dd-question {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--text-quiet);
	white-space: normal;
}

.modal.dd-modal .dd-colon { display: none; }

.modal.dd-modal .dd-value,
.modal.dd-modal .dd-value.cell-mono,
.modal.dd-modal .dd-value.empty,
.modal.dd-modal .dd-answer,
.modal.dd-modal .dd-answer-text {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
}

/* "(reassigned by … on …)" after a hot sheet's owner. */
.modal.dd-modal .hs-muted-inline { font-size: 12.5px; font-weight: 400; color: var(--text-tertiary); }

/* NPS Customer Category keeps its desktop colour and chip. */
.modal.dd-modal .dd-value.nps-promoter { color: var(--success-text); font-weight: 600; }
.modal.dd-modal .dd-value.nps-passive { color: #8A711C; font-weight: 600; }
.modal.dd-modal .dd-value.nps-detractor { color: var(--danger); font-weight: 600; }

/* Response Data and Hot Sheet. */
.modal.dd-modal .dd-panels {
	display: block;
	margin: 0 12px;
	padding: 0 0 4px;
}

.modal.dd-modal .dd-panels > .dd-panel,
.modal.dd-modal .dd-panel-stack { margin: 0 0 12px; }

.modal.dd-modal .dd-panel-header {
	padding: 14px 16px 12px;
	font-size: 14.5px;
	line-height: 1.3;
}

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

.modal.dd-modal .dd-response {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 2px;
	padding: 9px 0;
}

/* A numeric rating: question and a score badge on one row. */
.modal.dd-modal .dd-response.m-rated {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.modal.dd-modal .dd-response.m-rated .dd-question {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-body);
}

.modal.dd-modal .dd-response.m-rated .dd-answer {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 6px;
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	background: var(--grey-series);
	color: var(--ink);
}

.modal.dd-modal .dd-response.m-rated .dd-answer.m-score-top { background: var(--navy); color: #FFFFFF; }
.modal.dd-modal .dd-response.m-rated .dd-answer.m-score-high { background: var(--blue-light); color: #FFFFFF; }
.modal.dd-modal .dd-response.m-rated .dd-answer.m-score-mid { background: var(--grey-series); color: var(--ink); }
.modal.dd-modal .dd-response.m-rated .dd-answer.m-score-low { background: var(--peach); color: var(--ink); }

/* Hot Sheet: the hot-sheet panel and the notes panel become one card. */
.modal.dd-modal .dd-panel-stack { display: block; }

.modal.dd-modal .dd-panel-stack > .dd-panel {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.modal.dd-modal .dd-panel-stack > .dd-panel:first-child .dd-panel-body { padding-bottom: 0; }

/* "Enter in your Post-Survey Notes/Categories": a sub-heading under a rule. */
.modal.dd-modal .dd-panel-header.input-header {
	margin: 4px 16px 0;
	padding: 14px 0 10px;
	border-top: 1px solid var(--rule);
	border-bottom: 0;
	background: var(--surface);
	font-size: 13.5px;
	line-height: normal;
	color: var(--ink);
}

/* Not a survey response: the note in place of the notes panel. */
.modal.dd-modal .dd-panel-stack > .hs-muted {
	margin: 4px 16px 0;
	padding: 14px 0 16px;
	border-top: 1px solid var(--rule);
	font-size: 13.5px;
	line-height: 1.4;
}

.modal.dd-modal .dd-notes-body { padding: 0 16px 16px; }

.modal.dd-modal .dd-notes-body label {
	margin: 0 0 7px;
	line-height: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-body);
}

/* 48px fields with 16px text, so iOS doesn't zoom in. */
.modal.dd-modal .dd-notes-body select {
	width: 100%;
	height: 48px;
	padding: 0 12px;
	margin-bottom: 14px;
	border: 1px solid #D5DDE6;
	border-radius: 10px;
	font-size: 16px;
	color: var(--ink);
}

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

.modal.dd-modal .dd-notes-body textarea {
	width: 100%;
	height: 110px;
	padding: 12px 14px;
	margin-bottom: 0;
	border: 1px solid #D5DDE6;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
}

/* Save Notes: the secondary button here (Save Details is the sheet's primary). */
.modal.dd-modal .dd-save,
.modal.dd-modal .dd-save:hover {
	height: 48px;
	margin-top: 12px;
	border: 1px solid #D5DDE6;
	border-radius: 10px;
	background: var(--surface);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-body);
}

.modal.dd-modal .dd-save:disabled { color: var(--text-quiet); }

/* ---------- Footer (m-only): Email Details and Save Details, pinned ---------- */

.modal.dd-modal .dd-m-footer {
	position: sticky;
	bottom: 0;
	z-index: 3;
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: 0 -6px 18px rgba(20, 40, 70, .06);
}

.modal.dd-modal .dd-m-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 10px;
	border: 1px solid #D5DDE6;
	border-radius: 10px;
	background: var(--surface);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.modal.dd-modal .dd-m-btn > svg { flex: none; width: 16px; height: 16px; }

.modal.dd-modal .dd-m-btn-primary {
	border-color: var(--brand-orange-dark);
	background: var(--brand-orange);
	font-weight: 600;
	color: #FFFFFF;
}