/* Bonded Tenant Survey — tenant register (§2). Calm, spacious, mobile-first.
   Tokens verbatim from the Bonded landing page. */
:root{
  --navy:#080F1E;        /* page background */
  --navy-soft:#101A31;   /* raised card */
  --navy-card:#111F3A;   /* inner card */
  --teal:#0BBFA8;        /* primary / selected / progress */
  --teal-dim:#089A88;
  --paper:#F6F8F8;       /* primary text */
  --mist:#9AA6B8;        /* secondary text */
  --line:rgba(154,166,184,.18);
  --teal-fill:rgba(11,191,168,.12);   /* selected fill — platform state */
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  font-feature-settings:'zero' 0;

  --card-max:30rem;      /* mobile */
  --dur:240ms;           /* transitions 200-300ms (§3.3) */
}
@media (min-width:700px){ :root{ --card-max:34rem; } }

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }
body{
  background:var(--navy);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* Progress bar (§3.4) — calm thin teal, top of viewport. */
.progress{
  position:fixed; top:0; left:0; right:0; height:4px;
  background:rgba(154,166,184,.10); z-index:20;
}
.progress__fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--teal-dim),var(--teal));
  transition:width var(--dur) ease;
  border-radius:0 2px 2px 0;
}

/* Back affordance (§3.7). */
.back{
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 14px); left:14px; z-index:20;
  width:40px; height:40px; border-radius:999px;
  background:var(--navy-soft); color:var(--mist);
  border:1px solid var(--line);
  font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--dur) ease, border-color var(--dur) ease;
}
.back:hover{ color:var(--paper); border-color:var(--teal); }
.back:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* Stage: one question per screen, vertically centred (§3.1/§3.2). */
.stage{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 20px);
}

/* Question card — navy-soft on navy, hairline border, ~16px radius (§2). */
.card{
  width:100%; max-width:var(--card-max);
  background:var(--navy-soft);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 24px;
  max-height:calc(100dvh - 40px);
  overflow-y:auto;              /* long compliance-mandated text scrolls INSIDE the card,
                                   never the page — see BUILD_DECISIONS.md */
  -webkit-overflow-scrolling:touch;
}
.card.is-long{ padding:22px 20px; }

/* Enter animation — fast slide/fade (§3.3). */
.card.enter{ animation:slideIn var(--dur) ease both; }
.card.enter-back{ animation:slideInBack var(--dur) ease both; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes slideInBack{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }

/* Section eyebrow + question heading. */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); margin-bottom:14px;
}
.q-title{
  font-family:var(--serif); font-weight:400;
  font-size:1.5rem; line-height:1.2; color:var(--paper);
  margin-bottom:8px;
}
.card.is-long .q-title{ font-size:1.28rem; }
.q-help{ color:var(--mist); font-size:.92rem; margin-bottom:18px; }
.q-title + .options, .q-title + .q-help{ margin-top:16px; }

/* Statement / consent paragraphs. */
.prose p{ color:var(--paper); margin-bottom:12px; font-size:1rem; line-height:1.55; }
.prose p:last-child{ margin-bottom:0; }
.card.is-long .prose p{ font-size:.95rem; }

/* Options list. */
.options{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }

.option{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  background:var(--navy-card);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  color:var(--paper); font-family:var(--sans); font-size:1rem; line-height:1.3;
  cursor:pointer;
  transition:border-color var(--dur) ease, background var(--dur) ease, transform 120ms ease;
}
.option:hover{ border-color:rgba(11,191,168,.5); }
.option:active{ transform:scale(.99); }
.option:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.option.selected{ border-color:var(--teal); background:var(--teal-fill); }

/* Numeric key hint chip (desktop 1-9, §3.5). */
.option__key{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px;
  border:1px solid var(--line); color:var(--mist);
  font-family:var(--mono); font-size:.72rem;
  display:flex; align-items:center; justify-content:center;
}
.option.selected .option__key{ border-color:var(--teal); color:var(--teal); }
@media (hover:none){ .option__key{ display:none; } }   /* hide key hints on touch */

.option__label{ flex:1; }

/* Multi-select tick box. */
.option__tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:.8rem;
}
.option.selected .option__tick{ border-color:var(--teal); background:var(--teal); color:var(--navy); }

/* Money option cards (§2 "money screens get special treatment"). */
.money-opt{ flex-direction:column; align-items:stretch; gap:6px; padding:16px 18px; }
.money-opt__term{ font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--mist); }
.money-opt__figure{
  font-family:var(--serif); font-size:2rem; line-height:1.05; color:var(--paper);
}
.money-opt__figure .unit{ font-size:1.1rem; color:var(--mist); }
.money-opt__sub{ font-family:var(--mono); font-size:.82rem; color:var(--mist); line-height:1.5; }
.money-opt.selected .money-opt__figure{ color:var(--teal); }

/* Any monetary figure renders in DM Mono so money reads as money (§2). */
.mono, .money{ font-family:var(--mono); }

/* Numeric input. */
.num-wrap{ display:flex; align-items:center; gap:10px; margin-top:8px;
  background:var(--navy-card); border:1.5px solid var(--line); border-radius:12px; padding:12px 16px; }
.num-wrap:focus-within{ border-color:var(--teal); }
.num-prefix{ font-family:var(--mono); font-size:1.4rem; color:var(--mist); }
.num-input{
  flex:1; background:transparent; border:0; outline:0;
  color:var(--paper); font-family:var(--mono); font-size:1.6rem; width:100%;
}
/* Open text. */
.text-input{
  width:100%; margin-top:8px; min-height:120px; resize:vertical;
  background:var(--navy-card); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; color:var(--paper); font-family:var(--sans); font-size:1rem; line-height:1.5;
}
.text-input:focus{ outline:0; border-color:var(--teal); }
/* Inline "other" text field under an option. */
.other-input{
  width:100%; margin-top:2px;
  background:var(--navy-card); border:1.5px solid var(--line); border-radius:10px;
  padding:10px 12px; color:var(--paper); font-family:var(--sans); font-size:.95rem;
}
.other-input:focus{ outline:0; border-color:var(--teal); }

/* Dropdown (D1 region). */
.select{
  width:100%; margin-top:8px;
  background:var(--navy-card); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; color:var(--paper); font-family:var(--sans); font-size:1rem;
  appearance:none;
}
.select:focus{ outline:0; border-color:var(--teal); }

/* Primary button (Continue / money screens / consent). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:20px;
  background:var(--teal); color:#04231F;
  border:0; border-radius:12px; padding:15px 18px;
  font-family:var(--sans); font-weight:600; font-size:1.02rem; cursor:pointer;
  transition:background var(--dur) ease, opacity var(--dur) ease;
}
.btn:hover{ background:var(--teal-dim); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }
.btn--ghost{
  background:transparent; color:var(--mist); border:1px solid var(--line); font-weight:500;
}
.btn--ghost:hover{ background:transparent; color:var(--paper); border-color:var(--teal); }

/* Yes/no ladder buttons. */
.ladder-figure{
  background:var(--navy-card); border:1px solid var(--line); border-radius:12px;
  padding:18px; text-align:center; margin:6px 0 4px;
}
.ladder-figure .money-opt__figure{ font-size:2.1rem; }
.yesno{ display:flex; gap:10px; margin-top:14px; }
.yesno .btn{ margin-top:0; }
.yesno .btn--no{ background:var(--navy-card); color:var(--paper); border:1.5px solid var(--line); }
.yesno .btn--no:hover{ border-color:var(--teal); background:var(--navy-card); }

/* Soft inline validation prompt (§3.6) — never a blocking wall. */
.hint{ color:var(--mist); font-size:.85rem; margin-top:12px; min-height:1.1em; }
.hint.warn{ color:#F5C36B; }

/* Decline / secondary link. */
.link{
  display:inline-block; margin-top:14px; color:var(--mist);
  font-size:.9rem; text-decoration:underline; background:none; border:0; cursor:pointer;
}
.link:hover{ color:var(--paper); }

/* End states. */
.end{ text-align:center; }
.end .q-title{ margin-bottom:14px; }

/* Closing brand wordmark — "Bonded" with italic teal "ed" (§9). */
.wordmark{ font-family:var(--serif); font-size:2.2rem; color:var(--paper); margin-bottom:16px; }
.wordmark em{ color:var(--teal); font-style:italic; }
.closing-footer{ margin-top:22px; color:var(--mist); font-size:.78rem; font-family:var(--mono); line-height:1.5; }
.closing-link{ color:var(--teal); text-decoration:none; font-family:var(--mono); }

/* Respect reduced motion (§10). */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0s !important; transition-duration:0s !important; }
  .progress__fill{ transition:none; }
}