.demo-plot{ min-height:0; font-family:var(--sans); color:var(--paper); }
.demo-plot .demo-plot__layout{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(390px,.9fr); min-height:720px; }
.demo-plot .demo-plot__town{ display:grid; place-items:center; min-width:0; padding:20px; overflow:hidden; background:var(--ink-2); border-right:1px solid var(--line); }
.demo-plot .demo-plot__mapbox{ position:relative; width:min(100%,760px); aspect-ratio:440/325; }
.demo-plot .demo-plot__map{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.demo-plot .demo-plot__hits{ position:absolute; inset:0; pointer-events:none; }
.demo-plot .demo-plot__plot-hit{ position:absolute; width:34%; height:21%; min-width:40px; min-height:40px; padding:0; border:0; background:transparent; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); cursor:pointer; transform:translate(-50%,-50%); pointer-events:auto; }
.demo-plot .demo-plot__plot-hit--selected{ background:transparent; }
.demo-plot .demo-plot__plot-hit:focus-visible,
.demo-plot .demo-plot__control:focus-visible,
.demo-plot .demo-plot__permit:focus-visible,
.demo-plot .demo-plot__reset:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }
.demo-plot .demo-plot__sky{ fill:var(--ink-2); }
.demo-plot .demo-plot__tile{ fill:var(--ink-1); stroke:var(--line); stroke-width:1.3; }
.demo-plot .demo-plot__selection{ fill:none; stroke:var(--signal); stroke-width:3; pointer-events:none; }
.demo-plot .demo-plot__fence{ fill:none; stroke:var(--paper-dim); stroke-width:2; stroke-dasharray:6 3; }
.demo-plot .demo-plot__notice-post{ fill:none; stroke:var(--paper); stroke-width:2; }
.demo-plot .demo-plot__notice{ fill:var(--paper); stroke:var(--ink); stroke-width:1; }
.demo-plot .demo-plot__notice-lines{ fill:none; stroke:var(--ink); stroke-width:1.4; }
.demo-plot .demo-plot__mast,
.demo-plot .demo-plot__rig{ fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.demo-plot .demo-plot__dish{ fill:none; stroke:var(--stage-2); stroke-width:3; stroke-linecap:round; }
.demo-plot .demo-plot__glow{ fill:var(--signal-dim); stroke:none; }
.demo-plot .demo-plot__light{ fill:var(--signal); stroke:var(--paper); stroke-width:1; }
.demo-plot .demo-plot__rig{ stroke:var(--stage-1); }
.demo-plot .demo-plot__tower-front{ fill:var(--stage-2); stroke:var(--paper); stroke-width:1; }
.demo-plot .demo-plot__tower-side{ fill:var(--stage-3); stroke:var(--paper); stroke-width:1; }
.demo-plot .demo-plot__tower-top{ fill:var(--paper-dim); stroke:var(--paper); stroke-width:1; }
.demo-plot .demo-plot__lit-window{ fill:var(--signal); stroke:var(--ink); stroke-width:1; }
.demo-plot .demo-plot__grass{ fill:var(--stage-3); stroke:var(--line); stroke-width:1.3; opacity:.42; }
.demo-plot .demo-plot__withdrawn{ opacity:.45; }
.demo-plot .demo-plot__bench{ fill:none; stroke:var(--paper); stroke-width:3; stroke-linecap:round; }
.demo-plot .demo-plot__hq-tile{ fill:var(--stage-3); stroke:var(--paper); stroke-width:1.8; }
.demo-plot .demo-plot__hq-front{ fill:var(--stage-1); stroke:var(--paper); stroke-width:1; }
.demo-plot .demo-plot__hq-side{ fill:var(--stage-2); stroke:var(--paper); stroke-width:1; }
.demo-plot .demo-plot__hq-top{ fill:var(--signal); stroke:var(--paper); stroke-width:1; }
.demo-plot .demo-plot__hq-floor{ fill:none; stroke:var(--paper); stroke-width:1.3; }
.demo-plot .demo-plot__hq-sign{ display:none; }
.demo-plot .demo-plot__hq-label{ fill:var(--paper); font:600 13px var(--display); letter-spacing:.1em; }
.demo-plot .demo-plot__panel{ display:flex; flex-direction:column; min-width:0; padding:24px; background:var(--ink-1); }
.demo-plot .demo-plot__rule{ margin:0 0 20px; padding:11px 13px; border-left:3px solid var(--signal); background:var(--ink-2); color:var(--paper); font-size:13px; line-height:1.45; }
.demo-plot .demo-plot__eyebrow{ margin:0 0 4px; color:var(--signal-text); font:11px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.demo-plot .demo-plot__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.demo-plot .demo-plot__title{ min-height:34px; margin:0; min-width:0; font:600 clamp(24px,3vw,32px)/1 var(--display); text-transform:uppercase; }
.demo-plot .demo-plot__stage-now{ min-height:19px; margin:6px 0 10px; color:var(--paper-dim); font-size:13px; }
.demo-plot .demo-plot__track{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:0 0 17px; padding:0; list-style:none; }
.demo-plot .demo-plot__track-item{ display:grid; justify-items:center; gap:4px; min-width:0; color:var(--paper-dim); font:9px/1.15 var(--mono); text-align:center; }
.demo-plot .demo-plot__dot{ width:9px; height:9px; border:1px solid var(--line); border-radius:50%; background:transparent; }
.demo-plot .demo-plot__track-item--current{ color:var(--paper); }
.demo-plot .demo-plot__track-item--current .demo-plot__dot{ border-color:var(--signal); background:var(--signal); }
.demo-plot .demo-plot__score{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 18px; padding:11px 13px; border:1px solid var(--line); background:var(--ink-2); }
.demo-plot .demo-plot__score-label{ font:11px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.demo-plot .demo-plot__score-value{ color:var(--signal-text); font:600 29px/1 var(--display); }
.demo-plot .demo-plot__group{ margin-bottom:17px; }
.demo-plot .demo-plot__group-title{ margin:0 0 8px; color:var(--paper-dim); font:11px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.09em; }
.demo-plot .demo-plot__choices{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.demo-plot .demo-plot__choice{ display:flex; flex-direction:column; min-width:0; }
.demo-plot .demo-plot__control{ display:flex; align-items:center; justify-content:space-between; gap:7px; width:100%; min-height:44px; padding:8px 9px; border:1px solid var(--signal); background:var(--signal); color:var(--ink-on-sig); font:600 12px/1.2 var(--sans); text-align:left; cursor:pointer; }
.demo-plot .demo-plot__group--outcome .demo-plot__control{ border-color:var(--line); background:transparent; color:var(--paper); }
.demo-plot .demo-plot__control-points{ flex:none; font-family:var(--mono); }
.demo-plot .demo-plot__control:disabled{ border-color:var(--line); background:transparent; color:var(--paper-dim); cursor:not-allowed; opacity:.55; }
.demo-plot .demo-plot__reason{ min-height:27px; padding:4px 2px 0; color:var(--paper-dim); font:9px/1.25 var(--mono); }
.demo-plot .demo-plot__permit-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.demo-plot .demo-plot__permit-wrap{ display:flex; flex-direction:column; min-width:0; }
.demo-plot .demo-plot__permit{ position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:132px; padding:10px; border:1px solid var(--line); background:transparent; color:var(--paper); text-align:left; cursor:pointer; }
.demo-plot .demo-plot__permit-name{ font:600 13px/1.2 var(--sans); }
.demo-plot .demo-plot__permit-desc{ margin:7px 0 10px; color:var(--paper-dim); font-size:10px; line-height:1.35; }
.demo-plot .demo-plot__permit-price{ margin-top:auto; color:var(--signal-text); font:10px/1 var(--mono); text-transform:lowercase; }
.demo-plot .demo-plot__stamp{ position:absolute; right:7px; bottom:7px; padding:3px 5px; border:1px solid var(--stage-3); color:var(--paper); font:9px/1 var(--mono); text-transform:uppercase; transform:rotate(-5deg); }
.demo-plot .demo-plot__permit:disabled{ cursor:not-allowed; opacity:.48; }
.demo-plot .demo-plot__permit--granted:disabled{ border-color:var(--stage-3); opacity:1; }
.demo-plot .demo-plot__permit-reason{ min-height:18px; padding:4px 2px 0; color:var(--paper-dim); font:9px/1.25 var(--mono); }
.demo-plot .demo-plot__features{ margin:7px 0 0; color:var(--paper); font:11px/1.3 var(--mono); }
.demo-plot .demo-plot__log-wrap{ margin-top:auto; }
.demo-plot .demo-plot__log{ display:grid; grid-auto-rows:14px; align-content:start; gap:4px; height:86px; overflow:hidden; margin:0; padding:0; list-style:none; }
.demo-plot .demo-plot__log-item{ overflow:hidden; color:var(--paper-dim); font:10px/1.35 var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.demo-plot .demo-plot__log-item--empty{ font-style:italic; }
.demo-plot .demo-plot__footer{ display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:15px; padding-top:13px; border-top:1px solid var(--line-soft); }
.demo-plot .demo-plot__reset{ min-height:40px; padding:7px 12px; border:1px solid var(--line); background:transparent; color:var(--paper); font:600 12px/1 var(--sans); cursor:pointer; }
.demo-plot .demo-plot__live{ position:absolute; width:1px; height:1px; overflow:hidden; margin:-1px; padding:0; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:900px){
  .demo-plot .demo-plot__layout{ grid-template-columns:1fr; }
  .demo-plot .demo-plot__town{ min-height:420px; padding:8px; border-right:0; border-bottom:1px solid var(--line); }
  .demo-plot .demo-plot__panel{ padding:22px; }
}
@media (max-width:520px){
  .demo-plot .demo-plot__town{ min-height:300px; }
  .demo-plot .demo-plot__panel{ padding:18px 14px; }
  .demo-plot .demo-plot__track-label{ font-size:8px; }
  .demo-plot .demo-plot__choices,
  .demo-plot .demo-plot__permit-list{ grid-template-columns:1fr; }
  .demo-plot .demo-plot__control{ min-height:44px; }
  .demo-plot .demo-plot__reason{ min-height:0; padding-bottom:5px; }
  .demo-plot .demo-plot__permit{ min-height:112px; }
}
@media (prefers-reduced-motion:reduce){
  .demo-plot .demo-plot__stamp{ transform:none; }
}
.demo-plot .demo-plot__track-item--done .demo-plot__dot{ border-color:var(--signal); background:var(--signal-dim); }
.demo-plot .demo-plot__choices{ align-items:start; }
.demo-plot .demo-plot__control{ height:50px; min-height:50px; }
.demo-plot .demo-plot__head .demo-plot__reset{ flex:none; }
.demo-plot .demo-plot__slab-top{ fill:var(--ink-3); stroke:var(--paper-faint); stroke-width:1; }
.demo-plot .demo-plot__slab-front{ fill:var(--ink-2); stroke:var(--paper-faint); stroke-width:1; }
.demo-plot .demo-plot__slab-side{ fill:var(--ink-1); stroke:var(--paper-faint); stroke-width:1; }
.demo-plot .demo-plot__rig{ stroke-width:2.5; }