/* Family Fair Play — teplý vizuál stránky kvízu (body.ffp-warm--quiz).
   Načítava sa po ffp.min.css len na tejto stránke; vkladá ho applyPageDesign() v build.mjs. */
body.ffp-warm--quiz {
  color-scheme: light;
  --ffp-background: 242 239 232;
  --ffp-sky-tint: 242 239 232;
  --ffp-surface: 242 239 232;
  --ffp-surface-card: 255 252 246;
  --ffp-surface-container-lowest: 255 252 246;
  --ffp-surface-container-low: 239 232 219;
  --ffp-surface-container: 232 227 216;
  --ffp-surface-container-high: 225 217 201;
  --ffp-surface-container-highest: 216 207 188;
  --ffp-surface-variant: 222 216 203;
  --ffp-on-background: 37 39 34;
  --ffp-on-surface: 37 39 34;
  --ffp-on-surface-variant: 102 102 93;
  --ffp-outline: 113 111 99;
  --ffp-outline-variant: 206 203 191;
  /* Primary is readable bronze, shared by score and respondent identity.
     Gold is reserved for the explicit action selectors below. */
  --ffp-primary: 133 88 45;
  --ffp-on-primary: 255 252 246;
  --ffp-primary-container: 233 220 200;
  --ffp-on-primary-container: 60 43 28;
  --ffp-secondary: 121 85 41;
  --ffp-on-secondary: 255 252 246;
  --ffp-secondary-container: 232 220 198;
  --ffp-on-secondary-container: 73 58 38;
  --ffp-tertiary: 82 106 104;
  --ffp-on-tertiary: 255 252 246;
  --ffp-tertiary-container: 218 229 220;
  --ffp-on-tertiary-container: 41 61 51;
  --ffp-error: 156 60 50;
  --ffp-on-error: 255 252 246;
  --ffp-error-container: 245 219 211;
  --ffp-on-error-container: 106 38 31;
  --ffp-zone-healthy: #49664f;
  --ffp-zone-watch: #6c7068;
  --ffp-zone-change: #8d622c;
  --warm-action: #d4ac70;
  --warm-action-hover: #e1bc86;
  --warm-action-ink: #211c14;
  --warm-card: rgba(255,252,246,.88);
  --warm-card-edge: rgba(147,128,94,.19);
  --warm-card-shadow: 0 10px 30px -10px rgba(50,42,28,.12);
  --warm-soft-surface: #e8e3d8;
  --warm-night: #111515;
  --warm-ivory: #eee7d9;
  --warm-rule: #cecbbf;
  --warm-focus: #85582d;
  background-color: rgb(var(--ffp-background));
  color: rgb(var(--ffp-on-surface));
}
.dark body.ffp-warm--quiz,
body.ffp-warm--quiz.dark {
  color-scheme: dark;
  --ffp-background: 21 25 24;
  --ffp-sky-tint: 21 25 24;
  --ffp-surface: 21 25 24;
  --ffp-surface-card: 28 34 31;
  --ffp-surface-container-lowest: 25 30 27;
  --ffp-surface-container-low: 33 39 34;
  --ffp-surface-container: 38 44 38;
  --ffp-surface-container-high: 44 51 43;
  --ffp-surface-container-highest: 52 60 50;
  --ffp-surface-variant: 58 65 55;
  --ffp-on-background: 238 231 217;
  --ffp-on-surface: 238 231 217;
  --ffp-on-surface-variant: 179 179 167;
  --ffp-outline: 163 164 148;
  --ffp-outline-variant: 60 66 59;
  --ffp-primary: 212 172 112;
  --ffp-on-primary: 33 28 20;
  --ffp-primary-container: 65 53 35;
  --ffp-on-primary-container: 238 221 191;
  --ffp-secondary: 212 172 112;
  --ffp-on-secondary: 33 28 20;
  --ffp-secondary-container: 57 49 35;
  --ffp-on-secondary-container: 232 216 189;
  --ffp-tertiary: 166 187 178;
  --ffp-on-tertiary: 31 46 38;
  --ffp-tertiary-container: 43 59 48;
  --ffp-on-tertiary-container: 209 229 213;
  --ffp-error: 228 164 151;
  --ffp-on-error: 67 28 24;
  --ffp-error-container: 72 39 33;
  --ffp-on-error-container: 246 209 195;
  --ffp-zone-healthy: #a6b9a0;
  --ffp-zone-watch: #b3b3a7;
  --ffp-zone-change: #d4ac70;
  --warm-card: rgba(28,34,31,.9);
  --warm-card-edge: rgba(238,231,217,.11);
  --warm-card-shadow: 0 10px 30px -10px rgba(0,0,0,.42);
  --warm-soft-surface: #1a1f1d;
  --warm-rule: #3c423b;
  --warm-focus: #d4ac70;
}

/* Frosted card treatment stays; its light and shadow become warm and matte. */
body.ffp-warm--quiz .glass-panel {
  background: var(--warm-card);
  border-color: var(--warm-card-edge);
  box-shadow: 0 4px 12px rgba(50,42,28,.055);
}
body.ffp-warm--quiz .ambient-shadow { box-shadow: var(--warm-card-shadow); }
body.ffp-warm--quiz .ffp-gradient-heading {
  background-image: none;
  color: rgb(var(--ffp-on-surface));
  -webkit-text-fill-color: currentColor;
}
body.ffp-warm--quiz ::selection {
  background: rgb(var(--ffp-primary-container));
  color: rgb(var(--ffp-on-primary-container));
}

/* Päta kvízu: teplý piesok namiesto bielej plochy. */
body.ffp-warm--quiz footer { background-color: var(--warm-soft-surface); }

/* Keep neutral empty answers; recognition comes from the same bronze after
   hover, keyboard focus, selection and the brief confirmed-choice state. */
body.ffp-warm--quiz .ffp-opt { border-color: rgb(var(--ffp-outline-variant)); }
body.ffp-warm--quiz .ffp-opt:hover { border-color: rgb(var(--ffp-primary)); }
body.ffp-warm--quiz .ffp-opt.bg-primary-container,
body.ffp-warm--quiz .ffp-share-opt[aria-checked="true"] {
  border-color: rgb(var(--ffp-primary));
  background-color: rgb(var(--ffp-primary-container));
  color: rgb(var(--ffp-on-primary-container));
}
body.ffp-warm--quiz .ffp-share-opt[aria-checked="true"] .ffp-share-cap { color: rgb(var(--ffp-on-primary-container)); }
body.ffp-warm--quiz .ffp-share-you { background-color: rgb(var(--ffp-primary)); }
body.ffp-warm--quiz .ffp-share-them { background-color: rgb(var(--ffp-tertiary)); }
body.ffp-warm--quiz #ffp-quiz-progress-bar { background-color: rgb(var(--ffp-primary)); }
body.ffp-warm--quiz :is(a,button,input,summary):focus-visible {
  outline: 2px solid var(--warm-focus);
  outline-offset: 3px;
}

/* Explicit actions: never turn all .bg-primary uses into gold. Those same
   utility classes also encode respondent identity in charts and radio checks. */
body.ffp-warm--quiz :is(
  #ffp-quiz-start,
  #ffp-quiz-invite-cta,
  #ffp-quiz-shared-cta,
  #ffp-quiz-cta-app-top,
  #ffp-quiz-next-talk,
  #ffp-quiz-next-partner,
  #ffp-quiz-share-button,
  #ffp-quiz-book-cta,
  #ffp-quiz-cta-app,
  #ffp-quiz-email-submit,
  #ffp-quiz-email-pdf
),
body.ffp-warm--quiz nav a.bg-primary {
  background-color: var(--warm-action);
  color: var(--warm-action-ink);
  box-shadow: 0 3px 10px rgba(51,40,23,.1);
}
body.ffp-warm--quiz :is(
  #ffp-quiz-start,
  #ffp-quiz-invite-cta,
  #ffp-quiz-shared-cta,
  #ffp-quiz-cta-app-top,
  #ffp-quiz-next-talk,
  #ffp-quiz-next-partner,
  #ffp-quiz-share-button,
  #ffp-quiz-book-cta,
  #ffp-quiz-cta-app,
  #ffp-quiz-email-submit,
  #ffp-quiz-email-pdf
):hover:not(:disabled),
body.ffp-warm--quiz nav a.bg-primary:hover {
  background-color: var(--warm-action-hover);
  color: var(--warm-action-ink);
}

/* Existing next-step/share hierarchy stays. Replace saturated blue/orange
   slabs with two quiet paper tones; the chosen action remains gold. */
body.ffp-warm--quiz #ffp-quiz-next {
  background-color: rgb(var(--ffp-primary-container));
  color: rgb(var(--ffp-on-primary-container));
  box-shadow: var(--warm-card-shadow);
}
body.ffp-warm--quiz :is(#ffp-quiz-share,#ffp-quiz-shared-banner) {
  background-color: rgb(var(--ffp-secondary-container));
  color: rgb(var(--ffp-on-secondary-container));
  box-shadow: var(--warm-card-shadow);
}
body.ffp-warm--quiz #ffp-quiz-share-blind { background-color: var(--warm-card); }
body.ffp-warm--quiz :is(#ffp-quiz-share-link,#ffp-quiz-email) {
  background-color: rgb(var(--ffp-surface-container-lowest));
  color: rgb(var(--ffp-on-surface));
  border-color: rgb(var(--ffp-outline-variant));
  --tw-ring-color: rgb(var(--ffp-primary-container));
}
body.ffp-warm--quiz :is(#ffp-quiz-share-link,#ffp-quiz-email):focus {
  border-color: rgb(var(--ffp-primary));
}
body.ffp-warm--quiz input::placeholder { color: rgb(var(--ffp-outline)); opacity: 1; }
body.ffp-warm--quiz input:is([type="checkbox"],[type="radio"]) {
  color: rgb(var(--ffp-primary));
  accent-color: rgb(var(--ffp-primary));
  background-color: rgb(var(--ffp-surface-container-lowest));
  border-color: rgb(var(--ffp-outline));
  --tw-ring-color: rgb(var(--ffp-primary));
}
body.ffp-warm--quiz input:is([type="checkbox"],[type="radio"]):checked {
  background-color: rgb(var(--ffp-primary));
  border-color: rgb(var(--ffp-primary));
}
body.ffp-warm--quiz :is(button,input):disabled { opacity: .58; cursor: default; box-shadow: none; }
body.ffp-warm--quiz #ffp-quiz-email-error { color: rgb(var(--ffp-error)); }
body.ffp-warm--quiz :is(#ffp-quiz-email-done,#ffp-quiz-share-done) { color: var(--ffp-zone-healthy); }
/* The forms plugin paints a white checkbox tick. On the dark skin's gold
   checkbox, switch that same tick to ink so consent remains clearly legible. */
.dark body.ffp-warm--quiz input[type="checkbox"]:checked,
body.ffp-warm--quiz.dark input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23211c14' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E");
}