/* ============================================================================
 * FIELD NOTEBOOK — shared design system stylesheet
 * Source of truth for tokens and component primitives across the redesign.
 * Spec: ../Field Notebook Design System.md
 *
 * Section map:
 *   §1 Tokens
 *   §2 Base / page surface (the 32px grid)
 *   §3 Type primitives (h1..h3, body, .meta, .num)
 *   §4 Component primitives (.pill, .card, .ledger, .stat, blockquote, hr)
 *   §5 Layout helpers (.article-column, .hero-grid, .detail-rail)
 *   §6 Utility classes (.no-grid, .embedded, screen-reader-only)
 *   §7 Accessibility / focus
 *   §8 Mobile (≤640px)
 * ============================================================================ */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap');


/* ============================================================================
 * §1 Tokens
 * ============================================================================ */
:root {
  /* — Paper & ink — */
  --paper:      #f3eee2;            /* page background */
  --paper-alt:  #ebe5d4;            /* card / inset background */
  --ink:        #1d1a14;            /* primary text, strong rules */
  --ink-2:      #4a4538;            /* secondary text */
  --ink-3:      #6c6759;            /* tertiary text — darkened from spec #7a7466 to pass WCAG AA at small sizes */
  --rule:       rgba(29, 26, 20, 0.14);  /* hairlines */
  --rule-soft:  rgba(29, 26, 20, 0.07);  /* the 32px grid lines */

  /* — Signal — use sparingly, one accent does all the work — */
  --rust:       #a44a1f;            /* primary accent, deltas, italic emphasis (5.07:1 on paper — AA body) */
  --rust-soft:  #d99a76;
  --amber:      #b8801c;            /* secondary accent for charts */
  --amber-soft: #e9c98a;
  --moss:       #6b7a3a;            /* tertiary accent for charts */

  /* — 7-color chart palette (use in this order for series 1..7) — */
  --chart-1:    #a44a1f;            /* rust */
  --chart-2:    #b8801c;            /* amber */
  --chart-3:    #6b7a3a;            /* moss */
  --chart-4:    #4a4538;            /* slate (ink-2) */
  --chart-5:    #7a4a8c;            /* violet */
  --chart-6:    #3a6b7a;            /* teal */
  --chart-7:    #8c4a4a;            /* brick */

  /* — Type stack — */
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* — Spacing — multiples of 4, snap to the 32px grid where possible — */
  --gutter-x:   36px;
  --gutter-y:   28px;
  --grid:       32px;
  --content-max-dashboard: 1280px;
  --content-max-prose:      820px;

  /* — Type scale (desktop) — */
  --fs-h1:        42px;
  --fs-h2:        24px;
  --fs-h3:        19px;
  --fs-body:      15px;
  --fs-ui:        13px;
  --fs-caption:   14px;
  --fs-meta:      10px;
  --fs-num:       12px;
  --lh-tight:     1.18;
  --lh-snug:      1.35;
  --lh-body:      1.5;
}


/* ============================================================================
 * §2 Base / page surface (the 32px ruled grid)
 * ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  background-position: -1px -1px;
}

/* When the page is rendered inside an iframe (e.g., pulse.html under index.html's
 * Pulse tab), the outer document already provides the grid. Add `?embedded=1`
 * to the iframe src; a small init script in the page should call
 * document.body.classList.add('no-grid'). */
body.no-grid,
body.embedded {
  background-image: none;
}

img, svg, canvas { max-width: 100%; height: auto; display: block; }

a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }


/* ============================================================================
 * §3 Type primitives
 * ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: 16px; font-weight: 600; line-height: var(--lh-snug); }

/* Italic emphasis — used in headlines for the noun being investigated.
 * Keep it sparing: one or two phrases per headline, never bold a serif heading. */
h1 em, h2 em, h3 em, .em-rust {
  color: var(--rust);
  font-style: italic;
  font-weight: inherit;
}

/* Body prose */
p, .prose {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 1em;
}

/* UI body — dense lists, tables, controls. */
.ui-body, ul, ol, dl, label, button, input, select, textarea {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Caption / italic intro lines / sidenotes */
.caption, .pull, figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--ink-2);
}

/* Meta tag — mono UPPERCASE for section markers, table heads, status indicators. */
.meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta--rust { color: var(--rust); }
.meta--ink  { color: var(--ink); }

/* Numbers — mono tabular, signed deltas. */
.num, time, .date, .id {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-num);
  letter-spacing: 0.03em;
  color: var(--ink);
}
.num--delta-up   { color: var(--rust); }
.num--delta-down { color: var(--ink-2); }
.num--ink-3      { color: var(--ink-3); }

/* Section markers — `§02 · TODAY'S PULSE` */
.section-marker {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.section-marker .section-num { color: var(--rust); }


/* ============================================================================
 * §4 Component primitives
 * ============================================================================ */

/* — §4.1 Pill button — the only button — */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  border-radius: 0;
  transition: background-color 80ms linear, color 80ms linear;
}
.pill:hover                  { background: var(--paper-alt); color: var(--ink); }
.pill[aria-pressed="true"],
.pill.is-active              { background: var(--ink); color: var(--paper); }
.pill[aria-pressed="true"]:hover,
.pill.is-active:hover        { background: var(--ink); color: var(--paper); }
.pill--soft {
  border-color: var(--rule);
  color: var(--ink-2);
}
.pill--soft:hover            { color: var(--ink); border-color: var(--ink); }
.pill[disabled], .pill.is-disabled {
  border-color: var(--rule);
  color: var(--ink-3);
  cursor: not-allowed;
}

/* Pill bar (e.g., tab strip) */
.pill-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* — Sparkline · bar variant — discrete count per period, e.g., 4-week
 * evidence counts in the Pulse → Evidence heatmap. Inline-flex of square
 * bars aligned to the bottom; bar heights vary with the data; opacity
 * fades into the past so the current period reads strongest.
 * Pair with .sparkline-bar__bar children whose inline `height` and
 * `opacity` (or .is-current class) come from the renderer.
 *
 * For continuous trend lines (single value per period over time), use an
 * inline SVG polyline at 1.4px stroke per Field Notebook §5.9.
 */
.sparkline-bar {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}
.sparkline-bar__bar {
  width: 6px;
  min-height: 2px;
  background: var(--ink-2);
  opacity: 0.35;
  border-radius: 0;
}
.sparkline-bar__bar.is-current { opacity: 1; }
/* Variant: highlight the current period in rust instead of full-opacity ink. */
.sparkline-bar--accent .sparkline-bar__bar.is-current {
  background: var(--rust);
  opacity: 1;
}

/* — Today mark — small structural indicator next to a tracking signal name
 * meaning "this signal has at least one Evidence Log row dated today."
 * Uses --moss from the chart palette (semantically: fresh growth) rather
 * than rust, so rust stays reserved for deltas / emphasis / links.
 * Square (border-radius 0 per design system) — reads as a typewriter-era
 * reference annotation rather than a SaaS notification dot.
 * Variant: .today-mark--rust if rust is preferred over moss.
 */
.today-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--moss);
  vertical-align: 0.08em;
  margin-right: 6px;
  flex-shrink: 0;
}
.today-mark--lg   { width: 9px; height: 9px; }
.today-mark--rust { background: var(--rust); }

/* Tag — smaller, lighter pill for inline labels (no interactivity) */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 2px 7px;
  margin: 0 4px 4px 0;
  border-radius: 0;
}

/* — §4.2 Card — labeled patch on the page — */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 1px solid var(--ink);
  padding: 16px 18px;
  border-radius: 0;
  box-shadow: none;
}
.card--inset       { background: var(--paper-alt); }
.card--emphasis    { border-top: 3px solid var(--rust); }
.card__label {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

/* — §4.3 Ledger / table — */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ledger thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 6px 8px;
  border-bottom: 1px solid var(--ink);
  vertical-align: bottom;
}
.ledger tbody td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink);
}
.ledger tbody tr:last-child td { border-bottom: none; }
.ledger td.num,
.ledger th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ledger td.title { font-family: var(--serif); font-size: 14px; }
.ledger td.date  { font-family: var(--mono); color: var(--ink-3); white-space: nowrap; }
.ledger tbody tr:hover td { background: var(--paper-alt); }

/* — §4.4 List row pattern (date / title / delta) — */
.list-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule);
}
.list-row:last-child           { border-bottom: none; }
.list-row > .date              { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.list-row > .title             { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.list-row > .delta             { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--rust); white-space: nowrap; }
.list-row > .delta.is-down     { color: var(--ink-2); }
.list-row__tags                { grid-column: 2 / span 2; margin-top: 4px; }

/* — §4.5 Stat block — */
.stat {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px 12px;
  min-width: 140px;
}
.stat__label  { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.stat__value  { font-family: var(--serif); font-size: 36px; font-weight: 500; color: var(--ink); line-height: 1.05; letter-spacing: -0.01em; }
.stat__delta  { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.stat__delta.is-up   { color: var(--rust); }
.stat__delta.is-down { color: var(--ink-2); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border-left: 1px solid var(--rule);
}
.stat-row > .stat {
  border-right: 1px solid var(--rule);
  border-left: none;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* — §4.6 Pull quote / blockquote — */
blockquote {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.45;
  border-left: 2px solid var(--rust);
  padding: 4px 0 4px 16px;
  margin: 24px 0;
}
blockquote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 6px;
}
blockquote cite::before { content: "— "; }

/* — §4.7 Rules — */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 24px 0;
}
hr.rule--ink         { border-top-color: var(--ink); }
hr.rule--double      { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; }


/* ============================================================================
 * §5 Layout helpers
 * ============================================================================ */
.page {
  max-width: var(--content-max-dashboard);
  margin: 0 auto;
  padding: var(--gutter-y) var(--gutter-x);
}
.article-column {
  max-width: var(--content-max-prose);
  margin: 0 auto;
  padding: var(--gutter-y) var(--gutter-x);
}

/* Hero grid: full-width chart row + 3-column ledger underneath */
.hero-grid {
  display: grid;
  gap: var(--gutter-y) var(--gutter-x);
  grid-template-columns: 1.4fr 1fr 1fr;
}
.hero-grid > .hero-chart { grid-column: 1 / -1; }

/* Detail with rail: main content + metadata rail */
.detail-rail {
  display: grid;
  gap: var(--gutter-y) var(--gutter-x);
  grid-template-columns: 1.6fr 1fr;
}


/* ============================================================================
 * §6 Utility classes
 * ============================================================================ */
.no-grid           { background-image: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-rust         { color: var(--rust); }
.text-ink-2        { color: var(--ink-2); }
.text-ink-3        { color: var(--ink-3); }


/* ============================================================================
 * §7 Accessibility / focus
 * ============================================================================ */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}
.pill:focus-visible {
  outline-offset: -1px;
  outline: 2px solid var(--rust);
}


/* ============================================================================
 * §8 Mobile (≤640px) — narrower frame, same density
 * Per Field Notebook §8: don't strip content; let it scroll.
 * ============================================================================ */
@media (max-width: 640px) {
  :root {
    --gutter-x: 16px;
    --gutter-y: 16px;
    --fs-h1:    24px;
    --fs-h2:    18px;
    --fs-body:  14px;
    --fs-ui:    13px;
  }
  .page, .article-column { padding: var(--gutter-y) var(--gutter-x); }

  .hero-grid   { grid-template-columns: 1fr; }
  .detail-rail { grid-template-columns: 1fr; }

  /* Tables of >3 cols stack; ≤3 cols allow horizontal scroll. */
  .ledger-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .pill-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .pill-bar::-webkit-scrollbar { display: none; }
}