/* site/style.css: the site's own rules, over the front's stylesheet (front.css, a link to transport/static/style.css,
   which every page loads first). The palette and every shared rule live there alone. */
/* ---- the site's own: the GitHub Pages header, the doors with their words, the diagram, the status marks */
header nav a[aria-current] { color: var(--amber); }
ul.doorlist { list-style: none; padding: 0; display: grid; gap: .6rem; }
ul.doorlist li { display: grid; grid-template-columns: 10.5rem 1fr; gap: .25rem 1rem; align-items: baseline; }
ul.doorlist .door { justify-self: start; }
.clip { display: block; color: var(--terracotta); border-top: 1px dashed var(--terracotta); margin: .6rem 0; padding-top: .2rem; font-size: .85em; }
.pass { color: var(--sage); font-weight: 600; font-family: var(--mono); font-size: .85em; }
.pass::before { content: "● "; content: "● " / ""; }
.scroll { overflow-x: auto; }
figure { margin: 1.5rem 0; }
figure svg { width: 100%; height: auto; }
figcaption { color: var(--muted); font-size: .9rem; font-style: italic; }
.diagram text { font-family: var(--mono); font-size: 13px; fill: var(--ink); }
.diagram .sub { fill: var(--muted); font-size: 11px; }
.diagram .box { fill: var(--leaf); stroke: var(--rule); stroke-width: 1.5; }
.diagram .core { stroke: var(--amber); }
.diagram .wire { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.diagram .arrow { fill: var(--muted); }
footer .colophon-mark { display: block; width: 6rem; height: auto; margin: 0 0 .4rem; }
@media (max-width: 34rem) { ul.doorlist li { grid-template-columns: 1fr; } }
dl.was dt { text-decoration: line-through; }
dl.was dt, dl.was dd { padding-top: .35rem; }