/* SPY's native quote card; session data and baseline remain unchanged. */
:is(#gex-mini-chart-frame, .stock-mini-chart-host):has(.spy-mini-card) { height: 114px; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-card {
    --spy-trace: #27b9a4;
    --spy-trace-soft: rgba(39,185,164,.13);
    grid-template-columns: minmax(190px, 36%) minmax(0, 1fr);
    background: #080a09;
    font-family: 'JetBrains Mono', monospace;
}
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-card.is-negative { --spy-trace: #ef6676; --spy-trace-soft: rgba(239,102,118,.13); }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-quote { padding: 9px 12px; overflow: hidden; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-symbol-row { gap: 9px; margin-bottom: 7px; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-token {
    flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain;
    background: transparent; border-radius: 0; opacity: 1; mix-blend-mode: normal;
}
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-identity { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-symbol { font-size: 22px; letter-spacing: -.035em; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-name { color: #777f7b; font-size: 8px; white-space: nowrap; letter-spacing: .035em; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price-row { gap: 7px; white-space: nowrap; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price { font-size: 27px; color: #e3e7e5; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-currency { font-size: 10px; color: #919994; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-change { display: inline; margin-top: 0; margin-left: 5px; font-size: 15px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-session { display: block; margin-top: 9px; font: 8px 'JetBrains Mono', monospace; color: #777f7b; letter-spacing: .025em; white-space: nowrap; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-plot { padding: 11px 12px 11px 3px; overflow: hidden; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-grid { stroke: transparent; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-baseline { stroke: rgba(165,178,170,.12); stroke-dasharray: 2 5; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-area { fill: url(#spy-mini-fill); }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-line { stroke-width: 2.2; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-endpoint { width: 7px; height: 7px; border: 0; box-shadow: none; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price.tick-up { animation: spy-price-up 210ms steps(1, end); }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price.tick-down { animation: spy-price-down 210ms steps(1, end); }
@keyframes spy-price-up { 0%, 100% { color: #04110a; background: #73ffb8; } }
@keyframes spy-price-down { 0%, 100% { color: #160609; background: #f0788c; } }
@container (max-width: 360px) {
    :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-card { grid-template-columns: minmax(128px, 43%) minmax(0, 1fr); }
    :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-quote { padding: 12px 10px; }
    :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price { font-size: 24px; }
    :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-symbol { font-size: 20px; }
    :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-change { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price { animation: none; }
}

.stock-mini-chart-host { container-type: inline-size; padding: 0 !important; height: 114px !important; }
.stock-mini-chart-host .spy-mini-card { display: grid; width: 100%; height: 100%; overflow: hidden; color: #e8ecea; }
.stock-mini-chart-host .spy-mini-quote { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.stock-mini-chart-host .spy-mini-symbol-row, .stock-mini-chart-host .spy-mini-price-row { display: flex; align-items: baseline; min-width: 0; }
.stock-mini-chart-host .spy-mini-symbol-row { align-items: center; }
.stock-mini-chart-host .spy-mini-price { font-weight: 700; line-height: 1; }
.stock-mini-chart-host .spy-mini-change { color: var(--spy-trace); }
.stock-mini-chart-host .spy-mini-canvas, .stock-mini-chart-host .spy-mini-plot { position: relative; height: 100%; box-sizing: border-box; }
.stock-mini-chart-host svg { width: 100%; height: 100%; display: block; }
.stock-mini-chart-host .spy-mini-line { fill: none; stroke: var(--spy-trace); vector-effect: non-scaling-stroke; }
.stock-mini-chart-host .spy-mini-baseline { vector-effect: non-scaling-stroke; }
.stock-mini-chart-host .spy-mini-area { fill: var(--mini-fill); }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-currency { display: none; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-name { overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 440px) {
 :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-card { grid-template-columns: minmax(185px, 47%) minmax(0, 1fr); }
 :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price { font-size: 24px; }
 :is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-change { font-size: 13px; }
}

#gex-mini-chart-frame:has(.spy-mini-card) { container-type: inline-size; }
:is(#gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price { font-style: normal; }

.stock-mini-chart-host .spy-mini-card { grid-template-columns: minmax(205px, 40%) minmax(0, 1fr); }
@container (max-width: 360px) {
 .stock-mini-chart-host .spy-mini-card { grid-template-columns: minmax(195px, 52%) minmax(0, 1fr); }
 .stock-mini-chart-host .spy-mini-price { font-size: 22px; }
}

/* Fish Finder keeps its quote card focused on ticker, price and chart. */
#view-fish .fish-mini-chart-frame .spy-mini-name { display: none; }

/* Narrow cards (GEX trifecta columns, phones): stack a one-line quote over a full-width trace. */
@container (max-width: 300px) {
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-quote { padding: 5px 7px 2px; justify-content: flex-start; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-symbol-row { gap: 5px; margin-bottom: 2px; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-token { flex: 0 0 16px; width: 16px; height: 16px; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-identity { flex-direction: row; align-items: baseline; gap: 5px; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-symbol { font-size: 12px; letter-spacing: .02em; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-name { display: none; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-session { margin: 0 0 0 auto; font-size: 8px; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price-row { gap: 6px; align-items: baseline; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-price { font-size: 17px; letter-spacing: -.03em; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-change { font-size: 10px; margin-left: 0; }
 :is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-plot { padding: 2px 6px 5px; min-height: 0; }
}

/* Wide wordmark logos (SPDR) keep their 2:1 shape instead of being squeezed into a square. */
:is(#gex-mini-chart-frame, .gex-mini-chart-frame, .stock-mini-chart-host) .spy-mini-token:is([src*="spdr_pixel"], [src*="smh_pixel"]) { flex: 0 0 auto; width: auto; aspect-ratio: 2 / 1; object-fit: contain; border-radius: 2px; }