/* ---------------------------------------------------------------------------
   Participant app — a phone, in a darkened auditorium, on hostile Wi-Fi.

   Dark surface, continuing slide 3 ("LIVE NOW — Scan and forecast with me"),
   which is the slide people are looking at when they scan.

   Every target is at least 48px. The whole path is meant to take under 45
   seconds, so there is no chrome, no preamble and nothing to read twice.
--------------------------------------------------------------------------- */

html {
  background: var(--ink-deep);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-size: 17px;
  line-height: 1.45;
}

.pad {
  padding: 0 22px;
}

#app {
  flex: 1;
  padding: 0 0 8px;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 26px;
  animation: rise 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Required. A class selector setting `display` outranks the user agent's
   `[hidden] { display: none }`, so without this every screen renders at once
   and the participant scrolls through all six. */
.screen[hidden] {
  display: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- progress ------------------------------------------------------------- */

.progress {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 3px;
  background: var(--hairline);
}

.progress__bar {
  height: 100%;
  width: 0;
  background: var(--pink);
  transition: width 300ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- type ----------------------------------------------------------------- */

.eyebrow {
  font-size: 12px;
  margin-bottom: 12px;
}

.q-text {
  font-size: 22px;
  margin: 0;
}

.q-text--sm {
  font-size: 28px;
}

.hint {
  color: var(--fg-4);
  font-size: 14px;
  margin: 10px 0 0;
}

.hint--tight {
  margin-top: 8px;
  font-size: 13px;
}

.field-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 26px 0 12px;
}

/* --- resolution criteria, collapsed by default ---------------------------- */

.disclose {
  margin-top: 18px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.disclose summary {
  padding: 14px 0;
  cursor: pointer;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  list-style: none;
}

.disclose summary::-webkit-details-marker { display: none; }

.disclose summary::after {
  content: ' +';
  color: var(--cyan-deep);
}

.disclose[open] summary::after { content: ' −'; }

.disclose__body {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--fg-3);
}

.disclose__body dt {
  font-weight: 700;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  margin-top: 12px;
}

.disclose__body dd { margin: 4px 0 0; }

/* --- the probability slider ----------------------------------------------- */

.slider-block {
  text-align: center;
}

.bigp {
  display: block;
  font-size: 78px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--pink);
}

.bigp__label {
  margin: 6px 0 26px;
  font-size: 13px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-4);
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  margin: 0;
}

.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink));
  opacity: 0.85;
}

.slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink));
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--paper);
  border: 4px solid var(--pink);
  cursor: grab;
}

.slider::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper);
  border: 4px solid var(--pink);
}

.slider__scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  margin-top: 2px;
}

/* --- magnitude trio -------------------------------------------------------- */

.money {
  border-top: 1px solid var(--hairline);
  padding: 16px 0 4px;
}

.money__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.money__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-3);
  margin: 0;
}

.money__val {
  font-size: 26px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.money__hint {
  font-size: 12px;
  color: var(--fg-4);
  margin: 2px 0 6px;
}

.money .slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
}

.money .slider::-moz-range-track {
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
}

.money .slider::-webkit-slider-thumb { border-color: var(--cyan); }
.money .slider::-moz-range-thumb { border-color: var(--cyan); }

.money__anchors {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.06em;
}

/* --- inputs, chips, buttons ------------------------------------------------ */

.input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px; /* 16px or iOS zooms the viewport on focus */
  padding: 13px 14px;
  resize: none;
}

.input::placeholder { color: var(--muted-3); }
.input:focus { border-color: var(--cyan); outline: none; }

.counter {
  text-align: right;
  font-size: 12px;
  color: var(--fg-4);
  margin: 6px 0 0;
}

.chips {
  display: flex;
  gap: 10px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chip {
  flex: 1;
  min-height: 52px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--fg-2);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}

.stack .chip { text-align: left; }

.chip[aria-checked='true'] {
  border-color: var(--pink);
  color: var(--paper);
  background: rgba(255, 47, 160, 0.12);
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  padding-bottom: 14px;
}

.btn {
  flex: 1;
  min-height: 54px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.btn--primary {
  background: var(--pink);
  color: var(--ink-deep);
}

.btn--primary:active { background: var(--pink-deep); color: var(--paper); }

.btn--ghost {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--fg-2);
}

.btn--full {
  flex: none;
  width: 100%;
  margin-top: 12px;
}

/* --- submitted ------------------------------------------------------------- */

.yours .rule { border-color: var(--hairline); }

.yours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.yours__key {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-4);
}

.yours__val {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.yours__val--pink { color: var(--pink); }
.yours__val--sm { font-size: 16px; color: var(--fg-2); letter-spacing: 0; }

.minihist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 54px;
  margin: 14px 0 4px;
}

.minihist--tall { height: 92px; }

.minihist__bar {
  flex: 1;
  min-height: 2px;
  background: var(--pink-deep);
  border-radius: 1px 1px 0 0;
  transition: height 300ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.minihist__bar--you {
  background: var(--pink);
  box-shadow: 0 0 0 1px var(--pink);
}

/* --- the email block, APP 1/3/5/6/7 ---------------------------------------- */

.email-block .rule { margin-bottom: 20px; }

.notice {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-4);
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--pink-deep);
  padding: 12px 14px;
  margin: 0 0 16px;
}

.notice a { color: var(--cyan); }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  font-size: 14.5px;
  color: var(--fg-2);
  cursor: pointer;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--pink);
}

.error {
  color: var(--pink);
  font-size: 13px;
  margin: 8px 0 0;
}

/* --- live view -------------------------------------------------------------- */

.live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.stat {
  background: var(--ink-deep);
  padding: 14px 14px 16px;
}

.stat__key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-4);
  margin: 0 0 6px;
}

.stat__key--pink { color: var(--pink); }
.stat__key--cyan { color: var(--cyan); }

.stat__val {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes li {
  border-top: 1px solid var(--hairline);
  padding: 13px 0;
  font-size: 15px;
  color: var(--fg-2);
}

.notes li:first-child { border-top: 0; }

.notes .notes__meta {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--muted-3);
}

.notes__empty {
  color: var(--fg-4);
  font-size: 14px;
}

/* --- footer ----------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--muted-3);
}

.foot p { margin: 0; }
.foot a { color: var(--muted-3); }

.foot__status {
  margin-top: 4px;
  color: var(--cyan-deep);
  min-height: 1.2em;
}

.foot__status[data-state='pending'] { color: var(--pink); }

/* Anything wider than a phone: keep the column narrow so the board's mirror
   is still readable on a laptop without the line length falling apart. */
@media (min-width: 620px) {
  body { font-size: 18px; }
  #app, .foot { max-width: 560px; margin: 0 auto; width: 100%; }
  .q-text { font-size: 30px; }
}