*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--purple: #7b5ea7;
	--purple-dim: #3d2e53;
	--purple-glow: rgba(123, 94, 167, 0.10);
	--blue: #3e88a6;
	--blue-bright: #60aac8;
	--blue-fill: rgba(62, 136, 166, 0.16);
	--blue-glow: rgba(62, 136, 166, 0.08);
	--black: #00000d;
	--surface-0: #09090f;
	--surface-1: #0f0f1c;
	--surface-2: #151528;
	--surface-3: #1c1c34;
	--border: #1e1e30;
	--border-mid: #272740;
	--border-bright: #363655;
	--off-white: #fffeee;
	--contrast-white: #d1d1e0;
	--dim: #8686a8;
	--dim-2: #454560;
	--danger: #a06060;
}

a:link {
	color: var(--blue);
}

a:visited {
	color: var(--dim)
}

/* ── Base ────────────────────────────────── */

body {
	font-family: 'Open Sans', sans-serif;
	color: var(--off-white);
	background-color: var(--black);
	background-image:
		radial-gradient(ellipse 70% 50% at 10% 70%, rgba(123, 94, 167, 0.05) 0%, transparent 100%),
		radial-gradient(ellipse 50% 50% at 90% 10%, rgba(62, 136, 166, 0.04) 0%, transparent 100%);
	min-height: 100vh;
}

/* ── Page header ─────────────────────────── */

.page-header {
	text-align: center;
	padding: 22px 16px 18px;
	border-bottom: 1px solid var(--border);
}

.page-header h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.22em;
	color: var(--off-white);
}

.page-header h1 .accent {
	color: var(--blue);
}

.page-header p {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--contrast-white);
	margin-top: 6px;
}

/* ── Toast ─────────────────────────── */

@keyframes toastIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes toastOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-6px);
	}
}

#toast {
	height: 72px;
	display: flex;
	align-items: center;
	max-width: 1060px;
	margin: 0 auto;
	padding: 18px 24px;
}

.toast {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 0 14px;
	height: 100%;
	border-radius: 7px;
	border: 1px solid var(--border-mid);
	border-left-width: 3px;
	background: var(--surface-2);
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--contrast-white);
	animation: toastIn 0.3s ease-out, toastOut 0.5s ease-out 10s forwards;
}

.toast-error {
	border-color: rgba(160, 96, 96, 0.3);
	border-left-color: #a06060;
	background: rgba(160, 96, 96, 0.08);
	color: #c08888;
}

.toast-info {
	border-color: rgba(160, 144, 80, 0.3);
	border-left-color: #a09050;
	background: rgba(160, 144, 80, 0.06);
	color: #c4b870;
}

.toast-success {
	border-color: rgba(90, 158, 112, 0.3);
	border-left-color: #5a9e70;
	background: rgba(90, 158, 112, 0.07);
	color: #80c494;
}

/* ── App container ───────────────────────── */

.app {
	display: flex;
	gap: 18px;
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 24px 28px;
}

/* ── Sidebar ─────────────────────────────── */

.sidebar {
	width: 210px;
	flex-shrink: 0;
	background: var(--surface-1);
	border: 1px solid var(--border-mid);
	border-radius: 10px;
	padding: 18px;
	align-self: flex-start;
}

.sidebar-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.selection-item {
	padding: 8px 10px;
	border-left: 2px solid var(--purple-dim);
	margin-bottom: 10px;
	border-radius: 0 4px 4px 0;
	background: rgba(123, 94, 167, 0.04);
}

.selection-item:last-child {
	margin-bottom: 0;
}

.selection-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 3px;
}

.selection-value {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--off-white);
	line-height: 1.35;
}

/* ── Main content ────────────────────────── */

.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	margin-top: -16px;
}



/* ── Landing ─────────────────────────────── */

.landing {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: auto;
	gap: 12px;
	padding: 8px 4px;
}


.landing-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	gap: 6px;
}


.landing-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--off-white);
}

.landing-sub-title {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--off-white);
}

.landing-logo {
	width: 80px;
	height: 80px;
}

.landing-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--off-white);
	line-height: 1.25;
}

.landing-label em {
	font-style: normal;
	color: var(--blue-bright);
}

.landing-description {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--contrast-white);
	line-height: 1.65;
	max-width: 680px;
}

/* ── Card ────────────────────────────────── */

.card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--surface-1);
	border: 1px solid var(--border-mid);
	border-radius: 12px;
	padding: 26px 28px;
	height: 430px;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow:
		0 4px 32px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(123, 94, 167, 0.05) inset;
}

.card form {
	height: 100%;
	width: 100%;
	gap: 8px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* ── Thin scrollbar utility ──────────────── */

.thin-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--blue) transparent;
}

.thin-scroll::-webkit-scrollbar {
	width: 4px;
}

.thin-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.thin-scroll::-webkit-scrollbar-thumb {
	background: var(--blue);
	border-radius: 4px;
}

.selection-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	overflow-y: auto;
	padding-right: 6px;
}

.step-header {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--off-white);
	margin-bottom: 8px;
	line-height: 1.3;
	padding-left: 4px;
}

/* ── Step selection buttons ──────────────── */

.step-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
	background: var(--surface-0);
	min-height: 65px;
	border: 1px solid var(--border);
	border-radius: 8px;
	width: 100%;
	padding: 13px 16px 13px 18px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	overflow: hidden;
}

.step-btn::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--blue);
	opacity: 0;
	transition: opacity 0.15s ease;
	border-radius: 8px 0 0 8px;
}

.step-btn:hover {
	background: var(--surface-2);
	border-color: var(--blue-bright);
}

.step-btn:active {
	opacity: 0.8;
}

.step-btn.selected {
	background: var(--surface-2);
	border-color: var(--border-bright);
}

.step-btn.selected::after {
	opacity: 1;
}

.btn-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--off-white);
	transition: color 0.15s ease;
}

.btn-description {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--dim);
	line-height: 1.45;
}

/* ── State grid buttons ──────────────────── */

.state-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 5px;
	overflow-y: auto;
	padding-right: 6px;
}

.base-state-btn,
.all-state-btn {
	text-align: center;
	background: var(--surface-0);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--off-white);
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.base-state-btn:hover,
.all-state-btn:hover {
	background: var(--surface-2);
	border-color: var(--blue-bright);
}

.base-state-btn:active,
.all-state-btn:active {
	opacity: 0.75;
	color: var(--off-white);
}

.base-state-btn.selected,
.all-state-btn.selected {
	background: var(--blue-fill);
	border-color: var(--blue);
	color: var(--contrast-white);
}

.all-state-btn.locked {
	background: var(--purple-glow);
	border-color: var(--purple-dim);
	color: var(--dim);
	cursor: not-allowed;
	pointer-events: none;
}

.all-state-btn.locked:hover {
	background: var(--purple-glow);
	border-color: var(--purple-dim);
	color: var(--dim);
}

/* ── Select All button ───────────────────── */

.select-all-btn {
	align-self: flex-start;
	background: transparent;
	border: 1px solid var(--border-mid);
	border-radius: 6px;
	padding: 6px 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--dim);
	cursor: pointer;
	margin-bottom: 8px;
	transition: all 0.15s ease;
}

.select-all-btn:hover {
	border-color: var(--blue);
	color: var(--blue-bright);
	background: var(--blue-glow);
}


/* ── Navigation ──────────────────────────── */

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-btn {
	height: 38px;
	padding: 0 20px;
	border-radius: 8px;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s ease;
}

#back {
	min-width: 90px;
	color: var(--dim);
	background: transparent;
	border: 1px solid var(--border-mid);
}

#back:hover {
	color: var(--contrast-white);
	border-color: var(--blue-bright);
	background: var(--surface-2);
}

#reset {
	color: var(--dim-2);
	background: transparent;
	border: 1px solid transparent;
	border-color: rgba(160, 96, 96, 0.25);
	font-size: 10px;
	letter-spacing: 0.08em;
}

#reset:hover {
	background: var(--surface-2);
	color: var(--danger);
}

#next {
	min-width: 90px;
	color: var(--dim);
	background: transparent;
	border: 1px solid var(--border-mid);
}

#next:hover {
	color: var(--contrast-white);
	border-color: var(--blue-bright);
	background: var(--surface-2);
}


#next:disabled {
	color: var(--dim-2);
	background: transparent;
	border: 1px solid transparent;
	font-size: 10px;
	letter-spacing: 0.08em;
	cursor: not-allowed;
	/* disable the cursor */
}

#next:active {
	opacity: 0.85;
}

#start {
	width: 100%;
	height: 46px;
	color: var(--off-white);
	background: var(--surface-3);
	border: 1px solid var(--border-mid);
	border-radius: 8px;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s ease;
	display: block;
	box-sizing: border-box;
}

#start:hover {
	background: transparent;
	border-color: var(--blue-bright);
	color: var(--blue-bright);
}

#start:active {
	opacity: 0.85;
}


.contact-us {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	gap: 14px;
	padding: 8px 4px;
}

.contact-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-option {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 18px;
	background: var(--surface-0);
	border: 1px solid var(--border);
	border-left: 3px solid var(--blue);
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.contact-option:hover {
	background: var(--surface-2);
	border-color: var(--blue-bright);
	border-left-color: var(--blue-bright);
}

.contact-option-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
}

.contact-option-value {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--off-white);
}

.contact-option-desc {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--dim);
	line-height: 1.4;
}

.contact-hint {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--dim-2);
	line-height: 1.5;
	margin-top: auto;
}

/* ── Manual Vehicle Entry ────────────────── */

.step-context {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--blue-bright);
	margin-bottom: 4px;
}

.step-question {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--contrast-white);
	margin-bottom: 10px;
	line-height: 1.4;
}

.manual-vehicle-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 16px;
	padding-left: 4px;
}

.manual-field-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.manual-label-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
}

.manual-label-row .info-btn {
	width: 22px;
	height: 22px;
	border-radius: 5px;
}

.manual-label-row .info-btn img {
	width: 12px;
	height: 12px;
}

.manual-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 6px;
	color: var(--off-white);
}

.manual-description {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: var(--dim);
}

.manual-select,
.manual-input {
	background: var(--surface-0);
	border: 1px solid var(--border-mid);
	border-radius: 6px;
	padding: 10px 14px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--off-white);
	width: 100%;
	outline: none;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Remove number spinners */
.manual-input[type="number"]::-webkit-inner-spin-button,
.manual-input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.manual-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.manual-select:focus,
.manual-input:focus {
	border-color: var(--blue);
}

.manual-select option {
	background: var(--surface-2);
}

.manual-submit-btn {
	display: inline-block;
	margin-top: 10px;
	align-self: flex-start;
	background: var(--blue-fill);
	border: 1px solid var(--blue);
	border-radius: 6px;
	padding: 8px 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue-bright);
	cursor: pointer;
	transition: all 0.15s ease;
}

.manual-submit-btn:hover {
	background: rgba(62, 136, 166, 0.25);
	color: var(--off-white);
}

/* ── Vehicle card two-column layout ──────── */

.vehicle-card-layout {
	display: flex;
	flex: 1;
	min-height: 0;
	height: 100%;
	overflow-y: auto;
	align-items: stretch;
}

.vehicle-form-col {
	flex: 1;
	min-width: 0;
	padding-right: 24px;
}

.vehicle-list-col {
	width: 280px;
	flex-shrink: 0;
	border-left: 1px solid var(--border);
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.vehicle-list-header {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--off-white);
	margin-bottom: 10px;
}

.vehicle-list-empty {
	font-size: 12px;
	color: var(--dim-2);
	font-style: italic;
}

.manual-field-desc {
	font-size: 11px;
	color: var(--dim);
	line-height: 1.45;
	margin-top: -2px;
}

/* ── Saved Vehicle List ───────────────────── */

.vehicle-entry-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
	padding-right: 6px;
}

.vehicle-entry {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 8px 12px;
	background: var(--surface-0);
	border: 1px solid var(--border);
	border-radius: 6px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.vehicle-entry:hover {
	border-color: var(--blue);
	background: var(--blue-glow);
}

.vehicle-entry-badge {
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue-bright);
	background: var(--blue-fill);
	border: 1px solid var(--blue);
	border-radius: 4px;
	padding: 2px 7px;
	align-self: flex-start;
}

.vehicle-entry-details {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.vehicle-entry-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--off-white);
}

.vehicle-entry-row {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: var(--dim);
	line-height: 1.4;
}


/* ── Info button & panel ─────────────────── */

.step-btn-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.step-btn-row .step-btn {
	flex: 1;
	min-width: 0;
}

.info-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	flex-shrink: 0;
	background: var(--surface-0);
	border: 1px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.info-btn img {
	filter: brightness(0) invert(1);
	opacity: 0.3;
	transition: opacity 0.15s ease;
}

.info-btn:hover {
	border-color: var(--blue);
	background: var(--blue-glow);
}

.info-btn:hover img {
	opacity: 0.8;
}

/* Active state: matched via :has() on the info panel's data-topic */
.main:has(#info-panel [data-topic="for-hire-carrier"]) .info-btn[data-topic="for-hire-carrier"],
.main:has(#info-panel [data-topic="exempt-for-hire"]) .info-btn[data-topic="exempt-for-hire"],
.main:has(#info-panel [data-topic="private-property"]) .info-btn[data-topic="private-property"],
.main:has(#info-panel [data-topic="interstate"]) .info-btn[data-topic="interstate"],
.main:has(#info-panel [data-topic="intrastate-non-hm"]) .info-btn[data-topic="intrastate-non-hm"],
.main:has(#info-panel [data-topic="intrastate-hm"]) .info-btn[data-topic="intrastate-hm"],
.main:has(#info-panel [data-topic="general-freight"]) .info-btn[data-topic="general-freight"],
.main:has(#info-panel [data-topic="non-bulk-hazmat"]) .info-btn[data-topic="non-bulk-hazmat"],
.main:has(#info-panel [data-topic="bulk-hazmat"]) .info-btn[data-topic="bulk-hazmat"],
.main:has(#info-panel [data-topic="household-goods"]) .info-btn[data-topic="household-goods"],
.main:has(#info-panel [data-topic="exempt-goods"]) .info-btn[data-topic="exempt-goods"],
.main:has(#info-panel [data-topic="passengers"]) .info-btn[data-topic="passengers"],
.main:has(#info-panel [data-topic="vehicle-ownership"]) .info-btn[data-topic="vehicle-ownership"],
.main:has(#info-panel [data-topic="vehicle-operation"]) .info-btn[data-topic="vehicle-operation"],
.main:has(#info-panel [data-topic="vehicle-class"]) .info-btn[data-topic="vehicle-class"],
.main:has(#info-panel [data-topic="vehicle-capacity"]) .info-btn[data-topic="vehicle-capacity"],
.main:has(#info-panel [data-topic="driver-type"]) .info-btn[data-topic="driver-type"],
.main:has(#info-panel [data-topic="driver-class"]) .info-btn[data-topic="driver-class"],
.main:has(#info-panel [data-topic="driver-med-card"]) .info-btn[data-topic="driver-med-card"],
.main:has(#info-panel [data-topic="driver-operation"]) .info-btn[data-topic="driver-operation"] {
	border-color: var(--blue);
	background: var(--blue-fill);
}

.main:has(#info-panel [data-topic="for-hire-carrier"]) .info-btn[data-topic="for-hire-carrier"] img,
.main:has(#info-panel [data-topic="exempt-for-hire"]) .info-btn[data-topic="exempt-for-hire"] img,
.main:has(#info-panel [data-topic="private-property"]) .info-btn[data-topic="private-property"] img,
.main:has(#info-panel [data-topic="interstate"]) .info-btn[data-topic="interstate"] img,
.main:has(#info-panel [data-topic="intrastate-non-hm"]) .info-btn[data-topic="intrastate-non-hm"] img,
.main:has(#info-panel [data-topic="intrastate-hm"]) .info-btn[data-topic="intrastate-hm"] img,
.main:has(#info-panel [data-topic="general-freight"]) .info-btn[data-topic="general-freight"] img,
.main:has(#info-panel [data-topic="non-bulk-hazmat"]) .info-btn[data-topic="non-bulk-hazmat"] img,
.main:has(#info-panel [data-topic="bulk-hazmat"]) .info-btn[data-topic="bulk-hazmat"] img,
.main:has(#info-panel [data-topic="household-goods"]) .info-btn[data-topic="household-goods"] img,
.main:has(#info-panel [data-topic="exempt-goods"]) .info-btn[data-topic="exempt-goods"] img,
.main:has(#info-panel [data-topic="passengers"]) .info-btn[data-topic="passengers"] img,
.main:has(#info-panel [data-topic="vehicle-ownership"]) .info-btn[data-topic="vehicle-ownership"] img,
.main:has(#info-panel [data-topic="vehicle-operation"]) .info-btn[data-topic="vehicle-operation"] img,
.main:has(#info-panel [data-topic="vehicle-class"]) .info-btn[data-topic="vehicle-class"] img,
.main:has(#info-panel [data-topic="vehicle-capacity"]) .info-btn[data-topic="vehicle-capacity"] img,
.main:has(#info-panel [data-topic="driver-type"]) .info-btn[data-topic="driver-type"] img,
.main:has(#info-panel [data-topic="driver-class"]) .info-btn[data-topic="driver-class"] img,
.main:has(#info-panel [data-topic="driver-med-card"]) .info-btn[data-topic="driver-med-card"] img,
.main:has(#info-panel [data-topic="driver-operation"]) .info-btn[data-topic="driver-operation"] img {
	opacity: 1;
}

.info-panel {
	border-radius: 10px;
	overflow: hidden;
}

.info-panel:empty {
	display: none;
}

.info-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 24px;
	background: var(--surface-1);
	border: 1px solid var(--border-mid);
	border-left: 3px solid var(--blue);
	border-radius: 10px;
	animation: toastIn 0.2s ease-out;
}

.info-header {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue-bright);
}

.info-content p {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--contrast-white);
	line-height: 1.6;
}

/* ── Results ─────────────────────────────── */

.results {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	overflow-y: auto;
}

.results-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.results-section-header {
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blue-bright);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border);
}

.results-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.results-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 16px;
	background: var(--surface-0);
	border: 1px solid var(--border);
	border-left: 3px solid var(--purple);
	border-radius: 0 8px 8px 0;
}

.results-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.results-item-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--off-white);
}

.results-item-cost {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--blue-bright);
	background: var(--blue-fill);
	border: 1px solid rgba(62, 136, 166, 0.25);
	border-radius: 4px;
	padding: 2px 8px;
	flex-shrink: 0;
}

.results-item-qualifier {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: var(--dim);
	line-height: 1.5;
}

.results-empty {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 16px;
	background: var(--surface-0);
	border: 1px solid var(--border);
	border-radius: 8px;
	text-align: center;
}

.results-empty-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--off-white);
}

.results-empty-description {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--dim);
	line-height: 1.6;
	max-width: 500px;
	margin: 0 auto;
}

.results-disclaimer {
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--dim-2);
	line-height: 1.5;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	margin-top: auto;
}

.results-link {
	color: var(--blue);
	text-decoration: none;
}

.results-link:hover {
	color: var(--blue-bright);
	text-decoration: underline;
}

/* ── Sidebar toggle (mobile only) ────────── */

.sidebar-toggle-input {
	display: none;
}

.sidebar-toggle {
	display: none;
}

.sidebar-overlay {
	display: none;
}

.sidebar-close {
	display: none;
}

.sidebar-close img,
.sidebar-toggle img {
	filter: brightness(0) invert(1);
	opacity: 0.6;
}

/* ── Mobile ──────────────────────────────── */

@media (max-width: 768px) {

	/* -- Header -- */
	.page-header {
		padding: 16px 14px 14px;
	}

	.page-header p {
		display: none;
	}

	.page-header h1 {
		font-size: 22px;
	}

	/* -- Summary toggle: icon-only, over card top-right -- */
	.main {
		position: relative;
	}

	.sidebar-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 10;
		width: 32px;
		height: 32px;
		background: var(--surface-2);
		border: 1px solid var(--border-mid);
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.sidebar-toggle:hover {
		border-color: var(--blue);
	}

	/* -- Sidebar: full overlay over .main area -- */
	.app {
		position: relative;
		margin-top: 16px;
	}

	.sidebar {
		position: absolute;
		top: 0;
		left: 12px;
		right: 12px;
		bottom: 0;
		z-index: 100;
		width: auto;
		max-width: none;
		border-radius: 12px;
		border: 1px solid var(--border-mid);
		transform: translateY(-10px);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.2s ease, opacity 0.2s ease;
		overflow-y: auto;
	}

	.sidebar-toggle-input:checked~.app .sidebar {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	/* -- Close button inside sidebar -- */
	.sidebar-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		background: transparent;
		border: 1px solid var(--border-mid);
		border-radius: 6px;
		cursor: pointer;
		position: absolute;
		top: 14px;
		right: 14px;
		transition: all 0.15s ease;
	}

	.sidebar-close:hover {
		border-color: var(--blue);
	}

	/* -- Overlay backdrop -- */
	.sidebar-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
		cursor: pointer;
	}

	/* -- Checkbox-driven open state -- */
	.sidebar-toggle-input:checked~.sidebar-overlay {
		display: block;
	}

	/* -- App layout -- */
	.app {
		padding: 12px 12px 24px;
		gap: 12px;
	}

	/* -- Toast: keep reserved height so it doesn't shift layout -- */
	#toast {
		height: 52px;
		padding: 8px 12px;
	}

	.toast {
		padding: 0 12px;
		font-size: 11px;
	}

	/* -- Card: fixed height with internal scroll -- */
	.card {
		padding: 20px 16px;
		height: 480px;
	}

	/* -- Step buttons: let them grow to fit wrapped text --
	   overflow must be unset because overflow:hidden on a flex item
	   makes min-height:auto resolve to 0 instead of content-based */
	.step-btn {
		overflow: unset;
		min-height: auto;
	}

	/* -- Step header -- */
	.step-header {
		font-size: 16px;
	}

	/* -- Nav buttons -- */
	.nav-btn {
		height: 36px;
		padding: 0 14px;
		font-size: 10px;
	}

	/* -- Vehicle/Driver two-column → stacked, layout scrolls -- */
	.vehicle-card-layout {
		flex-direction: column;
	}

	.vehicle-form-col {
		padding-right: 0;
	}

	.vehicle-list-col {
		width: 100%;
		border-left: none;
		border-top: 1px solid var(--border);
		padding-left: 0;
		padding-top: 14px;
		margin-top: 14px;
	}

	/* -- State grid -- */
	.state-grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}

	/* -- Landing -- */
	.landing-title {
		font-size: 22px;
	}

	.landing-label {
		font-size: 17px;
	}

	.landing-description {
		font-size: 13px;
	}

	.landing-logo {
		width: 60px;
		height: 60px;
	}

	/* -- Info panel -- */
	.info-content {
		padding: 16px 18px;
	}

	/* -- Results -- */
	.results-item-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}