/* Presenter · webbsidan. Fakta: I lådan (eftertexterna), Frågor och svar, Kom igång, Om och foten. */

/* ---------- 08 · I lådan: eftertexter som andas ---------- */
.pres-sida .ladan { padding: calc(var(--head) + 10vh) var(--gut) 14vh; }
.pres-sida .ladan-rubrik { font-size: clamp(56px, 9vw, 180px); margin: 14px 0 clamp(36px, 7vh, 80px); }
.pres-sida .ladan-rubrik em { color: var(--acc); }
.pres-sida .eftertext > div {
  display: grid; grid-template-columns: minmax(96px, 3fr) minmax(0, 9fr); gap: var(--gap);
  padding: clamp(14px, 2.2vh, 26px) 0;
  border-top: 2px solid currentColor;
  align-items: baseline;
  /* Raden är bredast mitt i skärmen. */
  --ew: calc(56 + (var(--wd-max) - 56) * (1 - max(var(--ps-p) * 2 - 1, 1 - var(--ps-p) * 2)));
}
.pres-sida .eftertext > div:last-child { border-bottom: 2px solid currentColor; }
.pres-sida .eftertext dt { text-align: right; padding-top: 0.5em; opacity: 0.75; }
.pres-sida .et-stor {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 4.15vw, 84px); line-height: 0.92;
  text-transform: var(--case); letter-spacing: var(--track);
  font-variation-settings: "wdth" var(--ew), "wght" var(--wg-max), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  white-space: nowrap;
}
.pres-sida .et-liten { display: block; margin-top: 8px; max-width: 32em; opacity: 0.82; }
.pres-sida .tal { color: var(--acc); }
/* Talen räknas upp med en CSS-räknare. Det riktiga talet står kvar för skärmläsare. */
.pres-sida.js:not(.rm) .tal { --ps-n: calc(var(--to) * clamp(0, (var(--ps-p) - 0.02) * 5, 1)); counter-reset: ps-tal var(--ps-n); }
.pres-sida.js:not(.rm) .tal .tal-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pres-sida.js:not(.rm) .tal::after { content: counter(ps-tal); font-variant-numeric: tabular-nums; }

/* ---------- 09 · Frågor och svar ---------- */
.pres-sida .fragor { padding: calc(var(--head) + 9vh) var(--gut) 12vh; }
.pres-sida .fragor-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(24px, 4vw, 80px); align-items: start; }
.pres-sida .fragor-inner > .etikett { grid-column: 1 / -1; margin-bottom: 14px; }
.pres-sida .fragor-rubrik { grid-column: 1; font-size: clamp(56px, 8vw, 160px); position: sticky; top: calc(var(--head) + 5vh); }
.pres-sida .fragor-rubrik em { display: block; color: var(--acc); padding-top: 0.06em; }
.pres-sida .fragor-lista { grid-column: 2; }
.pres-sida .fraga { border-top: 2px solid currentColor; }
.pres-sida .fraga:last-child { border-bottom: 2px solid currentColor; }
.pres-sida .fraga summary {
  list-style: none;
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: clamp(16px, 2.6vh, 28px) 0;
  cursor: pointer;
  transition: --ps-fq .5s var(--ease);
}
.pres-sida .fraga summary::-webkit-details-marker { display: none; }
.pres-sida .fraga summary:focus-visible { outline-offset: -4px; }
.pres-sida .fraga summary:hover, .pres-sida .fraga summary:focus-visible { --ps-fq: 0.55; }
.pres-sida .fraga[open] summary { --ps-fq: 1; }
.pres-sida .fr-nr { opacity: 0.7; }
.pres-sida .fr-text {
  font-family: var(--display); font-size: clamp(22px, 2.2vw, 42px); line-height: 1.04;
  letter-spacing: var(--track);
  font-variation-settings: "wdth" calc(84 + (var(--wd-max) - 84) * var(--ps-fq)), "wght" calc(560 + (var(--wg-max) - 560) * var(--ps-fq)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}
/* En liten Enter-tangent: Enter öppnar svaret, och tangenten är nedtryckt medan det är öppet. */
.pres-sida .fr-kap {
  display: grid; place-items: center end; min-width: 46px; height: 32px; padding: 0 8px;
  border: 1.5px solid currentColor; border-radius: 3px;
  font-family: var(--mono); font-size: 16px; font-variation-settings: "wght" 600;
  box-shadow: 0 4px 0 currentColor; transform: translateY(-3px);
  transition: transform .1s ease-out, box-shadow .1s ease-out, background-color .3s, color .3s;
}
.pres-sida .fraga[open] .fr-kap { transform: translateY(1px); box-shadow: 0 0 0 currentColor; background: var(--fg); color: var(--bg); }
.pres-sida .fr-svar { padding: 0 0 clamp(18px, 3vh, 32px) calc(2.6em + 16px); }
.pres-sida .fr-svar p { max-width: 36em; font-size: clamp(17px, 0.5vw + 12px, 22px); line-height: 1.45; }
.pres-sida .fr-svar p + p { margin-top: 0.7em; }
.pres-sida .fr-svar code { font-family: var(--mono); font-size: 0.86em; }
/* Svaret fäller ut sig där webbläsaren kan animera höjden. */
.pres-sida { interpolate-size: allow-keywords; }
.pres-sida .fraga::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.pres-sida .fraga[open]::details-content { block-size: auto; }

/* ---------- 10 · Kom igång ---------- */
.pres-sida .start { padding: calc(var(--head) + 10vh) var(--gut) 14vh; }
.pres-sida .start-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.pres-sida .start-rubrik { font-size: clamp(64px, 10vw, 200px); margin: 14px 0 28px; }
.pres-sida .start-rubrik em { display: block; color: var(--acc); padding-top: 0.14em; }
.pres-sida .start-lead { max-width: 24em; font-size: clamp(19px, 0.6vw + 13px, 26px); line-height: 1.38; }
.pres-sida .start-steg li { display: grid; grid-template-columns: clamp(56px, 6vw, 110px) minmax(0, 1fr); gap: var(--gap); padding: clamp(18px, 3vh, 34px) 0; border-top: 2px solid transparent; position: relative; }
.pres-sida .start-steg li:last-child { border-bottom: 2px solid currentColor; }
/* Stegen kommer ett i taget när du rullar (--ps-p per steg, motorer.css): linjen ovanför ritas, numret
   går från tunt till fett och texten glider upp. */
.pres-sida .start-steg li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: currentColor; transform-origin: left; transform: scaleX(var(--ps-p));
}
.pres-sida .start-steg li > div { opacity: calc(0.25 + 0.75 * var(--ps-p)); translate: 0 calc((1 - var(--ps-p)) * 16px); }
.pres-sida .start-nr {
  font-family: var(--display); color: var(--acc);
  font-size: clamp(56px, 6vw, 112px); line-height: 0.78;
  font-variation-settings: "wdth" calc(50 + 10 * var(--ps-p)), "wght" calc(200 + 660 * var(--ps-p)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}
.pres-sida .start-steg h3 {
  font-family: var(--display); font-size: clamp(24px, 2.2vw, 40px); line-height: 1; margin-bottom: 10px;
  font-variation-settings: "wdth" 104, "wght" 760, "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  text-transform: var(--case); letter-spacing: var(--track);
}
.pres-sida .start-steg p { max-width: 30em; opacity: 0.88; }
.pres-sida .kod {
  margin: 20px 0 0; padding: 20px 22px;
  background: var(--acc); color: var(--bg);
  font-family: var(--mono); font-size: clamp(14px, 0.3vw + 11px, 16px); line-height: 1.7;
  overflow-x: auto; white-space: pre;
}
.pres-sida .kod-kommentar { opacity: 0.6; }

/* ---------- 11 · Om ---------- */
.pres-sida .om { padding: calc(var(--head) + 8vh) var(--gut) 12vh; }
.pres-sida .om-inner { display: grid; gap: clamp(22px, 4vh, 40px); }
.pres-sida .om-text {
  max-width: 24em;
  font-family: var(--display);
  font-size: clamp(26px, 2.9vw, 56px); line-height: 1.12;
  font-variation-settings: "wdth" 92, "wght" 460, "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 60;
  letter-spacing: -0.012em;
}
.pres-sida .om-text strong { font-variation-settings: "wdth" 112, "wght" 860, "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 60; font-weight: 860; }
.pres-sida .om-text em { color: var(--acc); }
.pres-sida .om-lankar { display: grid; border-top: 2px solid currentColor; }
.pres-sida .om-lankar a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 16px 0; border-bottom: 2px solid currentColor; text-decoration: none;
  font-family: var(--mono); font-size: clamp(14px, 1.1vw, 20px); letter-spacing: 0.06em; text-transform: uppercase;
}
.pres-sida .om-lankar a span:last-child { transition: transform .45s var(--ease); color: var(--acc); }
.pres-sida .om-lankar a:hover span:last-child { transform: translate(6px, -6px); }

/* ---------- Foten: PRES[ENTER] stort ---------- */
.pres-sida .fot { padding: clamp(40px, 8vh, 90px) var(--gut) max(24px, env(safe-area-inset-bottom)); overflow: clip; }
.pres-sida .fot-ord {
  font-family: var(--display);
  font-size: var(--fot-size, 19vw);
  line-height: 0.76;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--acc);
  letter-spacing: var(--track);
}
.pres-sida .fot-ord .pres { display: inline-block; }
.pres-sida .fot-ord .l {
  --st: clamp(0, var(--ps-p) * 1.5 - var(--i) * 0.06, 1);
  font-variation-settings: "wdth" calc(50 + (var(--wd-max) - 50) * var(--st)), "wght" calc(200 + (var(--wg-max) + 40 - 200) * var(--st)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}
/* Tangenten i foten trycks ned när du når sidans slut. */
.pres-sida .tangent-stor { --yta: var(--bg); --strek: 0.028em; --djup: 0.1em; margin-left: 0.1em; }
.pres-sida .tangent-stor .tangent-topp { transform: translateY(calc(var(--djup) * clamp(0, (var(--ps-p) - 0.86) * 9, 1))); transition: none; }
.pres-sida .fot-namn { margin-top: clamp(26px, 5vh, 60px); font-size: clamp(22px, 1.8vw, 34px); line-height: 1.2; font-variation-settings: "wdth" 100, "wght" 560, "SOFT" var(--soft), "WONK" var(--wonk); }
.pres-sida .fot-namn em { color: var(--acc); }
.pres-sida .fot-rad { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(24px, 5vh, 56px); padding-top: 16px; border-top: 2px solid currentColor; }

@media (max-width: 900px) {
  .pres-sida .start-inner { grid-template-columns: 1fr; }
  .pres-sida .fragor-inner { grid-template-columns: 1fr; }
  .pres-sida .fragor-rubrik { position: static; margin-bottom: clamp(28px, 6vw, 48px); }
  .pres-sida .fragor-lista { grid-column: 1; }
}
@media (max-width: 760px) {
  .pres-sida .eftertext > div { grid-template-columns: 1fr; gap: 6px; }
  .pres-sida .eftertext dt { text-align: left; padding-top: 0; }
  .pres-sida .et-stor { white-space: normal; }
  .pres-sida .fraga summary { grid-template-columns: 2em minmax(0, 1fr) auto; gap: 12px; }
  .pres-sida .fr-svar { padding-left: 0; }
}