/* Workspace shell (design part 2a) — grid, regions, step visibility.
   Colours only via tokens.css (--lysi-*). Spec: handoff README §1, contract p2. */

body.ws-on { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--lysi-main); }
body.ws-on .header, body.ws-on .tabs { display: none; }   /* O1: controls live in the rail footer */

.ws {
  --ws-right: var(--ws-right-list, 336px);   /* user width: resize.js */
  position: relative; flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) var(--ws-right);
  transition: grid-template-columns 200ms ease;
  background: var(--lysi-main); color: var(--lysi-ink);
  font-family: var(--lysi-font-sans); -webkit-font-smoothing: antialiased;
}
.ws[data-panel="table"] { --ws-right: var(--ws-right-table, 480px); }   /* the only view since 2026-10-03: leaves the text footer room */
.ws[data-step="1"], .ws[data-step="4"] { --ws-right: 0px; }
/* Maskierung width handle (resize.js): on the column's left edge */
.ws-mask-grip {
  position: absolute; top: 0; bottom: 0; right: calc(var(--ws-right) - 3px); width: 6px; z-index: 5;
  cursor: col-resize; touch-action: none;
}
.ws-mask-grip:hover, .ws.is-resizing .ws-mask-grip { background: var(--lysi-accent); opacity: .35; }
.ws[data-step="1"] .ws-mask-grip, .ws[data-step="4"] .ws-mask-grip { display: none; }
.ws.is-resizing { transition: none; user-select: none; cursor: col-resize; }

.ws-rail {
  background: var(--lysi-rail); border-right: 1px solid var(--lysi-rail-border);
  display: flex; flex-direction: column; padding: 16px 12px; min-height: 0; overflow-y: auto;
}
.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ws-mask {
  background: var(--lysi-panel); border-left: 1px solid var(--lysi-border);
  display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
}
.ws[data-step="1"] .ws-mask, .ws[data-step="4"] .ws-mask { visibility: hidden; border-left: 0; }

.ws-review { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ws-head { height: 64px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 28px; }
.ws-safety { flex: none; }
.ws-doc { flex: 1; min-height: 0; padding: 0 28px; display: flex; flex-direction: column; }
.ws-foot { height: 68px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 28px; font-size: 13.5px; }

/* step visibility: 1 Einfügen · 2/3 Prüfen/Verwenden · 4 Wiederherstellen */
.ws-input, .ws-review, .ws-restore { display: none; }
.ws[data-step="1"] .ws-input { display: flex; }
.ws[data-step="2"] .ws-review, .ws[data-step="3"] .ws-review { display: flex; }
.ws[data-step="4"] .ws-restore { display: flex; }
.ws-input, .ws-restore { flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.ws-restore { padding: 20px 28px; }
.ws .tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }   /* adopted tabs: the step decides visibility */

/* step 1 «Einfügen» (header, paper textarea, footer, table mode): ws-input.css */

/* macOS: hiddenInset title bar (main.js) — traffic lights sit in the rail's top-left,
   the rail top strip and the step header rows move the window. */
body.ws-mac-inset .ws-rail { padding-top: 44px; position: relative; }
body.ws-mac-inset .ws-rail::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 44px; -webkit-app-region: drag; }
body.ws-mac-inset :is(.ws-wordmark, .ws-head, .ws-in-head, .wsm-head) { -webkit-app-region: drag; }
body.ws-mac-inset :is(.ws-head, .ws-in-head, .wsm-head) :is(button, input, select, textarea, a) { -webkit-app-region: no-drag; }

/* ── rail (README §1a) ── */
.ws-wordmark { padding: 12px 8px 24px; line-height: 0; }
body.ws-mac-inset .ws-wordmark { padding-top: 8px; }
/* SVG logo, viewBox 826×93: caps span ~86/93 → 18 px tall ≈ 17 px cap height */
.ws-wordmark .lysi-logo { height: 18px; width: auto; }
[data-theme="light"] .ws-wordmark .lysi-logo-dark,
:root:not([data-theme="light"]) .ws-wordmark .lysi-logo-light { display: none; }
.ws-steps { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ws-step {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--lysi-r-7);
  border: 0; background: none; color: var(--lysi-ink2); font: inherit; text-align: left; cursor: pointer;
}
.ws-step-mark {
  width: 20px; height: 20px; flex: none; border-radius: 50%; box-sizing: border-box; font-size: 11px;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--lysi-step-ring);
}
.ws-step.is-done .ws-step-mark { border: 0; background: var(--lysi-done); color: var(--lysi-on-done); font-weight: 700; }
.ws-step.is-current { background: var(--lysi-rail-on); box-shadow: var(--lysi-seg-shadow); color: var(--lysi-ink); font-weight: 600; }
.ws-step.is-current .ws-step-mark { border-color: var(--lysi-ink); }
.ws-step-badge {
  margin-left: auto; font: 600 11.5px var(--lysi-font-mono); background: var(--lysi-warn-bg);
  color: var(--lysi-warn-ink); padding: 1px 6px; border-radius: var(--lysi-r-4);
}
.ws-step-ok { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--lysi-ok-ink); }
.ws-rail-foot {   /* 15b compact: groups 16 px apart */
  margin-top: auto; display: flex; flex-direction: column; gap: var(--lysi-s-16); padding: var(--lysi-s-12) 8px 0;
  font-size: 12.5px; color: var(--lysi-ink2); line-height: 1.45; position: relative;
}
.ws-rail-group { display: flex; flex-direction: column; gap: 4px; }
.ws-rail-sep { padding-top: 14px; border-top: 1px solid var(--lysi-rail-border); }
.ws-rail-title { font-weight: 600; color: var(--lysi-ink); }
.ws-rail-link, .ws-rail-link-plain { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.ws-rail-link { color: var(--lysi-accent-text); font-weight: 500; }
.ws-rail-link-plain { color: inherit; }
.ws-rail-link-plain:hover { color: var(--lysi-ink); }
.ws-lang.is-on { color: var(--lysi-ink); font-weight: 600; cursor: default; }
/* 15b foot: hairline, Mapping row (13 px), meta row (12 px, ink3): ● Offline … DE EN ☾ ⚙ */
.ws-rail-meta { display: flex; flex-direction: column; gap: var(--lysi-s-14); padding-top: var(--lysi-s-14); border-top: 1px solid var(--lysi-rail-border); }
.ws-rail-status { display: flex; align-items: center; gap: var(--lysi-s-8); white-space: nowrap; font-size: var(--lysi-fs-12); color: var(--lysi-ink3); position: relative; }
.ws-rail-end { margin-left: auto; display: flex; align-items: center; gap: var(--lysi-s-10); }
.ws-rail-status .ws-rail-settings { display: inline-flex; color: var(--lysi-ink2); }
.ws-tresor-entry { margin-top: var(--lysi-s-4, 4px); font-size: var(--lysi-fs-14); width: 100%; gap: var(--lysi-s-8); }
.ws-dot-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--lysi-ok); }
.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 4px; color: var(--lysi-ink);
}
.ws-settings-pop {
  /* fixed, not absolute: the rail scroll box would clip the 4-way theme row */
  position: fixed; bottom: 44px; left: 20px; min-width: 180px; z-index: 20; display: flex; flex-direction: column;
  background: var(--lysi-card); border: 1px solid var(--lysi-border); border-radius: var(--lysi-r-8);
  box-shadow: var(--lysi-shadow-panel); padding: 4px;
}
.ws-settings-pop[hidden] { display: none; }
.ws-settings-item {
  border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--lysi-r-6);
  font: 13px var(--lysi-font-sans); color: var(--lysi-ink); cursor: pointer;
}
.ws-settings-item:hover { background: var(--lysi-row-on); }
/* «Regeln» (word rules): word → placeholder ✕ */
.ws-rules { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px 9px; font: 12px var(--lysi-font-sans); color: var(--lysi-ink); max-height: 200px; overflow-y: auto; }
.ws-rules-title { color: var(--lysi-ink2); }
.ws-rules-empty { color: var(--lysi-ink3); max-width: 220px; }
.ws-rules-row { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ws-rules-ph { font-family: var(--lysi-font-mono); color: var(--lysi-ink2); }
.ws-rules-del { margin-left: auto; border: 0; background: none; color: var(--lysi-ink3); cursor: pointer; padding: 0 4px; border-radius: var(--lysi-r-4); }
.ws-rules-del:hover { background: var(--lysi-row-on); color: var(--lysi-ink); }
.ws-theme-row { display: flex; flex-direction: column; gap: 6px; padding: 7px 10px 9px; font: 13px var(--lysi-font-sans); color: var(--lysi-ink); }
.ws-theme-seg { display: flex; gap: 2px; background: var(--lysi-rail); border-radius: var(--lysi-r-6); padding: 2px; }
.ws-theme-opt {
  flex: 1; border: 0; background: none; padding: 4px 6px; border-radius: var(--lysi-r-4);
  font: 12px var(--lysi-font-sans); color: var(--lysi-ink2); cursor: pointer; white-space: nowrap;
}
.ws-theme-opt.is-on { background: var(--lysi-rail-on); box-shadow: var(--lysi-seg-shadow); color: var(--lysi-ink); font-weight: 600; }

/* Mapping in one line: lock · Mapping · n · save icon (rail.js mappingGroup) */
.ws-rail-group.ws-map { flex-direction: row; align-items: center; gap: var(--lysi-s-8); color: var(--lysi-ink2); font-size: var(--lysi-fs-13); }
.ws-map .ws-map-title { margin: 0; font-weight: 500; }
.ws-map-n { font-variant-numeric: tabular-nums; color: var(--lysi-ink3); }
.ws-map .ws-map-save { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--lysi-r-6); color: var(--lysi-ink2); }
.ws-map .ws-map-save:hover { background: var(--lysi-row-on); color: var(--lysi-ink); }