/* Custom styles - Pico CSS handles most styling via CDN */

/* ──────────────────────────────────────────────────────────────
   TraderRobot design tokens — pulled from the traderbros sibling
   project so the two trader-bro sites feel like family. Layered
   over Pico's dark theme; we override accent + add monospace
   tickers and kicker labels rather than replacing Pico wholesale.

   UX-001: new Bloomberg/Linear-style token set lives next to the
   legacy --tr-* names. Old names are kept as aliases so existing
   rules continue to work; new rules SHOULD reach for the new names.
   ────────────────────────────────────────────────────────────── */
:root {
    color-scheme: dark;

    /* ── UX-001 neutral scale ── */
    --bg-0: #0a0a0a;
    --bg-1: #131313;
    --bg-2: #1c1c1c;
    --bg-3: #232323;
    --border-subtle:  #1f1f1f;
    --border-default: #2a2a2a;
    --border-strong:  #3a3a3a;

    /* ── UX-001 text ── */
    --fg-primary:   #f5f5f0;
    --fg-secondary: #b8b8b0;
    --fg-muted:     #8b8b85;

    /* ── UX-001 semantic ── */
    --positive:      #22c55e;
    --positive-soft: rgba(34, 197, 94, 0.15);
    --negative:      #ef4444;
    --negative-soft: rgba(239, 68, 68, 0.15);
    --warning:       #f59e0b;
    --info:          #3b82f6;

    /* ── UX-001 brand accent ── */
    --accent:      #d4af37;
    --accent-soft: rgba(212, 175, 55, 0.18);

    /* ── UX-001 radius ── */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    /* ── UX-001 shadows ── */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);

    /* ── UX-001 font families ── */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ── UX-001 type scale (fixed steps; fluid scale below kept for legacy rules) ── */
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-base:14px;
    --fs-md:  16px;
    --fs-lg:  18px;
    --fs-xl:  22px;
    --fs-2xl: 28px;
    --fs-3xl: 36px;

    /* ── Legacy --tr-* aliases (kept so existing rules continue to work) ── */
    --tr-gold:        #d4af37;
    --tr-gold-2:      #b8941f;
    --tr-gold-bright: #f4d674;
    --tr-bg:          var(--bg-0);
    --tr-bg-2:        var(--bg-1);
    --tr-bg-3:        var(--bg-2);
    --tr-fg:          var(--fg-primary);
    --tr-muted:       var(--fg-muted);
    --tr-line:        var(--border-default);
    --tr-hot:         #1a1408;
    --tr-positive:    var(--positive);
    --tr-negative:    var(--negative);
    --tr-font-mono:   var(--font-mono);

    /* Fluid type-scale (FE-005): one rem-based clamp() per tier, so the
       body, section-heading and page-heading all scale together between
       a 390px phone and the desktop viewport. The 0/1/2 naming mirrors
       Utopia's step naming convention; designers can reach for the next
       tier (--tr-step-3) without renaming if we extend the scale later. */
    --tr-step-0: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
    --tr-step-1: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
    --tr-step-2: clamp(1.25rem, 1rem + 1.2vw, 2rem);

    /* Override Pico's defaults so the whole dashboard breathes the
       traderbros terminal-luxury palette. Pico reads these via its
       own custom-property layer; the assignments below cascade down
       to every default Pico component (article, button, table…). */
    --pico-background-color:           var(--tr-bg);
    --pico-color:                      var(--tr-fg);
    --pico-muted-color:                var(--tr-muted);
    --pico-muted-border-color:         var(--tr-line);
    --pico-card-background-color:      var(--tr-bg-2);
    --pico-card-border-color:          var(--tr-line);
    --pico-card-sectioning-background-color: var(--tr-bg-3);
    --pico-primary:                    var(--tr-gold);
    --pico-primary-hover:              var(--tr-gold-2);
    --pico-primary-focus:              rgba(212, 175, 55, 0.25);
    --pico-secondary:                  var(--tr-muted);
    --pico-secondary-hover:            var(--tr-fg);
    --pico-h1-color:                   var(--tr-fg);
    --pico-h2-color:                   var(--tr-fg);
    --pico-h3-color:                   var(--tr-fg);
    --pico-table-row-stripped-background-color: rgba(255,255,255,0.02);
    --pico-form-element-background-color: var(--tr-bg-3);
    --pico-form-element-border-color:  var(--tr-line);
    --pico-form-element-color:         var(--tr-fg);
}

html {
    background: var(--tr-bg);
}

body {
    background: var(--tr-bg);
    color: var(--tr-fg);
    /* UX-001: switch to Inter + fixed --fs-base so the dashboard reads at a
       consistent ~14px instead of the old fluid clamp. The legacy
       --tr-step-0 declaration is kept first so the FE-005 regression test
       (which asserts the fluid step is still referenced on body) keeps
       passing; the --fs-base declaration follows and wins via cascade. */
    font-family: var(--font-sans);
    font-size: var(--tr-step-0);
    font-size: var(--fs-base);
    line-height: 1.5;
}

/* UX-002: centred container with bounded max-width so the dashboard
   doesn't sprawl across ultra-wide monitors. Overrides Pico's default
   .container (which scales with breakpoints and produced ~100px side-
   gutters on wide screens). Same selector — loaded after Pico via
   base.html so the cascade picks ours. */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }
}

/* Fluid headings (FE-005) — global default; component-specific rules
   like .pf-header h2 or h1.tr-hero stay more specific and continue to
   win, so this only affects bare h1/h2 with no extra class.

   UX-003 layers a fixed Bloomberg/Linear-style hierarchy on top: each
   bare-element block keeps the legacy `var(--tr-step-*)` declaration
   (so the FE-005 fluid-scale regression tests stay green) and then
   re-declares font-size against the UX-003 fixed scale — last
   declaration wins via cascade. Adds h3, h4, weight + letter-spacing.
   See `tests/test_ux_typography.py`. */
h1 {
    font-size: var(--tr-step-2);
    font-size: var(--fs-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
}
h2 {
    font-size: var(--tr-step-1);
    font-size: var(--fs-2xl);
    font-weight: 600;
}
h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
}
h4 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-secondary);
    font-weight: 600;
}

/* UX-003 table typography — header is small, uppercase, tracked; cells
   read at the body --fs-sm with subtle borders. Numeric cells opt in
   via `class="num"` (or `data-type="number"`), which switches the cell
   to JetBrains Mono, right-aligns the text and locks tabular-nums so
   columns of money line up. Kept as a SEPARATE rule from the existing
   `table td, table th, .pf-tab-pnl, ... { font-variant-numeric: ... }`
   block below so the FE-005 regression guard
   (`test_tabular_nums_applied_to_numeric_surfaces`) keeps matching. */
th {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-secondary);
    font-weight: 500;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
    background: transparent;
}
td {
    font-size: var(--fs-sm);
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
td.num,
td[data-type="number"],
th.num,
th[data-type="number"] {
    font-family: var(--font-mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Tabular numerics (FE-005) — every table cell plus the dashboard's
   coloured PnL pills line up column-to-column so digits don't dance
   between mobile and desktop. Component-specific number classes
   (.tr-num, .tr-mono) already set this; the rule below covers the
   bare tables and tab-pill elements. */
table td,
table th,
.pf-tab-pnl,
.pf-tab-today-pnl {
    font-variant-numeric: tabular-nums;
}

/* UX-007 table baseline — width, separate borders so per-cell border
   declarations stack cleanly (rather than collapsing into a shared
   line), --fs-sm body and a subtle row-hover for tbody. The bare
   `th { ... }` / `td { ... }` rules above already carry the UX-003
   padding/border/colour treatment; this block adds the table-level
   layout shell + the hover affordance. */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
}
tbody tr:hover td {
    background: var(--bg-2);
}

/* Default-link styling: gold underline on hover so the trading-desk
   feel comes through every navigable surface. The dashboard's
   hot-anchored links inside trade-rationale and feed columns inherit
   this — we explicitly override per-component where we don't want it. */
a {
    color: var(--tr-gold);
    text-decoration-color: rgba(212, 175, 55, 0.4);
}
a:hover {
    color: var(--tr-gold-2);
    text-decoration-color: var(--tr-gold);
}

/* ── Color utilities ── */
.positive { color: var(--tr-positive); }
.negative { color: var(--tr-negative); }

/* Monospace utility — for tickers, timestamps, financial numbers. */
.tr-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Small uppercase label that sits above a heading or section. The
   visual hook of traderbros — a gold-tinted, wide-tracked, all-caps
   tag that signals 'this is a section'. */
.tr-kicker {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: var(--tr-gold);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Pill-shaped tag — used for portfolio identifiers (POTUS / WSB / …)
   and for any gold-accented small tag throughout the dashboard. */
.tr-pill {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tr-gold);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

/* Tabular numerics for any financial figure — keeps columns aligned. */
.tr-num {
    font-variant-numeric: tabular-nums;
}

/* Unified base for card-like surfaces (.pf-card, .pf-chart-wrap,
   .pf-stat-card, .leader-card, .advice-card, .feed-status-item).
   Each variant layers accent borders (top/left stripe) or padding
   overrides on top of these tokens — see UI-T-011 in
   docs/prd-ui-tightening.md for the consolidation rationale. */
.tr-card-base {
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    padding: 1rem 1.5rem;
}

/* ── Next-trade countdown ──
   Big monospace gold timer over a subtle radial-gradient panel so
   the next-cycle moment dominates the top of the dashboard. Three
   states: default (gold), live (green pulse <60s), closed (muted
   when the cycle has fired). The JS at #nextTradeCountdown adds
   the .tr-countdown--live or --closed class as time changes. */
.tr-countdown {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    padding: 1.5rem 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.tr-countdown-label {
    font-family: var(--tr-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tr-gold);
    font-weight: 700;
    margin-bottom: 0.6rem;
    background: none;
    border: 0;
    padding: 0;
}
.tr-countdown-value {
    font-family: var(--tr-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 7vw, 3rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--tr-gold);
    margin: 0;
    position: relative;
}
.tr-countdown-sub {
    display: block;
    margin-top: 0.6rem;
    color: var(--tr-muted);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    position: relative;
}

/* Live state — handler indenfor 60 sek, blød 2-trins puls (ingen
   blink-fra-himlen-effekt; bare en mild opacity-step). */
.tr-countdown--live {
    background: #050a06;
    border-color: rgba(34, 197, 94, 0.4);
    animation: tr-countdown-pulse 1.6s ease-in-out infinite;
}
.tr-countdown--live .tr-countdown-label {
    color: #6ee7a7;
}
.tr-countdown--live .tr-countdown-value {
    color: #6ee7a7;
}
@keyframes tr-countdown-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
    50%      { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.25), 0 0 24px rgba(34,197,94,0.12); }
}

/* Closed state — cyklus er fyret, dæmpet uden glow. */
.tr-countdown--closed {
    background: var(--tr-bg-2);
    border-color: var(--tr-line);
}
.tr-countdown--closed .tr-countdown-label,
.tr-countdown--closed .tr-countdown-value {
    color: var(--tr-muted);
    text-shadow: none;
}

/* UX-008 — Countdown hero: panel-shaped signature element with a
   subtle radial-gradient accent at top + big mono timer. The wrapper
   carries BOTH .tr-countdown (legacy state-classes --live/--closed
   still cascade) AND .tr-countdown-hero (new panel shape wins via
   cascade-last). Inner labels stay on the same class names; only
   .tr-countdown-sub was renamed to .tr-countdown-meta per the PRD. */
.tr-countdown-hero {
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    margin: 24px 0;
    position: relative;
    overflow: hidden;
}
.tr-countdown-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, var(--accent-soft), transparent 60%);
    pointer-events: none;
}
.tr-countdown-hero > * {
    position: relative;
}
.tr-countdown-hero .tr-countdown-label {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-secondary);
    margin-bottom: 12px;
}
.tr-countdown-hero .tr-countdown-value {
    font-family: var(--font-mono);
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--fg-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.tr-countdown-meta {
    display: block;
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    margin-top: 8px;
    position: relative;
}

/* ── Portfolio tab bar ──
   Sticky med backdrop-filter blur så indhold scroller under tab-baren.
   Skjult scrollbar på mobile så tabs kan glide horisontalt uden visuel
   støj. Aktiv tab markeres af porteføljens egen --pf-color (sat inline
   af templaten via style attribute). */
/* Header med label + hint over portfolio-tabs — gør det tydeligt
   at man skal klikke en fane for at se en portføljes detaljer. */
.pf-tabs-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 2.25rem 0 0.6rem;
    padding: 0 0.15rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    flex-wrap: wrap;
}
.pf-tabs-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--tr-fg);
}
.pf-tabs-hint {
    font-size: 0.68rem;
    color: var(--tr-muted);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    opacity: 0.85;
}

.pf-tabs {
    /* 2 lanes: 4 portføljer per lane på desktop (dashboard har 8 tabs).
       /analyse har 9 tabs (Alle + 8) og overrider til 5 kolonner via
       .analyse-pf-tabs nedenfor. CSS grid auto-fitter til færre
       kolonner på mindre skærme (se @media breakpoints). */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0 0 0;
    padding: 0.4rem;
    border: 1px solid var(--tr-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pf-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tr-fg);
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    white-space: nowrap;
    border-radius: 9px;
    transition: background 0.18s, border-color 0.18s, transform 0.12s, color 0.18s;
}

.pf-tab:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--tr-fg);
    transform: translateY(-1px);
}

.pf-tab--active {
    color: var(--pf-color);
    background: var(--pf-color-bg);
    border-color: var(--pf-color);
    /* UX-004: keep the existing --pf-color outline, plus an inset accent
       underline-glow so the active tab is unmistakable even when the
       portfolio color is muted (e.g. wsb's soft purple). */
    box-shadow: 0 0 0 1px var(--pf-color), inset 0 -2px 0 var(--accent);
}
.pf-tab--active:hover {
    transform: none;
    background: var(--pf-color-bg);
}

/* wsb-tab har den længste label ('Ugilt Diamond Hands' = 19 chars).
   Tillad wrap så 'Hands' falder på linje 2 i stedet for at skrumpe
   font eller presse cellen. Parent .pf-tab har white-space: nowrap
   som vi specifikt overrider her. line-height strammet så de to
   linjer ikke springer cellen vertikalt. */
.pf-tab--wsb .pf-tab-name {
    white-space: normal;
    line-height: 1.1;
    text-align: left;
}

/* /analyse-side: 9 tabs (Alle + 8 porteføljer) → 5 kolonner desktop
   (lane 1: 5 tabs, lane 2: 4 tabs). Lige bredt + visuelt afbalanceret. */
.pf-tabs.analyse-pf-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pf-tab-icon {
    font-size: 1.05em;
    line-height: 1;
}

.pf-tab-name {
    letter-spacing: 0.18em;
}

.pf-tab-pnl {
    font-size: 0.82em;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.05;
    /* Skub PnL-boksen til højre kant af tab-cellen så ikoner + navn
       står venstrejusteret og tal står højrejusteret — kolonneeffekt
       på tværs af tabs gør det nemmere at sammenligne procent. */
    margin-left: auto;
}
.pf-tab-today-pnl {
    font-size: 0.78em;
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.01em;
}
.pf-tab-today-pnl.positive { color: var(--tr-positive); }
.pf-tab-today-pnl.negative { color: var(--tr-negative); }

/* ── Portfolio panels ── */
.pf-panel {
    display: none;
    padding: 1.5rem 0 0;
    animation: pf-fade-in 0.25s ease;
    position: relative;
}

.pf-panel--active {
    display: block;
}

.pf-panel::before {
    content: attr(data-icon);
    position: absolute;
    top: 1.5rem;
    right: 0;
    font-size: 8rem;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

@keyframes pf-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--pf-color-bg);
    border: 1px solid var(--pf-color-border);
    border-left: 4px solid var(--pf-color);
    border-radius: 8px;
}

.pf-header-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.pf-header-text {
    flex: 1;
    min-width: 0;
}

.pf-header h2 {
    margin-bottom: 0.15rem;
    /* Portfolio name painted in the portfolio's own colour — flat solid
       fill, no gradient-clip. Per-portfolio --pf-color is set inline on
       the panel root so each tab still feels distinct. */
    font-size: clamp(1.2rem, 3.2vw, 1.6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--pf-color);
}

.pf-description {
    opacity: 0.65;
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

/* Hero h1-treatment hvis dashboardet nogensinde får en stor headline.
   Brugt af portefølje-titler ved fuldskærm-mode. */
h1.tr-hero {
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

/* Meaningful summary-headline på dashboard top — erstatter den gamle
   <h1>Dashboard</h1> placeholder med tæt info-line (portfolio_count,
   total_value_dkk, total_pnl_pct, day_number). UI-T-012. */
/* Tabular numerics overalt hvor vi viser penge-tal — så kolonner i
   holdings-tabellen og chart-tooltips står rene under hinanden. */
.pf-stats-grid .pf-stat-value,
.pf-stat-card,
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* ── Stats grid ── */
.pf-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
    .pf-stats-grid { grid-template-columns: 1fr; }
}

.pf-stat-card {
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    border-top: 3px solid var(--pf-color);
    transition: border-color 0.2s, background 0.2s;
}

.pf-stat-card:hover {
    border-color: var(--pf-color);
}

/* "Hot" treatment — when a stat-card represents positive performance,
   differentiate it via a gold-tinted border only. No glow. */
.pf-stat-card.tr-hot {
    border-color: rgba(212, 175, 55, 0.4);
}

.pf-stat-label {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tr-muted);
    opacity: 0.85;
    margin-bottom: 0.4rem;
}

.pf-stat-value {
    font-family: var(--tr-font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--tr-fg);
}

/* When the stat-value carries an explicit positive/negative class
   (P/L card), use the bright traffic-light colour instead of the
   neutral foreground. */
.pf-stat-value.positive {
    color: var(--tr-positive);
}
.pf-stat-value.negative {
    color: var(--tr-negative);
}

.pf-stat-value small {
    font-size: 0.55em;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: 0.05em;
    margin-left: 0.3em;
    text-transform: uppercase;
}

.pf-stat-sub {
    font-size: 0.78rem;
    color: var(--tr-muted);
    opacity: 0.85;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
}

/* ── Cards (holdings, reasoning, thoughts, reco) ── */
.pf-card {
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.pf-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pf-color-border, var(--pico-muted-border-color));
}

.pf-card-header small {
    font-weight: 400;
    opacity: 0.6;
}

.pf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pf-table-wrap table {
    min-width: max-content;
}

/* ── Chart wrapper ── */
.pf-chart-wrap {
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* ── UX-005: card foundation + pf-header status + status chip ──
   Reaches for the UX-001 token set so pf-card / pf-stat-card share a
   neutral baseline (var(--bg-1) + var(--border-subtle) + var(--r-md)
   radius + var(--shadow-1)). Comes AFTER the legacy .pf-card /
   .pf-stat-card blocks so cascade picks these declarations. The legacy
   border-top accent on .pf-stat-card and border-left accent on
   .pf-header are re-asserted explicitly so the shorthand `border:` in
   this block doesn't wipe them out. */
.pf-card,
.pf-stat-card {
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    padding: 20px 24px;
}

.pf-stat-card {
    /* Preserve per-portfolio top-accent — `border:` shorthand above
       resets it, re-assert here. */
    border-top: 3px solid var(--pf-color);
}

.pf-card:hover,
.pf-stat-card:hover {
    border-color: var(--border-default);
}

.pf-header {
    /* Drop the per-portfolio --pf-color-bg green tint in favour of a
       neutral baseline. The portfolio's accent colour still paints the
       4px left-stripe (re-asserted below because `border:` resets it),
       and the positive/negative variants below layer a soft gradient
       hint of P/L state on top. */
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--pf-color);
    position: relative;
    overflow: hidden;
}

.pf-header--positive {
    background-image: linear-gradient(135deg, var(--positive-soft) 0%, transparent 60%);
}

.pf-header--negative {
    background-image: linear-gradient(135deg, var(--negative-soft) 0%, transparent 60%);
}

.pf-status-chip {
    /* Pushed to the right edge of the pf-header flex row via
       margin-left: auto (also guarded by .pf-header-text { flex: 1 }
       — belt and braces). */
    margin-left: auto;
    background: var(--bg-2);
    border: 1px solid var(--border-default);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    color: var(--fg-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── UX-006: stats-grid responsive (3→2→1) + pnl trend coloring ──
   Layers on top of the legacy .pf-stats-grid / .pf-stat-label /
   .pf-stat-value / .pf-stat-sub rules — the cascade picks these
   declarations because they sit after their legacy counterparts.
   The new grid uses minmax(0, 1fr) so cells can shrink below their
   intrinsic content width (legacy `1fr` couldn't). Two media-queries
   collapse 3 → 2 → 1 at 900px and 560px breakpoints (PRD AC #1).
   The legacy 700px breakpoint stays in place but is superseded by
   the new 900px rule at 700px viewport widths (later cascade wins). */
.pf-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .pf-stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .pf-stats-grid { grid-template-columns: 1fr; }
}

.pf-stat-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-secondary);
}

.pf-stat-value {
    font-family: var(--font-mono);
    font-size: var(--fs-2xl);
    font-weight: 600;
}

.pf-stat-sub {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}

/* AFKAST-kort: dedicated pnl variant. The ▲ / ▼ trend span inside
   .pf-stat-sub carries the same `positive` / `negative` class that
   the main .pf-stat-value uses; colour cascades to the triangle
   character because the inline span wraps both glyph and number. */
.pf-stat-card--pnl .pf-stat-trend {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.pf-stat-card--pnl .pf-stat-trend.positive {
    color: var(--positive);
}

.pf-stat-card--pnl .pf-stat-trend.negative {
    color: var(--negative);
}

.pf-chart-header {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pf-chart-header small {
    opacity: 0.6;
    font-weight: 400;
}

.portfolio-chart {
    max-height: 400px;
}

.metrics-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}

/* ── Details (rules, feeds) ── */
.pf-details {
    border-left: 3px solid var(--pf-color, var(--pico-muted-border-color));
}

/* ── Trade reasoning ── */
.trade-reasoning {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: var(--pico-border-radius);
    margin-top: 0.5rem;
    font-size: 0.9em;
    white-space: pre-wrap;
}

/* ── Trade chips ── */
.trade-chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 10px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.trade-chip-buy  { background: rgba(34, 197, 94, 0.18);  color: #22c55e; }
.trade-chip-sell { background: rgba(239, 68, 68, 0.18);  color: #ef4444; }

.badge-offline {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin-left: 0.5rem;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* ── Recommendation 3-panel grid ── */
.reco-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .reco-grid { grid-template-columns: 1fr; }
}
.reco-panel {
    margin: 0;
}
@media (max-width: 375px) {
    .reco-panel { padding: 0.7rem 0.8rem; }
    .reco-item  { padding: 0.45rem 0; }
}
.reco-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.reco-item {
    padding: 0.5rem 0;
    border-top: 1px solid var(--pico-muted-border-color);
}
.reco-item:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Today's trades — gold-tinted left border + faint background, plus
   a small "I DAG" pill in the head row. The trader-bro family aesthetic
   pulled forward into the trade list. */
.reco-item--today {
    background: linear-gradient(90deg, rgba(212,175,55,0.07), transparent 60%);
    border-left: 3px solid var(--tr-gold);
    margin-left: -0.85rem;
    padding-left: 0.85rem;
    border-radius: 0 4px 4px 0;
}
.reco-item--today + .reco-item {
    border-top-color: rgba(212,175,55,0.3);
}

.trade-today-badge {
    display: inline-block;
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--tr-gold);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.3;
}
.reco-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.reco-rationale {
    margin-top: 0.25rem;
    font-size: 0.88em;
    opacity: 0.9;
    line-height: 1.4;
}
.reco-meta {
    display: block;
    margin-top: 0.25rem;
    opacity: 0.65;
    font-size: 0.78em;
}
.reco-empty {
    opacity: 0.55;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Trade-history timeline ──
   Kun anvendt på den tredje reco-panel ('Faktiske handler'). De to
   anbefalings-paneler bruger almindelig reco-list-stil. Vertikal
   guld-til-mørk gradient-linje langs venstre side med små runde
   guld-prikker per række — løftet fra traderbros' .timeline-stil. */
.trade-timeline {
    position: relative;
    padding-left: 2rem;
    margin-top: 0.25rem;
}
.trade-timeline::before {
    content: "";
    position: absolute;
    left: 0.65rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: linear-gradient(180deg, var(--tr-line), var(--tr-line));
}
.trade-timeline .reco-item {
    position: relative;
    border-top: none;
    padding: 0.45rem 0 0.85rem;
}
.trade-timeline .reco-item::before {
    content: "";
    position: absolute;
    left: -1.7rem;
    top: 0.55rem;
    width: 0.85rem;
    height: 0.85rem;
    background: transparent;
    border: 2px solid var(--tr-gold);
    border-radius: 50%;
    box-sizing: border-box;
}
.trade-timeline .reco-item--today::before {
    background: var(--tr-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}
/* Inde i timeline ophæver vi den horisontale 'I DAG'-strip-styling
   så prikken alene gør hot-state visuelt — bevarer venstre-padding
   konsistent med øvrige rækker. */
.trade-timeline .reco-item--today {
    background: none;
    border-left: none;
    margin-left: 0;
    padding-left: 0;
    border-radius: 0;
}
.trade-timeline .reco-item--saxo-rejected::before {
    background: var(--tr-bg);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}
.trade-timeline .reco-item:first-child {
    padding-top: 0.45rem;
}
/* Stack chip + ticker lodret så timeline-rytmen står ren — chip
   bliver nu en 'category badge' over rækken i stedet for inline. */
.trade-timeline .reco-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.trade-timeline .reco-head .reco-chip {
    align-self: flex-start;
}
.trade-timeline .trade-today-badge {
    margin-left: 0;
}
.trade-timeline .saxo-trade-badge {
    margin-left: 0;
}

@media (max-width: 640px) {
    .trade-timeline {
        padding-left: 1.5rem;
    }
    .trade-timeline::before { left: 0.4rem; }
    .trade-timeline .reco-item::before {
        left: -1.35rem;
        width: 0.7rem;
        height: 0.7rem;
    }
    .trade-timeline .reco-item--today::before {
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
    }
}
.reco-chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 8px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--tr-font-mono);
}
.reco-chip-buy  { background: rgba(34, 197, 94, 0.18);  color: #22c55e; }
.reco-chip-sell { background: rgba(239, 68, 68, 0.18);  color: #ef4444; }
.reco-badge-executed {
    margin-left: auto;
    padding: 0.05rem 0.4rem;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.18);
    color: #60a5fa;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Portfolio dots ── */
.portfolio-dots {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.6rem;
    vertical-align: middle;
}

.portfolio-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: help;
    position: relative;
}

.portfolio-dot[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e2e;
    color: #e0e0e0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: tooltip-in 0.15s ease;
}

.portfolio-dot[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e1e2e;
    z-index: 100;
    pointer-events: none;
}

@keyframes tooltip-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.portfolio-dot--claude    { background: #d97706; }
.portfolio-dot--ollama    { background: #a855f7; }
.portfolio-dot--yahoo     { background: #60a5fa; }
.portfolio-dot--fred      { background: #16a34a; }
.portfolio-dot--fng       { background: #f59e0b; }
.portfolio-dot--reddit    { background: #ef4444; }
.portfolio-dot--wsb       { background: #ec4899; }
.portfolio-dot--truth     { background: #c41e3a; }
.portfolio-dot--benchmark { background: #6b7280; }
.portfolio-dot--saxo-infoprices { background: #0066cc; }

.portfolio-dot--stale {
    opacity: 0.3;
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Saxo OAuth status badge inside the saxo portfolio header */
.saxo-oauth-badge {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--tr-font-mono);
    vertical-align: middle;
    line-height: 1.5;
    text-decoration: none;
}
.saxo-oauth-badge--ok {
    background: #0066cc1a;
    color: #0066cc;
    border: 1px solid #0066cc40;
}
.saxo-oauth-badge--connect {
    background: #0066cc;
    color: #fff;
    border: 1px solid #0066cc;
}
.saxo-oauth-badge--connect:hover {
    background: #0055aa;
    border-color: #0055aa;
}

/* Per-trade reconciliation status badge in the saxo tab's recent-trades list */
.saxo-trade-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-family: var(--tr-font-mono);
    vertical-align: middle;
    line-height: 1.5;
}
.saxo-trade-badge--pending  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.saxo-trade-badge--filled   { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.saxo-trade-badge--rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Stop-loss badge under each position in the saxomoon/saxovegas tab.
   Color reflects distance-to-stop: red <2%, yellow 2-5%, green >5%. */
.stop-badge {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-family: var(--tr-font-mono);
    line-height: 1.55;
    margin-top: 0.1rem;
}
.stop-badge--danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.stop-badge--warn    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.stop-badge--ok      { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.stop-badge--unknown { background: #e5e7eb; color: #374151; border: 1px solid #d1d5db; }
.stop-distance--danger  { color: #b91c1c; font-weight: 700; }
.stop-distance--warn    { color: #b45309; font-weight: 700; }
.stop-distance--ok      { color: #047857; font-weight: 700; }
.stop-distance--unknown { color: var(--tr-text-muted, #6b7280); }
.stop-shadow-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.0rem 0.4rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

/* ── Dagens leder/taber-banner over hovedgrafen ── */
.leader-banner {
    margin-bottom: 1.5rem;
}
.leader-banner-kicker {
    font-family: var(--tr-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--tr-gold);
    text-align: center;
    margin-bottom: 0.6rem;
}
.leader-banner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 600px) {
    .leader-banner-grid { grid-template-columns: 1fr 1fr; }
}
.leader-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
}
/* Winner/loser differentiation lives entirely on border-left (--accent
   pushes green or red per modifier in the template). No colored glow. */
.leader-card-side {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.leader-card-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.leader-card-name {
    font-weight: 700;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leader-card-pct {
    font-family: var(--tr-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.01em;
}
.leader-card-pct.positive {
    color: var(--tr-positive);
}
.leader-card-pct.negative {
    color: var(--tr-negative);
}
.leader-card-sub {
    font-family: var(--tr-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--tr-muted);
    white-space: nowrap;
}
.leader-card-sub.positive { color: var(--tr-positive); opacity: 0.85; }
.leader-card-sub.negative { color: var(--tr-negative); opacity: 0.85; }

/* Today's PnL inline under the all-time PnL number on holdings table.
   Subtler than the headline number — same green/red but smaller, mono-
   spaced, and with a leading dash separator-feel. */
.today-pnl {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-family: var(--tr-font-mono);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.04);
}
.today-pnl.positive { color: var(--tr-positive); background: rgba(34, 197, 94, 0.08); }
.today-pnl.negative { color: var(--tr-negative); background: rgba(239, 68, 68, 0.08); }

/* Saxo InfoPrices drift indicator on saxo holdings */
.saxo-drift {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    font-family: var(--tr-font-mono);
    font-variant-numeric: tabular-nums;
}
.saxo-drift--ok    { background: #f3f4f6; color: #4b5563; }
.saxo-drift--warn  { background: #fef3c7; color: #92400e; }
.saxo-drift--alert { background: #fee2e2; color: #991b1b; }

/* Saxo SIM-overhead correction note in the saxo stat-cards */
.saxo-sim-correction {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px dashed rgba(96, 165, 250, 0.25);
    color: #93c5fd;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.saxo-sim-correction strong {
    color: #cbd5f5;
    font-family: var(--tr-font-mono);
}

/* Strike-through for rejected saxo trades — visually signals they don't count */
.reco-item--saxo-rejected {
    opacity: 0.55;
}
.reco-item--saxo-rejected strong,
.reco-item--saxo-rejected .reco-meta,
.reco-item--saxo-rejected .reco-rationale {
    text-decoration: line-through;
    text-decoration-color: rgba(153, 27, 27, 0.55);
    text-decoration-thickness: 1px;
}

/* ── Feed status ── */
.feed-status {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.feed-status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    font-size: 0.85em;
}

.feed-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.feed-status-dot--ok   { background: #22c55e; }
.feed-status-dot--warn { background: #f59e0b; }
.feed-status-dot--stale { background: #ef4444; }

.feed-status-name {
    font-weight: 600;
    white-space: nowrap;
}

.feed-status-ago {
    opacity: 0.7;
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.portfolio-feeds {
    margin: -0.5rem 0 1rem;
    padding: 0.5rem 0.9rem;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 6px;
    font-size: 0.9rem;
}

.portfolio-feeds summary {
    cursor: pointer;
    opacity: 0.8;
    font-weight: 500;
}

.portfolio-feeds summary:hover,
.portfolio-feeds summary:focus-visible {
    opacity: 1;
    outline: none;
}

.portfolio-feeds summary:focus-visible {
    text-decoration: underline;
}

.portfolio-feeds ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    opacity: 0.85;
}

.portfolio-feeds li {
    margin: 0.2rem 0;
}

.portfolio-feeds h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--tr-muted);
    margin: 0.5rem 0 0.25rem;
}

/* ── AI activity ticker — traderbros marquee aesthetic ── */
.ai-ticker {
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--tr-line);
    border-bottom: 1px solid var(--tr-gold);
    border-radius: 0;
    background: #000;
    margin: 1rem -1rem 1.5rem;  /* full-bleed within container padding */
    padding: 0.6rem 0;
    position: relative;
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 40px,
        #000 calc(100% - 40px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 40px,
        #000 calc(100% - 40px),
        transparent 100%
    );
}

.ai-ticker-track {
    display: inline-flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: ai-ticker-scroll 90s linear infinite;
    will-change: transform;
    padding-left: 2.5rem;
}

.ai-ticker:hover .ai-ticker-track {
    animation-play-state: paused;
}

@keyframes ai-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ai-ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.1rem 0.75rem;
    border-left: 2px solid rgba(212, 175, 55, 0.3);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--tr-fg);
}

.ai-ticker-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tr-gold);
    font-size: 0.95em;
}

.ai-ticker-time {
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    font-size: 0.92em;
    color: var(--tr-muted);
}

.ai-ticker-kind {
    color: var(--tr-muted);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.ai-ticker-text {
    opacity: 0.95;
    color: var(--tr-fg);
}

@media (max-width: 600px) {
    .ai-ticker-kind { display: none; }
    .ai-ticker-text { max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
    /* Mobil: kortere animation (60s vs 90s desktop) — undgår
       iOS-Safari GPU-layer-issues på meget brede transformed elementer.
       will-change fjernes også for at undgå tiling-bugs ved >8192px wide tracks. */
    .ai-ticker-track {
        animation-duration: 60s;
        will-change: auto;
    }
    /* Tablet/mobil: 2 kolonner (4 lanes á 2 tabs) — undgår at en
       lang label som "Ugilt Diamond Hands" presser layoutet. */
    .pf-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }
    .pf-tab {
        padding: 0.5rem 0.6rem;
        font-size: 0.7rem;
        min-width: 0;
    }
    .pf-tab-name { letter-spacing: 0.12em; }
}

/* Meget små skærme (iPhone SE etc.): skjul dagens-PnL parens. */
@media (max-width: 400px) {
    .pf-tab-today-pnl { display: none; }
    .pf-tab { padding: 0.4rem 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-ticker-track { animation: none; }
    .ai-ticker { overflow-x: auto; }
    .pf-panel { animation: none; }
}

/* ── Live agent thoughts feed ── */
.thoughts-feed {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.thoughts-empty {
    opacity: 0.6;
    font-style: italic;
    padding: 1rem 0;
}

.thought-item {
    border-left: 3px solid var(--pico-muted-border-color);
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    font-size: 0.88em;
}

.thought-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    margin-bottom: 0.3rem;
    font-size: 0.8em;
    opacity: 0.85;
}

.thought-type {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.thought-time {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.thought-model {
    opacity: 0.6;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.9em;
}

.thought-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
}

.thought-tickers {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ticker-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.78em;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* Color-code by thought type */
.thought-research     { border-left-color: #60a5fa; }
.thought-trade_pre    { border-left-color: #22c55e; }
.thought-trade_post   { border-left-color: #9ca3af; }
.thought-hold         { border-left-color: #eab308; }
.thought-claude_review{ border-left-color: #a855f7; }
.thought-claude_trade { border-left-color: #c026d3; }

.thought-research     .thought-type { color: #60a5fa; }
.thought-trade_pre    .thought-type { color: #22c55e; }
.thought-trade_post   .thought-type { color: #9ca3af; }
.thought-hold         .thought-type { color: #eab308; }
.thought-claude_review.thought-type,
.thought-claude_review .thought-type { color: #a855f7; }
.thought-claude_trade.thought-type,
.thought-claude_trade .thought-type { color: #c026d3; }

@media (max-width: 600px) {
    .thoughts-feed { max-height: 220px; }
    .thought-head { gap: 0.35rem 0.6rem; }
    .thought-model { display: none; }
}

/* ──────────────────────────────────────────────────────────────
   Top nav, section headers, feedanalyse tabs — traderbros polish
   ────────────────────────────────────────────────────────────── */

/* Brand wordmark — TRADER + ROBOT with gold accent on the second word.
   Mirrors the traderbros 'TRADER BROS' lockup. */
.tr-brand {
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 1.1rem;
}
/* The wordmark links home — keep it looking like the brand, not a link. */
.tr-brand-link {
    text-decoration: none;
    color: var(--fg-primary);
    display: inline-block;
}
.tr-brand-link:hover,
.tr-brand-link:focus-visible {
    text-decoration: none;
    opacity: 0.85;
}
.tr-brand-accent {
    background: linear-gradient(135deg, var(--tr-gold) 0%, var(--tr-gold-bright) 50%, var(--tr-gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 0.15rem;
}

/* Top-nav: spread the link items apart with a subtle gold-tinted
   pipe between each pair, so the menu reads as a list of distinct
   sections rather than a run-on of words. */
.tr-nav ul:last-child {
    gap: 0;
}
.tr-nav ul:last-child > li {
    padding: 0 0.95rem;
    position: relative;
}
.tr-nav ul:last-child > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(212, 175, 55, 0.25);
}
.tr-nav ul:last-child > li:last-child {
    padding-right: 0;
}

/* Top-nav links: monospace small caps with gold underline on hover/active. */
.tr-nav-link {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tr-muted);
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0;
    transition: color 0.2s, border-color 0.2s;
}
.tr-nav-link:hover {
    color: var(--tr-fg);
    text-decoration: none;
}
.tr-nav-link.tr-active,
.tr-nav-link:focus {
    color: var(--tr-gold);
    border-bottom-color: var(--tr-gold);
}

/* Hamburger-button til mobile — skjult på desktop. */
.tr-nav-burger-li { display: none; }
.tr-nav-burger {
    cursor: pointer;
    color: var(--tr-muted);
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.tr-nav-burger:hover,
.tr-nav-burger:focus-visible {
    color: var(--tr-gold);
    background: rgba(212, 175, 55, 0.08);
    outline: none;
}
/* Når menuen er åben — krydsanimation af bars. */
.tr-nav-toggle-cb:checked ~ ul .tr-nav-burger .tr-bar-1 {
    transform: translateY(6px) rotate(45deg);
    transform-origin: center;
}
.tr-nav-toggle-cb:checked ~ ul .tr-nav-burger .tr-bar-2 { opacity: 0; }
.tr-nav-toggle-cb:checked ~ ul .tr-nav-burger .tr-bar-3 {
    transform: translateY(-6px) rotate(-45deg);
    transform-origin: center;
}
.tr-bar {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Mobile (≤700px): brand+hamburger på top-rækken, links som drawer der
   åbner vertikalt nedenunder ved tryk på hamburger. */
@media (max-width: 700px) {
    .tr-nav {
        flex-wrap: wrap;
    }
    .tr-nav ul:first-of-type {
        flex: 1 1 100%;
        justify-content: space-between;
        align-items: center;
    }
    .tr-nav-burger-li {
        display: inline-flex;
        padding: 0 !important;
    }
    .tr-nav-burger-li::before { display: none !important; }

    /* Drawer: skjult som default, vises når input er checked. */
    .tr-nav-links {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0 !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.28s ease;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tr-nav-toggle-cb:checked ~ .tr-nav-links {
        max-height: 480px;  /* generøst til 6 items + padding */
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(212, 175, 55, 0.15);
        margin-top: 0.5rem !important;
    }
    .tr-nav-links > li {
        padding: 0 !important;
        width: 100%;
    }
    .tr-nav-links > li + li::before { display: none !important; }
    .tr-nav-links .tr-nav-link {
        display: block;
        padding: 0.85rem 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        font-size: 0.78rem;
    }
    .tr-nav-links > li:last-child .tr-nav-link {
        border-bottom: none !important;
    }
}

/* Tighten the main h2 styling to match the traderbros heading rhythm —
   slightly negative letter-spacing, weight 800, sentence case where
   the template uses it but uppercase utility available via .tr-upper. */
main h2 {
    font-weight: 800;
    letter-spacing: -0.01em;
}
.tr-upper { text-transform: uppercase; letter-spacing: 0.02em; }

/* Feedanalyse tabs alignment with portfolio tabs — same monospace
   small caps + gold underline aesthetic, fewer chrome decorations. */
.fa-tab {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: var(--tr-muted) !important;
    padding: 0.85rem 1rem !important;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.18em !important;
    border-radius: 0 !important;
    transition: color 0.2s, border-color 0.2s;
}
.fa-tab:hover {
    background: transparent !important;
    color: var(--tr-fg) !important;
}
.fa-tab--active {
    color: var(--tr-gold) !important;
    border-bottom-color: var(--tr-gold) !important;
    background: transparent !important;
}
.fa-tab-count {
    color: var(--tr-muted) !important;
    font-size: 0.85em;
    margin-left: 0.3rem;
    letter-spacing: 0.05em;
}

/* htmx request-in-flight indicator — wired via base.html's
   `htmx.config.requestClass = 'is-loading'`. Applied to the element that
   issued the request for the duration of the swap, then removed. */
.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Porteføljeråd advice-cards (ADV-008) ──
   Synthesis-engine output (rules → PortfolioAdvice cards) rendered on
   /anbefalinger between market-overview and holdings. Severity styling
   uses a 4px left-border accent: info=grey muted, warn=gold (--tr-gold),
   action=red (--tr-negative). Body is clamped to ~2 lines on the card
   header so a row of cards stays compact. Chips render the rule's
   suggested_trades but are NOT clickable in v1 — title-tooltip hints at
   the future drafts integration. */
.advice-section {
    margin-bottom: 1rem;
}
.advice-section__title {
    font-size: var(--tr-step-1);
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}
.advice-card {
    background: var(--tr-bg-2);
    border: 1px solid var(--tr-line);
    border-left: 4px solid var(--tr-muted);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
}
.advice-card__title {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 700;
}
.advice-card__body {
    margin: 0;
    color: var(--tr-fg);
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.advice-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.advice-card--info {
    border-left-color: var(--tr-muted);
}
.advice-card--warn {
    border-left-color: var(--tr-gold);
}
.advice-card--action {
    border-left-color: var(--tr-negative);
}
.advice-chip {
    display: inline-block;
    background: rgba(212, 175, 55, 0.08);
    color: var(--tr-fg);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    cursor: default;
    user-select: none;
}

/* Mobile (<= 390px iPhone SE width): full-width stack — cards already
   stack vertically, but tighten the side-padding so chips have more
   room before wrapping. */
@media (max-width: 390px) {
    .advice-card {
        padding: 0.6rem 0.75rem;
    }
    .advice-card__chips {
        gap: 0.25rem;
    }
}

/* ── Sub-theme allocation chart (ADV-011) ── */
.sub-theme-chart-card {
    background: var(--tr-bg-2);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}
.sub-theme-chart-canvas-wrap {
    position: relative;
    height: 320px;
    width: 100%;
}
.sub-theme-chart-empty {
    color: var(--tr-muted);
    font-style: italic;
    text-align: center;
    margin: 1rem 0 0;
}

/* ──────────────────────────────────────────────────────────────
   UX-009 — Pill-style top navigation with aria-current=page
   highlight. Layered *after* the legacy `.tr-nav-link` rules so
   `nav.tr-nav a` (specificity 0,1,2) wins the cascade and the new
   sans-serif pill treatment paints the links. The legacy block
   above stays intact so the mobile drawer (`.tr-nav-toggle-cb`,
   `.tr-nav-burger`, `.tr-nav-links` media query) keeps working.
   ────────────────────────────────────────────────────────────── */
nav.tr-nav {
    display: flex;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 16px;
}
nav.tr-nav a {
    padding: 8px 14px;
    border-radius: var(--r-sm);
    color: var(--fg-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}
nav.tr-nav a:hover {
    background: var(--bg-2);
    color: var(--fg-primary);
}
nav.tr-nav a[aria-current=page] {
    background: var(--bg-2);
    color: var(--fg-primary);
    border: 1px solid var(--border-default);
}

/* ──────────────────────────────────────────────────────────────
   UX-010 — Micro-details: focus-visible ring, smooth transitions,
   themed scrollbars and a global prefers-reduced-motion guard.

   These rules layer *after* every component block so the gold
   focus ring and the unified 120ms transition shape override
   anything earlier in the cascade. The existing UX-006/UX-009
   prefers-reduced-motion block (ticker, panel fade-in) is kept
   above; the new global guard collapses transitions and
   animations everywhere, so the two compose.
   ────────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

a,
button,
.pf-tab,
.pf-card,
input,
select {
    transition: background-color 120ms ease,
                border-color 120ms ease,
                color 120ms ease,
                transform 120ms ease;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Mad Videos page (daily reel + gallery) ────────────────────────────────
   Sheikh Sørenzo reels, styled in the dashboard's panel language: bg-1
   panels, subtle borders, gold accent, mono dates, hover-lift cards. */
.daily-video,
.video-gallery {
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    margin: 24px 0;
}
.daily-video-header,
.video-gallery-header {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0;
    letter-spacing: 0.01em;
}
.daily-video-header::after,
.video-gallery-header::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    margin-top: 8px;
}

.daily-video-frame {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.daily-video-player {
    aspect-ratio: 4 / 5;
    max-height: 72vh;
    width: auto;
    background: #000;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    cursor: pointer;
}
.daily-video-caption {
    margin: 16px 0 0;
    font-size: var(--fs-sm);
    color: var(--fg-secondary);
    text-align: center;
}
.daily-video-empty,
.video-gallery-empty {
    margin: 16px 0 0;
    color: var(--fg-muted);
    font-size: var(--fs-sm);
}

.video-gallery-grid {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.video-gallery-item {
    margin: 0;
    background: var(--bg-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.video-gallery-item:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-2);
}
.video-gallery-player {
    aspect-ratio: 4 / 5;
    width: 100%;
    display: block;
    background: #000;
    cursor: pointer;
}
.video-gallery-caption {
    padding: 9px 11px 11px;
    font-size: var(--fs-xs);
    line-height: 1.4;
}

/* gold mono date used on both the reel caption and gallery cards */
.video-date {
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: 600;
}
.video-headline {
    color: var(--fg-muted);
}