/* newk. Instrument look: dark chrome, cool light canvas; brand rules in docs/brand/BRAND.md. */
:root {
  /* newk "instrument" look: cool neutral grays, hairlines instead of shadows, one orange accent, teal for ok */
  --orange: #e2681c; --orange-400: #ea7a2c; --orange-600: #c8560e; --orange-700: #a3460b; --orange-50: #fbefe6;
  --teal: #3cc2a8; --teal-600: #1f7a6a;
  --ok: #1f9e86; --warn: #c99a1c; --blue: #4f7fc0; --violet: #7c6fe0; --rec: #e0402f;
  --sand: #9a9ea4; --sand-50: #eceef0; --sand-100: #d7d9db;
  --silver: #b4b7bc; --silver-500: #80848b; --silver-700: #4a4d54; --silver-800: #2e3036;
  --black-950: #0e0f11; --black-900: #131417; --black-800: #1a1b1f; --black-700: #24262b;
  --text: #f3f2ee; --muted: #a3a7ad; --line: #2c2e34;
  /* Board surface (switches with the theme) */
  --ink: #101214; --ink-faint: rgba(16, 18, 20, .35); --canvas: #e4e5e7; --canvas-dot: #c3c6ca;
  --el-bg: #f3f4f5; --el-border: #c4c7cc; --el-head: #eceef0; --el-line: #d9dbde; --el-hover: #e8eaec; --el-muted: #53585d;
  --el-chip: #dcdee1; --cb-border: #a3a7ad; --drop-bg: rgba(228, 229, 231, .85);
  --danger: #e0402f; --key: #101214; --key-ink: #f3f2ee;
  --radius: 4px;
  --shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--black-900); color: var(--text); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--orange-400); }
code, kbd, pre { font-family: var(--mono); font-size: 12px; }
code { background: var(--black-700); padding: 2px 6px; border-radius: 3px; color: var(--silver); word-break: break-all; }
pre { background: var(--black-950); border: 1px solid var(--line); padding: 10px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; }
kbd { background: var(--black-700); border: 1px solid var(--line); border-bottom-width: 2px; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
[hidden] { display: none !important; }

/* Dark board: explicit choice, or the system setting when nothing is chosen */
:root[data-theme="dark"] { --ink: #f3f2ee; --ink-faint: rgba(243, 242, 238, .35); --canvas: #16171a; --canvas-dot: #2b2d32;
  --el-bg: #1c1d21; --el-border: #36383e; --el-head: #212226; --el-line: #2c2e33; --el-hover: #26282c; --el-muted: #a3a7ad;
  --el-chip: #2e3036; --cb-border: #5b5f66; --drop-bg: rgba(22, 23, 26, .85); --key: #f3f2ee; --key-ink: #131417; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #f3f2ee; --ink-faint: rgba(243, 242, 238, .35); --canvas: #16171a; --canvas-dot: #2b2d32;
  --el-bg: #1c1d21; --el-border: #36383e; --el-head: #212226; --el-line: #2c2e33; --el-hover: #26282c; --el-muted: #a3a7ad;
  --el-chip: #2e3036; --cb-border: #5b5f66; --drop-bg: rgba(22, 23, 26, .85); --key: #f3f2ee; --key-ink: #131417; } }

/* On a light board, the windows that open over it (block editors, settings, popovers) are light as well: the chrome
   tokens are swapped for light ones inside them (and the text colour, which would otherwise stay the light one of the dark page).
   The bars around the board stay dark. */
:root[data-theme="light"] .page-board :is(.modal, .popover) { --black-950: #ffffff; --black-900: #eceef0; --black-800: #f3f4f5; --black-700: #e2e4e7; --line: #d0d3d7;
  --text: #101214; --muted: #5b6067; --silver: #4a4d54; --silver-500: #80848b; --silver-700: #b4b7bc; --silver-800: #d7d9dc;
  --sand: #6f7379; --sand-50: #e4e6e8; --sand-100: #c9ccd0;
  --shadow: 0 0 0 1px rgba(16, 18, 20, .12), 0 8px 24px rgba(16, 18, 20, .14); color-scheme: light; color: var(--text); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .page-board :is(.modal, .popover) { --black-950: #ffffff; --black-900: #eceef0; --black-800: #f3f4f5; --black-700: #e2e4e7; --line: #d0d3d7;
  --text: #101214; --muted: #5b6067; --silver: #4a4d54; --silver-500: #80848b; --silver-700: #b4b7bc; --silver-800: #d7d9dc;
  --sand: #6f7379; --sand-50: #e4e6e8; --sand-100: #c9ccd0;
  --shadow: 0 0 0 1px rgba(16, 18, 20, .12), 0 8px 24px rgba(16, 18, 20, .14); color-scheme: light; color: var(--text); } }

/* …and red warning text and the orange block badge, both made pale for the dark chrome */
:root[data-theme="light"] .page-board :is(.modal, .popover) :is(.danger, .form-error) { color: var(--rec); }
:root[data-theme="light"] .page-board .modal .pw-badge { color: var(--orange-700); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .page-board :is(.modal, .popover) :is(.danger, .form-error) { color: var(--rec); }
  :root:not([data-theme="dark"]) .page-board .modal .pw-badge { color: var(--orange-700); } }

/* Buttons & inputs */
.btn { font: 500 13px var(--cond); letter-spacing: .2px; border: 1px solid transparent; border-radius: 4px; padding: 7px 14px; cursor: pointer; color: var(--text); background: var(--black-700); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--silver-800); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-600); }
.btn-primary:active { background: var(--orange-700); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost.danger, .danger { color: #ff8a7a; }
.icon-btn { background: transparent; border: 0; color: var(--text); width: 32px; height: 32px; border-radius: 4px; cursor: pointer; font: 500 16px var(--font); }
.icon-btn:hover { background: var(--black-700); }
input, select, textarea { font: 400 14px var(--font); color: var(--text); background: var(--black-950); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 500; }
label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.pill { font: 500 10.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: var(--black-700); color: var(--silver); white-space: nowrap; }
.pill-orange { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange-400); }
.pill-muted { color: var(--muted); }
.eyebrow { margin: 0; font: 500 11px var(--mono); letter-spacing: 3px; text-transform: uppercase; color: var(--sand); }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* Top bar */
.topbar { height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--black-900); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
/* Header: newk logo | company workspace | board title, each level a step quieter. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand img { display: block; }
.brand-mark { height: 30px; }
.brand-word { height: 34px; margin-bottom: 4px; }
.topbar-sep { width: 1px; height: 24px; background: var(--silver-700); flex-shrink: 0; }
.workspace { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.workspace strong { font: 600 14px var(--font); color: var(--text); }
.workspace span { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.topbar-center { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-center:not(:empty)::before { content: ""; width: 1px; height: 24px; background: var(--silver-700); flex-shrink: 0; margin-right: 6px; }
.topbar-right, .topbar-extra { display: flex; align-items: center; gap: 10px; }
.board-title { font: 500 14px var(--font); background: transparent; border: 1px solid transparent; color: var(--text); padding: 4px 8px; min-width: 0; width: min(420px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input.board-title:hover { border-color: var(--line); }
input.board-title { width: min(320px, 100%); flex-shrink: 1; }
.topbar-center .board-title { min-width: 140px; }  /* the board name stays readable; the description gives way first */
.board-desc { font: 400 13px var(--font); background: transparent; border: 1px solid transparent; color: var(--muted); padding: 4px 8px; min-width: 0; flex: 0 1 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; }
.board-desc.static { flex: 0 1 auto; max-width: 460px; }
input.board-desc:hover, input.board-desc:focus { border-color: var(--line); color: var(--text); }
input.board-desc::placeholder { color: var(--muted); opacity: .7; }
@media (max-width: 900px) { .board-desc { display: none; } }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; font: 600 14px var(--font); cursor: pointer; }
.menu { position: relative; }
.menu-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--black-800); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 100; }
.menu.open .menu-panel { display: block; }
.menu-panel a, .menu-panel button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 3px; color: var(--text); text-decoration: none; background: none; border: 0; font: 400 13px var(--font); cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--black-700); }
.menu-panel form { margin: 0; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; }
.menu-head small { color: var(--muted); }
.presence { display: flex; }
.presence-av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 2px solid var(--black-900); margin-left: -6px; }
.presence-more { font-size: 12px; color: var(--muted); margin-left: 6px; align-self: center; }

/* Pages */
.page { max-width: 1120px; margin: 0 auto; padding: 32px 16px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { margin: 4px 0 0; font-size: 28px; font-weight: 700; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.board-tile { display: flex; flex-direction: column; background: var(--black-800); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.board-tile:hover { border-color: var(--orange); transform: translateY(-2px); }
.board-tile-art { height: 120px; background: var(--canvas) radial-gradient(var(--canvas-dot) 1.2px, transparent 1.2px) 0 0 / 18px 18px; display: grid; place-items: center; }
.board-tile-art img { width: 56px; opacity: .9; }
.board-tile-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.board-tile-body strong { font-size: 15px; }
.board-tile-body small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board-tile-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.board-tile-meta .pill { margin-left: auto; }
.live { color: var(--ok); }
.empty { grid-column: 1 / -1; padding: 48px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.panel { background: var(--black-800); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; overflow-x: auto; }
.panel h2 { margin: 0; font-size: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.data-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--sand); padding: 8px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table td.actions { text-align: right; white-space: nowrap; }
.data-table td.actions .btn { padding: 4px 10px; font-size: 12px; }
.data-table.keys td:first-child { width: 220px; }

/* Login */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px;
  background: var(--black-900); }
.login-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; background: var(--black-800); border: 1px solid var(--line); border-radius: 4px; padding: 32px; box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand img { height: 44px; display: block; }
.login-card h1 { margin: -6px 0 4px; font-size: 26px; }
.login-card .btn { justify-content: center; padding: 10px; margin-top: 4px; }
.form-error { margin: 0; color: #ff8a7a; font-size: 13px; }
.hint { margin: 0; font-size: 12px; color: var(--muted); }

/* Modals, popovers, toasts */
.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 11, .6); display: grid; place-items: center; z-index: 1000; padding: 16px; }
.modal { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--black-800); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.modal-wide { width: min(640px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-body { padding: 16px 20px 20px; }
.modal-body p { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.secret { background: var(--black-950); border: 1px solid var(--orange); border-radius: 4px; padding: 12px; }
.secret code { background: none; font-size: 15px; color: var(--text); }
.share-form { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 8px; }
@media (max-width: 640px) { .share-form { grid-template-columns: 1fr; } }
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 2000; pointer-events: none; }
.toast { background: var(--black-700); border: 1px solid var(--line); color: var(--text); padding: 10px 16px; border-radius: 4px; box-shadow: var(--shadow); font-size: 13px; transition: opacity .4s; }
.toast-error { border-color: var(--danger); }
.toast.out { opacity: 0; }
.popover { position: fixed; z-index: 1500; width: 260px; background: var(--black-800); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.popover input, .popover select, .popover textarea { width: 100%; padding: 6px 8px; font-size: 13px; }
.popover button { font: 500 12px var(--font); background: var(--black-700); color: var(--text); border: 0; border-radius: 3px; padding: 6px 8px; cursor: pointer; }
.popover button:hover { background: var(--silver-800); }
.popover button.ghost { background: transparent; color: var(--muted); }
.pop-row { display: flex; gap: 6px; }
.pop-row button { flex: 1; }
.opt-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.opt-list button { text-align: left; background: transparent; }
.opt-list button.on { background: var(--black-700); }

/* ------------------------------------------------------------------ Board */
.page-board { overflow: hidden; }
.page-board .topbar { position: fixed; top: 0; left: 0; right: 0; }
.viewport { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background-color: var(--canvas); color: var(--ink); --zoom: 1; --bg-strength: 1;
  background-image: radial-gradient(color-mix(in srgb, var(--canvas-dot) calc(var(--bg-strength) * 100%), transparent) 1.2px, transparent 1.2px); }
.viewport.tool-hand, .viewport.space { cursor: grab; }
.viewport.panning { cursor: grabbing; }
.viewport.tool-pen { cursor: crosshair; }
.viewport.tool-eraser { cursor: cell; }
.viewport.tool-card, .viewport.tool-text, .viewport.tool-table, .viewport.tool-comment, .viewport.tool-connect { cursor: copy; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.layer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
/* Arrows sit inside #nodes between frames (z + 1) and everything else (z + 1000000), so a frame never covers them */
#links-layer { z-index: 500000; }
#bend-svg { z-index: 1999999999; }  /* handles of the selected arrow, above every block */
#nodes { position: relative; z-index: 1; }
#ink-layer { z-index: 2; }
/* above everything else on the board (docking points, badges, other blocks' grips): the selected element's handles win */
#selection-frame { position: absolute; z-index: 2000000002; pointer-events: none; outline: calc(2px / var(--zoom)) solid var(--orange); outline-offset: calc(4px / var(--zoom)); border-radius: 3px; }
#selection-frame .handle { display: none; position: absolute; z-index: 2; pointer-events: auto; --hs: calc(12px / var(--zoom)); --off: calc(-6px / var(--zoom)); }
/* corners: visible squares; edges: invisible strips along the whole border */
#selection-frame .h-nw, #selection-frame .h-ne, #selection-frame .h-sw, #selection-frame .h-se { width: var(--hs); height: var(--hs); background: var(--el-bg);
  border: calc(2px / var(--zoom)) solid var(--orange); border-radius: 3px; z-index: 3; }
#selection-frame .h-nw { left: calc(var(--off) - 4px / var(--zoom)); top: calc(var(--off) - 4px / var(--zoom)); cursor: nwse-resize; }
#selection-frame .h-ne { right: calc(var(--off) - 4px / var(--zoom)); top: calc(var(--off) - 4px / var(--zoom)); cursor: nesw-resize; }
#selection-frame .h-sw { left: calc(var(--off) - 4px / var(--zoom)); bottom: calc(var(--off) - 4px / var(--zoom)); cursor: nesw-resize; }
#selection-frame .h-se { right: calc(var(--off) - 4px / var(--zoom)); bottom: calc(var(--off) - 4px / var(--zoom)); cursor: nwse-resize; }
#selection-frame .h-n, #selection-frame .h-s { left: 0; right: 0; height: var(--hs); cursor: ns-resize; }
#selection-frame .h-e, #selection-frame .h-w { top: 0; bottom: 0; width: var(--hs); cursor: ew-resize; }
#selection-frame .h-n { top: calc(var(--off) - 4px / var(--zoom)); }
#selection-frame .h-s { bottom: calc(var(--off) - 4px / var(--zoom)); }
#selection-frame .h-w { left: calc(var(--off) - 4px / var(--zoom)); }
#selection-frame .h-e { right: calc(var(--off) - 4px / var(--zoom)); }
#selection-frame.no-vresize .h-n, #selection-frame.no-vresize .h-s { display: none !important; }
#selection-frame.resizable .handle { display: block; }
#anchors { position: absolute; left: 0; top: 0; z-index: 4; }
.anchor { position: absolute; width: calc(14px / var(--zoom)); height: calc(14px / var(--zoom)); margin: calc(-7px / var(--zoom)) 0 0 calc(-7px / var(--zoom));
  border-radius: 50%; background: var(--el-bg); border: calc(2px / var(--zoom)) solid var(--orange); cursor: crosshair; pointer-events: auto;
  box-shadow: none; transition: transform .1s, background .1s; }
.anchor:hover { background: var(--orange); transform: scale(1.35); }
#marquee { position: absolute; border: 1px solid var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); pointer-events: none; z-index: 5; }
#drop-hint { position: absolute; inset: 16px; border: 3px dashed var(--orange); border-radius: 4px; display: grid; place-items: center; font-size: 20px; font-weight: 600; color: var(--orange); background: var(--drop-bg); pointer-events: none; z-index: 6; }
#cursors { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.cursor { position: absolute; left: 0; top: 0; transition: transform .08s linear; }
.cursor span { position: absolute; left: 14px; top: 14px; color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }

/* Toolbar, context bar, zoom */
#toolbar { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--black-900); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.tool { width: 40px; height: 40px; border: 0; border-radius: 4px; background: transparent; color: var(--text); font: 500 17px var(--font); cursor: pointer; display: grid; place-items: center; }
.tool:hover { background: var(--black-700); }
.tool.on { background: var(--orange); color: #fff; }
.tool-sep { height: 1px; background: var(--line); margin: 4px 6px; }
#contextbar { position: fixed; z-index: 45; display: flex; align-items: center; gap: 4px; padding: 5px; background: var(--black-900); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); white-space: nowrap; }
#contextbar button, #contextbar .ctx-link { font: 500 13px var(--font); color: var(--text); background: transparent; border: 0; border-radius: 3px; padding: 5px 9px; cursor: pointer; text-decoration: none; }
#contextbar button:hover, #contextbar .ctx-link:hover { background: var(--black-700); }
#contextbar button.on { background: var(--black-700); color: var(--orange-400); }
#contextbar .swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--black-900); box-shadow: 0 0 0 1px var(--line); }
#contextbar .swatch.on { box-shadow: 0 0 0 2px var(--orange); }
#contextbar .width-btn { width: 32px; display: grid; place-items: center; }
#contextbar .width-btn i { display: block; width: 18px; background: var(--text); border-radius: 3px; }
#contextbar .fade-key { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
#contextbar .fade-secs { width: 96px; accent-color: var(--orange); }
.fade-ink { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: opacity 1.2s ease-out; }
.fade-ink.going { opacity: 0; }
.ctx-val { font-size: 12px; color: var(--muted); min-width: 22px; text-align: center; }
.sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
#zoombar { position: fixed; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--black-900); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.zoom-label { background: none; border: 0; color: var(--text); font: 500 12px var(--font); width: 52px; cursor: pointer; }
#conn-status { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--orange); color: #fff; padding: 6px 14px; border-radius: 3px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); }

/* Elements */
.el { position: absolute; font-family: var(--font); color: var(--ink); }
.el.selected { z-index: auto; }
.el.connect-target { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 3px; }
[data-edit] { outline: none; white-space: pre-wrap; word-break: break-word; }
.is-editing { cursor: text; user-select: text; -webkit-user-select: text; }

.el-card { color: #101214; padding: 14px; border-radius: 3px; box-shadow: none; border: 1px solid rgba(16, 18, 20, .14); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-text { width: 100%; max-height: 100%; text-align: center; line-height: 1.3; font-weight: 500; }
.card-text:empty::before { content: "Doppelklick zum Schreiben"; color: var(--ink-faint); font-weight: 400; font-size: 13px; }

.el-text { padding: 4px 6px; }
.text-body { line-height: 1.35; min-height: 1.35em; }
.text-body:empty::before { content: "Text"; color: var(--ink-faint); }

.el-comment { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; padding: 8px 10px; box-shadow: none; font-size: 13px; }
.el-comment.resolved { opacity: .55; border-left-color: var(--silver-500); }
.cmt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; }
.cmt-av { width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.cmt-resolve { margin-left: auto; border: 0; background: var(--el-chip); border-radius: 3px; cursor: pointer; font-size: 12px; padding: 1px 7px; color: var(--ink); }
.cmt-text:empty::before { content: "Kommentar schreiben …"; color: var(--ink-faint); }

.el-link, .el-file { background: var(--el-bg); border-radius: 4px; box-shadow: none; overflow: hidden; border: 1px solid var(--el-border); }
.link-card, .file-card { display: flex; gap: 12px; padding: 14px; align-items: flex-start; }
.link-fav, .file-icon { width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--orange); font-size: 16px; }
.file-icon { background: var(--black-700); font-size: 10px; letter-spacing: .5px; }
.link-main, .file-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.link-main strong, .file-main strong { font-size: 14px; line-height: 1.3; word-break: break-word; }
.link-main a { font-size: 12px; color: var(--el-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-main a:hover { color: var(--orange); }
.link-main p { margin: 6px 0 0; font-size: 12px; color: var(--el-muted); white-space: pre-wrap; }
.file-main small { color: var(--el-muted); font-size: 12px; }
.file-main audio { width: 100%; margin-top: 6px; height: 32px; }
.mini-btn { font-size: 12px; font-weight: 600; color: var(--orange); text-decoration: none; padding: 4px 8px; border-radius: 3px; background: var(--orange-50); white-space: nowrap; align-self: center; }
.el-file[data-kind="image"] { background: transparent; border: 0; border-radius: 3px; }
.el-file img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.is-embed, .el-file[data-kind="video"] { display: flex; flex-direction: column; background: var(--black-900); border-color: var(--black-700); }
.el-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--text); font-size: 12px; font-weight: 500; cursor: move; flex-shrink: 0; }
.bar-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-open { color: var(--silver); text-decoration: none; }
.embed { position: relative; flex: 1; min-height: 0; }
.embed iframe, .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.shield { position: absolute; inset: 0; }
.el.selected .shield { display: none; }
body.dragging iframe, body.dragging video, body.dragging audio { pointer-events: none; }

/* Tables (Datenbanken) */
.el-table { background: var(--el-bg); border-radius: 4px; border: 1px solid var(--el-border); box-shadow: none; font-size: 13px; width: max-content; min-width: 240px; }
.tbl-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--el-line); cursor: move; }
.tbl-grip { color: var(--el-muted); letter-spacing: -3px; font-size: 12px; }
.tbl-title { font-size: 15px; font-weight: 600; flex: 1; min-width: 60px; }
.tbl-title .ph { color: var(--ink-faint); }
.tbl-count { font-size: 11px; color: var(--el-muted); }
.tbl-scroll { overflow-x: auto; }
.el-table table { border-collapse: collapse; table-layout: fixed; }
.el-table th { text-align: left; font-weight: 500; color: var(--el-muted); font-size: 12px; padding: 7px 10px; border-bottom: 1px solid var(--el-line); border-right: 1px solid var(--el-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--el-head); }
.el-table:not(.readonly) th[data-col] { cursor: pointer; }
.el-table:not(.readonly) th[data-col]:hover { background: var(--el-chip); }
.col-type { color: var(--silver-500); margin-right: 6px; font-size: 11px; }
.el-table th.add-col { text-align: center; cursor: pointer; color: var(--silver-500); font-size: 16px; padding: 4px; }
.el-table th.add-col:hover { color: var(--orange); }
.el-table td { padding: 6px 10px; border-bottom: 1px solid var(--el-line); border-right: 1px solid var(--el-line); vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; word-break: break-word; height: 34px; }
.el-table:not(.readonly) td[data-col] { cursor: text; }
/* boxes are clicked, not typed into */
.el-table:not(.readonly) td.t-checkbox[data-col], .el-table td.t-checkbox *, .el-table td.row-check, .el-table td.row-check input, .el-table th input[type=checkbox], .el-table:not(.readonly) td.t-button[data-col], .el-table td.t-button * { cursor: pointer; }
.el-table:not(.readonly) td[data-col]:hover { background: var(--el-hover); }
.el-table td.t-number { text-align: right; font-variant-numeric: tabular-nums; }
.el-table td.editing { padding: 0; background: var(--el-bg); box-shadow: inset 0 0 0 2px var(--orange); }
.el-table td a { color: var(--orange-600); }
.cell-input { width: 100%; overflow: hidden; white-space: pre-wrap; border: 0; border-radius: 0; background: var(--el-bg); color: var(--ink); padding: 6px 10px; font-size: 13px; resize: none; display: block; color-scheme: light dark; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 12px; margin: 1px 4px 1px 0; color: #101214; white-space: nowrap; }  /* always on a pastel tag colour, also on the dark board */
.cb { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--cb-border); border-radius: 3px; font-size: 11px; color: #fff; vertical-align: middle; }
.cb.on { background: var(--orange); border-color: var(--orange); }
.row-del { color: transparent; cursor: pointer; text-align: center; padding: 6px 0 !important; border-right: 0 !important; }
.el-table tr:hover .row-del { color: var(--silver-500); }
.el-table tr:hover .row-del:hover { color: var(--danger); }
.tbl-add-row { width: 100%; text-align: left; border: 0; background: transparent; color: var(--silver-500); font: 400 13px var(--font); padding: 8px 12px; cursor: pointer; border-radius: 0 0 4px 4px; }
.tbl-add-row:hover { background: var(--el-hover); color: var(--orange); }

/* SVG: drawings and connectors */
.ink .hit, .conn .hit { fill: none; stroke: transparent; pointer-events: stroke; }
.ink .stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ink.selected .stroke { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--orange) 90%, transparent)); }
#live-stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.conn .hit { stroke-width: 22px; }
.conn .line { fill: none; stroke-width: 2px; }
.conn.selected .line { stroke: var(--orange) !important; stroke-width: 3px; }
.clabel { font: 500 13px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--canvas); stroke-width: 6px; stroke-linejoin: round; pointer-events: none; }
.temp-line { fill: none; stroke: var(--orange); stroke-width: 2px; stroke-dasharray: 6 4; }
.tool-eraser .ink .hit { cursor: cell; }

@media (max-width: 640px) {
  .brand .brand-mark, .workspace, .brand + .topbar-sep, .topbar-extra .menu { display: none; }
  #toolbar { top: auto; bottom: 12px; left: 12px; right: 76px; transform: none; flex-direction: row; overflow-x: auto; }
  .tool-sep { width: 1px; height: auto; margin: 6px 4px; }
  #zoombar [data-zoom="in"], #zoombar [data-zoom="out"], #zoombar .zoom-label, #zoombar [data-help] { display: none; }
}

/* Command Center (start page for admins) */
.page-wide { max-width: 1280px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head-actions input[type="search"] { width: 260px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--black-800); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; }
.stat small { color: var(--sand); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.stat strong { font-size: 22px; font-weight: 700; margin-top: 2px; }
.board-list { background: var(--black-800); border: 1px solid var(--line); border-radius: var(--radius); }
.bl-row { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(220px, 2fr) minmax(90px, .8fr) 130px auto; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.bl-row:last-child { border-bottom: 0; }
.bl-row:not(.bl-head):hover { background: rgba(255, 255, 255, .02); }
.bl-head { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--sand); padding-top: 10px; padding-bottom: 10px; }
.bl-title { text-decoration: none; color: var(--text); display: flex; flex-direction: column; min-width: 0; }
.bl-title:hover strong { color: var(--orange-400); }
.bl-title small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-people { display: flex; flex-wrap: wrap; gap: 6px; }
.person { display: inline-flex; align-items: center; gap: 6px; background: var(--black-700); border-radius: 3px; padding: 2px 10px 2px 2px; font-size: 12px; }
.person i { width: 22px; height: 22px; border-radius: 50%; background: var(--sand); color: var(--black-900); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 11px; }
.person em { font-style: normal; color: var(--muted); font-size: 11px; }
.person.off { opacity: .5; }
.bl-live .live { font-size: 12px; }
.bl-actions { display: flex; gap: 6px; justify-content: flex-end; }
.bl-actions .btn { padding: 5px 10px; font-size: 12px; }
@media (max-width: 900px) {
  .bl-head { display: none; }
  .bl-row { grid-template-columns: 1fr; gap: 8px; }
  .bl-actions { justify-content: flex-start; }
  .head-actions input[type="search"] { width: 100%; }
}

/* Bookmarks and PDF viewer */
.bm-img { height: 150px; overflow: hidden; background: var(--el-head); border-bottom: 1px solid var(--el-line); }
.bm-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bm-desc { font-size: 12px; color: var(--el-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 4px; }
.el-file[data-kind="pdf"] { display: flex; flex-direction: column; background: var(--black-900); border-color: var(--black-700); }
.el-file[data-kind="pdf"] .bar-icon { font-size: 10px; font-weight: 700; background: var(--orange); color: #fff; border-radius: 3px; padding: 1px 5px; }
.embed-pdf iframe { background: #fff; }

/* Theme switch in the menu */
.theme-row { display: flex; gap: 4px; padding: 6px 10px 8px; }
.theme-row button { flex: 1; text-align: center !important; padding: 5px 4px !important; border: 1px solid var(--line) !important; font-size: 12px !important; }
.theme-row button.on { border-color: var(--orange) !important; color: var(--orange-400) !important; }
.menu-label { padding: 6px 10px 0; font-size: 11px; color: var(--muted); }

/* Table footer with paging for large tables */
.tbl-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--el-line); }
.tbl-foot .tbl-add-row { width: auto; flex: 1; }
.tbl-pager { display: flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 12px; color: var(--el-muted); white-space: nowrap; }
.tbl-pager button { border: 1px solid var(--el-border); background: var(--el-bg); color: var(--ink); border-radius: 3px; width: 26px; height: 24px; cursor: pointer; font-size: 14px; }
.tbl-pager button:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.tbl-pager button:disabled { opacity: .35; cursor: default; }

/* Table views: sort/filter tools, column drag */
.tbl-tools { display: flex; gap: 4px; margin-left: 6px; }
.tbl-tools button { font: 500 11px var(--font); color: var(--el-muted); background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 3px 7px; cursor: pointer; white-space: nowrap; }
.tbl-tools select { font: 500 11px var(--font); color: var(--el-muted); background: transparent; border: 1px solid var(--el-border); border-radius: 3px; padding: 2px 4px; }
.el-table.clip td { white-space: nowrap; }
.el-table.clip td.cell-open { white-space: pre-wrap; background: var(--el-hover); }
.el-table.clip td .tag { margin-top: 0; margin-bottom: 0; }
.tbl-tools button:hover { background: var(--el-hover); border-color: var(--el-border); }
.tbl-tools button.on { color: var(--orange); background: var(--orange-50); border-color: color-mix(in srgb, var(--orange) 30%, transparent); }
:root[data-theme="dark"] .tbl-tools button.on { background: color-mix(in srgb, var(--orange) 15%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbl-tools button.on { background: color-mix(in srgb, var(--orange) 15%, transparent); } }
.col-flag { margin-left: 5px; color: var(--orange); font-size: 11px; }
.el-table th.col-dragging { opacity: .4; }
.el-table th.drop-before { box-shadow: inset 3px 0 0 var(--orange); }
.el-table th.drop-after { box-shadow: inset -3px 0 0 var(--orange); }
.tbl-none { color: var(--el-muted); font-style: italic; text-align: center; padding: 14px !important; }
.pop-title { font-size: 12px; font-weight: 600; color: var(--sand); letter-spacing: .5px; }
.pop-title small { font-weight: 400; color: var(--muted); letter-spacing: 0; }
.pop-empty { margin: 0; font-size: 12px; color: var(--muted); }
.popover .rule { display: flex; gap: 4px; align-items: center; }
.popover .rule select, .popover .rule input { width: auto; flex: 1; min-width: 0; }
.popover .rule button { flex: 0 0 26px; padding: 5px 0; }
.popover:has(.pop-title) { width: 340px; }
.popover:has(.rule-filter) { width: 440px; }

/* Recording (transcript) */
.rec-btn.live { border-color: var(--danger); color: #ff8a7a; }
#rec-bar { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: calc(100vw - 32px); background: #2a1512; border: 1px solid var(--danger); color: #ffd8d2; padding: 6px 8px 6px 14px; border-radius: 3px; font-size: 12px; box-shadow: var(--shadow); }
#rec-bar strong { color: #fff; }
#rec-bar button { font: 500 12px var(--font); color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 3px; padding: 3px 10px; cursor: pointer; }
#rec-bar button:hover { background: rgba(255, 255, 255, .2); }
#rec-bar button.on { background: var(--danger); border-color: var(--danger); }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .25; } }
label.radio { flex-direction: row; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; color: var(--text); font-size: 13px; }
label.radio:has(input:checked) { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }
label.radio input { margin-top: 3px; accent-color: var(--orange); }
label.radio span { display: flex; flex-direction: column; gap: 2px; }
label.radio small { color: var(--muted); font-weight: 400; }
.notice { font-size: 12px; color: var(--sand); background: none; border: 1px solid var(--line); padding: 8px 10px; border-radius: 3px; margin: 0; }

/* Side drawer: assistant + transcript */
#drawer { position: fixed; top: 56px; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 48; background: var(--black-900); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); display: flex; flex-direction: column; color: var(--text); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.drawer-tabs { display: flex; gap: 4px; }
.drawer-tabs button { font: 600 13px var(--font); color: var(--muted); background: none; border: 0; padding: 6px 10px; border-radius: 3px; cursor: pointer; }
.drawer-tabs button.on { color: var(--text); background: var(--black-700); }
.drawer-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; }
.tr-actions .btn { padding: 5px 10px; font-size: 12px; }
.tr-list { flex: 1; overflow-y: auto; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.tr-rec { font-size: 11px; color: var(--sand); letter-spacing: .5px; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; }
.tr-rec button { font: 500 11px var(--font); color: var(--muted); background: none; border: 0; cursor: pointer; text-transform: none; }
.tr-rec button:hover { color: #ff8a7a; }
.tr-seg { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; font-size: 13px; line-height: 1.45; }
.tr-time { color: var(--muted); font-size: 11px; padding-top: 2px; grid-row: span 2; }
.tr-who { font-weight: 600; font-size: 12px; }
.tr-text { color: var(--text); }
.tr-interim { padding: 0 14px 10px; font-size: 12px; color: var(--muted); font-style: italic; min-height: 18px; }

/* Assistant */
#assistant-fab { position: fixed; right: 12px; bottom: 62px; z-index: 47; display: flex; align-items: center; gap: 8px; font: 600 13px var(--font);
  color: #fff; background: var(--black-900); border: 1px solid var(--line); border-radius: 3px; padding: 9px 14px; cursor: pointer; box-shadow: var(--shadow); }
#assistant-fab:hover { border-color: var(--orange); }
#assistant-fab .fab-icon { color: var(--orange); font-size: 15px; }
#assistant-fab .fab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--silver-500); }
#assistant-fab.connected .fab-dot { background: var(--ok); }
#assistant-fab.ping { animation: fab-ping .5s ease-in-out 3; }
@keyframes fab-ping { 50% { transform: scale(1.08); border-color: var(--orange); } }
.as-head { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.as-status { font-weight: 600; color: var(--muted); }
.as-status.on { color: var(--ok); }
.as-head details { margin-top: 6px; color: var(--muted); }
.as-head summary { cursor: pointer; color: var(--orange-400); }
.as-head ol { padding-left: 18px; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.as-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.as-empty { font-size: 13px; }
.as-msg { display: flex; flex-direction: column; gap: 2px; max-width: 88%; }
.as-msg.user { align-self: flex-end; align-items: flex-end; }
.as-bubble { padding: 8px 11px; border-radius: 4px; font-size: 13px; line-height: 1.45; word-break: break-word; }
.as-msg.user .as-bubble { background: var(--orange); color: #fff; border-bottom-right-radius: 4px; }
.as-msg.assistant .as-bubble { background: var(--black-700); border-bottom-left-radius: 4px; }
.as-bubble code { background: var(--black-950); }
.as-msg small { color: var(--muted); font-size: 10px; }
.as-form { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.as-form textarea { resize: none; width: 100%; font-size: 13px; }
.as-buttons { display: flex; justify-content: space-between; align-items: center; }
.as-mic { width: 40px; height: 34px; border-radius: 4px; border: 1px solid var(--line); background: var(--black-700); font-size: 16px; cursor: pointer; }
.as-mic.live { background: var(--danger); border-color: var(--danger); animation: rec-pulse 1.4s ease-in-out infinite; }
@media (max-width: 640px) { #assistant-fab span:not(.fab-icon) { display: none; } #assistant-fab { bottom: 74px; } }
body:has(#drawer:not([hidden])) #rec-bar { left: calc((100vw - min(400px, 100vw)) / 2); max-width: calc(100vw - min(400px, 100vw) - 32px); }
body:has(#rec-bar:not([hidden])) #toasts { bottom: 70px; }

/* Frames (Miro-like): content area stays click-through so you can select and draw inside */
:root { --frame-mix: 78%; }
:root[data-theme="dark"] { --frame-mix: 12%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --frame-mix: 12%; } }
.el-frame { background: color-mix(in srgb, var(--fc, #ffffff) var(--frame-mix), var(--canvas)); border: 1px solid var(--el-border);
  border-radius: 3px; }  /* the whole frame takes clicks (select, move, delete); its content sits above it */
.el-frame .frame-tab { position: absolute; left: 0; bottom: 100%; margin-bottom: calc(4px / var(--zoom)); max-width: 100%; display: flex; align-items: center;
  gap: calc(2px / var(--zoom)); pointer-events: auto; }
.el-frame .frame-fold { flex: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--el-muted);
  font-size: calc(12px / var(--zoom)); width: calc(18px / var(--zoom)); height: calc(18px / var(--zoom)); border-radius: 3px; line-height: 1; }
.el-frame .frame-fold:hover { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.el-frame .frame-fold:disabled { cursor: default; }
.el-frame .frame-title { min-width: 0; pointer-events: auto; cursor: move;
  font: 600 calc(13px / var(--zoom)) var(--font); color: var(--el-muted); padding: 0 calc(4px / var(--zoom)); border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 0 100%; }
.el-frame .frame-title:hover, .el-frame.selected .frame-title { color: var(--orange); }
.el-frame .frame-title:empty::before { content: "Frame"; }

/* Charts: categorical slots validated (dataviz validator) in this order, light on #ffffff and dark on #26282c */
.el-chart { --series-1: var(--orange); --series-2: var(--blue); --series-3: var(--ok); --series-4: var(--warn); --series-5: var(--danger); --series-6: var(--ok); --series-7: var(--violet); --series-8: var(--danger);
  background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; padding: 12px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: none; }
:root[data-theme="dark"] .el-chart { --series-1: var(--orange-600); --series-2: var(--blue); --series-3: var(--ok); --series-4: var(--warn); --series-5: var(--danger); --series-6: var(--ok); --series-7: var(--violet); --series-8: var(--danger); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .el-chart { --series-1: var(--orange-600); --series-2: var(--blue); --series-3: var(--ok); --series-4: var(--warn); --series-5: var(--danger); --series-6: var(--ok); --series-7: var(--violet); --series-8: var(--danger); } }
.chart-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.chart-head strong { font-size: 14px; }
.chart-head small { font-size: 11px; color: var(--el-muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--el-muted); margin-bottom: 4px; }
.chart-legend i, .chart-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.chart-plot { flex: 1; min-height: 0; }
.chart-plot svg { display: block; overflow: visible; }
.chart-plot text { font-family: var(--font); }
.chart-plot .cx, .chart-plot .cy { font-size: 11px; fill: var(--el-muted); }
.chart-plot .cv { font-size: 11px; font-weight: 600; fill: var(--ink); }
.chart-plot .donut-total { font-size: 20px; font-weight: 700; fill: var(--ink); }
.chart-plot .grid, .chart-plot .axis { stroke: var(--el-line); stroke-width: 1; }
.chart-plot .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .dot { stroke: var(--el-bg); stroke-width: 2; }
.chart-plot .slice { stroke: var(--el-bg); stroke-width: 2; }
.chart-plot .hit { fill: transparent; }
.chart-plot .hit:hover { fill: var(--el-hover); fill-opacity: .5; }
.chart-plot .crosshair { stroke: var(--el-muted); stroke-width: 1; pointer-events: none; }
.chart-empty { height: 100%; display: grid; place-items: center; text-align: center; font-size: 13px; color: var(--el-muted); padding: 12px; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--black-900); color: #f5f5f5; border-radius: 4px; padding: 8px 10px;
  font-size: 12px; min-width: 130px; box-shadow: var(--shadow); }
.chart-tip div { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.chart-tip span { flex: 1; color: #c3c2b7; }
.tr-toggle { font-size: 12px; color: var(--muted); }
.tr-ev .tr-goto { grid-column: 2; justify-self: start; font: 500 12px var(--font); color: var(--sand); background: color-mix(in srgb, var(--sand) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--sand) 40%, transparent); border-radius: 3px; padding: 2px 8px; cursor: pointer; text-align: left; }
.tr-ev .tr-goto:hover { color: var(--orange-400); border-color: var(--orange); }
.tr-ev .tr-time { grid-row: auto; }

/* Notion-linked databases */
.tbl-notion { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--el-line); font-size: 11px; color: var(--el-muted); }
.tbl-notion a { color: var(--ink); font-weight: 600; text-decoration: none; }
.tbl-notion a:hover { color: var(--orange); }
.tbl-notion strong { color: var(--orange); }
.tbl-notion button { margin-left: auto; border: 0; background: transparent; color: var(--el-muted); cursor: pointer; font-size: 14px; }
.n-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--ink); color: var(--el-bg); font: 700 11px var(--font); }
.el-table td.t-readonly { color: var(--el-muted); font-style: italic; cursor: default !important; }
.notion-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.notion-list button { text-align: left; background: transparent; border: 0; color: var(--text); font: 400 13px var(--font); padding: 7px 10px; border-radius: 3px; cursor: pointer; }
.notion-list button:hover { background: var(--black-700); }
.notion-list button.on { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange-400); }
.push-plan { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* Screen frames (screen sharing) */
.el-screen { background: var(--black-900); border: 1px solid var(--black-700); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: none; color: #f5f5f5; }
.scr-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; cursor: move; flex-shrink: 0; border-bottom: 1px solid var(--black-700); }
.scr-title { font-weight: 600; min-width: 40px; }
.scr-title:empty::before { content: "Bildschirm"; }
.scr-who { color: var(--silver); }
.scr-rec { color: #ff8a7a; font-size: 11px; }
.scr-btn { margin-left: auto; font: 600 12px var(--font); color: #fff; background: var(--danger); border: 0; border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.scr-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #0a0a0b; color: var(--muted); text-align: center; padding: 0; }
.scr-body video, .scr-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; background: #000; }
.scr-wait { position: relative; z-index: 1; font-size: 13px; color: var(--muted); }
.scr-start { font: 600 15px var(--font); color: #fff; background: var(--orange); border: 0; border-radius: 4px; padding: 12px 20px; cursor: pointer; }
.scr-start:hover { background: var(--orange-600); }
.tr-shot-link { grid-column: 2; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--muted); font-size: 11px; }
.tr-shot-link img { width: 100%; max-width: 300px; border-radius: 3px; border: 1px solid var(--line); background: #000; }
.tr-shot-link:hover img { border-color: var(--orange); }
.tr-shot .tr-time { grid-row: auto; }

/* Pop-out tab (one element, live) */
.focus-mode #toolbar, .focus-mode #assistant-fab { display: none; }
.focus-mode .topbar-center .btn { padding: 5px 10px; font-size: 12px; }

/* Hype button and highlighted sections */
button.hype, .btn.hype { background: color-mix(in srgb, var(--orange) 18%, transparent) !important; border: 1px solid var(--orange) !important; color: #ffd9be !important; font-weight: 600; }
button.hype:hover, .btn.hype:hover { background: var(--orange) !important; color: #fff !important; }
#rec-bar.flash { animation: hype-flash .9s ease-out; }
@keyframes hype-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 90%, transparent); } 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--orange) 0%, transparent); } }
.tr-seg.hot { background: color-mix(in srgb, var(--orange) 10%, transparent); border-left: 3px solid var(--orange); margin-left: -8px; padding: 3px 0 3px 5px; border-radius: 0 3px 3px 0; }
.tr-flag-body { grid-column: 2; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--orange-400); }
.tr-note { color: var(--text); font-size: 13px; }
.tr-flag-actions { display: flex; gap: 8px; }
.tr-flag-actions button { font: 500 11px var(--font); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.tr-flag-actions button:hover { color: var(--orange-400); }
.tr-flag .tr-time { grid-row: auto; color: var(--orange-400); }

/* Private closing */
.private .pv-step { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.private .pv-step span { color: var(--muted); }
.private .pv-step.done { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.private .pv-step.done strong::after { content: " ✓"; color: var(--ok); }
.private .pv-step .btn { align-self: flex-start; }
.danger-btn { background: #8f2418; color: #fff; border: 0; }
.danger-btn:hover:not(:disabled) { background: var(--danger); }
.danger-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Offline copy */
body.offline .topbar-right .menu, body.offline .brand { pointer-events: none; }
body.offline .topbar-right .menu { display: none; }
.scr-offline { position: absolute; bottom: 8px; left: 10px; z-index: 1; background: rgba(0, 0, 0, .6); color: #fff; padding: 2px 8px; border-radius: 3px; }

/* Prompt blocks: input → prompt → output, run by your own assistant */
.el-prompt { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: none; }
@keyframes pb-pulse { 50% { opacity: .45; } }
.el-prompt .pb-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 4px 12px; }

.el-prompt .pb-title { flex: 1; min-width: 0; font: 600 13px var(--cond); letter-spacing: .2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-prompt .pb-text { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 8px; font-size: 14px; line-height: 1.45; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; }
.el-prompt .pb-text:empty::before { content: "Was soll mit der Eingabe passieren? z. B. „Extrahiere die Action-Items“"; color: var(--el-muted); }
.el-prompt .pb-foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--el-border);
  font: 500 10.5px var(--mono); letter-spacing: .3px; text-transform: uppercase; color: var(--el-muted); white-space: nowrap; overflow: hidden; }
.el-prompt .pb-mode { padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--el-muted) 14%, transparent); }
.el-prompt .pb-st { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.el-prompt .pb-st.run, .el-prompt .pb-st.wait { color: var(--orange); }
.el-prompt .pb-st.ok { color: var(--ok); }
.el-prompt .pb-st.err { color: var(--danger); }
#contextbar button.on { color: var(--orange); }

/* Collapsed container: the frame becomes a bar that names its hidden content */
.el-frame.folded { pointer-events: auto; border-style: dashed; }
.el-frame .frame-folded { position: absolute; inset: 0; cursor: pointer; display: flex; align-items: center;
  gap: 8px; padding: 0 16px; font: 13px var(--font); color: var(--el-muted); text-align: left; overflow: hidden; white-space: nowrap; }
.el-frame .frame-folded:not([data-fold]) { cursor: move; }
.el-frame .frame-folded strong { color: var(--ink); font-weight: 600; flex: none; }
.el-frame .frame-folded i { font-style: normal; padding: 2px 8px; border-radius: 3px; background: color-mix(in srgb, var(--el-muted) 14%, transparent);
  overflow: hidden; text-overflow: ellipsis; max-width: 30%; }
.el-frame .frame-folded:hover strong { color: var(--orange); }

/* Linked elements: the same element on several boards */
.el.is-linked { overflow: visible; outline: 1.5px dashed color-mix(in srgb, var(--orange) 70%, transparent); outline-offset: 3px; }
.el.is-linked .link-badge { position: absolute; left: 0; bottom: 100%; margin-bottom: calc(6px / var(--zoom)); transform-origin: 0 100%;
  font: 600 calc(11px / var(--zoom)) var(--font); color: var(--orange); white-space: nowrap; cursor: pointer; pointer-events: auto;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.el.is-linked .link-badge:hover { text-decoration: underline; }
.el-linked { background: var(--el-bg); border: 1px dashed var(--el-border); border-radius: 4px; }
.linked-gone { display: flex; flex-direction: column; gap: 4px; padding: 14px; font-size: 13px; color: var(--el-muted); }
.linked-gone strong { color: var(--ink); }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.pick-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: transparent; border: 0;
  color: var(--text); font: 400 13px var(--font); padding: 7px 10px; border-radius: 3px; cursor: pointer; }
.pick-list button small { color: var(--muted, var(--muted)); font-size: 11px; }
.pick-list button:hover { background: var(--black-700); }

/* Entries and exits, prompt block settings */
.el-prompt .io-gear { border: 0; background: none; color: var(--el-muted); cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 3px; }
.el-prompt .io-gear:hover { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.io-block .pb-badge::before { background: var(--blue); }
.el-outlet .pb-badge::before { background: var(--ok); }
.io-block .io-what { flex: 1; padding: 4px 12px 8px; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.io-block .io-what small { color: var(--el-muted); font-size: 11px; }
fieldset.sched { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.sched-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sched-row select, .sched-row input { width: auto; flex: 1 1 110px; }
.sched-row [hidden] { display: none; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.secret-row { display: flex; gap: 6px; }
.secret-row input { flex: 1; font-family: var(--mono); font-size: 12px; }
.io-events { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; max-height: 160px; overflow: auto; }
.io-events li span { color: var(--muted, var(--muted)); margin-right: 6px; }
.io-events li.error { color: var(--danger); }
.chat-way { border: 1px dashed var(--line); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.chat-way small { color: var(--muted, var(--muted)); }

/* Attachment cells (like Airtable) */
.el-table td.t-files { white-space: nowrap; overflow: hidden; }
.att-thumb { height: 26px; width: 26px; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: 4px; border: 1px solid var(--el-border); }
.att-chip { display: inline-grid; place-items: center; height: 24px; min-width: 32px; padding: 0 6px; margin-right: 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--el-muted) 16%, transparent); font: 600 10px var(--font); color: var(--ink); vertical-align: middle; }
.att-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; min-width: 280px; }
.att-item { display: flex; align-items: center; gap: 8px; }
.att-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; border: 1px solid var(--el-border); }
.att-item .att-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.att-item .att-name small { color: var(--el-muted); font-size: 11px; }
.att-item a, .att-item button { border: 0; background: none; color: var(--el-muted); cursor: pointer; font-size: 15px; text-decoration: none; padding: 2px 4px; }
.att-item a:hover, .att-item button:hover { color: var(--orange); }
.att-add { margin-top: 8px; cursor: pointer; }

/* Keyring: list, type tiles, one form per type, inline test */
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 3px; }
.linkish { background: none; border: 0; padding: 0; color: var(--orange); font: 500 12px var(--font); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.kr-view { display: flex; flex-direction: column; gap: 16px; }
.kr-top { display: flex; align-items: flex-start; gap: 16px; }
.kr-top p { flex: 1; }
.kr-head { display: flex; align-items: center; gap: 10px; }
.kr-head strong { font-size: 15px; }
.kr-notice { border: 1px solid var(--orange); background: none; padding: 8px 12px; border-radius: 3px; font-size: 13px; }
.kr-group h4 { margin: 0 0 4px; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kr-sub, .kr-always { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.kr-always { margin: 8px 0 0; }
.kr-list { display: flex; flex-direction: column; gap: 6px; }
.kr-item { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; transition: border-color .4s, box-shadow .4s; }
.kr-item.flash { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent); }
.kr-ico { width: 32px; height: 32px; border-radius: 4px; background: var(--black-700); display: grid; place-items: center; font: 600 12px var(--font); color: var(--text); letter-spacing: .02em; flex-shrink: 0; }
.kr-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-rename { font-size: 14px; padding: 4px 8px; }
.kr-acts { display: flex; align-items: center; gap: 4px; }
.kr-test-btn.on { border-color: var(--orange); }
.kr-more { position: relative; }
.kr-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 160px; background: var(--black-800); border: 1px solid var(--line); border-radius: 4px; padding: 4px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.kr-menu button { text-align: left; border: 0; background: none; color: var(--text); font: 13px var(--font); padding: 7px 10px; border-radius: 3px; cursor: pointer; }
.kr-menu button:hover, .kr-menu button:focus-visible { background: color-mix(in srgb, var(--orange) 14%, transparent); outline: none; }
.kr-menu button.danger { color: var(--danger); }
.kr-menu .kr-narrow { display: none; }
.kr-flash-note { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.kr-empty { align-items: center; text-align: center; padding: 24px 8px; gap: 10px; }
.kr-empty strong { font-size: 15px; }
.kr-empty-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.kr-tile { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--text); cursor: pointer; font: 13px var(--font); }
.kr-tile:hover, .kr-tile:focus-visible { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); outline: none; }
.kr-tile strong { display: block; font-weight: 600; }
.kr-tile small { display: block; color: var(--muted); font-size: 12px; }
.kr-legacy summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.kr-form .kr-field input, .kr-form .kr-field textarea, .kr-form .kr-field select { width: 100%; }
.kr-field { gap: 5px; }
.kr-field .muted { font-weight: 400; }
.kr-help { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; }
.kr-help a { color: var(--orange); }
.kr-err { color: var(--danger); font-size: 12px; font-weight: 500; }
.kr-form [aria-invalid] { border-color: var(--danger); }
.kr-warn { color: var(--orange); font-size: 12px; }
.kr-secret { display: flex; gap: 6px; }
.kr-secret input { flex: 1; min-width: 0; }
.kr-fs { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kr-fs legend { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0; margin-bottom: 8px; }
.kr-row { display: flex; gap: 8px; flex-wrap: wrap; }
.kr-row > .kr-field { min-width: 140px; }
.kr-row .grow { flex: 1; }
.kr-method { width: 96px; min-width: 96px !important; }
.kr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.kr-chips:empty { display: none; }
.kr-chip { font: 500 11px var(--mono); padding: 2px 8px; border-radius: 3px; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--text); }
.kr-chip.opt { background: none; border: 1px dashed var(--line); color: var(--muted); }
.kr-foot { position: sticky; bottom: -20px; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0 4px; background: var(--black-800); border-top: 1px solid var(--line); }
.kr-test { margin: -2px 0 4px 44px; border: 1px solid var(--line); border-radius: 4px; padding: 12px; background: color-mix(in srgb, var(--black-700) 40%, transparent); }
.kr-test-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.kr-test-acts { display: flex; align-items: center; gap: 8px; }
.kr-test-acts .grow { flex: 1; }
.kr-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; align-self: flex-start; }
.kr-seg button { border: 0; background: none; color: var(--muted); font: 500 12px var(--font); padding: 6px 12px; cursor: pointer; }
.kr-seg button.on { background: var(--black-700); color: var(--text); }
.kr-out { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.kr-out-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.kr-out pre { margin: 0; padding: 10px; max-height: 280px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.kr-pill { font: 600 11px var(--font); padding: 2px 8px; border-radius: 3px; }
.kr-pill.ok { background: color-mix(in srgb, var(--ui-green) 20%, transparent); color: var(--ui-green); }
.kr-pill.err { background: color-mix(in srgb, var(--ui-red) 20%, transparent); color: var(--ui-red); }
@media (max-width: 560px) {
  .kr-top { flex-direction: column; align-items: stretch; }
  .kr-test { margin-left: 0; }
}
@media (max-width: 480px) {
  .kr-acts .kr-test-btn { display: none; }
  .kr-menu .kr-narrow { display: block; }
}
@media (max-width: 380px) { .kr-tiles { grid-template-columns: 1fr; } }

/* Recipes */
.recipe-box { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.recipe-note { font-size: 13px; margin: 0; }
.recipe-steps { margin: 0; padding-left: 20px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.recipe-steps code, .recipe-box code { font-size: 11px; background: color-mix(in srgb, var(--muted, var(--muted)) 14%, transparent); padding: 0 4px; border-radius: 3px; }
.recipe-preview { max-height: 200px; overflow: auto; border: 1px solid var(--line); border-radius: 3px; }
.recipe-preview table { font-size: 11px; }
.recipe-text { white-space: pre-wrap; font-size: 12px; max-height: 160px; overflow: auto; background: color-mix(in srgb, var(--muted, var(--muted)) 10%, transparent); padding: 8px; border-radius: 3px; }
.recipe-json { width: 100%; font-family: var(--mono); font-size: 12px; }
.modal-actions.left { justify-content: flex-start; }
.el-prompt .pb-mode.recipe { color: var(--ok); }

/* Interfaces */
:root { --ui-orange: var(--orange); --ui-blue: var(--blue); --ui-green: var(--ok); --ui-red: var(--danger); --ui-gray: var(--silver-500); }
.el-interface { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: none; }
.el-interface .ui-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.el-interface .pb-badge::before { background: var(--ui-accent, var(--orange)); }
.el-interface .pb-title { flex: 1; font: 600 13px var(--cond); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-interface .io-gear { border: 0; background: none; color: var(--el-muted); cursor: pointer; font-size: 15px; padding: 2px 5px; border-radius: 3px; }
.el-interface .io-gear:hover { color: var(--ui-accent); }
.ui-grid { flex: 1; display: grid; gap: 10px; padding: 6px 12px 12px; overflow: auto; align-content: start; }
.ui-w { min-width: 0; }
.ui-stat { border: 1px solid var(--el-border); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ui-stat small, .ui-list small { color: var(--el-muted); font-size: 11px; }
.ui-stat strong { font: 700 26px var(--font); color: var(--ink); }
.ui-w em { font-size: 11px; color: var(--danger); font-style: normal; }
.ui-list { border: 1px solid var(--el-border); border-radius: 4px; padding: 8px 10px; overflow: hidden; }
.ui-list table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.ui-list th { text-align: left; color: var(--el-muted); font-weight: 500; padding: 2px 4px; }
.ui-list td { padding: 3px 4px; border-top: 1px solid var(--el-border); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ui-text { font-size: 13px; color: var(--ink); padding: 4px 2px; }
.ui-btn { width: 100%; height: 40px; border: 0; border-radius: 4px; color: #fff; font: 600 13px var(--font); cursor: pointer; }
.ui-btn:hover { filter: brightness(1.08); }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-orange { background: var(--ui-orange); } .ui-blue { background: var(--ui-blue); } .ui-green { background: var(--ui-green); }
.ui-red { background: var(--ui-red); } .ui-gray { background: var(--ui-gray); }
.ui-empty { grid-column: 1 / -1; }
.ui-chat { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--el-border); }
.ui-chat input { flex: 1; }
.ui-ed-row { border: 1px solid var(--line); border-radius: 4px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ui-ed-top { display: flex; gap: 6px; align-items: center; }
.ui-ed-top input[data-k=label] { flex: 1; }
.ui-ed-top input[data-k=width] { width: 56px; }
.ui-ed-top button { border: 0; background: none; color: var(--muted, var(--muted)); cursor: pointer; font-size: 14px; }
.ui-ed-cfg { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.ui-ed-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.el-table .tbl-home { font: 600 11px var(--font); color: var(--orange); cursor: pointer; white-space: nowrap; }

/* Kanban view of a database, row detail, swallowing */
.kb-board { display: flex; gap: 10px; padding: 10px 12px 12px; overflow-x: auto; align-items: flex-start; min-height: 120px; }
.kb-lane { flex: 0 0 220px; background: color-mix(in srgb, var(--el-muted) 8%, transparent); border-radius: 4px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kb-lane.over { outline: 2px dashed var(--orange); }
.kb-lane-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.kb-lane-head small { color: var(--el-muted); }
.kb-cards { display: flex; flex-direction: column; gap: 6px; min-height: 8px; }
.kb-card { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; font-size: 13px; color: var(--ink); box-shadow: none; }
.kb-card[draggable="true"] { cursor: grab; }
.kb-card strong { font-weight: 600; word-break: break-word; }
.kb-field { font-size: 11px; color: var(--el-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-add { border: 0; background: none; color: var(--el-muted); cursor: pointer; text-align: left; font-size: 12px; padding: 4px; }
.kb-add:hover { color: var(--orange); }
.kb-empty { padding: 16px; font-size: 13px; color: var(--el-muted); }
.el-table [data-kb-group] { font-size: 12px; padding: 2px 6px; height: auto; width: auto; }
.row-detail { display: flex; flex-direction: column; gap: 8px; min-width: 260px; max-height: 420px; overflow: auto; }
.row-detail label { display: flex; flex-direction: column; gap: 2px; }
.row-detail small { color: var(--muted, var(--muted)); font-size: 11px; }
.el.swallow-target { outline: 3px solid var(--orange); outline-offset: 4px; }
.ui-chat[hidden] { display: none; }

/* Prompt workspace (double-click on a prompt block) */
.modal.ws-modal { width: min(1200px, 96vw); max-width: none; height: min(820px, 92vh); display: flex; flex-direction: column; }
.ws-modal .modal-body { flex: 1; min-height: 0; }
.ws { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; height: 100%; }
.ws-edit, .ws-chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ws-row { display: flex; gap: 8px; align-items: center; }
.ws-title { flex: 1; font-weight: 600; }
.ws-tabs { display: flex; gap: 2px; }
.ws-tabs button { border: 1px solid var(--line); background: none; color: var(--muted, var(--muted)); padding: 4px 10px; cursor: pointer; font: 13px var(--font); }
.ws-tabs button:first-child { border-radius: 3px 0 0 3px; } .ws-tabs button:last-child { border-radius: 0 3px 3px 0; }
.ws-tabs button.on { color: var(--orange); border-color: var(--orange); }
.ws-md { flex: 1; min-height: 200px; resize: none; font: 14px/1.55 var(--mono); }
.ws-preview { flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 4px; padding: 12px 16px; font-size: 14px; line-height: 1.55; }
.md h3, .md h4, .md h5, .md h6 { margin: 12px 0 6px; } .md p { margin: 6px 0; } .md ul, .md ol { padding-left: 22px; margin: 6px 0; }
.md code { background: color-mix(in srgb, var(--muted, var(--muted)) 16%, transparent); padding: 0 4px; border-radius: 3px; font-size: 12px; }
.md pre { background: color-mix(in srgb, var(--muted, var(--muted)) 12%, transparent); padding: 8px; border-radius: 3px; overflow: auto; }
.ws-wiring { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted, var(--muted)); }
.ws-wiring > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ws-wiring small { width: 64px; flex: none; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; font-weight: 600; }
.ref-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 3px; font: 500 12px var(--font);
  background: var(--black-700); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }
.ref-chip i { font-style: normal; color: var(--muted); font-size: 11px; }
.ref-chip.in { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.ref-chip.out { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.ws-wiring .ref-chip[draggable="true"] { cursor: grab; }
.ws-wiring .ref-chip[draggable="true"]:hover { border-color: var(--orange); color: var(--orange); }
.ws-preview .ref-chip { background: var(--orange-50); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 35%, transparent); }
.ws-foot { display: flex; align-items: center; gap: 8px; } .ws-foot .ws-state { flex: 1; }
.ws-chat { border-left: 1px solid var(--line); padding-left: 16px; }
.ws-chat-head { display: flex; align-items: center; justify-content: space-between; }
.ws-msgs { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.ws-msgs .as-bubble { font-size: 13px; line-height: 1.5; }
.ws-note { font-size: 12px; color: var(--muted, var(--muted)); text-align: center; }
.ws-note.busy { color: var(--orange); animation: pb-pulse 1.6s ease-in-out infinite; }
.ws-form { display: flex; gap: 6px; align-items: flex-end; } .ws-form textarea { flex: 1; resize: none; }
.ws-own { border: 0; background: none; color: var(--muted, var(--muted)); font-size: 12px; cursor: pointer; text-align: left; padding: 0; }
.ws-own:hover { color: var(--orange); }
@media (max-width: 900px) {
  .modal.ws-modal { height: auto; max-height: 94vh; }
  .ws-modal .modal-body { overflow: auto; }
  .ws { grid-template-columns: 1fr; height: auto; }
  .ws-md { min-height: 220px; }
  .ws-chat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .ws-msgs { min-height: 120px; max-height: 300px; }
}
.ctx-menu { position: fixed; z-index: 3000; background: var(--black-800, #1f2125); border: 1px solid var(--line); border-radius: 4px; padding: 4px;
  display: flex; flex-direction: column; min-width: 230px; box-shadow: none; }
:root[data-theme="light"] .ctx-menu { background: #fff; border-color: #dfe2e6; }
:root[data-theme="light"] .ctx-menu button { color: #1f2125; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ctx-menu { background: #fff; border-color: #dfe2e6; } :root:not([data-theme="dark"]) .ctx-menu button { color: #1f2125; } }
.ctx-menu button { text-align: left; border: 0; background: none; color: var(--text); font: 13px var(--font); padding: 7px 10px; border-radius: 3px; cursor: pointer; }
.ctx-menu button:hover { background: color-mix(in srgb, var(--orange) 14%, transparent); }

/* Data flowing along the arrows of a working prompt block */
.conn .flow { display: none; fill: none; pointer-events: none; }
.conn.flowing .flow { display: inline; stroke: var(--orange-400); stroke-width: 7px; stroke-linecap: round; stroke-dasharray: 22 200;
  animation: hb-flow 1.5s cubic-bezier(.45,0,.55,1) infinite; opacity: .9;
  filter: blur(3px) drop-shadow(0 0 6px color-mix(in srgb, var(--orange) 80%, transparent)); }
.conn.flowing .line { stroke-opacity: .55; }
@keyframes hb-flow { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -100; } }  /* a soft glow travels the arrow (pathLength 100) */
@media (prefers-reduced-motion: reduce) {
  .conn.flowing .flow { animation: none; stroke-dasharray: none; stroke-width: 3px; opacity: .8; }
}

/* Keyring: tool fields */
textarea.mono { font-family: var(--mono); font-size: 12px; }

.pb-tools { display: flex; flex-direction: column; gap: 2px; }

/* Overview: all boards as square cards (zoomed out of the board) */
#overview { position: fixed; inset: 0; z-index: 90; background: var(--black-950); display: flex; flex-direction: column;
  opacity: 0; transform: scale(1.25); transition: opacity .22s ease, transform .22s ease; }
#overview.in { opacity: 1; transform: none; }
body.overview-open #world { transition: transform .22s ease; }
.ov-head { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.ov-head strong { font-size: 18px; }
.ov-head small { flex: 1; color: var(--muted); }
.ov-grid { flex: 1; overflow: auto; padding: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; align-content: start; grid-auto-rows: max-content; }
.ov-card { display: flex; flex-direction: column; background: var(--black-900); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; color: var(--text); text-decoration: none; transition: transform .26s ease, border-color .15s; outline: none; }
.ov-card:hover, .ov-card:focus-visible, .ov-card:focus { border-color: var(--orange); }
.ov-card.current { box-shadow: 0 0 0 2px var(--orange); }
.ov-card.entering { position: relative; z-index: 2; transform: translate(var(--ov-dx), var(--ov-dy)) scale(var(--ov-s)); }
.ov-map { aspect-ratio: 1.3; flex-shrink: 0; padding: 10px; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 12px 12px; }
.ov-map svg { width: 100%; height: 100%; }
.ov-map rect { fill: var(--silver-500); opacity: .55; }
.ov-map rect.ov-card { fill: #ffe98f; opacity: .9; }
.ov-map rect.ov-frame { fill: var(--black-700); opacity: .9; }
.ov-map rect.ov-prompt { fill: var(--orange); opacity: .9; }
.ov-map rect.ov-table, .ov-map rect.ov-interface { fill: var(--silver); opacity: .7; }
.ov-map rect.ov-drawing { fill: none; stroke: var(--silver); stroke-width: 4; opacity: .6; }
.ov-empty { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.ov-meta { padding: 8px 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-meta strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-meta small { color: var(--muted); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { #overview, .ov-card { transition: none; } }
@media (max-width: 600px) { .ov-grid { grid-template-columns: repeat(2, 1fr); padding: 16px; } .ov-head small { display: none; } }

/* Row pages: a database row opened like a page */
.el-table td.t-title { position: relative; }
.row-title { cursor: pointer; font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.row-title:hover { text-decoration-color: var(--orange); }
.row-mark { margin-left: 6px; font-size: 11px; opacity: .7; }
.row-open { position: absolute; right: 6px; top: 6px; display: none; font: 600 11px var(--font); color: var(--el-muted); background: var(--el-bg);
  border: 1px solid var(--el-border); border-radius: 3px; padding: 2px 6px; cursor: pointer; }
.el-table tr:hover .row-open { display: block; }
.row-open:hover { color: var(--orange); border-color: var(--orange); }
/* Row page: a database entry like a Notion page (board.js openRowPage) */
.rp-modal { width: min(980px, 96vw); height: min(88vh, 1000px); display: flex; flex-direction: column; overflow: hidden; }
.rp-modal .modal-head { display: none; }
.rp-modal .modal-body { padding: 0; flex: 1; min-height: 0; display: flex; }
.rp2 { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rp2-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--line); }
.rp2-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.rp2-crumb strong { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.rp2-sep { opacity: .5; }
.rp2-nav { display: flex; align-items: center; gap: 2px; }
.rp2-nav small { color: var(--muted); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.rp2-nav .icon-btn, .rp2-acts .icon-btn { width: 28px; height: 28px; font-size: 14px; }
.rp2-nav .icon-btn:disabled { opacity: .3; cursor: default; }
.rp2-acts { display: flex; gap: 2px; }
.icon-btn:hover:not(:disabled) { background: var(--black-700); }
.rp2-scroll { flex: 1; overflow: auto; }
.rp2-page { max-width: 760px; margin: 0 auto; padding: 36px 48px 64px; }
.rp2-title { font: 700 32px/1.2 var(--font); margin: 0 0 18px; outline: none; color: var(--text); word-break: break-word; }
.rp2-title:empty::before { content: attr(data-ph); color: var(--muted); opacity: .6; }
.rp2-props { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.rp2-prop { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: start; border-radius: 3px; }
.rp2-lab { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp2-lab i { font: 600 11px var(--font); font-style: normal; width: 18px; text-align: center; opacity: .75; flex-shrink: 0; }
.rp2-val { min-height: 32px; padding: 6px 8px; border-radius: 3px; font-size: 14px; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.rp2-val.edit { cursor: text; }
.rp2-val.edit:hover { background: var(--black-700); }
.rp2-val.editing { padding: 2px; background: none; }
.rp2-val a { color: var(--orange); }
.rp2-text { white-space: pre-wrap; word-break: break-word; width: 100%; }
.rp2-text.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp2-val .linkish { font-size: 12px; }
.rp2-empty { color: var(--muted); opacity: .55; }
.rp2-input { width: 100%; font-size: 14px; padding: 5px 8px; resize: none; line-height: 1.5; }
textarea.rp2-input { min-height: 34px; overflow: hidden; }
.rp2 .rel-chip { cursor: pointer; background: var(--black-700); color: var(--text); border: 1px solid var(--line); }
.rp2-val .rel-chip:hover { outline: 1px solid var(--orange); }
.rp2-more { align-self: flex-start; background: none; border: 0; color: var(--muted); font: 500 12px var(--font); padding: 6px 8px; cursor: pointer; border-radius: 3px; }
.rp2-more:hover { color: var(--text); background: var(--black-700); }
.rp2-rel { margin: 18px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.rp2-rel h4 { margin: 0; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rp2-roll { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.rp2-roll summary { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.rp2-roll summary::-webkit-details-marker { display: none; }
.rp2-roll summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform .15s; }
.rp2-roll[open] summary::before { transform: rotate(90deg); }
.rp2-roll-name { font-weight: 500; font-size: 14px; }
.rp2-roll summary small { color: var(--muted); font-size: 12px; }
.rp2-roll > p { padding: 0 12px 10px; }
.rp2-roll-table { overflow-x: auto; border-top: 1px solid var(--line); }
.rp2-roll table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp2-roll th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.rp2-roll td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.rp2-roll tr:last-child td { border-bottom: 0; }
.rp2-roll tbody tr { cursor: pointer; }
.rp2-roll tbody tr:hover td { background: var(--black-700); }
.rp2-ed-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rp2-ed { position: relative; outline: none; min-height: 240px; font-size: 15px; line-height: 1.65; }
.rp2-ed.is-empty::before { content: attr(data-ph); color: var(--muted); opacity: .6; position: absolute; pointer-events: none; }
.rp2-ed > :first-child { margin-top: 0; }
.rp2-ed h1 { font-size: 26px; margin: 22px 0 6px; }
.rp2-ed h2 { font-size: 21px; margin: 18px 0 4px; }
.rp2-ed h3 { font-size: 17px; margin: 14px 0 2px; }
.rp2-ed p { margin: 2px 0; }
.rp2-ed ul, .rp2-ed ol { margin: 4px 0; padding-left: 24px; }
.rp2-ed blockquote { margin: 6px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--orange); color: var(--text); }
.rp2-ed hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.rp2-ed pre { background: var(--black-950); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; font: 13px/1.5 var(--mono); white-space: pre-wrap; }
.rp2-ed code { background: var(--black-700); padding: 1px 5px; border-radius: 3px; font-size: .9em; }
.rp2-ed a { color: var(--orange); }
.rp2-ed table { border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.rp2-ed th, .rp2-ed td { border: 1px solid var(--line); padding: 6px 10px; min-width: 90px; text-align: left; vertical-align: top; }
.rp2-ed th { background: var(--black-700); font-weight: 600; }
.rp2-ed .ed-tasks { list-style: none; padding-left: 4px; }
.rp2-ed .ed-tasks > li { position: relative; padding-left: 28px; }
.rp2-ed .ed-tasks > li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 15px; height: 15px; border: 1.5px solid var(--muted); border-radius: 3px; cursor: pointer; }
.rp2-ed .ed-tasks > li[data-done="1"]::before { background: var(--orange); border-color: var(--orange); }
.rp2-ed .ed-tasks > li[data-done="1"]::after { content: "✓"; position: absolute; left: 4px; top: 1px; font-size: 12px; color: #fff; pointer-events: none; }
.rp2-ed .ed-tasks > li[data-done="1"] { color: var(--muted); text-decoration: line-through; }
.rp2-ai { color: var(--orange); font-size: 11px; margin-left: 6px; cursor: help; }
.rp2-log { margin-top: 30px; }
.rp2-log h4 { margin: 0 0 10px; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rp2-log h4 small { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.rp2-day + .rp2-day { margin-top: 10px; }
.rp2-day-name { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.rp2-day ul { list-style: none; margin: 0; padding: 0 0 0 11px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.rp2-ev { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-left: -22px; font-size: 13px; line-height: 1.5; }
.rp2-ev-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font); background: var(--black-700); color: var(--text); border: 2px solid var(--black-800); }
.rp2-ev.prompt .rp2-ev-ico { background: color-mix(in srgb, var(--orange) 22%, var(--black-800)); color: var(--orange); }
.rp2-ev.automation .rp2-ev-ico { background: color-mix(in srgb, var(--sand) 18%, var(--black-800)); }
.rp2-ev-text { color: var(--muted); word-break: break-word; }
.rp2-ev-text strong { color: var(--text); font-weight: 500; }
.rp2-ev-text em { font-style: normal; color: var(--text); }
.rp2-log-val { display: block; margin-top: 3px; padding: 6px 10px; border-radius: 4px; background: var(--black-700); color: var(--text); font-size: 12px; }
.rp2-ev time { font-size: 11px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.rp2-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.rp2-save:empty, .rp2-board:empty, .rp2-who:empty { display: none; }
.rp2-board-link { color: var(--orange); text-decoration: none; }
.ed-slash { width: 220px; max-height: 320px; overflow: auto; padding: 4px; gap: 0; z-index: 2000; }
.ed-slash button { display: flex; align-items: center; gap: 10px; text-align: left; background: none; padding: 6px 8px; font: 13px var(--font); width: 100%; }
.ed-slash button i { font: 600 11px var(--font); font-style: normal; width: 26px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.ed-slash button.on, .ed-slash button:hover { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.rp2-menu { width: 240px; padding: 4px; gap: 0; }
.rp2-menu button { text-align: left; background: none; padding: 7px 10px; font-size: 13px; }
.rp2-menu button:hover { background: var(--black-700); }
.rp2-menu button.danger { color: var(--danger); }
.rp2-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
@media (max-width: 700px) {
  .rp2-page { padding: 22px 18px 48px; }
  .rp2-prop { grid-template-columns: 120px minmax(0, 1fr); gap: 6px; }
  .rp2-title { font-size: 26px; }
  .rp2-nav small { display: none; }
}
.crumb { color: var(--muted); text-decoration: none; font-size: 13px; margin-right: 8px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
@media (max-width: 1000px) { .crumb span { display: none; } }
.crumb:hover { color: var(--orange); }

/* Prompt workspace: settings tab, multi-select picker */
.ws-settings { overflow: auto; min-height: 0; flex: 1; padding-right: 4px; }
.ws-form-settings .modal-actions { position: sticky; bottom: 0; background: var(--black-900); padding-top: 8px; align-items: center; gap: 10px; }
.mp { position: relative; }
.mp-btn { width: 100%; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 36px; padding: 5px 30px 5px 8px; text-align: left;
  background: var(--black-950); border: 1px solid var(--line); border-radius: 4px; color: var(--text); cursor: pointer; font: 13px var(--font); position: relative; }
.mp-btn:hover { border-color: var(--orange); }
.mp-chip { background: var(--orange-50); color: var(--orange); border-radius: 3px; padding: 1px 7px; font-size: 12px; }
.mp-more { color: var(--muted); font-size: 12px; }
.mp-caret { position: absolute; right: 10px; color: var(--muted); }
.mp-panel { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: var(--black-900); border: 1px solid var(--line);
  border-radius: 4px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mp-panel[hidden] { display: none; }
.mp-list { max-height: 260px; overflow: auto; }
.mp-group { font: 600 11px var(--font); color: var(--orange); text-transform: uppercase; letter-spacing: .04em; padding: 6px 4px 2px; }
.mp-opt { display: flex; flex-direction: row; gap: 8px; margin: 0; align-items: flex-start; padding: 5px 4px; border-radius: 3px; cursor: pointer; font-size: 13px; }
.mp-opt:hover { background: var(--black-700); }
.mp-opt input { width: auto; flex: none; margin-top: 3px; }
.mp-opt span { display: flex; flex-direction: column; color: var(--text); }
.mp-opt small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }

/* Rows an AI is working on */
.el-table tr.ai-busy td { box-shadow: inset 0 2px 0 var(--orange), inset 0 -2px 0 var(--orange); animation: ai-pulse 1.2s ease-in-out infinite; }
.el-table tr.ai-busy td:first-child { box-shadow: inset 2px 2px 0 var(--orange), inset 0 -2px 0 var(--orange); }
.el-table tr.ai-busy td:last-child { box-shadow: inset -2px 2px 0 var(--orange), inset 0 -2px 0 var(--orange); }
.el-table tr.ai-touched td { background: color-mix(in srgb, var(--orange) 12%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--orange) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--orange) 50%, transparent); transition: background 1s; }
.kb-card.ai-busy { outline: 2px solid var(--orange); animation: ai-pulse 1.2s ease-in-out infinite; }
.kb-card.ai-touched { outline: 1px solid color-mix(in srgb, var(--orange) 60%, transparent); }
@keyframes ai-pulse { 50% { background-color: color-mix(in srgb, var(--orange) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .el-table tr.ai-busy td, .kb-card.ai-busy { animation: none; } }

/* Database views as tabs */
.tbl-views { display: flex; gap: 2px; padding: 4px 10px 0; border-bottom: 1px solid var(--el-line); overflow-x: auto; }
.tbl-views button { font: 500 12px var(--font); color: var(--el-muted); background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 5px 10px 6px; cursor: pointer; white-space: nowrap; }
.tbl-views button:hover { color: var(--ink); }
.tbl-views button.on { color: var(--orange); border-bottom-color: var(--orange); }
.tbl-views [data-view-add], .tbl-views [data-view-menu] { color: var(--silver-500); }

/* Docking points along an element's edge */
#edge-dots { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; }
.edge-dot { position: absolute; width: calc(6px / var(--zoom)); height: calc(6px / var(--zoom)); margin: calc(-3px / var(--zoom)) 0 0 calc(-3px / var(--zoom));
  border-radius: 50%; background: var(--silver-500); opacity: .55; }
.edge-dot.hot { width: calc(12px / var(--zoom)); height: calc(12px / var(--zoom)); margin: calc(-6px / var(--zoom)) 0 0 calc(-6px / var(--zoom));
  background: var(--orange); opacity: 1; box-shadow: 0 0 0 calc(4px / var(--zoom)) color-mix(in srgb, var(--orange) 25%, transparent); }
.edge-dot.anchor { pointer-events: auto; cursor: crosshair; border: 0; transform: none; }
.edge-dot.anchor::after { content: ""; position: absolute; inset: calc(-12px / var(--zoom)); border-radius: 50%; }  /* easy to grab */
.edge-dot.plugged { cursor: grab; background: var(--el-bg, #fff); box-shadow: 0 0 0 calc(2px / var(--zoom)) var(--orange); }  /* an arrow hangs here: grab its end */

/* Toolbar: the tool's name appears right away next to it */
#toolbar .tool { position: relative; }
.tool-name { display: none; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 500 12px var(--font); font-style: normal; color: var(--text); background: var(--black-900); border: 1px solid var(--line);
  border-radius: 3px; padding: 5px 9px; box-shadow: var(--shadow); align-items: center; gap: 8px; }
.tool-name kbd { font-size: 10px; padding: 0 5px; }
@media (min-width: 641px) { #toolbar .tool:hover .tool-name { display: inline-flex; } }
.rr-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rr-pick input { width: 90px; }

/* Prompt view (redesign): one surface – header, flow lane, editor, property rows, sparring on the right */
.pw-modal .modal-head { display: none; }
.pw-modal .modal-body { padding: 0; overflow: hidden; }
.pw { display: flex; flex-direction: column; height: 100%; --tint: color-mix(in srgb, var(--orange) 14%, transparent); }
.pw-hd { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.pw-badge { font: 600 11px var(--font); letter-spacing: .5px; color: var(--orange-400); background: var(--tint); padding: 3px 9px; border-radius: 3px; white-space: nowrap; }
.pw-title { flex: 1; min-width: 0; font: 600 18px var(--font); border: 0; background: none; padding: 2px 0; color: var(--text); border-bottom: 1px solid transparent; border-radius: 0; }
.pw-title:hover, .pw-title:focus { border-bottom-color: var(--line); outline: none; }
.pw-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--black-950); border: 1px solid var(--line); border-radius: 4px; }
.pw-seg span { font-size: 12px; color: var(--muted); padding: 0 6px; }
.pw-seg button { border: 0; background: none; color: var(--muted); padding: 4px 12px; border-radius: 3px; font: 500 13px var(--font); cursor: pointer; }
.pw-seg button.on { background: var(--black-700); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.pw-state { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 70px; text-align: right; }
.pw-split { display: inline-flex; }
.pw-split .btn:first-child { border-radius: 4px 0 0 4px; }
.pw-split .btn:last-child { border-radius: 0 4px 4px 0; padding: 7px 9px; border-left: 1px solid rgba(0, 0, 0, .25); }
.pw-split .btn.busy { background: var(--black-700); color: var(--text); }
.pw-bd { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.pw-work { display: flex; flex-direction: column; min-height: 0; padding: 16px 20px 18px; gap: 14px; overflow: auto; }
.pw-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); align-items: start; gap: 12px; }
.pw-lane-h { font: 600 11px var(--font); letter-spacing: 2px; text-transform: uppercase; color: var(--sand); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-chips em { font-size: 12px; color: var(--silver-500); font-style: normal; }
.pw-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; background: var(--black-900); border: 1px solid var(--line); border-radius: 4px;
  font: 500 13px var(--font); user-select: none; }
.pw-chip[draggable="true"] { cursor: grab; }
.pw-chip[draggable="true"]:hover { border-color: var(--orange); }
.pw-chip i { width: 20px; height: 20px; border-radius: 3px; background: var(--black-700); display: grid; place-items: center; font-size: 11px; font-style: normal; color: var(--silver); }
.pw-chip.out i { background: var(--tint); color: var(--orange-400); }
.pw-chip small { font-size: 11px; color: var(--silver-500); font-weight: 400; }
.pw-core { display: flex; align-items: center; gap: 6px; padding-top: 24px; }
.pw-core span { width: 26px; height: 1px; background: var(--line); }
.pw-core b { width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--orange-400); display: grid; place-items: center; font-size: 13px; }
.pw-mode { font: 500 12px var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 3px; padding: 2px 4px; width: auto; }
.pw-mode:hover { border-color: var(--line); color: var(--text); }
.pw-same { font-size: 11px; color: var(--silver-500); margin-top: 6px; }
.pw-editor { flex: 1; min-height: 220px; display: flex; flex-direction: column; background: var(--black-950); border: 1px solid var(--line); border-radius: 4px; }
.pw-editor:focus-within { border-color: var(--silver-800); }
.pw-ed-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 0 14px; font-size: 12px; color: var(--silver-500); }
.pw-ed-toggle { display: flex; gap: 2px; }
.pw-ed-toggle button { border: 0; background: none; color: var(--silver-500); font: 12px var(--font); padding: 2px 8px; border-radius: 3px; cursor: pointer; }
.pw-ed-toggle button.on { color: var(--text); background: var(--black-700); }
.pw-editor .ws-md { flex: 1; min-height: 160px; border: 0; background: none; padding: 10px 16px 16px; resize: none; font: 13.5px/1.7 var(--mono); color: var(--text); }
.pw-editor .ws-md:focus { outline: none; box-shadow: none; }
.pw-editor .ws-preview { flex: 1; border: 0; padding: 10px 16px 16px; overflow: auto; }
.pw-recipe { flex: 1; overflow: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pw-recipe-note { margin: 0; font-size: 13px; color: var(--muted); }
.pw-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.pw-steps li { counter-increment: s; display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 7px 9px; background: var(--black-900); border: 1px solid var(--line); border-radius: 4px; }
.pw-steps li::before { content: counter(s); color: var(--silver-500); font-size: 11px; padding-top: 1px; }
.pw-steps li.ai { border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.pw-steps li.ai::before { content: "AI"; font: 600 9px var(--mono); color: var(--orange-400); }
.pw-recipe-tools { display: flex; gap: 6px; }
.pw-source summary { cursor: pointer; font-size: 12px; color: var(--silver-500); }
.pw-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 4px; }
.pw-empty p { margin: 0; font-size: 13px; color: var(--muted); max-width: 560px; }
.pw-props { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; border-top: 1px solid var(--line); }
.pw-prop { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); }
.pw-prop .k { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.pw-prop .k span { width: 16px; text-align: center; color: var(--silver-500); }
.pw-val { justify-self: start; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 5px 8px; margin-left: -8px;
  border-radius: 3px; font: 13px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
button.pw-val:hover { background: var(--black-700); }
.pw-val.open { background: var(--black-700); box-shadow: inset 0 0 0 1px var(--orange); }
.pw-val.ro { cursor: default; }
.pw-val.dim { color: var(--silver-500); }
.pw-val .sub { color: var(--silver-500); overflow: hidden; text-overflow: ellipsis; }
.pw-val .caret-d { color: var(--silver-500); font-size: 10px; }
.pw-chat { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--black-900); }
.pw-chat-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.pw-chat-h strong { font-size: 13px; }
.pw-chat-h small { display: block; color: var(--silver-500); font-size: 11px; }
.pw-chat .ws-msgs { flex: 1; overflow: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.pw-composer { margin: 0 12px 8px; background: var(--black-950); border: 1px solid var(--line); border-radius: 4px; padding: 8px 8px 8px 12px; display: flex; align-items: flex-end; gap: 8px; }
.pw-composer textarea { flex: 1; border: 0; background: none; resize: none; padding: 0; font: 13px/1.45 var(--font); min-height: 40px; color: var(--text); }
.pw-composer textarea:focus { outline: none; box-shadow: none; }
.pw-send { width: 30px; height: 30px; border-radius: 4px; border: 0; background: var(--orange); color: #fff; font-size: 14px; cursor: pointer; flex: none; }
.pw-send:disabled { opacity: .4; }
.pw-own { border: 0; background: none; text-align: left; font: 11.5px var(--font); color: var(--silver-500); padding: 0 16px 14px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.pw-own:hover { color: var(--text); }
/* popovers of the property rows */
.popover.pw-pop { width: 330px; padding: 8px; gap: 2px; background: var(--black-900); border-radius: 4px; }
.popover.pw-pop:has(.mp-inline) { width: 360px; }
.popover .pw-opt { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 8px 10px; border-radius: 4px; text-align: left; background: none; width: 100%; }
.popover .pw-opt:hover:not(:disabled):not(.static) { background: var(--black-700); }
.pw-opt .r { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--silver-500); margin-top: 3px; font-size: 12px; line-height: 1; }
.pw-opt .r:not(:empty) { border: 0; margin-top: 1px; }
.pw-opt.on .r { border: 4px solid var(--orange); }
.pw-opt strong { font: 500 13px var(--font); display: block; color: var(--text); }
.pw-opt small { font-size: 11.5px; color: var(--muted); line-height: 1.4; display: block; font-weight: 400; }
.pw-opt.off { opacity: .45; cursor: not-allowed; }
.pw-pop-field { padding: 4px 10px 6px 38px; display: flex; flex-direction: column; gap: 4px; }
.pw-pop-field small { color: var(--muted); font-size: 11.5px; }
.pw-pop-note { margin: 4px 10px; font-size: 11.5px; color: var(--muted); }
.pw-pop-foot { padding: 6px 10px 2px; font-size: 12px; border-top: 1px solid var(--line); margin-top: 4px; }
.pw-sched { padding: 0 10px 0 38px; }
.pw-sched fieldset.sched { border: 0; padding: 0; margin: 0; }
.mp-inline .mp-panel { position: static; box-shadow: none; border: 0; padding: 0; background: none; }
@media (max-width: 900px) {
  .pw-bd { grid-template-columns: 1fr; overflow: auto; }
  .pw-chat { border-left: 0; border-top: 1px solid var(--line); min-height: 360px; }
  .pw-props { grid-template-columns: 1fr; }
  .pw-flow { grid-template-columns: 1fr; }
  .pw-core { display: none; }
  .pw-seg span, .pw-state { display: none; }
}
.pw-sched label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; font: 500 13px var(--font); color: var(--text); margin: 4px 0 6px; }
.pw-sched label.check input { width: auto; margin: 0; }
.pw-sched .sched-row { display: flex; gap: 6px; }
.pw-sched .sched-row > * { flex: 1; min-width: 0; }
.pw-sched small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* „Mit KI …" box */
.ai-ask { position: fixed; z-index: 1600; width: 380px; background: var(--black-900); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-ask-h { display: flex; align-items: center; gap: 8px; }
.ai-ask-h span { font: 600 12px var(--font); color: var(--orange-400); }
.ai-ask-h small { flex: 1; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ask textarea { width: 100%; resize: vertical; font: 13px/1.45 var(--font); }
.ai-ask-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.ai-ask-out { border-top: 1px solid var(--line); padding-top: 8px; font-size: 13px; max-height: 260px; overflow: auto; }
.ai-ask-step { margin: 0; color: var(--orange-400); animation: pb-pulse 1.6s ease-in-out infinite; }
/* ticked rows */
.el-table td.row-check, .el-table th.row-check { text-align: center; padding: 6px 0; cursor: default; }
.row-check input { width: 14px; height: 14px; margin: 2px 0 0; cursor: pointer; accent-color: var(--orange); opacity: .35; }
.el-table tr:hover .row-check input, .row-check input:checked, th.row-check input { opacity: 1; }
.el-table tr.checked td { background: color-mix(in srgb, var(--orange) 8%, transparent); }
/* floats below the database (doesn't push the rows down, so the checkboxes stay where they are) */
.tbl-bulk { position: absolute; left: 50%; top: calc(100% + 30px); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border: 1px solid var(--el-border); border-radius: 4px; background: var(--el-bg); box-shadow: none;
  font-size: 12px; white-space: nowrap; }
.tbl-bulk strong { color: var(--orange-600); margin-right: 6px; }
.tbl-bulk button { font: 500 12px var(--font); background: var(--el-bg); color: var(--ink); border: 1px solid var(--el-border); border-radius: 3px; padding: 3px 9px; cursor: pointer; }
.tbl-bulk button:hover { border-color: var(--orange); color: var(--orange); }
.tbl-bulk button.danger { color: var(--danger); }
.ctx-title { font-size: 11px; color: var(--muted); padding: 4px 10px 6px; }

/* Markdown tables (agent answers, chat, row pages, previews) */
.md-table { overflow-x: auto; margin: 8px 0; }
.md-table table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.md-table th { background: var(--black-700); font-weight: 600; }

/* Run count next to ▶ (row by row) */

.pw-count { border: 1px solid var(--line); background: var(--black-950); color: var(--text); border-radius: 4px; padding: 6px 10px; font: 600 13px var(--font); cursor: pointer; }
.pw-count small { font-weight: 400; color: var(--muted); }
.pw-count:hover { border-color: var(--orange); }
.count-pop .rr-pick button { min-width: 38px; }
.count-pop .rr-pick button.on { background: var(--orange); color: #fff; }
/* History tab */
.pw-tabs { display: flex; gap: 2px; }
.pw-tabs button { border: 0; background: none; color: var(--muted); font: 600 13px var(--font); padding: 4px 10px; border-radius: 3px; cursor: pointer; }
.pw-tabs button.on { color: var(--text); background: var(--black-700); }
.pw-history { flex: 1; overflow: auto; padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pw-run { border: 1px solid var(--line); border-radius: 4px; background: var(--black-800); padding: 0 10px; }
.pw-run summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; font-size: 12.5px; list-style: none; }
.pw-run summary::-webkit-details-marker { display: none; }
.pw-run .st { width: 16px; text-align: center; }
.pw-run.done .st { color: var(--ok); } .pw-run.error .st { color: var(--danger); } .pw-run.running .st { color: var(--orange-400); }
.pw-run .when { font-weight: 600; }
.pw-run .who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-run .note { margin: 0 0 6px; font-size: 12.5px; }
.pw-run ol { list-style: none; margin: 0; padding: 0 0 6px; display: flex; flex-direction: column; gap: 3px; }
.pw-run li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--silver); }
.pw-run li input { width: 13px; height: 13px; margin: 2px 0 0; flex: none; accent-color: var(--orange); opacity: .35; }
.pw-run li:hover input, .pw-run li input:checked { opacity: 1; }
.pw-run li i { font-style: normal; color: var(--silver-500); width: 14px; flex: none; text-align: center; }
.pw-run li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pw-run li time { color: var(--silver-500); font-size: 11px; flex: none; }
.pw-run-tools { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font-size: 11.5px; color: var(--muted); }
.pw-run-tools label { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; }
.pw-run-tools input { width: auto; margin: 0; accent-color: var(--orange); }
.pw-run-tools button { border: 1px solid var(--line); background: var(--black-900); color: var(--text); border-radius: 3px; padding: 2px 8px; font: 500 11.5px var(--font); cursor: pointer; }
.pw-run-tools button:hover { border-color: var(--orange); }
.pw-check { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font: 500 13px var(--font); color: var(--text); }
.pw-check input { width: auto; margin: 0; }
.pw-rule { color: var(--sand) !important; }
.pw-run li.st-error { color: var(--danger); } .pw-run li.st-ok i { color: var(--ok); } .pw-run li.st-handoff i, .pw-run li.st-row i { color: var(--orange-400); }
.pw-run .meta { display: block; color: var(--silver-500); font-size: 11px; padding-bottom: 8px; }

/* Search, relations, views that follow a selection */
.tbl-tools .tbl-search { width: 130px; font: 500 11px var(--font); padding: 3px 8px; border-radius: 3px; border: 1px solid var(--el-border); background: var(--el-bg); color: var(--ink); }
.tbl-tools .tbl-search:focus { width: 180px; border-color: var(--orange); outline: none; }
.rel-chip { display: inline-block; padding: 1px 8px; margin: 1px 4px 1px 0; border-radius: 3px; font-size: 12px; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--ink); white-space: nowrap; }
.rel-chip::before { content: "⇄ "; opacity: .5; font-size: 10px; }
.popover.rel-pop { width: 300px; }
.rel-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; }
.rel-opt { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 4px; border-radius: 3px; font-size: 13px; margin: 0; cursor: pointer; }
.rel-opt:hover { background: var(--black-700); }
.rel-opt input { width: auto; margin: 0; accent-color: var(--orange); }
.tbl-follow { padding: 5px 12px; font-size: 12px; color: var(--el-muted); background: color-mix(in srgb, var(--blue) 8%, transparent); border-bottom: 1px solid var(--el-line); }
.popover button.on { background: var(--orange); color: #fff; }
.popover .col-eye { display: flex; align-items: center; gap: 8px; text-align: left; background: none; }
.popover .col-eye span { width: 18px; color: var(--silver-500); text-align: center; }
.popover .col-eye em { flex: 1; font-style: normal; }
.popover .col-eye b { font-weight: 400; }
.popover .col-eye.off em { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--silver-800); }

/* Templates, automations, button cells */
.tbl-add-split { display: flex; flex: 1; }
.tbl-add-split .tbl-add-row { flex: 1; }
.tbl-add-tpl { border: 0; border-left: 1px solid var(--el-line); background: none; color: var(--el-muted); padding: 0 10px; cursor: pointer; font: 500 12px var(--font); }
.tbl-add-tpl:hover { color: var(--orange); }
.tpl-row { display: flex; gap: 4px; }
.tpl-row button:first-child { flex: 1; text-align: left; }
.cell-btn { font: 600 11.5px var(--font); padding: 3px 10px; border-radius: 3px; border: 1px solid var(--el-border); background: var(--el-bg); color: var(--ink); cursor: pointer; }
.cell-btn:hover { border-color: var(--orange); color: var(--orange); }
.auto { display: flex; flex-direction: column; gap: 10px; }
.auto-rule { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--black-900); }
.auto-rule.off { opacity: .5; }
.auto-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding-right: 32px; position: relative; }
.auto-line > .icon-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.auto-line b { width: 44px; color: var(--orange-400); font-weight: 600; }
.auto-line.then b { color: var(--sand); }
.auto-line select, .auto-line input:not([type=checkbox]) { width: auto; min-width: 0; max-width: 240px; padding: 5px 8px; font-size: 13px; }
.auto-line .icon-btn { margin-left: auto; }
.auto-on { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.auto-on input { width: auto; margin: 0; }
.auto-add-do { align-self: flex-start; font-size: 12px; padding: 3px 10px; }
.auto-adds { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-line .auto-url { flex: 1; min-width: 220px; }
.auto-warn { color: var(--orange-400); font-size: 11px; }

/* Column width: drag the header's right edge */
.el-table th[data-col] { position: relative; }
.col-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.col-resize:hover, .col-resize:active { background: linear-gradient(to right, transparent 2px, var(--orange) 2px, var(--orange) 4px, transparent 4px); }

/* Date cells: a calendar icon on hover; a click opens the calendar right away */
.el-table:not(.readonly) td.t-date { position: relative; }
.el-table:not(.readonly) td.t-date:not(.editing):hover::after { content: "▾"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .75; pointer-events: none; }

/* Multi-search */
.msearch input[type=search] { width: 100%; font: 14px var(--font); }
.ms-out { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.ms-group { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sand); }
.ms-group small { color: var(--silver-500); }
.ms-hit { display: flex; flex-direction: column; gap: 1px; text-align: left; border: 0; background: none; color: var(--text); padding: 6px 8px; border-radius: 3px; cursor: pointer; font: 13px var(--font); }
.ms-hit:hover { background: var(--black-700); }
.ms-hit span { font-size: 12px; color: var(--muted); }
.ms-hit em { font-style: normal; color: var(--silver-500); }
.ms-hit mark { background: color-mix(in srgb, var(--orange) 30%, transparent); color: var(--text); border-radius: 3px; padding: 0 2px; }

/* Magic fields (board.js magicDialog) */
.col-ai { color: var(--orange); margin-left: 5px; font-size: 11px; }
.mf-fill, .mf-busy, .mf-ext { border: 0; background: none; color: var(--orange); font-size: 12px; padding: 0 4px; opacity: 0; transition: opacity .15s; }
.mf-fill { cursor: pointer; }
.mf-ext { color: var(--el-muted); cursor: help; }
tr:hover .mf-fill, tr:hover .mf-ext { opacity: .9; }
.mf-fill:hover { opacity: 1; transform: scale(1.2); }
.mf-busy { opacity: 1; display: inline-block; animation: mf-pulse 1.2s ease-in-out infinite; }
@keyframes mf-pulse { 50% { opacity: .25; transform: scale(.8); } }
.mf { display: flex; flex-direction: column; gap: 14px; }
.mf textarea { width: 100%; }
.mf-set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mf-set legend { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0; margin-bottom: 6px; }
.mf-set label.radio span { display: flex; flex-direction: column; gap: 2px; }
.mf-set label.radio small { color: var(--muted); font-size: 12px; font-weight: 400; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-chip { flex-direction: row; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; color: var(--text); cursor: pointer; }
.mf-chip:has(input:checked) { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.mf-chip input { margin: 0; }
.mf-acts { flex-wrap: wrap; align-items: center; }
.mf-acts .grow { flex: 1; }

/* Documents on the board (board.js RENDER.doc, openDoc) */
.el-doc { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: none; color: var(--ink); }
.doc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--el-border); }
.doc-head strong { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-ico { font-size: 14px; }
.doc-open { border: 0; background: none; color: var(--el-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 3px; }
.doc-open:hover { color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.doc-body { flex: 1; overflow: hidden; padding: 10px 14px; font-size: 12.5px; line-height: 1.55; position: relative;
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.doc-body h3, .doc-body h4, .doc-body h5, .doc-body h6 { margin: 8px 0 4px; font-size: 14px; }
.doc-body h3 { font-size: 16px; }
.doc-body p { margin: 0 0 6px; }
.doc-body ul, .doc-body ol { margin: 0 0 6px; padding-left: 18px; }
.doc-empty { color: var(--el-muted); }
.md li.md-task, .md-view li.md-task { list-style: none; margin-left: -18px; }
.md li.md-task::before, .md-view li.md-task::before { content: "☐ "; color: var(--el-muted, var(--muted)); }
.md li.md-task.done::before, .md-view li.md-task.done::before { content: "☑ "; color: var(--orange); }
.md li.md-task.done, .md-view li.md-task.done { color: var(--el-muted, var(--muted)); text-decoration: line-through; }

/* outlet dialog: two selects side by side */
.row-inline { display: flex; gap: 8px; }
.row-inline select { flex: 1; min-width: 0; }

/* Windows moved by their header float over the board; the board stays usable until they are closed. */
.modal-head, .pw-hd, .rp2-bar, .ai-ask-h { cursor: grab; }
.dragging, .dragging * { cursor: grabbing !important; user-select: none; }
.modal-backdrop.modal-free { background: transparent; backdrop-filter: none; pointer-events: none; }
.modal-backdrop.modal-free .modal { pointer-events: auto; box-shadow: var(--shadow); }

/* Focus Mode: one element in the middle, the rest of the board greyed out (it stays editable) */
.focus-mode #viewport { background-color: color-mix(in srgb, var(--bg) 70%, #000); }
.focus-mode #nodes > :not(.focus-el):not(.focus-in), .focus-mode #ink-layer { opacity: .1; filter: grayscale(1); pointer-events: none; transition: opacity .2s; }
.focus-mode #nodes > .focus-el { box-shadow: var(--shadow); }
.focus-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 3px; background: var(--el-bg); border: 1px solid var(--border); box-shadow: none; }
.focus-bar span { font: 600 13px var(--font); color: var(--orange-400); }
.focus-bar small { color: var(--muted); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-bar kbd { font: 11px var(--mono, monospace); opacity: .7; margin-left: 4px; }

/* Columns on this board: visible | hidden side by side, each list scrolls */
.popover.cols-pop { width: min(560px, calc(100vw - 16px)); }
.cols-pop .cols-q { width: 100%; margin: 4px 0 8px; }
.cols-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cols-two h4 { margin: 0 0 4px; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cols-two h4 small { font-weight: 500; margin-left: 4px; }
.cols-list { max-height: min(340px, 50vh); overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; padding: 4px; }
.cols-list .col-eye { width: 100%; }
@media (max-width: 520px) { .cols-two { grid-template-columns: 1fr; } }

/* Notion-style blocks: callout, embeds (image, linked database view), @ suggestions, /database picker */
.ed-callout, .md-callout { display: block; position: relative; margin: 8px 0; padding: 10px 14px 10px 42px; border-radius: 4px;
  color: var(--text); background: color-mix(in srgb, var(--orange) 9%, var(--el-bg)); border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent); }
.ed-callout::before, .md-callout::before { content: "i"; font: 600 12px var(--mono); color: var(--orange); position: absolute; left: 14px; top: 9px; }
.ed-callout[data-kind="WARNING"]::before, .md-callout[data-kind="WARNING"]::before, .ed-callout[data-kind="CAUTION"]::before, .md-callout[data-kind="CAUTION"]::before { content: "⚠️"; }
.ed-callout[data-kind="TIP"]::before, .md-callout[data-kind="TIP"]::before { content: "✅"; }
.ed-callout[data-kind="IMPORTANT"]::before, .md-callout[data-kind="IMPORTANT"]::before { content: "❗"; }
.ed-embed { position: relative; margin: 10px 0; border-radius: 4px; user-select: none; }
.ed-embed:hover { outline: 2px solid color-mix(in srgb, var(--orange) 45%, transparent); }
.ed-embed-x { position: absolute; top: 6px; right: 6px; display: none; width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--border);
  background: var(--el-bg); color: var(--muted); cursor: pointer; }
.ed-embed:hover .ed-embed-x { display: block; }
.ed-img img, .md-img img { display: block; max-width: 100%; border-radius: 4px; }
.ed-view { border: 1px solid var(--border); padding: 10px 12px; background: var(--el-bg); }
.ed-view-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; padding-right: 30px; }
.ed-view-hd span { font-size: 12px; padding: 1px 8px; border-radius: 3px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange-400); }
.ed-view-hd small { color: var(--muted); flex: 1; }
.ed-view-hd a { font-size: 12px; color: var(--orange-400); text-decoration: none; }
.ed-view-tbl { overflow-x: auto; }
.ed-view-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ed-view-tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ed-view-tbl td { padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-view-tbl tbody tr { cursor: pointer; }
.ed-view-tbl tbody tr:hover { background: color-mix(in srgb, var(--orange) 6%, transparent); }
a.ed-ref, a.md-view { color: var(--orange-400); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); cursor: pointer; }
.popover.ed-mention { width: 330px; max-height: 320px; overflow-y: auto; padding: 4px; }
.ed-mention button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 3px; background: none; }
.ed-mention button.on, .ed-mention button:hover { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.ed-mention i { width: 20px; text-align: center; font-style: normal; color: var(--muted); }
.ed-mention span { display: flex; flex-direction: column; min-width: 0; }
.ed-mention strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-mention small { color: var(--muted); font-size: 11px; }
.popover.ed-pick { width: 380px; }
.ed-pick input { width: 100%; margin: 4px 0 8px; }
.ed-pick-list { max-height: 320px; overflow-y: auto; }
.ed-pick-db { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.ed-pick-db small { color: var(--muted); margin-left: 6px; }
.ed-pick-views { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ed-pick-views button { font-size: 12px; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--border); background: none; }
.ed-pick-views button:hover { border-color: var(--orange); color: var(--orange-400); }

/* option colours: a dot per option, a palette row under it; the option list in the column menu */
.opt-row { display: flex; align-items: center; gap: 4px; }
.opt-row > [data-opt] { flex: 1; }
.opt-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); padding: 0; cursor: pointer; }
.opt-palette { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 8px 4px; }
.opt-palette button { width: 20px; height: 20px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .12); padding: 0; cursor: pointer; }
.opt-palette button.on { outline: 2px solid var(--orange); outline-offset: 1px; }
.opt-edit-label { display: block; font-size: 12px; color: var(--muted); margin: 6px 0 4px; }
.opt-edit { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.opt-edit-row { display: flex; align-items: center; gap: 6px; }
.opt-edit-row input { flex: 1; padding: 4px 8px; font-size: 13px; }
.auto-rule.broken { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.auto-broken { margin: 0 0 4px; font-size: 12px; color: var(--danger); }

/* bend handles of the selected arrow */
#bend-handles .bend { pointer-events: all; cursor: move; fill: var(--el-bg); stroke: var(--orange); stroke-width: calc(2px / var(--zoom)); }
#bend-handles .bend.add { fill: var(--orange); stroke: var(--el-bg); opacity: .75; }
#bend-handles .bend:hover { opacity: 1; }

/* ⌘K actions / ⌘⇧F search */
.cmdk-wrap { position: fixed; inset: 0; z-index: 4000; background: rgba(0, 0, 0, .35); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.cmdk { width: min(620px, calc(100vw - 32px)); background: var(--el-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-q { border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 16px 18px !important; font-size: 16px !important; background: transparent !important; color: var(--text); outline: none; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-group { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 4px; background: none; border: 0; color: var(--text); cursor: pointer; font: 14px var(--font); }
.cmdk-item.on, .cmdk-item:hover { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.cmdk-item i { width: 22px; text-align: center; font-style: normal; color: var(--muted); }
.cmdk-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cmdk-foot { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }

/* prompt block self-configuration */
.pw-auto { white-space: nowrap; }
.ac-why { padding: 10px 12px; border-radius: 4px; background: color-mix(in srgb, var(--orange) 8%, transparent); margin: 8px 0; font-size: 13px; }
.ac-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.ac-row { display: grid; grid-template-columns: 20px 150px 1fr; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.ac-k { font-weight: 600; }
.ac-v s { color: var(--muted); }
.ac-md { max-height: 220px; overflow-y: auto; padding: 6px 8px; border-radius: 3px; background: var(--black-900, rgba(0,0,0,.15)); }

/* hidden arrows: only a softly glowing dot at each end; shown on hover, on a connected element's hover, or selected */
.conn .stub { display: none; }
.conn.ghost .line, .conn.ghost .flow, .conn.ghost .clabel { opacity: 0; transition: opacity .18s; }
.conn.ghost .hit { pointer-events: none; }
.conn.ghost .stub { display: block; fill: var(--orange); opacity: .55; pointer-events: all; cursor: pointer;
  filter: drop-shadow(0 0 4px var(--orange)); animation: stub-glow 2.4s ease-in-out infinite; }
.conn.ghost:hover .line, .conn.ghost.reveal .line, .conn.ghost.selected .line, .conn.ghost:hover .clabel, .conn.ghost.reveal .clabel, .conn.ghost.selected .clabel { opacity: .9; }
.conn.ghost:hover .hit, .conn.ghost.selected .hit { pointer-events: stroke; }
@keyframes stub-glow { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
#bend-handles .bend.end { fill: var(--el-bg); stroke: var(--orange); stroke-width: calc(2.5px / var(--zoom)); cursor: grab; }
#bend-handles .bend.seg { fill: var(--el-bg); stroke: var(--orange); stroke-width: calc(1.5px / var(--zoom)); opacity: 1; }
.conn.unplugging { opacity: .25; }

/* Chat block (app/chats.py): messages scroll inside, the input sits at the bottom */
.el-chat { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: none; color: var(--ink); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--el-border); }
.chat-head strong { flex: 1; min-width: 0; font: 600 13px var(--cond); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ico { font-size: 14px; }
.chat-count { font: 500 11px var(--mono); color: var(--el-muted); }
.chat-list { flex: 1; overflow-y: auto; padding: 4px 12px; display: flex; flex-direction: column; gap: 0; overscroll-behavior: contain; }
.chat-older { align-self: center; border: 1px solid var(--el-border); background: none; color: var(--el-muted); border-radius: 3px; font-size: 11px; padding: 3px 10px; cursor: pointer; }
.chat-older:hover { color: var(--orange); border-color: var(--orange); }
.chat-empty { color: var(--el-muted); font-size: 12.5px; margin: auto 0; text-align: center; }
/* chat as a log, not messenger bubbles: one line per message, hairline between, a rule on the left marks who wrote */
.chat-msg { align-self: stretch; padding: 7px 0 7px 10px; border-left: 2px solid transparent; border-bottom: 1px solid var(--el-line); }
.chat-msg.mine { border-left-color: var(--el-border); }
.chat-msg.ai { border-left-color: var(--orange); }
.chat-meta { display: flex; gap: 8px; align-items: baseline; font: 500 10.5px var(--mono); letter-spacing: .4px; text-transform: uppercase; color: var(--el-muted); margin-bottom: 2px; }
.chat-meta strong { color: var(--ink); font-weight: 600; }
.chat-msg.ai .chat-meta strong { color: var(--orange); }
.chat-text { font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.chat-text.md { white-space: normal; }
.chat-text.md p { margin: 0 0 4px; }
.chat-text.md p:last-child { margin: 0; }
.chat-text.md ul, .chat-text.md ol { margin: 0 0 4px; padding-left: 18px; }
.chat-form { display: flex; gap: 6px; align-items: flex-end; padding: 8px 10px; border-top: 1px solid var(--el-border); }
.chat-form textarea { flex: 1; resize: none; border: 1px solid var(--el-border); border-radius: 4px; background: var(--el-bg); color: var(--ink);
  font: inherit; font-size: 13px; padding: 6px 8px; max-height: 120px; line-height: 1.4; }
.chat-form textarea:focus { outline: none; border-color: var(--orange); }
.chat-send { border: 0; background: var(--orange); color: #fff; border-radius: 4px; width: 30px; height: 30px; cursor: pointer; font-size: 15px; }
.chat-ro { margin: 0; padding: 8px 12px; font-size: 11px; color: var(--el-muted); border-top: 1px solid var(--el-border); }

/* „Mit KI“ for later (app/ai_queue.py): ⏳ on the elements, a counter in the header, the list in a popover */
#aiq-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2000000000; }
.aiq-badge { position: absolute; transform: translate(-100%, -100%); margin-top: calc(-8px / var(--zoom)); pointer-events: auto; cursor: pointer; white-space: nowrap; z-index: 3;
  font: 600 calc(11px / var(--zoom)) var(--font); padding: calc(2px / var(--zoom)) calc(7px / var(--zoom)); border-radius: 3px;
  background: var(--orange); color: #fff; box-shadow: none; }
.aiq-btn { color: var(--orange); }
.aiq-pop { width: 320px; max-height: 60vh; overflow: auto; padding: 10px; }
.aiq-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 4px 0 6px; }
.aiq-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.aiq-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aiq-item strong { font-size: 13px; font-weight: 500; }
.aiq-item small { font-size: 11px; color: var(--muted); }
.aiq-item.done strong { color: var(--muted); }
.aiq-hint { font-size: 11px; color: var(--muted); margin: 8px 0; }

/* Transcript block: the recordings started in it, live; a red dot while it listens */
.el-transcript { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: none; color: var(--ink); }
.el-transcript.live { border-color: var(--danger); }
.tb-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 8px 12px; border-bottom: 1px solid var(--el-border); }
.tb-head strong { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--el-muted); flex: none; }
.el-transcript.live .tb-dot { background: var(--danger); animation: rec-pulse 1.4s ease-in-out infinite; }
.tb-btn { border: 1px solid var(--el-border); background: none; color: var(--ink); border-radius: 3px; font-size: 12px; padding: 3px 8px; cursor: pointer; }
.tb-btn.rec { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.tb-btn:hover { border-color: var(--orange); }
.tb-list { flex: 1; overflow-y: auto; padding: 8px 12px; overscroll-behavior: contain; font-size: 12.5px; }
.tb-list .tr-seg { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; padding: 2px 0; user-select: text; }
.tb-list .tr-time { color: var(--el-muted); font-size: 11px; }
.tb-empty { color: var(--el-muted); margin: 18px 4px; text-align: center; font-size: 12.5px; }
.tb-status { padding: 6px 12px; font-size: 11px; color: var(--el-muted); border-top: 1px solid var(--el-border); }

/* Timeline filters */
.tl-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
.tl-chip { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 3px; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.tl-chip.on { color: var(--text); border-color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
#zoombar [data-wasd].on { color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.tb-mics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--el-border); font-size: 11.5px; }
@keyframes mic-buzz { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1px, 0) rotate(-8deg); } 50% { transform: translate(1px, -1px) rotate(6deg); } 75% { transform: translate(-1px, 1px) rotate(-4deg); } }
.tb-btn.on { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.tb-list .tr-seg.interim .tr-text { color: var(--el-muted); font-style: italic; }
.tb-status.warn { color: var(--danger); }

/* Grip at the top middle of a block (shown on hover there): always moves the block */
#grip { position: absolute; z-index: 2000000003; width: calc(44px / var(--zoom)); height: calc(12px / var(--zoom)); transform: translate(-50%, 35%);
  border-radius: calc(6px / var(--zoom)); background: var(--el-bg, #fff); border: 1px solid var(--orange); cursor: grab;
  box-shadow: none; display: flex; align-items: center; justify-content: center; }
#grip::before { content: ""; width: 55%; height: calc(4px / var(--zoom)); border-top: calc(1.5px / var(--zoom)) solid var(--orange); border-bottom: calc(1.5px / var(--zoom)) solid var(--orange); opacity: .8; }
#grip[hidden] { display: none; }
.tb-list, .chat-list, .doc-body, .tb-list *, .chat-list *, .doc-body * { user-select: text; -webkit-user-select: text; cursor: text; }
.el-transcript.paused { border-color: var(--el-border); }
.el-transcript.paused .tb-dot { animation: none; background: var(--warn); }
.tb-time { font-size: 11px; color: var(--el-muted); font-variant-numeric: tabular-nums; }
.tb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 3px; font-size: 11.5px; border: 1px solid transparent;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); font-family: inherit; }
button.tb-chip { cursor: pointer; }
.tb-chip i { font-style: normal; display: inline-block; }
.tb-chip.off { color: var(--el-muted); text-decoration: line-through; }
.tb-chip.talking { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.tb-chip.talking i { animation: mic-buzz .18s linear infinite; }
.tb-chip.add { background: none; border: 1px dashed color-mix(in srgb, var(--orange) 60%, transparent); color: var(--orange); }
.tb-x { border: 0; background: none; color: var(--el-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 0 0 4px; }
.tb-x:hover { color: var(--ink); }
.tb-hint { padding: 0 12px 6px; font-size: 11px; color: var(--el-muted); line-height: 1.4; }
.tb-card { display: flex; align-items: center; gap: 8px; margin: 6px 10px 0; padding: 7px 9px; border-radius: 4px; font-size: 12px; line-height: 1.4;
  background: color-mix(in srgb, var(--danger) 9%, transparent); }
.tb-card span { flex: 1; }
.tb-card.consent { background: color-mix(in srgb, var(--orange) 10%, transparent); }
.tb-progress { height: 3px; margin: 0 12px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.tb-progress i { display: block; height: 100%; background: var(--orange); transition: width .3s; }
/* Transcript block text: one turn per speaker, name and time above the words */
.tb-turn { padding: 6px 0 8px; }
.tb-turn + .tb-turn { border-top: 1px solid color-mix(in srgb, var(--el-border) 60%, transparent); }
.tb-who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.tb-who b { font-size: 11.5px; font-weight: 600; }
.tb-who span { font-size: 10.5px; color: var(--el-muted); font-variant-numeric: tabular-nums; }
.tb-turn p { margin: 0 0 3px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.tb-turn p.interim { color: var(--el-muted); font-style: italic; }
.tb-lang { border: 1px solid var(--el-border); background: var(--el-bg); color: var(--ink); border-radius: 3px; font: inherit; font-size: 11.5px; padding: 2px 4px; cursor: pointer; }

/* Task box (human in the loop): open tasks with checkboxes, done ones folded, what ticking off does at the bottom */
.el-taskbox { background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: none; color: var(--ink); }
.tk-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 8px 12px; border-bottom: 1px solid var(--el-border); }
.tk-head strong { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ico { color: var(--orange); }
.tk-count { min-width: 20px; text-align: center; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--el-muted); }
.tk-count.on { background: var(--orange); color: #fff; }
.tk-instr { padding: 6px 12px; font-size: 11.5px; color: var(--el-muted); border-bottom: 1px solid var(--el-border); }
.tk-list { flex: 1; overflow-y: auto; padding: 4px 6px; overscroll-behavior: contain; }
.tk-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px; border-radius: 4px; }
.tk-item .tk-body, .tk-item .tk-body * { cursor: text; user-select: text; -webkit-user-select: text; }  /* mark and copy; the box ticks */
.tk-item .tk-edit, .tk-item .tk-edit-details { width: 100%; font: 13px/1.4 var(--font); color: var(--ink); background: var(--el-bg);
  border: 1px solid var(--el-border); border-radius: 3px; padding: 3px 6px; }
.tk-item .tk-edit-details { margin-top: 4px; font-size: 12px; resize: vertical; }
.tk-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.tk-item input { margin-top: 2px; accent-color: var(--orange); cursor: pointer; width: 15px; height: 15px; flex: none; }
.tk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tk-title { font-size: 13px; line-height: 1.4; }
.tk-details { font-size: 11.5px; color: var(--el-muted); line-height: 1.35; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tk-meta { font-size: 10.5px; color: var(--el-muted); }
.tk-item.done .tk-title { text-decoration: line-through; color: var(--el-muted); }
.tk-del { border: 0; background: none; color: var(--el-muted); cursor: pointer; opacity: 0; font-size: 14px; }
.tk-item:hover .tk-del { opacity: 1; }
.tk-done summary { cursor: pointer; font-size: 11.5px; color: var(--el-muted); padding: 6px; }
.tk-empty { color: var(--el-muted); font-size: 12px; text-align: center; margin: 16px 0; }
.tk-add { padding: 6px 10px; border-top: 1px solid var(--el-border); }
.tk-add input { width: 100%; border: 1px solid var(--el-border); border-radius: 3px; background: var(--el-bg); color: var(--ink); font: inherit; font-size: 12.5px; padding: 5px 8px; }
.tk-add input:focus { outline: none; border-color: var(--orange); }
.tk-foot { padding: 6px 12px; font-size: 10.5px; color: var(--el-muted); border-top: 1px solid var(--el-border); }
.el-taskbox .tk-item { flex-direction: row; margin: 0; font-weight: 400; }
.el-taskbox .tk-item input[type=checkbox] { width: 15px; height: 15px; padding: 0; margin: 2px 0 0; }
.tk-src { display: block; margin-top: 2px; font-size: 10.5px; }
/* The board's AI in a chat block */
.chat-ai { border: 1px solid var(--el-border); background: none; color: var(--el-muted); border-radius: 3px; font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.chat-ai.on { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 60%, transparent); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.chat-at { border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); background: none; color: var(--orange); border-radius: 3px; font: inherit; font-size: 11.5px; font-weight: 600; padding: 0 8px; height: 30px; cursor: pointer; white-space: nowrap; }
.chat-at.on { background: var(--orange); color: #fff; border-color: var(--orange); }
.chat-form.to-ai textarea { border-color: var(--orange); }
.chat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 5px; vertical-align: 1px; }
.chat-intro { align-self: stretch; margin: 0; padding: 7px 9px; border-radius: 4px; font-size: 11.5px; line-height: 1.45; color: var(--el-muted);
  background: color-mix(in srgb, var(--orange) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--orange) 35%, transparent); }
.chat-mention { color: var(--orange); font-weight: 600; background: color-mix(in srgb, var(--orange) 14%, transparent); border-radius: 3px; padding: 0 3px; }
.chat-to { color: var(--orange); font-weight: 600; }
.chat-ask { margin-top: 4px; border: 0; background: none; color: var(--orange); font: inherit; font-size: 11px; cursor: pointer; padding: 0; }
.chat-ask:hover { text-decoration: underline; }
.chat-msg.err { border-left-color: var(--danger); }
.chat-typing { align-self: flex-start; font-size: 12px; color: var(--orange); font-style: italic; padding: 2px 4px; }
.chat-typing span { color: var(--el-muted); }
#contextbar .ctx-clean { color: var(--orange); font-weight: 600; }
.chat-form { position: relative; }
.chat-suggest { position: absolute; left: 10px; bottom: calc(100% - 4px); min-width: 180px; max-width: 80%; display: flex; flex-direction: column; padding: 4px;
  background: var(--el-bg); border: 1px solid var(--el-border); border-radius: 4px; box-shadow: none; z-index: 5; }
.chat-suggest button { text-align: left; border: 0; background: none; color: var(--ink); font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 3px; cursor: pointer; }
.chat-suggest button.on, .chat-suggest button:hover { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.chat-reply { font-size: 11px; color: var(--el-muted); margin-bottom: 3px; border-left: 2px solid color-mix(in srgb, var(--orange) 50%, transparent); padding-left: 6px; }
.chat-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chat-act { border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ink);
  border-radius: 3px; font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; }
.chat-act:disabled { cursor: default; opacity: .8; }
.chat-act:not(:disabled):hover { border-color: var(--ok); }
.chat-stop { margin-left: 8px; border: 1px solid var(--el-border); background: var(--el-bg); color: var(--ink); border-radius: 3px; font: inherit; font-size: 11px; font-style: normal; padding: 1px 7px; cursor: pointer; }
.chat-stop:hover { border-color: var(--danger); color: var(--danger); }

/* ── Instrument system: one key, one tag, one module label, one busy light for the whole board ── */
/* module label: mono caps + LED (the dot carries the type colour, the text stays ink) */
.pb-badge { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--el-muted); white-space: nowrap; }
.pb-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }
/* tags inside blocks (mode, chips, counters): square, hairline, mono */
.pb-mode, .tb-chip, .tk-count, .kr-chip, .kr-pill, .ref-chip, .mf-chip, .tl-chip, .chat-ai, .chat-older, .pw-badge, .ed-view-hd span, .ed-pick-views button {
  border-radius: 2px !important; font-family: var(--mono) !important; letter-spacing: .3px; }
/* ── Status lights around a block (set by applyLight in board.js) ──
   work = scanner light behind the block, left to right and back (Knight Rider); only the part spilling past the edges shows.
   done = teal glow around the block, pulsing, fading out over 20 s. wait = soft orange breathing. err = fast red SOS. */
@property --lt-a { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --lt-p { syntax: "<number>"; inherits: false; initial-value: 0; }
.el:is(.lt-work, .busy, .ai-working) { overflow: visible; }
.el:is(.lt-work, .busy, .ai-working)::before {
  content: ""; position: absolute; inset: -34px -48px; padding: 34px 48px; z-index: -1; pointer-events: none; filter: blur(11px);
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--rec) 25%, transparent) 25%, color-mix(in srgb, var(--rec) 75%, transparent) 45%,
    var(--orange-400) 50%, color-mix(in srgb, var(--rec) 75%, transparent) 55%, color-mix(in srgb, var(--rec) 25%, transparent) 75%, transparent 100%) no-repeat;
  background-size: 30% 100%; animation: kr-scan 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  /* only the ring outside the block (the light sits behind it), fading out toward its outer edge: the mask cuts after
     the blur, so a hard outer edge would show as a cut-off glow */
  --lt-fade-y: linear-gradient(transparent, #000 34px, #000 calc(100% - 34px), transparent);
  --lt-fade-x: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, var(--lt-fade-y), var(--lt-fade-x);
  -webkit-mask-composite: xor, source-in;
  mask: linear-gradient(#000 0 0) content-box exclude, var(--lt-fade-y) intersect, var(--lt-fade-x); }
.el:is(.lt-work, .busy) .pb-badge::before { background: var(--rec); animation: pb-pulse .8s steps(2) infinite; }
@keyframes kr-scan { from { background-position: -15% 0; } to { background-position: 115% 0; } }

.el:is(.lt-done, .lt-wait, .lt-err) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lt-c) calc(var(--lt-a) * var(--lt-p) * 100%), transparent),
    0 0 calc(8px + 22px * var(--lt-p)) calc(2px + 4px * var(--lt-p)) color-mix(in srgb, var(--lt-c) calc(var(--lt-a) * var(--lt-p) * 80%), transparent) !important; }
.el.lt-done { --lt-c: var(--teal); animation: lt-fade 20s linear forwards, lt-breathe 1.6s ease-in-out infinite alternate; animation-delay: var(--lt-age, 0s), 0s; }
.el.lt-wait { --lt-c: var(--orange-400); --lt-a: .55; animation: lt-breathe 2.8s ease-in-out infinite alternate; }
.el.lt-err { --lt-c: var(--rec); --lt-a: 1; animation: lt-sos 3.2s infinite; }
@keyframes lt-fade { from { --lt-a: 1; } 70% { --lt-a: .35; } to { --lt-a: 0; } }
@keyframes lt-breathe { from { --lt-p: .25; } to { --lt-p: 1; } }
/* · · ·  — — —  · · ·   (one unit = 100 ms) */
@keyframes lt-sos {
  0%, 6.25%, 12.5% { --lt-p: 1; } 3.125%, 9.375%, 15.625% { --lt-p: 0; }
  21.875% { --lt-p: 1; } 31.25% { --lt-p: 0; } 34.375% { --lt-p: 1; } 43.75% { --lt-p: 0; } 46.875% { --lt-p: 1; } 56.25% { --lt-p: 0; }
  62.5%, 68.75%, 75% { --lt-p: 1; } 65.625%, 71.875%, 78.125%, 100% { --lt-p: 0; } }
.el.lt-err { animation-timing-function: steps(1, end); }
@media (prefers-reduced-motion: reduce) {
  .el:is(.lt-work, .busy, .ai-working)::before { animation: none; background-position: 50% 0; }
  .el.lt-wait, .el.lt-err { animation: none; --lt-p: .8; } .el.lt-done { animation: lt-fade 20s linear forwards; --lt-p: .8; } }
/* line icons */
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ico .fill { fill: currentColor; stroke: none; }
.tool .ico { width: 17px; height: 17px; }
:is(.chat-ico, .doc-ico, .tk-ico, .scr-icon, .bar-icon, .col-typ, .r, .tb-chip i) .ico { width: 14px; height: 14px; vertical-align: -2px; }
.wasd-lab { font: 600 9px var(--mono); letter-spacing: .5px; }
.col-ai { font: 600 9px var(--mono); color: var(--orange); letter-spacing: .5px; }

/* ── Keys: one button system, modelled on the Kuzushi / TE hardware keys ──
   neutral key = flat plate + hairline, mono caps; pressed / on = inverted; primary = the one orange key; icon key = square. */
.btn, #contextbar button, #contextbar .ctx-link {
  height: 28px; padding: 0 11px; border-radius: 2px; border: 1px solid var(--line); background: var(--black-800); color: var(--text);
  font: 500 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; gap: 7px; }
.btn:hover, #contextbar button:hover, #contextbar .ctx-link:hover { background: var(--black-700); border-color: var(--silver-700); }
.btn:active, #contextbar button:active { background: var(--text); border-color: var(--text); color: var(--black-900); }
.btn-ghost { background: transparent; }
.btn-primary, .btn-primary:hover { background: var(--orange); border-color: var(--orange); color: #131417; font-weight: 600; }
.btn-primary:hover { background: var(--orange-400); border-color: var(--orange-400); }
.btn-primary:active { background: var(--orange-600); border-color: var(--orange-600); color: #131417; }
#contextbar button, #contextbar .ctx-link { border-color: transparent; background: transparent; height: 26px; }
#contextbar button.on { background: var(--text); color: var(--black-900); border-color: var(--text); }
.btn .ico, #contextbar .ico { width: 14px; height: 14px; }
.tool.on { background: var(--orange); color: #131417; }
.tool:hover:not(.on) { background: var(--black-700); }

/* keys on the board surface */
.pb-play, .pb-stop, .pb-count, .tb-btn, .chat-ai, .chat-at, .chat-stop, .cell-btn, .scr-btn, .io-gear, .el-interface .io-gear, .el-prompt .io-gear {
  height: 22px; min-width: 22px; padding: 0 8px; border-radius: 2px; border: 1px solid var(--el-border); background: var(--el-head); color: var(--ink);
  font: 600 10px/1 var(--mono) !important; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
:is(.pb-play, .pb-stop, .pb-count, .tb-btn, .chat-ai, .chat-at, .chat-stop, .cell-btn, .io-gear):hover:not(:disabled) { border-color: var(--ink); color: var(--ink); background: var(--el-head); }
:is(.pb-play, .pb-stop, .pb-count, .tb-btn, .chat-ai, .chat-at, .chat-stop, .cell-btn, .io-gear):active:not(:disabled),
:is(.chat-ai, .chat-at, .tb-btn).on { background: var(--key); border-color: var(--key); color: var(--key-ink); }
.io-gear, .tb-btn:has(> .ico:only-child) { width: 22px; padding: 0; }
.io-gear .ico, .tb-btn .ico { width: 13px; height: 13px; }
/* the one primary key on a block: orange, dark ink (same as "Teilen") */
.pb-play, .chat-send, .pw-send, .scr-start { background: var(--orange); border: 1px solid var(--orange); color: #131417; }
.pb-play:hover:not(:disabled) { background: var(--orange-400); border-color: var(--orange-400); color: #131417; }
.pb-play:disabled { background: var(--el-head); border-color: var(--el-border); color: var(--el-muted); }
.el-prompt.busy .pb-play { background: var(--el-head); border-color: var(--el-border); color: var(--el-muted); }
.chat-send, .pw-send { width: 28px; height: 28px; border-radius: 2px; font: 600 13px var(--mono); }
.chat-send:hover, .pw-send:hover { background: var(--orange-400); }
.scr-start { font: 600 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; border-radius: 2px; padding: 11px 18px; }
.scr-btn { background: var(--rec); border-color: var(--rec); color: #fff; }
/* LEDs inside keys: stop = red square, AI on = lit dot, rec = red dot */
.pb-stop::before { content: ""; width: 6px; height: 6px; background: var(--rec); }
.chat-ai .chat-dot { width: 6px; height: 6px; }
.chat-ai.on { color: var(--key-ink); }
.tb-btn.rec, .tb-btn.on, .chat-stop:hover { color: var(--rec); border-color: var(--rec); background: var(--el-head); }
.chat-ask { font: 600 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--orange); }
.mini-btn { font: 600 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; background: none; border: 1px solid var(--el-border); border-radius: 2px; color: var(--ink); }
.mini-btn:hover { border-color: var(--ink); }
.icon-btn { border-radius: 2px; }
.icon-btn:hover { background: var(--black-700); }
.led { width: 6px; height: 6px; border-radius: 50%; background: var(--rec); flex: none; display: inline-block; }
.led.sq { border-radius: 0; }
.led.on { animation: pb-pulse 1s steps(2) infinite; }
/* checkboxes: square switch, lit orange when on */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; padding: 0; border: 1px solid var(--el-muted, var(--muted));
  border-radius: 2px; background: transparent; display: inline-grid; place-content: center; cursor: pointer; flex: none; opacity: 1; }
input[type="checkbox"]::before { content: ""; width: 6px; height: 6px; background: transparent; }
input[type="checkbox"]:checked { border-color: var(--orange); }
input[type="checkbox"]:checked::before { background: var(--orange); }
input[type="checkbox"]:hover { border-color: var(--ink, var(--text)); }
.topbar input[type="checkbox"], .modal input[type="checkbox"], .menu-panel input[type="checkbox"] { border-color: var(--muted); }
.swatch { border-radius: 2px !important; }

/* Scrollbars inside board blocks: thin hairline thumbs in the block's own palette (the app chrome is dark, so the
   browser would otherwise draw dark scrollbars on light blocks) */
.el * { scrollbar-width: thin; scrollbar-color: var(--el-border) transparent; }
.el ::-webkit-scrollbar { width: 6px; height: 6px; }
.el ::-webkit-scrollbar-track { background: transparent; }
.el ::-webkit-scrollbar-thumb { background: var(--el-border); border-radius: 0; }
.el ::-webkit-scrollbar-thumb:hover { background: var(--el-muted); }

/* AI content streaming in: cells appear one after another, sliding into focus from the left */
.el-table td.cell-stream { animation: cell-stream 420ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes cell-stream { from { opacity: 0; filter: blur(3px); clip-path: inset(0 100% 0 0); } 60% { opacity: 1; } to { opacity: 1; filter: none; clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .el-table td.cell-stream { animation: none; } }

/* English placeholders for the German ones above (app/i18n.py; checked by tests/i18n_scan.py) */
html[lang="en"] .card-text:empty::before { content: "Double-click to write"; }
html[lang="en"] .cmt-text:empty::before { content: "Write a comment …"; }
html[lang="en"] .scr-title:empty::before { content: "Screen"; }
html[lang="en"] .el-prompt .pb-text:empty::before { content: "What should happen to the input? E.g. “Extract the action items”"; }

/* Board background (app/static/board.js "board background"): huge structures far behind the content, drawn on one
   canvas in hairlines of the canvas's own ink (--bg-ink as r, g, b; --bg-alpha is the strongest line), plus a very faint
   copy of the dots on the content plane so the cards' own motion still reads against the depth */
:root { --bg-ink: 16, 18, 20; --bg-alpha: .14; --bg-near-dot: rgba(16, 18, 20, .07); }
:root[data-theme="dark"] { --bg-ink: 243, 242, 238; --bg-alpha: .15; --bg-near-dot: rgba(243, 242, 238, .05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-ink: 243, 242, 238; --bg-alpha: .15; --bg-near-dot: rgba(243, 242, 238, .05); } }
.viewport.bg-drawn { background-image: none; }
#bg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; display: none;
  background-size: inherit; background-position: inherit; }
.viewport.bg-drawn #bg-layer { display: block; }
#bg-layer .bg-far { position: absolute; inset: 0; width: 100%; height: 100%; }
#bg-layer .bg-near { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--bg-near-dot) calc(var(--bg-strength) * 100%), transparent) 1.2px, transparent 1.2px);
  background-size: inherit; background-position: inherit; }
#bg-layer:is([data-kind="none"], [data-dots="off"]) .bg-near { display: none; }
#world { z-index: 1; }  /* above the background layer */
.bg-menu { width: 300px; }
.bg-menu .bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0; }
.bg-menu .bg-grid button { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; border: 1px solid var(--line);
  border-radius: 3px; background: transparent; color: var(--text); font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.bg-menu .bg-grid button.on { border-color: var(--orange); }
.bg-menu .bg-grid button:hover { background: var(--black-700); }
.bg-thumb { display: block; width: 100%; height: 48px; background: var(--canvas); border-radius: 2px; }
.bg-thumb.dots { background: var(--canvas) radial-gradient(var(--canvas-dot) 1px, transparent 1px) 0 0 / 8px 8px; }
.bg-menu .bg-dots { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text); cursor: pointer; }
.bg-menu .bg-strength { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin: 8px 0 0;
  font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.bg-menu .bg-strength input { width: 100%; accent-color: var(--orange); }
.bg-menu .pop-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Entry settings: receive or pull (app/static/board.js inletSettings) */
.io-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; align-self: flex-start; }
.io-mode label { display: block; margin: 0; cursor: pointer; }
.io-mode input { position: absolute; opacity: 0; pointer-events: none; }
.io-mode span { display: block; padding: 6px 14px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.io-mode input:checked + span { background: var(--key); color: var(--key-ink); }
.io-pull { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 38%); gap: 16px; align-items: start; }
.io-pull[hidden], .io-recv[hidden] { display: none; }
@media (max-width: 820px) { .io-pull { grid-template-columns: 1fr; } }
.io-describe { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--black-900); }
.io-describe .row-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.io-describe select { width: auto; flex: 1; min-width: 140px; }
.io-explain { font-size: 12.5px; line-height: 1.5; }
.io-explain small { display: block; margin-top: 4px; }
.io-step { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.io-step legend { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 4px; }
.io-step .row-inline { display: flex; gap: 6px; align-items: flex-end; }
.io-step .row-inline > * { min-width: 0; }
.io-step .grow { flex: 1; }
.io-step select[name=method] { width: 86px; flex: none; }
.io-mini { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; }
.io-mini input { width: 90px; }
.io-pg[hidden] { display: none; }
.io-extra:empty { display: none; }
.io-json textarea.bad { border-color: var(--rec); }
.mono, textarea.mono, input.mono { font-family: var(--mono); font-size: 12px; }
.io-test { position: sticky; top: 0; border: 1px solid var(--line); border-radius: 4px; padding: 10px; background: var(--black-900); display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; }
.io-test-head { display: flex; justify-content: space-between; align-items: center; }
.io-test-head strong { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.io-test-out p { margin: 0 0 6px; font-size: 12.5px; }
.io-cols { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.io-col { font: 500 10.5px var(--mono); padding: 2px 6px; border: 1px solid var(--line); border-radius: 2px; }
.io-sample { overflow-x: auto; margin-bottom: 6px; }
.io-sample table { border-collapse: collapse; font-size: 11.5px; }
.io-sample th, .io-sample td { border-bottom: 1px solid var(--line); padding: 3px 6px; text-align: left; white-space: nowrap; }
.io-sample th { font: 500 10.5px var(--mono); color: var(--muted); }
.io-test pre { max-height: 220px; overflow: auto; font-size: 11px; }
.io-req { border-top: 1px solid var(--line); padding: 6px 0; display: flex; flex-direction: column; gap: 3px; }
.io-req code { font-size: 11px; word-break: break-all; }
.io-insert { margin: 2px 0 0; }
.io-insert .io-col { cursor: pointer; background: transparent; color: var(--text); }
.io-insert .io-col:hover { border-color: var(--orange); }
.io-untested { color: var(--orange-400); font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.io-rows[hidden], .io-rows-set[hidden], .io-upd[hidden] { display: none; }
.io-warn { color: var(--orange-400); font-size: 12px; }