/* Anatomy of a pretraining cluster — page-local styles.
 *
 * Tokens, .container, .page-head, .btn and the footer all come from
 * ../styles.css. Only what the explorer adds lives here. .chip follows the
 * CVSS calculator's .chip (cvss4-zh/styles.css): same object, copied rather
 * than shared because there are only two users.
 *
 * Colour rules worth knowing before editing the drawing styles:
 *
 * - The art is ink line-work on paper. Brat marks exactly one thing: what you
 *   can click (hotspot outlines on hover/focus, the selected part's wash, the
 *   dotted underline on glossary terms). The art never uses brat for a
 *   component, or the reader can't tell "this is a power line" from "this is
 *   interactive".
 * - The explorer is deliberately wider than .container (up to 1600px): the
 *   drawing is the page. Everything else on the page keeps the site measure.
 */

/* ---------- Explorer frame ---------- */
.explorer-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 6vw, 80px);
}
.explorer {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 380px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
/* On a desktop the explorer fills the window below the nav: the drawing
   scales to whatever height is left (the SVG letterboxes inside its frame),
   and the ladder and inspector scroll inside their own columns. */
@media (min-width: 1181px) {
  .explorer-wrap { max-width: none; padding: 0 16px 16px; }
  /* Scroll-to-zoom: app.js sets the wrapper's height so each level gets a
     stretch of scrolling, and the explorer pins under the nav meanwhile. */
  .explorer-wrap.is-scrolly .explorer:not(.is-full) { position: sticky; top: 72px; }
  .explorer {
    height: calc(100vh - 64px - 16px);
    height: calc(100dvh - 64px - 16px);
    min-height: 560px;
    grid-template-rows: minmax(0, 1fr);
  }
  .ladder, .insp { overflow-y: auto; min-height: 0; }
  .viewer { min-height: 0; }
  .viewer__stage { flex: 1 1 auto; min-height: 0; display: flex; }
  .viewer__svg { width: 100%; height: 100%; }
}

/* Full screen, by the Fullscreen API or the pinned fallback. Same three
   columns at any width, because there is nothing else on the screen. */
.explorer.is-full {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  min-height: 0;
  grid-template-columns: 150px minmax(0, 1fr) 380px;
  grid-template-rows: minmax(0, 1fr);
  border: 0;
}
.explorer.is-pinned { position: fixed; inset: 0; z-index: 100; }
html.explorer-pinned { overflow: hidden; }
.explorer.is-full .ladder,
.explorer.is-full .insp { overflow-y: auto; min-height: 0; grid-column: auto; border-top: 0; }
.explorer.is-full .viewer { min-height: 0; border-right: 1px solid var(--rule); }
.explorer.is-full .viewer__stage { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.explorer.is-full .viewer__svg { width: 100%; height: 100%; max-width: none; }
@media (max-width: 900px) {
  /* Too narrow for three columns: stack, and let the whole thing scroll. */
  .explorer.is-full { display: block; overflow-y: auto; }
  .explorer.is-full .viewer__stage { height: 60vh; }
}
.explorer:fullscreen { background: var(--paper); }
.viewer__fs { margin-left: auto; }

@media (max-width: 1180px) {
  .explorer:not(.is-full) { grid-template-columns: 140px minmax(0, 1fr); }
  .explorer:not(.is-full) .insp { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
}
@media (max-width: 700px) {
  .explorer:not(.is-full) { grid-template-columns: 1fr; }
}

.chip {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip--ink { color: var(--ink); border-color: var(--ink); }
.chip:hover:not(:disabled) { background: var(--brat); color: var(--ink); border-color: var(--brat); }
.chip:disabled { opacity: 0.35; cursor: default; }

/* ---------- Ladder: a powers-of-ten ruler ---------- */
.ladder {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .ladder { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 8px; }
}
.ladder__btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  padding: 10px 12px 10px 16px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}
@media (max-width: 700px) {
  .ladder__btn { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 10px; }
}
.ladder__scale { font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.ladder__name { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.25; }
.ladder__btn:hover .ladder__name { color: var(--ink); }
.ladder__item.is-current .ladder__btn { border-color: var(--brat); }
.ladder__item.is-current .ladder__name { color: var(--ink); font-weight: 600; }

/* ---------- Viewer ---------- */
.viewer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 24px 20px;
}
@media (min-width: 1181px) { .viewer { border-right: 1px solid var(--rule); } }
.viewer__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.viewer__name { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.viewer__hint { font-size: 13.5px; color: var(--ink-mute); margin: 0; }
.viewer__stage {
  margin: 14px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0) 0 0 / 20px 20px,
    var(--paper);
  border: 1px solid var(--rule);
}
.viewer__svg { width: 100%; height: auto; display: block; }
/* Below this the 1000-unit drawing would render its labels at ~5px. Hold it
   at a readable size and let the frame pan instead. */
@media (max-width: 700px) {
  .viewer__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .viewer__svg { width: 760px; max-width: none; }
}
.viewer__scene { transform-origin: 0 0; transform-box: view-box; }
.viewer__zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.viewer__how { font-size: 13px; color: var(--ink-mute); margin: 0 0 0 6px; }

/* ---------- Art primitives (used by art.js) ---------- */
.a-line   { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.a-thin   { fill: none; stroke: var(--ink-soft); stroke-width: 0.7; }
.a-hair   { fill: none; stroke: var(--rule-strong); stroke-width: 0.6; }
.a-dash   { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 3; }
.a-fill   { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.a-soft   { fill: var(--paper-soft); stroke: var(--ink); stroke-width: 1; }
.a-mid    { fill: var(--rule); stroke: var(--ink); stroke-width: 0.8; }
.a-dark   { fill: var(--ink-soft); stroke: var(--ink); stroke-width: 0.8; }
.a-ink    { fill: var(--ink); stroke: none; }
.a-water  { fill: none; stroke: var(--ink-mute); stroke-width: 6; stroke-linecap: round; opacity: 0.35; }
.a-text   { font-family: var(--sans); font-size: 16px; fill: var(--ink-soft); letter-spacing: -0.005em; }
.a-small  { font-family: var(--sans); font-size: 15px; fill: var(--ink-mute); }
.a-big    { font-family: var(--sans); font-size: 20px; font-weight: 600; fill: var(--ink); letter-spacing: -0.01em; }
.a-pulse  { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 10; animation: a-flow 1.6s linear infinite; }
@keyframes a-flow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .a-pulse { animation: none; } }

/* ---------- Hotspots ---------- */
.hs { cursor: pointer; outline: none; }
.hs__box {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1.5;
  transition: stroke var(--t-fast), fill var(--t-fast);
}
.hs__label {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  fill: var(--ink-mute);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill var(--t-fast);
}
.hs:hover .hs__box,
.hs:focus-visible .hs__box { stroke: var(--brat); fill: rgba(138, 206, 0, 0.10); }
.hs:hover .hs__label,
.hs:focus-visible .hs__label { fill: var(--ink); }
.hs.is-on .hs__box { stroke: var(--brat); stroke-width: 2.5; fill: rgba(138, 206, 0, 0.18); }
.hs.is-on .hs__label { fill: var(--ink); font-weight: 600; }
.hs--enter .hs__label { fill: var(--ink-soft); }

/* ---------- Inspector ---------- */
.insp {
  padding: 22px 24px 26px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.insp__kicker { font-size: 12.5px; color: var(--ink-mute); margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.insp__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }

.depth {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  align-self: flex-start;
}
.depth__btn {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 11px;
  background: none;
  border: 0;
  border-right: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  cursor: pointer;
}
.depth__btn:last-child { border-right: 0; }
.depth__btn:hover { color: var(--ink); }
.depth__btn.is-on { background: var(--ink); color: var(--paper); }

.insp__text { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.insp__text p { margin: 0 0 10px; }
.insp__text--0 { color: var(--ink); font-size: 16px; }
.insp__text--2 { border-top: 1px solid var(--rule); padding-top: 10px; }
.insp__more {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--brat);
  cursor: pointer;
  align-self: flex-start;
}
.insp__more:hover { background: rgba(138, 206, 0, 0.18); }
.insp__body { display: flex; flex-direction: column; }

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 0;
  font-size: 13.5px;
  border-top: 1px solid var(--rule);
}
.facts[hidden] { display: none; }
.facts dt, .facts dd {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}
.facts dt { color: var(--ink-mute); padding-right: 12px; }
.facts dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.conf {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-mute);
  border: 1px solid var(--rule);
  padding: 0 5px;
  border-radius: var(--r-sm);
  vertical-align: 1px;
  white-space: nowrap;
}
.conf--est, .conf--inferred { border-style: dashed; }

.ref {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  vertical-align: super;
  margin-left: 2px;
  padding: 1px 3px;
  color: var(--ink);
  border-bottom: 1px solid var(--brat);
  font-variant-numeric: tabular-nums;
}
.ref:hover { background: rgba(138, 206, 0, 0.18); }

.insp__zoom { align-self: flex-start; cursor: pointer; }
.insp__zoom[hidden] { display: none; }

.parts { border-top: 1px solid var(--rule); padding-top: 12px; }
.parts__label { font-size: 12px; color: var(--ink-mute); margin: 0 0 8px; }
.parts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.parts__btn {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 9px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.parts__btn:hover { border-color: var(--ink); color: var(--ink); }
.parts__btn.is-on { border-color: var(--brat); background: rgba(138, 206, 0, 0.18); color: var(--ink); }


/* ---------- Glossary terms ---------- */
/* A term is a <button> so it's focusable and tappable, styled as text with a
   dotted brat underline. Dotted, not solid, so it reads as "definition here"
   rather than "link that goes somewhere". */
.term {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  border-bottom: 1.5px dotted var(--brat-deep);
  cursor: help;
  line-height: inherit;
  text-align: inherit;
}
.term:hover, .term:focus-visible { background: rgba(138, 206, 0, 0.18); }

.tip {
  position: fixed;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 14px 13px;
  pointer-events: none;
}
.tip[hidden] { display: none; }
.tip__term { font-size: 13.5px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.tip__def { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--ink-soft); }

/* ---------- Glossary list ---------- */
.glossary {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  max-width: 920px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 640px) { .glossary { grid-template-columns: 1fr; } .glossary dd { padding-top: 0; } }
.glossary dt, .glossary dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.55;
}
.glossary dt { font-weight: 600; color: var(--ink); padding-right: 16px; scroll-margin-top: 90px; }
.glossary dd { color: var(--ink-soft); }
@media (max-width: 640px) { .glossary dt { border-bottom: 0; padding-bottom: 2px; } }

/* ---------- Sources ---------- */
.sources__title,
.glossary__title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.sources__note,
.glossary__note { font-size: 14.5px; color: var(--ink-soft); max-width: 64ch; margin: 0 0 20px; line-height: 1.6; }
.sources__list {
  margin: 0;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  columns: 2;
  column-gap: 40px;
}
@media (max-width: 800px) { .sources__list { columns: 1; } }
.src { break-inside: avoid; margin-bottom: 6px; scroll-margin-top: 150px; }
.src:target { background: rgba(138, 206, 0, 0.18); }
.src a { color: var(--ink); border-bottom: 1px solid var(--brat); }
.src a:hover { background: rgba(138, 206, 0, 0.18); }

.explorer__noscript { font-size: 16px; color: var(--ink-soft); }