/* Desktop portfolio summary — asymmetric hero (value + gain/loss + sparkline) beside compact stat
   chips. Tokens-only; rendered by Components/Desktop/PortfolioSummaryBar.razor. */
.pf {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 12px;
    flex: 0 0 auto;
    align-items: stretch;
    width: 100%;
}
.pf-tiles {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 12px;
    min-width: 0;
}

.pf-hero {
    position: relative; overflow: hidden;
    background: var(--fn-bg-alt);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    padding: 16px 22px 18px;
    flex: 1;
}
.pf-hero .pf-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fn-text-tertiary); }
.pf-hero .pf-big { font-size: 38px; font-weight: 800; font-family: ui-monospace, monospace; letter-spacing: 0; margin-top: 2px; }
.pf-hero .pf-gv { display: flex; align-items: baseline; gap: 10px; margin-top: 5px; font-family: ui-monospace, monospace; }
.pf-hero .pf-gv .v { font-size: 19px; font-weight: 700; }
.pf-hero .pf-gv .p { font-size: 14px; font-weight: 600; }
.pf-hero .pf-subline { font-size: 12px; color: var(--fn-text-secondary); margin-top: 3px; }

.pf-hero .pf-spark { position: absolute; right: 18px; bottom: 12px; width: 230px; height: 58px; max-width: 46%; }
.pf-spark .line { fill: none; stroke: var(--fn-success); stroke-width: 2; }
.pf-spark .area { fill: var(--fn-success-soft); stroke: none; }
.pf-spark.pf-down .line { stroke: var(--fn-danger); }
.pf-spark.pf-down .area { fill: var(--fn-danger-soft); }

.pf-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf-chip {
    display: flex; align-items: center; gap: 13px; min-width: 0;
    background: var(--fn-bg-alt);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    padding: 12px 16px;
}
.pf-chip .pf-ic {
    flex: 0 0 38px; height: 38px; border-radius: var(--fn-radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--fn-bg-muted); color: var(--fn-text-secondary);
}
.pf-chip .pf-ic svg { width: 20px; height: 20px; }
.pf-chip.crown .pf-ic { background: var(--fn-warning-soft); color: var(--fn-warning); }
.pf-chip.best .pf-ic { background: var(--fn-success-soft); color: var(--fn-success); }

.pf-chip .pf-meta { min-width: 0; }
.pf-chip .pf-lab { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fn-text-tertiary); }
.pf-chip .pf-val { font-size: 18px; font-weight: 700; font-family: ui-monospace, monospace; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-chip .pf-vs { font-size: 11px; color: var(--fn-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-chip.best .pf-val { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; }
.pf-chip.best .pf-val.pf-best { color: var(--fn-success); }

/* Beste Performer — top-3 list (header + ranked entries, vertically centred). */
.pf-ic.best { background: var(--fn-success-soft); color: var(--fn-success); }
.pf-chip.best-multi { flex-direction: column; align-items: stretch; gap: 6px; flex: 1; padding: 12px 16px; }
.pf-bp-head { display: flex; align-items: center; gap: 13px; }
.pf-bp-list { display: flex; flex-direction: column; flex: 1; justify-content: center; gap: 7px; }
.pf-bp-section { min-width: 0; }
.pf-bp-title {
    padding: 0 0 4px 26px;
    color: var(--fn-text-tertiary);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pf-bp-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: var(--fn-border-width) solid var(--fn-border); }
.pf-bp-section .pf-bp-item:first-of-type { padding-top: 5px; }
.pf-bp-rank { flex: 0 0 16px; text-align: center; font-family: ui-monospace, monospace; font-size: 12px; color: var(--fn-text-tertiary); }
.pf-bp-main { min-width: 0; flex: 1; }
.pf-bp-name { min-width: 0; overflow: hidden; }
.pf-bp-name .fn-stack { gap: 0; }
.pf-bp-name .fn-name { color: var(--fn-success); font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bp-name .sec-ids { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bp-row { display: flex; align-items: center; gap: 9px; margin-top: 2px; flex-wrap: wrap; }
.pf-bp-pct { font-size: 11px; font-family: ui-monospace, monospace; }
.pf-bp-eur { font-size: 11px; font-family: ui-monospace, monospace; font-weight: 650; }
.pf-tend { display: inline-flex; align-items: center; gap: 1px; }
.pf-tend svg { width: 11px; height: 11px; }
.pf-tend.up { color: var(--fn-success); }
.pf-tend.down { color: var(--fn-danger); }
.pf-bp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--fn-text-tertiary);
    font-size: 12px;
    text-align: center;
}

.pf-up { color: var(--fn-success); }
.pf-down { color: var(--fn-danger); }

/* Markt-Stimmung — own right column, matching the accepted preview without fake values. */
.pf-mood {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--fn-bg-alt);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    padding: 14px 18px;
}
.pf-mood-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pf-mood-pill {
    flex: 0 0 auto;
    border-radius: var(--fn-radius-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: var(--fn-font-weight-bold);
}
.pf-mood-pill.extreme-fear,
.pf-mood-pill.fear { color: var(--fn-danger); background: var(--fn-danger-soft); }
.pf-mood-pill.neutral { color: var(--fn-warning); background: var(--fn-warning-soft); }
.pf-mood-pill.greed,
.pf-mood-pill.extreme-greed { color: var(--fn-success); background: var(--fn-success-soft); }
.pf-mood-pill.no-data { color: var(--fn-text-secondary); background: var(--fn-bg-muted); }

.pf-gauge { text-align: center; margin-top: 4px; }
.pf-gauge svg {
    display: block;
    width: min(100%, 260px);
    height: auto;
    margin: 0 auto;
}
.pf-gauge .z {
    fill: none;
    stroke-width: 18;
    stroke-linecap: butt;
}
.pf-gauge .extreme-fear,
.pf-mood-legend .extreme-fear,
.pf-factor .extreme-fear { stroke: var(--fn-danger); background: var(--fn-danger); }
.pf-gauge .fear,
.pf-mood-legend .fear,
.pf-factor .fear { stroke: var(--fn-cat-orange); background: var(--fn-cat-orange); }
.pf-gauge .neutral,
.pf-mood-legend .neutral,
.pf-factor .neutral { stroke: var(--fn-warning); background: var(--fn-warning); }
.pf-gauge .greed,
.pf-mood-legend .greed,
.pf-factor .greed { stroke: var(--fn-rpo-noncurrent); background: var(--fn-rpo-noncurrent); }
.pf-gauge .extreme-greed,
.pf-mood-legend .extreme-greed,
.pf-factor .extreme-greed { stroke: var(--fn-success); background: var(--fn-success); }
.pf-factor .extreme-fear { background: color-mix(in srgb, var(--fn-danger) 72%, var(--fn-bg-muted)); }
.pf-factor .fear { background: color-mix(in srgb, var(--fn-cat-orange) 72%, var(--fn-bg-muted)); }
.pf-factor .neutral { background: color-mix(in srgb, var(--fn-warning) 72%, var(--fn-bg-muted)); }
.pf-factor .greed { background: color-mix(in srgb, var(--fn-rpo-noncurrent) 72%, var(--fn-bg-muted)); }
.pf-factor .extreme-greed { background: color-mix(in srgb, var(--fn-success) 72%, var(--fn-bg-muted)); }
.pf-gauge .needle line {
    stroke: var(--fn-text);
    stroke-width: 3.5;
    stroke-linecap: round;
}
.pf-gauge .hub { fill: var(--fn-text); }
.pf-gauge .edge {
    fill: var(--fn-text-tertiary);
    font-size: 11px;
    font-family: ui-monospace, monospace;
}
.pf-gauge-value {
    margin-top: -6px;
    font-family: ui-monospace, monospace;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}
.pf-gauge-sub {
    margin-top: 3px;
    color: var(--fn-text-secondary);
    font-size: 11px;
}
.pf-mood-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
    color: var(--fn-text-secondary);
}
.pf-mood-empty i { color: var(--fn-info); }
.pf-mood-empty svg { width: 24px; height: 24px; }
.pf-mood-empty b,
.pf-mood-empty span { display: block; }
.pf-mood-empty b { color: var(--fn-text); font-size: 13px; }
.pf-mood-empty span { font-size: 11.5px; }

.pf-factors {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
}
.pf-factor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}
.pf-factor .fl {
    flex: 0 0 196px;
    color: var(--fn-text-secondary);
    font-size: 12px;
}
.pf-factor .track {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: var(--fn-radius-pill);
    background: var(--fn-bg-muted);
}
.pf-factor .track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.pf-factor .track > span.no-data { background: transparent; }
.pf-factor .fv {
    width: 26px;
    text-align: right;
    color: var(--fn-text);
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.pf-mood-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: var(--fn-text-tertiary);
    font-size: 10.5px;
}
.pf-mood-legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 2px;
    vertical-align: -1px;
}

/* --- Privacy mode: a "Privat" eye-toggle blurs the money values so bystanders can't read them
   during a demo. State lives on html.fn-desktop-private (window.fnPrivacy in shell-nav.js, applied
   pre-paint by the App.razor head guard). Only fields marked .pf-secret are hidden; labels stay. */
.pf-privacy {
    position: absolute; top: 12px; right: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px;
    height: 24px; padding: 0 10px 0 9px;
    font-size: 10.5px; font-weight: var(--fn-font-weight-medium); letter-spacing: 0;
    color: var(--fn-text-secondary);
    background: var(--fn-bg-muted);
    border: var(--fn-border-width) solid var(--fn-border-strong);
    border-radius: var(--fn-radius-pill);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.pf-privacy:hover { color: var(--fn-text); border-color: var(--fn-info); }
.pf-privacy:focus-visible { outline: none; box-shadow: var(--fn-focus-ring); }
.pf-privacy svg { width: 13px; height: 13px; }
.pf-privacy .pf-pv-eyeoff, .pf-privacy .pf-pv-t2 { display: none; }

html.fn-desktop-private .pf-privacy {
    color: var(--fn-info); border-color: var(--fn-info); background: var(--fn-info-soft);
}
html.fn-desktop-private .pf-privacy .pf-pv-eye,
html.fn-desktop-private .pf-privacy .pf-pv-t1 { display: none; }
html.fn-desktop-private .pf-privacy .pf-pv-eyeoff { display: inline-block; }
html.fn-desktop-private .pf-privacy .pf-pv-t2 { display: inline; }

.pf-secret { transition: filter .18s ease; }
html.fn-desktop-private .pf-secret { filter: blur(8px); user-select: none; pointer-events: none; }
html.fn-desktop-private .pf-spark { filter: blur(7px); opacity: .7; }

@media (max-width: 920px) {
    .pf { grid-template-columns: 1fr; }
    .pf-tiles { grid-template-columns: 1fr; }
    .pf-factor .fl { flex-basis: 150px; }
}

@media (max-width: 1240px) and (min-width: 921px) {
    .pf { grid-template-columns: 1fr; }
}