/**
 * Share page, vanilla SSR frontend. Load after vanilla-cards.css.
 *
 * Same artboard as the hub and the spoke: condensed display headings in near
 * black, body in the system stack, hairlines instead of enclosures, and one
 * accent, the masthead red, on the submit and the current marker. Type in px
 * because the theme root is responsive: H1 40/30, H2 28/22, body 17/16,
 * caption 13. Radius 8 on controls, 4 on media, no shadows.
 *
 * The tokens hang off .subeng-share in their own namespace so nothing here can
 * overwrite a shared one, and a rule styling a p, ul, li, label, heading or
 * link carries .subeng-share too, so two classes out-rank a theme rule such as
 * .entry-content ul on specificity rather than on load order.
 *
 * Built at 390px first: one column, the picker above the preview, every control
 * at least 44px tall, nothing pinned to the viewport. The two panels sit side by
 * side from 52rem. Light theme only. 10 KB budget.
 */

[data-subeng-root] .subeng-share {
    /* Namespaced names, aliased values. vanilla.css owns the palette; six page
       sheets restating the same five hexes made a brand change a six-file edit. */
    --subeng-share-ink: var(--subeng-ink, #191c20);
    --subeng-share-body: var(--subeng-body, #3c434a);
    --subeng-share-muted: var(--subeng-caption, #6b7280);
    --subeng-share-line: var(--subeng-hairline, #e0e0e0);
    --subeng-share-accent: var(--subeng-accent, #dd0119);
    --subeng-share-display: var(--subeng-font-display, "Encode Sans Condensed", "Segoe UI", Arial, sans-serif);
    --subeng-share-text: var(--subeng-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--subeng-share-body);
    font-family: var(--subeng-share-text);
    font-size: 16px;
    line-height: 1.6;
}

/* Identity first: what the page is, then what there is to pick from. */
.subeng-share .subeng-share__hero {
    display: grid;
    gap: 12px;
    padding-block: 24px 16px;
}

/* The exemplar's category badge, a solid red pill with a white label, not loose
   red caps. align-self keeps it as wide as its label inside the grid column. */
.subeng-share .subeng-share__eyebrow {
    display: inline-block;
    align-self: start;
    width: fit-content;
    margin: 0;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--subeng-share-accent);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* One headline measure across the frontend, not a fourth value for one rule. */
.subeng-share .subeng-share__title {
    max-width: var(--subeng-headline-measure, 40ch);
    margin: 0;
    color: var(--subeng-share-ink);
    font-family: var(--subeng-share-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.subeng-share .subeng-share__lede {
    max-width: 68ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
}

/* The picker is an ordinary GET form, so it has to read as a form. */
.subeng-share .subeng-share__picker {
    display: grid;
    gap: 16px;
    margin-block: 24px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--subeng-share-line);
}

.subeng-share .subeng-share__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.subeng-share .subeng-share__legend {
    padding: 0;
    color: var(--subeng-share-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subeng-share .subeng-share__choices {
    display: grid;
    gap: 0;
    margin-block-start: 8px;
    border-block-start: 1px solid var(--subeng-share-line);
}

/* A choice is a hairline row, not a bordered tile. The ticked one is marked in
   red type and a red radio, which is a change of state a reader can see
   without a second surface underneath it. */
.subeng-share .subeng-share__choice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 12px;
    min-height: 44px;
    padding-block: 12px;
    border-block-end: 1px solid var(--subeng-share-line);
    cursor: pointer;
}

.subeng-share .subeng-share__choice input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--subeng-share-accent);
}

.subeng-share .subeng-share__choice-name {
    color: var(--subeng-share-ink);
    font-family: var(--subeng-share-display);
    font-size: 17px;
    font-weight: 700;
}

.subeng-share .subeng-share__choice-hint {
    grid-column: 2;
    color: var(--subeng-share-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.subeng-share .subeng-share__choice:has(input:checked) .subeng-share__choice-name {
    color: var(--subeng-share-accent);
}

.subeng-share .subeng-share__choice:focus-within {
    outline: 3px solid var(--subeng-focus, #0c0a09);
    outline-offset: 2px;
}

.subeng-share .subeng-share__submit {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--subeng-share-accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.subeng-share .subeng-share__body {
    display: grid;
    gap: 32px;
    margin-block-end: 48px;
}

.subeng-share .subeng-share__panel {
    padding-block-start: 16px;
    border-block-start: 1px solid var(--subeng-share-line);
}

.subeng-share .subeng-share__panel-title {
    margin: 0;
    color: var(--subeng-share-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subeng-share .subeng-share__panel-lede {
    max-width: 68ch;
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.65;
}

.subeng-share .subeng-share__panel-note {
    max-width: 68ch;
    margin: 8px 0 0;
    color: var(--subeng-share-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* The card is the preview, and the one place on this page a rule earns 2px:
   it says where the shareable image starts. */
.subeng-share .subeng-share__card {
    margin-block-start: 16px;
    padding-block: 16px;
    border-block-start: 2px solid var(--subeng-share-ink);
}

.subeng-share .subeng-share__card-title {
    margin: 0;
    color: var(--subeng-share-ink);
    font-family: var(--subeng-share-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.subeng-share .subeng-share__card-note {
    margin: 6px 0 0;
    color: var(--subeng-share-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* Label left, figure right: the rhythm the equipment and spoke boards use. */
.subeng-share .subeng-share__facts {
    display: grid;
    gap: 0;
    margin: 16px 0 0;
}

.subeng-share .subeng-share__facts > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding-block: 12px;
    border-block-start: 1px solid var(--subeng-share-line);
}

.subeng-share .subeng-share__facts > div:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}

.subeng-share .subeng-share__facts dt {
    color: var(--subeng-share-body);
    font-size: 16px;
}

.subeng-share .subeng-share__facts dd {
    margin: 0;
    color: var(--subeng-share-ink);
    font-family: var(--subeng-share-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.subeng-share .subeng-share__diagram {
    margin: 16px 0 0;
}

.subeng-share .subeng-share__diagram figcaption {
    margin-block-start: 8px;
    color: var(--subeng-share-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* A card with nothing in it yet says what would fill it, and never a zero. */
.subeng-share .subeng-share__pending {
    display: grid;
    gap: 8px;
    justify-items: start;
    margin-block-start: 16px;
    padding-block: 16px;
    border-block-start: 1px solid var(--subeng-share-line);
}

.subeng-share .subeng-share__pending-title {
    margin: 0;
    color: var(--subeng-share-ink);
    font-family: var(--subeng-share-display);
    font-size: 20px;
    font-weight: 700;
}

.subeng-share .subeng-share__pending-message {
    max-width: 68ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
}

.subeng-share .subeng-share__pending-action,
.subeng-share .subeng-share__permalink a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--subeng-share-accent);
    font-size: 15px;
    font-weight: 600;
    text-underline-offset: 0.15em;
}

.subeng-share .subeng-share__permalink {
    margin: 16px 0 0;
}

.subeng-share .subeng-share__tips-title {
    margin: 24px 0 0;
    color: var(--subeng-share-ink);
    font-family: var(--subeng-share-display);
    font-size: 18px;
    font-weight: 700;
}

.subeng-share .subeng-share__tips {
    max-width: 68ch;
    margin: 8px 0 0;
    padding-inline-start: 18px;
    font-size: 16px;
    line-height: 1.65;
}

.subeng-share .subeng-share__tips li {
    margin-block-end: 6px;
}

/* The export controls share.js appends, sized as tap targets on the card. */
.subeng-share .subeng-share-action {
    min-height: 44px;
    margin-block-start: 16px;
    padding: 0 16px;
    border: 1px solid var(--subeng-share-line);
    border-radius: 8px;
    color: var(--subeng-share-ink);
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

.subeng-share .subeng-share-actions {
    gap: 8px;
}

.subeng-share .subeng-share-card-output {
    display: grid;
    gap: 8px;
}

.subeng-share .subeng-share-card-preview {
    margin-block-start: 16px;
    border: 1px solid var(--subeng-share-line);
    border-radius: 4px;
}

.subeng-share a {
    color: var(--subeng-share-ink);
}

.subeng-share a:hover {
    color: var(--subeng-share-accent);
}

@media (min-width: 52rem) {
    .subeng-share .subeng-share__title {
        font-size: 40px;
    }

    .subeng-share .subeng-share__lede,
    .subeng-share .subeng-share__panel-lede,
    .subeng-share .subeng-share__pending-message,
    .subeng-share .subeng-share__tips {
        font-size: 17px;
    }

    .subeng-share .subeng-share__card-title {
        font-size: 28px;
    }

    .subeng-share .subeng-share__choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 48px;
    }

    .subeng-share .subeng-share__body {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
        gap: 48px;
    }
}