/* Exhibit 5 only; everything shared is ../lab.css. Environment Agency samples are ink, a local group's the brand teal,
   a spot with none a dashed ring. Hatching is always "no sample", never zero; months not yet in the record are plain. */
:root { --ea: var(--ink); --local: var(--brand); }

.overview { margin: 0; }
.overview figcaption { font-size: 12px; color: var(--deep-muted); margin-top: 8px; }
.drawn-map.dark svg { border-color: rgba(233, 228, 214, .3); }
.drawn-map.dark rect:first-child { fill: #0e1c21; }
.drawn-map.dark .grat { stroke: rgba(233, 228, 214, .08); }
.drawn-map.dark .land { fill: #1d3036; stroke: rgba(233, 228, 214, .45); }
.drawn-map.dark .land.other { fill: #182a2f; stroke: rgba(233, 228, 214, .2); }
.drawn-map.dark .gl { fill: rgba(233, 228, 214, .5); }
.drawn-map.dark g[transform] line, .drawn-map.dark g[transform] path { stroke: var(--deep-ink); fill: var(--deep-ink); }
.drawn-map .m-ea { fill: var(--ea); stroke: var(--paper); stroke-width: 1; }
.drawn-map .m-local { fill: var(--local); stroke: var(--paper); stroke-width: 1.2; }
.drawn-map .m-none { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 1.6; }
.drawn-map.dark .m-ea { fill: #fbf7ec; stroke: #0e1c21; }
.drawn-map.dark .m-local { fill: #5cc2b5; stroke: #0e1c21; }
.drawn-map.dark .m-none { stroke: #e0766b; }
.map-key i.ea { background: var(--ea); border-color: var(--ea); }
.map-key i.local { background: var(--local); border-color: var(--local); }
.map-key i.none { background: none; border-style: dashed; }

/* ------------------------------------------------------------------ 1. where */
.sg-where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .sg-where { grid-template-columns: 1fr; gap: 20px; } }
.netmap { margin: 0; }
.picker.always { display: block; max-width: 480px; margin-bottom: 14px; }
.picker.always label { display: block; font-size: var(--fs-note); font-weight: 600; margin-bottom: 6px; }
.picker.always select { width: 100%; min-height: 44px; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); }
.sg-spot { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.sg-spot h3 { font: 600 var(--fs-head)/1.2 var(--font-display); margin: 0 0 4px; }
.sg-spot .meta { font-size: var(--fs-note); color: var(--muted); margin: 0 0 10px; }
.sg-spot .big { font: 600 34px/1.05 var(--font-display); margin: 6px 0; }
.sg-spot .big small { font: 400 var(--fs-note)/1.3 var(--font-text); color: var(--muted); margin-left: 6px; }
.sg-spot p { font-size: var(--fs-note); }
.sg-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.sg-add button, .ws-share button, .sg-plan .rm, .sg-plan .clear { border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius); min-height: 40px; padding: 6px 12px; cursor: pointer; font-size: var(--fs-note); }
.sg-add button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ws-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.tw { overflow-x: auto; }
.sg-areas, .sg-compare, .sg-policies { width: 100%; border-collapse: collapse; font-size: var(--fs-note); }
.sg-areas caption, .sg-compare caption, .sg-policies caption { text-align: left; font-size: 12px; color: var(--muted); padding: 0 0 6px; caption-side: top; }
.sg-areas th, .sg-areas td, .sg-compare th, .sg-compare td, .sg-policies th, .sg-policies td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.sg-areas thead th, .sg-compare thead th, .sg-policies thead th { font-weight: 600; color: var(--muted); border-bottom-color: var(--line); }
.sg-areas tbody th, .sg-compare tbody th, .sg-policies tbody th { font-weight: 400; color: var(--ink); }
.sg-areas .num, .sg-compare .num, .sg-policies .num { text-align: right; }
.sg-areas tr.none-row th { color: var(--muted); }

/* ------------------------------------------------------------------ 2. calendar */
.sg-cal { overflow-x: auto; }
.sg-cal svg { display: block; min-width: 640px; width: 100%; height: auto; }
.sg-cal text { font: 11px var(--font-text); fill: var(--muted); }
.sg-cal .nm { fill: var(--ink); }
.sg-cal .yr { font: 600 11px var(--font-mono); fill: var(--ink); }
.sg-cal .gap { fill: url(#sg-hatch); }
.sg-cal .later { fill: var(--paper-2); }
.sg-cal .ea { fill: var(--ea); }
.sg-cal .local { fill: var(--local); }
.sg-cal .area { font: 600 11px var(--font-text); fill: var(--muted); }
.chart-note .sw.ea { background: var(--ea); }
.chart-note .sw.local { background: var(--local); }
.chart-note .sw.later { background: var(--paper-2); }

/* ------------------------------------------------------------------ 4. compare */
.sg-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 12px 24px; margin: 8px 0 18px; }
.sg-costs label, .sg-plan label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-note); color: var(--muted); }
.sg-costs input, .sg-plan select { font: inherit; min-height: 44px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); width: 100%; }
.sg-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .sg-plans { grid-template-columns: 1fr; } }
.sg-plan { border-top: 2px solid var(--ink); padding-top: 10px; }
.sg-plan h3 { font: 600 var(--fs-head)/1.2 var(--font-display); margin: 0 0 10px; }
.sg-plan > * + * { margin-top: 10px; }
.sg-plan fieldset { border: 0; padding: 0; margin: 10px 0 0; }
.sg-plan legend { font-size: var(--fs-note); color: var(--muted); padding: 0; margin-bottom: 4px; }
.sg-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.sg-months label { flex-direction: row; align-items: center; justify-content: center; gap: 4px; min-height: 40px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); cursor: pointer; font-size: 13px; }
.sg-months input { width: 16px; height: 16px; accent-color: var(--ink); }
.sg-months label.no-ea { border-style: dashed; }
.sg-sites { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow: auto; border-top: 1px solid var(--hair); }
.sg-sites li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--hair); font-size: 13px; padding: 2px 0; }
.sg-sites li span small { display: block; color: var(--muted); font-size: 12px; }
.sg-sites .rm { min-height: 36px; padding: 2px 10px; }
.sg-sites .empty { color: var(--muted); padding: 8px 0; }
.sg-strip svg { display: block; width: 100%; height: auto; }
.sg-strip text { font: 10px var(--font-text); fill: var(--muted); }
.sg-strip .gap { fill: url(#sg-hatch-s); }
.sg-strip .now { fill: var(--ea); }
.sg-strip .add { fill: var(--pick); }
.sg-compare { margin-top: 22px; }
.sg-compare td { font-variant-numeric: tabular-nums; }
.sg-compare td small { display: block; color: var(--muted); font-size: 12px; }
.sg-limit { font-size: var(--fs-note); border-left: 2px solid var(--pick); padding-left: 12px; margin: 16px 0 0; max-width: 90ch; }

/* ------------------------------------------------------------------ 5. simulation */
.sg-policies { margin-top: 8px; }
.fnote dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: var(--fs-note); margin: 8px 0; }
.fnote dt { font-weight: 600; }
.fnote dd { margin: 0; color: var(--muted); }
#sim .fnote, #rain .fnote { min-width: 0; }
@media (max-width: 640px) { .fnote dl { grid-template-columns: minmax(0, 1fr); } .fnote dd { margin-bottom: 6px; } }