/* Learning interface: dashboard recommendation and mastery, the path (Learn),
   the two column lesson page, quick check marks, placement breakdown and the
   skill graph's keyboard and focus states. Uses the tokens from style.css. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- shared: status swatches, difficulty, lab type, prerequisite chips ---- */
.meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 8px; }
.page-head .meta-row { margin-top: 6px; }
.lab-kind { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); white-space: nowrap; }
.lab-kind svg { color: var(--text-2); flex: none; }
.diff { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); white-space: nowrap; }
.diff-dots { display: inline-flex; gap: 3px; }
.diff-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.diff-dots i.on { background: var(--accent-2); }
.k-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 2px solid var(--line-2); box-sizing: border-box; vertical-align: 0; margin-right: 6px; flex: none; }
.k-dot.done { background: var(--ok); border-color: var(--ok); }
.k-dot.mastered { border-color: var(--mastered); }
.k-dot.review { background: var(--review); border-color: var(--review); }
.k-dot.learn { background: var(--accent-2); border-color: var(--accent-2); }
.k-dot.locked { border-color: var(--locked); border-style: dashed; }
.k-count { display: inline-flex; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.k-count.zero { color: var(--learn); }
.k-count.zero .k-dot { opacity: .5; }
.mastery-counts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pre-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* Prerequisite chips are informational labels, not controls, so they stay
   compact and do not change on hover. The lesson is reachable from the path. */
.chip.pre { display: inline-flex; align-items: center; color: var(--text-2); cursor: default; }
.chip.pre:hover { color: var(--text-2); border-color: var(--line); background: var(--panel); }

/* ---- dashboard ---- */
.dash-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.dash-col { display: grid; gap: 18px; }
.dash-col .card, .dash-grid > .card { margin-bottom: 0; }
.dash-grid { margin-bottom: 20px; }
.rec-card .eyebrow { margin-bottom: 8px; }
.rec-title { font-size: 22px; margin-bottom: 4px; }
.rec-title a { color: var(--text); }
.rec-title a:hover { color: var(--accent-2); }
.rec-why { color: var(--text-2); font-size: 14px; margin: 12px 0 10px; }
.rec-pre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec-card.compact .rec-title { font-size: 19px; }
.mastery .unit-row { padding: 12px 0; }
.mastery .unit-row:hover .unit-name { color: var(--accent-2); }
.mastery .unit-name { font-weight: 500; transition: color .15s var(--ease); }
.mastery .unit-row-top { gap: 12px; align-items: baseline; }
.mastery .unit-row-top > span:last-child { white-space: nowrap; }
.mastery .bar-fill { background: var(--ok); }
.act-what { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.act-what a { color: var(--text); }
.act-what a:hover { color: var(--accent-2); }
.act-time { white-space: nowrap; }

/* ---- learn: filters and the path ---- */
.learn-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.learn-filters { margin: 0; }
.learn-count { margin: 0; }
.unit-block { scroll-margin-top: 74px; }
.unit-block-head { flex-wrap: wrap; }
.unit-block-head h2:focus { outline: none; }
.unit-block-head h2:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }
.unit-progress { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.bar.mini { width: 110px; height: 5px; display: inline-block; }
.bar.mini .bar-fill { background: var(--ok); }
.filter-empty { padding: 10px 0 2px 42px; }
.path-list { list-style: none; margin: 0; padding: 0; position: relative; }
.path-list::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 20px; width: 1px; background: var(--line-2); }
.path-item {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  padding: 14px 18px 14px 10px; margin: 0 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.path-item.linked:hover { border-color: var(--line-2); background: var(--panel-2); }
/* Locked rows sit on the darker surface with a quieter title instead of being
   faded as a whole, which pulled their small text under 4.5:1. */
.path-item.locked { background: var(--bg-2); }
.path-item.locked .path-link { color: var(--text-2); }
.path-item.linked .path-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.path-item .chip, .path-item .path-badge { position: relative; z-index: 1; }
.path-marker {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--panel); font-variant-numeric: tabular-nums;
}
.path-marker.done { background: var(--ok); border-color: var(--ok); color: #06281a; }
.path-marker.mastered { border-color: var(--mastered); color: var(--mastered); }
.path-marker.review { border-color: var(--review); color: var(--review); }
.path-marker.learn { border-color: var(--accent-2); color: var(--accent-2); }
.path-marker.locked { border-style: dashed; color: var(--muted); }
.path-main { min-width: 0; }
.path-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.path-link { color: var(--text); }
a.path-link:hover { color: var(--accent-2); }
a.path-link:focus-visible { outline: none; }
.path-item:has(a.path-link:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.path-pre { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.path-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 13px; }

/* ---- lesson: two columns with a sticky rail ---- */
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.lesson-main { min-width: 0; }
.lesson-side { position: sticky; top: 74px; }
#lesson-body, #lesson-quiz, #lesson-lab { scroll-margin-top: 74px; }
.rail { padding: 20px; margin-bottom: 0; }
.rail h2 { font-size: 15px; margin-bottom: 2px; }
.rail h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 6px; }
.rail .meta-row { margin-top: 6px; }
.rail-note { margin: 10px 0 0; }
.rail-steps { list-style: none; margin: 0; padding: 0; }
.rail-step { border-top: 1px solid var(--line); }
.rail-step:first-child { border-top: 0; }
.rail-btn {
  display: flex; width: 100%; gap: 10px; align-items: center; min-height: 44px; padding: 6px 6px; margin: 0 -6px; box-sizing: content-box; width: calc(100% - 12px);
  background: none; border: 0; border-radius: 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s var(--ease);
}
.rail-btn.static { cursor: default; }
button.rail-btn:hover { background: rgba(255,255,255,.04); }
.st-n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; color: var(--text-2); }
.st-label { font-size: 14px; font-weight: 500; }
.st-state { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.rail-step.done .st-n { background: var(--ok); border-color: var(--ok); color: #06281a; }
.rail-step.done .st-state { color: var(--ok); }
.rail-step.current .st-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.rail-step.current .st-label { color: var(--text); }
.rail-step.current .st-state { color: var(--accent-2); font-weight: 600; }
.rail-step.locked .st-label, .rail-step.none .st-label, .rail-step.skipped .st-label { color: var(--muted); }
.rail-step.locked .st-n, .rail-step.none .st-n { border-style: dashed; color: var(--muted); }
.rail-pre { list-style: none; padding: 0; margin: 0; }
.rail-pre li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rail-pre li:first-child { border-top: 0; }
.rail-pre a { color: var(--text); min-width: 0; }
.rail-pre a:hover { color: var(--accent-2); }
.rail .chip-row { margin-bottom: 0; }
.locked-card .row { align-items: center; }
/* A button that carries a lesson title wraps instead of running past a phone's edge. */
.btn.btn-wrap { white-space: normal; text-align: left; max-width: 100%; }

/* ---- quick check marks ---- */
.q { transition: border-color .2s var(--ease); }
.q.correct { border-color: rgba(60,207,145,.55); }
.q.incorrect { border-color: rgba(240,106,126,.55); }
.q-result { margin-left: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; border: 1px solid; vertical-align: 2px; }
.q-result.ok { color: var(--ok); border-color: rgba(60,207,145,.45); background: rgba(60,207,145,.08); }
.q-result.bad { color: var(--danger); border-color: rgba(240,106,126,.45); background: rgba(240,106,126,.08); }

/* ---- placement result ---- */
.res-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.res-unit { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--bg-2); color: var(--text); transition: border-color .15s var(--ease), background .15s var(--ease); }
.res-unit:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.res-unit-head { display: flex; flex-direction: column; gap: 2px; }
.res-unit-t { font-weight: 600; }
.res-stop { color: var(--warn); margin-top: 8px; }
.res-card .unit-head { margin: 20px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.res-card h2 + .unit-head { margin-top: 6px; }
.res-name { display: flex; flex-direction: column; min-width: 0; }
.res-name a { color: var(--text); }
.res-name a:hover { color: var(--accent-2); }

/* ---- skill graph: focus, prerequisite highlight, legend hint ---- */
/* Each label sits on a plate in the card colour, so edges pass behind names. */
.g-label-bg { fill: var(--panel); stroke: none; }
.g-node:focus-visible { outline: none; }
.g-node:focus-visible .g-halo { fill: transparent; stroke: var(--accent-2); stroke-width: 2; animation: none; r: 22; opacity: 1; }
.g-node.pre .g-dot { stroke-width: 3; }
.g-node.pre .g-label { fill: var(--text); }
.g-edge.hot-out { stroke: rgba(99,102,241,.85); stroke-width: 2; }
.g-tip-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-hint { margin: 10px 0 0; }
.g-legend { margin-top: 10px; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-side { position: static; }
  .rail { margin-bottom: 20px; }
}
@media (max-width: 820px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* The graph scrolls sideways on a phone. At its 720 px minimum the labels
     rendered at about 7 px; a 1000 px drawing with 13 px labels renders them
     at 11 px and keeps the hit circles above 44 px. */
  .graph { min-width: 1000px; }
  .g-label { font-size: 13px; }
  .path-item { grid-template-columns: 32px minmax(0, 1fr); padding: 12px 14px 12px 10px; }
  .path-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
  .unit-progress { margin-left: 0; width: 100%; }
  .learn-toolbar { align-items: flex-start; }
  .rec-title { font-size: 19px; }
  .act-what { flex-direction: column; align-items: flex-start; gap: 2px; }
  .act-what a, .rail-pre a, .res-name a { display: inline-block; padding: 11px 0; margin: -11px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .path-item, .mastery .unit-name, .rail-btn, .q, .res-unit { transition: none; }
}