/* ═══════════════════════════════════════════════════════════════════════════
   THE RAIL — styling for score-rail.js
   ═══════════════════════════════════════════════════════════════════════════

   score-rail.js never names a colour. It writes fill="var(--rail-bad)" and
   so on, and the tones are defined here, per theme, so the page's palette
   stays in the stylesheet that owns it.

   The light values are the ones measured on 17 Oct 2026 for the band inks
   in blog-post.css — darkened only as far as 4.5:1 needs against the light
   page, hue untouched, so the row still reads bad → good. On dark the
   original bright values clear comfortably (6.77–11.92:1) and are used as
   they are. Same split the rest of this project makes between an identity
   colour and the ink of a word.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --rail-bad:   #C2361E;
  --rail-poor:  #B1580E;
  --rail-fair:  #8F6C04;
  --rail-good:  #148161;
  --rail-best:  #0F814D;
  --rail-muted: #4A6358;
  --rail-ink:   #0A1A12;
}
:root[data-theme="dark"]{
  --rail-bad:   #F0776B;
  --rail-poor:  #fd7e14;
  --rail-fair:  #ffc107;
  --rail-good:  #20c997;
  --rail-best:  #18C979;
  --rail-muted: rgba(255,255,255,.58);
  --rail-ink:   rgba(255,255,255,.92);
}

.rail{
  margin: 26px 0 22px;
  padding: 0;
}
.rail-svg{
  display: block;
  width: 100%;
  height: auto;
  /* The band labels sit above the bar and the ticks below it; both are
     inside the viewBox, so nothing is clipped at any width. */
  overflow: visible;
  font-family: inherit;
}
.rail figcaption{
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rail-muted);
  max-width: 62ch;
}
.rail-replay{
  margin-top: 10px;
  font: 700 12px/1 inherit;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--rail-muted);
  cursor: pointer;
  opacity: .8;
}
.rail-replay:hover{ opacity: 1; }
.rail-replay:focus-visible{ outline: 2px solid var(--rail-good); outline-offset: 2px; }

/* On a phone the band names above the bar collide long before the bar does.
   The scale itself still teaches the shape, and the table underneath — which
   the rail introduces rather than replaces — carries every name in full. */
@media (max-width: 560px){
  /* Only the band NAMES. The marker's own number is also centred and must
     survive — it is the one figure on the drawing that belongs to the
     reader. */
  .rail-svg .rail-band-name{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .rail-replay{ display: none; }
}