/* Parent things — lys og skygge. Leser bare tokens; stemningen (dag/kveld) settes med data-theme. */
body { background: var(--grunn); color: var(--blekk); font: 400 18px/1.5 var(--font-body); margin: 0; caret-color: var(--blekk); accent-color: var(--blekk); }
[data-theme] { color: var(--blekk); }
::selection { background: var(--gul); color: #4A3B33; }
.pt-hopp { position: absolute; left: var(--space-2); top: -64px; z-index: 10; padding: 12px var(--space-2); border-radius: var(--radius-field); background: var(--knapp); color: var(--knapp-tekst); font: 700 16px/1.2 var(--font-body); }
.pt-hopp:focus { top: var(--space-2); }

/* Overskrifter og tekst */
.pt-h1, .pt-h2, .pt-h3 { font-family: var(--font-heading); font-weight: 700; color: var(--blekk); margin: 0; text-wrap: balance; }
.pt-h1 { font-size: 64px; line-height: 1.08; letter-spacing: -0.02em; }
.pt-h2 { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; }
.pt-h3 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.pt-tekst { margin: 0; max-width: 34em; }
.pt-dempet { color: var(--blekk-dempet); }
.pt-sma { font: 400 14px/1.45 var(--font-body); color: var(--blekk-dempet); }
@media (max-width: 640px) { .pt-h1 { font-size: 40px; } .pt-h2 { font-size: 32px; } }
:focus-visible { outline: 3px solid var(--blekk); outline-offset: 4px; }

/* ── Scenen: vegg, gulv, lys ───────────────────────────────── */
.pt-scene { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--grunn), var(--grunn-varm)); color: var(--blekk); }
.pt-scene > * { position: relative; z-index: 1; }
.pt-seksjon { padding: var(--space-12) var(--space-6); background: var(--grunn); }
.pt-seksjon--varm { background: var(--grunn-varm); }
/* Dag: skrå lysstripe fra et vindu */
.pt-stripe { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none;
  background: linear-gradient(var(--lysvinkel), transparent 38%, var(--lys) 38.2%, var(--lys) 62%, transparent 62.2%); }
/* Kveld: lyskjegle fra en lampe */
.pt-kjegle { position: absolute !important; top: -10%; left: 50%; width: 46%; height: 120%; z-index: 0 !important; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--lys) 85%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.pt-gulv { position: absolute !important; left: 0; right: 0; bottom: 0; height: 88px; z-index: 0 !important; background: var(--gulv); }
/* Skygger: skarpe, gjennomsiktige */
/* Slagskygge: rette kanter, samme retning som lyset, smalner utover. Legg den med toppen ved foten av tingen. */
.pt-slagskygge { position: absolute; background: var(--skygge); transform-origin: top; transform: skewX(var(--retning, calc(90deg - var(--lysvinkel)))); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); }
.pt-lyspytt { position: absolute; border-radius: 50%; background: var(--lys); }
/* Egenskygge og glimt på en form */
.pt-form { position: relative; overflow: hidden; }
.pt-form::before { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--skygge); z-index: 2; pointer-events: none; }
.pt-form::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(var(--lysvinkel), transparent 30%, var(--lys) 30.3%, var(--lys) 45%, transparent 45.3%); opacity: .5; }

/* Telefonen med appen */
.pt-telefon { width: 170px; height: 340px; border-radius: 30px; background: #3B3350; padding: 9px; box-sizing: border-box; }
.pt-telefon__skjerm { position: relative; z-index: 1; height: 100%; border-radius: 22px; overflow: hidden; background: #2A2442; color: #BFB3D9; display: grid; place-items: center; font: 400 12px/1.4 var(--font-body); text-align: center; }
.pt-telefon__skjerm img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* ── Knapp: flat skygge under, lysglimt over, de to prikkene ── */
.pt-btn {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--kontroll-hoyde); padding: 12px var(--space-3); margin-bottom: var(--knapp-dybde);
  border: 0; border-radius: var(--radius-button); background: var(--knapp); color: var(--knapp-tekst);
  font: 700 18px/1.2 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 var(--knapp-dybde) 0 var(--skygge);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.pt-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--lysvinkel), transparent 55%, rgba(255, 255, 255, .16) 55.4%, rgba(255, 255, 255, .16) 75%, transparent 75.4%);
  transition: transform var(--motion-enter) var(--ease); }
.pt-btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--skygge); }
.pt-btn:hover::after { transform: translateX(-30%); }
.pt-btn:active { transform: translateY(var(--knapp-dybde)); box-shadow: 0 0 0 var(--skygge); }
.pt-btn:disabled, .pt-btn[aria-disabled="true"] { background: var(--gulv); color: var(--blekk-dempet); box-shadow: none; cursor: not-allowed; transform: none; }
.pt-btn:disabled::after, .pt-btn:disabled .pt-prikker { display: none; }
.pt-btn[aria-busy="true"] { cursor: progress; padding-right: calc(var(--space-3) + 8px); }
.pt-btn--bred { display: flex; width: 100%; }
.pt-handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Hjertene: to små hjerter spiss mot spiss, gul og rosa, oransje der de overlapper */
.pt-prikker { --h: 14px; display: inline-flex; isolation: isolate; flex: none; }
.pt-prikker i { display: block; width: calc(var(--h) * .914); height: var(--h); background: var(--gul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-85.4 -85.4 156.1 170.8'%3E%3Cpath d='M0 70.71A50 50 0 0 1 -70.71 0A50 50 0 0 1 0 -70.71L70.71 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-85.4 -85.4 156.1 170.8'%3E%3Cpath d='M0 70.71A50 50 0 0 1 -70.71 0A50 50 0 0 1 0 -70.71L70.71 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pt-prikker i + i { margin-left: calc(var(--h) * -.25); background: var(--rosa); mix-blend-mode: multiply; transform: scaleX(-1); }
.pt-prikker--stor { --h: 28px; }
/* Hjertene går inn i hverandre, ut på den andre siden og tilbake */
.pt-laster i:first-child, .pt-btn[aria-busy="true"] .pt-prikker i:first-child { animation: pt-hjerte-v 1.3s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.pt-laster i:last-child, .pt-btn[aria-busy="true"] .pt-prikker i:last-child { animation: pt-hjerte-h 1.3s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.pt-laster { margin-inline: calc(var(--h) * .45); }
@keyframes pt-hjerte-v { from { transform: translateX(0); } to { transform: translateX(calc(var(--h) * .82)); } }
@keyframes pt-hjerte-h { from { transform: translateX(0) scaleX(-1); } to { transform: translateX(calc(var(--h) * -.82)) scaleX(-1); } }
.pt-punktum { display: inline-block; width: .22em; height: .22em; border-radius: 50%; background: var(--barn); margin-left: .06em; }

/* t-symbolet: gul og rosa t med mispass, oransje der de overlapper. Høyde settes med --h. */
.pt-t { --h: 96px; position: relative; display: inline-block; isolation: isolate; height: var(--h); width: calc(var(--h) * 0.506); margin-inline: calc(var(--h) * .09); flex: none; }
.pt-t i { position: absolute; inset: 0; background: var(--gul); transform: translateX(-11%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='54 -609 316 624'%3E%3Cpath transform='scale(1 -1)' d='M54 264V599Q65 602 85.5 605.5Q106 609 129 609Q178 609 200.0 592.0Q222 575 222 529V475H353Q359 465 364.5 448.0Q370 431 370 411Q370 376 354.5 360.5Q339 345 313 345H222V167Q222 142 238.5 130.5Q255 119 285 119Q300 119 316.0 121.5Q332 124 344 128Q353 118 359.5 104.0Q366 90 366 71Q366 34 337.5 9.5Q309 -15 237 -15Q149 -15 101.5 25.0Q54 65 54 155Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='54 -609 316 624'%3E%3Cpath transform='scale(1 -1)' d='M54 264V599Q65 602 85.5 605.5Q106 609 129 609Q178 609 200.0 592.0Q222 575 222 529V475H353Q359 465 364.5 448.0Q370 431 370 411Q370 376 354.5 360.5Q339 345 313 345H222V167Q222 142 238.5 130.5Q255 119 285 119Q300 119 316.0 121.5Q332 124 344 128Q353 118 359.5 104.0Q366 90 366 71Q366 34 337.5 9.5Q309 -15 237 -15Q149 -15 101.5 25.0Q54 65 54 155Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pt-t i + i { background: var(--rosa); mix-blend-mode: multiply; transform: translateX(11%); }
/* Tre bevegelser. Alle lander i mispasset og står stille med redusert bevegelse. */
.pt-t--sider i { animation: pt-t-sv 2.4s cubic-bezier(.3, 1.3, .5, 1) infinite alternate; }
.pt-t--sider i + i { animation-name: pt-t-sh; }
@keyframes pt-t-sv { 0%, 12% { transform: translateX(-90%); } 70%, 100% { transform: translateX(-11%); } }
@keyframes pt-t-sh { 0%, 12% { transform: translateX(90%); } 70%, 100% { transform: translateX(11%); } }
.pt-t--ovenfra i { animation: pt-t-ov 2.4s cubic-bezier(.3, 1.3, .5, 1) infinite alternate; }
.pt-t--ovenfra i + i { animation-name: pt-t-on; }
@keyframes pt-t-ov { 0%, 12% { transform: translate(-11%, -75%); } 70%, 100% { transform: translate(-11%, 0); } }
@keyframes pt-t-on { 0%, 12% { transform: translate(11%, 75%); } 70%, 100% { transform: translate(11%, 0); } }
.pt-t--sirkler i { animation: pt-t-s1 2.4s linear infinite; }
.pt-t--sirkler i + i { animation-name: pt-t-s2; }
@keyframes pt-t-s1 { 0.0% { transform: translateX(-55.0%) scale(1.000); } 8.3% { transform: translateX(-47.6%) scale(1.070); } 16.7% { transform: translateX(-27.5%) scale(1.121); } 25.0% { transform: translateX(-0.0%) scale(1.140); } 33.3% { transform: translateX(27.5%) scale(1.121); } 41.7% { transform: translateX(47.6%) scale(1.070); } 50.0% { transform: translateX(55.0%) scale(1.000); } 58.3% { transform: translateX(47.6%) scale(0.930); } 66.7% { transform: translateX(27.5%) scale(0.879); } 75.0% { transform: translateX(0.0%) scale(0.860); } 83.3% { transform: translateX(-27.5%) scale(0.879); } 91.7% { transform: translateX(-47.6%) scale(0.930); } 100.0% { transform: translateX(-55.0%) scale(1.000); } }
@keyframes pt-t-s2 { 0.0% { transform: translateX(55.0%) scale(1.000); } 8.3% { transform: translateX(47.6%) scale(0.930); } 16.7% { transform: translateX(27.5%) scale(0.879); } 25.0% { transform: translateX(0.0%) scale(0.860); } 33.3% { transform: translateX(-27.5%) scale(0.879); } 41.7% { transform: translateX(-47.6%) scale(0.930); } 50.0% { transform: translateX(-55.0%) scale(1.000); } 58.3% { transform: translateX(-47.6%) scale(1.070); } 66.7% { transform: translateX(-27.5%) scale(1.121); } 75.0% { transform: translateX(-0.0%) scale(1.140); } 83.3% { transform: translateX(27.5%) scale(1.121); } 91.7% { transform: translateX(47.6%) scale(1.070); } 100.0% { transform: translateX(55.0%) scale(1.000); } }

/* Logoen i toppen: t-ene går i ring. Ved trykk kommer «paren» ut til venstre og «hings.» til høyre, og t-ene lander i mispasset. Krever logo.js. */
.pt-logo { --lh: 36px; all: unset; box-sizing: border-box; display: inline-flex; align-items: flex-start; height: var(--lh); color: var(--blekk); cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.pt-logo:focus-visible { outline: 3px solid var(--blekk); outline-offset: 6px; }
.pt-logo__del { position: relative; flex: none; height: var(--lh); width: 0; overflow: hidden; transition: width 520ms var(--ease); }
.pt-logo__del svg { position: absolute; top: 0; height: var(--lh); fill: currentColor; }
.pt-logo__del--v svg { right: 0; width: calc(var(--lh) * 2.8388); }
.pt-logo__del--h svg { left: 0; width: calc(var(--lh) * 2.8767); }
.pt-logo[aria-expanded="true"] .pt-logo__del--v { width: calc(var(--lh) * 2.8388); }
.pt-logo[aria-expanded="true"] .pt-logo__del--h { width: calc(var(--lh) * 2.8767); }
.pt-logo .pt-t { --h: calc(var(--lh) * .6575); margin: calc(var(--lh) * .1286) calc(var(--lh) * .2) 0; transition: margin 520ms var(--ease); }
.pt-logo[aria-expanded="true"] .pt-t { margin-inline: 0; }
.pt-logo .pt-t i { transform: translateX(-15.8%); }
.pt-logo .pt-t i + i { transform: translateX(15.8%); }
@media (prefers-reduced-motion: reduce) { .pt-logo__del, .pt-logo .pt-t { transition: none; } }

/* ── Ba bo BO! i profilen: alt om appen ligger i en skjerm eller en boks, med appens egne farger og pikselskrift ── */
.pt-app { position: relative; overflow: hidden; isolation: isolate; background: #171C42; color: #FFFFFF; font: 500 14px/1.2 "Pixelify Sans", ui-monospace, Menlo, monospace; text-align: center; }
.pt-app img, .pt-app canvas { image-rendering: pixelated; max-width: none; width: auto; height: auto; object-fit: fill; }
.pt-app__plate { display: inline-block; padding: 3px 10px 4px; background: #FBE7A8; color: #1B2148; border: 2px solid #E0A52C; box-shadow: 0 0 0 2px #1B1B3A; font-weight: 700; font-size: 16px; }
.pt-app__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 12px; padding: 2px; background: #1B1B3A; box-shadow: 0 0 0 2px #E8ECFF; box-sizing: border-box; }
.pt-app__bar i { background: #F7D02C; }
.pt-app__bar i.av { background: none; }
.pt-app__bar i.blink { animation: pt-app-blink 1.2s steps(1) infinite; }
.pt-app__stjerne { position: absolute; width: 2px; height: 2px; background: #FFEFA8; animation: pt-app-blink 2.6s steps(1) infinite; }
.pt-app__flamme { position: absolute; width: 6px; height: 6px; background: #F7D02C; animation: pt-app-flamme .5s steps(1) infinite; }
@keyframes pt-app-blink { 50% { opacity: 0; } }
@keyframes pt-app-flamme { 50% { transform: translate(-2px, -2px); background: #FFE680; } }
.pt-telefon--stor { width: 250px; height: 500px; border-radius: 40px; padding: 10px; }
.pt-telefon--stor .pt-telefon__skjerm { border-radius: 30px; }

/* Tekstlenke */
.pt-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blekk); font: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-thickness var(--motion-fast) var(--ease); }
.pt-link:hover { text-decoration-thickness: 2px; }
.pt-link__pil { width: 8px; height: 14px; flex: none; }

/* Etikett: bare «Testfamilier» */
.pt-etikett { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; border: 1px solid var(--linje); border-radius: var(--radius-button);
  font: 700 13px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--blekk); }
.pt-etikett + .pt-h1, .pt-etikett + .pt-h2 { margin-top: var(--space-2); }

/* Bildefelt for appens egne bilder */
.pt-bildefelt { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--flate); color: var(--blekk-dempet); display: grid; place-items: center; aspect-ratio: 3 / 2; box-shadow: 0 var(--knapp-dybde) 0 var(--skygge); }
.pt-bildefelt img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pt-bildefelt__navn { font: 400 13px/1.4 var(--font-body); padding: var(--space-2); text-align: center; }
.pt-bildetekst { margin: var(--space-3) 0 0; font: 700 16px/1.4 var(--font-body); color: var(--blekk); display: flex; align-items: baseline; gap: 10px; }
.pt-bildetekst__nr { font-family: var(--font-heading); font-size: 20px; }
.pt-bildetekst__nr::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--barn); margin-left: 2px; }
.pt-bildetekst span + span { font-weight: 400; color: var(--blekk-dempet); }

/* Skjema */
.pt-skjemaflate { box-sizing: border-box; padding: var(--space-4); border-radius: var(--radius-card); background: var(--flate); display: grid; gap: var(--space-2); box-shadow: 0 var(--knapp-dybde) 0 var(--skygge); }
.pt-felt { display: grid; gap: var(--space-1); }
.pt-felt__etikett { font: 700 16px/1.4 var(--font-body); color: var(--blekk); }
.pt-felt__input { box-sizing: border-box; width: 100%; min-height: var(--kontroll-hoyde); padding: 12px var(--space-2);
  border: 1px solid var(--felt-kant); border-radius: var(--radius-field); background: var(--felt); color: var(--felt-tekst); font: 400 18px/1.4 var(--font-body); }
.pt-felt__input::placeholder { color: var(--felt-kant); }
.pt-felt__input:focus-visible { outline-offset: 2px; }
select.pt-felt__input { appearance: none; padding-right: 44px; }
.pt-felt__velg { position: relative; }
.pt-felt__velg::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--felt-tekst); border-bottom: 2px solid var(--felt-tekst); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pt-felt__hjelp { font: 400 14px/1.45 var(--font-body); color: var(--blekk-dempet); }
.pt-felt--feil .pt-felt__input { border: 2px solid var(--feil); padding-inline: 15px; }

/* Tilbakemelding: tekst og symbol, aldri farge alene */
.pt-melding { display: flex; align-items: flex-start; gap: 10px; font: 400 16px/1.45 var(--font-body); color: var(--blekk); }
.pt-melding__symbol { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.pt-melding__symbol svg { width: 12px; height: 12px; }
.pt-melding--ok .pt-melding__symbol { background: var(--knapp); color: var(--knapp-tekst); }
.pt-melding--feil .pt-melding__symbol { background: var(--feil); color: var(--grunn); }
.pt-melding--feil .pt-melding__tekst { color: var(--feil); font-weight: 700; }
.pt-melding--boks { padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); background: var(--flate); }
.pt-melding--feil.pt-melding--boks { background: var(--feil-flate); }
.pt-melding--feil.pt-melding--boks .pt-melding__tekst { color: var(--blekk); }

/* Toppmeny og bunn */
.pt-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-6); }
.pt-topp--linje { border-bottom: 1px solid var(--linje); background: var(--grunn); }
.pt-topp__logo { display: block; height: 36px; }
.pt-topp__meny { display: flex; align-items: center; gap: var(--space-4); }
.pt-topp__meny a:not(.pt-btn) { color: var(--blekk); font: 400 16px/1.4 var(--font-body); text-decoration: none; }
.pt-topp__meny a:not(.pt-btn):hover { text-decoration: underline; text-underline-offset: 6px; }
.pt-topp__meny a[aria-current="page"]::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--barn); margin-left: 3px; }
.pt-topp__meny a.pt-topp__cta { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pt-bunn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 var(--space-6); padding: var(--space-3) 0; border-top: 1px solid var(--linje); font: 400 14px/1.45 var(--font-body); color: var(--blekk-dempet); }
.pt-bunn a { color: var(--blekk); text-decoration: none; }
.pt-bunn a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pt-bunn__lenker { display: flex; gap: var(--space-4); }

/* Bevegelse */
.pt-inn { animation: pt-inn var(--motion-enter) var(--ease) both; }
@keyframes pt-inn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pt-inn { animation-name: pt-inn-rolig; }
  @keyframes pt-inn-rolig { from { opacity: 0; } to { opacity: 1; } }
  .pt-btn:hover, .pt-btn:active { transform: none; }
  .pt-btn:hover::after { transform: none; }
  .pt-laster i, .pt-btn[aria-busy="true"] .pt-prikker i, .pt-t i, .pt-app__bar i, .pt-app__stjerne, .pt-app__flamme { animation: none !important; }
}