/* eval catalog — what only the catalog needs, on the eval-harness site's tokens (style.css). */

/* header search */
.search { position: relative; flex: 1; max-width: 420px; }
.search input { width: 100%; font: 500 13px/1 var(--mono); color: var(--ink); background: var(--surface);
  border: 1px solid var(--hair); border-radius: 999px; padding: 10px 16px; outline: none; }
.search input:focus { border-color: var(--accent); }
#hits { position: absolute; top: 44px; left: 0; right: 0; max-height: 70vh; overflow-y: auto; z-index: 20;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
#hits a { display: grid; grid-template-columns: 96px 1fr; gap: 2px 12px; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-size: 14px; }
#hits a:hover { background: var(--surface-2); }
#hits a .k { grid-row: span 2; font: 500 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#hits a small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hits p { margin: 10px 12px; color: var(--muted); }
@media (max-width: 760px) { .search { max-width: none; } .nav .hide-sm { display: none; } }

/* slimmer heroes and blocks: a catalog page holds a lot, so less air than the story site */
.hero.slim { padding: 64px 0 48px; }
.hero.slim h1 { font-size: clamp(34px, 5.5vw, 72px); max-width: 22ch; overflow-wrap: anywhere; margin: 18px 0 22px; }
.hero.slim .facts { margin-top: 36px; }
.hero.slim .btns { margin-top: 28px; }
section.block.tight { padding: 56px 0; }
section.block.tight h2 { font-size: clamp(28px, 4vw, 48px); }
.block .eyebrow { margin-bottom: 22px; }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover .n { color: var(--accent); }
kbd { font: 600 .85em var(--mono); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px; }

/* tables */
.filter { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: 500 12px/1 var(--mono); color: var(--muted); }
.filter input { flex: 1; max-width: 420px; font: 500 13px/1 var(--mono); color: var(--ink); background: var(--surface);
  border: 1px solid var(--hair); border-radius: 10px; padding: 10px 14px; outline: none; }
.filter input:focus { border-color: var(--accent); }
.filter b { color: var(--ink); }
table.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
/* A head's second line (an axis's limit) wraps: on one line it ran past the table's edge. */
table.sortable th small { display: block; white-space: normal; font-weight: 400; text-transform: none; }
table.sortable th[data-dir="asc"]::after { content: " ↑"; color: var(--accent); }
table.sortable th[data-dir="desc"]::after { content: " ↓"; color: var(--accent); }
table.data td { padding: 10px 12px 10px 0; font-size: 14px; }
table.data td.mono { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
table.data td.small, .small { font-size: 13px; color: var(--ink-2); }
table.data td small, table.data th small { color: var(--muted); font-size: 11px; text-transform: none; letter-spacing: 0; }
.muted { color: var(--muted); }
a.raw { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
a.raw:hover { color: var(--accent); }

/* chips */
.chip { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .04em; padding: 5px 9px; margin: 0 4px 4px 0;
  border: 1px solid var(--hair); border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.chip b { color: var(--accent); margin-left: 4px; }
.chip.silver { border-color: var(--baseline); }
.chip.gold { border-color: var(--accent); color: var(--ink); }
.chip.link { text-decoration: none; }
.chip.link:hover { border-color: var(--accent); color: var(--ink); }
.chips { line-height: 2.2; }

/* lists */
.replist { list-style: none; padding: 0; margin: 0; }
.replist li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.replist li span { font: 500 12px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.cols2 h3 { font-size: 22px; margin-bottom: 12px; }
@media (max-width: 860px) { .cols2 { grid-template-columns: 1fr; } }

/* rendered markdown */
section.doc { padding: 56px 0 96px; }
section.doc .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; }
section.doc .kicker { grid-column: 1 / -1; }
.mentions { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.mentions .eyebrow { margin-bottom: 14px; }
article.md { grid-column: 1; grid-row: 2; min-width: 0; }
@media (max-width: 960px) { section.doc .wrap { grid-template-columns: 1fr; } .mentions { grid-column: 1; grid-row: 3; position: static; max-height: none; } }
.md { max-width: 78ch; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.md h1 { font-size: clamp(32px, 4.5vw, 54px); line-height: 1; font-weight: 800; color: var(--ink); margin: 0 0 28px; }
.md h2 { font-size: 30px; color: var(--ink); margin: 48px 0 16px; }
.md h3 { font-size: 21px; color: var(--ink); margin: 32px 0 12px; }
.md strong { color: var(--ink); }
.md code { font: .88em var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.md pre { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 16px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { border-left: 2px solid var(--accent); margin: 0 0 18px; padding: 2px 0 2px 18px; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 14px; margin: 0 0 24px; }
.md th { text-align: left; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--hair); }
.md td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.md li { margin: 4px 0; }
footer code { font: .9em var(--mono); }

/* long ids never widen the page: grid children may shrink, list links wrap anywhere */
.cols2 > div { min-width: 0; }
.replist li { min-width: 0; }
.replist li > a, .replist li.mono { min-width: 0; overflow-wrap: anywhere; }
.replist li span { flex: none; }
.search { min-width: 0; }

/* The parts of the publication (--link): one switcher, the catalog marked. The same control heads
   the site and the docs of a deployment that has them. */
.sections { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--hair);
  border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .03em; }
.sections a { padding: 7px 11px; border-radius: 999px; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.sections a:hover { color: var(--ink); background: var(--surface-2); }
.sections a[aria-current="page"] { color: var(--page); background: var(--ink); }

/* Phones: the catalog's pages in a ☰ dropdown (<details>, no script), every link in it. */
.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; font: 400 17px/1 var(--mono); color: var(--ink);
  width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--accent); }
.menu-links { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: flex;
  flex-direction: column; min-width: 200px; padding: 6px; background: var(--surface);
  border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.menu-links a { padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--ink);
  font: 500 14px/1.2 var(--mono); }
.menu-links a:hover, .menu-links a[aria-current="page"] { background: var(--surface-2); }
.menu-links .menu-group { padding: 10px 14px 2px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.menu-links .menu-sub { display: flex; flex-direction: column; }
.menu-links .menu-sub a { padding-left: 24px; }

/* The menu's groups by subject (Data, Arms): a name that opens its pages below it; the
   group a page belongs to is marked like a current page (catalog.js closes it on a click outside). */
.navgroup { position: relative; }
.navgroup > summary { list-style: none; cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); vertical-align: 3px; }
.navgroup[open] > summary::after { transform: rotate(-135deg); vertical-align: 0; }
.navgroup > summary:hover { color: var(--accent); }
.navgroup > summary[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.navlist { position: absolute; left: -10px; top: calc(100% + 12px); z-index: 30; display: flex; flex-direction: column; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.navlist a { padding: 10px 12px; border-radius: 8px; }
.navlist a:hover, .navlist a[aria-current="page"] { background: var(--surface-2); text-decoration: none; }

/* phones: ☰, the logo, the switcher, search and the theme on one row (as on the site); the
   search button opens the search on a row below it (catalog.js) */
.bar .search-btn { display: none; }
@media (max-width: 760px) {
  .bar .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .bar .search { display: none; order: 9; flex: 1 0 100%; max-width: none; }
  .bar.searching .search { display: block; }
  .bar .nav { display: none; }
  .bar .menu { display: block; order: -1; }
  .bar .menu .menu-links { left: 0; right: auto; }
  .bar .sections { margin-right: auto; }
  .bar .search-btn { display: grid; order: 2; }
  .bar.searching .search-btn { color: var(--accent); border-color: var(--accent); }
  .bar .theme { flex: none; order: 3; margin-left: 0; }
  .hero.slim { padding: 40px 0 32px; }
}

.md code { overflow-wrap: anywhere; }
.md p, .md li { overflow-wrap: break-word; }
.mentions .chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
/* table cells break between words, never inside an id: a narrow screen scrolls the table sideways
   instead of squeezing a name to a letter per line; running text keeps a readable width */
.scroll-x > table.data td, .scroll-x > table.data td.mono, .scroll-x > table.data a.cell-link,
.block .scroll-x > table.data code { overflow-wrap: normal; }
@media (max-width: 760px) { table.data td.prose { min-width: 24ch; } }

.derived { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border: 1px dashed var(--axis); border-radius: 999px; padding: 3px 7px; vertical-align: middle; white-space: nowrap; }

/* inspector */
.pick { margin-top: 28px; }
.pickchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.pickchip button { background: none; border: 0; color: var(--muted); cursor: pointer; font: 600 14px/1 var(--mono); padding: 0 2px; }
.pickchip button:hover { color: var(--ink); }
.pick .filter { margin-top: 14px; }
.controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 26px; font: 500 12px/1 var(--mono); color: var(--muted); }
.controls select { font: 500 13px/1 var(--mono); color: var(--ink); background: var(--surface); border: 1px solid var(--hair);
  border-radius: 10px; padding: 9px 12px; margin-left: 8px; max-width: 46ch; }
.controls .tick input { margin-right: 6px; vertical-align: middle; }
/* The field filter (ADR-0003): picker, value and button wrap onto the next line on a phone. */
.controls .filter { flex-wrap: wrap; margin-bottom: 0; }
.controls .filter input, .controls .filter select { max-width: 100%; }
.eyebrow.gap { margin-top: 48px; }
.chip.v-better { border-color: var(--open); color: var(--ink); }
.chip.v-worse { border-color: var(--local); color: var(--ink); }
.up { color: var(--open); } .down { color: var(--local); }
table.eps th.isbase { color: var(--ink); }
tr.eprow { cursor: pointer; } tr.eprow:hover td { background: var(--surface); } tr.eprow.on td { background: var(--surface-2); }
.outgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 18px; margin-top: 18px; }
.outcol { border: 1px solid var(--hair); border-radius: 14px; padding: 18px; background: var(--surface); min-width: 0; }
.outcol h3 { font-size: 15px; font-family: var(--mono); letter-spacing: 0; margin-bottom: 10px; overflow-wrap: anywhere; }
.refcol { border-style: dashed; }
.outtext { font-size: 14px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.outtext ins, .small ins { text-decoration: none; background: color-mix(in srgb, var(--open) 22%, transparent); color: var(--ink); }
.outtext del, .small del { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--local); }
.outlist { font-size: 14px; line-height: 1.5; color: var(--ink-2); padding-left: 20px; }
.outlist li { margin-bottom: 6px; overflow-wrap: anywhere; }
table.eps td:first-child, table.eps th:first-child { white-space: nowrap; }
/* phones: a long item id (a 40-character hash) shows its start, so the scores stay on screen;
   the whole id is the cell's title and heads the outputs when the row is opened */
@media (max-width: 760px) { table.eps td:first-child { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; } }
/* an eyebrow that names an item can carry a long id: it wraps instead of widening the page */
.eyebrow { overflow-wrap: anywhere; min-width: 0; }
.pickchip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
footer code { padding: 0 4px; margin: 0; display: inline; letter-spacing: 0; }

/* a workspace, not a showcase: compact headers everywhere, a jump page at home */
.hero.slim { padding: 36px 0 28px; }
.hero.slim h1 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.02em; margin: 10px 0 12px; max-width: none; }
.hero.slim .dek { font-size: 16px; max-width: 90ch; }
.hero .about { margin-top: 14px; max-width: 90ch; padding: 4px 0 4px 16px; border-left: 2px solid var(--accent); color: var(--ink-2); font-size: 15px; }
.hero .about p { margin: 0; }
.hero .about p + p { margin-top: 8px; }
.hero.slim .facts { margin-top: 22px; }
.hero.slim .btns { margin-top: 18px; }
.hero::before { opacity: .35; }
section.block.tight { padding: 32px 0; }
.jumphead { padding: 28px 0 8px; border-bottom: 1px solid var(--hair); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.jump a { font: 500 13px/1 var(--mono); padding: 10px 14px; border: 1px solid var(--hair); border-radius: 10px;
  text-decoration: none; color: var(--ink); background: var(--surface); }
.jump a:hover { border-color: var(--accent); }
.hero.slim .jump { margin-bottom: 0; }

/* inspector charts: the dataviz reference categorical order, validated on these surfaces */
:root { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948; } }
:root[data-theme="light"] { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948; }
#app figure.chart { margin: 0 0 22px; padding: 18px 18px 8px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); }
#app figure.chart figcaption { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
#app figure.chart figcaption b { color: var(--ink); font-weight: 600; }
#app figure.chart select { font: 500 12px/1 var(--mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 4px 6px; }
#app svg { width: 100%; min-width: 680px; height: auto; display: block; }
#app svg .grid { stroke: var(--hair); stroke-width: 1; }
#app svg .tick, #app svg .axl { fill: var(--muted); font: 11px var(--mono); }
#app svg .rl { fill: var(--ink-2); font: 12px var(--mono); }
#app svg .rv { fill: var(--ink-2); font: 12px var(--mono); }
#app svg .dot { stroke: var(--surface); stroke-width: 1.5; opacity: .9; }
#app svg .dot:hover { opacity: 1; stroke: var(--ink); }
#app svg .meanmark { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
#app svg .basemean { stroke: var(--baseline); stroke-width: 1.5; stroke-dasharray: 4 4; }
#app svg .zero { stroke: var(--axis); stroke-width: 1.5; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 12px var(--mono); color: var(--ink-2); margin: 0 0 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
#ctip { position: fixed; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .1s; background: var(--surface-2);
  border: 1px solid var(--hair); border-radius: 8px; padding: 6px 9px; font: 12px var(--mono); color: var(--ink); max-width: 420px; }
#ctip.on { opacity: 1; }
/* baseline page: runs against the baseline */
#forest svg .ci { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
#forest svg .pt { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
#forest svg .pt.sep { fill: var(--s1); stroke: var(--surface); }
#forest svg .hit { fill: transparent; }
#forest svg .frow:hover .hit { fill: var(--surface-2); }
#forest svg .frow:hover .rl { fill: var(--ink); text-decoration: underline; }
#forest svg { width: 100%; min-width: 680px; height: auto; display: block; }
#forest svg .grid { stroke: var(--hair); }
#forest svg .tick { fill: var(--muted); font: 11px var(--mono); }
#forest svg .rl, #forest svg .rv { fill: var(--ink-2); font: 12px var(--mono); }
#forest svg .zero { stroke: var(--baseline); stroke-width: 1.5; stroke-dasharray: 4 4; }
#forest figure.chart, .refchart figure.chart { margin: 0 0 22px; padding: 18px 18px 8px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); }
#forest figcaption, .refchart figcaption { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
#forest figcaption b, .refchart figcaption b { color: var(--ink); font-weight: 600; }
#forest select { max-width: 100%; font: 500 12px/1 var(--mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 4px 6px; }
.refchart svg { width: 100%; height: auto; display: block; max-width: 760px; }
.refchart svg .grid { stroke: var(--hair); }
.refchart svg .tick, .refchart svg .axl { fill: var(--muted); font: 11px var(--mono); }
.refchart svg .diag { stroke: var(--baseline); stroke-dasharray: 4 4; }
.refchart svg .pt { fill: var(--s1); stroke: var(--surface); stroke-width: 1.5; }
.refchart svg .pt:hover { stroke: var(--ink); }
.refchart.ceiling svg { max-width: none; min-width: 680px; }
.refchart svg .rl, .refchart svg .rv { fill: var(--ink-2); font: 12px var(--mono); }
.refchart svg .meanmark { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.refchart svg .runspan { stroke: var(--s2); stroke-width: 6; stroke-linecap: round; opacity: .8; }
.refchart svg .runtick { stroke: var(--ink-2); stroke-width: 2; }
.refchart svg .runtick:hover { stroke: var(--ink); stroke-width: 3; }
#forest svg .range { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 2 3; }
#forest svg .pt.good { fill: var(--s3); stroke: var(--surface); }
#forest svg .pt.bad { fill: var(--s2); stroke: var(--surface); }
#forest svg .gl { fill: var(--muted); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
#forest .fnotes { margin: 4px 0 10px; font-size: 13px; color: var(--ink-2); }
#forest .fnotes summary { cursor: pointer; color: var(--ink); }
#forest .fnotes li { margin: 4px 0; overflow-wrap: anywhere; }
/* goals */
h3.sub { font: 600 15px/1.3 var(--sans, inherit); margin: 22px 0 8px; color: var(--ink); }
h3.sub small { font-weight: 400; color: var(--muted); }
ul.crit { margin: 12px 0 0 18px; color: var(--ink-2); }
ul.crit li { margin: 4px 0; }
.goalrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 10px; }
.goalrow .k { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 220px; }
.goalchip { display: inline-flex; flex-direction: column; padding: 6px 10px; border: 1px solid var(--hair); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--surface); }
.goalchip small { color: var(--muted); font: 11px var(--mono); }
.goalchip:hover { border-color: var(--ink-2); }
.pinned { margin: 12px 0 0; font-size: 14px; }
/* long ids and paths wrap instead of widening the page */
.replist li { flex-wrap: wrap; }
.replist li > * { min-width: 0; overflow-wrap: anywhere; }
.block p small, .block .note, .block li, .fact .v { overflow-wrap: anywhere; }
.block code { overflow-wrap: anywhere; }
#app svg .faded .dot { opacity: .45; }
#app svg .centroid path { stroke-width: 3.5; stroke-linecap: round; }
#app svg .centroid .cl { fill: var(--ink); font: 600 11px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.refchart svg .ptl { fill: var(--ink-2); font: 10px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

/* accessibility (review F13). Muted text at >= 4.5:1 on every surface; light-mode series colours
   at >= 3:1 against the surface (validated with the dataviz palette checker); a visible focus ring. */
:root { --muted: #8a8880; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --muted: #66645e; --baseline: #85837b;
  --s1: #2a78d6; --s2: #d4562a; --s3: #148c60; --s4: #a87300; --s5: #c4508a; --s6: #007a00; --s7: #6250d6; --s8: #d63c3c; } }
:root[data-theme="light"] {
  --muted: #66645e; --baseline: #85837b;
  --s1: #2a78d6; --s2: #d4562a; --s3: #148c60; --s4: #a87300; --s5: #c4508a; --s6: #007a00; --s7: #6250d6; --s8: #d63c3c; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
tr.eprow:focus-visible { outline-offset: -2px; }

/* phones: charts draw in a narrow layout (labels above rows), so they fit instead of scrolling */
@media (max-width: 700px) { #app svg, #forest svg, .refchart.ceiling svg { min-width: 0; } }
/* key / value list (goal pages): labels in the muted mono, values in body text */
dl.kv { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 10px 24px; margin: 0; }
dl.kv dt { font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
dl.kv dd { margin: 0; }
@media (max-width: 700px) { dl.kv { grid-template-columns: 1fr; gap: 2px; } dl.kv dd { margin-bottom: 10px; } }

/* actions: compact, tinted with the accent, sized to sit in a table row */
.btns { gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px;
  font: 600 12px/1.2 var(--mono); letter-spacing: .02em; color: var(--ink); white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--hair)); transition: background .12s, border-color .12s; }
a.btn::after { content: "→"; color: var(--accent); font-weight: 400; }
/* a long action outside a table row wraps instead of widening a phone's page */
p > .btn, .btns > .btn { white-space: normal; max-width: 100%; }
.btn:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 24%, var(--surface)); border-color: var(--accent); }
.btn.small { padding: 4px 10px; font-size: 11px; border-radius: 6px; }
table.data td { vertical-align: middle; }

/* links inside table cells: a metric's explanation, a reference's page */
a.cell-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 3px; overflow-wrap: anywhere; }
a.cell-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* rows by what their scores are measured against; gold rows stay plain */
tr.t-silver td { background: color-mix(in srgb, var(--baseline) 12%, transparent); }
tr.t-judged td { background: color-mix(in srgb, var(--proprietary) 10%, transparent); }
tr.t-author td { background: color-mix(in srgb, var(--local) 12%, transparent); }
tr.t-silver td:first-child { box-shadow: inset 3px 0 0 var(--baseline); padding-left: 10px; }
tr.t-judged td:first-child { box-shadow: inset 3px 0 0 var(--proprietary); padding-left: 10px; }
tr.t-author td:first-child { box-shadow: inset 3px 0 0 var(--local); padding-left: 10px; }
.rowkey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font: 12px var(--mono); }
.rowkey .key { padding-left: 10px; box-shadow: inset 3px 0 0 var(--baseline); }
.rowkey .key.t-judged { box-shadow: inset 3px 0 0 var(--proprietary); }
.rowkey .key.t-author { box-shadow: inset 3px 0 0 var(--local); }
.nowrap { white-space: nowrap; }
.block code.nowrap { overflow-wrap: normal; }
/* conditions: a field that differs from the baseline's value */
table.conds td.diff { color: var(--ink); background: color-mix(in srgb, var(--local) 14%, transparent); }
p.conds { margin: 10px 0 0; }
/* paging (catalog.js): rows past the page are hidden, the bar says how many and offers more */
tr.paged-out { display: none; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.pager[hidden] { display: none; }
/* the inspector's item view: the item itself, above the outputs */
details.srcbox { margin: 12px 0 16px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); }
details.srcbox summary { cursor: pointer; font: 600 13px/1.4 var(--mono); }
details.srcbox .outtext { margin-top: 10px; white-space: pre-wrap; max-height: 420px; overflow: auto; }
/* the goal page's answer, and the baseline tag on its row */
.answer { padding: 14px 18px; margin: 0 0 12px; border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); }
.answer p { margin: 4px 0; }
.answer .lead { font-size: 18px; }
.tag-base { font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px;
  color: var(--accent-ink); background: var(--accent); vertical-align: 1px; }
/* a goal's rounds: the open one marked; each round's details folded; suggested commands copyable */
tr.t-open td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
tr.t-open td:first-child { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
details.rounddetail { margin: 12px 0; padding: 8px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); }
details.rounddetail summary { cursor: pointer; font: 600 13px/1.4 var(--mono); }
.roundcards { display: grid; gap: 8px; }
.rc-head, details.roundcard > summary { display: grid; grid-template-columns: 9ch minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rc-head { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 14px; }
details.roundcard { border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); }
details.roundcard.t-open { border-left: 3px solid var(--accent); }
details.roundcard > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
details.roundcard > summary::-webkit-details-marker { display: none; }
details.roundcard > summary .rc-round::before { content: "▸ "; color: var(--muted); }
details.roundcard[open] > summary .rc-round::before { content: "▾ "; }
details.roundcard .rc-arms, details.roundcard .rc-arms a { overflow-wrap: anywhere; }
details.roundcard .rc-h { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
details.roundcard .rc-body ul { margin: 0; padding-left: 20px; }
details.roundcard .rc-body { padding: 0 14px 12px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.55; }
@media (max-width: 760px) { .rc-head { display: none; } details.roundcard > summary { grid-template-columns: 1fr; gap: 6px; } }
tr.t-retired td { opacity: 0.55; }
button.copy { margin-left: 6px; cursor: pointer; }
ul.suggest code.cmd { display: inline-block; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; user-select: all; overflow-wrap: anywhere; }
small.retired { color: var(--local); font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }

/* a heading scrolled to sits below the sticky header, not under it */
[id] { scroll-margin-top: 84px; }

/* home: the catalog at a glance */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin: 22px 0 6px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; min-width: 0; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); }
.tile b { font: 600 22px/1.2 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* a long count (19,534,609) in short form (19.5M) where three tiles share a phone's row */
.tile .short { display: none; }
@media (max-width: 560px) { .tile .full { display: none; } .tile .short { display: inline; } }
/* the number's own type, not the tile's label's (.tile span) */
.tile b span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.tile span { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* A tile's colour (--c) is its subject's (catalog_periods.TILES): goals, data, arms, work
   and spend. It says what a tile is about, never a judgement: a trend is tinted in it whichever
   way it goes. The legend under the tiles names the four. */
.tile { --c: var(--muted); border-top: 3px solid var(--c); }
[data-group="goals"] { --c: var(--s7); }
[data-group="data"] { --c: var(--s1); }
[data-group="arms"] { --c: var(--s3); }
[data-group="work"] { --c: var(--s4); }
.legend.groups i { background: var(--c); }
.tile:hover, .tile:focus-visible { border-color: var(--c); }
.tile small.trend { align-self: flex-start; margin-top: 4px; padding: 1px 7px; border-radius: 999px; font: 500 11px/1.5 var(--mono); color: var(--ink-2); background: color-mix(in srgb, var(--c) 16%, transparent); }
.tile small.trend:empty { display: none; }
.tile svg.spark { width: 100%; height: 22px; margin-top: auto; padding-top: 8px; display: block; }
/* a long count in short form wherever its tile is narrow, not only on phones */
.tile { container-type: inline-size; }
@container (max-width: 150px) { .tile .full { display: none; } .tile .short { display: inline; } }
/* the period: chips, then one line saying what the trends compare with (its title has the dates) */
.period-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 12px/1 var(--mono); padding: 7px 11px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.chip:hover, .chip:focus-visible { color: var(--ink); border-color: var(--accent); }
.chip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.period-note { margin: 0; font: 12px var(--mono); color: var(--muted); }
.period-switch + .tiles { margin-top: 14px; }
/* a phone: the chips scroll sideways in one row instead of taking four */
@media (max-width: 560px) { .chips, .row-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px; } }
/* the period on a table: its rows' subject colour (the home tiles' groups), the new badge, a trend
   beside an in-period number, and the all / new / active chips over it */
#datasets, #references { --c: var(--s1); }
#goals { --c: var(--s7); }
#metrics, #arms, #configs { --c: var(--s3); }
.row-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.row-chips .chip b { font-weight: 600; margin-left: 4px; color: var(--ink); }
.row-chips .chip[aria-pressed="true"] b { color: inherit; }
span.new { display: inline-block; padding: 0 6px; border-radius: 999px; font: 600 10px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: color-mix(in srgb, var(--c, var(--accent)) 22%, transparent); vertical-align: 1px; }
table.data small.trend { margin-left: 4px; padding: 0 6px; border-radius: 999px; font: 500 11px/1.5 var(--mono); color: var(--ink-2); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); white-space: nowrap; }
tr.pout { display: none; }
figure.chart { margin: 8px 0 16px; overflow-x: auto; }
figure.chart svg { width: 100%; min-width: 420px; height: auto; display: block; }
figure.chart svg .tick { font: 11px var(--mono); fill: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; font: 12px var(--mono); color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
details.inline { display: inline; }
details.inline summary { cursor: pointer; color: var(--accent); }
details.inline[open] summary { margin-bottom: 4px; }
small.filed { font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
#glance td:nth-child(2), #glance td:nth-child(3), #coverage td:first-child { white-space: nowrap; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; align-items: start; }
.duo > div { min-width: 0; }
.duo figure.chart svg { min-width: 300px; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }
.unit-switch { display: flex; gap: 8px; margin: 0 0 6px; }
.unit-switch button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); }
.decision { padding: 12px 16px; margin: 6px 0 12px; border: 1px solid var(--hair); border-left: 3px solid var(--s1); border-radius: 10px; background: var(--surface); }
.decision p { margin: 4px 0; }
.decision ul { margin: 6px 0; padding-left: 18px; }
/* An id breaks after an underscore (<wbr>), mid-word only when one part cannot fit: "anywhere" broke "orrery_tr|iage". */
#datasets td, #datasets td a { overflow-wrap: break-word; white-space: normal; }
span.tag { display: block; width: fit-content; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/1.5 var(--mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 0 7px; margin: 2px 0; }
span.tag b { font-weight: 400; color: var(--muted); }
span.tag-rec { font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--s1); padding: 2px 5px; border-radius: 4px; }
span.over { color: var(--local); font-weight: 600; }
figure.chart figcaption { margin-top: 4px; }
/* A point's name stays readable where a line crosses it: a halo in the chart's own colour. */
svg text.name { paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }

/* The legend's swatches, one class per series slot (catalog_charts.swatch): no inline styles. */
.legend i.sw1 { background: var(--s1); }
.legend i.sw2 { background: var(--s2); }
.legend i.sw3 { background: var(--s3); }
.legend i.sw4 { background: var(--s4); }
.legend i.sw5 { background: var(--s5); }
.legend i.sw6 { background: var(--s6); }
.legend i.sw7 { background: var(--s7); }
.legend i.sw8 { background: var(--s8); }
.legend i.swm { background: var(--muted); }
/* a legend entry's tag ("baseline") stays one word; the entry wraps around it */
.legend small { overflow-wrap: normal; white-space: nowrap; }
.legend span { flex-wrap: wrap; max-width: 100%; }

/* ── the bar: one geometry on the site, in the catalog and in the docs ──────────────────
   (site/assets/style.css, harness/catalog_assets/catalog.css and docs/assets/docs.css carry the
   same numbers): 56 px high; ☰ on narrow screens, the logo, the switcher, then search and the
   theme as 36 px round buttons, 8 px apart, so moving between the three moves nothing. */
.bar .wrap { height: 56px; gap: 8px; }
.hbtn, .menu > summary.hbtn { box-sizing: border-box; flex: none; width: 36px; height: 36px; display: grid;
  place-items: center; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; text-decoration: none; font-size: 0; }
.hbtn:hover { color: var(--accent); border-color: var(--accent); }
.hbtn svg { display: block; width: 16px; height: 16px; }
.menu[open] > summary.hbtn { color: var(--accent); border-color: var(--accent); }
.bar .sections { gap: 2px; padding: 3px; font: 500 12px/1 var(--mono); letter-spacing: .03em; }
.bar .sections a { padding: 8px 10px; }
.bar .brand { gap: 10px; }
.bar .brand .proj { font-weight: 400; color: var(--muted); }
@media (max-width: 1080px) { .bar:has(.sections) .brand span { display: none; } }
@media (max-width: 760px) { .bar .sections a { padding: 8px 6px; } }
@media (max-width: 374px) {
  .bar .wrap { gap: 6px; }
  .hbtn, .menu > summary.hbtn { width: 34px; height: 34px; }
  .bar .sections a { padding: 8px 4px; }
}
.rowline { display: block; width: 96px; height: 18px; }
#goals td:first-child { min-width: 18ch; }
#goals td:nth-child(2) { min-width: 26ch; }
/* "runs in period" and its kind wrap rather than push the table wider than the page */
table[data-period-rows] th { white-space: normal; min-width: 7ch; }
select.chip.more.on { color: var(--accent-ink); background-color: var(--accent); border-color: var(--accent); }
select.chip.more { padding-right: 8px; max-width: 100%; text-overflow: ellipsis; }
#actds, #actarms, #actkinds { --c: var(--s4); }
/* the arms page: a derived arm under the arm it came from, the role badges, group headings, the compare bar */
span.role { display: inline-block; margin: 0 4px 2px 0; padding: 0 6px; border-radius: 999px; font: 500 10px/1.6 var(--mono); color: var(--ink-2); background: color-mix(in srgb, var(--s3) 18%, transparent); white-space: nowrap; }
tr.grouphead td { padding-top: 18px; border-bottom: 1px solid var(--hair); }
tr.fout { display: none; }
.arm-tools { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.group-chips span.muted, .facet-chips span.muted { align-self: center; margin-right: 4px; }
.compare-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); }
.compare-bar a.disabled { opacity: .45; pointer-events: none; }
input.pick { width: 16px; height: 16px; accent-color: var(--accent); }
.compare-bar[hidden] { display: none; }
[data-line] svg.rowline { margin-top: 4px; width: 84px; }
#arms td:nth-child(5), #configs td:nth-child(2) { min-width: 16ch; }
#arms td:nth-child(2) { min-width: 18ch; }
/* The footer's "this page elsewhere": a long tool call wraps inside the footer, never past a phone's edge. */
footer .elsewhere code { overflow-wrap: anywhere; }
/* MCP, the switcher's fourth entry, leaves the bar on phones, as on the site. */
@media (max-width: 560px) { .bar .sections a[href$="#mcp"] { display: none; } }

/* RFC-023: a reference's tier is a pill in its own colour; a label set's source is a chip in a neutral colour of its
   own, never a tier's; an arm scored against a label set is tinted t-labels; production's recorded arm is badged. */
:root { --gold-bg: #4a3a0c; --gold-ink: #f3d77a; --silver-bg: #3a3d42; --silver-ink: #dde2e8;
  --src-person: #7fb3d5; --src-model: #b39ddb; --src-rule: #a5c9a0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --gold-bg: #f6e3a1; --gold-ink: #5c4300; --silver-bg: #e3e6ea; --silver-ink: #3b4148;
  --src-person: #2d6a94; --src-model: #6a4fb0; --src-rule: #3f7a37; } }
:root[data-theme="light"] { --gold-bg: #f6e3a1; --gold-ink: #5c4300; --silver-bg: #e3e6ea; --silver-ink: #3b4148;
  --src-person: #2d6a94; --src-model: #6a4fb0; --src-rule: #3f7a37; }
.pill { display: inline-block; font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; vertical-align: 1px; white-space: nowrap; }
.pill.tier-gold { background: var(--gold-bg); color: var(--gold-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-ink) 35%, transparent); }
.pill.tier-silver { background: var(--silver-bg); color: var(--silver-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--silver-ink) 30%, transparent); }
.src { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .04em; padding: 3px 7px; border-radius: 4px;
  border: 1px solid currentColor; white-space: nowrap; vertical-align: 1px; }
.src.src-person { color: var(--src-person); }
.src.src-model { color: var(--src-model); }
.src.src-rule { color: var(--src-rule); }
.src.src-unknown { color: var(--muted); }
tr.t-labels td { background: color-mix(in srgb, var(--muted) 10%, transparent); }
tr.t-labels td:first-child { box-shadow: inset 3px 0 0 var(--muted); padding-left: 10px; }
.rowkey .key.t-labels { box-shadow: inset 3px 0 0 var(--muted); }
/* On a desktop, a label set's long ids may break, so the columns after them (promoted, the agreement counts) are on
   screen; there is room for a line or two, never a letter per line. Narrow screens keep the sideways scroll above. */
@media (min-width: 761px) {
  .block .scroll-x > table#labelsets td :is(a, code), .block .scroll-x > table#labelsets td:nth-child(5),
  .block .scroll-x > table[id^="agree-"] td code, .block .scroll-x > table[id^="labels-"] td :is(a, code) {
    overflow-wrap: anywhere;
  }
}
.badge.recorded { display: inline-block; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 4px; color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, transparent);
  vertical-align: 1px; }
.cmdbox { margin-top: 12px; }
.cmdbox button[hidden] { display: none; }
.cmdbox pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* the sheet (RFC-023): the selection's commands, the signals, the item's labels, the item staying in place */
.cmdpanel { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); }
.cmdpanel code.cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
.chip.sig { cursor: default; padding: 3px 7px; font-size: 11px; }
.chip.sig-wrong { border-color: var(--local); color: var(--ink); }
.chip.sig-disagree, .chip.sig-split { border-color: var(--accent); color: var(--ink); }
.chip.sig-new { border-color: var(--open); color: var(--ink); }
ul.labels { list-style: none; padding: 0; display: grid; gap: 10px; }
ul.labels .outtext { margin-top: 4px; }
table.sheet th { white-space: normal; min-width: 8ch; vertical-align: bottom; overflow-wrap: break-word; }
table.sheet th.sel, table.sheet td.sel { position: sticky; left: 0; z-index: 2; width: 2.2rem; min-width: 2.2rem; background: var(--page); }
table.sheet th.item, table.sheet td.item { position: sticky; left: 2.2rem; z-index: 2; background: var(--page); }
/* An item's fields in two lines, the rest in the title: listed whole they made a row 187 px tall. */
table.sheet .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 22em; }
/* One line, cut with an ellipsis (its title holds the whole id). */
table.sheet td.item { white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
table.sheet tr.eprow:hover td.sel, table.sheet tr.eprow:hover td.item { background: var(--surface); }
table.sheet tr.eprow.on td.sel, table.sheet tr.eprow.on td.item { background: var(--surface-2); }
table.sheet .outc { min-width: 16em; max-width: 26em; }
table.sheet .scc { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sheet td.win { font-weight: 700; color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
table.sheet.scores-only .outc { display: none; }
table.sheet tfoot th { text-align: left; font-weight: 600; border-top: 1px solid var(--hair); }
table.sheet tfoot td { border-top: 1px solid var(--hair); vertical-align: top; }
table.sheet .start { min-width: 18em; max-width: 24em; }
/* The goals tables' last column, an arm id with no spaces, wraps rather than running past the page edge. */
table#goals td:last-child, table#glance td:last-child { overflow-wrap: anywhere; min-width: 14ch; }