/* City Planner (/city-planner/). Loaded after style.css, which supplies the bar, the scene card, the map and the modals. */
.planner-page .page-heading .heading-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.planner-page .scene{margin:0 auto}
.planner-page #road{cursor:default}.planner-page.plan-running #road{cursor:pointer}
/* The score bar: wave, progress toward the goal, score, complaints left */
.plan-hud{display:flex;align-items:center;flex:1 1 0;min-width:0}.plan-hud>*+*{margin-left:16px}.plan-hud .cop-wide{flex:1 1 150px;width:auto;min-width:0}.plan-hud .cop-wide>b{overflow:hidden;text-overflow:ellipsis}
#plan-wave small{font:500 12px var(--mono);color:var(--muted)}
#plan-lives{color:var(--green)}#plan-lives small{font-size:11px;letter-spacing:2px;vertical-align:middle;opacity:.75}#plan-lives[data-left="2"]{color:var(--orange-deep)}#plan-lives[data-left="1"],#plan-lives[data-left="0"]{color:var(--red)}
#plan-progress.met{color:var(--green)}#plan-progress.short{color:var(--orange-deep)}
.planner-page.plan-running #plan-how{display:none}
@media(max-width:1180px){.planner-page .wordmark,.planner-page .back-pill{display:none}}
.mode-short{display:none}
@media(max-width:980px){.planner-page .mode-long{display:none}.planner-page .mode-short{display:inline}}

/* The forecast card over the map while planning */
.plan-brief{position:absolute;z-index:3;top:16px;left:16px;width:292px;max-width:calc(100% - 32px);padding:16px 18px 14px;border:1px solid rgba(248,249,226,.6);border-radius:14px;background:linear-gradient(135deg,rgba(250,248,232,.97),rgba(233,238,212,.94));box-shadow:0 10px 28px rgba(38,64,43,.22);color:#2c463b;pointer-events:none}
.plan-brief .eyebrow{margin:0 0 6px;color:var(--orange-deep);font-size:9px}
.plan-brief h2{margin:0 0 4px;font:700 25px/1.1 var(--display);letter-spacing:-.7px}
.plan-brief>p{margin:0 0 10px;font-size:12px;line-height:1.45;color:#4f6550}
.brief-flow{display:grid;grid-template-columns:78px minmax(0,1fr) 62px;align-items:center;gap:8px;margin:5px 0;font-size:11px}
.brief-flow span{font-weight:600}.brief-flow em{font:500 10px var(--mono);font-style:normal;text-align:right;color:#4f6550;white-space:nowrap}
.brief-flow i{display:block;height:9px;border-radius:5px;background:rgba(45,90,72,.14);overflow:hidden}.brief-flow i b{display:block;height:100%;border-radius:5px;background:var(--green);transition:width .3s}
.brief-flow i b.busy{background:var(--orange-deep)}.brief-flow i b.jammed{background:var(--red)}
.brief-tags{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}.brief-tags li{padding:3px 8px;border-radius:999px;border:1px solid rgba(45,90,72,.25);font:500 10px var(--mono);color:#3f5a48;background:rgba(255,255,255,.5)}
.plan-brief .brief-goal{margin:11px 0 0;padding-top:10px;border-top:1px solid rgba(75,105,75,.2);font-size:13px;font-weight:700;color:#213c36}
.compact-map .plan-brief{top:8px;left:8px;width:236px;padding:10px 12px}.compact-map .plan-brief h2{font-size:18px}.compact-map .plan-brief>p:not(.brief-goal):not(.eyebrow){display:none}.compact-map .brief-tags{display:none}.compact-map .plan-brief .brief-goal{margin-top:6px;padding-top:6px;font-size:12px}

.cop-flash.calm{background:var(--green);box-shadow:0 6px 20px rgba(19,56,47,.35)}
/* Time left in the wave: a thin bar along the bottom of the map */
.plan-timer{position:absolute;z-index:3;left:0;right:0;bottom:0;height:5px;background:rgba(16,26,20,.28);pointer-events:none}.plan-timer i{display:block;height:100%;width:0;background:#dbed9b}.plan-timer.closing i{background:var(--orange)}

/* The deck under the map: the five intersections in a row, then what the picked one does and the start button */
.plan-deck{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper)}
.deck-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.deck-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:8px 10px;text-align:left;border-radius:11px;line-height:1.2}
.deck-option .deck-name{display:block;max-width:100%;padding-right:10px;font:700 13px/1.2 var(--display)}
.deck-option .deck-bonus{display:inline-block;padding:2px 7px;border-radius:999px;font:700 11px var(--mono);color:#6b4f2d;background:#fbe9cf;white-space:nowrap}
.deck-option .deck-key{position:absolute;top:6px;right:8px;font:500 9px var(--mono);color:#a3a99d}
.deck-option[aria-checked=true]{background:var(--green);border-color:var(--green);color:#fff6dd;box-shadow:0 3px 0 #13382f}.deck-option[aria-checked=true]:hover:not(:disabled){background:#356a55;border-color:#356a55}
.deck-option[aria-checked=true] .deck-bonus{color:#213c36;background:#dbed9b}.deck-option[aria-checked=true] .deck-key{color:#9fbfae}
.deck-option:disabled{opacity:1;cursor:default}
.deck-side{display:flex;align-items:center;gap:12px;min-width:0}
.deck-hint{flex:1;min-width:0;margin:0;font-size:12px;line-height:1.45;color:#5f6a62}.deck-hint b{color:var(--ink)}
.deck-start{width:auto;flex:0 0 auto;justify-content:center;font-size:14px;padding:11px 22px}
.plan-running .deck-key,.plan-running .deck-start,.plan-running .deck-option:not([aria-checked=true]){display:none}
.plan-running .plan-deck{flex-direction:row;align-items:center;gap:14px}.plan-running .deck-options{display:block;flex:0 0 auto}.plan-running .deck-side{flex:1}
.plan-running .deck-option{flex-direction:row;align-items:center;gap:8px;padding:7px 12px;box-shadow:none}.plan-running .deck-option .deck-name{padding-right:0;white-space:nowrap}
.plan-controls{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}.map-footer .plan-controls button{padding:5px 9px;font-size:11px;min-height:30px;white-space:nowrap}.map-footer .plan-controls button[aria-pressed=true]{color:#fff6dd;background:var(--green);border-color:var(--green)}

/* Result cards: the wave's sums and the engineer's report */
.plan-card{max-width:480px}.plan-card .result-number.bad{color:var(--red)}
.plan-card .result-rounds li b{font-weight:600;color:var(--ink)}.plan-card .result-rounds li.total{border-top:2px solid var(--ink);font-weight:700;color:var(--ink)}.plan-card .result-rounds li.miss b{color:var(--red)}
.plan-report{margin-top:22px}.plan-report .eyebrow{margin:0 0 4px}
.plan-report table{width:100%;border-collapse:collapse;font-size:12px}.plan-report th,.plan-report td{padding:6px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}.plan-report th:first-child,.plan-report td:first-child{text-align:left;white-space:normal}.plan-report th{font:500 9px var(--mono);letter-spacing:.8px;text-transform:uppercase;color:#758075}
.plan-report tr.mine td{background:var(--green-soft);font-weight:700}.plan-report tr.best td:first-child::after{content:' ★';color:var(--orange-deep)}.plan-report td.missed{color:var(--red)}.plan-report td small{font:10px var(--mono);color:var(--muted);font-weight:400}
.report-note{margin:8px 0 0;font-size:11px!important;color:var(--muted)!important}
.how-list{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:#5f6a62}.how-list li+li{margin-top:8px}.how-list b{color:var(--ink)}

/* Narrow screens: a tighter deck, and while a wave runs the bar is the score alone */
@media(max-width:900px){.deck-options{gap:6px}.deck-option{padding:7px 8px}.deck-option .deck-key{display:none}.deck-option .deck-name{padding-right:0;font-size:12px}}
@media(max-width:740px){
  .planner-page .page-heading{position:sticky;top:0;z-index:6;box-shadow:0 10px 24px -16px #213c3699}
  .planner-page.plan-running .mode-switch,.planner-page.plan-running #plan-how{display:none}
  .planner-page .intro-actions{order:2}.plan-hud{order:3;flex-basis:100%;flex-wrap:wrap}.plan-hud>*+*{margin-left:14px}.plan-hud .cop-wide{flex-basis:100%;order:-1;margin-left:0!important;margin-bottom:6px;width:auto}
  .planner-page.plan-running .plan-hud{order:0;flex-basis:0;flex-grow:1}
  .deck-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plan-running .plan-deck{flex-direction:column;align-items:stretch;gap:6px}
  .deck-hint{font-size:11px}.deck-start{padding:11px 16px}
  .plan-brief{width:230px;padding:11px 13px}.plan-brief h2{font-size:19px}
  .rotated .plan-brief{left:50%;top:12px;transform:translateX(-50%);width:min(280px,calc(100% - 20px))}
}
@media(prefers-reduced-motion:reduce){.brief-flow i b{transition:none}}