/**
 * Shared exercise cards for the vanilla SSR frontend.
 * Scoped to the server-selected target root so the --subeng-* tokens
 * declared in vanilla.css resolve. Load after vanilla.css.
 *
 * A card is an image, a name and a rule. It is not a box: hairlines separate
 * entries here, they never enclose them, and the only shadow in the system is
 * the one on the featured card.
 *
 * The brand values below are the card artboard's own, held in the
 * --subeng-card-* namespace so they never overwrite a shared token.
 *
 * Geometry and type are both stated in px on purpose. The host theme drops its
 * root font size at phone widths, so a rem here would shrink the whole card
 * away from the sizes the design direction fixes: 40/30 H1, 20/18 card title,
 * 17/16 body, 13 caption.
 */

[data-subeng-root] {
    --subeng-card-gap: 16px;
    --subeng-card-media: 96px;
    /* Namespaced names, aliased values. vanilla.css's header says the page
       sheets never redefine the palette "so a palette change lands here and
       nowhere else", and seven sheets restating the same five hexes made that
       untrue: a brand change needed seven edits and drifted on the first one
       missed. The namespace stays, the literals go. */
    --subeng-card-ink: var(--subeng-ink, #191c20);
    --subeng-card-body: var(--subeng-body, #3c434a);
    --subeng-card-mute: var(--subeng-caption, #6b7280);
    --subeng-card-line: var(--subeng-hairline, #e0e0e0);
    --subeng-card-accent: var(--subeng-accent, #dd0119);
    --subeng-card-match: var(--subeng-emphasis, #ff184e);
    /* vanilla.css declares --subeng-font-display. This line used to read the
       two words the other way round, which is not a token anything sets, so
       every card silently took the literal font after the comma. */
    --subeng-card-display: var(--subeng-font-display, "Encode Sans Condensed", "Segoe UI", Arial, sans-serif);
}

[data-subeng-root] .subeng-card {
    padding: 16px 0;
    border-block-end: 1px solid var(--subeng-card-line);
    color: var(--subeng-card-ink);
    background: #ffffff;
}

/* The top answer is the only card that gets weight, and the weight is what the
   old "Best Match" ribbon used to say in words beside a badge saying it again. */
[data-subeng-root] .subeng-card--featured {
    padding: 20px 0 24px;
    border-block-start: 2px solid var(--subeng-card-ink);
    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}

[data-subeng-root] .subeng-card--original {
    padding: 0;
    border-block-end: 0;
}

/* A progression is a harder version of the lift the reader cannot do, so it is
   named rather than accented: the accent belongs to things a reader acts on. */
[data-subeng-root] .subeng-card__ribbon {
    margin: 0;
    color: var(--subeng-card-mute);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[data-subeng-root] .subeng-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

[data-subeng-root] .subeng-card__body--media {
    grid-template-columns: var(--subeng-card-media) minmax(0, 1fr);
    gap: var(--subeng-card-gap);
}

/* The picture is the card. Full width on a phone for the top answer, a cover
   thumbnail for the rest, and the same 4:3 crop for a photograph and a line
   illustration alike so one list does not mix two art directions. */
[data-subeng-root] .subeng-card--featured .subeng-card__body--media,
[data-subeng-root] .subeng-card--original .subeng-card__body--media {
    grid-template-columns: minmax(0, 1fr);
}

[data-subeng-root] .subeng-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: #ffffff;
}

[data-subeng-root] .subeng-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The lead photograph, when a page hero asks for the source exercise's own
   picture rather than a card's thumbnail. A hero is wider than a card: 16:9 at
   the full column, the same cover crop, and no more than a comfortable reading
   width so a 1440 desktop does not hand it the whole 76rem. The card sheet owns
   it because the image markup is the card's; the page sheets only place it. */
[data-subeng-root] .subeng-hub__lead-media,
[data-subeng-root] .subeng-spoke__lead-media {
    max-width: 50rem;
    margin-block: 0 var(--subeng-card-gap, 16px);
}

[data-subeng-root] .subeng-hub__lead-media .subeng-card__media,
[data-subeng-root] .subeng-spoke__lead-media .subeng-card__media {
    aspect-ratio: 16 / 9;
}

[data-subeng-root] .subeng-card__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

[data-subeng-root] .subeng-card__heading {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    justify-content: space-between;
}

[data-subeng-root] .subeng-card__title {
    margin: 0;
    min-width: 0;
    color: var(--subeng-card-ink);
    font-family: var(--subeng-card-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

[data-subeng-root] .subeng-card--featured .subeng-card__title,
[data-subeng-root] .subeng-card--original .subeng-card__title {
    font-size: 20px;
}

[data-subeng-root] .subeng-card--compact .subeng-card__title {
    font-size: 16px;
}

/* The whole card is the affordance, so the name carries no permanent rule.
   Hover and keyboard focus put it back. */
/* A resting underline: a link that only looks like one on hover looks like text
   on a phone, and this one opens a different page. */
[data-subeng-root] .subeng-card__title a {
    color: var(--subeng-card-ink);
    text-decoration: underline;
    text-decoration-color: var(--subeng-card-line);
    text-underline-offset: 0.15em;
}

[data-subeng-root] .subeng-card__title a:hover,
[data-subeng-root] .subeng-card__title a:focus-visible {
    color: var(--subeng-card-accent);
    text-decoration: underline;
}

/* One figure, one colour, spent on nothing else on the page. */
[data-subeng-root] .subeng-card__match {
    flex: 0 0 auto;
    color: var(--subeng-card-match);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

[data-subeng-root] .subeng-card__caption {
    margin: 0;
    color: var(--subeng-card-mute);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

[data-subeng-root] .subeng-card__caption-flag {
    color: var(--subeng-card-body);
    font-weight: 600;
}

/* The sentence that answers the reader's question. It outranks the metadata
   above it and it is on every card, because a card without it is an empty one. */
[data-subeng-root] .subeng-card__lead {
    margin: 0;
    color: var(--subeng-card-body);
    font-size: 17px;
    line-height: 1.65;
}

/* One chip and two text links on one row. An opened disclosure takes the row to
   itself so the steps read at full width instead of in a column. */
[data-subeng-root] .subeng-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: center;
}

[data-subeng-root] .subeng-card__foot > details[open] {
    flex: 1 1 100%;
}

[data-subeng-root] .subeng-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-subeng-root] .subeng-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--subeng-card-line);
    border-radius: 999px;
    color: var(--subeng-card-ink);
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

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

/* A summary reads as a link because that is what it does: it opens more of the
   same page. It is not a button and it is not on a box.

   In ink with a hairline underline, not in the accent. The direction spends
   #dd0119 on primary buttons, the current nav underline and the best-match
   marker; shipped, it also carried every eyebrow, every in-body link, every
   disclosure triangle and twelve affiliate buttons, which is the original
   "an accent applied to ten things is not an accent" complaint in a new hue.
   Red comes back on hover and focus, where it means "this one". */
[data-subeng-root] .subeng-card__details summary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    border-block-end: 1px solid var(--subeng-card-line);
    color: var(--subeng-card-ink);
    font-size: var(--subeng-text-small, 15px);
    font-weight: 600;
    cursor: pointer;
}

[data-subeng-root] .subeng-card__details summary:hover,
[data-subeng-root] .subeng-card__details summary:focus-visible {
    border-block-end-color: var(--subeng-card-accent);
    color: var(--subeng-card-accent);
}

[data-subeng-root] .subeng-card__details summary:focus-visible {
    outline: 2px solid var(--subeng-focus, #191c20);
    outline-offset: 2px;
}

[data-subeng-root] .subeng-card__steps,
[data-subeng-root] .subeng-card__list {
    margin: 0;
    padding-inline-start: 20px;
    color: var(--subeng-card-body);
    font-size: 16px;
    line-height: 1.6;
}

[data-subeng-root] .subeng-card__steps li,
[data-subeng-root] .subeng-card__list li {
    margin-block-end: 6px;
}

[data-subeng-root] .subeng-card__note {
    margin: 8px 0 0;
    color: var(--subeng-card-body);
    font-size: 15px;
    line-height: 1.6;
}

[data-subeng-root] .subeng-card__note strong {
    color: var(--subeng-card-ink);
}

/* Match analysis: one row per scored factor, two columns once there is room.
   The tick says this factor agrees with the exercise being replaced, the cross
   says it does not, and a factor with nothing to compare against gets neither. */
[data-subeng-root] .subeng-card__factors { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; color: var(--subeng-card-body); font-size: 15px; line-height: 1.6; list-style: none }
[data-subeng-root] .subeng-card__factor { display: flex; gap: 6px; align-items: flex-start }
[data-subeng-root] .subeng-card__factor-glyph { flex: none; width: 14px; height: 14px; margin-block-start: 5px; color: var(--subeng-card-mute) }
[data-subeng-root] .subeng-card__factor--match .subeng-card__factor-glyph { color: var(--subeng-card-ink) }
@media (min-width: 40rem) { [data-subeng-root] .subeng-card__factors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px } }

/* The poster is a still, so the control says the animation is there. It covers
   the thumbnail, past the 44px tap target, and is a real link to the GIF, so
   the page still plays with scripting off. */
[data-subeng-root] .subeng-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

[data-subeng-root] .subeng-card__play::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
}

[data-subeng-root] .subeng-card__play::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    clip-path: polygon(15% 0%, 100% 50%, 15% 100%);
    background: var(--subeng-card-ink);
}

[data-subeng-root] .subeng-card__play:focus-visible {
    outline: 2px solid var(--subeng-focus, #191c20);
    outline-offset: 2px;
}

[data-subeng-root] .subeng-card__play-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

[data-subeng-root] [data-subeng-playing="true"] .subeng-card__play {
    display: none;
}

/* A spoke's lead picture has no title and no caption, so its control prints the
   words the thumbnails clip, as a pill on the image rather than over it. */
[data-subeng-root] .subeng-card__play--labelled { align-items: flex-end; padding-block-end: 12px }
[data-subeng-root] .subeng-card__play--labelled::before,
[data-subeng-root] .subeng-card__play--labelled::after { content: none }
[data-subeng-root] .subeng-card__play--labelled .subeng-card__play-text {
    position: static; display: inline-flex; width: auto; height: auto; min-height: 44px;
    align-items: center; gap: 8px; padding: 0 18px; overflow: visible; border-radius: 999px;
    background: rgb(255 255 255 / 94%); clip-path: none;
    color: var(--subeng-card-ink); font-size: 15px; font-weight: 600;
}
[data-subeng-root] .subeng-card__play--labelled .subeng-card__play-text::before {
    content: ""; flex: none; width: 11px; height: 11px;
    clip-path: polygon(15% 0%, 100% 50%, 15% 100%); background: currentColor;
}

/* The video facade reuses the poster control as it is. Only the scrim differs,
   and the frame fills the same box, so nothing moves when it loads. */
[data-subeng-root] .subeng-card__media--video .subeng-card__play {
    background: rgb(25 28 32 / 22%);
}

[data-subeng-root] .subeng-card__media--video .subeng-card__play:hover {
    background: rgb(25 28 32 / 30%);
}

[data-subeng-root] .subeng-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The top answer and the source exercise take a cover image beside their text
   once there is a column to put it in. Below this they stack, which is the
   phone layout the design fixes: a full-width 4:3 photograph, then the name. */
@media (min-width: 48rem) {
    [data-subeng-root] .subeng-card--featured .subeng-card__body--media {
        grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
        gap: 24px;
    }

    [data-subeng-root] .subeng-card--original .subeng-card__body--media {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 30rem) {
    [data-subeng-root] {
        --subeng-card-gap: 12px;
    }

    [data-subeng-root] .subeng-card--featured .subeng-card__title,
    [data-subeng-root] .subeng-card--original .subeng-card__title {
        font-size: 18px;
    }

    [data-subeng-root] .subeng-card__lead {
        font-size: 16px;
    }

    [data-subeng-root] .subeng-card__steps,
    [data-subeng-root] .subeng-card__list {
        font-size: 15px;
    }
}

@media (forced-colors: active) {
    [data-subeng-root] .subeng-card,
    [data-subeng-root] .subeng-card__media,
    [data-subeng-root] .subeng-card__chip {
        border: 1px solid CanvasText;
    }
}