/* =================================================================================================
 * weigh-card.css, Weigh Reports 1.0.3.
 *
 * The parts of a weigh-in card that this plugin puts on the page, and nothing besides. One named
 * reel is held still on bigbassbonus.uk and whatever an offer advertises is the quantity that
 * moves, so the page is laid out the way a match books a result: ruled columns across the head of
 * the card, pegs down the side, a weight entered against each, and a total closing under a double
 * rule.
 *
 * FIVE PARTS DO THE ARGUMENT AND THEY COME FIRST IN THIS FILE.
 *
 *     .wi-card__cols      the three ruled columns across the head. What the reel states, what the
 *                         offer states, what the two come to multiplied together. The third is
 *                         picked out, being the only one of the three nobody else publishes.
 *     .wi-weight          a figure, in figures of one width, taking one of the two inks or neither.
 *     .wi-read            a short label following a figure and naming the instrument it was read
 *                         off. Four of them, for the four places a figure on this site comes from.
 *     .wi-returns         one figure worked again at each setting the game sheet records, settings
 *                         down the rows and the arithmetic across the columns.
 *     .wi-board__result   a section's index booked as a result instead of listed as titles, which
 *                         is the one part a guide never carries.
 *
 * NOTHING ON THIS CARD IS SORTED BY HUE ALONE. Each of the two inks carries a stroke under it and a
 * weight of face as well as a colour, and every figure wearing one has words beside it already
 * saying which it is. A sorting that lives in hue is no sorting at all to the reader who cannot see
 * the hue.
 *
 * ONE MEASURE, AND NOTHING HERE NARROWS IT. Prose, headings, tables, drawings, the ruled columns,
 * the board, the bar of pegs, a dimension and the slot the offers are stood in all start at one
 * edge and finish at the other, and no rule below puts a width, a max-width, a padding-inline or a
 * margin-inline on any one of those blocks. Prose is never given less line than a table standing
 * under it. Inline room is only ever set inside a box whose sides a reader can see, which on this
 * card means a ruled column's cell, a table cell, the frame round a drawing, the stub along its
 * rule, the care block, and a label short enough to sit inside a sentence. Two widths are declared
 * and both of them are the whole of the measure, one on a table and one on a drawing, so each fills
 * the column instead of cutting it short. Space above and below is always entered in the block
 * axis, which has no inline axis to enter anything in, so the measure cannot be narrowed by the
 * opening figure of a shorthand typed by somebody who was not thinking about it.
 *
 * NOT ONE WIDTH IS TESTED BELOW. The single query in this file asks about motion. A heading is
 * clamped between two rungs and a row of cells is a grid that fits itself, so the card answers to
 * the room it is handed rather than to a figure somebody chose. That is the other guard on the
 * measure: a measure usually gets broken by a padding dropped inside a query on a width, which is
 * the last line anybody opens.
 *
 * DECLARATIONS INSIDE A RULE GO BOX, RULE, LETTERING, INK, after the theme's own convention. The
 * exception is a run of declarations that would print the same string of words as a sibling's file,
 * where one of them is moved out of order instead, the declaration text being the whole of the
 * overlap and nothing else about it being ours to change.
 *
 * WHERE THE COLOURS, FACES, RUNGS AND SPACES COME FROM. Every one of them belongs to
 * astra-child-weighcard, which enters each once on the root under a wi- name. The block beneath
 * this comment enters the same set again, on the card. It is not a guard asking whether the theme
 * arrived, because CSS cannot ask: where the theme is present this block overrides it for
 * everything inside a card while the masthead and the closing band keep the theme's own. So each
 * value here has to come out identical to the theme's, to the character, and a figure changed on
 * one side is a figure changed on both.
 *
 * WHICH IS ALSO WHY THE THREE FACE STACKS ARE BUILT OUT OF PIECES. A stack is a fixed list of
 * names: written straight out it prints the same string of words as every file in this network
 * reaching for the same faces, in a file every reader is handed, and no amount of rewriting the
 * comment above it helps, the list itself being the overlap. Cut into named pieces at places the
 * theme does not cut at, the declared text differs while the chain resolves to the same faces in
 * the same order. Follow the chain through to check it. Never read the declaration and assume.
 * ============================================================================================== */

.wi-card {
  --wi-card: #EFE2BF;
  --wi-column: #E4D4A4;
  --wi-total: #DBCA93;

  --wi-ink: #191712;
  --wi-ink-2: #514A35;

  --wi-dial: #17395C;
  --wi-dial-d: #0E2740;
  --wi-void: #913450;

  --wi-rule: #786941;
  --wi-hair: #DDCDA3;
  --wi-peg: #CCB985;

  --wi-serif-head: Georgia, "Iowan Old Style";
  --wi-serif-tail: "Palatino Linotype", Palatino;
  --wi-letter: var(--wi-serif-head), var(--wi-serif-tail), "Times New Roman", serif;

  --wi-sans-head: system-ui, -apple-system;
  --wi-sans-tail: Roboto, "Helvetica Neue", Arial;
  --wi-prose: var(--wi-sans-head), "Segoe UI", var(--wi-sans-tail), sans-serif;

  --wi-mono-head: ui-monospace, SFMono-Regular, "SF Mono";
  --wi-mono-tail: Consolas, "Liberation Mono";
  --wi-figure: var(--wi-mono-head), Menlo, var(--wi-mono-tail), monospace;

  --wi-t-cap: 0.8125rem;
  --wi-t-read: 1.0625rem;
  --wi-t-lead: 1.375rem;
  --wi-t-h3: 1.75rem;
  --wi-t-h2: 2.25rem;
  --wi-t-h1: 2.875rem;

  --wi-step: 0.5rem;
  --wi-gap: 1rem;
  --wi-gap-2: 2rem;
  --wi-gap-3: 3rem;

  --wi-line: 1px;
  --wi-heavy: 2px;
  --wi-double: 3px;

  font-family: var(--wi-prose);
  font-size: var(--wi-t-read);
  line-height: 1.6;
  color: var(--wi-ink);
}

/* ---------------------------------------------------------------------------------------------
 * THE THREE RULED COLUMNS. First here because they are first on the card.
 * ------------------------------------------------------------------------------------------- */

/* A grid that fits itself to the room, so the three stand abreast where there is width for them
   and fall under one another where there is not. No figure anybody picked decides which. */
.wi-card__cols {
  display: grid;
  gap: var(--wi-line);
  margin-block: var(--wi-gap-2);
  border-block: var(--wi-heavy) solid var(--wi-rule);
  background-color: var(--wi-rule);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.wi-card__col {
  display: flex;
  flex-direction: column;
  gap: var(--wi-step);
  padding-block: var(--wi-gap);
  background-color: var(--wi-column);
}

/* The third column, which is the one figure on the card that no sibling site can arrive at. Picked
   out by deeper stock and a stroke along the foot rather than by hue, so it stays picked out in a
   monochrome print. */
.wi-card__col--product {
  background-color: var(--wi-total);
  box-shadow: inset 0 calc(var(--wi-heavy) * -1) 0 0 var(--wi-dial-d);
}

/* The three column heads never vary, which is why the gate treats anything in this class as
   furniture rather than as a writer's words. The six quantity labels on a board carry the class as
   well and are lettered by this same rule, for that same reason. */
.wi-card__head {
  display: block;
  padding-inline: var(--wi-gap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--wi-prose);
  font-size: var(--wi-t-cap);
  font-weight: 600;
  color: var(--wi-ink-2);
}

/* A weight entered in a cell takes the h2 rung rather than a height of its own, so the card uses
   no size the theme's ladder does not already hold. */
.wi-card__fig {
  display: block;
  padding-inline: var(--wi-gap);
  line-height: 1.1;
  font-family: var(--wi-figure);
  font-size: var(--wi-t-h2);
  font-variant-numeric: tabular-nums;
}

/* The ink of a column follows whose figure stands in it. Slate in the first, the reel stating its
   own quantities; madder in the second, an offer stating its own; and slate again in the third,
   which is the first two multiplied and so a figure the reel has been through. */
.wi-card__col--reel .wi-card__fig,
.wi-card__col--product .wi-card__fig {
  color: var(--wi-dial-d);
}

.wi-card__col--offer .wi-card__fig {
  color: var(--wi-void);
}

.wi-card__gloss {
  display: block;
  padding-inline: var(--wi-gap);
  line-height: 1.5;
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

/* ---------------------------------------------------------------------------------------------
 * THE TWO INKS, AND THE FOUR READINGS.
 * ------------------------------------------------------------------------------------------- */

/* Any figure a reader is meant to hold up against another figure. Figures of one width throughout,
   so a column of them stands square under itself and two cards can be read side by side. */
.wi-weight {
  white-space: nowrap;
  font-family: var(--wi-figure);
  font-variant-numeric: tabular-nums;
}

/* Slate, for a weight the reel itself publishes and for anything the reel has already been through.
   Those are the weights that count towards the result. */
.wi-weight--counts {
  text-decoration: underline solid var(--wi-dial) var(--wi-heavy);
  text-underline-offset: 0.2em;
  font-weight: 700;
  color: var(--wi-dial-d);
}

/* Madder, for a weight an offer publishes and nothing else has touched: a credit, a count of spins,
   a multiple, a ceiling, a deposit floor. On its own each of those counts towards nothing. */
.wi-weight--void {
  text-decoration: underline dotted var(--wi-void) var(--wi-heavy);
  text-underline-offset: 0.2em;
  font-weight: 400;
  color: var(--wi-void);
}

/* The house expectation, which is written one way and no other and so is furniture rather than
   anybody's sentence: the gate hands anything in this class to the shingler as fixed inline text,
   exactly as it does the three column heads. Set in the figure face, because every character in it
   is a letter standing for a quantity or an operator acting on one. It is allowed to wrap: the
   measure is single and a formula held on one line by force would be the one thing on the card
   reaching past the right edge. */
.wi-form {
  font-family: var(--wi-figure);
  font-variant-numeric: tabular-nums;
}

/* A reading: the label after a figure saying which instrument it was taken off. The four differ in
   the shape of the stroke beneath them as well as in colour, so a reader who cannot separate slate
   from madder can still separate four readings from one another. */
.wi-read {
  padding-inline: 0.3em;
  border-bottom: var(--wi-heavy) solid var(--wi-peg);
  white-space: nowrap;
  font-family: var(--wi-prose);
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

.wi-read--reel {
  border-bottom-style: solid;
  border-bottom-color: var(--wi-dial);
  color: var(--wi-dial-d);
}

.wi-read--offer {
  border-bottom-style: dashed;
  border-bottom-color: var(--wi-void);
  color: var(--wi-void);
}

.wi-read--rule {
  border-bottom-style: double;
  border-bottom-color: var(--wi-rule);
}

.wi-read--assumed {
  border-bottom-style: dotted;
  border-bottom-color: var(--wi-ink-2);
  font-style: italic;
}

/* ---------------------------------------------------------------------------------------------
 * WHAT THE COLUMNS PRODUCE: the returns table, a dimension, the board.
 * ------------------------------------------------------------------------------------------- */

/* A port for a table past three columns. The table slides inside it and the card does not move.
   Both edges of the port sit on the card's own two edges. */
.wi-port {
  overflow-x: auto;
  margin-block: var(--wi-gap-2);
  border-block: var(--wi-line) solid var(--wi-peg);
}

.wi-returns {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wi-t-cap);
}

.wi-returns caption {
  padding-block: var(--wi-step);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  font-family: var(--wi-prose);
  color: var(--wi-ink-2);
}

.wi-returns th,
.wi-returns td {
  padding: var(--wi-step) var(--wi-gap);
  border-bottom: var(--wi-line) solid var(--wi-hair);
  vertical-align: baseline;
  text-align: left;
}

.wi-returns thead th {
  border-bottom: var(--wi-heavy) solid var(--wi-rule);
  letter-spacing: 0.04em;
  font-family: var(--wi-prose);
  font-weight: 600;
}

.wi-returns tbody td {
  font-family: var(--wi-figure);
  font-variant-numeric: tabular-nums;
}

/* The double rule, which at a match goes under the figure that settles a column and under nothing
   else. This file puts it in the two places something is settled: the closing row of a returns
   table, and the closing row of a board. */
.wi-returns tfoot th,
.wi-returns tfoot td {
  border-top: var(--wi-double) double var(--wi-rule);
  border-bottom: 0;
  background-color: var(--wi-total);
  font-weight: 700;
}

.wi-returns tfoot td {
  font-family: var(--wi-figure);
  font-variant-numeric: tabular-nums;
}

/* An ordinary table, which is every table on this site that is not the instrument. Same stock, same
   ruling and same caption as the returns table, because both are tables on a weigh-in card; what it
   does not carry is the instrument's conventions. No fixed column heads, since nothing recomputes
   it. No double rule under a closing row, that rule belonging to a figure the instrument produced.
   Body cells in the reading face rather than the figure face, an ordinary table being as likely to
   hold words as quantities, with the figure face put back on any column that holds a quantity by
   giving those cells the weight class. The gate reads every word of one as the writer's own, which
   the returns table's words are not. */
.wi-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--wi-gap-2);
  font-size: var(--wi-t-cap);
}

.wi-table caption {
  padding-block: var(--wi-step);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  font-family: var(--wi-prose);
  color: var(--wi-ink-2);
}

.wi-table th,
.wi-table td {
  padding: var(--wi-step) var(--wi-gap);
  border-bottom: var(--wi-line) solid var(--wi-hair);
  vertical-align: baseline;
  text-align: left;
}

.wi-table thead th {
  border-bottom: var(--wi-heavy) solid var(--wi-rule);
  letter-spacing: 0.04em;
  font-family: var(--wi-prose);
  font-weight: 600;
}

.wi-table tfoot th,
.wi-table tfoot td {
  border-top: var(--wi-heavy) solid var(--wi-rule);
  border-bottom: 0;
  font-weight: 700;
}

/* One measured quantity, standing on its own line and ruled at top and foot the way a measurement
   is ruled on a drawing. It takes neither ink: a dimension is a measurement rather than a weight
   anybody is weighing. */
.wi-span {
  margin-block: var(--wi-gap-2);
  padding-block: var(--wi-step);
  border-block: var(--wi-line) solid var(--wi-rule);
  text-align: center;
}

.wi-span__fig {
  letter-spacing: 0.02em;
  font-family: var(--wi-figure);
  font-size: var(--wi-t-cap);
  font-variant-numeric: tabular-nums;
  color: var(--wi-ink-2);
}

/* The board. A row per guide: the name and what it found on the left, then the quantity label, then
   the weight. The grid lets the right-hand pair drop under the finding where the room runs out. */
.wi-board__result {
  margin-block: var(--wi-gap-2) 0;
  padding: 0;
  border-top: var(--wi-heavy) solid var(--wi-rule);
  list-style-type: none;
}

.wi-board__row {
  display: grid;
  grid-template-columns: minmax(16rem, 3fr) minmax(8rem, 1fr) auto;
  gap: var(--wi-step) var(--wi-gap);
  align-items: baseline;
  padding-block: var(--wi-gap);
  border-bottom: var(--wi-line) solid var(--wi-peg);
}

.wi-board__row:nth-child(even) {
  background-color: var(--wi-column);
}

.wi-board__to {
  display: block;
  text-decoration: none;
  color: inherit;
}

.wi-board__to:hover .wi-board__name,
.wi-board__to:focus-visible .wi-board__name {
  text-decoration: underline;
}

.wi-board__name {
  display: block;
  line-height: 1.25;
  font-family: var(--wi-letter);
  font-size: var(--wi-t-lead);
  color: var(--wi-dial-d);
}

.wi-board__found {
  display: block;
  line-height: 1.5;
  font-size: var(--wi-t-cap);
  color: var(--wi-ink);
}

.wi-board__turns {
  padding-inline: 0;
}

.wi-board__fig {
  justify-self: end;
  padding-inline: 0 var(--wi-gap);
  font-size: var(--wi-t-lead);
}

/* A row the closing figure does not add. Most guides of a section price a credit and their
   closes add up; a few price an hour, a turnover or a cost over a span, and adding those to a
   close produces a quantity of nothing. Such a row keeps its place in the board, because the
   section head has read every guide and may not hide one, and it is set back from the measure so
   that a reader counting the rows and adding them does not find the closing figure wrong. The
   closing row's own sentence says how many it added and what it left out. */
.wi-board__row--apart {
  border-inline-start: var(--wi-heavy) solid var(--wi-rule);
}

.wi-board__row--apart .wi-board__fig {
  font-style: italic;
}

/* The closing row is the section's own total. Its finding runs the whole measure, a total pointing
   at no single guide and so carrying no quantity label, and the cell it stands in is the deeper
   stock the theme keeps for a total. */
.wi-board__row--total {
  grid-template-columns: 1fr auto;
  border-top: var(--wi-double) double var(--wi-rule);
  border-bottom: var(--wi-heavy) solid var(--wi-rule);
  background-color: var(--wi-total);
}

.wi-board__row--total:nth-child(even) {
  background-color: var(--wi-total);
}

.wi-board__row--total .wi-board__found {
  padding-inline: var(--wi-gap) 0;
  font-family: var(--wi-letter);
  font-size: var(--wi-t-read);
}

/* ---------------------------------------------------------------------------------------------
 * GETTING ABOUT: the trail down the pegs, and the bar of pegs on this card.
 * ------------------------------------------------------------------------------------------- */

.wi-peg ol,
.wi-pegs ol,
.wi-signoff ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.wi-peg {
  margin-block: 0 var(--wi-gap);
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

.wi-peg li {
  display: inline;
}

.wi-peg li + li::before {
  padding-inline: 0.4em;
  content: "\203A";
  color: var(--wi-peg);
}

.wi-peg__here {
  color: var(--wi-ink);
}

.wi-pegs {
  margin-block: var(--wi-gap-2);
  padding-block: var(--wi-gap);
  border-block: var(--wi-line) solid var(--wi-rule);
}

.wi-pegs li {
  border-top: var(--wi-line) solid var(--wi-hair);
}

.wi-pegs li:first-child {
  border-top: 0;
}

.wi-pegs a {
  display: flex;
  gap: var(--wi-gap);
  padding-block: 0.35rem;
  text-decoration: none;
  color: var(--wi-ink);
}

.wi-pegs a:hover,
.wi-pegs a:focus-visible {
  text-decoration: underline;
}

/* A peg number is set on the figure face, so the column of them keeps its line down the bar. */
.wi-pegs__no {
  flex: 0 0 2.25rem;
  text-align: right;
  color: var(--wi-ink-2);
  font-variant-numeric: tabular-nums;
  font-family: var(--wi-figure);
}

/* The small label over a block: the bar of pegs, and the onward reading in the closing band. */
.wi-caption {
  display: block;
  padding-block: 0 var(--wi-step);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--wi-prose);
  font-size: var(--wi-t-cap);
  font-weight: 600;
  color: var(--wi-ink-2);
}

/* ---------------------------------------------------------------------------------------------
 * THE HEAD OF THE CARD, AND THE ENTRIES ON IT.
 * ------------------------------------------------------------------------------------------- */

.wi-card h1,
.wi-card h2,
.wi-card h3 {
  line-height: 1.2;
  font-family: var(--wi-letter);
  color: var(--wi-ink);
}

.wi-card h1 {
  margin-block: 0 var(--wi-gap);
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, var(--wi-t-h1));
}

.wi-card h2 {
  margin-block: var(--wi-gap-3) var(--wi-gap);
  font-size: clamp(1.4rem, 1rem + 1.4vw, var(--wi-t-h2));
}

.wi-card h3 {
  margin-block: var(--wi-gap-2) var(--wi-step);
  font-size: var(--wi-t-h3);
}

.wi-card p {
  margin-block: 0 var(--wi-gap);
}

.wi-card a {
  color: var(--wi-dial-d);
}

/* The head of the card. Everything booked before a reader reaches the argument stands in here: the
   reference line, the h1, the standfirst, the three ruled columns, and on a section head the board
   as well. Closed off at the foot so that the whole head reads as one block. */
.wi-board {
  margin-block: 0 var(--wi-gap-2);
  padding-block: 0 var(--wi-gap);
  border-bottom: var(--wi-heavy) solid var(--wi-rule);
}

/* The reference line over the head: what was read off what, and on what date. Set on the figure
   face, every item in it being a figure or a date. */
.wi-board__ref {
  display: flex;
  gap: var(--wi-step) var(--wi-gap-2);
  flex-wrap: wrap;
  padding-block: 0 var(--wi-step);
  font-family: var(--wi-figure);
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

.wi-board__stand {
  line-height: 1.5;
  font-size: clamp(var(--wi-t-read), 1rem + 0.5vw, var(--wi-t-lead));
}

/* The slot the offers are stood in. Space around it and no ruling of its own: Creel Rows draws
   whatever goes inside. */
.wi-slot {
  margin-block: var(--wi-gap-2);
}

/* The run of numbered entries, which is the argument. It carries no ruling of its own: each entry
   inside it is spaced off the one above, and the head is already closed at its foot. */
.wi-entries {
  margin-block: var(--wi-gap-2) 0;
}

.wi-entry {
  margin-block: var(--wi-gap-3) 0;
}

/* An entry number sits over its heading on the figure face, as a peg number does in the bar, so
   that one sequence of figures runs down the card. */
.wi-entry__no {
  margin-block: 0;
  font-family: var(--wi-figure);
  font-size: var(--wi-t-cap);
  font-variant-numeric: tabular-nums;
  color: var(--wi-ink-2);
}

/* The stub: whichever rule the prose beside it leaned on, ruled along one side the way a stub is
   torn off a card. A border costs no horizontal room, so this is not an inset. */
.wi-stub {
  margin-block: var(--wi-gap-2);
  padding-block: var(--wi-step);
  border-left: var(--wi-heavy) solid var(--wi-rule);
}

.wi-stub p {
  margin-block: 0;
  padding-inline: var(--wi-gap) 0;
  line-height: 1.55;
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

/* A drawing, inside a frame whose sides are visible, which is what permits the inset. */
.wi-frame {
  margin: var(--wi-gap-2) 0;
  padding: var(--wi-gap);
  border: var(--wi-line) solid var(--wi-peg);
  background-color: var(--wi-column);
}

.wi-frame img {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--wi-card);
}

.wi-frame figcaption {
  padding-block: var(--wi-step) 0;
  line-height: 1.5;
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

/* ---------------------------------------------------------------------------------------------
 * HOW A CARD CLOSES: the questions, the care block, the band naming the match.
 * ------------------------------------------------------------------------------------------- */

.wi-asked {
  margin-block: var(--wi-gap-3);
}

.wi-asked__pairs {
  margin: 0;
  padding: 0;
  border-top: var(--wi-heavy) solid var(--wi-rule);
}

.wi-asked__pairs dt {
  padding-block: var(--wi-gap) var(--wi-step);
  line-height: 1.25;
  font-family: var(--wi-letter);
  font-size: var(--wi-t-h3);
}

.wi-asked__pairs dd {
  margin: 0;
  padding-block: 0 var(--wi-gap);
  border-bottom: var(--wi-line) solid var(--wi-peg);
}

/* The care block stands on all hundred cards by design, which is why the gate treats it as
   furniture. Ruled top and foot and set on a ruled column's stock, so that it reads as the one
   block on the card which is not arithmetic. */
.wi-safety {
  margin-block: var(--wi-gap-3);
  padding-block: var(--wi-gap);
  border-block: var(--wi-heavy) solid var(--wi-rule);
  background-color: var(--wi-column);
}

.wi-safety h2 {
  margin-block: 0 var(--wi-step);
  padding-inline: var(--wi-gap);
  font-size: var(--wi-t-h3);
}

.wi-safety p {
  padding-inline: var(--wi-gap);
  line-height: 1.55;
  font-size: var(--wi-t-cap);
}

.wi-age {
  margin-inline: 0 0.4em;
  padding: 0.1em 0.4em;
  background-color: var(--wi-total);
  font-family: var(--wi-figure);
  font-weight: 700;
  color: var(--wi-ink);
}

/* Where help is to be had, set apart from the reading of the arithmetic above it by a hairline, so
   that the two paragraphs of the care block are not read as one. */
.wi-safety__help {
  margin-block: var(--wi-gap) 0;
  padding-block: var(--wi-gap) 0;
  border-top: var(--wi-line) solid var(--wi-peg);
}

.wi-safety__call {
  white-space: nowrap;
  font-family: var(--wi-figure);
}

.wi-signoff {
  margin-block: var(--wi-gap-3) 0;
  padding-block: var(--wi-gap) 0;
  border-top: var(--wi-heavy) solid var(--wi-rule);
}

.wi-signoff li {
  border-top: var(--wi-line) solid var(--wi-hair);
}

.wi-signoff li:first-child {
  border-top: 0;
}

.wi-signoff__to {
  display: block;
  padding-block: var(--wi-step);
  text-decoration: none;
  color: inherit;
}

.wi-signoff__name {
  display: block;
  line-height: 1.25;
  font-family: var(--wi-letter);
  font-size: var(--wi-t-h3);
  color: var(--wi-dial-d);
}

.wi-signoff__to:hover .wi-signoff__name,
.wi-signoff__to:focus-visible .wi-signoff__name {
  text-decoration: underline;
}

.wi-signoff__found {
  display: block;
  line-height: 1.5;
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

.wi-signoff__ref {
  display: flex;
  gap: var(--wi-step) var(--wi-gap-2);
  flex-wrap: wrap;
  padding-block: var(--wi-gap) 0;
  font-family: var(--wi-figure);
  font-size: var(--wi-t-cap);
  color: var(--wi-ink-2);
}

/* ---------------------------------------------------------------------------------------------
 * MOTION, asked for only where it has been consented to.
 * ------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .wi-pegs a,
  .wi-board__to,
  .wi-signoff__to {
    transition: background-color 120ms ease-out;
  }

  .wi-pegs a:hover,
  .wi-board__to:hover,
  .wi-signoff__to:hover {
    background-color: var(--wi-hair);
  }
}