/* Mötesutvärdering Kyrkheden. Grafisk profil Ahlstedt & Ahlstedt AB: mörk teal, petrol, turkos, beige och guld, typsnitt Arial.
   Mjuka former: rundat band överst, rundade paneler, piller-knappar. Ljust och mörkt läge via färgvariabler. */
:root{
  --font:Arial,Helvetica,sans-serif;
  --bg:#F6F3EC; --surface:#FFFFFF; --surface-2:#F4F1EA;
  --ink:#161615; --muted:#5E6664; --line:#E6E0D4; --tick:rgba(22,22,21,.2);
  --band:#1F4D50; --band-glow:#2C6669; --band-deep:#173E41; --band-ink:#FFFFFF; --band-dim:#90CCD8;
  --accent:#0D6973; --accent-hover:#0A5961; --on-accent:#FFFFFF; --accent-text:#0D6973;
  --gold:#D4AF37; --beige:#E1C699; --turq:#90CCD8;
  --track:#ECE6DA;
  --bubble:#1F4D50; --bubble-ink:#FFFFFF;
  --bad:#B3402E; --bad-soft:#F8E4DF; --good:#2E7D4F; --focus:#0D6973;
  --shadow:0 1px 2px rgba(22,22,21,.05),0 14px 34px -16px rgba(31,77,80,.25);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0E1819; --surface:#152325; --surface-2:#1B2C2E;
  --ink:#E7EFEE; --muted:#9BB0AF; --line:#25383A; --tick:rgba(231,239,238,.25);
  --band:#123B3E; --band-glow:#1C5054; --band-deep:#0C2A2C;
  --accent:#2F9DAB; --accent-hover:#3AAFBE; --on-accent:#061416; --accent-text:#90CCD8;
  --track:#22383A;
  --bubble:#90CCD8; --bubble-ink:#0E1819;
  --bad:#F08A78; --bad-soft:#3A201C; --good:#6CC48F; --focus:#90CCD8;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 14px 34px -18px rgba(0,0,0,.7);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
button,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tunn guldlinje överst som fylls när man svarar */
.progress{position:fixed;inset:0 0 auto;height:4px;z-index:20}
.progress i{display:block;height:100%;width:0;background:var(--gold);border-radius:0 4px 4px 0;transition:width .35s ease}

/* rubrikband med loggan */
.hero{background:radial-gradient(120% 100% at 50% 0%,var(--band-glow) 0%,var(--band) 55%,var(--band-deep) 100%);color:var(--band-ink);text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 34px) 16px 82px;border-radius:0 0 50% 50% / 0 0 44px 44px;box-shadow:0 3px 0 var(--gold)}
.logo{display:block;width:min(230px,62vw);height:auto;margin:0 auto}
.place{margin-top:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--band-dim);font-weight:700}

.page{max-width:580px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 36px max(16px,env(safe-area-inset-left,0px))}

/* hälsning */
.intro{text-align:center;margin-top:-58px;position:relative}
.avatar{display:block;width:108px;height:108px;margin:0 auto;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 4px var(--bg),0 0 0 6.5px var(--gold),0 14px 26px -10px rgba(0,0,0,.45)}
.intro h1{font-size:clamp(26px,7.2vw,33px);line-height:1.15;margin-top:22px;letter-spacing:-.015em;text-wrap:balance}
.lead{color:var(--muted);margin:10px auto 0;max-width:34ch;text-wrap:pretty}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:20px;min-height:46px;padding:0 0 0 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--accent-text);cursor:pointer}
.chip select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--ink);font-weight:700;font-size:15px;padding:12px 40px 12px 0;cursor:pointer}
.chip select:focus{outline:none}
.chip:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.chip .chev{position:absolute;right:16px;pointer-events:none;color:var(--muted)}

/* frågor */
form{margin-top:30px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:22px 20px 18px;margin-top:16px;transition:border-color .2s,box-shadow .2s}
.q-num{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-text)}
.q-text{font-size:20px;line-height:1.3;margin-top:6px;text-wrap:balance}
.q-err{display:none;color:var(--bad);font-size:14px;font-weight:700;margin-top:8px}
.panel.err{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.panel.err .q-err{display:block}

/* reglaget: gubben dras längs en bana med fem lägen */
.slider{--t:70px;--p:.5;position:relative;height:122px;margin-top:8px;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;cursor:pointer;outline:none}
.track{position:absolute;left:0;right:0;bottom:28px;height:14px;border-radius:999px;background:var(--track)}
.fill{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,var(--beige),var(--turq) 55%,var(--accent));opacity:0;
  clip-path:inset(0 calc((1 - var(--p)) * (100% - var(--t)) + var(--t) / 2) 0 0 round 999px);transition:opacity .25s}
.slider.set .fill{opacity:1}
.ticks{position:absolute;left:calc(var(--t) / 2);right:calc(var(--t) / 2);bottom:28px;height:14px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.ticks i{width:6px;height:6px;margin:0 -3px;border-radius:50%;background:var(--tick)}
.thumb{position:absolute;bottom:0;left:calc(var(--p) * (100% - var(--t)));width:var(--t);height:var(--t);touch-action:none;cursor:grab;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.2));transition:transform .18s ease}
.thumb::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 3px var(--focus);opacity:0;pointer-events:none}
.slider:focus-visible .thumb::after{opacity:1}
.dragging .thumb{transform:scale(1.1);cursor:grabbing}
.face,.face svg{display:block;width:100%;height:100%}
.slider:not(.set) .face{filter:grayscale(1);opacity:.72}
.hint .thumb{animation:nudge 2.8s ease-in-out 1.2s infinite}
@keyframes nudge{0%,62%,100%{translate:0}70%{translate:-9px}79%{translate:9px}88%{translate:-4px}95%{translate:2px}}

.bubble{position:absolute;top:0;left:0;white-space:nowrap;background:var(--bubble);color:var(--bubble-ink);font-size:14px;font-weight:700;line-height:1;
  padding:9px 14px;border-radius:999px;pointer-events:none}
.bubble::after{content:"";position:absolute;top:100%;left:var(--tail,50%);margin-left:-6px;border:6px solid transparent;border-top-color:var(--bubble)}
.slider:not(.set) .bubble{background:var(--surface-2);color:var(--muted)}
.slider:not(.set) .bubble::after{border-top-color:var(--surface-2)}
.ends{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted);margin-top:6px}

/* fritext */
.words h2{font-size:20px;line-height:1.3}
.hint{color:var(--muted);font-size:14px;margin-top:6px}
.lbl{display:block;font-weight:700;margin:20px 0 8px}
textarea{display:block;width:100%;min-height:100px;resize:vertical;border:1px solid var(--line);background:var(--surface-2);border-radius:16px;
  padding:12px 14px;font-size:16px;line-height:1.45;transition:border-color .15s,background-color .15s,box-shadow .15s}
textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea::placeholder{color:var(--muted);opacity:.8}
.cnt{text-align:right;font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}

/* skicka */
.ts{display:flex;justify-content:center;margin-top:18px}
.ts:empty{display:none}
.send{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:22px;border:0;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:18px;font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 75%,transparent);transition:transform .12s,background-color .15s}
.send:hover{background:var(--accent-hover)}
.send:active{transform:scale(.98)}
.send:disabled{opacity:.55;cursor:not-allowed;transform:none}
.send:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.msg{color:var(--bad);font-weight:700;font-size:14px;text-align:center;margin-top:12px}
.msg:empty{display:none}
.fine{color:var(--muted);font-size:12.5px;text-align:center;max-width:44ch;margin:14px auto 0}

/* tack */
.thanks{text-align:center;padding:34px 22px 30px;margin-top:30px;outline:none}
.big-face{width:172px;height:172px;margin:0 auto 18px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.thanks h2{font-size:32px;line-height:1.15;letter-spacing:-.01em}
.thanks p{color:var(--muted);margin:10px auto 0;max-width:36ch}
.thanks .sign{color:var(--accent-text);font-weight:700;margin-top:14px}

.foot{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 30px)}

/* konfetti i profilfärgerna */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.confetti i{position:absolute;top:-18px;width:9px;height:14px;border-radius:2px;animation:fall var(--d) cubic-bezier(.25,.6,.45,1) var(--w) forwards}
@keyframes fall{to{transform:translate(var(--x),110vh) rotate(var(--r))}}

@media (min-width:600px){
  .panel{padding:26px 28px 22px}
  .q-text{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}