/* =========================================================================
   No Pin Code — interactive masterplan page (page-masterplan.php)
   Dark plan inside the site frame. Loaded only on /masterplan/.
   Plot data: Ananas plotting drawing. Units: metres.
   ========================================================================= */

.npc-mp{
  --ground:#0F1512; --sheet:#141C18; --plot:#1A241F; --plot-hi:#3A3222;
  --site:#22302A; --road:#3A3327; --vacant:#26382E;
  --ink:#E5EAE3; --text:#D6DDD5; --muted:#9AA79E; --faint:#6E7B72; --rule:#2E3A34;
  --line:#BCC8BF; --brass:#D0AF6B; --brass-hi:#E4C98E; --sage:#A9B89A; --tree:#7FA37A;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Adelle Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--ground); color:var(--text); font-family:var(--body); font-weight:300;
  color-scheme:dark;
  padding-inline:clamp(16px,3vw,40px); padding-block:clamp(28px,4vw,56px);
}
.npc-mp *,.npc-mp *::before,.npc-mp *::after{box-sizing:border-box}
.npc-mp__wrap{max-width:1500px;margin:0 auto;display:grid;gap:24px}

/* ---- plan drawing (SVG units are metres) ---- */
.npc-mp .plan{display:block;background:var(--sheet)}
.npc-mp .plan .site path{fill:var(--site);stroke:var(--line);stroke-width:.55;stroke-linejoin:round}
.npc-mp .plan .roads path{fill:var(--road);stroke:none}
.npc-mp .plan .vacant path{fill:var(--vacant);stroke:var(--line);stroke-width:.12;stroke-dasharray:.8 .5}
.npc-mp .plan .plot{fill:var(--plot);stroke:var(--line);stroke-width:.22;stroke-linejoin:round;transition:fill .18s;cursor:pointer}
.npc-mp .plan .plot:hover{fill:color-mix(in srgb,var(--plot-hi) 60%,var(--plot))}
.npc-mp .plan .plot.on{fill:var(--plot-hi);stroke:var(--brass);stroke-width:.7}
.npc-mp .plan.has-sel .plot:not(.on){fill-opacity:.55}
.npc-mp .plan .trees circle{fill:var(--tree);fill-opacity:.35;stroke:var(--tree);stroke-width:.18}
.npc-mp .plan .poles rect{fill:var(--sheet);stroke:var(--muted);stroke-width:.2}
.npc-mp .plan text{font-family:var(--body);fill:var(--muted)}
.npc-mp .plan .dims text{font-size:1.55px;text-anchor:middle;dominant-baseline:central;fill:var(--ink);font-weight:300;paint-order:stroke;stroke:var(--plot);stroke-width:.4px}
.npc-mp .plan .angles text{font-size:1.3px;text-anchor:middle;dominant-baseline:central;fill:var(--brass);paint-order:stroke;stroke:var(--plot);stroke-width:.45px}
.npc-mp .plan .rl text{font-size:1.45px;letter-spacing:.35px;text-anchor:middle;fill:var(--muted)}
.npc-mp .plan .rl text.s{font-size:1.15px;letter-spacing:0}
.npc-mp .plan .pl{pointer-events:none}
.npc-mp .plan .pl text{text-anchor:middle}
.npc-mp .plan .pl .lt{font-family:var(--display);font-weight:500;font-size:8.5px;fill:var(--ink)}
.npc-mp .plan .pl .la{font-size:1.75px;fill:var(--ink)}
.npc-mp .plan .pl .lf{font-size:1.45px;fill:var(--muted)}
.npc-mp .plan .pl.big .lt{font-size:14px}
.npc-mp .plan .pl.big .la{font-size:2.3px;transform:translateY(2.4px)}
.npc-mp .plan .pl.big .lf{font-size:1.9px;transform:translateY(3.2px)}
.npc-mp.hide-dims .plan .dims,.npc-mp.hide-angles .plan .angles,.npc-mp.hide-trees .plan .trees,.npc-mp.hide-trees .plan .poles{display:none}

/* ---- heading ---- */
.npc-mp__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px 32px;border-bottom:1px solid var(--rule);padding-bottom:20px}
.npc-mp__eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--sage);margin:0 0 10px}
.npc-mp h1.npc-mp__title{font-family:var(--display);font-weight:500;font-size:clamp(40px,6vw,80px);line-height:.98;margin:0;color:var(--ink);letter-spacing:.005em;text-wrap:balance}
.npc-mp__credit{margin:12px 0 0;font-size:15px;color:var(--muted);letter-spacing:.04em}
.npc-mp__credit b{font-family:var(--display);font-weight:600;font-size:1.15em;color:var(--ink);letter-spacing:.02em}
.npc-mp__facts{display:flex;gap:28px;flex-wrap:wrap;margin:0}
.npc-mp__facts div{display:grid;gap:4px}
.npc-mp__facts dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.npc-mp__facts dd{margin:0;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.npc-mp__main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}

/* ---- board ---- */
.npc-mp__board{background:var(--sheet);border:1px solid var(--rule);display:grid;grid-template-rows:auto 1fr;position:relative}
.npc-mp__bar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--rule)}
.npc-mp__group{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.npc-mp .chip{font:inherit;font-size:13px;letter-spacing:.04em;color:var(--muted);background:transparent;border:1px solid var(--rule);padding:6px 12px;border-radius:999px;cursor:pointer;min-height:34px;line-height:1.2}
.npc-mp .chip[aria-pressed="true"]{color:var(--ink);border-color:var(--brass);background:color-mix(in srgb,var(--brass) 12%,transparent)}
.npc-mp .chip.sq{width:36px;padding:0;font-size:16px}
.npc-mp .chip:hover{border-color:var(--brass)}
.npc-mp .chip:focus-visible,.npc-mp__stage:focus-visible,.npc-mp__card button:focus-visible,.npc-mp__design:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.npc-mp__zl{font-size:12px;color:var(--muted);min-width:44px;text-align:center}

.npc-mp__stage{position:relative;height:clamp(420px,calc(100svh - 170px),900px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.npc-mp__stage.zoomed{touch-action:none}
.npc-mp__stage.drag{cursor:grabbing}
.npc-mp__stage svg.plan{position:absolute;inset:0;width:100%;height:100%;max-width:none}

.npc-mp__compass{position:absolute;top:14px;right:14px;width:58px;height:58px;pointer-events:none}
.npc-mp__compass circle{fill:color-mix(in srgb,var(--sheet) 88%,transparent);stroke:var(--brass);stroke-width:1}
.npc-mp__compass .nd{fill:var(--ink)} .npc-mp__compass .nl{fill:var(--brass)}
.npc-mp__compass text{font-family:var(--display);font-size:13px;fill:var(--ink);text-anchor:middle}
.npc-mp__scale{position:absolute;right:14px;bottom:14px;display:grid;gap:4px;justify-items:start;padding:8px 10px;background:color-mix(in srgb,var(--sheet) 88%,transparent);pointer-events:none}
.npc-mp__scale .bars{display:flex;height:6px;border:1px solid var(--ink)}
.npc-mp__scale .bars i{display:block;height:100%;flex:1}
.npc-mp__scale .bars i:nth-child(odd){background:var(--ink)}
.npc-mp__scale .lab{display:flex;justify-content:space-between;width:100%;font-size:11px;color:var(--muted)}
.npc-mp__toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--ink);color:var(--sheet);font-size:13px;padding:7px 14px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.npc-mp__toast.show{opacity:.92}

/* ---- selected plot ---- */
.npc-mp__card{position:absolute;left:14px;bottom:14px;width:min(300px,calc(100% - 28px));background:var(--sheet);border:1px solid var(--brass);box-shadow:0 18px 44px -16px rgba(0,0,0,.7);padding:16px 18px;display:grid;gap:12px;transform:translateY(8px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;color:var(--text)}
.npc-mp__card.open{opacity:1;transform:none;pointer-events:auto}
.npc-mp__card .empty{display:none;margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.npc-mp__card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.npc-mp__card .tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage);margin:0}
.npc-mp__card .big{font-family:var(--display);font-weight:500;font-size:68px;line-height:.9;margin:4px 0 0;color:var(--ink)}
.npc-mp__card .x{font:inherit;font-size:20px;line-height:1;background:transparent;border:1px solid var(--rule);color:var(--muted);width:34px;height:34px;border-radius:50%;cursor:pointer;flex:none}
.npc-mp__card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-variant-numeric:tabular-nums}
.npc-mp__card dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-self:center}
.npc-mp__card dd{margin:0;font-size:16px;text-align:right;color:var(--ink)}
.npc-mp__card dd.lead{font-size:22px}
.npc-mp__card .acts{display:flex;gap:8px;flex-wrap:wrap}
.npc-mp__card .acts button{font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--brass);background:transparent;color:var(--ink);cursor:pointer;line-height:1.2}
.npc-mp__card .acts button:hover{border-color:var(--brass-hi)}
.npc-mp__card .acts button.pri{background:var(--brass);color:#141C18}
.npc-mp__card .acts button.pri:hover{background:var(--brass-hi)}
.npc-mp__card .dz{display:flex;gap:8px;flex-wrap:wrap}
.npc-mp__card .dz:empty{display:none}
.npc-mp__card .dz button{font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;border:1px dashed var(--brass);background:transparent;color:var(--brass);cursor:pointer;line-height:1.2}

/* ---- aside ---- */
.npc-mp__aside{display:grid;gap:20px}
.npc-mp__panel{background:var(--sheet);border:1px solid var(--rule);padding:18px 20px}
.npc-mp h2.npc-mp__h2{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.2;margin:0 0 4px;color:var(--ink)}
.npc-mp__sub{margin:0 0 10px;font-size:13px;color:var(--muted)}
.npc-mp__sched{max-height:clamp(320px,calc(100svh - 380px),620px);overflow:auto}
.npc-mp table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:0}
.npc-mp thead th{position:sticky;top:0;background:var(--sheet);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:300;text-align:right;padding:6px 4px;border-bottom:1px solid var(--rule)}
.npc-mp thead th:first-child,.npc-mp tbody th{text-align:left}
.npc-mp tbody th{font-family:var(--display);font-weight:500;font-size:20px;padding:5px 4px;color:var(--ink)}
.npc-mp tbody td{font-size:14px;text-align:right;padding:5px 4px;color:var(--text)}
.npc-mp tbody tr{border-bottom:1px solid color-mix(in srgb,var(--rule) 70%,transparent);cursor:pointer}
.npc-mp tbody tr:hover{background:color-mix(in srgb,var(--brass) 7%,transparent)}
.npc-mp tbody tr.on{background:color-mix(in srgb,var(--brass) 18%,transparent)}
.npc-mp tbody tr:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.npc-mp tbody tr.tot{cursor:default;border-top:1px solid var(--line)}
.npc-mp tbody tr.tot:hover{background:none}
.npc-mp tbody tr.tot th{font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:300}
.npc-mp__legend{display:grid;gap:9px;font-size:13px;color:var(--muted);margin:0;padding:0;list-style:none}
.npc-mp__legend li{display:flex;gap:10px;align-items:center}
.npc-mp__legend .sw{width:22px;height:12px;border:1px solid var(--line);flex:none;display:grid;place-items:center}
.npc-mp__legend .sw svg{display:block}

/* ---- farm-space designs ---- */
.npc-mp__designs{display:grid;gap:14px;padding-top:12px}
.npc-mp__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.npc-mp__design{display:grid;gap:10px;background:var(--sheet);border:1px solid var(--rule);padding:10px;cursor:zoom-in;text-align:left;font:inherit;color:inherit;width:100%}
.npc-mp__design:hover{border-color:var(--brass)}
.npc-mp__design img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;display:block}
.npc-mp__design .t{font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink);line-height:1.25}
.npc-mp__design .c{font-size:12px;color:var(--muted);letter-spacing:.04em}
.npc-mp__design.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.npc-mp__notes{font-size:13px;line-height:1.6;color:var(--muted);max-width:75ch;margin:0}
.npc-mp__notes b{color:var(--ink);font-weight:300}
.npc-mp__back{color:var(--brass);font-size:14px;letter-spacing:.04em}
.npc-mp__back:hover{color:var(--brass-hi)}

@media (max-width:980px){
  .npc-mp__main{grid-template-columns:1fr} .npc-mp__head{grid-template-columns:1fr}
  .npc-mp__stage{height:clamp(320px,56svh,640px)}
  .npc-mp__sched{max-height:none}
  .npc-mp__card{position:static;width:auto;opacity:1;transform:none;pointer-events:auto;box-shadow:none;border:0;border-top:1px solid var(--rule);background:color-mix(in srgb,var(--brass) 6%,var(--sheet));padding:14px 16px;gap:10px}
  .npc-mp__card:not(.open) > :not(.empty){display:none}
  .npc-mp__card:not(.open) .empty{display:block}
  .npc-mp__card.open{border-top:2px solid var(--brass)}
  .npc-mp__card .tag{display:none}
  .npc-mp__card .top{align-items:center}
  .npc-mp__card .big{font-size:48px;margin:0}
  .npc-mp__card dl{grid-template-columns:auto 1fr auto 1fr;gap:4px 12px}
  .npc-mp__card dd{font-size:15px} .npc-mp__card dd.lead{font-size:16px}
}
@media (max-width:560px){
  .npc-mp__stage{height:auto;aspect-ratio:346/340;max-height:64svh}
  .npc-mp__compass{width:44px;height:44px;top:8px;right:8px}
  .npc-mp__scale{right:8px;bottom:8px;padding:4px 6px;gap:2px}
  .npc-mp__scale .lab{font-size:10px}
  .npc-mp__card dl{grid-template-columns:auto 1fr}
  .npc-mp__card .acts{display:grid;grid-template-columns:1.4fr 1fr 1fr}
  .npc-mp__card .acts button{padding:8px 6px}
  .npc-mp__grid{grid-template-columns:1fr 1fr;gap:10px}
  .npc-mp__design .t{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.npc-mp .plan .plot,.npc-mp__card,.npc-mp__toast{transition:none}}