/* ==========================================================================
   Ansicht: Signale, Merkliste, Gespeicherte Suchen, Bestand (views/feed.js, watch.js, saved.js, stock.js) – Phase 2b
   Gehört der jeweiligen Ansicht. Baut auf tokens.css und app.css auf
   (Komponenten, Shell, Tabellen – siehe docs/FOUNDATION.md, dev/components.html).
   Regeln: nur Tokens (var(--…)), keine Farben aus der alten Oberfläche,
   Selektoren auf die eigene Ansicht beschränken (.fd-…, .wl-…, .sv-…, .st-…, .lst-…),
   keine Änderungen an gemeinsamen Klassen – Bedarf an app.css zurückmelden.
   ========================================================================== */

/* ==========================================================================
   Signale (feed.js) – Signal-Inbox
   ========================================================================== */
.fd { max-width: 1120px; }

/* Werkzeugleiste: Zeitraum, Bereich, Sortierung, Kategorien */
.fd-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.fd-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.fd-ctl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.fd-lbl { font: 11.5px/1.4 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-3); white-space: nowrap; }
.fd-scope { max-width: 260px; }
.fd-catwrap { display: flex; flex-direction: column; gap: 10px; }
.fd-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-catwrap .fchip-n:empty { display: none; }
/* Platzhalter für Zahlen (Zähler, Summe), inline in der Textzeile – so springt beim Laden nichts */
.fd .skel.fd-sk { display: inline-block; height: 8px; margin: 0; vertical-align: middle; }
.fd-dig { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; }
.fd-dig .fd-hidden { border-style: dashed; color: var(--text-3); }
.fd-dig .fd-hidden:hover { color: var(--text); }
.fd-hint { flex: 1 1 360px; max-width: 76ch; margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.fd-hint b { color: var(--text); font-weight: var(--w-medium); }
.fd-link {
  padding: 0; margin-left: 4px; border: 0; background: none;
  color: var(--text); font: inherit; font-weight: var(--w-medium);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
  white-space: nowrap;
}
.fd-link:hover { text-decoration-color: currentColor; }

/* Zusammenfassung + Legende der Marker */
.fd-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding: 18px 2px 10px; }
.fd-sum-t { font: 12px/1.5 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-2); }
.fd-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 11.5px/1.4 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-3); }
.fd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fd-legend .mark { --mark-size: 11px; border-width: 1.5px; }

/* Liste */
#feed.is-busy .fd-list { opacity: 0.55; transition: opacity var(--dur-2); }
/* Spalten wie die Lead-Zeile in Design v1: Marker · Inhalt · Signalstärke · Zeit (rechtsbündig, Mono) */
.fd-list {
  --fd-lead: 42px;             /* Auswahl 16 + 12 + Marker 14 */
  --fd-pad: 14px;
  --fd-gap: 16px;
  --fd-cols: var(--fd-lead) minmax(0, 1fr) 104px 208px;
  --fd-text-x: calc(var(--fd-pad) + var(--fd-lead) + var(--fd-gap));   /* Einzug des Texts (Gruppenköpfe) */
  container: fd / inline-size;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.fd-head {
  display: grid;
  grid-template-columns: var(--fd-cols);
  column-gap: var(--fd-gap);
  padding: 10px 24px 8px var(--fd-pad);
  border-bottom: 1px solid var(--line);
  font: 11.5px/1.4 var(--font-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
}
.fd-head span:last-child { text-align: right; }
.fd-group + .fd-group { border-top: 1px solid var(--line); }
.fd-gh {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 20px 9px var(--fd-text-x);
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
  font: 11.5px/1.4 var(--font-mono);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-mono);
  color: var(--text-2);
}
.fd-gh-n { color: var(--text-3); font-variant-numeric: tabular-nums; }

.fd-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--fd-cols);
  grid-template-areas: "lead main score when";
  column-gap: var(--fd-gap);
  align-items: start;
  padding: 14px 24px 14px var(--fd-pad);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  scroll-margin: 44px 0 64px;
  transition: background-color var(--dur-1) var(--ease-out);
}
.fd-group:last-child .fd-item:last-child { border-bottom: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.fd-item:hover { background: var(--surface-sunken); }
.fd-item.is-sel { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.fd-item.is-cursor, .fd-item.is-open { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--text); }
.fd-item:focus { outline: none; }
.fd-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.fd-lead { grid-area: lead; display: flex; align-items: center; gap: 12px; height: 21px; }
.fd-cb { opacity: 0; transition: opacity var(--dur-1); }
.fd-item:hover .fd-cb, .fd-item.is-cursor .fd-cb, .fd-item:focus-within .fd-cb,
.fd-list.has-sel .fd-cb, .fd-cb.is-on, .fd-cb:focus-visible { opacity: 1; }

.fd-main { grid-area: main; min-width: 0; }
.fd-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: var(--w-strong);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.fd-co { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 26px; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.fd-co-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-co-txt b { color: var(--text); font-weight: var(--w-medium); }
.fd-sep { margin: 0 6px; color: var(--text-3); }
.fd-ind { color: var(--text-3); }
.fd-co .badge-status { height: 18px; font-size: 11px; }
.fd-star { margin-left: -2px; opacity: 0; }
.fd-star svg { width: 14px; height: 14px; }
.fd-star.is-on { opacity: 1; color: var(--text); }
.fd-star.is-on svg { fill: currentColor; }
.fd-item:hover .fd-star, .fd-item.is-cursor .fd-star, .fd-star:focus-visible { opacity: 1; }
.fd-ev { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 8px; }
.fd-detail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}
.fd-kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  max-width: 100%;
  padding: 0 9px 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: var(--w-medium);
  white-space: nowrap;
}
.fd-kind svg { width: 13px; height: 13px; color: var(--text-3); }
.fd-kind.is-warn { color: var(--text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.fd-kind.is-warn svg { color: var(--danger); }
.fd-item.is-cursor .fd-kind, .fd-item:hover .fd-kind { background: var(--surface); }
/* Signalstärke der Firma (Zahl + Meter wie in der Lead-Zeile), auf Höhe der ersten Zeile */
.fd-score { grid-area: score; min-width: 0; }
.fd-score .score { min-height: 21px; }
/* Zeit und Quelle: Ereignis und Fund getrennt benannt, Mono, Werte rechtsbündig (Design v1 „Zuletzt“).
   Zuerst das Datum, nach dem sortiert ist (.is-key, in Text-Farbe); „neu“ steht am Fund-Datum. */
.fd-when {
  grid-area: when;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 4px 12px;
  margin: 2px 0 0;
  font: 12px/1.45 var(--font-mono);
  letter-spacing: var(--tr-mono);
  white-space: nowrap;
}
.fd-when > div { display: contents; }
.fd-when dt { color: var(--text-3); }
.fd-when dd { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fd-when .is-key dd { color: var(--text); }
.fd-when .is-none, .fd-when .is-key .is-none { color: var(--text-3); }
.fd-when .badge-new { margin-right: 6px; }
.fd-src {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.fd-src:hover { color: var(--text); text-decoration-color: currentColor; }
.fd-src > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.fd-src svg { width: 12px; height: 12px; }

/* Platzhalter */
.fd-skel .fd-item { cursor: default; }
.fd-skel .fd-item:hover { background: none; }
.fd-skel .mark { opacity: 0.35; }
.fd-skel .fd-score { padding-top: 5px; }
.fd-skel .fd-when { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; }
.fd-skel .fd-when .skel { margin: 0; }

/* Nachladen, Kürzel */
.fd-more { flex-wrap: wrap; align-items: center; gap: 12px; }
.fd-more .count { font-size: 12px; }
.fd-keys {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 20px -24px -64px;
  padding: 10px 24px;
  backdrop-filter: blur(6px);
}

/* Schmale Liste (Detail angedockt, Tablet, Mobil): Zeit unter den Text, eine Zeile */
@container fd (max-width: 720px) {
  .fd-head { display: none; }
  .fd-group:first-of-type .fd-gh { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .fd-item { --fd-gap: 12px; grid-template-columns: var(--fd-lead) minmax(0, 1fr) auto; grid-template-areas: "lead main score" ". when when"; row-gap: 8px; padding: 12px 16px 12px 12px; }
  .fd-gh { padding-left: calc(12px + var(--fd-lead) + 12px); padding-right: 16px; }
  .fd-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0; }
  .fd-when > div { display: inline-flex; gap: 6px; min-width: 0; max-width: 100%; }
  .fd-when dd { text-align: left; }
  .fd-ev { flex-wrap: wrap; align-items: flex-start; gap: 6px; }
  .fd-detail { flex-basis: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
  .fd-skel .fd-when { flex-direction: row; align-items: center; gap: 16px; }
}
/* Sehr schmal: nur die Zahl der Signalstärke (wie Design v1 mobil) */
@container fd (max-width: 480px) {
  .fd-score .meter { display: none; }
}
@media (hover: none) {
  .fd-list, .fd-list.fd-list { --fd-lead: 14px; }
  .fd-cb { display: none; }
  .fd-star { opacity: 1; }
}
@media (max-width: 760px) {
  .fd-list, .fd-list.fd-list { --fd-lead: 14px; }
  .fd-cb { display: none; }
  .fd-keys { display: none; }
  .fd-bar-row { gap: 12px; }
  .fd-bar-row > .grow { display: none; }
  .fd-ctl { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fd-hint { flex-basis: 100%; margin-top: 0; }
  .fd-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
  .fd-cats::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Merkliste (watch.js) – Lead-Tabelle mit Status-Reitern
   ========================================================================== */
.wl { height: 100%; }
.wl-head { gap: 12px; padding-bottom: 16px; }
.wl-head .rh-title { margin: 0; }
.wl-row { align-items: flex-start; }
.wl-title { min-width: min(100%, 280px); }
.wl-sub { max-width: 70ch; margin-top: 4px; color: var(--text-2); }
.wl-tools { flex-wrap: nowrap; }
.wl-sort-l { color: var(--text-3); font-weight: var(--w-regular); }
.wl-head .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.wl-head .btn[aria-disabled="true"]:hover { border-color: var(--line-strong); }
.wl-tabs { align-self: flex-start; }
#tbl.is-busy { opacity: 0.55; transition: opacity var(--dur-2); }
.wl .tbl { padding-bottom: 8px; }
.wl-keys { position: sticky; bottom: 0; z-index: 3; margin-top: auto; backdrop-filter: blur(6px); }
@media (max-width: 760px) {
  .wl-keys { display: none; }
  .wl-sort-l { display: none; }
  .wl-head .rh-row { row-gap: 12px; }
  .wl-head .rh-row > .grow { display: none; }
  .wl-tools { width: 100%; }
}

/* ==========================================================================
   Gespeicherte Suchen (saved.js)
   ========================================================================== */
.sv { max-width: 1040px; }
.sv .page-head h1 { display: flex; align-items: baseline; gap: 12px; }
.sv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 2px 12px; font: 12px/1.5 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-2); }
.sv-sum-new { display: inline-flex; align-items: center; gap: 6px; color: var(--signal-text); }
.sv-sum .mark { --mark-size: 11px; border-width: 1.5px; }
.sv-list {
  container: sv / inline-size;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.sv-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  grid-template-areas: "mark main act";
  column-gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.sv-item:last-child { border-bottom: 0; }
.sv-item:hover { background: var(--surface-sunken); }
.sv-item.is-skel { cursor: default; }
.sv-item.is-skel:hover { background: none; }
.sv-item.is-skel .mark { opacity: 0.35; }
.sv-mark { grid-area: mark; display: flex; padding-top: 4px; }
.sv-main { grid-area: main; min-width: 0; }
.sv-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: var(--w-strong); line-height: 1.4; }
.sv-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-name a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sv-q { margin-top: 2px; color: var(--text-2); font-size: 13.5px; }
.sv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sv-tag-k { color: var(--text-3); font-weight: var(--w-regular); }
.sv-meta { margin-top: 8px; font: 12px/1.5 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-3); }
.sv-act { grid-area: act; display: flex; align-items: center; gap: 6px; }
@container sv (max-width: 620px) {
  .sv-item { grid-template-columns: 14px minmax(0, 1fr); grid-template-areas: "mark main" ". act"; row-gap: 12px; padding: 16px; }
  .sv-act { margin-left: -8px; }
}

/* ==========================================================================
   Bestand (stock.js) – Systemseite
   ========================================================================== */
.st { container: st / inline-size; }
.st-eyebrow { margin-bottom: 4px; }

/* Status des Hintergrunddienstes */
.st-status { margin-bottom: 16px; }
.st-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 48px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.st-state.notice { padding: 10px 8px 10px 14px; align-items: center; }
.st-state.notice > div { flex: 1 1 320px; }
.st-state .status-dot { color: var(--text); font-weight: var(--w-medium); }
.st-beat { font: 12px/1.5 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-3); }
.notice .st-beat { display: block; margin-top: 2px; }
.st-fresh { margin-left: auto; font: 11.5px/1.4 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-3); white-space: nowrap; }

/* Kennzahlen mit Definition */
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.st-kpis .kpi { display: flex; flex-direction: column; }
.st-kpis .kpi .v { display: flex; align-items: baseline; gap: 8px; }
.st-kpis .kpi .l { display: flex; align-items: center; gap: 4px; }
.st-kpis .kpi .l svg { width: 13px; height: 13px; color: var(--text-3); }
.st-kpis .progress { margin-top: 10px; }
.st-pct { font: 12px/1 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-3); font-weight: var(--w-regular); }
.st-def { margin-top: auto; padding-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.st-def-top { margin: 0 0 14px; padding: 0; }
.st-def b { color: var(--text-2); font-weight: var(--w-medium); }
.st-kpi-link:hover .l { color: var(--text); }

/* Raster der Karten: zwei unabhängige Spalten (keine gekoppelten Zeilenhöhen); schmal eine Spalte, Formular früh */
.st-grid { display: flex; flex-direction: column; gap: 16px; }
.st-col { display: contents; }
.st-run { order: 1; }
.st-add { order: 2; }
.st-cost { order: 3; }
.st-hist { order: 4; }
.st-src { order: 5; }
.st-cty { order: 6; }
@container st (min-width: 860px) {
  .st-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); align-items: start; }
  .st-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}
/* Platzhalter (QA Q16): dieselbe Karte mit Titeln, Texten und Tabellenköpfen; nur Werte als Skelett – inline, damit jede Zeile
   so hoch ist wie ihre echte Textzeile und beim Füllen nichts springt */
.st .skel.st-sk { display: inline-block; max-width: 100%; height: 10px; margin: 0; vertical-align: middle; }
.st .kpi .v .st-sk { height: 0.7em; margin: 0.225em 0; }   /* .v ist Flex (keine Textzeile): 0,7 + 2 × 0,225 = 1,15em = Zeilenhöhe der Zahl */
.st .st-sk-lg { height: 26px; }
.st .st-state[aria-busy] .st-sk { margin-left: 4px; }
.st .card-head .count { font-size: 12px; }
.st-headlink { font-size: 13px; }
.st-sub { margin: 24px 0 8px; }
.st-note { margin-top: 14px; font: 12px/1.6 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-3); }
.st-foot { margin-top: 20px; font-size: 12.5px; color: var(--text-3); }
.st-scroll { overflow-x: auto; }
.st-zero { color: var(--text-3); }
.st-share { color: var(--text-3); }
.st-code { margin-left: 4px; font: 11px/1 var(--font-mono); color: var(--text-3); }
.st .mini-table tfoot td { border-top: 1px solid var(--line-strong); font-weight: var(--w-medium); }
.st .mini-table td small { display: block; margin-top: 1px; font-size: 12px; color: var(--text-3); }

/* Fortschritt mit Beschriftung */
.st-prog-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.st-prog-l b { color: var(--text); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.st-prog { margin: 10px 0 16px; }
.st-lbl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.st-lbl b { font-weight: var(--w-regular); }
.st .st-lbl small { display: inline; margin: 0; }
.st-lbl svg { align-self: center; width: 13px; height: 13px; margin-right: -2px; color: var(--danger); }
.st-tasks { min-width: 520px; }
.st-tasks th:first-child, .st-tasks td:first-child { white-space: nowrap; }
.st-errn { display: inline-flex; align-items: center; gap: 4px; }
.st-errn svg { width: 12px; height: 12px; color: var(--danger); }

/* Kosten */
.st-money { display: flex; align-items: baseline; gap: 8px; }
.st-money .v { font-size: 32px; font-weight: var(--w-medium); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-money .cur { font: 13px/1 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-2); }
.st-budget { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.st-budget-warn { margin-top: 12px; }
.st-cost-t { margin-top: 18px; }

/* Herkunft */
.st-src-t tbody + tbody .st-grp th { padding-top: 18px; }
.st-grp th { padding: 4px 0 6px; border-top: 0; font: 11.5px/1.4 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--text-2); text-align: left; }
.st-grp th span { color: var(--text-3); }
.st-srcname { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.st-srcname:hover span { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.st-srcname .logo img { filter: grayscale(1); opacity: 0.85; }

/* Firma hinzufügen */
.st-form { display: flex; flex-direction: column; gap: 14px; }
.st-form .input { width: 100%; }
.st-form-foot { display: flex; }
.st-form-msg:empty { display: none; }
.st-form-msg .notice { font-size: 13px; }

@media (max-width: 760px) {
  .st .page-head .btn-group { width: 100%; }
  .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-kpis .kpi { padding: 14px 16px; }
  .st-kpis .kpi .v { font-size: 22px; }
  .st-kpis .kpi:first-child { grid-column: 1 / -1; }
  .st-fresh { margin-left: 0; }
  .st-money .v { font-size: 28px; }
}