/* rail-polish (2026-11-08): top rhythm + sidebar active state, after cha.fyi.
   Loaded after site.css and mobile-refinement so it only overrides. */

/* A slightly quieter cinnabar for the rail, as cha.fyi's --rail-seal. */
:root{--rail-seal:#983d2c;--rail-seal-ink:#fffaf6}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--rail-seal:#944735;--rail-seal-ink:#fff7f2}}
:root[data-theme=dark]{--rail-seal:#944735;--rail-seal-ink:#fff7f2}

/* ---------- top rhythm ----------
   Content used to start 44px under the header while the rail started 10px
   under it, so the page looked like it began late. Now both share one line:
   the first rail label and the first line of content sit at the same height. */
main{padding-top:28px}
.rail{padding-top:22px}
.hero{padding-top:0}
@media (max-width:1180px){main{padding-top:26px}.rail{padding-top:20px}}
@media (max-width:860px){
  main{padding-top:20px}
  .rail{padding-top:14px}
}
@media (max-width:620px){main{padding-top:18px}}

/* ---------- rail active state ----------
   Was: bold label, red glyph and a 3px red tab clipped against the window edge.
   Now, as on cha.fyi: the glyph becomes a small cinnabar seal, a 2px hairline
   marks the row, the label goes to ink at semibold. No fill on the row. */
@media (min-width:861px){
  .rail a{grid-template-columns:22px 1fr auto;gap:9px;padding-top:6px;padding-bottom:6px}
  .rail a[aria-current]{color:var(--ink);font-weight:600;background:none}
  .rail a[aria-current]::before{left:7px;width:2px;height:20px;border-radius:1px;background:var(--rail-seal);transform:translateY(-50%)}
  .rail a[aria-current]:hover{background:var(--wash)}
}
.rail-glyph{width:22px;height:22px;border-radius:3px;transition:color var(--t),background-color var(--t)}
.rail a[aria-current] .rail-glyph{background:var(--rail-seal);color:var(--rail-seal-ink);font-size:15px;font-weight:400;transform:none}
.rail a[aria-current] .rail-count{color:var(--ink);opacity:.7}

/* Phone/tablet drawer: keep the tiles, quiet the active one to match. */
@media (max-width:860px){
  .rail a{grid-template-columns:22px 1fr auto;gap:8px}
  .rail a[aria-current],
  .rail li:nth-child(n+9) a[aria-current]{border-color:var(--line-strong);background:var(--wash);font-weight:600;color:var(--ink)}
}