/* =============================================
   Survey Overrides — DS-011 bridge layer
   Maps legacy survey tokens → uniek.css brand tokens.
   Remove this file when Stap 6 (token rename) is done.
   ============================================= */

:root {
    /* --- Legacy surface aliases --- */
    --bg:      var(--brand-bg);
    --bg-alt:  var(--brand-surface);

    /* --- Legacy text aliases --- */
    --text:       var(--brand-text);
    --text-muted: var(--brand-text-muted);
    --text-light: var(--brand-text-faint);

    /* --- Legacy border alias --- */
    --border: var(--brand-border);

    /* --- Legacy font alias --- */
    --font-sans: var(--brand-font);
    --font-mono: var(--brand-font-mono);

    /* --- Legacy primary scale (mapped to brand-primary) --- */
    --primary-50:  rgba(170, 202, 56, 0.08);
    --primary-100: rgba(170, 202, 56, 0.15);
    --primary-200: rgba(170, 202, 56, 0.28);
    --primary-300: rgba(170, 202, 56, 0.50);
    --primary-400: rgba(170, 202, 56, 0.72);
    --primary-500: var(--brand-primary);        /* #AACA38 */
    --primary-600: var(--brand-primary-strong); /* #8BA22D */
    --primary-700: #6D7E23;

    /* --- Legacy gray scale (dark-mode approximations) --- */
    --gray-50:  #2A2A3E;   /* ≈ brand-surface */
    --gray-100: #313148;
    --gray-200: var(--brand-border);
    --gray-300: var(--brand-border-strong);
    --gray-400: var(--brand-text-faint);
    --gray-500: var(--brand-text-muted);
    --gray-600: #AEAEC0;
    --gray-700: #C8C8D8;
    --gray-800: var(--brand-text);

    /* --- Legacy semantic aliases --- */
    --success:       var(--brand-success);
    --success-light: var(--brand-success-soft);
    --danger:        var(--brand-danger);
    --danger-light:  var(--brand-danger-soft);
    --warning:       var(--brand-warning);
    --warning-light: var(--brand-warning-soft);
    --info:          var(--brand-info);
    --info-light:    var(--brand-info-soft);

    /* --- Legacy radius alias --- */
    --radius-full: var(--radius-pill);

    /* --- Legacy transition alias (was 150ms, now 180ms) --- */
    /* --transition is already defined in uniek.css */
}

/* ── Survey header app-nav (center zone) ─────────────────────────────── */
.survey-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.survey-nav-link {
    color: var(--brand-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.survey-nav-link:hover {
    background: var(--brand-surface);
    color: var(--brand-text);
    text-decoration: none;
}
.survey-nav-link--active {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-weight: 600;
}

/* Mobile: nav panel shows links stacked */
@media (max-width: 639px) {
    .survey-nav-links {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 2px;
    }
    .survey-nav-link {
        width: 100%;
        padding: 10px 4px;
        font-size: var(--text-base);
        border-radius: 0;
        border-bottom: 1px solid var(--brand-border);
    }
    .survey-nav-link:last-child { border-bottom: none; }
}


/* ── Survey hamburger nav (center zone) — added 2026-07-13 ────────────── */
.survey-hamburger {
    position: relative;
    display: flex;
    align-items: center;
}

.survey-hamburger__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--brand-text);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.survey-hamburger__btn:hover {
    background: var(--brand-surface);
}
.survey-hamburger__icon {
    font-size: 1.1em;
    line-height: 1;
}
.survey-hamburger__label {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-primary);
}

/* Dropdown */
.survey-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: var(--brand-bg, #1C1C2E);
    border: 1px solid var(--brand-border, #3A3A5C);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 200;
}
.survey-nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm, 4px);
    color: var(--brand-text-muted, #9090A8);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}
.survey-nav-dropdown__item:hover {
    background: var(--brand-surface, #2A2A3E);
    color: var(--brand-text, #F0EDE8);
    text-decoration: none;
}
.survey-nav-dropdown__item--active {
    background: var(--brand-primary-soft, rgba(170,202,56,.15));
    color: var(--brand-primary, #AACA38);
    font-weight: 600;
}
.survey-nav-dropdown__icon {
    font-size: 1em;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Mobile: full width dropdown */
@media (max-width: 639px) {
    .survey-nav-dropdown {
        left: 0;
        transform: none;
        right: 0;
        width: calc(100vw - 2rem);
        min-width: unset;
    }
}