/* Public-site spacing and interaction states; no changes to map colour scales. */
html > body { padding: clamp(16px, 3vw, 32px); }
html[data-embedded] > body { padding: 0; }
/* Contain child margins so the iframe measurement includes the whole page. */
#woodfibre-v5 { display: flow-root; }
#wf5-map-holder { scroll-margin-top: 16px; }
#wf5-map-holder:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
#wf5-view-map { margin-inline-start: auto; white-space: nowrap; }
#woodfibre-v5 { max-width: 1180px; margin-inline: auto; --font-size-normal: 16px; --font-size-small: 14px; font-size: var(--font-size-normal); line-height: 1.5; }
html #woodfibre-v5 > * + *, html #woodfibre-v5 [role="tabpanel"] > * + * { margin-top: 18px; }
#woodfibre-v5 .viz-controls { gap: 16px 24px; align-items: start; }
#woodfibre-v5 .form-label { min-width: 0; }
#woodfibre-v5 .wf5-time-presets { gap: 8px; align-items: center; }
#woodfibre-v5 .wf5-time-presets .btn { padding-inline: 14px; }
#woodfibre-v5 .wf5-reset-duration { display: block; margin-top: 8px; font-size: 14px; }
#wf5-profile-note { border-inline-start: 2px solid var(--border); padding-inline-start: 12px; }
#woodfibre-v5 .form-select { width: 100%; max-width: 100%; }
#woodfibre-v5 .nav-pills { gap: 8px; flex-wrap: wrap; padding-block: 8px; }
#woodfibre-v5 .nav-link, #woodfibre-v5 .btn, #woodfibre-v5 .form-select { min-height: 44px; }
#woodfibre-v5 .form-check { min-height: 44px; }
#woodfibre-v5 summary { cursor: pointer; padding-block: 10px; }
#woodfibre-v5 details[open] > summary { margin-bottom: 12px; }
#wf5-status { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
#woodfibre-v5:is([data-scenario-state="working"], [data-scenario-state="loading"]) #wf5-status::before {
  content: ''; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--border); border-top-color: var(--foreground); border-radius: 50%; animation: explorer-spin 1s linear infinite;
}
#explorer-map-status { padding: 12px 16px; background: var(--muted); color: var(--foreground); border-inline-start: 3px solid var(--border); }
#wf5-map-holder:has(svg:empty) { min-height: 300px; background: var(--muted); }
#woodfibre-v5 a { overflow-wrap: anywhere; }
#woodfibre-v5 .table { min-width: 0; }
#explorer-reload[hidden] { display: none; }
#wf5-community-comparison { padding: 20px; border: 1px solid var(--border); border-radius: 8px; }
#wf5-community-comparison > * + * { margin-top: 12px; }
#wf5-community-title { margin: 0; font-size: 20px; }
#wf5-community-table table { width: 100%; table-layout: fixed; }
#wf5-community-table caption { text-align: left; padding-block: 8px; }
#wf5-community-table :is(th,td) { text-align: right; vertical-align: middle; overflow-wrap: anywhere; padding: 12px 8px; }
#wf5-community-table :is(th,td):first-child { text-align: left; width: 40%; }
#wf5-community-table thead th { font-size: 14px; }
#woodfibre-v5 .wf5-community-link { background: none; border: 0; padding: 4px 0; min-height: 44px; color: var(--foreground); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#woodfibre-v5 .wf5-community-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.wf5-benchmark-band { display: inline-block; padding: 4px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.wf5-benchmark-band[data-band="half"] { background: color-mix(in srgb, var(--yellow) 35%, var(--background)); }
.wf5-benchmark-band[data-band="above-one"] { background: color-mix(in srgb, var(--orange) 35%, var(--background)); }
.wf5-benchmark-band[data-band="above-two"] { background: color-mix(in srgb, var(--red) 30%, var(--background)); }
#wf5-community-state { border-inline-start: 3px solid var(--border); padding-inline-start: 12px; }
@keyframes explorer-spin { to { transform: rotate(360deg); } }
@media(max-width: 600px) {
  #wf5-community-comparison { padding: 14px; }
  #wf5-community-table :is(th,td) { font-size: 14px; padding: 10px 4px; }
  #woodfibre-v5 .viz-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  #woodfibre-v5 .viz-controls > *, #woodfibre-v5 .viz-row > * { max-width: 100%; min-width: 0; }
  #woodfibre-v5 .form-select { font-size: 16px; }
  #woodfibre-v5 .nav-pills { gap: 4px; }
}
@media(prefers-reduced-motion: reduce) {
  #woodfibre-v5 #wf5-status::before { animation: none; }
}
/* Preset selection stays on the same working surface. */
#woodfibre-v5 { --primary: #17677a; --primary-foreground: #fff; --ring: #17677a; --foreground: #183748; --muted-foreground: #4c6572; --border: #c9d8df; }
#woodfibre-v5 .wf5-preset-picker { padding: 0; margin-block: 24px; }
#woodfibre-v5 .wf5-preset-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 6px; }
#woodfibre-v5 .wf5-preset-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
#woodfibre-v5 .wf5-preset-era { color: var(--muted-foreground); font-size: 14px; }
#woodfibre-v5 .wf5-preset-picker > p { margin: 0 0 16px; color: var(--muted-foreground); }
#woodfibre-v5 .wf5-preset-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 6px; }
#woodfibre-v5 .wf5-preset { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 132px; padding: 16px; border: 1px solid transparent; border-radius: 10px; background: #fff; color: var(--foreground); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 0 0 1px oklch(0 0 0 / .06),0 1px 2px -1px oklch(0 0 0 / .06),0 2px 4px oklch(0 0 0 / .04); transition: transform 150ms cubic-bezier(.23,1,.32,1); touch-action: manipulation; }
#woodfibre-v5 .wf5-preset[aria-pressed="true"] { border-color: #17677a; background: #edf6f8; box-shadow: inset 0 0 0 1px #17677a; }
#woodfibre-v5 .wf5-preset-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted-foreground); width: 100%; font-variant-numeric: tabular-nums; }
#woodfibre-v5 [data-preset-state] { color: #17677a; font-weight: 600; }
#woodfibre-v5 .wf5-preset strong { font-size: 17px; font-weight: 600; line-height: 1.35; }
#woodfibre-v5 .wf5-preset-description { font-size: 14px; color: var(--muted-foreground); }
#woodfibre-v5 .wf5-preset:active:not(:focus-visible) { transform: scale(.96); }
#woodfibre-v5 .wf5-preset:focus-visible { outline: 3px solid #183748; outline-offset: 3px; transition: none; }
#woodfibre-v5 .wf5-scenario-controls { padding: 20px; border-radius: 10px; background: #f4f7f9; }
#woodfibre-v5 :is(.btn,.nav-link,.form-select,summary):focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
#woodfibre-v5 .btn { transition: transform 150ms cubic-bezier(.23,1,.32,1); }
#woodfibre-v5 .btn:active:not(:disabled):not(:focus-visible) { transform: scale(.96); }
#woodfibre-v5 .btn:focus-visible { transition: none; }
#woodfibre-v5 #wf5-map-holder { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
html[data-embedded] #woodfibre-v5 > h2, html[data-embedded] #woodfibre-v5 > h2 + div { display: none; }
@media(hover:hover) and (pointer:fine) { #woodfibre-v5 .wf5-preset:hover { background: #f2f7f9; } #woodfibre-v5 .wf5-preset[aria-pressed="true"]:hover { background: #e5f1f5; } }
@media(max-width:760px) { #woodfibre-v5 .wf5-preset-grid { grid-template-columns: minmax(0,1fr); gap: 10px; } #woodfibre-v5 .wf5-preset { min-height: 104px; padding: 12px 16px; gap: 4px; } #woodfibre-v5 .wf5-scenario-controls { padding: 16px; } #woodfibre-v5 #wf5-map-holder { padding: 6px; } }
@media(prefers-reduced-motion:reduce) { #woodfibre-v5 :is(.wf5-preset,.btn) { transition: none; } #woodfibre-v5 :is(.wf5-preset,.btn):active { transform: none !important; } }