vivac 0.7.0

/* `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: #fbfaf8;
  --panel: #ffffff;
  --rule: #e2e0db;
  --rule-soft: #eeece8;
  --accent: #2f5d50;
  --warn: #8a4b1f;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo,
    Consolas, monospace;
  --prose: ui-sans-serif, system-ui, "Segoe UI", Inter, Helvetica, Arial,
    sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e5e1;
    --ink-soft: #a2a7b2;
    --ink-faint: #767c88;
    --ground: #14161a;
    --panel: #1b1e23;
    --rule: #2c3037;
    --rule-soft: #23272d;
    --accent: #7fbfa9;
    --warn: #d79a63;
  }
}

* {
  box-sizing: border-box;
}

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

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

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

header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.1rem;
  margin-bottom: 2.2rem;
}

header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

header .promise {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

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

section {
  margin-bottom: 2.6rem;
}

section > h2 {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

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

section > h3 {
  margin: 1.4rem 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

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

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

ul.nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}

ul.nodes > li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.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;
}

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

ol.stack > li .title {
  border-left: 1px solid var(--rule);
  padding-left: 0.9rem;
}

ol.stack > li.here .title {
  border-left: 2px solid var(--accent);
  font-weight: 600;
}

ol.stack > li.here .here-mark {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-left: 0.5rem;
}

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

ul.projects {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.projects > li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

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;
  border-top: 1px solid var(--rule);
  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`. */

header .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. */
header .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 > .what {
  position: relative;
  border-left: 1px solid var(--rule);
  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.29rem;
  top: 0.42rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ground);
  border: 1px solid var(--rule);
}

ol.spine > li.here > .what::before {
  background: var(--accent);
  border-color: var(--accent);
  width: 0.62rem;
  height: 0.62rem;
  left: -0.35rem;
}

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;
}
/* ---- 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;
}

body.wide-page header {
  margin-bottom: 1.2rem;
}

.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: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  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;
  border-top: 1px solid var(--rule);
}

.tools #find {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.7rem;
  width: 16rem;
}

.tools #find:focus {
  outline: none;
  border-color: var(--accent);
}

.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;
}

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;
}

.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;
  }
}

/* Somebody reading this with motion turned down asked for that. */
@media (prefers-reduced-motion: reduce) {
  .detail {
    transition: none;
  }
}