/* AlgoPuzzle UI tokens + components (feature/backtest-ui, 2026-10-05).
   Ported from the approved backtest prototype (algopuzzle-backtest-demo/web/styles.css,
   docs/UX_NOTES.md): Inter with tabular figures for numbers, 8 px grid, 8 px radius,
   1 px borders, emerald only for the primary action, ONE profit/loss pair
   (--pos / --neg) for numbers AND charts.

   Everything is scoped under `.ap-ui` so this file can never restyle an existing
   Tailwind page by accident: put `class="ap-ui"` on <body> for a fully redesigned
   page, or on a single <section> to use the system inside an otherwise untouched
   page (index.html's backtesting section). Load Inter with:
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" /> */

.ap-ui {
  color-scheme: dark;
  /* colour */
  --bg: #030712;
  --surface: #0a101c;          /* cards, slightly lifted from the page */
  --surface-2: #111827;        /* inputs, hover */
  --border: #1f2937;
  --border-strong: #374151;
  --text: #f3f4f6;             /* 17.9:1 on --bg */
  --text-2: #d1d5db;           /* 13.6:1 */
  --muted: #9ca3af;            /* 7.6:1 on --bg */
  --accent: #10b981;           /* primary action only */
  --accent-hover: #34d399;
  --on-accent: #03140d;
  --brand: #34d399;            /* the "Puzzle" half of the wordmark */
  --pos: #4cbf8a;              /* profit, take profit (also the charts' `win`) */
  --neg: #ef6b6b;              /* loss, stop loss, drawdown (also the charts' `loss`) */
  --warn: #fbbf24;             /* notice marker only */
  --focus: #6ee7b7;

  /* type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs: 16px;
  --fs-lg: 18px;
  --fs-h2: 20px;
  --fs-h1: 32px;
  --fs-num: 28px;
  --lh: 1.6;
  --lh-tight: 1.25;

  /* space (8 px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius: 8px;
  --content: 1120px;
  --column: 720px;
  --gutter: 24px;

  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--text-2);
  -webkit-font-smoothing: antialiased;
}
body.ap-ui { margin: 0; background: var(--bg); }
.ap-ui *, .ap-ui *::before, .ap-ui *::after { box-sizing: border-box; }
.ap-ui h1, .ap-ui h2, .ap-ui h3, .ap-ui p, .ap-ui dl, .ap-ui dd { margin: 0; }
.ap-ui a { color: inherit; }
.ap-ui strong { color: var(--text); font-weight: 600; }
.ap-ui [hidden] { display: none !important; }
.ap-ui :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* tabular figures wherever numbers are compared; prose keeps proportional figures */
.ap-ui .tnum, .ap-ui .kpis, .ap-ui .stats, .ap-ui .metrics, .ap-ui .price { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

.ap-ui .wrap { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ap-ui .muted { color: var(--muted); }
.ap-ui .small { font-size: var(--fs-sm); }
.ap-ui .pos { color: var(--pos); }
.ap-ui .neg { color: var(--neg); }

/* ---------- type ---------- */
.ap-ui .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.ap-ui .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ap-ui .h3 { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 600; color: var(--text); }
.ap-ui .lead { font-size: var(--fs-lg); color: var(--text-2); max-width: var(--column); }
.ap-ui .meta { font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: baseline; }
.ap-ui .meta strong { font-weight: 500; color: var(--text-2); }
.ap-ui .eyebrow { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }

/* ---------- site header / footer (same content as the rest of the site, tokenised) ---------- */
.ap-ui .ap-header { position: sticky; top: 0; z-index: 40; background: rgba(3, 7, 18, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.ap-ui .ap-header-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.ap-ui .ap-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.ap-ui .ap-brand-name { font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ap-ui .ap-brand-name span { color: var(--brand); }
.ap-ui .ap-nav { display: flex; align-items: center; gap: var(--s6); font-size: var(--fs-sm); }
.ap-ui .ap-nav a { color: var(--muted); text-decoration: none; }
.ap-ui .ap-nav a:hover { color: var(--text); }
.ap-ui .ap-nav a[aria-current="page"] { color: var(--text); font-weight: 500; }
.ap-ui .ap-footer { margin-top: var(--s8); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.ap-ui .ap-footer-note { padding: var(--s6) 0 var(--s5); max-width: 820px; line-height: 1.6; }
.ap-ui .ap-footer-row { padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.ap-ui .ap-social { display: flex; align-items: center; gap: var(--s5); }
.ap-ui .ap-social a { display: inline-flex; text-decoration: none; }
.ap-ui .ap-social a:hover { color: var(--text); }

/* ---------- buttons & links ---------- */
.ap-ui .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: var(--fs); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ap-ui .btn-primary { background: var(--accent); color: var(--on-accent); }
.ap-ui .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.ap-ui .btn-primary:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.ap-ui .btn-secondary { background: transparent; border-color: var(--border-strong); color: var(--text); font-weight: 500; }
.ap-ui .btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
.ap-ui .btn-secondary:disabled { opacity: .55; cursor: not-allowed; }
.ap-ui .btn-sm { min-height: 36px; padding: 0 var(--s4); font-size: var(--fs-sm); }
.ap-ui .btn img { width: 18px; height: 18px; object-fit: contain; }
.ap-ui .link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.ap-ui .link:hover { text-decoration-color: var(--text); }
.ap-ui .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ---------- cards, notices ---------- */
.ap-ui .card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--s5); }
.ap-ui .notice { padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-sm); color: var(--text-2); }
.ap-ui .notice-ok { border-left: 3px solid var(--pos); }
.ap-ui .notice-warn { border-left: 3px solid var(--warn); }
.ap-ui .notice-error { border-left: 3px solid var(--neg); }
.ap-ui .tag { display: inline-block; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: var(--fs-xs); line-height: 20px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* ---------- KPI row: 4 headline numbers ---------- */
.ap-ui .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 0; }
.ap-ui .kpis > div { padding: var(--s4) var(--s5); min-width: 0; }
.ap-ui .kpis > div + div { border-left: 1px solid var(--border); }
.ap-ui .kpis dt { font-size: var(--fs-sm); color: var(--muted); }
.ap-ui .kpis dd { margin-top: var(--s1); font-size: var(--fs-num); line-height: var(--lh-tight); font-weight: 600; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ui .kpis dd.pos { color: var(--pos); }
.ap-ui .kpis dd.neg { color: var(--neg); }
.ap-ui .kpis .sub { margin-top: var(--s1); font-size: var(--fs-sm); color: var(--muted); }

/* compact metric strip (list rows) */
.ap-ui .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--s3); margin: 0; }
.ap-ui .metrics dt { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.ap-ui .metrics dd { margin-top: 2px; font-size: var(--fs-lg); font-weight: 600; color: var(--text); line-height: var(--lh-tight); white-space: nowrap; }
.ap-ui .metrics dd.pos { color: var(--pos); }
.ap-ui .metrics dd.neg { color: var(--neg); }

/* ---------- stats (Details) ---------- */
.ap-ui .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s6); margin: 0; }
.ap-ui .stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); min-width: 0; }
.ap-ui .stats dt { color: var(--muted); font-size: var(--fs-sm); }
.ap-ui .stats dd { color: var(--text); font-size: var(--fs-sm); font-weight: 500; text-align: right; }
.ap-ui .stats dd.pos { color: var(--pos); }
.ap-ui .stats dd.neg { color: var(--neg); }

/* ---------- tabs ---------- */
.ap-ui .tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--border); overflow-x: auto; }
.ap-ui .tabs button {
  background: none; border: 0; cursor: pointer; padding: var(--s3) 0; margin-bottom: -1px; font: inherit;
  font-size: var(--fs); font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.ap-ui .tabs button:hover { color: var(--text); }
.ap-ui .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }

/* ---------- segmented control ($ / %) ---------- */
.ap-ui .seg { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 2px; gap: 2px; min-height: 32px; }
.ap-ui .seg button { border: 0; background: transparent; border-radius: 5px; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--muted); padding: 0 var(--s3); min-width: 36px; white-space: nowrap; }
.ap-ui .seg button[aria-checked="true"] { background: var(--surface-2); color: var(--text); font-weight: 500; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- chart cards ---------- */
.ap-ui .chart-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--s4) var(--s4) var(--s3); }
.ap-ui .chart-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); padding: 0 var(--s2) var(--s3); }
.ap-ui .chart-hint { padding: var(--s2) var(--s2) 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.ap-ui .chart-key { padding: 0 var(--s2) var(--s3); font-size: var(--fs-sm); line-height: 1.5; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); color: var(--text-2); }
.ap-ui .key-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ap-ui .key-sym { font-size: 11px; line-height: 1; }
.ap-ui .key-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.ap-ui .key-zone { display: inline-block; width: 14px; height: 10px; border-radius: 1px; border-top: 2px solid transparent; }
.ap-ui .key-note { color: var(--muted); white-space: normal; }
.ap-ui .chart-host { position: relative; width: 100%; min-width: 0; }
.ap-ui .chart-host--equity { height: 380px; }
.ap-ui .chart-host--price { height: 460px; }
.ap-ui .chart-placeholder {
  min-height: 140px; display: grid; place-items: center; text-align: center; padding: var(--s5);
  border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); font-size: var(--fs-sm);
}

/* ---------- sparkline (assets/ui/sparkline.js) ---------- */
.ap-ui .spark { display: block; width: 100%; overflow: visible; }

/* ---------- details / disclosure ---------- */
.ap-ui details.more { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ap-ui details.more summary { cursor: pointer; padding: var(--s4) 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text); list-style: none; display: flex; align-items: center; gap: var(--s2); }
.ap-ui details.more summary::-webkit-details-marker { display: none; }
.ap-ui details.more summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: var(--s1); }
.ap-ui details.more[open] summary::before { transform: rotate(45deg); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .ap-ui .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-ui .kpis > div:nth-child(3) { border-left: 0; }
  .ap-ui .kpis > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .ap-ui .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-ui .ap-nav { display: none; }
}
@media (max-width: 720px) {
  .ap-ui .stats { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ap-ui { --gutter: 16px; --fs-h1: 26px; --fs-num: 22px; }
  .ap-ui .ap-header-inner { height: 56px; }
  .ap-ui .lead { font-size: var(--fs); }
  .ap-ui .kpis > div { padding: var(--s3) var(--s4); }
  .ap-ui .chart-card { padding: var(--s3) var(--s2) var(--s2); }
  .ap-ui .chart-host--equity { height: 320px; }
  .ap-ui .chart-host--price { height: 380px; }
  .ap-ui .btn-header { min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-sm); }
}