/* ==========================================================================
   CHROME — Topbar (48px)
   ========================================================================== */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  display:flex; align-items:center; gap:8px;
  padding:0 12px;
  background:var(--bg-chrome);
  border-bottom:1px solid var(--line-hairline);
  z-index:600;
}
.icon-btn{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-tool);
}
.icon-btn:hover:not(:disabled){ background:var(--bg-hover); }
.icon-btn svg.ic{ width:20px; height:20px; }
#btnHome{
  display:flex; align-items:center; gap:6px;
  height:32px; padding:0 10px; border-radius:var(--r-tool);
}
#btnHome:hover{ background:var(--bg-hover); }
#btnHome svg.ic{ width:20px; height:20px; }
#breadcrumb{
  display:flex; align-items:center; gap:4px;
  overflow:hidden; white-space:nowrap;
  flex:1; min-width:0;
}
.crumb{
  display:flex; align-items:center; gap:6px;
  height:28px; padding:0 8px; border-radius:var(--r-tool);
  color:var(--text-secondary);
}
.crumb:hover{ background:var(--bg-hover); }
.crumb.current{ color:var(--text-primary); }
.crumb-square{
  width:12px; height:12px; border-radius:3px; flex:none;
  background:var(--el-white); border:1px solid var(--el-white-b);
}
.crumb-sep{ color:var(--text-secondary); }
#tbRight{ display:flex; align-items:center; gap:2px; }
#searchWrap{ display:flex; align-items:center; }
#searchInput{
  width:0; opacity:0; transition:width .15s, opacity .15s;
  height:30px; border:1px solid var(--line-hairline); border-radius:var(--r-tool);
  padding:0 10px; font:inherit; color:var(--text-primary);
  background:var(--bg-chrome); outline:none;
}
#searchWrap.open #searchInput{ width:200px; opacity:1; margin-right:4px; }
#searchInput:focus{ border-color:var(--line-focus); }
#searchHint{
  position:fixed; top:calc(var(--topbar-h) + 4px); right:120px;
  background:var(--bg-chrome); border:1px solid var(--line-hairline);
  border-radius:var(--r-tool); box-shadow:var(--shadow-panel);
  padding:8px 12px; font-size:12px; color:var(--text-secondary);
  z-index:900;
}

/* ==========================================================================
   CHROME — Titlebar (56px)
   ========================================================================== */
#titlebar{
  position:fixed; top:var(--topbar-h); left:0; right:0; height:var(--titlebar-h);
  background:var(--bg-chrome);
  border-bottom:1px solid var(--line-hairline);
  z-index:590;
}
#boardtitle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-serif); font-size:20px; font-weight:600;
  text-align:center; padding:2px 10px; border-radius:var(--r-card);
  outline:none; cursor:text;
}
#boardtitle:hover{ background:var(--bg-hover); }
#boardtitle.editing{
  background:var(--bg-chrome);
  box-shadow:inset 0 0 0 2px var(--line-focus);
  cursor:text; user-select:text; -webkit-user-select:text;
}
#ttRight{
  position:absolute; right:12px; top:0; height:100%;
  display:flex; align-items:center; gap:6px;
}
.tt-btn{
  display:flex; align-items:center; gap:6px;
  height:32px; padding:0 10px; border-radius:var(--r-tool);
  color:var(--text-primary);
}
.tt-btn:hover{ background:var(--bg-hover); }
.tt-caret{ font-size:10px; color:var(--text-secondary); }
#saveState{
  display:flex; align-items:center; gap:6px;
  padding:0 8px; color:var(--text-secondary); font-size:11px; white-space:nowrap;
}
#saveState .dot{ width:7px; height:7px; border-radius:50%; background:var(--text-secondary); }
#saveState.st-saved .dot{ background:var(--el-green-b); }
#saveState.st-pending .dot, #saveState.st-saving .dot{ background:var(--el-yellow-b); }
#saveState.st-error .dot{ background:var(--danger); }
#saveState.st-error{ color:var(--danger); }

/* ==========================================================================
   CHROME — Linker Chrome als Flex-Container (Phase 3f)
   Seitenleiste, Rail und Viewport sind Geschwister in EINEM Flex-Container
   unterhalb von Topbar und Titlebar. Oeffnet sich eine der beiden Leisten,
   ergibt sich die Verschiebung des Canvas aus dem Fluss — es wird nichts
   gerechnet und nichts an fixierten Elementen verschoben. Der Weg ueber
   Custom Properties (--sidebar-cur/--rail-cur an #rail und #viewport) ist in
   Phase 3e gescheitert; das Messprotokoll steht in PROJEKT-STATUS §4.4.
   Topbar und Titlebar bleiben fixiert und behalten 48 und 56 px.
   ========================================================================== */
#shell{
  position:fixed;
  top:calc(var(--topbar-h) + var(--titlebar-h));
  left:0; right:0; bottom:0;
  display:flex; align-items:stretch;
  overflow:hidden;
}
/* Beim Laden steht der Chrome sofort da, statt sich einzublenden: main.js
   setzt die Klasse erst, wenn die Oberflaeche steht. Ohne das faehrt eine
   gemerkt offene Seitenleiste bei jedem Reload sichtbar auf. */
body:not(.chrome-bereit) #sidebar,
body:not(.chrome-bereit) #rail{ transition:none; }

/* ==========================================================================
   CHROME — Left Rail (64px, im Inspector-Modus 200px)
   ========================================================================== */
/* Animiert wird die BREITE, nicht flex-basis: eine Transition zwischen einem
   festen Wert und einem flex-Kurzschreibweisenwert mit var() bleibt in Chrome
   am Ausgangswert stehen (in dieser Phase gemessen — die Leiste blieb bei
   0 px). flex-basis:auto laesst die Breite die Hauptachse bestimmen; die
   Kurzschreibweise traegt deshalb keinen var()-Wert mehr. */
#rail{
  position:relative;
  flex:0 0 auto;
  width:var(--rail-w);
  min-width:0;
  display:flex; flex-direction:column; align-items:center;
  padding:6px 0;
  background:var(--bg-chrome);
  border-right:1px solid var(--line-hairline);
  z-index:580;
  overflow-y:auto; overflow-x:hidden;
  transition:width var(--chrome-move) ease;
}
#rail.inspector{
  width:var(--rail-insp-w);
  align-items:stretch;
}
#railTools{
  display:flex; flex-direction:column; align-items:center;
  width:100%; flex:none;
}
#rail.inspector #railTools{ display:none; }
.rail-tool{
  width:100%; height:56px; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-primary);
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
.rail-tool:hover{ background:var(--bg-hover); }
.rail-tool .tool-icon{
  width:40px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-tool);
}
.rail-tool.active .tool-icon{ background:var(--bg-active); color:var(--text-inverse); }
.rail-tool .tool-label{ font-size:11px; color:var(--text-secondary); line-height:1; }
.rail-sep{
  width:40px; height:1px; flex:none;
  background:var(--line-hairline);
  margin:12px 0;
}
.rail-spacer{ flex:1; }
#toolTrash.drop-hot{ background:var(--danger-bg); }
#toolTrash.drop-hot .tool-icon{ color:var(--danger); }
#toolTrash.drop-hot .tool-label{ color:var(--danger); }

/* ==========================================================================
   CHROME — Kontext-Inspector (Rail-Zustand 2, 200px)
   ========================================================================== */
#inspector{
  width:100%; flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
}
.insp-head{
  display:flex; align-items:center; gap:6px;
  padding:10px 10px 10px 8px;
}
.insp-head .insp-title{
  font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#inspBack{
  width:28px; height:28px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-tool);
}
#inspBack:hover{ background:var(--bg-hover); }
#inspBack svg.ic{ width:18px; height:18px; }
.insp-section{
  border-top:1px solid var(--line-hairline);
  padding:12px;
}
.insp-label{
  font-size:11px; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:8px;
}
.swatch-grid{
  display:grid; grid-template-columns:repeat(4, 24px);
  gap:12px 14px;
  justify-content:start;
}
.swatch{
  width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line-card);
  cursor:pointer;
}
.swatch:hover{ transform:scale(1.1); }
.swatch.active{ outline:2px solid var(--line-focus); outline-offset:2px; }

/* Neunte Kachel: eigene Farbe. Sie sitzt bewusst allein in der dritten Zeile
   — die acht Token bleiben als 4x2-Block beisammen (ARCHITEKTUR-v2 §3), und
   der Picker liest sich als das, was er ist: die Ausnahme daneben. Ohne
   gewählte Farbe zeigt er das Stift-Symbol auf der Kartenfläche. */
.swatch-pick{
  grid-column:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card);
  color:var(--text-secondary);
  padding:0;
}
.swatch-pick svg.ic{ width:14px; height:14px; stroke-width:1.6; }
.swatch-pick.active svg.ic{ display:none; }

/* Popover des Color Pickers */
#colorPopover{ width:212px; padding:10px; }
#colorPopover .row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cp-native{
  flex:none; width:34px; height:28px; padding:0;
  border:1px solid var(--line-card); border-radius:var(--r-card);
  background:var(--bg-card); cursor:pointer;
}
.cp-hex{ flex:1; min-width:0; text-transform:uppercase; }
.cp-hex.invalid{ border-color:var(--danger); }
.insp-row{
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
}
.insp-row:last-child{ margin-bottom:0; }
.insp-row .row-text{ font-size:12.5px; }
.insp-num{
  width:64px; height:28px;
  border:1px solid var(--line-hairline); border-radius:var(--r-card);
  padding:0 8px; font:inherit; color:var(--text-primary);
  background:var(--bg-chrome); outline:none;
}
.insp-num:focus{ border-color:var(--line-focus); }
.insp-btn{
  display:flex; align-items:center; gap:8px;
  width:100%; height:32px; padding:0 8px;
  border-radius:var(--r-card);
  text-align:left; justify-content:flex-start;
}
.insp-btn:hover:not(:disabled){ background:var(--bg-hover); }
.insp-btn.danger{ color:var(--danger); }
.insp-btn.small{ width:auto; height:28px; font-size:12px; border:1px solid var(--line-hairline); }
.icon-row{ display:flex; gap:4px; flex-wrap:wrap; }
.icon-row .icon-btn{
  width:28px; height:28px;
  border:1px solid var(--line-hairline);
}
.icon-row .icon-btn svg.ic{ width:16px; height:16px; }
.icon-btn.on{ background:var(--bg-active); color:var(--text-inverse); border-color:var(--bg-active); }
.insp-level{ font-size:12px; font-weight:600; }

/* Inspector-Sektion "Text" */
.insp-format{ display:flex; gap:4px; flex-wrap:wrap; }
.insp-format .icon-btn{
  width:28px; height:28px;
  border:1px solid var(--line-hairline);
}
.insp-format .icon-btn svg.ic{ width:16px; height:16px; }
.insp-url{ width:100%; }
.insp-hint{ margin-top:8px; font-size:11px; color:var(--text-secondary); }
.insp-field{ margin-bottom:8px; }
/* Tinten-Swatches (Linie, Sketch): gefüllte Kreise ohne Rahmenfarbe */
.swatch.ink{ border-color:var(--line-hairline); }
.insp-caption{
  margin-bottom:3px;
  font-size:11px; color:var(--text-secondary);
}

/* ==========================================================================
   CHROME — Kurzmeldung (abgelehnte Uploads, Tray-Eingang)
   ========================================================================== */
#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  max-width:min(520px, calc(100vw - 32px));
  padding:10px 16px;
  background:var(--text-primary); color:var(--text-inverse);
  border-radius:var(--r-tool);
  box-shadow:var(--shadow-panel);
  font-size:12.5px; line-height:1.4;
  cursor:pointer;
  z-index:900;
}

/* ==========================================================================
   CHROME — Auswahl-Toolbar für Rich-Text
   ========================================================================== */
#textToolbar{
  position:fixed;
  background:var(--bg-chrome);
  border:1px solid var(--line-hairline);
  border-radius:6px;
  box-shadow:var(--shadow-panel);
  padding:4px;
  z-index:940;
}
#textToolbar .tt-row{ display:flex; gap:2px; }
#textToolbar .tt-b{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-card);
  color:var(--text-primary);
}
#textToolbar .tt-b:hover{ background:var(--bg-hover); }
#textToolbar .tt-b.on{ background:var(--bg-active); color:var(--text-inverse); }
#textToolbar .tt-b svg.ic{ width:16px; height:16px; }
/* Link-Popover (an der Auswahl bzw. am angeklickten Link) */
#linkPopover{
  position:fixed;
  background:var(--bg-chrome);
  border:1px solid var(--line-hairline);
  border-radius:6px;
  box-shadow:var(--shadow-panel);
  padding:8px;
  z-index:945;
}
#linkPopover .lp-url{
  width:240px; height:28px;
  border:1px solid var(--line-hairline); border-radius:var(--r-card);
  padding:0 8px; font:inherit; color:var(--text-primary);
  background:var(--bg-chrome); outline:none;
}
#linkPopover .lp-url:focus{ border-color:var(--line-focus); }
#linkPopover .lp-url.lp-bad{ border-color:var(--danger); }
#linkPopover .lp-actions{ display:flex; gap:4px; margin-top:6px; }
#linkPopover .lp-btn{
  height:26px; padding:0 8px;
  border:1px solid var(--line-hairline); border-radius:var(--r-card);
  font-size:12px;
}
#linkPopover .lp-btn:hover{ background:var(--bg-hover); }
#linkPopover .lp-remove{ color:var(--danger); }

/* ==========================================================================
   CHROME — Unsorted-Tray
   ========================================================================== */
#trayPill{
  position:absolute; top:12px; right:12px;
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 12px;
  background:var(--bg-chrome);
  border:1px solid var(--line-hairline);
  border-radius:15px;
  box-shadow:var(--shadow-card);
  font-size:12px; color:var(--text-secondary);
  z-index:520;
}
#trayPill:hover{ background:var(--bg-hover); }
#trayPill.has-items{ color:var(--text-primary); }
#trayPill.drop-hot{ border-color:var(--line-focus); color:var(--line-focus); }
#trayPanel{
  position:absolute; top:50px; right:12px; bottom:12px;
  width:280px;
  background:var(--bg-chrome);
  border:1px solid var(--line-hairline);
  border-radius:var(--r-column);
  box-shadow:var(--shadow-panel);
  z-index:530;
  display:flex; flex-direction:column;
}
#trayPanel.drop-hot{ border-color:var(--line-focus); }
#trayPanel .panel-head{
  padding:12px 14px; border-bottom:1px solid var(--line-hairline);
  font-weight:600;
}
#trayList{ flex:1; overflow-y:auto; padding:10px; }
.tray-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; margin-bottom:6px;
  background:var(--bg-card);
  border:1px solid var(--line-card);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  cursor:grab;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
.tray-item .ti-title{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tray-item .ti-type{ margin-left:auto; font-size:11px; color:var(--text-secondary); flex:none; }
.tray-empty{ padding:14px; font-size:12px; color:var(--text-secondary); }

/* ==========================================================================
   CHROME — Popover / Panels / Overlays
   ========================================================================== */
.popover{
  position:fixed;
  min-width:200px;
  background:var(--bg-chrome);
  border:1px solid var(--line-hairline);
  border-radius:6px;
  padding:4px;
  box-shadow:var(--shadow-panel);
  z-index:800;
}
.popover .item{
  display:flex; align-items:center; gap:10px;
  height:32px; padding:0 10px; border-radius:var(--r-card);
  cursor:pointer;
}
.popover .item:hover{ background:var(--bg-hover); }
.popover .item.disabled{ opacity:.35; cursor:default; }
.popover .item.disabled:hover{ background:transparent; }
.popover .item .kbd{
  margin-left:auto; font-size:11px; color:var(--text-secondary);
}
.popover .item svg.ic{ width:18px; height:18px; }
.popover .sep{ height:1px; background:var(--line-hairline); margin:4px 6px; }
.popover .pop-title{
  padding:8px 10px 4px; font-size:11px; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.05em;
}
.popover .row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:32px; padding:0 10px;
}
.popover .row .row-label{ display:flex; align-items:center; gap:8px; }
.popover .row.disabled{ opacity:.35; }
.popover .row .kbd{ font-size:11px; color:var(--text-secondary); }

/* Schalter */
.switch{
  width:32px; height:18px; border-radius:9px;
  background:var(--line-card);
  position:relative; flex:none;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg-chrome);
  transition:left .12s;
}
.switch.on{ background:var(--bg-active); }
.switch.on::after{ left:16px; }

#ctxmenu{ z-index:850; }

/* Trash-Panel */
#trashPanel{
  position:fixed;
  left:calc(var(--rail-w) + 8px); bottom:12px;
  width:300px; max-height:50vh;
  display:flex; flex-direction:column;
  z-index:820;
}
#trashList{ overflow-y:auto; padding:6px; }
.trash-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:var(--r-card);
}
.trash-item:hover{ background:var(--bg-hover); }
.trash-item .ti-title{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trash-item .kbd{ font-size:11px; color:var(--text-secondary); }
.trash-item .restore{
  margin-left:auto; flex:none;
  font-size:11px; color:var(--line-focus);
  padding:4px 6px; border-radius:var(--r-card);
}
.trash-item .restore:hover{ background:var(--bg-hover); }

/* Hilfe-Overlay */
/* ==========================================================================
   COMMAND-PALETTE (Phase 4c)
   ========================================================================== */
/* Oben statt mittig: die Liste waechst nach unten, und der Blick soll beim
   Tippen nicht mitwandern. */
#paletteOverlay{
  position:fixed; inset:0;
  background:var(--scrim);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:12vh;
  z-index:970;
}
#paletteCard{
  width:min(560px, 92vw);
  background:var(--bg-chrome);
  border-radius:var(--r-column);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
  display:flex; flex-direction:column;
}
#paletteInput{
  width:100%; height:48px;
  padding:0 16px;
  border:0; border-bottom:1px solid var(--line-hairline);
  font:inherit; font-size:15px; color:var(--text-primary);
  background:var(--bg-chrome); outline:none;
}
#paletteInput::placeholder{ color:var(--text-secondary); }
#paletteList{
  max-height:min(52vh, 420px); overflow-y:auto;
  padding:6px;
}
.pal-row{
  display:flex; align-items:center; gap:10px;
  height:34px; padding:0 10px;
  border-radius:var(--r-card);
  cursor:pointer;
}
.pal-row.aktiv{ background:var(--bg-active); color:var(--text-inverse); }
.pal-row.aus{ opacity:.4; cursor:default; }
.pal-label{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:13px;
}
/* Der Treffer der Fuzzy-Suche. Kein eigener Hintergrund — auf der aktiven
   Zeile laege er sonst auf Blau und waere schlechter zu lesen als ohne. */
.pal-label mark{
  background:none; color:inherit; font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.pal-zusatz{
  flex:0 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:11px; color:var(--text-secondary);
}
.pal-row.aktiv .pal-zusatz{ color:var(--text-inverse); opacity:.75; }
.pal-row.aktiv kbd{ border-color:var(--text-inverse); color:var(--text-inverse); }
.pal-leer{
  padding:14px 10px;
  font-size:13px; color:var(--text-secondary);
}

#helpOverlay, #askOverlay{
  position:fixed; inset:0;
  background:var(--scrim);
  display:flex; align-items:center; justify-content:center;
  z-index:950;
}
/* Die Rueckfrage liegt ueber der Hilfe: sie erwartet eine Entscheidung. */
#askOverlay{ z-index:960; }
#askCard{
  width:min(420px, 90vw);
  background:var(--bg-chrome);
  border-radius:var(--r-column);
  box-shadow:var(--shadow-panel);
  padding:20px 24px;
}
#askCard h2{
  font-family:var(--font-serif); font-size:18px; font-weight:600;
  margin-bottom:8px;
}
.ask-text{ font-size:12.5px; color:var(--text-secondary); margin-bottom:16px; }
.ask-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.ask-actions .insp-btn{ width:auto; flex:1 1 auto; min-width:104px; }
#helpCard{
  width:min(560px, 90vw); max-height:80vh; overflow-y:auto;
  background:var(--bg-chrome);
  border-radius:var(--r-column);
  box-shadow:var(--shadow-panel);
  padding:20px 24px;
}
#helpCard h2{
  font-family:var(--font-serif); font-size:20px; font-weight:600;
  margin-bottom:14px;
}
/* Gruppenueberschrift im Shortcut-Overlay (Phase 4c). Sie laeuft ueber beide
   Spalten, damit eine Gruppe nicht mitten in der Zeile anfaengt. */
.help-gruppe{
  grid-column:1 / -1;
  margin-top:14px; margin-bottom:2px;
  font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-secondary);
}
.help-gruppe:first-child{ margin-top:0; }
.help-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4px 24px;
}
.help-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--line-hairline);
  font-size:12.5px;
}
.help-row kbd{
  font-family:var(--font-ui); font-size:11px; color:var(--text-secondary);
  background:var(--bg-hover); border:1px solid var(--line-hairline);
  border-radius:4px; padding:2px 6px; white-space:nowrap;
}

/* Drag-Vorschau (Toolbar-Drag, Tray-Drag) */
#toolGhost{
  position:fixed;
  background:var(--ghost-bg);
  border:1px dashed var(--line-focus);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-drag);
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--text-secondary); font-size:12px;
  pointer-events:none;
  z-index:990;
}
#dragOverlay{
  position:fixed; pointer-events:none; z-index:985;
}
#dragOverlay line{ stroke:var(--text-primary); stroke-width:1.5; }

/* ==========================================================================
   SIDEBAR (Phase 3, Layout seit 3f) — Board-Baum, Favoriten, Papierkorb
   Sie ueberlagert den Canvas nicht mehr, sondern liegt als aeusserstes Kind
   im Flex-Container: Seitenleiste — Rail/Inspector — Canvas. Der Canvas
   rueckt beim Oeffnen ein, statt ueberdeckt zu werden. Das gecachte
   Viewport-Rechteck wird waehrend des Uebergangs mitgefuehrt
   (render/viewport.js, chromeUebergang()).
   ========================================================================== */
#sidebar{
  position:relative;
  flex:0 0 auto;
  width:var(--sidebar-w);
  /* min-width:auto haette den Inhalt als Mindestbreite durchgesetzt und das
     Zusammenfahren verhindert, sobald der Baum gerendert ist. */
  min-width:0;
  background:var(--bg-chrome);
  border-right:1px solid var(--line-hairline);
  overflow-y:auto; overscroll-behavior:contain;
  z-index:560;
  padding-bottom:12px;
  transition:width var(--chrome-move) ease, visibility 0s;
}
/* Zugeklappt bleibt sie im Fluss und faehrt auf 0 zusammen — mit display:none
   gaebe es keinen Uebergang. Dieselbe Bauweise wie bei #selbox[hidden].
   Der Inhalt behaelt dabei seine Breite (.sb-section unten), damit er
   waehrend der 120 ms nicht umbricht. */
#sidebar[hidden]{
  display:block !important;
  width:0;
  overflow:hidden;
  border-right-width:0;
  /* visibility erst NACH dem Zusammenfahren: waehrend der Bewegung soll der
     Inhalt noch zu sehen sein, danach faengt die Leiste keinen Tabstopp mehr
     ab. Beim Oeffnen greift die Regel oben ohne Verzoegerung. */
  visibility:hidden;
  transition-delay:0s, var(--chrome-move);
}
#btnSidebar.active{ background:var(--bg-active); color:var(--text-inverse); }

.sb-section{
  border-bottom:1px solid var(--line-hairline); padding-bottom:6px;
  /* Feste Breite, damit der Inhalt beim Zusammenfahren nicht umbricht */
  width:var(--sidebar-w);
}
.sb-section:last-child{ border-bottom:0; }
.sb-head{
  display:flex; align-items:center; gap:6px;
  width:100%; height:34px; padding:0 8px;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-secondary);
}
.sb-head:hover{ background:var(--bg-hover); }
.sb-head-t{ flex:1; text-align:left; }

.sb-row{
  display:flex; align-items:center; gap:6px;
  height:30px; padding-right:6px;
  cursor:pointer; border-radius:var(--r-card);
  position:relative;
}
.sb-row:hover{ background:var(--bg-hover); }
.sb-row.current{ background:var(--bg-hover); }
.sb-row.current .sb-title{ font-weight:600; }
.sb-title{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px;
}
.sb-square{
  width:12px; height:12px; flex:none;
  border-radius:2px; border:1px solid var(--line-card);
}
.sb-count{
  font-size:10.5px; color:var(--text-secondary);
  padding:0 4px; border-radius:8px; background:var(--bg-hover);
  flex:none;
}
.sb-row:hover .sb-count{ background:var(--bg-card); }

/* Chevron dreht sich statt zwei Icons zu tauschen */
.sb-chev{
  width:18px; height:18px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  transition:transform 120ms ease;
}
.sb-chev svg.ic{ width:14px; height:14px; }
.sb-chev.open{ transform:rotate(90deg); }
.sb-chev.leer{ visibility:hidden; }

/* Stern und Löschen erscheinen erst beim Überfahren — sonst rauscht die
   Liste. Ein gesetzter Favorit bleibt immer sichtbar. */
.sb-star, .sb-del{
  width:22px; height:22px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); border-radius:var(--r-card);
  opacity:0;
}
.sb-star svg.ic, .sb-del svg.ic{ width:15px; height:15px; }
.sb-row:hover .sb-star, .sb-row:hover .sb-del{ opacity:1; }
.sb-star.on{ opacity:1; color:var(--el-yellow-b); }
.sb-star.on svg.ic{ fill:var(--el-yellow); }
.sb-star:hover, .sb-del:hover{ background:var(--bg-card); color:var(--text-primary); }
.sb-del:hover{ color:var(--danger); }

/* Umhängen per Drag */
body.sb-dragging{ cursor:grabbing; }
body.sb-dragging .sb-row{ cursor:grabbing; }
.sb-row.drop-ok{ box-shadow:inset 0 0 0 2px var(--line-focus); }
.sb-row.drop-nope{ box-shadow:inset 0 0 0 2px var(--danger); }

.sb-empty{
  padding:6px 10px 8px 30px;
  font-size:11.5px; color:var(--text-secondary);
}

/* Papierkorb-Einträge: zwei Zeilen, zwei Knöpfe */
.sb-trash{
  display:flex; align-items:center; gap:6px;
  padding:5px 6px 5px 8px;
  border-radius:var(--r-card);
}
.sb-trash:hover{ background:var(--bg-hover); }
.sb-tmeta{ flex:1; min-width:0; }
.sb-tmeta .sb-title{ display:block; }
.sb-sub{
  font-size:10.5px; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Nur noch „Zurück": endgültiges Löschen gibt es seit 6d-0 nicht mehr
   (Variante E1, PROJEKT-STATUS §5). Die Klasse .sb-purge und ihre vier
   Zustände sind mit dem Knopf entfallen. */
.sb-restore{
  flex:none; height:22px; padding:0 7px;
  font-size:11px; border-radius:var(--r-card);
  border:1px solid var(--line-hairline);
  background:var(--bg-card);
}
.sb-restore:hover{ background:var(--bg-hover); }

/* ==========================================================================
   SUCH-PANEL (Phase 3)
   ========================================================================== */
#searchWrap{ position:relative; }
#searchPanel{
  position:absolute; top:calc(100% + 8px); right:0;
  width:380px; max-height:min(60vh, 460px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg-chrome);
  border:1px solid var(--line-hairline);
  border-radius:var(--r-column);
  box-shadow:var(--shadow-panel);
  z-index:900;
  padding:4px;
}
.sr-head{
  padding:6px 8px 4px;
  font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-secondary);
}
.sr-empty{ padding:12px 10px; font-size:12.5px; color:var(--text-secondary); }
.sr-item{
  padding:6px 8px; border-radius:var(--r-card); cursor:pointer;
}
.sr-item:hover, .sr-item.active{ background:var(--bg-hover); }
.sr-line{ display:flex; align-items:baseline; gap:8px; }
.sr-kind{
  flex:none; font-size:10.5px; color:var(--text-secondary);
  padding:1px 5px; border-radius:8px; background:var(--bg-hover);
}
.sr-item:hover .sr-kind, .sr-item.active .sr-kind{ background:var(--bg-card); }
.sr-text{
  flex:1; min-width:0; font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-path{
  margin-top:2px; font-size:10.5px; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- Doppelte Board-Karten (Phase 3e) ---------- */
.insp-warn{ color:var(--warn-ink); }

/* ==========================================================================
   Server-Sync: Zustandsanzeige und Konflikt-Log (Phase 6b)
   ========================================================================== */

/* Der Zustand "Konflikt" ist ein Klickziel. Nur dann — sonst waere ein
   Zeigefinger ueber einer reinen Anzeige ein Versprechen ohne Einloesung. */
#saveState.klickbar{ cursor:pointer; }
#saveState.klickbar:hover{ text-decoration:underline; }

/* Zusatzzeile unter einem Schalter im Einstellungs-Panel: der Zustand im
   Klartext. In der Titlebar ist nur Platz fuer ein Wort. */
.row-info{
  padding:0 12px 8px; margin-top:-4px;
  font-size:11px; color:var(--text-secondary); line-height:1.4;
}

#konfliktPanel{
  position:fixed; right:16px; top:112px; width:360px; max-height:70vh;
  display:none; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--line-card);
  border-radius:var(--r-tool); box-shadow:var(--shadow-panel);
  z-index:60;
}
#konfliktPanel.offen{ display:flex; }

#konfliktKopf{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line-hairline);
}
#konfliktTitel{ flex:1; font-size:13px; font-weight:600; }

#konfliktHinweis{
  padding:8px 12px; font-size:11px; line-height:1.45;
  color:var(--text-secondary); border-bottom:1px solid var(--line-hairline);
}

/* Die Liste scrollt, der Kopf bleibt: ein langes Log darf den Weg zum
   Schliessen nicht aus dem Bild schieben. */
#konfliktListe{ overflow-y:auto; flex:1; }

.kf-eintrag{ padding:10px 12px; border-bottom:1px solid var(--line-hairline); }
.kf-eintrag:last-child{ border-bottom:none; }
.kf-kopf{ font-size:12px; font-weight:600; margin-bottom:2px; }
.kf-zeit{ font-size:11px; color:var(--text-secondary); }
.kf-diff{ font-size:11px; color:var(--text-secondary); margin-top:3px; }
.kf-leer{ padding:16px 12px; font-size:12px; color:var(--text-secondary); }

.kf-knoepfe{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.kf-btn{
  font:inherit; font-size:11px; padding:4px 8px; cursor:pointer;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--line-card); border-radius:var(--r-card);
}
.kf-btn:hover{ background:var(--bg-hover); }
.kf-btn:disabled{ opacity:.5; cursor:default; }
.kf-primaer{ background:var(--bg-active); color:var(--text-inverse); border-color:var(--bg-active); }
.kf-primaer:hover{ opacity:.9; background:var(--bg-active); }

.kf-x{
  font:inherit; font-size:18px; line-height:1; cursor:pointer;
  background:none; border:none; color:var(--text-secondary); padding:0 2px;
}
.kf-x:hover{ color:var(--text-primary); }

/* ==========================================================================
   Login-Dialog (Phase 6c)
   ========================================================================== */

/* Ueber der Rueckfrage (960) und ueber der Hilfe (950): Ohne Anmeldung ruht
   der Sync, und das ist die vorrangige Aussage. */
#loginOverlay{
  position:fixed; inset:0;
  background:var(--scrim);
  display:flex; align-items:center; justify-content:center;
  z-index:970;
}
#loginOverlay[hidden]{ display:none; }

#loginCard{
  width:min(380px, 90vw);
  background:var(--bg-chrome);
  border-radius:var(--r-column);
  box-shadow:var(--shadow-panel);
  padding:20px 24px;
}
#loginCard h2{
  font-family:var(--font-serif); font-size:18px; font-weight:600;
  margin-bottom:8px;
}
.login-text{ font-size:12.5px; color:var(--text-secondary); margin-bottom:16px; line-height:1.45; }

#loginPasswort{
  width:100%; box-sizing:border-box;
  font:inherit; font-size:13px; padding:8px 10px;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--line-card); border-radius:var(--r-card);
}
#loginPasswort:focus{ outline:none; border-color:var(--line-focus); }
#loginPasswort:disabled{ opacity:.6; }

.login-fehler{
  margin-top:10px; font-size:12px; line-height:1.4;
  color:var(--danger);
}
/* Die Ratenbegrenzung ist kein Fehler des Nutzers, sondern eine Wartezeit —
   sie wird gewarnt, nicht angeklagt. Ausgewertet wird sie in 6c-2. */
.login-fehler.warnung{ color:var(--text-primary); }

.login-actions{ display:flex; gap:8px; margin-top:14px; }
.login-actions .insp-btn{ width:auto; flex:1 1 auto; }

.login-hinweis{
  margin-top:14px; font-size:11px; color:var(--text-secondary); line-height:1.4;
}

/* ---------- Zustand „Nicht angemeldet" in der Titlebar ----------

   Eigene Klasse, ausdruecklich NICHT st-pending wie „Offline". Die beiden
   sahen bis Phase 6c gleich aus — gleicher Punkt, gleiche Farbe, nur anderer
   Text. Der Unterschied ist aber nicht kosmetisch, sondern der wichtigste im
   ganzen Zustandssatz:

     „Nicht angemeldet"  fordert zum Handeln auf und ist ein Klickziel.
     „Offline"           fordert zu gar nichts auf und nennt nur, wann
                         zuletzt etwas ankam.

   Wer beide gleich aussehen laesst, bringt den Nutzer dazu, auf eine
   Verbindung zu warten, die laengst steht. */
#saveState.st-auth{ color:var(--line-focus); font-weight:600; }
#saveState.st-auth .dot{ background:var(--line-focus); }
#saveState.st-auth:hover{ text-decoration:underline; }