/*!
 * ReloadingHub GLOBAL DESIGN SYSTEM | Version 1.0 | November 2026
 * ------------------------------------------------------------------------
 * CANONICAL SOURCE OF TRUTH for the visual language of the entire member
 * and public-facing ReloadingHub website. This is NOT the BruceAC website.
 *
 * HOW INHERITANCE WORKS:
 *   src/global_navigation_bootstrap.php injects this stylesheet AFTER page
 *   CSS into every eligible PHP HTML response under ReloadingHub/public.
 *   Every future PHP page inherits the theme with no per-page color setup.
 *   A non-PHP/static page must include this asset explicitly.
 *
 * ALL DEVELOPERS (human or AI) MUST:
 *   (1) Use tokens below, NEVER hard-code button palette in a new page.
 *   (2) Use semantic classes: .rh-btn-primary, -secondary, -danger, etc.
 *   (3) Put a PAGE STYLES comment header above local CSS overrides.
 *   (4) Keep pages mobile-first and accessible (focus, contrast, states).
 *   (5) NEVER modify the underlying enabled/disabled/business logic for
 *       the sake of styling. Disabled means genuinely unavailable.
 *   (6) Do not apply this public/member theme to any separately hosted
 *       /admin area without a separate backend scope/security review.
 *
 * COLOR CONTRACT:
 *   Chinese red #DE2910  = restrained BRAND accent / required marker;
 *   Graphite   #243447  = enabled PRIMARY Save, Confirm, Publish actions;
 *   Neutral grays       = SECONDARY, Cancel, Discard Draft, quiet metadata;
 *   Blue       #2563EB  = INCOMPLETE PLOT SHOTS and selective links;
 *   Deep green #166534  = saved, completed PLOT SHOTS with check mark;
 *   Danger     #B42318  = FINAL destructive confirmation only;
 *   White / cool gray   = reading surfaces. NEVER paint all CTAs red.
 *
 * See docs/DESIGN_SYSTEM.md and scripts/audit_design.py for the contract.
 */

:root {
  color-scheme: light;
  /* Brand: accents only, never the general button background. */
  --rh-brand: #DE2910;
  --rh-brand-ink: #AD2615;
  --rh-brand-soft: #FFF4F1;
  /* Semantic actions: one role = one predictable treatment. */
  --rh-action-primary: #243447;
  --rh-action-primary-hover: #182638;
  --rh-action-primary-active: #101D2C;
  --rh-action-secondary: #EFF3F7;
  --rh-action-secondary-hover: #E3EAF1;
  --rh-action-secondary-text: #34465A;
  --rh-action-disabled: #E7EBF0;
  --rh-action-disabled-text: #8794A3;
  --rh-plot-pending: #2563EB;
  --rh-success: #166534;
  --rh-danger: #B42318;
  --rh-danger-hover: #8E1A14;
  /* Surfaces, content hierarchy, layout and focus. */
  --rh-background: #F5F7FA;
  --rh-surface: #FFFFFF;
  --rh-surface-tint: #F8FAFC;
  --rh-text: #1E293B;
  --rh-heading: #17263A;
  --rh-muted: #64748B;
  --rh-border: #DEE5ED;
  --rh-focus-ring: #7A9CC3;
  --rh-card-shadow: 0 8px 28px rgba(19,37,56,.035);
  --rh-radius: 14px;
  --rh-radius-btn: 10px;
  --rh-space-1: 4px;
  --rh-space-2: 8px;
  --rh-space-3: 12px;
  --rh-space-4: 16px;
  --rh-space-5: 24px;
  --rh-space-6: 32px;
  /* Legacy variable: keep it RED for branding, not for action surfaces. */
  --rh-primary: var(--rh-brand);
}

/* 01. Site typography, reading surfaces and form controls. */
body {
  background: var(--rh-background);
  color: var(--rh-text);
  line-height: 1.56;
}
h1, h2, h3, h4, .rh-title {
  color: var(--rh-heading);
  letter-spacing: -.025em;
}
.rh-header, .rh-global-fallback-header {
  background: var(--rh-surface);
  border-bottom-color: var(--rh-border);
}
.rh-card, .rh-blog-card, .rh-profile-card, .rh-community-head, .rh-result {
  background: var(--rh-surface);
  border-color: var(--rh-border);
  box-shadow: var(--rh-card-shadow);
}
.rh-text, .rh-history-muted, .rh-blog-muted, .rh-profile-note,
.rh-test-note, .rh-community-note {color: var(--rh-muted);}
.rh-input, .rh-blog-field, .rh-community-form input,
.rh-profile-field input, .rh-profile-field textarea {
  border-color: #C8D2DE;
  background-color: var(--rh-surface);
  color: var(--rh-text);
}
:where(input, textarea, select, button, a, summary):focus-visible {
  outline: 3px solid var(--rh-focus-ring);
  outline-offset: 3px;
}
:where(input, textarea, select):focus-visible {
  border-color: var(--rh-action-primary);
}

/* 02. Brand mark: Reloading RED, Hub BLACK. Logos always link to '/'. */
header a.rh-logo, .rh-home header a.brand, a.rh-global-fallback-logo {
  color: var(--rh-brand) !important;
}
header a.rh-logo .rh-logo-hub, .rh-home header a.brand .rh-logo-hub,
a.rh-global-fallback-logo span {color: #000000 !important;}

/* 03. Shared semantic button API for all newly authored pages. */
.rh-btn, .rh-btn-primary, .rh-btn-secondary, .rh-btn-danger,
.rh-btn-quiet, .rh-btn-success {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--rh-radius-btn);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.rh-btn-primary {background: var(--rh-action-primary); color: #FFFFFF; border-color: var(--rh-action-primary);}
.rh-btn-primary:hover:not(:disabled) {background: var(--rh-action-primary-hover); color: #FFFFFF;}
.rh-btn-secondary {background: var(--rh-action-secondary); color: var(--rh-action-secondary-text); border-color: #D7E0E9;}
.rh-btn-secondary:hover:not(:disabled) {background: var(--rh-action-secondary-hover); color: #263B52;}
.rh-btn-quiet {background: var(--rh-surface); color: var(--rh-action-secondary-text); border-color: var(--rh-border);}
.rh-btn-quiet:hover:not(:disabled) {background: var(--rh-surface-tint); color: var(--rh-heading);}
.rh-btn-danger {background: var(--rh-danger); color: #FFFFFF; border-color: var(--rh-danger);}
.rh-btn-danger:hover:not(:disabled) {background: var(--rh-danger-hover); color: #FFFFFF;}
.rh-btn-success {background: #E9F5ED; color: var(--rh-success); border-color: #B9DCC5;}
.rh-btn-block {width: 100%;}
:where(.rh-btn, .rh-btn-primary, .rh-btn-secondary, .rh-btn-danger, .rh-btn-quiet, .rh-btn-success):disabled,
:where(.rh-btn, .rh-btn-primary, .rh-btn-secondary, .rh-btn-danger, .rh-btn-quiet, .rh-btn-success)[aria-disabled="true"] {
  background: var(--rh-action-disabled);
  color: var(--rh-action-disabled-text);
  border-color: var(--rh-action-disabled);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* 04. Legacy button adapters: old pages inherit the SAME action semantics.
 * Do not re-write each page's background:#DE2910; this centrally overrides
 * those styles while preserving its forms, original click handlers and URLs.
 */
.rh-button, a.rh-button, button.rh-button,
.rh-blog-btn:not(.rh-blog-secondary):not(.rh-blog-danger),
.rh-profile-primary,
.rh-community-form button[type="submit"],
.rh-history-button:not(.rh-history-action-form button),
.rh-home .btn.primary {
  background: var(--rh-action-primary);
  border-color: var(--rh-action-primary);
  color: #FFFFFF;
  border-radius: var(--rh-radius-btn);
}
.rh-button:hover:not(:disabled),
a.rh-button:hover, .rh-blog-btn:hover:not(:disabled):not(.rh-blog-secondary):not(.rh-blog-danger),
.rh-community-form button[type="submit"]:hover:not(:disabled),
.rh-profile-primary:hover:not(:disabled),
.rh-history-button:hover:not(:disabled),
.rh-home .btn.primary:hover {background: var(--rh-action-primary-hover); color: #FFFFFF;}
.rh-blog-btn.rh-blog-secondary, .rh-avatar-action.alt {
  color: var(--rh-action-secondary-text);
  background: var(--rh-action-secondary);
  border: 1px solid #D7E0E9;
}
.rh-blog-btn.rh-blog-secondary:hover:not(:disabled) {background: var(--rh-action-secondary-hover);}
.rh-blog-btn.rh-blog-danger, .rh-history-action-form button.rh-history-button {
  color: var(--rh-danger);
  background: #FFFFFF;
  border: 1px solid #E5B7B2;
}
.rh-blog-btn.rh-blog-danger:hover:not(:disabled),
.rh-history-action-form button.rh-history-button:hover:not(:disabled) {
  color: #FFFFFF;
  background: var(--rh-danger);
}
/* Historical utility actions (Copy Text/Export) are SECONDARY; only
 * New Test and Analyze are important enough to use the primary fill. */
.rh-history-button,
a.rh-history-button,
button.rh-history-button {
  background: var(--rh-action-secondary);
  border: 1px solid #D7E0E9;
  color: var(--rh-action-secondary-text);
}
.rh-history-button:hover:not(:disabled), a.rh-history-button:hover {
  background: var(--rh-action-secondary-hover);
  color: var(--rh-heading);
}
.rh-history-button[href="/tests/new/"],
.rh-history-button[href^="/tests/analyze/"] {
  background: var(--rh-action-primary);
  border-color: var(--rh-action-primary);
  color: #FFFFFF;
}
.rh-history-button[href="/tests/new/"]:hover,
.rh-history-button[href^="/tests/analyze/"]:hover {
  background: var(--rh-action-primary-hover);
  color: #FFFFFF;
}
/* The existing Delete Test form remains visibly destructive, never primary. */
.rh-history-action-form button.rh-history-button {
  background: var(--rh-surface);
  color: var(--rh-danger);
  border: 1px solid #E5B7B2;
}

.rh-button:disabled, button.rh-button:disabled,
.rh-blog-btn:disabled, .rh-profile-primary:disabled,
.rh-community-form button:disabled, .rh-history-button:disabled {
  background: var(--rh-action-disabled);
  color: var(--rh-action-disabled-text);
  border-color: var(--rh-action-disabled);
  opacity: 1;
  cursor: not-allowed;
}

/* 05. New/Edit Test — action state CSS ONLY. JS and server own validation.
 * Save is graphite when enabled; Discard/Remove are quiet neutral actions.
 * Actual permanent deletion still requires its separate confirmation dialog.
 */
.rh-test-wrap .rh-test-btn.primary:not(:disabled) {
  background: var(--rh-action-primary);
  border-color: var(--rh-action-primary);
  color: #FFFFFF;
}
.rh-test-wrap .rh-test-btn.primary:not(:disabled):hover {background: var(--rh-action-primary-hover);}
.rh-test-wrap .rh-test-btn:not(.primary):not(:disabled) {
  color: var(--rh-action-secondary-text);
  border-color: #D6DFE8;
  background: var(--rh-surface);
}
.rh-test-wrap .rh-test-btn:not(.primary):not(:disabled):hover {background: var(--rh-action-secondary);}
.rh-test-wrap #discard-draft:not(:disabled) {
  color: #526174;
  background: var(--rh-action-secondary);
  border-color: #D5DEE8;
  margin-left: 4px;
}
.rh-test-wrap #discard-draft:not(:disabled):hover {background: var(--rh-action-secondary-hover);}
.rh-test-wrap .rh-test-btn:disabled,
.rh-test-wrap #test-form button[type="submit"]:disabled {
  background: var(--rh-action-disabled);
  color: var(--rh-action-disabled-text);
  border: 1px solid var(--rh-action-disabled);
  opacity: 1;
  cursor: not-allowed;
}
.rh-test-wrap #test-form button[type="submit"][aria-busy="true"] {
  background: #CED5DE;
  color: #526174;
  cursor: progress;
}
.rh-test-wrap .rh-test-stats {background: #F6F8FB; border-color: var(--rh-border);}
/* Plot behavior: actual completion is controlled by existing P5 V2 JS. */
.rh-ip3-launch:not(.rh-ip3-ready) {color: var(--rh-plot-pending);}
.rh-ip3-launch.rh-ip3-ready {color: var(--rh-success); font-weight: 800;}

/* 06. Navigation, links and small accents. Keep red only where it helps.
 * Use subdued readable link colors instead of a page full of red text.
 */
.rh-home nav a, .rh-home .rh-home-links a, .rh-blog-nav a,
.rh-community-nav a, .rh-result-link, .rh-result-meta a,
.rh-blog-related a, .rh-link {color: #354A62;}
.rh-home nav a:hover, .rh-blog-nav a:hover, .rh-community-nav a:hover,
.rh-result-link:hover, .rh-link:hover {color: var(--rh-brand-ink);}
.rh-home .btn.secondary {
  background: var(--rh-surface);
  border: 1px solid #D5DEE8;
  color: var(--rh-action-secondary-text);
}
.rh-home .btn.secondary:hover {background: var(--rh-action-secondary); color: var(--rh-heading);}
.rh-home .features span {
  background: #F6F8FB;
  color: #5B6B7E;
  border-color: #E4EAF0;
}
.rh-home .eyebrow {color: var(--rh-brand);}
.rh-home h1 span {color: var(--rh-brand);}
/* Separate error/success alerts remain semantic; not every notice is red. */
.rh-alert-success, .rh-blog-success {background: #F0F8F2; color: var(--rh-success);}
.rh-alert-error, .rh-blog-error {background: #FDF1F0; color: #9B281B;}

/* 07. Dashboard visual composition — content-first, calm and responsive. */
.rh-main.rh-dashboard-page {
  max-width: 1050px;
  width: 100%;
  margin: 24px auto 58px;
  padding: 0 clamp(12px, 3vw, 24px);
}
.rh-dashboard-hero {
  padding: clamp(24px, 4vw, 38px);
  background: linear-gradient(110deg, #FFFFFF 50%, #F7F9FC 100%);
}
.rh-dashboard-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--rh-brand);
  font-size: 11px;
  letter-spacing: .13em;
  font-weight: 800;
  text-transform: uppercase;
}
.rh-dashboard-hero h1 {font-size: clamp(29px, 4vw, 41px); margin: 0 0 8px; line-height: 1.17;}
.rh-dashboard-hero .rh-dashboard-subtitle {color: var(--rh-muted); max-width: 680px; margin: 0 0 18px;}
.rh-dashboard-barrel {
  border-top: 1px solid var(--rh-border);
  padding-top: 17px;
  margin-top: 17px;
  font-size: 14px;
}
.rh-dashboard-barrel .rh-dashboard-barrel-name {font-weight: 700; color: var(--rh-heading);}
.rh-dashboard-barrel-form {display: flex; flex-wrap: wrap; align-items: end; gap: 12px;}
.rh-dashboard-barrel-form .rh-dashboard-field {flex: 1 1 240px; margin: 0;}
.rh-dashboard-barrel-form .rh-label {margin: 0 0 6px;}
.rh-dashboard-barrel-form .rh-input {min-height: 44px;}
.rh-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.rh-dashboard-panel {display: flex; flex-direction: column; padding: clamp(22px, 3vw, 30px); min-width: 0;}
.rh-dashboard-panel h2 {font-size: clamp(21px, 2.7vw, 25px); margin: 4px 0 8px;}
.rh-dashboard-panel p {color: var(--rh-muted); margin: 0 0 22px; font-size: 14px; line-height: 1.65;}
.rh-dashboard-panel-kicker {color: var(--rh-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;}
.rh-dashboard-primary-panel {border-top: 3px solid var(--rh-brand);}
.rh-dashboard-actions {display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto;}
.rh-dashboard-actions > .rh-btn-primary, .rh-dashboard-actions > .rh-btn-secondary,
.rh-dashboard-actions > .rh-btn-quiet {flex: 1 1 150px;}
.rh-dashboard-footer {
  margin-top: 16px;
  padding: 20px clamp(22px, 3vw, 30px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.rh-dashboard-footer details {flex: 1 1 260px;}
.rh-dashboard-footer summary {cursor: pointer; font-size: 14px; font-weight: 700;}
.rh-dashboard-footer form {margin: 0;}
.rh-dashboard-footer .rh-dashboard-account-detail {margin-top: 12px;}
.rh-dashboard-account-detail p {margin: 3px 0 10px; overflow-wrap: anywhere;}
.rh-dashboard-footer .rh-btn-quiet {min-width: 130px;}
@media (max-width: 700px) {
  .rh-dashboard-grid {grid-template-columns: 1fr; gap: 12px; margin-top: 12px;}
  .rh-main.rh-dashboard-page {margin: 12px auto 40px; padding: 0 12px;}
  .rh-dashboard-hero {padding: 24px 20px;}
  .rh-dashboard-panel {padding: 22px 20px;}
  .rh-dashboard-footer {align-items: stretch;}
  .rh-dashboard-actions {flex-direction: column;}
  .rh-dashboard-actions > a {width: 100%;}
}

/* 08. Motion and preference accommodations. */
@media (prefers-reduced-motion: reduce) {
  :where(.rh-btn, .rh-btn-primary, .rh-btn-secondary, .rh-btn-danger, .rh-btn-quiet, .rh-btn-success) {transition: none;}
}

/* 09. GLOBAL UX V2 — mandatory for all existing and future HTML pages.
 * Compact by default: use natural content height, not viewport-height filler.
 * Keep one fixed logo row on every page, including verification/legal/guest.
 * Page-specific rules must be documented; never duplicate button palettes.
 * Public text uses concise, natural American English; no Chinese UI literals.
 * The browser owns the language of its native beforeunload dialog.
 * Keep Plot state, form enabled/disabled state, and business logic untouched.
 */
:root {
  --rh-header-height: 68px;
  --rh-content-gap: 16px;
}
header.rh-header,
.rh-global-fallback-header,
.rh-home header.rh-home-site-header {
  box-sizing: border-box;
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: var(--rh-header-height);
  height: var(--rh-header-height);
  padding: 0 clamp(16px, 2vw, 28px);
  margin: 0;
  background: var(--rh-surface);
  border-bottom: 1px solid var(--rh-border);
}
header.rh-header a.rh-logo,
.rh-home header.rh-home-site-header a.brand,
.rh-global-fallback-header a.rh-global-fallback-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font: 800 25px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.6px;
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}
.rh-home header.rh-home-site-header {justify-content: space-between;}
.rh-home header.rh-home-site-header .rh-home-links {
  gap: 8px;
  margin-left: auto;
  flex-wrap: nowrap;
  align-items: center;
}
.rh-home main {min-height: 0; padding: clamp(14px, 3vw, 24px) 16px;}
.rh-home .hero {padding: clamp(20px, 3vw, 30px);}
.rh-home .actions {margin-top: 20px; gap: 10px;}
.rh-home .features {margin-top: 20px; gap: 8px;}
.rh-home .features span {padding: 7px 12px;}
.rh-home .description {line-height: 1.55;}
.rh-home h1 {margin: 12px 0 16px; font-size: clamp(34px, 6vw, 60px);}
.rh-main:not(.rh-dashboard-page) {margin-top: 18px; margin-bottom: 28px;}
.rh-card {padding: clamp(16px, 2.2vw, 24px);}
.rh-dashboard-hero {padding: clamp(20px, 2.7vw, 28px);}
.rh-dashboard-panel {padding: clamp(16px, 2vw, 22px);}
.rh-dashboard-panel p {margin-bottom: 14px; line-height: 1.52;}
.rh-dashboard-actions {margin-top: 14px;}
.rh-dashboard-grid {gap: 12px; margin-top: 12px; align-items: start;}
.rh-dashboard-footer {padding: 14px clamp(16px,2vw,22px);}
.rh-avatar-editor {padding: 14px; margin: 14px 0;}
.rh-profile-card {padding: clamp(16px, 2.2vw, 22px);}
.rh-blog-card {padding: clamp(16px, 2.2vw, 22px); margin: 14px 0;}
.rh-blog-nav {padding: 8px 0; gap: 12px;}
.rh-community-head, .rh-result {padding: clamp(14px, 2.2vw, 22px);}
.rh-notice {margin-top: 14px; padding: 12px; line-height: 1.5;}
.rh-profile-note, .rh-test-note, .rh-blog-muted, .rh-community-note {line-height: 1.5;}
.rh-verify-email {display: block; padding: 0;}
.rh-verify-email main {width: min(460px, calc(100% - 32px)); margin: 20px auto; padding: 24px 20px;}
.rh-verify-email main .rh-btn-primary {display: inline-flex; margin-top: 16px;}
.rh-legal-page header.rh-header a.rh-logo {background: transparent;}
.rh-legal-page header.rh-header .rh-legal-account {margin-left: auto; font-size: 13px; font-weight: 650; color: var(--rh-action-secondary-text); white-space: nowrap;}
.rh-legal-page main {margin-top: 20px;}
.rh-legal-page main section {padding: clamp(16px, 2.2vw, 22px); margin-bottom: 14px;}
.rh-legal-page main nav {padding: 14px; margin-bottom: 16px;}
/* Locked system states: do not recolor PLOT SHOTS or fake button enabled state. */
.rh-ip3-launch:not(.rh-ip3-ready) {color: var(--rh-plot-pending); font-weight: 400;}
.rh-ip3-launch.rh-ip3-ready {color: var(--rh-success); font-weight: 800;}
@media (max-width: 650px) {
  header.rh-header, .rh-global-fallback-header,
  .rh-home header.rh-home-site-header {padding: 0 16px; gap: 8px;}
  .rh-home header.rh-home-site-header {flex-direction: row; justify-content: flex-start;}
  .rh-home header.rh-home-site-header .rh-home-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--rh-background);
    border-bottom: 1px solid var(--rh-border);
    z-index: 1;
  }
  .rh-home main {margin-top: 52px; padding: 12px;}
  .rh-home .hero {padding: 20px 16px;}
  .rh-home .actions {gap: 8px;}
  .rh-main:not(.rh-dashboard-page) {margin-top: 12px;}
  .rh-dashboard-hero, .rh-dashboard-panel {padding: 18px 16px;}
  .rh-dashboard-grid {gap: 10px; margin-top: 10px;}
  /* A row flex-basis must never become a 150px-high mobile button. */
  .rh-dashboard-actions > .rh-btn-primary,
  .rh-dashboard-actions > .rh-btn-secondary,
  .rh-dashboard-actions > .rh-btn-quiet {flex: 0 0 auto; width: 100%;}
  .rh-avatar-editor {padding: 12px;}
}


/* 10. GLOBAL UX V2.1 | English controls + compact-by-default.
 * All current/future app-owned confirmations use .rh-ui-dialog via rhConfirm().
 * Never show native localized file-control labels in rendered site content.
 * The OS browser owns its internal file-picker and beforeunload dialog locale.
 * Buttons remain >=44px tall for mobile accessibility; layout uses CONTENT
 * height rather than viewport-height fillers. Only danger confirmation is red.
 */
.rh-ui-dialog {
  box-sizing: border-box;
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  border: 1px solid var(--rh-border);
  border-radius: 14px;
  padding: 22px;
  background: var(--rh-surface);
  color: var(--rh-text);
  box-shadow: 0 18px 70px rgba(17,31,46,.21);
}
.rh-ui-dialog::backdrop {background: rgba(13,27,44,.52);}
.rh-ui-dialog h2 {font-size: 19px; line-height: 1.3; margin: 0 0 9px;}
.rh-ui-dialog p {font-size: 14px; line-height: 1.55; margin: 0;}
.rh-ui-dialog-actions {display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px;}
.rh-ui-dialog-actions button {min-width: 108px;}
/* Keep native file input operable by labels/keyboard but not visible/localized. */
.rh-visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap;
  border: 0 !important;
  clip-path: inset(50%);
}
.rh-file-select {display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer;}
.rh-visually-hidden-file:focus-visible + .rh-file-select {outline: 3px solid var(--rh-focus-ring); outline-offset: 3px;}
.rh-visually-hidden-file:disabled + .rh-file-select {opacity: .45; pointer-events: none; cursor: not-allowed;}
.rh-avatar-file-picker {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 14px;}
.rh-avatar-file-name {font-size: 13px; color: var(--rh-muted); overflow-wrap: anywhere;}
/* Cross-page mobile content is compact: no giant title/description areas. */
.rh-dashboard-hero {padding: clamp(16px, 2.3vw, 22px);}
.rh-dashboard-hero h1 {font-size: clamp(23px, 3vw, 31px); margin: 0 0 6px;}
.rh-dashboard-barrel {margin-top: 10px; padding-top: 10px;}
.rh-dashboard-panel {padding: clamp(15px, 2vw, 20px);}
.rh-dashboard-panel h2 {font-size: clamp(19px, 2.4vw, 23px); margin: 3px 0 6px;}
.rh-dashboard-panel p {margin-bottom: 10px; line-height: 1.42;}
.rh-dashboard-actions {gap: 8px; margin-top: 10px;}
.rh-dashboard-actions > a {min-height: 44px; padding: 9px 13px;}
@media (max-width: 650px) {
  .rh-dashboard-hero,.rh-dashboard-panel {padding: 14px 14px;}
  .rh-dashboard-grid {gap: 8px; margin-top: 8px;}
  .rh-dashboard-panel p {margin-bottom: 9px;}
  .rh-ui-dialog {padding: 19px;}
  .rh-ui-dialog-actions {flex-direction: column-reverse;}
  .rh-ui-dialog-actions button {width:100%;}
}