/* ============================================================================
   MANTEC — Registration flow skin (flow.css)

   The ETP/Woo purchase pipeline styled as one designed journey: tickets block
   (event single) → attendee registration → cart → checkout → confirmation.
   Jordan's XD covers the listing + event single; everything past "Register"
   is undesigned territory built from the site's own component vocabulary:
   ihero--simple envelope (the page templates), event-card-box surfaces
   (white / shadow 0 4px 20px rgb(32 35 91 / .10) / radius 0 16 0 16),
   signup-band form language (Regular-16 labels, 48px navy-border inputs),
   btn-notch family (real markup via tribe/ template overrides; CSS-drawn
   tail on Woo Blocks' React-owned buttons), amber text links, orange crumbs.

   DELIBERATELY UNLAYERED: Woo + ET/ETP ship unlayered CSS which outranks
   every @layer rule (the GF lesson, main.css EOF). This sheet is enqueued
   at wp_enqueue_scripts:120 — after the plugin skins — so equal-cascade
   ties break our way on source order. Scope everything under the flow
   surfaces (body.flow-page etc.) to contain the blast radius.

   Loaded ONLY on flow surfaces (Registration::assets). NOT in the
   CriticalCss/Minify pipeline (those own main.css/main.js alone) — this
   sheet rides a normal blocking link; it is small and these are not
   marketing-LCP pages.
   ========================================================================= */

/* ---- ET common groundwork ---------------------------------------------
   ET's v2 views render BOTH states of many elements (count / "Sold Out")
   and rely on these utility classes to hide the inactive one. The plugin's
   block stylesheet never loads on our surfaces, so the utilities must
   exist here or every state renders stacked (the "0 available / Sold Out"
   soup the walk found). */
.tribe-common-a11y-hidden { display: none !important; }
.tribe-common-a11y-visual-hide {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.tribe-common-c-loader { display: none; }

/* ET's tribe-common type/skeleton sets its own font stack + navy-ish inks.
   The flow speaks Montserrat: inherit the page's stack everywhere tribe
   renders. */
body.flow-page .tribe-common,
body.flow-page .tribe-common * { font-family: inherit; }

/* ---- Flow envelope ------------------------------------------------------ */
/* NB: bottom padding must NOT be declared unconditionally — this sheet is
   unlayered, and on prefooter pages the @layer exceptions reserve rule
   (main:has(~ .prefooter) > :last-child) supplies the pf-reserve padding;
   an unlayered padding-block-end here CLOBBERS it and the pine card lands
   on the content (John's Billing-address collision, 08-05). */
.flow-content { padding-block-start: var(--size-5); }
main:not(:has(~ .prefooter)) > .flow-content:last-child,
main:not(:has(~ .prefooter)) > :last-child { padding-block-end: var(--size-6); }
/* Blocks mark their wrappers alignwide; the flow lives in the standard
   container like every other interior surface. */
.flow-content .wp-block-woocommerce-cart,
.flow-content .wp-block-woocommerce-checkout { margin-inline: 0; }

/* THE FLOW RUNS WHITE (John 08-05 + the registration artboards: every step
   is a white ground with OUTLINED boxes and flat rails — no gray band, no
   floating shadows). Resolves the white-tab-on-gray seam mismatch and the
   white-fields-on-blue checkout question in one move. */
body.flow-page { background: #fff; }

/* Shared card surface — the course-card language as the artboards draw it:
   1px navy outline, TR/BL 16, NO shadow. */
.flow-card,
body.flow-page .tribe-tickets__tickets-wrapper,
body.flow-page .tribe-tickets__attendee-tickets-container {
    background: #fff;
    border: 1px solid var(--color-blue);
    border-radius: 0 16px 0 16px;
    box-shadow: none;
}

/* Shared field language — signup-band: Regular-16 labels, 48px navy boxes. */
body.flow-page .tribe-tickets__form-field-label,
body.flow-page .tribe-tickets__form label {
    font-weight: 400; font-size: var(--text-body); color: #000;
}
body.flow-page .tribe-tickets__form input[type="text"],
body.flow-page .tribe-tickets__form input[type="email"],
body.flow-page .tribe-tickets__form input[type="tel"],
body.flow-page .tribe-tickets__form input[type="number"],
body.flow-page .tribe-tickets__form select {
    inline-size: 100%; block-size: 48px; padding: 12px;
    border: 1px solid var(--color-blue); border-radius: 0; background: #fff;
    font: inherit; font-size: var(--text-body); color: #000;
}
body.flow-page .tribe-tickets__form input:focus-visible,
body.flow-page .tribe-tickets__form select:focus-visible {
    outline: 2px solid var(--color-blue); outline-offset: 1px;
}

/* btn-notch vs plugin button skins: ET's unlayered c-btn rules beat the
   layered family construction in main.css, so re-assert the contested
   properties here (the uncontested motion/label rules still cascade from
   main.css). Same shape as the GF fight. */
body.flow-page .btn-notch.tribe-common-c-btn,
body.flow-page button.btn-notch {
    display: inline-flex; align-items: stretch;
    /* padding is !important on purpose: ET ships per-STATE variants at
       climbing specificity (:hover tied, :disabled WINS at 0,4,0 — the
       crushed 49x24 arrow box John caught twice). One geometry, every
       state, no arms race. */
    inline-size: auto; block-size: 48px; padding: 0 !important;
    background: none; border: 1px solid var(--bn-line, var(--color-blue));
    border-radius: 0; color: var(--bn-line, var(--color-blue));
    font: inherit; text-transform: none; letter-spacing: normal;
    overflow: hidden; position: relative; isolation: isolate;
    cursor: pointer;
}
/* Every interactive state re-declares the geometry: ET's own :hover/:active
   rules tie on specificity and land later — an unre-asserted padding was the
   "button changes width on hover" jank (ET pads 11/14, which also crushed
   the icon box to 24px tall at rest). */
body.flow-page .btn-notch.tribe-common-c-btn:hover,
body.flow-page .btn-notch.tribe-common-c-btn:focus,
body.flow-page .btn-notch.tribe-common-c-btn:focus-visible,
body.flow-page .btn-notch.tribe-common-c-btn:active {
    background: none; /* the family ::before wipe paints the fill */
    padding: 0; block-size: 48px;
    border-width: 1px;
}
/* Disabled: a solid quiet state — muted line, gray label, line-gray arrow
   box w/ white arrow. (The old 0.45-opacity composite read as sloppy —
   half-transparent navy over white + visible seams. John 08-05.) */
body.flow-page .btn-notch[disabled],
body.flow-page .btn-notch[disabled]:hover,
body.flow-page .btn-notch:disabled,
body.flow-page .btn-notch:disabled:hover {
    opacity: 1; cursor: not-allowed;
    border-color: #b7bec9; color: #6b7480 !important;
    padding: 0; block-size: 48px;
    /* !important like the padding above — ET's :disabled state rule (0,4,0)
       painted its brand blue THROUGH the un-armored background (John 08-10,
       "we troubleshot this once before": the same per-state arms race, one
       property short). One quiet state, every selector form, no re-fights. */
    background: none !important;
}
/* Blocks-notchified buttons: Woo's unlayered skin outranks the layered
   icon/label rules — re-assert the family's contested properties with
   headroom (08-10, the Place Order rebuild). */
body.flow-page button.btn-notch .btn-notch__icon {
    color: var(--bn-arrow, #fff); background: var(--bn-fill, var(--color-blue));
    display: grid; place-items: center; inline-size: 49px; flex: 0 0 49px; align-self: stretch;
}
body.flow-page .btn-notch[disabled]::before, body.flow-page .btn-notch:disabled::before { display: none; }
body.flow-page .btn-notch[disabled] .btn-notch__label, body.flow-page .btn-notch:disabled .btn-notch__label { color: #6b7480 !important; } /* the fill variant's label color tied through — same armor as the background */
body.flow-page .btn-notch[disabled] .btn-notch__icon, body.flow-page .btn-notch:disabled .btn-notch__icon { background: #b7bec9; color: #fff; }
/* ET's unlayered `.tribe-common span` reset zeroes the label's padding, and
   its width-capped buttons let flex-shrink crush the 49px arrow box — the
   family construction re-asserted against both. */
body.flow-page .btn-notch { min-inline-size: max-content; }
body.flow-page .btn-notch .btn-notch__label { padding-inline: 17px 15px; display: inline-flex; align-items: center; }
body.flow-page .btn-notch .btn-notch__icon { inline-size: 49px; flex: 0 0 49px; align-self: stretch; block-size: auto; }

/* Amber text links (ADA standard) on plugin-owned anchors. */
body.flow-page .tribe-tickets__tickets-footer-back-link,
body.flow-page .tribe-tickets__registration-back-to-cart,
body.flow-page .tribe-tickets__mini-cart a {
    color: var(--color-link); font-weight: 600; text-decoration: underline;
}

/* ---- Tickets block (event single "Register") ---------------------------- */
.event-single__tickets { margin-block-start: var(--size-6); }
.event-single__tickets > h2 {
    margin: 0 0 var(--size-3);
    font-weight: 500; font-size: 1.5rem; line-height: calc(28 / 24); /* side-heading Medium 24 */
    text-transform: none; letter-spacing: normal; /* the body-h2 UPPERCASE rule must not reach the section label */
    color: var(--color-blue);
}
/* ET prints its own "Tickets" heading — our section h2 owns the label. */
body.flow-page .tribe-tickets__tickets-title { display: none; }

body.flow-page .tribe-tickets__tickets-wrapper { padding: clamp(var(--size-4), 3vw, 40px); }
body.flow-page .tribe-tickets__tickets-form { display: block; }

/* Cart-edit notice ("numbers below include tickets already in your cart") —
   the barred info voice: band-gray plate, orange bar. */
body.flow-page .tribe-tickets__notice--barred {
    margin: 0 0 var(--size-4); padding: 12px 16px;
    background: var(--color-gray-band);
    border-inline-start: 3px solid var(--color-orange);
    font-size: 0.875rem; color: var(--color-slate);
}
body.flow-page .tribe-tickets__notice--barred p { margin: 0; }

/* Ticket row: [name + availability] | price | stepper, hairline-separated. */
body.flow-page .tribe-tickets__tickets-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--size-2) var(--size-4);
    align-items: center;
    padding-block: var(--size-3);
    border-block-end: 1px solid var(--color-line);
}
body.flow-page .tribe-tickets__tickets-item:first-of-type { padding-block-start: 0; }
/* ET also rules the footer's top — with our item hairline above it that drew
   a DOUBLE rule around 24px of permanently-empty strip (John 08-05 eve:
   "just one"). The item's bottom hairline is the keeper: extra ticket types
   stack as more items, so every row pair gets exactly one rule. ET carries
   the compound `.event-tickets .tribe-tickets__tickets-footer` (0,2,0) —
   a two-class rule here TIES and loses on load order (computed-style probe
   caught it); match the compound. */
body.flow-page .event-tickets .tribe-tickets__tickets-footer { border-block-start: 0; }
/* ET's form skin (gray 1px border + 24 padding) re-surfaced INSIDE the styled
   card — the "second outline" John flagged once before and again 08-10
   (regression; ET's own compound is 2-class, this 3-class outguns it
   regardless of load order). The wrapper's clamp padding above is the ONE
   designed inset — the form contributes none. */
body.flow-page .event-tickets .tribe-tickets__tickets-form { border: 0; padding: 0; }
body.flow-page .tribe-tickets__tickets-item-content-title-container { grid-column: 1; }
body.flow-page .tribe-tickets__tickets-item-content-title {
    margin: 0; font-weight: 700; font-size: var(--text-body-lg); color: var(--color-blue);
}
body.flow-page .tribe-tickets__tickets-item-extra { grid-column: 2; text-align: end; }
body.flow-page .tribe-tickets__tickets-item-extra-price {
    font-weight: 600; font-size: 1.25rem; color: var(--color-blue); white-space: nowrap;
}
body.flow-page .tribe-tickets__tickets-item-extra-available {
    display: block; margin-block-start: 2px;
    font-size: 0.875rem; color: var(--color-gray); white-space: nowrap;
}
/* Sold out: ET flags the item; mute it and let the state line carry it. */
body.flow-page .tribe-tickets__tickets-item[data-available="false"] .tribe-tickets__tickets-item-content-title { color: var(--color-gray); }
body.flow-page .tribe-tickets__tickets-item[data-available="false"] .tribe-tickets__tickets-item-extra-available { font-weight: 700; color: var(--color-slate); }

/* Stepper: segmented 48px control in the navy-box input language. */
body.flow-page .tribe-tickets__tickets-item-quantity {
    grid-column: 3;
    display: inline-flex; align-items: stretch; block-size: 48px;
}
body.flow-page button.tribe-tickets__tickets-item-quantity-remove,
body.flow-page button.tribe-tickets__tickets-item-quantity-add {
    inline-size: 48px; display: grid; place-items: center;
    padding: 0; border: 1px solid var(--color-blue); background: #fff;
    font-size: 1.375rem; font-weight: 600; line-height: 1; color: var(--color-blue);
    cursor: pointer;
    transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
body.flow-page button.tribe-tickets__tickets-item-quantity-remove:hover,
body.flow-page button.tribe-tickets__tickets-item-quantity-add:hover,
body.flow-page button.tribe-tickets__tickets-item-quantity-remove:focus-visible,
body.flow-page button.tribe-tickets__tickets-item-quantity-add:focus-visible {
    background: var(--color-blue); color: #fff;
}
body.flow-page button.tribe-tickets__tickets-item-quantity-remove:focus-visible,
body.flow-page button.tribe-tickets__tickets-item-quantity-add:focus-visible {
    outline: 2px solid var(--color-blue); outline-offset: 2px;
}
body.flow-page .tribe-tickets__tickets-item-quantity-number { display: inline-flex; }
body.flow-page .tribe-tickets__tickets-item-quantity-number-input {
    inline-size: 64px; block-size: 48px; padding: 0; text-align: center;
    border: 1px solid var(--color-blue); border-inline: 0;
    font: inherit; font-weight: 600; font-size: var(--text-body-lg); color: var(--color-blue);
    background: #fff; border-radius: 0;
    appearance: textfield;
}
body.flow-page .tribe-tickets__tickets-item-quantity-number-input::-webkit-outer-spin-button,
body.flow-page .tribe-tickets__tickets-item-quantity-number-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
body.flow-page .tribe-tickets__tickets-item-quantity-number-input:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }

/* Footer: hairline, then quantity/total cluster + Get Tickets right. */
body.flow-page .tribe-tickets__tickets-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--size-3) var(--size-4);
    margin-block-start: var(--size-4); padding-block-start: var(--size-4);
    border-block-start: 1px solid var(--color-line);
}
body.flow-page .tribe-tickets__tickets-footer-quantity,
body.flow-page .tribe-tickets__tickets-footer-total {
    font-size: var(--text-body); color: var(--color-slate);
}
body.flow-page .tribe-tickets__tickets-footer-quantity-number,
body.flow-page .tribe-tickets__tickets-footer-total-wrap {
    font-weight: 700; font-size: 1.25rem; color: var(--color-blue);
}
/* ---- Attendee registration page ---------------------------------------- */
/* ETP prints its own page h1 AND a back-to-cart row (the div.tribe-common-h8
   wrapping the link, carrying a 96px top margin) — the hero + crumb own both. */
body.flow-page .tribe-tickets__registration-page-title { display: none; }
main.flow-main--ar .tribe-tickets__registration > .tribe-common-h8 { display: none; }

/* ET's own .registration-grid is the real two-column wrapper (content +
   mini-cart live inside it); re-column it and strip the stock offsets
   (grid pt 56 / mini-cart mt 160 exist to fake alignment in their skin). */
main.flow-main--ar .tribe-tickets__registration-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--size-4);
    padding-block-start: 0;
    align-items: start;
}
@media (min-width: 60em) {
    main.flow-main--ar .tribe-tickets__registration-grid {
        grid-template-columns: minmax(0, 1fr) 330px;
        column-gap: 57px;
    }
    main.flow-main--ar .tribe-tickets__mini-cart {
        position: sticky; inset-block-start: 88px; /* clears the shrunk 56px bar */
    }
}
main.flow-main--ar .tribe-tickets__mini-cart { margin-block: 0; }

/* Event header inside the form: date kicker + event title. */
main.flow-main--ar .tribe-tickets__registration-content time,
main.flow-main--ar .tribe-tickets__registration-content .tribe-tickets__registration-event-date {
    font-size: 0.875rem; color: var(--color-slate);
}
main.flow-main--ar .tribe-tickets__registration-content h2 {
    margin: 4px 0 var(--size-3);
    font-weight: 700; font-size: 1.5rem; color: var(--color-blue);
}

/* Attendee card: the course-card surface; one per seat. */
body.flow-page .tribe-tickets__attendee-tickets-container {
    margin-block-end: var(--size-4);
    padding: clamp(var(--size-4), 3vw, 40px);
}
/* Card head = the ticket name; per-attendee h4s sit below on hairlines. */
body.flow-page .tribe-tickets__attendee-tickets-container > h3 {
    margin: 0 0 var(--size-4); padding-block-end: var(--size-2);
    border-block-end: 1px solid var(--color-line);
    font-weight: 700; font-size: var(--text-body-lg); color: var(--color-blue);
}
body.flow-page .tribe-tickets__form.tribe-tickets__attendee-tickets-item + .tribe-tickets__form.tribe-tickets__attendee-tickets-item {
    margin-block-start: var(--size-4); padding-block-start: var(--size-4);
    border-block-start: 1px solid var(--color-line);
}
body.flow-page .tribe-tickets__attendee-tickets-item-header h4,
body.flow-page .tribe-tickets__attendee-tickets-item-header {
    margin: 0 0 var(--size-3);
    font-weight: 700; font-size: var(--text-body); color: var(--color-blue);
}
/* Fields: stack label over input, signup-band style. ETP's side-label layout
   rides a 4-class chain (.event-tickets .item.form .field, flex-flow row at
   desktop) in tickets-attendee-tickets.css — mirror the chain + body to
   out-rank every variant. */
body.flow-page .tribe-tickets__attendee-tickets-item.tribe-tickets__form .tribe-tickets__form-field {
    display: block; margin-block-end: var(--size-3);
}
body.flow-page .tribe-tickets__attendee-tickets-item.tribe-tickets__form .tribe-tickets__form-field-label {
    display: block; margin: 0 0 4px; padding: 0; float: none;
    inline-size: auto; max-inline-size: none; flex: none;
}
body.flow-page .tribe-tickets__attendee-tickets-item.tribe-tickets__form .tribe-tickets__form-field-input-wrapper {
    display: block; inline-size: auto; max-inline-size: none; flex: none;
}
body.flow-page .tribe-tickets__attendee-tickets-item input,
body.flow-page .tribe-tickets__attendee-tickets-item select { max-inline-size: 480px; }
body.flow-page .tribe-tickets__form .tribe-required { color: var(--color-link); }

/* Ticket summary (mini-cart) card. */
body.flow-page .tribe-tickets__mini-cart { padding: var(--size-4); }
body.flow-page .tribe-tickets__mini-cart-title,
body.flow-page .tribe-tickets__mini-cart > h3 {
    margin: 0 0 var(--size-3);
    font-weight: 500; font-size: 1.5rem; color: var(--color-blue);
}
/* Summary row: name + event on top, then qty × unit …… line total.
   Explicit rows everywhere — auto-placement scrambles the order once the
   qty/total cells claim row 2. */
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item {
    display: grid; grid-template-columns: auto auto 1fr;
    gap: 2px var(--size-2); align-items: center; /* NOT baseline: the sale-price nest carries hidden spans that wreck baselines */
    padding-block: var(--size-2) var(--size-3);
    border-block-end: 0;
}
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item .tribe-tickets__tickets-item-extra * { display: inline; }
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item-content-title-container { grid-row: 1; grid-column: 1 / -1; }
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item-content-title {
    font-weight: 700; font-size: var(--text-body); color: var(--color-blue);
}
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item-content-subtitle {
    font-weight: 400; font-size: 0.75rem; color: var(--color-slate);
}
body.flow-page .tribe-tickets__mini-cart .tribe-ticket-quantity {
    grid-column: 1; grid-row: 2 !important;
    inline-size: auto; margin: 0; text-align: start; justify-self: start;
    font-size: 0.875rem; color: var(--color-slate);
}
body.flow-page .tribe-tickets__mini-cart .tribe-ticket-quantity::after { content: " \00d7"; }
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item .tribe-tickets__tickets-item-extra,
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item .tribe-ticket-quantity,
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item .tribe-tickets__tickets-item-total-wrap {
    position: static; inset: auto; /* ET absolutely positions these in its mini-cart skin */
}
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item .tribe-tickets__tickets-item-extra {
    /* !important: ET's own mini-cart grid pins this to row 1 via a chain
       specificity can't reasonably out-rank — same doctrine as the GF
       Orbital fights in main.css EOF. */
    grid-column: 2; grid-row: 2 !important; text-align: start; margin: 0;
}
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item .tribe-tickets__tickets-item-extra-price {
    font-weight: 400; font-size: 0.875rem; color: var(--color-slate);
}
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-item-total-wrap {
    grid-column: 3; grid-row: 2; text-align: end;
    font-weight: 600; font-size: var(--text-body); color: var(--color-blue);
}
body.flow-page .tribe-tickets__mini-cart .tribe-tickets__tickets-footer {
    justify-content: space-between;
    margin-block-start: var(--size-2); padding-block-start: var(--size-3);
}

/* Footer actions: notch submit rides the content column's end. */
body.flow-page .tribe-tickets__registration-footer,
body.flow-page .tribe-tickets__registration-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--size-4);
    margin-block-start: var(--size-3);
}
@media (min-width: 60em) {
    /* Keep the submit under the CONTENT column, not under the sidebar. */
    main.flow-main--ar .tribe-tickets__registration-footer { padding-inline-end: calc(330px + 57px); }
}

/* Validation voice — the signup-band pattern. */
body.flow-page .tribe-tickets__notice--error,
body.flow-page .tribe-tickets__validation-notice {
    margin: 0 0 var(--size-3); padding: 6px 10px;
    background: #fdecea; border-inline-start: 3px solid #b3261e; color: #7a1a14;
    font-size: 0.875rem;
}
body.flow-page .tribe-tickets__notice--error p,
body.flow-page .tribe-tickets__validation-notice p { margin: 0; }

/* ---- Woo Blocks shared (cart + checkout) -------------------------------- */
/* Type: Blocks inherit the page stack but carry their own sizes/inks. */
body.flow-page .wc-block-components-title,
body.flow-page .wc-block-components-checkout-step__title {
    font-family: inherit; font-weight: 500; font-size: 1.5rem; color: var(--color-blue);
}
body.flow-page .wc-block-components-checkout-step__description {
    font-size: 0.875rem; color: var(--color-slate);
}

/* Primary advance buttons (React-owned markup): the notch language drawn in
   CSS — navy hairline box, label left, 49px navy tail with the family arrow.
   The real-markup buttons keep the split-arrow motion; these get the fill
   swap only. */
body.flow-page .wc-block-components-button {
    position: relative;
    display: inline-flex; align-items: center; justify-content: flex-start;
    min-block-size: 48px; padding: 0 65px 0 17px;
    background: #fff; border: 1px solid var(--color-blue); border-radius: 0;
    font: inherit; font-size: var(--text-body); font-weight: 400; color: var(--color-blue);
    text-transform: none; letter-spacing: normal; text-decoration: none;
    box-shadow: none; cursor: pointer;
    transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
body.flow-page .wc-block-components-button:not(.btn-notch)::after {
    content: "";
    position: absolute; inset-block: -1px; inset-inline-end: -1px;
    inline-size: 49px;
    background-color: var(--color-blue);
}
/* FULL family split-arrow motion on the recreation (John 08-06: "changes
   color but doesn't grow" — the fill-swap-only compromise is revoked).
   React owns the markup, so the arrow is a MASKED ::before over the ::after
   box: two mask layers (head, shaft as standalone-viewBox vectors), their
   mask-position/mask-size tween 0.1s = the real btn-notch's scaleX(1.371)
   shaft + translateX(3.16u) head about the same anchors (svg→px ×1.0724,
   arrow left at the box's 12.5); background-color carries the white→orange
   flip through the SAME 0.1s. Zero JS, survives any React re-render. */
body.flow-page .wc-block-components-button:not(.btn-notch)::before {
    content: "";
    position: absolute; inset-block: -1px; inset-inline-end: -1px;
    inline-size: 49px; z-index: 1;
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9.19714 0 13.1838 22.3809'%3E%3Cpath d='M17.0304 9.79163L9.19714 1.95831L11.1904 0L22.3809 11.1904L11.1904 22.3809L9.19714 20.4225L17.0304 12.5892Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 9.79163 17.0304 2.79757'%3E%3Cpath d='M0 9.79163H17.0304V12.5892H0Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: 22.36px center, 12.5px center;
    -webkit-mask-size: 14.14px 24px, 18.26px 3px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9.19714 0 13.1838 22.3809'%3E%3Cpath d='M17.0304 9.79163L9.19714 1.95831L11.1904 0L22.3809 11.1904L11.1904 22.3809L9.19714 20.4225L17.0304 12.5892Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 9.79163 17.0304 2.79757'%3E%3Cpath d='M0 9.79163H17.0304V12.5892H0Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat, no-repeat;
    mask-position: 22.36px center, 12.5px center;
    mask-size: 14.14px 24px, 18.26px 3px;
    /* Mask-position/size are NOT transitioned (08-10, John's "blue arrow
       behind the white one"): Chrome mis-paints mid-interpolation of TWO
       mask layers tweening position+size together — a giant layer-1 arrow
       ghosts through (computed styles read correct; the PAINT lies). The
       states snap; the color keeps its fade. */
    transition: background-color 0.1s ease-out;
}
body.flow-page .wc-block-components-button:hover,
body.flow-page .wc-block-components-button:focus-visible {
    background: var(--color-blue); color: #fff;
    box-shadow: none;
}
body.flow-page .wc-block-components-button:not(.btn-notch):hover::before,
body.flow-page .wc-block-components-button:not(.btn-notch):focus-visible::before {
    background-color: var(--color-orange);
    -webkit-mask-position: 25.75px center, 9.11px center;
    -webkit-mask-size: 14.14px 24px, 25.04px 3px;
    mask-position: 25.75px center, 9.11px center;
    mask-size: 14.14px 24px, 25.04px 3px;
}
@media (prefers-reduced-motion: reduce) {
    body.flow-page .wc-block-components-button:not(.btn-notch)::before { transition: none; }
}
body.flow-page .wc-block-components-button:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
body.flow-page .wc-block-components-button .wc-block-components-button__text { font: inherit; }
body.flow-page .wc-block-components-button:disabled,
body.flow-page .wc-block-components-button[aria-disabled="true"] {
    opacity: 0.45; cursor: not-allowed;
    background: #fff; color: var(--color-blue);
}

/* Text inputs: the 48px navy-box language. Blocks float the label inside
   the box; we seat it ABOVE the field (label follows input in their DOM —
   column-reverse turns it into the signup-band stack). */
body.flow-page .wc-block-components-text-input,
body.flow-page .wc-block-components-combobox,
body.flow-page .wc-block-components-form .wc-block-components-text-input {
    display: flex; flex-direction: column-reverse;
    margin-block-start: var(--size-3);
}
body.flow-page .wc-block-components-text-input label,
body.flow-page .wc-block-components-combobox .wc-block-components-combobox-control label {
    position: static; transform: none;
    margin: 0 0 4px; font-size: var(--text-body); font-weight: 400; color: #000;
    pointer-events: auto;
}
body.flow-page .wc-block-components-text-input input,
body.flow-page .wc-block-components-combobox .components-combobox-control__suggestions-container input,
body.flow-page .wc-block-components-combobox input {
    min-block-size: 48px; padding: 12px !important;
    border: 1px solid var(--color-blue); border-radius: 0; background: #fff;
    font: inherit; font-size: var(--text-body); color: #000;
    box-shadow: none;
}
body.flow-page .wc-block-components-text-input input:focus,
body.flow-page .wc-block-components-combobox input:focus {
    outline: 2px solid var(--color-blue); outline-offset: 1px; box-shadow: none;
}
/* Selects (country/state) share the language. */
body.flow-page .wc-blocks-components-select__select,
body.flow-page .wc-block-components-select .components-custom-select-control__button {
    min-block-size: 48px; border: 1px solid var(--color-blue); border-radius: 0;
    font: inherit; font-size: var(--text-body); background: #fff;
}
body.flow-page .wc-blocks-components-select__label { position: static; transform: none; margin: 0 0 4px; font-size: var(--text-body); }

/* Checkboxes/radios: navy accent. */
body.flow-page .wc-block-components-checkbox input[type="checkbox"],
body.flow-page .wc-block-components-radio-control__input {
    accent-color: var(--color-blue);
    inline-size: 18px; block-size: 18px;
    border: 1px solid var(--color-blue);
}
body.flow-page .wc-block-components-radio-control__input { border-radius: 50%; }
body.flow-page .wc-block-components-checkbox input[type="checkbox"]:focus-visible,
body.flow-page .wc-block-components-radio-control__input:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* Notices: info = barred voice; errors = validation voice. */
body.flow-page .wc-block-components-notice-banner {
    border-radius: 0; font-size: 0.875rem;
}
body.flow-page .wc-block-components-notice-banner.is-error {
    background: #fdecea; border: 0; border-inline-start: 3px solid #b3261e; color: #7a1a14;
}
body.flow-page .wc-block-components-notice-banner.is-info,
body.flow-page .wc-block-components-notice-banner.is-success {
    background: var(--color-gray-band); border: 0;
    border-inline-start: 3px solid var(--color-orange); color: var(--color-slate);
}

/* Order summary (sidebar) card — course tickets have no imagery; the name
   and event line carry the row. */
body.flow-page .wc-block-components-sidebar .wc-block-components-panel,
body.flow-page .wc-block-components-order-summary,
body.flow-page .wc-block-components-totals-wrapper { font-size: var(--text-body); }
body.flow-page .wc-block-components-order-summary-item__image { display: none; }
body.flow-page .wc-block-components-order-summary-item__description { padding-inline-start: 0; }
body.flow-page .wc-block-components-product-name {
    font-weight: 700; color: var(--color-blue); text-decoration: none;
}
body.flow-page .wc-block-components-product-metadata__description { font-size: 0.875rem; color: var(--color-slate); }
body.flow-page .wc-block-components-totals-item__label { font-weight: 400; }
body.flow-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.flow-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 700; font-size: 1.25rem; color: var(--color-blue);
}

/* ---- Cart specifics ------------------------------------------------------ */
/* Sidebar card surface for the totals column: the OUTLINED card language
   (1px navy, no shadow — the event card / received cards / tickets card
   family; the dropshadow read off-family, John 08-05 eve). */
main.flow-main--cart .wp-block-woocommerce-cart-totals-block {
    background: #fff; border-radius: 0 16px 0 16px;
    border: 1px solid var(--color-blue); box-shadow: none;
    padding: var(--size-4);
}
main.flow-main--cart .wc-block-cart-items {
    font-size: var(--text-body);
}
main.flow-main--cart .wc-block-cart-items__header { display: none; }
main.flow-main--cart .wc-block-cart-item__image { display: none; }
main.flow-main--cart .wc-block-cart-items .wc-block-cart-items__row {
    padding-block: var(--size-3);
    border-block-end: 1px solid var(--color-line);
}
main.flow-main--cart .wc-block-cart-item__product .wc-block-components-product-name {
    font-size: var(--text-body-lg);
}
main.flow-main--cart .wc-block-cart-item__prices { font-weight: 600; color: var(--color-blue); }
/* Quantity selector to the stepper language. */
main.flow-main--cart .wc-block-components-quantity-selector {
    display: inline-flex; block-size: 48px; margin: 0;
}
main.flow-main--cart .wc-block-components-quantity-selector::after { display: none; }
main.flow-main--cart .wc-block-components-quantity-selector button {
    inline-size: 48px; border: 1px solid var(--color-blue); border-radius: 0;
    background: #fff; color: var(--color-blue); font-size: 1.375rem; font-weight: 600;
    opacity: 1;
    transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
main.flow-main--cart .wc-block-components-quantity-selector button:hover,
main.flow-main--cart .wc-block-components-quantity-selector button:focus-visible {
    background: var(--color-blue); color: #fff;
}
main.flow-main--cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
    inline-size: 64px; border: 1px solid var(--color-blue); border-inline: 0; border-radius: 0;
    font: inherit; font-weight: 600; font-size: var(--text-body-lg); color: var(--color-blue);
}
main.flow-main--cart .wc-block-cart-item__remove-link {
    color: var(--color-link); font-size: 0.875rem; text-decoration: underline;
}

/* Brand empty state (page-18 inner block markup). */
.flow-empty-cart { padding-block: var(--size-4) var(--size-2); }
.flow-empty-cart__title {
    margin: 0 0 var(--size-2);
    font-weight: 700; font-size: 1.875rem; color: var(--color-blue);
}
.flow-empty-cart__body { margin: 0 0 var(--size-4); max-inline-size: 42rem; }

/* ---- Checkout specifics -------------------------------------------------- */
main.flow-main--checkout .wc-block-checkout__form { max-inline-size: none; }
/* NO rules between sections (John 08-05 eve: "big enough space alone is
   sufficient" — and the old border doubled up with Blocks' own after
   Add-a-note; standing rule: no double rules anywhere unless design
   draws them). Air carries the separation. */
main.flow-main--checkout .wc-block-components-checkout-step {
    padding-block: var(--size-4) var(--size-5);
    border-block-end: 0;
}
main.flow-main--checkout .wc-block-components-checkout-step::before,
main.flow-main--checkout .wc-block-components-checkout-step::after { display: none; }
/* Payment options: white option plates, navy borders, chosen = navy fill edge. */
main.flow-main--checkout .wc-block-components-radio-control-accordion-option,
main.flow-main--checkout .wc-block-components-radio-control__option {
    border: 1px solid var(--color-line); border-radius: 0;
    padding: var(--size-3);
    margin-block-end: var(--size-2);
    background: #fff;
}
main.flow-main--checkout .wc-block-components-radio-control__option-checked,
main.flow-main--checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--color-blue); /* inset left accent RETIRED (John 08-05 eve: distracting) — the navy outline + filled dot carry the chosen state */
}
main.flow-main--checkout .wc-block-components-radio-control__label { font-weight: 600; color: var(--color-blue); }
/* Sidebar summary card. */
main.flow-main--checkout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
    background: #fff; border-radius: 0 16px 0 16px;
    box-shadow: 0 4px 20px rgb(32 35 91 / 0.10);
    padding: var(--size-4);
}
/* Place Order carries the flow's weight: full-width notch. */
main.flow-main--checkout .wc-block-components-checkout-place-order-button {
    inline-size: 100%; justify-content: flex-start;
}

/* ---- Order received (classic Woo templates) ------------------------------ */
main.flow-main--received .woocommerce-thankyou-order-received {
    margin: 0 0 var(--size-4);
    font-weight: 500; font-size: 1.5rem; line-height: calc(34 / 24); color: var(--color-blue);
}
/* Overview strip (number / date / total / method) as a card of stat pairs.
   ONE row at desktop (John 08-10: no wrapping at default size) — Woo core
   floats + borders these li under our flex; neutralize before composing.
   Narrow screens fall back to a 2-col stat grid. */
main.flow-main--received .woocommerce-thankyou-order-details {
    list-style: none; margin: 0 0 var(--size-5); padding: var(--size-4) var(--size-5);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--size-3) var(--size-4);
    background: #fff; border-radius: 0 16px 0 16px;
    box-shadow: 0 4px 20px rgb(32 35 91 / 0.10);
}
main.flow-main--received .woocommerce-thankyou-order-details li {
    float: none; inline-size: auto; margin: 0; border: 0; padding: 0;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-slate); white-space: nowrap;
    display: grid; gap: 4px; align-content: end; /* labels seat DOWN onto their values (John 08-10) */
}
/* "ORDER NUMBER:" may break — a two-line label over a 3-digit value beats a
   wide cell (John 08-10). min-content wraps it at the space. */
main.flow-main--received .woocommerce-thankyou-order-details li:first-child {
    white-space: normal; max-inline-size: min-content;
}
main.flow-main--received .woocommerce-thankyou-order-details li + li {
    border-inline-start: 1px solid var(--color-line); padding-inline-start: var(--size-4);
}
/* Woo core kills the last li's border at (0,3,2) — li:last-of-type { border:none }
   — which amputated ONLY the total/payment divider. Match it and re-state. */
main.flow-main--received .woocommerce-thankyou-order-details li:last-of-type {
    border-inline-start: 1px solid var(--color-line);
}
main.flow-main--received .woocommerce-thankyou-order-details li strong {
    /* 1rem, not body-lg: at 18px/700 the five cells genuinely exceed the row
       and flex fragments them — 16px seats all five with ~60px of slack */
    font-size: var(--text-body); font-weight: 700; letter-spacing: normal;
    text-transform: none; color: var(--color-blue);
}
@media (max-width: 47.9375em) {
    main.flow-main--received .woocommerce-thankyou-order-details {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--size-3) var(--size-4);
    }
    main.flow-main--received .woocommerce-thankyou-order-details li + li {
        border-inline-start: 0; padding-inline-start: 0;
    }
    main.flow-main--received .woocommerce-thankyou-order-details li { white-space: normal; }
    main.flow-main--received .woocommerce-thankyou-order-details li strong { overflow-wrap: anywhere; }
}
main.flow-main--received .woocommerce-order p,
main.flow-main--received .woocommerce-customer-details address { font-size: var(--text-body); }
main.flow-main--received .woocommerce-order > section > h2,
main.flow-main--received .woocommerce-order h2 {
    margin: var(--size-5) 0 var(--size-3);
    font-weight: 500; font-size: 1.5rem; color: var(--color-blue);
}
main.flow-main--received .woocommerce-table--order-details,
main.flow-main--received .woocommerce-customer-details address {
    inline-size: 100%;
    background: #fff; border-radius: 0 16px 0 16px;
    box-shadow: 0 4px 20px rgb(32 35 91 / 0.10);
    border: 0; padding: var(--size-4);
}
/* Details ledger. border-SEPARATE, not collapse — collapse clips the family
   corner radius off the card. Every rule is placed on purpose: blue line
   under the column heads, one hairline BETWEEN line items, blue line before
   the totals; everything else separates on air alone (John 08-10: the
   default was "lots of random rules"). */
main.flow-main--received .woocommerce-table--order-details {
    border-collapse: separate; border-spacing: 0;
    padding: var(--size-5) var(--size-6) var(--size-6);
}
main.flow-main--received .woocommerce-table--order-details th,
main.flow-main--received .woocommerce-table--order-details td {
    border: 0; padding: 0; text-align: start; font-size: var(--text-body);
}
main.flow-main--received .woocommerce-table--order-details thead th {
    padding-block-end: var(--size-3);
    border-block-end: 1px solid var(--color-blue);
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-slate);
}
main.flow-main--received .woocommerce-table--order-details > tbody > tr > td {
    padding: var(--size-5) 0; vertical-align: top;
    border-block-end: 1px solid var(--color-line);
}
main.flow-main--received .woocommerce-table--order-details > tbody > tr:last-child > td { border-block-end: 0; }
main.flow-main--received .woocommerce-table--order-details thead th:last-child,
main.flow-main--received .woocommerce-table--order-details > tbody > tr > td:last-child { text-align: end; }
main.flow-main--received .woocommerce-table--order-details > tbody > tr > td:last-child {
    font-weight: 700; font-size: var(--text-body-lg); color: var(--color-blue);
    padding-inline-start: var(--size-4);
}
/* Product cell composition: the name leads, event meta settles quiet under it. */
main.flow-main--received .woocommerce-table--order-details .product-name > a {
    font-weight: 600; font-size: var(--text-body-lg); color: var(--color-blue);
}
main.flow-main--received .woocommerce-table--order-details .product-quantity {
    font-weight: 500; color: var(--color-slate);
}
main.flow-main--received .woocommerce-table--order-details .tribe-event-details {
    margin-block-start: var(--size-2); max-inline-size: 34rem;
    font-size: 0.875rem; font-weight: 400; line-height: 1.6; color: var(--color-slate);
}
main.flow-main--received .woocommerce-table--order-details .tribe-event-details em { font-style: normal; }
main.flow-main--received .woocommerce-table--order-details .tribe-event-details a { font-weight: 600; }
/* Attendee meta: ETP's rule-happy nested table becomes one quiet gray panel —
   caps labels / ink values, zero internal rules. */
main.flow-main--received .tribe-attendee-meta {
    inline-size: 100%; margin-block-start: var(--size-4);
    border-collapse: separate; border-spacing: 0;
    background: var(--color-gray-band); border-radius: 0 12px 0 12px;
}
main.flow-main--received .tribe-attendee-meta td {
    border: 0; padding: 5px var(--size-4); vertical-align: baseline;
    font-size: 0.9375rem; color: var(--color-ink);
}
main.flow-main--received .tribe-attendee-meta tr:first-child td { padding-block-start: var(--size-3); }
main.flow-main--received .tribe-attendee-meta tr:last-child td { padding-block-end: var(--size-3); }
main.flow-main--received .tribe-attendee-meta td:first-child {
    inline-size: 11rem; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-slate);
}
main.flow-main--received .tribe-attendee-meta strong { font-weight: 600; color: var(--color-blue); }
/* Totals ledger: labels start, values end. Woo prints Subtotal, Total,
   Payment method (+ Note) IN THAT ORDER here — the Total bump keys on row 2;
   a discount row would shift it (promos unused; revisit if that changes). */
main.flow-main--received .woocommerce-table--order-details tfoot th,
main.flow-main--received .woocommerce-table--order-details tfoot td { padding: 5px 0; }
main.flow-main--received .woocommerce-table--order-details tfoot tr:first-child th,
main.flow-main--received .woocommerce-table--order-details tfoot tr:first-child td {
    border-block-start: 1px solid var(--color-blue); padding-block-start: var(--size-4);
}
main.flow-main--received .woocommerce-table--order-details tfoot th {
    font-weight: 500; color: var(--color-slate);
}
main.flow-main--received .woocommerce-table--order-details tfoot td {
    text-align: end; font-weight: 700; color: var(--color-blue);
}
main.flow-main--received .woocommerce-table--order-details tfoot tr:nth-child(2) th { font-weight: 700; color: var(--color-blue); }
main.flow-main--received .woocommerce-table--order-details tfoot tr:nth-child(2) td { font-size: 1.25rem; }
main.flow-main--received .woocommerce-customer-details address { font-style: normal; line-height: calc(24 / 16); }

/* ---- My Account (light pass) --------------------------------------------- */
main.flow-main--account .woocommerce-MyAccount-navigation ul {
    list-style: none; margin: 0; padding: 0; background: var(--color-gray-band);
}
main.flow-main--account .woocommerce-MyAccount-navigation a {
    display: block; padding: var(--size-2) var(--size-3);
    font-weight: 700; font-size: 0.875rem; color: var(--color-blue);
    border-block-end: 1px solid #fff; text-decoration: none;
}
main.flow-main--account .woocommerce-MyAccount-navigation a:hover,
main.flow-main--account .woocommerce-MyAccount-navigation a:focus-visible { color: var(--color-orange); }
@media (min-width: 60em) {
    .flow-main--account .woocommerce {
        display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 57px;
        align-items: start;
    }
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 59.9375em) {
    .flow-page .tribe-tickets__tickets-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .flow-page .tribe-tickets__tickets-item-extra { grid-column: 1; text-align: start; }
    .flow-page .tribe-tickets__tickets-item-quantity { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .flow-main--ar .tribe-tickets__mini-cart { margin-block-start: var(--size-4); }
    .flow-page .tribe-tickets__registration-footer,
    .flow-page .tribe-tickets__registration-actions { justify-content: flex-start; }
}

/* ---- Checkout field anatomy (appended fight block) -----------------------
   Blocks inline-prints some of its styles after ours; these declarations
   need !important where Woo absolutely positions things (floating labels,
   radio dots). Contained to checkout internals — fight-sheet doctrine. */
/* Floating label → the signup-band stack: label seated above the box. */
body.flow-page .wc-block-components-text-input > label {
    position: static !important; transform: none !important;
    margin: 0 0 4px; padding: 0;
    font-size: var(--text-body); color: #000; pointer-events: auto;
}
/* DOM is [input, label]; column-reverse (set in the shared block above)
   floats the label to the top — no order juggling on top of it. */
body.flow-page .wc-block-components-text-input {
    display: flex; flex-direction: column-reverse; margin-block-start: var(--size-3);
}
body.flow-page .wc-block-components-text-input input {
    min-block-size: 48px; padding: 12px !important;
}
/* Radio options: Woo absolutely positions the dot over the label text once
   the fonts change — go flex, real dot in flow. */
body.flow-page .wc-block-components-radio-control__option {
    display: flex; align-items: flex-start; gap: 12px;
    padding: var(--size-3) !important; margin: 0 0 var(--size-2);
}
body.flow-page .wc-block-components-radio-control__input {
    position: static !important; inset: auto !important;
    margin-block-start: 3px; flex: 0 0 auto; transform: none !important;
}
body.flow-page .wc-block-components-radio-control__option-layout { flex: 1 1 auto; }
/* Address card + guest notice + terms: brand voices. */
body.flow-page .wc-block-components-address-card { border: 0; padding: 0; }
body.flow-page .wc-block-components-address-card__edit {
    color: var(--color-link); font-weight: 600; text-decoration: underline;
}
body.flow-page .wc-block-checkout__guest-checkout-notice,
body.flow-page .wc-block-checkout__terms {
    font-size: 0.875rem; color: var(--color-slate);
}
body.flow-page .wc-block-checkout__terms a { color: var(--color-link); }
/* Order summary rows: no imagery for courses; give the name room. */
body.flow-page .wc-block-components-order-summary-item__image { display: none !important; }
body.flow-page .wc-block-components-order-summary-item__description { padding-inline-start: 0 !important; }
body.flow-page .wc-block-components-order-summary-item__quantity {
    /* the little count badge loses its anchor once the image hides */
    position: static; box-shadow: none; border: 0;
    background: var(--color-blue); color: #fff;
    inline-size: 24px; block-size: 24px; display: grid; place-items: center;
    border-radius: 50%; font-size: 0.75rem; font-weight: 700;
}

/* ---- Confirmation extras: Your Tickets (ET Wallet Plus) ------------------ */
body.flow-page .tec-tickets__attendees-list-wrapper {
    margin-block: var(--size-5);
    padding: var(--size-4);
    background: #fff; border-radius: 0 16px 0 16px;
    box-shadow: 0 4px 20px rgb(32 35 91 / 0.10);
}
body.flow-page .tec-tickets__attendees-list-wrapper > h4 {
    margin: 0 0 var(--size-3);
    font-weight: 500; font-size: 1.5rem; color: var(--color-blue);
}
body.flow-page .tec-tickets__attendees-list-item {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--size-2) var(--size-4);
    padding-block: var(--size-3);
    border-block-start: 1px solid var(--color-line);
}
body.flow-page .tec-tickets__attendees-list-item-attendee-details-name {
    font-weight: 700; font-size: var(--text-body); color: var(--color-blue);
}
body.flow-page .tec-tickets__attendees-list-item-attendee-details-ticket {
    font-size: 0.875rem; color: var(--color-slate);
}
body.flow-page .tec-tickets__wallet-plus-passes-container {
    display: flex; align-items: center; gap: var(--size-3);
}
body.flow-page .tec-tickets__wallet-plus-component-pdf-button-container a {
    color: var(--color-link); font-weight: 600; text-decoration: underline;
}
/* The confirmation lead — one warm line under the hero. */
body.flow-page .woocommerce-thankyou-order-received {
    margin: 0 0 var(--size-4);
    font-weight: 500; font-size: 1.5rem; line-height: calc(34 / 24);
    color: var(--color-blue);
}

/* ---- My Account: login + forms to the field language --------------------- */
main.flow-main--account .woocommerce-form {
    background: #fff; border-radius: 0 16px 0 16px;
    box-shadow: 0 4px 20px rgb(32 35 91 / 0.10);
    border: 0; padding: clamp(var(--size-4), 3vw, 40px);
}
main.flow-main--account .woocommerce-form label { font-size: var(--text-body); }
main.flow-main--account .woocommerce-form input[type="text"],
main.flow-main--account .woocommerce-form input[type="email"],
main.flow-main--account .woocommerce-form input[type="password"] {
    inline-size: 100%; min-block-size: 48px; padding: 12px;
    border: 1px solid var(--color-blue); border-radius: 0; background: #fff;
    font: inherit; font-size: var(--text-body);
}
main.flow-main--account .woocommerce-form .show-password-input { inset-block-start: 12px; }
main.flow-main--account .woocommerce-form button.button {
    position: relative;
    display: inline-flex; align-items: center;
    min-block-size: 48px; padding: 0 65px 0 17px;
    background: #fff; border: 1px solid var(--color-blue); border-radius: 0;
    font: inherit; font-size: var(--text-body); color: var(--color-blue);
    cursor: pointer;
    transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
main.flow-main--account .woocommerce-form button.button::after {
    content: "";
    position: absolute; inset-block: -1px; inset-inline-end: -1px; inline-size: 49px;
    background-color: var(--color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.3809 22.3809' fill='%23ffffff'%3E%3Cpath d='M0 9.79163H17.0304V12.5892H0Z'/%3E%3Cpath d='M17.0304 9.79163L9.19714 1.95831L11.1904 0L22.3809 11.1904L11.1904 22.3809L9.19714 20.4225L17.0304 12.5892Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
}
main.flow-main--account .woocommerce-form button.button:hover,
main.flow-main--account .woocommerce-form button.button:focus-visible { background: var(--color-blue); color: #fff; }
main.flow-main--account .woocommerce-form .lost_password a,
main.flow-main--account .woocommerce-MyAccount-content a { color: var(--color-link); }

/* Gateway inner fields (Authorize.net accordion content) join the language. */
body.flow-page .wc-block-components-radio-control-accordion-content input {
    min-block-size: 44px; border: 1px solid var(--color-blue); border-radius: 0;
    font: inherit; font-size: var(--text-body);
}

/* Mobile cart rows: Woo's small-screen stack floats the line total into the
   space the (hidden) image occupied — pin it right, give the title room. */
@media (max-width: 48em) {
    main.flow-main--cart .wc-block-cart-items__row { position: relative; }
    main.flow-main--cart .wc-block-cart-item__total {
        position: absolute; inset-inline-end: 0; inset-block-start: var(--size-3);
    }
    main.flow-main--cart .wc-block-cart-item__product { padding-inline-end: 96px; }
}

/* ============================================================================
   PASS 2 — the Event Registration artboards' language (08-05, John's review).
   Jordan DID design registration (Steps 1-4 + v2 — a takeover flow we're not
   using), and its component language maps 1:1 onto the in-page flow: white
   ground, course-info RAIL + vertical divider, FLAT navy-bordered fields (no
   card-in-card), orange-caret dropdowns, footer bar = the jog rule with the
   advance buttons riding its raised right segment, ORANGE final submit.
   Later-in-sheet on purpose: these override the pass-1 rules they replace.
   ========================================================================= */

/* Hero step indicator ("Step 1 of 2" right-aligned, artboard header). */
.ihero--simple .ihero__inner { position: relative; }
.ihero__step {
    position: absolute; inset-inline-end: 0; inset-block-end: 4px;
    margin: 0; font-weight: 500; font-size: 1.5rem; color: var(--color-blue);
}
@media (max-width: 59.9375em) { .ihero__step { position: static; margin-block-start: 4px; } }

/* ---- AR: rail + divider + flat form ------------------------------------- */
main.flow-main--ar .flow-columns { display: grid; gap: var(--size-5); position: relative; }
@media (min-width: 60em) {
    main.flow-main--ar .flow-columns {
        grid-template-columns: 330px minmax(0, 1fr);
        column-gap: 57px;
    }
    main.flow-main--ar .flow-columns::before {
        content: ""; position: absolute; inset-block: 0; inline-size: 2px;
        inset-inline-start: 357px; /* rail 330 + half the 57 gap */
        background: rgb(7 37 97 / 0.5);
    }
}
.flow-rail__heading {
    margin: 0 0 var(--size-3);
    font-weight: 500; font-size: 1.5rem; color: var(--color-blue);
}
.flow-rail__course + .flow-rail__course,
.flow-rail__totals {
    margin-block-start: var(--size-4); padding-block-start: var(--size-4);
    border-block-start: 2px solid rgb(7 37 97 / 0.5); /* artboard: rail hairlines */
}
.flow-rail__row { margin: 0 0 var(--size-2); font-size: var(--text-body); color: var(--color-slate); }
.flow-rail__row strong { color: var(--color-blue); }
.flow-rail__qty { display: flex; align-items: center; gap: var(--size-2); margin-block-start: var(--size-3); flex-wrap: wrap; }
.flow-rail__qty label strong { color: var(--color-blue); }
.flow-rail__qty-price { font-size: 0.875rem; color: var(--color-slate); }
.flow-rail__qty-apply {
    padding: 6px 12px; border: 1px solid var(--color-blue); background: #fff;
    font: inherit; font-size: 0.875rem; color: var(--color-blue); cursor: pointer;
}
.flow-rail__total { margin: 0 0 var(--size-2); font-weight: 700; font-size: 1.5rem; color: var(--color-blue); }
.flow-rail__note { margin: 0; font-size: 0.875rem; color: var(--color-slate); }
.flow-rail__note a { color: var(--color-link); font-weight: 600; }

/* ETP's own summary + back link retire — the rail owns both. */
main.flow-main--ar .tribe-tickets__mini-cart { display: none !important; }
main.flow-main--ar .tribe-tickets__registration-grid { display: block; padding-block-start: 0; }

/* Attendee sections run FLAT (artboard: fields on the ground, no boxes) —
   the pass-1 card + ETP's fieldset outline both retire. */
main.flow-main--ar .tribe-tickets__attendee-tickets-container {
    border: 0; padding: 0; box-shadow: none; margin-block-end: var(--size-4);
}
main.flow-main--ar .tribe-tickets__attendee-tickets-container > h3 {
    border-block-end: 0; padding-block-end: 0; margin: 0 0 var(--size-2);
    font-weight: 700; font-size: var(--text-body); color: var(--color-slate);
}
main.flow-main--ar .tribe-tickets__form.tribe-tickets__attendee-tickets-item {
    border: 0 !important; padding: 0 !important; margin: 0 !important;
}
main.flow-main--ar .tribe-tickets__attendee-tickets-item-header h4,
main.flow-main--ar .tribe-tickets__attendee-tickets-item-header {
    margin: 0 0 var(--size-3);
    font-weight: 500; font-size: 1.5rem; color: var(--color-blue); /* "Registrant 1" role */
}
main.flow-main--ar .tribe-tickets__form-field-input-wrapper input,
main.flow-main--ar .tribe-tickets__attendee-tickets-item input { max-inline-size: 530px; }

/* Pager: status + square tiles (the expander-tile language, 32px). */
[data-flow-hidden] { display: none !important; }
.flow-pager {
    display: flex; align-items: center; justify-content: space-between; gap: var(--size-3);
    margin-block-end: var(--size-3);
    max-inline-size: 530px;
}
.flow-pager__status { margin: 0; font-weight: 500; font-size: var(--text-body-lg); color: var(--color-blue); }
.flow-pager__buttons { display: flex; gap: 8px; }
.flow-pager__btn {
    inline-size: 32px; block-size: 32px; display: grid; place-items: center;
    background: var(--color-blue); color: #fff; border: 0;
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: background-color 0.1s ease-out;
}
.flow-pager__btn:hover:not(:disabled), .flow-pager__btn:focus-visible { background: var(--color-orange); }
.flow-pager__btn:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.flow-pager__btn:disabled { background: #b7bec9; cursor: default; }

/* ---- Flow bar: the artboard footer (jog rule + buttons in its pocket) ---- */
.flow-bar { margin-block-start: var(--size-6); }
.flow-bar .flow-bar__rule { --jog-rise: 38px; }
.flow-bar__actions {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--size-3);
    padding-block: 14px var(--size-5);
}
/* Back variant: arrow box leads, arrow points left (design's Back). */
.btn-notch--back .btn-notch__icon .tg-arrow { rotate: 180deg; }
body.flow-page a.btn-notch { text-decoration: none; }

/* ---- Checkout: artboard dressing ---------------------------------------- */
/* Step headings: Title Case + tighter stack (design's "Billing Information"). */
body.flow-page .wc-block-components-title,
body.flow-page .wc-block-components-checkout-step__title { text-transform: capitalize; }
main.flow-main--checkout .wc-block-components-checkout-step { padding-block: var(--size-3) var(--size-4); }
main.flow-main--checkout .wc-block-checkout__add-note { margin-block: var(--size-3); }
/* Radio dots: native control + accent — Woo's hand-drawn dot pseudo floats
   free once the input goes static (the way-off-right dot, John 08-05). */
body.flow-page .wc-block-components-radio-control__input {
    appearance: auto !important; -webkit-appearance: radio !important;
    inline-size: 20px; block-size: 20px; accent-color: var(--color-blue);
}
body.flow-page .wc-block-components-radio-control__input::before,
body.flow-page .wc-block-components-radio-control__input::after { content: none !important; }
/* Sidebar summary: flat rail + divider, not a floating card. */
main.flow-main--checkout .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
    background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
}
main.flow-main--checkout .wc-block-components-sidebar-layout { position: relative; }
@media (min-width: 60em) {
    main.flow-main--checkout .wc-block-components-sidebar-layout::before {
        content: ""; position: absolute; inset-block: var(--size-3) var(--size-5); inline-size: 2px;
        /* +8 (was +28) with the main column padded to 48: fields→rule 40,
           rule→summary 40 — the old pairing left fields 19px off the rule
           (John 08-05 eve: "feels very close"). */
        inset-inline-end: calc(35% + 8px);
        background: rgb(7 37 97 / 0.5);
    }
    main.flow-main--checkout .wc-block-components-main { padding-inline-end: 48px; }
    main.flow-main--checkout .wc-block-components-sidebar { padding-inline-start: var(--size-5); }
}
/* Place Order = the artboards' ORANGE submit: orange outline + label,
   orange arrow box, content-hug, right-aligned. */
/* Place Order = the artboards' ORANGE submit, expressed as FAMILY TOKENS
   (08-10, John's "we don't have this issue elsewhere" rebuild): flow.js
   notchifies the React button (real classes + the real shaft/head SVG), so
   the ACTUAL btn-notch construction runs — fill wipe, transform motion,
   navy hover arrow, all proven machinery. The recreation pseudos are
   :not(.btn-notch)-scoped above as the no-JS fallback. */
main.flow-main--checkout .wc-block-components-checkout-place-order-button {
    inline-size: auto; min-inline-size: 0; margin-inline-start: auto;
    justify-content: flex-start;
    --bn-line: var(--color-orange); --bn-fill: var(--color-orange); --bn-arrow: #fff;
    border-color: var(--color-orange); color: var(--color-orange);
}
/* Hover arrow = NAVY (John 08-05 eve): the generic family hover swaps the
   glyph to orange, which vanishes on this button's orange tail. Navy on
   orange also out-contrasts white (4.2:1 vs ~3.3, WCAG 1.4.11). Must sit
   AFTER the generic hover-arrow rule — same specificity, order decides. */
main.flow-main--checkout .wc-block-components-checkout-place-order-button:hover::after,
main.flow-main--checkout .wc-block-components-checkout-place-order-button:focus-visible::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.3809 22.3809' fill='%23072561'%3E%3Cpath d='M0 9.79163H17.0304V12.5892H0Z'/%3E%3Cpath d='M17.0304 9.79163L9.19714 1.95831L11.1904 0L22.3809 11.1904L11.1904 22.3809L9.19714 20.4225L17.0304 12.5892Z'/%3E%3C/svg%3E");
}
main.flow-main--checkout .wc-block-checkout__actions_row { justify-content: flex-end; }
/* Blocks' terms row draws its own top separator — the surviving half of the
   "double rule after Add a note" (John 08-05 eve; the other half was the
   section border, retired above). Air only. */
main.flow-main--checkout .wc-block-checkout__terms--with-separator { border-block-start: 0; }

/* Selects sitewide on flow surfaces: the XD dropdown — navy box, NO radius,
   thick ORANGE caret, vertically centered, honest padding. */
body.flow-page select,
body.flow-page .wc-blocks-components-select__select {
    appearance: none; -webkit-appearance: none;
    min-block-size: 48px; padding: 10px 52px 10px 14px; /* 52 right: text clears the caret (John 08-05 eve) */
    border: 1px solid var(--color-blue); border-radius: 0; background-color: #fff;
    font: inherit; font-size: var(--text-body); color: var(--color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1.5 1.5L8 8L14.5 1.5' stroke='%23ce6300' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 10px;
}
/* Blocks ALSO renders its own inline chevron <svg> in the select wrapper —
   with our background caret that drew a DOUBLE caret (John 08-05 eve). */
body.flow-page .wc-blocks-components-select__expand { display: none; }
body.flow-page select:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 1px; }
.flow-rail__qty select { min-block-size: 40px; padding: 6px 40px 6px 12px; }

/* Promo-code panel (Blocks "coupons"): the Apply button ballooned to 76px
   against the 48px field beside it (John 08-05 eve: "huge, out of shape").
   Pin it to the family height, foot-aligned with its input. Labeling
   ("coupon" → "promo code") = the i18n filter in flow.js. body.flow-page
   scope, NOT checkout-only: the same panel renders in the CART totals box
   (John's hard-refresh caught the checkout-scoped first cut missing it). */
body.flow-page .wc-block-components-totals-coupon__button {
    block-size: 48px; min-block-size: 48px; margin: 0; flex: none;
}
body.flow-page .wc-block-components-totals-coupon__form { align-items: flex-end; gap: 12px; }

/* Gateway inner fields: zero rounding, navy borders (design). */
body.flow-page .wc-block-components-radio-control-accordion-content input,
body.flow-page .wc-block-components-radio-control-accordion-content iframe + input {
    border-radius: 0 !important; border-color: var(--color-blue) !important;
}

/* ---- Received: outlined cards + air ------------------------------------- */
main.flow-main--received .woocommerce-thankyou-order-details,
main.flow-main--received .woocommerce-table--order-details,
main.flow-main--received .woocommerce-customer-details address,
main.flow-main--received .tec-tickets__attendees-list-wrapper {
    box-shadow: none; border: 1px solid var(--color-blue);
}
main.flow-main--received .woocommerce-customer-details address { padding: var(--size-5); }

/* ETP lays .registration-event out as [summary | tickets] columns — the
   summary (date + event title) duplicates the rail, and the column split
   is what crushed the fields to 237px. Flat + full width; rail owns info. */
main.flow-main--ar .tribe-tickets__registration-event { display: block; }
main.flow-main--ar .tribe-tickets__registration-summary { display: none; }
main.flow-main--ar .tribe-tickets__attendee-tickets { inline-size: 100%; max-inline-size: none; }
main.flow-main--ar .tribe-tickets__form-field,
main.flow-main--ar .tribe-tickets__form-field-input-wrapper { inline-size: 100% !important; max-inline-size: 530px; }
/* ETP's inline error slots idle as visible slivers (the stray dot) — hidden
   until ETP activates them; the active state speaks the validation voice. */
main.flow-main--ar .tribe-tickets__attendee-tickets-error { display: none; }
main.flow-main--ar .tribe-tickets__attendee-tickets-error.tribe-common-a11y-visual-show,
main.flow-main--ar .tribe-tickets__attendee-tickets-error[style*="block"] {
    display: block; margin: 0 0 var(--size-3); padding: 6px 10px;
    background: #fdecea; border-inline-start: 3px solid #b3261e; color: #7a1a14;
    font-size: 0.875rem;
}

/* ETP's own .registration-grid re-columns the CONTENT wrapper (261/360) —
   the rail/form split is OURS now; the inner wrapper must flow. */
body.flow-page main.flow-main--ar .tribe-tickets__registration-grid {
    display: block !important; grid-template-columns: none !important; padding: 0;
}

/* Flow ribbons: the barred info voice (in-progress cart notice on event
   singles, the cart's edit-attendees pointer). */
.flow-ribbon {
    margin: 0 0 var(--size-4); padding: 12px 16px;
    background: var(--color-gray-band);
    border-inline-start: 3px solid var(--color-orange);
    font-size: 0.875rem; color: var(--color-slate);
}
.flow-ribbon a { color: var(--color-link); font-weight: 600; }
/* The in-sentence family arrow (replaces the em dash, John 08-05 eve): text-
   scaled, orange, seated on the baseline band. Unlayered here beats the
   24px components primitive. */
.flow-ribbon .tg-arrow { inline-size: 14px; block-size: 14px; color: var(--color-orange); vertical-align: -2px; margin-inline: 2px; }
.flow-ribbon--cart { margin-block-start: var(--size-4); }

/* Blocks pins the place-order button full-width — the design's submit
   content-hugs, right-aligned. */
main.flow-main--checkout .wc-block-components-checkout-place-order-button {
    inline-size: auto !important; min-inline-size: 0 !important; flex: 0 0 auto !important;
    padding-inline-end: 65px !important;
}

/* Order summary rows carry name + price; the course marketing blurb stays
   on the course page. */
body.flow-page .wc-block-components-product-metadata { display: none; }

/* ---- Notice voice v2 (John: stock notices are unreadable/unbranded) ------
   One family: white plate, navy hairline, ORANGE lead bar, 16px readable
   text with a bold lead-in. Errors swap the BAR to the validation red and
   stay on the white plate (08-05 eve — the old pink error plate read
   "default"; the red tint lives on the broken fields instead).
   ET's own barred cart notice retires on event singles — the ribbon owns
   that message with human copy (and the stepper now prefills, so the old
   "numbers include your cart" hedge is moot). */
body.single-tribe_events .tribe-tickets__notice--barred { display: none; }
.flow-ribbon,
body.flow-page .tribe-tickets__notice--error,
body.flow-page .tribe-tickets__validation-notice,
body.flow-page .wc-block-components-notice-banner.is-error,
main.flow-main--ar .tribe-tickets__attendee-tickets-error[style*="block"] {
    margin: 0 0 var(--size-4); padding: 14px 20px;
    background: #fff; border: 1px solid var(--color-blue);
    border-inline-start: 4px solid var(--color-orange);
    font-size: var(--text-body); line-height: calc(24 / 16); color: var(--color-slate);
}
.flow-ribbon strong { color: var(--color-blue); }
/* Error variant: WHITE plate + red bar + slate text (08-05 eve — the pink
   plate/dark-red text pairing read "default and missed", John; the red
   tint now lives on the broken FIELDS, where it points at the work). */
body.flow-page .tribe-tickets__notice--error,
body.flow-page .tribe-tickets__validation-notice,
body.flow-page .wc-block-components-notice-banner.is-error,
main.flow-main--ar .tribe-tickets__attendee-tickets-error[style*="block"] {
    border-color: var(--color-blue); border-inline-start-color: #b3261e;
    background: #fff; color: var(--color-slate); font-weight: 500;
}
/* ET absolutely-positions a 16px icon ::before exactly under our 20px text
   inset — it sat ON the first word (John's "icon collides"). The voice
   carries no icons; the red bar is the icon. */
body.flow-page .tribe-tickets__notice--error::before,
body.flow-page .tribe-tickets__validation-notice::before { display: none; }
/* ET's .tribe-common-b2 re-colors the inner text node out of the voice. */
body.flow-page .tribe-tickets__notice--error .tribe-tickets-notice__content {
    color: inherit; font-weight: inherit; font-size: var(--text-body); line-height: calc(24 / 16);
}
body.flow-page .tribe-tickets__notice--error__count { font-weight: 700; color: #b3261e; }
/* Land the takeover scroll with the notice clear of the sticky header. */
body.flow-page .tribe-tickets__validation-notice { scroll-margin-block-start: 96px; }
/* Broken fields carry the loud state: 2px validation red + the pale tint
   (moved here from the notice plate). ET's own --error paints 1px #da394d
   — barely apart from the 1px navy field language (John: "there but not
   obvious"). ET ships the enemy-pattern-#1 ladder (`input[type=text]
   .--error:invalid` = 0,5,1), so the contested props are armored: one
   error skin, every state. Focus ring is outline — unaffected. */
body.flow-page .event-tickets .tribe-tickets__form input.tribe-tickets__form-field-input--error {
    border: 2px solid #b3261e !important; background: #fdf3f2 !important;
}
/* The flow-bar echo: instant feedback at the button that was pressed (the
   notice lives a viewport away). flow.js inserts/updates it. BELOW the
   button row, right-aligned under Save & Checkout (John 08-05 eve —
   between the buttons it crowded them). */
.flow-bar__actions { flex-wrap: wrap; }
.flow-bar__error { margin: 0; flex-basis: 100%; order: 10; text-align: end; font-weight: 600; font-size: 0.9375rem; color: #b3261e; }

/* No-tickets close (courses without a ticket product): the outlined card
   holding a purposeful handoff instead of a dangling Register heading. */
.event-single__no-tickets { padding: clamp(var(--size-4), 3vw, 40px); }
.event-single__no-tickets p { margin: 0 0 var(--size-3); max-inline-size: 46rem; }
.event-single__no-tickets-lead { color: var(--color-blue); font-size: var(--text-body-lg); }

/* ---- Pager v2 (John 08-05): crumb-language controls ---------------------- */
.flow-pager__status {
    margin: 0 0 var(--size-3);
    font-weight: 500; font-size: var(--text-body-lg); color: var(--color-blue);
    max-inline-size: 530px;
}
.flow-pager {
    display: flex; align-items: center; justify-content: center; gap: var(--size-6);
    margin-block: var(--size-4) 0;
    max-inline-size: 530px;
}
.flow-pager__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 2px; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 600; font-size: var(--text-body);
    color: var(--color-orange); /* the crumb voice, orange on purpose (John) */
}
/* ALL-CAPS labels (John 08-10) + the caps optical seat: flex centers the LINE
   BOX (which reserves descender space), but caps ink is baseline→cap-height
   only — the empty descender zone reads as the text riding high beside the
   arrow. Nudge = measured against the arrow center, not theorized. */
.flow-pager__btn > span:not(.tg-arrow) { text-transform: uppercase; transform: translateY(1.5px); } /* RENDERED-INK measured (pixel-scan of the live button — both metric models failed; the v1 rule's line-height:1 voids the asc/desc math): caps ink sat 2.5px above the arrow's ink center — +1 from the -1.5 state seats ink-on-ink. John's eye called it: no descenders → text rides high → comes DOWN. */
.flow-pager__btn .tg-arrow { inline-size: 24px; block-size: 24px; color: inherit; }
.flow-pager__btn .tg-arrow--back { rotate: 180deg; }
.flow-pager__btn:hover:not(:disabled) .tg-arrow__shaft,
.flow-pager__btn:focus-visible .tg-arrow__shaft { transform: scaleX(1.371); }
.flow-pager__btn:hover:not(:disabled) .tg-arrow__head,
.flow-pager__btn:focus-visible .tg-arrow__head { transform: translateX(3.16px); }
.flow-pager__btn:hover:not(:disabled), .flow-pager__btn:focus-visible { text-decoration: underline; }
.flow-pager__btn:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.flow-pager__btn:disabled { color: #b7bec9; cursor: default; }

/* Card motion: the "realtime app" read — new attendee slides in. */
@keyframes flow-card-in {
    from { opacity: 0; translate: 24px 0; }
    to   { opacity: 1; translate: 0 0; }
}
.flow-card-in { animation: flow-card-in 0.25s ease-out; }
@media (prefers-reduced-motion: reduce) { .flow-card-in { animation: none; } }

/* The stray hairline over the form column retires (ET prints it on the
   registration content's head — the rail owns the framing now). */
main.flow-main--ar .tribe-tickets__registration-content > *:first-child,
main.flow-main--ar .tribe-tickets__registration-event,
main.flow-main--ar .tribe-tickets__attendee-tickets-form,
main.flow-main--ar .tribe-tickets__attendee-tickets {
    border-block-start: 0 !important; box-shadow: none;
}
main.flow-main--ar .flow-form > .tribe-tickets__registration { border: 0; }
main.flow-main--ar .flow-form hr { display: none; }

/* Flow bar: the pocket widens so BOTH buttons ride the raised segment with
   air (Back 207 + Save 199 + gap ≈ 430; the stock −306 pocket clipped the
   Back button out of it — John 08-05). */
.flow-bar .flow-bar__rule { --jog-x: max(45px, calc(50vw + min(var(--container), 100vw - 2 * var(--gutter)) / 2 - 470px)); }
.flow-bar__actions { padding-block: 18px var(--size-6); }

/* Rail hairlines reach out and JOIN the vertical divider (Jordan's
   construction) — desktop only; below 60em there is no divider to meet. */
@media (min-width: 60em) {
    .flow-rail__course + .flow-rail__course,
    .flow-rail__totals {
        margin-inline-end: -27px; padding-inline-end: 27px; /* 330 rail + 27 = the divider's x */
    }
}

/* Active course (multi-course carts): the rail block whose attendee is on
   screen carries the working state — orange bar + a quiet badge.
   OCCUPANCY REWORK (John 08-06, cart/AR review): the highlight BREAKS 18px
   into the LEFT margin (negative margin + equal padding — content stays on
   the rail line, the rules keep their left edge; the old bare 14px padding
   also INDENTED the active content, gone now) and OCCUPIES the full block
   rule-to-rule: its own border-rule sits directly on its padding above, and
   the next sibling's 24px gap moves INSIDE the highlight as padding-block-end
   (sibling margin zeroed) so no white sliver remains before the lower rule. */
.flow-rail__course { position: relative; transition: background-color 0.15s ease-out; }
.flow-rail__course--active {
    background: #f4f6fa;
    margin-inline-start: -18px;
    padding-inline-start: 18px;
    padding-block-end: var(--size-4);
}
/* First-course-active: the fill started flush at the content (the row has no
   separator, so no padding-block-start) and sat right on the border above —
   top air ONLY while selected; the class leaves with the selection and the
   row returns to its bare state (John 08-10). */
.flow-rail__course--active:first-child { padding-block-start: var(--size-4); }
/* The indicator — DETACHED from the highlight edge and thicker (John 08-10:
   "move the orange line out a little bit and make the line thicker"): a 5px
   bar floating 8 left of the fill, full block height. (Was an inset 3px
   box-shadow ON the edge.) */
.flow-rail__course--active::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: -8px;
    inline-size: 5px; background: var(--color-orange);
}
/* The separator ABOVE an active row holds the RAIL line: the active box grows
   18 into the margin and its own border grew with it — the top line ran long
   and couched the bar while the line below (on the un-extended sibling) did
   not (John 08-10: "this shouldn't happen"). Border goes transparent for
   layout; the pseudo repaints it at the rail x. */
.flow-rail__course + .flow-rail__course--active { border-block-start-color: transparent; }
.flow-rail__course + .flow-rail__course--active::before {
    content: ""; position: absolute; inset-block-start: -2px; inset-inline: 18px 0;
    block-size: 2px; background: rgb(7 37 97 / 0.5);
}
.flow-rail__course--active + .flow-rail__course,
.flow-rail__course--active + .flow-rail__totals { margin-block-start: 0; }
/* ≥60em the highlight also reaches the vertical divider on the right — the
   hairline join rule below only covers `+` siblings; the active block gets
   it regardless of position. */
@media (min-width: 60em) {
    .flow-rail__course--active { margin-inline-end: -27px; padding-inline-end: 27px; }
}
.flow-rail__course--active .flow-rail__heading::after {
    content: "Entering attendees";
    display: inline-block; margin-inline-start: 10px; padding: 3px 8px;
    background: var(--color-orange); color: #fff;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .flow-rail__course { transition: none; } }

/* Cart ribbon course list. */
.flow-ribbon__list { list-style: none; margin: 8px 0 0; padding: 0; }
.flow-ribbon__list li { padding-block: 3px; }
.flow-ribbon__list a { color: var(--color-link); font-weight: 600; }

/* Pager v2 buttons must fully shed the v1 tile geometry (32px squares,
   navy ground) — the crumb-language buttons size to their content. */
.flow-pager .flow-pager__btn {
    inline-size: auto; block-size: auto; min-inline-size: 0;
    display: inline-flex; background: none; place-items: unset;
}
.flow-pager .flow-pager__btn:disabled { background: none; }
.flow-pager .flow-pager__btn:hover:not(:disabled), .flow-pager .flow-pager__btn:focus-visible { background: none; }

/* ETP dresses each attendee item with 4px gray ::before/::after squares —
   the "stray dot" that survived three probes (John's walks, both passes). */
main.flow-main--ar .tribe-tickets__attendee-tickets-item::before,
main.flow-main--ar .tribe-tickets__attendee-tickets-item::after { content: none !important; }

/* The faint rule above "Attendee N of M" (John, twice): ET's top border on
   .registration-grid ITSELF — the one wrapper the earlier border sweep
   missed. */
body.flow-page main.flow-main--ar .tribe-tickets__registration-grid { border: 0 !important; }