/* Hub: grade picker and the grade's skill board (concept mocks 1 and 2). */
.app{max-width:1080px;padding-block:20px 50px}
.muted{color:var(--muted)}

/* grade picker */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:18px;align-items:center;margin-bottom:22px}
@media (max-width:700px){.hero{grid-template-columns:1fr}}
.hero h1{font-family:Fredoka,Nunito,sans-serif;font-size:clamp(38px,6vw,58px);font-weight:700;line-height:1.02;margin:0;text-wrap:balance}
.hero h1 span{color:var(--accent)}
.hero p{color:var(--muted);margin:10px 0 0;max-width:36ch;font-size:18px}
.scene{width:100%;max-width:340px;justify-self:center;display:block}
.gradeq{font-family:Fredoka,Nunito,sans-serif;font-size:26px;font-weight:600;margin:0 0 2px}
.gradeq + .muted{margin:0 0 14px;font-size:15px}
.grades{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:860px){.grades{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.grades{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grade{background:var(--card);color:var(--ink);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative;border-top:6px solid var(--gc);text-align:left;padding:0;font-weight:700}
.grade .art{height:86px;background:var(--gc);display:flex;align-items:center;justify-content:center}
.grade .big{font-family:Fredoka,Nunito,sans-serif;font-size:46px;font-weight:700;color:#fff;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.15)}
.grade .info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}
.grade .wname{font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:17px}
.grade .meta{font-size:13px;color:var(--muted);display:flex;gap:4px;align-items:center}
.grade .meta svg{width:14px;height:14px;flex:none}
.grade.sel{outline:4px solid var(--run);outline-offset:2px}
.grade .you{position:absolute;top:8px;right:8px;background:var(--run);color:#fff;font-size:12px;border-radius:999px;padding:2px 8px}
.grade.soon .art{filter:saturate(.35);opacity:.75}
.grade.soon .wname{color:var(--muted)}
.grade:active{transform:translateY(2px)}
.chip[hidden]{display:none}
.rocketbtn{align-self:flex-start;margin-top:6px;background:var(--hint);color:var(--hint-ink);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;cursor:pointer}
.rocketbtn:hover{filter:brightness(1.05)}
.note{min-height:1.5em;margin:14px 0 0;color:var(--muted);font-size:16px}

/* skill board */
#board header{margin-bottom:12px}
.world{font-family:Fredoka,Nunito,sans-serif;font-size:18px;font-weight:600;color:var(--muted)}
.switch{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.switch .lbl{font-size:14px;color:var(--muted);margin-right:2px}
.gchip{border-radius:999px;min-width:40px;height:40px;padding:0 12px;font-size:16px;background:var(--card);box-shadow:var(--shadow);color:var(--muted)}
.gchip.on{background:var(--g3);color:#fff}
.gchip.soon{opacity:.6}
.gchip.change{font-size:14px;margin-left:4px}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--run);color:#fff;border-radius:16px;font-family:Fredoka,Nunito,sans-serif;font-size:21px;font-weight:600;padding:12px 22px;box-shadow:0 5px 0 var(--run-shadow);margin:0 0 22px;text-decoration:none;max-width:100%}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--run-shadow)}
.strandhd{font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:20px;display:flex;align-items:baseline;gap:8px;margin:6px 0 10px}
.strandhd small{font-family:Nunito,sans-serif;font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
@media (max-width:900px){.skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.skills{grid-template-columns:1fr}}
.skill{background:var(--card);color:var(--ink);text-decoration:none;border-radius:18px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:6px;border-left:6px solid var(--sc);min-width:0}
a.skill:active{transform:translateY(2px)}
.skill .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.skill .code{font-size:11px;letter-spacing:.8px;color:var(--muted);font-weight:900}
.skill .medal{display:inline-flex;gap:1px}
.skill .medal svg{width:16px;height:16px}
.skill h3{font-family:Fredoka,Nunito,sans-serif;font-size:18px;font-weight:600;margin:0;line-height:1.2}
.skill .tierbar{display:flex;gap:3px}
.skill .tierbar i{flex:1;height:7px;border-radius:4px;background:var(--soft)}
.skill .tierbar i.on{background:var(--sc)}
.skill .row{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.skill.due{outline:3px dashed var(--g2);outline-offset:2px}
.skill.cur{outline:4px solid var(--run);outline-offset:2px}
.skill.soon{opacity:.55;box-shadow:none;border-left-style:dashed}
.skill.soon h3{color:var(--muted)}
[data-strand="OA"]{--sc:var(--g3)}[data-strand="NBT"]{--sc:#2d9cdb}[data-strand="NF"]{--sc:#e8619b}[data-strand="MD"]{--sc:#12a596}[data-strand="G"]{--sc:#7c4dff}[data-strand="CC"]{--sc:#6bbf3a}