/* ============================================================================
   Create-plan wizard (/create-plan)

   Page-scoped, loaded AFTER style.css from views/layouts/main.php. Deliberately
   a separate file rather than another section of style.css: that sheet is 8600+
   lines with known self-collisions (.form-row, .page-header are each defined
   twice), and this layout has to beat several of its rules — .day-checkbox span
   {width:48px}, .form-group input padding, .range-slider-container — without
   resorting to !important. Everything below is scoped under
   body.page-create-plan so it can only ever affect this page.
   ============================================================================ */

body.page-create-plan {
    /* Card column cap. Mobile-first: the same layout at every width, just
       centred once the viewport outgrows it. */
    --wz-col: 640px;
    --wz-card-radius: 18px;
    --wz-shadow: 0 1px 2px rgba(22, 32, 94, 0.06), 0 6px 20px rgba(22, 32, 94, 0.06);
    --wz-control-h: 52px;
    --wz-thumb: 28px;
    --wz-footer-h: 84px;

    /* Amber band. --color-warning (#f59e0b) fails AA as text on white, so the
       ink and the fill are separate values. */
    --wz-band-ink: #b45309;
    --wz-band-fill: #d97706;

    /* Inert control surface, one step off the card white. */
    --wz-field-bg: #f7f8fc;

    /* Achievability card. Ink and fill are separate values for the same reason
       --wz-band-ink/--wz-band-fill are: --color-success (#22c55e) is ~2.3:1 on
       white and fails AA as a bold label. */
    --ach-green-ink: #15803d;
    --ach-green-fill: #16a34a;
    --ach-blue-ink: #2563eb;
    /* Fill only, and deliberately a tint rather than the ink: the today band is
       the wider of the two bars and can contain the forecast outright, so at full
       ink the two would be indistinguishable where they overlap. The today LABEL
       keeps --ach-blue-ink. */
    --ach-blue-fill: #93c5fd;
    --ach-orange-ink: #c2610c;
    /* Fill only — used behind white glyphs, never as text on white. */
    --ach-red-fill: #dc2626;
    --ach-rail: #eceef6;
    --ach-tick: var(--home-ink);

    /* Clears the fixed action bar so the last card and the site footer stay
       fully readable. */
    padding-bottom: calc(var(--wz-footer-h) + env(safe-area-inset-bottom));
}

/* showWizardStep() drives every transition through the `hidden` property rather
   than inline display, so this has to beat the layout `display` rules below. */
.page-create-plan [hidden] {
    display: none !important;
}

.page-create-plan .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   Header — back link left, centred wordmark, menu right
   The .page-profile rules at style.css:8234 already do this below 768px; here
   it applies wherever the nav is collapsed. style.css:3241 sets
   .site-header__back { display: none } globally, and load order + the extra
   class beat it without !important.
   ============================================================================ */

.page-create-plan .site-header .container {
    position: relative;
}

.page-create-plan .site-header__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.page-create-plan .site-header__back:hover {
    color: #fff;
}

@media (max-width: 1024px) {
    /* Only while the nav is collapsed. Above that the real nav occupies the
       right-hand slot and absolute-centring the wordmark would overlap it. */
    .page-create-plan .site-header .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }
}

/* ============================================================================
   Hero
   ============================================================================ */

.page-create-plan .wz-hero {
    background:
        radial-gradient(125% 100% at 12% -15%, #5361f2 0%, rgba(83, 97, 242, 0) 60%),
        var(--home-hero-bg);
    color: #fff;
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-6);
}

.page-create-plan .wz-hero__inner {
    max-width: var(--wz-col);
    margin: 0 auto;
}

.page-create-plan .wz-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 7vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 var(--spacing-2);
}

.page-create-plan .wz-hero__sub {
    margin: 0 0 var(--spacing-5);
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}

.page-create-plan .wz-hero__sub strong {
    color: #fff;
    font-weight: 700;
}

/* Steps 2 and 3 have no subtitle; collapse the gap rather than leave a hole. */
.page-create-plan .wz-hero__sub:empty {
    display: none;
}

.page-create-plan .wz-hero h1 + .wz-hero__sub:empty + .wz-steps {
    margin-top: var(--spacing-5);
}

/* --- Step indicator --- */

.page-create-plan .wz-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--spacing-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-create-plan .wz-steps__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-width: 0;
}

.page-create-plan .wz-steps__bar {
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.26);
}

.page-create-plan .wz-steps__item.is-done .wz-steps__bar,
.page-create-plan .wz-steps__item.is-current .wz-steps__bar {
    background: var(--color-accent);
}

.page-create-plan .wz-steps__label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-create-plan .wz-steps__item.is-current .wz-steps__label {
    color: #fff;
    font-weight: 800;
}

/* ============================================================================
   Body / card column
   ============================================================================ */

.page-create-plan .wz-body {
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-8);
}

.page-create-plan .wz-col {
    max-width: var(--wz-col);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.page-create-plan .wz-error-slot:empty {
    display: none;
}

.page-create-plan #plan-form {
    max-width: none;
    margin: 0;
}

.page-create-plan fieldset,
.page-create-plan #estimate-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* --- Card --- */

.page-create-plan .wz-card {
    display: block;
    background: #fff;
    border-radius: var(--wz-card-radius);
    box-shadow: var(--wz-shadow);
    padding: var(--spacing-5);
    /* .form-group (style.css:517) adds a bottom margin; the flex gap owns the
       rhythm here. */
    margin: 0;
}

.page-create-plan .wz-card > * + * {
    margin-top: var(--spacing-4);
}

/* A label already carries its own bottom margin — don't stack the two. */
.page-create-plan .wz-card > .wz-field__label + * {
    margin-top: 0;
}

.page-create-plan .wz-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.page-create-plan .wz-card__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--home-ink);
    margin: 0;
}

.page-create-plan .wz-card__sub {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text-light);
}

.page-create-plan .wz-card__head .wz-card__sub {
    text-align: right;
}

.page-create-plan .wz-card__prose {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.page-create-plan .wz-card__prose:empty {
    display: none;
}

/* --- Fields --- */

.page-create-plan .wz-field {
    min-width: 0;
}

.page-create-plan .wz-field__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--home-ink);
    margin: 0 0 var(--spacing-2);
}

/* A second sub-field stacked under a chip/segment group inside one card needs
   a clear break, or its label reads as a caption on the group above it. The
   label's own `margin: 0 0 ...` zeroes the .wz-card owl rule, so restore it. */
.page-create-plan .wz-card > .wz-segmented + .wz-field__label,
.page-create-plan .wz-card > .wz-chips + .wz-field__label {
    margin-top: var(--spacing-5);
}

.page-create-plan .wz-field__label--withhelp {
    display: flex;
    align-items: center;
}

.page-create-plan .wz-field__optional {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    float: right;
}

.page-create-plan .wz-card__head > .wz-field__optional {
    float: none;
}

.page-create-plan .wz-field__hint {
    display: block;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* Explanatory hints trail their control and would otherwise sit flush against
   it (the `margin: 0` above beats the .wz-card owl rule on source order).
   Paragraphs only — the `<small>` hints are per-field validation feedback and
   should stay tight to the input they belong to. */
.page-create-plan .wz-card > p.wz-field__hint {
    margin-top: var(--spacing-3);
}

.page-create-plan .wz-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

/* --- Controls ---
   16px font size everywhere: anything smaller makes iOS Safari zoom the
   viewport on focus (same trick as style.css:8438). */

.page-create-plan .wz-card input[type="text"],
.page-create-plan .wz-card input[type="number"],
.page-create-plan .wz-card input[type="date"],
.page-create-plan .wz-card select {
    width: 100%;
    height: var(--wz-control-h);
    padding: 0 var(--spacing-4);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--home-ink);
    background-color: var(--wz-field-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.page-create-plan .wz-card input::placeholder {
    color: var(--color-text-muted);
    font-weight: 500;
}

.page-create-plan .wz-card select {
    padding-right: var(--spacing-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-4) center;
    background-size: 18px 18px;
}

.page-create-plan .wz-card input:focus,
.page-create-plan .wz-card select:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(43, 57, 214, 0.14);
}

.page-create-plan input[type="number"]::-webkit-inner-spin-button,
.page-create-plan input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-create-plan input[type="number"] {
    -moz-appearance: textfield;
}

.page-create-plan .wz-input-unit {
    position: relative;
}

.page-create-plan .wz-input-unit input {
    padding-right: 4.5rem;
}

.page-create-plan .wz-input-unit__suffix {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ============================================================================
   Choice groups

   Both patterns are visually-hidden native radios plus styled labels, so the
   `change` event still bubbles out of the wrapper and every listener that used
   to sit on a <select> keeps working. enhanceChoiceGroup() in plan-editor.js
   restores the .value the wrapper would otherwise lack.
   ============================================================================ */

.page-create-plan .wz-chips input,
.page-create-plan .wz-segmented input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* --- Chips (race distance, long run day) --- */

.page-create-plan .wz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.page-create-plan .wz-chips label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--wz-control-h);
    padding: 0 var(--spacing-5);
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--wz-field-bg);
    color: var(--home-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.page-create-plan .wz-chips input:checked + label {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.page-create-plan .wz-chips input:disabled + label {
    opacity: 0.42;
    cursor: not-allowed;
}

.page-create-plan .wz-chips input:focus-visible + label,
.page-create-plan .wz-days__item input:focus-visible + span {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Segmented (experience, quality sessions, unit) --- */

.page-create-plan .wz-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 4px;
    background: #f0f2f8;
    border-radius: 14px;
}

.page-create-plan .wz-segmented label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--wz-control-h) - 8px);
    margin: 0;
    border-radius: 11px;
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.page-create-plan .wz-segmented input:checked + label {
    background: #fff;
    color: var(--home-ink);
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(22, 32, 94, 0.18);
}

.page-create-plan .wz-segmented input:focus-visible + label {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Sits inside .wz-card__head next to the title, so it must not stretch. */
.page-create-plan .wz-segmented--compact {
    grid-auto-columns: auto;
    flex: 0 0 auto;
}

.page-create-plan .wz-segmented--compact label {
    height: 40px;
    padding: 0 var(--spacing-4);
    font-size: 0.95rem;
}

/* --- Day grid ---
   Beats .day-selector (flex-wrap) and .day-checkbox span { width: 48px }
   at style.css:600-625 on specificity alone. */

.page-create-plan .wz-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-2);
    /* Zeroes .day-selector's own margin (style.css:598); the top value is a
       deliberate break from the card rhythm so the grid clears its heading. */
    margin: var(--spacing-5) 0 0;
}

.page-create-plan .wz-days__item {
    display: block;
    margin: 0;
}

.page-create-plan .wz-days__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--wz-field-bg);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.page-create-plan .wz-days__item input:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.page-create-plan .wz-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

/* --- Help disclosure --- */

.page-create-plan .wz-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: var(--spacing-2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e6e9f7;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.page-create-plan .wz-help__panel {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: 12px;
    background: #eef0f9;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* --- Inline notes --- */

.page-create-plan .wz-note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin: 0;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: 12px;
    background: #eef0f9;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* A note is an aside to the fields above it, not another item in the stack, so
   it gets more room than the card's default rhythm. Beats both `margin: 0`
   above and the `.wz-card > * + *` owl rule. */
.page-create-plan .wz-card > .wz-note {
    margin-top: var(--spacing-6);
}

.page-create-plan .wz-note strong {
    color: var(--home-ink);
    font-weight: 700;
}

.page-create-plan .wz-note__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    font-style: italic;
}

/* ============================================================================
   Step 3 summary
   ============================================================================ */

.page-create-plan .wz-summary {
    padding: var(--spacing-4) var(--spacing-5);
}

.page-create-plan .wz-summary > * + * {
    margin-top: 0;
}

.page-create-plan .wz-summary__eyebrow {
    margin: 0 0 var(--spacing-2);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-muted);
}

.page-create-plan .wz-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3) 0;
    border-top: 1px solid var(--color-border);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text-light);
}

.page-create-plan .wz-summary__row strong {
    color: var(--home-ink);
    font-weight: 700;
}

.page-create-plan .wz-summary__edit {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.page-create-plan .wz-summary__edit:hover {
    text-decoration: underline;
}

/* ============================================================================
   Step 4 — estimate
   ============================================================================ */

.page-create-plan .wz-readout {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: right;
}

.page-create-plan .wz-readout__muted {
    font-weight: 600;
}

/* --- Sliders --- */

.page-create-plan .wz-range,
.page-create-plan #est-target-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--wz-thumb);
    margin: 0;
    padding: 0;
    background: transparent;
}

.page-create-plan .wz-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.page-create-plan .wz-range::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.page-create-plan .wz-range::-webkit-slider-thumb,
.page-create-plan #est-target-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--wz-thumb);
    height: var(--wz-thumb);
    margin-top: calc((6px - var(--wz-thumb)) / 2);
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 1px 4px rgba(22, 32, 94, 0.32);
    cursor: pointer;
}

.page-create-plan .wz-range::-moz-range-thumb,
.page-create-plan #est-target-slider::-moz-range-thumb {
    width: var(--wz-thumb);
    height: var(--wz-thumb);
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 1px 4px rgba(22, 32, 94, 0.32);
    cursor: pointer;
}

.page-create-plan .wz-range:focus-visible::-webkit-slider-thumb,
.page-create-plan #est-target-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(43, 57, 214, 0.24);
}

.page-create-plan .wz-range-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* --- Achievable band ---
   The range input keeps the achievable band as its own min/max — no value
   remapping — and is laid over just the band region of a wider decorative
   track. initEstimateStep() writes the three percentages. */

.page-create-plan #est-target-card {
    --band-left: 25%;
    --band-width: 50%;
    --goal-left: 8%;
}

.page-create-plan .wz-band {
    text-align: center;
}

.page-create-plan .wz-band__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.page-create-plan .wz-band__range {
    margin: 2px 0 var(--spacing-3);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wz-band-ink);
}

.page-create-plan .wz-band__track {
    position: relative;
    height: var(--wz-thumb);
    margin: 0 0 var(--spacing-2);
}

.page-create-plan .wz-band__track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.page-create-plan .wz-band__fill {
    position: absolute;
    top: 50%;
    height: 9px;
    margin-top: -4.5px;
    left: var(--band-left);
    width: var(--band-width);
    border-radius: var(--radius-full);
    background: var(--wz-band-fill);
}

.page-create-plan .wz-band__tick {
    position: absolute;
    top: 50%;
    left: var(--goal-left);
    width: 2px;
    height: 26px;
    margin-top: -13px;
    border-radius: 1px;
    background: var(--home-ink);
}

.page-create-plan #est-target-slider {
    position: absolute;
    top: 0;
    /* Widened by one thumb and pulled back half of it so the thumb *centres*
       reach the band's own ends instead of stopping half a thumb inside. */
    left: calc(var(--band-left) - var(--wz-thumb) / 2);
    width: calc(var(--band-width) + var(--wz-thumb));
}

.page-create-plan #est-target-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.page-create-plan #est-target-slider::-moz-range-track {
    height: 6px;
    background: transparent;
}

.page-create-plan .wz-band__captions {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-2);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Only reserve the row for the goal label when there is one to show. */
.page-create-plan #est-target-card.has-goal .wz-band__captions {
    margin-top: 1.6rem;
}

.page-create-plan .wz-band__goal-label {
    position: absolute;
    top: -1.5rem;
    left: var(--goal-left);
    transform: translateX(-50%);
    white-space: nowrap;
    font-weight: 700;
    color: var(--home-ink);
}

.page-create-plan .wz-band__drag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-create-plan .wz-band__drag::before {
    content: '';
    width: 18px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--wz-band-fill);
}

.page-create-plan .wz-band__faster {
    white-space: nowrap;
}

/* ============================================================================
   Goal achievability card (#achievability-warning)

   Scoped here rather than in style.css because #achievability-warning exists
   nowhere but views/plan/create.php — the whole .achievability-* visual layer is
   wizard-only. Built by GoalAchievability.renderWarning().

   Same shape as .wz-band above: static markup plus JS-written CSS custom
   properties, so plan-editor.js can slide the bars during a weeks-slider drag
   without an innerHTML write that would destroy the slider being dragged.
   ============================================================================ */

.page-create-plan .achievability-card {
    /* Fallbacks for all eight geometry properties. renderWarning() writes them
       inline, but a missing style attribute must never collapse the chart. */
    --ach-fc-left: 20%;
    --ach-fc-width: 25%;
    --ach-fc-central: 32.5%;
    --ach-fc-mid: 32.5%;
    --ach-today-left: 55%;
    --ach-today-width: 25%;
    --ach-today-mid: 67.5%;
    --ach-goal-left: 45%;

    /* Overridden by the tone modifiers below. */
    --ach-card-ink: var(--ach-blue-ink);
    --ach-fc-ink: var(--ach-blue-ink);
    --ach-fc-fill: var(--ach-blue-ink);

    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--wz-shadow);
}

/* --- Tones ---
   The pill states the verdict; the forecast bar states the forecast. They are
   deliberately allowed to differ in the info tone: the today bar is always blue,
   so an info-blue forecast bar would be indistinguishable from it, and a forecast
   that beats the goal is a green fact under a blue verdict. */

.page-create-plan .achievability-card--success {
    --ach-card-ink: var(--ach-green-ink);
    --ach-fc-ink: var(--ach-green-ink);
    --ach-fc-fill: var(--ach-green-fill);
}

.page-create-plan .achievability-card--caution {
    --ach-card-ink: var(--ach-orange-ink);
    --ach-fc-ink: var(--ach-orange-ink);
    --ach-fc-fill: var(--ach-orange-ink);
}

.page-create-plan .achievability-card--info {
    --ach-card-ink: var(--ach-blue-ink);
    --ach-fc-ink: var(--ach-green-ink);
    --ach-fc-fill: var(--ach-green-fill);
}

.page-create-plan .achievability-card--error {
    --ach-card-ink: #b91c1c;
}

/* --- Head --- */

.page-create-plan .achievability-card__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Sentence case in the DOM, uppercased here: VoiceOver reads a literal
   "ON TRACK" as an initialism. */
.page-create-plan .achievability-pill {
    flex: 0 0 auto;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    background: var(--ach-card-ink);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-create-plan .achievability-headline {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--home-ink);
}

.page-create-plan .achievability-headline strong {
    font-weight: 800;
}

/* --- Chart ---
   Rows: forecast label / rail / goal + today labels. Forecast owns the top row
   alone so it can never collide with anything. Must stay overflow: visible —
   the card's padding absorbs the few px a clamped label bleeds. */

.page-create-plan .achievability-chart {
    position: relative;
    margin-top: var(--spacing-4);
    /* Top row carries the two-line forecast label; bottom row is a single line. */
    padding: 2.7rem 0 1.6rem;
    overflow: visible;
}

.page-create-plan .achievability-chart__label {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
}

/* Two stacked lines: the most likely time, then the band it sits in. Anchored on
   the notch rather than the bar's midpoint so the big number labels the point it
   is actually reporting. */
.page-create-plan .achievability-chart__label--forecast {
    top: 0;
    left: var(--ach-fc-mid);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    color: var(--ach-fc-ink);
}

.page-create-plan .achievability-chart__central {
    font-size: 1.05rem;
    font-weight: 800;
}

.page-create-plan .achievability-chart__spread {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.75;
}

.page-create-plan .achievability-chart__label--today {
    bottom: 0;
    left: var(--ach-today-mid);
    color: var(--ach-blue-ink);
}

.page-create-plan .achievability-chart__label--goal {
    bottom: 0;
    left: var(--ach-goal-left);
    color: var(--ach-tick);
}

/* The info tone is the not_ambitious_enough family: the goal sits just off the
   slow end of the today bar, so their two bottom-row labels collide at every
   width, not only on a narrow screen. Give the goal its own row throughout. */
.page-create-plan .achievability-card--info .achievability-chart {
    padding-bottom: 3.1rem;
}

.page-create-plan .achievability-card--info .achievability-chart__label--goal {
    bottom: 1.5rem;
}

.page-create-plan .achievability-chart__rail {
    position: relative;
    height: 14px;
}

.page-create-plan .achievability-chart__rail::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    border-radius: var(--radius-full);
    background: var(--ach-rail);
}

/* No transition, deliberately: the weeks slider fires `input` continuously and
   any easing would visibly lag the thumb. Nothing to gate behind
   prefers-reduced-motion as a result. */
.page-create-plan .achievability-chart__bar {
    position: absolute;
    top: 50%;
    height: 10px;
    margin-top: -5px;
    border-radius: var(--radius-full);
}

.page-create-plan .achievability-chart__bar--forecast {
    left: var(--ach-fc-left);
    width: var(--ach-fc-width);
    background: var(--ach-fc-fill);
}

.page-create-plan .achievability-chart__bar--today {
    left: var(--ach-today-left);
    width: var(--ach-today-width);
    background: var(--ach-blue-fill);
}

/* The most likely outcome inside the forecast band. It is the one number on the
   chart that moves at display granularity: roundRange widens outward, so at a 5s
   increment the band's fast edge can sit still across several seconds of real
   improvement while this notch slides. */
.page-create-plan .achievability-chart__notch {
    position: absolute;
    top: 50%;
    left: var(--ach-fc-central);
    width: 2px;
    height: 14px;
    margin-top: -7px;
    margin-left: -1px;
    border-radius: 1px;
    background: #fff;
}

.page-create-plan .achievability-chart__tick {
    position: absolute;
    top: 50%;
    left: var(--ach-goal-left);
    width: 2px;
    height: 26px;
    margin-top: -13px;
    border-radius: 1px;
    background: var(--ach-tick);
}

/* --- Legend (every card with a chart) --- */

.page-create-plan .achievability-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.page-create-plan .achievability-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-create-plan .achievability-legend__item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.page-create-plan .achievability-legend__item--today::before {
    background: var(--ach-blue-ink);
}

.page-create-plan .achievability-legend__item--forecast::before {
    background: var(--ach-fc-fill);
}

.page-create-plan .achievability-legend__item--goal::before {
    width: 2px;
    height: 13px;
    border-radius: 1px;
    background: var(--ach-tick);
}

.page-create-plan .achievability-legend__faster {
    margin-left: auto;
    white-space: nowrap;
}

/* --- Footer (offer) --- */

.page-create-plan .achievability-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

.page-create-plan .achievability-foot__prose {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--home-ink);
}

.page-create-plan .achievability-foot__prose strong {
    font-weight: 800;
}

/* --- Retarget (slider) --- */

.page-create-plan .achievability-retarget {
    margin-top: var(--spacing-4);
}

/* Also the slider's <label for>, so this bold line is what gets announced. */
.page-create-plan .achievability-retarget__label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--home-ink);
}

.page-create-plan .achievability-retarget__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--ach-rail);
    outline: none;
}

.page-create-plan .achievability-retarget__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ach-card-ink);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(22, 32, 94, 0.28);
    cursor: pointer;
}

.page-create-plan .achievability-retarget__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ach-card-ink);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(22, 32, 94, 0.28);
    cursor: pointer;
}

.page-create-plan .achievability-retarget__ends {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin: var(--spacing-1) 0 var(--spacing-3);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.page-create-plan .achievability-retarget__value {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ach-card-ink);
    text-align: center;
}

/* Live forecast at whatever duration the weeks slider is showing.
   A mark in its own column, then the sentence — so a multi-line sentence stays
   aligned instead of wrapping under the glyph. */
.page-create-plan .achievability-forecast {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 var(--spacing-3);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Filled disc, white glyph. Red is the default because the mark only exists on
   the retarget card, where the goal is out of range until the slider moves it
   in; .is-in-range then turns it green. Both fills are AA against white, and
   the shape (cross vs tick) carries the meaning independently of the colour. */
.page-create-plan .achievability-forecast__mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--ach-red-fill);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

/* Leaf name is hard-coded in the HTML rangeAtWeeks() returns — do not rename. */
.page-create-plan .achievability-forecast .achievability-forecast-time {
    font-family: var(--font-family-mono);
    white-space: nowrap;
}

.page-create-plan .achievability-forecast.is-in-range {
    color: var(--ach-green-ink);
}

.page-create-plan .achievability-forecast.is-in-range .achievability-forecast__mark {
    background: var(--ach-green-fill);
}

.page-create-plan .achievability-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.page-create-plan .achievability-note {
    margin: var(--spacing-3) 0 0;
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* --- Buttons: reuse the .btn system, just retone it --- */

.page-create-plan .achievability-card .btn-sm {
    font-family: var(--font-family-mono);
}

/* The mono face above is right for times and wrong for a date label. */
.page-create-plan .achievability-card .achievability-retarget-btn,
.page-create-plan .achievability-card .achievability-keep-btn {
    font-family: var(--font-body);
}

.page-create-plan .achievability-card .btn-primary {
    background-color: var(--ach-card-ink);
    border-color: var(--ach-card-ink);
}

.page-create-plan .achievability-card .btn-primary:hover {
    filter: brightness(0.92);
    background-color: var(--ach-card-ink);
}

/* The goal tick and the today bar share the bottom row and WILL collide for the
   whole not_ambitious_enough family, where the goal sits just off the today bar.
   Give the goal its own row and shrink the labels. */
@media (max-width: 480px) {
    .page-create-plan .achievability-chart {
        padding-bottom: 3.1rem;
    }

    .page-create-plan .achievability-chart__label {
        font-size: 0.82rem;
    }

    .page-create-plan .achievability-chart__central {
        font-size: 0.95rem;
    }

    .page-create-plan .achievability-chart__spread {
        font-size: 0.72rem;
    }

    .page-create-plan .achievability-chart__label--goal {
        bottom: 1.5rem;
    }

    .page-create-plan .achievability-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .page-create-plan .achievability-foot .btn,
    .page-create-plan .achievability-actions .btn {
        width: 100%;
    }
}

/* --- "May need multiple blocks" --- */

.page-create-plan .wz-card--warn {
    background: #fdf3e6;
    border-left: 4px solid var(--wz-band-fill);
    box-shadow: none;
}

.page-create-plan .wz-warn__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--wz-band-ink);
}

.page-create-plan .wz-warn__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

.page-create-plan .wz-warn__stats > div + div {
    padding-left: var(--spacing-4);
    border-left: 1px solid rgba(180, 83, 9, 0.25);
}

.page-create-plan .wz-warn__stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--wz-band-ink);
}

.page-create-plan .wz-warn__stats > div + div strong {
    color: var(--home-ink);
}

.page-create-plan .wz-warn__stats span {
    font-size: 0.88rem;
    color: #8a6234;
}

.page-create-plan #est-warn-prose {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--home-ink);
}

.page-create-plan .wz-reassure {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ============================================================================
   Sticky action bar
   Recipe lifted from the profile save bar (style.css:8480) — the one shape
   that is known to survive iOS Safari's dynamic toolbar.
   ============================================================================ */

.page-create-plan .wz-footer {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-3) var(--spacing-4);
    padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom));
}

.page-create-plan .wz-footer__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    max-width: var(--wz-col);
    margin: 0 auto;
}

.page-create-plan .wz-btn-back,
.page-create-plan .wz-btn-next {
    height: var(--wz-control-h);
    padding: 0 var(--spacing-5);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.page-create-plan .wz-btn-back {
    flex: 0 0 auto;
    min-width: 104px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--home-ink);
}

.page-create-plan .wz-btn-next {
    flex: 1 1 auto;
    border: 0;
    background: var(--color-accent);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 6px 18px rgba(255, 45, 120, 0.32);
}

.page-create-plan .wz-btn-next:hover:not(:disabled) {
    background: var(--color-accent-dark);
}

.page-create-plan .wz-btn-next:disabled {
    opacity: 0.5;
    box-shadow: none;
    cursor: not-allowed;
}

/* ============================================================================
   Legacy panels kept from the old wizard — widths only, so they sit inside a
   card instead of the full-width form they were written for.
   ============================================================================ */

.page-create-plan .achievability-warning,
.page-create-plan .mileage-warning,
.page-create-plan .training-days-warning,
.page-create-plan .injury-history-info,
.page-create-plan .equivalent-time-info {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Warnings that live directly in a fieldset need their own card surface.
   #achievability-warning is not in the list: the card inside it carries its own
   radius, border and shadow. */
.page-create-plan #mileage-warning,
.page-create-plan #training-days-warning {
    border-radius: 12px;
}