/* ═══════════════════════════════════════════════
   Stadium patch — Portfolio screen (loaded after app.css)
   A bet = a ticket on one precise match: perforated ticket
   cards (pending), day-grouped settled timeline, capsule
   stats, ink-framed bankroll hero, sketched-ticket empty
   state, CSV export pill. Tokens only (light AND dark).
   ═══════════════════════════════════════════════ */

/* ── Mono eyebrow (Stadium label) ── */
.pf-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Bankroll hero: 2px ink frame capsule ── */
.pf-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    min-height: 132px;
    padding: 16px 20px 15px;
    border: 2px solid var(--text);
    border-radius: 24px;
    background: var(--input-bg);
}
.pf-hero-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pf-hero-streak {
    margin-left: auto;
}
.pf-hero-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
}
.pf-hero-delta {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
}
.pf-hero-delta.is-up { color: var(--success); }
.pf-hero-delta.is-down { color: var(--fault); }
.pf-hero-value {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(2.1rem, 8vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
    text-align: right;
}
.pf-hero-value.is-up { color: var(--success); }
.pf-hero-value.is-down { color: var(--fault); }

/* ── Stats: capsule grid (2 cols mobile, 4 desktop) ── */
.pf-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 720px) {
    .pf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pf-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    min-height: 108px;
    padding: 15px 16px 13px;
    border-radius: 24px;
}
.pf-kpi::before { display: none; }
.pf-kpi-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.pf-kpi-head .pf-eyebrow { font-size: 11px; }
.pf-kpi-foot {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: auto;
}
.pf-kpi-value {
    display: block;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(1.45rem, 4.8vw, 1.9rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* ── Settings capsule (collapsible) ── */
.pf-settings {
    border-radius: 24px;
    padding: 16px 18px;
}
.pf-settings::before { display: none; }
.pf-settings-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    min-width: 0;
}
.pf-settings-summary::-webkit-details-marker { display: none; }
.pf-settings-value {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--text);
}
.pf-settings-chev {
    flex: 0 0 auto;
    color: var(--text3);
    transition: transform 0.18s ease;
}
.pf-settings[open] .pf-settings-chev { transform: rotate(180deg); }
.pf-settings-body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* ── P&L chart: 2px ink data frame ── */
.pf-chart-frame {
    border: 2px solid var(--text);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    overflow: hidden;
}
.pf-chart-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--text);
    background: var(--bg2);
}
.pf-chart-unit {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-ball);
    background: var(--ball);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.pf-chart-body {
    position: relative;
    height: 220px;
    padding: 14px 12px 10px;
}

/* ── Export: pill outline (ink), fills on hover ── */
.pf-export-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}
.pf-export-btn:hover {
    background: var(--text);
    color: var(--bg);
}
.pf-export-btn:disabled {
    opacity: 0.45;
    cursor: wait;
}
.pf-export-btn svg { flex: 0 0 auto; }

/* ═══════════════════════════════════════════════
   TICKETS — a bet is a ticket on one precise match
   ═══════════════════════════════════════════════ */

.pf-tickets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}
@media (min-width: 860px) {
    .pf-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pf-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 13px 16px 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--input-bg);
    overflow: hidden; /* clips the punched notches on the perforation */
}

/* Top strip: ticket ref + date (mono) / tag + status pills */
.pf-tk-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.pf-tk-ref {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text2);
    white-space: nowrap;
}
.pf-tk-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text3);
    white-space: nowrap;
}
.pf-tk-top-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tier tag pill: outline, surface-coded (vip=clay, public=grass) */
.pf-tk-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pf-tk-tag-vip { color: var(--clay); }
.pf-tk-tag-public { color: var(--grass); }
.pf-tk-tag-free { color: var(--text3); }

/* Status pill: outline, result-coded */
.pf-tk-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pf-tk-status-win { color: var(--success); }
.pf-tk-status-loss { color: var(--fault); }
.pf-tk-status-void { color: var(--text3); }
.pf-tk-status-pending {
    color: var(--text2);
    border-color: var(--control-border);
}
.pf-tk-status-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ball);
    box-shadow: 0 0 0 1px var(--ball-border);
    animation: pfPendingPulse 2.2s ease-in-out infinite;
}
@keyframes pfPendingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Match block: the two players of THIS match, mirrored around VS */
.pf-tk-match {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0 3px;
    min-width: 0;
}
.pf-tk-match-flat { padding: 12px 0 4px; }
.pf-tk-player {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pf-tk-player:last-child {
    flex-direction: row-reverse;
    text-align: right;
}
.pf-tk-player:last-child .pf-tk-player-copy { align-items: flex-end; }
.pf-tk-avatar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg2);
    overflow: hidden;
}
.pf-tk-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pf-tk-avatar.is-fallback::after {
    content: attr(data-initials);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text3);
}
.pf-tk-player.is-pick .pf-tk-avatar {
    border-color: var(--ball-border);
    box-shadow: 0 0 0 2px var(--ball);
}
.pf-tk-player-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.pf-tk-player-name {
    max-width: 100%;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.2;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-tk-player-sub {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
}
/* Lime chip on the picked side: ink text on ball (AA-safe) */
.pf-tk-player.is-pick .pf-tk-player-sub {
    padding: 1px 7px;
    border: 1px solid var(--ball-border);
    border-radius: var(--radius-pill);
    background: var(--ball);
    color: var(--text-on-ball);
}
.pf-tk-vs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text3);
}

/* Context line: surface dot OF THIS MATCH + tournament */
.pf-tk-context {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0 12px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
    min-width: 0;
}
.pf-tk-context > span:not(.pf-surface-dot):not(.pf-tk-context-sep) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-tk-context-sep { flex: 0 0 auto; }
.pf-surface-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.pf-dot-hard { background: var(--hard); }
.pf-dot-clay { background: var(--clay); }
.pf-dot-grass { background: var(--grass); }
.pf-dot-indoor { background: var(--ace); }

/* Perforation: dashed hairline + punched side notches */
.pf-tk-perf {
    position: relative;
    margin: 0 -16px;
    border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
}
.pf-tk-perf::before,
.pf-tk-perf::after {
    content: '';
    position: absolute;
    top: -8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
}
.pf-tk-perf::before { left: -8px; }
.pf-tk-perf::after { right: -8px; }

/* Stub: selection + numbers, mono tabular */
.pf-tk-stub {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 18px;
    flex-wrap: wrap;
    margin: 0 -16px;
    padding: 12px 16px 14px;
    background: var(--control-bg);
}
.pf-stub-sel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pf-stub-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
}
.pf-stub-sel-name {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 680;
    line-height: 1.15;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-stub-nums {
    display: flex;
    gap: 16px;
    margin-left: auto;
}
.pf-stub-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.pf-stub-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}
.pf-pnl-pos { color: var(--success); }
.pf-pnl-neg { color: var(--fault); }

/* Actions row continues the stub zone (pending tickets) */
.pf-tk-actions {
    margin: 0 -16px;
    padding: 0 16px 13px;
    background: var(--control-bg);
    text-align: right;
}
.pf-unfollow-btn {
    padding: 6px 14px;
    font-size: 0.6rem;
}

/* ═══════════════════════════════════════════════
   HISTORY — day-grouped timeline of settled tickets
   ═══════════════════════════════════════════════ */

.pf-timeline {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
}
.pf-day {
    position: relative;
    padding-left: 20px;
}
/* vertical rail linking day markers */
.pf-day::before {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 16px;
    bottom: -18px;
    width: 1px;
    background: var(--line);
}
.pf-day:last-child::before { display: none; }
.pf-day-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
}
.pf-day-marker {
    position: absolute;
    left: 0;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ball);
    box-shadow: 0 0 0 1px var(--ball-border);
}
.pf-day-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
}
.pf-day-count {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
}
.pf-day-pnl {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    white-space: nowrap;
}
.pf-day-rows {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    overflow: hidden;
}

/* Settled ticket row: W/L/V seal + match + numbers */
.pf-trow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    min-width: 0;
}
.pf-trow + .pf-trow { border-top: 1px solid var(--line); }
.pf-trow-result {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}
.pf-trow-result-win { color: var(--success); }
.pf-trow-result-loss { color: var(--fault); }
.pf-trow-result-void { color: var(--text3); }
.pf-trow-main {
    flex: 1;
    min-width: 0;
}
.pf-trow-match {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-trow-opp {
    color: var(--text3);
    font-weight: 500;
}
.pf-trow-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text3);
    min-width: 0;
}
.pf-trow-sub > span:not(.pf-surface-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-trow-odds {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--text2);
}
.pf-trow-nums {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.pf-trow-stake {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 600;
    color: var(--text3);
}
.pf-trow-pnl {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE — a sketched blank ticket (your next bet),
   meaningful and theme-aware, replaces the clay-court photo
   ═══════════════════════════════════════════════ */

.pf-empty {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--input-bg);
    padding: 30px 20px 28px;
    text-align: center;
}
.pf-empty-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(250px, 100%);
    margin: 0 auto 18px;
    padding: 13px 16px 0;
    border: 1px dashed rgba(var(--ink-rgb), 0.35);
    border-radius: 14px;
    background: var(--bg2);
    overflow: hidden;
}
.pf-empty-ticket-ref {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
    text-align: left;
}
.pf-empty-ticket-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pf-empty-ticket-rows span {
    height: 9px;
    border-radius: 5px;
    background: rgba(var(--ink-rgb), 0.1);
}
.pf-empty-ticket-rows span:first-child { width: 72%; }
.pf-empty-ticket-rows span:last-child { width: 46%; }
.pf-empty-ticket-perf {
    position: relative;
    margin: 3px -16px 0;
    border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
}
.pf-empty-ticket-perf::before,
.pf-empty-ticket-perf::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--input-bg);
    border: 1px dashed rgba(var(--ink-rgb), 0.35);
}
.pf-empty-ticket-perf::before { left: -7px; }
.pf-empty-ticket-perf::after { right: -7px; }
.pf-empty-ticket-stub {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 11px 16px 9px;
    background: var(--control-bg);
}
.pf-empty-ticket-stub span {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--ink-rgb), 0.1);
}
.pf-empty-ticket-label {
    margin: 0 -16px;
    padding: 0 16px 12px;
    background: var(--control-bg);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
}
.pf-empty-body {
    max-width: 380px;
    margin: 0 auto;
}
.pf-empty-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 680;
    line-height: 1.15;
    color: var(--text);
}
.pf-empty-hint {
    margin: 8px auto 0;
    max-width: 360px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text2);
}
.pf-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    min-height: 38px;
    padding: 0 20px;
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.pf-empty-cta:hover {
    background: var(--text);
    color: var(--bg);
}

/* ── Motion guard ── */
@media (prefers-reduced-motion: reduce) {
    .pf-settings-chev { transition: none; }
    .pf-tk-status-dot { animation: none; }
}

/* ── Mobile (PWA mobile-first, 390px ref) ── */
@media (max-width: 480px) {
    .pf-hero { min-height: 118px; padding: 14px 16px 13px; }
    .pf-kpi { min-height: 96px; padding: 13px 14px 11px; }
    .pf-chart-body { height: 180px; padding: 10px 8px 8px; }
    .pf-export-btn span { display: none; }
    .pf-export-btn { padding: 0 11px; }
    .pf-tk-avatar { width: 38px; height: 38px; }
    .pf-tk-player-name { font-size: 12.5px; }
    .pf-tk-vs { width: 22px; height: 22px; font-size: 8px; }
    .pf-stub-nums { gap: 13px; }
    .pf-stub-value { font-size: 13.5px; }
    .pf-trow { padding: 10px 11px; gap: 10px; }
    .pf-day { padding-left: 17px; }
}