h1[tabindex="-1"]:focus { outline: none; }


.veg { align-items: start; }
.veg-form { display: grid; gap: var(--s-6); align-content: start; }
.veg-felt { display: grid; gap: var(--s-2); }
.veg-felt .hjelp { color: var(--ink-3); font-size: var(--t-small); line-height: 1.45; }
.veg-telje { color: var(--ink-3); font-size: var(--t-small); justify-self: end; font-variant-numeric: tabular-nums; }
.veg-telje.full { color: var(--wait); font-weight: 600; }
.veg-rad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.veg-rad .quiet { flex: 1 1 16em; }
.veg-feil { color: var(--stop); font-weight: 600; font-size: var(--t-small); line-height: 1.45; }
.veg-feil:empty { display: none; }
.veg-side { display: grid; gap: var(--s-4); align-content: start; position: sticky; top: 96px; }
.veg-lese { display: grid; gap: 6px; padding: var(--s-4) var(--s-5); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.veg-lese b { font-weight: 620; }
.veg-lese p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; margin: 0; }
.veg-lese:empty { display: none; }


.veg-sjekk { display: grid; }
.veg-sjekk .setrow { grid-template-columns: minmax(0, 1fr) auto; }
.veg-sjekk .setrow b { display: block; font-weight: 620; }
.veg-sjekk .setrow p { color: var(--ink-2); font-size: var(--t-body); margin: 2px 0 0; overflow-wrap: anywhere; }
.veg-sjekk .setrow .tom { color: var(--ink-3); font-style: italic; }


.veg-mal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.veg-mal .pick { align-content: start; }
.veg-mal .pick small { color: var(--ink-3); font-size: .875rem; line-height: 1.35; padding: 0 4px 6px; }
.veg-look { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.veg-look .chip { display: inline-flex; align-items: center; gap: var(--s-2); }
.veg-look .chip .prikk { display: inline-flex; gap: 3px; }
.veg-look .chip .prikk i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.veg-look .chip[aria-pressed="true"]::before { content: none; }
.veg-look .chip[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.veg-folk { display: grid; gap: var(--s-2); }
.veg-folk .pick { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--s-3) var(--s-4); }
.veg-folk .pick b { font-weight: 620; }
.veg-folk .pick small { color: var(--ink-3); font-size: var(--t-small); }
.veg-folk .pick .valt { font: 600 var(--t-small)/1 var(--font-text); color: var(--go); display: none; }
.veg-folk .pick[aria-pressed="true"] .valt { display: inline; }


.skisse { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-film); overflow: hidden;
  background: color-mix(in srgb, var(--s-paper, #EEF4F2) 94%, var(--s-accent, #12564F)); color: var(--s-ink, #10302B); box-shadow: var(--lift-film); }
.skisse[data-mal="kort"] { background: var(--s-paper, #EEF4F2); }
.skisse .s-namn, .skisse .s-linje, .skisse .s-punkt, .skisse .s-merke { position: absolute; font-family: var(--font-display); letter-spacing: -.02em; }
.skisse .s-namn { font-weight: 700; line-height: 1.02; }
.skisse .s-linje { font-weight: 500; line-height: 1.2; background: var(--s-pille, #FBFDF4); color: var(--s-pille-ink, #10302B); border-radius: 1.2cqw; padding: .8cqw 1.6cqw; }
.skisse .s-merke { left: 0; right: 0; bottom: 2.2cqw; text-align: center; font: 600 1.6cqw/1 var(--font-text); opacity: .7; letter-spacing: 0; }
.skisse[data-mal="role"] .s-namn { left: 6%; right: 6%; top: 25%; text-align: center; font-size: 6.4cqw; }
.skisse[data-mal="role"] .s-linje { left: 50%; top: 55%; transform: translateX(-50%); max-width: 84%; text-align: center; font-size: 3.2cqw; }
.skisse[data-mal="kort"] .s-linje { left: 50%; top: 36%; transform: translateX(-50%); max-width: 80%; text-align: center; font-size: 4.1cqw; background: transparent; }
.skisse[data-mal="kort"] .s-namn { left: 6%; right: 6%; top: 73%; text-align: center; font-size: 3.8cqw; }
.skisse[data-mal="split"] .s-namn { left: 7%; width: 40%; top: 24%; font-size: 5.2cqw; }
.skisse[data-mal="split"] .s-linje { left: 7%; max-width: 40%; top: 46%; font-size: 2.5cqw; }
.skisse[data-mal="split"] .s-punkt { left: 54%; right: 5%; top: 26%; display: grid; gap: 3.2cqw; font-size: 2.9cqw; font-weight: 600; line-height: 1.15; }
.skisse[data-mal="split"] .s-punkt span::before { content: ""; display: inline-block; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--s-accent, #12564F); margin-right: 1.4cqw; vertical-align: .25em; }
.skisse .s-punkt:empty, .skisse .s-linje:empty { display: none; }

.pick .skisse .s-punkt span { font: inherit; padding: 0; }
.skisse .s-tom { opacity: .45; }
.skisse-t { color: var(--ink-3); font-size: var(--t-small); line-height: 1.45; }

.skisse.liten { border-radius: 12px; box-shadow: none; }


.ni-still { margin: 0; display: grid; gap: var(--s-2); }
.ni-still .ramme { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-film); overflow: hidden; background: #0b0c10; box-shadow: var(--lift-film); }
.ni-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ni-still figcaption { color: var(--ink-3); font-size: var(--t-small); line-height: 1.45; }
.ni-still figcaption b { color: var(--ink-2); font-weight: 620; }


.fp-film { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-film); overflow: hidden; background: #0b0c10; box-shadow: var(--lift-film); }
.fp-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.fp-logg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fp-logg li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: start; color: var(--ink-2); line-height: 1.45; }
.fp-logg li::before { content: ""; width: 12px; height: 12px; margin: 6px 8px 0; border-radius: 50%; background: var(--go); }
.fp-logg li.no::before { background: var(--ink); animation: pulse 1.6s var(--ease) infinite; }
.fp-logg li.merk::before { background: var(--wait); }
.fp-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.fp-bar i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 4px; transition: width var(--t-calm) var(--ease); }
.fp-ord { display: grid; gap: var(--s-2); }
.fp-ord p { margin: 0; color: var(--ink-2); line-height: 1.45; }

.fp-steg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); counter-reset: steg; }
.fp-steg li { display: grid; gap: var(--s-2); align-content: start; color: var(--ink-3); font-size: var(--t-small); line-height: 1.3; }
.fp-steg li i { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); }
.fp-steg li[data-t="ferdig"] { color: var(--ink-2); }
.fp-steg li[data-t="ferdig"] i { background: var(--go); }
.fp-steg li[data-t="no"] { color: var(--ink); font-weight: 620; }
.fp-steg li[data-t="no"] i { background: linear-gradient(90deg, var(--ink) 0 40%, var(--surface-2) 40% 100%); background-size: 250% 100%; animation: fp-gar 1.8s linear infinite; }
@keyframes fp-gar { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.fp-no { margin: 0; color: var(--ink-2); line-height: 1.5; }
.fp-no b { color: var(--ink); font-weight: 620; }
.fp-no .quiet { display: block; margin-top: 2px; font-size: var(--t-small); }

.fp-stopp .nine-stopp { margin-top: 0; }
.fp-stopp .nine-stopp:has(.ns-sporsmal:not([hidden])) { padding: var(--s-5); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-strong); }
.fp-stopp .nine-stopp .ns-knapp:not(.ns-ja):not(.ns-nei) { min-height: var(--target-primary); padding: 0 var(--s-6); background: var(--ink); color: var(--ground); border-color: var(--ink); font-size: 1.125rem; }
.fp-stopp .nine-stopp .ns-knapp:not(.ns-ja):not(.ns-nei)[disabled] { background: transparent; color: var(--ink-2); border-color: var(--line-strong); opacity: 1; }
.fp-stopp .nine-stopp .ns-ja { min-height: var(--target-primary); font-size: 1.125rem; }
.fp-storleik { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fp-storleik .chip { min-width: 72px; justify-content: center; }


.fl-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.fl-kort { display: grid; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; min-height: var(--target); }
.fl-kort:hover { border-color: var(--ink); }
.fl-kort .bilde { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0c10; }
.fl-kort .bilde img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fl-kort .bilde .skisse { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.fl-kort .tekst { display: grid; gap: 6px; padding: 0 var(--s-2); min-width: 0; }
.fl-kort h3 { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-kort p { color: var(--ink-3); font-size: var(--t-small); margin: 0; }

@media (max-width: 860px) {
  .veg-side { position: static; }
  .veg-mal { grid-template-columns: minmax(0, 1fr); }
  .veg-mal .pick { grid-template-columns: 132px minmax(0, 1fr); align-items: center; column-gap: var(--s-3); }
  .veg-mal .pick .skisse { grid-row: span 2; }
  .fl-liste { grid-template-columns: minmax(0, 1fr); }
  .fl-kort { grid-template-columns: 128px minmax(0, 1fr); align-items: center; padding: var(--s-2); }
  .fl-kort .tekst { padding: 0; }
}
@media (max-width: 620px) {
  .veg-rad .btn-primary { width: 100%; }
  .veg-sjekk .setrow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); }
}
@media (max-width: 620px) { .fp-steg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-3); } .fp-stopp .nine-stopp .ns-knapp { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fp-logg li.no::before { animation: none; } .fp-bar i { transition: none; } .fp-steg li[data-t="no"] i { animation: none; background: var(--ink); } }