/* The edition (site/DESIGN.md, law 15; the plan site-for-the-practice, its
 * specification's "The roster index", "One skill page" as re-cut under R11,
 * and "The sources colophon"): the roster on the line; per skill a header
 * card that is the legend of its colours, one editor window per shipped file
 * with a rail and a wash per passage in its tone, each passage's note outside
 * the window, the edits as hunks, the left-out sentences, the ledger entry and
 * the pager; the sources as a colophon. The build reads this sheet with
 * site.css as one under the design gate, so every value here is a token, or a
 * measure the plan's specification names (the 200px roster track; the notes'
 * column is --notes-w). The tones are always on: an origin class sets --tone,
 * and a hue never stands alone, since every note, chip and legend row names
 * its source in full, never by initials. Hue means origin, so prose stays ink:
 * every row is washed in its origin's tint, greenline's in the accent's, the
 * editor's colours fall on Markdown's structure only, and red appears only in
 * an edit's hunk. */

/* ---------- the origin classes: each sets the one --tone its rules read ---------- */
.o1 {
  --tone: var(--o-1);
}
.o2 {
  --tone: var(--o-2);
}
.o3 {
  --tone: var(--o-3);
}
.o4 {
  --tone: var(--o-4);
}
.o5 {
  --tone: var(--o-5);
}
.o6 {
  --tone: var(--o-6);
}
.gw {
  --tone: var(--accent);
}

/* ---------- the reading room ---------- */
.edition {
  max-width: var(--rail);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + var(--chrome-gap)) var(--gutter) var(--sp-9);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
.edition > .mini {
  display: none;
}
.mini ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ed h1 {
  font-size: var(--fs-5);
  line-height: var(--lh-head);
}
.ed h1.mono {
  font-weight: 500;
}
.ed h2 {
  font-size: var(--fs-4);
  margin: var(--sp-8) 0 var(--sp-3);
}
.ed h3 {
  margin: var(--sp-6) 0 var(--sp-3);
}
.ed .lead {
  color: var(--ink-3);
  font-size: var(--fs-2);
  margin: 0 0 var(--sp-4);
}
.ed ol,
.ed ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.card {
  background: var(--s1);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e1);
}
.answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}
/* the header card, small and full: about half the text window's weight at 1280 */
.answer.card {
  padding: var(--sp-5);
}
.answer .kind {
  max-width: none;
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.answer .tmpl {
  font-size: var(--fs-5);
  line-height: var(--lh-head);
  color: var(--ink-1);
  max-width: var(--measure);
  text-wrap: pretty;
}
.answer .dek {
  max-width: var(--measure);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}
.ttl h1 {
  font-size: var(--fs-4);
}
.tok,
.ftok {
  font-size: var(--fs-1);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.stub {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.ringg {
  inline-size: var(--sp-3);
  block-size: var(--sp-3);
  border: var(--seam) solid var(--ink-3);
  border-radius: var(--r-pill);
}
.lineage {
  font-size: var(--fs-1);
}
/* the facts: each its own quiet item, no separators */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-0);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.raw a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sp-7);
}
/* the lineage's links keep their --sp-7 targets by a hit area, so the card's last line stays one line tall */
.lineage a {
  position: relative;
}
.lineage a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--sp-7);
  translate: 0 -50%;
}

/* ---------- tooltips: a data-tip drawn on hover or focus, fading in ---------- */
.seg,
.bar > i,
.chips li {
  position: relative;
}
.seg[data-tip]::after,
.bar > i[data-tip]::after,
.chips li[data-tip]::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  inset-block-end: calc(100% + var(--sp-1));
  inset-inline-start: 0;
  z-index: var(--z-raised);
  inline-size: max-content;
  max-inline-size: var(--measure-dek);
  padding: var(--sp-1) var(--sp-2);
  background: var(--s1);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-1);
  box-shadow: var(--e2);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: var(--lh-head);
  color: var(--ink-1);
  white-space: normal;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--t-1) var(--e-move);
}
@starting-style {
  .seg[data-tip]::after,
  .bar > i[data-tip]::after,
  .chips li[data-tip]::after {
    opacity: 0;
  }
}
.seg[data-tip]:focus-visible::after {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .seg[data-tip]:hover::after,
  .bar > i[data-tip]:hover::after,
  .chips li[data-tip]:hover::after {
    display: block;
  }
}

/* ---------- the share bar and its legend ---------- */
.share {
  display: flex;
  gap: var(--seam);
}
/* a segment draws --sp-2 tall and keeps its --sp-7 target, the margins giving the difference back */
.seg {
  flex-basis: 0;
  min-inline-size: var(--sp-2);
  display: flex;
  align-items: center;
  block-size: var(--sp-7);
  margin-block: calc((var(--sp-2) - var(--sp-7)) / 2);
}
.seg::before {
  content: "";
  inline-size: 100%;
  block-size: var(--sp-2);
  border-radius: var(--hair);
  background: var(--tone);
  transition: opacity var(--t-1) var(--e-move);
}
.seg:active {
  opacity: 0.7;
}
.share {
  view-transition-name: skill-bar;
}
.legend {
  display: grid;
  gap: 0;
}
.legend li {
  display: grid;
  grid-template-columns: var(--sp-3) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--sp-6);
  padding-inline: var(--sp-2);
  border-radius: var(--r-1);
  font-size: var(--fs-1);
  transition: background-color var(--t-1) var(--e-move);
}
.legend .sw,
.chips .sw {
  inline-size: var(--sp-3);
  block-size: var(--sp-3);
  border-radius: var(--hair);
  background: var(--tone);
}
.legend .nm {
  color: var(--ink-1);
}
.legend a.nm {
  color: var(--ink-1);
}
.legend .up {
  font-size: var(--fs-0);
  color: var(--ink-3);
}
.legend .pc {
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--ink-1);
}
.legend a {
  position: relative;
}
.legend a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--sp-7);
  translate: 0 -50%;
}
.legend a:active {
  opacity: 0.7;
}
.answer:has(.seg.o1:focus-visible) .legend .o1,
.answer:has(.seg.o2:focus-visible) .legend .o2,
.answer:has(.seg.o3:focus-visible) .legend .o3,
.answer:has(.seg.o4:focus-visible) .legend .o4,
.answer:has(.seg.o5:focus-visible) .legend .o5,
.answer:has(.seg.o6:focus-visible) .legend .o6,
.answer:has(.seg.gw:focus-visible) .legend .gw {
  background: var(--s2);
}
@media (hover: hover) and (pointer: fine) {
  .share:has(.seg:hover) .seg:not(:hover)::before {
    opacity: 0.35;
  }
  .answer:has(.seg.o1:hover) .legend .o1,
  .answer:has(.seg.o2:hover) .legend .o2,
  .answer:has(.seg.o3:hover) .legend .o3,
  .answer:has(.seg.o4:hover) .legend .o4,
  .answer:has(.seg.o5:hover) .legend .o5,
  .answer:has(.seg.o6:hover) .legend .o6,
  .answer:has(.seg.gw:hover) .legend .gw {
    background: var(--s2);
  }
}

/* ---------- the roster's bars ---------- */
.bar {
  display: flex;
  gap: var(--seam);
  block-size: var(--sp-2);
  min-inline-size: 0;
}
.bar > i {
  flex-basis: 0;
  min-inline-size: var(--hair);
  background: var(--tone);
  border-radius: var(--hair);
}
.bar.mini {
  inline-size: var(--sp-9);
  flex: none;
}
/* a dimmed segment dims its fill, never its tooltip */
.bar > i.dim {
  background: color-mix(in srgb, var(--tone) 35%, transparent);
}

/* ---------- the text: one editor window per file (law 12's anatomy), a row per block ---------- */
.text > .file + .file,
.text > .file + .copies {
  margin-block-start: var(--sp-5);
}
/* the title bar: the file's name, its tokens and its colours, lined and sharp-edged, sticky at the top */
.fhd {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border: var(--hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-3);
}
.fhd h3 {
  margin: 0;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--ink-1);
}
.fhd h3 a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sp-7);
}
.file.off .fhd {
  position: static;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-inline-start: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  color: var(--ink-3);
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.chips .sw {
  inline-size: var(--sp-2);
  block-size: var(--sp-2);
}
/* the body: the editor ground between the frame's sides, the gutter darker, the rows below the title bar */
.pr {
  background-color: var(--editor-bg);
  background-image: linear-gradient(var(--editor-gutter), var(--editor-gutter));
  background-size: var(--sp-7) 100%;
  background-repeat: no-repeat;
  border-inline: var(--hair) solid var(--line);
}
.rows > .pg:first-child > .pr {
  padding-block-start: var(--sp-2);
}
.rows > .pg:last-child > .pr {
  padding-block-end: var(--sp-2);
  border-block-end: var(--hair) solid var(--line);
}
/* a row: its line number in the gutter, its rail in the tone at the gutter's edge, its wash in the tint */
.r {
  display: grid;
  grid-template-columns: var(--sp-7) minmax(0, 1fr);
  background-image: linear-gradient(var(--editor-gutter), var(--editor-gutter)), linear-gradient(var(--tone), var(--tone));
  background-size:
    var(--sp-7) 100%,
    var(--mark-w) 100%;
  background-position:
    0 0,
    var(--sp-7) 0;
  background-repeat: no-repeat;
}
.r.o1 {
  background-color: var(--o-1-tint);
}
.r.o2 {
  background-color: var(--o-2-tint);
}
.r.o3 {
  background-color: var(--o-3-tint);
}
.r.o4 {
  background-color: var(--o-4-tint);
}
.r.o5 {
  background-color: var(--o-5-tint);
}
.r.o6 {
  background-color: var(--o-6-tint);
}
.r.gw {
  background-color: var(--accent-tint);
}
.r::before {
  content: attr(data-n) / "";
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  block-size: calc(var(--fs-1) * var(--lh-mono));
  padding-inline-end: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  line-height: 1;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.r > .t {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding-inline: calc(var(--mark-w) + var(--sp-3)) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: var(--lh-mono);
  color: var(--ink-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* the editor's colours, on Markdown's structure only: prose stays ink, so the wash stays the origin */
.rows .sg {
  color: var(--ink-4);
}
.r > .t.hd {
  font-weight: 600;
  color: var(--amber);
}
.r > .t.hd .sg,
.r > .t.li > .sg:first-child {
  color: var(--amber);
}
.r > .t.fm {
  color: var(--ink-2);
}
.rows .yk,
.rows .fl,
.rows code {
  color: var(--accent-press);
}
.rows code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}
.rows .lu {
  color: var(--ink-3);
}
.rows b {
  font-weight: 600;
}
/* a passage that starts inside a row: a hairline underline in its tone */
.rows .ps {
  text-decoration: underline;
  text-decoration-color: var(--tone);
  text-decoration-thickness: var(--hair);
  text-underline-offset: var(--sp-1);
}
/* an edited run: greenline's words inside a taken row, linking its hunk */
.rows a.er {
  position: relative;
  background: var(--accent-mark);
  color: inherit;
  text-decoration: none;
  border-radius: var(--hair);
}
.rows a.er::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--sp-7);
  translate: 0 -50%;
}
.rows a.er:active {
  opacity: 0.7;
}
.rows ::selection {
  background: var(--accent-mark);
}
/* the notes: each passage's origin in full, outside the window, quiet and unframed; below 1320 one line above
 * the passage's first row on the page's ground, the window closing above and below it; beside it from 1320,
 * sticky within the passage */
.wh {
  display: block;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) calc(var(--sp-7) + var(--mark-w) + var(--sp-3));
}
.wh + .pr {
  border-block-start: var(--hair) solid var(--line);
}
.pg:has(+ .pg > .wh) > .pr {
  border-block-end: var(--hair) solid var(--line);
}
.whi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}
.wh a.w {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-inline-start: var(--sp-2);
  border-inline-start: var(--hair) solid var(--tone);
  font-size: var(--fs-1);
  line-height: var(--lh-head);
  color: var(--ink-3);
  text-decoration: none;
}
.wh a.w::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--sp-7);
  translate: 0 -50%;
}
.wh .sn {
  font-weight: 500;
}
/* the upstream file breaks only after a slash, never inside a word */
.wh .fp {
  font-size: var(--fs-0);
  overflow-wrap: normal;
}
.wh a.w:active {
  opacity: 0.7;
}
/* a jump to a passage lands on its rows, and the wash fades */
.pg:has(.w:target) > .pr {
  animation: land var(--t-4) var(--e-exit) var(--t-3) backwards;
}
.raw {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border: var(--hair) solid var(--line);
  border-block-start: 0;
  font-size: var(--fs-1);
}
.raw .dg {
  font-size: var(--fs-0);
  color: var(--ink-3);
}
/* the files a skill ships beside its text */
.copies ul {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2) 0 var(--sp-4) var(--sp-5);
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.copies .mono {
  font-size: var(--fs-1);
}

/* ---------- the edits: one card of hunks, red upstream over green shipped ---------- */
.kinds {
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-2);
  margin: 0 0 var(--sp-4);
}
.kinds div,
.flags div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
}
.kinds dt,
.flags dt {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--ink-1);
}
.kinds dt::after,
.flags dt::after {
  content: ":";
}
.kinds dd,
.flags dd {
  margin: 0;
  color: var(--ink-3);
}
.hunks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hunk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block-end: var(--sp-3);
  border-block-end: var(--hair) solid var(--line);
}
.hunk:last-child {
  border-block-end: 0;
}
.hh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--s2);
  font-size: var(--fs-1);
  font-weight: 500;
}
.hunk:first-child .hh {
  border-start-start-radius: var(--r-3);
  border-start-end-radius: var(--r-3);
}
.hh a {
  position: relative;
  font-weight: 400;
}
.hh a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--sp-7);
  translate: 0 -50%;
}
.hh a:active {
  opacity: 0.7;
}
.kc {
  background: var(--s2);
  color: var(--ink-3);
  border-radius: var(--r-1);
  padding: 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 400;
}
.hh .kc {
  background: var(--s1);
}
.hr {
  display: grid;
  grid-template-columns: var(--mark-w) var(--sp-7) minmax(0, 1fr);
}
.hr::before {
  content: attr(data-n) " " attr(data-s) / "";
  grid-column: 2;
  padding: var(--sp-1) var(--sp-3) 0 0;
  text-align: end;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-3);
  user-select: none;
}
.hr.del {
  background: var(--danger-tint);
  box-shadow: inset var(--mark-w) 0 0 var(--danger);
}
.hr.ins {
  background: var(--accent-tint);
  box-shadow: inset var(--mark-w) 0 0 var(--accent);
}
.hr > .t {
  grid-column: 3;
  margin: 0;
  padding: var(--sp-1) var(--sp-4) var(--sp-1) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: var(--lh-mono);
  color: var(--ink-2);
  white-space: pre-wrap;
}
.hr del {
  background: var(--danger-mark);
  color: var(--ink-1);
  text-decoration: none;
  border-radius: var(--hair);
}
.hr ins {
  background: var(--accent-mark);
  color: var(--ink-1);
  text-decoration: none;
  border-radius: var(--hair);
}
.hunk .gist {
  margin: 0;
  padding: var(--sp-2) var(--sp-4) 0;
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.hunk details {
  padding: 0 var(--sp-4);
}
.why {
  font-size: var(--fs-2);
  color: var(--ink-2);
}

/* ---------- details: a summary flex-centred at --sp-7 (law 17), the content fading in ---------- */
.ed summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--sp-7);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-2);
  color: var(--ink-1);
}
.ed summary::-webkit-details-marker {
  display: none;
}
.ed summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--ink-3);
}
.ed details[open] > summary::before {
  content: "-";
}
.ed summary:active {
  opacity: 0.7;
}
.ed details > :not(summary) {
  transition: opacity var(--t-2) var(--e-enter);
}
@starting-style {
  .ed details[open] > :not(summary) {
    opacity: 0;
  }
}

/* ---------- what greenline wrote, what it left out ---------- */
.wrote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
.wrote li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
}
.wrote p,
.cr {
  font-size: var(--fs-2);
}
.loc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.loc a,
.when a,
.kind a,
.row .nm a {
  position: relative;
}
.loc a::after,
.when a::after,
.kind a::after,
.row .nm a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--sp-7);
  translate: 0 -50%;
}
.left {
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--sp-9) * 8);
}
.covs {
  padding: var(--sp-2) var(--sp-5);
}
.covs h3:first-child {
  margin-block-start: var(--sp-3);
}
.cov.all {
  margin: 0;
  padding-block: var(--sp-3);
  font-size: var(--fs-2);
  color: var(--ink-3);
}
.cov ol {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2) 0 var(--sp-4) var(--sp-5);
  max-width: var(--measure);
}
.cov li {
  position: relative;
  color: var(--ink-3);
  font-size: var(--fs-2);
}
/* a left-out sentence: a hollow mark beside it, never red, never struck */
.cov li.lo::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--sp-4) * -1);
  top: var(--sp-2);
  inline-size: var(--sp-2);
  block-size: var(--sp-2);
  border: var(--hair) solid var(--ink-3);
  border-radius: var(--r-pill);
}
.cov li.tk {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.cov .lw {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-3);
}

/* ---------- the foot: the ledger entry and the pager ---------- */
.when {
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.rulings {
  counter-reset: ruling;
  display: grid;
  gap: var(--sp-2);
  padding-block-end: var(--sp-3);
}
.rulings li {
  counter-increment: ruling;
  display: grid;
  grid-template-columns: var(--sp-6) minmax(0, 1fr);
  font-size: var(--fs-2);
}
.rulings li::before {
  content: "R" counter(ruling);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
/* the entry's gist over its reason, its facts (the authorising ruling, the pages it touched), its earlier entries */
.ed section > p.gist {
  font-size: var(--fs-3);
  color: var(--ink-1);
}
.entry-facts {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-2);
  margin: var(--sp-3) 0 var(--sp-4);
}
.entry-facts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.entry-facts dt {
  color: var(--ink-3);
}
.entry-facts dd {
  margin: 0;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}
.entry-facts .mono,
.pg .mono {
  font-size: var(--fs-1);
}
.earlier-d .entries {
  padding-block-end: var(--sp-3);
}
.pg {
  font-size: var(--fs-1);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-7) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--line);
}
.pager a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}
.pager a:active,
.mini a:active,
.row .nm a:active,
.fed a:active,
.mergemap a:active,
.source .src:active,
.lineage a:active,
.raw a:active,
.loc a:active,
.when a:active,
.kind a:active,
.fhd h3 a:active {
  opacity: 0.7;
}
.pager .pos {
  font-size: var(--fs-0);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- the roster: the line in its own section, then starts and habits side by side ---------- */
/* one scale: the lead at --fs-4, headings --fs-3, rows --fs-1, shares --fs-0; --sp-8 between sections, --sp-5 inside */
.roster .tmpl {
  font-size: var(--fs-4);
}
.roster > section,
.roster > .cols {
  margin-block-start: var(--sp-8);
}
.roster h2 {
  margin: 0 0 var(--sp-5);
  padding-block-end: var(--sp-3);
  border-block-end: var(--hair) solid var(--line);
  font-size: var(--fs-3);
}
.roster .lead {
  margin: 0 0 var(--sp-5);
  max-inline-size: var(--measure);
}
.rkey {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.flags {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
}
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8) var(--sp-7);
}
/* a row: the name and its flag on the left, the bar and its shares on the right, the shares wrapping under the bar */
.row {
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  min-block-size: var(--sp-6);
  padding-block: var(--sp-1);
}
.row .nm {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
  min-width: 0;
}
.row .nm a {
  font-size: var(--fs-1);
}
.flag {
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.row .bs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  min-width: 0;
}
/* every row's bar one width, so the bars align; the shares beside it where they fit, under it where they do not */
.row .bar {
  flex: 0 1 calc(var(--sp-9) + var(--sp-7));
}
.shares {
  flex: 0 1 auto;
  font-size: var(--fs-0);
  line-height: var(--lh-head);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* the line: a vertical wire through the stations below 860, one horizontal wire from the gate to the change record above */
.wire-line {
  position: relative;
}
.gate,
.rec {
  display: none;
}
.line-sec .rows {
  position: relative;
  padding-inline-start: var(--sp-6);
}
.line-sec .rows::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--sp-3) - var(--hair));
  inset-block: var(--sp-4);
  inline-size: var(--seam);
  background: linear-gradient(var(--fern-deep), var(--accent));
}
.row.stn {
  position: relative;
}
.row.stn::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--sp-6) * -1 + var(--sp-3) - var(--sp-2) + var(--hair));
  top: calc(50% - var(--sp-2) + var(--hair));
  inline-size: calc(var(--sp-3) + var(--seam));
  block-size: calc(var(--sp-3) + var(--seam));
  border: var(--seam) solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--bg);
}
.row.stn.trial::before {
  border-style: dashed;
}
/* the retirement map, read left to right: the successor's square and name, a short wire, its retired rings */
.mergemap {
  display: grid;
  gap: var(--sp-4);
}
.mergemap li {
  display: grid;
  grid-template-columns: max-content var(--sp-6) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
}
.mergemap .rings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--sp-1) var(--sp-3);
}
.mergemap .ring,
.mergemap .sq {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-3);
}
.mergemap .ring::before {
  content: "";
  inline-size: var(--sp-2);
  block-size: var(--sp-2);
  border: var(--hair) solid var(--ink-3);
  border-radius: var(--r-pill);
}
.mergemap .wire {
  block-size: var(--hair);
  background: var(--line-2);
}
/* the successor's link keeps its --sp-7 target by a hit area, so the rows stand --sp-4 apart */
.mergemap .sq {
  position: relative;
  font-size: var(--fs-1);
  color: var(--accent);
}
.mergemap .sq::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--sp-7);
  translate: 0 -50%;
}
.mergemap .sq::before {
  content: "";
  inline-size: var(--sp-2);
  block-size: var(--sp-2);
  background: var(--accent);
}
.entries {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
.newest .why {
  font-size: var(--fs-2);
}

/* ---------- the sources colophon ---------- */
.colophon .key {
  font-size: var(--fs-2);
  color: var(--ink-3);
  margin: var(--sp-6) 0 0;
}
.group h2 {
  font-size: var(--fs-3);
  padding-bottom: var(--sp-3);
  border-bottom: var(--hair) solid var(--line);
  margin: var(--sp-7) 0 var(--sp-4);
}
.source {
  break-inside: avoid;
  margin: 0 0 var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
.source h3 {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: var(--fs-3);
}
.source h3 .sw {
  display: inline-block;
  inline-size: var(--sp-3);
  block-size: var(--sp-3);
  margin-inline-end: var(--sp-2);
  border-radius: var(--hair);
  background: var(--tone);
}
.source .src {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sp-7);
  font-size: var(--fs-1);
}
.fed {
  display: grid;
}
.fed li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--sp-3);
}
.fed a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}
.fed .num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* ---------- between pages: the bar is the shared element; nothing else moves ---------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-group(skill-bar) {
  animation-duration: var(--t-2);
  animation-timing-function: var(--e-move);
}
@media (prefers-reduced-motion: reduce) {
  .share {
    view-transition-name: none;
  }
}

/* ---------- widths ---------- */
@media (max-width: 640px) {
  .answer.card {
    padding: var(--sp-4);
  }
  .legend li {
    grid-template-columns: var(--sp-3) minmax(0, 1fr) auto;
  }
  .legend .up {
    grid-column: 2 / -1;
    grid-row: 2;
  }
  .r > .t {
    padding-inline-end: var(--sp-2);
  }
  .row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the retired rings under their successor, still read from the left */
  .mergemap li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-1);
  }
  .mergemap .wire {
    display: none;
  }
  .mergemap .rings {
    padding-inline-start: var(--sp-4);
  }
}
@media (max-width: 480px) {
  .edition {
    padding-inline: var(--sp-4);
  }
}
@media (min-width: 860px) {
  .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* the line drawn left to right: the gate ring and bar at the wire's head, the seven stations, the change record's square at its end */
  .wire-line {
    padding-inline: var(--sp-6);
  }
  .line-sec .rows {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--sp-3);
    padding-inline-start: 0;
  }
  .line-sec .rows::before {
    inset-inline: calc(var(--sp-6) * -1 + var(--sp-2));
    inset-block: calc(var(--sp-3) - var(--hair)) auto;
    inline-size: auto;
    block-size: var(--seam);
    background: linear-gradient(to right, var(--fern-deep), var(--accent));
  }
  .line-sec .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding-block: var(--sp-6) 0;
    text-align: center;
  }
  .line-sec .row .nm {
    justify-content: center;
  }
  .line-sec .row .bs {
    flex-direction: column;
    align-items: stretch;
    inline-size: 100%;
  }
  .line-sec .row .bar {
    flex: none;
  }
  .line-sec .row.stn::before {
    inset-inline-start: calc(50% - var(--sp-2) + var(--hair));
    top: calc(var(--sp-3) - var(--sp-2) + var(--hair));
  }
  .gate,
  .rec {
    display: block;
    position: absolute;
    top: calc(var(--sp-3) - var(--sp-2) + var(--hair));
    inline-size: calc(var(--sp-3) + var(--seam));
    block-size: calc(var(--sp-3) + var(--seam));
  }
  .gate {
    inset-inline-start: var(--sp-2);
    border: var(--seam) solid var(--accent);
    border-radius: var(--r-pill);
    background: var(--bg);
  }
  .gate::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--hair) - var(--sp-2));
    top: calc(var(--sp-1) - var(--hair));
    block-size: var(--seam);
    background: var(--accent);
  }
  .rec {
    inset-inline-end: var(--sp-2);
    background: var(--accent);
  }
  .colophon .entries {
    columns: 2;
    column-gap: var(--sp-7);
  }
  /* the legend in two columns, each source's pin under its name */
  .legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-5);
  }
  .legend li {
    grid-template-columns: var(--sp-3) minmax(0, 1fr) auto;
    row-gap: 0;
    padding-block: var(--sp-1);
  }
  .legend .up {
    grid-column: 2 / -1;
    grid-row: 2;
  }
}
@media (min-width: 1320px) {
  .edition {
    max-width: var(--rail-wide);
    grid-template-columns: 200px minmax(0, 1fr);
  }
  /* the roster in miniature: compact, grouped, no borders and no grounds; sticky while it fits the viewport */
  .edition > .mini {
    display: block;
    align-self: start;
  }
  .edition > .mini.stick {
    position: sticky;
    top: var(--sp-5);
  }
  .edition > .roster,
  .edition > .colophon {
    grid-column: 1 / -1;
  }
  .mini .mh {
    margin: var(--sp-4) 0 0;
    padding-block-start: var(--sp-2);
    border-block-start: var(--hair) solid var(--line);
    font-size: var(--fs-0);
    color: var(--ink-4);
  }
  .mini .mh:first-child {
    margin-block-start: 0;
  }
  .mini a {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: baseline;
    column-gap: var(--sp-2);
    min-block-size: var(--sp-6);
    padding-inline-start: var(--sp-3);
    font-size: var(--fs-1);
    line-height: var(--lh-head);
    color: var(--ink-2);
    text-decoration: none;
  }
  .mini a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--sp-7);
    translate: 0 -50%;
  }
  .mini a.on {
    color: var(--accent-press);
    font-weight: 500;
    box-shadow: inset var(--mark-w) 0 0 var(--accent);
  }
  .mini .mf {
    font-size: var(--fs-0);
    color: var(--ink-4);
  }
  .mini .mb {
    display: flex;
    flex-basis: 100%;
    gap: var(--seam);
    block-size: var(--seam);
    margin-block-start: var(--sp-1);
  }
  .mini .mb > i {
    flex-basis: 0;
    min-inline-size: var(--hair);
    background: var(--tone);
  }
  /* the notes leave the window: a column beside its frame, each group's notes at their first row */
  .pg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--notes-w);
    align-items: stretch;
  }
  .pr {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .wh {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 0 var(--sp-4);
  }
  /* beside the frame the notes no longer cut the window, so it runs unbroken */
  .wh + .pr {
    border-block-start: 0;
  }
  .pg:has(+ .pg > .wh) > .pr {
    border-block-end: 0;
  }
  .fhd {
    margin-inline-end: var(--notes-w);
  }
  .raw {
    margin-inline-end: var(--notes-w);
  }
  /* the group's notes stick together, so two never draw over each other */
  .whi {
    position: sticky;
    top: var(--sp-8);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--sp-3);
  }
}

/* ---------- segment widths: a segment's share of its bar, whole percent ---------- */
.g1 {
  flex-grow: 1;
}
.g2 {
  flex-grow: 2;
}
.g3 {
  flex-grow: 3;
}
.g4 {
  flex-grow: 4;
}
.g5 {
  flex-grow: 5;
}
.g6 {
  flex-grow: 6;
}
.g7 {
  flex-grow: 7;
}
.g8 {
  flex-grow: 8;
}
.g9 {
  flex-grow: 9;
}
.g10 {
  flex-grow: 10;
}
.g11 {
  flex-grow: 11;
}
.g12 {
  flex-grow: 12;
}
.g13 {
  flex-grow: 13;
}
.g14 {
  flex-grow: 14;
}
.g15 {
  flex-grow: 15;
}
.g16 {
  flex-grow: 16;
}
.g17 {
  flex-grow: 17;
}
.g18 {
  flex-grow: 18;
}
.g19 {
  flex-grow: 19;
}
.g20 {
  flex-grow: 20;
}
.g21 {
  flex-grow: 21;
}
.g22 {
  flex-grow: 22;
}
.g23 {
  flex-grow: 23;
}
.g24 {
  flex-grow: 24;
}
.g25 {
  flex-grow: 25;
}
.g26 {
  flex-grow: 26;
}
.g27 {
  flex-grow: 27;
}
.g28 {
  flex-grow: 28;
}
.g29 {
  flex-grow: 29;
}
.g30 {
  flex-grow: 30;
}
.g31 {
  flex-grow: 31;
}
.g32 {
  flex-grow: 32;
}
.g33 {
  flex-grow: 33;
}
.g34 {
  flex-grow: 34;
}
.g35 {
  flex-grow: 35;
}
.g36 {
  flex-grow: 36;
}
.g37 {
  flex-grow: 37;
}
.g38 {
  flex-grow: 38;
}
.g39 {
  flex-grow: 39;
}
.g40 {
  flex-grow: 40;
}
.g41 {
  flex-grow: 41;
}
.g42 {
  flex-grow: 42;
}
.g43 {
  flex-grow: 43;
}
.g44 {
  flex-grow: 44;
}
.g45 {
  flex-grow: 45;
}
.g46 {
  flex-grow: 46;
}
.g47 {
  flex-grow: 47;
}
.g48 {
  flex-grow: 48;
}
.g49 {
  flex-grow: 49;
}
.g50 {
  flex-grow: 50;
}
.g51 {
  flex-grow: 51;
}
.g52 {
  flex-grow: 52;
}
.g53 {
  flex-grow: 53;
}
.g54 {
  flex-grow: 54;
}
.g55 {
  flex-grow: 55;
}
.g56 {
  flex-grow: 56;
}
.g57 {
  flex-grow: 57;
}
.g58 {
  flex-grow: 58;
}
.g59 {
  flex-grow: 59;
}
.g60 {
  flex-grow: 60;
}
.g61 {
  flex-grow: 61;
}
.g62 {
  flex-grow: 62;
}
.g63 {
  flex-grow: 63;
}
.g64 {
  flex-grow: 64;
}
.g65 {
  flex-grow: 65;
}
.g66 {
  flex-grow: 66;
}
.g67 {
  flex-grow: 67;
}
.g68 {
  flex-grow: 68;
}
.g69 {
  flex-grow: 69;
}
.g70 {
  flex-grow: 70;
}
.g71 {
  flex-grow: 71;
}
.g72 {
  flex-grow: 72;
}
.g73 {
  flex-grow: 73;
}
.g74 {
  flex-grow: 74;
}
.g75 {
  flex-grow: 75;
}
.g76 {
  flex-grow: 76;
}
.g77 {
  flex-grow: 77;
}
.g78 {
  flex-grow: 78;
}
.g79 {
  flex-grow: 79;
}
.g80 {
  flex-grow: 80;
}
.g81 {
  flex-grow: 81;
}
.g82 {
  flex-grow: 82;
}
.g83 {
  flex-grow: 83;
}
.g84 {
  flex-grow: 84;
}
.g85 {
  flex-grow: 85;
}
.g86 {
  flex-grow: 86;
}
.g87 {
  flex-grow: 87;
}
.g88 {
  flex-grow: 88;
}
.g89 {
  flex-grow: 89;
}
.g90 {
  flex-grow: 90;
}
.g91 {
  flex-grow: 91;
}
.g92 {
  flex-grow: 92;
}
.g93 {
  flex-grow: 93;
}
.g94 {
  flex-grow: 94;
}
.g95 {
  flex-grow: 95;
}
.g96 {
  flex-grow: 96;
}
.g97 {
  flex-grow: 97;
}
.g98 {
  flex-grow: 98;
}
.g99 {
  flex-grow: 99;
}
.g100 {
  flex-grow: 100;
}