/*
 * Help Me Choose (Build 007 Gates 5-7). Scoped to templates/help-me-choose.php.
 */

.er-advisor-hero {
    background: radial-gradient(ellipse 120% 90% at 50% -10%, var(--er-graphite-400) 0%, var(--er-carbon-800) 55%, var(--er-carbon-900) 100%);
}

.er-advisor-progress {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--er-text-faint);
    margin-bottom: var(--er-space-5);
}

.er-advisor-step legend {
    font-family: var(--er-font-display);
    font-size: var(--er-text-2xl);
    font-weight: 700;
    color: var(--er-text);
    margin-bottom: var(--er-space-5);
    padding: 0;
}

.er-advisor-optional {
    font-family: var(--er-font-body);
    font-size: var(--er-text-sm);
    font-weight: 400;
    color: var(--er-text-faint);
}

.er-advisor-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--er-space-3);
    margin-bottom: var(--er-space-6);
}

.er-advisor-option {
    display: flex;
    align-items: center;
    gap: var(--er-space-3);
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-md);
    padding: var(--er-space-4);
    cursor: pointer;
    transition: border-color var(--er-motion-fast) var(--er-ease-standard);
}

.er-advisor-option:hover {
    border-color: var(--er-border-strong);
}

.er-advisor-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--er-accent-strong);
    flex-shrink: 0;
}

.er-advisor-option:has(input:checked) {
    border-color: var(--er-accent-strong);
    background: var(--er-bg-panel);
    box-shadow: 0 0 0 1px var(--er-accent-strong);
}

.er-advisor-option:has(input:checked) span {
    font-weight: 700;
    color: var(--er-text);
}

.er-advisor-option:has(input:focus-visible) {
    outline: 2px solid var(--er-accent-strong);
    outline-offset: 2px;
}

.er-advisor-nav {
    display: flex;
    gap: var(--er-space-4);
    flex-wrap: wrap;
    padding-bottom: var(--er-space-8);
    border-bottom: 1px solid var(--er-border);
    margin-bottom: var(--er-space-6);
}

.er-advisor-step:last-of-type .er-advisor-nav {
    border-bottom: none;
    margin-bottom: 0;
}

/* ---- Results ---- */

.er-advisor-result,
.er-advisor-alternative {
    max-width: 720px;
}

.er-advisor-result ul,
.er-advisor-alternative ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--er-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--er-space-2);
}

.er-advisor-result li,
.er-advisor-alternative li {
    padding-left: var(--er-space-5);
    position: relative;
    font-size: var(--er-text-sm);
    color: var(--er-text-dim);
}

.er-advisor-result li::before,
.er-advisor-alternative li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--er-accent-strong);
}

.er-advisor-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--er-space-4);
    padding: var(--er-space-5);
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-md);
    margin-bottom: var(--er-space-5);
}

.er-advisor-specs div {
    display: flex;
    flex-direction: column;
    gap: var(--er-space-1);
}

.er-advisor-specs span {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--er-text-faint);
}

.er-advisor-specs strong {
    font-size: var(--er-text-sm);
    color: var(--er-text);
    font-weight: 600;
}

.er-advisor-alternative {
    margin-top: var(--er-space-8);
    padding-top: var(--er-space-8);
    border-top: 1px solid var(--er-border);
}

.er-advisor-actions {
    display: flex;
    gap: var(--er-space-4);
    margin-top: var(--er-space-8);
}