/* Site layer on the owner's design system (design-system/, the source of truth).
   build.py copies design-system/styles.css, tokens/ and assets/ to dist/ds/. Every class here is a port of markup in
   design-system/Design System.dc.html and uses only its tokens. Page-specific classes live in site/pages/*.py. */
@import url("ds/styles.css");

/* Proposed addition: dark-mode data colours (owner asked for dark charts to look as good as light).
   Night is dark and cool, so the system's dark crop hues (pastel, L .64-.84) glare and two read grey. These keep each
   hue, sit inside the dark lightness band (L .48-.67, chroma >= .10) and alternate lightness so neighbours in a stack
   separate. Checked with the dataviz validator against --bg-surface (#151a1f): band, chroma, colour-blind separation
   (adjacent pairs), normal-vision floor and 3:1 contrast all pass. Also: area fills dim on dark (--area-k). */
[data-theme="dark"] {
  --crop-leafy: oklch(0.60 0.11 188);
  --crop-herbs: oklch(0.665 0.135 88);
  --crop-fruiting: oklch(0.54 0.17 33);
  --crop-roots: oklch(0.63 0.14 345);
  --crop-micro: oklch(0.525 0.13 258);
  --area-k: .55;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
em { font-style: italic; }
@keyframes gsm-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(2.8); opacity: 0; } }
@keyframes gsm-spin { to { transform: rotate(360deg); } }
@keyframes gsm-shimmer { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }

/* layout */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.stack { display: grid; gap: 28px; }
.sec { padding-top: 72px; display: grid; gap: 20px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 220px)), 1fr)); }
.card { background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-1); padding: 20px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.mono { font: var(--type-data); font-size: 11px; color: var(--text-3); }
.muted { color: var(--text-2); }
.small { font: var(--type-small); }
.figure { font: var(--type-figure); letter-spacing: var(--tracking-figure); color: var(--text-1); }
.figure-xl { font: var(--type-figure-xl); letter-spacing: var(--tracking-figure); color: var(--text-1); }
.unit { font: var(--type-small); color: var(--text-2); letter-spacing: 0; margin-left: 3px; }
.ic { display: inline-flex; flex: none; width: 16px; height: 16px; color: currentColor; }
.ic svg { width: 100%; height: 100%; stroke-width: 1.5; }
.dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-good); flex: none; }
.dot.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: gsm-pulse 2s var(--ease-out) infinite; }

/* header: Navigation & layout · site header */
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg-page) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-2); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--text-1); text-decoration: none; }
.brand img { display: block; flex: none; }
.wordmark { font: 400 20px/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.nav a { padding: 8px 12px; border-radius: var(--radius-control); font: 500 14px/1 var(--font-body); text-decoration: none; white-space: nowrap; color: var(--text-2); transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); }
.nav a:hover { color: var(--text-1); }
.nav a[aria-current="page"] { background: var(--bg-sunken); color: var(--text-1); }
.ibtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; padding: 0; cursor: pointer; flex: none; border-radius: var(--radius-control); background: transparent; color: var(--text-1); transition: background var(--dur-quick) var(--ease-out); }
.ibtn:hover { background: var(--bg-sunken); }
.ibtn:active { transform: scale(.98); }
.ibtn .ic { width: 20px; height: 20px; }
.menu-btn { display: none; }
[data-theme="dark"] img.logo { content: url(ds/assets/logo-mark-reverse.svg); }
@media (max-width: 719px) {
  .site-head .wrap { height: 56px; gap: 10px; padding-right: 6px; }
  .wordmark { font-size: 18px; flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .brand { flex: 1; min-width: 0; }
  .brand img { width: 24px; height: 24px; }
  .menu-btn { display: inline-grid; width: 44px; height: 44px; }
  .site-head .ibtn { width: 44px; height: 44px; }
  .nav { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; padding: 8px var(--gutter) 12px; background: var(--bg-page); border-bottom: 1px solid var(--border-2); box-shadow: var(--shadow-2); }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }
}

/* page hero: Navigation & layout · page hero */
.hero { padding-top: 40px; }
.hero .card { padding: 28px; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; align-items: center; }
.hero-copy { display: grid; gap: 18px; }
.hero-title { font: var(--type-hero); letter-spacing: var(--tracking-display); text-wrap: balance; }
.hero-media { position: relative; border-radius: var(--radius-media); background: var(--bg-sunken); overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-surface); font: var(--type-data); font-size: 11px; color: var(--text-2); }

/* section header */
.sec-head { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-1); }
.sec-head > div { display: grid; gap: 6px; flex: 1; min-width: 0; }
.sec-head h2 { font: var(--type-h2); letter-spacing: var(--tracking-display); }
.more { display: inline-flex; align-items: center; gap: 4px; font: var(--type-small); color: var(--text-1); text-decoration: none; white-space: nowrap; }

/* highlight chip */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px; white-space: nowrap; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-1); }
.chip .ic { color: var(--text-2); }
.chip b { font: 400 14px/1 var(--font-data); letter-spacing: -0.01em; color: var(--text-1); }
.chip span { font: var(--type-small); color: var(--text-2); }
.chip.flare { background: var(--flare-soft); box-shadow: none; }
.chip.tide { background: var(--tide-soft); box-shadow: none; }

/* status badge (colour + shape) */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px; font: 500 12px/1 var(--font-body); white-space: nowrap; background: var(--status-unknown-soft); color: var(--status-unknown-ink); }
.badge .ic { width: 14px; height: 14px; }
.badge.good { background: var(--status-good-soft); color: var(--status-good-ink); } .badge.good .ic { color: var(--status-good); }
.badge.attention { background: var(--status-attention-soft); color: var(--status-attention-ink); } .badge.attention .ic { color: var(--status-attention); }
.badge.problem { background: var(--status-problem-soft); color: var(--status-problem-ink); } .badge.problem .ic { color: var(--status-problem); }
.badge.unknown .ic { color: var(--status-unknown); }
.badge.plain { background: var(--bg-surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-1); }

/* stat tile with range bar */
.stat { display: grid; gap: 14px; padding: 16px; }
.stat-top { display: flex; align-items: center; gap: 8px; }
.stat-top .ic { width: 18px; height: 18px; color: var(--text-2); }
.stat-top .label { flex: 1; }
.stat-top .st { color: var(--status-good); } .stat-top .st.attention { color: var(--status-attention); } .stat-top .st.problem { color: var(--status-problem); }
.rbar { display: grid; gap: 6px; }
.rbar .track { position: relative; height: 6px; border-radius: 99px; background: var(--track); }
.rbar .band { position: absolute; height: 100%; border-radius: 99px; background: var(--sage-300); opacity: .6; }
.rbar .val { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--text-1); box-shadow: 0 0 0 2.5px var(--bg-surface); }
.rbar .val.attention { background: var(--status-attention); } .rbar .val.problem { background: var(--status-problem); }
.rbar .ticks { position: relative; height: 13px; font: var(--type-data); font-size: 11px; color: var(--text-3); }
.rbar .ticks span { position: absolute; white-space: nowrap; }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font: var(--type-small); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.legend i.line { width: 16px; height: 0; border-radius: 0; border-top: 1.5px solid var(--c); background: none; }
.legend i.dash { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--c); background: none; }
.legend i.dot { width: 8px; height: 8px; border-radius: 50%; }

/* segmented view toggle */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: calc(var(--radius-control) + 3px); box-shadow: inset 0 0 0 1px var(--border-1); background: var(--bg-surface); }
.seg button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius-control); background: transparent; color: var(--text-1); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--sage-300); }

/* Button (components/buttons/Button) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; font: 500 15px/1 var(--font-body); white-space: nowrap; border: 0; border-radius: var(--radius-control); text-decoration: none; cursor: pointer; background: var(--accent); color: var(--text-inverse); transition: background var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), transform var(--dur-instant) var(--ease-out); }
.btn:hover { background: var(--accent-hover); color: var(--text-inverse); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.sm { height: 36px; padding: 0 12px; font: var(--type-small); }
.btn.secondary { background: var(--bg-surface); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border-1); }
.btn.secondary:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.btn.quiet { background: transparent; color: var(--text-1); }
.btn.quiet:hover { background: var(--bg-sunken); }
.btn.pop { background: var(--pop); color: oklch(0.18 0.014 165); }
.btn.pop:hover { filter: brightness(.95); }

/* footer */
.site-foot { margin: 72px auto 24px; }
.site-foot .card { display: grid; gap: 22px; padding: 28px 24px; background: var(--bg-sunken); box-shadow: none; }
.site-foot .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-foot .wordmark { font-size: 22px; }
.site-foot nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.site-foot nav a { font: var(--type-small); color: var(--text-2); text-decoration: none; }
.site-foot nav a:hover { color: var(--text-1); }

/* motion: reveal once on scroll (complete without JS / with reduced motion) */
.anim .rv { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.anim .rv.in { opacity: 1; transform: none; }