/* Quantum Reticulum registration portal. The tokens are Slate's, copied from the console's style.css (the portal may not
   import the server), so the two read alike. Mobile first; one column until there is room. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --void: #f6f6f5; --panel: #ffffff; --line: #e6e6e1; --line-strong: #d2d2cb; --text: #1b1c1e; --muted: #5a5d62;
  --ion: #1e4ba8; --ok: #1a7447; --warn: #845d00; --bad: #b42318; --wash: #eef2fb; --on-ion: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --void: #14171c; --panel: #1b1f26; --line: #2b3038; --line-strong: #3a414c; --text: #e8eaed; --muted: #a4aab3;
    --ion: #9abbf4; --ok: #5cc98f; --warn: #e0b24a; --bad: #f0776b; --wash: #21262e; --on-ion: #14171c;
    color-scheme: dark;
  }
}
body { background: var(--void); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--ion); }
:focus-visible { outline: 3px solid var(--ion); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--panel); padding: 8px 12px; z-index: 10; }
.top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.top nav { display: flex; align-items: center; gap: 16px; }
.brand { font-weight: 600; color: var(--text); text-decoration: none; }
main { width: 100%; max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; flex: 1; }
h1 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 16px; }
h2 { font-size: 1.15rem; margin: 24px 0 8px; }
p { margin-bottom: 12px; }
.foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px; border-top: 1px solid var(--line); background: var(--panel); font-size: .9rem; }
.stack { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; }
.inline { display: inline; }
.field { display: flex; flex-direction: column; gap: 4px; }
label { font-weight: 600; }
input:not([type=checkbox]) { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; }
.help { color: var(--muted); font-size: .9rem; margin: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; font: inherit; font-weight: 600; color: var(--on-ion); background: var(--ion); border: 1px solid var(--ion); border-radius: 6px; cursor: pointer; text-decoration: none; }
.button.secondary { color: var(--ion); background: transparent; }
.button[disabled] { opacity: .6; cursor: default; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ion); text-decoration: underline; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; align-items: center; }
.errors { border: 1px solid var(--bad); border-left-width: 4px; background: var(--panel); padding: 12px 16px; margin-bottom: 16px; border-radius: 6px; }
.errors ul { margin: 0 0 0 20px; }
.notice { border-left: 4px solid var(--ok); background: var(--panel); padding: 8px 12px; }
.banner { border-left: 4px solid var(--warn); background: var(--panel); padding: 8px 12px; margin-bottom: 16px; }
.banner p { margin: 0 0 4px; }
.steps { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin-bottom: 16px; color: var(--muted); font-size: .9rem; }
.steps [aria-current] { color: var(--text); font-weight: 600; text-decoration: underline; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--panel); }
legend { font-weight: 600; padding: 0 6px; }
.card { display: flex; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); }
.card:first-of-type { border-top: 0; }
.card input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--ion); }
.card .help span { display: block; }
.badge { color: var(--warn); font-weight: 600; }
.note { color: var(--muted); font-size: .9rem; }
.price { color: var(--muted); font-size: .9rem; }
.plain { margin-left: 20px; }
.lines { list-style: none; border-top: 1px solid var(--line); margin-bottom: 12px; }
.lines li { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin-bottom: 16px; }
.facts dt { color: var(--muted); font-size: .9rem; }
.facts dd { margin-bottom: 8px; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, Consolas, Menlo, monospace; overflow-wrap: anywhere; }
.pay { font-weight: 600; }
.progress { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.progress h2 { margin-top: 0; }
.hp { position: absolute; left: -9999px; }
@media (min-width: 600px) {
  .facts { grid-template-columns: max-content 1fr; }
}