:root {
  /* The site palette, shared with the captured-farms page (farms.html) and matched to the demo
     gallery the macOS host built (reports/assets/demo_2026-09/index.html). This page is a public
     website demo, not the farmer product: the product's own light theme lives in
     contracts/farmer_product_shell/design_tokens_v1.json and web/field-workstation/ keeps using it.
     Dark only, like the rest of the site. Every text pair below is recomputed from these literals by
     web/tests/test_field_demo_page.py and fails under WCAG AA 4.5:1. */
  --site-bg: #0E100F;
  --site-card: #171A18;
  --site-line: #252A27;
  --site-ink: #F2F5F1;
  --site-muted: #9AA69D;
  --site-green: #3F9C6D;
  --site-green-deep: #2A7650;
  --site-amber: #FFCC00;
  --site-blue: #5AA9D6;
  --site-red: #FF6B5B;
  --site-sky: #4E8EAF;

  --color-brand: var(--site-green);
  --color-brand-strong: var(--site-green-deep);
  --color-accent: var(--site-green);
  --color-sky: var(--site-sky);
  --color-surface: var(--site-card);
  --color-text: var(--site-ink);
  --color-info: var(--site-blue);
  --color-warning: var(--site-amber);
  --color-danger: var(--site-red);
  --color-success: var(--site-green);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 36px;
  --radius-control: 9px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-pill: 999px;
  --type-caption: 12.5px;
  --type-body: 15px;
  --type-section: 20px;
  --type-title: 27px;
  --type-display: 38px;
  --minimum-touch-target: 44px;
  --motion-standard: 180ms;
  --motion-reduced: 0ms;

  --forest-900: var(--site-green-deep);
  --forest-700: color-mix(in srgb, var(--site-green) 70%, var(--site-ink));
  --forest-500: var(--site-green);
  --leaf-300: var(--site-green);
  --paper: var(--site-bg);
  --surface: var(--site-card);
  --surface-soft: color-mix(in srgb, var(--site-bg) 55%, var(--site-card));
  --ink: var(--site-ink);
  --muted: var(--site-muted);
  --muted-strong: color-mix(in srgb, var(--site-muted) 60%, var(--site-ink));
  --line: var(--site-line);
  --line-strong: color-mix(in srgb, var(--site-line) 60%, var(--site-muted));
  --sky-soft: color-mix(in srgb, var(--site-sky) 22%, var(--site-card));
  --amber-soft: color-mix(in srgb, var(--site-amber) 12%, var(--site-card));
  --red-soft: color-mix(in srgb, var(--site-red) 14%, var(--site-card));
  --green-soft: color-mix(in srgb, var(--site-green) 16%, var(--site-card));
  --info-soft: color-mix(in srgb, var(--site-blue) 16%, var(--site-card));
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  --gutter: var(--space-lg);
  --focus: #6FB8FF;
  --measured-ink: color-mix(in srgb, var(--site-green) 55%, var(--site-ink));
  --derived-ink: color-mix(in srgb, var(--site-blue) 55%, var(--site-ink));
  --predicted-ink: color-mix(in srgb, var(--site-amber) 80%, var(--site-ink));
  --danger-ink: color-mix(in srgb, var(--site-red) 60%, var(--site-ink));
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, ui-sans-serif, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--type-body);
  line-height: 1.5;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: var(--forest-700); }
svg { display: block; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.symbol-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; transform: translateY(-180%); border-radius: 9px; padding: 10px 14px; color: white; background: var(--color-brand-strong); font-weight: 750; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }

h1, h2, h3, h4, h5, p { margin-top: 0; }
h1 { margin-bottom: var(--space-sm); font-size: clamp(var(--type-title), 4vw, var(--type-display)); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
h2 { margin-bottom: var(--space-sm); font-size: clamp(var(--type-section), 2.6vw, 24px); font-weight: 680; letter-spacing: -.02em; line-height: 1.2; }
h3 { margin-bottom: var(--space-sm); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
h4 { margin-bottom: var(--space-xs); font-size: var(--type-body); }
h5 { margin: 0 0 var(--space-xs); font-size: var(--type-body); }
.eyebrow { margin: 0 0 var(--space-sm); color: var(--forest-700); font-size: var(--type-caption); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.lede { max-width: 68ch; color: var(--muted-strong); font-size: 1.02rem; line-height: 1.6; }
.muted { color: var(--muted); font-size: .84rem; line-height: 1.55; }

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 1px solid var(--line);
  padding: var(--space-md) var(--gutter);
  background: var(--paper);
}
.brand { display: flex; align-items: center; gap: var(--space-md); color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--site-bg); background: var(--leaf-300); }
.brand-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: var(--muted); font-size: var(--type-caption); }
.head-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); max-width: 62ch; margin: 0; color: var(--muted); font-size: var(--type-caption); line-height: 1.45; }

.app-status { display: none; align-items: center; gap: var(--space-sm); margin: var(--space-md) var(--gutter) 0; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 9px 12px; color: var(--muted-strong); background: var(--surface); font-size: .8rem; }
.app-status.is-visible { display: flex; }
.app-status.is-error { border-color: var(--color-danger); color: var(--danger-ink); background: var(--red-soft); }
.spinner { flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid var(--line-strong); border-top-color: var(--forest-700); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main { width: min(1180px, 100%); margin: 0 auto; padding: var(--space-xl) var(--gutter) var(--space-xxl); }
.surface { margin-bottom: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(var(--space-lg), 3vw, var(--space-xxl)); background: var(--surface); box-shadow: var(--shadow-sm); }
.surface section { margin-top: var(--space-xl); }

/* A badge is a short label. `white-space: nowrap` plus a flex item's default min-width:auto
   (= max-content) meant a badge could not shrink, and a sentence-length string rendered in one
   overflowed the 280px card and spilled across its neighbour. The shape fix is that sentences are
   no longer badged at all (app.js prints panel.maturity as .panel-maturity body text); these three
   declarations are the belt-and-braces, so a long label wraps inside its own card instead. */
.badge { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; min-height: 24px; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 3px 9px; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--type-caption); font-weight: 750; }
.badge-neutral { border-color: var(--line-strong); color: var(--muted-strong); background: var(--surface-soft); }
.badge-ready { border-color: var(--color-success); color: var(--measured-ink); background: var(--green-soft); }
.badge-setup_required { border-color: var(--color-warning); color: var(--predicted-ink); background: var(--amber-soft); }
.badge-unavailable { border-color: var(--line-strong); color: var(--muted-strong); background: var(--surface-soft); }
/* The three evidence kinds. Each carries its own word, so the badge is readable without colour at
   all; the border style and the leading glyph are the second and third cues, for a reader who is
   colour-blind, printing the page, or looking at it in forced colours. */
.badge-measured { border-style: solid; border-color: var(--color-success); color: var(--measured-ink); background: var(--green-soft); }
.badge-derived { border-style: dashed; border-color: var(--color-info); color: var(--derived-ink); background: var(--info-soft); }
.badge-predicted { border-style: double; border-width: 3px; padding: 1px 7px; border-color: var(--color-warning); color: var(--predicted-ink); background: var(--amber-soft); }
.badge-measured::before, .badge-derived::before, .badge-predicted::before { margin-right: 5px; font-weight: 800; }
.badge-measured::before { content: "\25CF"; }
.badge-derived::before { content: "\00F7"; }
.badge-predicted::before { content: "\007E"; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--minimum-touch-target); border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-lg); cursor: pointer; font-size: .85rem; font-weight: 780; transition: background var(--motion-standard) ease, transform var(--motion-standard) ease; }
.button.primary { color: white; background: var(--color-brand-strong); }
.button.primary:hover:not(:disabled) { transform: translateY(-1px); background: #226443; }
.button:disabled { opacity: .45; cursor: progress; }

.locate-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-sm); }
.field-label { display: grid; gap: var(--space-xs); min-width: 0; }
.field-label > span { color: var(--muted); font-size: var(--type-caption); font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.field-label input, .field-label select { min-width: 0; min-height: var(--minimum-touch-target); border: 1px solid var(--line-strong); border-radius: var(--radius-control); padding: 0 var(--space-md); color: var(--ink); background: var(--surface); }
.field-label input { width: min(320px, 100%); }
#location-help { max-width: 68ch; margin-bottom: var(--space-lg); }

/* Imagery first: the stance line, the two off-by-default opt-ins beside the run button, and the
   dashed derived-view frame their output renders in when a visitor ticks one. */
.stance-line { max-width: 70ch; margin: var(--space-sm) 0 var(--space-md); border-left: 3px solid var(--color-success); padding: 6px var(--space-md); color: var(--ink); background: var(--green-soft); font-size: .95rem; line-height: 1.5; }
.opt-ins { display: grid; gap: 2px; }
.opt-in { display: flex; align-items: center; gap: var(--space-sm); min-height: 36px; color: var(--muted-strong); font-size: .84rem; cursor: pointer; }
.opt-in input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--forest-700); }
.opt-in input:disabled + span { opacity: .45; }
.opt-in-group { border: 1px dashed var(--color-info); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--surface-soft); }

.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.preset-caption { color: var(--muted); font-size: var(--type-caption); font-weight: 750; }
.preset { display: grid; gap: 2px; min-height: var(--minimum-touch-target); border: 1px solid var(--line-strong); border-radius: var(--radius-control); padding: var(--space-sm) var(--space-md); background: var(--surface-soft); cursor: pointer; text-align: left; }
.preset:hover { border-color: var(--forest-700); }
.preset strong { font-size: .84rem; }
.preset small { color: var(--muted); font-size: var(--type-caption); }

/* The point picker: a satellite map (vendored Leaflet, Esri World Imagery tiles), as in ASI Prism. */
.locmap { height: 460px; min-height: 240px; margin-top: var(--space-md); overflow: hidden; resize: vertical; border: 1px solid var(--line); border-radius: var(--radius-control); background: #0A0D0F; }
.locmap-fallback { margin: 0; padding: var(--space-md); }
#locmap-help { margin-top: var(--space-sm); }
.field-label input[type="number"] { width: 140px; }
.field-label select { min-width: 220px; }
figcaption { margin-top: var(--space-sm); color: var(--muted); font-size: var(--type-caption); line-height: 1.5; }

.run-elapsed { margin: 0 0 var(--space-md); font-size: .9rem; }
.run-stages { display: grid; gap: var(--space-sm); margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.run-stages li { display: flex; align-items: center; gap: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--space-sm) var(--space-md); opacity: .55; }
.run-stages li > span { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: var(--type-caption); font-weight: 800; }
.run-stages strong, .run-stages small { display: block; }
.run-stages strong { font-size: .84rem; }
.run-stages small { color: var(--muted-strong); font-size: var(--type-caption); }
.run-stages .is-done { opacity: .85; }
.run-stages .is-done > span { border-color: var(--color-success); color: var(--site-bg); background: var(--color-success); }
.run-stages .is-current { border-color: var(--forest-700); background: var(--green-soft); opacity: 1; }

.error-box { margin-bottom: var(--space-xl); border: 1px solid var(--color-danger); border-left-width: 4px; border-radius: var(--radius-control); padding: var(--space-md) var(--space-lg); color: var(--danger-ink); background: var(--red-soft); font-size: .88rem; }

.acquisition-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: .9rem; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-md); margin: 0 0 var(--space-xl); }
.fact { border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--space-md); background: var(--surface-soft); }
.fact dt { color: var(--muted); font-size: var(--type-caption); font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.fact dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-xs) 0 0; overflow-wrap: anywhere; font-size: .84rem; }

.compare-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.compare-head h3 { margin: 0; }
.segmented { display: flex; gap: 3px; border-radius: var(--radius-control); padding: 3px; background: var(--surface-soft); }
.segmented button { min-height: 36px; border: 0; border-radius: 9px; padding: 0 var(--space-md); color: var(--muted); background: transparent; cursor: pointer; font-size: var(--type-caption); font-weight: 760; }
.segmented button[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
#compare-panel { margin-top: var(--space-md); }
.compare-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-control); background: #0A0D0F; --wipe: 50%; cursor: ew-resize; touch-action: none; user-select: none; }
.compare-stage img { display: block; width: 100%; image-rendering: pixelated; pointer-events: none; -webkit-user-drag: none; }
/* The overlay is the reconstruction, and it must occupy the RIGHT of the handle: app.js WIPE_SIDES
   says base left / overlay right, and every sentence on the page is written from that constant.
   clip-path hides the overlay's left --wipe% while the element still spans the stage, so the two
   images stay pixel-aligned -- a width-clipped overlay would have to be re-registered by hand, and
   that is how the direction silently inverted the first time. */
.compare-overlay-clip { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--wipe)); overflow: hidden; }
.compare-overlay-clip img { width: 100%; height: auto; max-width: none; }
/* The handle, knob and corner labels follow the ASI Prism wipe. */
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--wipe); width: 2px; transform: translateX(-1px); background: #00E5FF; box-shadow: 0 0 7px #00E5FF; pointer-events: none; }
.compare-knob { position: absolute; top: 50%; left: var(--wipe); width: 24px; height: 24px; border-radius: 50%; transform: translate(-50%, -50%); background: #00E5FF; opacity: .88; box-shadow: 0 0 9px #00E5FF; pointer-events: none; }
.compare-tag { position: absolute; bottom: 8px; max-width: 46%; border-radius: 5px; padding: 4px 9px; color: #FFFFFF; background: rgba(0, 0, 0, .65); font-size: 12px; font-weight: 600; pointer-events: none; }
.compare-tag-left { left: 8px; }
.compare-tag-right { right: 8px; text-align: right; }
.wipe-hint { margin: var(--space-sm) 0 0; }
.is-side-by-side .compare-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.is-side-by-side .compare-overlay-clip { position: static; width: auto; clip-path: none; }
.is-side-by-side .compare-overlay-clip img { width: 100%; height: auto; }
.is-side-by-side .compare-handle, .is-side-by-side .compare-knob, .is-side-by-side .compare-tag, .is-side-by-side .wipe-hint { display: none; }
.is-side-by-side .compare-stage { cursor: default; }
.is-side-by-side .wipe-label { opacity: .4; }
.wipe-label { display: grid; gap: var(--space-xs); margin-top: var(--space-md); color: var(--muted); font-size: var(--type-caption); font-weight: 750; }
.wipe-label input { width: min(420px, 100%); min-height: var(--minimum-touch-target); accent-color: var(--forest-700); }

/* Two by two: the four views side by side, pictures first so they line up whatever the title length. */
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.panel-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-md); background: var(--surface-soft); }
.panel-card img { width: 100%; border-radius: var(--radius-control); image-rendering: pixelated; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.panel-head h4, .panel-head h5 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.panel-marks { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-sm) 0; }
.panel-caption { margin-bottom: var(--space-xs); color: var(--ink); font-size: .84rem; }
.panel-warning { margin: var(--space-sm) 0 0; border-left: 3px solid var(--color-warning); padding: 6px var(--space-sm); color: var(--muted-strong); background: var(--amber-soft); font-size: var(--type-caption); line-height: 1.45; }
.panel-mask-gap { margin: var(--space-sm) 0 0; border-left: 3px dashed var(--color-info); padding: 6px var(--space-sm); color: var(--muted-strong); background: var(--info-soft); font-size: var(--type-caption); line-height: 1.45; }
.panel-citation { margin: var(--space-sm) 0 0; color: var(--muted); font-size: var(--type-caption); font-style: italic; line-height: 1.45; }
/* The engine's maturity sentence, visible body text rather than a pill or a tooltip: it is the
   qualification that decides how much of the panel to believe, and at 44-137 characters it is a
   sentence, not a label. */
.panel-maturity { margin: var(--space-sm) 0 0; color: var(--muted-strong); font-size: var(--type-caption); line-height: 1.45; overflow-wrap: anywhere; }
.panel-maturity strong { color: var(--muted-strong); letter-spacing: .04em; text-transform: uppercase; }
.panel-metric { margin: var(--space-sm) 0 0; color: var(--muted-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--type-caption); }
.panel-evidence { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding-left: var(--space-lg); color: var(--muted-strong); font-size: var(--type-caption); line-height: 1.45; }
.panel-evidence .muted { display: block; }

.gap-card { border: 1px solid var(--line-strong); border-left: 4px solid var(--color-warning); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--amber-soft); }
.gap-card .panel-head { margin-bottom: var(--space-sm); }
.gap-card p { margin: 0; font-size: .84rem; line-height: 1.5; }
.readings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-md); }
.reading-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--surface-soft); }
.reading-value { margin-bottom: var(--space-xs); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.reading-value small, .reading-range small { display: block; color: var(--muted); font-family: inherit; font-size: var(--type-caption); font-weight: 500; letter-spacing: 0; }
.reading-range { margin-bottom: var(--space-sm); font-size: .95rem; font-weight: 650; }
.spread { width: 100%; height: 12px; margin-top: var(--space-sm); }
.spread-track { fill: var(--line-strong); }
.spread-range { fill: color-mix(in srgb, var(--color-accent) 60%, var(--surface)); }
.spread-mean { fill: var(--site-ink); }

.quality-body { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--surface-soft); }
.quality-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-md); }
.quality-figures > div { display: grid; gap: var(--space-xs); justify-items: start; }
.quality-figures span { color: var(--muted); font-size: var(--type-caption); font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.quality-figures strong { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.honesty-surface { border-color: var(--line-strong); }
.column-count { margin-bottom: var(--space-md); color: var(--muted-strong); font-size: var(--type-caption); }
.honesty-columns { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-lg); margin-top: var(--space-lg); }
.honesty-column { margin-top: 0; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-lg); }
.can-column { background: var(--green-soft); }
.cannot-column { background: var(--surface-soft); }
.honesty-column h3 { font-size: var(--type-body); letter-spacing: 0; }
.honesty-subcolumn { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px dashed var(--line-strong); background: none; }
.honesty-subcolumn h4 { margin: 0 0 var(--space-xs); font-size: var(--type-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--muted-strong); }
.capability-list { display: grid; gap: var(--space-md); }
.capability-card { border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--space-md); background: var(--surface); }
.capability-card p { margin: 0 0 var(--space-xs); color: var(--muted-strong); font-size: .82rem; line-height: 1.5; }
.capability-card p:last-child { margin-bottom: 0; }
.capability-meta { color: var(--muted) !important; font-size: var(--type-caption) !important; }
.capability-blocker { color: var(--ink) !important; }
.capability-blocker strong { color: var(--muted-strong); font-size: var(--type-caption); letter-spacing: .04em; text-transform: uppercase; }
.capability-shown { margin: var(--space-sm) 0; border-left: 3px solid var(--color-success); padding: 6px var(--space-sm); background: var(--green-soft); }
.capability-shown p { color: var(--ink); }
.capability-shown strong { color: var(--muted-strong); font-size: var(--type-caption); letter-spacing: .04em; text-transform: uppercase; }
/* The development-build note, on the three rows whose subject matter the panels above render. It
   sits in the warning family rather than the ready one on purpose: what is on screen is
   development-grade output, and the row below it is still an unmet product prerequisite. */
.capability-dev { margin: var(--space-sm) 0; border-left: 3px double var(--color-warning); padding: 6px var(--space-sm); background: var(--amber-soft); }
.capability-dev p { color: var(--ink); }
.capability-dev strong { color: var(--predicted-ink); font-size: var(--type-caption); letter-spacing: .04em; text-transform: uppercase; }
.readiness-group + .readiness-group { margin-top: var(--space-lg); }
.readiness-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.readiness-head h4 { margin: 0; }
.module-block { margin-top: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.module-block summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--minimum-touch-target); padding: var(--space-sm) var(--space-md); cursor: pointer; font-size: .84rem; font-weight: 700; }
.module-block[open] summary { border-bottom: 1px solid var(--line); }
.module-block .capability-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.module-block .capability-card:first-of-type { border-top: 0; }
.empty-state { border-left: 4px solid var(--color-danger); border-radius: var(--radius-control); padding: var(--space-md); background: var(--red-soft); }
.empty-state strong { display: block; margin-bottom: var(--space-xs); font-size: .86rem; }
.empty-state p { margin: 0; color: var(--muted-strong); font-size: var(--type-caption); line-height: 1.5; }

footer { width: min(1180px, 100%); margin: 0 auto; border-top: 1px solid var(--line); padding: var(--space-xl) var(--gutter) var(--space-xxl); }
.provenance-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-md); }
.provenance-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--surface-soft); }
.provenance-card h3 { font-size: var(--type-body); letter-spacing: 0; }
.provenance-card .attribution { color: var(--ink); font-size: .84rem; }
.provenance-card dl { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; }
.provenance-card dt { color: var(--muted); font-size: var(--type-caption); font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.provenance-card dd { margin: 0; overflow-wrap: anywhere; font-size: var(--type-caption); }
.open-question { margin: var(--space-md) 0 0; border-left: 3px solid var(--color-warning); padding: 6px var(--space-sm); background: var(--amber-soft); font-size: var(--type-caption); line-height: 1.5; }
.rights-list { margin: 0 0 var(--space-md); padding-left: 20px; font-size: var(--type-caption); line-height: 1.5; }
.rights-notices h3, .rights-gaps h3 { font-size: var(--type-body); letter-spacing: 0; margin: var(--space-md) 0 var(--space-xs); }

.noscript { margin: var(--space-lg) var(--gutter); border: 1px solid var(--color-danger); border-radius: var(--radius-control); padding: var(--space-md); color: var(--danger-ink); background: var(--red-soft); }

@media (max-width: 860px) {
  .honesty-columns { grid-template-columns: 1fr; }
  .locate-form { flex-direction: column; align-items: stretch; }
  .field-label input { width: 100%; }
}

@media (max-width: 640px) {
  main, footer { padding-inline: var(--gutter); }
  .site-head { padding-inline: var(--gutter); }
  .surface { padding: var(--space-lg); }
  .panel-grid, .readings-grid, .provenance-list, .fact-grid, .quality-figures { grid-template-columns: 1fr; }
  .preset { width: 100%; }
  .segmented { width: 100%; }
  .segmented button { flex: 1 0 auto; }
  .is-side-by-side .compare-stage { grid-template-columns: 1fr; }
  .reading-value { font-size: 1.7rem; }
}

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

@media (forced-colors: active) {
  .badge, .panel-card, .capability-card, .surface, .compare-stage { border: 1px solid CanvasText; }
  .locator-pin circle, .spread-mean, .spread-range { forced-color-adjust: none; }
}

@media print {
  .site-head, .locate-form, .preset-row, .segmented, .wipe-label, .app-status { display: none !important; }
  .surface { box-shadow: none; break-inside: avoid; }
  .module-block { break-inside: avoid; }
}

/* Shared by both demo pages: the two parts of one story, and a tab row styled like the gallery's. */
.demo-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.demo-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--minimum-touch-target); border-bottom: 2px solid transparent; padding: 0 14px; color: var(--muted); font-weight: 650; text-decoration: none; }
.demo-nav a:hover { color: var(--ink); }
.demo-nav a[aria-current="page"] { border-bottom-color: var(--site-green); color: var(--ink); }
.demo-nav .step { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 12px; }
.demo-nav a[aria-current="page"] .step { border-color: var(--site-green); color: var(--site-bg); background: var(--site-green); }
.bullets { display: grid; gap: 8px; max-width: 70ch; margin: var(--space-md) 0 var(--space-lg); padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 22px; color: var(--muted-strong); line-height: 1.5; }
.bullets li::before { content: ""; position: absolute; top: .6em; left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--site-green); }
.bullets li strong { color: var(--ink); }
.cross-link { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 16px; color: var(--ink); font-weight: 650; text-decoration: none; }
.cross-link:hover { border-color: var(--site-green); }
details.more { margin-top: var(--space-sm); color: var(--muted); font-size: .86rem; }
details.more summary { cursor: pointer; color: var(--muted-strong); font-weight: 650; }
details.more[open] summary { margin-bottom: var(--space-sm); }

/* Part 1, the captured-farms gallery (farms.html). */
.farm-list { display: grid; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.farm-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(var(--space-lg), 2.5vw, var(--space-xl)); background: var(--surface); }
.farm-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.farm-head h3 { margin: 0 0 4px; font-size: 20px; }
.farm-head .muted { max-width: 70ch; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-md) 0 var(--space-lg); padding: 0; list-style: none; }
.chips li { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 11px; color: var(--muted); background: var(--paper); font-size: var(--type-caption); }
.chips strong { color: var(--ink); }
.farm-views { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-lg); }
.farm-view, .app-shot, .sr-images figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.farm-view img, .sr-images img { display: block; width: 100%; background: #000; }
.farm-view figcaption, .app-shot figcaption, .sr-images figcaption { margin: 0; padding: 10px 12px 12px; color: var(--muted); font-size: var(--type-caption); line-height: 1.45; }
.farm-view figcaption strong, .app-shot figcaption strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; }
.sr-pairs { display: grid; gap: var(--space-xl); }
.sr-pair h3 { margin-bottom: var(--space-sm); }
.sr-images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.sr-images img { image-rendering: pixelated; }
.sr-images figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-lg); }
.app-shot img { display: block; width: 100%; }
@media (max-width: 640px) {
  .sr-images { grid-template-columns: 1fr; }
  .farm-views { grid-template-columns: 1fr 1fr; }
}

/* Farm examples, as buttons under the coordinates. */
.preset-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--space-sm) 0 var(--space-md); }
.preset-chip { min-height: 36px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0 14px; color: var(--ink); background: var(--surface-soft); cursor: pointer; font-size: 13.5px; font-weight: 600; }
.preset-chip:hover:not(:disabled) { border-color: var(--site-green); background: var(--green-soft); }
.preset-chip:disabled { opacity: .45; cursor: progress; }

/* What this spot shows. */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.insight { display: grid; gap: 4px; align-content: start; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-md); background: var(--surface-soft); }
.insight-label { color: var(--muted); font-size: var(--type-caption); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.insight-value { font-size: 17px; line-height: 1.3; }
.insight .badge { justify-self: start; }

/* Suggested outlines: the picture beside its list. */
.outlines-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-lg); align-items: start; }
.outline-figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: #000; }
.outline-figure img { display: block; width: 100%; image-rendering: pixelated; }
.outline-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--space-sm); font-size: 17px; }
.outline-list { display: grid; gap: 4px; margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.outline-list li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-md); align-items: baseline; border-bottom: 1px solid var(--line); padding: 4px 0; font-size: 14px; }
.outline-list small { color: var(--muted); }

/* Everything else the models see. */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
.model-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-md); background: var(--surface-soft); }
.model-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.model-head h4 { margin: 0; }
.model-card > .muted { margin: 6px 0 var(--space-sm); }
.model-views { display: grid; gap: var(--space-sm); }
.model-views-2 { grid-template-columns: 1fr 1fr; }
.model-view { margin: 0; }
.model-view img { display: block; width: 100%; border-radius: var(--radius-control); image-rendering: pixelated; background: #000; }
.model-view figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: var(--type-caption); }
.model-facts { display: grid; gap: 2px; margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.model-facts li { display: flex; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--line); padding: 3px 0; font-size: 13.5px; }
.model-facts span { color: var(--muted); }

/* What a satellite can't tell you: five rows, no more. */
.cannot-list { display: grid; gap: 8px; margin: var(--space-md) 0; padding: 0; list-style: none; }
.cannot-list li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: var(--space-md); border-bottom: 1px solid var(--line); padding: 8px 0; }
.cannot-list span { color: var(--muted-strong); }

@media (max-width: 760px) {
  .panel-grid, .outlines-body { grid-template-columns: 1fr; }
  .cannot-list li { grid-template-columns: 1fr; gap: 2px; }
}