/* Pit Crew. Tokens aus DESIGN.md, Palette aus hot tools. Dark zuerst, Light per prefers-color-scheme. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
:root {
  --bg: #142426;
  --surface: #1B2F31;
  --hairline: #3C5354;
  --text: #FFF6E6;
  --text-muted: #C7CCC5;
  --text-faint: #98A39F;
  --accent: #FFBB9D;
  --accent-hover: #FFCAAF;
  --accent-text: #3A211B;
  --danger-text: #F2A69E;
  --link: #FFBB9D;
  --xs: 4px; --sm: 8px; --md: 12px; --lg: 16px; --xl: 24px; --xxl: 32px;
  --r-sm: 4px; --r-md: 6px;
  --sidebar: 240px; --queue-max: 680px; --prompt-bar: 44px;
  --wash: rgba(255, 246, 230, 0.05);
  --t: 120ms ease-out;
  --t-slow: 160ms ease-out;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: dark;
}
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FFF6E6;
    --surface: #FFFAF1;
    --hairline: #E5D8C4;
    --text: #1B2F31;
    --text-muted: #5E6D6D;
    --text-faint: #7B8786;
    --accent: #FFBB9D;
    --accent-hover: #F29E7F;
    --accent-text: #572C22;
    --danger-text: #A5433D;
    --link: #B5583A;
    --wash: rgba(27, 47, 49, 0.05);
    color-scheme: light;
  }
}

html[data-theme="light"] {
  --bg: #FFF6E6; --surface: #FFFAF1; --hairline: #E5D8C4; --text: #1B2F31; --text-muted: #5E6D6D; --text-faint: #7B8786;
  --accent: #FFBB9D; --accent-hover: #F29E7F; --accent-text: #572C22; --danger-text: #A5433D; --link: #B5583A; --wash: rgba(27, 47, 49, 0.05);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #142426; --surface: #1B2F31; --hairline: #3C5354; --text: #FFF6E6; --text-muted: #C7CCC5; --text-faint: #98A39F;
  --accent: #FFBB9D; --accent-hover: #FFCAAF; --accent-text: #3A211B; --danger-text: #F2A69E; --link: #FFBB9D; --wash: rgba(255, 246, 230, 0.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 21px; font-weight: 400;
  font-feature-settings: "cv11", "ss03", "calt";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; min-height: 100dvh;
}
.row .lever, .report td, .art .kv.nums .n { font-variant-numeric: tabular-nums; }
.title { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.meta { font-size: 12px; line-height: 16px; color: var(--text-faint); }
.display { font-size: 20px; line-height: 28px; font-weight: 600; }
.muted { color: var(--text-muted); }
.hidden { display: none !important; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--text); }
button, input, textarea { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--link); outline-offset: 2px; }
p { margin: 0; }
ol { margin: 0; padding-left: 20px; }

/* Textaktionen und die eine gefuellte Aktion */
.act { color: var(--text-muted); height: 32px; padding: 0 var(--xs); white-space: nowrap; transition: color var(--t); }
.act:hover { color: var(--text); }
.act.danger { color: var(--danger-text); }
.act.primary {
  background: var(--accent); color: var(--accent-text); font-weight: 600;
  border-radius: var(--r-md); padding: 0 var(--md); transition: background var(--t);
}
.act.primary:hover { background: var(--accent-hover); }
.act .key { display: none; margin-left: var(--sm); font-size: 12px; line-height: 16px; font-weight: 400; color: inherit; opacity: 0.7; }
.act:hover .key { display: inline; }

/* Header: Name, ein Satz als Begruessung, darunter eine Haarlinie, die sich mit jeder Entscheidung fuellt */
.top {
  position: relative;
  display: flex; align-items: baseline; gap: var(--lg);
  padding: var(--md) var(--xl); border-bottom: 1px solid var(--hairline);
}
.top::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px;
  width: var(--progress, 0%); background: var(--accent); transition: width 420ms var(--ease);
}
.top .line a { color: var(--link); margin-left: var(--xs); }
.top .line .meta { color: var(--text-faint); }
.top .brand { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.top .line { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs { display: flex; gap: var(--lg); }
.tabs button { color: var(--text-muted); }
.tabs button.active { color: var(--text); font-weight: 600; }
.menu { display: none; color: var(--text-muted); width: 24px; height: 22px; align-self: center; }
.menu span { display: block; height: 1px; background: currentColor; margin: 5px 0; }
.qhead { display: none; }

/* Drei Flaechen */
.layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); flex: 1; min-height: 0; }
.runs { border-right: 1px solid var(--hairline); padding: var(--lg) var(--xl); overflow: auto; }
.runs .head { color: var(--text-faint); font-size: 12px; line-height: 16px; margin-bottom: var(--sm); }
.run { padding: var(--sm) 0; display: flex; align-items: center; gap: var(--sm); }
.run .pick { display: block; flex: 1; min-width: 0; text-align: left; }
.run .run-now { flex: none; height: 24px; padding: 0; color: var(--text-faint); font-size: 12px; line-height: 16px; }
.run:hover .run-now, .run .run-now:focus-visible { color: var(--link); }
.runs .newpb { margin-top: var(--md); }
.run .name { display: block; }
.run .when { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run .name { color: var(--text); }
.run .when { color: var(--text-faint); font-size: 12px; line-height: 16px; }
.run .pick { padding: var(--xs) var(--sm); margin: 0 0 0 calc(-1 * var(--sm)); border-radius: var(--r-md); transition: background var(--t); }
.run .pick:hover, .run.selected .pick { background: var(--wash); }
.run.selected .name { color: var(--link); }
.run .now { display: block; height: 24px; padding: 0; color: var(--link); }
.run.running .when { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.main { overflow: auto; min-width: 0; padding: var(--lg) var(--xl) var(--xxl); }
.panel { display: none; max-width: var(--queue-max); margin: 0 auto; }
.panel.active { display: block; }
.panel.wide { max-width: 1100px; }
.empty { color: var(--text-muted); padding: var(--xxl) 0; }
.done-state { padding: var(--xxl) 0; }
.done-state .display { display: block; margin-bottom: var(--sm); }
.done-state .muted { max-width: 48ch; }
.batch { padding: var(--lg) 0 0 var(--lg); }
.wink { padding: 0 0 var(--md) var(--sm); transition: opacity var(--t-slow), transform var(--t-slow); }
.wink.leaving { opacity: 0; transform: translateX(12px); }
.day { padding: var(--xl) 0 var(--xs) var(--xl); }
.day:first-child { padding-top: var(--sm); }
.done-state .muted + .muted { margin-top: var(--sm); }
.report .big span { display: block; }
.report .big .muted + .muted { margin-top: var(--xs); }

/* Vorschlag: Text, Hairline, 2px Fokusbalken, Wash bei Hover und Fokus. Entschiedenes gleitet nach rechts hinaus. */
.row {
  position: relative; padding: var(--lg) var(--lg) var(--lg) var(--xl);
  margin: 0 calc(-1 * var(--lg));
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t), opacity var(--t-slow), transform var(--t-slow);
}
.row:hover, .row.focused { background: var(--wash); }
.row::before { content: ""; position: absolute; left: 0; top: var(--lg); bottom: var(--lg); width: 2px; background: transparent; transition: background var(--t); }
.row.focused::before, .row.pending::before { background: var(--link); }
.row.leaving { opacity: 0; transform: translateX(12px); pointer-events: none; }
.row.collapse { overflow: hidden; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; transition: height 170ms var(--ease), padding 170ms var(--ease); }
.row.enter, .enter { animation: enter 220ms var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.arts.reveal { animation: reveal 180ms var(--ease) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.row .subject span:last-child { transition: color var(--t); }
@media (hover: hover) { .row .subject:hover span:last-child { color: var(--link); } }
.row .subject { display: flex; align-items: center; gap: var(--sm); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; }
.row .initials {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-muted); letter-spacing: 0;
}
.row .hyp { margin-top: var(--sm); }
.row .lever { margin-top: var(--sm); color: var(--text); font-weight: 600; }
.row .prov { margin-top: var(--xs); }
.row .actions { display: flex; align-items: center; gap: var(--lg); margin-top: var(--md); flex-wrap: wrap; }
.row .err { color: var(--danger-text); font-size: 12px; line-height: 16px; }

/* Zwei Spalten (ui.split): dieselben Zeilen, links kurz, rechts das Detail. Kein neues Chrome. */
.split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0 var(--xxl); align-items: start; }
.split .lst { min-width: 0; }
.split .detail { position: sticky; top: 0; min-width: 0; }
.split .detail .row { margin: 0; padding-left: var(--lg); border-bottom: 0; }
.split .detail .row:hover, .split .detail .row.focused { background: transparent; }
.split .detail .row::before { display: none; }
.split .detail .row .subject { cursor: default; }
.row.compact { padding: var(--md) var(--md) var(--md) var(--lg); cursor: pointer; }
.row.compact .lever { margin-top: var(--xs); }
.row.compact .hyp { margin-top: var(--xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.compact .subject { cursor: pointer; }

/* Artefakte: beschriftete Textbloecke */
.arts { margin-top: var(--lg); display: flex; flex-direction: column; gap: var(--lg); }
.art .label { margin-bottom: var(--xs); }
.art .body { white-space: pre-wrap; }
.art .tone { margin-top: var(--xs); }
.art .kv { display: grid; grid-template-columns: 110px 1fr; gap: var(--xs) var(--md); }
.art .kv .k { color: var(--text-faint); font-size: 12px; line-height: 16px; padding-top: 3px; }
.diff { display: grid; grid-template-columns: 110px 1fr 1fr; gap: var(--xs) var(--md); }
.diff .k { color: var(--text-faint); font-size: 12px; line-height: 16px; }
.diff .n { font-weight: 600; }
.src li { color: var(--text-muted); }
.src ul { margin: var(--xs) 0 0; padding-left: 20px; }

/* Editor: die eine Flaeche mit surface */
.editor { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sm) var(--md); }
.editor input, .editor textarea { width: 100%; display: block; }
.editor textarea { min-height: 140px; resize: vertical; margin-top: var(--sm); }
.editor input + textarea { border-top: 1px solid var(--hairline); padding-top: var(--sm); }

/* Erledigt */
.row.done { padding-top: var(--md); padding-bottom: var(--md); }
.row.done .subject { cursor: default; }
.row.done .prov { margin-top: var(--xs); }
.row .outcome { display: flex; gap: var(--lg); margin-top: var(--sm); flex-wrap: wrap; }

/* Report */
.report .big { margin: var(--sm) 0 var(--xxl); }
.report .big .display { display: block; }
.report table { width: 100%; border-collapse: collapse; }
.report th { text-align: right; font-weight: 400; color: var(--text-faint); font-size: 12px; line-height: 16px; padding: 0 0 var(--sm); }
.report td { text-align: right; padding: var(--sm) 0; border-top: 1px solid var(--hairline); }
.report th:first-child, .report td:first-child { text-align: left; }

/* Prompt-Zeile: ein Input */
.prompt {
  height: var(--prompt-bar); display: flex; align-items: center;
  padding: 0 var(--xl); background: var(--surface); border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.prompt input { flex: 1; height: 100%; }
.prompt input::placeholder { color: var(--text-faint); }

/* Hilfe hinter ? und Token-Dialog: surface, hairline, kein Schatten */
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--xl); max-width: 420px; width: calc(100vw - 32px); }
dialog::backdrop { background: transparent; }
dialog .lines { display: grid; grid-template-columns: 64px 1fr; gap: var(--xs) var(--lg); margin-top: var(--md); }
dialog .lines span:nth-child(odd) { color: var(--text-muted); }
dialog input { width: 100%; border-bottom: 1px solid var(--hairline); padding: var(--sm) 0; margin: var(--md) 0 var(--lg); }

/* Setup: eine Seite, Felder mit Hairline, ein gefuellter Button, eine Vorschau als Text */
.setup { max-width: 920px; margin: 0 auto; padding: var(--xxl) var(--xl); }
.setup h1 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--xs); }
.setup .intro { color: var(--text-muted); margin-bottom: var(--xxl); max-width: 64ch; }
.setup section { padding: var(--xl) 0; border-top: 1px solid var(--hairline); }
.setup section h2 { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--xs); }
.setup section .hint { color: var(--text-muted); margin-bottom: var(--md); max-width: 64ch; }
.setup label { display: block; color: var(--text-faint); font-size: 12px; line-height: 16px; margin-top: var(--md); }
.setup input[type="text"], .setup input[type="email"], .setup input[type="number"], .setup input[type="password"], .setup textarea {
  width: 100%; display: block; padding: var(--sm) 0; border-bottom: 1px solid var(--hairline);
}
.setup input::placeholder, .setup textarea::placeholder { color: var(--text-faint); }
.setup textarea { min-height: 96px; resize: vertical; }
.setup .choice { display: flex; gap: var(--lg); margin-top: var(--sm); }
.setup .choice button { color: var(--text-muted); }
.setup .choice button.on { color: var(--text); font-weight: 600; }
.setup .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--xl); }
.setup .foot { display: flex; align-items: center; gap: var(--lg); padding-top: var(--xl); border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.setup .status { color: var(--text-muted); }
.setup .err { color: var(--danger-text); margin-top: var(--xs); }
.setup .err:empty { display: none; }
.setup .voice { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 var(--xxl); align-items: start; }
.setup .preview { position: sticky; top: var(--xl); padding: var(--xl) 0; }
.setup .preview .body { white-space: pre-wrap; margin-top: var(--xs); }
.setup #connections p { margin-top: var(--xs); }
.setup #connections a.act, .setup #connections button.act { height: auto; padding: 0 0 0 var(--sm); color: var(--link); }
.setup #connections form.connect { max-width: 480px; padding-bottom: var(--md); }

/* Setup, Abschnitt Gelernt: Vorher/Nachher nebeneinander, Text statt Diff-Farben */
.setup .learned-ex { padding: var(--md) 0; border-top: 1px solid var(--hairline); }
.setup .learned-ex .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--xl); margin-top: var(--xs); }
.setup .learned-ex .body { white-space: pre-wrap; margin-top: var(--xs); }
.setup .learned-rj { margin: var(--xs) 0 0; padding-left: 20px; color: var(--text-muted); }
.setup #learned-list button.act { height: auto; padding: 0; color: var(--link); }
.setup code { font-size: 12px; }

/* Playbook-Editor: Felder mit Hairline, ein gefuellter Button */
.editor-page label { display: block; margin-top: var(--lg); }
.editor-page .inline { width: 100%; display: block; padding: var(--sm) 0; border-bottom: 1px solid var(--hairline); }
.editor-page textarea.inline { resize: vertical; white-space: pre-wrap; }
.editor-page .title { margin-bottom: var(--xs); }
.editor-page > .meta { margin-top: var(--xs); }
.editor-page .err { color: var(--danger-text); margin-top: var(--sm); }
.editor-page .err:empty { display: none; }
.editor-page .actions { display: flex; gap: var(--lg); margin-top: var(--xl); flex-wrap: wrap; }

/* Setup, Abschnitt Modell: Picker als Textauswahl, ein Feld fuer "anderes Modell" */
.setup .choice.wrap { flex-wrap: wrap; gap: var(--sm) var(--lg); }
.setup .choice .other { width: 180px; border-bottom: 1px solid var(--hairline); padding: var(--xs) 0; }
.setup #keyblock, .setup #models { margin-top: var(--md); }
.setup #models label { margin-top: var(--lg); }

/* Erstkontakt: nur die Karten, keine Sidebar, keine Prompt-Bar, keine Tabs. Danach blenden sie in 120ms ein. */
body.onboarding .runs, body.onboarding .prompt, body.onboarding .tabs, body.onboarding .menu { display: none; }
body.onboarding .layout { grid-template-columns: minmax(0, 1fr); }
body.reveal .runs, body.reveal .prompt, body.reveal .tabs { animation: fadein var(--t); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Onboarding-Karten: beschriftete Felder, Eingabe nur wo die Crew unsicher war oder der Rep aendert */
.art .field { margin-top: var(--md); }
.art .field:first-child { margin-top: 0; }
.art .inline { width: 100%; display: block; padding: var(--xs) 0; border-bottom: 1px solid var(--hairline); }
.art textarea.inline { min-height: 0; resize: none; overflow: hidden; white-space: pre-wrap; field-sizing: content; }
.art .choice { display: flex; gap: var(--lg); }
.art .choice .act { padding: 0; }
.art .choice .act.on { color: var(--text); font-weight: 600; }
.art .kv.nums { grid-template-columns: 1fr 140px; }
.art .kv.nums .k { font-size: 14px; line-height: 21px; color: var(--text); padding-top: 0; }
.art .kv.nums .n { text-align: right; font-weight: 600; }
.art .kv.nums input.inline { text-align: right; }
.pushask { margin: 0 0 var(--lg); }
.pushask a { margin-left: var(--md); }

/* /start: drei Bildschirme, eine Seite */
.start { width: 100%; max-width: 520px; margin: 0 auto; padding: 12vh var(--xl) var(--xxl); }
.start .segments { display: flex; gap: var(--sm); margin-bottom: var(--xxl); }
.start .segments span { flex: 1; height: 1px; background: var(--hairline); transition: background 300ms ease-out; }
.start .segments span.on { background: var(--accent); }
.start .display { display: block; margin-bottom: var(--sm); }
.start .body { margin-bottom: var(--xl); }
.start .options { display: flex; flex-direction: column; }
.start .options .act { height: 44px; padding: 0; color: var(--text); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--hairline); text-align: left; }
.start .options .act:last-child { border-bottom: 1px solid var(--hairline); }
.start .options .act:hover { color: var(--link); }
.start .options .act.soon { color: var(--text-faint); cursor: default; }
.start .options .act.soon:hover { color: var(--text-faint); }
.start .options .act.later { color: var(--text-muted); border: 0; margin-top: var(--md); justify-content: flex-start; }
.start .options .act.later:last-child { border-bottom: 0; }
.start > .meta, .start .reading { margin-top: var(--lg); }
.start .reading { min-height: 16px; }
.start .reading p { color: var(--text-muted); transition: color 300ms var(--ease); }
.start .reading p + p { margin-top: var(--xs); }
.start .reading p.past { color: var(--text-faint); }

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu { display: block; }
  .top { gap: var(--md); padding: var(--md) var(--lg); }
  .top .line { display: none; }
  .qhead { display: block; padding: 0 0 var(--sm) var(--md); }
  .runs {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); z-index: 2;
    background: var(--surface); transform: translateX(-100%); transition: transform var(--t);
  }
  .runs.open { transform: none; }
  .main { padding: var(--md) var(--lg) var(--xxl); }
  .prompt { padding: 0 var(--lg); }
  .row { padding: var(--lg) var(--md) var(--lg) var(--lg); margin: 0 calc(-1 * var(--md)); }
  .row .actions { gap: var(--sm); flex-wrap: nowrap; overflow: hidden; }
  .row .actions .act.primary { padding: 0 var(--sm); }
  .row .actions .act:not(.primary) { padding: 0; }
  .row .actions .err { white-space: normal; }
  .art .kv, .diff { grid-template-columns: 1fr; }
  .diff .k { grid-column: 1; }
  .setup { padding: var(--xl) var(--lg); }
  .setup .grid { grid-template-columns: 1fr; }
  .setup .voice { grid-template-columns: 1fr; }
  .setup .learned-ex .pair { grid-template-columns: 1fr; }
  .setup .preview { position: static; padding: 0 0 var(--xl); border-top: 1px solid var(--hairline); padding-top: var(--xl); }
  .start { padding: var(--xxl) var(--lg); }
  .art .kv.nums { grid-template-columns: 1fr 120px; }
  .pushask { margin-left: var(--md); }
}

/* /start: Inline-Formular unter einer Konto-Zeile (Twenty-Key, Google-App) */
.start form.connect { padding: var(--md) 0 var(--lg); border-top: 1px solid var(--hairline); }
.start form.connect label { display: block; color: var(--text-faint); font-size: 12px; line-height: 16px; margin-top: var(--md); }
.start form.connect input { width: 100%; display: block; padding: var(--sm) 0; border-bottom: 1px solid var(--hairline); color: var(--text); }
.start form.connect input::placeholder { color: var(--text-faint); }
.start form.connect .meta { margin-top: var(--md); }
.start form.connect .meta.err { color: var(--danger-text); }
.start form.connect code { font-size: 12px; }
.start form.connect .row-actions { display: flex; gap: var(--lg); margin-top: var(--lg); align-items: center; }
.start form.connect .row-actions .act { height: 32px; border: 0; }
.start form.connect .row-actions .act.primary { padding: 0 var(--md); }

/* Wer Bewegung abschaltet, bekommt sofortige Zustaende. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Debrief nach dem Anruf: ein Textfeld, eine gefuellte Aktion, Diktat als Textaktion */
.row.debrief .debrief-box { margin-top: var(--md); }
.row.debrief textarea { width: 100%; display: block; resize: vertical; min-height: 66px; }
.row.debrief textarea::placeholder { color: var(--text-faint); }
.report form.connect label { display: block; }
.report form.connect .inline { width: 100%; max-width: 360px; display: block; padding: var(--sm) 0; border-bottom: 1px solid var(--hairline); }
.hosted-only { display: none; }
body.hosted .hosted-only { display: inline; }
.start form.connect textarea { width: 100%; display: block; padding: var(--sm) 0; border-bottom: 1px solid var(--hairline); color: var(--text); resize: vertical; }
.start form.connect textarea::placeholder { color: var(--text-faint); }

/* Sidebar: Fusszeile mit Setup und Abmelden, per [ einklappbar */
.runs { display: flex; flex-direction: column; }
.runs .foot-links { margin-top: auto; padding-top: var(--xl); display: flex; gap: var(--lg); }
body.sidebar-closed .layout { grid-template-columns: minmax(0, 1fr); }
body.sidebar-closed .runs { display: none; }
@media (max-width: 860px) { body.sidebar-closed .runs { display: flex; } body.sidebar-closed .layout { grid-template-columns: minmax(0, 1fr); } }

/* Prompt-Zeile: rechts ein Wort, wer denkt */
.prompt #prompt-meta { flex: none; margin-left: var(--lg); white-space: nowrap; }
.prompt #prompt-meta a { color: var(--link); }
@media (max-width: 860px) { .prompt #prompt-meta { display: none; } }

/* Leerer Zustand: drei Textaktionen statt einer Illustration */
.empty .suggest { display: flex; gap: var(--lg); flex-wrap: wrap; margin-top: var(--md); }
.empty .suggest a { color: var(--link); }

/* Mobile Sheet: ein hauchduenner Schleier dahinter, damit klar ist, dass Antippen schliesst */
@media (max-width: 860px) {
  .runs.open::after { content: ""; position: fixed; inset: 0; left: min(300px, 85vw); background: var(--wash); }
}

/* Setup: Darstellung als Textauswahl wie die Anrede */
.setup .choice.theme button { color: var(--text-muted); }
.setup .choice.theme button.on { color: var(--text); font-weight: 600; }