/* XNDR Ventures: Stephen's investor-memo look, from the xndr.io system.
   Layout idea: white paper with room to breathe, ink text, one restrained
   accent (the XNDR purple) for what you can act on. Space Mono headings and
   JetBrains Mono tabular numbers (the site's own pair), system sans for
   running text. Tonal panels with a hairline, no shadows, no gradients.
   Light first: dark follows the device setting (or a page's data-theme).
   Token contract and layers: harness/styles/README.md. */
@layer base, identity, brand;

@layer identity {
  :root {
    --bg: #FAFAF7;
    --bg-deep: #F1F1EB;          /* table head, pressed, tonal buttons */
    --surface: #FFFFFF;          /* cards, panels, tables */
    --ink: #0B0B0C;
    --muted: #555560;            /* 7.0:1 on the page */
    --faint: #8C8C82;            /* control edges: 3:1 on the page and the surface */
    --edge: #E4E4DB;             /* hairlines between rows */
    --accent: #8645D4;           /* XNDR purple: 5.3:1 on the page, 5.5:1 on white */
    --accent-hover: #6E32B8;
    --accent-soft: #F2EBFB;
    --accent-ink: #FFFFFF;
    --ok: #136C34;
    --ok-soft: #E6F4EA;
    --warn: #8A5A00;
    --warn-soft: #FBF0D6;
    --crit: #B91C1C;
    --bad-soft: #FBE7E5;
    --text: var(--ink);
    --line: var(--edge);
    --bad: var(--crit);
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    --radius: 8px;
    --radius-sm: 4px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0B0B0C; --bg-deep: #1B1B1E; --surface: #141416;
      --ink: #EDEDED; --muted: #A1A1AA; --faint: #6F6F78; --edge: #262629;
      --accent: #B58CF0; --accent-hover: #C9A8F5; --accent-soft: #231A33; --accent-ink: #0B0B0C;
      --ok: #4ADE80; --ok-soft: #0F2A1A; --warn: #FBBF24; --warn-soft: #2E2208;
      --crit: #F87171; --bad-soft: #341515;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0B0B0C; --bg-deep: #1B1B1E; --surface: #141416;
    --ink: #EDEDED; --muted: #A1A1AA; --faint: #6F6F78; --edge: #262629;
    --accent: #B58CF0; --accent-hover: #C9A8F5; --accent-soft: #231A33; --accent-ink: #0B0B0C;
    --ok: #4ADE80; --ok-soft: #0F2A1A; --warn: #FBBF24; --warn-soft: #2E2208;
    --crit: #F87171; --bad-soft: #341515;
  }
}

/* Unlayered on purpose: a host page sets these unlayered too. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15.5px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

@layer identity {
  h1, h2, h3 { font-family: var(--font-display); color: var(--text); text-wrap: balance; margin: 0; font-weight: 700; }
  h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.12; letter-spacing: -.01em; }
  h2 { font-size: 21px; line-height: 1.25; }
  h3 { font-size: 16px; line-height: 1.3; }
  p { margin: 0; }
  a { color: var(--accent); text-underline-offset: .2em; }
  a:hover { color: var(--accent-hover); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  .muted { color: var(--muted); }
  .meta { font-size: 13px; color: var(--muted); }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  code, .mono { font-family: var(--font-mono); font-size: .9em; }
  .eyebrow { font: 700 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
  .lede { max-width: 62ch; font-size: 17px; color: var(--muted); }
  hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

  /* card: white panel, hairline, no shadow. .ask: the memo's decision card */
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
  .card > * + * { margin-top: 8px; }
  .card p:not(.meta) { font-size: 15px; color: var(--muted); }
  .card.ask { border-color: var(--accent); border-left-width: 4px; }

  /* stats: one strip, cells split by hairlines; the figure in mono */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; background: var(--surface); }
  .stat strong { font: 700 clamp(24px, 4vw, 32px)/1.1 var(--font-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
  .stat strong small { font-size: .5em; font-weight: 400; color: var(--muted); margin-left: 4px; }
  .stat span { font-size: 13px; color: var(--muted); }
  .stat.pos strong { color: var(--ok); }
  .stat.neg strong { color: var(--bad); }

  /* state chip: tint, the word, and a mark of its own (dot, ring, square) */
  .pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; box-sizing: border-box; padding: 0 10px 0 8px; border-radius: 4px;
    font: 700 12px/1 var(--font-mono); white-space: nowrap; color: var(--muted); background: var(--bg-deep); }
  .pill::before { content: ""; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; background: currentColor; flex: none; }
  .pill:is([data-tone="ok"], .ok) { color: var(--ok); background: var(--ok-soft); }
  .pill:is([data-tone="warn"], .warn) { color: var(--warn); background: var(--warn-soft); }
  .pill:is([data-tone="warn"], .warn)::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
  .pill:is([data-tone="bad"], .bad) { color: var(--bad); background: var(--bad-soft); }
  .pill:is([data-tone="bad"], .bad)::before { border-radius: 1.5px; }

  /* buttons: mono caps as on xndr.io; the filled one is the action */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; box-sizing: border-box;
    border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
    font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; text-decoration: none;
    transition: background-color .15s ease, color .15s ease; }
  .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
  .btn.tonal, .btn.quiet { background: transparent; border-color: var(--faint); color: var(--text); }
  .btn.tonal:hover, .btn.quiet:hover { background: var(--bg-deep); border-color: var(--faint); color: var(--text); }
  .btn.quiet { border-color: transparent; }
  .btn:disabled { background: var(--bg-deep); border-color: var(--bg-deep); color: var(--muted); cursor: not-allowed; }

  /* decision buttons: Yes / No / Don't know. Outlined in the status colour at rest, filled when chosen. */
  .choice { display: flex; flex-wrap: wrap; gap: 8px; }
  .choice .btn.yes { --c: var(--ok); }
  .choice .btn.no { --c: var(--bad); }
  .choice .btn.dk { --c: var(--warn); }
  .choice .btn { background: transparent; border-color: var(--c); color: var(--c); }
  .choice .btn:hover { background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-color: var(--c); color: var(--c); }
  .choice .btn[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--surface); }

  /* table: hairline rows, mono tabular numbers right-aligned */
  .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
  .table th { padding: 10px 14px; text-align: left; font: 700 11.5px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; background: var(--bg-deep); border-bottom: 1px solid var(--line); }
  .table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table .num { text-align: right; white-space: nowrap; font-family: var(--font-mono); }
  .table .pos { color: var(--ok); }
  .table .neg { color: var(--bad); }
  .table tfoot td { font-weight: 700; border-top: 1px solid var(--faint); border-bottom: 0; background: var(--bg-deep); }
  .table .sub { display: block; color: var(--muted); font-size: 13px; font-family: var(--font-body); }

  /* field: label above, 1px edge, 16px text (no iOS zoom) */
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .field label { font: 700 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .field :is(input, textarea, select) { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--faint); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 400 16px/1.4 var(--font-body); }
  .field :is(input, textarea, select):focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

  @media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
}