/* Altegio document styles
   Built from the tokens on alteg.io (the "alt-" / "as-" marketing design system, read 2026-10-21).
   For internal reports, briefs and one-pagers. Light and dark themes, print-friendly.

   Fonts: Inter (body), Inter Display = Inter at display optical size (headings), JetBrains Mono (figures, codes).
   Load: https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=JetBrains+Mono:wght@400;500;600&display=swap

   Layout concept: a dark ink masthead with the yellow mark, then a single reading column (max 72ch for prose)
   inside a wider 1120px frame for charts and tables. Sections are separated by space and a hairline, not by cards.
*/

:root {
  /* brand */
  --alt-yellow: #ffcb00;          /* signature yellow: marks, highlights, primary bars */
  --alt-yellow-hover: #fdbe1c;
  --alt-yellow-active: #fdae1c;
  --alt-yellow-soft: #ffeca1;     /* highlight backgrounds, callouts */
  --alt-ink: #22222e;             /* headings, primary text, dark bands */

  /* surfaces */
  --surface: #ffffff;
  --surface-card: #f9fbfd;
  --surface-muted: #f2f3f7;
  --surface-dark: #22222e;
  --surface-dark-2: #14141c;
  --surface-dark-3: #343442;

  /* text */
  --fg: var(--alt-ink);
  --fg-2: #626c77;                /* secondary text */
  --fg-3: #8a8a99;                /* captions; darkened from #a3a3b1 to pass 3:1 on white */
  --fg-on-dark: #ffffff;
  --fg-on-dark-2: #f9fbfd;
  --fg-on-dark-3: #919299;

  /* lines */
  --line: #ebebeb;
  --line-strong: #dde1e7;

  /* status (never reused as series colors) */
  --ok: #0a9d55;                  /* text-safe version of #0dc268 */
  --ok-fill: #0dc268;
  --warn: #b77900;
  --warn-fill: #fdae1c;
  --bad: #d8082f;                 /* text-safe version of #ed0a34 */
  --bad-fill: #ed0a34;
  --info: #007cff;

  /* charts: one ink ramp for magnitude, yellow for the focus series */
  --chart-1: var(--alt-ink);
  --chart-2: #626c77;
  --chart-3: #a3a3b1;
  --chart-4: #dde1e7;
  --chart-focus: var(--alt-yellow);
  --chart-grid: #ebedf1;
  --chart-axis: #c9cdd6;

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* used with font-optical-sizing: auto at large sizes */
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-cap: 0.8125rem;   /* 13 */
  --fs-body: 1rem;       /* 16 */
  --fs-lead: 1.1875rem;  /* 19 */
  --fs-h3: 1.25rem;      /* 20 */
  --fs-h2: 1.875rem;     /* 30 */
  --fs-h1: clamp(2.25rem, 4.6vw, 3.5rem);
  --fs-num: clamp(2rem, 3.4vw, 2.75rem);

  /* shape and space (radius scale from alteg.io) */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --frame: 1120px;
  --shadow: 0 1px 2px rgb(34 34 46 / .06), 0 8px 24px rgb(34 34 46 / .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #14141c; --surface-card: #1b1b25; --surface-muted: #22222e;
    --fg: #f9fbfd; --fg-2: #b4b6c2; --fg-3: #919299;
    --line: #2c2c39; --line-strong: #3a3a4a;
    --ok: #2fd683; --warn: #ffc94d; --bad: #ff5c75; --info: #4da3ff;
    --chart-1: #f9fbfd; --chart-2: #b4b6c2; --chart-3: #6f7182; --chart-4: #3a3a4a;
    --chart-grid: #262633; --chart-axis: #3f3f50;
    --alt-yellow-soft: #3a3214;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #14141c; --surface-card: #1b1b25; --surface-muted: #22222e;
  --fg: #f9fbfd; --fg-2: #b4b6c2; --fg-3: #919299;
  --line: #2c2c39; --line-strong: #3a3a4a;
  --ok: #2fd683; --warn: #ffc94d; --bad: #ff5c75; --info: #4da3ff;
  --chart-1: #f9fbfd; --chart-2: #b4b6c2; --chart-3: #6f7182; --chart-4: #3a3a4a;
  --chart-grid: #262633; --chart-axis: #3f3f50;
  --alt-yellow-soft: #3a3214;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  color-scheme: dark;
}

/* ---------- base ---------- */
.alt-doc { background: var(--surface); color: var(--fg); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
.alt-doc *, .alt-doc *::before, .alt-doc *::after { box-sizing: border-box; }
.alt-frame { max-width: var(--frame); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.alt-doc h1, .alt-doc h2, .alt-doc h3 { font-family: var(--font-display); color: var(--fg); text-wrap: balance; margin: 0; }
.alt-doc h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
.alt-doc h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.alt-doc h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.alt-doc p { margin: 0; max-width: 72ch; }
.alt-lead { font-size: var(--fs-lead); color: var(--fg-2); line-height: 1.55; }
.alt-cap { font-size: var(--fs-cap); color: var(--fg-2); line-height: 1.45; }
.alt-mono, .alt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.alt-doc strong { font-weight: 650; }
.alt-doc a { color: inherit; text-decoration-color: var(--alt-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.alt-doc :focus-visible { outline: 2px solid var(--alt-yellow-active); outline-offset: 2px; border-radius: 4px; }

/* ---------- masthead (dark ink band, same in both themes) ---------- */
.alt-mast { background: var(--surface-dark-2); color: var(--fg-on-dark); }
.alt-mast .alt-frame { padding-block: var(--s-7) var(--s-7); display: grid; gap: var(--s-5); }
.alt-mast h1 { color: var(--fg-on-dark); max-width: 22ch; }
.alt-mast .alt-lead { color: var(--fg-on-dark-3); max-width: 60ch; }
.alt-mast .alt-mark { color: var(--fg-on-dark); height: 30px; width: auto; display: block; }
.alt-mast .alt-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-cap); color: var(--fg-on-dark-3); }
.alt-mast .alt-meta b { color: var(--fg-on-dark-2); font-weight: 600; }
.alt-hl { background: linear-gradient(transparent 62%, var(--alt-yellow) 62%, var(--alt-yellow) 92%, transparent 92%); color: inherit; padding-inline: 2px; }
.alt-mast .alt-hl { background: none; color: var(--alt-yellow); padding: 0; }

/* ---------- section rhythm ---------- */
.alt-section { padding-block: var(--s-8) 0; display: grid; gap: var(--s-5); }
.alt-section + .alt-section { border-top: 1px solid var(--line); margin-top: var(--s-8); }
.alt-section > header { display: grid; gap: var(--s-3); }
.alt-kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }

/* ---------- key figures ---------- */
.alt-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-4); }
.alt-fig { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface-muted); display: grid; gap: var(--s-2); align-content: start; }
.alt-fig .alt-num { font-size: var(--fs-num); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--fg); }
.alt-fig .alt-num small { font-size: 0.45em; font-weight: 500; color: var(--fg-2); margin-left: 2px; letter-spacing: 0; }
.alt-fig--focus { background: var(--alt-yellow); }
.alt-fig--focus, .alt-fig--focus .alt-num, .alt-fig--focus .alt-num small, .alt-fig--focus .alt-cap { color: var(--alt-ink); }

/* ---------- panels, callouts, pills ---------- */
.alt-panel { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-4); min-width: 0; }
.alt-panel h3 { font-size: 1.0625rem; }
.alt-callout { background: var(--alt-yellow-soft); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.alt-callout p { max-width: none; }
.alt-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: var(--surface-muted); color: var(--fg-2); }
.alt-pill--bonus { background: var(--alt-yellow); color: var(--alt-ink); }
.alt-pill--track { background: var(--surface-dark); color: var(--fg-on-dark); }
.alt-pill--later { background: transparent; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.alt-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s-4); }

/* ---------- tables ---------- */
.alt-tablewrap { overflow-x: auto; }
.alt-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.alt-table th { text-align: right; font-size: 0.75rem; font-weight: 600; color: var(--fg-2); padding: 0 var(--s-3) var(--s-2); vertical-align: bottom; border-bottom: 1px solid var(--line-strong); }
.alt-table td { text-align: right; padding: 10px var(--s-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.alt-table th:first-child, .alt-table td:first-child { text-align: left; padding-left: 0; }
.alt-table tbody tr:last-child td { border-bottom: 0; }
.alt-table tr.alt-total td { font-weight: 650; border-top: 1px solid var(--line-strong); }
.alt-good { color: var(--ok); font-weight: 600; }
.alt-bad { color: var(--bad); font-weight: 600; }

/* ---------- segmented control ---------- */
.alt-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-muted); gap: 2px; flex-wrap: wrap; }
.alt-seg button { font: inherit; font-size: 0.8125rem; font-weight: 550; border: 0; background: transparent; color: var(--fg-2); padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; min-height: 32px; transition: background .2s ease, color .2s ease; }
.alt-seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }

/* ---------- charts ---------- */
.alt-chart { position: relative; min-width: 0; }
.alt-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.alt-chart text { fill: var(--fg-2); font-family: var(--font); font-size: 12px; }
.alt-chart .alt-t-strong { fill: var(--fg); font-weight: 600; }
.alt-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-cap); color: var(--fg-2); }
.alt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.alt-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; line-height: 1.45; white-space: nowrap; }
.alt-tip b { display: block; font-weight: 600; margin-bottom: 2px; color: var(--fg-2); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .alt-rise { animation: alt-rise .5s cubic-bezier(.16,1,.3,1) both; }
  @keyframes alt-rise { from { transform: translateY(8px); opacity: .001; } to { transform: none; opacity: 1; } }
}

/* ---------- print ---------- */
@media print {
  .alt-doc { font-size: 11pt; }
  .alt-mast { background: #fff; color: var(--alt-ink); border-bottom: 3px solid var(--alt-yellow); }
  .alt-mast h1, .alt-mast .alt-mark, .alt-mast .alt-meta b { color: var(--alt-ink); }
  .alt-seg, .alt-tip, .alt-noprint { display: none !important; }
  .alt-section { break-inside: avoid-page; padding-block: 24pt 0; }
  .alt-section + .alt-section { margin-top: 24pt; }
}