/* Private workout swap page.
   Depends on vanilla.css for the token layer and is loaded after vanilla-hub.css.

   The old app had no swap tab, so this page takes the visual language of the
   old tabs it sits beside (frontend/src/App.tsx, components/equipment and
   components/ui): the display heading over a stone-500 sentence, white 16px
   cards on a stone hairline, 2px bordered tiles, a stone search field and the
   gradient primary button. Colours, type and radii are the vanilla.css tokens.

   Type in px because the theme root is responsive. Light theme only, 390px
   first, 44px targets, nothing pinned to the viewport. */

[data-subeng-root] .subeng-swap {
    --subeng-swap-ink: var(--subeng-ink);
    --subeng-swap-body: var(--subeng-body);
    --subeng-swap-soft: var(--subeng-soft);
    --subeng-swap-muted: var(--subeng-caption);
    --subeng-swap-line: var(--subeng-hairline);
    --subeng-swap-line2: var(--subeng-hairline-strong);
    --subeng-swap-band: var(--subeng-band);
    --subeng-swap-accent: var(--subeng-accent);
    --subeng-swap-display: var(--subeng-font-display, "Outfit", system-ui, sans-serif);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 32px;
    align-items: start;
    padding-block: 16px 8px;
    color: var(--subeng-swap-body);
    font-family: var(--subeng-font-body, system-ui, sans-serif);
    font-size: var(--subeng-text-body, 15px);
    line-height: 1.6;
}

[data-subeng-root] .subeng-swap__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Header: the old tabs' text-display-lg over a stone-500 sentence. */
[data-subeng-root] .subeng-swap__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 760px;
}

[data-subeng-root] .subeng-swap__header h1 {
    margin: 0;
    color: var(--subeng-swap-ink);
    font-family: var(--subeng-swap-display);
    font-size: clamp(28px, 7vw, 36px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

[data-subeng-root] .subeng-swap__lede {
    margin: 0;
    color: var(--subeng-swap-muted);
    font-size: 16px;
    line-height: 1.6;
}

[data-subeng-root] .subeng-swap__notice {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-control, 12px);
    background: var(--subeng-swap-band);
    color: var(--subeng-swap-ink);
    font-size: 14px;
}

/* The form: the old white card. */
[data-subeng-root] .subeng-swap-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-card, 16px);
    background: #fff;
}

[data-subeng-root] .subeng-swap-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[data-subeng-root] .subeng-swap-form__label {
    color: var(--subeng-swap-ink);
    font-family: var(--subeng-swap-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

[data-subeng-root] .subeng-swap-form__hint {
    margin: 0 0 4px;
    color: var(--subeng-swap-muted);
    font-size: 13px;
    line-height: 1.5;
}

[data-subeng-root] .subeng-swap-form__input {
    width: 100%;
    min-height: 11rem;
    padding: 14px 16px;
    border: 2px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-control, 12px);
    background: #fff;
    color: var(--subeng-swap-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    resize: vertical;
}

[data-subeng-root] .subeng-swap-form__input:focus,
[data-subeng-root] .subeng-swap-form__picker-input:focus {
    border-color: var(--subeng-swap-accent);
}

/* Try chips: shown only once swap.js can make them fill the list. */
[data-subeng-root] .subeng-swap-form__examples:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
}

[data-subeng-root] .subeng-swap-form__examples-label {
    color: var(--subeng-swap-muted);
    font-size: 13px;
    font-weight: 600;
}

[data-subeng-root] .subeng-swap .subeng-swap-form__example {
    min-height: 44px;
    padding: 0 14px;
    border: 2px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-control, 12px);
    background: #fff;
    color: var(--subeng-swap-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

[data-subeng-root] .subeng-swap .subeng-swap-form__example:hover {
    border-color: var(--subeng-swap-accent);
    color: var(--subeng-swap-accent);
}

[data-subeng-root] .subeng-swap-form__picker:empty {
    display: none;
}

[data-subeng-root] .subeng-swap-form__picker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[data-subeng-root] .subeng-swap-form__picker-label {
    color: var(--subeng-swap-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The search field: 2px stone, the glyph at the start, the accent on focus. */
[data-subeng-root] .subeng-swap-form__picker-input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 46px;
    border: 2px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-control, 12px);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 17px center / 18px;
    color: var(--subeng-swap-ink);
    font-family: inherit;
    font-size: 16px;
}

[data-subeng-root] .subeng-swap-form__picker-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 5;
    max-height: 17rem;
    overflow-y: auto;
    border: 1px solid var(--subeng-swap-line2);
    border-radius: var(--subeng-radius-card, 16px);
    background: #fff;
}

[data-subeng-root] .subeng-swap-form__picker-option {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--subeng-swap-line);
    background: #fff;
    color: var(--subeng-swap-ink);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

[data-subeng-root] .subeng-swap-form__picker-option:last-child {
    border-bottom: 0;
}

[data-subeng-root] .subeng-swap-form__picker-option:hover,
[data-subeng-root] .subeng-swap-form__picker-option[aria-selected="true"] {
    background: var(--subeng-swap-band);
    font-weight: 600;
}

[data-subeng-root] .subeng-swap-form__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* The old tabs' gradient primary button at the control radius. */
[data-subeng-root] .subeng-swap-form__submit,
[data-subeng-root] .subeng-swap-choice-form__submit,
[data-subeng-root] .subeng-swap-save__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--subeng-radius-control, 12px);
    background: linear-gradient(90deg, var(--subeng-swap-accent), var(--subeng-accent-deep));
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

[data-subeng-root] .subeng-swap-form__submit:hover,
[data-subeng-root] .subeng-swap-choice-form__submit:hover,
[data-subeng-root] .subeng-swap-save__submit:hover {
    background: var(--subeng-accent-deep);
}

[data-subeng-root] .subeng-swap-form__note,
[data-subeng-root] .subeng-swap-save__signed-out {
    margin: 0;
    max-width: 68ch;
    color: var(--subeng-swap-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* How it works: a white card of three numbered 2px tiles. */
[data-subeng-root] .subeng-swap-empty {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-card, 16px);
    background: #fff;
}

[data-subeng-root] .subeng-swap-empty__title,
[data-subeng-root] .subeng-swap-results__title {
    margin: 0;
    color: var(--subeng-swap-ink);
    font-family: var(--subeng-swap-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

[data-subeng-root] .subeng-swap-results__title {
    font-size: clamp(24px, 6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.03em;
}

[data-subeng-root] .subeng-swap-empty__steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: subeng-swap-step;
}

[data-subeng-root] .subeng-swap-empty__steps > li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0;
    padding: 14px 16px;
    border: 2px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-card, 16px);
    background: #fff;
    color: var(--subeng-swap-ink);
    font-size: 14px;
    line-height: 1.5;
    counter-increment: subeng-swap-step;
}

[data-subeng-root] .subeng-swap-empty__steps > li::before {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--subeng-radius-control, 12px);
    background: var(--subeng-fill);
    color: var(--subeng-swap-soft);
    font-family: var(--subeng-swap-display);
    font-size: 15px;
    font-weight: 700;
    content: counter(subeng-swap-step);
}

[data-subeng-root] .subeng-swap-empty__account {
    margin: 0;
}

/* The sign-in link as the outlined secondary button. */
[data-subeng-root] .subeng-swap .subeng-swap-empty__account a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 18px;
    border: 1px solid var(--subeng-swap-line2);
    border-radius: var(--subeng-radius-control, 12px);
    color: var(--subeng-swap-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

[data-subeng-root] .subeng-swap .subeng-swap-empty__account a:hover {
    border-color: var(--subeng-swap-accent);
    color: var(--subeng-swap-accent);
}

[data-subeng-root] .subeng-swap-empty__saved-title {
    margin: 8px 0 0;
    color: var(--subeng-swap-ink);
    font-family: var(--subeng-swap-display);
    font-size: 16px;
}

[data-subeng-root] .subeng-swap-empty__saved {
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-control, 12px);
    list-style: none;
}

[data-subeng-root] .subeng-swap-empty__saved li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 12px 0;
    font-size: 14px;
}

[data-subeng-root] .subeng-swap-empty__saved li + li {
    border-top: 1px solid var(--subeng-swap-line);
}

/* Results. */
/* A wrapping row whose children take the full width, except the two closing
   forms, so "Use the exercises I picked" and "Save" sit side by side. */
[data-subeng-root] .subeng-swap-results {
    display: flex;
    flex-flow: row wrap;
    gap: 16px 12px;
    min-width: 0;
}

[data-subeng-root] .subeng-swap-results > * {
    flex: 1 1 100%;
    min-width: 0;
}

[data-subeng-root] .subeng-swap-results > .subeng-swap-choice-form,
[data-subeng-root] .subeng-swap-results > .subeng-swap-save {
    flex: 0 1 auto;
    margin-top: 8px;
}

[data-subeng-root] .subeng-swap-results__note {
    margin: -8px 0 0;
    max-width: 68ch;
    color: var(--subeng-swap-muted);
    font-size: 14px;
    line-height: 1.6;
}

[data-subeng-root] .subeng-swap-results__parse,
[data-subeng-root] .subeng-swap-results__empty {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-control, 12px);
    background: var(--subeng-swap-band);
    color: var(--subeng-swap-ink);
    font-size: 14px;
    line-height: 1.55;
}

/* Each line is the spoke's result card: white, hairline, 16px corners. */
[data-subeng-root] .subeng-swap-rows {
    display: grid;
    gap: 16px;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-swap-row {
    margin: 0;
    padding: 20px;
    border: 2px solid var(--subeng-swap-line);
    border-radius: var(--subeng-radius-card, 16px);
    background: #fff;
}

[data-subeng-root] .subeng-swap-row:not([data-subeng-swap-row="swapped"]) {
    background: var(--subeng-swap-band);
}

/* From on its own line, struck through; then the arrow, the swap and its pill. */
[data-subeng-root] .subeng-swap-row__line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
}

[data-subeng-root] .subeng-swap-row__from {
    grid-column: 1 / -1;
    color: var(--subeng-swap-muted);
    font-size: 13px;
    text-decoration: line-through;
}

[data-subeng-root] .subeng-swap-row:not([data-subeng-swap-row="swapped"]) .subeng-swap-row__from {
    color: var(--subeng-swap-ink);
    font-family: var(--subeng-swap-display);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

[data-subeng-root] .subeng-swap-row__arrow {
    color: var(--subeng-swap-accent);
    font-weight: 700;
}

[data-subeng-root] .subeng-swap-row__to {
    min-width: 0;
    color: var(--subeng-swap-ink);
    font-family: var(--subeng-swap-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

[data-subeng-root] .subeng-swap .subeng-swap-row__to a {
    color: var(--subeng-swap-ink);
    text-decoration: none;
}

[data-subeng-root] .subeng-swap .subeng-swap-row__to a:hover {
    color: var(--subeng-link);
    text-decoration: underline;
}

/* The result card's match pill, white on the band's colour. */
[data-subeng-root] .subeng-swap-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--subeng-radius-pill, 999px);
    background: var(--subeng-match-fair);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

[data-subeng-root] .subeng-swap-row__badge[data-subeng-swap-band="strong"] {
    background: var(--subeng-match-best);
}

[data-subeng-root] .subeng-swap-row__badge[data-subeng-swap-band="close"] {
    background: var(--subeng-match-good);
}

[data-subeng-root] .subeng-swap-row__percent {
    color: var(--subeng-swap-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

[data-subeng-root] .subeng-swap-row__badge .subeng-swap-row__percent {
    color: inherit;
    font-size: inherit;
}

[data-subeng-root] .subeng-swap-row__state {
    margin: 6px 0 0;
    max-width: 68ch;
    color: var(--subeng-swap-body);
    font-size: 14px;
    line-height: 1.6;
}

[data-subeng-root] .subeng-swap-row__more {
    margin-top: 8px;
    border-top: 1px solid var(--subeng-swap-line);
}

[data-subeng-root] .subeng-swap .subeng-swap-row__more summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    color: var(--subeng-swap-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

[data-subeng-root] .subeng-swap-row__more-list {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-swap-row__more-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--subeng-swap-line);
    font-size: 14px;
    font-weight: 600;
}

[data-subeng-root] .subeng-swap-row__choices {
    margin: 10px 0 0;
    padding: 0;
    border: 0;
}

[data-subeng-root] .subeng-swap-row__choices-legend {
    margin-bottom: 6px;
    padding: 0;
    color: var(--subeng-swap-body);
    font-size: 14px;
    font-weight: 600;
}

[data-subeng-root] .subeng-swap-row__choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-height: 44px;
    padding: 6px 0;
    border-top: 1px solid var(--subeng-swap-line);
    color: var(--subeng-swap-ink);
    font-size: 14px;
    cursor: pointer;
}

[data-subeng-root] .subeng-swap-row__choice input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--subeng-swap-accent);
}

[data-subeng-root] .subeng-swap-row__choice-context {
    color: var(--subeng-swap-muted);
    font-size: 12px;
}

[data-subeng-root] .subeng-swap-row__feedback {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--subeng-swap-line);
}

[data-subeng-root] .subeng-swap-row__feedback-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

[data-subeng-root] .subeng-swap-row__feedback-legend {
    width: 100%;
    margin-bottom: 4px;
    padding: 0;
    color: var(--subeng-swap-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Outlined secondary buttons. */
[data-subeng-root] .subeng-swap-row__vote {
    min-height: 44px;
    min-width: 4.5rem;
    padding: 0 16px;
    border: 1px solid var(--subeng-swap-line2);
    border-radius: var(--subeng-radius-control, 12px);
    background: #fff;
    color: var(--subeng-swap-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

[data-subeng-root] .subeng-swap-row__vote:hover {
    border-color: var(--subeng-swap-accent);
    color: var(--subeng-swap-accent);
}

[data-subeng-root] .subeng-swap-row__reason-label {
    margin-inline-start: 4px;
    color: var(--subeng-swap-muted);
    font-size: 13px;
}

[data-subeng-root] .subeng-swap-row__reason {
    flex: 1 1 10rem;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--subeng-swap-line2);
    border-radius: var(--subeng-radius-control, 12px);
    background: #fff;
    color: var(--subeng-swap-ink);
    font-family: inherit;
    font-size: 14px;
}

[data-subeng-root] .subeng-swap-row__feedback-note {
    margin: 0;
    color: var(--subeng-swap-accent);
    font-size: 13px;
    font-weight: 600;
}

[data-subeng-root] .subeng-swap-choice-form,
[data-subeng-root] .subeng-swap-save {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}

[data-subeng-root] .subeng-swap-save__done {
    margin: 0;
    color: var(--subeng-swap-accent);
    font-weight: 700;
}

[data-subeng-root] .subeng-swap a {
    color: var(--subeng-swap-ink);
}

[data-subeng-root] .subeng-swap a:hover {
    color: var(--subeng-swap-accent);
}

[data-subeng-root] .subeng-swap :focus-visible {
    outline: 3px solid var(--subeng-focus);
    outline-offset: 2px;
}

/* Desktop: the form beside how it works, and the results two-up. */
@media (min-width: 64rem) {
    [data-subeng-root] .subeng-swap:has(> .subeng-swap-empty) {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }

    [data-subeng-root] .subeng-swap > :not(.subeng-swap-form):not(.subeng-swap-empty) {
        grid-column: 1 / -1;
    }

    [data-subeng-root] .subeng-swap > .subeng-swap-form,
    [data-subeng-root] .subeng-swap > .subeng-swap-empty {
        grid-row: 2;
    }

    [data-subeng-root] .subeng-swap > .subeng-swap-empty {
        grid-column: 2;
    }

    /* After a swap the form spans the page, so the list and the picker sit
       side by side instead of one very wide textarea. */
    [data-subeng-root] .subeng-swap:not(:has(> .subeng-swap-empty)) .subeng-swap-form {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        column-gap: 32px;
        align-items: start;
    }

    [data-subeng-root] .subeng-swap:not(:has(> .subeng-swap-empty)) .subeng-swap-form__field {
        grid-row: 1 / span 3;
    }

    [data-subeng-root] .subeng-swap:not(:has(> .subeng-swap-empty)) .subeng-swap-form__field ~ * {
        grid-column: 2;
    }

    [data-subeng-root] .subeng-swap:not(:has(> .subeng-swap-empty)) .subeng-swap-form__picker {
        margin-top: 30px;
    }

    [data-subeng-root] .subeng-swap-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The phone fold: the submit comes directly after the box the reader has
   just typed in, the catalogue picker follows it, and the empty textarea
   asks for four lines rather than seven because it grows with content. */
@media (max-width: 39.99rem) {
    [data-subeng-root] .subeng-swap-form,
    [data-subeng-root] .subeng-swap-empty {
        padding: 18px;
    }

    [data-subeng-root] .subeng-swap-form > * {
        order: 3;
    }

    [data-subeng-root] .subeng-swap-form__field {
        order: 1;
    }

    [data-subeng-root] .subeng-swap-form__actions {
        order: 2;
    }

    /* height, not min-height: the rows attribute gives the textarea an
       intrinsic height a floor never lowers. */
    [data-subeng-root] .subeng-swap-form__input {
        height: 7rem;
        min-height: 7rem;
    }

    [data-subeng-root] .subeng-swap-row {
        padding: 16px;
    }
}