/*
 * viewer.css — Pipeline-Viewer (docs/viewer.html)
 * Geladen nach tokens.css und base.css.
 * Light-Mode, kein Dark-Theme.
 */

.viewer-body {
  background: var(--h-bg);
  color: var(--h-text);
  /* Feste Viewport-Hoehe statt min-height: bindet die Flex-Kette, damit die Panels
     INTERN scrollen (#text-body overflow:auto). Mit min-height:100vh wuchs der Body bei
     langem OCR-/TEI-Text ueber den Viewport, die .panels-Grid streckte beide Spalten auf
     Texthoehe und der OSD-Faksimile-Container wurde tausende px hoch -> Bild unsichtbar. */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   App-Shell
   ============================================================ */
.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================
   Doc-Subbar: one row of metadata + workflow pills + save/export.
   Meta left, pills inline after it, actions right. The band draws exactly one
   edge, the border-bottom below.
   ============================================================ */
.doc-subbar {
  background: var(--h-surface);
  border-bottom: 1px solid var(--h-border);
}
.doc-subbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--h-space-sm) var(--h-space-xl);
  display: flex;
  align-items: center;
  gap: var(--h-space-xs) var(--h-space-md);
  flex-wrap: wrap;
  min-height: var(--v-toolbar-height);
}
.doc-subbar__meta {
  /* no grow: meta and pills stay grouped on the left, the actions group takes the
     free space via margin-left: auto */
  flex: 0 1 auto;
  font-size: var(--h-sm);
  color: var(--h-text-secondary);
  min-width: 0;
  display: flex;
  align-items: center;
  /* nowrap + overflow:hidden lets the title ellipsize instead of wrapping the row;
     the remaining fields keep their width via flex-shrink: 0. */
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 0;
}
.doc-subbar__meta strong { color: var(--h-text); font-weight: 500; }
.doc-subbar__meta .sep   { color: var(--h-text-muted); margin: 0 0.55em; }
.doc-subbar__meta .meta-item { white-space: nowrap; flex: 0 0 auto; }
.doc-subbar__meta .meta-item--title {
  font-family: var(--h-font-body);
  font-style: italic;
  color: var(--h-text);
  /* the only shrinking item in the row: it ellipsizes before anything wraps */
  flex: 0 1 auto;
  min-width: 6ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-subbar__actions {
  display: flex;
  gap: var(--h-space-xs);
  margin-left: auto;
}

/* ---- E66: workflow status pills, inline in the same row ---- */
.status-controls {
  display: flex;
  align-items: center;
  gap: var(--h-space-xs);
  flex: 0 1 auto;
  flex-wrap: wrap;
}
.status-controls__hint {
  font-size: var(--h-xs);
  color: var(--h-text-muted);
  font-style: italic;
  margin-left: var(--h-space-sm);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--h-border);
  background: var(--h-surface);
  color: var(--h-text-secondary);
  font-family: var(--h-font-body);
  font-size: var(--h-xs);
  cursor: pointer;
  transition: background var(--h-transition-fast), border-color var(--h-transition-fast);
  white-space: nowrap;
}
.status-pill:hover:not(:disabled) {
  border-color: var(--h-text-muted);
  background: var(--h-bg-alt);
}
.status-pill:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.status-pill__stream {
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--h-text-muted);
}
.status-pill__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
/* Ampel-Semantik (E77, drei Stufen): neutral/grau = Pipeline-Output da, noch nicht angefasst
   (unverifiziert, Default fuer alle Stroeme); gelb = in Bearbeitung (in_arbeit);
   gruen = menschlich verifiziert (verifiziert). Rot bleibt fuer einen spaeteren expliziten
   Problem/fehlt-Status reserviert. Das Statuswort steht im title-Tooltip. */
.status-pill--unverifiziert .status-pill__dot { background: var(--h-text-muted); }
.status-pill--in_arbeit     .status-pill__dot { background: var(--h-ocker); }
.status-pill--verifiziert   .status-pill__dot { background: var(--h-olivgruen); }
.status-pill--dirty {
  box-shadow: 0 0 0 1px var(--h-ziegelrot-light);
}
.status-pill--dirty .status-pill__stream::after {
  content: ' *';
  color: var(--h-ziegelrot);
  font-weight: 600;
}

/* ============================================================
   Main
   ============================================================ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================
   Toolbar-Bausteine (geteilt: Doc-Subbar + Editor-Toolbar)
   ============================================================ */
.toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--h-space-xs);
}
.toolbar__divider {
  width: 1px;
  height: 22px;
  background: var(--h-border);
  margin: 0 var(--h-space-xs);
}
.toolbar__label {
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
  color: var(--h-text-muted);
  margin-right: 4px;
}
.toolbar__select {
  width: auto;
  font-size: var(--h-xs);
  padding: 3px 8px;
}
/* Passive reading in a toolbar (region count of the current page) */
.toolbar__hint {
  font-size: var(--h-xs);
  color: var(--h-text-muted);
  font-family: var(--h-font-mono);
}

/* ============================================================
   Editor-Toolbar (im Layout-Modus)
   E78: sits inline in the doc subbar, no band and no edge of its own. flex-basis:100%
   puts it on its own wrapped line inside that band when it becomes visible.
   ============================================================ */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: var(--h-space-sm);
  flex-wrap: wrap;
}
.doc-subbar__inner > .editor-toolbar { flex-basis: 100%; }
.editor-toolbar__group {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* ============================================================
   Panels (Faksimile + Text)
   ============================================================ */
.panels {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  gap: 0;
  min-height: 0;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--h-space-lg) var(--h-space-xl);
  width: 100%;
  box-sizing: border-box;
}
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--h-bg);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-sm);
  overflow: hidden;
}
.panel--facsimile { background: var(--h-bg-alt); }
.panel--text      { background: var(--h-surface); }

.panel__header {
  display: flex;
  align-items: center;
  gap: var(--h-space-sm);
  padding: var(--h-space-sm) var(--h-space-md);
  border-bottom: 1px solid var(--h-border);
  background: var(--h-surface);
}
.panel--facsimile .panel__header { background: var(--h-bg-alt); }

/* Rechts ausgerichtete Gruppe im Panel-Header (Edit-Dropdown) */
.panel__header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--h-space-sm);
}
.panel__body {
  flex: 1;
  overflow: auto;
  padding: var(--h-space-lg);
}

/* Weisses "Papier" fuer den Text-Panel-Body */
.panel__body--paper {
  background: var(--h-paper);
  padding: var(--h-space-xl) var(--h-space-2xl);
}

.panel__divider {
  background: transparent;
  cursor: ew-resize;
  transition: background var(--h-transition-fast);
}
.panel__divider:hover { background: var(--h-border-emphasis); }

/* ============================================================
   Faksimile (links)
   ============================================================ */
.facsimile {
  position: relative;
  display: inline-block;
  user-select: none;
  margin: 0 auto;
}
.facsimile__img {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--h-paper);
  box-shadow: var(--h-shadow-md);
}
.facsimile__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.facsimile__overlay.editing { pointer-events: auto; cursor: default; touch-action: none; }

.empty__retry { margin-top: var(--h-space-sm); }
.facsimile__overlay.creating { cursor: crosshair; }
.facsimile__overlay.creating .region { pointer-events: none; }

/* ---- Body-Variante fuer OSD (kein Padding, fixed Height) ---- */
.panel__body--canvas {
  padding: 0;
  overflow: hidden;
  min-height: 60vh;
}

/* OSD-Container fuellt den Body */
.facsimile-osd {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  background: var(--h-bg-alt);
}

/* Lade-Hinweis ueber dem OSD-Container, bis das (ggf. mehrere MB grosse) PNG
   dekodiert ist. Wird in renderFacsimileOsd() bei 'open'/'open-failed' entfernt. */
.facsimile-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
  color: var(--h-text-muted);
  pointer-events: none;
}
.panel__body--canvas { position: relative; }

/* OSD-Navigations-Buttons an Hersch-Design angleichen */
.openseadragon-canvas:focus { outline: none; }
.openseadragon-container .navigator { display: none !important; }

/* Region-Overlays werden von OSD verwaltet (Wrapper-div absolute positioniert);
   .region nutzt 100% von dem OSD-Overlay-Wrapper */
.facsimile-osd .region {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.region {
  position: absolute;
  border: 1.5px solid;
  cursor: pointer;
  transition: background var(--h-transition-fast);
}
.region:hover { background-color: var(--h-ziegelrot-subtle); }
.region--selected {
  outline: 2px solid var(--h-ziegelrot);
  outline-offset: 2px;
}
/* Region-Label (#N Typ) im Layout-Editor: per Default transparent, damit bei vielen
   Regionen die Faksimile-Sicht frei bleibt; klar nur bei Hover oder Selektion. */
.region__label {
  position: absolute;
  top: -18px;
  left: 0;
  background: var(--h-anthrazit);
  color: var(--h-text-inverse);
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  padding: 1px 6px;
  border-radius: var(--h-radius-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--h-transition-fast);
  pointer-events: none;
}
.region:hover .region__label,
.region--selected .region__label { opacity: 1; }
.region__handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--h-ziegelrot);
  border: 1px solid var(--h-paper);
  border-radius: 50%;
}
.region__handle--nw { top: -4px; left: -4px; cursor: nwse-resize; }
.region__handle--ne { top: -4px; right: -4px; cursor: nesw-resize; }
.region__handle--sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.region__handle--se { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* Region-Typ-Farben */
.region--heading   { border-color: var(--h-heading); }
.region--paragraph { border-color: var(--h-paragraph); }
.region--footnote  { border-color: var(--h-footnote); }
.region--caption   { border-color: var(--h-caption); }
.region--filter    { border-color: var(--h-filter); border-style: dashed; opacity: 0.6; }
.region--skip      { border-color: var(--h-skip); border-style: dotted; opacity: 0.45; }
.region--unknown   { border-color: var(--h-text-muted); }

/* ============================================================
   Text-Panel (rechts)
   ============================================================ */
.text {
  font-family: var(--h-font-body);
  font-size: var(--h-base);
  line-height: 1.6;
  color: var(--h-text);
  max-width: 65ch;
  margin: 0 auto;
}
.text > :first-child { margin-top: 0; }
.text > :last-child  { margin-bottom: 0; }
.text p {
  margin: 0 0 0.7em;
  text-align: justify;
  hyphens: auto;
}
.text h3 {
  font-family: var(--h-font-heading);
  font-size: var(--h-lg);
  font-weight: 500;
  margin: 1.5em 0 0.4em;
  color: var(--h-text);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
}
.text h4 {
  font-family: var(--h-font-heading);
  font-size: var(--h-sm);
  font-weight: 500;
  margin: 1.2em 0 0.3em;
  color: var(--h-text-secondary);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
}
.text strong { font-weight: 600; }
.text em     { font-style: italic; }

/* Raw-Modus (Editor): Markdown-Rohtext mit pre-wrap, ohne block-styling */
.text--raw {
  white-space: pre-wrap;
  font-family: var(--h-font-body);
  text-align: left;
}
.text--raw p, .text--raw h3, .text--raw h4 { all: unset; }

.text[contenteditable="true"] {
  outline: none;
  border: 1px dashed var(--h-border-accent);
  border-radius: var(--h-radius);
  padding: var(--h-space-md);
}
.text[contenteditable="true"]:focus {
  border-color: var(--h-ziegelrot);
  border-style: solid;
}

/* TEI Rendered View */
.tei {
  font-family: var(--h-font-body);
  font-size: var(--h-base);
  line-height: 1.65;
  color: var(--h-text);
  max-width: 65ch;
}
.tei__head { font-family: var(--h-font-heading); font-weight: 500; font-size: var(--h-lg); margin: 1em 0 0.4em; color: var(--h-text); }
.tei__p { margin: 0 0 0.8em; }
.tei__pb {
  display: block;
  margin: 1.5em 0;
  text-align: center;
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  color: var(--h-text-muted);
  letter-spacing: var(--h-tracking-caps);
}
.tei__pb::before { content: "— S. "; }
.tei__pb::after  { content: " —"; }
.tei__note {
  display: block;
  margin-left: var(--h-space-md);
  font-size: var(--h-sm);
  color: var(--h-text-secondary);
  border-left: 2px solid var(--h-border-emphasis);
  padding-left: var(--h-space-sm);
}
.tei__hi--b { font-weight: 600; }
.tei__hi--i { font-style: italic; }
.tei__hi--u { text-decoration: underline; }
.tei__hi--g { letter-spacing: 0.15em; }
.tei__hi--k { font-variant: small-caps; letter-spacing: 0.05em; }
.tei__hi--sup { vertical-align: super; font-size: 0.75em; }
.tei__hi--sub { vertical-align: sub;   font-size: 0.75em; }
.tei__foreign {
  font-style: italic;
  color: var(--h-preussischblau);
}
.tei__sp { margin: 0.5em 0 0.5em; }
.tei__speaker { font-weight: 600; color: var(--h-text-secondary); }
.tei__unclear { background: var(--h-ocker-subtle); }
.tei__front, .tei__back { margin: 0 0 1.2em; }
.tei__title { display: block; }
.tei__title--sub { font-size: var(--h-base); color: var(--h-text-secondary); }
.tei__note-n {
  vertical-align: super;
  font-size: 0.7em;
  font-family: var(--h-font-heading);
  color: var(--h-footnote);
  margin-right: 0.4em;
}
.tei__space { height: 1em; }
.tei__figure {
  margin: 0.8em 0;
  padding: var(--h-space-sm) var(--h-space-md);
  border: 1px dashed var(--h-border-emphasis);
  border-radius: var(--h-radius);
  font-size: var(--h-sm);
  color: var(--h-text-secondary);
}
.tei__figure-label {
  display: block;
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
  color: var(--h-caption);
}
.tei__figure .tei__p { margin: 0.2em 0 0; }
.tei__list { margin: 0 0 0.8em 1.4em; padding: 0; }
.tei__item { margin: 0 0 0.2em; }
.tei__table { border-collapse: collapse; margin: 0 0 1em; }
.tei__table td { border: 1px solid var(--h-border); padding: 2px 10px; }
.tei__listbibl { margin: 0 0 1em; }
.tei__listbibl .tei__bibl { display: block; margin-bottom: 0.3em; }
.tei__epigraph { font-style: italic; margin: 0 0 1em var(--h-space-md); }
.tei__gap { color: var(--h-text-muted); }
a.tei__ref { color: var(--h-preussischblau); }

/* Markup mode: annotation scanning in the rendered view (toggle in panel header).
   Accent colors mark annotations (accents, not surfaces): entities Prussian blue,
   foreign olive green, editorial interventions brick red, unclear ocker. */
.tei--markup .tei__entity { background: var(--h-preussischblau-subtle); border-bottom: 1px solid var(--h-preussischblau); }
.tei--markup .tei__foreign { background: var(--h-olivgruen-subtle); border-bottom: 1px dotted var(--h-olivgruen); }
.tei--markup .tei__corr { background: var(--h-ziegelrot-subtle); border-bottom: 1px dashed var(--h-ziegelrot); }
.tei--markup .tei__unclear { border-bottom: 1px dotted var(--h-ocker); }
.tei--markup .tei__note { border-left-color: var(--h-footnote); }
.tei--markup .tei__bibl { border-bottom: 1px dotted var(--h-text-muted); }
.tei--markup .tei__div[data-type]:not([data-type="text"])::before,
.tei--markup .tei__front::before,
.tei--markup .tei__back::before {
  content: attr(data-type);
  display: inline-block;
  margin: 0.4em 0 0.2em;
  padding: 0 var(--h-space-sm);
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
  color: var(--h-text-muted);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-sm);
}

/* Legend above the rendered text (markup mode) */
.tei-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--h-space-sm) var(--h-space-md);
  margin: 0 0 var(--h-space-md);
  padding-bottom: var(--h-space-sm);
  border-bottom: 1px solid var(--h-border);
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: 0.03em;
  color: var(--h-text-secondary);
}
.tei-legend__chip { display: inline-flex; align-items: center; gap: 0.35em; }
.tei-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-text-muted); }
.tei-legend__chip--entity .tei-legend__dot { background: var(--h-preussischblau); }
.tei-legend__chip--foreign .tei-legend__dot { background: var(--h-olivgruen); }
.tei-legend__chip--note .tei-legend__dot { background: var(--h-footnote); }
.tei-legend__chip--corr .tei-legend__dot { background: var(--h-ziegelrot); }
.tei-legend__chip--unclear .tei-legend__dot { background: var(--h-ocker); }
.tei-legend__empty { color: var(--h-text-muted); }

/* ============================================================
   Entity-Layer (nur lesend): Kategoriefarben, Worklist, Popover
   ============================================================
   Kategorien als Akzent, nie als Flaeche: Personen Preussischblau,
   Organisationen Olivgruen, Werke Ziegelrot. Die Farben haengen an
   .tei--entities und damit nicht am Markup-Schalter. */
.tei--entities .tei__entity[data-ref],
.tei--entities .tei__bibl[data-ref] { cursor: pointer; }
.tei--entities .tei__entity--persname[data-ref] {
  background: var(--h-preussischblau-subtle);
  border-bottom: 1px solid var(--h-preussischblau);
}
.tei--entities .tei__entity--orgname[data-ref] {
  background: var(--h-olivgruen-subtle);
  border-bottom: 1px solid var(--h-olivgruen);
}
.tei--entities .tei__bibl[data-ref] {
  background: var(--h-ziegelrot-subtle);
  border-bottom: 1px solid var(--h-ziegelrot);
}
.tei--entities .tei__entity[data-ref]:hover,
.tei--entities .tei__bibl[data-ref]:hover { border-bottom-width: 2px; }
.tei--entities [data-ref]:focus-visible {
  outline: 2px solid var(--h-preussischblau);
  outline-offset: 1px;
}
.tei-legend__chip--person .tei-legend__dot { background: var(--h-preussischblau); }
.tei-legend__chip--org .tei-legend__dot    { background: var(--h-olivgruen); }
.tei-legend__chip--work .tei-legend__dot   { background: var(--h-ziegelrot); }
/* Kandidat: offener Ring statt gefuelltem Punkt, analog zur gestrichelten Linie im Text. */
.tei-legend__chip--cand .tei-legend__dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--h-ocker);
}

/* Worklist-Kandidaten inline: gestrichelte Unterstreichung in Ocker, keine Flaeche.
   Damit sind sie auf den ersten Blick von den gesetzten Annotationen (durchgezogene
   Linie plus dezente Flaeche) zu unterscheiden. */
.tei--entities .entity-cand {
  border-bottom: 1px dashed var(--h-ocker);
  cursor: pointer;
}
.tei--entities .entity-cand:hover { border-bottom-width: 2px; }
.tei--entities .entity-cand:focus-visible {
  outline: 2px solid var(--h-ocker);
  outline-offset: 1px;
}

/* Worklist der Seite (Tier-2-Kandidaten, reine Anzeige) */
.entity-worklist {
  margin: 0 0 var(--h-space-md);
  padding: var(--h-space-sm) var(--h-space-md);
  border: 1px solid var(--h-border);
  border-left: 3px solid var(--h-ocker);
  border-radius: var(--h-radius);
  background: var(--h-surface);
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  max-height: 28vh;
  overflow-y: auto;
}
.entity-worklist__title {
  text-transform: uppercase;
  letter-spacing: var(--h-tracking-caps);
  color: var(--h-text-muted);
  margin-bottom: var(--h-space-xs);
}
.entity-worklist__list { list-style: none; margin: 0; padding: 0; }
.entity-worklist__item {
  display: grid;
  grid-template-columns: minmax(6em, 12em) auto 1fr;
  gap: var(--h-space-sm);
  align-items: baseline;
  padding: 3px 0;
  border-top: 1px solid var(--h-border);
}
.entity-worklist__item:first-child { border-top: 0; }
.entity-worklist__surface {
  font-family: var(--h-font-body);
  font-size: var(--h-sm);
  color: var(--h-text);
}
.entity-worklist__rule {
  font-size: var(--h-xs);
  color: var(--h-text-secondary);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-sm);
  padding: 0 4px;
  white-space: nowrap;
}
.entity-worklist__context {
  font-family: var(--h-font-body);
  color: var(--h-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Popover einer markierten Nennung (ersetzt den nativen title-Tooltip) */
.entity-pop {
  position: fixed;
  z-index: 150;
  min-width: 200px;
  max-width: 320px;
  padding: var(--h-space-sm) var(--h-space-md);
  background: var(--h-paper);
  border: 1px solid var(--h-border-emphasis);
  border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-md);
  font-family: var(--h-font-heading);
  font-size: var(--h-sm);
  color: var(--h-text);
}
.entity-pop[hidden] { display: none; }
.entity-pop__close {
  position: absolute;
  top: 2px;
  right: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--h-text-muted);
  font-size: var(--h-lg);
  line-height: 1;
  cursor: pointer;
}
.entity-pop__close:hover { color: var(--h-text); }
.entity-pop--cand { border-left: 3px solid var(--h-ocker); }
.entity-pop__label { font-weight: 600; padding-right: var(--h-space-md); }
.entity-pop__note {
  margin-top: var(--h-space-xs);
  font-size: var(--h-xs);
  color: var(--h-text-secondary);
}
.entity-pop__meta {
  margin-top: 2px;
  font-size: var(--h-xs);
  color: var(--h-text-secondary);
}
.entity-pop__gid {
  margin-top: var(--h-space-xs);
  font-family: var(--h-font-mono);
  font-size: var(--h-xs);
  color: var(--h-text-muted);
}
.entity-pop__link { font-size: var(--h-xs); color: var(--h-preussischblau); }
/* Provenance of a marked mention: who asserted it, how certain, by which rule. */
.entity-pop__prov {
  margin-top: var(--h-space-xs);
  padding-top: var(--h-space-xs);
  border-top: 1px solid var(--h-border);
  font-size: var(--h-xs);
  color: var(--h-text-secondary);
}
.entity-pop__prov-row {
  display: flex;
  gap: var(--h-space-sm);
  line-height: 1.5;
}
.entity-pop__prov-label {
  flex: 0 0 5.5em;
  color: var(--h-text-muted);
}
.entity-pop__prov-value {
  font-family: var(--h-font-mono);
  overflow-wrap: anywhere;
}

/* XML View */
.xml-view {
  font-family: var(--h-font-mono);
  font-size: var(--h-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
  background: transparent;
  color: var(--h-text-secondary);
}
/* Unhighlighted large sources: break at whitespace only. `overflow-wrap: anywhere`
   searches break opportunities per character and dominates layout at ~1M characters. */
.xml-view--plain { overflow-wrap: normal; word-break: normal; }
.xml-tag        { color: var(--h-preussischblau); }
.xml-attr-name  { color: var(--h-ziegelrot); }
.xml-attr-value { color: var(--h-olivgruen); }
.xml-decl       { color: var(--h-text-muted); }
.xml-comment    { color: var(--h-text-muted); font-style: italic; }

/* Scope bar of the XML view (page slice vs full document) */
.xml-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--h-space-sm) var(--h-space-md);
  margin: 0 0 var(--h-space-md);
  padding-bottom: var(--h-space-sm);
  border-bottom: 1px solid var(--h-border);
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: 0.03em;
  color: var(--h-text-secondary);
}
.xml-scope__hint { color: var(--h-text-muted); }

/* ============================================================
   Region-Liste (Reading-Order, im Edit-Mode unter dem Faksimile)
   ============================================================ */
.region-list-container { margin-top: var(--h-space-md); }
.region-list-container__title {
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
  color: var(--h-text-muted);
  margin: 0 0 var(--h-space-sm);
}
.region-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.region-list__item {
  display: grid;
  grid-template-columns: 2.2em 1fr auto auto;
  align-items: center;
  gap: var(--h-space-sm);
  padding: 6px var(--h-space-sm);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  margin-bottom: 4px;
  background: var(--h-surface);
  cursor: grab;
  font-size: var(--h-sm);
  transition: border-color var(--h-transition-fast), background var(--h-transition-fast);
}
.region-list__item:hover { border-color: var(--h-border-emphasis); }
.region-list__item--selected {
  border-color: var(--h-ziegelrot);
  background: var(--h-ziegelrot-subtle);
}
.region-list__item--dragging { opacity: 0.4; }
.region-list__item--over     { border-color: var(--h-ziegelrot); border-style: dashed; }
.region-list__index {
  font-family: var(--h-font-mono);
  font-size: var(--h-xs);
  color: var(--h-text-muted);
}
.region-list__label {
  font-size: var(--h-xs);
  color: var(--h-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.region-list__type {
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
  color: var(--h-text-muted);
}
.region-list__bbox {
  font-family: var(--h-font-mono);
  font-size: var(--h-xs);
  color: var(--h-text-muted);
  white-space: nowrap;
}

/* ============================================================
   Live-Koordinaten-Editor (in der Layout-Toolbar, fuer selektierte Region)
   ============================================================ */
.region-coords {
  gap: var(--h-space-xs);
}
.region-coords__field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--h-xs);
  color: var(--h-text-muted);
}
.region-coords__field > span {
  font-family: var(--h-font-heading);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
}
.region-coords__input {
  width: 4.5em;
  padding: 2px 4px;
  font-family: var(--h-font-mono);
  font-size: var(--h-xs);
  text-align: right;
}
.region-coords__input:disabled {
  background: var(--h-bg-alt);
  color: var(--h-text-muted);
  cursor: not-allowed;
}

/* ============================================================
   Empty States
   ============================================================ */
.empty {
  padding: var(--h-space-2xl) var(--h-space-md);
  text-align: center;
  color: var(--h-text-muted);
  font-style: italic;
  font-size: var(--h-sm);
}

/* Leerseite: bewusster Zustand, kein Fehler — aufrecht, etwas mehr Praesenz. */
.empty--blank-page {
  font-style: normal;
  letter-spacing: 0.03em;
  padding-top: calc(var(--h-space-2xl) * 2);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .panels {
    grid-template-columns: 1fr;
    grid-template-rows: auto 4px auto;
  }
  .panel__divider { display: none; }
  .panel__body { padding: var(--h-space-md); }
  /* Narrow viewports: meta takes a full line, pills and actions wrap below it;
     the title stays on one line with an ellipsis. */
  .doc-subbar__meta { flex-basis: 100%; }
}

/* ============================================================ Speichern + Export + Identitaets-Chip (E78) ============================================================ */
.doc-subbar__actions { align-items: center; }

/* Identitaets-Chip: zeigt das Bearbeiter-Kuerzel; Klick oeffnet ein Inline-Feld. */
.identity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--h-border);
  border-radius: 999px;
  background: var(--h-surface);
  color: var(--h-text-secondary);
  font-family: var(--h-font-body);
  font-size: var(--h-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--h-transition-fast), background var(--h-transition-fast);
}
.identity-chip:hover { border-color: var(--h-text-muted); background: var(--h-bg-alt); }
.identity-chip__icon { color: var(--h-text-muted); font-weight: 600; }
.identity-chip__who  { color: var(--h-text); font-weight: 500; }
.identity-chip--empty .identity-chip__who { color: var(--h-text-muted); font-style: italic; font-weight: 400; }
.identity-input {
  width: 7em;
  height: 28px;
  padding: 0 8px;
  font-size: var(--h-sm);
}

/* Speichern: primaer (Ziegelrot); dezenter Ring, solange Aenderungen ungespeichert sind. */
#btn-save.btn--dirty { box-shadow: 0 0 0 3px var(--h-ziegelrot-subtle); }

/* ---- Dropdown-Menue: ein Bauteil fuer Export, Panel-Ansicht und Edit-Modus ----
   position:fixed (Koordinaten aus positionDropdown()), weil .panel overflow:hidden traegt
   und ein absolut positioniertes Menue im Panel-Header abgeschnitten wuerde. */
.menu-wrap { display: inline-flex; align-items: center; }
.menu {
  position: fixed;
  z-index: 50;
  min-width: 200px;
  padding: 6px;
  background: var(--h-paper);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-md);
}
.menu__label {
  font-family: var(--h-font-heading);
  font-size: var(--h-xs);
  letter-spacing: var(--h-tracking-caps);
  text-transform: uppercase;
  color: var(--h-text-muted);
  padding: 4px 8px 6px;
}
.menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--h-text);
  font-family: var(--h-font-body);
  font-size: var(--h-sm);
  cursor: pointer;
  border-radius: var(--h-radius-sm);
}
.menu__item:hover:not(:disabled) { background: var(--h-bg-alt); }
.menu__item:disabled { color: var(--h-text-muted); cursor: not-allowed; }
/* Aktiver Eintrag und aktiver Menue-Knopf: Anthrazit-Flaeche mit inverser Schrift,
   die Aktiv-Sprache der frueheren Panel-Toggles. */
.menu__item--on { background: var(--h-anthrazit); color: var(--h-text-inverse); }
.menu__item--on:hover:not(:disabled) { background: var(--h-anthrazit-light); }
.menu__item--toggle { border-top: 1px solid var(--h-border); margin-top: 4px; padding-top: 8px; }
.menu-btn--on {
  background: var(--h-anthrazit);
  border-color: var(--h-anthrazit);
  color: var(--h-text-inverse);
}
.menu-btn--on:hover {
  background: var(--h-anthrazit-light);
  border-color: var(--h-anthrazit-light);
  color: var(--h-text-inverse);
}

/* Seitennavigation im Faksimile-Panel-Header: die aktuelle Seitenzahl IST das Sprungfeld. */
.page-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.page-goto {
  width: 3.4em;
  padding: 0.25em 0.3em;
  font-family: var(--h-font-mono);
  font-size: var(--h-xs);
  text-align: center;
}
.page-nav__total {
  font-family: var(--h-font-mono);
  font-size: var(--h-xs);
  color: var(--h-text-muted);
  white-space: nowrap;
  margin-right: 2px;
}

/* ---- Info dialog (one-time explanation on the first repo connect) ---- */
/* Native <dialog>: modality, backdrop, focus containment and Escape come from the
   platform; `margin: auto` centres it, `display: none` while closed is the UA default. */
.modal {
  max-width: 460px;
  width: 100%;
  margin: auto;
  background: var(--h-paper);
  color: var(--h-text);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  box-shadow: var(--h-shadow-md);
  padding: var(--h-space-xl);
}
.modal::backdrop { background: var(--h-overlay); }
.modal__title {
  font-family: var(--h-font-heading);
  color: var(--h-heading);
  font-size: var(--h-lg);
  margin: 0 0 var(--h-space-md);
}
.modal__text {
  font-size: var(--h-sm);
  color: var(--h-text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--h-space-md);
}
.modal__text code {
  font-family: var(--h-font-mono);
  font-size: 0.9em;
  background: var(--h-bg-alt);
  color: var(--h-text);
  padding: 0 4px;
  border-radius: var(--h-radius-sm);
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--h-space-sm);
  margin-top: var(--h-space-lg);
}