/* =================================================================================================
   Creel Rows 1.0.0, the ranking for The Weigh-In.

   THE DRAWING IS A MATCH ANGLER'S WEIGH CARD. Buff stock, ruled across, a row to each catch, and
   the figure the reel produced kept visibly apart from the figures an offer states about itself.
   The row is the unit, so a creel takes the full measure of the sheet with the next creel beneath
   it, and the three parts of a creel stand abreast inside it: the reel, the offer, and what the two
   make. Setting two creels alongside each other would cut each of those three parts to a third of
   its width and lose the one comparison the card is drawn for.

   FILE ORDER: a creel, then its head, its three parts, its ruled lines, its dial, its foot; then
   the sheet the creels stand on; then the two widths. Inside out, the sheet being only a stack of
   creels.

   NO COLOUR, FACE, TYPE SIZE OR SPACE IS SET DOWN HERE. The theme astra-child-weighcard publishes
   the stock, the inks, the ruling, three faces, six type rungs and a spacing scale on :root under
   the --wi- names, and this file reads them. It declares no custom property of its own and puts no
   fallback inside any var(), which is deliberate: a fallback is a second copy of a value this
   plugin does not own, and a copy can drift while still looking like agreement. readme.txt lists
   every name read, so the pair can be checked rather than assumed.

   WHAT IS WRITTEN OUT HERE is the geometry of this one drawing, which the theme publishes no token
   for and should not: two breakpoints, the width of the label and figure columns, the least the
   dial may be squeezed to before it slides, the tracking on the small capitals, and a tight line
   box for the one figure set large. Those describe a creel rather than the house, so they belong
   to the plugin that draws one.

   THE TWO INKS COME WITH THEIR MEANINGS ALREADY FIXED, and this file does not bend them.
   --wi-dial is what the reel states, which the theme calls the weights that count towards a
   result, so it letters the reel's own figures and the weight the reel produced out of them.
   --wi-void is what an offer states on its own, which weighs nothing until a reel has been through
   it, so it letters a term with no published figure, a reading the scale refused, a play-through
   that priced out whatever it was laid against, and a foot with no British licence standing behind
   it. Neither ink is ever asked to carry a meaning by itself: wherever one appears, the words
   beside it have already said which it is, and no border or panel is tinted for effect.
   ============================================================================================= */

/* ---- A creel ---------------------------------------------------------------------------------
   The heavy rule down the inline start is the only piece of furniture on the card. It gives a creel
   an edge a reader can see, which is what tells it apart from the sheet underneath. */

.wi-creel {
  background-color: var(--wi-card);
  border-block: var(--wi-line) solid var(--wi-hair);
  border-inline-start: var(--wi-heavy) solid var(--wi-ink);
  list-style: none;
  padding-block: var(--wi-gap);
  padding-inline: var(--wi-gap);
}

/* Small capitals, wanted in five places and therefore set in one. */
.wi-creel__index,
.wi-part__name,
.wi-rule,
.wi-creel__mark,
.wi-creel__caption {
  font-size: var(--wi-t-cap);
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

/* Lining figures throughout. A weight at one build is read against a weight at another, and a
   column of pence against the column above it, so every digit on the card sits in a cell of fixed
   width wherever it turns up. */
:where(.wi-part__fig, .wi-line__fig, .wi-creel__gap-fig, .wi-creel__dial td, .wi-creel__dial th) {
  font-variant-numeric: tabular-nums;
}

/* ---- The head of a creel --------------------------------------------------------------------- */

.wi-creel__head {
  margin-block-end: var(--wi-gap);
}

.wi-creel__index {
  align-items: baseline;
  color: var(--wi-ink-2);
  display: flex;
  font-family: var(--wi-figure);
  gap: 0.6em;
  margin: 0;
}

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

.wi-creel__name {
  color: var(--wi-ink);
  font-family: var(--wi-letter);
  font-size: var(--wi-t-h3);
  margin-block: 0.15em 0;
}

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

/* ---- The three parts -------------------------------------------------------------------------
   What divides the parts is the backing showing through a gap one rule wide. Drawn that way the
   count of rules is always one short of the count of parts, at either width and however the parts
   fall. */

.wi-creel__parts {
  background-color: var(--wi-rule);
  border: var(--wi-line) solid var(--wi-rule);
  display: grid;
  gap: var(--wi-line);
  margin-block-end: var(--wi-step);
}

.wi-part {
  background-color: var(--wi-column);
  padding-block: var(--wi-step);
  padding-inline: var(--wi-gap);
}

/* The third part is the one the scale produced, so it stands in the ground kept for a total. */
.wi-part--called {
  background-color: var(--wi-total);
}

.wi-part__name,
.wi-part__fig,
.wi-part__note {
  display: block;
}

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

.wi-part__fig {
  color: var(--wi-ink);
  font-family: var(--wi-figure);
  font-size: var(--wi-t-h2);
  line-height: 1.1;
}

.wi-part--called .wi-part__fig {
  color: var(--wi-dial);
}

.wi-part__note {
  color: var(--wi-ink-2);
  font-size: var(--wi-t-cap);
}

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

/* ---- The ruled lines -------------------------------------------------------------------------
   Two columns narrow, three wide, with the detail told to span whatever columns exist rather than
   given a cell of its own. A spanning rule reads correctly at both widths and saves declaring a
   second grid to move it. */

.wi-rule {
  border-block-end: var(--wi-line) solid var(--wi-rule);
  color: var(--wi-ink-2);
  margin-block: var(--wi-gap) var(--wi-step);
  padding-block-end: 2px;
}

/* The reel's lines open a creel and are the half of it that holds still, so the heading over them
   takes the heavy rule and the full-strength ink. */
.wi-rule--reel {
  border-block-end-color: var(--wi-ink);
  border-block-end-width: var(--wi-heavy);
  color: var(--wi-ink);
}

.wi-line {
  border-block-start: var(--wi-line) solid var(--wi-hair);
  column-gap: var(--wi-step);
  display: grid;
  font-size: var(--wi-t-cap);
  grid-template-columns: minmax(0, 1fr) 8rem;
  padding-block: var(--wi-step);
}

.wi-line:first-of-type {
  border-block-start: 0;
}

.wi-line__name {
  font-weight: 600;
}

.wi-line__fig {
  font-family: var(--wi-figure);
  text-align: end;
}

/* A word put where a figure does not exist. It takes the ink for whatever weighs nothing on its
   own and says in words which sort of absence it is. */
.wi-line__word {
  color: var(--wi-void);
  font-family: var(--wi-prose);
  text-transform: lowercase;
}

.wi-line__detail {
  color: var(--wi-ink-2);
  grid-column: 1 / -1;
}

/* ---- The dial -------------------------------------------------------------------------------
   The one table on the card, because this is the single place where a figure is worked at several
   settings and the settings have to be read against one another. */

/* Six columns of figures will outgrow a handset however narrow the type goes, so the table is
   allowed to slide inside its own wrapper rather than being broken up or having a column dropped.
   Nothing on a weigh card is worth hiding to save a reader a sideways push. */
.wi-creel__dial-wrap {
  margin-block: var(--wi-gap) 0;
  overflow-x: auto;
}

.wi-creel__dial {
  border-collapse: collapse;
  font-size: var(--wi-t-cap);
  inline-size: 100%;
  min-inline-size: 34rem;
}

.wi-creel__caption {
  color: var(--wi-ink-2);
  margin-block-end: var(--wi-step);
  text-align: start;
}

.wi-creel__dial th,
.wi-creel__dial td {
  border-block-end: var(--wi-line) solid var(--wi-hair);
  padding-block: var(--wi-step);
  padding-inline-end: var(--wi-step);
  text-align: end;
}

.wi-creel__dial thead th {
  border-block-end-color: var(--wi-rule);
  color: var(--wi-ink-2);
  font-weight: 600;
}

/* The published return heads each row of the body, reading as the label it is. */
.wi-creel__dial tbody th {
  font-family: var(--wi-figure);
  text-align: start;
}

/* A setting at which the play-through priced out everything laid against it. Every figure it has
   still prints, and the ink reports that what came of it counts for nothing. The words beside the
   return say the same thing, so the ink is never the only thing saying it. */
.wi-creel__priced-out th,
.wi-creel__priced-out td:last-child {
  color: var(--wi-void);
}

.wi-creel__out {
  display: block;
  font-family: var(--wi-prose);
  letter-spacing: 0;
  text-transform: none;
}

.wi-creel__gap {
  border-block-start: var(--wi-heavy) solid var(--wi-ink);
  color: var(--wi-ink-2);
  font-size: var(--wi-t-cap);
  margin-block: var(--wi-step) 0;
  padding-block: var(--wi-step);
}

.wi-creel__gap-fig {
  color: var(--wi-dial);
  font-family: var(--wi-figure);
  font-size: var(--wi-t-h2);
  font-weight: 700;
}

/* ---- The foot of a creel ---------------------------------------------------------------------- */

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

/* A licence is the one thing at the foot of a creel that would have counted towards the result, so
   its absence is lettered and framed in the ink for whatever does not. */
.wi-creel__mark {
  border: var(--wi-line) solid var(--wi-void);
  color: var(--wi-void);
  display: inline-block;
  font-family: var(--wi-figure);
  margin-block: 0 var(--wi-step);
  padding-inline: 0.4em;
}

.wi-creel__mark--gb {
  border-color: var(--wi-dial);
  color: var(--wi-dial);
}

.wi-creel__licence,
.wi-creel__dated {
  color: var(--wi-ink-2);
  font-size: var(--wi-t-cap);
  margin-block: 0 var(--wi-step);
}

/* WHY THE INK IS PINNED DOWN HERE.

   #17395C appears twice in this site's plan and the two appearances disagree with each other. It
   is what a reader's eye follows in running text, and it is what this button stands on. Palette
   entry 0 admits as much in its own comment. Keeping them apart is the job of one declaration,
   the white below, and that declaration was losing.

   Losing to whom: functions.php gives Astra that very hue for its links, and what Astra emits to
   carry it reaches deeper into a page than a lone class ever can. Specificity decides, the parent
   wins, and from there the wording takes on the hue of whatever lies beneath it. Legible markup,
   legible source, nothing to see.

   Caught before a reader did, which is luck and not diligence: no offer had been entered, so no
   button existed to be looked at. Pinning the ink and nothing else. A later release may restyle
   the ground, the rule round it or its measure without asking. */
.wi-creel__go {
  background-color: var(--wi-dial);
  border: var(--wi-line) solid var(--wi-dial-d);
  color: var(--wi-card) !important;
  display: block;
  font-family: var(--wi-letter);
  font-size: var(--wi-t-read);
  font-weight: 600;
  margin-block-start: var(--wi-step);
  padding-block: 0.75rem;
  padding-inline: var(--wi-gap);
  text-align: center;
  text-decoration: none;
}

.wi-creel__go:hover,
.wi-creel__go:focus {
  background-color: var(--wi-dial-d);
  color: var(--wi-card) !important;
}

/* With no destination typed in, a reader is given blank space and a signed-in editor the dashed
   outline. The span the outline stands in for is hidden here as well, so a replacement that never
   ran leaves nothing behind rather than an empty box. */
.wi-noway {
  display: none;
}

/* Pinned for the reason above. This outline is an anchor too, so the parent reaches it as well,
   and here the wording is all there is. */
.wi-creel__go--none {
  background-color: transparent;
  border: var(--wi-line) dashed var(--wi-void);
  color: var(--wi-void) !important;
}

.wi-editor {
  color: var(--wi-ink-2);
  display: block;
  font-size: var(--wi-t-cap);
  margin-block-start: var(--wi-step);
}

/* ---- The sheet ------------------------------------------------------------------------------
   The sheet keeps the measure of whatever it is dropped into and claims no inset of its own, the
   visible edge on this card belonging to a creel. */

.wi-keepnet {
  color: var(--wi-ink);
  display: block;
  font-family: var(--wi-prose);
  font-size: var(--wi-t-read);
  margin-block: var(--wi-gap-2) var(--wi-gap-3);
}

.wi-keepnet__head {
  color: var(--wi-ink);
  font-family: var(--wi-letter);
  font-size: var(--wi-t-h2);
  margin-block: 0 var(--wi-step);
}

.wi-keepnet__rows {
  display: grid;
  gap: var(--wi-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The standing lines. Every one of them tells a reader something they are entitled to, so not one
   is lettered below the caption rung or in a weaker ink than the captions on the card. */
.wi-keepnet__paid,
.wi-keepnet__method,
.wi-keepnet__licence,
.wi-keepnet__dated {
  color: var(--wi-ink-2);
  font-size: var(--wi-t-cap);
  margin-block: 0 var(--wi-step);
}

.wi-keepnet__paid {
  border-block: var(--wi-line) solid var(--wi-rule);
  margin-block-end: var(--wi-gap);
  padding-block: var(--wi-step);
}

.wi-keepnet__method:first-of-type {
  margin-block-start: var(--wi-gap);
}

.wi-keepnet__licence {
  background-color: var(--wi-column);
  border-inline-start: var(--wi-double) solid var(--wi-void);
  margin-block-start: var(--wi-gap);
  padding-block: var(--wi-step);
  padding-inline: var(--wi-gap);
}

/* =================================================================================================
   Wider sheets. The parts turn to face across the card, the ruled lines take their third column,
   and the button stops running the whole measure. Neither width touches the measure of the sheet,
   which is the measure of the prose around it at any size at all.
   ============================================================================================= */

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

  .wi-line {
    grid-template-columns: 14rem minmax(0, 1fr) 8rem;
  }

  /* Placed rather than left to the auto-flow, because the detail reads between the label and the
     figure at this width while being written after both in the markup, where it belongs to
     anybody listening to a row instead of looking at one. */
  .wi-line__detail {
    grid-column: 2;
    grid-row: 1;
  }

  .wi-line__fig {
    grid-column: 3;
    grid-row: 1;
  }

  .wi-creel__go {
    display: inline-block;
    min-inline-size: 17rem;
  }
}

@media (min-width: 64em) {
  .wi-creel {
    padding-inline: var(--wi-gap-2);
  }

  .wi-line {
    grid-template-columns: 17rem minmax(0, 1fr) 9rem;
  }
}