/* Kimi K3 course — the Explorer.
   Depends on course.css for type, colour and the axis palette. */

.mp {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.5rem 0 0;
}

.mp text { font-family: var(--mono); }

.mp-panel {
  fill: #fbfaf4;
  stroke: var(--rule);
  stroke-width: 1;
}

.mp-title {
  font-size: 10px;
  letter-spacing: 0.11em;
  fill: var(--ink-faint);
}

.mp-axis {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
}
.mp-gloss { font-size: 9.5px; fill: var(--ink-faint); }
.mp-name  { font-size: 11px; fill: var(--ink); font-weight: 600; }
.mp-sub   { font-weight: 400; }
.mp-why   { font-size: 9.5px; fill: var(--ink-faint); }
.mp-role  { font-size: 9px; letter-spacing: 0.08em; fill: var(--ink-faint); }

/* Axis colours, matching every figure in the course. */
.mp-seq    { fill: var(--seq); }
.mp-depth  { fill: var(--depth); }
.mp-width  { fill: var(--width); }
.mp-vision { fill: var(--vision); }

.mp-box { fill: var(--paper); stroke-width: 1.2; }
.mp-b-seq    { stroke: var(--seq); }
.mp-b-depth  { stroke: var(--depth); }
.mp-b-width  { stroke: var(--width); }
.mp-b-vision { stroke: var(--vision); }

/* The tick joining a sub-component to its parent: the hierarchy is the
   point of this map, so it is drawn rather than implied by indentation. */
.mp-tick { fill: none; stroke-width: 1.2; }
.mp-t-seq    { stroke: var(--seq); }
.mp-t-depth  { stroke: var(--depth); }
.mp-t-width  { stroke: var(--width); }

/* Hit targets. Cursor and hover fill make clickability obvious without
   the underline that a text link would get. */
.mp-hit { cursor: pointer; }
.mp-hit .mp-box { transition: fill 0.12s; }
.mp-hit:hover .mp-b-seq    { fill: var(--seq-bg); }
.mp-hit:hover .mp-b-depth  { fill: var(--depth-bg); }
.mp-hit:hover .mp-b-width  { fill: var(--width-bg); }
.mp-hit:hover .mp-b-vision { fill: var(--vision-bg); }
.mp-hit:focus-visible .mp-box { stroke-width: 2.4; }
.mp-hit:focus { outline: none; }

@media print {
  .mp-panel { fill: #fff; }
  .mp-box { fill: #fff; }
}

/* ─── Panels ────────────────────────────────────────────────
   One mechanism's extracted lesson body, shown in place. */

.mp-hint {
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 0.9rem 0 2.4rem;
}

.mp-hit.is-active .mp-box { stroke-width: 2.4; }
.mp-hit.is-active .mp-b-seq    { fill: var(--seq-bg); }
.mp-hit.is-active .mp-b-depth  { fill: var(--depth-bg); }
.mp-hit.is-active .mp-b-width  { fill: var(--width-bg); }
.mp-hit.is-active .mp-b-vision { fill: var(--vision-bg); }

#panel-slot { margin-top: 1rem; }

.panel-empty {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
}

.panel {
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
}
.panel-head { margin-bottom: 1.8rem; }
.panel-head h2 {
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  border-bottom: none;
  margin: 0 0 0.5rem;
  padding-bottom: 0;
}
.panel-head h2:focus { outline: none; }
.panel-head .standfirst { font-size: 1.05rem; }

.panel-src {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
  line-height: 1.5;
}

/* The first h2 inside extracted content would otherwise clash with the
   panel's own title. Demote it visually. */
.panel > h2 {
  font-size: 1.2rem;
  margin-top: 2.6rem;
}

.all-panels {
  margin-top: 1.6rem;
  font-size: 0.88rem;
}
.all-panels summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.all-panels ul { margin-top: 0.7rem; }

@media print {
  /* Print every panel: a hidden section is useless on paper. */
  .panel[hidden] { display: block !important; }
  .panel-empty, .mp-hint { display: none; }
}