/* Rahmah identity, v2 overhaul: member_profile.html (the five step profile builder).
 * Presentation only. No logic, ids, handlers or copy are changed.
 * Corners: 4px controls, 8px photos and video, square cards. 44px targets. Fig focus ring.
 * Copper is never used for small text; it is kept only for the age range slider fill and the progress dots.
 *
 * SCOPE: this page only. Linked after the page's own <style> blocks so it wins by order; !important
 * is used only against the inline style="" attributes in the markup and scripts (attribute selectors below).
 * TO REVERT: delete the two <link> lines (bym/styles/rahmah.css and rahmah-profile.css) before </head>.
 * Tokens: bym/styles/rahmah.css (--bym-*).
 */
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---- Tokens the page already draws from ---- */
:root {
  --bg: var(--bym-canvas); --surface: var(--bym-surface); --surface-2: var(--bym-surface-soft);
  --text: var(--bym-text); --text-body: var(--bym-text); --muted: var(--bym-text-muted); --muted-2: var(--bym-text-muted); --faint: var(--bym-text-muted);
  --line: var(--bym-rule); --line-soft: var(--bym-rule); --line-faint: var(--bym-rule);
  --accent: var(--bym-primary); --accent-2: var(--bym-human-text); --accent-glow: transparent;
  --success: var(--bym-success); --danger: var(--bym-error); --discuss: var(--bym-human-text);
  --border-neutral: var(--bym-border); --surface-hover: var(--bym-surface-soft);
  --r-sm: 4px; --r-md: 4px; --r-pill: 4px;
  --font-display: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif;
  --font-body: var(--font-display); --font-ui: var(--font-display); --font-mono: var(--font-display);
}
html { font-size: 18px; }
body { background: var(--bym-canvas); color: var(--bym-text); font-family: var(--font-display); font-size: var(--bym-text-base); line-height: 1.55; }
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
:where(a, button, input, select, textarea, [tabindex], .photo-slot, .video-add-box):focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 3px; }

/* ---- Headings and text ---- */
h1, h2, h3, h4 { color: var(--bym-primary); font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.15; }
.page-header h1 { font-size: var(--bym-text-title); }
.page-header .subtitle { color: var(--bym-text-muted); font-size: var(--bym-text-sm); font-weight: 400; }
.stage-heading { font-size: var(--bym-text-xl); }
.stage-subhead { color: var(--bym-text-muted); font-size: var(--bym-text-sm); }
.form-group label { color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 600; }
.status-msg { font-size: var(--bym-text-xs); color: var(--bym-text-muted); }
.leave-link { color: var(--bym-primary); font-size: var(--bym-text-xs); text-underline-offset: 3px; }
.required-mark { color: var(--bym-human-text); font-size: var(--bym-text-xs); }
.optional-mark, .basics-note, .bb-sub, .photo-hint, .photo-block .subtitle-row, .loc-area-map-caption { color: var(--bym-text-muted); font-size: var(--bym-text-xs); }
.missing-note { color: var(--bym-error); font-size: var(--bym-text-xs); }

/* ---- Topbar and floating Dashboard button ---- */
.mp-topbar-brand { color: var(--bym-primary); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; min-height: 44px; display: inline-flex; align-items: center; }
.mp-topbar-btn { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--bym-text-xs); font-weight: 600; color: var(--bym-primary); border: 1px solid var(--bym-border); border-radius: 4px; background: transparent; padding: 0 14px; }
.mp-topbar-btn:hover { background: var(--bym-surface-soft); border-color: var(--bym-primary); }
.floating-dashboard-btn { min-height: 44px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--bym-surface); border: 1px solid var(--bym-primary); color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 600; transition: none; }
.floating-dashboard-btn:hover { transform: none; background: var(--bym-surface-soft); }

/* ---- Cards and banners ---- */
.session-card { background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 0; padding: 28px 24px; }
.bio-builder-card { border-style: dashed; }
@media (max-width: 480px) { .session-card { padding: 20px 16px; } .container { padding-inline: 16px; } }
.serious-note, .bio-regen-banner { background: var(--bym-surface-soft); border: 0; border-inline-start: 3px solid var(--bym-primary); border-radius: 0; color: var(--bym-text); font-size: var(--bym-text-sm); }
.profile-incomplete-banner { background: var(--bym-error-surface); border: 0; border-inline-start: 3px solid var(--bym-error); border-radius: 0; }
.profile-incomplete-banner .pib-title { color: var(--bym-error); font-size: var(--bym-text-sm); }
.profile-incomplete-banner .pib-body { color: var(--bym-text); font-size: var(--bym-text-sm); }
.field-missing { outline: 2px solid var(--bym-error); border-radius: 4px; background: var(--bym-error-surface); }

/* ---- Stage progress and navigation ---- */
.stage-progress-label { color: var(--bym-human-text); font-size: var(--bym-text-xs); letter-spacing: .08em; }
.stage-dot { border-radius: 0; width: 24px; height: 6px; background: var(--bym-rule); }
.stage-dot.done, .stage-dot.active { background: var(--bym-primary); transform: none; }
.stage-nav .btn-ghost-disabled { border-radius: 4px; min-height: 44px; color: var(--bym-text-muted); border-color: var(--bym-rule); font-size: var(--bym-text-sm); }

/* ---- Buttons and fields ---- */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px !important; font-size: var(--bym-text-sm); font-weight: 600; letter-spacing: 0; background-image: none !important; transition: none; }
.btn-gold { background: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); }
.btn-gold:hover { background: #2f1f2e; }
.btn-outline { background: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); }
.btn-outline:hover { background: var(--bym-surface-soft); }
.btn[disabled] { opacity: 1; background: #e4dadd; border-color: var(--bym-border); color: #70586b; }
.btn-small { padding: 0 14px; font-size: var(--bym-text-xs); }
.input, select.input, textarea.input { min-height: var(--bym-control-height); border: 1px solid var(--bym-border); border-radius: 4px; background: var(--bym-surface); color: var(--bym-text); font-size: var(--bym-text-sm); }
textarea.input { min-height: 96px; }
.input:focus, select.input:focus, textarea.input:focus { border-color: var(--bym-focus); outline: 3px solid var(--bym-focus); outline-offset: 2px; }
.input::placeholder { color: var(--bym-text-muted); opacity: 1; }
select { font-family: var(--font-display); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--bym-primary); }

/* ---- Tag pills, kid buttons, bio chips: 4px, selected = Fig ---- */
.tag-pill, .kidbtn, .bb-chip { min-height: 44px; display: inline-flex; align-items: center; border-radius: 4px; border: 1px solid var(--bym-border); background: var(--bym-surface); color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 500; padding: 0 16px; transition: none; }
.tag-pill:hover, .kidbtn:hover, .bb-chip:hover { border-color: var(--bym-primary); background: var(--bym-surface-soft); color: var(--bym-primary); }
.tag-pill.selected, .kidbtn.selected, .bb-chip.picked { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); font-weight: 600; }
.bb-chip-label { color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 600; }
.bb-more-toggle { min-height: 44px; color: var(--bym-primary); font-size: var(--bym-text-xs); text-underline-offset: 3px; }
.bb-hint { color: var(--bym-success); font-size: var(--bym-text-xs); }
.bb-assembled { color: var(--bym-text-muted); font-size: var(--bym-text-sm); }
.bb-assembled .empty { color: var(--bym-text-muted); }
.bb-divider { border-top-color: var(--bym-rule); }
.bb-title { font-size: var(--bym-text-lg); }

/* ---- Photos and video: 8px media corners ---- */
.photo-slot { border-radius: 8px; background: var(--bym-surface-soft); border: 1px solid var(--bym-border); color: var(--bym-text-muted); font-size: var(--bym-text-xs); }
.photo-slot.photo-add { border: 1px dashed var(--bym-primary); color: var(--bym-primary); font-weight: 600; font-size: var(--bym-text-xs); }
.photo-slot.photo-add:hover { background: var(--bym-surface); }
.photo-slot.photo-add .slot-sub { color: var(--bym-text-muted); font-size: var(--bym-text-xs); }
.photo-main-badge { background: var(--bym-primary); color: var(--bym-on-primary); font-size: var(--bym-text-xs); border-radius: 4px; padding: 2px 8px; }
.photo-remove { width: 44px; height: 44px; top: 0; right: 0; border-radius: 0 8px 0 4px; background: var(--bym-primary); color: var(--bym-on-primary); font-size: 1.25rem; }
.photo-remove:hover { background: #2f1f2e; }
.photo-set-main { min-height: 44px; border-radius: 4px; background: var(--bym-primary); color: var(--bym-on-primary); font-size: var(--bym-text-xs); opacity: 1; left: 6px; right: 6px; bottom: 6px; }
.photo-slot.has-photo:hover .photo-set-main.vis-shifted, .photo-set-main.vis-shifted { bottom: 56px; }
.photo-set-main:hover { background: #2f1f2e; }
.vis-toggle { border-radius: 4px; background: var(--bym-primary); padding: 2px; backdrop-filter: none; }
.vis-toggle button { min-height: 44px; border-radius: 2px; color: var(--bym-on-primary); font-size: var(--bym-text-xs); }
.vis-toggle button.active { background: var(--bym-surface); color: var(--bym-primary); }
.vis-toggle button.active.req { background: var(--bym-surface-soft); color: var(--bym-primary); }
.media-status-badge { font-size: var(--bym-text-xs); border-radius: 4px; padding: 2px 8px; }
.media-status-badge.media-status-pending { background: #6b4a1f; }
.media-status-badge.media-status-rejected { background: var(--bym-error); }
div.media-status-badge.media-status-pending { background: #f3e7d8; color: #6b4a1f; }
div.media-status-badge.media-status-rejected { background: var(--bym-error-surface); color: var(--bym-error); }
.media-status-summary-item { color: var(--bym-error); font-size: var(--bym-text-xs); }
.photo-lightbox img { border-radius: 8px; }
.photo-lightbox-close { width: 44px; height: 44px; border-radius: 4px; font-size: 1.5rem; }
.video-block video { border-radius: 8px; }
.video-add-box { border-radius: 8px; background: var(--bym-surface-soft); border: 1px dashed var(--bym-primary); color: var(--bym-primary); font-size: var(--bym-text-sm); }
.video-add-box:hover { background: var(--bym-surface); }
.recommended-mark { border-radius: 4px; background: var(--bym-surface-soft); color: var(--bym-primary); border-color: var(--bym-human); font-size: var(--bym-text-xs); }
.loc-area-map { border-radius: 8px; border-color: var(--bym-rule); }

/* ---- Age range slider ---- */
.dual-range { height: 44px; }
.dual-range-track { height: 4px; border-radius: 0; background: var(--bym-rule); }
.dual-range-fill { height: 4px; border-radius: 0; background: var(--bym-primary); }
.dual-range input[type="range"] { height: 44px; }
.dual-range input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; border-radius: 4px; background: var(--bym-primary); border: 3px solid var(--bym-canvas); }
.dual-range input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 4px; background: var(--bym-primary); border: 3px solid var(--bym-canvas); }

/* ---- Inline style="" attributes the markup (and its scripts) set directly ---- */
[style*="color:#978396"], [style*="color: #978396"], [style*="color:#7A6678"], [style*="color: #7A6678"], [style*="color:#b8a99a"] { color: var(--bym-text-muted) !important; }
[style*="color:#B88355"], [style*="color: #B88355"], [style*="color:#8a6020"] { color: var(--bym-primary) !important; }
[style*="color:#412B3F"] { color: var(--bym-primary) !important; }
[style*="color:#5a8a6a"], [style*="color:#3e5f48"] { color: var(--bym-success) !important; }
[style*="color:#c47070"], [style*="color:#a84040"] { color: var(--bym-error) !important; }
[style*="font-size:9px"], [style*="font-size:10px"], [style*="font-size:11px"], [style*="font-size:11.5px"], [style*="font-size:12px"], [style*="font-size:12.5px"], [style*="font-size:13px"], [style*="font-size:13.5px"] { font-size: var(--bym-text-xs) !important; }
[style*="border-radius:10px"], [style*="border-radius:12px"], [style*="border-radius:14px"], [style*="border-radius:9px"] { border-radius: 4px !important; }
[style*="background:#fdf3e4"], [style*="background:#f6efe4"], [style*="background:#fff3de"] { background: var(--bym-surface-soft) !important; }

/* ---- "Report an issue" (report-issue.js), same treatment as the landing page ---- */
.bym-ri-btn { border-radius: 4px !important; box-shadow: none !important; min-height: var(--bym-target-min); padding: 0 16px !important; font-size: var(--bym-text-sm) !important; background: var(--bym-canvas) !important; color: var(--bym-primary) !important; border: 1px solid var(--bym-primary) !important; }
.bym-ri-btn:hover { background: var(--bym-surface-soft) !important; color: var(--bym-primary) !important; }
@media (max-width: 760px) { .bym-ri-btn { position: static !important; display: block; margin: 24px auto 96px; z-index: auto; } }
.bym-ri-box { border-radius: 4px !important; box-shadow: none !important; }
.bym-ri-box button, .bym-ri-box textarea, .bym-ri-box input[type=email] { border-radius: 4px !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Same rule for inline styles written with a space after the colon. */
[style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 11.5px"], [style*="font-size: 12px"], [style*="font-size: 12.5px"], [style*="font-size: 13px"], [style*="font-size: 13.5px"] { font-size: var(--bym-text-xs) !important; }