/* ============================================================
   LEARN WAVE 2 — Tracks + Rhythm Atlas + Clinic.
   Tokens: DESIGN-LANGUAGE.md — navy #0B1526, orange #B93A03,
   gold #C9A45C hairline/frame ONLY (never text), ink #F5F5F7.
   ============================================================ */

/* ---- track position line (articles + lessons) ---- */
.track-pos{font-family:var(--font-label,'Oswald',sans-serif);text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:var(--muted-light,#A7A099);margin:10px 0 16px}
.track-pos a{color:#B93A03;text-decoration:none}
.track-pos a:hover{text-decoration:underline}

/* ---- prev / next track navigation ---- */
.track-nav{display:flex;gap:10px;flex-wrap:wrap;margin:34px auto 8px;max-width:820px}
.tn-link{flex:1 1 200px;display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  border:1px solid rgba(201,164,92,.30);border-radius:10px;background:#0B1526;
  text-decoration:none;color:#F5F5F7}
.tn-link:hover{border-color:#B93A03}
.tn-dir{font-family:var(--font-label,'Oswald',sans-serif);text-transform:uppercase;
  letter-spacing:.14em;font-size:.66rem;color:#B93A03}
.tn-t{font-size:.92rem;line-height:1.35}
.tn-next{text-align:right}
.tn-mid{text-align:center}
.tn-off{border-color:transparent;background:transparent}

/* ---- track pages: ordered lesson rows ---- */
.track-rows{max-width:820px;margin:26px auto 0;display:flex;flex-direction:column;gap:10px}
.track-row{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;
  border:1px solid rgba(201,164,92,.30);border-radius:10px;background:#0B1526;
  text-decoration:none;color:#F5F5F7}
.track-row:hover{border-color:#B93A03}
.tr-num{font-family:'Anton',sans-serif;font-size:1.5rem;color:#B93A03;line-height:1;padding-top:2px}
.tr-main{display:flex;flex-direction:column;gap:2px;flex:1}
.tr-title{font-family:var(--font-label,'Oswald',sans-serif);font-size:1.02rem;letter-spacing:.02em}
.tr-meta{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-light,#A7A099)}
.tr-out{font-size:.9rem;line-height:1.45;color:var(--ink-light,#F5F5F7)}
.tr-arr{color:#B93A03;font-size:1.2rem;padding-top:4px}
.strip-rows{max-width:820px;margin:14px auto 0;display:flex;flex-direction:column;gap:8px}
.strip-row{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;
  border:1px solid rgba(201,164,92,.30);border-radius:10px;background:#0B1526;
  text-decoration:none;color:#F5F5F7}
.strip-row:hover{border-color:#B93A03}
.s-t{font-size:.92rem}
.s-p{font-family:var(--font-label,'Oswald',sans-serif);color:#B93A03;white-space:nowrap}

/* ---- hub: track cards + sub-view toggle + library filters ---- */
.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;max-width:960px;margin:18px auto 0}
.track-card{display:flex;flex-direction:column;gap:5px;padding:16px;
  border:1px solid rgba(201,164,92,.30);border-radius:12px;background:#0B1526;
  text-decoration:none;color:#F5F5F7;text-align:left}
.track-card:hover{border-color:#B93A03}
.track-card .tc-tab{font-family:var(--font-label,'Oswald',sans-serif);text-transform:uppercase;
  letter-spacing:.14em;font-size:.66rem;color:#B93A03}
.track-card .tc-name{font-family:'Anton',sans-serif;font-size:1.25rem;letter-spacing:.01em}
.track-card .tc-meta{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-light,#A7A099)}
.track-card .tc-out{font-size:.9rem;line-height:1.45;color:var(--ink-light,#F5F5F7)}
.subview-bar{display:flex;gap:8px;justify-content:center;margin:26px auto 0;flex-wrap:wrap}
.subview-btn{font-family:var(--font-label,'Oswald',sans-serif);text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;padding:9px 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(201,164,92,.30);background:transparent;color:#F5F5F7}
.subview-btn[aria-selected="true"]{background:#B93A03;border-color:#B93A03;color:#fff}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:820px;margin:20px auto 4px}
.fchip{font-family:var(--font-label,'Oswald',sans-serif);text-transform:uppercase;
  letter-spacing:.1em;font-size:.7rem;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(201,164,92,.30);background:transparent;color:var(--ink-light,#F5F5F7)}
.fchip:hover{border-color:#B93A03;color:#F5F5F7}
.fchip.is-on{background:#B93A03;border-color:#B93A03;color:#fff}
[data-lesson][hidden]{display:none !important}

/* ---- step-grid cell states (Wave 2) ---- */
.sg-cell.ghost{opacity:.38}
.sg-cell.print{background:transparent !important;border:1px dashed rgba(245,245,247,.45);
  color:rgba(245,245,247,.55)}
.sg-cell.masked{background:repeating-linear-gradient(45deg,rgba(185,58,3,.35) 0 4px,transparent 4px 8px) !important;
  border:1px solid rgba(185,58,3,.5);color:rgba(245,245,247,.6)}
.sg-legend .sw-ghost{display:inline-block;width:10px;height:10px;border-radius:50%;
  background:#F5F5F7;opacity:.38;margin-right:5px}
.sg-legend .sw-print{display:inline-block;width:10px;height:10px;border-radius:2px;
  border:1px dashed rgba(245,245,247,.45);margin-right:5px}
.sg-legend .sw-masked{display:inline-block;width:10px;height:10px;border-radius:2px;
  background:repeating-linear-gradient(45deg,rgba(185,58,3,.5) 0 3px,transparent 3px 6px);
  border:1px solid rgba(185,58,3,.5);margin-right:5px}
.step-grid.wide32 .sg-row{grid-template-columns:58px repeat(32,minmax(19px,1fr));min-width:940px}
.sg-row.trip{grid-template-columns:58px repeat(12,1fr)}
@media (max-width:640px){ .track-nav{flex-direction:column} .tn-next{text-align:left} }