/* ---------------------------------------------------------------------------
   East Dorset Sailing Club — membership enquiry wizard.
   The wizard's layout, motion and controls. Colours, radius and font come
   from the theme block of the form's JSON definition and are injected as
   custom properties by Index.cshtml, so re-theming is a JSON edit, not a
   CSS edit.
--------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
    height: 100%;
    margin: 0;
}

body.wz {
    background: var(--wz-background);
    color: var(--wz-question);
    font-family: var(--wz-font);
    font-size: 16px;
    line-height: 1.4;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wz-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- deck & screens ------------------------------------------------------ */

.wz-deck {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.wz-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 72px 24px 96px;
    will-change: transform, opacity;
}

.wz-screen[hidden] { display: none; }

.wz-screen.is-active {
    transform: translateY(0);
    opacity: 1;
}

.wz-screen.is-entering-forward  { animation: wz-in-up   var(--wz-slide, 520ms) cubic-bezier(.25, .8, .35, 1) both; }
.wz-screen.is-entering-backward { animation: wz-in-down var(--wz-slide, 520ms) cubic-bezier(.25, .8, .35, 1) both; }
.wz-screen.is-leaving-forward   { animation: wz-out-up  var(--wz-slide, 520ms) cubic-bezier(.25, .8, .35, 1) both; }
.wz-screen.is-leaving-backward  { animation: wz-out-down var(--wz-slide, 520ms) cubic-bezier(.25, .8, .35, 1) both; }

@keyframes wz-in-up    { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes wz-in-down  { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes wz-out-up   { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes wz-out-down { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }

.wz-screen__inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    align-items: center;
    gap: 40px 64px;
}

.wz-screen__inner--solo { max-width: 760px; grid-template-columns: minmax(0, 1fr); }
.wz-screen__inner--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.wz-block { min-width: 0; }

/* Screens (welcome / thank-you) are centred and set x-small; question fields
   are left aligned and set medium — mirroring theme.screens vs theme.fields. */
.wz-screen--welcome .wz-block,
.wz-screen--thankyou .wz-block { text-align: center; }

.wz-screen--welcome .wz-title,
.wz-screen--thankyou .wz-title { font-size: 1.625rem; }

.wz-screen--welcome .wz-description,
.wz-screen--thankyou .wz-description { font-size: 1rem; }

.wz-screen--welcome .wz-actions,
.wz-screen--thankyou .wz-actions { justify-content: center; }

/* --- heading ------------------------------------------------------------- */

.wz-heading { position: relative; }

.wz-number {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--wz-question);
    opacity: 0.75;
}

.wz-number svg { display: block; }
.wz-required { margin-left: 2px; }

.wz-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.35;
}

.wz-title p,
.wz-description p { margin: 0 0 0.5em; }

.wz-title p:last-child,
.wz-description p:last-child { margin-bottom: 0; }

.wz-title strong,
.wz-description strong { font-weight: 700; }

.wz-title ul,
.wz-description ul {
    margin: 0.5em 0 0;
    padding-left: 1.15em;
}

.wz-description {
    margin-top: 12px;
    font-size: 1.25rem;
    line-height: 1.45;
    opacity: 0.85;
}

.wz-recall { font-weight: inherit; }

/* A screen body pulled from the club wiki arrives as ordinary paragraphs,
   headings and lists rather than a single question title, so it is set a step
   smaller than a title and given heading sizes of its own. */
.wz-wiki { font-size: 1.375rem; }
.wz-wiki h1, .wz-wiki h2, .wz-wiki h3, .wz-wiki h4 {
    margin: 0 0 0.4em;
    font-weight: 700;
    line-height: 1.3;
}
.wz-wiki h1 { font-size: 1.875rem; }
.wz-wiki h2 { font-size: 1.625rem; }
.wz-wiki h3, .wz-wiki h4 { font-size: 1.375rem; }
.wz-wiki p + h1, .wz-wiki p + h2, .wz-wiki p + h3,
.wz-wiki ul + h2, .wz-wiki ul + h3 { margin-top: 0.8em; }
.wz-wiki ul, .wz-wiki ol { margin: 0.5em 0; padding-left: 1.15em; }
.wz-wiki li { margin: 0.15em 0; }
.wz-wiki a { color: inherit; }
.wz-wiki table { border-collapse: collapse; margin: 0.5em 0; font-size: 0.9em; }
.wz-wiki th, .wz-wiki td {
    padding: 0.25em 0.6em;
    border: 1px solid color-mix(in srgb, var(--wz-question) 45%, transparent);
    text-align: left;
}
.wz-wiki img { max-width: 100%; height: auto; }

/* --- links (e.g. the Google Maps pin on the welcome screen) -------------- */

.wz-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.wz-screen--welcome .wz-links,
.wz-screen--thankyou .wz-links { justify-content: center; }

.wz-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--wz-question) 55%, transparent);
    border-radius: var(--wz-radius);
    color: var(--wz-question);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 120ms ease;
}

.wz-link:hover,
.wz-link:focus-visible { background: color-mix(in srgb, var(--wz-question) 14%, transparent); }

.wz-link__icon { display: block; width: 20px; height: 20px; }

/* --- answers ------------------------------------------------------------- */

.wz-answer:empty { display: none; }
.wz-answer { margin-top: 28px; }

.wz-input-wrap { position: relative; }

.wz-input {
    width: 100%;
    padding: 4px 0 8px;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--wz-answer) 35%, transparent);
    background: transparent;
    color: var(--wz-answer);
    font-family: inherit;
    font-size: 1.875rem;
    line-height: 1.4;
    outline: none;
    transition: border-color 120ms ease;
}

.wz-input::placeholder {
    color: var(--wz-answer);
    opacity: 0.35;
}

.wz-input:focus { border-bottom-color: var(--wz-answer); }

/* A long answer (the contact message): a few lines high, set a step smaller
   than a one-line answer, with a character count underneath. */
.wz-input--long {
    display: block;
    min-height: 5.6em;
    max-height: 40vh;
    font-size: 1.375rem;
    resize: vertical;
}

.wz-input__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.8125rem;
    opacity: 0.75;
}

.wz-counter { white-space: nowrap; }
.wz-counter.is-full { font-weight: 700; opacity: 1; }
.wz-hint--inline { position: static; margin: 0; }

/* --- choices ------------------------------------------------------------- */

.wz-choices {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 8px;
}

.wz-choices--stacked { flex-direction: column; align-items: flex-start; }
.wz-choices--inline { flex-flow: row wrap; }

.wz-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--wz-answer) 55%, transparent);
    border-radius: var(--wz-radius);
    background: color-mix(in srgb, var(--wz-answer) 10%, transparent);
    color: var(--wz-answer);
    font-family: inherit;
    font-size: 1.25rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.wz-choice:hover { background: color-mix(in srgb, var(--wz-answer) 20%, transparent); }
.wz-choice:focus-visible { outline: 2px solid var(--wz-answer); outline-offset: 2px; }

.wz-choice.is-selected {
    background: color-mix(in srgb, var(--wz-answer) 32%, transparent);
    border-color: var(--wz-answer);
}

.wz-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--wz-answer) 22%, transparent);
    color: var(--wz-answer);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.wz-choice:hover .wz-key,
.wz-choice.is-selected .wz-key {
    background: var(--wz-answer);
    color: var(--wz-background);
}

.wz-choice__label { flex: 1 1 auto; }

.wz-choice__tick {
    flex: 0 0 auto;
    display: inline-flex;
    opacity: 0;
    transition: opacity 120ms ease;
}

.wz-choice.is-selected .wz-choice__tick { opacity: 1; }

/* picture choice */

.wz-choices--picture { flex-flow: row wrap; gap: 12px; }

.wz-choice--picture {
    flex-direction: column;
    gap: 0;
    min-width: 0;
    width: 150px;
    padding: 0;
    overflow: hidden;
}

.wz-choices--supersized .wz-choice--picture { width: 230px; }

.wz-choice__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 18px;
    background: color-mix(in srgb, var(--wz-answer) 6%, transparent);
}

.wz-choice__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wz-choice__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-top: 1px solid color-mix(in srgb, var(--wz-answer) 30%, transparent);
    font-size: 1.0625rem;
}

/* --- rating -------------------------------------------------------------- */

.wz-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wz-rating__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--wz-radius);
    background: transparent;
    color: var(--wz-answer);
    font-family: inherit;
    cursor: pointer;
}

.wz-rating__step:hover { background: color-mix(in srgb, var(--wz-answer) 12%, transparent); }
.wz-rating__step:focus-visible { outline: 2px solid var(--wz-answer); outline-offset: 2px; }

.wz-rating__number { font-size: 0.8125rem; opacity: 0.7; }

.wz-rating.is-lit .wz-rating__step.is-lit .wz-rating__shape path { fill: currentColor; }

/* --- summary ------------------------------------------------------------- */

.wz-summary {
    margin: 0;
    border-top: 1px solid color-mix(in srgb, var(--wz-answer) 30%, transparent);
    color: var(--wz-answer);
}

.wz-summary__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    gap: 4px 16px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--wz-answer) 30%, transparent);
}

.wz-summary__label { font-size: 0.875rem; opacity: 0.8; }

.wz-summary__value {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.wz-summary__row.is-empty .wz-summary__value { font-weight: 400; font-style: italic; opacity: 0.7; }

.wz-summary__change { margin: 0; }

.wz-summary__edit {
    padding: 2px 4px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

.wz-summary__edit:focus-visible { outline: 2px solid var(--wz-answer); outline-offset: 2px; }

@media (max-width: 560px) {
    .wz-summary__row { grid-template-columns: minmax(0, 1fr) auto; }
    .wz-summary__label { grid-column: 1 / -1; }
}

/* --- actions ------------------------------------------------------------- */

.wz-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.wz-actions:empty { display: none; }

.wz-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 0;
    border-radius: var(--wz-radius);
    background: var(--wz-button);
    color: var(--wz-background);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 120ms ease;
}

.wz-button:hover { opacity: 0.88; }
.wz-button:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); transform: translateY(2px); }
.wz-button:focus-visible { outline: 2px solid var(--wz-button); outline-offset: 3px; }
.wz-button[disabled] { opacity: 0.6; cursor: default; }

.wz-button__tick { display: block; }

.wz-hint {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    opacity: 0.75;
}

.wz-hint strong { font-weight: 700; }
.wz-hint__key { font-weight: 700; }

.wz-error {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 16px 0 0;
    padding: 6px 12px;
    border-radius: var(--wz-radius);
    background: #dc3f4b;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
}

.wz-error[hidden] { display: none; }

/* --- media --------------------------------------------------------------- */

.wz-media {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

/* The <picture> wrapper (AVIF/WebP sources) must not become the flex item —
   the img is what the sizing rules below are written for. */
.wz-media picture,
.wz-choice__image picture { display: contents; }

.wz-media img {
    max-width: 100%;
    max-height: 66vh;
    border-radius: var(--wz-radius);
    object-fit: contain;
}

/* The small line-art attachments are 64px originals — showing them at column
   width would just blur them. */
.wz-media--icon img {
    max-width: 168px;
    border-radius: 0;
}

/* --- chrome: nav, progress, branding ------------------------------------- */

.wz-nav {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    gap: 2px;
    z-index: 3;
}

.wz-nav__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 34px;
    padding: 0;
    border: 0;
    background: var(--wz-button);
    color: var(--wz-background);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: opacity 120ms ease;
}

.wz-nav__button:first-child { border-radius: var(--wz-radius) 0 0 var(--wz-radius); }
.wz-nav__button:last-child { border-radius: 0 var(--wz-radius) var(--wz-radius) 0; }
.wz-nav__button:hover:not([disabled]) { opacity: 0.88; }
.wz-nav__button[disabled] { opacity: 0.45; cursor: default; }

.wz-home {
    position: fixed;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--wz-radius);
    background: var(--wz-button);
    color: var(--wz-background);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
    font-family: var(--wz-font);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    z-index: 3;
    transition: opacity 120ms ease;
}

.wz-home:hover { opacity: 0.88; }
.wz-home:focus-visible { outline: 2px solid var(--wz-answer); outline-offset: 2px; }
.wz-home.is-hidden { visibility: hidden; }

.wz-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: rgba(0, 0, 0, 0.14);
    z-index: 3;
}

.wz-progress__fill {
    width: 0;
    height: 100%;
    background: var(--wz-answer);
    transition: width 320ms cubic-bezier(.25, .8, .35, 1);
}

.wz-branding {
    position: fixed;
    left: 16px;
    bottom: 18px;
    padding: 6px 10px;
    border-radius: var(--wz-radius);
    background: #fff;
    color: #111;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    z-index: 3;
}

.wz-branding:hover { opacity: 0.9; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
    .wz-screen { padding: 56px 20px 96px; }

    .wz-screen__inner--split {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* The attachment stacks above the question on narrow screens. */
    .wz-screen__inner--split .wz-block { order: 2; }
    .wz-screen__inner--split .wz-media { order: 1; }

    .wz-media img { max-height: 32vh; }
    .wz-media--icon img { max-width: 108px; }

    .wz-title { font-size: 1.5rem; }
    .wz-description { font-size: 1.0625rem; }
    .wz-input { font-size: 1.5rem; }
    .wz-choice { font-size: 1.0625rem; min-width: 0; }
    .wz-button { font-size: 1.0625rem; }

    /* Keyboard hints are meaningless on touch. */
    .wz-hint { display: none; }

    .wz-branding { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wz-screen { --wz-slide: 1ms; }
    .wz-progress__fill { transition: none; }
}