/* The questionnaire on Get started (js/quest.js, docs/spec/07-questionnaire-redesign.md).
   A warm paper panel over the golden evening. Along its top, a path of stepping stones with the dove on
   the current one; the evening deepens into dusk as the visitor goes on, and the stars come out when
   they send. Choices use the same paper slips as the home page, single answers are cards with a small
   sun that fills with gold, and anything written goes on lined notepaper. */

.qf { width: min(720px, 100%); position: relative; z-index: 2; }
.qf-panel {
  --qbg: var(--tint);
  position: relative; border-radius: 30px; padding: clamp(20px, 3vw, 40px) clamp(20px, 3.2vw, 44px) clamp(22px, 3vw, 36px);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(245, 185, 33, .16), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(214, 120, 104, .1), transparent 60%),
    var(--qbg);
  border: 1px solid var(--tint-line); color: var(--t);
  box-shadow: 0 40px 80px -48px rgba(60, 20, 30, .65), 0 2px 0 rgba(255, 255, 255, .5) inset;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: qf-panel-in .8s var(--ease) both;
}
@keyframes qf-panel-in { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
.is-dark .qf-panel { --qbg: rgba(30, 24, 40, .9); --t: #F7F3E8; --t2: #CFC6B4; --h: #FFD9A8; --a: #FFD9A8; --tint-line: rgba(255, 217, 168, .22); --btn: #FFD9A8; --btnfg: #201D17; }

/* ---------- the path of stepping stones ---------- */
.qf-path { position: relative; width: min(100%, 460px); aspect-ratio: 700 / 64; margin: 0 0 clamp(14px, 2.4vh, 24px); }
.qf-path svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qf-trail { fill: none; stroke: var(--t2); stroke-opacity: .32; stroke-width: 2.4; stroke-dasharray: 2 9; stroke-linecap: round; }
.qf-trail-done { fill: none; stroke: #E7AC29; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--ease); }
.qf-stone { fill: var(--qbg); stroke: var(--t2); stroke-opacity: .4; stroke-width: 2; transition: fill .5s ease, stroke .5s ease, r .4s var(--ease); }
.qf-stone.is-done { fill: #F5B921; stroke: #B5820F; stroke-opacity: 1; }
.qf-stone.is-here { fill: #FFE39A; stroke: #B5820F; stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(245, 185, 33, .9)); }
.qf-stone-end { stroke-dasharray: 3 3; }
.qf-stone-end.is-done { stroke-dasharray: none; }
.qf-dove { position: absolute; left: 6%; top: 60%; width: clamp(40px, 5vw, 56px); transform: translate(-46%, -88%); transition: left .9s cubic-bezier(.5, 0, .3, 1), top .9s cubic-bezier(.5, 0, .3, 1); pointer-events: none; }
.qf-dove img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(80, 40, 10, .25)); }
.qf-dove.hop img { animation: qf-hop .9s cubic-bezier(.4, 0, .3, 1); }
@keyframes qf-hop { 0% { transform: none; } 40% { transform: translateY(-26px) rotate(-10deg) scale(1.06); } 75% { transform: translateY(2px) rotate(3deg); } 100% { transform: none; } }
.qf-dove.away img { animation: qf-away 2.4s cubic-bezier(.45, 0, .2, 1) .2s forwards; }
@keyframes qf-away {
  0% { transform: none; opacity: 1; }
  20% { transform: translate(-6px, 6px) rotate(6deg); }
  100% { transform: translate(min(60vw, 900px), -60vh) rotate(-18deg) scale(1.6); opacity: 0; }
}

/* ---------- screens ---------- */
.qf-screen { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 30px); }
.qf-h { color: var(--h); outline: none; max-width: 12em; animation: qf-rise .8s var(--ease) both; }
.qf-h mark.hl { background-size: 0% 100%; animation: qf-draw .9s var(--ease) .35s forwards; }
@keyframes qf-draw { to { background-size: 100% 100%; } }
.qf-line-t { font-size: clamp(16px, 1.2vw, 19px); color: var(--t2); margin-top: -10px; animation: qf-rise .8s var(--ease) .08s both; }
@keyframes qf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.qf-field { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; animation: qf-rise .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
legend.qf-q { margin-bottom: 14px; float: none; }
.qf-field > .qf-hint { margin-top: -2px; }
.qf-q { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.2; letter-spacing: -.015em; color: var(--t); padding: 0; text-wrap: pretty; }
.qf-hint { font-size: 15px; color: var(--t2); margin-top: -6px; }
.qf-dyn[hidden] { display: none; }
.qf-opts { display: flex; flex-direction: column; gap: 12px; }
.qf-other[hidden] { display: none; }
.qf-other { max-width: 460px; }
.qf-other-in { font-size: clamp(18px, 1.4vw, 21px); min-height: 46px; }
.qf-other-in::placeholder { color: var(--t2); opacity: .75; font-style: italic; }
.qf-reveal { animation: qf-open .6s var(--ease) both; }
@keyframes qf-open { from { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20px 0); } }

/* ---------- paper slips (several, or one) ---------- */
.qf-slips { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.qf-slip { position: relative; font-size: clamp(16px, 1.2vw, 19px); padding: 9px 18px 10px 14px; gap: 10px; transform: rotate(var(--rot, 0deg)); user-select: none; }
.qf-slip:has(input:checked) { background: #FFE39A; color: #201D17; border-color: rgba(125, 90, 11, .5); box-shadow: 0 0 0 4px rgba(245, 185, 33, .28), 0 12px 26px -14px rgba(122, 64, 10, .6); transform: rotate(0deg) translateY(-2px); }
.is-dark .qf-slip:has(input:checked) { background: #4A3A14; color: #FFE7A8; border-color: rgba(245, 185, 33, .6); }
.qf-slip:has(input:focus-visible), .qf-choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cream), 0 0 0 7px var(--cream); }
/* A small round tick that pops in when the slip is picked. */
.qf-tick { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .45; transition: opacity .25s ease, background-color .25s ease, border-color .25s ease; }
.qf-tick::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #201D17; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.qf-slip:has(input:checked) .qf-tick { opacity: 1; background: #F5B921; border-color: #B5820F; }
.qf-slip:has(input:checked) .qf-tick::after { transform: rotate(45deg) scale(1); }
.qf-slip input[type="radio"] + .qf-tick { border-radius: 50%; }

/* ---------- one-choice cards, each with a small sun ---------- */
.qf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.qf-choice {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-radius: 18px; cursor: pointer;
  background: rgba(255, 255, 255, .5); border: 1px solid var(--tint-line); color: var(--t);
  font-size: 16px; line-height: 1.3; transition: background-color .25s ease, border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.is-dark .qf-choice { background: rgba(255, 255, 255, .05); }
.qf-choice:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(60, 20, 30, .7); border-color: rgba(181, 130, 15, .5); }
.qf-choice:has(input:checked) { background: #FFF1C9; border-color: #D9A21C; box-shadow: 0 0 0 3px rgba(245, 185, 33, .3), 0 12px 24px -18px rgba(122, 64, 10, .7); color: #2A0F18; }
.is-dark .qf-choice:has(input:checked) { background: #3E3116; color: #FFE7A8; }
.qf-sun { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--h); opacity: .55; transition: all .35s var(--ease); }
.qf-sun::before {   /* the rays, hidden until the sun is chosen */
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(245, 185, 33, .95) 0 7deg, transparent 7deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56% 100%); mask: radial-gradient(circle, transparent 0 55%, #000 56% 100%);
  transform: scale(.4) rotate(-30deg); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease;
}
.qf-choice:has(input:checked) .qf-sun { opacity: 1; border-color: #B5820F; background: radial-gradient(circle at 35% 35%, #FFE39A, #F5B921 60%, #D9961A); }
.qf-choice:has(input:checked) .qf-sun::before { opacity: 1; transform: scale(1) rotate(0deg); }

/* ---------- lined notepaper ---------- */
.qf-note {
  width: 100%; min-height: 104px; resize: vertical; box-sizing: border-box;
  font-family: var(--serif); font-weight: 300; font-size: 19px; line-height: 32px; letter-spacing: -.01em; color: var(--t);
  padding: 4px 16px 6px; border-radius: 16px; border: 1px solid var(--tint-line); caret-color: #B5820F;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(90, 22, 48, .13) 31px 32px) local, rgba(255, 252, 244, .7);
  background-position: 0 4px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.is-dark .qf-note { background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 217, 168, .12) 31px 32px) local, rgba(255, 255, 255, .04); }
.qf-note::placeholder { color: var(--t2); opacity: .7; font-style: italic; }
.qf-note:focus { outline: none; border-color: #D9A21C; box-shadow: 0 0 0 4px rgba(245, 185, 33, .25); }

/* ---------- the calculator, as on the home page ---------- */
.qf-calc .calc-sentence { font-size: clamp(21px, 1.8vw, 28px); color: var(--t); }
.qf-calc .step-btn, .qf-calc .num { color: var(--t); }
.qf-hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; color: var(--h); }
.qf-hours-n { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 7vw, 108px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, transparent 0 58%, var(--hl-bg) 58% 90%, transparent 90%) no-repeat; padding: 0 .06em; }
.qf-hours-u { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2vw, 32px); letter-spacing: -.02em; }

/* ---------- where to reply ---------- */
.qf-line { animation: qf-rise .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 100ms); gap: 2px; }
.qf-label { font-size: 15px; color: var(--t2); }
.qf-input {
  width: 100%; box-sizing: border-box; min-height: 52px; border: 0; border-bottom: 2px solid var(--tint-line); background: transparent; color: var(--t);
  font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.7vw, 26px); letter-spacing: -.015em; padding: 6px 2px; caret-color: #B5820F;
  background-image: linear-gradient(#F5B921, #F5B921); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
  transition: background-size .45s var(--ease);
}
.qf-input:focus { outline: none; background-size: 100% 2px; }
.qf-input[aria-invalid="true"] { border-bottom-color: #B3261E; }
.qf-err { font-size: 15px; color: #8C1D18; margin-top: 4px; }
.is-dark .qf-err { color: #FFB4AB; }
.qf-err[hidden] { display: none; }
/* The spam trap: off screen, out of reach, never seen (js/quest.js). */
.qf-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.qf-send[disabled] { cursor: progress; opacity: .75; }
.qf-priv { margin-top: 2px; }

/* ---------- the way forward ---------- */
.qf-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; animation: qf-rise .75s var(--ease) .45s both; }
.qf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.qf-next, .qf-send, .qf-send-now { gap: 10px; }
.qf-arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover .qf-arrow { transform: translateX(3px); }
.qf-sofar { padding-left: 0; color: var(--t2); font-size: 15px; }
.qf-sofar:hover { color: var(--t); }
.qf .btn-line { color: var(--t); border-color: var(--t); }
.qf .btn-line:hover { background: var(--t); color: var(--qbg); }
/* After "Making a start": a warm note that says this is plenty, with the choice to send or go on. */
.qf-checkpoint {
  position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; box-sizing: border-box;
  padding: 18px 20px 18px 46px; border-radius: 20px; background: #FFF1C9; color: #2A0F18; border: 1px solid rgba(181, 130, 15, .45);
  box-shadow: 0 18px 36px -26px rgba(122, 64, 10, .8);
}
.qf-checkpoint::before { content: ""; position: absolute; left: 18px; top: 25px; width: 12px; height: 12px; border-radius: 50%; background: #F5B921; box-shadow: 0 0 0 5px rgba(245, 185, 33, .3); animation: qf-glow 2.4s ease-in-out infinite; }
@keyframes qf-glow { 50% { box-shadow: 0 0 0 9px rgba(245, 185, 33, .12); } }
.qf-check-t { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -.015em; }
.qf-checkpoint .btn-line { color: #2A0F18; border-color: #2A0F18; }
.qf-checkpoint .btn-line:hover { background: #2A0F18; color: #FFF1C9; }
.is-dark .qf-checkpoint { background: #3A2F18; color: #FFF1D6; border-color: rgba(245, 185, 33, .45); }
.is-dark .qf-checkpoint .btn-line { color: #FFF1D6; border-color: #FFF1D6; }
.qf-thanks .qf-h { max-width: none; }
.qf-ticket { align-self: flex-start; animation-delay: .6s; }

/* ---------- the evening deepens behind it ---------- */
.qf-dusk { position: absolute; inset: 0; pointer-events: none; opacity: var(--dusk, 0); transition: opacity 1.6s ease;
  background: linear-gradient(180deg, rgba(34, 24, 66, .95) 0%, rgba(70, 38, 86, .6) 45%, rgba(70, 38, 86, .15) 75%, transparent); }
.is-dark .qf-dusk { opacity: calc(var(--dusk, 0) * .5); }
.qf-stars { position: absolute; inset: 0 0 45% 0; opacity: var(--qstars, 0); transition: opacity 2.4s ease;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 60%, transparent 70%), radial-gradient(1.2px 1.2px at 22% 48%, #fff 60%, transparent 70%),
    radial-gradient(2px 2px at 34% 12%, #FFE7A8 60%, transparent 70%), radial-gradient(1.2px 1.2px at 46% 36%, #fff 60%, transparent 70%),
    radial-gradient(1.6px 1.6px at 58% 18%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 66% 44%, #fff 60%, transparent 70%),
    radial-gradient(2px 2px at 74% 10%, #FFE7A8 60%, transparent 70%), radial-gradient(1.2px 1.2px at 83% 30%, #fff 60%, transparent 70%),
    radial-gradient(1.6px 1.6px at 91% 16%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 52% 6%, #fff 60%, transparent 70%),
    radial-gradient(2.4px 2.4px at 62% 28%, #FFE7A8 55%, transparent 70%), radial-gradient(1.8px 1.8px at 80% 40%, #fff 60%, transparent 70%),
    radial-gradient(2.2px 2.2px at 88% 6%, #fff 55%, transparent 70%), radial-gradient(1.4px 1.4px at 70% 54%, #fff 60%, transparent 70%),
    radial-gradient(2.6px 2.6px at 95% 30%, #FFE7A8 55%, transparent 70%), radial-gradient(1.4px 1.4px at 56% 48%, #fff 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 40% 22%, #fff 60%, transparent 70%), radial-gradient(1.2px 1.2px at 28% 8%, #fff 60%, transparent 70%);
  filter: drop-shadow(0 0 2px rgba(255, 240, 200, .9));
  animation: qf-twinkle 5s ease-in-out infinite alternate; }
@keyframes qf-twinkle { to { filter: drop-shadow(0 0 4px rgba(255, 240, 200, 1)) brightness(1.4); } }
.qf-on .qf-dusk { transition: opacity 1.6s ease; }

/* ---------- phones ---------- */
@media (max-width: 759px) {
  .qf-panel { border-radius: 24px; padding: 18px 16px 22px; }
  .qf-path { width: 100%; }
  .qf-slip { font-size: 15px; padding: 8px 14px 9px 11px; }
  .qf-choice { min-height: 50px; padding: 10px 14px; font-size: 15px; }
  .qf-note { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .qf *, .qf-panel, .qf-dusk, .qf-stars { animation: none !important; transition: none !important; }
  .qf-h mark.hl { background-size: 100% 100%; }
}