/* ============================================================
   workshop designer — Claude Collective register
   tokens come from the design system (colors_and_type.css)
   re-declared here to keep the file standalone
   ============================================================ */

:root {
  --bg:        #0E1116;
  --bg-2:      #14181F;          /* one tick brighter for chrome */
  --fg:        #E6E8EB;
  --accent:    #D97757;

  --fg-95:     rgba(230, 232, 235, 0.95);
  --fg-70:     rgba(230, 232, 235, 0.70);
  --fg-40:     rgba(230, 232, 235, 0.40);
  --fg-12:     rgba(230, 232, 235, 0.12);
  --fg-06:     rgba(230, 232, 235, 0.06);
  --fg-03:     rgba(230, 232, 235, 0.03);

  --accent-70: rgba(217, 119, 87, 0.70);
  --accent-12: rgba(217, 119, 87, 0.12);

  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;

  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  40px;

  --radius-2:  4px;

  --duration-fast: 120ms;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);

  --hover-opacity: 0.85;
  --press-opacity: 0.70;

  --topbar-h:  56px;
  --status-h:  36px;
  --rail-w:    216px;
  --inspector-w: 360px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body.cc {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--status-h);
  /* T-864: cap the single implicit column to the viewport. Without this the
     column is `auto` (=max-content) and grows to the topbar's nowrap width
     (~1707px), so on laptops <1707px the rows stretch past the viewport and
     body{overflow:hidden} silently clips the right-side topbar controls
     (Save / lang / appearance). minmax(0,1fr) pins the column to the viewport. */
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

button { background: transparent; color: inherit; border: 0; font: inherit; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

/* selection */
::selection { background: var(--accent); color: var(--bg); }

/* brand glyph */
.cc-slash { color: var(--accent); }

/* the wordmark — 95% rule, header-scale tone */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-dragon {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.95;
}

.cc-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--fg-95);
  white-space: nowrap;
}

/* italics for emphasized terms in titles (Geelen-style) */
.view-h1 em {
  font-style: italic;
  font-weight: inherit;
  color: var(--fg);
}
body[data-type="mono"] .view-h1 em {
  /* Plex Mono has no true italic at 400 — use the medium-weight oblique fallback look */
  font-style: italic;
  color: var(--accent);
}

/* generic press affordance */
.cc-press { transition: opacity var(--duration-fast) var(--ease-out); }
.cc-press:hover { opacity: var(--hover-opacity); }
.cc-press:active { opacity: var(--press-opacity); }
.cc-press:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid var(--fg-12);
  gap: var(--space-3);
}

.topbar-l, .topbar-r {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* T-864: let the left cluster give way first so the rigid right-cluster controls
   (Save / lang / appearance) stay on-screen on laptop widths. topbar-r keeps its
   natural width; topbar-l shrinks and its proj-names ellipsis (see .proj-name). */
.topbar-l { min-width: 0; }

.topbar-sep { color: var(--fg-40); flex: 0 0 auto; }

/* T-854: phone-only rail toggle — hidden on desktop, revealed at ≤600px */
.rail-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  cursor: pointer;
}
.rail-burger:hover { background: var(--fg-06); }

.proj {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  white-space: nowrap;
  /* T-864: allow the proj/ws buttons to shrink so the topbar fits laptop widths.
     Only the name ellipsis-truncates; label + caret stay intact. Full name is
     still available in the dropdown and the view header. */
  min-width: 0;
}
.proj-label { color: var(--fg-40); flex: 0 0 auto; }
/* T-864: .proj-name is a flex row [text][id-chip]; only the text ellipsis-
   truncates so the chip (a sibling, NOT inside the clipped text) stays visible
   and clickable when the button shrinks. See .proj-name-txt and app.js. */
.proj-name  { color: var(--fg); display: inline-flex; align-items: baseline; gap: 0; flex: 0 1 auto; min-width: 0; }
.proj-name-txt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-caret { color: var(--fg-40); margin-left: 4px; font-size: 11px; flex: 0 0 auto; }

.kbd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg-70);
  min-width: 260px;
  white-space: nowrap;
  justify-content: space-between;
}
.kbd-text { color: var(--fg-40); }
/* T-512: compact variant — glyph + kbds only, full label in title attr */
.kbd-btn-compact {
  min-width: 0;
  gap: 6px;
  padding: 6px 8px;
  justify-content: flex-start;
}
.kbd-glyph {
  font-size: 14px;
  line-height: 1;
  color: var(--fg-70);
  margin-right: 2px;
}
/* T-512: footer credit + version */
/* T-915: version badge is now a button (opens the version-history popup) —
   strip native button chrome so it sits flush in the status bar. */
.status-version {
  color: var(--fg-40);
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.status-version:hover { color: var(--fg-70); text-decoration: underline; text-underline-offset: 2px; }
.status-version:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.status-built { color: var(--fg-40); }
.status-built a {
  color: var(--fg-70);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.status-built a:hover { color: var(--fg); text-decoration-style: solid; }
/* Legal links (T-908): moved from rail to status bar; styled like .status-built. */
.status-legal { color: var(--fg-40); }
.status-legal a {
  color: var(--fg-70);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.status-legal a:hover { color: var(--fg); text-decoration-style: solid; }
/* T-512: palette empty-state shortcuts block */
.palette-shortcuts { padding: 6px 0 10px; }
.palette-shortcuts .sc {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 14px; color: var(--fg-70); font-size: 13px;
}
.palette-shortcuts .sc-k { display: inline-flex; gap: 4px; }
kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--fg-12);
  border-radius: 3px;
  color: var(--fg-70);
  background: var(--fg-03);
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

.ghost {
  padding: 6px 12px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg);
  white-space: nowrap;
}
.ghost:hover { border-color: var(--fg-40); }

.primary {
  padding: 6px 12px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-ok { background: #4ea16d; }
.dot-warn { background: var(--accent); }
.dot-bad { background: #d35a55; }

/* ============================================================
   SHELL — rail + main + inspector
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 5px minmax(0, 1fr) 5px var(--inspector-w);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.shell > .rail        { grid-column: 1; grid-row: 1; }
.shell > .resizer-rail{ grid-column: 2; grid-row: 1; }
.shell > .main        { grid-column: 3; grid-row: 1; }
.shell > .resizer-insp{ grid-column: 4; grid-row: 1; }
.shell > .inspector   { grid-column: 5; grid-row: 1; }
.resizer {
  background: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 5;
  align-self: stretch;
}
.resizer::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  background: var(--fg-12);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.resizer:hover::after, .resizer.is-dragging::after { opacity: 1; background: var(--accent); }
/* right dock: pin the inspector resizer full-height (grid stretch collapses it) */
body[data-dock="right"] .resizer-insp,
body:not([data-dock]) .resizer-insp {
  position: fixed;
  top: var(--topbar-h);
  right: var(--inspector-w);
  width: 5px;
  height: calc(100vh - var(--topbar-h) - var(--status-h));
  z-index: 20;
}
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing .resizer::after { opacity: 1; background: var(--accent); }

/* bottom dock: inspector resizer becomes a horizontal handle (hidden; aside has native resize) */
body[data-dock="hidden"] .resizer-insp { display: none; }
/* bottom dock: inspector is PINNED to the viewport bottom (right:0 can't overflow) */
body[data-dock="bottom"] .shell {
  grid-template-columns: var(--rail-w) 5px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
body[data-dock="bottom"] .rail { grid-row: 1; }
body[data-dock="bottom"] .resizer-rail { grid-row: 1; }
body[data-dock="bottom"] .main {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  overflow-x: hidden;
  padding-bottom: var(--insp-h, 52vh);
}
body[data-dock="bottom"] .insp-toolbar .insp-actions { min-width: 0; }
body[data-dock="bottom"] .inspector {
  position: fixed;
  left: calc(var(--rail-w) + 5px);
  right: 0;
  bottom: var(--status-h);
  height: var(--insp-h, 52vh);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 50;
}
body[data-dock="bottom"] .resizer-insp {
  position: fixed;
  left: calc(var(--rail-w) + 5px);
  right: 0;
  bottom: calc(var(--status-h) + var(--insp-h, 52vh));
  height: 5px;
  width: auto;
  cursor: row-resize;
  z-index: 51;
}
body[data-dock="bottom"] .resizer-insp::after { inset: 2px 0; }
body[data-dock="hidden"] .shell { grid-template-columns: var(--rail-w) 5px minmax(0, 1fr); }

/* ---------- LEFT RAIL ---------- */
.rail {
  border-right: 1px solid var(--fg-12);
  padding: var(--space-2) 0;
  overflow-y: auto;
  background: var(--bg);
}

.rail-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  color: var(--fg-70);
  font-size: 13px;
  border-left: 2px solid transparent;
}
.rail-item .rail-sl { color: var(--fg-40); }
.rail-item:hover { color: var(--fg); }
.rail-item .rail-meta { color: var(--fg-40); font-size: 12px; }

.rail-item.is-active {
  color: var(--fg);
  border-left-color: var(--accent);
  background: var(--fg-03);
}
.rail-item.is-active .rail-sl { color: var(--accent); }
.rail-item.is-active .rail-meta { color: var(--fg-70); }

/* rail agenda: collapse caret + compact sub-list */
.rail-item[data-view="agenda"] { grid-template-columns: 22px 1fr auto auto; }
.rail-agenda-toggle {
  color: var(--fg-40);
  font-size: 10px;
  padding: 0 4px;
  cursor: pointer;
}
.rail-agenda-toggle:hover { color: var(--fg); }
.rail-agenda-list {
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px;
  max-height: 38vh;
  overflow-y: auto;
}
body.rail-agenda-collapsed .rail-agenda-list { display: none; }
.rail-agenda-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  align-items: baseline;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  padding: 3px 14px 3px 24px;
  color: var(--fg-70);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.rail-agenda-item:hover { color: var(--fg); }
.rail-agenda-item.is-active {
  color: var(--fg);
  border-left-color: var(--accent);
  background: var(--fg-03);
}
.rail-agenda-item .rai-num {
  color: var(--fg-40);
  font-variant-numeric: tabular-nums;
}
.rail-agenda-item.is-active .rai-num { color: var(--accent); }
.rail-agenda-item .rai-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-agenda-item.is-pause .rai-title { color: var(--fg-40); }
.rail-agenda-item.is-section {
  grid-template-columns: 1fr;
  padding-left: 14px;
  margin-top: 4px;
}
.rail-agenda-item.is-section .rai-sec {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rail-agenda-item.is-section .rai-sec::before { content: "// "; }
/* drag-drop: drop indicators on rail agenda items + open the list while dragging */
body.lib-dragging .rail-agenda-list { display: flex !important; outline: 1px dashed var(--accent-70, var(--accent)); outline-offset: -2px; }
.rail-agenda-item.rai-drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.rail-agenda-item.rai-drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent); }
.lib-card[draggable="true"] { cursor: grab; }
.lib-card[draggable="true"]:active { cursor: grabbing; }

/* ============================================================
   AGENDA FLOAT MODE — agenda floats; inspector fills the main area
   ============================================================ */
.agenda-float-bar { display: none; }
body.agenda-float .agenda-float-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--fg-12);
  cursor: grab;
}
.agenda-float-bar .agenda-float-title { font-size: 11px; color: var(--fg-70); letter-spacing: 0.04em; }
.agenda-float-bar button { font-size: 12px; padding: 2px 8px; }

/* the agenda view is hidden in float mode — navigation happens from the rail list */
body.agenda-float .view-agenda.is-active,
body.agenda-float .agenda-float-bar { display: none; }

/* small dock-back bubble (mirrors the // inspector show button) */
.agenda-bubble {
  position: fixed;
  right: 16px;
  bottom: calc(var(--status-h) + 56px);
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--accent-70, var(--accent));
  border-radius: var(--radius-2);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  z-index: 80;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.agenda-bubble[hidden] { display: none; }
.agenda-bubble-x {
  border-left: 1px solid var(--accent-70, var(--accent));
  padding-left: 8px;
  font-size: 11px;
}

/* inspector fills the whole main area, full width, in float mode */
body.agenda-float[data-view="agenda"] .inspector {
  position: fixed !important;
  top: var(--topbar-h);
  left: calc(var(--rail-w) + 5px);
  right: 0;
  bottom: var(--status-h);
  height: auto !important;
  border-left: 1px solid var(--fg-12);
  border-top: 0;
  display: block !important;
  z-index: 10;
}
/* reuse the two-column inspector layout in float mode */
body.agenda-float[data-view="agenda"] #inspector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
body.agenda-float[data-view="agenda"] .insp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}
body.agenda-float[data-view="agenda"] .insp-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
body.agenda-float[data-view="agenda"] .insp-band {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--fg-12);
}
/* hide the inspector's own dock bar in float mode (agenda owns the float now) */
body.agenda-float[data-view="agenda"] .insp-dock { display: none; }
#agendaFloatBtn.is-active { border-color: var(--accent-70, var(--accent)); background: var(--accent-12); }
/* agenda hide (×) control — inline in the head button row */
.agenda-hide-btn {
  width: 30px;
  padding: 6px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1;
}
.view-agenda { position: relative; }
/* data dropdown (import/export) */
.io-menu-wrap { position: relative; display: inline-block; }
.io-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: var(--bg);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 40;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.io-menu[hidden] { display: none; }
.io-menu-item {
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--fg-70);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: var(--radius-2);
  cursor: pointer;
}
.io-menu-item:hover { background: var(--fg-06); color: var(--fg); }
/* phase filter dropdown in the agenda head */
.phase-filter-select {
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  outline: 0;
}
.phase-filter-select:hover { border-color: var(--fg-40); }
.phase-filter-select:focus { border-color: var(--accent); }
.phase-filter-select option { background: var(--bg); color: var(--fg); }

.rail-sep {
  height: 1px;
  background: var(--fg-12);
  margin: var(--space-2) var(--space-2);
}

.rail-section {
  padding: 6px var(--space-2) 4px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-40);
  text-transform: lowercase;
  white-space: nowrap;
}

.rail-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px var(--space-2);
  font-size: 13px;
  gap: 8px;
  white-space: nowrap;
}
.rail-stat-k { color: var(--fg-40); }
.rail-stat-v { color: var(--fg); }
.rail-time-in {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
  width: 58px;
  text-align: right;
  padding: 1px 4px;
  outline: 0;
}
.rail-time-in:hover { border-color: var(--fg-12); }
.rail-time-in:focus { border-color: var(--accent); background: var(--fg-06); }

.rail-check {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px var(--space-2);
  font-size: 12px;
  color: var(--fg-70);
}
.rail-check .check-mark { width: 10px; display: inline-block; }
.rail-check.ok    .check-mark { color: #4ea16d; }
.rail-check.warn  .check-mark { color: var(--accent); }
.rail-check.bad   .check-mark { color: #d35a55; }

/* ---------- MAIN ---------- */
.main {
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
}

.view { display: none; padding: var(--space-3) var(--space-4); }
.view.is-active { display: block; }

.view-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--fg-12);
}
.view-head-l { min-width: 0; }
.view-head-r { display: flex; gap: 8px; flex-shrink: 1; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }

.view-h1 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.view-sub {
  margin: 0;
  font-size: 13px;
  color: var(--fg-70);
}

/* ============================================================
   AGENDA — terminal-style element rows
   ============================================================ */
.row {
  display: grid;
  grid-template-columns: 36px 120px 1fr 110px 60px 44px;
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--fg-06);
  font-size: 13px;
  cursor: pointer;
  position: relative;  /* T-509: anchor for .lib-chip */
}

/* T-509: faded library lineage + lang chip. Debugging aid. */
.lib-chip {
  position: absolute;
  top: 2px;
  right: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  line-height: 1.2;
  color: var(--fg);
  opacity: 0.35;
  pointer-events: none;
  letter-spacing: 0.02em;
  user-select: none;
}
.insp-head { position: relative; }
.insp-head .lib-chip { top: 4px; right: 8px; }

/* T-532/T-855: project/workshop addressability chip. Hidden at rest (collapsed,
   no trailing gap) so the facilitator view stays clean; revealed on hover/focus
   of its holding control, and click-to-copy (handler in app.js). */
.id-chip {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  line-height: 1.2;
  color: var(--fg);
  letter-spacing: 0.02em;
  user-select: none;
  vertical-align: baseline;
  cursor: pointer;
  display: inline-block;   /* so max-width collapses it at rest (inline ignores max-width) */
  /* T-864: as a flex item of the (now shrinkable) .proj button, don't let the
     chip be compressed to 0 when revealed — it must stay its (small) content
     width and clickable; the proj-name (flex:0 1 auto) absorbs the difference.
     The position:absolute .proj-card chip ignores flex, so this is safe there. */
  flex: 0 0 auto;
  opacity: 0;
  max-width: 0;
  padding-left: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .12s ease, max-width .12s ease, padding-left .12s ease;
}
.proj:hover .id-chip,
.proj:focus-within .id-chip,
.proj-card:hover .id-chip,
.proj-card:focus-within .id-chip,
.picker-item:hover .id-chip,
.picker-item:focus-within .id-chip {
  opacity: 0.35;
  max-width: 240px;
  padding-left: 4px;
}
.id-chip:hover { opacity: 0.7; }
.proj-card { position: relative; }
.proj-card > .id-chip {
  position: absolute;
  top: 6px;
  right: 8px;
}
.row:hover { background: var(--fg-03); }
.row.is-selected { background: var(--fg-06); }
.row.is-selected .col-title { color: var(--fg); }
/* T-573 (restoration of T-089): live "you are here" highlight, wall-clock driven. */
.row.is-current {
  background: var(--accent-12, rgba(255, 200, 80, 0.14));
  box-shadow: inset 2px 0 0 var(--accent, #ffc850);
}
.row.is-current .col-time { color: var(--accent, #ffc850); }
.row.is-current .col-num::before { content: "▶ "; color: var(--accent, #ffc850); }
.now-running {
  align-self: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--accent, #ffc850);
  border-left: 1px solid var(--fg-20);
  white-space: nowrap;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-head {
  border-bottom: 1px solid var(--fg-12);
  color: var(--fg-40);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: default;
  padding-bottom: 6px;
}
.row-head:hover { background: transparent; }

.col-num { color: var(--fg-40); font-variant-numeric: tabular-nums; }
.col-time { color: var(--fg-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-title { color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.col-title .row-sub { color: var(--fg-40); margin-top: 2px; font-size: 12px; }
.col-phase { color: var(--fg-40); }
.col-phase .pp { color: var(--fg-70); }
.col-phase .pp::before { content: "["; color: var(--fg-40); }
.col-phase .pp::after  { content: "]"; color: var(--fg-40); }
.col-phase .pp.none { color: var(--accent); }
.col-dur { color: var(--fg-70); text-align: right; }
.col-grip {
  color: var(--fg-40);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.row-grip-handle { cursor: grab; }
.row-del {
  background: transparent;
  border: 0;
  color: var(--fg-40);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.row:hover .row-del { opacity: 1; }
.row-del:hover { color: #d35a55; }

/* T-970 (Phase C step 6): example annotation mode — ⓘ toggle, revealed _teach
   line, and the template-level arc header. The ⓘ stays visible (unlike row-del,
   which fades) because it is the primary affordance of the example teacher. */
.row-teach {
  background: transparent;
  border: 0;
  color: var(--fg-40);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color var(--duration-fast) var(--ease-out);
}
.row-teach:hover { color: var(--accent, #4a90d9); }
.row-teach.is-on { color: var(--accent, #4a90d9); }
.col-title .el-teach {
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-70, var(--fg-40));
  background: var(--fg-06, rgba(127,127,127,0.06));
  border-left: 2px solid var(--accent, #4a90d9);
  border-radius: 3px;
}
.agenda-teach-arc {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-70, var(--fg-40));
  background: var(--fg-06, rgba(127,127,127,0.06));
  border-left: 2px solid var(--accent, #4a90d9);
  border-radius: 3px;
}
.agenda-teach-arc .teach-arc-ico { color: var(--accent, #4a90d9); margin-right: 4px; }

.row.is-pause .col-title { color: var(--fg-40); font-style: normal; }
.row.is-pause .col-title::before { content: "// "; color: var(--accent); }

.view-foot {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.foot-bar {
  flex: 1;
  height: 4px;
  background: var(--fg-06);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.foot-bar-fill { height: 100%; background: var(--fg-70); }
.foot-meta { font-size: 12px; color: var(--fg-40); }

/* ── T-958 (WD-T6): agenda time-budget bar ─────────────────────────────── */
.budget-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.budget-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-40);
  white-space: nowrap;
}
.budget-in {
  width: 4.5em;
  text-align: right;
}
.budget-unit { color: var(--fg-40); }
.budget-bar {
  flex: 1;
  height: 4px;
  background: var(--fg-06);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.budget-bar-fill {
  height: 100%;
  background: var(--fg-70);
  transition: width .2s ease;
}
.budget-bar.ok   .budget-bar-fill { background: #3a9d6e; }
.budget-bar.room .budget-bar-fill { background: var(--fg-40); }
.budget-bar.over .budget-bar-fill { background: #d1584b; }
.budget-meta { font-size: 12px; color: var(--fg-40); white-space: nowrap; }
.budget-meta.ok   { color: #3a9d6e; }
.budget-meta.over { color: #d1584b; }
@media (max-width: 600px) {
  .budget-strip { flex-wrap: wrap; }
  .budget-meta { flex: 1 1 100%; }
}

/* ── T-960 (WD-T7): design-notes strip ─────────────────────────────────── */
.design-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-2) 0;
}
.dn-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--fg-70);
  padding: 4px 8px;
  border-left: 3px solid var(--fg-40);
  background: var(--fg-06);
  border-radius: 2px;
}
.dn-note.warn { border-left-color: #d1584b; }
.dn-msg { min-width: 0; }
.dn-dismiss {
  margin-left: auto;
  flex: none;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-40);
  cursor: pointer;
}
.dn-dismiss:hover { color: var(--fg-70); }
/* T-969: design-note first-fire expansion — msg + × on row 1, "why" + got-it below. */
.dn-note.dn-firstfire { flex-wrap: wrap; align-items: flex-start; padding: 8px 10px; }
.dn-why {
  flex: 1 1 100%;
  margin: 4px 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-95);
}
.dn-ff-actions { flex: 1 1 100%; }
.dn-ff-gotit {
  border: 1px solid var(--fg-40);
  background: var(--fg-06);
  color: var(--fg-95);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--radius-1, 4px);
}
.dn-ff-gotit:hover { background: var(--fg-12); }

/* ============================================================
   INSPECTOR
   ============================================================ */
.inspector {
  border-left: 1px solid var(--fg-12);
  padding: var(--space-3);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  min-width: 0;
}

/* inspector dock bar */
.insp-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
  padding: 8px var(--space-3);
  border-bottom: 1px solid var(--fg-12);
  position: sticky;
  top: calc(var(--space-3) * -1);
  background: var(--bg);
  z-index: 2;
}
.insp-dock-label { font-size: 11px; color: var(--fg-40); letter-spacing: 0.04em; }
.insp-dock-label::first-letter { color: var(--accent); }
.insp-dock-btns { display: flex; gap: 4px; }
.insp-dock-btn {
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg-40);
  font-family: var(--font-mono);
  font-size: 12px;
  width: 24px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
}
.insp-dock-btn:hover { color: var(--fg); border-color: var(--fg-40); }
.insp-dock-btn.is-active { color: var(--accent); border-color: var(--accent-70, var(--accent)); }

/* dock mode: bottom */
body[data-dock="bottom"] .inspector {
  border-left: 0;
  border-top: 1px solid var(--fg-12);
  padding-top: var(--space-3);
}
/* dock controls float top-right; band becomes the top row */
body[data-dock="bottom"] .insp-dock {
  position: absolute;
  top: 14px;
  right: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  width: auto;
  z-index: 3;
}
body[data-dock="bottom"] .insp-dock-label { display: none; }
body[data-dock="bottom"] #inspector { margin-top: 0; padding-top: 0; }
.insp-toolbar { display: contents; }
.insp-band { display: contents; }
/* right dock: column wrappers are transparent (panels stack normally) */
.insp-cols, .insp-col { display: contents; }

/* bottom dock: inspector body = flex column; band, then 2-col panel grid */
body[data-dock="bottom"] #inspector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* fixed two-column panel layout (left/right sequence) */
body[data-dock="bottom"] .insp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}
body[data-dock="bottom"] .insp-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
body[data-dock="bottom"] #inspector > .panel { margin: 0; }
/* band: title + meta + timer + action icons, all on ONE row at the top */
body[data-dock="bottom"] .insp-band {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  padding: 0 96px var(--space-2) 0;
  border-bottom: 1px solid var(--fg-12);
  /* T-553: NO position:relative here. The chip needs to anchor to
     #inspectorWrap (same positioning context as .insp-dock) so the two stack
     cleanly in the right-edge corridor. T-552's earlier band-relative anchor
     caused a 24px vertical offset vs the dock buttons → chip drew underneath
     them. See docs/reports/T-553-* and Image #24. */
}
body[data-dock="bottom"] .insp-head {
  display: flex;
  align-items: baseline;
  flex: 0 1 auto;
  gap: 12px;
  min-width: 0;
  margin: 0;
  /* T-552: break the chip's anchor — let it bubble up to .insp-band. */
  position: static;
}
/* T-553: in dock=bottom, .lib-chip sits ABOVE the row of three dock-mode
   buttons (.insp-dock-btn) in the right-edge corridor. Both anchor to the
   same right offset so they form a clean vertical stack: chip on top,
   buttons below. Previously chip at top:6 right:12 overlapped the buttons
   at top:14 right:var(--space-3) — see docs/reports/T-553-* and Image #23. */
body[data-dock="bottom"] .insp-head .lib-chip {
  top: 2px;
  right: var(--space-3);
}
/* Shift dock buttons down so the chip line has clear airspace above them. */
body[data-dock="bottom"] .insp-dock { top: 18px; }
body[data-dock="bottom"] .insp-h1 {
  font-size: 19px;
  margin: 0;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-dock="bottom"] .insp-meta { margin: 0; white-space: nowrap; }
body[data-dock="bottom"] .insp-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-dock="bottom"] .insp-toolbar .timer {
  margin: 0;
  padding: 0;
  gap: 8px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
}
body[data-dock="bottom"] .insp-toolbar .timer-display { font-size: 15px; color: var(--fg-70); }
body[data-dock="bottom"] .insp-toolbar .insp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
/* quiet text actions (design-system: words, lowercase, no glyphs) */
.act-word {
  background: transparent;
  border: 0;
  color: var(--fg-40);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.act-word:hover { color: var(--fg); }
.act-word.act-del:hover { color: #d35a55; }
.act-sep { color: var(--fg-12); padding: 0 2px; }
/* panels flow into a responsive 2+-column grid below the band */
body[data-dock="bottom"] #inspector > .panel {
  display: block;
}
body[data-dock="bottom"] .insp-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2);
  align-items: start;
}

/* compact icon action buttons (used in both docks) */
.act-icon {
  width: 26px;
  padding: 4px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1;
}
.act-del:hover { color: #d35a55; border-color: #d35a55; }

/* bottom-dock panel headers: accent-tinted band with // glyph (matches reference) */
body[data-dock="bottom"] .panel-h {
  background: var(--accent-12);
  color: var(--fg);
}
body[data-dock="bottom"] .panel-h::before { content: "// "; color: var(--accent); }
body[data-dock="bottom"] .panel-strong .panel-h { background: var(--accent); color: var(--bg); }
body[data-dock="bottom"] .panel-strong .panel-h::before { color: var(--bg); }

/* use the wide+short space: pack inspector panels into an aligned grid */
/* (legacy grid block removed — bottom dock now uses column-count:2 above) */

/* dock mode: hidden */
body[data-dock="hidden"] .inspector { display: none; }

/* inspector is agenda-only: hide it (and its divider) on every other view */
body:not([data-view="agenda"]) .inspector,
body:not([data-view="agenda"]) .resizer-insp,
body:not([data-view="agenda"]) .insp-show { display: none !important; }
body:not([data-view="agenda"])[data-dock="bottom"] .main { padding-bottom: 0 !important; }
body:not([data-view="agenda"])[data-dock="right"] .shell,
body:not([data-view="agenda"]):not([data-dock]) .shell {
  grid-template-columns: var(--rail-w) 5px minmax(0, 1fr) 0 0;
}

/* show-inspector floating button */
.insp-show {
  position: fixed;
  right: 16px;
  bottom: calc(var(--status-h) + 16px);
  padding: 6px 12px;
  border: 1px solid var(--accent-70, var(--accent));
  border-radius: var(--radius-2);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  z-index: 80;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.insp-show[hidden] { display: none; }
.insp-empty {
  color: var(--fg-40);
  font-size: 13px;
  padding-top: var(--space-3);
  text-align: left;
}
.insp-empty .ie-h {
  color: var(--fg-70);
  display: block;
  margin-bottom: 4px;
}

.insp-head { margin-bottom: var(--space-2); }
.insp-h1 {
  font-size: 17px;
  margin: 0 0 4px 0;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.insp-meta {
  font-size: 12px;
  color: var(--fg-40);
  margin: 0;
}

.insp-sep { height: 1px; background: var(--fg-12); margin: var(--space-2) 0; }

.insp-field { margin-bottom: var(--space-2); }
.insp-k {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-40);
  margin-bottom: 4px;
}
.insp-v {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
}
.insp-v ul { padding-left: 18px; margin: 4px 0; }
.insp-v li { margin: 2px 0; }

.insp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  min-width: 0;
}
.insp-grid .insp-field { min-width: 0; }
.insp-grid .insp-v { overflow-wrap: anywhere; word-break: normal; }

.insp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: var(--space-2);
}
.insp-actions .ghost { font-size: 12px; padding: 5px 8px; text-align: center; }

.insp-guide-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-40);
  margin: var(--space-2) 0 6px 0;
}
.guide-step {
  border-left: 2px solid var(--fg-12);
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.guide-step .gs-title { color: var(--fg); margin-bottom: 4px; font-weight: 500; }
.guide-step .gs-sag { color: var(--fg-70); margin-bottom: 4px; }
.guide-step .gs-notes { color: var(--fg-40); font-size: 11.5px; }
.guide-step .gs-notes li { margin: 1px 0; }

/* ============================================================
   LIBRARY
   ============================================================ */
.lib-count {
  color: var(--fg-40);
  font-size: 12px;
  margin-right: 6px;
}
.lib-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-3);
}
.lib-filters {
  border-right: 1px solid var(--fg-12);
  padding-right: var(--space-3);
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  margin-bottom: var(--space-3);
}
.search:focus-within { border-color: var(--accent); }
.search-pre { color: var(--accent); }
.search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
  min-width: 0;
}

.filter-group { margin-bottom: var(--space-3); }
.filter-h {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-40);
  margin-bottom: 8px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 9px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg-70);
  font-size: 12px;
  white-space: nowrap;
}
.chip:hover { border-color: var(--fg-40); color: var(--fg); }
.chip.is-on {
  background: var(--accent-12);
  border-color: var(--accent-70);
  color: var(--fg);
}

/* T-733: persistent IDB-unavailable banner — only renders when storage.js
   falls back to localStorage-only mode. Stays sticky at the top of the
   page so the operator sees the degraded-storage state on every view. */
.idb-unavail-banner {
  position: sticky;
  top: 0;
  z-index: 9000;
  padding: 8px 14px;
  background: #fff3cd;
  color: #664d03;
  border-bottom: 1px solid #ffe69c;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
@media print { .idb-unavail-banner { display: none; } }

/* Storage-mode chip (T-619) — observability for storage.js silent fallback */
.storage-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-70);
  white-space: nowrap;
  user-select: none;
  cursor: default;
}
.storage-mode-chip .storage-mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-40);
  flex-shrink: 0;
}
.storage-mode-chip.is-server {
  border-color: rgba(78, 161, 109, 0.45);
  color: #4ea16d;
}
.storage-mode-chip.is-server .storage-mode-dot { background: #4ea16d; }
.storage-mode-chip.is-local {
  border-color: rgba(211, 145, 90, 0.45);
  color: #d3915a;
  cursor: pointer;       /* T-657: click to export full backup */
}
.storage-mode-chip.is-local:hover {
  border-color: rgba(211, 145, 90, 0.75);
}
.storage-mode-chip.is-local .storage-mode-dot { background: #d3915a; }
.storage-mode-chip.is-cloud-read {
  border-color: rgba(91, 155, 213, 0.45);
  color: #5b9bd5;
  cursor: pointer;       /* T-654: click to retry pbAuth */
}
.storage-mode-chip.is-cloud-read:hover {
  border-color: rgba(91, 155, 213, 0.75);
}
.storage-mode-chip.is-cloud-read .storage-mode-dot { background: #5b9bd5; }
.storage-mode-chip.is-unknown {
  opacity: 0.5;
}
/* T-649: save-handshake pulse on the storage-mode chip.
   Runs once when .is-saving is added in saveData(). */
@keyframes wd-chip-pulse {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(0.94); opacity: 0.65; }
  100% { transform: scale(1);    opacity: 1; }
}
.storage-mode-chip.is-saving {
  animation: wd-chip-pulse 420ms ease-out;
}
/* T-655: failure flash for local-quota-exceeded. Distinct red pulse so the
   chip carries the bad-news anchor while the toast explains. Auto-clears
   after 450ms via setTimeout in noteLocalQuotaExceeded(). */
@keyframes wd-chip-fail {
  0%   { transform: scale(1);    background: rgba(220, 70, 70, 0.18); border-color: rgba(220, 70, 70, 0.65); }
  50%  { transform: scale(0.94); background: rgba(220, 70, 70, 0.36); border-color: rgba(220, 70, 70, 0.95); }
  100% { transform: scale(1);    background: rgba(220, 70, 70, 0.18); border-color: rgba(220, 70, 70, 0.65); }
}
.storage-mode-chip.is-fail {
  animation: wd-chip-fail 450ms ease-out;
  border-color: rgba(220, 70, 70, 0.85);
  color: #dc4646;
}
/* T-670: proactive quota visual on top of T-668's tooltip hint.
   Listed AFTER .is-local so it overrides the amber-toned local color
   with a deeper warn-amber, and AFTER .is-fail so the static warn
   doesn't fight the transient fail animation. */
.storage-mode-chip.is-quota-warn {
  border-color: rgba(220, 150, 50, 0.85);
  color: #d8961f;
}
.storage-mode-chip.is-quota-warn .storage-mode-dot { background: #d8961f; }
.storage-mode-chip.is-quota-critical {
  border-color: rgba(220, 70, 70, 0.85);
  color: #dc4646;
}
.storage-mode-chip.is-quota-critical .storage-mode-dot { background: #dc4646; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2);
  align-content: start;
}
.lib-card {
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 12px 14px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.lib-card:hover { border-color: var(--fg-40); }
.lib-card .lc-title { font-size: 13px; color: var(--fg); line-height: 1.3; }
.lib-card .lc-source { font-size: 11px; color: var(--fg-40); margin-top: -4px; }
.lib-card .lc-desc { font-size: 12px; color: var(--fg-70); line-height: 1.45; }
.lib-card .lc-tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--fg-40); }
.lib-card .lc-tags span::before { content: "// "; color: var(--accent); }
.lib-card .lc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--fg-06);
  padding-top: 8px;
  font-size: 11px;
  color: var(--fg-40);
  white-space: nowrap;
  gap: 8px;
}
.lib-card .lc-add { color: var(--fg-70); }
.lib-card:hover .lc-add { color: var(--fg); }

/* T-576: batch library add — per-card checkbox + floating add-all bar */
.lib-card { position: relative; }
.lib-card .lc-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent, #ffc850);
  opacity: 0.35;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.lib-card:hover .lc-check,
.lib-card .lc-check:checked,
.lib-card.lib-card--checked .lc-check { opacity: 1; }
.lib-card.lib-card--checked {
  border-color: var(--accent, #ffc850);
  box-shadow: inset 0 0 0 1px var(--accent, #ffc850);
}
.lib-batch-bar {
  position: sticky;
  bottom: 12px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--accent, #ffc850);
  border-radius: var(--radius-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  width: fit-content;
  z-index: 50;
}
/* T-861: .lib-batch-bar's display:flex (0,1,0) ties the UA [hidden]{display:none}
   (0,1,0) and wins on source order, so updateLibBatchBar()'s bar.hidden=true is
   silently defeated and the "0 selected" bar is stuck visible (and overflows on
   a phone). Restore the hidden behaviour — the sibling .batch-bar already carries
   this guard; lib-batch-bar was the one that was missed. */
.lib-batch-bar[hidden] { display: none; }
.lib-batch-bar .lbb-count {
  font-size: 13px;
  color: var(--accent, #ffc850);
  font-weight: 500;
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-2);
}
.projects-search {
  margin: 0 0 var(--space-2);
}
.proj-search-input {
  width: 100%;
  max-width: 320px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-1);
}
.proj-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.proj-search-empty {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--fg-40);
  font-style: italic;
}
.proj-card {
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.proj-card:hover { border-color: var(--fg-40); }
.proj-card.is-active { border-color: var(--accent-70); background: var(--accent-12); }
/* T-736: full-grid-row divider above Beispiele cards. */
.proj-divider {
  grid-column: 1 / -1;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-40);
  padding: 14px 0 4px;
  border-top: 1px dashed var(--fg-12);
  margin-top: 8px;
}
/* T-736: example card variant — visually softer than user projects (no hover
   border state, no cursor pointer); T-738 will lock interactivity properly. */
.proj-card--example {
  cursor: default;
  background: var(--fg-04, rgba(0,0,0,0.02));
  border-style: dashed;
}
.proj-card--example:hover { border-color: var(--fg-12); }
/* T-737: Beispiele catalog — section wrapper spans the full grid row so the
   theme-group blocks and pill row stack vertically inside the projects grid. */
.examples-section { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.examples-duration-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 0;
}
.examples-duration-pill {
  font: inherit;
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border: 1px solid var(--fg-12);
  background: transparent;
  color: var(--fg-70);
  cursor: pointer;
  border-radius: 12px;
}
.examples-duration-pill:hover { border-color: var(--fg-40); color: var(--fg); }
.examples-duration-pill.active {
  background: var(--accent-12, rgba(0,0,0,0.06));
  border-color: var(--accent-70, var(--fg-40));
  color: var(--fg);
}
.examples-theme-group { display: flex; flex-direction: column; gap: 6px; }
.examples-theme-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-40);
  padding: 2px 0;
}
.examples-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
/* T-738: example mode — hide edit affordances + style lock chip + duplicate button.
   contenteditable=false is set via JS (CSS can't toggle attributes); CSS only
   hides controls that have no read-only meaning. */
body.is-example #addEl,
body.is-example #addPause,
body.is-example #addSection,
body.is-example #undoBtn,
body.is-example .row-del,
body.is-example .add-row-btn,
/* T-761: workshop-picker mutating actions — sibling-shape to T-746 row-edits.
   ws-copy-to stays visible: it writes to a target project (T-750 extraction). */
body.is-example #wsAdd,
body.is-example .ws-rename,
body.is-example .ws-dup,
body.is-example .ws-del {
  display: none !important;
}
.example-lock-icon {
  display: inline-block;
  font-size: 0.9em;
  margin-right: 4px;
  opacity: 0.85;
  cursor: default;
}
/* T-738: example-card action row — only shown on hover (mirrors .pc-actions
   pattern for real projects). */
.proj-card--example .pc-actions--example {
  display: none;
  margin-top: 10px;
  gap: 6px;
}
.proj-card--example:hover .pc-actions--example { display: flex; }
.pc-act-duplicate {
  font: inherit;
  font-size: 11px;
  text-transform: lowercase;
  padding: 3px 8px;
  border: 1px solid var(--fg-12);
  background: transparent;
  color: var(--fg-70);
  cursor: pointer;
  border-radius: 4px;
}
.pc-act-duplicate:hover { border-color: var(--fg-40); color: var(--fg); }
/* T-805: persistent CTA next to the ws chip when viewing a Beispiele example.
   Mirrors .pc-act-duplicate ghost-button look so it reads as a secondary action
   instead of a primary chip. Hidden by default via [hidden]; updateWorkshopUI
   toggles when state.isExample flips. */
.example-take-btn {
  font: inherit;
  font-size: 11px;
  text-transform: lowercase;
  padding: 3px 8px;
  margin-left: 6px;
  border: 1px solid var(--fg-12);
  background: transparent;
  color: var(--fg-70);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.example-take-btn:hover { border-color: var(--fg-40); color: var(--fg); }
.example-take-btn[hidden] { display: none; }
.proj-card .pc-name { font-size: 15px; color: var(--fg); }
.proj-card .pc-meta { font-size: 12px; color: var(--fg-40); }
.proj-card .pc-edited { font-size: 11px; color: var(--fg-40); margin-top: 2px; font-style: italic; }
.proj-card .pc-rows { font-size: 12px; color: var(--fg-70); margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.proj-card .pc-rows .pcr { display: flex; justify-content: space-between; }
.proj-card .pc-rows .pcr-k { color: var(--fg-40); }
.proj-card .pc-actions {
  display: none;
  gap: 6px;
  margin-top: 10px;
  /* T-871: 6 action buttons (open/rename/duplicate/timeline/export/delete) total
     ~514px and overflowed the ~330px card content box in a nowrap row — the last
     buttons (export/delete) ran off the card's right edge and were unclickable.
     Wrap them so they stay inside the card (the row is in-flow → card grows down). */
  flex-wrap: wrap;
}
.proj-card:hover .pc-actions { display: flex; }
.proj-card .pc-actions .ghost { font-size: 11px; padding: 3px 9px; }

/* batch action bar — appears above status when selection > 0 */
.batch-bar[hidden] { display: none !important; }
.batch-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--status-h) + 16px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--accent-70, var(--accent));
  border-radius: var(--radius-2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 90;
}
.batch-bar .batch-count { font-size: 12px; color: var(--fg); display: inline-flex; gap: 6px; align-items: baseline; }
.batch-bar .ghost { font-size: 12px; padding: 4px 10px; }

/* multi-select row highlight */
.row.is-checked {
  background: var(--accent-12, rgba(217,119,87,0.12));
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.row.is-checked .col-num { color: var(--accent); }

/* method-source badge in row */
.row-title-line {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
  flex-wrap: wrap;
}
.row-ref {
  font-size: 10.5px;
  color: var(--fg-40);
  border: 1px solid var(--fg-12);
  padding: 1px 6px;
  border-radius: var(--radius-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* compact / collapsed row */
.row.is-collapsed { padding: 6px 12px; }
.row.is-collapsed .col-title .row-sub,
.row.is-collapsed .col-title .row-bar { display: none; }
.col-grip[data-row-collapse] { cursor: pointer; user-select: none; }

#compactBtn.is-active {
  border-color: var(--accent-70, var(--accent));
  background: var(--accent-12);
}

/* phase filter chips row */
.phase-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--fg-12);
  margin-bottom: 8px;
}
.phase-filter .chip { font-size: 11px; }
.phase-filter .chip-clear { border-style: dashed; color: var(--fg-40); }
.phase-filter .chip.is-on {
  background: var(--accent-12);
  border-color: var(--accent-70, var(--accent));
  color: var(--fg);
}

/* scroll-to-top */
.scroll-top {
  position: fixed;
  right: calc(var(--inspector-w) + 24px);
  bottom: calc(var(--status-h) + 24px);
  padding: 6px 12px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  background: var(--bg);
  color: var(--fg-70);
  font-family: var(--font-mono);
  font-size: 12px;
  z-index: 80;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.scroll-top:hover { color: var(--fg); border-color: var(--fg-40); }

/* intro page brand mark */
.intro-mark img {
  height: 32px;
  width: auto;
  margin-bottom: 12px;
  opacity: 0.95;
}
.intro-title .intro-h {
  font-size: 28px;
  letter-spacing: -0.01em;
}

/* library: custom tag + delete button */
.lib-card.lib-custom { border-color: var(--accent-70, var(--accent)); }
.lib-tag {
  font-size: 9px;
  color: var(--accent);
  border: 1px solid var(--accent-70, var(--accent));
  padding: 0 5px;
  border-radius: var(--radius-2);
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lib-del {
  background: transparent;
  border: 1px solid var(--fg-12);
  color: var(--fg-40);
  font-family: var(--font-mono);
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lib-del:hover { color: #d35a55; border-color: #d35a55; }

/* lang segmented control (in top bar) */
.lang-seg {
  display: inline-flex;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  overflow: hidden;
}
.lang-btn {
  padding: 4px 8px;
  font-size: 11px;
  color: var(--fg-40);
  border-right: 1px solid var(--fg-12);
  background: transparent;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lang-btn:last-child { border-right: 0; }
.lang-btn:hover { color: var(--fg); }
.lang-btn.is-active { color: var(--fg); background: var(--fg-06); }

/* guide editor */
.guide-toggle {
  font-size: 11px;
  padding: 3px 9px;
  margin-left: auto;
}
.insp-guide-h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-step .gs-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.guide-step .gs-num {
  color: var(--fg-40);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.guide-step .gs-actions {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.guide-step:hover .gs-actions { opacity: 1; }
.guide-step .gs-actions .ghost {
  padding: 1px 6px;
  font-size: 11px;
  min-width: 22px;
}
.guide-step .gs-notes {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}
.guide-step .gs-notes li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--fg-40);
  font-size: 11.5px;
  padding: 1px 0;
}
.guide-step .gs-notes li::before {
  content: "\2022";
  color: var(--accent);
  width: 8px;
  display: inline-block;
}
.guide-step .gs-notes li.gs-note-add::before { content: ""; }
.guide-step .gs-notes li.gs-note-add .ghost { font-size: 11px; padding: 2px 9px; }
.gs-note-del {
  background: transparent;
  border: 0;
  color: var(--fg-40);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0;
}
.guide-step .gs-notes li:hover .gs-note-del { opacity: 1; }
.gs-note-del:hover { color: #d35a55; }
.guide-add-step {
  display: block;
  margin: 10px 0 4px;
  font-size: 11px;
  padding: 4px 10px;
}

/* workshop picker rows: open / rename / delete */
.ws-picker-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px;
  align-items: stretch;
  padding: 0;
  border-left: 2px solid transparent;
}
.ws-picker-row.is-active { border-left-color: var(--accent); background: var(--fg-03); }
.ws-picker-row .ws-open {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  color: var(--fg-70);
}
.ws-picker-row .ws-open:hover { color: var(--fg); }
.ws-picker-row .ws-open .pi-name { font-size: 13px; }
.ws-picker-row .ws-open .pi-meta { font-size: 11px; color: var(--fg-40); }
.ws-picker-row.is-active .ws-open { color: var(--fg); }
.ws-picker-row .ws-rename,
.ws-picker-row .ws-del {
  background: transparent;
  border: 0;
  color: var(--fg-40);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  padding: 0 8px;
  opacity: 0;
}
.ws-picker-row:hover .ws-rename,
.ws-picker-row:hover .ws-del { opacity: 1; }
.ws-picker-row .ws-rename:hover { color: var(--fg); }
/* section divider row (no time/dur/phase displayed) */
.row.is-section {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: 22px 12px 8px;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
}
.row.is-section .col-num,
.row.is-section .col-time,
.row.is-section .col-phase,
.row.is-section .col-dur {
  display: none;
}
.row.is-section .col-title {
  grid-column: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--accent);
  white-space: nowrap;
}
.row.is-section .col-title::before {
  content: "//";
  color: var(--accent);
  letter-spacing: 0;
}
.row.is-section .col-grip {
  grid-column: 2;
  position: relative;
}
/* hairline rule fills the rest of the row */
.row.is-section .col-grip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 28px;
  top: 50%;
  height: 1px;
  background: var(--fg-12);
}
.row.is-section .row-sub,
.row.is-section .row-bar { display: none; }
.row.is-section:hover { background: transparent; }
.row.is-section:hover .col-title { opacity: var(--hover-opacity); }

/* undo/redo disabled state */
.ghost.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ws picker drag grip + drop indicators */
.ws-picker-row {
  grid-template-columns: 14px 1fr auto auto;
  position: relative;
}
.ws-grip {
  color: var(--fg-40);
  font-size: 11px;
  cursor: grab;
  padding-left: 6px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  user-select: none;
}
.ws-picker-row:hover .ws-grip { opacity: 1; }
.ws-picker-row.is-dragging { opacity: 0.4; }
.ws-picker-row.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.ws-picker-row.drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* ============================================================
   PRESENTATION MODE
   ============================================================ */
.presenter {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: grid;
  grid-template-rows: 56px 1fr 36px;
  font-family: var(--font-mono);
  color: var(--fg);
}
.presenter[hidden] { display: none; }
body.is-presenting { overflow: hidden; }
.pres-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--fg-12);
}
.pres-bar-l, .pres-bar-r { display: flex; align-items: center; gap: 12px; }
.pres-pos {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--fg);
  letter-spacing: 0.04em;
}
.pres-sep { color: var(--fg-40); }
.pres-time { color: var(--fg-70); font-size: 12.5px; }
.pres-btn {
  background: transparent;
  border: 1px solid var(--fg-12);
  color: var(--fg-70);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-2);
  cursor: pointer;
}
.pres-btn:hover { color: var(--fg); border-color: var(--fg-40); }
.pres-btn.is-active { color: var(--accent); border-color: var(--accent-70, var(--accent)); }

.pres-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 80px;
  position: relative;
}
.presenter.with-notes .pres-body { padding-right: 400px; }
.pres-eyebrow {
  font-size: 13px;
  color: var(--fg-40);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.pres-eyebrow::first-letter { color: var(--accent); }
.pres-title {
  font-size: 56px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 24px 0;
  text-wrap: pretty;
  max-width: 1000px;
}
.pres-invite {
  font-size: 22px;
  color: var(--fg-70);
  font-style: italic;
  margin: 0 0 48px 0;
  max-width: 900px;
  text-wrap: pretty;
  line-height: 1.4;
}
.pres-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  background: var(--fg-03);
  width: fit-content;
}
.pres-timer-val {
  font-family: var(--font-mono);
  font-size: 64px;
  letter-spacing: 0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pres-timer-val.is-running { color: var(--accent); }
.pres-timer-val.is-over { color: #d35a55; }
.pres-timer-planned { color: var(--fg-40); font-size: 16px; }
.pres-timer .pres-btn { margin-left: 12px; padding: 6px 14px; font-size: 13px; }

.pres-notes {
  position: absolute;
  right: 80px;
  top: 80px;
  bottom: 80px;
  width: 360px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 20px 22px;
  overflow-y: auto;
  font-size: 12.5px;
  color: var(--fg);
  background: var(--fg-03);
}
.pres-notes[hidden] { display: none; }
.pres-notes-h {
  font-size: 11px;
  color: var(--fg-40);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.pres-notes-h::first-letter { color: var(--accent); }
.pn-k {
  font-size: 10.5px;
  color: var(--fg-40);
  letter-spacing: 0.06em;
  margin: 14px 0 4px 0;
  text-transform: uppercase;
}
.pn-v {
  color: var(--fg-70);
  line-height: 1.55;
  text-wrap: pretty;
}
.pn-step {
  border-left: 2px solid var(--fg-12);
  padding: 6px 10px;
  margin-top: 8px;
}
.pn-step-h { color: var(--fg); font-size: 12px; margin-bottom: 4px; }
.pn-sag { color: var(--fg-70); font-style: italic; margin-bottom: 4px; }
.pn-note { color: var(--fg-40); font-size: 11px; margin-top: 2px; }
.pn-empty { color: var(--fg-40); padding: 20px 0; text-align: center; font-style: italic; }

.pres-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  border-top: 1px solid var(--fg-12);
  font-size: 11px;
  color: var(--fg-40);
}
.pres-foot > span { display: inline-flex; gap: 5px; align-items: center; }
.pres-foot kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--fg-12);
  border-radius: 3px;
  color: var(--fg-70);
}

/* ============================================================
   CONTEXTUAL HELP
   ============================================================ */
/* top-bar icon buttons (undo/redo arrows) */
.icon-btn {
  font-family: var(--font-mono);
  font-size: 15px;
  width: 32px;
  padding: 6px 0;
  text-align: center;
  line-height: 1;
}

.help-toggle {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 9px;
  width: 28px;
  text-align: center;
  font-weight: 500;
}
.help-toggle.is-active {
  background: var(--accent-12);
  border-color: var(--accent-70, var(--accent));
  color: var(--accent);
}

/* help mode: show ? badges next to data-help nodes, highlight on hover */
body.is-help-on [data-help] {
  cursor: help;
  position: relative;
}
body.is-help-on [data-help]:hover {
  outline: 1px dashed var(--accent-70, var(--accent));
  outline-offset: 2px;
}
body.is-help-on [data-help]::after {
  content: "?";
  position: absolute;
  top: -4px;
  right: -10px;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  pointer-events: none;
  font-family: var(--font-mono);
  line-height: 1;
}

/* not all data-help nodes need the badge if they're inside a row layout — opt-out class */
body.is-help-on .insp-k[data-help]::after {
  top: -2px;
  right: -14px;
}

.help-tip {
  position: fixed;
  width: 320px;
  background: var(--bg);
  border: 1px solid var(--accent-70, var(--accent));
  border-radius: var(--radius-2);
  padding: 12px 14px;
  z-index: 250;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.help-tip-h {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: lowercase;
}
.help-tip-body {
  color: var(--fg);
  text-wrap: pretty;
}

/* time conflict warning indicator on rows */
.row.is-overrun .col-time {
  color: var(--accent);
}
.row.is-overrun .col-time::after {
  content: " !";
  color: var(--accent);
  font-weight: 500;
}

/* template chooser */
.tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

/* ============================================================
   INSPECTOR labeled-grid panels (Was/Frage/Designelemente/…)
   ============================================================ */
.panel {
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  margin: 12px 0;
  background: var(--bg);
  overflow: hidden;
}
.panel-h {
  background: var(--fg-06);
  color: var(--fg);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--fg-12);
}
.panel-strong .panel-h {
  background: var(--fg-12);
  color: var(--fg);
}
.panel-tipps .panel-h {
  background: var(--accent-12);
  color: var(--fg);
}
.panel-tipps .panel-h::first-letter { color: var(--accent); }
.panel-body {
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.5;
}
.panel-body ul {
  margin: 0;
  padding-left: 16px;
}
.panel-body li {
  margin: 2px 0;
  color: var(--fg-70);
}
.panel-sub {
  font-size: 11px;
  color: var(--fg-40);
  letter-spacing: 0.03em;
  margin: 6px 0 4px;
}
.panel-sub:first-child { margin-top: 0; }
.panel-italic {
  font-style: italic;
  color: var(--fg);
  margin-bottom: 4px;
}

/* Frage panel: key-value layout */
.panel-body.kv {
  padding: 4px 0;
}
.kv-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--fg-06);
}
.kv-row:last-child { border-bottom: 0; }
.kv-k {
  color: var(--fg-40);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}
.kv-v {
  color: var(--fg);
  font-size: 12.5px;
}

/* Block-display version of toggle button when only option */
.insp-block-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin: 16px 0;
  padding: 8px 12px;
  border: 1px dashed var(--fg-12);
  color: var(--fg-40);
}
.insp-block-btn:hover {
  border-color: var(--accent-70, var(--accent));
  color: var(--accent);
}

/* ============================================================
   Extended Leitfaden: Sag + Dann sag (quoted boxes) + Hinweise
   ============================================================ */
.gs-label {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.03em;
  margin: 8px 0 4px;
  text-transform: lowercase;
}
.gs-quote {
  border-left: 3px solid var(--accent);
  background: var(--accent-12);
  padding: 8px 12px;
  font-style: italic;
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
  text-wrap: pretty;
}
.gs-hinweise {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}
.gs-hinweise li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--fg-70);
  font-size: 11.5px;
  padding: 1px 0;
}
.gs-hinweise li::before {
  content: "->";
  color: var(--accent);
  font-family: var(--font-mono);
  width: 14px;
  display: inline-block;
}
.gs-hinweise li.gs-note-add::before { content: ""; }
.gs-hinweise li.gs-note-add .ghost { font-size: 11px; padding: 2px 9px; }
.gs-add-dannsag {
  margin: 6px 0;
  font-size: 11px;
  padding: 2px 10px;
  border-style: dashed;
  color: var(--fg-40);
}
.gs-add-dannsag:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
.tpl-card {
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.tpl-card:hover { border-color: var(--accent-70, var(--accent)); }
.tpl-card .tpl-name {
  font-size: 14px;
  color: var(--fg);
}
.tpl-card .tpl-name::before { content: "// "; color: var(--accent); }
.tpl-card .tpl-desc {
  font-size: 12px;
  color: var(--fg-70);
  text-wrap: pretty;
  line-height: 1.45;
}
.tpl-card .tpl-meta {
  font-size: 11px;
  color: var(--fg-40);
  margin-top: 6px;
}

/* T-596: theme groups + duration filter + preview chips */
/* T-612: search + duration pills sit in one row, wrap on narrow viewports */
.tpl-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 16px;
}
.tpl-search {
  flex: 1 1 200px;
  min-width: 160px;
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--fg);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.tpl-search::placeholder { color: var(--fg-40); }
.tpl-search:focus { border-color: var(--accent); }
.tpl-search::-webkit-search-cancel-button { cursor: pointer; }
/* T-704: wrap + dedicated clear-search button — visible only when input has content */
.tpl-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
  align-items: center;
}
.tpl-search-wrap .tpl-search { flex: 1 1 auto; min-width: 0; padding-right: 28px; }
.tpl-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--fg-40);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
}
.tpl-search-clear:hover { color: var(--fg); background: var(--fg-12); }
.tpl-search-clear[hidden] { display: none; }
.tpl-dur-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tpl-dur-pill {
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--fg-70);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.tpl-dur-pill:hover { border-color: var(--accent-70, var(--accent)); color: var(--fg); }
.tpl-dur-pill.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.tpl-theme-group { margin-bottom: 18px; }
/* T-616: empty-state hint when the search query matches nothing. */
.tpl-search-empty {
  font-size: 13px;
  color: var(--fg-40);
  padding: 16px 4px;
  font-style: italic;
}
.tpl-theme-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-40);
  margin: 0 0 8px;
  padding-left: 2px;
}
.tpl-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
.tpl-dur-chip {
  font-size: 10px;
  text-transform: lowercase;
  color: var(--fg-70);
  border: 1px solid var(--fg-12);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tpl-card-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-70);
}
.tpl-prev-item {
  background: var(--fg-08, rgba(127,127,127,0.08));
  padding: 1px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.tpl-prev-more {
  color: var(--fg-40);
  padding: 1px 4px;
}
.tpl-card-blank { border-style: dashed; }
.tpl-empty {
  text-align: center;
  color: var(--fg-40);
  padding: 32px 0;
  font-size: 13px;
}
/* T-606: custom-template delete affordance (hover-only, top-right of card). */
.tpl-card-wrap { position: relative; }
.tpl-card-wrap.is-custom .tpl-card { border-color: var(--accent-40, var(--accent)); border-style: solid; }
.tpl-card-del,
.tpl-card-edit,
.tpl-card-export,
.tpl-card-dup {
  position: absolute;
  bottom: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--fg-20);
  background: var(--bg);
  color: var(--fg-60);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
  z-index: 2;
}
.tpl-card-del { right: 8px; }
.tpl-card-edit { right: 36px; font-size: 12px; }
.tpl-card-export { right: 64px; font-size: 12px; }
/* T-637: duplicate button sits where del would be on canon cards (canon has no del). */
.tpl-card-dup { right: 8px; font-size: 12px; }
.tpl-card-wrap:hover .tpl-card-del,
.tpl-card-wrap:focus-within .tpl-card-del,
.tpl-card-wrap:hover .tpl-card-edit,
.tpl-card-wrap:focus-within .tpl-card-edit,
.tpl-card-wrap:hover .tpl-card-export,
.tpl-card-wrap:focus-within .tpl-card-export,
.tpl-card-wrap:hover .tpl-card-dup,
.tpl-card-wrap:focus-within .tpl-card-dup { opacity: 1; }
.tpl-card-del:hover { color: var(--danger, #c84a4a); border-color: var(--danger, #c84a4a); }
.tpl-card-edit:hover { color: var(--accent); border-color: var(--accent); }
.tpl-card-export:hover { color: var(--accent); border-color: var(--accent); }
.tpl-card-dup:hover { color: var(--accent); border-color: var(--accent); }
/* T-606: tighten save-as-template prompt rows. */
.prompt-row { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.prompt-label { font-size: 11px; color: var(--fg-60); text-transform: lowercase; letter-spacing: 0.04em; }
.prompt-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ============================================================
   ONBOARDING modal
   ============================================================ */
.modal-wide { width: 760px; max-width: 92vw; }
.onb-lede {
  color: var(--fg-70);
  font-size: 14px;
  margin: 4px 0 20px 0;
  text-wrap: pretty;
  line-height: 1.55;
}
.onb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  margin-bottom: 16px;
}
/* T-883: task-framed hero — "3 steps to your first workshop" + primary CTA.
   The first section-h (the steps) sits right under the lede, so it drops the
   divider border the later "how you work with it" header keeps. */
.modal-body > .onb-section-h:first-of-type { border-top: 0; padding-top: 0; }
.onb-steps {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onb-step { display: flex; align-items: flex-start; gap: 12px; }
.onb-step-n {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  background: var(--bg-2);
}
.onb-step-b { display: flex; flex-direction: column; gap: 3px; }
.onb-step-b h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.onb-step-b p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-70);
  line-height: 1.5;
  text-wrap: pretty;
}
.onb-cta-row { margin: 0 0 4px 0; }
.onb-cta-primary {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-2);
  padding: 9px 16px;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.onb-cta-primary:hover { filter: brightness(1.08); }
.onb-cta-primary::before { content: "// "; opacity: 0.7; }
/* T-875: section divider for the "how you work with it" workflow cards below
   the feature grid. Mirrors the .onb-eye terminal eyebrow look at section scale. */
.onb-section-h {
  font-size: 11px;
  color: var(--fg-40);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  margin: 8px 0 14px 0;
  padding-top: 14px;
  border-top: 1px solid var(--fg-12);
}
.onb-section-h::first-letter { color: var(--accent); }
.onb-cell { display: flex; flex-direction: column; gap: 6px; }
.onb-eye {
  font-size: 10.5px;
  color: var(--fg-40);
  letter-spacing: 0.05em;
}
.onb-eye::first-letter { color: var(--accent); }
.onb-cell h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.onb-cell h3 em { color: var(--accent); font-style: italic; }
.onb-cell p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-70);
  line-height: 1.55;
  text-wrap: pretty;
}
.onb-cell p em { color: var(--fg); font-style: italic; }
.onb-cell p kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--fg-12);
  border-radius: 3px;
  color: var(--fg-70);
  background: var(--fg-03);
}

/* T-965 (Phase C step 2): agenda empty-state teacher — onboarding users only */
/* display:flex would override the [hidden] UA style (T-861 bug class) */
.onb-teacher[hidden] { display: none; }
.onb-teacher {
  margin: var(--space-3) 0;
  padding: 20px 24px;
  border: 1px dashed var(--fg-12);
  border-radius: var(--radius-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.ot-h { font-size: 14px; color: var(--fg-95); }
.ot-p { font-size: 12px; color: var(--fg-70); }
.ot-cta { margin-top: 6px; }

/* T-966 (Phase C step 3): shared nudge coachmark + N2 library header hint.
   display:flex would override the [hidden] UA style (T-861 bug class). */
.onb-nudge {
  position: absolute;
  z-index: 60;               /* above rows/inspector, below overlays (they block nudges anyway) */
  max-width: 340px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-2, var(--bg));
  border: 1px solid var(--fg-12);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.onb-nudge-txt { font-size: 12px; color: var(--fg-95); flex: 1 1 auto; }
/* T-968: N3/N4/N6 CTA button (N1/N2 have none — dismiss-only). */
.onb-nudge-cta {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg, #fff);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: var(--radius-1, 4px);
}
.onb-nudge-cta:hover { filter: brightness(1.08); }
.onb-nudge-x {
  border: none;
  background: none;
  color: var(--fg-70);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.onb-nudge-x:hover { color: var(--fg-95); }
/* T-975: the recurring restart nudge carries an extra "nicht mehr anzeigen"
   text button alongside the CTA — give it room to wrap and a quiet look. */
.onb-nudge-restart { max-width: 380px; flex-wrap: wrap; align-items: center; }
.onb-nudge-never {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--fg-40);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 6px;
}
.onb-nudge-never:hover { color: var(--fg-70); }
.onb-libhint[hidden] { display: none; }
.onb-libhint {
  margin: 0 0 var(--space-3);
  padding: 6px 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-70);
  border: 1px dashed var(--fg-12);
  border-radius: var(--radius-2);
}

/* T-967 (Phase C step 5): getting-started checklist. Milestone-derived, live,
   agenda-only, dismissible. [hidden] must win — no display override. */
.onb-checklist[hidden] { display: none; }
.onb-checklist {
  margin: var(--space-3) 0;
  padding: 12px 16px;
  border: 1px dashed var(--fg-12);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-2);
}
.ocl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ocl-h {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-70);
}
.ocl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ocl-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-70);
}
.ocl-item[data-done="true"] .ocl-txt {
  color: var(--fg-95);
  text-decoration: line-through;
  text-decoration-color: var(--fg-12);
}
.ocl-mark { color: var(--fg-70); width: 1em; text-align: center; }
.ocl-item[data-done="true"] .ocl-mark { color: var(--accent); }
.ocl-note { font-size: 11px; color: var(--fg-70); }

/* T-972: per-step explainer — ⓘ affordance + side popover + "zeig mir" spotlight.
   Popover opens to the RIGHT of the checklist (in-flow block on the left of the
   agenda), so it never covers the list itself. Reveals on hover or keyboard/touch
   focus of the row. */
.ocl-item { position: relative; }
.ocl-why {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--fg-40);
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  cursor: help;
}
.ocl-why:hover { color: var(--accent); }
.ocl-pop {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  right: 0;              /* anchor under the ⓘ (row's right edge); stays on-screen */
  z-index: 40;
  width: min(260px, 72vw);
  padding: 10px 12px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  text-align: left;
}
.ocl-item:hover .ocl-pop,
.ocl-item:focus-within .ocl-pop { display: block; }
.ocl-pop-txt { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--fg-70); }
.ocl-showme {
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius-2);
  cursor: pointer;
}
.ocl-showme:hover { background: var(--fg-06); }

/* T-972: spotlight pulse applied to the REAL target control when "zeig mir" runs */
@keyframes wd-spotlight-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent); }
  45%  { box-shadow: 0 0 0 5px var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.wd-spotlight {
  animation: wd-spotlight-pulse 1.6s ease-out 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   EXPORTS
   ============================================================ */
/* T-964 (WD-T8): pre-flight checklist — advisory panel above the export grid */
.preflight {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 12px 16px;
}
.pf-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 8px;
  font-size: 13px;
}
.pf-sub { color: var(--fg-40); font-size: 12px; }
.pf-rows { display: flex; flex-direction: column; gap: 4px; }
.pf-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--fg-70);
  padding: 3px 8px;
  border-left: 3px solid var(--fg-40);
  background: var(--fg-06);
  border-radius: 2px;
}
.pf-row.warn { border-left-color: #d1584b; }
.pf-row.ok   { border-left-color: #4b9d6e; }
.pf-dot { flex: 0 0 auto; width: 1em; text-align: center; color: var(--fg-40); }
.pf-row.warn .pf-dot { color: #d1584b; }
.pf-row.ok .pf-dot   { color: #4b9d6e; }
.pf-msg { min-width: 0; }
.pf-act { margin-left: auto; font-size: 11px; padding: 1px 8px; flex: 0 0 auto; }
.exports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2);
}
.export-card {
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.export-card:hover { border-color: var(--fg-40); }
.export-card .ex-h { font-size: 14px; color: var(--fg); }
.export-card .ex-h::before { content: "// "; color: var(--accent); }
.export-card .ex-sub { font-size: 12px; color: var(--fg-70); }
.export-card .ex-meta { font-size: 11px; color: var(--fg-40); margin-top: 6px; }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 720px;
}
.set-group { display: flex; flex-direction: column; gap: 10px; }
.set-h { font-size: 11px; letter-spacing: 0.06em; color: var(--fg-40); }
.set-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* T-893: explanatory sub-line under a settings control (storage location). */
.set-note { font-size: 11px; line-height: 1.5; color: var(--fg-40); margin: 2px 0 0; max-width: 52ch; }
/* T-896: topbar storage popover — seg row + note inside the 320px .picker */
.storage-pop-seg { padding: 8px 14px 2px; }
.storage-pop-note { padding: 2px 14px 4px; margin: 0; max-width: none; }
.set-to { color: var(--fg-40); padding: 0 4px; }

.seg-btn {
  padding: 5px 12px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg-70);
  font-size: 12px;
}
.seg-btn:hover { border-color: var(--fg-40); color: var(--fg); }
.seg-btn.is-active { border-color: var(--accent-70); background: var(--accent-12); color: var(--fg); }

.text-in {
  padding: 5px 10px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  width: 80px;
  outline: 0;
}
.text-in:focus { border-color: var(--accent); }

.shortcuts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.sc {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--fg-70);
  padding: 4px 0;
  border-bottom: 1px solid var(--fg-06);
}
.sc-k { display: inline-flex; gap: 3px; }

/* head-meta: start time editor next to + element buttons */
.head-meta {
  font-size: 12px;
  color: var(--fg-40);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
.head-start {
  width: 64px;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--fg);
}

/* ============================================================
   PRINT  — invoked via body.is-printing or @media print
   ============================================================ */
@media print {
  /* T-874: the printout follows the LIVE theme. body.cc already sets
     background:var(--bg)/color:var(--fg) on-screen, so we don't re-force any
     colours here — we only switch layout to flow mode and force colour
     rendering so a dark theme's background actually prints (browsers drop
     backgrounds by default). Dropping the old #fff/#000/#444/#888 overrides
     lets every row/column/heading inherit its on-screen theme colour, so the
     PDF == the on-screen preview == the app (WYSIWYG). */
  body.cc {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    height: auto;
    overflow: visible;
    display: block;
  }
  .topbar, .rail, .inspector, .status, .overlay, .toasts,
  .view-foot, .col-grip, .view-head-r, .phase-filter,
  .batch-bar, .scroll-top, .lib-chip, .id-chip {
    display: none !important;
  }
  .shell { display: block; }
  .main { overflow: visible; padding: 0; }
  .view { display: none !important; padding: 0; }
  .view-agenda.is-active, .view.is-active.view-agenda { display: block !important; }
  .row { page-break-inside: avoid; }

  /* private notes ALWAYS hidden in print (even facilitator mode? user choice) */
  body.cc:not(.is-printing-guide) .private-notes,
  body.cc:not(.is-printing-guide) .guide-step { display: none; }

  /* facilitator mode: SHOW guides and notes, themed (T-874) */
  body.is-printing-guide .private-notes {
    border: 1px dashed var(--fg-40) !important;
    padding: 8px 12px;
    margin: 8px 0;
    background: var(--bg-2) !important;
    color: var(--fg) !important;
  }
  body.is-printing-guide .guide-step {
    display: block !important;
    border-left: 3px solid var(--accent) !important;
    padding: 6px 12px;
    margin: 10px 0;
    page-break-inside: avoid;
  }
  body.is-printing-guide .guide-step .gs-actions,
  body.is-printing-guide .gs-note-del,
  body.is-printing-guide .guide-add-step,
  body.is-printing-guide .insp-actions,
  body.is-printing-guide .timer { display: none !important; }

  /* drop the duration bar in facilitator-only mode (it's noise) */
  body.is-printing-guide .row-bar { display: none; }
}

/* on-screen print preview mode (used by exportPDF before window.print) */
body.is-printing .topbar,
body.is-printing .rail,
body.is-printing .inspector,
body.is-printing .status,
body.is-printing .toasts,
body.is-printing .view-foot,
body.is-printing .col-grip {
  visibility: hidden;
}

/* T-873: handout / facilitator-master on-screen preview (live agenda, no overlay
   surface). Mirror @media print's hidden chrome with display:none so the preview
   matches the printout (full-width agenda), and pad the top so the fixed
   .print-toolbar doesn't cover the first row. @media print resets .main padding
   to 0, so the actual printout is unaffected. */
body.is-printing-live .topbar,
body.is-printing-live .rail,
body.is-printing-live .inspector,
body.is-printing-live .status,
body.is-printing-live .overlay,
body.is-printing-live .toasts,
body.is-printing-live .view-foot,
body.is-printing-live .col-grip,
body.is-printing-live .view-head-r,
body.is-printing-live .phase-filter,
body.is-printing-live .batch-bar,
body.is-printing-live .scroll-top,
body.is-printing-live .lib-chip,
body.is-printing-live .id-chip {
  display: none !important;
}
body.is-printing-live .shell { display: block; }
body.is-printing-live .main {
  padding: calc(var(--topbar-h) + 52px) 24px 24px;
  overflow: auto;
}

/* ============================================================
   PRINT — structured cards (one element per page)
   ============================================================ */
#printSurface {
  display: none;
  /* T-874: structured PDFs (cards + leitfaden) follow the LIVE theme. These
     tokens resolve to the active theme's designed bg/fg pair, so contrast is
     safe by construction (every theme defines a readable --bg/--fg). A dark
     theme therefore yields dark cards with light text — the on-screen preview
     and the saved PDF both match the app. font-family: var(--font-mono) is the
     active type family (the type axis redefines --font-mono per data-type). */
  --print-fg: var(--fg);
  --print-mute: var(--fg-70);
  --print-line: var(--fg-12);
  --print-soft: var(--bg-2);
  --print-accent: var(--accent, #D97757);
  --print-accent-soft: color-mix(in srgb, var(--accent, #D97757) 14%, var(--bg));
}
body.is-printing-cards #printSurface,
body.is-printing-leitfaden #printSurface {
  display: block;
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  z-index: 999;
  background: var(--bg-2);
  color: var(--fg);
  overflow: auto;
  font-family: var(--font-mono);
  padding-top: 48px;
}

/* on-screen preview toolbar (hidden when actually printing) */
.print-toolbar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid var(--fg-12);
  z-index: 1000;
}
.print-toolbar .pt-label { font-size: 12px; color: var(--fg-70); letter-spacing: 0.04em; }
.print-toolbar .pt-actions { display: flex; gap: 8px; }
.print-toolbar .pt-btn {
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
}
.print-toolbar .pt-btn:hover { border-color: var(--accent-70, var(--accent)); color: var(--accent); }
.print-toolbar .pt-close:hover { border-color: #d35a55; color: #d35a55; }
body.is-printing-cards .main,
body.is-printing-cards .topbar,
body.is-printing-cards .rail,
body.is-printing-cards .status,
body.is-printing-leitfaden .main,
body.is-printing-leitfaden .topbar,
body.is-printing-leitfaden .rail,
body.is-printing-leitfaden .status {
  display: none;
}

@media print {
  /* T-874: structured PDFs print in the live theme. Force colour rendering so
     the theme background (incl. dark themes) actually appears in the PDF. */
  body.is-printing-cards, body.is-printing-leitfaden {
    background: var(--bg) !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .print-toolbar { display: none !important; }
  body.is-printing-cards #printSurface,
  body.is-printing-leitfaden #printSurface {
    position: static;
    overflow: visible;
    inset: 0;
    padding-top: 0;
    background: var(--bg-2);
  }
}

.print-page {
  width: 210mm;
  min-height: 297mm;
  padding: 18mm 16mm;
  margin: 0 auto 8mm;
  background: var(--bg);   /* T-874: theme page colour, not forced white */
  color: var(--fg);
  page-break-after: always;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 10pt;
  line-height: 1.45;
}
.print-page:last-child { page-break-after: auto; }
.print-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 0.5pt solid var(--print-line);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.print-head::after {
  content: "";
}
.print-wordmark {
  font-family: var(--font-mono);
  font-size: 9pt;
  color: var(--print-mute);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  opacity: 0.95;
}
.print-wordmark::before { content: "// "; color: var(--print-accent); }
.print-logo { height: 28px; width: auto; opacity: 0.9; }
.print-head-right { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.print-head-meta {
  font-size: 8pt;
  color: var(--print-mute);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-transform: lowercase;
}
.print-h1 {
  font-size: 20pt;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg);   /* T-874 */
  text-wrap: pretty;
  font-family: var(--font-mono);
}
.print-h1 em { font-style: italic; color: var(--print-accent); font-weight: 500; }
.print-h1::before { content: ""; }
.print-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}
.print-col { display: flex; flex-direction: column; gap: 8px; }
.print-panel {
  border: 0.5pt solid var(--print-line);
  border-radius: 2px;
  overflow: hidden;
}
.print-panel-h {
  background: var(--print-soft);
  color: var(--print-accent);
  font-size: 8.5pt;
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 0.5pt solid var(--print-line);
}
.print-panel-strong .print-panel-h {
  background: var(--print-accent);
  color: var(--bg);   /* T-874: text on accent = theme bg (app's accent-on-bg convention) */
  font-size: 10pt;
  font-weight: 500;
}
.print-panel-b {
  padding: 6px 9px;
  color: var(--fg);   /* T-874 */
  font-size: 9pt;
}
.print-panel ul {
  margin: 0;
  padding: 6px 9px 6px 22px;
  color: var(--fg);   /* T-874 */
  font-size: 9pt;
}
.print-panel li { margin: 1px 0; }
.print-kv {
  display: grid;
  grid-template-columns: 70px 1fr;
  padding: 3px 9px;
  font-size: 9pt;
  border-bottom: 0.5pt solid var(--fg-06);   /* T-874 */
}
.print-kv:last-child { border-bottom: 0; }
.print-kv span:first-child {
  color: var(--print-accent);
  font-weight: 600;
}
.print-sub {
  color: var(--print-accent);
  font-size: 8.5pt;
  font-weight: 600;
  margin: 4px 0 2px;
}
.print-sub:first-child { margin-top: 0; }
.print-italic { font-style: italic; color: var(--fg); margin-bottom: 4px; }   /* T-874 */
.print-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.5pt solid var(--print-line);
  padding-top: 8px;
  margin-top: auto;
  font-size: 8pt;
  color: var(--print-mute);
}
.print-foot img { height: 14px; vertical-align: middle; margin-right: 6px; opacity: 0.7; }

/* ============================================================
   PRINT — Moderationsleitfaden (matches screenshot 2)
   ============================================================ */
.leitfaden-page .print-h1 { color: var(--print-accent); font-size: 20pt; }
.print-leitfaden {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lf-step {
  page-break-inside: avoid;
}
.lf-step-h {
  font-size: 12pt;
  font-weight: 600;
  color: var(--print-accent);
  margin: 0 0 6px 0;
}
.lf-label {
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--print-accent);
  margin: 6px 0 2px;
}
.lf-quote {
  border-left: 2pt solid var(--print-accent);
  background: var(--print-accent-soft);
  padding: 6px 10px;
  font-style: italic;
  color: var(--fg);   /* T-874 */
  font-size: 9.5pt;
  margin-bottom: 4px;
}
.lf-hinweise {
  list-style: none;
  margin: 0;
  padding-left: 14px;
}
.lf-hinweise li {
  font-size: 9pt;
  color: var(--fg-70);   /* T-874 */
  margin: 1px 0;
}
.lf-hinweise li::before {
  content: "-> ";
  color: var(--print-accent);
  font-family: var(--font-mono);
}
.lf-tipps {
  margin-top: 16px;
  border-top: 0.5pt solid var(--print-line);
  padding-top: 10px;
}
.lf-tipps-h {
  font-size: 10pt;
  color: var(--print-accent);
  margin: 0 0 6px 0;
}
.lf-tipps ul {
  margin: 0;
  padding-left: 20px;
}
.lf-tipps li {
  font-size: 9pt;
  margin: 1px 0;
}

/* ============================================================
   TIMER (in inspector)
   ============================================================ */
.timer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  margin-top: var(--space-2);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  background: var(--fg-03);
}
.timer-display {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.timer-display.is-running { color: var(--accent); }
.timer-display.is-over    { color: #d35a55; }
.timer-planned {
  font-size: 12px;
  color: var(--fg-40);
}
.timer .ghost {
  padding: 4px 10px;
  font-size: 12px;
  margin-left: auto;
}
.timer .ghost + .ghost { margin-left: 4px; }

/* ============================================================
   PRIVATE NOTES (in inspector)
   ============================================================ */
.private-notes {
  border-left: 2px solid var(--accent-70, var(--accent));
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg);
  background: var(--fg-03);
  min-height: 32px;
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}
.private-notes [contenteditable="true"] {
  display: block;
  min-height: 1.5em;
}

/* ============================================================
   MODALS — readiness, materials
   ============================================================ */
.modal {
  width: 560px;
  max-width: 92vw;
  max-height: 78vh;
  background: var(--bg);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fg-12);
}
.modal-h {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.modal-x { font-size: 12px; padding: 4px 10px; }
.modal-body {
  padding: 12px 16px 20px;
  overflow-y: auto;
}
.modal-sum {
  font-size: 12px;
  color: var(--fg-40);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.modal-empty {
  padding: 20px 4px;
  color: var(--fg-70);
  font-size: 13px;
  line-height: 1.55;
}
.modal-foot-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--fg-12);
}
.modal-foot-actions .ghost { font-size: 12px; padding: 5px 10px; }

/* T-910: account dialog (log-in / create-account) + Settings account block. */
.acct-modal { width: 420px; }
.acct-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--fg-12);
}
.acct-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-40);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  margin-bottom: -1px;
}
.acct-tab:hover { color: var(--fg-70); }
.acct-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.acct-form { display: flex; flex-direction: column; gap: 12px; }
.acct-field { display: flex; flex-direction: column; gap: 4px; }
.acct-lbl { font-size: 11px; color: var(--fg-40); letter-spacing: 0.04em; }
.acct-field input {
  background: var(--bg);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-1, 4px);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
}
.acct-field input:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; border-color: var(--accent-70); }
.acct-error { font-size: 12px; color: var(--accent); line-height: 1.5; margin: 0; }
.acct-hint { font-size: 11px; color: var(--fg-40); margin: 0; }
/* T-913: forgot-password link + verification banner + reset sub-panel */
.acct-link {
  background: none; border: 0; padding: 0; margin: 2px 0 0;
  font: inherit; font-size: 12px; color: var(--fg-40);
  text-decoration: underline; cursor: pointer; align-self: flex-start;
}
.acct-link:hover { color: var(--accent); }
.acct-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.acct-verify-banner { display: flex; flex-direction: column; gap: 10px; }
.acct-verify-banner p { font-size: 13px; color: var(--fg-70); line-height: 1.5; margin: 0; }
.acct-reset-panel { display: flex; flex-direction: column; gap: 12px; }
.acct-reset-prompt { font-size: 13px; color: var(--fg-70); line-height: 1.5; margin: 0; }
/* the flex display above otherwise beats the UA [hidden] rule — restore it so
   .hidden toggling actually hides these sub-views (T-913) */
.acct-form[hidden], .acct-verify-banner[hidden], .acct-reset-panel[hidden] { display: none; }
/* Settings → account block */
.acct-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-70); }
.acct-who-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* T-915: version-history / changelog popup */
.changelog-modal { width: 480px; max-width: 92vw; }
.cl-list { display: flex; flex-direction: column; gap: 18px; max-height: 60vh; overflow-y: auto; }
.cl-entry { display: flex; flex-direction: column; gap: 6px; }
.cl-entry + .cl-entry { border-top: 1px solid var(--fg-12); padding-top: 18px; }
.cl-entry-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cl-ver { font-weight: 600; font-size: 15px; color: var(--fg); font-variant-numeric: tabular-nums; }
.cl-current {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-40, var(--accent)); border-radius: 3px;
  padding: 1px 5px;
}
.cl-date { margin-left: auto; font-size: 12px; color: var(--fg-40); font-variant-numeric: tabular-nums; }
.cl-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.cl-notes li { font-size: 13px; line-height: 1.5; color: var(--fg-70); }
.cl-build { margin: 16px 0 0; font-size: 11px; color: var(--fg-40); font-variant-numeric: tabular-nums; }

/* T-876: text-export preview block (agenda / facilitator notes) — themed,
   scrollable, monospace; mirrors the app's surface tokens. */
.text-preview {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 12px 14px;
  margin: 0;
  max-height: 52vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* T-877: export confirm/summary modal (docx / pptx / json) */
.export-confirm {
  margin: 2px 0 14px;
  font-family: var(--font-mono);
}
.export-confirm .ec-summary {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--fg);
}
.export-confirm .ec-file {
  margin: 0;
  font-size: 12px;
  color: var(--fg-70);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.export-confirm .ec-file-label { color: var(--fg-40); }
.export-confirm .ec-file-name {
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 3px 7px;
  word-break: break-all;
}
/* T-880: active-appearance line + dark-export hint */
.export-confirm .ec-appear {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--fg-70);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.export-confirm .ec-appear-val { color: var(--fg); }
.export-confirm .ec-dark-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--fg-40);
}

/* confirm dialog */
.confirm-msg {
  margin: 4px 0 16px;
  color: var(--fg-95);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ghost.danger {
  color: #d35a55;
  border-color: rgba(211, 90, 85, 0.35);
}
.ghost.danger:hover {
  background: rgba(211, 90, 85, 0.10);
  border-color: rgba(211, 90, 85, 0.60);
}

/* readiness rows */
.ready-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--fg-06);
}
.ready-num { color: var(--fg-40); font-size: 12px; font-variant-numeric: tabular-nums; }
.ready-title { font-size: 13px; color: var(--fg); margin-bottom: 2px; }
.ready-miss { font-size: 11px; color: var(--fg-70); display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.ready-tag {
  border: 1px solid var(--accent-70, var(--accent));
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--radius-2);
  font-size: 10px;
}
.ready-row .ghost { font-size: 11px; padding: 3px 10px; }

/* material rows */
.mat-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--fg-06);
  font-size: 13px;
  cursor: pointer;
}
.mat-row:hover .mat-text { color: var(--fg); }
.mat-cb {
  accent-color: var(--accent);
  width: 14px; height: 14px;
}
.mat-row input:checked + .mat-text {
  text-decoration: line-through;
  color: var(--fg-40);
}
.mat-text { color: var(--fg-70); }
.mat-meta { color: var(--fg-40); font-size: 11px; }

/* T-675: storage breakdown modal — per-key bytes table */
.sbd-total { font-size: 13px; color: var(--fg-70); }
/* T-684: mirror the chip quota colours onto the modal total line so the
   urgency signal carries through the click. Same hex as the chip rules
   in this file ~L1225-1234 (T-670) — keep in sync if either changes. */
.sbd-total.is-quota-warn { color: #d8961f; }
.sbd-total.is-quota-critical { color: #dc4646; }
/* T-774: same warn/critical palette mirrored onto the IDB quota row so
   IDB-mode modals carry the urgency signal at the meaningful surface
   (the LS total tint is suppressed in IDB mode per PL-046 sibling sweep). */
.sbd-idb-quota.is-quota-warn { color: #d8961f; font-weight: 600; }
.sbd-idb-quota.is-quota-critical { color: #dc4646; font-weight: 600; }
/* T-784: on-demand backup nudge badge inside the breakdown modal. Warn-tinted
   to match .sbd-total.is-quota-warn (keep palette in sync if either changes). */
.sbd-nudge {
  color: #d8961f;
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 4px;
}
/* T-790: visual treatment for the import-picker rename hint. Same warning
   color family as .sbd-nudge. Hidden when data-rename-count="0" so empty
   hints take no layout space. ⚠ prefix via ::before keeps JS untouched. */
.tpl-bulk-rename-hint {
  color: #d8961f;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
  margin: 6px 0 0;
  border-radius: 4px;
  background: rgba(216, 150, 31, 0.08);
}
.tpl-bulk-rename-hint:empty,
.tpl-bulk-rename-hint[data-rename-count="0"] {
  display: none;
}
.tpl-bulk-rename-hint:not(:empty)::before {
  content: "⚠ ";
}

/* T-785: bulk-export-selected affordances — small ghost-style button in the
   "Meine Vorlagen" theme header + sub-dialog checkbox list inside the chooser. */
.tpl-theme-bulk-btn {
  margin-left: 8px;
  font-size: 11px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--fg-30);
  color: var(--fg-70);
  border-radius: 4px;
  cursor: pointer;
}
.tpl-theme-bulk-btn:hover { color: var(--fg); border-color: var(--fg-60); }
.tpl-bulk-shortcuts { display: flex; gap: 8px; margin: 8px 0 12px; }
.tpl-bulk-shortcuts .ghost { font-size: 11px; padding: 3px 8px; }
.tpl-bulk-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--fg-20);
  border-radius: 4px;
  padding: 4px 0;
}
.tpl-bulk-row {
  display: grid;
  grid-template-columns: 24px auto;
  align-items: baseline;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.tpl-bulk-row:hover { background: var(--fg-10); }
.tpl-bulk-row-name { font-weight: 500; grid-column: 2; }
.tpl-bulk-row-desc {
  grid-column: 2;
  font-size: 11px;
  color: var(--fg-60);
  margin-top: 2px;
}
/* T-786: per-row meta hint — element count · total duration · byte size.
   Sits in column 2 below desc, monospace for visual rhythm with the chooser
   card's tpl-meta line. */
.tpl-bulk-row-meta {
  grid-column: 2;
  font-size: 11px;
  color: var(--fg-50);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 2px;
}
/* T-792: per-row collision indicator on the bulk-import picker. Sibling
   of T-790's aggregate rename hint — same amber palette so the disclosure
   reads as one consistent signal across granularity levels. The ⚠ glyph
   sits in column 1 below the checkbox (col 1 line 2 via grid auto-flow).
   Non-colliding rows get no treatment. */
.tpl-bulk-row[data-row-collides="1"] {
  background: rgba(216, 150, 31, 0.06);
  border-left: 3px solid rgba(216, 150, 31, 0.7);
  padding-left: 9px;
}
.tpl-bulk-row[data-row-collides="1"] .tpl-bulk-row-name::after {
  content: " ⚠";
  color: #d8961f;
  font-weight: 600;
  margin-left: 4px;
}
.tpl-bulk-export[disabled] { opacity: 0.5; cursor: not-allowed; }
.sbd-actions { margin: 10px 0 14px; }
.sbd-actions .ghost { font-size: 12px; padding: 6px 14px; }
.sbd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
}
.sbd-table th {
  text-align: left;
  font-weight: normal;
  color: var(--fg-40);
  border-bottom: 1px solid var(--fg-06);
  padding: 6px 8px;
}
.sbd-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--fg-06);
  color: var(--fg-70);
}
.sbd-key { word-break: break-all; max-width: 60%; }
.sbd-bytes, .sbd-share { text-align: right; white-space: nowrap; color: var(--fg); }
/* T-700: per-row copy-value column — minimal width, ghost-button look. */
.sbd-actions { text-align: right; white-space: nowrap; width: 1%; }
.sbd-copy-key {
  background: transparent;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg-70);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
}
.sbd-copy-key:hover { color: var(--fg); border-color: var(--fg-40); }

/* library detail popup */
.ld-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ld-tags span {
  font-size: 11px;
  color: var(--fg-70);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 2px 8px;
}
.ld-tags span::before { content: "// "; color: var(--accent); }
.ld-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--fg-06);
  font-size: 13px;
}
.ld-k {
  color: var(--fg-40);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.ld-v { color: var(--fg); line-height: 1.5; text-wrap: pretty; }
.ld-v ul { margin: 0; padding-left: 16px; }
.ld-v li { margin: 1px 0; color: var(--fg-70); }

/* themed prompt modal */
.prompt-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--fg-03);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 10px;
  margin-bottom: 14px;
  outline: 0;
}
.prompt-input:focus { border-color: var(--accent); background: var(--fg-06); }
.prompt-ok { border-color: var(--accent-70, var(--accent)); color: var(--accent); }

/* T-124 (restored): library-add position picker */
.pickpos-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pickpos-opt {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--fg); cursor: pointer;
  padding: 6px 8px; border-radius: var(--radius-2);
}
.pickpos-opt:hover { background: var(--fg-03); }
.pickpos-opt input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
.pickpos-num {
  width: 60px; box-sizing: border-box;
  background: var(--fg-03); border: 1px solid var(--fg-12); border-radius: var(--radius-2);
  color: var(--fg); font-family: var(--font-mono); font-size: 13px;
  padding: 4px 6px; margin-left: 4px; outline: 0;
}
.pickpos-num:focus { border-color: var(--accent); background: var(--fg-06); }

/* ============================================================
   INTRO PAGES
   ============================================================ */
.intro-pages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}
.intro-card {
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 20px 24px;
}
.intro-eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-40);
  margin-bottom: 10px;
}
.intro-eyebrow::first-letter { color: var(--accent); }
.intro-h {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 6px 0;
  line-height: 1.2;
}
.intro-h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  margin: 18px 0 8px 0;
  letter-spacing: 0;
}
.intro-sub {
  margin: 0 0 14px 0;
  color: var(--fg-70);
  font-size: 14px;
}
.intro-p {
  margin: 0 0 10px 0;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}
.intro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--fg-70);
}
.intro-meta .intro-k {
  color: var(--fg-40);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-right: 6px;
}
.intro-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intro-list li {
  font-size: 13.5px;
  color: var(--fg);
  padding: 4px 0;
  border-bottom: 1px solid var(--fg-06);
}
.intro-list li::before {
  content: "// ";
  color: var(--accent);
}
.intro-list li.intro-add {
  border-bottom: 0;
  padding-top: 8px;
}
.intro-list li.intro-add::before { content: ""; }
.intro-list li.intro-add .ghost {
  font-size: 11px;
  padding: 4px 10px;
}

/* ============================================================
   DRAG REORDER indicators
   ============================================================ */
.row.is-dragging { opacity: 0.4; }
.row.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.row.drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* inline duration editing on rows */
.row-time-edit {
  display: inline-block;
  padding: 1px 3px;
  border-radius: var(--radius-2);
  cursor: text;
  color: var(--fg-70);
}
.row-time-edit:hover { background: var(--fg-06); box-shadow: inset 0 0 0 1px var(--fg-12); color: var(--fg); }
.row-time-edit:focus { outline: 0; background: var(--fg-06); box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); }
.rt-arrow { color: var(--fg-40); }
.row-dur-edit {
  display: inline-block;
  min-width: 30px;
  padding: 1px 5px;
  margin: -1px -5px;
  border-radius: var(--radius-2);
  cursor: text;
}
.row-dur-edit:hover {
  background: var(--fg-06);
  box-shadow: inset 0 0 0 1px var(--fg-12);
}
.row-dur-edit:focus {
  outline: 0;
  background: var(--fg-06);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* search result highlight */
.palette-item mark {
  background: var(--accent-12);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 2px;
}
.palette-item .pi-sub {
  color: var(--fg-40);
  font-size: 11.5px;
  margin-top: 2px;
}

/* logo preview chip in Settings */
.logo-preview {
  display: none;
  height: 24px;
  width: auto;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 3px 6px;
  background: var(--fg-03);
}

/* duration bar (under title in each row) */
.row-bar {
  margin-top: 6px;
  height: 2px;
  background: var(--fg-06);
  border-radius: 1px;
  overflow: hidden;
  max-width: 240px;
}
.row-bar-fill {
  height: 100%;
  background: var(--fg-40);
}
.row.is-selected .row-bar-fill { background: var(--accent); }

/* phase quick-pick popover (anchored to the clicked cell) */
.overlay-pick {
  background: rgba(14,17,22,0.35);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  pointer-events: auto;
}
.overlay-pick .picker {
  position: absolute;
  top: var(--pick-top, 100px);
  left: var(--pick-left, 100px);
  width: 180px;
}

/* phase quick-pick row coloring */
.overlay-pick [data-phase="opener"]    .pi-name::before { content: ""; background: #4ea16d; }
.overlay-pick [data-phase="main"]      .pi-name::before { content: ""; background: #6b8df2; }
.overlay-pick [data-phase="closer"]    .pi-name::before { content: ""; background: #d35a55; }
.overlay-pick [data-phase="energizer"] .pi-name::before { content: ""; background: #e08a3d; }
.overlay-pick [data-phase="transition"].pi-name::before { content: ""; background: #9c7bd0; }
.overlay-pick [data-phase="reflection"].pi-name::before { content: ""; background: #5fb3a1; }
.overlay-pick [data-phase] .pi-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.overlay-pick [data-phase] .pi-name::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-40);
}

/* import preview list */
.import-preview {
  font-size: 13px;
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.import-row {
  padding: 4px 0;
  border-bottom: 1px solid var(--fg-06);
  color: var(--fg-70);
}
.import-row strong { color: var(--fg); font-weight: 400; }

/* shortcuts help layout */
.shortcuts-help { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; max-width: none; }
.shortcuts-help .sc { padding: 6px 0; font-size: 13px; }

/* ============================================================
   WORKSHOP switcher button — same as project but slimmer name
   ============================================================ */
#wsBtn .proj-name { color: var(--fg); }
#wsBtn .proj-label { color: var(--fg-40); }

/* ============================================================
   STATUS BAR
   ============================================================ */
.status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-3);
  border-top: 1px solid var(--fg-12);
  font-size: 12px;
  color: var(--fg-70);
  background: var(--bg);
  white-space: nowrap;
  overflow: hidden;
}
.status-l { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.status-r { display: flex; gap: 8px; align-items: baseline; flex-shrink: 0; }
.status-item { color: var(--fg-70); }
.status-item.ok { color: #4ea16d; }
.status-sep { color: var(--fg-40); }

/* ============================================================
   OVERLAYS — palette + picker
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 17, 22, 0.78);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  z-index: 100;
}
.overlay[hidden] { display: none; }
.overlay-tl {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: calc(var(--topbar-h) + 6px);
  padding-left: 230px;
  background: rgba(14, 17, 22, 0.55);
}
.overlay-tr {
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: calc(var(--topbar-h) + 6px);
  padding-right: 24px;
  background: rgba(14, 17, 22, 0.45);
}

/* appearance popover variants of .picker */
.picker-wide { width: 380px; padding: 6px 0 10px; }
.app-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
}
.app-k {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-40);
}
.app-segs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.app-segs .seg-btn {
  padding: 4px 9px;
  font-size: 11px;
}

/* appearance button in top bar — just the typographic mark */
.appearance-btn {
  font-family: var(--font-mono);
  padding: 4px 9px;
  letter-spacing: 0.04em;
}

/* contenteditable affordances */
[contenteditable="true"] { outline: 0; }
[contenteditable="true"]:hover {
  background: var(--fg-03);
  box-shadow: inset 0 0 0 1px var(--fg-12);
  border-radius: var(--radius-2);
}
[contenteditable="true"]:focus {
  background: var(--fg-06);
  box-shadow: inset 0 0 0 1px var(--accent-70, var(--accent));
  border-radius: var(--radius-2);
}
[contenteditable="true"][data-edit-empty="true"]::before {
  content: attr(data-placeholder);
  color: var(--fg-40);
}

/* save button states */
#saveBtn.is-dirty .dot { background: var(--accent); }
#saveBtn.is-saving .dot { background: var(--accent); animation: pulse 1s var(--ease-out) infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* TOASTS — bottom-right stack, terse mono */
.toasts {
  position: fixed;
  bottom: calc(var(--status-h) + 12px);
  right: 16px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 110;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--bg);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  animation: toast-in 160ms var(--ease-out);
}
.toast .t-sl { color: var(--accent); }
.toast .t-msg { flex: 1; }
.toast .t-action {
  color: var(--accent);
  border: 1px solid var(--accent-70, var(--accent));
  padding: 3px 8px;
  border-radius: var(--radius-2);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.toast .t-action:hover { background: var(--accent-12, rgba(217,119,87,0.12)); }
.toast.is-leaving { animation: toast-out 160ms var(--ease-out) forwards; }

/* T-946: version-gate reload banner — persistent, top-center, above chrome */
.wd-version-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2, var(--bg));
  border: 1px solid var(--accent-70, var(--accent));
  border-radius: var(--radius-2);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--fg);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  animation: toast-in 160ms var(--ease-out);
  max-width: calc(100vw - 24px);
}
.wd-version-banner .wd-vg-msg { flex: 1; }
.wd-version-banner button {
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  border-radius: var(--radius-2);
  padding: 3px 10px;
}
.wd-version-banner .wd-vg-reload {
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
}
.wd-version-banner .wd-vg-reload:hover { filter: brightness(1.08); }
.wd-version-banner .wd-vg-dismiss {
  color: var(--fg-70, var(--fg));
  background: transparent;
  border: 1px solid var(--fg-12);
}
.wd-version-banner .wd-vg-dismiss:hover { background: var(--fg-06, transparent); }
@media print { .wd-version-banner { display: none !important; } }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* command palette */
.palette {
  width: 640px;
  max-width: 92vw;
  background: var(--bg);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
}
.palette-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fg-12);
}
.palette-head .cc-slash { font-size: 16px; }
.palette-head input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
  color: var(--fg);
  font-family: var(--font-mono);
}
.palette-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 0;
}
.palette-section {
  padding: 8px 16px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-40);
}
.palette-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--fg-70);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.palette-item:hover, .palette-item.is-cursor {
  color: var(--fg);
  background: var(--fg-03);
  border-left-color: var(--accent);
}
.palette-item .pi-sl { color: var(--fg-40); }
.palette-item .pi-tag {
  font-size: 11px;
  color: var(--fg-40);
}
.palette-foot {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  padding: 8px 16px;
  border-top: 1px solid var(--fg-12);
  font-size: 11px;
  color: var(--fg-40);
  white-space: nowrap;
  align-items: center;
}
.palette-foot > span { display: inline-flex; gap: 4px; align-items: center; }
.palette-foot kbd { font-size: 10px; }

/* project picker */
.picker {
  width: 320px;
  background: var(--bg);
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-2);
  padding: 6px 0;
}
.picker-head {
  padding: 10px 14px 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-40);
  display: flex;
  gap: 8px;
}
.picker-item {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  color: var(--fg-70);
  border-left: 2px solid transparent;
}
.picker-item:hover { color: var(--fg); background: var(--fg-03); border-left-color: var(--accent); }
.picker-item.is-active { color: var(--fg); border-left-color: var(--accent); background: var(--fg-03); }
.picker-item .pi-name { font-size: 13px; }
.picker-item .pi-meta { font-size: 11px; color: var(--fg-40); }
.picker-sep { height: 1px; background: var(--fg-12); margin: 6px 0; }

/* ============================================================
   responsive — inspector collapses below 1200px
   ============================================================ */
/* T-864: below 1500px the topbar gets tight. Drop the wordmark TEXT (keep the
   dragon glyph as brand) to reclaim ~220px so the project/workshop names stay
   readable instead of ellipsis-ing down to a few characters. The body-grid cap
   + .proj-name-txt ellipsis already guarantee nothing clips at any width; this
   is comfort, not correctness. */
@media (max-width: 1500px) {
  .brand-lockup .cc-wordmark { display: none; }
}
@media (max-width: 1280px) {
  :root { --inspector-w: 320px; --rail-w: 200px; }
  .lib-layout { grid-template-columns: 200px 1fr; }
}
@media (max-width: 1100px) {
  .shell { grid-template-columns: var(--rail-w) 1fr; }
  .inspector { display: none; }
}

/* ============================================================
   T-854: phone — collapse the rail off-canvas behind ☰ so the
   agenda gets full width. Requires width=device-width viewport.
   ============================================================ */
@media (max-width: 600px) {
  .rail-burger { display: inline-flex; }

  /* kill page-level horizontal scroll so the agenda is anchored full-width at
     left:0; the topbar has more controls than fit 390px, so let IT scroll
     internally (burger is first, stays visible without scrolling). */
  html, body { overflow-x: hidden; }
  .topbar { overflow-x: auto; }

  /* main goes full-width; resizers + (already-hidden) inspector out.
     T-860: !important is required — higher-specificity desktop rules
     (body[data-dock="bottom"] .shell, body:not([data-view="agenda"]):not(
     [data-dock]) .shell) otherwise keep the rail's 200px grid column reserved
     even though the rail is position:fixed/off-canvas, squeezing all NON-agenda
     views into the left ~185px. The agenda escaped only because rule 1030
     excludes it. Forcing one column here reclaims the full width on every view. */
  .shell { grid-template-columns: 1fr !important; }
  .shell > .main { grid-column: 1 !important; }
  .shell > .resizer-rail,
  .shell > .resizer-insp { display: none; }

  /* rail slides in from the left as an overlay drawer */
  .rail {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: min(82vw, 300px);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.4);
    border-right: 1px solid var(--fg-12);
  }
  body.rail-open .rail { transform: translateX(0); }

  /* dim scrim behind the open drawer; tapping it closes (handled in JS) */
  body.rail-open .rail-scrim {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 55;
  }

  /* T-857: the desktop agenda grid (36px 120px 1fr 110px 60px 44px) sums to
     ~370px of fixed columns, so at 390px the 1fr title collapses to ~0 and
     wraps one-letter-per-line. Reflow each row into a stacked card: a compact
     meta line (num · time · dur · controls), the title full-width, then phase. */
  .rows .row {
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "num   time   dur   grip"
      "title title  title title"
      "phase phase  phase phase";
    align-items: center;
    row-gap: 4px;
    column-gap: var(--space-2);
    padding: 12px;
  }
  .rows .row > .col-num   { grid-area: num; }
  .rows .row > .col-time  { grid-area: time; }
  .rows .row > .col-dur   { grid-area: dur; text-align: left; }
  .rows .row > .col-grip  { grid-area: grip; }
  .rows .row > .col-title { grid-area: title; align-self: start; }
  .rows .row > .col-phase { grid-area: phase; align-self: start; }

  /* delete/collapse stay visible on touch (no hover) */
  .rows .row .row-del { opacity: 1; }

  /* the column-header row is redundant once rows are self-describing cards */
  .row-head { display: none; }

  /* the faded debug library-lineage chip is plumbing a facilitator never needs
     on a phone (same spirit as T-855's id-chip); declutter it at phone width */
  .lib-chip { display: none; }

  /* let the bottom progress/autosave footer wrap instead of colliding */
  .view-foot { flex-wrap: wrap; }
  .foot-meta { flex: 1 1 100%; }

  /* T-858: the global status bar's right cluster (.status-r) is ~729px wide with
     flex-shrink:0, so at 390px it collapses .status-l to 0 and — since .status-l
     overflows visible — #statusLine bleeds out and overlaps it. Keep the two
     facilitator-relevant signals (the workshop summary + ● synced); drop the
     build/autosave chrome so the bar fits and nothing overlaps. */
  .status-l { overflow: hidden; }
  #statusLine { overflow: hidden; text-overflow: ellipsis; }
  .status-r { gap: 0; flex-shrink: 0; }
  .status-r .status-item:not(.ok) { display: none; }
  .status-r .status-sep { display: none; }
  /* T-908: legal links survive the collapse (not .status-item) but .status-sep is
     hidden and .status-r gap is 0 on phone — restore a gap so "● synced" and the
     legal links don't fuse ("syncedImpressum"). */
  .status-r .status-legal { margin-left: 10px; }

  /* T-860: the projects grid (minmax(320px,1fr)) and the BEISPIELE theme grid
     (minmax(240px,1fr)) keep their fixed MIN track on a narrow viewport, so the
     single column overflows the ~310px content box and project cards clip at the
     right edge. Collapse both to one full-width column so cards fit the phone. */
  .projects { grid-template-columns: 1fr; }
  .examples-theme-grid { grid-template-columns: 1fr; }

  /* T-859: the library is a 2-column grid (filter aside 200-220px | element
     grid). On a 390px phone the aside still claims its fixed track, so the
     element grid is pushed off the right edge — cards render half off-screen.
     Stack the filter aside above the grid (single column); the aside's right
     divider becomes a bottom divider. */
  .lib-layout { grid-template-columns: 1fr; }
  .lib-filters {
    border-right: 0;
    border-bottom: 1px solid var(--fg-12);
    padding-right: 0;
    padding-bottom: var(--space-3);
  }

  /* T-861: the sticky multi-select bar is width:fit-content; with the German
     "+ alle hinzufügen" + "leeren" labels it exceeds 390px (right=398) and
     "leeren" clips. Cap it to the viewport and let the buttons wrap. */
  .lib-batch-bar { max-width: 100%; flex-wrap: wrap; }

  /* T-859: every view-head is a side-by-side flex (title block | controls).
     At phone width that squeezes the title block — the library subtitle (a long
     source list) collapses to ~2 words per line beside the count/reset cluster.
     Stack the header vertically so the title and its controls each get the full
     viewport width; controls wrap normally below the title. */
  .view-head { flex-direction: column; }
  .view-head-r { max-width: none; justify-content: flex-start; }

  /* T-862: the settings view is a 2-column grid (.settings 1fr 1fr; the nested
     .shortcuts is grid-column:1/-1 with its own 1fr 1fr). At 390px each track is
     ~155px, so single non-wrapping buttons ("luftig", "bei Änderung") and the
     shortcut rows overflow their track and — with body{overflow-x:hidden} — get
     clipped, not scrolled, leaving the right-hand options unreachable. Collapse
     both grids to a single column so every group is full-width and reachable. */
  .settings { grid-template-columns: 1fr; }
  .shortcuts { grid-template-columns: 1fr; }

  /* T-863: .view's 40px (var(--space-4)) horizontal padding eats 80px — 20% of a
     390px phone — leaving content 310px. Tighten to the canonical 16px mobile
     gutter so cards/rows/text reclaim ~48px of width. Vertical padding kept. */
  .view { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* scrim is inert unless the phone drawer is open (above) */
.rail-scrim { display: none; }

/* ============================================================
   T-634: cloud-read workshops picker (Projects view)
   ============================================================ */
.cloud-workshops {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--fg-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cloud-workshops[hidden] { display: none; }
.cloud-workshops .cw-head { display: flex; flex-direction: column; gap: 2px; }
.cloud-workshops .cw-h { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.cloud-workshops .cw-sub { margin: 0; font-size: 12px; color: var(--fg-40); }
.cloud-workshops .cw-actions { display: flex; gap: var(--space-1); }
.cloud-workshops .cw-list { display: flex; flex-direction: column; gap: 4px; }
.cloud-workshops .cw-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border: 1px solid var(--fg-12);
  border-radius: var(--radius-1);
}
.cloud-workshops .cw-row:hover { border-color: var(--fg-40); }
.cloud-workshops .cw-title { flex: 1; font-size: 13px; color: var(--fg); }
.cloud-workshops .cw-updated { font-size: 11px; color: var(--fg-40); font-variant-numeric: tabular-nums; }
.cloud-workshops .cw-chip-imported {
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cloud-workshops .cw-msg { margin: 0; font-size: 12px; color: var(--fg-40); }
.cloud-workshops .cw-empty { font-style: italic; }
/* T-705: section-header imported/total chip — sits in .cw-head below the sub line. */
.cloud-workshops .cw-import-chip {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11px;
  color: var(--fg-70);
  background: var(--fg-12);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cloud-workshops .cw-import-chip[hidden] { display: none; }

/* T-751 (T-730-build-1) / T-971 (Phase C step 4): first-boot start chooser —
   one continuous screen with a welcome lede + three path-cards (example /
   template / blank). G2 decision: single screen, not a welcome→chooser step. */
.first-boot-modal { width: 520px; max-width: 94vw; }
.first-boot-body { padding: 22px 24px 28px; text-align: center; }
.first-boot-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-70);
  margin: 0 0 22px;
}
/* T-971: three path-cards stacked on one screen; each card = title + sub. */
.first-boot-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
/* T-976: data-safety note under the path cards (migrated from #onboarding). */
.first-boot-data {
  margin: 16px 0 0;
  padding: 12px 14px;
  text-align: left;
  border-top: 1px solid var(--fg-12);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-70);
}
.first-boot-data .fb-data-eye {
  display: block;
  margin-bottom: 3px;
  color: var(--fg-40);
  letter-spacing: 0.02em;
}
.first-boot-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  text-align: left;
  border: 1px solid var(--fg-12);
  border-radius: 8px;
  background: var(--fg-03);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.first-boot-card:hover {
  background: var(--fg-06);
  border-color: var(--accent, var(--fg-40));
}
.first-boot-card .fb-card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-95);
}
.first-boot-card .fb-card-sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-70);
}
@media (max-width: 600px) {
  .first-boot-card { padding: 12px 14px; }
}

/* T-750 (T-729-build-1): duplicate-from-example target picker. Vertical
   list of project rows + sticky "neues projekt" + cancel foot. Uses the
   same monospace/lowercase rhythm as first-boot and the wsCopyTo picker. */
.dup-target-modal { width: 480px; max-width: 92vw; }
.dup-target-body { padding: 18px 22px 22px; }
.dup-target-sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-70);
  margin: 0 0 14px;
}
.dup-target-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.dup-target-row {
  text-align: left;
  padding: 11px 14px;
  font-size: 13px;
  border: 1px solid var(--fg-20);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dup-target-row:hover { background: var(--fg-12); }
.dup-target-row .dtr-meta {
  font-size: 11px;
  color: var(--fg-40);
  white-space: nowrap;
}
.dup-target-empty {
  font-size: 12px;
  color: var(--fg-40);
  padding: 14px 4px;
  text-align: center;
}
.dup-target-new {
  width: 100%;
  padding: 11px 14px;
  font-size: 13px;
  text-align: left;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  border-style: dashed;
}
.dup-target-new:hover { background: var(--fg-12); }
.dup-target-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--fg-12);
  margin-top: 6px;
}
.dup-target-foot button { padding: 8px 16px; font-size: 12px; }

/* T-752 (T-731-build-1): timeline modal — bucket browser for snapshot ring.
   Tab picker switches workshop vs project scope. 4 bucket sections (10min/
   hour/day/week), each a heading + ul of rows. Read-only browse: rows show
   takenAt + element-count delta. No restore button in this slice. */
.timeline-modal { width: 560px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
.timeline-body { padding: 14px 18px 18px; display: flex; flex-direction: column; min-height: 0; }
.timeline-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--fg-12);
  padding-bottom: 4px;
}
.timeline-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--fg-70);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 7px 14px;
  letter-spacing: 0.02em;
}
.timeline-tab:hover { color: var(--fg); background: var(--fg-12); }
.timeline-tab.is-active {
  color: var(--fg);
  border-color: var(--fg-20);
  border-bottom: 1px solid var(--bg);
  margin-bottom: -1px;
}
.timeline-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.timeline-loading,
.timeline-load-fail,
.timeline-empty-all {
  font-size: 12px;
  color: var(--fg-40);
  text-align: center;
  padding: 32px 4px;
}
.timeline-bucket { display: flex; flex-direction: column; gap: 4px; }
.timeline-bucket-h {
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--fg-40);
  margin: 0 0 2px;
  font-weight: 500;
}
.timeline-bucket-empty {
  font-size: 11px;
  color: var(--fg-40);
  padding: 4px 8px;
}
.timeline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--fg-12);
  padding: 8px 12px;
  font-size: 12px;
  background: transparent;
}
.timeline-row .tr-time {
  font-family: inherit;
  color: var(--fg);
  white-space: nowrap;
}
.timeline-row .tr-delta {
  font-size: 11px;
  color: var(--fg-40);
  white-space: nowrap;
}
.timeline-row .tr-delta.is-plus { color: var(--ok, #4caf50); }
.timeline-row .tr-delta.is-minus { color: var(--err, #f44336); }

/* T-753: per-row restore button + nested restore-confirm modal.
   Restore button is a small ghost button on the row, revealed on hover
   to keep the row visually quiet. Confirm modal is narrower than the
   timeline modal and has its own diff summary section. */
.timeline-row .tr-restore {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--fg-20);
  color: var(--fg-70);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.timeline-row:hover .tr-restore { opacity: 1; }
.timeline-row .tr-restore:hover { background: var(--fg-12); color: var(--fg); }
.timeline-row .tr-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
.restore-confirm-modal { width: 440px; max-width: 92vw; }
.restore-confirm-body { padding: 18px 22px 18px; }
.restore-confirm-sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-70);
  margin: 0 0 14px;
}
.restore-diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding: 10px 12px;
  background: var(--fg-12);
  font-size: 12px;
  font-family: inherit;
}
.restore-diff .rd-line { white-space: nowrap; }
.restore-diff .rd-line.is-plus { color: var(--ok, #4caf50); }
.restore-diff .rd-line.is-minus { color: var(--err, #f44336); }
.restore-diff .rd-line.is-mod { color: var(--fg-70); }
.restore-diff .rd-empty { color: var(--fg-40); font-style: italic; }
.restore-confirm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--fg-12);
  padding-top: 12px;
}
.restore-confirm-foot button { padding: 8px 16px; font-size: 12px; }