/* Samara Master Data — light mode only, reference design language.
   Samara green sidebar #324720/#3C5427 · gold accent #D4A648 · logo #1f8a3b
   Cormorant Garamond brand · Arial body · hairline borders · 14px cards. */
:root{
  --bg:#ffffff; --card:#ffffff; --hair:#e6e6e6; --hair-soft:#f4f4f4;
  --ink:#0d0d0d; --ink-2:#39393f; --ink-3:#5f5f66;
  --logo:#1f8a3b; --gold:#D4A648; --gold-soft:#f4f4f4;
  --side:#324720; --side-2:#3C5427; --side-ink:#DCE5CF; --side-ink-2:#A6B592;
  --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(0,0,0,.04);
  --sans:Arial,Helvetica,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --mono:"Cascadia Mono","Consolas","SF Mono",ui-monospace,"Courier New",monospace;
  --st-green:#1f8a3b; --st-green-bg:#eaf5ee; --st-red:#c0392b; --st-red-bg:#fbebe8;
  --st-amber:#9a6b00; --st-amber-bg:#fbf1db; --st-blue:#2b6cb0; --st-blue-bg:#e9f1fb;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em}
a{color:inherit}
button{font:inherit;cursor:pointer}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono)}
.hidden{display:none!important}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* splash */
.splash{position:fixed;inset:0;z-index:2000;background:var(--bg);display:grid;place-items:center;animation:splashOut 1.9s forwards}
@keyframes splashOut{0%,68%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
.splash .word{font-family:var(--serif);font-size:46px;font-weight:500;color:var(--logo);opacity:0;letter-spacing:14px;transform:translateY(6px);animation:wordIn 1s cubic-bezier(.22,.61,.36,1) .1s forwards}
@keyframes wordIn{to{opacity:1;letter-spacing:9px;transform:none}}
.splash .rule{height:1px;width:0;background:var(--logo);margin:12px auto 10px;animation:ruleIn .7s cubic-bezier(.22,.61,.36,1) .55s forwards}
@keyframes ruleIn{to{width:56px}}
.splash .sub{font-size:12px;letter-spacing:7px;color:var(--ink-2);opacity:0;animation:subIn .7s ease .75s forwards;text-align:center}
@keyframes subIn{to{opacity:1}}
.splash .load{width:120px;height:2px;background:var(--hair);border-radius:2px;margin:28px auto 0;overflow:hidden}
.splash .load>i{display:block;height:100%;width:38%;background:var(--logo);border-radius:2px;animation:loadSlide 1.05s ease-in-out .3s infinite}
@keyframes loadSlide{0%{transform:translateX(-130%)}100%{transform:translateX(360%)}}
.splash .mark{text-align:center}

/* shell — full-bleed, scaled up so the app fills the window edge to edge */
.app{display:grid;grid-template-columns:272px 1fr;min-height:100vh;zoom:1.16}
.sidebar{background:var(--side);color:#E7ECDD;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 20px 22px;border-bottom:1px solid rgba(255,255,255,.12)}
.side-brand .wm{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:8px;color:#fff;line-height:1}
.side-brand .wr{height:1px;width:44px;background:var(--gold)}
.brand-sub{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#C3D0B4}
.brand-url{margin-top:5px;font-size:10px;letter-spacing:.02em;color:#9DAA8B;text-decoration:none;transition:color .14s ease}
.brand-url:hover{color:var(--gold)}
.nav{overflow-y:auto;flex:1;padding-top:6px}
.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#A6B592;padding:16px 22px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 18px;margin:1px 12px;border-radius:9px;color:#DCE5CF;text-decoration:none;font-size:14px;font-weight:500}
.nav a .ic{opacity:.72;width:18px;height:18px;flex:none}
.nav a:hover{background:var(--side-2);color:#fff}.nav a:hover .ic{opacity:1}
.nav a.active{background:var(--side-2);color:#fff;font-weight:700}
.nav a.active .ic{opacity:1;color:var(--gold)}
.nav .badge{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.14);color:#fff;padding:1px 8px;border-radius:99px;font-family:var(--mono)}
.side-foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#9DAA8B}
.side-foot .row{display:flex;align-items:center;gap:8px}
.side-foot .cl{margin-top:5px;padding-left:16px;color:#8A9A76}
.pulse{width:8px;height:8px;border-radius:50%;background:#8ad6a4;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(138,214,164,.4)}70%{box-shadow:0 0 0 7px rgba(138,214,164,0)}100%{box-shadow:0 0 0 0 rgba(138,214,164,0)}}

.main{padding:22px 30px 48px;min-width:0}
/* topline — Spotify-style: Home button + centered search pill, controls right */
.topline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:14px}
.topbar-center{grid-column:2;display:flex;align-items:center;gap:12px;justify-self:center}
.topbar-right{grid-column:3;display:flex;align-items:center;gap:10px;justify-self:end}
.home-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:var(--card);color:var(--ink-2);display:grid;place-items:center;transition:transform .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease}
.home-btn svg{width:20px;height:20px}
.home-btn:hover{color:var(--ink);border-color:var(--ink-3);transform:scale(1.06)}
.home-btn:active{transform:scale(.96)}
.home-btn:focus-visible{outline:none;border-color:var(--logo);box-shadow:0 0 0 4px rgba(31,138,59,.16)}
.icon-btn{border:1px solid var(--hair);background:var(--card);color:var(--ink-2);width:36px;height:36px;border-radius:9px;display:grid;place-items:center}
.icon-btn:hover{color:var(--ink)}.icon-btn svg{width:18px;height:18px}
.proto{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-amber);background:var(--st-amber-bg);padding:6px 12px;border-radius:99px;white-space:nowrap}
.role-sel{padding:8px 12px;border:1px solid var(--hair);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;outline:none}
.role-sel:focus{border-color:var(--ink)}
/* signed-in user chip + logout (read-only; role comes from the session) */
.user-chip{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;border:1px solid var(--hair);border-radius:99px;background:var(--card);max-width:280px}
.user-chip[hidden]{display:none}
.uc-email{font-size:13px;color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.uc-role{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--logo);background:var(--st-green-bg);padding:3px 9px;border-radius:99px;white-space:nowrap;flex:none}
.uc-role:empty{display:none}
.uc-logout{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--hair);border-radius:9px;background:var(--card);color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none;transition:color .14s ease,border-color .14s ease}
.uc-logout:hover{color:var(--st-red);border-color:var(--st-red)}
.uc-logout svg{width:16px;height:16px}

/* global search */
.gsearch{position:relative;width:min(460px,44vw)}
.gsearch .gs-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-3);pointer-events:none;transition:color .14s ease}
.gsearch input{width:100%;height:46px;padding:0 46px 0 44px;border:2px solid transparent;border-radius:999px;background:var(--hair-soft);color:var(--ink);font:inherit;font-size:14px;outline:none;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.gsearch input::placeholder{color:var(--ink-3)}
.gsearch:hover input{background:#eeeeee}
/* focus button — the pill lifts to white with a green accent ring */
.gsearch input:focus{background:var(--card);border-color:var(--logo);box-shadow:0 0 0 4px rgba(31,138,59,.15)}
.gsearch input:focus~.gs-ico,.gsearch:focus-within .gs-ico{color:var(--logo)}
/* clear (×) — appears only when there is text */
.gs-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--ink-3);display:none;place-items:center;transition:color .12s ease,background .12s ease}
.gs-clear svg{width:16px;height:16px}
.gs-clear:hover{color:var(--ink);background:var(--hair)}
.gsearch input:not(:placeholder-shown)~.gs-clear{display:grid}
.gdrop{position:absolute;top:52px;left:0;right:0;background:var(--card);border:1px solid var(--hair);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.25);overflow:hidden;z-index:60;max-height:340px;overflow-y:auto}
.gdrop .gd-l{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:8px 14px 2px}
.gdrop .gd-date{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12px;font-weight:700;color:var(--logo);background:var(--st-green-bg);border-bottom:1px solid var(--hair)}
.gdrop .gd-date .gd-cal{font-size:13px}
.gdrop .gd-date .gd-m{margin-left:auto;font-weight:600}
.gdrop mark{background:rgba(212,166,72,.28);color:inherit;border-radius:3px;padding:0 1px}
.gdrop button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 14px;font-size:13.5px;background:none;text-align:left;border:none}
.gdrop button:hover{background:var(--hair-soft)}
.gdrop .gd-m{font-size:11.5px;color:var(--ink-3)}
.gdrop .gd-none{padding:12px 14px;font-size:13px;color:var(--ink-3)}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:4px 0 20px}
.page-head h1{font-size:23px;font-weight:700}
.page-head p{margin:5px 0 0;font-size:14.5px;color:var(--ink-2);max-width:64ch}
.synced{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);background:var(--card);border:1px solid var(--hair);padding:7px 13px;border-radius:999px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-sm);padding:16px 17px}
.stat .k{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.stat .k .tag{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.stat.ok .k .tag{background:var(--st-green)}.stat.warn .k .tag{background:var(--st-amber)}.stat.blue .k .tag{background:var(--st-blue)}.stat.gold .k .tag{background:var(--gold)}.stat.red .k .tag{background:var(--st-red)}
.stat .v{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:10px;font-family:var(--mono)}
.stat .s{font-size:12.5px;color:var(--ink-3);margin-top:4px}

.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.grid2eq{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.panel{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}
.panel-head{margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.panel-head h3{font-size:15.5px;font-weight:700}
.panel-head p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}

/* action cards (home) */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.act{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:18px;cursor:pointer;transition:border-color .15s,transform .08s;text-align:left}
.act:hover{border-color:var(--side);transform:translateY(-1px)}
.act .aic{width:34px;height:34px;border-radius:9px;background:var(--gold-soft);border:1px solid var(--hair);display:grid;place-items:center;color:var(--side)}
.act .aic svg{width:18px;height:18px}
.act b{display:block;margin-top:12px;font-size:15px;font-weight:700}
.act p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}

/* pipeline */
.pipe{display:flex;flex-direction:column;gap:2px}
.pipe .step{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--hair-soft)}
.pipe .step:last-child{border-bottom:0}
.pipe .dot{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--hair-soft);color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:700}
.pipe .step.on .dot{background:var(--st-green-bg);color:var(--st-green)}
.pipe .lbl{font-size:14px;font-weight:600}.pipe .sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.pipe .val{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:16px}
.track{height:8px;border-radius:999px;background:var(--hair-soft);overflow:hidden;margin-top:14px}
.track>span{display:block;height:100%;border-radius:999px;background:var(--st-green)}

/* gates */
.gate{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;border-bottom:1px solid var(--hair-soft);font-size:13.5px}
.gate:last-child{border-bottom:0}
.gate .gi{width:18px;height:18px;flex:none;margin-top:1px}
.gate .gt{flex:1}.gate .gt .gs{font-size:12px;color:var(--ink-3);margin-top:2px}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;border:1px solid var(--hair)}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--st-green-bg);color:var(--st-green);border-color:transparent}
.pill.warn{background:var(--st-amber-bg);color:var(--st-amber);border-color:transparent}
.pill.bad{background:var(--st-red-bg);color:var(--st-red);border-color:transparent}
.pill.wait{background:var(--st-blue-bg);color:var(--st-blue);border-color:transparent}
.pill.neu{background:var(--hair-soft);color:var(--ink-2);border-color:transparent}

/* task rows */
.trow{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--hair-soft)}
.trow:last-child{border-bottom:0}
.trow .tt{flex:1;min-width:0}
.trow .tt b{font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tt span{font-size:12px;color:var(--ink-3)}
.mini-btn{font-size:12px;font-weight:700;padding:6px 11px;border-radius:8px;border:1px solid var(--hair);background:var(--card);color:var(--ink-2)}
.mini-btn:hover{border-color:var(--ink);color:var(--ink)}
.mini-btn.solid{background:var(--side);color:#fff;border-color:var(--side)}
.mini-btn.solid:hover{opacity:.9}

/* wizard stage bar */
.stages{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:20px}
.stage-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;border:1px solid var(--hair);background:var(--card);color:var(--ink-3)}
.stage-pill .sn{font-family:var(--mono);font-size:11px}
.stage-pill.done{background:var(--st-green-bg);color:var(--st-green);border-color:transparent}
.stage-pill.cur{background:var(--side);color:#fff;border-color:var(--side)}
.stage-pill:not(.cur):not(.done){cursor:default}
.stage-sep{color:var(--hair);font-size:12px}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin-bottom:18px;flex-wrap:wrap}
.tabs button{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.cur{color:var(--ink);border-bottom-color:var(--side)}
.tabs button:hover{color:var(--ink)}

/* forms */
.f{margin-bottom:14px}
.f>label{display:block;font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;padding:11px 13px;border:1.5px solid var(--hair);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;outline:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink)}
.f input:disabled,.f select:disabled{background:var(--hair-soft);color:var(--ink-3)}
.f .fh{font-size:12px;color:var(--ink-3);margin-top:5px}
.f .fe{font-size:12.5px;color:var(--st-red);margin-top:5px;font-weight:600}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.radio-row{display:flex;gap:16px;align-items:center;padding:4px 0}
.radio-row label{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;cursor:pointer}
.radio-row input{accent-color:var(--side);width:15px;height:15px}
.chk{display:flex;align-items:center;gap:12px;border:1px solid var(--hair);border-radius:10px;padding:12px 14px;margin-bottom:9px;cursor:pointer}
.chk:hover{border-color:var(--ink-3)}
.chk input{width:16px;height:16px;accent-color:var(--logo);flex:none}
.chk .ck-t{flex:1;font-size:14px;font-weight:600}
.chk .ck-k{font-size:11.5px;color:var(--ink-3)}

/* diff table */
.diff{width:100%;border-collapse:collapse;font-size:13.5px}
.diff th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 10px 8px;border-bottom:1px solid var(--hair)}
.diff td{padding:10px;border-bottom:1px solid var(--hair-soft);vertical-align:top}
.diff tr:last-child td{border-bottom:0}
.diff .df-f{font-weight:700;white-space:nowrap}
.diff .df-old{color:var(--st-red);word-break:break-word}
.diff .df-new{color:var(--st-green);font-weight:600;word-break:break-word}
.diff .df-arr{color:var(--ink-3);font-family:var(--mono)}

/* AI panel */
.aip{border:1px solid var(--hair);border-radius:var(--radius);padding:16px 18px;background:linear-gradient(180deg,#fcfcf8,#ffffff)}
.aip-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.aip-head .ttl{font-size:13px;font-weight:700}
.aip-conf{font-family:var(--mono);font-size:21px;font-weight:700;margin-left:auto}
.aip-sub{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.aip ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2)}
.aip li{margin:2px 0}
.aip .conflict{color:var(--st-red)}
.aip .vers{font-size:11px;color:var(--ink-3);margin-top:10px;font-family:var(--mono)}

/* compare (merge review) */
.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-bottom:16px}
.cmp-card{border:1px solid var(--hair);border-radius:var(--radius);padding:16px 18px;background:var(--card)}
.cmp-card .cs{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cmp-card h4{font-size:17px;margin:5px 0 2px}
.cmp-card .cid{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.cmp-kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--hair-soft)}
.cmp-kv:last-child{border-bottom:0}
.cmp-kv .k{color:var(--ink-3)}
.cmp-kv .v{font-weight:600;text-align:right;word-break:break-word}
.cmp-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.scoreball{width:76px;height:76px;border-radius:50%;border:1.5px solid var(--hair);background:var(--card);display:grid;place-items:center;text-align:center}
.scoreball .sv{font-family:var(--mono);font-size:23px;font-weight:700;line-height:1}
.scoreball .sl{font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

/* queue (review) */
.qbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chipf{font-size:13px;font-weight:600;padding:7px 13px;border:1px solid var(--hair);border-radius:999px;color:var(--ink-2);background:var(--card)}
.chipf.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chipf .c{font-family:var(--mono);opacity:.7;margin-left:4px}
.qsearch{position:relative;display:flex;align-items:center;margin-bottom:12px}
.qsearch svg{position:absolute;left:14px;width:17px;height:17px;color:var(--ink-3);pointer-events:none}
.qsearch input{width:100%;padding:12px 16px 12px 42px;border:1.5px solid var(--hair);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;outline:none}
.qsearch input:focus{border-color:var(--ink)}
.qlist{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.qrow{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:13px;align-items:center;padding:13px 18px;border-top:1px solid var(--hair-soft);cursor:pointer;transition:background .12s}
.qrow:first-child{border-top:0}
.qrow:hover{background:var(--hair-soft)}
.qav{width:38px;height:38px;border-radius:9px;background:var(--gold-soft);border:1px solid var(--hair);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--ink)}
.qav.co{background:var(--st-green-bg);color:var(--st-green);border-color:transparent}
.qname{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qmeta{font-size:12.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qvillas{display:flex;gap:5px}
.qchip{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink);background:var(--gold-soft);border:1px solid var(--hair);border-radius:6px;padding:2px 7px;white-space:nowrap}
.qmore{font-size:11px;color:var(--ink-3);align-self:center}
.qempty{padding:40px;text-align:center;color:var(--ink-3);font-size:14px}
.list-foot{margin-top:12px;font-size:12.5px;color:var(--ink-3);display:flex;justify-content:space-between}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(13,13,13,.42);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;z-index:100;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.vcard{width:100%;max-width:560px;background:var(--card);border:1px solid var(--hair);border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.4);padding:24px;animation:pop .24s cubic-bezier(.2,.7,.3,1);max-height:92vh;overflow:auto}
.vcard.wide{max-width:760px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.vhead{display:flex;align-items:center;gap:14px}
.vav{width:50px;height:50px;border-radius:13px;background:var(--gold-soft);border:1px solid var(--hair);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.vav.co{background:var(--st-green-bg);color:var(--st-green);border-color:transparent}
.vname{font-size:19px;font-weight:700}
.vkind{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.vclose{margin-left:auto;color:var(--ink-3);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;border:none;background:none}
.vclose:hover{background:var(--hair-soft);color:var(--ink)}
.vq{margin:18px 0 3px;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.vqsub{color:var(--ink-3);font-size:13px;margin:0}
.vfield{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--hair);border-radius:10px;margin-top:9px;background:var(--card)}
.vfield .fi{color:var(--ink-3);flex:none}
.vfield .fl{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.vfield .fv{font-size:14px;font-weight:600;word-break:break-word}
.vfield input{width:100%;font:inherit;font-size:14px;font-weight:600;border:none;background:transparent;color:var(--ink);padding:0;outline:none}
.vfield .fx{margin-left:auto;font-size:12.5px;color:var(--st-blue);font-weight:700;flex:none;border:none;background:none}
.vfield.editing{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.vplots{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.vnote{display:flex;gap:10px;padding:12px 13px;border-radius:10px;background:var(--st-amber-bg);margin-top:14px;font-size:13px;color:var(--ink)}
.vnote svg{color:var(--st-amber);flex:none;margin-top:1px}.vnote b{color:var(--st-amber)}
.vnote.green{background:var(--st-green-bg)}.vnote.green svg,.vnote.green b{color:var(--st-green)}
.vnote.red{background:var(--st-red-bg)}.vnote.red svg,.vnote.red b{color:var(--st-red)}
.vconf{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.vacts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.vacts .r{display:flex;gap:9px}.vacts .r .btn{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:9px;font-weight:700;font-size:14px;transition:transform .08s,opacity .15s,border-color .15s;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-yes{background:var(--logo);color:#fff}.btn-yes:hover{opacity:.9}
.btn-dark{background:var(--ink);color:var(--bg)}.btn-dark:hover{opacity:.88}
.btn-side{background:var(--side);color:#fff}.btn-side:hover{opacity:.92}
.btn-ghost{background:var(--card);border-color:var(--hair);color:var(--ink-2)}.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-danger{background:var(--st-red);color:#fff}.btn-danger:hover{opacity:.9}
.btn-block{width:100%}
.btn-sm{padding:8px 13px;font-size:12.5px}
.vhint{text-align:center;font-size:11.5px;color:var(--ink-3);margin-top:12px}
.vhint kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--hair);border-bottom-width:2px;border-radius:5px;padding:1px 5px}

/* automation */
.auto-hero{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tog{display:flex;align-items:flex-start;gap:12px;padding:14px 2px;border-bottom:1px solid var(--hair-soft)}
.tog:last-child{border-bottom:0}
.tog .tt{flex:1}.tog .tt b{font-size:14px}.tog .tt p{margin:3px 0 0;font-size:12.5px;color:var(--ink-3)}
.switch{width:42px;height:24px;border-radius:99px;background:var(--hair);position:relative;flex:none;transition:background .15s;cursor:pointer;border:none;margin-top:2px}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .16s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch.on{background:var(--logo)}.switch.on::after{left:21px}
.msg{border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--card)}
.msg .mh{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--hair-soft);border-bottom:1px solid var(--hair);font-size:12.5px;font-weight:700}
.msg .mh .wa{width:20px;height:20px;border-radius:5px;background:#25D366;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}
.msg .mb{padding:14px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.msg .mb b{color:var(--ink)}
.msg .mb .bubble{background:var(--st-green-bg);border-radius:10px;padding:11px 13px;margin-top:8px;color:var(--ink)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 10px 10px;border-bottom:1px solid var(--hair)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--hair-soft);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.id{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.tbl .tname{font-weight:700}
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover td{background:var(--hair-soft)}
.tblwrap{overflow-x:auto}

.info-line{display:flex;gap:10px;padding:11px 14px;border-radius:10px;background:var(--hair-soft);font-size:13px;color:var(--ink-2);margin-bottom:16px}
.info-line svg{flex:none;color:var(--ink-3);margin-top:1px}

/* rules sliders */
.rrow{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid var(--hair-soft)}
.rrow:last-child{border-bottom:0}
.rrow .rt{flex:1;min-width:0}
.rrow .rt b{font-size:14px}
.rrow .rt p{margin:2px 0 0;font-size:12px;color:var(--ink-3)}
.rrow input[type=range]{width:170px;accent-color:var(--side)}
.rrow input[type=range]:disabled{accent-color:var(--ink-3);cursor:not-allowed}
.rrow .rw{font-family:var(--mono);font-weight:700;font-size:15px;width:34px;text-align:right}
.lockic{width:15px;height:15px;color:var(--ink-3)}

/* owner self-verify phone */
.ophone{width:100%;max-width:390px;background:var(--card);border:1px solid var(--hair);border-radius:26px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);overflow:hidden;animation:pop .26s cubic-bezier(.2,.7,.3,1);max-height:94vh;display:flex;flex-direction:column}
.opinner{overflow:auto}
.ohead{background:var(--side);color:#fff;text-align:center;padding:22px 20px 18px}
.ohead .owm{font-family:var(--serif);font-size:26px;letter-spacing:7px;line-height:1}
.ohead .osub{font-size:10px;letter-spacing:.34em;color:#C3D0B4;margin-top:5px}
.obody{padding:22px 22px 26px}
.oeyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.oh{font-size:21px;font-weight:700;margin:8px 0 8px;letter-spacing:-.01em;line-height:1.25}
.op{font-size:13.5px;color:var(--ink-2);margin:0 0 18px;line-height:1.5}
.ocard{border:1px solid var(--hair);border-radius:13px;overflow:hidden;margin-bottom:18px}
.orow{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--hair-soft);font-size:14px}
.orow:last-child{border-bottom:0}
.orow .ol{color:var(--ink-3);font-weight:600}.orow .ov{font-weight:700;text-align:right;word-break:break-word}
.obig{padding:15px;font-size:15.5px}
.olink{display:block;width:100%;text-align:center;margin-top:16px;font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;background:none;border:none;padding:6px}
.olink:hover{color:var(--ink)}
.ofoot{text-align:center;font-size:11px;color:var(--ink-3);margin:20px 0 0;line-height:1.6}
.ostop{text-decoration:underline;cursor:pointer}
.ofield{text-align:left;margin-bottom:14px}
.ofield label{display:block;font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ofield input{width:100%;padding:13px;border:1.5px solid var(--hair);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;outline:none}
.ofield input:focus{border-color:var(--ink)}
.odone{width:64px;height:64px;border-radius:50%;background:var(--st-green-bg);color:var(--st-green);display:grid;place-items:center;font-size:34px;font-weight:700;margin:0 auto}
.ochip{display:inline-block;margin-top:18px;font-size:12px;color:var(--ink-3);background:var(--hair-soft);padding:8px 16px;border-radius:99px}
.verify-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}

/* login page (reuses ophone/ofield card tokens) */
.oerr{display:block;padding:11px 14px;border-radius:10px;background:var(--st-red-bg);color:var(--st-red);font-size:13px;font-weight:600;margin-bottom:16px;border:1px solid transparent}
.oerr[hidden]{display:none}
.ocheck{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);margin:2px 0 16px;cursor:pointer;user-select:none}
.ocheck input{width:16px;height:16px;accent-color:var(--logo);flex:none;margin:0}
.ocode{letter-spacing:.5em;font-family:var(--mono);font-size:19px;text-align:center;font-weight:700}
.ocode::placeholder{letter-spacing:.5em;color:var(--ink-3);font-weight:400}
.ohint{font-size:12px;font-weight:700;color:var(--st-green);background:var(--st-green-bg);padding:8px 12px;border-radius:8px;margin:0 0 14px;font-family:var(--mono)}
.ohint[hidden]{display:none}
.oadmin{margin-top:20px;border-top:1px solid var(--hair-soft);padding-top:14px}
.oadmin>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-3);text-align:center;letter-spacing:.02em}
.oadmin>summary::-webkit-details-marker{display:none}
.oadmin>summary:hover{color:var(--ink)}
.oadmin[open]>summary{margin-bottom:4px;color:var(--ink)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:99px;font-size:13.5px;font-weight:600;opacity:0;transition:.28s;z-index:200;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--st-red);color:#fff}

/* expandable issue rows */
.xrow{border-top:1px solid var(--hair-soft)}
.xrow:first-child{border-top:0}
.xhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:13px 18px;cursor:pointer}
.xhead:hover{background:var(--hair-soft)}
.xbody{padding:0 18px 16px;border-top:1px dashed var(--hair);background:#fcfcfc}

/* ── Global View (executive dashboard) ── */
.ov-kpis{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.stat.neu .k .tag{background:var(--ink-3)}
.panel-lbl{margin:6px 0 12px}
.ov-tot{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap}
/* segmented bar */
.ov-seg{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--hair-soft);margin:2px 0 4px}
.ov-seg .ov-s{height:100%}
.ov-seg-empty{background:var(--hair-soft)}
.ov-s.g,.ov-dot.g{background:var(--st-green)}
.ov-s.b,.ov-dot.b{background:var(--st-blue)}
.ov-s.a,.ov-dot.a{background:var(--st-amber)}
.ov-s.r,.ov-dot.r{background:var(--st-red)}
.ov-s.n,.ov-dot.n{background:var(--ink-3)}
.ov-leg{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.ov-lg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.ov-lg b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.ov-dot{width:9px;height:9px;border-radius:50%;flex:none}
/* labelled bars */
.ov-bars{display:flex;flex-direction:column;gap:11px}
.ov-bar{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:12px}
.ov-bl{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ov-bt{height:10px;border-radius:999px;background:var(--hair-soft);overflow:hidden}
.ov-bt>i{display:block;height:100%;border-radius:999px;min-width:2px}
.ov-bt>i.g{background:var(--st-green)}.ov-bt>i.b{background:var(--st-blue)}
.ov-bt>i.a{background:var(--st-amber)}.ov-bt>i.r{background:var(--st-red)}
.ov-bt>i.n{background:var(--ink-3)}
.ov-bv{font-family:var(--mono);font-weight:700;font-size:14px;text-align:right}
/* approvals-by-kind list */
.ov-kv{display:flex;flex-direction:column}
.ov-kv-r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--hair-soft);font-size:13.5px}
.ov-kv-r:last-child{border-bottom:0}
.ov-kv-r b{font-family:var(--mono);font-size:15px}
.ov-none{font-size:13px;color:var(--ink-3);padding:10px 2px;margin:0}
/* data-quality chips */
.ov-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ov-chip{border:1px solid var(--hair);border-radius:var(--radius-sm);padding:14px;text-align:center}
.ov-chip .cv{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:-.02em}
.ov-chip .ck{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.ov-thru{grid-template-columns:1fr 1fr;margin-bottom:0}
/* activity feed */
.ov-acts{display:flex;flex-direction:column}
.ov-act{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"a e w" "a m w";column-gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--hair-soft)}
.ov-act:last-child{border-bottom:0}
.ov-aa{grid-area:a;font-size:13px;font-weight:700;color:var(--ink)}
.ov-ae{grid-area:e;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-am{grid-area:m;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-aw{grid-area:w;font-size:11.5px;color:var(--ink-3);font-family:var(--mono);white-space:nowrap;text-align:right}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--hair)}
  .side-brand{flex-direction:row;padding:14px 18px;border-bottom:0}.side-brand .wm{font-size:22px}.side-brand .wr{display:none}
  .nav{display:flex;flex-wrap:wrap;width:100%;padding:0 6px 8px}.nav-label{display:none}.nav .badge{display:none}.side-foot{display:none}
  .stats,.acts{grid-template-columns:repeat(2,1fr)}.grid2,.grid2eq,.auto-hero{grid-template-columns:1fr}
  .topline{grid-template-columns:1fr}.topbar-center{grid-column:1;justify-self:stretch}.topbar-right{grid-column:1;justify-self:start}
  .gsearch{flex:1;width:auto}.cmp{grid-template-columns:1fr}
}
@media (max-width:560px){.qrow{grid-template-columns:38px minmax(0,1fr) auto}.qrow .qpill{display:none}}

/* ===== Clean sign-in card (inv.samaralombok.com layout · Samara green) ===== */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 32px;text-align:center}
.login-card h2{font-size:26px;font-weight:700;margin:8px 0 22px;color:var(--ink)}
.login-card .field{position:relative;text-align:left;margin-bottom:16px}
.login-card .field label{position:absolute;top:-8px;left:12px;background:var(--card);padding:0 6px;font-size:12px;color:var(--ink-2);font-weight:600}
.login-card .field input{width:100%;padding:13px;border:1px solid var(--hair);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:15px;outline:none}
.login-card .field input:focus{border-color:var(--logo)}
.login-card .field input::placeholder{color:var(--ink-3)}
.login-card .code-input{letter-spacing:.3em;text-align:center;font-size:20px}
.login-card .remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin:2px 0 16px;cursor:pointer;text-align:left}
.login-card .remember input{width:auto;margin:0}
.login-note{font-size:12px;color:var(--ink-3);margin:14px 0 0;text-align:center;line-height:1.55}
.login-card .notice{padding:10px 14px;border-radius:9px;font-size:13px;margin-bottom:16px;border:1px solid var(--hair);text-align:left}
.login-card .notice.err{background:var(--st-red-bg);color:var(--st-red);border-color:transparent}
.login-card .notice.info{background:var(--gold-soft);color:var(--ink-2)}
.login-alt{margin-top:20px;font-size:14px}
.login-alt details{margin-top:8px}
.login-alt summary{cursor:pointer;color:var(--ink-2);list-style:none;text-decoration:underline;text-underline-offset:2px;font-size:13px}
.login-alt summary::-webkit-details-marker{display:none}
.link{color:var(--logo);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.link:hover{opacity:.75}

/* constrain button icons (were rendering oversized) */
.btn svg{width:18px;height:18px;flex:none}

/* ===== Masterplan Map — pan/zoom estate orientation maps ===== */
.map-stage{position:relative}
.map-viewport{position:relative;height:calc(100vh - 300px);min-height:440px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--hair-soft);overflow:hidden;cursor:grab;touch-action:none}
.map-viewport:active{cursor:grabbing}
.map-viewport.editing{cursor:crosshair}
.map-panner{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.map-panner.anim{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.map-panner img{display:block;user-select:none;-webkit-user-drag:none}
.map-panner svg{position:absolute;top:0;left:0;overflow:visible}

/* plot polygons — colour carried on `color`, so fill and stroke stay in step */
polygon.map-plot{fill:currentColor;fill-opacity:.20;stroke:currentColor;stroke-width:2;
  vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity .15s}
polygon.map-plot:hover{fill-opacity:.46;stroke-width:3}
/* map status palette as tokens (MAP-08) — green=approved, amber=in progress,
   red=blocked, grey=raw/none, per the framework semantics */
:root{
  --map-complete:#047857; --map-attention:#B45309; --map-blocked:#B91C1C;
  --map-pending:#1D4ED8; --map-none:#6b7280;
}
.ps-complete{color:var(--map-complete)}
.ps-warning{color:var(--map-attention)}
.ps-error{color:var(--map-blocked)}
.ps-pending{color:var(--map-pending)}
.ps-none{color:var(--map-none)}
.lg-complete{background:var(--map-complete)}
.lg-warning{background:var(--map-attention)}
.lg-error{background:var(--map-blocked)}
.lg-pending{background:var(--map-pending)}
.lg-none{background:var(--map-none)}
@keyframes mapPulse{0%,100%{fill-opacity:.20}50%{fill-opacity:.72}}
polygon.map-plot.pulse{animation:mapPulse 1.05s ease 2}

/* digitizer draft geometry */
.map-draft-line{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.map-draft-fill{fill:var(--gold);fill-opacity:.18;stroke:none}
.map-draft-pt{fill:#fff;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
.map-draft-pt.first{fill:var(--gold)}

/* scoped search — same dropdown as the global bar, anchored inside the map */
.map-search{position:absolute;top:14px;left:14px;z-index:6;width:min(430px,54%)}
.map-search>svg{position:absolute;left:12px;top:11px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.map-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--hair);border-radius:10px;
  background:rgba(255,255,255,.96);font:inherit;font-size:13px;outline:none;box-shadow:var(--shadow)}
.map-search input:focus{border-color:var(--logo)}
.map-search .gdrop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20}

/* floating controls */
.map-zoom{position:absolute;top:14px;right:14px;z-index:6;display:flex;flex-direction:column;gap:6px}
.map-zoom .icon-btn{width:34px;height:34px;display:grid;place-items:center;background:var(--card);
  border:1px solid var(--hair);border-radius:9px;color:var(--ink-2);box-shadow:var(--shadow)}
.map-zoom .icon-btn:hover{background:var(--hair-soft);color:var(--ink)}
.map-zoom .icon-btn svg{width:17px;height:17px}
.map-edit-toggle{position:absolute;top:14px;right:60px;z-index:6;background:var(--card)}
.map-note{position:absolute;left:14px;bottom:14px;z-index:5;font-size:12px;padding:5px 12px;
  background:rgba(255,255,255,.93);border:1px solid var(--hair);border-radius:999px}
.map-legend{position:absolute;right:14px;bottom:14px;z-index:5;display:flex;gap:13px;font-size:12px;
  color:var(--ink-2);padding:6px 14px;background:rgba(255,255,255,.93);border:1px solid var(--hair);border-radius:999px}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;border-radius:3px;flex:none}

/* digitizer toolbar */
.map-toolbar{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:7;
  display:flex;align-items:center;gap:10px;font-size:13px;padding:10px 14px;background:var(--card);
  border:1px solid var(--hair);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.10)}
.map-toolbar input{width:172px;padding:7px 10px;border:1px solid var(--hair);border-radius:8px;font:inherit;outline:none}
.map-toolbar input:focus{border-color:var(--logo)}
.map-toolbar .muted{white-space:nowrap}

/* plot detail slide-in */
.map-overlay{position:absolute;top:0;right:0;height:100%;width:min(400px,92%);z-index:8;
  display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--hair);
  border-radius:0 var(--radius) var(--radius) 0;box-shadow:-8px 0 26px rgba(0,0,0,.09);
  transform:translateX(103%);transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.map-overlay.open{transform:none}
.map-ov-head{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--hair)}
.map-ov-body{padding:16px 18px 22px;overflow:auto}

@media (max-width:900px){
  .map-viewport{height:62vh;min-height:360px}
  .map-search{width:min(300px,58%)}
  .map-legend{display:none}
}

/* ===== Iterasi 4 · two-surface shell + mobile-first (CR-009/CR-010) ===== */
/* surface visibility: data-show="front|admin" hides on the other surface */
body:not(.is-front) [data-show="front"]{display:none!important}
body:not(.is-admin) [data-show="admin"]{display:none!important}

/* neutralize the desktop zoom on smaller screens (MOB-01) */
@media (max-width:900px){ .app{zoom:1} }

/* FRONT — clean Google posture: no sidebar, content is the page */
body.is-front .app{grid-template-columns:1fr}
body.is-front .main{padding:16px 22px 56px;min-width:0}
.topbar-left{grid-column:1;display:flex;align-items:center;justify-self:start}
.front-brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.front-brand .fb-wm{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:5px;color:var(--side);line-height:1}
.front-brand .fb-rule{width:22px;height:1px;background:var(--gold);align-self:center}
.front-brand .fb-sub{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.front-switch-row{display:flex;justify-content:center;margin:0 0 16px}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--hair-soft);border:1px solid var(--hair);border-radius:999px}
.seg a{display:inline-flex;align-items:center;padding:8px 20px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:none;min-height:36px}
.seg a:hover{color:var(--ink)}
.seg a.active{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.seg a.active::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:8px}
.toplink{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--hair);border-radius:9px;background:var(--card);color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.toplink:hover{color:var(--ink);border-color:var(--ink-3)}
.toplink[hidden]{display:none}
/* front map claims the viewport (refined fully in Phase 3, MAP-01) */
body.is-front .map-viewport{height:calc(100vh - 190px)}

/* bottom navigation — primary nav on phones (MOB-02) */
.bottomnav{display:none}
.msheet{display:none}
@media (max-width:600px){
  .main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .front-switch-row{display:none!important}
  body.is-admin .sidebar .nav{display:none}
  body.is-admin .sidebar{position:relative;height:auto}
  .bottomnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;
    left:0;right:0;bottom:0;z-index:90;background:var(--card);border-top:1px solid var(--hair);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav a,.bottomnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:48px;padding:5px 2px;font-size:10.5px;font-weight:600;color:var(--ink-3);
    text-decoration:none;background:none;border:none;border-radius:10px}
  .bottomnav svg{width:20px;height:20px}
  .bottomnav a.active,.bottomnav button.active{color:var(--side);font-weight:700}
  .bottomnav a.active svg,.bottomnav button.active svg{color:var(--gold)}
  /* "More" bottom sheet (admin surface) */
  .msheet{display:grid;position:fixed;inset:0;z-index:120;align-items:end}
  .msheet.hidden{display:none}
  .msheet .ms-back{position:absolute;inset:0;background:rgba(13,13,13,.35)}
  .msheet .ms-card{position:relative;background:var(--card);border-top:1px solid var(--hair);
    border-radius:18px 18px 0 0;max-height:72vh;overflow:auto;
    padding:6px 14px calc(18px + env(safe-area-inset-bottom))}
  .msheet .ms-card a{display:flex;align-items:center;min-height:48px;padding:12px 8px;
    font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--hair-soft)}
  .msheet .ms-card a:last-child{border-bottom:0}
}
@media (max-width:900px){
  body.is-front .map-viewport{height:calc(100vh - 200px)}
  .front-brand .fb-sub{display:none}
}
@media (max-width:600px){
  body.is-front .main{padding:12px 12px calc(88px + env(safe-area-inset-bottom))}
  body.is-front .map-viewport{height:calc(100vh - 210px)}
  .gsearch{width:100%}
}

/* ===== Iterasi 4 Fase 1 · Register (Root B) + attention queue ===== */
.reg-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.reg-main{min-width:0}
.reg-side{position:sticky;top:16px;background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);padding:16px 18px;max-height:calc(100vh - 120px);overflow:auto}
.reg-tblwrap{border:1px solid var(--hair);border-radius:var(--radius);background:var(--card)}
.reg-tbl th{position:sticky;top:0;background:var(--card)}
.colinfo{background:none;border:none;padding:0;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;text-align:left}
.colinfo:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.reg-cards{display:none}
.reg-mine{margin:0 0 14px;border:1px solid var(--hair);border-radius:var(--radius-sm);background:var(--card);padding:10px 14px}
.reg-mine summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
.reg-mine .trow{padding:10px 2px}
.reg-pv h3{font-size:17px}
.mini-btn:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:900px){
  .reg-wrap{grid-template-columns:1fr}
  .reg-side{position:static;max-height:none}
}
@media (max-width:600px){
  .reg-tblwrap{display:none}
  .reg-cards{display:flex;flex-direction:column;gap:9px}
  .reg-card{text-align:left;background:var(--card);border:1px solid var(--hair);border-radius:var(--radius-sm);padding:13px 14px;min-height:44px}
  .reg-card:active{border-color:var(--side)}
  .rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .rc-top b{font-size:14px}
  .rc-name{font-size:13px;color:var(--ink-2);margin-top:3px}
  .rc-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:11.5px;color:var(--ink-3)}
  .rc-meta b{color:var(--ink-2);font-weight:600}
  .msheet .reg-pv{padding:6px 4px 10px}
}

/* ===== Iterasi 4 Fase 2 · Reporting ===== */
.rp-kpis .rp-of{font-size:14px;color:var(--ink-3);font-weight:600}
.rp-stamp{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;margin:2px 0 10px}
.rp-kpis .stat .v{font-size:30px}
@media (max-width:600px){
  .rp-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .rp-kpis .stat{padding:13px 14px}
  .rp-kpis .stat .v{font-size:24px}
}

/* ===== Iterasi 4 Fase 3 · map labels, worklist, picker ===== */
.map-labels{pointer-events:none;opacity:0;transition:opacity .18s ease;font-family:var(--sans)}
.map-labels.on{opacity:1}
.map-label{fill:var(--ink);paint-order:stroke;stroke:#ffffff;stroke-width:3px;
  stroke-linejoin:round;font-weight:700;text-anchor:middle;pointer-events:none;user-select:none}
.map-work-toggle{position:absolute;top:14px;right:106px;z-index:6;background:var(--card)}
.map-worklist{position:absolute;top:56px;right:14px;z-index:7;width:min(300px,86vw);
  max-height:60vh;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--hair);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden}
.map-worklist.hidden{display:none}
.mw-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--hair);font-size:13px}
.map-worklist input{margin:9px 12px;padding:8px 11px;border:1px solid var(--hair);
  border-radius:8px;font:inherit;font-size:13px;outline:none}
.map-worklist input:focus{border-color:var(--logo)}
.mw-list{overflow-y:auto;padding:2px 6px 8px}
.mw-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:none;background:none;border-radius:8px;font-size:13px;text-align:left}
.mw-item:hover{background:var(--hair-soft)}
.mm-picker{position:relative}
.mm-picker .gdrop{position:absolute;top:calc(100% + 5px);left:0;width:260px;z-index:30}
.map-draft-pt{cursor:grab}
.map-draft-pt:active{cursor:grabbing}
body.is-front .map-viewport{height:calc(100vh - 158px)}
@media (max-width:900px){
  body.is-front .map-viewport{height:calc(100vh - 170px)}
  .map-work-toggle{top:auto;bottom:14px;right:14px}
  .map-worklist{top:auto;bottom:64px;right:14px}
}
@media (max-width:600px){
  body.is-front .map-viewport{height:calc(100vh - 190px)}
  .map-zoom .icon-btn{width:44px;height:44px}
  .map-toolbar{left:8px;right:8px;transform:none;flex-wrap:wrap;bottom:8px}
}

/* ===== Access Management — the access pack, rendered ===== */
.am-id{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  padding:14px 18px;margin-bottom:16px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card)}
.am-id-role{font-size:15px;margin-top:3px}
.am-id-role .muted{font-weight:400;font-size:13px;margin:0 4px}
.am-scroll{padding:6px 10px;overflow-x:auto}
.am-foot{margin-top:10px;font-size:12.5px;max-width:76ch}
.am-intro{margin:0 0 14px;font-size:13px;max-width:78ch}
.am-sm{font-size:12.5px}
.am-key{font-size:11px}

/* legend */
.am-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px;font-size:12.5px;color:var(--ink-2)}
.am-leg{display:inline-flex;align-items:center;gap:7px}

/* action chips — one letter each, colour carries the escalation */
.am-a{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:3px;border-radius:5px;
  font-family:var(--mono);font-size:11px;font-weight:700;font-style:normal;line-height:1}
.am-a-V{background:var(--hair-soft);color:var(--ink-2)}
.am-a-U{background:var(--st-green-bg);color:var(--st-green)}
.am-a-A{background:var(--st-amber-bg);color:var(--st-amber)}
.am-a-D{background:var(--st-red-bg);color:var(--st-red)}
.am-a-E{background:var(--st-blue-bg);color:var(--st-blue)}
.am-no{color:var(--ink-3)}

/* matrix */
.am-matrix{min-width:900px}
.am-matrix th{font-size:11.5px;font-weight:700;vertical-align:bottom;white-space:nowrap}
.am-matrix td{white-space:nowrap}
.am-matrix .am-cat{text-align:left;font-size:12.5px;font-weight:600;color:var(--ink);
  position:sticky;left:0;background:var(--card);min-width:230px;z-index:1}
.am-matrix th.me,.am-matrix td.me{background:var(--gold-soft)}
.am-you{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}

/* dictionary */
.am-fields{min-width:1180px}
.am-fields th{font-size:11.5px;white-space:nowrap}

/* cards — preset views and change control */
.am-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.am-card{padding:16px 18px}
.am-card.mine{border-color:var(--logo);box-shadow:0 0 0 3px rgba(31,138,59,.08)}
.am-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.am-card-t{font-size:16px;margin-top:2px}
.am-purpose{font-size:13px;margin-top:6px}
.am-roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.am-role{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:var(--hair-soft);color:var(--ink-2)}
.am-role.me{background:var(--st-green-bg);color:var(--st-green)}
.am-cols{margin-top:12px}
.am-cols>div{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px}
.am-cols code{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:5px;
  background:var(--hair-soft);color:var(--ink-2)}
.am-ctl{margin-top:12px}
.am-ctl td{font-size:12.5px;vertical-align:top}
.am-ctl td.muted{width:88px;white-space:nowrap}

@media (max-width:600px){
  .am-id{flex-direction:column;gap:12px}
  .am-cards{grid-template-columns:1fr}
}
.am-a-off{background:transparent;color:var(--ink-3);border:1px dashed var(--hair);
  text-decoration:line-through;opacity:.8}
.am-matrix th.eff,.am-matrix td.eff{background:var(--st-green-bg);
  border-left:2px solid var(--st-green);white-space:nowrap}
.am-matrix th.eff{color:var(--st-green)}
.am-two{margin:0 0 14px;padding:12px 16px;border:1px solid var(--hair);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);background:var(--card);font-size:13px;line-height:1.6;max-width:92ch}
.am-two .am-a{margin:0 2px}
.am-perms code{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:5px;
  background:var(--hair-soft);color:var(--ink-2)}

.am-people-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.am-people{min-width:820px}
.am-people td{vertical-align:top}
.am-people .am-you{display:inline-block;margin-left:8px}

/* ===== Ownership Verification ===== */
.vf-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.vf-stat{padding:14px 16px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card)}
.vf-stat .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.vf-stat b{display:block;font-size:26px;font-family:var(--mono);line-height:1.15;margin-top:4px}
.vf-stat .s{font-size:11.5px;color:var(--ink-3)}
.vf-devs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;font-size:12.5px;color:var(--ink-2)}
.vf-dev{padding:5px 12px;border:1px solid var(--hair);border-radius:999px;background:var(--card)}
.vf-search{margin-bottom:12px}
.vf-search input{width:100%;max-width:460px;padding:9px 13px;border:1px solid var(--hair);
  border-radius:10px;font:inherit;font-size:13px;outline:none;background:var(--card)}
.vf-search input:focus{border-color:var(--logo)}
.vf-table{min-width:880px}
.vf-sm{font-size:12.5px}
.vf-foot{margin-top:10px;font-size:12.5px}
.vf-ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 14px;margin-top:6px}
.vf-chk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:3px 0}
.vf-chk input{width:auto;margin:0;flex:none}
@media (max-width:600px){.vf-ev{grid-template-columns:1fr}}


/* ── Legal Overlay ─────────────────────────────────────────────────────────
   A second map beside the Sales one. Tokens only — no new colours: the gold is
   the certificate layer's own, everything else is the app's existing scale.     */
.lo-wrap{display:flex;flex-direction:column;gap:10px}
.lo-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lo-sp{flex:1}
.lo-est{padding:5px 12px;font-size:13px;border:1px solid var(--line,#e7e5e4);background:#fff;
  border-radius:6px;cursor:pointer}
.lo-est.on{background:#011132;color:#fff;border-color:#011132;font-weight:600}
.lo-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  background:var(--line,#e7e5e4);border:1px solid var(--line,#e7e5e4);border-radius:10px;overflow:hidden}
.lo-stat{background:#fff;padding:9px 12px}
.lo-stat .k{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#78716c)}
.lo-stat .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:1px}
.lo-stat .v.warn{color:var(--warn,#b45309)} .lo-stat .v.err{color:var(--err,#b91c1c)}
/* Height is measured at runtime and written to --lo-h (see fitMapHeight in
   legal.js): the toolbar above grows a row whenever the notes pill wraps, so a
   fixed calc() would leave a gap on some screens and a scrollbar on others. The
   560px here is only the fallback for the moment before the first measurement. */
.lo-main{position:relative;display:flex;gap:10px;height:var(--lo-h,560px);min-height:420px}
/* The wrapper is the positioning context for everything that floats over the
   map -- search, buttons, compass, hint -- so "right:12px" means the map's right
   edge, not the panel's. It used to be .lo-main, which also holds the 360px
   panel, and every control carried a 370px correction that broke on phones. */
.lo-mapwrap{position:relative;flex:1;min-width:0;min-height:0}
/* Fullscreen. A fixed overlay rather than the Fullscreen API -- see the note in
   legal.js. The detail panel comes with it: reading a certificate is most of the
   work, and a fullscreen map that hides the answer is a worse map. */
.lo-main.lo-full{position:fixed;inset:0;z-index:1200;margin:0;padding:10px;gap:10px;
  min-height:0;background:var(--bg,#fcfaf5)}
.lo-main.lo-full #lo-map{border-radius:8px}
.lo-main.lo-full #lo-panel{max-height:none}
/* Stop the page behind it from scrolling under the overlay. */
body.lo-full-open{overflow:hidden}
.lo-full-btn{position:absolute;z-index:820;top:12px;right:12px;display:flex;
  align-items:center;justify-content:center;width:40px;height:40px;padding:0;
  border:1px solid var(--line,#e7e5e4);border-radius:10px;background:#fff;
  color:var(--ink,#1c1917);cursor:pointer;
  box-shadow:0 4px 16px rgba(1,17,50,.16),0 1px 3px rgba(1,17,50,.10)}
.lo-full-btn:hover{background:var(--bg-soft,#f5f5f4)}
.lo-full-btn:focus-visible{outline:none;border-color:#011132;box-shadow:0 0 0 3px rgba(1,17,50,.14)}
.lo-full-btn .ic{width:18px;height:18px}
/* In fullscreen the panel sits at the right edge, so the button steps left of it. */
.lo-main.lo-full .lo-full-btn{top:12px;right:12px}
#lo-map .leaflet-top.leaflet-right{padding-top:50px}
/* Below 900px the search spans the map's full width, so the button drops under
   it and Leaflet's right-hand stack starts lower still. (This block must follow
   the 50px rule above -- same selector, and the later one wins.) */
@media (max-width:900px){.lo-main.lo-full{flex-direction:column}
  .lo-full-btn,.lo-main.lo-full .lo-full-btn{top:60px;right:12px}
  #lo-map .leaflet-top.leaflet-right{padding-top:98px}}
#lo-map{position:absolute;inset:0;border:1px solid var(--line,#e7e5e4);border-radius:10px;background:#e8e4dc}
#lo-panel{width:360px;flex:0 0 360px;overflow-y:auto;max-height:100%}
/* Fullscreen ignores the measured height and takes the viewport. */
.lo-main.lo-full{height:auto}
/* Leaflet stacks its controls in the map corners, and two of those corners now
   carry our own floating controls. Rather than move Leaflet's controls somewhere
   unfamiliar, give each stack the clearance it needs and let them queue underneath:
   search then Layers down the left, fullscreen then zoom down the right. */
#lo-map .leaflet-top.leaflet-left{padding-top:58px;bottom:70px;display:flex;flex-direction:column}
#lo-map .leaflet-bar{border:1px solid var(--line,#e7e5e4);border-radius:10px;box-shadow:0 4px 16px rgba(1,17,50,.16),0 1px 3px rgba(1,17,50,.10)}
#lo-map .leaflet-bar a{width:38px;height:38px;line-height:38px;font-size:20px;color:var(--ink,#1c1917)}
#lo-map .leaflet-bar a:first-child{border-top-left-radius:10px;border-top-right-radius:10px}
#lo-map .leaflet-bar a:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px}
#lo-map .lo-fit{display:flex;align-items:center;justify-content:center}
#lo-map .lo-meas-btn.on{background:#011132;color:#fff}
/* The selection pin. divIcon, so no background; a drop shadow under the glyph
   and a short settle when it lands (skipped under reduced motion). */
.lo-pin{background:none;border:0}
.lo-pin svg{display:block;filter:drop-shadow(0 3px 3px rgba(1,17,50,.35));transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .lo-pin svg{animation:lo-pin-in .32s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes lo-pin-in{from{transform:translateY(-14px) scale(.85);opacity:0}to{transform:none;opacity:1}}}
.leaflet-tooltip.lo-pin-lbl{background:#011132;color:#fff;border:0;border-radius:999px;padding:3px 9px;
  font-weight:700;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 3px 10px rgba(1,17,50,.3)}
.leaflet-tooltip.lo-pin-lbl::before{border-top-color:#011132}
/* Base map switch, bottom-left of the map: Imagery | Plain. A segmented pill,
   pressed state in navy, so the current ground reads at a glance. */
.lo-base{position:absolute;z-index:820;left:12px;bottom:12px;display:flex;padding:3px;gap:2px;
  background:#fff;border:1px solid var(--line,#e7e5e4);border-radius:999px;box-shadow:var(--shadow,0 6px 20px rgba(1,17,50,.16))}
.lo-base button{padding:6px 12px;border:0;border-radius:999px;background:none;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--ink-2,#57534e);cursor:pointer;min-height:32px}
.lo-base button[aria-pressed="true"]{background:#011132;color:#fff}
.lo-base button:focus-visible{outline:2px solid #011132;outline-offset:2px}
/* The hint and the ruler readout sit bottom-centre; keep them clear of the switch. */
/* Phone: the switch sits beside the compass at the bottom; hint and ruler card
   take the full width above them, so nothing shares a pixel with anything. */
@media (max-width:900px){.lo-base{left:auto;right:82px;bottom:12px}
  .lo-hint,.lo-meas{left:12px;right:12px;bottom:64px;width:auto;margin:0}}
/* Ruler mode: crosshair on the map, readout at the bottom centre. The readout is
   a card (not a pill) because it carries buttons; it sits where the hint does,
   and the hint is gone by then. */
.lo-mapwrap.measuring #lo-map{cursor:crosshair}
.lo-mapwrap.measuring .leaflet-interactive{cursor:crosshair}
/* While measuring, the parcels' hover tooltips would sit under the cursor
   exactly where the next point goes. */
.lo-mapwrap.measuring .leaflet-tooltip{display:none}
.lo-meas{position:absolute;z-index:830;left:170px;right:90px;bottom:14px;width:fit-content;margin:0 auto;
  display:flex;align-items:center;gap:14px;padding:8px 10px 8px 14px;
  background:#fff;border:1px solid var(--line,#e7e5e4);border-radius:10px;box-shadow:var(--shadow,0 6px 20px rgba(1,17,50,.16))}
.lo-meas-read{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.lo-meas-read b{font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink,#1c1917);white-space:nowrap}
.lo-meas-q{font-size:11.5px;color:var(--muted,#78716c);white-space:nowrap}
.lo-meas-acts{display:flex;gap:6px;flex:0 0 auto}
.lo-meas-acts button{padding:6px 10px;border:1px solid var(--line,#e7e5e4);border-radius:8px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink,#1c1917);cursor:pointer}
.lo-meas-acts button:hover{background:var(--bg-soft,#f5f5f4)}
.lo-meas-acts button:disabled{opacity:.4;cursor:default}
.lo-meas-acts button.pri{background:#011132;border-color:#011132;color:#fff}
.lo-meas-acts button:focus-visible{outline:2px solid #011132;outline-offset:2px}
@media (max-width:900px){.lo-meas{flex-direction:column;align-items:stretch;gap:8px;width:auto}
  .lo-meas-acts button{flex:1}}
#lo-map .lo-fit svg{width:18px;height:18px}
.lo-mapwrap>.compass{bottom:12px;right:12px}
/* The one-line hint shown when the map is ready. Bottom-centre of the MAP, so it
   never covers the search, the legend or the compass; fades on first interaction.
   Inside #lo-map, so its centre is the map's centre, not the container's. */
/* Both boxes live in the strip between the base switch (left, ~150px) and the
   compass (right, ~70px). Positioned by that strip and centred within it with
   margin:auto -- a centred left:50% box halves its own width on a narrow map. */
.lo-hint{position:absolute;z-index:830;left:170px;right:90px;bottom:14px;width:fit-content;margin:0 auto;
  transform:translateY(8px);padding:8px 14px;border-radius:999px;
  background:rgba(1,17,50,.90);color:#fff;font-size:12.5px;line-height:1.35;white-space:nowrap;
  box-shadow:0 6px 20px rgba(1,17,50,.28);opacity:0;pointer-events:none;
  transition:opacity .26s ease,transform .26s ease}
.lo-hint b{font-weight:700;color:#F0D48A}
.lo-hint.on{opacity:1;transform:translateY(0)}
@media (max-width:900px){.lo-hint{white-space:normal;text-align:center}}
@media (prefers-reduced-motion:reduce){.lo-hint{transition:none}}

/* Sales map: under the zoom stack (3 x 34px + gaps), clear of the legend below. */
.map-stage>.compass{top:136px;right:14px;z-index:6}

/* Compass rose — shared by the Legal map and the Sales masterplan map. */
.compass{position:absolute;z-index:815;display:flex;flex-direction:column;align-items:center;
  gap:2px;width:62px;padding:5px 4px 4px;background:rgba(255,255,255,.94);
  border:1px solid var(--line,#e7e5e4);border-radius:10px;
  box-shadow:0 3px 12px rgba(1,17,50,.14);pointer-events:none;user-select:none}
.compass svg{width:46px;height:46px;display:block;overflow:visible}
.compass .c-ring{fill:none;stroke:var(--line,#e7e5e4);stroke-width:1}
.compass .c-n{fill:#011132}
.compass .c-s{fill:#fff;stroke:#011132;stroke-width:1;stroke-linejoin:round}
.compass .c-x{fill:#d6d3d1}
.compass .c-t{font-size:9px;font-weight:700;fill:var(--muted,#78716c);text-anchor:middle;
  font-family:inherit;letter-spacing:.02em}
.compass .c-lab-n{fill:#011132;font-size:10px}
/* The Indonesian cardinals, quietly, under the rose. */
.compass .c-id{font-size:8px;font-weight:600;letter-spacing:.06em;color:var(--muted,#78716c)}

.lo-layers{background:#fff;border:1px solid var(--line,#e7e5e4);border-radius:9px;padding:8px 10px;font-size:12px}
.lo-layers{max-width:270px;display:flex;flex-direction:column;min-height:0;max-height:100%;box-sizing:border-box}
.lo-lg-body{overflow-y:auto;min-height:0;overscroll-behavior:contain}
/* Collapsible: the header is the toggle; closed, only the header remains. */
.lo-lg-tog{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:2px 0 4px;border:0;background:none;font:inherit;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink,#1c1917);cursor:pointer}
.lo-lg-tog svg{width:14px;height:14px;color:var(--muted,#78716c);transition:transform .18s ease}
.lo-layers.closed .lo-lg-tog{padding-bottom:0}
.lo-layers.closed .lo-lg-tog svg{transform:rotate(-90deg)}
.lo-layers.closed .lo-lg-body{display:none}
.lo-layers .lo-lg-body>h4:first-child{margin-top:4px}
@media (prefers-reduced-motion:reduce){.lo-lg-tog svg{transition:none}}
.lo-layers h4{margin:0 0 5px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#78716c)}
.lo-layers h4.sec{margin-top:8px;padding-top:7px;border-top:1px solid var(--line-soft,#f5f5f4)}
.lo-layers label{display:flex;align-items:center;gap:7px;padding:4px 0;cursor:pointer}
.lo-est:focus-visible,.lo-lg-tog:focus-visible,.lo-note-p:focus-visible,.lo-pick:focus-visible,#lo-map .leaflet-bar a:focus-visible{outline:2px solid #011132;outline-offset:2px}
/* The panel before a selection: the questions people arrive with, as buttons. */
.lo-empty{display:flex;flex-direction:column;gap:6px}
.lo-empty-lead{font-size:13px;color:var(--ink-2,#57534e);margin-bottom:6px}
.lo-empty-h{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#78716c);margin-top:10px}
.lo-empty-notes{display:flex;flex-wrap:wrap;gap:6px}
.lo-pick{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:8px 10px;
  border:1px solid var(--line,#e7e5e4);border-radius:8px;background:#fff;cursor:pointer;font:inherit}
.lo-pick:hover{background:var(--bg-soft,#f5f5f4);border-color:#c9c4b8}
.lo-pick b{font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink,#1c1917)}
.lo-pick span{font-size:11.5px;color:var(--muted,#78716c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One search per screen: on the Legal map the box on the map is the search. */
body[data-route="legal"] .gsearch{display:none}
.lo-layers .sw{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.lo-layers .lb{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
/* The structured value under the printed label. It is what travels to GeoServer
   or an export, so it belongs on screen next to the colour it describes. */
.lo-layers .lb i{font-style:normal;font-size:9px;letter-spacing:.02em;color:var(--muted,#78716c);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.lo-layers .n{font-size:10.5px;color:var(--muted,#78716c);font-variant-numeric:tabular-nums;
  flex:0 0 auto}
/* Printed on the sheet, absent from this issue's data. Shown, not hidden. */
.lo-layers label.off{cursor:not-allowed;opacity:.5}
.lo-layers label.off .sw{opacity:.55}

/* The drawing's Notes block. */
.pill.note{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:#fdf1d0;border-color:#e6cf95;color:#5b4708}
.pill.note b{font-weight:700}
.lo-note-p{font:inherit;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:999px;
  border:1px solid #d8b866;background:#fff;color:#5b4708;cursor:pointer}
.lo-note-p:hover{background:#fffaf0}
.lo-note-p.miss{cursor:default;text-decoration:line-through;opacity:.6}
.lo-ans{border:1px solid var(--line,#e7e5e4);border-radius:11px;overflow:hidden}
/* Back / Start above every answer. Back retraces the trail of picks; Start
   returns to the opening panel and its list of plots. */
.lo-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.lo-navb{display:inline-flex;align-items:center;gap:5px;padding:6px 10px 6px 8px;border:1px solid var(--line,#e7e5e4);
  border-radius:8px;background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink,#1c1917);cursor:pointer}
.lo-navb svg{width:15px;height:15px}
.lo-navb:hover{background:var(--bg-soft,#f5f5f4)}
.lo-navb:disabled{opacity:.4;cursor:default}
.lo-navb:focus-visible{outline:2px solid #011132;outline-offset:2px}
/* An answer row that opens what it names. */
.lo-row.is-link{cursor:pointer}
.lo-row.is-link:hover,.lo-row.is-link:focus-visible{background:var(--bg-soft,#f5f5f4);outline:none}
.lo-row.is-link .c1{text-decoration:underline;text-decoration-color:#d4a648;text-underline-offset:3px}
.lo-ans .hd{padding:10px 12px;background:var(--bg-soft,#f5f5f4);border-bottom:1px solid var(--line,#e7e5e4)}
.lo-ans .q{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#78716c)}
.lo-ans .a{font-size:15px;font-weight:600;margin-top:2px}
.lo-ans .a em{font-style:normal;color:#D4A648;font-size:21px}
.lo-ans .bd{padding:4px 12px 10px}
.lo-row{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--line-soft,#f5f5f4);align-items:baseline}
.lo-row:last-child{border-bottom:0}
.lo-row .c1{flex:0 0 92px;font-weight:600;font-size:12.5px}
.lo-row .c2{flex:1;font-size:12.5px;min-width:0}
.lo-row .c3{flex:0 0 auto;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.lo-kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12.5px;
  border-bottom:1px solid var(--line-soft,#f5f5f4)}
.lo-kv > span:first-child{color:var(--muted,#78716c);flex:0 0 auto;max-width:52%}
/* The register's own values: a key risk note or a remark is a sentence, not a
   number, so the value column wraps and stays right-aligned against its label
   rather than pushing the panel sideways. */
.lo-kv .lo-val{flex:1 1 auto;min-width:0;text-align:right;word-break:break-word}
.lo-ev{color:var(--brand,#011132);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.lo-ev:hover{opacity:.75}
.lo-sec{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#78716c);
  font-weight:600;margin:10px 0 2px;padding-top:7px;border-top:1px solid var(--line,#e7e5e4)}
.lo-fresh{margin-top:10px;padding:8px 10px;background:var(--bg-soft,#f5f5f4);border-radius:8px}
.lo-fr-h{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#78716c);font-weight:600;margin-bottom:3px}
.lo-fr{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:2px 0}
.lo-fr span:last-child{text-align:right;word-break:break-word}
.lo-fr-m{font-size:10.5px;color:var(--warn,#b45309);margin-top:3px}
/* ===== Phone: the map is the screen, the panel is a sheet over it ===== */
@media (max-width:900px){
  .lo-main{flex-direction:column;height:var(--lo-h,70vh)}
  .lo-mapwrap{flex:1;min-height:0}
  #lo-map{border-radius:0;border-left:0;border-right:0}
  .lo-main{padding-left:0;padding-right:0}
  /* the sheet */
  #lo-panel.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1300;width:auto;height:auto;
    max-height:70vh;max-height:70dvh;display:flex;flex-direction:column;padding:0;
    border:0;border-top:1px solid var(--line,#e7e5e4);border-radius:16px 16px 0 0;
    box-shadow:0 -8px 30px rgba(1,17,50,.18);background:#fff;
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(calc(100% - 60px - env(safe-area-inset-bottom)));
    transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  #lo-panel.sheet.open{transform:none}
  .lo-sheet-h{position:relative;flex:none;display:flex;align-items:center;gap:10px;height:60px;padding:10px 16px 0;
    border:0;background:#fff;border-radius:16px 16px 0 0;font:inherit;text-align:left;cursor:pointer;
    touch-action:none;-webkit-tap-highlight-color:transparent}
  .lo-sheet-h .bar{position:absolute;top:8px;left:50%;width:40px;height:4px;border-radius:2px;background:#d6d3d1;transform:translateX(-50%)}
  .lo-sheet-h .ttl{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink,#1c1917);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lo-sheet-h .chev{width:18px;height:18px;color:var(--muted,#78716c);transition:transform .2s}
  #lo-panel.sheet.open .chev{transform:rotate(180deg)}
  .lo-sheet-b{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 14px 14px}
  /* bottom controls clear the collapsed sheet (60px + safe area) */
  .lo-base{bottom:calc(72px + env(safe-area-inset-bottom))}
  .lo-mapwrap>.compass{bottom:calc(72px + env(safe-area-inset-bottom))}
  /* full width, a rounded box not a pill: fit-content + margin:auto from the
     laptop rule shrank the hint into a blob over the base switch and compass */
  .lo-hint,.lo-meas{left:12px;right:12px;width:auto;margin:0;bottom:calc(124px + env(safe-area-inset-bottom))}
  .lo-hint{border-radius:12px;white-space:normal;text-align:center}
  /* toolbar: one row that scrolls sideways, not three rows that push the map down */
  .lo-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:8px 12px 6px}
  .lo-bar::-webkit-scrollbar{display:none}
  .lo-bar>*{flex:none}
  .lo-bar .lo-sp{display:none}
  /* fingers, not cursors */
  .lo-est{min-height:36px}
  .lo-layers label{min-height:32px}
  .lo-note-p{min-height:32px;padding:4px 10px}
  .lo-pick{min-height:44px}
  .lo-navb{min-height:40px;padding:8px 12px 8px 10px}
  .lo-meas-acts button{min-height:40px}
}
/* No 300ms tap delay, no grey flash on tap -- Android and iOS alike. */
#lo-map .leaflet-bar a,.lo-full-btn,.lo-base button,.lo-navb,.lo-pick,.lo-est,.lo-note-p,.lo-lg-tog,
.lo-meas-acts button,.lo-layers label,.lo-row.is-link{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

.lo-prov{font-size:12px}
.lo-prov summary{cursor:pointer;padding:4px 10px;border:1px solid var(--line,#e7e5e4);
  border-radius:6px;background:#fff;list-style:none;display:flex;gap:8px;align-items:center}
.lo-prov summary::-webkit-details-marker{display:none}
.lo-prov summary::after{content:'▾';color:var(--muted,#78716c);font-size:10px}
.lo-prov[open] summary::after{content:'▴'}
.lo-prov-b{margin-top:6px;padding:8px 10px;background:var(--bg-soft,#f5f5f4);border-radius:8px;
  min-width:340px}

.lo-lbl{font-size:11px;font-weight:600;color:#fff;white-space:nowrap;pointer-events:none;
  text-shadow:0 0 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7);line-height:1}
/* Leaflet positions the marker with its own inline translate3d and overwrites any
   transform set here, so the centring has to live on a child it does not touch. */
.lo-lbl > span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:max-content}
.lo-lbl-certificates{font-weight:500;font-size:10px;color:#ffeab8;
  text-shadow:0 0 3px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.8)}
/* a 9px drop so a certificate number never stacks exactly on its plot code */
.lo-lbl-certificates > span{transform:translate(-50%,calc(-50% + 9px))}

/* Legal map search — one box for plot code, certificate number or owner name. */
/* Search floats ON the map. It is the primary way into this data -- every real
   question here starts with a plot code, a certificate number or a name -- so it
   is sized and raised to be found without hunting, and given a solid white card
   with a shadow so it stays legible over orthophoto imagery of any colour.
   z-index clears Leaflet's own panes (400) and controls (800). */
/* Centred over the map, not tucked into its left edge. Pinned to a corner it read
   as one more control among the zoom and layer boxes and went unseen; in the
   middle it is the first thing on the map, which is what it is for. */
.lo-search{position:absolute;z-index:820;top:12px;
  left:50%;transform:translateX(-50%);
  width:min(460px,calc(100% - 120px));height:40px;
  display:flex;align-items:center;gap:8px;padding:0 12px;background:#fff;
  border:1px solid var(--line,#e7e5e4);border-radius:10px;
  box-shadow:0 6px 20px rgba(1,17,50,.20),0 1px 3px rgba(1,17,50,.12)}
.lo-search:focus-within{border-color:#011132;box-shadow:0 0 0 3px rgba(1,17,50,.14),0 6px 20px rgba(1,17,50,.18)}
.lo-search>.ic{width:17px;height:17px;color:var(--muted,#78716c);flex:0 0 auto}
.lo-search input{flex:1;min-width:0;padding:0;font:inherit;font-size:14px;
  border:0;background:transparent;color:var(--ink,#1c1917)}
.lo-search input::placeholder{color:var(--muted,#78716c)}
.lo-search input:focus{outline:none}
.lo-search input::-webkit-search-cancel-button{cursor:pointer}
@media (max-width:900px){.lo-search{width:calc(100% - 24px)}}
/* The Legal map's own dropdown rules stood here. It uses the shared `.sq-drop`
   now, and leaving these behind would have been worse than dead code: they
   target by id, so they outrank the shared class and would have quietly
   restyled one of the three boxes. `.gdrop` stays -- the digitizer's plot
   picker (#mm-tbdrop) is still on it. */

/* ══════════════════════════════════════════════════════════════════════════
   SHARED SEARCH (web/js/search.js) — appended block, owned by search.js.
   One dropdown skin for the top bar, the Sales map, the Legal map and the
   Ctrl+K palette. Deliberately its own class (`sq-`) rather than reusing
   `.gdrop` or `#lo-hits`: those two disagree on layout, on how "open" is
   expressed (.hidden vs .on) and on row shape, and merging them in place
   would need edits inside those rules. Once the three call sites are moved,
   the `.gdrop` block (line ~105) and the `#lo-hits` block (line ~1002) are
   dead and can be deleted.
   ══════════════════════════════════════════════════════════════════════════ */
.sq-drop{display:none;position:absolute;z-index:900;top:calc(100% + 6px);left:0;right:0;
  background:var(--card,#fff);border:1px solid var(--hair,#e7e5e4);border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.28);overflow:hidden auto;max-height:min(52vh,420px)}
.sq-drop.on{display:block}
.sq-drop .sq-g{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3,#a8a29e);padding:9px 13px 3px;background:var(--card,#fff);
  position:sticky;top:0;z-index:1}
.sq-drop button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:8px 13px;background:none;border:0;border-bottom:1px solid var(--hair-soft,#f5f5f4);
  cursor:pointer;font:inherit;color:inherit}
.sq-drop button:last-child{border-bottom:0}
.sq-drop button:hover,.sq-drop button.on{background:var(--bg-soft,#f5f5f4)}
.sq-drop b{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:650;min-width:0}
.sq-drop b i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3,#a8a29e);flex:0 0 auto}
.sq-drop span{font-size:12px;color:var(--ink-2,#57534e);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* the matched run — why this row is here */
.sq-drop em{font-style:normal;background:#fdf1d0;box-shadow:inset 0 -1px 0 #d4a648;border-radius:2px}
.sq-drop .sq-none{padding:11px 13px;font-size:12.5px;color:var(--muted,#78716c)}
/* the server layer is still out; the local rows above are already usable */
.sq-drop .sq-more{padding:7px 13px;font-size:11px;color:var(--ink-3,#a8a29e);
  border-top:1px solid var(--hair-soft,#f5f5f4)}
.sq-drop .sq-date{display:flex;align-items:center;gap:8px;padding:9px 13px;font-size:12px;
  font-weight:700;color:var(--logo,#011132);background:var(--st-green-bg,#ecfdf5);
  border-bottom:1px solid var(--hair,#e7e5e4)}
.sq-drop .sq-date span{margin-left:auto;font-weight:600}

/* Ctrl+K / Cmd+K palette — same rows, same keys, centred over everything. */
.sq-pal{position:fixed;inset:0;z-index:9000;background:rgba(12,10,9,.42);
  display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;
  backdrop-filter:blur(2px)}
.sq-pal-box{position:relative;width:min(620px,100%)}
.sq-pal-in{display:flex;align-items:center;gap:9px;padding:12px 14px;
  background:var(--card,#fff);border:1px solid var(--hair,#e7e5e4);border-radius:12px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.sq-pal-in svg{width:18px;height:18px;color:var(--muted,#78716c);flex:0 0 auto}
.sq-pal-in input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;
  color:inherit}
.sq-pal-in input:focus{outline:none}
.sq-pal-in kbd{flex:0 0 auto;font:inherit;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3,#a8a29e);border:1px solid var(--hair,#e7e5e4);
  border-radius:5px;padding:2px 6px}
@media (prefers-reduced-motion:no-preference){
  .sq-pal-box{animation:sq-in .13s ease-out}
  @keyframes sq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}