.three-creek-preview { display:grid; grid-template-columns:160px minmax(0,1fr); align-items:center; gap:20px; margin:24px 0; padding:14px; border:1px solid #b5c6b6; border-radius:7px; background:#f4f5ed; color:#123c32; text-decoration:none !important; }
.three-creek-preview img { display:block; width:100%; height:auto; border-radius:3px; }
.three-creek-preview strong,.three-creek-preview span span { display:block; }
.three-creek-preview strong { font-size:1.08rem; line-height:1.3; }
.three-creek-preview span span { margin-top:7px; font:.9rem/1.4 var(--sans); }
.three-creek-preview .three-creek-open { font-weight:700; text-decoration:underline; text-underline-offset:.2em; }
.three-creek-preview:hover { border-color:#356358; background:#edf1e6; }
.three-creek-dialog { width:min(1240px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:0; border:1px solid #a9beb2; border-radius:9px; background:#fffdf8; color:#233e37; box-shadow:0 20px 80px #092b2555; overflow:auto; overscroll-behavior:contain; }
.three-creek-dialog::backdrop { background:rgb(6 31 27 / .78); }
.three-creek-header { display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:0; z-index:3; padding:10px 18px; background:#123c32; color:#fffdf8; }
.three-creek-header h2 { margin:0; font:650 clamp(1rem,2.2vw,1.25rem)/1.3 var(--sans); }
.three-creek-header button { min-height:44px; padding:8px 14px; border:1px solid #9db7a9; border-radius:4px; background:transparent; color:inherit; font:650 .9rem var(--sans); cursor:pointer; }
.three-creek-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:10px 16px; border-bottom:1px solid #d1dbcf; background:#eef1e7; }
.three-creek-tabs button { min-height:44px; border:1px solid transparent; border-radius:4px; background:transparent; color:#365b4d; font:650 .9375rem var(--sans); cursor:pointer; }
.three-creek-tabs button[aria-selected=true] { background:#123c32; color:white; }
.three-creek-panel { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr); gap:24px; padding:20px; }
.three-creek-map-column,.three-creek-details { min-width:0; }
.three-creek-viewport { position:relative; width:100%; height:clamp(320px,57dvh,630px); overflow:hidden; border:1px solid #b8c9bd; background:#fffdf8; border-radius:5px; touch-action:none; cursor:default; }
.three-creek-viewport.is-zoomed { cursor:grab; }
.three-creek-viewport.is-zoomed:active { cursor:grabbing; }
.three-creek-viewport img { display:block; width:100%; height:100%; max-width:none; object-fit:contain; transform-origin:center; pointer-events:none; user-select:none; }
.three-creek-image-error { display:none; position:absolute; inset:0; align-items:center; justify-content:center; margin:0; padding:24px; text-align:center; font:1rem/1.5 var(--sans); background:#fffdf8; }
.three-creek-viewport.has-image-error .three-creek-image-error { display:flex; }
.three-creek-controls { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; }
.three-creek-controls button { min-width:44px; min-height:44px; padding:6px 12px; border:1px solid #aabeb0; border-radius:4px; background:#fffdf8; color:#123c32; font:650 1rem var(--sans); cursor:pointer; }
.three-creek-controls button:disabled { opacity:.42; cursor:default; }
.three-creek-controls output { min-width:50px; text-align:center; font:650 .875rem var(--sans); font-variant-numeric:tabular-nums; }
.three-creek-map-help { margin:8px 0 14px; text-align:center; color:#52675f; font:.8rem/1.5 var(--sans); }
.three-creek-legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin:0; padding:0; list-style:none; font:.875rem/1.4 var(--sans); }
.three-creek-legend li { display:flex; align-items:center; gap:6px; }
.three-creek-swatch { flex:0 0 17px; width:17px; height:12px; border:1px solid; border-radius:2px; }
.three-creek-swatch.emergent { background:#a8bd70; border-color:#687b3b; }
.three-creek-swatch.woody { background:#568b78; border-color:#2b6557; }
.three-creek-swatch.pond { background:#79b7d2; border-color:#367d9d; }
.three-creek-swatch.stream { height:0; border:none; border-top:2px solid #377f9e; }
.three-creek-swatch.basin { background:#e6eae2; border-color:#385e51; }
.three-creek-details .three-creek-eyebrow { margin:0 0 8px; color:#52675f; font:650 .7rem/1.4 var(--sans); text-transform:uppercase; letter-spacing:.08em; }
.three-creek-details h3 { margin:0 0 22px; color:#123c32; font:600 clamp(1.3rem,2vw,1.75rem)/1.17 var(--sans); }
.three-creek-details p { font:.9375rem/1.6 var(--sans); margin:18px 0; }
.three-creek-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:12px; padding:0 0 20px; margin:0; border-bottom:1px solid #d1dbcf; }
.three-creek-stats > div { display:flex; flex-direction:column; min-width:0; }
.three-creek-stats dd { order:-1; }
.three-creek-stats dd { margin:0; color:#123c32; font:650 clamp(1.75rem,3vw,2.45rem)/1.1 var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap; }
.three-creek-stats dt { margin:6px 0 0; max-width:150px; color:#52675f; font:.875rem/1.4 var(--sans); }
.three-creek-details .three-creek-scope { color:#52675f; font-size:.8125rem; padding-top:14px; border-top:1px solid #d1dbcf; }
.three-creek-source-links { display:flex; flex-wrap:wrap; gap:12px 20px; }
.three-creek-source-links a { color:#1e645b; font:650 .85rem/1.4 var(--sans); text-underline-offset:.2em; }
.three-creek-dialog :focus-visible,.three-creek-preview:focus-visible { outline:3px solid #a36e2f; outline-offset:3px; }
@media(max-width:780px) {
  .three-creek-dialog { width:calc(100vw - 12px); max-width:calc(100vw - 12px); max-height:calc(100dvh - 12px); border-radius:6px; }
  .three-creek-header { padding:7px 12px; gap:8px; }
  .three-creek-panel { grid-template-columns:minmax(0,1fr); padding:8px; gap:24px; }
  .three-creek-tabs { grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr)); padding:6px 8px; gap:3px; }
  .three-creek-tabs button { padding:6px 3px; font-size:.875rem; }
  .three-creek-viewport { height:auto; min-height:0; aspect-ratio:4 / 3; }
  .three-creek-viewport img { position:absolute; inset:0; }
  .three-creek-details h3 { margin-bottom:14px; }
  .three-creek-preview { grid-template-columns:100px minmax(0,1fr); gap:12px; padding:10px; }
  .three-creek-preview strong { font-size:.95rem; }
  .three-creek-preview span span { font-size:.8125rem; }
}
@media(prefers-reduced-motion:reduce) { .three-creek-dialog * { scroll-behavior:auto; transition:none; } }

.three-creek-swatch.lake { background:#5d9bd3; border-color:#35658c; }
.three-creek-swatch.riverine { background:#b7d9de; border-color:#538e9a; }
.three-creek-methods { margin-top:20px; border-top:1px solid #d1dbcf; padding-top:14px; font:.875rem/1.5 var(--sans); }
.three-creek-methods summary { cursor:pointer; font-weight:650; color:#123c32; min-height:32px; }
.three-creek-methods a { color:#1e645b; text-underline-offset:.2em; }

.three-creek-swatch.junction { flex-basis:8px; width:8px; height:8px; margin:0 4.5px; background:#123c32; border:0; border-radius:50%; }