/* ============================================================================
   Kanal „Trading-Stats" — Auswertung der eigenen Trades
   ============================================================================
   Der Kanal war bis hierher als Inline-Stil im Template gebaut: Farben,
   Abstaende und Schriftgroessen standen als `style="..."` an jedem Kasten
   und liefen an den Tokens vorbei. Deshalb war er der einzige Kanal, in
   dem Zahlen 32 px fett und Karten 16 px Radius hatten.

   Hier gilt STIL.md wie ueberall — mit einer Betonung: das ist die eine
   Seite, auf der fast alles Geld ist. R2 („Farbe nur, wo Geld ist") ist
   also keine Einschraenkung, sondern die Ordnung der Seite: gruen fuer
   Gewinn, rot fuer Verlust, neutral fuer alles, was nur zaehlt.
   ========================================================================= */
@layer channels {

    .stats-view {
        block-size: 100%;
        overflow-y: auto;
        padding: var(--space-5) var(--space-6) var(--space-7);
    }

    .stats-section {
        margin-bottom: var(--space-6);
    }

    .stats-section:last-child {
        margin-bottom: 0;
    }

    .stats-section-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0 0 var(--space-3);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-primary);
    }

    .stats-section-title .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
        color: var(--ink-muted);
    }

    /* ── Kennzahlen ──────────────────────────────────────────────────
       Vier Kacheln, keine Rahmen (R3). Die Kachel ist die naechste
       Flaeche, mehr braucht sie nicht. */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: var(--space-3);
    }

    .stat-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        border: none;
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
    }

    /* Die Kachel trug zwei Eck-Winkel aus `--accent` (theme.css) — eine
       Dekoration ohne Aussage, und der Akzent ist der Primaerknopf, nicht
       ein Zierrat (R2/R4). */
    .stat-card::before,
    .stat-card::after {
        content: none;
    }

    .stat-card .label {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-muted);
    }

    /* Eine Zahl steht in Mono und mit gleich breiten Ziffern — sonst
       tanzen die Werte, sobald sich einer aendert (§4). */
    .stat-card .value {
        font-family: var(--font-data);
        font-size: var(--text-xl);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        color: var(--ink-primary);
    }

    .stat-card .value.green { color: var(--signal-up); }
    .stat-card .value.red   { color: var(--signal-down); }

    /* Ein Wert ohne Datengrundlage wird nicht eingefaerbt: „+0 %" aus
       null Trades ist kein Gewinn, und Gruen wuerde genau das behaupten. */
    .stat-card .value[data-empty="1"] {
        color: var(--ink-muted);
    }

    /* ── Gewinne und Verluste ────────────────────────────────────────
       Die beiden einzigen Flaechen der Seite, die Farbe tragen duerfen —
       sie sind die Bilanz. Alpha 0,12 auf der Flaeche, 0,30 am Rand
       (STIL §2), damit der Grund neutral bleibt. */
    .stats-tally {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: var(--space-3);
    }

    .tally-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-4);
        border: 1px solid transparent;
        border-radius: var(--radius-panel);
    }

    .tally-card .label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-medium);
    }

    .tally-card .label .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
    }

    .tally-card .value {
        font-family: var(--font-data);
        font-size: var(--text-xl);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        color: var(--ink-primary);
    }

    .tally-card[data-kind="win"] {
        border-color: var(--signal-up-line);
        background: var(--signal-up-surface);
    }

    .tally-card[data-kind="win"] .label { color: var(--signal-up); }

    .tally-card[data-kind="loss"] {
        border-color: var(--signal-down-line);
        background: var(--signal-down-surface);
    }

    .tally-card[data-kind="loss"] .label { color: var(--signal-down); }

    /* Null gegen null ist keine Bilanz. Ohne Trades tragen die beiden
       Karten keine Farbe — sonst behauptet die Seite ein Ergebnis,
       bevor es eines gibt. */
    .tally-card[data-empty="1"] {
        border-color: transparent;
        background: var(--surface-raised);
    }

    .tally-card[data-empty="1"] .label,
    .tally-card[data-empty="1"] .value {
        color: var(--ink-muted);
    }

    /* ── Gedaechtnis ─────────────────────────────────────────────────
       Zaehlwerte ohne Geldbezug: neutral, ohne Farbe. */
    .stats-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: var(--space-3);
        padding: var(--space-4);
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
    }

    .stats-meta-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-inline-size: 0;
    }

    .stats-meta-item .label {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .stats-meta-item .value {
        font-family: var(--font-data);
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
        color: var(--ink-primary);
        overflow-wrap: anywhere;
    }

    /* Ein Name ist kein Messwert — er steht in der zweiten Stufe. */
    .stats-meta-item .value[data-kind="name"] {
        color: var(--ink-secondary);
    }

    /* ── Tabelle ─────────────────────────────────────────────────────
       Die Regeln fuer `.data-table` stehen in components.css und gelten
       auch hier. Der frueher graue Balken ueber der Tabelle entfaellt:
       die Ueberschrift steht als Abschnittstitel darueber, wie in jedem
       anderen Abschnitt dieser Seite auch. */
    .stats-table-wrap {
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
        overflow: hidden;
    }

    .stats-table-wrap .data-table {
        margin: 0;
        border-radius: 0;
    }

    /* Ein Ticker ist eine Kennung, keine Zahl: Mono ja, rechtsbuendig
       nein — `.font-mono` allein wuerde ihn in die Zahlenausrichtung
       ziehen (components.css). */
    .stats-table-wrap .data-table :is(td, th).stats-ticker {
        text-align: start;
    }

    /* Der Ausgang ist eine Beschriftung in Signalfarbe, keine Pille —
       in einer Spalte mit zehn Zeilen waeren zehn Pillen Unruhe. */
    .stats-outcome {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: var(--font-weight-medium);
    }

    .stats-outcome[data-outcome="win"]  { color: var(--signal-up); }
    .stats-outcome[data-outcome="loss"] { color: var(--signal-down); }
    .stats-outcome[data-outcome="open"] { color: var(--ink-muted); }

    .stats-table-wrap .empty-state {
        border: none;
        background: transparent;
    }
}

@layer channels {
    .content-body:has(.stats-view) { container: stats / inline-size; }
    .stats-table-wrap { max-width: 100%; overflow-x: auto; }
    @container stats (max-width: 600px) {
        .stats-view { padding: 12px 0 24px; }
        .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .stat-card { min-width: 0; padding: 12px; }
        .stat-card .value { overflow-wrap: anywhere; }
        .stats-meta { flex-wrap: wrap; }
    }
    @container stats (max-width: 340px) {
        .stats-grid { grid-template-columns: minmax(0, 1fr); }
    }
}

/* ============================================================================
   Bilanz der Journal-Trades (08.10.2026)
   Die Seite zeigte bis hierher fest verdrahtete Nullen. Jetzt rechnet
   `journal_stats.py` die echten Trades durch, und die Seite hat eine
   Reihenfolge, die man in zwei Sekunden liest: Kontostand → Kurve →
   Kennzahlen → Ticker → Trades. Eine Zahl ist gross, alles andere ruhig.
   Farbe traegt nur, was Geld ist (R2): Ergebnis, Kurvenflaeche, Punkte.
   Die Messphase ist Zeit, kein Geld — ihr Balken bleibt grau.
   ========================================================================= */
@layer channels {

    .stats-view > * {
        max-inline-size: 1120px;
    }

    .stats-section-sub {
        margin-inline-start: var(--space-1);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        color: var(--ink-muted);
    }

    .stats-alert {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0 0 var(--space-5);
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--signal-down-line);
        border-radius: var(--radius-control);
        background: var(--signal-down-surface);
        color: var(--ink-primary);
        font-size: var(--text-sm);
    }

    .stats-alert .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
        color: var(--signal-down);
    }

    .stats-empty .icon {
        inline-size: var(--icon-feature);
        block-size: var(--icon-feature);
    }

    /* ── Kontostand und Fortschritt ──────────────────────────────── */
    .stats-top {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-5) var(--space-7);
        margin-bottom: var(--space-4);
    }

    .stats-balance {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .stats-balance-label {
        font-size: var(--text-sm);
        color: var(--ink-secondary);
    }

    /* Die eine grosse Zahl der Seite. Sie liegt bewusst ueber der
       Titelstufe: sie ist die Antwort auf „komme ich voran?". */
    .stats-balance-value {
        font-family: var(--font-data);
        font-size: calc(var(--text-xl) * 1.6);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
        color: var(--ink-primary);
    }

    .stats-balance-delta {
        font-family: var(--font-data);
        font-size: var(--text-base);
        font-variant-numeric: tabular-nums;
        color: var(--ink-secondary);
    }

    .stats-balance-delta[data-tone="up"]   { color: var(--signal-up); }
    .stats-balance-delta[data-tone="down"] { color: var(--signal-down); }

    .stats-balance-delta .sep { color: var(--ink-muted); }

    .stats-balance-since {
        margin-inline-start: var(--space-2);
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    /* Der laufende Monat: die Zahl fuer heute, nicht fuer die Saison. */
    .stats-balance-month {
        margin-top: var(--space-2);
        font-size: var(--text-sm);
        color: var(--ink-secondary);
    }

    .stats-balance-month b {
        font-family: var(--font-data);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        color: var(--ink-primary);
    }

    .stats-balance-month b[data-tone="up"]   { color: var(--signal-up); }
    .stats-balance-month b[data-tone="down"] { color: var(--signal-down); }

    /* Zwei Uhren nebeneinander: Zeit (Messphase) und Beweislage (Trades
       bis zur Absicherung). Beide grau — erst ein abgesichertes Plus ist
       Geld und darf gruen werden. */
    .stats-progress {
        flex: 0 1 380px;
        min-inline-size: 260px;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .stats-meter {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .stats-meter-head {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        font-size: var(--text-sm);
        color: var(--ink-primary);
    }

    .stats-meter-count {
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        color: var(--ink-secondary);
    }

    .stats-meter-track {
        block-size: 6px;
        border-radius: 999px;
        background: var(--surface-hover);
        overflow: hidden;
    }

    .stats-meter-fill {
        display: block;
        inline-size: var(--fill, 0%);
        block-size: 100%;
        border-radius: inherit;
        background: var(--ink-muted);
        transform-origin: left center;
        animation: stats-grow calc(var(--dur-slow) * 2) var(--ease-out) both;
    }

    .stats-meter[data-state="solid"] .stats-meter-fill {
        background: var(--signal-up);
    }

    .stats-meter-note {
        margin: 0;
        max-inline-size: 52ch;
        font-size: var(--text-xs);
        line-height: 1.5;
        color: var(--ink-muted);
    }

    .stats-headline {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0 0 var(--space-5);
        font-size: var(--text-sm);
        color: var(--ink-secondary);
    }

    .stats-headline .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
        color: var(--ink-muted);
    }

    /* ── Kapitalkurve ────────────────────────────────────────────────
       Server-seitiges SVG, Farben nur aus Tokens. Ueber dem Startstand
       ist Linie und Flaeche gruen, darunter rot — die Kurve ist Geld.
       Die Flaeche laeuft zum Startstand hin aus, damit sie die Linie
       traegt, statt als Block daneben zu stehen. */
    .stats-curve-frame {
        position: relative;
        padding: var(--space-4) var(--space-4) var(--space-2);
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
        outline: none;
    }

    .stats-curve-frame:focus-visible {
        box-shadow: 0 0 0 2px var(--line-focus);
    }

    .stats-curve-svg {
        display: block;
        inline-size: 100%;
        block-size: auto;
        overflow: visible;
        touch-action: pan-y;
    }

    .grad-stop[data-tone="up"]   { stop-color: var(--signal-up);   stop-opacity: 0.28; }
    .grad-stop[data-tone="down"] { stop-color: var(--signal-down); stop-opacity: 0.28; }
    .grad-stop[data-fade="1"]    { stop-opacity: 0; }

    .curve-area[data-tone="up"]   { fill: url(#stats-grad-up); }
    .curve-area[data-tone="down"] { fill: url(#stats-grad-down); }

    .curve-grid {
        stroke: var(--line-subtle);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
    }

    .curve-base {
        stroke: var(--line-strong);
        stroke-width: 1;
        stroke-dasharray: 3 4;
        vector-effect: non-scaling-stroke;
    }

    .curve-month {
        stroke: var(--line);
        stroke-width: 1;
        stroke-dasharray: 2 4;
        vector-effect: non-scaling-stroke;
    }

    .curve-month-label {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        fill: var(--ink-muted);
    }

    .curve-line {
        fill: none;
        stroke-width: 2;
        stroke-linejoin: round;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
    }

    .curve-line[data-tone="up"]   { stroke: var(--signal-up); }
    .curve-line[data-tone="down"] { stroke: var(--signal-down); }

    .curve-cross {
        stroke: var(--line-strong);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
        opacity: 0;
        transition: opacity var(--dur-fast) var(--ease-out);
    }

    .stats-curve-frame.is-hover .curve-cross { opacity: 1; }

    .curve-dot {
        fill: var(--surface-raised);
        stroke-width: 1.5;
        transform-box: fill-box;
        transform-origin: center;
        transition: transform var(--dur-fast) var(--ease-out);
    }

    .curve-dot[data-outcome="win"]  { stroke: var(--signal-up); }
    .curve-dot[data-outcome="loss"] { stroke: var(--signal-down); }
    .curve-dot[data-outcome="draw"] { stroke: var(--ink-muted); }

    /* Der letzte Punkt ist gefuellt: hier stehst du gerade. */
    .curve-dot[data-last="1"][data-outcome="win"]  { fill: var(--signal-up); }
    .curve-dot[data-last="1"][data-outcome="loss"] { fill: var(--signal-down); }
    .curve-dot[data-last="1"][data-outcome="draw"] { fill: var(--ink-muted); }

    .curve-dot.is-active { transform: scale(1.7); }

    /* Ruhiger Hof um den aktuellen Stand — steht still, pulsiert nicht. */
    .curve-halo[data-outcome="win"]  { fill: var(--signal-up-surface);   stroke: var(--signal-up-line); }
    .curve-halo[data-outcome="loss"] { fill: var(--signal-down-surface); stroke: var(--signal-down-line); }
    .curve-halo[data-outcome="draw"] { fill: var(--surface-hover);       stroke: var(--line-strong); }
    .curve-halo { stroke-width: 1; vector-effect: non-scaling-stroke; }

    /* Aufdecken von links: eine Flaeche in Rahmenfarbe schrumpft nach
       rechts weg. Nur `transform` — die Kurve selbst steht von Anfang an
       fertig da und ist auch ohne Animation sichtbar. */
    .curve-cover {
        fill: var(--surface-raised);
        transform-box: fill-box;
        transform-origin: right center;
        transform: scaleX(0);
        animation: stats-unveil calc(var(--dur-slow) * 3) var(--ease-out) both;
        pointer-events: none;
    }

    .curve-tick,
    .curve-axis {
        font-family: var(--font-data);
        font-size: var(--text-2xs);
        font-variant-numeric: tabular-nums;
        fill: var(--ink-muted);
    }

    .curve-tick[data-kind="base"] { fill: var(--ink-secondary); }

    .curve-tag rect {
        fill: var(--surface-hover);
        stroke: var(--line-strong);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
    }

    .curve-tag text {
        font-family: var(--font-data);
        font-size: var(--text-2xs);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        fill: var(--ink-primary);
    }

    .curve-tag[data-tone="up"] rect   { fill: var(--signal-up-surface);   stroke: var(--signal-up-line); }
    .curve-tag[data-tone="up"] text   { fill: var(--signal-up); }
    .curve-tag[data-tone="down"] rect { fill: var(--signal-down-surface); stroke: var(--signal-down-line); }
    .curve-tag[data-tone="down"] text { fill: var(--signal-down); }

    /* Eigener Tooltip statt `<title>`: der Browser-Standard ist ein
       grauer Kasten mit Systemschrift und kommt erst nach einer Sekunde. */
    .stats-tip {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        z-index: var(--z-tooltip);
        min-inline-size: 176px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--surface-menu);
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--dur-fast) var(--ease-out);
    }

    .stats-tip[data-open="1"] { opacity: 1; }

    .stats-tip-head {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        font-size: var(--text-2xs);
        color: var(--ink-secondary);
    }

    .stats-tip-head [data-f="what"] { color: var(--ink-muted); }

    .stats-tip-pnl {
        font-family: var(--font-data);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        color: var(--ink-primary);
    }

    .stats-tip-pnl[data-tone="up"]   { color: var(--signal-up); }
    .stats-tip-pnl[data-tone="down"] { color: var(--signal-down); }

    .stats-tip-meta {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        font-family: var(--font-data);
        font-size: var(--text-2xs);
        font-variant-numeric: tabular-nums;
        color: var(--ink-muted);
    }

    /* Gewinner / Break-even / Verlierer als ein Balken unter der Kurve. */
    .stats-split {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-3);
    }

    .stats-split-bar {
        display: flex;
        gap: 2px;
        block-size: 6px;
    }

    .stats-split-bar span {
        flex-basis: 0;
        border-radius: 999px;
        transform-origin: left center;
        animation: stats-grow calc(var(--dur-slow) * 2) var(--ease-out) both;
    }

    .stats-split-bar span[data-outcome="win"],
    .stats-split-legend [data-outcome="win"] i  { background: var(--signal-up); }
    .stats-split-bar span[data-outcome="draw"],
    .stats-split-legend [data-outcome="draw"] i { background: var(--ink-muted); }
    .stats-split-bar span[data-outcome="loss"],
    .stats-split-legend [data-outcome="loss"] i { background: var(--signal-down); }

    .stats-split-legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-4);
        font-size: var(--text-xs);
        color: var(--ink-secondary);
    }

    .stats-split-legend span {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-variant-numeric: tabular-nums;
    }

    .stats-split-legend i {
        inline-size: 8px;
        block-size: 8px;
        border-radius: 999px;
    }

    /* ── Monate ──────────────────────────────────────────────────────
       Eine Flaeche, eine Zeile je Monat. Der Balken vergleicht die
       Monate untereinander, nicht mit einem Ziel. */
    .stats-months {
        margin: 0;
        padding: var(--space-1) var(--space-4);
        list-style: none;
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
    }

    .stats-month {
        display: grid;
        grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1fr) minmax(6rem, 2fr) 7rem 9.5rem;
        align-items: center;
        gap: var(--space-4);
        padding-block: var(--space-3);
        font-size: var(--text-sm);
    }

    .stats-month + .stats-month {
        border-top: 1px solid var(--line-subtle);
    }

    .stats-month-name { color: var(--ink-primary); }

    .stats-month-live {
        margin-inline-start: var(--space-1);
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .stats-month-count {
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        color: var(--ink-secondary);
    }

    .stats-month-bar {
        block-size: 6px;
        border-radius: 999px;
        background: var(--surface-hover);
        overflow: hidden;
    }

    .stats-month-bar i {
        display: block;
        inline-size: var(--fill, 0%);
        block-size: 100%;
        border-radius: inherit;
        background: var(--ink-muted);
        transform-origin: left center;
        animation: stats-grow calc(var(--dur-slow) * 2) var(--ease-out) both;
    }

    .stats-month-bar i[data-tone="up"]   { background: var(--signal-up); }
    .stats-month-bar i[data-tone="down"] { background: var(--signal-down); }

    .stats-month-pnl {
        text-align: end;
        font-family: var(--font-data);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        color: var(--ink-primary);
    }

    .stats-month-pnl[data-tone="up"]   { color: var(--signal-up); }
    .stats-month-pnl[data-tone="down"] { color: var(--signal-down); }

    .stats-month-end {
        text-align: end;
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        color: var(--ink-muted);
    }

    /* Eine Zeile der Trade-Tabelle, deren Punkt auf der Kurve aktiv ist. */
    .stats-trades tbody tr.is-active {
        background: var(--surface-hover);
    }

    /* ── Kennzahlen ──────────────────────────────────────────────────
       Eine Flaeche, keine Kachelreihe (R3). Der Erwartungswert fuehrt:
       er ist die Zahl, an der die Echtgeld-Entscheidung haengt. */
    .stats-metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-5);
        margin: 0;
        padding: var(--space-5);
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
    }

    .stats-metric {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-inline-size: 0;
    }

    .stats-metric[data-lead="1"] {
        grid-column: span 2;
    }

    .stats-metric dt {
        font-size: var(--text-xs);
        color: var(--ink-secondary);
    }

    .stats-metric dd {
        margin: 0;
    }

    .stats-metric .value {
        font-family: var(--font-data);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
        color: var(--ink-primary);
    }

    .stats-metric[data-lead="1"] .value {
        font-size: var(--text-xl);
    }

    .stats-metric .note {
        font-size: var(--text-2xs);
        line-height: 1.45;
        color: var(--ink-muted);
    }

    :is(.stats-metric .value, .stats-table-wrap td)[data-tone="up"]   { color: var(--signal-up); }
    :is(.stats-metric .value, .stats-table-wrap td)[data-tone="down"] { color: var(--signal-down); }

    /* ── Tabellen ────────────────────────────────────────────────── */
    .stats-table-wrap .data-table :is(th, td).num {
        text-align: end;
        font-family: var(--font-data);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Dollar-Ergebnis unter dem Euro-Ergebnis: dieselbe Zahl, nur Nebeninfo. */
    .stats-table-wrap .data-table .stats-sub {
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .stats-table-wrap .data-table th.num {
        font-family: var(--font-ui);
    }

    /* Datum und Richtung sind Kennungen, keine Messwerte: linksbuendig,
       und „Long Break-even" bricht nicht um. */
    .stats-trades :is(th, td):first-child {
        text-align: start;
    }

    .stats-trades td {
        white-space: nowrap;
    }

    .stats-trades td.stats-r {
        color: var(--ink-secondary);
    }

    .stats-be {
        margin-inline-start: var(--space-1);
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .stats-foot {
        max-inline-size: 75ch;
        margin: var(--space-5) 0 0;
        font-size: var(--text-2xs);
        line-height: 1.6;
        color: var(--ink-muted);
    }

    /* Export: ruhiger Knopf am Ende, keine Akzentfarbe — ein Werkzeug, kein Ziel. */
    .stats-export {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin-block-start: var(--space-4);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: var(--text-xs);
        color: var(--ink-primary);
        text-decoration: none;
    }
    .stats-export:hover { background: var(--surface-hover); }
    .stats-export .icon { inline-size: 14px; block-size: 14px; }
    .stats-export-hint {
        margin: var(--space-2) 0 0;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    @keyframes stats-grow {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }

    @keyframes stats-unveil {
        from { transform: scaleX(1); }
        to   { transform: scaleX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .stats-meter-fill,
        .stats-split-bar span,
        .stats-month-bar i {
            animation: none;
        }

        .curve-cover {
            display: none;
        }

        .curve-dot,
        .curve-cross,
        .stats-tip {
            transition: none;
        }
    }

    @container stats (max-width: 600px) {
        .stats-top { flex-direction: column; align-items: stretch; }
        .stats-progress { flex-basis: auto; }
        .stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-4); }
        .stats-balance-since { display: block; margin-inline-start: 0; }
        .stats-month {
            grid-template-columns: 1fr auto;
            gap: var(--space-1) var(--space-3);
        }
        .stats-month-bar { grid-column: 1 / -1; grid-row: 3; }
        .stats-month-pnl { text-align: start; }
        /* Die Wert-Marke waere hier winzig und steht ohnehin gross oben. */
        .curve-tag { display: none; }
        /* Das SVG schrumpft mit; die Schrift darin wird in viewBox-Einheiten
           gemessen und muss deshalb gegenwachsen, sonst ist sie unlesbar. */
        .curve-tick,
        .curve-axis,
        .curve-month-label { font-size: 24px; }
    }
}