/* BRAND.2 — Fraunces replaces Playfair Display as the display face.
   Spec §4 forbids Playfair ("too refined — reads 'literary magazine'").
   Fraunces is a variable face with opsz (9..144) and wght axes; the
   opsz axis gives us thin 200 at 72pt and stockier 400 at 18pt. Google
   Fonts serves the full variable range, so the weight-200-is-not-served
   problem we hit with Playfair is gone. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,200;9..144,400;9..144,500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* Benchmark — shared design tokens and utility classes.
   Referenced by Digest, Briefings, Inbox, Pipeline. Map keeps its own stylesheet
   (static/css/map.css) per the 2026-04-20 remediation brief. */

:root {
  /* Palette — primary (chrome, type, primary actions) */
  --ground:     #F4EFE4; /* warm bone — primary surface */
  --paper:      #EBE4D2; /* secondary surface */
  --ink:        #0D2238; /* deep navy — all type + hairline rules */
  --stone:      #8E8478; /* warm gray — rules, tick marks, marginalia */
  --terracotta: #B84A2E; /* the one accent — active state, alerts, benchmark disks */
  --oxide:      #6F2A17; /* terracotta's hover / pressed */

  /* BRAND.1 — Status palette (data only, never chrome).
     Used inside parcel rows, deal cards, flag indicators, signal confidence. */
  --soybean:    #5F6B33; /* positive signal — drab field olive, not "success green" */
  --ochre:      #B88A28; /* caution / waiting on counterparty — sun-on-stubble gold */
  --rust:       #7A2E14; /* red flag / dead deal — quieter than --terracotta */

  /* BRAND.1 — Alpha helpers for overlays. */
  --ink-30:        rgba(13, 34, 56, 0.30);  /* section dividers */
  --ink-06:        rgba(13, 34, 56, 0.06);  /* button-secondary hover */
  --terracotta-12: rgba(184, 74, 46, 0.12); /* parcel selection fill */
  --stone-40:      rgba(142, 132, 120, 0.40); /* basemap hydrography */

  /* Typography stacks.
     Web fonts are optional — stack falls back to system serif / mono so pages
     render consistently even offline. Hosts that want the exact display face
     can add a <link rel="preload"> for Playfair Display + Source Serif 4 +
     JetBrains Mono; the variables below will pick them up. */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body:    "Source Serif 4", "Source Serif Pro", "Freight Text Pro", Charter, Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-label:   "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Type scale — display / body / mono / label
     Every numeric value, coordinate, ID, score, money quantity must use --font-mono. */
  --type-display-size:   56px;
  --type-display-weight: 200;
  --type-display-lh:     1.05;

  --type-h2-size:        28px;
  --type-h2-weight:      300;
  --type-h2-lh:          1.2;

  --type-h3-size:        18px;
  --type-h3-weight:      500;
  --type-h3-lh:          1.3;

  --type-body-size:      16px;
  --type-body-weight:    400;
  --type-body-lh:        1.5;

  --type-small-size:     14px;
  --type-small-lh:       1.45;

  --type-mono-size:      13px;
  --type-mono-lh:        1.55;

  --type-label-size:     11px;
  --type-label-lh:       1.3;
  --type-label-tracking: 0.08em;

  /* Spacing scale — 8px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Hairline rules — always 1px, --stone */
  --rule: 1px solid var(--stone);

  /* Radii — strict: no corner > 2px per brief */
  --radius-0: 0px;
  --radius-1: 2px;

  /* Layout max widths */
  --col-measure: 680px;  /* body text column */
  --col-wide:    960px;  /* dense list column */
  --col-full:   1120px;  /* page max */
}

/* Reset + base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" 1, "kern" 1;
}

/* Type roles */
.type-display,
h1.type-display {
  font-family: var(--font-display);
  font-weight: var(--type-display-weight);
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--space-5);
}

.type-h2,
h2.type-h2 {
  font-family: var(--font-display);
  font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.type-h3,
h3.type-h3 {
  font-family: var(--font-body);
  font-weight: var(--type-h3-weight);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.type-body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--ink);
}

.type-small {
  font-family: var(--font-body);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  color: var(--ink);
}

.type-mono,
.mono,
code,
kbd {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-lh);
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0;
  color: var(--ink);
}

.type-label,
.label-caps {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  line-height: var(--type-label-lh);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--stone);
}

.marginalia {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--stone);
  letter-spacing: 0;
}

/* Links */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--stone);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: var(--terracotta);
  text-decoration-color: var(--terracotta);
}

a.link-plain {
  text-decoration: none;
  color: var(--ink);
}

a.link-plain:hover {
  color: var(--terracotta);
}

/* Rules */
hr,
.rule {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-5) 0;
}

.rule-top    { border-top: var(--rule); }
.rule-bottom { border-bottom: var(--rule); }
.rule-left   { border-left: var(--rule); }
.rule-right  { border-right: var(--rule); }

/* Benchmark disk — the ONE color accent, 6px terracotta filled circle.
   Use as a leading glyph for active nav items, live alerts, key readings. */
.bench-disk {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--terracotta);
  border-radius: 50%;
  vertical-align: baseline;
  margin-right: 8px;
  flex: 0 0 auto;
}

.bench-disk--lg {
  width: 8px;
  height: 8px;
}

/* Surfaces */
.surface-ground { background: var(--ground); }
.surface-paper  { background: var(--paper); }

/* Containers */
.container       { width: 100%; max-width: var(--col-full);    margin: 0 auto; padding: 0 var(--space-5); }
.container-wide  { width: 100%; max-width: var(--col-wide);    margin: 0 auto; padding: 0 var(--space-5); }
.container-measure { width: 100%; max-width: var(--col-measure); margin: 0 auto; padding: 0 var(--space-5); }

/* Top nav (shared across Digest, Briefings, Inbox, Pipeline).
   Small-caps labels, hairline bottom rule, terracotta disk marks active. */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--ground);
  border-bottom: var(--rule);
  min-height: 52px;
}

.topnav__brand {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-right: var(--space-5);
}

.topnav a {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topnav a:hover {
  color: var(--terracotta);
}

.topnav a[aria-current="page"],
.topnav a.is-active {
  color: var(--ink);
  position: relative;
}

/* BRAND.6: baseline-aligned 2px terracotta underscore under the active
   nav label. Replaces any pill background affordance. Small-caps nav
   links already have text-transform: uppercase, so positioning the
   underscore at bottom: 2px sits cleanly under the cap line. */
.topnav a[aria-current="page"]::after,
.topnav a.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  background: var(--terracotta);
}

.topnav a[aria-current="page"]::before,
.topnav a.is-active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--terracotta);
  border-radius: 50%;
  margin-right: 8px;
  flex: 0 0 auto;
}

.topnav__spacer { flex: 1; }

/* Buttons — strict Benchmark: no gradients, no shadows, 2px max radius. */
.btn {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-1);
  border: 1px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  line-height: 1.2;
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--ground);
  outline: none;
}

.btn--primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ground);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--oxide);
  border-color: var(--oxide);
  color: var(--ground);
}

.btn--ghost {
  border-color: var(--stone);
  color: var(--stone);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

/* Form controls — kill user-agent styling, enforce Benchmark */
.field {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: 1.4;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--ink);
  border-radius: var(--radius-1);
  -webkit-appearance: none;
  appearance: none;
}

.field:focus-visible {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 1px var(--terracotta);
}

/* Focus rings — a11y */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

/* Screen-reader only */
.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;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility tokens */
.text-ink     { color: var(--ink); }
.text-stone   { color: var(--stone); }
.text-terra   { color: var(--terracotta); }

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }

/* Coordinate line — small-caps label on left, mono value on right,
   separated by a leader dots trail. Used for spec rows / marginalia. */
.coord-line {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--stone);
}

.coord-line__label {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--stone);
}

.coord-line__value {
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* Empty state — papered surface, mono quote, centered */
.empty-state {
  border: var(--rule);
  background: var(--paper);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  font-family: var(--font-body);
  color: var(--ink);
}

.empty-state__label {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--space-3);
}

/* BRAND.1 — status-variant discs (for data rows only; never chrome). */
.bench-disk--soybean { background: var(--soybean); }
.bench-disk--ochre   { background: var(--ochre); }
.bench-disk--rust    { background: var(--rust); }

/* BRAND.1 — rule variants (default + section + emphasis). */
.hairline              { border: 0; border-top: 1px solid var(--stone); margin: 0; }
.hairline--section     { border: 0; border-top: 1px solid var(--ink-30); margin: 0; }
.hairline--emphasis    { border: 0; border-top: 1px solid var(--ink); margin: 0; }

/* BRAND.1 — selection uses chart-paper convention (terracotta at 12%). */
::selection {
  background: var(--terracotta-12);
  color: var(--ink);
}

/* BRAND.3 — cartographic empty-state recipe (spec §6 empty states).
   Any no-data surface (briefings with no items, digest with zero events,
   map with no parcels) uses this vocabulary. Never "✨ No events" or
   encouraging copy. */
.empty-cartographic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--stone);
}
.empty-cartographic__glyph {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 32px;
  line-height: 1;
  color: var(--stone);
  margin-bottom: var(--space-3);
  font-feature-settings: normal;
}
.empty-cartographic__rule {
  width: 60px;
  border: 0;
  border-top: 1px solid var(--stone);
  margin: 0 0 var(--space-4);
}
.empty-cartographic__label {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.empty-cartographic__coord {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}