/* PIÑA showroom: Skala v2 layer 1. Load after samtykke.css. */
.sk,.sk *,.sk *::before,.sk *::after{box-sizing:border-box}
.sk{position:fixed;z-index:1000;pointer-events:none;font-family:var(--cc-font);color:var(--cc-body);font-size:1rem;line-height:1.45;-webkit-font-smoothing:antialiased;text-align:left}
.sk [hidden]{display:none!important}
.sk__panel{pointer-events:auto;background:var(--cc-white);border:1px solid rgba(var(--cc-ink-rgb),.07);
  box-shadow:0 1px 2px rgba(var(--cc-ink-rgb),.04),0 12px 32px -14px rgba(var(--cc-ink-rgb),.22)}

/* ---------- desktop card: small, at the edge ---------- */
.sk--card{right:24px;bottom:24px;width:min(25.5rem,calc(100vw - 48px))}
.sk--card.sk--left{right:auto;left:24px}   /* data-position="left": for pages whose hero copy sits bottom-right (PL-042) */
.sk--card .sk__panel{border-radius:18px;max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain}
.sk__content{padding:16px 20px 6px}
.sk__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:28px}
.sk__title{margin:0;font-family:var(--cc-display);font-weight:500;font-size:1.125rem;line-height:1.3;letter-spacing:-.01em;color:var(--cc-ink)}
.sk__saved{margin:2px 0 0;font-size:.875rem;color:var(--cc-body)}
.sk__x{margin:-8px -10px 0 0;border-color:transparent;background:none}

/* the equal pair */
.sk__pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.sk__end{width:100%;min-height:48px;padding:10px 14px;font-size:.9375rem;border-width:1.5px}
/* after the visitor moves the dial, the matching button gets a quiet ring. Never on first sight. */
.sk__end--lit{box-shadow:0 0 0 2px var(--cc-white),0 0 0 3.5px var(--cc-ink)}

/* ---------- the dial ---------- */
.sk-dial{--sk-p:0;--kw:44px;position:relative;height:70px;margin-top:8px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.sk-dial__rail{position:absolute;left:calc(var(--kw) / 2);right:calc(var(--kw) / 2);top:20px;height:4px}
.sk-dial__groove{position:absolute;inset:0;border-radius:999px;background:var(--cc-line)}
.sk-dial__fill{position:absolute;inset:0;border-radius:999px;background:var(--cc-ink);transform-origin:left center;transform:scaleX(var(--sk-p));
  transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.sk-dial__rail i{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cc-white);box-shadow:0 0 0 1.5px rgba(var(--cc-ink-rgb),.28)}
/* knob: a 44px hit area around a 24px cap; it moves with left (the rail is in the same box), no overshoot */
.sk-dial__knob{position:absolute;top:0;left:calc(var(--sk-p) * (100% - var(--kw)));width:var(--kw);height:var(--kw);border-radius:50%;outline:none;cursor:grab;
  transition:left .22s cubic-bezier(.2,.7,.2,1);z-index:1}
.sk-dial__cap{position:absolute;left:10px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--cc-white);
  box-shadow:0 0 0 1.5px var(--cc-ink),0 2px 6px -1px rgba(var(--cc-ink-rgb),.25);transition:transform .12s ease}
.sk-dial__cap::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cc-red)}
.sk-dial.is-drag .sk-dial__knob,.sk-dial.is-drag .sk-dial__fill{transition:none}
.sk-dial.is-drag .sk-dial__knob{cursor:grabbing}
.sk-dial.is-drag .sk-dial__cap{transform:scale(1.08)}
.sk-dial__knob:focus-visible .sk-dial__cap{box-shadow:0 0 0 1.5px var(--cc-ink),0 0 0 4px var(--cc-white),0 0 0 6.5px var(--cc-ink)}
/* stop names: a 44px tall click target each; only the colour changes (no weight/underline -> nothing shifts) */
.sk-dial__stops{position:absolute;left:0;right:0;top:26px;height:44px}
.sk-dial__stop{appearance:none;-webkit-appearance:none;position:absolute;top:0;height:44px;padding:0 2px;border:0;background:none;
  font:inherit;font-size:.875rem;font-weight:600;color:color-mix(in srgb,var(--cc-body) 72%,transparent);cursor:pointer;white-space:nowrap;min-width:44px;transition:color .15s ease}
.sk-dial__stop:nth-child(1){left:0}
.sk-dial__stop:nth-child(2){left:50%;transform:translateX(-50%)}
.sk-dial__stop:nth-child(3){right:0;text-align:right}
.sk-dial__stop.is-on,.sk-dial__stop:hover{color:var(--cc-ink)}

/* ---------- the one sentence (stacked: constant height) ---------- */
.sk__say{display:grid;margin-top:2px}
/* the old line goes at once, the new one fades in: never two sentences on top of each other */
.sk__say>p{grid-area:1/1;margin:0;font-size:1rem;color:var(--cc-ink);visibility:hidden;opacity:0;transition:none;text-wrap:pretty}
.sk__say>p.is-on{visibility:visible;opacity:1;transition:opacity .14s ease}

/* ---------- details (one tap) ---------- */
.sk__more{margin-top:10px;padding-top:8px;border-top:1px solid var(--cc-line)}
.sk__rows{display:grid}
.sk__rows>dl{grid-area:1/1;margin:0;visibility:hidden}
.sk__rows>dl.is-on{visibility:visible}
.sk__rows dl>div{display:grid;grid-template-columns:6.5rem 1fr;gap:10px;padding:3px 0}
.sk__rows dt{font-weight:600;font-size:.875rem;color:var(--cc-ink)}
.sk__rows dd{margin:0;font-size:.875rem;color:var(--cc-body);text-wrap:pretty}
.sk__policy{font-size:.875rem;color:var(--cc-body);min-height:44px;display:inline-flex;align-items:center}
a.sk__policy{color:var(--cc-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- foot ---------- */
.sk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:4px}
.sk__foot .cc__link{font-size:.9375rem;font-weight:500;text-decoration-color:rgba(var(--cc-ink-rgb),.35)}
.sk__toggle svg{width:12px;height:12px;transition:transform .15s ease}
.sk__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sk__save{margin-left:auto;min-height:44px;padding:8px 16px;font-size:.9375rem}
.sk button:focus-visible,.sk a:focus-visible{outline:3px solid var(--cc-ink);outline-offset:2px;border-radius:999px}
.sk .sk-dial__stop:focus-visible{border-radius:6px}
.sk__done{padding:16px 20px;font-size:1rem}

/* ---------- phone: a compact bottom sheet ---------- */
.sk--sheet{left:0;right:0;bottom:0}
.sk--sheet .sk__panel{border-radius:18px 18px 0 0;border-bottom:0;max-height:85vh;max-height:85dvh;overflow:auto;overscroll-behavior:contain;
  padding:8px 0 env(safe-area-inset-bottom)}
.sk--sheet .cc__grip{margin:0 auto 4px;width:36px}
.sk--sheet .sk__content{padding:6px 16px 4px}
.sk--sheet .sk__pair{gap:8px;margin-top:10px}
.sk--sheet .sk__end{min-height:48px;padding-inline:8px;transition:none}
.sk--sheet .cc__btn:hover{background:var(--cc-white);color:var(--cc-ink)}
.sk--sheet .cc__btn:active{background:var(--cc-ink);color:var(--cc-white)}
.sk--sheet .sk__done{padding:8px 16px 12px}

/* ---------- entrance / exit (opt-in, short) ---------- */
.sk--anim .sk__panel{opacity:0;transform:translateY(10px);transition:opacity .35s var(--cc-ease),transform .4s var(--cc-ease)}
.sk--anim.sk--sheet .sk__panel{opacity:1;transform:translateY(105%);transition:transform .4s var(--cc-ease)}
.sk--anim.sk--in .sk__panel{opacity:1;transform:none}
.sk--anim.sk--out .sk__panel{opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .3s ease}
.sk--anim.sk--sheet.sk--out .sk__panel{opacity:1;transform:translateY(105%)}

/* ---------- calm static equivalent ---------- */
html[data-a11y-motion="off"] .sk *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion: reduce){
  .sk *{transition:none!important;animation:none!important}
}
/* Lesemodus: wider card, label rows stack */
html[data-a11y="on"] .sk--card{width:min(32rem,calc(100vw - 48px))}
html[data-a11y="on"] .sk__rows dl>div{grid-template-columns:1fr;gap:0}
html[data-a11y="on"] .sk-dial{height:78px}
html[data-a11y="on"] .sk-dial__stops{height:52px}
html[data-a11y="on"] .sk-dial__stop{height:52px}
@media (forced-colors: active){
  .sk__panel{border:2px solid CanvasText}
  .sk-dial__groove,.sk-dial__cap{border:2px solid CanvasText}
  .sk-dial__fill{background:Highlight}
}
@media print{.sk{display:none!important}}