/* Applying for a trade account.
   Loaded last, after the public site's own file — the stylesheet numbers ARE
   the cascade. */

.apply {
  max-width: 900px;
  margin: 0 auto;
}

.apply-head { margin-bottom: 28px; }
.apply-head h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.02em; }
.apply-head p { margin: 0; color: var(--ink-2); max-width: 52ch; font-size: 15px; }

.apply-form {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---------------- the rail ---------------- */
/* The progress reads as a shade coming down: a headrail at the top and fabric
   descending behind the steps. This company makes roller blinds, and a bar
   that fills left to right is what every other form on earth has. */
.apply-rail {
  position: sticky;
  top: 96px;
  padding-left: 20px;
}

.apply-shade {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  --drawn: 25%;
}

.apply-headrail {
  height: 5px;
  border-radius: 2px;
  background: var(--ink);
}

/* The fabric itself. Height is driven by --drawn, which the controller sets —
   one custom property is the whole animation. */
.apply-fabric {
  position: absolute;
  left: 2px; right: 2px;
  top: 5px;
  height: calc(var(--drawn) * 0.92);
  max-height: calc(100% - 5px);
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, var(--signal), var(--signal-line));
  transition: height .32s cubic-bezier(.22, .61, .36, 1);
}

.apply-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* The global `button` rule paints a dark pill with a black hover. A step is a
   line of text: padding, background, border AND the hover background all have
   to come off, or this is a column of black tiles. */
.apply-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r);
  padding: 9px 10px;
  cursor: default;
  color: var(--ink-3);
  font: inherit;
}
.apply-step:hover { background: none; color: var(--ink-3); }
.apply-step:disabled { cursor: default; }

.apply-step-n {
  grid-row: 1 / span 2;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font: 500 11.5px var(--mono);
  color: var(--ink-3);
  background: var(--surface);
}
.apply-step-name { font: 500 14px var(--ui); color: var(--ink-3); }
.apply-step-blurb { font-size: 12px; line-height: 1.35; color: var(--ink-3); opacity: .75; }

.apply-step.is-current { color: var(--ink); }
.apply-step.is-current .apply-step-name { color: var(--ink); font-weight: 600; }
.apply-step.is-current .apply-step-n { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.apply-step.is-done { cursor: pointer; }
.apply-step.is-done:hover { background: var(--sunken); }
.apply-step.is-done .apply-step-name { color: var(--ink-2); }
.apply-step.is-done .apply-step-n {
  border-color: var(--signal); background: var(--signal-bg); color: var(--signal);
}

.apply-position { margin: 14px 0 0 10px; font: 500 11.5px var(--mono); color: var(--ink-3); }

/* Without JavaScript every part is on the page, so a rail saying "step 1 of
   4" beside all four would be a lie. is-stepped is added on connect. */
.apply-form:not(.is-stepped) .apply-rail { display: none; }
.apply-form:not(.is-stepped) { grid-template-columns: minmax(0, 1fr); }

/* ---------------- the parts ---------------- */

.apply-part {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 26px 26px;
}
.apply-form:not(.is-stepped) .apply-part + .apply-part { margin-top: 16px; }

.apply-part h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.01em; }
.apply-aside { margin: 0 0 18px; color: var(--ink-2); font-size: 13.5px; max-width: 56ch; }
.apply-part h2 + .row, .apply-part h2 + .field { margin-top: 18px; }

/* One field treatment across every part, so nothing reads as a different kind
   of question because of where it sits. */
.apply-part .field { margin-bottom: 16px; }
.apply-part .field:last-child { margin-bottom: 0; }
.apply-part label { display: block; font: 500 13px var(--ui); color: var(--ink-2); margin-bottom: 6px; }
.apply-part input[type=text],
.apply-part input[type=email],
.apply-part input[type=tel],
.apply-part input[type=password],
.apply-part select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font: 400 14.5px var(--ui);
  background: var(--surface);
  color: var(--ink);
}
.apply-part input.mono { font-family: var(--mono); }
.apply-part input:focus, .apply-part select:focus {
  outline: 2px solid var(--signal);
  outline-offset: -1px;
  border-color: var(--signal);
}
/* Only once they have tried. :invalid on load paints an untouched form red. */
.apply-part input:user-invalid, .apply-part select:user-invalid { border-color: var(--danger); }

.apply-part .hint { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* City takes what is left; the other two are sized to their content. A
   province select at 90px reads "Choos…", which is a control nobody can use
   without opening it to find out what it is. */
.row-city { display: grid; grid-template-columns: minmax(0, 1fr) 150px 165px; gap: 16px; }

/* https:// sits in the box rather than in the placeholder, so nobody types it
   twice and nobody wonders whether they have to. */
.field-prefixed {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.field-prefixed:focus-within { outline: 2px solid var(--signal); outline-offset: -1px; border-color: var(--signal); }
.field-prefix {
  display: grid; place-items: center;
  padding: 0 10px;
  background: var(--sunken);
  border-right: 1px solid var(--line);
  font: 400 13px var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
}
.apply-part .field-prefixed input { border: 0; border-radius: 0; }
.apply-part .field-prefixed input:focus { outline: none; }

.apply-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
  margin-bottom: 20px;
  cursor: pointer;
}
.apply-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--signal); }
.apply-check strong { display: block; font-size: 14px; font-weight: 500; }
.apply-check .hint { display: block; margin-top: 2px; }

.apply-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
/* Continue sits where the eye finishes, Back out of the way on the left. */
.apply-actions .pub-plain[data-wizard-target="back"] { margin-right: auto; }

/* .button sets its own display, and a class beats the user-agent rule for
   [hidden] — so Back and Send both sat there on step one, hidden in the DOM
   and visible on the screen. See the note in CLAUDE.md. */
.apply-actions [hidden] { display: none; }

@media (max-width: 820px) {
  .apply-form { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .apply-rail { position: static; padding-left: 0; }
  .apply-shade { display: none; }
  .apply-steps { flex-direction: row; gap: 6px; overflow-x: auto; }
  .apply-step-blurb, .apply-step-name { display: none; }
  .apply-step { grid-template-columns: 22px; padding: 6px; }
  .row-city { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .apply-fabric { transition: none; }
}