/* Checkout — a Logical Art nibble.
 *
 * A UPC symbol is black on white and has to stay that way: the whole point is
 * a contrast a beam can threshold, and prettying it up in studio colours would
 * be drawing something that never worked. So the label sits on its own white
 * card, the way it sits on a packet, and the page around it stays dark.
 *
 * The machine colour is used for exactly two things, both of them events: the
 * guard bars, which are what the scanner finds first, and a label the check
 * digit has rejected.
 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--la-font-ui);
  background: var(--la-page);
  color: var(--la-ink);
  line-height: var(--la-leading-body);
  -webkit-font-smoothing: antialiased;
}

main.nibble {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

main.nibble p, main.nibble ul, main.nibble ol, main.nibble dl,
main.nibble h1, main.nibble h2 { max-width: none; }

/* Read but not seen. Restating [hidden] is deliberate: any selector with a
   display value outranks the user-agent rule for the attribute, and that has
   shipped broken in this family three times. */
.co-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.co-sr[hidden], [hidden] { display: none; }



.co { margin-top: var(--la-space-5); }

/* --- the label ---------------------------------------------------------- */

.co-symbolwrap {
  background: #fff;
  border-radius: var(--la-radius-sm);
  /* A quiet zone is part of the symbol, not padding around it, so the nine
     clear modules live in the viewBox where they scale with the label. This
     padding is only the white border a label has around its whole printed
     area; when the quiet zone was made of it, it was 3.8 modules wide on a
     desktop and 7.0 on a phone. */
  padding: 1.1rem 1rem 0.9rem;
}

.co-symbol {
  display: block;
  width: 100%;
  height: clamp(96px, 22vw, 150px);
}

/* Every bar is the same ink, and crisp edges rather than antialiased ones,
   because a soft module boundary is a soft threshold. */
.co-bar {
  fill: #101010;
  shape-rendering: crispEdges;
}

/* The guards are what the beam finds first, and they are marked BELOW the
   symbol rather than coloured. The machine's accent is a red; a scanner works
   at around 660nm; red ink returns nearly as much of that as white paper. The
   guards graded 9% for symbol contrast against the 70% that is an A, so the
   bars the beam looks for first were the ones it could not see. The taller
   bars already say which they are, which is how a real label says it too. */
.co-guardmark { fill: var(--machine, var(--la-instrument)); }

/* --- the digits --------------------------------------------------------- */

.co-digits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
}

.co-digit {
  min-width: 1.9rem;
  padding: 0.35rem 0.1rem;
  text-align: center;
  font-size: var(--la-text-lg);
  border-radius: 2px;
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline);
}

/* The halves are drawn from different tables, so they are shown as two runs of
   six rather than one run of twelve. The gap sits where the centre guard sits,
   which is the thing it stands for. */
.co-digit.is-right { background: color-mix(in srgb, var(--la-sunken) 60%, transparent); }
.co-digit.is-halfstart { margin-left: 0.85rem; }

.co-digit.is-check {
  border-color: var(--machine, var(--la-instrument));
  color: var(--machine, var(--la-instrument));
}

/* --- controls ------------------------------------------------------------ */

.co-controls { margin-top: var(--la-space-4); }

.co-label {
  display: block;
  color: var(--la-ink-dim);
  font-size: var(--la-text-sm);
}

.co-input {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.7rem;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-base);
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
}

.co-input:focus-visible {
  outline: 2px solid var(--machine, var(--la-instrument));
  outline-offset: 2px;
}

.co-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--la-space-3);
}

.co-button {
  /* 44px, comfortably past the 24 WCAG 2.2 asks for, because these are the
     controls the whole page is operated with. */
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  font-family: var(--la-font-ui);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
  cursor: pointer;
}

.co-button:hover { border-color: var(--machine, var(--la-instrument)); }

.co-button:focus-visible {
  outline: 2px solid var(--machine, var(--la-instrument));
  outline-offset: 2px;
}

.co-button:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: var(--la-hairline);
}

/* --- the four stages ----------------------------------------------------- */

.co-stages {
  list-style: none;
  margin-top: var(--la-space-5);
  display: grid;
  gap: var(--la-space-3);
}

.co-step {
  padding: var(--la-space-3);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
}

/* The stage label is the roster's own sentence, word for word: the truth audit
   compares the two and a nibble's stages are its tier's evidence. Not
   uppercased, because text-transform would still leave the source matching but
   makes a long sentence hard to read. */
.co-steplabel {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  line-height: var(--la-leading-body);
}

.co-stepno {
  display: inline-block;
  min-width: 1.4em;
  color: var(--machine, var(--la-instrument));
}

.co-line {
  margin-top: 0.45rem;
  color: var(--la-ink-dim);
  font-size: var(--la-text-sm);
}

.co-verdictline {
  margin-top: var(--la-space-4);
  padding: var(--la-space-3);
  border-left: 2px solid var(--la-hairline-strong);
  color: var(--la-ink-dim);
  font-size: var(--la-text-sm);
}

.co-verdictline.is-bad {
  border-left-color: var(--machine, var(--la-instrument));
  color: var(--la-ink);
}

.co-proof {
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

.co-note {
  margin-top: var(--la-space-3);
  color: var(--la-ink);
  font-size: var(--la-text-sm);
}

/* The prose. Machine-prefixed rather than a generic name, because a class
   nothing styles is a class the machine audit reports, and it was right to. */
.co-why { margin-top: var(--la-space-6); }

.co-why h2 {
  margin-top: var(--la-space-5);
  font-family: var(--la-font-display);
  font-size: var(--la-text-xl);
  line-height: var(--la-leading-tight);
}

.co-why p {
  margin-top: var(--la-space-3);
  color: var(--la-ink-dim);
}

@media (min-width: 46rem) {
  .co-stages { grid-template-columns: repeat(2, minmax(min(16rem, 100%), 1fr)); }
}

/* One beep or none: the result a shopper actually gets, said in words for
   anyone who cannot hear it. */
.co-said {
  margin-top: var(--la-space-2);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  min-height: 1.5em;
}