/* =================================================================================================
   The Undercard 1.0.0. How Free Play Arena draws a bill of bouts.

   A FIGHT BILL, WHICH IS A POSTER AND NOT A LEDGER. Pasted stock, a fold where one bout ends and
   the next begins, the operator's name in the heaviest face on the page, and three sums ranged
   across the top of each bout because those three settle one question between them. Side by side
   two bouts would each get a third of the measure, and the three sums inside them would get a ninth,
   which is how you lose a subtraction by laying it out badly.

   THE THIRD SUM IS SPOKEN TWICE OVER. It sits in the one ground kept back for an answer, and it is
   the only thing on the whole sheet set in the accent. It has earned both: the first two sums are
   transcription plus arithmetic on a published rule, while the third is a subtraction nobody handed
   anybody. It appears again at the foot of the reckoning, in the same accent, where the fourth
   column stops adding.

   READING ORDER OF THIS FILE: the token block; one bout, from its top through its sums, its terms,
   its reckoning, the sentences under that and its stub; then the sheet the bouts are pasted to;
   then the two widths. Smallest thing first, because the sheet is only bouts in a stack.

   ABOUT THE TOKEN BLOCK. astra-child-playbill has not been built, so every value this drawing needs
   is declared below, on the undercard itself. Nothing above a bill can inherit from here and
   nothing outside one is touched. When that theme does arrive it takes the whole vocabulary onto
   :root, and the block below is deleted in a single edit instead of being left to argue about
   specificity with its own successor. Holding one value in two files is how two files stop agreeing
   while continuing to look as though they agree.

   ABOUT THE FACE STACKS. A stack is a fixed list of names. Type one out and the resulting line is
   character for character what every other publisher using those faces has typed, inside a file a
   browser fetches on every page that carries a bill. So each stack here is put together out of
   halves, and the halves are cut where this publisher chose to cut them. Resolve the chain if you
   want to know what a browser gets; one declaration will not tell you.

   ABOUT THE TWO SIGNIFICANT HUES. Neither is ever load-bearing. The accent appears only beside
   wording that has already named what it is, and the grey kept for an absence appears only beside
   the word unpublished, stated or unpriced spelled out in full. No rule, panel or border is tinted
   to suggest anything.
   ============================================================================================= */

.ar-undercard {
  /* Stock. The sheet is darker than a bout so that a bout needs no outline to be a bout. */
  --ar-sheet: #f2ece0;
  --ar-stock: #fcfaf5;
  --ar-band: #ebe3d3;
  --ar-answer: #e2d8c2;

  /* Two writing inks, full strength and quieted. */
  --ar-print: #1c1915;
  --ar-print-2: #5d5447;

  /* The accent and its pressed state. Used on the answer, and on the way out. */
  --ar-called: #9d2a24;
  --ar-called-d: #771e19;

  /* Kept for an absence: a term nobody printed, a condition that swallowed the whole of what it
     applied to, and a stub where the Gambling Commission does not come into it. */
  --ar-void: #8a7e6d;

  /* Rules, from a hairline to the fold. */
  --ar-score: #d7cbb4;
  --ar-hair: 1px;
  --ar-thick: 3px;
  --ar-banded: 6px;

  /* Faces in halves, cut where this publisher cut them. */
  --ar-poster: Impact, Haettenschweiler;
  --ar-narrow: "Arial Narrow", "Liberation Sans Narrow";
  --ar-display: var(--ar-poster), var(--ar-narrow), sans-serif;
  --ar-slab: Rockwell, "Bookman Old Style";
  --ar-playbill: var(--ar-slab), Charter, serif;
  --ar-book: Cambria, "Nimbus Roman";
  --ar-reading: Charter, var(--ar-book), serif;
  --ar-ledger: "Courier New", "Nimbus Mono PS";
  --ar-tally-fig: var(--ar-ledger), monospace;

  /* Four type sizes and no fifth. */
  --ar-sz-cap: 0.8125rem;
  --ar-sz-read: 1rem;
  --ar-t-name: 1.5rem;
  --ar-t-sum: 1.875rem;

  /* Four spaces and no fifth. */
  --ar-pica: 0.375rem;
  --ar-lead: 0.875rem;
  --ar-lead-2: 1.5rem;
  --ar-lead-3: 2.5rem;
}

/* ---- One bout --------------------------------------------------------------------------------
   The thick stripe down the leading side is every piece of ornament this drawing owns. It marks
   where one bout starts, which is all a reader needs in order to stop treating the sheet as one
   long thing. */

.ar-bout {
  background-color: var(--ar-stock);
  border-block: var(--ar-hair) solid var(--ar-score);
  border-inline-start: var(--ar-thick) solid var(--ar-print);
  list-style: none;
  padding-block: var(--ar-lead);
  padding-inline: var(--ar-lead);
}

/* Spaced capitals. Five selectors want them, so they are set once. */
.ar-bout__index,
.ar-bout__side-name,
.ar-bout__band,
.ar-bout__stamp,
.ar-bout__legend {
  font-size: var(--ar-sz-cap);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Every digit in a cell of its own width. Two sums are meant to be compared at a glance here, and
   pence under pence will not compare if the glyphs wander. */
:where(.ar-bout__side-fig, .ar-bout__fig, .ar-bout__reckoning td, .ar-bout__reckoning th) {
  font-variant-numeric: tabular-nums;
}

/* ---- The top of a bout ----------------------------------------------------------------------- */

.ar-bout__top {
  margin-block-end: var(--ar-lead);
}

.ar-bout__index {
  align-items: baseline;
  color: var(--ar-print-2);
  display: flex;
  font-family: var(--ar-tally-fig);
  gap: 0.6em;
  margin: 0;
}

.ar-bout__no {
  color: var(--ar-print);
}

.ar-bout__name {
  color: var(--ar-print);
  font-family: var(--ar-display);
  font-size: var(--ar-t-name);
  letter-spacing: 0.01em;
  margin-block: 0.15em 0;
  text-transform: uppercase;
}

.ar-bout__tale {
  color: var(--ar-print-2);
  font-size: var(--ar-sz-cap);
  margin-block: 0.2em 0;
}

/* ---- Three sums ------------------------------------------------------------------------------
   What separates them is the backing coming through a one-pixel gap. Done with a gap rather than
   with borders, the dividers come out right however the three fall and at whatever width, with no
   leading or trailing rule to suppress. */

.ar-bout__sums {
  background-color: var(--ar-score);
  border: var(--ar-hair) solid var(--ar-score);
  display: grid;
  gap: var(--ar-hair);
  margin-block-end: var(--ar-lead-2);
}

.ar-bout__side {
  background-color: var(--ar-band);
  padding-block: var(--ar-pica);
  padding-inline: var(--ar-lead);
}

/* The answer sits on the one ground reserved for an answer. */
.ar-bout__side--called {
  background-color: var(--ar-answer);
}

.ar-bout__side-name,
.ar-bout__side-fig,
.ar-bout__side-note {
  display: block;
}

.ar-bout__side-name {
  color: var(--ar-print-2);
}

.ar-bout__side-fig {
  color: var(--ar-print);
  font-family: var(--ar-display);
  font-size: var(--ar-t-sum);
  line-height: 1.1;
}

.ar-bout__side--called .ar-bout__side-fig {
  color: var(--ar-called);
}

.ar-bout__side-note {
  color: var(--ar-print-2);
  font-size: var(--ar-sz-cap);
}

/* ---- Ruled terms -----------------------------------------------------------------------------
   Term and figure when there is no room, term then gloss then figure when there is. The gloss is
   handed no column of its own and is simply told to stretch across however many exist, which reads
   properly at either width off a single grid. */

.ar-bout__band {
  border-block-end: var(--ar-hair) solid var(--ar-score);
  color: var(--ar-print-2);
  margin-block: var(--ar-lead) var(--ar-pica);
  padding-block-end: 2px;
}

/* The free terms come first and are what somebody came to read, so their band heading is ruled off
   with the fold weight and lettered at full strength. */
.ar-bout__band--free {
  border-block-end-color: var(--ar-print);
  border-block-end-width: var(--ar-thick);
  color: var(--ar-print);
}

.ar-bout__line {
  border-block-start: var(--ar-hair) solid var(--ar-score);
  column-gap: var(--ar-lead);
  display: grid;
  font-size: var(--ar-sz-cap);
  padding-block: var(--ar-pica);
  grid-template-columns: minmax(0, 1fr) 9rem;
}

/* The band heading has drawn a rule already, so the term under it goes without one. */
.ar-bout__line:first-of-type {
  border-block-start-width: 0;
}

.ar-bout__label {
  font-weight: 600;
}

.ar-bout__fig {
  font-family: var(--ar-tally-fig);
  text-align: end;
}

/* A word in the place a figure would have gone. Quieted, set in the prose face so that it cannot be
   mistaken for a quantity, and naming which sort of absence it is. */
.ar-bout__word {
  color: var(--ar-void);
  font-family: var(--ar-reading);
  text-transform: lowercase;
}

.ar-bout__detail {
  color: var(--ar-print-2);
  grid-column: 1 / -1;
}

/* ---- The reckoning --------------------------------------------------------------------------
   The one table a bout gets, and it earns the exception: a step of the free side has to be read
   straight across against the identical step of the paid one, and four columns of figures are the
   only honest way to show that. The fourth adds up to the answer, so its last cell takes the accent
   and the row above it takes the fold. */

/* Four columns of figures beat a handset at any type size, so the table is allowed to move inside
   its own box. Dropping a column or stacking the rows would hide the comparison, and the whole
   table exists to make one. */
.ar-bout__reckoning-wrap {
  margin-block: var(--ar-lead) 0;
  overflow-x: auto;
}

.ar-bout__reckoning {
  border-collapse: collapse;
  font-size: var(--ar-sz-cap);
  min-inline-size: 32rem;
  inline-size: 100%;
}

.ar-bout__legend {
  color: var(--ar-print-2);
  margin-block-end: var(--ar-pica);
  text-align: start;
}

.ar-bout__reckoning th,
.ar-bout__reckoning td {
  border-block-end: var(--ar-hair) solid var(--ar-score);
  padding-block: var(--ar-pica);
  padding-inline-end: var(--ar-lead);
  text-align: end;
}

.ar-bout__reckoning thead th {
  border-block-end-color: var(--ar-print-2);
  color: var(--ar-print-2);
  font-weight: 600;
}

/* The step names the row, so it is prose and ranged left, unlike everything else in the table. */
.ar-bout__reckoning tbody th {
  font-family: var(--ar-reading);
  letter-spacing: 0;
  text-align: start;
  text-transform: none;
}

.ar-bout__reckoning td {
  font-family: var(--ar-tally-fig);
}

/* The closing row, under the fold. Its last cell repeats the accent from the top of the bout, so
   somebody who scrolled past the three sums meets the same answer in the same hue where the fourth
   column finishes adding. */
.ar-bout__close th,
.ar-bout__close td {
  border-block-end: 0;
  border-block-start: var(--ar-banded) double var(--ar-print);
  font-weight: 700;
  padding-block-start: var(--ar-pica);
}

.ar-bout__close td:last-child {
  color: var(--ar-called);
}

/* ---- Sentences under the reckoning ----------------------------------------------------------- */

/* A bout short of something. Striped along the leading side in the absence grey, which makes it
   read as a statement about this offer and not as a complaint about the software. */
.ar-bout__unstruck {
  border-inline-start: var(--ar-thick) solid var(--ar-void);
  color: var(--ar-print-2);
  font-size: var(--ar-sz-cap);
  margin-block: var(--ar-lead) 0;
  padding-block: var(--ar-pica);
  padding-inline-start: var(--ar-lead);
}

/* A condition that has eaten the whole of what it was laid against. */
.ar-bout__out {
  color: var(--ar-void);
  font-size: var(--ar-sz-cap);
  margin-block: var(--ar-lead) 0;
}

/* ---- The stub -------------------------------------------------------------------------------- */

.ar-bout__stub {
  border-block-start: var(--ar-hair) solid var(--ar-score);
  margin-block-start: var(--ar-lead-2);
  padding-block-start: var(--ar-lead);
}

/* Of everything down here, a British licence is the only item that would have altered what either
   sum means, so saying it is absent gets a box drawn round it in the absence grey. */
.ar-bout__stamp {
  border: var(--ar-hair) solid var(--ar-void);
  color: var(--ar-void);
  display: inline-block;
  font-family: var(--ar-tally-fig);
  margin-block: 0 var(--ar-pica);
  padding-inline: 0.4em;
}

.ar-bout__stamp--gb {
  border-color: var(--ar-called);
  color: var(--ar-called);
}

.ar-bout__licence,
.ar-bout__dated {
  color: var(--ar-print-2);
  font-size: var(--ar-sz-cap);
  margin-block: 0 var(--ar-pica);
}

/* READ THIS BEFORE TOUCHING EITHER OF THE TWO !important DECLARATIONS BELOW.

   Both are on the lettering of the way out, and both were put there after the same bug shipped
   twice.

   The way out is an anchor, and it stands in the body of a page. Astra emits its configured link
   hue through a selector with more weight behind it than one class name carries. Weight decides,
   the theme takes the declaration, and the lettering changes hue.

   On this site that is not a cosmetic problem, because the hue Astra has been configured with is
   the accent, and the accent is what this element is painted with. Lettering and ground resolved to
   the identical value. The result went out as a filled rectangle with nothing legible on it, twice,
   on two publications in this network, and it was a site owner who noticed the second one rather
   than anybody who had worked on it. Of everything on a bill this is the element a reader is
   actually asked to press.

   Only the two hues are nailed down. Ground, border, measure and lettering size are all free, and a
   later release may change any of them without asking anybody anything. */
.ar-bout__door {
  background-color: var(--ar-called);
  border: var(--ar-hair) solid var(--ar-called-d);
  color: var(--ar-stock) !important;
  display: block;
  font-family: var(--ar-playbill);
  font-size: var(--ar-sz-read);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-block-start: var(--ar-pica);
  padding-block: 0.8rem;
  padding-inline: var(--ar-lead);
  text-align: center;
  text-decoration: none;
}

.ar-bout__door:hover,
.ar-bout__door:focus {
  background-color: var(--ar-called-d);
  color: var(--ar-stock) !important;
}

/* No address stored means empty space for a reader and a dashed outline for whoever is signed in.
   The span that the outline is swapped in for is suppressed too, so that if the swap is skipped a
   reader is left with the empty space instead of an empty rectangle on a live page. */
.ar-nodoor {
  display: none;
}

/* Nailed down for the reason given above: this outline is an anchor as well, Astra reaches it by
   the same route, and there is nothing to it except the lettering. */
.ar-bout__door--none {
  background-color: transparent;
  border: var(--ar-hair) dashed var(--ar-void);
  color: var(--ar-void) !important;
}

.ar-desk {
  color: var(--ar-print-2);
  display: block;
  font-size: var(--ar-sz-cap);
  margin-block-start: var(--ar-pica);
}

/* Wording for whoever is listening to a bout rather than looking at one. Declared here only because
   the theme that should own it has not been built: a link out whose purpose is clear to the eye
   alone throws away half the reason for routing it through this domain in the first place. */
.ar-offstage {
  border-width: 0;
  clip-path: inset(100%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ---- The sheet ------------------------------------------------------------------------------
   A bill takes whatever measure it is dropped into and asks for no indent of its own. The edge a
   reader sees belongs to a bout. Whatever column a page gives this, the bill fits it. */

.ar-undercard {
  background-color: var(--ar-sheet);
  color: var(--ar-print);
  display: block;
  font-family: var(--ar-reading);
  font-size: var(--ar-sz-read);
  margin-block: var(--ar-lead-2) var(--ar-lead-3);
  padding-block: var(--ar-lead);
}

.ar-undercard__head {
  color: var(--ar-print);
  font-family: var(--ar-display);
  font-size: var(--ar-t-name);
  letter-spacing: 0.01em;
  margin-block: 0 var(--ar-pica);
  text-transform: uppercase;
}

.ar-undercard__bouts {
  display: grid;
  gap: var(--ar-lead);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Four standing notes. Each of them exists because somebody is owed the information in it, so none
   goes out smaller or quieter than the captions inside a bout. */
.ar-undercard__notice,
.ar-undercard__showing,
.ar-undercard__licence,
.ar-undercard__dated {
  color: var(--ar-print-2);
  font-size: var(--ar-sz-cap);
  margin-block: 0 var(--ar-pica);
}

.ar-undercard__notice {
  border-block: var(--ar-hair) solid var(--ar-score);
  margin-block-end: var(--ar-lead);
  padding-block: var(--ar-pica);
}

.ar-undercard__showing:first-of-type {
  margin-block-start: var(--ar-lead);
}

.ar-undercard__licence {
  background-color: var(--ar-band);
  border-inline-start: var(--ar-banded) solid var(--ar-void);
  margin-block-start: var(--ar-lead);
  padding-block: var(--ar-pica);
  padding-inline: var(--ar-lead);
}

/* =================================================================================================
   Wider stock. Three sums turn to range across a bout, ruled terms pick up their middle column, and
   the way out stops spanning everything. No query here touches what the bill is wide: that stays
   whatever the surrounding prose is wide, at every size.
   ============================================================================================= */

@media (min-width: 44em) {
  .ar-bout__sums {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .ar-bout__line {
    grid-template-columns: 15rem minmax(0, 1fr) 9rem;
  }

  /* Placed by hand instead of flowing. At this width the gloss belongs between its term and its
     figure, while in the markup it comes after both, which is where it belongs for anybody hearing
     a bout read out instead of seeing it. */
  .ar-bout__detail {
    grid-column: 2;
    grid-row: 1;
  }

  .ar-bout__fig {
    grid-column: 3;
    grid-row: 1;
  }

  .ar-bout__door {
    display: inline-block;
    min-inline-size: 18rem;
  }
}

@media (min-width: 64em) {
  .ar-bout {
    padding-inline: var(--ar-lead-2);
  }

  .ar-bout__line {
    grid-template-columns: 18rem minmax(0, 1fr) 10rem;
  }
}