/* =================================================================================================
   Winners Parade 1.0.2. How instantprizewins.uk draws a parade of foils.

   THE DRAWING IS A STACK OF SCRATCHCARDS AND NOT A TABLE. There is no column of figures to align,
   because no figure is produced anywhere in this package, so the usual reason for ruling a ranking
   into columns is absent. What a foil has instead is six questions and whatever the terms answered
   to each, which is a shape that wants reading across rather than down: question on the left, the
   operator's own sentence beside it, the pair ruled off from the next pair. A foil therefore takes
   the full measure of the page with the next foil under it, and the six asks sit inside it as
   paired rows. Two foils side by side would halve the measure and squeeze every quoted sentence
   into a ribbon four words wide, which is how a list of conditions becomes unreadable while still
   looking tidy.

   NO FACE AND NO TYPE SCALE IS SET DOWN HERE. Lettering is the theme's trade,
   astra-child-foilcard has not shipped, and the registered sheet publishes a palette for this
   domain and no typefaces at all. Naming one here would be choosing on the theme's behalf and then
   losing the argument to it afterwards. A second objection has nothing to do with taste: the names
   in a typeface list are dictated by the typefaces, so any two publishers reaching for the same
   ones write the same sequence of words out, in a document every reader's browser collects. A
   parade is therefore lettered however the page holding it is lettered, and the sizes below are
   fractions of whatever that turns out to be.

   WHAT IS WRITTEN OUT AS A FIGURE is the geometry of this one drawing: the two widths at which it
   rearranges itself, how far a question may run before the answer beside it loses its measure, the
   ruling, and the step the spacing is built on. Each of those describes a foil instead of
   describing this publisher, which is why the package that draws one is where they live. Colour
   comes from assets/palette-standing-in.css until the theme takes that job over.

   TWO REGISTERED INKS ARE NOT SPENT HERE AND THE OMISSION IS DELIBERATE. --fc-standing means what
   survives a priced step and --fc-taken means what that step removed. Both belong to the ladder on
   a guide, where a step either takes a share or passes one along. A parade prices nothing and takes
   nothing, so there is no quantity here for either ink to describe, and spending one of them on
   something else would teach a reader that a colour on this domain means two things, which is the
   same as teaching them it means nothing.

   --fc-silver IS THE ONE INK DOING WORK, and it keeps the meaning the sheet gives it. An
   unscratched panel is a panel nothing can be read off yet, which is exactly an ask nobody
   published and exactly an ask nobody here has opened the terms to look for. It never carries that
   on its own: the words standing in the answer's place spell out which of the two it is.

   ORDER OF THIS FILE: one foil, from its head through its asks to its foot; then the parade the
   foils stand in; then the lines standing above and below it; then the newsroom's own two pieces;
   then the widths.
   ============================================================================================= */

/* ---- The measurements this drawing owns ------------------------------------------------------ */

.fc-parade {
  --fc-parade-step: 0.75rem;
  --fc-parade-hair: 1px;
  --fc-parade-edge: 4px;
  --fc-parade-ask: 15rem;
}

/* ---- One foil --------------------------------------------------------------------------------
   A single heavy edge runs down the starting side, and it is the whole of the furniture here. It
   gives a foil a visible flank, which is what keeps it distinct from the foil beneath without any
   box being drawn round either. */

.fc-foil {
  background-color: var(--fc-lift);
  border-inline-start: var(--fc-parade-edge) solid var(--fc-score);
  padding: calc(var(--fc-parade-step) * 1.5) calc(var(--fc-parade-step) * 1.5)
    calc(var(--fc-parade-step) * 1.25);
  margin-block-end: calc(var(--fc-parade-step) * 1.5);
  color: var(--fc-print);
}

.fc-foil:last-child {
  margin-block-end: 0;
}

/* ---- The head of a foil ---------------------------------------------------------------------- */

.fc-foil__top {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--fc-parade-step);
  align-items: baseline;
  padding-block-end: var(--fc-parade-step);
  border-block-end: var(--fc-parade-hair) solid var(--fc-score);
}

.fc-foil__place {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.fc-foil__no {
  font-variant-numeric: tabular-nums;
  font-size: 1.5em;
  line-height: 1;
  color: var(--fc-print-2);
}

.fc-foil__name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.25em;
  line-height: 1.2;
}

.fc-foil__under,
.fc-foil__prize {
  grid-column: 2;
  margin: calc(var(--fc-parade-step) * 0.25) 0 0;
  font-size: 0.9em;
  color: var(--fc-print-2);
}

.fc-foil__prize {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75em;
}

/* ---- The six asks -----------------------------------------------------------------------------
   A description list, paired across the measure. Below the narrow width the pairs stack, because a
   quoted condition cut to half of a phone screen is worse than a question sitting over its own
   answer. The rule goes under each pair rather than between the two halves of one, so that what is
   being separated is one ask from the next. */

.fc-foil__asks {
  display: grid;
  grid-template-columns: minmax(0, var(--fc-parade-ask)) minmax(0, 1fr);
  column-gap: calc(var(--fc-parade-step) * 1.5);
  margin: var(--fc-parade-step) 0 0;
}

.fc-foil__ask,
.fc-foil__said {
  margin: 0;
  padding-block: calc(var(--fc-parade-step) * 0.6);
  border-block-start: var(--fc-parade-hair) solid var(--fc-score);
}

.fc-foil__ask:first-of-type,
.fc-foil__ask:first-of-type + .fc-foil__said {
  border-block-start: 0;
}

.fc-foil__ask {
  grid-column: 1;
  color: var(--fc-print-2);
  font-size: 0.85em;
  line-height: 1.4;
}

.fc-foil__said {
  grid-column: 2;
  line-height: 1.5;
}

.fc-foil__unsaid {
  color: var(--fc-silver);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8em;
}

/* ---- The foot of a foil ----------------------------------------------------------------------- */

.fc-foil__foot {
  margin-block-start: var(--fc-parade-step);
  padding-block-start: var(--fc-parade-step);
  border-block-start: var(--fc-parade-hair) solid var(--fc-score);
}

.fc-foil__stamp {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75em;
  color: var(--fc-silver);
}

.fc-foil__stamp--listed {
  color: var(--fc-print-2);
}

.fc-foil__record,
.fc-foil__read {
  margin: calc(var(--fc-parade-step) * 0.35) 0 0;
  font-size: 0.85em;
  color: var(--fc-print-2);
}

.fc-foil__read--none {
  color: var(--fc-silver);
}

/* The way out. Two declarations below are pinned, and both of them are hues.

   Astra publishes its configured link colour through a selector that outweighs one class name on an
   anchor, and the colour configured on this domain happens to be the writing ink, which is also the
   fill this button uses. Ink and fill arriving at the same value leaves a solid block with nothing
   readable on it, and of everything drawn on a parade this is the one thing a reader is asked to
   press. No other declaration in this file is pinned. */

.fc-foil__way {
  display: inline-block;
  margin-block-start: var(--fc-parade-step);
  padding: calc(var(--fc-parade-step) * 0.6) calc(var(--fc-parade-step) * 1.25);
  background-color: var(--fc-print) !important;
  color: var(--fc-stock) !important;
  text-decoration: none;
  font-size: 0.9em;
}

.fc-foil__way:focus-visible {
  outline: var(--fc-parade-edge) solid var(--fc-score);
  outline-offset: 2px;
}

.fc-foil__way--none {
  background-color: transparent !important;
  color: var(--fc-print-2) !important;
  border: var(--fc-parade-hair) dashed var(--fc-score);
}

/* Read aloud and not seen: which site the button opens, and that it opens away from this page. */
.fc-foil__aside {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- The parade the foils stand on ------------------------------------------------------------ */

.fc-parade {
  background-color: var(--fc-stock);
  color: var(--fc-print);
  padding: calc(var(--fc-parade-step) * 1.5);
}

.fc-parade__head {
  margin: 0 0 var(--fc-parade-step);
  font-size: 1.15em;
  line-height: 1.3;
}

.fc-parade__foils {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- A parade nobody has put in an order ------------------------------------------------------
   The head of a foil is two columns because the first holds a numeral, and a numeral is a position
   somebody typed. With none typed the template prints no numerals and no ordered list, so there is
   no first column to leave standing empty: everything moves across and the head becomes one column
   the width of the foil. See templates/parade.php for why the numerals go rather than start at one.

   The sentence above the list is set like the other three standing lines, because it is the same
   kind of thing: a note about the parade rather than about any offer in it. It is the only one of
   the four that disappears once the work behind it is done. */

.fc-parade__unranked {
  margin: 0 0 calc(var(--fc-parade-step) * 1.5);
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--fc-print-2);
}

.fc-parade__foils--unranked .fc-foil__top {
  grid-template-columns: minmax(0, 1fr);
}

.fc-parade__foils--unranked .fc-foil__name,
.fc-parade__foils--unranked .fc-foil__under,
.fc-parade__foils--unranked .fc-foil__prize {
  grid-column: 1;
}

/* ---- The lines standing above and below -------------------------------------------------------
   All three are set smaller than a foil and in the quieted ink, because none of them is about any
   particular offer. They frame the parade; the foils are the parade. */

.fc-parade__paid,
.fc-parade__proviso,
.fc-parade__dated {
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--fc-print-2);
}

.fc-parade__paid {
  margin: 0 0 calc(var(--fc-parade-step) * 1.5);
  padding-block-end: var(--fc-parade-step);
  border-block-end: var(--fc-parade-hair) solid var(--fc-score);
}

.fc-parade__proviso,
.fc-parade__dated {
  margin: calc(var(--fc-parade-step) * 1.5) 0 0;
}

.fc-parade__proviso {
  padding-block-start: var(--fc-parade-step);
  border-block-start: var(--fc-parade-hair) solid var(--fc-score);
}

/* ---- The two pieces only the newsroom meets ---------------------------------------------------
   An empty span is what gets stored where a foil has no way out, and the anchor is put in once that
   copy has been taken back out of storage. Suppressing the span here as well means that where the
   substitution does not run, what a reader is left holding is blank space rather than a stray
   element, and blank space is the only acceptable way for this to go wrong. */

.fc-foil__waiting {
  display: none;
}

.fc-parade__signedin {
  display: block;
  margin-block-start: calc(var(--fc-parade-step) * 0.5);
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--fc-print-2);
  border-inline-start: var(--fc-parade-hair) solid var(--fc-score);
  padding-inline-start: calc(var(--fc-parade-step) * 0.75);
}

/* ---- The two widths ---------------------------------------------------------------------------
   Below the first, the asks stop being paired across the measure and stack instead. Below the
   second, the numeral leaves the head's grid and sits over the name, a two-column head on a narrow
   screen costing the operator's name more measure than the numeral is worth. */

@media (max-width: 48rem) {
  .fc-foil__asks {
    grid-template-columns: minmax(0, 1fr);
  }

  .fc-foil__ask {
    padding-block-end: 0;
  }

  .fc-foil__said {
    grid-column: 1;
    border-block-start: 0;
    padding-block-start: calc(var(--fc-parade-step) * 0.2);
  }

  .fc-foil__ask:first-of-type + .fc-foil__said {
    border-block-start: 0;
  }
}

@media (max-width: 30rem) {
  .fc-parade,
  .fc-foil {
    padding-inline: var(--fc-parade-step);
  }

  .fc-foil__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .fc-foil__name,
  .fc-foil__under,
  .fc-foil__prize {
    grid-column: 1;
  }
}