/*
 * Brandbook pass — one authored kiosk frame (1280×720).
 *
 * This file is deliberately loaded after the historical theme layers.  It is
 * the small, auditable surface for the current art direction: APK green/blue,
 * the wheat-mark watermark, a fixed logo/genome axis, and denser readable
 * content.  The shell is scaled as one unit by app.js; these rules never
 * switch the composition to a second responsive layout.
 */
:root {
  /* This is a light-only kiosk surface.  Keep browser controls and UA dark
     mode from recoloring the authored brand palette. */
  color-scheme: light only !important;
  --apk-green: #5eb420 !important;
  --apk-green-dark: #2f741b !important;
  --apk-blue: #4aace4 !important;
  --apk-ink: #1b2429 !important;
  --apk-muted: #536468 !important;
  --apk-line: #c9ddd2 !important;
  --apk-paper: #f8fbf7 !important;
}

html,
body,
button,
input,
select,
textarea {
  color-scheme: light only !important;
}

html {
  background-color: #dbe7e2 !important;
}

body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(74,172,228,.22);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

#score,
#quiz-genome-count,
#progress-count,
.genome-display__copy strong {
  font-variant-numeric: tabular-nums;
}

/* The facility photo is also used as the frame image.  The cleaned asset
   keeps the exact wide 16:9 crop while removing the distracting walkway marks. */
.lab-shell {
  background:
    linear-gradient(108deg, rgba(25,47,43,.16), rgba(255,255,255,.06) 42%, rgba(25,47,43,.20)),
    url("generated-assets/retouched/complex-background-clean.webp") center / 100% 100% no-repeat !important;
}

/* One client mark, one slot, always on the central x-axis. */
.brand-logo {
  top: 5px !important;
  left: 50% !important;
  width: 220px !important;
  height: 80px !important;
  padding: 8px 17px !important;
  transform: translateX(-50%) !important;
}

/* The festival mark is shown only on the opening screen and uses the same
   220×80 card, so co-branding never outranks the client mark. */
.festival-lockup {
  top: 16px !important;
  right: 22px !important;
  width: 220px !important;
  height: 80px !important;
  padding: 8px 17px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.screen {
  top: 82px !important;
  height: 638px !important;
  padding: 14px 36px !important;
}

.screen::before {
  opacity: .11 !important;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.76), transparent 32%),
    url("generated-assets/apk-wheat-mark.webp"),
    repeating-linear-gradient(90deg, rgba(94,180,32,.035) 0 1px, transparent 1px 88px) !important;
  background-size: auto, 420px 420px, auto !important;
  background-position: center, -112px 54%, center !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
}

.screen::after {
  opacity: .07 !important;
  border-color: var(--apk-green) !important;
}

.language-switch {
  top: 18px !important;
  right: 24px !important;
}

.language-switch button.is-active {
  background: var(--apk-green-dark) !important;
}

/* Start: the photo and message card share a compact, balanced baseline. */
.screen[data-screen="start"].is-active {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.screen[data-screen="start"] .start-stage {
  display: grid !important;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
  align-items: stretch !important;
  gap: 28px !important;
  width: 100% !important;
  min-height: 0 !important;
}

.screen[data-screen="start"] .start-copy {
  align-self: center !important;
  padding: 28px !important;
  border-left: 0 !important;
  background: linear-gradient(90deg, rgba(94,180,32,.10), rgba(255,255,255,.94) 17%) !important;
  box-shadow: 0 18px 42px rgba(27,36,41,.14), inset 0 1px #fff !important;
}

.screen[data-screen="start"] h1 {
  max-width: 11ch !important;
  margin-bottom: 14px !important;
  font-size: 64px !important;
  line-height: .94 !important;
}

.screen[data-screen="start"] .lead {
  max-width: 33ch !important;
  font-size: 18px !important;
  line-height: 1.28 !important;
}

.screen[data-screen="start"] .primary {
  min-width: 190px !important;
  margin-top: 16px !important;
}

.screen[data-screen="start"] .start-stage > .lab-art {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: 22px !important;
}

/* Intro: put the explanatory dialogue up front and let the two lower cards
   consume the useful vertical space instead of leaving a dead lower half. */
.screen[data-screen="intro"] .screen-canvas {
  display: flex !important;
  flex-direction: column !important;
}

.screen[data-screen="intro"] .intro-dialogue {
  flex: 0 0 166px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  margin: 0 0 14px !important;
}

.intro-dialogue .speaker p {
  max-width: none !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  line-height: 1.28 !important;
}

.screen[data-screen="intro"] .intro-layout {
  flex: 1 1 auto !important;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
  gap: 22px !important;
  min-height: 0 !important;
}

.screen[data-screen="intro"] .intro-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.fact-card {
  padding: 18px 20px !important;
  border-radius: 18px !important;
}

.fact-card h2 {
  margin-bottom: 5px !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
}

.fact-card p {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.region-list,
.breed-labels {
  margin-top: 9px !important;
  gap: 8px !important;
}

.region-list b,
.breed-labels b {
  padding: 6px 9px !important;
  font-size: 11px !important;
}

.screen[data-screen="intro"] .intro-copy > .primary {
  width: 100% !important;
  margin-top: auto !important;
}

.screen[data-screen="intro"] .intro-layout > .lab-art {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 22px !important;
}

/* Quiz/result: mirrored outer columns make the centre instrument land directly
   under the client logo at every stage. */
.quiz-layout,
.result-layout {
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
}

.question-column h2 {
  max-width: 24ch !important;
  margin: 10px 0 13px !important;
  font-size: 35px !important;
  line-height: 1 !important;
}

.question-copy {
  font-size: 16px !important;
  line-height: 1.32 !important;
}

.answers {
  gap: 9px !important;
  margin-top: 16px !important;
}

.answer {
  min-height: 58px !important;
  padding: 14px 48px 14px 17px !important;
  font-size: 16px !important;
  line-height: 1.22 !important;
}

.feedback,
.cross-card {
  font-size: 14px !important;
  line-height: 1.28 !important;
}

.question-next {
  min-width: 170px !important;
  margin-top: 12px !important;
}

.genome-display--tower,
.screen[data-screen="quiz"] .genome-display--tower,
.screen[data-screen="result"] .genome-display--result-tower {
  width: 100% !important;
  height: 478px !important;
  max-height: 478px !important;
  align-self: center !important;
}

.visual-column,
.result-visual-column {
  width: 100% !important;
  height: 478px !important;
}

.visual-column .lab-art,
.result-visual-column .lab-art {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
}

.lab-art img {
  object-fit: cover !important;
  object-position: center !important;
}

.primary {
  min-height: 52px !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--apk-green), var(--apk-green-dark)) !important;
  box-shadow: 0 10px 22px rgba(63,143,30,.24), inset 0 1px rgba(255,255,255,.45) !important;
  font-size: 16px !important;
}

.secondary {
  min-height: 46px !important;
  border: 1px solid rgba(74,172,228,.52) !important;
  color: #226f9c !important;
  background: rgba(235,247,253,.95) !important;
  font-size: 14px !important;
}

.primary:focus-visible,
.secondary:focus-visible,
.answer:focus-visible {
  outline: 3px solid var(--apk-blue) !important;
  outline-offset: 3px !important;
}

/* Result/final: keep the score explanation useful before the final reveal;
   the final reveal itself contains only the assembled code and takeaways. */
.screen[data-screen="result"] .result-layout {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: start !important;
}

.screen[data-screen="result"] .result-layout > .genome-display--tower,
.screen[data-screen="result"] .result-layout > .result-visual-column {
  align-self: center !important;
}

.result-copy h2 {
  max-width: 16ch !important;
  font-size: 45px !important;
  line-height: .96 !important;
}

.result-score-card strong {
  font-size: 28px !important;
}

.takeaways p {
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
}

.genome-finale__heading {
  display: block !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}

.genome-finale__heading .eyebrow {
  margin: 0 0 4px !important;
}

.genome-finale__heading h2 {
  font-size: 42px !important;
  line-height: 1 !important;
}

.genome-finale__layout {
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr) !important;
  height: 478px !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Match the more specific legacy kiosk rule so the final hero gets the full
   authored height and the restart button sits below it instead of covering the
   6/6 caption. */
.screen[data-screen="genome-finale"] .genome-finale__layout {
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr) !important;
  height: 478px !important;
  margin-top: 0 !important;
}

.screen[data-screen="genome-finale"] .genome-display--hero {
  width: 220px !important;
  height: 478px !important;
}

.genome-finale__panel {
  min-height: 0 !important;
  align-self: start !important;
  padding: 20px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.91) !important;
}

.genome-finale__panel h3 {
  margin-bottom: 8px !important;
  font-size: 22px !important;
}

.genome-finale__formula {
  margin-bottom: 16px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.result-scale {
  gap: 8px !important;
}

.result-scale li {
  padding: 10px 12px 10px 22px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.genome-finale__panel--facts {
  gap: 9px !important;
}

.genome-finale__panel--facts p {
  padding: 13px 14px 13px 24px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.genome-display--hero {
  min-height: 0 !important;
  width: 220px !important;
  height: 478px !important;
}

.genome-finale__restart {
  min-width: 190px !important;
  margin-top: 10px !important;
}

/* Desktop keeps the composed frame scaled as one unit. Phones use the same
   authored geometry at 1:1 and pan it through the document viewport. */
@media (max-width: 650px) {
  /* Keep the complete kiosk frame at 1280×720 on phones.  The browser shows
     a real slice of that frame and exposes native horizontal/vertical scroll
     instead of shrinking each field independently. */
  html {
    width: 1280px !important;
    height: 720px !important;
    min-width: 1280px !important;
    min-height: 720px !important;
    overflow: auto !important;
  }

  body {
    width: 1280px !important;
    height: 720px !important;
    min-width: 1280px !important;
    min-height: 720px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  .lab-shell {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .screen,
  .screen[data-screen="start"] {
    width: 1204px !important;
    height: 638px !important;
    margin: 0 !important;
    padding: 14px 36px !important;
    border-radius: 28px !important;
    flex: 0 0 1204px !important;
  }

  .screen[data-screen="start"] .start-stage {
    display: grid !important;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
    gap: 28px !important;
  }

  .screen[data-screen="start"] .start-stage > .lab-art {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .screen[data-screen="start"] .primary {
    width: auto !important;
  }

  .intro-dialogue {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .intro-layout {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
  }

  .quiz-layout,
  .result-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .visual-column,
  .result-visual-column {
    display: block !important;
    height: 478px !important;
  }

  .genome-display--tower {
    position: static !important;
    width: 100% !important;
    height: 478px !important;
  }

  .genome-finale__layout {
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr) !important;
    height: 478px !important;
  }

  .genome-finale__panel {
    padding: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary,
  .secondary,
  .answer {
    transition: none !important;
  }
}