/* Deeptakes — reusable stage treatments and reset for the participant page
   (public/index.html), building on the tokens/fonts/box-model baseline that
   /css/tokens.css establishes (linked first, ahead of this file, in every
   page's <head>). Not consumed by screen.css or admin.css — those two have
   different --dt-btn/--dt-stage/--dt-watermark geometry and stay
   self-contained beyond the shared tokens. */

:root {
  --paper-white: #f8f7f7;
}

/* ---------- reset ---------- */

html, body {
  height: 100%;
}

body {
  color: var(--dark);
  background: var(--paper);
  overflow-x: hidden;
}

h1, h2, h3, p {
  margin: 0;
  font-weight: 400;
}

img, svg {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
}

/* ---------- stage background treatments ----------
   Reusable full-bleed backdrops for the four stages. Apply to the
   outermost element of a stage/screen view. */

.dt-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* start / fin — full-bleed photo, paper-coloured content on top */
.dt-stage--photo {
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--paper);
}
.dt-stage--photo-start { background-image: url("/assets/bg-start.png"); }
.dt-stage--photo-fin { background-image: url("/assets/bg-fin.png"); }

/* question / results — flat paper background, dark content on top */
.dt-stage--paper {
  background-color: var(--paper);
  color: var(--dark);
}

/* ---------- squiggle mark (top-left signature logo) ---------- */

.dt-squiggle {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 0px));
  left: max(20px, env(safe-area-inset-left, 0px));
  width: clamp(48px, 9vw, 100px);
  height: auto;
  z-index: 3;
}

/* ---------- big watermark letters (paper stages, bleeding off the right edge) ---------- */

.dt-watermark {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 135%;
  width: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ---------- buttons: sharp corners, --dark bg, --paper text ---------- */

.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--paper);
  border: 2px solid var(--dark);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.dt-btn:not(:disabled):hover,
.dt-btn:not(:disabled):focus-visible {
  opacity: 0.88;
}

.dt-btn:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 3px;
}

/* the participant's own choice: inverted / outlined
   (transparent reads correctly against the paper stage background it is
   always shown on). */
.dt-btn--selected {
  background: transparent;
  color: var(--dark);
}

.dt-btn:disabled {
  opacity: 0.45;
}