/* ===== Character Creation Wizard ===== */

.wizard {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: var(--space-xl);
}

/* --- Progress indicator --- */
.wizard-progress {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: calc(var(--header-height) + var(--safe-top, 0px));
    background: color-mix(in srgb, var(--bg-base) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-elevated);
}
.wizard-progress::-webkit-scrollbar { display: none; }

.wizard-step-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: var(--text-sm);
    border: 1px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    scroll-snap-align: start;
}
.wizard-step-indicator.is-done { color: var(--success); }
.wizard-step-indicator.is-active {
    color: var(--gold);
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.wizard-step-indicator:active { transform: scale(0.97); }

.wizard-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}
.wizard-step-indicator.is-active .wizard-step-num { background: var(--gold); color: var(--bg-base); font-weight: 700; }
.wizard-step-indicator.is-done .wizard-step-num { background: var(--success); color: var(--bg-base); }

@media (hover: none) and (pointer: coarse) {
    .wizard-step-indicator { min-height: var(--touch-target); }
    .wizard-step-label { display: none; } /* compact on phone; tap through number */
    .wizard-step-indicator.is-active .wizard-step-label { display: inline; }
}

/* --- Body --- */
.wizard-body { min-height: 50vh; padding: var(--space-md) 0; }

.wizard-step-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}
.wizard-step-header h2 {
    color: var(--gold);
    font-family: var(--font-display), serif;
    letter-spacing: 1px;
    margin-bottom: var(--space-xs);
}

/* --- Footer actions --- */
.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    margin-top: var(--space-lg);
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: calc(var(--nav-height) + var(--safe-bottom, 0px));
    background: color-mix(in srgb, var(--bg-base) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wizard-step-info {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-dim);
}

/* --- Grids (species/class/background cards) --- */
.species-grid, .class-grid, .background-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.species-card, .class-card, .background-card {
    padding: var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: left;
    transition: all var(--transition-fast);
    cursor: pointer;
    min-height: var(--touch-target);
}
.species-card:hover, .class-card:hover, .background-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.species-card.is-selected, .class-card.is-selected, .background-card.is-selected {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, var(--bg-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent);
}
.species-card:active, .class-card:active, .background-card:active { transform: scale(0.98); }

.species-name, .class-name, .background-name {
    font-family: var(--font-display), serif;
    font-size: var(--text-md);
    color: var(--text-bright);
    margin-bottom: 2px;
}
.species-meta, .class-meta, .background-meta { font-size: var(--text-xs); }

/* --- Detail card --- */
.species-detail, .class-detail, .background-detail {
    padding: var(--space-lg);
    margin-top: var(--space-md);
}
.species-detail h3, .class-detail h3, .background-detail h3 {
    color: var(--gold);
    font-family: var(--font-display), serif;
    margin-bottom: var(--space-sm);
}

.class-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.species-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
}
.species-features li {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}
.species-features li:last-child { border-bottom: none; }

.background-grants {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs) var(--space-md);
    margin: var(--space-md) 0;
    font-size: var(--text-sm);
}
.background-grants dt { color: var(--text-dim); }
.background-grants dd { color: var(--text-primary); margin: 0; }

/* --- Choice primitives --- */
.choice-group { margin-top: var(--space-lg); }
.choice-group h4 {
    color: var(--gold);
    font-family: var(--font-display), serif;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
}
.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.choice-chip {
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 32px;
    text-transform: capitalize;
}
.choice-chip:hover:not([disabled]) {
    border-color: var(--accent);
}
.choice-chip.is-selected {
    background: color-mix(in srgb, var(--gold) 20%, var(--bg-elevated));
    border-color: var(--gold);
    color: var(--gold-bright);
}
.choice-chip[disabled] { opacity: 0.35; cursor: not-allowed; }
.choice-chip:active:not([disabled]) { transform: scale(0.96); }

@media (hover: none) and (pointer: coarse) {
    .choice-chip { min-height: var(--touch-target); padding: var(--space-sm) var(--space-md); }
}

/* Generic is-selected styling for button-secondary pickers */
.btn.is-selected {
    background: color-mix(in srgb, var(--gold) 20%, var(--bg-elevated));
    border-color: var(--gold);
    color: var(--gold-bright);
}

/* --- Ability table --- */
.ability-method-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.ability-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 560px;
}
.ability-row {
    display: grid;
    grid-template-columns: 60px auto 40px 60px 40px;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.ability-label { font-family: var(--font-display); font-size: var(--text-sm); color: var(--gold); }
.ability-input { width: 60px; text-align: center; }
.ability-bonus { color: var(--success); font-family: var(--font-mono); font-size: var(--text-sm); }
.ability-total { font-weight: 700; text-align: right; }
.ability-mod {
    font-family: var(--font-mono);
    color: var(--accent);
    text-align: right;
    font-weight: 700;
}

.stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.stepper button {
    width: 32px; height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.stepper button:hover { border-color: var(--gold); color: var(--gold); }
.stepper button:active { transform: scale(0.92); }
@media (hover: none) and (pointer: coarse) {
    .stepper button { width: var(--touch-target); height: var(--touch-target); }
}

.asi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.asi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.asi-row label { color: var(--text-dim); font-size: var(--text-xs); }
.asi-val { font-family: var(--font-mono); color: var(--gold); min-width: 28px; text-align: center; }

.point-buy-remaining {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

/* --- Equipment --- */
.equipment-modes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}
@media (min-width: 640px) {
    .equipment-modes { grid-template-columns: 1fr 1fr; }
}
.equipment-mode {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.equipment-mode:hover { border-color: var(--accent); }
.equipment-mode.is-selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg-surface)); }

/* --- Identity form --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
}
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-group-full { grid-column: 1 / -1; }
.form-label { font-size: var(--text-sm); color: var(--text-dim); }

/* --- Review --- */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.review-grid .card h3 {
    color: var(--gold);
    font-family: var(--font-display), serif;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
}
.review-abilities { width: 100%; font-family: var(--font-mono); font-size: var(--text-sm); }
.review-abilities th { text-align: left; color: var(--text-dim); font-weight: normal; padding-bottom: var(--space-xs); }
.review-abilities td { padding: 2px 0; }

/* --- Review computed stats --- */
.review-computed { grid-column: 1 / -1; }
.review-computed.review-computed-err { border-left: 3px solid var(--error); }
.computed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-xs) var(--space-md);
    margin: 0;
}
.computed-grid dt { color: var(--text-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; }
.computed-grid dd { margin: 0 0 var(--space-xs); font-family: var(--font-mono); font-weight: 700; color: var(--gold); font-size: var(--text-md); }
.review-warnings { list-style: none; padding: var(--space-sm) 0 0; margin: 0; font-size: var(--text-sm); color: var(--warning); }
.review-warnings li { padding: 2px 0; }

/* --- Equipment table --- */
.equipment-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
}
.equipment-table th, .equipment-table td {
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.equipment-table th { color: var(--text-dim); font-weight: normal; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; }
.equipment-table tr.is-swapped { opacity: 0.5; text-decoration: line-through; }
.equipment-table .btn-xs {
    padding: 2px 8px; font-size: var(--text-xs); background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer;
}
.equipment-table .btn-xs:hover { border-color: var(--gold); color: var(--gold); }

/* --- Spell picker colored by school (reuses existing spell-school-* tokens) --- */
.spell-picker { max-height: 360px; overflow-y: auto; padding-right: var(--space-sm); }
.spell-picker .choice-chip { font-size: var(--text-xs); }

/* --- Spell sources preview --- */
.spell-sources { list-style: none; padding: 0; }
.spell-sources li {
    padding: var(--space-xs) var(--space-sm);
    border-left: 2px solid var(--gold);
    margin-bottom: var(--space-xs);
    font-size: var(--text-sm);
}