:root {
  --ink: #17352a;
  --muted: #63776e;
  --paper: #ffffff;
  --soft: #eef6f1;
  --line: #dce9e1;
  --brand: #0b6b4f;
  --brand-dark: #084b3a;
  --accent: #f3c85b;
  --low: #21a366;
  --moderate: #eab308;
  --high: #f97316;
  --very-high: #dc2626;
  --shadow: 0 18px 48px rgba(23, 53, 42, .16), 0 3px 12px rgba(23, 53, 42, .08);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: #f6fbf7; }
body { font-size: 16px; line-height: 1.55; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(11,107,79,.35); outline-offset: 3px; }
.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; }
.app-header { height: 68px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(12,93,68,.10); backdrop-filter: blur(16px); position: relative; z-index: 1000; }
.brand { color: var(--ink); display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { font-size: 1.23rem; letter-spacing: -.025em; }
.brand small { color: var(--muted); font-size: .76rem; margin-top: 4px; }
.brand-mark { position: relative; display: block; width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; background: var(--brand); transform: rotate(-3deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.brand-mark span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.brand-mark span:nth-child(1) { left: 9px; top: 9px; }.brand-mark span:nth-child(2) { right: 8px; top: 13px; }.brand-mark span:nth-child(3) { left: 15px; bottom: 7px; background: #dff3e7; }
.app-header nav { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.app-header nav a { text-decoration: none; color: #38564a; font-size: .9rem; font-weight: 650; }
.app-header nav a:hover, .app-header nav a.active { color: var(--brand); }
.pilot-badge { padding: 5px 10px; border-radius: 999px; background: #e8f4ed; color: var(--brand); font-size: .74rem; font-weight: 750; letter-spacing: .02em; }

#map-shell { position: relative; height: calc(100dvh - 68px); min-height: 520px; overflow: hidden; }
#map { position: absolute; inset: 0; background: #dbe8e0; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.82) !important; }
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 8px 24px rgba(16,55,41,.16) !important; margin-right: 20px !important; margin-bottom: 20px !important; }
.leaflet-control-zoom a { border: 0 !important; color: var(--brand-dark) !important; }

.search-panel { position: absolute; z-index: 700; top: 18px; left: 20px; width: min(420px, calc(100% - 440px)); }
#search-form { height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 13px 0 15px; background: var(--paper); border: 1px solid rgba(18,88,63,.10); border-radius: 16px; box-shadow: var(--shadow); }
#search-form svg { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 2; flex: 0 0 auto; }
#search-input { border: 0; outline: 0; width: 100%; min-width: 0; color: var(--ink); background: transparent; font-size: .96rem; }
#search-input::placeholder { color: #84958d; }
#search-clear { border: 0; background: #edf4ef; color: var(--muted); border-radius: 999px; width: 29px; height: 29px; line-height: 25px; cursor: pointer; }
.search-results { margin-top: 7px; background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); max-height: 330px; overflow-y: auto; }
.search-results button { width: 100%; text-align: left; display: grid; gap: 1px; padding: 11px 14px; border: 0; border-bottom: 1px solid #edf3ef; background: #fff; color: var(--ink); cursor: pointer; }
.search-results button:hover, .search-results button:focus-visible { background: var(--soft); outline: 0; }
.search-results strong { font-size: .88rem; }.search-results small { color: var(--muted); text-transform: capitalize; font-size: .72rem; }
.search-empty { padding: 15px; color: var(--muted); font-size: .88rem; }

.map-controls { position: absolute; z-index: 650; top: 84px; left: 20px; display: grid; gap: 8px; }
.segmented, .chips { display: flex; align-items: center; gap: 3px; width: max-content; padding: 4px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(16,55,41,.12); border: 1px solid rgba(18,88,63,.09); backdrop-filter: blur(12px); }
.segmented { border-radius: 14px; }.chips { border-radius: 999px; }
.segmented button, .chips button { border: 0; background: transparent; color: #526a60; cursor: pointer; font-weight: 700; font-size: .8rem; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.chips button { border-radius: 999px; }
.segmented button.active, .chips button.active { background: var(--brand); color: white; box-shadow: 0 4px 10px rgba(11,107,79,.24); }

.locate-button { position: absolute; z-index: 650; left: 20px; bottom: 22px; height: 48px; border: 0; border-radius: 14px; display: flex; align-items: center; gap: 9px; padding: 0 16px; background: var(--brand); color: white; box-shadow: var(--shadow); cursor: pointer; font-weight: 750; }
.locate-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.locate-button.loading svg { animation: pulse 1s infinite alternate; }
.map-key { position: absolute; z-index: 600; right: 394px; bottom: 22px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(16,55,41,.12); font-size: .72rem; backdrop-filter: blur(12px); }
.map-key strong { margin-right: 2px; font-size: .74rem; }.map-key span { display: flex; align-items: center; gap: 4px; color: #50675e; white-space: nowrap; }
.map-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.risk-low, i.risk-low { background: var(--low) !important; }.risk-moderate, i.risk-moderate { background: var(--moderate) !important; }.risk-high, i.risk-high { background: var(--high) !important; }.risk-very-high, i.risk-very-high { background: var(--very-high) !important; }

.risk-card { position: absolute; z-index: 750; top: 18px; right: 20px; width: 354px; max-height: calc(100% - 36px); overflow-y: auto; background: rgba(255,255,255,.96); border: 1px solid rgba(20,84,61,.12); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; backdrop-filter: blur(20px); scrollbar-width: thin; transform: translateX(0); transition: transform .25s ease, opacity .25s ease; }
.risk-close { display: none; position: absolute; right: 12px; top: 10px; border: 0; width: 32px; height: 32px; border-radius: 50%; background: #edf4ef; color: #587067; font-size: 1.3rem; cursor: pointer; }
.eyebrow { color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .085em; font-size: .68rem; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.eyebrow.error { color: var(--very-high); }.estimate-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(243,200,91,.22); }
.risk-card h1 { font-size: 1.35rem; line-height: 1.2; margin: 0 28px 16px 0; letter-spacing: -.025em; }
.risk-card h2 { font-size: .86rem; margin: 18px 0 9px; letter-spacing: -.01em; }
.intro { color: var(--muted); margin: 0 0 16px; font-size: .92rem; }
.score-summary { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 17px; background: linear-gradient(135deg,#f3f8f5,#fbfcfb); border: 1px solid #e4eee8; }
.score-ring { --score: 0; --risk-color: var(--low); position: relative; width: 78px; height: 78px; flex: 0 0 auto; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at center,#fff 0 56%,transparent 57%), conic-gradient(var(--risk-color) calc(var(--score)*1%),#dfe9e3 0); }
.score-ring span { font-size: 1.65rem; font-weight: 850; line-height: .9; letter-spacing: -.04em; }.score-ring small { color: var(--muted); font-size: .62rem; margin-top: 4px; }
.score-summary > div:last-child { display: grid; }.score-summary > div:last-child > span { color: var(--muted); font-size: .75rem; }.score-summary > div:last-child > strong { font-size: 1.25rem; letter-spacing: -.02em; }.score-summary > div:last-child > small { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.category-list { padding: 10px 0 3px; border-bottom: 1px solid #e7efe9; }
.category-row { display: grid; grid-template-columns: 19px 1fr auto 26px; align-items: center; gap: 7px; min-height: 34px; font-size: .82rem; }.category-row strong { font-size: .72rem; }.category-row small { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.category-symbol { width: 14px; height: 14px; border-radius: 5px 5px 5px 2px; background: #6ea081; position: relative; }.category-symbol.tree::after { content: ''; position: absolute; width: 3px; height: 7px; background: #8c6845; bottom: -4px; left: 6px; }.category-symbol.grass { border-radius: 0; background: repeating-linear-gradient(75deg,#5b9a62 0 2px,transparent 2px 5px); }.category-symbol.weed { background: #b28a58; transform: rotate(45deg); border-radius: 50% 2px 50% 2px; }
.factor-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.factor-list li { display: grid; grid-template-columns: 31px 1fr; gap: 9px; align-items: start; }.factor-icon { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; background: #edf5f0; color: var(--brand); font-weight: 900; }.factor-icon.up { background: #fff0e6; color: var(--high); }.factor-icon.down { background: #eaf3ff; color: #3477ba; }
.factor-list strong { display: block; font-size: .78rem; line-height: 1.35; }.factor-list p { color: var(--muted); font-size: .71rem; line-height: 1.4; margin: 2px 0 0; }
.science-note { margin-top: 17px; padding: 11px; display: grid; grid-template-columns: 19px 1fr; gap: 9px; border-radius: 12px; background: #eef6f1; color: #486257; font-size: .7rem; line-height: 1.4; }
.science-note.compact { display: flex; align-items: center; margin-top: 14px; }.science-note svg { width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 1.8; }.science-note strong { color: var(--brand-dark); display: block; font-size: .72rem; margin-bottom: 2px; }
.source-line { color: #74877f; font-size: .62rem; margin: 10px 2px 0; line-height: 1.4; }
.risk-loading { padding-top: 10px; }.skeleton { background: linear-gradient(90deg,#e8f0eb 25%,#f5f8f6 50%,#e8f0eb 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }.skeleton.line { height: 15px; margin: 12px 0; }.skeleton.line.short { width: 48%; }.skeleton.score { height: 105px; border-radius: 18px; }
.retry-button { border: 0; border-radius: 12px; padding: 10px 14px; background: var(--brand); color: #fff; font-weight: 750; cursor: pointer; }
.risk-open { position: absolute; z-index: 700; right: 16px; bottom: 24px; border: 0; border-radius: 13px; background: var(--brand); color: #fff; font-weight: 750; padding: 12px 15px; box-shadow: var(--shadow); }
.map-message { position: absolute; z-index: 1000; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: min(520px,calc(100% - 32px)); background: #17352a; color: #fff; border-radius: 12px; padding: 10px 15px; box-shadow: var(--shadow); text-align: center; font-size: .84rem; }

.content-page { background: radial-gradient(circle at 80% 0,#e6f4eb 0,transparent 34%),#f8fbf9; }
.article-shell { width: min(1080px,calc(100% - 40px)); margin: 0 auto; padding: 44px 0 64px; }.article-shell.narrow { width: min(790px,calc(100% - 40px)); }
.back-link { text-decoration: none; font-weight: 700; font-size: .87rem; }.article-hero { padding: 42px 0 32px; max-width: 780px; }.article-hero h1 { font-size: clamp(2.2rem,6vw,4.2rem); line-height: .98; letter-spacing: -.055em; margin: 0 0 20px; }.article-hero > p:last-child { font-size: 1.17rem; color: #526b60; max-width: 680px; }
.definition-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.definition-grid article, .article-section { background: rgba(255,255,255,.83); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 35px rgba(22,72,52,.06); }.definition-grid article { padding: 24px; }.definition-grid h2 { font-size: 1rem; margin: 14px 0 7px; }.definition-grid p { color: var(--muted); font-size: .88rem; margin: 0; }.number { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; }
.article-section { padding: clamp(24px,4vw,42px); margin-top: 18px; }.article-section h2 { margin: 0 0 10px; letter-spacing: -.025em; }.article-section p, .article-section li { color: #516a5f; }.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }.formula-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 24px 0; }.formula-list > div { padding: 17px; border-radius: 15px; background: var(--soft); }.formula-list span { color: var(--muted); font-size: .75rem; display: block; }.formula-list strong { font-size: 1.18rem; color: var(--brand); }.formula-list p { font-size: .78rem; margin: 5px 0 0; }
.risk-scale { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border-radius: 12px; color: #fff; }.risk-scale span { padding: 11px 13px; font-size: .72rem; display: grid; background: inherit; }.risk-scale b { font-size: .85rem; }.source-list ul { padding-left: 20px; }.source-list .science-note { display: block; font-size: .84rem; color: #38594b; }.meta-line { font-size: .8rem; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 24px; }
footer { min-height: 72px; border-top: 1px solid var(--line); padding: 20px max(20px,calc((100% - 1080px)/2)); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--muted); font-size: .78rem; background: #fff; } footer a { font-weight: 700; text-decoration: none; }

@keyframes shimmer { to { background-position: -200% 0; } } @keyframes pulse { to { opacity: .45; } }
@media (max-width: 860px) {
  .app-header { height: 62px; padding: 0 14px; }.brand small, .pilot-badge { display: none; }.brand-mark { width: 34px; height: 34px; }.app-header nav { gap: 13px; }.app-header nav a { font-size: .78rem; }
  #map-shell { height: calc(100dvh - 62px); }
  .search-panel { top: 12px; left: 12px; width: calc(100% - 24px); }.search-panel #search-form { height: 48px; }
  .map-controls { top: 68px; left: 12px; width: calc(100% - 24px); overflow: hidden; gap: 7px; }.segmented, .chips { max-width: 100%; overflow-x: auto; scrollbar-width: none; }.segmented::-webkit-scrollbar,.chips::-webkit-scrollbar { display: none; }
  .segmented button, .chips button { padding: 7px 11px; font-size: .76rem; }
  .locate-button { left: 12px; bottom: calc(18px + env(safe-area-inset-bottom)); height: 46px; }.map-key { right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; gap: 4px 10px; }.map-key strong { grid-column: 1/-1; }
  .risk-card { top: auto; right: 0; bottom: 0; width: 100%; max-height: min(72dvh,650px); border-radius: 23px 23px 0 0; padding: 21px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(105%); opacity: 0; }.risk-card.visible { transform: translateY(0); opacity: 1; }.risk-close { display: block; }.risk-card h1 { font-size: 1.2rem; }.factor-list { gap: 9px; }.map-message { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .leaflet-control-zoom { margin-right: 12px !important; margin-bottom: calc(18px + env(safe-area-inset-bottom)) !important; }
  .definition-grid { grid-template-columns: 1fr; }.two-columns { grid-template-columns: 1fr; gap: 12px; }.formula-list { grid-template-columns: 1fr; }.risk-scale { grid-template-columns: 1fr 1fr; }.article-shell { padding-top: 28px; }.article-hero { padding-top: 30px; }
}
@media (max-width: 480px) {
  .app-header nav a:first-of-type { display: none; }.brand strong { font-size: 1.1rem; }
  .map-key { display: flex; left: 12px; right: auto; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 7px 9px; gap: 7px; }.map-key strong { display: none; }.map-key span { font-size: .62rem; }
  .score-summary { padding: 12px; }.score-ring { width: 70px; height: 70px; }.article-shell,.article-shell.narrow { width: min(100% - 24px,1080px); }.article-section { border-radius: 18px; }.risk-scale { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9f4ed;
    --muted: #a6bcb0;
    --paper: #15261f;
    --soft: #1d3229;
    --line: #2b4338;
    --brand: #53c99b;
    --brand-dark: #b8eed8;
    --shadow: 0 18px 48px rgba(0,0,0,.34), 0 3px 12px rgba(0,0,0,.22);
    color-scheme: dark;
  }
  html, body, .content-page { background: #101c17; }
  .app-header, footer { background: rgba(18,32,26,.95); border-color: var(--line); }
  .app-header nav a, .article-section p, .article-section li, .article-hero > p:last-child { color: #b6c9bf; }
  .pilot-badge, #search-clear, .risk-close { background: #20382d; }
  .segmented, .chips, .map-key, .risk-card { background: rgba(21,38,31,.96); border-color: var(--line); }
  .search-results button { background: var(--paper); border-color: var(--line); }
  .score-summary { background: linear-gradient(135deg,#1b3027,#16271f); border-color: var(--line); }
  .score-ring { background: radial-gradient(circle at center,var(--paper) 0 56%,transparent 57%), conic-gradient(var(--risk-color) calc(var(--score)*1%),#34483e 0); }
  .category-list, .meta-line { border-color: var(--line); }
  .factor-icon, .science-note { background: #20372d; }
  .factor-icon.up { background: #432a1e; }.factor-icon.down { background: #1d3042; }
  .definition-grid article, .article-section { background: rgba(21,38,31,.88); }
  .formula-list > div { background: #1d3229; }
  .source-line { color: #94aaa0; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }