/* Live IIM feed blocks: the status strip, the chain lists on the research and
   actor pages, and the chain detail that unfolds inside a dossier panel.
   These render server-side from the cache and are re-rendered in place by
   site.js, so everything here is class-driven rather than inline. */

:root{
  --iim-line:rgba(109,227,255,.14);
  --iim-line-soft:rgba(109,227,255,.08);
  --iim-panel:rgba(8,17,31,.5);

  /* Rollen sind Stufen einer Kette (entry > staging > redirector > payload >
     c2), keine unabhaengigen Kategorien. Deshalb eine Ordinalrampe in einem
     Ton statt fuenf bunter Farben: die Reihenfolge steckt dann in der Farbe.
     Die fruehere Palette fiel ausserdem durch die Pruefung -- staging und
     redirector lagen bei DeltaE 10.2 (normal) / 4.9 (Deuteranopie) und waren
     nicht auseinanderzuhalten. Diese Rampe besteht alle Ordinal-Checks gegen
     die Flaeche #060d18. Nicht einzeln nachjustieren, sonst kippt das. */
  --iim-role-entry:#2A6C8C;
  --iim-role-staging:#3C93B8;
  --iim-role-redirector:#55B8DC;
  --iim-role-payload:#8AD6F0;
  --iim-role-c2:#C4EDFF;

  /* Confidence ist ebenfalls ordinal. Gleiche Rampe, drei Stufen. */
  --iim-conf-confirmed:#C4EDFF;
  --iim-conf-likely:#55B8DC;
  --iim-conf-tentative:#2A6C8C;
  --iim-conf-track:rgba(42,108,140,.28);

  /* Status, nicht Kategorie -- reserviert und immer mit Beschriftung. */
  --iim-status-review:#fab219;

  --iim-ink:#F2F6FA;
  --iim-ink-soft:#B6C2CF;
  --iim-ink-muted:#9aa8b8;
}

/* ------------------------------------------------------- feed-beschriftung */
.mb-iim-label{display:inline-flex;align-items:center;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.18em;color:#6DE3FF}

/* Set by site.js for one beat whenever a poll brought a new number. */
.mb-iim-flash{animation:mb-iim-flash 1.1s ease-out}
@keyframes mb-iim-flash{0%{color:#6DE3FF;text-shadow:0 0 14px rgba(109,227,255,.6)}100%{}}

/* --------------------------------------------------------------- stat row */
.mb-iim-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--iim-line-soft);border:1px solid var(--iim-line-soft);border-radius:8px;
  overflow:hidden}
.mb-iim-stat{padding:16px 18px;background:var(--iim-panel)}
/* Kennzahl in der Textschrift, nicht Mono: Ziffern mit Normalbreite, sonst
   sieht eine Zahl wie 121 auf Anzeigegroesse auseinandergezogen aus. */
.mb-iim-stat .n{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--iim-ink);
  line-height:1.1;transition:color .3s ease}
.mb-iim-stat .l{font-size:12.5px;color:var(--iim-ink-soft);margin-top:4px}

/* --------------------------------------------------------- confidence bar */
/* Gestapelter Balken, 2px Luft zwischen den Segmenten statt Rahmen. Die
   unbelegte Spur ist eine hellere Stufe derselben Rampe. */
.mb-iim-conf{display:flex;gap:2px;height:8px;background:var(--iim-conf-track);border-radius:4px;
  overflow:hidden}
.mb-iim-conf span{display:block;height:100%;transition:width .5s ease}
.mb-iim-conf span:first-child{border-radius:4px 0 0 4px}
.mb-iim-conf span:last-child{border-radius:0 4px 4px 0}
.mb-iim-conf .c-confirmed{background:var(--iim-conf-confirmed)}
.mb-iim-conf .c-likely{background:var(--iim-conf-likely)}
.mb-iim-conf .c-tentative{background:var(--iim-conf-tentative)}

/* Legende zum Balken. Pflicht, sobald mehr als eine Klasse im Spiel ist --
   und die Beschriftung traegt Textfarbe, die Identitaet steckt im Punkt. */
.mb-iim-conf-key{display:flex;flex-wrap:wrap;gap:20px;margin-top:10px;
  font-size:12.5px;color:var(--iim-ink-soft)}
.mb-iim-conf-key span{display:inline-flex;align-items:center;gap:7px}
.mb-iim-conf-key i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.mb-iim-conf-key .k-confirmed i{color:var(--iim-conf-confirmed)}
.mb-iim-conf-key .k-likely i{color:var(--iim-conf-likely)}
.mb-iim-conf-key .k-tentative i{color:var(--iim-conf-tentative)}
.mb-iim-conf-key b{font-weight:600;color:var(--iim-ink);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- chain list */
.mb-iim-list{display:flex;flex-direction:column}
.mb-iim-empty{padding:16px 0;font-size:14px;color:#A2AFBE;border-top:1px solid var(--iim-line-soft)}

/* Eine Kette ist eine Zeile aus zwei Spalten: links eine Schiene mit Kennung
   und Bewertung, rechts der Inhalt. Die feste Spaltenbreite ist der Grund,
   warum die Liste ueberhaupt fluchtet -- ohne sie beginnt jede Zeile woanders. */
.mb-iim-chain{display:grid;grid-template-columns:152px minmax(0,1fr);gap:26px;
  padding:20px 16px;margin:0 -16px;border-top:1px solid var(--iim-line-soft);
  border-radius:6px;transition:background .18s ease}
.mb-iim-chain:first-child{border-top:none}
.mb-iim-chain:hover{background:rgba(109,227,255,.03)}

.mb-iim-rail{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:1px}
.mb-iim-actor{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  color:#6DE3FF;white-space:nowrap}
.mb-iim-actor-name{max-width:100%;font-size:12.5px;color:var(--iim-ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-iim-body{min-width:0}

.mb-iim-head{display:flex;align-items:baseline;gap:18px}
.mb-iim-date{flex:none;margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--iim-ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.mb-iim-title{font-size:15px;font-weight:600;color:var(--iim-ink);
  line-height:1.4;letter-spacing:-.005em;text-wrap:pretty}
a.mb-iim-title{transition:color .2s ease}
a.mb-iim-title:hover{color:#6DE3FF}
.mb-iim-desc{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--iim-ink-soft);
  text-wrap:pretty;max-width:78ch}

/* Verlauf der Kette: ein Segment je Schritt, in Reihenfolge. Getrennt wird
   durch 2px Luft in der Flaechenfarbe, nicht durch Rahmen -- ein Rahmen waere
   Tinte, die keine Daten traegt. Die 9 bis 16 Segmente zeigen nebenbei, wie
   lang die Kette ist. */
.mb-iim-track{display:flex;gap:2px;height:9px;margin-top:12px;max-width:520px}
.mb-iim-seg{flex:1 1 0;min-width:3px;border-radius:1px}
.mb-iim-seg:first-child{border-radius:4px 1px 1px 4px}
.mb-iim-seg:last-child{border-radius:1px 4px 4px 1px}
.s-entry{background:var(--iim-role-entry)}
.s-staging{background:var(--iim-role-staging)}
.s-redirector{background:var(--iim-role-redirector)}
.s-payload{background:var(--iim-role-payload)}
.s-c2{background:var(--iim-role-c2)}

/* Zugleich Legende und Klartext: aufeinanderfolgende gleiche Rollen als ein
   Lauf mit Anzahl. Die Beschriftung traegt Textfarbe, die Zuordnung macht das
   Kaestchen davor -- Farbe allein soll nie die einzige Kennzeichnung sein. */
.mb-iim-runs{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--iim-ink-soft)}
.mb-iim-runs span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mb-iim-runs i{flex:none;width:7px;height:7px;border-radius:2px}
.mb-iim-runs em{font-style:normal;color:var(--iim-ink-muted)}
.mb-iim-more{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--iim-ink-muted)}

.mb-iim-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--iim-ink-muted)}
.mb-iim-meta b{font-weight:500;color:var(--iim-ink-soft);font-variant-numeric:tabular-nums}
.mb-iim-flag{display:inline-flex;align-items:center;gap:7px;margin-top:2px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--iim-ink-soft)}
.mb-iim-flag::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;
  background:currentColor}
.f-confirmed::before{color:var(--iim-conf-confirmed)}
.f-likely::before{color:var(--iim-conf-likely)}
.f-tentative::before{color:var(--iim-conf-tentative)}
.f-review{color:var(--iim-status-review)}
.f-review::before{color:var(--iim-status-review)}

/* ------------------------------------------------------------ chain detail */
.mb-iim-toggle{margin-top:10px;background:none;border:1px solid rgba(109,227,255,.2);color:#B6C2CF;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;padding:5px 11px;
  border-radius:5px;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.mb-iim-toggle:hover{color:#6DE3FF;border-color:rgba(109,227,255,.5)}

.mb-iim-detail{margin-top:12px;padding:14px 16px;border-radius:10px;background:rgba(4,10,20,.6);
  border:1px solid var(--iim-line-soft)}
.mb-iim-loading{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9aa8b8}
.mb-iim-walk{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.mb-iim-step{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start}
/* Wie in der Laufzeile: Kaestchen traegt die Rolle, die Schrift bleibt Text. */
.mb-iim-step .step-role{display:inline-flex;align-items:center;gap:7px;padding-top:3px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  color:var(--iim-ink-muted)}
.mb-iim-step .step-role::before{content:'';flex:none;width:7px;height:7px;border-radius:2px;
  background:currentColor}
.step-role.r-entry::before{color:var(--iim-role-entry)}
.step-role.r-staging::before{color:var(--iim-role-staging)}
.step-role.r-redirector::before{color:var(--iim-role-redirector)}
.step-role.r-payload::before{color:var(--iim-role-payload)}
.step-role.r-c2::before{color:var(--iim-role-c2)}
.mb-iim-step .step-body{min-width:0}
.mb-iim-step .step-value{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#E0E7EF;
  line-height:1.5;word-break:break-word}
.mb-iim-step .step-meta{margin-top:4px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#9aa8b8}
.mb-iim-step .step-evidence{margin-top:4px;font-size:12.5px;line-height:1.55;color:#A2AFBE}
.mb-iim-sources{margin-top:14px;padding-top:12px;border-top:1px solid var(--iim-line-soft);
  font-size:12.5px;line-height:1.6;color:#A2AFBE}
.mb-iim-sources .lbl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  color:#9aa8b8;display:block;margin-bottom:5px}
.mb-iim-note{margin-top:10px;font-size:12.5px;line-height:1.6;color:#9aa8b8}

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .mb-iim-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .mb-iim-chain{grid-template-columns:1fr;gap:10px}
  .mb-iim-rail{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
  .mb-iim-rail .mb-iim-flag{margin-top:0}
  .mb-iim-head{flex-wrap:wrap}
  .mb-iim-track{max-width:none}
  .mb-iim-step{grid-template-columns:1fr;gap:4px}
}