/* The AI apps in the site's shared look (shared/theme.css): white, black,
 * Helvetica, one blue.
 *
 * Fourteen of the fifteen apps in the hub's AI section copied one stylesheet
 * (paper #f5f3ec, Instrument Serif headings with an italic rust word, IBM
 * Plex Sans body, uppercase IBM Plex Mono labels), so they share its
 * variable and class names; Is It AGI Yet? (agi-tracker) had its own, in
 * Fraunces. Each loads theme.css and then this file after its own styles,
 * and this file resets what they share. Colors that encode data (the API
 * lanes, the vendor colors, verdicts, bands, chart series) stay; the rust
 * accent becomes the site blue.
 *
 * AI Progress (ai-progress) draws its map labels in a condensed face and
 * reserves room for each from a table of advance widths in app.js, so its
 * map text keeps a condensed system face (--narrow, set in its style.css).
 */
:root {
  --paper: #ffffff;
  --card: #fafafa;
  --card-strong: #ffffff;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #767676;
  --ink-soft: #555555;        /* agi-tracker's names */
  --ink-faint: #767676;
  --rule: #d9d9d9;
  --rule-soft: #ececec;
  --wash: rgba(17, 17, 17, 0.045);
  --code-bg: #f4f4f2;
  --accent: #1f3fd9;
  --accent-soft: #e6eafb;
  --mark: rgba(31, 63, 217, 0.12);
  --sel: rgba(31, 63, 217, 0.08);
  --accent-wash: rgba(31, 63, 217, 0.08);
  --focus: #1f3fd9;

  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: var(--sans);
  --cond: var(--sans);
  --read-sans: var(--sans);
  /* The labels that were set in mono are Helvetica with tabular figures, so
     columns of numbers still line up. Code keeps a system mono (below). */
  --mono: var(--sans);
  --code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

html { background: var(--paper); }
body {
  background: var(--paper);
  background-image: none;
  color: var(--ink);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* No capitals or letter-spaced labels anywhere. */
body *, body *::before, body *::after { text-transform: none !important; letter-spacing: 0 !important; }

/* Code is code: a system mono. */
code, pre, kbd, samp, pre.code-body, .code-body { font-family: var(--code) !important; }
.mono { font-family: var(--sans); }

/* Small labels that were uppercase mono read as plain small text. */
.kicker {
  font-family: var(--sans) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Titles: plain Helvetica, set tight. Instrument Serif ran small for its
   size, so the big ones come down a step. */
.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.02em !important;
}
h1, h2, h3 { font-family: var(--sans); letter-spacing: -0.01em !important; }
h1, h2 { font-weight: 700 !important; }
.reading h2, .sources h2, .table-sec h2, .off-grid h2, .log h2, .compare h2,
.sec h2, .sec-h, .agi h2 {
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em !important;
}

/* No italic accent word in a title. */
.wordmark em, .nb-brand em, h1 em, h2 em, h3 em, .sec-h em, .ro-big em, .card.era h3 em,
.mine-box h3 em, #accord h2 em, .agi h2 em {
  font-style: normal !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* AI Progress's notes: the brand reads as a plain bold title. */
.nb-brand { font-weight: 700; letter-spacing: -0.02em !important; }

/* AI Progress: the tour's resting line reads as a title, so it is upright. */
.tour-now .idle { font-style: normal; }

/* The Road to Superintelligence: the Accord's gold stays (it marks the key
   moment on the chart, in the tables and in the log), without the gradients. */
#reader.is-key { background: var(--card-strong); }
.tabletop { background: #8f8f8f; }

/* How Do AI Agents Actually Work?: Helvetica years run wider than the serif
   ones, so they come down to fit their column; the log rows lose the cream.
   The user, environment and model tints stay: they color the diagram's zones. */
.era-y { font-size: 1.25rem; }
.row-bg { fill: #f4f4f4; }
@keyframes fresh { 0% { fill: #ffeeb8; } 100% { fill: #f4f4f4; } }