/* Heron Assessment + Report component styles.
   Uses the same CSS custom properties defined in the theme's
   heron-theme.css design tokens (see wp-content/themes/heron/assets/css).
   Loaded standalone so the assessment/report shortcodes work even if
   dropped into a non-Heron theme via a page builder. */

:root {
	/* Brand tokens — 01_BRAND_SYSTEM.md v1.1 §3-5. Kept in sync with
	   wp-content/themes/heron/assets/css/heron-theme.css so Assessment/
	   Flight Deck/Report match the theme even if this plugin CSS is
	   loaded standalone (e.g. dropped into a non-Heron theme). */
	--heron-navy: #07111F;
	--heron-teal: #00C2B8;
	--heron-blue: #53D5FF;
	--heron-gold: #D4AF37;
	--heron-success: #45D483;
	--heron-warning: #F6C344;
	--heron-critical: #E65B65;
	--heron-white: #FFFFFF;
	--heron-grey: #B7C4D4;
	--heron-bg-light: #13263B;
	--heron-radius: 18px;      /* Card radius per spec */
	--heron-radius-btn: 10px;  /* Button radius per spec — NOT a pill */
}

.heron-assessment,
.heron-report,
.heron-flight-deck {
	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--heron-white);
}
.heron-flight-deck { max-width: 960px; }

.heron-assessment__progress {
	height: 6px;
	background: var(--heron-bg-light);
	border-radius: 999px;
	margin-bottom: 32px;
	overflow: hidden;
}
.heron-assessment__progress-bar {
	height: 100%;
	background: var(--heron-teal);
	width: 0%;
	transition: width 0.3s ease;
}

.heron-assessment__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: var(--heron-teal);
	font-weight: 700;
	margin-bottom: 16px;
	scroll-margin-top: 90px; /* clears the theme's sticky header when a step scrolls into view */
}
.heron-assessment__step {
	scroll-margin-top: 90px;
	outline: none; /* programmatic focus target for accessible step transitions — not a visible focus ring on the whole section */
}

.heron-question {
	border: none;
	padding: 0 0 28px;
	margin: 0 0 28px;
	border-bottom: 1px solid #E3E8EC;
}
.heron-question legend {
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: 14px;
	padding: 0;
}
.heron-question--error {
	outline: 2px solid var(--heron-critical);
	outline-offset: 8px;
	border-radius: 6px;
}

.heron-question__scale {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.heron-question__option {
	flex: 1 1 auto;
	min-width: 100px;
	text-align: center;
	border: 1px solid var(--heron-divider, #D6DCE1);
	border-radius: var(--heron-radius);
	padding: 10px 8px;
	cursor: pointer;
	font-size: 0.85rem;
	transition: border-color 0.15s, background 0.15s;
	background: rgba(255,255,255,0.03);
}
.heron-question__option:has(input:checked) {
	border-color: var(--heron-teal);
	background: rgba(0, 194, 184, 0.14);
	font-weight: 600;
}
.heron-question__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.heron-question__option:focus-within {
	outline: 2px solid var(--heron-teal);
	outline-offset: 2px;
}

.heron-field {
	margin-bottom: 18px;
}
.heron-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}
.heron-field input[type="text"],
.heron-field input[type="email"],
.heron-field input[type="tel"],
.heron-field select,
.heron-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--heron-divider, #D6DCE1);
	border-radius: 8px;
	font-size: 1rem;
	min-height: 44px;
	box-sizing: border-box;
	background: rgba(255,255,255,0.04);
	color: var(--heron-white);
}
.heron-field input::placeholder,
.heron-field textarea::placeholder { color: var(--heron-grey); }
.heron-field input:focus,
.heron-field select:focus,
.heron-field textarea:focus {
	outline: 2px solid var(--heron-teal);
	outline-offset: 1px;
}
.heron-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
}
.heron-field--honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.heron-btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: var(--heron-radius-btn);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	font-size: 1rem;
	min-height: 44px;
}
.heron-btn--primary {
	background: var(--heron-teal);
	color: var(--heron-white);
}
.heron-btn--primary:hover,
.heron-btn--primary:focus-visible {
	background: #17706F;
}
.heron-btn--secondary {
	background: transparent;
	border-color: var(--heron-white);
	color: var(--heron-white);
	margin-right: 10px;
}
.heron-btn:focus-visible {
	outline: 3px solid var(--heron-gold);
	outline-offset: 2px;
}
.heron-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.heron-form__status {
	margin: 12px 0;
	font-weight: 600;
}
.heron-form__status--error {
	color: var(--heron-critical);
}
.heron-noscript-notice {
	background: rgba(246,195,68,0.12);
	border: 1px solid rgba(246,195,68,0.4);
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 0.9rem;
	margin-bottom: 20px;
}

.heron-hpi-badge {
	background: var(--heron-navy);
	color: var(--heron-white);
	border-radius: var(--heron-radius);
	padding: 28px;
	text-align: center;
	margin-bottom: 24px;
}
.heron-hpi-badge__score {
	display: block;
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
}
.heron-hpi-badge__band {
	display: block;
	margin-top: 8px;
	color: var(--heron-gold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	font-weight: 700;
}

.heron-domain-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.heron-domain-list li {
	display: grid;
	grid-template-columns: 160px 1fr 40px;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.heron-domain-list__bar {
	height: 10px;
	background: var(--heron-bg-light);
	border-radius: 999px;
	position: relative;
	overflow: hidden;
}
.heron-domain-list__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	width: calc(var(--score) * 1%);
	background: var(--heron-teal);
	border-radius: 999px;
}
.heron-domain-list__score {
	text-align: right;
	font-weight: 700;
}

.heron-priority-card {
	border: 1px solid #E3E8EC;
	border-left: 4px solid var(--heron-teal);
	border-radius: 8px;
	padding: 18px 20px;
	margin-bottom: 16px;
}
.heron-priority-card__sprint {
	font-weight: 600;
	color: var(--heron-blue);
	margin-bottom: 0;
}

.heron-report__meta {
	color: var(--heron-grey);
	margin-top: 4px;
}
.heron-report__disclaimer {
	font-size: 0.8rem;
	color: var(--heron-grey);
	text-align: center;
}

/* ==========================================================================
   FLIGHT DECK
   ========================================================================== */
.heron-flight-deck { max-width: 960px; margin: 0 auto; }
.heron-flight-deck__header { margin-bottom: 32px; }
.heron-deck-section {
	border-top: 1px solid var(--heron-border);
	padding: 32px 0;
}
.heron-deck-section:first-of-type { border-top: none; }
.heron-deck-grid--summary {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
	margin-bottom: 24px;
}
.heron-deck-stat {
	background: var(--heron-bg-light);
	border-radius: var(--heron-radius);
	padding: 20px 24px;
	min-width: 160px;
}
.heron-deck-stat__label { display: block; color: var(--heron-grey); font-size: 0.85rem; margin-bottom: 6px; }
.heron-deck-stat__value { font-size: 1.6rem; font-weight: 700; }
.heron-deck-stat__value.is-positive { color: #2E7D32; }
.heron-deck-stat__value.is-negative { color: #B3261E; }
.heron-deck-subheading { margin-top: 0; }
.heron-deck-priority-list { padding-left: 20px; }
.heron-deck-note { color: var(--heron-grey); font-size: 0.9rem; }
.heron-deck-note.is-negative { color: #B3261E; font-weight: 600; }

.heron-deck-table { width: 100%; border-collapse: collapse; }
.heron-deck-table th, .heron-deck-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--heron-border);
	font-size: 0.92rem;
}
.heron-deck-table tr.is-overdue td { background: rgba(179,38,30,0.06); }

.heron-priority-chip {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	margin-right: 8px;
}
.heron-priority-chip--critical { background: #FBE7E5; color: #B3261E; }
.heron-priority-chip--high { background: #FDEFE0; color: #B26A00; }
.heron-priority-chip--medium { background: #E6F0FA; color: #2C4A6E; }
.heron-priority-chip--monitor { background: #EAF3EA; color: #2E7D32; } /* RC4: calm, non-alarming — a Healthy/Monitor domain must never read as "Critical" purely because it ranked first */
.heron-priority-chip--low { background: #EAF3EA; color: #2E7D32; }

.heron-sprint-card {
	background: var(--heron-white);
	border: 1px solid var(--heron-border);
	border-radius: var(--heron-radius);
	padding: 24px;
}
.heron-sprint-card__bar {
	height: 10px;
	background: var(--heron-bg-light);
	border-radius: 999px;
	overflow: hidden;
	margin: 12px 0;
}
.heron-sprint-card__bar span {
	display: block;
	height: 100%;
	background: var(--heron-teal);
}

.heron-risk-matrix {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.heron-risk-quadrant {
	border-radius: var(--heron-radius, 18px);
	padding: 18px 20px;
	border: 1px solid var(--heron-border);
}
.heron-risk-quadrant h4 { margin: 0 0 10px; }
.heron-risk-quadrant ul { margin: 0; padding-left: 18px; }
.heron-risk-quadrant--urgent_important { background: rgba(230,91,101,0.10); border-color: rgba(230,91,101,0.35); }
.heron-risk-quadrant--important_not_urgent { background: rgba(246,195,68,0.10); border-color: rgba(246,195,68,0.35); }
.heron-risk-quadrant--monitor { background: rgba(83,213,255,0.08); border-color: rgba(83,213,255,0.3); }
.heron-risk-quadrant--lower_risk { background: rgba(69,212,131,0.08); border-color: rgba(69,212,131,0.3); }

@media (max-width: 640px) {
	.heron-risk-matrix { grid-template-columns: 1fr; }
}

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

@media (max-width: 640px) {
	.heron-domain-list li {
		grid-template-columns: 110px 1fr 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.heron-assessment__progress-bar { transition: none; }
	.heron-question__option { transition: none; }
}