/*
 * Distil — Route Picker styles.
 * v1.3.2: Hardened against theme CSS variable contamination.
 *         Explicit font and colour declarations — no reliance on --ss-* vars.
 */

/* ── Scoped reset: nothing inside .dt-picker inherits monospace/theme fonts ── */

.dt-picker,
.dt-picker *,
.dt-picker *::before,
.dt-picker *::after {
	box-sizing: border-box;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ── Component tokens — explicit values only, no --ss-* fallbacks ─────────── */

.dt-picker {
	--dt-accent:  #1A8F8A;
	--dt-text:    #1a1a1a;
	--dt-muted:   #5f6368;
	--dt-border:  #d0d5dd;
	--dt-surface: #f8f8f7;
	--dt-bg:      #ffffff;
	--dt-radius:  8px;

	background:    var(--dt-surface);
	color:         var(--dt-text);
	border:        1px solid var(--dt-border);
	border-radius: var(--dt-radius);
	padding:       2rem;
	max-width:     680px;
	margin:        2rem auto;
}

@media (prefers-color-scheme: dark) {
	.dt-picker {
		--dt-text:    #f0f0ef;
		--dt-muted:   #9aa0a8;
		--dt-border:  #3c4049;
		--dt-surface: #202124;
		--dt-bg:      #2d2f31;
	}
}

/* ── Title ──────────────────────────────────────────────────────────────────── */

.dt-picker-title {
	font-size:   1.2rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin:      0 0 1.5rem !important;
	color:       var(--dt-text) !important;
}

/* ── Progress dots ──────────────────────────────────────────────────────────── */

.dt-progress {
	display:       flex;
	gap:           6px;
	margin-bottom: 1.5rem;
	padding:       0;
	list-style:    none;
}

.dt-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--dt-border);
	flex-shrink:   0;
	transition:    background 0.2s;
}

.dt-dot.is-active { background: var(--dt-accent); }
.dt-dot.is-done   { background: color-mix(in srgb, var(--dt-accent) 50%, transparent); }

/* ── Question text ──────────────────────────────────────────────────────────── */

.dt-question-text {
	font-size:   1rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	margin:      0 0 1rem !important;
	color:       var(--dt-text) !important;
}

/* ── Option list ────────────────────────────────────────────────────────────── */

.dt-options {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}

.dt-options li { margin: 0; padding: 0; }

/* ── Option button — full reset then explicit styles ────────────────────────── */

.dt-option-btn {
	all:               unset;
	display:           block !important;
	box-sizing:        border-box !important;
	width:             100% !important;
	text-align:        left !important;
	padding:           0.75rem 1rem !important;
	background:        var(--dt-bg) !important;
	border:            1.5px solid var(--dt-border) !important;
	border-radius:     calc(var(--dt-radius) - 2px) !important;
	cursor:            pointer !important;
	font-size:         0.95rem !important;
	font-weight:       500 !important;
	line-height:       1.4 !important;
	color:             var(--dt-text) !important;
	transition:        border-color 0.15s ease, background 0.15s ease;
}

.dt-option-btn:hover,
.dt-option-btn:focus {
	border-color: var(--dt-accent) !important;
	background:   color-mix(in srgb, var(--dt-accent) 8%, var(--dt-bg)) !important;
	outline:      none !important;
}

.dt-option-btn:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt-accent) 30%, transparent) !important;
}

/* ── Result card ────────────────────────────────────────────────────────────── */

.dt-result { animation: dtFadeIn 0.3s ease; }

@keyframes dtFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dt-result-eyebrow {
	font-size:      0.72rem !important;
	font-weight:    700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--dt-accent) !important;
	margin-bottom:  0.4rem !important;
}

.dt-result-name {
	font-size:   1.15rem !important;
	font-weight: 700 !important;
	margin:      0 0 0.3rem !important;
	color:       var(--dt-text) !important;
}

.dt-result-tagline {
	font-size:     0.9rem !important;
	color:         var(--dt-muted) !important;
	margin-bottom: 1.25rem !important;
	line-height:   1.5 !important;
}

.dt-result-meta {
	font-size:     0.78rem !important;
	color:         var(--dt-muted) !important;
	margin-bottom: 1.25rem !important;
}

/* ── Stop list ──────────────────────────────────────────────────────────────── */

.dt-stops-list {
	list-style:   none !important;
	margin:       0 0 1.5rem !important;
	padding:      0 !important;
	counter-reset: dt-stop;
}

.dt-stop-item {
	counter-increment: dt-stop;
	display:       flex;
	align-items:   flex-start;
	gap:           12px;
	padding:       0.75rem 0;
	border-bottom: 1px solid var(--dt-border);
}

.dt-stop-item:last-child { border-bottom: none; }

.dt-stop-num {
	flex-shrink:     0;
	width:           24px;
	height:          24px;
	border-radius:   50%;
	background:      var(--dt-accent);
	color:           #fff !important;
	font-size:       0.7rem !important;
	font-weight:     700 !important;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-top:      2px;
}

.dt-stop-body {
	display:        flex;
	flex-direction: column;
	gap:            3px;
	flex:           1;
	min-width:      0;
}

.dt-stop-link {
	font-size:       0.95rem !important;
	font-weight:     600 !important;
	color:           var(--dt-accent) !important;
	text-decoration: none !important;
	line-height:     1.3 !important;
}

.dt-stop-link:hover { text-decoration: underline !important; }

.dt-stop-title {
	font-size:   0.95rem !important;
	font-weight: 600 !important;
	color:       var(--dt-text) !important;
	line-height: 1.3 !important;
}

.dt-stop-excerpt {
	font-size:   0.82rem !important;
	color:       var(--dt-muted) !important;
	line-height: 1.45 !important;
}

/* ── Restart button ─────────────────────────────────────────────────────────── */

.dt-restart-btn {
	all:           unset;
	display:       inline-block !important;
	box-sizing:    border-box !important;
	background:    transparent !important;
	border:        1px solid var(--dt-border) !important;
	border-radius: var(--dt-radius) !important;
	color:         var(--dt-muted) !important;
	cursor:        pointer !important;
	font-size:     0.82rem !important;
	padding:       0.4rem 0.9rem !important;
	transition:    border-color 0.15s, color 0.15s;
}

.dt-restart-btn:hover,
.dt-restart-btn:focus {
	border-color: var(--dt-accent) !important;
	color:        var(--dt-accent) !important;
	outline:      none !important;
}