/* Public report styling.
 *
 * Tokens are lifted verbatim from docs/design/handoff/tokens.css so this page and the desktop
 * app read as one product. The platform is dark-only by design, so this page is too.
 *
 * Note the semantic split the design system encodes and this file honours: the electric green
 * (--color-accent-primary) is reserved for live state-change events, and static positive
 * metrics use the soft sage (--color-success-soft). Using the loud green for P/L is what
 * makes a dashboard read monotone.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  --color-bg-base: #05070D;
  --color-bg-surface: #0B0F18;
  --color-bg-surface-2: #131826;
  --color-bg-surface-3: #1B2233;

  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  --color-text-primary: #F5F7FA;
  --color-text-secondary: #A6AEBE;
  --color-text-tertiary: #8A93A6;
  --color-text-accent: #00E57A;

  --color-accent-primary: #00E57A;
  --color-accent-primary-muted: rgba(0, 229, 122, 0.12);

  --color-success-soft: #4FBF8A;
  --color-success-muted: rgba(0, 229, 122, 0.12);
  --color-danger: #FF4060;
  --color-danger-soft: #D85068;
  --color-danger-muted: rgba(255, 64, 96, 0.12);
  --color-warning: #FFC34D;
  --color-warning-muted: rgba(255, 195, 77, 0.12);

  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem;
  --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem; --text-3xl: 1.875rem;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-pill: 0.08em; --tracking-wide: 0.02em;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 9999px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.4);

  --motion-fast: 120ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Chart-surface aliases, so mark colours are named by the job they do. */
  --pos: var(--color-success-soft);
  --neg: var(--color-danger-soft);
  --grid: rgba(255, 255, 255, 0.07);
  --axis-ink: var(--color-text-tertiary);
}

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

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

/* Any class here that sets `display` out-specifies the browser's own [hidden] rule, so
 * toggling `.hidden = true` in JS would leave the element on screen. State beats layout. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-bg-surface-3); color: var(--color-text-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: var(--space-4); top: var(--space-2); }

:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  position: sticky; top: 0; z-index: 20;
}
.topbar__in {
  max-width: 1080px; margin: 0 auto; padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.brand { font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: -0.01em; }
.brand__s { color: var(--color-text-primary); }
.brand__e { color: var(--color-accent-primary); }

.topbar__meta { display: flex; align-items: center; gap: var(--space-3); }
.topbar__stamp {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-tertiary); letter-spacing: var(--tracking-wide);
}

.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-pill);
  white-space: nowrap;
}
.pill--ro { background: var(--color-bg-surface-3); color: var(--color-text-secondary); cursor: help; }

/* Verdict pills mirror the desktop app's thresholds and colours exactly. */
.verdict {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); border: 1px solid transparent;
  white-space: nowrap; cursor: help;
}
.verdict--profitable { color: var(--color-success-soft); background: rgba(0,229,122,0.10); border-color: rgba(0,229,122,0.30); }
.verdict--losing     { color: var(--color-danger-soft);  background: rgba(255,64,96,0.10); border-color: rgba(255,64,96,0.32); }
.verdict--marginal   { color: var(--color-warning);      background: var(--color-warning-muted); border-color: rgba(255,195,77,0.30); }
.verdict--low-data   { color: var(--color-text-tertiary);background: rgba(255,255,255,0.04); border-color: var(--color-border-default); }

/* ---------------------------------------------------------------- intro */
main { padding: var(--space-8) 0 var(--space-10); }
.intro { margin-bottom: var(--space-6); }
.intro h1 { font-size: var(--text-3xl); }
.intro__tag {
  margin: var(--space-2) 0 0; color: var(--color-text-secondary);
  font-size: var(--text-sm); max-width: 62ch;
}

/* ---------------------------------------------------------------- account */
/* Live figures sit above the filter row because they are not scoped by it - they are
 * "right now", not "over the selected period". */
.acct {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
}
.acct__item { display: flex; flex-direction: column; gap: 2px; }
.acct__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-pill);
  color: var(--color-text-tertiary);
}
.acct__value {
  font-family: var(--font-mono); font-size: var(--text-lg);
  font-weight: var(--weight-medium); font-variant-numeric: proportional-nums;
  color: var(--color-text-primary);
}
.acct__stamp {
  margin-left: auto; align-self: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
/* The one place the loud accent green is correct: a live, changing value. */
.acct__stamp::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-primary-muted);
}

/* ---------------------------------------------------------------- idle */
.idle {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.idle h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.idle p {
  margin: 0 auto; max-width: 46ch;
  color: var(--color-text-secondary); font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- filters */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  padding: var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-6);
}
.filters__group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.filters__lbl {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-pill);
  color: var(--color-text-tertiary);
}
.segmented { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.segmented button {
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-secondary); background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.segmented button:hover { background: var(--color-bg-surface-2); color: var(--color-text-primary); }
.segmented button[aria-selected="true"] {
  background: var(--color-accent-primary-muted);
  color: var(--color-text-accent);
  border-color: rgba(0, 229, 122, 0.35);
}

/* ---------------------------------------------------------------- status */
.status { color: var(--color-text-secondary); font-size: var(--text-sm); padding: var(--space-6) 0; }
.status--error { color: var(--color-danger-soft); }
.status:empty { display: none; }

/* Refetch holds the previous render rather than flashing a skeleton. */
.report { transition: opacity var(--motion-fast) var(--ease-out); }
.report.is-stale { opacity: 0.45; }

/* ---------------------------------------------------------------- kpi */
.kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.stat {
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-card);
}
.stat--primary { border-color: var(--color-border-strong); }
.stat__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-pill); text-transform: uppercase;
  color: var(--color-text-tertiary); display: block;
}
/* Proportional figures on stat values - tabular-nums makes a big number look loose. */
.stat__value {
  font-family: var(--font-mono); font-size: var(--text-xl);
  font-weight: var(--weight-medium); line-height: 1.15; display: block;
  margin-top: 2px; font-variant-numeric: proportional-nums;
}
.stat--primary .stat__value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.stat__sub {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary);
  display: block; margin-top: 2px;
}
.is-pos { color: var(--color-success-soft); }
.is-neg { color: var(--color-danger-soft); }
.is-flat { color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-card); margin-bottom: var(--space-5);
}
.card__head { margin-bottom: var(--space-4); }
.card__head h2 { font-size: var(--text-base); }
.card__sub {
  margin: var(--space-1) 0 0; color: var(--color-text-tertiary); font-size: var(--text-xs);
}

/* ---------------------------------------------------------------- charts */
.chart { margin: 0; }
/* The container grows with its content so the x-axis band is never clipped into a
 * nested scrollbar. */
.chart__plot { width: 100%; }
.chart__plot svg { display: block; width: 100%; height: auto; overflow: visible; }

.grid-line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.zero-line { stroke: var(--color-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.axis-txt {
  font-family: var(--font-mono); font-size: 9px; fill: var(--axis-ink);
  font-variant-numeric: tabular-nums;
}
.eq-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.eq-area { stroke: none; }
.eq-dot { stroke: var(--color-bg-surface); stroke-width: 2; }
.bar { shape-rendering: crispEdges; }
.bar--pos { fill: var(--pos); }
.bar--neg { fill: var(--neg); }
.hover-band { fill: transparent; }
.hover-band:hover { fill: rgba(255,255,255,0.04); }
.crosshair { stroke: var(--color-border-strong); stroke-width: 1; pointer-events: none; }
.chart__empty {
  color: var(--color-text-tertiary); font-size: var(--text-sm);
  padding: var(--space-8) 0; text-align: center;
}

/* ---------------------------------------------------------------- tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
  background: var(--color-bg-surface-3); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
  white-space: nowrap; color: var(--color-text-primary);
}
.tip.is-on { opacity: 1; }
.tip__k { color: var(--color-text-tertiary); }

/* ---------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dt th {
  text-align: left; font-family: var(--font-mono); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-pill);
  color: var(--color-text-tertiary); font-weight: var(--weight-regular);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default); white-space: nowrap;
}
.dt td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary); white-space: nowrap;
}
.dt tbody tr:last-child td { border-bottom: 0; }
.dt .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dt .name { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.dt .sub { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.dt th[title] { cursor: help; }

/* ---------------------------------------------------------------- trades table */
.tt th, .tt td { white-space: nowrap; }
.tt__caret {
  width: 20px; padding-left: var(--space-2) !important; padding-right: 0 !important;
  color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs);
}
.tt__sig.is-group { cursor: pointer; }
.tt__sig.is-group:hover td { background: var(--color-bg-surface-2); }
.tt__sig.is-group:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }
.tt__sig.is-open td { border-bottom-color: transparent; }
/* A position row is subordinate to its signal: inset, dimmer, no heavy rule above it. */
.tt__pos td {
  background: rgba(255, 255, 255, 0.015);
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border-subtle);
}
.tt__pos td:nth-child(2) { padding-left: var(--space-5); }
.tt__tgts { font-size: var(--text-2xs); color: var(--color-text-tertiary); }
.tt__tally { display: inline-flex; align-items: center; gap: 3px; }
.tt__tallyn {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-tertiary);
}
.tt__sep { display: inline-block; width: var(--space-2); }

.exit {
  display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide);
  border: 1px solid transparent; cursor: help;
}
/* Coloured by what the exit MEANS for the money, not by the close reason: a trailed stop
 * that locked a gain closes as 'sl' and must never read as a loss. */
.exit--tp    { color: var(--color-success-soft); background: rgba(0,229,122,0.10); border-color: rgba(0,229,122,0.28); }
.exit--trail { color: var(--color-success-soft); background: rgba(0,229,122,0.06); border-color: rgba(0,229,122,0.20); }
.exit--sl    { color: var(--color-danger-soft);  background: rgba(255,64,96,0.10); border-color: rgba(255,64,96,0.28); }
.exit--be,
.exit--flat  { color: var(--color-text-tertiary); background: rgba(255,255,255,0.04); border-color: var(--color-border-default); }

.dir { font-weight: var(--weight-semibold); font-size: var(--text-2xs); letter-spacing: var(--tracking-pill); }
.dir--buy { color: var(--color-success-soft); }
.dir--sell { color: var(--color-danger-soft); }

/* ---------------------------------------------------------------- footer */
.foot {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-6) 0 var(--space-10);
  color: var(--color-text-tertiary); font-size: var(--text-xs);
}
.foot p { margin: 0 0 var(--space-2); max-width: 78ch; }
.foot__dim { color: var(--color-text-disabled, #4A5263); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .intro h1 { font-size: var(--text-2xl); }
  .card { padding: var(--space-4); }
  .filters { gap: var(--space-4); }
  main { padding: var(--space-6) 0 var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.tt__mix {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-secondary); letter-spacing: var(--tracking-wide);
  cursor: help; white-space: nowrap;
}

/* This table has the most columns on the page and was overflowing its card by a hair,
 * pushing Result - the figure anyone actually came for - behind a horizontal scroll.
 * Tighter gutters here only; the other tables keep the roomier default. */
.tt th, .tt td { padding-left: var(--space-2); padding-right: var(--space-2); }

/* ---------------------------------------------------------------- pager */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.pager__count {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary);
}
.pager__ctrls { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.pager__nums { display: flex; align-items: center; gap: var(--space-1); }
.pager button {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-secondary); background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-sm);
  /* Comfortably clickable rather than a pinpoint target. */
  min-width: 30px; padding: var(--space-1) var(--space-2); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.pager button:hover:not(:disabled) {
  background: var(--color-bg-surface-2); color: var(--color-text-primary);
}
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager button[aria-current="page"] {
  background: var(--color-accent-primary-muted);
  color: var(--color-text-accent);
  border-color: rgba(0, 229, 122, 0.35);
}
.pager__gap { color: var(--color-text-tertiary); padding: 0 2px; }
.pager__size {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-secondary); background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); cursor: pointer;
}

@media (max-width: 620px) {
  .pager { justify-content: center; }
  .pager__count { width: 100%; text-align: center; }
}