/* Deeptakes — participant page (public/index.html).
   Mobile-first (Figma: 402px frames), scales gracefully on wider
   viewports via clamp() up to the desktop token anchors pinned in the
   design spec (question 130px, start title 150px, taglines 70px, button
   labels 60px on 264.5x138 buttons), interpolated between a 402px and a
   1920px viewport. Text stays left-aligned at every size, as in the
   designs. */

html, body {
  min-height: 100%;
}

/* bg-start.png / bg-fin.png are native 16:9 (desktop-framed) photos; on a
   portrait phone `cover` must crop hard, so bias the crop toward each
   photo's warmer, higher-contrast region rather than its plain centre. */
.dt-stage--photo-start { background-position: 0% 50%; }
.dt-stage--photo-fin { background-position: 100% 40%; }

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

.dt-stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* `display: flex` above has the same specificity as the UA [hidden] rule
   and, being an author rule, would otherwise win the tie and defeat it —
   this restores `hidden` so only the active stage ever renders. */
.dt-stage[hidden] {
  display: none;
}

.dt-stage__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: clamp(360px, 92vw, 760px);
  margin: 0 auto;
  padding: clamp(24px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  text-align: left;
}

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

.dt-tagline {
  font-size: clamp(20px, calc(6.76px + 3.294vw), 70px);
  line-height: 1.28;
  font-weight: 400;
  max-width: 22ch;
}

.dt-question {
  font-size: clamp(27px, calc(-0.3px + 6.79vw), 130px);
  line-height: 1.16;
  font-weight: 400;
  max-width: 14ch;
}

/* ---------- START ---------- */

.dt-start__inner {
  justify-content: flex-end;
  gap: clamp(56px, 16vh, 150px);
  padding-bottom: clamp(40px, 9vh, 96px);
}

.dt-start__title {
  font-size: clamp(70px, calc(48.8px + 5.27vw), 150px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.dt-start__byline {
  margin-top: clamp(6px, 1.4vh, 16px);
  font-size: clamp(24px, calc(18.17px + 1.45vw), 46px);
  font-weight: 400;
}

.dt-start__tagline {
  /* Sits directly over bg-start.png's own warm lower band, as in the design —
     no separate overlay colour. */
}

/* ---------- QUESTION ---------- */

.dt-question__inner {
  /* owner comp 2026-09-01: text sits low in the paper area, just above the
     vote panels; flex:1 bounds it so fitText has a real ceiling */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  justify-content: flex-end;
  padding-bottom: clamp(18px, 3.2vh, 40px);
  gap: clamp(14px, 2.6vh, 30px);
}

.dt-countdown {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(16px, calc(11.23px + 1.186vw), 34px);
  opacity: 0.72;
  margin-bottom: clamp(-8px, -1vh, -2px);
}

/* ---------- countdown heartbeat: pulse under 10s left ---------- */

@keyframes dt-countdown-pulse {
  0% { transform: scale(1); }
  12% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.dt-countdown--urgent {
  animation: dt-countdown-pulse 1s infinite;
}

/* ---------- question time bar ---------- */

.dt-timebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--dark);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 5;
  pointer-events: none;
}

/* ---------- question entrance: word rise-in + button pop-in ---------- */

.dt-word {
  display: inline;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dt-word.dt-word--in {
  opacity: 1;
  transform: translateY(0);
}

.dt-pop {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dt-pop.dt-pop--in {
  opacity: 1;
  transform: scale(1);
}

/* Vote panels (owner comp 2026-09-01): the bottom of the screen splits in
   two full-bleed tap targets, mirroring the results duel — dark = agree,
   white = disagree. The label word IS the panel's only content
   (text again since 2026-09-02; sized so "Nepiekrītu" fits a half-width
   panel on a 320px phone). */
.dt-vote-panels {
  /* viewport units, not %: percentage flex-basis resolves against the
     section's indefinite (min-height) size and collapses to content */
  flex: none;
  height: 42vh;
  height: 42dvh;
  display: flex;
  /* above the decorative watermark, which spans the whole section */
  position: relative;
  z-index: 1;
}

.dt-panel {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  /* --dt-label-size is set by DT.fitLabels (shared by both panels); the
     clamp is the starting size it shrinks from */
  --dt-label-base: clamp(24px, 7vw, 80px);
  font-size: var(--dt-label-size, var(--dt-label-base));
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 0.35s ease, font-size 0.3s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.dt-panel--yes { background: var(--dark); color: var(--paper); }
.dt-panel--no { background: #fff; color: var(--dark); }

/* chosen: the word grows a quarter; unchosen panel fades away with its color */
.dt-panel.dt-btn--selected { font-size: calc(var(--dt-label-size, var(--dt-label-base)) * 1.25); }
.dt-panel.dt-btn--gone { opacity: 0.12; pointer-events: none; }

/* entrance: panels fade in (no scale — they are full-bleed blocks) */
.dt-panel.dt-pop { opacity: 0; transform: none; }
.dt-panel.dt-pop.dt-pop--in { opacity: 1; }
.dt-panel.dt-pop.dt-btn--gone { opacity: 0.12; }

.dt-hint {
  font-size: clamp(13px, calc(11.15px + 0.461vw), 20px);
  opacity: 0.62;
  letter-spacing: 0.01em;
}

/* ---------- RESULTS: the duel ----------
   The screen itself is the chart: paper panel = agree, dark = disagree,
   panel size = vote share. Stacked vertically on phones (agree on top),
   side by side on wide viewports. DT.duel() in live.js owns the DOM and
   animation; this file owns the geometry. */

.dt-duel-host,
.dt-duel {
  position: absolute;
  inset: 0;
}

.dt-duel {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .dt-duel { flex-direction: row; }
}

.dt-duel__side {
  flex-grow: 50;
  flex-basis: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  /* label word + percentage in one row (text labels again since
     2026-09-02; the row still reads label-then-number) */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 4vw, 44px);
  padding: clamp(20px, 7vw, 72px);
  transition: flex-grow 1.4s cubic-bezier(0.68, -0.15, 0.22, 1.18);
}

.dt-duel__side--yes { background: var(--paper); color: var(--dark); }
.dt-duel__side--no  { background: var(--dark);  color: var(--paper); }

/* the label word sits before the number, smaller than it so
   "Nepiekrītu" + "56%" still fit one row on a 390px phone panel */
.dt-duel__label {
  order: -1;
  font-weight: 500;
  font-size: clamp(24px, 5.5vmin, 72px);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin: 0;
  flex: none;
}

.dt-duel__pct {
  font-weight: 600;
  font-size: clamp(56px, 15vmin, 220px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

/* the loser shrinks; on the side-by-side layout its panel can be 8% wide,
   so the label/number also cap at the panel's own width via container
   units (bug fix 2026-09-02; cqw is the padding-free content box;
   4.8 = "Nepiekrītu" in em, 1.4 = "00%") */
.dt-duel__side { container-type: inline-size; }
.dt-duel__side.is-minor .dt-duel__label {
  font-size: min(clamp(18px, 4vmin, 52px), calc(100cqw / 4.8));
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.dt-duel__side.is-minor .dt-duel__pct {
  font-size: min(clamp(40px, 10.5vmin, 150px), calc(100cqw / 1.4));
  opacity: 0.85;
}

/* on the side-by-side layout the loser also stacks into a centered column
   so its content never clips at narrow panel widths (vertical phone panels
   are full-width, so there the row keeps fitting) */
@media (min-width: 700px) {
  .dt-duel__side.is-minor {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2.5vmin, 28px);
    padding: clamp(16px, 3vmin, 32px);
  }
}

.dt-duel__empty {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px 22px;
  background: var(--paper);
  color: var(--dark);
  font-size: clamp(17px, 2.6vmin, 30px);
}

.dt-duel--empty .dt-duel__empty { display: block; }
.dt-duel--empty .dt-duel__pct { opacity: 0.35; }

/* ---------- FIN ---------- */

.dt-fin__inner {
  justify-content: flex-end;
  gap: clamp(56px, 18vh, 170px);
  padding-bottom: clamp(40px, 9vh, 90px);
}

/* owner comp 2026-09-02 (image #4, projector): headline left, regular
   weight, large; the phone mirrors it, button left under it */
.dt-fin__tagline {
  align-self: flex-start;
  text-align: left;
  font-weight: 400;
  font-size: clamp(26px, calc(12px + 4.2vw), 84px);
  max-width: 18ch;
}

.dt-fin__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* owner request 2026-09-02: wordmark up, sub-line down */
.dt-fin__logo {
  width: clamp(230px, 50vw, 480px);
  height: auto;
}

.dt-fin__sub {
  margin-top: clamp(4px, 1vh, 10px);
  font-size: clamp(12px, calc(9.5px + 0.5vw), 18px);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* the guide link (owner request 2026-09-02): a paper button on the dark
   fin photo, self-aligned so it doesn't stretch to the column width */
.dt-btn--paper {
  background: var(--paper);
  color: var(--dark);
  border-color: var(--paper);
}

.dt-btn--paper:focus-visible { outline-color: var(--paper); }

.dt-fin__cta {
  align-self: flex-start;
  text-decoration: none;
  padding: clamp(14px, 2.2vh, 20px) clamp(22px, 5vw, 36px);
  font-size: clamp(16px, calc(13.6px + 0.6vw), 22px);
  min-height: 48px;
}

/* ---------- curtain wipe (stage transitions) ----------
   Full-viewport overlay; DT.wipe() drives its transform. Parked off-screen
   at load so the very first paint (and any late join) never shows a wipe. */
.dt-curtain {
  position: fixed;
  inset: 0;
  background: var(--dark);
  transform: translateX(-101%);
  z-index: 50;
  pointer-events: none;
}