/* Acquisition platform — house palette, inherited from the v2 map so this reads as the same system. */
:root{
  --paper:#faf8f4; --card:#fff; --ink:#22242a; --ink2:#4c515c; --muted:#8a8f9a;
  --line:#e6e2d9; --line2:#f0ede6;
  --accent:#2f6d63; --accent-soft:#e6efec;
  --gold:#b8862c; --gold-soft:#f7efdd;
  --home:#b4472e; --home-soft:#fbeae5;
  --route:#2b5f8a; --route-soft:#e4eef6;
  --fig:#7a4b8c; --fig-soft:#f1e9f5;
  --shadow:0 1px 2px rgba(34,36,42,.10), 0 4px 14px rgba(34,36,42,.07);
  --shadow-lg:0 2px 6px rgba(34,36,42,.10), 0 18px 44px rgba(34,36,42,.14);
  --r:10px;
}
*{box-sizing:border-box}
html,body{overscroll-behavior-x:none}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit}
.wrap{max-width:1500px;margin:0 auto;padding:0 20px}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(250,248,244,.93);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;gap:14px;align-items:center;min-height:56px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:-.01em;text-decoration:none;font-size:1rem;white-space:nowrap}
.brand span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;padding:7px 12px;border-radius:999px;font-size:.85rem;font-weight:550;color:var(--ink2)}
.nav a:hover{background:var(--line2)}
.nav a[aria-current]{background:var(--accent);color:#fff}
h1{margin:0;font-size:1.45rem;letter-spacing:-.015em;font-weight:650}
h2{margin:0 0 12px;font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
.sub{margin:5px 0 0;color:var(--muted);font-size:.86rem}
header.hd{padding:24px 0 0}

/* ---------- controls ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:16px 0 0}
.pill{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink2);
  padding:9px 15px;border-radius:999px;font:inherit;font-size:.85rem;font-weight:550;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow);
  transition:background .14s,color .14s,border-color .14s;text-decoration:none}
.pill b{font-weight:650;font-variant-numeric:tabular-nums;opacity:.6}
.pill:hover{border-color:#d3cec2}
.pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.active b{opacity:.75}
.pill.ghost{box-shadow:none;background:transparent}
.pill:disabled{opacity:.45;cursor:default}
input[type=text],input[type=search],input[type=url],input[type=password],input[type=number],select,textarea{
  font:inherit;padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  color:var(--ink);width:100%;box-shadow:var(--shadow)}
textarea{resize:vertical;min-height:64px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
label.fl{display:block;font-size:.76rem;font-weight:650;color:var(--ink2);margin:0 0 5px;text-transform:uppercase;letter-spacing:.04em}

/* ---------- cards / gallery ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px;margin:20px 0 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .13s,box-shadow .13s,border-color .13s;position:relative}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#d3cec2}
.card .ph{aspect-ratio:4/3;background:var(--line2) center/cover no-repeat;display:block;position:relative}
.card .ph.none{display:grid;place-items:center;color:var(--muted);font-size:.72rem;text-align:center;padding:12px}
.card .bd{padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .t{font-size:.85rem;font-weight:600;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .m{font-size:.74rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;align-items:center}
.card .pr{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.card.sold .ph{filter:grayscale(1) contrast(.85);opacity:.5}
.card.sold::after{content:"SOLD";position:absolute;top:10px;left:10px;background:var(--home);color:#fff;
  font-size:.65rem;font-weight:800;letter-spacing:.09em;padding:4px 8px;border-radius:5px;box-shadow:var(--shadow)}
.card.sel{border-color:var(--route);box-shadow:0 0 0 2px var(--route),var(--shadow)}
.sel-dot{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);
  border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem;font-weight:800;color:var(--muted);z-index:2;cursor:pointer}
.card.sel .sel-dot{background:var(--route);color:#fff;border-color:var(--route)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  padding:3px 8px;border-radius:5px;background:var(--line2);color:var(--ink2);text-transform:uppercase;white-space:nowrap}
.chip.prop-pes{background:var(--accent-soft);color:#1f4f47}
.chip.prop-fig{background:var(--fig-soft);color:var(--fig)}
.chip.prop-atw{background:var(--route-soft);color:var(--route)}
.chip.ref{background:var(--gold-soft);color:#7a5a12}
.chip.zone{background:var(--accent-soft);color:#1f4f47;font-variant-numeric:tabular-nums;text-transform:none}
.chip.warn{background:var(--home-soft);color:var(--home)}
.stars{color:var(--gold);font-size:.8rem;letter-spacing:1px;white-space:nowrap}
.stars .off{color:#dcd7cc}

/* ---------- layout ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start;margin:22px 0 40px}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.panel + .panel{margin-top:16px}
.note{font-size:.8rem;color:var(--muted);line-height:1.55}
.note b{color:var(--ink2);font-weight:600}
.banner{border-left:3px solid var(--gold);background:var(--gold-soft);padding:11px 14px;border-radius:0 8px 8px 0;
  font-size:.82rem;line-height:1.55;color:#5c451a;margin:14px 0}
.banner.bad{border-color:var(--home);background:var(--home-soft);color:#7a2d19}
.banner.ok{border-color:var(--accent);background:var(--accent-soft);color:#1f4f47}

/* ---------- board ---------- */
.post{border-bottom:1px solid var(--line2);padding:13px 0;display:flex;gap:11px}
.post:last-child{border-bottom:0}
.post .av{flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent-soft);color:#1f4f47;
  display:grid;place-items:center;font-size:.68rem;font-weight:800;text-transform:uppercase}
.post .av.auto{background:var(--line2);color:var(--muted)}
.post .bdy{flex:1;min-width:0}
.post .who{font-size:.74rem;color:var(--muted);margin-bottom:3px}
.post .who b{color:var(--ink2);font-weight:650;text-transform:capitalize}
.post .txt{font-size:.87rem;line-height:1.5}
.post img.ph{margin-top:8px;max-width:220px;width:100%;border-radius:8px;border:1px solid var(--line);display:block}
.post.done{opacity:.55}
.claim{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.claim .pill{padding:5px 11px;font-size:.76rem}

/* ---------- blueprint picker ---------- */
.bp{position:relative;background:#fbfaf7;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  touch-action:none}
/* The lodge plan is 287x413 units and stacks two floors, so at column width it renders 1100px tall
   and swallows the page. Fix the frame, let the SVG letterbox into it, and let pan/zoom do the work. */
.bp svg{display:block;width:100%;height:100%}
/* NO vector-effect here. Every heavy path in the bones carries its own matrix(0.054…) transform;
   non-scaling-stroke discards that scaling and renders stroke-width 15 as 15 screen pixels — the
   whole plan turns into a blob. Only the zone polygons get non-scaling-stroke, as the Atlas's own
   REVIEW.html does. */
.bp .bones{stroke:#3d4048;opacity:.85}
.bp .bones path{}
.bp .zones polygon{fill:rgba(47,109,99,.07);stroke:rgba(47,109,99,.34);stroke-width:1.1;
  vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .12s}
.bp .zones polygon:hover{fill:rgba(47,109,99,.2)}
.bp .zones polygon.on{fill:rgba(184,134,44,.4);stroke:var(--gold);stroke-width:1.8}
.bp .zones polygon.dim{fill:rgba(0,0,0,.02);stroke:rgba(0,0,0,.09);cursor:default}
.bp .zones polygon.has{fill:rgba(43,95,138,.14);stroke:rgba(43,95,138,.4)}
.bplab{position:absolute;pointer-events:none;background:rgba(34,36,42,.92);color:#fff;font-size:.72rem;
  padding:5px 9px;border-radius:6px;transform:translate(-50%,-135%);white-space:nowrap;z-index:3;box-shadow:var(--shadow)}
.viewtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.viewtabs .pill{padding:6px 12px;font-size:.79rem}
.listcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px}
.lc{border:1px dashed var(--line);border-radius:8px;padding:9px 11px;background:#fdfcfa;cursor:pointer;text-align:left;font:inherit}
.lc:hover{border-color:var(--accent);background:var(--accent-soft)}
.lc.on{border:1.5px solid var(--gold);background:var(--gold-soft)}
.lc .n{font-size:.7rem;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.lc .l{font-size:.82rem;font-weight:600;margin-top:2px}
.lc .r{font-size:.68rem;color:var(--muted);margin-top:4px;line-height:1.4}
.picked{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pz{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 9px 9px 0;padding:11px 13px;background:#fffdf8}
.pz .hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pz .hd .num{font-size:.72rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.pz .hd .lab{font-weight:650;font-size:.88rem}
.pz .hd .st{font-size:.72rem;color:var(--muted);margin-left:auto}
.pz textarea{margin-top:8px;font-size:.85rem}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:2px 4px}
.x:hover{color:var(--home)}

.rows{display:flex;flex-direction:column;gap:2px}
.row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);font-size:.85rem}
.row:last-child{border-bottom:0}
.row .g{color:var(--muted);font-size:.76rem;margin-left:auto;white-space:nowrap}
.empty{color:var(--muted);font-size:.85rem;padding:22px 0;text-align:center}
.foot{color:var(--muted);font-size:.76rem;line-height:1.6;padding:26px 0 40px;border-top:1px solid var(--line);margin-top:20px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:999px;font-size:.85rem;box-shadow:var(--shadow-lg);z-index:99;
  opacity:0;pointer-events:none;transition:opacity .18s}
.toast.on{opacity:1}
.bar{position:sticky;bottom:0;z-index:30;background:rgba(250,248,244,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:11px 0;margin-top:auto}
.bar .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* On a phone the photos come first. The paste box and the filter rack are collapsed behind one
   pill each, because a full screen of form controls before the first thumbnail is the exact
   inversion of the settled interface principle. */
.mtoggle{display:none}
@media(max-width:640px){
  .wrap{padding:0 14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  h1{font-size:1.2rem}
  header.hd{padding:16px 0 0}
  .mtoggle{display:inline-flex}
  .collapsible{display:none}
  .collapsible.open{display:block}
  .toolbar.collapsible.open{display:flex}
  #filters select,#filters input{width:100%}
  .toolbar{gap:8px}
}
@media print{
  .topbar,.toolbar,.bar,.nav,.x{display:none!important}
  body{background:#fff}
  .card,.panel{box-shadow:none;break-inside:avoid}
}
