/* CDP editorial shell, same family as the Lead Screen and CDP Equipment: slim white top bar,
   Roboto Slab headlines in Forest, uppercase Moss labels, cream space, one photo band, hairline cards.
   Chart series keep the validated data viz palette (--s1..--s3). */
:root {
  color-scheme: light;
  --ink: #253A1A; --ink-2: #4f5a45; --muted: #6D7564; --faint: #9A9990;
  --page: #F5F4F0; --card: #FFFFFF; --surface-2: #EFEDE5; --line: #E4E2D8; --line-strong: #CFCCBF;
  --brand: #253A1A; --brand-2: #607633; --green-dark: #4D6128; --accent-bg: #E7ECDD;
  --clay: #D6643D; --amber: #A87831;
  --grid: #e1e0d9; --axis: #c3c2b7;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;
  --good: #0ca30c; --warn: #fab219; --crit: #d03b3b;
  --warn-bg: #F5EEDF; --crit-bg: #F9E5DD; --info-bg: #E7ECDD;
  --font: "Montserrat", system-ui, sans-serif; --display: "Roboto Slab", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(img/pattern.png) center top/760px auto repeat; opacity: .15; }
a { color: var(--green-dark); }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 24px; padding: 0 40px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand .mark { width: 38px; height: 38px; border: 1.5px solid var(--brand-2); border-radius: 4px; display: grid; place-items: center; font: 500 11px/1 var(--display); color: var(--brand-2); letter-spacing: .06em; }
.brand-title { font: 500 17px/1.1 var(--display); color: var(--ink); }
.brand-sub { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; font-weight: 600; }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a { color: var(--ink); text-decoration: none; padding: 10px 11px; font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--green-dark); }
nav a.on { color: var(--green-dark); border-bottom-color: var(--brand-2); }
@media (max-width: 1100px) { .top { flex-wrap: wrap; padding: 12px 16px; gap: 8px; } nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; } nav a { white-space: nowrap; } }
.band { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(37,58,26,.58), rgba(37,58,26,.82)), url(img/land.jpg) center 55%/cover no-repeat; color: #F5F4F0; padding: 56px 40px 48px; margin: -20px -40px 20px; }
.band::before { content: ""; position: absolute; left: 22%; top: -10%; width: 30%; height: 70%; background: rgba(245,244,240,.09); transform: skewX(-28deg); pointer-events: none; }
.band .tri { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-left: 150px solid transparent; border-bottom: 150px solid rgba(214,100,61,.78); pointer-events: none; }
.band .eyebrow { color: #C8CFBE; position: relative; margin: 0 0 12px; }
.band h1 { font: 300 clamp(28px, 3.6vw, 46px)/1.12 var(--display); color: #F5F4F0; margin: 0 0 12px; max-width: 26ch; position: relative; }
.band p { margin: 0; color: #DDE2D4; font-size: 15px; max-width: 72ch; position: relative; }
.band a, .band b { color: #fff; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--brand-2); margin: 0 0 6px; }
main { padding: 20px 40px; max-width: 1440px; margin: 0 auto; }
.foot { font-size: .75rem; color: var(--muted); padding: 20px 40px; max-width: 1440px; margin: 0 auto; border-top: 1px solid var(--line); }
h1 { font: 300 2rem/1.15 var(--display); margin: 4px 0 8px; color: var(--ink); }
h2 { font: 400 1.25rem/1.25 var(--display); margin: 26px 0 8px; color: var(--ink); }
h3 { font: 500 1rem/1.3 var(--display); margin: 18px 0 6px; }
p.lead { color: var(--ink-2); max-width: 900px; margin-top: 0; }
.card { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.tile .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.tile .v { font: 300 2.1rem/1.1 var(--display); margin-top: 6px; color: var(--ink); }
.tile .d { font-size: .72rem; color: var(--muted); }
table { border-collapse: collapse; width: 100%; font-size: .8rem; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--card); position: sticky; top: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.sort { cursor: pointer; user-select: none; }
th.sort:hover { color: var(--ink); }
th.sorted::after { content: " ▾"; }
th.sorted.asc::after { content: " ▴"; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--accent-bg); }
.tablewrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 10px 0 12px; }
.filters label { display: flex; flex-direction: column; font-size: .7rem; color: var(--ink-2); gap: 2px; }
.filters input, .filters select { font: inherit; font-size: .8rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 120px; }
.filters select { max-width: 220px; }
.filters input[type=number] { width: 110px; min-width: 0; }
.filters .chk input { min-width: 0; width: auto; margin: 0; }
.filters .chk { flex-direction: row; align-items: center; gap: 4px; font-size: .78rem; color: var(--ink); padding-bottom: 6px; }
.btn { font: inherit; font-size: .8rem; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--brand-2); background: var(--card); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
.count { font-size: .8rem; color: var(--ink-2); margin: 4px 0 8px; }
.badge { display: inline-block; font-size: .66rem; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); margin: 1px 2px 1px 0; white-space: nowrap; }
.b-aw { border-color: var(--s1); color: var(--s1); }
.b-li { border-color: var(--s3); color: var(--s3); }
.b-co { border-color: var(--s2); color: var(--s2); }
.b-flag { background: var(--warn-bg); border-color: var(--warn); color: var(--ink); }
.q { font-size: .62rem; padding: 0 4px; border-radius: 4px; margin-left: 3px; vertical-align: 1px; }
.q-calc { background: var(--info-bg); }
.q-inf { background: var(--warn-bg); }
.q-conf { background: var(--crit-bg); }
a.cite, span.cite { font-size: .62rem; font-weight: 600; text-decoration: none; margin-left: 4px; color: var(--green-dark); background: var(--accent-bg); border: 1px solid #c9d3b4; border-radius: 4px; padding: 0 4px; vertical-align: 1px; white-space: nowrap; }
a.cite:hover { color: #fff; background: var(--brand-2); border-color: var(--brand-2); }
.nd { color: var(--muted); font-style: italic; }
.kv { display: grid; grid-template-columns: minmax(170px, 260px) 1fr; gap: 4px 14px; font-size: .82rem; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; }
.note { background: var(--info-bg); border-radius: 10px; padding: 10px 12px; font-size: .8rem; margin: 10px 0; }
.warnbox { background: var(--warn-bg); border-radius: 10px; padding: 10px 12px; font-size: .8rem; margin: 10px 0; }
.stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--card); margin: 8px 0; }
.stack div { min-width: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .74rem; color: var(--ink-2); margin: 6px 0; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
svg text { fill: var(--ink-2); font-size: 11px; font-family: var(--font); }
svg .grid line { stroke: var(--grid); }
svg .axis line, svg .axis path { stroke: var(--axis); }
.tip { position: fixed; z-index: 50; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .75rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); pointer-events: none; max-width: 300px; }
.prose { max-width: 920px; font-size: .88rem; }
.prose li { margin-bottom: 6px; }
.tag-conf { font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--accent-bg); }
.tag-hyp { font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--warn-bg); }
.cmp td { min-width: 180px; }
.muted { color: var(--muted); }
.loading { color: var(--muted); }
@media (max-width: 700px) {
  main { padding: 12px 16px; }
  .band { margin: -12px -16px 16px; padding: 36px 16px 32px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  nav a { padding: 6px 8px; font-size: .78rem; }
}

td.n { font-family: var(--mono); font-size: 12px; }
.srcbox ol { margin: 6px 0 0; padding-left: 20px; font-size: .82rem; }
.srcbox li { margin-bottom: 6px; }