/* ═══════════════════════════════════════════════════════════════════════════
   ss-ghost-preview — se ændringer som et ghost-lag ovenpå editoren
   (docs/ss-ghost-preview-library.md — Mortens direktiv 16/7: ingen popup;
   forhåndsvisningen ER dokumentfladen. Bud B mockup-godkendt: færdig-visning
   m. svag salvie-markering på ændrede afsnit + Før/Efter-toggle i pill-baren.)

   Tokens først — dark flipper KUN tokens. Laget er OPAKT (det dækker den
   rigtige tekst; en gennemsigtig ghost ville blande to tekster oveni hinanden).
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-ghost-preview {
  --ss-ghost-bg: #FDFCF9;                       /* editorens cream — opak */
  --ss-ghost-ink: #3D3028;
  --ss-ghost-muted: rgba(92, 77, 67, 0.78);   /* AA at 12.5px (hostile r1) */
  --ss-ghost-mark-bg: rgba(110, 138, 126, 0.10);  /* salvie-tint (mockup) */
  --ss-ghost-mark-edge: rgba(110, 138, 126, 0.5); /* 3px venstrekant (mockup) */
  /* Før-rød / efter-grøn (Mortens kildekrav 17/7: »the before is red and the
     after is green« — samme kanon som compare-modalens legende). */
  --ss-ghost-add-bg: rgba(60, 160, 60, 0.10);
  --ss-ghost-add-edge: rgba(73, 143, 82, 0.45);
  --ss-ghost-del-bg: rgba(220, 80, 80, 0.10);
  --ss-ghost-del-edge: rgba(190, 90, 72, 0.45);
  --ss-ghost-bar-bg: #FFFFFF;
  --ss-ghost-bar-border: rgba(60, 80, 70, 0.16);
  --ss-ghost-accent: #4A7A68;                   /* sage-dark = handling */
  --ss-ghost-accent-ink: #FFFEFB;
  /* Værts-editorer styler descendants med ID-styrke (skrivebord:
     `#inputText * { color: var(--color-text-primary, …) }` i grammar-bundlet)
     — ingen klasse-specificitet kan vinde dér. To værn:
     1) hijack: værtens var peger på ghost-ink INDE i laget (fixer brødtekst
        + dark, også for fremtidige børn);
     2) !important på bar-kontrollernes egne farver længere nede. */
  --color-text-primary: var(--ss-ghost-ink);
  position: absolute;
  inset: 0;
  z-index: 30;                                  /* over editor-indhold, under modaler (byot=1000+) */
  background: var(--ss-ghost-bg);
  color: var(--ss-ghost-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-theme="dark"] .ss-ghost-preview {
  --ss-ghost-bg: #1F2422;                       /* dark editor-flade */
  --ss-ghost-ink: #E8DDD4;
  --ss-ghost-muted: rgba(232, 221, 212, 0.78);
  --ss-ghost-mark-bg: rgba(125, 168, 147, 0.12);
  --ss-ghost-mark-edge: rgba(125, 168, 147, 0.5);
  --ss-ghost-add-bg: rgba(96, 178, 112, 0.14);
  --ss-ghost-add-edge: rgba(126, 190, 138, 0.5);
  --ss-ghost-del-bg: rgba(214, 96, 96, 0.14);
  --ss-ghost-del-edge: rgba(214, 118, 104, 0.5);
  --ss-ghost-bar-bg: #2A302D;
  --ss-ghost-bar-border: rgba(232, 221, 212, 0.14);
  --ss-ghost-accent: #7DA893;
  --ss-ghost-accent-ink: #1F2422;
}

/* Indholdet arver værtens typografi via adapterens padding-klon; kun blok-rytme her. */
.ss-ghost-preview-body {
  padding: var(--ss-ghost-pad, 20px 24px 96px);  /* bund-luft så baren aldrig skygger sidste linje */
  line-height: 1.7;
  font-size: inherit;
  white-space: normal;
  word-wrap: break-word;
}
.ss-ghost-preview-body > * { margin: 0 0 0.9em; }
.ss-ghost-preview-body > *:last-child { margin-bottom: 0; }

/* Ændret/nyt afsnit — mockup-værdierne: tint + 3px kant. Ingen radius på
   enkeltsidet kant (design-kanon). */
.ss-ghost-preview-body .ss-ghost-changed {
  background: var(--ss-ghost-mark-bg);
  border-left: 3px solid var(--ss-ghost-mark-edge);
  border-radius: 0;
  padding: 2px 8px 2px 10px;
}
/* Pane-scoped farvesprog: Efter = grønt (nyt/ændret), Før = rødt (udgår).
   Grøn leveres via TOKEN-OMDIRIGERING: værts-lagene (skrivebord-v2 m.fl.)
   maler .ss-ghost-changed med id-styrke + !important, men læser
   --ss-ghost-mark-bg — så panen omdefinerer tokenen, og deres egen regel
   maler grønt. Før-rød bærer !important: dark-reset-lag (import-kæden)
   nulstiller ellers baggrunden (deep-QA-fund 19/7). Kun farve — geometri
   og font arves 1:1. */
.ss-ghost-preview-body[data-ghost-pane="after"] {
  --ss-ghost-mark-bg: var(--ss-ghost-add-bg);
  --ss-ghost-mark-edge: var(--ss-ghost-add-edge);
}
.ss-ghost-preview-body[data-ghost-pane="before"] {
  --ss-ghost-mark-bg: var(--ss-ghost-del-bg);
  --ss-ghost-mark-edge: var(--ss-ghost-del-edge);
}
.ss-ghost-preview-body[data-ghost-pane="after"] .ss-ghost-changed {
  background: var(--ss-ghost-add-bg) !important;
  border-left-color: var(--ss-ghost-add-edge) !important;
}
.ss-ghost-preview-body[data-ghost-pane="before"] .ss-ghost-removed {
  background: var(--ss-ghost-del-bg) !important;
  border-left: 3px solid var(--ss-ghost-del-edge) !important;
  border-radius: 0;
  padding: 2px 8px 2px 10px;
}

/* ── Pill-baren (sticky top-center — følger med scroll i laget) ── */
.ss-ghost-preview-bar {
  position: sticky;
  top: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 24px);   /* never overflow a 375px layout (hostile r1) */
  flex-wrap: wrap;
  margin: 0 auto 14px;
  padding: 6px 8px;
  background: var(--ss-ghost-bar-bg);
  border: 0.5px solid var(--ss-ghost-bar-border);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(46, 64, 54, 0.10);
  font-family: var(--font-family, inherit);
}
.ss-ghost-preview-toggle {
  display: inline-flex;
  border: 0.5px solid var(--ss-ghost-bar-border);
  border-radius: 999px;
  overflow: hidden;
}
/* !important på kontrol-farverne: værtens `#inputText *`-regel (ID, 1-0-0)
   slår enhver klasse her — importance er kontrakten, ikke et hack (pinnet i
   library-kontrakten). Tokens flipper stadig dark som før. */
.ss-ghost-preview-toggle button {
  border: none;
  background: transparent;
  color: var(--ss-ghost-muted) !important;
  font-size: 12px;
  font-family: inherit;
  padding: 5px 12px;
  cursor: pointer;
}
.ss-ghost-preview-toggle button[aria-pressed="true"] {
  background: var(--ss-ghost-mark-bg);
  color: var(--ss-ghost-accent) !important;
  font-weight: 500;
}

.ss-ghost-preview-apply {
  border: none;
  background: var(--ss-ghost-accent);
  color: var(--ss-ghost-accent-ink) !important;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.ss-ghost-preview-apply:hover { filter: brightness(1.06); }
.ss-ghost-preview-close {
  border: 0.5px solid var(--ss-ghost-bar-border);
  background: transparent;
  color: var(--ss-ghost-muted) !important;
  font-size: 12.5px;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.ss-ghost-preview-close:hover { color: var(--ss-ghost-ink) !important; }
.ss-ghost-preview-bar button:focus-visible {
  outline: 2px solid var(--ss-ghost-accent);
  outline-offset: 2px;
}
/* Apply får fokus programmatisk ved åbning — uden egen stil tegnede browseren
   sin default (blå) ring, og salvie-ring på salvie-knap er usynlig (Mortens
   16/7 polish: «green and white»). Varm-hvid ring + ingen default på :focus. */
.ss-ghost-preview-apply:focus {
  outline: 2px solid var(--ss-ghost-accent-ink);
  outline-offset: 2px;
}
.ss-ghost-preview-apply:focus:not(:focus-visible) {
  outline: none;
}
/* Toggle-gruppen clipper (overflow:hidden for radius) — indre outline så
   keyboard-fokus forbliver synligt på Før/Efter (hostile r2 low). */
.ss-ghost-preview-toggle button:focus-visible {
  outline-offset: -2px;
}

/* Touch-kanon (44px, samme regel som korrektur-slideren #5889): på mobil skal
   hver kontrol i baren kunne rammes. Desktop beholder den kompakte pill. */
@media (max-width: 767px) {   /* 767: aldrig overlap m. tablet-snittet 768 (design-kanon) */
  .ss-ghost-preview-bar { gap: 6px; }
  .ss-ghost-preview-apply,
  .ss-ghost-preview-close,
  .ss-ghost-preview-toggle button {
    min-height: 44px;
    min-width: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Ro: blid entré — og HÅRD visning under reduced motion. */
.ss-ghost-preview { animation: ssGhostIn 160ms ease-out; }
@keyframes ssGhostIn {
  from { opacity: 0.6; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-ghost-preview { animation: none; }
}

/* Værts-hook: adapteren sætter klassen på fladen mens ghosten er åben
   (skrivebord dæmper toolbar + slår Quill-redigering fra i JS). */
.ss-ghost-preview-open .ql-toolbar,
.ss-ghost-preview-open .skv2-action-controls {
  opacity: 0.45;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Trigger-state clarity — the "Se forskellen" button and the bar as ONE object

   The trigger looked identical before and after the click (solid green both
   times), so nobody saw that it had turned ON, and nobody connected it to the
   bar it had just opened. The rule is now readable in one glance:
   SOLID green = closed. LIGHT green with a green border = open.

   Idle + idle-hover already live in skrivebord's v2.css (.ai-editor-action-btn
   --primary) and are deliberately NOT restated here — one source of truth per
   state. Only the two open-states are new.

   The open-signal is aria-pressed on the button that opened THIS preview (set
   by the adapter's onOpenChange). Not `:has(.ss-ghost-preview-bar)`: the Bedre
   tab mounts the same bar on the same host, and a document-wide signal would
   light up Sofia's button for a preview it did not open. aria-pressed also
   tells screen readers the toggle is on — a page-state selector cannot.

   Escalation policy: this sheet loads AFTER late.bundle, so plain class
   selectors already win. `html #inputText …` + doubled class + !important is
   used ONLY for the properties v2.css's restatement block (and the bundle's
   `#inputText :not(.word-highlight) { background: transparent !important }`)
   already claim — backgrounds and control colours inside the layer.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ss-ghost-accent-strong: #3D6B57;
  --ss-ghost-trigger-on-bg: rgba(74, 122, 104, 0.13);
  --ss-ghost-trigger-on-bg-hover: rgba(74, 122, 104, 0.18);
  --ss-ghost-trigger-on-ink: #3D6B57;
  --ss-ghost-trigger-on-edge: #4A7A68;
  --ss-ghost-trigger-on-edge-hover: #3D6B57;
  /* Pressed-in, never a coloured left bar (tried, rejected: read as an alert). */
  --ss-ghost-trigger-on-inset: inset 0 1px 3px rgba(35, 48, 42, 0.11);
  --ss-ghost-trigger-on-inset-hover: inset 0 1px 4px rgba(35, 48, 42, 0.14);
  /* Unselected segment. Solid #776E66 = 4.51:1 on the track (AA at 12.5px).
     Darker reads as selected; lighter fails contrast. */
  --ss-ghost-seg-muted: #776E66;
  --ss-ghost-seg-track: rgba(74, 122, 104, 0.07);
  --ss-ghost-seg-track-edge: rgba(74, 122, 104, 0.20);
  --ss-ghost-seg-on-bg: #FFFFFF;
  --ss-ghost-seg-on-ink: #3D6B57;
  --ss-ghost-seg-hover-bg: rgba(74, 122, 104, 0.10);
  --ss-ghost-bar-edge-calm: rgba(74, 122, 104, 0.26);
  --ss-ghost-bar-shadow: 0 4px 14px rgba(35, 48, 42, 0.10);
  --ss-ghost-bar-shadow-linked: 0 6px 18px rgba(35, 48, 42, 0.13);
  --ss-ghost-close-edge: rgba(228, 220, 212, 0.9);
}

html[data-theme="dark"] {
  --ss-ghost-accent-strong: #A8C5B8;
  --ss-ghost-trigger-on-bg: rgba(168, 197, 184, 0.16);
  --ss-ghost-trigger-on-bg-hover: rgba(168, 197, 184, 0.22);
  --ss-ghost-trigger-on-ink: #EAF3EE;
  --ss-ghost-trigger-on-edge: rgba(168, 197, 184, 0.70);
  --ss-ghost-trigger-on-edge-hover: rgba(168, 197, 184, 0.85);
  --ss-ghost-trigger-on-inset: inset 0 1px 3px rgba(0, 0, 0, 0.30);
  --ss-ghost-trigger-on-inset-hover: inset 0 1px 4px rgba(0, 0, 0, 0.36);
  --ss-ghost-seg-muted: #9D968E;
  --ss-ghost-seg-track: rgba(168, 197, 184, 0.10);
  --ss-ghost-seg-track-edge: rgba(168, 197, 184, 0.24);
  --ss-ghost-seg-on-bg: rgba(168, 197, 184, 0.20);
  --ss-ghost-seg-on-ink: #EAF3EE;
  --ss-ghost-seg-hover-bg: rgba(168, 197, 184, 0.14);
  --ss-ghost-bar-edge-calm: rgba(168, 197, 184, 0.28);
  --ss-ghost-bar-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
  --ss-ghost-bar-shadow-linked: 0 6px 18px rgba(0, 0, 0, 0.5);
  --ss-ghost-close-edge: rgba(232, 221, 212, 0.22);
}

/* ── Trigger: preview open ── */
/* [disabled] excluded: a superseded card keeps its primary button in the DOM
   (supersedePriorEditorCards), and a dimmed button must not read as "on". */
.bb-skrivebord .ai-editor-action-btn--primary[aria-pressed="true"]:not([disabled]),
body:has(.bb-skrivebord) .ai-editor-action-btn--primary[aria-pressed="true"]:not([disabled]) {
  background: var(--ss-ghost-trigger-on-bg) !important;
  border-color: var(--ss-ghost-trigger-on-edge) !important;
  color: var(--ss-ghost-trigger-on-ink) !important;
  font-weight: 700 !important;
  box-shadow: var(--ss-ghost-trigger-on-inset) !important;
}
/* Open + hover: MORE of the same light green. Never the closed-hover look
   (dark fill), and the closed-hover state never gets an inset — inset means
   open, and only open. */
.bb-skrivebord .ai-editor-action-btn--primary[aria-pressed="true"]:not([disabled]):hover,
.bb-skrivebord .ai-editor-action-btn--primary[aria-pressed="true"]:not([disabled]):focus-visible,
body:has(.bb-skrivebord) .ai-editor-action-btn--primary[aria-pressed="true"]:not([disabled]):hover,
body:has(.bb-skrivebord) .ai-editor-action-btn--primary[aria-pressed="true"]:not([disabled]):focus-visible {
  background: var(--ss-ghost-trigger-on-bg-hover) !important;
  border-color: var(--ss-ghost-trigger-on-edge-hover) !important;
  color: var(--ss-ghost-trigger-on-ink) !important;
  box-shadow: var(--ss-ghost-trigger-on-inset-hover) !important;
}

/* ── The two belong together: hovering the open trigger tints its bar ── */
body:has(.ai-editor-action-btn--primary[aria-pressed="true"]:hover) .ss-ghost-preview .ss-ghost-preview-bar {
  border-color: var(--ss-ghost-accent);
  box-shadow: var(--ss-ghost-bar-shadow-linked);
}

/* ── The bar: one calm pill, a short entry, no pulse/ring/zoom ── */
.ss-ghost-preview-bar {
  border: 1px solid var(--ss-ghost-bar-edge-calm);
  box-shadow: var(--ss-ghost-bar-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  animation: ssGhostBarIn 160ms ease-out;
}
@keyframes ssGhostBarIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

/* ── Før/Efter: a real segmented switch, not two loose buttons ── */
/* Track background needs the escalation — the grammar bundle blanks every
   background inside #inputText. */
html #inputText .ss-ghost-preview .ss-ghost-preview-toggle.ss-ghost-preview-toggle {
  gap: 2px;
  padding: 2px;
  background: var(--ss-ghost-seg-track) !important;
  border-color: var(--ss-ghost-seg-track-edge);
}
html #inputText .ss-ghost-preview .ss-ghost-preview-toggle.ss-ghost-preview-toggle button {
  border-radius: 999px;
  padding-inline: 14px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ss-ghost-seg-muted) !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
html #inputText .ss-ghost-preview .ss-ghost-preview-toggle.ss-ghost-preview-toggle button:hover {
  background: var(--ss-ghost-seg-hover-bg) !important;
  color: var(--ss-ghost-accent-strong) !important;
}
/* Selected side: it is the only white thing in the track, so the eye lands on
   it before reading either word. */
html #inputText .ss-ghost-preview .ss-ghost-preview-toggle.ss-ghost-preview-toggle button[aria-pressed="true"] {
  background: var(--ss-ghost-seg-on-bg) !important;
  color: var(--ss-ghost-seg-on-ink) !important;
  font-weight: 680;
  box-shadow: 0 1px 2px rgba(35, 48, 42, 0.14);
}

/* ── Anvend is the only filled control in the bar; Luk is outline only ── */
.ss-ghost-preview-apply {
  font-weight: 700;
  padding-inline: 16px;
  box-shadow: none;
}
.ss-ghost-preview-apply:hover { filter: none; }
html #inputText .ss-ghost-preview .ss-ghost-preview-apply.ss-ghost-preview-apply:hover {
  background: var(--ss-ghost-accent-strong) !important;
}
.ss-ghost-preview-close {
  border: 1px solid var(--ss-ghost-close-edge);
  font-weight: 600;
  padding-inline: 14px;
}

/* Compact desktop pill. Phones keep the 44px touch canon from the block above
   — this is why the sizing sits behind min-width:768 instead of overriding it. */
@media (min-width: 768px) {
  .ss-ghost-preview-toggle button,
  .ss-ghost-preview-apply,
  .ss-ghost-preview-close {
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Phone: the switch gets its own full-width row, the pill squares off a little
   so the wrapped rows do not read as two separate objects. */
@media (max-width: 767px) {
  .ss-ghost-preview-bar {
    border-radius: 16px;
    justify-content: space-between;
  }
  .ss-ghost-preview-toggle {
    flex: 1 1 100%;
    justify-content: center;
  }
  /* Split the full-width track evenly instead of letting two 44px-wide labels
     push past a narrow phone (320px) — the switch must never clip a word. Same
     escalation as the segment rules above, or their 14px inline padding (1-3-1)
     would outrank this by specificity no matter how late it sits. */
  html #inputText .ss-ghost-preview .ss-ghost-preview-toggle.ss-ghost-preview-toggle button {
    flex: 1 1 0;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-ghost-preview-bar { animation: none; }
}