/*
 * Demoen med Kai (src/demo-sider.ts) oven på butik.css: formularens flueben og samtalen med Kai-figuren, tælleren og
 * Læg på-knappen fra siden bag linket (src/samtaleside.ts), her i sitets farver, lyst og mørkt tema.
 */
.demo h1 { overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.midt { text-align: center; }
.besked.fejl { background: var(--fejl-bg); color: var(--fejl); }
button.knap:disabled { opacity: .6; cursor: default; filter: none; }

/* Samtykket før samtalen */
.samtykke p { margin-bottom: 1rem; }
.flueben label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; font-weight: 400; cursor: pointer; }
/* Et rigtigt flueben, ikke et tekstfelt: butik.css giver alle input i .felt feltets udseende (appearance: none). */
.felt.flueben input[type="checkbox"] {
  appearance: auto; -webkit-appearance: checkbox;
  display: inline-block; width: 1.35rem; height: 1.35rem; min-height: 0;
  margin: .2rem 0 0; padding: 0; border: 0; border-radius: 0; background: none;
  accent-color: var(--kirsebaer); cursor: pointer;
}
.flueben input:focus-visible { outline: 3px solid var(--honning); outline-offset: 2px; }
.flueben.har-fejl label { color: var(--fejl); }

/* Samtalen */
[data-visning="forbinder"] h1, [data-visning="i_gang"] h1 { text-align: center; }
.tid { margin: 0 0 .2rem; text-align: center; font-size: 1.5rem; color: var(--daempet); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.tilstand { margin: .2rem 0 .6rem; text-align: center; font-size: 1.45rem; font-weight: 700; }
.kai { position: relative; width: 12rem; height: 12rem; margin: .3rem auto; display: grid; place-items: center; }
.kai-glorie, .kai-cirkel { grid-area: 1 / 1; position: relative; width: 7.5rem; height: 7.5rem; border-radius: 50%; }
.kai-glorie { background: var(--ok); opacity: .22; transform: scale(calc(1.12 + var(--niveau, 0) * .48)); will-change: transform; }
.kai-cirkel { z-index: 1; display: grid; place-items: center; background: var(--ok); color: var(--papir); font: 400 3.6rem/1 var(--font-display); }
.kai[data-mode="taler"] .kai-glorie { opacity: .3; }
.forbundet .kai-cirkel { animation: aande 4.5s ease-in-out infinite; }
.venter .kai-cirkel, .venter .kai-glorie { background: var(--kirsebaer); }
.venter .kai-glorie { animation: ring 2s ease-out infinite; }
@keyframes aande { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.03); } }
@keyframes ring { 0% { transform: scale(1); opacity: .4; } 100% { transform: scale(1.55); opacity: 0; } }
.laeg-paa {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  width: 100%; min-height: 4.2rem; margin: 1.1rem 0 .3rem;
  border: 0; border-radius: 999px;
  background: var(--fejl); color: var(--knap-tekst);
  font: 700 1.35rem/1.2 var(--font-tekst);
  cursor: pointer; touch-action: manipulation;
}
.laeg-paa:hover { filter: brightness(1.08); }
.laeg-paa:focus-visible { outline: 3px solid var(--honning); outline-offset: 3px; }
.laeg-paa:disabled { opacity: .6; cursor: default; }
.laeg-paa svg { width: 2rem; height: 2rem; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .forbundet .kai-cirkel, .venter .kai-glorie { animation: none; }
  .kai .kai-glorie, .kai[data-mode] .kai-glorie { transform: scale(1.3); opacity: calc(.1 + var(--niveau, 0) * .5); }
}