/* City Boss renewal: an open city framed by municipal signs, with paperwork only on demand. */
body.renewal { --shell-bottom: 60px; --shell-shadow: 0 7px 24px rgba(8,18,24,.28); --enamel-dim:#c1ccd1; }
.renewal button { touch-action: manipulation; }
.renewal [hidden] { display:none!important; }
.renewal ::selection { background:#234b93; color:#fff; }
.renewal ::-webkit-scrollbar { width:7px; height:7px; }
.renewal ::-webkit-scrollbar-thumb { background:#6c858b; border-radius:8px; }
.renewal input { accent-color:var(--green); caret-color:var(--green); }
.renewal :focus-visible { outline:3px solid #f4ce75; outline-offset:3px; }
.renewal #topbar { inset:12px 14px auto; height:54px; gap:8px; justify-content:space-between; }
.renewal #topbar .nameplate { min-width:155px; max-width:25vw; padding:6px 19px; }
.renewal #topbar .nameplate b { font-size:26px; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.renewal #topbar .stats { flex:1; justify-content:center; }
.renewal #topbar .clock { flex:none; }
.renewal #topbar .pill { padding:0 13px; gap:8px; }
.renewal #topbar .pill.small { padding:0 10px; }
.renewal #topbar .pv>span { font-size:22px; }
.renewal #topbar .stats,.renewal #topbar .clock { box-shadow:var(--shell-shadow); border:0; background:var(--slate); border-radius:8px; }
.renewal #bottombar { position:fixed; inset:auto 0 0; height:54px; display:flex; flex-wrap:nowrap; gap:16px; align-items:center; padding:0 14px; z-index:8; background:var(--slate); box-shadow:0 -3px 16px #0b161d38; }
.renewal #bottombar .bb-left { display:flex; flex:none; background:none; border:0; box-shadow:none; padding:0; }
.renewal #bottombar .rci { margin:0; gap:9px; padding:4px 10px; height:46px; border:1px solid #ffffff14; border-radius:7px; }
.renewal #bottombar .rci .rcol { min-width:36px; gap:3px; }
.renewal .demand-gauge { display:flex; align-items:center; gap:5px; }
.renewal #bottombar .rci .bar { height:25px; width:12px; border-radius:2px; }
.renewal #bottombar .demand-icon { width:16px; height:16px; color:var(--enamel-dim); }
.renewal #bottombar .rci .rcol>i { font:600 10px/12px var(--font); letter-spacing:.01em; }
.renewal #ticker { flex:1; min-width:70px; display:flex; height:38px; margin:0; border:0; box-shadow:none; padding:0; background:none; gap:12px; color:var(--enamel); }
.renewal #ticker .tk-flag { font-size:18px; white-space:nowrap; padding:0 12px 0 0; align-self:center; border-right:1px solid #ffffff26; }
.renewal #ticker .tk-win { align-self:center; min-width:0; height:24px; }
.renewal #ticker-text { font-size:12px; line-height:24px; color:var(--enamel); }
.renewal #ticker-text .tk-y,.renewal #ticker-text .tk-h,.renewal #ticker-text .tk-s { color:var(--enamel); }
.renewal #ticker .tk-flag { color:var(--enamel); background:transparent; }
.renewal #civic-access { display:flex; gap:4px; flex:none; align-items:center; }
.renewal .shell-action { display:flex; gap:7px; align-items:center; justify-content:center; min-height:38px; padding:7px 11px; border:0; border-radius:5px; background:transparent; color:var(--enamel); font:600 12px var(--font); cursor:pointer; white-space:nowrap; }
.renewal .shell-action:hover,.renewal .shell-action[aria-expanded=true] { background:var(--slate-hi); }
.renewal .shell-action.active { background:var(--cobalt); }
.renewal .shell-action .i { width:21px; height:21px; }
.renewal #btn-city-hall { background:var(--green); }
.renewal #toolcol { inset:auto auto 68px 50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 28px); height:65px; flex-direction:row; align-items:stretch; overflow-x:auto; overflow-y:hidden; gap:3px; padding:5px 7px; border:0; border-radius:9px; box-shadow:var(--shell-shadow); background:var(--slate); }
.renewal #toolcol .cat { min-width:66px; width:auto; height:55px; padding:6px 8px; justify-content:center; gap:5px; }
.renewal #toolcol .cat .i { width:23px; height:23px; }
.renewal #toolcol .cat small { font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0; white-space:nowrap; }
.renewal #toolcol .cat.active { background:var(--cobalt); box-shadow:none; }
.renewal #toolcol .cat:hover { background:var(--slate-hi); }
.renewal #toolcol .cat.active:hover { background:var(--cobalt-hi); }
.renewal #toolcol .spacer { width:1px; height:33px; min-height:0; margin:9px 3px; background:var(--keyline); flex:none; }
.renewal #toolcol [data-tool=bulldoze] { min-width:54px; color:#ffc4ac; }
.renewal #toolcol .badge { top:0; right:0; }
/* The tray is a slim strip that sits on the dock: a title row, one row of cards, one line about the tool in hand.
   It stays out of the middle of the map, where the town is. */
.renewal #flyout { inset:auto auto 139px 50%; transform:translateX(-50%); width:min(850px,calc(100vw - 28px)); max-height:min(310px,calc(100vh - 235px)); padding:7px 12px 7px; overflow-y:auto; border:0; border-radius:10px; box-shadow:var(--shell-shadow); background:var(--slate); display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; row-gap:0; }
.renewal #flyout::before { display:none; }
.renewal #flyout .fly-x { top:6px; right:8px; width:26px; height:26px; border:0; background:var(--slate-hi); border-radius:5px; }
.renewal .tray-heading { display:flex; align-items:center; flex:none; min-height:28px; margin:0; }
.renewal .tray-heading h2 { margin:0; font:700 18px/1 var(--signtext); letter-spacing:.01em; white-space:nowrap; }
.renewal .future-switch { display:flex; align-items:center; gap:6px; color:var(--enamel-dim); font-size:11px; white-space:nowrap; cursor:pointer; }
.renewal #tool-families { display:flex; flex:1; min-width:0; gap:3px; margin:0 38px 0 0; padding:0 0 0 12px; border-left:1px solid var(--keyline); flex-wrap:wrap; }
.renewal #tool-families button { padding:5px 10px; color:var(--enamel-dim); font:600 12px var(--font); border:0; border-radius:4px; background:transparent; cursor:pointer; }
.renewal #tool-families button:hover { background:var(--slate-hi); }
.renewal #tool-families [aria-selected=true] { color:var(--enamel); background:var(--cobalt); }
.renewal #flyout .fly { display:none; }
.renewal #flyout .fly.on { display:flex; flex:0 0 100%; flex-wrap:wrap; align-items:stretch; gap:5px; margin-top:5px; }
.renewal #flyout .fly>h4,.renewal #flyout .fly>.hint:not(.family-empty) { display:none; }
.renewal #flyout .tool { display:grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:auto auto; align-content:center; align-items:center; column-gap:8px; row-gap:1px; width:auto; min-width:118px; min-height:46px; flex:1 0 118px; max-width:190px; margin:0; padding:5px 9px; border:1px solid var(--keyline); border-radius:6px; color:var(--enamel); background:var(--slate-hi); text-align:left; }
.renewal #flyout .tool .t-ico { grid-row:1 / 3; width:24px; height:24px; display:grid; place-items:center; background:transparent; border:0; padding:0; }
.renewal #flyout .tool .t-ico .i { width:22px; height:22px; }
.renewal #flyout .tool .t-name { grid-column:2; font:600 12px/1.2 var(--font); text-align:left; flex:none; overflow-wrap:anywhere; }
.renewal #flyout .tool .t-cost,.renewal #flyout .tool .t-when { grid-column:2; font:500 11px/1.2 var(--font); color:var(--enamel-dim); margin:0; font-variant-numeric:tabular-nums; }
.renewal #flyout .tool .t-when { font-weight:650; color:#f0cf8c; }
.renewal #flyout .tool[aria-disabled=true] .t-cost { display:none; }
/* A crowded family drops the icons and keeps to one row. */
.renewal #flyout .fly[data-dense] .tool { grid-template-columns:minmax(0,1fr); min-width:82px; flex-basis:82px; padding:5px 7px; }
.renewal #flyout .fly[data-dense] .tool .t-ico { display:none; }
.renewal #flyout .fly[data-dense] .tool .t-name,.renewal #flyout .fly[data-dense] .tool .t-cost,.renewal #flyout .fly[data-dense] .tool .t-when { grid-column:1; font-size:11px; }
.renewal #flyout .tool:hover { background:#435764; }
.renewal #flyout .tool.active { background:var(--cobalt); border-color:#8daedb; box-shadow:none; }
.renewal #flyout .tool.zr .t-ico { color:#9ddb91; }.renewal #flyout .tool.zc .t-ico { color:#93beff; }.renewal #flyout .tool.zi .t-ico { color:#f3db7a; }
.renewal #flyout.show-future .tool.locked-hidden { display:flex!important; opacity:.65; border-style:dashed; }
.renewal #flyout .family-hidden,.renewal #flyout.show-future .tool.family-hidden,.renewal #flyout.show-locked-tools .tool.era-far,.renewal #flyout .tool.era-far { display:none!important; }
.renewal #flyout .family-empty { color:var(--enamel-dim); font-size:12px; margin:6px 0; }
.renewal #flyout .fly>.btn { align-self:center; }
.renewal #flyout .ru-modes { margin:0; order:5; width:100%; }
.renewal #flyout .ru-modes button { min-height:32px; font-size:12px; }
.renewal #selected-tool-context { flex:0 0 100%; min-width:0; margin-top:6px; padding-top:5px; border-top:1px solid var(--keyline); display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px; font-size:11.5px; line-height:18px; }
.renewal .tool-context-main { display:flex; align-items:baseline; gap:8px; min-width:0; flex:1 1 auto; }
.renewal #selected-tool-context h3 { order:1; font:700 12.5px/18px var(--font); margin:0; white-space:nowrap; }
.renewal #selected-tool-state { order:0; flex:none; font:700 9.5px/16px var(--font); letter-spacing:.06em; text-transform:uppercase; color:#bfdebf; padding:0 6px; border:1px solid #bfdebf55; border-radius:3px; white-space:nowrap; }
.renewal #selected-tool-context.is-locked #selected-tool-state { color:#f5d596; border-color:#f5d59666; }
.renewal #selected-tool-purpose { order:2; display:none; min-width:0; margin:0; color:#f5d596; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.renewal #selected-tool-context.is-locked #selected-tool-purpose { display:block; }
.renewal #selected-tool-context.is-locked #selected-tool-gesture { display:none; }
.renewal .tool-context-facts { display:flex; flex-direction:row; align-items:baseline; gap:12px; flex:none; margin-left:auto; min-width:0; }
.renewal #selected-tool-price { font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.renewal #selected-tool-gesture { color:var(--enamel-dim); white-space:nowrap; }
.renewal .tool-context-facts>div { display:flex; gap:12px; }
.renewal .tool-context-facts button,.renewal .map-normal { padding:0; color:#c8dcff; font:inherit; font-size:11px; background:none; border:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
.renewal .map-normal { padding:5px 0; }
.renewal #selected-tool-details { flex:0 0 100%; color:var(--enamel-dim); font-size:12px; line-height:1.6; }
.renewal #selected-tool-details:not([open]) { display:none; }
.renewal #selected-tool-details p { margin:7px 0 0; max-width:75ch; }
.renewal #active-tool-chip { position:fixed; left:50%; bottom:139px; transform:translateX(-50%); z-index:5; border:0; border-radius:6px; background:var(--slate); color:var(--enamel-dim); font:500 11px var(--font); padding:7px 12px; max-width:calc(100vw - 30px); cursor:pointer; box-shadow:var(--shell-shadow); }
.renewal.tray-open #active-tool-chip { display:none; }
.renewal #map-access { position:fixed; left:14px; top:80px; display:flex; align-items:center; gap:3px; z-index:8; background:var(--slate); border-radius:6px; padding:3px; box-shadow:var(--shell-shadow); }
.renewal #map-current { display:none; }
.renewal #map-choices { position:fixed; top:127px; left:14px; width:252px; display:grid; grid-template-columns:1fr; padding:7px; background:var(--slate); border-radius:8px; z-index:9; max-height:calc(100vh - 270px); overflow-y:auto; box-shadow:var(--shell-shadow); }
.renewal #map-choices button { display:flex; align-items:center; gap:11px; padding:8px 10px; min-height:36px; color:var(--enamel); background:none; border:0; border-radius:4px; font:500 12px var(--font); text-align:left; cursor:pointer; }
.renewal #map-choices button:hover { background:var(--slate-hi); }.renewal #map-choices [aria-pressed=true] { background:var(--cobalt); }.renewal #map-choices button:disabled { opacity:.45; cursor:not-allowed; }
.renewal #map-choices .i { width:20px; height:20px; }
.renewal #legend { inset:128px auto auto 14px; width:252px; max-height:calc(100vh - 300px); overflow-y:auto; background:var(--slate); border:0; box-shadow:var(--shell-shadow); border-radius:7px; font-size:11px; padding:12px; }
.renewal #legend.compact { width:auto; max-width:252px; background:none; box-shadow:none; padding:0; }
.renewal #legend.compact ul { align-items:flex-start; }
.renewal #legend .fine { opacity:1; color:var(--enamel-dim); }
.renewal #city-hall { position:fixed; right:14px; bottom:67px; width:305px; max-height:calc(100vh - 155px); overflow-y:auto; z-index:10; background:var(--form); color:var(--ink); border-radius:9px; box-shadow:var(--shell-shadow); padding:14px; }
.renewal #city-hall>header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.renewal #city-hall h2 { margin:0; font:700 27px var(--signtext); }
.renewal #city-hall-close { color:var(--ink); }
.renewal #city-hall .bb-right { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:auto; height:auto; min-height:0; align-items:stretch; gap:4px; background:transparent; border:0; box-shadow:none; width:100%; max-width:none; overflow:visible; padding:0; }
.renewal #city-hall .bb-right>button { display:flex; flex-direction:column; gap:6px; width:auto; height:auto; min-height:70px; padding:10px 7px; border:1px solid #bccbbf; border-radius:5px; color:var(--ink); background:transparent; }
.renewal #city-hall .bb-right>button:hover { background:#d6e1d6; }.renewal #city-hall .bb-right>button.active { background:#cfdddb; }
.renewal #city-hall .hall-label { font:600 11px/1.35 var(--font); text-align:center; }
.renewal #city-hall .bb-sep { grid-column:1/-1; height:1px; width:auto; background:var(--form-rule); margin:5px 0; }
.renewal #bottombar .cam { position:fixed; right:14px; bottom:72px; display:grid; grid-template-columns:repeat(2,34px); gap:2px; padding:4px; background:var(--slate); border-radius:6px; box-shadow:var(--shell-shadow); }
.renewal #bottombar .cam .tb { width:34px; height:31px; }
.renewal #toast { top:80px; bottom:auto; left:50%; transform:translateX(-50%); max-width:min(500px,calc(100vw - 28px)); z-index:11; }
.renewal #tool-help { display:none; }
.renewal #record { max-height:calc(100vh - 165px); }
@media(max-width:1120px){
 .renewal #topbar .pill { padding:0 8px; }.renewal #topbar .pill.small { padding:0 8px; }.renewal #topbar .pill svg.i { display:none; }
 .renewal #topbar .nameplate { min-width:135px; max-width:22vw; }.renewal #topbar .nameplate b { font-size:22px; }
 .renewal #topbar .pv>span { font-size:19px; }.renewal #toolcol .cat { min-width:58px; padding:6px; }
 .renewal #ticker .tk-flag { display:none; }.renewal #toolcol { left:14px; transform:none; max-width:calc(100vw - 110px); }
 .renewal #active-tool-chip { left:14px; transform:none; }
 .renewal #flyout { left:14px; transform:none; width:min(850px,calc(100vw - 120px)); }
 .renewal #card-waiting { left:14px; transform:none; }
}
@media(max-width:820px){
 .renewal #topbar { gap:5px; inset:8px 8px auto; flex-wrap:wrap; height:auto; justify-content:stretch; }
 .renewal #topbar .nameplate { min-width:125px; max-width:30vw; height:50px; }.renewal #topbar .stats { height:50px; }
 .renewal #topbar .clock { margin-left:auto; height:39px; }
 .renewal #topbar .pill.small { padding:0 6px; }.renewal #topbar .pv small { font-size:9px; }.renewal #topbar .pv>span { font-size:17px; }
 .renewal #map-access { top:108px; left:8px; }.renewal #map-choices,.renewal #legend { top:154px; left:8px; }
 .renewal #flyout { bottom:145px; max-height:calc(100vh - 270px); }
 .renewal #toolcol { left:8px; max-width:calc(100vw - 93px); }.renewal #toolcol .cat { min-width:58px; }
 .renewal #bottombar { gap:8px; padding:0 8px; }.renewal #bottombar .cam { right:8px; }
 .renewal #civic-access .shell-action { padding:7px; gap:5px; font-size:11px; }
 .renewal .tool-context-facts { flex-wrap:wrap; margin-left:0; row-gap:2px; }.renewal #selected-tool-gesture { white-space:normal; }
 .renewal #selected-tool-state { display:none; }
 .renewal #toast { top:62px; }
}
@media(max-width:560px){
 .renewal #topbar .nameplate { min-width:104px; max-width:29vw; padding:5px 13px; }.renewal #topbar .nameplate b { font-size:19px; }.renewal #topbar #era-name { font-size:10px; }
 .renewal #topbar .pill { padding:0 6px; }.renewal #topbar .stats { overflow-x:auto; justify-content:flex-start; }.renewal #topbar .pill { flex:none; }
 .renewal #map-access { max-width:calc(100vw - 16px); }.renewal #ticker { display:none; }.renewal #civic-access { margin-left:auto; }
 .renewal #civic-access .shell-action { flex-direction:column; gap:2px; font-size:10px; min-width:52px; padding:4px 6px; }
 .renewal #civic-access .i { width:18px; height:18px; }
 .renewal #flyout { padding:8px 10px; max-height:calc(100vh - 275px); }.renewal .future-switch { font-size:10px; }
 .renewal #tool-families { gap:1px; }.renewal #tool-families button { padding:7px 9px; }
 .renewal #flyout .tool { min-width:104px; flex-basis:104px; }.renewal #flyout .tool .t-name { font-size:11px; }
 .renewal #city-hall { right:8px; width:min(305px,calc(100vw - 16px)); }
}
@media(prefers-reduced-motion:reduce){.renewal #ticker-text,.renewal #flyout .tool.fresh { animation:none!important; }}


/* One bounded column owns all right-side context. Real panels flow, so no card
   may cover another card's controls when content, fonts or scenario change. */
.renewal #city-context-rail { position:fixed; top:78px; right:14px; width:280px; max-height:calc(100vh - 225px); display:flex; flex-direction:column; align-items:stretch; gap:8px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; z-index:7; border-radius:9px; padding:0 2px 5px; }
.renewal #city-context-rail>*,.renewal #city-context-rail #advisor,.renewal #city-context-rail #countdown,.renewal #city-context-rail #fc-card,.renewal #city-context-rail #scn-goals,.renewal #city-context-rail #city-brief-mount,.renewal #city-context-rail #alerts,.renewal #city-context-rail #legend { position:relative; inset:auto; width:100%; min-width:0; max-width:100%; max-height:none; flex:0 0 auto; margin:0; zoom:1; }
.renewal #city-context-rail #advisor .adv-main { min-width:0; }
.renewal #city-context-rail #advisor #adv-text { max-height:none; overflow:visible; }
.renewal #city-context-rail #scn-goals { border-radius:7px; box-shadow:none; }
.renewal #city-context-rail #scn-goals .sg-h { align-items:center; min-height:28px; }
.renewal #city-context-rail #scn-goals .sg-min { min-width:30px; min-height:30px; }
.renewal #city-context-rail #alerts { overflow:visible; }
.renewal #alerts .al-head { width:100%; min-height:38px; text-align:left; }
.renewal #alerts .al-more { width:100%; border:0; cursor:pointer; }
.renewal #city-context-rail .al-strip .one { white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
.renewal.rec-open #city-context-rail { display:none; }
@media(max-width:700px){
 .renewal.maps-open #city-context-rail { display:none; }
 .renewal #city-context-rail { font-size:12px; }
}

/* Demand remains one compact meter until the mayor asks for an explanation. */
.renewal #demand-toggle { color:inherit; background:transparent; cursor:pointer; font:inherit; }
.renewal #demand-toggle:hover { background:#ffffff0c; }
.renewal #demand-toggle:focus-visible { outline:2px solid var(--cobalt,#3183bc); outline-offset:3px; }
#demand-panel[hidden] { display:none; }
#demand-panel { position:fixed; z-index:45; left:12px; bottom:72px; width:min(424px,calc(100vw - 24px)); max-height:calc(100dvh - 212px); overflow:auto; padding:14px; box-sizing:border-box; border:1px solid var(--form-rule,#aeb9bc); border-radius:10px; background:var(--enamel,#f4f5ef); color:var(--ink,#202a32); box-shadow:0 5px 22px #101c3050; font:12px/1.45 var(--font,"Public Sans",sans-serif); }
#demand-panel header { display:flex; align-items:center; gap:12px; }
#demand-panel h2 { margin:0; font:700 18px var(--font,"Public Sans",sans-serif); }
#demand-panel header button { margin-left:auto; min-width:36px; min-height:36px; font-size:24px; border:0; background:transparent; }
#demand-panel h3 { font-size:12px; margin:14px 0 6px; }
#demand-panel button { color:inherit; cursor:pointer; }
#demand-panel button:focus-visible { outline:3px solid var(--cobalt,#205d93); outline-offset:2px; }
#demand-panel button:disabled { cursor:default; opacity:.55; }
/* Room to grow: one row per kind of lot. Words and a bar, never a bare score. */
.demand-zones { display:grid; gap:7px; }
.demand-zone { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:5px; align-items:center; padding:9px 11px; border:1px solid var(--form-rule,#aeb9bc); border-left:4px solid #8d9a93; border-radius:6px; background:#fbfcf8; }
.demand-zone.is-high { border-left-color:#2e7d57; }.demand-zone.is-some { border-left-color:#6aa583; }.demand-zone.is-low { border-left-color:#b8543f; }
#demand-panel .demand-zone header { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr 132px; align-items:center; gap:9px; }
.demand-zone strong { font-size:13px; }
.demand-zone em,.demand-wealth em { font-style:normal; font-weight:650; font-size:11px; color:#56655c; }
.demand-zone.is-high em,.demand-wealth .is-high em { color:#1f6b47; }.demand-zone.is-low em,.demand-wealth .is-low em { color:#a03f2c; }
.demand-zone p { margin:0; font-size:12px; line-height:1.4; color:#38464c; }
.demand-zone button { padding:6px 9px; font:600 11px/1.2 var(--font,"Public Sans",sans-serif); background:transparent; border:1px solid var(--form-rule,#aeb9bc); border-radius:4px; white-space:nowrap; }
.demand-zone button:hover:not(:disabled) { background:#e4ebe1; }
.demand-bar { position:relative; display:block; height:8px; border-radius:4px; background:#d6ddd3; }
.demand-bar::after { content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:#55645b; border-radius:1px; }
.demand-bar i { position:absolute; top:0; bottom:0; border-radius:4px; background:#2e7d57; }
.demand-bar.is-some i { background:#6aa583; }.demand-bar.is-low i { background:#b8543f; }.demand-bar.is-flat i { background:#8d9a93; }
.demand-key { display:grid; grid-template-columns:1fr auto 1fr; width:150px; margin:5px 3px 0 auto; font-size:9.5px; letter-spacing:.02em; color:#66756c; }
.demand-key span:last-child { text-align:right; }
.demand-wealth dd { display:grid; grid-template-columns:132px 96px; align-items:center; gap:9px; font-weight:400; }
#demand-panel .demand-fine { margin:10px 0 0; color:#4d5b61; }
#demand-panel dl { margin:0; }
#demand-panel dl>div { display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
#demand-panel dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
#demand-panel .demand-note:empty { display:none; }
#demand-panel .demand-note { border-top:1px solid var(--form-rule,#aeb9bc); margin-bottom:0; padding-top:10px; }

/* Construction choices stay inside the active tool's existing context. */
.renewal #construction-shape { flex:0 0 100%; display:grid; gap:7px; border-top:1px solid var(--keyline); padding-top:8px; }
.renewal #construction-shape[hidden],.renewal .construction-bends[hidden] { display:none; }
.renewal .construction-guide { font-size:11px; line-height:1.5; color:var(--enamel-dim); }
.renewal .construction-bends { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11px; }
.renewal .construction-bends>span { margin-right:4px; color:var(--enamel-dim); }
.renewal .construction-bends button { min-height:32px; padding:5px 9px; border:1px solid var(--keyline); border-radius:4px; background:var(--slate); color:var(--enamel); font:inherit; cursor:pointer; }
.renewal .construction-bends button[aria-pressed="true"] { border-color:#bde0d8; color:#e8fffa; background:#29483f; }
.renewal .construction-bends button:focus-visible { outline:2px solid #ffd38a; outline-offset:2px; }

/* HUD explanations are readable on focus without turning vital signs into actions. */
.renewal .stats [data-tip][tabindex] { cursor:help; }
.hud-tip-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Compact transport for music, independent of city time. */
.music-mini{display:flex;gap:2px;margin-left:8px;border-left:1px solid #ffffff22;padding-left:6px}.music-mini .tb{min-width:30px;font-size:15px}.speed .tb{font-variant-numeric:tabular-nums;font-weight:700}.speed .tb.active{background:#e6b951;color:#202d31}
body.player-modal #v33b-notices,body.player-modal #alerts,body.player-modal #advisor,body.player-modal #toast{visibility:hidden;pointer-events:none}
#modal-event .panel.celebration{text-align:center;max-width:580px;overflow:hidden;background:radial-gradient(circle at 50% 0,#fff1b4,transparent 70%),#fff9ec}
.celebration .celebration-medal{font-size:64px;line-height:1.3;color:#b88417;animation:reward-arrive .6s ease-out}.celebration .reward-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:24px 0}.reward-chips span{padding:12px 18px;background:#f0e4c8;border-radius:8px;font-size:18px}.celebration #ev-title{font-size:34px}.celebration #ev-actions{justify-content:center}.celebration-sparks{position:relative;height:26px}.celebration-sparks i{position:absolute;left:50%;width:7px;height:7px;background:#d9a92d;border-radius:50%;animation:reward-spark 1s ease-out both;transform:rotate(var(--a)) translateX(20px)}
@keyframes reward-arrive{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes reward-spark{to{transform:rotate(var(--a)) translateX(180px);opacity:0}}@media(prefers-reduced-motion:reduce){.celebration-medal,.celebration-sparks i{animation:none!important}}

.player-budget{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:16px 0}.player-budget h3{grid-column:1/-1;margin:8px 0 0}.budget-control>span{display:flex;align-items:center;gap:7px;font-weight:700}.budget-control output{margin-left:auto;font-variant-numeric:tabular-nums}.budget-control input{width:100%;accent-color:#315d94}.budget-control small{display:block;color:#53645c;font-size:12px;line-height:1.35}.budget-feedback{grid-column:1/-1;font-size:12px;min-height:1em;margin:0}@media(max-width:520px){.player-budget{grid-template-columns:1fr}}

/* Secondary demand detail stays behind an explicit choice. */
.demand-wealth { margin-top:12px; border-top:1px solid var(--form-rule,#aeb9bc); padding-top:10px; }
.demand-wealth summary { cursor:pointer; font-weight:600; }
.demand-wealth summary:focus-visible { outline:2px solid var(--cobalt); outline-offset:3px; }

/* Service reach stays beside the funding choice and its real monthly bill. */
.budget-control>.budget-service{display:block;font-weight:400}.budget-service{margin:8px 0;padding:9px 10px;background:#dce5d9;border-radius:5px}.budget-service-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px}.budget-service-heading strong{font-variant-numeric:tabular-nums}.budget-service-meter{display:block;height:6px;overflow:hidden;background:#bec9bf;border-radius:3px;margin:5px 0}.budget-service-meter>span{display:block;height:100%;background:#34765a}.budget-service[data-tone="low"] .budget-service-meter>span{background:#a15b29}.budget-control .budget-monthly{font-weight:700;color:#283c31}.budget-service [data-service-note]:empty{display:none}

.budget-service-meter[hidden]{display:none}

/* ---------- 2026-11-11 shortfalls: windows keep to one frame, notices never take the map ---------- */
/* Every window sits below the top bar and above the build bar, so neither is ever half covered. */
body.renewal { --frame-top:76px; --frame-bottom:141px; }
@media (min-width:1700px) and (min-height:940px) { body.renewal { --frame-top:90px; --frame-bottom:168px; } }
@media (min-width:2300px) and (min-height:1280px) { body.renewal { --frame-top:116px; --frame-bottom:222px; } }
@media (min-width:900px) and (min-height:600px) {
 .renewal .modal { padding:var(--frame-top) 16px var(--frame-bottom); }
 .renewal .modal > .panel,.renewal .modal > .paper,.renewal .modal > .panel.vis { max-height:100%; }
 .renewal dialog[open] { max-height:calc(100dvh - var(--frame-top) - var(--frame-bottom)); margin-top:var(--frame-top); margin-bottom:auto; }
}

/* The era notice: a proclamation card in the right-hand column. It names the era, says what it means, lists prices. */
.city-notice[hidden] { display:none!important; }
.city-notice { position:fixed; left:14px; top:132px; z-index:12; width:300px; box-sizing:border-box; background:var(--form,#e9eee4); color:var(--ink,#1f2a30); border-radius:8px; overflow:hidden; box-shadow:var(--shell-shadow,0 7px 24px rgba(8,18,24,.28)); font:13px/1.45 var(--font,"Public Sans",sans-serif); }
.renewal #city-context-rail .city-notice { position:relative; inset:auto; width:100%; flex:0 0 auto; }
.city-notice.era-notice-in { animation:era-notice-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes era-notice-in { from { transform:translateY(-10px); opacity:0; } to { transform:none; opacity:1; } }
.city-notice header { position:relative; padding:10px 44px 9px 14px; background:var(--cobalt,#234b93); color:var(--enamel,#eef0ea); border-bottom:3px solid var(--green,#2e7d57); box-shadow:inset 0 0 0 2px var(--cobalt,#234b93),inset 0 0 0 3px rgba(238,240,234,.4); }
.city-notice header small { display:block; font:700 10px/1.2 var(--font,sans-serif); letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.city-notice header h2 { margin:3px 0 0; font:800 25px/1.02 var(--sign,var(--signtext,serif)); letter-spacing:.025em; text-transform:uppercase; }
.city-notice .era-notice-x { position:absolute; top:8px; right:8px; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:rgba(238,240,234,.16); color:inherit; font-size:20px; line-height:1; cursor:pointer; }
.city-notice .era-notice-x:hover { background:#b8352b; }
.city-notice .era-notice-line { margin:11px 14px 0; }
.city-notice h3 { margin:12px 14px 0; padding-top:9px; border-top:1px solid var(--form-rule,#b9c5bb); font:700 10px/1.2 var(--font,sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft,#55646b); }
.city-notice .era-notice-prices { list-style:none; margin:6px 14px 0; padding:0; }
.city-notice .era-notice-prices li { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:4px 0; border-bottom:1px dotted var(--form-rule,#b9c5bb); }
.city-notice .era-notice-prices li:last-child { border-bottom:0; }
.city-notice .era-price { display:inline-flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.city-notice .era-price s { color:var(--ink-soft,#55646b); text-decoration-thickness:1px; }
.city-notice .era-price i { font-style:normal; color:var(--ink-soft,#55646b); }
.city-notice .era-price b { min-width:52px; text-align:right; }
.city-notice li.up .era-price b { color:#a23324; }
.city-notice li.down .era-price b { color:#256b49; }
.city-notice .era-notice-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.city-notice .era-notice-none { margin:8px 14px 0; color:var(--ink-soft,#55646b); }
.city-notice footer { display:flex; justify-content:flex-end; padding:10px 14px 12px; }
.city-notice footer .btn { padding:5px 14px 6px; font-size:14px; }
body.player-modal .city-notice,body.player-modal #card-waiting { visibility:hidden; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .city-notice.era-notice-in { animation:none; } }

/* The treasurer's warnings wear the same card, in warning colours. */
.city-notice[data-level] header { background:#7a5416; box-shadow:inset 0 0 0 2px #7a5416,inset 0 0 0 3px rgba(238,240,234,.4); border-bottom-color:#e6b951; }
.city-notice[data-level=overdrawn] header,.city-notice[data-level=last] header { background:#a23324; box-shadow:inset 0 0 0 2px #a23324,inset 0 0 0 3px rgba(238,240,234,.4); border-bottom-color:#1f2a30; }
.city-notice[data-level] header h2 { font-size:21px; }
.city-notice footer { gap:8px; }
.city-notice footer .btn.ghost { background:transparent; color:var(--ink,#1f2a30); border-color:var(--form-rule,#b9c5bb); }
/* A card that is waiting for the mayor to finish a move says so, just above the build bar. */
#card-waiting[hidden] { display:none!important; }
#card-waiting { position:fixed; left:50%; bottom:176px; transform:translateX(-50%); z-index:9; display:flex; align-items:center; gap:10px; padding:6px 8px 6px 13px; border-radius:6px; background:var(--slate,#2b3a44); color:var(--enamel,#eef0ea); border-left:4px solid #e6b951; box-shadow:var(--shell-shadow,0 7px 24px rgba(8,18,24,.28)); font:500 12px/1.3 var(--font,sans-serif); white-space:nowrap; max-width:calc(100vw - 28px); }
#card-waiting button { padding:4px 10px; border:1px solid #ffffff40; border-radius:4px; background:transparent; color:inherit; font:600 11px var(--font,sans-serif); cursor:pointer; }
#card-waiting button:hover { background:var(--slate-hi,#3a4d5a); }

/* The milestone card says what its reward does next. */
.celebration .celebration-what { max-width:440px; margin:0 auto 16px; padding:10px 14px; text-align:left; font-size:14px; line-height:1.45; background:#f3e8cc; border-left:4px solid var(--green,#2e7d57); border-radius:4px; }
/* The milestone card keeps to the same frame as every other window: tighter, with its button always in view. */
@media (min-width:900px) and (min-height:600px) {
 body.renewal #modal-event .panel.celebration { max-height:100%; overflow-y:auto; width:min(600px,100%); max-width:600px; }
 body.renewal .celebration .panel-head { padding-top:16px; padding-bottom:8px; }
 body.renewal .celebration #ev-title { font-size:28px; white-space:nowrap; }
 body.renewal .celebration .panel-body { padding-top:10px; padding-bottom:14px; }
 body.renewal .celebration .celebration-medal { font-size:30px; line-height:1; }
 body.renewal .celebration #ev-body h2 { margin:4px 0 2px; }
 body.renewal .celebration #ev-body p { margin:0 0 4px; }
 body.renewal .celebration .reward-chips { margin:10px 0; gap:8px; }
 body.renewal .celebration .reward-chips span { padding:8px 14px; font-size:16px; }
 body.renewal .celebration .celebration-what { margin-bottom:10px; padding:8px 12px; font-size:13px; }
 body.renewal .celebration .celebration-next { margin-top:6px; }
 body.renewal .celebration .celebration-sparks { position:absolute; left:0; right:0; top:120px; height:0; pointer-events:none; }
 body.renewal .celebration #ev-actions { margin-top:10px; }
}
.celebration .celebration-what b { display:block; margin-bottom:2px; font:700 10.5px/1.3 var(--font,sans-serif); letter-spacing:.08em; text-transform:uppercase; color:#256b49; }
/* News notices were placed for the old left-hand tool column and landed on the build bar. They sit above it now, and step up when a tool tray is open. */
.renewal #v33b-notices { left:14px; bottom:141px; width:min(300px,calc(100vw - 28px)); }
.renewal.tray-open #v33b-notices { bottom:290px; }
/* A decision card keeps its answer buttons in view however long the card is: they ride the bottom edge while the body scrolls. */
@media (min-width:900px) and (min-height:600px) {
 .renewal #modal-event .panel.memo { overflow:hidden; }
 .renewal #modal-event .panel.memo .panel-body { padding-bottom:0; }
 .renewal #modal-event .panel.memo #ev-actions { position:sticky; bottom:0; z-index:2; margin:14px -22px 0 -10px; padding:10px 22px 14px 10px; background:var(--card,#fbfaf3); box-shadow:0 -10px 14px -12px rgba(16,23,29,.5); }
 .renewal #modal-event .panel.celebration #ev-actions { position:static; margin:10px 0 0; padding:0 0 14px; background:none; box-shadow:none; }
 .renewal #modal-event .lmo-photo-card .lmo-hero > img,.renewal #modal-event .lmo-photo-card .lmo-hero > canvas { width:100%; height:auto; max-height:248px; aspect-ratio:auto; object-fit:contain; }
}
body.renewal #modal-event .panel.celebration .celebration-what b { display:block; margin-bottom:2px; font:700 10.5px/1.3 var(--font,sans-serif); letter-spacing:.08em; text-transform:uppercase; color:#256b49; }

/* ---------- 2026-11-11 fresh review fixes ---------- */
/* The line about the tool in hand sits above the cards, so nothing it says can move a card under the pointer. */
.renewal #flyout #selected-tool-context { order:1; margin:5px 0 0; padding:5px 0 0; }
.renewal #flyout .fly.on { order:2; }
/* The newspaper keeps its Close in view while the page scrolls. */
.renewal .paper .paper-actions { position:sticky; bottom:0; z-index:2; margin:0; padding:10px 26px 14px; background:var(--news,#f3f0e4); box-shadow:0 -10px 14px -12px rgba(16,23,29,.55); }
/* A card in its first moments takes no pointer input and cannot be text-selected by a press already on its way. */
.modal.arriving { pointer-events:none; }
.modal.arriving .panel { user-select:none; -webkit-user-select:none; }
/* The advisor column goes faint while a stroke is being drawn, and lets it pass underneath. */
.renewal #city-context-rail { transition:opacity .15s ease; }
.renewal.drawing #city-context-rail { opacity:.22; pointer-events:none; }
.renewal.drew-under #city-context-rail { opacity:.32; }
.renewal.drew-under #city-context-rail:hover { opacity:1; }
/* Graphics: three plain choices. */
#gfx-body .gfx-now { margin:0 0 12px; }
#gfx-body .gfx-opts { display:grid; gap:8px; }
#gfx-body .gfx-opt { display:grid; gap:2px; padding:10px 12px; text-align:left; border:1px solid var(--form-rule,#bccbbf); border-left:4px solid var(--form-rule,#bccbbf); border-radius:5px; background:#fbfcf8; color:var(--ink,#1f2a30); font:inherit; cursor:pointer; }
#gfx-body .gfx-opt b { font-size:15px; }
#gfx-body .gfx-opt span { font-size:12.5px; color:var(--ink-soft,#55646b); }
#gfx-body .gfx-opt:hover { background:#eef3ea; }
#gfx-body .gfx-opt.on { border-color:var(--cobalt,#234b93); border-left-color:var(--cobalt,#234b93); background:#e7edf7; }
/* A held sky says so. */
#dn-body .dn-held { margin:6px 0 10px; padding:8px 11px; font-size:13px; line-height:1.4; background:#f3e8cc; border-left:4px solid #e6b951; border-radius:4px; }
.renewal #sky-held { color:#1f2a30; background:#e6b951; font-weight:700; }
.renewal #sky-held:hover { background:#f0c96a; }
#disaster-list .disaster-more { grid-column:1 / -1; margin:6px 0 0; }
/* The town has stopped growing: one line, in the right-hand column, with the place to look. */
#growth-stall[hidden] { display:none!important; }
#growth-stall { position:fixed; right:14px; top:132px; width:280px; box-sizing:border-box; z-index:7; padding:9px 12px 10px; background:var(--form,#e6ebe2); color:var(--ink,#1f2a30); border-left:5px solid #e6b951; border-radius:7px; box-shadow:var(--shell-shadow,0 7px 24px rgba(8,18,24,.28)); font:13px/1.4 var(--font,"Public Sans",sans-serif); }
.renewal #city-context-rail #growth-stall { position:relative; inset:auto; width:100%; flex:0 0 auto; }
#growth-stall small { display:block; font:700 10px/1.2 var(--font,sans-serif); letter-spacing:.1em; text-transform:uppercase; color:#7a5416; }
#growth-stall p { margin:3px 0 0; }
#growth-stall .btn { margin-top:7px; padding:4px 11px 5px; font-size:13px; background:transparent; color:var(--ink,#1f2a30); border-color:var(--form-rule,#b9c5bb); }
#growth-stall .btn:hover { background:#d6e1d6; }
body.player-modal #growth-stall { visibility:hidden; pointer-events:none; }

/* ---------- 2026-11-11 second fresh review ---------- */
/* City Hall: three across, so every office is on screen at 720p with no scrolling, Region included. */
.renewal #city-hall { width:348px; }
.renewal #city-hall .bb-right { grid-template-columns:repeat(3,minmax(0,1fr)); }
.renewal #city-hall .bb-right>button { min-height:64px; padding:8px 4px; }
/* The building record sits on the left, under the map buttons and above the build bar. It covers neither the advisor column nor the Dozer. */
.renewal #record { left:14px; right:auto; top:132px; bottom:141px; width:min(388px,calc(100vw - 28px)); max-height:none; }
.renewal.rec-open #city-context-rail { display:flex; }
.renewal.rec-open #legend.compact { display:none; }
.renewal.rec-open:has(#legend:not(.compact) h5) #record { left:276px; }
@media (max-width:820px) { .renewal #record { top:auto; bottom:141px; max-height:calc(100dvh - 300px); } }
/* The office stamp sits inside its card, whole. */
.renewal #modal-event .panel.memo .seal { top:14px; right:16px; width:74px; height:74px; }
/* An opened alert list takes the top of the column: its first reason and Show me are in view beside a tutorial card. */
.renewal #city-context-rail #alerts:not(.compact):not(.hidden) { order:-1; }
/* The region map is centred in its half and may be scaled to fit (RegionUI._fit). */
.region-panel .rg-left { display:flex; flex-direction:column; align-items:center; }
.region-panel .rg-left .rg-landscape { flex:none; }
.region-panel .rg-left .rg-legend { align-self:stretch; }
/* The town map: opened from the camera buttons, beside them. */
#mini-map[hidden] { display:none!important; }
#mini-map { position:fixed; right:100px; bottom:72px; z-index:8; width:212px; box-sizing:border-box; padding:7px 8px 8px; background:var(--slate,#28333d); color:var(--enamel,#eef0ea); border-radius:8px; box-shadow:var(--shell-shadow,0 7px 24px rgba(8,18,24,.28)); font:11px/1.35 var(--font,"Public Sans",sans-serif); }
#mini-map header { display:flex; align-items:center; justify-content:space-between; margin:0 0 5px; }
#mini-map header b { font:700 13px/1 var(--font,sans-serif); letter-spacing:.02em; }
#mini-map .mm-x { width:22px; height:22px; padding:0; border:0; border-radius:4px; background:var(--slate-hi,#3a4d5a); color:inherit; font-size:16px; line-height:1; cursor:pointer; }
#mini-map .mm-art { width:196px; height:196px; border-radius:4px; overflow:hidden; cursor:crosshair; box-shadow:0 0 0 1px #ffffff2e; touch-action:none; }
#mini-map .mm-art svg { display:block; }
#mini-map .mm-view { fill:rgba(255,255,255,.14); stroke:#fff; stroke-width:1.6; stroke-linejoin:round; paint-order:stroke; filter:drop-shadow(0 0 1px rgba(0,0,0,.7)); pointer-events:none; }
#mini-map .mm-town circle:first-child { fill:none; stroke:#a23324; stroke-width:1.4; }
#mini-map .mm-town circle:last-child { fill:#a23324; }
#mini-map p { margin:6px 0 0; color:var(--enamel-dim,#c1ccd1); }
body.player-modal #mini-map { visibility:hidden; }
@media (max-width:820px) { #mini-map { right:8px; bottom:190px; } }
.renewal #bottombar .cam { grid-template-columns:repeat(2,34px); }
.renewal.rec-open #alerts,.renewal.rec-open #countdown { visibility:visible; }