/* ===========================================================================
   Module 05 — roadmap, join and leaderboard.
   The original module shipped its own copy of this design system; that file is
   gone. What remains here is only what the shared theme does not already
   provide — chapter accordions, problem rows, the podium and the form fields.
   =========================================================================== */

.stack{display:flex; flex-direction:column; gap:8px; padding:26px 0 4px}
.subhead{color:var(--ink-2); font-size:16px}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-2)}
.small{font-size:13.5px}
.byline{font-size:12.5px; color:var(--ink-3); margin-top:10px}
.whoami{
  font-family:var(--mono); font-size:12px; color:var(--accent-deep);
  background:var(--accent-wash); border:1px solid var(--accent-line);
  border-radius:99px; padding:3px 10px; white-space:nowrap; margin-left:6px;
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent-solid); color:#fff; border:1px solid transparent;
  font-size:14.5px; font-weight:700; padding:11px 20px; border-radius:var(--r);
  text-decoration:none; transition:background .15s ease;
}
.btn-primary:hover{background:var(--accent-deep)}
.btn-lg{padding:14px 22px; font-size:15.5px}

/* ------------------------------------------------------------------- stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0}
.stat{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px}
.stat .k{font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.stat .v{font-size:25px; font-weight:600; margin-top:3px; letter-spacing:-.02em}
.stat .v small{font-size:14px; color:var(--ink-3); font-weight:400}
.bar{height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin-bottom:22px}
.bar i{display:block; height:100%; background:var(--accent-solid); transition:width .3s ease}

/* ----------------------------------------------------------------- toolbar */
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px}
.toolbar input[type=search]{
  flex:1 1 220px; min-width:0; height:38px; padding:0 13px; font-size:14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); outline:none;
}
.toolbar input[type=search]:focus{border-color:var(--accent)}
.row{display:flex; gap:6px; flex-wrap:wrap}
.chipbtn{
  font-size:13px; padding:7px 13px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
}
.chipbtn:hover{border-color:var(--ink-3); color:var(--ink)}
.chipbtn[aria-pressed=true]{background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent-deep); font-weight:700}
.empty{padding:34px 0; text-align:center; color:var(--ink-3)}

/* ---------------------------------------------------------------- chapters */
.chapter{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:12px; overflow:hidden}
.ch-head{display:flex; align-items:center; gap:13px; padding:14px 18px; width:100%; text-align:left; background:none; border:none}
.ch-head:hover{background:var(--ground)}
.ch-idx{
  font-family:var(--mono); font-size:11.5px; font-weight:700; flex-shrink:0;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-wash); color:var(--accent-deep);
}
.ch-name{flex:1; font-weight:600; font-size:15.5px; min-width:0}
.ch-meta{font-family:var(--mono); font-size:12px; color:var(--ink-3); flex-shrink:0}
.ch-bar{width:76px; height:6px; background:var(--line); border-radius:99px; overflow:hidden; flex-shrink:0}
.ch-bar i{display:block; height:100%; background:var(--accent-solid)}
.caret{color:var(--ink-3); font-size:12px; transition:transform .16s ease; flex-shrink:0}
.chapter.open .caret{transform:rotate(180deg)}
.ch-body{border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- problems */
.prob{display:flex; align-items:flex-start; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line-soft)}
.prob:last-child{border-bottom:none}
.prob:hover{background:var(--ground)}
.tick{
  width:19px; height:19px; flex-shrink:0; margin-top:2px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--white); color:transparent; font-size:12px; line-height:1;
}
.tick:hover{border-color:var(--accent)}
.prob.done .tick{background:var(--accent-solid); border-color:var(--accent-solid); color:#fff}
.prob.done .p-name{color:var(--ink-3); text-decoration:line-through}
.p-main{flex:1; min-width:0}
.p-name{font-size:14.5px; color:var(--ink); text-decoration:none; word-break:break-word}
.p-name:hover{color:var(--accent-deep); text-decoration:underline}
.p-plat{display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; align-items:center}
.t-plat,.t-ok,.kind{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px; border:1px solid var(--line);
  background:var(--ground); color:var(--ink-2);
}
.t-ok{background:var(--good-wash); border-color:var(--good-line); color:var(--good)}
.ch-meta.pts,.p-plat .mono{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.subhead.prem{
  padding:9px 18px; background:var(--note-wash); color:var(--note);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--line-soft);
}

/* ------------------------------------------------------------- leaderboard */
.pod{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px}
.place{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; text-align:center}
.place.p1{border-color:var(--warn-line); background:linear-gradient(180deg,var(--warn-wash),var(--white))}
.place.p2{border-color:var(--ink-3)}
.place.p3{border-color:var(--bad-line)}
.place .rank{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.place .nm{display:block; font-weight:600; font-size:16px; margin:5px 0 2px; word-break:break-word}
.place .pts{font-family:var(--mono); font-size:13px; color:var(--accent-deep); font-weight:700}
table.board{width:100%; border-collapse:collapse; font-size:14.5px; background:var(--white)}
table.board th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 12px; border-bottom:1px solid var(--line); background:var(--ground);
}
table.board td{padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.board tr.me{background:var(--accent-wash)}
table.board td.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.who{display:flex; flex-direction:column}
.who b{font-weight:600}
.who span{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.delta{font-family:var(--mono); font-size:12px}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)}
.delta.flat{color:var(--ink-3)} .delta.new{color:var(--accent-deep)}

/* -------------------------------------------------------------------- join */
.hero-band{background:var(--band); color:var(--band-fg); padding:52px 0}
.hero-in{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:44px; align-items:start;
}
.hero-band .eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep)}
.hero-band h1{font-size:38px; line-height:1.18; margin:12px 0; letter-spacing:-.02em}
.hero-band .lede{color:var(--ink-2); font-size:17px; max-width:56ch}
.hero-band code{background:var(--ground); border-color:var(--line); color:var(--accent-deep)}
.pillrow{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}
.pill{font-size:12.5px; color:var(--ink-2); border:1px solid var(--line); border-radius:99px; padding:5px 13px}
.hero-card{background:var(--white); color:var(--ink); border-radius:var(--r-lg); padding:26px 26px 22px; box-shadow:0 18px 40px rgba(0,0,0,.28)}
.hero-card h2{font-size:20px}
.field{margin-bottom:14px}
.field label,.field .lbl{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:5px; letter-spacing:0; text-transform:none}
.field .lbl::after{display:none}
.field .opt{font-weight:400; color:var(--ink-3)}
.field input{
  width:100%; height:40px; padding:0 12px; font-size:14.5px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white); outline:none;
}
.field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(77,155,255,.22)}
.field .hint{font-size:12px; color:var(--ink-3); margin-top:4px}
.field .err{font-size:12.5px; color:var(--bad); margin-top:4px; font-weight:700}
.field input[aria-invalid=true]{border-color:var(--bad)}
.section-head{text-align:center; max-width:62ch; margin:0 auto}
.section-head h2{font-size:27px}
.section-head p{color:var(--ink-2); margin-top:8px}
.step{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px}
.step .n{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--accent-solid); color:#fff;
  font-family:var(--mono); font-size:12px; font-weight:700; margin-bottom:9px;
}
.step b{display:block; margin-bottom:5px}
.step p{font-size:14px; color:var(--ink-2)}
.arrow{transition:transform .15s ease}
.btn-primary:hover .arrow{transform:translateX(3px)}

@media (max-width:860px){
  .hero-in{grid-template-columns:1fr; gap:28px}
  .hero-band h1{font-size:28px}
  .pod{grid-template-columns:1fr}
  .ch-bar{display:none}
  table.board td.hide-sm,table.board th.hide-sm{display:none}
}