/* The Unfinished City: space for the world, with tools close to the machinery. */
#cityJournal{position:fixed;right:24px;top:84px;z-index:8;border:1px solid #b2baa8;background:#f4f0e1ed;color:#365c60;border-radius:4px;padding:9px 12px;font:11px system-ui;cursor:pointer}.city-menu #cityJournal{position:fixed;top:auto;bottom:18px;right:22px;box-shadow:0 3px 20px #102c3940}.in-mission:not(.water-district) #cityJournal{top:auto;bottom:66px}.cover #cityJournal{top:auto;bottom:18px}
#chronicle{padding:0;border:1px solid #a6af99;border-radius:8px;width:min(880px,94vw);max-height:86vh;color:#344c4b;background:#f3efe2;box-shadow:0 30px 130px #102b4960}#chronicle::backdrop{background:#173942b3;backdrop-filter:blur(7px)}#chronicle header{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid #cbd0bf;font:10px system-ui;letter-spacing:.16em}#chronicle header button{border:none;background:none;font-size:24px;color:#476960;cursor:pointer}.journal-body{display:grid;grid-template-columns:240px 1fr}.journal-body nav{padding:22px;border-right:1px solid #cbd0bf;display:flex;flex-direction:column;gap:5px;max-height:60vh;overflow:auto}.journal-body nav button{background:none;border:none;text-align:left;padding:11px 8px;font:12px/1.5 system-ui;color:#7d8c7c;cursor:pointer}.journal-body nav button.active{background:#e1e6d6;color:#315b57;border-radius:4px}.journal-body article{padding:38px;max-height:64vh;overflow:auto}.journal-body h2{font:38px/1.1 var(--serif);margin:19px 0 24px}.journal-body article p{font:19px/1.85 var(--serif);margin:0 0 30px}.journal-body article footer{font:10px/1.7 system-ui;color:#8a9585;border-top:1px solid #cbd0bf;padding-top:18px}
#waterHUD[hidden],.city-menu #waterHUD,.cover #waterHUD{display:none}.water-district #ledger,.water-district #missionDock,.water-district #missionRibbon,.water-district #hint{display:none!important}.water-district #notebook{left:24px;bottom:140px;top:auto;z-index:12}.water-card{position:fixed;z-index:6;background:#f4f1e4f2;border:1px solid #a4b39f80;border-radius:6px;padding:18px 20px;box-shadow:0 4px 30px #143a4120;color:#315358}.water-card h3{font:24px/1.12 var(--serif);margin:9px 0}.water-card p{font:11px/1.65 system-ui;margin:10px 0;color:#667e72}.water-card .eyebrow{font-size:8px;letter-spacing:.16em;color:#968658}.water-card button{border:1px solid #a8b89e;border-radius:3px;background:#e9ecde;color:#315a57;padding:9px 11px;font:11px system-ui;cursor:pointer}.water-card button:hover:not(:disabled){background:#d8e2cc}.water-card button:disabled{opacity:.45;cursor:not-allowed}#waterLead{bottom:22px;left:22px;width:300px}#waterMechanism{bottom:22px;right:22px;width:285px;max-height:270px;overflow:auto}.water-lead-actions,.mechanism-actions{display:flex;gap:6px;flex-wrap:wrap}.water-lead-actions button:first-child{flex:1}.water-lead-actions button:last-child{font-size:10px;background:transparent}.mechanism-actions button{flex:1}.water-letter{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;font-size:11px;border-bottom:1px solid #c9cfbd}
#waterNodes{position:fixed;inset:0;z-index:5;pointer-events:none}#waterNodes[hidden]{display:none}.water-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;background:transparent;border:0;padding:0;color:#3c5b56;cursor:pointer;pointer-events:auto}.water-node>span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #a3966a;border-radius:50%;background:#f1ecdbee;font:9px system-ui;box-shadow:0 2px 9px #153b4022}.water-node>small{font:9px system-ui;white-space:nowrap;margin-top:4px;padding:3px 5px;background:#f3efdfeb;border-radius:2px}.water-node.selected>span{background:#345e62;color:#fff5d8;border-color:#e1c487}.water-node:hover>span{transform:scale(1.12)}.water-district.scene-focus #waterLead,.water-district.scene-focus #waterMechanism{display:none}.water-district #focusScene{right:335px;bottom:25px}.water-district #toolbar{bottom:16px}.water-district #titleCard{background:#f4f1e4ef}.water-district #toast{bottom:110px;max-width:440px;font-size:12px}.city-story{margin:0 0 25px;border-left:2px solid #c2ab76;padding:0 0 0 17px;color:#b5c6b5;font:16px/1.7 var(--serif);max-width:580px}.city-story b{color:#e6dec2;font-weight:400}
@media(max-width:900px) and (min-width:701px){#waterLead{width:250px;left:12px;padding:14px}#waterMechanism{width:230px;right:12px;padding:14px}.water-district #focusScene{right:260px}.water-district #topButtons .lbl-t{display:none}.water-district #topbar{gap:8px}.water-card h3{font-size:21px}}
@media(max-width:700px){#cityJournal{top:auto;bottom:75px;right:10px;font-size:9px;padding:7px}.water-district #cityJournal{top:57px;bottom:auto;right:10px}#waterLead{top:62px;bottom:auto;left:8px;width:210px;padding:10px 12px;max-height:148px;overflow:auto}#waterLead h3{font-size:18px;margin:5px 0}#waterLead p{font-size:10px;line-height:1.45;margin:5px 0}#waterLead .eyebrow{display:none}#waterLead button{font-size:9px;padding:6px}#waterMechanism{bottom:80px;right:8px;left:8px;width:auto;padding:12px 14px;max-height:190px}#waterMechanism h3{font-size:21px;margin:5px 0}.water-card p{font-size:10px;margin:6px 0}.water-node>small{font-size:8px}.water-node>span{width:25px;height:25px}.water-district #focusScene{right:10px;bottom:20px}.water-district #toolbar{left:10px;transform:none;bottom:12px}.water-district #toast{bottom:280px;width:calc(100vw - 20px);max-width:none}.journal-body{grid-template-columns:1fr}.journal-body nav{max-height:130px;border-bottom:1px solid #cbd0bf;border-right:0;padding:8px 15px}.journal-body nav button{padding:6px}.journal-body article{padding:24px;max-height:52vh}.journal-body article p{font-size:17px}.journal-body h2{font-size:30px}#chronicle header{padding:16px}.city-story{font-size:14px}}

.water-person{border-top:1px solid #c9cfbd;padding:12px 0 4px}.water-person b{font:11px system-ui;color:#345854}.water-person blockquote{margin:6px 0;font:15px/1.5 var(--serif);color:#596e60}.water-person p{margin:5px 0}.water-lead-actions #waterPeople{background:transparent;font-size:10px}

.current-goal{background:#dbe5d8;border-left:2px solid #ad905e;padding:9px 7px!important;margin:8px 0!important;color:#2e5854!important}.current-goal .box{border:0!important;font-size:12px;color:#997a40}.current-goal span{line-height:1.4}.current-goal b{font-weight:700}.city-road{fill:none;stroke:#86a599;stroke-width:3;stroke-dasharray:4 8;opacity:.32}.city-road.awake{stroke:#e6be74;stroke-width:4;opacity:.85;stroke-dasharray:none}.city-map a{cursor:pointer}.city-map a:hover>g,.city-map a:focus>g{filter:brightness(1.25)}.city-map a:focus{outline:2px solid #edc782}#cityRoutes{position:fixed;right:24px;bottom:105px;z-index:6;background:#f2eedfed;border:1px solid #b0bca8;color:#31555a;padding:10px 14px;border-radius:4px;font:11px system-ui;cursor:pointer}#cityRoutes:hover{background:#fff5dc}.city-menu #cityRoutes,.cover #cityRoutes,body:not(.in-mission) #cityRoutes{display:none}.water-district #cityRoutes{bottom:23px;right:calc(50% - 265px)}
@media(max-width:700px){#cityRoutes{right:10px;bottom:105px;font-size:9px;padding:7px}.water-district #cityRoutes{right:10px;bottom:121px}}
@media(min-width:701px){.in-mission:not(.water-district) #missionDock{max-height:calc(100vh - 240px)}}
.glass-focus{margin:10px 0 5px;padding:9px;border:1px solid #a7b9a8;border-radius:4px;background:#eff0e3}.glass-focus .eyebrow{font-size:8px}.glass-diagram{display:block;width:100%;height:auto;max-height:112px;margin:7px 0;border-radius:4px}.glass-focus p{margin:5px 0 8px}.glass-focus small{display:block;margin:6px 0 1px;color:#698078;font-size:9px}
.fold-focus{margin-top:10px;padding:9px;border:1px solid #a7b9a8;border-radius:4px;background:#eff0e3}.fold-diagram{display:block;width:100%;height:auto;max-height:102px;margin:0 0 8px;border-radius:4px}.fold-controls{display:flex;gap:6px}.fold-controls button{flex:1}.fold-focus small{display:block;margin-top:6px;color:#698078;font-size:9px}
.archive-focus{margin:10px 0 5px;padding:9px;border:1px solid #a7b9a8;border-radius:4px;background:#eff0e3}.archive-focus p{margin:5px 0 8px}.archive-diagram{display:block;width:100%;height:auto;max-height:160px;margin:8px 0;border-radius:4px}.archive-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.archive-plates button{font-size:10px;padding:7px 4px}.archive-focus small{display:block;margin:7px 0;color:#698078;font-size:9px}.archive-copy{width:100%;margin-top:4px;background:#315b61!important;color:#f5f0de!important}
.nursery-focus{margin:10px 0 8px;padding:9px;border:1px solid #a7b9a8;border-radius:4px;background:#e9eee0}.nursery-focus svg{display:block;width:100%;height:auto;margin:5px 0}.nursery-focus svg text{font:600 8px system-ui;letter-spacing:1px;fill:#4b6a62}.nursery-focus p{margin:4px 0 2px;color:#536f63}
.optic-diagram{display:grid;grid-template-columns:1fr 1fr;gap:3px;align-items:center;margin:10px 0;padding:9px;border:1px solid #a8b9aa;border-radius:4px;background:linear-gradient(115deg,#e7ebdf,#f2e9d7);font:9px system-ui;letter-spacing:.08em;color:#4b6967}.optic-diagram span{color:#ac8753;font-weight:700}.optic-diagram b{text-align:right;color:#8e8a76}.optic-diagram b.aligned{color:#397d70}.optic-diagram svg{grid-column:1/-1;display:block;width:100%;height:auto;margin:2px 0}.optic-diagram svg text{font:600 7px system-ui;letter-spacing:.07em;fill:#5a7770}.optic-diagram small{grid-column:1/-1;color:#6b817b}.water-card .route-memory{border-top:1px solid #c6cdbd;padding-top:7px;color:#92774d;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.finale-kit{margin:12px 0 6px;padding:11px;border:1px solid #a6b9a7;border-radius:5px;background:linear-gradient(145deg,#e7ebdb,#f3ecd9)}.finale-kit .eyebrow{font-size:8px;letter-spacing:.15em;color:#9d8052}.finale-stages{display:grid;gap:5px;margin:10px 0}.finale-stages span{padding:6px 8px;border-left:2px solid #a3ada2;color:#7b8c82;background:#f0f0e5;font:10px system-ui}.finale-stages span.lit{border-color:#caa15e;background:#e8ead8;color:#315c59;font-weight:700}.finale-lens{padding:8px;background:#f3f0e4;border:1px solid #bdc8b6;border-radius:3px}.finale-lens svg{display:block;width:100%;height:auto}.finale-lens svg text{fill:#53716d;font:700 8px system-ui;letter-spacing:1px}.finale-lens p,.finale-jun p,.finale-water{margin:7px 0;color:#58726c;font:11px/1.5 system-ui}.finale-lens button,.finale-jun button{border:1px solid #a7b89f;background:#e9eadb;color:#315b58;padding:7px 9px;border-radius:3px;font:10px system-ui;cursor:pointer}.finale-jun{border-top:1px solid #bfccb8;margin-top:10px;padding-top:10px}.finale-jun b{color:#365e5b;font:700 10px system-ui;letter-spacing:.08em}

/* On a phone, the drawing is the main touch surface. Keep an objective in
   view while the larger clue panels are folded behind Show clues. */
#ledger,#missionDock,#missionRibbon,#waterLead,#waterMechanism,#hintCard,#hintText,#toolbar,#topbar,#focusScene,#waterNodes{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
@media(max-width:700px){
  #focusScene{min-height:44px;padding:10px 14px;font-size:12px}
  .in-mission #topButtons .iconbtn{min-width:38px;min-height:38px;justify-content:center}
  body.in-mission:not(.water-district) #toolbar{left:8px;transform:none}
  body.in-mission:not(.water-district):not(.scene-focus) #missionRibbon{display:none!important}
  body.in-mission:not(.water-district) #cityRoutes{display:none}
  body.in-mission:not(.water-district) #focusScene{right:8px;bottom:100px;min-height:42px}
  body.in-mission:not(.water-district) #cityJournal{right:8px;bottom:50px;min-height:42px;font-size:11px}
  body.in-mission:not(.water-district) #missionDock{display:flex;flex-direction:column}
  body.in-mission:not(.water-district) #missionDock>.eyebrow:first-child{order:-3}
  body.in-mission:not(.water-district) #missionDock>h3{order:-2}
  body.in-mission:not(.water-district) #missionDock>.mission-action{order:-1}
  #missionDock button,.relay-grid button,.water-card button{min-height:44px}
  body.scene-focus.in-mission:not(.water-district) #missionRibbon{
    display:flex!important;top:55px;bottom:auto;left:8px;right:8px;transform:none;
    max-width:none;min-height:34px;padding:6px 10px;overflow:hidden;pointer-events:none;
  }
  body.scene-focus.in-mission:not(.water-district) #missionRibbon b{max-width:37%;overflow:hidden;text-overflow:ellipsis}
  body.scene-focus.in-mission:not(.water-district) #missionRibbon>span:last-child{
    display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .water-node>span{width:36px;height:36px;font-size:11px}
  .water-node{touch-action:manipulation}
}
@media(max-width:700px) and (max-height:700px){
  body.in-mission:not(.water-district) #ledger,
  body.in-mission:not(.water-district) #missionDock{max-height:160px}
  body.in-mission:not(.water-district) #missionDock h3{font-size:16px;line-height:1;margin:3px 0}
  body.in-mission:not(.water-district) #missionDock .mission-action p{font-size:9px;line-height:1.25;margin:3px 0}
}