/* web/css/t1_product.css — the reader-facing T-1 pages.
   ---------------------------------------------------------------------------
   THE PALETTE IS tokens.css's, AND THAT IS NOW ENFORCED RATHER THAN PROMISED.
   These pages and /quality are two surfaces over one warehouse, and a reader
   who follows the footer link from one to the other must land somewhere that is
   obviously the same product rather than somewhere that looks like a different
   vendor's export. That was true before too — this file's own header said the
   palette was "t1_atlas.css's, DELIBERATELY UNCHANGED" — but it was true by
   COPY: two files holding the same 24 literals and agreeing only for as long as
   nobody edited one of them. WP4.2c edited one of them, and receipts stopped
   being cyan on the atlas the same afternoon this file still said they were.
   Sameness that depends on nobody touching either copy is not sameness.

   WHAT IS DIFFERENT IS THE SPACE BUDGET, and that is the whole point of a
   separate file. The atlas is a console — it earns its scroll, and every panel
   on it is allowed to explain itself in a paragraph. These pages are not. The
   overview must be one screen at 1440x900 with nothing below the fold, so the
   roster scrolls INSIDE its own panel rather than pushing the chart off the
   bottom; the filer page is a vertical stack of single-idea blocks each
   allowed exactly one caption line. Every long-form caveat that would have
   been a paragraph is an .info button opening a popover. Those popovers carry
   the atlas's own words, unshortened — the text did not get less true by
   moving, and a reader who clicks an information icon has asked for the long
   version. */
/* WP4.2d, 2026-08-08 — THE PRIVATE PALETTE IS GONE: 24 declarations and 32
   literals. The block it replaces was already flagged for deletion — WP3.5's
   note in it said "the names added here are tokens.css names carrying
   tokens.css DARK values, so WP4.2 deletes this block rather than rewriting
   it" — and that is the whole diagnosis. Every value in it was correct in dark
   and meaningless in light, so these two pages went black-on-black the moment
   the theme flipped, while reporting no error of any kind.

   THE MAP, in the order the names appeared. It is t1_atlas.css's map, because
   the two files were carrying the same block; the entries that are NOT just a
   rename are the ones worth reading.

     --bg, --line, --ink          kept: same name, tokens.css's value
     --panel      -> --surface    the raised card
     --panel2     -> --surface-2  the recessed strip a card sits on
     --dim        -> --ink-body   supporting text
     --faint      -> --ink-faint  captions and axis furniture
     --off        -> --line/      it was TWO jobs under one name: a rule around
                     --ink-faint  a badge, and dim italic text. Borders take
                                  --line (the .pill precedent in t1_atlas.css),
                                  text takes --ink-faint
     --cyan       -> gone         it was only ever the link colour, and R3.11
                                  says a link takes --ink and an underline
     --amber      -> --ink-body   it painted four headings, a route, the product
                                  mark and three hover states. R3.3 reserves
                                  amber for "unexplained or unresolved"; a
                                  section title is neither, and R3.13 is the
                                  reason it matters — the amber on .badge.part
                                  cannot mean anything on a page where amber is
                                  also the word "VOLUMES"
     --amber-dim  -> --line-strong it was a RULE, not a warning: the popover
                                  border, the drawer edge, a chip outline
     --withheld   -> --warn       the genuine survivor, twice: .badge.part (some
                                  months verified, not all) and .pill.rev (this
                                  filing was revised). Both conditional
     --recv/--deliv/--stock       DELETED HERE, and see the note below — they
                                  are consumed from JS, not from this file
     --mono       -> --font-data

   THE THREE SERIES NAMES WERE NEVER USED BY THIS STYLESHEET. Not one rule in
   these 258 lines read --recv, --deliv or --stock; their only consumer is
   t1_core.js's sparkline, which writes var(--deliv) into an SVG presentation
   attribute. A declaration whose only reader is a different language is exactly
   the kind of thing that survives a search-and-replace, so the sparkline was
   moved to a real series slot in the same commit rather than left pointing at a
   name that had just stopped existing. It was --series-4 then and is --series-3
   now: WP5 re-registered the ramp and slot 4 came out 1.5 degrees from slot 1,
   so the deliveries slot moved with the rest of the page. t1_deep.css's header
   holds the arithmetic; t1_core.js's SPARK_TOKEN is the single declaration. */
*{box-sizing:border-box}
/* font-size ON `body`, NEVER ON `html` — a rem font-size on the ROOT re-bases
   every other rem on the page against itself (--t-data is .8rem, so the root
   goes 16px -> 12.8 and --t-label follows it down to 8.70px). Found on
   hub_sd.css 2026-08-08, where the long version of this note lives; it was the
   same single line in six sheets. Chart.js sizes are affected too: tokenPx() in
   chart-theme.js resolves a rem against the ROOT, so every tick label on this
   page's charts was 9px where the token says 11. */
html{background:var(--bg);margin:0}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-data);font-size:var(--t-data);
  -webkit-font-smoothing:antialiased}
button,select,input{font-family:var(--font-data);font-size:var(--t-data)}
/* R3.11 — a navigation affordance is not a data channel and gets no hue. */
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:var(--ink)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0)}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:var(--sp-3);padding:7px var(--sp-3);
  border-bottom:1px solid var(--line);background:var(--surface-2);height:36px}
/* The product mark, matching t1_atlas.css and hub_sd.css: --pine, not --warn.
   --on-pine for the text and NOT --bg — --pine is dark in both themes so its
   foreground must be light in both, and --bg inverts. See tokens.css. */
.top .tag{background:var(--pine);color:var(--on-pine);font-weight:700;
  padding:2px 9px;letter-spacing:.06em;border-radius:var(--r-ctl)}
.top h1{font-size:var(--t-data);font-weight:600;margin:0;letter-spacing:.04em}
.top .right{margin-left:auto;display:flex;gap:14px;align-items:center;
  color:var(--ink-faint)}

/* ---------- the ⓘ, and the popover it opens ----------
   A 14px circle rather than a link, because it must read as chrome. The thing
   it protects is the page's caveat budget: one caption line per block, and
   anything longer lives in here. */
.info{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:1px solid var(--line-strong);
  color:var(--ink-faint);background:none;cursor:pointer;padding:0;
  font-size:var(--t-label);line-height:1;vertical-align:middle;margin-left:6px}
/* R3.11 — hover promotes the neutral ramp. Amber here was a control saying
   "you are pointing at me" in the one colour the page reserves for "this
   number is unresolved", two rows above a badge that meant it. */
.info:hover{border-color:var(--ink);color:var(--ink)}
#pop{position:fixed;z-index:3000;max-width:460px;background:var(--surface);
  border:1px solid var(--line-strong);padding:11px 13px;color:var(--ink);
  line-height:1.55;box-shadow:var(--shadow-panel);display:none}
#pop.on{display:block}
#pop h4{margin:0 0 6px;font-size:var(--t-label);
  letter-spacing:var(--label-tracking);color:var(--ink-body);
  text-transform:uppercase}
#pop p{margin:0 0 8px}
#pop p:last-child{margin-bottom:0}

/* ---------- blocks ---------- */
.block{border-bottom:1px solid var(--line)}
.bhead{display:flex;align-items:baseline;gap:10px;padding:var(--sp-2) var(--sp-3);
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.bhead h2{margin:0;font-size:var(--t-label);letter-spacing:var(--label-tracking);
  text-transform:uppercase;color:var(--ink-body)}
.bhead .sub{color:var(--ink-faint);font-size:var(--t-label)}
.bhead .spacer{margin-left:auto}
/* The entire caveat budget for a block. One line, and the CSS enforces it —
   a second sentence that will not fit is a sentence that belongs in a
   popover. */
.caption{padding:5px var(--sp-3);color:var(--ink-faint);
  border-top:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* NOT a .caption, and it sits directly above one, so the difference has to be
   deliberate. A caption is the one-line caveat budget above; this is the
   chart's own explanation of a shape a reader would otherwise misread, it runs
   to two sentences, and clipping it at the panel edge would lose the half that
   does the work. It wraps, it is body-coloured rather than faint because it is
   not a footnote, and it hides itself when js/t1_overview.js measures no step
   to report — an empty bordered strip would read as a chart that failed. */
.chart-note{margin:var(--sp-2) 0 0;padding:0 var(--sp-3);
  font-size:var(--t-label);line-height:1.5;color:var(--ink-body);
  max-width:90ch}
.chart-note:empty{display:none}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse}
th{position:sticky;top:0;background:var(--surface-2);text-align:left;
  font-weight:600;color:var(--ink-faint);font-size:var(--t-label);
  letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-bottom:1px solid var(--line);
  z-index:2}
th.num{text-align:right}
td{padding:4px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface-2)}
/* `tbody tr.self td{background:#12100C}` was here, an amber-tinted row for a
   self-transfer. DELETED rather than ported, because nothing writes the class:
   `self` is set by t1.js, which loads t1.css, and t1.css's live version already
   moved to `li.self{color:var(--ink-body)}` — de-emphasis instead of a tint. A
   dead rule holding a literal is the one kind that never shows up in review. */
.reg{color:var(--ink-faint)}
.tag-int{color:var(--ink-body);border:1px solid var(--line-strong);padding:0 4px;
  font-size:var(--t-label);margin-left:6px}
/* A refused route is set smaller as well as dimmer, and the size is doing work
   the colour cannot: "no placed endpoint on either side" is longer than any
   route it stands in for, so at body size it is the one cell in the table that
   truncates — a refusal that gets cut to "no placed endpoint o…" has stopped
   saying which side it means. */
.refuse{color:var(--ink-faint);font-style:italic;font-size:var(--t-label)}

/* ---------- overview: one screen, roster beside the chart ----------
   100vh minus the bar and the footer, and the roster's own overflow rather
   than the page's. A twenty-row table that pushes the chart under the fold
   fails the only test this page has. */
/* The roster gets the wider track. It carries six columns of text, of which the
   filer name is the only one a reader can identify a row by; the chart carries
   one shape and reads fine narrower. An even split truncated "Nustar Permian
   Transportation & Storage" to the point where the four Plains rows were
   distinguishable only by their registrations. */
.sheet{display:grid;
  grid-template-columns:minmax(560px,1.35fr) minmax(0,1fr);
  height:calc(100vh - 36px - 26px)}
.sheet > .block{border-bottom:none;border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.sheet > .block:last-child{border-right:none}
.scroll{overflow:auto;min-height:0;flex:1}
.chartwrap{flex:1;min-height:0;position:relative;padding:8px 10px}
.chartwrap canvas{position:absolute;inset:8px 10px}

/* FIXED, and the widths are declared rather than negotiated. Left to itself the
   browser sizes these columns to their content, the longest filer name and the
   longest route decide the table's width, it exceeds the panel, and the panel's
   own overflow scrolls the FILER column — the one identifying thing in the
   row — off the left edge. The ranking then reads as a list of anonymous
   numbers. Names and routes ellipsis instead; both carry a title attribute. */
#roster{table-layout:fixed}
#roster th:nth-child(1),#roster td:nth-child(1){width:29%}
#roster th:nth-child(2),#roster td:nth-child(2){width:25%}
#roster th:nth-child(3),#roster td:nth-child(3){width:14%}
/* The month column carries a SECOND LINE — "filed to 2025-12" — on the rows
   whose latest month with a reading is not their latest filed month. Cells here
   are nowrap, so without the width that line ellipsises to nothing and the
   exception the reader most needs disappears. Three of twenty rows have it. */
#roster th:nth-child(4),#roster td:nth-child(4){width:13%}
/* Wide enough for the whole sparkline plus its own tighter padding. At 8% and
   the table's default 10px sides the 62px svg overflowed and the browser
   clipped its RIGHT edge — the most recent months, which are the ones the
   column beside it is ranking on. */
#roster th:nth-child(5),#roster td:nth-child(5){width:10%;padding-left:4px;
  padding-right:4px}
#roster th:nth-child(6),#roster td:nth-child(6){width:9%}

/* R3.12 — THE ROSTER IS THE CHART'S LEGEND, and this is the rung.
   The chart beside it stacks by filer and draws its own legend at
   `display:false`: twenty chips is a second table the fold cannot afford, and
   that was the right call, but it left a page whose colour channel encodes a
   filer and never says which. A reader could see that the tallest band was
   somebody and had no way to find out who.

   THE SWATCH IS DERIVED, NOT AUTHORED. t1_overview.js walks `d.chart.series`
   once, takes `seriesToken(i)` — the same call the dataset makes for its own
   colour — and sets --swatch on the matching row. A row can therefore only
   wear a colour a bar is actually drawn in, and adding a seventh series moves
   both ends at once.

   KEYED BY REGISTRATION, NOT BY ROW INDEX, and that is not a detail. The two
   lists are ranked on DIFFERENT things: the roster on each filer's own latest
   month (which is what its heading says), the chart on the whole span's total.
   Row 3 and series 3 are routinely different filers, so an index-keyed swatch
   would be a legend that names the wrong band — worse than no legend, because
   it looks like one.

   The pair mechanism is app.css's, unchanged: CSS has no way to ask "is
   --swatch set", so --swatch-on IS the question, and a row outside the top six
   simply never gets either and draws no block. Custom properties inherit,
   which is how a value set on the <td> reaches its ::before.

   R3.4 — the block carries the colour and the filer's NAME stays --ink. A
   series token owes 3:1 as a mark and would owe 4.5:1 as text, which is a floor
   the ramp is not built to clear. */
#roster tbody td:nth-child(1)::before{
  content:"";display:var(--swatch-on,none);width:.62em;height:.62em;
  margin-right:.45em;vertical-align:baseline;background:var(--swatch);
  border-radius:1px}

.badge{padding:0 5px;border:1px solid var(--line);color:var(--ink-faint);
  font-size:var(--t-label);border-radius:var(--r-ctl)}
.badge.full{border-color:var(--accent-measured);
  color:var(--accent-measured-ink)}
/* `.badge.part` HAS NO RULE, AND THAT IS THE FIX. It was amber, and amber on
   this rung is backwards: covBadge()'s ladder is monotone — `full` is every
   month page-1 checked, `part` is some, `none` is not one — so `part` is
   strictly HEALTHIER than `none`, and it was the only one of the three wearing
   a warning. A ladder whose middle rung is the loudest is not a ladder.
   It also fails R3.13 on its own terms: partial verification is a gap in OUR
   checking, not a fault in the filing, which is exactly the argument `.none`
   below was already making. The badge reads "7/12"; the NUMBER carries the
   gradation and the colour carries only the one categorical fact worth a hue —
   is this span fully checked or not. Two orthogonal channels rather than three
   rungs of one, per WP4's rank-order note. */
.badge.none{border-color:var(--accent-modelled);color:var(--accent-modelled)}
.spark{display:block}

/* ---------- filer page ---------- */
.fhead{display:flex;align-items:center;gap:14px;padding:10px var(--sp-3);
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.fhead h1{margin:0;font-size:var(--t-title);letter-spacing:.02em;font-weight:600}
.fhead .route{color:var(--ink-body);font-size:var(--t-body)}
.fhead .meta{margin-left:auto;color:var(--ink-faint);text-align:right}
/* Fixed here for the opposite reason to the roster's. Six columns of which four
   are numbers, left to auto, spread the two share columns a third of the page
   away from the volumes they are shares OF — and a percentage that far from its
   numerator is read against whatever is nearest. */
#cptable{table-layout:fixed}
#cptable th:nth-child(1),#cptable td:nth-child(1){width:40%}
#cptable th:nth-child(2),#cptable td:nth-child(2){width:12%}
#cptable th:nth-child(3),#cptable td:nth-child(3){width:13%}
#cptable th:nth-child(4),#cptable td:nth-child(4){width:9%}
#cptable th:nth-child(5),#cptable td:nth-child(5){width:13%}
#cptable th:nth-child(6),#cptable td:nth-child(6){width:9%}
/* HELD UNTIL DRAWN. Every block fills in one frame when the filer's JSON
   lands, and each is a different size per filer (Plains' counterparty table
   is 374 px, 01-0995's 218; a filer with no stocks loses most of a chart), so
   no reserved height fits them all: the empty skeleton painted, then jumped
   (CLS 0.24 desktop, Lighthouse 2026-10-04). Held invisible — laid out, not
   painted, so nothing it does counts as a shift — until t1_filer.js marks
   the page drawn, the error path included. The animation is the floor: if
   the script never runs, the page shows itself after 4 s anyway. */
body:not(.filer-ready) #page,body:not(.filer-ready) #cite{visibility:hidden;animation:filer-reveal 0s 4s forwards}
/* The citation panel's file links sat a space apart at text height, under
   the 24 px touch-target floor (Lighthouse target-size, 2026-10-04); the
   other entity templates already space theirs. */
#cite .downloads a{display:inline-block;padding:4px 0;margin-right:var(--sp-3)}
@keyframes filer-reveal{to{visibility:visible}}

.chartbox{height:260px;position:relative;padding:10px 12px}
.chartbox canvas{position:absolute;inset:10px 12px}
/* A block that has nothing to draw collapses to its sentence rather than
   holding 260px of empty axes open. */
.chartbox:has(> .refuse){height:auto}
.refuse.pad{padding:6px 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:1180px){.split{grid-template-columns:1fr}}

/* movers: one line each, and the two lists kept apart because they are not on
   one scale — see t1_product.movers(). */
.movers{display:grid;grid-template-columns:1fr 1fr;gap:0}
.movers > div{padding:6px 12px;min-width:0}
.movers > div + div{border-left:1px solid var(--line)}
.mv{display:flex;gap:8px;align-items:baseline;padding:2px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .d{width:96px;text-align:right;font-variant-numeric:tabular-nums;
  flex:none}
.mv .up{color:var(--data-pos)} .mv .down{color:var(--data-neg)}
.mv .nm{overflow:hidden;text-overflow:ellipsis}
.mvhead{color:var(--ink-faint);font-size:var(--t-label);letter-spacing:.1em;
  text-transform:uppercase;padding-bottom:3px}
.pill{padding:0 5px;border:1px solid var(--line);color:var(--ink-faint);
  font-size:var(--t-label);border-radius:var(--r-ctl)}
/* `.pill.rev` HAS NO RULE EITHER, for a different reason. It was amber, and a
   revision is not a fault — t1_product.movers() says so in the copy the page
   itself prints: "A revised month is one we have ingested more than once and
   got a different total for... news about our reading, not about crude oil."
   A re-read that produced a better number is the system working. Amber there
   told the reader something had gone wrong on the one page where nothing had,
   and it is the neighbour of the badge above, so the two disarmed each other.
   The pill says the word "revised"; the word is the whole message.

   WITH BOTH GONE THERE IS NO AMBER ON EITHER OF THESE TWO PAGES, which is the
   correct render and worth stating so that a future diff has to argue for the
   first one. Nothing on an overview or a filer page is broken: a refused route
   and a held-back column are stated absences with a reason attached, and §2.22
   rule 2 keeps absence out of the warning vocabulary. */

/* map, collapsed by default */
.disclose{width:100%;text-align:left;background:var(--surface-2);
  color:var(--ink);
  border:none;border-bottom:1px solid var(--line);padding:9px var(--sp-3);
  cursor:pointer;letter-spacing:.06em}
/* R3.11 — the text is already --ink, so hover lifts the SURFACE instead. */
.disclose:hover{background:var(--surface)}
/* `display:grid` beats the UA's [hidden]{display:none}, so the collapsed map
   rendered as 460px of empty page with a stray "Not Placed" rail floating in
   it. Any display rule on an element that also uses the hidden attribute has to
   say this. */
.maprow{display:grid;grid-template-columns:minmax(0,1fr) 260px;height:460px}
.maprow[hidden]{display:none}
#map{height:100%;background:var(--bg)}
.rail{border-left:1px solid var(--line);overflow:auto;padding:var(--sp-2) 10px;
  background:var(--surface-2)}
.rail h3{margin:0 0 6px;font-size:var(--t-label);
  letter-spacing:var(--label-tracking);color:var(--ink-body);
  text-transform:uppercase}
.chip{display:block;border:1px dashed var(--line-strong);padding:4px 6px;
  margin-bottom:5px;color:var(--ink-body);border-radius:var(--r-ctl)}
.chip b{display:block;color:var(--ink);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cornerchip{position:absolute;right:10px;bottom:10px;z-index:900;
  background:var(--surface);border:1px solid var(--line);padding:3px 7px;
  color:var(--ink-faint);border-radius:var(--r-ctl)}
/* THE LEAFLET CHROME IS RE-THEMED, NOT HIDDEN — the attribution is a licence
   condition. Note the `.leaflet-container` prefix, and note that the four
   `!important`s these rules used to carry are gone with it. leaflet.css splits
   this widget across a bare `.leaflet-control-attribution` for `color` and a
   `.leaflet-container .leaflet-control-attribution` for `background`, so an
   unprefixed override wins the text at equal specificity only by load order and
   loses the strip outright — which is the half a reader sees. `!important` was
   papering over that; the prefix answers it, and it is what t1_atlas.css and
   style.css already do. */
.leaflet-container{background:var(--bg);font-family:var(--font-data);
  font-size:var(--t-label)}
.leaflet-container .leaflet-control-attribution{background:var(--surface);
  color:var(--ink-body);border-top:1px solid var(--line)}
.leaflet-container .leaflet-control-attribution a{background:none;
  color:var(--ink)}
.leaflet-bar a{background:var(--surface);color:var(--ink);
  border-bottom:1px solid var(--line)}
.leaflet-bar a:hover{background:var(--surface-2);color:var(--ink)}

/* drawer, opened from a table row or a map dot */
#drawer{position:fixed;top:0;right:0;bottom:0;width:420px;
  background:var(--surface);
  border-left:1px solid var(--line-strong);z-index:2000;
  transform:translateX(100%);
  transition:transform .14s ease-out;display:flex;flex-direction:column}
#drawer.on{transform:none}
#drawer .dh{display:flex;align-items:center;gap:var(--sp-2);padding:9px var(--sp-3);
  border-bottom:1px solid var(--line);background:var(--surface-2)}
#drawer .dh b{font-size:var(--t-body)}
#drawer .dh button{margin-left:auto;background:none;
  border:1px solid var(--line-strong);border-radius:var(--r-ctl);
  color:var(--ink-body);cursor:pointer;padding:1px 7px}
#drawer .db{overflow:auto;flex:1}
#drawer .dchart{height:160px;position:relative;padding:10px 12px}
#drawer .dchart canvas{position:absolute;inset:10px 12px}

/* downloads + footer */
.dl{display:flex;gap:10px;flex-wrap:wrap;padding:var(--sp-2) var(--sp-3)}
/* A boxed link: the BORDER is the affordance, so it drops the underline the
   bare `a` rule adds rather than carrying both. R3.11 — hover promotes the
   neutral ramp; it used to take amber on a page where amber means "this
   reading is unresolved". */
.dl a{border:1px solid var(--line);padding:3px 9px;color:var(--ink-body);
  text-decoration:none;border-radius:var(--r-ctl)}
.dl a:hover{border-color:var(--ink);color:var(--ink)}
footer{display:flex;gap:14px;align-items:center;padding:5px var(--sp-3);
  height:26px;color:var(--ink-faint);border-top:1px solid var(--line);
  background:var(--surface-2)}
.err{padding:14px;color:var(--ink-body);
  background:var(--surface-2);border-left:3px solid var(--ink-faint)}
/* The way OUT of an .err, offered only when there IS one — a page opened with
   no registration has somewhere to go, a page whose artifact would not read
   does not. Aligned to .err's own left rule so it reads as part of the same
   block rather than as page content that happens to follow it. */
.err-act{margin:0;padding:0 14px 14px;background:var(--surface-2);
  border-left:3px solid var(--ink-faint)}
.err-act a{color:var(--ink)}