/* ============================================================
   The Strategist's Path — Quest Map stylesheet
   Self-contained, built on the team-empathy-design tokens.
   Light canvas, navy headlines, royal accents, forest hero block.
   Fonts self-hosted with relative paths so it deploys cleanly.
   ============================================================ */

@font-face { font-family:'Manrope'; font-weight:600; src:url('fonts/manrope-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Manrope'; font-weight:700; src:url('fonts/manrope-700.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Manrope'; font-weight:800; src:url('fonts/manrope-800.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:400; src:url('fonts/poppins-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:500; src:url('fonts/poppins-500.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:600; src:url('fonts/poppins-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'JetBrains Mono'; font-weight:500; src:url('fonts/jetbrains-mono-500.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'JetBrains Mono'; font-weight:600; src:url('fonts/jetbrains-mono-600.woff2') format('woff2'); font-display:swap; }

:root {
  --forest:#2C6D3C; --forest-700:#1E5130; --royal:#2874B7; --royal-600:#2369A8;
  --navy:#1A3B90; --sky:#87D1F5; --green:#2BB673; --charcoal:#191919;
  --pale-green:#E8F5EC; --pale-blue:#EAF4FB; --paper:#F4F7F4;
  --line:#E1E6E1; --line-soft:#ECEFEC; --grey:#5C6960;
  --maxw:1080px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Poppins',sans-serif; color:var(--charcoal); margin:0;
  background:var(--paper); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--royal); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.eyebrow {
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase;
}

/* ---- Hero (forest block) ---- */
.hero {
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(135,209,245,0.22), rgba(44,109,60,0) 55%),
    radial-gradient(120% 130% at 0% 120%, rgba(30,81,48,0.55), rgba(44,109,60,0) 60%),
    linear-gradient(135deg, #2C6D3C 0%, #246339 60%, #1E5130 100%);
  color:#fff; position:relative; overflow:hidden;
}
.hero::after { content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(135,209,245,0.28) 1.1px, transparent 1.1px);
  background-size:24px 24px; opacity:0.55; pointer-events:none; }
.hero .wrap { position:relative; padding:38px 22px 44px; }
.hero .logo { height:26px; margin-bottom:30px; opacity:0.96; }
.hero .eyebrow { color:var(--sky); margin-bottom:14px; }
.hero h1 {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(34px,6vw,56px);
  line-height:1.02; letter-spacing:-0.02em; margin:0 0 12px;
}
.hero .tag { font-family:'Manrope',sans-serif; font-weight:600; font-size:clamp(16px,2.4vw,21px); color:var(--sky); margin:0 0 22px; max-width:620px; }

/* ---- Status bar (rank + XP + progress) ---- */
.status { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:8px; }
.rankcard {
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22);
  border-radius:14px; padding:14px 18px; backdrop-filter:blur(3px);
}
.rankcard .lbl { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--sky); }
.rankcard .val { font-family:'Manrope',sans-serif; font-weight:700; font-size:20px; margin-top:3px; }
.progressbar { flex:1; min-width:220px; }
.progressbar .track { height:12px; border-radius:8px; background:rgba(255,255,255,0.18); overflow:hidden; }
.progressbar .fill { height:100%; background:linear-gradient(90deg,var(--sky),#bfeaff); border-radius:8px; transition:width .5s ease; }
.progressbar .cap { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; margin-top:7px; color:rgba(255,255,255,0.85); }
.offline-note { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.06em; color:rgba(255,255,255,0.7); margin-top:14px; display:none; }
body.offline .offline-note { display:block; }

/* ---- Weeks ---- */
main { padding:40px 0 60px; }
.week { margin-bottom:38px; }
.week-head { display:flex; align-items:baseline; gap:14px; margin-bottom:4px; }
.week-head .wk { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--royal); }
.week-head h2 { font-family:'Manrope',sans-serif; font-weight:700; font-size:24px; color:var(--navy); margin:0; letter-spacing:-0.01em; }
.week-sub { color:var(--grey); margin:0 0 16px; font-size:14.5px; }
.rule { height:3px; width:46px; background:var(--royal); border-radius:3px; margin:10px 0 16px; }

/* ---- Trial cards ---- */
.trials { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.trial {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px;
  position:relative; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor:pointer;
}
.trial:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,59,144,0.08); border-color:#cfe0f1; }
.trial .day { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--royal); }
.trial h3 { font-family:'Manrope',sans-serif; font-weight:700; font-size:18px; color:var(--navy); margin:6px 0 12px; letter-spacing:-0.01em; }
.trial .track { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; margin:7px 0; color:var(--charcoal); }
.trial .track .ico { flex:0 0 auto; width:20px; text-align:center; }
.trial .track .t-lbl { color:var(--grey); font-size:11px; font-family:'JetBrains Mono',monospace; letter-spacing:0.06em; text-transform:uppercase; display:block; }
.trial .check {
  position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:15px; transition:all .15s ease;
}
.trial.done { border-color:var(--green); background:linear-gradient(180deg,#fff, #f3fbf6); }
.trial.done .check { background:var(--green); border-color:var(--green); color:#fff; }
.trial.done h3 { color:var(--forest-700); }
.trial .loom { display:none; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:11px; }
.trial.done .loom.has { display:block; }

/* ---- Capstones ---- */
.capstones { background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; margin-top:14px; }
.capstones h2 { font-family:'Manrope',sans-serif; font-weight:700; font-size:22px; color:var(--navy); margin:0 0 4px; }
.capstones .sub { color:var(--grey); font-size:14.5px; margin:0 0 18px; }
.caps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.cap { border:1px solid var(--line); border-left:4px solid var(--royal); border-radius:12px; padding:16px; background:var(--pale-blue); }
.cap .n { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; color:var(--royal); text-transform:uppercase; }
.cap h4 { font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:var(--navy); margin:6px 0 8px; }
.cap p { font-size:13.5px; color:var(--charcoal); margin:0; }

/* ---- Ranks ladder ---- */
.ladder { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.ladder .step { flex:1; min-width:150px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; }
.ladder .step.active { border-color:var(--forest); background:var(--pale-green); }
.ladder .step .wk { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey); }
.ladder .step .rk { font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:var(--navy); margin-top:3px; }
.ladder .step.active .rk { color:var(--forest-700); }

footer { background:var(--forest-700); color:rgba(255,255,255,0.85); padding:24px 0; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.06em; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

@media (max-width:640px){
  .hero .wrap { padding:30px 18px 34px; }
  .status { gap:12px; }
}