/* "Your path to IOAI" (/path/, src/assets/path.js). Everything is scoped to .path so nothing here
   reaches the rest of the guide. Colours and type come from sota.css. */
.path {
  --faint: #B9BAC6;
  --v-essentials: #EDEDF2; --v-essentials-line: #C9CAD4;
  --v-supervised: #D9E4F8; --v-supervised-line: #8CA6DA;
  --v-unsupervised: #D6EEDD; --v-unsupervised-line: #7CB48E;
  --v-rl: #EAE1F5; --v-rl-line: #AE97CF;
  --v-contest: #F6DEDB; --v-contest-line: #D39A93;
  --v-blend: multiply;
  --done-sub: #B9BAC6;
  --done-track: #3A3A46;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
}
:root[data-theme="dark"] .path {
  --faint: #5A5B68;
  --v-essentials: #23242D; --v-essentials-line: #3B3C48;
  --v-supervised: #1B2740; --v-supervised-line: #3E5A93;
  --v-unsupervised: #1A2E22; --v-unsupervised-line: #3D7A53;
  --v-rl: #2A2238; --v-rl-line: #6E5A92;
  --v-contest: #36211F; --v-contest-line: #8C514B;
  --v-blend: screen;
  --done-sub: #5F6070;
  --done-track: #C9C9D3;
}

/* The page uses the full width: no sidebar, no "On this page", no footer */
.layout-full { display: block; }
.layout-full > .sidebar, .layout-full > .side-rail, .layout-full > .toc { display: none; }
.layout-full > .main { padding: 0; }
.layout-full ~ .footer { display: none; }
@media (max-width: 900px) { .layout-full > .sidebar { display: block; } }

/* ---------- the line above the map ---------- */
.path-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 12px 24px; border-bottom: 1px solid var(--hairline); }
.path-head h1 { margin: 0; font-size: 24px; line-height: 1.15; }
.path-head .lede { margin: 3px 0 0; font-size: 15.5px; color: var(--graphite); }
.path-head .lede b { color: var(--ink); font-weight: 600; }
.path-tools { display: flex; align-items: center; gap: 14px; }
.path .here-btn { border: 1px solid var(--red); background: none; padding: 4px 12px; font: 15px var(--serif); color: var(--ink); cursor: pointer; white-space: nowrap; }
.path .here-btn:hover { background: var(--red); color: var(--paper); }
.path .continue { display: inline-flex; flex-direction: column; padding: 5px 16px 6px; border: 1.5px solid var(--red); color: var(--ink); text-decoration: none; max-width: 340px; }
.path .continue small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.path .continue span { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.path .continue:hover { background: var(--red); color: var(--paper); text-decoration: none; }
.path .continue:hover small { color: var(--paper); }

/* ---------- the map ---------- */
.path-stage { position: relative; overflow: hidden; min-height: 0; }
.path svg.map { display: block; width: 100%; height: 100%; cursor: grab; user-select: none; touch-action: none; }
.path svg.map.dragging { cursor: grabbing; }
.path .zoom { position: absolute; left: 20px; bottom: 20px; display: flex; flex-direction: column; border: 1px solid var(--hairline); background: var(--paper); }
.path .zoom button { width: 34px; height: 32px; border: 0; background: none; font: 18px/1 var(--serif); color: var(--ink); cursor: pointer; }
.path .zoom button + button { border-top: 1px solid var(--hairline); }
.path .zoom button:hover { background: var(--plate); }
.path .hint { position: absolute; right: 20px; bottom: 20px; margin: 0; padding: 4px 10px; background: var(--paper); border: 1px solid var(--hairline); font-size: 13.5px; color: var(--graphite); pointer-events: none; }

/* the Venn: kinds of learning as overlapping regions */
.path .venn { mix-blend-mode: var(--v-blend); stroke-width: 3; }
.path .venn-essentials { fill: var(--v-essentials); stroke: var(--v-essentials-line); }
.path .venn-supervised { fill: var(--v-supervised); stroke: var(--v-supervised-line); }
.path .venn-unsupervised { fill: var(--v-unsupervised); stroke: var(--v-unsupervised-line); }
.path .venn-rl { fill: var(--v-rl); stroke: var(--v-rl-line); stroke-dasharray: 12 10; }
.path .venn-contest { fill: var(--v-contest); stroke: var(--v-contest-line); }
.path .branch-label { font-size: 56px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; fill: var(--ink); }
.path .branch-tag { font-size: 32px; font-style: italic; fill: var(--graphite); }
.path .area-label { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }

/* two zoom levels: areas when zoomed out, skills when zoomed in */
.path .nodes, .path .edges, .path .units, .path .unit-edges, .path .area-label, .path .branch-label, .path .branch-tag { transition: opacity .3s ease; }
.path .map.far .nodes, .path .map.far .edges, .path .map.far .area-label { opacity: 0; pointer-events: none; }
.path .map:not(.far) .units, .path .map:not(.far) .unit-edges, .path .map:not(.far) .branch-label, .path .map:not(.far) .branch-tag { opacity: 0; pointer-events: none; }
.path .uedge { fill: none; stroke: var(--ink); stroke-width: 3.5; opacity: .55; }
.path .uedge.extra { stroke-width: 2.5; stroke-dasharray: 10 12; }
.path .arrowhead { fill: var(--ink); }
.path .fork-dot { fill: var(--ink); opacity: .7; }

/* an area, zoomed out */
.path .unit { cursor: pointer; }
.path .unit .ring-bg { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.path .unit .ring { fill: none; stroke: var(--ink); stroke-width: 11; }
.path .unit .core { fill: var(--ink); }
.path .unit .tick { fill: none; stroke: var(--paper); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.path .unit .unit-num { font-size: 46px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.path .unit .unit-kicker { font-size: 32px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; fill: var(--graphite); }
.path .unit .unit-name { font-size: 58px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.path .unit .unit-count { font-size: 40px; text-anchor: middle; fill: var(--graphite); }
.path .unit .here-tag { font-size: 32px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; fill: var(--red); }
.path .unit.next .ring-bg { stroke: var(--red); stroke-width: 4; }
.path .unit.next .pulse { fill: none; stroke: var(--red); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: path-pulse 2.2s cubic-bezier(.3,0,.2,1) infinite; }
.path .unit:not(.next) .pulse { display: none; }
.path .unit.soon .ring-bg { stroke: var(--faint); stroke-dasharray: 4 6; }
.path .unit.soon .unit-name { fill: var(--graphite); }
.path .unit:hover .ring-bg { stroke-width: 4; }
.path .unit:focus-visible, .path .box:focus-visible { outline: none; }
.path .unit:focus-visible .ring-bg, .path .box:focus-visible .frame { stroke: var(--red); stroke-width: 4; }
.path .star { fill: var(--red); stroke: var(--paper); stroke-width: 1.5; }
@keyframes path-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* a skill, zoomed in */
.path .box { cursor: pointer; }
.path .box .frame { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; transition: stroke-width .15s; }
.path .box:hover .frame { stroke-width: 2.4; }
.path .box .b-step { font-size: 15px; font-weight: 700; fill: var(--graphite); }
.path .box .b-name { font-size: 16.5px; font-weight: 600; fill: var(--ink); }
.path .box .b-count { font-size: 12.5px; fill: var(--graphite); }
.path .box .b-here { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; fill: var(--red); }
.path .box .dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.path .box .dot.done { fill: var(--ink); }
.path .box .dot.reading { fill: var(--graphite); }
.path .box .dot.soon { fill: none; stroke: var(--faint); stroke-dasharray: 2 2; }
.path .box .dot.optional { stroke: var(--graphite); stroke-width: 1; }
.path .box.done .frame { fill: var(--ink); stroke: var(--ink); }
.path .box.done .b-name, .path .box.done .dot.done { fill: var(--paper); }
.path .box.done .dot.done { stroke: var(--paper); }
.path .box.done .b-step, .path .box.done .b-count { fill: var(--done-sub); }
.path .box.next .frame { stroke: var(--red); stroke-width: 2.6; }
.path .box.next .b-step { fill: var(--red); }
.path .box.soon .frame { stroke: var(--faint); stroke-dasharray: 4 4; fill: color-mix(in srgb, var(--paper) 70%, transparent); }
.path .box.soon .b-name { fill: var(--graphite); font-weight: 400; }
.path .box.selected .frame { stroke: var(--red); stroke-width: 3; }
.path .edge { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: .75; }

/* ---------- the panel ---------- */
.path .panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: 400px; max-width: 92vw;
  box-sizing: border-box; padding: 24px 26px 40px; overflow-y: auto;
  background: var(--paper); border-left: 1px solid var(--ink);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.3,0,.2,1);
}
.path .panel.open { transform: none; box-shadow: -18px 0 40px -30px rgb(22 22 29 / .5); }
.path .panel .close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font: 24px/1 var(--serif); cursor: pointer; color: var(--graphite); }
.path .panel .crumb { margin: 0; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.path .panel h2 { margin: 6px 0; font-size: 28px; line-height: 1.15; }
.path .panel .about { margin: 0 0 14px; font-size: 16.5px; line-height: 1.45; }
.path .panel .sum { margin: 6px 0 14px; font-size: 15px; color: var(--graphite); }
.path .panel .meter { height: 4px; background: var(--plate); }
.path .panel .meter b { display: block; height: 100%; background: var(--ink); }
.path .panel h3 { margin: 22px 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.path .panel ol, .path .panel ul { list-style: none; margin: 0; padding: 0; }
.path .panel ol li { display: grid; grid-template-columns: 14px 44px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; line-height: 1.35; }
.path .panel li .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.4px solid var(--ink); align-self: center; box-sizing: border-box; }
.path .panel li .dot.done { background: var(--ink); }
.path .panel li .dot.reading { background: linear-gradient(90deg, var(--ink) 50%, var(--paper) 50%); }
.path .panel li .num { font-size: 13px; color: var(--graphite); }
.path .panel li a { color: var(--ink); }
.path .panel li a:hover { color: var(--blue); }
.path .panel li.unwritten { color: var(--graphite); }
.path .panel li.unwritten .dot { border-style: dashed; border-color: var(--faint); }
.path .panel li .m-lvl { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.path .panel ul.tasks li { padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; }
.path .panel ul.tasks li > a { font-weight: 600; color: var(--ink); }
.path .panel ul.tasks li span { display: block; font-size: 13.5px; color: var(--graphite); }
.path .panel .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.path .panel .chips button { border: 1px solid var(--hairline); background: none; padding: 2px 10px; font: 14.5px var(--serif); color: var(--ink); cursor: pointer; }
.path .panel .chips button:hover { border-color: var(--ink); }
.path .panel .cta { display: inline-block; margin-top: 4px; padding: 6px 14px; border: 1.5px solid var(--red); color: var(--ink); font-size: 15.5px; }
.path .panel .cta:hover { background: var(--red); color: var(--paper); text-decoration: none; }
.path .panel .none { margin: 0; font-size: 15px; font-style: italic; color: var(--graphite); }

@media (max-width: 700px) {
  .path .hint { display: none; }
  .path-tools { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .path .unit.next .pulse { animation: none; }
  .path .panel { transition: none; }
}