.squote { margin-top: 6px; }
.squote blockquote { margin: 6px 0; padding: 8px 10px; background: #f6f6f0; border: 0; border-left: 3px solid #cfbc69; font: 15px/1.5 var(--serif); }
.squote cite { display: block; font: bold 12px var(--sans); font-style: normal; margin-top: 3px; }
a.fact { color: #000; text-decoration: none; }
a.fact:hover, a.fact:focus-visible { background: var(--hl); }

/* ---------- master map ---------- */
.mq, .mroutes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.mq > b, .mroutes > b { font: bold 14px var(--ui); margin-right: 4px; }
.msum { border: 3px double #000; background: var(--hl); padding: 10px 12px; margin: 10px 0; font-size: 15.5px; }
.flow { position: relative; margin: 14px 0; padding-left: 22px; }
.flow::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; border-left: 4px solid #000; }
.mphase { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 10px -22px; padding: 6px 10px; background: linear-gradient(90deg, var(--navy), #1084d0); color: #fff; border: 2px solid #000; }
.mphase b { font: bold 17px var(--sans); } .mphase span { font: 13px var(--ui); opacity: .9; }
.mphase em { font: italic 12px var(--ui); background: #ff0; color: #000; padding: 0 5px; }
.mnode { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 6px 12px; margin: 10px 0; }
.mnode::before { content: ""; position: absolute; left: -17px; top: 22px; width: 14px; border-top: 4px solid #000; }
.mnode > .mtime, .mnode > .mbox, .mnode > .mflag, .mnode > .mdraw, .mnode > .mbranches { grid-column: 1; }
.mnode > .mexits { grid-column: 2; grid-row: 2 / span 3; align-self: start; }
.mtime { justify-self: start; margin-left: -34px; font: bold 12px var(--mono); background: #000; color: #3f3; padding: 2px 6px; position: relative; z-index: 1; }
.mbox { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; background: #fff; color: #000; font: inherit; cursor: pointer;
  border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); box-shadow: 2px 2px 0 #000; min-height: 52px; }
.mbox .mt b { display: block; font: bold 16px/1.3 var(--sans); } .mbox .mt small { display: block; font-size: 14px; color: var(--ink-2); }
.mbox .mk { flex: none; width: 24px; height: 24px; display: grid; place-items: center; font: 900 15px var(--black); color: #000; }
.k-q .mbox .mk, .k-fork .mbox .mk { background: #ffd400; border: 2px solid #000; transform: rotate(45deg); }
.k-q .mbox .mk, .k-fork .mbox .mk { line-height: 1; }
.k-step .mbox .mk { border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 8%, #6fd0ff 10%, #1580c5 70%); border: 2px solid #000; width: 18px; height: 18px; }
.mbox.on { background: var(--hl); }
.mdraw { border: 2px solid #000; border-top: 0; background: #fff; padding: 8px 12px; margin: -6px 6px 0; font-size: 15px; }
.mdraw p { margin: 4px 0 8px; }
.mflag { border: 2px solid #c00; background: #fff4f4; padding: 6px 10px; font-size: 14.5px; }
.mexits { display: grid; gap: 6px; }
.mexit { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border: 2px dashed #000; background: #f4f4f4; font-size: 14px; }
.mexit .arr { margin-top: 5px; width: 9px; height: 11px; }
.mexit b { display: block; } .mexit em { display: block; font-style: normal; font-weight: bold; color: #c00; }
.mexit.add em { color: var(--vv); }
.mbranches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mbranch { border: 2px solid #000; background: #fff; padding: 8px 10px; box-shadow: 2px 2px 0 #000; font-size: 14.5px; }
.mbranch b { display: block; font: bold 15px var(--sans); } .mbranch em { display: block; font-style: normal; }
.mnode.only .mbox::after { content: "permanent practices only"; margin-left: auto; font: italic 11px var(--ui); background: #ff0; padding: 0 4px; border: 1px solid #000; flex: none; }
/* tracing a project */
.routing .mnode:not(.lit) .mbox, .routing .mexit:not(.lit), .routing .mbranch:not(.lit), .routing .mphase:not(.lit) { opacity: .28; }
.routing .mnode.lit .mbox, .routing .mbranch.lit, .routing .mexit.lit { outline: 3px solid #ff0; outline-offset: 0; box-shadow: 0 0 0 5px #000; }
.routing .mexit.lit { background: #fff; }
@media (max-width: 760px) {
  .mnode { grid-template-columns: 1fr; }
  .mnode > .mexits { grid-column: 1; grid-row: auto; margin-left: 14px; }
  .mbranches { grid-template-columns: 1fr 1fr; }
  .mnode.only .mbox::after { display: none; }
}
.mctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.mctl label span { display: block; font: bold 13px var(--ui); margin-bottom: 3px; }
.mctl select { font-size: 15px; background: #fff; }
.k-q .mbox .mk, .k-fork .mbox .mk { transform: none; background: none; border: 0; position: relative; width: 26px; height: 26px; }
.k-q .mbox .mk::before, .k-fork .mbox .mk::before { content: ""; position: absolute; inset: 4px; background: #ffd400; border: 2px solid #000; transform: rotate(45deg); z-index: 0; }
.mbox .mk { position: relative; z-index: 1; }
.k-q .mbox .mk, .k-fork .mbox .mk { color: #000; } .k-q .mbox .mk::after, .k-fork .mbox .mk::after { content: "?"; position: relative; z-index: 1; font: 900 14px var(--black); }
.k-q .mbox .mk, .k-fork .mbox .mk { font-size: 0; }
.mexit { flex-wrap: wrap; } .mexit > span { flex: 1 1 140px; } .mexit > .cite { margin-left: 17px; }
@media (max-width: 760px) { .mctl { grid-template-columns: 1fr; } }
/* requirement explainers */
.reqx { border: 2px solid #000; margin: 18px 0; box-shadow: 3px 3px 0 #000; background: #fff; }
.reqx > .hd { display: flex; align-items: center; gap: 8px; color: #fff; font: bold 18px var(--sans); padding: 8px 12px; }
.reqx.esc > .hd { background: var(--esc); } .reqx.wq > .hd { background: var(--wq); } .reqx.rr > .hd { background: var(--rr); } .reqx.nni > .hd { background: var(--nni); } .reqx.vv > .hd { background: var(--vv); }
.reqx > .hd .req { background: #fff; color: #000; }
.reqx .bdy { padding: 10px 12px; }
.reqx .what { font: bold 18px/1.35 var(--serif); margin: 4px 0 10px; }
.reqx table td:first-child { width: 110px; font-weight: bold; background: #f4f4f4; }
nav.side li.navgroup { list-style: none; margin: 14px 0 4px -20px; font: bold 12px var(--ui); color: #fff; background: var(--navy); padding: 2px 6px; }
.sm-g { font: bold 12px var(--ui); color: #fff; background: #808080; padding: 3px 10px; margin-top: 4px; }
.brief { padding-left: 24px; } .brief > li { margin: 10px 0; font-size: 16px; } .brief > li > b { font-family: var(--sans); }
.req { cursor: pointer; }
.exm { border: 2px solid #000; background: #fff; box-shadow: 3px 3px 0 #000; margin: 16px 0; }
.exm > .tb { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, var(--navy), #1084d0); color: #fff; font: bold 15px var(--ui); padding: 5px 8px; }
.exm .bd { padding: 10px 12px; }
.exm .scen { font: bold 17px/1.4 var(--serif); margin: 2px 0 10px; }
.exq { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 8px 0; border-top: 1px dashed #999; }
.exq .ans { display: grid; place-items: center; height: 30px; font: 900 13px var(--black); color: #fff; border: 2px solid #000; }
.exq .ans.yes { background: #1e7b3a; } .exq .ans.no { background: #c00; } .exq .ans.ask { background: #ffd400; color: #000; }
.exq b { display: block; } .exq p { margin: 2px 0 0; font-size: 15px; }
.exres { margin-top: 10px; border: 3px double #000; background: var(--hl); padding: 10px 12px; }
.exres b { display: block; font: bold 15px var(--sans); margin-bottom: 4px; }
.exq .ans { height: auto; min-height: 30px; padding: 3px 2px; text-align: center; line-height: 1.1; font-size: 12px; }
/* two tests + tally */
.tests { gap: 14px; }
.testcard { border: 2px solid #000; background: #fff; box-shadow: 3px 3px 0 #000; }
.testcard .hd { display: flex; align-items: center; gap: 8px; background: #000; color: #ff0; font: bold 16px var(--sans); padding: 8px 10px; }
.testcard .bdy { padding: 10px 12px; }
.testcard .what { font: bold 17px/1.35 var(--serif); margin: 2px 0 10px; }
.cnt { border: 2px solid; padding: 6px 10px; margin: 8px 0; }
.cnt.yes { border-color: #1e7b3a; background: #effaf1; } .cnt.no { border-color: #c00; background: #fff3f3; }
.cnt > b { font: bold 13px var(--ui); } .cnt.yes > b { color: #1e7b3a; } .cnt.no > b { color: #c00; }
.cnt ul { margin: 4px 0; padding-left: 20px; font-size: 15px; }
.trow { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; padding: 4px 0; font-size: 15px; border-bottom: 1px dotted #bbb; }
.tbar { margin: 12px 0; }
.tbar .tl { display: flex; justify-content: space-between; font-size: 14px; }
.tbar .tw { position: relative; height: 24px; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: #fff; }
.tbar .tw i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--navy) 0 8px, #3a5fcd 8px 10px); transition: width .2s; }
.tbar .tw i.over { background: repeating-linear-gradient(90deg, #c00 0 8px, #e44 8px 10px); }
.tbar .tw em { position: absolute; top: -6px; bottom: -6px; width: 3px; background: #000; }
.tres { border: 3px double #000; padding: 10px 12px; margin-top: 10px; font-size: 15.5px; }
.tres.yes { background: #fff4f4; } .tres.no { background: #effaf1; }
@media (max-width: 760px) { .trow { grid-template-columns: 1fr 100px; } }

/* ---------- phone-first diagrams ---------- */
/* .dual: a wide drawing (svg.dk) for desktop and a narrow one (svg.ph) for phones. .narrow: one narrow drawing for both. */
.fig > svg.ph { display: none; }
.fig.narrow > svg, .fig.dual > svg.ph { max-width: 480px; margin: 0 auto; }
@media (max-width: 720px) {
  .fig.dual > svg.dk { display: none; }
  .fig.dual > svg.ph { display: block; }
}
/* window title bar on each drawing */
.fig[data-t] { padding-top: 0; }
.fig[data-t]::before { content: attr(data-t); display: block; margin: 0 -10px 10px; padding: 3px 8px; background: linear-gradient(90deg, var(--navy), #1084d0); color: #fff; font: bold 13px var(--ui); }
.fig figcaption .cite { white-space: normal; }
svg .lbl { font-size: 14px; }
svg .lblb { font-size: 14px; font-weight: 700; }
svg a .hot { cursor: pointer; }
svg a:hover .hot, svg a:focus .hot { stroke: #000; stroke-width: 3; }
/* falling rain in the drawings */
@keyframes swdrop { 0% { transform: translateY(-14px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
svg .rain line { animation: swdrop 1.4s linear infinite; }
svg .rain line:nth-child(2n) { animation-delay: .45s; } svg .rain line:nth-child(3n) { animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) { svg .rain line { animation: none; } }

/* practice design limits */
.dlim .row { margin-bottom: 8px; }
.dlim table td:first-child { width: 46%; }
.mbranch, .mexit { min-width: 0; overflow-wrap: anywhere; }
.mbranch .cite, .mexit .cite { white-space: normal; }
@media (max-width: 400px) { .mbranches { grid-template-columns: 1fr; } }

/* results next to the controls */
.calc-out { margin: 10px 0 4px; }
.calc-out:empty { display: none; }
.tsub { margin: 8px 0 4px; padding: 6px 10px; border: 2px solid #000; background: var(--hl); font-size: 15px; }
.dlim-key { margin: 0 0 10px; padding: 8px 10px; border: 3px double #000; background: var(--hl); font-size: 15px; }
/* map controls stay in reach while scrolling the map on a phone */
@media (max-width: 760px) {
  .mctl { position: sticky; top: 0; z-index: 20; margin: 10px -6px; padding: 8px 6px; background: var(--face); border-bottom: 2px solid #000; }
}

/* Close-up site details keep the game legible on phones. */
.spotpanels { display: none; }
@media (max-width: 760px) {
 #spot > .spotsvg, #spot > .spotlist { display: none; }
 .spotpanels { display: block; }
 .spotpanel { border: 2px solid #000; margin: 10px 0; background: #fff; }
 .spotpick { width: 100%; justify-content: flex-start; }
 .spotpanel svg { display: block; width: 100%; height: auto; }
 .spotanswer { padding: 10px; border-top: 2px solid #000; }
}

.spotanswer .cite, .spotlist .cite { white-space: normal; }

/* ---------- learning ladder ---------- */
.exstage { margin: 12px 0; }
.rain-theme .exhibit-stage { background: #dff1ff; }
.sewersim .bd { padding: 10px; }
.simmode .b95 { flex: 1; min-height: 44px; }
.simrain { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: bold; }
.simrain input { flex: 1; min-width: 0; min-height: 44px; }
.simrain b { min-width: 92px; }
#sewersim svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; border: 2px solid #000; }
#sewersim .fish { cursor: pointer; }
.simsay { min-height: 3em; font-size: 16px; }
.reqtabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 10px 0 0; }
.reqtabs .b95 { min-height: 44px; padding: 4px 2px; justify-content: center; gap: 4px; font-weight: bold; }
.tabsw { display: inline-block; width: 12px; height: 12px; border: 1px solid #000; flex: none; }
.tabsw.esc { background: var(--esc); } .tabsw.wq { background: var(--wq); } .tabsw.rr { background: var(--rr); } .tabsw.nni { background: var(--nni); } .tabsw.vv { background: var(--vv); }
.reqx[hidden] { display: none; }
.reqtabs + .reqx { margin-top: 8px; }
.sortcard { font: bold 20px/1.3 var(--serif); margin: 6px 0 10px; }
.sortbtns .b95 { flex: 1 1 180px; min-height: 48px; }
.sortbtns .b95.right { background: #c8f0c8; } .sortbtns .b95.wrong { background: #f6c8c8; }
.sortwhy { margin: 8px 0; }
.bins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bin { border: 2px solid #000; background: #fff; padding: 6px 8px; min-height: 70px; min-width: 0; }
.bin > b { display: block; font-size: 14px; padding: 2px 4px; color: #fff; }
.b22 > b { background: var(--esc); } .b23 > b { background: var(--wq); }
.bin ul { margin: 6px 0 0; padding-left: 18px; font-size: 14.5px; }
.bin li { overflow-wrap: anywhere; }
@media (max-width: 520px) { .bins { grid-template-columns: 1fr; } }
.mini .qcard { margin: 10px 0; }
.miniscore { font-size: 16px; }

/* side-by-side comparison that stays two columns on phones */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.paircol { border: 2px solid #000; background: #fff; padding: 0 0 4px; min-width: 0; }
.paircol > b:first-child { display: block; padding: 5px 8px; color: #fff; background: #555; font: bold 15px/1.25 var(--sans); }
.paircol > b.ph-css { background: #6b4a2b; } .paircol > b.ph-ms4 { background: #1c7fc4; }
.paircol > b.ph-22 { background: var(--esc); } .paircol > b.ph-23 { background: var(--wq); }
.paircol > b.ph-rule { background: var(--accent); } .paircol > b.ph-plan { background: var(--esc); }
.paircol p { margin: 6px 8px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.paircol dl { margin: 6px 8px; font-size: 15px; } .paircol dt { font: bold 13px var(--ui); color: var(--ink-2); margin-top: 6px; } .paircol dd { margin: 0; }
@media (max-width: 340px) { .pair { grid-template-columns: 1fr; } }

/* lists of short similar items as a grid of tiles */
.cnt ul.chips { list-style: none; padding: 0; margin: 6px 0 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.cnt ul.chips li { background: #fff; border: 1px solid currentColor; padding: 5px 7px; font-size: 14.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.cnt.yes ul.chips li { border-color: #1e7b3a; } .cnt.no ul.chips li { border-color: #c00; }
ul.tiles { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
ul.tiles li { border: 2px solid #000; background: #fff; padding: 6px 8px; font-size: 15px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; box-shadow: 2px 2px 0 #000; }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.outcomes .paircol > b.oc-no { background: #1e7b3a; } .outcomes .paircol > b.oc-alt { background: #8a6d00; } .outcomes .paircol > b.oc-yes { background: #c00; }
.outcomes ul.tiles { grid-template-columns: 1fr; margin: 6px; }
.outcomes ul.tiles li { box-shadow: none; border-width: 1px; font-size: 14.5px; }
@media (max-width: 900px) { .outcomes { grid-template-columns: 1fr; } }
details.more { border: 2px solid #000; background: #fff; margin: 14px 0; }
details.more > summary { cursor: pointer; padding: 10px 12px; min-height: 44px; box-sizing: border-box; font: bold 16px var(--sans); background: var(--face, #c0c0c0); border-bottom: 2px solid transparent; }
details.more > summary:active { background: #a8a8a8; }
details.more[open] > summary { border-bottom-color: #000; }
details.more > :not(summary) { margin: 10px 12px; }
ul.tiles.roles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* pollutant names: labels, not buttons, and not in the requirement colors */
.ptag { display: inline-block; padding: 1px 6px; margin: 2px 2px 0 0; border: 1px solid #000; background: #fff; color: #000; font: bold 13px var(--ui); }