/* One screen: one question and an optional email. Tokens live in tokens.css. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
textarea { font: inherit; color: inherit; }

.top {
  max-width: 560px; width: 100%; margin: 0 auto;
  padding: var(--s-4) var(--s-4) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
}
.top img { grid-column: 2; width: 30px; height: auto; justify-self: center; }
.top .lang { grid-column: 3; justify-self: end; height: 44px; font-size: var(--t-label); }

form { flex: 1; display: flex; flex-direction: column; max-width: 560px; width: 100%; margin: 0 auto; padding: 0 var(--s-4); }

h1 {
  margin: var(--s-8) 0 var(--s-2);
  font-family: var(--font-brand); font-weight: 200; font-size: var(--t-title);
  line-height: 1.2; letter-spacing: 1.2px; color: var(--tint); text-wrap: balance;
}
.sub { margin: 0 0 var(--s-8); font-size: var(--t-label); color: var(--ink-2); }

.f { margin-bottom: var(--s-5); }
.f label { display: block; font-size: var(--t-label); font-weight: 600; margin-bottom: var(--s-2); text-wrap: pretty; }
.f .opt { font-weight: 400; color: var(--ink-2); }
.f .text {
  display: block; width: 100%; padding: 0 var(--s-4);
  background: var(--card); border: 1px solid var(--outline); border-radius: var(--r-field);
  font-size: var(--t-body);
  transition: border-color 120ms var(--ease);
}
.f input.text { height: var(--control-h); }
.f textarea.text { min-height: 168px; padding: var(--s-3) var(--s-4); line-height: 1.45; resize: vertical; }
.f .text:hover { border-color: var(--muted); }
.f .text:focus-visible { outline: 2px solid var(--tint); outline-offset: -1px; border-color: var(--tint); }
.f .text[aria-invalid="true"] { border-color: var(--failure); }
.hint { margin: var(--s-2) 0 0; font-size: var(--t-caption); line-height: 18px; color: var(--ink-2); }

.bar {
  position: sticky; bottom: 0; margin-top: auto;
  padding: var(--s-4) 0 calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--ground); display: flex; flex-direction: column; gap: var(--s-3);
}
.bar .btn { width: 100%; }
@media (min-width: 640px) {
  form { flex: 0 0 auto; }
  .bar { position: static; margin-top: 0; padding-top: var(--s-2); }
}
.bar .fail { margin: 0; font-size: var(--t-caption); color: var(--failure); text-align: center; }
.bar .fail:empty { display: none; }
.privacy { margin: 0; font-size: var(--t-caption); line-height: 18px; color: var(--ink-2); text-align: center; text-wrap: pretty; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.done { display: none; flex: 1; max-width: 560px; width: 100%; margin: 0 auto; padding: 18vh var(--s-4) var(--s-8); text-align: center; }
.done img { width: 52px; height: auto; }
.done h1 { margin: var(--s-6) 0 var(--s-2); letter-spacing: 2.4px; }
.done p { margin: var(--s-4) auto 0; max-width: 32ch; font-size: var(--t-label); color: var(--ink-2); }
body.is-done .top, body.is-done form { display: none; }
body.is-done .done { display: block; animation: enter 260ms var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }