/* Tokens copied from the Riptide website (src/app/(site)/globals.css) */
:root {
  --brand-light: #75c1e0; --brand: #1c81be; --brand-teal: #2596be; --brand-deep: #0b2e4f; --abyss: #06131f;
  --bg: #f4f6f5; --surface: #ffffff; --surface-2: #e9eff1;
  --ink: #0a1a2a; --ink-muted: #4a5c6d; --ink-faint: rgb(10 26 42 / 0.38);
  --line: rgb(10 26 42 / 0.12); --line-strong: rgb(10 26 42 / 0.28);
  --link: #1f6fa3; --accent: #a65a0a; --accent-soft: rgb(166 90 10 / 0.1);
  --pos: #1c81be; --neg: #b4532a; --bench: #a65a0a;
  --shadow: 0 1px 2px rgb(10 26 42 / 0.06), 0 12px 32px rgb(10 26 42 / 0.08);
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --fs-micro: 0.6875rem; --gutter: max(16px, 3vw);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06131f; --surface: #0c1f31; --surface-2: #10283e;
    --ink: #e8f0f4; --ink-muted: #9db2c3; --ink-faint: rgb(232 240 244 / 0.4);
    --line: rgb(232 240 244 / 0.13); --line-strong: rgb(232 240 244 / 0.3);
    --link: #75c1e0; --accent: #f0a24a; --accent-soft: rgb(240 162 74 / 0.12);
    --pos: #75c1e0; --neg: #e8875a; --bench: #f0a24a;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #06131f; --surface: #0c1f31; --surface-2: #10283e;
  --ink: #e8f0f4; --ink-muted: #9db2c3; --ink-faint: rgb(232 240 244 / 0.4);
  --line: rgb(232 240 244 / 0.13); --line-strong: rgb(232 240 244 / 0.3);
  --link: #75c1e0; --accent: #f0a24a; --accent-soft: rgb(240 162 74 / 0.12);
  --pos: #75c1e0; --neg: #e8875a; --bench: #f0a24a;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.micro {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.5;
}
.serif { font-family: var(--font-serif); font-weight: 400; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Header */
header.top {
  display: flex; align-items: center; gap: 20px; justify-content: space-between;
  padding: 18px var(--gutter); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand img { height: 34px; width: auto; }
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}
.brand .divider { width: 1px; height: 30px; background: var(--line-strong); }
.brand h1 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand h1 em { color: var(--ink-muted); }
.top-actions { display: flex; gap: 8px; align-items: center; }

/* Buttons — bracket/mono style from the site */
.btn {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--line-strong); padding: 9px 14px; cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn:hover { border-color: var(--ink); }
.btn.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.solid:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: progress; }

/* Layout */
main.report-main {
  display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 20px;
  padding: 20px var(--gutter) 40px; max-width: 1600px; margin: 0 auto;
}
@media (max-width: 960px) { main.report-main { grid-template-columns: minmax(0, 1fr); } }
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 20px 22px; min-width: 0; }
.panel > h2 {
  margin: 0 0 16px; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.panel > h2 .aside { color: var(--ink-faint); letter-spacing: 0.08em; }

/* Strategy toggle */
.strategy-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.strategy-list .btn { text-align: left; padding: 11px 14px; font-size: 0.75rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 0.82rem; }
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 0.78rem; }
.pill { display: inline-block; padding: 1px 8px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid currentColor; }
.pill.prelim { color: var(--accent); }
.pill.final { color: var(--brand); }

/* Date filter */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.dates label { display: flex; flex-direction: column; gap: 4px; }
.dates input { border: 1px solid var(--line-strong); background: var(--bg); padding: 7px 8px; font-family: var(--font-mono); font-size: 0.8rem; min-width: 0; }
.row-actions { display: flex; gap: 8px; }
.hint { margin-top: 10px; font-size: 0.75rem; color: var(--ink-muted); }

/* Stats table */
.stats .grp { margin: 14px 0 4px; }
.stats .grp:first-child { margin-top: 0; }
.stats .r { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.stats .r span:last-child { font-family: var(--font-mono); font-size: 0.8rem; }

/* Monthly heatmap */
.heat { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--font-mono); font-size: 0.78rem; }
.heat col.yc { width: 56px; } .heat col.tc { width: 64px; }
@media (max-width: 700px) { .heat { font-size: 0.6rem; } .heat col.yc { width: 32px; } .heat col.tc { width: 38px; } }
.heat th { color: var(--ink-muted); font-weight: 500; padding: 2px 0 6px; }
.heat td { text-align: center; padding: 10px 0; border: 2px solid var(--surface); white-space: nowrap; overflow: hidden; }
.heat td.y { text-align: left; color: var(--ink-muted); }
.heat td.yr { font-weight: 600; }
.heat td.prelim { font-style: italic; outline: 1px dashed var(--accent); outline-offset: -3px; }
.legend-note { margin-top: 10px; font-size: 0.72rem; color: var(--ink-muted); }

/* Best/worst */
.bw { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bw .r { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; padding: 4px 0; border-bottom: 1px solid var(--line); }
.up { color: var(--pos); } .down { color: var(--neg); }

/* Yearly */
.years { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.years div { padding: 8px 10px; }
.years .v { font-family: var(--font-mono); font-size: 1.05rem; }

/* Headline */
.headline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
@media (max-width: 700px) { .headline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.headline > div { padding: 14px 16px 16px 0; border-top: 1px solid var(--line); }
.headline .label { font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 8px; }
.headline .value { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Banners */
.banners { display: flex; flex-direction: column; gap: 8px; }
.banner { border: 1px solid var(--line); border-left: 3px solid var(--brand); background: var(--surface); padding: 10px 14px; font-size: 0.85rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.banner.warn { border-left-color: var(--accent); }
.banner.err { border-left-color: var(--neg); }
.banner b { font-weight: 600; }
.banner .micro { flex: none; }

/* Charts */
.chart-wrap { position: relative; height: 320px; }
.chart-wrap.short { height: 220px; }
.chart-actions { display: flex; gap: 8px; }
.chart-actions .btn { padding: 5px 10px; font-size: 0.64rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1200px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }

footer { padding: 24px var(--gutter) 40px; max-width: 1600px; margin: 0 auto; color: var(--ink-muted); font-size: 0.78rem; border-top: 1px solid var(--line); }
.loading { position: fixed; inset: 0; display: none; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); z-index: 20; }
.loading.on { display: grid; }
.loading .box { background: var(--surface); border: 1px solid var(--line); padding: 18px 22px; box-shadow: var(--shadow); max-width: 420px; }
details.recon summary { cursor: pointer; }
details.recon table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.72rem; margin-top: 8px; }
details.recon td, details.recon th { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: right; }
details.recon td:first-child, details.recon th:first-child { text-align: left; }

/* allocator-mode extras */
.request-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.request-box textarea { width: 100%; min-height: 70px; border: 1px solid var(--line-strong); background: var(--bg); padding: 8px; font: inherit; font-size: 0.85rem; resize: vertical; margin: 8px 0; }
.request-status { font-size: 0.8rem; color: var(--ink-muted); margin-top: 8px; }
.top-actions a.btn { text-decoration: none; display: inline-block; }
[hidden] { display: none !important; }