/* Was Jarvis über das Design-Kit hinaus braucht.
 *
 * Regel des Kits: nie Rohwerte, immer var(--…). Fehlt ein Wert, gehört er
 * nach tokens.css - nicht hierher. Diese Datei enthält deshalb nur
 * Zusammenstellungen vorhandener Merkmale, keine neuen Farben und keine
 * neuen Maße.
 *
 * Vier Dinge deckt das Kit nicht ab, weil sie anwendungsspezifisch sind:
 *
 * 1. Links, die wie Kit-Bausteine aussehen sollen. Das Kit setzt Chips und
 *    Leistenknöpfe als <button> voraus; hier sind es <a>, weil sie
 *    navigieren. Ohne Unterstreichung und mit Zeigefinger.
 * 2. Fließtext aus Markdown - der Morgen-Brief. Das Kit hat keine Prosa,
 *    weil ein Cockpit keine hat.
 * 3. Tabellen. Gleiche Begründung.
 * 4. Die schmale Spalte für Anmeldung und Rechtstexte.
 */

/* --- 1. Kit-Bausteine als Links ----------------------------------- */

a.hud-chip,
a.hud-rail__btn,
a.hud-btn,
a.hud-brand {
  text-decoration: none;
}

a.hud-chip {
  display: inline-block;
  line-height: 1.6;
}

/* --- 2. Fließtext aus Markdown ------------------------------------ */

.jarvis-prosa {
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
.jarvis-prosa > :first-child { margin-top: 0; }
.jarvis-prosa > :last-child { margin-bottom: 0; }
.jarvis-prosa h1,
.jarvis-prosa h2,
.jarvis-prosa h3 {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  color: var(--text);
  margin: var(--sp-5) 0 var(--sp-2);
  line-height: var(--lh-tight);
}
.jarvis-prosa h1 { font-size: var(--fs-lg); }
.jarvis-prosa h2 { font-size: var(--fs-md); }
.jarvis-prosa h3 { font-size: var(--fs-sm); color: var(--text-2); }
.jarvis-prosa p,
.jarvis-prosa ul,
.jarvis-prosa ol { margin: 0 0 var(--sp-3); }
.jarvis-prosa ul,
.jarvis-prosa ol { padding-left: var(--sp-5); }
.jarvis-prosa li { margin-bottom: var(--sp-1); }
.jarvis-prosa a { color: var(--cyan); }
.jarvis-prosa strong { color: var(--text); }
.jarvis-prosa code {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--cyan-dim);
}
.jarvis-prosa blockquote {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line-strong);
  color: var(--text-3);
}

/* --- 3. Tabellen -------------------------------------------------- */

.jarvis-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.jarvis-tabelle th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--cyan-dim);
  text-align: left;
  font-weight: 400;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.jarvis-tabelle td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-faint);
  color: var(--text-2);
  vertical-align: top;
}
.jarvis-tabelle tr:last-child td { border-bottom: 0; }
.jarvis-tabelle .rechts { text-align: right; }

/* --- 4. Schmale Spalte für Anmeldung und Rechtstexte -------------- */

.jarvis-schmal {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-9);
}
.jarvis-marke {
  display: inline-flex;
  margin-bottom: var(--sp-5);
}

/* --- Kleinigkeiten ------------------------------------------------ */

/* Die Bühne braucht Luft; das Kit lässt das der Anwendung. */
.hud-stage { padding: var(--sp-5); overflow-y: auto; }
.hud-aside { padding: var(--sp-4); overflow-y: auto; }

/* Bei schmalem Fenster übernimmt die Leiste, die Reiter gehen. */
@media (max-width: 960px) {
  .jarvis-reiter { display: none; }
  .hud-stage { padding: var(--sp-4); }
}

/* Überschriften der Seiten. */
.jarvis-titel {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--track-display);
  color: var(--text);
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-tight);
}
.jarvis-unterzeile {
  color: var(--text-3);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-5);
}

/* Beschriftungen über Eingabefeldern. */
.jarvis-feldname {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--cyan-dim);
  margin: var(--sp-3) 0 var(--sp-1);
}

/* Leerzustand - im Kit gibt es dafür keinen eigenen Baustein. */
.jarvis-leer {
  color: var(--text-3);
  font-size: var(--fs-sm);
  padding: var(--sp-4) 0;
  margin: 0;
}

/* Suchzeile: Feld plus Knopf. */
.jarvis-suche {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.jarvis-suche .hud-field { flex: 1; }

/* --- Cockpit-Raster der Assistenten-Ansicht ----------------------- */

.jarvis-cockpit {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-4);
  height: 100%;
  min-height: 0;
}
.jarvis-cockpit__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  overflow-y: auto;
  min-height: 0;
}
.jarvis-cockpit__mitte {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.jarvis-cockpit__mitte .hud-thread {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Die Begrüßung unter dem Orb. Groß, aber nur einmal - laut DESIGN.md
   stehen nie zwei leuchtende Elemente nebeneinander. */
.jarvis-gruss {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-align: center;
  line-height: var(--lh-tight);
}

@media (max-width: 1200px) {
  /* minmax(0, 1fr), nicht 1fr: ein Rasterkind darf nie breiter werden
     als seine Spalte. Bei 375 px zwang der Inhalt die Spalte auf 338 px,
     und .hud-app schnitt den Rest ab (gesehen am 08.09. in der Demo). */
  .jarvis-cockpit { grid-template-columns: minmax(0, 1fr); }
  .jarvis-cockpit > * { min-width: 0; }
  .jarvis-cockpit__links { overflow: visible; }
}

/* --- Handy-Breite --------------------------------------------------
   Filterzeilen brechen um, Auswahlfelder duerfen die volle Breite,
   Kacheln stapeln sich (flex-wrap steht an den Zeilen), Zahlen werden
   etwas kleiner. Tabellen liegen ohnehin in .hud-scroll-x.
   Florian (08.09.): "Handy-Breite auch noch machen." */
/* Kurze Auswahlfelder - in der Filterzeile und am Umschalter des
   Depot-Diagramms; auf dem Handy heben die Regeln unten das auf. */
.hud-field--kurz { max-width: 260px; }
.hud-field--schmal { max-width: 170px; }

@media (max-width: 720px) {
  .jarvis-suche { flex-wrap: wrap; }
  .jarvis-suche .hud-field,
  .hud-field--kurz,
  .hud-field--schmal { flex: 1 1 100%; max-width: none; }
  .jarvis-suche .hud-btn { flex: 1 1 auto; }
  .hud-stage { padding: var(--sp-3); }
  .hud-topbar { gap: var(--sp-3); padding: 0 var(--sp-3); }
  .hud-widget__value { font-size: 22px; }
  .jarvis-cockpit__mitte .hud-orb { width: 150px; height: 150px; }
  .jarvis-gruss { font-size: var(--fs-xl); }
  /* Eingabezeile im Chat: das Feld gibt nach, der Knopf bleibt ganz. */
  .hud-composer { flex-wrap: wrap; }
  .hud-composer .hud-field,
  .hud-composer input,
  .hud-composer textarea { min-width: 0; flex: 1 1 160px; }
  .hud-composer .hud-btn { flex: 0 0 auto; }
}

/* --- Ueberblick auf der Finanzseite --------------------------------
   Florian (09.09.): "auf der Finanzseite waere ganz oben ein
   interaktives Dashboard geil". Vier Zahlen, ein Umschalter, Balken.
   Alles ohne Skript - der Zustand steht in der Adresse. */

.hud-kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.hud-kennzahl {
  padding: var(--sp-3) var(--sp-4);
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.hud-kennzahl__titel {
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cyan-dim);
}
.hud-kennzahl__wert {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.hud-kennzahl__wert--gold { color: var(--gold); }
.hud-kennzahl__wert--cyan { color: var(--cyan); }
.hud-kennzahl__meta {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--text-3);
  line-height: var(--lh-tight);
}
/* Richtung UND Vorzeichen: Farbe allein waere bei Rot-Gruen-Schwaeche
   keine Aussage. */
.hud-trend--gut  { color: var(--green); }
.hud-trend--acht { color: var(--gold); }

/* Umschalter: eine Leiste aus Verweisen, das aktive Feld ausgefuellt. */
.hud-schalter {
  display: inline-flex;
  border: var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hud-schalter__knopf {
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.hud-schalter__knopf + .hud-schalter__knopf { border-left: 1px solid var(--line); }
.hud-schalter__knopf:hover { background: var(--surface-2); color: var(--text); }
.hud-schalter__knopf.ist-aktiv {
  background: var(--cyan-deep);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

/* Balken in der Aufteilungsliste. Kein SVG: eine Breite in Prozent
   haelt jede Fensterbreite aus. */
.hud-balken {
  height: 8px;
  border-radius: 4px;
  background: var(--line-faint);
  overflow: hidden;
}
.hud-balken > i { display: block; height: 100%; background: var(--gold); }
.hud-balken--ein > i { background: var(--cyan); }

@media (max-width: 720px) {
  /* Vier Zahlen nebeneinander sind auf dem Handy vier Spalten Brei. */
  .hud-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud-kennzahl__wert { font-size: var(--fs-xl); }
  .hud-schalter { width: 100%; }
  .hud-schalter__knopf { flex: 1 1 auto; text-align: center; padding: 6px 8px; }
}

/* Ring und Liste nebeneinander - beide zeigen dieselben Farben, damit
   der Blick zwischen ihnen wandern kann. */
.jarvis-aufteilung {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-4);
  /* Oben ausrichten: bei vierzehn Zeilen rutschte der Ring sonst auf
     Hoehe der achten und stand neben nichts. */
  align-items: start;
}
.jarvis-punkt {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  vertical-align: middle;
}
/* Die Zeitachse unter der Vermoegenskurve. Auf dem Handy waere jede
   Beschriftung zu eng - dort bleibt jede zweite. */
.jarvis-achse {
  display: grid;
  margin-top: 2px;
  padding: 0 1%;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--text-3);
}
.jarvis-achse span { text-align: center; white-space: nowrap; }
.jarvis-achse .ist-jetzt { color: var(--cyan-dim); }

/* Zahlen untereinander muessen untereinander stehen. */
.jarvis-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Das aktive Feld im Umschalter traegt aria-current - ein Attribut mit
   Bedeutung statt einer erfundenen Klasse. */
.hud-schalter__knopf[aria-current] {
  background: var(--cyan-deep);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

/* Die Vermoegenskurve laeuft einmal ein. Kein Dauerpulsieren - was
   nicht endet, wird zum Flimmern. */
@media (prefers-reduced-motion: no-preference) {
  .kv-linie {
    stroke-dasharray: 2000;
    animation: kv-zeichnen 700ms ease-out 1;
  }
  @keyframes kv-zeichnen {
    from { stroke-dashoffset: 2000; }
    to   { stroke-dashoffset: 0; }
  }
}

@media (max-width: 720px) {
  .jarvis-achse span:nth-child(even) { visibility: hidden; }
  /* Dreizehn Monatsnamen auf 343 Pixel standen uebereinander. */
  .jarvis-kurve__monate span:nth-child(even) { display: none; }
  /* Drei Knoepfe brauchen rund 370 Pixel - im Panel sind 343 da. */
  .hud-schalter { flex-wrap: wrap; }
  .jarvis-aufteilung { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .jarvis-aufteilung > *:last-child { width: 100%; }
}

/* --- Die Vermoegenskurve: Achse und Hover --------------------------
   Florian (09.09.): "eine Y-Achsbeschriftung und Werte, und ausserdem
   soll man so wie in Trade Republic darueber hovern koennen".
   Beides ohne Skript: die Achse ist HTML neben dem Bild, der Hover ein
   Raster unsichtbarer Spalten darueber. */

.jarvis-kurve { position: relative; padding-left: 62px; }
.jarvis-kurve__achse {
  position: absolute;
  left: 0; top: 0;
  width: 58px; height: 190px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--text-3);
}
/* Die Marke sitzt auf ihrer Linie, nicht darunter. */
.jarvis-kurve__achse span {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  white-space: nowrap;
}
.jarvis-kurve__achse span:last-child { transform: translateY(-100%); }

.jarvis-kurve__bild { position: relative; }
.jarvis-kurve__zonen {
  position: absolute;
  inset: 0;
  display: grid;
}
.jarvis-kurve__zone { position: relative; }
/* Beim Kursverlauf liegen die Punkte dichter als die Zonen breit sind -
   dort sitzt jede Zone zentriert auf ihrem Punkt statt in einem
   gleichmaessigen Raster. */
.jarvis-kurve__zonen--frei { display: block; }
.jarvis-kurve__zonen--frei .jarvis-kurve__zone {
  position: absolute;
  top: 0; bottom: 0;
  transform: translateX(-50%);
}
.jarvis-kurve__achse--kurs { height: 160px; }
.jarvis-kurve__strich,
.jarvis-kurve__punkt,
.jarvis-kurve__karte {
  opacity: 0;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}
.jarvis-kurve__zone:hover .jarvis-kurve__strich,
.jarvis-kurve__zone:hover .jarvis-kurve__punkt,
.jarvis-kurve__zone:hover .jarvis-kurve__karte { opacity: 1; }

/* Das Fadenkreuz - eine Linie durch die ganze Hoehe. */
.jarvis-kurve__strich {
  position: absolute;
  top: 0; bottom: 6px; left: 50%;
  width: 1px;
  background: var(--cyan);
  opacity: 0;
}
.jarvis-kurve__zone:hover .jarvis-kurve__strich { opacity: .45; }
.jarvis-kurve__punkt {
  position: absolute;
  left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px; margin-top: -4.5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(95, 217, 255, .22);
}

/* Das Kaertchen mit den Zahlen. HTML, damit die Schrift nicht mit dem
   gestreckten SVG mitwaechst. */
.jarvis-kurve__karte {
  position: absolute;
  left: 50%; top: 4px;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 140px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #0b1219;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--text-2);
  line-height: 1.6;
}
/* Am Rand klappt das Kaertchen nach innen, sonst waere es abgeschnitten. */
.jarvis-kurve__karte.ist-links { left: 0; transform: none; }
.jarvis-kurve__karte.ist-rechts { left: auto; right: 0; transform: none; }
.jarvis-kurve__karte-kopf {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--cyan-dim);
}
.jarvis-kurve__karte-wert {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.jarvis-kurve__karte-zeile { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* Kein Hover auf dem Handy - dort bleiben die Zahlen in den Kacheln
     und im Tooltip am Punkt. Die Achse wird schmaler. */
  .jarvis-kurve { padding-left: 46px; }
  .jarvis-kurve__achse { width: 42px; }
  .jarvis-kurve__zonen { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jarvis-kurve__strich,
  .jarvis-kurve__punkt,
  .jarvis-kurve__karte { transition: none; }
}

/* --- Das Fenster ueber der Seite ------------------------------------
   Florian (09.09.): "ein universelles Pop-Up". Es ist dieselbe Seite
   mit einem Parameter mehr - deshalb schliesst die Zurueck-Taste, und
   ein Link darauf zeigt dasselbe. */

.jarvis-fenster {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
/* Der Hintergrund ist ein Verweis zurueck - anklicken schliesst. */
.jarvis-fenster__grund {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 9, .78);
}
.jarvis-fenster__kasten {
  position: relative;
  width: min(920px, 100%);
  max-height: min(80vh, 760px);
  overflow: auto;
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #070d14;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.jarvis-fenster__liste { max-height: 46vh; overflow: auto; }

@media (max-width: 720px) {
  .jarvis-fenster { padding: var(--sp-2); align-items: flex-end; }
  .jarvis-fenster__kasten { max-height: 88vh; padding: var(--sp-3); }
}

/* --- Der Ausgaben-Kalender -----------------------------------------
   Ein Feld je Tag: Spalte = Woche, Zeile = Wochentag. So stehen alle
   Montage untereinander und der Wall am Monatsersten faellt auf.
   Auf dunklem Grund gilt: dunkel ist wenig, hell ist viel. */

/* Feste Zellen: mit "1fr" wurden die Felder 120 px gross und das
   Raster 840 px hoch - ein Kalender, der den halben Bildschirm fuellt,
   zeigt keinen Rhythmus mehr, sondern nur noch sich selbst. */
.jarvis-kalenderzeile {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  overflow-x: auto;
}
.jarvis-kalender__tage {
  display: grid;
  grid-template-rows: repeat(7, 18px);
  grid-auto-flow: column;
  grid-auto-columns: 18px;
  gap: 3px;
}
.jarvis-kalender__wochentage {
  display: grid;
  grid-template-rows: repeat(7, 18px);
  gap: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}
.jarvis-kalender__wochentage span { line-height: 18px; }
.jarvis-kalender__tag {
  width: 18px; height: 18px;
  border-radius: 3px;
  background: rgba(95, 217, 255, .05);
  display: block;
}
.jarvis-kalender__tag:hover { outline: 1px solid var(--cyan); }
.jarvis-kalender__tag.stufe-1 { background: rgba(255, 184, 77, .22); }
.jarvis-kalender__tag.stufe-2 { background: rgba(255, 184, 77, .42); }
.jarvis-kalender__tag.stufe-3 { background: rgba(255, 184, 77, .66); }
.jarvis-kalender__tag.stufe-4 { background: rgba(255, 184, 77, .95); }
/* Die angebrochene erste Woche: da war der Zeitraum noch nicht. */
.jarvis-kalender__tag.ist-ausserhalb { opacity: .25; pointer-events: none; }

/* Die Zahlen an den Monatsgrenzen liegen ueber der Kurve - HTML, damit
   sie im gestreckten SVG nicht verzerren. */
.jarvis-kurve__werte {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.jarvis-kurve__werte span {
  position: absolute;
  transform: translate(-50%, -155%);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--text-2);
  white-space: nowrap;
  text-shadow: 0 0 6px #04070b, 0 0 3px #04070b;
}
/* Die Monatsnamen sitzen an ihrer Grenze, nicht in gleichen Abstaenden -
   Monate sind verschieden lang. */
.jarvis-kurve__monate {
  position: relative;
  height: 14px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--text-3);
}
.jarvis-kurve__monate span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.jarvis-kurve__monate .ist-jetzt { color: var(--cyan-dim); }

@media (max-width: 720px) {
  /* Auf dem Handy ueberlappen die Zahlen - dort bleibt die Achse. */
  .jarvis-kurve__werte { display: none; }
}