/* ------------------------------------------------------------------
   Shared kiosk styling for every survey page.

   All values are "design pixels" measured from the source artwork.
   The screen area inside the iPad bezel is 2907 x 1972 px. #stage is
   that box, scaled as one block to fit the viewport, so proportions
   never change.

   Anything that differs between pages (button widths, the vertical
   position of the question) lives in that page's own <style> block,
   because those come from measuring that page's artwork.
   ------------------------------------------------------------------ */

:root {
  --red:   #D52B1E;
  --black: #000000;
  --grey:  #8C8C8C;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 2907px;
  height: 1972px;
  transform-origin: 0 0;
  background: #ffffff;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
}
.screen.is-active { display: block; }

/* --- shared furniture --------------------------------------------- */

.logo {
  position: absolute;
  width: 341px;
  height: 187px;
  display: block;
}

.q-logo    { left: 359px;  top: 173px; }
.done-logo { left: 1280px; top: 507px; }

.question {
  position: absolute;
  left: 357px;
  font-size: 188px;
  font-weight: 400;
  font-stretch: 105%;
  line-height: 201px;
  color: var(--black);
  white-space: nowrap;
}

/* --- answer buttons: stacked, left aligned, hugging the label ------ */

.answer {
  position: absolute;
  height: 195px;
  border: 0;
  margin: 0;
  padding: 0 0 0 137px;
  border-radius: 48px;
  background: var(--black);
  color: #ffffff;
  font-family: inherit;
  font-size: 96px;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.answer > span { display: block; transform: translateY(2px); }
.answer.is-selected { background: var(--red); }

/* the artwork sets the third label 3px lower than the other two */
#opt3 > span { transform: translateY(5px); }

#opt1 { top: 1122px; width: 1049px; }
#opt2 { top: 1380px; width: 1472px; }
#opt3 { top: 1636px; width: 621px; }

/* --- grey buttons -------------------------------------------------- */

.grey-btn {
  position: absolute;
  height: 160px;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 48px;
  background: var(--grey);
  color: #ffffff;
  font-family: inherit;
  font-size: 76px;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.grey-btn > span { display: block; transform: translateY(3px); }

.next  { left: 2242px; top: 1723px; width: 384px; }
.start { left: 1063px; top: 1343px; width: 768px; }

/* --- thank you screen ---------------------------------------------- */

.done-text {
  position: absolute;
  left: 970px;
  top: 780px;
  font-size: 188px;
  font-weight: 400;
  font-stretch: 105%;
  line-height: 201px;
  color: var(--black);
  white-space: nowrap;
}