/* ============================================================
   Aether dark form theme — per DESIGN.md
   black ground, white type, warm-gray support, square corners,
   no gradients, no shadows, hover = opacity only.
   Lifted verbatim from the refined prototype (rounds 1–17); the
   font @import moved to a <link> in index.html.
   ============================================================ */
:root{
  --bg:#000000;
  --ink:#ffffff;
  --muted:#8C8279;          /* warm gray — helpers, hints, meta */
  --line:#2e2c29;           /* subtle borders on black */
  --line-strong:#8C8279;
  --err:#b3564f;            /* muted red — validation */
  --maxw:640px;
  --dur:280ms;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden}   /* clip the slide-in transform; never scroll sideways */
body{
  margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
}

/* progress hairline */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--muted);
  transition:width 400ms ease;z-index:40}

/* back control — quiet grey text above the headline, aligned to the content column */
.backlink{display:inline-flex;align-items:center;gap:7px;background:none;border:none;border-radius:0;
  padding:0;margin:0 0 22px;color:var(--muted);font:500 12px/1 'Inter',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.backlink:hover{color:var(--ink)}
.backlink:focus-visible{outline:1px solid var(--muted);outline-offset:4px}

/* stage wrapper */
#stage{min-height:100%;display:flex;align-items:center;justify-content:center;padding:96px 24px 120px}
.screen{width:100%;max-width:var(--maxw)}

/* slide animation */
.screen{animation:in var(--dur) ease-out}
.screen.back-nav{animation:inBack var(--dur) ease-out}
@keyframes in{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes inBack{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen,.screen.back-nav{animation:fade 120ms ease-out}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* type */
.q-title{font-size:30px;line-height:1.25;font-weight:500;letter-spacing:-.01em;margin:0 0 14px;white-space:pre-line}
.q-body{font-size:16px;color:var(--muted);margin:0 0 26px;max-width:56ch;white-space:pre-line}
.q-body b{color:var(--ink);font-weight:600}
.end-title{font-size:32px;line-height:1.3;font-weight:500;margin:0 0 16px;white-space:pre-line}
/* programmatic focus on the heading (for scroll/a11y) must not draw a frame */
h1:focus,h1:focus-visible{outline:none}

/* inputs — bottom-border style, labels above */
.field{margin:0 0 22px}
.f-label{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);
  border-radius:0;color:var(--ink);font:400 22px/1.4 'Inter',sans-serif;padding:6px 2px 10px;outline:none;
}
textarea{font-size:19px;resize:none;min-height:76px}
input::placeholder,textarea::placeholder{color:#4d4a46}
input:focus,textarea:focus{border-bottom-color:var(--ink)}
/* kill the browser autofill light-blue/white background; keep the field dark with white text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-out 0s;
}
.f-err{font-size:13px;color:var(--err);margin:8px 0 0;min-height:18px}

/* address autocomplete dropdown (mock in prototype; real Google Places at build) */
.field.ac{position:relative}
.ac-list{position:absolute;top:100%;left:0;right:0;z-index:10;background:#0b0b0a;
  border:1px solid var(--line-strong);border-top:none;display:none}
.ac-list.open{display:block}
.ac-item{display:block;width:100%;text-align:left;background:transparent;border:none;
  border-bottom:1px solid var(--line);color:var(--ink);font:400 18px/1.4 'Inter',sans-serif;
  padding:13px 14px;cursor:pointer}
.ac-item:last-child{border-bottom:none}
.ac-item .loc{color:var(--muted)}
.ac-item.hl,.ac-item:hover{background:#403a31}

/* choices */
.choices{margin:0 0 8px}
.choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;
  border:1px solid var(--line-strong);color:var(--ink);font:400 17px/1.3 'Inter',sans-serif;
  padding:14px 16px;margin:0 0 10px;cursor:pointer;min-height:48px}
.choice:hover{opacity:.75}
.choice .key{flex:0 0 auto;font:600 11px/1 'Inter',sans-serif;color:var(--muted);
  border:1px solid var(--line);padding:5px 8px;letter-spacing:.05em}
.choice.selected{background:var(--ink);color:var(--bg)}
.choice.selected .key{color:var(--bg);border-color:var(--bg)}
/* keyboard highlight — a white row that arrows move and Return selects */
.choice.hi{background:var(--ink);color:var(--bg)}
.choice.hi .key{color:var(--bg);border-color:#00000055}
/* fork rows carry a bit more presence; uniform so the highlight doesn't resize */
.choice.row-lg{padding:19px 16px}
/* commit register: the chosen row locks solid-white while its siblings fade,
   giving a brief "selection made" beat before the screen advances */
.choice.dismiss{opacity:.2;transition:opacity 150ms ease}
.choice:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* buttons — exactly two weights */
.actions{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:22px 0 0}
.btn-p{background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:0;
  font:600 13px/1 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 28px;cursor:pointer;min-height:48px}
.btn-p:hover{opacity:.8}
.btn-p.big{padding:20px 40px;font-size:15px}
/* deactivated Next: dimmed, non-advancing; text goes red when clicked early */
.btn-p.inactive{background:#2a2825;color:#6f6b61;border-color:#2a2825;cursor:default}
.btn-p.inactive:hover{opacity:1}
.btn-p.err{color:var(--err)}
.btn-s{background:transparent;color:rgba(255,255,255,.72);border:1px solid var(--line-strong);
  border-radius:0;font:500 12px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 22px;cursor:pointer;min-height:44px}
.btn-s:hover{opacity:.7}
.btn-p:focus-visible,.btn-s:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the primary button rendered at secondary weight (e.g. "Nope" on "Anything else?") */
.btn-p.as-secondary{background:transparent;color:rgba(255,255,255,.72);border-color:var(--line-strong);font-weight:500}
.btn-p.as-secondary:hover{opacity:.7}

/* phone field with a country-code selector */
.phone-field{position:relative}
.phone-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line-strong)}
.phone-row:focus-within{border-bottom-color:var(--ink)}
.cc-btn{display:flex;align-items:center;gap:7px;background:transparent;border:none;border-right:1px solid var(--line);
  color:var(--ink);font:400 20px/1.4 'Inter',sans-serif;padding:6px 12px 10px 2px;cursor:pointer;white-space:nowrap}
.cc-btn:hover{opacity:.8}
.cc-btn .cc-caret{color:var(--muted);font-size:12px}
.cc-btn .cc-flag,.cc-item .cc-flag{font-size:18px;line-height:1}
.phone-row input[type=tel]{border:none;flex:1;min-width:0;padding-left:12px}
.cc-list{top:100%;left:0;right:auto;min-width:min(320px,86vw);max-height:280px;overflow-y:auto}
.cc-item{display:flex;align-items:center;gap:10px;font-size:15px}
.cc-item .cc-name{flex:1}
.cc-item .cc-dial{color:var(--muted)}

/* keyboard hint — quiet, single color; sits right of Next, sharing its text baseline */
.hint{font-size:12.5px;color:var(--muted);margin:0;line-height:1.2}
.hint-block{margin-top:16px}   /* choice screens: hint below the options */
@media (pointer:coarse){.hint{display:none}}

/* quiet link on endings */
.quiet{display:inline-block;margin-top:34px;color:var(--muted);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line)}
.quiet:hover{opacity:.7}

/* auto-redirect countdown line on terminal endings */
.redirect{margin-top:32px;color:var(--muted);font-size:14px}
.rdlink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.rdlink:hover{opacity:.7}

/* dev ribbon (not part of the design — a QA aid).
   Hidden by default so the live form reads clean; append ?dev=1
   (or #dev) to the URL to reveal the screen id / running score / answers. */
#ribbon{display:none;position:fixed;bottom:14px;left:14px;z-index:50;font:500 11px/1.5 ui-monospace,Menlo,monospace;
  color:#5d594f;background:rgba(0,0,0,.85);border:1px solid var(--line);padding:7px 10px;max-width:70vw}
body.dev #ribbon{display:block}
#ribbon b{color:var(--muted);font-weight:600}
#ribbon .flash{color:#7d9a6a}
#ribbon button{background:none;border:none;color:#5d594f;font:inherit;cursor:pointer;padding:0;
  margin-left:10px;text-decoration:underline}
#ribbon .answers{display:none;margin-top:6px;white-space:pre}
#ribbon.open .answers{display:block}

@media (max-width:640px){
  .q-title{font-size:23px}
  .end-title{font-size:25px}
  .q-body{font-size:15px}
  #stage{padding:72px 18px 96px}
  input[type=text],input[type=email],input[type=tel]{font-size:18px}   /* >=16px: no iOS zoom */
  textarea{font-size:17px}
  .choice{font-size:16px;padding:15px 15px}
  .btn-p{padding:16px 24px}
}