/* ============================================================
   Subsidy Opportunity Scanner, visual layer.
   Builds on site.css. Page-specific components only.
   ============================================================ */

.ms-scanner-page {
    padding: clamp(48px, 7vw, 96px) 0;
    min-height: 60vh;
}

.ms-scanner-shell {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ms-scanner-intro-head {
    text-align: center;
    margin-bottom: 28px;
    padding: 0 12px;
}
.ms-scanner-intro-head h1 {
    font-family: var(--ms-font-serif);
    color: var(--ms-text);
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    margin: 8px 0 12px;
}
.ms-scanner-intro-head .ms-subtitle {
    color: var(--ms-text-soft);
    font-size: 15px;
    margin: 0 auto;
    max-width: 56ch;
}

.ms-card {
    background: linear-gradient(180deg, var(--ms-bg-card), var(--ms-bg-soft));
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-lg);
    box-shadow: var(--ms-shadow);
    padding: clamp(28px, 5vw, 44px);
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

/* --- Intro --- */
.ms-intro { text-align: center; }
.ms-intro h1 {
    font-family: var(--ms-font-serif);
    color: var(--ms-text);
    margin-bottom: 18px;
}
.ms-intro h1 .ms-em {
    font-style: italic;
    color: var(--ms-gold);
    font-weight: 400;
}
.ms-subtitle {
    color: var(--ms-text-soft);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    margin: 0 auto 18px;
    max-width: 52ch;
}
.ms-time-estimate {
    color: var(--ms-gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    margin: 0 0 26px;
    text-transform: uppercase;
}
.ms-disclaimer-small {
    color: var(--ms-text-muted);
    font-size: 12px;
    margin-top: 18px;
}

/* --- Progress --- */
.ms-progress { margin-bottom: 28px; }
.ms-progress-bar {
    height: 5px;
    background: var(--ms-bg-elevated);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.ms-progress-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--ms-gold-soft), var(--ms-gold-bright));
    width: 0;
    transition: width .35s ease;
    box-shadow: 0 0 12px rgba(201, 160, 99, .4);
}
.ms-progress-text {
    font-size: 12px;
    color: var(--ms-text-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

/* --- Step legends --- */
.ms-step { border: none; padding: 0; margin: 0 0 14px; }
.ms-step legend {
    font-family: var(--ms-font-serif);
    font-weight: 500;
    color: var(--ms-text);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    margin-bottom: 8px;
    padding: 0;
    line-height: 1.25;
}
.ms-help {
    color: var(--ms-text-soft);
    font-size: 14px;
    margin: 0 0 22px;
}

/* --- Options (radio + checkbox cards) --- */
.ms-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 540px) {
    .ms-options { grid-template-columns: 1fr 1fr; }
}

.ms-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    cursor: pointer;
    background: var(--ms-bg-card);
    color: var(--ms-text);
    transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
    min-height: 56px;
    font-size: 15px;
    user-select: none;
}
.ms-option:hover {
    border-color: var(--ms-gold-soft);
    background: var(--ms-bg-elevated);
}
.ms-option input {
    accent-color: var(--ms-gold);
    transform: scale(1.2);
    flex-shrink: 0;
}
.ms-option:has(input:checked) {
    border-color: var(--ms-gold);
    background: var(--ms-gold-faint);
    box-shadow: 0 0 0 2px rgba(201, 160, 99, .25);
}
.ms-option:has(input:checked) span { color: var(--ms-gold-bright); }

.ms-conditional { margin-top: 16px; }
.ms-conditional label {
    display: block;
    font-size: 14px;
    color: var(--ms-text-soft);
    margin-bottom: 8px;
}

/* --- Lead form fields --- */
.ms-field { margin-bottom: 16px; }
.ms-field label {
    display: block;
    font-size: 14px;
    color: var(--ms-text);
    margin-bottom: 8px;
    font-weight: 500;
}
.ms-field label small {
    color: var(--ms-text-muted);
    font-weight: 400;
    margin-left: 4px;
}
.ms-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    font-size: 14px;
    color: var(--ms-text-soft);
    cursor: pointer;
    line-height: 1.5;
}
.ms-check input {
    margin-top: 3px;
    transform: scale(1.2);
    accent-color: var(--ms-gold);
    flex-shrink: 0;
}

.ms-privacy {
    background: var(--ms-bg-elevated);
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--ms-border-soft);
    color: var(--ms-text-soft);
    font-size: 13px;
    margin-top: 16px;
}

/* --- Actions row --- */
.ms-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ms-actions .ms-btn:first-child:not(:only-child) { margin-right: auto; }

.ms-error {
    background: rgba(217, 122, 122, .12);
    border: 1px solid rgba(217, 122, 122, .35);
    color: var(--ms-error);
    padding: 12px 16px;
    border-radius: 10px;
    margin: 18px 0 0;
    font-size: 14px;
}

/* --- Loading --- */
.ms-loading {
    text-align: center;
    padding: 56px 28px;
}
.ms-loading p { color: var(--ms-text-soft); }
.ms-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid var(--ms-border);
    border-top-color: var(--ms-gold);
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: ms-spin 1s linear infinite;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* --- Result --- */
.ms-result h1 {
    font-family: var(--ms-font-serif);
    color: var(--ms-text);
    margin-top: 0;
}
.ms-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--ms-gold-faint);
    color: var(--ms-gold);
    border: 1px solid rgba(201, 160, 99, .35);
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ms-result-badge[data-cat="strong"] {
    background: rgba(127, 181, 131, .12);
    border-color: rgba(127, 181, 131, .35);
    color: var(--ms-success);
}
.ms-result-badge[data-cat="promising"] {
    background: rgba(212, 161, 85, .15);
    border-color: rgba(212, 161, 85, .4);
    color: var(--ms-warning);
}
.ms-result-badge[data-cat="orienting"] {
    background: rgba(184, 176, 156, .1);
    border-color: rgba(184, 176, 156, .25);
    color: var(--ms-text-soft);
}

.ms-result-cat-text {
    color: var(--ms-text-soft);
    margin-top: 0;
    font-size: 16px;
}

.ms-result h3 {
    margin: 28px 0 8px;
    color: var(--ms-gold);
    font-size: 14px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-family: var(--ms-font-sans);
    font-weight: 600;
}
.ms-result ul {
    padding-left: 20px;
    margin: 0;
    color: var(--ms-text);
}
.ms-result ul li {
    margin-bottom: 8px;
    color: var(--ms-text-soft);
}
.ms-result ul li::marker { color: var(--ms-gold); }
.ms-result p { color: var(--ms-text-soft); }

.ms-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 8px;
}

/* --- Honeypot --- */
.ms-hp {
    position: absolute !important;
    left: -9999px !important;
    height: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
}

@media (max-width: 480px) {
    .ms-actions { flex-direction: column; }
    .ms-actions .ms-btn { width: 100%; }
    .ms-actions .ms-btn:first-child:not(:only-child) { margin-right: 0; order: 2; }
}