.wmltft {
    --wm-blue: #2F5496;
    --wm-light-blue: #8EAADB;
    --wm-yellow: #FCD326;
    --wm-bg: #F7F9FA;
    --wm-text: #263548;
    --wm-muted: #5F6B7A;
    --wm-line: #D9E1EC;
    --wm-soft-blue: #EEF3FA;
    --wm-soft-yellow: #FFF8D9;
    --wm-soft-red: #FCEDED;
    --wm-red: #A83232;
    --wm-green: #327552;
    font-family: "Manrope", sans-serif;
    color: var(--wm-text);
    /* Let WordPress own native alignwide geometry. Forcing width:100% here
       can combine with the theme's alignwide breakout and make the page
       wider than its containing layout, creating horizontal page scrolling. */
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.wmltft *, .wmltft *::before, .wmltft *::after { box-sizing: border-box; }
.wmltft button, .wmltft input, .wmltft select { font: inherit; }
.wmltft button:focus:not(:focus-visible), .wmltft input:focus:not(:focus-visible), .wmltft select:focus:not(:focus-visible), .wmltft summary:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.wmltft button:focus-visible, .wmltft input:focus-visible, .wmltft select:focus-visible, .wmltft summary:focus-visible { outline: 2px solid var(--wm-yellow); outline-offset: 3px; }

.wmltft__intro { margin-bottom: 2rem; }
.wmltft__eyebrow { margin: 0 0 .35rem; color: var(--wm-light-blue); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wmltft__heading { display: inline-block; position: relative; margin: 0 0 .8rem; color: var(--wm-blue); font-size: clamp(1.65rem, 2.1vw, 2.2rem); font-weight: 600; line-height: 1.1; }
.wmltft__heading::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.35rem; height: 1px; background: var(--wm-yellow); }
.wmltft__lead { max-width: 850px; margin: 0; color: var(--wm-muted); font-size: clamp(1.02rem, .96rem + .18vw, 1.14rem); }

.wmltft__section { margin: 0 0 2.2rem; }
.wmltft__section-heading { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; margin-bottom: 1rem; }
.wmltft__section-heading h3 { display: inline-block; position: relative; margin: 0 0 .45rem; color: var(--wm-blue); font-size: clamp(1.25rem, 1.4vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.wmltft__section-heading h3::after { content: ""; display: block; width: 100%; height: 1px; background: var(--wm-yellow); margin-top: .35rem; }
.wmltft__section-heading p { margin: 0; max-width: 860px; color: var(--wm-muted); font-size: .98rem; }
.wmltft__step { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; color: var(--wm-blue); background: var(--wm-soft-yellow); border: 1px solid #F1E3A1; border-radius: .55rem; font-weight: 700; font-size: .82rem; }

.wmltft__start-controls { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(130px, .55fr) minmax(220px, 1fr); gap: .9rem; align-items: end; padding: 1.15rem; background: var(--wm-bg); border: 1px solid var(--wm-line); border-radius: .7rem; }
.wmltft__field { min-width: 0; display: flex; flex-direction: column; gap: .38rem; }
.wmltft__field > span { color: var(--wm-muted); font-size: .82rem; font-weight: 650; }
.wmltft__field em { font-weight: 400; font-style: normal; }
.wmltft__field input, .wmltft__field select { width: 100%; height: 46px; min-height: 46px; padding: .62rem .75rem; color: var(--wm-text); background: #fff; border: 1px solid #BFCBDB; border-radius: .45rem; box-sizing: border-box; }
/* Start row: keep the three visible controls the same height.
   Edge can clip Manrope inside a native select when vertical padding and a
   fixed line-height are combined, so the browser centres the select text
   within the 52px control and we use horizontal padding only. */
.wmltft__start-controls .wmltft__field select {
    height: 52px;
    min-height: 52px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: .75rem;
    padding-right: 2.35rem;
    line-height: normal !important;
    font-size: 1rem;
}
.wmltft__start-date { min-height: 52px; height: 52px; box-sizing: border-box; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem .75rem; background: #fff; border: 1px solid #BFCBDB; border-left: 3px solid var(--wm-yellow); border-radius: .45rem; }
.wmltft__start-date span { color: var(--wm-muted); font-size: .82rem; }
.wmltft__start-date strong { color: var(--wm-blue); font-size: 1.03rem; text-align: right; }

.wmltft__placement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.wmltft__placement { min-width: 0; padding: .9rem 1rem; background: #fff; border: 1px solid var(--wm-line); border-top: 3px solid var(--wm-blue); border-radius: .55rem; }
.wmltft__placement[data-type="GP"] { border-top-color: var(--wm-yellow); }
.wmltft__placement-top { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .45rem; }
.wmltft__placement-title { color: var(--wm-blue); font-weight: 700; }
.wmltft__placement-stage { color: var(--wm-muted); font-size: .77rem; font-weight: 650; }
.wmltft__placement-dates { display: block; margin-bottom: .7rem; color: var(--wm-muted); font-size: .85rem; }
.wmltft__placement select { width: 100%; min-height: 42px; padding: .5rem .65rem; border: 1px solid #BFCBDB; border-radius: .4rem; background: #fff; color: var(--wm-text); }
.wmltft__microcopy { margin: .75rem 0 0; color: var(--wm-muted); font-size: .82rem; }

.wmltft__change-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.wmltft__change-panel { min-width: 0; padding: 1rem; background: var(--wm-bg); border: 1px solid var(--wm-line); border-radius: .65rem; }
.wmltft__change-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; margin-bottom: .9rem; }
.wmltft__change-head h4 { margin: 0 0 .2rem; color: var(--wm-blue); font-size: 1.02rem; }
.wmltft__change-head p { margin: 0; color: var(--wm-muted); font-size: .82rem; }
.wmltft__change-badge { flex: 0 0 auto; padding: .25rem .48rem; background: var(--wm-soft-yellow); color: var(--wm-blue); border: 1px solid #F1E3A1; border-radius: .35rem; font-size: .72rem; font-weight: 700; }
.wmltft__change-badge--quiet { background: #EEF1F4; border-color: #D6DDE4; color: var(--wm-muted); }
.wmltft__change-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: end; }
.wmltft__change-form .wmltft__field--wide { grid-column: 1 / -1; }
.wmltft__change-form .wmltft__button { grid-column: 1 / -1; justify-self: start; }
.wmltft__button { min-height: 42px; padding: .62rem 1rem; border: 1px solid var(--wm-blue); border-radius: .38rem; background: var(--wm-blue); color: #fff; font-weight: 650; cursor: pointer; }
@media (hover:hover) and (pointer:fine) { .wmltft__button:hover { filter: brightness(.94); } }
.wmltft__button--secondary { background: #fff; color: var(--wm-blue); }
.wmltft__form-message { min-height: 1.2em; margin: .55rem 0 0; color: var(--wm-red); font-size: .8rem; font-weight: 600; }
.wmltft__entries { display: grid; gap: .45rem; margin-top: .55rem; }

.wmltft__change-note { margin: .75rem 0 0; padding-top: .65rem; border-top: 1px solid var(--wm-line); color: var(--wm-muted); font-size: .8rem; line-height: 1.3; }
.wmltft__change-note strong { color: var(--wm-blue); font-weight: 650; }
.wmltft__entry { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .55rem .65rem; background: #fff; border: 1px solid var(--wm-line); border-radius: .42rem; font-size: .82rem; }
.wmltft__entry-main { min-width: 0; }
.wmltft__entry-main strong { color: var(--wm-blue); }
.wmltft__entry-main span { color: var(--wm-muted); }
.wmltft__entry button { flex: 0 0 auto; border: 0; background: transparent; color: var(--wm-red); cursor: pointer; font-weight: 650; padding: .35rem; }

.wmltft__journey { margin: 2.8rem 0 1.2rem; padding: 1.2rem; background: var(--wm-soft-blue); border: 1px solid #CFDCEC; border-radius: .75rem; }
.wmltft__section-heading--journey { margin-bottom: 1.2rem; }
.wmltft__journey-key { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 .95rem 3.2rem; color: var(--wm-muted); font-size: .78rem; }
.wmltft__journey-key span { display: inline-flex; gap: .35rem; align-items: center; }
.wmltft__key-swatch { width: 1rem; height: .55rem; border-radius: .12rem; background: var(--wm-blue); }
.wmltft__key-swatch--gp { background: var(--wm-yellow); }
.wmltft__key-swatch--ltft { background: repeating-linear-gradient(135deg, rgba(47,84,150,.2) 0 3px, rgba(47,84,150,.65) 3px 6px); }
.wmltft__key-swatch--timeout { background: repeating-linear-gradient(135deg, #77818c 0 3px, #b8c0c8 3px 6px); }
.wmltft__timeline-shell { overflow-x: hidden; padding: .45rem 0 1rem; width: 100%; }
.wmltft__timeline { position: relative; width: 100%; min-width: 0; height: 220px; }
.wmltft__stage-band { position: absolute; left: 0; right: 0; top: 0; height: 38px; display: flex; overflow: hidden; border-radius: .4rem; border: 1px solid #C9D7E8; background: #fff; }
.wmltft__stage-segment { display: flex; align-items: center; justify-content: center; color: var(--wm-blue); font-weight: 700; font-size: .82rem; border-right: 1px solid #CFDCEC; }
.wmltft__stage-segment:last-child { border-right: 0; }
.wmltft__placements-band { position: absolute; left: 0; right: 0; top: 78px; height: 72px; display: flex; border-radius: .45rem; overflow: hidden; background: #fff; border: 1px solid #C7D2E1; }
.wmltft__timeline-placement { position: relative; min-width: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem; padding: .35rem; color: #fff; background: var(--wm-blue); border-right: 1px solid rgba(255,255,255,.5); text-align: center; overflow: hidden; }
.wmltft__timeline-placement[data-type="GP"] { background: var(--wm-yellow); color: var(--wm-blue); }
.wmltft__timeline-placement strong { font-size: .78rem; white-space: nowrap; }
.wmltft__timeline-placement small { font-size: .68rem; opacity: .9; white-space: nowrap; }
.wmltft__timeline-overlay { position: absolute; bottom: 0; height: 12px; z-index: 3; }
.wmltft__timeline-overlay--ltft { background: repeating-linear-gradient(135deg, rgba(255,255,255,.25) 0 3px, rgba(35,51,74,.72) 3px 6px); }
.wmltft__timeline-overlay--timeout { top: 0; bottom: 0; height: auto; background: repeating-linear-gradient(135deg, rgba(70,78,87,.76) 0 5px, rgba(190,197,204,.8) 5px 10px); }
.wmltft__marker { position: absolute; top: 36px; bottom: 27px; width: 2px; background: var(--wm-blue); z-index: 8; }
.wmltft__marker::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--wm-yellow); border: 2px solid var(--wm-blue); }
.wmltft__marker-label { position: absolute; top: 154px; transform: translateX(-50%); z-index: 9; min-width: 112px; padding: .35rem .45rem; background: #fff; border: 1px solid #C9D7E8; border-radius: .35rem; text-align: center; color: var(--wm-blue); font-size: .7rem; line-height: 1.3; }
.wmltft__marker-label strong { display: block; margin-bottom: .12rem; }
.wmltft__timeline-start, .wmltft__timeline-end { position: absolute; top: 156px; color: var(--wm-muted); font-size: .68rem; }
.wmltft__timeline-start { left: 0; }
.wmltft__timeline-end { right: 0; text-align: right; }
.wmltft__mobile-journey { display: none; }

.wmltft__milestones { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; margin-top: .6rem; }
.wmltft__milestone { min-width: 0; padding: .8rem .9rem; background: #fff; border-left: 3px solid var(--wm-yellow); }
.wmltft__milestone--cct { border-left-color: var(--wm-yellow); }
.wmltft__milestone span { display: block; color: var(--wm-muted); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.wmltft__milestone strong { display: block; margin: .18rem 0; color: var(--wm-blue); font-size: clamp(1.02rem, 1.35vw, 1.2rem); }
.wmltft__milestone small { color: var(--wm-muted); font-size: .75rem; }

.wmltft__summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; margin: 1.1rem 0 1.5rem; }
.wmltft__summary-card { padding: .95rem 1rem; background: #fff; border: 1px solid var(--wm-line); border-radius: .55rem; }
.wmltft__summary-card > span { display: block; color: var(--wm-muted); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.wmltft__summary-card strong { display: block; margin: .2rem 0; color: var(--wm-blue); font-size: 1.25rem; }
.wmltft__summary-card small { color: var(--wm-muted); font-size: .78rem; }
.wmltft__summary-card[data-status="ok"] { border-top: 3px solid var(--wm-green); }
.wmltft__summary-card[data-status="maybe"] { border-top: 3px solid var(--wm-yellow); }
.wmltft__summary-card[data-status="warn"] { border-top: 3px solid var(--wm-red); }

.wmltft__details, .wmltft__assumptions { margin: 1rem 0; border-top: 1px solid var(--wm-line); border-bottom: 1px solid var(--wm-line); }
.wmltft__details summary, .wmltft__assumptions summary { cursor: pointer; padding: .85rem .1rem; color: var(--wm-blue); font-weight: 650; }
.wmltft__detail-content, .wmltft__assumptions > div { padding: 0 0 1rem; }
.wmltft__detail-table-wrap { overflow-x: auto; }
.wmltft__detail-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .8rem; }
.wmltft__detail-table th { padding: .58rem .55rem; text-align: left; color: var(--wm-muted); background: var(--wm-bg); border-bottom: 1px solid var(--wm-line); white-space: nowrap; }
.wmltft__detail-table td { padding: .58rem .55rem; border-bottom: 1px solid var(--wm-line); vertical-align: top; }
.wmltft__detail-table tr:last-child td { border-bottom: 0; }
.wmltft__actions { display: flex; gap: .65rem; flex-wrap: wrap; margin: 1.2rem 0; }
.wmltft__assumptions p { margin: 0 0 .75rem; color: var(--wm-muted); font-size: .9rem; }
.wmltft__notice { margin-top: 1.4rem; padding: .9rem 1rem; background: var(--wm-soft-yellow); border-left: 3px solid var(--wm-yellow); }
.wmltft__notice strong { color: var(--wm-blue); }
.wmltft__notice p { margin: .25rem 0 0; color: var(--wm-muted); font-size: .88rem; }

.wmltft-editor-preview { padding: 1rem; border: 1px dashed #8EAADB; }
.wmltft-editor-preview__inner strong { color: #2F5496; }
.wmltft-editor-preview__inner p { margin: .35rem 0 0; color: #5F6B7A; }

@media (max-width: 900px) {
    .wmltft__placement-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .wmltft__change-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .wmltft__start-controls { grid-template-columns: 1fr 1fr; }
    .wmltft__start-date { grid-column: 1 / -1; }
    .wmltft__timeline-shell, .wmltft__journey-key { display: none; }
    .wmltft__mobile-journey { display: grid; gap: .55rem; }
    .wmltft__mobile-item { position: relative; padding: .75rem .8rem .75rem 1rem; background: #fff; border-left: 4px solid var(--wm-blue); border-radius: .4rem; }
    .wmltft__mobile-item[data-type="GP"] { border-left-color: var(--wm-yellow); }
    .wmltft__mobile-item-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
    .wmltft__mobile-item-top strong { color: var(--wm-blue); }
    .wmltft__mobile-item-top span { color: var(--wm-muted); font-size: .76rem; }
    .wmltft__mobile-item p { margin: .2rem 0 0; color: var(--wm-muted); font-size: .8rem; }
    .wmltft__mobile-tag { display: inline-block; margin-top: .4rem; padding: .18rem .4rem; background: var(--wm-soft-blue); color: var(--wm-blue); border-radius: .28rem; font-size: .72rem; font-weight: 650; }
    .wmltft__mobile-tag--timeout { background: #EEF1F4; color: var(--wm-muted); }
    .wmltft__mobile-transition { margin: .05rem 0 .05rem 1.15rem; padding-left: .75rem; border-left: 2px solid var(--wm-yellow); color: var(--wm-blue); font-size: .78rem; font-weight: 650; }
    .wmltft__milestones, .wmltft__summary { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .wmltft__section-heading { grid-template-columns: 1fr; gap: .55rem; }
    .wmltft__step { width: auto; height: auto; display: inline-block; justify-self: start; padding: .2rem .4rem; border-radius: .3rem; }
    .wmltft__placement-grid { grid-template-columns: 1fr; }
    .wmltft__change-form { grid-template-columns: 1fr; }
    .wmltft__change-form .wmltft__field--wide, .wmltft__change-form .wmltft__button { grid-column: auto; }
    .wmltft__start-controls { grid-template-columns: 1fr; }
    .wmltft__start-date { grid-column: auto; align-items: flex-start; flex-direction: column; gap: .2rem; }
    .wmltft__start-date strong { text-align: left; }
    .wmltft__journey { padding: .9rem; }
    .wmltft__actions { flex-direction: column; }
    .wmltft__actions .wmltft__button { width: 100%; }
}

/* v1.0.12 — native Wide Width + non-scrollable journey.
   WordPress owns the outer alignwide width. The journey itself is a
   proportional diagram and never becomes a horizontal scroll container. */
.wmltft__journey,
.wmltft__timeline-shell,
.wmltft__timeline {
    min-width: 0;
    max-width: 100%;
}
.wmltft__journey {
    overflow-x: hidden;
}
.wmltft__timeline-shell {
    width: auto;
    overflow: visible;
}
.wmltft__timeline {
    width: 100%;
    overflow: visible;
}
.wmltft__stage-band,
.wmltft__placements-band {
    width: auto;
    max-width: 100%;
    min-width: 0;
}
.wmltft__stage-segment,
.wmltft__timeline-placement {
    min-width: 0;
}

/* v1.0.13 — keep the CCT endpoint marker visibly inside the timeline.
   The underlying date remains exact; only the visual marker is inset 5px
   so its circular cap is not clipped at the 100% boundary. */


/* v1.0.14 — true CCT endpoint alignment.
   The placement band ends at the real calculated CCT boundary, and the CCT
   marker sits on that same boundary. Marker decoration may extend a few
   pixels into the journey panel's existing right padding, while the stage
   and placement bands remain clipped within their own rounded boxes. */
.wmltft__marker--end {
    transform: translateX(-1px);
}
.wmltft__stage-band,
.wmltft__placements-band {
    overflow: hidden;
}

/* v1.0.15 — dedicated vertical training journey for stacked/mobile layouts. */
@media (max-width: 700px) {
    .wmltft__mobile-journey {
        display: grid;
        gap: 0;
        margin-top: .35rem;
    }

    .wmltft__mobile-vrow {
        position: relative;
        display: grid;
        grid-template-columns: 3.3rem 2rem minmax(0, 1fr);
        min-height: 104px;
        column-gap: .72rem;
        align-items: stretch;
    }

    .wmltft__mobile-stage-col {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: .1rem;
        color: var(--wm-blue);
        font-size: .76rem;
        font-weight: 700;
    }

    .wmltft__mobile-stage-label {
        display: inline-block;
        white-space: nowrap;
    }

    .wmltft__mobile-stage-label--top,
    .wmltft__mobile-stage-label--bottom {
        position: absolute;
        right: .1rem;
    }

    .wmltft__mobile-stage-label--top { top: .42rem; }
    .wmltft__mobile-stage-label--bottom { bottom: .42rem; }

    .wmltft__mobile-rail {
        position: relative;
        width: 100%;
        min-height: 104px;
        overflow: hidden;
        background: var(--wm-blue);
        border-left: 1px solid rgba(255,255,255,.65);
        border-right: 1px solid rgba(255,255,255,.65);
    }

    .wmltft__mobile-vrow:first-child .wmltft__mobile-rail {
        border-radius: .4rem .4rem 0 0;
    }

    .wmltft__mobile-vrow:last-of-type .wmltft__mobile-rail {
        border-radius: 0 0 .4rem .4rem;
    }

    .wmltft__mobile-rail[data-type="GP"] {
        background: var(--wm-yellow);
    }

    .wmltft__mobile-rail-overlay {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .wmltft__mobile-rail-overlay--ltft {
        background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 5px, rgba(47,84,150,.58) 5px 10px);
    }

    .wmltft__mobile-rail-overlay--timeout {
        background: repeating-linear-gradient(135deg, #717B86 0 5px, #B4BDC6 5px 10px);
    }

    .wmltft__mobile-vcontent {
        min-width: 0;
        align-self: center;
        display: flex;
        flex-direction: column;
        gap: .18rem;
        padding: .65rem .15rem .65rem 0;
    }

    .wmltft__mobile-vtitle {
        color: var(--wm-blue);
        font-size: .94rem;
        line-height: 1.3;
    }

    .wmltft__mobile-vdates {
        color: var(--wm-muted);
        font-size: .78rem;
        line-height: 1.3;
    }

    .wmltft__mobile-vnote {
        align-self: flex-start;
        margin-top: .18rem;
        padding: .18rem .38rem;
        border-radius: .28rem;
        background: var(--wm-soft-blue);
        color: var(--wm-blue);
        font-size: .7rem;
        font-weight: 650;
    }

    .wmltft__mobile-vnote--timeout {
        background: #EEF1F4;
        color: var(--wm-muted);
    }

    .wmltft__mobile-cross-marker {
        position: absolute;
        z-index: 4;
        left: 3.3rem;
        right: 0;
        height: 0;
        border-top: 2px solid var(--wm-blue);
        pointer-events: none;
    }

    .wmltft__mobile-cross-marker::before {
        content: "";
        position: absolute;
        left: calc(2rem + .72rem - 5px);
        top: -5px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--wm-yellow);
        border: 2px solid var(--wm-blue);
    }

    .wmltft__mobile-cross-marker span {
        position: absolute;
        left: calc(2rem + .72rem + .55rem);
        top: -1.05rem;
        padding: .12rem .3rem;
        background: var(--wm-soft-blue);
        color: var(--wm-blue);
        font-size: .69rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
    }

    .wmltft__mobile-cct-row {
        display: grid;
        grid-template-columns: 3.3rem 2rem minmax(0, 1fr);
        column-gap: .72rem;
        align-items: center;
        min-height: 48px;
    }

    .wmltft__mobile-cct-stage {
        justify-self: end;
        color: var(--wm-blue);
        font-size: .76rem;
        font-weight: 700;
    }

    .wmltft__mobile-cct-rail {
        position: relative;
        display: block;
        width: 2rem;
        height: 2px;
        background: var(--wm-blue);
    }

    .wmltft__mobile-cct-rail::after {
        content: "";
        position: absolute;
        right: -4px;
        top: -4px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--wm-yellow);
        border: 2px solid var(--wm-blue);
    }

    .wmltft__mobile-cct-text {
        color: var(--wm-blue);
        font-size: .78rem;
        font-weight: 700;
    }

    /* Supersede the earlier card-style mobile journey. */
    .wmltft__mobile-item,
    .wmltft__mobile-transition { display: none !important; }
}


/* v1.0.16 — mobile journey and form containment refinement. */
@media (max-width: 700px) {
    /* Native date inputs can carry a large intrinsic inline size. Force every
       mobile form control to respect the panel width rather than overflowing. */
    .wmltft__change-panel,
    .wmltft__change-form,
    .wmltft__change-form .wmltft__field,
    .wmltft__change-form input,
    .wmltft__change-form select {
        min-width: 0;
        max-width: 100%;
    }
    .wmltft__change-form input[type="date"],
    .wmltft__change-form input[type="text"],
    .wmltft__change-form select {
        display: block;
        width: 100%;
        inline-size: 100%;
        min-inline-size: 0;
    }

    /* Clear white placement boundaries, including between consecutive GP
       blocks where yellow-on-yellow otherwise hides the six-month divider. */
    .wmltft__mobile-rail--placement-divider {
        border-top: 3px solid #fff;
    }

    /* LTFT remains visibly secondary: only the right half of the rail is
       hatched. Time out remains a full-width interruption. */
    .wmltft__mobile-rail-overlay--ltft {
        left: 50%;
        right: 0;
        width: 50%;
    }
    .wmltft__mobile-rail--timeout {
        background: #AAB3BD;
    }
    .wmltft__mobile-rail-overlay--timeout {
        left: 0;
        right: 0;
        width: 100%;
    }

    /* The CCT marker belongs to the end of the final training block rather
       than a separate row. Label on the left; date on the right. */
    .wmltft__mobile-vrow--last {
        padding-bottom: 1.35rem;
    }
    .wmltft__mobile-cct-marker {
        position: absolute;
        z-index: 5;
        left: 0;
        right: 0;
        bottom: .25rem;
        display: grid;
        grid-template-columns: 3.3rem 2rem minmax(0, 1fr);
        column-gap: .72rem;
        align-items: center;
        color: var(--wm-blue);
        font-size: .76rem;
        pointer-events: none;
    }
    .wmltft__mobile-cct-marker::before {
        content: "";
        position: absolute;
        left: calc(3.3rem + .72rem);
        right: 0;
        top: 50%;
        border-top: 2px solid var(--wm-blue);
        z-index: -1;
    }
    .wmltft__mobile-cct-marker::after {
        content: "";
        position: absolute;
        left: calc(3.3rem + .72rem + 2rem - 5px);
        top: calc(50% - 5px);
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--wm-yellow);
        border: 2px solid var(--wm-blue);
    }
    .wmltft__mobile-cct-marker strong {
        grid-column: 1;
        justify-self: end;
        padding-right: .1rem;
        background: var(--wm-soft-blue);
    }
    .wmltft__mobile-cct-marker span {
        grid-column: 3;
        justify-self: start;
        padding: .08rem .3rem;
        background: var(--wm-soft-blue);
        font-weight: 700;
    }

    /* The old standalone CCT row is no longer used. */
    .wmltft__mobile-cct-row { display: none !important; }
}

@media (max-width: 520px) {
    /* Keep calculated start date on one line on mobile: label left, date right. */
    .wmltft__start-date {
        min-height: 52px;
        height: 52px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .65rem;
        padding-top: 0;
        padding-bottom: 0;
    }
    .wmltft__start-date span,
    .wmltft__start-date strong {
        line-height: 1.3;
        white-space: nowrap;
    }
    .wmltft__start-date strong {
        text-align: right;
    }

    .wmltft__change-form {
        width: 100%;
    }
    .wmltft__change-form .wmltft__field {
        width: 100%;
    }
}


/* v1.0.17 — mobile stage-marker labels, CCT endpoint and iPhone form containment. */
@media (max-width: 700px) {
    /* Stage transition marker: stop at the rail. Nothing is drawn through the
       post-details column, so labels can never collide with placement copy. */
    .wmltft__mobile-cross-marker {
        left: 0;
        right: auto;
        width: calc(3.3rem + .72rem + 2rem);
        border-top: 2px solid var(--wm-blue);
    }
    .wmltft__mobile-cross-marker::before {
        left: calc(3.3rem + .72rem + 2rem - 5px);
    }
    .wmltft__mobile-cross-marker span {
        display: none !important;
    }

    /* Exact ST2/ST3 transition label lives in the stage column at the same
       vertical position as its marker. The date is deliberately quieter. */
    .wmltft__mobile-stage-transition {
        position: absolute;
        right: .1rem;
        z-index: 6;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.3;
        color: var(--wm-blue);
        white-space: nowrap;
        pointer-events: none;
    }
    .wmltft__mobile-stage-transition strong {
        font-size: .76rem;
        font-weight: 700;
    }
    .wmltft__mobile-stage-transition small {
        margin-top: .12rem;
        font-size: .61rem;
        font-weight: 500;
        color: var(--wm-muted);
    }

    /* The CCT marker is the literal end of the coloured training rail. It does
       not create an extra row or gap after training. */
    .wmltft__mobile-vrow--last {
        padding-bottom: 0;
    }
    .wmltft__mobile-cct-marker {
        bottom: 0;
        height: 0;
        display: grid;
        grid-template-columns: 3.3rem 2rem minmax(0, 1fr);
        column-gap: .72rem;
        align-items: end;
        font-size: .76rem;
    }
    .wmltft__mobile-cct-marker::before {
        left: 0;
        right: auto;
        width: calc(3.3rem + .72rem + 2rem);
        top: 0;
        z-index: 0;
    }
    .wmltft__mobile-cct-marker::after {
        left: calc(3.3rem + .72rem + 2rem - 5px);
        top: -5px;
    }
    .wmltft__mobile-cct-marker strong {
        position: absolute;
        right: calc(100% - 3.3rem);
        bottom: .12rem;
        grid-column: auto;
        justify-self: auto;
        padding: 0 .1rem 0 0;
        background: var(--wm-soft-blue);
        color: var(--wm-blue);
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.1;
    }
    .wmltft__mobile-cct-marker span {
        position: absolute;
        left: calc(3.3rem + .72rem + 2rem + .72rem);
        bottom: .08rem;
        grid-column: auto;
        justify-self: auto;
        padding: 0 .25rem;
        background: var(--wm-soft-blue);
        color: var(--wm-muted);
        font-size: .66rem;
        font-weight: 500;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* iOS/Safari date controls have a stubborn intrinsic minimum width.
       Give the field, grid item and native control an explicit zero minimum,
       and remove the native appearance that can force the control wider than
       the panel on iPhone. The date picker behaviour remains native. */
    .wmltft__change-panel,
    .wmltft__change-form,
    .wmltft__change-form > *,
    .wmltft__change-form .wmltft__field {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }
    .wmltft__change-panel {
        overflow: hidden;
    }
    .wmltft__change-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .wmltft__change-form input[type="date"],
    .wmltft__change-form input[type="text"],
    .wmltft__change-form select {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-inline-size: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px;
    }
    .wmltft__change-form input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        overflow: hidden;
    }
    .wmltft__change-form input[type="date"]::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 520px) {
    /* Start-date result is one tidy line on iPhone: same control height,
       label left, calculated date right, with no clipped descenders. */
    .wmltft__start-date {
        height: 52px !important;
        min-height: 52px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden;
    }
    .wmltft__start-date span,
    .wmltft__start-date strong {
        display: block;
        line-height: 1.2 !important;
        margin: 0;
        padding: 0;
    }
}

/* v1.0.19 — mobile annotation simplification and definitive marker ownership. */
@media (max-width: 700px) {
    /* ST2/ST3 labels belong to the section after the transition. JS positions
       the group just below the exact marker; do not translate it back upward. */
    .wmltft__mobile-stage-transition {
        transform: none;
        right: .1rem;
        align-items: flex-end;
        line-height: 1.3;
    }
    .wmltft__mobile-stage-transition strong {
        display: block;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.3;
    }
    .wmltft__mobile-stage-transition small {
        display: block;
        margin-top: .18rem;
        font-size: .62rem;
        font-weight: 500;
        line-height: 1.3;
        color: var(--wm-muted);
    }

    /* CCT is an endpoint annotation aligned with the placement-details column:
       marker/circle first, then CCT · full date on one compact line. */
    .wmltft__mobile-cct-marker .wmltft__mobile-cct-textline {
        left: calc(3.3rem + .72rem + 2rem + .72rem);
        top: 0;
        transform: translateY(-50%);
        gap: .32rem;
        min-height: 1.25rem;
        padding: .06rem .25rem;
        background: var(--wm-soft-blue);
        white-space: nowrap;
    }
    .wmltft__mobile-cct-marker .wmltft__mobile-cct-textline strong {
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.3;
    }
    .wmltft__mobile-cct-marker .wmltft__mobile-cct-textline i {
        width: 4px;
        height: 4px;
        flex: 0 0 4px;
    }
    .wmltft__mobile-cct-marker .wmltft__mobile-cct-textline span {
        font-size: .66rem;
        font-weight: 500;
        line-height: 1.3;
    }
}


/* v1.0.20 — final mobile marker spacing and CCT alignment. */
@media (max-width: 700px) {
    /* The new training stage starts after the divider. Give the label enough
       vertical clearance that neither ST2/ST3 nor its compact date can read as
       belonging to the section above the marker. */
    .wmltft__mobile-stage-transition {
        transform: none !important;
        right: .1rem;
        z-index: 7;
        align-items: flex-end;
        line-height: 1.3;
        background: var(--wm-soft-blue);
        padding-top: .02rem;
    }
    .wmltft__mobile-stage-transition strong {
        display: block;
        margin: 0;
        line-height: 1.3;
    }
    .wmltft__mobile-stage-transition small {
        display: block;
        margin-top: .18rem;
        line-height: 1.3;
    }

    /* The endpoint annotation starts on exactly the same vertical grid line as
       the normal placement title/details. Reset the older generic span grid
       placement so the content offset is applied once, not twice. */
    .wmltft__mobile-cct-marker .wmltft__mobile-cct-textline {
        grid-column: auto !important;
        justify-self: auto !important;
        position: absolute;
        left: calc(3.3rem + .72rem + 2rem + .72rem);
        top: 0;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: .32rem;
        min-height: 1.25rem;
        margin: 0;
        padding: .06rem .15rem 0 0;
        background: var(--wm-soft-blue);
        white-space: nowrap;
    }
    .wmltft__mobile-cct-marker .wmltft__mobile-cct-textline strong,
    .wmltft__mobile-cct-marker .wmltft__mobile-cct-textline span {
        grid-column: auto !important;
        justify-self: auto !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 0;
        padding: 0;
        background: transparent;
    }
}


/* v1.0.24 — final spacing polish. */
.wmltft {
    /* Give the calculator the same breathing room below it as other page sections. */
    margin-bottom: 2rem;
}

@media (max-width: 700px) {
    /* Percentage changes inside one placement are a single compact annotation. */
    .wmltft__mobile-vnotes {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .04rem;
        margin-top: .18rem;
    }
    .wmltft__mobile-vnotes .wmltft__mobile-vnote {
        margin-top: 0;
        line-height: 1.1;
    }
}


/* v1.0.25 — mobile journey-to-milestones breathing room. */
@media (max-width: 700px) {
    .wmltft__mobile-journey + .wmltft__milestones {
        margin-top: 1.6rem;
    }
}

/* v1.0.26 — two-tool LTFT interface: Training journey + GP timetable. */
.wmltft__tabs {
    display: flex;
    gap: .5rem;
    margin: -0.55rem 0 2rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--wm-line);
}
.wmltft__tab {
    min-height: 42px;
    padding: .62rem 1rem;
    border: 1px solid #BFCBDB;
    border-radius: .38rem;
    background: #fff;
    color: var(--wm-blue);
    font-weight: 650;
    cursor: pointer;
}
.wmltft__tab.is-active {
    border-color: var(--wm-blue);
    background: var(--wm-blue);
    color: #fff;
}
@media (hover:hover) and (pointer:fine) {
    .wmltft__tab:not(.is-active):hover { border-color: var(--wm-blue); }
}
.wmltft__tab-panel[hidden] { display: none !important; }

.wmltft__timetable-section { margin-bottom: 0; }
.wmltft__timetable-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--wm-bg);
    border: 1px solid var(--wm-line);
    border-radius: .7rem;
}
.wmltft__timetable-picker-label {
    color: var(--wm-muted);
    font-size: .82rem;
    font-weight: 650;
}
.wmltft__timetable-pcts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .45rem;
    min-width: 0;
}
.wmltft__timetable-pcts button {
    min-width: 0;
    min-height: 42px;
    padding: .55rem .35rem;
    border: 1px solid #BFCBDB;
    border-radius: .38rem;
    background: #fff;
    color: var(--wm-blue);
    font-weight: 700;
    cursor: pointer;
}
.wmltft__timetable-pcts button.is-active {
    background: var(--wm-blue);
    border-color: var(--wm-blue);
    color: #fff;
}
@media (hover:hover) and (pointer:fine) {
    .wmltft__timetable-pcts button:not(.is-active):hover { border-color: var(--wm-blue); }
}

.wmltft__timetable-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
.wmltft__timetable-overview article,
.wmltft__timetable-edu-grid article {
    min-width: 0;
    padding: .95rem 1rem;
    background: #fff;
    border: 1px solid var(--wm-line);
    border-radius: .55rem;
}
.wmltft__timetable-overview article { border-top: 3px solid var(--wm-blue); }
.wmltft__timetable-overview article:nth-child(3) { border-top-color: var(--wm-yellow); }
.wmltft__timetable-overview span,
.wmltft__timetable-edu-grid span {
    display: block;
    margin-bottom: .25rem;
    color: var(--wm-muted);
    font-size: .75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.wmltft__timetable-overview strong,
.wmltft__timetable-edu-grid strong {
    display: block;
    color: var(--wm-blue);
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.3;
}

.wmltft__timetable-edu {
    padding: 1rem;
    background: var(--wm-soft-blue);
    border: 1px solid #CFDCEC;
    border-radius: .7rem;
}
.wmltft__timetable-edu-head { margin-bottom: .85rem; }
.wmltft__timetable-edu-head h4 {
    display: inline-block;
    margin: 0 0 .35rem;
    color: var(--wm-blue);
    font-size: 1.05rem;
    font-weight: 650;
    border-bottom: 1px solid var(--wm-yellow);
}
.wmltft__timetable-edu-head p {
    margin: 0;
    color: var(--wm-muted);
    font-size: .88rem;
}
.wmltft__timetable-edu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}
.wmltft__timetable-edu-grid article { border-top: 3px solid var(--wm-yellow); }
.wmltft__timetable-edu-grid small {
    display: block;
    margin-top: .42rem;
    color: var(--wm-muted);
    font-size: .76rem;
    line-height: 1.3;
}
.wmltft__timetable-note {
    margin-top: 1rem;
    padding: .9rem 1rem;
    background: var(--wm-soft-yellow);
    border-left: 3px solid var(--wm-yellow);
}
.wmltft__timetable-note strong { color: var(--wm-blue); }
.wmltft__timetable-note p {
    margin: .25rem 0 0;
    color: var(--wm-muted);
    font-size: .88rem;
}

@media (max-width: 700px) {
    .wmltft__tabs { margin-bottom: 1.5rem; }
    .wmltft__tab { flex: 1 1 0; padding-left: .65rem; padding-right: .65rem; }
    .wmltft__timetable-picker { grid-template-columns: 1fr; gap: .55rem; }
    .wmltft__timetable-overview,
    .wmltft__timetable-edu-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .wmltft__tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .wmltft__timetable-pcts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .28rem; }
    .wmltft__timetable-pcts button { padding-left: .18rem; padding-right: .18rem; font-size: .86rem; }
}


/* v1.0.27 — GP timetable title and practical guidance callouts. */
.wmltft__notice--timetable-breaks {
    margin-top: 1.25rem;
}
.wmltft__timetable-help {
    margin-top: .8rem;
    padding: .9rem 1rem;
    background: var(--wm-soft-blue);
    border-left: 3px solid var(--wm-blue);
}
.wmltft__timetable-help > strong {
    color: var(--wm-blue);
}
.wmltft__timetable-help p {
    margin: .25rem 0 0;
    color: var(--wm-muted);
    font-size: .88rem;
}
.wmltft__timetable-help p strong {
    color: var(--wm-text);
    font-weight: 650;
}


/* v1.0.30 — typography consistency audit.
   Standard body/helper copy across the plugin uses the West Mid 1.3 line-height.
   Heading display text keeps its deliberately tighter heading rhythm. */
.wmltft__summary-card small,
.wmltft__milestone small,
.wmltft__notice p,
.wmltft__timetable-note p,
.wmltft__timetable-edu-head p,
.wmltft__timetable-edu-grid small,
.wmltft__change-note,
.wmltft__microcopy,
.wmltft__change-head p,
.wmltft__form-message,
.wmltft__mobile-item p,
.wmltft__mobile-vnote,
.wmltft__mobile-stage-transition,
.wmltft__mobile-stage-transition strong,
.wmltft__mobile-stage-transition small,
.wmltft__mobile-cct-marker .wmltft__mobile-cct-textline strong,
.wmltft__mobile-cct-marker .wmltft__mobile-cct-textline span {
    line-height: 1.3 !important;
}


/* v1.0.31 — compact wrapped text in milestone and summary cards.
   <small> was inline, so its wrapped lines could be laid out against the
   parent card's larger line box. Making it a block gives its own true 1.3
   line-height. Apply the same explicit rhythm to all text inside these cards
   so wrapped labels/notes remain compact and consistent. */
.wmltft__milestone > span,
.wmltft__milestone > strong,
.wmltft__milestone > small,
.wmltft__summary-card > span,
.wmltft__summary-card > strong,
.wmltft__summary-card > small {
    line-height: 1.3 !important;
}
.wmltft__milestone > small,
.wmltft__summary-card > small {
    display: block;
    margin: 0;
    padding: 0;
}

/* v1.0.32 — trainee-facing 12-month ST3 core placement. */
.wmltft__placement-fixed {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: .5rem .65rem;
    border: 1px solid #BFCBDB;
    border-radius: .4rem;
    background: var(--wm-soft-yellow);
    color: var(--wm-blue);
    font-weight: 650;
}