/* Workspace right column «Maskierung» shell (design part 2b); the body is the Tabelle (ws-table.css).
   Spec: design handoff README §1c; values from «Lysi Workspace.dc.html».
   Tokens only (tokens.css); category colours via .cat-* (--cat-*). */

.wsm {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--lysi-panel); border-left: 1px solid var(--lysi-border);
  color: var(--lysi-ink); font-family: var(--lysi-font-sans);
}
.wsm button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; text-align: left; }

/* header 64 px; segmented control spec = Ansicht */
.wsm-head {
  height: 64px; flex: none; display: flex; align-items: center; gap: var(--lysi-s-10);
  padding: 0 var(--lysi-s-20); border-bottom: 1px solid var(--lysi-border);
}
.wsm-title { font-size: var(--lysi-fs-15); font-weight: 600; }
.wsm-seg {
  margin-left: auto; 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;
}
.wsm .wsm-seg-item { padding: 4px 11px; border-radius: var(--lysi-r-5); color: var(--lysi-ink2); }
.wsm .wsm-seg-item.on { background: var(--lysi-seg-on); color: var(--lysi-seg-on-ink); box-shadow: var(--lysi-seg-shadow); }

.wsm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* «richtig» box behind the %: a circle; ticked → an oversized ✓ in the logo's «DOC» teal */
.wsm-ok { display: inline-flex; align-items: center; flex: none; cursor: pointer; margin-left: var(--lysi-s-6); }
.wsm-ok input {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0; cursor: pointer;
  width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--lysi-ink3); background: transparent;
}
.wsm-ok input:hover { border-color: var(--lysi-doc); }
.wsm-ok input:checked { border-color: var(--lysi-doc); }
.wsm-ok input:checked::after {
  content: '✓'; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -62%);
  font-size: 15px; font-weight: 700; line-height: 1; color: var(--lysi-doc);
}
.wsm-ok input:disabled { cursor: default; }
.wsm-ok input:focus-visible { outline: 2px solid var(--lysi-doc); outline-offset: 2px; }

/* text → panel: the hovered word's row / closed category lights up, then pulses */
@keyframes wsm-pulse { 0%, 100% { box-shadow: inset 3px 0 0 var(--lysi-doc); } 50% { box-shadow: inset 3px 0 0 transparent; background: var(--lysi-row-on); } }
#wsMask .is-hover { background: var(--lysi-row-on); }
#wsMask .is-pulse { animation: wsm-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #wsMask .is-pulse { animation: none; box-shadow: inset 3px 0 0 var(--lysi-doc); } }

/* category icons (caticons.js; design_handoff_category_icons) */
.ws-icon { flex: none; display: block; }
.ws-cat-tile {
  width: 26px; height: 26px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cat-bg); color: var(--cat-fg);
}
.ws-cat-tile.is-lg { width: 36px; height: 36px; border-radius: 9px; }
.wst-ph { display: inline-flex; align-items: center; gap: 3px; }
.wst-chip .ws-icon { color: var(--lysi-ink2); }
.wst-chip.is-empty { opacity: .45; }