/* ---------- registration dialogs ----------
   .rm-dialog is the shared box: the five-step form (#regModal) and the pre-launch
   notice (#regGate) are the same white panel, so they are the same rules. Anything
   below that is still keyed to #regModal is genuinely specific to the form. */
.rm-dialog{
  width:min(640px,calc(100vw - 32px));max-width:640px;padding:0;
  border:1px solid var(--line-strong);border-radius:6px;
  background:var(--ground);color:var(--ink);font-family:var(--body);
  /* dvh, not svh: the dialog must fit the viewport the browser is actually showing,
     including when mobile Safari's toolbars are expanded. 24px keeps it off both edges,
     and the 900px cap stops it from becoming a full-height column on a desktop monitor. */
  max-height:min(calc(100dvh - 24px),900px);
  /* style.css's `*{margin:0}` reset out-specifies the UA's `dialog:modal{margin:auto}`,
     which is what centres a top-layer dialog in its viewport-sized containing block —
     without it the modal pinned to the top-left corner. .rm-dialog (0,1,0) wins over the
     reset (0,0,0) and restores the centring on both axes. No position/coords are used
     here, so this is the whole fix. */
  margin:auto;
}
/* The column lives on [open] only: `#regModal{display:flex}` would out-specify the UA's
   `dialog:not([open]){display:none}` and leave the closed dialog on the page.
   The form — not the dialog — is the direct parent of head/body/foot, so it has to be
   the column as well, and has to be allowed to shrink (min-height:0) or the body's
   content sets an unshrinkable floor and the foot is pushed past the dialog's edge. */
#regModal[open]{display:flex;flex-direction:column}
#regModal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%}
.rm-dialog::backdrop{background:rgba(0,58,127,.55)}
.rm-head{
  flex:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px 16px;border-bottom:1px solid var(--line);background:var(--cream);
}
.rm-close{
  appearance:none;background:transparent;border:1px solid var(--line-strong);border-radius:6px;
  width:44px;height:44px;flex:none;cursor:pointer;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
}
.rm-dialog :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rm-steps{display:flex;gap:6px;margin-top:14px;padding:0}
.rm-steps li{flex:1;height:3px;background:var(--line);border-radius:2px;list-style:none}
.rm-steps li.done,.rm-steps li[aria-current="step"]{background:var(--ink)}
/* The body is the only part that scrolls: head and foot are fixed rows of the column,
   so the Back / Submit buttons can never be pushed past the bottom edge of the dialog. */
.rm-body{
  flex:1 1 auto;min-height:0;
  padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Scroll affordance. The two `local` layers are painted in the ground colour and
     travel with the content; they cover the two fixed `scroll` shadow layers whenever
     the body is scrolled to that end. So a shadow shows only while there is more to
     read in that direction — and nothing shows at all when the step fits. */
  background:
    linear-gradient(var(--ground) 30%,rgba(255,255,255,0)) top/100% 20px no-repeat local,
    linear-gradient(rgba(255,255,255,0),var(--ground) 70%) bottom/100% 20px no-repeat local,
    linear-gradient(rgba(0,58,127,.13),rgba(0,58,127,0)) top/100% 10px no-repeat scroll,
    linear-gradient(rgba(0,58,127,0),rgba(0,58,127,.13)) bottom/100% 10px no-repeat scroll;
  background-color:var(--ground);
}
.rm-foot{
  flex:none;
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:16px 24px 20px;border-top:1px solid var(--line);background:var(--ground);
}
/* Quiet third action, pushed away from the two that move the seller forward. */
.rm-reset{margin-right:auto;font-size:14px;min-height:44px;color:var(--ink-70)}
.rm-reset:hover{color:var(--ink);text-decoration:underline}
.rm-field{display:block;margin-bottom:16px}
.rm-field > span{
  display:block;font-size:13px;font-weight:600;letter-spacing:.02em;
  margin-bottom:6px;color:var(--ink);
}
.rm-field input,.rm-field select,.rm-field textarea{
  width:100%;min-height:48px;padding:11px 12px;
  font-family:var(--body);font-size:16px;color:var(--ink);letter-spacing:-.01em;
  background:var(--ground);border:1px solid var(--line-strong);border-radius:6px;
}
.rm-field input:focus-visible,.rm-field select:focus-visible,.rm-field textarea:focus-visible{border-color:var(--ink)}
.rm-field .hint{display:block;font-size:13px;color:var(--ink-70);margin-top:6px}
.rm-check{
  display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--line);font-size:15px;color:var(--ink-70);
}
.rm-check input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--ink)}
.rm-err{font-size:14px;color:var(--accent);font-weight:500;margin-bottom:12px;min-height:1.4em}
/* Step 5's review list. Two columns while there is room; stacked on a phone, where a
   right-aligned value column is narrow enough to break a 17-character VIN in half. */
.rm-dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0}
.rm-dl dt{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.rm-dl dd{margin:0;font-size:15px;color:var(--ink-70);text-align:right;overflow-wrap:anywhere}
.rm-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.rm-legal{font-size:15px;color:var(--ink-70);margin-bottom:18px}
.rm-waiver{
  border:1px solid var(--line);border-radius:6px;padding:16px;
  max-height:220px;overflow-y:auto;font-size:15px;color:var(--ink-70);
}
@media(max-width:520px){
  .rm-row{grid-template-columns:1fr}
  .rm-dl{grid-template-columns:1fr;gap:2px}
  .rm-dl dt{margin-top:10px}
  .rm-dl dt:first-child{margin-top:0}
  .rm-dl dd{text-align:left}
  .rm-foot{flex-direction:column-reverse}
  .rm-foot .btn{justify-content:center;width:100%}
}
.rm-dialog[open]{animation:rm-in .18s ease-out}
@keyframes rm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rm-dialog[open]{animation:none}}

/* ---------- pre-launch notice ----------
   Shown in place of the form until seller registration opens. It is one short
   message and one button, so it takes the shared box at a width that fits the
   sentence rather than the form's six-across grid, and it does not scroll. */
#regGate{width:min(520px,calc(100vw - 32px));max-width:520px}
#regGate[open]{display:block}
.rg-inner{padding:28px 28px 24px}
/* A heading, so h2's page-scale clamp applies; overridden here because 56px of
   Fraunces in a 460px panel is a poster, not a notice. */
.rg-title{
  font-size:26px;line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);margin:14px 0 0;
}
.rg-body{font-size:15px;line-height:1.5;color:var(--ink-70);margin:12px 0 0}
.rg-foot{display:flex;justify-content:flex-end;margin-top:24px}
@media(max-width:520px){
  .rg-inner{padding:24px 20px 20px}
  .rg-foot .btn{justify-content:center;width:100%}
}

/* register.html's line under Start registration. modal.js sets [hidden] on it once
   the date has passed, so the block display must not out-specify that. */
.regopens{display:block}
.regopens[hidden]{display:none}