/* All visual styling goes through these tokens. Sizes are in --u, one pixel of the
   client's 1080-wide design, so the layout scales with the tablet's width. */
@font-face {
  font-family: "DIN Next";
  font-weight: 300;
  src: url("fonts/DINNext-Light.woff2") format("woff2");
}

@font-face {
  font-family: "DIN Next";
  font-weight: 500;
  src: url("fonts/DINNext-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "DIN Next";
  font-weight: 700;
  src: url("fonts/DINNext-Bold.woff2") format("woff2");
}

:root {
  /* --page-height is the viewport height measured once at load (see index.html). The on-screen
     keyboard shrinks the viewport afterwards, which must make the page scroll, not rescale it. */
  --page-height: 100svh;
  --u: min(100vw / 1080, var(--page-height) / 1920, 1px);
  --page-width: calc(1080 * var(--u));
  --color-bg: #2f4a38;
  --color-text: #ffffff;
  --color-primary: #1e8649;
  --color-primary-text: #ffffff;
  --color-border: rgba(255, 255, 255, 0.85);
  --color-focus: #ffffff;
  --color-error: #ffc9bd;
  --color-overlay: rgba(18, 48, 30, 0.88);
  --color-card: #1d4a2e;
  --font-family: "DIN Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-label: calc(45.5 * var(--u));
  --font-size-input: calc(36 * var(--u));
  --font-size-note: calc(24 * var(--u));
  --font-size-heading: calc(65.5 * var(--u));
  --font-size-countdown: calc(40 * var(--u));
  --control-height: calc(83 * var(--u));
  --space: calc(30 * var(--u));
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  background: var(--color-bg) url("images/bg.jpg") center / cover no-repeat fixed;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: 300;
  font-size: var(--font-size-input);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

input {
  user-select: text;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: var(--page-height);
  padding-bottom: calc(71 * var(--u));
}

.band {
  flex: none;
  height: calc(125 * var(--u));
  /* Tile width is nine whole motifs, so copies join without a seam. */
  background: url("images/band.webp") calc(22 * var(--u)) 0 / auto 100% repeat-x;
}

.band-top {
  margin-top: calc(82 * var(--u));
}

.band-bottom {
  margin-top: auto;
}

main {
  width: var(--page-width);
  margin: 0 auto;
  padding: calc(94 * var(--u)) calc(100 * var(--u)) calc(50 * var(--u));
}

[hidden] {
  display: none !important;
}

h1 {
  font-size: var(--font-size-heading);
  font-weight: 500;
  line-height: 1;
  margin: 0 0 calc(98 * var(--u));
}

.field {
  margin: 0 0 calc(83 * var(--u));
  padding: 0;
  border: 0;
  min-width: 0;
}

label,
legend {
  display: block;
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 calc(24 * var(--u)) calc(47 * var(--u));
  padding: 0;
}

legend {
  margin-bottom: calc(30 * var(--u));
}

fieldset.field {
  margin-top: calc(17 * var(--u));
}

.required::after {
  content: " *";
}

input[type="text"],
input[type="email"] {
  width: 100%;
  height: var(--control-height);
  padding: 0 calc(44 * var(--u));
  font: inherit;
  font-size: var(--font-size-input);
  font-weight: 300;
  color: inherit;
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: 999px;
}

::placeholder {
  color: var(--color-text);
  opacity: 0.8;
}

input:focus-visible,
button:focus-visible,
.choice:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.choices {
  display: flex;
  flex-direction: column;
}

fieldset .choices {
  margin-left: calc(47 * var(--u));
}

.choice {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-height: calc(69 * var(--u));
  margin: 0;
  font-size: var(--font-size-input);
  font-weight: 300;
  border-radius: calc(12 * var(--u));
}

/* Triangle bullet: outlined when not chosen, filled when chosen. */
.choice input {
  appearance: none;
  flex: none;
  width: calc(18 * var(--u));
  height: calc(34 * var(--u));
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 34'%3E%3Cpath d='M2 2.5v29L16 17z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.choice input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 34'%3E%3Cpath d='M1 0v34L18 17z' fill='%23fff'/%3E%3C/svg%3E");
}

.choice input:not(:checked) + span .selected-note {
  display: none;
}

.note {
  margin: calc(17 * var(--u)) 0 0 calc(45 * var(--u));
  font-size: var(--font-size-note);
  line-height: 1.2;
}

.error {
  margin: calc(10 * var(--u)) 0 0 calc(47 * var(--u));
  color: var(--color-error);
  font-weight: 700;
  font-size: var(--font-size-note);
}

.error::before {
  content: "! ";
}

.error:empty {
  display: none;
}

[aria-invalid="true"] {
  border-color: var(--color-error) !important;
}

button {
  min-height: var(--control-height);
  padding: 0 calc(58 * var(--u));
  font: inherit;
  font-size: calc(42 * var(--u));
  font-weight: 700;
  color: var(--color-primary-text);
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 999px;
}

#subscribe {
  min-height: calc(110 * var(--u));
  margin-top: calc(-28 * var(--u));
}

/* Pressed state is an inversion. */
button:active {
  color: var(--color-primary);
  background: var(--color-primary-text);
}

button:disabled {
  opacity: 0.6;
}

.form-error {
  margin: 0 0 var(--space);
}

#title {
  touch-action: none;
  -webkit-touch-callout: none;
}

#thanks-view {
  text-align: center;
  padding-top: calc(300 * var(--u));
}

#thanks-view h1 {
  margin-bottom: var(--space);
}

#thanks-view p {
  margin: 0;
  font-size: var(--font-size-heading);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space);
  background: var(--color-overlay);
}

.overlay-card {
  width: 100%;
  max-width: calc(800 * var(--u));
  padding: calc(60 * var(--u));
  text-align: center;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: calc(48 * var(--u));
}

.overlay-card h2 {
  margin: 0 0 var(--space);
  font-size: var(--font-size-heading);
  font-weight: 500;
}

.overlay-card p {
  margin: 0 0 var(--space);
  font-size: var(--font-size-countdown);
}

.overlay-card button {
  min-height: calc(110 * var(--u));
  font-size: var(--font-size-countdown);
}

.secondary {
  color: var(--color-text);
  background: transparent;
  border: 2px solid var(--color-border);
}

.secondary:active {
  color: var(--color-primary);
  background: var(--color-primary-text);
}

#pin-view,
#admin-view {
  text-align: center;
}

#pin-view h1,
#admin-view h1 {
  margin-bottom: var(--space);
}

.pin-dots {
  margin: 0 0 var(--space);
  min-height: calc(90 * var(--u));
  font-size: calc(80 * var(--u));
  letter-spacing: 0.5em;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space);
  max-width: calc(640 * var(--u));
  margin: 0 auto;
}

.key {
  min-height: calc(130 * var(--u));
  padding: 0;
  font-size: calc(56 * var(--u));
}

#admin-view .choices {
  flex-direction: row;
  gap: var(--space);
  margin-bottom: var(--space);
}

.tablet-choice {
  flex: 1;
  min-height: calc(130 * var(--u));
  font-size: calc(56 * var(--u));
  color: var(--color-text);
  background: transparent;
  border: 2px solid var(--color-border);
}

.tablet-choice:active,
.tablet-choice[aria-pressed="true"] {
  color: var(--color-primary-text);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.stat {
  margin: var(--space) 0;
  font-size: var(--font-size-countdown);
}

.status {
  min-height: calc(40 * var(--u));
  margin: var(--space) 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#pin-error {
  min-height: calc(50 * var(--u));
  margin: 0 0 var(--space);
  text-align: center;
}

#pin-error:empty {
  display: block;
}

#export-csv,
#admin-close {
  width: 100%;
  min-height: calc(130 * var(--u));
  font-size: var(--font-size-countdown);
}