/* Shared pages (/research, /market). Palette from Outthunder.Mobile/wwwroot/app.css, as on the
   landing page, so the site and the app look related. */
:root {
    --ink: #000000;
    --surface: #ffffff;
    --muted: #6b6b6b;
    --hairline: #d9d9d9;
    --accent: #4f98ff;
    --accent-strong: #1f6fe0;
    --accent-soft: #eaf2ff;
    --gain: #1e7a43;
    --gain-soft: #e6f4ea;
    --loss: #b3261e;
    --loss-soft: #fdecea;
    --logo-filter: none;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f2f2f2;
        --surface: #0b0d12;
        --muted: #a0a4ab;
        --hairline: #2a2e36;
        --accent-strong: #7fb3ff;
        --accent-soft: #14233a;
        --gain: #5cc78a;
        --gain-soft: #12281c;
        --loss: #f08a82;
        --loss-soft: #2e1614;
        /* The logo is black on transparent; flip it so it stays visible. */
        --logo-filter: invert(1);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.55;
}

header, main, footer {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px;
}

header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--hairline);
}

/* Sits opposite the brand. A link, not a label: it goes to the notice that explains it. */
.beta-badge {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--accent-strong);
    border-radius: 999px;
    color: var(--accent-strong);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    white-space: nowrap;
}

.beta-badge:hover {
    background: var(--accent-soft);
}

footer {
    border-top: 1px solid var(--hairline);
    color: var(--muted);
    font-size: 0.875rem;
}

a { color: var(--accent-strong); }

a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--accent-strong);
    outline-offset: 2px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.brand img {
    width: 28px;
    height: auto;
    filter: var(--logo-filter);
}

h1 {
    margin: 16px 0 4px;
    font-size: 2rem;
}

.meta {
    margin: 0 0 16px;
    color: var(--muted);
}

/* Decision chip, as in the app. */
.chip {
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid var(--hairline);
}

.chip.decision-add { background: var(--gain-soft); border-color: var(--gain); color: var(--gain); }
.chip.decision-hold { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.chip.decision-sell { background: var(--loss-soft); border-color: var(--loss); color: var(--loss); }

/* Rendered report text. */
.markdown h1, .markdown h2, .markdown h3 { font-size: 1.1rem; margin-top: 1.25rem; }
.markdown strong { color: var(--accent-strong); }
.markdown ul { padding-left: 1.2rem; }

/* Wide tables scroll on their own rather than widening the page. */
.markdown table { display: block; overflow-x: auto; border-collapse: collapse; }
.markdown th, .markdown td { border-bottom: 1px solid var(--hairline); padding: 0.3rem 0.5rem; text-align: left; }

/* Report sections: the decision open, the reasoning folded. */
.report-section h2,
.report-section summary {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-strong);
    margin: 1rem 0 0.25rem;
}

details.report-section { border-top: 1px solid var(--hairline); }

details.report-section summary {
    cursor: pointer;
    padding: 0.7rem 0;
    margin: 0;
}

.context-link { font-weight: 600; }

/* The question the run answered, at the top of its decision. */
.asked { color: var(--muted); font-style: italic; }
.asked strong { font-style: normal; }

/* The price chart under the Trend section: SVG drawn from the report's own data. */
/* Where the price stands: one row, the price cell two lines (a close over today's price). */
.price-status { width: 100%; margin: 0.25rem 0 0.75rem; border-collapse: collapse; font-size: 0.9rem; }
.price-status th { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: left; padding: 0 0.5rem 0.15rem 0; }
.price-status td { vertical-align: top; padding: 0.15rem 0.5rem 0 0; }
.price-status .ps-label { color: var(--muted); }
.price-status .gain { color: #1e7a43; font-weight: 700; }
.price-status .loss { color: #b3261e; font-weight: 700; }

/* The text under a chart: a caption to the picture, so it reads smaller and quieter. */
.chart-caption { font-size: 0.9rem; color: var(--muted); }
.chart-caption p { margin: 0.25rem 0 0.5rem; }

.price-chart-figure { margin: 0.75rem 0; }
.price-chart { display: block; width: 100%; height: auto; }

/* ---- Legal pages (/terms, /privacy) ------------------------------------- */
.legal h2 {
    margin: 2rem 0 0.5rem;
    font-size: 1.15rem;
    color: var(--accent-strong);
}

.legal p, .legal li { margin: 0 0 0.75rem; }

.legal ul { padding-left: 1.2rem; }

/* A fact the operator has not supplied yet. Deliberately jarring. */
.tbd {
    background: var(--loss-soft);
    color: var(--loss);
    font-weight: 700;
    padding: 0 0.3rem;
}