/* =================================================================================================
 * Voucher Strips 1.0.2, the ranking for Face and Residue.
 *
 * One strip for each printed offer, laid side by side on a wide sheet and one above another on a
 * phone. A strip is drawn after the thing it describes: a face at the head, a perforation across the
 * middle, and a counterfoil at the foot carrying the licence and the button.
 *
 * ONE WIDTH. Left rule to right rule, the section is struck on the same measure the prose beside it
 * is struck on, and it takes no horizontal inset for itself. What makes a strip the narrower thing
 * is its own cut edge, which a reader can see; the edge is the strip's and is never the block's.
 *
 * TOKENS. Colour, lettering and spacing come from the theme astra-child-denom on :root under the
 * --rs- names. The block below is the fallback, so the rack still reads before that theme lands or
 * if it is swapped out, and no value in it is invented: each one is the token as the theme's
 * style.css sets it down. This file defines no colour, no face and no spacing of its own.
 *
 * THE TWO FIGURE COLOURS do one job each and are never swapped. The teal is a face value. The rust
 * is a residue, which is a sum the reader never gets, so nothing decorative is ever set in it.
 * ============================================================================================== */

.vcs-rack {
  --rs-paper: #F7F6F1;
  --rs-panel: #EDEDE4;
  --rs-panel-2: #E0E1D4;
  --rs-ink: #17201D;
  --rs-ink-2: #4C564F;
  --rs-face: #0F5257;
  --rs-face-d: #0A3B3F;
  --rs-residue: #8A3B12;
  --rs-rule: #8C7A3F;
  --rs-hair: #DCDCCE;
  --rs-hair-5: #C4C4B0;
  --rs-letter: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --rs-prose: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rs-figure: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --rs-t-cap: 0.8125rem;
  --rs-t-base: 1.0625rem;
  --rs-t-h3: 1.375rem;
  --rs-t-h2: 1.75rem;
  --rs-t-fig: 1.75rem;
  --rs-step: 0.5rem;
  --rs-gap: 1rem;
  --rs-gap-2: 1.75rem;
  --rs-gap-3: 2.75rem;
  --rs-edge: 2px;
  --rs-line: 1px;

  display: block;
  margin: var(--rs-gap-2) 0 var(--rs-gap-3);
  color: var(--rs-ink);
  font-family: var(--rs-prose);
  font-size: var(--rs-t-base);
  line-height: 1.6;
}

.vcs-rack__head {
  font-family: var(--rs-letter);
  font-size: var(--rs-t-h2);
  line-height: 1.22;
  margin: 0 0 var(--rs-step);
  color: var(--rs-ink);
}

/* The paid line and the notes under the rack. Each one is a statement the reader is owed, so none of
   them is set smaller than the caption size. */
.vcs-rack__paid,
.vcs-rack__working,
.vcs-rack__caveat,
.vcs-rack__dated {
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
  margin: 0 0 var(--rs-step);
}

.vcs-rack__paid {
  border-top: var(--rs-line) solid var(--rs-rule);
  border-bottom: var(--rs-line) solid var(--rs-rule);
  padding: var(--rs-step) 0;
  margin-bottom: var(--rs-gap);
}

.vcs-rack__working:first-of-type { margin-top: var(--rs-gap); }

.vcs-rack__caveat {
  border-left: 3px solid var(--rs-residue);
  background-color: var(--rs-panel);
  padding: var(--rs-step) var(--rs-gap);
  margin-top: var(--rs-gap);
}

/* ---- The bed the strips stand in ------------------------------------------------------------- */
.vcs-rack__bed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--rs-gap);
  align-items: start;
}

/* ---- One strip ------------------------------------------------------------------------------- */
.vcs-strip {
  display: flex;
  flex-direction: column;
  background-color: var(--rs-paper);
  border: var(--rs-edge) solid var(--rs-ink);
  padding: var(--rs-gap);
}

.vcs-strip__shop,
.vcs-strip__docket {
  font-family: var(--rs-figure);
  font-size: var(--rs-t-cap);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  margin: 0;
}

.vcs-strip__docket {
  display: flex;
  justify-content: space-between;
  border-bottom: var(--rs-line) solid var(--rs-rule);
  padding-bottom: var(--rs-step);
  margin-bottom: var(--rs-step);
}

.vcs-strip__no { color: var(--rs-ink); }

.vcs-strip__house {
  font-family: var(--rs-letter);
  font-size: var(--rs-t-h3);
  line-height: 1.2;
  margin: 0;
  color: var(--rs-ink);
}

.vcs-strip__strap {
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
  margin: 0 0 var(--rs-gap);
}

/* ---- The three registers --------------------------------------------------------------------- */
.vcs-strip__regs {
  display: grid;
  gap: var(--rs-line);
  background-color: var(--rs-rule);
  border: var(--rs-line) solid var(--rs-rule);
  margin-bottom: var(--rs-step);
}

.vcs-reg {
  display: block;
  background-color: var(--rs-panel);
  padding: var(--rs-step) var(--rs-gap);
}

.vcs-reg--called { background-color: var(--rs-panel-2); }

.vcs-reg__cap {
  display: block;
  font-size: var(--rs-t-cap);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
}

.vcs-reg__fig {
  display: block;
  font-family: var(--rs-figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--rs-t-fig);
  line-height: 1.15;
  color: var(--rs-face);
}

.vcs-reg--called .vcs-reg__fig { color: var(--rs-residue); }

.vcs-reg__says {
  display: block;
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
}

.vcs-strip__basis {
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
  margin: 0 0 var(--rs-gap);
}

/* ---- The lines ------------------------------------------------------------------------------- */
.vcs-band {
  font-size: var(--rs-t-cap);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  border-bottom: var(--rs-line) solid var(--rs-rule);
  padding-bottom: 2px;
  margin: var(--rs-gap) 0 var(--rs-step);
}

/* The band that opens the stranded lines is the perforation across the strip, which is why it is
   the one band drawn as a dashed rule and in the residue colour. */
.vcs-band--stranded {
  border-bottom: var(--rs-line) dashed var(--rs-residue);
  color: var(--rs-residue);
}

.vcs-ln {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  gap: 0 var(--rs-step);
  padding: var(--rs-step) 0;
  border-top: var(--rs-line) solid var(--rs-hair);
  font-size: var(--rs-t-cap);
}

.vcs-ln:first-of-type { border-top: 0; }

.vcs-ln__label { font-weight: 600; }

.vcs-ln__amount {
  font-family: var(--rs-figure);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.vcs-ln__note {
  font-family: var(--rs-prose);
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
  text-transform: lowercase;
}

.vcs-ln__detail {
  grid-column: 1 / -1;
  color: var(--rs-ink-2);
}

.vcs-ln--foot {
  border-top: var(--rs-edge) solid var(--rs-ink);
  background-color: var(--rs-panel-2);
  padding: var(--rs-step) var(--rs-step) var(--rs-step) 0;
  margin-top: var(--rs-step);
}

.vcs-ln--foot .vcs-ln__label,
.vcs-ln--foot .vcs-ln__amount { color: var(--rs-residue); font-weight: 700; }

/* ---- The counterfoil at the foot ------------------------------------------------------------- */
/* The counterfoil is pushed to the foot of the strip, so the buttons of two strips of unequal
   length still line up along one row. The room above it is padding and not a margin, because a
   margin here would be the thing that collapses and lets the rule ride up against the last line. */
.vcs-strip__stub {
  margin-top: auto;
  border-top: var(--rs-line) dashed var(--rs-rule);
  padding-top: var(--rs-gap);
}

.vcs-strip__stamp {
  display: inline-block;
  font-family: var(--rs-figure);
  font-size: var(--rs-t-cap);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rs-residue);
  border: var(--rs-line) solid var(--rs-residue);
  padding: 0 0.4em;
  margin: 0 0 var(--rs-step);
}

.vcs-strip__stamp--gb { color: var(--rs-face); border-color: var(--rs-face); }

.vcs-strip__licence,
.vcs-strip__read {
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
  margin: 0 0 var(--rs-step);
}

.vcs-strip__go {
  display: block;
  text-align: center;
  font-family: var(--rs-letter);
  font-size: var(--rs-t-base);
  font-weight: 600;
  color: #FFFFFF;
  background-color: var(--rs-face);
  border: var(--rs-line) solid var(--rs-face-d);
  padding: 0.75rem 1rem;
  margin-top: var(--rs-step);
  text-decoration: none;
}

.vcs-strip__go:hover,
.vcs-strip__go:focus {
  background-color: var(--rs-face-d);
  color: #FFFFFF;
}

/* A strip missing its destination hands a reader nothing whatever. Only a signed-in editor is shown
   the dashed box, and the span standing in its place is held back here too, so where the swap never
   ran a reader is handed nothing all the same. */
.vcs-nodest { display: none; }

.vcs-strip__go--missing {
  background-color: transparent;
  color: var(--rs-residue);
  border: var(--rs-line) dashed var(--rs-residue);
}

.vcs-only-editor {
  display: block;
  font-size: var(--rs-t-cap);
  color: var(--rs-ink-2);
  margin-top: var(--rs-step);
}

.vcs-offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =================================================================================================
 * Narrow screens. One strip to a row, and the registers stay stacked, because three sums of this
 * size cannot be read side by side on a 390px phone. Nothing here touches a horizontal inset on the
 * block itself: the section keeps the sheet's own two rules at every width.
 * ============================================================================================== */
@media (max-width: 921px) {
  .vcs-rack {
    --rs-t-h2: 1.5rem;
    --rs-t-fig: 1.5rem;
  }

  .vcs-rack__bed { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vcs-rack * { animation: none !important; transition: none !important; }
}