/* =========================================================
   LIVE PERFORMANCE section of the homepage (performance.js).
   Its own file, loaded after styles.css. Colors come from the
   same theme variables as the rest of the page, so the theme
   picker changes this section too.
========================================================= */

.perf-top {
    display: grid;
    grid-template-columns: minmax(260px, 1.05fr) 2fr;
    gap: 18px;
    align-items: stretch;
}

/* ---- the one big number ---- */
.perf-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 24px;
    border: 1px solid rgba(var(--green-rgb), .35);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(var(--green-rgb), .10), rgba(var(--green-rgb), .02) 60%);
}

.perf-label {
    display: block;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .2px;
}

.perf-hero-value {
    display: block;
    margin: 8px 0 6px;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

.perf-hero small,
.perf-tile small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.perf-hero small strong,
.perf-tile small strong {
    color: var(--text);
    font-weight: 600;
}

/* ---- two supporting figures ---- */
.perf-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.perf-tile {
    padding: 16px 16px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.perf-tile-value {
    display: block;
    margin: 8px 0 6px;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

/* Realized profit is green wherever it appears, like the columns of the
   month chart; a month that closed with a loss is the chart's red. The
   sign in front of the figure says the same, so color is never alone. */
.perf-hero-value.is-up,
.perf-tile-value.is-up {
    color: var(--green);
}

.perf-hero-value.is-down,
.perf-tile-value.is-down {
    color: #d6455a;
}

/* ---- the two charts side by side, the sales list under them ---- */
.perf-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.perf-sales {
    margin-top: 18px;
}

.perf-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.perf-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted);
}

.perf-panel-title span {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.perf-chart-title {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

/* chart 1: one column per month. Both charts take whatever height their
   panel has, so the two line up; performance.js draws them at that size. */
.perf-chart {
    display: block;
    flex: 1 1 230px;
    width: 100%;
    min-height: 230px;
    overflow: visible;
}

.perf-chart .axis {
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 1;
}

.perf-chart .bar {
    fill: var(--green);
}

.perf-chart .bar.in-progress {
    fill-opacity: .55;
}

.perf-chart .bar.negative {
    fill: #d6455a;
}

.perf-chart .value {
    fill: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}

.perf-chart .amount {
    fill: var(--muted);
    font-size: 11px;
    text-anchor: middle;
}

.perf-chart .tick {
    fill: var(--muted);
    font-size: 11px;
    text-anchor: middle;
}

.perf-chart .tick.future {
    fill-opacity: .45;
}

.perf-chart .hit {
    fill: transparent;
    cursor: default;
}

/* the readout that follows the pointer on a chart */
.perf-chart-tip {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -100%);
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(var(--black-2-rgb), .96);
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

.perf-caption {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

/* closed trades */
.perf-trades {
    list-style: none;
    margin: 0;
    padding: 0;
}

.perf-trade {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.perf-trade:first-child {
    border-top: 0;
    padding-top: 2px;
}

.perf-sales .perf-trades {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
}

/* the whole first line of rows has no rule above it */
.perf-sales .perf-trade:nth-child(-n+3) {
    border-top: 0;
    padding-top: 2px;
}

.perf-trade-coin {
    grid-row: span 2;
    align-self: center;
    padding: 6px 0;
    border: 1px solid rgba(var(--gold-rgb), .35);
    border-radius: 8px;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-align: center;
}

.perf-trade-result {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* the color sits on a small mark beside the words, not on the words */
.perf-trade-result::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid var(--green);
}

.perf-trade-result.down::before {
    border-bottom: 0;
    border-top: 7px solid #d6455a;
}

.perf-trade-detail,
.perf-trade-when {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.perf-trade-detail {
    overflow: hidden;
    text-overflow: ellipsis;
}

.perf-trade-when {
    justify-self: end;
}

.perf-trade.is-new {
    animation: perf-trade-in .9s ease-out;
}

@keyframes perf-trade-in {
    from {
        background: rgba(var(--green-rgb), .16);
    }

    to {
        background: transparent;
    }
}

.perf-trades-caption {
    margin: 0;
    padding-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.perf-empty {
    padding: 26px 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.perf-note {
    margin: 16px 2px 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

/* ---- narrower screens ---- */
@media (max-width: 950px) {
    .perf-top,
    .perf-charts {
        grid-template-columns: 1fr;
    }

    .perf-sales .perf-trades {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perf-sales .perf-trade:nth-child(3) {
        border-top: 1px solid rgba(255, 255, 255, .06);
        padding-top: 9px;
    }
}

@media (max-width: 640px) {
    .perf-tiles {
        grid-template-columns: 1fr;
    }

    .perf-sales .perf-trades {
        grid-template-columns: 1fr;
    }

    .perf-sales .perf-trade:nth-child(2) {
        border-top: 1px solid rgba(255, 255, 255, .06);
        padding-top: 9px;
    }

    .perf-hero-value {
        font-size: 30px;
    }

    .perf-tile {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: 2px 12px;
    }

    .perf-tile .perf-label {
        grid-column: 1;
    }

    .perf-tile-value {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 22px;
    }

    .perf-tile small {
        grid-column: 1 / -1;
    }

}

@media (prefers-reduced-motion: reduce) {
    .perf-trade.is-new {
        animation: none;
    }
}

/* =========================================================
   One real account (2026-10-10).
========================================================= */
.perf-lede {
    max-width: 78ch;
    margin: 0 2px 18px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.55;
}

/* chart 2: the account's value, day by day */
.perf-story-chart {
    display: block;
    flex: 1 1 230px;
    width: 100%;
    min-height: 230px;
    overflow: visible;
    outline: none;
    touch-action: pan-y;
}

.perf-story-chart:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
    border-radius: 6px;
}

.perf-story-chart .grid {
    stroke: rgba(255, 255, 255, .07);
    stroke-width: 1;
}

.perf-story-chart .tick {
    fill: var(--muted);
    font-size: 11px;
}

.perf-story-chart .line-value {
    fill: none;
    stroke: var(--gold-light);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* the dot carries a ring in the panel's color so it stays readable on the line */
.perf-story-chart .dot {
    stroke: rgb(var(--panel-2-rgb));
    stroke-width: 2;
}

.perf-story-chart .dot-value {
    fill: var(--gold-light);
}

.perf-story-chart .end-label {
    fill: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.perf-story-chart .crosshair {
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 1;
}

.perf-story-tip {
    padding: 7px 11px;
    line-height: 1.4;
    text-align: center;
}

.perf-story-tip .tip-day {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.perf-story-tip strong {
    font-size: 13px;
    font-weight: 700;
}

/* the same figures without the chart */
.perf-table {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.perf-table summary {
    width: fit-content;
    cursor: pointer;
}

.perf-table summary:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
    border-radius: 4px;
}

.perf-table-scroll {
    max-height: 260px;
    margin-top: 8px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
}

.perf-table table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.perf-table th,
.perf-table td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    text-align: right;
    white-space: nowrap;
}

.perf-table th:first-child,
.perf-table td:first-child {
    text-align: left;
}

.perf-table th {
    position: sticky;
    top: 0;
    background: rgb(var(--panel-2-rgb));
    color: var(--text);
    font-weight: 700;
}

.perf-table td {
    color: var(--text);
}

@media (max-width: 640px) {
    .perf-lede {
        font-size: 15px;
    }
}