/* First-run setup tour — the blocking dialog shown while a space is built.
 *
 * Owns only `.st-tour*`. It reuses .st-modal / .st-modal__card for the scrim
 * and card so it sits at the same elevation and inherits the same surface
 * treatment as every other dialog in /study; everything below is the parts
 * that modal does not have. The setup panel it covers is untouched.
 *
 * Motion is deliberately almost absent: a spinner and a progress bar are the
 * only moving things, because everything else on screen is waiting. */

.st-tour {
    /* Above the app's own overlays — nothing may float over a blocking dialog. */
    z-index: 130;
}

.st-tour__card {
    max-width: 880px;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* ---- status line ---------------------------------------------------- */

.st-tour__status {
    padding: 20px 28px 0;
    border-bottom: 1px solid var(--st-border-soft);
}

.st-tour__status-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
}

.st-tour__status-top > div {
    flex: 1;
    min-width: 0;
}

.st-tour__heading {
    font-family: var(--st-font-display);
    font-weight: var(--st-display-weight);
    letter-spacing: var(--st-display-tracking);
    font-size: 17px;
    line-height: 1.3;
}

.st-tour__status-detail {
    margin-top: 3px;
    font-size: 13px;
    color: var(--st-ink-2);
}

.st-tour__status-meta {
    flex: 0 0 auto;
    padding-top: 2px;
    font-size: 12px;
    color: var(--st-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-tour__spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 2px solid var(--st-border);
    border-top-color: var(--st-accent);
    border-radius: 50%;
    animation: st-tour-spin 0.7s linear infinite;
}

.st-tour__spinner[hidden] { display: none; }

@keyframes st-tour-spin { to { transform: rotate(360deg); } }

.st-tour__bar {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: var(--st-border-soft);
    overflow: hidden;
}

.st-tour__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--st-accent);
    transition: width 0.4s ease;
}

/* Indeterminate: the tail has no countable unit, so the bar sweeps instead of
   claiming a figure. Motion here is the point — a still bar at this moment is
   what made people think setup had died. */
.st-tour__bar.is-indeterminate .st-tour__bar-fill {
    width: 38%;
    transition: none;
    animation: st-tour-sweep 1.5s ease-in-out infinite;
}

@keyframes st-tour-sweep {
    0% { transform: translateX(-105%); }
    100% { transform: translateX(290%); }
}

.st-tour__card.is-failed .st-tour__heading { color: var(--st-danger); }
.st-tour__card.is-failed .st-tour__bar { visibility: hidden; }

/* ---- stepper -------------------------------------------------------- */

.st-tour__stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
    padding: 18px 28px 0;
    list-style: none;
}

/* Numbered circles, no rules above them: the bar under the header is the only
   progress indicator in the dialog, so the stepper must not read as a second
   one. */
.st-tour__step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    font-size: 12px;
    color: var(--st-ink-3);
}

.st-tour__step.is-current { color: var(--st-ink); font-weight: 600; }

.st-tour__step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--st-border-soft);
    color: var(--st-ink-3);
    font-size: 11px;
    font-weight: 700;
}

.st-tour__step.is-current .st-tour__step-n { background: var(--st-accent); color: #fff; }
.st-tour__step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- tour body ------------------------------------------------------ */

.st-tour__body { padding: 18px 28px 22px; }

.st-tour__headline {
    font-family: var(--st-font-display);
    font-weight: var(--st-display-weight);
    letter-spacing: var(--st-display-tracking);
    font-size: 21px;
    line-height: 1.25;
}

.st-tour__para {
    max-width: 62ch;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--st-ink-2);
}

/* ---- previews (decorative) ------------------------------------------ */

.st-tour__preview {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--st-border-soft);
    border-radius: var(--st-radius-card-sm);
    background: var(--st-surface-2);
    /* Static illustration: never a tab stop, never announced as content. */
    pointer-events: none;
    user-select: none;
}

/* ...except step 3's card, which is a real flashcard the reader can rate. */
.st-tour__preview--live { pointer-events: auto; user-select: auto; }

.st-tour__preview--list { display: flex; flex-direction: column; gap: 8px; }

.st-tour__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--st-border-soft);
    border-radius: 9px;
    background: var(--st-surface);
    font-size: 13px;
}

.st-tour__row-icon { display: inline-flex; color: var(--st-ink-3); }
.st-tour__row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-tour__row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tour__row-meta { font-size: 11px; color: var(--st-ink-3); }

.st-tour__pill {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--st-green-soft);
    color: var(--st-green-ink);
    font-size: 11px;
    font-weight: 700;
}

.st-tour__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-ink-3);
}

/* The three tones the rest of /study uses for mastery (format.js masteryTone). */
.st-tour__dot--low { background: var(--st-danger); }
.st-tour__dot--mid { background: var(--st-warm); }
.st-tour__dot--high { background: var(--st-green); }

.st-tour__preview--card { display: flex; flex-direction: column; gap: 12px; }
.st-tour__card-q { font-size: 14px; font-weight: 600; line-height: 1.45; }

/* Step 3's card is real and rateable, so its controls are real buttons at full
   contrast — nothing here is a mock-up. */
.st-tour__card-rates { display: flex; gap: 8px; flex-wrap: wrap; }
.st-tour__card-reveal { display: flex; flex-direction: column; gap: 12px; }
.st-tour__card-a {
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--st-accent-soft);
}
.st-tour__card-rated { font-size: 12.5px; color: var(--st-ink-3); }
.st-tour__card-wait { font-size: 13px; color: var(--st-ink-3); }
.st-tour__try { font-size: 13px; font-weight: 600; color: var(--st-accent); margin-top: -2px; }

.st-tour__concept-pill {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--st-accent-soft);
    color: var(--st-accent);
    font-size: 11.5px;
    font-weight: 700;
}

.st-tour__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.st-tour__option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--st-border-soft);
    border-radius: 9px;
    background: var(--st-surface);
    font-size: 13px;
}

.st-tour__option-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--st-border-soft);
    font-size: 11px;
    font-weight: 700;
    color: var(--st-ink-2);
}

/* ---- step 4: a sample, not a control -------------------------------- */
/* The quiz preview must not invite a tap. Answering here would count for
   nothing, and a dead "button" is worse than an obvious illustration. */
.st-tour__preview--inert { cursor: default; }
.st-tour__preview--inert .st-tour__option {
    background: transparent;
    border-style: dashed;
    color: var(--st-ink-3);
    cursor: default;
}
.st-tour__preview--inert .st-tour__option:hover { background: transparent; border-color: var(--st-border-soft); }
.st-tour__preview--inert .st-tour__option-key { background: transparent; border: 1px dashed var(--st-border); }

/* ---- placeholders and skeletons ------------------------------------- */
.st-tour__row--add {
    border: 1px dashed var(--st-border);
    border-radius: 9px;
    background: transparent;
    color: var(--st-ink-3);
}
.st-tour__preview-note { font-size: 12px; color: var(--st-ink-3); padding-left: 2px; }

.st-tour__row--skeleton { align-items: center; gap: 10px; }
.st-tour__skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--st-border-soft) 25%, var(--st-surface-2, rgba(127,127,127,0.10)) 37%, var(--st-border-soft) 63%);
    background-size: 400% 100%;
    animation: st-tour-skel 1.4s ease infinite;
}
.st-tour__skel--dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st-tour__skel--line { height: 11px; width: 62%; }
.st-tour__skel--pill { height: 18px; width: 120px; border-radius: 999px; }
@keyframes st-tour-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* `hidden` loses to the display rules above it, so the completion screen has
   to say it twice. */
.st-tour__stepper[hidden], .st-tour__controls[hidden] { display: none; }

/* ---- the timed way out ---------------------------------------------- */
/* Appears only after the dialog has held the screen for a while (see
   DISMISS_AFTER_MS). Quiet on purpose: it must be findable by someone who
   wants out, without competing with Previous/Next for everyone else. */
.st-tour__dismiss-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 28px 16px;
    border-top: 1px solid var(--st-border-soft);
}
.st-tour__dismiss-row[hidden] { display: none; }
.st-tour__dismiss-note { font-size: 12px; color: var(--st-ink-3); }

@media (max-width: 760px) {
    .st-tour__dismiss-row { flex-direction: column; gap: 4px; padding: 10px 18px 14px; }
}

/* ---- completion ------------------------------------------------------ */
.st-tour__check { display: inline-flex; color: var(--st-green); }
.st-tour__bar.is-complete .st-tour__bar-fill { background: var(--st-green); }

.st-tour__done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.st-tour__done .st-tour__para { max-width: 46ch; }

.st-tour__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin: 4px 0 6px;
}
.st-tour__tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    border: 1px solid var(--st-border-soft);
    border-radius: 12px;
    background: var(--st-surface);
}
.st-tour__tile-n { font-size: 24px; font-weight: 800; line-height: 1.1; }
.st-tour__tile-l { font-size: 12.5px; font-weight: 600; }
.st-tour__tile-s { font-size: 11.5px; color: var(--st-ink-3); line-height: 1.35; }
.st-tour__start { min-width: 190px; }
.st-tour__tutor-note { font-size: 12px; color: var(--st-ink-3); max-width: 42ch; }

/* ---- controls ------------------------------------------------------- */

.st-tour__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    border-top: 1px solid var(--st-border-soft);
    background: var(--st-surface-2);
}

.st-tour__count {
    font-size: 12px;
    color: var(--st-ink-3);
    font-variant-numeric: tabular-nums;
}

.st-tour__nav[hidden] { display: none; }
.st-tour__nav:disabled { opacity: 0.4; cursor: not-allowed; }

/* Focus must stay obvious: these are the only controls on screen. */
.st-tour__nav:focus-visible {
    outline: 2px solid var(--st-focus, var(--st-accent));
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .st-tour__card { max-width: 100%; }
    .st-tour__status, .st-tour__stepper, .st-tour__body, .st-tour__controls { padding-left: 18px; padding-right: 18px; }
    .st-tour__status-meta { display: none; }
    .st-tour__step-label { display: none; }
    /* Circles only: the labels do not fit, and the headline already names the
       step the reader is on. */
    .st-tour__stepper { grid-template-columns: repeat(4, 1fr); justify-items: center; }
    .st-tour__options { grid-template-columns: 1fr; }
    .st-tour__headline { font-size: 19px; }
    /* Three tiles side by side stop being readable well before this width. */
    .st-tour__tiles { grid-template-columns: 1fr; }
    .st-tour__tile { flex-direction: row; align-items: baseline; gap: 8px; padding: 10px 12px; }
    .st-tour__tile-n { font-size: 19px; }
    .st-tour__tile-s { margin-left: auto; text-align: right; }
    .st-tour__start { width: 100%; }
    .st-tour__card-rates .st-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    /* Still moving — this is the "not frozen" signal — just calmer. */
    .st-tour__spinner { animation-duration: 1.6s; }
    .st-tour__bar-fill { transition: none; }
    .st-tour__bar.is-indeterminate .st-tour__bar-fill { animation-duration: 3s; }
    .st-tour__skel { animation: none; }
}