/* Wywiad Zdrowia — motion, delight components and the five visual themes.
   styles.css holds the layout and the base theme ("Klinika", the key visual). This file adds:
     1. shared motion keyframes
     2. delight components: progress journey, companion line, tile feedback, moments, result reveal
     3. the review panel (client preview only)
     4. themes: ogrod · swit · plakat · trasa, each overriding tokens then components.
   Everything that moves is switched off under prefers-reduced-motion (rule at the end of styles.css). */

/* ============================================================== 1. motion */

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } /* no overshoot: the ease does the work */
@keyframes tile-press { 0% { transform: scale(1); } 30% { transform: scale(.965); } 100% { transform: scale(1); } }
@keyframes ripple { from { opacity: .28; transform: translate(-50%, -50%) scale(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(70); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 56% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ready-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--c-accent) 0%, transparent); } }
@keyframes card-in { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@keyframes card-out { to { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes rings { 0% { transform: scale(.35); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

/* ============================================================== 2. delight components */

/* --- the journey: progress track with chapter markers and a theme glyph riding on it --------- */
.prog { position: relative; height: 34px; max-width: 960px; margin: 0 auto; }
.prog__track { position: absolute; left: 16px; right: 16px; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 4px; background: var(--c-tint-2); overflow: hidden; }
.prog__fill { height: 100%; width: 100%; transform: scaleX(var(--p)); transform-origin: 0 50%; background: var(--c-accent); border-radius: inherit; transition: transform .7s var(--ease); }
.prog__marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 16px; }
.prog__mark {
  position: absolute; left: calc(var(--at) * 100%); top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 2px var(--c-tint-2);
  transition: background-color .3s, box-shadow .3s;
}
.prog__mark span { display: none; }
.prog__mark.is-here { box-shadow: 0 0 0 2px var(--c-accent); }
.prog__mark.is-done { background: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent); animation: pop-in .5s var(--ease) backwards; }
.prog__mark.is-under { opacity: 0; } /* the runner stands on this marker */
.prog__runner {
  position: absolute; top: 50%; left: calc(16px + var(--p) * (100% - 32px)); width: 28px; height: 28px;
  transform: translate(-50%, -50%); display: grid; place-items: center; color: var(--c-accent);
  transition: left .7s var(--ease);
}
.prog__runner:empty { display: none; }
.prog__runner > svg { width: 20px; height: 20px; }

/* Klinika: the heart rides the track and beats, on a white disc. */
.prog__runner .icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-s); animation: beat 1.8s ease-in-out 2; } /* beats on arrival, then rests */

.shell__count { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; min-width: 0; }
.shell__count b { color: var(--c-heading); font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.shell__count span { font-size: .8rem; font-weight: 500; }

/* --- question entrance: answers arrive one after another ------------------------------------ */
.view-enter .opt { animation: rise .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 90ms); }
.view-enter .question__title, .view-enter .question__hint { animation: rise .5s var(--ease) backwards; }

/* --- tile feedback: press, ripple from the finger, check draws itself ------------------------ */
.opt__box { overflow: hidden; isolation: isolate; }
.opt__box::after {
  content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 10px; height: 10px; z-index: -1;
  border-radius: 50%; background: var(--c-accent); opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none;
}
.opt__box.is-pop { animation: tile-press .34s cubic-bezier(.16, 1, .3, 1); }
.opt__box.is-pop::after { animation: ripple .65s var(--ease); }
.opt__input:checked + .opt__box .opt__mark { animation: pop-in .42s cubic-bezier(.16, 1, .3, 1); }
.opt__input:checked + .opt__box .opt__mark .icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-line .32s .08s var(--ease) forwards; }
.btn--next.is-ready { animation: ready-glow 1.1s ease-out 1; }

/* --- companion line under the question ------------------------------------------------------ */
.companion-slot { min-height: 64px; display: flex; justify-content: center; align-items: flex-start; padding-top: 18px; }
.companion {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; max-width: 100%;
  padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--c-surface); color: var(--c-heading);
  font-weight: 500; line-height: 1.3; box-shadow: var(--shadow);
  animation: card-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
.companion__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent-strong); }
.companion__avatar .icon { width: 20px; height: 20px; animation: beat 1.4s ease-in-out 1; }
.companion--calm { background: var(--c-tint); box-shadow: none; animation: fade .6s ease both; }
.companion--calm .companion__avatar .icon { animation: none; }

/* --- moments: chapter done, all questions done, result curtain ------------------------------ */
.moment {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; cursor: pointer;
  background: color-mix(in srgb, var(--c-ground) 55%, transparent); backdrop-filter: blur(8px) saturate(1.2);
  animation: fade .25s ease both;
}
.moment.is-leaving { animation: fade .3s ease reverse forwards; }
.moment.is-leaving .moment__card { animation: card-out .3s ease forwards; }
.moment__card {
  width: min(420px, 100%); padding: 32px 30px 28px; text-align: center; border-radius: var(--radius-l);
  background: var(--c-surface); box-shadow: 0 30px 80px color-mix(in srgb, var(--c-shadow) 24%, transparent);
  animation: card-in .55s cubic-bezier(.16, 1, .3, 1) both;
}
.moment__badge { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); animation: pop-in .6s .08s cubic-bezier(.16, 1, .3, 1) both; }
.moment__badge .icon { width: 34px; height: 34px; stroke-width: 2.6; }
.moment__badge .icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-line .45s .38s var(--ease) forwards; }
.moment__done { margin: 0 0 6px; color: var(--c-muted); font-weight: 500; }
.moment__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 5vw, 1.95rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--c-heading); text-wrap: balance; }
.moment__sub { margin: 10px 0 0; color: var(--c-accent-strong); font-weight: 600; }
/* Chapter that held a sensitive answer: same card, softer badge, no burst (see chapterMoment). */
.moment--calm .moment__badge { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.moment__loader { position: relative; display: block; width: 76px; height: 76px; margin: 0 auto 18px; }
.moment__loader i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c-accent); animation: rings 1.2s var(--ease) infinite; }
.moment__loader i:nth-child(2) { animation-delay: .25s; }
.moment__loader i:nth-child(3) { animation-delay: .5s; }

.burst-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }

/* --- result reveal -------------------------------------------------------------------------- */
.result.is-waiting { visibility: hidden; }
.result.is-revealed > * { animation: rise .7s var(--ease) backwards; }
.result.is-revealed > :nth-child(2) { animation-delay: .08s; }
.result.is-revealed > :nth-child(3) { animation-delay: .16s; }
.result.is-revealed > :nth-child(4) { animation-delay: .24s; }
.result.is-revealed > :nth-child(5) { animation-delay: .32s; }
.result.is-revealed > :nth-child(6) { animation-delay: .4s; }
.result.is-revealed > :nth-child(n+7) { animation-delay: .48s; }
/* Plain line under the heading and lead (inserted by finishResult), never a pill above the heading. */
.result__thanks { margin: 4px auto 0; max-width: 760px; color: var(--c-accent-strong); font-weight: 600; font-size: 1.02rem; }

/* --- intro art (Klinika) -------------------------------------------------------------------- */
.art-img { animation: float 7s ease-in-out infinite; }
.art { display: block; width: 100%; height: auto; overflow: visible; }

/* ============================================================== 3. review panel (preview only) */

.review { position: fixed; right: 12px; top: calc(100px + env(safe-area-inset-top)); z-index: 45; font-family: 'Outfit', system-ui, sans-serif; color: #17263b; }
@media (max-width: 619px) { .review .review__fab span { display: none; } .review .review__fab { padding: 0 12px; } }
.review__fab {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: #121826; color: #fff; font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: 0 8px 26px rgb(0 0 0 / 28%);
}
.review__fab .icon { width: 20px; height: 20px; }
.review__panel {
  position: absolute; right: 0; top: 54px; width: min(360px, calc(100vw - 24px)); max-height: min(72vh, 660px); overflow: auto;
  padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgb(0 0 0 / 28%); animation: card-in .3s var(--ease) both;
}
.review__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #5a6b80; }
.review__close { border: 0; background: none; padding: 4px; cursor: pointer; color: inherit; }
.review__close .icon { width: 18px; height: 18px; }
.review__themes { display: grid; gap: 4px; margin-bottom: 8px; }
.review__theme {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; width: 100%; padding: 9px; text-align: left;
  border: 1.5px solid transparent; border-radius: 12px; background: none; color: inherit; font: inherit; cursor: pointer;
}
.review__theme:hover { background: #f4f6f9; }
.review__theme.is-on { border-color: #121826; background: #f4f6f9; }
.review__swatch { display: grid; grid-template-columns: repeat(3, 1fr); height: 42px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%); }
.review b { display: block; font-size: .95rem; }
.review small { display: block; color: #5a6b80; font-size: .8rem; line-height: 1.35; }
.review__toggle { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.review__toggle:hover { background: #f4f6f9; }
.review__toggle input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #121826; }

/* ============================================================== 4. themes */

/* ------------------------------------------------------------------------------ OGRÓD (garden)
   Deep pine ground, lime growth, blush bloom. The plant grows with each answer; leaves are chapters. */
[data-theme="ogrod"] {
  --c-ground: #0e3b2c;
  --c-surface: #164a38;
  --c-heading: #f3fbe8;
  --c-heading-2: #e1f3cf;
  --c-accent: #c8f169;
  --c-accent-strong: #c8f169;
  --c-accent-soft: #215c46;
  --c-tint: #11402f;
  --c-tint-2: #235e48;
  --c-line: #2d6a53;
  --c-ink: #e4f1df;
  --c-muted: #a9cab6;
  --c-shadow: #021710;
  --c-on-accent: #0e3b2c;
  --c-on-heading: #0e3b2c;
  --c-mark: #5c947c;
  --c-wave-1: #164e3a;
  --c-wave-2: #11432f;
  --c-halo: #1b5741;
  --danger: #ffb4a6;
  --danger-soft: #4b2019;
  --r-urgent: #ff8f80;
  --r-important: #ffb266;
  --r-attention: #ffe066;
  --r-good: #a4e98f;
  --radius-s: 18px;
  --radius: 24px;
  --radius-l: 34px;
  --font: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}
[data-theme="ogrod"] ::selection { background: #c8f169; color: #0e3b2c; }
[data-theme="ogrod"] .intro__title, [data-theme="ogrod"] .question__title, [data-theme="ogrod"] .moment__name, [data-theme="ogrod"] .result .h2 { font-variation-settings: "opsz" 96; letter-spacing: -.035em; }
[data-theme="ogrod"] .opt__box { box-shadow: none; }
[data-theme="ogrod"] .opt__box:hover { box-shadow: 0 10px 30px rgb(0 0 0 / 25%); }
[data-theme="ogrod"] .opt__input:checked + .opt__box { box-shadow: 0 0 0 3px rgb(200 241 105 / 18%); }
[data-theme="ogrod"] .field__input, [data-theme="ogrod"] .opt__field input { background: #0f3d2d; color: var(--c-heading); }
[data-theme="ogrod"] .btn--ghost:hover, [data-theme="ogrod"] .btn--soft { background: #1b5240; color: var(--c-heading); }
[data-theme="ogrod"] .shell__nav { background: linear-gradient(180deg, rgb(14 59 44 / 0%), rgb(14 59 44 / 94%) 30%); }
[data-theme="ogrod"] .result .bmiInfo { background: var(--c-surface); }
/* Garden art */
.art--garden .g-halo { fill: var(--c-halo); }
.art--garden .g-stem { fill: none; stroke: #c8f169; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw-line 1.6s .2s var(--ease) forwards; }
.art--garden .g-leaf { fill: #c8f169; transform-box: fill-box; transform-origin: 0% 50%; animation: leaf-grow .7s cubic-bezier(.16, 1, .3, 1) backwards, leaf-sway 5s ease-in-out 2.6s infinite alternate; animation-delay: calc(.7s + var(--i) * .14s), calc(2.6s + var(--i) * .3s); }
.art--garden g:nth-of-type(even) > .g-leaf { fill: #8fd96b; }
.art--garden .g-bloom { transform-box: fill-box; transform-origin: center; animation: pop-in .9s 1.9s cubic-bezier(.16, 1, .3, 1) backwards, bloom-spin 24s 3s linear infinite; }
.art--garden .g-bloom ellipse { fill: #ff9fbc; }
.art--garden .g-bloom-core { fill: #ffe066; }
.art--garden .g-pot { fill: #ff9fbc; }
.art--garden .g-pot-rim { fill: #ffbfd2; }
.art--garden .g-sparkles path { fill: #ffe066; transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.art--garden .g-sparkles path:nth-child(2) { animation-delay: .9s; }
.art--garden .g-sparkles path:nth-child(3) { animation-delay: 1.7s; }
@keyframes leaf-grow { from { transform: scale(0) rotate(-20deg); } }
@keyframes leaf-sway { to { transform: rotate(5deg); } }
@keyframes bloom-spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(.5); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } }
/* Garden progress: a vine, chapter buds, a sprout that grows from seedling to plant */
[data-theme="ogrod"] .prog { height: 44px; }
[data-theme="ogrod"] .prog__track { height: 6px; background: #21573f; }
[data-theme="ogrod"] .prog__fill { background: linear-gradient(90deg, #7ad9a0, #c8f169); }
[data-theme="ogrod"] .prog__mark { width: 12px; height: 12px; border-radius: 50% 0; transform: translate(-50%, -50%) rotate(-45deg); background: #164a38; box-shadow: 0 0 0 2px #2d6a53; }
[data-theme="ogrod"] .prog__mark.is-done { background: #c8f169; box-shadow: 0 0 0 2px #c8f169; }
[data-theme="ogrod"] .prog__runner { width: 34px; height: 34px; top: auto; bottom: 50%; transform: translate(-50%, 4px); }
[data-theme="ogrod"] .prog__runner svg { width: 34px; height: 34px; overflow: visible; transform: scale(calc(.6 + var(--p) * .8)); transform-origin: 50% 100%; transition: transform .7s var(--ease); }
.sprout-stem { fill: none; stroke: #8fd96b; stroke-width: 2.6; stroke-linecap: round; }
.sprout-leaf { fill: #c8f169; transform-box: fill-box; transform-origin: 100% 100%; animation: leaf-sway 2.4s ease-in-out infinite alternate; }
.sprout-leaf--r { fill: #8fd96b; transform-origin: 0% 100%; animation-delay: -1.2s; }

/* ------------------------------------------------------------------------------ ŚWIT (dawn)
   The sky warms from lavender night to golden morning as progress moves; the sun rises on the bar. */
[data-theme="swit"] {
  --c-ground: #fff8f2;
  --c-surface: #ffffff;
  --c-heading: #2b1d4f;
  --c-heading-2: #3e2b6e;
  --c-accent: #ff8a5c;
  --c-accent-strong: #b8411f;
  --c-accent-soft: #ffe7dc;
  --c-tint: #f4eaff;
  --c-tint-2: #e5d6fb;
  --c-line: #e8dcf3;
  --c-ink: #2b2140;
  --c-muted: #685a7d;
  --c-shadow: #4b2a6b;
  --c-on-accent: #2b1d4f;
  --c-on-heading: #ffffff;
  --c-mark: #cbb7e2;
  --c-wave-1: #f3dcf3;
  --c-wave-2: #fde9e2;
  --c-halo: #ffe2cf;
  --radius-s: 18px;
  --radius: 22px;
  --radius-l: 32px;
  --font: 'Lexend', ui-sans-serif, system-ui, sans-serif;
}
[data-theme="swit"] ::selection { background: #ffd2bf; color: #2b1d4f; }
[data-theme="swit"] .shell, [data-theme="swit"] .intro {
  --sky-a: hsl(calc(262 - var(--p, 0) * 228) 78% 92%);
  --sky-b: hsl(calc(305 - var(--p, 0) * 262) 88% 95%);
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 52%, #fffaf5 100%);
  transition: background .8s var(--ease);
}
[data-theme="swit"] .intro { --p: .15; }
[data-theme="swit"] .intro__title, [data-theme="swit"] .question__title { font-weight: 600; letter-spacing: -.03em; }
[data-theme="swit"] .shell__bar { background: rgb(255 255 255 / 45%); border-bottom-color: rgb(255 255 255 / 60%); }
[data-theme="swit"] .opt__box, [data-theme="swit"] .panel, [data-theme="swit"] .cta-card { background: rgb(255 255 255 / 72%); backdrop-filter: blur(12px) saturate(1.3); border-color: rgb(255 255 255 / 85%); }
@media (max-width: 899px) { [data-theme="swit"] .cta-card { background: #fffaf5; backdrop-filter: none; } [data-theme="swit"] .cta-card::before { background: linear-gradient(to bottom, transparent, var(--sky-b)); } /* matches the sky where the card rests */ }
[data-theme="swit"] .opt__input:checked + .opt__box { background: rgb(255 238 228 / 92%); border-color: #ff8a5c; }
[data-theme="swit"] .shell__nav { background: linear-gradient(180deg, rgb(255 250 245 / 0%), rgb(255 250 245 / 92%) 30%); }
/* Dawn art */
.art--dawn .d-glow, .art--dawn .d-sun { transform-box: fill-box; transform-origin: center; animation: sun-rise 1.8s var(--ease) backwards, breathe 6s ease-in-out 1.8s infinite alternate; }
.art--dawn .d-rays line { stroke: #ffb36b; stroke-width: 4; stroke-linecap: round; opacity: .7; }
.art--dawn .d-rays { transform-origin: 240px 300px; animation: fade 1s 1.4s backwards, spin 80s linear infinite; }
.art--dawn .d-hill--1 { fill: #e6d4ff; }
.art--dawn .d-hill--2 { fill: #f9c8dc; }
.art--dawn .d-hill--3 { fill: #ffe2cb; }
.art--dawn .d-hill { animation: rise 1.2s var(--ease) backwards; }
.art--dawn .d-hill--2 { animation-delay: .12s; }
.art--dawn .d-hill--3 { animation-delay: .24s; }
.art--dawn .d-bird { fill: none; stroke: #685a7d; stroke-width: 2.5; stroke-linecap: round; animation: drift 9s ease-in-out infinite alternate; }
.art--dawn .d-bird--2 { animation-duration: 11s; }
@keyframes sun-rise { from { transform: translateY(90px); opacity: 0; } }
@keyframes breathe { to { transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translate(24px, -8px); } }
/* Dawn progress: a horizon line; the sun climbs an arc over it */
[data-theme="swit"] .prog { height: 42px; }
[data-theme="swit"] .prog__track { height: 2px; background: rgb(43 29 79 / 15%); }
[data-theme="swit"] .prog__fill { background: linear-gradient(90deg, #c9a7ff, #ff8a5c); }
[data-theme="swit"] .prog__mark { width: 8px; height: 8px; background: #fff; box-shadow: 0 0 0 2px #d9c6f2; }
[data-theme="swit"] .prog__mark.is-done { background: #ffb36b; box-shadow: 0 0 0 2px #ffb36b; }
[data-theme="swit"] .prog__runner { transform: translate(-50%, calc(-50% - sin(var(--p) * 180deg) * 12px)); transition: left .7s var(--ease), transform .7s var(--ease); }
.sun-dot { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe3a3, #ff8a5c); box-shadow: 0 0 0 6px rgb(255 170 110 / 25%), 0 0 26px 6px rgb(255 160 100 / 55%); animation: breathe-dot 3s ease-in-out 2 alternate; }
@keyframes breathe-dot { to { box-shadow: 0 0 0 9px rgb(255 170 110 / 18%), 0 0 34px 10px rgb(255 160 100 / 50%); } }

/* ------------------------------------------------------------------------------ PLAKAT (poster)
   Polish poster school: flat cut-paper fields, extended heavy lettering, ink outlines, no shadows. */
[data-theme="plakat"] {
  --c-ground: #ffffff;
  --c-surface: #ffffff;
  --c-heading: #111111;
  --c-heading-2: #2b3cff;
  --c-accent: #ff4b33;
  --c-accent-strong: #c92a14;
  --c-accent-soft: #ffe2dc;
  --c-tint: #fff3c4;
  --c-tint-2: #ffe27a;
  --c-line: #111111;
  --c-ink: #111111;
  --c-muted: #474747;
  --c-shadow: #111111;
  --c-on-accent: #111111;
  --c-on-heading: #ffffff;
  --c-mark: #111111;
  --c-wave-1: #ffcc1a;
  --c-wave-2: #ffe27a;
  --c-halo: transparent;
  --c-blue: #2b3cff;
  --c-yellow: #ffcc1a;
  --radius-s: 0px;
  --radius: 0px;
  --radius-l: 0px;
  --shadow-s: none;
  --shadow: none;
  --font: 'Archivo', ui-sans-serif, system-ui, sans-serif;
}
[data-theme="plakat"] ::selection { background: #ffcc1a; color: #111; }
[data-theme="plakat"] .intro__title { font-size: clamp(3rem, 12vw, 6rem); font-weight: 900; font-variation-settings: "wdth" 125; text-transform: lowercase; line-height: .9; letter-spacing: -.04em; }
[data-theme="plakat"] .intro__title span { color: var(--c-blue); }
[data-theme="plakat"] .question__title, [data-theme="plakat"] .panel__title, [data-theme="plakat"] .moment__name, [data-theme="plakat"] .result .h2 { font-weight: 900; font-variation-settings: "wdth" 112; letter-spacing: -.03em; }
[data-theme="plakat"] .intro::before { left: -6%; bottom: -10%; width: 46%; height: 30%; border-radius: 0; transform: rotate(-6deg); background: var(--c-yellow); opacity: 1; }
[data-theme="plakat"] .intro__rule path { stroke: #111; stroke-width: 10; stroke-linecap: butt; }
[data-theme="plakat"] .btn { border-radius: 0; border: 2.5px solid #111; font-weight: 800; font-variation-settings: "wdth" 110; letter-spacing: .02em; text-transform: uppercase; font-size: .95rem; }
[data-theme="plakat"] .btn--primary { box-shadow: none; }
[data-theme="plakat"] .btn--primary:hover { background: var(--c-yellow); }
[data-theme="plakat"] .btn--ghost { border-color: transparent; }
[data-theme="plakat"] .btn--ghost:hover { border-color: #111; background: #fff; }
[data-theme="plakat"] .shell { background: #fff; }
[data-theme="plakat"] .shell__bar { border-bottom: 3px solid #111; background: #fff; backdrop-filter: none; }
[data-theme="plakat"] .opt__box { border: 2.5px solid #111; }
[data-theme="plakat"] .opt__box:hover { transform: rotate(-.6deg); border-color: #111; background: var(--c-tint); }
[data-theme="plakat"] .opt:nth-child(even) .opt__box:hover { transform: rotate(.6deg); }
[data-theme="plakat"] .opt__input:checked + .opt__box { background: var(--c-yellow); border-color: #111; box-shadow: none; }
[data-theme="plakat"] .opt__mark { border-color: #111; }
[data-theme="plakat"] .opt--checkbox .opt__mark { border-radius: 0 !important; } /* squares = many, circles = one */
[data-theme="plakat"] .opt__input:checked + .opt__box .opt__mark { background: #111; border-color: #111; color: var(--c-yellow); }
[data-theme="plakat"] .opt__label { font-weight: 600; }
[data-theme="plakat"] .opt__key { color: #111; }
[data-theme="plakat"] .feature__icon, [data-theme="plakat"] .panel__icon { border-radius: 0; background: var(--c-yellow); color: #111; }
[data-theme="plakat"] .feature:nth-child(2) .feature__icon { background: var(--c-accent); }
[data-theme="plakat"] .feature:nth-child(3) .feature__icon { background: var(--c-blue); color: #fff; }
[data-theme="plakat"] .feature { border-left-color: #111; }
[data-theme="plakat"] .cta-card, [data-theme="plakat"] .panel, [data-theme="plakat"] .moment__card { border: 3px solid #111; background: #fff; backdrop-filter: none; }
[data-theme="plakat"] .cta-card { --cta-border: 3px; }
[data-theme="plakat"] .field__input, [data-theme="plakat"] .opt__field input { border: 2.5px solid #111; border-radius: 0; }
[data-theme="plakat"] .companion { border: 2.5px solid #111; border-radius: 0; background: var(--c-yellow); color: #111; }
[data-theme="plakat"] .companion--calm { background: #fff; }
[data-theme="plakat"] .companion__avatar { border-radius: 0; background: #111; color: var(--c-yellow); }
[data-theme="plakat"] .moment__badge { border-radius: 0; background: #111; color: var(--c-yellow); transform: rotate(-4deg); }
[data-theme="plakat"] .result__thanks { color: #111; font-weight: 800; }
[data-theme="plakat"] .intro { background: #fff; }
[data-theme="plakat"] .moment__card, [data-theme="plakat"] .result .offer { box-shadow: none; }
[data-theme="plakat"] .result .offer { border: 3px solid #111; }
[data-theme="plakat"] .offer__info { background: var(--c-yellow); border-bottom: 3px solid #111; }
[data-theme="plakat"] .offer__list .icon { border-radius: 0; border: 2.5px solid #111; color: #111; }
[data-theme="plakat"] .offer__save { border-radius: 0; background: var(--c-blue); color: #fff; }
@media (min-width: 760px) { [data-theme="plakat"] .offer__info { border-bottom: 0; border-right: 3px solid #111; } }
[data-theme="plakat"] .btn--next.is-ready { animation: none; background: var(--c-yellow); }
[data-theme="plakat"] :focus-visible:not([tabindex="-1"]), [data-theme="plakat"] .opt__input:focus-visible + .opt__box { outline: 3px solid #111; outline-offset: 3px; }
[data-theme="plakat"] .field__input:focus, [data-theme="plakat"] .opt__field input:focus { box-shadow: none; outline: 3px solid #111; outline-offset: 2px; }
[data-theme="plakat"] .result svg.rounders circle { stroke: #e6e6e6; }
[data-theme="plakat"] .result .badgeros .badger span { color: #111; }
[data-theme="plakat"] .result .badger, [data-theme="plakat"] .result .righter .item, [data-theme="plakat"] .result .buttoneros a { border: 2.5px solid #111; }
[data-theme="plakat"] .result .badgeros .badger:nth-child(1) { background: var(--c-yellow); }
[data-theme="plakat"] .result .badgeros .badger:nth-child(2) { background: var(--c-accent); }
[data-theme="plakat"] .result .badgeros .badger:nth-child(3) { background: var(--c-blue); }
[data-theme="plakat"] .result .badgeros .badger:nth-child(3) * { color: #fff !important; }
[data-theme="plakat"] .result .buttoneros .price { border-radius: 0; background: #111; color: #fff; }
[data-theme="plakat"] .moment__loader i { border-radius: 0; border-width: 4px; border-color: #111; }
/* Poster art: cut-paper shapes drop in, then each keeps its own small life */
.art--poster .p-red { fill: #ff4b33; }
.art--poster .p-blue { fill: #2b3cff; transform-box: fill-box; transform-origin: 50% 100%; }
.art--poster .p-yellow { fill: #ffcc1a; }
.art--poster .p-heart { fill: #fff; transform-box: fill-box; transform-origin: center; animation: pop-in .7s .9s cubic-bezier(.16, 1, .3, 1) backwards, beat 1.6s ease-in-out 1.8s infinite; }
.art--poster .p-ring { fill: none; stroke: #111; stroke-width: 12; animation: orbit 7s ease-in-out infinite alternate; }
.art--poster .p-cross { fill: #111; transform-box: fill-box; transform-origin: center; animation: spin 18s linear infinite; }
.art--poster .p-dots rect { fill: #111; animation: blink 1.6s steps(1) 3; }
.art--poster .p-dots rect:nth-child(2) { animation-delay: .4s; }
.art--poster .p-dots rect:nth-child(3) { animation-delay: .8s; }
.art--poster .p-dots rect:nth-child(4) { animation-delay: 1.2s; }
.art--poster .p-red, .art--poster .p-blue, .art--poster .p-yellow, .art--poster .p-ring { animation: drop .8s cubic-bezier(.16, 1, .3, 1) backwards; }
.art--poster .p-blue { animation-delay: .12s; animation-name: drop, sway; animation-duration: .8s, 5s; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out; }
.art--poster .p-yellow { animation-delay: .24s; }
@keyframes drop { from { transform: translateY(-60px) rotate(-6deg); opacity: 0; } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes orbit { to { transform: translate(18px, 14px); } }
@keyframes blink { 50% { fill: #ff4b33; } }
/* Poster progress: a thick ink bar, chapters as blocks that flip to cobalt */
[data-theme="plakat"] .prog { height: 40px; }
[data-theme="plakat"] .prog__track { height: 14px; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 2.5px #111; }
[data-theme="plakat"] .prog__fill { border-radius: 0; background: repeating-linear-gradient(-45deg, #ff4b33 0 10px, #ff6a52 10px 20px); box-shadow: inset 0 0 0 2.5px #111; }
[data-theme="plakat"] .prog__mark { width: 14px; height: 22px; border-radius: 0; background: #fff; box-shadow: 0 0 0 2.5px #111; }
[data-theme="plakat"] .prog__mark.is-here { background: var(--c-yellow); box-shadow: 0 0 0 2.5px #111; }
[data-theme="plakat"] .prog__mark.is-done { background: var(--c-blue); box-shadow: 0 0 0 2.5px #111; }

/* ------------------------------------------------------------------------------ TRASA (route)
   Orienteering map: white runnable ground with contour lines, yellow open land, the course in purple.
   Questions are legs, chapters are numbered controls, the e-mail step is the finish. */
[data-theme="trasa"] {
  --c-ground: #ffffff;
  --c-surface: #ffffff;
  --c-heading: #1f2a1c;
  --c-heading-2: #2c3b28;
  --c-accent: #b0118b;
  --c-accent-strong: #8f0d71;
  --c-accent-soft: #fbe4f4;
  --c-tint: #fff6c8;
  --c-tint-2: #e9f0db;
  --c-line: #cdd6c2;
  --c-ink: #22301f;
  --c-muted: #56654f;
  --c-shadow: #2b3a1f;
  --c-on-accent: #ffffff;
  --c-on-heading: #ffffff;
  --c-mark: #b2bea6;
  --c-wave-1: #fff1a8;
  --c-wave-2: #fff8d6;
  --c-halo: transparent;
  --radius-s: 10px;
  --radius: 14px;
  --radius-l: 20px;
  --font: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, sans-serif;
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='420' viewBox='0 0 560 420'%3E%3Cg fill='none' stroke='%23c98a4b' stroke-opacity='.24' stroke-width='1.2'%3E%3Cpath d='M226.1 120.0C226.9 136.6 230.9 160.8 216.6 171.5C202.2 182.3 164.4 185.4 140.0 184.6C115.6 183.8 88.4 177.7 70.3 166.9C52.2 156.1 33.2 136.9 31.4 120.0C29.5 103.1 41.0 76.7 59.1 65.5C77.2 54.4 114.6 52.0 140.0 53.1C165.4 54.2 197.1 60.8 211.4 71.9C225.8 83.1 225.2 103.4 226.1 120.0Z'/%3E%3Cpath d='M207.4 120.0C208.0 133.0 211.1 151.9 199.9 160.3C188.7 168.8 159.1 171.2 140.0 170.6C120.9 170.0 99.7 165.1 85.5 156.7C71.3 148.3 56.4 133.2 55.0 120.0C53.5 106.8 62.5 86.1 76.7 77.4C90.8 68.6 120.1 66.8 140.0 67.6C159.9 68.5 184.7 73.6 195.9 82.4C207.1 91.1 206.7 107.0 207.4 120.0Z' stroke-width='2'/%3E%3Cpath d='M188.7 120.0C189.1 129.4 191.4 143.0 183.3 149.1C175.2 155.2 153.8 157.0 140.0 156.5C126.2 156.1 110.9 152.6 100.6 146.5C90.4 140.4 79.7 129.5 78.6 120.0C77.5 110.5 84.0 95.5 94.3 89.2C104.5 82.9 125.6 81.6 140.0 82.2C154.4 82.8 172.3 86.5 180.4 92.8C188.5 99.1 188.2 110.6 188.7 120.0Z'/%3E%3Cpath d='M169.9 120.0C170.2 125.8 171.6 134.2 166.6 137.9C161.6 141.7 148.5 142.7 140.0 142.5C131.5 142.2 122.1 140.1 115.8 136.3C109.5 132.6 102.9 125.9 102.2 120.0C101.6 114.1 105.5 104.9 111.8 101.1C118.1 97.2 131.2 96.4 140.0 96.7C148.8 97.1 159.9 99.4 164.9 103.3C169.8 107.2 169.7 114.2 169.9 120.0Z'/%3E%3Cpath d='M535.6 300.0C536.3 317.5 507.8 341.0 486.9 353.8C466.0 366.7 434.7 377.7 410.0 377.1C385.3 376.5 360.7 362.8 338.6 350.0C316.6 337.1 279.2 317.7 277.7 300.0C276.2 282.3 307.6 257.8 329.7 243.8C351.7 229.8 384.4 215.0 410.0 215.9C435.6 216.7 462.1 234.8 483.1 248.9C504.0 262.9 535.0 282.5 535.6 300.0Z'/%3E%3Cpath d='M513.2 300.0C513.7 314.4 490.4 333.7 473.2 344.2C456.0 354.8 430.3 363.9 410.0 363.3C389.7 362.8 369.5 351.6 351.4 341.0C333.3 330.5 302.6 314.5 301.3 300.0C300.1 285.5 325.9 265.3 344.0 253.8C362.1 242.3 389.0 230.2 410.0 230.9C431.0 231.6 452.8 246.5 470.0 258.0C487.2 269.5 512.7 285.6 513.2 300.0Z' stroke-width='2'/%3E%3Cpath d='M490.8 300.0C491.2 311.2 472.9 326.3 459.4 334.6C446.0 342.9 425.9 350.0 410.0 349.6C394.1 349.2 378.3 340.4 364.1 332.1C350.0 323.8 325.9 311.4 325.0 300.0C324.0 288.6 344.2 272.9 358.4 263.9C372.5 254.8 393.6 245.4 410.0 245.9C426.4 246.5 443.5 258.1 457.0 267.1C470.4 276.1 490.3 288.8 490.8 300.0Z'/%3E%3Cpath d='M468.3 300.0C468.6 308.1 455.4 319.0 445.7 325.0C436.0 331.0 421.5 336.1 410.0 335.8C398.5 335.5 387.1 329.2 376.9 323.2C366.6 317.2 349.3 308.2 348.6 300.0C347.9 291.8 362.5 280.4 372.7 273.9C382.9 267.4 398.1 260.6 410.0 261.0C421.9 261.3 434.2 269.7 443.9 276.3C453.6 282.8 468.0 291.9 468.3 300.0Z'/%3E%3Cpath d='M445.9 300.0C446.1 305.0 438.0 311.7 432.0 315.4C426.0 319.0 417.1 322.2 410.0 322.0C402.9 321.8 395.9 317.9 389.6 314.3C383.3 310.6 372.6 305.1 372.2 300.0C371.8 294.9 380.8 287.9 387.1 283.9C393.4 279.9 402.7 275.7 410.0 276.0C417.3 276.2 424.9 281.4 430.9 285.4C436.9 289.4 445.7 295.0 445.9 300.0Z'/%3E%3Cpath d='M509.2 92.0C509.6 99.9 496.0 110.8 486.1 116.5C476.3 122.3 462.9 126.0 450.0 126.5C437.1 127.1 417.5 125.7 408.8 119.9C400.2 114.2 397.0 100.5 398.1 92.0C399.3 83.5 407.1 74.0 415.7 68.8C424.4 63.5 438.7 60.7 450.0 60.8C461.3 60.9 473.6 64.1 483.4 69.3C493.3 74.5 508.7 84.1 509.2 92.0Z'/%3E%3Cpath d='M486.4 92.0C486.7 96.8 478.3 103.6 472.2 107.1C466.2 110.6 457.9 112.9 450.0 113.2C442.1 113.6 430.0 112.7 424.7 109.2C419.3 105.7 417.4 97.2 418.1 92.0C418.8 86.8 423.6 80.9 428.9 77.7C434.2 74.5 443.1 72.7 450.0 72.8C456.9 72.8 464.5 74.8 470.6 78.0C476.7 81.2 486.2 87.2 486.4 92.0Z'/%3E%3Cpath d='M201.5 330.0C201.7 341.0 205.4 355.5 196.8 363.2C188.3 371.0 164.8 377.0 150.0 376.4C135.2 375.8 119.0 367.3 108.3 359.6C97.6 351.9 86.0 339.9 85.9 330.0C85.8 320.1 96.9 307.0 107.6 299.9C118.3 292.8 135.3 287.6 150.0 287.2C164.7 286.8 187.4 290.2 196.0 297.3C204.6 304.5 201.4 319.0 201.5 330.0Z'/%3E%3Cpath d='M181.7 330.0C181.8 336.8 184.1 345.7 178.8 350.5C173.5 355.2 159.1 358.9 150.0 358.6C140.9 358.2 130.9 353.0 124.3 348.2C117.8 343.4 110.6 336.1 110.5 330.0C110.5 323.9 117.3 315.9 123.9 311.5C130.5 307.1 140.9 303.9 150.0 303.7C159.1 303.4 173.0 305.5 178.3 309.9C183.6 314.3 181.6 323.2 181.7 330.0Z'/%3E%3C/g%3E%3C/svg%3E"); /* closed contour rings that never touch the tile edge, so the 560x420 tile repeats with no seam */
}
[data-theme="trasa"] ::selection { background: #fff1a8; color: #1f2a1c; }
[data-theme="trasa"] .shell, [data-theme="trasa"] .intro { background: var(--contours) 0 0 / 560px 420px, #fff; }
[data-theme="trasa"] .intro::before { background: var(--c-wave-1); opacity: .9; border-radius: 46% 54% 40% 60% / 50% 46% 54% 50%; }
[data-theme="trasa"] .intro__title { text-transform: uppercase; font-weight: 700; letter-spacing: -.01em; font-size: clamp(3rem, 11vw, 5.6rem); line-height: .92; }
[data-theme="trasa"] .question__title, [data-theme="trasa"] .panel__title, [data-theme="trasa"] .moment__name, [data-theme="trasa"] .result .h2 { text-transform: uppercase; font-weight: 700; letter-spacing: 0; }
[data-theme="trasa"] .intro__rule path { stroke-dasharray: 10 8; stroke-dashoffset: 0; animation: march 1.2s linear infinite; }
[data-theme="trasa"] .opt__box { border-width: 2px; }
[data-theme="trasa"] .opt__mark { border-color: var(--c-accent); border-width: 2.5px; }
[data-theme="trasa"] .opt--checkbox .opt__mark { border-radius: 4px; }
[data-theme="trasa"] .opt__input:checked + .opt__box { background: #fff; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgb(176 17 139 / 14%); }
[data-theme="trasa"] .opt__key { font-family: var(--font-display); font-size: .85rem; color: var(--c-accent); }
[data-theme="trasa"] .feature__icon { background: var(--c-tint); color: var(--c-accent); border-radius: 50%; }
[data-theme="trasa"] .shell__count b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; }
@keyframes march { to { stroke-dashoffset: -36; } }
/* Map art */
.art--map .m-ground { fill: #fffef8; }
.art--map .m-open { fill: #fff1a8; }
.art--map .m-thicket { fill: #cfe3a3; }
.art--map .m-marsh line { stroke: #3aa0d8; stroke-width: 2; }
.art--map .contour { fill: none; stroke: #c98a4b; stroke-width: 1.3; opacity: .75; }
.art--map .contour--index { stroke-width: 2.4; }
.art--map .m-frame { fill: none; stroke: #1f2a1c; stroke-width: 2; }
.art--map .m-course { fill: none; stroke: #b0118b; stroke-width: 3.5; }
.art--map .m-course .leg { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw-line .45s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .32s); }
.art--map .m-course .start { stroke-linejoin: round; animation: fade .4s .3s backwards; }
.art--map .m-course .control circle { transform-box: fill-box; transform-origin: center; animation: pop-in .45s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(.75s + var(--i) * .32s); }
.art--map .m-course text { fill: #b0118b; stroke: none; font: 700 22px 'Barlow Condensed', sans-serif; animation: fade .3s backwards; animation-delay: calc(.8s + var(--i) * .32s); }
.art--map .m-course .finish circle { transform-box: fill-box; transform-origin: center; animation: pop-in .5s 3.3s cubic-bezier(.16, 1, .3, 1) backwards, pulse-ring 2s 3.8s ease-in-out infinite; }
@keyframes pulse-ring { 50% { transform: scale(1.12); } }
/* Route progress: a dashed course, numbered controls, a ring for "you are here" */
[data-theme="trasa"] .prog { height: 46px; }
[data-theme="trasa"] .prog__track { height: 3px; overflow: visible; background: repeating-linear-gradient(90deg, rgb(176 17 139 / 35%) 0 8px, transparent 8px 14px); }
[data-theme="trasa"] .prog__fill { background: #b0118b; }
[data-theme="trasa"] .prog__mark { width: 22px; height: 22px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2.5px #b0118b; }
[data-theme="trasa"] .prog__mark span { display: block; font: 700 12px/1 var(--font-display); color: #b0118b; }
[data-theme="trasa"] .prog__mark.is-done { background: #b0118b; }
[data-theme="trasa"] .prog__mark.is-done span { color: #fff; }
[data-theme="trasa"] .prog__runner svg { width: 30px; height: 30px; fill: none; stroke: #b0118b; stroke-width: 3; animation: pulse-ring 1.6s ease-in-out 2; }
[data-theme="trasa"] .prog__runner { z-index: 1; }

/* Klinika-only touches that other themes replace */
[data-theme]:not([data-theme="klinika"]) .art-img { animation: none; }

/* Narrow phones: the route's numbered controls shrink to plain rings so short chapters don't collide. */
@media (max-width: 479px) {
  [data-theme="trasa"] .prog__mark { width: 14px; height: 14px; }
  [data-theme="trasa"] .prog__mark span { display: none; }
  [data-theme="trasa"] .prog__runner svg { width: 24px; height: 24px; }
}
/* Ogród offer: buy side one step lighter than the info side so the card reads as two halves on the dark ground;
   muted text lifted to keep ≥4.5:1 there, save chip goes lime because accent-soft would vanish into the panel. */
[data-theme="ogrod"] .offer__buy { background: var(--c-tint-2); --c-muted: #c6decf; }
[data-theme="ogrod"] .offer__save { background: var(--c-accent); color: var(--c-on-accent); }