/* Workspace centre column (design part 2a, executor D): #wsHead #wsSafety
   #wsDoc #wsFoot + manual-marking tooltip. Spec: design handoff README §1b;
   inline styles of «Lysi Workspace.dc.html». Colours only via tokens.css. */

.ws-head[hidden], .ws-safety[hidden], .ws-doc[hidden], .ws-foot[hidden],
.ws-foot [hidden], .ws-mark-tip[hidden] { display: none; }

.ws-kbd {
  font-family: var(--lysi-font-mono); background: var(--lysi-kbd); border: 1px solid var(--lysi-ghost);
  border-radius: var(--lysi-r-4); padding: 0 var(--lysi-s-4); color: var(--lysi-ink);
}

/* ── head ── */
.ws-head {
  height: 64px; flex: none; display: flex; align-items: center; gap: var(--lysi-s-14);
  padding: 0 var(--lysi-s-28); color: var(--lysi-ink);
}
.ws-head-title { font-size: var(--lysi-fs-19); font-weight: 600; letter-spacing: -0.01em; }
.ws-head-lines { font-size: var(--lysi-fs-13); color: var(--lysi-ink3); white-space: nowrap; }
.ws-head-spacer { margin-left: auto; }
/* Ansicht buttons: icon + label; a narrow head (Tabelle, a wide Maskierung column)
   keeps the icons only (title = name) — owner 2026-09-30 */
.ws-head { container-type: inline-size; container-name: wshead; }
.ws-seg-item { display: inline-flex; align-items: center; gap: var(--lysi-s-6); }
.ws-seg-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }
@container wshead (max-width: 620px) {
  .ws-seg-label { display: none; }
  .ws-seg-item { padding-left: var(--lysi-s-8); padding-right: var(--lysi-s-8); }
}
.ws-lines-btn {
  width: 28px; height: 28px; border: 0; border-radius: var(--lysi-r-6); cursor: pointer;
  background: transparent; color: var(--lysi-ink3); font: 600 var(--lysi-fs-14) var(--lysi-font-mono);
}
.ws-lines-btn:hover { background: var(--lysi-seg); color: var(--lysi-ink2); }
.ws-lines-btn.is-on { background: var(--lysi-seg-on); color: var(--lysi-seg-on-ink); box-shadow: var(--lysi-seg-shadow); }
.ws-seg {
  display: flex; background: var(--lysi-seg); border-radius: var(--lysi-r-7); padding: var(--lysi-s-2);
  font-size: var(--lysi-fs-13); font-weight: 500;
}
.ws-seg-item {
  padding: var(--lysi-s-4) 11px; border-radius: var(--lysi-r-5); border: 0; cursor: pointer;
  background: transparent; color: var(--lysi-ink2); font: inherit;
}
.ws-seg-item.is-on { background: var(--lysi-seg-on); color: var(--lysi-seg-on-ink); box-shadow: var(--lysi-seg-shadow); }

/* ── safety bar ── */
.ws-safety {
  margin: 0 var(--lysi-s-28) var(--lysi-s-14); display: flex; flex-wrap: wrap; flex: none;
  border: 1px solid var(--lysi-border); border-radius: var(--lysi-r-10); overflow: hidden;
  background: var(--lysi-panel); font-size: var(--lysi-fs-13); line-height: 1.35; color: var(--lysi-ink);
}
.ws-safe-cell {
  padding: var(--lysi-s-10) var(--lysi-s-16); display: flex; align-items: center; gap: var(--lysi-s-9);
  white-space: nowrap; border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
}
button.ws-safe-cell { cursor: pointer; }
.ws-safe-cell + .ws-safe-cell { border-left: 1px solid var(--lysi-border); }
.ws-safe-cell b { font-weight: 600; }
.ws-safe-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lysi-ok); }
.ws-safe-sub { color: var(--lysi-ink3); }
.ws-safe-warn { background: var(--lysi-warn-bg); color: var(--lysi-warn-ink); }
.ws-safe-sq { width: 8px; height: 8px; border-radius: 2px; background: var(--lysi-warn-line); }
.ws-safe-done { color: var(--lysi-ok-ink); }
.ws-safe-miss {
  gap: var(--lysi-s-6); color: var(--lysi-ink2); min-width: 0; flex: 1 1 auto;
  box-shadow: 0 -1px 0 var(--lysi-border);
}
.ws-safe-miss b { color: var(--lysi-ink); }

/* ── document ── */
.ws-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--lysi-s-28); }
/* the ONE scroll container (ui-invariants: cards never scroll) */
.ws-doc-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ws-paper {
  flex: 1 0 auto; background: var(--lysi-paper); border: 1px solid var(--lysi-paper-border);
  border-radius: var(--lysi-r-10); padding: var(--lysi-s-32) var(--lysi-s-52); overflow: hidden;
  font-size: var(--lysi-fs-15); line-height: 29px; color: var(--lysi-paper-ink);
}
.ws-doc-scroll[data-panel="table"] .ws-paper { padding: var(--lysi-s-28) var(--lysi-s-32); }
.ws-paper-label {
  font-size: var(--lysi-fs-11-5); letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  margin-bottom: var(--lysi-s-10); line-height: 1.35;
}
.ws-paper-anon .ws-paper-label { color: var(--lysi-accent-text); }
.ws-paper-orig .ws-paper-label { color: var(--lysi-paper-ink3); }
.ws-line { min-height: 29px; white-space: pre-wrap; }

/* Line numbers (owner request, opt-in, rail.js «Zeilennummern», default OFF).
   Pure CSS counter on ::before — NEVER a DOM node, so it can't end up in
   textContent, copy/selection or marking.js's data-orig offsets, and the
   toggle needs no re-render (rail.js only flips the .has-lines class). */
.ws-lines { counter-reset: ws-line; }
.ws-line { counter-increment: ws-line; }
.ws.has-lines .ws-line { position: relative; padding-left: 34px; }   /* no flex: spans must stay inline (wrapping + copy text) */
.ws.has-lines .ws-line::before {
  content: counter(ws-line); position: absolute; left: 0; top: 0; width: 26px;
  text-align: right; font-family: var(--lysi-font-mono); font-size: var(--lysi-fs-11-5);
  color: var(--lysi-paper-ink3); user-select: none;
}

.ws-mark { cursor: pointer; transition: opacity .15s; }
.ws-chip {
  font-family: var(--lysi-font-mono); font-size: var(--lysi-fs-12-5); font-weight: 500;
  padding: var(--lysi-s-2) var(--lysi-s-6); border-radius: var(--lysi-r-4);
  background: var(--cat-bg); color: var(--cat-fg);
}
.ws-om { padding: 1px var(--lysi-s-2); border-radius: 3px; background: var(--cat-origbg); box-shadow: inset 0 -2px 0 var(--cat-underline); }
.ws-chip.is-hit { box-shadow: 0 0 0 1.5px var(--cat-fg); }
.ws-om.is-hit { box-shadow: 0 0 0 1.5px var(--cat-fg), inset 0 -2px 0 var(--cat-underline); }
/* open (zu prüfen): the same chip / mark as every mask + a dashed amber underline (owner 2026-10-03) */
.ws-unsure {
  text-decoration: underline dashed var(--lysi-warn-line); text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-skip-ink: none;
}
.ws-om.ws-unsure { box-shadow: none; }
.ws-unsure.is-hit { box-shadow: 0 0 0 1.5px var(--lysi-warn-line); }
/* kept («Behalten»): original stays in the copy, still findable → dashed category underline */
.ws-kept {
  text-decoration: underline dashed var(--cat-underline); text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; text-decoration-skip-ink: none;
}
/* kept (Behalten): a small ✕ top right — seen on screen, never in the copy or a
   selection (generated content); shows an accidental «Behalten» (owner 2026-09-29) */
.ws-kept { position: relative; }
.ws-kept::after {
  content: '✕'; position: absolute; top: -0.55em; right: -0.5em; font-size: 9px; line-height: 1;
  padding: 1px 2px; border-radius: 50%; background: var(--lysi-card); color: var(--lysi-ink3);
  box-shadow: 0 0 0 1px var(--lysi-border); pointer-events: none; user-select: none;
}
.ws-kept.is-hit { box-shadow: 0 0 0 1.5px var(--cat-fg); border-radius: 3px; }
.ws-doc-scroll.has-focus .ws-mark:not(.is-hit) { opacity: .28; }
.ws-mark.is-hover { outline: 1.5px solid var(--lysi-ink3); outline-offset: 1px; }
/* pointer stays on a data point in the Maskierung panel → its places pulse slowly */
@keyframes ws-pulse { 0%, 100% { outline-color: var(--lysi-ink3); opacity: 1; } 50% { outline-color: var(--lysi-doc); opacity: .45; } }
.ws-mark.is-pulse { outline-width: 2px; animation: ws-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ws-mark.is-pulse { animation: none; outline-color: var(--lysi-doc); } }

/* Nebeneinander: Original left, Anonymisiert right, one scroll container */
.ws-split { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--lysi-s-12); }
.ws-split .ws-paper { padding: var(--lysi-s-20) var(--lysi-s-24); font-size: var(--lysi-fs-13-5); line-height: 25px; }
.ws-split .ws-paper-label { font-size: var(--lysi-fs-11); margin-bottom: var(--lysi-s-8); }
.ws-split .ws-line { min-height: 25px; }
.ws-split .ws-chip { font-size: var(--lysi-fs-11-5); padding: 1px 5px; }

/* ── footer ── */
.ws-foot {
  height: 68px; flex: none; display: flex; align-items: center; gap: var(--lysi-s-12);
  padding: 0 var(--lysi-s-28); font-size: var(--lysi-fs-13-5); color: var(--lysi-ink);
}
.ws-foot button { font: inherit; border: 0; cursor: pointer; }
.ws-foot-reset { background: transparent; color: var(--lysi-ink3); padding: 0; }
.ws-foot-focus {
  display: flex; align-items: center; gap: var(--lysi-s-8); padding: 5px var(--lysi-s-10);
  border-radius: var(--lysi-r-6); background: var(--lysi-seg); color: var(--lysi-ink2);
}
.ws-foot-focus b { font-weight: 600; color: var(--lysi-ink); }
.ws-foot-x { color: var(--lysi-ink3); }
.ws-foot-share { display: flex; align-items: center; }
.ws-foot .ws-foot-confirm {
  margin-left: auto; background: var(--lysi-accent); color: var(--lysi-on-accent);
  padding: var(--lysi-s-10) var(--lysi-s-18); border-radius: var(--lysi-r-8); font-weight: 600;
  font-size: var(--lysi-fs-14); display: flex; align-items: center; gap: var(--lysi-s-10); white-space: nowrap;
}
.ws-foot .ws-foot-confirm:disabled { background: var(--lysi-disabled); color: var(--lysi-disabled-ink); cursor: default; }
/* gated copy hovered → bubble «Decide 1 first» + the open decisions light up (owner 2026-10-18) */
.ws-foot .ws-foot-confirm { position: relative; }
.ws-foot .ws-foot-confirm:disabled:hover::after {
  content: attr(data-hint); position: absolute; right: 0; bottom: calc(100% + var(--lysi-s-8));
  padding: var(--lysi-s-6) var(--lysi-s-10); border-radius: var(--lysi-r-6); white-space: nowrap;
  background: var(--lysi-warn-bg); color: var(--lysi-warn-ink); border: 1px solid var(--lysi-warn-border);
  font-size: var(--lysi-fs-12-5); font-weight: 600; box-shadow: 0 4px 16px var(--tooltip-shadow); pointer-events: none;
}
body:has(.ws-foot-confirm:disabled:hover) :is(.wst-sec.is-todo, .wst-row.is-open, .wss-tile.is-decisions) {
  background: var(--lysi-warn-row); box-shadow: inset 3px 0 0 var(--lysi-warn-line); transition: background 120ms;
}
.ws-foot-kbd { font-family: var(--lysi-font-mono); font-size: var(--lysi-fs-11); opacity: .75; }
.ws-foot .ws-foot-next {
  margin-left: auto; background: transparent; color: var(--lysi-ink); box-shadow: inset 0 0 0 1px var(--lysi-ghost);
  padding: var(--lysi-s-10) var(--lysi-s-16); border-radius: var(--lysi-r-8); font-weight: 500; white-space: nowrap;
}
.ws-foot .ws-foot-next[hidden] { display: none; }
.ws-foot .ws-foot-next:not([hidden]) + .ws-foot-confirm { margin-left: 0; }

/* ── manual-marking tooltip (F-01: «Alle ersetzen» + «Nur diese Stelle») ── */
.ws-mark-tip {   /* same look as the chip menu (.ws-cm) */
  position: fixed; z-index: 900; display: flex; flex-direction: column; gap: var(--lysi-s-6);
  min-width: 220px; max-width: 320px; padding: var(--lysi-s-6); border-radius: var(--lysi-r-8);
  background: var(--lysi-card); border: 1px solid var(--lysi-border); box-shadow: 0 4px 16px var(--tooltip-shadow);
  font-family: var(--lysi-font-sans); font-size: var(--lysi-fs-12-5); color: var(--lysi-ink);
}
.ws-mark-head {
  color: var(--lysi-ink2); font-weight: 600; padding: var(--lysi-s-4) var(--lysi-s-6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-mark-row { display: flex; align-items: center; gap: var(--lysi-s-6); }
.ws-mark-cat, .ws-mark-custom {
  background: var(--lysi-card); color: var(--lysi-ink); border: 1px solid var(--lysi-ghost);
  border-radius: var(--lysi-r-6); padding: var(--lysi-s-4) var(--lysi-s-8); font: inherit; min-width: 0;
}
.ws-mark-custom { flex: 1; }
.ws-mark-all, .ws-mark-one {
  border-radius: var(--lysi-r-6); padding: var(--lysi-s-4) var(--lysi-s-10);
  font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.ws-mark-all { background: var(--lysi-btn); color: var(--lysi-on-btn); border: 1px solid transparent; }
.ws-mark-one { background: transparent; color: var(--lysi-ink); border: 1px solid var(--lysi-ghost); }
.ws-mark-one:disabled { opacity: .45; cursor: default; }
.ws-mark-always { padding: 0 var(--lysi-s-6); }
.ws-mark-always[hidden] { display: none; }

/* ── marking tip, two modes (marking-restore.js): tabs, category cards, preview ── */
.ws-mark-tip.is-restore { width: 560px; max-width: calc(100vw - var(--lysi-s-16)); }
.ws-mark-tabs[hidden], .ws-mark-restore[hidden], .ws-mark-hide[hidden], .ws-rs-rows[hidden] { display: none; }
.ws-mark-hide { display: flex; flex-direction: column; gap: var(--lysi-s-6); min-height: 0; overflow-y: auto; }
.ws-rs-tabs { display: flex; gap: var(--lysi-s-6); }
.ws-rs-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--lysi-s-8);
  padding: var(--lysi-s-10); border-radius: var(--lysi-r-8); border: 1px solid var(--lysi-ghost);
  background: transparent; color: var(--lysi-ink2); font: inherit; font-weight: 600; cursor: pointer;
}
.ws-rs-tab[aria-selected="true"] { background: var(--lysi-seg); color: var(--lysi-ink); border-color: var(--lysi-doc); }
.ws-rs-ico { width: 18px; height: 18px; flex: none; }
.ws-mark-prev { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lysi-s-6); padding: var(--lysi-s-6); border-radius: var(--lysi-r-6); background: var(--lysi-seg); color: var(--lysi-ink2); }
/* capped popup (place() maxH): tabs, head and footer stay, only the cards scroll */
.ws-mark-restore:not([hidden]), .ws-rs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ws-mark-tabs, .ws-rs-head, .ws-rs-foot { flex: none; }
.ws-rs-cards { display: flex; flex-direction: column; gap: var(--lysi-s-6); min-height: 0; overflow-y: auto; }
.ws-rs { gap: var(--lysi-s-6); }
.ws-rs-head { color: var(--lysi-ink2); font-weight: 600; padding: var(--lysi-s-4) var(--lysi-s-6); }
.ws-rs-card { border: 1px solid var(--lysi-border); border-radius: var(--lysi-r-8); }
.ws-rs-chead { display: flex; align-items: center; gap: var(--lysi-s-8); padding-right: var(--lysi-s-8); }
.ws-rs-chev {
  flex: 1; display: flex; align-items: center; gap: var(--lysi-s-8); padding: var(--lysi-s-8);
  border: 0; background: transparent; color: var(--lysi-ink); font: inherit; text-align: left; cursor: pointer;
}
.ws-rs-chev .ws-rs-ico { width: 14px; height: 14px; transition: transform .15s; }
.ws-rs-chev[aria-expanded="true"] .ws-rs-ico { transform: rotate(90deg); }
.ws-rs-tile { width: 14px; height: 14px; border-radius: var(--lysi-r-4); background: var(--cat-swatch); flex: none; }
.ws-rs-name { font-weight: 600; flex: 1; }
.ws-rs-num { color: var(--lysi-ink3); }
.ws-rs-sw {
  position: relative; width: 34px; height: 20px; flex: none; border-radius: var(--lysi-r-99);
  border: 1px solid var(--lysi-ghost); background: var(--lysi-seg); cursor: pointer; padding: 0;
}
.ws-rs-sw[aria-checked="true"] { background: var(--lysi-doc); border-color: var(--lysi-doc); }
.ws-rs-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--lysi-r-99); background: var(--lysi-card); transition: transform .15s; }
.ws-rs-sw[aria-checked="true"] .ws-rs-knob { transform: translateX(14px); }
.ws-rs-rows { display: flex; flex-direction: column; padding: 0 var(--lysi-s-8) var(--lysi-s-8); }
.ws-rs-row { display: flex; align-items: center; gap: var(--lysi-s-8); padding: var(--lysi-s-4) var(--lysi-s-6); border-radius: var(--lysi-r-5); cursor: pointer; }
.ws-rs-row:hover { background: var(--lysi-seg); }
.ws-rs-orig { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-rs-arrow, .ws-rs-more, .ws-rs-scope { color: var(--lysi-ink3); }
.ws-rs-more { margin-left: auto; white-space: nowrap; }
.ws-rs-foot { display: flex; align-items: center; gap: var(--lysi-s-8); padding-top: var(--lysi-s-4); }
.ws-rs-count { font-weight: 600; }
.ws-rs-scope { flex: 1; }
.ws-rs-go, .ws-rs-cancel {
  border-radius: var(--lysi-r-6); padding: var(--lysi-s-4) var(--lysi-s-10); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.ws-rs-go { background: var(--lysi-btn); color: var(--lysi-on-btn); border: 1px solid transparent; }
.ws-rs-cancel { background: transparent; color: var(--lysi-ink); border: 1px solid var(--lysi-ghost); }
.ws-rs-go:disabled { opacity: .45; cursor: default; }
.ws-rs-ceiling { padding: var(--lysi-s-8); color: var(--lysi-ink2); }
/* live preview while «aufheben» is open: the original in place, teal tint + dashed underline; hover ring */
.ws-mark.ws-rs-prev {
  font-family: inherit; color: inherit; background: color-mix(in srgb, var(--lysi-doc) 14%, transparent);
  text-decoration: underline dashed var(--lysi-doc); text-underline-offset: 3px;
}
.ws-mark.ws-rs-ring { outline: 2px solid var(--lysi-doc); outline-offset: 1px; border-radius: var(--lysi-r-4); }

/* ── chip menu (chipmenu.js): Behalten / Eigener Wert / Maskieren per span ── */
.ws-cm {
  position: fixed; z-index: 900; display: flex; flex-direction: column; gap: var(--lysi-s-6);
  min-width: 220px; max-width: 320px; padding: var(--lysi-s-6); border-radius: var(--lysi-r-8);
  background: var(--lysi-card); border: 1px solid var(--lysi-border); box-shadow: 0 4px 16px var(--tooltip-shadow);
  font-family: var(--lysi-font-sans); font-size: var(--lysi-fs-12-5); color: var(--lysi-ink);
}
.ws-cm button { font: inherit; cursor: pointer; }
.ws-cm .ws-cm-head {
  border: 0; background: transparent; color: var(--lysi-ink2); text-align: left; font-weight: 600;
  padding: var(--lysi-s-4) var(--lysi-s-6); border-radius: var(--lysi-r-5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-cm .ws-cm-head:hover { background: var(--lysi-seg); color: var(--lysi-ink); }
.ws-cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lysi-s-6); }
.ws-cm .ws-cm-act {
  border: 1px solid transparent; border-radius: var(--lysi-r-6); padding: var(--lysi-s-4) var(--lysi-s-10);
  background: transparent; color: var(--lysi-ink); font-weight: 500; white-space: nowrap;
}
.ws-cm .ws-cm-primary { background: var(--lysi-btn); color: var(--lysi-on-btn); }
.ws-cm .ws-cm-ghost { border-color: var(--lysi-ghost); }
.ws-cm .ws-cm-keep { background: var(--lysi-seg); color: var(--lysi-ink); }
.ws-cm-note { color: var(--lysi-ink3); }
.ws-cm-always, .ws-mark-always { display: inline-flex; align-items: center; gap: var(--lysi-s-4); color: var(--lysi-ink2); white-space: nowrap; cursor: pointer; }
.ws-cm-input {
  flex: 1; min-width: 0; padding: var(--lysi-s-4) var(--lysi-s-8); border: 1px solid var(--lysi-ghost);
  border-radius: var(--lysi-r-6); background: var(--lysi-card); color: var(--lysi-ink);
  font: 500 var(--lysi-fs-12-5) var(--lysi-font-mono);
}