/* ============================================================
   LOHKI — Intake Layout + Step 0 Plan Selection
   il- prefix: intake layout  |  s0- prefix: step 0 specific
   Requires: global.css
   ============================================================ */

/* ── Material Symbols ────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Prevent horizontal overflow at the html level — critical for mobile.
   overflow-x on body alone does not reliably confine position:fixed. */
html { overflow-x: hidden; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes il-fade-in {
    /* No transform — a transform on il-main would break position:fixed children */
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes s0-card-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Layout body + shell ─────────────────────────────────── */
.il-body {
    background:  #0e0e0e;
    color:       #ffffff;
    font-family: var(--font-body);
    min-height:  100vh;
    margin:      0;
    padding:     0;
    overflow-x:  hidden;
}

.il-shell {
    display:    flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.il-sidebar {
    position:       fixed;
    left:           0;
    top:            0;
    height:         100vh;
    width:          18rem;
    background:     #000000;
    display:        flex;
    flex-direction: column;
    border-right:   1px solid rgba(72,72,71,0.2);
    z-index:        40;
    overflow-y:     auto;
    padding:        2rem 0 1.5rem;
}

.il-sidebar-top {
    padding:       0 2rem;
    margin-bottom: 2.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0.875rem;
}

.il-logo {
    display:         block;
    font-family:     var(--font-display);
    font-size:       1.5rem;
    font-weight:     800;
    letter-spacing:  -0.04em;
    color:           #caff6f;
    text-decoration: none;
    line-height:     1;
}

.il-sidebar-phase-label {
    font-family:    var(--font-display);
    font-size:      0.8125rem;
    font-weight:    700;
    color:          #caff6f;
    margin-bottom:  0.2rem;
}

.il-sidebar-phase-sub {
    font-size:      0.625rem;
    color:          #767575;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Step navigation ─────────────────────────────────────── */
.il-step-nav {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        0 1rem;
    gap:            2px;
}

.il-step-item {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.75rem 1rem;
    font-family:   var(--font-display);
    font-size:     0.875rem;
    font-weight:   600;
    color:         rgba(212,212,216,0.35);
    border-radius: 9999px;
    transition:    background 0.2s ease, color 0.2s ease;
    cursor:        default;
    user-select:   none;
}

.il-step-item--active {
    background:  #caff6f;
    color:       #0e0e0e;
    font-weight: 700;
}

.il-step-item--done {
    color: rgba(202,255,111,0.45);
}

.il-step-icon {
    font-size:   1.125rem !important;
    flex-shrink: 0;
}

.il-step-label { flex: 1; }

.il-step-check {
    font-size: 1rem !important;
    color:     #caff6f;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ── Sidebar bottom ──────────────────────────────────────── */
.il-sidebar-bottom {
    margin-top:  auto;
    padding:     1.5rem 1.5rem 0;
    border-top:  1px solid rgba(72,72,71,0.2);
    display:     flex;
    flex-direction: column;
    gap:         1rem;
}

.il-dashboard-link {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    font-family:     var(--font-display);
    font-size:       0.6875rem;
    font-weight:     700;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    color:           #767575;
    text-decoration: none;
    padding:         0.5rem 0.75rem;
    border-radius:   9999px;
    transition:      color 0.2s ease, background 0.2s ease;
}
.il-dashboard-link:hover {
    color:      #caff6f;
    background: rgba(202,255,111,0.07);
}
.il-dashboard-link .material-symbols-outlined { font-size: 1rem !important; }

.il-sidebar-user {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.il-sidebar-avatar {
    width:           2rem;
    height:          2rem;
    border-radius:   50%;
    background:      #262626;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-display);
    font-size:       0.75rem;
    font-weight:     700;
    color:           #d4d4d8;
    flex-shrink:     0;
}

.il-sidebar-user-name {
    font-family:   var(--font-display);
    font-size:     0.8125rem;
    font-weight:   700;
    color:         #d4d4d8;
    margin-bottom: 0.125rem;
}

.il-sidebar-user-role {
    font-size:      0.5625rem;
    color:          #767575;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Main content area ───────────────────────────────────── */
.il-main {
    margin-left: 18rem;
    flex:        1;
    min-height:  100vh;
    min-width:   0;
    overflow-x:  hidden;
    background:  #0e0e0e;
    padding:     4rem 4rem 9rem;
    animation:   il-fade-in 0.4s ease;
    position:    relative;
    z-index:     1;
}

/* ── Flash messages ──────────────────────────────────────── */
.il-flash {
    padding:       0.875rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size:     0.875rem;
    border-radius: 2px;
}
.il-flash--error {
    background: rgba(180,18,18,0.1);
    border:     1px solid rgba(255,115,81,0.25);
    color:      #ff7351;
}
.il-flash--success {
    background: rgba(202,255,111,0.07);
    border:     1px solid rgba(202,255,111,0.2);
    color:      #caff6f;
}

/* ============================================================
   STEP 0 — Plan Selection  (s0- prefix)
   ============================================================ */

/* ── Page header ─────────────────────────────────────────── */
.s0-header { margin-bottom: 3.5rem; }

.s0-title {
    font-family:    var(--font-display);
    font-size:      clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight:    800;
    color:          #ffffff;
    letter-spacing: -0.045em;
    line-height:    1;
    margin:         0 0 1rem;
}

.s0-subtitle {
    font-size:   1rem;
    color:       #767575;
    line-height: 1.65;
    max-width:   38rem;
    margin:      0;
}
.s0-subtitle a {
    color:           #caff6f;
    text-decoration: none;
    font-weight:     600;
}
.s0-subtitle a:hover { text-decoration: underline; }

/* ── Resume hint ─────────────────────────────────────────── */
.s0-resume-hint {
    display:        flex;
    align-items:    center;
    gap:            0.625rem;
    font-size:      0.8125rem;
    color:          rgba(255,255,255,0.38);
    background:     rgba(202,255,111,0.03);
    border:         1px solid rgba(202,255,111,0.1);
    border-radius:  8px;
    padding:        0.75rem 1.125rem;
    margin-bottom:  2rem;
    line-height:    1.5;
}
.s0-resume-hint svg { flex-shrink: 0; color: rgba(202,255,111,0.45); }

.s0-draft-icon {
    width:           2.5rem;
    height:          2.5rem;
    border-radius:   50%;
    background:      rgba(202,255,111,0.08);
    border:          1px solid rgba(202,255,111,0.18);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           #caff6f;
}

.s0-draft-body { flex: 1; min-width: 0; }

.s0-draft-title {
    font-family:    var(--font-display);
    font-size:      0.9375rem;
    font-weight:    700;
    color:          #ffffff;
    letter-spacing: -0.01em;
    margin-bottom:  0.3rem;
}

.s0-draft-sub {
    font-size:   0.8125rem;
    color:       #767575;
    line-height: 1.55;
}
.s0-draft-sub strong { color: #d4d4d8; font-weight: 600; }

.s0-draft-actions {
    display:     flex;
    gap:         0.75rem;
    align-items: center;
    flex-shrink: 0;
    flex-wrap:   wrap;
}

/* ── Category tabs ───────────────────────────────────────── */
.s0-tabs {
    display:       flex;
    gap:           3px;
    margin-bottom: 2.5rem;
    background:    #131313;
    border:        1px solid rgba(72,72,71,0.3);
    padding:       4px;
    border-radius: 9999px;
    width:         fit-content;
}

.s0-tab {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    padding:        0.5rem 1.25rem;
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #767575;
    background:     transparent;
    border:         none;
    border-radius:  9999px;
    cursor:         pointer;
    transition:     color 0.2s ease, background 0.2s ease;
}
.s0-tab:hover { color: #d4d4d8; }
.s0-tab--active { background: #caff6f; color: #0e0e0e; }
.s0-tab--active:hover { color: #0e0e0e; }

.s0-tab-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Tab panels ──────────────────────────────────────────── */
.s0-panel        { display: none; }
.s0-panel--active { display: block; }

/* ── Card grid ───────────────────────────────────────────── */
.s0-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   1.5rem;
    align-items:           start;
}

/* ── Plan card ───────────────────────────────────────────── */
.s0-card {
    position:       relative;
    background:     #000000;
    border:         1px solid rgba(72,72,71,0.3);
    padding:        2rem;
    display:        flex;
    flex-direction: column;
    cursor:         pointer;
    transition:     background 0.25s ease, border-color 0.25s ease;
    animation:      s0-card-in 0.45s ease both;
}
.s0-card:nth-child(2) { animation-delay: 0.06s; }
.s0-card:nth-child(3) { animation-delay: 0.12s; }
.s0-card:nth-child(4) { animation-delay: 0.18s; }

.s0-card:hover:not(.s0-card--custom):not(.s0-card--selected) {
    background:   #1a1919;
    border-color: rgba(202,255,111,0.2);
}
.s0-card--selected {
    background:   rgba(202,255,111,0.04);
    border-color: #caff6f;
}

/* Featured (recommended) card */
.s0-card--featured {
    background:       #131313;
    border-color:     rgba(202,255,111,0.25);
    transform:        scale(1.025);
    transform-origin: center top;
    box-shadow:       0 0 60px rgba(202,255,111,0.04), 0 24px 48px rgba(0,0,0,0.4);
    z-index:          1;
}
.s0-card--featured:hover:not(.s0-card--selected) {
    background:   #1a1919;
    border-color: rgba(202,255,111,0.45);
}
.s0-card--featured.s0-card--selected {
    border-color: #caff6f;
}

/* Custom quote card */
.s0-card--custom {
    cursor:       default;
    background:   rgba(72,72,71,0.07);
}
.s0-card--custom:hover {
    background:   rgba(72,72,71,0.12);
    border-color: rgba(72,72,71,0.4);
}

/* Recommended badge (floats above card) */
.s0-recommended-badge {
    position:       absolute;
    top:            -0.9375rem;
    left:           50%;
    transform:      translateX(-50%);
    background:     #caff6f;
    color:          #0e0e0e;
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding:        0.3rem 0.875rem;
    border-radius:  9999px;
    white-space:    nowrap;
}

/* Selected indicator badge */
.s0-selected-indicator {
    position:       absolute;
    top:            1rem;
    right:          1rem;
    background:     rgba(202,255,111,0.12);
    color:          #caff6f;
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:        0.25rem 0.625rem;
    border-radius:  9999px;
    border:         1px solid rgba(202,255,111,0.22);
}

/* ── Card internals ──────────────────────────────────────── */
.s0-card-top {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    margin-bottom:  1.75rem;
}

.s0-card-eyebrow {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          #caff6f;
}
.s0-card-eyebrow--muted { color: #767575; }

.s0-card-name {
    font-family:    var(--font-display);
    font-size:      2rem;
    font-weight:    800;
    color:          #ffffff;
    letter-spacing: -0.04em;
    line-height:    1;
    margin-top:     0.25rem;
}

.s0-card-price {
    display:     flex;
    align-items: baseline;
    gap:         0.375rem;
    margin-top:  0.5rem;
}

.s0-card-price-amount {
    font-family:    var(--font-display);
    font-size:      2rem;
    font-weight:    800;
    color:          #ffffff;
    letter-spacing: -0.04em;
    line-height:    1;
}

.s0-card-price-note {
    font-size: 0.8125rem;
    color:     #767575;
}

.s0-card-price-custom {
    font-family:    var(--font-display);
    font-size:      1.5rem;
    font-weight:    700;
    color:          #767575;
    letter-spacing: -0.03em;
}

.s0-card-desc {
    font-size:   0.8125rem;
    color:       #767575;
    line-height: 1.65;
    margin-top:  0.375rem;
}

/* Feature list */
.s0-card-features {
    list-style:     none;
    padding:        0;
    margin:         0 0 2rem;
    display:        flex;
    flex-direction: column;
    gap:            0.875rem;
    flex:           1;
}

.s0-card-features li {
    display:     flex;
    align-items: flex-start;
    gap:         0.625rem;
    font-size:   0.8125rem;
    color:       #d4d4d8;
    line-height: 1.45;
}
.s0-card-features li .material-symbols-outlined {
    font-size:   1.0625rem !important;
    color:       #caff6f;
    flex-shrink: 0;
    margin-top:  1px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.s0-card-features li.s0-feature--off {
    color:   #484847;
    opacity: 0.5;
}
.s0-card-features li.s0-feature--off .material-symbols-outlined {
    color: #484847;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Card buttons ────────────────────────────────────────── */
.s0-card-btn {
    display:         block;
    width:           100%;
    padding:         0.875rem;
    text-align:      center;
    font-family:     var(--font-display);
    font-size:       0.625rem;
    font-weight:     700;
    letter-spacing:  0.15em;
    text-transform:  uppercase;
    border-radius:   9999px;
    cursor:          pointer;
    border:          1px solid rgba(202,255,111,0.25);
    background:      transparent;
    color:           #caff6f;
    transition:      background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.s0-card-btn:hover  { border-color: #caff6f; background: rgba(202,255,111,0.07); }
.s0-card-btn:active { transform: scale(0.97); }

.s0-card-btn--filled {
    background:  #caff6f;
    color:       #0e0e0e;
    border-color: #caff6f;
    box-shadow:  0 12px 32px rgba(202,255,111,0.12);
}
.s0-card-btn--filled:hover  { background: #d8ff89; border-color: #d8ff89; }

.s0-card-btn--selected {
    background:   rgba(202,255,111,0.12);
    border-color: #caff6f;
    color:        #caff6f;
}

.s0-card-link {
    display:         block;
    padding:         0.875rem;
    text-align:      center;
    font-family:     var(--font-display);
    font-size:       0.625rem;
    font-weight:     700;
    letter-spacing:  0.15em;
    text-transform:  uppercase;
    border-radius:   9999px;
    text-decoration: none;
    border:          1px solid rgba(72,72,71,0.4);
    color:           #767575;
    transition:      border-color 0.2s ease, color 0.2s ease;
}
.s0-card-link:hover { border-color: #caff6f; color: #caff6f; }

/* ── Pair note ───────────────────────────────────────────── */
.s0-pair-note {
    display:     flex;
    align-items: flex-start;
    gap:         0.5rem;
    font-size:   0.8125rem;
    color:       #767575;
    line-height: 1.6;
    margin-top:  1.25rem;
    padding-top: 1.25rem;
    border-top:  1px solid rgba(72,72,71,0.2);
}
.s0-pair-note svg { flex-shrink: 0; margin-top: 2px; }

/* ── Shared button styles for intake context ─────────────── */
.s0-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.375rem;
    padding:         0.625rem 1.25rem;
    font-family:     var(--font-display);
    font-size:       0.625rem;
    font-weight:     700;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    border-radius:   9999px;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, transform 0.12s ease;
    border:          none;
}
.s0-btn:active { transform: scale(0.97); }

.s0-btn--primary {
    background: #caff6f;
    color:      #0e0e0e;
}
.s0-btn--primary:hover   { opacity: 0.85; }
.s0-btn--primary:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

.s0-btn--ghost {
    background:  transparent;
    color:       #767575;
    border:      1px solid rgba(72,72,71,0.4);
}
.s0-btn--ghost:hover { color: #d4d4d8; border-color: rgba(72,72,71,0.8); }

.s0-btn--danger {
    background:  transparent;
    color:       #ff7351;
    border:      1px solid rgba(255,115,81,0.3);
}
.s0-btn--danger:hover { background: rgba(255,115,81,0.07); border-color: rgba(255,115,81,0.5); }

/* ── Sticky footer ───────────────────────────────────────── */
.s0-footer {
    position:        fixed;
    bottom:          0;
    left:            18rem;
    right:           0;
    z-index:         30;
    background:      rgba(14,14,14,0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top:      1px solid rgba(72,72,71,0.2);
    padding:         1.125rem 4rem;
    box-sizing:      border-box;
    max-width:       100vw;
}

.s0-footer-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.5rem;
}

.s0-footer-summary {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
}

.s0-footer-check {
    font-size:   1.375rem !important;
    color:       #caff6f;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.s0-footer-name {
    font-family:    var(--font-display);
    font-size:      0.9375rem;
    font-weight:    700;
    color:          #ffffff;
    letter-spacing: -0.01em;
}

.s0-footer-price {
    font-size:   0.8125rem;
    color:       #767575;
    margin-top:  0.1rem;
}

.s0-footer-placeholder {
    font-size: 0.875rem;
    color:     #484847;
}

.s0-footer-actions {
    display:     flex;
    gap:         0.75rem;
    align-items: center;
    flex-shrink: 0;
}

/* ── Mobile step header ──────────────────────────────────── */
.il-mobile-header {
    display: none; /* hidden on desktop */
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .il-sidebar { display: none; }
    .il-main    { margin-left: 0; padding: 0 2rem 9rem; }
    .s0-footer  { left: 0; padding: 1rem 2rem; }

    /* Show mobile step header — breaks out of il-main's horizontal padding */
    .il-mobile-header {
        display:         flex;
        align-items:     center;
        gap:             1rem;
        padding:         0.875rem 1.5rem;
        background:      #0d0d0d;
        border-bottom:   1px solid rgba(255,255,255,0.07);
        position:        sticky;
        top:             0;
        z-index:         50;
        margin:          0 -2rem 2rem;
    }
    .il-mobile-back {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           32px;
        height:          32px;
        border-radius:   6px;
        color:           rgba(255,255,255,0.5);
        flex-shrink:     0;
        transition:      color 0.15s, background 0.15s;
    }
    .il-mobile-back:hover { color: #fff; background: rgba(255,255,255,0.08); }
    .il-mobile-back svg   { width: 16px; height: 16px; }

    .il-mobile-step-info {
        flex:           1;
        min-width:      0;
    }
    .il-mobile-step-count {
        display:        block;
        font-size:      0.625rem;
        font-weight:    700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color:          rgba(255,255,255,0.35);
        margin-bottom:  0.1rem;
    }
    .il-mobile-step-name {
        display:        block;
        font-family:    var(--font-display);
        font-size:      0.875rem;
        font-weight:    700;
        color:          #fff;
    }

    .il-mobile-dots {
        display:    flex;
        align-items: center;
        gap:         5px;
        flex-shrink: 0;
    }
    .il-mobile-dot {
        width:         6px;
        height:        6px;
        border-radius: 50%;
        background:    rgba(255,255,255,0.15);
        transition:    background 0.2s, transform 0.2s;
    }
    .il-mobile-dot.done   { background: rgba(202,255,111,0.45); }
    .il-mobile-dot.active { background: #caff6f; transform: scale(1.4); }

    .il-main > .il-flash--error,
    .il-main > .il-flash--success { margin-bottom: 1rem; }
}

@media (max-width: 768px) {
    .il-main               { padding: 0 1.25rem 9rem; }
    .il-mobile-header      { padding: 0.75rem 1.25rem; margin: 0 -1.25rem 1.5rem; }
    .il-main > .il-flash--error,
    .il-main > .il-flash--success { margin-bottom: 1rem; }
    .s0-grid               { grid-template-columns: 1fr; }
    .s0-card--featured     { transform: none; }

    /* Footer: stack summary above actions, buttons fill full width */
    .s0-footer             { left: 0; right: 0; padding: 0.875rem 1rem; }
    .s0-footer-inner       { flex-direction: column; align-items: stretch; gap: 0.625rem; }
    .s0-footer-actions     { display: flex; gap: 0.5rem; width: 100%; box-sizing: border-box; }
    .s0-footer-actions .s0-btn {
        flex:             1;
        min-width:        0;
        justify-content:  center;
        text-align:       center;
        box-sizing:       border-box;
        overflow:         hidden;
        text-overflow:    ellipsis;
    }

    .s0-draft-banner       { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .s0-draft-actions      { width: 100%; }
}

@media (max-width: 480px) {
    .s0-tabs { border-radius: 0.5rem; }
    .s0-tab  { padding: 0.5rem 0.875rem; }
    .s0-tab-icon { display: none; }
}