/* Syndesi accounts (shared theme css/accounts.css; both sites since 24 Oct 2026).
   THE MASTER WIZARD draws the registration steps (php/wizard/wizard.php, css/globals.css section "WIZARD"): the
   card, rail, heading, fields, Back / Continue, the message box and the progress line are NOT styled here any more
   (24 Oct 2026; the old copy of WCBW's subscription.css, modal-era frame, #subscription-button-N rules and input
   colours were removed). What is left is only what the wizard does not do, on css/globals.css variables only (rule C2):
     1. the registration steps' own bits inside the card (password show/hide, the code field, the small lines)
     2. the email-code box on its own (Syndesi_Acc_Step_Code::box(): contact form, camp application)
     3. the members-only gate notice (guest: no box, the card is the frame; pending welcome card; denied)
     4. the help buttons (Chat with us / Contact us), the member chip, the old "Logged in as" line
     5. the popup kept for WCBW's old [subscription_modal] (site/modules/php/accountsCompat.php)
   Loaded only where the accounts form, a notice, the chip or the code box is shown (php/accounts/). */

/* ---- 1. the registration steps inside the wizard card (scoped to .syn-wiz: the WCBW profile page has its own
   password box with the same old class names) ---- */
.syn-wiz .password-input-wrapper { position: relative; }
.syn-wiz .password-input-wrapper input[type="password"],
.syn-wiz .password-input-wrapper input[type="text"] { padding-right: 46px !important; }
.syn-wiz .password-input-wrapper .toggle-password {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 36px; height: 36px; display: grid; place-items: center; padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 9999px; box-shadow: none; cursor: pointer;
    color: var(--color-primary); font-size: 18px; line-height: 1;
}
.syn-wiz .password-input-wrapper .toggle-password:hover,
.syn-wiz .password-input-wrapper .toggle-password:focus { background: var(--color-secondary-light); color: var(--color-primary-dark); }
.syn-wiz .password-input-wrapper .toggle-password[aria-pressed="true"] { color: var(--color-highlight); }
.syn-wiz .password-input-wrapper .toggle-password:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 1px; }

.syn-wiz input.confirmation-code-entry, .syndesi-code-box input.confirmation-code-entry { letter-spacing: .3em; font-weight: 700; text-align: center; }

.resend-new-code-link,
.generate-password,
.wcbw-sub-privacy a,
.syndesi-acc-login a { color: var(--color-link); text-decoration: underline; }
.resend-new-code-link:hover,
.generate-password:hover { color: var(--color-primary-dark); }
.resend-new-code-link.disabled { opacity: .5; pointer-events: none; }

.syn-wiz[data-flow="registration"] .syn-wiz-note { display: grid; gap: 4px; }
.syn-wiz[data-flow="registration"] .syn-wiz-note .syndesi-acc-login { font-size: calc(13.5px * var(--lang-font-scale)); color: var(--color-text-secondary); }

/* ---- 2. the email-code box on its own (contact form: under Send; camp application: inside a wizard panel) ---- */
.syndesi-code-step[hidden] { display: none !important; }
.syndesi-code-box {
    display: grid; gap: 10px; width: 100%; max-width: var(--wizard-max-width); margin: 12px auto; box-sizing: border-box;
    padding: 16px 18px; background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(var(--color-shadow-rgb), .06), 0 8px 24px rgba(var(--color-shadow-rgb), .08);
    text-align: left; font-family: var(--font-body); color: var(--color-text-dark);
}
.syndesi-code-box *, .syndesi-code-box *::before, .syndesi-code-box *::after { box-sizing: border-box; }
.syn-wiz .syndesi-code-box { margin: 0; max-width: none; background: var(--color-surface-soft); box-shadow: none; }   /* inside a wizard card: an inset, not a second card */
.syndesi-code-form { display: grid; gap: 8px; margin: 0; }
.syndesi-code-box .syndesi-code-title { margin: 0; font-family: var(--font-elegant); font-weight: 700; font-size: calc(17px * var(--lang-font-scale)); line-height: 1.25; color: var(--color-primary-dark); }
.syndesi-code-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.syndesi-code-row .syn-wiz-field { flex: 1 1 200px; }
.syndesi-code-box .syn-wiz-field > label { font-family: var(--font-button); font-weight: 700; font-size: calc(14px * var(--lang-font-scale)); color: var(--color-text-dark); }
.syndesi-code-box .syn-wiz-field input { width: 100%; font-size: 16px; padding: 10px 12px; }
.syndesi-code-box .syndesi-code-verify {
    flex: 0 0 auto; margin: 0; font-family: var(--font-button); font-weight: 700; font-size: calc(15px * var(--lang-font-scale)); line-height: 1.2;
    padding: 11px 26px; border-radius: 9999px; cursor: pointer;
    background: var(--color-highlight); border: 2px solid var(--color-highlight); color: var(--color-white);
    box-shadow: 0 4px 12px rgba(var(--color-highlight-rgb), .3);
}
.syndesi-code-box .syndesi-code-verify:hover,
.syndesi-code-box .syndesi-code-verify:focus { background: var(--color-highlight); border-color: var(--color-highlight); color: var(--color-white); filter: brightness(1.1); }
.syndesi-code-box .syndesi-code-verify:disabled,
.syndesi-code-box .syndesi-code-verify.disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
.syndesi-code-box .syndesi-code-verify:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 2px; }
.syndesi-code-resend { margin: 0; font-size: calc(13px * var(--lang-font-scale)); }
.syndesi-code-box .message-container:has(> .message-display:empty):has(> .message-display-progress-indicator[hidden]) { display: none; }
.syndesi-code-box .message-display { margin-top: 0; }
.syndesi-code-box .message-display-progress-indicator { text-align: center; font-size: calc(13px * var(--lang-font-scale)); }
@media (max-width: 600px) {
    .syndesi-code-box { padding: 14px; }
    .syndesi-code-box .syndesi-code-verify { margin: 0 auto; }   /* pill size on a phone, centred (25 Oct 2026, was full width) */
}

/* ---- 3. the members-only gate notice (syndesi_acc_notice(): a card panel, a booking-terms card, a page) ---- */
.wcbw-gate-notice { padding: .9em 1.2em 1em; border: 1px dashed var(--color-primary); border-radius: 8px; background: var(--color-brochure-block-bg); color: var(--color-text-dark); text-align: center; margin: .5em 0; }
.wcbw-gate-notice p { margin: 0 0 .6em; }
.wcbw-gate-notice > p { max-width: 36em; margin-left: auto; margin-right: auto; }
/* A guest: the wizard card is the frame (its lead carries the gate's line); no dashed box around it (24 Oct 2026). */
.wcbw-gate-notice.has-wizard { padding: 0; border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.wcbw-gate-notice.has-wizard .syn-wiz { margin: .5em auto 1em; }
@media (max-width: 480px) {
    .wcbw-gate-notice:not(.has-wizard) { padding: .7em .5em .8em; border-left: 0; border-right: 0; border-radius: 0; }
}

/* Pending welcome card (22 Oct 2026, Anthony: welcome their interest, one more small step). */
.wcbw-gate-notice.wcbw-gate-pending { border: 0; border-top: 4px solid var(--color-highlight); box-shadow: 0 2px 14px rgba(var(--color-shadow-rgb), .07); padding: 1.6em 1.4em 1.2em; }
.syndesi-acc-welcome { max-width: 38em; margin: 0 auto; }
.syndesi-acc-welcome .syndesi-acc-title { font-size: 1.45em !important; line-height: 1.25; margin: 0 0 .5em !important; color: var(--color-primary-dark) !important; }
.syndesi-acc-welcome .syndesi-acc-lead { font-size: 1.05em; margin: 0 auto 1.1em !important; }
.syndesi-acc-steps { list-style: none; margin: 0 auto 1.2em !important; padding: 0 !important; display: flex; justify-content: center; gap: .4em; flex-wrap: wrap; }
.syndesi-acc-steps li { display: flex; align-items: center; gap: .45em; font-size: .92em; color: var(--color-accent); margin: 0; }
.syndesi-acc-steps li + li::before { content: ""; width: 1.6em; height: 2px; background: var(--color-border); margin-right: .2em; }
.syndesi-acc-step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-white); font-weight: 700; font-size: .9em; }
.syndesi-acc-steps li.is-done .syndesi-acc-step-n { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.syndesi-acc-steps li.is-current { color: var(--color-text-dark); font-weight: 700; }
.syndesi-acc-steps li.is-current .syndesi-acc-step-n { border-color: var(--color-highlight); color: var(--color-highlight); box-shadow: 0 0 0 4px rgba(var(--color-highlight-rgb), .15); }
.syndesi-acc-welcome .syndesi-acc-wait { font-size: .9em; color: var(--color-accent); margin: 1em auto 0 !important; }
.syndesi-acc-welcome .syndesi-acc-extra { margin: 1.1em auto 0; }
.syndesi-acc-welcome .syndesi-acc-extra .contact-phones { font-size: 1.05em; }
@media (max-width: 600px) { .syndesi-acc-steps li + li::before { width: .8em; } }
/* Access code (24 Oct 2026, php/accounts/lib-access.php): step 4 = the code box under the phones, step 5 opens in place. */
.syndesi-acc-welcome [hidden] { display: none !important; }
/* 5 steps do not fit one line (a wrapped line would start with a connector): one under the other, at every width. */
.has-access-code .syndesi-acc-steps { flex-direction: column; align-items: flex-start; width: fit-content; gap: .35em; }
.has-access-code .syndesi-acc-steps li + li::before { display: none; }
.syndesi-acc-welcome .syndesi-acc-access { max-width: 26em; margin: 1.3em auto 0; text-align: left; }
.syndesi-acc-welcome .syndesi-acc-access .syndesi-code-box { margin: 0; max-width: none; }
.syndesi-code-box .syndesi-code-intro { margin: 0; font-size: calc(14px * var(--lang-font-scale)); line-height: 1.45; color: var(--color-text-dark); }
.syndesi-acc-welcome.has-access-code .syndesi-acc-wait { margin-top: .7em !important; }
.syndesi-acc-welcome .syndesi-acc-open-slot { margin: .4em auto 0; }
.syndesi-acc-welcome .syndesi-acc-open-title { font-size: 1.2em !important; margin: .8em 0 .3em !important; color: var(--color-primary-dark) !important; }
.syndesi-acc-welcome .syndesi-acc-open-text { margin: 0 auto .9em !important; max-width: 34em; }
.syndesi-acc-welcome .syndesi-acc-open-links { display: flex; gap: .8em; justify-content: center; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) {
    .syndesi-acc-welcome .syndesi-acc-open-links a.cta-big-button:not(#_) { white-space: normal !important; min-width: 0 !important; }   /* pill size on a phone (25 Oct 2026, was full width) */
}

/* ---- 4. help under a notice (Chat with us + Contact us = the home page CTA pills, css/contactUs.css) ---- */
.syndesi-acc-help { margin-top: .8em; text-align: center; }
.syndesi-acc-help p { margin: .3em 0; }
.syndesi-acc-help .wcbw-sub-help { display: flex; gap: .8em; justify-content: center; flex-wrap: wrap; align-items: center; }
.syndesi-acc-welcome .syndesi-acc-help { margin: 0; }
@media (max-width: 600px) {
    .syndesi-acc-help a.cta-big-button:not(#_) { white-space: normal !important; min-width: 0 !important; }   /* pill size on a phone (25 Oct 2026, was full width) */
}

/* Member chip, top right on every page for a logged-in member (as WCBW's profile.php chip). */
.wcbw-member-chip { position: fixed; top: 10px; right: 10px; z-index: 1200; display: flex; align-items: center; gap: .6em; padding: .25em .6em .25em .3em; background: rgba(var(--color-white-rgb), .95); border: 1px solid var(--color-border); border-radius: 999px; box-shadow: 0 2px 8px rgba(var(--color-shadow-rgb), .12); font-size: .85em; }
.wcbw-member-chip a { color: var(--color-primary-dark) !important; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.wcbw-member-chip a:hover { text-decoration: underline; }
.wcbw-member-chip .wcbw-member-chip-avatar { width: 28px; height: 28px; border-radius: 50%; }
.wcbw-member-chip .wcbw-member-chip-logout { border-left: 1px solid var(--color-border); padding-left: .6em; color: var(--color-link) !important; }
@media (max-width: 600px) { .wcbw-member-chip .wcbw-member-chip-name { display: none; } }
@media print { .wcbw-member-chip { display: none; } }

/* "Logged in as … / Log out" (syndesi_acc_member_line(), kept for callers) in a dashed box like the home page "Other solutions" box. */
.syndesi-acc-member { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 1.2em auto 0 !important; padding: .55em 1.1em; border: 2px dashed var(--color-highlight); border-radius: 10px; text-align: center; color: var(--color-text-dark); overflow-wrap: anywhere; font-size: .9em; }
.syndesi-acc-member a { color: var(--color-link); }

/* ---- 5. the popup (WCBW's old [subscription_modal] / Register buttons .wcbw-sub-open; accountsCompat.php) ---- */
body.no-scroll { overflow: hidden; }
#wcbw-sub-modal[hidden] { display: none; }
#wcbw-sub-modal.is-open { display: grid; }
.wcbw-sub-modal { position: fixed; inset: 0; z-index: 1300; place-items: center; padding: 16px; background: rgba(var(--color-shadow-rgb), .55); overflow: auto; }
.wcbw-sub-modal .wcbw-sub-modal-box { position: relative; width: 100%; max-width: var(--wizard-max-width); max-height: calc(100vh - 32px); overflow: auto; padding-top: 44px; }   /* the close button sits above the card, never over the rail */
.wcbw-sub-modal .wcbw-sub-modal-box .syn-wiz { margin: 0 auto; }
.wcbw-sub-modal .wcbw-sub-close {
    position: absolute; top: 0; right: 0; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
    background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 9999px; color: var(--color-primary-dark); font-size: 20px; line-height: 1; cursor: pointer;
}
.wcbw-sub-modal .wcbw-sub-close:hover, .wcbw-sub-modal .wcbw-sub-close:focus { background: var(--color-secondary-light); color: var(--color-primary-dark); }

/* STEP 4 of the registration wizard (24 Oct 2026, lib-access.php syndesi_acc_access_step_card()): the access code in the
   wizard card (flow layout only; the card itself is css/globals.css WIZARD). Chat / Contact, the phones, the code box,
   the wait line; after a right code step 5's links in place. */
.syn-wiz.syndesi-acc-step4 [hidden] { display: none !important; }
.wcbw-gate-notice.wcbw-gate-pending.has-wizard { border: 0; box-shadow: none; padding: 0; }   /* the wizard card is the frame */
.syndesi-acc-step4 .syndesi-acc-help { margin-top: 0; text-align: left; }
.syndesi-acc-step4 .syndesi-acc-help .wcbw-sub-help { justify-content: flex-start; }
.syndesi-acc-step4 .wcbw-sub-help a.cta-big-button:not(#_) { display: inline-block !important; margin: 0 !important; }
.syndesi-acc-step4 .syndesi-acc-extra { margin: .9em 0 0; }
.syndesi-acc-step4 .syndesi-acc-call .contact-phones { font-size: 1.1em; }
.syndesi-acc-step4 .syndesi-acc-access { margin: 1.2em 0 0; text-align: left; }
.syndesi-acc-step4 .syndesi-acc-access .syndesi-code-box { margin: 0; max-width: 26em; }
.syndesi-acc-step4 .syndesi-acc-wait { font-size: .9em; color: var(--color-accent); margin: .8em 0 0 !important; }
.syndesi-acc-step4 .syndesi-acc-open-slot { margin: .2em 0 0; }
.syndesi-acc-step4 .syndesi-acc-open-text { margin: 0 0 .9em !important; }
.syndesi-acc-step4 .syndesi-acc-open-links { display: flex; gap: .8em; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) {
    .syndesi-acc-step4 .syndesi-acc-help .wcbw-sub-help { justify-content: center; }
    .syndesi-acc-step4 .syndesi-acc-open-links { justify-content: center; }   /* pill size on a phone, centred (25 Oct 2026, was full width) */
    .syndesi-acc-step4 .syndesi-acc-open-links a.cta-big-button:not(#_) { white-space: normal !important; min-width: 0 !important; }
}

/* Registration step 1 (24 Oct 2026, Anthony): Log in as a teal pill just left of Continue (gold), the wizard's own button
   size (css/globals.css .syn-wiz-next); on a phone the same size, side by side, centred (25 Oct 2026, was full width). */
.syn-wiz .syn-wiz-login-wrap { margin-left: auto; }
.syn-wiz .syn-wiz-login-wrap + .syn-wiz-next { margin-left: 0; }
.syn-wiz a.syn-wiz-login {
    display: inline-block; font-family: var(--font-button); font-weight: 700; font-size: calc(15px * var(--lang-font-scale)); line-height: 1.2;
    padding: 11px 26px; border-radius: 9999px; text-decoration: none;
    background: var(--color-primary); border: 2px solid var(--color-primary); color: var(--color-white);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .3);
}
.syn-wiz a.syn-wiz-login:hover, .syn-wiz a.syn-wiz-login:focus { color: var(--color-white); filter: brightness(1.1); text-decoration: none; }
.syn-wiz a.syn-wiz-login:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 600px) {
    .syn-wiz .syn-wiz-login-wrap { margin-left: 0; }
}

/* ---- OUR LOGIN (25 Oct 2026; php/accounts/lib-codelogin.php): one card, three ways in (code, password, forgot) ---- */
.syn-wiz[data-flow="login"] .syn-wiz-rail { display: none; }   /* no step row: one short card */
.syndesi-codelogin .syndesi-codelogin-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.2em; margin: 0; }
.syndesi-codelogin .syndesi-codelogin-links a[hidden] { display: none; }
.syndesi-codelogin .syndesi-codelogin-register { margin: .6em 0 0; }
.syndesi-codelogin .password-input-wrapper { display: flex; gap: 8px; align-items: stretch; }
.syndesi-codelogin .password-input-wrapper input { flex: 1 1 auto; min-width: 0; }
.syndesi-login-page { padding: 1em 0 3em; }