/*
 * The onboarding form, in Nudge's own identity.
 *
 * Every colour, size, radius, shadow and easing here is a token from
 * brand/color/tokens.css, copied into public/brand/ by sync-brand.mjs. There is
 * no hex value in this file on purpose: a brand decision changes in one place
 * and reaches every client's form the next time that script runs.
 *
 * Four brand rules this file is built to keep:
 *
 *   1. --red cannot carry small type. White on it measures 3.37:1, under the
 *      floor for a button label. Every action here is --action (the same red at
 *      6.09:1). --red appears only where nothing small sits on it.
 *   2. Seven type steps, a 14px floor, and a size outside the set is a bug. So
 *      every size below is a --t-* token and there is nothing in between.
 *   3. Playfair for display headings, Hanken for everything read or clicked. A
 *      question title is a heading; a label, a button and a field are not.
 *   4. Three radii: --r-card for containers, --r-button for what sits inside
 *      them, --r-pill for pills. Tighter inside than out.
 *
 * The tokens declare color-scheme: light, so there is no dark mode here. That is
 * the brand's decision rather than an omission.
 */

@import url("/brand/color/tokens.css");
@import url("/brand/type/fonts.css");

:root {
  /* The one measure the brand does not name: the tap target every control has
     to reach. It is not a type size and not a space step. */
  --tap: 46px;
}

* { box-sizing: border-box; }

/* Several of the blocks that get hidden and shown are display: grid, and a class
   with a display beats the user agent's [hidden] rule. Without this the "none of
   these" fields sit open under a reference card the client already picked. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 6rem;
}

h1, h2, h3 { margin: 0; }

a { color: var(--action); text-underline-offset: 2px; }
a:hover { color: var(--action-hover); }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--s-1);
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s-3); top: var(--s-3); z-index: var(--z-grain);
  background: var(--white); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-button); box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------------ top bar */

.bar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.bar-in {
  max-width: 44rem; margin: 0 auto;
  padding: var(--s-3) var(--s-5);
  display: flex; align-items: center; gap: var(--s-4); justify-content: space-between;
}

.who { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }

/* The wordmark is a PNG at 1772 x 928 with a transparent ground. Height is set
   and the width follows, so it never stretches. */
.wordmark { height: 1.75rem; width: auto; display: block; flex: none; }

.rule { width: 1px; height: 1.5rem; background: var(--line-strong); flex: none; }

#client {
  font-size: var(--t-body); font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.save {
  font-size: var(--t-fine); color: var(--ink-muted);
  display: flex; align-items: center; gap: var(--s-2); flex: none;
}
.save[data-state="saved"] { color: var(--teal); }
.save[data-state="error"] { color: var(--action); }

.track { height: 3px; background: var(--line); }
.fill {
  height: 100%; width: 0;
  background: var(--action);
  transition: width var(--speed) var(--ease);
}

/* ------------------------------------------------------------------ stage */

.stage {
  max-width: 44rem; margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-8);
}

.eyebrow {
  font-size: var(--t-fine); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-4);
}

.q-title {
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0 0 var(--s-4);
  max-width: 24ch;
}

.q-help {
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
  max-width: 62ch;
}
.q-help p { margin: 0 0 var(--s-3); }
.q-help p:last-child { margin-bottom: 0; }

.q-note {
  color: var(--ink-soft);
  background: var(--paper-sink);
  border-radius: var(--r-card);
  padding: var(--pad-md);
  margin-top: var(--s-7);
  max-width: 62ch;
}
.q-note p { margin: 0; }

/* The asterisk is the whole convention for a compulsory question. It is the one
   mark a form reader already knows, so it needs no legend and no pill. */
.req { color: var(--action); }

/* What a screen reader gets instead of the asterisk, since a lone "*" read aloud
   says nothing. Clipped rather than hidden, so it is still in the accessibility
   tree. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.controls { margin-top: var(--s-6); display: grid; gap: var(--s-4); }

/* ------------------------------------------------------------------ fields */

.field { display: grid; gap: var(--s-2); }

.field > label { font-size: var(--t-body); font-weight: 600; color: var(--ink); }

.field input, .field textarea, .code-row input {
  font-family: var(--font-text);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-button);
  padding: var(--s-3) var(--s-4);
  min-height: var(--tap);
  width: 100%;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.field textarea { min-height: 5.5rem; resize: vertical; line-height: var(--lh-body); }

.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field input:focus, .field textarea:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--red-wash);
  outline: none;
}

.hint { font-size: var(--t-fine); color: var(--ink-muted); }

/* A prefill is a suggestion, never a filled in box: an unread box that looks
   answered becomes a fact nobody checked. */
.prefill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--paper-sink); border: 1px dashed var(--line-strong);
  color: var(--ink-muted);
  font-family: var(--font-text); font-size: var(--t-fine);
  text-align: left;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  cursor: pointer; min-height: 2.25rem;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.prefill:hover { border-color: var(--action); color: var(--ink); }
.prefill b { color: var(--ink); font-weight: 600; }
.prefill.gone { display: none; }

.note-line {
  font-size: var(--t-fine); color: var(--teal);
  display: flex; gap: var(--s-2); align-items: flex-start;
}

/* ------------------------------------------------------------------ uploads */

.drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--white);
  padding: var(--s-6) var(--s-5);
  display: grid; gap: var(--s-2); justify-items: center; text-align: center;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.drop:hover, .drop:focus-visible, .drop.over {
  border-color: var(--action); background: var(--red-wash);
}
.drop.has { padding: var(--s-4); }

.drop-title { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.drop-hint { font-size: var(--t-fine); color: var(--ink-muted); max-width: 46ch; }
.drop svg { color: var(--ink-muted); }

.bucket { display: grid; gap: var(--s-3); }

.thumbs {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

.thumb {
  position: relative; aspect-ratio: 1;
  border-radius: var(--r-button); overflow: hidden;
  background: var(--paper-sink);
  border: 1px solid var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .doc {
  width: 100%; height: 100%;
  display: grid; place-content: center; gap: var(--s-1);
  padding: var(--s-2); text-align: center;
  font-size: var(--t-fine); color: var(--ink-muted); word-break: break-word;
}
.thumb .bar-progress {
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--action); transition: width var(--speed) var(--ease);
}
.thumb button {
  position: absolute; top: var(--s-1); right: var(--s-1);
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill);
  border: none; background: var(--ink); color: var(--on-dark);
  cursor: pointer; font-size: var(--t-body); line-height: 1;
  display: grid; place-items: center;
}
.thumb.failed { border-color: var(--action); }

/* ------------------------------------------------------------------ options */

.opts { display: grid; gap: var(--s-3); }

.opt {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-button);
  padding: var(--s-4);
  cursor: pointer;
  min-height: var(--tap);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.opt:hover { border-color: var(--line-strong); }
.opt[data-on="1"] { border-color: var(--action); background: var(--red-wash); }

.opt input { position: absolute; opacity: 0; pointer-events: none; }

.box {
  flex: none; width: 1.375rem; height: 1.375rem; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: var(--s-1);
  background: var(--white);
  display: grid; place-items: center;
  color: transparent;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.opt[data-round="1"] .box { border-radius: var(--r-pill); }
.opt[data-on="1"] .box { background: var(--action); border-color: var(--action); color: var(--on-dark); }

.opt-body { display: grid; gap: var(--s-1); min-width: 0; }
.opt-label { font-weight: 600; }
.opt-help { font-size: var(--t-fine); color: var(--ink-muted); line-height: var(--lh-body); }

.group-label {
  font-size: var(--t-body); font-weight: 600;
  margin: var(--s-5) 0 var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.group-label:first-child { margin-top: 0; }
.group-label .dot {
  width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill);
  background: var(--action); flex: none;
}
.group-label.avoid .dot { background: var(--teal); }

/* ------------------------------------------------------------------ pairs */

.pairs { gap: var(--s-5); }

.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.side {
  font-family: var(--font-text);
  display: grid; gap: var(--s-3); justify-items: center;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-3);
  color: var(--ink-3, var(--ink-muted));
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease),
              color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.side:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.side[data-on="1"] {
  border-color: var(--action); background: var(--red-wash); color: var(--action);
}

/* The drawing is the option. It takes the colour of the card, so choosing a side
   turns its composition red and the other stays quiet. */
.motif { display: block; width: 100%; max-width: 8.5rem; color: var(--ink-muted); }
.motif svg { width: 100%; height: auto; display: block; }
.side[data-on="1"] .motif { color: var(--action); }

.side-label {
  font-size: var(--t-body); font-weight: 600; color: var(--ink);
  text-align: center;
}
.side[data-on="1"] .side-label { color: var(--action); }

@media (max-width: 400px) {
  .side { padding: var(--s-3) var(--s-2); }
  .motif { max-width: 6rem; }
}

/* ------------------------------------------------------------------ reference cards */

.cards {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.card {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden; cursor: pointer;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card[data-on="1"] { border-color: var(--action); box-shadow: 0 0 0 3px var(--red-wash); }

.shot {
  aspect-ratio: 16 / 10;
  background: var(--paper-sink);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.shot .none {
  position: absolute; inset: 0; display: grid; place-content: center;
  color: var(--ink-muted); font-size: var(--t-fine); text-align: center; padding: var(--s-4);
}
.shot .pick {
  position: absolute; top: var(--s-3); left: var(--s-3);
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill);
  background: var(--white); border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; color: transparent;
}
.card[data-on="1"] .shot .pick { background: var(--action); border-color: var(--action); color: var(--on-dark); }

.card-body { padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.card-name {
  font-family: var(--font-display); font-size: var(--t-lead);
  font-weight: 500; line-height: var(--lh-card);
}
.card-desc { font-size: var(--t-fine); color: var(--ink-muted); line-height: var(--lh-body); }
.card-link {
  font-size: var(--t-fine); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-1);
  justify-self: start; padding: var(--s-1) 0;
}
.card-link:hover { text-decoration: underline; }

.own {
  border: 1.5px solid var(--line); border-radius: var(--r-card);
  background: var(--white); padding: var(--s-4);
  display: grid; gap: var(--s-4);
}
.own[data-on="1"] { border-color: var(--action); background: var(--red-wash); }
.own-head { display: flex; gap: var(--s-4); align-items: center; font-weight: 600; cursor: pointer; }

/* This box is the fifth choice in the same single choice group as the four cards,
   but it sits in .own rather than in .opt, so the rule that fills a selected box
   did not reach it and the circle stayed empty while the panel turned red. It is
   round because it is a radio, and it carries the same tick the cards do. */
.own .box { border-radius: var(--r-pill); }
.own[data-on="1"] .box { background: var(--action); border-color: var(--action); color: var(--on-dark); }

/* ------------------------------------------------------------------ ranking */

.ranked { display: grid; gap: var(--s-2); margin-top: var(--s-2); }

.rank-row {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--white); border: 1.5px solid var(--line);
  border-left: 4px solid var(--action);
  border-radius: var(--r-button); padding: var(--s-3) var(--s-4);
}
.rank-row.dragging { opacity: .4; }
.rank-n {
  flex: none; width: 1.625rem; height: 1.625rem; border-radius: var(--r-pill);
  background: var(--action); color: var(--on-dark);
  display: grid; place-items: center; font-size: var(--t-fine); font-weight: 700;
}
.rank-label { flex: 1; min-width: 0; font-weight: 600; }
.rank-move { display: flex; gap: var(--s-1); flex: none; }
.rank-move button {
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-button);
  border: 1px solid var(--line-strong); background: var(--white);
  color: var(--ink-muted); cursor: pointer;
  display: grid; place-items: center;
}
.rank-move button:hover:not(:disabled) { border-color: var(--action); color: var(--action); }
.rank-move button:disabled { opacity: .3; cursor: default; }
.grip { color: var(--ink-faint); cursor: grab; flex: none; }

/* ------------------------------------------------------------------ footer nav */

.nav {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: var(--s-3) var(--s-5);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
}
.nav-in {
  max-width: 44rem; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-4);
}

button.btn, .nav button {
  font-family: var(--font-text); font-size: var(--t-body); font-weight: 600;
  min-height: var(--tap);
  padding: 0 var(--s-5);
  border-radius: var(--r-button);
  border: 1.5px solid var(--line-strong);
  background: var(--white); color: var(--ink);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), transform 80ms var(--ease);
}
button.btn:hover, .nav button:hover { border-color: var(--ink-muted); }
button.btn:active, .nav button:active { transform: translateY(1px); }
button.btn:disabled, .nav button:disabled { opacity: .45; cursor: default; }

button.primary {
  background: var(--action); border-color: var(--action); color: var(--on-dark);
  margin-left: auto;
}
button.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }

.steps { display: flex; gap: var(--s-1); margin: 0 auto; align-items: center; }

/* Specific enough to beat `.nav button`, which would otherwise give each dot the
   46px tap height and the padding meant for Back and Continue, and turn the six
   dots into six squares. The tap target comes back as a pseudo element, so the
   dot stays a dot and the target stays a target. */
.steps .step {
  width: 0.625rem; height: 0.625rem; min-height: 0.625rem;
  border-radius: var(--r-pill);
  background: var(--line-strong); border: none;
  padding: 0; margin: 0 var(--s-2);
  cursor: pointer; position: relative;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.steps .step::after { content: ""; position: absolute; inset: -0.875rem -0.625rem; }
.steps .step[data-done="1"] { background: var(--ink-muted); }
.steps .step[data-on="1"] { background: var(--action); transform: scale(1.5); }

@media (max-width: 640px) {
  .steps { display: none; }
  .wordmark { height: 1.5rem; }
}

/* ------------------------------------------------------------------ review, done, gates */

/* Why the send button is off, said once, next to the way to fix it. */
.needs {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--red-wash);
  border: 1.5px solid var(--action);
  border-radius: var(--r-card);
  padding: var(--s-4);
  margin-top: var(--s-6);
}
.needs-mark { color: var(--action); display: grid; place-items: center; flex: none; }
.needs-body { flex: 1; min-width: 0; display: grid; gap: var(--s-1); }
.needs-t { font-weight: 600; }
.needs-d { font-size: var(--t-fine); color: var(--ink-muted); }
.needs .btn { flex: none; background: var(--white); border-color: var(--action); color: var(--action); }
.needs .btn:hover { background: var(--action); border-color: var(--action); color: var(--on-dark); }

@media (max-width: 640px) {
  .needs { flex-wrap: wrap; }
  .needs .btn { width: 100%; }
}

.review { display: grid; gap: var(--s-3); margin-top: var(--s-6); }

.row {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-4);
  display: grid; gap: var(--s-2);
}
.row-head { display: flex; gap: var(--s-4); align-items: baseline; justify-content: space-between; }
.row-q { font-weight: 600; }
.row-a { color: var(--ink-soft); white-space: pre-wrap; }
.row-a.blank { color: var(--ink-muted); font-style: italic; }
.row button {
  font-family: var(--font-text); font-size: var(--t-fine); font-weight: 600;
  color: var(--action); background: none; border: none; cursor: pointer;
  padding: var(--s-1) 0;
}
.row.missing { border-color: var(--action); background: var(--red-wash); }

.done {
  text-align: center; padding: var(--s-8) 0 var(--s-5);
  display: grid; gap: var(--s-5); justify-items: center;
}
.done h1 {
  font-family: var(--font-display); font-size: var(--t-display);
  font-weight: 500; line-height: var(--lh-display); letter-spacing: var(--tr-display);
  max-width: 16ch;
}
.done p { color: var(--ink-soft); max-width: 50ch; margin: 0; }
.done .wordmark { height: 2.5rem; margin-top: var(--s-5); }

.tick {
  width: 3.5rem; height: 3.5rem; border-radius: var(--r-pill);
  background: var(--teal); color: var(--on-dark);
  display: grid; place-items: center;
}

.mid {
  min-height: 55vh; display: grid; place-content: center; justify-items: center;
  gap: var(--s-4); text-align: center;
}
.mid h1 {
  font-family: var(--font-display); font-size: var(--t-section);
  font-weight: 500; line-height: var(--lh-display);
}
.mid p { color: var(--ink-soft); max-width: 48ch; margin: 0; }

.code-row { display: flex; gap: var(--s-3); max-width: 20rem; }
.code-row input {
  text-align: center; letter-spacing: 0.3em;
  font-size: var(--t-lead); font-weight: 600;
}

.spinner {
  width: 1.625rem; height: 1.625rem; border-radius: var(--r-pill);
  border: 2.5px solid var(--line-strong); border-top-color: var(--action);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.stage > * { animation: rise var(--speed) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--s-2)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}