vivac 0.15.9

/* `WEB.md` §5: one binary, no build step. This is embedded with `include_str!`
   and inlined into a <style>, because the CSP admits `style-src 'unsafe-inline'`
   and no external stylesheet at all. It lives in its own file rather than in a
   `format!` because nobody maintains two hundred lines of CSS inside a string
   literal.

   Nothing here is the only thing carrying a meaning. The DX pillar says meaning
   is never encoded in colour alone, so every state that matters is also a word
   and a position: colour repeats what the text already said, and a reader with
   no colour at all loses nothing. */

:root {
  --ink: #16181d;
  --ink-soft: #5c626e;
  --ink-faint: #878d99;
  --ground: #f5f5f7;
  --panel: #ffffff;
  --sep: #e3e3e8;
  --card-edge: rgba(0, 0, 0, 0.05);
  --chip: #eeeef0;
  --rule: #d9d9de;
  --rule-soft: #e9e9ed;
  --accent: #2f5d50;
  --warn: #8a4b1f;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo,
    Consolas, monospace;
  --prose: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e5e1;
    --ink-soft: #a7a7ad;
    --ink-faint: #7c7c83;
    --ground: #1c1c1e;
    --panel: #2a2a2d;
    --sep: #3a3a3d;
    --card-edge: rgba(255, 255, 255, 0.05);
    --chip: #38383b;
    --rule: #3a3a3d;
    --rule-soft: #333336;
    --accent: #7fbfa9;
    --warn: #d79a63;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.5rem 5rem;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 54rem;
  margin: 0 auto;
  padding-top: 2.4rem;
}

/* ---- masthead ------------------------------------------------------- */

/* The bar runs the width of the window, as a toolbar does, while its
   content stays on the page's column. */
html {
  overflow-x: clip;
}

/* The header is the bar the title folds into, and holds the title alone.
   Its room above and below the title is padding its margins take back, so
   the bar has space to sit in without the page moving by it; 0.4rem is the
   gap the crumb leaves, so the bar never lies over the crumb's link. The
   bar's bottom rule is a shadow for the same reason: a border would take a
   pixel of layout. */
header {
  box-shadow: inset 0 -1px 0 transparent;
  margin: -0.4rem calc(50% - 50vw);
  padding: 0.4rem calc(50vw - 50%);
}

header h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  transform-origin: left center;
}

.page > .promise {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* The large title folds into a translucent bar as the page scrolls, the
   way a macOS window's title does. Only where the browser can tie it to
   the scroll without script; elsewhere the title just scrolls away, and
   nothing is lost but the effect. The map is left out: its detail panel is
   already pinned to the top of the window, and the bar would sit over it.

   Only paint is animated: transform, background, blur, a shadow. The first
   version also folded the header's size, which moved the page under the
   reader while the scroll drove it; the browser's scroll anchoring pulled
   the scroll back to hold its place, and the page bounced (`f819`). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body:not(.wide-page) header {
      position: sticky;
      top: 0;
      z-index: 5;
      animation: bar linear both;
      animation-timeline: scroll();
      animation-range: 0 90px;
    }

    body:not(.wide-page) header h1 {
      animation: shrink linear both;
      animation-timeline: scroll();
      animation-range: 0 90px;
    }
  }
}

@keyframes bar {
  to {
    background: color-mix(in srgb, var(--ground) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 -1px 0 var(--rule);
  }
}

@keyframes shrink {
  to {
    transform: scale(0.6);
  }
}

/* The gap under the masthead lives on what follows it, not on the bar. */
main {
  margin-top: calc(2.4rem + 1px);
}

/* ---- sections ------------------------------------------------------- */

section {
  margin-bottom: 1.8rem;
}

section > h2 {
  margin: 0 0 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

section > .since {
  margin: 0 0 1rem 0.9rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

section > h3 {
  margin: 1.1rem 0 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.empty {
  margin: 0;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---- node lists ----------------------------------------------------- */

/* `d811`: rows sit in a card with inset separators, the way macOS insets a
   settings list past a row's icon, and a row that leads somewhere carries
   a chevron and is a link across its whole width. */
ul.nodes {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0;
  background: var(--panel);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

ul.nodes > li {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 0.9rem;
  padding: 0.55rem 2.2rem 0.55rem 0.9rem;
  transition: background-color 120ms ease-out;
}

/* The separator is inset to where the title starts, the way macOS insets
   it past a row's icon: here the id chip plays the icon. */
ul.nodes > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6.3rem;
  right: 0;
  border-top: 1px solid var(--sep);
}

/* The whole row is the link, so the chevron is not a promise the row
   breaks: the id's link is stretched over it. */
ul.nodes > li .alias a::after,
ol.stack > li .alias a::after {
  content: "";
  position: absolute;
  inset: 0;
}

ul.nodes > li:has(.alias a)::after,
ol.stack > li:has(.alias a)::after {
  content: "\203A";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-52%);
  color: var(--ink-faint);
  font-size: 1.25rem;
  line-height: 1;
}

ul.nodes > li:hover,
ol.stack > li:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

ul.nodes > li:active,
ol.stack > li:active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

ul.nodes .alias a,
ol.stack .alias a {
  display: inline-block;
  background: var(--chip);
  border-radius: 6px;
  padding: 0.02rem 0.38rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.alias {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding-top: 0.13rem;
}

.title {
  margin: 0;
}

.note {
  margin: 0.2rem 0 0;
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* The word does the work; the rule beside it is a second cue, not the
   first one. */
.note.forced,
.note.flag {
  border-left: 2px solid var(--warn);
  padding-left: 0.55rem;
}

.word {
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---- the stack ------------------------------------------------------ */

ol.stack {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0;
  background: var(--panel);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

ol.stack > li {
  position: relative;
  padding: 0.55rem 2.2rem 0.55rem 0.9rem;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 0.9rem;
  transition: background-color 120ms ease-out;
}

ol.stack > li.here .title {
  font-weight: 600;
}

/* `f807`: not scoped to `ol.stack > li.here` -- `why.rs`'s spine is an
   `ol.spine`, not an `ol.stack`, and the mark it carries went unstyled. */
.here-mark {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: 0.55rem;
  padding: 0.02rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  vertical-align: 0.1em;
}

/* ---- the index of projects ------------------------------------------ */

/* A project is a card of its own (`d817`): the index is the one page
   where the rows are not nodes of one tree, and the card is what says
   so. The card is the link, so its text cannot be selected with the
   mouse -- the cost `d817` accepted, since every word on it is on the
   page it opens. */
ul.projects {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.9rem;
}

li.project {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--panel);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 0.85rem 2.2rem 0.9rem 1rem;
  transition: box-shadow 140ms ease-out, background-color 120ms ease-out;
}

li.project::after {
  content: "\203A";
  position: absolute;
  right: 0.9rem;
  top: 0.8rem;
  color: var(--ink-faint);
  font-size: 1.25rem;
  line-height: 1.3;
}

li.project:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

li.project:active {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

li.project:has(a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

li.project p {
  margin: 0;
}

li.project .name {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

li.project .name a {
  color: var(--ink);
  text-decoration: none;
  outline: none;
}

li.project .name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

li.project .focus {
  font-size: 0.92rem;
}

li.project .focus .alias {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.02rem 0.38rem;
  border-radius: 6px;
  background: var(--chip);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.76rem;
}

li.project .focus.none {
  color: var(--ink-soft);
  font-style: italic;
}

li.project .lane {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

li.project .state {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid var(--sep);
  /* The rule runs as far right as it starts in from the left, past the
     column the chevron keeps clear. */
  margin-right: -1.2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* "work since" and "no stop made by hand" are the same news, work past
   the last save point, and the words already say it: the colour only
   repeats them. */
li.project .stop.work,
li.project .stop.never {
  color: var(--warn);
}

main > p.note {
  margin: 1rem 0 0 0.9rem;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:focus-visible,
a:hover {
  text-decoration-thickness: 2px;
}

/* ---- footer --------------------------------------------------------- */

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

footer code {
  font-family: var(--mono);
}

/* ---- the spine (WEB.md 3.2) ----------------------------------------- */

/* The lineage is drawn with a border and a knot, not with SVG: seven rows
   do not need a drawing surface, the text stays selectable and copyable,
   and nothing has to be measured in JS. `d187`. */

.page > .crumb {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
}

/* The way onward, not the way back: it hangs under the promise, so it
   carries its margin on the other side. */
.page > .onward {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
}

ol.spine {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol.spine > li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 0.9rem;
}

ol.spine > li > .alias {
  padding-top: 0.1rem;
}

ol.spine > li > .alias a {
  display: inline-block;
  background: var(--chip);
  border-radius: 6px;
  padding: 0.02rem 0.38rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

ol.spine > li > .what {
  position: relative;
  border-left: 2px solid var(--sep);
  padding: 0 0 1.6rem 1.2rem;
}

/* The line stops at the last step: it is the end of the path, not a
   thread that keeps going. */
ol.spine > li:last-child > .what {
  border-left-color: transparent;
  padding-bottom: 0;
}

/* The knot. A step is a point on the line, and the point is a shape and a
   position before it is a tone. */
ol.spine > li > .what::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0.42rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--rule);
}

ol.spine > li.here > .what::before {
  background: var(--accent);
  border-color: var(--accent);
  width: 0.8rem;
  height: 0.8rem;
  left: -0.5rem;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

ol.spine > li.here .title {
  font-weight: 600;
}

ol.spine .title {
  margin: 0;
}

/* The always-visible facts: what this step is, what state it is in, when
   it opened, and how much is still open underneath. Every one of them is a
   word or a number; none of them is only a colour. */
.facts {
  margin: 0.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.facts .when,
.facts .anchor {
  font-family: var(--mono);
  font-size: 0.78rem;
}

.count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* The weight of a step is its summary, so the click lands where the
   weight is. A step with nothing under it gets no triangle at all. */
ol.spine details {
  margin: 0.3rem 0 0;
}

ol.spine summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  padding: 0.1rem 0;
  color: var(--ink-soft);
}

ol.spine summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

ol.spine summary .count {
  color: var(--accent);
}

ol.spine .detail {
  padding: 0.2rem 0 0.4rem;
}

ol.spine .detail h3 {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}

ol.spine .detail ul.nodes > li {
  grid-template-columns: 3.6rem 1fr;
  padding: 0.35rem 0.9rem 0.35rem 0;
}

/* Inside the spine the lists are the detail of one step: no chevron, no
   stretched link, the titles stay selectable. */
ol.spine .detail ul.nodes {
  box-shadow: none;
}

ol.spine .detail ul.nodes > li + li::before {
  left: 5.4rem;
}

ol.spine .detail ul.nodes > li::after,
ol.spine .detail ul.nodes .alias a::after {
  content: none;
}
/* ---- the map (WEB.md 3.6, d391) -------------------------------------- */

/* Eight lines earn a colour, and everything else is grey. That is not a
   style choice: the real tree threads into 261 lines and exactly eight of
   them reach five stations, so a palette any wider would be handing colour
   to two-stop stubs until none of it meant anything.

   A stop's line is written in the markup as a class, never as a hex value,
   because the same drawing is served onto a light ground and a dark one and
   neither palette belongs in the SVG. `--c` is the indirection: an `.l3`
   sets it once and every part that colours itself reads it. */

:root {
  --l0: #b23b30;
  --l1: #1f5f9e;
  --l2: #8a6a12;
  --l3: #1c7a58;
  --l4: #7a3f9e;
  --l5: #1a6f78;
  --l6: #9a5518;
  --l7: #4f7a1c;
  --lx: #9aa0aa;
  --lit: #f6f1e6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --l0: #e2483d;
    --l1: #4aa3df;
    --l2: #e5c07b;
    --l3: #3fb98c;
    --l4: #c678dd;
    --l5: #56b6c2;
    --l6: #d19a66;
    --l7: #98c379;
    --lx: #5b6270;
    --lit: #22282f;
  }
}

.l0 { --c: var(--l0); }
.l1 { --c: var(--l1); }
.l2 { --c: var(--l2); }
.l3 { --c: var(--l3); }
.l4 { --c: var(--l4); }
.l5 { --c: var(--l5); }
.l6 { --c: var(--l6); }
.l7 { --c: var(--l7); }
.lx { --c: var(--lx); }

/* The map is the one page that is not prose, so it is the one page that
   does not sit in a 54rem column. */
body.wide-page {
  padding: 1.6rem 1.2rem 4rem;
}

body.wide-page .page {
  max-width: none;
}

/* The map's masthead ends in its tools rather than a line of prose, and
   sits a little closer to the drawing. */
body.wide-page main {
  margin-top: calc(2.2rem + 1px);
}

.stats {
  margin: 0.5rem 0 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.74rem;
}

/* ---- the legend and the tools ---------------------------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin-top: 0.7rem;
}

.legend .line,
.tools .tool {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 7px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.16rem 0.6rem;
  cursor: pointer;
}

.legend .line:hover,
.legend .line.on,
.tools .tool:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* The way back out of a fold is a link, not a button, for the same reason
   every other fold control is one: the server recomputes the map. */
a.tool {
  text-decoration: none;
}

/* The swatch repeats what the name already says. A reader with no colour
   at all still has the name, and the name is the station the line starts
   at, which is a place they can go. */
.legend .line b {
  display: inline-block;
  width: 1.1rem;
  height: 0.26rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.35rem;
  background: var(--c);
}

.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}

.tools #find {
  background: color-mix(in srgb, var(--ink) 6%, var(--panel));
  background-image: radial-gradient(circle at 0.72rem 50%, transparent 0.23rem,
      var(--ink-faint) 0.24rem, var(--ink-faint) 0.3rem, transparent 0.31rem);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.7rem 0.2rem 1.7rem;
  width: 16rem;
}

.tools #find:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.tools .hits {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* ---- the drawing ------------------------------------------------------ */

/* Two rows: the lane heads, and then the drawing beside the list. The heads
   have to be a row of the same grid rather than anything above it, or the
   gutter starts one strip lower than the list it is drawn against and every
   station points at the wrong row. */
.map {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 25rem;
  grid-template-rows: auto 1fr;
}

.heads {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  height: 1.4rem;
}

/* One control per lane, sitting over the column it folds. Absolute, at the
   same x the server drew the lane at: the head and its rails are the same
   number. */
.heads .head {
  position: absolute;
  top: 0;
  width: 18px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.2rem;
  text-align: center;
  text-decoration: none;
}

.heads .head:hover,
.heads .head:focus-visible {
  color: var(--accent);
}

/* A depth with nothing drawn at it keeps its place on the ruler and stops
   being a control: there is nothing there to fold. */
.heads .head.off {
  opacity: 0.35;
}

/* A folded level keeps its number and gains a box: a state a colour alone
   carried would be one the DX pillar does not allow. */
.heads .head.on {
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  line-height: 1.1rem;
}

.gutter {
  position: relative;
  grid-row: 2;
  grid-column: 1;
}

/* Two gutters, one per lane width, and exactly one of them on screen. Both
   are chosen by class and never by element: the first version of this said
   that an svg with the gutter class displays as a block, which is more
   specific than the rule meant to hide one, so it drew the two on top of
   each other. */
.rails {
  display: none;
}

.rails.wide {
  display: block;
}

.rail,
.elbow {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.2;
  opacity: 0.55;
}

.elbow {
  opacity: 0.45;
}

.terminus {
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
}

/* Solid is open and hollow is closed, and the row says the same thing in
   words and in a strike through the title. */
.station {
  stroke: var(--c);
  stroke-width: 1.7;
  cursor: pointer;
}

.station.open {
  fill: var(--c);
}

.station.shut {
  fill: var(--ground);
}

.waits {
  fill: none;
  stroke: var(--warn);
  stroke-width: 1.2;
  opacity: 0.9;
}

/* The fold control, in the gutter and beside the rail it cuts. A link, so
   folding works with no script at all, can be bookmarked, and comes undone
   with the back button. */
.folds a {
  cursor: pointer;
}

.folds rect {
  fill: transparent;
}

.folds text {
  fill: var(--ink-faint);
  font-family: var(--mono);
  /* Big enough to read the state off. At 11 px an open triangle and a shut
     one were the same smudge, which is the whole job of the control. */
  font-size: 15px;
  text-anchor: middle;
}

.folds a:hover text,
.folds a:focus-visible text {
  fill: var(--accent);
}

.folds a.on text {
  fill: var(--accent);
}

/* A node the depth limit is cutting is not a control: there is nothing one
   node can do about a limit set for the whole map. */
.folds .off text {
  fill: var(--ink-faint);
  opacity: 0.4;
}

/* And the drawing says it where the rail would have gone: the mark a drawing
   uses for "this carries on and is not shown". */
.cut {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

/* The route dims the drawing, and a control is not part of the drawing. */
.routing .folds text {
  opacity: 1;
}

.routing .cut {
  opacity: 0.14;
}

.route path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route circle {
  fill: var(--accent);
  stroke: var(--ground);
  stroke-width: 2;
}

/* While a route is drawn everything off it steps back -- but only as far
   as still being readable. The first version dimmed to a third, and the
   owner read the page as having gone dark rather than as having answered. */
.routing .rail,
.routing .elbow,
.routing .terminus {
  opacity: 0.14;
}

.routing .station {
  opacity: 0.3;
}

.routing .station.on {
  opacity: 1;
}

/* ---- the list -------------------------------------------------------- */

/* One row per node, in the same order and at the same offset as the
   stations beside them: a row's index is its y, so an indent here would be
   a lie about where its station is. */
ol.stops {
  grid-row: 2;
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

li.stop {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) auto auto auto;
  gap: 0 0.55rem;
  align-items: center;
  height: 32px;
  padding-right: 1rem;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

li.stop:hover {
  background: var(--rule-soft);
}

li.stop .alias {
  color: var(--c);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  /* The lists elsewhere nudge an alias down to sit on the first line of a
     wrapped title. A row here is one line, 32 px tall and centred, and the
     nudge would push it off the station it names. */
  padding-top: 0;
}

li.stop .title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

li.stop.hub .title {
  font-weight: 600;
}

/* Closed is struck through as well as hollow in the drawing: two ways of
   saying it, neither of them a colour. */
li.stop.shut {
  color: var(--ink-faint);
}

li.stop.shut .title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
}

li.stop.parked .title {
  font-style: italic;
}

/* Both of these are optional on a row, and a grid places what it is given
   in the next free column. Naming their columns is what keeps a row with no
   note count from putting its fan-out where the note count goes. */
li.stop .fan {
  grid-column: 4;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  min-width: 1.6rem;
  text-align: right;
}

li.stop .notes {
  grid-column: 3;
  color: var(--warn);
  font-family: var(--mono);
  font-size: 0.64rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0 0.24rem;
}

li.stop.false-close .title::after {
  content: " false close";
  color: var(--warn);
  font-family: var(--mono);
  font-size: 0.7rem;
}

/* What a folded row is holding out of sight. The control that put it there
   lives in the gutter, beside the rail it cut; the count belongs here,
   because it is the one thing the reader cannot see for themselves once the
   subtree is gone. */
li.stop .held {
  grid-column: 5;
  min-width: 2.4rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-align: right;
}

li.stop.folded .title {
  font-style: italic;
}

/* The same links as the heads above the gutter, for the layout where a lane
   is 8 px across and cannot carry a control of its own. */
.depths {
  display: none;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 0.72rem;
}

@media (max-width: 860px) {
  .depths {
    display: inline;
  }
}

.depths .depth {
  margin-left: 0.35rem;
  text-decoration: none;
}

.depths .depth.on {
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.2rem;
}

.depths .depth.off {
  margin-left: 0.35rem;
  opacity: 0.35;
}

li.stop.hit {
  background: var(--lit);
}

/* The row a link named. It is where the reader was put, not what they
   chose, so it is a mark and not a selection -- and the browser draws it
   with no script at all. */
li.stop:target {
  box-shadow: inset 3px 0 0 var(--ink-faint);
}

li.stop.faded {
  opacity: 0.25;
}

.routing li.stop {
  opacity: 0.45;
}

/* The route is lit along the titles too, not only along the rails: a rail
   can be sixteen lanes away from the title it belongs to, and a reader
   should not have to measure across the page to see which rows are on the
   route. */
.routing li.stop.onroute {
  opacity: 1;
  background: var(--rule-soft);
}

.routing li.stop.on {
  opacity: 1;
  background: var(--lit);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* blocks -- the parent cannot close until this one closes. The same glyph
   vivac tree prints, and the word is in the title attribute besides. */
.mark {
  color: var(--warn);
  font-weight: 700;
}

/* ---- the detail ------------------------------------------------------ */

/* On a desktop it stands beside the map and stays put while the map
   scrolls, which is the whole promise: the tree never leaves the screen. */
.detail {
  grid-row: 1 / span 2;
  grid-column: 3;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow: auto;
  border-left: 1px solid var(--rule);
  background: var(--panel);
  padding: 1rem 1.1rem 3rem;
}

.map > .detail {
  border-left: none;
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  margin-left: 0.8rem;
}

.detail .code {
  margin: 0 0 0.3rem;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.detail h2 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.detail h3 {
  margin: 1.2rem 0 0.35rem;
  color: var(--ink-faint);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.detail .prose {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.detail details {
  border-top: 1px solid var(--rule);
  padding: 0.45rem 0;
}

.detail summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.detail .when {
  color: var(--ink-faint);
  font-family: var(--mono);
}

.detail ul.plain,
.detail ol.plain {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}

.detail .plain > li {
  padding: 0.16rem 0 0.16rem 0.9rem;
  border-left: 2px solid var(--rule);
}

.detail .plain > li.last {
  border-left-color: var(--accent);
  font-weight: 600;
}

.detail .go {
  margin-right: 0.4rem;
  font-family: var(--mono);
  font-size: 0.74rem;
}

.detail dl {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.35rem 0;
  margin: 0;
  font-size: 0.82rem;
}

.detail dt {
  padding-top: 0.15rem;
  color: var(--ink-faint);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.detail dd {
  margin: 0;
}

.detail .onward {
  margin: 1.4rem 0 0;
  font-size: 0.82rem;
}

/* Only a drawer has a handle and a close button, so on a desktop there is
   nothing to draw. */
.detail .sheet {
  display: none;
}

/* ---- on a phone ------------------------------------------------------ */

@media (max-width: 860px) {
  .map {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rails.wide {
    display: none;
  }

  .rails.narrow {
    display: block;
  }

  /* A lane is 8 px across here and no control fits in 8 px, so the heads
     give way to the same links as chips in the tools. */
  .heads {
    display: none;
  }

  li.stop {
    grid-template-columns: 4.4rem minmax(0, 1fr) auto auto auto;
    gap: 0 0.4rem;
  }

  /* No hover on a phone, so the fold control is always there. */
  li.stop .fold {
    opacity: 1;
  }

  .tools #find {
    width: 9rem;
  }

  /* The detail becomes a drawer over the bottom half of the screen: the
     map keeps the other half, which is what "without letting go" means
     when there is no room for two columns. */
  .detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 9;
    width: 100%;
    height: 50vh;
    max-height: 50vh;
    border-left: none;
    border-top: 1px solid var(--rule);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
    transform: translateY(101%);
    transition: transform 0.22s ease;
  }

  .detail.open {
    transform: translateY(0);
  }

  .detail .sheet {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -1rem -1.1rem 0.7rem;
    padding: 0.6rem 1.1rem;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
  }

  .detail .grab {
    position: absolute;
    left: 50%;
    top: 0.3rem;
    transform: translateX(-50%);
    width: 2.4rem;
    height: 0.25rem;
    border-radius: 99px;
    background: var(--rule);
  }

  .detail .close {
    background: none;
    border: 1px solid var(--rule);
    border-radius: 99px;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 0.72rem;
    padding: 0.12rem 0.6rem;
    cursor: pointer;
  }
}

@starting-style {
  details[open] > .detail {
    opacity: 0;
    transform: translateY(-4px);
  }
}

details > .detail {
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

/* Somebody reading this with motion turned down asked for that. */
@media (prefers-reduced-motion: reduce) {
  .detail,
  ul.nodes > li,
  ol.stack > li,
  li.project,
  li.stop,
  details > .detail {
    transition: none;
  }
}