/* ==========================================================================
   Deduction codes page - the only additions main.css does not already cover.

   The page head is the shared .hero. The gap this sheet fills is the table:
   on the homepage it is deliberately capped at a 27rem scrollport, and this
   is the full reference, so here it runs its whole length.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Codes table
   89 rows are the point of this page, but letting them run the full page
   length pushes everything below them out of reach and leaves the sticky head
   floating mid-page as a stray repeated row. So the table keeps a scrollport,
   just a much taller one than the homepage preview, and the head stays pinned
   inside it where it belongs.
   -------------------------------------------------------------------------- */

.codes__table-wrap--full .codes__scroll { max-height: min(70vh, 44rem); }

/* Phone: the definition column keeps the wrap, the two mono columns keep the
   nowrap, and the cell padding gives way so nothing scrolls sideways. */
@media (max-width: 30rem) {
  .codes__table { font-size: var(--t-xs); }
  .codes__table thead th,
  .codes__table td { padding-left: 0.6rem; padding-right: 0.6rem; }
}

.codes__note {
  margin-top: var(--s-5);
  max-width: 66ch;
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   3. Numbered steps - the duty row carrying a second line of detail
   -------------------------------------------------------------------------- */

.step__body { display: grid; gap: var(--s-2); min-width: 0; }

.step__d {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 64ch;
}

/* Wide: the instruction sits left and its detail right, so the row uses its
   full width instead of stacking two short lines in the left half and leaving
   the other half empty. */
@media (min-width: 62rem) {
  .duty--step .step__body {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .duty--step .duty__t { padding-top: 0.05em; }
  .step__d { max-width: 58ch; }
}

/* --------------------------------------------------------------------------
   5. The three-step explainer
   Not cards: a numbered run of columns on one hairline, which is the same
   language the rest of the site uses for a short list of related points.
   -------------------------------------------------------------------------- */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

@media (min-width: 52rem) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.flow__step {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 52rem) {
  .flow__step {
    padding-inline: clamp(1.25rem, 2.6vw, 2.25rem);
    border-bottom: 0;
  }
  .flow__step:first-child { padding-left: 0; }
  .flow__step + .flow__step { border-left: 1px solid var(--rule); }
}

/* The step marker sits on the rule itself, so the row reads as a sequence
   rather than three unrelated columns. */
.flow__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--nv-blue);
}

.flow__t {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.flow__d {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 40ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6. Disputes
   Dark, because it is the part of the page a supplier arrives at already
   annoyed, and the change of ground marks it as the section that tells them
   what to actually do.
   -------------------------------------------------------------------------- */

.dispute__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 62rem) {
  .dispute__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }
}

.dispute__title { max-width: 12ch; }

.dispute__sub {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--fg-on-dark-mut);
  max-width: 38ch;
}

.dispute__steps { display: grid; }

.dispute__step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--rule-on-dark);
}
.dispute__step:last-child { border-bottom: 1px solid var(--rule-on-dark); }

.dispute__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--nv-blue-bright);
  padding-top: 0.2em;
}

.dispute__h {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--fg-on-dark);
}

.dispute__d {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg-on-dark-mut);
  max-width: 56ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   7. Section leads
   On a reference page the headline carries the weight and the paragraph
   beside it is support, so it sits a step below the site-wide lead size.
   -------------------------------------------------------------------------- */

.sec-head--split .lead,
.sec-head--codes .lead {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
}