/* Trinity workbench. Calm and precise: hairlines instead of shadows, one green as the only
   accent, glass only on layers that float, short motion. No color values in this file —
   every color is a token the Theme singleton writes from themes/<name>.json.
   The design (core/design.js) can restyle 14 element types: they read --e-<element>-<property>
   and fall back to the calm look below, so without a design nothing changes. */

@font-face {
  font-family: "Readex Pro"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(./fonts/readexpro-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Readex Pro"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(./fonts/readexpro-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(./fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(./fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fonts the design types use (themes/design/types.json). Only loaded when a design uses them. SIL Open Font License, see fonts/LICENSE-*.txt. */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(./fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(./fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(./fonts/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(./fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(./fonts/newsreader-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(./fonts/newsreader-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(./fonts/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(./fonts/roboto-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(./fonts/jetbrainsmono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(./fonts/jetbrainsmono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the drawing board's handwriting (Strich „Skizze“, core/rough-paint.js); Caveat 600, OFL */
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(./fonts/caveat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(./fonts/caveat-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root { --radius: 12px; --scale: 1; --space: 1; --ease: cubic-bezier(.25, .1, .25, 1); --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive; }
html:not([data-mode]) body { visibility: hidden; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: calc(15px * var(--scale)); line-height: 1.5;
  background-image: var(--d-bg-image, none); background-size: var(--d-bg-size, auto); background-attachment: fixed;
  animation: var(--d-bg-anim, none);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
@keyframes d-aurora { 0% { background-position: 0% 30%, 100% 70%, 40% 0%; } 100% { background-position: 100% 60%, 0% 20%, 60% 100%; } }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app { height: 100%; }

.shell { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); position: relative; overflow: hidden; }
.shell.with-footer { grid-template-rows: auto minmax(0, 1fr) auto; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: var(--bw, 1px) solid var(--e-bar-border, var(--line)); background-color: var(--e-bar-fill, var(--surface)); background-image: var(--e-bar-grain, none); color: var(--e-bar-text, var(--text)); box-shadow: var(--e-bar-shadow, none); -webkit-backdrop-filter: var(--e-bar-filter, none); backdrop-filter: var(--e-bar-filter, none); }
.bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 500; font-size: 1.12em; }
.brand-a { width: 18px; height: 18px; display: block; }
.brand-name { text-transform: lowercase; }
.brand-sub { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 400; font-size: .78em; color: var(--text-3); }
.brand-sub::before { content: ""; width: 1px; height: 1em; background: var(--line); }
@media (max-width: 520px) { .brand-sub { display: none; } }
.brand-a .left { fill: var(--accent); }
.brand-a .right { fill: var(--logo-mid); }
.brand-a .base { fill: var(--logo-base); }
/* the three parts of Trinity in the middle of the head (App.js): no tabs, the current one in full ink */
.parts { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: .92em; }
.parts button { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--text-3); cursor: pointer; }
.parts button:hover { color: var(--text); }
.parts button.on { color: var(--text); font-weight: 600; }
.parts .mono { font-family: var(--font-mono); font-size: .95em; }
.parts .off { opacity: .45; }
.parts span.off { color: var(--text-3); cursor: default; }
.parts i { font-style: normal; color: var(--line); }
.parts .parts-dot { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
@media (max-width: 1100px) { .parts { position: static; transform: none; margin-inline: auto; } }
@media (max-width: 720px) { .parts i, .parts > :not(.on) { display: none; } }
.here { display: inline-flex; align-items: center; gap: 7px; font-size: .88em; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.here::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.here b { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .here .lbl-long { display: none; } }
.tools { display: flex; gap: 6px; align-items: center; }
.step-label { font-size: .88em; color: var(--text-3); margin-inline-end: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) { .step-label { display: none; } }
.icon-btn { font: inherit; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--e-icon-btn-radius, 8px); border: 1px solid transparent; background: var(--e-icon-btn-fill, transparent); color: var(--e-icon-btn-text, var(--text-2)); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.icon-btn:hover { background: var(--e-icon-btn-hfill, var(--surface-2)); color: var(--e-icon-btn-htext, var(--text)); }
.icon-btn svg { width: 19px; height: 19px; }
.flowchips { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; margin-inline-end: 8px; }
.flowchips button { font: inherit; font-size: .86em; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.flowchips button .n { font-variant-numeric: tabular-nums; opacity: .7; }
.flowchips button:hover { color: var(--text); }
.flowchips button[aria-current="step"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
@media (max-width: 720px) { .flowchips { display: none; } }

/* ── screens: one stable frame, content always starts at the same place ── */
.main { position: relative; display: grid; min-width: 0; min-height: 0; overflow: hidden; }
.screen { padding: calc(48px * var(--space)) 22px calc(32px * var(--space)); display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; overflow-y: auto; }
.frame { width: 100%; max-width: 580px; height: min(620px, 100%); min-height: 520px; display: flex; flex-direction: column; gap: calc(20px * var(--space)); }
.frame.center { text-align: center; align-items: center; justify-content: center; }
.h { font-family: var(--font-display); font-weight: 400; font-size: var(--title-size, 1.55em); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.p { color: var(--text-2); font-size: 1.03em; line-height: 1.6; margin: 0; }
.eyebrow { font-size: .76em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.end { justify-content: space-between; }
.stack { display: grid; gap: 14px; }
.btn { font: inherit; font-weight: 600; padding: calc(10px * var(--space)) 18px; border-radius: var(--e-btn-radius, calc(var(--radius) * .75)); border: var(--bw, 1px) solid var(--e-btn-border, var(--line)); background: var(--e-btn-fill, var(--surface)); color: var(--e-btn-text, var(--text)); box-shadow: var(--e-btn-shadow, none); cursor: pointer; transition: background-color var(--m-dur, .2s) var(--ease), border-color var(--m-dur, .2s) var(--ease), box-shadow var(--m-dur, .2s) var(--ease), transform var(--m-dur, .2s) var(--ease), opacity .2s; }
.btn:hover { border-color: var(--e-btn-hborder, var(--text-3)); background: var(--e-btn-hfill, var(--e-btn-fill, var(--surface))); box-shadow: var(--e-btn-hsh, none); transform: var(--e-btn-htf, none); }
.btn.primary { background: var(--e-btn-primary-fill, var(--accent)); border-color: var(--e-btn-primary-border, var(--accent)); color: var(--e-btn-primary-text, var(--on-accent)); border-radius: var(--e-btn-primary-radius, calc(var(--radius) * .75)); box-shadow: var(--e-btn-primary-shadow, none); }
.btn.primary:hover { background: var(--e-btn-primary-hfill, var(--accent-hover)); border-color: var(--e-btn-primary-hfill, var(--accent-hover)); box-shadow: var(--e-btn-primary-hsh, none); transform: var(--e-btn-primary-htf, none); }
.btn:disabled:hover { transform: none; }
.btn.big { padding: calc(13px * var(--space)) 30px; font-size: 1.05em; }
.btn:disabled { opacity: .4; cursor: default; }
.link { font: inherit; background: none; border: 0; padding: 4px 0; color: var(--e-link-text, var(--text-2)); cursor: pointer; font-size: .92em; }
.link:hover { color: var(--e-link-htext, var(--text)); text-decoration: underline; text-underline-offset: 4px; }

/* ── welcome: wordmark inside logo variant C "Torbogen" ─────────────── */
.go-link { font: inherit; font-family: var(--font-display); font-weight: 400; font-size: 1.2em; letter-spacing: -.01em; color: var(--text); background: none; border: 0; padding: 8px 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.go-link .arr { display: inline-block; transition: transform .25s var(--ease); }
.go-link:hover .arr, .go-link:focus-visible .arr { transform: translateX(5px); }
.go-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.wm { width: min(480px, 100%); height: auto; display: block; overflow: visible; }
.wm .wm-t { font-family: var(--font-display); font-weight: 300; font-size: 39px; text-rendering: geometricPrecision; }
.wm .wm-dot { fill: var(--text); transition: fill .5s var(--ease); }
.wm .wm-dot.on { fill: var(--accent); }
.wm .wm-s { font-family: var(--font-body); font-size: 7.5px; font-weight: 600; letter-spacing: 1.3px; fill: var(--text-3); }
.wm .wgrp { transform-box: view-box; transform-origin: 128px 242px; transition: transform 1.5s cubic-bezier(.65,0,.35,1); }
.wm.big .wgrp { transform: scale(1.35); }
.wm.wait .wgrp { visibility: hidden; }   /* until the fonts are there: no swap mid-animation */
/* the three sides draw one after another: a mask stroke runs along each side */
.wm .wl.left { fill: var(--accent); }
.wm .wl.right { fill: var(--logo-mid); }
.wm .wl.base { fill: var(--logo-base); }
.wm .draw { fill: none; stroke: white; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.45,0,.25,1); }
.wm.show .draw { stroke-dashoffset: 0; }
.wm.show .draw.k2 { transition-delay: .32s; }
.wm.show .draw.k3 { transition-delay: .64s; }
.wm.snap .wgrp, .wm.snap .draw, .wm.snap .wm-dot { transition: none !important; }
.stop-text { stop-color: var(--text); }
.stop-accent { stop-color: var(--accent); }
.stop-accent-hover { stop-color: var(--accent-hover); }

/* ── splash: the wordmark animation on every start, then the layer fades away ── */
.splash { position: absolute; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; padding: 24px; cursor: default; transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.splash .wm { width: min(480px, 100%, 60vh); }
.wide .splash .wm { width: min(680px, 100%, 62vh); }
.splash.leaving { opacity: 0; pointer-events: none; }

/* ── explanation slides ──────────────────────────────────────────────── */
.welcome-h { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2em, 6vw, 2.6em); line-height: 1.05; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.welcome-p { color: var(--text-2); font-size: 1.1em; line-height: 1.6; max-width: 42ch; margin: 0; }
.ill-wrap { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(20px * var(--space)) 16px; height: 330px; display: grid; place-items: center; flex: none; }
.ill { width: 100%; height: 100%; max-width: 440px; display: block; margin: 0 auto; }
.ill.scene { max-width: 400px; }
.intro-h { font-size: 2.3em; text-align: center; padding: 0 28px; max-width: 30ch; }
.slide { display: grid; gap: 20px; }
.slide-text { display: grid; gap: 8px; text-align: center; justify-items: center; align-content: start; min-height: 150px; }
.slide-h { font-family: var(--font-display); font-weight: 400; font-size: 1.75em; line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.slide-p { color: var(--text-2); font-size: 1.04em; line-height: 1.6; margin: 0; max-width: 44ch; }
.i-card, .i-frame { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.i-frame-hl { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.i-row { fill: var(--surface-2); }
.i-soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.i-acc { fill: var(--accent); }
.i-on { fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.i-line { fill: none; stroke: var(--text-3); stroke-width: 1.2; opacity: .45; }
.i-line-acc { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.i-icon { fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.i-icon-acc { fill: none; stroke: var(--accent-text); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.i-bar { fill: var(--line); }
.i-t { fill: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.i-s { fill: var(--text-3); font-family: var(--font-body); font-size: 11.5px; }
.i-h { fill: var(--accent-text); font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.i-h.quiet { fill: var(--text-3); }
.i-m { fill: var(--text); font-family: var(--font-mono); font-size: 12.5px; }
.i-cap { fill: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.i-cap tspan.m { fill: var(--text-3); font-family: var(--font-body); font-size: 12.5px; font-weight: 400; }
.i-ton { fill: var(--on-accent); font-family: var(--font-body); font-size: 10.5px; font-weight: 700; }
.term { border-bottom: 1px dotted var(--text-3); cursor: help; position: relative; }
.tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 240px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .85em; line-height: 1.45; text-align: left; box-shadow: 0 8px 24px var(--shadow); z-index: 5; display: none; }
.term:hover .tip, .term:focus .tip { display: block; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); display: block; transition: width .3s var(--ease), background-color .3s var(--ease); }
.dots i.on { background: var(--accent); width: 18px; }

/* ── setup ───────────────────────────────────────────────────────────── */
.progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; flex: none; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .35s var(--ease); }
.choices { display: grid; gap: 8px; }
.choices.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .choices.two { grid-template-columns: 1fr; } }
.choice { font: inherit; text-align: start; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: calc(13px * var(--space)) 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.choice:hover { border-color: var(--text-3); }
.choice .ic { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; color: var(--text-2); transition: background-color .2s var(--ease), color .2s var(--ease); }
.choice b { font-weight: 600; }
.choice .d { color: var(--text-2); font-size: .9em; }
.choice[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.choice[aria-checked="true"] .ic { background: var(--accent); color: var(--on-accent); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .92em; }
.field input { font: inherit; padding: 11px 13px; border-radius: calc(var(--radius) * .75); border: 1px solid var(--line); background: var(--surface); color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field small { color: var(--text-3); font-size: .82em; }
details.more summary { cursor: pointer; color: var(--text-2); font-size: .92em; font-weight: 600; }
details.more summary:hover { color: var(--text); }
details.why { border-top: 1px solid var(--line); padding-top: 10px; font-size: .92em; }
details.why summary { cursor: pointer; color: var(--text); font-weight: 600; }
details.why p { margin: 6px 0 0; color: var(--text-2); }
.asst-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .95em; color: var(--text-2); padding: 10px 0 2px; border-top: 1px solid var(--line); }
.asst-line b { color: var(--text); font-weight: 600; }
.url-row { display: flex; gap: 10px; align-items: center; }
.url-row input { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: .86em; padding: 10px 12px; border-radius: calc(var(--radius) * .75); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-overflow: ellipsis; }
.url-row input:not([readonly]) { background: var(--surface); border-color: var(--accent); }
.conn { display: flex; align-items: center; gap: 10px; font-size: .92em; color: var(--text-2); }
.conn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.conn.ok::before { background: var(--accent); }
.conn.ok { color: var(--text); }
.err { border: var(--bw, 1px) solid var(--e-err-border, var(--line)); border-inline-start: 3px solid var(--e-err-stripe, var(--accent)); border-radius: var(--e-err-radius, calc(var(--radius) * .75)); padding: 10px 12px; font-size: .9em; display: grid; gap: 4px; background-color: var(--e-err-fill, var(--surface)); background-image: var(--e-err-grain, none); box-shadow: var(--e-err-shadow, none); -webkit-backdrop-filter: var(--e-err-filter, none); backdrop-filter: var(--e-err-filter, none); }
.err b { font-weight: 600; }
.err span { color: var(--e-err-text, var(--text-2)); }
pre.log { margin: 8px 0 0; max-height: 180px; overflow: auto; font-family: var(--font-mono); font-size: .76em; line-height: 1.5; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); white-space: pre-wrap; }
.cat-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .75); background: var(--surface); padding: 0 12px; }
.cat-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cat-search svg { width: 17px; height: 17px; color: var(--text-3); flex: none; }
.cat-search input { flex: 1; min-width: 0; font: inherit; padding: 10px 0; border: 0; background: transparent; color: var(--text); outline: none; }
.cat-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-filters button { font: inherit; font-size: .84em; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; }
.cat-filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.cat-filters button .c { opacity: .6; margin-inline-start: 4px; font-variant-numeric: tabular-nums; }
.cat-status { font-size: .82em; color: var(--text-3); min-height: 1.2em; }
.cat-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); height: 270px; overflow-y: auto; flex: none; }
.cat-group { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.cat-group b { font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.cat-group .link { font-size: .82em; }
.cat-group.reco b { color: var(--accent-text); }
.cat-row { font: inherit; width: 100%; text-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: background-color .15s var(--ease); }
.cat-row:hover { background: var(--surface-2); }
.cat-row:last-child { border-bottom: 0; }
.cat-row .box { width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; border: 1.5px solid var(--line); display: grid; place-items: center; grid-row: span 2; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.cat-row .box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.cat-row[aria-checked="true"] .box { background: var(--accent); border-color: var(--accent); }
.cat-row[aria-checked="true"] .box::after { opacity: 1; }
.cat-row .nm { font-weight: 600; font-size: .95em; }
.cat-row .ds { grid-column: 2; font-size: .86em; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-row .sk { grid-row: 1 / span 2; grid-column: 3; font-size: .8em; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-row .why { grid-column: 2; font-size: .78em; color: var(--accent-text); }
.cat-empty { padding: 18px 14px; color: var(--text-3); font-size: .9em; }
.cat-sel { font-size: .88em; color: var(--text); font-weight: 600; min-height: 1.3em; }
.summary { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; background: var(--surface); }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.summary div:last-child { border-bottom: 0; }
.summary dt { color: var(--text-3); margin: 0; }
.summary dd { margin: 0; font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.working ul { margin: 0; padding: 0; display: grid; gap: 10px; }
.working li { list-style: none; display: flex; gap: 10px; align-items: center; color: var(--text-3); transition: color .25s var(--ease); }
.working li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.working li.running { color: var(--text); }
.working li.running::before { border-color: var(--accent); }
.working li.ok { color: var(--text); }
.working li.ok::before { background: var(--accent); border-color: var(--accent); }
.working li.error { color: var(--text); font-weight: 600; }
.working li.error::before { border: 2px solid var(--accent-text); }

/* ── footer bar of both flows: Back / progress / Next, always at the bottom ── */
.flowbar { border-top: var(--bw, 1px) solid var(--e-bar-border, var(--line)); background-color: var(--e-bar-fill, var(--surface)); background-image: var(--e-bar-grain, none); -webkit-backdrop-filter: var(--e-bar-filter, none); backdrop-filter: var(--e-bar-filter, none); padding: 12px 22px; position: relative; z-index: 2; }
.flowbar-in { margin-inline: auto; max-width: 580px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.flowbar-in > :first-child { justify-self: start; }
.flowbar-in > :last-child { justify-self: end; }
.flowbar-in .row { flex-wrap: nowrap; gap: 14px; }
.flowbar .btn { padding: calc(11px * var(--space)) 22px; font-size: 1.02em; }
.flowbar .link { font-size: .98em; }
.flowbar .mid { color: var(--text-3); font-size: .88em; font-variant-numeric: tabular-nums; }

/* ── setup: step list and why card (wide screens only) ── */
.setup-grid { display: grid; grid-template-columns: minmax(0, 580px); justify-content: center; width: 100%; height: 100%; }
.setup-grid .frame { max-width: none; }
.rail, .why-col { display: none; }
.rail .eyebrow { margin-bottom: 10px; }
.st { font: inherit; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-3); background: none; border: 0; text-align: start; cursor: default; }
.st .n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .78em; font-weight: 600; flex: none; }
.st.done { color: var(--text-2); cursor: pointer; }
.st.done:hover { color: var(--text); }
.st.done .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.st.now { background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--text); font-weight: 600; }
.st.now .n { border-color: var(--accent); color: var(--accent-text); }
.rail-foot { margin-top: auto; font-size: .88em; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 12px; }
.why-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; display: grid; gap: 6px; }
.why-card b { font-weight: 600; }
.why-card p { margin: 0; color: var(--text-2); line-height: 1.55; }

/* ── home: open tasks ── */
.tasks-panel { display: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.tasks-panel h4 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.li { display: flex; gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .95em; }
.li:last-child { border-bottom: 0; }
.li .ti { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .tag { font-size: .8em; color: var(--text-3); margin-inline-start: auto; white-space: nowrap; }
.li .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; transform: translateY(-1px); }
.li .dot.doing { background: var(--accent); }
.li.empty { color: var(--text-3); }

/* ── wide screens (html.wide, see core/screen.js) ──────────────────────
   Explanation: text left, picture right. Setup: step list | question | why.
   Home: next step and tasks left, numbers right. Bar and nav a size larger. */
.wide .bar { padding: 16px 32px; }
.wide .brand { font-size: 1.28em; gap: 10px; }
.wide .brand-a { width: 22px; height: 22px; }
.wide .bar-left { gap: 18px; }
.wide .here { font-size: .95em; padding: 5px 15px 5px 12px; }
.wide .tools { gap: 10px; }
.wide .step-label { font-size: .94em; }
.wide .flowchips button { font-size: .92em; padding: 6px 15px; }
.wide .icon-btn { width: 40px; height: 40px; }
.wide .icon-btn svg { width: 21px; height: 21px; }
.wide .flowbar .btn { padding: calc(12px * var(--space)) 26px; font-size: 1.06em; }
.wide .flowbar { padding: 16px 40px; }
.wide .flowbar-in { max-width: 1040px; }
.wide .flowbar-in.for-setup { max-width: 1340px; }

/* Welcome: the one place that may be big — logo and wordmark grow with the screen */
.wide .welcome-frame { max-width: 860px; height: auto; min-height: 0; }
.wide .welcome-frame .wm { width: min(680px, 100%, 62vh); }
.wide .welcome-frame .go-link { font-size: 1.45em; }
.wide .frame.concept { max-width: 1040px; height: min(560px, 100%); }
.wide .concept .slide { grid-template-columns: minmax(0, 400px) minmax(0, 580px); justify-content: center; gap: 48px; height: 100%; align-items: start; }
.wide .concept .ill-wrap { height: min(500px, 100%); padding: 32px; }
.wide .concept .slide-text { order: -1; text-align: start; justify-items: start; align-content: start; gap: 16px; margin-top: 40px; }
.wide .concept .slide-h { font-size: 3em; line-height: 1.08; }
.wide .concept .slide-p { font-size: 1.4em; line-height: 1.55; max-width: none; }
.wide .concept .eyebrow { font-size: .95em; }
/* intro slide: a title page — the statement stands freely, centered, no box */
.wide .concept .slide.intro { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 28px; }
.wide .concept .slide.intro .ill-wrap { background: none; border: 0; padding: 0; height: auto; }
.wide .concept .slide.intro .intro-h { font-size: 4.2em; max-width: 18ch; padding: 0; line-height: 1.05; }
.wide .concept .slide.intro .slide-text { order: 0; text-align: center; justify-items: center; margin-top: 0; min-height: 0; }
.wide .concept .slide.intro .slide-p { max-width: 44ch; font-size: 1.35em !important; }
/* Laptops (below the wide layout): explanation and setup side by side too — text left, picture right — with a
   smaller type than on big screens, so a slide fits the window without scrolling */
@media (min-width: 1024px) and (min-height: 560px) {
  :root:not(.wide) .frame.concept { max-width: 980px; height: min(540px, 100%); }
  :root:not(.wide) .concept .slide { grid-template-columns: minmax(0, 380px) minmax(0, 540px); justify-content: center; gap: 40px; height: 100%; align-items: start; }
  :root:not(.wide) .concept .ill-wrap { height: min(480px, 100%); padding: 24px; }
  :root:not(.wide) .concept .slide-text { order: -1; text-align: start; justify-items: start; align-content: start; gap: 12px; margin-top: 24px; min-height: 0; }
  :root:not(.wide) .concept .slide-h { font-size: 2.3em; line-height: 1.1; }
  :root:not(.wide) .concept .slide-p { font-size: 1.12em; line-height: 1.55; max-width: none; }
  :root:not(.wide) .concept .slide.intro { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 24px; }
  :root:not(.wide) .concept .slide.intro .ill-wrap { background: none; border: 0; padding: 0; height: auto; }
  :root:not(.wide) .concept .slide.intro .slide-text { order: 0; text-align: center; justify-items: center; margin-top: 0; }
  :root:not(.wide) .concept .slide.intro .slide-p { max-width: 44ch; }
  /* the setup: less room above and below the slide (the page itself never scrolls) */
  :root:not(.wide) .screen:has(.frame.concept) { padding-top: 20px; padding-bottom: 12px; }
}
/* side by side (laptop and wide): a list stands in the picture's place and gets all of it — no second frame around
   it, its own height is the picture's */
@media (min-width: 1024px) and (min-height: 560px) {
  :root .s3 .ill-wrap.s3-panelwrap { padding: 0; background: none; border: 0; }
  :root .s3 .ill-wrap.s3-panelwrap .s3-panel { max-height: 100%; height: 100%; }
}
/* side by side: denser lists — the detection's checks and the link rows lower, a link's state beside its name */
@media (min-width: 1024px) and (min-height: 560px) {
  .s3 .s3-ck-g { padding-bottom: 4px; }
  .s3 .s3-ck-g > b { padding: 4px 0 2px; }
  .s3 .s3-ck { padding: 3px 0; font-size: .86em; }
  .s3 .s3-lk { padding: 4px 0; }
  .s3 .s3-lk-n { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .s3 .s3-panel { padding: 14px 16px; gap: 6px; }
  .s3 .s3-row { padding: 5px 0; }
  /* a standard: name and why on the left, the choice (anlegen, nicht nötig, später) small on the right */
  .s3 .s3-row:has(> .s3-mini) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 3px 0; gap: 2px 14px; }
  .s3 .s3-row:has(> .s3-mini) > :not(.s3-mini) { grid-column: 1; }
  .s3 .s3-row:has(> .s3-mini) > .s3-mini { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .s3 .s3-row:has(> .s3-mini) > .s3-mini button { padding-inline: 10px; font-size: .86em; }
  .s3 .s3-row:has(> .s3-mini) > .hintline, .s3 .s3-row:has(> .s3-mini) > .s3-row-h > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .s3 .s3-row:has(> .s3-mini) > .s3-row-h { flex-wrap: nowrap; }
  /* the text column: closer to the top, tighter rows, so a field that opens still fits above the footer */
  :root:not(.wide) .s3 .slide-text { margin-top: 4px; }
  .s3 .s3-rows > div { padding: 6px 2px; }
  .s3 .go.s3-go { gap: 8px; margin-top: 4px; }
}
.wide .s3 .ill-wrap.s3-panelwrap { padding: 0; background: none; border: 0; }
.wide .s3 .ill-wrap.s3-panelwrap .s3-panel { max-height: 100%; height: 100%; }

.wide .setup-grid { grid-template-columns: 270px minmax(0, 640px) 300px; gap: 56px; height: min(680px, 100%); align-self: center; }
.wide .setup-grid .frame { height: 100%; }
.wide .rail { display: flex; flex-direction: column; gap: 4px; font-size: 1.08em; }
.wide .why-col { display: grid; align-content: start; padding-top: 34px; font-size: 1.06em; }
.wide .setup-grid .progress, .wide .setup-grid details.why { display: none; }
.wide .cat-list { height: 340px; }

.wide .home { grid-template-columns: 220px minmax(0, 1fr); }
.wide .home aside { padding: 20px 14px; gap: 4px; }
.wide .home aside a { padding: 10px 14px; font-size: 1.05em; }
.wide .home-main { max-width: 1320px; width: 100%; padding: 40px 48px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
.wide .home-main > .home-head { grid-column: 1 / -1; }
.wide .home-main > .next { grid-column: 1; grid-row: 2; }
.wide .home-main > .tasks-panel { display: block; grid-column: 1; grid-row: 3; }
.wide .home-main > .cards { grid-column: 2; grid-row: 2 / span 2; grid-template-columns: 1fr 1fr; align-self: start; }
.wide .home-main > .cards .card:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }

/* ── settings: its own screen — grouped list on the left, content across the rest ── */
.settings { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100%; min-height: 0; }
.snav { border-inline-end: var(--bw, 1px) solid var(--e-aside-border, var(--line)); background: var(--e-aside-fill, var(--surface)); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.snav .back { font: inherit; font-size: .9em; text-align: start; color: var(--text-2); background: none; border: 0; padding: 6px 12px; cursor: pointer; border-radius: 8px; }
.snav .back:hover { color: var(--text); background: var(--surface-2); }
.snav-title { font-family: var(--font-display); font-size: 1.35em; padding: 10px 12px 4px; }
.snav .gh { font-size: .74em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 16px 12px 6px; }
.spane-wrap { overflow-y: auto; min-width: 0; }
.spane-wrap > .spane { max-width: 1100px; padding: calc(28px * var(--space)) 32px 40px; }
@media (max-width: 760px) {
  .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .spane-wrap > .spane { padding-inline: 16px; }
  .snav { flex-direction: row; flex-wrap: wrap; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .snav .gh, .snav-title { display: none; }
}
.wide .settings { grid-template-columns: 290px minmax(0, 1fr); }
.wide .snav { padding: 20px 14px; }
.wide .spane-wrap > .spane { padding: 40px 56px; }
.stab { font: inherit; font-family: var(--font-nav, inherit); font-size: var(--nav-size, 1em); text-align: start; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--text-2); cursor: pointer; }
.stab svg { width: 17px; height: 17px; flex: none; color: var(--text-3); }
.stab:hover { background: var(--surface-2); color: var(--text); }
.stab.on { background: var(--e-aside-afill, var(--surface)); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.stab.on svg { color: var(--accent); }
.stab.soon { color: var(--text-3); }
.stab small { margin-inline-start: auto; font-size: .74em; color: var(--text-3); font-weight: 500; }
.spane { display: grid; gap: 20px; align-content: start; min-width: 0; }
.spane-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.35em; letter-spacing: -.01em; }
.acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.act { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; display: grid; gap: 10px; align-content: space-between; min-width: 0; }
.act b { font-weight: 600; }
.act .p { font-size: .92em; }
.act .btn { justify-self: start; }
.locks { border: var(--bw, 1px) solid var(--e-locks-border, var(--line)); border-radius: var(--e-locks-radius, var(--radius)); background-color: var(--e-locks-fill, var(--surface)); background-image: var(--e-locks-grain, none); box-shadow: var(--e-locks-shadow, none); -webkit-backdrop-filter: var(--e-locks-filter, none); backdrop-filter: var(--e-locks-filter, none); overflow: hidden; }
.locks h4 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--e-locks-border, var(--line)); font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--e-locks-head, var(--text-2)); font-weight: 600; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.locks h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }
/* Einstellungen: every block folds at its heading (core/fold.js), same look as the Hooks blocks */
.foldable > h4:first-child, .foldable > h3:first-child { cursor: pointer; user-select: none; }
.foldable > h4:first-child > b, .foldable > h3:first-child { display: inline-flex; align-items: center; gap: 9px; }
.foldable > h4:first-child > b::before, .foldable > h3:first-child::before { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s var(--ease); flex: none; }
.foldable.folded > h4:first-child > b::before, .foldable.folded > h3:first-child::before { transform: rotate(-45deg); }
[dir="rtl"] .foldable.folded > h4:first-child > b::before, [dir="rtl"] .foldable.folded > h3:first-child::before { transform: rotate(135deg); }
.foldable > h4:first-child:focus-visible, .foldable > h3:first-child:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.foldable.folded > :not(:first-child) { display: none; }
.foldable.folded > h4:first-child { border-bottom: 0; }
.sfold-all { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .84em; color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.sfold-all:hover { color: var(--text); border-color: var(--text-3); }
.sfold-all i { width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sfold-all[aria-pressed="true"] i { transform: rotate(-45deg); }
.lock-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
/* Einstellungen › Erklärung und Oberfläche › Wo finde ich was: a part, its place here, its folder */
.locks.where { margin-bottom: 18px; }
.where-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr); gap: 4px 14px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .92em; }
.where-row:last-child { border-bottom: 0; }
.where-row b { font-weight: 600; }
.where-row > span { color: var(--text-2); }
.where-row code { font-family: var(--font-mono); font-size: .88em; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .where-row { grid-template-columns: 1fr; gap: 2px; } }
.lock-row:last-child { border-bottom: 0; }
.lock-row b { font-weight: 600; }
.lock-row small { grid-column: 2; color: var(--text-2); font-size: .9em; }
.cb { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; grid-row: span 2; background: var(--surface); cursor: pointer; padding: 0; }
.cb::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.cb[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.cb[aria-checked="true"]::after { opacity: 1; }
.cb[aria-disabled="true"] { cursor: default; opacity: .85; }
.who { grid-row: span 2; font-size: .76em; font-weight: 600; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.soonbox { border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 6px; }
.look { display: grid; gap: 20px; }
.look.full { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 28px; }
.look.full .wide-grp { grid-column: 1 / -1; }
.look.full .tpls { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.icon-btn.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.link.accent { color: var(--accent-text); font-weight: 600; }

/* ── workbench home ──────────────────────────────────────────────────── */
.home { display: grid; grid-template-columns: 180px minmax(0, 1fr); height: 100%; min-height: 0; }
.home aside { border-inline-end: var(--bw, 1px) solid var(--e-aside-border, var(--line)); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; background-color: var(--e-aside-fill, var(--surface)); background-image: var(--e-aside-grain, none); box-shadow: var(--e-aside-shadow, none); -webkit-backdrop-filter: var(--e-aside-filter, none); backdrop-filter: var(--e-aside-filter, none); position: relative; z-index: 1; }
.mobile-nav-toggle, .settings-nav-toggle { display: none; }
.home-nav-items, .settings-nav-items { display: contents; }
.home aside a { font-family: var(--font-nav, inherit); color: var(--e-aside-text, var(--text-2)); text-decoration: none; padding: 7px 10px; border-radius: 8px; font-size: calc(.95em * var(--nav-k, 1)); transition: background-color .2s var(--ease), color .2s var(--ease); }
.home aside a:hover { background: var(--e-aside-afill, var(--surface-2)); color: var(--e-aside-atext, var(--text)); }
.home aside a.on { background: var(--e-aside-afill, var(--surface-2)); color: var(--e-aside-atext, var(--text)); font-weight: 600; }
.home-main { padding: calc(32px * var(--space)) 40px; display: grid; gap: calc(16px * var(--space)); align-content: start; min-width: 0; overflow-y: auto; max-width: 860px; }
.home-main { scrollbar-width: none; }   /* scrolls with wheel and keys, without the bar in the middle of the page */
.home-main::-webkit-scrollbar { display: none; }
.next { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); background: var(--surface); border-radius: var(--radius); padding: calc(18px * var(--space)) 20px; display: grid; gap: 10px; }
.say { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.say code { font-family: var(--font-mono); font-size: 1.05em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; color: var(--text); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; background: var(--surface); min-width: 0; }
.card .n { font-family: var(--font-display); font-size: 1.7em; font-weight: 300; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card .n.words { font-size: 1.3em; }
.card small { color: var(--text-3); }
@media (max-width: 640px) {
  .home { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .home-main { padding-inline: 16px; }
  .home aside { flex-direction: row; flex-wrap: wrap; border-inline-end: 0; border-bottom: 1px solid var(--line); }
}

/* ── layers: ask once, guided tour, look panel ───────────────────────── */
.ask { position: absolute; inset: 0; z-index: 31; background: var(--scrim); display: grid; place-items: center; padding: 20px; animation: fade .25s var(--ease) both; }
.ask-box { position: relative; width: min(420px, 100%); background-color: var(--e-dialog-fill, var(--surface)); background-image: var(--e-dialog-grain, none); color: var(--e-dialog-text, var(--text)); border: var(--bw, 1px) solid var(--e-dialog-border, var(--line)); border-radius: var(--e-dialog-radius, 16px); padding: 22px 22px 18px; display: grid; gap: 8px; box-shadow: var(--e-dialog-shadow, 0 16px 40px var(--shadow)); -webkit-backdrop-filter: var(--e-dialog-filter, none); backdrop-filter: var(--e-dialog-filter, none); }
.ask-box b { font-family: var(--font-display); font-weight: 500; font-size: 1.25em; padding-inline-end: 36px; }
.ask-box p { margin: 0 0 8px; color: var(--text-2); font-size: .95em; line-height: 1.55; }
.ask-x { position: absolute; top: 10px; inset-inline-end: 10px; }
.coach { position: absolute; inset: 0; z-index: 30; }
.coach-ring { position: absolute; border-radius: 12px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 4000px var(--scrim); pointer-events: none; transition: top .35s var(--ease), left .35s var(--ease), width .35s var(--ease), height .35s var(--ease); }
.coach-tip { position: absolute; width: 340px; max-width: calc(100% - 24px); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 6px; box-shadow: 0 12px 32px var(--shadow); transition: top .35s var(--ease), left .35s var(--ease); }
.coach-n { font-size: .76em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.coach-tip b { font-family: var(--font-display); font-weight: 500; font-size: 1.15em; }
.coach-tip p { margin: 0; color: var(--text-2); font-size: .94em; line-height: 1.55; }
.coach-act { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.coach-act .btn { padding: 8px 14px; }
.coach-act .link { white-space: nowrap; }
.scrim { position: absolute; inset: 0; background: var(--scrim-soft); z-index: 9; animation: fade .25s var(--ease) both; }
@keyframes fade { from { opacity: 0; } }
.panel { position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: min(370px, 100%); z-index: 10; background: var(--surface); border-inline-start: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; box-shadow: -12px 0 32px var(--shadow); animation: panelin .28s var(--ease) both; }
.panel { background-color: var(--e-bar-fill, var(--surface)); background-image: var(--e-bar-grain, none); -webkit-backdrop-filter: var(--e-bar-filter, none); backdrop-filter: var(--e-bar-filter, none); }
.panel.look-panel { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; box-shadow: -20px 0 48px var(--shadow); }
.look-scrim { background: var(--scrim); }
@keyframes panelin { from { transform: translateX(24px); opacity: 0; } }
.panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel header b { font-family: var(--font-display); font-weight: 500; font-size: 1.1em; }
.panel .body { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.panel .body > * { flex-shrink: 0; }
.panel footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.grp { display: grid; gap: 8px; }
.grp > b, .lbl { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.seg { display: flex; border: 1px solid var(--e-seg-border, var(--line)); border-radius: var(--e-seg-radius, 9px); padding: 2px; gap: 2px; background: var(--e-seg-fill, var(--surface-2)); }
.seg button { flex: 1; font: inherit; font-size: .86em; padding: 6px; background: transparent; color: var(--e-seg-text, var(--text-2)); border: 0; border-radius: calc(var(--e-seg-radius, 9px) - 2px); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.seg button[aria-checked="true"] { background: var(--e-seg-afill, var(--surface)); color: var(--e-seg-atext, var(--text)); font-weight: 600; box-shadow: 0 0 0 1px var(--e-seg-border, var(--line)); }
.size-row { display: flex; align-items: center; gap: 10px; }
.size-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.size-row .val { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: .86em; min-width: 3.2em; text-align: end; }
.size-row .icon-btn { font-family: var(--font-display); font-weight: 500; border: 1px solid var(--line); width: 34px; height: 34px; }
.size-row .icon-btn.big { font-size: 1.15em; }
.note { font-size: .82em; color: var(--text-3); margin: 0; }
.tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-row { position: relative; }
.tpl { font: inherit; width: 100%; text-align: start; padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; display: grid; gap: 6px; transition: border-color .2s var(--ease); }
.tpl:hover { border-color: var(--text-3); }
.tpl[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tpl .pv { height: 56px; border-radius: 6px; padding: 8px; display: grid; gap: 5px; align-content: end; border: 1px solid var(--line); }
.tpl .pv .l { height: 5px; width: 70%; border-radius: 3px; opacity: .6; }
.tpl .pv .b { height: 11px; width: 38%; border-radius: 3px; }
.tpl span { font-size: .84em; font-weight: 600; }
.tpl-edit { position: absolute; inset-inline-end: 6px; top: 6px; font: inherit; font-size: .72em; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; }
.tpl-edit:hover { color: var(--text); }
.tpl-input { font: inherit; padding: 9px 12px; border-radius: calc(var(--radius) * .7); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.tpl-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tok-list { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tok-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: .88em; }
.tok-row:last-child { border-bottom: 0; }
.tok-row label { color: var(--text-2); }
.tok-row .pick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .8em; color: var(--text-3); }
.tok-row input[type="color"] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.tpl-json { font-family: var(--font-mono); font-size: .74em; line-height: 1.5; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); resize: vertical; width: 100%; }

.notice { margin: auto; max-width: 420px; padding: 24px; text-align: center; color: var(--text-2); display: grid; gap: 12px; }

/* ── explanation (screens/Concept.js): slide 1 is her swarm flying through her triangle, the others pictures out of her
   points (face/dots.js, screens/conceptDots.js), labels as HTML over the canvas ── */
.frame.concept { position: relative; }
.concept .slide { position: relative; z-index: 1; }
.cx-stage { position: relative; min-height: min(560px, 70vh); display: grid; place-items: center; }
.cx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-stage-text { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; text-align: center; max-width: 34em; padding: 18% 16px 0; opacity: 0; transform: scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cx-stage-text.on { opacity: 1; transform: none; }
.cx-pic { position: relative; padding: 0; display: block; aspect-ratio: 16 / 10; height: auto; cursor: pointer; overflow: hidden; }
.wide .concept .cx-pic { height: auto; max-height: min(500px, 100%); padding: 0; }
.cx-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dots-labels { position: absolute; inset: 0; pointer-events: none; }
.dots-l { position: absolute; font: 500 clamp(10px, 1.6vw, 13px)/1.2 var(--font-display); color: var(--text-2); white-space: nowrap; display: grid; }
.dots-l.strong { color: var(--text); font-weight: 600; }
.dots-l.acc { color: var(--accent-text); }
.dots-l.mono { font-family: var(--font-mono); font-size: clamp(10px, 1.4vw, 12px); }
.dots-l small { font: 400 .86em var(--font-mono); color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .cx-stage-text { transition: none; } }
/* ── pictures drawn as SVG (setup: components/setup/art.js; once also the explanation) ── */
.art .lg-tile { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.art .lg-tile.hl { stroke: var(--accent); }
.art .plat { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.art .plat-t { fill: var(--text); font-family: var(--font-display); font-size: 14px; font-weight: 500; }
.art .plat-cap { fill: var(--text-2); font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.art .a-left { fill: var(--accent); } .art .a-right { fill: var(--logo-mid); } .art .a-base { fill: var(--logo-base); }
.art .sk-card { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.art .sk-name { fill: var(--text); font-family: var(--font-body); font-size: 8.8px; font-weight: 600; }
.art .ink svg, .art .ink svg * { fill: var(--text) !important; }
.art .a-in, .art .a-rise, .art .a-slide { opacity: 0; animation: art-in 1.2s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1s); transform-box: fill-box; }
.art .a-rise { animation: art-rise 1.6s cubic-bezier(.45, 0, .25, 1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.art .a-slide { animation: art-slide 1.4s cubic-bezier(.45, 0, .25, 1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes art-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes art-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes art-slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.art .breathe { animation: art-breathe 9s ease-in-out infinite; animation-delay: 3s; transform-box: fill-box; }
@keyframes art-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
/* slide 3: a skill glides into the workbench, every 9 s */
.art .travel { opacity: 0; animation: art-travel 9s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: 1.6s; transform-box: view-box; }
@keyframes art-travel { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 40% { transform: translate(var(--tx), var(--ty)); opacity: 1; } 52%, 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; } }
.art .land { animation: art-land 9s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: 1.6s; }
@keyframes art-land { 0%, 36% { stroke: var(--line); } 44%, 70% { stroke: var(--accent); } 90%, 100% { stroke: var(--line); } }
/* slide 5: start → KI; Trinity gives tasks, knowledge, skills; tasks get ticked — every 12 s */
.art .typed { clip-path: inset(0 100% 0 0); animation: art-type 12s steps(5) infinite; animation-delay: .8s; }
@keyframes art-type { 0% { clip-path: inset(0 100% 0 0); } 9%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.art .pass1 { opacity: 0; animation: art-pass1 12s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: .8s; }
@keyframes art-pass1 { 0%, 10% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 19% { opacity: 1; transform: translateX(22px); } 21%, 100% { opacity: 0; transform: translateX(22px); } }
.art .feed { opacity: 0; animation: art-feed 12s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: calc(.8s + var(--o)); transform-box: view-box; }
@keyframes art-feed { 0%, 21% { opacity: 0; transform: none; } 23% { opacity: 1; transform: none; } 33% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(.6); } 35%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.6); } }
.art .ki { animation: art-ki 12s ease-in-out infinite; animation-delay: .8s; }
@keyframes art-ki { 0%, 40% { fill: var(--accent-soft); } 46%, 56% { fill: var(--accent-mid); } 64%, 100% { fill: var(--accent-soft); } }
.art .pass2 { opacity: 0; animation: art-pass2 12s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: .8s; }
@keyframes art-pass2 { 0%, 54% { opacity: 0; transform: translateX(0); } 56% { opacity: 1; } 62% { opacity: 1; transform: translateX(20px); } 64%, 100% { opacity: 0; transform: translateX(20px); } }
.art .tick { opacity: 0; animation: art-tick 12s var(--ease) infinite; animation-delay: calc(.8s + var(--k) * .9s); }
@keyframes art-tick { 0%, 62% { opacity: 0; } 67%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
/* slide 6: two skills picked, lines draw to your project */
.art .pick { stroke: var(--line); animation: art-pick 1.2s var(--ease) forwards; animation-delay: calc(var(--d) * 1s); }
@keyframes art-pick { to { stroke: var(--accent); stroke-width: 1.8; } }
.art .draw { stroke-dasharray: 160; stroke-dashoffset: 160; animation: art-draw 2.4s cubic-bezier(.45, 0, .25, 1) forwards; animation-delay: calc(var(--d) * 1s); }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
.art .recv { animation: art-recv 1.2s var(--ease) forwards; animation-delay: 4.2s; }
@keyframes art-recv { to { stroke: var(--accent); fill: var(--accent-soft); } }
.art .others { animation: art-dim 1.2s var(--ease) forwards; animation-delay: 1.6s; }
@keyframes art-dim { to { opacity: .45; } }
/* slide 7: locks close one after another */
.art .shackle { animation: art-shut .9s cubic-bezier(.45, 0, .25, 1) both; animation-delay: calc(var(--d) * 1s); transform-box: fill-box; }
@keyframes art-shut { from { transform: translateY(-4px); } to { transform: none; } }
/* still: everything shown, nothing moves */
.still .art *, .still .art { animation: none !important; }
.still .art .a-in, .still .art .a-rise, .still .art .a-slide { opacity: 1; }
.still .art .typed { clip-path: none; }
.still .art .tick { opacity: 1; }
.still .art .travel, .still .art .feed, .still .art .pass1, .still .art .pass2 { opacity: 0; }
.still .art .pick { stroke: var(--accent); }
.still .art .draw { stroke-dashoffset: 0; }
.still .art .recv { stroke: var(--accent); fill: var(--accent-soft); }
.still .art .others { opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  .art .a-in, .art .a-rise, .art .a-slide, .art .tick { opacity: 1 !important; }
  .art .typed { clip-path: none !important; }
  .art .draw { stroke-dashoffset: 0 !important; }
  .art .travel, .art .feed, .art .pass1, .art .pass2 { opacity: 0 !important; }
}

/* ── motion: short, soft, no springs ─────────────────────────────────── */
/* Slides and setup steps: the old one drifts out and fades, the new one glides in. */
.sl-enter-active { transition: opacity .38s cubic-bezier(.22, .61, .36, 1), transform .38s cubic-bezier(.22, .61, .36, 1); }
.sl-leave-active { transition: opacity .16s cubic-bezier(.4, 0, 1, 1), transform .16s cubic-bezier(.4, 0, 1, 1); }
.sl-enter-from { opacity: 0; transform: translateX(var(--dir, 16px)); }
.sl-leave-to { opacity: 0; transform: translateX(calc(var(--dir, 16px) * -.5)); }
.still .sl-enter-active, .still .sl-leave-active { transition: none; }
.enter { animation: var(--m-page, enter) .28s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes d-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes d-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes d-slide { from { opacity: 0; transform: translateX(var(--dir, 18px)); } to { opacity: 1; transform: none; } }
@keyframes d-zoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes d-blur { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
/* "gestaffelt": the blocks of a page come one after another */
.d-stagger .home-main > * { animation: var(--m-page, d-rise) calc(var(--m-dur, .22s) * 1.4) var(--ease) both; }
.d-stagger .home-main > :nth-child(2) { animation-delay: 50ms; } .d-stagger .home-main > :nth-child(3) { animation-delay: 100ms; }
.d-stagger .home-main > :nth-child(4) { animation-delay: 150ms; } .d-stagger .home-main > :nth-child(n+5) { animation-delay: 200ms; }
.slide-in { animation: slidein .26s var(--ease) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(var(--dir, 12px)); } to { opacity: 1; transform: none; } }
.still .enter, .still .slide-in, .still .ask, .still .scrim, .still .panel { animation: none; }
.still .coach-ring, .still .coach-tip, .still .wm .draw, .still .wm .wm-dot, .still .wm .wgrp { transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Einstellungen › Teilen, Verlauf ─────────────────────────────────── */
.share { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .share { grid-template-columns: minmax(0, 1fr); } .share-side { position: static; } }
.share-col { display: grid; gap: 18px; min-width: 0; }
.share-side { display: grid; gap: 14px; position: sticky; top: 0; min-width: 0; }
.share-note { margin: 0; padding: 0 16px 12px; font-size: .86em; color: var(--text-3); }
.locks > .share-note:first-of-type { padding-top: 12px; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow b { font-weight: 600; }
.srow small { grid-column: 1; color: var(--text-2); font-size: .88em; overflow-wrap: anywhere; }
.srow small.foreign { color: var(--text-2); margin-top: 4px; display: flex; align-items: center; gap: 7px; }
.srow small.foreign .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.srow small.foreign.blocked .tag-dot { background: var(--accent); }
.rules-note { list-style: none; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; font-size: .88em; color: var(--text-2); background: var(--surface-2); }
.rules-note li { padding-inline-start: 14px; position: relative; }
.rules-note li::first-letter { text-transform: uppercase; }
.rules-note li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.rules-note li.blocked::before { background: var(--accent); }
.seg button:disabled { opacity: .45; cursor: default; }
.srow code { font-family: var(--font-mono); font-size: .86em; color: var(--text-3); }
.srow > .seg, .srow > .fixed { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 640px) { .srow { grid-template-columns: 1fr; } .srow > .seg, .srow > .fixed { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; } }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--e-seg-border, var(--line)); border-radius: min(var(--e-seg-radius, 9px), 19px); padding: 2px; gap: 2px; background: var(--e-seg-fill, var(--surface-2)); }
.seg button { font: inherit; font-size: .86em; padding: 5px 11px; background: transparent; color: var(--e-seg-text, var(--text-2)); border: 0; border-radius: min(calc(var(--e-seg-radius, 9px) - 2px), 16px); cursor: pointer; white-space: nowrap; }
.seg button[aria-checked="true"] { background: var(--e-seg-afill, var(--surface)); color: var(--e-seg-atext, var(--text)); font-weight: 600; box-shadow: 0 0 0 1px var(--e-seg-border, var(--line)); }

.fixed { font-size: .8em; font-weight: 600; color: var(--text-3); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 10px; }
.chip { font: inherit; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 8px; font-size: .9em; cursor: pointer; background: var(--surface); color: var(--text); }
.chip .cb-s { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line); display: grid; place-items: center; }
.chip[aria-checked="true"] .cb-s { background: var(--accent); border-color: var(--accent); }
.chip[aria-checked="true"] .cb-s::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px); }
.pre { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.pre h5 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.pre pre { margin: 0; padding: 12px 14px; font-family: var(--font-mono); font-size: .78em; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pre pre .c { color: var(--text-3); }
.pre pre .add { color: var(--accent-text); }
.pre pre .del { color: var(--text-3); text-decoration: line-through; }
.pre > .share-note { padding-top: 12px; }
.share-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 14px 12px; }
.share-msg { margin: 0; padding: 0 14px 12px; font-size: .88em; color: var(--text-2); min-height: 1.2em; }
.share-msg.bad { color: var(--accent-text); }
.history { display: grid; gap: calc(16px * var(--space)); min-width: 0; }
.history > .share-msg { padding: 0; }
.home-main.single, .wide .home-main.single { display: block; grid-template-columns: none; max-width: 980px; }
.hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: .95em; }
.hrow:last-child { border-bottom: 0; }
.hrow b { font-weight: 500; margin-inline-end: auto; min-width: 0; }
.hrow .when { color: var(--text-3); font-size: .88em; white-space: nowrap; }
.hrow.empty { color: var(--text-3); }
.acts-inline { display: flex; gap: 6px; }
.acts-inline .btn { padding: 6px 12px; font-size: .88em; }
.home aside a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Brain and Memory: a heading that folds, its tabs indented below */
.home aside .nav-grp { font: inherit; font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); background: none; border: 0; border-radius: 8px; padding: 12px 10px 4px; display: flex; align-items: center; gap: 6px; cursor: pointer; text-align: start; }
.home aside .nav-grp:hover { color: var(--text); }
.home aside .nav-grp i { font-style: normal; width: 10px; }
.home aside a.sub { padding-inline-start: 26px; }
.wide .home aside a.sub { padding-inline-start: 30px; }
/* Eigene Seiten below Memory: a small line, the word "Eigene Seiten", the pages and "+ Seite hinzufügen" (Home.js, core/navpages.js) */
/* a small line above "Eigene Seiten": where the own pages start */
.home aside .nav-line { width: 28px; height: 1px; flex: none; align-self: flex-start; justify-self: start; background: var(--text-3); opacity: .6; margin: 12px 0 6px 10px; }
.home aside .nav-ownlbl { font-size: calc(.78em * var(--nav-k, 1)); color: var(--text-3); padding: 0 10px 2px; }
@media (max-width: 760px) { .home aside .nav-line { margin-inline-start: 12px; } .home aside .nav-ownlbl { padding-inline-start: 12px; } }
.home aside a.nav-own small { font-size: .72em; color: var(--text-3); font-weight: 400; }
.home aside .nav-addwrap { position: relative; }
.home aside .nav-add { font: inherit; font-size: calc(.84em * var(--nav-k, 1)); text-align: start; width: 100%; background: none; border: 0; color: var(--text-3); padding: 5px 10px 5px 26px; border-radius: 8px; cursor: pointer; }
.home aside .nav-add:hover, .home aside .nav-add[aria-expanded="true"] { color: var(--text); background: var(--e-aside-afill, var(--surface-2)); }
.home aside .nav-addmenu { position: fixed; z-index: 30; width: 270px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px var(--shadow); }
.home aside .nav-addmenu > button { font: inherit; text-align: start; background: none; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer; color: var(--text); display: grid; gap: 1px; }
.home aside .nav-addmenu > button:hover { background: var(--surface-2); }
.home aside .nav-addmenu > button b { font-weight: 600; font-size: .92em; }
.home aside .nav-addmenu small { color: var(--text-3); font-size: .8em; }
.home aside .nav-addform { display: grid; gap: 10px; padding: 6px; }
.home aside .nav-addacts { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.home aside .nav-addacts .btn { padding: 6px 14px; }
@media (max-width: 760px) { .home aside .nav-addmenu { position: static; width: auto; top: auto !important; left: auto !important; box-shadow: none; margin: 2px 0 6px 26px; } .home aside .nav-add { min-height: 40px; padding-inline-start: 34px; } }
/* an own page while Anpassen: name, "Wo", remove (OverviewView.js with nav) */
/* a block asks to change a file (components/BlockWriteAsk.js): a bar at the bottom, nothing written before "Speichern" */
.bwa { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; width: min(760px, calc(100vw - 32px)); display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 30px var(--shadow); }
.bwa-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bwa-say { flex: 1; min-width: 220px; }
.bwa-say small { margin-inline-start: 8px; color: var(--text-3); }
.bwa-row .btn { padding: 6px 14px; }
.bwa-diff { max-height: 40vh; overflow: auto; margin: 0; padding: 6px 0; border: 1px solid var(--line); border-radius: calc(var(--radius) * .6); background: var(--bg); font-size: .8em; line-height: 1.5; }
.bwa-l { padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.bwa-l i { font-style: normal; display: inline-block; width: 1.4em; color: var(--text-3); }
.bwa-l.add { background: var(--accent-soft); color: var(--text); }
.bwa-l.rm { color: var(--text-3); text-decoration: line-through; }
.bwa-warn { margin: 0; font-size: .86em; font-weight: 600; color: var(--accent-text); }
.ov-navedit { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.ov-navedit .field { min-width: 200px; }
.pft-nav .seg { justify-self: start; }
.home-soon { display: grid; gap: 6px; max-width: 60ch; }
.news-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* ── Aufgaben: flows as boards, the list, one task in detail ─────────── */
.home-main.board, .wide .home-main.board { display: block; grid-template-columns: none; max-width: none; }
.tasksv { display: grid; gap: calc(14px * var(--space)); min-width: 0; }
.tv-bar { display: flex; justify-content: space-between; align-items: end; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.vtabs { display: flex; gap: 2px; flex-wrap: wrap; }
.vt { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; color: var(--text-2); cursor: pointer; margin-bottom: -1px; font-weight: 500; }
.vt[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.vt small { color: var(--text-3); font-weight: 400; }
.tv-bar .link { padding-bottom: 8px; }
.tb { display: grid; gap: 12px; min-width: 0; }
.tb-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 2px; }
.tb-col { position: relative; flex: 1 1 0; min-width: 170px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 220px; }
.tb-col.over { border-color: var(--accent); background: var(--accent-soft); }
.tb-col h5 { margin: 0; font-size: .74em; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.tb-what { font-size: .8em; color: var(--text-3); }
.lay-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: .9em; font-weight: 700; margin-inline-end: 6px; letter-spacing: 0; }
.grip { position: absolute; top: 12px; bottom: 12px; inset-inline-end: -9px; width: 6px; border-radius: 3px; cursor: col-resize; background: var(--line); z-index: 1; touch-action: none; }
.grip:hover { background: var(--accent); }
.tcard { font: inherit; text-align: start; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 10px 12px; display: grid; gap: 5px; cursor: pointer; width: 100%; }
.tcard:hover { border-color: var(--text-3); }
.tcard.busy { opacity: .5; }
.tcard .kind { display: flex; justify-content: space-between; gap: 8px; font-size: .74em; color: var(--text-3); }
.tcard .ttl { font-weight: 600; font-size: .93em; }
.uid { font-family: var(--font-mono); font-size: .82em; color: var(--text-3); }
.nob { border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; justify-items: start; }
.nob b { font-weight: 600; }
.tv-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tv-filters .search { margin: 0; flex: 1; min-width: 200px; }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 7px 10px; }
.search input { font: inherit; font-size: .94em; border: 0; background: transparent; color: var(--text); outline: none; flex: 1; min-width: 0; }
.search svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.sel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; }
.sel b { font-weight: 600; }
.sel .say { flex: 1; min-width: 180px; font-family: var(--font-mono); font-size: .86em; color: var(--text-2); }
.lw { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-x: auto; }
table.tl { width: 100%; border-collapse: collapse; font-size: .93em; min-width: 620px; }
table.tl th, table.tl td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tl th { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; background: var(--surface-2); }
table.tl tr:last-child td { border-bottom: 0; }
table.tl tbody tr:hover td { background: var(--surface-2); }
table.tl .tl-t { cursor: pointer; }
table.tl .cb { grid-row: auto; width: 18px; height: 18px; }
.stt { font-size: .86em; font-weight: 600; color: var(--accent-text); }
.stt.done { color: var(--text-3); font-weight: 500; }
.td-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: end; }
.td-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.td-move { display: flex; gap: 8px; align-items: center; font-size: .9em; color: var(--text-2); }
.td-move select { font: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 5px 8px; }
.td-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .td-grid { grid-template-columns: minmax(0, 1fr); } }
.td-body { display: grid; gap: 12px; min-width: 0; }
.td-doc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; display: grid; gap: 6px; min-width: 0; }
.td-file { font-family: var(--font-mono); font-size: .78em; color: var(--text-3); }
.td-raw { margin: 0; font-family: var(--font-mono); font-size: .82em; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.td-props { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; grid-template-columns: auto minmax(0, 1fr); }
.td-props dt, .td-props dd { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .88em; overflow-wrap: anywhere; }
.td-props dt { color: var(--text-3); }
/* the type's fields in the open task, each in its type (TaskField.js) */
.td-side { display: grid; gap: 12px; }
.td-edit dt { align-self: center; }
.td-edit dt .req { color: var(--accent-text); margin-inline-start: 2px; }
.td-edit dd { display: flex; align-items: center; min-width: 0; }
.td-edit .cb { grid-row: auto; }
.td-edit .inp { width: 100%; min-width: 0; }
.td-edit textarea.inp { resize: vertical; }
.tfc, .tfm { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.tfc .chip { padding: 3px 10px; font-size: .92em; }
.tfc .chip[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.tfm label { display: inline-flex; align-items: center; gap: 6px; }
.tfm .cb { width: 18px; height: 18px; }
.tfl { display: flex; gap: 8px; align-items: center; width: 100%; }
.tfl a { color: var(--accent-text); font-size: .9em; white-space: nowrap; }
/* on the card: a tick and a choice by their type */
.tcard-f .chip { padding: 0 8px; font-size: 1em; cursor: inherit; background: var(--surface-2); }
.tcf-check { display: inline-flex; align-items: center; gap: 4px; }
.tcf-check .cb { width: 14px; height: 14px; border-radius: 4px; grid-row: auto; }
.tcf-check .cb::after { width: 6px; height: 3px; }
.md-h { margin: 8px 0 2px; font-family: var(--font-display); font-weight: 500; }
h3.md-h { font-size: 1.15em; } h4.md-h { font-size: 1.02em; } h5.md-h, h6.md-h { font-size: .95em; }
.md-p { margin: 0; color: var(--text-2); line-height: 1.6; }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.md-q { margin: 0; padding: 2px 0 2px 12px; border-inline-start: 2px solid var(--line); color: var(--text-2); line-height: 1.6; }
.md-ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; color: var(--text-2); }
.md-check { list-style: none; padding-inline-start: 0; }
.md-check li { display: flex; gap: 10px; align-items: baseline; }
.md-check li i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line); flex: none; transform: translateY(2px); }
.md-check li.on i { background: var(--accent); border-color: var(--accent); }
.md-check li.on span { color: var(--text-3); text-decoration: line-through; }
.md-code { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-family: var(--font-mono); font-size: .82em; white-space: pre-wrap; overflow-wrap: anywhere; }
.md-link { color: var(--accent-text); }
.tasksv > .link { justify-self: start; }

/* ── Einstellungen › Aufgaben: lists and the flow editor ─────────────── */
.tf { display: grid; gap: 16px; min-width: 0; }
.tf .locks h4 { align-items: center; }
.i { font: inherit; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: .78em; font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: pointer; display: inline-grid; place-items: center; padding: 0; flex: none; text-transform: none; letter-spacing: 0; }
.i[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); }
.info { margin: 12px 16px 0; border-inline-start: 2px solid var(--accent); background: var(--surface-2); border-radius: 0; border-start-end-radius: 10px; border-end-end-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; font-size: .92em; color: var(--text-2); line-height: 1.55; }
.info b { color: var(--text); font-weight: 600; }
.info .ex { font-size: .92em; color: var(--text-3); }
.q-row .info { margin: 0; }
.tf-search { margin: 12px 16px 10px; }
.tf-scroll { max-height: 280px; overflow-y: auto; border-top: 1px solid var(--line); }
.tf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.tf-t { display: grid; gap: 1px; min-width: 0; }
.tf-t b { font-weight: 600; }
.tf-t small { color: var(--text-2); font-size: .88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-empty { padding: 14px 16px; display: grid; gap: 10px; justify-items: start; color: var(--text-3); font-size: .92em; }
.item { font: inherit; width: 100%; text-align: start; background: none; border: 0; border-top: 1px solid var(--line); padding: 11px 16px; cursor: pointer; color: var(--text-2); }
.item:hover { background: var(--surface-2); color: var(--text); }
.sw { width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--e-sw-off, var(--line)); background: var(--e-sw-offfill, var(--surface-2)); position: relative; cursor: pointer; padding: 0; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--e-sw-offknob, var(--text-3)); transition: transform .15s var(--ease); }
.sw[aria-checked="true"] { background: var(--e-sw-on, var(--accent)); border-color: var(--e-sw-on, var(--accent)); }
.sw[aria-checked="true"]::after { transform: translateX(14px); background: var(--e-sw-onknob, var(--on-accent)); }
.sw:disabled { opacity: .5; cursor: default; }
.defb { font-size: .68em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; margin-inline-start: 8px; vertical-align: 1px; }
.mkdef { font: inherit; font-size: .74em; font-weight: 500; color: var(--text-3); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; margin-inline-start: 8px; cursor: pointer; vertical-align: 1px; }
.tf-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.tf-sw { display: inline-flex; align-items: center; gap: 8px; font-size: .9em; color: var(--text-2); }
.tf-def { display: inline-flex; gap: 6px; align-items: center; margin-inline-start: 10px; }
.q-row { display: grid; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.q-row:last-child { border-bottom: 0; }
.q-l { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.inp { font: inherit; font-size: .95em; border: var(--bw, 1px) solid var(--e-inp-border, var(--line)); border-radius: var(--e-inp-radius, 8px); background: var(--e-inp-fill, var(--bg)); color: var(--e-inp-text, var(--text)); padding: 7px 10px; width: 100%; min-width: 0; }
.inp:focus { outline: none; border-color: var(--e-inp-focus, var(--accent)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--e-inp-focus, var(--accent)) 22%, transparent); }
.inp.b { font-weight: 600; }
textarea.inp { resize: vertical; }
.hintline { font-size: .84em; color: var(--text-3); }
.stepd { border-top: 1px solid var(--line); }
.stepd summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 16px; }
.stepd summary::-webkit-details-marker { display: none; }
.stepd summary::after { content: "▸"; color: var(--text-3); font-size: .8em; transition: transform .15s var(--ease); }
.stepd[open] summary::after { transform: rotate(90deg); }
.stepd summary b { font-weight: 600; }
.stepd summary small { color: var(--text-3); font-size: .86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir { font-family: var(--font-mono); font-size: .8em; color: var(--text-3); }
.st-ed { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 4px 16px 14px; background: var(--surface-2); }
.numl { display: grid; gap: 3px; font-size: .82em; color: var(--text-3); align-content: start; }
.num { font: inherit; font-weight: 700; width: 56px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--accent-text); padding: 6px 2px; }
.st-f { display: grid; gap: 8px; min-width: 0; }
.st-f label { display: grid; gap: 3px; font-size: .82em; color: var(--text-3); }
.lay { display: grid; gap: 8px; padding: 0 12px 14px; }
.lay-row { display: flex; gap: 8px; min-height: 64px; border: 1px dashed transparent; border-radius: 10px; padding: 2px; }
.lay-row:hover { border-color: var(--line); }
.lay-empty { align-self: center; padding: 0 10px; font-size: .86em; color: var(--text-3); }
.lay-b { position: relative; flex: 1.6 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); padding: 8px 14px 8px 8px; display: grid; gap: 4px; align-content: start; cursor: grab; user-select: none; }
.lay-h { display: flex; align-items: center; min-width: 0; }
.lay-h b { font-size: .88em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-b small { font-size: .78em; color: var(--text-3); }
.lay-grip { position: absolute; top: 8px; bottom: 8px; inset-inline-end: 3px; width: 5px; border-radius: 3px; background: var(--line); cursor: col-resize; touch-action: none; }
.lay-grip:hover { background: var(--accent); }
details.fold > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "▸"; color: var(--text-3); transition: transform .15s var(--ease); }
details.fold[open] > summary::after { transform: rotate(90deg); }
details.fold > summary b { font-weight: 600; }
.tf-pre { margin: 0; padding: 4px 16px 16px; font-family: var(--font-mono); font-size: .8em; line-height: 1.7; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-confirm { display: inline-flex; gap: 8px; align-items: center; font-size: .9em; color: var(--accent-text); flex-wrap: wrap; }

/* ── Sorten ──────────────────────────────────────────────────────────── */
.tf-row2 { grid-template-columns: minmax(0, 1fr) auto; }
.tf-acc { color: var(--accent-text); }
.tf-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .tf-split { grid-template-columns: minmax(0, 1fr); } }
.tf-col { display: grid; gap: 14px; min-width: 0; }
.kf-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); }
.kf-row .cb { grid-row: auto; justify-self: center; width: 20px; height: 20px; }
.kf-head { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.kf-head span:nth-child(2), .kf-head span:nth-child(3), .kf-fixed span:nth-child(2), .kf-fixed span:nth-child(3) { text-align: center; }
.kf-fixed { color: var(--text-3); font-size: .9em; font-family: var(--font-mono); }
.prevlbl { font-size: .72em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pbox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 14px; }
.tcard-f { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78em; color: var(--text-2); }
.tcard-f b { font-weight: 600; color: var(--text-3); margin-inline-end: 3px; }

/* ── Quellen ─────────────────────────────────────────────────────────── */
.tf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tf-dot.on { background: var(--accent); }
.tf-last { color: var(--text-3) !important; }
.tf-addsrc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); font-size: .92em; color: var(--text-2); }
.tf-timed { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .92em; color: var(--text-2); }
.tf-timed .inp { width: auto; }
.src-out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: start; }
.src-out.off .src-sent p { color: var(--text-3); }
.src-sent { display: grid; gap: 8px; min-width: 0; }
.src-sent p { margin: 0; line-height: 2; }
.src-sent b { font-weight: 600; }
.inp.inl { width: auto; display: inline-block; padding: 3px 8px; }
.src-opts { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; font-size: .9em; color: var(--text-2); }
.src-chk { display: inline-flex; gap: 6px; align-items: center; }
.tf-ok { color: var(--text-2); }
.tf-ok::before { content: "● "; color: var(--accent); }
.tf-bad { color: var(--accent-text); }
.seg button[aria-pressed="true"] { background: var(--e-seg-afill, var(--surface)); color: var(--e-seg-atext, var(--text)); font-weight: 600; box-shadow: 0 0 0 1px var(--e-seg-border, var(--line)); }

/* ── Umzug der alten Aufgaben ────────────────────────────────────────── */
.mig { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); padding: 10px 14px; font-size: .94em; color: var(--text-2); }
.mig-box { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--surface); padding: 16px; display: grid; gap: 10px; }
.mig-box b { font-weight: 600; }
.mig-box .lw { max-height: 320px; overflow-y: auto; }

/* ── Sorten: sections as a list, live previews ───────────────────────── */
.parts-ed { display: grid; gap: 8px; }
.part-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.part-row .mv:disabled { opacity: .35; cursor: default; }
.part-add { display: flex; gap: 8px; }
.part-add .inp { flex: 1; }
.parts-ed .chips { align-items: center; }
.mv { font: inherit; font-size: .82em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-2); cursor: pointer; padding: 2px 8px; }
.tf-sticky { position: sticky; top: 0; align-self: start; }
.pbox { display: grid; gap: 8px; }
.task-prev { font-size: .9em; }
.tp-fields { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-family: var(--font-mono); font-size: .86em; }
.tp-fields dt { color: var(--accent-text); }
.tp-fields dt b { color: var(--text-3); margin-inline-start: 2px; }
.tp-fields dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.tp-title { font-family: var(--font-display); font-weight: 500; border-top: 1px solid var(--line); padding-top: 8px; }
.tp-part { display: grid; gap: 1px; }
.tp-part span { font-weight: 600; }
.tp-part small { color: var(--text-3); font-family: var(--font-mono); }

/* ── Sorte mit Quelle: areas as folds, field table with the card beside ── */
.srcb { margin-inline-start: 8px; font-size: .72em; font-weight: 500; color: var(--e-tag-text, var(--accent-text)); background: var(--e-tag-fill, transparent); border: 1px solid var(--e-tag-border, var(--line)); border-radius: var(--e-tag-radius, 999px); padding: 1px 8px; vertical-align: 1px; }
.tf-adds { display: grid; }
.tf-presets { border-top: 1px solid var(--line); }
details.fold > summary .sum { display: grid; gap: 2px; min-width: 0; }
details.fold > summary .sum small { color: var(--text-3); font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-in { display: grid; border-top: 1px solid var(--line); }
.fold-in > .hintline, .fold-in > .chips, .fold-in > .link, .fold-in > .info { margin: 12px 16px 0; padding: 0; }
.fold-in > .parts-ed { padding: 14px 16px; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.q-grid > .q-row { border-bottom: 0; padding-bottom: 6px; }
.q-row .q-grid { gap: 8px 12px; }
.q-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inp.mono, .mono { font-family: var(--font-mono); font-size: .86em; }
.envst { display: block; }
.teststat { font-size: .9em; }
.rawd { border-bottom: 1px solid var(--line); }
.rawd > summary { cursor: pointer; padding: 10px 16px; font-size: .9em; color: var(--text-2); }
.exnav { display: flex; gap: 6px; padding: 0 16px 6px; }
.fields-split { display: grid; grid-template-columns: minmax(0, 1fr) 270px; border-top: 1px solid var(--line); align-items: start; }
.fields-split > .ft-wrap { border-inline-end: 1px solid var(--line); min-width: 0; display: grid; }
.fields-split > .ft-wrap > .info { margin: 12px 16px; }
.ft-scroll { overflow-x: auto; }
.ft { width: 100%; border-collapse: collapse; font-size: .9em; }
.ft th { text-align: start; font-size: .72em; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 10px 8px; vertical-align: bottom; border-bottom: 1px solid var(--line); }
.ft td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ft th:first-child, .ft td:first-child { padding-inline-start: 16px; }
.ft .c { text-align: center; }
.ft td.c .cb { margin: 0 auto; width: 20px; height: 20px; }
.ft .cb:disabled { opacity: .35; cursor: default; }
.q-arg { display: grid; gap: 4px; padding-block: 4px; }
.q-arg .req { color: var(--accent-text); }
.ft td.ftype { min-width: 150px; }
.ft td.ftype .inp { width: 100%; }
.ft td.ftype .fvals { margin-top: 6px; font-size: .9em; }
.ft tr.fixed td { background: var(--surface-2); }
.ft tr.fixed b { font-family: var(--font-mono); font-weight: 600; }
.ft tr.fixed .hintline { display: block; max-width: 150px; white-space: normal; overflow-wrap: anywhere; }
.ft tr.off code, .ft tr.off .exv { color: var(--text-3); }
.ft td .inp { min-width: 0; width: 130px; padding: 4px 8px; }
.ft td small.tf-ok, .ft td small.tf-bad { display: block; margin-top: 4px; font-size: .84em; }
.ft code { font-family: var(--font-mono); font-size: .92em; color: var(--accent-text); white-space: nowrap; }
.exv { display: inline-block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.muted { color: var(--text-3); }
.ft td .inp.tplin { width: 180px; }
.ins { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; max-width: 200px; }
.insb { font: inherit; font-family: var(--font-mono); font-size: .74em; border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); border-radius: 5px; padding: 0 5px; cursor: pointer; }
.insb:hover { border-color: var(--accent); }
.ft-note { margin: 10px 16px 0; }
.cardside { position: sticky; top: 12px; display: grid; gap: 8px; padding: 14px 16px; }
.tcard .kname { color: var(--accent-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-card { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.part-card:first-child { padding-top: 0; }
.part-about { display: grid; gap: 4px; padding-inline-start: 30px; }
.part-about .q-l { font-weight: 500; font-size: .86em; color: var(--text-2); }
.tp-about { color: var(--text-3); font-style: italic; }
@media (max-width: 1000px) {
  .fields-split { grid-template-columns: minmax(0, 1fr); }
  .fields-split > .ft-wrap { border-inline-end: 0; }
  .cardside { position: static; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) { .part-about { padding-inline-start: 0; } }
.ft th.th-card { min-width: 78px; white-space: normal; }
.ft th:last-child, .ft td:last-child { padding-inline-end: 16px; }
.tcard .uid { white-space: nowrap; }
.tcard .kind .kname { min-width: 0; }

/* ── Skills tab: look only; Einstellungen › Skills: change, with "Das ändert sich im Projekt" ── */
.home-main.sk-host { max-width: 980px; }
.skv { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sk-head { display: grid; gap: 6px; }
.sk-head h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.35em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sk-head .p { max-width: 70ch; }
.sk-path, .sk-res { font-family: var(--font-mono); font-size: .82em; color: var(--text-2); overflow-wrap: anywhere; }
.sk-res { color: var(--accent-text); }
.sk-local { font-size: .68em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border: 1px dashed var(--line); border-radius: 999px; padding: 0 7px; margin-inline-start: 4px; }
.sk-soon { font-size: .78em; color: var(--text-3); }
details.sk-more { border-top: 1px solid var(--line); }
.locks > h4 + details.sk-more { border-top: 0; }
details.sk-more > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
details.sk-more > summary::-webkit-details-marker { display: none; }
details.sk-more > summary::after { content: "▸"; color: var(--text-3); transition: transform .15s var(--ease); }
details.sk-more[open] > summary::after { transform: rotate(90deg); }
details.sk-more > summary > span { display: grid; gap: 1px; min-width: 0; }
details.sk-more > summary b { font-weight: 600; }
details.sk-more > summary small { color: var(--text-3); font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 2px 16px 16px; font-size: .92em; }
.sk-kv > span:nth-child(odd) { color: var(--text-3); font-size: .92em; }
.sk-kv-top { padding-top: 14px; }
.sk-md { padding: 0 16px 14px; font-size: .92em; overflow-x: auto; }
.sk-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .92em; }
.locks > h4 + .sk-li { border-top: 0; }
.sk-raw { max-height: 560px; overflow: auto; padding-top: 14px; }
.skv > .seg { justify-self: start; }
.skv > .seg button { flex: none; padding: 6px 16px; }
.sk-edit { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.ssk { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.ssk.wide { grid-template-columns: minmax(0, 1fr); }
.ssk-main { display: grid; gap: 14px; min-width: 0; }
.sk-chg { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; align-content: start; background: var(--surface); position: sticky; top: 0; }
.sk-chg h5 { margin: 0; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.sk-tree { font-family: var(--font-mono); font-size: .8em; display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 8px 4px; }
.sk-grp { padding: 6px 8px 2px; color: var(--text-3); font-family: var(--font-body); font-size: .82em; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.sk-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 3px 8px 3px 10px; border-inline-start: 2px solid transparent; color: var(--text-2); overflow-wrap: break-word; }
.sk-f .tag { font-family: var(--font-body); font-size: .84em; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.sk-f .from { display: block; color: var(--text-3); text-decoration: line-through; }
.sk-f.add, .sk-f.mod { border-inline-start-color: var(--accent); color: var(--text); }
.sk-f.add { background: var(--accent-soft); }
.sk-f.del { color: var(--text-3); text-decoration: line-through; }
.sk-f.later .tag { color: var(--text-3); font-weight: 500; font-style: italic; }
.sk-f.in { animation: sk-in .24s var(--ease) both; }
@keyframes sk-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sk-f.in { animation: none; } }
.sk-none { padding: 8px 10px; font-family: var(--font-body); font-size: 1.1em; color: var(--text-3); }
.sk-commit { font-family: var(--font-mono); font-size: .78em; color: var(--text-2); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .ssk { grid-template-columns: minmax(0, 1fr); } .sk-chg { position: static; } }
@media (max-width: 560px) { .sk-kv { grid-template-columns: minmax(0, 1fr); } .sk-li { grid-template-columns: auto minmax(0, 1fr); } .sk-li > :last-child { grid-column: 2; } }
.sk-md h1, .sk-md h2, .sk-md h3, .sk-md h4 { font-family: var(--font-display); font-weight: 500; font-size: 1em; margin: 12px 0 4px; }
.sk-md p, .sk-md ul, .sk-md ol { margin: 6px 0; color: var(--text-2); }
.sk-md code { font-family: var(--font-mono); font-size: .88em; }
.sk-md pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.sk-md table { border-collapse: collapse; font-size: .92em; }
.sk-md th, .sk-md td { border: 1px solid var(--line); padding: 4px 8px; text-align: start; }
.ssk-adds { display: grid; }
.ssk-adds .item[aria-pressed="true"] { color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.ssk-part-h { display: flex; gap: 8px; align-items: center; }
.ssk-part-h .inp { flex: 1; font-weight: 600; }
.ssk-part-h select.inp { flex: none; width: auto; font-weight: 400; }
.ssk-area { display: grid; gap: 1px; padding: 12px 16px 6px; border-top: 1px solid var(--line); }
.ssk-area b { font-weight: 600; }
.ssk-area small { color: var(--text-3); font-size: .84em; }
.ssk-area + .tf-row { border-top: 0; }
.ssk-why { padding: 0 16px 10px; margin: 0; }
.ssk-sys { grid-template-columns: auto minmax(0, 1fr); }
.dirrow { display: flex; gap: 8px; align-items: center; }
.dirrow .inp { flex: 1; min-width: 0; }
.dirrow .inp:disabled { color: var(--text-2); background: var(--surface-2); }
.ssk-mx-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.ssk-mx { width: 100%; border-collapse: collapse; font-size: .9em; min-width: 420px; }
.ssk-mx th { text-align: start; font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 10px 10px; border-bottom: 1px solid var(--line); }
.ssk-mx td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.ssk-mx th:first-child, .ssk-mx td:first-child { padding-inline-start: 16px; }
.ssk-mx .c { text-align: center; }
.ssk-mx .cb { grid-row: auto; width: 20px; height: 20px; margin: 0 auto; }
.q-l .cb { grid-row: auto; width: 20px; height: 20px; margin: 0; flex: none; }
.ssk-mx select.inp { width: auto; padding: 4px 8px; font-size: .92em; }
.locks details.sk-more details.sk-more { margin: 0 16px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.ssk-src { background: var(--surface-2); }
.ssk-src-row { display: flex; gap: 8px 12px; align-items: baseline; flex-wrap: wrap; }

/* ── Übersicht: pages of blocks on a 12-column board ─────────────────── */
.ov { display: grid; gap: 24px; align-content: start; min-width: 0; }
.ov-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.ov-head .h { margin: 0; }
.ov-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-ctl .seg { display: inline-flex; }
.ov-ctl .btn[aria-pressed="true"] { border-color: var(--accent); }
.ov-pages { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ov-pages button[role="tab"], .ov-addpage { font: inherit; font-size: .94em; border: 0; background: none; color: var(--text-2); padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: baseline; }
.ov-pages button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.ov-addpage { color: var(--text-3); }
.ov-addpage:hover { color: var(--text); }
.ov-pages .inp { width: 160px; padding: 4px 8px; }
.ov-rmpage { margin-inline-start: auto; font-size: .88em; }
.ov-mine { font-size: .72em; color: var(--text-3); font-weight: 400; }
.ov-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ov-card { min-width: 0; }
.ov-board.edit .ov-card { outline: 1px dashed var(--line); outline-offset: 3px; cursor: grab; }
.ov-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ov-ch b { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.ov-t { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.ov-handle { color: var(--text-3); cursor: grab; user-select: none; }
.ov-tools { display: inline-flex; gap: 8px; align-items: center; }
.ov-tools .inp { width: auto; padding: 2px 6px; font-size: .84em; }
.ov-code { font-size: .66em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.ov-next { display: grid; gap: 8px; padding: 14px 16px 16px; border-inline-start: 3px solid var(--accent); }
.ov-next b { font-weight: 600; }
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 14px 16px 16px; }
.ov-kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; }
.ov-kpi small { color: var(--text-3); font-size: .8em; }
.ov-kpi b { font-family: var(--font-display); font-weight: 400; font-size: 1.7em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ov-kpi span { font-size: .82em; color: var(--text-2); }
.ov-kpi i { font-style: normal; font-weight: 600; }
.ov-kpi i.up { color: var(--text); } .ov-kpi i.down { color: var(--accent-text); }
.chart { padding: 10px 12px 8px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax { stroke: var(--line); stroke-width: 1; }
.chart .tk { fill: var(--text-3); font-family: var(--font-body); font-size: 10px; }
.ov-card[style*="span 12"] .chart .tk, .ov-card[style*="span 9"] .chart .tk { font-size: 13px; }
.chart .b-new { fill: var(--line); }
.chart .b-done { fill: var(--accent); }
.chart .ln { fill: none; stroke: var(--text-2); stroke-width: 1.8; }
.chart .ar { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.chart .pt { fill: var(--text-2); }
.ov-hb { display: grid; gap: 2px; padding: 8px 0; }
.ov-hbr { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) 64px; gap: 10px; align-items: center; padding: 4px 16px; font-size: .88em; }
.ov-hbr > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-hbr .tr { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.ov-hbr .tr i { display: block; height: 100%; }
.ov-hbr .tr i.o { background: var(--text-3); } .ov-hbr .tr i.d { background: var(--accent); }
.ov-hbr > span:last-child { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: .92em; }
.ov-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .92em; }
.ov-row:first-of-type { border-top: 0; }
.ov-row b { font-weight: 600; }
.ov-id { font-family: var(--font-mono); font-size: .86em; color: var(--accent-text); }
.ov-age { color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9em; }
.ov-who { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); font-size: .68em; font-weight: 600; color: var(--text-2); }
.ov-big { font-family: var(--font-display); font-size: 2.2em; font-weight: 300; padding: 8px 16px 14px; font-variant-numeric: tabular-nums; }
.ov-big small { display: block; font-family: var(--font-body); font-size: .38em; color: var(--text-3); }
.ov-frame { width: 100%; border: 0; display: block; min-height: 60px; background: transparent; }
.ov-add { font: inherit; border: 1px dashed var(--line); border-radius: var(--radius); background: none; color: var(--text-2); padding: 16px; cursor: pointer; display: grid; place-items: center; gap: 2px; }
.ov-add:hover { border-color: var(--accent); color: var(--text); }
.ov-add b { font-weight: 600; }
.ov-add small { color: var(--text-3); font-size: .84em; }
.ov-picker { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; display: grid; gap: 14px; }
.ov-lib { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ov-libi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; }
.ov-libi b { font-weight: 600; font-size: .94em; }
.ov-libi small { display: block; color: var(--text-3); font-size: .82em; }
.ov-libi.off { opacity: .55; }
.ov-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ov-form { display: grid; gap: 10px; min-width: 0; }
.ov-form > label, .ov-f2 > label, .ov-form > span { display: grid; gap: 4px; font-size: .86em; color: var(--text-3); }
.ov-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ov-perm { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface-2); font-size: .88em; }
.ov-perm b { font-weight: 600; }
.ov-perm label { display: flex; gap: 8px; align-items: center; color: var(--text-2); flex-wrap: wrap; }
.ov-codearea { font-family: var(--font-mono); font-size: .82em; line-height: 1.55; min-height: 280px; resize: vertical; white-space: pre; tab-size: 2; }
.ov-pfoot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.ov-pfoot label { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .ov-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ov-board { grid-template-columns: minmax(0, 1fr); } .ov-card { grid-column: 1 / -1 !important; } .ov-f2 { grid-template-columns: minmax(0, 1fr); } }
.ov-proj { display: grid; gap: 18px; padding: 16px 16px 18px; }
.ov-sec { display: grid; gap: 6px; min-width: 0; }
.ov-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ov-lbl span { font-size: .78em; font-weight: 600; color: var(--text-3); }
.ov-path { font-family: var(--font-mono); font-size: .76em; color: var(--text-3); text-decoration: none; overflow-wrap: anywhere; }
.ov-path:hover { color: var(--accent-text); text-decoration: underline; }
.ov-text { margin: 0; font-size: 1.05em; color: var(--text); max-width: 72ch; }
.home-setupnote { margin-bottom: 18px; }

/* ── Brain › Agents: workflows drawn on a canvas, "danach" (accent) and "leitet" (lead, dashed) ── */
.ag { display: grid; gap: 16px; max-width: 1240px; width: 100%; }
.ag-head { display: grid; gap: 4px; }
.ag > .link { justify-self: start; }   /* the back link sits on the left, not stretched across */
.ag-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.ag-tabs button { font: inherit; font-family: var(--font-nav, inherit); padding: 8px 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-2); cursor: pointer; }
.ag-tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.ag-tabs small { color: var(--text-3); font-weight: 400; margin-inline-start: 6px; }
.ag-bar { display: flex; gap: 8px; align-items: center; }
.ag-bar .ag-search { flex: 1; }
.ag-more { justify-self: start; }
.ag-tx.quiet { color: var(--text-3); font-size: .86em; }
.ag-cap { display: grid; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.ag-cap-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.1em; }
.ag-cap-grp { display: grid; gap: 6px; }
.ag-cap-grp > b { font-size: .9em; }
.ag-checks { display: grid; gap: 2px; }
.ag-checks.scroll { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: var(--bg); }
.ag-checks.cols { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ag-check { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: .92em; }
.ag-check:hover { background: var(--surface-2); }
.ag-check input { margin-top: 3px; accent-color: var(--accent); }
.ag-check span { display: grid; gap: 1px; min-width: 0; }
.ag-check small { color: var(--text-3); font-size: .86em; }
.ag-tag.warn { border-color: var(--text-3); border-style: dashed; color: var(--text-3); }
.ag-tag i { font-style: normal; font-weight: 400; }
.ag-model { max-width: 420px; }
.ag-body { font: .85em/1.55 var(--font-mono); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; width: 100%; resize: vertical; min-height: 14em; }
.ag-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; font-size: .92em; }
.ag-kv > span:nth-child(odd) { color: var(--text-3); }
@media (max-width: 640px) { .ag-kv { grid-template-columns: 1fr; gap: 2px; } .ag-kv > span:nth-child(even) { margin-bottom: 8px; } }
.ag-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ag-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); width: 100%; text-align: start; font: inherit; color: inherit; background: none; cursor: pointer; }
.ag-item:first-child { border-top: 0; }
.ag-item:hover { background: var(--surface-2); }
.ag-item.static { cursor: default; }
.ag-item.static:hover { background: none; }
.ag-nm { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ag-tx { color: var(--text-2); font-size: .92em; }
.ag-pa { font-family: var(--font-mono); font-size: .76em; color: var(--text-3); grid-column: 2; grid-row: 1 / span 3; align-self: center; white-space: nowrap; }
.ag-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* the provider logo of an agent's model (components/AiMark.js): a tile, dashed when it runs like the main session */
.aim { display: inline-grid; place-items: center; flex: none; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
.aim-svg, .aim-svg svg { display: block; width: 100%; height: 100%; }
.aim.dash { background: none; border-style: dashed; border-color: var(--text-3); }
.aim.inh { border-style: dashed; border-color: var(--text-3); }   /* the logo of the main session: the agent has no model of its own */
.aim-none { display: block; }
.aim-tile { width: 44px; height: 44px; border-radius: 12px; } .aim-tile .aim-svg { width: 24px; height: 24px; }
.aim-pile { width: 44px; height: 30px; border-radius: 9px; } .aim-pile .aim-svg { width: 18px; height: 18px; }
.aim-chip { width: 24px; height: 24px; border-radius: 50%; } .aim-chip .aim-svg { width: 14px; height: 14px; }
.aim-mark { width: 18px; height: 18px; border-radius: 5px; } .aim-mark .aim-svg { width: 12px; height: 12px; }
.aim-node { width: 32px; height: 32px; border-radius: 9px; } .aim-node .aim-svg { width: 18px; height: 18px; }
.ag-pal b { display: flex; gap: 7px; align-items: center; }
.tf-row2.sag-ai { grid-template-columns: auto minmax(0, 1fr) auto; }
.aim-live { width: 100%; height: 100%; border: 0; border-radius: 50%; background: none; } .aim-live .aim-svg { width: 55%; height: 55%; }
.aim-live.dash { border: 0; }
.ai-line { display: flex; gap: 6px; align-items: baseline; font-size: .84em; color: var(--text-2); }
.ai-line b { font-weight: 600; color: var(--text); }
.ag-item.ai { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; }
.ag-item.ai > .aim, .ag-item.ai > .ai-pile { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
.ag-item.ai > .ag-nm, .ag-item.ai > .ag-tx, .ag-item.ai > .ag-chips, .ag-item.ai > .ai-line { grid-column: 2; }
.ag-item.ai > .ag-pa { grid-column: 3; grid-row: 1 / span 4; }
.ai-pile { display: grid; gap: 4px; justify-items: center; }
.ai-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px 3px 4px; font-size: .84em; font-weight: 600; color: var(--text); background: var(--surface); }
.ai-chip small { font-weight: 400; color: var(--text-3); }
.ai-arrow { color: var(--text-3); align-self: center; }
@media (max-width: 640px) { .ag-item.ai { grid-template-columns: 44px minmax(0, 1fr); } .ag-item.ai > .ag-pa { grid-column: 2; grid-row: auto; white-space: normal; overflow-wrap: anywhere; } }
.ag-tag { font-size: .72em; font-weight: 600; border: 1px solid var(--e-tag-border, var(--line)); background: var(--e-tag-fill, transparent); border-radius: var(--e-tag-radius, 999px); padding: 1px 8px; color: var(--text-2); }
.ag-tag.acc { border-color: var(--accent); color: var(--accent-text); }
.ag-facts { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ag-facts label:not(.ag-check) { display: grid; gap: 4px; font-size: .82em; font-weight: 600; color: var(--text-2); min-width: 0; }
.ag-facts .wide { grid-column: 1 / -1; }
.ag-facts input, .ag-facts textarea { font: inherit; font-size: 1.1em; font-weight: 400; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; resize: vertical; }
.ag-path { font-family: var(--font-mono); font-size: .92em; font-weight: 400; color: var(--text-3); overflow-wrap: anywhere; }
.ag-tools { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; }
.ag-line { width: 18px; height: 0; border-top: 2px solid var(--accent); display: inline-block; margin-inline-end: 6px; vertical-align: middle; }
.ag-line.lead { border-top: 2px dashed var(--lead); }
.ag-line.rel { border-top-color: var(--text-2); }
.ag-line.dashed { border-top-style: dashed; }
.ag-rels { flex-wrap: wrap; }
.ag-rels button { flex: none; padding: 6px 12px; }
.ag-hint { margin: -6px 0 0; }
.ag-relform { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; }
.ag-relform b { font-size: .88em; }
.ag-relform input:not([type]) { font: inherit; font-size: .92em; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; width: 220px; }
.ag-relform .ag-check { padding: 0; }
.ag-studio { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: start; }
.ag-studio > * { min-width: 0; }
.ag-palette { display: grid; gap: 8px; }
.ag-pal-head { display: flex; justify-content: space-between; align-items: center; }
.ag-add { font: inherit; font-weight: 600; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; line-height: 1; }
.ag-add:hover, .ag-add[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); }
.ag-full { justify-self: start; font-weight: 600; color: var(--accent-text); }
.ag-addform { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px; }
.ag-addform input, .ag-search { font: inherit; font-size: .88em; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; width: 100%; }
.ag-pal-list { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; align-content: start; padding-inline-end: 2px; }
.ag-lbl { font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ag-pal { font: inherit; text-align: start; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 8px 10px; cursor: grab; display: grid; gap: 1px; touch-action: none; user-select: none; }
.ag-pal b { font-weight: 600; font-size: .9em; }
.ag-pal span { font-size: .76em; color: var(--text-3); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-pal:hover { background: var(--surface-2); }
.ag-canvas { position: relative; height: 560px; min-height: 320px; resize: vertical; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ag-canvas svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: grab; }
.ag-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: .92em; pointer-events: none; }
.ag-zoom { position: absolute; inset-inline-end: 12px; bottom: 12px; display: flex; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }
.ag-zoom button { font: inherit; min-width: 32px; height: 30px; padding: 0 8px; border: 0; background: none; color: var(--text); cursor: pointer; font-size: 1.05em; }
.ag-zoom button.pct { font-size: .8em; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 52px; border-inline: 1px solid var(--line); }
.ag-zoom button:hover { background: var(--surface-2); }
html.ag-grabbing, html.ag-grabbing * { cursor: grabbing !important; }
.ag-dot { fill: var(--line); }
.ag-n { cursor: grab; }
.ag-n-box { fill: var(--surface); stroke: var(--text-3); stroke-width: 1; }
.ag-n.sel .ag-n-box { stroke: var(--accent); stroke-width: 2; }
.ag-n-name { font: 600 13px var(--font-body); fill: var(--text); }
.ag-n-role { font: 400 10.5px var(--font-body); fill: var(--text-3); }
.ag-n-step { font: 600 10px var(--font-body); fill: var(--accent-text); }
.ag-n-step.lead { fill: var(--lead); }
/* Gewichtung on an agent box: a small tag on its lower edge */
.ag-n-wt rect { fill: var(--surface); stroke: var(--line); }
.ag-n-wt text { font: 700 9.5px var(--font-body); fill: var(--text-2); letter-spacing: .02em; }
.ag-n-wt.should rect { stroke: var(--wire-5); } .ag-n-wt.should text { fill: var(--wire-5); }
.ag-n-wt.must-tell rect { stroke: var(--wire-4); } .ag-n-wt.must-tell text { fill: var(--wire-4); }
.ag-n-wt.must-block rect { fill: var(--wire-4); stroke: var(--wire-4); } .ag-n-wt.must-block text { fill: var(--bg); }
.ag-step-wt { margin-top: 12px; display: grid; gap: 6px; }
/* a circle on every side; the hit area is larger than the circle, the one a line would dock at fills in */
.ag-port { cursor: crosshair; }
.ag-port-hit { fill: transparent; }
.ag-handle { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .12s var(--ease), fill .12s var(--ease); }
.ag-port.lead .ag-handle { stroke: var(--lead); }
.ag-port:hover .ag-handle, svg.linking .ag-handle { transform: scale(1.25); }
.ag-port.hot .ag-handle { fill: var(--accent); transform: scale(1.6); }
.ag-port.hot.lead .ag-handle { fill: var(--lead); }
/* lines: "danach" solid in the accent, "leitet" dashed; an own color wins (--ec) */
.ag-e { cursor: pointer; }
.ag-e-line { fill: none; stroke: var(--ec, var(--accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-e.lead .ag-e-line { stroke: var(--ec, var(--lead)); stroke-width: 1.8; stroke-dasharray: 6 5; }
.ag-e-ar { fill: var(--ec, var(--accent)); }
.ag-e.lead .ag-e-ar { fill: var(--ec, var(--lead)); }
.ag-e.rel .ag-e-line { stroke: var(--ec, var(--text-2)); }
.ag-e.rel .ag-e-ar { fill: var(--ec, var(--text-2)); }
.ag-e.dashed .ag-e-line { stroke-dasharray: 6 5; }
.ag-e-hit { fill: none; stroke: transparent; stroke-width: 16; }
/* the relation, in the middle of its line */
.ag-e-lbl rect { fill: var(--surface); stroke: var(--ec, var(--accent)); stroke-width: 1; }
.ag-e.lead .ag-e-lbl rect { stroke: var(--ec, var(--lead)); }
.ag-e.rel .ag-e-lbl rect { stroke: var(--ec, var(--text-3)); }
.ag-e-lbl text { font: 600 10.5px var(--font-body); fill: var(--text-2); }
.ag-e:hover .ag-e-lbl text { fill: var(--text); }
.ag-e:hover .ag-e-line { stroke-width: 2.6; }
.ag-e.sel .ag-e-line { stroke-width: 3.2; }
.ag-mid { fill: var(--surface); stroke: var(--ec, var(--accent)); stroke-width: 1.5; stroke-dasharray: 2 2; cursor: move; }
.ag-bend { fill: var(--ec, var(--accent)); stroke: var(--surface); stroke-width: 2; cursor: move; }
.ag-bends.lead .ag-mid { stroke: var(--ec, var(--lead)); }
.ag-bends.lead .ag-bend { fill: var(--ec, var(--lead)); }
.ag-bends.rel .ag-mid { stroke: var(--ec, var(--text-2)); }
.ag-bends.rel .ag-bend { fill: var(--ec, var(--text-2)); }
.ag-temp { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.ag-temp.lead { stroke: var(--lead); }
.ag-temp.rel { stroke: var(--text-2); }
/* the ends of a chosen line: grips to dock it at another circle */
.ag-grip { fill: var(--ec, var(--accent)); stroke: var(--surface); stroke-width: 2; cursor: grab; }
.ag-ends.lead .ag-grip { fill: var(--ec, var(--lead)); }
.ag-ends.rel .ag-grip { fill: var(--ec, var(--text-2)); }
.ag-e.ghosted { opacity: .25; }
/* the small panel at a chosen line: a floating layer, so the one soft shadow */
.ag-pop { position: absolute; z-index: 3; width: 272px; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px var(--shadow); font-size: .9em; }
.ag-pop-row { display: grid; gap: 4px; }
.ag-pop-row > span { font-size: .78em; font-weight: 600; color: var(--text-3); }
.ag-pop .seg { display: flex; }
.ag-chipset { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-chipset button { font: inherit; font-size: .84em; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; }
.ag-chipset button[aria-checked="true"] { border-color: var(--accent); color: var(--text); font-weight: 600; }
.ag-chipset button.add { color: var(--text-3); }
.ag-pop .seg button { padding: 4px 6px; font-size: .84em; }
.ag-pop .note { margin: 0; font-size: .8em; }
.ag-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-sw button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.ag-sw button.auto { background: var(--accent); }
.ag-sw button.auto.lead { background: var(--lead); }
.ag-sw button[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.ag-pop-act { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.ag-out { display: grid; gap: 8px; }
.ag-out-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ag-out pre.empty { color: var(--text-3); font-family: var(--font-body); font-style: italic; }
.ag-actions { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.ag-out pre { min-height: 9em; margin: 0; font: .82em/1.55 var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; white-space: pre-wrap; color: var(--text-2); }
/* an agent pulled from the list: the box itself, held where it was grabbed, at the canvas zoom */
.ag-ghost { position: fixed; z-index: 50; pointer-events: none; transform-origin: 0 0; box-sizing: border-box; display: grid; align-content: center; gap: 3px; padding: 0 14px; border: 1.5px solid var(--accent); border-radius: 10px; background: var(--surface); opacity: .92; box-shadow: 0 6px 18px var(--shadow); }
.ag-ghost b { font: 600 13px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ghost span { font: 400 10.5px var(--font-body); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the text for the AI: Trinity's head, the own text, Trinity's flow — or as it looks */
.ag-out pre.ag-gen, .ag-out pre.ag-uses { min-height: 0; }
.ag-gen { margin: 0; padding: 12px 14px 6px; font: .82em/1.6 var(--font-mono); white-space: pre-wrap; color: var(--text-3); background: var(--surface-2); }
.ag-gen:empty { display: none; }
.ag-prompt .ag-notes { min-height: 7em; border-top: 1px solid var(--line); }
.ag-view { padding: 14px 18px; font-size: .94em; }
.ag-out-top .seg { display: inline-flex; }
@media (max-width: 900px) {
  .ag-studio { grid-template-columns: minmax(0, 1fr); }
  .ag-pal-list { display: flex; overflow-x: auto; max-height: none; }
  .ag-pal { min-width: 150px; }
  .ag-facts { grid-template-columns: 1fr; }
  .ag-item { grid-template-columns: minmax(0, 1fr); }
  .ag-pa { grid-column: 1; grid-row: auto; }
}

/* ── Memory › Projekt: name, one sentence, path; open → Ansicht / Roh / Verlauf ── */
.pj { display: grid; gap: 16px; }
.pj-head { display: grid; gap: 4px; min-width: 0; }
.pj-back { justify-self: start; }
.pj-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.pj-item { border-top: 1px solid var(--line); }
.pj-item:first-child { border-top: 0; }
.pj-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding-inline-end: 16px; }
.pj-side { display: grid; gap: 4px; justify-items: end; }
.pj-acts { display: flex; gap: 14px; }
.pj-acts .link { font-size: .84em; padding: 0; }
.pj-editor { display: grid; gap: 8px; padding: 4px 16px 14px; }
.pj-lbl { font-size: .84em; font-weight: 600; color: var(--text-2); }
.pj-input, .pj-area { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
.pj-input.mono, .pj-area { font-family: var(--font-mono); font-size: .86em; }
.pj-area { resize: vertical; line-height: 1.55; }
.pj-row:hover { background: var(--surface-2); }
.pj-main { font: inherit; color: inherit; text-align: start; background: none; border: 0; padding: 12px 16px; display: grid; gap: 2px; cursor: pointer; min-width: 0; }
.pj-nm { font-weight: 600; }
.pj-tx { color: var(--text-2); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-tx.empty { color: var(--text-3); font-style: italic; }
.pj-path { font-family: var(--font-mono); font-size: .76em; color: var(--text-3); text-decoration: none; border-bottom: 1px dotted var(--line); overflow-wrap: anywhere; justify-self: start; }
.pj-path:hover { color: var(--text); }
.pj-say { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 8px; }
.pj-say code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; overflow-wrap: anywhere; }
.pj-dtop { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.pj-seg { min-width: 260px; }
.pj-doc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; max-width: 80ch; }
.pj-raw { margin: 0; font: .82em/1.55 var(--font-mono); white-space: pre-wrap; overflow-x: auto; color: var(--text-2); }
.pj-hrow { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9em; }
.pj-hrow:first-child { border-top: 0; }
.pj-hrow span:first-child, .pj-hrow span:last-child { color: var(--text-3); }
@media (max-width: 640px) {
  .pj-row { grid-template-columns: minmax(0, 1fr); padding: 0 16px 10px 0; }
  .pj-side { justify-items: start; margin-inline-start: 16px; }
  .pj-seg { min-width: 0; width: 100%; }
  .pj-hrow { grid-template-columns: 90px minmax(0, 1fr); }
  .pj-hrow span:last-child { display: none; }
}

/* Skills: the whole row opens the skill */
.sk-pick { font: inherit; color: inherit; text-align: start; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); cursor: pointer; }
.sk-pick:hover { background: var(--surface-2); }
.sk-bar .search { flex: 1; }

/* ── Brain › Regelwerke ── */
.rl-kind { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.rl-kh { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rl-rule { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.rl-why { color: var(--text-2); }
.rl-addrule { justify-self: start; font-size: .88em; }
.rl-ex { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rl-ex label { display: grid; gap: 4px; font-size: .82em; font-weight: 600; color: var(--text-2); min-width: 0; }
.rl-ex .ag-body { min-height: 8em; font-weight: 400; }
.rl-target { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: .9em; }
.rl-target span { color: var(--text-3); }
.rl-target code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
.rl-desc-read { white-space: pre-line; }
.ag-facts textarea.rl-desc { font-weight: 400; min-height: 4.5em; }

/* Brain › Agent-Dateien (AgentFilesView) and Einstellungen › Agent-Dateien (SettingsAgentFiles) */
.afv-mx .afv-grp { border-bottom: 0; padding-bottom: 2px; }
.afv-row { cursor: pointer; }
.afv-row:hover td, .afv-row:focus-visible td { background: var(--surface-2); }
.afv-c { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 600; }
.afv-c.ok { color: var(--accent); }
.afv-c.old { color: var(--k-warn); background: var(--k-warn-soft); }
.afv-c.missing { color: var(--k-bad); background: var(--k-bad-soft); }
.afv-c.none { color: var(--text-3); }
.afv-own, .saf-warn { color: var(--k-warn); }
.afv-foot, .saf-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.afv-act, .saf-foot > span, .saf-ask { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.afv-term { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
/* a Trinity part in the file: own frame inside the box, read-only */
.afv-lock { background: var(--surface-2); }
.afv-lock-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.afv-lock-h b { font-size: .86em; }
.afv-lock-h small { font-size: .78em; color: var(--text-3); }
.afv-md { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-height: 40vh; overflow: auto; }
.afv-md > :first-child { margin-top: 0; }
.afv-md > :last-child { margin-bottom: 0; }
.afv-file .afv-own-text { min-height: 5em; }
.saf-path { display: grid; gap: 2px; margin-top: 6px; }
.saf-path .inp, .saf-x .inp + .inp, .saf-add .inp + .inp { font-family: var(--font-mono); font-size: .9em; }
.saf-x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px; }
.saf-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 6px; padding: 8px 16px 14px; }
.saf-import { margin: 8px 16px 14px; }
.ssk-moved { margin: 0 16px 14px; }
@media (max-width: 560px) { .saf-x, .saf-add { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .rl-rule { grid-template-columns: minmax(0, 1fr) auto; } .rl-why { grid-column: 1; } .rl-ex { grid-template-columns: 1fr; } .rl-target { grid-template-columns: 1fr; gap: 0; } }

/* agent prompt: the editable prompt, then the part Trinity writes (read-only, set apart a little) */
.ag-prompt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ag-prompt .ag-body { border: 0; border-radius: 0; }
.ag-uses { margin: 0; border-top: 1px solid var(--line); background: var(--surface-2); padding: 10px 14px; font: .82em/1.6 var(--font-mono); white-space: pre-wrap; color: var(--text-2); }
.ag-uses small { display: block; font-family: var(--font-body); color: var(--text-3); margin-bottom: 4px; }

.rl-sys { display: grid; grid-template-columns: auto 130px minmax(0, 1fr); gap: 10px; align-items: center; }
.rl-sys input:disabled { opacity: .5; }
.rl-text { min-height: 22em; }
@media (max-width: 760px) { .rl-sys { grid-template-columns: auto minmax(0, 1fr); } .rl-sys input { grid-column: 1 / -1; } }

/* Einstellungen › Skills: the card to all skills, the page openers, the pages */
.ssk-back { justify-self: start; }
.ssk-card { font: inherit; color: var(--e-card-text, inherit); text-align: start; width: 100%; border: var(--bw, 1px) solid var(--e-card-border, var(--accent)); border-radius: var(--e-card-radius, var(--radius)); background-color: var(--e-card-fill, var(--surface)); background-image: var(--e-card-grain, none); box-shadow: var(--e-card-shadow, none); -webkit-backdrop-filter: var(--e-card-filter, none); backdrop-filter: var(--e-card-filter, none); padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; cursor: pointer; transition: background-color var(--m-dur, .2s) var(--ease), border-color var(--m-dur, .2s) var(--ease), box-shadow var(--m-dur, .2s) var(--ease), transform var(--m-dur, .2s) var(--ease); }
.ssk-card:hover { background-color: var(--e-card-hfill, var(--surface-2)); border-color: var(--e-card-hborder, var(--accent)); box-shadow: var(--e-card-hsh, none); transform: var(--e-card-htf, none); }
.ssk-card b { font-size: 1.08em; font-weight: 600; }
.ssk-card small { color: var(--text-3); }
.ssk-arr { grid-column: 2; grid-row: 1 / span 2; font-size: 1.3em; color: var(--e-card-arrow, var(--accent-text)); }
.ssk-openers { display: flex; gap: 10px; flex-wrap: wrap; }
.ssk-opener { font: inherit; font-weight: 600; font-size: .92em; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 10px 14px; cursor: pointer; }
.ssk-opener:hover { border-color: var(--text-3); background: var(--surface-2); }
.ssk-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.15em; }
.ssk-head { display: grid; gap: 2px; }
.ssk-rules { display: grid; gap: 2px; padding: 8px 12px 12px; }
.sk-uses { margin: 0 16px 16px; border: 1px solid var(--line); border-radius: 8px; }

/* rule set picker (new skill under "Regeln", a skill's page) */
.ssk-pick { display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.ssk-pick-h { display: grid; gap: 2px; }
.ssk-chip { display: inline-flex; gap: 6px; align-items: center; }
.ssk-chip .link { padding: 0; font-size: .9em; }
.ssk-pick .ag-checks.scroll { max-height: 220px; }

/* below a skill: its whole SKILL.md, editable */
.ssk-text { margin-top: 14px; }
.ssk-text .ag-body { min-height: 22em; }


/* Memory › Module: cards, sub-modules folded in */
.md-cards { display: grid; gap: 10px; }
.md-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.md-card > .ag-item { border-top: 0; }
.md-subs { border-top: 1px solid var(--line); }
.md-subs > summary { list-style: none; cursor: pointer; padding: 9px 16px; font-size: .86em; font-weight: 600; color: var(--text-2); display: flex; gap: 8px; }
.md-subs > summary::-webkit-details-marker { display: none; }
.md-subs > summary::before { content: "▸"; color: var(--text-3); }
.md-subs[open] > summary::before { content: "▾"; }
.md-in { padding: 0 12px 12px 26px; display: grid; gap: 8px; }
.md-in .md-card { background: var(--bg); }
.md-text { min-height: 16em; }

/* Memory › Module: list filters; a module's page reads like the skill pages, editing gets the changes on the right */
.md-filter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.md-filter small { color: var(--text-3); font-size: .82em; margin-inline-end: 4px; min-width: 52px; }
.md-chip { font: inherit; font-size: .84em; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.md-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 600; }
.md-path { color: var(--text-3); font-weight: 400; }
.md-doc { display: grid; gap: 14px; max-width: 960px; }
.md-doc > .ssk-main, .md .ssk-main { gap: 12px; }
.md-title { font-size: 1.5em; font-weight: 300; }
.md-title .srcb { font-family: var(--font-body); font-size: .5em; }
.md-tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.md-tools > span { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.md-tpl { display: flex; gap: 8px; align-items: center; font-size: .9em; color: var(--text-3); }
.md-tpl .inp { width: auto; }
.foldh { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: 8px; text-align: start; }
.foldh::before { content: "▸"; color: var(--text-3); }
.foldh[aria-expanded="true"]::before { content: "▾"; }
.locks > h4:only-child { border-bottom: 0; }
.md-rl { display: grid; gap: 3px; }
.md-rl div { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.md-rl span { color: var(--text-3); }
.md-pre { white-space: pre-wrap; }
.md-srcb { margin-inline-start: 0; }
.md-inl { padding: 0; font-size: 1em; text-decoration: underline; text-underline-offset: 3px; }
.md-empty { margin: 0; padding: 0 16px 14px; }
.md-add { width: 150px; padding: 3px 10px; border-radius: 999px; font-size: .84em; }
.md-table { overflow-x: auto; }
.md-table table { border-collapse: collapse; min-width: 420px; width: 100%; font-size: .9em; }
.md-table th { text-align: start; color: var(--text-3); font-weight: 600; font-size: .86em; padding: 2px 4px; }
.md-table td { padding: 2px 4px; }
.md-subrow { display: grid; gap: 2px; }
.md-raw { max-height: 420px; padding: 0; }
.mdt-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.mdt-mv { display: inline-flex; gap: 2px; }
.mdt-mv button { font: inherit; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
.mdt-mv button:hover { background: var(--surface-2); color: var(--text); }
.mdt-kind { flex: 0 0 170px; width: 170px; }
.mdt-add { width: 150px; padding: 3px 10px; border-radius: 999px; font-size: .84em; }
.mdt-boxed { border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.mdt-gh { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.mdt-kv { padding: 0; }
.mdt-pre { border-top: 1px solid var(--line); padding-top: 14px; }
.rl-tagin { font: inherit; font-size: .9em; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--bg); color: var(--text); width: 140px; }
@media (max-width: 760px) { .mdt-kind { flex-basis: 100%; width: 100%; } }
/* Module an Skills und Agents: the picker, and "Genutzt von" on the module page */
.mpick { display: grid; gap: 8px; }
.md-used { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .94em; }
.md-kind { font-size: .7em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.md-used-hint { padding: 10px 16px 14px; margin: 0; }

/* Module-Liste: the filters behind a button, in a small window */
.md-fbtn { font: inherit; font-size: .88em; font-weight: 600; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.md-fbtn:hover, .md-fbtn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); }
.md-fbtn.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.md-fmodal { position: fixed; z-index: 40; }
.md-fbox { width: min(520px, 100%); gap: 12px; }
.md-fbox:focus { outline: none; }
.md-frow { justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Sprache hinzufügen: a short form under the language picker, the source file in a window */
.lang-add { justify-self: start; width: 100%; }
.lang-add > .btn { justify-self: start; }
.lang-form { display: grid; gap: 14px; max-width: 720px; margin: 6px 0 14px; padding: 16px 18px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.lang-h { font-weight: 600; }
.lang-form .note { margin: 0; }
.lang-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; align-items: start; }
.lang-fields input[aria-invalid="true"] { border-color: var(--accent); }
.lang-fields .seg { flex-wrap: nowrap; }
/* many choices that wrap (languages): a bit more room, and corners that still fit when it runs over two rows */
.seg.many { padding: 4px; gap: 4px; }
.seg.many button { padding: 6px 12px; border-radius: min(calc(var(--e-seg-radius, 9px) - 4px), 14px); }
.lang-actions { justify-content: flex-end; gap: 8px; margin: 2px -18px 0; padding: 12px 18px; border-top: 1px solid var(--line); }
.lang-modal { position: fixed; z-index: 40; }
.lang-box { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; gap: 12px; }
.lang-box:focus { outline: none; }
.lang-json { min-height: 220px; }
.lang-copy { gap: 12px; }

/* Neues Modul: one calm column */
.md-nform { max-width: 620px; display: grid; gap: 22px; }
.md-nf { display: grid; gap: 6px; }
.md-nl { font-size: .9em; font-weight: 600; color: var(--text); }
.md-nf .inp { height: 38px; padding: 0 12px; }
.md-nline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.md-nline .seg { height: 38px; align-items: stretch; }
.md-nline .seg button { padding: 0 14px; }
.md-nline select { flex: 1; min-width: 180px; width: auto; }
.md-von { color: var(--text-3); font-size: .9em; }
.md-nacts { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 16px; }

/* a field's hint in the template editor ("in einem Satz") */
.mdt-hint { font-size: .86em; }
/* Memory › Projekt: the description at a glance, the documents, arranging, a new document */
.pd { max-width: 1100px; }
.pd-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pd-top > :first-child { min-width: 0; flex: 1; }
.pd-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-acts .ag-add { width: 34px; height: 34px; }
.pd-hero { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 20px 22px; display: grid; gap: 14px; }
.pd-one { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 1.35em; line-height: 1.35; color: var(--text); text-wrap: balance; }
.pd-one.pd-none { color: var(--text-3); font-size: 1.1em; }
.pd-two { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 14px; font-size: .94em; }
.pd-two > span:nth-child(odd) { color: var(--text-3); font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.pd-two > span:nth-child(even) { color: var(--text); white-space: pre-wrap; }
.pd-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pd-docs { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.pd-doc { font: inherit; color: inherit; text-align: start; width: 100%; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: center; cursor: pointer; }
.pd-doc:first-child, .pd-arr:first-child { border-top: 0; }
.pd-doc:hover { background: var(--surface-2); }
.pd-doc b { font-weight: 600; }
.pd-doc small { color: var(--text-3); font-size: .84em; font-family: var(--font-mono); }
.pd-p { color: var(--text-2); font-size: .92em; grid-column: 1; overflow-wrap: anywhere; }
.pd-p.empty { color: var(--text-3); }
.pd-r { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pd-pill { font-size: .7em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line); color: var(--text-3); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pd-pill.ai { border-color: var(--accent); color: var(--accent-text); }
.pd-add { font: inherit; width: 100%; text-align: start; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text-2); padding: 11px 16px; cursor: pointer; }
.pd-add:hover { background: var(--surface-2); color: var(--text); }
.pd-arr { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pd-arr > b { flex: 1; font-weight: 600; min-width: 160px; }
.pd-arr > b small { display: block; font-weight: 400; color: var(--text-3); font-size: .82em; font-family: var(--font-mono); }
.pd-tog { display: inline-flex; gap: 6px; align-items: center; font-size: .9em; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.pd-tog input { accent-color: var(--accent); }
.pd-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-ch { font: inherit; color: inherit; text-align: start; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; display: grid; gap: 4px; cursor: pointer; align-content: start; }
.pd-ch[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pd-ch b { font-weight: 600; }
.pd-ch small { color: var(--text-3); font-size: .88em; line-height: 1.45; }
.pd-sugg { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-sugg button { font: .8em var(--font-mono); border: 1px dashed var(--line); border-radius: 999px; background: none; color: var(--text-2); padding: 2px 10px; cursor: pointer; }
.pd-sugg button[aria-pressed="true"] { border-style: solid; border-color: var(--accent); color: var(--text); }
.pd-note { margin: 0; font-size: .9em; color: var(--text-2); border-inline-start: 3px solid var(--accent); padding: 4px 12px; }
.pd-view { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px 20px; }
.pd-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pd-ctpl { width: auto; font-size: .88em; padding: 4px 8px; }
.fg-hint { font-weight: 400; margin-inline-start: 6px; }
@media (max-width: 760px) { .pd-choose, .pd-two { grid-template-columns: 1fr; } }

/* Memory › Projekt v2: title on top, the documents as cards with the start of their text */
.pd-title { display: grid; gap: 2px; min-width: 0; }
.pd-title h3 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 1.8em; line-height: 1.2; color: var(--text); }
.pd-title p { margin: 0; font-size: 1.02em; color: var(--text-2); }
.pd-cards { display: grid; gap: 12px; }
.pd-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 18px; display: grid; gap: 10px; min-width: 0; }
.pd-cadd { font: inherit; text-align: start; color: var(--text-2); border-style: dashed; cursor: pointer; }
.pd-cadd:hover { background: var(--surface-2); color: var(--text); }
.pd-chead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-cname { font: inherit; font-weight: 600; font-size: 1.05em; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; margin-inline-end: auto; text-align: start; }
.pd-cname:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-card .pd-two { grid-template-columns: 170px minmax(0, 1fr); }
.pd-exl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; }
.pd-exl > span { color: var(--text-3); font-size: .74em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.pd-ex { margin: 0; font-size: .92em; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pd-say-l { margin: 0; }
.pd-say { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-say code { background: var(--surface-2); border-radius: 6px; padding: 5px 9px; font-size: .82em; overflow-wrap: anywhere; }
.pd-cpath { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-cpath .inp { flex: 1; min-width: 200px; }
.pd-cfoot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; font-size: .9em; }
.pd-cfoot .pd-sp { flex: 1; }
.pd-cfoot code { color: var(--text-3); font-size: .8em; }
@media (max-width: 760px) { .pd-card .pd-two, .pd-exl { grid-template-columns: 1fr; gap: 2px; } }

/* Right-to-left (languages.json "dir": "rtl"). The layout above speaks of start/end, so it mirrors
   by itself; only movement along x and drawn shapes need to know the direction. */
[dir="rtl"] .go-link:hover .arr, [dir="rtl"] .go-link:focus-visible .arr { transform: translateX(-5px); }
[dir="rtl"] .sw[aria-checked="true"]::after { transform: translateX(-14px); }
[dir="rtl"] .sl-enter-from { transform: translateX(calc(var(--dir, 16px) * -1)); }
[dir="rtl"] .sl-leave-to { transform: translateX(calc(var(--dir, 16px) * .5)); }
@keyframes slidein-rtl { from { opacity: 0; transform: translateX(calc(var(--dir, 12px) * -1)); } to { opacity: 1; transform: none; } }
@keyframes panelin-rtl { from { transform: translateX(-24px); opacity: 0; } }
@keyframes sk-in-rtl { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .slide-in { animation-name: slidein-rtl; }
[dir="rtl"] .panel { animation-name: panelin-rtl; }
[dir="rtl"] .sk-f.in { animation-name: sk-in-rtl; }
/* the wordmark is a logo and stays as drawn (dir="ltr" in Wordmark.js); spaced-out letters break joined scripts like Arabic */
[dir="rtl"] *, [dir="rtl"] .wm .wm-s { letter-spacing: 0 !important; }
.wm { direction: ltr; }
/* paths, code and file names read left to right in any language */
[dir="rtl"] code, [dir="rtl"] .path, [dir="rtl"] .dir, [dir="rtl"] input[type="url"] { direction: ltr; unicode-bidi: isolate; }

/* Memory › Dokumentation: Doku-Typen as boxes, the reader, the editor with panels that fold */
.dc { max-width: 1400px; }
.dc-search { width: 100%; }
.dc-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.dc-book { font: inherit; color: inherit; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--surface); padding: 16px 18px; display: grid; gap: 8px; cursor: pointer; align-content: start; min-height: 160px; }
.dc-book:hover { background: var(--surface-2); }
.dc-book.ref { border-left-style: dashed; border-left-color: var(--line); }
.dc-book.dc-add { border: 1px dashed var(--line); color: var(--text-2); align-content: center; justify-items: center; min-height: 0; }
.dc-bt { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dc-bt b { font-family: var(--font-display); font-weight: 400; font-size: 1.25em; }
.dc-bt span { color: var(--text-3); font-size: .84em; white-space: nowrap; }
.dc-book p { margin: 0; font-size: .92em; color: var(--text-2); }
.dc-subs { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-subs span { font-size: .78em; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--text-2); }
.dc-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.dc-foot code { color: var(--text-3); font-size: .76em; margin-right: auto; overflow-wrap: anywhere; }
.dc-h { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 1.05em; }
.dc-offer { border: 1px dashed var(--line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; background: var(--surface); }
.dc-offer .row { flex-wrap: wrap; }
.dc-hits { display: grid; gap: 8px; }
.dc-hit { font: inherit; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 14px; display: grid; gap: 2px; cursor: pointer; }
.dc-hit:hover { background: var(--surface-2); }
.dc-hit small { color: var(--text-3); font-size: .82em; }
.dc-hit span { color: var(--text-2); font-size: .9em; }
.dc-nform { max-width: 680px; }
.dc-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dc-presets button { font: inherit; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; display: grid; gap: 3px; cursor: pointer; }
.dc-presets button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.dc-presets small { color: var(--text-3); font-size: .84em; }
.dc-prev { margin: 0; font: .8em/1.7 var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; white-space: pre; overflow-x: auto; color: var(--text-2); }
.dc-reader { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; min-height: 520px; }
.dc-reader > *, .dc-editor > * { min-width: 0; }
.dc-tree { border-right: 1px solid var(--line); padding: 10px 8px; display: grid; gap: 1px; align-content: start; background: var(--bg); overflow-y: auto; }
.dc-reader .dc-tree { background: var(--surface); }
.dc-node { font: inherit; font-size: .92em; text-align: left; width: 100%; background: none; border: 0; padding: 6px 10px; border-radius: 7px; color: var(--text-2); display: flex; gap: 7px; align-items: center; cursor: pointer; }
.dc-node:hover { background: var(--surface-2); }
.dc-node.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.dc-node.folder { color: var(--text); }
.dc-node.root { color: var(--text); font-weight: 600; }
.dc-ic { width: 12px; color: var(--text-3); flex: none; text-align: center; }
.dc-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-node small { margin-left: auto; color: var(--text-3); font-weight: 400; font-size: .8em; }
.dc-pad { padding: 4px 10px; margin: 0; }
.dc-mid { padding: 18px 24px; display: grid; gap: 12px; align-content: start; }
.dc-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .84em; color: var(--text-3); }
.dc-meta code { color: var(--text-3); }
.dc-lede { margin: 0; font-size: 1.05em; color: var(--text); }
.dc-body { font-size: .96em; }
.dc-ovw { display: grid; gap: 8px; }
.dc-sub { font: inherit; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 14px; display: grid; gap: 2px; cursor: pointer; }
.dc-sub:hover { background: var(--surface-2); }
.dc-sub small { color: var(--text-3); font-size: .84em; }
.dc-side { border-left: 1px solid var(--line); padding: 14px; display: grid; gap: 14px; align-content: start; font-size: .88em; }
.dc-side > div { display: grid; gap: 3px; }
.dc-side b { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.dc-side span { color: var(--text-2); }
.dc-editor { display: grid; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; min-height: 620px; }
.dc-editor .dc-tree { border-right: 0; }
.dc-grip { background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); cursor: col-resize; position: relative; }
.dc-grip::after { content: ""; position: absolute; top: 50%; left: 1px; width: 2px; height: 28px; margin-top: -14px; border-radius: 2px; background: var(--line); }
.dc-ph { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; }
.dc-ph b { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.dc-ph button, .dc-rail button { font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 7px; width: 26px; height: 26px; cursor: pointer; }
.dc-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; background: var(--bg); }
.dc-rail span { writing-mode: vertical-rl; font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.dc-rail i { font-style: normal; font-size: .72em; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 1px 6px; }
.dc-tadd { display: flex; gap: 6px; padding: 10px 6px 4px; flex-wrap: wrap; }
.dc-tadd button { font: inherit; font-size: .84em; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--text-2); padding: 4px 9px; cursor: pointer; }
.dc-addf { display: grid; gap: 6px; padding: 10px 6px; }
.dc-pane { padding: 16px 20px; display: grid; gap: 14px; align-content: start; overflow-y: auto; }
.dc-eh { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dc-eh h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3em; }
.dc-eh span { color: var(--text-3); font-size: .84em; }
.dc-link { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dc-tplr { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-size: .92em; flex-wrap: wrap; }
.dc-tplr small { color: var(--text-3); }
.dc-tpladd { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dc-tpladd select { width: auto; min-width: 200px; }
.dc-pathrow { display: flex; gap: 6px; align-items: center; }
.dc-pathrow code { color: var(--text-3); font-size: .84em; white-space: nowrap; }
.dc-frow { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 8px; align-items: center; }
.dc-gname { font-size: 1em; text-transform: none; letter-spacing: 0; max-width: 320px; }
.dc-chg { padding: 14px; display: grid; gap: 10px; align-content: start; }
@media (max-width: 1000px) { .dc-reader, .dc-editor { grid-template-columns: 1fr !important; } .dc-grip { display: none; } .dc-tree, .dc-side { border: 0; border-bottom: 1px solid var(--line); } .dc-link, .dc-frow { grid-template-columns: 1fr; } }

/* Brain › Skills: read and edit on top; the documentation picker in the rule set facts */
.sv-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sv-top .sk-head { min-width: 0; flex: 1; }
.rl-docs { display: grid; width: 100%; }

/* Brain › Konventionen: the parts of a convention, and what a module inherits */
.cv-parts { display: grid; gap: 10px; }
.cv-part { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px; }
.cv-part-h { display: flex; gap: 8px; align-items: center; }
.cv-part-h .ag-search { flex: 1; }
.md-conv-inh { display: grid; gap: 4px; margin-top: 8px; }
.md-conv-inh .ag-tag { justify-self: start; }
.cv-read { display: grid; gap: 10px; }
.cv-read-h { display: grid; gap: 4px; }
.cv-read-h .ssk-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Hooks (Brain › Hooks, Einstellungen › Hooks) */
.hk-grp { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin: 6px 0 -4px; }
.hk-sys { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hk-sys i { font-style: normal; font-size: .72em; font-weight: 600; border-radius: 4px; padding: 0 6px; background: var(--accent-soft); color: var(--accent-text); }
.hk-sys i.off { background: var(--surface-2); color: var(--text-3); text-decoration: line-through; }
.hk-say { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 12px 14px; display: grid; gap: 6px; }
.hk-say > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.hk-say b { font-family: var(--font-display); font-weight: 400; color: var(--text-3); }
@media (max-width: 560px) { .hk-say > div { grid-template-columns: 1fr; gap: 0; } }
.hk-cond, .hk-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hk-cond > .inp:not(.inl), .hk-act > .inp:not(.inl) { flex: 1; min-width: 160px; width: auto; }
.locks h4 .hk-h-add { margin-inline-start: auto; text-transform: none; letter-spacing: 0; font-size: 1.15em; }
.hk-pad { padding: 10px 16px; margin: 0; }
.hk-ev { gap: 8px; }
.hk-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.hk-fs:disabled .inp, .hk-fs:disabled .ag-body { opacity: .85; }
.hk-fs .ag-body { min-height: 0; resize: vertical; }
.hk-fs input[type="number"] { width: 90px; }
.hk-target { display: grid; gap: 4px; min-width: 0; }
.hk-target pre { margin: 0; overflow-x: auto; }
.hk-notes { min-height: 0; font-family: var(--font-body); font-size: .92em; }
.hk-act > .hk-script { flex: 1; min-width: 160px; width: auto; }
.ag-chipset button.off { opacity: .55; text-decoration: line-through; }
.locks h4 .hk-h-btns { margin-inline-start: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.hk-sub { padding: 14px 16px 6px; border-top: 1px solid var(--line); font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.hk-sub span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }

/* Hooks: big blocks fold at their heading, "Alle einklappen" on top */
.hk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hk-foldall { margin-inline-start: auto; }
.locks h4 .fold { all: unset; flex: 1 1 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; border-radius: 4px; }
.locks h4 .fold:has(+ .hk-h-btns) { flex: 0 1 auto; justify-content: flex-start; }
.locks h4 .fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.locks h4 .fold b { font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.locks h4 .fold b::before { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s var(--ease); flex: none; }
.locks.shut h4 .fold b::before { transform: rotate(-45deg); }
[dir="rtl"] .locks.shut h4 .fold b::before { transform: rotate(135deg); }
.locks.shut > :not(h4) { display: none; }
.locks.shut > h4 { border-bottom: 0; }
.still .locks h4 .fold b::before { transition: none; }
.hk-scr-inline { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 12px; margin-inline-start: 24px; min-width: 0; }
.hk-scr-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.hk-scr-inline .ag-body.hk-code { min-height: 10em; }
.hk-warn { margin: 0; font-size: .84em; color: var(--text); border-inline-start: 2px solid var(--accent); padding-inline-start: 8px; }
.hk-newscr { flex: 1; min-width: 160px; font-family: var(--font-mono); font-size: .82em; padding: 7px 10px; border: 1px dashed var(--line); border-radius: 8px; }
@media (max-width: 560px) { .hk-scr-inline { margin-inline-start: 0; } }
.hk-adds { display: flex; gap: 8px 32px; flex-wrap: wrap; align-items: baseline; }

/* ── Design: the small workbench a design paints itself on (components/DesignPreview.js) ── */
.dz-host { position: relative; overflow: hidden; border-radius: 10px 10px 0 0; }
.dz-host.big { border: 1px solid var(--line); border-radius: var(--radius); }
.dz-wb { --bw: 1px; position: absolute; top: 0; left: 0; width: 680px; height: 500px; transform-origin: 0 0; pointer-events: none; display: grid; grid-template-rows: auto 1fr; align-content: start;
  background-color: var(--bg); background-image: var(--d-bg-image); background-size: var(--d-bg-size); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; text-align: start; }
.dz-wb.big { position: relative; width: 100%; height: 560px; overflow: auto; pointer-events: auto; animation: var(--d-bg-anim); background-attachment: local; }
.dz-wb.big [data-el] { cursor: pointer; }
.dz-wb .sel { outline: 2px dashed var(--lead); outline-offset: 3px; }
.dz-spc { flex: 1; }
.dz-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--e-bar-text); background-color: var(--e-bar-fill); background-image: var(--e-bar-grain); border-bottom: var(--bw) solid var(--e-bar-border); box-shadow: var(--e-bar-shadow); backdrop-filter: var(--e-bar-filter); -webkit-backdrop-filter: var(--e-bar-filter); }
.dz-bar b { font-family: var(--font-display); font-weight: 600; }
.dz-proj { font-size: 12px; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.dz-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--e-icon-btn-radius); background: var(--e-icon-btn-fill); color: var(--e-icon-btn-text); font-size: 13px; }
.dz-body { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; }
.dz-aside { position: sticky; top: 50px; display: grid; gap: 2px; padding: 12px 8px; min-height: 420px; align-content: start; color: var(--e-aside-text); background-color: var(--e-aside-fill); background-image: var(--e-aside-grain); border-inline-end: var(--bw) solid var(--e-aside-border); box-shadow: var(--e-aside-shadow); backdrop-filter: var(--e-aside-filter); -webkit-backdrop-filter: var(--e-aside-filter); }
.dz-aside small { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 8px 8px 3px; }
.dz-aside span { padding: 5px 9px; border-radius: 7px; }
.dz-aside span.on { background: var(--e-aside-afill); color: var(--e-aside-atext); font-weight: 600; }
.dz-main { padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.dz-ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dz-h { font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.dz-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--e-seg-fill); border: 1px solid var(--e-seg-border); border-radius: var(--e-seg-radius); }
.dz-seg span { padding: 3px 10px; border-radius: calc(var(--e-seg-radius) * .85); color: var(--e-seg-text); font-size: 12px; }
.dz-seg span.on { background: var(--e-seg-afill); color: var(--e-seg-atext); font-weight: 600; }
.dz-locks, .dz-card, .dz-err, .dz-dialog { border: var(--bw) solid; backdrop-filter: var(--f); -webkit-backdrop-filter: var(--f); transition: transform var(--m-dur) var(--ease), box-shadow var(--m-dur) var(--ease), border-color var(--m-dur); }
.dz-locks { --f: var(--e-locks-filter); background-color: var(--e-locks-fill); background-image: var(--e-locks-grain); border-color: var(--e-locks-border); border-radius: var(--e-locks-radius); box-shadow: var(--e-locks-shadow); overflow: hidden; }
.dz-locks h5 { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--e-locks-border); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--e-locks-head); font-weight: 600; }
.dz-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--e-locks-border); font-size: 13px; }
.dz-row:last-child { border-bottom: 0; }
.dz-t { flex: 1; min-width: 0; display: grid; }
.dz-t small, .dz-time { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dz-sw { width: 30px; height: 18px; border-radius: 999px; border: 1px solid var(--e-sw-off); background: var(--e-sw-offfill); position: relative; flex: none; }
.dz-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--e-sw-offknob); }
.dz-sw.on { background: var(--e-sw-on); border-color: var(--e-sw-on); }
.dz-sw.on::after { transform: translateX(12px); background: var(--e-sw-onknob); }
.dz-tag { font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: var(--e-tag-radius); background: var(--e-tag-fill); border: 1px solid var(--e-tag-border); color: var(--e-tag-text); margin-inline-start: 6px; }
.dz-link { color: var(--e-link-text); font-size: 12px; white-space: nowrap; }
.dz-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dz-card { --f: var(--e-card-filter); position: relative; display: grid; gap: 2px; padding: 11px 13px; background-color: var(--e-card-fill); background-image: var(--e-card-grain); border-color: var(--e-card-border); border-radius: var(--e-card-radius); box-shadow: var(--e-card-shadow); color: var(--e-card-text); }
.dz-wb.big .dz-card:hover { background-color: var(--e-card-hfill); border-color: var(--e-card-hborder); box-shadow: var(--e-card-hsh); transform: var(--e-card-htf); }
.dz-card b { font-family: var(--font-display); font-weight: 500; }
.dz-card small { color: var(--text-3); font-size: 12px; }
.dz-card em { position: absolute; inset-inline-end: 12px; top: 10px; font-style: normal; color: var(--e-card-arrow); }
.dz-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dz-line.end { justify-content: flex-end; }
.dz-inp { flex: 1 1 140px; min-width: 0; padding: 6px 10px; font-size: 13px; border-radius: var(--e-inp-radius); background: var(--e-inp-fill); color: var(--e-inp-text); border: var(--bw) solid var(--e-inp-border); }
.dz-btn, .dz-pbtn { font-size: 12.5px; font-weight: 600; padding: 6px 13px; transition: transform var(--m-dur) var(--ease), box-shadow var(--m-dur) var(--ease), background-color var(--m-dur); }
.dz-btn { border-radius: var(--e-btn-radius); background: var(--e-btn-fill); color: var(--e-btn-text); border: var(--bw) solid var(--e-btn-border); box-shadow: var(--e-btn-shadow); }
.dz-pbtn { border-radius: var(--e-btn-primary-radius); background: var(--e-btn-primary-fill); color: var(--e-btn-primary-text); border: var(--bw) solid var(--e-btn-primary-border); box-shadow: var(--e-btn-primary-shadow); }
.dz-wb.big .dz-btn:hover { background: var(--e-btn-hfill); border-color: var(--e-btn-hborder); box-shadow: var(--e-btn-hsh); transform: var(--e-btn-htf); }
.dz-wb.big .dz-pbtn:hover { background: var(--e-btn-primary-hfill); box-shadow: var(--e-btn-primary-hsh); transform: var(--e-btn-primary-htf); }
.dz-err { --f: var(--e-err-filter); display: grid; gap: 2px; padding: 8px 12px; font-size: 12.5px; background-color: var(--e-err-fill); background-image: var(--e-err-grain); border-color: var(--e-err-border); border-inline-start: 3px solid var(--e-err-stripe); border-radius: var(--e-err-radius); box-shadow: var(--e-err-shadow); color: var(--e-err-text); }
.dz-err b { color: var(--text); }
.dz-dialog { --f: var(--e-dialog-filter); justify-self: end; width: min(290px, 100%); display: grid; gap: 6px; padding: 13px 15px; background-color: var(--e-dialog-fill); background-image: var(--e-dialog-grain); border-color: var(--e-dialog-border); border-radius: var(--e-dialog-radius); box-shadow: var(--e-dialog-shadow); color: var(--e-dialog-text); font-size: 12.5px; }
.dz-dialog b { font-family: var(--font-display); font-weight: 500; font-size: 15px; }
.dz-dialog > span { color: var(--text-2); }

/* ── Design picker (Einstellungen › Aussehen, under Modus) and Feinschliff ── */
.dzp { display: grid; gap: 12px; }
.dzp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dzp-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-align: start; }
.dzp-card[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dzp-thumb { all: unset; display: block; cursor: pointer; border-bottom: 1px solid var(--line); }
.dzp-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dzp-body { padding: 10px 12px 12px; display: grid; gap: 8px; align-content: start; }
.dzp-body .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dzp-body b { font-family: var(--font-display); font-weight: 500; font-size: 1.02em; }
.dzp-body p { margin: 0; color: var(--text-3); font-size: .82em; line-height: 1.45; }
.dzp-vers { display: flex; flex-wrap: wrap; gap: 4px; }
.dzp-vers button { font: inherit; font-size: .78em; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; }
.dzp-vers button:hover { color: var(--text); border-color: var(--text-3); }
.dzp-vers button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.dzp-colors { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.dzp-colors input[type=color] { width: 28px; height: 24px; border: 1px solid var(--line); border-radius: 6px; padding: 1px; background: var(--surface); cursor: pointer; }
.dzp-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); padding: 0; cursor: pointer; }
.dzp-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); }
.dzp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dzp-paste { display: grid; gap: 8px; }
.dzp-paste textarea { font-family: var(--font-mono); font-size: .8em; min-height: 120px; }
.dzp-tile .dz-host { border-radius: 6px; border: 1px solid var(--line); }
.dzp-quick { display: grid; gap: 4px; }
.dzp-quick > button { font: inherit; display: flex; align-items: center; gap: 9px; text-align: start; padding: 6px 9px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; }
.dzp-quick > button:hover { background: var(--surface-2); color: var(--text); }
.dzp-quick > button[aria-current="true"] { border-color: var(--accent); color: var(--text); font-weight: 600; }
.dzp-quick i { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid var(--line); }

.dzt { display: grid; gap: 14px; }
.dzt-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dzt-head h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.15em; }
.dzt-grid { display: grid; grid-template-columns: 170px minmax(0, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.dzt-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px; display: grid; gap: 1px; }
.dzt-list .gh { font-size: .68em; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 9px 8px 3px; }
.dzt-list button { font: inherit; font-size: .88em; text-align: start; border: 0; background: transparent; color: var(--text-2); padding: 5px 8px; border-radius: 7px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.dzt-list button:hover { background: var(--surface-2); color: var(--text); }
.dzt-list button[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.dzt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lead); flex: none; display: inline-block; }
.dzt-props { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; max-height: 640px; overflow: auto; }
.dzt-ph { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 3px; }
.dzt-ph .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dzt-ph b { font-family: var(--font-display); font-weight: 500; font-size: 1.05em; }
.dzt-row { padding: 8px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 7px; }
.dzt-row:last-child { border-bottom: 0; }
.dzt-rh { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .88em; }
.dzt-rh > span { color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; }
.dzt-rh select, .dzt-rh .cval { font: inherit; font-size: .9em; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 7px; padding: 3px 7px; max-width: 62%; }
.dzt-rh input[type=range] { width: 110px; accent-color: var(--accent); }
.dzt-rh output { font-family: var(--font-mono); font-size: .76em; color: var(--text-3); min-width: 2.8rem; text-align: end; }
.dzt-rng { display: inline-flex; gap: 8px; align-items: center; }
.cval { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cval[aria-expanded="true"] { border-color: var(--accent); }
.cval s { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.cval span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cval .none { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 8px 8px; }
.dzt-pick { display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--bg); }
.dzt-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
.dzt-roles button { font: inherit; font-size: .74em; text-align: start; display: flex; gap: 5px; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 6px; padding: 2px 5px 2px 2px; cursor: pointer; min-width: 0; }
.dzt-roles button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dzt-roles button s { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); flex: none; }
.dzt-roles button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dzt-steps { display: grid; gap: 3px; }
.dzt-steps > div { display: grid; grid-template-columns: 4.2rem repeat(11, minmax(0, 1fr)); gap: 2px; align-items: center; font-size: .7em; color: var(--text-3); }
.dzt-steps button { height: 18px; border: 0; border-radius: 3px; cursor: pointer; padding: 0; }
.dzt-steps button[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 1px; }
.dzt-own { display: flex; gap: 8px; align-items: center; font-size: .78em; color: var(--text-3); }
.dzt-own input { width: 28px; height: 22px; border: 1px solid var(--line); border-radius: 5px; padding: 1px; background: var(--surface); }
.dzt-pv { display: grid; gap: 8px; min-width: 0; }
.dzt-save { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dzt-save .tpl-input { flex: 1 1 200px; }
@media (max-width: 1100px) { .dzt-grid { grid-template-columns: 170px minmax(0, 1fr); } .dzt-pv { grid-column: 1 / -1; } }
@media (max-width: 640px) { .dzt-grid { grid-template-columns: minmax(0, 1fr); } }
.hk-pathedit { border-bottom: 1px solid var(--line); background: var(--surface-2); }

/* ── Live (components/LiveView.js): a session as a canvas that grows from the bottom up ──
   One quiet colour per kind, from the theme's wire colours; the legend (i) can change them per
   person (set on the root, so they win over these defaults). */
:root { --k-agent: var(--accent-text); --k-skill: var(--wire-1); --k-mcp: var(--wire-3); --k-hook: var(--wire-5); --k-conv: var(--wire-6); --k-flow: var(--text-2); --k-bad: var(--wire-4); --k-warn: var(--wire-5); }
.lv { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0;
  --k-agent-soft: color-mix(in srgb, var(--k-agent) 11%, transparent); --k-skill-soft: color-mix(in srgb, var(--k-skill) 10%, transparent);
  --k-mcp-soft: color-mix(in srgb, var(--k-mcp) 10%, transparent); --k-hook-soft: color-mix(in srgb, var(--k-hook) 10%, transparent);
  --k-conv-soft: color-mix(in srgb, var(--k-conv) 11%, transparent); --k-bad-soft: color-mix(in srgb, var(--k-bad) 10%, transparent); --k-warn-soft: color-mix(in srgb, var(--k-warn) 12%, transparent);
  --lv-dots: color-mix(in srgb, var(--text) 9%, transparent); }
.lv-empty { color: var(--text-3); padding: 14px 0; max-width: 70ch; }
.lv-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border: var(--bw, 1px) solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.lv-side { border-inline-end: 1px solid var(--line); background: var(--surface); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
.lv-side small { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 10px 9px 4px; }
.lv-sess { display: grid; gap: 1px; padding: 7px 9px; border-radius: 8px; color: var(--text-2); text-align: start; border: 0; background: none; cursor: pointer; font: inherit; font-size: .84rem; }
.lv-sess:hover { background: var(--surface-2); }
.lv-sess b { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.lv-sess > span { font-size: .74rem; color: var(--text-3); }
.lv-sess.on { background: var(--surface-2); }
.lv-main { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-y: auto; }
.lv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .86rem; color: var(--text-3); }
.lv-crumb button { border: 0; background: none; padding: 2px 4px; border-radius: 5px; color: var(--text-2); cursor: pointer; font: inherit; }
.lv-crumb button:hover { color: var(--text); text-decoration: underline; }
.lv-crumb .cur { color: var(--text); font-weight: 600; padding: 2px 4px; }
.lv-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lv-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--surface); }
.lv-seg button { border: 0; background: none; border-radius: 999px; padding: 3px 12px; font: inherit; font-size: .82rem; color: var(--text-2); cursor: pointer; }
.lv-seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.lv-pill { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .82rem; cursor: pointer; color: var(--text-2); }
.lv-pill:hover { border-color: var(--text-3); color: var(--text); }
.lv button:focus-visible, .lv [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lv-st { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.lv-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.lv-st.run { color: var(--accent-text); }
.lv-st.run::before, .lv-st.done::before { background: currentColor; }
.lv-st.open { color: var(--k-warn); }

/* canvas */
.lv-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.lv-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; cursor: grab; background-image: radial-gradient(var(--lv-dots) 1px, transparent 1.2px); background-size: 22px 22px; }
.lv-size { flex: none; }
.lv-cv { position: relative; transform-origin: 0 0; }
.lv-cv svg { position: absolute; inset: 0; overflow: visible; }
.lv-cv .dim { opacity: .2; }
.lv-tl { position: absolute; left: 14px; font-family: var(--font-mono); font-size: .66rem; color: var(--text-3); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.lv-tools { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 4px; z-index: 3; }
.lv-tools button { min-width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; color: var(--text-2); font: inherit; font-size: .9rem; line-height: 1; display: inline-grid; place-items: center; }
.lv-tools button.wide { padding: 0 10px; font-size: .78rem; }
.lv-tools button.lv-info { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; }
.lv-tools button.lv-info[aria-expanded="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.lv-tools button:hover { color: var(--text); border-color: var(--text-3); }
.lv-panel, .lv-pop { position: absolute; z-index: 4; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 24px var(--shadow); padding: 12px 14px; display: grid; gap: 7px; font-size: .84rem; }
.lv-panel { left: 10px; top: 10px; width: min(300px, calc(100% - 20px)); }
.lv-pop { right: 10px; bottom: 52px; width: min(340px, calc(100% - 20px)); max-height: calc(100% - 66px); overflow: auto; }
.lv-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lv-row b { font-family: var(--font-display); font-weight: 500; font-size: 1.04rem; }
.lv-x { border: 0; background: none; cursor: pointer; color: var(--text-3); font-size: 1rem; }
.lv-sum { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-3); font-size: .78rem; }
.lv-sum .badc, .lv-as .badc { color: var(--k-bad); }
.lv-kids { font-size: .78rem; color: var(--text-2); }
.lv-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.lv-note { font-size: .74rem; color: var(--text-3); margin: 0; }
.lv-lrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lv-lrow b { display: block; font-weight: 600; }
.lv-lrow small { display: block; color: var(--text-3); font-size: .74rem; }
.lv-lrow input[type="color"] { width: 32px; height: 26px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: var(--surface); cursor: pointer; }
.lv-shp { display: block; margin: auto; }
.lv-shp.agent { width: 28px; height: 20px; border: 1.5px solid var(--k-agent); border-radius: 6px; background: var(--k-agent-soft); }
.lv-shp.flow { width: 32px; height: 14px; border: 1.5px solid var(--k-flow); border-radius: 5px; }
.lv-shp.skill { width: 18px; height: 22px; background: var(--k-skill); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.lv-shp.mcp { width: 30px; height: 15px; background: var(--k-mcp); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
.lv-shp.hook { width: 13px; height: 13px; background: var(--k-hook); transform: rotate(45deg); border-radius: 2px; }
.lv-shp.conv { width: 18px; height: 22px; border: 1px solid var(--line); border-inline-start: 4px double var(--k-conv); background: repeating-linear-gradient(transparent 0 5px, var(--k-conv-soft) 5px 6px); }
.lv-shp.file { width: 10px; height: 13px; border: 1.4px solid var(--text-3); border-radius: 2px; }
.lv-lstates { display: flex; flex-wrap: wrap; gap: 6px; font-size: .72rem; }
.lv-lstates span { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--text-2); }
.lv-lstates .b { color: var(--k-bad); border-color: var(--k-bad); }
.lv-lstates .g { color: var(--k-warn); border-color: var(--k-warn); border-style: dashed; }
.lv-lstates .o { color: var(--accent-text); border-color: var(--accent); }

/* nodes, every kind its own shape */
.lv-nd { position: absolute; transform: translate(-50%, -50%); font-size: .8rem; line-height: 1.3; transition: opacity .25s var(--ease); }
.lv-nd small { display: block; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.lv-nd b { font-weight: 600; overflow-wrap: anywhere; }
.lv-nd.head::after { content: ""; position: absolute; right: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.lv-skill { width: 196px; padding: 1.5px; background: var(--k-skill); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.lv-skill .lv-in { background: linear-gradient(var(--k-skill-soft), var(--k-skill-soft)), var(--surface); padding: 7px 12px 8px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.lv-skill small { color: var(--k-skill); }
.lv-skill b, .lv-mcp b { font-family: var(--font-mono); font-weight: 500; font-size: .76rem; }
.lv-mcp { width: 206px; padding: 1.5px; background: var(--k-mcp); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.lv-mcp .lv-in { background: linear-gradient(var(--k-mcp-soft), var(--k-mcp-soft)), var(--surface); padding: 7px 20px 8px; clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%); }
.lv-mcp small { color: var(--k-mcp); }
.lv-hook { width: 236px; display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--k-hook); border-radius: 999px; background: var(--surface); padding: 6px 12px 6px 10px; }
.lv-dia { width: 14px; height: 14px; background: var(--k-hook); transform: rotate(45deg); border-radius: 2px; flex: none; margin-inline: 2px; }
.lv-tx { flex: 1; min-width: 0; }
.lv-hook small { color: var(--k-hook); }
.lv-res { font-size: .7rem; font-weight: 700; white-space: nowrap; color: var(--accent-text); }
.lv-hook.bad { background: var(--k-bad-soft); border-color: var(--k-bad); }
.lv-hook.bad .lv-res { color: var(--k-bad); }
.lv-hook.bad .lv-dia { background: var(--k-bad); }
.lv-hook.warn { background: var(--k-warn-soft); }
.lv-hook.warn .lv-res { color: var(--k-warn); }
.lv-conv { width: 214px; border: 1px solid var(--line); border-inline-start: 4px double var(--k-conv); border-radius: 4px; background: repeating-linear-gradient(transparent 0 13px, var(--k-conv-soft) 13px 14px), var(--surface); padding: 6px 10px 7px; }
.lv-conv small { color: var(--k-conv); }
.lv-file { display: flex; align-items: center; gap: 7px; max-width: 214px; background: var(--surface-2); border-radius: 7px; padding: 4px 10px 4px 8px; font-size: .74rem; }
.lv-doc { width: 9px; height: 11px; border: 1.3px solid var(--text-3); border-radius: 1.5px; flex: none; }
.lv-file.w .lv-doc { background: var(--text-3); }
.lv-vb { color: var(--text-3); white-space: nowrap; }
.lv-file b { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-spawn { width: 222px; display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--k-agent); border-radius: 11px; background: linear-gradient(var(--k-agent-soft), var(--k-agent-soft)), var(--surface); padding: 6px 10px 6px 7px; cursor: pointer; }
.lv-spawn:hover { box-shadow: 0 0 0 3px var(--k-agent-soft); }
.lv-mono { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--k-agent); color: var(--k-agent); background: var(--surface); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: .7rem; flex: none; }
.lv-spawn .lv-mono { width: 24px; height: 24px; font-size: .6rem; }
/* the circle shows the provider logo of the agent's model (core/ai-models.js) */
.lv-mono.ai { width: 34px; height: 34px; }
.lv-spawn .lv-mono.ai { width: 30px; height: 30px; }
.lv-mono.ai:has(.aim.dash, .aim.inh) { border-style: dashed; }
.lv-cv .aim-svg svg { position: static; }
.lv-ai-n { display: inline-flex; gap: 8px; align-items: center; min-width: 0; }
.lv-ai-l { color: var(--text-3); font-size: .78rem; }
.lv-lhead > span:first-child, .lv-n > span:has(.aim) { display: inline-flex; }
.lv-lhead:has(.aim), .lv-n:has(.aim) { align-items: center; }
.lv-nm { flex: 1; min-width: 0; }
.lv-nm small { color: var(--k-agent); }
.lv-nm b { display: block; font-family: var(--font-display); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-ar { color: var(--k-agent); flex: none; }

/* agent as a card that holds its steps; the top stays dashed (open) while it runs */
.lv-agbox { position: absolute; border: 1.5px solid var(--k-agent); border-radius: 16px; background: color-mix(in srgb, var(--surface) 60%, transparent); cursor: pointer; transition: opacity .25s var(--ease); }
.lv-agbox:hover { box-shadow: 0 0 0 3px var(--k-agent-soft); }
.lv-agbox.run { border-top-style: dashed; }
.lv-agbox.open { border-top-style: dashed; border-color: var(--k-warn); }
.lv-agbox.dir { border-color: var(--text-3); }
.lv-hdr { position: absolute; left: 0; right: 0; bottom: 0; display: grid; border-top: 1px solid var(--line); background: var(--k-agent-soft); border-radius: 0 0 14px 14px; }
.lv-agbox.dir .lv-hdr { background: var(--surface-2); }
.lv-ah { display: flex; gap: 10px; align-items: center; padding: 8px 12px 3px; }
.lv-agbox.dir .lv-mono { border-color: var(--text-2); color: var(--text); }
.lv-ah .lv-nm small { color: var(--text-3); display: block; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.lv-ah .lv-nm b { font-size: .96rem; }
.lv-as { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 0 12px 8px 50px; font-size: .72rem; color: var(--text-3); }
.lv-fin { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: .66rem; font-weight: 700; color: var(--k-agent); border: 1.5px solid var(--k-agent); border-radius: 999px; background: var(--bg); padding: 0 9px; white-space: nowrap; }

/* the plate everything stands on */
.lv-plate { position: absolute; border: 1.5px solid var(--k-flow); border-radius: 14px; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.lv-ptitle { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 2px; justify-items: center; text-align: center; }
.lv-ptitle small { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.lv-ptitle b { font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.lv-ptitle span { font-size: .72rem; color: var(--text-3); }
.lv-pst { position: absolute; top: 50%; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 7px 10px; display: grid; gap: 2px; font-size: .78rem; }
.lv-pst small { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.lv-pst b { font-family: var(--font-mono); font-weight: 500; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-pst.done { border-color: var(--k-agent); }
.lv-pst.run { border-color: var(--accent); background: var(--accent-soft); }
.lv-pst.wait, .lv-pst.open { border-style: dashed; }

/* "von oben": the canvas is mirrored, every label mirrored back */
.lv-cv.down .lv-nd { transform: translate(-50%, -50%) scaleY(-1); }
.lv-cv.down .lv-tl { transform: translateY(-50%) scaleY(-1); }
.lv-cv.down .lv-plate { transform: scaleY(-1); }
.lv-cv.down .lv-hdr { transform: scaleY(-1); border-radius: 14px 14px 0 0; border-top: 0; border-bottom: 1px solid var(--line); }
.lv-cv.down .lv-fin { transform: translateX(-50%) scaleY(-1); }

/* overview: the same shapes as one-line chips, so a session fits (nearly) one window */
.lv-cv.compact .lv-tl, .lv-cv.compact .lv-nd small, .lv-cv.compact .lv-vb, .lv-cv.compact .lv-as, .lv-cv.compact .lv-ah .lv-nm small, .lv-cv.compact .lv-pst .lv-st { display: none; }
.lv-cv.compact .lv-nd b { display: block; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-cv.compact .lv-skill, .lv-cv.compact .lv-mcp, .lv-cv.compact .lv-conv { width: 154px; }
.lv-cv.compact .lv-skill .lv-in { padding: 3px 16px 3px 9px; }
.lv-cv.compact .lv-mcp .lv-in { padding: 3px 16px; }
.lv-cv.compact .lv-hook { width: 158px; gap: 7px; padding: 2px 9px 2px 7px; }
.lv-cv.compact .lv-dia { width: 9px; height: 9px; }
.lv-cv.compact .lv-res { font-size: .62rem; }
.lv-cv.compact .lv-conv { padding: 2px 8px; }
.lv-cv.compact .lv-file { max-width: 154px; padding: 2px 8px 2px 6px; }
.lv-cv.compact .lv-doc { width: 7px; height: 9px; }
.lv-cv.compact .lv-spawn { width: 154px; gap: 7px; padding: 3px 8px 3px 5px; border-radius: 9px; }
.lv-cv.compact .lv-spawn .lv-mono { width: 18px; height: 18px; font-size: .52rem; }
.lv-cv.compact .lv-spawn .lv-st { font-size: 0; gap: 0; }
.lv-cv.compact .lv-ah { padding: 6px 9px; gap: 8px; }
.lv-cv.compact .lv-ah .lv-mono { width: 22px; height: 22px; font-size: .6rem; }
.lv-cv.compact .lv-ah .lv-nm b { font-size: .84rem; }
.lv-cv.compact .lv-fin { font-size: .58rem; top: -8px; }
.lv-cv.compact .lv-pst { padding: 4px 8px; gap: 1px; }
.lv-cv.compact .lv-ptitle b { font-size: .86rem; }

/* list */
.lv-list { display: grid; gap: 12px; }
.lv-lhead { display: flex; gap: 12px; align-items: baseline; }
.lv-lhead h4 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.lv-steps { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.lv-ev { display: grid; grid-template-columns: 52px 92px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.lv-ev:last-child { border-bottom: 0; }
.lv-ev time { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lv-k { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.lv-t { min-width: 0; display: grid; gap: 1px; }
.lv-t small { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); overflow-wrap: anywhere; }
.lv-r { font-weight: 600; color: var(--accent-text); }
.lv-ev.bad { background: var(--k-bad-soft); }
.lv-ev.bad .lv-r { color: var(--k-bad); }
.lv-ev.warn { background: var(--k-warn-soft); }
.lv-ev.warn .lv-r { color: var(--k-warn); }
.lv-ev.agent { grid-template-columns: 52px minmax(0, 1fr); }
.lv-card { display: grid; gap: 4px; text-align: start; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.lv-card:hover { border-color: var(--text-3); }
.lv-card.run { border-color: var(--accent); }
.lv-card:disabled { cursor: default; opacity: .7; }
.lv-n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lv-n b { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; }
@media (max-width: 860px) {
  .lv-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lv-side { flex-direction: row; flex-wrap: wrap; max-height: 30vh; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .lv-ev { grid-template-columns: 46px minmax(0, 1fr); }
  .lv-ev .lv-k, .lv-ev .lv-t, .lv-ev > span:last-child { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .lv-nd, .lv-agbox { transition: none; } }

/* the Live button in the bar: a quiet pill, a green dot and the number while an AI works */
.live-btn { font: inherit; font-size: .84em; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.live-btn i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.live-btn:hover, .live-btn.on { background: var(--surface-2); color: var(--text); }
.live-btn.busy { color: var(--accent-text); border-color: var(--accent); }
.live-btn.busy i { background: currentColor; }
.live-btn b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* the Live screen */
/* the screen fits the window: head on top, the session(s) fill the rest and scroll inside; only a very low window scrolls the screen */
.live-screen { padding: calc(28px * var(--space)) 32px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; height: 100%; overflow-y: auto; }
.live-screen > .lv, .live-grid { flex: 1 1 auto; min-height: 420px; }
.live-head { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.live-title { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.live-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.live-tabs button { font: inherit; font-size: .88em; border: 0; background: none; border-radius: 999px; padding: 5px 14px; color: var(--text-2); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.live-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.live-tabs b { font-size: .85em; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.live-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
.live-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.live-cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.live-cell > .lv { flex: 1 1 auto; }
.lv-body.solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.lv-search { font: inherit; font-size: .84rem; margin: 2px 2px 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
@media (max-width: 1100px) { .live-grid.n2, .live-grid.n3 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(420px, 1fr); } }
@media (max-width: 760px) { .live-screen { padding-inline: 16px; } .live-btn { padding: 0 9px; } }

/* ── MCP-Server (components/McpView.js, SettingsMcp.js, McpTool.js) ── */
.mcp-item { display: flex; align-items: center; gap: 12px; cursor: default; }
.mcp-open { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: start; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
span.mcp-open { cursor: default; }
.mcp-facts { font-size: .86em; }
.mcp-miss { color: var(--wire-4); border-color: var(--wire-4); }
.mcp-set { color: var(--accent-text); }
.sai-res { grid-column: 1 / -1; margin: 4px 0 0; padding: 6px 0 6px 12px; border-inline-start: 2px solid var(--accent); font-size: .9em; color: var(--text); }
.sai-res b { color: var(--accent-text); }
.sai-res.bad { border-color: var(--wire-4); }
.sai-res.bad b { color: var(--wire-4); }
.mcp-kind { margin-inline-start: 8px; font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.mcp-kind.read { color: var(--accent-text); border-color: var(--accent); }
.mcp-kind.write { color: var(--wire-5); border-color: var(--wire-5); }
.mcp-kind.delete { color: var(--wire-4); border-color: var(--wire-4); }
.mcp-tlist { display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-tbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 14px; }
.mcp-trow { align-items: center; }
.mcp-trow input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.mcp-try { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 14px 10px; }
.mcp-key .hk-cond { gap: 8px; }
.mcp-tool { display: grid; gap: 12px; }
.mcp-tool-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mcp-desc { white-space: pre-wrap; max-width: 80ch; }
.mcp-field .q-l { display: grid; gap: 1px; }
.mcp-field .q-l small { font-size: .74rem; color: var(--text-3); }
.mcp-confirm { margin: 0 14px 12px; padding: 10px 12px; border: 1px solid var(--wire-5); border-radius: 10px; background: color-mix(in srgb, var(--wire-5) 10%, transparent); display: grid; gap: 8px; }
.mcp-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-pre.json { font-family: var(--font-mono); font-size: .8rem; max-height: 420px; overflow: auto; }
.mcp-img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.mcp-ai { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.mcp-ai summary { cursor: pointer; color: var(--text-2); font-size: .9em; }
.mcp-ai pre { margin-top: 10px; }
.mcp-pick { display: grid; gap: 8px; }
.mcp-pk { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px 10px; display: grid; gap: 6px; }
.mcp-pk-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mcp-pk-h small { flex: 1; color: var(--text-3); font-size: .8rem; }
.mcp-pk-b { display: grid; gap: 6px; }
button.mcp-add { width: 100%; text-align: start; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
button.mcp-add:hover b { color: var(--accent-text); }
.mcp-pick .ag-check b { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.mcp-pick .ag-check b .mcp-kind { margin-inline-start: 0; }

/* Gewichtung (components/WeightPick.js, WeightBadge.js) */
.wt-badge { display: inline-flex; align-items: center; margin-inline-start: 8px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--text-2); vertical-align: middle; white-space: nowrap; }
.wt-badge.should { color: var(--wire-5); border-color: var(--wire-5); }
.wt-badge.must-tell { color: var(--wire-4); border-color: var(--wire-4); }
.wt-badge.must-block { color: var(--bg); background: var(--wire-4); border-color: var(--wire-4); }
.wt-pick .seg { flex-wrap: wrap; }
.wt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wt-row:last-of-type { border-bottom: 0; }
.wt-k { flex: 1; min-width: 0; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wt-k small { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; }

/* Einstellungen › Agents (components/SettingsAgents.js) and the role at a new agent */
.sag-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ag-role { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ag-role .seg { flex-wrap: wrap; }

/* Live: Gewichtung on the steps, the task on the plate, a moved task */
.lv-wt { display: inline-block; margin-inline-start: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .02em; color: var(--text-2); vertical-align: 1px; white-space: nowrap; }
.lv-wt.should { color: var(--wire-5); border-color: var(--wire-5); }
.lv-wt.must-tell { color: var(--wire-4); border-color: var(--wire-4); }
.lv-wt.must-block { color: var(--bg); background: var(--wire-4); border-color: var(--wire-4); }
.lv-psteps { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 3px; }
.lv-psteps i { font-style: normal; font-size: .64rem; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.lv-psteps i.cur { color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
/* the type's agent workflow on the plate: its agents in order, as far as the session got */
.lv-pwf { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); font-family: var(--font-mono); }
.lv-ptitle .lv-pwf small { font-family: var(--font-body); }
.lv-ptitle .lv-pwf b { font-family: var(--font-body); font-size: .7rem; font-weight: 700; margin-right: 2px; }
.lv-pwf i { font-style: normal; font-size: .66rem; color: var(--text-3); white-space: nowrap; }
.lv-pwf i.done { color: var(--text-2); }
.lv-pwf i.run { color: var(--accent-text); font-weight: 700; }
.lv-pwf em { font-style: normal; font-size: .66rem; color: var(--text-3); }
.lv-ptitle b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-task { width: 214px; border: 1.5px solid var(--k-flow); border-radius: 8px; background: var(--surface); padding: 6px 10px 7px; }
.lv-miss { display: grid; gap: 4px; font-size: .78rem; }
.lv-miss small { font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--k-bad); font-weight: 700; }
.lv-miss > span { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lv-saved { font-size: .72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lv-saved code { font-size: .7rem; }
.lv-cv.compact .lv-wt { font-size: .54rem; padding: 0 4px; }
.lv-cv.compact .lv-psteps i { font-size: .56rem; padding: 0 5px; }
.use-badge { display: inline-flex; align-items: center; margin-inline-start: 8px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); font-family: var(--font-body); font-size: .68rem; font-weight: 600; color: var(--text-2); vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.use-badge.never { background: none; border: 1px dashed var(--line); color: var(--text-3); font-weight: 500; }

/* Aufgaben: a new task from the board */
.tv-acts { display: flex; align-items: center; gap: 28px; padding-bottom: 6px; }
.tv-acts .link { padding-bottom: 0; }
.tnew { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); }
.tnew label { display: grid; gap: 4px; font-size: .8rem; color: var(--text-2); min-width: 0; }
.tnew-b { display: flex; align-items: center; gap: 10px; }
.tnew-h { grid-column: 1 / -1; margin: 0; }
@media (max-width: 720px) { .tnew { grid-template-columns: 1fr; } }

/* the side navigation scrolls when it does not fit (large text), without a visible scrollbar */
.home aside, .snav { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: none; }
.home aside::-webkit-scrollbar, .snav::-webkit-scrollbar { display: none; }
.home aside > * { flex-shrink: 0; }
/* the Fokus block (FokusNav.js) stays at the bottom of the navigation: only the list above it scrolls;
   on a phone Fokus is a plain entry of the folded list instead (Home.js → .nav-fokus) */
.home aside a.nav-fokus { display: none; }
@media (max-width: 760px) { .home aside a.nav-fokus { display: flex; } .home aside > .fk-nav { display: none; } }
@media (min-width: 761px) {
  .home aside { overflow: hidden; }
  .home aside > .home-nav-items { display: flex; flex-direction: column; gap: inherit; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .home aside > .home-nav-items::-webkit-scrollbar { display: none; }
  .home aside > .home-nav-items > * { flex-shrink: 0; }
  .home aside > .fk-nav { margin-top: 10px; }
}

/* Brain › Agents: the way into this agent's settings, at the bottom of the agent */
.ag-settings { font: inherit; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: start; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); color: var(--text); cursor: pointer; }
.ag-settings:hover { border-color: var(--text-3); }
.ag-settings span:first-child { display: grid; gap: 2px; }
.ag-settings small { color: var(--text-3); font-size: .82em; }
.ag-settings > span:last-child { color: var(--text-3); font-size: 1.2em; }
.sag-models { flex-wrap: wrap; }
.sag-tobrain { margin-inline-start: auto; }
.lng-ex { display: grid; gap: 4px; justify-items: start; }
.lng-ex small { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.lng-found { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; font-size: .86em; }
.lng-found small { color: var(--text-3); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92em; }

/* Memory › Assets */
.asv { display: grid; gap: 14px; }
.asv-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.asv-types { flex-wrap: wrap; }
.asv-types i { font-style: normal; color: var(--text-3); margin-inline-start: 4px; }
.asv-types button[aria-pressed="true"] i { color: inherit; opacity: .75; }
.asv-bar .ag-search { flex: 1; min-width: 200px; }
.asv-task { width: auto; }
.asv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.asv-main { display: grid; gap: 12px; min-width: 0; }
.asv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.asv-tile { font: inherit; text-align: start; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); overflow: hidden; cursor: pointer; color: var(--text); }
.asv-tile:hover { border-color: var(--text-3); }
.asv-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.asv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asv-icon { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--text-3); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); }
.asv-icon.link { font-size: 1.3rem; color: var(--accent-text); }
.asv-icon.big { font-size: 1.1rem; padding: 14px 18px; }
.asv-ty { position: absolute; inset-inline-start: 7px; top: 7px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 0 6px; border-radius: 5px; background: var(--surface); color: var(--text-2); border: 1px solid var(--line); }
.asv-tt { display: grid; gap: 2px; padding: 7px 9px 9px; min-width: 0; }
.asv-tt b { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asv-tt small { font-size: .72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asv-tt small.never, .asv-kv .never { color: var(--wire-5); }
.asv-drop { border: 1.5px dashed var(--line); border-radius: var(--radius, 12px); padding: 12px 16px; text-align: center; color: var(--text-3); font-size: .86rem; }
.asv-drop.over { border-color: var(--accent); color: var(--text); background: var(--surface-2); }
.asv-linkpv { padding: 16px; overflow-wrap: anywhere; font-size: .86rem; }
.asv-ph { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 12px 14px 0; }
.asv-ph b { font-weight: 600; overflow-wrap: anywhere; }
.asv-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 10px; padding: 10px 14px; margin: 0; font-size: .84rem; }
.asv-kv dt { color: var(--text-3); }
.asv-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; }
.asv-kv code { font-size: .78rem; }
.asv-acts { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 14px 14px; }
/* Assets: by folder, containers, + Link, the sentence per asset (design asset-container.html) */
.asv-new { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.asv-body.tree { grid-template-columns: 220px minmax(0, 1fr); }
.asv-tree { display: grid; gap: 1px; align-content: start; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); padding: 6px; position: sticky; top: 12px; max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: thin; }
.asv-tree button { font: inherit; font-size: .84rem; text-align: start; display: flex; gap: 6px; align-items: center; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); cursor: pointer; min-width: 0; }
.asv-tree button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.asv-tree button em { font-style: normal; margin-inline-start: auto; font-size: .72rem; color: var(--text-3); }
.asv-tree button:hover { background: var(--surface-2); }
.asv-tree button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
.asv-tree button.box span { font-weight: 600; color: var(--text); }
.asv-tree .asv-tree-add { color: var(--accent-text); font-weight: 600; margin-top: 4px; }
.asv-gs { font-style: normal; font-size: .62rem; font-weight: 700; border: 1px solid var(--wire-5); color: var(--wire-5); border-radius: 999px; padding: 0 5px; white-space: nowrap; }
.asv-gs.me { border-style: dashed; }
.asv-gs.project { border-color: var(--text-3); color: var(--text-3); }
.asv-head { border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; }
.asv-head-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.asv-head-r b { font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; }
.asv-head-r .sp, .asv-desc .sp { flex: 1; }
.asv-git { font-size: .7rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--text-2); white-space: nowrap; }
.asv-git.team, .asv-git.me { border-color: var(--wire-5); color: var(--wire-5); }
.asv-git.me { border-style: dashed; }
.asv-git.project { color: var(--text-3); }
.asv-warn { border: 1px solid var(--wire-5); border-radius: var(--radius, 12px); padding: 10px 14px; font-size: .86rem; display: grid; gap: 8px; margin: 0; background: var(--surface); }
.asv-warn p { margin: 0; }
.asv-form { border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.asv-form h4 { grid-column: 1 / -1; margin: 0; font-size: 1rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.asv-f { display: grid; gap: 5px; font-size: .84rem; color: var(--text-2); font-weight: 600; align-content: start; min-width: 0; }
.asv-f .seg { justify-self: start; }
.asv-f .hintline, .asv-f small { font-weight: 400; }
.asv-wide { grid-column: 1 / -1; }
.asv-check { display: flex; gap: 8px; align-items: baseline; font-weight: 400; color: var(--text); flex-wrap: wrap; }
.asv-check b { font-weight: 600; }
.asv-thumb.far, .asv-pop-pv.far, .asv-full-pv.far { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); }
.asv-faron { font-size: .74rem; color: var(--text-3); text-align: center; padding: 0 12px; overflow-wrap: anywhere; }
.asv-ext { position: absolute; inset-inline-end: 7px; top: 7px; font-size: .62rem; font-weight: 700; padding: 0 6px; border-radius: 5px; background: var(--surface); border: 1px dashed var(--accent-text); color: var(--accent-text); }
.asv-desc, .asv-move { display: grid; gap: 6px; padding: 4px 14px 10px; font-size: .84rem; }
.asv-desc label, .asv-move label { color: var(--text-3); }
.asv-desc .row, .asv-move .row { display: flex; gap: 8px; align-items: center; }
.asv-move select { flex: 1; min-width: 0; }
/* the gallery (design entwicklung/design/asset-galerie.html): the card on hover, the whole screen on a click, the big drop */
.asv-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asv-main { position: relative; }
.asv-drop { cursor: pointer; transition: padding .18s var(--ease), background-color .18s var(--ease); }
.asv-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asv-drop.big { padding: 48px 20px; border-color: var(--accent); color: var(--text); background: var(--surface-2); font-size: 1rem; }
.asv-drop.big b { display: block; font-family: var(--font-display, inherit); font-weight: 400; font-size: 1.5rem; margin-bottom: 4px; }
.asv-dropall > div { position: sticky; top: 38vh; }
.asv-dropall { position: absolute; inset: 0; z-index: 5; display: block; text-align: center; padding: 24px; border: 2px dashed var(--accent); border-radius: var(--radius, 12px); background: color-mix(in oklab, var(--bg) 84%, transparent); }
.asv-dropall b { display: block; font-family: var(--font-display, inherit); font-weight: 400; font-size: 2rem; }
.asv-dropall span { color: var(--text-2); }
.asv-pop { position: fixed; z-index: 40; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; display: grid; gap: 8px; padding: 0 14px 12px; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); box-shadow: var(--e-pop-shadow, 0 10px 30px color-mix(in oklab, var(--text) 14%, transparent)); font-size: .84rem; }
.asv-pop-pv { margin: 0 -14px; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); cursor: zoom-in; padding: 0; }
.asv-pop-pv img { width: 100%; height: 100%; object-fit: contain; display: block; }
.asv-pop-t { font-weight: 600; font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.asv-pop-d { margin: 0; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.asv-pop-d.never { color: var(--text-3); }
.asv-pop-kv { padding: 0; grid-template-columns: 72px minmax(0, 1fr); font-size: .78rem; }
.asv-pop-f { border-top: 1px solid var(--line); }
.asv-pop-f > summary { list-style: none; cursor: pointer; padding: 6px 0; display: flex; justify-content: space-between; color: var(--text-2); font-size: .8rem; }
.asv-pop-f > summary::-webkit-details-marker { display: none; }
.asv-pop-f > summary::after { content: "▸"; color: var(--text-3); transition: transform .15s var(--ease); }
.asv-pop-f[open] > summary::after { transform: rotate(90deg); }
.asv-pop-f textarea { width: 100%; }
.asv-pop-f .row, .asv-pop > .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; }
.asv-pop-f select { flex: 1; min-width: 0; }
.asv-full { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 38vw); background: var(--bg); }
.asv-full-pv { position: relative; min-height: 0; display: grid; place-items: center; background: var(--surface-2); padding: 24px 56px; }
.asv-full-pv img, .asv-full-pv video { width: 100%; height: 100%; max-height: calc(100vh - 48px); object-fit: contain; }
.asv-full-pv { grid-template-rows: minmax(0, 1fr); }
.asv-full-pv audio { width: 80%; }
.asv-full-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1.3rem; cursor: pointer; }
.asv-full-nav.l { left: 12px; } .asv-full-nav.r { right: 12px; }
.asv-full-nav:focus-visible, .asv-full .lv-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asv-full-info { overflow: auto; display: grid; align-content: start; border-inline-start: 1px solid var(--line); background: var(--surface); padding-block: 8px 16px; }
.asv-full-info .asv-ph b { font-size: 1.1rem; }
.asv-full-info .note { margin: 0 14px; }
@media (max-width: 760px) { .asv-full { grid-template-columns: minmax(0, 1fr); grid-template-rows: 50vh auto; overflow: auto; } .asv-full-pv { padding: 16px 48px; } .asv-full-info { border-inline-start: 0; border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .asv-drop, .asv-pop-f > summary::after { transition: none; } }
@media (max-width: 700px) { .asv-body.tree { grid-template-columns: minmax(0, 1fr); } .asv-tree { position: static; max-height: 240px; } .asv-form { grid-template-columns: minmax(0, 1fr); } }

/* Einstellungen › Assets */
.sas-type { display: flex; gap: 10px 14px; align-items: end; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.sas-tname { min-width: 110px; font-weight: 600; align-self: center; }
input.sas-tname { width: 140px; }
.sas-f { display: grid; gap: 4px; font-size: .78rem; color: var(--text-2); min-width: 0; }
.sas-f .inp { min-width: 120px; }
.sas-num .inp { width: 90px; min-width: 0; }
.sas-rule { border-bottom: 1px solid var(--line); }
.sas-rule.on { background: var(--surface-2); }
.sas-rhead { font: inherit; width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; text-align: start; padding: 10px 14px; border: 0; background: none; color: var(--text); cursor: pointer; }
.sas-no { color: var(--text-3); font-variant-numeric: tabular-nums; }
.sas-s { display: grid; gap: 2px; min-width: 0; }
.sas-s code { color: var(--accent-text); font-size: .78rem; overflow-wrap: anywhere; }
.sas-store { font-size: .7rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--text-2); white-space: nowrap; }
.sas-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; padding: 4px 14px 14px; }
.sas-wide { grid-column: 1 / -1; }
.fold-in > .hintline:first-child { margin: 10px 16px 6px; }
.sas-pad { display: grid; gap: 10px; padding: 12px 16px 14px; }
.sas-pad textarea { width: 100%; }
.sas-fields { display: flex; gap: 10px 14px; align-items: end; flex-wrap: wrap; }
details.sas-tf { border-top: 1px solid var(--line); }
details.sas-tf > summary { list-style: none; cursor: pointer; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.sas-tf > summary::-webkit-details-marker { display: none; }
details.sas-tf > summary::after { content: "▸"; color: var(--text-3); transition: transform .15s var(--ease); }
details.sas-tf[open] > summary::after { transform: rotate(90deg); }
details.sas-tf[open] { background: var(--surface-2); }
details.sas-tf > summary .sum { display: grid; gap: 2px; min-width: 0; }
details.sas-tf > summary .sum b { font-weight: 600; }
details.sas-tf > summary .sum small { color: var(--text-3); font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sas-with { display: grid; gap: 6px; }
.sas-chips { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.sas-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sas-store.sas-me { border-color: var(--accent); color: var(--accent-text); }
.md-img { display: block; max-width: 100%; max-height: 480px; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; }
.md-a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* Einstellungen › KI (components/SettingsAi.js) */
.sai { display: grid; gap: 16px; }
.sai-order { display: grid; gap: 0; }
.sai-order .link { padding: 0 4px; line-height: 1.2; }
.sai-order .link:disabled { opacity: .3; cursor: default; }
.sai-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sai-tpls { flex-wrap: wrap; }
.sai-pick { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.sai-pick .hintline { grid-column: 1 / -1; }
.sai-chat { gap: 10px; }
.sai-inchat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sai-inchat .inp { width: auto; min-width: 180px; }
.sai-cm { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: .88em; background: var(--surface); }
.sai-cm .link { padding: 0 2px; line-height: 1; }
.sai-u { justify-self: end; max-width: 85%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; white-space: pre-wrap; }
.sai-a { white-space: pre-wrap; line-height: 1.55; min-height: 1.5em; }
@media (max-width: 700px) { .sai-pick { grid-template-columns: minmax(0, 1fr); } }

/* ── Übersicht: Block bauen, Detail-Seite, Begrüßung (BlockBuild.js, BlockPage.js, NewsModal.js) ── */
.ov-adds { display: grid; gap: 6px; justify-items: center; }
.ov-adds .ov-add { width: 100%; }
.bb, .bp { display: grid; gap: 20px; align-content: start; min-width: 0; }
.bb-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.bb-head > .link { align-self: start; }
.bb-title { display: grid; gap: 2px; min-width: 0; }
.bb-title .h { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bb-file { font: .5em var(--font-mono); color: var(--text-3); letter-spacing: 0; }
.bb-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: end; }
.bb-act .share-msg { padding: 0; }
.bb-sure { display: inline-flex; gap: 8px; align-items: center; font-size: .9em; color: var(--text-2); }
.bb-meta { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 14px 16px; align-items: end; }
.bb-meta label { display: grid; gap: 4px; font-size: .86em; color: var(--text-2); }
.bb-tpl { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bb-card { font: inherit; color: inherit; text-align: start; cursor: pointer; display: grid; gap: 6px; padding: 16px 16px 14px; align-content: start; transition: border-color var(--m-dur, .2s) var(--ease); }
.bb-card:hover, .bb-card:focus-visible { border-color: var(--accent); outline: none; }
.bb-card.empty { border-style: dashed; background: none; }
.bb-cn { font-family: var(--font-display); font-size: 1.25em; line-height: 1.2; }
.bb-cd { color: var(--text-2); font-size: .9em; }
.bb-cf { font-size: .82em; color: var(--text-3); }
.bb-cf code { font-family: var(--font-mono); }
.bb-ct { font-size: .84em; color: var(--text-2); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.bb-ct b { font-weight: 600; color: var(--text); }
.bb-go { font-size: .86em; font-weight: 600; color: var(--accent-text); }
.bb-needs { display: grid; gap: 8px; padding: 12px 16px 4px; font-size: .92em; }
.bb-needs label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bb-needs code { font-family: var(--font-mono); font-size: .86em; color: var(--text-3); }
.bb-pad { padding: 8px 16px 14px; margin: 0; }
.bb-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bb-code { display: grid; gap: 8px; min-width: 0; }
.bb-code textarea { min-height: 460px; resize: vertical; line-height: 1.5; tab-size: 2; white-space: pre; }
.bb-hints { margin: 0; padding: 8px 12px 8px 28px; border-inline-start: 2px solid var(--accent); background: var(--surface); font-size: .86em; color: var(--text-2); display: grid; gap: 2px; }
.bb-prev { display: grid; gap: 8px; min-width: 0; position: sticky; top: 12px; }
.bb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bb-grid .ov-card { min-width: 0; }
.bb-ghost { border: 1px dashed var(--line); border-radius: var(--radius); min-height: 120px; }
.bb-pagefr .bp-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bb-err { padding: 0; }
.bb-trig .bb-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: start; }
.bb-trig h4 + .bb-row { border-top: 0; }
.bb-k { font-weight: 600; display: grid; gap: 2px; padding-top: 6px; }
.bb-k small { font-weight: 400; font-size: .82em; color: var(--text-3); }
.bb-cond { display: grid; gap: 8px; min-width: 0; }
.bb-condcode { min-height: 72px; resize: vertical; white-space: pre; }
.bb-test { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bb-test .share-msg { padding: 0; }
.bb-av { padding-top: 6px; }
.bb-av b { font-weight: 600; }
.bp-head { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.bp-head .h { margin: 0; flex: 1; }
.bp-head b { font-weight: 600; }
.bp-body { padding: 8px 4px; }
@media (max-width: 960px) { .bb-ed, .bb-cards { grid-template-columns: minmax(0, 1fr); } .bb-prev { position: static; } }
@media (max-width: 640px) { .bb-head { grid-template-columns: minmax(0, 1fr); } .bb-act { justify-content: start; } .bb-meta { grid-template-columns: minmax(0, 1fr); } .bb-trig .bb-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* the welcome: glass only here, on the overlay */
.nw-veil { position: fixed; inset: 0; z-index: 40; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: fade .25s var(--ease) both; }
.nw-box { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); display: grid; }
.nw-top { display: grid; gap: 8px; padding: 16px 18px 4px; }
.nw-seg { display: flex; gap: 4px; }
.nw-seg > * { flex: 1; height: 3px; border-radius: 2px; background: var(--line); border: 0; padding: 0; cursor: pointer; }
.nw-seg > .done { background: var(--text-3); }
.nw-seg > .on { background: var(--accent); }
.nw-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .8em; color: var(--text-3); }
.nw-meta b { color: var(--text-2); font-weight: 600; }
.nw-box .ov-frame { min-height: 160px; }
.nw-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 18px 16px; border-top: 1px solid var(--line); }
.nw-ago { flex: 1; text-align: end; }
.bb-modalfr { padding: 24px; border-radius: var(--radius); background: var(--scrim-soft); display: grid; place-items: center; }
.bb-modalfr .nw-box { width: 100%; }

/* Einstellungen › Übersicht (SettingsOverview.js) */
.kn { display: grid; gap: 28px; align-content: start; }
.kn-sec { display: grid; gap: 10px; }
.kn-sec > .p { margin: 0; max-width: 68ch; }
.kn-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3em; }
.kn-example { margin: 0; max-width: 68ch; font-size: .92em; color: var(--text-2); background: var(--surface); border-inline-start: 2px solid var(--accent); padding: 8px 12px; }
.kn-example b { color: var(--text); font-weight: 600; }
.kn-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); }
.kn-list > .kn-row:first-child { border-top: 0; }
.kn-row.open { background: var(--surface-2); }
.kn-t { display: grid; gap: 2px; min-width: 0; }
.kn-t b { font-weight: 600; }
.kn-t span { color: var(--text-2); font-size: .92em; }
.kn-t small { color: var(--text-3); font-size: .82em; }
.kn-t small.kn-bad { color: var(--accent-text); }
.kn-sw { width: 28px; height: 16px; margin-top: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); position: relative; padding: 0; cursor: pointer; }
.kn-sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); transition: inset-inline-start .2s var(--ease), background-color .2s var(--ease); }
.kn-sw.on { background: var(--accent); border-color: var(--accent); }
.kn-sw.on::after { inset-inline-start: 14px; background: var(--on-accent); }
span.kn-sw { cursor: default; }
.kn-ic { width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: .72em; color: var(--text-3); }
.kn-form { display: grid; gap: 10px; padding: 12px 16px 14px 56px; border-top: 1px solid var(--line); background: var(--bg); }
.kn-new { padding-inline-start: 16px; }
.kn-q { display: grid; grid-template-columns: 190px minmax(0, 360px); gap: 10px; align-items: center; font-size: .92em; }
.kn-q > span:first-child { color: var(--text-2); }
.kn-args { min-height: 74px; resize: vertical; white-space: pre; }
.kn-more summary { cursor: pointer; font-size: .86em; color: var(--text-2); }
.kn-more[open] { display: grid; gap: 10px; }
.kn-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kn-btns .share-msg { padding: 0; }
.kn-add { font: inherit; border: 1px dashed var(--line); border-radius: var(--radius); background: none; color: var(--text-2); padding: 12px 16px; cursor: pointer; display: grid; gap: 2px; text-align: start; }
.kn-add:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.kn-add:disabled { cursor: default; opacity: .7; }
.kn-add b { font-weight: 600; }
.kn-add small { color: var(--text-3); font-size: .86em; }
@media (max-width: 640px) { .kn-form { padding-inline-start: 16px; } .kn-q { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Block bauen: where each part appears, drawn small (the marked area is the part) */
.bb-il { position: relative; display: grid; grid-template-columns: 14% 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; height: 92px; padding: 6px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .6); background: var(--bg); overflow: hidden; }
.bb-il i { display: block; font-style: normal; }
.bb-il .il-side { grid-row: 1 / -1; border-radius: 3px; background: var(--surface-2); }
.bb-il .il-tile { border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.bb-il .il-tile.wide { grid-column: 2 / -1; }
.bb-il .on { border: 1.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--surface)); }
.bb-il .il-page { grid-column: 2 / -1; grid-row: 1 / -1; border-radius: 3px; display: grid; align-content: start; gap: 5px; padding: 0 0 6px; }
.bb-il .il-bar { height: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 5px; }
.bb-il .il-back { width: 10px; height: 2px; background: var(--accent); border-radius: 1px; }
.bb-il .il-line { height: 4px; margin: 0 7px; border-radius: 2px; background: var(--line); }
.bb-il .il-line.short { width: 55%; }
.bb-il .il-veil { position: absolute; inset: 0; background: var(--scrim-soft); }
.bb-il .il-modal { position: absolute; left: 30%; right: 18%; top: 16px; bottom: 14px; border-radius: 4px; display: grid; align-content: start; gap: 5px; padding: 6px 0; background: var(--bg); }
.bb-il .il-seg { height: 2px; margin: 0 7px 2px; border-radius: 1px; background: linear-gradient(90deg, var(--accent) 33%, var(--line) 33%); }

/* trinity-internal (screens/Platform.js): the platform as its own screen over the workbench —
   own head, tabs on the left, what is new on the right. Same paper, same ink, same green. */
.pf { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
.pf-top { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.pf-brand { display: flex; align-items: baseline; gap: 10px; }
.pf-brand b { font-family: var(--font-display); font-weight: 400; font-size: 1.15em; letter-spacing: -.01em; }
.pf-preview { font-size: .72em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.pf-search { margin-inline-start: auto; width: min(320px, 100%); }
.pf-body { display: grid; grid-template-columns: 190px minmax(0, 1fr) 230px; min-height: 0; }
.pf-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-inline-end: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
.pf-nav button { font: inherit; text-align: start; background: none; border: 0; border-radius: 8px; padding: 7px 10px; color: var(--text-2); cursor: pointer; font-size: .95em; }
.pf-nav button:hover { background: var(--surface-2); color: var(--text); }
.pf-nav button.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.pf-grp { font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 14px 10px 4px; }
.pf-main { padding: calc(28px * var(--space)) 32px 40px; overflow-y: auto; min-width: 0; }
.pf-rail { border-inline-start: 1px solid var(--line); padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.pf-rail-h { font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-bottom: 4px; }
.pf-rail-it { font: inherit; display: flex; justify-content: space-between; gap: 8px; text-align: start; background: none; border: 0; border-top: 1px solid var(--line); padding: 8px 0; color: var(--text); cursor: pointer; }
.pf-rail-it:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pf-rail-it b { font-weight: 600; font-size: .92em; }
.pf-rail-it small { color: var(--text-3); white-space: nowrap; }
.pf-rail-note { margin: 14px 0 0; font-size: .84em; color: var(--text-3); line-height: 1.5; }
.pfp { display: grid; gap: 18px; max-width: 900px; }
.pfp > .link { justify-self: start; }
.pfp-head { display: grid; gap: 6px; }
.pf-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-filter .chip { padding: 5px 12px; }
.pf-filter .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pf-card { font: inherit; text-align: start; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; display: grid; gap: 8px; align-content: start; cursor: pointer; transition: border-color .2s var(--ease); min-width: 0; }
.pf-card:hover { border-color: var(--text-3); }
.pf-card.mine { border-inline-start: 3px solid var(--accent); }
.pf-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pf-card-top b { font-family: var(--font-display); font-weight: 400; font-size: 1.12em; }
.pf-flag { font-size: .76em; color: var(--accent-text); white-space: nowrap; }
.pf-card-text { color: var(--text-2); font-size: .92em; line-height: 1.5; }
.pf-card-foot { display: grid; gap: 2px; font-size: .8em; color: var(--text-3); }
.pfp-cover { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pfp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88em; color: var(--text-3); }
.pfp-meta a { color: var(--accent-text); text-decoration: none; overflow-wrap: anywhere; }
.pfp-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pfp-meta .mono, .pfp-note code { font-family: var(--font-mono, monospace); font-size: .92em; }
.pfp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.pfp-sec { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pfp-sec.wide { grid-column: 1 / -1; }
.pfp-sec h4 { margin: 0; font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pfp-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: .94em; }
.pfp-dl dt { color: var(--text-3); }
.pfp-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .86em; color: var(--text-2); }
.pfp-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pfp-kinds > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; align-content: start; background: var(--surface); }
.pfp-kinds b { font-weight: 600; font-size: .92em; display: flex; justify-content: space-between; }
.pfp-kinds b small { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.pfp-kinds ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: .88em; color: var(--text-2); }
/* trinity-internal › a project as a profile (design entwicklung/design/platform-projects-v2.html): cover, logo, numbers,
   tabs Übersicht · Ressourcen · Team; resources as suite and single cards (the same cards Teilen shows). Cover colours
   come from the theme's wire and accent tokens, so every theme and mode fits. */
.pfx { display: grid; max-width: 1100px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.pfx-k1 { --ca: var(--logo-base); --cb: var(--accent); } .pfx-k2 { --ca: var(--wire-1); --cb: color-mix(in oklab, var(--wire-1) 55%, var(--surface)); }
.pfx-k3 { --ca: var(--wire-3); --cb: color-mix(in oklab, var(--wire-3) 55%, var(--surface)); } .pfx-k4 { --ca: var(--wire-5); --cb: color-mix(in oklab, var(--wire-5) 55%, var(--surface)); }
.pfx-k5 { --ca: var(--wire-2); --cb: color-mix(in oklab, var(--wire-2) 55%, var(--surface)); } .pfx-k6 { --ca: var(--wire-4); --cb: color-mix(in oklab, var(--wire-4) 55%, var(--surface)); }
.pfx-cover { position: relative; background: var(--ca); overflow: hidden; }
.pfx-cover::before, .pfx-cover::after { content: ""; position: absolute; border-radius: 50%; background: var(--cb); opacity: .55; }
.pfx-cover::before { width: 70%; aspect-ratio: 1; right: -18%; top: -40%; }
.pfx-cover::after { width: 46%; aspect-ratio: 1; left: -10%; bottom: -36%; opacity: .32; }
.pfx-hero { height: 190px; }
.pfx-back { position: absolute; left: 16px; top: 14px; z-index: 2; font: inherit; font-size: .86em; color: var(--text); background: var(--bar); border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* only the logo reaches into the cover; name, repo and buttons stand below it on the plain surface */
.pfx-head { padding: 12px 28px 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; position: relative; }
.pfx-logo { margin-top: -56px; width: 88px; height: 88px; border-radius: 20px; display: grid; place-items: center; font-family: var(--font-display); font-size: 2em; color: var(--on-accent); background: var(--ca); border: 4px solid var(--surface); }
.pfx-t { display: grid; gap: 3px; min-width: 0; }
.pfx-t h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.8em; line-height: 1.1; overflow-wrap: anywhere; }
.pfx-meta { display: flex; gap: 4px 14px; flex-wrap: wrap; color: var(--text-3); font-size: .84em; }
.pfx-meta a { color: var(--accent-text); text-decoration: none; overflow-wrap: anywhere; }
.pfx-meta .mono { font-family: var(--font-mono); }
.pfx-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pfx-sentence { padding: 14px 28px 0; font-size: 1.08em; margin: 0; max-width: 760px; }
.pfx-stats { padding: 16px 28px 0; display: flex; gap: 26px; flex-wrap: wrap; }
.pfx-stats div { display: grid; }
.pfx-stats b { font-family: var(--font-display); font-weight: 400; font-size: 1.45em; font-variant-numeric: tabular-nums; }
.pfx-stats small { color: var(--text-3); font-size: .78em; }
.pfx-tabs { margin: 20px 28px 0; display: flex; gap: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pfx-tabs button { font: inherit; font-size: .92em; background: none; border: 0; padding: 10px 0; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.pfx-tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
.pfx-tabs small { color: var(--text-3); font-weight: 400; margin-inline-start: 4px; }
.pfx-body { padding: 20px 28px 32px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 26px; }
.pfx-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
.pfx-sec { display: grid; gap: 10px; }
.pfx-sec h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.12em; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pfx-sec p { margin: 0; color: var(--text-2); }
.pfx-only { font-family: var(--font-body); font-size: .8em; color: var(--text-3); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pfx-res-h { font-weight: 600; font-size: .95em; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pfx-res-h small { font-weight: 400; color: var(--text-3); font-size: .86em; }
.pfx-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pfx-item { font: inherit; color: inherit; text-align: start; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; display: grid; gap: 4px; align-content: start; cursor: pointer; }
.pfx-item:hover { border-color: var(--text-3); }
.pfx-item.local { border-style: dashed; cursor: default; }
.pfx-item .k { font-family: var(--font-mono); font-size: .66em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; }
.pfx-item .took { color: var(--accent-text); font-weight: 600; }
.pfx-item b { font-weight: 600; }
.pfx-item small { color: var(--text-3); }
.pfx-side { display: grid; gap: 14px; align-content: start; }
.pfx-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.pfx-box h4 { margin: 0; font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pfx-people { display: grid; gap: 6px; }
.pfx-people span { display: flex; gap: 8px; align-items: center; font-size: .92em; }
.pfx-people i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .66em; font-weight: 700; color: var(--on-accent); background: var(--ca); flex: none; }
@media (max-width: 860px) { .pfx-body { grid-template-columns: 1fr; } .pfx-items { grid-template-columns: 1fr; } .pfx-head { grid-template-columns: auto minmax(0, 1fr); } .pfx-acts { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pfx-head, .pfx-sentence, .pfx-stats, .pfx-body { padding-inline: 16px; } .pfx-tabs { margin-inline: 16px; } .pfx-logo { width: 64px; height: 64px; font-size: 1.5em; margin-top: -40px; } }

/* trinity-internal › Entdecken (K3): the topic tree beside the cards, the order top right, the versions of an item */
.pfd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pfd { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pfd-list { display: grid; gap: 12px; min-width: 0; }
.pfd-tree { display: grid; gap: 1px; position: sticky; top: 0; }
.pfd-tree button { font: inherit; font-size: .9em; text-align: start; background: none; border: 0; border-radius: 8px; padding: 5px 10px; color: var(--text-2); cursor: pointer; overflow-wrap: anywhere; }
.pfd-tree button:hover { background: var(--surface-2); color: var(--text); }
.pfd-tree button.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.pfd-vers { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pfd-vers li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: .92em; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pfd-vers li:last-child { border-bottom: 0; }
.pfd-vers b { font-variant-numeric: tabular-nums; }
.pfd-vers span { color: var(--text-2); }
.pfd-vers a { color: var(--accent-text); text-decoration: none; font-size: .86em; overflow-wrap: anywhere; }
.pfd-vers a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .pfd { grid-template-columns: 1fr; }
  .pfd-tree { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .pfd-tree button { padding-inline-start: 10px !important; border: 1px solid var(--line); border-radius: 999px; }
  .pfd-vers li { grid-template-columns: 34px minmax(0, 1fr); }
  .pfd-vers a { grid-column: 2; }
}
.cn { display: grid; gap: 16px; max-width: 640px; }
.cn-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; display: grid; gap: 10px; }
.cn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cn-name { display: grid; gap: 2px; }
.cn-name small { color: var(--text-3); font-size: .86em; }
.cn-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.cn-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.cn-field { display: grid; gap: 4px; flex: 1 1 260px; min-width: 0; font-size: .9em; color: var(--text-2); }
.cn-ok { color: var(--text-2); }
.cn-err { color: var(--k-bad); }
.cn-me, .cn-join { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; }
.cn-role { margin-inline-start: 8px; font-size: .78em; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.cn-invite { display: grid; gap: 8px; justify-items: start; }
.cn-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cn-code code { font-family: var(--font-mono); font-size: 1.05em; letter-spacing: .06em; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); user-select: all; }
.cn-code small { flex-basis: 100%; }
.cn-setup { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 12px; }
.cn-setup-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cn-setup-form .cn-wide { grid-column: 1 / -1; }
.cn-setup-form textarea { resize: vertical; min-height: 4.5em; }
.cn-save { display: inline-flex; align-items: center; gap: 10px; }
.cn-sub { display: grid; gap: 6px; }
.cn-people { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .92em; color: var(--text-2); }
.cn-tech { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: .9em; }
.cn-tech dt { color: var(--text-3); }
.cn-tech dd { margin: 0; color: var(--text-2); }
/* Team-Topf (SettingsTeamPool.js) */
.tp-pool { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.tp-meter { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tp-meter i { display: block; height: 100%; background: var(--text-2); }
.tp-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tp-edit .cn-wide { grid-column: 1 / -1; }
.tp-members { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9em; color: var(--text-2); }
.tp-price { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 640px) { .tp-edit, .tp-price { grid-template-columns: 1fr; } }
/* trinity-internal › Personen › Team (PlatformPeople.js) */
.pp { display: grid; gap: 16px; max-width: 760px; }
.pp-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.pp-head > div { display: grid; gap: 4px; }
.pp-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; display: grid; gap: 4px; }
.pp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.pp-box > b + .pp-row, .pp-box > b + p + .pp-row { border-top: 0; }
.pp-acts { display: inline-flex; gap: 8px; }
/* Angenommen: what is here of a hand-over (PlatformPeople.js) */
.pp-steps { flex-basis: 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: .9em; color: var(--text-2); }
.pp-steps li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: 4px; }
.pp-steps .y { color: var(--text); }
.pp-steps .n { color: var(--text-3); }
.pp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 8px; background: var(--accent); vertical-align: 1px; }
.pp-dot.busy { background: var(--text-2); }
.pp-give { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 720px) { .cn-setup-form { grid-template-columns: minmax(0, 1fr); } }
.pf-state { font-size: .86em; color: var(--text-3); }
.pf-state.bad { color: var(--k-bad); }
@media (max-width: 1100px) {
  .pf-body { grid-template-columns: 180px minmax(0, 1fr); }
  .pf-rail { grid-column: 2; border-inline-start: 0; border-top: 1px solid var(--line); }
  .pf-body { overflow-y: auto; }
  .pf-main { overflow: visible; }
}
@media (max-width: 720px) {
  .pf-body { grid-template-columns: minmax(0, 1fr); }
  .pf-nav { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .pf-nav button { white-space: nowrap; }
  .pf-grp { display: none; }
  .pf-rail { grid-column: 1; }
  .pf-main { padding: 18px 16px 24px; }
  .pf-top { padding: 10px 16px; }
  .pf-search { width: 100%; }
  .pfp-grid { grid-template-columns: minmax(0, 1fr); }
}
/* KI chat (components/AiChat.js): page Home › KI and the overlay (Strg+K) */
.home-main.aic-host, .wide .home-main.aic-host { display: block; max-width: none; padding: 0; overflow: hidden; height: 100%; }
.aic { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; min-height: 0; }
.aic.aic-ov { grid-template-columns: minmax(0, 1fr); }
.aic-side { border-inline-end: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-height: 0; }
.aic-side > * { flex-shrink: 0; }
/* the chats scroll on their own; the Werkzeuge below them stay in place */
.aic-side > .aic-hist { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.aic-side > .aic-hist::-webkit-scrollbar { display: none; }
.aic-side > .btn { margin-bottom: 8px; justify-content: flex-start; }
.aic-g { font-size: .72em; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); padding: 12px 8px 4px; }
.aic-h { display: flex; align-items: center; border-radius: 8px; }
.aic-h:hover, .aic-h.on { background: var(--surface-2); }
.aic-hb { flex: 1; min-width: 0; text-align: start; border: 0; background: none; font: inherit; font-size: .9em; color: var(--text-2); padding: 6px 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-h.on .aic-hb { color: var(--text); font-weight: 600; }
.aic-x { border: 0; background: none; font: inherit; font-size: .78em; color: var(--text-3); padding: 4px 8px; cursor: pointer; opacity: 0; }
.aic-h:hover .aic-x, .aic-h.on .aic-x, .aic-x:focus-visible, .aic-x.sure { opacity: 1; }
.aic-x.sure { color: var(--wire-4); }
.aic-pad { padding: 8px; }
.aic-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.aic-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.aic-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aic-sp { flex: 1; }
.aic-scroll { grid-row: 2; overflow-y: auto; min-height: 0; padding: 24px 16px 8px; }
.aic-col { width: min(720px, 100%); margin: 0 auto; display: grid; gap: 18px; align-content: start; min-width: 0; }
.aic-hero { display: grid; justify-items: center; gap: 10px; padding: 8vh 0 2vh; text-align: center; }
.aic-mark { width: 22px; height: 22px; display: block; flex: none; margin-top: 2px; }
.aic-mark svg { width: 100%; height: 100%; display: block; }
.aic-mark .left { fill: var(--accent); }
.aic-mark .right { fill: var(--logo-mid); }
.aic-mark .base { fill: var(--logo-base); }
.aic-mark.big { width: 56px; height: 56px; }
.aic-state { font-size: .82em; color: var(--text-3); }
.aic-u { justify-self: end; max-width: 85%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.aic-a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.aic-body { display: grid; gap: 6px; min-width: 0; line-height: 1.6; overflow-wrap: anywhere; }
.aic-md .md-p { margin: 0 0 .6em; }
.aic-md .md-p:last-child { margin-bottom: 0; }
.aic-md .md-code { overflow-x: auto; }
.aic-meta { font-size: .78em; color: var(--text-3); }
.aic-err { font-size: .86em; color: var(--wire-4); }
/* Limit erreicht, weiter mit dem Team-Topf (AiChatLimit.js) */
.aic-limit { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.aic-limit p { margin: 0; }
.aic-limit small { color: var(--text-2); }
.aic-limit-pick { display: grid; gap: 4px; font-size: .86em; color: var(--text-2); }
.aic-limit-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.aic-foot { grid-row: 3; padding: 8px 16px 14px; }
.aic-comp { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 12px 12px 8px 16px; display: grid; gap: 6px; }
.aic-comp:focus-within { border-color: var(--text-3); }
.aic-ta { border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; line-height: 1.5; min-height: 26px; max-height: 240px; padding: 0; }
.aic-row { display: flex; align-items: center; gap: 8px; }
/* a long model name ("Copilot · Claude Sonnet 5.5") is cut with … instead of pushing the send button out */
.aic-pick { position: relative; min-width: 0; flex: 0 1 auto; display: flex; }
.aic-pick > .aic-conn { min-width: 0; max-width: 100%; }
.aic-conn { border: 0; background: none; font: inherit; font-size: .84em; font-weight: 600; color: var(--text-2); padding: 6px 8px; border-radius: 8px; cursor: pointer; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-conn:hover { background: var(--surface-2); color: var(--text); }
.aic-menu { position: absolute; inset-inline-end: 0; bottom: calc(100% + 6px); width: 280px; max-height: 360px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: grid; gap: 1px; z-index: 5; box-shadow: 0 10px 28px var(--shadow); }
.aic-mg { display: flex; justify-content: space-between; gap: 8px; font-size: .7em; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); padding: 8px 8px 3px; }
.aic-mg small { text-transform: none; letter-spacing: 0; }
.aic-opt { display: flex; justify-content: space-between; gap: 8px; text-align: start; border: 0; background: none; border-radius: 7px; padding: 6px 8px 6px 14px; font: inherit; font-size: .88em; color: var(--text); cursor: pointer; }
.aic-opt:hover, .aic-opt.on { background: var(--surface-2); }
.aic-opt.on { font-weight: 600; }
.aic-opt small { color: var(--text-3); font-weight: 400; }
.aic-more { border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; color: var(--text-2); padding-left: 8px; margin-top: 4px; }
.aic-opt:disabled { opacity: .5; cursor: default; }
.aic-opt:disabled:hover { background: none; }
.aic-add { color: var(--text-2); }
/* „Erlauben / Ablehnen“: what she wants to change, with the person's choice */
.aic-ask { display: grid; gap: 6px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.aic-ask.open { border-color: var(--accent); }
.aic-askh { color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; font-size: .7em; }
.aic-askp { display: flex; flex-wrap: wrap; gap: 6px; }
.aic-askp code { font-size: .82em; }
.aic-aski { margin: 0; max-height: 180px; overflow: auto; font-size: .8em; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.aic-aski small { display: block; color: var(--text-3); margin-bottom: 2px; }
.aic-askd { color: var(--text-2); }
.aic-askd.no { color: var(--text-3); }
.aic-askd.ok { color: var(--text); font-weight: 600; }
.aic-askd.ok::before { content: "✓ "; color: var(--wire-3); }
.aic-askd.busy::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; background: var(--accent); animation: aic-ask-pulse 1.2s var(--ease) infinite; }
@keyframes aic-ask-pulse { 50% { opacity: .25; } }
.aic-diff span { display: block; }
.aic-diff .add { color: var(--wire-3); background: color-mix(in oklab, var(--wire-3) 10%, transparent); }
.aic-diff .del { color: var(--wire-1); text-decoration: line-through; background: color-mix(in oklab, var(--wire-1) 10%, transparent); }
.aic-diff .at { color: var(--text-3); }
.aic-adder { display: grid; gap: 1px; margin: 2px 0 4px 8px; padding-inline-start: 6px; border-inline-start: 1px solid var(--line); }
.aic-adder .inp { margin: 2px 0 4px; font-size: .85em; }
.aic-adder .hintline { padding: 4px 8px; margin: 0; }
.aic-send { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--text); background: var(--text); color: var(--bg); font: 600 15px/1 var(--font-body, inherit); cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; }
.aic-send:disabled { opacity: .3; cursor: default; }
.aic-note { text-align: center; margin: 6px 0 0; }
.aic-panel { position: absolute; z-index: 10; top: 6vh; bottom: 6vh; left: 50%; transform: translateX(-50%); width: min(780px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid;
  background-color: var(--e-bar-fill, var(--surface)); background-image: var(--e-bar-grain, none); -webkit-backdrop-filter: var(--e-bar-filter, none); backdrop-filter: var(--e-bar-filter, none); box-shadow: 0 18px 48px var(--shadow); }
@media (max-width: 760px) {
  .aic { grid-template-columns: minmax(0, 1fr); }
  .aic-side { display: none; }
  .aic-panel { top: 0; bottom: 0; width: 100%; border-radius: 0; }
}
.md-table { border-collapse: collapse; font-size: .92em; margin: 4px 0 8px; display: block; overflow-x: auto; max-width: 100%; }
.md-table th, .md-table td { border-bottom: 1px solid var(--line); padding: 6px 12px 6px 0; text-align: start; vertical-align: top; }
.md-table th { font-weight: 600; color: var(--text-2); }

/* the area before a block's title: "Aufgaben – Offen nach Status" */
.ov-kind { color: var(--text); }

/* Block bauen: the three parts sit inside their block, joined by a line; the chat at the bottom (BlockChat.js) */
.bb-name { grid-column: 1 / -1; }
.bb-name .inp { font-size: 1.1em; }
.bb-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bb-tpl { gap: 12px; }
.bb-parts { margin-top: 6px; justify-self: start; }
.bb-block { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; }
.bb-block-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bb-block-h b { font-family: var(--font-display); font-weight: 400; font-size: 1.2em; }
.bb-block-h span { color: var(--text-3); font-size: .9em; }
.bb-block .bb-cards { position: relative; }
.bb-block .bb-cards::before { content: ""; position: absolute; left: 8%; right: 8%; top: 52px; border-top: 1.5px dashed var(--accent); z-index: 0; }
.bb-block .bb-card { position: relative; z-index: 1; }
.bc { display: grid; }
.bc-log { display: grid; gap: 10px; padding: 12px 16px; max-height: 360px; overflow: auto; }
.bc-msg { display: grid; gap: 6px; font-size: .94em; line-height: 1.5; }
.bc-msg.user { justify-self: end; max-width: 85%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; white-space: pre-wrap; }
.bc-text { white-space: pre-wrap; }
.bc-files { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bc-file { font-size: .86em; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.bc-file code { font-family: var(--font-mono); color: var(--text); }
.bc-empty { padding: 12px 16px 0; margin: 0; }
.bc-unsaved { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 16px; padding: 8px 0 8px 12px; border-inline-start: 2px solid var(--accent); font-size: .9em; color: var(--text-2); }
.bc-none { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px 14px; font-size: .92em; color: var(--text-2); }
.bc-in { display: grid; gap: 8px; padding: 12px 16px 14px; }
.bc-in textarea { resize: vertical; min-height: 56px; }
.bc-act { display: flex; gap: 10px; align-items: center; justify-content: end; flex-wrap: wrap; }
.bc-act select { width: auto; }
/* Block bauen v2 (design block-bauen.html): the parts as live tiles, − +, the chat below with the parts to tick */
.bb-meta { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.bb-meta .bb-name { grid-column: auto; }
.bb-tpl { grid-column: 1 / -1; display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; font-size: .9em; }
.bb-wide { grid-column: 1 / -1; padding: 4px 0 0; }
.bb-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; align-items: start; }
.bb-tile { display: grid; min-width: 0; transition: border-color var(--m-dur, .2s) var(--ease); }
.bb-tile.on { border-color: var(--accent); }
.bb-th { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bb-tn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; display: grid; gap: 2px; min-width: 0; }
.bb-tn b { font-family: var(--font-display); font-weight: 500; font-size: 1.02em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bb-tn small { font-size: .78em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-tn small code { font-family: var(--font-mono); }
.bb-tn:hover b, .bb-tn:focus-visible b { color: var(--accent-text); }
.bb-tn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.bb-zoom { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.bb-zoom button { font: 600 .9em var(--font-mono); width: 28px; height: 26px; border: 0; background: none; color: var(--text); cursor: pointer; }
.bb-zoom button + button { border-inline-start: 1px solid var(--line); }
.bb-zoom button:hover:not(:disabled), .bb-zoom button:focus-visible { background: var(--surface-2); outline: none; }
.bb-zoom button:disabled { color: var(--text-3); cursor: default; }
.bb-tv { padding: 12px; background: var(--bg); min-height: 180px; max-height: 560px; overflow: auto; display: grid; align-content: start; gap: 8px; }
.bb-tv .bb-modalfr { padding: 12px; }
.bb-tempty { display: grid; place-items: center; min-height: 156px; text-align: center; font-size: .86em; color: var(--text-3); border: 1px dashed var(--line); border-radius: calc(var(--radius) * .8); padding: 12px; }
.bb-tf { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: .82em; color: var(--text-3); align-items: center; }
.bb-writing { display: inline-flex; gap: 6px; align-items: center; font: 600 .74em var(--font-body); color: var(--accent-text); }
.bb-writing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bb-pulse 1.2s ease-in-out infinite; }
@keyframes bb-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .bb-writing i { animation: none; } }
.bb-big { position: static; }
.bb-trig > summary { list-style: none; cursor: pointer; }
.bb-trig > summary::-webkit-details-marker { display: none; }
.bb-trig > summary h4 { margin: 0; justify-content: flex-start; gap: 8px; }
.bb-trig > summary h4 span { margin-inline-start: auto; }
.bb-trig > summary h4::before { content: '▸ '; color: var(--text-3); }
.bb-trig[open] > summary h4::before { content: '▾ '; }
.bc-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .86em; color: var(--text-2); }
.bc-pick small { color: var(--text-3); }
.bc-chip { display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: 1em; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text-2); cursor: pointer; }
.bc-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.bc-chip[aria-pressed="true"]::before { content: '✓'; color: var(--accent-text); font-weight: 700; }
.bc-chip[aria-pressed="false"]::before { content: ''; width: 10px; height: 10px; border: 1px solid var(--text-3); border-radius: 3px; }
.bc-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bc-chip:disabled { opacity: .6; cursor: default; }
.bc-chip.lock { cursor: default; }
.bc-file b { font-weight: 600; color: var(--accent-text); }
@media (max-width: 960px) { .bb-tiles { grid-template-columns: minmax(0, 1fr); } .bb-tile { grid-column: 1 / -1 !important; } .bb-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bb-meta .bb-name { grid-column: 1 / -1; } }
@media (max-width: 640px) { .bb-meta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .bb-block .bb-cards::before { display: none; } }


/* Block bauen: the preview's head with Hell / Dunkel */
.bb-prevh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Trinity's face behind the chat (core/chatface.js) and the working roll (components/WorkRoll.js) */
.aic-main { position: relative; }
/* the face lies over the messages (clicks pass through); input and top bar stay above it */
.aic-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.aic-scroll { position: relative; z-index: 1; }
.aic-top, .aic-foot { position: relative; z-index: 3; }
.aic-scroll { display: flex; flex-direction: column; }
.aic-scroll > .aic-col { margin: auto auto 0; }
.aic-a.plain { grid-template-columns: minmax(0, 1fr); }
.aic-greet { text-align: center; font-size: clamp(22px, 2.6vw, 34px); font-weight: 300; margin: 0 0 14px; color: var(--text); }
.work-roll { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: .9em; min-height: 28px; }
.work-roll svg { width: 22px; height: 22px; flex: none; overflow: visible; }
.work-roll .l { fill: var(--accent); }
.work-roll .r { fill: var(--logo-mid); }
.work-roll .b { fill: var(--logo-base); }
.work-wrap { display: inline-grid; overflow: hidden; }
/* a small wave runs through the word: each letter lights up and lifts, one after the other; a new word slides in from below */
.work-word { color: var(--text-3); white-space: nowrap; }
.work-ch { display: inline-block; animation: work-wave 1.8s var(--ease) infinite; animation-delay: calc(var(--i) * 55ms); }
@keyframes work-wave { 0%, 34%, 100% { transform: none; color: var(--text-3); } 14% { transform: translateY(-2px); color: var(--text); } }
.work-w-enter-active, .work-w-leave-active { transition: transform .32s var(--ease), opacity .32s var(--ease); }
.work-w-enter-from { transform: translateY(70%); opacity: 0; }
.work-w-leave-to { transform: translateY(-70%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .work-ch { animation: none; } .work-w-enter-active, .work-w-leave-active { transition: none; } }
.work-secs { font-family: var(--font-mono, monospace); font-size: .8em; letter-spacing: .06em; }

/* the face's preview and values in Einstellungen › Trinity (components/SettingsFace.js, FaceView.js) */
.face-slot { display: block; position: relative; }
.face-cv { display: block; width: 100%; height: 100%; }
.face-mark { display: grid; place-items: center; width: 100%; height: 100%; }
.face-mark svg { width: 34%; height: 34%; }
.face-mark .left { fill: var(--accent); }
.face-mark .right { fill: var(--logo-mid); }
.face-mark .base { fill: var(--logo-base); }
.sfc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.sfc-prev { position: sticky; top: 0; display: grid; gap: 12px; }
.sfc-stage { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); aspect-ratio: 1 / 1; overflow: hidden; }
.sfc-stage .face-slot { width: 100%; height: 100%; }
.sfc-try { display: grid; gap: 10px; }
.sfc-try .seg { flex-wrap: wrap; }
.sfc-set { display: grid; gap: 16px; min-width: 0; }
.sfc-line { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.sfc-line .hintline { grid-column: 1 / -1; }
.sfc-slider { grid-template-columns: 110px minmax(0, 1fr) 3ch; align-items: center; }
.sfc-slider .hintline { grid-column: 1 / -1; }
.sfc-slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.sfc-slider output { font-variant-numeric: tabular-nums; color: var(--text-2); text-align: end; }
.sfc-pair { grid-template-columns: 140px minmax(0, 1fr); align-items: center; }
.sfc-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sfc-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.sfc-dot[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.sfc-dot.theme { background: var(--text); }
.sfc-pick { display: inline-flex; align-items: center; gap: 6px; font-size: .86em; color: var(--text-2); cursor: pointer; }
.sfc-pick input { width: 28px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
@media (max-width: 900px) { .sfc { grid-template-columns: minmax(0, 1fr); } .sfc-prev { position: static; } }

/* speaking in the chat (core/voice.js): microphone, voice mode */
.aic-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); display: grid; place-items: center; padding: 0; cursor: pointer; flex: none; }
.aic-icon svg { width: 16px; height: 16px; }
.aic-icon:hover:not(:disabled) { color: var(--text); border-color: var(--text-3); }
.aic-icon:disabled { opacity: .35; cursor: default; }
.aic-icon.on { color: var(--accent-text); border-color: var(--accent); animation: aic-listen 1.6s var(--ease) infinite; }
@keyframes aic-listen { 0%, 100% { box-shadow: 0 0 0 0 var(--accent); } 50% { box-shadow: 0 0 0 3px transparent; } }
.aic-voice-state { font-size: .82em; color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .aic-icon.on { animation: none; } }

/* the voice view (AiChat voice mode): only Trinity, below her what you say, and the way back */
.aic.aic-voice .aic-side, .aic.aic-voice .aic-scroll, .aic.aic-voice .aic-foot { visibility: hidden; }
.aic.aic-voice { grid-template-columns: minmax(0, 1fr); }
.aic.aic-voice .aic-side { display: none; }
.aic-vpanel { position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); display: grid; gap: 12px; justify-items: center; text-align: center; }
.aic-vstate { margin: 0; font-size: .82em; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.aic-vtext { width: 100%; min-height: 64px; max-height: 30vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 14px 18px; font-size: 1.1em; line-height: 1.5; color: var(--text); }
.aic-vtext.empty { color: var(--text-3); }
.aic-vanswer { width: 100%; max-height: 22vh; overflow-y: auto; color: var(--text-2); line-height: 1.55; display: grid; justify-items: center; }

/* files in the chat (C2): chips in the input and in your message, the + menu, the drop zone */
.aic-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.aic-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: .84em; color: var(--text-2); background: var(--surface); }
.aic-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aic-chip small { color: var(--text-3); white-space: nowrap; }
.aic-chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.aic-chip button { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0 2px; font: inherit; }
.aic-chip.err { border-color: var(--wire-4); }
.aic-chip.up small { color: var(--accent-text); }
.aic-thumb { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.aic-plus { position: relative; }
.aic-pmenu { left: 0; right: auto; width: 240px; }
.aic-main.dragging .aic-comp { border-color: var(--accent); }

/* the drawing board (C3, components/DrawBoard.js): a sheet over the app, a toolbar, the board, the hand-over */
.drw-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); animation: fade .2s var(--ease) both; }
.drw { width: min(1100px, 100%); height: min(760px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.2); overflow: hidden; box-shadow: 0 18px 50px var(--shadow); }
.drw-bar, .drw-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
.drw-bar { border-bottom: 1px solid var(--line); }
.drw-foot { border-top: 1px solid var(--line); }
/* save the drawing to a path, copy it (DrawBoard.js); the default path from Einstellungen › Trinity › Zeichenbrett */
.drw-save { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.drw-path { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; font-size: .88em; color: var(--text-2); }
.drw-path .inp { flex: 1; min-width: 0; }
.drw-save > .hintline { flex-basis: 100%; margin: 0; }
.drs-check { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.drs-check input { accent-color: var(--accent); }
.drs-check small { grid-column: 2; }
.drw-sp { flex: 1; }
.drw-tools { display: flex; gap: 4px; }
.drw-colors { display: flex; gap: 6px; padding-left: 4px; }
.drw-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--dot); cursor: pointer; padding: 0; }
.drw-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }
.drw-w button { display: grid; place-items: center; min-width: 34px; }
.drw-w i { display: block; width: 18px; border-radius: 2px; background: currentColor; }
.drw-board { position: relative; min-height: 0; background: var(--surface); touch-action: none; }
.drw-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.drw-board.tool-text canvas { cursor: text; }
.drw-board.tool-eraser canvas { cursor: cell; }
.drw-board.tool-hand canvas, .drw-board.pan canvas { cursor: grab; }
.drw-board.panning canvas { cursor: grabbing; }
/* zoom − / % / + bottom right; the % goes back to 100 */
.drw-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 2px; padding: 2px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.drw-zoom .link { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: .85em; }
/* outline, not border: a border would push the text 1px off the point where it is drawn */
.drw-text { position: absolute; min-width: 120px; border: 0; outline: 1px dashed var(--line); background: transparent; font-family: var(--font-body); line-height: 1.25; padding: 0; margin: 0; resize: none; field-sizing: content; }
.drw-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); pointer-events: none; margin: 0; }
/* Trinity an der Tafel (DrawBoard.js, design entwicklung/design/trinity-an-der-tafel.html): her line on the board,
   the question under it; Füllung: aus · Schraffur · voll for rect and ellipse */
.drw-say { position: absolute; left: 10px; right: 150px; bottom: 10px; display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .92em; line-height: 1.45; }
.drw-say p { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.drw-say .link { flex: none; padding: 0; }
.drw-say-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.drw-dots i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--text-3); animation: drw-dots 1s infinite ease-in-out; }
.drw-dots i:nth-child(2) { animation-delay: .15s; } .drw-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes drw-dots { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drw-dots i { animation: none; opacity: .6; } }
@media (max-width: 640px) { .drw-say { right: 10px; bottom: 54px; } }
.drw-ask { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
/* the microphone in the question field, as in the chat (Erklären, design entwicklung/design/tafel-erklaeren.html) */
.drw-in { position: relative; flex: 1; min-width: 0; display: flex; }
.drw-in .inp { flex: 1; min-width: 0; padding-right: 44px; }
.drw-inmic { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.drw-inmic:hover { background: var(--surface-2); color: var(--text); }
.drw-inmic svg { width: 17px; height: 17px; }
.drw-inmic.on { background: var(--wire-1); color: var(--surface); }
.drw-inmic:disabled { opacity: .4; cursor: default; }
/* her explanation: a small control top right (steps, back, pause, on, captions), the caption free at the bottom */
.drw-pill { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 2px; padding: 3px 6px 3px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.drw-steps { display: flex; gap: 4px; margin-right: 6px; }
.drw-steps i { width: 16px; height: 3px; border-radius: 2px; background: var(--line); }
.drw-steps i.done { background: var(--accent); }
.drw-steps i.cur { background: var(--text-2); }
.drw-steps i.more { width: 8px; opacity: .6; }
.drw-ib { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; font: 600 .72em/1 var(--font-body); }
.drw-ib:hover { background: var(--surface-2); color: var(--text); }
.drw-ib:disabled { opacity: .35; cursor: default; }
.drw-ib svg { width: 16px; height: 16px; }
.drw-cc[aria-pressed="true"] { color: var(--accent-text); }
.drw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.drw-cap { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(70ch, calc(100% - 180px)); text-align: center; pointer-events: none; }
.drw-cap p { margin: 0; font-size: 1.02em; line-height: 1.45; text-shadow: 0 0 6px var(--surface), 0 0 3px var(--surface); }
.drw-cap span { color: var(--text-3); transition: color .15s; }
.drw-cap span.said { color: var(--text); }
.drw-cap span.now { color: var(--accent-text); }
.drw-cap .side span { color: var(--wire-3); }
@media (max-width: 640px) { .drw-cap { width: calc(100% - 20px); bottom: 54px; } }
.drw-fill button { display: grid; place-items: center; min-width: 34px; }
.drw-fill i { display: block; width: 16px; height: 12px; border: 1.6px solid currentColor; border-radius: 2px; }
.drw-fill .drw-f-hachure { background: repeating-linear-gradient(-45deg, currentColor 0 1.2px, transparent 1.2px 4px); }
.drw-fill .drw-f-solid { background: color-mix(in srgb, currentColor 35%, transparent); }
/* the selected connection's panel (the workflow drawing's .ag-pop), top right on the board */
.drw-pop { top: 10px; right: 10px; max-height: calc(100% - 20px); overflow-y: auto; }
.drw-pop .ag-chipset button.dashed { border-style: dashed; }
.drw-relform { display: grid; gap: 6px; margin-top: 6px; }
.drw-relform .ag-check { padding: 0; }
.drw-relact { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.aic-sketch { border: 0; padding: 0; background: none; cursor: pointer; display: grid; gap: 4px; justify-items: start; color: var(--text-3); font: inherit; font-size: .82em; }
.aic-sketch:hover span { color: var(--accent-text); }
/* her sketch in an answer: a card with a small picture (core/sketch.js sketchSvg), opens on her stage */
.aic-skc { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; padding: 8px 12px 8px 8px; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.aic-skc:hover { border-color: var(--text-3); }
.aic-skc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aic-skc-pic { width: 132px; height: 84px; flex: none; border-radius: 8px; background: var(--bg); }
.aic-skc-pic text { font-family: var(--font-body); }
.aic-skc span { display: grid; gap: 2px; min-width: 0; }
.aic-skc b { font-weight: 600; font-size: .92em; }
.aic-skc small { color: var(--text-3); font-size: .8em; }

/* the chat window (C5, components/ChatWindow.js): small it floats, big it is the Trinity tab; her face on one
   canvas over the page (prototype entwicklung/design/trinity-mini.html) */
/* three layers: background, her canvas, content (the input, the head, the list lie above her points) */
.cw, .cw-bg { position: fixed; border-radius: var(--cw-r, 18px);
  transition: left .42s cubic-bezier(.2, .8, .2, 1), top .42s cubic-bezier(.2, .8, .2, 1), width .42s cubic-bezier(.2, .8, .2, 1), height .42s cubic-bezier(.2, .8, .2, 1), border-radius .42s ease; }
.cw-bg { z-index: 6; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(var(--cw-blur, 10px)); -webkit-backdrop-filter: blur(var(--cw-blur, 10px)); border: 1px solid var(--line); box-shadow: 0 16px 44px var(--shadow); }
.cw-bg.big { border-radius: 0; border-width: 0; box-shadow: none; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cw { z-index: 8; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid transparent; overflow: hidden; }
.cw.big { grid-template-rows: minmax(0, 1fr); border-radius: 0; border-width: 0; }
.cw.dragging, .cw.resizing, .cw-bg.dragging, .cw-bg.resizing { transition: none; user-select: none; }
.cw.still, .cw-bg.still { transition: none; }
.cw > .aic { min-height: 0; }
.cw-head { display: flex; justify-content: flex-end; gap: 2px; padding: 6px 6px 0; min-height: 38px; cursor: grab; touch-action: none; user-select: none; }
.cw.dragging .cw-head { cursor: grabbing; }
.cw-head .icon-btn { width: 30px; height: 30px; }
.cw-face { position: fixed; z-index: 7; pointer-events: none; border-radius: var(--cw-r, 18px); transition: opacity .5s ease; }   /* opacity: she steps back behind the messages */
.cw-face.big { border-radius: 0; }
.cw-shrink { position: fixed; z-index: 9; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px 7px 10px; font: inherit; font-size: .9em; color: var(--text-2); cursor: pointer; box-shadow: 0 8px 22px var(--shadow); }
.cw-shrink:hover { color: var(--text); border-color: var(--text-3); }
/* pulling the size: a thin band on every edge, a square on every corner */
.cw-rz { position: absolute; z-index: 4; touch-action: none; }
.cw-rz[data-e="n"], .cw-rz[data-e="s"] { left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.cw-rz[data-e="n"] { top: -2px; } .cw-rz[data-e="s"] { bottom: -2px; }
.cw-rz[data-e="e"], .cw-rz[data-e="w"] { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.cw-rz[data-e="e"] { right: -2px; } .cw-rz[data-e="w"] { left: -2px; }
.cw-rz[data-e="nw"], .cw-rz[data-e="ne"], .cw-rz[data-e="sw"], .cw-rz[data-e="se"] { width: 16px; height: 16px; }
.cw-rz[data-e="nw"] { left: -2px; top: -2px; cursor: nwse-resize; } .cw-rz[data-e="se"] { right: -2px; bottom: -2px; cursor: nwse-resize; }
.cw-rz[data-e="ne"] { right: -2px; top: -2px; cursor: nesw-resize; } .cw-rz[data-e="sw"] { left: -2px; bottom: -2px; cursor: nesw-resize; }
.aic.aic-mn { height: 100%; }
.aic-mn .aic-scroll { padding: 14px 12px 6px; }
.aic-mn .aic-foot { padding: 6px 10px 10px; }
.aic-mn .aic-col { gap: 12px; }
.aic-mn .aic-greet { font-size: 1.05em; }
.aic-mn .aic-vpanel { top: 0; bottom: 14px; align-content: end; width: calc(100% - 24px); }
.aic-mn .aic-vtext { font-size: 1em; min-height: 52px; }
/* a connection's technical rest, folded (SettingsAi.js) */
details.sai-more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 16px; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
details.sai-more > summary span { text-transform: none; letter-spacing: 0; color: var(--text-3); }
details.sai-more[open] > summary { border-bottom: 1px solid var(--line); }
details.sai-more > summary::-webkit-details-marker { display: none; }
details.sai-more > summary b::before { content: "▸ "; color: var(--text-3); }
details.sai-more[open] > summary b::before { content: "▾ "; }

/* ── responsive workbench ──────────────────────────────────────────────────────────
   Desktop remains the default above. These overrides keep every screen usable on
   tablets and phones, including short landscape viewports and touch devices. */
@supports (height: 100dvh) {
  /* the big-screen zoom (core/screen.js) scales these heights too: divided back, or the bottom falls out of the window */
  html, body, #app { height: calc(100dvh / var(--zoom, 1)); }
}

@media (max-width: 1024px) {
  .screen {
    justify-content: flex-start;
    padding: calc(32px * var(--space)) 24px calc(28px * var(--space));
    overscroll-behavior: contain;
  }
  .frame {
    height: auto;
    min-height: 0;
    margin-block: auto;
  }
  .home-main, .wide .home-main {
    width: 100%;
    max-width: none;
    padding: calc(28px * var(--space)) 28px;
  }
  .spane-wrap > .spane, .wide .spane-wrap > .spane { padding: 28px 28px 40px; }
  .concept .ill-wrap { height: clamp(240px, 39vh, 330px); }
  .slide-text { min-height: 0; }
  .drw { width: 100%; height: 100%; }
}

@media (max-width: 760px) {
  .shell { min-width: 0; }
  .bar { gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
  .bar-left { gap: 8px; }
  .here { display: none; }
  .tools { gap: 3px; min-width: 0; }
  .icon-btn { width: 40px; height: 40px; }

  .screen { padding: calc(24px * var(--space)) 18px calc(24px * var(--space)); }
  .welcome-frame { justify-content: center; }
  .intro-h { font-size: clamp(1.75em, 7vw, 2.3em); padding-inline: 8px; }
  .slide-h { font-size: clamp(1.45em, 5vw, 1.75em); }
  .ill-wrap { height: clamp(210px, 36vh, 290px); }

  .flowbar {
    padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .flowbar-in { gap: 8px; }
  .flowbar .btn { min-height: 40px; padding-inline: 16px; }

  /* Primary navigation becomes a compact dropdown instead of a sideways strip. */
  .home { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .home.nav-open, .settings.nav-open { position: relative; z-index: 20; }
  .home aside {
    display: block;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    overflow: visible;
    z-index: 20;
  }
  .mobile-nav-toggle, .settings-nav-toggle {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
  }
  .mobile-nav-toggle i, .settings-nav-toggle i { color: var(--text-3); font-size: .75em; font-style: normal; }
  .home-nav-items, .settings-nav-items {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    inset-inline: 10px;
    max-height: min(62vh, 460px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 0 0 12px 12px;
    background: var(--surface);
    box-shadow: 0 12px 30px var(--shadow);
    z-index: 21;
  }
  .home aside.open .home-nav-items, .snav.open .settings-nav-items { display: grid; }
  .home aside a, .home aside .nav-grp { width: 100%; min-height: 40px; padding: 9px 12px; }
  .home aside a.sub, .wide .home aside a.sub { padding-inline-start: 34px; }
  .home aside .nav-grp { margin: 4px 0 0; }
  .home-main, .wide .home-main { padding: calc(22px * var(--space)) 18px 32px; }

  .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .snav {
    display: block;
    position: relative;
    overflow: visible;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    z-index: 20;
  }
  .settings-nav-items { inset-inline: 10px; }
  .snav .back, .stab { width: 100%; min-height: 40px; }
  .snav .gh { display: block; padding: 12px 10px 4px; }
  .snav-title { display: none; }
  .spane-wrap > .spane, .wide .spane-wrap > .spane { padding: 22px 18px 36px; }

  .ag-tabs, .vtabs, .ov-pages {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;          /* else a tiny vertical scrollbar with arrows shows beside the tabs */
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .ag-tabs button, .vt, .ov-pages button[role="tab"], .ov-addpage { flex: none; white-space: nowrap; }
  .tv-filters .search { flex-basis: 100%; min-width: 0; }
  .acts { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

  .panel { width: min(420px, 100%); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ask { padding: 14px; }
  .ask-box { max-height: calc(100dvh - 28px); overflow-y: auto; }
  .drw-scrim { padding: 0; }
  .drw { border: 0; border-radius: 0; }
  .drw-bar, .drw-foot { padding-inline: max(10px, env(safe-area-inset-left, 0px)); }

  .aic-scroll { padding-inline: 12px; }
  .aic-foot { padding-inline: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .aic-menu { width: min(280px, calc(100vw - 24px)); }
  .aic-vpanel { bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
  .live-screen { padding: 22px 18px 32px; }
}

@media (max-width: 560px) {
  body { font-size: calc(14px * var(--scale)); }
  .bar { padding-inline: 9px; }
  .brand { gap: 7px; }
  .brand-sub { display: none; }
  .tools { margin-inline-start: auto; }
  .icon-btn { width: 38px; height: 38px; }
  .live-btn { width: 38px; height: 38px; justify-content: center; gap: 4px; padding: 0; font-size: 0; }
  .live-btn b { font-size: 11px; }

  .screen { padding: calc(18px * var(--space)) 14px calc(20px * var(--space)); }
  .frame { gap: calc(16px * var(--space)); }
  .welcome-h { font-size: clamp(1.9em, 10vw, 2.35em); }
  .welcome-p { font-size: 1em; }
  .ill-wrap { height: clamp(180px, 33vh, 240px); padding: 12px; }

  .flowbar { padding-inline: 10px; }
  .flowbar-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .flowbar .btn { min-height: 40px; padding: 8px 12px; font-size: .94em; }
  .flowbar .link { font-size: .9em; }
  .flowbar-in .row { gap: 8px; }
  .flowbar .mid { font-size: .8em; }

  .home-main, .wide .home-main { padding: calc(18px * var(--space)) 14px 28px; }
  .spane-wrap > .spane, .wide .spane-wrap > .spane { padding: 18px 14px 32px; }
  .cards, .acts, .look.full, .look.full .tpls { grid-template-columns: minmax(0, 1fr); }
  .look.full { gap: 22px; }
  .look.full > .grp { min-width: 0; }
  .look.full .seg.many { flex-wrap: wrap; overflow-x: visible; }
  .dzp-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dzp-card { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .dzp-thumb { border-bottom: 0; border-inline-end: 1px solid var(--line); overflow: hidden; }
  .dzp-thumb .dz-host { min-height: 100%; border-radius: 0; }
  .dzp-body { padding: 10px; }
  .dzp-body p { line-height: 1.35; }
  .dzp-vers button { min-height: 34px; padding-inline: 10px; }
  .dzp-colors { gap: 8px; }
  .dzp-colors input[type=color], .dzp-dot { width: 30px; height: 30px; }
  .dzp-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dzp-acts .btn { width: 100%; }
  .dzp-acts .primary, .dzp-acts .note { grid-column: 1 / -1; }
  .dzt-head { align-items: flex-start; }
  .dzt-head h4 { flex-basis: calc(100% - 60px); }
  .dzt-grid { grid-template-columns: minmax(0, 1fr); }
  .dzt-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-height: 300px; overflow-y: auto; }
  .dzt-list .gh { grid-column: 1 / -1; }
  .dzt-list button { min-height: 40px; }
  .dzt-rh { align-items: flex-start; flex-direction: column; }
  .dzt-rh select, .dzt-rh .cval, .dzt-rng { width: 100%; max-width: none; }
  .dzt-rh input[type=range] { flex: 1; width: auto; }
  .dzt-pv { display: none; }
  .next, .act, .td-doc, .bb-block { padding-inline: 14px; }
  .url-row { align-items: stretch; flex-direction: column; }
  .url-row .btn { width: 100%; }
  .summary div { align-items: start; flex-direction: column; gap: 3px; }
  .summary dd { text-align: start; }
  .lock-row { grid-template-columns: auto minmax(0, 1fr); }
  .lock-row .who { grid-column: 2; grid-row: auto; justify-self: start; }
  .lock-row small { grid-column: 2; }
  .td-props { grid-template-columns: minmax(0, 1fr); }
  .td-props dt { padding-bottom: 2px; border-bottom: 0; }
  .td-props dd { padding-top: 2px; }
  .ag-bar { align-items: stretch; flex-direction: column; }
  .ag-relform input:not([type]) { width: 100%; }
  .ov-hbr { grid-template-columns: minmax(60px, 90px) minmax(0, 1fr); }
  .ov-hbr > span:last-child { grid-column: 2; }
  .ov-row { grid-template-columns: auto minmax(0, 1fr); }
  .ov-row > :last-child { grid-column: 2; }

  /* Prevent iOS from zooming the page while editing a field. */
  input, select, textarea, button { font-size: max(16px, 1em); }
  .cat-row, .tf-row, .srow, .hrow { padding-inline: 12px; }
  .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .seg button { flex: none; }
  /* many choices (the languages): in rows, not a strip whose chosen one sits out of sight */
  .seg.many { flex-wrap: wrap; overflow-x: visible; }
  /* paths and commands under a row's title: whole, over two lines, rather than cut at the card's edge */
  .tf-t small { white-space: normal; overflow-wrap: anywhere; }

  .ask-box { padding: 18px 16px 16px; }
  .panel { border-inline-start: 0; }
  .panel .body { padding: 14px; }
  .coach-tip { max-width: calc(100% - 16px); padding: 14px; }
  .aic-u { max-width: 92%; }
  .aic-a { gap: 9px; }
  .aic-comp { padding: 10px 9px 7px 12px; }
  .aic-conn { max-width: 34vw; }
  .aic-pmenu { width: min(240px, calc(100vw - 20px)); }
  .drw-tools, .drw-colors { overflow-x: auto; }
}

@media (hover: none) and (pointer: coarse) {
  .btn, .link, .choice, .stab, .home aside a, .home aside .nav-grp,
  .cat-filters button, .seg button, .vt, .chip { min-height: 44px; }
  .icon-btn, .aic-icon, .aic-send { min-width: 44px; min-height: 44px; }
  .grip, .lay-grip, .cw-rz { display: none; }
}

/* Werkzeuge beside the chat (core/tools.js, components/ToolsList.js, ToolDock.js, ToolTerm.js, ToolEditor.js) */
.aic-stack { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; min-width: 0; height: 100%; }
/* at the top the dock lies over the conversation; the conversation keeps its size (her face never sees a zero-height box) */
.aic-stack.tl-max > .aic-main { visibility: hidden; }
.aic-stack.tl-max > .tl-dock { position: absolute; inset: 0; z-index: 6; }
/* the tools sit at the bottom of the list column, under all chats however many there are */
.tl-list { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
/* a drop-up: the rows open above the heading */
.tl-rows { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; scrollbar-width: none; }
.tl-fold { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 4px; }
.tl-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-fold i { width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: rotate(225deg) translate(2px, 2px); transition: transform .2s var(--ease); }
.tl-list.shut .tl-fold i { transform: rotate(45deg) translate(2px, 2px); }
.tl-fold small { font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.tl-g { display: flex; align-items: center; justify-content: space-between; }
.tl-add { border: 0; background: none; font: inherit; font-size: 1.25em; line-height: 1; letter-spacing: 0; color: var(--text-3); padding: 0 6px 2px; border-radius: 6px; cursor: pointer; }
.tl-add:hover { color: var(--text); background: var(--surface-2); }
.tl-row { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: .9em; color: var(--text-2); padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: start; }
.tl-row:hover, .tl-row.on { background: var(--surface-2); }
.tl-row.on { color: var(--text); font-weight: 600; }
.tl-ic { width: 18px; flex: none; text-align: center; font-family: var(--font-mono); font-size: .76em; color: var(--text-3); }
.tl-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meta { font-size: .78em; color: var(--text-3); font-weight: 400; }
.tl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; display: inline-block; }

.tl-dock { position: relative; z-index: 4; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; border-top: 1px solid var(--line); background: var(--surface); }
.tl-dock.max { border-top: 0; }
.tl-grip { position: absolute; left: 0; right: 0; top: -6px; height: 12px; z-index: 5; display: grid; place-items: center; cursor: ns-resize; touch-action: none; }
.tl-grip::after { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.tl-grip:hover::after, .tl-grip:focus-visible::after, .tl-dock.dragging .tl-grip::after { background: var(--accent); }
.tl-grip:focus-visible { outline: none; }
.tl-dock.max .tl-grip { top: 0; }
.tl-dock.dragging, .tl-dock.dragging * { user-select: none; }
.tl-dock.dragging .tl-body { pointer-events: none; }
.tl-tabs { display: flex; align-items: stretch; min-width: 0; border-bottom: 1px solid var(--line); }
/* the tabs scroll on their own; „+“ and the actions stay in view */
.tl-strip { display: flex; align-items: stretch; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: thin; }
.tl-plus { position: relative; flex: none; display: flex; align-items: center; }
/* a small menu of tools: under the dock's „+“, and at the pointer on a right click in the Werkzeuge list */
.tl-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 6; min-width: 200px; display: grid; gap: 1px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px var(--shadow); }
.tl-menu.tl-ctx { position: fixed; top: auto; z-index: 60; }
.tl-menu button { display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; font: inherit; font-size: .86em; color: var(--text); text-align: start; padding: 6px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.tl-menu button:hover, .tl-menu button:focus-visible { background: var(--surface-2); }
.tl-menu small { color: var(--text-3); }
.tl-pick { width: 320px; max-width: calc(100vw - 8px); max-height: min(70vh, 560px); overflow: auto; }
.tl-pick-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: .9em; }
.tl-pick-h .link { font-size: .92em; }
.tl-pick-l { font-size: .72em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 2px; }
.tl-pick-dev { display: grid; gap: 4px; padding: 0 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; font-size: .86em; }
.tl-pick-dev .tl-pick-l { padding: 6px 0 0; }
.tl-pick-dev small { color: var(--text-2); white-space: normal; line-height: 1.45; }
.tl-pick-dev .btn { margin-top: 4px; }
.tl-pick-names { font-weight: 600; }
.tl-pick > button span { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.tl-pick button:disabled { opacity: .55; cursor: default; }
.tl-pick .hintline { margin: 0; padding: 4px 10px; font-size: .84em; }
.tl-tab { display: flex; align-items: center; border-inline-end: 1px solid var(--line); }
.tl-tab > button:first-child { border: 0; background: none; font: inherit; font-size: .86em; color: var(--text-3); padding: 8px 4px 8px 12px; cursor: pointer; white-space: nowrap; }
.tl-tab.on { box-shadow: inset 0 -2px 0 var(--accent); }
.tl-tab.on > button:first-child { color: var(--text); }
.tl-x { border: 0; background: none; font: inherit; font-size: .74em; color: var(--text-3); padding: 4px 8px; margin-inline-end: 4px; border-radius: 4px; cursor: pointer; }
.tl-x:hover { color: var(--text); background: var(--surface-2); }
.tl-more { flex: none; align-self: center; border: 0; background: none; font: inherit; font-size: 1em; line-height: 1; color: var(--text-3); padding: 4px 9px; margin-inline-start: 2px; border-radius: 4px; cursor: pointer; }
.tl-more:hover, .tl-more:focus-visible { color: var(--text); background: var(--surface-2); }
.tl-ttab { display: flex; align-items: center; gap: 7px; border: 0; border-inline-end: 1px solid var(--line); background: none; font: inherit; font-size: .86em; font-weight: 600; color: var(--text); padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.tl-ttab:hover { background: var(--surface-2); }
.tl-ttab .aic-mark { width: 14px; height: 14px; margin: 0; }
.tl-act { align-self: center; font-size: .8em; padding: 0 10px; white-space: nowrap; }
.tl-msg { align-self: center; padding: 0 8px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-body { position: relative; min-height: 0; }
.tl-pane { position: absolute; inset: 0; display: flex; }
.tl-web { flex: 1; width: 100%; height: 100%; border: 0; background: var(--bg); }

.tl-term { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.tl-xterm { flex: 1; min-width: 0; min-height: 0; padding: 8px 0 4px 12px; }
/* Sprechen in Konsolen (ToolTerm.js, design entwicklung/design/konsolen-sprechen.html): a line under the console while it
   records, like the chat's input while dictating; afterwards one short line (busy, nothing heard, an error) */
.tl-talk { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface); font-size: .92em; }
.tl-talk-txt { flex: 1; min-width: 0; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; max-height: 6.2em; overflow-y: auto; }
.tl-talk-int { color: var(--text-3); }
.tl-talk-priv { display: block; color: var(--text-3); font-size: .86em; margin-top: 2px; }
.tl-talk-say { flex: 1; min-width: 0; color: var(--text-2); font-size: .94em; }
.tl-talk.is-busy .tl-talk-say, .tl-talk.is-err .tl-talk-say { color: var(--text); }
.tl-talk-keys { flex: none; display: flex; gap: 12px; font-size: .86em; color: var(--text-3); white-space: nowrap; }
.tl-talk-keys kbd { font-family: var(--font-mono); font-size: .92em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--text-2); background: var(--surface-2); }
.kb-term .tl-talk { padding: 6px 10px; gap: 8px; font-size: .86em; }
.kb-term .tl-talk .aic-icon { width: 26px; height: 26px; }
.kb-term .tl-talk .aic-icon svg { width: 13px; height: 13px; }
.kb-term .tl-talk-keys span + span { display: none; }
.tl-talkpad { width: 22px; grid-row: span 2; }
.tl-talkdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-inline-end: 7px; flex: none; animation: aic-listen 1.6s var(--ease) infinite; }
@media (max-width: 640px) { .tl-talk { flex-wrap: wrap; } .tl-talk-keys { width: 100%; justify-content: flex-end; } }
.tl-xterm .xterm { height: 100%; }
.tl-term-msg { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: .86em; color: var(--text-2); }

.tl-ed { flex: 1; min-width: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.tl-files { display: flex; flex-direction: column; overflow: auto; padding: 6px 4px; border-inline-end: 1px solid var(--line); }
.tl-file { flex: none; display: flex; gap: 4px; border: 0; background: none; font: inherit; font-size: .82em; color: var(--text-2); text-align: start; padding: 3px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-file span { width: 10px; flex: none; color: var(--text-3); }
.tl-file:hover { background: var(--surface-2); }
.tl-file.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.tl-new { color: var(--text-3); margin-bottom: 4px; }
.tl-newf { flex: none; margin: 0 2px 4px; }
.tl-newf .inp { font-size: .8em; padding: 4px 8px; }
.tl-edmain { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.tl-edbar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 10px; border-bottom: 1px solid var(--line); }
.tl-edbar .btn { padding: 3px 12px; font-size: .82em; }
.tl-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .78em; color: var(--text-2); }
.tl-dirty { font-size: .76em; color: var(--accent-text, var(--accent)); white-space: nowrap; }
/* Editor and console measure their text themselves and get lost under the big-screen zoom (core/screen.js):
   they undo it and grow their font instead, so they look the same and the cursor sits where you click. */
.tl-cm, .tl-xterm { zoom: calc(1 / var(--zoom, 1)); }
.tl-cm { position: relative; min-height: 0; }
/* a Markdown file as it reads (Ansehen), over the text, which stays in place for „Bearbeiten“ — above CodeMirror's own scrollbars (z-index 6), or those would move the hidden text */
.tl-edbody { position: relative; display: grid; min-height: 0; }
.tl-prev { position: absolute; inset: 0; z-index: 10; overflow: auto; padding: 12px 16px; background: var(--bg); }
.tl-prev .td-doc { max-width: 860px; }
.tl-cm .CodeMirror { position: absolute; inset: 0; height: auto; background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: calc(13px * var(--zoom, 1)); }
.tl-cm .CodeMirror-gutters { background: var(--surface); border-inline-end: 1px solid var(--line); }
.tl-cm .CodeMirror-linenumber { color: var(--text-3); }
.tl-cm .CodeMirror-cursor { border-left-color: var(--text); }
.tl-cm .CodeMirror-selected, .tl-cm .CodeMirror-focused .CodeMirror-selected { background: var(--surface-2); }
.tl-cm .cm-keyword { color: var(--wire-3, var(--accent)); }
.tl-cm .cm-string, .tl-cm .cm-string-2 { color: var(--wire-2, var(--text-2)); }
.tl-cm .cm-number, .tl-cm .cm-atom, .tl-cm .cm-builtin, .tl-cm .cm-type { color: var(--wire-5, var(--text-2)); }
.tl-cm .cm-comment, .tl-cm .cm-meta { color: var(--text-3); font-style: italic; }
.tl-cm .cm-def, .tl-cm .cm-variable-2, .tl-cm .cm-link, .tl-cm .cm-qualifier { color: var(--wire-1, var(--text)); }
.tl-cm .cm-tag, .tl-cm .cm-error { color: var(--wire-4, var(--accent)); }
.tl-cm .cm-attribute, .tl-cm .cm-property, .tl-cm .cm-operator { color: var(--text-2); }
.tl-cm .cm-header { color: var(--text); font-weight: 600; }
.tl-cm .cm-variable { color: var(--text); }

.aic-ctx { display: inline-flex; align-items: center; gap: 6px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); background: none; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .78em; color: var(--text-3); cursor: pointer; }
.aic-ctx i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.aic-ctx.on { border-color: var(--accent); color: var(--text); }
.aic-ctx.on i { background: var(--accent); }
.tl-ins { display: block; justify-self: start; font-size: .82em; margin: -4px 0 8px; }
.aic-stack.tl-docked .aic-greet { font-size: clamp(18px, 1.9vw, 26px); margin-bottom: 10px; }
.tl-noframe { flex: 1; display: grid; align-content: center; justify-items: start; gap: 10px; padding: 24px 28px; max-width: 62ch; }
.tl-noframe-do { display: flex; align-items: center; gap: 14px; }
/* the dock open: "Als Mini-Chat" floats above it; filling the chat area, the Trinity tab is the way back instead */
body:has(.tl-dock) .cw-shrink { bottom: calc(var(--tl-reach, 0px) + 14px); }
body:has(.tl-dock.max) .cw-shrink { display: none; }

/* ── Trinity on a phone (≤ 760px) ── the conversation takes the whole width; chats and tools slide in from
   the left (☰), a tool fills the screen with the Trinity tab as the way back (core/tools.js → narrow) */
/* grids without a column grow with their content (a textarea is 400px wide by itself): never wider than the screen */
.aic-main, .aic-col, .aic-comp { grid-template-columns: minmax(0, 1fr); }
.aic-sidebtn, .aic-sidescrim { display: none; }
@media (max-width: 760px) {
  .aic { position: relative; }
  .aic-sidebtn { display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 7; top: 8px; inset-inline-start: 10px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .84em; cursor: pointer; }
  .aic.side-open .aic-side { display: flex; position: absolute; z-index: 16; top: 0; bottom: 0; inset-inline-start: 0; width: min(300px, 86%);
    background: var(--surface); box-shadow: 0 18px 48px var(--shadow); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .aic-sidescrim { display: block; position: absolute; inset: 0; z-index: 15; background: var(--scrim); }
  .aic-scroll { padding-top: 52px; }
  .aic-ctx { max-width: 46%; }
  .cw-shrink { display: none; }
  .aic:has(.tl-dock.max) .aic-sidebtn { display: none; }
  .tl-strip { scrollbar-width: none; }
  .tl-ed { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .tl-tabs .tl-act { padding: 0 8px; }
}

/* ── media in Trinity's answers (core/tasks.js → mdToHtml chat) ── pictures, video, audio, link cards, files;
   a picture opens large on her stage (data-stage) */
.aic-a .md-media { display: block; max-width: min(100%, 420px); border: 1px solid var(--line); border-radius: 12px; margin: 6px 0; background: var(--surface-2); }
.aic-a img.md-media { max-height: 220px; width: auto; object-fit: contain; cursor: zoom-in; }
.aic-a .md-video { width: 420px; max-height: 260px; }
.aic-a .md-audio { display: grid; gap: 4px; padding: 8px 10px; background: var(--surface); }
.aic-a .md-audio audio { width: 100%; height: 36px; }
.aic-a .md-audio small { color: var(--text-3); font-size: .78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-card { display: grid; gap: 1px; margin: 6px 0; padding: 9px 12px; border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
.md-card:hover { border-color: var(--text-3); border-inline-start-color: var(--accent); }
.md-card b { font-weight: 600; font-size: .92em; }
.md-card span { color: var(--text-3); font-size: .8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-file { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; font-size: .92em; max-width: 100%; }
.md-file:hover { border-color: var(--text-3); }
.md-file i { font-style: normal; font-family: var(--font-mono); font-size: .66em; color: var(--text-3); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; flex: none; }
.md-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Trinity's stage (components/StageModal.js): a large window she opens herself ── */
.stg-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 3vh max(16px, 3vw); background: var(--scrim); }
.stg { width: min(1100px, 100%); height: min(760px, 100%); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px var(--shadow); overflow: hidden; }
.stg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.stg-head b { font-family: var(--font-display); font-weight: 400; font-size: 1.15em; }
.stg-head small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stg-mark { width: 16px; height: 16px; display: inline-grid; flex: none; }
.stg-mark svg { width: 16px; height: 16px; }
.stg-mark .left { fill: var(--accent); } .stg-mark .base { fill: var(--logo-base, var(--text)); } .stg-mark .right { fill: var(--logo-mid, var(--text-2)); }
.stg-tabs { grid-row: 2; display: flex; gap: 2px; padding: 4px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.stg-tabs button { border: 0; background: none; font: inherit; font-size: .88em; color: var(--text-3); padding: 8px 12px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.stg-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.stg-body { grid-row: 3; position: relative; min-height: 0; overflow: auto; }   /* fixed rows: with one item there are no tabs */
.stg-board { position: absolute; inset: 0; background-image: radial-gradient(var(--line) 1.2px, transparent 1.4px); background-size: 24px 24px; }
.stg-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stg-deck { min-height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 24px; }
.stg-slide { align-self: center; justify-self: center; width: min(820px, 100%); display: grid; gap: 12px; padding: 28px 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.stg-pg { font-size: .76em; color: var(--text-3); }
.stg-nav { display: flex; gap: 8px; justify-content: center; }
.stg-page { padding: 24px 28px; }
.stg-md { max-width: 74ch; margin: 0 auto; display: grid; gap: 10px; }
.stg-md.aic-a { grid-template-columns: minmax(0, 1fr); }   /* the chat's look without its mark column */
.stg-web { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.stg-url { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.stg-url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .8em; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 5px 10px; }
.stg-web iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
.stg-web.stg-pdf { grid-template-rows: minmax(0, 1fr); }
.stg-code { margin: 0; overflow: auto; white-space: pre; }
.stg-media { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; }
.stg-media img, .stg-media video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; min-width: 0; min-height: 0; }
.stg-audio { gap: 12px; align-content: center; }
.stg-audio audio { width: min(520px, 100%); }
.stg-foot { grid-row: 4; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .84em; color: var(--text-3); }
@media (max-width: 760px) { .stg-scrim { padding: 0; } .stg { width: 100%; height: 100%; border-radius: 0; border: 0; } .stg-slide { padding: 18px; } }
/* every kind of content in her answer in the same card (AiChat.js → decorate): a head with the kind's icon, its
   name and the buttons (copy · download · save to a path · copy link · open · into a console), the content below */
.mdc { margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; max-width: 100%; }
.mdc-image, .mdc-video { width: fit-content; max-width: min(100%, 440px); }
.mdc-audio, .mdc-file, .mdc-link { max-width: 440px; }
.mdc-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 4px 4px 10px; border-bottom: 1px solid var(--line); font-size: .8em; color: var(--text-3); }
.mdc-file .mdc-head, .mdc-link .mdc-head { border-bottom: 0; }
.mdc-ic { display: inline-grid; flex: none; }
.mdc-ic svg { width: 14px; height: 14px; }
.mdc-head b { font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mdc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .95em; }
.md-tools { display: flex; gap: 2px; flex: none; }
.md-tool { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; border-radius: 7px; color: var(--text-3); cursor: pointer; padding: 0; }
.md-tool svg { width: 15px; height: 15px; }
.md-tool:hover { color: var(--text); background: var(--surface-2); }
.md-tool.done { color: var(--accent-text, var(--accent)); }
.mdc-body > * { margin: 0 !important; border: 0 !important; border-radius: 0 !important; max-width: 100% !important; }
.mdc-body > pre.md-code { background: var(--surface-2); }
.mdc-image .mdc-body img { display: block; max-height: 220px; width: auto; }
.mdc-video .mdc-body video { display: block; width: 440px; max-height: 260px; }
.mdc-audio .mdc-body { padding: 6px 8px; } .mdc-audio .md-audio { padding: 0 !important; background: none !important; } .mdc-audio .md-audio small { display: none; }
.mdc-file .mdc-body { display: none; }
.mdc-link .mdc-body { display: none; }
.aic-acts { display: flex; gap: 2px; margin: 2px 0 0 -4px; opacity: .55; }
.aic-a:hover .aic-acts, .aic-acts:focus-within { opacity: 1; }
.aic-save { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .9em; }
.aic-save label { color: var(--text-2); white-space: nowrap; }
.aic-save .inp { min-width: 0; }
.aic-save small { grid-column: 1 / -1; }
@media (max-width: 560px) { .aic-save { grid-template-columns: minmax(0, 1fr) auto auto; } .aic-save label { grid-column: 1 / -1; } }

/* ── Fokus (components/FokusNav.js, FokusMini.js, FokusView.js; core/fokus.js) ── */
.fk-nav { margin-top: auto; display: grid; gap: 6px; text-align: start; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
.fk-nav:hover, .fk-nav.on { border-color: var(--text-3); }
.fk-nav-t { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.fk-nav-t b { font-family: var(--font-mono); font-weight: 500; font-size: 1.05em; font-variant-numeric: tabular-nums; }
.fk-nav-t small { color: var(--text-3); font-size: .76em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-bar { height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.fk-bar i { display: block; height: 100%; background: var(--accent); }
.fk-nav-r { display: flex; gap: 6px; align-items: center; font-size: .76em; color: var(--text-2); }
.fk-dots { display: inline-flex; gap: 3px; }
.fk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.fk-dots i.done { background: var(--accent); }
.fk-mini { position: fixed; z-index: 30; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; max-width: 360px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 14px 5px 5px; box-shadow: 0 8px 22px var(--shadow); color: var(--text); }
.fk-mini-open { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.fk-mini-vol { flex: none; display: flex; }
.fk-mini-vol input { width: 64px; }
.fk-ring { width: 34px; height: 34px; flex: none; transform: rotate(-90deg); }
.fk-ring circle, .fk-big circle { fill: none; }
.fk-ring circle { stroke-width: 3; }
.fk-ring .bg, .fk-big .bg { stroke: var(--surface-2); }
.fk-ring .fg, .fk-big .fg { stroke: var(--accent); stroke-linecap: round; }
.fk-mini-t { display: grid; line-height: 1.25; min-width: 0; }
.fk-mini-t b { font-family: var(--font-mono); font-weight: 500; font-size: .88em; font-variant-numeric: tabular-nums; }
.fk-mini-t > span { font-size: .76em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; margin-inline-end: 5px; }
.fk-eq i { width: 2px; background: var(--accent); border-radius: 1px; animation: fk-eq 1.1s ease-in-out infinite; }
.fk-eq i:nth-child(2) { animation-delay: -.4s; } .fk-eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes fk-eq { 0%, 100% { height: 3px; } 50% { height: 10px; } }
.fk-mini.paused .fk-eq i { animation: none; height: 3px; }
/* on a phone only the ring and the time: small, out of the way */
@media (max-width: 760px) {
  .fk-mini { right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); gap: 6px; padding: 3px 10px 3px 3px; box-shadow: 0 4px 12px var(--shadow); }
  .fk-mini .fk-ring { width: 26px; height: 26px; }
  .fk-mini-t > span { display: none; }
  .fk-mini-t b { font-size: .82em; }
}
@media (prefers-reduced-motion: reduce) { .fk-eq i { animation: none; } }
/* the mini chat's button moves up while the Fokus player sits at the bottom right */
body:has(.fk-mini) .cw-shrink { bottom: calc(var(--tl-reach, 0px) + 70px); }

.fk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; width: min(1100px, 100%); margin: 0 auto; }
.fk-left { display: grid; justify-items: center; align-content: start; gap: 18px; padding-top: 12px; }
.fk-phases { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.fk-phases span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: .8em; color: var(--text-3); }
.fk-phases span.on { border-color: var(--accent); color: var(--text); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.fk-big { position: relative; width: min(260px, 70vw); aspect-ratio: 1; max-width: 100%; }
.fk-big svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fk-big circle { stroke-width: 6; }
.fk-big-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.fk-big-c b { font-family: var(--font-mono); font-weight: 400; font-size: 2.8em; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fk-big-c span { color: var(--text-3); font-size: .86em; }
.fk-ctl { display: flex; gap: 10px; align-items: center; }
.fk-c { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; cursor: pointer; display: grid; place-items: center; }
.fk-c:disabled { opacity: .35; cursor: default; }
.fk-c.main { width: 56px; height: 56px; background: var(--accent); border-color: transparent; color: var(--on-accent); font-size: 1.1em; }
.fk-np { display: flex; align-items: center; gap: 10px; width: min(420px, 100%); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface); }
.fk-cov { width: 34px; height: 34px; border-radius: 8px; flex: none; background: linear-gradient(140deg, var(--accent), var(--surface-2)); }
.fk-np > div { display: grid; min-width: 0; }
.fk-np b { font-weight: 600; font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-np small { color: var(--text-3); font-size: .76em; }
.fk-vol input { width: 80px; accent-color: var(--accent); }
.fk-right { display: grid; gap: 16px; align-content: start; min-width: 0; }
.fk-h { font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; font-weight: 600; }
.fk-profs { display: flex; flex-wrap: wrap; gap: 6px; }
.fk-profs button { display: grid; text-align: start; line-height: 1.3; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 12px; font: inherit; color: var(--text); cursor: pointer; }
.fk-profs button small { color: var(--text-3); font-size: .76em; }
.fk-profs button.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.fk-profs .add { border-style: dashed; color: var(--text-3); }
.fk-form { display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.fk-fr { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: .9em; }
.fk-fr > span { color: var(--text-2); }
.fk-fr > .inp, .fk-fr > select, .fk-fr > textarea { grid-column: 2 / -1; min-width: 0; }
.fk-fr input[type=range] { width: 100%; accent-color: var(--accent); }
.fk-fr output { font-family: var(--font-mono); font-size: .82em; text-align: end; }
/* a playlist's songs: marks with ×, „+ Lied“ opens the list of every song with ▶ to listen */
.fk-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; grid-column: 2 / -1; }
.fk-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 1px 3px 1px 10px; font-size: .86em; }
.fk-chip button { border: 0; background: none; color: var(--text-3); cursor: pointer; font: inherit; padding: 0 5px; border-radius: 50%; }
.fk-chip button:hover { color: var(--text); }
.fk-chip-add { border: 1px dashed var(--line); background: none; border-radius: 999px; padding: 1px 10px; font: inherit; font-size: .86em; color: var(--text-3); cursor: pointer; }
.fk-chip-add:hover, .fk-chip-add[aria-expanded="true"] { color: var(--text); border-color: var(--text-3); }
.fk-quiet { color: var(--text-3); font-size: .86em; }
.fk-pl-pick { display: grid; gap: 1px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.fk-pl-pick input { accent-color: var(--accent); width: 16px; height: 16px; }
.fk-song small { color: var(--text-3); font-size: .86em; }
.fk-hear { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: .72em; cursor: pointer; display: grid; place-items: center; }
.fk-hear:hover, .fk-hear.on { border-color: var(--accent); color: var(--text); }
/* what plays: one line — the song (a tap opens the small list), ⏭, volume, ♪ on/off */
.fk-np { position: relative; gap: 8px; }
.fk-np-s { min-width: 0; flex: 1; }
.fk-np-b { display: grid; width: 100%; min-width: 0; text-align: start; background: none; border: 0; border-radius: 8px; padding: 2px 6px; font: inherit; color: inherit; cursor: pointer; }
.fk-np-b:hover, .fk-np-b[aria-expanded="true"] { background: var(--surface-2); }
.fk-np-b small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-np .fk-vol input { width: 64px; }
.fk-hear:disabled { opacity: .4; cursor: default; }
.fk-mute.off { color: var(--text-3); text-decoration: line-through; }
.fk-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; gap: 1px; max-height: 280px; overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow); }
.fk-pop.up { top: auto; bottom: calc(100% + 6px); }   /* no room below (the row at the bottom of the Fokus window) */
.fk-pop-h { font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 6px 8px 2px; }
.fk-pop > button { text-align: start; background: none; border: 0; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: .88em; color: var(--text); cursor: pointer; }
.fk-pop > button:hover { background: var(--surface-2); }
.fk-pop > button.on { color: var(--accent-text); font-weight: 600; }
.fk-sub { font-size: .86em; color: var(--text-2); margin-bottom: 2px; }
.fk-song { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; font-size: .9em; }
.fk-song:hover { background: var(--surface-2); }
.fk-song > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-add .row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
@media (max-width: 860px) { .fk { grid-template-columns: minmax(0, 1fr); } .fk-fr { grid-template-columns: 90px minmax(0, 1fr) 56px; } }
.fk-vol .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fokus v2 (design entwicklung/design/fokus-v2.html): Trinity's ring (face/ring.js), the board, the settings at the bottom left */
.fk { position: relative; padding-bottom: 54px; }
/* the board gets the room: the timer a narrow column, the board the rest (no page width cap here) */
.home-main.single.fk-host, .wide .home-main.single.fk-host { max-width: none; }
.fk-host .fk { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); width: min(1600px, 100%); }
@media (max-width: 860px) { .fk-host .fk { grid-template-columns: minmax(0, 1fr); } }
.fkb-col { flex: 1 1 0; }
/* Einstellungen › Fokus › Kreis: the ring as it looks, live (FokusSettings.js) */
.fks-prev { position: relative; height: 280px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; display: grid; place-items: center; }
.fks-prev canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fks-prev-a { width: 170px; aspect-ratio: 1; display: grid; place-items: center; }
.fks-prev-a b { position: relative; font-family: var(--font-mono); font-weight: 500; font-size: 1.4em; font-variant-numeric: tabular-nums; }
.fks-prev-b { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fks-prev-b .seg { flex: none; }
.fk-fly { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 4; }
.fk-ring-a { position: relative; width: min(300px, 72vw); aspect-ratio: 1; max-width: 100%; display: grid; place-items: center;
  margin-block: calc(min(300px, 72vw) * .14) calc(min(300px, 72vw) * .06); }   /* the free points reach ~.7 of the width from the middle (face/ring.js): room up to the phase chips */
.fk-ring-a .fk-big-c, .fkw-ring .fk-big-c { position: relative; z-index: 5; }
.fk-gear { position: absolute; inset-inline-start: 0; bottom: 8px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .88em; color: var(--text-3); background: none; border: 1px solid transparent; border-radius: 999px; padding: 5px 12px 5px 8px; cursor: pointer; }
.fk-gear:hover, .fk-gear[aria-expanded="true"] { color: var(--text); border-color: var(--line); background: var(--surface); }
.fk-gear svg { width: 16px; height: 16px; }
.fk-back { grid-column: 1 / -1; justify-self: start; font: inherit; font-size: .9em; color: var(--text-2); background: none; border: 0; padding: 6px 12px; margin-inline-start: -12px; border-radius: 8px; cursor: pointer; position: relative; z-index: 5; }
.fk-back:hover { color: var(--text); background: var(--surface-2); }
.fk-say { margin: 0; max-width: 420px; border: 1px solid var(--accent); border-radius: 14px; padding: 8px 12px; background: var(--surface); font-size: .92em; }
.fks { display: grid; gap: 4px; min-width: 0; }   /* Einstellungen › Fokus (components/FokusSettings.js) */
.fks-tabs { border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fks-p { padding: 16px 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.fks-msg { margin: 0; }
.fks-grp { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fks-grp .fk-h { margin: 0; }
.fks-opt { display: flex; gap: 9px; align-items: flex-start; font-size: .92em; cursor: pointer; }
.fks-opt input { margin-top: 3px; accent-color: var(--accent); }
.fks-opt small { display: block; color: var(--text-3); font-size: .86em; }
.fks-tone { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1.2fr) 90px auto; gap: 8px; align-items: center; font-size: .9em; }
.fks-tone > span { color: var(--text-2); }
.fks-tone input[type=range] { width: 100%; accent-color: var(--accent); }
.fks-tone .fks-path { grid-column: 2 / -1; }
.fks-act { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fks-hooks { display: flex; gap: 6px; flex-wrap: wrap; }
.fks-hooks code { font-size: .8em; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--text-2); }
.fks-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fks-styles button { font: inherit; text-align: start; display: grid; gap: 1px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.fks-styles button small { color: var(--text-3); font-size: .8em; line-height: 1.3; }
.fks-styles button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fkb { display: grid; gap: 10px; min-width: 0; }
.fkb-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fkb-t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25em; }
.fkb-h .hintline, .fkb > .hintline { margin: 0; }
.fkb-row { gap: 8px; }
.fkb-col { min-width: 140px; min-height: 200px; }
.fkb-col.now h5 { color: var(--accent-text, var(--accent)); }
.fkb-card { cursor: grab; padding: 8px 10px; }
.fkb-card .link { font-size: 1em; }
.fkb-x { color: var(--text-3); text-decoration: none; font-size: 1.1em; line-height: 1; }
.fkb-empty { box-sizing: border-box; width: 100%; border: 1px dashed var(--line); border-radius: 8px; padding: 14px 8px; text-align: center; color: var(--text-3); font-size: .8em; }
.fkb-tray { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.fkb-q { margin: 0; min-width: 160px; padding: 4px 9px; }
.fkb-list { display: flex; gap: 6px; flex-wrap: wrap; max-height: 240px; overflow-y: auto; }
.fkb-list .tcard { width: auto; max-width: 240px; }
.fkm-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--scrim, color-mix(in oklab, var(--text) 28%, transparent)); }
.fkm-scrim .fk-fly { z-index: 62; }
.fkm { position: relative; z-index: 61; width: min(420px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px -20px var(--shadow); padding: 18px 20px; }
.fkm h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.4em; }
.fkm .hintline { margin: 0; }
.fkm-ring { width: 170px; aspect-ratio: 1; display: grid; place-items: center; }
.fkm-time { position: relative; z-index: 63; font-family: var(--font-mono); font-weight: 500; font-size: 1.3em; font-variant-numeric: tabular-nums; }
.fkm-did { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.fkm-did span { font-size: .82em; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--text-2); }
.fkm-did .fkm-none { border-style: dashed; color: var(--text-3); }
.fkm-b { justify-content: center; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
html.fokus-page, html.fokus-page body, html.fokus-page #app { height: 100%; overflow: hidden; }
.fkw { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 10px; background: var(--bg); color: var(--text); }
.fkw-ring { width: min(220px, 70vw, 58vh); aspect-ratio: 1; display: grid; place-items: center; }
.fkw .fk-big-c b { font-size: 2em; }
.fkw .fk-c { width: 36px; height: 36px; } .fkw .fk-c.main { width: 46px; height: 46px; }
.fkw-main { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.fkw-vol input { width: 120px; }
/* pulled large: the whole Fokus page — the timer on the left, the board on the right (scrolls on its own) */
.fkw.wide { grid-template-columns: minmax(300px, 1fr) minmax(260px, 420px); place-content: stretch; align-items: center; gap: 28px; padding: 16px 28px; }
.fkw.wide .fkw-main { gap: 14px; }
.fkw.wide .fkw-ring { width: min(320px, 40vw, 48vh); }
.fkw .fk-cov { display: none; }   /* the left column is narrow: the song name gets the room */
.fkw.wide .fk-big-c b { font-size: 2.8em; }
.fkw.wide .fk-c { width: 42px; height: 42px; } .fkw.wide .fk-c.main { width: 56px; height: 56px; }
.fkw-board { align-self: stretch; min-height: 0; overflow-y: auto; padding-block: 8px; }
@media (max-width: 860px) {
  .fks-tone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fks-act { grid-template-columns: minmax(0, 1fr); }
}

/* Einstellungen › Schlüssel (components/SettingsKeys.js) */
.sky-row { grid-template-columns: minmax(0, 1fr) auto; }
.sky-row .tf-t small code { overflow-wrap: anywhere; white-space: normal; }
.sky-miss { color: var(--text-3); }
.sky-acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: .88em; }
.sky-edit { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.sky-edit .inp { flex: 1; min-width: 0; }
.sky-new { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
.sky-ai { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; }
.sky-ai span { display: grid; gap: 2px; }
.sky-ai small { color: var(--text-2); }

/* ── Trinity points at something (components/PointOverlay.js): an outline and her speech bubble ── */
.pt-ring { position: fixed; z-index: 70; pointer-events: none; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent), 0 0 0 100vmax var(--scrim-soft, color-mix(in oklab, var(--text) 16%, transparent)); transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.pt-bub { position: fixed; z-index: 71; width: min(300px, calc(100vw - 24px)); display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 30px var(--shadow); transition: left .3s ease, top .3s ease; }
.pt-bub.side-none { left: 50%; top: 18vh; transform: translateX(-50%); }
.pt-bub::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); }
.pt-bub.side-right::before { left: -7px; top: 18px; transform: rotate(-45deg); }
.pt-bub.side-left::before { right: -7px; top: 18px; transform: rotate(135deg); }
.pt-bub.side-below::before { left: 22px; top: -7px; transform: rotate(45deg); }
.pt-bub.side-none::before { display: none; }
.pt-who { display: flex; align-items: center; gap: 6px; font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text, var(--accent)); font-weight: 700; }
.pt-mark { width: 11px; height: 11px; display: inline-grid; } .pt-mark svg { width: 11px; height: 11px; }
.pt-bub p { margin: 0; font-size: .92em; color: var(--text); line-height: 1.45; }
.pt-nav { display: flex; align-items: center; gap: 10px; font-size: .78em; color: var(--text-3); }
.pt-next { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pt-ring, .pt-bub { transition: none; } }

/* ── Trinity frei (components/FreiView.js): her small window on the desktop, only her face and her words ── */
html.frei-page, html.frei-page body, html.frei-page #app { height: 100%; overflow: hidden; }
.frei { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); cursor: pointer; }
.frei-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.frei-say { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--text); font-size: .86em; line-height: 1.4; box-shadow: 0 8px 20px var(--shadow); }

/* ── Setup v3 (screens/Setup.js, components/setup/*; design entwicklung/design/setup-v3.html) ── */
.s3 { position: relative; }
.s3 .tagv { font-size: .7em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); border: 1px solid var(--accent-mid); border-radius: 999px; padding: 1px 8px; margin-inline-start: 8px; vertical-align: 1px; white-space: nowrap; }
.s3 .badge { font-size: .68em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 1px 8px; white-space: nowrap; border: 1px solid var(--line); color: var(--text-3); }
.s3 .badge.ok { color: var(--accent-text); border-color: var(--accent-mid); }
.s3 .badge.chk { color: var(--k-warn); border-color: var(--k-warn); background: var(--k-warn-soft); }
.s3 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s3 .alts { display: grid; gap: 8px; width: 100%; animation: art-in .4s var(--ease) both; }
/* narrow: the picture or list comes after the title and the text */
:root:not(.wide) .s3 .slide-text { order: -1; }
.s3 .go.s3-go { display: grid; gap: 12px; width: 100%; margin-top: 8px; justify-items: start; }
.s3 .go.s3-go > .choices, .s3 .go.s3-go > .field, .s3 .go.s3-go > .s3-rows, .s3 .go.s3-go > .s3-more { width: 100%; }
.s3-src { color: var(--accent-text); font-weight: 600; font-size: .9em; }
.s3-rows { display: grid; border-top: 1px solid var(--line); width: 100%; }
.s3-rows > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.s3-rows > div > span { color: var(--text-2); font-size: .92em; text-align: end; max-width: 32ch; }
.s3-verdict { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; }
.s3-verdict i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.s3-verdict.yes { border-color: var(--accent-mid); background: var(--accent-soft); color: var(--accent-text); }
.s3-verdict.yes i { background: var(--accent); }
.s3-verdict.warn { border-color: var(--k-warn); background: var(--k-warn-soft); color: var(--k-warn); }
.s3-verdict.warn i { background: var(--k-warn); }
.s3-more { border-top: 1px solid var(--line); padding-top: 10px; }
.s3-more summary { cursor: pointer; font-weight: 600; font-size: .92em; }
.s3-more summary span { color: var(--text-3); font-weight: 500; }
.s3-more .field { margin-top: 10px; }
.s3-more textarea { font: inherit; padding: 11px 13px; border-radius: calc(var(--radius) * .75); border: 1px solid var(--line); background: var(--surface); color: var(--text); resize: vertical; min-height: 120px; font-size: .92em; }
/* the panel that stands where the picture is */
.s3 .ill-wrap.s3-panelwrap { align-items: stretch; }
/* the KI step: a connection opens the editor of Einstellungen › KI over the setup (Setup.js, SettingsAi start) */
.s3-aimodal { position: fixed; z-index: 70; }
.s3-aibox { width: min(720px, 100%); max-height: calc(100dvh - 40px); overflow: auto; text-align: start; }
.s3-panel { width: 100%; max-height: min(560px, 62vh); overflow: auto; display: grid; gap: 10px; align-content: start; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; animation: art-in .4s var(--ease) both; text-align: start; }
.s3-top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.s3-top b { font-family: var(--font-display); font-weight: 500; }
.s3-ck-g { display: grid; gap: 2px; padding-bottom: 8px; }
.s3-ck-g > b { font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 6px 0 4px; }
.s3-ck { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); font-size: .9em; }
.s3-ck-m { font-weight: 700; text-align: center; }
.s3-ck.ok .s3-ck-m { color: var(--accent-text); } .s3-ck.no .s3-ck-m { color: var(--text-3); } .s3-ck.warn .s3-ck-m { color: var(--k-warn); }
.s3-ck-l { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
.s3-ck-d { color: var(--text-2); overflow-wrap: anywhere; }
.s3-ck.no .s3-ck-l, .s3-ck.no .s3-ck-d { color: var(--text-3); }
.s3-row { display: grid; gap: 4px; padding: 7px 0; border-top: 1px solid var(--line); }
/* KI step: further connections as one row of small buttons */
/* the connect step: Firmenkatalog | Community side by side, the form below follows the choice */
.s3 .choices.s3-con { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.s3 .s3-con .choice { padding: 9px 12px; display: flex; align-items: center; gap: 9px; }
/* the state as a dot (its words are in the picture and the label): ok accent, failed warn, else a ring */
.s3-con-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-3); flex: none; }
.s3-con-dot.st-ok { background: var(--accent); border-color: var(--accent); }
.s3-con-on { margin-inline-start: auto; color: var(--accent-text); font-size: .8em; }
.s3-con-dot.st-fail { background: var(--k-warn); border-color: var(--k-warn); }
.s3-con-dot.st-loading { border-color: var(--accent); animation: fade 1s var(--ease) infinite alternate; }
.s3 .s3-conform { width: 100%; }
.s3-conlog { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8em; margin: 0; }
.s3-adds { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-adds .s3-found { margin-inline-start: 6px; }
.s3-row-m { flex: 1 1 200px; min-width: 0; }
.s3-row-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.s3-found { margin-inline-start: 8px; font-size: .78em; color: var(--accent-text); font-weight: 600; }
.s3 .seg.s3-mini button { font-size: .78em; padding: 3px 9px; }
.s3-lvl { font-size: .7em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.s3-lvl.must { color: var(--accent-text); }
/* the AI at work */
.s3-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-inline-end: 8px; vertical-align: 1px; animation: s3-pulse 1.1s ease-in-out infinite; }
.s3-live.end { animation: none; }
@keyframes s3-pulse { 50% { opacity: .25; } }
.s3-kbar { height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.s3-kbar i { display: block; height: 100%; background: var(--accent); transition: width .35s var(--ease); }
.s3-kcount { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82em; color: var(--text-3); }
.s3-kcount b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.s3-klog { display: grid; max-height: 330px; overflow: auto; border-top: 1px solid var(--line); }
.s3-kl { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .84em; animation: art-in .3s var(--ease) both; }
.s3-kk { font: 600 .78em var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.s3-kw { font-family: var(--font-mono); font-size: .92em; overflow-wrap: anywhere; }
.s3-kd { color: var(--text-2); overflow-wrap: anywhere; }
.s3-kl.k-find .s3-kk, .s3-kl.k-area .s3-kk, .s3-kl.k-desc .s3-kk { color: var(--accent-text); }
.s3-kl.k-ask .s3-kk, .s3-kl.k-std .s3-kk { color: var(--k-warn); }
.s3-kl.k-wait .s3-kk { animation: s3-pulse 1s ease-in-out infinite; }
/* linking */
.s3-lk-g { display: grid; padding-bottom: 6px; }
.s3-lk-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.s3-lk-h b { font-family: var(--font-display); font-weight: 500; }
.s3-lk-h span { font-size: .8em; color: var(--text-3); }
.s3-lk { display: grid; grid-template-columns: 10px minmax(110px, .8fr) minmax(0, 1.6fr) auto; gap: 4px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88em; }
/* the puzzles without files: one line, a chip each (it opens „Ändern“) */
.s3-lk-miss { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88em; }
.s3-lk-miss small { color: var(--text-3); font-size: .9em; margin-inline-end: 4px; }
.s3-lk-miss .chip { font-size: .92em; }
.s3-lk-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; border: 1.5px solid var(--text-3); }
.s3-lk.ok .s3-lk-dot { background: var(--accent); border-color: var(--accent); }
.s3-lk.chk .s3-lk-dot { background: var(--k-warn); border-color: var(--k-warn); }
.s3-lk-n { display: grid; }
.s3-lk-n small { font-size: .82em; color: var(--text-3); }
.s3-lk.ok .s3-lk-n small { color: var(--accent-text); } .s3-lk.chk .s3-lk-n small { color: var(--k-warn); }
.s3-lk-f { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.s3-path { font-family: var(--font-mono); font-size: .86em; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); overflow-wrap: anywhere; }
.s3-lk-why { font-size: .9em; color: var(--text-2); width: 100%; }
.s3-lk-edit { grid-column: 2 / -1; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: center; padding-top: 6px; }
.s3-lk-edit label { font-size: .86em; color: var(--text-3); }
.s3-lk-edit input, .s3-add select, .s3-loose select { font: .86em var(--font-mono); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--surface); color: var(--text); min-width: 0; }
.s3-lk-edit .btn { grid-column: 2; justify-self: start; }
.s3-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.s3-add select { font-family: var(--font-body); }
.s3-loose { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; font-size: .88em; }
.s3-loose-r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* areas, offers */
.s3-areas-top { display: flex; gap: 10px; align-items: end; }
.s3-areas-top .field { flex: 1; min-width: 0; }
/* a domain (software, media, …) and its groups, each group a list that is open */
.s3-dom { display: grid; gap: 4px; }
.s3-dom-h { margin: 8px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1em; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.s3-ag { display: grid; gap: 6px; }
.s3-ag > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; font-size: .74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 4px 0; }
.s3-ag > summary:hover { color: var(--text-2); }
.s3-ag[open] > summary { padding-bottom: 2px; }
.s3-ag-n { margin-inline-start: auto; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--accent-text); }
.s3-ag .chips { padding: 0; gap: 6px; }
.s3-ag .chip { padding-block: 4px; font-size: .86em; }
.s3-ag .chip small { margin-inline-start: 4px; }
.s3-of { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88em; }
.s3-of .chip { justify-self: start; }
.s3-of .chip[aria-disabled="true"] { cursor: default; }
.s3-of-d { color: var(--text-2); font-size: .92em; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .s3-lk { grid-template-columns: 10px minmax(0, 1fr) auto; } .s3-lk-f { grid-column: 2 / -1; }
  .s3-of { grid-template-columns: minmax(0, 1fr) auto; } .s3-of-d { grid-column: 1 / -1; }
  .s3-kl { grid-template-columns: 5em minmax(0, 1fr); } .s3-kd { grid-column: 2; }
}
/* the pictures' extra moves */
.art .s3-scan { animation: s3-scan 2.2s cubic-bezier(.45, 0, .25, 1) .4s 2 both; }
@keyframes s3-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { transform: translateY(160px); opacity: 0; } }
.art .s3-draw { stroke-dasharray: 220; stroke-dashoffset: 220; animation: art-draw 1.6s cubic-bezier(.45, 0, .25, 1) forwards; animation-delay: calc(var(--d) * 1s); }
.art .s3-glow { animation: s3-glow 1.2s var(--ease) forwards; animation-delay: calc(var(--d) * 1s); }
@keyframes s3-glow { to { stroke: var(--accent); fill: var(--accent-soft); } }
.art .s3-gap { fill: none; stroke: var(--line); stroke-dasharray: 4 4; }
.art .s3-dim { opacity: .45; }

/* the intro: a blueprint pyramid is scanned, the gaps drop in, everything takes Trinity's colours */
.s3i { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--bg); transition: opacity .45s var(--ease), visibility .45s; overflow: hidden; }
.s3i.out { opacity: 0; visibility: hidden; }
.s3i-in { display: grid; justify-items: center; text-align: center; padding: 24px; }
.s3i-skip { position: absolute; top: 18px; inset-inline-end: 22px; animation: s3i-fade .4s var(--ease) .6s both; }
/* the picture (4:3) gives way to the height: below it the word, the phases and „Setup starten“ (~260px) and the
   bars above and below the screen (~160px) must fit, so the button is in view at 100 % on a laptop */
.s3i svg { width: min(520px, 76vw, max(220px, (100vh - 440px) * 4 / 3)); height: auto; overflow: visible; }
.s3i-stop { stop-color: white; } .s3i-stop0 { stop-color: white; stop-opacity: 0; }
.s3i-grid path { stroke: var(--line); stroke-width: .8; fill: none; }
.s3i-grid { animation: s3i-fade .8s var(--ease) both; }
.s3i-bracket { stroke: var(--text-3); stroke-width: 1.2; fill: none; animation: s3i-fade .5s var(--ease) .2s both; }
.s3i-wire { fill: none; stroke: var(--text-3); stroke-width: .9; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: art-draw 1s cubic-bezier(.45, 0, .25, 1) var(--w) forwards; transition: stroke .6s var(--ease); }
.s3i.done .s3i-wire { stroke: var(--bg); stroke-width: 1.2; }
.s3i-have polygon { fill: var(--surface-2); opacity: 0; animation: s3i-mat .45s var(--ease) var(--m) forwards; }
.s3i-have .f-l { fill: var(--line); } .s3i-have .f-r { fill: var(--text-3); }
@keyframes s3i-mat { to { opacity: 1; } }
.s3i-gap { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-dasharray: 3 3; opacity: 0; animation: s3i-gapon .3s var(--ease) var(--m) forwards, s3i-wait 1s ease-in-out calc(var(--m) + .3s) 3 alternate, s3i-gapoff .15s linear var(--g) forwards; }
@keyframes s3i-gapon { to { opacity: .9; } }
@keyframes s3i-wait { from { opacity: .9; } to { opacity: .35; } }
@keyframes s3i-gapoff { to { opacity: 0; } }
.s3i-drop { opacity: 0; animation: s3i-drop .55s cubic-bezier(.3, 1.4, .5, 1) var(--g) forwards; }
.s3i-drop polygon { fill: var(--accent); }
.s3i-drop .f-l, .s3i-drop .f-r { fill: var(--accent-hover); }
@keyframes s3i-drop { 0% { opacity: 0; transform: translateY(-120px); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.s3i polygon { transition: fill .8s var(--ease); }
.s3i.done .f-l { fill: var(--accent); } .s3i.done .f-r { fill: var(--logo-mid); } .s3i.done .f-t { fill: var(--logo-base); }
.s3i-scan { animation: s3i-rise 1.4s cubic-bezier(.45, 0, .25, 1) 1.2s both; }
.s3i-scan polygon { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.s3i-scan text { font: 600 9px var(--font-mono); fill: var(--accent-text); letter-spacing: .08em; }
@keyframes s3i-rise { 0% { transform: translateY(30px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(-190px); opacity: 0; } }
.s3i-word { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6em, min(8vw, 11vh), 6.4em); line-height: 1; letter-spacing: -.03em; display: flex; margin-top: 6px; color: var(--text); }
.s3i-word span { display: inline-block; animation: s3i-up .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(4.25s + var(--i) * .06s); }
@keyframes s3i-up { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
.s3i-phases { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 16px; font: 500 .8em var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.s3i-ph { display: flex; gap: 8px; align-items: baseline; color: var(--text-3); animation: s3i-on .3s var(--ease) var(--a) forwards; }
.s3i-ph i { font-style: normal; color: var(--text-3); }
.s3i-ph b { font-weight: 600; color: var(--accent-text); opacity: 0; animation: s3i-fade .3s var(--ease) var(--z) forwards; }
@keyframes s3i-on { to { color: var(--text); } }
.s3i-go { margin-top: 22px; animation: s3i-fade .6s var(--ease) 4.8s both; }
@keyframes s3i-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* voice: the chat's voice mode with a swarm instead of the face */
.s3v { position: relative; height: 100%; min-height: 480px; width: 100%; overflow: hidden; }
.s3v-swarm { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.s3v-top { position: absolute; top: 18px; left: 0; right: 0; display: grid; gap: 4px; justify-items: center; text-align: center; padding-inline: 16px; }
.s3v-top b { font-family: var(--font-display); font-weight: 400; font-size: 1.15em; color: var(--text-2); }
.s3v .s3v-panel { bottom: 22px; }
.s3v-said { font-size: 1.12em; color: var(--text); }
.s3v-doing { margin: 0; font: .82em var(--font-mono); color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .s3i *, .s3i-ph, .s3i-ph b, .s3i-word span { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .s3-live, .s3-kl.k-wait .s3-kk { animation: none; }
}

/* ── Teilen (K2, components/PlatformShare.js; design entwicklung/design/teilen-v3.html) ─────────────────────── */
.pfs-menu { position: relative; }
.pfs-drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 260px; display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px var(--shadow); }
.pfs-drop button { font: inherit; color: inherit; text-align: start; background: none; border: 0; border-radius: 8px; padding: 9px 10px; display: grid; gap: 2px; cursor: pointer; }
.pfs-drop button:hover, .pfs-drop button:focus-visible { background: var(--surface-2); }
.pfs-drop b { font-weight: 600; }
.pfs-drop small { color: var(--text-3); }
.pfs { display: grid; gap: 22px; padding: 24px 28px 0; min-width: 0; }
.pfs-head { display: grid; gap: 6px; justify-items: start; }
.pfs-head .h { margin: 0; }
.pfs-mode { margin-top: 6px; min-width: 260px; }
.pfs-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; }
.pfs-fields { display: grid; gap: 14px; min-width: 0; }
.pfs-fields .field input { width: 100%; box-sizing: border-box; }
.pfs-paths { margin: 0; color: var(--text-3); font-size: .86em; }
.pfs-live { display: grid; gap: 8px; }
.pfs-suite { cursor: default; border-color: var(--accent); }
.pfs-kinds { color: var(--text-2); }
.pfs-area { display: grid; gap: 16px; }
.pfs-area-h { margin: 0; font-size: .76em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pfs-card small { color: var(--text-2); }
.pfs-card .pfs-path { color: var(--text-3); font-size: .74em; overflow-wrap: anywhere; }
.pfs-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pfs-card.off { opacity: .6; cursor: not-allowed; }
.pfs-along { color: var(--accent-text) !important; font-size: .8em; }
.pfs-hint { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pfs-results { display: grid; gap: 6px; }
.pfs-result { display: flex; gap: 12px; flex-wrap: wrap; font-size: .93em; }
.pfs-result span { color: var(--accent-text); }
.pfs-result.bad span { color: var(--text-2); }
.pfs-foot { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 0 16px; background: var(--bg); border-top: 1px solid var(--line); }
.pfs-foot span { margin-right: auto; color: var(--text-2); font-size: .93em; }
@media (max-width: 860px) { .pfs { padding: 18px 16px 0; } .pfs-form { grid-template-columns: 1fr; } .pfs-mode { min-width: 0; width: 100%; } }

/* Einstellungen › Start (components/SettingsStart.js): the folder, the workbenches it starts */
.stt-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .92em; color: var(--text-2); }
.stt-line input { font: inherit; padding: 7px 10px; border-radius: calc(var(--radius) * .6); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.stt-line input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stt-path { flex: 1 1 260px; min-width: 0; font-family: var(--font-mono); font-size: .9em; }
.stt-num { width: 4.5em; }
.stt-list { display: grid; border: 1px solid var(--line); border-radius: calc(var(--radius) * .8); overflow: hidden; }
.stt-list > .note { margin: 0; padding: 10px 12px; }
.stt-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface); font-size: .92em; }
.stt-row:first-child { border-top: 0; }
.stt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.stt-row.on .stt-dot { background: var(--accent); }
.stt-row.ex { opacity: .6; }
.stt-p { font-family: var(--font-mono); font-size: .88em; min-width: 0; overflow-wrap: anywhere; background: none; padding: 0; }
.stt-row small { color: var(--text-3); white-space: nowrap; }
@media (max-width: 640px) { .stt-row { grid-template-columns: 8px minmax(0, 1fr) auto; } .stt-row small { grid-column: 2 / -1; grid-row: 2; } }

/* Willkommen: the one question whether to start with the folder (components/StartAsk.js) */
.stt-ask { display: grid; gap: 10px; width: 100%; max-width: 520px; padding: 14px 16px; border: 1px solid var(--accent-mid); border-radius: var(--radius); background: var(--accent-soft); text-align: start; }
.stt-ask b { font-family: var(--font-display); font-weight: 500; }
.stt-ask p { margin: 0; font-size: .92em; color: var(--text-2); }
.stt-ask .stt-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Einstellungen › <Puzzle> › Ordner (components/FolderSection.js) ── */
.fo-line { display: flex; gap: 8px 12px; align-items: baseline; flex-wrap: wrap; }
.fo-from { text-decoration: line-through; }
.fo-paths { display: flex; gap: 6px; flex-wrap: wrap; }
.fo-path { display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: .86em; padding: 2px 4px 2px 9px; border-radius: 7px; background: var(--surface-2); overflow-wrap: anywhere; }
.fo-path small { font-family: var(--font-body); color: var(--text-3); }
.fo-path.none { color: var(--text-3); }
.fo-path.plain { padding-inline-end: 9px; }
.fo-path .x { font: inherit; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0 4px; }
.fo-path .x:hover { color: var(--text); }
.fo-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.fo-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fo-warn { margin: 0; font-size: .88em; color: var(--k-warn); padding-inline-start: 10px; border-inline-start: 2px solid var(--k-warn); }
@media (max-width: 640px) { .fo .choices.two { grid-template-columns: minmax(0, 1fr); } }

/* ── Übernehmen (K4, components/PlatformTake.js) ────────────────────────────────────────────────────────────── */
.pft-cta { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.pft-have { font-size: .9em; color: var(--accent-text); font-weight: 600; }
.pft-part { cursor: default; gap: 6px; }
.pft-part.off { opacity: .6; }
.pft-act { margin-top: 4px; }
.pft-why { color: var(--text-3) !important; font-size: .82em; }
.pft-target { gap: 4px; }
.pft-target span { font-size: .8em; color: var(--text-3); font-weight: 600; }
.pft-target input { font-size: .82em; padding: 7px 9px; width: 100%; box-sizing: border-box; }
.pft-ok { margin: 0; color: var(--accent-text); font-weight: 600; }
.pft-list { margin: 0; padding-left: 18px; font-size: .86em; color: var(--text-2); }
.pft-msg { font-size: .8em; color: var(--text-3) !important; overflow-wrap: anywhere; }
.pfd-parts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pfd-parts li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: .93em; }
.pfd-parts b { font-weight: 600; min-width: 90px; }
.pfd-parts .mono { color: var(--text-3); font-size: .82em; }
/* trinity-internal › Chat: what PlatformChat.js adds to a conversation — an attached shared item, the picker for it,
   the project's news as quiet lines, the name as a link to the profile */
.pch-name { font-weight: 600; color: var(--text); padding: 0; font-size: 1em; }
.pch-att { margin-top: 6px; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 6px; text-align: start; cursor: pointer; font: inherit; color: inherit; max-width: 440px; }
.pch-att:hover { border-color: var(--text-3); }
.pch-att-pic { width: 74px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: block; }
.pch-att-pic img, .pch-att-pic video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pch-att > span:last-child { display: grid; min-width: 0; }
.pch-att em { font-style: normal; font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pch-att small { color: var(--text-3); font-size: .8em; }
.pch-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .84em; color: var(--text-2); }
.pch-ev i { justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pch-ev b { font-weight: 600; color: var(--text); }
.pch-ev small { color: var(--text-3); }
.pch-compose { border-top: 1px solid var(--line); padding: 12px 16px; display: grid; gap: 8px; }
.pch-row { display: flex; gap: 8px; align-items: center; }
.pch-row .inp { flex: 1; min-width: 0; }
.pch-chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .86em; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 4px 6px 4px 10px; }
.pch-pick { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.pch-pick-it { font: inherit; text-align: start; background: none; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--text); display: flex; gap: 10px; align-items: baseline; }
.pch-pick-it:hover { background: var(--surface-2); }
.pch-pick-it em { font-style: normal; font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); min-width: 80px; }
.pw-av[class*="pfx-k"] { background: color-mix(in oklab, var(--ca) 30%, var(--surface)); color: var(--text); }
@media (max-width: 860px) {
  .pchs { grid-template-columns: minmax(0, 1fr); }
  .pchs.open .pchs-list { display: none; }
  .pchs:not(.open) .pchs-chat { display: none; }
  .pchs-back { display: inline; }
  .pch { max-height: 70vh; }
}
/* trinity-internal › Zugang und Freigabe (components/PlatformAccess.js), the button on a project, locked cards */
.pac-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-2); }
.pac-btn svg, .pac-locked svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.pac-msg { color: var(--text-2); font-size: .9em; }
.pac-locked { cursor: default; border-style: dashed; }
.pac-locked .pf-flag { display: inline-flex; align-items: center; gap: 4px; }
.pac-locked .pf-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pac { width: min(720px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); padding: 18px 24px 22px; display: grid; box-shadow: 0 24px 60px var(--shadow); }
.pac-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 6px; }
.pac-head .h { margin: 2px 0 0; }
.pac-head .p { margin: 4px 0 0; }
.pac .pfi-x { position: static; flex: none; }
.pac-sec { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pac-sec:last-child { border-bottom: 0; }
.pac-sec h4 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 400; font-size: 1.08em; }
.pac-sec h4 small { color: var(--text-3); font-family: var(--font-body); font-size: .76em; margin-inline-start: 4px; }
.pac-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.pac-opt.on { background: var(--surface-2); }
.pac-opt input { margin-top: 4px; accent-color: var(--accent); }
.pac-opt > span { display: grid; gap: 2px; }
.pac-opt small { color: var(--text-3); font-size: .86em; }
.pac-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pac-groups .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
/* D: Gewerke and own groups as a list — name, how many, Gewerk / Eigene Gruppe */
.pac-glist { display: grid; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pac-grow { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-size: .93em; text-align: start; cursor: pointer; }
.pac-grow:last-of-type { border-bottom: 0; }
.pac-grow:disabled { cursor: default; }
.pac-grow b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pac-grow small { color: var(--text-3); font-size: .86em; }
.pac-grow em { font-style: normal; font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pac-gbox { width: 14px; height: 14px; border: 1.5px solid var(--text-3); border-radius: 4px; display: grid; place-items: center; }
.pac-grow[aria-pressed="true"] .pac-gbox { background: var(--accent); border-color: var(--accent); }
.pac-grow[aria-pressed="true"] .pac-gbox::after { content: "✓"; color: var(--on-accent); font-size: 10px; line-height: 1; font-style: normal; }
.pac-mem { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: .93em; }
.pac-mem > span:nth-child(2) { display: grid; min-width: 0; }
.pac-mem small { color: var(--text-3); font-size: .84em; }
.pac-you { margin-inline-start: 8px; color: var(--accent-text) !important; }
.pac-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: .7em; font-weight: 700; }
.pac-acts { display: flex; gap: 6px; align-items: center; }
.pac-role { padding: 4px 8px; font-size: .86em; }
.pac-rolechip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .84em; color: var(--text-2); white-space: nowrap; }
.pac-x { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-3); cursor: pointer; font: inherit; font-size: .82em; }
.pac-x:hover:not(:disabled) { color: var(--text); border-color: var(--text-3); }
.pac-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pac-add .inp:first-child { flex: 1; min-width: 180px; }
.pac-roles { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 10px 0 0; font-size: .84em; }
.pac-roles dt { font-weight: 600; }
.pac-roles dd { margin: 0; color: var(--text-2); }
.pac-leave { justify-self: start; font-size: .86em; }
.pac-grant { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .93em; }
.pac-grant:last-of-type { border-bottom: 0; }
.pac-grant em { font-style: normal; font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-inline-end: 8px; }
.pac-grant .inp { padding: 4px 8px; font-size: .86em; width: auto; }
.pac-note { margin: 4px 0 0; color: var(--text-3); font-size: .84em; }
@media (max-width: 600px) { .pac { max-height: 100vh; border-radius: 0; padding: 16px; } .pac-mem { grid-template-columns: 32px minmax(0, 1fr); } .pac-mem .pac-acts { grid-column: 2; } }
.cn-group { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cn-group .cn-row .inp { flex: 1; }
.cn-backups { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .9em; }
.cn-backups li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.cn-backups small { color: var(--text-3); }
.cn-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
/* trinity-internal › Suiten (components/PlatformSuites.js): the most taken one large, all as cards with a collage */
.psu { display: grid; gap: 24px; max-width: 1100px; }
.psu-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.psu-h .h { margin: 0; }
.psu-h .p { margin: 2px 0 0; }
.psu-col { font: inherit; padding: 0; border: 0; cursor: pointer; display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 3px; background: var(--line); overflow: hidden; min-height: 0; }
.psu-tile { display: grid; place-items: center; min-height: 0; overflow: hidden; background: var(--surface-2); color: var(--text-3); font-family: var(--font-display); font-size: 1em; }
.psu-tile:first-child { grid-row: span 2; }
.psu-col .psu-tile:only-child { grid-column: 1 / -1; }
.psu-tile img, .psu-tile video { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.psu-feat { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.psu-feat .psu-col { min-height: 300px; }
.psu-info { padding: 24px; display: grid; gap: 12px; align-content: start; }
.psu-badge { justify-self: start; font-size: .68em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; }
.psu-info h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.7em; }
.psu-info p { margin: 0; color: var(--text-2); }
.psu-parts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .93em; }
.psu-parts li { display: flex; gap: 10px; align-items: baseline; }
.psu-parts em { font-style: normal; font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); min-width: 92px; }
.psu-meta { display: flex; gap: 4px 14px; flex-wrap: wrap; color: var(--text-3); font-size: .86em; }
.psu-meta b { color: var(--accent-text); }
.psu-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.psu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.psu-card { font: inherit; color: inherit; text-align: start; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); display: grid; grid-template-rows: 150px auto; cursor: pointer; transition: transform var(--m-dur, .2s) var(--ease), border-color var(--m-dur, .2s) var(--ease); }
.psu-card:hover { transform: translateY(-2px); border-color: var(--text-3); }
.psu-card .psu-col { cursor: inherit; }
.psu-b { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.psu-b b { font-family: var(--font-display); font-weight: 500; font-size: 1.1em; }
.psu-b small { color: var(--text-2); font-size: .88em; }
.psu-kinds { display: flex; gap: 5px; flex-wrap: wrap; }
.psu-kinds span { font-size: .76em; background: var(--surface-2); border-radius: 6px; padding: 1px 7px; color: var(--text-2); }
.psu-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .8em; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.psu-foot b { color: var(--accent-text); }
@media (max-width: 860px) { .psu-feat { grid-template-columns: minmax(0, 1fr); } .psu-feat .psu-col { min-height: 200px; } }
/* trinity-internal › Personen (components/PlatformPersons.js, PlatformPerson.js): faces, profile cards, a profile */
.ppl { display: grid; gap: 22px; max-width: 1100px; }
.ppl-h .h { margin: 0; }
.ppl-av { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--ca, var(--text-3)) 30%, var(--surface)); color: var(--text); font-family: var(--font-display); font-weight: 500; font-size: .85em; }
.ppl-av.sm { width: 34px; height: 34px; font-size: .74em; }
.ppl-av.sq { border-radius: 9px; }
.ppl-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.ppl-dot.busy { background: var(--text-2); }
.ppl-here { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 2px; }
.ppl-face { font: inherit; color: var(--text-2); background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 5px; width: 72px; flex: none; font-size: .8em; text-align: center; }
.ppl-face small { color: var(--text-3); font-size: .86em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72px; }
.ppl-ring { padding: 3px; border-radius: 50%; border: 2px solid var(--accent); }
.ppl-ring.busy { border-color: var(--text-2); }
.ppl-ring .ppl-av { width: 56px; height: 56px; font-size: 1.05em; }
.ppl-face:hover .ppl-av { filter: brightness(1.06); }
.ppl-optin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; font-size: .92em; color: var(--text-2); }
.ppl-optin > span:nth-child(2) { flex: 1; min-width: 200px; }
.ppl-optin-f { display: grid; gap: 6px; width: 100%; }
.ppl-optin-f label { font-weight: 600; color: var(--text); font-size: .92em; }
.ppl-optin-f label small { font-weight: 400; color: var(--text-3); }
.ppl-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.ppl-note { margin: 0; color: var(--text-3); font-size: .84em; }
.ppl-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); font-size: .93em; overflow-x: auto; }
.ppl-tabs button { font: inherit; background: none; border: 0; padding: 0 0 10px; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.ppl-tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
.ppl-tabs small { color: var(--text-3); font-weight: 400; margin-inline-start: 5px; }
.ppl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ppl-card { font: inherit; color: inherit; text-align: center; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; display: grid; grid-template-rows: 72px auto; cursor: pointer; transition: transform var(--m-dur, .2s) var(--ease), border-color var(--m-dur, .2s) var(--ease); }
.ppl-card:hover { transform: translateY(-2px); border-color: var(--text-3); }
.ppl-band { display: block; }
.ppl-body { padding: 0 16px 16px; display: grid; justify-items: center; gap: 3px; }
.ppl-card .ppl-av { width: 64px; height: 64px; margin-top: -32px; border: 3px solid var(--surface); font-size: 1.1em; }
.ppl-card b { font-family: var(--font-display); font-weight: 500; font-size: 1.05em; margin-top: 4px; }
.ppl-where { color: var(--text-3); font-size: .82em; }
.ppl-mini { display: flex; gap: 6px; justify-content: center; margin: 6px 0 2px; min-height: 32px; }
.ppl-mini img, .ppl-mini video { width: 46px; height: 32px; border-radius: 6px; object-fit: cover; object-position: top; border: 1px solid var(--line); background: var(--surface-2); }
.ppl-n { font-size: .8em; color: var(--text-2); }
.ppl-n b { font-family: var(--font-body); font-size: 1em; font-weight: 700; margin: 0; }
/* one profile */
.ppr { display: grid; max-width: 1100px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.ppr-hero { height: 190px; }
.ppr-msg { padding: 20px 28px; margin: 0; }
.ppr-head { padding: 0 28px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: end; position: relative; }
.ppr-av { width: 116px; height: 116px; margin-top: -58px; border: 5px solid var(--surface); font-size: 2.2em; }
.ppr-av .ppl-dot { width: 20px; height: 20px; right: 6px; bottom: 6px; border-width: 3px; }
.ppr-t { padding-top: 14px; min-width: 0; }
.ppr-t h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2em; line-height: 1.1; }
.ppr-sub { display: flex; gap: 4px 12px; flex-wrap: wrap; color: var(--text-3); font-size: .9em; margin-top: 4px; }
.ppr-live { color: var(--accent-text); display: inline-flex; align-items: center; gap: 6px; }
.ppr-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ppr-live.busy { color: var(--text-2); }
.ppr-live.busy i { background: var(--text-2); }
.ppr-bio { margin: 8px 0 0; color: var(--text); max-width: 640px; }
.ppr-acts { padding-bottom: 6px; display: flex; gap: 8px; }
.ppr-edit { margin: 16px 28px 0; }
.ppr-pad { padding: 10px 28px 0; }
.ppr-counts { padding: 16px 28px 0; display: flex; gap: 26px; flex-wrap: wrap; font-size: .93em; color: var(--text-2); }
.ppr-counts b { color: var(--text); font-weight: 700; margin-inline-end: 5px; }
.ppr-cares { padding: 10px 28px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .86em; color: var(--text-3); }
.ppr-cares span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--text-2); }
/* D: the Gewerke under the name; picking them while editing one's profile */
.ppr-trades { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: .84em; }
.ppr-trades span { border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--text-2); }
.ppr-flabel { font-size: .86em; font-weight: 600; margin-top: 6px; }
.ppr-flabel small { font-weight: 400; color: var(--text-3); }
.ppr-git { resize: vertical; font-size: .86em; }   /* J: Meine Git-Adressen, one per line */
.ppr-tabs { margin: 22px 28px 0; }
.ppr-body { padding: 20px 28px 32px; display: grid; gap: 14px; }
.ppr-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ppr-work { font: inherit; color: inherit; text-align: start; background: none; border: 0; padding: 0; cursor: pointer; display: grid; gap: 7px; }
.ppr-pic { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; transition: transform var(--m-dur, .2s) var(--ease); }
.ppr-work:hover .ppr-pic { transform: translateY(-2px); }
.ppr-pic img, .ppr-pic video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ppr-pic.none span { font-family: var(--font-display); font-size: 1.6em; color: var(--text-3); }
.ppr-play { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72em; color: var(--text); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ppr-ov { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--text); font-weight: 600; font-size: .88em; opacity: 0; transition: opacity var(--m-dur, .2s) var(--ease); }
.ppr-work:hover .ppr-ov, .ppr-work:focus-visible .ppr-ov { opacity: 1; }
.ppr-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ppr-row b { font-weight: 600; }
.ppr-took { color: var(--accent-text); font-weight: 600; font-size: .82em; }
.ppr-work small { color: var(--text-3); font-size: .8em; }
.ppr-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ppr-proj { font: inherit; color: inherit; text-align: start; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px 12px; cursor: pointer; }
.ppr-proj:hover { border-color: var(--text-3); }
.ppr-proj small { display: block; color: var(--text-3); font-size: .8em; }
@media (max-width: 900px) { .ppr-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ppr-head { grid-template-columns: auto minmax(0, 1fr); padding: 0 16px; }
  .ppr-av { width: 88px; height: 88px; margin-top: -44px; font-size: 1.7em; }
  .ppr-acts { grid-column: 1 / -1; }
  .ppr-counts, .ppr-cares, .ppr-body, .ppr-pad { padding-left: 16px; padding-right: 16px; }
  .ppr-tabs, .ppr-edit { margin-left: 16px; margin-right: 16px; }
  .ppr-works { grid-template-columns: minmax(0, 1fr); }
}
/* trinity-internal › Start (components/PlatformStart.js): Zur Prüfung, Für dein Projekt, In der Firma */
.pst-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 6px; margin-inline-start: 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72em; font-weight: 700; vertical-align: 1px; }
.pf-nav .pst-count { float: inline-end; margin-top: 1px; }
.pst { max-width: 820px; gap: 26px; }
.pst-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pst-head .h { margin: 0; }
.pst-head .p { margin: 2px 0 0; }
.pst-live { display: inline-flex; align-items: center; gap: 7px; font-size: .82em; color: var(--text-3); }
.pst-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.pst-live.on i { background: var(--accent); }
.pst-blk { display: grid; gap: 10px; }
.pst-blk-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pst-blk-h h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.15em; display: flex; align-items: center; }
.pst-blk-h small, .pst-note { color: var(--text-3); font-size: .84em; margin: 0; }
.pst-sub { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; display: grid; gap: 8px; }
.pst-k { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pst-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pst-t b { font-family: var(--font-display); font-weight: 500; font-size: 1.12em; }
.pst-t small { color: var(--text-3); font-size: .84em; }
.pst-p { margin: 0; color: var(--text-2); font-size: .93em; }
.pst-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85em; color: var(--text-2); }
.pst-av { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: .64em; font-weight: 700; }
.pst-av.sq { border-radius: 7px; }
.pst-by .pst-av { width: 22px; height: 22px; }
.pst-chg { margin: 0; padding: 8px 0 0; list-style: none; display: grid; gap: 2px; font-size: .78em; color: var(--text-2); border-top: 1px dashed var(--line); }
.pst-chg li { display: flex; justify-content: space-between; gap: 12px; }
.pst-chg li span:first-child { overflow-wrap: anywhere; }
.pst-chg li.added span:first-child { color: var(--accent-text); }
.pst-chg li.removed span:first-child { color: var(--text-3); text-decoration: line-through; }
.pst-chg i { font-style: normal; }
.pst-chg i.a { color: var(--accent-text); }
.pst-chg i.d { color: var(--text-3); }
.pst-chg li.more { color: var(--text-3); }
.pst-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pst-acts .link { margin-inline-start: auto; font-size: .86em; }
/* G: an update file by file (PlatformTake) and „Update auf vN“ on the Brain cards (PlatformUpdateHint) */
.pft-files { display: grid; gap: 0; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.pft-fh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .9em; }
.pft-fh small { color: var(--text-3); }
.pft-f { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: .88em; }
.pft-fs { font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pft-f.new .pft-fs { color: var(--accent-text); }
.pft-f.gone .pft-fs { color: var(--k-bad); }
.pft-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pft-f .seg button { padding: 3px 10px; font-size: .9em; }
.pft-fd { color: var(--text-3); font-size: .86em; }
.pft-files > .pft-fd { padding: 8px 12px; }
.pft-fw { grid-column: 2 / -1; }
.pft-mx { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pft-mxh { display: flex; gap: 8px; align-items: center; font-size: .9em; }
.pft-legend { color: var(--text-3); font-size: .84em; }
.pft-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-inline-end: 5px; vertical-align: baseline; }
.pft-legend i.new, .pft-diff .new { background: var(--accent-soft); }
.pft-legend i.mine, .pft-diff .mine { background: color-mix(in oklab, var(--wire-1) 14%, transparent); }
.pft-diff { margin: 0; padding: 8px 0; max-height: 320px; overflow: auto; font-size: .78em; line-height: 1.55; white-space: pre; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.pft-diff span { display: block; padding: 0 10px; min-height: 1.55em; }
.pft-diff span i { font-style: normal; color: var(--text-3); display: inline-block; width: 1.4em; }
.pft-diff .new { color: var(--accent-text); }
.pft-diff .mine { color: var(--wire-1); }
.pft-mxe { font-size: .8em; resize: vertical; }
.pft-mxf { display: flex; gap: 8px; justify-content: flex-end; }
.pud { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; font-size: .82em; color: var(--text-3); }
.pud-from { font-size: .86em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pud-go { color: var(--accent-text); font-weight: 600; cursor: pointer; border-radius: 4px; }
.pud-go:hover, .pud-go:focus-visible { text-decoration: underline; outline: none; }
@media (max-width: 600px) { .pft-f { grid-template-columns: minmax(0, 1fr); } .pft-fw { grid-column: 1; } }
.pst-why { display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 10px; }
.pst-why label { font-size: .86em; font-weight: 600; }
.pst-why label small { font-weight: 400; color: var(--text-3); }
.pst-why textarea { font: inherit; font-size: .93em; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; resize: vertical; }
.pst-row { display: flex; gap: 8px; justify-content: flex-end; }
.pst-diff { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); max-height: 360px; overflow: auto; }
.pst-diff .p { margin: 10px 12px; }
.pst-diff pre { margin: 0; padding: 10px 0; font-size: .76em; line-height: 1.55; white-space: pre; }
.pst-diff pre span { display: block; padding: 0 12px; min-height: 1.55em; }
.pst-diff .add { background: var(--accent-soft); color: var(--accent-text); }
.pst-diff .del { color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent); }
.pst-diff .hd { color: var(--text-3); }
.pst-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; }
.pst-row-i { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .92em; }
.pst-row-i:last-child { border-bottom: 0; }
.pst-row-i p { margin: 0; color: var(--text-2); }
.pst-row-i p b { color: var(--text); font-weight: 600; }
.pst-row-i small { display: block; color: var(--text-3); font-size: .86em; }
.pst-ic { text-align: center; color: var(--text-3); font-weight: 700; }
.pst-ic.up, .pst-ic.accepted { color: var(--accent-text); }
.pst-quote { display: block; margin-top: 4px; padding-inline-start: 8px; border-inline-start: 2px solid var(--line); color: var(--text-2); font-size: .92em; }
.pst-feed { margin: 0; padding: 0; list-style: none; display: grid; }
.pst-feed li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92em; transition: box-shadow 1s var(--ease); }
.pst-feed li:last-child { border-bottom: 0; }
.pst-feed li.fresh { box-shadow: inset 2px 0 0 var(--accent); padding-inline-start: 10px; }
.pst-feed p { margin: 0; color: var(--text-2); }
.pst-feed small { color: var(--text-3); white-space: nowrap; font-size: .84em; }
.pst-what { font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-inline-end: 8px; }
.pst-name { font-weight: 600; color: var(--text); }
.pst-older { justify-self: start; }
@media (max-width: 760px) {
  .pst-feed li { grid-template-columns: 30px minmax(0, 1fr); }
  .pst-feed small { grid-column: 2; }
  .pst-row-i { grid-template-columns: 22px minmax(0, 1fr); }
  .pst-row-i .btn { grid-column: 2; justify-self: start; }
  .pst-acts .link { margin-inline-start: 0; }
}
/* trinity-internal › one item in the overlay (A1, components/PlatformItem.js): media left, what it is right */
.pfi-veil { position: fixed; inset: 0; z-index: 40; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; animation: fade .25s var(--ease) both; }
.pfi { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); overflow: hidden; box-shadow: 0 24px 60px var(--shadow); }
.pfi.bare { width: min(620px, 100%); grid-template-columns: minmax(0, 1fr); }
.pfi-x { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); cursor: pointer; }
.pfi-x:hover { color: var(--text); border-color: var(--text-3); }
.pfi-x svg { width: 16px; height: 16px; }
.pfi-msg { padding: 32px 28px; margin: 0; }
.pfi-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; background: var(--surface-2); border-inline-end: 1px solid var(--line); padding-block-end: 14px; }
.pfi-shot { position: relative; display: grid; place-items: center; min-height: 320px; padding: 22px 22px 0; }
.pfi-shot img, .pfi-shot video { display: block; max-width: 100%; max-height: min(66vh, 640px); border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.pfi-shot img { object-fit: contain; }
.pfi-shot video { width: 100%; }
.pfi-nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); font-size: 1.5em; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-block-end: 3px; }
.pfi-nav.prev { inset-inline-start: 10px; }
.pfi-nav.next { inset-inline-end: 10px; }
.pfi-nav:hover, .pfi-full:hover { border-color: var(--text-3); }
.pfi-full { position: absolute; inset-block-start: 32px; inset-inline-end: 32px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--text-2); cursor: pointer; }
.pfi-stage:fullscreen { background: var(--bg); padding: 24px; }
.pfi-stage:fullscreen .pfi-shot img, .pfi-stage:fullscreen .pfi-shot video { max-height: calc(100vh - 160px); }
.pfi-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 24px 0; font-size: .93em; color: var(--text); }
.pfi-cap small { color: var(--text-3); }
.pfi-strip { display: flex; gap: 8px; padding: 10px 24px 0; overflow-x: auto; }
.pfi-strip button { position: relative; flex: none; width: 78px; height: 50px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--surface); cursor: pointer; opacity: .72; transition: opacity var(--m-dur, .2s) var(--ease), border-color var(--m-dur, .2s) var(--ease); }
.pfi-strip button:hover, .pfi-strip button.on { opacity: 1; }
.pfi-strip button.on { border-color: var(--accent); }
.pfi-strip img, .pfi-strip video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; pointer-events: none; }
.pfi-strip i, .pf-cover i, .pfm-thumb i { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .62em; padding-inline-start: 2px; color: var(--text); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pfi-info { padding: 30px 28px 26px; overflow-y: auto; display: grid; gap: 14px; align-content: start; min-height: 0; }
.pfi-info > .eyebrow { padding-inline-end: 40px; }
.pfi-info .h { margin: 0; font-size: 1.7em; line-height: 1.15; }
.pfi-info > .p { margin: 0; }
.pfi-from { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88em; color: var(--text-3); }
.pfi-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pfi-cta a.btn { text-decoration: none; }
.pfi-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 0; border-block: 1px solid var(--line); }
.pfi-nums dt { font-size: .76em; color: var(--text-3); }
.pfi-nums dd { margin: 0; font-family: var(--font-display); font-size: 1.35em; font-variant-numeric: tabular-nums; }
.pfi-sec { display: grid; gap: 6px; }
.pfi-sec h4 { margin: 0; font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pfi-sec .pf-tags { justify-self: start; }
.pfi-vers { margin: 0; padding: 0; list-style: none; display: grid; }
.pfi-vers button { font: inherit; color: inherit; width: 100%; text-align: start; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 8px 6px; cursor: pointer; font-size: .92em; }
.pfi-vers li:last-child button { border-bottom: 0; }
.pfi-vers button:hover { background: var(--surface-2); }
.pfi-vers button.on { background: var(--surface-2); border-radius: 8px; }
.pfi-vers b { font-variant-numeric: tabular-nums; }
.pfi-vers span { color: var(--text-2); }
.pfi-vers small { color: var(--text-3); white-space: nowrap; }
.pfi-hint { margin: 0; font-size: .84em; color: var(--text-3); }
/* the cover on a card: the first picture or video of the newest version */
.pf-cover { position: relative; display: block; height: 136px; margin: -14px -16px 4px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pf-cover img, .pf-cover video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pfx-item .pf-cover { height: 116px; margin: -12px -14px 6px; border-radius: 11px 11px 0 0; }
.pf-card.pic, .pfx-item.pic { overflow: hidden; }
/* Teilen: the button under a card, and the pictures and videos of one item (components/PlatformMediaEdit.js) */
.pfs-slot { display: grid; gap: 2px; align-content: start; }
.pfs-media { font: inherit; justify-self: start; background: none; border: 0; padding: 3px 4px; color: var(--accent-text); font-size: .82em; cursor: pointer; border-radius: 6px; }
.pfs-media:hover { text-decoration: underline; text-underline-offset: 3px; }
.pfm { width: min(760px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.4); padding: 20px 22px; display: grid; gap: 14px; box-shadow: 0 24px 60px var(--shadow); }
.pfm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pfm-head .h { margin: 2px 0 4px; }
.pfm-head .p { margin: 0; }
.pfm .pfi-x { position: static; flex: none; }
.pfm-drop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 20px 16px; color: var(--text-2); transition: border-color var(--m-dur, .2s) var(--ease), background-color var(--m-dur, .2s) var(--ease); }
.pfm-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.pfm-drop small { flex-basis: 100%; color: var(--text-3); font-size: .8em; }
.pfm-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pfm-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--bg); }
.pfm-thumb { position: relative; display: block; width: 104px; height: 66px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pfm-thumb img, .pfm-thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pfm-first { position: absolute; inset-block-start: 4px; inset-inline-start: 4px; font-size: .64em; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 0 7px; }
.pfm-meta { display: grid; gap: 4px; min-width: 0; }
.pfm-meta input { font: inherit; font-size: .92em; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; min-width: 0; }
.pfm-meta small { color: var(--text-3); font-size: .74em; overflow-wrap: anywhere; }
.pfm-acts { display: flex; gap: 4px; }
.pfm-ic { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; font: inherit; font-size: .9em; }
.pfm-ic:hover:not(:disabled) { color: var(--text); border-color: var(--text-3); }
.pfm-ic:disabled { opacity: .4; cursor: default; }
.pfm-foot { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.pfm-foot span { flex: 1; color: var(--text-3); font-size: .86em; }
.pfm .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  .pfi-veil { padding: 0; place-items: stretch; }
  .pfi, .pfi.bare { width: 100%; max-height: 100vh; border-radius: 0; border: 0; grid-template-columns: minmax(0, 1fr); overflow-y: auto; align-content: start; }
  .pfi-stage { grid-template-rows: auto auto auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .pfi-full { inset-block-start: 62px; inset-inline-end: 18px; }
  .pfi-shot { min-height: 0; padding: 56px 12px 0; }
  .pfi-shot img, .pfi-shot video { max-height: 48vh; }
  .pfi-info { overflow: visible; padding: 22px 18px 28px; }
  .pfm { max-height: 100vh; border-radius: 0; }
  .pfm-list li { grid-template-columns: 80px minmax(0, 1fr); }
  .pfm-thumb { width: 80px; height: 52px; }
  .pfm-acts { grid-column: 2; }
}
.pft-ai { margin: 4px 0 0; font-size: .9em; color: var(--text-2); }
.pft-trinity { color: var(--text) !important; font-size: .86em; border-left: 2px solid var(--accent); padding-left: 8px; }
.pft-trinity b { color: var(--accent-text); font-weight: 600; }

/* ── Übersicht › Graph (GraphMap.js): Brain and Memory as points and lines; hairlines, colours per kind from the theme ── */
.gm { --gk-agent: var(--k-agent); --gk-skill: var(--k-skill); --gk-rule: var(--wire-4); --gk-conv: var(--k-conv); --gk-hook: var(--k-hook); --gk-mcp: var(--k-mcp); --gk-workflow: var(--text); --gk-module: color-mix(in srgb, var(--wire-1) 45%, var(--wire-2)); --gk-doc: var(--text-3); --gk-task: var(--text-2); --gk-output: color-mix(in srgb, var(--wire-5) 55%, var(--wire-2)); --gk-run: color-mix(in srgb, var(--text-3) 60%, var(--wire-3)); --gk-asset: color-mix(in srgb, var(--wire-3) 50%, var(--wire-4)); display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 340px; min-width: 0; }
.gm.full { grid-template-rows: auto minmax(0, 1fr); height: min(72vh, 680px); min-height: 420px; border: var(--bw, 1px) solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.gm-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.gm-q { width: 180px; padding: 6px 10px; }
.gm-check { display: inline-flex; gap: 6px; align-items: center; font-size: .88em; color: var(--text-2); }
.gm-body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.gm.full .gm-body { grid-template-columns: minmax(0, 1fr) 300px; }
.gm-canvas { position: relative; min-width: 0; min-height: 0; }
.gm-canvas svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.gm-canvas svg:active { cursor: grabbing; }
.gm-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; margin: 0; }
.gm-legend { position: absolute; inset-inline-start: 12px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76em; color: var(--text-3); pointer-events: none; }
.gm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gm i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--gk); }
.gm i.gap { background: none; border: 1.5px dashed var(--text-3); }
.gm .k-agent { --gk: var(--gk-agent); } .gm .k-skill { --gk: var(--gk-skill); } .gm .k-rule { --gk: var(--gk-rule); } .gm .k-conv { --gk: var(--gk-conv); } .gm .k-hook { --gk: var(--gk-hook); }
.gm .k-mcp { --gk: var(--gk-mcp); } .gm .k-workflow { --gk: var(--gk-workflow); } .gm .k-module { --gk: var(--gk-module); } .gm .k-doc { --gk: var(--gk-doc); } .gm .k-task { --gk: var(--gk-task); }
.gm .k-output { --gk: var(--gk-output); } .gm .k-run { --gk: var(--gk-run); } .gm .k-asset { --gk: var(--gk-asset); }
.gm-edge { stroke: var(--line); stroke-width: 1; }
.gm-edge.text { stroke-dasharray: 3 3; }
.gm-edge.on { stroke: var(--text-3); stroke-width: 1.4; }
.gm-node circle { fill: var(--gk); stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.gm-node.gap circle { fill: var(--surface); stroke: var(--text-3); stroke-dasharray: 2.5 2.5; stroke-width: 1.4; }
.gm-node.sel circle { stroke: var(--text); }
.gm-node text { font: 11px var(--font-body); fill: var(--text-2); pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.gm svg.dim .gm-node { opacity: .18; } .gm svg.dim .gm-edge { opacity: .12; }
.gm svg.dim .gm-node.near, .gm svg.dim .gm-edge.on { opacity: 1; }
.gm .hide { display: none; }
.gm svg.far .gm-node:not(.hub):not(.near):not(.sel) text { display: none; }
.gm svg.far .gm-node:not(.hub):hover text { display: inline; }
.gm svg.nonames .gm-node text { display: none; }
.gm svg.nonames .gm-node:hover text { display: inline; }
.gm-side { border-inline-start: 1px solid var(--line); padding: 16px; overflow-y: auto; display: grid; gap: 12px; align-content: start; font-size: .92em; min-height: 0; }
.gm-k { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.gm-h { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15em; overflow-wrap: anywhere; }
.gm-path { font-family: var(--font-mono); font-size: .8em; color: var(--accent-text); overflow-wrap: anywhere; }
.gm-path.bad { color: var(--k-bad); }
.gm-grp { display: grid; gap: 4px; }
.gm-grp > b { font-size: .8em; font-weight: 600; color: var(--text-3); }
.gm-it { font: inherit; text-align: start; display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 8px; padding: 5px 9px; cursor: pointer; min-width: 0; }
.gm-it small { margin-inline-start: auto; color: var(--text-3); white-space: nowrap; }
.gm-it.static { cursor: default; }
.gm-it.gap { border-style: dashed; color: var(--text-2); }
.gm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.gm-info { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .9em; color: var(--text-2); min-height: 44px; }
.gm-info b { color: var(--text); font-weight: 600; }
.gm-more { margin-inline-start: auto; }
@media (max-width: 760px) {
  .gm.full { height: auto; }
  .gm.full .gm-body { grid-template-columns: minmax(0, 1fr); }
  .gm.full .gm-canvas { height: 360px; }
  .gm-side { border-inline-start: 0; border-top: 1px solid var(--line); }
}

/* ── Übersicht › Baseline (BaselineView.js): per cent and a line on the card; groups, list and side pane on the page.
      Same look on the setup slide (Setup.js, s3 Baseline). Colours: da = accent, dünn/woanders = k-warn, fehlt = k-bad ── */
.bl-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 16px; }
.bl-click { cursor: pointer; }
.bl-click:hover .bl-big { color: var(--accent-text); }
.bl-big { font-family: var(--font-display); font-weight: 300; font-size: 2em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.bl-big small { font-size: .42em; color: var(--text-3); font-weight: 400; margin-inline-start: 4px; }
.bl-strip { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-2); min-width: 0; }
.bl-strip i { display: block; height: 100%; }
.bl .s-ok, .bl-strip .s-ok, .s3 .s-ok { background: var(--accent); }
.bl .s-thin, .bl-strip .s-thin, .s3 .s-thin { background: var(--k-warn); }
.bl .s-miss, .bl-strip .s-miss, .s3 .s-miss { background: var(--k-bad); }
.bl { display: grid; gap: 16px; min-width: 0; }
.bl-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.bl-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 22px; align-items: center; padding: 16px; }
.bl-top .bl-big { font-size: 2.6em; }
.bl-mid { display: grid; gap: 8px; min-width: 0; }
.bl-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82em; color: var(--text-3); }
.bl-legend span { display: inline-flex; gap: 6px; align-items: center; }
.bl-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bl-tile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; cursor: pointer; text-align: start; font: inherit; color: inherit; min-width: 0; }
.bl-tile[aria-pressed="true"] { border-color: var(--text-3); }
.bl-tile b { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.bl-tile b span { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.bl-tile small { color: var(--text-3); }
.bl-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bl-bar .bad { color: var(--k-bad); }
.bl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 16px; align-items: start; }
.bl-group > h5 { margin: 0; padding: 12px 16px 6px; font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.bl-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 11px 16px; border: 0; border-top: 1px solid var(--line); background: none; width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.bl-group .bl-row:first-of-type { border-top: 0; }
.bl-row:hover { background: var(--surface-2); }
.bl-row.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--text); }
.bl-chev { color: var(--text-3); align-self: center; }
.bl-st { font-size: .74em; font-weight: 600; border-radius: 99px; padding: 2px 8px; text-align: center; justify-self: start; margin-top: 2px; white-space: nowrap; }
.bl-st.ok { background: var(--accent-soft); color: var(--accent-text); }
.bl-st.thin { background: var(--k-warn-soft); color: var(--k-warn); }
.bl-st.else { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.bl-st.missing { background: var(--k-bad-soft); color: var(--k-bad); }
.bl-st.no { background: var(--surface-2); color: var(--text-3); }
.bl-t { display: grid; gap: 2px; min-width: 0; }
.bl-t b { font-weight: 600; }
.bl-t .lvl { font-weight: 500; font-size: .8em; color: var(--text-3); margin-inline-start: 6px; }
.bl-t code, .bl-path { font-family: var(--font-mono); font-size: .8em; color: var(--accent-text); overflow-wrap: anywhere; }
.bl-why { color: var(--k-warn); font-size: .88em; }
.bl-pane { position: sticky; top: 12px; display: grid; }
.bl-pane > div { padding: 12px 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; }
.bl-pane > div:first-child { border-top: 0; }
.bl-pane h4 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bl-pane p { margin: 0; color: var(--text-2); font-size: .94em; }
.bl-lab { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.bl-checks { display: grid; gap: 4px; font-size: .92em; }
.bl-checks > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
.bl-checks .y { color: var(--accent-text); } .bl-checks .n { color: var(--k-bad); } .bl-checks .w { color: var(--k-warn); }
.bl-checks small { color: var(--text-3); display: block; overflow-wrap: anywhere; }
/* Aus Suite: the suites of trinity-internal that fill a gap (design baseline-suite.html) */
.bl-sn { font-size: .74em; font-weight: 600; color: var(--text-2); background: var(--surface-2); border-radius: 99px; padding: 1px 8px; margin-left: 8px; white-space: nowrap; }
.bl-suites { display: grid; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.bl-suite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; }
.bl-suite:first-child { border-top: 0; }
.bl-suite b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bl-suite .btn { grid-column: 2; grid-row: 1 / span 2; padding: 5px 11px; font-size: .86em; }
.bl-sm { grid-column: 1; display: flex; gap: 6px 10px; flex-wrap: wrap; font-size: .84em; color: var(--text-3); min-width: 0; }
.bl-sm code { font-family: var(--font-mono); color: var(--accent-text); overflow-wrap: anywhere; }
.bl-how { font-size: .92em; border-radius: 99px; padding: 0 7px; border: 1px solid var(--line); color: var(--text-2); }
.bl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: .86em; background: var(--surface); color: var(--text-2); }
.bl-chip.need { border-color: var(--k-bad-soft); background: var(--k-bad-soft); color: var(--k-bad); }
.bl-chip.auto { border-color: var(--accent-soft); background: var(--accent-soft); color: var(--accent-text); }
.bl-marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; font-size: .92em; }
.bl-marks label { display: flex; gap: 8px; align-items: center; }
.s3-sxpick { grid-column: 2 / -1; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 8px 10px; font-size: .9em; min-width: 0; }
.s3-sxpick label { display: flex; gap: 8px; align-items: baseline; }
.s3-sxpick small { color: var(--text-3); }
@media (max-width: 820px) { .s3-sxpick { grid-column: 1 / -1; } }
.bl-pre { margin: 0; font-family: var(--font-mono); font-size: .8em; line-height: 1.5; color: var(--text-2); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.bl-act { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-act .btn { text-decoration: none; }
@media (max-width: 980px) { .bl-split { grid-template-columns: minmax(0, 1fr); } .bl-pane { position: static; } }
@media (max-width: 720px) {
  .bl-tiles { grid-template-columns: minmax(0, 1fr); }
  .bl-top { grid-template-columns: minmax(0, 1fr); }
  .bl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bl-row .bl-st { grid-column: 1 / -1; }
}
/* Übersicht › Nutzung › Öffnen (NutzungView.js, design nutzung.html): built on the Baseline page */
.nu { display: grid; gap: 16px; }
.nu .bl-bar { justify-content: space-between; }
.nu-tabs, .nu-days { flex-wrap: wrap; }
.nu-n { margin-inline-start: 6px; opacity: .65; font-variant-numeric: tabular-nums; }
.nu-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 70px 92px 18px; gap: 12px; align-items: center; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); background: none; width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; font-size: .94em; }
.nu-row:hover { background: var(--surface-2); }
.nu-row.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--text); }
.nu-row.nu-head { cursor: default; border-top: 0; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.nu-row.nu-head:hover { background: none; }
.nu-nm { display: grid; gap: 1px; min-width: 0; }
.nu-nm b { font-weight: 600; overflow-wrap: anywhere; }
.nu-nm small { color: var(--text-3); overflow-wrap: anywhere; }
.nu-num { font-variant-numeric: tabular-nums; text-align: end; color: var(--text-2); }
.nu-when { color: var(--text-3); text-align: end; }
.nu-row.never .nu-num, .nu-row.never .nu-when { color: var(--k-warn); }
.nu-code { font-family: var(--font-mono); font-size: .9em; }
.nu-foot { padding: 10px 16px; border-top: 1px solid var(--line); }
.nu-tl { display: grid; gap: 4px; font-size: .9em; }
.nu-tl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 8px; color: var(--text-2); min-width: 0; }
.nu-tl > div > :first-child { color: var(--text-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nu-tl code { font-family: var(--font-mono); font-size: .86em; color: var(--accent-text); }
.nu-pre { margin: 0; font-family: var(--font-mono); font-size: .8em; line-height: 1.5; color: var(--text-2); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.nu-go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nu-wide { grid-column: 1 / -1; }
.nu-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); font-size: .92em; }
.nu-frow code { font-family: var(--font-mono); font-size: .86em; color: var(--text-2); overflow-wrap: anywhere; }
.nu-note { padding: 8px 16px 12px; margin: 0; }
.nu-cover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 16px; }
.nu-cover .s-ok { background: var(--accent); }
.nu-quiet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 16px; }
.nu-quiet small { display: block; margin-top: 2px; }
.nu-dot, .nu-hint .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-warn); flex: none; margin-top: 6px; display: inline-block; }
.nu-hint .dot { margin-top: 0; }
@media (max-width: 720px) {
  .nu-row { grid-template-columns: minmax(0, 1fr) 44px 74px 14px; }
  .nu-ses { display: none; }
  .nu-grid { grid-template-columns: minmax(0, 1fr); }
}
.s3-bl .bl-sum { padding: 0 0 6px; }
.s3-blrow { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.s3-blrow .seg { grid-column: 2; justify-self: start; flex-wrap: wrap; }
@media (max-width: 720px) { .s3-blrow { grid-template-columns: minmax(0, 1fr); } .s3-blrow .seg { grid-column: 1; } }

/* ── Zusammenarbeit im Projekt (A8 Aufgaben, A3 Chat, A9 Calls; design entwicklung/design/zusammenarbeit-v1.html) ── */
.pfx-wide { padding: 20px 28px 32px; min-width: 0; }
.pw { display: grid; gap: 12px; min-width: 0; }
.pw-src { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; font-size: .84em; color: var(--text-3); }
.pw-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-inline-end: 6px; vertical-align: middle; }
.pw-who { display: inline-flex; align-items: center; gap: 5px; }
.pw-who i, .pw-faces i, .pw-person i, .pw-av { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: .66em; font-weight: 700; flex: none; }
.pw-incall { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-weight: 600; }
.pw-incall i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pw-wait { font-size: .74em; color: var(--text-3); }
.tcard.pw-ghost { border-style: dashed; cursor: default; }
.pw-open { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.pw-open .k { display: flex; gap: 10px; font-size: .78em; color: var(--text-3); }
.pw-open small { color: var(--text-3); }
.pw-open-b { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.btn.sm { padding: 4px 11px; font-size: .84em; }
.pw-callbtn { display: inline-flex; align-items: center; gap: 7px; }
.pw-callbtn svg, .pw-callic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.pw-chat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 520px; max-height: 72vh; overflow: hidden; }
.pw-chat-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pw-chat-h > span:first-child { display: grid; gap: 1px; }
.pw-chat-h small { color: var(--text-3); font-size: .8em; }
.pw-chat-pad { padding: 12px 16px; }
.pw-here { display: inline-flex; align-items: center; gap: 8px; font-size: .84em; color: var(--text-3); }
.pw-faces { display: inline-flex; }
.pw-faces i { width: 24px; height: 24px; border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--accent); margin-inline-start: -6px; }
.pw-faces i:first-child { margin-inline-start: 0; }
.pw-msgs { padding: 8px 16px 14px; display: grid; gap: 12px; align-content: start; overflow-y: auto; min-height: 0; }
.pw-older { justify-self: center; }
.pw-day { justify-self: center; font-size: .74em; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; margin-top: 6px; }
.pw-msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: .92em; }
.pw-msg .pw-av { width: 28px; height: 28px; }
.pw-msg p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.pw-who-l { display: flex; gap: 8px; align-items: baseline; }
.pw-who-l small { color: var(--text-3); font-size: .78em; }
.pw-ref { background: var(--accent-soft); color: var(--accent-text); border-radius: 6px; padding: 0 5px; font-weight: 600; }
.pw-at { color: var(--accent-text); font-weight: 600; }
.pw-callcard { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; font-size: .9em; margin-inline-start: 38px; }
.pw-callcard.live { border-color: var(--accent); background: var(--accent-soft); }
.pw-callcard > span:nth-child(2) { display: grid; }
.pw-callcard small { color: var(--text-3); font-size: .82em; }
.pw-callic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.pw-callcard.live .pw-callic { background: var(--accent); color: var(--on-accent); }
.pw-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }

.pw-call { position: fixed; inset: 0; z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: var(--surface); }
.pw-stage { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; background: var(--surface-2); min-width: 0; min-height: 0; }
.pw-st-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9em; color: var(--text-2); }
.pw-st-h b { color: var(--text); }
.pw-st-h .mono { font-family: var(--font-mono); }
.pw-rec { display: inline-flex; gap: 6px; align-items: center; font-size: .82em; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--surface); }
.pw-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.pw-rec.on { color: var(--accent-text); border-color: var(--accent); }
.pw-rec.on i { background: var(--accent); }
.pw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: minmax(160px, 1fr); gap: 10px; min-height: 0; overflow: auto; }
.pw-tiles.withbig { grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr); }
.pw-tiles.withbig .big { grid-row: span 4; }
.pw-tile { position: relative; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); min-height: 140px; }
.pw-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.pw-tile.big { background: var(--surface); border: 1px solid var(--line); }
.pw-tile.big video { object-fit: contain; }
.pw-tile.me video { transform: scaleX(-1); }
.pw-tile-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15em; font-weight: 700; color: var(--on-accent); background: var(--ca, var(--text-3)); }
.pw-tile-wait { position: absolute; top: 10px; inset-inline-start: 10px; font-size: .74em; color: var(--text-3); }
/* F Bildschirm groß (design trinity-internal-rest-v1.html): the screen big, the faces a strip below, who speaks a green edge */
.pw-tile.speak::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent); pointer-events: none; }
.pw-stage-big { grid-row: 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.pw-stage-big + .pw-ctrl { grid-row: 4; }
.pw-front { min-height: 240px; }
.pw-back { position: absolute; top: 10px; inset-inline-end: 10px; }
.pw-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pw-face { flex: 0 0 150px; height: 96px; min-height: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.pw-face .pw-tile-av { width: 40px; height: 40px; font-size: .9em; }
.pw-face .nm { font-size: .72em; bottom: 6px; inset-inline-start: 6px; }
.pw-face.on { outline: 2px solid var(--text); outline-offset: 1px; }
.pw-face.ringing { cursor: default; opacity: .7; }
/* I Größere Calls: Jitsi embedded — kept alive but out of sight in the slim bar, over the stage in "Groß" */
.pw-jitsi-slot { grid-row: 3; display: grid; place-items: center; min-height: 240px; border: 1px dashed var(--line); border-radius: 14px; }
.pw-jitsi-slot + .pw-ctrl { grid-row: 4; }
.pw-jitsi { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.pw-jitsi.big { inset: 64px 316px 80px 16px; width: auto; height: auto; opacity: 1; pointer-events: auto; z-index: 46; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pw-jitsi iframe { width: 100%; height: 100%; border: 0; }
.cn-calls-list { display: grid; gap: 6px; }
.cn-call { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.cn-call input { accent-color: var(--accent); margin-top: 3px; }
.cn-call span { display: grid; gap: 2px; }
.cn-call small { color: var(--text-3); font-size: .86em; }
.cn-call.on { border-color: var(--text); }
@media (max-width: 900px) { .pw-jitsi.big { inset: 64px 16px 140px 16px; } }
.pw-tile .nm { position: absolute; inset-inline-start: 10px; bottom: 8px; font-size: .78em; color: var(--text); background: var(--surface); border-radius: 999px; padding: 2px 9px; }
.pw-ctrl { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pw-ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pw-ctrl button:disabled { opacity: .45; cursor: default; }
.pw-ctrl button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pw-ctrl button.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.pw-ctrl button.end { width: auto; border-radius: 999px; padding: 0 18px; font: inherit; font-weight: 600; font-size: .9em; }
.pw-side { border-inline-start: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.pw-side .pfx-tabs { margin: 0 14px; gap: 16px; }
.pw-side-b { padding: 12px 14px; display: grid; gap: 12px; align-content: start; overflow-y: auto; font-size: .9em; }
.pw-task-on { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 3px; }
.pw-task-on .k { font-family: var(--font-mono); font-size: .74em; color: var(--text-3); }
.pw-person { display: flex; align-items: center; gap: 8px; }
.pw-person i { width: 26px; height: 26px; }
.pw-person small { margin-inline-start: auto; color: var(--text-3); font-size: .8em; }
.pw-tr-b { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-ask { display: grid; gap: 6px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); padding: 10px 12px; }
.pw-ask small { color: var(--text-2); }
.pw-ask span { display: flex; gap: 8px; }

.pw-after { position: fixed; z-index: 44; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px 22px; display: grid; gap: 12px; }
.pw-after-h { display: flex; justify-content: space-between; align-items: center; }
.pw-after h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3em; }
.pw-after h4 { margin: 4px 0 0; font-size: .74em; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.pw-after h4 small { text-transform: none; letter-spacing: 0; }
.pw-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--text-3); font-size: .84em; }
.pw-points { margin: 0; padding-inline-start: 18px; color: var(--text-2); display: grid; gap: 4px; }
.pw-props { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pw-props label { display: grid; grid-template-columns: 18px minmax(0, 1fr) 150px; gap: 10px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .92em; }
.pw-props label:last-child { border-bottom: 0; }
.pw-props input[type="checkbox"], .pw-attach input { margin-top: 4px; accent-color: var(--accent); }
.pw-props label > span { display: grid; }
.pw-props small { color: var(--text-3); font-size: .84em; }
.pw-owner { padding: 4px 8px; font-size: .88em; }
.pw-attach { display: flex; gap: 8px; align-items: start; font-size: .9em; cursor: pointer; }
.pw-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pw-row small { color: var(--text-3); font-size: .84em; }
.pw-kept { display: grid; gap: 2px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); padding: 10px 12px; }
.pw-kept small { color: var(--text-2); }
.pw-kept .mono { font-family: var(--font-mono); }
@media (max-width: 900px) {
  .pfx-wide { padding: 16px 14px 24px; }
  .pw-call { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pw-side { border-inline-start: 0; border-top: 1px solid var(--line); max-height: 36vh; }
  .pw-tiles.withbig { grid-template-columns: minmax(0, 1fr); }
  .pw-tiles.withbig .big { grid-row: auto; min-height: 220px; }
  .pw-props label { grid-template-columns: 18px minmax(0, 1fr); }
  .pw-owner { grid-column: 2; }
}

/* ── Kommunikation (1.14): Leiste, Klingeln, Gespräche, Status, Kalender; design entwicklung/design/kommunikation-v1.html ── */
.pw-bar { position: fixed; z-index: 44; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: .86em; box-shadow: 0 10px 30px color-mix(in oklab, var(--text) 16%, transparent); white-space: nowrap; }
.pw-bar-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.pw-bar-live.bad { background: var(--text-3); }
.pw-bar-t { color: var(--text-3); font-family: var(--font-mono); font-size: .92em; }
.pw-bar-err { color: var(--text-2); white-space: normal; max-width: 340px; }
.pw-bar .pw-faces i { width: 24px; height: 24px; color: var(--on-accent); background: var(--ca, var(--surface-2)); box-shadow: none; }
.pw-bar .pw-faces i.ring { background: var(--surface-2); color: var(--text-2); box-shadow: 0 0 0 1.5px var(--accent); animation: pw-ring 1.2s ease-in-out infinite; }
@keyframes pw-ring { 50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pw-bar .pw-faces i.ring { animation: none; } }
.pw-bar-c { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.pw-bar-c svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pw-bar-c.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.pw-bar-c:disabled { opacity: .45; cursor: default; }
.pw-st-r { display: inline-flex; gap: 8px; align-items: center; }
.pw-tile.ringing { opacity: .7; }
.pw-tile video.mirror { transform: scaleX(-1); }
.pw-ask-float { position: fixed; z-index: 44; left: 50%; bottom: 70px; transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); background: var(--surface); }
.pw-add { display: grid; gap: 4px; }
.pw-add-p { font: inherit; display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text); padding: 5px 6px; border-radius: 8px; cursor: pointer; text-align: start; font-size: .9em; }
.pw-add-p:hover { background: var(--surface-2); }
.pw-add-p i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: .64em; font-weight: 700; }
.pw-picked { display: flex; flex-wrap: wrap; gap: 4px; }
.pw-picked span { font-size: .84em; background: var(--surface-2); border-radius: 999px; padding: 1px 4px 1px 10px; display: inline-flex; gap: 4px; align-items: center; }
.pw-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ringing and notices: top right on every page */
.pw-toasts { position: fixed; z-index: 46; bottom: 16px; inset-inline-end: 16px; display: grid; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.pw-toast { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: 0 10px 30px color-mix(in oklab, var(--text) 16%, transparent); font-size: .9em; }
.pw-toast small { color: var(--text-3); font-size: .86em; }
.pw-toast .top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.pw-toast .top span:last-child { display: grid; }
.pw-toast .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); animation: pw-ring 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pw-toast .av { animation: none; } }
.pw-toast .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pw-toast.ring .row .btn { flex: 1; justify-content: center; }

/* the Chat tab: every conversation */
.pw-inbox { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; min-height: 560px; }
.pw-list { border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; max-height: 78vh; padding-bottom: 10px; }
.pw-grp { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: .64em; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 14px 14px 6px; }
.pw-grp .link { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.4em; padding: 0; }
.pw-pad { padding: 4px 14px; margin: 0; }
.pw-proj { display: flex; align-items: center; gap: 8px; padding: 8px 14px 4px; font-size: .9em; }
.pw-pa { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--on-accent); background: var(--ca, var(--text-3)); font-size: .66em; font-weight: 700; flex: none; }
.pw-pa.round { width: 32px; height: 32px; border-radius: 50%; }
.pw-ch { font: inherit; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px; align-items: center; border: 0; background: none; color: var(--text-2); text-align: start; padding: 5px 14px; cursor: pointer; font-size: .88em; }
.pw-ch .h { text-align: end; color: var(--text-3); font-family: var(--font-mono); }
.pw-ch .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-ch:hover, .pw-dm:hover { background: var(--surface-2); }
.pw-ch.on, .pw-dm.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.pw-ch.unread, .pw-dm.unread { color: var(--text); font-weight: 600; }
.pw-ch.add { color: var(--accent-text); }
.pw-room { display: inline-flex; gap: 4px; align-items: center; font-size: .82em; color: var(--accent-text); font-weight: 600; }
.pw-room i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pw-n { min-width: 18px; height: 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .74em; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.pw-newch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 4px 14px 4px 66px; }
.pw-newch .share-msg { grid-column: 1 / -1; padding: 0; }
.pw-dm { font: inherit; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; background: none; color: var(--text); text-align: start; padding: 7px 14px; cursor: pointer; font-size: .9em; }
.pw-dm .tx { display: grid; min-width: 0; }
.pw-dm small { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.pw-pane { min-width: 0; display: grid; }
.pw-pane .pw-chat { border: 0; border-radius: 0; max-height: 78vh; }
.pw-chat-acts { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pw-callcard.missed .pw-callic { color: var(--text); }
.pw-meetcard .pw-callic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* own status at the foot of the platform's tabs */
.pf-status { display: flex; align-items: center; gap: 8px; margin: 10px 10px 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 10px; font-size: .86em; }
.pf-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.pf-status.st-here i { background: var(--accent); }
.pf-status.st-busy i { background: var(--wire-5); }
.pf-status.st-dnd i { background: var(--wire-4); }
.pf-status select { font: inherit; border: 0; background: none; color: var(--text); flex: 1; min-width: 0; cursor: pointer; }

/* Termine */
.cal { display: grid; gap: 12px; min-width: 0; }
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-nav, .cal-right, .cal-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-nav b { font-family: var(--font-display); font-weight: 400; font-size: 1.15em; margin-inline-start: 6px; }
.cal-link { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.cal-link > span:first-child { display: grid; gap: 2px; }
.cal-link small { color: var(--text-3); }
.cal-url { font-family: var(--font-mono); font-size: .8em; overflow-wrap: anywhere; background: var(--surface-2); border-radius: 8px; padding: 6px 8px; }
.cal-grid { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: auto; max-height: 68vh; }
.cal-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 52px repeat(var(--n), minmax(110px, 1fr)); background: var(--surface); border-bottom: 1px solid var(--line); }
.cal-dh { padding: 6px 10px; border-inline-start: 1px solid var(--line); font-size: .8em; color: var(--text-2); display: flex; gap: 8px; align-items: baseline; }
.cal-dh b { font-family: var(--font-display); font-weight: 400; font-size: 1.5em; color: var(--text); }
.cal-dh.today b { color: var(--accent-text); }
.cal-body { position: relative; display: grid; grid-template-columns: 52px repeat(var(--n), minmax(110px, 1fr)); }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; inset-inline-end: 8px; transform: translateY(-6px); font-size: .7em; color: var(--text-3); font-family: var(--font-mono); }
.cal-col { position: relative; border-inline-start: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 43px, var(--line) 43px 44px); }
.cal-col.today { background-color: color-mix(in oklab, var(--accent) 4%, transparent); }
.cal-slot { position: absolute; left: 0; right: 0; border: 0; background: none; cursor: copy; }
.cal-slot:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.cal-bk { position: absolute; z-index: 1; font: inherit; text-align: start; border: 0; border-inline-start: 3px solid var(--ca); border-radius: 7px; padding: 4px 7px; display: grid; gap: 1px; align-content: start; overflow: hidden; cursor: pointer; color: var(--text); background: color-mix(in oklab, var(--ca) 16%, var(--surface)); font-size: .76em; }
.cal-bk b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bk small { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-bk.tent { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ca) 12%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
.cal-bk.on { box-shadow: 0 0 0 2px var(--text); }
.cal-join { justify-self: start; margin-top: 2px; font-size: .9em; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 0 8px; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 2; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; inset-inline-start: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cal-mh { font-size: .74em; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cal-md { min-height: 96px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px 6px; display: grid; gap: 3px; align-content: start; cursor: pointer; font-size: .82em; }
.cal-md:nth-child(7n) { border-inline-end: 0; }
.cal-md.other { color: var(--text-3); background: var(--surface-2); }
.cal-md.today > b { color: var(--accent-text); }
.cal-md small { color: var(--text-3); }
.cal-mm { font: inherit; font-size: .9em; text-align: start; border: 0; border-inline-start: 3px solid var(--ca); border-radius: 5px; padding: 1px 5px; background: color-mix(in oklab, var(--ca) 14%, var(--surface)); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-open { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; display: grid; gap: 10px; }
.cal-open-h { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.cal-open-h > span:nth-child(2) { display: grid; }
.cal-open-h b { font-family: var(--font-display); font-weight: 400; font-size: 1.2em; }
.cal-open-h small { color: var(--text-3); }
.cal-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--ca); margin-top: 6px; }
.cal-who { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cal-att { display: inline-flex; align-items: center; gap: 6px; font-size: .88em; }
.cal-att i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: .7em; font-weight: 700; }
.cal-att small { color: var(--text-3); }
.cal-att.accepted i { box-shadow: 0 0 0 2px var(--accent); }
.cal-att.declined { color: var(--text-3); text-decoration: line-through; }
.cal-att.org i { background: var(--text); color: var(--surface); }
.cal-agenda { margin: 0; white-space: pre-wrap; color: var(--text-2); font-size: .92em; }
.cal-open .btn.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.cal-form { display: grid; grid-template-columns: minmax(0, 1fr) 260px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cal-form-main { padding: 16px 18px; display: grid; gap: 12px; align-content: start; border-inline-end: 1px solid var(--line); min-width: 0; }
.cal-form-side { padding: 16px; display: grid; gap: 10px; align-content: start; }
.cal-title { font-family: var(--font-display); font-size: 1.2em; }
.cal-l { display: grid; gap: 4px; font-size: .8em; color: var(--text-3); }
.cal-l .inp, .cal-l textarea { font-size: 1.12em; color: var(--text); }
.cal-when { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-when .cal-l { flex: 1 1 120px; }
.cal-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 5px 7px; background: var(--bg); }
.cal-chip { display: inline-flex; gap: 6px; align-items: center; font-size: 1.06em; color: var(--text); background: var(--surface-2); border-radius: 999px; padding: 2px 8px 2px 3px; }
.cal-chip.opt { background: none; border: 1px dashed var(--line); }
.cal-chip i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: .7em; font-weight: 700; color: var(--text-2); }
.cal-chip .link { font-size: .86em; padding: 0; }
.cal-q { font: inherit; font-size: 1.1em; border: 0; background: none; color: var(--text); flex: 1; min-width: 140px; padding: 3px; }
.cal-cands { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 9px; padding: 4px; background: var(--surface); }
.cal-fb { display: grid; gap: 4px; font-size: .8em; }
.cal-fb-h, .cal-fb-r { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center; }
.cal-fb-scale { display: flex; justify-content: space-between; color: var(--text-3); font-family: var(--font-mono); font-size: .9em; }
.cal-fb-r .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.cal-fb-bar { position: relative; height: 16px; border-radius: 4px; background: var(--surface-2); }
.cal-fb-bar i { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--text) 40%, transparent); border-radius: 3px; }
.cal-fb-bar i.tent { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--text) 35%, transparent) 0 4px, transparent 4px 8px); }
.cal-fb-bar u { position: absolute; top: -2px; bottom: -2px; border: 2px solid var(--accent); border-radius: 4px; }
.cal-clash { color: var(--text-2); }
.cal-tog { display: flex; gap: 8px; align-items: center; font-size: .88em; cursor: pointer; }
.cal-tog input { accent-color: var(--accent); }
/* E Zusage je Termin (design trinity-internal-rest-v1.html): declined shows grey, the answer form under the buttons */
.cal-bk.declined, .cal-mm.declined { --ca: var(--text-3); color: var(--text-3); background: var(--surface-2); }
.cal-bk.declined b, .cal-mm.declined { text-decoration: line-through; }
.cal-rsvp { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.cal-rsvp .cal-tog small { margin-inline-start: 4px; }
.pw-meetmsg { display: block; margin-top: 3px; color: var(--text); white-space: pre-wrap; }
@media (max-width: 900px) {
  .pw-inbox { grid-template-columns: minmax(0, 1fr); }
  .pw-list { border-inline-end: 0; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .cal-form { grid-template-columns: minmax(0, 1fr); }
  .cal-form-main { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .pw-bar { bottom: 10px; }
}

/* Konsolen-Board (components/ToolBoard.js, ToolNew.js; design entwicklung/design/konsolen-board.html) */
.kb-st { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-3); }
.kb-st.s-work { background: var(--accent); }
.kb-st.s-wait { background: var(--wire-5, var(--accent)); }
.kb-st.s-done { background: none; border: 1.5px solid var(--text-3); width: 7px; height: 7px; }
.kb-st.s-shell { background: none; border: 1.5px solid var(--wire-1, var(--text-3)); width: 7px; height: 7px; }
.tl-tab > button:first-child .kb-st { margin-inline-end: 7px; vertical-align: 0; }
.kb-view { flex: none; align-self: center; margin-inline: 8px 2px; }
.kb-view button { font-size: .8em; padding: 3px 10px; }
.kb-sum { display: flex; gap: 2px; align-items: center; flex: none; }
.kb-pill { font: inherit; font-size: .8em; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; color: var(--text-2); padding: 3px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.kb-pill:hover, .kb-pill:focus-visible { border-color: var(--line); color: var(--text); }
.kb-pill b { font-weight: 600; color: var(--text); }
.kb-add { align-self: center; padding: 3px 12px; font-size: .8em; margin-inline: 4px; white-space: nowrap; }

.kb-board { position: absolute; inset: 0; overflow: hidden; overflow: clip; background-color: var(--bg); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 22px 22px; cursor: grab; touch-action: none; }
.kb-board.pan { cursor: grabbing; }
.kb-board.moving, .kb-board.moving * { user-select: none; }
.kb-board.moving .kb-term { pointer-events: none; }
.kb-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.kb-board.glide .kb-world { transition: transform .28s var(--ease); }
.kb-gframe { position: absolute; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 45%, transparent); cursor: default; }
.kb-gh { position: absolute; inset-inline: 14px; top: 9px; display: flex; align-items: baseline; gap: 10px; font-size: .86em; color: var(--text-2); }
.kb-gh b { font-family: var(--font-display); font-weight: 500; color: var(--text); font-size: 1.05em; }
.kb-gh small { color: var(--text-3); }
.kb-gsend { position: absolute; inset-inline: 14px; bottom: 10px; display: flex; gap: 8px; align-items: center; }
.kb-gsend .inp { flex: 1; min-width: 0; font-size: .86em; padding: 6px 10px; }
.kb-gsend .btn { padding: 5px 12px; font-size: .82em; }
.kb-gsend .hintline { white-space: nowrap; }
.kb-gh .kb-sp { flex: 1; }
.kb-gnm { font: inherit; font-family: var(--font-display); font-weight: 500; font-size: 1.05em; color: var(--text); background: none; border: 0; padding: 0 2px; border-radius: 5px; cursor: text; }
.kb-gnm:hover { background: var(--surface-2); }
.kb-gh .kb-gname .inp { font-size: .95em; padding: 2px 6px; max-width: 220px; }
.kb-gh .tl-x { align-self: center; padding: 1px 6px; }
.kb-card.kb-pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-lasso { position: absolute; border: 1px dashed var(--accent); background: var(--accent-soft); pointer-events: none; z-index: 5; }
.kb-pickbar { position: absolute; top: 12px; inset-inline-start: 14px; z-index: 3; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 8px 6px 12px; font-size: .86em; box-shadow: 0 6px 18px var(--shadow); }
.kb-pickbar .btn { padding: 4px 12px; font-size: .92em; }
.kb-pickbar .kb-gname .inp { font-size: .92em; padding: 4px 8px; width: 180px; }
.kb-tip { position: absolute; inset-inline-start: 16px; bottom: 14px; max-width: min(560px, 60%); margin: 0; pointer-events: none; }
.kb-card { position: absolute; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; overflow: clip; cursor: default; }
/* clip, not hidden: focusing the console must not scroll the card and push its head out of sight */
.kb-term { overflow: clip; }
.kb-card.kb-on { border-color: var(--text-3); }
.kb-card.kb-wait { border-color: var(--wire-5, var(--accent)); }
.kb-card.kb-wait.kb-on { box-shadow: inset 0 0 0 1px var(--wire-5, var(--accent)); }
.kb-ch { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; min-width: 0; touch-action: none; }
.kb-ch b { font-weight: 600; font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kb-ag { font-size: .74em; color: var(--text-3); white-space: nowrap; }
.kb-wt { font-family: var(--font-mono); font-size: .7em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kb-sp { flex: 1; }
.kb-ch .tl-x { margin: 0; padding: 2px 6px; }
.kb-term { position: relative; display: flex; min-height: 0; min-width: 0; }
.kb-term .tl-term { position: absolute; inset: 0; }
.kb-cf { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-top: 1px solid var(--line); font-size: .76em; color: var(--text-3); min-height: 30px; }
.kb-cf .kb-say { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card.kb-wait .kb-cf .kb-say { color: var(--text); font-weight: 600; }
/* at its limit (components/ToolLimit.js): a square instead of the dot, the line above the board says the rest */
.kb-st.s-limit { background: var(--wire-4, var(--text-2)); border-radius: 2px; }
.kb-card.kb-lim .kb-cf .kb-say { color: var(--text); font-weight: 600; }
.kb-limit { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 14px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: .88em; cursor: default; }
.kb-limit b { font-weight: 600; }
.kb-limit small { color: var(--text-3); }
.kb-limit .kb-lsq { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--wire-4, var(--text-2)); }
.kb-limit .kb-sp { flex: 1; }
.kb-limit .kb-gsel { max-width: 12em; }
.kb-limit .kb-lerr { color: var(--wire-4, var(--text)); }
.kb-board.list .kb-limit { position: sticky; top: 0; }
.kb-board.lim:not(.list) .kb-world { top: 44px; }   /* the cards below the line, not under it */
.kb-gsel, .kb-gname .inp { font: inherit; font-size: 1em; border: 1px solid var(--line); background: var(--bg); color: var(--text-2); border-radius: 7px; padding: 2px 6px; max-width: 46%; }
.kb-gsel.kb-bsel { max-width: 30%; }
.kb-gname { display: flex; gap: 6px; align-items: center; }
.kb-gname .link { font-size: 1em; padding: 0; }
.kb-corner { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--line) 50%); }
/* Verbindungen (lib/tools-links.js): lines under the cards, ○ to draw one, its label, Unter-Agenten below a card */
.kb-links { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.kb-links path { fill: none; }
.kb-l-line { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.kb-l-hand { stroke: var(--wire-1); stroke-width: 2; }
.kb-l-hand.go { stroke-dasharray: 8 6; animation: kb-flow .8s linear infinite; }
.kb-l-kid { stroke: var(--line); stroke-width: 1.5; }
.kb-l-new { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; }
.kb-arrowhead { fill: var(--wire-1); }
@keyframes kb-flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .kb-l-hand.go { animation: none; } }
.kb-knob { position: absolute; top: 50%; inset-inline-end: 3px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--text-3); cursor: crosshair; z-index: 2; touch-action: none; }
.kb-knob:hover { border-color: var(--accent); background: var(--accent-soft); }
.kb-ltag { position: absolute; transform: translate(-50%, -50%); z-index: 2; font: inherit; font-size: .72em; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.kb-ltag-hand { border-color: var(--wire-1); color: var(--wire-1); }
.kb-ltag:hover { color: var(--text); }
.kb-card.kb-get { border-color: var(--wire-1); box-shadow: 0 0 0 1px var(--wire-1); }
.kb-kid { position: absolute; width: 170px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .74em; padding: 5px 8px; display: grid; gap: 2px; z-index: 1; }
.kb-kid b { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kb-kid small { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-kid.gone { opacity: .45; }
.kb-lpop { position: absolute; z-index: 6; width: 300px; display: grid; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); font-size: .86em; }
.kb-lpop .seg { display: flex; } .kb-lpop .seg button { flex: 1; }
.kb-lf { display: grid; gap: 4px; }
.kb-lf > span { font-size: .85em; color: var(--text-3); font-weight: 600; }
.kb-lf .inp { font-size: .95em; padding: 5px 8px; }
.kb-lacts { display: flex; gap: 8px; align-items: center; }
.kb-lacts .btn { padding: 5px 12px; font-size: .95em; }
.kb-board.list .kb-knob, .kb-board.list .kb-ltag, .kb-board.list .kb-kid { display: none; }
.kb-zoom { position: absolute; inset-inline-end: 14px; bottom: 12px; z-index: 2; display: flex; gap: 2px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 3px; }
.kb-zoom button { font: inherit; font-size: .95em; line-height: 1; border: 0; background: none; color: var(--text); min-width: 32px; height: 30px; padding: 0 10px; border-radius: 7px; cursor: pointer; }
.kb-zoom button:hover { background: var(--surface-2); }
.kb-zoom .kb-pct { font-size: .8em; color: var(--text-2); min-width: 4.2em; font-variant-numeric: tabular-nums; }
.kb-zoom .kb-zfit { font-size: .8em; color: var(--text-2); }
.kb-zoom i { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
.kb-empty { position: absolute; inset-inline-start: 16px; top: 14px; }
/* on a phone: the cards one below the other */
.kb-board.list { overflow-y: auto; cursor: default; background-image: none; touch-action: auto; }
.kb-board.list .kb-world { position: static; display: grid; gap: 10px; padding: 10px; }
.kb-board.list .kb-gframe { display: none; }
.kb-board.list .kb-card { position: relative; height: 300px; }
.kb-board.list .kb-ch { cursor: default; }

.ask.kb-new { position: fixed; z-index: 70; }
.kb-form { width: min(440px, 100%); gap: 12px; }
.kb-f { display: grid; gap: 5px; }
.kb-f > span:first-child { font-size: .82em; color: var(--text-3); font-weight: 600; }
.kb-f > span small { font-weight: 400; }
.kb-f .seg { display: flex; } .kb-f .seg button { flex: 1; }
.kb-f small { color: var(--text-3); font-size: .8em; overflow-wrap: anywhere; }
.kb-form .inp, .kb-new .ask-box > .inp { width: 100%; box-sizing: border-box; }
.kb-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.kb-files { margin: 0; max-height: 160px; overflow: auto; font-family: var(--font-mono); font-size: .78em; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.kb-tlink { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 760px) {
  .kb-pill .kb-n { display: none; }
  .kb-view { margin-inline: 4px 0; }
}

/* Ergebnisse (TaskResults.js, OutputEdit.js, Brain › Skills): what a skill promises, what the runs made */
.er-block { min-width: 0; }
.er-sub { padding: 10px 16px 2px; font-size: .78em; color: var(--text-3); font-weight: 600; border-top: 1px solid var(--line); }
.er-block > h4 + .er-sub, .er-block > h4 + .tf-empty + .er-sub { border-top: 0; }
.er-file { display: grid; grid-template-columns: 1.2em minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 16px; font-size: .92em; }
.er-file small { grid-column: 2 / -1; color: var(--text-3); font-size: .86em; overflow-wrap: anywhere; }
.er-file code, .er-file small code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
.er-file > code { color: var(--accent-text); }
.er-file .link { font-size: .88em; padding: 0; }
.er-ok { color: var(--accent-text); font-weight: 700; text-align: center; }
.er-no { color: var(--text-3); font-weight: 700; text-align: center; }
.er-half, .er-miss-must .er-no { color: var(--k-warn); }
.er-kind { font-family: var(--font-mono); font-size: .74em; color: var(--text-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.er-w { font-size: .74em; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.er-w.must { color: var(--k-warn); border-color: var(--k-warn); }
.er-view { margin: 0 16px 10px 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); max-height: 460px; overflow: auto; }
.er-view > .sk-md { padding: 10px 14px; }
.er-view > pre.td-raw { padding: 10px 14px; }
.er-view > p.hintline { margin: 0; padding: 10px 14px; }
.er-view img { display: block; max-width: 100%; height: auto; }
.er-view iframe { display: block; width: 100%; height: 420px; border: 0; background: var(--surface); }
.er-det { display: block; border-top: 1px solid var(--line); }
.er-sub + .er-det { border-top: 0; }
.er-det > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 16px; cursor: pointer; font-size: .92em; }
.er-det > summary::-webkit-details-marker { display: none; }
.er-det > summary small { grid-column: 2 / -1; color: var(--text-3); font-size: .86em; }
.er-who { font-weight: 600; }
.er-st { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--accent); }
.er-st.done { background: none; border: 1.5px solid var(--text-3); width: 7px; height: 7px; }
.er-chg { margin: 0; padding: 0 16px 10px 42px; list-style: none; display: grid; gap: 3px; font-size: .86em; }
.er-chg code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
.er-foot { padding: 8px 16px 12px; border-top: 1px solid var(--line); display: flex; gap: 14px; flex-wrap: wrap; }
.er-foot .link { font-size: .88em; padding: 0; }
.er-def { border-bottom: 1px solid var(--line); }
.er-def .ssk-part-h .er-sel { flex: none; width: auto; font-weight: 400; }
.er-row2 { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.er-lab { display: grid; gap: 5px; font-size: .84em; color: var(--text-3); font-weight: 600; }
.er-lab small { font-weight: 400; }
.er-lab .inp { font-weight: 400; color: var(--text); }
.er-row2 .er-lab { display: flex; align-items: center; gap: 8px; }
.er-row2 .er-lab .inp { width: auto; }
.er-parts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-weight: 400; }
.er-parts-ro { display: inline-flex; margin-inline-start: 6px; vertical-align: middle; }
.er-part { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 999px; padding: 2px 6px 2px 10px; font-size: .9em; }
.er-parts-ro .er-part { padding: 1px 9px; font-size: .78em; color: var(--text-2); }
.er-part button { font: inherit; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0 4px; }
.er-parts .er-pin { width: 12em; padding: 3px 8px; }
.er-parts .link { font-size: .95em; padding: 0; }
@media (max-width: 760px) {
  .er-view, .er-chg { margin-left: 16px; padding-left: 0; }
  .er-chg { padding-left: 16px; }
}
/* Einstellungen › Entwicklermodus: the tone when a console waits */
.kb-setdot { justify-self: center; }
.kb-soundpick { display: inline-flex; gap: 10px; align-items: center; }
.kb-soundpick .inp { width: auto; padding: 4px 8px; }

/* ── Platz für den Chat (core/room.js, Entwurf entwicklung/design/fenster-vollbild.html): Chats einklappen, Vollbild ── */
.aic-sidetop { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.aic-sidetop .btn { flex: 1; min-width: 0; justify-content: flex-start; white-space: nowrap; overflow: hidden; }
/* „Menü einklappen“ and „Chats einklappen“: one row, the last of each column, both on the same line
   (Entwurf entwicklung/design/einklappen-knoepfe.html, Variante B). Quiet like the Werkzeuge row, no box. */
.fold-row { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .84em; color: var(--text-3); text-align: start; white-space: nowrap; overflow: hidden; cursor: pointer; flex-shrink: 0; }
.fold-row:hover { color: var(--text); background: var(--e-aside-afill, var(--surface-2)); }
.fold-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fold-row svg { width: 14px; height: 14px; flex: none; }
.fold-row span { overflow: hidden; text-overflow: ellipsis; }
/* folded: only the arrow, centred, pointing the other way; right-to-left mirrored */
[dir="rtl"] .fold-row svg, html.t-navthin .nav-fold svg, .aic.side-thin .aic-fold svg { transform: scaleX(-1); }
html[dir="rtl"].t-navthin .nav-fold svg, [dir="rtl"] .aic.side-thin .aic-fold svg { transform: none; }
html.t-navthin .nav-fold, .aic.side-thin .aic-fold { justify-content: center; padding-inline: 0; }
html.t-navthin .nav-fold span, .aic.side-thin .aic-fold span { display: none; }
.aic.side-thin { grid-template-columns: 56px minmax(0, 1fr); }
.aic.side-thin .aic-side { padding: 14px 8px; }
.aic.side-thin .aic-sidetop { flex-direction: column; }
.aic.side-thin .aic-sidetop .btn { flex: none; width: 36px; height: 36px; padding: 0; justify-content: center; }
.aic.side-thin .aic-newt, .aic.side-thin .aic-hist, .aic.side-thin .aic-side > .hintline { display: none; }
.tl-list.thin { border-top: 0; }
.tl-list.thin .tl-nm, .tl-list.thin .tl-meta, .tl-list.thin .tl-rows > .hintline { display: none; }
.tl-list.thin .tl-row { justify-content: center; padding-inline: 0; position: relative; }
.tl-list.thin .tl-row .tl-dot, .tl-list.thin .tl-row .kb-st { position: absolute; top: 3px; inset-inline-end: 3px; }
.aic-room { position: absolute; top: 10px; inset-inline-end: 12px; z-index: 3; display: flex; gap: 6px; }
.aic-rbtn { font: inherit; font-size: .8em; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.aic-rbtn:hover { color: var(--text); border-color: var(--text-3); }
.aic-rbtn.on { border-color: var(--accent); color: var(--accent-text); }
/* Vollbild: Kopfzeile, Menü und Chat-Spalte weg; die Spalte des Gesprächs (und das Eingabefeld) behält ihre Breite */
html.t-full .shell > .bar { display: none; }
html.t-full .shell { grid-template-rows: minmax(0, 1fr); }
html.t-full .shell.with-footer { grid-template-rows: minmax(0, 1fr) auto; }
html.t-full .home, html.t-full .wide .home { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
html.t-full .home > aside { display: none; }
html.t-full .aic, html.t-full .aic.side-thin { grid-template-columns: minmax(0, 1fr); }
html.t-full .aic-side, html.t-full .aic-sidebtn { display: none; }
@media (max-width: 760px) { .aic-room { display: none; } }
/* das linke Menü einklappen (room.nav): eine schmale Leiste mit », auf jeder Seite */
/* the row sits below Fokus; without Fokus it goes to the bottom itself */
.home aside > .nav-fold { margin-top: auto; }
.home aside > .fk-nav + .nav-fold { margin-top: 6px; }
html.t-navthin .home > aside > .nav-fold { margin-top: auto; }   /* folded: Fokus is hidden, the arrow stays at the bottom */
@media (min-width: 761px) {
  html.t-navthin:not(.t-full) .home, html.t-navthin:not(.t-full) .wide .home { grid-template-columns: 44px minmax(0, 1fr); }
  html.t-navthin .home > aside { padding: 10px 6px 14px; overflow: hidden; }   /* bottom like the chat column: the two arrows on one line */
  html.t-navthin .home > aside > *:not(.nav-fold) { display: none; }
}
@media (max-width: 760px) { .nav-fold { display: none; } }

/* ── Fenster (core/windows.js, components/WinView.js, SettingsWindows.js; Entwurf entwicklung/design/fenster-vollbild.html) ── */
html.win-page, html.win-page body, html.win-page #app { height: 100%; overflow: hidden; }
.win { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr); background: var(--bg); }
.win > * { min-height: 0; min-width: 0; }
.win-err { padding: 24px; }
.win-widget { width: 100%; height: 100%; border: 0; }
.win .tl-dock.alone { height: 100%; }
.win-page .bp-win { display: none; }
.win-page .bp { height: 100%; overflow: auto; }
.bp-acts { display: flex; gap: 14px; align-items: center; }
.ov-win { padding: 0 4px; font-size: .95em; }
.win-file { width: 100%; min-height: 140px; font-size: .82em; }
.win-nums { align-items: center; gap: 6px; }
.win-nums input { width: 96px; }
.win-kinds { flex-wrap: wrap; }
.win-set .lock-row small { display: block; color: var(--text-3); font-weight: 400; }

/* Assets: a page (type "page") in its closed frame — small in the tile and the card, large in the full view, with its versions */
.asv-page-mini { position: absolute; inset: 0 auto auto 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; background: var(--surface); }
.asv-pop-pv .asv-page-mini { width: 300%; height: 300%; transform: scale(calc(1 / 3)); }
.asv-pop-pv:has(.asv-page-mini) { position: relative; aspect-ratio: 16 / 10; }
.asv-full-pv .asv-page { width: 100%; height: 100%; min-height: 0; align-self: stretch; justify-self: stretch; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); }
.asv-full-pv:has(.asv-page) { place-items: stretch; }
.asv-vers { display: grid; gap: 2px; }
.asv-vers button { font: inherit; text-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: baseline; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.asv-vers button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asv-vers button small { grid-column: 2; color: var(--text-3); font-size: .86em; }
.asv-vers button[aria-pressed="true"] { border-color: var(--line); background: var(--surface-2); color: var(--text); }
.asv-vers button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Reden (trinity-internal-rest-v1.html A, B, C): signs at messages, votes at items, @ list, bell, topic channels,
   Benachrichtigungen. Only kit tokens, hairlines, no new effects. ── */
.rd-signs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.rd-sign { font: inherit; font-size: .8em; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); padding: 1px 8px; cursor: pointer; line-height: 1.6; }
.rd-sign:hover:not(:disabled) { border-color: var(--text-3); }
.rd-sign:disabled { cursor: default; }
.rd-sign.mine { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.rd-sign.add { color: var(--text-3); padding: 1px 7px; }
.rd-sign:focus-visible, .rd-pick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* a message without signs shows its „＋“ only on hover or focus (always on touch screens) */
.pw-msg .rd-signs.bare { opacity: 0; }
.pw-msg:hover .rd-signs.bare, .pw-msg:focus-within .rd-signs.bare { opacity: 1; }
@media (hover: none) { .pw-msg .rd-signs.bare { opacity: 1; } }
.rd-pick { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 1px 4px; }
.rd-pick button { font: inherit; font-size: .95em; background: none; border: 0; border-radius: 999px; padding: 1px 5px; cursor: pointer; }
.rd-pick button:hover { background: var(--surface-2); }
.rd-at .pch-pick-it.on { background: var(--surface-2); }
.rd-at .pch-pick-it em { min-width: 0; }
.rd-bell { display: inline-grid; place-items: center; padding-inline: 8px; }
.rd-bell svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rd-bell[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent); }
.rd-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; margin-bottom: 12px; }
.rd-topic > span:first-child { display: grid; min-width: 0; }
.rd-topic > span:first-child small { font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rd-topic > span:first-child b { font-family: var(--font-display); font-weight: 500; font-size: 1.1em; }
.rd-topic-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rd-topic-sub { grid-column: 1 / -1; color: var(--text-3); font-size: .82em; }
.rd-sort-why { display: block; margin: 0 0 10px; }
.rd-votes { display: grid; gap: 8px; margin: 4px 0 2px; }
.rd-votes-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rd-votes-row .btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.rd-votes-n { font-size: .84em; color: var(--text-2); }
.rd-probs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rd-probs li { display: grid; gap: 2px; border-inline-start: 2px solid var(--line); padding-inline-start: 10px; font-size: .9em; }
.rd-probs small { color: var(--text-3); font-size: .86em; }
.rd-ntab { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rd-nrow { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--rd-cols, 3), minmax(64px, 120px)); gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .9em; }
.rd-nrow:last-child { border-bottom: 0; }
.rd-nrow > span:not(:first-child) { justify-self: center; }
.rd-nrow > span:first-child { display: grid; }
.rd-nrow small { color: var(--text-3); font-size: .84em; }
.rd-nrow.head { background: var(--surface-2); font-size: .74em; color: var(--text-3); text-align: center; }
.rd-nmail { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9em; color: var(--text-2); }
@media (max-width: 560px) {
  .rd-nrow { grid-template-columns: minmax(0, 1fr) repeat(var(--rd-cols, 3), 52px); padding: 8px; }
  .rd-topic { grid-template-columns: 1fr; }
  .rd-topic-acts { justify-content: flex-start; }
}

/* ── Eigene Seiten: own folders, "⋯" and drag and drop in the sidebar (components/NavOwn.js) ── */
.home aside .nav-orow { position: relative; display: flex; align-items: center; border-radius: 8px; }
.home aside .nav-orow > a, .home aside .nav-orow > .nav-grp, .home aside .nav-orow > .nav-oren { flex: 1 1 auto; min-width: 0; }
.home aside .nav-orow > a { padding-inline-end: 30px; }
.home aside .nav-ofold { padding-inline-end: 30px; }
.home aside .nav-ofold small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-inline-start: 6px; }
.home aside .nav-more { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); font: inherit; line-height: 1; width: 24px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; visibility: hidden; }
.home aside .nav-orow:hover .nav-more, .home aside .nav-orow:focus-within .nav-more, .home aside .nav-more[aria-expanded="true"], .home aside .nav-orow:has(> a.on) .nav-more { visibility: visible; }
.home aside .nav-more:hover, .home aside .nav-more[aria-expanded="true"] { color: var(--text); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.home aside .nav-omenu { display: grid; margin: 2px 6px 6px 26px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.home aside .nav-omenu > button { font: inherit; font-size: .9em; text-align: start; border: 0; background: none; color: var(--text-2); padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.home aside .nav-omenu > button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.home aside .nav-omenu > button:disabled { cursor: default; color: var(--text-3); }
.home aside .nav-omenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.home aside .nav-omenu .nav-orm, .home aside .nav-orm { color: var(--k-bad); }
.home aside .nav-oask { display: grid; gap: 8px; margin: 2px 6px 6px 26px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--k-bad-soft); font-size: .86em; }
.home aside .nav-oask p { margin: 0; color: var(--text-2); }
.home aside .nav-oask p b { color: var(--text); font-weight: 600; }
.home aside .nav-oask > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.home aside .nav-oask .btn { padding: 5px 11px; font-size: .95em; }
.home aside .nav-danger, .sp .sp-danger { background: var(--k-bad); border-color: var(--k-bad); color: var(--bg); }
.home aside .nav-oren { padding: 2px 4px 2px 18px; }
.home aside .nav-oren .inp { width: 100%; font-size: .93em; padding: 5px 8px; border-color: var(--accent); }
.home aside .nav-osay { padding: 0 10px 4px 26px; }
.home aside .nav-addin { padding: 4px 10px 2px; }
.home aside .nav-addback { font-size: .86em; color: var(--text-2) !important; }
.home aside .nav-orow.nav-dropline::before { content: ""; position: absolute; inset-inline: 26px 10px; top: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.home aside .nav-orow.nav-target, .home aside .nav-ownlbl.nav-target { box-shadow: inset 0 0 0 1px var(--accent); }
.home aside .nav-orow.nav-ghost { opacity: .45; }
.home aside .nav-orow[draggable="true"] { cursor: grab; }

/* ── Einstellungen › Eigene Seiten (components/SettingsPages.js) ── */
.sp { display: grid; gap: 14px; }
.sp-intro { margin: 0; max-width: 70ch; }
.sp-fh { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.sp-list > .sp-fh:first-child { border-top: 0; }
.sp-fh b { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.sp-fh b small { font-weight: 400; color: var(--text-3); }
.sp-fh .sp-acts { display: flex; gap: 14px; text-transform: none; letter-spacing: 0; font-size: 1.25em; }
.sp-fh .sp-fren { flex: 1 1 auto; max-width: 320px; text-transform: none; letter-spacing: 0; font-size: 1.25em; padding: 4px 8px; }
.sp-fh[draggable="true"], .sp-row[draggable="true"] { cursor: grab; }
.sp-grip { color: var(--text-3); user-select: none; text-align: center; letter-spacing: 0; line-height: 1.35; }
.sp-grip.off { visibility: hidden; }
.sp-row .sp-grip { font-size: 1.05em; }
.sp-right { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.sp-rm { color: var(--k-bad); }
.sp-over { box-shadow: inset 0 2px 0 var(--accent); }
.sp-fh.sp-over { box-shadow: inset 0 0 0 1px var(--accent); }
.sp-ghost { opacity: .45; }
.sp-none { margin: 0; padding: 10px 16px 10px 56px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .88em; }
.sp-ask { display: grid; gap: 8px; padding: 12px 16px 14px 56px; border-top: 1px solid var(--line); background: var(--k-bad-soft); }
.sp-ask b { font-weight: 600; }
.sp-ask p { margin: 0; color: var(--text-2); font-size: .92em; max-width: 70ch; }
.sp-blocks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-chip { font-size: .84em; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--text-2); background: var(--surface); }
.sp-hint { padding-inline-start: 200px; }
.sp-choose { display: grid; gap: 2px; padding: 6px; }
.sp-choose > button:not(.link) { font: inherit; text-align: start; background: none; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; color: var(--text); display: grid; gap: 1px; }
.sp-choose > button:not(.link):hover { background: var(--surface-2); }
.sp-choose > button b { font-weight: 600; }
.sp-choose small { color: var(--text-3); font-size: .86em; }
.sp-choose > .link { justify-self: start; padding-inline: 12px; }
.sp-path { margin: 0; }
.sp-path code { font-family: var(--font-mono); font-size: .95em; color: var(--text-2); }
@media (max-width: 760px) {
  .sp-ask, .sp-none { padding-inline-start: 16px; }
  .sp-hint { padding-inline-start: 0; }
  .sp-right { flex-wrap: wrap; white-space: normal; }
  .home aside .nav-more { visibility: visible; }
}
.home aside .nav-oempty { display: block; padding: 3px 10px 6px 26px; color: var(--text-3); font-size: .8em; }

/* ── Werkraum (A11; design entwicklung/design/werkraum-v1.html): components/PlatformWerkraum.js, Konsolen-Board ── */
.kb-card:has(> .kb-wr) { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.kb-wr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 4px 10px; border-bottom: 1px solid var(--line); font-size: .74em; color: var(--text-3); background: var(--bg); min-width: 0; }
.kb-wrz { font-family: var(--font-mono); font-size: .95em; color: var(--text); background: var(--surface-2); border-radius: 5px; padding: 0 5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kb-wrn { font-style: italic; }
.kb-wrdz { margin-left: auto; color: var(--wire-4); font-weight: 700; }
.kb-card.kb-dz { border-color: var(--wire-4); }
.kb-card.kb-dz.kb-dz-soft { border-color: var(--wire-5); }
.kb-card.kb-dz-soft .kb-wrdz { color: var(--wire-5); }
.kb-remote { color: var(--text-2); }
.kb-st.s-dz { background: var(--wire-4); }

.wr { display: grid; gap: 14px; min-width: 0; }
.wr-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: start; }
.wr-intro h3, .wr-hn h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.wr-intro { display: grid; gap: 8px; }
.wr-form { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; min-width: 0; }
.wr-form h4 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.wr-f { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.wr-f > span, .wr-f > legend { font-size: .8rem; color: var(--text-3); font-weight: 600; padding: 0; margin-bottom: 2px; }
.wr-f2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.wr-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; background: var(--bg); }
.wr-opt input { margin-top: 4px; accent-color: var(--accent); }
.wr-opt b { font-weight: 600; font-size: .9rem; }
.wr-opt span { grid-column: 2; color: var(--text-2); font-size: .82rem; }
.wr-opt:has(input:checked) { border-color: var(--text-3); background: var(--surface); }
.wr-chk { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--text-2); }
.wr-chk input { accent-color: var(--accent); }
.wr-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.wr-sp { flex: 1; }
.wr-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wr-hn { display: grid; gap: 2px; min-width: 0; }
.wr-hn small { color: var(--text-3); font-size: .82rem; }
.wr-faces { display: flex; }
.wr-faces .wr-av { margin-left: -7px; } .wr-faces .wr-av:first-child { margin-left: 0; }
.wr-av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .62rem; font-weight: 700; font-style: normal; color: var(--bg); background: var(--text-3); border: 2px solid var(--surface); flex: none; }
.wr-av.s { width: 20px; height: 20px; font-size: .52rem; border-width: 1.5px; }
.wr-rules { display: flex; gap: 6px; flex-wrap: wrap; }
.wr-rule { font-size: .76rem; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--text-2); background: var(--surface); white-space: nowrap; }
.wr-rule b { color: var(--text); font-weight: 600; }
.wr-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9rem; border: 1px solid var(--wire-5); border-radius: 10px; padding: 8px 12px; }
.wr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.wr-col { padding: 14px 16px; display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--line); min-width: 0; }
.wr-col:first-child { border-left: 0; }
.wr-col h5 { margin: 0; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.wr-col h5 small { font-size: 1em; letter-spacing: 0; text-transform: none; }
.wr-person { display: grid; gap: 6px; }
.wr-person > b { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.wr-agent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; margin-left: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.wr-agent .kb-st { margin-top: 6px; }
.wr-agent.dz { border-color: var(--wire-4); background: color-mix(in srgb, var(--wire-4) 8%, var(--surface)); }
.wr-agent.dz.soft { border-color: var(--wire-5); background: color-mix(in srgb, var(--wire-5) 8%, var(--surface)); }
.wr-an { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: .86rem; }
.wr-an b { font-weight: 600; }
.wr-an small, .wr-where { color: var(--text-3); font-size: .74rem; }
.wr-chips, .wr-where { grid-column: 2; display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; }
.wr-zone { font-family: var(--font-mono); font-size: .7rem; border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--pc, var(--text-3)) 14%, transparent); color: var(--text); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wr-tree { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 6px; min-width: 0; }
.wr-row { display: flex; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 6px; min-width: 0; }
.wr-row code { font-family: var(--font-mono); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wr-row.dz { background: color-mix(in srgb, var(--wire-4) 9%, transparent); box-shadow: inset 2px 0 0 var(--wire-4); }
.wr-row.dz.soft { background: color-mix(in srgb, var(--wire-5) 10%, transparent); box-shadow: inset 2px 0 0 var(--wire-5); }
.wr-dztag { font-size: .66rem; font-weight: 700; color: var(--wire-4); white-space: nowrap; }
.wr-row.soft .wr-dztag { color: var(--wire-5); }
.wr-ov { margin: 0; font-size: .8rem; color: var(--text-2); }
.wr-ov code { font-family: var(--font-mono); font-size: .9em; }
.wr-feed { display: grid; gap: 6px; }
.wr-ev { display: grid; gap: 2px; font-size: .84rem; padding: 7px 10px; border-radius: 10px; color: var(--text-2); }
.wr-ev small { color: var(--text-3); font-size: .74rem; }
.wr-ev.dz { border: 1px solid var(--wire-4); background: color-mix(in srgb, var(--wire-4) 8%, transparent); color: var(--text); }
.wr-ev .link { justify-self: start; }
.wr-thread { border: 1px solid var(--text-3); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; display: grid; gap: 12px; }
.wr-th-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wr-th-head code { font-family: var(--font-mono); font-size: .9rem; }
.wr-pill { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--wire-4); color: var(--bg); }
.wr-pill.soft { background: var(--wire-5); }
.wr-msgs { display: grid; gap: 10px; max-height: 360px; overflow-y: auto; }
.wr-msg { display: grid; gap: 3px; }
.wr-mh { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .8rem; color: var(--text-3); }
.wr-mh b { color: var(--text); font-weight: 600; }
.wr-mb { background: var(--bg); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 7px 11px; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.wr-msg.system .wr-mb { background: none; border-style: dashed; color: var(--text-2); }
.wr-msg.proposal .wr-mb { border-color: var(--text-3); }
.wr-prop { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.wr-k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.wr-votes { margin: 0; font-size: .82rem; color: var(--text-2); }
.wr-say { display: flex; gap: 8px; }
.wr-say .inp { flex: 1; min-width: 0; }
@media (max-width: 980px) {
  .wr-cols { grid-template-columns: minmax(0, 1fr); }
  .wr-col { border-left: 0; border-top: 1px solid var(--line); }
  .wr-col:first-child { border-top: 0; }
  .wr-start { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .wr-f2 { grid-template-columns: minmax(0, 1fr); } }
/* trinity-kern (SettingsKern.js, Setup › trinity-kern; design kern-suite.html) */
.ks-panel { display: grid; gap: 0; }
.ks-grp { display: grid; border-top: 1px solid var(--line); }
.ks-grp:first-child { border-top: 0; }
.ks-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0 4px; }
.ks-gh b { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.ks-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 7px 0; }
.ks-t { display: grid; gap: 1px; min-width: 0; }
.ks-t b { font-weight: 600; overflow-wrap: anywhere; }
.ks-t small { color: var(--text-3); }
.ks-t code { font-family: var(--font-mono); font-size: .9em; }
.ks-row.off .ks-t b { color: var(--text-3); font-weight: 500; }
.ks-tag { font-size: .72em; font-weight: 600; border-radius: 99px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; background: var(--surface-2); color: var(--text-3); vertical-align: 1px; }
.ks-tag.new { background: var(--accent-soft); color: var(--accent-text); }
.ks-tag.change { background: var(--k-warn-soft); color: var(--k-warn); }
.ks-link { margin-left: 8px; font-size: .85em; font-weight: 400; }
.ks-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.ks-msg { margin-left: auto; }
.s3-panel.ks-panel { padding-top: 4px; }
@media (max-width: 720px) { .ks-row { grid-template-columns: minmax(0, 1fr); } }

/* ── Phasen in einer Aufgabe (engine/lib/phases.js; design entwicklung/design/spec-aufgaben.html v2) ── */
.tph { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.tph-p { padding: 10px 14px; display: grid; gap: 2px; border-left: 1px solid var(--line); min-width: 0; }
.tph-p:first-child { border-left: 0; }
.tph-p b { font-weight: 600; font-size: .95em; display: flex; gap: 8px; align-items: center; min-width: 0; }
.tph-p small { color: var(--text-3); font-size: .8em; }
.tph-p.past b { color: var(--text-2); }
.tph-p.on { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.tph-n { font-family: var(--font-mono); font-size: .74em; font-weight: 600; color: var(--text-3); }
.tph-p.on .tph-n { color: var(--accent-text); }
.tph-ok { color: var(--accent-text); font-weight: 700; }
.tph-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-3); display: inline-block; flex: none; }
.tph-dot.on { border: 0; width: 8px; height: 8px; background: var(--accent); }
.tph-dot.wait { background: var(--wire-5, var(--accent)); }
.tph-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tph-bad { color: var(--wire-5, var(--text-2)); }
.tph-res { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .9em; color: var(--text-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.tph-res b { color: var(--text); font-weight: 600; }
.tph-res.bad { border-color: color-mix(in oklab, var(--wire-5, var(--accent)) 50%, var(--line)); }
.tph-sec { border-radius: 8px; padding: 2px 10px 6px; margin-inline: -10px; }
.tph-sec.ph-on { background: var(--accent-soft); }
.tph-sec.ph-past, .tph-sec.ph-next { opacity: .72; }
@media (max-width: 720px) { .tph { grid-template-columns: minmax(0, 1fr); } .tph-p { border-left: 0; border-top: 1px solid var(--line); } .tph-p:first-child { border-top: 0; } }
.part-check { display: flex; gap: 8px; align-items: center; font-size: .9em; color: var(--text-2); }
.tph-k { gap: 8px; }

/* ── Baseline › Bestandsaufnahme (BaselineBestand.js, lib/bestand.js; design entwicklung/design/bestandsaufnahme.html) ── */
.ba { display: grid; gap: 14px; min-width: 0; }
.ba-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 14px 16px; }
.ba-head > .hintline { grid-column: 1 / -1; }
.ba-big { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ba-big b { font-family: var(--font-display); font-weight: 300; font-size: 2.2em; line-height: 1; font-variant-numeric: tabular-nums; }
.ba-big b small { font-size: .45em; color: var(--text-3); margin-left: 2px; }
.ba-big span { color: var(--text-2); }
.ba-headt { display: grid; gap: 2px; min-width: 0; }
.ba-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ba-grp { display: grid; padding: 0; overflow: hidden; }
.ba-grp > h5 { margin: 0; padding: 12px 16px 6px; font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ba-grp > h5 span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ba-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 9px 16px; font-size: .92em; border-top: 1px solid var(--line); }
.ba-grp > h5 + .ba-row, .ba-grp > h5 + .ba-df { border-top: 0; }
.ba-row.off .t b { color: var(--text-3); font-weight: 500; text-decoration: line-through; }
.ba-row .t { display: grid; gap: 2px; min-width: 0; }
.ba-row .t b { font-weight: 600; overflow-wrap: anywhere; }
.ba-row .t small { color: var(--text-3); overflow-wrap: anywhere; }
.ba-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: end; }
.ba-who { font-size: .82em; color: var(--text-2); white-space: nowrap; }
.ba-sz { font-family: var(--font-mono); font-size: .78em; color: var(--text-3); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; min-width: 22px; text-align: center; }
.ba-now { font-size: .82em; color: var(--accent-text); white-space: nowrap; }
.ba-task { font-family: var(--font-mono); font-size: .8em; color: var(--text-2); white-space: nowrap; }
.ba-new { font-size: .72em; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border-radius: 99px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.ba-chk { width: 16px; height: 16px; accent-color: var(--text); margin: 0; }
.ba-df { display: grid; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.ba-df-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ba-df-h b { font-weight: 600; }
.ba-df-h small { color: var(--text-3); }
.ba-files { display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.ba-file { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); min-width: 0; }
.ba-file:first-child { border-top: 0; }
.ba-file.on { background: var(--accent-soft); }
.ba-file .p { display: grid; gap: 1px; min-width: 0; font-size: .8em; }
.ba-file .p code { font-family: var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.ba-file .p small { color: var(--text-3); }
.ba-file .ba-run { color: var(--accent-text); }
.ba-code { font-family: var(--font-mono); font-size: .78em; line-height: 1.55; color: var(--text); min-width: 0; }
.ba-code div { white-space: pre-wrap; overflow-wrap: anywhere; }
.ba-file button { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 99px; padding: 3px 12px; font: inherit; font-size: .82em; cursor: pointer; white-space: nowrap; }
.ba-file button:disabled { cursor: default; }
.ba-file.on button { background: var(--text); color: var(--bg); border-color: var(--text); }
.ba-after { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.ba-after > p { margin: 0; padding: 7px 10px; font-size: .84em; color: var(--text-2); border-bottom: 1px solid var(--line); background: var(--surface); }
.ba-dl { font-family: var(--font-mono); font-size: .76em; line-height: 1.6; }
.ba-dl .f { padding: 4px 10px; color: var(--text-3); border-top: 1px solid var(--line); font-family: var(--font-body); font-size: 1.05em; }
.ba-dl .f:first-child { border-top: 0; }
.ba-dl .l { display: grid; grid-template-columns: 16px 30px minmax(0, 1fr); padding-right: 8px; }
.ba-dl .l i { font-style: normal; opacity: .7; text-align: right; padding-right: 8px; }
.ba-dl .l span { white-space: pre-wrap; overflow-wrap: anywhere; }
.ba-dl .del { background: var(--k-bad-soft); color: var(--k-bad); }
.ba-dl .add { background: var(--accent-soft); color: var(--accent-text); }
.s3-bl .ba { margin-top: 14px; }
/* a narrow box (the setup slide, a phone): the path on top, the line and the button below */
.ba-df { container-type: inline-size; }
@container (max-width: 560px) { .ba-file { grid-template-columns: minmax(0, 1fr) auto; } .ba-file .p { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; } }
@media (max-width: 820px) {
  .ba-head { grid-template-columns: minmax(0, 1fr); }
  .ba-row { grid-template-columns: minmax(0, 1fr); }
  .ba-r { justify-content: start; }
  .ba-file { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ba-file button { justify-self: start; }
}