*, *::before, *::after { box-sizing: border-box; }
/* Hide scrollbars across screens & containers */
.screen, .onboard-hero-container, #screen-container, .phone-shell {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.screen::-webkit-scrollbar,
.onboard-hero-container::-webkit-scrollbar,
#screen-container::-webkit-scrollbar,
.phone-shell::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* AVEN - Modern Glassmorphism 2.0 & Dynamic Color Design System */
@font-face {
  font-family: 'Montserrat';
  /* Self-hosted, Latin + Latin Extended-A subset of the variable face (all weights 100-900 in one 64 KB file).
     Italic is not shipped: the app uses it once, and the browser's synthetic oblique is fine for that. */
  src: url('design/Montserrat/Montserrat-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --current-tab-color: #88D8B0; /* Default mint */
  /* Colors */
  --primary: #88D8B0;
  --primary-light: #B4E8C9;
  --primary-dark: #23545B;
  --primary-glow: rgba(136, 216, 176, 0.4);
  
  --secondary: #B4A0E5;
  --secondary-glow: rgba(180, 160, 229, 0.4);
  
  --accent: #F7B32B;
  --accent-glow: rgba(247, 179, 43, 0.4);
  
  --coral: #FF6F61;
  --coral-glow: rgba(255, 111, 97, 0.4);
  
  --neon-lime: #88D8B0;
  --neon-lime-glow: rgba(136, 216, 176, 0.5);
  --neon-lime-rgb: 136, 216, 176;
  --neon-yellow: var(--accent);
  --neon-blue: var(--luminous-blue);

  --luminous-blue: #4B3F72;

  /* Semantic status aliases - onto real brand tokens, never a new hue.
     The fallbacks these replaced already resolved to these exact values
     (e.g. var(--status-warning, #F7B32B) === --accent) - this makes that
     real everywhere instead of leaving it to chance per call site. */
  --status-success: var(--primary);
  --status-warning: var(--accent);

  /* Named shadow for the gold rank/medal badge (.base-header-window etc). */
  --shadow-yellow: 0 4px 14px rgba(230, 184, 0, 0.4);

  /* Glassmorphism 2.0 Backgrounds */
  --bg-primary: #FDF8F0;
  --bg-primary-rgb: 253, 248, 240;
  --bg-secondary: rgba(255, 255, 255, 0.6);
  --bg-tertiary: rgba(255, 255, 255, 0.4);
  --bg-card: rgba(255, 255, 255, 0.7);
  --bg-input: rgba(255, 255, 255, 0.5);
  --bg-glass: rgba(255, 255, 255, 0.25);
  /* Aliases for legacy/renamed references found by scripts/css_var_guard.js -
     kept as real tokens rather than a per-call-site rewrite so every current
     and future reference resolves the same way. */
  --bg-color: var(--bg-primary);
  --bg-lighter: var(--bg-card);
  --bg-surface: var(--bg-card);

  /* Text */
  --text-primary: #1E293B;
  --text-secondary: #475569;
  /* Muted text was #94A3B8 (2.4:1 on the cream background, 1.5:1 on mint). #5B6B80 is 5.1:1 on
     cream and still reads as a step lighter than --text-secondary (#475569). UX audit 2026-10-01. */
  --text-muted: #5B6B80;
  --text-inverse: #FFFFFF;
  /* Fixed ink: text on the brand grounds (mint / coral / mustard) and dark solid surfaces. Not flipped in the dark
     theme - the grounds stay light there too. (The Phase 2 --on-* tokens refine this per ground.) */
  --ink: #1E293B;
  /* Text on the three brand grounds. The page ground is the tab colour and many screens put text straight on it:
     the neutral --text-secondary / --text-muted measured 2.0-4.1:1 there. [data-ground] below re-points both to
     these (>= 4.5:1: #334155 is 5.6:1 on mint, 5.2:1 on mustard; ink is 5.0:1 on coral). The Phase 2 contract:
     text on a ground uses --on-<ground>, never a neutral grey. Light theme only (the dark ground is #121212). */
  --on-mint: #334155;
  --on-mustard: #334155;
  --on-coral: var(--ink);
  --chip-on-ground: rgba(255, 255, 255, 0.45);   /* a pill on the ground: dark text stays readable */
  /* Solid danger fills carrying white text (badge, timer pill). */
  --danger-solid: #C62828;
  --danger-solid-deep: #7F1D1D;
  /* Hover states of filled controls. */
  --primary-pressed: #1B434A;
  --validate-hover: #3A3059;
  /* Error text on light surfaces (6.2:1 on cream). Coral stays a fill/accent, never a text colour. */
  --status-danger-text: #B42318;
  /* Bottom sheets: near-opaque so the screen behind never bleeds through the content. */
  --bg-sheet: rgba(253, 248, 240, 0.97);
  /* Bottom chrome. The nav bar is --nav-h tall plus the home-indicator inset. */
  --nav-h: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Height the on-screen keyboard covers (set live by updateKeyboardInset() in app_v3.js); 0 = no keyboard. */
  --kb-inset: 0px;

  /* Borders & Shadows */
  --border-color: rgba(0, 0, 0, 0.1);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --glass-card-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05);

  /* Spacing scale (2026-09-17 density audit, design_system.md "Utilities").
     Dense contexts (list rows, chips, in-row icon gaps) use --space-1/2/3;
     hero/celebratory contexts (onboarding, PR modals, share flows) use
     --space-4/5. Not yet applied everywhere - see design_system.md for the
     migration note. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* Utilities */
  --backdrop-blur: blur(12px);
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --max-content-width: 440px;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Fonts */
  --font-body: 'Montserrat', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-display: 'Montserrat', sans-serif;
  /* Type scale (DL-00071). 12 px is the floor for any text; 14 px for primary data. Never a raw size below it. */
  --fs-xs: 0.75rem;     /* 12 - labels, captions, badges, tab labels */
  --fs-sm: 0.8125rem;   /* 13 - secondary body */
  --fs-md: 0.875rem;    /* 14 - body, primary data in lists */
  --fs-base: 1rem;      /* 16 - inputs (also stops iOS zoom-on-focus), buttons */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.5rem;      /* 24 - screen titles, big numbers use their own larger sizes */
  /* Hit areas: an isolated action is --hit-min square; a dense in-row icon is --hit-dense with a gap around it. */
  --hit-min: 44px;
  --hit-dense: 32px;
  --font-action: 'Montserrat', sans-serif;
}

[data-theme="dark"] {
  --chip-on-ground: rgba(0, 0, 0, 0.3);
  --bg-primary: #121212;
  --bg-secondary: rgba(24, 24, 31, 0.7);
  --bg-tertiary: rgba(30, 30, 40, 0.6);
  --bg-card: rgba(40, 40, 50, 0.6);
  --bg-input: rgba(0, 0, 0, 0.3);
  --bg-glass: rgba(0, 0, 0, 0.4);
  
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-inverse: #000000;
  --status-danger-text: #FCA5A5;
  --bg-sheet: rgba(24, 24, 31, 0.97);
  
  --border-color: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --glass-card-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
}

.phone-shell {
    display: flex;
    flex-direction: column;
    --phone-height-calc: min(846px, 92vh);
    --phone-width-calc: calc(var(--phone-height-calc) * 0.487);
    width: var(--phone-width-calc);
    height: var(--phone-height-calc);
    max-width: var(--max-content-width);
    background: transparent;
    border: 10px solid var(--glass-border);
    border-radius: 40px;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
    /* clip, not just hidden: an overflow:hidden box can still be scrolled by the browser (focusing the weight
       field scrolled the whole frame, tab bar included, up the screen). A clip box cannot be scrolled at all, so
       there is nothing to pin; the scroll listener in app_v3.js stays as the fallback for browsers without clip. */
    overflow: clip;
    /* No backdrop-filter here: the shell is transparent over a flat colour, so the blur only cost a
       full-viewport GPU layer (and made nested sheet blurs a separate backdrop root).
       `contain: layout` keeps what the filter incidentally did for free: the shell stays the
       containing block of every position:fixed descendant (bottom bars, the coach drawer), so
       they stay inside the phone frame on desktop. */
    contain: layout;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}



[data-theme="dark"] .phone-shell {
    background: transparent;
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

body {
    font-variant-numeric: tabular-nums;
    background-color: #88D8B0;
    background-image: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;
}

[data-theme="dark"] body {
    font-variant-numeric: tabular-nums;
    background-color: #88D8B0;
    background-image: none;
}

/* Screen Wrapper */
.screen {
    background-color: transparent;
    flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 0 14px 140px 14px;
  max-width: var(--max-content-width);
  margin: 0 auto;
  width: 100%;
  opacity: 0;
  animation: screenFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* A background refresh re-renders the screen in place: no replayed fade-in. */
.screen.no-anim {
  animation: none;
  opacity: 1;
}

@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.screen::-webkit-scrollbar {
  width: 4px;
}
.screen::-webkit-scrollbar-track {
  background: transparent;
}
.screen::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
  border-radius: var(--radius-sm);
}

/* Bottom Navigation Bar with Glassmorphism 2.0 */
.nav-bar {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-h) + var(--safe-bottom));
    background: #FDF8F0;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 0 4px var(--safe-bottom);
  box-sizing: border-box;
  z-index: 10;
}

/* Tab bar items: equal-width, >=44px targets in both axes (they were content-width: 36-41 px with
   dead gaps between), real <button>s, 11px labels, text contrast 5.1:1 inactive / 9.4:1 active.
   The tab colour is carried by the indicator bar, not by the text (mint/mustard/coral text on the
   cream bar measured 1.6-2.6:1). UX audit 2026-10-01. */
.nav-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 6px 2px;
    background: none;
    border: 0;
    font: inherit;
    color: #5B6B80;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.nav-item span {
    display: block;
    font-size: var(--fs-xs);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.nav-item svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.0;
    transition: var(--transition);
}
.nav-item:active {
    background: rgba(75, 63, 114, 0.08);
}
@media (hover: hover) {
  .nav-item:hover {
      color: #334155;
  }
}
.nav-item.active {
    color: var(--luminous-blue);
    font-weight: 800;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--luminous-blue);   /* 9:1 on the cream bar; the tab colour lives in the header mark and the screen ground */
}
.nav-item.active span {
    font-weight: 800;   /* '.nav-item span' sets 700, which made the active weight rule dead */
}
.nav-item.active svg {
    transform: translateY(-1px);
    stroke: currentColor;
    stroke-width: 2.5;
    filter: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--primary-dark);
  color: var(--text-inverse) !important;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  min-height: 44px;
  font-family: var(--font-action);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  position: relative;
  box-shadow: 0 4px 14px var(--primary-glow);
  line-height: 1.3;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .btn:hover {
    background-color: var(--primary-pressed);
    color: #ffffff !important;
    box-shadow: 0 6px 20px var(--primary-glow);
  }
}

.btn-secondary {
  background: var(--bg-glass);
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  padding: 12px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-action);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--bg-card);
    color: var(--text-primary) !important;
    border-color: var(--primary-dark);
  }
}

.btn-share {
  background: var(--primary-light);
  border: 1px solid var(--primary);
  color: var(--primary-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}

@media (hover: hover) {
  .btn-share:hover {
    background: var(--primary-dark);
    color: #ffffff !important;
  }
}

/* Landing Page styles */
.landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100% - 20px);
  padding: 30px 14px 40px 14px;
  width: 100%;
}

.btn-login-social {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-primary) !important;
  font-family: var(--font-action);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
}

@media (hover: hover) {
  .btn-login-social:hover {
    border-color: var(--primary-dark);
    background: var(--bg-glass);
    color: var(--text-primary) !important;
    transform: translateY(-1px);
  }
}

/* Yellow Circle Initials */
.yellow-initials-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #e6b800);
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-yellow);
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.base-header-window {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--glass-card-shadow);
}

.base-logo-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--primary-light);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--primary);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary-dark);
}

/* Form Controls & Dropdown Selectors (Reduced sizes for compact fitting) */
.form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
}

.form-input, .form-select {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 13px 12px;
  min-height: 44px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  outline: none;
  transition: var(--transition);
  width: 100%;
}

/* Sign In / Create Account segmented toggle (Email Access modal) */
.auth-mode-toggle {
  display: flex;
  gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 16px;
}

.auth-mode-btn {
  flex: 1;
  min-height: 38px;
  border: none;
  background: none;
  font-family: var(--font-action);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.auth-mode-btn.active {
  background: var(--bg-card);
  color: var(--primary-dark);
  box-shadow: var(--glass-card-shadow);
}

.form-input:focus, .form-select:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 10px var(--primary-glow);
}

.form-select-highlight {
  background-color: var(--bg-input);
  border: 1.5px solid var(--primary-dark);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  outline: none;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 0 16px var(--primary-glow);
  transition: var(--transition);
}

.form-select-highlight:focus {
  box-shadow: 0 0 22px var(--primary-glow);
}
@media (hover: hover) {
  .form-select-highlight:hover {
    box-shadow: 0 0 22px var(--primary-glow);
  }
}

.form-row {
  display: flex;
  gap: 8px;
}

/* Translucent Cards */
.card {
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  /* radius-lg (24px) read as "this is a rare, important surface" on every
     ordinary card - Prozis/Strava keep that weight for hero/modal sheets
     only and use ~12px for everyday cards. Density audit, 2026-09-17. */
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  position: relative;
  overflow: visible;
  box-shadow: var(--glass-card-shadow);
}

/* Base View Toggle (Website vs Google Maps) */
.base-view-toggles {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.base-toggle-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.base-toggle-btn.active {
  background: var(--primary-light);
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}

.map-wrapper {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  position: relative;
  overflow: hidden;
  height: 160px;
  margin-top: 4px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
}

.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0.95;
}

.map-overlay-info {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-primary);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 30px;
  font-size: var(--fs-xs);
  font-family: var(--font-action);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.badge-premium {
  background: rgba(16, 185, 129, 0.12);
  color: var(--primary-dark);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-free {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Premium toggle switch */
.premium-toggle-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(24, 24, 31, 0.5);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  border: 1px dashed var(--border-color);
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.05);
  transition: .3s;
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-secondary);
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: rgba(16, 185, 129, 0.15);
  border-color: var(--primary);
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: var(--primary);
}

/* Affiliated Athletes List */
.affiliate-item {
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  transition: var(--transition);
}

@media (hover: hover) {
  .affiliate-item:hover {
    border-color: var(--primary-dark);
    background-color: var(--bg-glass);
  }
}

.affiliate-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.affiliate-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.affiliate-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--text-primary);
}

.affiliate-meta {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.btn-view-prs {
  background: var(--primary-light);
  border: 1px solid var(--primary);
  color: var(--primary-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

@media (hover: hover) {
  .btn-view-prs:hover {
    background: var(--primary-dark);
    color: #ffffff !important;
    border-color: var(--primary-dark);
  }
}

/* Interactive Drag Slider */
.percentage-slider-container {
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: var(--glass-card-shadow);
}

.slider-value-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 16px;
  background: var(--bg-glass);
  backdrop-filter: var(--backdrop-blur);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.slider-pct {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--text-primary);
}

/* CHALK FONT applied to yellow calculated weight */
.slider-calc-weight {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 0.5px;
}

.custom-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(203, 213, 225, 0.6);
  border-radius: var(--radius-xs);
  outline: none;
  margin: 14px 0;
}

.custom-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-dark);
  cursor: pointer;
  box-shadow: 0 0 12px var(--primary-glow);
  border: 2px solid #ffffff;
  transition: transform 0.1s ease;
}

@media (hover: hover) {
  .custom-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
  }
}

.custom-range-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-dark);
  cursor: pointer;
  box-shadow: 0 0 12px var(--primary-glow);
  border: 2px solid #ffffff;
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 700;
  padding: 0 2px;
}

/* REAL BARBELL PLATE LOADER & INVENTORY SELECTOR */
.barbell-loader-container {
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
  margin-top: 12px;
  box-shadow: var(--glass-card-shadow);
}

.barbell-loader-title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.barbell-loader-info {
  font-size: 0.75rem;
  color: var(--text-primary);
  margin-top: 2px;
  margin-bottom: 12px;
}

/* CHALK FONT for total load text in plate loader */
.barbell-loader-info span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary-dark);
}

.plate-inventory-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  margin-top: 14px;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

.plate-inventory-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.plate-toggle-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

.plate-toggle-btn.active {
  background: var(--primary-light);
  border-color: var(--primary-dark);
  color: var(--primary-dark);
  font-weight: 800;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.plate-toggle-btn.active::before {
  content: '\2713 ';
  color: var(--primary-dark);
  font-weight: 900;
}

.barbell-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  margin: 10px 0;
  position: relative;
}

.barbell-shaft {
  width: 200px;
  height: 6px;
  background-color: #7f8c8d;
  position: relative;
  border-radius: 3px;
}

.barbell-sleeve {
  width: 40px;
  height: 12px;
  background-color: #bdc3c7;
  position: absolute;
  top: -3px;
  border-radius: 1px;
}

.barbell-sleeve.left { left: 0; border-right: 3px solid #7f8c8d; }
.barbell-sleeve.right { right: 0; border-left: 3px solid #7f8c8d; }

.plate-group {
  display: flex;
  align-items: center;
  gap: 1.5px;
  position: absolute;
  height: 48px;
  top: -21px;
}

.plate-group.left { left: 40px; flex-direction: row-reverse; }
.plate-group.right { right: 40px; }

.plate {
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.3);
  transition: var(--transition);
}

.plate-25 { width: 8px; height: 38px; background-color: #ef4444; }
.plate-20 { width: 8px; height: 34px; background-color: #3b82f6; }
.plate-15 { width: 8px; height: 30px; background-color: #eab308; }
.plate-10 { width: 8px; height: 26px; background-color: #22c55e; }
.plate-5 { width: 6px; height: 22px; background-color: #ffffff; }
.plate-2_5 { width: 5px; height: 18px; background-color: var(--ink); }
.plate-1 { width: 4px; height: 15px; background-color: #d97706; }
.plate-0_5 { width: 3px; height: 13px; background-color: #78716c; }

.barbell-plates-list {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* PR Grid & History list styles */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.pr-grid-card {
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.pr-grid-name {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-grid-value {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.25;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  /* radius-xs, not -md: a repeated list row is the densest, least "special"
     surface on the screen - the smallest radius in the scale belongs here,
     not on a rare hero card. Density audit, 2026-09-17. */
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
}

@media (hover: hover) {
  .history-item:hover {
    border-color: rgba(136, 216, 176, 0.2);
  }
}

.history-item-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.history-item-exercise {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
}

.history-item-date {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.history-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CHALK FONT for History item weights */
.history-item-weight {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(16px, 4vw, 22px);
    color: var(--luminous-blue);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Plays once on the row just logged or edited (AvenUx.isJustLogged); prefers-reduced-motion switches it off globally. */
.history-item-weight.weight-pop {
  display: inline-block;
  animation: weightPop 0.7s ease-out 1;
}

@keyframes weightPop {
  0% { font-weight: 400; transform: scale(0.95); }
  50% { font-weight: 900; transform: scale(1.1); color: var(--primary); }
  100% { font-weight: 700; transform: scale(1); }
}

.history-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 32px);
  grid-template-rows: repeat(2, 32px);
  gap: 6px;
}

.history-video-link {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.05);
  transition: var(--transition);
  box-sizing: border-box;
}

.history-video-link svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .history-video-link:hover {
    color: var(--primary-dark);
    background-color: rgba(16, 185, 129, 0.12);
  }
}

/* Visibility Toggle in PR Modal */
.visibility-selector {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.visibility-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md);
  flex: 1;
  padding: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.visibility-btn.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--primary);
  color: var(--text-primary);
}

/* Floating Action Button - Luminous Blue: the "+" to log a Record is the
   single most important action on this screen, and needs to read as
   distinct from the mint/green used everywhere else on Records. */
.fab {
  position: absolute;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--luminous-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(75, 63, 114, 0.45);
  border: none;
  cursor: pointer;
  z-index: 15;
}

.fab:active {
  transform: translateX(-50%) scale(0.95);
}

.fab svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

/* Modal styling */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content, .modal-surface {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: var(--bg-sheet);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-top: 1px solid var(--glass-border);
  border-left: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  padding: 20px 18px calc(32px + var(--safe-bottom)) 18px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.12);
  color: var(--text-primary);
  box-sizing: border-box;
}

.modal-backdrop.open .modal-content, .modal-surface {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.modal-header h2, .modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary) !important;
  margin: 0;
}

.modal-close {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-primary);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

@media (hover: hover) {
  .modal-close:hover {
    background: var(--bg-card);
    color: var(--primary-dark);
    border-color: var(--primary);
  }
}


/* Social Sharing Modal Buttons */
/* Social Sharing Modal Buttons - Circle Icons in a Single Row */
.share-options-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 6px;
}

.btn-social-icon-share {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (hover: hover) {
  .btn-social-icon-share:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }
}

.btn-social-icon-share:active {
  transform: scale(0.95);
}

.btn-social-icon-share.share-whatsapp { background: #25d366; }
.btn-social-icon-share.share-email { background: #ea4335; }
.btn-social-icon-share.share-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.btn-social-icon-share.share-facebook { background: #1877f2; }


.share-whatsapp { background-color: #25D366; }
.share-email { background-color: #EA4335; }
.share-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.share-facebook { background-color: #1877F2; }

/* Normalization Metrics Cards */
.metric-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.metric-desc {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* CHALK FONT for metric yellow scores */
.metric-score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: right;
  line-height: 1.25;
  padding: 2px 0;
}

.metric-subscore {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: right;
  margin-top: 2px;
}

/* Rankings / Leaderboards */
.segment-control {
  display: flex;
  background-color: var(--bg-glass);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.segment-btn {
  flex: 1;
  min-height: 44px;
  background: none;
  border: none;
  padding: 8px 6px;   /* five Podium tabs must fit 360 px without a sideways scroll */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.segment-btn.active {
  background-color: var(--primary-dark);
  color: #ffffff;
  border: 1px solid var(--primary-dark);
  box-shadow: 0 2px 8px var(--primary-glow);
}

.filters-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.filter-select {
  flex: 1;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Podium: header (tabs/filters/pinned shelf) stays put, only the ranked
   list itself scrolls - lets the top-3 + your-neighborhood shelf stay
   visible without scrolling the whole screen. */
.screen.rankings-split {
  overflow-y: hidden;
  padding-bottom: 0;
}
.rankings-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.15);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.rankings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 140px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  position: relative;
}

.ranking-pos {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(100, 116, 139, 0.15);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.ranking-pos.pos-1 {
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: #0f172a;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.ranking-pos.pos-2 {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #0f172a;
}

.ranking-pos.pos-3 {
  /* Bronze light enough for dark ink (white on the old #804000 end was ~3:1 at 11px; ink on this is >= 5:1). */
  background: linear-gradient(135deg, #e3a66a, #c98238);
  color: #0f172a;
}

.ranking-info {
  flex: 1;
  min-width: 0;
}

.ranking-name {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.ranking-gym-details {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* CHALK FONT for Ranking Yellow Weights/Scores */
.ranking-weight {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--primary-dark);
  white-space: nowrap;
}

/* Base Performance Comparison vs Average - 3 Column Grid */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.comparison-card {
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  min-width: 0;
  box-sizing: border-box;
}

@media (hover: hover) {
  .comparison-card:hover {
    border-color: var(--primary-dark);
    transform: translateY(-1px);
  }
}

.comparison-item {
  background-color: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
}

.comparison-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comparison-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.comparison-avg {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.3;
}

.comparison-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.badge-avg-diff {
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-above {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.badge-below {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Map Gym Selection Card */
.map-gym-selector-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.map-gym-card {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: var(--transition);
}

.map-gym-card.selected {
  border-color: var(--primary-dark);
  background: var(--bg-glass);
}
@media (hover: hover) {
  .map-gym-card:hover {
    border-color: var(--primary-dark);
    background: var(--bg-glass);
  }
}

.policy-link { color: var(--text-primary); text-decoration: underline; font-weight: 700; cursor: pointer; }

/* Bulletin Polygon Centering */
.bulletin-polygon-card {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100px;
  box-shadow: var(--glass-card-shadow);
}

.bulletin-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-align: center;
}

.bulletin-text {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text-primary);
  max-width: 90%;
  margin: 0 auto;
}

/* Progress Evolution Chart Modal */
.chart-interval-filters {
  display: flex;
  gap: 4px;
  background: var(--bg-glass);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: 14px;
  overflow-x: auto;
}

.btn-chart-filter {
  flex: 1;
  padding: 6px 8px;
  font-size: var(--fs-xs);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.btn-chart-filter.active {
  background: var(--primary-dark);
  color: #ffffff;
  border: 1px solid var(--primary-dark);
}

.svg-chart-container {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 12px 12px 12px;
  margin-bottom: 14px;
  position: relative;
}

/* Video button status styling */
.history-video-link.video-active {
  color: var(--primary-dark);
  background-color: var(--primary-light);
  border: 1px solid var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

.history-video-link.video-inactive {
  color: var(--text-muted);
  background-color: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.15);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Share Canvas Preview */
.share-canvas-preview {
  width: 100%;
  max-width: 240px;
  margin: 0 auto 14px auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--primary);
  box-shadow: var(--glass-card-shadow);
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-canvas-preview canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* Measurement System Toggle on Profile */
.unit-toggle-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--glass-card-shadow);
}

.unit-toggle-buttons {
  display: flex;
  gap: 4px;
  background: var(--bg-glass);
  padding: 3px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.btn-unit-option { min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.btn-unit-option.active {
  background: var(--primary-dark);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--primary-glow);
}

/* Aligned Profile Data Form Labels */
.form-label-aligned {
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  white-space: nowrap;
}

.form-label-sub {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}

/* Social & URL Base Linking UI */
.base-link-channel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
  transition: var(--transition);
}

.base-link-channel-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.base-link-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Base Association Mode Selector Tabs */
.base-mode-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--bg-glass);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.btn-base-mode {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

@media (hover: hover) {
  .btn-base-mode:hover {
    color: var(--text-primary);
    background: var(--bg-card);
  }
}

.btn-base-mode.active {
  background: var(--primary-dark);
  color: #ffffff;
  border-color: var(--primary-dark);
  box-shadow: 0 2px 8px var(--primary-glow);
}

/* Identified Base Result Card */
.base-result-card {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 12px;
  box-shadow: var(--glass-card-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: fadeIn 0.3s ease-in-out;
}

/* Box Mailbox styles */
.mailbox-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.message-card {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

@media (hover: hover) {
  .message-card:hover {
    border-color: var(--primary);
  }
}

.message-card.unread {
  border-left: 4px solid var(--primary-dark);
  background: var(--bg-glass);
}

.message-card.unread .message-title {
  font-weight: 800;
  color: var(--text-primary);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.message-badge {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.5px;
}

/* Light theme: a near-white chip with a dark tone of the category colour (the old tinted chips measured
   1.2-3.6:1 on the coloured ground). Every pair below is >= 4.5:1 on the chip. The dark theme keeps its original
   neon-on-dark values (see the [data-theme="dark"] block right after). */
.message-badge {
  background: rgba(255, 255, 255, 0.82);
}
.badge-promotion {
  color: var(--primary-dark);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-event {
  color: #0B5BD3;
  border: 1px solid rgba(24, 119, 242, 0.3);
}

.badge-system {
  color: #B4421B;
  border: 1px solid rgba(230, 104, 60, 0.3);
}

.badge-bulletin {
  background: rgba(16, 185, 129, 0.12);
  color: var(--primary-dark);
  border: 1px solid rgba(136, 216, 176, 0.45);
}

.badge-insight {
  color: #3F5F00;
  border: 1px solid rgba(179, 255, 0, 0.35);
}
[data-theme="dark"] .badge-promotion { background: rgba(16, 185, 129, 0.15); }
[data-theme="dark"] .badge-event { background: rgba(24, 119, 242, 0.15); color: #1877f2; }
[data-theme="dark"] .badge-system { background: rgba(230, 104, 60, 0.15); color: #e6683c; }
[data-theme="dark"] .badge-bulletin { background: rgba(16, 185, 129, 0.12); }
[data-theme="dark"] .badge-insight { background: rgba(179, 255, 0, 0.12); color: var(--neon-lime, #b3ff00); }

.message-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.message-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.message-body {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 10px 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.message-expand-btn {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  body {
    font-variant-numeric: tabular-nums;
    background-color: #88D8B0;
  }
  .phone-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* 0 on iOS standalone with status-bar-style "default"; non-zero only where the page is
       drawn under a cutout (the top bar then starts below it). */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .screen {
    padding-bottom: calc(var(--safe-bottom) + 130px);
  }
}

/* Static Action Buttons (Share, Edit, Delete) for Training Logs.
   Each action gets a chip (tinted fill + border) in its own token color
   instead of a bare stroke icon, so it reads as tappable at a glance next
   to the row's bold weight number - not just a contrast fix, a legibility
   one (WCAG 2.5.5 target-size guidance: 24px was too small regardless). */
.history-action-btn {
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: var(--transition);
  padding: 0;
}

@media (hover: hover) {
  .history-action-btn:hover {
    transform: scale(1.1);
  }
}

.history-action-btn:active {
  transform: scale(0.95);
}

.history-action-btn svg {
  width: 16px;
  height: 16px;
}

.action-share {
  color: var(--primary-dark);
  background: rgba(35, 84, 91, 0.12);
  border-color: rgba(35, 84, 91, 0.3);
}

.action-edit {
  color: var(--luminous-blue);
  background: rgba(75, 63, 114, 0.12);
  border-color: rgba(75, 63, 114, 0.3);
}

.action-delete {
  color: var(--coral);
  background: rgba(255, 111, 97, 0.12);
  border-color: rgba(255, 111, 97, 0.3);
}

/* Coach and Verification Additions */
.profile-switch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: var(--transition);
}

@media (hover: hover) {
  .profile-switch-card:hover {
    background: rgba(136, 216, 176, 0.04) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(136, 216, 176, 0.1);
  }
}

/* Onboarding Phase 4: single-fire tab coach-mark. Border+glow reuses the
   .profile-switch-card:hover technique above, re-keyed to Luminous Blue -
   that token is reserved for content emphasis (see the badge-neon-glow
   note further down), which is exactly what a coach-mark is. The card
   body stays the standard translucent .card background with
   --text-primary/--text-secondary text; Luminous Blue never appears as
   bare text on a dark surface (the P0 bug Phase 1 fixed) - border+glow
   only. */
.tab-highlight-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--luminous-blue) !important;
  box-shadow: 0 0 10px rgba(75, 63, 114, 0.18);
}
.tab-highlight-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.tab-highlight-body {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.tab-highlight-dismiss {
  flex-shrink: 0;
  width: var(--hit-min);
  height: var(--hit-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}
@media (hover: hover) {
  .tab-highlight-dismiss:hover {
    color: var(--text-primary);
    background: rgba(75, 63, 114, 0.08);
  }
}

.qr-code-frame svg {
  display: block;
}

@keyframes laserPulse {
  0% {
    top: 0%;
    opacity: 1;
    box-shadow: 0 0 4px var(--primary), 0 0 12px var(--primary);
  }
  50% {
    top: 100%;
    opacity: 0.8;
    box-shadow: 0 0 8px var(--primary), 0 0 20px var(--primary);
  }
  100% {
    top: 0%;
    opacity: 1;
    box-shadow: 0 0 4px var(--primary), 0 0 12px var(--primary);
  }
}

/* Verified / validation badges - Mint, matching every other "verified" signal
   in the app (Home PR badge, coach badge, share-card seals). This used to be
   Luminous Blue, which is reserved for content emphasis (titles, primary
   numbers) elsewhere - a second meaning on the same token undermines both. */
.badge-neon-glow {
    background: var(--primary);
    border: none;
    color: var(--primary-dark);
}

.btn-claim-reward {
  background-color: var(--primary) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3) !important;
}

@media (hover: hover) {
  .btn-claim-reward:hover {
    box-shadow: 0 0 15px rgba(136, 216, 176, 0.6) !important;
    transform: scale(1.05);
  }
}

.btn-validate-pr {
  transition: var(--transition);
}

@media (hover: hover) {
  .btn-validate-pr:hover {
    background-color: var(--validate-hover) !important;
    box-shadow: 0 0 8px rgba(75, 63, 114, 0.35);
  }
}

/* Google Maps container styling */
.profile-map-container {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-top: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}

/* Fallback Warning Box */
.map-fallback-warning {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  padding: 10px;
  border-radius: var(--radius-md);
  margin-top: 10px;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Autocomplete suggestions panel customization to match theme */
.pac-container {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  font-family: inherit !important;
  z-index: 999999 !important;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15) !important;
  backdrop-filter: blur(16px) !important;
}
.pac-item {
  border-top: 1px solid var(--border-color) !important;
  padding: 10px 12px !important;
  color: var(--text-primary) !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
}
@media (hover: hover) {
  .pac-item:hover {
    background-color: var(--bg-glass) !important;
  }
}
.pac-item-query {
  color: var(--primary-dark) !important;
  font-size: 0.75rem !important;
}
.pac-matched {
  font-weight: bold !important;
}
.pac-icon {
  filter: invert(1) !important;
}

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

@media (hover: hover) {
  .menu-row:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  }
}

.menu-row:active {
  transform: scale(0.98);
}

.back-arrow-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 8px;
  border-radius: 50%;
  transition: background-color 0.2s, transform 0.15s;
}

@media (hover: hover) {
  .back-arrow-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--primary-dark);
  }
}

.back-arrow-btn:active {
  transform: scale(0.9);
}

#profile-avatar-trigger {
  transition: transform 0.2s;
}

@media (hover: hover) {
  #profile-avatar-trigger:hover {
    transform: scale(1.04);
  }
}

#profile-avatar-trigger:active {
  transform: scale(0.96);
}

/* Privacy Controls Card & Glassmorphism Spec */
.privacy-card {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: var(--glass-card-shadow);
  position: relative;
  overflow: hidden;
}

.privacy-card-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.privacy-card-subtitle {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

[data-theme="dark"] .privacy-row {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.privacy-row-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.privacy-lock-container {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.privacy-lock-icon {
  width: 18px;
  height: 18px;
  transition: var(--transition);
}

/* Lock Icon Color Rules: Green if allowed, Gray if denied */
.privacy-lock-icon.allowed {
  color: #22c55e !important;
  fill: #22c55e !important;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.4));
}

.privacy-lock-icon.denied {
  color: #94a3b8 !important;
  fill: #94a3b8 !important;
  filter: none;
}

.privacy-row-text {
  display: flex;
  flex-direction: column;
}

.privacy-row-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.privacy-row-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* iOS Glass Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(203, 213, 225, 0.8);
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

input:checked + .toggle-slider {
  background-color: #22c55e;
  border-color: #22c55e;
}

input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* Typography Utilities */
.text-micro {
  font-size: var(--fs-xs) !important;
}
.text-label {
  font-size: var(--fs-xs) !important;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-secondary);
}

/* CALCULATOR 3.0: UNIFIED PERCENTAGE CARD & NARROW PLATES SIDEBAR */

/* Percentage Card (Unified Left Values + Right Joystick) */
.calc-pct-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--glass-card-shadow);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  gap: 16px;
  margin-bottom: 12px;
}

.calc-pct-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calc-pct-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.calc-pct-row-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.calc-pct-large-val {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 900;
  color: var(--luminous-blue);
  line-height: 1;
}

.calc-exact-large-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

/* SIDE THUMBWHEEL / JOG WHEEL LATERAL */
.side-thumbwheel-wrapper {
  position: relative;
  width: 48px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: ns-resize;
  margin-right: -4px;
}

.side-thumbwheel-housing {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(25,25,25,0.8) 40%, rgba(45,45,45,0.9) 100%);
  border: 1px solid var(--border-color);
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: inset 2px 0 8px rgba(0,0,0,0.6), -2px 0 10px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-thumbwheel-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Center Index Marker */
.side-thumbwheel-marker {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 6px solid var(--primary);
  filter: drop-shadow(0 0 4px var(--primary));
  pointer-events: none;
  z-index: 3;
}

.side-thumbwheel-rim-top,
.side-thumbwheel-rim-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  z-index: 2;
}

.side-thumbwheel-rim-top {
  top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  border-top: 1px solid rgba(255,255,255,0.15);
}

.side-thumbwheel-rim-bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  border-bottom: 1px solid rgba(0,0,0,0.5);
}

/* Lower Section: Barbell on Left + Narrow Plates Column on Right */
.calc-lower-layout {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.calc-plates-sidebar-narrow {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 6px 3px;
  box-shadow: var(--glass-card-shadow);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  gap: 4px;
  box-sizing: border-box;
}

.calc-plates-sidebar-narrow .sidebar-title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.calc-plate-chip-narrow {
  width: 100%;
  padding: 4px 1px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-color);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  position: relative;
  touch-action: manipulation;
  min-height: 28px;
  box-sizing: border-box;
}

.calc-plate-chip-narrow.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 900;
  box-shadow: 0 2px 6px var(--primary-glow);
}

.calc-plate-chip-narrow:not(.active) {
  opacity: 0.35;
  border-style: dashed;
}

.calc-plate-chip-narrow .plate-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-bottom: 1px;
}

.calc-plate-chip-narrow .plate-val {
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 800;
}

/* =========================================
   Utility Classes (Design System 2.0)
========================================= */

/* Typography */
/* Base Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--luminous-blue);
  margin-top: 0;
}
/* Luminous Blue (#4B3F72) reads ~2:1 against the real dark-theme background
   (#121212) - fails WCAG AA. It reads ~8.7:1 against light theme's cream
   background (#FDF8F0), which is the documented intent (design_system.md
   "Colour Principles"), so only dark theme needs an override here. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-primary);
}
h1 {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}
h2 {
  font-size: 1.5rem;
  font-weight: 800;
}
p.subtitle {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  /* was --text-secondary at 0.8 opacity: 3.05:1 on the mustard ground, 2.3:1 on coral. */
  color: var(--text-primary);
}

.text-h1 { font-size: 1.25rem; font-weight: 700; font-family: var(--font-heading); line-height: 1.3; }
.text-h2 { font-size: 1rem; font-weight: 700; font-family: var(--font-heading); }
.text-body {
  font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 400; font-family: var(--font-body); }
.text-sm { font-size: 0.75rem; font-weight: 500; font-family: var(--font-body); }
.text-micro { font-size: var(--fs-xs); font-weight: 500; font-family: var(--font-body); }
.font-heavy { font-weight: 800; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-display { font-family: var(--font-display); }
.text-center { text-align: center; }

/* Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-neon { color: var(--primary-dark); }
.text-black { color: #000; }

/* Layout & Flexbox */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; align-items: center; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }

/* Spacing */
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 12px; }
.mb-lg { margin-bottom: 16px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 12px; }
.w-full { width: 100%; }
.h-full { height: 100%; }

/* Components */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-card-shadow);
  padding: 16px;
}

.avatar-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.badge-neon { background: var(--primary); color: #000; }
.badge-warning { background: var(--neon-yellow); color: #000; }
.badge-neutral { background: var(--text-muted); color: #000; }
.badge-error { background: #ef4444; color: #fff; }

.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
@media (hover: hover) {
  .btn-icon:hover { color: var(--text-primary); }
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   Onboarding Styles (Strava-inspired)
========================================= */

/* Onboarding progress bar */
.onboard-progress {
  display: flex;
  gap: 6px;
  padding: 0 20px;
  margin-bottom: 24px;
}
.onboard-progress-step {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--border-color);
  transition: background 0.3s ease;
}
.onboard-progress-step.active {
  background: var(--primary);
}

/* Onboarding profile type selection card */
.onboard-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.onboard-profile-card.selected {
  border-color: var(--primary);
  background: rgba(var(--neon-lime-rgb), 0.08);
  box-shadow: 0 0 12px rgba(var(--neon-lime-rgb), 0.25);
  transform: scale(1.02);
}
.onboard-profile-card.dimmed {
  opacity: 0.55;
}
.onboard-profile-check {
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--primary-dark);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.onboard-profile-card.selected .onboard-profile-check {
  opacity: 1;
}
.onboard-profile-card.selected .onboard-profile-desc {
  color: var(--primary-dark);
  font-weight: 600;
  transition: color 0.2s ease;
}
.onboard-profile-emoji {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-dark);
}
.onboard-profile-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.onboard-profile-desc {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Onboarding hero screen */
.onboard-hero-container {
  height: 100%;
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 30px 20px 20px;

  background-size: cover;
  background-position: center;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto;
}
.onboard-hero-overlay {
    display: none;
}
.onboard-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 320px;
  margin: 0;
}
.onboard-trust-signal {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(35, 84, 91, 0.12);
  color: var(--primary-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.onboard-trust-signal strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 900;
}
.onboard-hero-name {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 4px;
  line-height: 1;
  margin: 14px 0 4px;
  text-shadow: 0 0 20px rgba(var(--neon-lime-rgb), 0.4);
}
.onboard-hero-portal {
    font-size: var(--fs-xs);
    /* Was white on the assumption of a photo background that is never set -
       the hero actually sits on body's solid mint (#88D8B0, styles.css
       "body"), measured at 1.68:1 contrast. --primary-dark matches
       .onboard-hero-name above it (~5:1 on mint) in both themes, since
       neither the mint background nor this token vary by theme. */
    color: var(--primary-dark);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
}
.onboard-hero-statement {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.25;
  line-height: 1.25;
  margin-bottom: 10px;
  max-width: 290px;
}
.onboard-hero-sub {
    font-size: 0.8125rem;
    color: var(--primary-dark);
    line-height: 1.45;
    max-width: 280px;
    margin-bottom: 16px;
  line-height: 1.45;
  max-width: 280px;
  margin-bottom: 16px;
}
.onboard-hero-ctas {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.onboard-hero-ctas .btn {
  background: var(--primary-dark) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  height: 46px !important;
  border-radius: 23px !important;
  box-shadow: 0 4px 15px rgba(var(--neon-lime-rgb), 0.35) !important;
  border: none !important;
  cursor: pointer !important;
}
.onboard-hero-already {
  font-size: 0.75rem;
  color: var(--primary-dark);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
}

/* Specialty Multi-select Filter Chips */
.spec-filter-chip {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 5px 11px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: var(--font-body);
}
@media (hover: hover) {
  .spec-filter-chip:hover {
    border-color: var(--primary);
    color: var(--text-primary);
  }
}
.spec-filter-chip.active {
  background: var(--primary);
  color: #000000;
  border-color: var(--primary);
  font-weight: 800;
  box-shadow: 0 0 10px rgba(var(--neon-lime-rgb), 0.35);
}






.welcome-toast {
  position: fixed;
  top: 50%;
  left: 30px;
  right: 30px;
  transform: translateY(-50%) scale(0.95);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(136, 216, 176, 0.4);
  color: var(--text-primary);
  padding: 32px;
  border-radius: 24px;
  z-index: 10000;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
  box-shadow: 0 8px 32px rgba(136, 216, 176, 0.2);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
}
.welcome-toast.show {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}






















/* --- Brand-glow suppression (kept): flat, minimal cards per the "Clay" premium
   benchmark. Blur, shadows and transitions were also force-killed here for
   performance; removed because none of them are expensive (plain box-shadow /
   opacity+transform), and killing them broke the modal slide-in and every
   glass-card surface. If backdrop-filter ever proves costly on low-end
   devices, scope a targeted fix (e.g. reduce --backdrop-blur) rather than a
   blanket `*` kill. --- */
:root {
  --primary-glow: transparent !important;
  --secondary-glow: transparent !important;
  --accent-glow: transparent !important;
  --coral-glow: transparent !important;
  --neon-lime-glow: transparent !important;
}



















/* =========================================================================
   UX AUDIT 2026-10-01 - PHASE 1 COMPONENTS
   (06_product_memory/20261001_ux_pwa_audit.md, DL-00069)
   Everything below is new: global top bar, toast, Record sheet, Meet Mode, rest chip,
   focus ring and reduced motion. Colours come from tokens; touch targets follow the
   design_system.md policy (44px for an isolated action, 32px + gap inside dense rows).
   ========================================================================= */

/* ---- Keyboard focus: a visible ring for every control (there was none) ---------------- */
:where(button, [role="button"], a[href], input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--luminous-blue);
  outline-offset: 2px;
}

/* ---- Reduced motion: honour the OS setting --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Global top bar ---------------------------------------------------------------------- */
/* display is owned by navigate() (inline style); everything else lives here. */
.top-bar {
  background-color: #FFFFFF;
  height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 20px;
  z-index: 5;   /* under the sheets (100) and their dim, above the screen; was 1000 */
  flex-shrink: 0;
}
/* .top-bar prefix: beats [data-theme="dark"] h1 { color } - the bar is white in both themes. */
.top-bar .top-bar-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  line-height: 1.1;
  color: var(--luminous-blue);
}
.top-bar-icons {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--ink);
}
.top-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.top-icon-btn:active {
  background: rgba(30, 41, 59, 0.08);
}
.top-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--danger-solid);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.top-logo-chip {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #88D8B0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.top-logo-chip::before {            /* 44 x 44 touch target */
  content: '';
  position: absolute;
  inset: -4px;
}
.top-logo-chip:active {
  transform: scale(0.94);
}

/* ---- Text on the brand grounds (see --on-* in :root) ------------------------------------------------- */
:root:not([data-theme="dark"]) body[data-ground="mint"] { --text-secondary: var(--on-mint); --text-muted: var(--on-mint); }
:root:not([data-theme="dark"]) body[data-ground="mustard"] { --text-secondary: var(--on-mustard); --text-muted: var(--on-mustard); }
:root:not([data-theme="dark"]) body[data-ground="coral"] { --text-secondary: var(--on-coral); --text-muted: var(--on-coral); }

/* ---- Gym legibility (DL-00071): the system's own switches, no settings UI --------------------------------------
   Phones are used in bright gyms and by people who have asked their OS for more contrast or less transparency.
   Honour both: opaque surfaces (the glass tints let a busy ground bleed through the text) and, for more contrast,
   ink-dark secondary text and stronger borders. Also the fallback when backdrop-filter is unsupported. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :root:not([data-theme="dark"]) {
    --bg-card: #FFFFFF;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-glass: #FFFFFF;
  }
  [data-theme="dark"] {
    --bg-card: #282832;
    --bg-secondary: #1C1C24;
    --bg-tertiary: #1E1E28;
    --bg-input: #121218;
    --bg-glass: #1C1C24;
  }
}
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --text-secondary: var(--ink);
    --text-muted: var(--ink);
    --border-color: rgba(30, 41, 59, 0.6);
  }
  :root:not([data-theme="dark"]) body[data-ground] { --text-secondary: var(--ink); --text-muted: var(--ink); }
  [data-theme="dark"] {
    --text-secondary: #F8FAFC;
    --text-muted: #E2E8F0;
    --border-color: rgba(255, 255, 255, 0.5);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-theme="dark"]) { --bg-glass: rgba(255, 255, 255, 0.85); }
  [data-theme="dark"] { --bg-glass: rgba(28, 28, 36, 0.92); }
}

/* ---- Toast (showGlassSnackbar) ------------------------------------------------------------ */
/* Solid surface: white on --primary-dark is 8.4:1. Sits above the FAB (FAB top = nav + 68px). */
.aven-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 76px);
  transform: translate(-50%, 16px);
  width: calc(100% - 32px);
  max-width: 360px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--primary-dark);
  color: #FFFFFF;
  border: 1px solid rgba(136, 216, 176, 0.5);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.aven-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.aven-toast.show.has-action {
  pointer-events: auto;
}
.aven-toast-msg {
  flex: 1;
  min-width: 0;
}
.aven-toast-action {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--primary);
  color: var(--ink);
  font-family: var(--font-action);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.aven-toast-action:active {
  transform: scale(0.96);
}

/* ---- Record sheet --------------------------------------------------------------------------- */
.log-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.log-exercise-select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  color: var(--text-primary);
  background-color: var(--bg-input);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.log-weight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 8px;
}
.log-weight-main {
  flex: 1;
  min-width: 0;
}
.log-weight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.log-step-btn {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--primary-dark);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.log-step-btn:active {
  transform: scale(0.94);
  background: rgba(35, 84, 91, 0.14);
}
.log-weight-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.log-weight-input {
  width: 100%;
  min-width: 0;
  max-width: 180px;
  padding: 2px 8px;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -1px;
  text-align: center;
  color: var(--text-primary);
  background: var(--bg-input);
  /* a field, not a headline: the boundary is --text-muted (5.1:1 on cream) because 1.4.11 asks 3:1 for the edge of an input */
  border: 2px solid var(--text-muted);
  border-radius: var(--radius-sm);
}
.log-weight-input:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 3px rgba(35, 84, 91, 0.2);
}
.log-weight-input[aria-invalid="true"] {
  border-color: var(--status-danger-text);
}
@media (max-width: 380px) {
  .log-weight-input { font-size: 2.25rem; }   /* "147.5" must not clip at 360-375 px */
}
.log-weight-unit {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.log-chip-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.log-chip {
  flex: 1;
  min-height: 44px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.log-chip:active {
  background: rgba(35, 84, 91, 0.14);
}
.log-weight-msgrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.log-weight-msgrow .log-weight-msg {
  flex: 1;
  min-width: 0;
}
/* Shown only while the weight field is focused: the iOS decimal pad has no Done / return key. */
.log-done {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--primary-dark);
  color: #FFFFFF;
  font-family: var(--font-action);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.log-done[hidden] {
  display: none;
}
.log-weight-msg {
  min-height: 1.25rem;
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary);
}
.log-weight-msg.is-error {
  font-weight: 700;
  color: var(--status-danger-text);
}
/* ---- "Get validated" (the North Star CTA on every unverified row): a real 44px target ---- */
.btn-validate-pr {
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius-xs);
  touch-action: manipulation;
}
.history-validate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* ---- Meet Mode: dark ink on the coral ground (white was 2.7:1), 44-64px controls ---------- */
.meet-screen {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 40px;
  box-sizing: border-box;
  background: transparent;
}
.meet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.meet-back {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.14);
  color: var(--ink);
  cursor: pointer;
}
.meet-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}
.meet-timer-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 12px 0 24px;
}
.meet-timer {
  padding: 0 16px;
  border-radius: 16px;
  font-size: clamp(4.5rem, 24vw, 6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--ink);
}
/* Last seconds and done: a filled pill with white text (~10:1) - a shape change, not just a hue. */
.meet-timer.is-warning,
.meet-timer.is-done {
  background: var(--danger-solid-deep);
  color: #FFFFFF;
}
.meet-controls {
  display: flex;
  gap: 16px;
}
.meet-ctl {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.meet-ctl:active {
  transform: scale(0.94);
}
.meet-ctl-primary {
  background: var(--ink);
  color: #FFFFFF;
}
.meet-ctl-secondary {
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid var(--ink);   /* the 1m/2m/3m/5m label was 4.3:1 on a 14% tint */
  color: var(--ink);
}
.meet-ctl:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.meet-result {
  min-height: 2.75rem;
  margin: 4px 0 20px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
}

/* ---- Rest-timer strip: the running Meet Mode timer follows you to every tab, IN the layout (a floating chip covered the
   subtitle / segment strip and swallowed taps in its footprint). Main area opens Meet Mode, the x dismisses in place. ---- */
.rest-strip {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  background: var(--ink);
  color: #FFFFFF;
  z-index: 5;
}
.rest-strip[hidden] {
  display: none;
}
.rest-strip.is-done {
  background: var(--danger-solid-deep);
}
.rest-strip-main {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  cursor: pointer;
  touch-action: manipulation;
}
.rest-strip-stop {
  flex: 0 0 44px;
  min-height: 44px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  background: none;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---- Meet Mode entry on TRAIN: a labelled 44px control (was an unlabeled 40px bolt) ---- */
.meet-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 22px;
  background: var(--luminous-blue);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(75, 63, 114, 0.5);
  cursor: pointer;
  touch-action: manipulation;
}
.meet-entry:active {
  transform: scale(0.96);
}

/* ---- Isolated controls that were 28-39px: 44px (design_system.md "Touch Targets") ---- */
.btn-readiness,
#btn-calc-mode-pct,
#btn-calc-mode-warmup,
#btn-calc-mode-log,
.pcm-item,
#btn-share-public-profile {
  min-height: 44px;
}
#btn-share-prs-grid,
#btn-share-metrics {
  width: 44px;
  height: 44px;
}
/* Secondary action inside a verified row: the dense-row size from the policy (32px), not 19px. */
.btn-make-badge {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ---- Hit-area contract (DL-00071): an isolated action is --hit-min (44 px) in both axes, a dense in-row icon is
   --hit-dense (32 px) with a gap. A scan of every tab found these below it; several carry an inline height, and
   min-height beats an inline height, so the rule here needs no per-element edit. ---- */
.btn-view-prs,
.btn-calc-source,
#btn-post-opportunity,
#btn-rep-badge {
  min-height: var(--hit-min);
}
.btn-make-badge {
  min-height: var(--hit-min);
}
.calc-plate-chip-narrow {
  min-height: var(--hit-dense);
}
/* ---- Text fields are 16 px on touch screens (DL-00072) --------------------------------------------------------
   iOS Safari zooms the whole page when a field under 16 px takes focus, and does not zoom back - the layout the
   athlete was using is gone mid-workout. A scan found 11 field kinds at 12-14 px (filters, exercise pickers, the
   registration sheet, legacy import). The :not() chain gives this rule enough specificity to beat the class rules
   (0,1,0) but not an inline size (the 20 px Train fields keep theirs); the 36 px Record weight field is excluded by class (.log-weight-input). Coarse
   pointers only: a desktop keeps the denser size. */
@media (pointer: coarse) {
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not(.log-weight-input) {
    font-size: var(--fs-base);
  }
}

/* A checkbox row is one tap target: the whole label is 44 px tall and the box itself is 24 px. */
label:has(> input[type="checkbox"]) {
  min-height: var(--hit-min);
}
input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Dark theme: --text-inverse flips to black but .btn keeps its dark-teal ground, which made the
   primary action ("Log Record") black on teal (2.5:1). The ground does not flip, so neither does the ink. */
[data-theme="dark"] .btn:not([style*="background"]) {
  color: #FFFFFF !important;   /* buttons with their own inline ground (mint, mustard, coral) keep their dark ink */
}

/* ---- Keyboard-aware sheets (review fix UX-B2): --kb-inset is set by updateKeyboardInset() in app_v3.js.
   The backdrop pads itself by the height the on-screen keyboard covers, so the bottom-anchored sheet sits
   ABOVE the keys, and the sheet's max-height shrinks by the same amount. 0 everywhere there is no keyboard. ---- */
.modal-backdrop {
  padding-bottom: var(--kb-inset, 0px);
  box-sizing: border-box;
  transition: opacity 0.25s ease, padding-bottom 0.2s ease;
}
.modal-content,
.modal-surface {
  max-height: calc(85dvh - var(--kb-inset, 0px));
}

/* ---- Review should-fix (2026-10-01) ---- */

/* Dark theme: the stepper glyph (#23545B on a dark card was ~1.9:1) and the ring (Luminous Blue on #121212 was ~1.5-2.0:1,
   and DL-00068(d) forbids bare Luminous Blue on dark) switch to the light tokens. */
[data-theme="dark"] .log-step-btn {
  color: var(--text-primary);
}
[data-theme="dark"] :where(button, [role="button"], a[href], input, select, textarea, summary):focus-visible {
  outline-color: var(--primary);
}
[data-theme="dark"] .history-item-weight {
  color: var(--text-primary);
}

/* "Get validated" is an action, not a verified signal: a filled Luminous Blue chip with white ink (~9:1). */
.btn-validate-pr {
  background: var(--luminous-blue);
  color: #FFFFFF;
}

/* A closed sheet is invisible AND out of the tab order / accessibility tree (it was only opacity:0 + pointer-events:none,
   so eight sheets' worth of controls stayed focusable). The delay lets the slide-down finish first. */
.modal-backdrop:not(.open) {
  visibility: hidden;
  transition: opacity 0.25s ease, padding-bottom 0.2s ease, visibility 0s linear 0.3s;
}
.modal-backdrop.open {
  visibility: visible;
}

/* Montserrat is the only face (design_system.md): controls do not inherit it by default, so every button that set no
   family rendered in the system font. Classes that set their own family keep it (this rule has the lowest specificity). */
button, input, select, textarea {
  font-family: inherit;
}