/* ────────────────────────────────────────────────────────────────────────
   Kintari Cowork Server — appearance

   Layout foundations and original "paper and ink" component styles.
   The current colour system and visual refinements are in appearance.css,
   loaded after this file (visual refresh requested 2026-09-07).

   Kintari is its own brand. The danielschlager.ai identity manual does not
   apply here.

   Every colour is a custom property on :root. There is only a light
   appearance, the same as kivanto.ai (dark mode removed 2026-09-18).
   ──────────────────────────────────────────────────────────────────── */

/* ── Fonts, served locally ─────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/SourceSerif4-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/SourceSerif4-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Colours and measurements ──────────────────────────────────────── */

:root {
  /* Palette A, light.

     ⭐ Grund und Karte standen bis 2026-09-05 anderthalb Prozent
     auseinander, und eine weisse Karte auf warmweissem Grund las sich
     nicht als gehoben, sondern als Zufall. Der Abstand ist jetzt gross
     genug, dass die drei Spalten vor dem Inhalt stehen, und klein genug,
     dass die Palette warm bleibt: Karte, Grund, Vertiefung. */
  --ground: #f6f4ef;
  --surface: #ecebe3;
  --surface-raised: #ffffff;
  --text: #1c1b18;
  --text-quiet: #6b6862;
  --accent: #42606e;
  --accent-soft: #e8eef1;
  --line: #e2ded6;
  --warning: #8a4b32;

  /* ⚠️ Drei Statusfarben, und sie sind eine Ausnahme. Sonst borgt sich
     jeder Zustand Akzent oder Warnung — eine Ampel kann das nicht: ihre
     Aussage IST die Farbe, und zwei Farben ergeben keine drei Stufen. Sie
     sind auf denselben warmen Grund gemischt und bleiben gedeckt; wer
     einen vierten Zustand braucht, denkt erst darüber nach, ob es ihn
     wirklich gibt. */
  --ok: #4a7c59;
  --attention: #a07d3c;

  /* Font families */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-reading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-code: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

  /* Measurements. Seit 2026-09-05 die Proportionen von Kivanto: eine
     Kopfleiste ueber drei Spalten, rundere Ecken und mehr Luft als die
     zweispaltige Huelle hatte. Die Farben darueber sind unveraendert
     geblieben; uebernommen ist der Aufbau, nicht die Palette. */
  --topbar-height: 3.5rem;
  --rail-width: 15rem;
  --panel-width: 17.5rem;
  /* Die Breite der Schublade auf einem schmalen Schirm. */
  --sidebar-width: 15rem;
  --header-height: 4rem;
  --reading-width: 46rem;
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04);

  /* Motion: short and sparing */
  --duration: 120ms;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}

/* ── Skeleton ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; }

/* Die Huelle: eine Kopfleiste ueber allem, darunter drei Spalten. Die
   mittlere gehoert dem offenen Modul und faellt weg, wenn es nichts
   dorthin zu stellen hat. */
.shell {
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100%;
  overflow: hidden;
}

.shell__body {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  min-height: 0;
  min-width: 0;
}

.shell__body[data-panel='true'] {
  grid-template-columns: var(--rail-width) var(--panel-width) 1fr;
}

/* ⚠️ Auf dem Schreibtisch loest sich der Kasten auf, damit Schiene und
   Panel echte Spalten des Rasters bleiben. Erst schmal wird er selbst
   sichtbar und traegt beide zusammen aus dem Bild. */
.drawer { display: contents; }

/* ── The top bar ───────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  min-width: 0;
  /* ⚠️ Die Leiste darf nicht schieben. Ohne min-width: 0 und overflow
     rechnet ihr Inhalt die Breite der ganzen Huelle aus, und auf einem
     Telefon steht "Abmelden" halb ausserhalb des Bildes, waehrend die
     Seite seitwaerts scrollt. Am 2026-09-05 in einem Screenshot bei
     420 px gefunden. */
  overflow: hidden;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}

/* ── Zeichen ───────────────────────────────────────────────────────────
   Ein Satz, eine Groesse, eine Strichstaerke. Die Zeichen sind SVG
   (kivanto.web.icons, Lucide/ISC) und folgen der Schriftfarbe ihres
   Platzes: `currentColor` steht im SVG, hier steht nur, wie gross.
   ⚠️ `flex: none`, sonst quetscht ein Flex-Vater sie schmal, wenn der Text
   daneben lang wird - ein halbes Zeichen sieht aus wie ein Fehler. */
.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
}

/* Was noch als Schriftzeichen dasteht (+, ×, …), damit es dieselbe Breite
   haelt wie ein gezeichnetes daneben. */
.glyph { display: inline-block; text-align: center; min-width: 1em; }

/* ── Die Marke ─────────────────────────────────────────────────────────
   Das K als Netz, wie im Logo von Kivanto. Die Flaeche folgt der Schrift
   und dreht sich damit im dunklen Erscheinungsbild mit; die Knoten in
   Koralle und Blau sind die Marke und bleiben. */
.brand { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }

.brand-mark {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  background: url('/brand/kivanto-mark.png') center / contain no-repeat;
}


.brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.topbar__brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__me .button { flex: none; }

/* Alles, was nicht die Marke ist, sammelt sich rechts. */
.topbar__tools {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  min-width: 0;
}

.topbar__picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.topbar__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quiet);
  white-space: nowrap;
}

/* ── Der Indexlauf in der Kopfleiste ───────────────────────────────────
   ⭐ Neben dem Projekt, weil er sich auf genau dieses bezieht. Er
   erscheint nur, wenn er etwas zu sagen hat: waehrend eines Laufs, kurz
   danach, und wenn einer fehlgeschlagen ist. Ein Feld, das dauernd
   "Index auf Stand" meldet, sieht nach einem Tag niemand mehr - auch
   dann nicht, wenn dort etwas anderes steht.
   ─────────────────────────────────────────────────────────────────── */

.index-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-quiet);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.index-badge__mark {
  display: inline-flex;
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

.index-badge__mark .icon { width: 100%; height: 100%; }

.index-badge[data-state='running'] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ⚠️ Die Drehung sitzt hier und nicht im Zeichen. Ein SVG, das sich selbst
   dreht, laesst sich bei prefers-reduced-motion nicht anhalten. */
.index-badge[data-state='running'] .index-badge__mark {
  animation: index-spin 900ms linear infinite;
}

@keyframes index-spin {
  to { transform: rotate(360deg); }
}

/* Ohne Bewegung bleibt der Ring stehen und pulst nur noch in der
   Deckkraft: dass etwas laeuft, muss auch dann ankommen. */
@media (prefers-reduced-motion: reduce) {
  .index-badge[data-state='running'] .index-badge__mark {
    animation: pulse 1.4s ease-in-out infinite;
  }
}

.index-badge[data-state='done'] { color: var(--accent); }

.index-badge[data-state='failed'] {
  background: var(--surface);
  color: var(--warning);
}

.topbar__me {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.topbar__who {
  display: grid;
  gap: 0;
  min-width: 0;
  line-height: 1.25;
}

.topbar__name {
  font-size: 0.8125rem;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__role { font-size: 0.6875rem; color: var(--text-quiet); }

/* ── The rail: the modules ─────────────────────────────────────────── */

.rail {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  padding: 0.75rem 0.5rem 0.5rem;
  background: var(--surface-raised);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.rail__items {
  display: grid;
  gap: 0.125rem;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.rail__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
}

.rail__item:hover { background: var(--surface); }

.rail__item[aria-current='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.rail__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.125rem;
  color: var(--text-quiet);
}

.rail__glyph .icon { width: 1.125rem; height: 1.125rem; }

.rail__item[aria-current='true'] .rail__glyph { color: var(--accent); }

.rail__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die zwei Schalter, die zu keinem Modul gehoeren, unten links. */
.rail__foot {
  display: grid;
  gap: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.rail__tools { display: flex; align-items: center; gap: 0.25rem; }
.rail__version { margin-left: 0.4rem; font-size: 0.6875rem; line-height: 1.4; overflow-wrap: anywhere; }

/* ── The panel: the open module ────────────────────────────────────── */

.panel {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  min-width: 0;
  background: var(--surface-raised);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.panel__head {
  display: grid;
  gap: 0.75rem;
  padding: 1.05rem 1rem 0.9rem;
}

.panel__title {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__note {
  margin: -0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-quiet);
}

.panel__cta { display: grid; }

.panel__body {
  min-height: 0;
  /* ⚠️ Waagrecht ausdruecklich verborgen. Nur overflow-y zu setzen laesst
     overflow-x auf auto rechnen, und ein einziger langer Titel schiebt
     dann die ganze Spalte zur Seite. Am 2026-09-01 in einem Screenshot
     gefunden, nicht von einer Pruefung. */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0.625rem 1.25rem;
}

.panel__group + .panel__group {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.panel__label {
  padding: 0 0.55rem;
  margin-bottom: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.panel__items { display: grid; gap: 0.125rem; }

.panel__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration), color var(--duration);
}

.panel__item:hover { background: var(--surface); }

.panel__item[aria-current='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.panel__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1rem;
  color: var(--text-quiet);
}

.panel__glyph .icon { width: 1rem; height: 1rem; }

.panel__item[aria-current='true'] .panel__glyph { color: var(--accent); }

.panel__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Zahl, die ein Bereich traegt. Sie kommt vom Server. */
.panel__badge {
  flex: none;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-quiet);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.panel__item[aria-current='true'] .panel__badge {
  background: var(--surface-raised);
  color: var(--accent);
}

/* ── Conversations ─────────────────────────────────────────────────── */

.button__glyph { font-size: 1rem; line-height: 1; }

.conversations__list {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.0625rem;
}

.conversations__empty {
  margin: 0.25rem 0.55rem;
  font-size: 0.8125rem;
  color: var(--text-quiet);
  line-height: 1.45;
}

.conversation {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: var(--radius-sm);
  transition: background var(--duration);
}

.conversation:hover { background: var(--surface-raised); }

.conversation[aria-current='true'] { background: var(--accent-soft); }

.conversation__open {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.55rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.conversation[aria-current='true'] .conversation__open {
  color: var(--accent);
  font-weight: 500;
}

.conversation__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation__turns {
  flex: none;
  font-size: 0.6875rem;
  color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
}

.conversation__unread {
  flex: 0 0 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  align-self: center;
  border-radius: 50%;
  background: var(--accent);
}

.conversation[data-unread='true'] .conversation__title { font-weight: 600; }

/* The two actions stay out of the way until the row is touched. On a
   phone there is no hover, so they are always there below 768 px. */
.conversation__actions {
  display: flex;
  flex: none;
  gap: 0.125rem;
  padding-right: 0.25rem;
  opacity: 0;
  transition: opacity var(--duration);
}

.conversation:hover .conversation__actions,
.conversation:focus-within .conversation__actions { opacity: 1; }

.conversation__action {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-quiet);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.25rem 0.3rem;
  cursor: pointer;
}

.conversation__action:hover { background: var(--surface); color: var(--text); }

/* Teilen, Umbenennen, Loeschen: gezeichnete Zeichen statt ✎ und 🗑. Das
   Emoji brachte seine eigene Farbe mit und stand als einziges Bild in einer
   Reihe gezeichneter Striche. */
.conversation__action .icon { width: 0.95rem; height: 0.95rem; display: block; }

.conversation__action--warn { color: var(--warning); font-weight: 500; }

.conversation__rename {
  flex: 1;
  min-width: 0;
  margin: 0.2rem 0.35rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}

.conversation__rename:focus { outline: none; }

/* ── Main area ─────────────────────────────────────────────────────── */

.main {
  display: grid;
  grid-template-rows: var(--header-height) 1fr auto;
  min-height: 0;
  min-width: 0;
  background: var(--ground);
}

/* Der Kopf einer Ansicht: der Titel gross links, rechts, was die Ansicht
   an Handlungen mitbringt. Weiss wie die Spalten daneben, damit der graue
   Grund darunter der Inhalt ist und nicht der Rahmen. */
.main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.main__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* The scrolling middle. Each view drops its content in here. */
.main__middle {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 2.5rem;
}

/* The full width of the main area. The reading width of 46rem that stood
   here until 2026-09-02 left two thirds of a wide screen empty in the file
   browser and in the search, and Daniel asked for the space back. */
.content {
  max-width: none;
  margin: 0;
}

/* The answer text of the chat keeps a line length that reads. That is the
   one place where the limit is about the text and not about the frame. */
.turn__answer .answer__text { max-width: var(--reading-width); }

/* ── Controls ──────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--duration), border-color var(--duration);
}

.button:hover { border-color: var(--accent); }

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ground);
}

.button--primary:hover { opacity: 0.9; }

.button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--text-quiet);
}

.button--quiet:hover { background: var(--surface); color: var(--text); }

/* Eine Handlung, die eine ganze Spalte breit ist: der Aufruf im Kopf des
   Panels. */
.button--block { width: 100%; }

/* Ein Schalter, der nur ein Zeichen traegt. Quadratisch, damit eine Reihe
   davon nicht ausfranst. */
.button--icon {
  min-width: 2.125rem;
  padding: 0.45rem;
  border-color: transparent;
  background: transparent;
  color: var(--text-quiet);
  font-size: 0.8125rem;
}

.button--icon:hover {
  background: var(--surface);
  border-color: transparent;
  color: var(--text);
}

.button:disabled { opacity: 0.5; cursor: default; }

.field {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}

.field:focus { outline: none; border-color: var(--accent); }

/* Ein Feld, das in einer Reihe steht statt in einem Formular: es nimmt
   sich nur, was es braucht. */
.field--inline {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 16rem;
  padding: 0.4rem 0.6rem;
  background: var(--ground);
}

@media (min-width: 769px) { .field--inline { min-width: 9rem; } }

/* A visible focus ring for keyboard use, the same everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── States ────────────────────────────────────────────────────────── */

.notice {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-quiet);
  font-size: 0.875rem;
}

.notice--error {
  background: var(--accent-soft);
  color: var(--warning);
}

/* Something is missing but nothing is broken: the search ran, only half of
   it. Warmer than an error, louder than a plain notice. */
.notice--warn {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  color: var(--text);
}

/* Something is in flight. The pulse is the only difference to a plain
   notice, so a reader can tell waiting from a finished sentence. */
.notice--busy::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .notice--busy::before { animation: none; opacity: 0.7; }
}

.empty {
  max-width: 30rem;
  margin: 15vh auto 0;
  text-align: center;
  color: var(--text-quiet);
}

.empty__aside {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  opacity: 0.8;
}

.empty__title {
  font-family: var(--font-reading);
  font-size: 1.375rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}

/* ── Karten ────────────────────────────────────────────────────────────
   ⭐ Eine Form fuer jede Flaeche, die auf dem Grund steht. Kivanto setzt
   den Inhalt in weisse Karten mit einer Haarlinie und fast ohne Schatten:
   die Linie traegt die Trennung, nicht die Tiefe.

   ⚠️ Bis 2026-09-05 hatte hier jede Ansicht ihre eigene Karte — mal
   --radius, mal --radius-sm, mal gar keine, und vier Innenabstaende
   zwischen 0,5 und 1 rem. Nebeneinander las sich das nicht als ein
   System, sondern als vier, die zufaellig im selben Fenster stehen. Wer
   eine neue Flaeche baut, nimmt diese Liste und nicht eine eigene Regel.
   ─────────────────────────────────────────────────────────────────── */

.card,
.hit,
.project,
.detail,
.crm-form, .crm-detail, .crm-panel, .crm-io,
.crm-tile,
.crm-card,
.kg-community,
.kg-form,
.kg-sparql__editor,
.kg-sparql__examples,
.kg-stat,
.matrix__scroll,
.files__tree,
.file-view,
.editor {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Die Ueberschrift einer Karte. Fett und in Lesegroesse, nicht als
   Versalien-Mikrolabel: das Mikrolabel gruppiert innerhalb einer Karte,
   die Ueberschrift benennt die Karte selbst. */
.card__title,
.crm-form__title,
.crm-panel > .crm-subhead,
.kg-form > h4,
.kg-sparql__examples > h4,
.detail__name {
  margin: 0 0 0.85rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  text-transform: none;
}

/* ── Header parts ──────────────────────────────────────────────────── */

.main__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.main__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main__footer {
  border-top: 1px solid var(--line);
  padding: 0.875rem 1.5rem 1.125rem;
  background: var(--surface-raised);
}

/* The drawer handle has nothing to do on a desktop. */
.mobile-only { display: none; }

/* ── Chat ──────────────────────────────────────────────────────────── */

.history { display: grid; gap: 1.75rem; }

.turn { display: grid; gap: 0.75rem; }

/* The question sits right as a bubble, the answer left as running text.
   That separates them without a box around the answer. */
.turn__question {
  justify-self: end;
  max-width: 85%;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius) var(--radius) 0.125rem var(--radius);
  background: var(--surface);
}

.answer__text {
  font-family: var(--font-reading);
  font-size: 1.0625rem;
  line-height: 1.7;
  /* ⚠️ No pre-wrap. It was right while the answer was raw text, and wrong
     the moment it became rendered markdown: the newlines the renderer puts
     between its tags then show up as blank lines, and a four item list
     stood a screen tall. */
}

.thinking { color: var(--text-quiet); font-family: var(--font-ui); }
.thinking::after {
  content: '…';
  animation: thinking 1.2s steps(4, end) infinite;
}

@keyframes thinking { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .thinking::after { animation: none; }
}

/* ── Sources under the answer ──────────────────────────────────────── */

.sources {
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* The heading is the switch. It is a button, so it is keyboard reachable,
   and it carries the count: folded away it has to say how much lies
   underneath, or it is a lid over something unknown. */
.sources__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-quiet);
  cursor: pointer;
}

.sources__title[aria-expanded='true'] { margin-bottom: 0.5rem; }
.sources__title:hover { color: var(--text); }

.sources__caret { font-size: 0.7rem; line-height: 1; }

.sources__count {
  padding: 0 0.3rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.sources__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }

.source { font-size: 0.8125rem; }

/* The card itself opens what it cites; the button beside it leads to the
   file. Both are keyboard reachable, neither hides behind a hover. */
.source__main { display: flex; align-items: flex-start; gap: 0.5rem; }

.source__row {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  text-align: left;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.source__open { flex: none; font-size: 0.75rem; }

.source__preview { margin: 0.5rem 0 0.25rem 2.25rem; }

/* Inside a citation the preview is a glance, not the main event: it sits
   under a card in a list of cards, and at the full height it pushes the
   rest of the sources off the screen. */
.source__preview .preview__pdf { height: 45vh; }
.source__preview .preview__image { max-height: 45vh; }

.source__nr { color: var(--accent); font-variant-numeric: tabular-nums; }
.source__body { min-width: 0; }
.source__name { display: block; }

.source__path,
.hit__path {
  display: block;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  color: var(--text-quiet);
  overflow-wrap: anywhere;
}

.badge {
  flex: none;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6875rem;
}

/* ── Search ────────────────────────────────────────────────────────── */

.block { margin-bottom: 1.75rem; }

.block__title {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.hit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }

.hit { padding: 1rem 1.1rem; }

.hit[aria-current='true'] { border-color: var(--accent); }

/* The hit itself opens its source text; the button beside it leads to the
   file. Both are keyboard reachable, so neither hides behind a hover. */
.hit__main { display: flex; align-items: flex-start; gap: 0.5rem; }

.hit__row {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.hit__row:disabled { cursor: default; }
.hit__open { flex: none; font-size: 0.75rem; }

.hit__outside {
  flex: none;
  align-self: center;
  font-size: 0.6875rem;
  color: var(--text-quiet);
}

.hit__head { display: flex; align-items: baseline; gap: 0.5rem; }
.hit__name { font-weight: 500; }
.hit__score {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
}
.hit__excerpt { margin: 0.4rem 0 0; color: var(--text-quiet); font-size: 0.875rem; }

.hit__source { margin-top: 0.6rem; }

.hit__code {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-code);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
}

/* The store filter. Only shown when the project has more than one store:
   a filter with a single choice teaches nothing. */
.store-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.store-filter__item {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-quiet);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.store-filter__item:hover { color: var(--text); }

.store-filter__item[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Composer row in the footer ────────────────────────────────────── */

.composer { display: flex; align-items: center; gap: 0.5rem; }

.composer__field {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
}

.composer__field:focus { outline: none; border-color: var(--accent); }
.composer__field:disabled { color: var(--text-quiet); }

/* ── Graph ─────────────────────────────────────────────────────────── */

.graph__body { display: flex; gap: 1rem; }

.graph__canvas {
  flex: 1;
  height: 70vh;
  min-height: 24rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

aside.graph__source {
  max-width: 26rem;
  max-height: 70vh;
  overflow: auto;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  font-size: 0.78rem;
}

aside.graph__source pre { white-space: pre-wrap; font-family: var(--font-code); }

@media (max-width: 900px) {
  .graph__body { flex-direction: column; }
  aside.graph__source { max-width: none; }
}

/* ── Role matrix ───────────────────────────────────────────────────── */

.matrix__scroll { overflow-x: auto; margin: 1rem 0; }

.matrix {
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.matrix th,
.matrix td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 0; }

/* The capability names are long and the roles few, so the headers stand
   upright and the row header stays put while the table scrolls. */
.matrix__head {
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-quiet);
}

.matrix__head abbr {
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  cursor: help;
}

.matrix__role,
.matrix__corner {
  position: sticky;
  left: 0;
  background: var(--surface-raised);
  white-space: nowrap;
  font-weight: 500;
}

.matrix__role .badge { margin-left: 0.4rem; }

.matrix__cell { text-align: center; }
.matrix__cell input { cursor: pointer; }
.matrix__cell input:disabled { cursor: default; opacity: 0.55; }

/* Implied rather than granted: visibly held, visibly not a choice. */
.matrix__implied { filter: grayscale(1); opacity: 0.45; }

.matrix__add { max-width: 32rem; }

/* Switch before two fixed navigation columns squeeze the workspace.
   Keep this breakpoint aligned with the drawer layout in appearance.css. */

@media (max-width: 68rem) {
  .shell__body,
  .shell__body[data-panel='true'] { grid-template-columns: 1fr; }

  .mobile-only { display: inline-flex; }

  .conversation__actions { opacity: 1; }

  /* Schmal traegt der Kasten Schiene und Panel zusammen aus dem Bild:
     zwei Schubladen nebeneinander waeren zwei Griffe fuer eine
     Bewegung. */
  .drawer {
    display: flex;
    position: fixed;
    inset: var(--topbar-height) auto 0 0;
    z-index: 20;
    max-width: 92vw;
    transform: translateX(-100%);
    /* ⚠️ Verborgen und nicht nur weggeschoben. Eine Schublade, die bloss
       aus dem Bild geschoben wird, behaelt jeden ihrer Knoepfe in der
       Tab-Reihenfolge, und wer auf dem Telefon tabbt, landet in
       Bedienelementen, die niemand sieht. */
    visibility: hidden;
    transition: transform var(--duration), visibility var(--duration);
  }

  /* Zusammen hoechstens die 92 vw, die der Kasten hergibt, und beide
     gleich knapp: die Schiene traegt kurze Woerter, das Panel lange. */
  .drawer > .rail { width: min(var(--rail-width), 46vw); }
  .drawer > .panel { width: min(var(--panel-width), 46vw); }

  .shell[data-sidebar='open'] .drawer {
    transform: none;
    visibility: visible;
  }

  .topbar__label { display: none; }
  .topbar__who { display: none; }
  /* Das Zeichen bleibt, das Wort geht: dass etwas laeuft, ist die
     Nachricht, und die traegt der drehende Ring allein. */
  .index-badge__text { display: none; }
  .index-badge { padding: 0.3rem; }
  .topbar { gap: 0.625rem; }
  .field--inline { max-width: 8.5rem; }

  .scrim.mobile-only { display: block; }
}

@media (max-width: 480px) {
  .topbar { padding-inline: 0.75rem; }
  .topbar__brand { flex: none; }
  .topbar__brand .brand__name { display: none; }
  .topbar__tools { flex: 1; gap: 0.5rem; }
  .topbar__picker { flex: 1; }
  .topbar__picker .field--inline { width: 100%; max-width: none; }
  .topbar__me { flex: none; }
}

/* Tapped beside the drawer, it closes. A real element rather than a
   pseudo-element on the shell: a pseudo-element takes no handler, and
   the only way to close the drawer would be the handle it covers. */
.scrim {
  position: fixed;
  inset: var(--topbar-height) 0 0 0;
  z-index: 10;
  background: rgb(0 0 0 / 0.35);
  border: 0;
}

/* ── Files ─────────────────────────────────────────────────────────── */
/* Tree on the left, content on the right. Both scroll on their own, so
   walking a deep tree does not push the open file out of view. */

.files {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: 1.25rem;
  align-items: start;
  min-width: 0;
}

.files__tree {
  min-width: 0;
  /* ⚠️ Die Kopfleiste zaehlt mit. Sie kam am 2026-09-05 dazu, und solange
     sie in dieser Rechnung fehlte, war der Baum um ihre Hoehe zu hoch und
     schob die Seite in einen zweiten Bildlauf. */
  max-height: calc(100vh - var(--topbar-height) - var(--header-height) - 5rem);
  /* Vertical only. A tree that scrolls sideways hides the beginning of
     every deep path behind a gesture, and the names wrap perfectly well. */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
}

.files__content { min-width: 0; }

/* The legend on its own line, the actions below it and wrapping. Four
   buttons beside a sentence squeezed the sentence into six lines and cut
   the last button off the edge of the column. */
.files__toolbar { margin-bottom: 0.5rem; }

.files__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.files__actions .button { font-size: 0.75rem; }

.files__legend {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-quiet);
  line-height: 1.45;
}

.files__upload { flex: none; cursor: pointer; }

.files__confirm { display: inline-flex; gap: 0.25rem; }

.button--warn { color: var(--warning); }

.tree__list { margin: 0; padding: 0; list-style: none; }
.tree__list--root { margin-top: 0.25rem; }
.tree__item { min-width: 0; }

.tree__row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.2rem 0.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.tree__row:hover { background: var(--surface); }

.tree__row[aria-current='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.tree__row--dir { font-weight: 500; }

.tree__twist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.9rem;
  color: var(--text-quiet);
}

/* Kleiner als die uebrigen: ein Aufklapper ist kein Modul. */
.tree__twist .icon { width: 0.85rem; height: 0.85rem; }

.tree__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file__marks {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Die Ampel einer Datei. Sie steht vor den Marken, weil sie die Frage
   beantwortet, die man ueberfliegt: findet die Suche das. */
.file__light {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text-quiet);
}

.file__light[data-state='green'] { background: var(--ok); }
.file__light[data-state='yellow'] { background: var(--attention); }
.file__light[data-state='red'] { background: var(--warning); }

.file__nodes {
  font-size: 0.6875rem;
  color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
}

/* A file the index has not seen is the one mark that has to catch the eye:
   it is the answer to "why does the search not find this". */
.badge--new {
  border-color: var(--accent);
  color: var(--accent);
}

.file-view__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.9rem;
}

.file-view__path {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-code);
  font-size: 0.8125rem;
}

.file-view__size {
  flex: none;
  font-size: 0.75rem;
  color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
}

.file-view, .editor { padding: 1.15rem 1.25rem; }

/* Der Text der Datei liegt vertieft in der Karte: die Karte ist das Blatt,
   der Code das, was darauf steht. */
.file-view__body {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-code);
  font-size: 0.8125rem;
  line-height: 1.5;
  /* The file scrolls inside its own box. The page itself must never
     scroll sideways. */
  overflow-x: auto;
  max-height: calc(100vh - var(--topbar-height) - var(--header-height) - 12rem);
  overflow-y: auto;
  /* The lines carry their own whitespace handling, and the grid of number
     and text must not be broken up by the whitespace of a pre. */
  white-space: normal;
}

/* One line of a file: its number, then its text. The number is not
   selectable, so copying a passage copies the code and not a column of
   digits. */
.code-line { display: grid; grid-template-columns: 3rem 1fr; }

.code-line__nr {
  text-align: right;
  padding-right: 0.9rem;
  color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}

.code-line__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* An empty line is a line and keeps its height. */
  min-height: 1.5em;
}

.code-line--marked { background: var(--accent-soft); }
.code-line--marked .code-line__nr { color: var(--accent); }

@media (max-width: 900px) {
  .files { grid-template-columns: 1fr; }
  .files__tree { max-height: 18rem; }
}

/* ── Writing in the browser ────────────────────────────────────────── */

.editor { display: grid; gap: 0.75rem; }

.editor__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.editor__name { flex: 1; min-width: 12rem; font-family: var(--font-code); }

.editor__field {
  width: 100%;
  min-height: 26rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-code);
  font-size: 0.8125rem;
  line-height: 1.55;
  resize: vertical;
}

.editor__field:focus { outline: none; border-color: var(--accent); }

/* ── Rich-Text im Korpus ───────────────────────────────────────────── */
/* Dieselbe Datei, ein anderer Griff zum Stift: die Fläche unten ist der
   Rahmen, in dem ProseMirror schreibt. Die Typografie kommt von
   .answer__text, das der Editor sich beim Bauen selbst anhängt — die
   Lese- und die Schreibansicht eines Textes sollen nicht zwei Sätze
   Typography sprechen. */
.wysiwyg { display: grid; gap: 0.5rem; min-width: 0; }

.wysiwyg__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
}

.wysiwyg__group { display: flex; align-items: center; gap: 0.1rem; margin-right: 0.4rem; }
.wysiwyg__group:last-child { margin-right: 0; }

.wysiwyg__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--text-quiet);
  font-family: var(--font-code);
  font-size: 0.75rem;
  cursor: pointer;
}

.wysiwyg__tool:hover { background: var(--surface); color: var(--text); }

.wysiwyg__tool[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.wysiwyg__link-form { display: flex; align-items: center; gap: 0.35rem; flex: 1 1 100%; }
.wysiwyg__link-field { flex: 1; min-width: 10rem; font-family: var(--font-code); }

.wysiwyg__box {
  position: relative;
  min-height: 26rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  overflow-wrap: anywhere;
}

.wysiwyg__box > div[contenteditable] { outline: none; min-height: inherit; }
.wysiwyg__box:focus-within { border-color: var(--accent); }

/* Der leere Kasten sagt, was man hier tun kann, wie es das textarea tut. */
.wysiwyg__box--empty::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0.75rem;
  left: 0.9rem;
  color: var(--text-quiet);
  pointer-events: none;
}

/* Was es im textarea nicht gab: Tabellen zum Anfassen, Aufgaben zum
   Ankreuzen, Bilder, die den Rand nicht zerreissen. */
.wysiwyg__box hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.wysiwyg__box img { max-width: 100%; height: auto; }
.wysiwyg__box .tableWrapper { overflow-x: auto; }
.wysiwyg__box th,
.wysiwyg__box td { min-width: 4rem; }
.wysiwyg__box .selectedCell::after { border: 2px solid var(--accent); }
.wysiwyg__box ul[data-type='taskList'] { list-style: none; padding-left: 0.35rem; }
.wysiwyg__box ul[data-type='taskList'] > li { display: flex; gap: 0.45rem; align-items: flex-start; }
.wysiwyg__box ul[data-type='taskList'] > li > label { flex: none; margin-top: 0.25rem; }
.wysiwyg__box ul[data-type='taskList'] > li > div { flex: 1 1 auto; min-width: 0; }
.wysiwyg__box ul[data-type='taskList'] input[type='checkbox'] {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--accent);
}

.files__new-dir {
  display: flex;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
}

.files__new-dir .field { flex: 1; min-width: 0; font-family: var(--font-code); }

/* ── Preview and download ──────────────────────────────────────────── */
/* What a JSON body cannot show: an image, a PDF, a video. Each one sits
   in its own box that scrolls rather than pushing the page sideways. */

.preview__image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  /* A transparent PNG on a warm ground is unreadable half the time. The
     checkerboard says which parts of the image are see-through. */
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--line) 75%),
    linear-gradient(-45deg, transparent 75%, var(--line) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.preview__pdf {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.preview__audio { width: 100%; margin-top: 0.5rem; }

.preview__video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  background: #000;
}

.preview__link { color: var(--accent); }

.document { margin-bottom: 1rem; }

.document__text {
  margin: 0.6rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-code);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 60vh;
  overflow-y: auto;
}

/* A directory row carries the fold and the archive button side by side. */
.tree__dir { display: flex; align-items: center; }
.tree__dir .tree__row { flex: 1; min-width: 0; }

.tree__zip {
  flex: none;
  border: 0;
  padding: 0.15rem 0.4rem;
  background: none;
  color: var(--text-quiet);
  font: inherit;
  cursor: pointer;
  opacity: 0;
}

.tree__dir:hover .tree__zip,
.tree__dir:focus-within .tree__zip { opacity: 1; }
.tree__zip:hover { color: var(--accent); }

/* Moving a file by dragging it onto a folder. Two marks, because letting
   go is otherwise a guess: the row being carried fades out, and the folder
   under the pointer is the one that will take it. */
.tree__item[draggable='true'] .tree__row { cursor: grab; }
.tree__item[data-dragging='true'] { opacity: 0.45; }

.tree__item[data-drop='true'] > .tree__dir > .tree__row,
.tree__list--root[data-drop='true'] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  border-radius: var(--radius-sm);
}

/* The root list takes files back out of a folder, so it needs a strip of
   its own under the last row. Without it the only way to aim at the root
   is the gap between two rows. */
.tree__list--root { min-height: 4rem; }


/* The state of the background re-index. Quiet when there is nothing to
   say, and never silent while a run is going: a file the index has not
   seen is invisible to the search. */
.index-run {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  min-height: 1.75rem;
}

.index-run__text { font-size: 0.75rem; color: var(--text-quiet); }

.index-run__text--busy { color: var(--accent); }

.index-run__text--busy::after {
  content: '';
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  animation: index-pulse 1.1s ease-in-out infinite;
}

.index-run__text--failed { color: var(--warning); }

@keyframes index-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .index-run__text--busy::after { animation: none; opacity: 0.7; }
}

/* ── Answer text: markdown, not preformatted ───────────────────────── */
/* The model writes structure, so the structure is shown. Spacing is kept
   tight enough that a three-line answer does not look like a document. */

.answer__text > *:first-child { margin-top: 0; }
.answer__text > *:last-child { margin-bottom: 0; }

.answer__text p { margin: 0 0 0.7rem; }

.answer__text ul,
.answer__text ol { margin: 0 0 0.7rem; padding-left: 1.4rem; }

.answer__text li { margin-bottom: 0.25rem; }

/* A "loose" list wraps every item in a paragraph. Without this the item
   spacing doubles. */
.answer__text li > p { margin: 0; }
.answer__text li > p + p { margin-top: 0.4rem; }

.answer__text h1,
.answer__text h2,
.answer__text h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  margin: 1.1rem 0 0.5rem;
  letter-spacing: -0.01em;
}

.answer__text code {
  font-family: var(--font-code);
  font-size: 0.85em;
  background: var(--surface);
  border-radius: 0.25rem;
  padding: 0.1em 0.3em;
}

.answer__text pre {
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}

.answer__text pre code { background: none; padding: 0; font-size: 0.8125rem; }

.answer__text blockquote {
  margin: 0 0 0.7rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--line);
  color: var(--text-quiet);
}

.answer__text table {
  border-collapse: collapse;
  margin: 0 0 0.7rem;
  font-size: 0.875rem;
  display: block;
  overflow-x: auto;
}

.answer__text th,
.answer__text td {
  border: 1px solid var(--line);
  padding: 0.3rem 0.5rem;
  text-align: left;
}

.answer__text a { color: var(--accent); }

/* The citation mark. A button, because it does something. */
.cite {
  border: 0;
  background: none;
  padding: 0 0.1em;
  font: inherit;
  font-size: 0.85em;
  color: var(--accent);
  cursor: pointer;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}

.cite:hover { text-decoration: underline; }

/* The card the mark points at answers. Colour alone would not carry it for
   a reader who cannot see it, so the source list also moves the row. */
.source[aria-current='true'] {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

.turn__stopped {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-quiet);
}

/* ── Composer: a field that grows ──────────────────────────────────── */

textarea.composer__field {
  resize: none;
  overflow-y: hidden;
  line-height: 1.45;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-family: var(--font-ui);
}

.composer { align-items: flex-end; }

.button--stop {
  border-color: var(--warning);
  color: var(--warning);
}

.button--stop:hover { background: var(--warning); color: var(--ground); }

/* ── Narrow screens, last word ─────────────────────────────────────── */
/* ⚠️ At the end of the file on purpose. Everything here overrides a rule
   of the same weight defined further up, and CSS gives that to whichever
   comes last. Written into the drawer block near the top, these were all
   silently without effect: the archive button stayed invisible on a phone,
   the file path kept its own sideways scrollbar, and the line numbers kept
   a column three quarters of an inch wide on a 390 px screen. */

@media (max-width: 768px) {
  /* The graph shares the screen with the page. Two thirds of the viewport
     for a canvas that captures the drag leaves nothing to scroll by. */
  .graph__canvas { height: 55vh; min-height: 16rem; }

  .preview__pdf { height: 55vh; }

  .files__tree { max-height: 14rem; }

  .file-view__body,
  .files__tree { font-size: 0.75rem; }

  .code-line { grid-template-columns: 2.25rem 1fr; }

  /* A long path wraps instead of keeping a scrollbar of its own, which
     hides the end of the path behind a gesture nobody looks for. */
  .file-view__path {
    flex-basis: 100%;
    overflow-x: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* No hover on a touch screen, so nothing may hide behind one. */
  .tree__zip { opacity: 1; }
}

/* ── Projects ─────────────────────────────────────────────────────────
   The list of projects, and the form that creates one. The picker below
   is the part that matters: it offers directories of the server, so it
   has to read as a listing and not as a text field. */

.projects { display: flex; flex-direction: column; gap: 1rem; }

.projects__actions { display: flex; gap: 0.5rem; }

.projects__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.project {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
}

.project[aria-current='true'] { border-color: var(--accent); }

.project__main { flex: 1 1 22rem; min-width: 0; }

.project__name { display: block; font-weight: 600; overflow-wrap: anywhere; }

.project__path {
  display: block;
  font-family: var(--font-code);
  font-size: 0.8rem;
  color: var(--text-quiet);
  overflow-wrap: anywhere;
}

.project__meta {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--text-quiet);
  overflow-wrap: anywhere;
}

/* Actions have their own row: their intrinsic widths must never squeeze
   the project name and corpus path to a few pixels. */
.project__actions {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.project__actions > .button { flex: 0 0 auto; max-width: 100%; min-height: 2.75rem; }

/* ── The form ─────────────────────────────────────────────────────── */

.card { padding: 1.25rem; }

.form { display: flex; flex-direction: column; gap: 0.9rem; }

.form__row { display: flex; flex-direction: column; gap: 0.3rem; }

.form__label { font-weight: 600; font-size: 0.9rem; }

.form__hint { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }

.form__chosen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.form__chosen-value {
  font-family: var(--font-code);
  font-size: 0.82rem;
  padding: 0.25rem 0.45rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.form__chosen-empty { color: var(--text-quiet); }

.form__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── The directory picker ─────────────────────────────────────────── */

.picker {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.5rem;
}

.picker__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.2rem 0.4rem;
  border-bottom: 1px solid var(--line);
}

.picker__path {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--font-code);
  font-size: 0.78rem;
  color: var(--text-quiet);
  overflow-wrap: anywhere;
}

.picker__list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
}

.picker__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.picker__open {
  flex: 1 1 18rem;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.picker__open:hover { background: var(--surface-raised); }

.picker__glyph { display: inline-flex; align-items: center; color: var(--accent); }
.picker__glyph .icon { width: 1rem; height: 1rem; }

.picker__name { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }

.picker__counts {
  grid-column: 2;
  font-size: 0.76rem;
  color: var(--text-quiet);
  overflow-wrap: anywhere;
}

/* A directory that is already a project. Indexing one twice builds the
   same corpus into two indexes that then drift apart, so this has to be
   visible before the choice, not after it. */
.picker__badge {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  overflow-wrap: anywhere;
}

.picker__choose { flex: 0 0 auto; max-width: 100%; }

.picker__empty {
  margin: 0.5rem 0.2rem;
  font-size: 0.85rem;
  color: var(--text-quiet);
}

/* ── Sharing ──────────────────────────────────────────────────────────
   The panel that grants and takes away access. It sits under the row it
   belongs to, so it is obvious which project or conversation it means. */

.sharing {
  margin-top: 0.6rem;
  padding: 0.7rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sharing__owner { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }

.sharing__empty { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }

.sharing__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.share__kind { color: var(--accent); }

.share__subject { flex: 1 1 auto; overflow-wrap: anywhere; }

.share__access { color: var(--text-quiet); font-size: 0.78rem; white-space: nowrap; }

.sharing__grant {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.sharing__kind { flex: 0 0 8rem; }
.sharing__subject { flex: 1 1 10rem; min-width: 0; }
.sharing__access { flex: 0 0 12rem; }

/* ── Feeding the corpus from outside ──────────────────────────────────
   The panel sits under the project row it belongs to, like the sharing
   one, because handing out a source token is the same kind of act as
   widening the circle of a project. */

.ingest {
  margin-top: 0.6rem;
  padding: 0.7rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ingest__explain { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }

.ingest__empty { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }

.ingest__sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ingest__source-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.ingest__source-name { font-family: var(--font-code); }

.ingest__source-meta {
  color: var(--text-quiet);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* The name of the source is the last of the three meta columns to give
   way, so a narrow window loses the counts before it loses what the row
   is about. */
.ingest__source-line > .ingest__source-name { flex: 1 1 8rem; min-width: 0; }

.ingest__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.ingest__check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
}

/* What a creation answered. It is the one place the token and the signing
   secret ever exist in the browser, so it is drawn as something to act on
   now rather than as another row in a list. */
.ingest__made {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.ingest__made-title { margin: 0; font-size: 0.95rem; }

.ingest__secret {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ingest__secret-label {
  flex: 0 0 9rem;
  font-size: 0.78rem;
  color: var(--text-quiet);
}

/* ⚠️ The line breaks are part of the value. A private key runs over
   several lines, and a PEM whose header and footer are not on lines of
   their own is refused by openssl and by every library that reads one.
   Rendered without this, the key could only be copied by the button and
   never by hand. */
.ingest__secret-value {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-code);
  font-size: 0.78rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

.ingest__example { display: flex; flex-direction: column; gap: 0.3rem; }

.ingest__example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-quiet);
}

.ingest__example-body {
  margin: 0;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-code);
  font-size: 0.75rem;
  line-height: 1.5;
  /* ⚠️ The call is long. It scrolls inside its own box rather than making
     the page scroll sideways. */
  overflow-x: auto;
  white-space: pre;
}

.ingest__log { display: flex; flex-direction: column; gap: 0.35rem; }

.ingest__log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ingest__log-title { margin: 0; font-size: 0.85rem; color: var(--text-quiet); }

.ingest__deliveries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ingest__delivery {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.ingest__delivery-at {
  flex: 0 0 8.5rem;
  color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
}

.ingest__delivery-source { font-family: var(--font-code); }

.ingest__delivery-outcome { color: var(--text-quiet); }

/* A refused delivery is the reason somebody opened this list. */
.ingest__delivery[data-outcome='refused'] .ingest__delivery-outcome,
.ingest__delivery-error { color: var(--warning); }

.ingest__delivery-counts { color: var(--text-quiet); }

.ingest__checksum {
  font-family: var(--font-code);
  font-size: 0.72rem;
  color: var(--text-quiet);
}

.ingest__delivery-refused {
  color: var(--warning);
  font-family: var(--font-code);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* A file a machine put there. Quiet, but present on every row it applies
   to: whoever follows a statement back to its file should see that nobody
   wrote it by hand. */
.badge--ingest {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-quiet);
}

/* The second click of a withdrawal, the same warning colour the deletion
   of a conversation carries. */
.button--warn { color: var(--warning); border-color: var(--warning); }

.project__line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}

.project__access {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-quiet);
  white-space: nowrap;
}

/* An administrator sees every project. That is not a permission somebody
   was given, and it must not look like one. */
.project__access[data-access='admin'] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* A project in its first run. It carries no date and no stores yet, so
   without this it stands in the list stripped bare and reads as broken
   rather than as busy. Quiet on purpose: it is a state, not a fault. */
.project__indexing {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.project { flex-direction: column; align-items: stretch; }

/* A conversation somebody shared. The mark is quiet: it is a note about
   where the conversation came from, not a warning. */
.conversation__shared {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  margin-left: 0.3rem;
}

.conversation__shared .icon { width: 0.9rem; height: 0.9rem; }

.conversation[data-access='read'] .conversation__title,
.conversation[data-access='continue'] .conversation__title {
  font-style: italic;
}

/* ── The knowledge graph ──────────────────────────────────────────────
   Eight sections over one graph. The layout question is the same in all
   of them: the drawing needs room, the panels beside it must not push it
   away, and on a narrow screen everything stacks. */

/* ⭐ Die Sektionsnavigation steht seit 2026-09-05 in der zweiten Spalte
   der Huelle. Hier bleibt nur, was das Bild braucht. */
.kg { display: flex; flex-direction: column; gap: 0.8rem; height: 100%; }

.kg__body { flex: 1 1 auto; min-height: 0; }

/* ── The drawing ──────────────────────────────────────────────────── */

.kg-graph { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; }

.kg-controls {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.kg-controls__search { flex: 1 1 12rem; min-width: 0; }

.kg-controls__slider {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-quiet);
}

.kg-controls__slider input { width: 7rem; }

.kg-controls__check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-quiet);
}

.kg-graph__row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  /* ⚠️ align-items: start, sonst zieht die Zeichenflaeche die Zeile auf die
     Hoehe des laengsten Nachbarn. */
  align-items: start;
}

.kg-graph__canvas-wrap { display: flex; flex-direction: column; min-width: 0; }

/* Der Kasten um die Hinweiszeilen haelt die Leinwand an ihrem Platz in der
   Geschwisterreihe (siehe graph2d.cljs). `display: contents` heisst: er
   traegt nichts zum Layout bei, die Zeilen bleiben Flex-Kinder wie zuvor. */
.kg-graph__notices { display: contents; }

/* Die Buehne traegt die Leinwand und die Fortschrittsanzeige darueber.
   Die Anzeige liegt NEBEN der Leinwand im DOM, nicht darin: in deren Kasten
   legt vis-network sein canvas, und was React dort hineinschriebe, waere
   ein zweiter Herr ueber dieselben Kinder. */
.kg-graph__stage { position: relative; min-width: 0; }

.kg-graph__progress {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  /* Sie liegt ueber der Zeichnung und darf nichts abfangen: ziehen und
     klicken gehen weiter an die Leinwand. */
  pointer-events: none;
}

/* Immer gezeichnet, nur nicht immer zu sehen - siehe graph2d.cljs. */
.kg-graph__progress[data-busy='false'] { display: none; }
.kg-graph__progress .notice { margin: 0; }

.kg-graph__bar {
  width: 12rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.kg-graph__bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .kg-graph__bar-fill { transition: none; }
}

/* ⚠️ Feste Hoehe, keine wachsende. Mit `flex: 1 1 auto` in einem Elternteil
   ohne eigene Hoehe wurde die Flaeche 1992 Pixel hoch: vis-network zeichnete
   den Graphen mittig hinein, also weit unterhalb des Sichtfelds, und die
   Ansicht sah aus wie leer. Erst ein Blick auf die Elementgroessen im
   Browser hat das gezeigt. */
.kg-graph__canvas {
  height: min(68vh, 38rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

/* ── Legend ───────────────────────────────────────────────────────── */

.legend {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  background: var(--surface-raised);
  overflow-y: auto;
  max-height: min(68vh, 38rem);
}

.legend__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.legend__list { list-style: none; margin: 0; padding: 0; }

.legend__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.22rem 0.3rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
}

.legend__toggle:hover { background: var(--surface); }
.legend__toggle[aria-pressed='true'] { background: var(--accent-soft); font-weight: 600; }

.legend__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.legend__label { flex: 1 1 auto; overflow-wrap: anywhere; }
.legend__count { color: var(--text-quiet); font-size: 0.75rem; }

.legend__note {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--text-quiet);
  border-top: 1px solid var(--line);
  padding-top: 0.4rem;
}

/* ── Detail panel ─────────────────────────────────────────────────── */

.detail {
  width: 19rem;
  padding: 1rem;
  overflow-y: auto;
  max-height: min(68vh, 38rem);
}

.detail__head { display: flex; justify-content: space-between; align-items: start; gap: 0.4rem; }
.detail__name { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.detail__class { margin: 0.1rem 0 0.5rem; font-size: 0.8rem; color: var(--text-quiet); }

.detail__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.5rem;
  font-size: 0.8rem;
  margin: 0 0 0.6rem;
}
.detail__meta dt { color: var(--text-quiet); }
.detail__meta dd { margin: 0; }

.detail__section { border-top: 1px solid var(--line); padding-top: 0.5rem; margin-top: 0.5rem; }
.detail__section h4 { margin: 0 0 0.3rem; font-size: 0.85rem; }

.detail__evidence, .detail__facts { list-style: none; margin: 0; padding: 0; }
.detail__evidence li { font-size: 0.75rem; overflow-wrap: anywhere; margin-bottom: 0.15rem; }
.detail__facts li {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
  flex-wrap: wrap;
}

.fact__predicate { color: var(--accent); font-size: 0.75rem; }
.fact__object {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.fact__confidence { color: var(--text-quiet); font-size: 0.72rem; margin-left: auto; }

/* ── Tables and lists ─────────────────────────────────────────────── */

.kg-list { display: flex; flex-direction: column; gap: 0.6rem; }
.kg-list__head { display: flex; gap: 0.6rem; align-items: center; }
.kg-list__count { color: var(--text-quiet); font-size: 0.8rem; white-space: nowrap; }

.kg-table-wrap { overflow-x: auto; }

/* ⚠️ separate statt collapse. Ein Rand-Radius auf einer Tabelle mit
   border-collapse zeichnet kein Browser; die Ecken blieben eckig,
   waehrend alles daneben rund war. */
.kg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.kg-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-quiet);
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0.6rem;
  position: sticky;
  top: 0;
  /* Der Kopf klebt, also muss er decken. --ground stand hier, als die
     Tabelle noch auf dem Grund lag; in der Karte liesse er die Zeilen
     darunter durchscheinen. */
  background: var(--surface-raised);
}

.kg-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.kg-table th:first-child, .kg-table td:first-child { padding-left: 0.9rem; }
.kg-table th:last-child, .kg-table td:last-child { padding-right: 0.9rem; }

/* Die letzte Zeile traegt keinen Strich, sonst liegt er auf dem Rand der
   Karte und die Ecken sehen gerissen aus. */
.kg-table tbody tr:last-child td { border-bottom: 0; }
/* Wie im CRM: der Name traegt sich durch Gewicht, nicht durch eine
   Unterstreichung. Zwanzig unterstrichene Namen untereinander lesen sich
   als Fehler und nicht als Liste. */
.kg-table__link {
  border: 0; background: transparent; color: var(--text); font: inherit;
  font-weight: 600; text-align: left; cursor: pointer; padding: 0;
}

.kg-table__link:hover { color: var(--accent); text-decoration: underline; }
.kg-table__evidence { font-size: 0.72rem; color: var(--text-quiet); overflow-wrap: anywhere; }
.kg-table__id { font-size: 0.7rem; color: var(--text-quiet); margin-left: 0.3rem; }

.class-chip {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: #fff;
  white-space: nowrap;
}

.origin-mark { color: var(--warning); margin-left: 0.25rem; font-size: 0.8rem; }

/* Confidence as a bar: counted, so it may be shown. */
.confidence-bar { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 4.5rem; }
.confidence-bar__fill { height: 0.4rem; background: var(--accent); border-radius: 2px; }
.confidence-bar__value { font-size: 0.72rem; color: var(--text-quiet); }

/* ── Quality sections ─────────────────────────────────────────────── */

.kg-quality { display: flex; flex-direction: column; gap: 0.9rem; }

.kg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
}
.kg-stat { display: flex; flex-direction: column; padding: 0.9rem 1rem; }
.kg-stat__value {
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kg-stat__label { font-size: 0.75rem; color: var(--text-quiet); }

/* Branchenpakete: anhaken, und vorher lesen, was drin ist. */
.kg-packs {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.5rem;
}
.kg-pack {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  background: var(--surface);
}
.kg-pack[data-active="true"] { border-color: var(--accent); }
.kg-pack__head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  cursor: pointer;
}
.kg-pack__head input { margin: 0; flex: 0 0 auto; align-self: center; }
.kg-pack__title { font-weight: 600; flex: 1 1 auto; }
.kg-pack__count {
  font-size: 0.72rem;
  color: var(--text-quiet);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kg-pack__note { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--text-quiet); }
.kg-pack__more { margin-top: 0.35rem; padding-left: 0; padding-right: 0; }
/* Der Inhalt eines Pakets kann laenger sein als die Karte breit ist. */
.kg-pack__body { margin-top: 0.4rem; overflow-x: auto; }
.kg-pack__body .kg-table { font-size: 0.78rem; }

.kg-form { padding: 1.15rem 1.25rem; }
.kg-form__row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.4rem; }
.kg-form__row .field { flex: 1 1 9rem; min-width: 0; }

.kg-actions { display: flex; gap: 0.3rem; }

.reason-chip {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-quiet);
  white-space: nowrap;
}

.pair__vs { color: var(--text-quiet); }
.pair__classes { font-size: 0.72rem; color: var(--text-quiet); }

.kg-aliases { list-style: none; margin: 0; padding: 0; }
.kg-aliases li { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; font-size: 0.85rem; }

.kg-rules { list-style: none; margin: 0; padding: 0; }
.kg-rules li { border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.kg-rules p { margin: 0.2rem 0; font-size: 0.82rem; color: var(--text-quiet); }

.kg-bars { list-style: none; margin: 0; padding: 0; }
.kg-bars li { display: grid; grid-template-columns: 12rem 1fr auto; gap: 0.5rem; align-items: center; padding: 0.15rem 0; }
.kg-bars__label { font-size: 0.82rem; display: flex; gap: 0.3rem; align-items: center; overflow-wrap: anywhere; }
.kg-bars__bar { height: 0.55rem; background: var(--accent); border-radius: 2px; min-width: 2px; }
.kg-bars__value { font-size: 0.78rem; color: var(--text-quiet); }

.kg-plain { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.82rem; }
.kg-plain li { padding: 0.1rem 0; display: flex; gap: 0.35rem; align-items: center; }

.kg-communities { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kg-community { flex: 1 1 15rem; padding: 0.8rem 0.9rem; }
.kg-community__head { display: flex; justify-content: space-between; align-items: baseline; }
.kg-community__edges { font-size: 0.75rem; color: var(--text-quiet); }
.kg-community__classes { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.3rem 0; }

.kg-export { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.kg-synonyms { font-size: 0.72rem; color: var(--text-quiet); }

/* ── SPARQL ───────────────────────────────────────────────────────── */

.kg-sparql {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.kg-sparql__editor { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.25rem; }
.kg-sparql__field { font-family: var(--font-code); font-size: 0.82rem; resize: vertical; }
.kg-sparql__actions { display: flex; gap: 0.6rem; align-items: center; }
.kg-sparql__examples { padding: 1.15rem 1.25rem; }
.kg-sparql__examples ul { list-style: none; margin: 0; padding: 0; }
.kg-sparql__examples li { margin-bottom: 0.5rem; }
.kg-sparql__result { grid-column: 1 / -1; }
.kg-sparql__turtle, .kg-sparql__detail {
  font-family: var(--font-code);
  font-size: 0.78rem;
  background: var(--surface);
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  max-height: 24rem;
}

/* ── Space ────────────────────────────────────────────────────────── */

/* The measured canvas is absolutely positioned so WebGL cannot grow its parent. */
.kg-space { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.kg-space__bar, .kg-space__heading, .kg-space__actions, .kg-space__filters {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
}
.kg-space__bar { justify-content: space-between; }
.kg-space__heading { gap: 0.55rem; }
.kg-space__eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9ac5e8; }
.kg-space__heading > .kg-space__eyebrow { background: #183047; border-radius: 5px; padding: 0.3rem 0.4rem; }
.kg-space__count, .kg-space__hint, .kg-space__physics { font-size: 0.76rem; color: var(--text-quiet); }
.kg-space__actions .button { font-size: 0.78rem; min-height: 2.2rem; }
.kg-space__actions .button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.kg-space__filters .field { width: min(100%, 20rem); }
.kg-space__physics { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.kg-space__hint { margin-left: auto; }
.kg-space__notices:empty { display: none; }
.kg-space__notices .notice { margin: 0; }
.kg-space__stage {
  position: relative; isolation: isolate; flex: 0 0 auto; height: clamp(24rem, 68vh, 52rem);
  min-height: 0; overflow: hidden; border-radius: 14px; border: 1px solid #293b51;
  background: radial-gradient(ellipse at 45% 40%, #1b2e46 0%, #0e1a2b 50%, #080e19 100%);
}
.kg-space__canvas { position: absolute; inset: 0; outline-offset: -3px; touch-action: none; }
.kg-space__canvas canvas { display: block; }
.kg-space__labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kg-space__label {
  position: absolute; top: 0; left: 0; max-width: 180px; padding: 3px 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #e5effb; background: #091220b8; border: 1px solid #7794b02e; border-radius: 5px;
  font-size: 11px; line-height: 16px; font-weight: 500; text-shadow: 0 1px 3px #000;
}
.kg-space__legend {
  position: absolute; left: 1rem; top: 1rem; display: flex; flex-wrap: wrap;
  gap: 0.4rem; max-width: min(32rem, calc(100% - 2rem)); max-height: 25%; overflow: auto;
}
.kg-space__legend button {
  display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid #7698b540;
  border-radius: 20px; padding: 0.3rem 0.6rem; color: #dce9f6; background: #0a1528d9;
  font: inherit; font-size: 0.69rem; cursor: pointer; transition: background 160ms, border-color 160ms;
}
.kg-space__legend button:hover, .kg-space__legend button[aria-pressed="true"] { background: #284564; border-color: #8ccaf8; }
.kg-space__legend button > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.kg-space__detail {
  position: absolute; right: 1rem; bottom: 3.3rem; width: min(18rem, calc(100% - 2rem));
  padding: 1rem; border: 1px solid #7296b447; border-radius: 12px; color: #ecf5ff;
  background: #0b172bea; box-shadow: 0 10px 40px #0004; backdrop-filter: blur(14px);
  animation: kg-space-reveal 200ms ease-out;
}
.kg-space__detail h3 { margin: 0.45rem 1rem 0.5rem 0; font-size: 1rem; overflow-wrap: anywhere; }
.kg-space__detail p { color: #adc1d8; font-size: 0.75rem; margin: 0; }
.kg-space__dismiss { float: right; border: 0; padding: 0.1rem; background: none; color: #b9cde2; cursor: pointer; }
.kg-space__navigation { position: absolute; bottom: 0.8rem; left: 1rem; right: 1rem; color: #afc4da; font-size: 0.7rem; pointer-events: none; text-shadow: 0 1px 4px #000; }
.kg-space__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.7rem; padding: 2rem; color: #c6d9ec; text-align: center; background: #0b1524b3; }
.kg-space__empty p { max-width: 30rem; font-size: 0.85rem; }
.kg-space--fullscreen, .kg-space:fullscreen {
  position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100%; height: 100dvh;
  box-sizing: border-box; padding: 1rem; background: var(--surface); overflow: auto;
}
.kg-space--fullscreen .kg-space__stage, .kg-space:fullscreen .kg-space__stage { flex: 1 1 0; height: auto; min-height: 12rem; }
@keyframes kg-space-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 42rem) {
  .kg-space__bar, .kg-space__filters { align-items: stretch; }
  .kg-space__actions { gap: 0.25rem; }
  .kg-space__actions .button { padding: 0.4rem 0.5rem; }
  .kg-space__hint { display: none; }
  .kg-space__filters .field { flex: 1; min-width: 8rem; }
  .kg-space__stage { height: 65vh; }
  .kg-space__legend { left: 0.6rem; top: 0.6rem; }
  .kg-space--fullscreen, .kg-space:fullscreen { padding: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-space__detail { animation: none; }
  .kg-space__legend button { transition: none; }
}

/* Narrow screens: everything stacks, and the drawing keeps its height. */
@media (max-width: 60rem) {
  .kg-graph__row { grid-template-columns: minmax(0, 1fr); }
  .detail { width: auto; }
  .kg-sparql { grid-template-columns: minmax(0, 1fr); }
  .kg-bars li { grid-template-columns: 8rem 1fr auto; }
}

/* ── The graph at a citation ──────────────────────────────────────────
   Every source card carries what the graph saw at that place. Always
   visible, not behind a click: evidence somebody has to look for does not
   get read. */

.source__graph {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.3rem 0.55rem 0.45rem 2.1rem;
}

.source__entities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* The colour comes from the ontology, the same tone as in the graph. That
   sameness is the whole reason anybody connects the two. */
.entity-chip {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.4rem;
  font: inherit;
  font-size: 0.72rem;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.entity-chip:hover { filter: brightness(1.12); }
.entity-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.source__facts { list-style: none; margin: 0; padding: 0; }

.source__fact {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.74rem;
  color: var(--text-quiet);
  flex-wrap: wrap;
}

.source__fact-subject, .source__fact-object { color: var(--text); }

.turn__graph-note {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  color: var(--text-quiet);
}

.turn__graph-label { color: var(--text-quiet); }

.expansion-chip {
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  cursor: help;
}

/* Agent activity stays compact until the reader opens the ordered trace. */
.agent-activity {
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  min-width: 0;
}
.agent-activity__summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
.agent-activity__summary::-webkit-details-marker { display: none; }
.agent-activity__summary:hover { background: var(--accent-soft); }
.agent-activity__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.agent-activity__caret { font-size: 1.4rem; line-height: 1; transition: transform 120ms ease; }
.agent-activity[open] > summary .agent-activity__caret { transform: rotate(90deg); }
.agent-activity__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.7rem; min-width: 0; }
.agent-activity__count { color: var(--text-quiet); }
.agent-activity__state { margin-left: auto; color: var(--text-quiet); flex-shrink: 0; font-size: 0.75rem; }
.agent-activity__state--live { color: var(--accent); }
.agent-activity__latest { margin: 0; padding: 0 1rem 0.7rem; color: var(--text-quiet); }
.agent-activity__list { list-style: none; margin: 0; padding: 0 1rem 0.5rem; max-height: 22rem; overflow: auto; overscroll-behavior: contain; }
.agent-activity__step { display: flex; gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.agent-activity__number { display: grid; place-items: center; flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.agent-activity__body { min-width: 0; flex: 1; }
.agent-activity__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.agent-activity__repetitions { padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent-activity__result { margin-left: auto; color: var(--accent); font-size: 0.72rem; }
.agent-activity__result--empty { color: var(--text-quiet); }
.agent-activity__input { display: block; margin-top: 0.35rem; color: var(--text-quiet); font-family: var(--font-code); font-size: 0.72rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .agent-activity__summary { padding: 0.75rem; gap: 0.5rem; }
  .agent-activity__heading { flex-direction: column; gap: 0.15rem; }
  .agent-activity__list { padding: 0 0.75rem 0.4rem; }
  .agent-activity__result { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .agent-activity__caret { transition: none; } }

/* Womit die Antwort erzeugt wurde und was sie gekostet hat. Ruhig und ganz
   unten: es gehoert zur Antwort, aber niemand liest es zuerst. */
.turn__llm {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--text-quiet);
}

.llm-chip {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-code);
  cursor: help;
}

.llm-tokens { font-variant-numeric: tabular-nums; cursor: help; }
.llm-duration, .llm-speed { font-variant-numeric: tabular-nums; cursor: help; padding: 0.15rem 0.45rem; background: var(--surface); border-radius: var(--radius-sm); }
.llm-speed { color: var(--accent); }

/* ── The CRM ───────────────────────────────────────────────────────────
   Eight sections over one project's contacts. Nothing here invents a
   colour: every state reads from the same four tokens as the rest of the
   interface, and the tones below are the accent, the warning and two mixes
   of them. A CRM with its own palette would look like a different product
   bolted on, which is exactly what it must not be.
   ──────────────────────────────────────────────────────────────────── */

.crm { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }

/* ⭐ Die Bereichsnavigation und der Import/Export-Knopf stehen seit
   2026-09-05 in der zweiten Spalte der Huelle. Acht Bereiche in einer
   Zeile lasen sich wie Reiter und schoben die Tabelle nach unten. */
.crm__body { min-width: 0; }

.crm-section { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }

.crm-subhead {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-quiet);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Toolbar and filters ───────────────────────────────────────────── */

.crm-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.crm-search { flex: 1 1 12rem; min-width: 9rem; max-width: 26rem; }
.crm-filter { flex: 0 0 auto; max-width: 11rem; font-size: 0.85rem; }

.crm-bulk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.7rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* ── Tables ────────────────────────────────────────────────────────── */
/* ⚠️ The table scrolls inside its own box. A page that scrolls sideways as
   a whole takes the sidebar and the header with it. */
.crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.crm-table th:first-child, .crm-table td:first-child { padding-left: 0.9rem; }
.crm-table th:last-child, .crm-table td:last-child { padding-right: 0.9rem; }

/* ⚠️ Die letzte Zeile traegt keinen Strich. Sonst liegt er auf dem Rand
   der Karte und die Ecken sehen aus, als waere die Karte gerissen. */
.crm-table tbody tr:last-child td { border-bottom: 0; }

.crm-table thead, .crm-table tbody, .crm-table tr { display: table; width: 100%; table-layout: fixed; }

.crm-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-quiet);
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0.5rem;
}

.crm-table td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-table tbody tr:hover { background: var(--surface); }

.crm-table__tick { width: 2rem; }
.crm-table__number { text-align: right; font-variant-numeric: tabular-nums; }
.crm-table__actions { width: 6rem; text-align: right; white-space: nowrap; }

.crm-table__link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.crm-table__link:hover { color: var(--accent); text-decoration: underline; }

.crm-kind-mark { margin-left: 0.35rem; color: var(--text-quiet); font-size: 0.8em; }

/* An overdue date is the one thing on this screen that has to be seen
   without being looked for. */
[data-overdue='true'] { color: var(--warning); font-weight: 600; }

/* ── Badges and chips ──────────────────────────────────────────────── */

.crm-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--text-quiet);
  background: var(--surface);
  white-space: nowrap;
}

.crm-badge[data-tone='good'] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}
.crm-badge[data-tone='cool'] { color: var(--accent); background: var(--surface); }
.crm-badge[data-tone='warn'] { color: var(--warning); background: var(--surface); }
.crm-badge[data-tone='bad'] {
  color: var(--warning);
  border-color: var(--warning);
  background: transparent;
}

.crm-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }

.crm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}

.crm-chip--toggle { cursor: pointer; font: inherit; font-size: 0.72rem; }
.crm-chip--toggle[aria-pressed='false'] { opacity: 0.6; }

.crm-chip__remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 0.9em;
  line-height: 1;
}

.crm-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-left: 0.4rem;
  vertical-align: middle;
  border: 1px solid var(--line);
}

.crm-color { width: 2.5rem; height: 2.1rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; }

/* ── Forms ─────────────────────────────────────────────────────────── */

.crm-form, .crm-detail, .crm-panel, .crm-io { padding: 1.15rem 1.25rem; }

.crm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.6rem 0.8rem;
}

.crm-field { display: flex; flex-direction: column; gap: 0.2rem; }

.crm-field__label {
  font-size: 0.72rem;
  color: var(--text-quiet);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.crm-field__check { width: 1rem; height: 1rem; align-self: start; margin-top: 0.3rem; }

.crm-form__actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }

.crm-tabs { display: flex; gap: 0.2rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--line); }

.crm-tabs__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-quiet);
  cursor: pointer;
}

.crm-tabs__tab[aria-selected='true'] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.crm-inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.crm-inline-form__check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }

/* ── One contact ───────────────────────────────────────────────────── */

.crm-detail__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.crm-detail__head h3 { margin: 0; font-size: 1.05rem; }
.crm-detail__head-actions { display: flex; gap: 0.3rem; white-space: nowrap; }

.crm-detail__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.3rem 1.5rem;
  margin-top: 0.7rem;
}

.crm-detail__line { display: flex; gap: 0.5rem; font-size: 0.87rem; padding: 0.1rem 0; }
.crm-detail__label { color: var(--text-quiet); min-width: 8rem; }
.crm-detail__value { overflow-wrap: anywhere; }
.crm-detail__notes { margin-top: 0.7rem; font-family: var(--font-reading); }
.crm-detail__block { margin-top: 0.9rem; }
.crm-detail__people { list-style: none; margin: 0; padding: 0; }
.crm-detail__people li { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.crm-detail__role { color: var(--text-quiet); font-size: 0.82rem; }

/* ── The board ─────────────────────────────────────────────────────── */
/* ⚠️ The board scrolls inside itself, not the page. Six columns do not fit
   a laptop, and the alternative takes the sidebar sideways with it. */
.crm-board {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: start;
}

.crm-column {
  flex: 0 0 15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.crm-column__head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
}

.crm-column__title { font-weight: 600; }
.crm-column__count { color: var(--text-quiet); }
.crm-column__sum { margin-left: auto; color: var(--text-quiet); font-variant-numeric: tabular-nums; }

.crm-column__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  overflow-y: auto;
  min-height: 4rem;
}

.crm-card {
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.crm-card:active { cursor: grabbing; }
.crm-card__head { display: flex; justify-content: space-between; gap: 0.4rem; align-items: start; }

.crm-card__title {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.87rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.crm-card__title:hover { color: var(--accent); }
.crm-card__value { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.crm-card__party { font-size: 0.8rem; color: var(--text-quiet); }
.crm-card__foot { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; font-size: 0.75rem; }
.crm-card__date, .crm-card__probability { color: var(--text-quiet); }

/* ── Overview ──────────────────────────────────────────────────────── */

.crm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
}

.crm-tile { padding: 0.9rem 1rem; }

.crm-tile__value {
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.crm-tile__label { font-size: 0.75rem; color: var(--text-quiet); }
.crm-tile[data-tone='good'] .crm-tile__value { color: var(--accent); }
.crm-tile[data-tone='cool'] .crm-tile__value { color: var(--accent); }
.crm-tile[data-tone='bad'] .crm-tile__value { color: var(--warning); }

.crm-columns-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.8rem;
}

.crm-mini-list { list-style: none; margin: 0; padding: 0; }
.crm-mini-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.87rem;
}
.crm-mini-list__meta { color: var(--text-quiet); font-size: 0.8rem; }
.crm-mini-list__date { margin-left: auto; color: var(--text-quiet); font-size: 0.8rem; white-space: nowrap; }

.crm-bars { display: flex; flex-direction: column; gap: 0.3rem; }
.crm-bars__row { display: grid; grid-template-columns: 8rem 1fr 2.5rem; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.crm-bars__label { color: var(--text-quiet); }
.crm-bars__track { background: var(--surface); border-radius: 999px; height: 0.55rem; overflow: hidden; }
.crm-bars__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.crm-bars__count { text-align: right; font-variant-numeric: tabular-nums; }

.crm-graph-block {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
}

.crm-graph-block__report { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--text-quiet); }

/* ── Import and export ─────────────────────────────────────────────── */

.crm-io__head { display: flex; justify-content: space-between; align-items: center; }
.crm-io__head h3 { margin: 0; font-size: 1rem; }
.crm-io__row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: end; margin: 0.6rem 0; }
.crm-io__actions { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.crm-io__report { margin-top: 0.7rem; font-size: 0.87rem; }
.crm-io__errors { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--warning); font-size: 0.82rem; }

.notice--ok {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.crm-action--warn { color: var(--warning); }

/* ── Narrow screens ────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .crm-detail__label { min-width: 6rem; }
  .crm-bars__row { grid-template-columns: 6rem 1fr 2rem; }
}

/* ─── Gebundene Quellen ─────────────────────────────────────────────────────
   Dieselbe Form wie das Ingest-Feld, weil es an derselben Projektzeile
   haengt und dieselbe Art Frage beantwortet: woher kommt, was hier steht.
   Ein eigener Look waere ein zweiter Ort zum Lernen. */

.sources {
  margin-top: 0.6rem;
  padding: 0.7rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sources__lead { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }
.sources__empty { margin: 0; font-size: 0.82rem; color: var(--text-quiet); }
.sources__hint { margin: 0; font-size: 0.78rem; color: var(--text-quiet); }

.sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sources__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.sources__main {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  /* Der Name gibt als Letztes nach: ein schmales Fenster soll die Zaehlung
     verlieren, nicht die Auskunft, worum es geht. */
  flex: 1 1 10rem;
  min-width: 0;
}

.sources__name { font-weight: 600; }
.sources__kind { font-size: 0.75rem; color: var(--text-quiet); }
.sources__prefix { font-family: var(--font-code); font-size: 0.78rem; }

.sources__meta {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-quiet);
  font-size: 0.78rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ⚠️ Eine persoenliche Quelle muss sich auf einen Blick von einer des
   Projekts unterscheiden. Wer das verwechselt, bindet sein Laufwerk in den
   falschen Kreis. */
.sources__scope { font-variant: small-caps; letter-spacing: 0.02em; }
.sources__state { color: var(--danger, #b3261e); }

.sources__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sources__personal { display: flex; align-items: center; gap: 0.4rem; }
.sources__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ⚠️ Die Obergrenzen-Warnung (D75). Sie muss auffallen, ohne wie ein Fehler
   auszusehen: es ist eine Folge der Entscheidung, kein Fehlschlag. */
.sources__warn {
  margin: 0;
  font-size: 0.78rem;
  padding: 0.45rem 0.55rem;
  border-left: 3px solid var(--warn, #b26a00);
  background: var(--surface-quiet, rgba(178, 106, 0, 0.06));
}

.sources__location { font-family: var(--font-code); font-size: 0.75rem; }
.sources__fetcher { font-size: 0.75rem; }
.sources__synced { font-size: 0.75rem; }
.sources__result { margin: 0; font-size: 0.8rem; }
.sources__refused { color: var(--warn, #b26a00); }
/* Was die Quelle beim Aufzaehlen gesehen hat: ein gedeckelter Lauf, ein
   Eintrag, der zu gross war. Leise, aber lesbar - es ist eine Feststellung
   und keine Warnung. */
.sources__notes { color: var(--text-quiet); }

/* Zugang und Auftrag stehen getrennt (D82). Der Zugang ist das Konto - eine
   Zeile, die keinen Praefix und keinen Lauf hat, dafuer eine Adresse und die
   Zahl der Auftraege, die daran haengen. Ein duenner Strich darunter, damit
   die zwei Listen nicht als eine gelesen werden. */
.sources__connections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
.sources__connections h5,
.sources h5 { margin: 0; font-size: 0.8rem; color: var(--text-quiet); font-weight: 600; }
.sources__item--connection { opacity: 0.95; }
/* Die Zahl der Auftraege ist zugleich die Begruendung dafuer, dass der Knopf
   zum Entfernen fehlt - also steht sie in derselben Zeile. */
.sources__jobs { font-size: 0.75rem; color: var(--text-quiet); }
.sources__form--connection { border-left: 2px solid var(--accent, #4a6fa5); padding-left: 0.6rem; }

/* Der Browser fuer den Ort einer Quelle. Er borgt sich den Auswaehler des
   Korpus (.picker) und sitzt im Formular statt auf einer eigenen Seite -
   eine Quelle zu binden ist ein Schritt, nicht zwei Bildschirme. */
.sources__place { display: flex; flex-direction: column; gap: 0.35rem; }
.sources__picker { margin-top: 0.35rem; }
/* Woran es noch fehlt, neben dem grauen Knopf. Leise, aber nicht versteckt. */
.sources__missing { font-size: 0.78rem; color: var(--text-quiet); align-self: center; }
/* Ein Archiv ist das Ende des Weges: kein Hineingehen, also auch kein
   Anfasser dafuer. */
.picker__row--file .picker__open { cursor: default; background: none; }
.picker__row--file .picker__glyph { color: var(--text-quiet); }
.sources__indexing { color: var(--text-quiet); }

/* ─── Einstellungen ───────────────────────────────────────────────────────
   Ein Formular, dessen eigentliche Aussage neben den Feldern steht: woher
   der geltende Wert kommt. Die Marke traegt darum Farbe und die Felder
   nicht - wer den Bildschirm ueberfliegt, soll die drei Herkuenfte
   auseinanderhalten koennen, ohne zu lesen. */
.settings { display: flex; flex-direction: column; gap: 1.1rem; max-width: 46rem; }

.settings__row { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.settings__row:last-of-type { border-bottom: none; }

.settings__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.settings__head .form__label { margin-right: 0.1rem; }

.settings__origin {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-quiet);
  cursor: help;
}
/* Hier gesetzt sticht die Bereitstellung - das ist die einzige Herkunft,
   die jemand in diesem Bildschirm hergestellt hat, und die einzige, die
   sich zuruecknehmen laesst. */
.settings__origin[data-origin='database'] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.settings__origin[data-origin='environment'] { border-style: dashed; }

.settings__reset { margin-left: auto; font-size: 0.78rem; }

/* Ein Feld, das zurueckgesetzt wird, zeigt statt einer Eingabe, was danach
   gilt. Ein leeres Feld waere dieselbe Anzeige fuer etwas ganz anderes. */
.settings__reverting { font-size: 0.82rem; }

.settings__reindex { color: var(--warning); }

.settings__switch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.settings__switch input { width: 1rem; height: 1rem; }

.settings__secret { display: flex; gap: 0.5rem; align-items: center; }
.settings__secret .field { flex: 1; }

.settings__probe { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

.settings__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: sticky;
  bottom: 0;
  padding: 0.7rem 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
/* ⚠️ Nicht als Warnung gefaerbt. Eine nicht uebernommene Aenderung ist kein
   Fehler, sondern ein Zwischenstand - sie soll auffallen und nicht
   erschrecken. */
.settings__pending {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-quiet);
}
.settings__pending .icon { width: 0.9rem; height: 0.9rem; }

/* Die Bereitstellung: eine Tabelle und kein Formular, weil sie nichts
   entgegennimmt. */
.settings__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.settings__table th {
  text-align: left;
  font-weight: 600;
  padding: 0.4rem 0.6rem 0.4rem 0;
  vertical-align: top;
  white-space: nowrap;
}
.settings__table td { padding: 0.4rem 0.6rem 0.4rem 0; vertical-align: top; }
.settings__table tr + tr th, .settings__table tr + tr td { border-top: 1px solid var(--line); }
.settings__value { font-family: var(--font-code); font-size: 0.78rem; word-break: break-all; }
.settings__unset { color: var(--text-quiet); font-style: italic; }
.settings__why { color: var(--text-quiet); text-align: right; white-space: nowrap; }

/* ── Deep Research ─────────────────────────────────────────────────────
   Der Haken am Eingabefeld und die Quelle, die nicht aus dem Korpus kommt.

   ⭐ Beides ist absichtlich unterscheidbar und nicht nur beschriftet. Eine
   Netzquelle, die wie ein Dokument des Kunden aussieht, hat die Zusicherung
   des Produkts stillschweigend aufgegeben — siehe docs/research-plan.md. */

.composer__research {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-quiet);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.composer__research:hover { border-color: var(--accent); }

/* Angehakt ist ein sichtbarer Zustand und keine Nuance: solange er steht,
   geht die naechste Frage aus dem Haus. */
.composer__research[data-on="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.composer__research input { accent-color: var(--accent); margin: 0; }
.composer__research svg { width: 0.95rem; height: 0.95rem; }

.badge--web {
  background: transparent;
  border: 1px dashed var(--accent);
  color: var(--accent);
}

/* Was aus dem Netz in den Korpus uebernommen wurde. ⭐ Der Pfad steht dabei:
   ein blosses „gespeichert" laesst jemanden gleich danach in der Suche
   danach suchen und nichts finden. */
.source__kept {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-quiet);
}

.source__kept code { font-size: 0.7rem; word-break: break-all; }
.source__kept--busy { font-style: italic; }
.source__kept--error { color: var(--danger, #b3261e); }

/* MCP schemas and JSON parameters stay inside the project panel. */
.sources__mcp { display: grid; gap: 0.75rem; min-width: 0; }
.sources__mcp label { display: grid; gap: 0.35rem; min-width: 0; }
.sources__mcp textarea, .sources__mcp select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.sources__mcp textarea { font-family: var(--font-code); resize: vertical; padding: 0.6rem; }
.sources__mcp pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: 0.75rem; }
.sources__mcp p, .sources__mcp summary { overflow-wrap: anywhere; }

.sources__provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.6rem; }
.sources__provider.button { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-align: left; white-space: normal; min-height: 4.5rem; }
.sources__provider span { font-size: 0.78rem; color: var(--text-quiet); }
.sources__provider-picker, .sources__provider-details, .sources__oauth-fields { display: grid; gap: 0.6rem; min-width: 0; }
.sources__provider-details { overflow-wrap: anywhere; }
.sources__account-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.sources__account-actions label, .sources__oauth-fields label { display: grid; gap: 0.3rem; min-width: 0; }
.sources__account-actions input, .sources__oauth-fields input { width: 100%; min-width: 0; box-sizing: border-box; }

/* Desktop downloads: uses the instance palette and stays usable in the drawer layout. */
.desktop-page { max-width: 64rem; margin: 0 auto; display: grid; gap: 1.5rem; }
.desktop__intro { max-width: 48rem; }
.desktop__eyebrow { margin: 0 0 0.6rem; color: var(--accent); font-size: 0.8rem; font-weight: 650; }
.desktop__intro h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.2; letter-spacing: -0.035em; }
.desktop__lead { color: var(--text-quiet); line-height: 1.65; margin: 0.85rem 0 0; }
.desktop__modes, .desktop__platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.desktop__mode { padding: 1.15rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.desktop__mode h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 1rem; }
.desktop__mode h3 .icon { color: var(--accent); width: 1.2rem; height: 1.2rem; }
.desktop__mode p, .desktop__platform > p { margin: 0.65rem 0 0; color: var(--text-quiet); line-height: 1.6; }
.desktop__privacy { display: flex; align-items: flex-start; gap: 0.55rem; margin: -0.4rem 0 0; color: var(--text-quiet); font-size: 0.85rem; line-height: 1.5; }
.desktop__privacy .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--teal, var(--accent)); }
.desktop__section-title { margin: 0 0 0.9rem; font-size: 1.15rem; }
.desktop__platform { min-width: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-card, none); }
.desktop__platform h3 { margin: 0; font-size: 1.3rem; }
.desktop__download-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0.85rem; }
.desktop__download { text-decoration: none; min-height: 2.7rem; white-space: normal; text-align: center; }
.desktop__hint { font-size: 0.8rem; color: var(--text-quiet); line-height: 1.6; margin: 0.65rem 0 0; }
.desktop__setup { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.desktop__steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.6rem; line-height: 1.6; }
.desktop__steps li { padding-left: 0.3rem; }
.desktop__steps li::marker { color: var(--accent); font-weight: 650; }
.desktop__server { margin-top: 1.25rem; }
.desktop__server label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.desktop__server-row { display: flex; gap: 0.6rem; }
.desktop__server-row input { flex: 1; min-width: 0; }
.desktop__server-row button { flex: none; }
.desktop__copy-status { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-quiet); }
.desktop__copy-status:empty { display: none; }
@media (max-width: 900px) {
  .desktop__modes, .desktop__platforms { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .desktop__server-row { flex-direction: column; }
  .desktop__download-actions { flex-direction: column; }
  .desktop__platform, .desktop__setup, .desktop__mode { padding: 1.1rem; }
}

/* Audit reader */
.audit { display: grid; gap: 1rem; min-width: 0; }
.audit__intro, .audit__hint { margin: 0; color: var(--text-quiet); }
.audit__hint { font-size: .8125rem; }
.audit__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .875rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.audit__field { display: grid; gap: .375rem; font-size: .8125rem; min-width: 0; }
.audit__field input { width: 100%; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); color: var(--text); font: inherit; }
.audit__actions { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.audit__toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.audit__table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.audit__table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .8125rem; }
.audit__table th, .audit__table td { padding: .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; min-width: 100px; max-width: 280px; }
.audit__table th { background: var(--surface); font-weight: 600; white-space: nowrap; }
.audit__table tr:last-child td { border-bottom: 0; }
.audit__table summary { cursor: pointer; white-space: nowrap; }
.audit__details { min-width: 210px; }
.audit__details dt { margin-top: .5rem; color: var(--text-quiet); }
.audit__details dd { margin: .125rem 0 0; white-space: pre-wrap; }
.governance__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.governance__section { margin: 2rem 0; }
.governance__section h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.governance__coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.governance__card { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
.governance__card p { font-size: .88rem; line-height: 1.55; margin: .6rem 0 0; }
.governance__card-heading { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
.governance__card-heading h3 { font-size: 1rem; margin: 0; }
.governance__badge { font-size: .75rem; white-space: nowrap; border: 1px solid var(--line); border-radius: 1rem; padding: .2rem .55rem; }
.privacy__layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.privacy__list { display: grid; gap: .5rem; max-height: 70vh; overflow: auto; }
.privacy__case { display: grid; gap: .35rem; width: 100%; text-align: left; padding: .85rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.privacy__case span { font-size: .8rem; color: var(--text-quiet); }
.privacy__case[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.privacy__form { display: grid; gap: .75rem; border: 1px solid var(--line); border-radius: .7rem; padding: 1rem; margin-bottom: 1rem; min-width: 0; }
.privacy__form h2, .privacy__form h3, .privacy__form h4 { margin: 0; }
.privacy__form .button { justify-self: start; }
.privacy__detail { min-width: 0; }
.privacy__detail h2, .privacy__form li { overflow-wrap: anywhere; }
.privacy__form .input { box-sizing: border-box; width: 100%; }
@media (max-width: 900px) { .privacy__layout { grid-template-columns: 1fr; } .privacy__list { max-height: 15rem; } }

/* Admin-owned chat model catalog and per-request model selection. */
.settings--models { max-width: none; }
.model-catalog { width: 100%; min-width: 0; }
.model-catalog__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.model-catalog__card { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.model-catalog__card .form__row, .model-catalog__fieldset > .form__row { display: grid; gap: .35rem; margin: .75rem 0; }
.model-catalog__card .form__actions { flex-wrap: wrap; margin-top: .75rem; }
.composer__model { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; color: var(--text-quiet); max-width: 220px; }
.composer__model select { max-width: 220px; min-width: 130px; }
@media (max-width: 800px) {
  .composer { flex-wrap: wrap; }
  .composer__model { flex-basis: 100%; max-width: 100%; }
  .composer__model select { max-width: 100%; }
}

/* Media studio */
.media-studio { width: 100%; min-width: 0; }
.media-studio__form, .media-studio__job { border: 1px solid var(--line, #d8dde2); border-radius: 12px; padding: 20px; margin: 16px 0; }
.media-studio__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.media-studio__selectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.media-studio .form__row { display: grid; gap: 7px; margin-bottom: 16px; min-width: 0; }
.media-studio .field { width: 100%; min-width: 0; box-sizing: border-box; }
.media-studio__prompt { resize: vertical; }
.media-studio__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.media-studio__heading h3 { overflow-wrap: anywhere; }
.media-studio__artifact { margin: 16px 0; }
.media-studio__artifact img { max-width: 100%; max-height: 600px; object-fit: contain; border-radius: 8px; }
.media-studio__artifact audio { width: 100%; }
@media (max-width: 700px) { .media-studio__selectors { grid-template-columns: 1fr; gap: 0; } .media-studio__form, .media-studio__job { padding: 14px; } }

.sso { max-width: 960px; }
.sso__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.sso__field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.sso__field input[type="checkbox"] { align-self: flex-start; }
.sso__field textarea { font-family: var(--font-mono, monospace); resize: vertical; }
.sso__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Direct, private chat attachments */
.chat-attachments { flex: 0 0 100%; grid-column: 1 / -1; min-width: 0; }
.chat-attachments__options { padding: .45rem 0; max-height: 35vh; overflow-y: auto; }
.chat-attachments summary { cursor: pointer; }
.chat-attachments__models { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; flex-wrap: wrap; }
.chat-attachments__models > span { flex: 1 0 12rem; }
.chat-attachments__models select { flex: 1 1 10rem; min-width: 0; }
.chat-attachments__list { max-height: min(12rem, 30vh); overflow-y: auto; margin: .4rem 0; }
.chat-attachments__item { border: 1px solid var(--line, #d6d9df); border-radius: .5rem; padding: .6rem; margin: .35rem 0; overflow-wrap: anywhere; }
.chat-attachments__item > span { margin-left: .6rem; font-size: .85rem; }
.chat-attachments__item img { max-width: 100%; max-height: 18rem; object-fit: contain; }
.chat-attachments__item audio { max-width: 100%; }
.chat-attachments__item iframe { width: 100%; height: 18rem; border: 0; }
.chat-attachments__text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 15rem; overflow: auto; font: inherit; font-size: .85rem; }

.composer { flex-wrap: wrap; }

/* Explicit CRM record actions stay visible on tables and pipeline cards. */
.crm-table__actions { width: 10rem; white-space: normal; }
.crm-record-actions { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: flex-end; }
.crm-record-actions .button { padding: .35rem .5rem; font-size: .8rem; }
.crm-record-actions .button--icon { width: 2.25rem; height: 2.25rem; padding: .45rem; flex: 0 0 auto; }
.crm-card > .crm-record-actions { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.crm-field__value { display: block; min-height: 2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-form { scroll-margin-top: 1rem; }
.crm-form:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: 3px; }

/* Provider setup: connections and their models stay together. */
.model-catalog__layout { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.model-catalog__providers { display: grid; gap: .65rem; position: sticky; top: 0; }
.model-catalog__providers h2 { margin: .5rem 0; }
.model-catalog__provider { display: grid; gap: .3rem; text-align: left; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--text); cursor: pointer; font: inherit; overflow-wrap: anywhere; }
.model-catalog__provider span { color: var(--text-quiet); font-size: .78rem; }
.model-catalog__provider[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); }
.model-catalog__presets { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; }
.model-catalog__preset-models { display: grid; gap: .3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .7rem; margin: 0; }
.model-catalog__preset-models legend { padding: 0 .3rem; font-size: .85em; color: var(--muted); }
.model-catalog__detail { min-width: 0; }
.model-catalog__detail > .model-catalog__card:first-child { margin-top: 0; }
.model-catalog__heading, .model-catalog__default, .model-catalog__savebar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.model-catalog__heading h2 { margin: 0; font-size: 1.1rem; }
.model-catalog__default { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; margin: 1rem 0; background: var(--surface-raised); }
.model-catalog__default .form__row { display: grid; gap: .4rem; flex: 1 1 20rem; max-width: 42rem; }
.model-catalog__secret, .model-catalog__import { display: flex; align-items: center; gap: .5rem; }
.model-catalog__secret .field, .model-catalog__import .field { flex: 1; min-width: 0; }
.model-catalog__import { margin: 1rem 0; }
.model-catalog__probe { margin-top: 1rem; }
.model-catalog summary { cursor: pointer; }
.model-catalog__empty { padding: 1.2rem; color: var(--text-quiet); background: var(--ground); border-radius: 8px; }
.model-catalog__model { border: 1px solid var(--line); border-radius: 10px; margin-top: .75rem; overflow: hidden; }
.model-catalog__model-summary { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; border: 0; color: var(--text); background: var(--surface-raised); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.model-catalog__model-summary small, .model-catalog__capability small { display: block; color: var(--text-quiet); font-size: .78rem; margin-top: .25rem; }
.model-catalog__badges { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.model-catalog__badge { background: var(--accent-soft); border-radius: 5px; padding: .2rem .45rem; font-size: .73rem; }
.model-catalog__model-editor { padding: 0 1rem 1rem; }
.model-catalog__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.model-catalog__capabilities { border: 0; padding: 0; margin: .75rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; min-width: 0; }
.model-catalog__capabilities legend { font-weight: 600; margin-bottom: .6rem; }
.model-catalog__capability { display: flex; align-items: flex-start; gap: .5rem; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.model-catalog__capability:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.model-catalog__danger { margin: 1rem 0; color: var(--text-quiet); }
.model-catalog__issues { margin: .3rem 0; padding-left: 1rem; }
.model-catalog__issues button { text-align: left; white-space: normal; }
.model-catalog__savebar { position: sticky; bottom: 0; z-index: 2; background: var(--surface-raised); padding: 1rem; border: 1px solid var(--line); border-radius: 10px; margin-top: 1rem; box-shadow: 0 -4px 16px rgba(0,0,0,.04); }
.model-catalog__savebar .form__actions { margin: 0; flex-wrap: wrap; }
@media (max-width: 1050px) { .model-catalog__layout { grid-template-columns: 1fr; } .model-catalog__providers { position: static; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .model-catalog__providers h2 { grid-column: 1 / -1; } }
@media (max-width: 650px) { .model-catalog__fields, .model-catalog__capabilities { grid-template-columns: 1fr; } .model-catalog__model-summary, .model-catalog__import { flex-direction: column; align-items: stretch; } .model-catalog__badges { justify-content: flex-start; } .model-catalog__savebar { position: static; } }

/* Chat composer: direct uploads, searchable models and clear send readiness. */
.composer--enhanced { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); min-width: 0; }
.composer--enhanced:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.composer--enhanced textarea.composer__field { width: 100%; box-sizing: border-box; flex: none; min-height: 3.4rem; padding: .45rem .25rem; border: 0; background: transparent; box-shadow: none; resize: none; }
.composer__toolbar { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.composer__actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.composer__status { font-size: .73rem; color: var(--text-quiet); padding: 0 .25rem; }
.composer__drop-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; border: 2px dashed var(--accent); border-radius: 14px; background: var(--surface-raised); color: var(--accent); font-weight: 600; }
.composer__more { position: relative; }
.composer__more > summary { list-style: none; cursor: pointer; color: var(--text-quiet); padding: .6rem; }
.composer__more > summary::-webkit-details-marker, .chat-model-picker > summary::-webkit-details-marker { display: none; }
.composer__more-menu { position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 21; min-width: 13rem; padding: .5rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px #0002; }
.chat-model-picker { position: relative; min-width: 0; max-width: 100%; }
.chat-model-picker > summary { display: flex; align-items: center; gap: .55rem; list-style: none; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.chat-model-picker > summary[aria-disabled=true] { opacity: .6; cursor: default; }
.chat-model-picker > summary:focus-visible, .chat-model-picker__option:focus-visible, .chat-attachments__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-model-picker__icon { color: var(--accent); }
.chat-model-picker__current { display: grid; min-width: 0; gap: .1rem; }
.chat-model-picker__current strong { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20rem; }
.chat-model-picker__current > span { font-size: .68rem; color: var(--text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20rem; }
.chat-model-picker__popover { position: absolute; left: 0; bottom: calc(100% + .6rem); z-index: 22; box-sizing: border-box; width: min(26rem, calc(100vw - 4rem)); padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); box-shadow: 0 12px 40px #0003; }
.chat-model-picker__heading { font-size: .82rem; font-weight: 600; margin-bottom: .65rem; }
.chat-model-picker__popover > .field { width: 100%; box-sizing: border-box; }
.chat-model-picker__choices { max-height: min(20rem, 35vh); overflow-y: auto; margin: .5rem -.2rem; padding: .2rem; overscroll-behavior: contain; }
.chat-model-picker__provider { color: var(--text-quiet); font-size: .7rem; font-weight: 600; padding: .7rem .5rem .3rem; }
.chat-model-picker__option { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; padding: .6rem; border: 1px solid transparent; border-radius: 8px; color: var(--text); background: transparent; cursor: pointer; font: inherit; }
.chat-model-picker__option:hover, .chat-model-picker__option[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); }
.chat-model-picker__option > span:first-child { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.chat-model-picker__option strong { font-size: .85rem; }
.chat-model-picker__option small { color: var(--text-quiet); font-size: .72rem; }
.chat-model-picker__option small.chat-model-picker__vision { color: var(--accent); }
.composer--enhanced .chat-attachments { flex: none; }
.chat-attachments__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; }
.chat-attachments__toolbar .button { padding: .35rem .5rem; font-size: .78rem; }
.chat-attachments__add > span { font-size: 1.1rem; margin-right: .3rem; }
.chat-attachments__scope { color: var(--text-quiet); font-size: .71rem; }
.chat-attachments__settings-toggle { margin-left: auto; }
.composer--enhanced .chat-attachments__options { border: 1px solid var(--line); border-radius: 10px; padding: .7rem; margin-top: .5rem; max-height: 28vh; }
.chat-attachments__options fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.chat-attachments__options .form__hint { font-size: .75rem; }
.chat-attachments__caption, .chat-attachments__files > summary { color: var(--text-quiet); font-size: .74rem; margin-top: .6rem; }
.composer--enhanced .chat-attachments__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .5rem; max-height: min(15rem, 26vh); align-items: start; overscroll-behavior: contain; }
.composer--enhanced .chat-attachments__item { margin: 0; padding: .6rem; min-width: 0; }
.chat-attachments__file-header { display: flex; gap: .6rem; align-items: center; }
.chat-attachments__type { display: grid; place-items: center; flex: 0 0 2.3rem; height: 2.6rem; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: .62rem; font-weight: 700; }
.chat-attachments__file-info { display: grid; gap: .2rem; min-width: 0; flex: 1; }
.chat-attachments__file-info strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attachments__file-info span { color: var(--text-quiet); font-size: .7rem; }
.chat-attachments__remove { border: 0; border-radius: 5px; background: transparent; color: var(--text-quiet); font-size: 1.25rem; cursor: pointer; padding: .3rem .5rem; }
.chat-attachments__remove:hover { background: var(--accent-soft); }
.chat-attachments__remove:disabled { opacity: .4; cursor: default; }
.chat-attachments__preview { font-size: .75rem; margin-top: .5rem; }
.chat-attachments__preview .button { font-size: .75rem; }
.chat-attachments__item[data-status=failed] { border-color: var(--danger, #bc5543); }
.chat-attachments__error { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--danger, #bc5543); font-size: .8rem; margin-top: .5rem; }
@media (max-width: 640px) {
  .composer--enhanced { padding: .6rem; }
  .chat-attachments__settings-toggle { margin-left: 0; }
  .chat-attachments__scope { order: 3; flex-basis: 100%; padding-left: .5rem; }
  .chat-model-picker { max-width: calc(100vw - 5rem); }
  .chat-model-picker__current strong, .chat-model-picker__current > span { max-width: 13rem; }
  .composer__toolbar .composer__research { font-size: .72rem; padding: .35rem; }
}

/* Native folder permissions stay readable inside narrow project panels. */
.local-folders { margin-block: 1rem; padding: 1rem; border: 1px solid var(--border, #dce4ef); border-radius: 16px; background: var(--surface, #fff); min-width: 0; }
.local-folders__choice { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.local-folders__choice > div { flex: 1 1 200px; min-width: 0; }
.local-folders p { margin: .4rem 0; line-height: 1.5; }
.local-folders__icon { color: #428e76; }
.local-folders__saved { margin-top: .8rem; }
.local-folders__saved ul { list-style: none; padding: 0; }
.local-folders__saved li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-block: .5rem; }
.local-folders__saved code { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.local-folders__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Agent file proposals: exact content approval within the originating chat. */
.agent-file-draft { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border, #d4d4d8); border-radius: .75rem; }
.agent-file-draft__path { display: block; margin-top: .5rem; overflow-wrap: anywhere; }
.agent-file-draft__content { max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .75rem; font-size: .85rem; }
.agent-file-draft__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* Generated images stay within the chat; their modal uses the available screen. */
.code-image-preview { position: relative; display: block; width: 100%; min-width: 0; margin: .75rem 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); cursor: zoom-in; overflow: hidden; }
.code-image-preview img { display: block; width: 100%; height: auto; max-height: min(60dvh, 32rem); object-fit: contain; }
.code-image-preview__hint { position: absolute; right: .5rem; bottom: .5rem; padding: .3rem .6rem; border-radius: 6px; color: white; background: #142137cc; font-size: .8rem; }
.code-image-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.code-image-viewer { box-sizing: border-box; width: calc(100vw - 2rem); height: calc(100dvh - 2rem); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); color: var(--text); overflow: hidden; }
.code-image-viewer[open] { display: flex; flex-direction: column; }
.code-image-viewer::backdrop { background: #101827c9; }
.code-image-viewer__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .75rem; border-bottom: 1px solid var(--line); }
.code-image-viewer__title { flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-image-viewer__controls { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.code-image-viewer__scale { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.code-image-viewer__viewport { flex: 1; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: none; cursor: grab; background: var(--surface); }
.code-image-viewer__viewport:active { cursor: grabbing; }
.code-image-viewer__canvas { display: flex; justify-content: center; align-items: center; }
.code-image-viewer__canvas img { display: block; flex: none; max-width: none; max-height: none; user-select: none; }
.code-image-viewer__help { margin: 0; padding: .5rem .75rem; font-size: .75rem; color: var(--text-quiet); }
@media (max-width: 600px) {
  .code-image-viewer { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .code-image-viewer__toolbar { gap: .4rem; padding: .5rem; }
  .code-image-viewer__title { flex-basis: 100%; }
  .code-image-viewer__controls .button { padding: .4rem .6rem; min-height: 2.5rem; }
}

/* Conversation export stays reachable beside the title on narrow screens. */
.chat-copy { max-width: min(15rem, 44vw); white-space: normal; line-height: 1.3; }
.chat-copy-dialog { box-sizing: border-box; width: min(48rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); color: var(--text); }
.chat-copy-dialog::backdrop { background: #14213780; }
.chat-copy-dialog h2 { margin-top: 0; }
.chat-copy-dialog textarea { box-sizing: border-box; display: block; width: 100%; height: 45vh; margin: 1rem 0; resize: vertical; font: inherit; }

/* Exact CRM changes awaiting the originating user's approval. */
.agent-crm-action article { margin: 1rem 0; padding-top: .75rem; border-top: 1px solid var(--border, #dbe2ec); }
.agent-crm-action table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.agent-crm-action th, .agent-crm-action td { padding: .625rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border, #dbe2ec); }
.agent-crm-action th { font-weight: 600; }
.agent-crm-action td pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; background: transparent; padding: 0; }
.agent-crm-action p { margin: .625rem 0; }

/* File management: batch progress, rename form and metadata. */
.files-upload, .files-rename, .file-information {
  min-width: 0; margin: .75rem 0; padding: 1rem;
  border: 1px solid var(--line, #dce4f1); border-radius: 14px;
  background: var(--surface, #fff); overflow-wrap: anywhere;
}
.files-upload__head, .files-rename__fields { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.files-upload__head { justify-content:space-between; }
.files-upload progress { width:100%; margin:.5rem 0; accent-color:#2d60e8; }
.files-upload__current { display:block; font-size:.9rem; }
.files-upload__failures { max-height:12rem; overflow:auto; color:#a33c25; padding-left:1.3rem; }
.files-rename label { display:block; margin-bottom:.6rem; font-weight:600; }
.files-rename input { flex:1; min-width:12rem; }
.tree__rename { flex:none; border:0; background:transparent; color:var(--muted, #677a95); padding:.5rem; cursor:pointer; border-radius:8px; }
.tree__rename:hover, .tree__rename:focus-visible { background:#e9efff; color:#2b5be4; }
.tree__rename:disabled { opacity:.4; cursor:default; }
.file-information summary { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:600; }
.file-information summary::after { content:'⌄'; margin-left:auto; }
.file-information[open] summary::after { content:'⌃'; }
.file-information dl { margin:.8rem 0; }
.file-information dl > div { display:grid; grid-template-columns:minmax(100px, 35%) minmax(0, 1fr); gap:.75rem; padding:.35rem 0; }
.file-information dt { color:var(--muted, #677a95); }
.file-information dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:600px) {
  .files-rename__fields input { flex-basis:100%; min-width:0; }
  .file-information dl > div { grid-template-columns:1fr; gap:.15rem; }
}

/* Folder names open a location; the separate arrow only expands the tree. */
.tree__expand { width: auto; min-width: 1.75rem; min-height: 2.25rem; padding-right: .35rem; border: 0; border-radius: .4rem; background: transparent; cursor: pointer; }
.tree__expand:hover { background: var(--surface); }
.tree__expand:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree__expand:disabled { cursor: default; opacity: .5; }
.files__upload-target { margin: .4rem 0 0; color: var(--text-quiet); font-size: .8125rem; overflow-wrap: anywhere; }

.crm-global-search { margin-bottom: 1rem; position: relative; }
.crm-global-search > .field { width: 100%; }
.crm-search-results { display: grid; gap: .25rem; padding: .7rem; border: 1px solid var(--line); background: var(--surface-raised); max-height: 24rem; overflow: auto; }
.crm-search-results .button { display: flex; justify-content: space-between; text-align: left; }
.crm-view-controls, .crm-paging { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; }
.crm-view-controls .field { max-width: 15rem; }
.crm-paging { justify-content: flex-end; }
.crm-dossier { position: fixed; z-index: 50; top: 5rem; right: 1rem; bottom: 1rem; width: min(42rem, calc(100vw - 2rem)); overflow: auto; background: var(--surface-raised, white); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 8px 35px #0003; }
.crm-dossier section, .crm-dossier details { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.crm-dossier-item { display: grid; gap: .4rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.crm-dossier .crm-detail__line { overflow-wrap: anywhere; }
.crm-config-row { display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: .5rem; margin: .5rem 0; }
.crm-config-row .field { min-width: 0; width: 100%; }
.crm-custom-fields { margin-top: 1rem; }
@media(max-width: 700px) { .crm-config-row { grid-template-columns: 1fr 1fr; } .crm-view-controls .field { max-width: 100%; } }

/* Evidence-backed dependency diagrams, shared by chat and knowledge graph. */
.impact-page { padding: 1.5rem; min-width: 0; }
.impact { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); color: var(--text); min-width: 0; }
.impact h3 { margin: 0 0 .6rem; font-size: 1rem; overflow-wrap: anywhere; }
.impact__controls, .impact__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.impact__controls label { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.impact__controls label:first-child { flex: 1 1 220px; }
.impact__controls .field { max-width: 100%; box-sizing: border-box; }
.impact__summary { font-weight: 600; }
.impact__caption { font-size: .8rem; color: var(--text-quiet); margin: .5rem 0; }
.impact__scroll { overflow: auto; max-width: 100%; max-height: 500px; margin-top: 1rem; }
.impact__diagram { display: block; max-width: none; }
.impact__diagram text { fill: var(--text); font-family: inherit; font-size: 12px; paint-order: stroke; stroke: var(--surface-raised); stroke-width: 4px; stroke-linejoin: round; }
.impact__node { width: 100%; height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.impact__node span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.impact__node small { font-size: 11px; color: var(--text-quiet); }
.impact__node--root { background: var(--accent-soft); }
.impact__node[aria-pressed="true"] { border: 2px solid var(--accent); }
.impact__node:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.impact__detail { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem; }
.impact__actions { align-items: center; justify-content: space-between; }
.impact__path { padding-left: 1.25rem; }
.impact__path > li { margin: .75rem 0; overflow-wrap: anywhere; }
.impact__evidence { list-style: none; padding: 0; margin: .25rem 0; font-size: .8rem; overflow-wrap: anywhere; }
.impact__evidence .button, .impact__all .button { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.impact__all summary { cursor: pointer; padding: .5rem 0; }
@media (max-width: 600px) { .impact-page { padding: .75rem; } .impact { padding: .75rem; } }

/* CRM workflows: ordered steps stay readable at narrow widths. */
.crm-automation { display: grid; gap: 1rem; min-width: 0; }
.crm-automation .crm-panel { min-width: 0; overflow-wrap: anywhere; }
.crm-automation .crm-record-actions { justify-content: flex-start; margin-block: .65rem; }
.crm-automation .crm-record-actions > .field { width: auto; max-width: 100%; }
.crm-workflow-steps { list-style: none; padding: 0 0 0 1rem; margin: 1rem 0; border-left: 2px solid var(--line); display: grid; gap: .8rem; }
.crm-automation .field { max-width: 100%; box-sizing: border-box; }
.crm-automation .crm-chip { display: inline-block; margin-inline: .5rem; }
@media (max-width: 600px) {
  .crm-automation .crm-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-workflow-steps { padding-left: .5rem; }
  .crm-automation .crm-panel { padding: .8rem; }
}

/* Request-level costs and personal usage dashboard. */
.llm-cost { margin-top: .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .8rem; min-width: 0; }
.llm-cost > summary { cursor: pointer; padding: .65rem .8rem; color: var(--text-quiet); }
.llm-cost > summary strong { color: var(--text); margin-left: .7rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.llm-cost__body { padding: 0 .8rem .8rem; }
.llm-cost__tokens { display: flex; gap: .4rem 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.llm-cost__calls { margin: .8rem 0 0; padding-left: 1.4rem; }
.llm-cost__calls li { padding: .65rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.llm-cost__call-head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.usage-dashboard { margin-bottom: 1.25rem; }
.usage-dashboard__controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .5rem; }
.usage-dashboard .home-panel__head .usage-dashboard__controls > label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.usage-dashboard .home-panel__head .usage-dashboard__controls .field,
.usage-dashboard .home-panel__head .usage-dashboard__controls > .button { height: 2.75rem; box-sizing: border-box; }
.usage-dashboard__metrics { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1rem; margin: .5rem 0 1rem; }
.usage-dashboard__metrics > div { min-width: 0; display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.usage-dashboard__metrics strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.usage-dashboard__metrics small { color: var(--text-quiet); }
.usage-dashboard__requests { list-style: none; padding: 0; margin: 1rem 0; }
.usage-dashboard__requests > li { border-top: 1px solid var(--line); padding: 1rem 0; }
.usage-dashboard__request-head { display: flex; justify-content: space-between; gap: .7rem; }
.usage-dashboard__request-head strong { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.usage-dashboard__request-head time { color: var(--text-quiet); font-size: .75rem; flex-shrink: 0; }
.model-catalog__pricing { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: .8rem 0; padding: .8rem; }
@media (max-width: 700px) {
  .usage-dashboard .home-panel__head, .usage-dashboard__request-head { flex-direction: column; align-items: stretch; }
  .usage-dashboard__metrics { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .usage-dashboard__metrics > div:last-child { grid-column: 1 / -1; }
  .llm-cost > summary strong { display: block; margin: .25rem 0 0; }
}

/* Apps: a saved prompt with a form in front of it. */
.apps { display: grid; gap: 1rem; }
.apps__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.apps__card { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; display: grid; gap: .6rem; }
.apps__heading { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.apps__heading h2 { margin: 0; font-size: 1.05rem; }
.apps__badge { font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; }
.apps__empty { color: var(--muted); }
.apps__editor, .apps__run { display: grid; gap: .75rem; border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
.apps__fields { display: grid; gap: .75rem; }
.apps__field { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; display: grid; gap: .5rem; margin: 0; }
.apps__field legend { padding: 0 .3rem; font-size: .8rem; color: var(--muted); }
.apps__shares { border-top: 1px solid var(--line); padding-top: .75rem; display: grid; gap: .5rem; }
.apps__share-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.apps__share-add { display: flex; gap: .5rem; align-items: center; }
.apps__confirmation { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; display: grid; gap: .5rem; }

/* Meetings: a recording, its transcript, and the notes drawn from it. */
.meetings { display: grid; gap: 1rem; }
.meetings__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.meetings__card { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; display: grid; gap: .6rem; }
.meetings__heading { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.meetings__heading h2 { margin: 0; font-size: 1.05rem; }
.meetings__badge { font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; }
.meetings__empty { color: var(--muted); }
.meetings__form { display: grid; gap: .75rem; border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
.meetings__detail { border-top: 1px solid var(--line); padding-top: .75rem; display: grid; gap: .6rem; }
.meetings__detail h3 { margin: 0 0 .3rem; font-size: .95rem; }
.meetings__synopsis { margin: 0; }
.meetings__items { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.meetings__owner { color: var(--muted); }
.meetings__offset { color: var(--muted); font-size: .8em; }
.meetings__transcript { white-space: pre-wrap; max-height: 24rem; overflow: auto; border: 1px solid var(--line);
                        border-radius: var(--radius-sm); padding: .75rem; font-size: .85rem; }
.meetings__confirmation { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; display: grid; gap: .5rem; }
.meetings__crm { border-top: 1px solid var(--line); padding-top: .75rem; display: grid; gap: .5rem; }
.meetings__crm h3 { margin: 0; font-size: .95rem; }

/* ─── Typed answers: chat card and playground ────────────────────────────── */
.decision-card { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.decision-card__header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; justify-content: space-between; }
.decision-card__backend { font-size: .8rem; padding: .1rem .5rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.decision-card__source { color: var(--text-quiet); font-size: .85rem; margin: .25rem 0 .5rem; overflow-wrap: anywhere; }
.decision-card__question { padding: .75rem 0; border-top: 1px solid var(--line); }
.decision-card__qhead { display: flex; gap: .5rem; align-items: center; }
.decision-card__type { font-size: .75rem; color: var(--text-quiet); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 .45rem; }
.decision-card__instructions { margin: .35rem 0; color: var(--text-quiet); font-style: italic; }
.decision-card__headline { margin: .35rem 0; font-weight: 600; }
.decision-card__options { list-style: none; margin: .35rem 0; padding: 0; display: grid; gap: .3rem; }
.decision-card__options li { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 3.5rem; gap: .5rem; align-items: center; font-size: .9rem; }
.decision-card__option--winner { font-weight: 600; }
.decision-card__label { overflow-wrap: anywhere; }
.decision-card__bar { display: block; height: .45rem; border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; }
.decision-card__bar > span { display: block; height: 100%; background: var(--text-quiet); }
.decision-card__bar--winner > span { background: var(--accent); }
.decision-card__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-quiet); }
.decision-card__meta { font-size: .8rem; color: var(--text-quiet); margin: .25rem 0; }
.decision-card__evidence { margin: .5rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.decision-card__evidence > span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-quiet); margin-bottom: .2rem; }
.playground__intro { color: var(--text-quiet); max-width: var(--reading-width); }
.playground__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 60rem) { .playground__grid { grid-template-columns: minmax(0, 1fr); } }
.playground__input { display: grid; gap: 1rem; }
.playground__block { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; display: grid; gap: .5rem; }
.playground__block legend { font-weight: 600; padding: 0 .25rem; }
.playground__modes { display: flex; gap: 1rem; flex-wrap: wrap; }
.playground__hint { font-size: .85rem; color: var(--text-quiet); margin: 0; }
.playground__questions, .playground__text { width: 100%; font-family: var(--font-code); font-size: .82rem; }
.playground__block .field { display: grid; gap: .35rem; }
.playground__block .field input[type="text"] { width: 100%; }
.decision-card__evidence--weak { border-left-color: var(--line); background: var(--surface); color: var(--text-quiet); }

/* „Apps" zum Aufklappen, die Module darunter eingerueckt. */
.rail__row { display: flex; align-items: center; gap: 0.125rem; }
.rail__row > .rail__item { flex: 1; min-width: 0; }
.rail__toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-quiet); cursor: pointer;
  transition: background var(--duration), color var(--duration);
}
.rail__toggle:hover { background: var(--surface); color: var(--text); }
.rail__toggle .icon { width: 1rem; height: 1rem; }
.rail__subitems {
  display: grid; gap: 0.125rem; margin: 0.125rem 0 0.25rem 1.2rem;
  padding-left: 0.5rem; border-left: 1px solid var(--line);
}
.rail__item--sub { padding: 0.4rem 0.6rem; font-size: 0.85rem; }

/* Playground: Projektdateien zum Auswaehlen. */
.playground__files {
  list-style: none; margin: 0.25rem 0; padding: 0.25rem;
  max-height: 16rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.playground__file {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: inherit; font: inherit; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.playground__file:hover { background: var(--surface); }
.playground__file[aria-pressed="true"] { background: var(--accent-soft); font-weight: 600; }
.playground__chosen { margin: 0.25rem 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.playground__chosen code { font-size: 0.85rem; }

.decision-card__method { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--text-quiet); }
.decision-card__refuted { margin-top: 0.5rem; font-size: 0.85rem; }
.decision-card__refuted > span { font-weight: 600; }
.decision-card__refuted ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.decision-card__refuted q { font-style: italic; }

.project-setup { box-sizing: border-box; width: min(48rem, 100%); margin: 0 auto; padding: clamp(1rem, 4vw, 3rem) 1rem; }

/* The notice stays above the application; build identity lives in the sidebar. */
.application { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.application > :nth-child(2) { min-height: 0; }
.application > :nth-child(2):not(.shell) { overflow: auto; }
.update-controls__status { display: grid; gap: .25rem; font-size: .6875rem; line-height: 1.4; overflow-wrap: anywhere; }
.update-controls__status span:empty { display: none; }
.update-controls__status a { color: inherit; text-underline-offset: 3px; }
.update-controls__check:disabled { opacity: .6; cursor: wait; }
.update-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; padding: .5rem 1rem; color: var(--text); background: var(--ground); border-bottom: 1px solid var(--accent); font-size: .8125rem; }
.update-notice a, .update-notice__dismiss { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.update-notice__dismiss { border: 0; background: none; font: inherit; cursor: pointer; padding: .25rem; }

/* Solo setup: one decision at a time, with the same controls as settings. */
.solo-setup { min-height: 100vh; padding: clamp(20px, 4vw, 56px); background: var(--ground); }
.solo-setup__brand { max-width: 1100px; margin: 0 auto 40px; display: flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 700; }
.solo-setup__brand svg { width: 34px; height: 40px; }
.solo-setup__layout { max-width: 1100px; margin: auto; display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 44px; align-items: start; }
.solo-setup__progress { position: sticky; top: 32px; }
.solo-setup__progress > p { color: var(--text-quiet); font-size: .9rem; }
.solo-setup__progress ol { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 20px; }
.solo-setup__progress li { display: flex; align-items: center; gap: 12px; color: var(--text-quiet); }
.solo-setup__progress li[aria-current="step"] { color: var(--accent); font-weight: 700; }
.solo-setup__number { display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; }
.solo-setup__progress li[aria-current="step"] .solo-setup__number { color: white; background: var(--accent); border-color: var(--accent); }
.solo-setup__progress li[data-done="true"] .solo-setup__number { border-color: var(--ok); color: var(--ok); }
.solo-setup__card { min-width: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 12px 40px #1c1b1806; }
.solo-setup__card h1 { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.2; margin: 0 0 24px; outline: none; }
.solo-setup__card h2 { font-size: 1.1rem; margin: 0; }
.solo-setup__card p { line-height: 1.65; margin: 0; }
.solo-setup__body { min-width: 0; border: 0; padding: 0; margin: 0; }
.solo-setup__stack { display: flex; flex-direction: column; gap: 16px; }
.solo-setup__field { display: grid; gap: 8px; }
.solo-setup__lead { font-size: 1.1rem; }
.solo-setup__note, .solo-setup__sample { background: var(--accent-soft); padding: 20px; border-radius: 12px; }
.solo-setup__sample { display: grid; gap: 12px; }
.solo-setup__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.solo-setup__choice { display: grid; gap: 10px; text-align: left; font: inherit; color: var(--text); background: var(--surface-raised); padding: 20px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.solo-setup__choice span { color: var(--text-quiet); font-size: .9rem; line-height: 1.5; }
.solo-setup__choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.solo-setup__details { padding: 16px 0; border-top: 1px solid var(--line); }
.solo-setup__details > summary { cursor: pointer; font-weight: 600; line-height: 1.5; }
.solo-setup__details[open] > summary { margin-bottom: 16px; }
.solo-setup__details > p, .solo-setup__details > .button { margin-bottom: 14px; }
.solo-setup__check { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.solo-setup__check input { width: 18px; height: 18px; flex-shrink: 0; }
.solo-setup__connection { display: grid; gap: 8px; padding: 20px; background: var(--surface); border-radius: 12px; }
.solo-setup__path { overflow-wrap: anywhere; font-size: .9rem; color: var(--text-quiet); }
.solo-setup__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.solo-setup__footer { display: grid; gap: 12px; border-top: 1px solid var(--line); padding: 22px 0; margin-top: 8px; }
.solo-setup__status { min-height: 28px; padding-top: 12px; color: var(--text-quiet); }
.solo-setup .button { min-height: 44px; white-space: normal; }
.solo-setup .field { width: 100%; min-height: 46px; }
.solo-setup blockquote { margin: 20px 0; padding: 18px 22px; border-left: 3px solid var(--accent); background: var(--accent-soft); line-height: 1.6; }
.solo-setup__settings { padding: 18px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 12px; }
.solo-setup__settings > .button { margin-bottom: 16px; }
@media (max-width: 760px) {
  .solo-setup { padding: 20px 14px; }
  .solo-setup__brand { margin-bottom: 20px; }
  .solo-setup__layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .solo-setup__progress { position: static; }
  .solo-setup__progress ol { display: none; }
  .solo-setup__progress > p { margin: 0; }
  .solo-setup__choices { grid-template-columns: 1fr; }
  .solo-setup__card { padding: 24px 20px; border-radius: 16px; }
}

/* Personal Solo profile */
.solo-setup__profile { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.solo-setup__profile > .solo-setup__stack { flex: 1 1 180px; min-width: 0; }
.solo-setup__profile input[type="file"] { max-width: 100%; font: inherit; }
.solo-setup__avatar { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 2rem; }
.solo-setup__avatar img, .topbar__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Skills use the shell's content width and the shared button/field controls. */
.skills-page { display: grid; gap: 1rem; min-width: 0; }
.skills-intro { margin: 0; }
.skills-toolbar, .skills-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.skills-toolbar { justify-content: space-between; }
.skills-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); }
.skills-tabs .button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .5rem .7rem; }
.skills-tabs .button[aria-pressed=true] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.skills-count, .skills-badge { display: inline-block; padding: .1rem .5rem; font-size: .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-quiet); font-weight: 400; }
.skills-filters { justify-content: flex-start; }
.skills-filters input { flex: 1 1 14rem; min-width: 0; }
.skills-grid, .skills-list { display: grid; gap: 1rem; min-width: 0; }
.skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skill-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.skill-card__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-quiet); }
.skill-card__icon svg { width: 1.125rem; height: 1.125rem; }
.skill-card__body { min-width: 0; }
.skill-card__title { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.skill-card h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.skill-card__description { margin: .4rem 0; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.skill-card__meta { font-size: .75rem; color: var(--text-quiet); }
.skill-card__actions { display: flex; gap: .5rem; align-items: center; }
.skills-grid .skill-card { grid-template-columns: auto minmax(0, 1fr); }
.skills-grid .skill-card__actions { grid-column: 2; }
.skills-grid .skill-card__description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skills-menu { position: relative; }
.skills-menu summary { display: grid; place-items: center; cursor: pointer; list-style: none; font-size: 1.25rem; width: 2rem; min-height: 2rem; border-radius: var(--radius-sm); }
.skills-menu summary::-webkit-details-marker { display: none; }
.skills-menu summary:hover { background: var(--surface); }
.skills-menu__items { position: absolute; z-index: 4; right: 0; top: 100%; display: grid; gap: .25rem; min-width: 11rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-card); }
.skills-empty { display: grid; justify-items: center; gap: .75rem; padding: 2rem 1rem; color: var(--text-quiet); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.skills-empty h3 { margin: 0; font-size: .9rem; font-weight: 500; }
.skills-empty svg { width: 1.5rem; height: 1.5rem; }
.skills-dialog { box-sizing: border-box; color: var(--text); background: var(--surface-raised); width: min(52rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.skills-dialog::backdrop { background: #14213780; }
.skills-dialog__head, .skills-dialog__footer { display: flex; gap: .5rem; align-items: center; padding: 1rem 1.25rem; background: var(--surface-raised); }
.skills-dialog__head { justify-content: space-between; border-bottom: 1px solid var(--line); }
.skills-dialog__head h2 { margin: 0; font-size: 1.1rem; }
.skills-dialog__footer { justify-content: flex-end; border-top: 1px solid var(--line); position: sticky; bottom: 0; }
.skills-dialog__body { padding: 1.25rem; }
.skills-dialog__body > .skills-toolbar, .skills-drop { margin-bottom: 1rem; }
.skills-dialog__body > label:not(.skills-drop) { display: grid; gap: .3rem; }
.skills-form { display: grid; gap: 1rem; }
.skills-form label, .skills-resources label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }
.skills-dialog .field { box-sizing: border-box; }
.skills-dialog .skills-code { font-family: var(--font-code); font-size: .8125rem; line-height: 1.6; resize: vertical; }
.skills-resources { margin-top: 1.25rem; }
.skills-resources h3 { font-size: .95rem; }
.skills-resource { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.skills-resource span { font-size: .8125rem; }
.skills-file-button { margin-top: .75rem; width: fit-content; }
.skills-file-button input { max-width: 100%; font-size: .75rem; }
.skills-check { padding: 1rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.skills-check p { font-size: .8125rem; line-height: 1.5; }
.skills-drop { display: flex; flex-direction: column; align-items: center; gap: 1rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 2rem 1rem; text-align: center; cursor: pointer; }
.skills-drop input { max-width: 100%; }
.skills-drop svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 900px) { .skills-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .skills-filters .field { flex: 1 1 100%; max-width: none; }
  .skill-card { grid-template-columns: auto minmax(0, 1fr); }
  .skill-card__actions { grid-column: 2; flex-wrap: wrap; }
  .skills-dialog__body, .skills-dialog__head, .skills-dialog__footer { padding: 1rem; }
}