/* Erläuterung (bedeutung.js): a fixed edge badge (or a tab of the host's strip) and a column beside the transcript,
   shared by every PDAI viewer. Colours and fonts come from the host's --k-* variables when it defines them (the Kármán viewer), else the
   ai-viewer book-sheet palette: warm paper, Oxford blue chrome, gold accents. The host places the column (its own
   layout rule); the ai-viewer placement is the last block of this file. */
#bd-badge, #bd-column {
  /* the Kármán viewer's --k-* tokens first, then the ai-viewer book sheet's (pdai-page.css, light and dark) */
  --bd-oxford: var(--k-oxford, var(--oxford, #002147));
  --bd-oxford-soft: var(--k-oxford-soft, var(--oxford-soft, #2c4a6e));
  --bd-ink: var(--k-ink, var(--ink, #1b2733));
  --bd-ink-muted: var(--k-ink-muted, var(--ink-muted, #4a4a6a));
  --bd-muted: var(--k-muted, var(--ink-muted, #5c5348));
  --bd-gold: var(--k-gold, var(--gold, #c8a22a));
  --bd-gold-pale: var(--k-gold-pale, var(--gold-pale, #efe3c4));
  --bd-gold-border: var(--k-gold-border, var(--gold-border, #d4b85c));
  --bd-sand: var(--k-sand, var(--paper-sunken, #f6f1e7));
  --bd-paper: var(--k-paper, var(--paper-sheet, #fffdf9));
  --bd-line: var(--k-line, var(--rule, #e6e0d4));
  --bd-line-strong: var(--k-line-strong, var(--rule-gold, #cdbfa4));
  --bd-radius: var(--k-radius, 3px);
  --bd-serif: var(--k-serif, var(--serif, "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif));
  --bd-sans: var(--k-sans, var(--sans, "Source Sans 3", "Avenir Next", system-ui, sans-serif));
}
#bd-badge {
  position: fixed; right: 0; top: calc(50% - 44px); z-index: 32;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--bd-sans); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bd-gold-pale); background: var(--bd-oxford);
  border: 1px solid var(--bd-gold); border-right: 0; border-radius: 0 6px 6px 0;
  padding: 12px 6px; cursor: pointer; box-shadow: -2px 0 8px rgba(0, 21, 46, 0.18);
}
#bd-badge:hover { background: #01315f; }
#bd-badge.on { background: var(--bd-gold); color: var(--bd-oxford); border-color: var(--bd-gold); }
#bd-column { display: none; }
body.bd-offen #bd-column {
  display: flex; flex-direction: column; position: relative; min-width: 0;
  border-left: 1px solid var(--bd-line-strong); background: var(--bd-sand); overflow: hidden;
}
#bd-resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
#bd-resizer::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; }
#bd-resizer:hover::before, body.bd-resizing #bd-resizer::before { background: var(--bd-gold); }
#bd-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 26px 7px 14px; flex-shrink: 0;
  font-family: var(--bd-sans); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bd-oxford); border-bottom: 1px solid var(--bd-gold-border); background: var(--bd-paper);
}
#bd-head .bd-x { margin-left: auto; border: 0; background: transparent; font-size: 16px; cursor: pointer; color: var(--bd-muted); }
#bd-body { flex: 1; overflow: auto; padding: 12px 26px 18px 14px; font-family: var(--bd-serif); font-size: 14px; line-height: 1.45; color: var(--bd-ink); }
#bd-body > * + * { margin-top: 10px; }
.bd-rahmen { font-family: var(--bd-sans); font-size: 12.5px; color: var(--bd-oxford-soft); }
.bd-rahmen b { font-weight: 650; color: var(--bd-oxford); }
.bd-rahmen.bd-dokument i { font-family: var(--bd-serif); font-size: 13.5px; color: var(--bd-ink); }
.bd-regest { font-size: 13px; color: var(--bd-muted); margin-top: 3px; }
.bd-hinweis { font-family: var(--bd-sans); font-size: 12.5px; color: var(--bd-muted); }
.bd-fortschritt { font-family: var(--bd-sans); font-size: 12.5px; color: var(--bd-oxford-soft); display: flex; gap: 10px; align-items: center; }
.bd-fortschritt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bd-gold); border-top-color: transparent; animation: bd-spin .9s linear infinite; flex-shrink: 0; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-satz { background: var(--bd-paper); border: 1px solid var(--bd-line); border-radius: var(--bd-radius); padding: 8px 10px; }
.bd-satz mark.bd-span { background: rgba(200, 162, 42, 0.35); color: inherit; border-radius: 2px; padding: 0 1px; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 4px 2px; }
/* the chips (same look as normalkarte.css, so the column needs no other stylesheet) */
#bd-column .nk-chip { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11.5px; margin: 1px 3px 1px 0; background: rgba(128, 128, 128, .18); white-space: nowrap; }
#bd-column .nk-chip.ok { background: rgba(47, 133, 90, .2); color: #2f855a; }
#bd-column .nk-chip.warn { background: rgba(183, 121, 31, .2); color: #b7791f; }
#bd-column .nk-chip.acc { background: rgba(43, 108, 176, .18); color: #2b6cb0; }
.bd-chips .nk-chip { cursor: default; }
.bd-chips .nk-chip[data-ind-id] { cursor: pointer; border-bottom: 1px dotted currentColor; }
/* the Erläuterung (or the translation): the one statement the column is for */
.bd-erl {
  background: var(--bd-paper); border-left: 4px solid var(--bd-oxford); border-radius: var(--bd-radius);
  padding: 12px 14px 12px 14px; box-shadow: 0 1px 0 var(--bd-gold-border);
}
.bd-erl .bd-meaning { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--bd-ink); }
.bd-erl .bd-about { margin: 8px 0 0; font-size: 13.5px; color: var(--bd-ink-muted); }
.bd-erl .bd-verdikt { margin-top: 8px; font-family: var(--bd-sans); font-size: 11.5px; color: #2f855a; }
.bd-satz { font-size: 13px; color: var(--bd-ink); }
.bd-satz mark.bd-span { background: rgba(200, 162, 42, 0.42); }
.bd-satz.lang { max-height: 6.6em; overflow: hidden; cursor: zoom-in;
  -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.bd-satz.lang.auf { max-height: none; cursor: zoom-out; -webkit-mask-image: none; mask-image: none; }
/* the Grund: folded below, set apart by a rule and a smaller face */
details.bd-grund { border-top: 1px solid var(--bd-line); padding-top: 6px; }
details.bd-grund > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bd-sans); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bd-oxford);
}
details.bd-grund > summary::-webkit-details-marker { display: none; }
details.bd-grund > summary::before { content: "▸"; color: var(--bd-gold); font-size: 12px; transition: transform .15s; }
details.bd-grund[open] > summary::before { transform: rotate(90deg); }
details.bd-grund[open] > summary { margin-bottom: 8px; }
details.bd-grund > * + * { margin-top: 6px; }
.bd-refs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--bd-sans); font-size: 12px; color: var(--bd-muted); }
.bd-ref b { font-weight: 600; color: var(--bd-ink); }
.bd-ref.fest b { color: var(--bd-oxford); }
.bd-ref[data-ind-id] { cursor: pointer; border-bottom: 1px dotted var(--bd-gold); }
.bd-offen-titel { font-family: var(--bd-sans); font-size: 11.5px; font-weight: 650; color: var(--bd-muted); }
.bd-frage { font-size: 12.5px; color: var(--bd-ink-muted); padding-left: 8px; border-left: 2px solid var(--bd-gold-border); margin-top: 3px; }
.bd-ansicht > * + * { margin-top: 10px; }
.bd-korrektur { display: grid; gap: 6px; }
.bd-korrektur textarea, .bd-korrektur input { font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1px solid var(--bd-line-strong); border-radius: var(--bd-radius); background: #fff; color: var(--bd-ink); }
.bd-korrektur .bd-knopf { justify-self: start; }
.bd-segment { margin: 3px 0; padding-left: 8px; border-left: 3px solid var(--bd-line-strong); font-size: 12.5px; color: var(--bd-ink-muted); }
.bd-segment b { font-weight: 600; color: var(--bd-ink); }
.bd-segment .bd-rolle { font-family: var(--bd-sans); font-size: 11px; color: var(--bd-muted); margin-left: 4px; }
.bd-meta { font-family: var(--bd-sans); font-size: 11.5px; color: var(--bd-muted); }
.bd-vertiefen { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--bd-line); }
.bd-vertiefen button, .bd-knopf {
  font-family: var(--bd-sans); font-size: 12px; background: transparent; border: 1px solid var(--bd-line-strong);
  color: var(--bd-oxford); padding: 3px 9px; border-radius: var(--bd-radius); cursor: pointer;
}
.bd-vertiefen button.on, .bd-knopf.primaer { background: var(--bd-oxford); color: var(--bd-gold-pale); border-color: var(--bd-oxford); }
.bd-vertiefen button:disabled { opacity: .5; cursor: default; }
.bd-umfeld p { margin: 4px 0; font-size: 13px; color: var(--bd-ink-muted); }
.bd-umfeld p.aktuell { color: var(--bd-ink); background: rgba(200, 162, 42, 0.14); border-radius: 3px; padding: 2px 4px; }
.bd-dossier { padding: 6px 0; border-top: 1px solid var(--bd-line); font-size: 13px; }
.bd-dossier:first-child { border-top: 0; }
.bd-dossier b { font-weight: 600; cursor: pointer; border-bottom: 1px dotted var(--bd-gold); }
.bd-dossier .bd-meta { margin-top: 2px; }
.bd-mark { background: rgba(200, 162, 42, 0.18); border-radius: 3px; box-shadow: 0 0 0 3px rgba(200, 162, 42, 0.18); }

/* ── Host: ai-viewer (viewer.html; bedeutung.js sets body.bd-av). The column is the last flex child of the document
   view (.content-wrapper); facsimile and transcript share what is left. The badge joins the viewer's edge tabs
   (Query, Dictionary, Audit) in their form, above them, and is hidden with the document view (Agents mode). ── */
.content-wrapper > #bd-column { flex: 0 0 var(--bd-w, 380px); width: var(--bd-w, 380px); }
body.bd-offen .content-wrapper > .panel { min-width: 0; }
body.bd-av #bd-badge {
  top: calc(50% - 96px); transform: translateY(-100%); writing-mode: vertical-rl; z-index: 9000;
  font: 600 12px/1.1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .5px; text-transform: uppercase;
  background: #002147; color: #efe3c4; border: 1px solid #c8a22a; border-right: 0; border-radius: 6px 0 0 6px;
  padding: 10px 6px; box-shadow: -2px 0 6px rgba(0, 0, 0, .15);
}
body.bd-av #bd-badge:hover { background: #01315f; }
body.bd-av #bd-badge.on { background: #c8a22a; color: #002147; }
body.bd-av #bd-body { padding-right: 34px; }
body:has(#documentView.hidden) #bd-badge { display: none; }
@media (prefers-color-scheme: dark) {
  body.bd-av #bd-column .nk-chip.ok { color: #7ee2a8; }
  body.bd-av #bd-column .nk-chip.warn { color: #f0c36b; }
  body.bd-av #bd-column .nk-chip.acc { color: #8fc1ff; }
  body.bd-av .bd-satz mark.bd-span { background: rgba(226, 186, 66, 0.35); }
}
@media (max-width: 900px) {
  body.bd-offen .content-wrapper > #bd-column { flex-basis: auto; width: auto; height: 34%; border-left: 0; border-top: 1px solid var(--bd-line-strong); }
}