/* LoreKeep — designet fra dnd-design-skillen (~/.claude/skills/dnd-design).
   Farver: målt i lorekeep-app-moerk.png (mørk) og afledt (lys). Ingen ornamentik, ingen skygger:
   flader i lag adskilt af små lyshedsforskelle og 1 px-kanter. Farve kun som signal.
   Tokens herunder er FÆLLES for dnd.c-o.dk (landingsside, Combat Tracker) — kilden er skillen. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-italic.woff2") format("woff2"); }

/* ---------------------------------------------------------------- tokens: mørk */
:root, :root[data-tema="moerk"] {
  --sidebar: #131516; --bg: #18191a; --surface: #1b1b1c; --active: #1d1d1e; --chip: #28292a; --border: #323233;
  --text-1: #e7eaee; --text-body: #c0c3c7; --text-2: #8d919a; --text-3: #878b93;
  --star: #eed152; --star-fyld: #eed152; --ok: #4cb782; --fare: #eb6a50;
  --admin: #b3261e; --admin-tekst: #ffffff; /* reserveret admin-bjælken — ingen anden flade må være rød */
  --fokus: #8d919a;
  color-scheme: dark;
}
/* ---------------------------------------------------------------- tokens: lys (samme design, lyse farver) */
:root[data-tema="lys"] {
  --sidebar: #f3f4f6; --bg: #fcfcfd; --surface: #ffffff; --active: #e9ebee; --chip: #eceef1; --border: #dfe1e5;
  --text-1: #1b1d21; --text-body: #3c4048; --text-2: #626772; --text-3: #626772;
  --star: #7a6000; --star-fyld: #eed152; --ok: #1b6e45; --fare: #b4401f; --fokus: #626772;
  color-scheme: light;
}
@media (prefers-color-scheme: light) { :root:not([data-tema]) {
  --sidebar: #f3f4f6; --bg: #fcfcfd; --surface: #ffffff; --active: #e9ebee; --chip: #eceef1; --border: #dfe1e5;
  --text-1: #1b1d21; --text-body: #3c4048; --text-2: #626772; --text-3: #626772;
  --star: #7a6000; --star-fyld: #eed152; --ok: #1b6e45; --fare: #b4401f; --fokus: #626772;
  color-scheme: light;
} }
:root {
  --skrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-lille: 6px; --r: 8px; --r-stor: 10px; --r-dialog: 12px;
  --sidebar-bredde: 248px; --tekstbredde: 70ch; --maal: 44px;
}

/* ---------------------------------------------------------------- grundlag */
* { box-sizing: border-box; }
/* hidden skal altid vinde — ellers overskriver fx .stak { display: flex } det (fundet 7. okt.: konflikt-boksen
   i editoren var altid synlig). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sidebar); color: var(--text-body); font: 15px/1.6 var(--skrift);
  font-feature-settings: "cv11", "ss01"; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--text-1); font-weight: 560; letter-spacing: -0.012em; line-height: 1.25; margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
a { color: var(--text-1); text-decoration-color: var(--border); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text-2); }
img { max-width: 100%; height: auto; }
code { font-family: var(--mono); font-size: .88em; background: var(--chip); border-radius: var(--r-lille); padding: .1em .4em; color: var(--text-1); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--r-lille); }
.skjult-for-oejne { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ikon { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.ikon.stor { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- admin-bjælke */
.admin-bjaelke { position: sticky; top: 0; z-index: 50; display: flex; gap: 1rem; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: .45rem 1rem; background: var(--admin); color: var(--admin-tekst); font-weight: 560; }
.admin-bjaelke form { margin: 0; }
.admin-bjaelke button { min-height: 34px; padding: 0 .9rem; border: 0; border-radius: var(--r-lille); background: #fff; color: var(--admin); font: inherit; font-weight: 600; cursor: pointer; }

/* ---------------------------------------------------------------- ramme: sidebar + plade */
.ramme { display: grid; grid-template-columns: var(--sidebar-bredde) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  padding: .75rem .6rem .6rem; gap: .2rem; }
.sb-top { display: flex; align-items: center; gap: .25rem; padding: .2rem .25rem .7rem .5rem; }
.sb-navn { font-weight: 600; color: var(--text-1); font-size: 16px; text-decoration: none; margin-right: auto; letter-spacing: -0.01em; }
.sb-punkt { display: flex; align-items: center; gap: .65rem; min-height: 38px; padding: 0 .6rem; border-radius: var(--r);
  color: var(--text-1); text-decoration: none; font-size: 14.5px; }
.sb-punkt .ikon { color: var(--text-2); }
.sb-punkt:hover, .sb-punkt[aria-current="page"] { background: var(--active); }
.sb-punkt .tal { margin-left: auto; color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sb-punkt .badge { margin-left: auto; }
.sb-punkt .navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-gruppe { margin-top: .9rem; }
.sb-gruppe > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .3rem; min-height: 30px;
  padding: 0 .6rem; color: var(--text-3); font-size: 13px; user-select: none; }
.sb-gruppe > summary::-webkit-details-marker { display: none; }
.sb-gruppe > summary .ikon { width: 13px; height: 13px; transition: transform .15s; }
.sb-gruppe:not([open]) > summary .ikon { transform: rotate(-90deg); }
.sb-tom { padding: .2rem .6rem; color: var(--text-3); font-size: 13px; }
.sb-bund { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; gap: .25rem; }

.plade { margin: 8px 8px 8px 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-stor);
  min-height: calc(100vh - 16px); min-width: 0; display: flex; flex-direction: column; }
.topbjaelke { display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .5rem 1rem .5rem 1.25rem; }
.topbjaelke .sti { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--text-1); font-weight: 520; }
.topbjaelke .sti .ikon { color: var(--text-2); }
.topbjaelke .sti .titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbjaelke .hoejre { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.indhold { padding: 1.5rem clamp(1rem, 5vw, 6.5rem) 4rem; flex: 1; }
.indhold.bred { padding-inline: clamp(1rem, 3vw, 2.5rem); }
.ikonknap.menuknap { display: none; }

/* ---------------------------------------------------------------- knapper og felter */
.knap, button.knap { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 36px;
  padding: 0 .85rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  color: var(--text-1); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.knap:hover { background: var(--active); }
.knap.vigtig { background: var(--chip); }
.knap.fare { color: var(--fare); }
.knap.lille { min-height: 30px; padding: 0 .6rem; font-size: 13px; }
.rund { width: 36px; min-width: 36px; padding: 0; border-radius: 50%; }
.ikonknap { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0;
  border-radius: var(--r); background: none; color: var(--text-2); cursor: pointer; text-decoration: none; }
.ikonknap:hover { background: var(--active); color: var(--text-1); }
.favorit[aria-pressed="true"] { color: var(--star); }
.favorit[aria-pressed="true"] .ikon { fill: var(--star-fyld); }
input, select, textarea { font: inherit; color: var(--text-1); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); min-height: 38px; padding: .45rem .7rem; max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type=radio], input[type=checkbox] { min-height: auto; accent-color: var(--text-1); }
input[type=file] { padding: .35rem; color: var(--text-2); font-size: 13.5px; width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; color: var(--text-1); background: var(--chip); border: 1px solid var(--border);
  border-radius: var(--r-lille); padding: .3rem .75rem; margin-right: .7rem; cursor: pointer; }
textarea { width: 100%; line-height: 1.6; }
label { color: var(--text-2); font-size: 13.5px; }
.felt { display: flex; flex-direction: column; gap: .35rem; }
.felt input, .felt select, .felt textarea { font-size: 15px; }
.stak { display: flex; flex-direction: column; gap: .9rem; }
.raekke { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: .6rem .8rem .8rem; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
legend { color: var(--text-2); font-size: 13px; padding: 0 .3rem; }
fieldset label { color: var(--text-body); font-size: 14.5px; display: flex; gap: .5rem; align-items: center; }

/* ---------------------------------------------------------------- tekst og meta */
.daempet { color: var(--text-2); }
.lille-tekst { font-size: 13px; }
.sektion-titel { color: var(--text-2); font-size: 13.5px; font-weight: 500; margin: 2rem 0 .6rem; }
.besked { display: flex; gap: .5rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: .6rem .9rem; margin-bottom: 1.2rem; color: var(--text-1); }
.besked .ikon { color: var(--ok); }
.advarsel { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--fare); border-radius: var(--r);
  padding: .7rem 1rem; margin-bottom: 1.2rem; color: var(--text-1); }
.fejl { color: var(--fare); font-weight: 500; }
.tom { color: var(--text-2); padding: 1rem 0; }

/* chips: Skjult, Kladde, tags — genkendes på ikon + form, ikke farve */
.chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 15rem; vertical-align: middle; background: var(--chip);
  color: var(--text-1); border-radius: var(--r-lille); padding: .05rem .45rem; font-size: 12.5px; font-weight: 500; line-height: 1.6; }
.chip .ikon { width: 13px; height: 13px; }
.chip .chip-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.fuld { max-width: none; }
.chip.fuld .chip-tekst { white-space: normal; }
.chip.tag { background: none; border: 1px solid var(--border); color: var(--text-2); font-weight: 400; }

/* ---------------------------------------------------------------- lister */
.liste { list-style: none; margin: 0; padding: 0; }
.raekke-link { display: flex; align-items: center; gap: .8rem; min-height: 60px; padding: .55rem .75rem; border-radius: var(--r);
  text-decoration: none; color: inherit; }
.raekke-link:hover { background: var(--active); }
.raekke-link > .ikon { color: var(--text-2); }
.raekke-tekst { min-width: 0; display: flex; flex-direction: column; }
.raekke-titel { color: var(--text-1); display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.raekke-under { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kort { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-stor); padding: 1rem 1.1rem; }

/* ---------------------------------------------------------------- artikel */
.artikel-gitter { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 3rem; align-items: start; }
.artikel h1 { margin-bottom: .5rem; }
.artikel .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 1rem; }
.tekst { max-width: var(--tekstbredde); color: var(--text-body); font-size: 15.5px; }
.tekst > :first-child { margin-top: 0; }
.tekst h1, .tekst h2, .tekst h3 { margin: 1.8rem 0 .6rem; }
.tekst h1 { font-size: 22px; } .tekst h2 { font-size: 19px; } .tekst h3 { font-size: 16px; }
.tekst p, .tekst ul, .tekst ol { margin: 0 0 1em; }
.tekst blockquote { margin: 0 0 1em; padding-left: 1rem; border-left: 2px solid var(--border); color: var(--text-2); }
.tekst table { border-collapse: collapse; display: block; overflow-x: auto; margin-bottom: 1em; }
.tekst th, .tekst td { border: 1px solid var(--border); padding: .35rem .65rem; text-align: left; }
.tekst pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .8rem; overflow-x: auto; }
.tekst pre code { background: none; padding: 0; }
.tekst hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* noter = kommentarkort fra referencen */
.noter { display: flex; flex-direction: column; gap: .8rem; }
.note-kort { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-stor); padding: .9rem 1.1rem; }
.note-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; padding-right: 4.5rem; }
.note-top .hvem { color: var(--text-1); font-weight: 520; }
.note-top .tid { color: var(--text-2); font-size: 13.5px; }
.note-top .titel { color: var(--text-1); }
.note-handlinger { position: absolute; top: .55rem; right: .55rem; display: flex; gap: .1rem; }
.note-kort .tekst { font-size: 15px; }
.foldet > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: var(--maal); color: var(--text-2); }
.foldet > summary::-webkit-details-marker { display: none; }
.foldet[open] > summary { margin-bottom: .5rem; }

/* tidslinje */
.tidslinje { list-style: none; margin: 0; padding: 0; position: relative; }
.tidslinje li { position: relative; display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; color: var(--text-2); font-size: 14px; }
.tidslinje li::before { content: ""; position: absolute; left: 11px; top: 30px; bottom: -6px; width: 1px; background: var(--border); }
.tidslinje li:last-child::before { display: none; }
.tl-ikon { flex: none; width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2); }
.tl-ikon .ikon { width: 12px; height: 12px; }
.tidslinje .hvem, .tidslinje .hvad { color: var(--text-1); }

/* detaljepanel til højre */
.detaljer { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1.4rem; font-size: 14px; }
.detaljer h3 { color: var(--text-2); font-size: 13px; font-weight: 500; margin-bottom: .45rem; }
.nv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1rem; margin: 0; }
.nv dt { color: var(--text-2); }
.nv dd { margin: 0; color: var(--text-1); text-align: right; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .3rem; }
.mini-liste a { display: flex; align-items: center; gap: .5rem; min-height: 32px; padding: 0 .4rem; margin: 0 -.4rem; border-radius: var(--r-lille);
  text-decoration: none; color: var(--text-1); }
.mini-liste a:hover { background: var(--active); }
.mini-liste .ikon { color: var(--text-2); }
.billeder { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.billeder img { border-radius: var(--r); border: 1px solid var(--border); aspect-ratio: 1; object-fit: cover; width: 100%; }
.panel-blok > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .35rem; color: var(--text-2); font-size: 13px; font-weight: 500; min-height: 30px; }
.panel-blok > summary::-webkit-details-marker { display: none; }
.panel-blok > summary .ikon { width: 13px; height: 13px; transition: transform .15s; }
.panel-blok:not([open]) > summary .ikon { transform: rotate(-90deg); }
.panel-blok[open] > summary { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- menuer (popover via <details>) */
.popmenu { position: relative; }
.popmenu > summary { list-style: none; cursor: pointer; }
.popmenu > summary::-webkit-details-marker { display: none; }
.menu { position: absolute; z-index: 40; min-width: 14rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-stor); padding: .35rem; display: flex; flex-direction: column; }
.menu.op { bottom: calc(100% + .4rem); left: 0; }
.menu.ned { top: calc(100% + .3rem); right: 0; }
.menu a, .menu button { display: flex; align-items: center; gap: .6rem; min-height: 38px; padding: 0 .6rem; border: 0; border-radius: var(--r-lille);
  background: none; color: var(--text-1); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; width: 100%; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--active); }
.menu .ikon { color: var(--text-2); }
.menu .fare, .menu .fare .ikon { color: var(--fare); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: .3rem 0; }
.menu form { margin: 0; }
.menu-navn { padding: .4rem .6rem .5rem; color: var(--text-2); font-size: 13px; }
.bruger { display: flex; align-items: center; gap: .55rem; min-height: 40px; padding: 0 .5rem; border-radius: var(--r); color: var(--text-1); }
.bruger:hover { background: var(--active); }
.bruger .navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; font-size: 14px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--text-1); font-size: 11.5px; font-weight: 600; }
.avatar.stor { width: 72px; height: 72px; font-size: 26px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--chip); color: var(--text-1); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tal-kort (statistik, fra landingsreferencen) */
.tal-kort { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem; }
.tal-kort > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-stor); padding: .9rem 1rem; min-height: 112px;
  display: flex; flex-direction: column; }
.tal-kort .tal { color: var(--text-1); font-size: 24px; font-weight: 520; font-variant-numeric: tabular-nums; }
.tal-kort .ikon { color: var(--text-2); margin-top: auto; margin-bottom: .3rem; }
.tal-kort .navn { color: var(--text-2); font-size: 13px; }

/* ---------------------------------------------------------------- tabeller */
.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { color: var(--text-2); font-weight: 500; text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabel td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-1); }
.tabel code { white-space: pre-wrap; word-break: break-all; }
.token { display: block; padding: .6rem .8rem; word-break: break-all; user-select: all; margin: .4rem 0; }

/* ---------------------------------------------------------------- editor */
.editor { display: flex; flex-direction: column; gap: .9rem; max-width: 52rem; }
.editor .titel-felt { font-size: 24px; font-weight: 560; letter-spacing: -0.012em; border: 0; background: none; padding: .2rem 0; min-height: 44px; }
.editor .titel-felt:focus-visible { outline: none; box-shadow: 0 1px 0 var(--border); border-radius: 0; }
.editor textarea[data-krop] { min-height: 22rem; font-size: 15px; resize: vertical; }
.faner { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); align-self: flex-start; }
.faner button { min-height: 30px; padding: 0 .8rem; border: 0; border-radius: var(--r-lille); background: none; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.faner button.aktiv { background: var(--chip); color: var(--text-1); }
.forhaandsvisning { border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.2rem; min-height: 22rem; max-width: none; }
.status { min-height: 1.4rem; margin: 0; color: var(--text-2); font-size: 13.5px; }
.metafelter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .8rem; }


/* ---------------------------------------------------------------- editor: værktøjslinje og flade */
.vaerktoej { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r); padding: 3px; }
.vaerktoej-rulle { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0;
  scroll-behavior: smooth; }
.vaerktoej-rulle::-webkit-scrollbar { display: none; }
.vaerktoej-rulle button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 36px; height: 36px;
  padding: 0 .5rem; border: 0; border-radius: var(--r-lille); background: none; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.vaerktoej-rulle button:hover { background: var(--active); color: var(--text-1); }
.vaerktoej-rulle button[aria-pressed="true"] { background: var(--chip); color: var(--text-1); }
.vaerktoej .skille { flex: none; width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
/* Pile: vises kun når der er flere knapper i den retning (Christian, 7. okt.). */
.vaerktoej .pil { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; border: 0;
  border-radius: var(--r-lille); background: var(--bg); color: var(--text-1); cursor: pointer; position: relative; z-index: 1; }
.vaerktoej .pil.venstre { box-shadow: 8px 0 8px -4px var(--bg); }
.vaerktoej .pil.hoejre { box-shadow: -8px 0 8px -4px var(--bg); }
.editor-flade { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); min-height: 22rem; position: relative; }
.editor-flade .pm-flade { min-height: 22rem; padding: .9rem 1.1rem; outline: none; max-width: none; }
.editor-flade:focus-within { border-color: var(--text-3); }
.editor-flade.tom::before { content: attr(data-placeholder); position: absolute; top: .9rem; left: 1.1rem; color: var(--text-3); pointer-events: none; }
.editor-flade .wikilink { background: var(--chip); color: var(--text-1); border-radius: var(--r-lille); padding: 0 .3rem; white-space: nowrap; }
.editor-flade .wikilink::before { content: "↗ "; color: var(--text-2); font-size: .85em; }
.editor-flade a { color: var(--text-1); }
.editor-panel { border: 1px solid var(--border); border-radius: var(--r-stor); background: var(--surface); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .5rem; }
.editor-panel .raekke input { flex: 1; min-width: 10rem; }
.panel-top { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 13.5px; }
.panel-liste { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.panel-liste button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .6rem; min-height: 40px; padding: 0 .6rem;
  border: 0; border-radius: var(--r-lille); background: none; color: var(--text-1); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.panel-liste button:hover, .panel-liste button[aria-selected="true"] { background: var(--active); }
.panel-type { color: var(--text-2); font-size: 12.5px; flex: none; }
.panel-tom { color: var(--text-2); padding: .4rem .6rem; font-size: 14px; }
/* ProseMirrors egne nødvendige regler (prosemirror-view/style/prosemirror.css) */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror pre { white-space: pre-wrap; }
.ProseMirror li { position: relative; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror [draggable][contenteditable=false] { user-select: text; }
.ProseMirror-selectednode { outline: 2px solid var(--fokus); border-radius: var(--r-lille); }
li.ProseMirror-selectednode { outline: none; }
li.ProseMirror-selectednode::after { content: ""; position: absolute; inset: -2px -2px -2px -32px; border: 2px solid var(--fokus); pointer-events: none; }
.ProseMirror-gapcursor { display: none; }


/* ---------------------------------------------------------------- billeder i teksten, opret, info */
.tekst .billede-link { display: block; margin: 1.2rem 0; }
.tekst .billede-link img { display: block; max-width: 100%; border-radius: var(--r); border: 1px solid var(--border); }
.billede-mangler { color: var(--text-2); font-style: italic; }
.editor-flade .pm-billede { display: block; max-width: 100%; margin: .8rem 0; border-radius: var(--r); border: 1px solid var(--border); }
.vaerktoej-rulle button:disabled { opacity: .4; cursor: not-allowed; }
.info-knap { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: none; color: var(--text-2); cursor: pointer; padding: 0; }
.info-knap:hover, .info-knap[aria-expanded="true"] { background: var(--chip); color: var(--text-1); }
.info-note { margin: 0; background: var(--chip); color: var(--text-1); border-radius: var(--r); padding: .6rem .8rem; font-size: 13.5px; }
.editor-bund { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.opret-dialog { width: min(92vw, 26rem); }
.dialog-top .dialog-titel { margin-right: auto; color: var(--text-1); font-weight: 560; }
.opret-dialog .dialog-top { align-items: center; margin: -.3rem -.6rem .6rem 0; }
.smal-indhold { max-width: 30rem; }
.smal-indhold h1 { margin-bottom: 1.2rem; }

/* ---------------------------------------------------------------- dialog og toast */
.dialog { border: 1px solid var(--border); border-radius: var(--r-dialog); background: var(--surface); color: var(--text-1);
  padding: 1rem 1.2rem 1.2rem; max-width: min(92vw, 25rem); }
.dialog:focus { outline: none; }
.dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialog p { margin: .2rem 0 1rem; font-size: 15.5px; }
.dialog-top { display: flex; justify-content: flex-end; margin: -.4rem -.6rem 0 0; }
.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; display: flex; gap: .9rem; align-items: center;
  background: var(--surface); color: var(--text-1); border: 1px solid var(--border); border-radius: var(--r-stor); padding: .45rem .5rem .45rem 1rem; max-width: 92vw; }
.toast[hidden] { display: none; }

/* ---------------------------------------------------------------- login (uden sidebar) */
.enkel { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.enkel-kort { width: min(100%, 24rem); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-stor); padding: 1.6rem; }
.enkel-kort h1 { font-size: 22px; margin-bottom: 1.2rem; }
.enkel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; color: var(--text-1); font-weight: 600; }


/* ---------------------------------------------------------------- små hjælpere */
[data-luft] { margin-top: 1.2rem; }
.sektioner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-top: 1.4rem; }
.sektioner .kort h2 { font-size: 17px; }
.skub-hoejre { margin-left: auto; }
.soeg-form { margin-bottom: 1.2rem; }
.soeg-form input { flex: 1; min-width: 12rem; }
.ulaest .raekke-titel { font-weight: 560; }
.raekke-felt { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
.topbjaelke .popmenu { display: inline-flex; }
/* Kontekstmenuen: bred skærm lige efter titlen, menuen åbner mod højre. */
.kontekstmenu .menu { left: 0; right: auto; }
.kun-smal { display: none !important; }
.hjem-smal { font-weight: 600; color: var(--text-1); text-decoration: none; font-size: 16px; letter-spacing: -0.01em; padding: 0 .25rem; }
/* temaknap: sol i mørk tilstand (skift til lys), måne i lys */
.vis-lys { display: none; }
:root[data-tema="lys"] .vis-lys { display: block; }
:root[data-tema="lys"] .vis-moerk { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) .vis-lys { display: block; }
  :root:not([data-tema]) .vis-moerk { display: none; }
}

/* ================================================================ små skærme */
/* Tablet og telefon, stående: sidebaren bliver en skuffe bag menuknappen. */
@media (max-width: 1100px) {
  .artikel-gitter { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .detaljer { position: static; border-top: 1px solid var(--border); padding-top: 1.5rem; }
}
@media (max-width: 900px) {
  .ramme { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 45; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); background: var(--sidebar);
    border-right: 1px solid var(--border); transform: translateX(-102%); transition: transform .2s ease;
    height: 100dvh; overscroll-behavior: contain;
    /* iPhone (Christian, 8. okt.): Safaris adresselinje svæver over bunden og skjulte brugermenuen.
       Luft til sikkerhedsmargen + linjen, så nederste punkt altid kan scrolles fri. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
  body.skuffe-aaben .sidebar { transform: none; }
  body.skuffe-aaben::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .5); }
  .plade { margin: 0; border: 0; border-radius: 0; min-height: 100vh; }
  .ikonknap.menuknap { display: inline-flex; }
  .topbjaelke { padding-left: .5rem; position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--border); }
  .indhold { padding: 1.2rem 1rem 3rem; }
  .sb-punkt, .menu a, .menu button { min-height: var(--maal); }
  .ikonknap { width: var(--maal); height: var(--maal); }
  .knap { min-height: var(--maal); }
  .rund { width: var(--maal); min-width: var(--maal); }
  .vaerktoej-rulle button { min-width: var(--maal); height: var(--maal); }
  .vaerktoej .pil { height: var(--maal); }
}

/* Smal skærm, IKKE liggende telefon (Christian, 7. okt.: for meget rod i toppen på iPhone stående):
   ☰ + LoreKeep til venstre, tandhjul til højre — favorit, rediger og kopiér link ligger i menuen. */
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  .ikon.kun-smal { display: block !important; }
  .menu button.kun-smal, .hjem-smal.kun-smal { display: flex !important; align-items: center; }
  .hjem-smal.kun-smal { min-height: var(--maal); }
  .kun-bred { display: none !important; }
  .topbjaelke .sti { display: none; }
  .kontekstmenu { margin-left: auto; }
  .kontekstmenu .menu { left: auto; right: 0; }
  /* LoreKeep centreret (Christian, 7. okt.); højre-knapperne bliver rene ikoner, så de ikke støder ind i det. */
  .topbjaelke { position: sticky; }
  .hjem-smal.kun-smal { position: absolute; left: 50%; transform: translateX(-50%); }
  .topbjaelke .hoejre { margin-left: auto; }
  .topbjaelke .hoejre .knap { width: var(--maal); padding: 0; }
  .topbjaelke .knap-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Telefon, liggende: lav og bred skærm — smal ikon-sidebar, så teksten får bredden. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1100px) {
  .ramme { grid-template-columns: 60px minmax(0, 1fr); }
  .sidebar { position: sticky; transform: none; width: auto; border-right: 0; padding: .4rem .35rem; align-items: center; }
  .sidebar .navn, .sidebar .tal, .sidebar .sb-navn, .sb-gruppe, .sb-tom, .sb-top .ikonknap.sb-soeg { display: none; }
  .sb-top { padding: 0 0 .3rem; flex-direction: column; }
  .sb-punkt { justify-content: center; padding: 0; width: var(--maal); }
  .sb-punkt .badge { position: absolute; margin: -18px -22px 0 0; }
  .sb-bund { flex-direction: column; }
  .bruger { padding: 0; justify-content: center; width: var(--maal); }
  .ikonknap.menuknap { display: none; }
  /* Kategorierne skal kunne nås i ikon-sidebaren; favoritter og kladder findes via Oversigt. */
  .sb-gruppe.sb-verden { display: block; margin-top: .4rem; }
  .sb-gruppe.sb-verden > summary { display: none; }
  .plade { margin: 0; border-radius: 0; border: 0; border-left: 1px solid var(--border); }
  .topbjaelke { position: static; min-height: 48px; }
  .indhold { padding: .9rem 1.2rem 2rem; }
  .editor textarea[data-krop] { min-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }