/* The Fizz Rizz survey: the bar's fonts and colours, phone first. No emoji. */

@font-face { font-family: "Abolition"; src: url("/fonts/Abolition.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Domus"; src: url("/fonts/Domus.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Domus"; src: url("/fonts/Domus_Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Domus Titling"; src: url("/fonts/Domus_Titling_Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --display: "Abolition", "Haettenschweiler", "Arial Narrow", sans-serif;
  --title: "Domus Titling", "Domus", system-ui, sans-serif;
  --body: "Domus", system-ui, -apple-system, sans-serif;
  --red: #EE2626;
  --yellow: #FCEE21;
  --teal: #4FD8C4;
  --ground: #05070f;
  --panel: #0E1433;
  --panel-2: #141B42;
  --line: rgba(255, 255, 255, .12);
  --ink: #ffffff;
  --ink-2: #E8ECFF;
  --ink-3: #93A2EC;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); -webkit-text-size-adjust: 100%; }
a { color: var(--teal); }

.v { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
.v-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.v-logo { width: 52px; height: 52px; }
.v-brand { font-family: var(--display); font-size: 34px; letter-spacing: .02em; }

.v-title { font-family: var(--display); font-size: 44px; line-height: .98; margin: 8px 0 8px; }
.v-intro { color: var(--ink-2); font-size: 18px; line-height: 1.4; margin: 0 0 16px; }
.v-points { color: var(--yellow); font-weight: 700; }

.v-q { margin: 0 0 14px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.v-q.is-bad { border-color: var(--red); }
.v-q__text { font-weight: 700; font-size: 17px; line-height: 1.35; margin: 0 0 12px; }
.v-q__opt { font-weight: 400; color: var(--ink-3); font-size: 14px; }

.v-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.v-choice {
  min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink-2); font: inherit; font-size: 16px; cursor: pointer;
}
.v-choice.is-on { background: var(--teal); border-color: var(--teal); color: #05070f; font-weight: 700; }
.v-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.v-scale .v-choice { padding: 0; font-family: var(--display); font-size: 26px; }
.v-scale__ends { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 13px; margin-top: 6px; }

.v-input {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: inherit; font-size: 17px;
}
textarea.v-input { min-height: 90px; resize: vertical; line-height: 1.4; }

/* The texts box: unticked until they tick it, the words in full beside it. */
.v-box { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; margin-top: 14px; cursor: pointer; }
.v-box input { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--teal); }
.v-box__label { font-weight: 700; font-size: 16px; }
.v-box__terms { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }

.v-bot { margin: 14px 0 0; min-height: 0; }
.v-error { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(238, 38, 38, .16); border: 1px solid rgba(238, 38, 38, .5); font-weight: 700; }
.v-send {
  display: block; width: 100%; min-height: 60px; margin-top: 16px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--yellow); color: #05070f; font-family: var(--display); font-size: 30px; letter-spacing: .02em;
}
.v-send:disabled { opacity: .5; cursor: default; }

.v-done { text-align: center; padding: 28px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.v-done__big { font-family: var(--display); font-size: 52px; line-height: 1; color: var(--yellow); }
.v-done__text { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }

.v-note { color: var(--ink-3); font-size: 15px; line-height: 1.4; }
.v-foot { margin-top: 28px; color: var(--ink-3); font-size: 13px; line-height: 1.6; text-align: center; }

/* The terms and privacy pages. */
.v-doc h1 { font-family: var(--display); font-size: 40px; margin: 8px 0 12px; }
.v-doc h2 { font-family: var(--title); font-size: 13px; letter-spacing: .16em; color: var(--yellow); margin: 22px 0 8px; }
.v-doc p, .v-doc li { color: var(--ink-2); font-size: 16px; line-height: 1.55; }