/* Shared explorer styling uses the research library's existing theme tokens. */
.water-cycle {padding-top:42px; --muted:var(--ink-2); --green:var(--link); --accent:var(--r0);}
.cycle-heading {display:flex;justify-content:space-between;align-items:end;gap:40px;}
.cycle-eyebrow {font:500 .86rem/1.5 var(--sans);color:var(--ink-2);margin:0 0 12px;}
.water-cycle h1 {font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.1;max-width:19ch;}
.cycle-intro {max-width:39ch;font-size:.95rem;line-height:1.65;color:var(--ink-2);margin:0;}
.explorer-toolbar {display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:24px;font-size:.75rem;color:var(--ink-2);}
.toolbar-actions {display:flex;flex-shrink:0;gap:8px;}
/* Play tour: vibrant orange with black text in both themes. */
.tour-toggle {font:600 .8rem/1 var(--sans);color:#111;background:#ff8a1f;border:0;border-radius:20px;padding:8px 16px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.12);}
.tour-toggle:hover {background:#ff7a00;}
.tour-toggle:focus-visible {outline:2px solid #111;outline-offset:2px;}
.tour-toggle.on {background:#ffb066;}
/* On wide screens the main map extends into the page margins, to within 20px of the window edge (up to 170px each side). */
.explorer {position:relative;margin:0;--bleed:0px;margin-inline:calc(-1 * var(--bleed));}
.main-page .explorer {--bleed:clamp(0px,calc((100vw - 1072px) / 2 - 20px),170px);}
.landscape {display:block;width:100%;height:auto;overflow:visible;}
.scene-item {cursor:pointer;outline:none;}
.scene-item .object {transition:filter .2s;}
.scene-item .hover-ring {opacity:0;transition:opacity .2s;}
.scene-item:is(:hover,:focus-visible,.active) .hover-ring {opacity:1;}
.scene-item:focus-visible .object {filter:drop-shadow(0 0 6px var(--link));}
.scene-item .number {fill:var(--paper);stroke:var(--line);stroke-width:1;}
.scene-item:is(:hover,:focus-visible,.active) .number {fill:var(--link);stroke:var(--link);}
.scene-item:is(:hover,:focus-visible,.active) .numtext {fill:var(--paper);}
.numtext {font:12px var(--sans);fill:var(--ink-2);text-anchor:middle;}
.maplabel {font:13.5px var(--sans);fill:var(--ink-2);}
.process-label {font:italic 13px var(--sans);fill:#506b5c;}
.irrigation-label {font:11px var(--sans);fill:#415948;}
/* Description of the highlighted part: plain text right under its map label (no box), with a halo in the page colour so it
   reads over the landscape. The label already names the part, so the title is kept only for screen readers on larger screens. */
.hint-panel {position:absolute;left:0;top:0;z-index:2;width:max-content;max-width:190px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s;text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 2px var(--paper);}
.hint-panel.show {opacity:1;visibility:visible;transition:opacity .15s;}
.hint-title {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;}
.hint-copy {font-size:.8rem;line-height:1.45;color:var(--ink-2);margin:0;}
.hint-copy:empty {display:none;}
.hint-link {display:inline-block;margin-top:3px;font-size:.78rem;font-weight:500;color:var(--link);}
.hint-link:empty {display:none;}
.hint-panel:hover .hint-link {text-decoration:underline;text-underline-offset:3px;}
.cycle-back {display:inline-block;margin-top:24px;font-size:.8rem;}
.human-page .water-cycle {padding-top:24px;}
.cycle-links {display:flex;flex-wrap:wrap;gap:12px 28px;margin:32px 0;font-size:.9rem;}
#research-dialog {border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:0;width:min(680px,calc(100% - 32px));max-height:88dvh;border-radius:6px;box-shadow:0 24px 90px var(--shadow);}
#research-dialog::backdrop {background:rgba(15,26,31,.55);backdrop-filter:blur(3px);}
#research-dialog .dialog-body {padding:38px;}
#research-dialog .close {position:sticky;float:right;top:12px;margin:12px 12px 0 0;width:34px;height:34px;font-size:24px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:50%;cursor:pointer;z-index:1;}
:is(#research-dialog,#peek) .eyebrow {font-size:.86rem;color:var(--ink-2);}
:is(#research-dialog,#peek) h2 {font-size:1.9rem;}
:is(#research-dialog,#peek) .dialog-intro {font-size:.95rem;color:var(--ink-2);}
:is(#research-dialog,#peek) .project {padding:20px 0;border-top:1px solid var(--line);}
:is(#research-dialog,#peek) .project h3 {font-size:1.2rem;margin:8px 0;}
:is(#research-dialog,#peek) .project p {font-size:.9rem;color:var(--ink-2);margin:8px 0;}
:is(#research-dialog,#peek) .status {font-size:.7rem;color:var(--link);}
:is(#research-dialog,#peek) .status.planned {color:var(--warn-ink);}
:is(#research-dialog,#peek) .project a,:is(#research-dialog,#peek) .dialog-related {font-size:.85rem;}
:is(#research-dialog,#peek) .dialog-note {font-size:.7rem;color:var(--ink-2);}
@keyframes flow {to {stroke-dashoffset:-68;}}
@media(max-width:750px) {
 .cycle-heading {display:block;} .cycle-intro {max-width:54ch;margin-top:16px;}
 .water-cycle {padding-top:32px;}
 .explorer,.main-page .explorer {display:flex;flex-direction:column;--bleed:0px;margin-inline:0;}
 .hint-panel {position:static;width:auto;max-width:none;margin:8px 0 20px;text-shadow:none;}
 .hint-panel:not(.show) {display:none;}
 .hint-title {position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font:600 1.05rem/1.3 var(--sans);margin:0 0 4px;}
 .hint-copy {margin:5px 0;max-width:65ch;}
 #research-dialog .dialog-body {padding:28px 22px;}
}
@media(prefers-reduced-motion:reduce) {
 .scene-item .anim {animation:none!important;transition:none!important;}
}
/* Motion belongs to the element being explored. All animations begin paused. */
.scene-item .object{transform:none!important}.scene-item.active .object,.scene-item:hover .object,.scene-item:focus-visible .object{filter:drop-shadow(0 0 7px #d5b57799)}
.scene-item .anim{animation-play-state:paused!important}.scene-item.active .anim,.scene-item:hover .anim,.scene-item:focus-visible .anim{animation-play-state:running!important}
body.motion-off .scene-item .anim,body.dialog-open .scene-item .anim{animation-play-state:paused!important}
.anim{transform-box:fill-box;transform-origin:center}.waterline{stroke-dasharray:9 13;stroke-linecap:round;stroke-width:3;opacity:.95;animation:river-current 1.5s linear infinite}.river-fall{animation:river-cascade 1s linear infinite}.vapor{animation:evaporate 3s ease-in-out infinite}.rainfall{animation:rain 1.2s linear infinite}.snowflake{animation:snowfall 2.8s linear infinite}.snowcap{transform-origin:50% 0}.meltwater,.drainflow,.pipeflow{animation:downstream 2s linear infinite}.wet-soil{animation:wetting 3.8s ease-in-out infinite}.ripple{animation:rippling 3s ease-in-out infinite}.crop-grow{animation:growth 4s ease-in-out infinite;transform-origin:50% 100%}.spray{animation:sprinkle 1.5s linear infinite;opacity:.7}.floodplain{animation:river-rise 5s ease-in-out infinite}.field-outline{animation:outline-flow 3s linear infinite}
@keyframes rain{0%{transform:translate(2px,-4px);opacity:.25}25%{opacity:.8}100%{transform:translate(-10px,23px);opacity:.05}}
@keyframes snowfall{0%{transform:translate(-3px,-8px);opacity:.25}20%,65%{opacity:1}100%{transform:translate(5px,31px);opacity:.15}}
/* Snow runs on one 12 s cycle. Snow falls from the cloud and the caps build up (0-38%). The snow stops, the cloud gives way
   to the sun (36-46%), and the caps start melting at once (44-82%). Meltwater runs down the mountain into the river, which
   swells and spreads its plume into the sea as it does after rain (50-92%). Then the sun sets back to cloud for the next
   snowfall. The -3.6 s delay makes the still map, and the start of a hover, land late in the snowfall with the caps nearly
   full. Keep every snow animation (including the river copies linked with data-link="snow") on the same length and delay. */
.snowcap{animation:snowpack 12s -3.6s infinite}
.snow-shower{animation:snow-shower 12s linear -3.6s infinite}
.snow-cloud{animation:snow-cloud 12s linear -3.6s infinite}
.snow-sun{animation:snow-sun 12s ease-in-out -3.6s infinite}
.meltwater.snowmelt{animation:downstream 2s linear infinite,snowmelt 12s linear -3.6s infinite}
.river-swell-melt{animation:river-swell-melt 12s ease-in-out -3.6s infinite}
.river-plume-melt{animation:river-plume-melt 12s ease-in-out -3.6s infinite}
/* The river copies sit in the Runoff & rivers part but run only for snow, not when that part itself is explored. */
.scene-item:hover :is(.river-swell-melt,.river-plume-melt):not(.link-run),.scene-item.active :is(.river-swell-melt,.river-plume-melt):not(.link-run),.scene-item:focus-visible :is(.river-swell-melt,.river-plume-melt):not(.link-run){animation-play-state:paused!important}
@keyframes snowpack{0%{transform:scaleY(.72);opacity:.85;animation-timing-function:ease-out}38%{transform:scaleY(1);opacity:1}44%{transform:scaleY(1);opacity:1;animation-timing-function:ease-in-out}82%,100%{transform:scaleY(.72);opacity:.85}}
@keyframes snow-shower{0%{opacity:0}4%,32%{opacity:1}40%,100%{opacity:0}}
@keyframes snow-cloud{0%,36%{opacity:1}44%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes snow-sun{0%,38%{opacity:0;transform:scale(.6)}46%,84%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.6)}}
@keyframes snowmelt{0%,44%{opacity:0}50%,80%{opacity:1}88%,100%{opacity:0}}
@keyframes river-swell-melt{0%,48%{stroke-width:0}60%,80%{stroke-width:11}92%,100%{stroke-width:0}}
@keyframes river-plume-melt{0%,54%{opacity:0}68%,84%{opacity:.8}95%,100%{opacity:0}}
@keyframes evaporate{0%{transform:translateY(4px);opacity:.2}50%{opacity:.85}100%{transform:translateY(-13px);opacity:.15}}
@keyframes downstream{to{stroke-dashoffset:-60}}
@keyframes wetting{0%,100%{opacity:.09}55%{opacity:.28}}
@keyframes rippling{0%,100%{transform:scale(.75);opacity:.3}50%{transform:scale(1.25);opacity:.85}}
@keyframes growth{0%,100%{transform:scaleY(.82)}60%{transform:scaleY(1.12)}}
@keyframes sprinkle{to{stroke-dashoffset:-40}}
@keyframes river-rise{0%,100%{opacity:.05;stroke-width:12}55%{opacity:.2;stroke-width:22}}
@keyframes outline-flow{to{stroke-dashoffset:-60}}

/* Rotation happens before isometric projection, about the stationary center well. */
.pivot-rotor{transform-box:view-box;transform-origin:0px 0px;animation:pivot-turn 16s linear infinite}
.pumpflow{animation:pumping 2s linear infinite}
@keyframes pivot-turn{0%{transform:rotate(-20deg)}37.5%{transform:rotate(340deg)}75%,100%{transform:rotate(700deg)}}
/* Towers and falling spray ride the arm but counter-rotate and undo the projection, so they stay upright on screen. */
.pivot-counter{transform-box:view-box;transform-origin:0px 0px;animation:pivot-counter 16s linear infinite}
@keyframes pivot-counter{0%{transform:rotate(20deg)}37.5%{transform:rotate(-340deg)}75%,100%{transform:rotate(-700deg)}}
@keyframes pumping{to{stroke-dashoffset:-72}}

/* Dash travel follows the river path downstream; a solid stroke cannot show dash-offset motion. */
@keyframes river-current{from{stroke-dashoffset:0}to{stroke-dashoffset:-44}}
@keyframes river-cascade{from{stroke-dashoffset:0}to{stroke-dashoffset:-24}}

/* Soil moisture in two layers. The surface wets and dries quickly; the wetting front reaches the root zone later and lingers while roots draw water up. Keep the three 7 s timings equal so the stages stay in order. */
.soil-layer{font:600 10.5px var(--sans);letter-spacing:.02em}
.surface-label{fill:#4a391e}
.root-label{font-size:11.5px;fill:#fffaf0}
.surface-wet{animation:surface-wet 7s ease-in-out infinite}
.wetting-front{transform-origin:50% 0;animation:wetting-front 7s ease-in-out infinite}
.root-uptake{animation:uptake-flow .9s linear infinite,uptake-show 7s ease-in-out infinite}
@keyframes surface-wet{0%,100%{opacity:.12}8%{opacity:.8}22%{opacity:.72}60%{opacity:.2}}
@keyframes wetting-front{0%{transform:scaleY(.04);opacity:0}10%{transform:scaleY(.06);opacity:.85}48%{transform:scaleY(1);opacity:.75}78%{opacity:.45}100%{transform:scaleY(1);opacity:0}}
@keyframes uptake-flow{to{stroke-dashoffset:16}}
@keyframes uptake-show{0%,40%,100%{opacity:0}55%,85%{opacity:.95}}


/* Map labels get a halo in the page colour so they stay readable over the landscape. */
.maplabel{paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.process-label,.irrigation-label{paint-order:stroke;stroke:rgba(247,245,233,.92);stroke-width:2.6px;stroke-linejoin:round}
/* A badge label that sits on the landscape itself keeps dark text on a light halo in both themes. */
.maplabel.on-map{fill:#3b4a43;stroke:rgba(247,245,233,.92)}
/* Labels drawn on the soil faces: dark on the light surface band, white on the darker root zone and groundwater. */
.soil-layer,.face-label{font:600 10.5px var(--sans);letter-spacing:.02em;paint-order:stroke;stroke-linejoin:round}
.surface-label{fill:#3b2d17;stroke:rgba(240,228,198,.8);stroke-width:2px}
.root-label{font-size:11.5px;fill:#fffaf2;stroke:rgba(88,66,38,.55);stroke-width:2px}
.gw-label{font-size:12px;fill:#f2fbfb;stroke:rgba(31,72,80,.6);stroke-width:2px}

/* During the tour, only the part being shown animates, even if the mouse rests on another part. */
body.touring .scene-item:not(.active) .anim{animation-play-state:paused!important}
body.touring .scene-item:not(.active):hover .object{filter:none}
body.touring .scene-item:not(.active):hover .hover-ring{opacity:0}
body.touring .scene-item:not(.active):hover .number{fill:var(--paper);stroke:var(--line)}
body.touring .scene-item:not(.active):hover .numtext{fill:var(--ink-2)}

/* Pivot and pump cycle, 16 s: the pump runs for 12 s while the arm makes two 6 s turns (pivot-turn reaches 340deg at 37.5% and 700deg
   at 75%), then both rest while the water table recovers. Keep pivot-turn, pivot-counter, cone, pump-on, wt-original, pump-spray,
   footprint, field-wet and field-green at 16 s with matching percentages so they stay in step. The river-fed fields keep their own 12 s rotation. */
.drainflow{animation:downstream 3s linear infinite}
.pump-on{animation:pump-on 16s linear infinite}
.pump-rise{animation:pump-rise 1.6s linear infinite}
.aquifer-flow{animation:aquifer-flow 2.4s linear infinite}
.cone{transform-box:fill-box;transform-origin:50% 0;animation:cone 16s infinite}
.wt-original{animation:wt-original 16s linear infinite}
.spray.pump-spray{animation:sprinkle 1.5s linear infinite,pump-spray 16s linear infinite}
@keyframes pump-on{0%{opacity:0}3%,74%{opacity:1}79%,100%{opacity:0}}
@keyframes pump-rise{to{transform:translateY(-15px)}}
@keyframes aquifer-flow{to{stroke-dashoffset:-14}}
/* Drawdown grows quickly at first and then ever more slowly while pumping (roughly with the log of time), and recovers the same way. */
@keyframes cone{0%{transform:scale(.45,.02);animation-timing-function:cubic-bezier(.2,.65,.35,1)}75%,79%{transform:scale(1,1);animation-timing-function:cubic-bezier(.2,.65,.35,1)}100%{transform:scale(.45,.02)}}
@keyframes wt-original{0%{opacity:0}15%,82%{opacity:.85}100%{opacity:0}}
@keyframes pump-spray{0%{opacity:0}3%,74%{opacity:.7}79%,100%{opacity:0}}

/* Surface-water irrigation in rotation, 12 s cycle: each field gets a 4 s turn from its own lateral canal (delays 0, -8 s, -4 s).
   Water advances along the furrows, the soil darkens (or the crop greens) behind it, then the field slowly dries. */
.canal-flow{animation:canal-flow 3s linear infinite}
.lateral-water{animation:lateral-turn 12s linear infinite}
.lateral-flow{animation:canal-flow 3s linear infinite,lateral-turn 12s linear infinite}
.plot-water{transform-box:fill-box;transform-origin:0 50%;animation:plot-water 12s linear infinite}
.plot-wet{transform-box:fill-box;transform-origin:0 50%;animation:plot-wet 12s linear infinite}
.sprout{transform-box:fill-box;transform-origin:50% 100%;animation:sprout 12s ease-in-out infinite}
@keyframes canal-flow{to{stroke-dashoffset:-32}}
@keyframes lateral-turn{0%,25%{opacity:1}31%,95%{opacity:0}100%{opacity:1}}
@keyframes plot-water{0%{transform:scaleX(0);opacity:.75}22%{transform:scaleX(1);opacity:.75}33%,100%{transform:scaleX(1);opacity:0}}
@keyframes plot-wet{0%,4%{transform:scaleX(0);opacity:.85}26%,70%{transform:scaleX(1);opacity:.85}100%{transform:scaleX(1);opacity:0}}
@keyframes sprout{0%,8%{transform:scale(.65)}50%,80%{transform:scale(1.1)}100%{transform:scale(.65)}}

/* Pivot field, same 16 s cycle: on the first turn the bare light-brown soil turns dark brown right behind the arm; on the second
   turn the wet soil turns green behind it; at the end of the cycle the field returns to bare soil.
   A circle stroked as wide as its diameter and revealed with stroke-dashoffset draws a growing pie from the arm's start angle. */
.footprint{animation:pump-spray 16s linear infinite}
.field-wet{animation:field-wet 16s linear infinite}
.field-green{animation:field-green 16s linear infinite}
@keyframes field-wet{0%{stroke-dashoffset:248.19;opacity:1}37.5%,93%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes field-green{0%,37.5%{stroke-dashoffset:248.19;opacity:1}75%,93%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* Linked stories. Elements with data-link run when any part they name is highlighted (the controller adds .link-run),
   so soil water and the corn above it move together, and the river rises after the rain from either part. */
body:not(.motion-off):not(.dialog-open) .scene-item .anim.link-run{animation-play-state:running!important}
/* Corn, 7 s like the soil cycle: it grows as the roots take up water (uptake-show 55-85%), forms tassels and cobs, then starts again. */
.corn-grow{transform-box:fill-box;transform-origin:50% 100%;animation:corn-grow 7s ease-in-out infinite}
.corn-cob{transform-box:fill-box;transform-origin:50% 100%;animation:corn-cob 7s ease-in-out infinite}
.corn-tassel{animation:corn-tassel 7s ease-in-out infinite}
@keyframes corn-grow{0%,42%{transform:scale(.42)}82%,93%{transform:scale(1)}100%{transform:scale(.42)}}
@keyframes corn-cob{0%,66%{opacity:0;transform:scale(.3)}82%,93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes corn-tassel{0%,62%{opacity:0}76%,93%{opacity:1}100%{opacity:0}}
/* Rain and river, 6 s: a shower falls (0-2.5 s), the river swells to its banks after a lag, its plume spreads into the sea, then it recedes. */
.shower{animation:shower 6s linear infinite}
.river-swell{animation:river-swell 6s ease-in-out infinite}
.river-plume{animation:river-plume 6s ease-in-out infinite}
.wave{animation:wave 3s ease-in-out infinite}
@keyframes shower{0%,42%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@keyframes river-swell{0%,22%{stroke-width:0}62%{stroke-width:10}100%{stroke-width:0}}
@keyframes river-plume{0%,35%{opacity:0}70%{opacity:.75}100%{opacity:0}}
@keyframes wave{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(4px);opacity:.9}}
.sea-label{font:italic 12px var(--sans);fill:#f4fbfb;paint-order:stroke;stroke:rgba(40,96,112,.55);stroke-width:2px;stroke-linejoin:round}

/* Paper cards in the pop-ups (built by assets/journals.js). Each starts with a small masthead in the journal's own style
   (always on white, like the paper), a rule and a chip in the journal's cover colour (--jc). */
:is(#research-dialog,#peek) .dialog-group {font-size:.86rem;font-weight:600;color:var(--ink-2);margin:26px 0 10px;padding-top:18px;border-top:1px solid var(--line);}
:is(#research-dialog,#peek) .dialog-group + .project {border-top:0;padding-top:4px;}
.paper-list {display:grid;gap:14px;}
.paper-card {border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper);}
.paper-card .pc-mast {display:flex;align-items:center;gap:10px;min-height:60px;padding:7px 12px;background:#fff;border-bottom:4px solid var(--jc);text-decoration:none;}
.paper-card .pc-mast img {display:block;flex:none;height:var(--h);width:auto;}
.paper-card .mh-elsevier {align-items:stretch;}
.paper-card .mh-box {flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:4px 10px;background:#e8e8e8;color:#111;text-align:center;font:400 15px/1.2 Georgia,"Times New Roman",serif;}
.paper-card .mh-logos {justify-content:space-between;}
.paper-card .mh-logos .mh-l {max-width:64%;object-fit:contain;object-position:left center;}
.paper-card .mh-text {flex:1;min-width:0;text-align:center;font:400 12px/1.35 Arial,Helvetica,sans-serif;color:#7d7d7d;}
.paper-card .mh-ieee {font:400 10.5px/1.35 "Times New Roman",Times,serif;text-transform:uppercase;color:#1d1d1d;}
.paper-card .mh-banner {padding:0;min-height:0;}
.paper-card .mh-banner img {width:100%;height:auto;max-height:68px;object-fit:cover;object-position:left center;}
.paper-card .pc-meta {display:flex;align-items:center;gap:8px;margin:12px 14px 0;font-size:.78rem;line-height:1.3;color:var(--ink-2);}
.paper-card .pc-meta .pc-acr,.paper-card .pc-band .pc-acr {flex:none;background:var(--jc);color:#fff;font-weight:700;font-size:.74rem;letter-spacing:.01em;padding:2px 8px;border-radius:3px;box-shadow:0 0 0 1px var(--chip-ring);}
.paper-card .pc-jname {flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.paper-card .pc-year {flex:none;margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}
.paper-card .pc-band {display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--jc);color:#fff;text-decoration:none;font-size:.78rem;line-height:1.3;}
.paper-card .pc-band .pc-acr {background:rgba(255,255,255,.16);}
.paper-card .pc-band .pc-jname,.paper-card .pc-band .pc-year {color:#fff;opacity:.92;}
.paper-card .pc-body {padding:8px 14px 14px;}
.paper-card .pc-band + .pc-body {padding-top:12px;}
.paper-card .pc-title {display:block;color:var(--ink);font-weight:650;font-size:1rem;line-height:1.38;text-decoration:none;}
.paper-card .pc-title:hover {color:var(--link);text-decoration:underline;}
.paper-card .pc-authors {font-size:.82rem;color:var(--ink-2);margin:6px 0 0;}
.paper-card .pc-authors strong {color:var(--ink);font-weight:600;}
.paper-card .pc-more {border:0;background:none;padding:0 0 0 4px;font:inherit;color:var(--link);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.paper-card .pc-note {font-size:.85rem;color:var(--ink-2);margin:8px 0 0;line-height:1.5;}
.paper-card .pc-links {display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:.76rem;color:var(--ink-2);}
.paper-card .pc-pdf {display:inline-block;padding:3px 10px;border-radius:4px;box-shadow:0 0 0 1px var(--chip-ring);background:var(--jc);color:#fff;font-weight:600;font-size:.78rem;text-decoration:none;}
.paper-card .pc-pdf:hover {filter:brightness(1.15);}
@media (max-width:520px){
  .paper-card .pc-mast {min-height:46px;gap:7px;padding:6px 8px;}
  .paper-card .pc-mast img {height:calc(var(--h) * .74);}
  .paper-card .mh-box {font-size:11.5px;padding:3px 6px;}
  .paper-card .mh-text {font-size:9.5px;}
  .paper-card .mh-ieee {font-size:9px;}
  .paper-card .pc-mast.mh-banner img {height:auto;}
  .paper-card .pc-jname {display:none;}
}
/* Group headings in the Human-driven processes pop-up; the three questions carry their table colours. */
:is(#research-dialog,#peek) .dialog-group.q-where,:is(#research-dialog,#peek) .dialog-group.q-when,:is(#research-dialog,#peek) .dialog-group.q-how_much{display:flex;align-items:center;gap:8px}
:is(#research-dialog,#peek) .dialog-group.q-where::before,:is(#research-dialog,#peek) .dialog-group.q-when::before,:is(#research-dialog,#peek) .dialog-group.q-how_much::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--q-c)}

/* Hover pop-up panel (data-popup="hover"): the same research as the dialog, in a scrolling card over one side of the map. */
.peek {position:absolute;z-index:6;top:0;left:0;width:380px;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(15,26,31,.24);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility 0s .16s;}
.peek.show {opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s;}
.peek-tools {position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;gap:6px;height:0;padding:0 10px;}
.peek-tools button {margin-top:10px;width:30px;height:30px;display:grid;place-items:center;font:400 18px/1 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:50%;cursor:pointer;}
.peek-tools button:hover {border-color:var(--ink-2);}
.peek-body {padding:18px 20px 16px;}
#peek .eyebrow {margin:0 76px 6px 0;}
#peek h2 {font-size:1.35rem;line-height:1.2;margin:0 0 8px;padding-right:70px;}
#peek .dialog-intro {font-size:.86rem;line-height:1.5;margin:0 0 10px;}
#peek .dialog-group {margin:18px 0 8px;padding-top:12px;}
#peek .project {padding:14px 0;}
#peek .project h3 {font-size:1rem;}
#peek .project p {font-size:.84rem;}
#peek .paper-list {gap:12px;}
#peek .dialog-note {margin-bottom:0;}
/* While a panel is open or about to open, the one-line description under the part's label stays hidden. */
.explorer.peeking .hint-panel {opacity:0;visibility:hidden;}

/* Summary (data-popup="summary"): a moment after the mouse arrives, so the part's animation is seen first, the text under the
   part's label adds a chip per paper (journal and year in the journal's colour) and counts of other work. No box: it keeps the
   description's transparent background and page-colour halo. While waiting it stays hidden (.wait). */
.hint-panel.wait {opacity:0;visibility:hidden;transition:none;}
.hint-panel.rich {max-width:220px;}
.hint-panel.rich.show {transition:opacity .25s;}
.hint-papers:empty {display:none;}
.hp-chips {display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0;}
.hp-chip {display:inline-block;padding:1px 6px;border-radius:3px;background:var(--jc);color:#fff;font:600 .66rem/1.45 var(--sans);letter-spacing:.02em;white-space:nowrap;text-shadow:none;box-shadow:0 0 0 1.5px var(--paper);}
.hp-count {margin:5px 0 0;font-size:.74rem;line-height:1.35;color:var(--ink-2);}
.hint-panel.rich .hint-link {margin-top:4px;}
@media(max-width:750px) {.hint-panel.rich {max-width:none;}}

/* Farm cues (assets/farm-cue.js): invitations to click the farm, which opens irrigation.html. They wait while the tour plays
   and step aside while the farm itself is highlighted. */
.cue-beacon,.cue-tag{pointer-events:none;transition:opacity .3s}
.cue-ring{fill:none;stroke:#d9aa5c;stroke-width:2.2;transform-box:fill-box;transform-origin:center;opacity:0;animation:cue-ring 2.4s ease-out infinite}
@keyframes cue-ring{0%{transform:scale(.92);opacity:.95}70%{opacity:0}100%{transform:scale(1.32);opacity:0}}
.cue-tag{pointer-events:auto;cursor:pointer}
.cue-tag rect,.cue-tag path{fill:#1E5C86}
.cue-tag text{fill:#fff;font:600 12px/1 var(--sans);letter-spacing:.02em}
.cue-tag-bob{animation:cue-bob 2.4s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
body:is(.touring,.tour-pending) :is(.cue-beacon,.cue-tag),.scene-item:is(:hover,:focus-visible,.active) .cue-beacon,body.dialog-open .cue-beacon{opacity:0}
body:is(.touring,.tour-pending) .cue-tag{pointer-events:none}
/* When the tour ends, the "Start here" tag drops in and the rings fade up (body.cues-in, set for a moment by water-cycle.js). */
body.cues-in .cue-tag{animation:cue-in .8s cubic-bezier(.2,.8,.3,1.2) .15s both}
body.cues-in .cue-beacon{animation:cue-fade .9s ease .15s both}
@keyframes cue-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes cue-fade{from{opacity:0}to{opacity:1}}
/* alive: the farm keeps working at rest, as on hover, unless motion is off or a dialog is open. */
body.has-cue-alive:not(.motion-off):not(.dialog-open):not(.touring) .scene-item[data-topic="human"] .anim{animation-play-state:running!important}
.cue-coach{position:absolute;z-index:5;width:260px;margin-top:-12px;transform:translateY(-100%);padding:12px 14px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:.88rem;line-height:1.45;box-shadow:0 10px 26px var(--shadow)}
.cue-coach::after{content:"";position:absolute;left:calc(var(--tip,220px) - 7px);bottom:-7px;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:2px}
.cue-coach p{margin:0 0 8px}
.cue-coach strong{font-weight:600}
.cue-coach button{padding:4px 12px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:500 .82rem/1.4 var(--sans);cursor:pointer}
.cue-coach[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.cue-ring{animation:none;opacity:.8;transform:none}.cue-ring:nth-child(2){display:none}.cue-tag-bob{animation:none}body.cues-in :is(.cue-tag,.cue-beacon){animation:none}}