/* ==========================================================================
   Forge 2026 — page-specific styles
   Layered on /styles.css (which provides design tokens + base patterns).

   Modeled on the Nathan EH-2026-06 workshop page rhythm — same shared
   shell (header, footer, .section, .section-tint, .container), same design
   tokens (Playfair Display, Source Sans 3, IBM Plex Mono, indigo brand).
   Tighter section padding than the marketing-page default because the
   page packs 10 sections of content.
   ========================================================================== */

/* Section + hero spacing override — same pattern as workshop.css. The
   default marketing-page rhythm produces oversized gaps when sections
   stack 10-deep. */
.forge-page .section,
body.forge-page .section {
    padding: var(--space-lg) 0;
}
.forge-page .hero,
body.forge-page .hero {
    padding: var(--space-xl) 0 var(--space-lg);
}

@media (min-width: 768px) {
    .forge-page .section,
    body.forge-page .section {
        padding: var(--space-xl) 0;
    }
    .forge-page .hero,
    body.forge-page .hero {
        padding: var(--space-2xl) 0 var(--space-xl);
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.forge-hero {
    text-align: center;
}

.forge-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-brand-indigo);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.forge-hero h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.forge-date-band {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-foreground);
    margin-bottom: var(--space-xs);
}

.forge-venue-line {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--color-muted-foreground);
    margin-bottom: var(--space-lg);
    letter-spacing: 0.02em;
}

.forge-hero .hero-subhead {
    font-style: italic;
    margin-bottom: var(--space-xl);
}

.forge-hero-cta {
    margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   Section content patterns
   -------------------------------------------------------------------------- */
.forge-prose {
    max-width: var(--max-width-text);
    margin: 0 auto;
}

.forge-prose p + p {
    margin-top: 0.75em;
}

.forge-section-intro {
    max-width: var(--max-width-text);
    margin: 0 auto var(--space-xl);
    text-align: center;
    color: var(--color-muted-foreground);
    font-size: 1.05rem;
}

.forge-prose-note {
    color: var(--color-muted-foreground);
    margin-bottom: var(--space-md);
}

.forge-prose-note.muted {
    color: var(--color-muted-foreground);
}

.forge-subhead {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    max-width: var(--max-width-text);
    margin: var(--space-xl) auto var(--space-md);
    color: var(--color-foreground);
}

.forge-subhead:first-of-type {
    margin-top: var(--space-md);
}

.forge-tier-heading {
    color: var(--color-brand-indigo);
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Tables — used for The Format week overview, attendee/business profile,
   venue details
   -------------------------------------------------------------------------- */
.forge-table-wrap {
    overflow-x: auto;
    margin: var(--space-md) 0 var(--space-xl);
    max-width: var(--max-width-text);
    margin-left: auto;
    margin-right: auto;
}

.forge-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 0.95rem;
}

.forge-table th,
.forge-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.forge-table thead th {
    background: rgba(74, 78, 140, 0.06);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-indigo);
}

.forge-table tbody tr:last-child td {
    border-bottom: none;
}

.forge-table tbody tr:hover {
    background: rgba(74, 78, 140, 0.02);
}

/* --------------------------------------------------------------------------
   Program section — workshops + breakouts as card grid
   -------------------------------------------------------------------------- */
.forge-program-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: var(--space-md) 0 var(--space-xl);
}

@media (min-width: 768px) {
    .forge-program-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .forge-program-grid-breakouts {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .forge-program-grid-breakouts {
        grid-template-columns: repeat(4, 1fr);
    }
}

.forge-program-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 160px;
}

.forge-program-card-placeholder {
    background: transparent;
    border-style: dashed;
}

.forge-program-marker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-brand-indigo);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forge-program-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.4;
}

.forge-program-title.forge-placeholder {
    color: var(--color-muted-foreground);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Sponsor name in Program cards — plain-text rendering between marker and
   title. Replaces the v1 wordmark color-blocks (removed per story
   nx-8c76f9964a63 — interim "no logo treatments" posture pending real logo
   files + scaling rules). When logo SVGs arrive, restore image rendering
   by re-introducing an <img> element + size constraints in place of (or
   above) this `.forge-program-sponsor` line.
   -------------------------------------------------------------------------- */
.forge-program-sponsor {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Program — Evenings (Welcome Reception, Awards Dinner)
   -------------------------------------------------------------------------- */
.forge-evenings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-md);
    max-width: var(--max-width-text);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .forge-evenings {
        grid-template-columns: 1fr 1fr;
    }
}

.forge-evening {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.forge-evening h4 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.forge-evening .muted {
    color: var(--color-muted-foreground);
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Sponsors section — tier-grouped logo wall
   -------------------------------------------------------------------------- */
.forge-sponsor-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    max-width: var(--max-width-text);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .forge-sponsor-row {
        grid-template-columns: 1fr 1fr;
    }
}

.forge-sponsor-row-premier {
    /* Premier row: bigger cards, more visual weight */
    gap: var(--space-xl);
}

.forge-sponsor-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
}

.forge-sponsor-card-premier {
    padding: var(--space-xl);
    border-width: 2px;
    border-color: var(--color-brand-indigo);
}

.forge-sponsor-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.forge-sponsor-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.forge-tier-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background: rgba(74, 78, 140, 0.1);
    color: var(--color-brand-indigo);
}

.forge-tier-badge-premier {
    background: var(--color-brand-indigo);
    color: #ffffff;
}

.forge-sponsor-tagline {
    font-size: 0.95rem;
    color: var(--color-muted-foreground);
    line-height: 1.5;
    max-width: 28rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Venue — hotel block placeholder
   -------------------------------------------------------------------------- */
.forge-hotel-block {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-brand-indigo);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: var(--space-xl) auto 0;
    max-width: var(--max-width-text);
}

.forge-hotel-block h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-brand-indigo);
}

.forge-hotel-block p {
    margin: 0;
    color: var(--color-foreground);
}

/* Live booking CTA inside the Venue hotel block (story nx-3a8d001b3cf6).
   Sits below the address line; href injected from constants.js
   HOTEL_BOOKING_URL by render.js::wireVenueHotelLink. */
.forge-hotel-block-btn {
    display: inline-block;
    margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   CEO message
   -------------------------------------------------------------------------- */
.forge-ceo-message {
    max-width: var(--max-width-text);
    margin: 0 auto;
}

.forge-ceo-attribution {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.forge-ceo-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.forge-ceo-attribution .muted {
    color: var(--color-muted-foreground);
    font-size: 0.95rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Register — reg form (story nx-30ac57f10912).

   Form styles are decoupled from workshop.css (Nathan's pattern) so the Forge
   page owns its own form-style surface. When AnnMarie's content reframe lands
   on the survey block (§3.11 #3 + Maren cadence nx-98d1c57d3a4d), no CSS
   change is required — the labels change, the structure stays.

   .forge-form              — top-level wrapper (mirrors .workshop-form spec)
   .forge-radio-group       — attendee_type radio (and the survey workshop-
                              interest radio block)
   .forge-radio             — individual radio label wrapper (boxed style)
   .forge-checkbox          — individual checkbox label wrapper
   .forge-tcs               — consent / acknowledgment fieldset
   .forge-tcs-box           — scrollable consent text container
   .forge-conditional       — member-only blocks (visibility driven by JS
                              [hidden] attribute; CSS class is a hook for
                              future overrides without restamping the JS)
   .forge-survey-block      — Forge member survey block (ratified 6-question
                              content per story nx-ca8f11525a6a)
   .forge-survey-question   — individual question wrapper inside survey block
   .forge-turnstile         — Turnstile widget mount
   .forge-form-error        — inline error message (role=alert)
   .forge-submit            — primary submit button
   .forge-cohort-closed     — registrations-closed state container
   .forge-success           — inline confirmation state container
   .forge-form-intro        — top-of-form intro copy
   -------------------------------------------------------------------------- */

.forge-form {
    max-width: var(--max-width-text);
    margin: var(--space-md) auto 0;
}

.forge-form-intro {
    color: var(--color-muted-foreground);
    margin-bottom: var(--space-lg);
}

.form-group-full {
    grid-column: 1 / -1;
}

/* Conditional blocks driven by attendee_type. JS toggles [hidden]; the class
   exists so future-Wren can add transitions/animations without changing JS. */
.forge-conditional[hidden] {
    display: none !important;
}

/* --- +1 (Social Pass) block — cap doc §3.13, story nx-9ea5b8f86e74 ---
   Wraps the checkbox + the conditionally-revealed name/dietary fields.
   The checkbox uses .forge-checkbox boxed styling; when checked, the
   .forge-plus-one-fields reveal renders below with form-row spacing so
   the two new inputs sit cleanly inside the fieldset. */
.forge-plus-one-fields {
    margin-top: var(--space-sm);
}

/* Prominent pre-registration price callout (story nx-a0b9fb5a6b75, AC1 / cap
   doc §3.13). Replaces the prior muted .forge-field-helper so the $350 Social
   Pass price is unmistakable BEFORE submit — Brock go-live finding (note 19452):
   price was previously read clearly only at confirmation. Mirrors the
   .forge-hotel-block indigo-left-accent card treatment for strong-but-calm
   prominence; the price leads in display voice. Display-only — no gating. */
.forge-plus-one-price {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-brand-indigo);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-sm);
}

.forge-plus-one-price-lead {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-brand-indigo);
    margin: 0 0 var(--space-xs);
}

.forge-plus-one-price-detail {
    margin: 0;
    color: var(--color-foreground);
    font-size: 0.95rem;
}

/* +1 confirmation paragraph (cap doc §3.13 + AC5). Subtle visual lift
   from the surrounding success copy so the additional logistics are
   recognizable as the +1 follow-up note. */
.forge-plus-one-confirmation {
    padding: var(--space-md);
    background: var(--color-card-hover, rgba(0, 0, 0, 0.03));
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm, 6px);
}

/* Fieldset reset for radio + checkbox + tcs groups */
.forge-form fieldset.form-group {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-md);
}

.forge-form fieldset.form-group legend {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-foreground);
    padding: 0;
}

/* --- Radios + checkboxes (boxed label style, accessibility-friendly) --- */
.forge-form .forge-radio,
.forge-form .forge-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
    cursor: pointer;
    background: var(--color-card);
    transition: border-color 0.15s, background 0.15s;
    /* Override .form-group label (styles.css) — sentence-length labels render
       in body voice, not the small-caps mono used for short field labels per
       Forge Landing Page cap doc §3.12 #7-8 (story nx-9ba3f5463195). */
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-foreground);
}

.forge-form .forge-radio:hover,
.forge-form .forge-checkbox:hover {
    border-color: var(--color-primary);
    background: var(--color-card-hover, var(--color-card));
}

.forge-form .forge-radio input[type="radio"],
.forge-form .forge-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.forge-form .forge-radio span,
.forge-form .forge-checkbox span {
    flex: 1;
    line-height: 1.4;
}

.forge-form .forge-radio .muted,
.forge-form .forge-checkbox .muted {
    color: var(--color-muted-foreground);
    font-weight: 400;
}

/* --- Consent / TCS scrollable boxes --- */
.forge-tcs-box {
    max-height: 14em;
    overflow-y: auto;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    margin-bottom: var(--space-sm);
    line-height: 1.55;
}

.forge-tcs-box p {
    margin-bottom: var(--space-sm);
}

.forge-tcs-box p:last-child {
    margin-bottom: 0;
}

/* --- Survey block --- */
.forge-survey-block {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.forge-survey-intro {
    margin-bottom: var(--space-md);
    font-size: 0.95rem;
}

.forge-survey-intro p {
    margin: 0 0 var(--space-sm) 0;
}

.forge-survey-intro p:last-child {
    margin-bottom: 0;
}

.forge-survey-question {
    margin-bottom: var(--space-lg);
}

.forge-survey-question:last-child {
    margin-bottom: 0;
}

/* All sentence-length labels inside the survey block (question headers,
   optional follow-up prompts, Other text reveal label) render in body
   voice per §3.12 #8 — overrides .form-group label uppercase-mono default
   from styles.css. Story nx-ca8f11525a6a. */
.forge-survey-block label:not(.forge-radio):not(.forge-checkbox) {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-foreground);
}

.forge-survey-question > label,
.forge-survey-question-label {
    /* Survey question labels are full sentences — render in body voice per
       Forge Landing Page cap doc §3.12 #8 (sentence-length labels in
       sentence case, not the small-caps mono uppercase from .form-group label
       in styles.css). Story nx-ca8f11525a6a. */
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.forge-survey-question-hint {
    margin: calc(-1 * var(--space-xs)) 0 var(--space-sm) 0;
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}

.forge-survey-question textarea,
.forge-survey-question select,
.forge-survey-question input[type="text"] {
    width: 100%;
}

/* "Optional: What makes that format valuable for you?" follow-up label
   under Q2 radios sits inside the same question wrapper — bump top margin
   so it doesn't collide with the last radio option. */
.forge-survey-question .forge-radio + label,
.forge-survey-question .forge-checkbox + label {
    margin-top: var(--space-sm);
}

/* Q1 "Other" free-text reveal wrapper — sits inside the question stack. */
#survey-q1-other-text-wrap {
    margin-top: var(--space-sm);
}

#survey-q1-other-text-wrap label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

/* Disabled checkbox styling (Q1 max-3 cap reached) — keep visible but
   muted so the cap is discoverable. */
.forge-form .forge-checkbox input[type="checkbox"]:disabled ~ span {
    opacity: 0.55;
}

.forge-form .forge-checkbox:has(input[type="checkbox"]:disabled) {
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- Turnstile mount --- */
.forge-turnstile {
    margin: var(--space-md) 0;
    min-height: 0;
}

.forge-turnstile:not(:empty) {
    min-height: 65px;
}

/* --- Inline error message --- */
.forge-form-error {
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--color-foreground);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
    line-height: 1.5;
}

/* --- Field-level error (used by reg-code rejections per story nx-b0a5f1c21bd9
       AC3 — surfaced inline below the offending field, field stays populated). --- */
.forge-field-error {
    color: rgb(180, 35, 50);
    font-size: 0.95rem;
    margin-top: var(--space-xs);
    line-height: 1.4;
}

/* --- Field helper text (used by reg-code helper copy per story nx-b0a5f1c21bd9
       AC1) — small italicized line between field and the next form-group. --- */
.forge-field-helper {
    font-size: 0.9rem;
    margin-top: var(--space-xs);
    margin-bottom: 0;
    line-height: 1.4;
}

/* --- Reg-code block (story nx-b0a5f1c21bd9 AC1/AC2): the reg-code input
       owns the sponsor-dropdown sibling beneath it so revealing the
       dropdown doesn't shift the rest of the form. --- */
.forge-reg-code-block {
    margin-bottom: var(--space-md);
}

.forge-sponsor-dropdown {
    margin-top: var(--space-md);
}

/* --- Submit button --- */
.forge-submit {
    width: 100%;
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-size: 1.05rem;
}

.forge-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Cohort-closed state --- */
.forge-cohort-closed {
    max-width: var(--max-width-text);
    margin: var(--space-md) auto;
    padding: var(--space-xl);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.forge-cohort-closed h3 {
    margin-bottom: var(--space-sm);
}

/* --- Success state --- */
.forge-success {
    max-width: var(--max-width-text);
    margin: var(--space-md) auto;
    padding: var(--space-xl);
    background: var(--color-card);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.forge-success h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.forge-success p {
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.forge-success p:last-child {
    margin-bottom: 0;
}

/* Hotel room-block booking CTA inside the registration success state
   (story nx-c5a84941da35). Mirrors the venue .forge-hotel-block indigo
   left-accent so the "book your room" prompt reads as the same program
   element; transparent background lets it stand out within the
   --color-card success panel via the accent border rather than a nested
   card. */
.forge-hotel-cta {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-brand-indigo);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.forge-hotel-cta h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-brand-indigo);
}

.forge-hotel-cta p {
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.forge-hotel-cta-btn {
    display: inline-block;
}

/* --- Mobile polish for the form --- */
@media (max-width: 639px) {
    .forge-form {
        margin-top: var(--space-sm);
    }
    .forge-form fieldset.form-group {
        margin-bottom: var(--space-sm);
    }
    .forge-tcs-box {
        max-height: 12em;
        padding: var(--space-sm);
    }
    .forge-survey-block {
        padding: var(--space-md);
    }
}

/* Smooth-scroll for the hero Register CTA (cap doc AC #7 — smooth-scroll
   preferred but instant jump acceptable). Honors prefers-reduced-motion via
   the global media query in /styles.css. */
html {
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   Mobile polish
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .forge-table th,
    .forge-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.85rem;
    }
}

/* --------------------------------------------------------------------------
   Invitation request (story nx-b0a5f1c21bd9 AC5)
   -------------------------------------------------------------------------- */
.forge-invitation-section {
    max-width: var(--max-width-text);
    margin: var(--space-xl) auto 0;
}

.forge-invitation-cta {
    padding: var(--space-xl);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.forge-invitation-cta h3 {
    margin-bottom: var(--space-sm);
}

.forge-invitation-cta p {
    margin-bottom: var(--space-md);
}

.forge-invitation-form {
    margin-top: var(--space-md);
}

.forge-invitation-toggle {
    min-width: 220px;
}

/* --------------------------------------------------------------------------
   S2 invitation-only two-path gate (story nx-a783fed6498a)
   -------------------------------------------------------------------------- */

/* Code-gate row — input + Continue button inline; stacks on narrow screens. */
.forge-code-gate-row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}

.forge-code-gate-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.forge-code-continue {
    flex: 0 0 auto;
    white-space: nowrap;
}

.forge-code-continue:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* [hidden] guard — .btn sets display:inline-block (author rule) which outranks
   the [hidden] UA rule, so the Continue button would stay visible after the
   code validates. Restore display:none explicitly. */
.forge-code-continue[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .forge-code-gate-row {
        flex-direction: column;
    }
}

/* "Code accepted" indicator — shown after a valid code reveals the fields. */
.forge-code-accepted {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: 0.95rem;
    color: var(--color-foreground);
}

/* [hidden] guard — an author display:flex outranks the [hidden] UA rule, so
   restore display:none explicitly (same trap the .forge-conditional pattern
   documents). Without this the indicator paints in the initial gate state. */
.forge-code-accepted[hidden] {
    display: none;
}

.forge-code-accepted-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--color-brand-indigo);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* Text-style buttons (no-code prompt, change-code, back-to-code). Render as a
   link without the <a href> semantics — they drive JS state transitions. */
.forge-link-btn {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-brand-indigo);
    text-decoration: underline;
    cursor: pointer;
}

.forge-link-btn:hover {
    opacity: 0.8;
}

.forge-no-code-prompt {
    margin-top: var(--space-md);
    margin-bottom: 0;
    font-size: 0.95rem;
    color: var(--color-muted-foreground);
}

/* Registration fields wrapper — revealed by JS [hidden] toggle after a valid
   code. The .forge-reg-fields class is a CSS hook paralleling .forge-conditional
   so an author display value can't override [hidden]'s display:none. */
.forge-reg-fields[hidden] {
    display: none;
}

/* Completing-framing sub-header (story nx-ebbe0775fe59) — shown only on the
   pre-filled redemption arrival. Sentence-case acknowledgment of the pre-filled
   state (Forge Landing Page §3.12 rule 8). Honors [hidden] via the wrapper hook
   pattern so applyRegistrationFraming()'s toggle can't be overridden by display. */
.forge-completing-subhead {
    margin-bottom: var(--space-lg);
    color: var(--color-muted-foreground);
    font-size: 1.05rem;
}
.forge-completing-subhead[hidden] {
    display: none;
}

/* Locked attribution-identity field (story nx-ebbe0775fe59) — the email
   pre-filled from an approved-request payload is read-only (it's the code's
   attribution identity). Muted, non-editable affordance so the lock reads as
   intentional rather than broken. */
.forge-reg-fields input.forge-locked {
    background: var(--color-muted, #f1f1f4);
    color: var(--color-muted-foreground);
    cursor: not-allowed;
}

/* Request-invitation intro (replaces the old always-visible CTA). */
.forge-invitation-intro {
    margin-bottom: var(--space-md);
}

.forge-invitation-intro h3 {
    margin-bottom: var(--space-sm);
}

.forge-invitation-intro p {
    margin-bottom: var(--space-sm);
    color: var(--color-muted-foreground);
}