/* 7 Powers module — additions on top of main.css tokens.
   Loaded after main.css, and it is the only module stylesheet on this page, so
   the blocks shared with the Wardley and Hotelling modules (stat-row, curve-key,
   split-line, reveal-toggle, pull, dated, slider roles) are repeated here. */

/* ---------- sorting strip ---------- */

/* The strip carries its power names inside the SVG, so on a narrow screen it
   keeps its drawing width and scrolls inside its own frame. The page itself
   never gains a horizontal scrollbar. */
.strip-scroll {
  overflow-x: auto;
  margin: 8px 0 4px;
  -webkit-overflow-scrolling: touch;
}
.strip-scroll svg { width: 100%; height: auto; display: block; }

.family-commit { fill: rgba(16, 124, 130, .06); }
.family-work { fill: rgba(204, 0, 51, .06); }
.family-line { stroke: var(--hairline); stroke-width: 1.5; stroke-dasharray: 4 5; }

.strip-name {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
}
.strip-span { stroke: var(--slate); stroke-width: 1.5; opacity: .35; }
.strip-dot { stroke: #fff; stroke-width: 2; }
.strip-dot.is-commit { fill: var(--petrol); }
.strip-dot.is-work { fill: var(--wine); }

/* The seven sources, named before the drawing so the chart is not the reader's
   first encounter with them. */
.source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px 28px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.source-list li { font-size: 15px; color: var(--slate); }
.source-list li b { color: var(--ink); font-family: var(--font-head); }

/* The barrier names below the strip, at body size so a phone can read them. */
.strip-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 24px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.strip-legend li {
  font-size: 15px;
  color: var(--slate);
  border-left: 3px solid var(--hairline);
  padding-left: 12px;
}
.strip-legend li b { color: var(--ink); display: block; font-family: var(--font-head); font-size: 13px; }
.strip-legend li.is-commit { border-left-color: var(--petrol); }
.strip-legend li.is-work { border-left-color: var(--wine); }

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

.curve-mix { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.curve-work { fill: none; stroke: var(--wine); stroke-width: 1.75; stroke-dasharray: 5 4; }
.curve-commit { fill: none; stroke: var(--petrol); stroke-width: 1.75; stroke-dasharray: 5 4; }

.notch-band { fill: rgba(204, 0, 51, .07); }
.start-line { stroke: var(--gray); stroke-width: 1; stroke-dasharray: 3 4; }
.cross-tick { stroke: var(--petrol); stroke-width: 2; stroke-dasharray: 6 5; }
.year-line { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 6; }
.year-mark {
  font-family: var(--font-head);
  font-size: 12px;
  fill: var(--gray);
}

/* Two sliders, two roles, and the colour says which is which:
   wine = the world, petrol = you. */
.slider-row.is-world .year-now { color: var(--wine); }
.slider-row.is-world input[type="range"] { accent-color: var(--wine); }
.slider-row.is-you .year-now { color: var(--petrol); }
.slider-row.is-you input[type="range"] { accent-color: var(--petrol); }
.slider-row.is-you { margin-top: 20px; margin-bottom: 0; }

.curve-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.curve-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--gray);
}
.curve-key i { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
/* Swatches repeat each curve's colour, weight and dash; the parent class is
   needed because `.curve-key i` sets the border shorthand. */
.curve-key .key-mix { border-top: 3px solid var(--ink); }
.curve-key .key-work { border-top: 2px dashed var(--wine); }
.curve-key .key-commit { border-top: 2px dashed var(--petrol); }

.split-line {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.split-line b { color: var(--ink); }

.reveal-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  margin-top: 10px;
}
.reveal-toggle input { accent-color: var(--wine); width: 18px; height: 18px; margin-top: 3px; }

/* ---------- readouts ---------- */

.stat.is-dead .value { color: var(--wine); animation: jitter .9s steps(2, end) infinite; }
@keyframes jitter {
  0%   { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  100% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .stat.is-dead .value { animation: none; }
}

/* ---------- reader seats behind disclosure triangles ---------- */

/* The two seats are collapsed, which means a reader who only skims never opens
   them. The summary therefore carries the finding, not a label. */
/* The two seats are a parallel pair, so they are grouped as one: the main rule
   above the first and below the last, a structural line between them. No surface,
   corner, shadow or coloured top edge (asiasivu prohibitions 3 and 4). */
.seat-details {
  border-top: 1px solid #C5CBD4;
}
.seat-details:not(.seat-details + .seat-details) {
  border-top: 2px solid var(--slate);
  margin-top: 24px;
}
.seat-details:not(:has(+ .seat-details)) {
  border-bottom: 2px solid var(--slate);
}
.seat-details summary {
  cursor: pointer;
  padding: 18px 0;
  font-size: 17px;
  color: var(--slate);
  line-height: 1.45;
  list-style-position: inside;
}
.seat-details summary::marker { color: var(--wine); }
.seat-details summary b {
  font-family: var(--font-head);
  color: var(--ink);
}
.seat-details summary:hover b { color: var(--wine); }
.seat-body { padding: 0 0 22px; }
.seat-body ol { margin: 0; padding-left: 20px; }
.seat-body li { color: var(--slate); font-size: 16px; margin-bottom: 14px; }
.seat-body li:last-child { margin-bottom: 0; }
.seat-body li b { color: var(--ink); }

/* The running question, asked three times: in the hero, after the chart, and at
   the close. It replaces the pull quote this module used to carry. */
.kysymys {
  font-family: var(--font-head);
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  /* No coloured left edge (asiasivu prohibition 4): size, face and space carry it. */
  margin: 34px 0;
}

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

@media (max-width: 720px) {
  /* Below this width the strip's own power names would render at ~7px, so it
     keeps its drawing width and scrolls inside .strip-scroll instead. */
  .strip-scroll svg { width: 640px; max-width: none; }
  .seat-details summary { padding: 16px 0; font-size: 16px; }
  .seat-body { padding: 0 0 20px; }
}

/* The budget slider's left end is a long phrase. On a phone the middle tick
   has no room between the ends, and the ends are the ones that carry meaning. */
.is-you .slider-ticks { gap: 16px; }
.is-you .slider-ticks span:last-child { text-align: right; }
@media (max-width: 560px) {
  .is-you .slider-ticks span:nth-child(2) { display: none; }
}