/* ============================================================================
 * syas-design-final.css  v1  —  Sky (Marc & Danielle final)
 * ----------------------------------------------------------------------------
 * Built from Marc & Danielle's 2026-05-20 feedback on the modern/sage drafts.
 *
 * Page background:        #E6F2FA   (soft pastel blue — surrounds the questions)
 * Selected bubble:        #7FA9D1   (muted slate blue)
 * Selected bubble text:   #FFFFFF
 * Bubble outline:         #B8C4D1   (soft gray, not black)
 * Question text:          #000000   (bolded — bolded variant)
 * Answer text weight:     400       (no bold on answers)
 * Font sizes:             14px questions, 14px answers (same size)
 *
 * Strategy: the page DROPS the white form card. There is one big light-blue
 * surface and the questions live directly on it — no bordered shells, no
 * white container. The legacy "border:1px solid #b9b9b9" inline style on each
 * question shell is neutralised here so the existing markup keeps working.
 *
 * 30-08-2026 Jack+Claude: header/first-card left-edge alignment + header-to-
 * first-card gap fix for the unified .syas-step-header component (Lane A
 * cont., LOCAL ONLY at time of writing). See the two rules appended after the
 * "#37" header block below (search "HEADER/CARD LEFT-EDGE ALIGNMENT" and
 * "HEADER -> FIRST-CARD GAP") for the root-cause writeup. Buster bumped to
 * v=20260830b on the 9 Lane-A-owned pages (membersignup.aspx,
 * CreateMaleMember.aspx, Members/ProfileStep1-7.aspx); the Edit*.aspx pages
 * are peer-owned and were not touched here.
 *
 * 03-09-2026 Jack+Claude: [lang="he"] .syas-backlink added (Fix #4). The back
 * link SinaiMemberUI.WriteStepHeader emits (search "syas-backlink") had no
 * Hebrew/RTL override - it kept the LTR left-pointing arrow glyph and stayed
 * pinned top-RIGHT, colliding with RTL header text. See the rule itself,
 * right after ".syas-backlink:hover, :focus", for the mirror-trick writeup.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* === PALETTE TOKENS ========================================================= */
:root {
    --sky-bg:              #F0F7FD;   /* airy light sky — brightened from #E6F2FA so the grey cards stand out (Marc round-12) */
    --sky-bg-deep:         #d7e9f5;
    --sky-card:            #e4e9f1;   /* question-card fill — a touch deeper than before (#e9ecf2) to widen the gap with the brighter page bg */
    --sky-selected:        #7FA9D1;
    --sky-selected-hover:  #6B97C0;
    --sky-on-blue:         #FFFFFF;
    --sky-bubble-bg:       #FFFFFF;
    --sky-bubble-border:   #B8C4D1;
    --sky-question:        #2b3440;   /* dark slate-grey, not pure black (Danielle 2026-05-21: bold question read too dark/black) */
    --sky-answer:          #1f2937;
    --sky-muted:           #6b7785;
    --sky-badge:           #2a5d9f;   /* unified blue for ALL right-side field labels — Required / Check all / 500 chars / MM-only (Danielle 2026-05-21: same color, leaning blue) */
    --sky-ink:             #1f4e79;   /* 30-08-2026 (theming-completeness sweep, #89 in SiteFunctions.vb): a second, darker navy that several modal headings/borders and the photo-tile number badge were already hardcoded to (#1f4e79 / #2a6ebb / rgb(31,78,121) - all the same family, just picked separately over time). Distinct from --sky-badge (L~39%) - this one measures L~30%, same hue as --sky-selected. Promoted to a token instead of folding into --sky-badge because reusing --sky-badge here would have shifted these elements' color on the DEFAULT (untouched) site too, not just themed sites. Per-site derivation is a lightness RATIO (L*0.4524), not a flat subtract - a flat subtract clips to pure black on a dark ThemeColor. */
    --sky-error:           #d24f86;   /* softer rose-pink for mandatory/error accents (Danielle 2026-05-21: brick red clashed) */
    /* "Done" green (Marc 26-08). Derived from --sky-selected rather than picked off a
       swatch: #7FA9D1 is hsl(209,47%,66%), so #80D1AB is hsl(152,47%,66%) — the same
       saturation and lightness, hue rotated to green. It reads as a sibling of the
       selected-bubble blue instead of a stock "success" green shouting next to it.
       The button uses the soft tint with ink-green text (7:1 contrast) and only fills
       solid on hover, so a finished list never competes with the answers above it. */
    --sky-go:              #59B98F;   /* border + hover fill */
    --sky-go-soft:         #E8F6EF;   /* resting tint */
    --sky-go-ink:          #1F6B4F;   /* label on the tint */
    --sky-go-hover:        #4AA87E;
    --sky-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* 30-08-2026 (Jack+Claude, #90 in SiteFunctions.vb): pre-derived alpha tints, NOT color-mix().
       A prior pass had replaced hardcoded rgba() tints in Members/ProfileStep3.aspx (photo-tile
       number badge, hover shadow, selected ring) with color-mix(in srgb, var(--sky-x) N%, transparent).
       Standing decision: NO color-mix anywhere - member base includes old WebViews/desktops without
       support, where the whole declaration is dropped or the tint silently resolves invalid/transparent.
       These tokens are the fixed, byte-identical replacement for the DEFAULT site: same rgb triplet the
       page always had (--sky-badge #2a5d9f = rgb(42,93,159); --sky-ink #1f4e79 = rgb(31,78,121);
       --sky-selected #7FA9D1 = rgb(127,169,209)), alpha baked in ahead of time. Themed sites get their
       own values for these same names from GetExtraSiteThemeCss's :root override block (SiteFunctions.vb
       #90), computed from that site's derived --sky-badge/--sky-ink/--sky-selected hex so the tint still
       follows the site colour. Name = family + "-a" + two-digit percent. */
    --sky-badge-a08:       rgba(42,93,159,.08);
    --sky-badge-a25:       rgba(42,93,159,.25);
    --sky-ink-a15:         rgba(31,78,121,.15);
    --sky-ink-a28:         rgba(31,78,121,.28);
    --sky-ink-a70:         rgba(31,78,121,.70);
    --sky-ink-a72:         rgba(31,78,121,.72);
    --sky-selected-a20:    rgba(127,169,209,.20);

    /* 30-08-2026 (Jack+Claude, #91 in SiteFunctions.vb): owner ruling - section headings
       (.sec-head, .syas-section-label) must render in the site's theme colour, not the
       fixed slate --sky-question, the way AdoptaShadchan's legacy AAS.css already paints
       its headings brand plum. --sky-heading = --sky-selected itself IF it clears 4.5:1
       WCAG AA contrast against --sky-card, ELSE --sky-selected with HSL lightness walked
       down in 1% steps (same hue/saturation) until 4.5:1 clears - identical algorithm to
       ChooseHeadingColor() in SiteFunctions.vb, so every themed site's value is computed
       the same way. This DEFAULT value applies that same algorithm to Sky itself:
       --sky-selected #7FA9D1 = hsl(209,47%,66%) vs --sky-card #e4e9f1 -> base contrast
       only 2.03:1 (fails AA) -> lightness walked 66%->42% in 24 x 1% steps -> #386C9D,
       contrast 4.53:1 (clears). Derivation replicated in a throwaway Node script against
       the exact same HSL/luminance formulas as SiteFunctions.vb (RgbToHsl/HslToRgb/
       RelativeLuminance/ContrastRatio) - not hand-picked. Themed sites get their own
       value from GetExtraSiteThemeCss's :root override (SiteFunctions.vb #91). */
    --sky-heading:         #386C9D;
}


/* === NATIVE CHECKBOX / RADIO ACCENT =========================================
   30-08-2026 Jack+Claude (theming-completeness sweep, Lane B widened scope).
   Plain <input type="checkbox">/<input type="radio"> (Membership consent,
   "notify me about offers", etc.) paint with the OS/browser accent color -
   plain blue - regardless of site theme, because nothing here ever set
   accent-color. This was the one place a themed site (e.g. AdoptaShadchan
   plum) still showed a stock blue checkmark after everything else re-themed.
   One property, re-themes every native checkbox/radio on every page that
   loads this stylesheet - no custom checkbox markup needed. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sky-selected) !important;
}


/* === FULL-PAGE BLUE SURFACE ================================================= */
html, body {
    background-color: var(--sky-bg) !important;
}
section.index_video.MMsignup.innerPage {
    background: var(--sky-bg) !important;
    min-height: 100vh;
}


/* === KILL THE WHITE FORM CARD =============================================== */
/* The whole point of this design: NO white panel in the middle. The light blue
   page color goes edge-to-edge and surrounds the questions directly. */
figure.mmSForm.profileStep,
.mmSForm,
.mmSFormInner,
.mmSFormNew,
#dvMainForm {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
figure.mmSForm.profileStep {
    padding-top: 12px !important;
    padding-bottom: 32px !important;
}


/* === BASE TYPE ============================================================== */
.mmSForm.profileStep,
.mmSForm.profileStep p,
.mmSForm.profileStep span,
.mmSForm.profileStep label,
.mmSForm.profileStep input,
.mmSForm.profileStep select,
.mmSForm.profileStep textarea {
    font-family: var(--sky-font);
}
.mmSForm.profileStep { color: var(--sky-answer); }


/* === PROGRESS BAR =========================================================== */
/* 30-08-2026 (Lane B.8): the four hardcoded blues below now route through the
   --sky-* tokens, so a per-site theme colour repaints the progress bar for free
   instead of leaving it stuck on Sky blue next to a themed accent bar.
     connector  #c5d8e7            -> var(--sky-bubble-border)  (the soft outline token)
     dot border #B8C4D1            -> var(--sky-bubble-border)  (byte-identical value)
     glow       rgba(127,169,209,.22) -> var(--sky-bg-deep) as a SOLID ring: that rgba over
                the page bg composites to ~#dfeaf5 and --sky-bg-deep is #d7e9f5, so the look
                is unchanged - and unlike an rgba() it is a hex token the theming sweep
                (Lane B.3) actually derives.
     active label #1a4480          -> var(--sky-badge)          (the unified label blue) */
.progressHeader li:after {
    background: var(--sky-bubble-border) !important;
}
.progressHeader li:before {
    border-color: var(--sky-bubble-border) !important;
    background:   #FFFFFF !important;
}
.progressHeader li.active:before {
    border-color: var(--sky-selected) !important;
    background:   var(--sky-selected) !important;
    box-shadow:   0 0 0 4px var(--sky-bg-deep) !important;
}
.progressHeader li p {
    color:       var(--sky-muted) !important;
    font-size:   11px !important;
    line-height: 1.35;
    font-family: var(--sky-font) !important;
}
.progressHeader li.active p {
    color:       var(--sky-badge) !important;
    font-weight: 600 !important;
}
.progressHeader {
    border-bottom:  none !important;
    padding-top:    4px !important;
    padding-bottom: 8px !important;
    margin-top:     0 !important;
    margin-bottom:  14px !important;
}


/* === MOBILE STEP TITLE ====================================================== */
.mobile-bluetxt {
    color:          var(--sky-badge) !important;   /* 30-08-2026: was raw #1a4480 - the exact stale value the progress-bar migration comment above (line ~113) already documented as retired, but this selector was missed in that pass. Theming-completeness sweep (Lane B widened scope). */
    font-family:    var(--sky-font) !important;
    font-size:      20px !important;
    font-weight:    700 !important;
    border-bottom:  none !important;
    padding-bottom: 10px;
    margin-bottom:  14px;
}


/* === QUESTION SHELLS — GREY BOX + BLUE LEFT ACCENT (Marc round-6 #1, round-7) */
/* Every question sits in a soft grey card with a blue (theme --sky-selected)
   left accent by default. .field-error-state swaps that accent to red (see
   FIELD ERROR STATE below) — it does NOT change the card colour, just the bar.
   On Olami sites --sky-selected is reddish, so the default accent themes
   automatically. Extra bottom padding leaves room for the bottom-right
   .fl-badge (Required / MM Only / Check all that apply). */
.formGroupRight[style*="border:1px solid"] {
    border: none !important;
    border-left: 4px solid var(--sky-selected) !important;   /* same blue as the bubbles */
    background-color: var(--sky-card) !important;   /* soft grey-lavender card */
    border-radius: 10px !important;
    /* 34px bottom strip reserves a clear lane for the bottom-right badge
       (Required / Only shown to matchmaker / Check all that apply) so it can't
       overlap the last row of bubbles (Marc round-10 #1/#2). */
    padding: 12px 14px 34px 14px !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    /* whisper of shadow so each card lifts off the brighter page bg (round-12) */
    box-shadow: 0 1px 3px rgba(33, 52, 77, 0.08) !important;
    overflow: visible !important;
    position: relative !important;          /* anchor the absolute .fl-badge */
}

/* The family-background field has inline padding:10px 12px 10px 0 (left:0)
   which pushed its label flush against the left edge. Re-inset. */
.formGroupRight[style*="padding:10px 12px 10px 0"] {
    padding-left: 4px !important;
}


/* === QUESTION LABEL — STATIC, TOP OF BOX, BLACK, BOLD ====================== */
/* Override the floating-label-fieldset-look behaviour: with no border to float
   over, the label just sits at the top of its question block as normal text.
   Small padding-top + padding-left (per Marc/Danielle round-5) so the title
   isn't flush against the imaginary edge of the question block. */
.formGroupRight[style*="border:1px solid"] > .radio-group > span:first-child,
.formGroupRight[style*="border:1px solid"] > span.fl-label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    padding: 3px 0 8px 3px !important;
    margin: 0 !important;
    color: var(--sky-question) !important;
    font-family: var(--sky-font) !important;
    font-weight: 700 !important;            /* bolded variant — black, bold */
    font-size: 12px !important;
    line-height: 1.4 !important;
    z-index: auto !important;
    white-space: normal !important;
    pointer-events: auto !important;
    display: block !important;
    width: 100% !important;
    flex: 1 0 100% !important;              /* force a full-width row inside .radio-group flex */
    max-width: 100% !important;
}

/* Required-field indicator. The wrapper rewrites trailing single "*" on
   question labels into <span class="req-star">*</span> so we can color it
   without coloring the rest of the question. */
.req-star {
    color:        var(--sky-error) !important;   /* rose-pink (Danielle 2026-05-21) — pops against the label without the clashing brick red */
    font-weight:  700 !important;
    margin-left:  2px !important;
    font-size:    13px !important;
    display:      inline !important;
}

/* BOTTOM-RIGHT BADGES (Marc round-6 #2/#3). member-form.js appends a
   .fl-badge to each bordered shell:
     - "**" label            → "Only shown to <matchmaker>"  (.fl-badge-mm)
     - "*" label + checkboxes → "Required - Check all that apply" (.fl-badge-req)
     - "*" label              → "Required"                    (.fl-badge-req)
     - checkboxes only        → "Check all that apply"        (.fl-badge-check)
   On validation error, highlightErrors() rewrites the text to "Mandatory"/
   "Invalid" and adds .fl-badge-error.
   We REVERSED the earlier hide and instead anchor the badge to the bottom-
   right of the grey card. The card has 26px bottom padding (above) so the
   badge tucks into that strip without overlapping the answers. */
.formGroupRight[style*="border:1px solid"] > .fl-badge {
    position: absolute !important;
    bottom: 9px !important;
    right: 14px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 1px 8px !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: inline-block !important;
}
/* Default + "Required"/"Check all" badges: muted grey so they're informative
   but quiet against the grey card. */
/* Danielle 2026-05-21: ALL right-side field labels (Required / Check all that
   apply / 500 characters / Only shown to matchmaker) should be the SAME color —
   unified to the blue --sky-badge. */
.formGroupRight[style*="border:1px solid"] > .fl-badge,
.formGroupRight[style*="border:1px solid"] > .fl-badge-req,
.formGroupRight[style*="border:1px solid"] > .fl-badge-check {
    color: var(--sky-badge) !important;
}
/* MM-only badge: same blue as the rest, kept italic as a visibility note. */
.formGroupRight[style*="border:1px solid"] > .fl-badge-mm {
    color: var(--sky-badge) !important;
    font-style: italic !important;
}
/* Error state badge ("Mandatory" / "Invalid"): brick red to match the
   error left-accent. */
.formGroupRight[style*="border:1px solid"] > .fl-badge-error {
    color: var(--sky-error) !important;
    font-weight: 700 !important;
}


/* === RADIO-GROUP LAYOUT — label on its own row, bubbles wrap below ========= */
/* Use flex-row + wrap (NOT flex-column) so this works for BOTH markup patterns:
     (a) <div class="radio-group"><span>label</span><div class="radio-bubble">…</div>… </div>
         (e.g. Ethnicity, Are you a Baal Teshuva — bubbles are direct children)
     (b) <div class="radio-group"><span>label</span><div style="display:flex"><div class="radio-bubble">…</div>…</div></div>
         (e.g. Are you a Cohen, Religious orientation — bubbles in an inner wrapper)
   The first-span :first-child rule above gives the question label flex:1 0 100%
   so it forces a line break before the bubbles in either case.
   align-items: flex-start so a multi-line bubble doesn't push its row neighbours
   vertically (was producing the uneven gap on "Mother and maternal grandmother
   Jewish?"). */
.radio-group {
    display:        flex !important;
    flex-direction: row !important;
    flex-wrap:      wrap !important;
    align-items:    flex-start !important;
    gap:            8px 10px !important;          /* uniform row + column gap */
    grid-template-columns: none !important;       /* defeats inline display:grid */
}
.radio-group > div[style*="display:flex"],
.radio-group > div[style*="display: flex"],
.radio-group > div[style*="display:grid"],
.radio-group > div[style*="display: grid"] {
    display:        flex !important;
    flex-wrap:      wrap !important;
    align-items:    flex-start !important;
    gap:            8px 10px !important;
    width:          100% !important;
    grid-template-columns: none !important;
}


/* === RADIO BUBBLES — white, gray border, slate-blue when selected ========== */
/* Width strategy: every bubble in this codebase has an inline
   style="width:Xpx" (and so does its <label>). The inline value is usually
   smaller than the nowrap-text width, which combined with member-form.css's
   `min-width: 0 !important` on the label lets the text overflow the bubble.
   We override with min-width:max-content so the bubble can never be narrower
   than its own text — content always fits.
   Font dropped to 12px so long labels like "No, mother and maternal
   grandmother not Jewish" stay inside a typical column without forcing the
   bubble off-screen. Mobile fallback below allows wrap so the bubble can
   never exceed the viewport. */
.radio-bubble {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    background-color: var(--sky-bubble-bg) !important;
    border:           1px solid var(--sky-bubble-border) !important;
    color:            var(--sky-answer) !important;
    width:            auto !important;
    min-width:        max-content !important;
    max-width:        none !important;
    flex:             0 0 auto !important;
    height:           30px !important;
    min-height:       30px !important;
    /* 31-07-2026 Jack+Claude: padding moved OFF the bubble and ONTO the label (below).
       The bubble's 14px side padding belonged to no label, so ~30px of every bubble
       swallowed clicks: measured on ProfileStep4, "Do you have a Get?" Yes = 51px bubble
       with a 21px label, i.e. 60% of the control was dead. Reported as "value is not
       clickable". Total width is unchanged - the same 14+14 now sits inside the label,
       so the whole bubble interior activates the radio. */
    padding:          0 !important;
    border-radius:    24px !important;
    white-space:      nowrap !important;
    box-sizing:       border-box !important;
    transition:       background-color 0.18s ease,
                      border-color     0.18s ease,
                      color            0.18s ease !important;
}
.radio-bubble:hover {
    background-color: #f4fafd !important;
    border-color:     var(--sky-selected) !important;
}
.radio-bubble label {
    color:        var(--sky-answer) !important;
    font-size:    12px !important;
    font-weight:  400 !important;
    font-family:  var(--sky-font) !important;
    white-space:  nowrap !important;
    line-height:  1.2 !important;
    height:       100% !important;
    /* 31-07-2026: label now fills the bubble and owns the side padding, so the entire
       bubble is a hit target (see the note on .radio-bubble above). Layout-neutral. */
    width:        100% !important;
    min-width:    0 !important;
    max-width:    none !important;
    padding:      0 14px !important;
    border-radius: 24px !important;
    box-sizing:   border-box !important;
    display:      inline-flex !important;
    align-items:  center !important;
    justify-content: center !important;
    margin:       0 !important;
    overflow:     visible !important;
}

/* Hide the legacy <BR> tags scattered between bubbles in the rendered markup
   (e.g. "Yes</label></div><BR><BR><div class=radio-bubble>...") — they were
   doing line-break duty in a non-flex layout but now they just add empty
   inline slots that flex tries to lay out. With flex-wrap doing the wrapping,
   these BRs are pure noise. */
.radio-group br,
.radio-group > div[style*="display:flex"] > br,
.radio-group > div[style*="display: flex"] > br,
.radio-group > div[style*="display:grid"] > br,
.radio-group > div[style*="display: grid"] > br {
    display: none !important;
}

/* === FLUID BUBBLES — self-sizing at EVERY width, no breakpoints ============
   25-08-2026 Jack+Claude. This replaces the old 600px/480px media queries,
   which snapped between "always one line" and "always allowed to wrap" and so
   misbehaved between the two — a long label overflowed at 500px but a short
   one wasted a whole row at 479px.

   The whole trick is `min-width: min(max-content, 100%)`:
     * label fits on one line  -> min-width resolves to max-content, the bubble
       is exactly as wide as its text, and `white-space: normal` never gets a
       chance to wrap anything. Identical to the old desktop look.
     * label is wider than the row -> min-width resolves to 100%, the bubble
       takes the full row and the text wraps inside, balanced across its lines.
   No viewport thresholds, so it behaves correctly at ANY container width —
   phone, split-screen tablet, or a narrow card on desktop. */
.radio-bubble {
    /* 26-08: was `min-width: min(max-content, 100%)`. A PERCENTAGE min-width has
       to resolve against the containing block, and inside a shrink-to-fit or
       out-of-flow ancestor that width is indefinite, so min() fell back to
       max-content and long options blew past the card (ProfileStep6's
       "Share information with all Matchmakers..." measured 560px in a 390px
       phone and scrolled the page sideways).
       `width:max-content` + `max-width:100%` says the same thing — be exactly as
       wide as the text, never wider than the row — but max-width on a flex item
       resolves against the flex line, which is always definite. */
    width:       max-content !important;
    min-width:   0 !important;
    max-width:   100% !important;
    height:      auto !important;
    min-height:  30px !important;
    flex:        0 1 auto !important;          /* may shrink, never stretches */
    box-sizing:  border-box !important;        /* borders inside the 100% cap, or it overflows by 2px */
}
.radio-bubble label {
    white-space: normal !important;            /* only ever wraps when capped above */
    text-align:  center !important;
    line-height: 1.25 !important;
    padding:     5px 14px !important;          /* vertical padding for the wrapped case */
    overflow-wrap: anywhere;                   /* an unbroken long word still can't overflow */
}
@supports (text-wrap: balance) {
    .radio-bubble label { text-wrap: balance; }  /* even line lengths when it does wrap */
}
.radio-bubble input[type="radio"]:checked  + label,
.radio-bubble input[type="checkbox"]:checked + label {
    background-color: var(--sky-selected) !important;
    color:            var(--sky-on-blue)  !important;
    font-weight:      400                 !important;
    border-radius:    28px;
}
.radio-bubble:has(input:checked) {
    background-color: var(--sky-selected) !important;
    border-color:     var(--sky-selected) !important;
}
.mmSForm .radio-bubble {
    background-color: var(--sky-bubble-bg) !important;
}


/* === COLLAPSED PICKER — "your answer + Change" ==============================
   25-08-2026 Jack+Claude (Marc). A 13-option question is a wall of bubbles for
   someone who only came to edit one other field. When an answer is already
   saved we show just that answer plus a Change button; the full bubble set
   opens on demand and closes again once a new answer is picked.
   Markup: .rfPick > (.rfSummary + .rfOptions). JS: window.syasPickerInit in
   css/member-form.js. Generic on purpose — reusable for any long bubble list. */

/* === PHANTOM WIDTH FROM HIDDEN QUESTIONS ===================================
   25-08-2026 Jack+Claude. Legacy pages hide a not-yet-applicable question with
   inline `position:absolute; visibility:hidden` (so the JS gates can reveal it
   later). An absolutely-positioned box is out of flow, so it sizes to its OWN
   content and keeps its static-position LEFT offset — neither of which the
   viewport constrains. EditReligious's hidden Shabbat Observance row measured
   423px inside a 390px phone; MemberSignup's hidden rows measured 370px
   starting at x=37 (right edge 407). Both dragged documentElement.scrollWidth
   past the viewport, so these pages scrolled sideways on a phone because of
   questions nobody could see.
   Collapse them to zero and clip — invisible content cannot need space.
   displayRow(id,'show') rewrites the inline style to
   `position:relative; visibility:visible`, so this selector stops matching the
   instant a row is revealed (verified in MemberSignup's own displayRow). */
/* The leading `html` is load-bearing: MemberSignup's own inline <style> carries
   `.sec-card .form-group{width:100% !important;max-width:none !important}` at the
   SAME specificity but later in the cascade, so it would win the tie. The extra
   element selector puts this rule above it without needing a page-specific hack. */
html .form-group[style*="visibility:hidden"],
html .form-group[style*="visibility: hidden"],
html .form-group[style*="visibility:Hidden"],
html .form-group[style*="visibility: Hidden"] {
    width:     0 !important;
    max-width: 0 !important;
    overflow:  hidden !important;
}
/* ...and the bubbles inside it. A percentage min-width resolves against the
   CONTAINING BLOCK, not the clipped parent, so inside an out-of-flow row
   `min(max-content, 100%)` still picks max-content and the longest option
   ("Keep things like Kiddush, Shabbat dinner and...") measures 391px. These
   rows are invisible, so let their bubbles shrink to nothing instead. The
   selector stops matching the moment the JS gate reveals the row. */
.mmSForm .form-group[style*="visibility:hidden"] .radio-bubble,
.mmSForm .form-group[style*="visibility: hidden"] .radio-bubble,
.mmSForm .form-group[style*="visibility:Hidden"] .radio-bubble {
    min-width: 0 !important;
}

/* === LONG OPTION LISTS BECOME AN ALIGNED MATRIX ============================
   26-08-2026 Jack+Claude (Marc). Flex-wrap sizes every bubble to its own text,
   so a 14-option question ends as a ragged pill cloud with dead space on the
   right — and it implies a ranking by word length that does not exist. These
   options are peers: none outranks another, so none should be wider. Past six
   options the row switches to an equal-column grid that runs edge to edge.
   Short questions (Yes/No, Male/Female, Title) keep the flex pills, because
   there the compact shape IS the information.
   `:has(> :nth-child(7))` = "seven or more children" — already relied on
   elsewhere on these pages, so no new browser requirement. */
/* :not([hidden]) guards on both: `display:grid !important` would otherwise out-specify the
   [hidden] rules and a collapsed picker could not hide its own options. */
/* Keyed on the BUBBLES, not on an ancestor class: requiring `.radio-group > ` or
   an inline display:flex missed Cultural Background, Sect and the ProfileStep6 /
   EditMatchCriteria rows, which wrap their bubbles differently. Only DIRECT
   children count toward :nth-child, so this can only ever match the real row. */
/* The :not([style*="display:none"]) guards are load-bearing. `display:grid !important` beats an
   INLINE display:none, and several controls hide themselves that way rather than with [hidden]:
   Family Religious Background swaps between four sets that share one input name, and the
   Location-of-match state lists open per country. Without these, every hidden set stayed on
   screen at once - Marc saw four Family Religious Background lists stacked. */
.mmSForm div:not([hidden]):not([style*="display:none"]):not([style*="display: none"]):has(> .radio-bubble:nth-child(7)),
.rfOptions:not([hidden]) > div:not([style*="display:none"]):not([style*="display: none"]):has(> .radio-bubble:nth-child(7)) {
    display:               grid !important;
    /* The track floor is itself fluid: clamp(140px, 30%, 200px). On a phone 30%
       of the row is under 140px so the floor stays 140 and two columns fit; on a
       desktop card it rises to the 200px ceiling, giving four wide columns that
       hold "Modern Orthodox (Middle of the road)" on one line. One expression,
       no breakpoints, and it reads the CONTAINER rather than the viewport. */
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 30%, 220px), 1fr)) !important;
    grid-auto-rows:        1fr !important;   /* every cell the same height — a real matrix */
    gap:                   8px 10px !important;
    align-items:           stretch !important;
    width:                 100% !important;
}
.mmSForm div:has(> .radio-bubble:nth-child(7)) > .radio-bubble,
.rfOptions > div:has(> .radio-bubble:nth-child(7)) > .radio-bubble {
    width:     100% !important;
    min-width: 0 !important;   /* the column is the width now */
    max-width: none !important;
}
/* The help icon is an aside, not an option: it must not be stretched into a
   full-width cell (that dealt it a whole orphan row under the matrix) and must
   not be pinned over a bubble. Let it sit in the next free cell of the last row,
   at its own natural size. */
.mmSForm div:has(> .radio-bubble:nth-child(7)) > a.religious_modal_icon,
.rfOptions > div:has(> .radio-bubble:nth-child(7)) > a.religious_modal_icon,
.mss-bubbles:has(> :nth-child(7)) > a.religious_modal_icon {
    justify-self: start;
    align-self:   center;
}

/* === RELIGIOUS DEFINITIONS MODAL — Sky ======================================
   26-08-2026 Jack+Claude (Marc). The bootstrap `.home-modal` shipped a solid
   blue header bar and a blue circular X, which belonged to the old site theme
   and looked like a different product bolted onto these pages. Same shape as the
   signup page's Terms panel: white surface, the 3px #2a6ebb rule under the
   title, ink-blue heading, quiet close button. Scoped to .home-modal, and this
   stylesheet only loads on the signup/step/edit pages. */
.home-modal .modal-content {
    border:        0 !important;
    border-radius: 14px !important;
    overflow:      hidden !important;
    box-shadow:    0 18px 50px rgba(16,38,63,.32) !important;
}
.home-modal .modal-header {
    background:    var(--sky-bubble-bg) !important;
    border-bottom: 3px solid var(--sky-ink) !important;   /* 30-08-2026: was raw #2a6ebb - same ink-navy family as --sky-ink, not --sky-badge (theming-completeness sweep) */
    padding:       16px 20px !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           12px !important;
}
.home-modal .modal-header .modal-title,
.home-modal .modal-header h3 {
    flex:         1 !important;
    margin:       0 !important;
    font-family:  var(--sky-font) !important;
    font-size:    19px !important;
    font-weight:  800 !important;
    color:        var(--sky-ink) !important;   /* 30-08-2026: was raw #1f4e79 (theming-completeness sweep) */
    letter-spacing: .2px !important;
}
.home-modal .modal-header .nav-icons { margin: 0 !important; }
.home-modal .modal-header .close,
.home-modal .modal-header a.close {
    opacity:      1 !important;
    color:        var(--sky-muted) !important;
    background:   transparent !important;
    border:       0 !important;
    border-radius: 8px !important;
    padding:      2px 6px !important;
    font-size:    22px !important;
    line-height:  1 !important;
    text-shadow:  none !important;
}
.home-modal .modal-header .close:hover,
.home-modal .modal-header a.close:hover,
.home-modal .modal-header .close:focus-visible {
    color:      var(--sky-ink) !important;   /* 30-08-2026: was raw #1f4e79 (theming-completeness sweep) */
    background: var(--sky-bg) !important;      /* was raw #eef4fa */
    outline:    none !important;
}
.home-modal .modal-header .close i,
.home-modal .modal-header a.close i { color: inherit !important; }
.home-modal .modal-body {
    font-family: var(--sky-font) !important;
    font-size:   13.5px !important;
    line-height: 1.65 !important;
    color:       var(--sky-answer) !important;
    padding:     18px 22px 22px !important;
}
.home-modal .modal-body b,
.home-modal .modal-body strong { color: var(--sky-ink) !important; }   /* 30-08-2026: was raw #1f4e79 (theming-completeness sweep) */
.home-modal .modal-body .text-info {
    color:       var(--sky-ink) !important;   /* was raw #1f4e79 */
    font-family: var(--sky-font) !important;
    font-weight: 800 !important;
}
.home-modal .modal-body .lang-selector-table > div { margin-bottom: 4px !important; }
.home-modal .modal-body br { line-height: .6 !important; }

.rfPick { width: 100%; }
/* The bubbles' own flex row used to be a direct child of .radio-group (and got
   its width/gap from the rule up top). Inside .rfOptions it needs them here. */
.rfOptions > div[style*="display:flex"],
.rfOptions > div[style*="display: flex"] {
    display:     flex !important;
    flex-wrap:   wrap !important;
    align-items: flex-start !important;
    gap:         8px 10px !important;
    width:       100% !important;
}
.rfSummary {
    display:     flex !important;
    flex-wrap:   wrap;
    align-items: center;
    gap:         10px;
    width:       100%;
}
.rfSumValue {
    display:          inline-flex;
    align-items:      center;
    gap:              7px;
    background-color: var(--sky-selected);
    border:           1px solid var(--sky-selected);
    color:            var(--sky-on-blue);
    font-family:      var(--sky-font);
    font-size:        12px;
    font-weight:      500;
    line-height:      1.25;
    padding:          6px 15px;
    border-radius:    24px;
    max-width:        100%;
    overflow-wrap:    anywhere;
}
/* Tick drawn in CSS — no image, no icon font, survives the artifact/CSP rules */
.rfSumValue::before {
    content:       "";
    flex:          0 0 auto;
    width:         6px;
    height:        10px;
    margin-top:    -3px;
    border:        solid var(--sky-on-blue);
    border-width:  0 2px 2px 0;
    transform:     rotate(45deg);
}
.rfSumValue.is-empty {
    background-color: transparent;
    border-style:     dashed;
    border-color:     var(--sky-bubble-border);
    color:            var(--sky-muted);
    font-style:       italic;
}
.rfSumValue.is-empty::before { display: none; }

.rfChange {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    background:       var(--sky-bubble-bg);
    border:           1px solid var(--sky-selected);
    color:            var(--sky-badge);
    font-family:      var(--sky-font);
    font-size:        12px;
    font-weight:      600;
    line-height:      1;
    padding:          7px 14px;
    border-radius:    24px;
    cursor:           pointer;
    transition:       background-color .15s ease, color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance:       none;
}
.rfChange:hover,
.rfChange:focus-visible {
    background-color: var(--sky-selected);
    color:            var(--sky-on-blue);
    box-shadow:       0 1px 4px rgba(42,93,159,.28);
    outline:          none;
}
/* Two-arrow "swap" glyph, pure CSS */
.rfChange::before {
    content:      "\21C4";
    font-size:    14px;
    line-height:  1;
    font-weight:  400;
}
/* Multi-select questions stay open while you tick several, so they get a Done
   button under the options instead of collapsing on the first click. */
/* 27-08 (Jack): Done became an ICON-ONLY collapse button (chevron-up SVG supplied by the JS),
   right-aligned via margin-left:auto. display:flex makes the button block-level so the auto
   margin actually pushes it right; the [hidden] pin below stays load-bearing BECAUSE of that
   display rule (an author display beats the UA [hidden] default). */
.rfDone {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            42px;
    min-width:        42px;
    height:           30px;
    padding:          0;
    margin-top:       10px;
    margin-left:      auto;
    background-color: var(--sky-go-soft);
    border-color:     var(--sky-go);
    color:            var(--sky-go-ink);
}
.rfDone svg { display: block; }
.rfDone::before { content: none; }   /* kill the inherited .rfChange swap-arrows glyph - the SVG is the whole icon */
.rfDone:hover,
.rfDone:focus-visible {
    background-color: var(--sky-go-hover);
    border-color:     var(--sky-go-hover);
    color:            var(--sky-on-blue);
    box-shadow:       0 1px 4px rgba(89,185,143,.32);
}
.rfDone[hidden] { display: none !important; }

/* Open/close. [hidden] alone is unreliable here because member-form.css sets
   display on .radio-group descendants, so pin it. */
.rfOptions[hidden] { display: none !important; }
.rfSummary[hidden] { display: none !important; }
.rfOptions {
    width:     100%;
    animation: rfFade .18s ease both;
}
@keyframes rfFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rfOptions { animation: none; }
    .rfChange  { transition: none; }
}

/* Kill the legacy ripple/inset-shadow ring from input[type=radio]:checked */
input[type="radio"]:checked + label:before,
input[type="radio"]:checked + label:after {
    box-shadow: none !important;
    background: transparent !important;
    animation: none !important;
}


/* === FREEFORM FIELDS (text, textarea, select) =============================== */
/* These selectors must MATCH OR BEAT member-form.css's specificity. That file
   intentionally strips the input/textarea border, background, and box-shadow
   when they live inside a .formGroupRight[style*="border:1px solid"] — it
   was relying on the outer shell's border for the visible field outline.
   We've removed the outer border for this theme, so we need to re-paint the
   border ON the input itself, using a selector at least as specific as
   member-form.css uses (.formGroupRight[style*=...] textarea — specificity
   0,2,1). */
/* Paint the border on the INPUT itself (textarea/text-input). The
   .labelInputWrapper (if present) is forced TRANSPARENT — otherwise the
   wrapper AND the input would each draw their own outline, producing the
   "double border" look. We rely on the input's own border alone. */
/* 26-08 (Marc: "text in the essay / job description textareas shrinks on mouseover"): these
   pinned 13px INCLUDING :hover while the resting size had become 14px, so the text lost a
   pixel the moment the mouse touched it - and some textareas sat at 13px even at rest,
   so essays were a different size from every input beside them. 14px everywhere now,
   matching MemberSignup and the inputs. Same inversion as the synagogue box (#24). */
.formGroupRight[style*="border:1px solid"] textarea,
.formGroupRight[style*="border:1px solid"] textarea:hover,
.formGroupRight[style*="border:1px solid"] textarea:active,
.formGroupRight[style*="border:1px solid"] textarea.form-control,
.formGroupRight[style*="border:1px solid"] textarea.form-control:hover,
.formGroupRight[style*="border:1px solid"] textarea.form-control:active,
.formGroupRight[style*="border:1px solid"] input[type="text"],
.formGroupRight[style*="border:1px solid"] input[type="text"]:hover,
.formGroupRight[style*="border:1px solid"] input[type="text"]:active,
.formGroupRight[style*="border:1px solid"] input[type="email"],
.formGroupRight[style*="border:1px solid"] input[type="email"]:hover,
.formGroupRight[style*="border:1px solid"] input[type="email"]:active,
.formGroupRight[style*="border:1px solid"] input[type="tel"],
.formGroupRight[style*="border:1px solid"] input[type="tel"]:hover,
.formGroupRight[style*="border:1px solid"] input[type="tel"]:active,
.formGroupRight[style*="border:1px solid"] input[type="number"],
.formGroupRight[style*="border:1px solid"] input[type="number"]:hover,
.formGroupRight[style*="border:1px solid"] input[type="number"]:active,
.formGroupRight[style*="border:1px solid"] input.form-control,
.formGroupRight[style*="border:1px solid"] input.form-control:hover,
.formGroupRight[style*="border:1px solid"] input.form-control:active,
#frmFamilyReligiousBGDesc,
#frmFamilyReligiousBGDesc:hover,
#frmFamilyReligiousBGDesc:active {
    background:       #ffffff !important;
    background-color: #ffffff !important;
    border:           1px solid var(--sky-bubble-border) !important;
    border-width:     1px !important;        /* keep width constant across states — prevents 1px layout shift on hover */
    border-style:     solid !important;
    border-color:     var(--sky-bubble-border) !important;
    border-radius:    10px !important;
    box-shadow:       none !important;
    color:            var(--sky-answer) !important;
    /* 26-08 round 2: this was the LAST surviving 13px pin. It is the only block whose
       selector list carries :hover for input[type=number], so the age boxes on
       ProfileStep6 / EditMatchCriteria rested at 14px and dropped to 13px the moment
       the mouse touched them. Every state is 14px now. */
    font-size:        14px !important;
    font-family:      var(--sky-font) !important;
    padding:          8px 12px !important;
    width:            100% !important;
    /* 24-08-2026 Jack+Claude: height:auto !important REMOVED - it instantly snapped back the
       browser's native drag-resize (the handle moved, the height reverted) and fought the essay
       auto-grow. Textareas now honour rows= plus the user's drag / the auto-grow inline height. */
    outline:          0 !important;
}

/* labelInputWrapper — force completely transparent so it never draws an
   outline. Some markup wraps the <input> in this; without this rule, the
   wrapper draws ITS own border AND the input draws its own border = doubled. */
.formGroupRight[style*="border:1px solid"] .labelInputWrapper,
.formGroupRight[style*="border:1px solid"] .labelInputWrapper:hover,
.formGroupRight[style*="border:1px solid"] .labelInputWrapper:focus-within {
    background:       transparent !important;
    background-color: transparent !important;
    border:           0 !important;
    border-width:     0 !important;
    border-style:     none !important;
    border-color:     transparent !important;
    border-radius:    0 !important;
    box-shadow:       none !important;
    outline:          0 !important;
    padding:          0 !important;
    margin:           0 !important;
}

.formGroupRight[style*="border:1px solid"] textarea,
.formGroupRight[style*="border:1px solid"] textarea:hover,
.formGroupRight[style*="border:1px solid"] textarea:active,
.formGroupRight[style*="border:1px solid"] textarea.form-control,
.formGroupRight[style*="border:1px solid"] textarea.form-control:hover,
.formGroupRight[style*="border:1px solid"] textarea.form-control:active,
#frmFamilyReligiousBGDesc,
#frmFamilyReligiousBGDesc:hover,
#frmFamilyReligiousBGDesc:active {
    padding:        10px 12px !important;   /* 28-08: the 24px bottom strip is gone - counters moved BELOW the box (Jack: inside counters overlapped wrapped text on phones) */
    min-height:     90px !important;
    resize:          vertical !important;
}

/* 28-08 (Jack): character counters live BELOW the textarea now, one per box, never inside it.
   The old scheme parked the counter absolutely inside the textarea's reserved bottom padding -
   on a phone the wrapped text ran straight into it (ProfileStep5 relocate box, Marc's shot).
   This one rule normalises EVERY counter variant - the generic .charCount spans, the legacy
   #charCount (family background), #jobDescCharCount, and the Step7/EditAboutMyself
   lbl_frm* divs - to the same look: static, below the box, left-aligned, muted, 12px
   (the look Jack pointed at on ProfileStep7). The position resets carry !important because
   member-form.css and page-inline styles both position:absolute these. */
.charCount,
#charCount,
#jobDescCharCount,
[id^="lbl_frm"] {
    position:   static !important;
    display:    block !important;
    bottom:     auto !important;
    right:      auto !important;
    left:       auto !important;
    top:        auto !important;
    text-align: left !important;
    margin:     4px 0 0 2px !important;
    font-size:  12px !important;
    color:      var(--sky-muted) !important;
    background: transparent !important;
    pointer-events: none !important;
}

/* Focus state: change BORDER COLOR only — no box-shadow halo.
   IMPORTANT (Marc round-7 #3): member-form.css has
   "#frmFamilyReligiousBGDesc:focus { padding: 4px 0 24px !important }" — note
   padding-LEFT: 0. That selector has specificity (1,1,0), the same as ours, so
   on focus it was winning the cascade and collapsing the textarea's left
   padding (typed text jumped flush-left after the user clicked in). We pin
   padding-left + padding-right here so the left inset survives focus. */
.formGroupRight[style*="border:1px solid"] textarea:focus,
.formGroupRight[style*="border:1px solid"] textarea.form-control:focus,
.formGroupRight[style*="border:1px solid"] input[type="text"]:focus,
.formGroupRight[style*="border:1px solid"] input.form-control:focus,
#frmFamilyReligiousBGDesc:focus {
    border:           1px solid var(--sky-selected) !important;
    border-color:     var(--sky-selected) !important;
    box-shadow:       none !important;
    outline:          none !important;
    background:       #ffffff !important;
    background-color: #ffffff !important;
    padding-left:     12px !important;       /* preserve left inset on focus */
    padding-right:    12px !important;
}
/* CONSISTENT PADDING ACROSS ALL STATES (Marc round-8).
   member-form.css's :focus / :hover / :active variants use a smaller
   "padding: 4px 10px" — so on click/hover the input's VERTICAL padding
   dropped from our 8px to 4px and the box visibly shrank (and the textarea's
   left inset collapsed). We pin the FULL padding (all four sides) for every
   interaction state, split by element type because the textarea needs the
   24px bottom strip for the charCount while inputs don't.
   These tie member-form.css on specificity and load later → win. */
.formGroupRight[style*="border:1px solid"] input[type="text"],
.formGroupRight[style*="border:1px solid"] input[type="text"]:hover,
.formGroupRight[style*="border:1px solid"] input[type="text"]:active,
.formGroupRight[style*="border:1px solid"] input[type="text"]:focus,
.formGroupRight[style*="border:1px solid"] input[type="email"],
.formGroupRight[style*="border:1px solid"] input[type="tel"],
.formGroupRight[style*="border:1px solid"] input[type="number"],
.formGroupRight[style*="border:1px solid"] input.form-control,
.formGroupRight[style*="border:1px solid"] input.form-control:hover,
.formGroupRight[style*="border:1px solid"] input.form-control:active,
.formGroupRight[style*="border:1px solid"] input.form-control:focus {
    padding:    8px 12px !important;
    /* 26-08 (Marc: "on mouseover the synagogue box shrinks a bit"): this used to pin 13px to
       stop member-form.css bumping to 14. The pin had since inverted - the RESTING state
       measured 14px (the Sky consistency pass) while this rule still forced 13 on :hover, so
       the text and the whole box lost a pixel the moment the mouse touched it. Both states are
       14px now, which is also what MemberSignup uses. */
    font-size:  14px !important;
    height:     auto !important;
}
.formGroupRight[style*="border:1px solid"] textarea,
.formGroupRight[style*="border:1px solid"] textarea:hover,
.formGroupRight[style*="border:1px solid"] textarea:active,
.formGroupRight[style*="border:1px solid"] textarea:focus,
.formGroupRight[style*="border:1px solid"] textarea.form-control,
.formGroupRight[style*="border:1px solid"] textarea.form-control:hover,
.formGroupRight[style*="border:1px solid"] textarea.form-control:active,
.formGroupRight[style*="border:1px solid"] textarea.form-control:focus,
#frmFamilyReligiousBGDesc,
#frmFamilyReligiousBGDesc:hover,
#frmFamilyReligiousBGDesc:active,
#frmFamilyReligiousBGDesc:focus {
    padding:    10px 12px 24px 12px !important;
    font-size:  14px !important;
}

/* Fallback for any other plain form-control / inputs not inside the bordered
   shell (e.g. inside the .modal). Lower-specificity rules go last so the
   bordered-shell rules above always win when both match. */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background:    #ffffff !important;
    border:        1px solid var(--sky-bubble-border) !important;
    color:         var(--sky-answer) !important;
    border-radius: 10px !important;
    font-size:     14px !important;
    font-family:   var(--sky-font) !important;
    padding:       8px 12px !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--sky-selected) !important;
    box-shadow:   none !important;
    outline:      none !important;
}

/* member-form.css makes the placeholder transparent (since the floating legend
   doubled as the label). With our static label that's still fine — no
   functional issue — but unhide it just in case a field relies on it. */
.formGroupRight[style*="border:1px solid"] textarea::placeholder,
.formGroupRight[style*="border:1px solid"] input[type="text"]::placeholder,
#frmFamilyReligiousBGDesc::placeholder {
    color: #9ca3af !important;
}


/* === HELP ICON (?) ========================================================== */
a.religious_modal_icon {
    background-color: var(--sky-selected) !important;
    border-color:     var(--sky-selected) !important;
    color:            #ffffff !important;
}
a.religious_modal_icon:hover,
a.religious_modal_icon:focus {
    background-color: #ffffff !important;
    color:            var(--sky-selected) !important;
    border-color:     var(--sky-selected) !important;
}


/* === BADGES & CHAR COUNT ==================================================== */
.fl-badge  { color: var(--sky-badge) !important; }
.charCount { color: var(--sky-muted) !important; }   /* 28-08 unified with the below-box counter look */


/* === HIDE THE "Required" / "MM only" SUFFIXES ============================== */
/* The asterisk-key footer line that printed below the form. We also rely on a
   small inline script in the ASPX (sky-strip-suffix) to scrub trailing
   "*", "**", and "(MM VIEW ONLY)" from question labels. */
.sky-req-footer { display: none !important; }


/* === SUBMIT / CONTINUE BUTTON =============================================== */
/* The Continue button on these pages is an <a class="btn btn-blue">, NOT an
   <input type=submit> — so it kept the site's default strong blue. We add
   .btn-blue (and the matching Previous .btn-dark-gray) here so the action
   buttons use the theme's --sky-selected (same blue as the bubbles), reddish
   on Olami via the variable. */
.mmSForm input[type="submit"],
.mmSForm button[type="submit"],
.mmSForm .btn-primary,
.mmSForm a.btn-blue,
.mmSForm .btn-blue,
section.MMsignup input[type="submit"],
section.MMsignup button[type="submit"],
section.MMsignup a.btn-blue,
section.MMsignup .btn-blue {
    background:     var(--sky-selected) !important;
    border:         1px solid var(--sky-selected) !important;
    color:          #ffffff !important;
    font-family:    var(--sky-font) !important;
    font-weight:    600 !important;
    letter-spacing: 0.04em;
    border-radius:  28px !important;
    padding:        12px 48px !important;
    font-size:      15px !important;
    box-shadow:     0 4px 18px rgba(127, 169, 209, 0.40) !important;
    transition:     all 0.2s ease !important;
}
.mmSForm input[type="submit"]:hover,
.mmSForm button[type="submit"]:hover,
.mmSForm a.btn-blue:hover,
.mmSForm .btn-blue:hover,
.mmSForm a.btn-blue:focus,
section.MMsignup input[type="submit"]:hover,
section.MMsignup button[type="submit"]:hover,
section.MMsignup a.btn-blue:hover,
section.MMsignup a.btn-blue:focus {
    background:   var(--sky-selected-hover) !important;
    border-color: var(--sky-selected-hover) !important;
    color:        #ffffff !important;
    transform:    translateY(-1px) !important;
    box-shadow:   0 6px 22px rgba(127, 169, 209, 0.52) !important;
}

/* SECONDARY BUTTON — Cancel / Previous (Marc round-14).
   These are <a class="btn btn-dark-gray"> and kept the site's muddy grey-brown
   default, clashing with the clean Save button next to them. Restyle as a
   neutral "ghost" secondary: white pill, soft border, dark text — so the
   primary (blue Save/Continue) clearly leads and the pair looks intentional.
   Stays neutral on Olami too (no accent colour), which reads correctly beside
   the reddish primary. */
.mmSForm a.btn-dark-gray,
.mmSForm .btn-dark-gray,
.mmSForm .btn-default,
section.MMsignup a.btn-dark-gray,
section.MMsignup .btn-dark-gray {
    background:     #ffffff !important;
    border:         1px solid var(--sky-bubble-border) !important;
    color:          var(--sky-answer) !important;
    font-family:    var(--sky-font) !important;
    font-weight:    600 !important;
    letter-spacing: 0.04em;
    border-radius:  28px !important;
    padding:        12px 40px !important;
    font-size:      15px !important;
    box-shadow:     0 1px 3px rgba(33, 52, 77, 0.10) !important;
    transition:     all 0.2s ease !important;
}
.mmSForm a.btn-dark-gray:hover,
.mmSForm .btn-dark-gray:hover,
.mmSForm a.btn-dark-gray:focus,
.mmSForm .btn-default:hover,
section.MMsignup a.btn-dark-gray:hover,
section.MMsignup .btn-dark-gray:hover,
section.MMsignup a.btn-dark-gray:focus {
    background:   #eef2f7 !important;
    border-color: var(--sky-muted) !important;
    color:        var(--sky-answer) !important;
    transform:    translateY(-1px) !important;
    box-shadow:   0 3px 10px rgba(33, 52, 77, 0.14) !important;
}

/* === MOBILE: gap between the Save/Cancel (Continue/Previous) button pair ===== */
/* On phones the two action buttons wrap onto separate lines and TOUCH (the
   desktop layout separates them with &nbsp; horizontally, which does nothing
   once stacked). Give each button a small vertical margin so the stacked pair
   has breathing room. Applies to every ProfileStep and Edit page. (Jack 28-Jul-2026) */
@media (max-width: 767px) {
    .mmSForm a.btn-blue,
    .mmSForm a.btn-dark-gray,
    .mmSForm .btn-default,
    .mmSForm input[type="submit"],
    .mmSForm button[type="submit"],
    section.MMsignup a.btn-blue,
    section.MMsignup a.btn-dark-gray,
    section.MMsignup input[type="submit"],
    section.MMsignup button[type="submit"] {
        margin-top: 7px !important;
        margin-bottom: 7px !important;
    }
    /* Stack the pair with the PRIMARY (Save / Continue = .btn-blue) on TOP and the
       secondary (Cancel / Previous) below (Jack 28-Jul-2026). CSS-only reorder, mobile
       only — DOM order (secondary first) and desktop side-by-side layout are untouched.
       :has(> a.btn-blue) scopes this to the action-button row, not other .text-center blocks. */
    .mmSForm .text-center:has(> a.btn-blue),
    section.MMsignup .text-center:has(> a.btn-blue) {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mmSForm .text-center > a.btn-blue,
    section.MMsignup .text-center > a.btn-blue {
        order: -1;
    }
}


/* === VALIDATION ERROR SUMMARY =============================================== */
/* Repainted in muted brick-red — pink (#d63c87) from member-form.css clashed
   visually with the slate-blue palette. Same shape, calmer colors. */
/* 04-08-2026 Jack+Claude: ONE box, not a card-in-a-card. The old selector put the
   same accent+padding+shadow on BOTH #vsDiv and its inner .bg-danger, nesting two
   pink cards. Now the outer #vsDiv is an invisible wrapper (margin only) and the
   inner card fills its full footprint. Applies to every step + edit page. */
#vsDiv {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
    padding:       0 !important;
    box-shadow:    none !important;
}
#vsDiv .bg-danger,
#vsDiv .bg-danger.TT {
    background:       #fdf1f6 !important;
    background-color: #fdf1f6 !important;
    border:           none !important;
    border-left:      4px solid var(--sky-error) !important;
    border-radius:    0 10px 10px 0 !important;
    padding:          14px 18px 12px !important;
    box-shadow:       0 2px 8px rgba(210, 79, 134, 0.10) !important;
    color:            #7a2b52 !important;
}
.err-summary-heading {
    color:        var(--sky-error) !important;
    font-family:  var(--sky-font) !important;
    font-weight:  700 !important;
    font-size:    13px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.01em;
}
.err-summary-list li {
    color:      #6e2c4c !important;
    font-size:  13px !important;
    font-family: var(--sky-font) !important;
}
.err-summary-list li::before {
    color: var(--sky-error) !important;
}
.err-field {
    color:       var(--sky-error) !important;
    font-weight: 700 !important;
}


/* === FIELD ERROR STATES ===================================================== */
/* When validation fires (required field empty), the shell gets
   .field-error-state. Per Marc round-6 #1: KEEP the grey card, just add a
   red LEFT accent border. Don't tint the whole card — the left bar + red
   label + "Mandatory" badge are enough signal. */
.formGroupRight.field-error-state[style*="border:1px solid"] {
    background-color: var(--sky-card) !important;   /* same card fill as default */
    border:           none !important;
    border-left:      4px solid var(--sky-error) !important;
    border-radius:    10px !important;
    padding-left:     12px !important;
    box-shadow:       0 1px 3px rgba(33, 52, 77, 0.08) !important;
}
.formGroupRight.field-error-state[style*="border:1px solid"] > .radio-group > span:first-child,
.formGroupRight.field-error-state[style*="border:1px solid"] > span.fl-label {
    color: var(--sky-error) !important;
}
.formGroupRight.field-error-state[style*="border:1px solid"] .req-star {
    color: var(--sky-error) !important;
}
/* Inputs inside an errored shell — tint the border to brick-red as well so the
   field outline matches the label colour. */
.formGroupRight.field-error-state[style*="border:1px solid"] textarea,
.formGroupRight.field-error-state[style*="border:1px solid"] textarea.form-control,
.formGroupRight.field-error-state[style*="border:1px solid"] input[type="text"],
.formGroupRight.field-error-state[style*="border:1px solid"] input.form-control {
    border-color: rgba(210, 79, 134, 0.45) !important;
}


/* === MOBILE ================================================================= */
@media only screen and (max-width: 767px) {
    section.index_video.MMsignup.innerPage {
        background: var(--sky-bg) !important;
    }
    figure.mmSForm.profileStep {
        background: transparent !important;
        border:     none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding:    18px 10px 32px !important;
    }
    .formGroupRight[style*="border:1px solid"] {
        margin-top:    10px !important;
        margin-bottom: 10px !important;
        /* keep the same 34px bottom strip as desktop so the badge + charCount
           have a clear lane on mobile too (was 6px, which crowded them). */
        padding-bottom: 34px !important;
    }
    .formGroupRight[style*="border:1px solid"] > .radio-group > span:first-child,
    .formGroupRight[style*="border:1px solid"] > span.fl-label {
        font-size: 12px !important;
    }
    .radio-bubble label { font-size: 12px !important; }
    /* round-13: the char-counter placement is now unified (see the
       :has(#frmFamilyReligiousBGDesc) block above) — the textarea card is
       trimmed to 12px bottom padding on every viewport and the counter sits
       ~8px inside the textarea's bottom. No mobile-specific override needed. */
}


/* === DANIELLE 2026-05-21 FEEDBACK: footer grey + de-orange ================== */
/* #3 The footer band was beige (figure.footerBttm = #F4EADB). Danielle: use the
   grey used for the question backgrounds instead. */
figure.footerBttm { background: var(--sky-card) !important; }

/* #4 The legacy brand orange (#e66e3e) should no longer be used. Remap the
   orange accents that appear on the signup/profile pages to the Sky blue.
   Sitewide chrome that rides along on these pages: */
#installButton {
    background:   var(--sky-selected) !important;
    border-color: var(--sky-selected) !important;
}
#langDrop, #langDrop:hover, #langDrop:focus {
    color:            var(--sky-selected) !important;
    border-top-color: var(--sky-selected) !important;
}
#langDrop .glyphicon, #langDrop .glyphicon-chevron-down {
    color: var(--sky-selected) !important;
}

/* Photo uploader (ProfileStep3 "My Appearance" photo section + EditPhoto).
   NOTE: this uploader is a self-contained orange-themed component that Danielle
   expects to be handled in the planned photo redesign. This remaps its most
   visible orange accents (header bar, dropzone, browse/delete buttons, the "+",
   and the orange note text) to the Sky blue; a full restyle should land with
   that redesign. */
.uploadProfileImage      { border-color: var(--sky-selected) !important; }
.innerTitle              { background:   var(--sky-selected) !important; }
.browseBtn               { background:   var(--sky-selected) !important; }
a.deleteImage, .deleteImage { background: var(--sky-selected) !important; }
.plus, .plus::before     { color: var(--sky-selected) !important; }
.addImageInner span      { color: var(--sky-selected) !important; }


/* === 24-08-2026 Jack+Claude: CROSS-PAGE CONSISTENCY PASS (Marc/Jack) =========
   The Edit pages + MemberSignup wrappers now carry .profileStep too, so ONE
   scope styles signup, steps and edit pages alike. These rules pin the
   typography contract everywhere:
   - QUESTION labels: Sky font, 13px, bold, --sky-question slate
   - ANSWER bubbles stay 12px/400 (only the question is bold)
   - form inputs/selects/textareas: 14px (the mobile height-select 13px
     override still wins - it is later and equally !important)              */
html .mmSForm.profileStep .radio-group > span,
html .mmSForm.profileStep span.fl-label {
    font-family: var(--sky-font) !important;
    font-size:   12px !important;   /* canonical question size - Marc/Danielle round-5 spec */
    font-weight: 700 !important;
    color:       var(--sky-question) !important;
}
.mmSForm.profileStep .radio-bubble label {
    font-weight: 400 !important;
}
.mmSForm.profileStep input.form-control,
.mmSForm.profileStep select.form-control,
.mmSForm.profileStep textarea.form-control {
    font-size: 14px !important;
}


/* === 30-08-2026 Jack+Claude: UNIFIED PAGE HEADER (Lane A) ====================
   Styles the markup emitted by SinaiMemberUI.WriteStepHeader() (#37) - ONE header
   for MemberSignup, ProfileStep1-7, CreateMaleMember and the Sky Edit pages.
   Spacing is component-relative on purpose (what the component ADDS), so the
   numbers cannot drift page by page:
     +6px above the eyebrow   (figure.mmSForm.profileStep already pays 12px
                               padding-top -> 18px of visual air)
      4px eyebrow  -> title
      8px title    -> accent bar
      6px bar      -> helper
     18px desktop / 14px mobile below the whole header to the first card.
   Breakpoint matches the rest of this file (max-width:767px).
   The legacy 50px `.progressHeader { margin:50px 0 0 0 }` in
   _layouts/css/englishStyle.css:3322-3324 is NOT edited (that file is shared and
   out of this lane): the existing Sky `.progressHeader { margin-top:0 !important }`
   override further up THIS file already beats it on specificity + !important, and
   this header sits ABOVE the progress bar, so no !important war is needed here. */
.syas-step-header {
    position: relative;
    margin: 6px 0 18px;
}
.syas-eyebrow {
    font-family:    var(--sky-font);
    font-size:      12px;              /* 12px floor - no sub-12px text (27-08 audit rule) */
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--sky-muted);
    line-height:    1.3;
    margin:         0 0 4px;
}
/* Hebrew has no letter case and tracked Hebrew breaks. TranslateWords.js stamps
   lang on <html> when the language changes (setLangFn.change ->
   document.getElementsByTagName("html")[0].setAttribute("lang", ...)), which is
   the real marker in this codebase - englishStyle.css already keys off
   [lang="he"] the same way. */
[lang="he"] .syas-eyebrow {
    text-transform: none;
    letter-spacing: normal;
}
.syas-step-header h1,
.syas-step-title {
    font-family: var(--sky-font) !important;
    font-size:   22px !important;
    font-weight: 700 !important;
    color:       var(--sky-question) !important;
    line-height: 1.25 !important;
    margin:      0 0 8px !important;
    padding:     0 !important;
    border:      none !important;
    text-align:  left !important;
}
.syas-accent-bar {
    width:         36px;
    height:        3px;
    background:    var(--sky-selected);
    border-radius: 2px;
    margin:        0;
}
.syas-helper {
    font-family: var(--sky-font) !important;
    font-size:   14px !important;
    color:       var(--sky-muted) !important;
    line-height: 1.45 !important;
    margin:      6px 0 0 !important;
}
/* Back link: top-right of the header on desktop, back into normal flow under the
   accent bar on mobile. Source order never changes - CSS does the move. */
.syas-backlink {
    position:        absolute;
    top:             0;
    right:           0;
    font-family:     var(--sky-font);
    font-size:       13px;
    font-weight:     600;
    color:           var(--sky-badge);
    text-decoration: none;
}
.syas-backlink:hover,
.syas-backlink:focus {
    color:           var(--sky-badge);
    text-decoration: underline;
}
/* 03-09-2026 Jack+Claude (Fix #4): Hebrew/RTL override. WriteStepHeader's markup is
   fixed - `&#8592; <span class="TT">Back to my profile</span>` (arrow is a bare text
   node, not its own element; see App_Code/VBCode/SinaiMemberUI.vb WriteStepHeader) -
   so this is CSS-only, no VB edit:
     (a) reposition: top-right collides with RTL header text -> move to top-left.
     (b) arrow direction: mirror the WHOLE link (scaleX(-1) turns "<-" into "->", and
         reverses the visual order so the now-mirrored arrow ends up on the right of
         the text, which is where a Hebrew reader expects it) - then mirror the .TT
         span a SECOND time to cancel the double-mirroring of the label text itself,
         leaving only the arrow flipped. Standard RTL icon-flip trick; display:
         inline-block on the span keeps the nested transform reliable everywhere. */
[lang="he"] .syas-backlink {
    right:     auto;
    left:      0;
    transform: scaleX(-1);
}
[lang="he"] .syas-backlink .TT {
    display:   inline-block;
    transform: scaleX(-1);
}

/* The ONE in-page section label (h2). No underline, no box, no 21px shout -
   the h1 + accent bar above is the page's only decorative signature.
   30-08-2026 (#91): color switched from the fixed slate --sky-question to the
   theme-aware --sky-heading (owner ruling - section headings follow the site
   colour, e.g. AdoptaShadchan plum, everywhere). The h1 page title and the
   eyebrow above it are untouched - they stay --sky-question / --sky-muted. */
.syas-section-label {
    font-family: var(--sky-font) !important;
    font-size:   16px !important;
    font-weight: 700 !important;
    color:       var(--sky-heading) !important;
    line-height: 1.3 !important;
    margin:      28px 0 12px !important;
    padding:     0 !important;
    border:      none !important;
    background:  none !important;
    text-align:  left !important;
}
/* When the first thing after the header IS a section label, drop its 28px so the
   header's own 18px is the whole gap (this is what kills Step6/Step7's ~130px
   header-to-first-field chasm). */
.syas-section-label.syas-section-label-first {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
    .syas-step-header { margin: 6px 0 14px; }
    .syas-step-header h1,
    .syas-step-title  { font-size: 19px !important; }
    .syas-backlink {
        position:   static;
        display:    inline-block;
        margin-top: 8px;
    }
    .syas-section-label { margin-top: 22px !important; }
}

/* === 30-08-2026 Jack+Claude: HEADER/CARD LEFT-EDGE ALIGNMENT (Lane A cont.) ===
   Root cause: ProfileStep1-7 (and any page sharing this markup, incl. the Edit
   pages) open a SECOND, redundant Bootstrap .container > .row > .col-xs-12
   inside #dvMainForm to hold the progressHeader bar, then leave that inner
   .container OPEN around the first section label / question card.
   .syas-step-header prints BEFORE #dvMainForm opens, so it only ever gets the
   OUTER col-xs-12's 15px padding-left - never this inner container's own
   15px. Everything printed after progressHeader's row/col close (the ul
   itself via row/col cancellation, every section label, every Edit-page
   first card) sits one extra Bootstrap container padding to the right of the
   header. Measured on ProfileStep3 @1280px: header x=88, h2.syas-section-label
   x=104 (~16px, i.e. one Bootstrap .container padding-left).
   Fix: zero that inner container's own left/right padding so its content
   lands on the SAME col-xs-12 padding the header already uses - not a new
   magic number, just removing the redundant one. #dvMainForm > .container
   does not exist on membersignup.aspx / CreateMaleMember.aspx (ShowForm()
   there writes straight into #dvMainForm, no nested container), so this rule
   is a no-op on those two pages. */
#dvMainForm > .container {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* === 30-08-2026 Jack+Claude: HEADER -> FIRST-CARD GAP (Lane A cont.) =========
   ProfileStep pages already land the correct 18px/14px header-to-content gap
   because their first element is h2.syas-section-label-first, which zeroes
   its own margin-top (see .syas-section-label-first above). Edit pages have
   no such element - their first rendered field is a plain
   .formGroupRight[style*="border:1px solid"] question card, which carries
   the SAME margin-top every other card gets, so it is never zeroed against
   the header the way the section label is. Screenshots measured ~51px/~43px
   there instead of 18px/14px.
   A structural selector cannot reach that card: the live DOM (measured on demo,
   30-08) puts the form-groups INSIDE form#form1, not as direct children of the
   container, and page-specific ids (#uptitle) exist on only 2 of 17 pages. So
   the mechanism is a plain class that a page puts on its FIRST block under the
   header - one vocabulary for all 17: ProfileStep pages use
   h2.syas-section-label-first, Edit pages add .syas-first-card to their first
   question card (each page also removed the stray <br> that preceded it). */
.formGroupRight.syas-first-card {
    /* two classes: .formGroupRight itself sets margin-top:14px !important, so a
       single-class rule ties on specificity and loses on source order */
    margin-top: 0 !important;
}

/* ===== PROFILE VIEW (2026-08-30-007) - additive only ===== */
/* Every selector below is NEW. Not one existing rule is touched, so the 17 demo-live
   pages keep buster ?v=20260830f and gain zero regression surface (decision P0-7).
   Only --sky-* tokens that already exist in :root are used. */

/* --- the card. Byte-for-byte the declarations of the question shell at line ~215
       (.formGroupRight[style*="border:1px solid"]), lifted onto a real class so the
       profile view reads as the same object as the edit page it came from. --- */
.sky-card {
    border: none !important;
    border-left: 4px solid var(--sky-selected) !important;
    background-color: var(--sky-card) !important;
    border-radius: 10px !important;
    padding: 12px 14px 34px 14px !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 1px 3px rgba(33, 52, 77, 0.08) !important;
    overflow: visible !important;
    position: relative !important;
}

.pv-wrap {
    font-family: var(--sky-font);
    max-width: 100%;
}

.pv-card {
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 18px !important;
    overflow-wrap: anywhere;
}
.pv-card:first-of-type {
    margin-top: 0 !important;
}

/* Card title. .syas-section-label already paints itself in the theme colour
   (--sky-heading, #91); this only re-lays it out as a title + right-hand Edit link
   and removes its stock 28px top margin now that the card supplies the spacing. */
.pv-card > .syas-section-label {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px !important;
}
.pv-edit {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--sky-heading);
    text-decoration: none;
    white-space: nowrap;
}
.pv-edit:hover,
.pv-edit:focus {
    color: var(--sky-selected-hover);
    text-decoration: underline;
}

/* --- field rows --- */
.pv-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--sky-ink-a15);
}
.pv-row:last-child {
    border-bottom: none;
}
.pv-label {
    flex: 0 0 34%;
    max-width: 34%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sky-ink-a70);
}
.pv-value {
    flex: 1 1 55%;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sky-answer);
    overflow-wrap: anywhere;
}
.pv-subhead {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sky-heading);
}

/* --- read-only chip: the resting look of a SELECTED .radio-bubble, so a member
       sees "what I picked" in the same shape the edit page gave them. --- */
.pv-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sky-selected);
    border: 1px solid var(--sky-selected);
    color: var(--sky-on-blue);
    font-family: var(--sky-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    padding: 4px 12px;
    margin: 0 6px 6px 0;
    border-radius: 24px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* --- identity strip --- */
.pv-strip {
    padding-bottom: 14px !important;
}
.pv-name {
    margin: 0 0 8px;
    font-family: var(--sky-font);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sky-heading);
    overflow-wrap: anywhere;
}
.pv-tick {
    color: var(--sky-go-ink);
    font-size: 18px;
}
.pv-strip-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}
.pv-meta {
    font-size: 12px;
    color: var(--sky-muted);
}
.pv-strip-meta .fl-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* --- the three view pills (D-08). Plain links, no JS. --- */
.pv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 4px;
}
.pv-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--sky-bubble-bg);
    border: 1px solid var(--sky-bubble-border);
    border-radius: 24px;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--sky-answer);
    text-decoration: none;
    max-width: 100%;
    box-sizing: border-box;
}
.pv-pill:hover,
.pv-pill:focus {
    border-color: var(--sky-selected);
    text-decoration: none;
}
.pv-pill.is-active {
    background-color: var(--sky-selected);
    border-color: var(--sky-selected);
    color: var(--sky-on-blue);
}

/* --- redacted placeholder (PreviewAsMatch references) --- */
.pv-redacted {
    border-left: 4px dashed var(--sky-bubble-border) !important;
    background-color: var(--sky-bg-deep) !important;
}
.pv-redacted p {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: var(--sky-muted);
}

/* --- inactive-member banner --- */
.pv-banner {
    background-color: var(--sky-go-soft);
    border-left: 4px solid var(--sky-error);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sky-error);
}

/* --- photos --- */
.pv-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pv-photo {
    margin: 0;
    flex: 0 1 auto;
    max-width: 100%;
}
.pv-photo img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 160px;
    border-radius: 10px;
    border: 1px solid var(--sky-bubble-border);
}
.pv-photo figcaption {
    margin-top: 4px;
    font-size: 11px;
    color: var(--sky-muted);
    max-width: 160px;
    overflow-wrap: anywhere;
}

/* --- narrow screens: label stacks over value, nothing can scroll sideways --- */
@media (max-width: 480px) {
    .pv-row {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .pv-label,
    .pv-value {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .pv-card > .syas-section-label {
        flex-wrap: wrap;
    }
    .pv-name {
        font-size: 19px;
    }
    .pv-photo img {
        width: 132px;
    }
    .pv-photo figcaption {
        max-width: 132px;
    }
}