/* ============================================================
   MESSAGE NOVA — the one-question-at-a-time door.
   Loaded by ONE page: message-nova.html (ai.usenovaos.com), after tokens.css.

   WHY THIS IS NOT assistant-signup.css.
   ------------------------------------
   That file's own header says "loaded by TWO pages now, do not fork it for a
   third", and the instinct to obey it was right until this page stopped being
   the same kind of page. assistant-signup.css is a CARD SYSTEM: a white panel
   on a tinted field, pill buttons, 14-22px radii, labelled fields stacked
   inside a bordered box, a footer rule. Message Nova is the opposite of that:
   one question in the middle of an empty screen, nothing around it. Loading
   1,700 lines of card system to override the card away would leave dead rules
   behind and make both files harder to read. So this page has its own ~250
   lines and assistant-signup.css keeps its two consumers, untouched.

   Vincent, 2026-09-05, on the card version: *"way easier, way nicer, way
   simpler... one input in the middle of the screen, not all this round stuff"*
   — and the footer gone.

   Vincent, 2026-09-14, on THIS version: *"I like the blue. It should still
   keep the blue and the big headings and everything. It should still look
   cool. I'm just saying it should be rounded instead of whatever the fuck
   this is. And it should still have those big buttons."* So: the palette,
   the type and the big ink button stay exactly as they were; the corners are
   the product's button radius (`--r-btn` from tokens.css, the one radius
   every button in every product uses); and the page gained a Continue, a
   Back on every step, and lost the wordmark next to the mark.

   WHAT IS SHARED, and deliberately: the palette. Every colour below is the
   same hex assistant-signup.css and the live marketing page use, so a person
   arriving from usenovaos.com does not fall onto a different-looking product.
   And the radius, which is the product's. What is NOT shared is the card.

   ONE RULE THIS FILE KEEPS: Inter Tight only. No Exo 2, no italic display
   face — a second font in a skewed weight is the thing that makes a page read
   as vibe-coded, and this page is meant to read as calm.

   CSP on this host is `script-src 'self'` with no 'unsafe-inline'. Inline
   <style> is allowed; inline <script> is not — behaviour lives in
   assets/js/message-nova-boot.js.
   ============================================================ */

/* ---- the token layer -----------------------------------------------------
   This page loads tokens.css for exactly two things: `--r-btn` (the corner)
   and the safe-area insets. The COLOURS are 1:1 with assistant-signup.css and
   the live marketing page; the SIZES are this page's own, because its shape
   language is. Everything below this block reads a token — the ship gate
   (scripts/lint-frontend.mjs, rules css-tokens / css-hex / css-motion) refuses
   a literal outside :root, and it is right to. */
:root {
  /* ---- ink ---- */
  --ink: #0A1220;          /* headlines, the darkest thing on the page */
  --ink-hover: #1B2A3C;    /* the one button, pressed */
  --mut: #44536B;          /* body copy */
  --sub: #607086;          /* secondary copy */
  --faint: #8A97AB;        /* fine print */
  --ghost: #B4C1D1;        /* placeholder text inside an empty input */
  --on-ink: #FFFFFF;       /* text ON the ink button */

  /* ---- surfaces ---- */
  --field: #F2FCFF;        /* the page itself */
  --paper: #FFFFFF;        /* the copy row */
  --tint: #F7FCFF;         /* the copy button, hovered */
  --line: #D8E4EE;
  --cy-deep: #0E7FA6;      /* cyan that is legible AS TEXT on white */
  --ok: #0E7A5F;
  --err: #B3261E;
  --warn: #8A5A00;

  /* ---- type ----
     THE QUESTION AND THE INPUT ARE BOTH FLUID, and they are the only two things
     on the page that need to be: everything else is support copy that should
     stay the same size on a phone and a 27-inch screen. */
  --fs-root: 16px;
  --fs-code: clamp(2.4rem, 7vw, 3.2rem);   /* the six digits, read off a screen */
  --fs-q: clamp(1.5rem, 3.4vw, 2rem);      /* the question */
  --fs-input: clamp(1.25rem, 2.6vw, 1.5rem);
  --fs-lede: 1.05rem;
  --fs-ctl: .95rem;
  --fs-body: .9rem;
  --fs-note: .85rem;
  --fs-sm: .82rem;
  --fs-fine: .75rem;

  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- shape ----
     The corner is `--r-btn` from tokens.css, not a value of this page's own.
     It is the one radius every button in every product carries, so this page
     rounds the same way the app does. */
  --r-here: var(--r-btn);
  --r-0: 0;                /* the underline input and the inside of the copy row: the row's corners are the row's */
  --r-pill: 999px;         /* the primary CTA is a full pill (Vincent: "bigger, rounder, fun") */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-focus: .18s;   /* the input's underline picking up focus */
  --dur-tap: .16s;     /* the button darkening */
  --dur-step: .22s;    /* a question replacing a question */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.mn {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-root);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- the mark. The only chrome on the page, and a link out. ------------
   Absolutely positioned so it cannot participate in the centring — the input
   must sit on the optical middle of the viewport, not on the middle of what is
   left after a header. The mark alone: Vincent, 2026-09-14, "it shouldn't say
   Nova on the top left. The logo is fine." Padded out to a 44px touch target
   around an 18px mark, so the mark sits where it always did. */
.mn-mark {
  position: absolute;
  top: calc(13px + var(--safe-top));
  left: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-here);
  transition: background var(--dur-tap) var(--ease);
}
.mn-mark:hover { background: var(--paper); }
.mn-mark img { width: 18px; height: 18px; display: block; }

/* ---- the stage --------------------------------------------------------- */
.mn-stage {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(96px + var(--safe-top)) 24px calc(96px + var(--safe-bottom));
}

.mn-col {
  width: 100%;
  max-width: 30rem;
}

/* ---- one question at a time -------------------------------------------- */
.mn-q {
  margin: 0 0 22px;
  font-size: var(--fs-q);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* THE INPUT. A rule, not a box. No border on three sides, no fill — what the
   person sees is their own words on the page with a line under them. The
   1.5rem size is doing the work a label would otherwise do: at that scale an
   empty field with a placeholder reads as the question's answer slot. */
.mn-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 0 12px;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: var(--r-0);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-input);
  font-weight: 500;
  line-height: 1.3;
  transition: border-color var(--dur-focus) var(--ease);
  appearance: none;
}
.mn-input::placeholder { color: var(--ghost); font-weight: 400; }
.mn-input:focus { outline: none; border-bottom-color: var(--cy-deep); }
.mn-input:disabled { color: var(--sub); }

/* AUTOFILL LOOKS THE SAME AS AN ORDINARY FIELD. Vincent, 2026-09-14: iOS/Safari
   autofill "resizes it super weirdly and highlights the bar really weird" when
   hovering the key/card/location suggestions. Two browser defaults cause that:
   a hard yellow/blue fill painted via an internal box-shadow, and a font/metrics
   swap. We pin both — the fill is repainted in the page colour so the underline
   field still reads as transparent, the text colour and size are held, and the
   background-colour transition is parked at 9999s so the highlight can never
   flash in. Every autofill state (rest / hover / focus / active) gets the same
   treatment so moving across suggestions no longer changes a thing on screen. */
.mn-input:-webkit-autofill,
.mn-input:-webkit-autofill:hover,
.mn-input:-webkit-autofill:focus,
.mn-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--field) inset;
  box-shadow: 0 0 0 100px var(--field) inset;
  border-bottom: 2px solid var(--line);
  caret-color: var(--ink);
  font-size: var(--fs-input);
  font-weight: 500;
  transition: background-color 9999s ease-in-out 0s, border-color var(--dur-focus) var(--ease);
}
.mn-input:-webkit-autofill:focus { border-bottom-color: var(--cy-deep); }

/* ---- the one hint under the line --------------------------------------- */
.mn-hint {
  margin: 14px 0 0;
  font-size: var(--fs-note);
  color: var(--sub);
}
.mn-hint b { color: var(--ink); font-weight: 600; }

.mn-fine {
  margin: 26px 0 0;
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--faint);
}
.mn-fine a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.mn-fine a:hover { color: var(--sub); }

/* ---- the big fun button on the RIGHT, the quiet Back on the LEFT --------- */
/* Vincent, 2026-09-14: "a bigger rounder easy-to-click 'fun' button on the
   right in every step, and the Back button on the left and smaller." So the
   row is Back (left) ⟷ primary (right): CSS `order` places them regardless of
   markup order, and space-between pushes the primary to the right edge where
   the thumb lands. The primary is a big rounded PILL with a soft lift and a
   real press, sized to be the obvious thing to tap. */
.mn-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-top: 30px;
}
.mn-btn {
  order: 2;                       /* right */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 16px 34px;
  border: 0;
  border-radius: var(--r-pill);  /* full pill — the "rounder" ask */
  background: var(--ink);
  color: var(--on-ink);
  font-family: inherit;
  font-size: calc(var(--fs-ctl) + 2px);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(10, 18, 32, .45), 0 2px 4px -2px rgba(10, 18, 32, .3);
  transition: background var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease),
              box-shadow var(--dur-tap) var(--ease), opacity var(--dur-tap) var(--ease);
}
.mn-btn:hover { background: var(--ink-hover); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(10, 18, 32, .5), 0 3px 6px -2px rgba(10, 18, 32, .32); }
.mn-btn:active { transform: translateY(1px) scale(.98); box-shadow: 0 4px 12px -6px rgba(10, 18, 32, .45); }
.mn-btn:disabled { opacity: .4; cursor: default; box-shadow: none; transform: none; }
/* the arrow/icon inside the primary grows with it */
.mn-btn svg { width: 18px; height: 18px; }

.mn-back {
  order: 1;                       /* left */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-here);
  background: transparent;
  color: var(--sub);
  font-family: inherit;
  font-size: calc(var(--fs-ctl) - 2px);   /* smaller, quieter */
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-tap) var(--ease);
}
.mn-back:hover { color: var(--ink); }
.mn-back svg { width: 15px; height: 15px; }

/* ---- the code, on the handoff screen ------------------------------------ */
/* Six digits, set big and spaced, because on a desktop this is a thing people
   read off the screen and type into a phone by hand. */
.mn-code {
  margin: 4px 0 0;
  font-size: var(--fs-code);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mn-to {
  margin: 18px 0 0;
  font-size: var(--fs-lede);
  color: var(--mut);
}
.mn-to b { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---- the message we wrote for them -------------------------------------- */
.mn-copyrow {
  display: flex;
  align-items: stretch;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-here);
  overflow: hidden;
  background: var(--paper);
}
.mn-copyrow input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--r-0);
  background: var(--paper);
  color: var(--mut);
  font-family: inherit;
  font-size: var(--fs-body);
}
.mn-copyrow input:focus { outline: none; }
.mn-copyrow button {
  flex: 0 0 auto;
  padding: 11px 14px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: var(--r-0);
  background: var(--paper);
  color: var(--cy-deep);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.mn-copyrow button:hover { background: var(--tint); }

/* ---- messages ----------------------------------------------------------- */
.mn-msg {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  font-weight: 500;
  display: none;
}
.mn-msg.show { display: block; }
.mn-msg--err { color: var(--err); }
.mn-msg--ok { color: var(--ok); }
.mn-msg--warn { color: var(--warn); }

/* ---- the step transition ------------------------------------------------ */
/* One property, 220ms. A question replacing a question should feel like a page
   settling, not like an animation. */
@keyframes mn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mn-step { animation: mn-in var(--dur-step) var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .mn-step { animation: none; }
}