/* ---------- Farver ---------- */
:root {
  --bg: #f3f4f7;
  --panel: #ffffff;
  --editor-bg: #ffffff;
  --gutter-bg: #f6f7fa;
  --border: #dfe2ea;
  --text: #1c2030;
  --muted: #6b7286;
  --accent: #2f5bea;
  --accent-soft: #e6ecff;
  --accent-text: #ffffff;
  --danger: #c62d3a;
  --danger-soft: #fdeaec;
  --active-line: #eef2ff;
  --scroll-thumb: #c3c8d6;
  --selection-bg: rgba(47, 91, 234, 0.28);
  --menu-hover: #eef1f8;
  --toast-bg: #1c2030;
  --toast-text: #ffffff;

  --lh: 26px;           /* linjehøjde – skal være helt tal så linjenumre passer */
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Syntaksfarver (bruges når en tekst har et sprog valgt) */
  --tok-comment: #7d8390;
  --tok-string: #b5541a;
  --tok-number: #12766b;
  --tok-keyword: #1d4ed8;
  --tok-builtin: #7c3aed;
  --tok-function: #a3690a;
  --tok-variable: #0f766e;
  --tok-tag: #b02a37;
  --tok-attr: #6d28d9;
  --tok-preproc: #64748b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161d;
    --panel: #1b1e28;
    --editor-bg: #1b1e28;
    --gutter-bg: #171a22;
    --border: #2a2f3d;
    --text: #e6e8ef;
    --muted: #8b92a7;
    --accent: #6f8dff;
    --accent-soft: #252c47;
    --accent-text: #0e1220;
    --danger: #ff6b76;
    --danger-soft: #3a2025;
    --active-line: #212638;
    --scroll-thumb: #3a4054;
    --selection-bg: rgba(111, 141, 255, 0.35);
    --menu-hover: #262b3c;
    --toast-bg: #2a2f3d;
    --toast-text: #f1f3fa;

    --tok-comment: #8a93a8;
    --tok-string: #e0995a;
    --tok-number: #4fd1c5;
    --tok-keyword: #7aa2ff;
    --tok-builtin: #c58bff;
    --tok-function: #f0b35e;
    --tok-variable: #5eead4;
    --tok-tag: #ff8a8a;
    --tok-attr: #c9a3ff;
    --tok-preproc: #9aa4b8;
  }
}

/* ---------- Grundlæggende ---------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 15px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

button, input, textarea { font: inherit; color: inherit; }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 19px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* ---------- Layout ---------- */
.app {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns .2s ease;
}
.app.sidebar-open { grid-template-columns: 260px minmax(0, 1fr); }

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
}
.app.sidebar-open .sidebar { visibility: visible; }

.sidebar-head {
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
}
/* flex-wrap: da vi løbende har tilføjet flere ikon-knapper (backup/import osv.),
   var der ikke længere plads til dem alle sammen med titlen på én linje i den
   260px brede sidebar - med "overflow: hidden" på selve sidebaren betød det i
   praksis, at den sidste knap (Guide) blev skåret usynligt af i stedet for
   bare at blive trængt. Med wrap lander ikonerne i stedet på deres egen linje,
   når der ikke er plads - ingen af dem forsvinder. */
.sidebar-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sidebar-head h1 { margin: 0; font-size: 16px; white-space: nowrap; }
/* flex-wrap + ingen flex-shrink:0: uden dette holdt knap-rækken (5 ikoner)
   sin fulde bredde (langt mere end sidebarens 232px indre bredde) og blev
   simpelthen klippet af sidebarens "overflow: hidden" - med wrap kan de
   fordele sig på flere linjer i stedet, så ingen af dem (fx Guide) forsvinder. */
.sidebar-head-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; max-width: 100%; }
.sidebar-head-actions .btn.icon { color: var(--muted); text-decoration: none; }

.doc-list {
  list-style: none;
  margin: 0;
  padding: 4px 8px 12px;
  overflow-y: auto;
  min-width: 260px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.doc-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  margin-bottom: 2px;
  cursor: pointer;
}
.doc-item:hover { background: var(--gutter-bg); }
.doc-item.active { background: var(--accent-soft); border-color: var(--accent); }
.doc-item .doc-title {
  display: block; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-item .doc-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.undo-redo-group { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.recovery-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
}
/* VIGTIGT: uden denne linje slår [hidden]-attributten IKKE igennem, fordi
   .recovery-banners egen "display: flex" (fra dette stylesheet) har samme
   forrang som browserens indbyggede "[hidden] { display: none }" – og når
   begge er lige "vigtige", vinder den, der står i SIDEST indlæste
   stylesheet, som her er vores egen. Uden denne regel forbliver banneret
   (og enhver bruger af samme klasse, fx opdaterings-banneret) permanent
   synligt på skærmen, selvom hidden-attributten er sat korrekt – med
   knapper, der ser klikbare ud, men ingen klik-lyttere har fået, fordi
   JS'en (med rette) aldrig satte banneret op, når der intet var at vise. */
.recovery-banner[hidden] { display: none; }
.recovery-banner .material-symbols-outlined { color: var(--accent); flex-shrink: 0; }
.recovery-banner__text { flex: 1; min-width: 0; }
.recovery-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }

.name-field { flex: 1; min-width: 0; }
.name-field input {
  width: 100%;
  padding: 8px 10px;
  font-size: 17px;
  font-weight: 600;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
}
.name-field input:hover { border-color: var(--border); }
.name-field input:focus { border-color: var(--accent); background: var(--editor-bg); }

.lang-field select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  max-width: 150px;
}
.lang-field select:hover { border-color: var(--accent); }
.lang-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.font-field select { max-width: 170px; }
.size-field select { max-width: 78px; }
.csel-native { display: none; }

/* ---------- Vores egen, pænere dropdown (erstatter <select>-udseendet) ---------- */
.csel { position: relative; }
.csel-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 190px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.size-field .csel-trigger { max-width: 92px; }
.csel-trigger:hover { border-color: var(--accent); }
.csel-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.csel.open .csel-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.csel-trigger-icon { font-size: 17px; color: var(--muted); flex: none; }
.csel-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.csel-chevron { font-size: 18px; color: var(--muted); flex: none; transition: transform .15s ease; }
.csel.open .csel-chevron { transform: rotate(180deg); }

.csel-list {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.csel-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
}
.csel-option .material-symbols-outlined:first-child { font-size: 16px; color: var(--muted); flex: none; }
.csel-option-label { flex: 1; }
.csel-check { font-size: 16px; color: var(--accent); flex: none; }
.csel-option:hover, .csel-option.active { background: var(--menu-hover); }
.csel-option.selected .csel-option-label { color: var(--accent); font-weight: 600; }
.csel-option.selected .material-symbols-outlined:first-child { color: var(--accent); }

.csel-list::-webkit-scrollbar { width: 10px; }
.csel-list::-webkit-scrollbar-track { background: transparent; }
.csel-list::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.save-status { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.save-status.error { color: var(--danger); }

/* ---------- Knapper ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.btn:focus-visible, .doc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.btn.icon { padding: 7px 9px; display: inline-flex; align-items: center; }
.btn.icon.toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.icon.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.icon.ghost:hover { background: var(--gutter-bg); color: var(--accent); border-color: transparent; }
.btn.danger.filled { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.btn.danger.filled:hover { filter: brightness(1.08); }

/* ---------- Editor med linjenumre ---------- */
.editor {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;         /* gør at scroll virker i stedet for at siden vokser */
  background: var(--editor-bg);
  overflow: hidden;
}

/* Lys/mørkt tema for KUN skrivefeltet – uafhængigt af resten af appen,
   som ellers følger systemets/browserens eget farveskema. */
.editor[data-theme="light"] {
  --editor-bg: #ffffff;
  --gutter-bg: #f6f7fa;
  --border: #dfe2ea;
  --text: #1c2030;
  --muted: #6b7286;
  --active-line: #eef2ff;
  --scroll-thumb: #c3c8d6;
  --selection-bg: rgba(47, 91, 234, 0.28);
  --tok-comment: #7d8390; --tok-string: #b5541a; --tok-number: #12766b;
  --tok-keyword: #1d4ed8; --tok-builtin: #7c3aed; --tok-function: #a3690a;
  --tok-variable: #0f766e; --tok-tag: #b02a37; --tok-attr: #6d28d9; --tok-preproc: #64748b;
}
.editor[data-theme="dark"] {
  --editor-bg: #1b1e28;
  --gutter-bg: #171a22;
  --border: #2a2f3d;
  --text: #e6e8ef;
  --muted: #8b92a7;
  --active-line: #212638;
  --scroll-thumb: #3a4054;
  --selection-bg: rgba(111, 141, 255, 0.35);
  --tok-comment: #8a93a8; --tok-string: #e0995a; --tok-number: #4fd1c5;
  --tok-keyword: #7aa2ff; --tok-builtin: #c58bff; --tok-function: #f0b35e;
  --tok-variable: #5eead4; --tok-tag: #ff8a8a; --tok-attr: #c9a3ff; --tok-preproc: #9aa4b8;
}

.editor-theme-toggle {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 6;
  background: var(--panel);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.editor-theme-toggle .material-symbols-outlined { font-size: 18px; }

/* Fælles tekstmål for textarea og skjult "spejl" – SKAL være ens for at linjenumre passer */
.metrics {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: var(--lh);
  letter-spacing: normal;
  tab-size: 4;
  padding: 14px 18px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.gutter {
  --digits: 1;
  flex: none;
  width: calc(var(--digits) * 1ch + 32px);
  min-width: 48px;
  overflow: hidden;              /* scroller sammen med tekstfeltet via JS */
  background: var(--gutter-bg);
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  user-select: none;
}
.gutter-inner { padding: 14px 0; }
.ln {
  position: relative;       /* så en evt. .ln-color-dot kan placeres i den ledige plads til venstre for tallet */
  display: flex;
  align-items: center;      /* centrerer tallet lodret i sin række, uanset skrifttypens egne mål */
  justify-content: flex-end;
  text-align: right;
  padding-right: 12px;
  font-variant-numeric: tabular-nums;
}
.ln.active { color: var(--accent); font-weight: 700; background: var(--active-line); }

.code-stack {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.highlight,
.caret-mirror,
#text,
#indentGuides,
#bracketMatch {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
}

/* Det farvede lag ligger nederst og er kun til at kigge på */
.highlight {
  overflow: hidden;
  pointer-events: none;
  background: none;
  color: var(--text);
  z-index: 1;
}
.highlight code { font: inherit; }

/* Indrykningslinjer (VS Code-agtige) – tegnes bag koden, én lodret streg pr.
   indrykningsniveau, kun for kode-sprog (ikke "Almindelig tekst") */
#indentGuides {
  overflow: hidden;
  pointer-events: none;
  background: none;
  color: transparent;
  z-index: 0;
}
.indent-guide {
  position: absolute;
  width: 1px;
  background: var(--border);
  opacity: .8;
}

/* Fremhævning af matchende parentes/HTML-tag omkring markøren */
#bracketMatch {
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bracket-highlight {
  position: absolute;
  background: var(--accent-soft);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  border-radius: 3px;
  box-sizing: border-box;
}

/* Klikbar farve-firkant i GUTTEREN, ud for linjetallet på enhver linje, der
   indeholder en farve (#hex, rgb(a), hsl(a)) inde i en <style>-blok. En
   firkant INDE I selve koden blev prøvet først, men et mellemrum i
   redigeringsfeltets skrifttype er kun ca. 5px bredt – for smalt til
   nogensinde at kunne rumme en synlig firkant uden at dække tegn ved siden
   af eller kollidere med markøren. Gutteren har derimod rigelig ledig plads
   til venstre for tallet (se .ln herover), så firkanten sidder der i
   stedet, helt uden risiko for at overlappe koden. Klik åbner den visuelle
   farvevælger (.color-picker-popup). */
.ln-color-dot {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
  background-image:
    linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
  background-color: #fff;
}
.ln-color-dot:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 3px var(--accent-soft); }

/* ---------- Visuel farvevælger (gradient + nuance/alpha-slidere) ---------- */
.color-picker-popup {
  position: fixed;
  z-index: 90;
  width: 240px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.color-picker-popup[hidden] { display: none; }

.cp-head { display: flex; align-items: center; gap: 6px; }
.cp-format-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  background: none; border: 1px solid var(--border); border-radius: 7px;
  color: var(--muted); cursor: pointer;
}
.cp-format-toggle:hover { color: var(--accent); border-color: var(--accent); }
.cp-format-toggle .material-symbols-outlined { font-size: 17px; }
.cp-value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-close { width: 26px; height: 26px; padding: 0; flex: none; }
.cp-close .material-symbols-outlined { font-size: 17px; }

.cp-area-wrap { position: relative; width: 100%; height: 130px; border-radius: 8px; overflow: hidden; cursor: crosshair; }
.cp-area { display: block; width: 100%; height: 100%; touch-action: none; }
.cp-area-handle {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cp-sliders { display: flex; gap: 9px; }
.cp-hue, .cp-alpha {
  position: relative;
  height: 14px;
  border-radius: 7px;
  cursor: pointer;
  touch-action: none;
}
.cp-hue {
  flex: 1;
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.cp-alpha {
  flex: 1;
  background-color: #fff;
  background-image:
    linear-gradient(to right, rgba(var(--alpha-color, 0, 0, 0), 0), rgba(var(--alpha-color, 0, 0, 0), 1)),
    linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);
  background-size: 100% 100%, 7px 7px, 7px 7px, 7px 7px, 7px 7px;
  background-position: 0 0, 0 0, 0 3.5px, 3.5px -3.5px, -3.5px 0;
}
.cp-hue-handle, .cp-alpha-handle {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: transparent;
}

.cp-footer { display: flex; align-items: center; gap: 8px; }
.cp-swatch {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background-image:
    linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: #fff;
}
.cp-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.cp-input:focus { outline: none; border-color: var(--accent); }

/* Skjult "prøve"-element der kun bruges til at måle bredden af én
   indrykningsenhed (4 mellemrum) i den aktuelle skrifttype/størrelse */
#indentProbe {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  left: -9999px;
  top: -9999px;
  padding: 0;
  height: auto;
  width: auto;
}

/* Usynligt spejl af teksten op til markøren – bruges kun til at måle,
   hvor forslagsboksen skal placeres */
.caret-mirror {
  visibility: hidden;
  overflow: hidden;
  z-index: -1;
}

/* Selve tekstfeltet ligger øverst og er gjort gennemsigtigt, så det farvede lag skinner igennem */
#text {
  outline: none;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  z-index: 2;
  overflow-y: auto;              /* scrollbar dukker kun op når teksten fylder mere end feltet */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
#text::placeholder { color: var(--muted); opacity: .8; }

/* Gennemsigtig markeringsfarve, så det farvede tekstlag stadig kan ses igennem
   markeringen (selve teksten i #text er usynlig – den ægte tekst vises af #highlight) */
#text::selection { background: var(--selection-bg); }
#text::-moz-selection { background: var(--selection-bg); }

#text::-webkit-scrollbar { width: 12px; }
#text::-webkit-scrollbar-track { background: transparent; }
#text::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ---------- Syntaksfarvning ---------- */
.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-string { color: var(--tok-string); }
.tok-number { color: var(--tok-number); }
.tok-keyword { color: var(--tok-keyword); font-weight: 600; }
.tok-builtin { color: var(--tok-builtin); }
.tok-function { color: var(--tok-function); }
.tok-variable { color: var(--tok-variable); }
.tok-tag { color: var(--tok-tag); }
.tok-attr { color: var(--tok-attr); }
.tok-preproc { color: var(--tok-preproc); font-style: italic; }
/* CSS inde i <style>-blokke: selektorer ligesom HTML-tags, egenskabsnavne
   ligesom HTML-attributter – genbruger de samme farvevariabler, så det
   hænger visuelt sammen med resten af syntaksfarvningen. */
.tok-selector { color: var(--tok-tag); font-weight: 600; }
.tok-property { color: var(--tok-attr); }

.mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  height: auto;
}
/* 1em (ikke en fast pixelværdi) – skalerer selv med skriftstørrelsen, så en
   tom linje altid får præcis den aktuelle linjehøjde og ikke en fast bund på
   26px, som ellers ville gøre gutter-rækken for høj ved mindre skriftstørrelser */
.mirror > div { min-height: 1em; }

/* ---------- Statuslinje ---------- */
.statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.stat {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gutter-bg);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.stat.caret { margin-left: auto; color: var(--muted); background: transparent; border-color: transparent; }

/* ---------- Forslagsboks (autofuldførelse) ---------- */
.suggest-box {
  position: fixed;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 150px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  font-family: var(--font-mono);
  font-size: 13.5px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.suggest-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
}
.suggest-item.active { background: var(--accent-soft); color: var(--accent); }
.suggest-hint {
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--muted);
}
.suggest-item.active .suggest-hint { color: var(--accent); opacity: .8; }

/* ---------- Bekræftelsesdialog ---------- */
.confirm-dialog {
  margin: auto;
  padding: 20px;
  width: min(360px, calc(100vw - 40px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.confirm-dialog::backdrop { background: rgba(8, 10, 16, .5); }
.confirm-dialog h2 { margin: 0 0 8px; font-size: 17px; }
.confirm-dialog p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Højreklik-menu (vores egen, i stedet for browserens) ---------- */
.context-menu {
  position: fixed;
  z-index: 80;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 240px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
  font-size: 13.5px;
}

.context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.context-item .material-symbols-outlined { font-size: 18px; color: var(--muted); flex: none; }
.context-item .context-label { flex: 1; }
.context-item .context-hint { color: var(--muted); font-size: 11.5px; }
.context-item:hover:not(.disabled) { background: var(--menu-hover); }
.context-item:hover:not(.disabled) .material-symbols-outlined { color: var(--accent); }
/* Synlig fokus-ring til tastaturnavigation i højreklik-menuen (Fase 2). */
.context-item:focus { background: var(--menu-hover); outline: 2px solid var(--accent); outline-offset: -2px; }
.context-item:focus .material-symbols-outlined { color: var(--accent); }
.context-item.disabled { cursor: default; color: var(--muted); opacity: .5; }
.context-item.disabled .context-hint { display: none; }
.context-item.checked .context-label { color: var(--accent); font-weight: 600; }
.context-item.checked .material-symbols-outlined { color: var(--accent); }
.context-icon-spacer { width: 18px; flex: none; }

.context-separator {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

.context-item.has-submenu > .context-submenu { display: none; }
.context-item.has-submenu.open > .context-submenu,
.context-item.has-submenu:focus-within > .context-submenu {
  display: block;
}
.context-submenu {
  position: absolute;
  top: -6px;
  left: 100%;
  margin-left: 6px;
}

/* ---------- Guide-popup ---------- */
.guide-dialog {
  margin: auto;
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 64px));
  max-height: min(600px, calc(100dvh - 64px)); /* dvh-fallback: rigtig synlig højde på mobil med adresselinje/tastatur */
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.guide-dialog::backdrop { background: rgba(8, 10, 16, .5); }
.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px 14px 22px;
  border-bottom: 1px solid var(--border);
}
.guide-head h2 { margin: 0; font-size: 18px; }
.guide-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  max-height: calc(min(600px, calc(100vh - 64px)) - 60px);
  max-height: calc(min(600px, calc(100dvh - 64px)) - 60px);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.guide-body::-webkit-scrollbar { width: 10px; }
.guide-body::-webkit-scrollbar-track { background: transparent; }
.guide-body::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.guide-body > p { margin: 0 0 16px; line-height: 1.55; color: var(--text); }
.guide-body ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.guide-body li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.guide-body li .material-symbols-outlined {
  font-size: 20px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 6px;
  flex: none;
}
.guide-body li strong { display: block; }
.guide-tip { font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 14px; }

/* ---------- Live preview-panel ---------- */
/* IKKE en modal dialog – en fritsvævende, flytbar og størrelsesændrbar rude
   (ligesom et løst vindue/faneblad), så man kan blive ved med at kode i
   editoren, mens den står åben. */
.preview-panel {
  position: fixed;
  top: 84px;
  right: 32px;
  width: min(640px, calc(100vw - 24px));
  height: min(480px, calc(100vh - 24px));
  height: min(480px, calc(100dvh - 24px));
  min-width: 320px;
  min-height: 220px;
  max-width: calc(100vw - 12px);
  max-height: calc(100vh - 12px);
  max-height: calc(100dvh - 12px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  z-index: 200;
}
.preview-panel[hidden] { display: none; }
.preview-panel.fullscreen {
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: auto;
  height: auto;
  resize: none;
  border-radius: 12px;
}
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--border);
  flex: none;
  cursor: move;
  user-select: none;
  touch-action: none;
}
.preview-head h2 { margin: 0; font-size: 15px; }
.preview-actions { display: flex; align-items: center; gap: 2px; }
.preview-actions .btn.icon .material-symbols-outlined { font-size: 19px; }
.preview-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

.btn.icon[disabled],
.btn.icon:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ---------- Toast (lille besked-boble) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 8px);
  z-index: 90;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px;
  background: var(--toast-bg);
  color: var(--toast-text);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobil ---------- */
.backdrop { display: none; }

@media (max-width: 800px) {
  .app, .app.sidebar-open { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(85vw, 300px);
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .2s ease;
    visibility: visible;
  }
  .app.sidebar-open .sidebar { transform: none; box-shadow: 4px 0 24px rgba(0, 0, 0, .25); }

  .app.sidebar-open .backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 10;
  }

  .topbar { flex-wrap: wrap; }
  .recovery-banner { flex-wrap: wrap; }
  .name-field { order: 1; flex-basis: calc(100% - 60px); }
  .lang-field { order: 3; }
  .lang-field select { max-width: 130px; }
  .font-field, .size-field { order: 5; }
  .save-status { order: 4; margin-right: auto; }
  .stat.caret { display: none; }
  .csel-trigger { max-width: 130px; }
  .size-field .csel-trigger { max-width: 80px; }

  .context-menu { min-width: 220px; }
  .context-submenu { left: auto; right: 100%; margin-left: 0; margin-right: 6px; }
}

/* ---------- Reduceret bevægelse (Fase 2 – accessibility) ----------
   Ingen af overgangene i Tekstblok er store eller nødvendige for at forstå
   UI'et (sidebar-slide, toast-fade, chevron-rotation osv.) – de slås derfor
   praktisk talt af for brugere, der har bedt deres system om mindre
   bevægelse, uden at nogen funktionalitet påvirkes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}