/* T25 — Onboarding UX (UX §9). The Burner Phone's own chrome: no sidebar, no status bar container,
   no dashboard (UX §9.1 🔒) — a narrow, centred, phone-shaped frame on an otherwise empty near-black
   field, monospace throughout. */

/* UX §9.1 said "faint azulejo texture" from the start; the shipped version was two generic radial-
   gradient blobs, not any azulejo shape — same "spec says X, code has a vague placeholder" gap the
   district map's own tile pattern had before it was fixed. img/azulejo/neutral.svg is a real (if
   district-agnostic, since no district is chosen yet at this point in onboarding) azulejo weave,
   applied the same mask-image + background-color way districts.css already does, so no hex value is
   introduced outside tokens.css. */
.sd-phone-field {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sd-surface-base);
    padding: var(--sd-space-6);
    overflow: hidden;
}

.sd-phone-field::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-color: var(--sd-accent);
    -webkit-mask-image: url('/img/azulejo/neutral.svg');
    mask-image: url('/img/azulejo/neutral.svg');
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 32px 32px;
    mask-size: 32px 32px;
}

.sd-phone-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--sd-surface-1);
    border: 1px solid var(--sd-border-default);
    border-radius: var(--sd-radius-lg);
    padding: var(--sd-space-6);
    font-family: var(--sd-font-data);
    box-shadow: var(--sd-shadow-overlay);
}

/* Step-progress dots (PhoneFrame's StepName parameter) — the one addition to this pass that isn't a
   copy change: a player had no sense of "how much is left" across 5 onboarding screens of near-
   identical dark cards. Purely visual orientation, no interaction. */
.sd-phone-progress {
    display: flex;
    justify-content: center;
    gap: var(--sd-space-2);
    margin-bottom: var(--sd-space-5);
}

.sd-phone-progress__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--sd-radius-full);
    background: var(--sd-surface-3);
    transition: background var(--sd-dur-quick) var(--sd-ease), width var(--sd-dur-quick) var(--sd-ease);
}

.sd-phone-progress__dot--done {
    background: var(--sd-accent);
}

.sd-phone-progress__dot--active {
    background: var(--sd-accent);
    width: 18px;
    border-radius: var(--sd-radius-sm);
}

.sd-phone-frame__icon {
    display: flex;
    justify-content: center;
    color: var(--sd-accent);
    margin-bottom: var(--sd-space-4);
}

.sd-onboarding-text {
    font-size: var(--sd-text-base);
    line-height: var(--sd-line-base);
    color: var(--sd-text-primary);
    min-height: calc(var(--sd-line-base) * 3);
    white-space: pre-wrap;
    cursor: default;
}

.sd-onboarding-heading {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-lg);
    margin: 0 0 var(--sd-space-3);
}

.sd-onboarding-subtext {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
    margin: 0 0 var(--sd-space-4);
}

.sd-onboarding-continue {
    display: block;
    width: 100%;
    margin-top: var(--sd-space-5);
    padding: var(--sd-space-3);
    background: var(--sd-accent);
    color: var(--sd-text-inverse);
    border: none;
    border-radius: var(--sd-radius-sm);
    font-family: var(--sd-font-ui);
    font-weight: 600;
    font-size: var(--sd-text-sm);
    cursor: pointer;
    min-height: 44px;
}

.sd-onboarding-continue:disabled {
    background: var(--sd-surface-3);
    color: var(--sd-text-tertiary);
    cursor: not-allowed;
}

.sd-onboarding-continue:hover:not(:disabled) {
    background: var(--sd-accent-hover);
}

.sd-onboarding-field {
    display: block;
    margin-bottom: var(--sd-space-4);
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
}

.sd-onboarding-input {
    display: block;
    width: 100%;
    margin-top: var(--sd-space-1);
    padding: var(--sd-space-2) var(--sd-space-3);
    background: var(--sd-surface-inset);
    border: 1px solid var(--sd-border-default);
    border-radius: var(--sd-radius-sm);
    color: var(--sd-text-primary);
    font-family: var(--sd-font-data);
    font-size: var(--sd-text-sm);
    min-height: 44px;
}

.sd-onboarding-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--sd-space-2);
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
    margin-bottom: var(--sd-space-4);
}

.sd-onboarding-warning {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-warning);
    border: 1px solid var(--sd-warning);
    border-radius: var(--sd-radius-sm);
    padding: var(--sd-space-3);
    margin: var(--sd-space-3) 0;
}

.sd-onboarding-error {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-danger);
    margin-top: var(--sd-space-3);
}

/* ---- Class Selection (UX §9.2) ---- */

.sd-class-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-3);
}

/* Per-class accent + icon (GDD §5.6) — previously three identically-styled text blocks with nothing to
   tell them apart at a glance; ClassVisuals.cs picks the icon, this picks the colour. Colours are
   existing tokens.css semantic tokens, not new hex values (governance §5). */
.sd-class-card {
    --sd-class-accent: var(--sd-accent);

    text-align: left;
    background: var(--sd-surface-2);
    border: 1px solid var(--sd-border-default);
    border-left: 3px solid var(--sd-class-accent);
    border-radius: var(--sd-radius-md);
    padding: var(--sd-space-4);
    cursor: pointer;
    color: var(--sd-text-primary);
}

.sd-class-card .sd-icon {
    color: var(--sd-class-accent);
    margin-bottom: var(--sd-space-2);
}

.sd-class-card--hacker { --sd-class-accent: var(--sd-energy); }
.sd-class-card--broker { --sd-class-accent: var(--sd-reputation); }
.sd-class-card--fixer { --sd-class-accent: var(--sd-influence); }

.sd-class-card--selected {
    border-color: var(--sd-class-accent);
    background: color-mix(in srgb, var(--sd-class-accent) 14%, transparent);
}

.sd-class-card__name {
    font-family: var(--sd-font-ui);
    font-weight: 600;
    font-size: var(--sd-text-base);
    margin-bottom: var(--sd-space-2);
}

.sd-class-card__row {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
    margin-bottom: var(--sd-space-1);
}

.sd-class-card__label {
    color: var(--sd-text-tertiary);
}

/* 🔒 UX §9.2: the weakness is not fine print — same prominence as the income row above it. */
.sd-class-card__weakness {
    color: var(--sd-text-primary);
}

/* ---- First Mission (UX §9.3) ---- */

.sd-mission-countdown {
    display: flex;
    justify-content: center;
    margin: var(--sd-space-5) 0;
    font-size: var(--sd-text-xl);
}

.sd-mission-reveal {
    text-align: center;
    padding: var(--sd-space-5) 0;
}

.sd-mission-reveal__word {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-xl);
    font-weight: 700;
    margin-bottom: var(--sd-space-3);
}

.sd-mission-reveal--success .sd-mission-reveal__word {
    color: var(--sd-success);
}

.sd-mission-reveal--failure .sd-mission-reveal__word {
    color: var(--sd-danger);
}

.sd-mission-reveal__narrative {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
    margin-bottom: var(--sd-space-3);
}

.sd-mission-reveal__figure {
    font-size: var(--sd-text-base);
    color: var(--sd-success);
    margin-bottom: var(--sd-space-1);
}

/* ---- Heat Introduction (UX §9.4) ---- */

.sd-heat-tiers {
    margin: var(--sd-space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-2);
}

.sd-heat-tiers__row {
    display: flex;
    justify-content: space-between;
    gap: var(--sd-space-3);
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
    padding: var(--sd-space-2);
    border-radius: var(--sd-radius-sm);
    background: var(--sd-surface-2);
}

.sd-heat-tiers__row--target {
    color: var(--sd-heat-target);
    border: 1px solid var(--sd-heat-target);
}

/* ---- The Unlock (UX §9.6) ---- */

.sd-unlock-sequence {
    width: 100%;
    height: 4px;
    border-radius: var(--sd-radius-full);
    background: linear-gradient(90deg, var(--sd-accent), var(--sd-clean));
    animation: sd-unlock-progress 2s var(--sd-ease) forwards;
}

@keyframes sd-unlock-progress {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-unlock-sequence {
        animation: none;
    }
}