/*
  /suppliers — the supplier application page.

  Same tokens, same top bar, same footer as the other two pages, and a third job
  again: this one is operated rather than read. So the page is short, there is
  nothing to scroll past before the form, and everything above it is either a
  field or an explanation of a field.

  Two faces, in the order the homepage uses them: a dark title band, then one
  white working area. The band is short on purpose — a full-screen hero in front
  of a form is a screen the visitor has to get past to do the thing they came for.

  The working area is one grid of three children: the explanation, the form, and a
  full-width exit link under both. The explanation carries both halves of the
  argument — what we look for, then why a supplier would want to be here — because
  it is the form's instructions and the form is tall.

  Nothing here draws a supplier list, a profile or a card grid, and nothing here
  should: the page is an application, not a directory. The only container on it
  is the form panel.

  Loaded after tokens.css and base.css; home.css is not loaded on this page, so
  anything this page needs is either here or in base.css.
*/

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */

.sup-hero {
  padding: calc(var(--topbar-h) + clamp(56px, 8vh, 104px)) var(--gutter)
    clamp(56px, 7vh, 92px);
  background: var(--bg);
  color: var(--fg);
}

.sup-hero .eyebrow {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.sup-hero h1 {
  font-size: var(--t-display);
  max-width: 18em;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

/*
  Wider than the standard standfirst measure. It is two sentences under a
  one-line headline, and at --measure-lead it broke after "come back to" and left
  a third of the row empty.
*/
.sup-hero .lead {
  max-width: 46em;
}

/*
  "Submission does not guarantee admission" — the line that keeps this page an
  application rather than a sign-up. Body copy, one step quieter than the lead
  above it and one step brighter than fine print, because it is neither: a reader
  who skims the hero has to take it in, and a reader who came hoping otherwise has
  to not be able to say they were not told.

  --fg-soft is 6.0:1 on ink. The disclaimer is the last thing on the page that
  should be hard to read.
*/
.sup-trust {
  max-width: 42em;
  margin: clamp(18px, 1.8vw, 24px) 0 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
}

/* ═══ BODY ═══════════════════════════════════════════════════════════════ */

/*
  Criteria left, form right. The left column is the instructions for the right
  one, so they are beside each other rather than stacked: a supplier filling in
  "Categories & capabilities" can see what we mean by it without scrolling back
  up a screen.

  The form column is the wider of the two — it holds twelve controls, the other
  holds eight short paragraphs.

  Three children, not two: `.sup-aside` spans both columns on the second row.
*/
.sup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 4.5vw, 84px);
  align-items: start;
}

.sup-criteria h2 {
  max-width: 14em;
  margin-bottom: 22px;
}

.sup-criteria .lead {
  max-width: 34em;
  margin-bottom: clamp(30px, 3.4vw, 46px);
}

/* ── What we look for ─────────────────────────────────────────────────── */

.sup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  Hairline between items, not around them. The page separates with rules rather
  than with boxes, and four boxed cards here would compete with the one panel
  on the page that is actually a container.
*/
.sup-list li {
  position: relative;
  padding: 22px 0 22px 26px;
  border-top: 1px solid var(--line);
}

.sup-list li:last-child {
  border-bottom: 1px solid var(--line);
}

/* Stagger, one step per item — set from `--i` in the markup. */
html[data-js='true'] .sup-list li[data-reveal] {
  transition-delay: calc(var(--i) * 70ms);
}

/*
  Violet, which in this palette is the supply network itself — the factories,
  material suppliers and logistics partners this page is addressed to. Not the
  brand orange: orange is physical product flow, and nothing is flowing yet.
*/
.sup-list li::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--network);
}

.sup-list h3 {
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 7px;
}

.sup-list p {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-sub);
  max-width: 32em;
  margin: 0;
}

/*
  The boundary, at the foot of the criteria it bounds. Full --fg rather than
  --fg-sub like the notes above it: it is the plainest sentence on the page and
  the one a supplier is most entitled to have read before filling anything in, so
  it is set as a statement and not as a caveat. No italics, no smaller size, no
  hairline box — every one of those is a way of saying "skip this".
*/
.sup-limit {
  max-width: 32em;
  margin: clamp(22px, 2.2vw, 28px) 0 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg);
}

/* ── Why work with us ─────────────────────────────────────────────────── */

/*
  The second half of the left column, and the same list component again: what we
  ask of a supplier, then what a supplier gets for answering. Deliberately not
  cards — as the one boxed thing on the page besides the form it would become the
  louder half of an argument whose two halves are equal.

  The heading is what keeps eight hairline-separated items from reading as one
  list of eight, so it takes more air above it than any other heading on the page.
*/
.sup-value-headline {
  max-width: 20em;
  margin: clamp(46px, 4.6vw, 64px) 0 clamp(22px, 2.4vw, 30px);
}

/* ── The wrong-side-of-the-network note ──────────────────────────────── */

/*
  For the buyer who followed a supplier link. Both columns wide and last in the
  grid, so it is the final thing on the page: it is an exit, and at any earlier
  point it is an exit offered to a supplier mid-application. It used to sit under
  the criteria, which on a phone put it between the explanation and the form it
  explains.

  The rule above it is what ties the two columns off — the left one ends in a
  hairline of its own and the right one in a bordered panel, and without it the
  page would just stop.
*/
.sup-aside {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: clamp(10px, 1.6vw, 22px) 0 0;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  font-size: var(--t-body);
  color: var(--fg-sub);
}

/*
  The question takes the whole row and the two links share the next one. Left to
  wrap on its own the line ran a few pixels long in this column and broke between
  the two links, which orphaned the second one and read as a mistake rather than
  as a pair.
*/
.sup-aside > p {
  flex: 0 0 100%;
  margin: 0;
}

/* ═══ FORM ═══════════════════════════════════════════════════════════════ */

/*
  A bordered area of the page rather than a card floating on it — the light
  theme's raised surface is the same white as the background, and the separation
  is the hairline. See the note on --bg-raised in tokens.css.
*/
.sup-form-panel {
  padding: clamp(26px, 2.8vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raised);
}

.sup-form-panel h2 {
  font-size: clamp(25px, 2.3vw, 33px);
  margin-bottom: 10px;
}

.sup-note {
  font-size: var(--t-small);
  color: var(--fg-soft);
  margin-bottom: clamp(26px, 2.6vw, 34px);
}

/*
  Two columns for the four short answers, one for everything that is a
  paragraph. `data-span` comes from the field type in build.mjs rather than from a
  per-field setting, so a new short field lands in the grid correctly without
  anyone deciding where it goes.
*/
.sup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  margin-bottom: clamp(24px, 2.4vw, 32px);
}

.sup-field {
  margin: 0;
}

.sup-field[data-span='full'] {
  grid-column: 1 / -1;
}

/*
  Mono and uppercase, which is this design system's voice for a control label —
  the same voice as the buttons, the section eyebrows and the route labels on the
  map. Small, because the answer matters more than the question.
*/
.sup-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  /* Set explicitly: the two-line reservation below is measured in these lines. */
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-sub);
}

/*
  The required marker, in the accent. Decorative — `required` carries the fact.
  The gap is a margin rather than a space in the markup because the label is a
  flex container at desktop width, where a leading space would collapse.

  Scoped to its own class, not to `label span`: the label's text has a wrapper span
  of its own so that flex sees one item and not two. See the note in build.mjs.
*/
.sup-field .sup-req {
  margin-left: 0.35em;
  color: var(--accent);
}

/*
  Two lines reserved for the label of a half-width field, with the text sitting at
  the bottom of them.

  Only at the width where the form is a column beside the criteria — that is the
  only place a label of this length wraps. "COUNTRY / MANUFACTURING REGION" takes
  two lines in a 256px column and its neighbour "COMPANY NAME" takes one, which
  left the two inputs in that row 25px out of line with each other. Reserving the
  second line in both aligns every control in the 2×2 block whichever language is
  rendering and however a label breaks.

  Bottom-aligned, so a one-line label still sits directly above its own control
  and the reserved line opens above the label rather than between the label and
  the field it names. One flex item, which is why the text has a wrapper span.
*/
@media (min-width: 981px) {
  .sup-field[data-span='half'] label {
    display: flex;
    align-items: flex-end;
    min-height: 2.8em;
  }
}

.sup-field input,
.sup-field select,
.sup-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.45;
  transition: border-color var(--dur-fast) var(--ease);
}

.sup-field textarea {
  /* Vertical only: a resizable width would break out of the grid column. */
  resize: vertical;
  min-height: 92px;
}

.sup-field ::placeholder {
  color: var(--fg-faint);
}

/*
  The border tracks focus as well as the global outline. The outline sits outside
  the control and the border is the control, so on a page of nine of them the
  border is what tells you which one you are in.
*/
.sup-field input:focus,
.sup-field select:focus,
.sup-field textarea:focus {
  border-color: var(--fg);
}

/*
  Native select chrome varies by platform enough that one of nine controls would
  look like it came from somewhere else. The arrow is drawn instead — inline SVG
  so it needs no request, and padding on the right keeps a long option clear of it.
*/
.sup-field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236d6d6d' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}

/* ── Hints and errors ────────────────────────────────────────────────── */

/*
  Under the control, not beside the label, because both hints exist to stop a
  supplier withholding an answer — what to do instead of attaching a file, and
  that no confidential customer name is being asked for — and that is read after
  seeing the field, not before.

  Allowed at half width, unlike a placeholder: this wraps where a placeholder is
  cut off mid-sentence by the browser. The row grows to fit it and the field
  beside it stays top-aligned.
*/
.sup-hint {
  display: block;
  margin-top: 7px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-soft);
}

/*
  The validation message, written by js/suppliers.js into a slot that ships empty
  and `hidden` — so it costs no space until there is something to say, and a
  hidden slot is correctly left out of the field's accessible description.

  The colour is local rather than a token because the form only ever sits on the
  white band: --lot-red at full strength is 4.0:1 on white, which fails AA for
  14px text, and mixing 20% ink into it gives 5.7:1 — the same weight as --info
  and --network, which is the company the rest of this page's semantic colour
  keeps. A dark-ground copy of this form would need its own value, lightened the
  way tokens.css lightens the blue.
*/
.sup-form {
  --sup-error: color-mix(in srgb, var(--lot-red) 80%, var(--ink));
}

.sup-error {
  display: block;
  margin-top: 7px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--sup-error);
}

/*
  Keyed off `aria-invalid` rather than a class, so the thing a screen reader is
  told and the thing a sighted reader sees cannot come apart: there is one
  attribute and it drives both. `:not(:focus)` because inside the field the focus
  border is the more useful signal, and the message under it has not gone
  anywhere.
*/
.sup-field [aria-invalid='true']:not(:focus) {
  border-color: var(--sup-error);
}

/* ── Under the fields ────────────────────────────────────────────────── */

.sup-consent {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-soft);
  margin-bottom: clamp(22px, 2.2vw, 28px);
}

.sup-submit {
  min-height: 54px;
  padding: 0 32px;
}

/*
  The one live region on the page, written by js/suppliers.js — the validation
  summary when a submit is refused, the confirmation when it goes through. Empty in
  the document, so it takes no space and draws no rule until there is something to
  say: a form that ships an empty bordered box under its button looks broken before
  it is used.

  Both states are the same shape and differ only in the rule's colour. They are
  the same kind of thing — the form reporting what just happened — and giving the
  refusal its own panel would make the page rearrange itself around a typo.
*/
.sup-status {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--info);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg);
}

.sup-status[data-state='error'] {
  border-left-color: var(--sup-error);
}

.sup-status:empty {
  display: none;
}

/* ═══ NARROW ═════════════════════════════════════════════════════════════ */

/*
  One column, criteria first. The instructions have to arrive before the fields
  they describe, which is also the source order — so this is only the column
  count changing, not a reordering.
*/
@media (max-width: 980px) {
  .sup-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(38px, 6vw, 56px);
  }

  .sup-criteria h2,
  .sup-criteria .lead {
    max-width: 30em;
  }

  /*
    The gap between the columns is now the gap between the explanation and the
    form, and the aside's own top rule already separates it — so it takes the
    smaller of the two margins rather than a second full gap.
  */
  .sup-aside {
    margin-top: 0;
  }
}

/* Below this the two short fields side by side leave neither room to be read. */
@media (max-width: 560px) {
  .sup-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
    The panel loses its border and its padding and becomes the page. At 22px of
    gutter a bordered box inside it wastes 26px a side on a frame nobody needs
    when there is nothing beside it to be separated from.
  */
  .sup-form-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
}