/* altordo.com/quiz. Atlas tokens come from /styles.css. */

.quiz-page { background: var(--paper); }
.qz-main { padding: clamp(12px, 3vw, 40px) var(--gutter) clamp(40px, 6vw, 80px); }
.qz-card {
  max-width: 1120px; margin: 0 auto; background: var(--card); box-shadow: var(--shadow-print); border-radius: var(--r-lg);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); overflow: hidden; min-height: min(640px, 82vh);
}
.qz-stage { position: relative; background: var(--paper-dk); display: flex; flex-direction: column; }
.qz-scene { flex: 1; display: flex; align-items: stretch; }
.qz-scene { overflow: hidden; }
.qz-scene .qs { width: 100%; height: 100%; display: block; overflow: visible; }
.qz-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(29, 42, 34, .12); }
.qz-bar { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--marker); transition: width .5s var(--ease); }
.qz-count { position: absolute; right: 12px; bottom: 12px; font: 700 .7rem/1 var(--f-cond); letter-spacing: .14em; color: var(--card); background: var(--plate); padding: 5px 7px 4px; border-radius: var(--r-sm); }
.qz-count:empty { display: none; }
.qz[data-view="intro"] .qz-progress { opacity: 0; }

.qz-body { padding: clamp(22px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.qz-intro > * { animation: qz-rise .7s var(--ease) both; }
.qz-intro > *:nth-child(2) { animation-delay: .06s; } .qz-intro > *:nth-child(3) { animation-delay: .12s; }
.qz-intro > *:nth-child(4) { animation-delay: .18s; } .qz-intro > *:nth-child(5) { animation-delay: .24s; } .qz-intro > *:nth-child(n+6) { animation-delay: .3s; }
.qz-h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.02; }
.qz-lede { margin: 16px 0 24px; font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }
.qz-start { font-size: .9rem; min-height: 54px; padding: 16px 26px; align-self: flex-start; animation: qz-rise .7s var(--ease) .18s both, qz-nudge 2.8s ease-in-out 2s infinite; }
.qz-fine { margin-top: 14px; font-size: .92rem; color: var(--ink-soft); }
.qz-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.qz-flags b, .qz-chip b { font: 700 .62rem/1 var(--f-cond); letter-spacing: .1em; padding: 4px 5px 3px; border: 1px solid var(--line-3); border-radius: var(--r-sm); color: var(--ink-soft); }

/* question */
.qz-q > * { animation: qz-rise .5s var(--ease) both; }
.qz-q > .qz-title { animation-delay: .04s; }
.qz-kicker { font: 700 .72rem/1 var(--f-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--marker); margin: 0 0 10px; }
.qz-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.qz-sub { margin: 8px 0 0; color: var(--ink-soft); font-size: 1rem; }
.qz-opts { display: grid; gap: 10px; margin-top: 22px; }
.qz-opts--cards { grid-template-columns: 1fr 1fr; }
.qz-opts--n3 { grid-template-columns: 1fr; }
.qz-opts--multi { grid-template-columns: 1fr 1fr; }
.qz-opt {
  display: flex; align-items: center; gap: 12px; text-align: left; background: var(--cream); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 10px 12px; min-height: 64px; transition: transform .18s var(--ease), border-color .18s, background .18s, box-shadow .18s;
  animation: qz-pop-in .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 80ms);
}
.qz-opt:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.qz-opt:focus-visible, .qz-chip:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
.qz-opt.is-on { border-color: var(--marker); background: #fff; box-shadow: inset 0 0 0 1.5px var(--marker); }
.qz-opt.is-pop { animation: qz-pop .38s var(--ease); }
.qz-opt__ico { flex: 0 0 44px; width: 44px; height: 44px; }
.qz-opt__ico svg { width: 100%; height: 100%; transition: transform .3s var(--ease); }
.qz-opt:hover .qz-opt__ico svg, .qz-opt.is-on .qz-opt__ico svg { transform: scale(1.08) rotate(-3deg); }
.qz-opt__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.qz-opt__txt b { font: 600 1rem/1.2 var(--f-cond); letter-spacing: .01em; color: var(--ink); }
.qz-opt__txt small { font-size: .86rem; line-height: 1.3; color: var(--ink-soft); }
.qz-opt__tick { flex: 0 0 20px; height: 20px; border: 1.5px solid var(--line-3); border-radius: 2px; position: relative; }
.qz-opt.is-on .qz-opt__tick { background: var(--marker); border-color: var(--marker); }
.qz-opt.is-on .qz-opt__tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.qz-opts--chips { grid-template-columns: repeat(3, 1fr); }
.qz-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 10px 9px; background: var(--cream); border: 1px solid var(--line-2); border-radius: var(--r);
  font: 600 .92rem/1.15 var(--f-cond); text-align: left; animation: qz-pop-in .4s var(--ease) both; animation-delay: calc(var(--i) * 30ms + 60ms);
  transition: border-color .15s, transform .15s var(--ease);
}
.qz-chip:hover { border-color: var(--ink); transform: translateY(-2px); }
.qz-chip.is-guess { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.qz-chip.is-on { border-color: var(--marker); box-shadow: inset 0 0 0 1.5px var(--marker); background: #fff; }
.qz-chip.is-on b, .qz-chip.is-guess b { background: var(--ink); color: var(--card); border-color: var(--ink); }
.qz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; min-height: 44px; }
.qz-back { font: 600 .8rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 0; padding: 10px 0; }
.qz-back:hover { color: var(--ink); }
.qz-next { margin-left: auto; }
.qz-next:disabled { opacity: .35; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* scanning */
.qz-scan .qz-title { font-variant-numeric: tabular-nums; }
.qz-scan__place { margin-top: 12px; font: 500 1rem/1.3 var(--f-cond); color: var(--ink-soft); min-height: 1.3em; }
.qz-scan__bar { margin-top: 18px; height: 4px; background: var(--line); overflow: hidden; }
.qz-scan__bar i { display: block; height: 100%; width: 40%; background: var(--marker); animation: qz-scan 1s ease-in-out infinite; }

/* result */
.qz-res > * { animation: qz-rise .6s var(--ease) both; }
.qz-path { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.qz-path li { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px 10px 18px; background: var(--cream); border-left: 3px solid var(--line-3); animation: qz-step .55s var(--ease) both; animation-delay: calc(var(--i) * 420ms + 150ms); }
.qz-path li small { font: 700 .66rem/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); width: 100%; }
.qz-path li b { font: 700 clamp(1.25rem, 2.6vw, 1.6rem)/1.1 var(--f-serif); }
.qz-path li.is-final { background: var(--ink); border-left-color: var(--marker); }
.qz-path li.is-final b { color: var(--card); font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.qz-path li.is-final small { color: var(--sand); }
.qz-grade { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 2px; background: var(--g); color: #fff; font: 700 .72rem/1 var(--f-cond); vertical-align: 2px; }
.qz-why { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.qz-why li { position: relative; padding-left: 20px; font-size: .98rem; line-height: 1.45; color: var(--ink-2); animation: qz-rise .5s var(--ease) both; animation-delay: calc(1.4s + var(--i) * 90ms); }
.qz-why li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; background: var(--marker); transform: rotate(45deg); }
.qz-h3 { margin-top: 26px; font: 700 .74rem/1 var(--f-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.qz-prods { display: grid; gap: 10px; margin-top: 12px; }
.qz-prod { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r); text-decoration: none; background: #fff; transition: border-color .15s, transform .15s var(--ease), box-shadow .15s; animation: qz-rise .5s var(--ease) both; }
.qz-prod:nth-child(1) { animation-delay: 1.7s; } .qz-prod:nth-child(2) { animation-delay: 1.8s; } .qz-prod:nth-child(3) { animation-delay: 1.9s; }
.qz-prod:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.qz-prod--main { border-color: var(--marker); box-shadow: inset 0 0 0 1px var(--marker); }
.qz-prod__img { position: relative; width: 64px; aspect-ratio: 4 / 5; background: var(--paper-dk); overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 .5px var(--line-2); }
.qz-prod__img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.qz-prod__img i { position: absolute; inset: 0; display: grid; place-items: center; }
.qz-prod__img i svg { width: 30px; height: 30px; }
.qz-prod__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qz-prod__txt .plate { align-self: flex-start; font-size: .58rem; padding: 4px 6px 3px; }
.qz-prod__txt b { font: 600 1.02rem/1.2 var(--f-cond); }
.qz-prod__txt small { font-size: .84rem; line-height: 1.35; color: var(--ink-soft); }
.qz-prod__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.qz-prod__buy em { font: 700 1.05rem/1 var(--f-cond); font-style: normal; }
.qz-prod__buy span { font: 700 .66rem/1.2 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--card); background: var(--ink); padding: 7px 8px 6px; border-radius: 2px; white-space: nowrap; }
.qz-prod--main .qz-prod__buy span { background: var(--marker); }
.qz-note { margin-top: 10px; font-size: .86rem; color: var(--ink-soft); }
.qz-alts { display: grid; gap: 8px; margin-top: 12px; }
.qz-alt { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; line-height: 1.3; }
.qz-alt:hover { border-color: var(--ink); }
.qz-alt__pct { font: 700 1.1rem/1 var(--f-cond); color: var(--marker); }
.qz-alt small { display: block; font: 700 .62rem/1.4 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.qz-alt b { font: 600 1rem/1.2 var(--f-cond); }
.qz-alt span span { font-size: .86rem; color: var(--ink-soft); }
.qz-alt__go { font-size: 1.2rem; }
.qz-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.qz-share p { width: 100%; margin: 0 0 2px; font: 700 .72rem/1 var(--f-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.qz-again { margin-top: 16px; font-size: .95rem; color: var(--ink-soft); }
.qz-again a { color: inherit; }
.qz[data-view="result"] .qz-body { justify-content: flex-start; }
.qz-sharednote { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; background: var(--paper); border-left: 3px solid var(--marker); font-size: .95rem; }

/* ---------- the scene ---------- */
.qs * { transition: fill .9s var(--ease), opacity .7s var(--ease), transform .8s var(--ease); }
.qs-t, .qs-w, .qs-h, .qs-x, .qs-n, .qs-p { opacity: 0; transform: translateY(14px); pointer-events: none; }
.qs-t.on, .qs-w.on, .qs-n.on, .qs-p.on { opacity: 1; transform: none; }
.qs-n.on[data-n="city"] { opacity: .55; } .qs-n.on[data-n="town"] { opacity: .75; }
.qs-h { transform: translateY(26px) scale(.9); transform-box: fill-box; transform-origin: 50% 100%; }
.qs-h.on { opacity: 1; transform: none; transition: opacity .5s var(--ease) .15s, transform .7s cubic-bezier(.3, 1.6, .5, 1) .15s; }
.qs-x { transform: translateY(10px); }
.qs-x.on { opacity: 1; transform: none; transition-delay: .2s; }
.qs[data-weather="desert"] .qs-t[data-t="forest"] .qs-tree, .qs[data-weather="desert"] .qs-t[data-t="mountains"] .qs-tree { opacity: 0; }
.qs-cap, .qs-snowtip, .qs-roofsnow { opacity: 0; }
.qs[data-snow="1"] .qs-cap, .qs[data-snow="1"] .qs-snowtip, .qs[data-snow="1"] .qs-roofsnow { opacity: 1; }
.qs[data-weather="seasons"] .qs-cap, .qs[data-weather="mild"] .qs-cap { opacity: 1; }
.qs-sun__rays { animation: qs-spin 40s linear infinite; transform-origin: 0 0; }
.qs[data-weather="mild"] .qs-sun { opacity: .25; }
.qs[data-snow="1"] .qs-sun { opacity: .6; }
.qs-clouds { opacity: .9; }
.qs[data-weather="desert"] .qs-clouds, .qs[data-weather="sunny"] .qs-cloud--b, .qs[data-weather="sunny"] .qs-cloud--c { opacity: 0; }
.qs-cloud { animation: qs-drift 38s linear infinite alternate; }
.qs-cloud--b { animation-duration: 52s; animation-direction: alternate-reverse; }
.qs-cloud--c { animation-duration: 30s; }
.qs-birds { transform: translate(40px, 60px); animation: qs-birds 24s linear infinite; }
.qs-birds polyline { fill: none; stroke: var(--ink-soft); stroke-width: 1.3; }
.qs[data-weather="desert"] .qs-birds, .qs[data-snow="1"] .qs-birds { opacity: 0; }
.qs-flake { fill: #fff; animation: qs-fall linear infinite; }
.qs-drop { stroke: #6e9fb5; stroke-width: 1.2; opacity: .7; animation: qs-rain linear infinite; }
.qs-waves polyline { fill: none; stroke: #efe9dc; stroke-width: 1.4; opacity: .8; animation: qs-wave 3.2s ease-in-out infinite alternate; }
.qs-mill { animation: qs-spin 6s linear infinite; }
.qs-smoke circle { fill: rgba(251, 248, 241, .7); animation: qs-smoke 4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.qs-smoke circle:nth-child(2) { animation-delay: -1.3s; } .qs-smoke circle:nth-child(3) { animation-delay: -2.6s; }
.qs-van { animation: qs-idle .5s ease-in-out infinite alternate; }
.qs-hen { animation: qs-peck 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.qs-bulb { fill: var(--gold); animation: qs-blink 1.8s ease-in-out infinite; }
.qs-fire { animation: qs-flicker .3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.qs-swing { animation: qs-swing 2.2s ease-in-out infinite alternate; }
.qs-boat { animation: qs-bob 2.6s ease-in-out infinite alternate; }
.qs-trail { fill: none; stroke: var(--marker); stroke-width: 1.6; stroke-dasharray: 4 3; }
.qs { --wood1: #b5764a; --wood2: #8f5a37; --roof1: #4a5a4e; --roof2: #1d2a22; --trunk: #6b4a33; --solar: #2d4f6a; --water: #6e9fb5; --marker: #c8553d; --gold: #d9a441; --clay: #b5764a; --sand: #d9c39a; --ink: #1d2a22; --card: #fbf8f1; }

@keyframes qz-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes qz-pop-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes qz-pop { 40% { transform: scale(1.04); } }
@keyframes qz-step { from { opacity: 0; transform: translateX(-18px); } }
@keyframes qz-scan { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes qz-nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateX(4px); } 96% { transform: translateX(-2px); } }
@keyframes qs-spin { to { transform: rotate(360deg); } }
@keyframes qs-drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
@keyframes qs-birds { from { transform: translate(-60px, 70px); } to { transform: translate(540px, 30px); } }
@keyframes qs-fall { from { transform: translateY(0); } to { transform: translateY(270px) translateX(-20px); } }
@keyframes qs-rain { from { transform: translateY(0); } to { transform: translateY(270px) translateX(-40px); } }
@keyframes qs-wave { to { transform: translateX(-12px); } }
@keyframes qs-smoke { from { opacity: 0; transform: translateY(8px) scale(.5); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-16px) scale(1.4); } }
@keyframes qs-idle { to { transform: translate(236px, 221px); } }
@keyframes qs-peck { 50% { transform: rotate(14deg); } }
@keyframes qs-blink { 50% { opacity: .35; } }
@keyframes qs-flicker { to { transform: scaleY(1.2) scaleX(.9); } }
@keyframes qs-swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes qs-bob { to { transform: translate(350px, 223px) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .qs *, .qz-card * { animation: none !important; transition-duration: .01s !important; }
}

/* ---------- mobile first-ish: stack under 860px ---------- */
@media (max-width: 860px) {
  .qz-main { padding: 0 0 40px; }
  .qz-card { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; min-height: 0; }
  .qz-stage { position: sticky; top: 0; z-index: 5; }
  .qz-scene { aspect-ratio: 480 / 260; max-height: 34vh; }
  .qz-scene .qs { height: 100%; }
  .qz[data-view="intro"] .qz-scene { max-height: 42vh; }
  .qz[data-view="result"] .qz-stage { position: relative; }
  .qz-body { padding: 20px 16px 28px; }
  .qz-lede { font-size: 1.04rem; }
  .qz-start { width: 100%; justify-content: center; }
  .qz-opts { margin-top: 16px; gap: 8px; }
  .qz-opts--cards, .qz-opts--multi { grid-template-columns: 1fr; }
  .qz-opts--n4.qz-opts--cards { grid-template-columns: 1fr 1fr; }
  .qz-opts--n4 .qz-opt { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; }
  .qz-opts--n4 .qz-opt__ico { width: 36px; height: 36px; flex-basis: 36px; }
  .qz-opt { min-height: 56px; padding: 9px 11px; }
  .qz-opts--chips { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .qz-chip { font-size: .86rem; padding: 8px; }
  .qz-prod { grid-template-columns: 52px 1fr; }
  .qz-prod__img { width: 52px; }
  .qz-prod__buy { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .qz-nav { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--card) 30%); padding-top: 10px; }
}
@media (min-width: 861px) {
  /* the scene panel fills the card top to bottom; on long results the scene sticks under the header */
  .qz-card { align-items: stretch; overflow: clip; } /* clip, not hidden: hidden makes the card the sticky scroller */
  .qz-stage { position: relative; }
  .qz-scene { height: 100%; }
  .qz[data-view="result"] .qz-scene { flex: none; position: sticky; top: 66px; height: calc(100vh - 66px); }
  .qz-body { min-height: min(640px, calc(100vh - 66px)); }
}