/* ==========================================================================
   SignalForge components — consumes tokens.css only; no raw colour values.
   No inline styles or scripts anywhere in the app (CSP discipline).
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--ink-950);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--text-strong);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 var(--sp-3);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a {
    color: var(--steel-400);
}

a:hover {
    color: var(--steel-300);
}

:focus-visible {
    outline: 2px solid var(--steel-300);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- mode banner (constraint: persistent, unmistakable in LIVE) ---------- */

.mode-banner {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mode-paper {
    background: var(--paper);
    color: var(--paper-ink);
}

.mode-live {
    /* Diagonal hazard stripes: LIVE is loud even for colour-blind users,
       and the banner text always says REAL MONEY. */
    background: repeating-linear-gradient(
        -45deg,
        var(--live) 0 18px,
        #8f1f1f 18px 36px
    );
    color: var(--live-ink);
    font-size: var(--text-base);
    font-weight: 700;
}

/* --- signature element: the forge edge -----------------------------------
   A thin ember→steel gradient seam under the header — the product's mark.
   It also carries state: it pulses gently when live data is flowing. */

.forge-edge {
    height: 3px;
    background: linear-gradient(90deg,
        var(--ember-600), var(--ember-400) 30%, var(--steel-400) 75%, var(--steel-600));
}

@keyframes forge-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.45); }
}

.forge-edge.is-streaming {
    animation: forge-glow 2.4s var(--ease) infinite;
}

/* --- header / nav ---------------------------------------------------------- */

.site-header {
    background: var(--ink-900);
}

.site-nav {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.site-nav a {
    color: var(--text-body);
    text-decoration: none;
    font-size: var(--text-sm);
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--text-strong);
    text-decoration: underline;
}

.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg) !important;
    color: var(--text-strong) !important;
}

.brand-mark {
    color: var(--ember-500);
}

.nav-spacer { flex: 1; }

.nav-user,
.nav-portfolio {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* --- layout ------------------------------------------------------------------ */

.container {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-8);
}

.site-footer {
    max-width: var(--measure);
    margin: var(--sp-8) auto 0;
    padding: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--text-xs);
    border-top: 1px solid var(--ink-700);
}

/* --- surfaces ------------------------------------------------------------------ */

.panel,
.auth-card,
.empty-state {
    background: var(--ink-800);
    border: 1px solid var(--ink-700);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-top: var(--sp-4);
    box-shadow: var(--shadow-card);
}

.auth-card {
    max-width: var(--measure-narrow);
    margin: 10vh auto 0;
}

.empty-state {
    border-style: dashed;
    text-align: left;
}

.empty-state h2 {
    color: var(--text-body);
}

/* --- badges ----------------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.badge-paper { background: var(--paper); color: var(--paper-ink); }
.badge-live { background: var(--live); color: var(--live-ink); }
.badge-current { background: var(--ink-700); color: var(--text-body); }
.badge-warn { background: color-mix(in srgb, var(--loss) 22%, var(--ink-800)); color: var(--loss); border: 1px solid color-mix(in srgb, var(--loss) 45%, transparent); }

/* --- money & signals: colour never alone — pair with sign/arrow ------------------- */

.num,
.money {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.gain { color: var(--gain); }
.loss { color: var(--loss); }

.gain::before { content: '▲ '; font-size: 0.8em; }
.loss::before { content: '▼ '; font-size: 0.8em; }

/* Freshness indicators (colour only — no arrow; not money). */
.status-fresh { color: var(--gain); }
.status-stale { color: var(--loss); }

/* Tick flash: a value that just updated glows briefly. */
@keyframes tick-flash {
    0% { background: color-mix(in srgb, var(--steel-600) 45%, transparent); }
    100% { background: transparent; }
}

.tick-updated {
    animation: tick-flash 700ms var(--ease);
}

/* --- tables --------------------------------------------------------------------------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--sp-4);
}

.data-table th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--ink-700);
    vertical-align: top;
}

.data-table th.num,
.data-table td.num {
    text-align: right;
}

.row-current {
    background: color-mix(in srgb, var(--steel-600) 10%, transparent);
}

/* --- forms ------------------------------------------------------------------------------ */

label {
    display: block;
    margin-top: var(--sp-3);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-strong);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
select {
    width: 100%;
    margin-top: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--ink-600);
    background: var(--ink-950);
    color: var(--text-body);
    font: inherit;
}

input::placeholder {
    color: var(--text-muted);
}

.hint {
    color: var(--text-muted);
    font-weight: 400;
    font-size: var(--text-xs);
    margin-left: var(--sp-1);
}

.form-error {
    background: var(--danger);
    color: #fff;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
}

/* --- buttons -------------------------------------------------------------------------------- */

.btn {
    margin-top: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--ink-600);
    background: var(--ink-800);
    color: var(--text-strong);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn:hover { border-color: var(--steel-400); }

.btn-primary {
    background: var(--steel-600);
    border-color: var(--steel-600);
    color: #fff;
}

.btn-primary:hover { background: var(--steel-400); border-color: var(--steel-400); color: var(--ink-950); }

.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--loss);
}

.btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    margin-top: 0;
}

.btn-quiet:hover { color: var(--text-strong); text-decoration: underline; }

/* LIVE-only controls are visually distinct from everything else. */
.btn-live {
    background: var(--live);
    border-color: var(--live);
    color: var(--live-ink);
}

/* --- flash messages ----------------------------------------------------------------------------- */

.flash {
    max-width: var(--measure);
    margin: var(--sp-4) auto 0;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    color: #fff;
}

.flash-success { background: var(--success); }
.flash-error { background: var(--danger); }
.flash-warning { background: var(--warning); }

/* --- loading: skeletons -------------------------------------------------------------------------- */

@keyframes skeleton-sheen {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

.skeleton {
    display: inline-block;
    width: 100%;
    height: 1em;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--ink-800) 25%, var(--ink-700) 50%, var(--ink-800) 75%);
    background-size: 400px 100%;
    animation: skeleton-sheen 1.4s linear infinite;
}

/* --- misc --------------------------------------------------------------------------------------------- */

.inline-form { display: inline; }
.stack-form { margin: var(--sp-2) 0; }

.row-tools summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.tagline { color: var(--text-muted); }

.auth-alt {
    margin-top: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* --- hero (dashboard) + WebGL scene ----------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ink-700);
    border-radius: var(--radius);
    background:
        radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--ember-600) 14%, transparent), transparent 55%),
        radial-gradient(120% 140% at 10% 100%, color-mix(in srgb, var(--steel-600) 16%, transparent), transparent 60%),
        var(--ink-900);
    margin-top: var(--sp-4);
}

#fx-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fx-scene-page {
    position: fixed !important;
    z-index: -1;
}

.fx-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-content {
    position: relative;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.hero-label {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-number {
    margin: var(--sp-1) 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: left;
    background: linear-gradient(100deg, var(--text-strong) 55%, var(--ember-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-metrics {
    display: flex;
    gap: var(--sp-6);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.hero-metrics > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-metric-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- sparklines --------------------------------------------------------------------------------------------- */

.sparkline {
    width: 110px;
    height: 28px;
    display: block;
}

.sparkline path {
    fill: none;
    stroke: var(--steel-400);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline.spark-up path { stroke: var(--gain); }
.sparkline.spark-down path { stroke: var(--loss); }

.sparkline-hero {
    width: 100%;
    height: 56px;
    opacity: 0.9;
}

.sparkline-hero path {
    stroke: var(--ember-400);
    stroke-width: 1.1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ember-500) 60%, transparent));
}

.spark-cell { width: 120px; }

/* --- metrics + charts (backtest lab, analytics) -------------------------------------------------------------- */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

.metric-card {
    background: var(--ink-900);
    border: 1px solid var(--ink-700);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.metric-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
}

.equity-chart {
    width: 100%;
    height: 220px;
    margin-top: var(--sp-2);
    background: linear-gradient(180deg, var(--ink-900), transparent);
    border-radius: var(--radius-sm);
}

.equity-chart path { fill: none; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-strat { stroke: var(--ember-400); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ember-500) 55%, transparent)); }
.chart-spy { stroke: var(--steel-400); opacity: 0.7; stroke-dasharray: 3 3; }

/* --- calibration reliability diagram (Report card) -------------------------------------------------------- */
.reliability-chart {
    width: 100%;
    height: 240px;
    margin-top: var(--sp-2);
    background: linear-gradient(180deg, var(--ink-900), transparent);
    border-radius: var(--radius-sm);
}
.rl-bar { transition: opacity .2s; }
.rl-good { fill: var(--gain); }
.rl-bad { fill: var(--loss); }
.rl-baseline { stroke: var(--steel-400); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.8; }
.rl-baseline-label { fill: var(--steel-400); font-size: 10px; font-family: var(--font-mono, monospace); }
.rl-val { fill: var(--text-strong); font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.rl-axis { fill: var(--text-muted); font-size: 10px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.rl-n { fill: var(--text-faint, var(--text-muted)); font-size: 9px; }

/* --- screener shortlist ----------------------------------------------------------------------------------- */
.screener-table tr.screener-pick { background: color-mix(in srgb, var(--ember-500) 8%, transparent); }
.screener-table tr.screener-pick td:first-child { border-left: 2px solid var(--ember-400); }
.pick-dot { color: var(--ember-400); font-size: 0.7em; vertical-align: middle; }

/* --- plain-language layer (verdicts, glossary, guide) ------------------------------------------------------- */

.verdict {
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-2) 0 var(--sp-3);
    border-left: 3px solid var(--ink-600);
}

.verdict strong { font-size: var(--text-lg); font-family: var(--font-display); }
.verdict p { margin: var(--sp-1) 0 0; color: var(--text-body); }
.verdict-buy { background: color-mix(in srgb, var(--gain) 12%, transparent); border-left-color: var(--gain); }
.verdict-sell { background: color-mix(in srgb, var(--loss) 12%, transparent); border-left-color: var(--loss); }
.verdict-wait { background: color-mix(in srgb, var(--steel-600) 12%, transparent); border-left-color: var(--steel-400); }

/* Jargon term with a hover/focus explanation. */
abbr.term {
    text-decoration: none;
    border-bottom: 1px dotted var(--steel-400);
    cursor: help;
}

.nav-help {
    color: var(--ember-400) !important;
    font-weight: 600;
}

.guide-pointer {
    background: color-mix(in srgb, var(--steel-600) 14%, transparent);
    border: 1px solid var(--ink-700);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-4);
    font-size: var(--text-sm);
}

.guide-pointer a { font-weight: 600; }

.guide-section p { max-width: 60ch; }
.guide-steps, .guide-clues { max-width: 64ch; line-height: 1.6; }
.guide-steps li, .guide-clues li { margin: var(--sp-2) 0; }

.guide-pages dt { font-weight: 600; margin-top: var(--sp-3); }
.guide-pages dt a { color: var(--steel-300); }
.guide-pages dd { margin: 2px 0 0; color: var(--text-muted); max-width: 60ch; }

.glossary-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); }
.glossary-list dt { font-weight: 600; color: var(--text-strong); }
.glossary-list dd { margin: 0; color: var(--text-muted); }

@media (max-width: 640px) {
    .glossary-list { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
    .glossary-list dt { margin-top: var(--sp-2); }
}

.honesty-note {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.chart-legend {
    display: flex;
    gap: var(--sp-4);
    font-size: var(--text-sm);
    margin-top: var(--sp-3);
}

.legend-strat { color: var(--ember-400); }
.legend-spy { color: var(--steel-400); }

.backtest-form {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-end;
    flex-wrap: wrap;
}

.backtest-form label { margin-top: 0; }
.backtest-form select { min-width: 14rem; }
.backtest-form .btn { margin-top: 0; }

/* --- candlestick price chart -------------------------------------------------------------------------------- */

.price-chart {
    width: 100%;
    height: auto;
    margin-top: var(--sp-3);
    background: linear-gradient(180deg, var(--ink-900), transparent);
    border-radius: var(--radius-sm);
}

.candle-up { fill: var(--gain); stroke: var(--gain); }
.candle-down { fill: var(--loss); stroke: var(--loss); }
.wick { stroke-width: 1; }
.candle { stroke-width: 0.5; }
.vol-bar { opacity: 0.28; }
.vol-up { fill: var(--gain); }
.vol-down { fill: var(--loss); }
.price-chart .chart-strat, .price-chart .chart-spy { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

.chart-notes {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-4);
    color: var(--text-body);
}

.chart-notes li { margin: var(--sp-1) 0; }

.split-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

@media (max-width: 720px) {
    .split-cols { grid-template-columns: 1fr; }
}

/* --- control surfaces ---------------------------------------------------------------------------------------- */

.style-choice { margin: var(--sp-3) 0; }

.style-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin: var(--sp-2) 0;
}

.style-card { margin: 0; }

.style-btn {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid var(--ink-700);
    background: var(--ink-900);
    color: var(--text-body);
    cursor: pointer;
    font: inherit;
    margin: 0;
}

.style-btn strong { font-family: var(--font-display); color: var(--text-strong); }
.style-btn span { font-size: var(--text-sm); color: var(--text-muted); }
.style-card.style-active .style-btn { border-color: var(--ember-500); background: color-mix(in srgb, var(--ember-600) 12%, var(--ink-900)); }
.style-btn:hover { border-color: var(--steel-400); }

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

.preset-row {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin: var(--sp-3) 0 var(--sp-2);
    flex-wrap: wrap;
}

.knob-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0 var(--sp-4);
    align-items: end;
}

.knob-grid .btn { grid-column: 1 / -1; justify-self: start; }

/* --- styleguide swatches --------------------------------------------------------------------------------- */

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.swatch {
    border-radius: var(--radius-sm);
    border: 1px solid var(--ink-700);
    overflow: hidden;
    font-size: var(--text-xs);
}

.swatch-chip { height: 3rem; }

.swatch-label {
    padding: var(--sp-1) var(--sp-2);
    background: var(--ink-900);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.sw-ink950 { background: var(--ink-950); }
.sw-ink800 { background: var(--ink-800); }
.sw-ember { background: var(--ember-500); }
.sw-steel { background: var(--steel-400); }
.sw-gain { background: var(--gain); }
.sw-loss { background: var(--loss); }
.sw-paper { background: var(--paper); }
.sw-live { background: var(--live); }

.sg-display {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-strong);
}

.sg-gap { height: var(--sp-2); }
.sg-skel-wide { max-width: 100%; }
.sg-skel-mid { max-width: 60%; }

.killswitch-banner {
    background: var(--live);
    color: var(--live-ink);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    flex-wrap: wrap;
}

.killswitch-banner .btn { margin-top: 0; }

.ks-label {
    display: inline-flex;
    gap: var(--sp-2);
    align-items: center;
    margin: 0;
    color: var(--live-ink);
}

.ks-label input { width: 12rem; margin: 0; }

.ks-engage-row {
    max-width: var(--measure);
    margin: var(--sp-2) auto 0;
    padding: 0 var(--sp-4);
    text-align: right;
}

.btn-ks {
    margin-top: 0;
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-3);
}

.news-list {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
}

.news-item {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--ink-700);
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    flex-wrap: wrap;
}

.news-when {
    font-variant-numeric: tabular-nums;
    min-width: 6.5rem;
}

/* Timestamp on a contributing article in a signal's rationale. */
.article-when {
    display: inline-block;
    margin-right: var(--sp-2);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs, 0.78rem);
    color: var(--text-muted);
}

.tape-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }

.tape-item {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--ink-700);
    flex-wrap: wrap;
}

.tape-when { min-width: 6.5rem; font-variant-numeric: tabular-nums; }

.symbol-link { color: var(--text-strong); text-decoration: none; }
.symbol-link:hover { color: var(--ember-400); text-decoration: underline; }

.add-symbol-row {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
    margin-top: var(--sp-1);
}

.add-symbol-row input { flex: 2; margin-top: 0; }
.add-symbol-row select { flex: 1; margin-top: 0; }
.add-symbol-row .btn { margin-top: 0; }

/* mobile */
@media (max-width: 640px) {
    .container { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
    .site-nav { gap: var(--sp-2); }
    .data-table { font-size: var(--text-sm); }
}