/* Phone-first: ≥16px inputs (no iOS zoom-on-focus), ≥44px tap targets, one narrow column.
   Ported from the registration wizard this site replaces (TestProjects/CustomExternalForms).

   YMCA brand ("Our Look – Quick Guide", Documents/YMCA-Brand-Quick-Guide.pdf):
   - Verdana is the guide's font for online use (Cachet is print-only).
   - ONLY the guide's colours: text Black #231f20, muted Cool Gray 11 #636466, errors Red dark #a92b31,
     success Green dark #006b6b, and the account's chosen logo colour as the accent.
   - The accent arrives as --ef-* variables (FormsTheme.CssVariables, set on .ef-themed by the page);
     WHICH shade fills a button or colours a link is decided by YmcaPalette in C#, by contrast — never
     pick a shade here. The :root values below are Y Blue (YmcaPalette.Resolve(null, null)), used by the
     screens that render before the account is known (not found, error).
   - Everything is scoped to this site: the shared runner (MissionLens.Forms.Components) also renders
     inside MLClient, which must look exactly as it did. */
:root {
    --ef-accent: #0060af; --ef-accent-text: #ffffff; --ef-accent-hover: #0060af; --ef-accent-rgb: 0, 96, 175;
    --ef-link: #0060af; --ef-tint: #00aeef; --ef-tint-rgb: 0, 174, 239;
    --ef-black: #231f20; --ef-gray: #636466; --ef-gray-rgb: 99, 100, 102;
    --ef-red: #a92b31; --ef-red-rgb: 169, 43, 49; --ef-green: #006b6b; --ef-green-rgb: 0, 107, 107;
}

html, body { background: #f4f4f4; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: Verdana, Geneva, sans-serif;
    color: var(--ef-black);
    --bs-body-font-family: Verdana, Geneva, sans-serif;
    --bs-body-color: var(--ef-black);
    --bs-emphasis-color: var(--ef-black);
    --bs-secondary-color: var(--ef-gray);
    --bs-border-color: rgba(var(--ef-gray-rgb), .3);
    --bs-danger: var(--ef-red); --bs-danger-rgb: var(--ef-red-rgb); --bs-danger-text-emphasis: var(--ef-red);
    --bs-success: var(--ef-green); --bs-success-rgb: var(--ef-green-rgb); --bs-success-text-emphasis: var(--ef-green);
    --bs-secondary-rgb: var(--ef-gray-rgb);
    --bs-form-invalid-color: var(--ef-red); --bs-form-invalid-border-color: var(--ef-red);
    --bs-form-valid-color: var(--ef-green); --bs-form-valid-border-color: var(--ef-green);
    --bs-border-radius-lg: 16px;
}

/* The account's accent, re-pointed at Bootstrap wherever Bootstrap reads a variable. */
.ef-themed, .ef-page {
    --bs-primary: var(--ef-accent); --bs-primary-rgb: var(--ef-accent-rgb);
    --bs-link-color: var(--ef-link); --bs-link-hover-color: var(--ef-link);
    --bs-link-color-rgb: var(--ef-accent-rgb); --bs-link-hover-color-rgb: var(--ef-accent-rgb);
    --bs-focus-ring-color: rgba(var(--ef-tint-rgb), .35);
}
/* Plain links only: an anchor styled as a button (the script-opened link) keeps Bootstrap's
   --bs-btn-color, else its text takes the link colour on the same-coloured button. */
.ef-themed a:not(.btn) { color: var(--ef-link); }

.ef-page { max-width: 680px; margin: 0 auto; padding: 0 16px 32px; min-height: 100vh; }

/* Header, in the guide's order: the offering (form name, bold ALL CAPS) → the Y. The caps are CSS
   only, so screen readers and the page title still get the name as written. */
.ef-header { display: flex; align-items: center; gap: 12px; padding: 16px 0 10px; border-bottom: 4px solid var(--ef-accent); margin-bottom: 16px; }
/* A Y's own logo keeps its shape (the guide forbids distortion) — contained, never circle-cropped. */
.ef-logo { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; }
.ef-header-text { flex: 1 1 auto; min-width: 0; }
/* The Y logo, top right (YLogo.razor). Guide: minimum 0.25" = 24 CSS px — a FIXED 48px height, so no
   screen width can shrink it; height only (width auto), so it is never stretched; clear space = the
   height of "the" in the logo (~1/6 of its height = 8px), kept empty on every side by the padding. */
.ef-ylogo { height: 48px; min-height: 24px; width: auto; padding: 8px; box-sizing: content-box; flex: 0 0 auto; margin-left: auto; }
.ef-monogram { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--ef-accent); color: var(--ef-accent-text); font-weight: 700; font-size: 20px; }
.ef-headline { font-weight: 700; font-size: 19px; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; color: var(--ef-accent); margin: 0; }
.ef-descriptor { color: var(--ef-gray); font-size: 14px; font-weight: 700; margin-top: 2px; }

.ef-card { background: #fff; border-radius: 16px; padding: 20px 16px; margin: 16px 0; box-shadow: 0 1px 3px rgba(var(--ef-gray-rgb), .15); }
.ef-title { font-size: 21px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.ef-sub { color: var(--ef-gray); font-size: 15px; margin-bottom: 14px; }
.ef-error { border-radius: 10px; padding: 12px 14px; }
.ef-page .text-success { color: var(--ef-green) !important; }
.ef-page .text-danger { color: var(--ef-red) !important; }
.ef-page .text-secondary, .ef-page .text-muted { color: var(--ef-gray) !important; }

/* Buttons — every primary button on the page, inside the runner or not (the sign-in code, the
   branch picker and "Start again" used to stay Bootstrap blue). */
.ef-page .btn-primary {
    --bs-btn-bg: var(--ef-accent); --bs-btn-border-color: var(--ef-accent); --bs-btn-color: var(--ef-accent-text);
    --bs-btn-hover-bg: var(--ef-accent-hover); --bs-btn-hover-border-color: var(--ef-accent-hover); --bs-btn-hover-color: var(--ef-accent-text);
    --bs-btn-active-bg: var(--ef-accent-hover); --bs-btn-active-border-color: var(--ef-accent-hover); --bs-btn-active-color: var(--ef-accent-text);
    --bs-btn-disabled-bg: var(--ef-accent); --bs-btn-disabled-border-color: var(--ef-accent); --bs-btn-disabled-color: var(--ef-accent-text);
    --bs-btn-focus-shadow-rgb: var(--ef-tint-rgb);
    font-weight: 700;
}
.ef-page .btn-primary:hover { box-shadow: 0 2px 6px rgba(var(--ef-accent-rgb), .35); }
.ef-page .btn-outline-primary {
    --bs-btn-color: var(--ef-link); --bs-btn-border-color: var(--ef-accent);
    --bs-btn-hover-bg: var(--ef-accent); --bs-btn-hover-border-color: var(--ef-accent); --bs-btn-hover-color: var(--ef-accent-text);
    --bs-btn-active-bg: var(--ef-accent-hover); --bs-btn-active-border-color: var(--ef-accent-hover); --bs-btn-active-color: var(--ef-accent-text);
    --bs-btn-disabled-color: var(--ef-link); --bs-btn-disabled-border-color: var(--ef-accent);
    --bs-btn-focus-shadow-rgb: var(--ef-tint-rgb);
}
.ef-page .btn-secondary {
    --bs-btn-bg: var(--ef-gray); --bs-btn-border-color: var(--ef-gray);
    --bs-btn-hover-bg: var(--ef-black); --bs-btn-hover-border-color: var(--ef-black);
    --bs-btn-active-bg: var(--ef-black); --bs-btn-active-border-color: var(--ef-black);
}
.ef-page .btn-outline-secondary {
    --bs-btn-color: var(--ef-gray); --bs-btn-border-color: rgba(var(--ef-gray-rgb), .5);
    --bs-btn-hover-bg: var(--ef-gray); --bs-btn-hover-border-color: var(--ef-gray);
    --bs-btn-active-bg: var(--ef-black); --bs-btn-active-border-color: var(--ef-black);
}

/* Inputs: the focus ring and ticked boxes wear the account's colour. */
.ef-page .form-control:focus, .ef-page .form-select:focus {
    border-color: var(--ef-accent);
    box-shadow: 0 0 0 .25rem rgba(var(--ef-tint-rgb), .35);
}
.ef-page .form-check-input:focus { border-color: var(--ef-accent); box-shadow: 0 0 0 .25rem rgba(var(--ef-tint-rgb), .35); }
.ef-page .form-check-input:checked { background-color: var(--ef-accent); border-color: var(--ef-accent); }
.ef-page .list-group-item.active { background-color: var(--ef-accent); border-color: var(--ef-accent); color: var(--ef-accent-text); }
.ef-page .list-group-item-action:hover { background-color: rgba(var(--ef-tint-rgb), .10); }

/* Alerts on the guide's red / green / gray, as light tints with readable dark text. */
.ef-page .alert-danger { --bs-alert-bg: rgba(var(--ef-red-rgb), .08); --bs-alert-border-color: rgba(var(--ef-red-rgb), .35); --bs-alert-color: var(--ef-red); }
.ef-page .alert-success { --bs-alert-bg: rgba(var(--ef-green-rgb), .08); --bs-alert-border-color: rgba(var(--ef-green-rgb), .35); --bs-alert-color: var(--ef-green); }
.ef-page .alert-info, .ef-page .alert-primary { --bs-alert-bg: rgba(var(--ef-tint-rgb), .10); --bs-alert-border-color: rgba(var(--ef-tint-rgb), .45); --bs-alert-color: var(--ef-black); }
.ef-page .alert-warning, .ef-page .alert-secondary, .ef-page .alert-light { --bs-alert-bg: rgba(var(--ef-gray-rgb), .08); --bs-alert-border-color: rgba(var(--ef-gray-rgb), .3); --bs-alert-color: var(--ef-black); }
.ef-page .spinner-border { color: var(--ef-accent); }

/* The shared runner, sized for thumbs. */
.ml-forms-mobile .form-control, .ml-forms-mobile .form-select { font-size: 16px; min-height: 48px; }
.ml-forms-mobile textarea.form-control { min-height: 96px; }
.ml-forms-mobile .btn { min-height: 44px; font-size: 16px; }
.ml-forms-mobile .form-check-input { width: 1.4em; height: 1.4em; margin-top: 0.1em; }
.ml-forms-mobile .form-check-label { padding-left: 4px; line-height: 1.6em; }
.ml-forms-mobile .card { border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(var(--ef-gray-rgb), .15); }
.ml-forms-mobile .card-header { background: #fff; font-weight: 700; font-size: 17px; color: var(--ef-black); border-bottom: 1px solid rgba(var(--ef-gray-rgb), .18); }
.ml-forms-mobile .card-footer { position: sticky; bottom: 0; background: #fff; border-top: 1px solid rgba(var(--ef-gray-rgb), .18); padding: 12px 16px; z-index: 5; flex-wrap: wrap; }
.ml-forms-mobile .card-footer .btn-primary, .ml-forms-mobile .card-footer .btn-secondary { flex: 1 1 auto; }
/* The sequence name is already the header's headline; the runner repeats it as an h4. */
.ml-forms-mobile h4 { font-size: 19px; font-weight: 700; }
.ml-forms-mobile .bg-body-secondary { background-color: rgba(var(--ef-gray-rgb), .08) !important; }

.ef-step { color: var(--ef-gray); font-size: 13px; }
.ef-footer { text-align: center; color: var(--ef-gray); font-size: 12px; padding: 24px 0 8px; }