/* Base */
/* ===== FOOTER — FINAL OVERRIDES (keep these LAST) ===== */
/* ==== Intake layout/spacing fixes (safe override) ==== */
.panel .section .container { max-width: 980px; }

.row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.logo {
  width: 120px;   /* adjust size */
  margin-bottom: 15px;
}

.btn, .btn input, .btn select, .btn textarea { font-size: 16px; }

input.btn, select.btn, textarea.btn {
  width: clamp(180px, 32vw, 340px);
  color: #f6f7fb;               /* readable text */
  background: #262a2f;          /* your dark pill bg */
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 14px;
  line-height: 1.25;
}

textarea.btn {
  width: clamp(380px, 66vw, 740px);
  min-height: 84px;
  resize: vertical;
}

/* placeholder + select text contrast */
input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,.55);
}
select.btn { color: #f6f7fb; }

/* compact headings */
h4.small { font-size: 14px; opacity: .8; margin: 16px 0 6px; }

/* action buttons area */
.btn-primary { background: #e44; color:#fff; }
.btn-secondary { background:#2c3138; color:#fff; }

/* make date/number fields consistent */
input[type="date"].btn, input[type="number"].btn { color:#f6f7fb; }

/* Center the whole block at the bottom */
footer .footer-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
}

/* Copyright — always visible, gold */
footer .footer-text {
  color: #ffd54a;      /* gold */
  opacity: .95;
  margin: 0;
}

/* Hide tagline + button by default (subpages) */
footer .tagline,
footer .button {
  display: none;
}

/* Show them on Home only */
.home footer .tagline,
.home footer .button {
  display: inline-block;
}

/* Tagline style (when shown) */
footer .tagline {
  color: #ffd54a;
  font-size: 1.25rem;   /* ~20px */
  font-weight: 700;
  margin: 0 0 10px 0;
}

/* Gold pill button (when shown) */
footer .button {
  padding: 12px 24px;
  border-radius: 9999px;
  background: #ffd54a;
  color: #111;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 22px rgba(255,213,74,.35);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

footer .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255,213,74,.45);
  background: #ffdb66;
}

* { box-sizing: border-box; }
:root {
  --bg: #111;        /* page background */
  --panel: #ffffff;  /* card/panel background */
  --ink: #f1d54a;    /* text gold */
  --accent: #c23a2b; /* highlight color */
  --grey: #6e6e6e;   /* base grey */
  --teal: #009688;   /* highlight teal */
}

html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* Layout */
.wrapper {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.panel {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Nav from header.html */
nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
}
nav a {
  color: #eaeaea;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
}
nav a:hover { text-decoration: underline; }
nav a.active { 
  font-weight: 700; 
  text-decoration: underline; 
  background: rgba(255,255,255,.12);
}
.site-nav a,
.site-nav a:visited { color: #fff; }



/* Footer (optional) */
footer { 
  max-width: 1100px; 
  margin: 0 auto 24px; 
  color: #cfcfcf; 
  font-size: 14px; 
}
.btn-gold {
  display:inline-block;
  padding:10px 16px;
  background:var(--gold);
  color:#181818;
  font-weight:700;
  border-radius:8px;
  text-decoration:none;
}
.btn-gold:hover { filter:brightness(1.05); }
.nav-temp {
  color: var(--gold);
  font-weight: 700;
}
.nav-temp:hover {
  filter: brightness(1.2);
}
#levels-ladder {
  list-style: none;
  padding: 0;
  margin: 0;
}
#levels-ladder li strong {
  min-width: 20px;
  display: inline-block;
}
/* kill the default purple visited links */

a,
a:visited { 
  color: var(--gold); 
  text-decoration: none; 
}
a:hover { 
  color: #fff; /* or var(--matte-black) if preferred */
  text-decoration: underline; 
}


/* optional: ladder cleanup */
#levels-ladder { list-style: none; padding: 0; margin: 0; }
#levels-ladder li { padding: 6px 0; border-bottom: 1px solid #eee; }
#levels-ladder li:last-child { border-bottom: 0; }
#levels-ladder { margin-top: 8px; }
#levels-ladder li{
  color:#e8e8e8;             /* brighter text */
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.12); /* lighter rule */
}
#levels-ladder li strong{ min-width:22px; display:inline-block; font-weight:700; }
#levels-ladder li span{ width:14px; height:14px; border-radius:3px; display:inline-block; }
/* XP Timeline Dark Theme Entry Styles */
.timeline-entry {
    background-color: #1e1e1e; /* Dark background */
    border: 1px solid #444;    /* Subtle border */
    border-radius: 6px;        /* Rounded corners */
    padding: 10px 14px;        /* Inner spacing */
    margin-bottom: 10px;       /* Space between entries */
    color: #e8e8e8;            /* Light text for readability */
    font-size: 14px;           /* Standard font size */
    line-height: 1.4;          /* Better readability */
}

.timeline-entry strong {
    color: #ffd700; /* Gold highlight for task titles */
}

.timeline-entry small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #aaa; /* Muted date text */
}
/* === XP Timeline (Dark) — LIVE-14C === */
.timeline-entry{
  background:#1e1e1e;border:1px solid #333;border-radius:8px;
  padding:12px 14px;margin:10px 0;color:#eaeaea;
  animation:fadeInUp .35s ease forwards
}
.timeline-date{font-size:.9rem;color:#aaa;margin-bottom:.25rem}
.timeline-content h3{margin:0 0 .5rem;color:#ffd700}
.timeline-content p{margin:0 0 .5rem;color:#d8d8d8}
.xp-points{font-weight:700}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* contact form helpers */
.form-row { display: grid; gap: 8px; margin: 12px 0; }
.form-row label { font-weight: 600; }
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--ink);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.15);
}
.form-actions { margin-top: 12px; }
#contact-status.small { margin-top: 8px; opacity: .85; }
#xp-dashboard-components {
  padding: 1rem;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #f7f7f7;
  margin: 2rem 0;
}

.xp-tier {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.xp-bar {
  margin-bottom: 1rem;
}

.xp-tags .xp-tag {
  display: inline-block;
  background: #eee;
  color: #333;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

.stripe-tracker ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.stripe-tracker li {
  padding: 0.4rem 0.8rem;
  border-radius: 5px;
  background: #ddd;
}

.stripe.earned {
  background: #a2d5a2;
  font-weight: bold;
}
.main-nav--min ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:.5rem;
}
.main-nav--min a {
  display:inline-block;
  padding:.45rem .7rem;
  border:1px solid #2a2a2d;
  border-radius:10px;
  text-decoration:none;
  color:#eaeaea;
}
/* gold pill nav links */
.nav a {
  display: inline-block;
  color: #ffd400;                     /* gold text */
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.06); /* pill look */
  transition: transform 140ms ease, box-shadow 140ms ease, color 140ms ease, background 140ms ease;
}

/* hover pop + highlight */
.nav a:hover,
.nav a:focus-visible {
  transform: translateY(-1px) scale(1.05);
  color: #ffe978;                     /* brighter gold */
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25) inset, 0 6px 12px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.10);
}

/* tidy up the list so no bullets appear */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { display: inline-block; margin: 0 0.25rem; }
footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  color: #fff;
}

footer p {
  margin: 10px 0;
}

.dashboard-button {
  display: inline-block;
  margin: 15px 0;
  padding: 10px 20px;
  background-color: #FFD700;
  color: black;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.dashboard-button:hover {
  background-color: #e6c200;
}
.site-footer {
  text-align: center;
  padding: 28px 16px 48px;
}

.site-footer .tagline {
  /* a bit smaller than the main H1, but clearly featured */
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: #FFD700;            /* gold */
  margin: 10px 0 14px;
}

.site-footer .dashboard-button {
  display: inline-block;
  margin: 10px 0 16px;
  padding: 12px 22px;
  background: #FFD700;
  color: #111;
  font-weight: 700;
  border-radius: 999px;       /* pill */
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.28);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}

.site-footer .dashboard-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 215, 0, 0.36);
  background: #e6c200;
}
h1 {
  font-size: 2.5rem;
  color: #FFD700; /* gold */
  margin-bottom: 10px;
  text-align: center;
}

.tagline {
  font-size: 1.8rem;
  color: #FFD700; /* gold */
  text-align: center;
  margin-bottom: 30px;
}
body {
  margin: 0;
  min-height: 100vh;      /* ensures black covers full height */
  background: black;      /* or your gradient */
  color: #fff;
}

.tagline {
  font-size: 1.8em;       /* bigger like the one you liked */
  margin-bottom: 20px;
  font-weight: bold;
  color: #FFD700;         /* matches your yellow theme */
}
/* Footer */
.site-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px 0 40px;
}
.site-footer .copyright{
  margin:0;
  color:#FFD700;        /* gold */
  opacity:.9;
  font-size:.95rem;
  letter-spacing:.2px;
}

/* Ensure full-page dark background */
body{
  margin:0;
  min-height:100vh;
  background:#000;      /* or your gradient */
}
.hero{ text-align:center; }
.tagline {
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 20px auto;
  color: #FFD700;
  text-align: center;
}

/* CTA hidden by default on all pages */
.about-hero {
  background: url("assets/img/about-hero.webp") no-repeat center center;
  background-size: cover;
  height: 100vh; /* adjust if too tall */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}


/* Only show the CTA on the home page */
.home .hero-cta {
  display: flex;
}

/* Tagline sizing and color */
.tagline {
  color: var(--gold);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 28px);
}

/* Button styling (gold pill) */
.button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #000;            /* text */
  background: #FFD700;    /* gold */
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer;
}
.button:hover {
  background: #FFC107;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255, 215, 0, 0.45);
}

/* Footer copyright color to gold */
.site-footer p {
  color: var(--gold);
  text-align: center;
}
/* Footer */
footer {
  text-align: center;
  padding: 40px 20px;   /* push content up */
  margin-top: 40px;     /* spacing above footer */
  position: relative;   /* make sure it flows naturally */
}

footer p {
  margin: 10px 0;
}

footer .cta-btn {
  margin-top: 15px;     /* space between text + button */
}
nav {
  background-color: #111; /* deep gray, not pitch black */
}
/* === Footer + Button sanity (FINAL WINS) === */
:root {
  --gold: #FFD700;
  --gold-hover: #FFC107;
  --copy: #CCCCCC;
}

/* unified pill button (used everywhere) */
.button,
.footer-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background: var(--gold);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s, background-color .2s;
  cursor: pointer;
}
.button:hover,
.footer-button:hover {
  background: var(--gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.35);
}

/* footer layout */
.site-footer {
  position: relative;          /* stay in flow, no overlap */
  padding: 24px 0 40px;
  text-align: center;
}
.footer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-wrapper .tagline {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.footer-text {
  color: var(--copy);
  margin: 0;
  font-size: .9rem;
}

/* remove old conflicting rules if they exist */
.footer-block, .footer-dashboard, .dashboard-button, .footer-btn { all: unset; }
/* Phase 25 polish */
.site-header { background:#111; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.nav a { background: rgba(255,255,255,.07); }
.nav a:hover {
  background: rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,215,0,.18) inset;
}
.footer-button { margin-bottom: 10px; } /* space above copyright */
/* Sub‑Hero (slim variant) */
.hero.hero--slim { 
  padding-block: 56px;           /* smaller than full hero */
  background-image: none;        /* keeps it clean on subpages */
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.sub-hero-subtitle { margin-top: 6px; opacity: .9; }
.sub-hero-meta { margin-top: 10px; font-size: .95rem; opacity: .7; }
/* Sub‑Hero (slim variant) */
.hero.hero--slim { 
  padding-block: 56px;
  background-image: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.sub-hero-subtitle { margin-top: 6px; opacity: .9; }
.sub-hero-meta { margin-top: 10px; font-size: .95rem; opacity: .7; }

/* Layout helpers */
.section { padding: 64px 0; }
.section--muted { background: rgba(0,0,0,.03); }
.section--cta { background: rgba(0,0,0,.02); border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }

/* Grids */
.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 840px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Type */
.h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.15; margin-bottom: 8px; }
.h3 { font-size: clamp(1.3rem, 1.8vw, 1.5rem); margin-bottom: 8px; }
.h4 { font-size: 1.1rem; margin-bottom: 6px; }
.lead { font-size: 1.125rem; opacity: .9; }
.muted { opacity: .7; }

/* UI bits */
.card { padding: 18px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; }
.checklist li { margin: 6px 0; list-style: "✓  "; padding-left: 8px; }
.media img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Timeline */
.timeline { list-style: none; padding: 0; }
.timeline li { padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,.12); }
.timeline .tl-date { font-weight: 600; margin-right: 8px; opacity: .85; }
/* ===== Palette (Sandman) ===== */
:root{
  --sand-black:#0b0b0b;
  --sand-white:#ffffff;
  --sand-yellow:#ffd400;
  --sand-red:#c10016;
  --sand-red-hover:#ff1a1a;
  --sand-text:#e9e9e9;
}

/* Global background/text if not already set */
body{ background:var(--sand-black); color:var(--sand-text); }

/* ===== Header / Nav ===== */
.site-header{ 
  background: var(--sand-black);
  border-bottom:1px solid rgba(255,255,255,.07);
  position: sticky; top:0; z-index:50;
}
.nav-wrap{
  max-width:1100px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ text-decoration:none; }
.brand-mark{ color:var(--sand-yellow); font-weight:800; letter-spacing:.3px; }

.site-nav .nav{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.site-nav .nav-link{
  color:var(--sand-white); text-decoration:none; font-weight:600; opacity:.9;
  padding:8px 2px; border-bottom:2px solid transparent;
}
.site-nav .nav-link:hover{ color:var(--sand-yellow); }
.site-nav .nav-link.active{ color:var(--sand-yellow); border-bottom-color:var(--sand-red); }

/* Mobile wrap */
@media (max-width: 820px){
  .site-nav .nav{ gap:16px; flex-wrap:wrap; }
}

/* ===== Buttons (red primary) ===== */
.btn-primary{
  display:inline-block; background:var(--sand-red); color:#fff;
  padding:12px 22px; border-radius:8px; text-decoration:none; font-weight:700;
  transition:background .2s ease, transform .06s ease;
}
.btn-primary:hover{ background:var(--sand-red-hover); color:#fff; }
.btn-primary:active{ transform: translateY(1px); }
/* Primary Button - Red */
.btn-primary {
  display: inline-block;
  background: var(--sand-red);
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.08s ease;
}
.btn-primary:hover {
  background: var(--sand-red-hover);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0);
}
.section--cta-red .muted { color: #fff; opacity: .9; }
/* Primary Button - Red */
.btn-primary {
  display:inline-block;
  background:#c10016;
  color:#fff;
  padding:12px 22px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  transition:background .2s ease, transform .08s ease;
}
.btn-primary:hover { background:#ff1a1a; transform:translateY(-2px); }
.btn-primary:active { transform:translateY(0); }

/* CTA section backgrounds */
.section--cta { background:rgba(0,0,0,.02); border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.section--cta-red { background:#c10016; color:#fff; }
.section--cta-red .muted { color:#fff; opacity:.9; }
/* Card styling */
.card {
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  color: #111;         /* main text */
}
.card h4 { color: #000; }   /* headings darker */
.card p  { color: #222; }   /* body text darker but softer than headings */
.section { padding: 48px 0; }   /* was 64px */
.card { padding: 16px; }
/* Sandman Accent Red */
:root {
  --sand-red: #c10016;        /* base red */
  --sand-red-hover: #ff1a1a;  /* hover red */
}

/* Section headings */
.h2, .h3, .h4 {
  color: var(--sand-red);
}

/* Checklist ticks (✓) */
.checklist li {
  list-style: none;
  position: relative;
  padding-left: 24px;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sand-red);
  font-weight: bold;
}

/* Timeline date (milestones) */
.timeline .tl-date {
  color: var(--sand-red);
}

/* Buttons (already red, keep consistent) */
.btn-primary {
  background: var(--sand-red);
}
.btn-primary:hover {
  background: var(--sand-red-hover);
}
:root {
  --sand-yellow: #ffd400;
  --sand-red: #c10016;
  --sand-red-hover: #ff1a1a;
  --sand-white: #ffffff;
  --sand-text: #e9e9e9;
  --sand-black: #0b0b0b;
}

/* Headings = Yellow */
.h2, .h3, .h4 {
  color: var(--sand-yellow);
}

/* Checklist ticks = Red */
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sand-red);
  font-weight: bold;
}

/* Timeline date = Yellow */
.timeline .tl-date {
  color: var(--sand-yellow);
}

/* Buttons = Red */
.btn-primary {
  background: var(--sand-red);
  color: var(--sand-white);
}
.btn-primary:hover {
  background: var(--sand-red-hover);
  color: var(--sand-white);
}

/* Nav hover / active underline = Red */
.site-nav .nav-link:hover { 
  color: var(--sand-yellow); 
  border-bottom: 2px solid var(--sand-red); 
}
.site-nav .nav-link.active {
  color: var(--sand-yellow); 
  border-bottom: 2px solid var(--sand-red);
}
/* ========== ALL-HAMBURGER HEADER ========== */
:root{
  --sand-black:#0b0b0b; --sand-white:#fff;
  --sand-yellow:#ffd400; --sand-red:#c10016; --sand-red-hover:#ff1a1a;
  --sand-text:#e9e9e9;
}
body{ background:var(--sand-black); color:var(--sand-text); }

.site-header{ position:sticky; top:0; z-index:60; background:rgba(11,11,11,.9); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.07); }
.nav-wrap{ max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; }
.brand-mark{ color:var(--sand-yellow); font-weight:800; letter-spacing:.3px; }

/* Hamburger button */
.hamburger{ background:transparent; border:0; cursor:pointer; width:44px; height:36px; position:relative; }
.hamburger-box{ display:inline-block; width:26px; height:18px; position:relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
  width:26px; height:2px; background:var(--sand-white); position:absolute; left:0; transition:all .2s ease;
}
.hamburger-inner{ top:50%; transform:translateY(-50%); }
.hamburger-inner::before{ content:""; top:-8px; }
.hamburger-inner::after{ content:""; top:8px; }
/* X state */
.hamburger[aria-expanded="true"] .hamburger-inner{ background:transparent; }
.hamburger[aria-expanded="true"] .hamburger-inner::before{ top:0; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-inner::after{ top:0; transform:rotate(-45deg); }

/* Drawer */
.menu-drawer{ position:fixed; inset:0 0 0 auto; width:min(420px, 90vw); background:#111; color:#eee;
  transform:translateX(100%); transition:transform .25s ease; box-shadow:-20px 0 40px rgba(0,0,0,.5); }
.menu-drawer[aria-hidden="false"]{ transform:none; }

.menu-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.menu-close{ background:transparent; color:#fff; font-size:28px; border:0; cursor:pointer; line-height:1; }

.menu-groups{ list-style:none; margin:0; padding:12px 10px 30px; display:grid; gap:14px; }
.group{ background:#141414; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; }
.group h4{ margin:4px 6px 10px; color:var(--sand-yellow); font-size:1.05rem; }
.group ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.group a{ display:block; padding:10px 10px; border-radius:8px; text-decoration:none; color:#eaeaea; background:#171717; }
.group a:hover{ background:#1f1f1f; border-left:3px solid var(--sand-red); padding-left:7px; }

/* Red primary button (reuse) */
.btn-primary{ display:inline-block; background:var(--sand-red); color:#fff; padding:12px 22px; border-radius:8px;
  text-decoration:none; font-weight:700; transition:background .2s ease, transform .08s ease; }
.btn-primary:hover{ background:var(--sand-red-hover); transform:translateY(-2px); }

/* Section utilities already used elsewhere */
.section{ padding:48px 0; }
.section--muted{ background:rgba(255,255,255,.02); }
.card{ background:#fff; color:#111; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px; }
.h2,.h3,.h4{ color:var(--sand-yellow); }
.checklist li{ list-style:none; position:relative; padding-left:24px; }
.checklist li::before{ content:"✓"; position:absolute; left:0; color:var(--sand-red); font-weight:700; }
.timeline .tl-date{ color:var(--sand-yellow); }
.section { padding: 40px 0; }
.section--tight { padding: 32px 0; }
.hero.hero--slim { padding-block: 44px; }
/* Quiet secondary button (for coaches pages) */
.btn-secondary{
  display:inline-block;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff; text-decoration:none; font-weight:600;
  background:transparent;
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn-secondary:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

/* Tighter sections for this page */
.section--tight{ padding:32px 0; }
/* Athletes: header without hamburger */
.site-header--athletes .pillnav { display:flex; gap:10px; flex-wrap:wrap; }
.pill-link{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:#171717; color:#eaeaea; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.pill-link:hover{ background:#1f1f1f; border-color:var(--sand-red); transform:translateY(-2px); }

/* Badge grid pop */
.badge-grid .badge-card{ transition:transform .1s ease, box-shadow .2s ease; }
.badge-grid .badge-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Promo pills (red/yellow balanced) */
.promo-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.promo-pill{
  display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none;
  background:var(--sand-yellow); color:#000; font-weight:800;
  transition:transform .08s ease, background .2s ease;
}
.promo-pill:hover{ background:#ffe457; transform:translateY(-2px); }

/* Tight variant for sections on this page */
.section--tight{ padding:32px 0; }

/* Ensure headings color balance remains */
.h2, .h3, .h4{ color: var(--sand-yellow); }
/* ===== Athletes Action Hero ===== */
.ath-hero{
  position: relative; min-height: clamp(360px, 52vh, 560px);
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ath-hero__bg{
  position: absolute; inset: 0; background-image: var(--ath-hero-img, none);
  background-size: cover; background-position: center 40%;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.04);
}
.ath-hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55));
  /* subtle red vignette edges */
  box-shadow: inset 0 0 0 9999px rgba(193,0,22,.06);
}
.ath-hero__content{
  position: relative; z-index: 1; text-align: center; padding: 0 18px; max-width: 980px;
}
.ath-hero__title{
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  color: var(--sand-yellow); margin: 0 0 6px;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.ath-hero__tag{
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--sand-white); opacity: .92; margin-bottom: 14px;
}

/* Pillnav reuse + hero spacing */
.pillnav--hero{ justify-content: center; gap: 10px; flex-wrap: wrap; }
.pillnav--hero .pill-link{
  background: #171717; color: #eaeaea; border:1px solid rgba(255,255,255,.1);
  padding: 10px 16px; border-radius: 999px; font-weight: 800; text-decoration: none;
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pillnav--hero .pill-link:hover{
  background:#1f1f1f; border-color: var(--sand-red); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
/* Home hero: subtle depth without clutter */
.hero--home{
  padding-block: 88px;               /* a bit taller than slim */
  background: radial-gradient(80% 60% at 50% 0%, rgba(255,212,0,.08), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-lead{ opacity:.95; }
.hero-ctas{ margin-top: 12px; }
.hero-meta{ margin-top: 8px; opacity:.7; font-size:.95rem; }

/* 4-up grid helper for incentives (falls back on mobile) */
.grid-4{ display:grid; gap:24px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } }

/* Tighten rhythm a touch */
.section--tight{ padding: 36px 0; }
.hero--home{
  padding-block: 88px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(255,212,0,.08), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.grid-4{ display:grid; gap:24px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } }
.section--tight{ padding: 36px 0; }
.hero-ctas{ margin-top: 12px; }
.hero-meta{ margin-top: 8px; opacity:.7; font-size:.95rem; }
/* Reset */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f4f4;
  color: #222;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #111;
  color: #fff;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.nav-links a:hover {
  color: #f44336; /* red hover */
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #f44336, #111);
  color: #fff;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
}
/* 🔴 System Accent Style: Taglines / Subtitles */
.subtitle,
.tagline,
.home-intro,
.section-subtitle {
  color: #b22222;   /* Firebrick red - matches Combat/Stripe red */
  font-weight: 600; /* Semi-bold */
  letter-spacing: 0.5px; /* Tight polish */
  margin-top: 0.25em;
  margin-bottom: 0.75em;
  display: block;
}

/* Optional hover effect if clickable */
.subtitle a, 
.tagline a {
  color: #b22222;
  text-decoration: none;
}
.subtitle a:hover, 
.tagline a:hover {
  text-decoration: underline;
}
.subtitle, .tagline, .home-intro {
  color: #b22222;   /* firebrick red */
  font-weight: 600;
}
/* Quick test */
body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  padding: 20px;
}

.black { color: black; }
.gold { color: gold; }
.red { color: red; }
.green { color: green; }
.blue { color: blue; }
.gray { color: gray; }
:root { --bg:#0a0a0a; --card:#111; --text:#f4f4f4; --muted:#aaa; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto; background:var(--bg); color:var(--text); }
.main { max-width:1100px; margin:0 auto; padding:2rem 1rem; }
.card { background:var(--card); border-radius:16px; padding:20px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
h1,h2,h3 { margin:0 0 .5rem; }
.muted { color:var(--muted); }
#tl-list { margin:.5rem 0 0; padding-left:1.1rem; }
/* XP Log Card Style */
.xp-card {
  background: #ffffff;        /* white card */
  border-radius: 10px;        /* rounded corners */
  padding: 12px 16px;         /* inner spacing */
  margin: 10px 0;             /* space between logs */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* subtle shadow */
  font-size: 15px;
  color: #222;                /* dark readable text */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.xp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* XP demo styles */
.xp-title { margin: 0 0 12px; font-size: 1.4rem; font-weight: 700; }
.xp-feed { display: grid; gap: 12px; }
.xp-card {
  background: #0b0f14;       /* dark card */
  color: #f3f5f7;            /* light text */
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.xp-card p { margin: 4px 0; }
.xp-card strong { color: #ffd84d; } /* sandman gold accent */
#athleteSelect { padding:6px 10px; border-radius:8px; margin-right:8px; }
.btn { padding:6px 10px; border-radius:8px; margin-left:6px; }
.xp-card { background:#fff; border-radius:12px; padding:10px 12px; margin:8px 0; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.xp-card.strong { font-size:1.05rem; }
.muted { opacity:.7; }
.xp-card {
  background: #121212; /* Sandman black */
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  color: #fff;
  font-family: system-ui, sans-serif;
}

.xp-card strong {
  color: #FFD700; /* gold for XP highlight */
  font-size: 1.1em;
}

.xp-card small {
  color: #bbb;
  display: block;
  margin-top: 4px;
}
/* XP cards */
.xp-card{background:#0b0f14;color:#dbe4ee;border-radius:12px;padding:12px 14px;margin:10px 0;box-shadow:0 6px 10px rgba(0,0,0,.25)}
.xp-card strong{color:#ffd54a;font-weight:700}
.xp-card .muted{color:#a0a7b3}
.xp-card.strong{background:#121823;font-weight:600}
/* === Phase 34.1 — XP UI polish === */
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.btn{
  appearance:none;border:1px solid #2b2f36;border-radius:10px;
  padding:8px 12px;background:#141820;color:#e7eef7;cursor:pointer
}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.xp-card{
  background:#0b0f14;color:#dbe4ee;border-radius:12px;
  padding:12px 14px;margin:10px 0;box-shadow:0 6px 10px rgba(0,0,0,.25)
}
.xp-card strong.gold{color:#ffd54a}
.xp-card .muted{color:#9aa3af}

.xp-card.strong{
  background:#10151d;border-left:4px solid #ffd54a
}

#xp-totals .xp-card{
  display:flex;justify-content:space-between;align-items:center
}

/* subtle feedback pulse you can trigger after save */
.success-pulse{animation:pulse .6s ease}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
/* --- 34.2 UX tweaks --- */
.btn.busy{opacity:.6; pointer-events:none}

.toast{
  position:fixed; right:16px; bottom:16px;
  background:#0b0f14; color:#e7eef7; border:1px solid #2b2f36;
  padding:10px 14px; border-radius:10px; box-shadow:0 6px 12px rgba(0,0,0,.35);
  opacity:0; transform:translateY(8px); transition:all .25s ease;
  z-index:9999;
}
.toast.show{opacity:1; transform:translateY(0)}
.toast.ok{border-left:4px solid #24c17a}
.toast.warn{border-left:4px solid #ffd54a}
.toast.err{border-left:4px solid #ff6b6b}
/* optional: make the trash sit on the right inside each card */
.xp-card { position: relative; }
.xp-card .deleteBtn {
  position: absolute;
  right: 8px;
  top: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}
/* XP cards layout polish */
.xp-card {
  position: relative;         /* enables absolute trash button */
  background: #11151d;
  color: #eaeef6;
  border-radius: 14px;
  padding: 14px 40px 12px 14px; /* extra right padding for trash */
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  margin: 14px 0;
}

.xp-card.small   { padding: 10px 12px; }
.xp-card.strong  { font-weight: 700; }
.xp-card .gold   { color: #ffd34d; }
.xp-card .muted  { color: #9aa4b2; }

/* Inline controls look consistent */
#addXPBtn, #loadLatestBtn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Trash button */
.xp-card .deleteBtn 
/* Make inline controls solid and stable on hover/press/focus */
#addXPBtn,
#loadLatestBtn,
#addAthleteBtn{
  -webkit-appearance:none; appearance:none;
  border:1px solid rgba(0,0,0,.25);
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .05s ease, filter .08s ease, opacity .2s ease;
}

/* +10 XP = primary red */
#addXPBtn{ background:#e33; border-color:#a11b1b; }
#addXPBtn:hover{ filter:brightness(1.05); }
/* #addXPBtn:active{ transform:translateY(1px); filter:brightness(.95); } */
#addXPBtn:focus-visible{ outline:2px solid #FFD700; outline-offset:2px; }

/* Load Latest & Add Athlete = dark secondary */
#loadLatestBtn, #addAthleteBtn{ background:#3a3f47; }
#loadLatestBtn:hover, #addAthleteBtn:hover{ filter:brightness(1.05); }
/* #loadLatestBtn:active, #addAthleteBtn:active{ transform:translateY(1px); filter:brightness(.95); } */
#loadLatestBtn:focus-visible, #addAthleteBtn:focus-visible{
  outline:2px solid #FFD700; outline-offset:2px;
}

/* When disabled, stay visible (dim only) */
#loadLatestBtn[disabled], #addAthleteBtn[disabled], #addXPBtn[disabled]{
  opacity:.55; cursor:not-allowed; transform:none; filter:none;
}

/* Optional: kill the iOS tap highlight that can cause a “flash” */
*{ -webkit-tap-highlight-color: transparent; }

.xp-card .deleteBtn:hover {
  transform: scale(1.08);
  background: rgba(255,93,93,.12);
  color: #ff8081;
}
/* Base buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.55rem .9rem;
  border-radius:12px; border:1px solid rgba(0,0,0,.25);
  background:#2f333b; color:#fff; 
  box-shadow:0 2px 0 rgba(0,0,0,.25);
  cursor:pointer; user-select:none; text-decoration:none;
  transition:transform .05s ease, filter .08s ease, opacity .2s ease;
}

.btn-primary{ background:#e33; border-color:#a11b1b; }
.btn-secondary{ background:#3a3f47; }

/* Hover / pressed / focus look */
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:translateY(1px); filter:brightness(.95); }
.btn:focus-visible{ outline:2px solid #FFD700; outline-offset:2px; }

/* Disabled: still visible, just dimmed */
.btn:disabled,
.btn[disabled]{
  opacity:.5; cursor:not-allowed; filter:none; transform:none;
}

/* iOS Safari tap highlight can make things “flash” weirdly */
* { -webkit-tap-highlight-color: transparent; }
/* XP Tracker spacing */
#controls-row,
#award-row,
#athlete-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

#controls-row button,
#award-row select,
#award-row input,
#athlete-row input,
#athlete-row select,
#athlete-row button {
  flex: 1;
  min-width: 120px;
  max-width: 220px;
}
/* --- btn red (fourth color) --- */
.btn-red {
  background: #e23a3a;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .12s ease, background .12s ease;
}
.btn-red:hover { transform: scale(1.02); background:#ff5858; }
.btn-red:active { transform: scale(.98); }
/* Simple table look */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.tbl th { text-align: left; opacity: .8; font-weight: 600; }
.tbl .right { text-align: right; }
.tbl tr.selected { background: rgba(255,215,0,.06); }

/* Tiny toast */
.toast {
  position: fixed; right: 16px; bottom: 16px;
  background: rgba(40,40,45,.95); color: #fff;
  padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  z-index: 9999; font-weight: 600;
}
.toast.error { background: rgba(180,50,50,.95); }

/* Button color you asked for (red) if not already present) */
.btn-red {
  background: #c93a3a; color: #fff;
  border: none;
}
.btn-red:hover { filter: brightness(1.05); }

/* Small utility */
.row.wrap { display:flex; flex-wrap:wrap; }
.row.gap { gap: 10px; }
/* Coach intake polish */
form.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
form.intake-grid label { display: flex; flex-direction: column; gap: 6px; }
form.intake-grid .full { grid-column: 1 / -1; }

.status { padding: 10px 14px; border-radius: 10px; background: #1f2733; color: #cfe2ff; }
.status.text-ok  { background: #1f2733; color: #d4f5a3; }
.status.text-bad { background: #3a2121; color: #ffb3b3; }
/* ===== Tools page facelift (Sandman 6-color) ===== */
.tools-page .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; margin-top:20px;
}
.tools-page .tool{
  display:block; text-decoration:none; background:#000; color:#fff;
  border:1px solid #444; border-radius:16px; padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.tools-page .tool:hover{ background:#111; border-color:#FFD700; transform:translateY(-4px); }
.tools-page .tool-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.tools-page .tool h3{ margin:0; font-size:1.25rem; color:#FFD700; }      /* Yellow */
.tools-page .tool p{ margin:0; font-size:.95rem; line-height:1.4; color:#fff; } /* White */

/* Pills (statuses) */
.tools-page .pill{
  font-size:12px; padding:4px 12px; border-radius:999px; font-weight:700; text-transform:uppercase;
}
.tools-page .pill.ready{ background:#009688; color:#fff; }     /* Teal */
.tools-page .pill.beta{ background:#FF0000; color:#fff; }      /* Red */
.tools-page .pill.placeholder{ background:#333; color:#fff; }  /* Grey */
.tools-page .pill.spotlight{ background:#FFD700; color:#000; } /* Yellow */
/* ===== Tools page facelift (Sandman 6-color) ===== */
.tools-page .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; margin-top:20px;
}
.tools-page .tool{
  display:block; text-decoration:none; background:#000; color:#fff;
  border:1px solid #444; border-radius:16px; padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.tools-page .tool:hover{ background:#111; border-color:#FFD700; transform:translateY(-4px); }
.tools-page .tool-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.tools-page .tool h3{ margin:0; font-size:1.25rem; color:#FFD700; }      /* Yellow */
.tools-page .tool p{ margin:0; font-size:.95rem; line-height:1.4; color:#fff; } /* White */
#xp-insights-card .muted { opacity: .75; }
#xp-insights-card strong { font-weight: 700; }
.grid2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.card.equal{min-height:320px;display:flex;flex-direction:column}
.bar-wrap{height:12px;background:#222;border-radius:8px;overflow:hidden}
.badge{background:#333;padding:.25rem .5rem;border-radius:.5rem}
#coach-notes .note-body{font-style:italic;line-height:1.5}
#coach-notes .note-meta{margin-top:.5rem;opacity:.7;font-size:.9rem}

/* Pills (statuses) */
.tools-page .pill{
  font-size:12px; padding:4px 12px; border-radius:999px; font-weight:700; text-transform:uppercase;
}
.tools-page .pill.ready{ background:#009688; color:#fff; }     /* Teal */
.tools-page .pill.beta{ background:#FF0000; color:#fff; }      /* Red */
.tools-page .pill.placeholder{ background:#333; color:#fff; }  /* Grey */
.tools-page .pill.spotlight{ background:#FFD700; color:#000; } /* Yellow */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card,#f3f4f6);color:var(--cardText,#111827);
      border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.25);
      padding:18px 18px 16px;display:flex;flex-direction:column;min-height:160px}
.card h3{margin:0 0 6px}
.card p{margin:0 0 14px;color:var(--muted,#6b7280);line-height:1.4}
.open{align-self:flex-start;background:#10b981;color:#fff;text-decoration:none;
      padding:10px 16px;border-radius:10px;font-weight:700}
.open:hover{opacity:.9}
.btn.disabled {
  background: #666;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}
/* ====== HUB COLOR STYLES ====== */
/* --- Readability boost for landing/hero areas --- */

/* Works for your <section class="poster"> hero. 
   If a page uses <section class="landing"> it will also match. */
.poster, .landing {
  position: relative;
  border-radius: 22px;                 /* keep your rounded hero look */
  overflow: hidden;                    /* clip overlay to radius */
}

/* Dark overlay behind the text so letters never wash out */
.poster::before,
.landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,.78) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.landing h1, 
.landing p {
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
}

/* Make sure the actual text sits above the overlay */
.poster > *, 
.landing > * {
  position: relative;
  z-index: 1;
}

/* High-contrast type + subtle glow for readability */
.poster h1, .poster h2, .poster h3, .poster p, .poster .sub,
.landing h1, .landing h2, .landing h3, .landing p, .landing .sub {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* Optional: give the CTA a little lift so it reads on any bg */
.poster .btn, .landing .btn {
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  font-weight: 800;
}

/* If your subtitle class is lighter, keep it readable */
.poster .sub, .landing .sub {
  color: rgba(255,255,255,.9) !important;
}

/* Base card style */
.card {
  background: #0d1117; /* dark background */
  border-radius: 12px;
  padding: 20px;
  margin: 24px auto;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  color: #fff;
}

/* Section labels */
.label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 8px;
  text-transform: uppercase;
}

/* Combat (Red / Yellow) */
.combat .label {
  background: #ffcc00;
  color: #000;
}
.combat-btn {
  display: inline-block;
  background: #ff3333;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 12px;
}
.combat-btn:hover {
  background: #cc0000;
}

/* Sports (Green) */
.sports .label {
  background: #00cc66;
  color: #000;
}
.sports-btn {
  display: inline-block;
  background: #00cc66;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 12px;
}
.sports-btn:hover {
  background: #00994d;
}

/* Lifestyle (Teal / Blue) */
.lifestyle .label {
  background: #00bcd4;
  color: #000;
}
.lifestyle-btn {
  display: inline-block;
  background: #00bcd4;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 12px;
}
.lifestyle-btn:hover {
  background: #0097a7;
}
/* ====== HUB COLOR STYLES with Glow Accents ====== */
.f4-page header,
.f4-page .poster,
.f4-page .masthead {
  background: none !important;
  box-shadow: none !important;
}
/* Base card style */
.card {
  background: #0d1117; /* dark background */
  border-radius: 12px;
  padding: 20px;
  margin: 24px auto;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Section labels */
.label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 8px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

/* Glow bar (behind header text) */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Combat (Red / Yellow) */
.combat .label {
  background: #ffcc00;
  color: #000;
}
.combat-btn {
  display: inline-block;
  background: #ff3333;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 12px;
}
.combat-btn:hover {
  background: #cc0000;
}
.combat::before {
  background: linear-gradient(90deg, #ff3333, #ffcc00);
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.7);
}

/* Sports (Green) */
.sports .label {
  background: #00cc66;
  color: #000;
}
.sports-btn {
  display: inline-block;
  background: #00cc66;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 12px;
}
.sports-btn:hover {
  background: #00994d;
}
.sports::before {
  background: linear-gradient(90deg, #00cc66, #33ff99);
  box-shadow: 0 0 15px rgba(0, 204, 102, 0.7);
}

/* Lifestyle (Teal / Blue) */
.lifestyle .label {
  background: #00bcd4;
  color: #000;
}
.lifestyle-btn {
  display: inline-block;
  background: #00bcd4;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 12px;
}
.lifestyle-btn:hover {
  background: #0097a7;
}
.lifestyle::before {
  background: linear-gradient(90deg, #00bcd4, #4dd0e1);
  box-shadow: 0 0 15px rgba(0, 188, 212, 0.7);
}
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.8;
}

/* Combat: Red */
.btn-combat {
  background: #e63946;
  border: 2px solid #e63946;
  color: #fff;
}

/* Sports: Green */
.btn-sports {
  background: #06d6a0;
  border: 2px solid #06d6a0;
  color: #fff;
}

/* Lifestyle / Strength: Teal/Blue */
.btn-lifestyle {
  background: #00b4d8;
  border: 2px solid #00b4d8;
  color: #fff;
}
/* Foundry4: prevent header/masthead background overlays from bleeding in */

/* Force black background only when needed */
body.f4-black {
  background: #000 !important;   /* solid black */
  color: #e5e7eb !important;     /* light gray text */
}

body.f4-black header,
body.f4-black .poster,
body.f4-black .masthead {
  background: none !important;
  box-shadow: none !important;
}
.grid2 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .grid2 { grid-template-columns: 1fr 1fr; }
}
.card.equal {
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
#skillsList {
  flex: 1;
  overflow-y: auto;
}
.foundry4_sports .card {
  display: block;
  width: 100%;
}
.xp-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.xp-tools .card {
  flex: 1 1 48%;
  min-width: 300px;
}
/* Mini Ladder Roadmap */
.ladder { position: relative; margin-top:.4rem; }
.ladder-track {
  display:flex; gap:4px; width:100%;
  background:#0b0e13; padding:6px; border-radius:12px; border:1px solid #242a36;
}
.ladder-seg {
  flex:1 1 0; height:14px; border-radius:8px;
  background:#1a2130; border:1px solid #2a3244; position:relative;
}
.ladder-seg.past { background:#223149; border-color:#314564; }
.ladder-seg.current { background:#2a3f6a; border-color:#486595; box-shadow:0 0 0 2px rgba(255,211,61,.25) inset; }
.ladder-labels { display:flex; justify-content:space-between; margin-top:6px; font-size:.85rem; color:#9fb0c8; }
.ladder-labels span strong { color:#ffd33d; }

/* XP marker pin */
.ladder-pin {
  position:absolute; top:-6px;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:10px solid #ffd33d;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
#leaderboard {
  margin: 20px;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 10px;
}
#leaderboard ul {
  list-style: none;
  padding: 0;
}
#leaderboard li {
  margin: 4px 0;
  font-weight: bold;
}
.site-header {
  text-align: center;
  margin: 30px 0;
}

.site-header .logo {
  max-width: 120px; /* adjust size if needed */
  display: block;
  margin: 0 auto 15px;
}

.site-header .site-title {
  font-size: 2em;
  font-weight: bold;
  color: #ffcc00; /* Sandman gold */
  margin: 0;
}

.site-header .intro {
  font-size: 1.1em;
  color: #ccc; /* softer grey so gold title stands out */
  margin-top: 8px;
}
.logo {
  margin: 0 auto 25px; /* was 15px, bumped to 25px */
}
.logo:hover {
  filter: drop-shadow(0 0 12px gold);
  transform: scale(1.05);
  transition: all 0.3s ease;
}
.snap-wrap { display: grid; gap: 12px; }
.snap-card { background:#141414; padding:12px 14px; border-radius:10px; border:1px solid #222; }
.snap-row { line-height:1.35; }
.snap-row.name { font-size:1.05rem; color:#ffd34d; }
.snap-row.xp { color:#e6e6e6; }
.snap-row.program { color:#bdbdbd; }
.snap-row.updated { color:#a0a0a0; }
.snap-row.ago { color:#888; font-style:italic; }
.snap-wrap { display: grid; gap: 12px; }
.snap-card { background:#141414; padding:12px 14px; border-radius:10px; border:1px solid #222; }
.snap-row { line-height:1.35; }
.snap-row.name { font-size:1.05rem; color:#ffd34d; }
.snap-row.rank { color:#8fd18f; }
.snap-row.ladder { color:#a7c4ff; }
.snap-row.xp { color:#e6e6e6; }
.snap-row.program { color:#bdbdbd; }
.snap-row.updated { color:#a0a0a0; }
.snap-row.ago { color:#888; font-style:italic; }
/* --- Belt stripe bars --- */
.stripes { display:flex; gap:6px; margin-top:6px; align-items:center; }
.stripe  { width:18px; height:6px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.35) inset; }
/* stripe visuals */
.stripes {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.stripe {
  width: 18px;
  height: 6px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}
.rank {
  margin-top: 4px;
}
.stripes {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.stripe {
  width: 18px;
  height: 6px;
  border-radius: 2px;
  background: white; /* fallback */
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}
.stripes { margin-top: 6px; display:flex; gap:6px; }
.stripe  { width:24px; height:6px; border-radius:2px; display:inline-block; }
/* ========= Sandman UI — Dark, Rounded, Double-Border, Buttons ========= */
:root{
  --bg: #0e1218;
  --panel: #12161d;
  --panel-2: #141a22;
  --line: #242a36;           /* outer border */
  --line-2: #2f3644;         /* inner/double border */
  --text: #e6eefc;
  --muted: #95a3b8;
  --brand: #FFD700;          /* gold */
  --brand-ink: #2a2300;
  --danger: #ad1e2b;
  --ok: #19c37d;
}

/* Page base */
html,body{ background: var(--bg); color: var(--text); }
.muted{ color: var(--muted); }

/* Cards: dark, rounded, double-border + soft shadow */
.card{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-radius: 14px;
  border: 1px solid var(--line);
  /* double-border illusion */
  box-shadow:
    0 0 0 1px var(--line-2) inset,   /* inner hairline */
    0 12px 28px rgba(0,0,0,.35);     /* depth */
  padding: 16px;
}
.card.tight{ padding: 10px; }
.card:hover{ box-shadow:
  0 0 0 1px var(--line-2) inset,
  0 16px 34px rgba(0,0,0,.45);
}

/* Clickable areas */
.clickable{ cursor: pointer; transition: transform .06s ease; }
.clickable:active{ transform: translateY(1px); }

/* Headings inside cards */
.title{ color: var(--text); letter-spacing:.2px; margin:0 0 .6rem; }

/* Clean lists (recent XP, mini-ladder UL wrapper) */
ul.clean{ list-style:none; margin:0; padding:0; }
ul.clean > li{
  background: #171b23;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .55rem .7rem;
  margin: .35rem 0;
}

/* Progress bar shell (reuse anywhere) */
.bar{ background:#0b0e13; border-radius:10px; overflow:hidden; height:10px; }
.bar > div{ height:10px; background: var(--brand); }

/* Inputs — easy to “find” with strong focus ring */
input, select, textarea{
  width:100%;
  background:#151922;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.55rem .65rem;
  outline:none;
}
input::placeholder, textarea::placeholder{ color:#7f8aa3; }
input:focus, select:focus, textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,215,0,.20); /* focus halo */
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem;
  padding:.6rem .9rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:#1c2430;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition: filter .12s ease, transform .06s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Button variants */
.btn-primary{
  background: linear-gradient(180deg, #2a2f3a, #232934);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(255,215,0,.25) inset;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.btn-outline{
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn-outline:hover{ background: rgba(255,255,255,.04); }

.btn-ghost{
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover{ background: rgba(255,255,255,.05); }

.btn-danger{
  background: #2a0f13;
  border-color: #65212a;
  color: #ffdfe3;
}
.btn-danger:hover{ filter:brightness(1.05); }

/* Pills / chips */
.pill{
  display:inline-block;
  padding:.4rem .65rem;
  border-radius:999px;
  background:#1c2430;
  border:1px solid var(--line-2);
}

/* Mini-ladder container (the UL inside #miniLadder gets rows from JS) */
#miniLadder ul{ list-style:none; padding:0; margin:0; }
#miniLadder li{
  border-radius:12px;
  border:1px solid var(--line);
  background: linear-gradient(90deg, #10151f 0%, #151b25 100%);
}

/* Utility layout (optional) */
.wrap{ max-width:1100px; margin:0 auto; padding:18px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
/* Teen/Foundry4 ladder: make Legend label pop */
.tier-legend .label { text-shadow: 0 0 6px rgba(212,175,55,.55); }
/* Youth Ladder – Legend thin stripe */
.tier-legend {
  position: relative;
}
/* Youth Legend: solid black with white rim */
.tier.rim-white::after{
  content:"";
  position:absolute;
  inset:3px;              /* keep selection border visible */
  border-radius:10px;     /* match your li’s 12px minus the inset */
  box-shadow:0 0 0 2px #fff inset;
  pointer-events:none;
}
/* Generic belt pill */
.belt {
  --text:#fff; --start:#000; --end:#000; --outline:#242a36;
  color: var(--text);
  background: linear-gradient(90deg, var(--start), var(--end));
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: .6rem .9rem;
  font-weight: 800;
  letter-spacing: .5px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* Glow/rim treatments */
.belt.glow-white   { box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.25) inset; }
.belt.glow-dark    { box-shadow: 0 0 0 2px #000 inset, 0 0 0 1px rgba(255,255,255,.08) inset; }

/* (Optional) data-key specific tweaks */
.belt[data-key="junior-legend"] { border-color:#fff; }
.belt[data-key="shadow"]        { color:#111; }
.belt[data-key="recruit"]       { color:#111; }
.belt {
  /* no hard background here */
  background: linear-gradient(90deg, var(--start), var(--end));
  color: var(--text);
  border-radius: 12px;
}
.rank-row { display:flex; gap:.5rem; align-items:center; margin:.25rem 0 .5rem }
.rank-name { font-weight:700; letter-spacing:.3px }

.progress {
  position: relative; height: 14px; border-radius: 999px;
  background: #111a20; border: 1px solid #2A2A36; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #FFD000, #FFB700);
  transition: width .35s ease;
}

/* Stripe tick marks (milestones) */
.ticks { position:absolute; inset:0; display:flex; justify-content:space-between; padding:0 8px; pointer-events:none }
.tick { width:2px; height:100%; background: rgba(255,255,255,.10) }
.tick.active { background: rgba(255,255,255,.92) }

.dash {
  max-width: 100%;
  margin: 0;
  padding: 18px 20px;
  display: grid;
  gap: 18px;
}
.dash > .card {
  width: 100%;
}
.progress-bar{
  width:100%;
  height:28px;                /* belt thickness */
  border-radius:14px;
  background:#333;
  position:relative;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  border-radius:14px;
  background:#FFD700;         /* Sandman gold */
  transition:width .4s ease-in-out;
}

/* ticks created by JS */
.progress-tick{
  position:absolute;
  top:0;
  width:2px;
  height:100%;
  background:rgba(255,255,255,.45);
  pointer-events:none;
}
.topbar .btn {
  background: #222;         /* keeps dark background */
  color: #ff4444;           /* red text */
  border: 2px solid #ff4444;
}
.topbar .btn:hover {
  background: #ff4444;
  color: #000;              /* black text on hover */
}
/* Belt progress — thicker, more “belt” */
.progress{
  --belt-h: 26px;                /* was 18–20px */
  position:relative;
  height:var(--belt-h);
  border-radius:999px;
  background:#111a20;
  border:1px solid #2A2A36;
  overflow:visible;
}
@media (min-width:720px){
  .progress{ --belt-h: 28px; }   /* desktop bump */
}
.progress-fill{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  transition:width .45s ease;
  box-shadow:
    inset 0 0 0 1px #2A2A36,     /* belt stitching edge */
    inset 0 2px 6px rgba(0,0,0,.25);
}

/* Rail + ticks tuned to thicker belt */
.stripe-track{ position:absolute; inset:0; border-radius:999px; pointer-events:none; }
.stripe-track::before{
  content:""; position:absolute; left:10px; right:10px;
  top:50%; height:3px; transform:translateY(-50%);
  background:rgba(255,255,255,.10); border-radius:3px;
}
.ticks{ position:absolute; inset:0; pointer-events:none; }
.tick{
  position:absolute;
  top:calc(-0.30*var(--belt-h));       /* sits a bit higher */
  width:3px;                           /* was 2px */
  height:calc(var(--belt-h) + 0.60*var(--belt-h));
  background:rgba(255,255,255,.14);
  border-radius:2px;
  transition:background .2s, box-shadow .2s, transform .2s;
}
.tick.earned{
  background:rgba(0,0,0,.45);
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
  transform:translateY(-1px);          /* tiny lift for emphasis */
}
/* Belt progress — thicker, more “belt” */
.progress{
  --belt-h: 26px;                /* was 18–20px */
  position:relative;
  height:var(--belt-h);
  border-radius:999px;
  background:#111a20;
  border:1px solid #2A2A36;
  overflow:visible;
}
@media (min-width:720px){
  .progress{ --belt-h: 28px; }   /* desktop bump */
}
.progress-fill{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  transition:width .45s ease;
  box-shadow:
    inset 0 0 0 1px #2A2A36,     /* belt stitching edge */
    inset 0 2px 6px rgba(0,0,0,.25);
}

/* Rail + ticks tuned to thicker belt */
.stripe-track{ position:absolute; inset:0; border-radius:999px; pointer-events:none; }
.stripe-track::before{
  content:""; position:absolute; left:10px; right:10px;
  top:50%; height:3px; transform:translateY(-50%);
  background:rgba(255,255,255,.10); border-radius:3px;
}
.ticks{ position:absolute; inset:0; pointer-events:none; }
.tick{
  position:absolute;
  top:calc(-0.30*var(--belt-h));       /* sits a bit higher */
  width:3px;                           /* was 2px */
  height:calc(var(--belt-h) + 0.60*var(--belt-h));
  background:rgba(255,255,255,.14);
  border-radius:2px;
  transition:background .2s, box-shadow .2s, transform .2s;
}
.tick.earned{
  background:rgba(0,0,0,.45);
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
  transform:translateY(-1px);          /* tiny lift for emphasis */
}
/* --- Belt Progress Bar (Youth + Teen) --- */
#rankFill {
  height: 100%;
  transition: width 0.4s ease;
}

#stripeTicks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

#stripeTicks .tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,.3); /* default tick */
}

#stripeTicks .tick.earned {
  background: red;            /* earned stripe highlight */
  box-shadow: 0 0 2px rgba(255,0,0,.6);
}

/* Percent text */
#progressPct {
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 6px;
  display: block;
  text-align: right;
}
/* -------------------------------
   Recent XP Adds — visual polish
-------------------------------- */
#recentXp {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #f3f4f6;          /* light gray text */
  margin-top: 0.5rem;
}

#recentXp .recent-entry {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#recentXp .recent-entry:last-child {
  border-bottom: none;     /* no divider on last item */
}

#recentXp .recent-entry strong {
  color: #FFD400;          /* gold highlight for XP points */
  font-weight: 600;
}
/* Recent XP log */
.recent-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recent-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #171b23;
  border: 1px solid #242a36;
  border-radius: 12px;
  padding: 10px 12px;
}
.recent-entry strong {
  font-weight: 800;
  color: #ffd33d;
  margin-right: 8px;
}
.recent-entry .meta {
  color: #a6b0bf;
  font-size: 0.95rem;
  display: flex;
  gap: 10px;
  align-items: center;
}
.recent-entry .tag {
  background: #222734;
  border: 1px solid #2f3544;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.85rem;
  color: #cbd5e1;
}
.recent-entry time {
  color: #8fa3bd;
  font-size: 0.85rem;
}
.recent-box { padding: 10px 12px; display: grid; gap: 10px; }
.recent-row { display: flex; align-items: center; justify-content: space-between;
  background: #171a1f; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 0 0 1px #262b33; }
.recent-left { display: flex; gap: 8px; align-items: center; color: #d7dde5; }
.recent-right { color: #9aa3af; font-weight: 600; letter-spacing: .2px; }
.pill { color:#fff; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.bg-gray-700{ background:#374151; } .bg-amber-700{ background:#92400e; }
.bg-blue-700{ background:#1d4ed8; } .bg-slate-700{ background:#334155; }
.bg-red-700{ background:#b91c1c; } .bg-green-700{ background:#15803d; }
.recent-empty{ color:#9aa3af; font-style: italic; }
.tag{ color:#e5e7eb; opacity:.9; font-weight:600; }
.note{ color:#9aa3af; }
/* Belt thickness already set; add badge + transitions */
.rank-badge{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:22px; height:26px; pointer-events:none;
  transition: left .45s ease, filter .35s ease;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

/* SVG uses these vars; we animate their change */
:root {
  --badge-start:#fff;   /* overwritten per tier */
  --badge-end:#dcdcdc;  /* overwritten per tier */
  --badge-outline:#2A2A36;
  --badge-text:#111;
}
.rank-badge svg .shield-fill {
  fill: url(#badgeGrad);
}
.rank-badge svg .shield-stroke {
  stroke: var(--badge-outline);
}
.rank-badge svg .shield-text {
  font: 700 7px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  fill: var(--badge-text);
  letter-spacing:.4px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Crossfade trick when colors change (optional polish) */
.rank-badge.fade { animation: badgeFade .35s ease; }
@keyframes badgeFade { from { opacity:.75 } to { opacity:1 } }
/* === Sandman HQ Hero === */
.hq-hero{
  position:relative;
  overflow:hidden;
  min-height:62vh;
  background:linear-gradient(180deg,#f6f7f9 0%, #eef1f5 100%);
  border:1px solid #e6eaf0;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  padding:28px 20px 80px;
}

/* soft word cluster */
.hq-cluster{
  position:absolute; inset:0; pointer-events:none;
  display:grid; place-items:center;
  filter:saturate(110%);
}
.hq-cluster span{
  position:absolute;
  font-weight:800;
  color:#0b0c0d;
  opacity:.06;                 /* very faint */
  letter-spacing:.5px;
  white-space:nowrap;
}
.hq-cluster span:nth-child(1){ font-size:64px; top:8%; left:10%; }
.hq-cluster span:nth-child(2){ font-size:56px; top:24%; right:8%; }
.hq-cluster span:nth-child(3){ font-size:68px; top:42%; left:16%; }
.hq-cluster span:nth-child(4){ font-size:60px; top:60%; right:12%; }
.hq-cluster span:nth-child(5){ font-size:58px; top:76%; left:12%; }
.hq-cluster span:nth-child(6){ font-size:46px; top:18%; left:48%; }
.hq-cluster span:nth-child(7){ font-size:50px; top:50%; right:40%; }
.hq-cluster span:nth-child(8){ font-size:44px; top:68%; right:22%; }

/* headline */
.hq-title{
  position:relative; z-index:2;
  text-align:center;
  font-size:clamp(22px,2.8vw,34px);
  margin:8px 0 4px;
  color:#1f2328;
}
.hq-sub{
  font-size:clamp(14px,1.5vw,18px);
  color:#5b6670;
  font-weight:700;
  margin-top:6px;
}

/* bonsai overlay image */
.hq-bonsai{
  position:relative; z-index:2;
  display:block;
  width:min(820px, 92%);
  margin:10px auto 0;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.12));
  /* If your bonsai has a white box, make it blend: */
  mix-blend-mode:multiply;      /* try 'normal' if you prefer */
}

/* CTA */
.hq-cta{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:3;
}
.hq-btn{
  display:inline-block;
  background:#7b1d2a; color:#fff; text-decoration:none;
  font-weight:900; letter-spacing:.3px;
  padding:.9rem 1.45rem; border-radius:999px;
  box-shadow:0 10px 30px rgba(123,29,42,.35);
  transition:transform .12s ease, filter .12s ease;
}
.hq-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }

/* responsive nudge */
@media (max-width:720px){
  .hq-cluster span{ opacity:.05; }
  .hq-bonsai{ width:min(700px, 96%); }
}
/* === /Sandman HQ Hero === */
/* === Sandman HQ Core Statements === */
.hq-core{ background:#0b0e13; padding:48px 16px; }
.hq-core__wrap{ max-width:1000px; margin:0 auto; text-align:center; }
.hq-core__title{ color:#ffd633; font-size:clamp(22px,4vw,32px); margin-bottom:32px; }

.hq-core__grid{
  display:grid; gap:18px;
  grid-template-columns:1fr;
}
@media(min-width:820px){
  .hq-core__grid{ grid-template-columns:1fr 1fr; }
}

.hq-core__item{
  background:#111318; border:1px solid #1d2430;
  border-radius:14px; padding:20px;
  text-align:left; box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.hq-core__item h3{
  margin:0 0 8px; font-weight:800; font-size:18px;
}
.hq-core__item h3 span{ font-weight:400; font-size:14px; opacity:.7; margin-left:4px; }

.hq-core__item p{ margin:0; color:#cbd5e1; font-size:15px; line-height:1.5; }

.hq-core__item.creed h3{ color:#e85b5b; }
.hq-core__item.code h3{ color:#fca311; }
.hq-core__item.goal h3{ color:#59c36a; }
.hq-core__item.mission h3{ color:#60a5fa; }
/* === Bottom Action Zone === */
.hq-bottom {
  background:#0b0e13;
  padding:36px 16px 48px;
  text-align:center;
}
.hq-bottom__wrap {
  max-width:800px; margin:0 auto;
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:18px;
}
.hq-bottom__btn {
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  background:#7a1111;              /* same red as nav pills */
  color:#fce9e9;
  font-weight:700;
  text-decoration:none;
  border:1px solid #8a1a1a;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .12s ease, filter .12s ease;
}
.hq-bottom__btn:hover {
  transform:translateY(-1px);
  filter:brightness(1.05);
}
/* Programs grid/cards */
.pg-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:900px){ .pg-grid{ grid-template-columns:repeat(2,1fr); } }
.pg-card{
  background:#111318; border:1px solid #1d2430; border-radius:16px;
  padding:18px; box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.pg-card--soon{ border-style:dashed; }
.pg-badges{ display:flex; gap:8px; margin-bottom:6px; }
.pg-badge{ display:inline-block; padding:4px 10px; border-radius:999px;
  border:1px solid #2a3140; background:#0e1117; font-size:12px; color:#cbd5e1; }
.pg-badge--new{ background:#7a1111; border-color:#8a1a1a; color:#fce9e9; }
.pg-title{ margin:0 0 6px; color:#fff; font-size:18px; font-weight:800; }
.pg-text{ margin:0 0 10px; color:#cbd5e1; }
.pg-note{ margin:0; color:#9aa3b2; font-size:13px; }

/* Reuse (from other pages) */
.form{ display:grid; gap:12px; }
.row{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:700px){ .row{ grid-template-columns:1fr 1fr; } }
label{ font-size:14px; color:#cbd2dc; display:block; margin-bottom:6px; }
input{ width:100%; background:#0e1117; color:#e5e7eb; border:1px solid #2a3140; border-radius:10px; padding:12px; }

.minigrid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:700px){ .minigrid{ grid-template-columns:repeat(3,1fr); } }
.mini{ background:#0e1117; border:1px solid #2a3140; border-radius:14px; padding:16px; }
.mini h3{ margin:0 0 6px; font-size:16px; color:#fff; }
.mini p{ margin:0; font-size:14px; color:#cbd5e1; }
/* Leaderboard polish */
.lb .wrap{max-width:1100px;margin:0 auto}
.panel{background:#111318;border:1px solid #1d2430;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.45);padding:16px}
.h{color:#ffd633;margin:0 0 8px}
.note{color:#9aa3b2}

.lb-controls{display:grid;gap:12px}
.lb-row{display:flex;gap:10px;flex-wrap:wrap}
.lb-row select,.lb-row input[type="search"],.lb-award input{
  background:#0e1117;border:1px solid #2a3140;color:#e5e7eb;border-radius:10px;padding:10px 12px
}
.pill{background:#0e1117;border:1px solid #2a3140;color:#cbd5e1;border-radius:999px;padding:8px 12px}
.btn{display:inline-block;padding:10px 18px;border-radius:999px;background:#7a1111;color:#fce9e9;font-weight:700;border:1px solid #8a1a1a}
.btn--ghost{background:transparent;color:#ffd633;border:1px solid #352a05}
.btn[disabled]{opacity:.5;pointer-events:none}

.lb-bulk{justify-content:space-between;align-items:center}
.lb-checks{display:flex;gap:10px;flex-wrap:wrap}
.lb-award{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.lb-state{display:block;text-align:center}
.lb-state--loading,.lb-state--empty,.lb-state--error{padding:12px 0}
.lb-state--error{color:#ff9f9f}
.lb-state--empty{color:#cbd2dc}

.lb-table-head,.lb-row-item{display:grid;grid-template-columns:40px 1fr 120px 110px 90px 80px 80px;gap:10px;align-items:center}
.lb-table-head{color:#cbd2dc;padding:6px 0;border-bottom:1px solid #1d2430}
.lb-rows{display:grid;gap:6px;margin-top:8px}
.lb-row-item{background:#0e1117;border:1px solid #2a3140;border-radius:10px;padding:8px 10px}
.lb-row-item input[type="checkbox"]{transform:scale(1.2)}
.yourxp, .roadmap{display:grid;gap:6px}
/* Leaderboard polish */
.lb .wrap{max-width:1100px;margin:0 auto}
.panel{background:#111318;border:1px solid #1d2430;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.45);padding:16px}
.h{color:#ffd633;margin:0 0 8px}
.note{color:#9aa3b2}

.lb-controls{display:grid;gap:12px}
.lb-row{display:flex;gap:10px;flex-wrap:wrap}
.lb-row select,.lb-row input[type="search"],.lb-award input{
  background:#0e1117;border:1px solid #2a3140;color:#e5e7eb;border-radius:10px;padding:10px 12px
}
.pill{background:#0e1117;border:1px solid #2a3140;color:#cbd5e1;border-radius:999px;padding:8px 12px}
.btn{display:inline-block;padding:10px 18px;border-radius:999px;background:#7a1111;color:#fce9e9;font-weight:700;border:1px solid #8a1a1a}
.btn--ghost{background:transparent;color:#ffd633;border:1px solid #352a05}
.btn[disabled]{opacity:.5;pointer-events:none}

.lb-bulk{justify-content:space-between;align-items:center}
.lb-checks{display:flex;gap:10px;flex-wrap:wrap}
.lb-award{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.lb-state{display:block;text-align:center}
.lb-state--loading,.lb-state--empty,.lb-state--error{padding:12px 0}
.lb-state--error{color:#ff9f9f}
.lb-state--empty{color:#cbd2dc}

.lb-table-head,.lb-row-item{display:grid;grid-template-columns:40px 1fr 120px 110px 90px 80px 80px;gap:10px;align-items:center}
.lb-table-head{color:#cbd2dc;padding:6px 0;border-bottom:1px solid #1d2430}
.lb-rows{display:grid;gap:6px;margin-top:8px}
.lb-row-item{background:#0e1117;border:1px solid #2a3140;border-radius:10px;padding:8px 10px}
.lb-row-item input[type="checkbox"]{transform:scale(1.2)}
.yourxp, .roadmap{display:grid;gap:6px}
/* Ladder container */
.ladder-grid {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 2rem 0;
}

/* Each column (Youth / Foundry4) */
.ladder-col {
  background: #0f141b;
  border: 1px solid #1d2430;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Column titles */
.ladder-cap {
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFD700;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Rank pill */
.rank {
  padding: 10px 14px;
  border-radius: 24px;
  margin: 6px 0;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4),
              0 4px 10px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}

/* Hover/interaction */
.rank:hover {
  transform: translateY(-2px) scale(1.02);
  cursor: default;
}

/* Rank colors */
.rank--legend {background:#000;color:#FFD700;}          /* Black + Gold */
.rank--juniorlegend {background:#222;color:#fff;}       /* Darker gray */
.rank--sandman {background:#FFD700;color:#111;}         /* Gold */
.rank--commander {background:#FF5E00;color:#fff;}       /* Orange/Red */
.rank--champion {background:#4B0082;color:#fff;}        /* Purple */
.rank--warrior {background:#0033cc;color:#fff;}         /* Blue */
.rank--competitor {background:#009933;color:#fff;}      /* Green */
.rank--combatant {background:#ff6600;color:#fff;}       /* Bright orange */
.rank--recruit {background:#cccc33;color:#111;}         /* Yellow/Olive */
.rank--shadow {background:#eee;color:#111;}             /* White/Gray */

/* Foundry4 extras */
.rank--veteran {background:#800000;color:#fff;}         /* Maroon */
.rank--apprentice {background:#f2f2f2;color:#111;}      /* Light Gray */
/* Each column (Youth / Foundry4) */
.ladder-col {
  border: 1px solid #1d2430;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);

  /* Ascent gradient */
  background: linear-gradient(to top, #0f141b 0%, #1c2330 30%, #2b3445 60%, #f5f5f5 100%);
}
/* Each column (Youth / Foundry4) */
.ladder-col {
  border: 1px solid #1d2430;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);

  /* Ascent gradient */
  background: linear-gradient(to top, #0f141b 0%, #1c2330 30%, #2b3445 60%, #f5f5f5 100%);
}
/* === Hero Buttons === */
.hero-buttons {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}

.hero-buttons a {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(145deg, #b71c1c, #e53935); /* Red base */
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: all 0.25s ease-in-out;
}

/* Hover effect */
.hero-buttons a:hover {
  background: linear-gradient(145deg, #ffd633, #ff9900); /* Gold pop */
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 12px rgba(255,215,0,0.8);
}

/* Optional — differentiate each button by theme */
.hero-buttons a.program {
  background: linear-gradient(145deg, #0f141b, #1d2430); /* Dark */
}
.hero-buttons a.athlete {
  background: linear-gradient(145deg, #1e88e5, #42a5f5); /* Blue */
}
.hero-buttons a.coach {
  background: linear-gradient(145deg, #388e3c, #66bb6a); /* Green */
}

/* Hover overrides still apply */
/* === Zero2Hero Ladder Styles (Refreshed) === */

/* Container boxes */
.ladder-section {
  background: #111; /* deep black background */
  border-radius: 12px;
  padding: 16px;
  margin: 18px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6) inset,
              0 2px 8px rgba(0,0,0,0.4);
}

.ladder-section h3 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

/* Each tier row */
.rank-row {
  border-radius: 24px;
  padding: 10px 16px;
  margin: 6px 0;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.25),
              0 3px 8px rgba(0,0,0,0.6);
  transition: transform 0.15s ease-in-out;
}

.rank-row:hover {
  transform: scale(1.03);
}

/* === Foundry4 (Teen/Adult) Colors === */
.rank-legend     { background: linear-gradient(145deg, #000, #222); }
.rank-veteran    { background: linear-gradient(145deg, #b71c1c, #e53935); }
.rank-champion   { background: linear-gradient(145deg, #1a237e, #3949ab); }
.rank-warrior    { background: linear-gradient(145deg, #0d47a1, #1976d2); }
.rank-apprentice { background: linear-gradient(145deg, #f5f5f5, #cccccc); color:#111; }

/* === Youth Quest Colors === */
.rank-juniorlegend { background: linear-gradient(145deg, #4a148c, #7b1fa2); }
.rank-sandman      { background: linear-gradient(145deg, #ffeb3b, #fbc02d); color:#111; }
.rank-commander    { background: linear-gradient(145deg, #e65100, #ef6c00); }
.rank-youthchamp   { background: linear-gradient(145deg, #4a148c, #7b1fa2); }
.rank-youthwarrior { background: linear-gradient(145deg, #0d47a1, #1976d2); }
.rank-competitor   { background: linear-gradient(145deg, #1b5e20, #388e3c); }
.rank-combatant    { background: linear-gradient(145deg, #ff6f00, #ff8f00); }
.rank-recruit      { background: linear-gradient(145deg, #fff176, #fdd835); color:#111; }
.rank-shadow       { background: linear-gradient(145deg, #fafafa, #cfd8dc); color:#111; }
/* How it Works box */
.how-it-works {
  background: linear-gradient(145deg, #f9f9f9, #eaeaea);
  border-radius: 16px;
  padding: 20px;
  color: #222; /* softer dark text */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.how-it-works h3 {
  color: #111; 
  font-weight: 800;
}
/* How it Works box */
.how-it-works {
  background: linear-gradient(145deg, #fdfdfd, #ececec); /* light grey gradient */
  border-radius: 16px;
  padding: 20px;
  margin: 18px 0;
  color: #222;  /* dark text, readable */
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.how-it-works h3 {
  color: #111;
  font-weight: 800;
  margin-top: 0;
}
/* Card */
.prog-card{background:#111318;border:1px solid #1d2430;border-radius:14px;padding:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.35)}
.prog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prog-card h3{margin:0;color:#ffd633;font-weight:800}
.prog-sub{margin:6px 0 12px;color:#cbd2dc}

/* Glasses button */
.btn-glasses{display:inline-block;padding:8px 12px;border-radius:10px;font-weight:700;text-decoration:none;
  background:linear-gradient(145deg,#0f141b,#1d2430);color:#e5e7eb;border:1px solid #2a3140}
.btn-glasses:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* Three-dots */
.more{background:#0f141b;border:1px solid #2a3140;color:#e5e7eb;border-radius:10px;cursor:pointer;
  padding:6px 10px;font-size:18px;line-height:1}
.more:hover{filter:brightness(1.1)}

/* Menu */
.menu{position:absolute;background:#0f141b;border:1px solid #2a3140;border-radius:12px;padding:8px;
  display:grid;gap:6px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.menu a{color:#e5e7eb;text-decoration:none;padding:6px 10px;border-radius:8px;white-space:nowrap;display:block}
.menu a:hover{background:#1a2230}
.prog-card{position:relative}
/* Programs grid/cards */
.pg-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:900px){ .pg-grid{ grid-template-columns:repeat(2,1fr); } }

.pg-card{
  background:#111318; border:1px solid #1d2430; border-radius:16px;
  padding:18px 18px 16px; box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.pg-card--soon{ border-style:dashed; }
.pg-badges{ display:flex; gap:8px; margin-bottom:6px; }
.pg-badge{ display:inline-block; padding:4px 10px; border-radius:999px;
  border:1px solid #2a3140; background:#0e1117; font-size:12px; color:#cbd5e1; }
.pg-badge--new{ background:#7a1111; border-color:#8a1a1a; color:#fce9e9; }

.pg-title{ margin:0 0 6px; color:#fff; font-size:18px; font-weight:800; }
.pg-text{ margin:0 0 10px; color:#cbd5e1; }
.pg-note{ margin:0; color:#9aa3b2; font-size:13px; }
.pg-cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* Waitlist form reuse */
.form{ display:grid; gap:12px; }
.row{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:700px){ .row{ grid-template-columns:1fr 1fr; } }
label{ font-size:14px; color:#cbd2dc; display:block; margin-bottom:6px; }
input{ width:100%; background:#0e1117; color:#e5e7eb; border:1px solid #2a3140; border-radius:10px; padding:12px; }
.metrics {
  display: grid;
  gap: 20px;
  margin: 20px 0 10px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* metric card style */
.card.metric-card {
  background: var(--card);
  color: var(--ink);
  border-radius: 16px;
  border: 1px solid #e7e9ee;
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
  padding: 20px;
  text-align: center;
  min-height: 100px;          /* keeps it rectangular */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* mobile stretch — override */
@media (max-width: 640px) {
  .metrics {
    grid-template-columns: 1fr;  /* single column */
  }
  .card.metric-card {
    width: 100%;
    min-height: 120px;          /* taller rectangle look */
  }
}
.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}

.nav-buttons a {
  background: #111;
  color: #ffd633;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: background .2s;
}

.nav-buttons a:hover {
  background: #222;
}
.hero-bar {
  background: #b50000; /* superhero red */
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  padding: 12px 0;
  margin: 20px 0 10px 0;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.core-compass {
  background: #111; /* dark base */
  border: 2px solid #ffd633; /* your Sandman yellow */
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 2rem;
}

.core-compass .pill {
  margin-bottom: 1rem;
}

.core-compass h3 {
  color: #ffd633; /* headline yellow */
  margin-bottom: 4px;
}
.hero-bar {
  background: #b50000;       /* deep hero red */
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
  padding: 14px 0;
  margin: 20px 0 10px 0;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}

.core-compass {
  background: #111;
  border: 2px solid #ffd633; /* Sandman yellow */
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 2rem;
}

.core-compass .pill {
  margin-bottom: 1.2rem;
}

.core-compass h3 {
  color: #ffd633;
  margin-bottom: 6px;
}
.hero-badge {
  text-align: center;   /* centers inline images */
  margin: 20px 0;
}

.hero-badge img {
  display: inline-block;
  max-width: 250px;
  height: auto;
}
.tour-nav{
  display:flex;
  justify-content:space-between;   /* left ↔ right */
  align-items:center;
  margin: 24px 0 8px;
  gap: 1rem;                        /* safety gap */
}
.tour-nav a{
  color:#FFD700;
  font-weight:600;
  text-decoration:none;
}
.tour-nav a:hover{ text-decoration:underline; }
.ladder-banner {
  background:#c81e1e;      /* Sandman red */
  color:#fff;
  text-align:center;
  padding:10px 14px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
  border-radius:8px;
  margin: 0 auto 1rem auto;
  max-width: 600px;        /* keeps it neat */
  box-shadow:0 4px 18px rgba(200,30,30,.35);
}
.ladder-banner {
  background:#c81e1e;        /* Sandman red */
  color:#fff;
  text-align:center;
  padding:12px 16px;
  font-weight:900;
  font-size:1.2rem;
  letter-spacing:.7px;
  text-transform:uppercase;
  border-radius:8px;
  margin: 0 auto 1rem auto;
  max-width: 640px;          /* keeps it neat */
  box-shadow:0 4px 18px rgba(200,30,30,.35);
}
.page-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.page-nav a {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px; /* pill shape */
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #FFD700;
  color: #FFD700;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.page-nav a:hover {
  background: #FFD700;
  color: #111;
}
/* Programs Page Styles */
.programs-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.programs-container h1 {
  text-align: center;
  font-size: 2rem;
  color: #111;
  margin-bottom: 0.5rem;
}

.programs-container p.sub {
  text-align: center;
  font-size: 1rem;
  color: #555;
  margin-bottom: 2rem;
}

.program-block {
  margin-bottom: 2rem;
}

.program-block h2 {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
  color: #111;
}

.program-block p {
  color: #444;
  margin-bottom: 0.5rem;
}

.program-block .enter-btn {
  background: #c8102e; /* Sandman red */
  color: white;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.program-block .enter-btn:hover {
  background: #a30e25;
}
.button-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.pill {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: #ffd633;
  color: #000;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease-in-out;
}
.pill:hover {
  background-color: #ffb800;
}
.pill-secondary {
  background-color: #444;
  color: #fff;
}
.pill-secondary:hover {
  background-color: #666;
}
.nav-list {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}
.pill {
  display: inline-block;
  padding: 12px 22px;
  margin: 8px;
  font-weight: bold;
  color: #111; /* ❌ This is the problem */
  background: linear-gradient(145deg, #FFD700, #FFB800);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

/* Change THIS: */
.pill {
  color: #111; /* ❌ Too dark or doesn't contrast */
}

/* TO THIS: */
.pill {
  color: #000; /* Slightly better */
}

/* OR EVEN BETTER: */
.pill {
  color: #222; /* Good visibility */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); /* subtle lift */
}
.pill {
  display: inline-block;
  padding: 12px 22px;
  margin: 8px;
  font-weight: bold;
  font-size: 1rem;
  color: #222;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  background: linear-gradient(145deg, #FFD700, #FFB800);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.pill:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px 6px rgba(255, 215, 0, 0.6);
}
.pill {
  display: inline-block;
  padding: 12px 22px;
  margin: 8px;
  font-weight: bold;
  font-size: 1rem;
  color: #000; /* Use black text instead of white */
  text-shadow: 0 1px 1px rgba(255,255,255,0.4); /* Optional: soft lift */
  background: linear-gradient(145deg, #FFD700, #FFB800);
  border-radius: 999px;
  box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.5);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.pill:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.7);
}
.pill {
  display: inline-block;
  padding: 12px 22px;
  margin: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: #111; /* BLACK INK — Clear and Bold */
  background: linear-gradient(145deg, #FFD700, #FFB800);
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.6);
  transition: all 0.25s ease-in-out;
}

.pill:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.8);
}
.pill {
  display: inline-block;
  padding: 12px 24px;
  margin: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: #111; /* TRUE BLACK TEXT */
  background-color: #f9d423; /* Softer Yellow */
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(249, 212, 35, 0.6); /* Controlled Glow */
  transition: all 0.25s ease-in-out;
}

.pill:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(249, 212, 35, 0.9);
}
.pill {
  display: inline-block;
  padding: 12px 24px;
  margin: 10px;
  font-weight: 900;
  font-size: 1rem;
  color: #000;
  font-family: 'Arial Black', sans-serif;
  text-shadow: 0 1px 0 #fff;
  background-color: #f9d423;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(249, 212, 35, 0.5);
  transition: all 0.25s ease-in-out;
}
/* === Sandman Overrides (2025-09-12) ================================ */
:root {
  --sandman-gold: #ffd633;
  --sandman-gold-strong: #ffcf00;
  --sandman-red: #ff4d4d;
  --text-on-gold: #111111;
  --text-on-dark: #f3f4f6;
}

/* Buttons */
.btn {
  background: var(--sandman-gold-strong);
  color: var(--text-on-gold);
  font-weight: 900;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  box-shadow: 0 0 10px rgba(255, 214, 51, 0.8);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: scale(1.05); background: var(--sandman-red); color: #fff; }

.btn.secondary {
  background: transparent;
  color: var(--sandman-gold);
  border: 2px solid var(--sandman-gold);
  box-shadow: none;
}
.btn.secondary:hover { background: var(--sandman-gold); color: var(--text-on-gold); }

/* Footer lock callout */
.footer-lock-note {
  background: #1a1f29;
  border-top: 1px solid #333;
  padding: .5rem;
  margin-top: .75rem;
  text-align: center;
  color: var(--sandman-gold);
  font-weight: 600;
  font-size: .95rem;
}
/* === Button Cleanup (No Glow) === */
.btn {
  background: #ffd633;      /* Solid Sandman gold */
  color: #111;              /* Strong black text */
  font-weight: 900;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  box-shadow: none;         /* 🔥 Glow removed */
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn:hover {
  transform: scale(1.05);
  background: #ff4d4d;      /* Flash to red */
  color: #fff;
}

.btn.secondary {
  background: transparent;
  color: #ffd633;
  border: 2px solid #ffd633;
}

.btn.secondary:hover {
  background: #ffd633;
  color: #111;
}
/* === Red Pill Buttons (Primary Action) === */
.btn {
  background: #ff4d4d;   /* 🔥 Bold red base */
  color: #fff;           /* White text pops on red */
  font-weight: 900;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  box-shadow: none;      /* Clean, no glow */
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn:hover {
  transform: scale(1.05);
  background: #e60000;   /* Darker red on hover */
  color: #fff;
}

.btn.secondary {
  background: transparent;
  color: #ff4d4d;
  border: 2px solid #ff4d4d;
}

.btn.secondary:hover {
  background: #ff4d4d;
  color: #fff;
}

/* === Brighter Red Pill Buttons === */
.btn {
  background: #ff3333;   /* Brighter red */
  color: #fff;
  font-weight: 900;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  box-shadow: none;      /* Clean, no glow */
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn:hover {
  transform: scale(1.05);
  background: #cc0000;   /* Deeper red on hover for contrast */
  color: #fff;
}

.btn.secondary {
  background: transparent;
  color: #ff3333;
  border: 2px solid #ff3333;
}

.btn.secondary:hover {
  background: #ff3333;
  color: #fff;
}
/* === Sandman Global Red Buttons (2025-09-12) === */
.btn {
  background: #ff3333;   /* 🔥 Bright red default */
  color: #fff;
  font-weight: 900;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  box-shadow: none;      /* Clean, no glow */
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn:hover {
  transform: scale(1.05);
  background: #cc0000;   /* Darker red on hover */
  color: #fff;
}

.btn.secondary {
  background: transparent;
  color: #ff3333;
  border: 2px solid #ff3333;
}

.btn.secondary:hover {
  background: #ff3333;
  color: #fff;
}
/* === Sandman Global Red Buttons & Pills (2025-09-12) === */
.btn,
.pill {
  background: #ff3333;   /* 🔥 Bright red */
  color: #fff;
  font-weight: 900;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  box-shadow: none;      /* Clean, no glow */
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn:hover,
.pill:hover {
  transform: scale(1.05);
  background: #cc0000;   /* Darker red hover */
  color: #fff;
}

.btn.secondary,
.pill.secondary {
  background: transparent;
  color: #ff3333;
  border: 2px solid #ff3333;
}

.btn.secondary:hover,
.pill.secondary:hover {
  background: #ff3333;
  color: #fff;
}
/* === Sandman Global Red Buttons & Pills (Final Override 2025-09-12) === */
.btn,
.pill {
  background: #ff3333 !important;   /* 🔥 Bright red default */
  color: #ffffff !important;        /* White text */
  font-weight: 900 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .65rem 1.15rem !important;
  box-shadow: none !important;      /* Clean, no glow */
  transition: transform .15s ease, background .15s ease, color .15s ease !important;
}

.btn:hover,
.pill:hover {
  transform: scale(1.05) !important;
  background: #cc0000 !important;   /* Darker red hover */
  color: #ffffff !important;
}

.btn.secondary,
.pill.secondary {
  background: transparent !important;
  color: #ff3333 !important;
  border: 2px solid #ff3333 !important;
  box-shadow: none !important;
}

.btn.secondary:hover,
.pill.secondary:hover {
  background: #ff3333 !important;
  color: #ffffff !important;
}
/* === Sandman Global Superman Buttons & Pills (2025-09-12) === */
.btn,
.pill {
  background: #ff3333 !important;   /* 🔥 Bold red */
  color: #ffd633 !important;        /* ⚡ Superman yellow text */
  font-weight: 900 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .65rem 1.15rem !important;
  box-shadow: none !important;      /* Clean, no glow */
  transition: transform .15s ease, background .15s ease, color .15s ease !important;
}

.btn:hover,
.pill:hover {
  transform: scale(1.05) !important;
  background: #cc0000 !important;   /* Darker red on hover */
  color: #ffd633 !important;        /* Keep yellow text */
}

.btn.secondary,
.pill.secondary {
  background: transparent !important;
  color: #ffd633 !important;        /* Yellow text */
  border: 2px solid #ff3333 !important;  /* Red border */
  box-shadow: none !important;
}

.btn.secondary:hover,
.pill.secondary:hover {
  background: #ff3333 !important;
  color: #ffd633 !important;        /* Yellow text on hover too */
}
.nav-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffd633 !important;   /* ⚡ Gold/Yellow */
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin: 0 auto;
}
/* === Nav Buttons (Superman Style) === */
.nav-links a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: #ff3333;      /* 🔥 Red base */
  color: #ffd633;           /* ⚡ Yellow text */
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.nav-links a:hover {
  transform: scale(1.05);
  background: #cc0000;      /* Darker red on hover */
  color: #ffd633;           /* Yellow text stays */
}
/* === NAV: force centered across ALL pages (2025-09-12) === */
.top-nav { position: sticky; top: 0; z-index: 1000; }

.top-nav .nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: .5rem;
}

/* kill legacy floats/margins that push left */
.nav-links, .nav-links a {
  float: none !important;
}

.top-nav .nav-links {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.top-nav .nav-logo {
  color: #ffd633 !important;   /* yellow */
  margin: 0 auto !important;
}

/* wide screens: keep it centered (or space-between if you prefer) */
@media (min-width: 900px) {
  .top-nav .nav-container {
    flex-direction: column !important;   /* keep centered on desktop too */
  }
  .top-nav .nav-links { justify-content: center !important; }
}
.btn.core { min-width: 200px; justify-content: space-between; }
.btn.core.neg { border-color:#7f1d1d; background:#1a1111; }
.hint { opacity:.65; font-weight:600; font-size:.9em; }
/* Fallback simple outline styles */
.outline-green  {
  border:1px solid #22c55e;
  background:rgba(34,197,94,0.15);  /* soft green tint */
  color:#22c55e;
}
.outline-red    {
  border:1px solid #ef4444;
  background:rgba(239,68,68,0.15);  /* soft red tint */
  color:#ef4444;
}
.outline-gold   {
  border:1px solid #ffd633;
  background:rgba(255,214,51,0.15); /* soft gold tint */
  color:#ffd633;
}
.outline-amber  {
  border:1px solid #f59e0b;
  background:rgba(245,158,11,0.15); /* soft amber tint */
  color:#f59e0b;
}
.outline-tiger  {
  border:1px solid #f97316;
  background:rgba(249,115,22,0.15); /* soft orange tint */
  color:#f97316;
}
.outline-bear   {
  border:1px solid #ef4444;
  background:rgba(239,68,68,0.25);  /* deeper red tint */
  color:#ef4444;
}
/* highlight pending intake */
button.solid-red {
  background: #c62828;   /* deep red */
  color: #fff;
  border: none;
}

button.solid-red:hover {
  background: #b71c1c;   /* darker on hover */
}
/* Make the submitted-intakes list scroll inside the card */
#ca-list {
  max-height: 320px;     /* tweak 240–480px to taste */
  overflow-y: auto;
  padding-right: 6px;    /* room for scrollbar */
  margin-bottom: 12px;   /* keep buttons visible */
}

/* Ensure the card doesn't clip the scrolling area */
#coach-intake .card { overflow: visible; }
/* Intake accordion: allow full height */
#coach-intake-body,
.section-body#coach-intake-body {
  max-height: none !important;
  overflow: visible !important;
}

/* Safety: the card itself should not clip */
#coach-intake .card {
  overflow: visible;
}
/* Coach Hammer Fix — make the intake card never clip */
#coach-intake-body,
.section-body#coach-intake-body {
  max-height: none !important;
  overflow: visible !important;
}

#ca-list {
  max-height: none !important;
  overflow: visible !important;
}
.meter{position:relative;height:12px;background:#1e293b;border-radius:999px;overflow:hidden}
.meter > #ath-meter{height:100%; width:0%}
.meter > #ath-meter-ticks{
  position:absolute; inset:0; pointer-events:none;
  background-image: repeating-linear-gradient(to right,
    transparent 0, transparent calc(25% - 1px),
    rgba(255,255,255,.18) calc(25% - 1px), rgba(255,255,255,.18) calc(25%)
  );
}
#ath-stripe-lane{
  position:absolute; top:-6px; left:0; right:0; height:6px; pointer-events:none;
  display:flex; gap:6px; justify-content:flex-start; align-items:flex-end; padding-left:6px;
}
.stripe-badge{
  width:12px; height:6px; border-radius:2px; opacity:.95; box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
/* Tier colors (used for stripes & accent) */
:root{
  --tier-T0:#ffffff;
  --tier-T1:#60a5fa; /* blue */
  --tier-T2:#a78bfa; /* purple */
  --tier-T3:#a16207; /* brown/goldy */
}
.belt-bar {
  position:relative;
  height:12px;
  background:#1b2330;
  border-radius:999px;
  overflow:hidden;
}
.belt-fill {
  height:100%;
  width:0%;
  transition:width .25s ease-out;
}
.stripe-boxes {
  position:absolute;
  top:2px;
  right:4px;
  display:flex;
  gap:3px;
  height:8px;
}
.stripe-box {
  width:4px;
  height:8px;
  border-radius:2px;
  background:rgba(255,255,255,.12);
}
.stripe-box.black.filled,
.stripe-box.filled {
  background:#ffd633;
}
.stripe-box.white.filled {
  background:#000;
}
.belt-bar {
  position: relative;
  height: 12px;
  background: #1b2330;
  border-radius: 999px;
  overflow: hidden;
  transition: box-shadow .4s ease;
}
.belt-bar.glow {
  box-shadow: 0 0 14px 2px rgba(255,215,0,0.6), 0 0 6px 1px rgba(255,255,255,0.4);
}
.belt-fill {
  height: 100%;
  transition: width .25s ease-out;
}
.stripe-boxes {
  position: absolute;
  top: 2px; right: 4px;
  display: flex; gap: 3px;
  height: 8px;
}
.stripe-box { width:4px; height:8px; border-radius:2px; background:rgba(255,255,255,.12);}
.stripe-box.black.filled,
.stripe-box.filled {background:#ffd633;}
.stripe-box.white.filled {background:#000;}
/* make the arrows visible */
.sw-head .move-btn{
  background:#1f2937;
  border:1px solid #475569;
  color:#fff;                /* <<< make icon readable */
  opacity:1;
}

/* top-right tools in each block */
.block-head-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.block-tools{
  display:flex;
  gap:6px;
  align-items:center;
}

.mini-play,
.mini-stop{
  background:#0f172a;
  border:1px solid #1f2937;
  border-radius:6px;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  cursor:pointer;
  color:#fff;
}

.mini-clock{
  font-size:.65rem;
  color:#e2e8f0;
  min-width:44px;
  text-align:right;
}
/* =========================
   XP BAR — LITE (ROSTER)
========================= */

.xp-lite {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xp-lite-track {
  position: relative;
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
}

.xp-lite-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
}

.xp-lite-stripes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.xp-lite-stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sw);
  left: calc(var(--sl) + (var(--i) * (var(--sw) + var(--sg))));
  background: var(--stripe);
  opacity: .18;
}

.xp-lite-stripe.on {
  opacity: .95;
}

.xp-lite-meta {
  font-size: 11px;
  opacity: .75;
  letter-spacing: .3px;
}