/* Cool Trading Tools — scanner chart cards, expanded view, Candles|Line control.
   Shared by /scanner/ and /home; the renderer is assets/scanner-charts.js. */
/* ============================================
   SCANNER CARDS v2 — live mini charts (2026-09-20)
   Card, chart wrap, expand icon, move strip, stats grid,
   expanded view, Candles|Line control. Dark + vintage.
   The older .news-* rules above stay until this settles
   (see SCANNER_CARDS_PLAN.md).
   ============================================ */
.sc-card {
    background: #1a1a1a; color: #f4f1e8;
    border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
    font-family: 'Inter', -apple-system, sans-serif;
}
.sc-card:hover { border-color: #DAA520; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(218,165,32,.15); }
.sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; }
/* the name column gives way first; gain + journey never get clipped by the card edge */
.sc-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.sc-head > div:last-child { flex: 0 0 auto; }
.sc-rank {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; padding: 0 7px; margin-right: 9px; vertical-align: 4px;
    border: 1px solid rgba(255,255,240,.35); border-radius: 11px;
    color: #FFFFF0; font-size: 11px; font-weight: 700; letter-spacing: .5px;
}
.sc-ticker { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 800; color: #FFFFF0; line-height: 1; }
.sc-company { font-size: 12px; color: #888; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-industry { font-size: 9px; color: #DAA520; text-transform: uppercase; letter-spacing: 2px; margin-top: 6px; }
.sc-gain { font-size: 26px; font-weight: 800; line-height: 1; text-align: right; color: #32CD32; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-gain.negative { color: #FF6B6B; }
.sc-journey { font-size: 12px; color: #aaa; margin-top: 6px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-chartwrap { position: relative; }
.sc-chart {
    height: 240px; position: relative;
    background: linear-gradient(180deg, #111 0%, #0a0a0a 100%);
    border-top: 1px solid #222; border-bottom: 1px solid #222;
}
/* expand icon — top-right of the plot area, clear of the price axis */
.sc-expand {
    position: absolute; top: 8px; right: 62px; z-index: 4;
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
    background: rgba(20,20,20,.7); border: 1px solid rgba(255,255,240,.18); color: #bbb; font-size: 12px;
    opacity: .45; transition: opacity .2s ease, border-color .2s ease, color .2s ease;
}
.sc-card:hover .sc-expand { opacity: 1; }
.sc-expand:hover { border-color: #DAA520; color: #DAA520; }
.sc-strip { display: flex; padding: 9px 12px; border-bottom: 1px solid #222; font-size: 11px; color: #888; }
.sc-strip span { flex: 1; text-align: center; white-space: nowrap; }
.sc-strip b { color: #FFFFF0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-strip .up { color: #32CD32; }
.sc-strip .dn { color: #FF6B6B; }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; padding: 12px 16px 4px; }
.sc-stat .l { font-size: 9px; color: #777; text-transform: uppercase; letter-spacing: 1.5px; }
.sc-stat .v { font-size: 14px; font-weight: 600; color: #FFFFF0; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-stat .v small { font-size: 10px; color: #888; font-weight: 500; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 16px; }
.sc-scanned { font-size: 11px; color: #666; white-space: nowrap; }
.sc-foot .sc-cta { width: auto; margin: 0; padding: 10px 18px; }
.sc-pan .nsewdrag { cursor: grab !important; }
.sc-pan:active .nsewdrag { cursor: grabbing !important; }

/* Hero sidebar — the card pieces, stacked (Bull/Bear of the Day/Week) */
.sc-hero-side { padding: 22px 22px 18px; }
.sc-hero-side .sc-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 0 12px; }
.sc-hero-side .sc-rank { display: none; }          /* the crown badge already says #1 */
.sc-hero-side .sc-ticker { font-size: 36px; }
.sc-hero-side .sc-company { max-width: none; font-size: 13px; }
.sc-hero-side .sc-gain { font-size: 34px; text-align: left; }
.sc-hero-side .sc-journey { text-align: left; font-size: 13px; }
.sc-hero-side .sc-strip { padding: 10px 0; border-top: 1px solid #222; }
.sc-hero-side .sc-stats { grid-template-columns: repeat(2, 1fr); padding: 12px 0 0; }
.sc-hero-side .sc-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0 0; margin-top: auto; }
.sc-hero-side .sc-foot .hero-cta { margin-top: 0; }
.sc-expand-hero { top: 14px; right: 66px; width: 30px; height: 30px; font-size: 13px; opacity: .6; }
.hero-section:hover .sc-expand-hero { opacity: 1; }
body.vintage-theme .sc-hero-side .sc-strip { border-color: #d4cfc4; }

/* Candles | Line — sits beside the Vintage toggle */
.chart-style-toggle { display: inline-flex; border: 1px solid #555; border-radius: 6px; overflow: hidden; }
.chart-style-toggle button {
    background: transparent; border: none; color: #888; padding: 8px 12px; font-size: 13px; cursor: pointer;
    font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 6px; transition: all .3s ease;
}
.chart-style-toggle button + button { border-left: 1px solid #555; }
.chart-style-toggle button:hover { color: #FFFFF0; }
.chart-style-toggle button.active { color: #DAA520; background: rgba(218,165,32,.08); }

/* Expanded view */
.sc-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 24px; }
.sc-modal {
    width: min(1180px, 96vw); background: #141414; color: #f4f1e8;
    border: 1px solid #DAA520; border-radius: 12px; overflow: hidden;
    box-shadow: 0 20px 80px rgba(0,0,0,.7); font-family: 'Inter', sans-serif;
}
.sc-modal-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px 8px; }
.sc-modal-head .sc-ticker { font-size: 28px; }
.sc-inline { display: inline; margin-left: 10px; max-width: none; }
.sc-modal-right { margin-left: auto; text-align: right; }
.sc-modal-right .sc-gain { font-size: 28px; }
.sc-close { background: transparent; border: none; color: #888; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 0 0 12px; }
.sc-close:hover { color: #FFFFF0; }
.sc-modal-tools { display: flex; align-items: center; gap: 6px; padding: 0 20px 10px; font-size: 12px; color: #888; }
.sc-modal-tools button { background: transparent; border: 1px solid #333; color: #aaa; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: inherit; }
.sc-modal-tools button:hover { border-color: #666; color: #FFFFF0; }
.sc-modal-tools button.active { border-color: #DAA520; color: #DAA520; }
.sc-modal-tools .sc-hint { margin-left: auto; color: #555; font-size: 11px; }
.sc-modal-chart { height: 520px; position: relative; background: linear-gradient(180deg, #111 0%, #0a0a0a 100%); border-top: 1px solid #222; border-bottom: 1px solid #222; }
.sc-modal-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; }
.sc-modal-foot { display: flex; align-items: center; gap: 24px; padding: 14px 20px 18px; }
.sc-modal-foot .sc-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0; flex: 1; }
.sc-modal-foot .sc-cta { width: auto; margin: 0; padding: 12px 22px; white-space: nowrap; }

/* Vintage — mirrors the .news-card vintage palette */
body.vintage-theme .sc-card { background: #f4f1e8; color: #1a1a1a; border-color: #d4cfc4; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
body.vintage-theme .sc-card:hover { border-color: #1a1a1a; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
body.vintage-theme .sc-rank { border-color: rgba(26,26,26,.4); color: #1a1a1a; }
body.vintage-theme .sc-ticker, body.vintage-theme .sc-strip b, body.vintage-theme .sc-stat .v { color: #1a1a1a; }
body.vintage-theme .sc-company, body.vintage-theme .sc-journey, body.vintage-theme .sc-strip,
body.vintage-theme .sc-stat .l, body.vintage-theme .sc-stat .v small, body.vintage-theme .sc-scanned { color: #6b6357; }
body.vintage-theme .sc-industry { color: #8b7355; }
body.vintage-theme .sc-gain { color: #228b22; }
body.vintage-theme .sc-gain.negative { color: #b44646; }
body.vintage-theme .sc-strip .up { color: #228b22; }
body.vintage-theme .sc-strip .dn { color: #b44646; }
body.vintage-theme .sc-chart, body.vintage-theme .sc-modal-chart { background: #e8e4d9; border-color: #d4cfc4; }
body.vintage-theme .sc-strip { border-color: #d4cfc4; }
body.vintage-theme .sc-expand { background: rgba(244,241,232,.85); border-color: rgba(26,26,26,.3); color: #1a1a1a; }
body.vintage-theme .sc-modal { background: #f4f1e8; color: #1a1a1a; border-color: #1a1a1a; }
body.vintage-theme .sc-close { color: #6b6357; }
body.vintage-theme .sc-modal-tools button { border-color: #c9c2b4; color: #6b6357; }
body.vintage-theme .sc-modal-tools button.active { border-color: #1a1a1a; color: #1a1a1a; }
body.vintage-theme .sc-modal-tools .sc-hint { color: #9a917f; }

/* ---- server-rendered SVG preview (home Study Desk placeholder / no-JS fallback) ----
   Drawn by _candles_svg() in the same silhouette as the live chart; classes carry the theme. */
.sc-svg { display: block; width: 100%; height: 100%; }
.sc-svg-up { fill: #32CD32; stroke: #32CD32; }
.sc-svg-dn { fill: #FF6B6B; stroke: #FF6B6B; }
.sc-svg-vol { opacity: .45; stroke: none; }
.sc-svg-tag { stroke: none; }
.sc-svg-tagtext { fill: #000; font-weight: 600; }
.sc-svg-tick { fill: #777; stroke: none; }
.sc-svg-grid { stroke: rgba(255,255,240,.06); stroke-width: 1; }
body.vintage-theme .sc-svg-up { fill: #228b22; stroke: #228b22; }
body.vintage-theme .sc-svg-dn { fill: #b44646; stroke: #b44646; }
body.vintage-theme .sc-svg-tagtext { fill: #f4f1e8; }
body.vintage-theme .sc-svg-tick { fill: #8b7355; }
body.vintage-theme .sc-svg-grid { stroke: rgba(26,26,26,.10); }

/* ---- the outline CTA (was .news-cta in scanner.html) ---- */
.sc-cta {
    width: 100%;
    background: transparent; 
    border: 2px solid #DAA520;
    color: #DAA520;
    padding: 12px 10px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.sc-cta:hover {
    background: #DAA520;
    color: #1a1a1a;
}
body.vintage-theme .sc-cta {
    background: #1a1a1a;
    border: 2px solid #1a1a1a;
    color: #f4f1e8;
}
body.vintage-theme .sc-cta:hover {
    background: #333;
    border-color: #333;
}

/* ============================================================================
   SPIKE LINES (crosshair): the same rule as the journal builder (styles.css)
   Plotly draws every spike line twice: the line itself on top of a white
   outline two pixels wider (its contrast colour for a transparent plot).
   This page does not load styles.css, so without the rule the outline shows
   as a thick white cross. One thin grey line, like the builder.
   ============================================================================ */
.spikeline {
    stroke: #888888 !important;
    stroke-width: 0.75 !important;
    opacity: 0.5 !important;
}