/* Program-only shell. This layer also supports the unchanged embeddable engine. */
.program-page { --pt-chrome-offset: 0px; scroll-padding-top: 0px; }
.program-page body { margin: 0; color: #102c33; background: #fff; font-family: var(--font-body); }
.program-page * { box-sizing: border-box; }
.program-page img { max-width: 100%; }
.program-page [hidden] { display: none !important; }
.program-page :is(section, article)[id] { scroll-margin-top: calc(var(--pt-chrome-offset) + 16px); }
.program-page :focus-visible { outline: 3px solid #102c33; outline-offset: 4px; }
.program-page :is(button, a, summary) { -webkit-tap-highlight-color: transparent; }
.program-page :is(button, summary) { cursor: pointer; }
.program-page :is(p, li) { line-height: 1.6; }
.program-page h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; }
.program-page h2 { font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: 1.13; letter-spacing: -.025em; }
.program-page h3 { font-size: 1.5rem; line-height: 1.2; }
.program-page .eyebrow { font-size: .8rem; letter-spacing: .1em; }
.program-page details { border: 1px solid #cedbd5; border-radius: 8px; padding: .9rem 1rem; }
.program-page details > summary { font-weight: 600; min-height: 28px; line-height: 1.5; }
.program-page details[open] > summary { margin-bottom: .7rem; }
.program-page details p { font-size: 1rem; }
.program-page .river-app[data-presentation="sections"] { display: block; width: 100%; max-width: none; height: auto; min-height: 0; background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: visible; color: #102c33; }
.program-page :is(.explorer-section,.watch-insights,.connections-section) { padding: 2.5rem clamp(1.25rem,4vw,4rem); background: #f1f6f7; margin: 0; }
.program-page .watch-insights { background: #fff; }
.program-page .connections-section { background: #edf3ed; }
.section-intro { max-width: 1240px; margin: 0 auto 1.25rem; display: block; }
.section-intro h2 { margin: .25rem 0 .7rem; }
.section-intro p:not(.eyebrow) { max-width: 76ch; font-size: 1rem; margin: .4rem 0; color: #465e63; }
.section-intro .record-period { font-size: .85rem; }
.map-controls { max-width: 1240px; margin: 0 auto 1rem; display: grid; grid-template-columns: 1fr 1.2fr; gap: .6rem 1.5rem; }
.map-controls .waterway-search { grid-column: 1; margin: 0; }
.map-controls .waterway-search > label { font-size: .95rem; }
.map-controls .filter-row-label { display: none; }
.map-controls .filter-row { grid-column: 1; gap: .5rem; }
.map-controls .filter-row button { font-size: .9rem; padding: .6rem .8rem; min-height: 44px; }
.map-controls .waterway-picker { grid-column: 2; grid-row: 1 / 3; background: #fff; max-height: 170px; overflow-y: auto; }
.map-controls .waterway-list-region h4 { display: none; }
.map-controls .waterway-list { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.map-controls .waterway-list button { min-height: 44px; padding: .6rem; }
.map-controls .waterway-list :is(b,span) { font-size: .85rem; }
#waterway-picker-value { color: #465e63; font-weight: 400; }
.program-page .river-app[data-presentation="sections"] .map-world { display: grid; grid-template-columns: minmax(0,1fr) 350px; grid-template-areas: "map results" "key results"; grid-template-rows: 510px auto; max-width: 1240px; height: auto; margin: auto; border: 1px solid #ccd8d4; border-radius: 10px; overflow: hidden; }
.program-page .map-stage { grid-area: map; display: block; min-height: 0; }
.map-key-panel { grid-area: key; min-width: 0; padding: 1rem; background: #fff; border-top: 1px solid #ccd8d4; }
.program-page .map-guide { grid-area: results; padding: 1.3rem; background: #fff; overflow-y: auto; max-height: 680px; border-left: 1px solid #ccd8d4; }
.program-page .map-guide h3 { font-size: 1.35rem; margin: 0 0 .7rem; }
.program-page .map-guide > p { font-size: .95rem; }
.program-page .map-guide :is(.map-selection span,.site-results>p,.site-results li span,.site-results li em,.look-without-harm p,.map-data-note,.look-without-harm strong) { font-size: .88rem; }
.program-page .map-guide .site-results h4 { font-size: 1rem; }
.program-page .map-guide :is(.site-results h5,.site-results-header button) { font-size: .85rem; }
.program-page .map-guide .site-results li strong { font-size: .98rem; }
.program-page .map-selection { margin: 0 0 .8rem; box-shadow: none; }
.program-page .map-legend { position: static; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; max-width: none; font-size: .875rem; line-height: 1.4; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.program-page .map-attribution-row { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid #e0e8e6; }
.program-page .map-attribution-row .leaflet-control-attribution { position: static; float: none; margin: 0; padding: 0; color: #465e63; background: none; font: 400 .75rem/1.5 var(--font-body); white-space: normal; }
.program-page .map-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.program-page .map-legend > strong { flex-basis: 100%; font-weight: 500; }
.program-page .map-legend .dot-private { background: transparent; border: 3px solid #9b6c24; border-radius: 2px; }
.program-page .agg-marker-private .agg-disc { outline: 3px dashed #9b6c24; outline-offset: 2px; }
.map-footer-actions { max-width: 1240px; margin: .8rem auto 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.map-footer-actions button { min-height: 44px; border: 1px solid #4a6e4a; border-radius: 6px; padding: .5rem .8rem; background: #fff; font: inherit; }
.program-page #river-app .map-footer-actions a { display: inline-flex; min-height: 44px; align-items: center; color: #234e58; font-weight: 600; }
.program-page .world { max-width: 1240px; margin: auto; height: auto; border: 1px solid #b9cbbd; border-radius: 10px; overflow: hidden; display: block; }
.program-page .world-topbar { min-height: 54px; padding: .55rem 1rem; background: #234739; color: #fff; gap: .8rem; }
.program-page .world-topbar p { font-size: .9rem; }
.program-page .world-tools button { min-height: 40px; font-size: .9rem; border-radius: 6px; }
.program-page .river-app[data-presentation="sections"] .creek-world { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,1fr); grid-template-rows: auto minmax(0,1fr); height: 690px; overflow: hidden; }
.program-page .thread-trail { position: static; background: #d4e4d4; color: #102c33; padding: .5rem 1rem; }
.program-page .thread-trail button { color: #102c33; min-height: 44px; }
.program-page .thread-panel { padding: 1.2rem; overflow-y: auto; }
.program-page .thread-panel > :is(.scene-step,#scene-title,#scene-copy) { display: none; }
.program-page .river-app[data-movement="disturb"] .thread-panel > :is(#scene-title,#scene-copy) { display: block; }
.program-page .thread-panel #scene-title { font-size: 1.4rem; }
.program-page .connect-current { padding: 1rem; border: 0; border-radius: 8px; box-shadow: none; background: #eaf3f5; }
.program-page .connect-current h4 { font-size: 1.6rem; margin: .3rem 0 .5rem; }
.program-page .connect-current p { font-size: 1rem; }
.program-page .connect-count, .program-page .connect-current::after { display: none; }
.program-page .connect-start-prompt { padding: .8rem 0; margin: 0; background: none; }
.program-page .connect-start-prompt > :is(h5,p) { display: none; }
.program-page .connect-starters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.program-page .connect-starters button { min-height: 46px; font-size: 1rem; }
.program-page .focus-relationship-list { gap: .6rem; }
.program-page .focus-relationship-list button { padding: .8rem; border-radius: 7px; box-shadow: none; }
.program-page .focus-relationship-list button :is(strong,span) { font-size: .95rem; }
.program-page .connect-path-note { display: none; }
.program-page .connect-mobile-key { margin: 0; color: #465e63; font-size: .875rem; }
.program-page .connect-onward { width: 100%; min-height: 46px; margin-top: .8rem; }
.program-page .waterbug-catalogue-entry { margin: 1rem 0 0; padding: .8rem; }
.program-page .waterbug-catalogue-entry :is(.waterbug-preview,ul) { display: none; }
.program-page .waterbug-catalogue-entry h5 { font-size: 1.1rem; }
.program-page .web-reading-guide { margin-top: 1rem; font-size: .9rem; }
.program-page .scene-label { font-size: .8rem; }

/* An independent, data-first reading surface. No inherited site chrome. */
.program-page { --font-body: "Barlow", sans-serif; --font-ui: "Barlow Semi Condensed", sans-serif; --font-display: "Barlow Semi Condensed", sans-serif; }
.program-page body { background: #f7f9f8; }
.program-page main { max-width: 1440px; margin: auto; background: #fff; }
.program-page :is(h1,h2,h3,h4,h5) { font-family: var(--font-display); font-weight: 700; }
.program-page a { text-underline-offset: 4px; }
/* The copy keeps at least 380px beside the photo; below 761px the two stack. */
.explorer-opening { display: grid; grid-template-columns: minmax(min(100%,380px),1fr) minmax(0,600px); min-height: 280px; background: #102c33; color: #fff; }
.opening-copy { align-self: center; padding: 1.6rem clamp(1.25rem,4vw,4rem); }
.program-origin { display: inline-block; padding: .4rem 0; color: #d1e3e3; font-size: .85rem; }
.opening-copy .anniversary { color: #f8e04e; font: 600 .9rem/1.4 var(--font-ui); margin: 1.1rem 0 .6rem; }
.program-page .opening-copy h1 { color: #fff; max-width: 12ch; font-size: clamp(2.5rem,4vw,3.5rem); margin: 0; letter-spacing: -.025em; }
.opening-copy > p:last-child { margin: .7rem 0 0; font-size: 1.1rem; color: #d1e3e3; }
.opening-photo { position: relative; margin: 0; min-width: 0; height: 300px; }
.opening-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 28%; }
.opening-photo figcaption { position: absolute; bottom: .65rem; right: .85rem; padding: .2rem .5rem; color: #fff; background: #102c33d9; font-size: .75rem; }
.program-page .program-origin:focus-visible { outline-color: #f8e04e; }
.record-summary { padding: 1.35rem clamp(1.25rem,4vw,4rem); border-bottom: 1px solid #d4e0e0; }
.program-page .hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; margin: 0; padding: 0; width: 100%; border: 0; }
.program-page .hero-stats div { display: flex; align-items: center; gap: .8rem; border: 0; padding: 0; min-width: 0; }
.program-page .hero-stats dt { color: #102c33; font: 700 2.6rem/1 var(--font-display); }
.program-page .hero-stats dd { max-width: 15ch; margin: 0; font-size: .95rem; color: #465e63; }
.record-summary > p { margin: .65rem 0 0; color: #465e63; font-size: .85rem; }
.record-summary > .totals-label { margin: 0 0 .7rem; font: 600 .8rem/1.4 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; }
.program-page :is(.explorer-section,.watch-insights,.connections-section) { background: #fff; padding-top: 2.6rem; padding-bottom: 2.8rem; border-bottom: 1px solid #dce5e4; }
.program-page .watch-insights { background: #f5f8f8; }
.program-page .section-intro { color: #102c33; }
.program-page .section-intro .eyebrow { color: #345961; font-weight: 600; }
.program-page .section-intro h2 { color: #102c33; font-size: clamp(1.8rem,3vw,2.35rem); }
.program-page .section-intro p:not(.eyebrow) { max-width: 85ch; }
.map-controls .waterway-picker { align-self: start; width: 100%; max-height: 215px; color: #102c33; }
.map-controls .waterway-picker summary { min-height: 38px; align-content: center; }
.program-page .map-guide { color: #102c33; }
.program-page .map-guide details { margin-top: .75rem; }
.program-page .map-guide:has(#site-results:not([hidden])) > h3 { display: none; }
.program-page .map-reading-guide { font-size: .9rem; }
.program-page .map-data-note a { display: inline-block; margin-top: .2rem; padding: .2rem 0; }
.program-page .agg-marker-private .agg-disc { background: #fff; border-color: #5a8fa0; color: #102c33; }
.program-page .agg-marker-private.agg-marker-detected .agg-disc { background: #4a6e4a; border-color: #fff; color: #fff; }
.program-page .site-dialog { max-height: calc(100dvh - 32px); width: min(600px,calc(100vw - 32px)); padding: 1.5rem; border-radius: 10px; }
.program-page .site-dialog h3 { font-size: 1.8rem; padding-right: 2.5rem; }
.program-page .dialog-close { width: 44px; height: 44px; }
.data-scope { max-width: 1240px; margin: 0 auto .8rem; color: #465e63; font-size: .9rem; }
.data-scope strong { color: #102c33; }
.program-page .insight-explorer { display: block; max-width: 1240px; min-height: 0; border: 1px solid #ccdadd; border-radius: 10px; background: #fff; box-shadow: none; overflow: hidden; }
.program-page .insight-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; padding: 0; background: #fff; border-bottom: 1px solid #ccdadd; }
.program-page .insight-tabs button { display: block; min-height: 60px; padding: .9rem .7rem; border: 0; border-radius: 0; border-bottom: 3px solid transparent; background: transparent; color: #465e63; }
.program-page .insight-tabs button :is(span,small) { display: none; }
.program-page .insight-tabs button strong { font: 600 1.05rem/1.3 var(--font-ui); }
.program-page .insight-tabs button[aria-selected="true"] { background: #eaf3f5; border-bottom-color: #345961; color: #102c33; }
.program-page .insight-tabs button:focus-visible { outline-offset: -5px; }
.insight-mobile-control { display: none; }
.program-page .insight-panel { padding: 1.6rem; min-width: 0; color: #102c33; }
.program-page .insight-panel h3 { font-size: clamp(1.4rem,2.5vw,1.8rem); max-width: 45ch; }
.program-page .insight-panel > p { font-size: 1rem; line-height: 1.55; }
.program-page .insight-kicker { display: none; }
.program-page .effort-chart { min-height: 0; }
.program-page .insight-reading-note { max-width: 1240px; margin: .7rem auto 0; display: block; padding: 0; background: none; color: #465e63; font-size: .9rem; }
.program-page .insight-reading-note strong, .program-page .insight-reading-note > a { display: none; }
.program-page .insight-reading-note p { margin: 0; color: #465e63; font-size: .9rem; }
.program-page .context-note { color: #345961; background: #fff; font-size: .9rem; }
.program-page .context-note p { font-size: .9rem; }
.chart-methods { max-width: 1240px; margin: 1rem auto 0; }
.insight-connection { margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid #dce5e4; }
.insight-connection p { margin: .3rem 0 .6rem; color: #465e63; font-size: .9rem; }
.insight-connection a { display: inline-block; padding: .7rem 0; line-height: 1.4; color: #234e58; font-weight: 600; }
.program-page .world { border-color: #ccdadd; }
.program-page .world-topbar { background: #102c33; }
.program-page .thread-trail { background: #edf3f3; }
.program-page .ecosystem-breadcrumbs::before { color: #102c33; }
.program-page .ecosystem-breadcrumbs > strong, .program-page .ecosystem-breadcrumbs li:not(:last-child)::after, .program-page .ecosystem-breadcrumbs li > span { color: #345961; font-size: .875rem; }
.program-page .ecosystem-breadcrumbs button { font-size: .875rem; }
.program-page .pressure-breadcrumbs :is(.pressure-pathway-name span,.pressure-branch-label), .program-page .pressure-breadcrumbs > strong::after { color: #345961; font-size: .875rem; }
.program-page .ecosystem-breadcrumbs button:disabled:not([aria-current]) { opacity: 1; color: #52676b; background: #e3ebeb; }
.program-page .connect-guide { padding: 0; border: 0; background: none; box-shadow: none; }
.program-page #movement-action { margin-top: 0; }
.program-page #movement-action button { font-size: 1rem; }
.program-page #movement-action .connect-starters button { text-align: left; background: #fff; border-color: #bdcfd1; font-weight: 600; }
.program-page #movement-action .connect-starters button:hover { background: #eaf3f5; border-color: #345961; }
.program-page #movement-action .focus-relationship-list button { min-height: 0; padding: .8rem; }
.program-page #movement-action .pressure-paths button { font-size: .95rem; }
.program-page #movement-action .prediction-reveal { background: #102c33; color: #fff; border-color: #102c33; }
.program-page #movement-action .prediction-reveal::after { color: #fff; }
.program-page #movement-action .prediction-reveal:hover { background: #234e58; }
.program-page #movement-action .waterbug-catalogue-entry > p { font-size: .95rem; }
.program-page .connect-starters button { display: flex; gap: .55rem; align-items: center; text-align: left; }
.program-page .connect-starters button > span:first-child { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: #f8e04e; color: #102c33; font-weight: 700; }
.program-page .scene-node .node-label { font-size: .875rem; }
.program-page .scene-node[data-node-id="waterway-barriers"] .node-label { top: auto; bottom: calc(100% + 8px); }
.program-page .scene-node[data-node-id="monitoring"] .node-label, .program-page .scene-node[data-node-id="enclosed-traps"] .node-label { right: 0; left: auto; transform: none; }
.program-page .pressure-paths-label, .program-page .pressure-counter, .program-page .pressure-paths span { color: #465e63; font-size: .875rem; }
.program-page .pressure-prediction { margin-top: 1rem; }
.program-page .pressure-focus-card { order: initial; }
.program-page .river-app[data-movement="disturb"] #selected-card > :is(div:first-child,h4) { display: none; }
.program-page .pressure-prediction :is(legend,button), .program-page .pressure-step-copy, .program-page .pressure-complete, .program-page .downstream-note, .program-page .prediction-return p { font-size: 1rem; }
.program-page .scenario-onward { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ccdadd; }
.program-page .scenario-onward button { width: 100%; min-height: 44px; margin-top: .5rem; font: inherit; }
.program-page .river-app[data-waterbugs-view]:not([data-waterbugs-view="closed"]) .creek-world { display: block; height: auto; }
.program-page .river-app[data-waterbugs-view]:not([data-waterbugs-view="closed"]) :is(.scene-column,.creek-scene,.ecosystem-breadcrumbs,.node-detail-disclosure,.node-evidence-disclosure) { display: none; }
.program-page .river-app[data-waterbugs-view]:not([data-waterbugs-view="closed"]) .thread-panel { height: auto; max-width: 1040px; margin: auto; overflow: visible; }
.program-page .river-app[data-waterbugs-view]:not([data-waterbugs-view="closed"]) :is(.waterbug-catalogue__exit,.waterbug-view__back,.waterbug-taxon__back) { display: inline-flex; }
.program-page .waterbug-catalogue :is(p,li,dd,dt,label,button,small,figcaption,.waterbug-view__count,.waterbug-group-card__copy span,.waterbug-group-card__copy small,.waterbug-taxon-card__copy small,.waterbug-sensitivity-badge) { font-size: .9rem; }
.program-page .waterbug-catalogue :is(summary,.waterbug-view__heading > span,.waterbug-view__heading > div > span,.waterbug-sensitivity) { font-size: .875rem; }
.program-page .waterbug-catalogue .waterbug-taxon__hero h6 { font-size: 1.7rem; }
.program-page .waterbug-catalogue .waterbug-sensitivity-context { font-size: .9rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; }
.program-page .waterbug-catalogue .waterbug-platypus-link h6 { font-size: 1.1rem; }
.program-page .waterbug-catalogue :is(.waterbug-catalogue__eyebrow,.waterbug-view__eyebrow) { font-size: .8rem !important; }
.program-page .waterbug-catalogue :is(.waterbug-group-card__copy strong,.waterbug-taxon-card__copy strong) { font-size: 1.05rem; }
.program-page .waterbug-catalogue :is(.waterbug-catalogue__header h5,.waterbug-view__heading h6) { font-size: 1.7rem; }
.program-page .waterbug-catalogue .waterbug-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.program-page .web-reading-guide summary { color: #345961; }
.program-page .river-app[data-movement="connect"] #selected-card > :is(div:first-child,h4) { display: none; }
.waterbug-field-photo { margin: 0 0 .9rem; }
.waterbug-field-photo img { width: 100%; height: 155px; object-fit: cover; border-radius: 5px; }
.waterbug-field-photo figcaption { font-size: .75rem; line-height: 1.4; color: #465e63; }
.program-page .explorer-footer { display: block; min-height: 0; max-width: 1440px; margin: 0 auto; padding: 1.5rem clamp(1rem,4vw,4rem); border-top: 1px solid #dce5e4; color: #465e63; background: #fff; }
.program-page .explorer-footer-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1240px; margin: 0 auto; }
.program-page .explorer-footer-logo { display: inline-flex; flex: 0 0 auto; padding: 0; }
.program-page .explorer-footer-logo img { display: block; width: 144px; height: auto; }
.program-page .explorer-footer p { max-width: 44ch; margin: 0; font-size: .9rem; line-height: 1.6; text-align: right; }
@media (max-width: 600px) {
 .program-page .explorer-footer-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
 .program-page .explorer-footer p { text-align: left; }
}
@media (max-width: 1000px) {
 .program-page .river-app[data-presentation="sections"] .map-world { grid-template-columns: minmax(0,1fr) 310px; }
 .program-page .river-app[data-presentation="sections"] .creek-world { display: flex; flex-direction: column; height: auto; overflow: visible; }
 .program-page .creek-scene { height: 500px; min-height: 500px; flex: none; }
 .program-page .thread-panel { height: auto; overflow: visible; }
 .program-page .hero-stats div { display: block; }
 .program-page .hero-stats dd { max-width: none; margin-top: .35rem; }
}
@media (max-width: 760px) {
 .explorer-opening { display: flex; flex-direction: column; }
 .opening-copy { align-self: stretch; padding: 1.25rem; }
 .program-page .opening-copy h1 { max-width: 100%; font-size: 2.5rem; }
 .opening-copy .anniversary { margin-top: .65rem; }
 .opening-photo { height: 135px; }
 .opening-photo img { object-position: 60% 28%; }
 .program-page .hero-stats { gap: .75rem; }
 .program-page .hero-stats dt { font-size: 2.2rem; }
 .program-page .hero-stats dd { font-size: .85rem; line-height: 1.35; }
 .program-page :is(.explorer-section,.watch-insights,.connections-section) { padding: 1.8rem 1rem; }
 .section-intro { margin-bottom: 1rem; }
 .map-controls { display: flex; flex-direction: column; gap: .6rem; }
 .map-controls .filter-row { flex-wrap: wrap; }
 .map-controls .waterway-list { grid-template-columns: 1fr; }
 .program-page .river-app[data-presentation="sections"] .map-world { display: flex; flex-direction: column; height: auto; }
 .program-page .map-stage { height: 360px; display: block; flex: none; }
 .program-page .map-stage #program-map-live { min-height: 0; height: 100%; }
 .program-page .map-guide { overflow: visible; max-height: none; padding: 1rem; border-left: 0; border-top: 1px solid #ccd8d4; }
 .program-page .map-footer-actions { flex-wrap: wrap; font-size: .95rem; }
 .program-page .insight-tabs { display: none; }
 .insight-mobile-control { display: grid; gap: .45rem; padding: 1rem; border-bottom: 1px solid #ccdadd; }
 .insight-mobile-control label { font: 600 1rem/1.3 var(--font-ui); }
 /* Safari ignores height and padding on a native select, so draw the control ourselves. */
 .insight-mobile-control select { width: 100%; min-height: 48px; border: 1px solid #80969c; border-radius: 5px; padding: .65rem 2.5rem .65rem .65rem; font: inherit; color: #102c33; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23102c33' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .9rem center; -webkit-appearance: none; appearance: none; }
 .program-page .insight-panel { padding: 1rem; }
 .program-page .effort-chart-scroll { margin-right: 0; padding-right: .2rem; }
 .program-page .river-app[data-presentation="sections"] .creek-world { display: flex; height: auto; flex-direction: column; overflow: visible; }
 .program-page .world { overflow: visible; }
 .program-page .world-topbar { flex-wrap: wrap; border-radius: 10px 10px 0 0; padding: .7rem; }
 .program-page .world-topbar p { display: none; }
 .program-page .world-tools { width: 100%; justify-content: flex-end; }
 .program-page .creek-scene { height: 370px; min-height: 370px; width: 100%; flex: none; }
 .program-page .scene-node.is-connect-visible { min-width: 44px; min-height: 44px; }
 .program-page .scene-label { position: static; margin: 0; padding: .55rem .75rem; font-size: .8rem; background: #102c33; color: #fff; }
 .program-page .thread-panel { overflow: visible; padding: 1rem; }
 .program-page .thread-trail { position: static; min-height: 56px; }
 .program-page .focus-relationship-list button { min-height: 60px; }
 .program-page .waterbug-catalogue .waterbug-facts { grid-template-columns: 1fr; }
 .program-page .waterbug-taxa-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .program-page *, .program-page *::before, .program-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print { .opening-photo { height: 150px; } .program-page .thread-panel { overflow: visible; } }

.evidence-labels { font-size: .9rem; }
.evidence-labels dt { font-weight: 600; margin-top: .75rem; }
.evidence-labels dd { margin: .15rem 0 0; }

/* Approved full-frame artwork: image and hotspot coordinates share one plane.
   Caption and non-pictured topics never contribute to the image's height. */
.program-page .river-app[data-presentation="sections"] .creek-world { height: auto; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; align-items: start; }
.program-page .scene-column { grid-column: 1; grid-row: 2; min-width: 0; width: 100%; background: #102c33; }
.program-page .creek-scene { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.program-page .creek-scene > img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.program-page .creek-scene > #scene-nodes { position: absolute; inset: 0; }
.program-page .river-app[data-movement="connect"] .scene-tint { background: none; }
.program-page .scene-column > .scene-label { position: static; margin: 0; padding: .75rem 1rem; color: #e2edec; background: #102c33; text-shadow: none; font-size: .8125rem; line-height: 1.5; }
.program-page .thread-panel { max-height: none; overflow: visible; }
.program-page .river-app[data-presentation="sections"] .thread-panel { grid-column: 1; grid-row: 3; width: 100%; padding: clamp(1rem,3vw,2rem); }
.program-page .connect-current { padding: 0 0 1.25rem; background: none; border-bottom: 1px solid #ccdadd; border-radius: 0; }
.program-page .connect-current p { max-width: 78ch; padding-right: 0; }
.program-page .connect-full-explanation { margin-top: .85rem; white-space: pre-line; }
/* Documentary photos belong to their explanation, not the illustrated scene.
   Keep the whole frame unless a photo has an explicitly reviewed cover crop. */
.program-page .connection-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; margin-top: 1.25rem; align-items: start; }
.program-page .connection-photo { margin: 0; min-width: 0; max-width: 640px; }
.program-page .connection-photo-media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: #edf3f3; }
.program-page .connection-photo-media img { position: absolute; inset: 0; margin: auto; display: block; width: 100%; height: 100%; max-width: var(--photo-width); max-height: var(--photo-height); object-fit: contain; border-radius: 4px; }
.program-page .connection-photo[data-photo-fit="cover"] .connection-photo-media img { object-fit: cover; border-radius: 8px; }
.program-page .connection-photo figcaption { padding-top: .65rem; color: #253f45; font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.program-page .connection-photo-caption, .program-page .connection-photo-credit { display: block; }
.program-page .connection-photo-credit { margin-top: .3rem; color: #465e63; font-size: .8125rem; }
.program-page #movement-action .connect-image-return { justify-self: start; width: auto; margin: .25rem 0 1rem; padding: .6rem .85rem; min-height: 44px; border: 1px solid #80969c; border-radius: 6px; background: white; color: #234e58; font: 600 .95rem/1.4 var(--font-body); }
.program-page #movement-action .connect-image-return:hover { background: #edf3f3; }
.program-page .creek-world > .thread-trail { width: 100%; }
.program-page .river-app[data-movement="connect"] #selected-card > :is(div:first-child,h4),
.program-page .river-app[data-movement="connect"] .node-detail-disclosure > :is(#selected-plain,#selected-detail) { display: none; }
.program-page .connect-starters { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.program-page .focus-relationship-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); align-items: start; gap: 1.25rem; }
.program-page .selected-card { padding: 0; border: 0; box-shadow: none; background: transparent; }
.program-page :is(.node-detail-disclosure,.node-evidence-disclosure) > summary { font-size: .95rem; }
.program-page .node-facts :is(li,span,strong) { font-size: .95rem; line-height: 1.6; }
.program-page #basin-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin: .5rem 0; }
.program-page #basin-filters button { flex: 0 0 auto; min-width: 70px; max-width: 100%; min-height: 46px; padding: .7rem 1.1rem; border-radius: 8px; font: 600 1rem/1.25 var(--font-body); white-space: normal; overflow-wrap: anywhere; text-align: center; }
@media (max-width: 480px) {
  .program-page #basin-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .program-page #basin-filters button { width: 100%; }
}
.program-page .scene-topics { padding: .85rem 1rem 1rem; background: #f1f6f5; border-top: 1px solid #cedbd5; }
.program-page #scene-topics-label { margin: 0 0 .6rem; color: #465e63; font-size: .875rem; }
.program-page .scene-topic-nodes { display: flex; flex-wrap: wrap; gap: .65rem; }
.program-page #scene-topic-nodes .scene-topic { display: inline-flex; align-items: center; gap: .55rem; position: relative; inset: auto; transform: none; width: auto; height: auto; min-height: 44px; max-width: 100%; padding: .5rem .75rem; border: 1px solid #65877c; border-radius: 6px; background: #fff; color: #102c33; box-shadow: none; opacity: 1; text-align: left; }
.program-page #scene-topic-nodes .scene-topic:is(:hover,:focus-visible,.is-active) { background: #dbece7; border-color: #234e58; }
.program-page #scene-topic-nodes .scene-topic::before, .program-page #scene-topic-nodes .scene-topic::after, .program-page #scene-topic-nodes .node-hit { display: none; }
.program-page #scene-topic-nodes .scene-topic[data-scene-option]::before { content: attr(data-scene-option); display: grid; place-items: center; position: static; flex: 0 0 24px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #f8e04e; color: #102c33; font: 700 .875rem/1 var(--font-body); }
.program-page #scene-topic-nodes .scene-topic .node-label { position: static; transform: none; min-width: 0; max-width: none; width: auto; padding: 0; background: none; color: inherit; box-shadow: none; font-size: .875rem; white-space: normal; text-align: left; visibility: visible !important; opacity: 1 !important; }
.program-page #scene-nodes .scene-node { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.program-page #scene-nodes .scene-node:is(:hover,:focus,.is-active) { transform: translate(-50%,-50%); }
.program-page #scene-nodes .scene-node .node-label { min-width: 0; width: max-content; max-width: 130px; white-space: normal; text-align: center; }
.program-page #scene-nodes .scene-node:is([data-node-id="leaves-and-wood"],[data-node-id="varied-bed"],[data-node-id="waterbugs"],[data-node-id="fine-material"]) .node-label { top: auto; bottom: calc(100% + 6px); }
.program-page #scene-nodes .scene-node:is([data-node-id="bank-roots"],[data-node-id="riverbank-plants"],[data-node-id="leaves-and-wood"]) .node-label { left: auto; right: 0; transform: none; }
.program-page #scene-nodes .scene-node[data-node-id="fine-material"] .node-label { left: 0; right: auto; transform: none; }
.program-page #scene-nodes .scene-node:is([data-node-id="platypus"],[data-node-id="waterbugs"],[data-node-id="varied-bed"],[data-node-id="flow"]) .node-label { left: 50%; right: auto; transform: translateX(-50%); }
/* Numbered choices match the reading panel. Only the focused feature needs a
   persistent label on the artwork; hovering/keyboard focus reveals other names. */
.program-page #scene-nodes .scene-node:not(.is-active):not(.is-connect-entry) .node-label { visibility: hidden; opacity: 0; }
.program-page #scene-nodes .scene-node:is(:hover,:focus-visible) .node-label { visibility: visible !important; opacity: 1 !important; }
.program-page #scene-nodes .scene-node[data-scene-option]:not(.is-active)::before { content: attr(data-scene-option); position: absolute; inset: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: #102c33; background: #f8e04e; font: 700 1rem/1 var(--font-body); }
.program-page #scene-nodes .scene-node[data-scene-option]:not(.is-active)::after { display: none; }