/*
 * Picks & Shovels — terminal/editorial theme
 *
 * Design direction: Bloomberg-terminal ethos × editorial restraint.
 * Data-first, monospaced tabular figures, tight verticals, signal not
 * chrome. Layered ON TOP of DaisyUI (app.css) — only overrides what the
 * redesigned views need. Components we haven't redesigned fall back to
 * DaisyUI defaults.
 */

/* ---------- Fonts (self-hostable if you want; CDN for now) ---------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&display=swap');

/* ---------- Design tokens ---------- */
:root {
    --pns-bg:             oklch(0.14 0.01 260);
    --pns-surface:        oklch(0.17 0.01 260);
    --pns-surface-hi:     oklch(0.20 0.012 260);
    --pns-rule:           oklch(0.24 0.01 260);
    --pns-rule-strong:    oklch(0.30 0.012 260);

    --pns-ink:            oklch(0.95 0 0);
    --pns-ink-2:          oklch(0.75 0 0);
    --pns-ink-3:          oklch(0.55 0 0);
    --pns-ink-4:          oklch(0.40 0 0);

    --pns-bull:           oklch(0.72 0.17 145);
    --pns-bull-quiet:     oklch(0.42 0.10 145);
    --pns-bear:           oklch(0.66 0.22 25);
    --pns-bear-quiet:     oklch(0.40 0.13 25);
    --pns-gold:           oklch(0.86 0.15 80);
    --pns-gold-quiet:     oklch(0.55 0.10 80);
    --pns-amber:          oklch(0.78 0.14 70);

    --pns-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --pns-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;

    --pns-accent-width: 4px;
}

/* ---------- Base ------------------------------------------------- */
html[data-theme] body {
    background: var(--pns-bg);
    color: var(--pns-ink);
    font-family: var(--pns-mono);
    font-feature-settings: 'tnum', 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.pns-serif { font-family: var(--pns-serif); font-style: italic; font-weight: 400; }
.pns-tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* Section marquee — Fraunces italic, all-caps small */
.pns-marque {
    font-family: var(--pns-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--pns-ink-3);
}

/* ---------- Filter bar — hairline rules only, no box ------------- */
.pns-filterbar {
    background: var(--pns-bg);
    border-top: 1px solid var(--pns-rule);
    border-bottom: 1px solid var(--pns-rule);
    font-family: var(--pns-mono);
    font-size: 0.8125rem;
    padding: 10px 24px;
    color: var(--pns-ink-2);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(8px);
    background: color-mix(in oklch, var(--pns-bg) 92%, transparent);
}
.pns-filterbar label { color: var(--pns-ink-3); }
.pns-filterbar .pns-val { color: var(--pns-ink); font-weight: 500; }

/* Slider live-readout — boxed, high-contrast, gold-trimmed so the
 * value is always visible while dragging. Replaces the prior tiny
 * inline span that was too narrow / too dim to track. */
.pns-filterbar .pns-readout {
    display: inline-block;
    min-width: 3.5em;
    padding: 3px 10px;
    text-align: center;
    color: var(--pns-gold);
    background: color-mix(in oklch, var(--pns-gold) 12%, var(--pns-bg));
    border: 1px solid color-mix(in oklch, var(--pns-gold) 45%, transparent);
    font-family: var(--pns-mono);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.pns-filterbar input[type="range"] {
    accent-color: var(--pns-gold);
    background: transparent;
}
.pns-filterbar input[type="checkbox"] {
    accent-color: var(--pns-gold);
}
.pns-filterbar .pns-chip {
    border: 1px solid var(--pns-rule);
    color: var(--pns-ink-2);
    padding: 3px 10px;
    background: transparent;
    font-family: var(--pns-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    transition: border-color 0.15s, color 0.15s;
}
.pns-filterbar .pns-chip:hover { border-color: var(--pns-ink-3); color: var(--pns-ink); }
.pns-filterbar .pns-chip.is-active { border-color: var(--pns-gold); color: var(--pns-gold); }

/* ---------- Grid stats strip ------------------------------------- */
.pns-stats {
    font-family: var(--pns-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--pns-ink-3);
    padding: 6px 0;
}
.pns-stats strong { color: var(--pns-ink); font-weight: 600; }
.pns-stats .pns-cap-warn {
    color: var(--pns-amber);
    border-left: 1px solid var(--pns-amber);
    padding-left: 10px;
    margin-left: 4px;
}

/* ---------- Earnings-watch banner -------------------------------- */
.pns-earnings-bar {
    background: color-mix(in oklch, var(--pns-amber) 12%, var(--pns-bg));
    border-top: 1px solid var(--pns-amber);
    border-bottom: 1px solid var(--pns-amber);
    color: var(--pns-ink);
    padding: 10px 24px;
    font-family: var(--pns-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}
.pns-earnings-bar .pns-label {
    color: var(--pns-amber);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
    margin-right: 16px;
}
.pns-earnings-bar .pns-entry { color: var(--pns-ink); margin-right: 22px; }
.pns-earnings-bar .pns-entry strong { color: var(--pns-amber); }

/* ---------- TILE (the main event) -------------------------------- */
.pns-tile {
    position: relative;
    background: var(--pns-surface);
    border: 1px solid var(--pns-rule);
    border-left: none;
    padding: 18px 20px 16px 24px;
    font-family: var(--pns-mono);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    overflow: hidden;
}
.pns-tile:hover {
    background: var(--pns-surface-hi);
    border-color: var(--pns-rule-strong);
}

/* Left accent bar — encodes direction + grade */
.pns-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--pns-accent-width);
    background: var(--pns-accent, var(--pns-ink-4));
    transition: width 0.15s ease, background 0.15s;
}
.pns-tile:hover::before { width: calc(var(--pns-accent-width) + 4px); }

.pns-tile[data-dir="C"] { --pns-accent: var(--pns-bull); }
.pns-tile[data-dir="P"] { --pns-accent: var(--pns-bear); }
.pns-tile[data-grade="A+"] { --pns-accent: var(--pns-gold); }
.pns-tile[data-grade="A+"]::before {
    background: linear-gradient(
        180deg,
        var(--pns-gold) 0%,
        color-mix(in oklch, var(--pns-gold) 55%, transparent) 50%,
        var(--pns-gold) 100%
    );
    background-size: 100% 200%;
    animation: pns-shimmer 4.5s ease-in-out infinite;
}
@keyframes pns-shimmer {
    0%, 100% { background-position: 0 0%; }
    50%      { background-position: 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pns-tile[data-grade="A+"]::before { animation: none; }
}

/* ER diagonal tag — upper right corner */
.pns-tile-er {
    position: absolute;
    top: 12px; right: -34px;
    transform: rotate(30deg);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    font-weight: 600;
    padding: 2px 42px;
    color: var(--pns-bg);
    background: var(--pns-amber);
    box-shadow: 0 1px 0 color-mix(in oklch, var(--pns-amber) 40%, black);
}

/* Score + grade cluster */
.pns-tile-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 10px;
}
.pns-tile-score {
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pns-ink);
    line-height: 1;
}
.pns-tile-score .pns-score-frac { color: var(--pns-ink-3); font-weight: 500; }
.pns-tile-grade {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--pns-accent, var(--pns-ink-2));
    padding: 0 6px;
    border-bottom: 1px solid var(--pns-accent, var(--pns-ink-4));
}
.pns-tile-meta {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: baseline;
    color: var(--pns-ink-3);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}
.pns-tile-meta .pns-dte-urgent { color: var(--pns-amber); }

/* Freshness tick — replaces pulsing dot */
.pns-fresh-tick {
    width: 2px;
    height: 14px;
    background: var(--pns-fresh-color, var(--pns-ink-4));
    margin-right: 2px;
    display: inline-block;
    vertical-align: middle;
}
.pns-fresh-tick[data-freshness="hot"]  { --pns-fresh-color: var(--pns-bull); }
.pns-fresh-tick[data-freshness="warm"] { --pns-fresh-color: var(--pns-amber); }
.pns-fresh-tick[data-freshness="cool"] { --pns-fresh-color: var(--pns-bear); }
.pns-fresh-tick[data-freshness="stale"]{ --pns-fresh-color: var(--pns-ink-4); }
.pns-fresh-tick[data-freshness="hot"]::after {
    content: '';
    display: block;
    position: relative;
    left: -1px; top: -2px;
    width: 4px; height: 4px;
    background: var(--pns-bull);
    border-radius: 50%;
    animation: pns-pulse 1.8s ease-in-out infinite;
}
@keyframes pns-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* Ticker line */
.pns-tile-sym {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pns-ink);
    margin-bottom: 12px;
}
.pns-tile-sym .pns-strike { color: var(--pns-ink-2); font-weight: 500; }
.pns-tile-sym .pns-dir {
    font-size: 1.35rem;
    color: var(--pns-accent, var(--pns-ink-2));
    font-weight: 700;
}

/* Spot-price line — underlying vs. strike at a glance.
 * Sits directly beneath the symbol line; compact mono, color-coded by
 * moneyness: bull green (ITM), amber (ATM), muted ink (OTM). */
.pns-tile-spot {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--pns-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    margin-top: -6px;
    margin-bottom: 12px;
    color: var(--pns-ink-3);
}
.pns-tile-spot .pns-spot-px    { color: var(--pns-ink-2); font-weight: 500; }
.pns-tile-spot .pns-spot-sep   { color: var(--pns-ink-4); }
.pns-tile-spot .pns-spot-tag {
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0 4px;
    border-radius: 2px;
    border: 1px solid currentColor;
    font-size: 0.65rem;
}
.pns-tile-spot .pns-spot-pct   { font-weight: 600; }
.pns-tile-spot .pns-spot-delta { color: var(--pns-ink-3); opacity: 0.85; }

/* ITM — bull green (already profitable if exercised) */
.pns-tile-spot[data-moneyness="ITM"] { color: var(--pns-bull); }
.pns-tile-spot[data-moneyness="ITM"] .pns-spot-delta { color: var(--pns-bull-quiet); }

/* ATM — amber (within 0.5% of strike, knife-edge) */
.pns-tile-spot[data-moneyness="ATM"] { color: var(--pns-amber); }
.pns-tile-spot[data-moneyness="ATM"] .pns-spot-delta { color: var(--pns-amber); opacity: 0.7; }

/* OTM — muted ink (stock still needs to move) */
.pns-tile-spot[data-moneyness="OTM"] { color: var(--pns-ink-3); }
.pns-tile-spot[data-moneyness="OTM"] .pns-spot-pct { color: var(--pns-ink-2); }

/* Action summary — plain prose with inline quantitative spans */
.pns-tile-summary {
    font-size: 0.8125rem;
    color: var(--pns-ink-2);
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}
.pns-tile-summary .pns-px { color: var(--pns-ink); font-weight: 500; }
.pns-tile-summary .pns-stop { color: var(--pns-bear); }
.pns-tile-summary .pns-target { color: var(--pns-bull); }

/* Horizontal R:R bar — red half = risk, green half = reward, width encodes R:R */
.pns-rr-bar {
    position: relative;
    height: 6px;
    display: flex;
    margin-bottom: 14px;
    border-radius: 1px;
    overflow: hidden;
    background: color-mix(in oklch, var(--pns-ink-4) 30%, transparent);
}
.pns-rr-bar .pns-rr-risk {
    background: linear-gradient(
        90deg,
        color-mix(in oklch, var(--pns-bear) 70%, transparent),
        var(--pns-bear)
    );
}
.pns-rr-bar .pns-rr-reward {
    background: linear-gradient(
        90deg,
        var(--pns-bull),
        color-mix(in oklch, var(--pns-bull) 70%, transparent)
    );
}
.pns-rr-bar .pns-rr-mid {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 1px;
    background: var(--pns-ink);
    left: var(--pns-rr-mid-x, 50%);
    opacity: 0.6;
}

/* Risk / reward / R:R numbers row under the bar */
.pns-tile-risk {
    display: flex;
    gap: 18px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--pns-ink-3);
    margin-bottom: 12px;
    align-items: baseline;
}
.pns-tile-risk .pns-risk-val   { color: var(--pns-bear); font-weight: 500; }
.pns-tile-risk .pns-reward-val { color: var(--pns-bull); font-weight: 500; }
.pns-tile-risk .pns-rr-val     { color: var(--pns-ink);  font-weight: 600; }
.pns-tile-risk .pns-contracts  { color: var(--pns-ink-3); }

/* Catalyst — editorial italic, hairline lead-in, no emoji */
.pns-tile-catalyst {
    font-family: var(--pns-serif);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--pns-ink-2);
    line-height: 1.4;
    margin-bottom: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--pns-rule-strong);
    font-feature-settings: 'ss01';
}

/* Catalyst strength badge — tiny sibling to the italic blurb. Green
   for aligned (bull+call, bear+put), amber for contradictory. Hidden
   entirely when strength==0 (template omits the element). */
.pns-tile-catalyst-strength {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 2px;
    font-family: var(--pns-mono);
    font-style: normal;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
    font-feature-settings: normal;
}
.pns-tile-catalyst-strength[data-catalyst-tier="strong"] {
    background: var(--pns-bull-soft, rgba(0, 160, 90, 0.12));
    color: var(--pns-bull, #00a05a);
    border: 1px solid var(--pns-bull, #00a05a);
}
.pns-tile-catalyst-strength[data-catalyst-tier="moderate"] {
    background: var(--pns-ink-3-soft, rgba(120, 120, 120, 0.1));
    color: var(--pns-ink-2);
    border: 1px solid var(--pns-rule-strong);
}
/* Direction contradiction wins over tier — amber overrides the tier
   color so the mismatch is the loudest signal on the tile. */
.pns-tile-catalyst-strength[data-catalyst-aligned="no"] {
    background: rgba(200, 140, 0, 0.12);
    color: #b07b00;
    border: 1px solid #b07b00;
}

/* Liquidity row — hairline, numeric, monospace */
.pns-tile-liq {
    display: flex;
    gap: 16px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--pns-ink-3);
    text-transform: uppercase;
    padding-top: 10px;
    border-top: 1px dashed var(--pns-rule);
}
.pns-tile-liq .pns-liq-val { color: var(--pns-ink); text-transform: none; font-weight: 500; }

/* Webull ticket — collapses to a keyboard hint, expands on click */
.pns-ticket {
    margin-top: 14px;
    font-size: 0.75rem;
    color: var(--pns-ink-3);
}
.pns-ticket-summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid var(--pns-rule);
    color: var(--pns-ink-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
    transition: border-color 0.15s, color 0.15s;
}
.pns-ticket-summary::-webkit-details-marker { display: none; }
.pns-ticket-summary:hover {
    color: var(--pns-gold);
    border-color: var(--pns-gold);
}
.pns-ticket-summary .pns-kbd {
    background: color-mix(in oklch, var(--pns-gold) 12%, transparent);
    padding: 0 4px;
    color: var(--pns-gold);
    font-family: var(--pns-mono);
    font-size: 0.7rem;
    letter-spacing: 0;
}
.pns-ticket-body {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--pns-bg);
    border: 1px solid var(--pns-rule);
}
.pns-ticket-body pre {
    font-family: var(--pns-mono);
    font-size: 0.75rem;
    color: var(--pns-ink);
    white-space: pre-wrap;
    line-height: 1.55;
}
.pns-ticket-note {
    margin-top: 8px;
    font-size: 0.68rem;
    color: var(--pns-ink-3);
    letter-spacing: 0.02em;
}
.pns-ticket-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.pns-btn {
    background: transparent;
    border: 1px solid var(--pns-rule);
    color: var(--pns-ink-2);
    padding: 5px 12px;
    font-family: var(--pns-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.pns-btn:hover { border-color: var(--pns-ink); color: var(--pns-ink); }
.pns-btn-primary {
    border-color: var(--pns-gold);
    color: var(--pns-gold);
}
.pns-btn-primary:hover {
    background: color-mix(in oklch, var(--pns-gold) 15%, transparent);
}

/* Grid container — tight gaps, no extra padding */
.pns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1px;
    background: var(--pns-rule);
    border-top: 1px solid var(--pns-rule);
    border-bottom: 1px solid var(--pns-rule);
}

/* Stagger-in reveal on HTMX swap */
@starting-style {
    .pns-tile { opacity: 0; transform: translateY(4px); }
}
.pns-tile { transition: background 0.15s, border-color 0.15s, opacity 0.3s, transform 0.3s; }

/* Empty state */
.pns-empty {
    grid-column: 1 / -1;
    padding: 72px 32px;
    text-align: center;
    color: var(--pns-ink-3);
    font-family: var(--pns-mono);
    letter-spacing: 0.04em;
}
.pns-empty-title {
    font-family: var(--pns-serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--pns-ink-2);
    margin-bottom: 8px;
}

/* Page header */
.pns-page-head {
    padding: 32px 24px 18px;
    border-bottom: 1px solid var(--pns-rule);
    background: var(--pns-bg);
}
.pns-page-title {
    font-family: var(--pns-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 2rem;
    letter-spacing: -0.01em;
    color: var(--pns-ink);
    line-height: 1;
}
.pns-page-sub {
    margin-top: 8px;
    color: var(--pns-ink-3);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

/* Legend / primer collapsible */
.pns-primer {
    margin: 16px 24px;
    padding: 14px 18px;
    border: 1px solid var(--pns-rule);
    font-size: 0.8125rem;
    color: var(--pns-ink-2);
}
.pns-primer summary {
    cursor: pointer;
    color: var(--pns-ink);
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    text-transform: uppercase;
}
.pns-primer ul { margin-top: 10px; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.pns-primer li { padding-left: 14px; border-left: 1px solid var(--pns-rule-strong); }
.pns-primer li strong { color: var(--pns-ink); font-weight: 500; }

/* ---------- Sitewide pass — ensure existing DaisyUI pages read well
   under the terminal palette. Surgical overrides only; we don't
   rewrite every component. ---------------------------------------- */

/* Headings across all pages → editorial italic, matches page-title */
html[data-theme] h1 {
    font-family: var(--pns-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--pns-ink);
}
html[data-theme] h2, html[data-theme] h3 {
    font-family: var(--pns-mono);
    letter-spacing: 0.02em;
    color: var(--pns-ink);
}

/* Sidebar — stronger bg separation + monospace links */
aside {
    background: var(--pns-surface) !important;
    border-right: 1px solid var(--pns-rule);
}

/* Brand mark — Fraunces italic "pns", mono lede under */
.pns-brand {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pns-rule);
}
.pns-brand-mark {
    display: block;
    font-family: var(--pns-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: var(--pns-gold);
    line-height: 1;
}
.pns-brand-sub {
    display: block;
    font-family: var(--pns-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pns-ink-4);
    margin-top: 4px;
}
aside .menu li > a {
    font-family: var(--pns-mono);
    font-size: 0.85rem;
    color: var(--pns-ink-2);
    border-radius: 0;
    padding-left: 10px;
    border-left: 2px solid transparent;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}
aside .menu li > a:hover {
    color: var(--pns-ink);
    background: var(--pns-surface-hi);
}
aside .menu li > a.active {
    color: var(--pns-gold);
    background: color-mix(in oklch, var(--pns-gold) 8%, transparent);
    border-left-color: var(--pns-gold);
}
aside .text-xs.uppercase {
    font-family: var(--pns-mono);
    letter-spacing: 0.1em;
    color: var(--pns-ink-4);
}

/* Topbar — match surface + hairline */
header.h-14 {
    background: var(--pns-bg);
    border-bottom: 1px solid var(--pns-rule);
}

/* DaisyUI .stats row (used on portfolio/greeks/autopilot) */
html[data-theme] .stats {
    background: var(--pns-surface) !important;
    border: 1px solid var(--pns-rule);
    box-shadow: none;
    border-radius: 0;
}
html[data-theme] .stat {
    padding: 16px 20px;
}
html[data-theme] .stat-title {
    font-family: var(--pns-mono);
    color: var(--pns-ink-3);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
}
html[data-theme] .stat-value {
    font-family: var(--pns-mono);
    color: var(--pns-ink);
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
html[data-theme] .stat-desc {
    font-family: var(--pns-mono);
    color: var(--pns-ink-3);
    font-size: 0.7rem;
}
html[data-theme] .stat-value.text-success { color: var(--pns-bull); }
html[data-theme] .stat-value.text-error   { color: var(--pns-bear); }

/* Generic buttons outside the pns-btn family — tone down DaisyUI default
 * so they don't fight the terminal palette. */
html[data-theme] .btn.btn-ghost:hover {
    background: var(--pns-surface-hi);
}

/* Links globally — subtle underline on hover */
html[data-theme] a:not(.btn):not(.menu a):hover {
    color: var(--pns-gold);
}

/* Tabular helper for arbitrary numerics across the app */
html[data-theme] .tabular-nums { font-variant-numeric: tabular-nums; }

/* ============================================================== *
 *  Terminal list components — shared across positions / alerts / *
 *  portfolio / autopilot / greeks. Flat hairline rules, mono      *
 *  typography, no card chrome.                                    *
 * ============================================================== */

/* -------- Flat terminal table ---------------------------------- */
.pns-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pns-mono);
    font-size: 0.8125rem;
    color: var(--pns-ink-2);
    font-variant-numeric: tabular-nums;
}
.pns-table thead th {
    text-align: left;
    padding: 10px 16px;
    border-top: 1px solid var(--pns-rule-strong);
    border-bottom: 1px solid var(--pns-rule-strong);
    font-weight: 500;
    color: var(--pns-ink-3);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    background: var(--pns-bg);
}
.pns-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--pns-rule);
    white-space: nowrap;
}
.pns-table tbody tr:hover td { background: var(--pns-surface); }
.pns-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pns-table .pos { color: var(--pns-bull); font-weight: 500; }
.pns-table .neg { color: var(--pns-bear); font-weight: 500; }
.pns-table .muted { color: var(--pns-ink-3); font-size: 0.72rem; letter-spacing: 0.02em; }
.pns-table .sym { font-weight: 600; color: var(--pns-ink); }
.pns-table .mini { font-size: 0.72rem; }
.pns-table .pns-table-wrap {
    overflow-x: auto;
    border-left: 1px solid var(--pns-rule);
    border-right: 1px solid var(--pns-rule);
}

/* -------- Event badge (ENTRY / TRIM / CUT / RECAP / SKIP) ------ */
.pns-event {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--pns-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}
.pns-event--entry { color: var(--pns-bull); }
.pns-event--trim  { color: var(--pns-amber); }
.pns-event--cut   { color: var(--pns-bear); }
.pns-event--exit  { color: var(--pns-amber); }
.pns-event--skip  { color: var(--pns-ink-4); }
.pns-event--recap { color: var(--pns-ink-3); border-style: dashed; }

/* -------- Alert-feed row --------------------------------------- */
.pns-row-list {
    border-top: 1px solid var(--pns-rule);
    border-bottom: 1px solid var(--pns-rule);
    background: var(--pns-surface);
}
.pns-row {
    padding: 11px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--pns-rule);
    font-family: var(--pns-mono);
    font-size: 0.8125rem;
    transition: background 0.1s;
}
.pns-row:last-child { border-bottom: none; }
.pns-row:hover { background: var(--pns-surface-hi); }
.pns-row--muted { opacity: 0.55; }
.pns-row-sym { font-weight: 600; color: var(--pns-ink); letter-spacing: -0.01em; }
.pns-row-sym .pns-row-strike { color: var(--pns-ink-2); font-weight: 500; margin-left: 4px; }
.pns-row-sym .pns-row-dir { font-size: 0.9rem; font-weight: 700; margin-left: 6px; }
.pns-row-sym .pns-row-dir--call { color: var(--pns-bull); }
.pns-row-sym .pns-row-dir--put  { color: var(--pns-bear); }
.pns-row-exp {
    font-size: 0.72rem;
    color: var(--pns-ink-3);
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border: 1px solid var(--pns-rule);
}
.pns-row-px { color: var(--pns-ink); font-weight: 500; }
.pns-row-meta { color: var(--pns-ink-3); font-size: 0.72rem; letter-spacing: 0.02em; margin-left: auto; white-space: nowrap; }
.pns-row-meta .pns-row-author { color: var(--pns-ink-2); }
.pns-row-meta .pns-row-rel { color: var(--pns-ink-4); margin-left: 10px; }
.pns-row-sub {
    width: 100%;
    color: var(--pns-ink-3);
    font-size: 0.75rem;
    padding-left: 80px;
    margin-top: 6px;
    font-family: var(--pns-serif);
    font-style: italic;
}
.pns-row-recap {
    width: 100%;
    padding-left: 80px;
    margin-top: 8px;
    font-family: var(--pns-mono);
    font-size: 0.72rem;
}
.pns-row-recap-grid {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    column-gap: 16px;
    row-gap: 2px;
    color: var(--pns-ink-2);
}
.pns-row-recap-grid .sym { color: var(--pns-ink); font-weight: 500; }
.pns-row-recap-grid .pos { color: var(--pns-bull); font-weight: 500; }
.pns-row-recap-grid .neg { color: var(--pns-bear); font-weight: 500; }

/* -------- Position tile ---------------------------------------- */
.pns-pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1px;
    background: var(--pns-rule);
    border-top: 1px solid var(--pns-rule);
    border-bottom: 1px solid var(--pns-rule);
}
.pns-pos-tile {
    position: relative;
    background: var(--pns-surface);
    padding: 14px 18px 14px 22px;
    font-family: var(--pns-mono);
    overflow: hidden;
    transition: background 0.15s;
}
.pns-pos-tile:hover { background: var(--pns-surface-hi); }
.pns-pos-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--pns-accent, var(--pns-ink-4));
}
.pns-pos-tile[data-pnl="win"]  { --pns-accent: var(--pns-bull); }
.pns-pos-tile[data-pnl="loss"] { --pns-accent: var(--pns-bear); }
.pns-pos-tile[data-pnl="flat"] { --pns-accent: var(--pns-ink-4); }
.pns-pos-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.pns-pos-sym {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pns-ink);
    letter-spacing: -0.01em;
}
.pns-pos-sym .pns-pos-strike { color: var(--pns-ink-2); font-weight: 500; margin-left: 4px; }
.pns-pos-pnl-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--pns-accent, var(--pns-ink));
}
.pns-pos-meta {
    font-size: 0.7rem;
    color: var(--pns-ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.pns-pos-pnl-usd {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--pns-accent, var(--pns-ink));
    line-height: 1;
    margin-bottom: 8px;
}
.pns-pos-px {
    font-size: 0.75rem;
    color: var(--pns-ink-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}
.pns-pos-px strong { color: var(--pns-ink); font-weight: 500; }
.pns-pos-greeks {
    display: flex;
    gap: 14px;
    font-size: 0.7rem;
    color: var(--pns-ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--pns-rule);
}
.pns-pos-greeks .pns-pos-greek-val {
    color: var(--pns-ink);
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    margin-left: 2px;
}

/* Tiny proximity bars for Stop / Take */
.pns-prox-row {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pns-ink-3);
    margin-top: 4px;
}
.pns-prox-row .pns-prox-val {
    text-align: right;
    color: var(--pns-ink-2);
    font-family: var(--pns-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}
.pns-prox-bar {
    position: relative;
    height: 3px;
    background: color-mix(in oklch, var(--pns-ink-4) 28%, transparent);
}
.pns-prox-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    transition: width 0.3s ease;
}
.pns-prox-bar-fill--stop { background: var(--pns-bear); }
.pns-prox-bar-fill--take { background: var(--pns-bull); }

/* -------- Section label (used in portfolio / autopilot) -------- */
.pns-section {
    padding: 22px 24px 10px;
}
.pns-section-title {
    font-family: var(--pns-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pns-ink-3);
    margin-bottom: 6px;
}
.pns-section-sub {
    font-family: var(--pns-serif);
    font-style: italic;
    color: var(--pns-ink-3);
    font-size: 0.82rem;
    margin-bottom: 14px;
    max-width: 60ch;
}

/* -------- Greeks per-author tile ------------------------------- */
.pns-gk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1px;
    background: var(--pns-rule);
    border-top: 1px solid var(--pns-rule);
    border-bottom: 1px solid var(--pns-rule);
}
.pns-gk-tile {
    background: var(--pns-surface);
    padding: 14px 18px;
    font-family: var(--pns-mono);
}
.pns-gk-tile:hover { background: var(--pns-surface-hi); }
.pns-gk-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pns-rule);
}
.pns-gk-author {
    font-size: 1rem;
    color: var(--pns-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.pns-gk-count {
    font-size: 0.68rem;
    color: var(--pns-ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pns-gk-rows {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 4px;
    column-gap: 16px;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.pns-gk-label {
    color: var(--pns-ink-3);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px dotted var(--pns-rule-strong);
    cursor: help;
}
.pns-gk-val { color: var(--pns-ink); text-align: right; font-weight: 500; }
.pns-gk-val.pos { color: var(--pns-bull); }
.pns-gk-val.neg { color: var(--pns-bear); }
.pns-gk-row-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--pns-rule-strong);
}
.pns-gk-row-total .pns-gk-label { color: var(--pns-ink-2); border-bottom: none; }