/* ---------- Framework defaults (Blazor template) ---------- */
h1:focus { outline: none; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- Tokens ----------
   Two themes on <html data-theme="dark|light">. Dark is the default (also when the attribute is missing);
   js/theme.js applies the visitor's saved choice before first paint. Every colour below the tokens comes
   from a variable, so a component looks right in both themes. */
:root {
    --brand: #f7931a;       /* Bitcoin orange: logo, highlights, fills (same in both themes) */
    --radius: 10px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root, [data-theme="dark"] {
    color-scheme: dark;
    --bg: #12110e;          /* warm near-black, matching the warm light theme */
    --surface: #1b1a16;
    --surface-2: #22201c;
    --border: #2e2c27;
    --border-strong: #3d3a33;
    --text: #f2efe9;
    --text-2: #c4beb3;
    --text-3: #8f897e;
    --accent: #f5a524;      /* readable orange for text, links and focus on dark */
    --accent-soft: rgba(247, 147, 26, 0.12);
    --accent-line: rgba(245, 165, 36, 0.45);
    --up: #3fbf6e;
    --up-soft: rgba(63, 191, 110, 0.10);
    --up-line: rgba(63, 191, 110, 0.35);
    --down: #f0625a;
    --down-soft: rgba(240, 98, 90, 0.10);
    --down-line: rgba(240, 98, 90, 0.35);
    --live: #22c55e;
    --warn-bg: #2a2112;
    --warn-border: #5c4520;
    --warn-text: #f3c77a;
    --info-bg: rgba(91, 156, 240, 0.10);
    --info-border: rgba(91, 156, 240, 0.35);
    --info-text: #9cc3f5;
    --tooltip-bg: #34312b;
    --tooltip-text: #f7f5f0;
    --neutral-fill: #4a463f;
    --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f5f2;          /* warm off-white, not the usual cool grey */
    --surface: #ffffff;
    --surface-2: #faf9f7;
    --border: #e7e4de;
    --border-strong: #d6d2ca;
    --text: #15130f;
    --text-2: #4a463f;
    --text-3: #7d776d;
    --accent: #b45309;      /* readable orange for text, links and focus */
    --accent-soft: rgba(247, 147, 26, 0.08);
    --accent-line: rgba(180, 83, 9, 0.4);
    --up: #0b7a35;
    --up-soft: rgba(11, 122, 53, 0.06);
    --up-line: rgba(11, 122, 53, 0.3);
    --down: #c7362f;
    --down-soft: rgba(199, 54, 47, 0.06);
    --down-line: rgba(199, 54, 47, 0.3);
    --live: #16a34a;
    --warn-bg: #fff7e6;
    --warn-border: #f2d49b;
    --warn-text: #6b4300;
    --info-bg: rgba(42, 120, 214, 0.06);
    --info-border: rgba(42, 120, 214, 0.3);
    --info-text: #1d4f8f;
    --tooltip-bg: #1d1a15;
    --tooltip-text: #ffffff;
    --neutral-fill: #cfcac1;
    --shadow: rgba(21, 19, 15, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.small { font-size: 12px; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- App bar ---------- */
.appbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.appbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; display: block; }
.status { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-3); min-width: 0; }
.status-time { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-2); font-weight: 500; }
.status-source { color: var(--text-3); font-weight: 400; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.status-dot.live { background: var(--live); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.status-dot.delayed { background: #d97706; }
.icon-button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.icon-button svg { width: 16px; height: 16px; }
.icon-button:hover { color: var(--text); background: var(--surface-2); }
.icon-button.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* Theme toggle: shows the theme you'd switch TO (sun in dark, moon in light). */
.theme-toggle { width: 34px; justify-content: center; padding: 0; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 28px 24px 40px; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.section-gap { margin-top: 16px; }

.notice { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: var(--warn-text); margin-bottom: 16px; }

/* ---------- Hero: price and the next-hour answer ---------- */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: end; }
.hero-block { min-width: 0; }
.hero-forecast { justify-self: end; padding-left: 24px; border-left: 3px solid var(--brand); }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; flex-wrap: wrap; }
.price { font-size: 44px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.change { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hero-range { font-size: 32px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; white-space: nowrap; }
.hero-range .dash { color: var(--text-3); font-weight: 400; }
.hero-sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }

.facts { list-style: none; margin: 18px 0 20px; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--text-2); }
.facts li { display: inline-flex; align-items: center; gap: 6px; }
.facts li.facts-conditions { flex-direction: column; align-items: flex-start; gap: 2px; }
.facts li.facts-conditions > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.facts-note { font-size: 12px; color: var(--text-3); }
.facts-link { color: var(--accent); font-weight: 500; text-decoration: none; }
.facts-link:hover { text-decoration: underline; }
.facts strong { color: var(--text); font-weight: 600; }
.facts strong.up, .facts strong.down { color: inherit; }
.facts strong.up { color: var(--up); }
.facts strong.down { color: var(--down); }

/* ---------- Info tooltips ---------- */
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--text-3); font: italic 600 10px/1 Georgia, serif; cursor: help; vertical-align: middle; flex: none; margin-left: 4px; }
.info:hover, .info:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: -10px; z-index: 30; width: max-content; max-width: min(300px, 80vw); padding: 8px 10px; border-radius: 6px; background: var(--tooltip-bg); color: var(--tooltip-text); font: 400 12px/1.45 var(--font); text-align: left; white-space: normal; box-shadow: 0 6px 20px var(--shadow); display: none; pointer-events: none; }
.info.info-end::after { left: auto; right: -10px; }
/* Only in the layout while shown: a hidden but positioned tooltip would still widen the page on phones. */
.info:hover::after, .info:focus::after { display: block; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.card-title { font-size: 14px; }
.card-meta { font-size: 12px; color: var(--text-3); }
.card-body { padding: 16px 20px; }

/* ---------- Controls ---------- */
.tabs { display: flex; gap: 20px; align-self: stretch; }
.tab { position: relative; border: 0; background: none; padding: 0; cursor: pointer; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--brand); border-radius: 2px; }

.toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-label { font-size: 12px; color: var(--text-3); }

.segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; }
.segmented button { border: 0; background: none; padding: 3px 10px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.segmented button:disabled { color: var(--text-3); opacity: 0.5; cursor: not-allowed; }

.link-button { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 500; }
.link-button:hover { text-decoration: underline; }

/* ---------- Chart ---------- */
.chart-box { position: relative; height: 420px; touch-action: pan-y; } /* horizontal drags pan the chart */
.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.chart-zoom { display: flex; gap: 4px; flex: none; }
.zoom-button { min-width: 28px; height: 26px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; }
.zoom-button:hover { color: var(--text); border-color: var(--text-3); }
.zoom-reset { font-size: 12px; }
.caption { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- Inspector (clicked point) ---------- */
.inspector { border-top: 1px solid var(--border); background: var(--surface-2); padding: 14px 20px 16px; border-radius: 0 0 var(--radius) var(--radius); }
.inspector-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.inspector-title-row { display: flex; align-items: center; gap: 10px; }
.inspector-title { font-size: 13px; font-weight: 600; }
.inspector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; margin: 0; }
.inspector-grid dt { font-size: 12px; color: var(--text-3); }
.inspector-grid dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inspector-grid dd .small { font-weight: 400; margin-left: 6px; }
.inspector-note { margin-top: 10px; font-size: 12px; color: var(--text-2); }

/* ---------- Status pills (only for exceptions) ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-good { color: var(--up); border-color: var(--up-line); background: var(--up-soft); }
.pill-bad { color: var(--down); border-color: var(--down-line); background: var(--down-soft); }
.pill-neutral { color: var(--text-2); border-color: var(--border-strong); background: var(--surface); }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data th { font-size: 12px; font-weight: 500; color: var(--text-3); background: var(--surface-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data.outlook td, table.data.outlook th { padding: 11px 20px; }
table.data.outlook tbody tr:last-child td { border-bottom: 0; }
table.data.outlook th .info { margin-left: 4px; }
.outlook-horizon { font-weight: 600; }

/* ---------- Buttons & inputs ---------- */
.button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 7px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.button:hover { background: var(--surface-2); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 12px; color: var(--text-3); }
.input { border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 10px; font: inherit; font-size: 15px; width: 160px; background: var(--surface); color: var(--text); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* ---------- Alerts ---------- */
.alert-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; border: 1px solid; }
.alert-banner.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.alert-banner.info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.alert-banner strong { font-weight: 600; margin-right: 4px; }

/* New-price toast, bottom right. */
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px); padding: 10px 12px 10px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13px; box-shadow: 0 6px 20px var(--shadow); animation: toast-in 0.2s ease-out; }
.toast strong { font-weight: 600; margin-right: 6px; }
.toast .change { margin-right: 6px; font-size: inherit; }
.toast-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Cookie consent, bottom left (the price toast is bottom right). Both buttons look the same on purpose:
   EU regulators expect declining to be as easy as accepting. */
.cookie-banner { position: fixed; left: 20px; bottom: 20px; z-index: 55; max-width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 13px; box-shadow: 0 6px 20px var(--shadow); }
.cookie-banner[hidden] { display: none; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cookie-settings { margin-left: 8px; }

/* Connection banner, shown by Blazor's reconnect classes on #components-reconnect-modal. */
.reconnect { display: none; position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 60; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-text); font-size: 13px; font-weight: 500; box-shadow: 0 6px 20px var(--shadow); white-space: nowrap; }
.reconnect a { color: inherit; font-weight: 600; }
.reconnect-dot { width: 8px; height: 8px; border-radius: 50%; background: #d97706; animation: reconnect-pulse 1.2s ease-in-out infinite; }
.reconnect-text { display: none; }
.reconnect.components-reconnect-show, .reconnect.components-reconnect-failed, .reconnect.components-reconnect-rejected { display: inline-flex; }
.reconnect.components-reconnect-show .reconnect-trying,
.reconnect.components-reconnect-rejected .reconnect-reloading,
.reconnect.components-reconnect-failed .reconnect-gave-up { display: inline; }
.reconnect.components-reconnect-failed .reconnect-dot { animation: none; background: var(--down); }
@keyframes reconnect-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .reconnect-dot { animation: none; } }

/* ---------- Probability calculator ---------- */
.calc-inputs { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.calc-result { margin-top: 18px; }
.calc-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.calc-pct { font-size: 36px; font-weight: 650; letter-spacing: -0.03em; }
.calc-caption { color: var(--text-2); }
.calc-caption strong { color: var(--text); }
.prob-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 12px; gap: 2px; background: var(--surface); }
.prob-below { background: var(--neutral-fill); }
.prob-above { background: var(--brand); }
.prob-legend { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-2); }
.key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.key-below { background: var(--neutral-fill); }
.key-above { background: var(--brand); }
.calc-note { margin-top: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calc-actions { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { max-width: 1200px; margin: 0 auto; padding: 0 24px 32px; font-size: 12px; color: var(--text-3); }
.footer .about { margin-bottom: 14px; }
.footer .about summary { cursor: pointer; color: var(--text-2); font-weight: 500; width: max-content; }
.footer .about p { max-width: 720px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.prose a, .footer a, .page-note a { color: var(--accent); }

/* ---------- Expected vs actual volatility ---------- */
.card-title .info { margin-left: 6px; }
.gauge-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gauge-figure { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; }
.gauge { position: relative; height: 22px; margin: 16px 0 2px; }
.gauge-track { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.gauge-mark { position: absolute; top: 2px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; }
.gauge-implied, .key-implied { background: var(--brand); }
.gauge-realised, .key-realised { background: var(--text-2); }
.gauge-realised-24h, .key-realised-24h { background: var(--neutral-fill); }
.gauge-implied { width: 6px; margin-left: -3px; top: 0; height: 22px; box-shadow: 0 0 0 2px var(--surface); }
.gauge-scale { display: flex; justify-content: space-between; }
.gauge-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 14px 0 0; }
.gauge-legend dt { font-size: 12px; color: var(--text-3); }
.gauge-legend dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.gauge-legend dd .small { font-weight: 400; margin-left: 6px; }
.gauge-note { margin-top: 12px; color: var(--text-2); }

/* ---------- Scheduled releases ---------- */
.events { list-style: none; margin: 0; padding: 0; }
.event { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 11px 20px; border-bottom: 1px solid var(--border); }
.event:last-child { border-bottom: 0; }
.event-main { display: flex; flex-direction: column; gap: 1px; }
.event-title { font-weight: 600; }
.event-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.event-banner { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text); }
.event-banner svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }
.event-banner strong { font-weight: 600; }

/* ---------- 14-day report sign-up ---------- */
.signup .card-body { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: center; }
.signup-text p { margin-top: 4px; max-width: 560px; }
.signup-form { display: flex; gap: 8px; flex-wrap: wrap; }
.signup-form .input { width: 240px; }
.signup-button { background: var(--brand); border-color: var(--brand); color: #1b1a16; font-weight: 600; text-decoration: none; justify-content: center; }
.signup-button:hover { background: var(--accent); }
.signup-note { grid-column: 1 / -1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .signup .card-body { grid-template-columns: 1fr; } .signup-form .input { flex: 1; width: auto; } }

/* ---------- Hit rate over time ---------- */
.hitrate-box { position: relative; height: 240px; margin-bottom: 10px; }
@media (max-width: 640px) { .hitrate-box { height: 200px; } }

/* ---------- Live track record by model ---------- */
.record-model + .record-model { border-top: 1px solid var(--border); }
.record-title { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 12px 20px 8px; }
table.data.record td, table.data.record th { padding: 8px 20px; }
table.data.record tbody tr:last-child td { border-bottom: 0; }

/* ---------- How it works ---------- */
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 8px; }
.table-scroll { overflow-x: auto; margin: 12px 0 8px; }
table.data.backtest { font-size: 13px; background: var(--surface); }
table.data.backtest th { vertical-align: bottom; }
table.data.backtest td, table.data.backtest th { white-space: nowrap; }
.footer-link { margin-left: 8px; }

/* ---------- Status page (internal) ---------- */
.status-page h1 { font-size: 24px; margin-bottom: 4px; }
.status-page h2 { font-size: 15px; margin: 24px 0 8px; }
.status-page table.data { background: var(--surface); }
.status-page th { width: 200px; }
.status-page code { font-size: 11px; word-break: break-all; color: var(--text-2); }

/* ---------- About page ---------- */
.brand-link { color: inherit; text-decoration: none; }
.status a.icon-button { text-decoration: none; }
.prose { max-width: 720px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.prose h1 { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); margin-bottom: 14px; }
.prose h2 { font-size: 17px; color: var(--text); margin: 28px 0 8px; padding-left: 12px; border-left: 3px solid var(--brand); }
.prose p + p { margin-top: 12px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose .lead { font-size: 17px; color: var(--text); }
.prose-note { margin-top: 32px !important; padding-top: 14px; border-top: 1px solid var(--border); }

.disclaimer { max-width: 720px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); background: var(--surface); }
.disclaimer h2 { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.disclaimer p { font-size: 12px; line-height: 1.55; color: var(--text-2); }

.company-notice { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); max-width: 860px; }

.footer-meta { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- Narrow screens ---------- */
@media (max-width: 760px) {
    .appbar-inner, .container, .footer { padding-left: 16px; padding-right: 16px; }
    .container { padding-top: 20px; }
    .status-source, .icon-button-label { display: none; }
    .icon-button { width: 34px; justify-content: center; padding: 0; }

    .hero { grid-template-columns: 1fr; gap: 16px; }
    .hero-forecast { justify-self: stretch; padding: 12px 0 0; border-left: 0; border-top: 3px solid var(--brand); }
    .price { font-size: 38px; }
    .hero-range { font-size: 26px; }
    .facts { margin-top: 14px; }

    /* One scrollable row of controls instead of three wrapped ones. */
    .card-header .toolbar { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
    .card-header .toolbar::-webkit-scrollbar { display: none; }
    .tab.active::after { bottom: -6px; }
    .chart-box { height: 300px; }
    .card-body { padding: 12px 14px; }
    .chart-foot { align-items: flex-start; }
    table.data.outlook td, table.data.outlook th { padding: 10px 14px; }
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (max-width: 520px) {
    .hide-narrow { display: none; }
}