/* =============================================================================
   NMN.TIPS — main.css
   Extracted VERBATIM from the reference main.html (inline <style> blocks, in
   original document order) so the optimized main.html renders identically.
   Load order: after Bootstrap (same as the reference's cascade).
   Sections:
     1. Core site styles   (reference head block)
     2. Portal overlay     (reference <style id="portal-styles">)
     3. Modal overlay      (reference mid-document block)
   ============================================================================= */

/* ===== 1. CORE SITE STYLES (reference main.html line 11) ===== */


/* ====== FONTS ====== */
/* Papyrus is a system font (Windows/macOS) — it is NOT available on Google
   Fonts, and the old @import for it always returned 400 Bad Request without
   loading anything. Removed; font-family stacks below fall back correctly. */

/* ====== TEXTURE PATTERN (punched holes via radial-gradient) ====== */
:root {
  /* ── NMN Brand Colors ─────────────────────────────────────── */
  --nmn-pt:           var(--nmn-pt,#8b0000);   /* Natty PT — lighter red           */
  --nmn-pt-dark:      #600000;
  --nmn-pt-bg:        #fdf5f5;
  --nmn-training:     var(--nmn-brand,#780000);   /* NMN Training — deep maroon/burgundy */
  --nmn-training-dark:#4a0000;
  --nmn-training-bg:  #fdf0f0;
  --nmn-nutrition:    var(--nmn-ink,#2a2a2a);   /* NMN Nutrition — near-black/dark gray */
  --nmn-nutrition-dark:#111;
  --nmn-nutrition-bg: #f5f5f3;
  --nmn-bike:         var(--nmn-bike,#14a01e);   /* NCN Bike — green                 */
  --nmn-bike-dark:    #0d6e14;
  --nmn-bike-bg:      #f3fdf4;
  --nmn-yellow:       var(--nmn-accent,#f0f03c);   /* Logo yellow                      */
  /* ── Legacy aliases (keep existing code working) ─────────── */
  --maroon:    var(--nmn-brand,#780000);
  --dark-grey: #1a0a0a;
  --black:     #b0b0b0;
  --page-bg:   #f5f0eb;
  --text-light:#f5e8e8;
  --yellow:    var(--nmn-accent,#f0f03c);
  --green:     var(--nmn-bike,#14a01e);
  --hole-size: 3px;
  --hole-gap:  14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ====== GLOBAL FONT RULES ====== */
h1, h2, h3, h4, h5, h6 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy) !important;
}
p {
  font-family: 'Comic Sans MS', 'Comic Sans', cursive !important;
}


body {
  background: var(--page-bg);
  color: var(--text-light);
  min-height: 100vh;
}

/* ====== PUNCHED TEXTURE ====== */
.texture-dark {
  background-color: #b0b0b0;
  background-image: radial-gradient(circle, #a0a0a0 var(--hole-size), transparent var(--hole-size));
  background-size: var(--hole-gap) var(--hole-gap);
}

.texture-page {
  background-color: #ede8e2;
  background-image: radial-gradient(circle, #ddd8d2 var(--hole-size), transparent var(--hole-size));
  background-size: var(--hole-gap) var(--hole-gap);
}

/* ====== HEADER ====== */
#site-header {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 10px 0 0 0;
  border-bottom: 3px solid rgba(120,0,0,0.5);
  background-color: rgba(60,60,60,0.5) !important;
  background-image: none !important;
}
#site-header a { display: block; }
#site-header img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}

/* ====== MAIN NAV TOOLBAR ====== */
/* #main-nav moved to per-color section */
.main-nav-group {
  display: flex;
  align-items: stretch;
  border-right: 1px solid #1a0000;
  position: relative;
}
.main-nav-group:last-child { border-right: none; }

.main-nav-btn {
  background: transparent;
  color: var(--text-light);
  border: none;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.85rem;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.05em;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.main-nav-btn:hover, .main-nav-btn.active {
  background: var(--maroon);
  color: #fff;
}
.main-nav-btn .arrow { font-size: 0.65rem; }

/* Dropdown */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  z-index: 200;
  border: 1px solid var(--maroon);
  background: #f5f0eb;
}
.main-nav-group:hover .nav-dropdown { display: block; }
.nav-dropdown .main-nav-btn {
  display: block;
  width: 100%;
  border-bottom: 1px solid #1a0000;
  padding: 9px 16px;
}
.nav-dropdown .main-nav-btn:last-child { border-bottom: none; }

/* ====== LAYOUT ====== */
#content-area {
  display: flex;
  min-height: calc(100vh - 300px);
}

/* ====== FLOATING SIDEBAR ====== */
#floating-sidebar {
  width: 160px;
  min-width: 140px;
  position: -webkit-sticky; position: sticky;
  top: 48px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-right: 2px solid var(--maroon);
  border-bottom: 2px solid var(--maroon);
  border-radius: 0 0 6px 0;
  flex-shrink: 0;
  align-self: flex-start;
  transition: background 0.3s, border-color 0.3s;
  box-sizing: border-box;
}
#sidebar-content {
  padding: 10px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: min-content;
}

.sidebar-btn {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--maroon);
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.8rem;
  padding: 8px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  letter-spacing: 0.04em;
  border-radius: 2px;
  text-decoration: none;
  display: block;
  width: 100%;
}
.sidebar-btn:hover, .sidebar-btn.active {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.sidebar-section-label {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.65rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 0 2px;
  border-bottom: 1px solid #1a0000;
  margin-top: 8px;
}

/* ====== MAIN PANEL ====== */
#main-panel {
  flex: 1;
  padding: 24px 28px 0;
  min-width: 0;
}

/* ====== SERVICE PAGES ====== */
.service-page { display: none; }
.service-page.active { display: block; }

.service-hero {
  background: rgb(210,205,198);
  border: 1px solid var(--maroon);
  border-radius: 4px;
  padding: 32px;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.service-hero::before {
  display: none;
}
.service-hero h1 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 2.2rem;
  color: var(--maroon);
  position: relative;
  z-index: 1;
  text-shadow: 0 0 20px rgba(123,10,13,0.5);
}
.service-hero p {
  color: var(--nmn-muted,#9a7070);
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 12px auto 0;
  line-height: 1.7;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.service-cards[data-align="center"] { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); }
.service-cards[data-align="right"]  { justify-content: end; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); }
.service-cards[data-align="left"]   { justify-content: start; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); }
.service-card {
  background: #f0e8e8;
  border: 1px solid var(--nmn-line5,#c8a0a0);
  border-radius: 4px;
  padding: 20px;
  height: auto;
  width: auto;
  transition: border-color 0.2s, transform 0.2s;
}
.service-card:hover { border-color: var(--maroon); transform: translateY(-2px); }
.service-card h3 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: var(--maroon);
  font-size: 1rem;
  margin-bottom: 8px;
}
.service-card p { color: #7a5050; font-size: 0.875rem; line-height: 1.6; }

.section-title {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: var(--maroon);
  font-size: 1.4rem;
  margin: 24px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--maroon);
}

/* ====== MODAL OVERLAY (second carousel) ====== */
#modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
#modal-overlay.open { display: flex; }
#modal-box {
  background: #110000;
  border: 2px solid var(--maroon);
  border-radius: 6px;
  width: min(90vw, 680px);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--maroon);
}
#modal-header h2 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: var(--maroon);
  font-size: 1.2rem;
}
#modal-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
#modal-close:hover { color: var(--maroon); }
#modal-body { padding: 20px; overflow-y: auto; flex: 1; }

/* ── Newspaper modal mode — strips modal-box chrome, full-bleed layout ── */
#modal-box.modal-newspaper {
  background: #f8f4e8; /* default newsprint — overridden per service by np-wrap */
  border: none;
  border-radius: 0;
  width: min(96vw, 760px);
  max-height: 92vh;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
#modal-box.modal-newspaper #modal-header {
  display: none;
}
#modal-box.modal-newspaper #modal-body {
  padding: 0;
  overflow-y: auto;
}
#modal-box.modal-newspaper #modal-dots {
  background: #1a0a0a;
  padding: 6px 0 4px;
  border-top: 1px solid rgba(240,240,60,.15);
}
#modal-box.modal-newspaper #modal-dots .modal-dot {
  background: rgba(240,240,60,.35);
}
#modal-box.modal-newspaper #modal-dots .modal-dot.active {
  background: var(--nmn-accent,#f0f03c);
}
#modal-box.modal-newspaper #modal-nav-btns {
  background: #1a0a0a;
  border-top: 1px solid rgba(240,240,60,.15);
  padding: 8px 20px;
}
#modal-box.modal-newspaper #modal-nav-btns button {
  border-color: var(--nmn-accent,#f0f03c);
  color: var(--nmn-accent,#f0f03c);
  font-family:var(--nmn-font-display,Papyrus,fantasy);
  font-size: .78rem;
}
#modal-box.modal-newspaper #modal-nav-btns button:hover {
  background: var(--nmn-accent,#f0f03c);
  color: #1a0a0a;
}
/* Newspaper close button repositioned inside masthead area */
#modal-box.modal-newspaper #modal-close-np {
  display: flex;
}
#modal-close-np {
  display: none;
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(240,240,60,.7);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}
#modal-close-np:hover { color: var(--nmn-accent,#f0f03c); }

/* np-wrap fills the scrollable body completely */
.np-wrap { position: relative; }

/* ══════════════════════════════════════════════════════════════
   SPORTS CARD MODAL MODE
   When a staff modal opens, #modal-box gets .modal-sportscard.
   The card is full-bleed inside the modal — no extra chrome.
══════════════════════════════════════════════════════════════ */
#modal-box.modal-sportscard {
  background: #0a0a0a;
  border: none;
  border-radius: 10px;
  width: min(92vw, 400px);
  max-height: 92vh;
  box-shadow: 0 0 0 2px var(--nmn-brand,#780000), 0 0 0 4px rgba(240,240,60,.2), 0 12px 50px rgba(0,0,0,.9);
}
#modal-box.modal-sportscard #modal-header { display: none; }
#modal-box.modal-sportscard #modal-body  { padding: 0; overflow-y: auto; }
#modal-box.modal-sportscard #modal-dots  { display: none !important; }
#modal-box.modal-sportscard #modal-nav-btns { display: none !important; }
#modal-box.modal-sportscard #modal-close-np { display: flex; color: rgba(240,240,60,.7); top: 10px; right: 12px; }

/* ── Sports card inner layout ─────────────────────────────── */
.sc-card {
  background: linear-gradient(160deg, #1a0000 0%, #2a0808 35%, #1a0a00 65%, #0a0a14 100%);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Holographic foil shimmer */
.sc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(240,240,60,.05) 20%,
    transparent 38%,
    rgba(255,255,255,.04) 55%,
    rgba(240,240,60,.06) 72%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: 10px;
}
.sc-top-bar {
  background: linear-gradient(90deg, #5a0000, var(--nmn-brand,#780000), #a01010, var(--nmn-brand,#780000), #5a0000);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.sc-brand {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: .68rem;
  color: var(--nmn-accent,#f0f03c);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.sc-year {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(240,240,60,.65);
  letter-spacing: .08em;
}
/* Photo zone */
.sc-photo-zone {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(180deg, #1a0505 0%, #0a0808 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sc-photo-zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(120,0,0,.6);
}
.sc-photo-placeholder span { font-size: 3.5rem; }
.sc-photo-placeholder small { font-size: .62rem; font-family:var(--nmn-font-display,'Papyrus',fantasy); letter-spacing: .08em; color: rgba(240,240,60,.35); }
/* Foil on photo */
.sc-photo-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(240,240,60,.07) 25%, transparent 50%, rgba(255,255,255,.05) 75%, transparent 100%);
  pointer-events: none;
}
/* Position badge */
.sc-pos-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  background: rgba(10,0,0,.8);
  border: 1px solid rgba(240,240,60,.4);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: .6rem;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: var(--nmn-accent,#f0f03c);
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 3;
}
/* Service logo badge top-right */
.sc-svc-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.3rem;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(240,240,60,.4));
}
/* Name plate */
.sc-nameplate {
  background: linear-gradient(90deg, #1a0505, #280808, #1a0505);
  border-top: 1px solid rgba(240,240,60,.2);
  border-bottom: 1px solid rgba(240,240,60,.15);
  padding: 10px 16px 8px;
  position: relative;
  z-index: 2;
}
.sc-player-name {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 1.4rem;
  color: #f5e8e8;
  letter-spacing: .05em;
  text-shadow: 0 0 14px rgba(240,240,60,.25);
  line-height: 1.1;
  min-height: 1.5em;
  margin: 0;
}
.sc-player-title {
  font-size: .65rem;
  color: rgba(240,240,60,.5);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 2px;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
}
/* Stats row */
.sc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(120,0,0,.5);
  position: relative;
  z-index: 2;
}
.sc-stat {
  text-align: center;
  padding: 8px 6px;
  border-right: 1px solid rgba(120,0,0,.4);
}
.sc-stat:last-child { border-right: none; }
.sc-stat-val {
  display: block;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: .9rem;
  color: var(--nmn-accent,#f0f03c);
  text-shadow: 0 0 8px rgba(240,240,60,.35);
  line-height: 1.1;
}
.sc-stat-label {
  display: block;
  font-size: .52rem;
  color: rgba(240,240,60,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px;
}
/* Cred badges */
.sc-desc {
  padding: 10px 14px 8px;
  font-size: .76rem;
  color: rgba(220,180,180,.85);
  line-height: 1.65;
  font-family: Georgia, serif;
  font-style: italic;
  border-bottom: 1px solid rgba(120,0,0,.3);
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,.12);
}
.sc-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 14px 8px;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(120,0,0,.3);
}
.sc-badge {
  background: rgba(90,0,0,.5);
  border: 1px solid rgba(120,0,0,.8);
  color: var(--nmn-line5,#c8a0a0);
  font-size: .58rem;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  padding: 3px 9px;
  border-radius: 2px;
  letter-spacing: .07em;
  line-height: 1.4;
}
.sc-badge a { color: inherit; text-decoration: underline; }
/* Bio */
.sc-bio-text {
  padding: 10px 14px 12px;
  font-size: .76rem;
  color: rgba(200,160,160,.8);
  line-height: 1.7;
  font-family: 'Comic Sans MS', cursive;
  position: relative;
  z-index: 2;
}
/* Bottom bar */
.sc-bottom-bar {
  background: linear-gradient(90deg, #5a0000, var(--nmn-brand,#780000), #a01010, var(--nmn-brand,#780000), #5a0000);
  padding: 5px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
.sc-serial {
  font-size: .55rem;
  color: rgba(240,240,60,.55);
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  letter-spacing: .12em;
}

/* ══════════════════════════════════════════════════════════════
   STAFF CARD — PER-SERVICE COLOR THEMES
   Scoped to each modal ID so base .sc-* classes stay untouched.
   PT = lighter red/burgundy · Training = deep maroon
   Nutrition = dark gray/black · Bike = green
══════════════════════════════════════════════════════════════ */

/* ── Physical Therapy — lighter red var(--nmn-pt,#8b0000) ──────────────── */
#modal-staff-pt .sc-card {
  background: linear-gradient(160deg, #1a0000 0%, #2d0808 35%, #1a0800 65%, #0a0a14 100%);
}
#modal-staff-pt .sc-top-bar,
#modal-staff-pt .sc-bottom-bar {
  background: linear-gradient(90deg, #6a0000, var(--nmn-pt,#8b0000), #b01414, var(--nmn-pt,#8b0000), #6a0000);
}
#modal-staff-pt .sc-nameplate {
  background: linear-gradient(90deg, #1a0000, #2a0505, #1a0000);
  border-top-color: rgba(220,160,160,.25);
  border-bottom-color: rgba(220,160,160,.18);
}
#modal-staff-pt .sc-stats       { border-bottom-color: rgba(139,0,0,.6); }
#modal-staff-pt .sc-stat        { border-right-color:  rgba(139,0,0,.4); }
#modal-staff-pt .sc-desc        { border-bottom-color: rgba(139,0,0,.35); color: rgba(230,190,190,.85); }
#modal-staff-pt .sc-creds       { border-bottom-color: rgba(139,0,0,.35); }
#modal-staff-pt .sc-badge       { background: rgba(100,0,0,.5); border-color: rgba(139,0,0,.8); color: #d4a8a8; }
#modal-staff-pt .sc-bio-text    { color: rgba(210,170,170,.8); }
#modal-staff-pt #modal-box      { box-shadow: 0 0 0 2px var(--nmn-pt,#8b0000), 0 0 0 4px rgba(220,160,160,.2), 0 12px 50px rgba(0,0,0,.9); }

/* ── Personal Training — deep maroon var(--nmn-brand,#780000) ─────────────── */
#modal-staff-training .sc-card {
  background: linear-gradient(160deg, #120000 0%, #220606 35%, #140800 65%, #080810 100%);
}
#modal-staff-training .sc-top-bar,
#modal-staff-training .sc-bottom-bar {
  background: linear-gradient(90deg, #4a0000, var(--nmn-brand,#780000), #960e0e, var(--nmn-brand,#780000), #4a0000);
}
#modal-staff-training .sc-nameplate {
  background: linear-gradient(90deg, #140000, #220404, #140000);
}
#modal-staff-training .sc-stats       { border-bottom-color: rgba(120,0,0,.6); }
#modal-staff-training .sc-stat        { border-right-color:  rgba(120,0,0,.45); }
#modal-staff-training .sc-desc        { border-bottom-color: rgba(120,0,0,.4); }
#modal-staff-training .sc-creds       { border-bottom-color: rgba(120,0,0,.4); }
#modal-staff-training .sc-badge       { background: rgba(80,0,0,.55); border-color: rgba(120,0,0,.85); }

/* ── Meal Planning — dark gray / near-black var(--nmn-ink,#2a2a2a) ─────── */
#modal-staff-nutrition .sc-card {
  background: linear-gradient(160deg, #0a0a0a 0%, #1a1a1a 35%, #111108 65%, #080808 100%);
}
#modal-staff-nutrition .sc-top-bar,
#modal-staff-nutrition .sc-bottom-bar {
  background: linear-gradient(90deg, #111, var(--nmn-ink,#2a2a2a), #3a3a3a, var(--nmn-ink,#2a2a2a), #111);
}
#modal-staff-nutrition .sc-nameplate {
  background: linear-gradient(90deg, #0e0e0e, #1e1e1e, #0e0e0e);
  border-top-color:    rgba(200,200,200,.15);
  border-bottom-color: rgba(200,200,200,.1);
}
#modal-staff-nutrition .sc-player-name  { color: #e8e8e8; text-shadow: 0 0 14px rgba(200,200,200,.2); }
#modal-staff-nutrition .sc-player-title { color: rgba(200,200,200,.5); }
#modal-staff-nutrition .sc-stat-val     { color: var(--nmn-accent,#f0f03c); text-shadow: 0 0 8px rgba(240,240,60,.3); }
#modal-staff-nutrition .sc-stat-label   { color: rgba(200,200,200,.45); }
#modal-staff-nutrition .sc-stats        { border-bottom-color: rgba(80,80,80,.6); }
#modal-staff-nutrition .sc-stat         { border-right-color:  rgba(80,80,80,.4); }
#modal-staff-nutrition .sc-desc {
  border-bottom-color: rgba(80,80,80,.35);
  color: rgba(200,200,200,.75);
}
#modal-staff-nutrition .sc-creds        { border-bottom-color: rgba(80,80,80,.35); }
#modal-staff-nutrition .sc-badge        { background: rgba(50,50,50,.6); border-color: rgba(100,100,100,.7); color: #c8c8c8; }
#modal-staff-nutrition .sc-bio-text     { color: rgba(190,190,190,.75); }
#modal-staff-nutrition .sc-serial       { color: rgba(200,200,200,.5); }
#modal-staff-nutrition .sc-pos-badge    { border-color: rgba(200,200,200,.3); }
#modal-staff-nutrition .sc-photo-zone   { background: linear-gradient(180deg, #111 0%, #0a0a0a 100%); }
#modal-staff-nutrition .sc-photo-placeholder { color: rgba(100,100,100,.6); }
/* Gray modal border glow */
#modal-box.modal-sportscard:has(#modal-staff-nutrition .sc-card) {
  box-shadow: 0 0 0 2px var(--nmn-ink,#2a2a2a), 0 0 0 4px rgba(200,200,200,.15), 0 12px 50px rgba(0,0,0,.9);
}

/* ── Bike Fitting — green var(--nmn-bike,#14a01e) ───────────────────────── */
#modal-staff-bike .sc-card {
  background: linear-gradient(160deg, #021002 0%, #081808 35%, #041204 65%, #020a02 100%);
}
#modal-staff-bike .sc-top-bar,
#modal-staff-bike .sc-bottom-bar {
  background: linear-gradient(90deg, #0a6010, var(--nmn-bike,#14a01e), #1ac824, var(--nmn-bike,#14a01e), #0a6010);
}
#modal-staff-bike .sc-nameplate {
  background: linear-gradient(90deg, #031003, #081808, #031003);
  border-top-color:    rgba(100,220,100,.2);
  border-bottom-color: rgba(100,220,100,.15);
}
#modal-staff-bike .sc-player-name  { color: #e8f5e8; text-shadow: 0 0 14px rgba(20,160,30,.3); }
#modal-staff-bike .sc-player-title { color: rgba(100,220,100,.55); }
#modal-staff-bike .sc-stat-val     { color: var(--nmn-accent,#f0f03c); text-shadow: 0 0 8px rgba(240,240,60,.35); }
#modal-staff-bike .sc-stat-label   { color: rgba(100,220,100,.5); }
#modal-staff-bike .sc-stats        { border-bottom-color: rgba(20,160,30,.5); }
#modal-staff-bike .sc-stat         { border-right-color:  rgba(20,160,30,.35); }
#modal-staff-bike .sc-desc {
  border-bottom-color: rgba(20,160,30,.3);
  color: rgba(180,230,180,.85);
}
#modal-staff-bike .sc-creds        { border-bottom-color: rgba(20,160,30,.3); }
#modal-staff-bike .sc-badge        { background: rgba(10,60,10,.55); border-color: rgba(20,160,30,.7); color: #a8d8a8; }
#modal-staff-bike .sc-bio-text     { color: rgba(170,220,170,.75); }
#modal-staff-bike .sc-serial       { color: rgba(100,220,100,.5); }
#modal-staff-bike .sc-pos-badge    { background: rgba(2,10,2,.85); border-color: rgba(100,220,100,.4); color: #a0f0a0; }
#modal-staff-bike .sc-photo-zone   { background: linear-gradient(180deg, #041204 0%, #020a02 100%); }
#modal-staff-bike .sc-photo-placeholder { color: rgba(20,100,20,.6); }
#modal-staff-bike .sc-card::before {
  background: linear-gradient(
    115deg,
    transparent 0%, rgba(20,160,30,.06) 20%,
    transparent 38%, rgba(255,255,255,.03) 55%,
    rgba(20,160,30,.07) 72%, transparent 100%
  );
}
   Contact modals look like a Telegram / WhatsApp chat window.
   modal-box gets .modal-telegram; chrome is stripped and
   replaced by the chat UI inside.
══════════════════════════════════════════════════════════════ */
#modal-box.modal-telegram {
  background: #e5ddd5;          /* WhatsApp/Telegram wallpaper tan */
  border: none;
  border-radius: 12px;
  width: min(94vw, 420px);
  max-height: 92vh;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
}
#modal-box.modal-telegram #modal-header { display: none; }
#modal-box.modal-telegram #modal-body   { padding: 0; overflow-y: auto; flex: 1; }
#modal-box.modal-telegram #modal-dots   { display: none !important; }
#modal-box.modal-telegram #modal-nav-btns { display: none !important; }
#modal-box.modal-telegram #modal-close-np {
  display: flex;
  top: 12px;
  right: 14px;
  color: rgba(255,255,255,.85);
  font-size: 1.2rem;
}

/* ── Telegram chrome ──────────────────────────────────────── */
.tg-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #e5ddd5;
  border-radius: 12px;
  overflow: hidden;
}

/* Top bar — looks like a Telegram channel header */
.tg-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 46px 10px 14px; /* right pad for close btn */
  background: #2aabee;
  flex-shrink: 0;
}
.tg-topbar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.tg-topbar-info { flex: 1; min-width: 0; }
.tg-topbar-name {
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-topbar-status {
  font-size: .65rem;
  color: rgba(255,255,255,.8);
  margin-top: 1px;
}

/* Chat area — the wallpaper background with message bubbles */
.tg-chat {
  flex: 1;
  padding: 12px 10px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #e5ddd5
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(0,0,0,.04)'/%3E%3C/svg%3E");
}

/* Incoming message bubble (from NMN) */
.tg-bubble {
  background: #fff;
  border-radius: 12px 12px 12px 3px;
  padding: 8px 12px 6px;
  max-width: 88%;
  align-self: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,.13);
  font-size: .82rem;
  color: #111;
  line-height: 1.55;
  position: relative;
}
.tg-bubble-sender {
  font-size: .7rem;
  font-weight: 600;
  color: #2aabee;
  margin-bottom: 3px;
}
.tg-bubble-time {
  font-size: .6rem;
  color: #aaa;
  text-align: right;
  margin-top: 3px;
}

/* Input area — the bottom bar with pill fields */
.tg-input-area {
  background: #f0f0f0;
  border-top: 1px solid #ddd;
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.tg-field-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tg-field-label {
  font-size: .62rem;
  font-weight: 600;
  color: #2aabee;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding-left: 4px;
}
.tg-field-row input,
.tg-field-row select,
.tg-field-row textarea {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 22px;
  padding: 9px 16px;
  font-size: .82rem;
  color: #222;
  font-family: inherit;
  outline: none;
  transition: border-color .18s;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
.tg-field-row textarea {
  border-radius: 14px;
  min-height: 70px;
}
.tg-field-row input:focus,
.tg-field-row select:focus,
.tg-field-row textarea:focus {
  border-color: #2aabee;
}
.tg-field-row select option { background: #fff; color: #222; }

/* Send row — mic / attach icons + blue send circle */
.tg-send-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.tg-send-note {
  flex: 1;
  font-size: .6rem;
  color: #aaa;
  padding-left: 4px;
  line-height: 1.4;
}
.tg-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2aabee;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(42,171,238,.45);
  transition: background .15s, transform .12s;
  color: #fff;
  font-size: 1.05rem;
}
.tg-send-btn:hover { background: #1a9bd8; transform: scale(1.06); }

.modal-slide { display: none; }
.modal-slide.active { display: block; }

/* Modal nav dots */
#modal-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 12px;
  border-top: 1px solid #1a0000;
}
.modal-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2a0000;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}
.modal-dot.active { background: var(--maroon); }

/* ====== BLOG PAGE — scoped styles ====== */
#page-blog {
  background: #f0ebe4;
  padding: 0;
  border-left: 3px solid var(--yellow);
}

/* Blog hero — overrides .service-hero for blog only */
#page-blog .service-hero {
  background: #f0ebe4;
  border: none;
  border-bottom: 2px solid var(--yellow);
  border-radius: 0;
  padding: 28px 32px 20px;
  text-align: left;
  margin-bottom: 0;
}
#page-blog .service-hero::before { display: none; }
#page-blog .service-hero h1 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 1.6rem;
  color: var(--nmn-bike,#14a01e);
  text-shadow: 0 0 18px rgba(20,160,30,0.3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#page-blog .service-hero p {
  color: #5a3030;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
  text-align: left;
}

/* Blog grid — flush squares */
#page-blog .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  gap: 14px; /* slight spacing between tiles */
  margin-top: 0;
  padding: 0;
}

/* Blog tile */
#page-blog .blog-tile {
  width: 180px;
  height: 230px; /* slightly taller so a short excerpt fits */
  background: #e8e0d8;
  border: 1px solid #c8a8a0;
  border-radius: 0;
  padding: 14px 12px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  transition: background 0.2s;
}
#page-blog .blog-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s;
}
#page-blog .blog-tile:hover { background: #100000; }
#page-blog .blog-tile:hover::before { background: var(--yellow); }

/* Category tag */
#page-blog .blog-tile .tag {
  position: absolute;
  top: 10px; left: 10px;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.6rem;
  background: transparent;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  padding: 1px 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Tile text — pushed to bottom */
#page-blog .blog-tile h3 {
  color: #d8b8b8;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 0;
  font-weight: normal;
}
#page-blog .blog-tile p.tile-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  padding: 0 8px 10px;
  font-size: 0.68rem;
  line-height: 1.4;
  opacity: 0.85;
}
#page-blog .blog-tile:hover p.tile-excerpt { color: #f0e8d8 !important; }
#page-blog .blog-tile p:not(.tile-excerpt) { display: none; }

/* ====== FOOTER ====== */
#site-footer {
  border-top: 3px solid var(--maroon);
  margin-top: 28px; /* slight breathing room between page content and footer */
}
#footer-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--maroon);
  overflow-x: auto;
}
.footer-nav-btn {
  background: transparent;
  border: none;
  border-right: 1px solid #1a0000;
  color: var(--text-light);
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.8rem;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.footer-nav-btn:last-child { border-right: none; }
.footer-nav-btn:hover, .footer-nav-btn.active {
  background: var(--maroon);
  color: #fff;
}
.footer-panel { display: none; padding: 24px 28px; }
.footer-panel.active { display: block; }

.footer-wod {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.wod-term {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 2rem;
  color: var(--maroon);
}
.wod-def { color: var(--nmn-muted,#9a7070); line-height: 1.7; max-width: 600px; }
.wod-pos { color: var(--yellow); font-size: 0.8rem; font-style: italic; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 14px;
}
.partner-card {
  background: #f0e8e8;
  border: 1px solid #2e0000;
  border-radius: 4px;
  padding: 18px;
  text-align: center;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: #c0a0a0;
  font-size: 0.9rem;
}
.partner-card .partner-icon { font-size: 2rem; margin-bottom: 8px; display: block; }

.events-list { display: flex; flex-direction: column; gap: 12px; }
.event-card {
  display: flex;
  gap: 16px;
  background: #f0e8e8;
  border: 1px solid #2e0000;
  border-left: 3px solid var(--maroon);
  border-radius: 4px;
  padding: 14px 18px;
  align-items: flex-start;
}
.event-date {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: var(--maroon);
  font-size: 0.85rem;
  min-width: 60px;
  text-align: center;
}
.event-date .day { font-size: 1.6rem; line-height: 1; display: block; }
.event-date .mon { font-size: 0.7rem; display: block; color: var(--yellow); }
.event-info h4 { color: var(--text-light); margin-bottom: 4px; font-family:var(--nmn-font-display,'Papyrus',fantasy); }
.event-info p { color: #5a3030; font-size: 0.8rem; }

/* ====== FOOTER BOTTOM ====== */
.footer-bottom {
  text-align: center;
  padding: 14px;
  color: #3a2020;
  font-size: 0.75rem;
  border-top: 1px solid #1a0000;
}
.footer-bottom a { color: var(--maroon); text-decoration: none; }

/* ====== COMING SOON BADGE ====== */
.coming-badge {
  display: inline-block;
  background: var(--maroon);
  color: #fff;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.65rem;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.1em;
  border-radius: 2px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 700px) {
  #floating-sidebar { width: 120px; min-width: 100px; }
  #main-panel { padding: 14px 12px; }
  .service-hero h1 { font-size: 1.5rem; }
  .footer-panel { padding: 16px 14px; }
  /* Stack any inline 2- or 3-column form grids in popups so fields don't get crushed */
  #portal-popup [style*="grid-template-columns:1fr 1fr 1fr"],
  #portal-popup [style*="grid-template-columns: 1fr 1fr 1fr"],
  #portal-popup [style*="grid-template-columns:1fr 1fr"],
  #portal-popup [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Let wide tables scroll horizontally instead of squeezing illegibly */
  .measurements-table { display: block; overflow-x: auto; white-space: nowrap; }
  /* Tighten modal padding on narrow phones */
  #login-box, #forgot-pw-screen > div, .coming-soon-message > div {
    padding: 28px 22px !important;
  }
  #portal-popup-body { padding: 14px 14px 20px !important; }

  /* Service accent color flows through CSS custom property set by openPopup */
  #portal-popup-body {
    --popup-accent: var(--nmn-brand,#780000);
  }
  #portal-popup-body .section-title,
  #portal-popup-body .section-head {
    color: var(--popup-accent);
    border-bottom-color: var(--popup-accent);
  }
  #portal-popup-body .admin-tab.active,
  #portal-popup-body .popup-tab.active {
    background: var(--popup-accent);
    border-color: var(--popup-accent);
  }
}

@media (max-width: 480px) {
  .main-nav-btn { padding: 10px 12px; font-size: 0.78rem; }
  #portal-popup { padding-top: 20px; }
  #portal-popup > div { width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; margin-bottom: 0 !important; }
}

/* ====== STAFF CARDS (modal) ====== */
.staff-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.staff-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid var(--nmn-brand,#780000);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s;
}
.staff-avatar:hover { border-color: var(--yellow); }
.staff-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.staff-avatar .avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
}
.staff-avatar:hover .avatar-overlay { opacity: 1; }
.staff-avatar .avatar-overlay .av-icon { font-size: 1.2rem; }
.staff-avatar-upload { display: none; }
.staff-info { flex: 1; min-width: 180px; }
.staff-name {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: var(--maroon);
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.staff-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cred-badge {
  background: #190000;
  border: 1px solid var(--maroon);
  color: #c0a0a0;
  font-size: 0.7rem;
  padding: 2px 8px;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  letter-spacing: 0.06em;
}
.staff-bio {
  color: var(--nmn-muted,#9a7070);
  font-size: 0.85rem;
  line-height: 1.75;
  margin-bottom: 8px;
}
.staff-bio:first-of-type {
  color: var(--yellow);
  font-style: italic;
  border-left: 2px solid var(--maroon);
  padding-left: 10px;
  margin-bottom: 12px;
}
/* ====== CONTACT FORMS (modal) ====== */
.contact-modal-title {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: var(--maroon);
  font-size: 1.15rem;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a0000;
}
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.cf-row { display: flex; flex-direction: column; gap: 4px; }
.cf-row label {
  color: var(--nmn-muted,#9a7070);
  font-size: 0.75rem;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  letter-spacing: 0.05em;
}
.cf-row input,
.cf-row select,
.cf-row textarea {
  background: #1a0808;
  border: 1px solid #2a0000;
  color: #f0ece8;
  padding: 8px 10px;
  font-size: 0.82rem;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}
.cf-row input:focus,
.cf-row select:focus,
.cf-row textarea:focus { border-color: var(--nmn-brand,#780000); }
.cf-row select option {
  background: #1a0808;
  color: #f0ece8;
}
.cf-submit {
  background: var(--nmn-brand,#780000);
  color: #fff;
  border: none;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.9rem;
  padding: 10px 24px;
  cursor: pointer;
  letter-spacing: 0.08em;
  align-self: flex-start;
  transition: background 0.2s;
  border-radius: 2px;
  margin-top: 4px;
}
.cf-submit:hover { background: #8a0000; }
.cf-note {
  color: #3a2020;
  font-size: 0.7rem;
  margin-top: 2px;
  font-style: italic;
}
.cf-success {
  background: #0a1a0a;
  border: 1px solid #1a6a1a;
  color: #5ecf6e;
  padding: 12px 16px;
  font-size: 0.85rem;
  border-radius: 2px;
  margin-top: 8px;
  display: none;
}


/* ====== SCROLL TO TOP ====== */
#scroll-top {
  position: fixed;
  bottom: 84px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--maroon);
  color: #fff;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
#scroll-top:hover { background: #8a0000; transform: translateY(-3px); }
#scroll-top.visible { display: flex; }


/* ====== BLOG POST IMAGE CAROUSEL ====== */
.post-img-carousel {
  position: relative;
  width: 100%;
  background: #e8e0d8;
  border: 1px solid #c0a0a0;
  border-radius: 3px;
  margin-bottom: 16px;
  overflow: hidden;
}
.post-img-track {
  display: flex;
  transition: transform 0.35s ease;
}
.post-img-slide {
  min-width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0000;
  position: relative;
  overflow: hidden;
}
.post-img-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 180px;
  color: #8a5050;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  border: 2px dashed #c0a0a0;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.post-img-placeholder:hover { border-color: var(--maroon); color: var(--maroon); }
.post-img-placeholder .ph-icon { font-size: 2.2rem; opacity: 0.5; }
.post-img-upload-input { display: none; }

/* carousel arrows */
.pic-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(120,0,0,0.75);
  color: #fff;
  border: none;
  width: 30px;
  height: 44px;
  cursor: pointer;
  font-size: 1rem;
  z-index: 10;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic-arrow:hover { background: var(--maroon); }
.pic-arrow.left  { left: 0;  border-radius: 0 3px 3px 0; }
.pic-arrow.right { right: 0; border-radius: 3px 0 0 3px; }

/* pic dots */
.pic-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 8px;
  background: #0a0000;
}
.pic-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2a0000;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.pic-dot.active { background: var(--maroon); }

/* add-photo button */
.add-photo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #b08080;
  color: #7a4040;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 0.72rem;
  padding: 5px 12px;
  cursor: pointer;
  margin: 0 0 14px auto;
  border-radius: 2px;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.add-photo-btn:hover { border-color: var(--maroon); color: var(--maroon); }


/* ====== TOOLBAR PER-SERVICE COLORS ====== */
#main-nav {
  background: transparent;
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-bottom: 2px solid var(--maroon);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  position: -webkit-sticky; position: sticky;
  top: 0;
  z-index: 300;
}

/* ── TOOLBAR BG PER PAGE ── */
#main-nav { transition: background 0.35s; }
#main-nav.nav-bg-pt        { background: #f0c8c8; border-bottom-color: var(--nmn-brand,#780000); }
#main-nav.nav-bg-training  { background: #d88888; border-bottom-color: var(--nmn-brand,#780000); }
#main-nav.nav-bg-nutrition { background: #c8c8c8; border-bottom-color: #444; }
#main-nav.nav-bg-bike      { background: #b8e8b8; border-bottom-color: var(--nmn-bike,#14a01e); }
#main-nav.nav-bg-blog      { background: #f8f898; border-bottom-color: #b8b800; }

/* ── BUTTON BASE COLORS (transparent so bg shows through) ── */
.main-nav-btn {
  background: transparent !important;
}

/* PT — deep crimson on hover/active */
.main-nav-bg-pt .main-nav-btn:hover,
#main-nav.nav-bg-pt .main-nav-btn:hover,
#main-nav.nav-bg-pt .main-nav-btn.active {
  background: var(--nmn-brand,#780000) !important;
  color: #fff;
}

/* Training — deeper red */
#main-nav.nav-bg-training .main-nav-btn:hover,
#main-nav.nav-bg-training .main-nav-btn.active {
  background: #5a0000 !important;
  color: #fff;
}

/* Nutrition — dark charcoal */
#main-nav.nav-bg-nutrition .main-nav-btn:hover,
#main-nav.nav-bg-nutrition .main-nav-btn.active {
  background: var(--nmn-ink,#2a2a2a) !important;
  color: #fff;
}

/* Bike — logo green */
#main-nav.nav-bg-bike .main-nav-btn:hover,
#main-nav.nav-bg-bike .main-nav-btn.active {
  background: var(--nmn-bike,#14a01e) !important;
  color: #fff;
}

/* Blog — logo yellow (darken text) */
#main-nav.nav-bg-blog .main-nav-btn:hover,
#main-nav.nav-bg-blog .main-nav-btn.active {
  background: var(--nmn-accent,#f0f03c) !important;
  color: #2a2a00;
}

/* Button text colors per bg */
#main-nav.nav-bg-pt .main-nav-btn        { color: #4a0000; }
#main-nav.nav-bg-training .main-nav-btn  { color: #2a0000; }
#main-nav.nav-bg-nutrition .main-nav-btn { color: #1a1a1a; }
#main-nav.nav-bg-bike .main-nav-btn      { color: #053a08; }
#main-nav.nav-bg-blog .main-nav-btn      { color: #3a3a00; }

/* Dropdown matches toolbar bg */
.nav-dropdown { background: inherit; }


/* ====== BLOG PAGE — per-category tile colors ====== */
#page-blog .blog-tile[data-cat="therapy"]  { background: #f0c8c8; border-color: #c89090; }
#page-blog .blog-tile[data-cat="training"] { background: #d88888; border-color: #b06060; }
#page-blog .blog-tile[data-cat="meals"]    { background: #c8c8c8; border-color: #a0a0a0; }
#page-blog .blog-tile[data-cat="bikes"]    { background: #b8e8b8; border-color: #88c088; }

#page-blog .blog-tile[data-cat="therapy"]:hover  { background: #e8a8a8; }
#page-blog .blog-tile[data-cat="training"]:hover { background: #c87070; }
#page-blog .blog-tile[data-cat="meals"]:hover    { background: #b0b0b0; }
#page-blog .blog-tile[data-cat="bikes"]:hover    { background: #98d898; }

/* top-bar accent on hover matches category */
#page-blog .blog-tile[data-cat="therapy"]:hover::before  { background: var(--nmn-brand,#780000); }
#page-blog .blog-tile[data-cat="training"]:hover::before { background: #5a0000; }
#page-blog .blog-tile[data-cat="meals"]:hover::before    { background: var(--nmn-ink,#2a2a2a); }
#page-blog .blog-tile[data-cat="bikes"]:hover::before    { background: var(--nmn-bike,#14a01e); }

/* tile text color — dark for light bg */
#page-blog .blog-tile[data-cat="therapy"]  h3 { color: #4a0000; }
#page-blog .blog-tile[data-cat="training"] h3 { color: #2a0000; }
#page-blog .blog-tile[data-cat="meals"]    h3 { color: #1a1a1a; }
#page-blog .blog-tile[data-cat="bikes"]    h3 { color: #053a08; }

/* category tags — solid fill matching category */
#page-blog .blog-tile[data-cat="therapy"]  .tag { background: var(--nmn-brand,#780000); color: #fff; border-color: var(--nmn-brand,#780000); }
#page-blog .blog-tile[data-cat="training"] .tag { background: #5a0000; color: #fff; border-color: #5a0000; }
#page-blog .blog-tile[data-cat="meals"]    .tag { background: var(--nmn-ink,#2a2a2a); color: #fff; border-color: var(--nmn-ink,#2a2a2a); }
#page-blog .blog-tile[data-cat="bikes"]    .tag { background: var(--nmn-bike,#14a01e); color: #fff; border-color: var(--nmn-bike,#14a01e); }

/* ====== BLOG SIDEBAR — per-category button colors ====== */
/* All Posts */
#floating-sidebar .sidebar-btn[onclick*="'all'"] {
  background: #f8f898; color: #3a3a00; border-color: #c8c800;
}
#floating-sidebar .sidebar-btn[onclick*="'all'"]:hover {
  background: var(--nmn-accent,#f0f03c); color: #2a2a00; border-color: #b0b000;
}
/* Therapy */
#floating-sidebar .sidebar-btn[onclick*="'therapy'"] {
  background: #f0c8c8; color: #4a0000; border-color: #c89090;
}
#floating-sidebar .sidebar-btn[onclick*="'therapy'"]:hover {
  background: var(--nmn-brand,#780000); color: #fff; border-color: var(--nmn-brand,#780000);
}
/* Training */
#floating-sidebar .sidebar-btn[onclick*="'training'"] {
  background: #d88888; color: #2a0000; border-color: #b06060;
}
#floating-sidebar .sidebar-btn[onclick*="'training'"]:hover {
  background: #5a0000; color: #fff; border-color: #5a0000;
}
/* Meals */
#floating-sidebar .sidebar-btn[onclick*="'meals'"] {
  background: #c8c8c8; color: #1a1a1a; border-color: #a0a0a0;
}
#floating-sidebar .sidebar-btn[onclick*="'meals'"]:hover {
  background: var(--nmn-ink,#2a2a2a); color: #fff; border-color: var(--nmn-ink,#2a2a2a);
}
/* Bikes */
#floating-sidebar .sidebar-btn[onclick*="'bikes'"] {
  background: #b8e8b8; color: #053a08; border-color: #88c088;
}
#floating-sidebar .sidebar-btn[onclick*="'bikes'"]:hover {
  background: var(--nmn-bike,#14a01e); color: #fff; border-color: var(--nmn-bike,#14a01e);
}


/* ====== BLOG TILE THUMBNAIL ====== */
.tile-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.tile-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tile-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  font-size: 0.6rem;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  letter-spacing: 0.06em;
  opacity: 0.5;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.tile-thumb-placeholder .th-icon { font-size: 1.4rem; }
.tile-thumb-upload { display: none; }

/* tile layout adjustment — stack thumb above tag+title */
#page-blog .blog-tile {
  justify-content: flex-start;
  padding: 0;
}
#page-blog .blog-tile .tag {
  position: static;
  display: inline-block;
  margin: 6px 8px 4px;
}
#page-blog .blog-tile h3 {
  padding: 0 8px 8px;
}


/* ====== SIDEBAR PER-PAGE COLORS ====== */
#floating-sidebar { transition: background 0.35s, border-color 0.35s; }

#floating-sidebar.sb-pt        { background: #f0c8c8; border-right-color: var(--nmn-brand,#780000); }
#floating-sidebar.sb-training  { background: #d88888; border-right-color: var(--nmn-brand,#780000); }
#floating-sidebar.sb-nutrition { background: #c8c8c8; border-right-color: #444; }
#floating-sidebar.sb-bike      { background: #b8e8b8; border-right-color: var(--nmn-bike,#14a01e); }

/* Sidebar button text color per page */
#floating-sidebar.sb-pt .sidebar-btn        { color: #4a0000; border-color: #a06060; }
#floating-sidebar.sb-training .sidebar-btn  { color: #2a0000; border-color: #905050; }
#floating-sidebar.sb-nutrition .sidebar-btn { color: #1a1a1a; border-color: #888; }
#floating-sidebar.sb-bike .sidebar-btn      { color: #053a08; border-color: #70b070; }

#floating-sidebar.sb-pt .sidebar-btn:hover,
#floating-sidebar.sb-pt .sidebar-btn.active        { background: var(--nmn-brand,#780000); color: #fff; border-color: var(--nmn-brand,#780000); }
#floating-sidebar.sb-training .sidebar-btn:hover,
#floating-sidebar.sb-training .sidebar-btn.active  { background: #5a0000; color: #fff; border-color: #5a0000; }
#floating-sidebar.sb-nutrition .sidebar-btn:hover,
#floating-sidebar.sb-nutrition .sidebar-btn.active { background: var(--nmn-ink,#2a2a2a); color: #fff; border-color: var(--nmn-ink,#2a2a2a); }
#floating-sidebar.sb-bike .sidebar-btn:hover,
#floating-sidebar.sb-bike .sidebar-btn.active      { background: var(--nmn-bike,#14a01e); color: #fff; border-color: var(--nmn-bike,#14a01e); }

#floating-sidebar.sb-pt .sidebar-section-label        { color: var(--nmn-brand,#780000); border-bottom-color: #c89090; }
#floating-sidebar.sb-training .sidebar-section-label  { color: #5a0000; border-bottom-color: #a07070; }
#floating-sidebar.sb-nutrition .sidebar-section-label { color: #1a1a1a; border-bottom-color: #aaa; }
#floating-sidebar.sb-bike .sidebar-section-label      { color: #053a08; border-bottom-color: #88c088; }


/* ====== HERO TITLE COLORS PER PAGE ====== */
/* PT — logo crimson var(--nmn-brand,#780000) */
.service-hero.hero-pt h1 {
  color: var(--nmn-brand,#780000);
  text-shadow: 0 0 18px rgba(120,0,0,0.3);
}
/* Training — deeper crimson */
.service-hero.hero-training h1 {
  color: #5a0000;
  text-shadow: 0 0 18px rgba(90,0,0,0.3);
}
/* Nutrition/Meal Planning — dark charcoal (logo black) */
.service-hero.hero-nutrition h1 {
  color: #1a1a1a;
  text-shadow: 0 0 18px rgba(20,20,20,0.2);
}
/* Bike Fitting — logo green var(--nmn-bike,#14a01e) */
.service-hero.hero-bike h1 {
  color: var(--nmn-bike,#14a01e);
  text-shadow: 0 0 18px rgba(20,160,30,0.3);
}
/* Blog — logo green */
.service-hero.hero-blog h1 {
  color: var(--nmn-bike,#14a01e);
  text-shadow: 0 0 18px rgba(20,160,30,0.3);
}


/* ====== COMING SOON BLUR OVERLAY ====== */
.coming-soon-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 160px; /* clear the sidebar */
  right: 0;
  bottom: 0;
  z-index: 300;
  pointer-events: none;
  background: rgba(240,220,220,0.15);
}
.coming-soon-overlay.active {
  display: block;
}
/* Blurs only main-panel, not header/nav/sidebar/footer */
#main-panel.blurred {
  filter: blur(5px);
  pointer-events: none;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.coming-soon-message {
  position: fixed;
  top: 50%;
  left: calc(160px + (100vw - 160px) / 2); /* centered over main panel */
  transform: translate(-50%, -50%);
  z-index: 400;
  text-align: center;
  pointer-events: none;
  display: none;
}
.coming-soon-message.active { display: block; }
.coming-soon-message h2 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy) !important;
  font-size: 4rem;
  color: var(--nmn-brand,#780000);
  letter-spacing: 0.2em;
  text-shadow:
    0 0 30px rgba(120,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.coming-soon-message p {
  font-family: 'Comic Sans MS', cursive !important;
  font-size: 1.1rem;
  color: #5a0000;
  margin-top: 12px;
  letter-spacing: 0.08em;
}
.coming-soon-message .cs-date {
  display: inline-block;
  margin-top: 16px;
  background: rgba(120,0,0,0.85);
  color: #fff;
  font-family:var(--nmn-font-display,'Papyrus',fantasy) !important;
  font-size: 1rem;
  padding: 8px 24px;
  letter-spacing: 0.12em;
  border-radius: 2px;
}
.cs-countdown {
  display: none;
  margin-top: 18px;
  gap: 16px;
  justify-content: center;
}
.cs-countdown.active { display: flex; }
.cs-countdown-unit {
  text-align: center;
  background: rgba(120,0,0,0.88);
  border-radius: 4px;
  padding: 10px 14px;
  min-width: 64px;
}
.cs-countdown-unit .cs-count-num {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size: 2rem;
  color: var(--nmn-accent,#f0f03c);
  display: block;
  line-height: 1;
}
.cs-countdown-unit .cs-count-label {
  font-family: 'Comic Sans MS', cursive;
  font-size: .65rem;
  color: rgba(255,255,255,.75);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}


/* ── RICH BLOG TILE (dynamic) ── */
.blog-tile .tile-date {
  font-size: 0.62rem;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin: 0 8px 6px;
}


/* ── PORTAL POPUP MODAL ── */
#portal-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 8000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  overflow-y: auto;
}
#portal-modal.open { display: flex; }
#portal-modal-box {
  background: #f5f0eb;
  border: 2px solid var(--nmn-brand,#780000);
  border-radius: 6px;
  width: min(96vw, 960px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
#portal-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--nmn-brand,#780000);
  border-radius: 4px 4px 0 0;
  position: -webkit-sticky; position: sticky;
  top: 0;
  z-index: 10;
}
#portal-modal-topbar h3 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy);
  color: #fff;
  font-size: .95rem;
  letter-spacing: .08em;
}
#portal-modal-topbar button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}
#portal-modal-topbar button:hover { color: var(--nmn-accent,#f0f03c); }
#portal-modal-content { padding: 20px 24px 28px; flex: 1; }


/* ── COLLAPSIBLE SIDEBAR SECTIONS ── */
.sidebar-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 8px 4px;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.sidebar-collapse-header .sidebar-section-label {
  padding: 0;
  border-bottom: none;
  margin: 0;
  flex: 1;
}
/* Nested sub-group headers inside Admin */
.sidebar-sub-header {
  padding: 4px 8px;
  border-radius: 2px;
  margin-top: 2px;
}
.sidebar-sub-header:hover {
  background: rgba(120,0,0,.12) !important;
}
.sidebar-collapse-arrow {
  font-size: .65rem;
  color: var(--maroon);
  transition: transform .2s;
  margin-left: 4px;
}
.sidebar-collapse-header.collapsed .sidebar-collapse-arrow {
  transform: rotate(-90deg);
}
.sidebar-collapse-body {
  overflow: hidden;
  transition: max-height .25s ease;
  max-height: 1200px;
}
.sidebar-collapse-body.collapsed {
  max-height: 0;
}
/* Portal nav section always visible, styled differently */
.sidebar-portal-section {
  border-top: 2px solid var(--maroon);
  margin-top: 8px;
  padding-top: 4px;
}
.sidebar-portal-section .sidebar-section-label {
  color: var(--maroon);
}



/* ── PORTAL ADDITIONS ── */
.acct-item {
  display: block; width: 100%; background: none; border: none;
  text-align: left; padding: 9px 16px; font-family: 'Comic Sans MS', cursive;
  font-size: .82rem; cursor: pointer; border-bottom: 1px solid #f0e8e8; color: #1a0a0a;
}
.acct-item:hover { background: #f5eded; }
.acct-item:last-child { border-bottom: none; }
#floating-sidebar { max-height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; }
#sidebar-content { padding: 10px 8px 16px; display: flex; flex-direction: column; gap: 6px; }


/* ── PORTAL OVERLAY STYLES ── */
/* portal-overlay is hidden — portal sections render inside #main-panel */
#portal-overlay { display: none; }
#portal-overlay h1,
#portal-overlay h2,
#portal-overlay h3,
#portal-overlay h4,
#portal-overlay h5,
#portal-overlay h6 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy) !important;
}
#portal-overlay p,
#portal-overlay li,
#portal-overlay td,
#portal-overlay th {
  font-family: 'Comic Sans MS', cursive !important;
}
/* Scope all portal rules */

:root {
  --maroon:var(--nmn-brand,#780000); --yellow:var(--nmn-accent,#f0f03c); --green:var(--nmn-bike,#14a01e);
  --bg:#f5f0eb; --panel:#fff; --border:var(--nmn-line5,#c8a0a0);
  --text:#1a0a0a; --muted:#7a5050; --header-h:56px;
  --therapy-bg:#f0c8c8; --training-bg:#d88888;
  --nutrition-bg:#c8c8c8; --bike-bg:#b8e8b8;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Comic Sans MS',cursive;background:var(--bg);color:var(--text);min-height:100vh;}
h1,h2,h3,h4,h5,h6{font-family:var(--nmn-font-display,'Papyrus',fantasy)!important;}
p,li,td,th{font-family:'Comic Sans MS',cursive!important;}

/* ── HEADER ── */
#portal-header{
  height:var(--header-h);background:#b0b0b0;
  background-image:radial-gradient(circle,#a0a0a0 2px,transparent 2px);
  background-size:14px 14px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;border-bottom:2px solid rgba(120,0,0,.5);
  position: -webkit-sticky; position: sticky;top:0;z-index:200;
}
#portal-header h1{font-family:var(--nmn-font-display,'Papyrus',fantasy);color:var(--maroon);font-size:1.1rem;letter-spacing:.1em;}
#header-right{display:flex;gap:10px;align-items:center;}
.hdr-btn{background:var(--maroon);color:#fff;border:none;font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size:.78rem;padding:7px 16px;cursor:pointer;border-radius:2px;letter-spacing:.06em;transition:background .2s;}
.hdr-btn:hover{background:#9a0000;}
.hdr-btn.green{background:var(--green);}
.hdr-btn.grey{background:#555;}

/* account dropdown */
#account-wrap{position:relative;}
#account-btn{display:none;}
#account-dropdown{
  display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:#fff;border:1px solid var(--border);border-radius:4px;
  min-width:180px;z-index:300;box-shadow:0 4px 16px rgba(0,0,0,.15);
}
#account-dropdown.open{display:block;}
.acct-item{display:block;width:100%;background:none;border:none;text-align:left;
  padding:10px 16px;font-family:'Comic Sans MS',cursive;font-size:.82rem;
  cursor:pointer;border-bottom:1px solid #f0e8e8;color:var(--text);}
.acct-item:hover{background:#f5eded;}
.acct-item:last-child{border-bottom:none;}
.acct-item.logout{color:var(--maroon);}

/* ── LOGIN SCREEN ── */
#login-screen{
  position:fixed;inset:0;background:rgba(10,0,0,.92);
  display:flex;align-items:center;justify-content:center;z-index:9999;
}
#login-box{
  background:#150000;border:2px solid var(--maroon);
  border-radius:6px;padding:40px 48px;text-align:center;width:min(90vw,360px);box-sizing:border-box;
}
#login-box h1{color:var(--maroon);font-size:1.5rem;margin-bottom:6px;}
#login-box p{color:var(--nmn-muted,#9a7070);font-size:.8rem;margin-bottom:24px;}
.login-field{width:100%;background:#0a0000;border:1px solid #3a0000;
  color:#f5e8e8;padding:10px 14px;font-family:'Comic Sans MS',cursive;
  font-size:.9rem;border-radius:2px;margin-bottom:12px;outline:none;}
.login-field:focus{border-color:var(--maroon);}
#login-btn{width:100%;background:var(--maroon);color:#fff;border:none;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:1rem;padding:11px;cursor:pointer;border-radius:2px;}
#login-btn:hover{background:#9a0000;}
#login-error{color:#ff6060;font-size:.78rem;margin-top:10px;display:none;}
.login-links{display:flex;justify-content:space-between;margin-top:14px;}
.login-link{background:none;border:none;color:var(--nmn-muted,#9a7070);font-size:.72rem;cursor:pointer;text-decoration:underline;}
.login-link:hover{color:var(--maroon);}

/* ── MAIN LAYOUT ── */
#portal-body{display:flex;min-height:calc(100vh - var(--header-h));}
#portal-sidebar{
  width:200px;min-width:180px;flex-shrink:0;
  background:#ddd8d0;border-right:2px solid var(--border);
  padding:16px 0;position: -webkit-sticky; position: sticky;top:var(--header-h);
  height:calc(100vh - var(--header-h));overflow-y:auto;
}
#portal-main{flex:1;padding:24px 28px 0;min-width:0;overflow-y:auto;}

.nav-label{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.62rem;color:var(--maroon);
  text-transform:uppercase;letter-spacing:.12em;padding:10px 16px 4px;
  border-top:1px solid var(--border);margin-top:8px;}
.nav-label:first-child{margin-top:0;border-top:none;}
.portal-nav-btn{display:block;width:100%;background:transparent;border:none;
  text-align:left;padding:9px 16px;font-family:'Comic Sans MS',cursive;
  font-size:.82rem;cursor:pointer;color:var(--text);transition:background .15s;
  border-left:3px solid transparent;}
.portal-nav-btn:hover{background:#ccc8c0;}
.portal-nav-btn.active{background:#c8b8b8;border-left-color:var(--maroon);color:var(--maroon);}
.locked-service{opacity:.4;cursor:not-allowed;}

/* ── SECTION VIEWS ── */
.portal-section{display:none;}
.portal-section.active{display:block;}

/* ── SERVICE HERO CARD ── */
.service-hero-card{
  background:rgb(210,205,198);border:1px solid var(--border);
  border-radius:4px;padding:24px 28px;margin-bottom:20px;
}
.service-hero-card h2{color:var(--maroon);font-size:1.6rem;margin-bottom:6px;}
.service-hero-card p{color:var(--muted);font-size:.85rem;line-height:1.7;}

/* ── CARDS GRID ── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:8px;}
.tile-card{background:#f0e8e8;border:1px solid var(--nmn-line5,#c8a0a0);border-radius:4px;padding:20px;cursor:pointer;transition:all .2s;}
.tile-card:hover{border-color:var(--maroon);transform:translateY(-2px);}
.tile-card h3{color:var(--maroon);font-size:1rem;margin-bottom:6px;}
.tile-card p{color:var(--muted);font-size:.82rem;line-height:1.6;}

/* ── WORKOUT TILES ── */
.workout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:12px;}
.workout-tile{background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden;}
.workout-tile-header{padding:14px 16px;background:#f5eded;border-bottom:1px solid var(--nmn-line,#e8d8d8);
  display:flex;justify-content:space-between;align-items:center;}
.workout-tile-header h3{font-size:.95rem;color:var(--maroon);}
.workout-badge{font-size:.65rem;font-family:var(--nmn-font-display,'Papyrus',fantasy);padding:2px 8px;
  border-radius:2px;background:var(--maroon);color:#fff;}
.workout-body{padding:14px 16px;}
.exercise-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f0e8e8;}
.exercise-row:last-child{border-bottom:none;}
.exercise-check{width:18px;height:18px;accent-color:var(--maroon);cursor:pointer;flex-shrink:0;}
.exercise-name{flex:1;font-size:.82rem;}
.exercise-sets{font-size:.75rem;color:var(--muted);white-space:nowrap;}
.progress-bar-wrap{margin-top:10px;}
.progress-bar-label{font-size:.72rem;color:var(--muted);margin-bottom:4px;display:flex;justify-content:space-between;}
.progress-bar{height:8px;background:var(--nmn-line,#e8d8d8);border-radius:4px;overflow:hidden;}
.progress-fill{height:100%;background:var(--maroon);border-radius:4px;transition:width .4s;}

/* ── BODY MAP ── */
#body-map-section{margin-bottom:24px;}
.body-map-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.map-btn{background:#fff;border:1px solid var(--border);color:var(--text);
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.75rem;padding:6px 14px;
  cursor:pointer;border-radius:2px;transition:all .2s;}
.map-btn:hover,.map-btn.active{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.pain-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.pain-dot{display:flex;align-items:center;gap:5px;font-size:.72rem;cursor:pointer;}
.pain-dot .dot{width:12px;height:12px;border-radius:50%;border:2px solid #000;}
.body-map-area{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;}
.body-svg-wrap{position:relative;flex-shrink:0;}
.body-svg-wrap svg{display:block;}
.pain-marker{position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(0,0,0,.4);transform:translate(-50%,-50%);
  cursor:pointer;transition:transform .15s;}
.pain-marker:hover{transform:translate(-50%,-50%) scale(1.3);}
.pain-notes-panel{flex:1;min-width:220px;}
.pain-note-item{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:10px 14px;margin-bottom:8px;font-size:.8rem;}
.pain-note-item .pn-type{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.65rem;
  padding:1px 6px;border-radius:2px;color:#fff;display:inline-block;margin-bottom:4px;}
.pain-note-item .pn-loc{color:var(--muted);font-size:.75rem;margin-bottom:4px;}
.pain-note-item .pn-remove{background:none;border:none;color:#c00;cursor:pointer;font-size:.75rem;}
#canvas-3d{width:100%;max-width:300px;height:380px;border-radius:4px;
  border:1px solid var(--border);background:#1a1a2e;display:none;}

/* ── VITALS ── */
.vitals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:8px;}
.vital-card{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:14px;text-align:center;}
.vital-value{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:1.5rem;color:var(--maroon);}
.vital-label{font-size:.68rem;color:var(--muted);margin-top:2px;font-family:var(--nmn-font-display,'Papyrus',fantasy);letter-spacing:.06em;}
.vital-unit{font-size:.7rem;color:var(--muted);}
.vital-date{font-size:.65rem;color:#aaa;margin-top:4px;}

/* ── BIKE FIT ── */
.bike-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px;}
.bike-type-card{background:#fff;border:2px solid #e0d0d0;border-radius:4px;
  padding:14px;text-align:center;cursor:pointer;transition:all .2s;}
.bike-type-card:hover,.bike-type-card.selected{border-color:var(--green);background:#f0fbf0;}
.bike-type-card .bike-icon{font-size:2.4rem;display:block;margin-bottom:6px;}
.bike-type-card h4{font-size:.82rem;color:var(--text);}
.measurements-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.82rem;}
.measurements-table th{background:#f5eded;color:var(--maroon);font-family:var(--nmn-font-display,'Papyrus',fantasy);
  padding:8px 12px;border:1px solid var(--border);text-align:left;}
.measurements-table td{padding:8px 12px;border:1px solid var(--nmn-line,#e8d8d8);}
.measurements-table tr:nth-child(even) td{background:#faf5f5;}
.measure-input{width:100%;border:none;background:transparent;font-family:'Comic Sans MS',cursive;
  font-size:.82rem;color:var(--text);outline:none;}
.measure-input:focus{background:#fff8f8;}

/* ── NUTRITION ── */
.diet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.diet-card{background:#fff;border:2px solid #e0d0d0;border-radius:4px;
  padding:12px;text-align:center;cursor:pointer;transition:all .2s;}
.diet-card:hover,.diet-card.selected{border-color:var(--maroon);background:#fff5f5;}
.diet-card .diet-icon{font-size:1.8rem;display:block;margin-bottom:4px;}
.diet-card h4{font-size:.78rem;color:var(--text);}
.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;}
.macro-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:14px;text-align:center;}
.macro-value{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:1.3rem;color:var(--maroon);}
.macro-label{font-size:.7rem;color:var(--muted);font-family:var(--nmn-font-display,'Papyrus',fantasy);}
.big-progress{margin:10px 0;}
.big-progress .big-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:4px;}
.big-bar{height:14px;background:var(--nmn-line,#e8d8d8);border-radius:7px;overflow:hidden;}
.big-fill{height:100%;border-radius:7px;transition:width .5s;}
.meal-plan-day{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:14px 18px;margin-bottom:10px;}
.meal-plan-day h4{color:var(--maroon);margin-bottom:10px;font-size:.95rem;}
.meal-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #f0e8e8;align-items:center;font-size:.8rem;}
.meal-row:last-child{border-bottom:none;}
.meal-type{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.65rem;color:#fff;background:var(--maroon);
  padding:1px 6px;border-radius:2px;min-width:60px;text-align:center;}
.meal-cal{color:var(--muted);font-size:.72rem;white-space:nowrap;margin-left:auto;}

/* ── HABIT LOG ── */
.habit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.habit-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:14px;}
.habit-card h4{color:var(--maroon);font-size:.9rem;margin-bottom:8px;}
.habit-days{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;}
.habit-day{width:24px;height:24px;border-radius:4px;border:2px solid #e0d0d0;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-size:.6rem;}
.habit-day.done{background:var(--green);border-color:var(--green);color:#fff;}
.habit-day:hover{border-color:var(--maroon);}
.add-habit-btn{background:transparent;border:2px dashed var(--nmn-line5,#c8a0a0);color:var(--muted);
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.78rem;padding:14px;border-radius:4px;
  cursor:pointer;width:100%;transition:all .2s;}
.add-habit-btn:hover{border-color:var(--maroon);color:var(--maroon);}

/* ── ACTIVITY LOG ── */
.log-entry{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #f0e8e8;align-items:flex-start;font-size:.82rem;}
.log-date{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.68rem;color:var(--maroon);min-width:55px;}
.log-text{flex:1;line-height:1.5;}
.log-type-badge{font-size:.62rem;font-family:var(--nmn-font-display,'Papyrus',fantasy);padding:1px 6px;border-radius:2px;
  color:#fff;white-space:nowrap;}

/* ── ADMIN PANEL ── */
.admin-user-row{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:14px 18px;margin-bottom:10px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.admin-user-name{font-family:var(--nmn-font-display,'Papyrus',fantasy);color:var(--maroon);font-size:.95rem;min-width:140px;}
.admin-user-role{font-size:.68rem;font-family:var(--nmn-font-display,'Papyrus',fantasy);padding:2px 8px;
  border-radius:2px;color:#fff;}
.admin-user-role.admin{background:var(--nmn-brand,#780000);}
.admin-user-role.client{background:var(--nmn-bike,#14a01e);}
.admin-user-role.patient{background:var(--nmn-info,#1877f2);}
.admin-user-role.staff{background:var(--nmn-warn,#e67e22);}
.service-toggles{display:flex;gap:8px;flex-wrap:wrap;}
.svc-toggle{display:flex;align-items:center;gap:4px;font-size:.75rem;cursor:pointer;}
.svc-toggle input{accent-color:var(--maroon);}
.admin-edit-btn{margin-left:auto;background:var(--maroon);color:#fff;border:none;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.72rem;padding:5px 12px;border-radius:2px;cursor:pointer;}

/* ── MODAL ── */
.portal-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;
  align-items:center;justify-content:center;}
.portal-modal.open{display:flex;}
.portal-modal-box{background:#fff;border:2px solid var(--maroon);border-radius:6px;
  width:min(90vw,640px);max-height:85vh;overflow-y:auto;display:flex;flex-direction:column;}
.portal-modal-header{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--border);background:#f5eded;}
.portal-modal-header h3{color:var(--maroon);font-size:1rem;}
.modal-close-btn{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);}
.modal-close-btn:hover{color:var(--maroon);}
.portal-modal-body{padding:20px;flex:1;}

/* ── FORM FIELDS ── */
.field-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.field-group label{font-size:.72rem;color:var(--muted);font-family:var(--nmn-font-display,'Papyrus',fantasy);letter-spacing:.05em;}
.field-group input,.field-group select,.field-group textarea{
  background:var(--nmn-surface2,#faf8f5);border:1px solid var(--nmn-line2,#d8c8c0);color:var(--text);
  padding:8px 10px;font-family:'Comic Sans MS',cursive;font-size:.82rem;
  border-radius:2px;outline:none;transition:border-color .2s;}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{border-color:var(--maroon);}
.field-group textarea{min-height:70px;resize:vertical;}
.submit-btn{background:var(--maroon);color:#fff;border:none;font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size:.9rem;padding:10px 24px;cursor:pointer;border-radius:2px;
  letter-spacing:.06em;transition:background .2s;margin-top:6px;}
.submit-btn:hover{background:#9a0000;}
.submit-btn.green{background:var(--green);}

/* ── SECTION TITLE ── */
.section-title{font-family:var(--nmn-font-display,'Papyrus',fantasy);color:var(--maroon);font-size:1.2rem;
  margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);}



/* ── ADMIN-ONLY EDITING UI (hidden by default) ── */
[id^="hero-img-"] { display: none !important; }
/* Hero upload slots stay admin-only; card-img-slot now only used by dynamic
   tiles which already control their own display (none when empty, flex when
   an image is present), so it should NOT be force-hidden here. */
[id^="hero-img-"],
[contenteditable="true"] {
  display: none !important;
}
body.admin-logged-in [id^="hero-img-"] {
  display: flex !important;
}
body.admin-logged-in [contenteditable="true"] {
  outline: 1px dashed var(--nmn-line5,#c8a0a0);
  cursor: text;
}


/* ── Service popup body: section title colors per service ─── */
#sec-pt .section-title,
#sec-pt .section-head { color: var(--nmn-pt,#8b0000); border-bottom-color: var(--nmn-pt,#8b0000); }
#sec-pt .service-hero-card { border-left-color: var(--nmn-pt,#8b0000); }

#sec-training .section-title,
#sec-training .section-head { color: var(--nmn-brand,#780000); border-bottom-color: var(--nmn-brand,#780000); }

#sec-nutrition .section-title,
#sec-nutrition .section-head { color: var(--nmn-ink,#2a2a2a); border-bottom-color: var(--nmn-ink,#2a2a2a); }
#sec-nutrition .service-hero-card h2 { color: var(--nmn-ink,#2a2a2a); }

#sec-bike .section-title,
#sec-bike .section-head { color: var(--nmn-bike,#14a01e); border-bottom-color: var(--nmn-bike,#14a01e); }
#sec-bike .service-hero-card { border-left-color: var(--nmn-bike,#14a01e); }
#sec-bike .service-hero-card h2 { color: var(--nmn-bike,#14a01e); }

/* ── Admin popup: use maroon as base ─── */
#portal-popup-body .note-section-title { color: var(--popup-accent, var(--nmn-brand,#780000)); }
#portal-popup-body .note-field-label { color: var(--popup-accent, var(--nmn-brand,#780000)); }


/* ===== 2. PORTAL OVERLAY STYLES (reference main.html line 2903) ===== */

/* ── PORTAL OVERLAY STYLES ── */
/* portal-overlay is hidden — portal sections render inside #main-panel */
#portal-overlay { display: none; }
#portal-overlay h1,
#portal-overlay h2,
#portal-overlay h3,
#portal-overlay h4,
#portal-overlay h5,
#portal-overlay h6 {
  font-family:var(--nmn-font-display,'Papyrus',fantasy) !important;
}
#portal-overlay p,
#portal-overlay li,
#portal-overlay td,
#portal-overlay th {
  font-family: 'Comic Sans MS', cursive !important;
}
/* Scope all portal rules */

:root {
  --maroon:var(--nmn-brand,#780000); --yellow:var(--nmn-accent,#f0f03c); --green:var(--nmn-bike,#14a01e);
  --bg:#f5f0eb; --panel:#fff; --border:var(--nmn-line5,#c8a0a0);
  --text:#1a0a0a; --muted:#7a5050; --header-h:56px;
  --therapy-bg:#f0c8c8; --training-bg:#d88888;
  --nutrition-bg:#c8c8c8; --bike-bg:#b8e8b8;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Comic Sans MS',cursive;background:var(--bg);color:var(--text);min-height:100vh;}
h1,h2,h3,h4,h5,h6{font-family:var(--nmn-font-display,'Papyrus',fantasy)!important;}
p,li,td,th{font-family:'Comic Sans MS',cursive!important;}

/* ── HEADER ── */
#portal-header{
  height:var(--header-h);background:#b0b0b0;
  background-image:radial-gradient(circle,#a0a0a0 2px,transparent 2px);
  background-size:14px 14px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;border-bottom:2px solid rgba(120,0,0,.5);
  position: -webkit-sticky; position: sticky;top:0;z-index:200;
}
#portal-header h1{font-family:var(--nmn-font-display,'Papyrus',fantasy);color:var(--maroon);font-size:1.1rem;letter-spacing:.1em;}
#header-right{display:flex;gap:10px;align-items:center;}
.hdr-btn{background:var(--maroon);color:#fff;border:none;font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size:.78rem;padding:7px 16px;cursor:pointer;border-radius:2px;letter-spacing:.06em;transition:background .2s;}
.hdr-btn:hover{background:#9a0000;}
.hdr-btn.green{background:var(--green);}
.hdr-btn.grey{background:#555;}

/* account dropdown */
#account-wrap{position:relative;}
#account-btn{display:none;}
#account-dropdown{
  display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:#fff;border:1px solid var(--border);border-radius:4px;
  min-width:180px;z-index:300;box-shadow:0 4px 16px rgba(0,0,0,.15);
}
#account-dropdown.open{display:block;}
.acct-item{display:block;width:100%;background:none;border:none;text-align:left;
  padding:10px 16px;font-family:'Comic Sans MS',cursive;font-size:.82rem;
  cursor:pointer;border-bottom:1px solid #f0e8e8;color:var(--text);}
.acct-item:hover{background:#f5eded;}
.acct-item:last-child{border-bottom:none;}
.acct-item.logout{color:var(--maroon);}

/* ── LOGIN SCREEN ── */
#login-screen{
  position:fixed;inset:0;background:rgba(10,0,0,.92);
  display:flex;align-items:center;justify-content:center;z-index:9999;
}
#login-box{
  background:#150000;border:2px solid var(--maroon);
  border-radius:6px;padding:40px 48px;text-align:center;width:min(90vw,360px);box-sizing:border-box;
}
#login-box h1{color:var(--maroon);font-size:1.5rem;margin-bottom:6px;}
#login-box p{color:var(--nmn-muted,#9a7070);font-size:.8rem;margin-bottom:24px;}
.login-field{width:100%;background:#0a0000;border:1px solid #3a0000;
  color:#f5e8e8;padding:10px 14px;font-family:'Comic Sans MS',cursive;
  font-size:.9rem;border-radius:2px;margin-bottom:12px;outline:none;}
.login-field:focus{border-color:var(--maroon);}
#login-btn{width:100%;background:var(--maroon);color:#fff;border:none;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:1rem;padding:11px;cursor:pointer;border-radius:2px;}
#login-btn:hover{background:#9a0000;}
#login-error{color:#ff6060;font-size:.78rem;margin-top:10px;display:none;}
.login-links{display:flex;justify-content:space-between;margin-top:14px;}
.login-link{background:none;border:none;color:var(--nmn-muted,#9a7070);font-size:.72rem;cursor:pointer;text-decoration:underline;}
.login-link:hover{color:var(--maroon);}

/* ── MAIN LAYOUT ── */
#portal-body{display:flex;min-height:calc(100vh - var(--header-h));}
#portal-sidebar{
  width:200px;min-width:180px;flex-shrink:0;
  background:#ddd8d0;border-right:2px solid var(--border);
  padding:16px 0;position: -webkit-sticky; position: sticky;top:var(--header-h);
  height:calc(100vh - var(--header-h));overflow-y:auto;
}
#portal-main{flex:1;padding:24px 28px 0;min-width:0;overflow-y:auto;}

.nav-label{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.62rem;color:var(--maroon);
  text-transform:uppercase;letter-spacing:.12em;padding:10px 16px 4px;
  border-top:1px solid var(--border);margin-top:8px;}
.nav-label:first-child{margin-top:0;border-top:none;}
.portal-nav-btn{display:block;width:100%;background:transparent;border:none;
  text-align:left;padding:9px 16px;font-family:'Comic Sans MS',cursive;
  font-size:.82rem;cursor:pointer;color:var(--text);transition:background .15s;
  border-left:3px solid transparent;}
.portal-nav-btn:hover{background:#ccc8c0;}
.portal-nav-btn.active{background:#c8b8b8;border-left-color:var(--maroon);color:var(--maroon);}
.locked-service{opacity:.4;cursor:not-allowed;}

/* ── SECTION VIEWS ── */
.portal-section{display:none;}
.portal-section.active{display:block;}

/* ── SERVICE HERO CARD ── */
.service-hero-card{
  background:rgb(210,205,198);border:1px solid var(--border);
  border-radius:4px;padding:24px 28px;margin-bottom:20px;
}
.service-hero-card h2{color:var(--maroon);font-size:1.6rem;margin-bottom:6px;}
.service-hero-card p{color:var(--muted);font-size:.85rem;line-height:1.7;}

/* ── CARDS GRID ── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:8px;}
.tile-card{background:#f0e8e8;border:1px solid var(--nmn-line5,#c8a0a0);border-radius:4px;padding:20px;cursor:pointer;transition:all .2s;}
.tile-card:hover{border-color:var(--maroon);transform:translateY(-2px);}
.tile-card h3{color:var(--maroon);font-size:1rem;margin-bottom:6px;}
.tile-card p{color:var(--muted);font-size:.82rem;line-height:1.6;}

/* ── WORKOUT TILES ── */
.workout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:12px;}
.workout-tile{background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden;}
.workout-tile-header{padding:14px 16px;background:#f5eded;border-bottom:1px solid var(--nmn-line,#e8d8d8);
  display:flex;justify-content:space-between;align-items:center;}
.workout-tile-header h3{font-size:.95rem;color:var(--maroon);}
.workout-badge{font-size:.65rem;font-family:var(--nmn-font-display,'Papyrus',fantasy);padding:2px 8px;
  border-radius:2px;background:var(--maroon);color:#fff;}
.workout-body{padding:14px 16px;}
.exercise-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f0e8e8;}
.exercise-row:last-child{border-bottom:none;}
.exercise-check{width:18px;height:18px;accent-color:var(--maroon);cursor:pointer;flex-shrink:0;}
.exercise-name{flex:1;font-size:.82rem;}
.exercise-sets{font-size:.75rem;color:var(--muted);white-space:nowrap;}
.progress-bar-wrap{margin-top:10px;}
.progress-bar-label{font-size:.72rem;color:var(--muted);margin-bottom:4px;display:flex;justify-content:space-between;}
.progress-bar{height:8px;background:var(--nmn-line,#e8d8d8);border-radius:4px;overflow:hidden;}
.progress-fill{height:100%;background:var(--maroon);border-radius:4px;transition:width .4s;}

/* ── BODY MAP ── */
#body-map-section{margin-bottom:24px;}
.body-map-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.map-btn{background:#fff;border:1px solid var(--border);color:var(--text);
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.75rem;padding:6px 14px;
  cursor:pointer;border-radius:2px;transition:all .2s;}
.map-btn:hover,.map-btn.active{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.pain-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.pain-dot{display:flex;align-items:center;gap:5px;font-size:.72rem;cursor:pointer;}
.pain-dot .dot{width:12px;height:12px;border-radius:50%;border:2px solid #000;}
.body-map-area{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;}
.body-svg-wrap{position:relative;flex-shrink:0;}
.body-svg-wrap svg{display:block;}
.pain-marker{position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(0,0,0,.4);transform:translate(-50%,-50%);
  cursor:pointer;transition:transform .15s;}
.pain-marker:hover{transform:translate(-50%,-50%) scale(1.3);}
.pain-notes-panel{flex:1;min-width:220px;}
.pain-note-item{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:10px 14px;margin-bottom:8px;font-size:.8rem;}
.pain-note-item .pn-type{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.65rem;
  padding:1px 6px;border-radius:2px;color:#fff;display:inline-block;margin-bottom:4px;}
.pain-note-item .pn-loc{color:var(--muted);font-size:.75rem;margin-bottom:4px;}
.pain-note-item .pn-remove{background:none;border:none;color:#c00;cursor:pointer;font-size:.75rem;}
#canvas-3d{width:100%;max-width:300px;height:380px;border-radius:4px;
  border:1px solid var(--border);background:#1a1a2e;display:none;}

/* ── VITALS ── */
.vitals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:8px;}
.vital-card{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:14px;text-align:center;}
.vital-value{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:1.5rem;color:var(--maroon);}
.vital-label{font-size:.68rem;color:var(--muted);margin-top:2px;font-family:var(--nmn-font-display,'Papyrus',fantasy);letter-spacing:.06em;}
.vital-unit{font-size:.7rem;color:var(--muted);}
.vital-date{font-size:.65rem;color:#aaa;margin-top:4px;}

/* ── BIKE FIT ── */
.bike-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px;}
.bike-type-card{background:#fff;border:2px solid #e0d0d0;border-radius:4px;
  padding:14px;text-align:center;cursor:pointer;transition:all .2s;}
.bike-type-card:hover,.bike-type-card.selected{border-color:var(--green);background:#f0fbf0;}
.bike-type-card .bike-icon{font-size:2.4rem;display:block;margin-bottom:6px;}
.bike-type-card h4{font-size:.82rem;color:var(--text);}
.measurements-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.82rem;}
.measurements-table th{background:#f5eded;color:var(--maroon);font-family:var(--nmn-font-display,'Papyrus',fantasy);
  padding:8px 12px;border:1px solid var(--border);text-align:left;}
.measurements-table td{padding:8px 12px;border:1px solid var(--nmn-line,#e8d8d8);}
.measurements-table tr:nth-child(even) td{background:#faf5f5;}
.measure-input{width:100%;border:none;background:transparent;font-family:'Comic Sans MS',cursive;
  font-size:.82rem;color:var(--text);outline:none;}
.measure-input:focus{background:#fff8f8;}

/* ── NUTRITION ── */
.diet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.diet-card{background:#fff;border:2px solid #e0d0d0;border-radius:4px;
  padding:12px;text-align:center;cursor:pointer;transition:all .2s;}
.diet-card:hover,.diet-card.selected{border-color:var(--maroon);background:#fff5f5;}
.diet-card .diet-icon{font-size:1.8rem;display:block;margin-bottom:4px;}
.diet-card h4{font-size:.78rem;color:var(--text);}
.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;}
.macro-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:14px;text-align:center;}
.macro-value{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:1.3rem;color:var(--maroon);}
.macro-label{font-size:.7rem;color:var(--muted);font-family:var(--nmn-font-display,'Papyrus',fantasy);}
.big-progress{margin:10px 0;}
.big-progress .big-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:4px;}
.big-bar{height:14px;background:var(--nmn-line,#e8d8d8);border-radius:7px;overflow:hidden;}
.big-fill{height:100%;border-radius:7px;transition:width .5s;}
.meal-plan-day{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:14px 18px;margin-bottom:10px;}
.meal-plan-day h4{color:var(--maroon);margin-bottom:10px;font-size:.95rem;}
.meal-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #f0e8e8;align-items:center;font-size:.8rem;}
.meal-row:last-child{border-bottom:none;}
.meal-type{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.65rem;color:#fff;background:var(--maroon);
  padding:1px 6px;border-radius:2px;min-width:60px;text-align:center;}
.meal-cal{color:var(--muted);font-size:.72rem;white-space:nowrap;margin-left:auto;}

/* ── HABIT LOG ── */
.habit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.habit-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:14px;}
.habit-card h4{color:var(--maroon);font-size:.9rem;margin-bottom:8px;}
.habit-days{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;}
.habit-day{width:24px;height:24px;border-radius:4px;border:2px solid #e0d0d0;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-size:.6rem;}
.habit-day.done{background:var(--green);border-color:var(--green);color:#fff;}
.habit-day:hover{border-color:var(--maroon);}
.add-habit-btn{background:transparent;border:2px dashed var(--nmn-line5,#c8a0a0);color:var(--muted);
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.78rem;padding:14px;border-radius:4px;
  cursor:pointer;width:100%;transition:all .2s;}
.add-habit-btn:hover{border-color:var(--maroon);color:var(--maroon);}

/* ── ACTIVITY LOG ── */
.log-entry{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #f0e8e8;align-items:flex-start;font-size:.82rem;}
.log-date{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.68rem;color:var(--maroon);min-width:55px;}
.log-text{flex:1;line-height:1.5;}
.log-type-badge{font-size:.62rem;font-family:var(--nmn-font-display,'Papyrus',fantasy);padding:1px 6px;border-radius:2px;
  color:#fff;white-space:nowrap;}

/* ── ADMIN PANEL ── */
.admin-user-row{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:14px 18px;margin-bottom:10px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.admin-user-name{font-family:var(--nmn-font-display,'Papyrus',fantasy);color:var(--maroon);font-size:.95rem;min-width:140px;}
.admin-user-role{font-size:.68rem;font-family:var(--nmn-font-display,'Papyrus',fantasy);padding:2px 8px;
  border-radius:2px;color:#fff;}
.admin-user-role.admin{background:var(--nmn-brand,#780000);}
.admin-user-role.client{background:var(--nmn-bike,#14a01e);}
.admin-user-role.patient{background:var(--nmn-info,#1877f2);}
.admin-user-role.staff{background:var(--nmn-warn,#e67e22);}
.service-toggles{display:flex;gap:8px;flex-wrap:wrap;}
.svc-toggle{display:flex;align-items:center;gap:4px;font-size:.75rem;cursor:pointer;}
.svc-toggle input{accent-color:var(--maroon);}
.admin-edit-btn{margin-left:auto;background:var(--maroon);color:#fff;border:none;
  font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.72rem;padding:5px 12px;border-radius:2px;cursor:pointer;}

/* ── MODAL ── */
.portal-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;
  align-items:center;justify-content:center;}
.portal-modal.open{display:flex;}
.portal-modal-box{background:#fff;border:2px solid var(--maroon);border-radius:6px;
  width:min(90vw,640px);max-height:85vh;overflow-y:auto;display:flex;flex-direction:column;}
.portal-modal-header{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--border);background:#f5eded;}
.portal-modal-header h3{color:var(--maroon);font-size:1rem;}
.modal-close-btn{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);}
.modal-close-btn:hover{color:var(--maroon);}
.portal-modal-body{padding:20px;flex:1;}

/* ── FORM FIELDS ── */
.field-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.field-group label{font-size:.72rem;color:var(--muted);font-family:var(--nmn-font-display,'Papyrus',fantasy);letter-spacing:.05em;}
.field-group input,.field-group select,.field-group textarea{
  background:var(--nmn-surface2,#faf8f5);border:1px solid var(--nmn-line2,#d8c8c0);color:var(--text);
  padding:8px 10px;font-family:'Comic Sans MS',cursive;font-size:.82rem;
  border-radius:2px;outline:none;transition:border-color .2s;}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{border-color:var(--maroon);}
.field-group textarea{min-height:70px;resize:vertical;}
.submit-btn{background:var(--maroon);color:#fff;border:none;font-family:var(--nmn-font-display,'Papyrus',fantasy);
  font-size:.9rem;padding:10px 24px;cursor:pointer;border-radius:2px;
  letter-spacing:.06em;transition:background .2s;margin-top:6px;}
.submit-btn:hover{background:#9a0000;}
.submit-btn.green{background:var(--green);}

/* ── SECTION TITLE ── */
.section-title{font-family:var(--nmn-font-display,'Papyrus',fantasy);color:var(--maroon);font-size:1.2rem;
  margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);}

/* ── Service page side image panels ─────────────────────────────────────── */
.svc-side-img{width:90px;flex-shrink:0;min-height:120px;background:#f5eded;border:2px dashed var(--nmn-line5,#c8a0a0);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;text-align:center;transition:border-color .2s;}
.svc-side-img:hover{border-color:var(--nmn-brand,#780000);}
.svc-side-img img{width:100%;height:100%;object-fit:cover;border-radius:4px;}
.svc-img-ph{font-size:1.4rem;color:var(--nmn-line5,#c8a0a0);line-height:1.8;}
@media(max-width:600px){.svc-side-img{display:none;}}

/* ── NEWSPAPER SERVICE POPUP STYLE ───────────────────────────────────────── */
.np-wrap{background:#f8f4e8;font-family:Georgia,'Times New Roman',serif;color:#1a1a0a;padding:0}
.np-masthead{background:#1a0a0a;padding:10px 48px 8px 18px;text-align:center;border-bottom:3px double var(--nmn-brand,#780000)}
.np-name{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:1.3rem;color:var(--nmn-accent,#f0f03c);letter-spacing:.12em;text-transform:uppercase;line-height:1}
.np-sub{font-size:.6rem;color:rgba(240,240,60,.6);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.np-edition{background:#1a0a0a;border-top:1px solid rgba(240,240,60,.2);padding:3px 18px;display:flex;justify-content:space-between}
.np-edition span{font-size:.58rem;color:rgba(240,240,60,.5);letter-spacing:.1em;font-style:italic}
.np-body{padding:12px 16px}
.np-byline{font-size:.62rem;color:#6a5a4a;font-style:italic;text-align:center;margin-bottom:4px;letter-spacing:.04em}
.np-headline{font-family:Georgia,serif;font-size:1.15rem;font-weight:700;color:#1a0a0a;text-align:center;line-height:1.2;margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.np-subhead{font-size:.74rem;color:#4a3a2a;text-align:center;font-style:italic;margin-bottom:8px;line-height:1.5}
.np-rule{border:none;border-top:2px solid #1a0a0a;margin:6px 0}
.np-rule-thin{border:none;border-top:1px solid #a09070;margin:6px 0}
.np-cols{column-count:2;column-gap:14px;column-rule:1px solid #c0b090;margin-bottom:8px}
.np-cols p{font-size:.76rem;line-height:1.75;margin:0 0 7px;text-align:justify;hyphens:auto}
.np-pull{break-inside:avoid;background:#1a0a0a;border-left:4px solid var(--nmn-accent,#f0f03c);padding:8px 12px;margin:8px 0;font-size:.78rem;color:var(--nmn-accent,#f0f03c);font-style:italic;line-height:1.5}
.np-sec-head{font-family:var(--nmn-font-display,'Papyrus',fantasy);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nmn-brand,#780000);text-align:center;padding:4px 0;border-top:1px solid var(--nmn-brand,#780000);border-bottom:1px solid var(--nmn-brand,#780000);margin:8px 0 6px}

/* ══════════════════════════════════════════════════════════════
   NEWSPAPER — PER-SERVICE COLOR THEMES
   Scoped to each modal ID. Base .np-* stays unchanged.
   PT = lighter red · Training = deep maroon
   Nutrition = dark gray/black · Bike = green
══════════════════════════════════════════════════════════════ */

/* ── Physical Therapy — lighter red var(--nmn-pt,#8b0000) ──────────────── */
#modal-therapy .np-wrap        { background: #fdf5f5; }
#modal-therapy .np-masthead    { background: #5a0000; border-bottom-color: var(--nmn-pt,#8b0000); }
#modal-therapy .np-name        { color: #f5c8c8; }
#modal-therapy .np-sub         { color: rgba(245,200,200,.65); }
#modal-therapy .np-edition     { background: #5a0000; border-top-color: rgba(245,200,200,.2); }
#modal-therapy .np-edition span{ color: rgba(245,200,200,.55); }
#modal-therapy .np-rule        { border-top-color: var(--nmn-pt,#8b0000); }
#modal-therapy .np-rule-thin   { border-top-color: #d4a8a8; }
#modal-therapy .np-headline    { color: #5a0000; }
#modal-therapy .np-subhead     { color: #6a3a3a; }
#modal-therapy .np-byline      { color: #7a4a4a; }
#modal-therapy .np-pull        { background: #5a0000; border-left-color: #f5c8c8; color: #f5c8c8; }
#modal-therapy .np-sec-head    { color: var(--nmn-pt,#8b0000); border-top-color: var(--nmn-pt,#8b0000); border-bottom-color: var(--nmn-pt,#8b0000); }
#modal-therapy .np-cols        { column-rule-color: #d4a8a8; }
#modal-therapy .np-cols p      { color: #2a1010; }
#modal-box.modal-newspaper:has(#modal-therapy .np-wrap) {
  box-shadow: 0 0 0 2px var(--nmn-pt,#8b0000), 0 8px 40px rgba(0,0,0,.6);
}

/* ── Personal Training — deep maroon var(--nmn-brand,#780000) ─────────────── */
#modal-training .np-wrap        { background: #fdf0f0; }
#modal-training .np-masthead    { background: #3a0000; border-bottom-color: var(--nmn-brand,#780000); }
#modal-training .np-name        { color: #f0c8c8; }
#modal-training .np-sub         { color: rgba(240,200,200,.65); }
#modal-training .np-edition     { background: #3a0000; border-top-color: rgba(240,200,200,.2); }
#modal-training .np-edition span{ color: rgba(240,200,200,.55); }
#modal-training .np-rule        { border-top-color: var(--nmn-brand,#780000); }
#modal-training .np-rule-thin   { border-top-color: var(--nmn-line5,#c8a0a0); }
#modal-training .np-headline    { color: #3a0000; }
#modal-training .np-subhead     { color: #5a3030; }
#modal-training .np-byline      { color: #6a4040; }
#modal-training .np-pull        { background: #3a0000; border-left-color: #f0c8c8; color: #f0c8c8; }
#modal-training .np-sec-head    { color: var(--nmn-brand,#780000); border-top-color: var(--nmn-brand,#780000); border-bottom-color: var(--nmn-brand,#780000); }
#modal-training .np-cols        { column-rule-color: var(--nmn-line5,#c8a0a0); }
#modal-training .np-cols p      { color: #200808; }

/* ── Meal Planning — dark gray / near-black var(--nmn-ink,#2a2a2a) ─────── */
#modal-meals .np-wrap        { background: #f5f5f3; }
#modal-meals .np-masthead    { background: #111111; border-bottom-color: var(--nmn-ink,#2a2a2a); }
#modal-meals .np-name        { color: #e0e0e0; }
#modal-meals .np-sub         { color: rgba(220,220,220,.6); }
#modal-meals .np-edition     { background: #111111; border-top-color: rgba(220,220,220,.15); }
#modal-meals .np-edition span{ color: rgba(200,200,200,.5); }
#modal-meals .np-rule        { border-top-color: var(--nmn-ink,#2a2a2a); }
#modal-meals .np-rule-thin   { border-top-color: #aaa; }
#modal-meals .np-headline    { color: #111; }
#modal-meals .np-subhead     { color: #3a3a3a; }
#modal-meals .np-byline      { color: #555; }
#modal-meals .np-pull        { background: #1a1a1a; border-left-color: var(--nmn-accent,#f0f03c); color: #e8e8e8; }
#modal-meals .np-sec-head    { color: var(--nmn-ink,#2a2a2a); border-top-color: var(--nmn-ink,#2a2a2a); border-bottom-color: var(--nmn-ink,#2a2a2a); }
#modal-meals .np-cols        { column-rule-color: #bbb; }
#modal-meals .np-cols p      { color: #1a1a1a; }
#modal-box.modal-newspaper:has(#modal-meals .np-wrap) {
  background: #f5f5f3;
  box-shadow: 0 0 0 2px var(--nmn-ink,#2a2a2a), 0 8px 40px rgba(0,0,0,.6);
}

/* ── Bike Fitting — green var(--nmn-bike,#14a01e) ───────────────────────── */
#modal-bikes .np-wrap        { background: #f3fdf4; }
#modal-bikes .np-masthead    { background: #063a0a; border-bottom-color: var(--nmn-bike,#14a01e); }
#modal-bikes .np-name        { color: #b8e8b8; }
#modal-bikes .np-sub         { color: rgba(184,232,184,.65); }
#modal-bikes .np-edition     { background: #063a0a; border-top-color: rgba(184,232,184,.2); }
#modal-bikes .np-edition span{ color: rgba(184,232,184,.55); }
#modal-bikes .np-rule        { border-top-color: var(--nmn-bike,#14a01e); }
#modal-bikes .np-rule-thin   { border-top-color: #90c890; }
#modal-bikes .np-headline    { color: #063a0a; }
#modal-bikes .np-subhead     { color: #1a4a1a; }
#modal-bikes .np-byline      { color: #2a5a2a; }
#modal-bikes .np-pull        { background: #063a0a; border-left-color: #b8e8b8; color: #b8e8b8; }
#modal-bikes .np-sec-head    { color: var(--nmn-bike,#14a01e); border-top-color: var(--nmn-bike,#14a01e); border-bottom-color: var(--nmn-bike,#14a01e); }
#modal-bikes .np-cols        { column-rule-color: #90c890; }
#modal-bikes .np-cols p      { color: #0a200a; }
#modal-box.modal-newspaper:has(#modal-bikes .np-wrap) {
  background: #f3fdf4;
  box-shadow: 0 0 0 2px var(--nmn-bike,#14a01e), 0 8px 40px rgba(0,0,0,.6);
}


/* ===== 3. MODAL OVERLAY STYLES (reference main.html line 23403) ===== */

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:19000;display:none;align-items:center;justify-content:center;overflow-y:auto;padding:20px}
.modal-overlay[data-open="1"]{display:flex}
.about-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--nmn-muted,#9a7070)}
.about-eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--nmn-accent,#f0f03c);font-family:var(--nmn-font-display,Papyrus,fantasy);margin-bottom:8px}
.about-title{font-family:var(--nmn-font-display,Papyrus,fantasy);font-size:1.6rem;color:#f5e8e8;margin-bottom:18px;line-height:1.2}
.about-section{margin-bottom:18px;padding:16px 18px;border-left:3px solid var(--nmn-brand,#780000);background:#0d0505}
.about-section-label{font-family:var(--nmn-font-display,Papyrus,fantasy);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.about-section p{font-family:'Comic Sans MS',cursive;font-size:.84rem;line-height:1.85;color:#d0c0c0}
.price-table{width:100%;border-collapse:collapse;font-family:'Comic Sans MS',cursive;font-size:.82rem;margin-bottom:14px}
.price-table th{font-family:var(--nmn-font-display,Papyrus,fantasy);font-size:.72rem;letter-spacing:.1em;text-align:left;padding:8px 12px;border-bottom:2px solid var(--nmn-brand,#780000);color:var(--nmn-brand,#780000)}
.price-table td{padding:8px 12px;border-bottom:1px solid var(--nmn-line,#e8d8d8);color:#3a2a2a;vertical-align:top}
.price-table tr:hover td{background:#faf0f0}
.price-cat{font-family:var(--nmn-font-display,Papyrus,fantasy);font-size:.82rem;letter-spacing:.06em;padding:14px 12px 4px;color:var(--nmn-brand,#780000);font-weight:bold;margin-top:8px;display:block}
.price-rate{font-weight:600;white-space:nowrap;color:var(--nmn-brand,#780000)}
.price-eft-badge{display:inline-block;background:#fff3cd;color:#856404;font-size:.63rem;padding:2px 7px;border-radius:10px;font-family:var(--nmn-font-display,Papyrus,fantasy);letter-spacing:.06em;vertical-align:middle;margin-left:6px}

/* ═══════════════════════════════════════════════════════════════════════════
   CROSS-PLATFORM PARITY
   The brand fonts are system fonts, so they exist on Windows/macOS/iOS but not
   on Android/Linux. Rather than rewrite 1,300+ inline font declarations, we
   redefine the family NAMES with a local() fallback chain — the real font is
   used where present, and the closest local handwritten face elsewhere.
   No network requests, so nothing can 404 the way the old @import did.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Papyrus';
  src: local('Papyrus'), local('Bradley Hand'), local('Bradley Hand ITC'),
       local('Segoe Print'), local('Chalkduster'), local('Chalkboard SE'),
       local('Comic Sans MS'), local('Noto Serif');
  font-display: swap;
}
@font-face {
  font-family: 'Comic Sans MS';
  src: local('Comic Sans MS'), local('Chalkboard SE'), local('Comic Neue'),
       local('Bradley Hand'), local('Segoe Print'), local('Noto Sans');
  font-display: swap;
}

/* Notch and home-bar safe areas for anything pinned to a screen edge */
#nmn-sync-pill, #nmn-keys {
  margin-bottom: env(safe-area-inset-bottom, 0px);
  margin-left: env(safe-area-inset-left, 0px);
  margin-right: env(safe-area-inset-right, 0px);
}

/* iOS Safari auto-zooms any focused input under 16px. Small screens get 16px
   so the page never jumps mid-form; larger screens keep the tighter scale. */
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="date"], input[type="search"], select, textarea {
    font-size: 16px !important;
  }
}

/* Mobile Safari's 100vh includes the address bar, so full-height panels get
   clipped. dvh tracks the visible viewport where supported. */
@supports (height: 100dvh) {
  .popup-overlay, .portal-popup, #portal-popup, .modal-overlay { max-height: 100dvh; }
}

/* Touch devices have no hover, so hover-only affordances must stay visible */
@media (hover: none) {
  .tile-card, .client-workout-tile, .client-build-tile { transition: none; }
  .tile-card:active, .client-workout-tile:active { transform: scale(.985); }
}

/* Tablet: the Session Console is built for two-up panels — keep them side by
   side down to 900px, then stack rather than squeeze. */
@media (max-width: 900px) {
  #nmn-pc-root { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PILLAR IDENTITY
   Each service reads as its own space while staying one product. Tokens only —
   surfaces that opt in with var() pick these up automatically.
   ═══════════════════════════════════════════════════════════════════════════ */
.nmn-pillar { --pillar-accent:var(--nmn-brand,#780000); --pillar-bg:var(--nmn-surface,#fdfaf5); --pillar-ink:var(--nmn-ink,#2a2a2a); --pillar-line:var(--nmn-line,#e8d8d8); }

/* Biomechanics — clinical calm: cool greys, generous space, slow motion */
.nmn-pillar[data-pillar="biomechanics"] {
  --pillar-accent:var(--nmn-pt,#8b0000); --pillar-bg:#f7f9fb; --pillar-ink:#2c3440; --pillar-line:#dbe3ea;
}
.nmn-pillar[data-pillar="biomechanics"] .tile-card { box-shadow:none; border-color:var(--pillar-line); }
.nmn-pillar[data-pillar="biomechanics"] * { transition-duration:.45s !important; }

/* Force — the garage: dark, high contrast, snapping animation */
.nmn-pillar[data-pillar="force"] {
  --pillar-accent:var(--nmn-accent,#f0f03c); --pillar-bg:var(--nmn-dark,#1a1a1e); --pillar-ink:var(--nmn-dark-ink,#e8e8ec); --pillar-line:var(--nmn-dark3,#3a3a42);
}
.nmn-pillar[data-pillar="force"] * { transition-duration:.09s !important; }

/* Cadence — engineering lab: blueprint blues on a faint grid */
.nmn-pillar[data-pillar="cadence"] {
  --pillar-accent:var(--nmn-bike,#14a01e); --pillar-bg:#0f1b2a; --pillar-ink:#d8e6f0; --pillar-line:#1e3550;
}
.nmn-pillar[data-pillar="cadence"] {
  background-image:linear-gradient(rgba(30,53,80,.30) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(30,53,80,.30) 1px, transparent 1px);
  background-size:22px 22px;
}

/* Fuel — metabolic: amber glass over clinical white */
.nmn-pillar[data-pillar="fuel"] {
  --pillar-accent:#c8860d; --pillar-bg:#fffaf0; --pillar-ink:#3a2f22; --pillar-line:#ecdcc0;
}

/* Skeleton loaders — a shape that settles, not a word that waits */
.nmn-skel {
  background:linear-gradient(90deg,#efe7e0 25%,#f8f3ee 50%,#efe7e0 75%);
  background-size:200% 100%;
  animation:nmn-skel-pulse 1.25s ease-in-out infinite;
}
@keyframes nmn-skel-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce) {
  .nmn-skel { animation:none; background:#efe7e0; }
  .nmn-pillar * { transition-duration:0s !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Every inline style now reads its colour through var(--token, #original), so
   these defaults reproduce the existing look exactly. Overriding a token in a
   pillar scope re-skins every surface that uses it — including the older
   screens whose colours used to be hardcoded.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* brand */
  --nmn-brand:#780000;      /* NMN maroon        */
  --nmn-pt:#8b0000;         /* Natty PT crimson  */
  --nmn-bike:#14a01e;       /* NCN green         */
  --nmn-ink:#2a2a2a;        /* near-black        */
  --nmn-accent:#f0f03c;     /* signal yellow     */

  /* neutrals */
  --nmn-muted:#9a7070;
  --nmn-body:#5a4a42;
  --nmn-surface:#fdfaf5;
  --nmn-surface2:#faf8f5;
  --nmn-line:#e8d8d8;
  --nmn-line2:#d8c8c0;
  --nmn-line3:#ece0d8;
  --nmn-line4:#f4ece6;
  --nmn-line5:#c8a0a0;

  /* dark surfaces (mission board and friends) */
  --nmn-dark:#1a1a1e;
  --nmn-dark2:#26262c;
  --nmn-dark3:#3a3a42;
  --nmn-dark-mute:#8a8a92;
  --nmn-dark-ink:#e8e8ec;

  /* status */
  --nmn-danger:#c0392b;
  --nmn-warn:#e67e22;
  --nmn-wildcard:#8e44ad;
  --nmn-info:#1877f2;

  /* type */
  --nmn-font-display:Papyrus, fantasy;
  --nmn-font-body:'Comic Sans MS', cursive;
}

/* ── Pillar skins: remap the tokens, every surface follows ────────────────── */

/* Biomechanics — clinical calm. Warm neutrals become cool clinical greys. */
.nmn-pillar[data-pillar="biomechanics"] {
  --nmn-brand:#8b0000;
  --nmn-accent:#5b7fa6;
  --nmn-muted:#7c8896;
  --nmn-body:#2c3440;
  --nmn-surface:#f7f9fb;
  --nmn-surface2:#fdfefe;
  --nmn-line:#dbe3ea;
  --nmn-line2:#cdd8e2;
  --nmn-line3:#e4ebf1;
  --nmn-line4:#eef3f7;
  --nmn-line5:#b6c4d2;
  --nmn-dark:#243040;
  --nmn-dark2:#2e3c4e;
  --nmn-dark3:#41526a;
}

/* Force — the garage. Light surfaces invert to steel and neon. */
.nmn-pillar[data-pillar="force"] {
  --nmn-brand:#a00000;
  --nmn-accent:#f0f03c;
  --nmn-muted:#8a8a92;
  --nmn-body:#d8d8dc;
  --nmn-surface:#1f1f24;
  --nmn-surface2:#26262c;
  --nmn-line:#3a3a42;
  --nmn-line2:#44444e;
  --nmn-line3:#32323a;
  --nmn-line4:#2b2b32;
  --nmn-line5:#5a5a66;
}

/* Cadence — engineering lab. Blueprint blues, technical green accent. */
.nmn-pillar[data-pillar="cadence"] {
  --nmn-brand:#14a01e;
  --nmn-accent:#4ec3ff;
  --nmn-muted:#7fa0bd;
  --nmn-body:#d8e6f0;
  --nmn-surface:#0f1b2a;
  --nmn-surface2:#142438;
  --nmn-line:#1e3550;
  --nmn-line2:#264160;
  --nmn-line3:#1a2e46;
  --nmn-line4:#16273a;
  --nmn-line5:#31577f;
}

/* Fuel — metabolic. Amber glass over clinical white. */
.nmn-pillar[data-pillar="fuel"] {
  --nmn-brand:#a8640a;
  --nmn-accent:#e0a020;
  --nmn-muted:#96805e;
  --nmn-body:#3a2f22;
  --nmn-surface:#fffaf0;
  --nmn-surface2:#fffdf8;
  --nmn-line:#ecdcc0;
  --nmn-line2:#e0cba6;
  --nmn-line3:#f3e7d2;
  --nmn-line4:#f8f0e2;
  --nmn-line5:#d4b98d;
}

/* Treatment history rail — a side panel you can scroll while charting */
.nmn-hist-rail {
  position: fixed; right: 0; top: 96px; width: 290px; max-height: 68vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--nmn-surface, #fdfaf5);
  border: 1px solid var(--nmn-line2, #d8c8c0); border-right: none;
  border-radius: 6px 0 0 6px; padding: 10px 12px; z-index: 9990;
  box-shadow: -3px 0 14px rgba(0,0,0,.12);
  margin-right: env(safe-area-inset-right, 0px);
}
.nmn-hist-tab {
  position: fixed; right: 0; top: 96px; z-index: 9990; cursor: pointer;
  background: var(--nmn-brand, #780000); color: #fff; border: none;
  font-family: var(--nmn-font-display, Papyrus, fantasy); font-size: .68rem;
  padding: 8px 10px; border-radius: 4px 0 0 4px;
  writing-mode: vertical-rl; text-orientation: mixed;
  margin-right: env(safe-area-inset-right, 0px);
}
@media (max-width: 1100px) {
  .nmn-hist-rail { width: min(320px, 86vw); top: 72px; max-height: 60vh; }
}
@media (max-width: 700px) {
  .nmn-hist-rail { left: 0; right: 0; width: auto; top: auto; bottom: 0;
    max-height: 46vh; border-radius: 8px 8px 0 0; border-right: 1px solid var(--nmn-line2,#d8c8c0);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .nmn-hist-tab { top: auto; bottom: 0; right: 12px; writing-mode: horizontal-tb;
    border-radius: 4px 4px 0 0; margin-bottom: env(safe-area-inset-bottom, 0px); }
}