/* The quote funnel. Loaded on quote.html only. */

.funnel { max-width: 640px; margin-inline: auto; }

/* Progress rail */
.funnel__rail { display: flex; gap: 6px; margin-bottom: var(--rz-space-xl); list-style: none; padding: 0; }
.funnel__rail li { flex: 1; }
.funnel__rail span {
  display: block; height: 3px; border-radius: 2px;
  background: var(--rz-aluminium-light); overflow: hidden;
}
.funnel__rail span::after {
  content: ""; display: block; height: 100%; width: 0;
  background: var(--rz-oxblood); transition: width .45s var(--ease);
}
.funnel__rail li.is-done span::after { width: 100%; }
.funnel__rail li.is-active span::after { width: 45%; }
.funnel__rail em {
  display: block; font-style: normal; margin-top: 8px;
  font-family: var(--rz-font-data); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--rz-aluminium);
}
.funnel__rail li.is-active em { color: var(--rz-oxblood); }
@media (max-width: 560px) { .funnel__rail em { display: none; } }

/* Steps */
.step { display: none; }
.step.is-current { display: block; }
.step__head { margin-bottom: var(--rz-space-lg); }
/* The step heading is focused programmatically to move a keyboard user into the
   new step. That is a scroll target, not an interactive control, so it gets no
   ring — every real control on the page still does. */
.step__head h2:focus { outline: none; }
.step__head h2 { margin-bottom: 8px; }
.step__head p { color: var(--rz-aluminium); margin-bottom: 0; }

/* Fields */
.field { margin-bottom: var(--rz-space-md); }
.field > label, .fieldset > legend {
  display: block; font-size: 16px; font-weight: 600;
  margin-bottom: 8px; padding: 0;
}
.field__hint { font-size: 15px; color: var(--rz-aluminium); margin: 7px 0 0; text-wrap: pretty; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {
  width: 100%; font-family: var(--rz-font-text); font-size: 17px;
  color: var(--rz-ink); background: #fff;
  border: 1px solid var(--rz-aluminium-light); border-radius: var(--rz-radius-sm);
  padding: 13px 15px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
input:focus, select:focus { border-color: var(--rz-oxblood); }
input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: var(--rz-font-data); font-variant-numeric: tabular-nums;
}
input[aria-invalid="true"] { border-color: var(--rz-oxblood); }

.field__error {
  display: none; color: var(--rz-oxblood); font-size: 15px; margin: 7px 0 0;
}
.field__error.is-shown { display: block; }

/* Weight + unit pair. The unit is a first-class choice, not a hidden default —
   the seller's unit governs every figure they are subsequently shown. */
.pair { display: grid; grid-template-columns: 1fr 9.8rem; gap: var(--rz-space-sm); }

/* Grade chooser */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--rz-space-md); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label {
  font-family: var(--rz-font-data); font-size: 16px; letter-spacing: .03em;
  border: 1px solid var(--rz-aluminium-light); border-radius: var(--rz-radius-sm);
  padding: 10px 16px; cursor: pointer; background: #fff;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.choices label:hover { border-color: var(--rz-aluminium); }
.choices input:checked + label { background: var(--rz-oxblood); border-color: var(--rz-oxblood); color: #fff; }
.choices input:focus-visible + label { outline: 2px solid var(--rz-oxblood); outline-offset: 3px; }

.metal-group { margin-bottom: var(--rz-space-lg); }
.metal-group > .label { margin-bottom: 10px; }

/* Actions */
.step__actions { display: flex; gap: var(--rz-space-sm); align-items: center; margin-top: var(--rz-space-lg); }
.step__back {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font-family: var(--rz-font-text); font-size: 16px; color: var(--rz-aluminium);
}
.step__back:hover { color: var(--rz-ink); }

/* ---------- The figure ---------- */

.quote-card {
  border: 1px solid var(--rz-aluminium-light); border-radius: var(--rz-radius-md);
  background: #fff; overflow: hidden;
}
.quote-card__top { padding: clamp(22px, 4vw, 34px); }
.quote-card__amount {
  font-family: var(--rz-font-data); font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 30.28px + 1.980vw, 58px); line-height: 1; letter-spacing: -.03em;
  margin: 4px 0 0;
}
.quote-card__rows { border-top: 1px solid var(--rz-aluminium-light); }
.quote-card__rows div {
  display: flex; justify-content: space-between; gap: var(--rz-space-md);
  padding: 14px clamp(22px, 4vw, 34px); font-size: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--rz-aluminium-light) 55%, transparent);
}
.quote-card__rows div:last-child { border-bottom: 0; }
.quote-card__rows dt { color: var(--rz-aluminium); margin: 0; }
.quote-card__rows dd {
  margin: 0; font-family: var(--rz-font-data); font-variant-numeric: tabular-nums;
}

.market-state {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; color: var(--rz-aluminium); margin-top: var(--rz-space-md);
}
.market-state::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rz-aluminium-light); flex: none;
}
.market-state.is-live::before { background: #2E7D4F; }
.market-state.is-stale::before { background: var(--rz-oxblood); }

/* The live market figure, at display size.
 *
 * This is the number the seller is closing against, and until now it was 15px
 * of muted grey at the bottom of the card — smaller than the figures on their
 * own weights. A seller who cannot read the price they locked cannot check it,
 * and "the price you locked is the price you are paid" is one of the five
 * licensed mail-in claims. The claim is only inspectable if the price is
 * legible.
 *
 * "per troy ounce" is rendered on every figure and is not decorative. This
 * screen also carries the seller's own weights in the unit THEY entered, and
 * the troy ounce here belongs to the metal's quote, never to their lot. A big
 * unlabelled number beside a dwt weight is exactly the confusion the unit rule
 * exists to prevent. */
.market-prices {
  list-style: none; margin: var(--rz-space-md) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 44px);
}
.market-prices__metal {
  display: block; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rz-aluminium);
}
.market-prices__figure {
  display: block; margin-top: 3px;
  font-family: var(--rz-font-data); font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 27.82px + 1.584vw, 50px);
  line-height: 1.05; letter-spacing: -.03em;
}
.market-prices__unit {
  display: block; margin-top: 3px; font-size: 13px; color: var(--rz-aluminium);
}

/* ---------- Lock confirmation ---------- */

.lock-id {
  font-family: var(--rz-font-data); font-size: clamp(22px, 18.91px + 0.792vw, 30px);
  letter-spacing: .06em; margin: 0;
}

/* ---------- Busy / status ---------- */

.busy { display: inline-flex; align-items: center; gap: 9px; color: var(--rz-aluminium); font-size: 16px; }
.busy::before {
  content: ""; width: 13px; height: 13px; flex: none;
  border: 2px solid var(--rz-aluminium-light); border-top-color: var(--rz-oxblood);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy::before { animation: none; } }

.form-error {
  border-left: 2px solid var(--rz-oxblood);
  background: var(--tint-ox); padding: 14px 18px;
  border-radius: 0 var(--rz-radius-sm) var(--rz-radius-sm) 0;
  font-size: 16px; margin-bottom: var(--rz-space-md);
}
.form-error:empty { display: none; }

/* ---------- Multi-grade selection ---------- */

.metal-group { margin-bottom: var(--rz-space-lg); }
.metal-group > .label { margin-bottom: 10px; }

/* Seventeen gold karats is a lot of chips. A wrapping flex row of fixed-width
   chips keeps 8K–24K scannable as one block instead of a ragged list. */
.choices--karat label { min-width: 4.8rem; text-align: center; padding-inline: 10px; }

.choices input:checked + label::before {
  content: "\2713\00a0";     /* a tick, so selection does not rely on colour alone */
}

/* ---------- Per-grade weight rows ---------- */

.weights { margin-bottom: var(--rz-space-md); }
.weights:empty::after {
  content: "Go back and tick the grades in your lot.";
  display: block; color: var(--rz-aluminium); font-size: 16px;
}
.weight-row {
  /* 9.8rem, not 8.6: "Sterling .925" and "Platinum .950" are words, and the
     grade label moved from 14px to 16px mono with the rest of the web scale.
     Thirteen glyphs at .6em plus .03em tracking is ~131px, and rem is still
     the untouched 16px root — only the label grew, so the track has to grow
     with it or those two labels wrap to two lines again. The column has to
     fit the longest label, not the typical one. */
  display: grid; grid-template-columns: 9.8rem 1fr; gap: var(--rz-space-sm);
  align-items: center; padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rz-aluminium-light) 55%, transparent);
}
.weight-row:last-child { border-bottom: 0; }
.weight-row__grade {
  font-family: var(--rz-font-data); font-size: 16px; letter-spacing: .03em;
}
.weight-row__unit {
  font-family: var(--rz-font-data); font-size: 15px; color: var(--rz-aluminium);
  padding-left: 2px;
}
.weight-row .pair { grid-template-columns: 1fr 4.1rem; }

/* ---------- Line-item figure ---------- */

.quote-card__lines { border-bottom: 1px solid var(--rz-aluminium-light); }
.quote-card__line {
  /* Wide enough for "Platinum .950" and "Sterling .925" on one line — the
     silver and platinum labels are words, not the short karat codes. 8.8rem,
     not 6.6: the row moved to 16px mono with the web scale and 6.6rem was
     already a shade under the 14px measurement it was set from. */
  display: grid; grid-template-columns: 8.8rem 1fr auto;
  gap: var(--rz-space-sm); align-items: baseline;
  padding: 14px clamp(22px, 4vw, 34px);
  border-bottom: 1px solid color-mix(in srgb, var(--rz-aluminium-light) 45%, transparent);
  font-size: 16px;
}
.quote-card__line:last-child { border-bottom: 0; }
.quote-card__line b {
  font-family: var(--rz-font-data); font-weight: 500; letter-spacing: .03em;
}
.quote-card__line span { color: var(--rz-aluminium); font-family: var(--rz-font-data); font-variant-numeric: tabular-nums; }
.quote-card__line em {
  font-style: normal; font-family: var(--rz-font-data);
  font-variant-numeric: tabular-nums; text-align: right; color: var(--rz-ink);
}
.quote-card__total { padding: clamp(20px, 3.5vw, 30px) clamp(22px, 4vw, 34px); }

@media (max-width: 520px) {
  .quote-card__line { grid-template-columns: 8.6rem 1fr; }
  .quote-card__line em { grid-column: 2; text-align: left; }
}

/* ---------- Platinum: typed, not picked ---------- */

.plt-add { display: flex; flex-wrap: wrap; gap: var(--rz-space-sm); align-items: center; }
.plt-add input {
  width: 8rem; flex: none;
  font-family: var(--rz-font-data); font-variant-numeric: tabular-nums;
}
.plt-quick { display: inline-flex; gap: 6px; }
.plt-quick__btn {
  font-family: var(--rz-font-data); font-size: 15px;
  border: 1px solid var(--rz-aluminium-light); border-radius: var(--rz-radius-sm);
  background: #fff; padding: 9px 13px; cursor: pointer; color: var(--rz-aluminium);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.plt-quick__btn:hover { border-color: var(--rz-ink); color: var(--rz-ink); }

.plt-list { list-style: none; margin: var(--rz-space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plt-list:empty { margin: 0; }
.plt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--rz-font-data); font-size: 16px;
  background: var(--rz-oxblood); color: #fff;
  border-radius: var(--rz-radius-sm); padding: 8px 8px 8px 14px;
}
.plt-chip button {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 19px; line-height: 1; padding: 0 5px; opacity: .75;
}
.plt-chip button:hover { opacity: 1; }
.plt-chip button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }