/* /n/ wizard — Phase 4 (Step 1 of 2). Small, focused styles for the
   3-step create flow. Inherits site.css tokens; only the wizard-
   specific affordances live here. */

.wiz-progress {
    margin: 0 0 28px;
}
.wiz-progress ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    counter-reset: step;
}
.wiz-progress .step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--light-muted);
    font-size: 13.5px;
    transition: .16s var(--ease);
}
.wiz-progress .step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 22px;
}
.wiz-progress .step.current {
    border-color: var(--berry-ink);
    color: var(--berry-ink);
    background: var(--paper);
}
.wiz-progress .step.current .num {
    background: var(--berry-ink);
    color: #fff;
    border-color: var(--berry-ink);
}
.wiz-progress .step.done {
    color: var(--ink-text);
}
.wiz-progress .step.done .num {
    background: var(--ink-text);
    color: #fff;
    border-color: var(--ink-text);
}
.wiz-progress .lbl {
    font-weight: 600;
}
@media (max-width: 540px) {
    .wiz-progress .lbl {
        font-size: 12px;
    }
    .wiz-progress .step {
        padding: 6px 8px;
        gap: 6px;
    }
}

.wiz-step {
    margin-bottom: 28px;
}

.wiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    gap: 14px;
}
.wiz-nav .btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-text);
    font: inherit;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: .16s var(--ease);
}
.wiz-nav .btn-ghost:hover {
    border-color: var(--berry-ink);
    color: var(--berry-ink);
}

/* Belt-and-braces against horizontal scroll. Some long URLs in the
   success panel + the cover gradient on narrow screens could push the
   viewport sideways; we clip at body level instead of chasing each
   offender. */
body { overflow-x: hidden; }
.wrap, .page { max-width: 100%; }

/* Live-preview of when the card will be revealed. Bigger and more
   prominent than the old muted-small line so the user trusts it over
   whatever locale-formatted picker rendering they see in the inputs
   above. */
.reveal-summary-card {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--berry-ink);
    border-radius: 0 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reveal-summary-card .rsl {
    font-size: 12.5px;
    color: var(--light-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.reveal-summary-card strong {
    font-size: 15.5px;
    color: var(--ink-text);
}

/* Manual 24-h time text input — same affordances as .input but tabular */
.time-text {
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

/* Date presets — chip-like, two-state (idle / sel) */
.date-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.date-preset {
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink-text);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: .16s var(--ease);
}
.date-preset:hover {
    border-color: var(--berry-ink);
    color: var(--berry-ink);
}
.date-preset.sel {
    background: var(--berry-ink);
    color: #fff;
    border-color: var(--berry-ink);
}