/* =================================================================
   tutorial.css — fullscreen first-run slide deck.
   This is its OWN visual experience — independent of the settings
   modal style. A subtle gradient backdrop, generous padding, big
   typography, dot-based progress, and Prev/Next/Skip controls
   placed at the corners like a presentation app.
   ================================================================= */

.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    animation: tutorialOverlayIn 0.32s ease-out;
    overflow: hidden;
}

.tutorial-overlay.is-closing {
    animation: tutorialOverlayOut 0.22s ease-in forwards;
}

@keyframes tutorialOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tutorialOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Decorative backdrop. Two soft radial accents over the app surface
   so the deck doesn't look like a flat wall — it suggests focus. */
.tutorial-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 12%,
            color-mix(in srgb, var(--accent-primary) 22%, transparent) 0%,
            transparent 45%),
        radial-gradient(circle at 82% 88%,
            color-mix(in srgb, var(--accent-primary) 14%, transparent) 0%,
            transparent 50%),
        var(--bg-dark, #0a0a0a);
    z-index: -1;
}

/* Top bar: step counter on the left, skip button on the right. */
.tutorial-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
}

.tutorial-counter {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tutorial-skip {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tutorial-skip:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Stage holds the slide content centered. The slide itself caps width
   so reading lines don't sprawl on wide monitors. */
.tutorial-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    min-height: 0;
}

.tutorial-slide {
    width: min(820px, 100%);
    max-height: 100%;
    overflow-y: auto;
    text-align: center;
    padding: 8px 12px 24px;
}

/* Entrance animation — applied each time the slide content swaps. */
.tutorial-slide.is-entering {
    animation: tutorialSlideIn 0.42s cubic-bezier(.2, .7, .2, 1);
}

@keyframes tutorialSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section icon — a circular badge holding the SVG. */
.tutorial-slide-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    color: var(--accent-primary);
    margin-bottom: 18px;
}
.tutorial-slide-icon-hero {
    width: 132px;
    height: 132px;
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

/* Section badge — small colored chip above the title (only on topic
   slides). Reads like a category label. */
.tutorial-section-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.tutorial-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 12px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.tutorial-title-hero {
    font-size: 42px;
}

.tutorial-lead {
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 22px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.tutorial-body {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    text-align: left;
    max-width: 580px;
    margin: 0 auto;
}

.tutorial-body p {
    margin: 0 0 12px;
}
.tutorial-body p:last-child {
    margin-bottom: 0;
}

.tutorial-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.tutorial-body code {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 13px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--text-primary);
}

.tutorial-body ul {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.tutorial-body li {
    position: relative;
    padding: 6px 0 6px 22px;
}
.tutorial-body li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.tutorial-wrap-flourish {
    height: 4px;
    width: 64px;
    margin: 26px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent,
        var(--accent-primary),
        transparent);
}

/* Bottom bar: Prev on the left, dots in the middle, Next on the right. */
.tutorial-bottombar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 18px 32px 28px;
}

.tutorial-nav {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 110px;
}
.tutorial-nav:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--text-secondary);
}
.tutorial-nav:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.tutorial-nav-prev { justify-self: start; }

.tutorial-nav-next {
    justify-self: end;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent, #fff);
}
.tutorial-nav-next:hover:not(:disabled) {
    filter: brightness(1.08);
    border-color: var(--accent-primary);
}

/* Dot indicator — clickable, current slide is filled, completed slides
   are tinted, upcoming ones are dim. Acts as a quick jump table. */
.tutorial-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
    flex-wrap: wrap;
    max-width: 60vw;
}

.tutorial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--text-primary) 22%, transparent);
    cursor: pointer;
    padding: 0;
    transition: all 0.18s ease;
}
.tutorial-dot:hover {
    background: color-mix(in srgb, var(--text-primary) 45%, transparent);
    transform: scale(1.2);
}
.tutorial-dot.is-done {
    background: color-mix(in srgb, var(--accent-primary) 55%, transparent);
}
.tutorial-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: var(--accent-primary);
}

/* Compact layout for short viewports — strip a chunk of vertical
   padding so the slide still fits without scrolling on a 720p panel. */
@media (max-height: 720px) {
    .tutorial-topbar { padding: 14px 24px; }
    .tutorial-bottombar { padding: 12px 24px 18px; }
    .tutorial-slide-icon { width: 76px; height: 76px; margin-bottom: 12px; }
    .tutorial-slide-icon-hero { width: 100px; height: 100px; }
    .tutorial-title { font-size: 28px; }
    .tutorial-title-hero { font-size: 34px; }
    .tutorial-lead { font-size: 15px; margin-bottom: 16px; }
    .tutorial-body { font-size: 13.5px; }
}

/* Narrow widths (split-screen, weird windowing) — collapse the
   bottom bar so dots wrap below the buttons rather than overlap. */
@media (max-width: 720px) {
    .tutorial-bottombar {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: 12px;
    }
    .tutorial-dots {
        grid-column: 1 / -1;
        order: -1;
        justify-self: center;
    }
}

/* =================================================================
   Interactive controls — form elements that live INSIDE a slide so
   the user can configure each setting as they learn about it.
   Visually distinct from the slide body (left-aligned, card-on-card
   surface) but still on-brand with the deck.
   ================================================================= */

.tutorial-controls {
    margin: 28px auto 0;
    max-width: 640px;
    text-align: left;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tut-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tut-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tut-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11.5px;
}

.tut-muted {
    color: var(--text-muted);
    font-style: italic;
}

.tut-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tut-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
}
@media (max-width: 640px) {
    .tut-row-split { grid-template-columns: 1fr; }
}

.tut-row-accent {
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* Inputs / selects share a common surface so the controls feel
   uniform regardless of element type. */
.tut-input,
.tut-select {
    flex: 1 1 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}
.tut-input:focus,
.tut-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}
.tut-input-readonly {
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-secondary);
    overflow-x: auto;
    white-space: nowrap;
    cursor: default;
}
.tut-mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
}

/* Buttons — neutral + accent variants matching the bottom-bar buttons
   but smaller. */
.tut-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.tut-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--text-secondary);
}
.tut-btn-primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent, #fff);
}
.tut-btn-primary:hover {
    filter: brightness(1.08);
    border-color: var(--accent-primary);
}
.tut-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.tut-preset-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Live preview card — used by the Templates slide. */
.tut-preview-card {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border-radius: 10px;
    padding: 12px 14px;
}
.tut-preview-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
    margin-bottom: 6px;
}
.tut-preview-path {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--text-primary);
    word-break: break-all;
}

/* Radio + checkbox cards — the "rich" variant with a title + subtitle
   inside each option. Click anywhere on the card to toggle. */
.tut-radios,
.tut-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tut-radio,
.tut-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tut-radio:hover,
.tut-checkbox:hover {
    border-color: var(--text-secondary);
    background: var(--bg-card-hover);
}
.tut-radio.is-checked,
.tut-checkbox.is-checked {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
.tut-radio input[type="radio"],
.tut-checkbox input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.tut-radio-text,
.tut-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tut-radio-text strong,
.tut-checkbox-text strong {
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 600;
}
.tut-radio-text span,
.tut-checkbox-text span {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* Range slider — uses native styling but accent-tinted. */
.tut-range {
    width: 100%;
    accent-color: var(--accent-primary);
}

/* Color picker + swatches — used by the Appearance slide. */
.tut-color {
    width: 56px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.tut-swatches {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tut-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.tut-swatch:hover {
    transform: scale(1.12);
    border-color: var(--text-primary);
}

/* Stat-tile checkbox grid — used on the Home slide. Uniform pill rows
   so the selection feels like a checklist. */
.tut-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.tut-check-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    color: var(--text-primary);
}
.tut-check-tile:hover {
    border-color: var(--text-secondary);
    background: var(--bg-card-hover);
}
.tut-check-tile input[type="checkbox"] {
    accent-color: var(--accent-primary);
    width: 15px;
    height: 15px;
}
.tut-check-tile:has(input:checked) {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

/* Tag-fields layout — used on the Tag Fields slide. Every category is
   shown flat (no accordion) so the user can see the entire field
   universe and tick what they want. The controls panel widens for this
   slide because tag fields produce a lot of short labels that read
   better in a 3-column grid than crammed into the default 640px. */
.tutorial-controls-tagfields {
    /* Break out of the parent .tutorial-controls 640px cap. The flex
       parent centres us; max-width is the only thing keeping us narrow. */
    width: 100%;
    margin: 0 auto;
}
.tutorial-controls:has(.tutorial-controls-tagfields) {
    max-width: 100%;
}

.tut-tf-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}
.tut-tf-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 12px 14px 14px;
}
.tut-tf-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.tut-tf-section-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tut-tf-count {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    padding: 2px 9px;
    border-radius: 999px;
}
.tut-tf-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
}
.tut-tf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-primary);
    transition: background 0.15s ease;
}
.tut-tf-row:hover {
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}
.tut-tf-row input[type="checkbox"] {
    accent-color: var(--accent-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.tut-tf-row-locked {
    color: var(--text-muted);
    cursor: not-allowed;
}
.tut-tf-row-locked:hover {
    background: transparent;
}
.tut-tf-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tut-tf-lock {
    font-size: 12px;
    opacity: 0.7;
}

/* ===========================================================================
   Library-slide load gate — status row + indeterminate spinner + progress bar.
   Shown while the user picks a folder or adopts an existing library; hidden
   in the idle / ready states. Drives the tutorial's Next-button gate.
   =========================================================================== */
.tut-lib-status {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tut-lib-status[hidden] { display: none; }

.tut-lib-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tut-lib-status-text {
    font-size: 13px;
    color: var(--text-secondary, #aaa);
    line-height: 1.4;
    flex: 1 1 auto;
}

.tut-lib-spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--accent-primary, #ff6b35);
    /* When .is-spinning is on, animate; otherwise hide the spinner so the
       ready state shows just the status text. */
    visibility: hidden;
    animation: tut-lib-spin 0.9s linear infinite;
}
.tut-lib-spinner.is-spinning {
    visibility: visible;
}
@keyframes tut-lib-spin {
    to { transform: rotate(360deg); }
}

.tut-lib-progress {
    width: 100%;
}
.tut-lib-progress[hidden] { display: none; }
.tut-lib-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.tut-lib-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-primary, #ff6b35);
    border-radius: 999px;
    transition: width 200ms ease;
}

/* Visual cue that the Next button is gated by an in-flight library load.
   Pairs with the existing .tutorial-nav-next disabled state. */
.tutorial-nav-next.is-blocked {
    opacity: 0.45;
    cursor: not-allowed;
}