/* JoyPanel — shared UI foundation (tokens, base, reusable atoms).
 *
 * Split from style.css: this file holds everything reusable across pages
 * (shelf, about, admin). Page/console-shell layout lives in console.css,
 * admin page layout in admin.css. Load ui.css FIRST, then the page file.
 *
 * Rule (same as before): edit ONLY :root tokens — never raw px/hex/colors
 * out in the rules.
 */

/* Press Start 2P (pixel) — via jsDelivr, google/fonts repo, same pattern as body font */
@font-face {
  font-family: "Press Start 2P";
  src: url("https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/pressstart2p/PressStart2P-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* JetBrainsMono Nerd Font (body) — via jsDelivr, Nerd Fonts repo */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/400.min.css") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   LET'S PLAY PICO8 — production theme
   Alt redigeres i :root nedenfor. Brug KUN vars derfra
   ude i reglerne — ingen løse px på skrift, farver eller borders.
   ============================================================ */
:root {
  /* palette (rå PICO-8 — brug aldrig hex ude i reglerne) */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-dim: #c2c3c7;
  --color-muted: #83769c;
  --color-info: #29adff;
  --color-pink: #ff77a8;
  --color-green: #00e436;
  --color-orange: #ffa300;
  --color-peach: #ffccaa;
  --color-dark-grey: #5f574f;
  --color-dark-purple: #7e2553;
  --color-dark-green: #008751;
  --color-brown: #ab5236;
  --color-onyx: #291814;
  --color-midnight: #111d35;
  --color-eggplant: #49333b;
  --color-plum: #422136;
  --color-chocolate: #742f29;
  --color-forest: #125359;
  --color-beige: #a28879;
  --color-mauve: #754665;
  --color-royal: #065ab5;
  --color-jade: #00b543;
  --color-burgundy: #be1250;
  --color-pumpkin: #ff6c24;
  --color-lime: #a8e72e;
  --color-lemon: #f3ef7d;
  --color-coral: #ff6e59;
  --color-salmon: #ff9d81;
  --color-red: #ff004d;
  /* de sidste tre til PICO-8 standardpaletten (16 farver i alt) */
  --color-navy: #1d2b53;
  --color-cream: #fff1e8;
  --color-yellow: #ffec27;

  /* roller (1 niveau max — det er her du skifter tema) */
  --bg: var(--color-black);
  --panel: var(--color-black);
  --ink: var(--color-white);
  --sub: var(--color-dim);
  --faint: var(--color-muted);
  /* accent = aktiv genres farve (JS sætter den fra GENRE_COLORS).
     Rammer kører med 50% så de falder tilbage som mørke linjer;
     første --line er fallback uden color-mix. */
  --accent: var(--color-cream);
  --on-accent: var(--color-black);
  --accent-ink: var(--accent);
  --accent-ink: color-mix(in srgb, var(--accent) 70%, white);
  --line: var(--accent);
  --line: color-mix(in srgb, var(--accent) 50%, transparent);
  --focus: var(--color-white);
  --action: var(--color-white);
  --link: var(--color-info);

  /* fonte */
  --font-pixel: "Press Start 2P", ui-monospace, monospace;
  --font-body: "IBM Plex Mono", ui-monospace, monospace;

  /* SKRIFTSTØRRELSER — de eneste 5 du må bruge:
     xs = mini-loading · s = al lille tekst · m = base/knapper ·
     l = preview-titel · xl = preview-titel på stor skærm.
     Vil du ændre typografi, så ret kun her. */
  --fs-xs: 11px;
  --fs-s: 12px;
  --fs-m: 16px;
  --fs-l: 24px;
  --fs-xl: 24px;

  /* linjehøjder — kun disse 3 */
  --lh-tight: 1.5;
  --lh-body: 1.6;
  --lh-loose: 2;

  /* borders + fokus — kun disse 2 */
  --border: 1px solid var(--line);
  --focus-ring: 3px solid var(--ink);

  /* layout (ret kun her) */
  --gutter: 40px;
  --card-gap: 44px;
  --card: 256px;
  --preview-w: clamp(440px, 33%, 592px);

  /* ikoner (alle 2x for skarpe pixels) */
  --ico: 24px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; }
/* body-typografi (samme dokument alle steder). Console-shell'ens faste
   viewport-layout (height/flex/overflow) ligger i console.css. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-m);
  line-height: var(--lh-body);
}
::selection { background: var(--focus); color: var(--bg); }

/* skarpe pixels: kun pixel-fonten slår smoothing fra */
.brand, .genre, .shoulder, .play-btn, .preview-title,
.pm-title, .empty-title,
.player-stage .loading, .preview.is-empty .preview-title {
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* alle pixel-grafikker forbliver skarpe — ét sted (glow-kopien er bevidst blød) */
.brand-logo, .card-thumb .thumb-main, .preview-media img, .ico {
  image-rendering: pixelated;
}

/* al tastatur-fokus ser ens ud — ét sted */
.shoulder:focus-visible,
.play-btn:focus-visible,
.preview-splitter:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* PROPOSAL .pd-round (now site-CSS — valgt geometri: variant A v-shift).
   Samme sprog som .kb (vars, dobbelt-form, shift), men helt rund.
   Genbruger --kb-* vars så faces følger accent automatisk. */
.pd-round {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kb-inner);
  height: var(--kb-inner);
  padding: 0;
  margin: calc(var(--kb-pad) - var(--kb-shift)) var(--kb-pad) calc(var(--kb-pad) + var(--kb-shift));
  color: var(--kb-ink);
  font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
  font-size: var(--kb-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.pd-round::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kb-bg);
  border: var(--kb-stroke) solid var(--kb-ink);
  border-radius: calc(var(--kb-radius) - var(--kb-pad));
}
/* Variant A: inner + outer samme diameter, outer skiftet nedad. */
.pd-round.v-shift::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  transform: translateY(var(--kb-shift));
  border: var(--kb-stroke) solid var(--kb-ink);
  border-radius: var(--kb-radius);
  pointer-events: none;
}
/* Variant B: kb-stil koncentrisk (større outer), rund. */
.pd-round.v-kb::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: calc(-1 * var(--kb-pad));
  right: calc(-1 * var(--kb-pad));
  top: calc(var(--kb-shift) - var(--kb-pad));
  bottom: calc(-1 * (var(--kb-pad) + var(--kb-shift)));
  border: var(--kb-stroke) solid var(--kb-ink);
  border-radius: var(--kb-radius);
  pointer-events: none;
}

/* .pd-pill: Select/Start — aflang, helt runde hjørner, 2px lavere end .pd-round. */
.pd-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--kb-inner) - 2px);
  padding: 0 8px;
  margin: calc(var(--kb-pad) - var(--kb-shift)) var(--kb-pad) calc(var(--kb-pad) + var(--kb-shift));
  color: var(--kb-ink);
  font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
  font-size: var(--kb-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.pd-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kb-bg);
  border: var(--kb-stroke) solid var(--kb-ink);
  border-radius: 999px;
}
.pd-pill::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  transform: translateY(var(--kb-shift));
  border: var(--kb-stroke) solid var(--kb-ink);
  border-radius: 999px;
  pointer-events: none;
}

/* .pd-shoulder: L1/R1 — bredere, runde øverst, 2px radius nederst. */
.pd-shoulder {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--kb-inner);
  padding: 0 6px;
  margin: calc(var(--kb-pad) - var(--kb-shift)) var(--kb-pad) calc(var(--kb-pad) + var(--kb-shift));
  color: var(--kb-ink);
  font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace;
  font-size: var(--kb-font-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.pd-shoulder.bumpL {
  border-top-right-radius: 2px;
}
.pd-shoulder.bumpR {
  border-top-left-radius: 2px;
}
.pd-shoulder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kb-bg);
  border: var(--kb-stroke) solid var(--kb-ink);
  border-radius: 6px 6px 2px 2px;
}
.pd-shoulder.bumpL::before {
  border-top-right-radius: 2px;
}
.pd-shoulder.bumpR::before {
  border-top-left-radius: 2px;
}
.pd-shoulder::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  transform: translateY(var(--kb-shift));
  border: var(--kb-stroke) solid var(--kb-ink);
  border-radius: 6px 6px 2px 2px;
  pointer-events: none;
}
.pd-shoulder.bumpL::after {
  border-top-right-radius: 2px;
}
.pd-shoulder.bumpR::after {
  border-top-left-radius: 2px;
}

/* kort viser valgt via .focused-rammen om billedet — aldrig DOM-outline,
   ellers bliver den hvide kasse hængende på det klikkede kort
   når man navigerer videre med tasterne. */
.card:focus, .card:focus-visible { outline: none; }
.shelf-layout:focus, .shelf-wrap:focus, .grid:focus, .preview:focus { outline: none; }
.preview-splitter:focus-visible { outline-offset: -3px; }

/* generisk skjul — ét sted */
.hidden { display: none !important; }

/* ---------- scrollbars: chunky square natives, theme colors ----------
   Globalt fælles-atom (flyttet fra console.css — 1:1 samme design som
   shelfen, slår igennem på alle sider). Firefox får width + colors;
   WebKit får det fulde square treatment. Gutter er auto så sporet kun
   findes når der er noget at scrolle (ingen tom rende). */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--accent) #000;
  scrollbar-gutter: auto;
}
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track {
  background: #000;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid #000;
  border-radius: 0;
}
::-webkit-scrollbar-corner { background: #000; border-radius: 0; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-ink); }

/* tags/pills: genre-farven som baggrund, ingen ramme, runde hjørner.
   Tekstfarven følger automatisk med (on-accent fra JS). */
.pill {
  font-family: var(--font-body);
  /* body-font med normal smoothing: pixel-forældre (fx .brand) slår
     smoothing fra, og det nedarves — samme mønster som .genre-count. */
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
  font-size: var(--fs-xs);
  line-height: 1.4;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- header: samme topbar alle steder (shelf, about, admin) ---------- */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-s);
  padding: var(--fs-m) calc(var(--gutter) / 2);
  border-bottom: var(--border);
  background: var(--bg);
}
.brand {
  font-family: var(--font-pixel);
  font-size: var(--fs-m);
  white-space: nowrap;
}
.brand-logo {
  height: var(--ico);
  width: auto;
  margin-right: 12px;
  vertical-align: -6px;
}

/* ============================================================
   DELTE ATOMER (genbruges på tværs af sider — shelf, about, admin).
   Alt her er sidens eget formsprog: tokens + 1px --border + --fs-*.
   Ingen af reglerne rammer shelfen medmindre klasserne bruges der.
   ============================================================ */

/* mørkt UI til browserens egne kontroller (scrollbars, dropdowns) */
:root { color-scheme: dark; }

/* ---------- knapper: 1px ramme, invertering på hover
   (samme sprog som .player-close:hover) ---------- */
.btn {
  font-family: var(--font-body);
  font-size: var(--fs-s);
  line-height: 1.4;
  padding: 4px 10px;
  background: transparent;
  color: var(--ink);
  border: var(--border);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--bg); }
/* primary handling: accent-fyld som PLAY-knappen */
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.1); }
.btn:disabled {
  background: transparent;
  color: var(--faint);
  border: var(--border);
  cursor: default;
}
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---------- formular: labels + inputs i sidens typografi ---------- */
.label {
  display: block;
  color: var(--sub);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.input {
  font-family: var(--font-body);
  font-size: var(--fs-s);
  line-height: var(--lh-body);
  background: color-mix(in srgb, var(--color-white) 10%, var(--bg));
  color: var(--ink);
  border: var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 41px;
}
select.input, textarea.input { line-height: var(--lh-body); }
.input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.input::placeholder { color: var(--faint); }
/* native afkrydsning i accent-farven (ingen sprite nødvendig) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- pills: status-varianter i palettens egne farver ---------- */
.pill.is-alert { background: var(--color-red); color: var(--color-white); }
.pill.is-dim {
  background: transparent;
  color: var(--sub);
  border: 1px solid var(--line);
}

/* ---------- toaster: passive beskeder (fx "SAVED").
   JS bygger .toast-knuder i .toasts og falmer dem via WAAPI —
   ingen transition-klasser her (samme mønster som preview-gif'en).
   Sprog som knapperne: 1px --border, firkantet, --fs-s. ---------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--gutter);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-s);
  max-width: min(90vw, 480px);
  pointer-events: none;
}
.toast {
  font-family: var(--font-body);
  font-size: var(--fs-s);
  line-height: 1.4;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--bg);
  border: var(--border);
  border-radius: 0;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.is-alert { background: var(--color-red); color: var(--color-white); }

/* ---------- tabel: 1px rækker, sub-headers, sticky thead ---------- */.table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.table th {
  color: var(--sub);
  text-align: left;
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: normal;
  padding: 6px 8px;
  border-bottom: var(--border);
}
.table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.table td {
  padding: 6px 8px;
  border-bottom: var(--border);
  vertical-align: top;
}
.table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* tabel-tal på række (versioner, counts) */
.tnum { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- combobox-dropdown (fx genre-autocomplete): samme sprog
   som knapperne — 1px ramme, invertering på aktivt forslag ---------- */
.combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  background: var(--bg);
  border: var(--border);
  border-top: 0;
  max-height: 240px;
  overflow-y: auto;
}
.combo-item {
  padding: 6px 8px;
  font-size: var(--fs-s);
  cursor: pointer;
}
.combo-item.is-active { background: var(--ink); color: var(--bg); }