html, body { margin: 0; height: 100%; background: var(--desktop); }
/* Sæsontema: tapetet ligger på skrivebordet (temaer.css sætter --desktop og --wallpaper) */
html, body, .fkp.fk-desktop { background: var(--desktop) var(--wallpaper, none) 0 0 / 96px 96px; }
.fkp { min-height: 100%; display: flex; flex-direction: column; }
.fkp-main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; gap: var(--space-7);
  padding-block: var(--space-6) var(--space-7); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.fkp-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; }
.fkp-hero h1 { margin: 0 0 var(--space-5); text-wrap: balance; }
.fkp-hero .lede { margin: 0 0 var(--space-6); max-width: 46ch; font-size: 17px; line-height: 26px; }
.fkp-hero .lede b { white-space: nowrap; }
.fkp-logo { width: clamp(120px, 20vw, 230px); height: auto; }
.fkp-mm { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "board mon" "past mon"; gap: 0 var(--space-3); }
.fkp-board { grid-area: board; min-width: 0; }
.fkp-past { grid-area: past; min-width: 0; }
.fkp-mm .fkp-monitor { grid-area: mon; scroll-margin: 12px; }
.fkp-mmtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.fkp-mmtools .fk-btnrow { gap: 0; }
.fkp-mmtools .fk-btnrow .fk-btn { min-width: 0; }
.fkp-label { font: 400 16px/18px var(--font-pixel); margin: var(--space-4) 0 var(--space-2); }
.fkp-monitor { align-self: start; }
.fkp-monitor h3 { margin: var(--space-2) 0 var(--space-3); text-wrap: balance; }
.fkp-monitor dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0 0 var(--space-4); font-size: 14px; line-height: 21px; }
.fkp-monitor dt { font: 400 16px/21px var(--font-pixel); }
.fkp-monitor dd { margin: 0; }
.fkp-monitor .cat { display: inline-flex; align-items: center; gap: 6px; font: 400 16px/18px var(--font-pixel); background: var(--cat); padding: 1px 6px 1px 2px; box-shadow: 0 0 0 1px var(--dark); }
.fkp-monitor .cat img { width: 16px; height: 16px; }
.fkp-monitor p { margin: 0 0 var(--space-4); font-size: 14px; line-height: 21px; }
.fkp-steps { margin: 0 0 var(--space-5); padding-left: 1.4em; display: grid; gap: var(--space-3); max-width: 60ch; }
.fkp-big { font: 700 40px/42px var(--font-paint); margin: 0 0 var(--space-2); }
.fkp-dict h3 { margin: 0 0 var(--space-3); }
.fkp-dict p { margin: 0 0 var(--space-3); max-width: 52ch; }
.fkp-dict .meta { color: var(--ink-muted); }
.fkp-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0 0 var(--space-4); font-size: 14px; line-height: 21px; }
.fkp-facts dt { font: 400 16px/21px var(--font-pixel); }
.fkp-facts dd { margin: 0; }
.fkp-linkbtn { all: unset; cursor: var(--fk-hand, pointer); color: var(--link, #0000ff); text-decoration: underline; }
.fkp-linkbtn:focus-visible { outline: 1px dotted var(--dark); }
.fkp-ordlink { display: inline-flex; align-items: center; gap: 6px; }
.fkp-ordlink img { width: 16px; height: 16px; }
.fk-wizard .meta { color: var(--ink-muted); margin: 0; }
.fkp-desk h2 { color: var(--on-desktop); font: 400 16px/20px var(--font-pixel); margin: 0 0 var(--space-4); }
.fkp-bar { position: sticky; bottom: 0; z-index: 5; padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(4px, env(safe-area-inset-left, 0px)); padding-right: max(4px, env(safe-area-inset-right, 0px)); }
.fkp h2.paint-m { margin: 0 0 var(--space-3); }
.fkp .empty { padding: var(--space-6); font: 400 16px/20px var(--font-pixel); color: var(--ink-muted); }
.fkp-sub { margin: 0 0 var(--space-3); max-width: 62ch; }
.fkp section[id], .fkp-main > [id] { scroll-margin-top: 12px; }
@media (max-width: 900px) {
  .fkp-mm { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "mon" "past"; gap: var(--space-3) 0; }
  .fkp-mm .fkp-label { margin-top: var(--space-2); }
}
@media (max-width: 620px) {
  .fkp-main { gap: var(--space-5); padding-block: var(--space-4) var(--space-6); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .fkp-hero { grid-template-columns: 1fr; gap: var(--space-4); }
  .fkp-logo { order: -1; width: 72px; }
  .fkp .paint-xl { font-size: 42px; line-height: 44px; }
  .fkp-hero h1 { margin-bottom: var(--space-4); }
  .fkp-hero .lede { font-size: 16px; line-height: 25px; margin-bottom: var(--space-5); }
  .fkp-hero .fk-btnrow { flex-direction: column; }
  .fkp-hero .fk-btn { width: 100%; min-height: 44px; }
  .fk-canvas { padding: var(--space-5) var(--space-4) var(--space-6); }
  .fk-canvas-well { padding: var(--space-2); }
  .fkp-hide-sm { display: none; }
  .fkp-tray-date { display: none; }
  .fkp-mmtools { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
  .fkp-mmtools .fk-btnrow { display: grid; grid-template-columns: 1fr 1fr; }
  .fkp-mmtools .fk-btnrow:last-child { grid-template-columns: 1fr 1fr; }
  .fkp-mmtools .fk-btn { min-height: 40px; }
  .fkp-monitor .screen { min-height: 0; padding: var(--space-4); }
  .fkp-monitor .fk-btn { min-height: 44px; }
  .fk-tabs [role="tabpanel"] { padding: var(--space-4) var(--space-3); }
  #egenskaber .fk-wbody > .fk-btnrow { display: grid; grid-template-columns: 1fr 1fr; }
  #egenskaber .fk-btn { min-height: 44px; }
  .fk-copy .fk-btn { min-width: 0; }
  .fkp-desk h2 { margin-bottom: var(--space-3); }
}
/* Undersider: ét programvindue */
.fkp-main > .fk-app { width: 100%; max-width: 920px; justify-self: center; align-self: start; }
.fkp-files { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.fkp-files a { display: inline-flex; align-items: center; gap: 6px; }
.fkp-files img { width: 16px; height: 16px; }
.fkp-end { justify-content: flex-end; margin-top: var(--space-3); }
.fk-tabs address { font-style: normal; margin: 0 0 var(--space-4); }
@media (max-width: 620px) { .fkp-files a, .fkp-end .fk-btn { min-height: 44px; } }
/* Telefoner: ét vindue fylder skærmen (med lidt skrivebord om), og man skifter mellem dem på proceslinjen.
   Vinduets indhold ruller inde i vinduet; titellinjen og proceslinjen står fast. */
@media (max-width: 620px) {
  .fkp { height: 100vh; height: 100dvh; min-height: 0; }
  .fkp-main { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-3); }
  .fkp-main > section.fk-window { flex: 1 1 0; min-height: 0; }
  .fkp-main > section.fk-window > .fk-wbody { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .fkp-main[data-solo] > section.fk-window:not(.is-shown) { display: none; }
  .fkp-main > section.fk-window [data-min], .fkp-desk { display: none; }
}
/* Desktop: to programmer flyder forskudt over hinanden på samme skrivebord (Paint og Movie Maker, Egenskaber og Hjælp, Udvalg og Om). Det valgte vindue står forrest; det andet har inaktiv titellinje. */
@media (min-width: 621px) {
  .fkp-main > .fk-float { grid-area: 1 / 1; align-self: start; width: min(760px, 84%); max-width: none; position: relative; z-index: 1; }
  .fkp-main > .fk-float.is-shown { z-index: 2; }
  /* Kaskade: det første vindue står nederst til venstre, det andet øverst til højre, så begge titellinjer ses */
  .fkp-main > .fk-float:nth-child(1) { justify-self: start; margin: 72px 0 0 2%; }
  .fkp-main > .fk-float:nth-child(2) { justify-self: end; margin: 0 2% 0 0; }
  .fkp-main > #udvalg.fk-float { width: min(860px, 84%); }
  .fkp-main > #top.fk-float { width: min(820px, 80%); }
  .fkp-main > #arrangementer.fk-float { width: min(1040px, 90%); }
}
/* Telefoner: indholdet fylder vinduet i stedet for tom grå flade. Lærredet, fanerne, Hjælp og Stifinderen vokser;
   statuslinjen og knapperne står nederst. Er indholdet højere end skærmen, ruller vinduet som før. */
@media (max-width: 620px) {
  .fkp-main > section.fk-window > .fk-wbody { display: flex; flex-direction: column; }
  .fkp-main > section.fk-window > .fk-wbody > * { flex: none; }
  .fkp-main > section.fk-window > .fk-wbody > :is(.fk-canvas-well, .fk-tabs, .fk-help, .fk-explorer) { flex: 1 0 auto; }
  .fkp-main > section.fk-window > .fk-wbody > .fk-statusbar { margin-top: auto; padding-top: var(--space-1); }
  .fk-canvas-well { display: flex; flex-direction: column; }
  .fk-canvas { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
  .fk-tabs { display: flex; flex-direction: column; }
  .fk-tabs [role="tabpanel"] { flex: 1 0 auto; }
  /* Stifinder: adresselinjen og statuslinjen står fast, kun filerne ruller */
  #udvalg > .fk-wbody { overflow: hidden; }
  /* Som Hjælp: det man læser (mappens info) øverst, det man trykker på (filerne) nederst og ruller for sig */
  #udvalg > .fk-wbody > .fk-explorer { flex: 1 1 0; min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
  #udvalg .fk-explorer .info { order: 0; max-height: 45dvh; overflow: auto; border-top: 0; border-bottom: 1px solid var(--face); }
  #udvalg .fk-explorer .files { order: 1; overflow: auto; }
  #udvalg .fk-explorer.is-root { grid-template-rows: minmax(0, 1fr); }
}
/* Telefoner: det man trykker på, står nederst inden for tommelfingerens rækkevidde; det man læser, står øverst.
   Hjælp: opslaget øverst, ordlisten nederst. Movie Maker: monitoren øverst, klippene, filtret og abonnementerne nederst. */
@media (max-width: 620px) {
  #ordbog > .fk-wbody > .fk-help { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  #ordbog .fk-help article { order: -1; overflow: auto; }
  #ordbog .fk-help [role="listbox"] { max-height: 44dvh; }

  /* Movie Maker på telefon: monitoren, klippene, filtret og abonnementerne. Allerede vist, tidslinjen og statuslinjen er kun på desktop. */
  #arrangementer > .fk-wbody > .fkp-mm { order: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); margin: 0 !important; }
  #arrangementer > .fk-wbody > .fk-palette { order: 1; margin-top: var(--space-2); }
  #arrangementer > .fk-wbody > .fkp-mmtools { order: 2; margin: var(--space-2) 0 0; }
  #arrangementer > .fk-wbody > .fk-statusbar, #arrangementer .fkp-past, #arrangementer .fkp-mmtools > [aria-label="Visning"] { display: none; }
  #arrangementer #timeline { display: none !important; }
  #arrangementer #storyboard { display: flex !important; }
  #arrangementer .fkp-monitor { order: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-self: stretch; }   /* fuld bredde uanset arrangementets tekst */
  #arrangementer .fkp-monitor .screen { flex: 1 1 0; min-height: 0 !important; overflow: auto; padding: var(--space-3); }
  #arrangementer .fkp-monitor h3 { font-size: clamp(28px, 9vw, 40px); line-height: 1.1; margin-bottom: var(--space-2); }
  #arrangementer .fkp-board { order: 1; flex: none; }
  /* Klippene som en smal stribe: lille billede, navn og dato */
  #arrangementer #storyboard { padding: var(--space-2) !important; }
  #arrangementer #storyboard .fk-clip { width: 124px; gap: var(--space-1); padding: var(--space-1); }
  #arrangementer #storyboard .fk-clip .thumb { width: 116px; height: 52px; }
  #arrangementer #storyboard .fk-clip .thumb img { width: 32px; height: 32px; }
  #arrangementer #storyboard .fk-clip .thumb .day { left: 4px; top: 3px; font-size: 14px; line-height: 15px; }
  #arrangementer #storyboard .fk-clip .name { font-size: 14px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; width: 100%; }
  #arrangementer .fk-swatch { min-height: 44px; flex-direction: row; gap: 4px; padding: 4px 2px; }
  #arrangementer .fk-swatch[aria-pressed="true"] { padding: 5px 1px 3px 3px; }
  #arrangementer .fkp-mmtools .fk-btn { min-height: 44px; }
}
/* Desktop: genvejene står i en fast kolonne til venstre, som ikonerne på et Windows-skrivebord, så de ikke flytter sig,
   når man skifter side. Vinduerne flyder i resten af bredden. */
@media (min-width: 621px) {
  .fkp-main { max-width: 1320px; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-5); align-content: start; }
  .fkp-main > .fk-float { grid-area: 1 / 2; }
  .fkp-main > .fkp-desk { grid-column: 1; grid-row: 1; align-self: start; }
  .fkp-desk .fk-icons { grid-template-columns: 1fr; gap: var(--space-3); }
  .fkp-desk h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Links ud af sitet (andre domæner, nye faner): Windows-pilen med genvejsmærket. Sitets egne links er relative. */
.fk a[href^="http"], .fk a[target="_blank"] { cursor: var(--fk-ext, alias); }
/* Fnugfald og Jul: julemanden kører over proceslinjen (site.js), og noget falder ud af sækken */
.fk-julemand { position: fixed; left: 0; width: var(--sprite-w); height: var(--sprite-h); background: var(--sprite) 0 0 / 100% 100% no-repeat; pointer-events: none; z-index: 40; }
.fk-julemand-drop { position: fixed; width: 24px; height: 24px; pointer-events: none; z-index: 39; image-rendering: pixelated; }
/* Nytår: raketter i proceslinjen, klik affyrer en (site.js). Kun på desktop, og aldrig ved prefers-reduced-motion. */
.fk-rockets { display: none; }
@media (hover: hover) and (min-width: 621px) {
  :root[data-tema="nytaar"] .fk-rockets { display: inline-flex; align-items: center; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .fk-rockets { display: none !important; } }
.fk-rocket { all: unset; cursor: var(--fk-hand, pointer); display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.fk-rocket img { width: 18px; height: 18px; }
.fk-rocket:focus-visible { outline: 1px dotted var(--dark); }
.fk-rocket.is-gone { visibility: hidden; }
.fk-rocket-fly { position: fixed; width: 18px; height: 18px; pointer-events: none; z-index: 41; image-rendering: pixelated; }
.fk-rocket-spark { position: fixed; width: 4px; height: 4px; pointer-events: none; z-index: 41; }
/* Påske: et æg i tapetet klækkes ved klik (site.js). Ingen cursor- eller hover-ændring - det er et easter egg. */
/* z-index: 0, så de ligger over tapetet (ikke-positioneret) men under vinduerne (.fk-float har z-index: 1/2 på desktop) */
.fk-paaske-patch { position: absolute; background: var(--desktop); pointer-events: none; z-index: 0; }
.fk-paaske-shard { position: absolute; width: 4px; height: 4px; pointer-events: none; z-index: 0; }
.fk-paaske-candy { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 0; image-rendering: pixelated; }
.fk-paaske-hen { position: absolute; width: 32px; height: 32px; pointer-events: none; z-index: 0; image-rendering: pixelated; }