/* Term Slips 2.0.0, the ranking for Stated and Unstated.
   ---------------------------------------------------------------------------------------------
   WHAT THIS STYLESHEET IS DRAWING. Not a ticket and not a receipt. A slip is a docket raised
   against one offer, and the drawing has one job: make the distance between a claim and the place
   it can be checked visible without anybody reading a word.

   So the slip runs the full width of the sheet and the three columns sit inside it, side by side,
   left to right in the order a reader meets them: what is stated, what qualifies it, what is
   unstated. Two slips are never set beside each other, because three columns of terms cannot be
   read in a third of a page and a layout that tries is a layout nobody finishes.

   Inside a column the terms run outwards from the banner. Each one carries a numbered tag, and the
   tag is the whole of the colour logic here: the first three numbers are things a reader could
   have had in hand, drawn in the said colour, and the last three could not, drawn in the unsaid
   colour. Nothing decorative is ever set in the unsaid colour, because on this site that colour
   means money somebody could not see coming.

   TOKENS. Colour and measure come from astra-child-plainprint on :root under the --sl- names. The
   block below repeats only what this file actually uses, so the slip still reads before the theme
   lands. Lettering is not repeated at all: each rule that needs a face asks for the token and
   names one short fallback, so this file never claims to own a type stack.
   --------------------------------------------------------------------------------------------- */

/* The root is .sl-slips and not .sl-file, though the file is what it holds. The pages plugin on
   this site already owns .sl-file for the slot a page leaves for this block, and two stylesheets
   drawing the same class is how a margin ends up applied twice. */
.sl-slips {
  --sl-paper: #F6F3F5;
  --sl-panel: #EBE5E9;
  --sl-panel-2: #DFD7DD;
  --sl-ink: #1B161A;
  --sl-ink-2: #544B52;
  --sl-said: #146450;
  --sl-said-d: #0D4435;
  --sl-unsaid: #5A1A52;
  --sl-rule: #7B6C76;
  --sl-hair: #DFD5DC;
  --sl-t-cap: 0.8125rem;
  --sl-t-base: 1.0625rem;
  --sl-t-h3: 1.375rem;
  --sl-t-h2: 1.75rem;
  --sl-t-fig: 1.75rem;
  --sl-step: 0.5rem;
  --sl-gap: 1rem;
  --sl-gap-2: 1.75rem;
  --sl-gap-3: 2.75rem;
  --sl-edge: 2px;
  --sl-line: 1px;

  color: var(--sl-ink);
  display: block;
  font-size: var(--sl-t-base);
  font-family: var(--sl-prose, system-ui, sans-serif);
  line-height: 1.6;
  margin-block: var(--sl-gap-2) var(--sl-gap-3);
}

/* Every figure on a slip is read against the figure beside it, above it or on the slip below, so
   all of them are lined up on one rule rather than block by block. */
:where(.sl-drop__fig, .sl-drop__count, .sl-col__fig, .sl-term__take) {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------------
   The standing lines around the file. Each is something a reader is owed rather than something
   tucked away, so none of them drops under the caption size.
   --------------------------------------------------------------------------------------------- */

.sl-slips__head {
  font-family: var(--sl-letter, Georgia, serif);
  font-size: var(--sl-t-h2);
  margin-block: 0 var(--sl-step);
  line-height: 1.22;
}

:where(.sl-slips__paid, .sl-slips__note, .sl-slips__limit, .sl-slips__dated) {
  color: var(--sl-ink-2);
  font-size: var(--sl-t-cap);
  margin-block: 0 var(--sl-step);
}

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

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

.sl-slips__limit {
  background-color: var(--sl-panel);
  border-inline-start: 3px solid var(--sl-unsaid);
  margin-block-start: var(--sl-gap);
  padding: var(--sl-step) var(--sl-gap);
}

/* ---------------------------------------------------------------------------------------------
   One slip, full width. The set is a stack, not a shelf.
   --------------------------------------------------------------------------------------------- */

.sl-slips__set {
  display: flex;
  flex-direction: column;
  gap: var(--sl-gap-2);
}

.sl-slip {
  background-color: var(--sl-paper);
  border: var(--sl-edge) solid var(--sl-ink);
  padding: var(--sl-gap);
}

.sl-slip__ref {
  border-block-end: var(--sl-line) solid var(--sl-rule);
  color: var(--sl-ink-2);
  display: flex;
  font-family: var(--sl-numeral, monospace);
  font-size: var(--sl-t-cap);
  justify-content: space-between;
  letter-spacing: 0.06em;
  margin-block: 0 var(--sl-step);
  padding-block-end: var(--sl-step);
  text-transform: uppercase;
}

.sl-slip__no { color: var(--sl-ink); }

.sl-slip__name {
  font-family: var(--sl-letter, Georgia, serif);
  font-size: var(--sl-t-h3);
  line-height: 1.2;
  margin-block: 0;
}

.sl-slip__gloss,
.sl-slip__basis {
  color: var(--sl-ink-2);
  font-size: var(--sl-t-cap);
  margin-block: 0 var(--sl-gap);
}

/* ---------------------------------------------------------------------------------------------
   The drop. One figure, the subtraction that made it, and the count of terms that arrived after
   the choosing was over. It is banded across the slip rather than sunk into a column, because it
   belongs to all three of them.
   --------------------------------------------------------------------------------------------- */

.sl-drop {
  background-color: var(--sl-panel-2);
  border: var(--sl-line) solid var(--sl-rule);
  display: grid;
  gap: 0 var(--sl-gap);
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  margin-block: var(--sl-step) var(--sl-step);
  padding: var(--sl-step) var(--sl-gap);
}

.sl-drop__cap {
  color: var(--sl-ink-2);
  font-size: var(--sl-t-cap);
  grid-column: 1;
  letter-spacing: 0.09em;
  margin-block: 0;
  text-transform: uppercase;
}

.sl-drop__fig {
  color: var(--sl-unsaid);
  font-family: var(--sl-numeral, monospace);
  font-size: var(--sl-t-fig);
  grid-column: 1;
  line-height: 1.15;
  margin-block: 0;
}

.sl-drop__share {
  color: var(--sl-ink-2);
  font-size: var(--sl-t-cap);
  grid-column: 1;
  margin-block: 0 var(--sl-step);
}

.sl-drop__says {
  font-size: var(--sl-t-cap);
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-block: 0;
}

.sl-drop__blind {
  border-block-start: var(--sl-line) dashed var(--sl-rule);
  color: var(--sl-unsaid);
  font-size: var(--sl-t-cap);
  grid-column: 1 / -1;
  margin-block: 0;
  padding-block-start: var(--sl-step);
}

.sl-drop__count {
  font-family: var(--sl-numeral, monospace);
  font-size: var(--sl-t-h3);
  margin-inline-end: 0.2em;
}

/* ---------------------------------------------------------------------------------------------
   The three columns. Equal thirds on a sheet, each divided from the next by a drawn rule rather
   than by space alone, so the reading stays three readings and not one long list.
   --------------------------------------------------------------------------------------------- */

.sl-cols {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, [register] minmax(0, 1fr));
  margin-block-start: var(--sl-gap);
}

.sl-col {
  padding-inline: var(--sl-gap);
}

.sl-col:first-child { padding-inline-start: 0; }

.sl-col + .sl-col {
  border-inline-start: var(--sl-line) solid var(--sl-hair);
}

.sl-col__cap {
  border-block-end: var(--sl-line) solid var(--sl-rule);
  font-family: var(--sl-letter, Georgia, serif);
  font-size: var(--sl-t-base);
  letter-spacing: 0.04em;
  margin-block: 0 var(--sl-step);
  padding-block-end: 2px;
  text-transform: uppercase;
}

.sl-col__fig {
  font-family: var(--sl-numeral, monospace);
  font-size: var(--sl-t-h3);
  margin-block: 0;
  line-height: 1.2;
}

.sl-col--stated .sl-col__fig { color: var(--sl-said); }
.sl-col--qualified .sl-col__fig,
.sl-col--unstated .sl-col__fig { color: var(--sl-unsaid); }

.sl-col__gloss,
.sl-col__none {
  color: var(--sl-ink-2);
  font-size: var(--sl-t-cap);
  margin-block: 0 var(--sl-step);
}

/* ---------------------------------------------------------------------------------------------
   One term, and the tag that says where it was found. The tag is set above the name rather than
   beside it, so a column scanned downwards reads as a list of addresses first and of conditions
   second, which is the order this site wants them read in.
   --------------------------------------------------------------------------------------------- */

.sl-term {
  border-block-start: var(--sl-line) solid var(--sl-hair);
  font-size: var(--sl-t-cap);
  padding-block: var(--sl-step);
}

.sl-term__tag {
  align-items: baseline;
  color: var(--sl-said-d);
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.45em;
  margin-block: 0 2px;
}

.sl-term__step {
  background-color: var(--sl-said);
  color: #FFFFFF;
  font-family: var(--sl-numeral, monospace);
  font-size: 0.6875rem;
  padding-inline: 0.42em;
}

.sl-term__place {
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sl-term__reach {
  color: var(--sl-ink-2);
  font-style: italic;
  text-transform: none;
}

/* Places four, five and six: not reachable before the money went in, and marked as such. */
:where(.sl-term__tag--cashier, .sl-term__tag--exit, .sl-term__tag--nowhere) {
  color: var(--sl-unsaid);
}

:where(.sl-term__tag--cashier, .sl-term__tag--exit, .sl-term__tag--nowhere) .sl-term__step {
  background-color: var(--sl-unsaid);
}

.sl-term__head {
  display: flex;
  gap: var(--sl-step);
  justify-content: space-between;
  margin-block: 0;
}

.sl-term__name { font-weight: 600; }

.sl-term__take {
  font-family: var(--sl-numeral, monospace);
  text-align: end;
  white-space: nowrap;
}

.sl-term__note {
  color: var(--sl-ink-2);
  font-family: var(--sl-prose, system-ui, sans-serif);
  font-style: italic;
  white-space: normal;
}

.sl-term__says {
  color: var(--sl-ink-2);
  margin-block: 2px 0;
}

/* ---------------------------------------------------------------------------------------------
   The foot: the Great Britain position, the reading date, and the way out.
   --------------------------------------------------------------------------------------------- */

.sl-foot {
  align-items: center;
  border-block-start: var(--sl-edge) solid var(--sl-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-step) var(--sl-gap);
  margin-block-start: var(--sl-gap);
  padding-block-start: var(--sl-gap);
}

.sl-foot__stamp {
  border: var(--sl-line) solid var(--sl-unsaid);
  color: var(--sl-unsaid);
  font-family: var(--sl-numeral, monospace);
  font-size: var(--sl-t-cap);
  letter-spacing: 0.04em;
  margin-block: 0;
  padding-inline: 0.4em;
  text-transform: uppercase;
}

.sl-foot__stamp--gb {
  border-color: var(--sl-said);
  color: var(--sl-said);
}

.sl-foot__read {
  color: var(--sl-ink-2);
  font-size: var(--sl-t-cap);
  margin-block: 0;
}

.sl-foot__open {
  background-color: var(--sl-said);
  border: var(--sl-line) solid var(--sl-said-d);
  color: #FFFFFF;
  font-family: var(--sl-letter, Georgia, serif);
  font-size: var(--sl-t-base);
  font-weight: 600;
  margin-inline-start: auto;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
}

.sl-foot__open:hover,
.sl-foot__open:focus {
  background-color: var(--sl-said-d);
  color: #FFFFFF;
}

.sl-foot__open--none {
  background-color: transparent;
  border-style: dashed;
  border-color: var(--sl-unsaid);
  color: var(--sl-unsaid);
}

/* ---------------------------------------------------------------------------------------------
   Editorial reminders, which belong to whoever keeps the file and to nobody else. Where a slip has
   no destination the markup carries an empty span, and the span is hidden by this rule as well as
   by the swap that normally replaces it, so an editor's note cannot leak to a reader through a
   cached copy the swap never touched.
   --------------------------------------------------------------------------------------------- */

.sl-noway { display: none; }

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

.sl-away {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------
   Narrow sheets. The columns stack in their printed order and keep their captions, because on a
   phone the caption is the only thing left saying which of the three a reader is in. The rule
   between columns becomes a rule above each one.
   --------------------------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .sl-slips {
    --sl-t-h2: 1.5rem;
    --sl-t-fig: 1.5rem;
  }

  .sl-cols { grid-template-columns: [register] minmax(0, 1fr); }

  .sl-col { padding-inline: 0; }

  .sl-col + .sl-col {
    border-block-start: var(--sl-line) solid var(--sl-rule);
    border-inline-start: 0;
    margin-block-start: var(--sl-gap);
    padding-block-start: var(--sl-step);
  }

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

  .sl-drop__says { grid-column: 1; grid-row: auto; }

  .sl-foot__open {
    margin-inline-start: 0;
    text-align: center;
    inline-size: 100%;
  }
}

/* ---------------------------------------------------------------------------------------------
   On paper. The way out is useless in print, the tags are not, and the drop is the one thing
   somebody keeping a copy is keeping it for.
   --------------------------------------------------------------------------------------------- */

@media print {
  .sl-foot__open,
  .sl-editor { display: none; }

  .sl-slip {
    border-color: #000000;
    break-inside: avoid;
  }

  .sl-term__step {
    background-color: transparent;
    border: 1px solid currentColor;
    color: inherit;
  }
}