/* Wardley module — additions on top of main.css tokens.
   Loaded after main.css; defines nothing that module 1 uses.
   css/hotelling.css is NOT loaded here, so the blocks this module shares with
   it (stat-row, pull, dated) are repeated below. */

/* ---------- the maps ---------- */

/* A Wardley map needs its labels inside the SVG, which the other modules avoid.
   The map therefore scrolls inside its own frame on a narrow screen — the page
   itself never gains a horizontal scrollbar. */
.map-scroll {
  overflow-x: auto;
  margin: 8px 0 4px;
  -webkit-overflow-scrolling: touch;
}
.map-scroll svg { width: 100%; height: auto; display: block; }

.band-line { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 6; }
.chain { stroke: var(--slate); stroke-width: 1.5; opacity: .45; }
.ladder { fill: none; stroke: var(--petrol); stroke-width: 1.75; stroke-dasharray: 5 4; }

/* The dot's colour is its evolution stage, so movement across a stage boundary
   is visible even when the distance travelled is small. Wine at the right end
   is deliberate: that is where a higher price stops being available. */
.node {
  stroke: #fff;
  stroke-width: 2;
  transition: cx .3s var(--ease), fill .3s var(--ease);
}
.node-anchor { fill: var(--ink); }
.node-stage-0 { fill: var(--petrol); }
.node-stage-1 { fill: var(--slate); }
.node-stage-2 { fill: var(--gray); }
.node-stage-3 { fill: var(--wine); }
.node-emergent {
  fill: var(--surface);
  stroke: var(--petrol);
  stroke-width: 3;
  transition: opacity .3s var(--ease);
}
.node-emergent.is-unborn { opacity: 0; }

.node-label {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  fill: var(--slate);
}
.node-label.is-anchor { fill: var(--ink); }
.node-num {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  fill: #fff;
  transition: x .3s var(--ease);
}
/* The newborn component is drawn as an outline, so its number cannot be white. */
.node-num.is-emergent { fill: var(--petrol); }

/* The four evolution stages, in HTML so they read at any size. The margins line
   the four columns up with the stage boundaries drawn inside the SVG: the
   evolution axis runs from x=96 to x=690 in a 720-unit viewBox. */
.band-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 4.17% 0 13.33%;
}
.band {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray);
  border-top: 2px solid var(--hairline);
  padding-top: 6px;
}
.band-0 { border-top-color: var(--petrol); }
.band-1 { border-top-color: var(--slate); }
.band-2 { border-top-color: var(--gray); }
.band-3 { border-top-color: var(--wine); }

/* The numbered legend under a map. In the lab each row also carries the
   component's current stage, which is what the reader watches while dragging. */
.map-legend {
  margin: 16px 0 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 28px;
}
.map-legend li {
  font-size: 15px;
  color: var(--slate);
  margin-bottom: 5px;
  break-inside: avoid;
}
.map-legend li b { color: var(--ink); font-weight: 600; }
.legend-stage {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.map-legend li[data-stage="0"] .legend-stage { color: var(--petrol); }
.map-legend li[data-stage="3"] .legend-stage { color: var(--wine); }
.map-legend li[data-legend="valinta"] b { color: var(--petrol); }

/* ---------- the lab ---------- */

.slider-row .year-now { color: var(--wine); }
/* Four steps do not fit across a phone at 12px. The two middle labels are
   dropped there, because the live label above the slider already names the step
   the reader is standing on. */
.slider-ticks { gap: 10px; }

.stat[data-born="true"] .value { color: var(--petrol); }

@media (prefers-reduced-motion: reduce) {
  .node, .node-num, .node-emergent { transition: none; }
}

/* ---------- side paths behind disclosure triangles ---------- */

/* Both of these are applications of the same mechanism rather than steps in the
   argument, so they are collapsed. A reader who only skims never opens them,
   which means the summary has to carry the finding and not a label. */
.side-details {
  /* A structural line above and below, no surface, corner, shadow or coloured
     top edge (asiasivu prohibitions 3 and 4). */
  border-top: 1px solid #C5CBD4;
  border-bottom: 1px solid #C5CBD4;
  margin-top: 24px;
}
.side-details summary {
  cursor: pointer;
  padding: 18px 0;
  font-size: 17px;
  color: var(--slate);
  line-height: 1.45;
  list-style-position: inside;
}
.side-details summary::marker { color: var(--wine); }
.side-details summary b { font-family: var(--font-head); color: var(--ink); }
.side-details summary:hover b { color: var(--wine); }
.side-body { padding: 0 0 22px; }
.side-body > :first-child { margin-top: 0; }
.side-body > :last-child { margin-bottom: 0; }
.side-body h3 { font-size: 18px; margin: 22px 0 8px; }
.side-body ol { margin: 0; padding-left: 20px; }
.side-body li { color: var(--slate); font-size: 16px; margin-bottom: 10px; }
.side-body li:last-child { margin-bottom: 0; }

/* ---------- pull quote, dated ---------- */

/* The four evolution stages as a definition list under the primer map */
.stage-defs { margin: 18px 0 0; padding-left: 22px; }
.stage-defs li { color: var(--slate); margin-bottom: 8px; }
.stage-defs li b { color: var(--ink); }

@media (max-width: 720px) {
  .map-legend { columns: 1; }

  /* The primer carries five names inside the drawing, and at this width they
     would render at about six pixels. It therefore keeps its drawing width and
     scrolls inside its own frame; the page never gains a scrollbar. */
  .map-scroll.is-labelled svg { width: 640px; max-width: none; }
  .map-scroll.is-labelled + .band-strip { margin-left: 0; margin-right: 0; }

  /* The sales maps carry numbers rather than names, so they can shrink to fit
     — the numbers are enlarged in viewBox units to stay readable, and the one
     inline label is dropped. The prose above the map already names it. */
  .map-scroll:not(.is-labelled) .node:not(.node-anchor) { r: 19px; }
  .map-scroll:not(.is-labelled) .node-num { font-size: 24px; }
  .map-scroll:not(.is-labelled) .axis-label { font-size: 24px; }
  .map-scroll:not(.is-labelled) .node-label { display: none; }
}

@media (max-width: 560px) {
  .slider-ticks span:nth-child(2), .slider-ticks span:nth-child(3) { display: none; }
}