/* Volterris Site Finder — shared design system.
   Palette: natural greens on survey-paper neutrals, matching volterris.com. */
:root{
  --bg:#F4F5F1; --surface:#FFFFFF; --surface-2:#EAECE4; --ink:#171A15;
  --ink-2:#464C41; --muted-t:#6E7566;
  --rule:#D6DACD; --rule-soft:#E4E7DD;
  --accent:#3E6B4A; --accent-2:#2E5238; --accent-bg:#E3EDE5;
  --good:#35664A; --good-bg:#DCEAE1;
  --warn:#8A6510; --warn-bg:#F3E8CE;
  --bad:#9E2B1E;  --bad-bg:#F3DCD8;
  --info:#3C6B75; --info-bg:#DCE9EB;
  --shadow:0 1px 2px rgba(23,26,21,.06),0 4px 12px rgba(23,26,21,.05);
  --f-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-b:"Source Serif 4",Georgia,serif;
  --f-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111309; --bg:#12140F; --surface:#1A1D17; --surface-2:#23271F; --ink:#E8EADF;
  --ink-2:#C0C5B5; --muted-t:#8D9484; --rule:#2E3327; --rule-soft:#262A20;
  --accent:#7FB08D; --accent-2:#9CC7A8; --accent-bg:#1E2A21;
  --good:#82B695; --good-bg:#1B2A21;
  --warn:#D3A44F; --warn-bg:#2C2517;
  --bad:#E27B69;  --bad-bg:#31201C;
  --info:#7FB2BE; --info-bg:#1B2A2E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --bg:#12140F; --surface:#1A1D17; --surface-2:#23271F; --ink:#E8EADF;
  --ink-2:#C0C5B5; --muted-t:#8D9484; --rule:#2E3327; --rule-soft:#262A20;
  --accent:#7FB08D; --accent-2:#9CC7A8; --accent-bg:#1E2A21;
  --good:#82B695; --good-bg:#1B2A21; --warn:#D3A44F; --warn-bg:#2C2517;
  --bad:#E27B69; --bad-bg:#31201C; --info:#7FB2BE; --info-bg:#1B2A2E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-b);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--f-d);margin:0;text-wrap:balance}
code,.mono{font-family:var(--f-m);font-size:.85em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ── App chrome ── */
.topbar{display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem;
        background:var(--surface);border-bottom:1px solid var(--rule);
        position:sticky;top:0;z-index:600}
.brand{font-family:var(--f-d);font-weight:700;letter-spacing:.12em;
       text-transform:uppercase;font-size:.95rem;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.topbar nav{display:flex;gap:.3rem;margin-left:.6rem}
.topbar nav a{font-family:var(--f-d);font-size:.8rem;font-weight:600;letter-spacing:.04em;
   padding:.35rem .7rem;border-radius:3px;color:var(--ink-2);text-decoration:none}
.topbar nav a:hover{background:var(--surface-2)}
.topbar nav a.on{background:var(--accent-bg);color:var(--accent-2)}
.spacer{flex:1}
.who{font-family:var(--f-d);font-size:.76rem;color:var(--muted-t);text-align:right;line-height:1.3}
.who b{display:block;color:var(--ink);font-size:.82rem}
.rolechip{display:inline-block;font-family:var(--f-m);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.1rem .4rem;border-radius:2px;
  background:var(--surface-2);color:var(--muted-t)}
.rolechip.admin{background:var(--accent-bg);color:var(--accent-2)}

/* ── Buttons ── */
.btn{font-family:var(--f-d);font-size:.8rem;font-weight:600;letter-spacing:.03em;
     padding:.45rem .85rem;border-radius:3px;border:1px solid var(--rule);
     background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;
     display:inline-flex;align-items:center;gap:.4rem}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Layout ── */
.shell{display:grid;grid-template-columns:26rem 1fr;height:calc(100vh - 3.1rem)}
@media(max-width:60rem){.shell{grid-template-columns:1fr;height:auto}
  #map{height:22rem !important}}
.sidebar{overflow-y:auto;border-right:1px solid var(--rule);background:var(--bg)}
#map{height:100%;background:var(--surface-2)}

.panel{padding:.9rem 1rem;border-bottom:1px solid var(--rule-soft)}
.panel h2{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
          color:var(--muted-t);margin-bottom:.6rem}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
label.f{display:block;font-family:var(--f-d);font-size:.68rem;letter-spacing:.06em;
        text-transform:uppercase;color:var(--muted-t);margin-bottom:.2rem}
input,select,textarea{width:100%;font-family:inherit;font-size:.88rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:.4rem .5rem}
textarea{min-height:5rem;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}

/* ── Site cards ── */
.count{font-family:var(--f-m);font-size:.72rem;color:var(--muted-t);padding:.5rem 1rem;
       border-bottom:1px solid var(--rule-soft)}
.card{display:block;padding:.8rem 1rem;border-bottom:1px solid var(--rule-soft);
      text-decoration:none;color:inherit;cursor:pointer}
.card:hover,.card.active{background:var(--surface)}
.card-top{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.35rem}
.card-title{font-family:var(--f-d);font-weight:600;font-size:.95rem;flex:1;line-height:1.25}
.scorebadge{font-family:var(--f-d);font-weight:700;font-size:.9rem;min-width:2.1rem;
  text-align:center;padding:.15rem .35rem;border-radius:3px;color:#fff;
  font-variant-numeric:tabular-nums}
.card-meta{font-family:var(--f-m);font-size:.72rem;color:var(--muted-t);
           display:flex;flex-wrap:wrap;gap:.15rem .7rem}
.pill{display:inline-block;font-family:var(--f-d);font-size:.65rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:.12rem .45rem;border-radius:2px}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.mute{background:var(--surface-2);color:var(--muted-t)}
.empty{padding:2rem 1rem;text-align:center;color:var(--muted-t);font-size:.9rem}

/* ── Detail ── */
.wrap{max-width:74rem;margin:0 auto;padding:1.6rem 1.2rem 4rem}
.detail-head{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:1rem;margin-bottom:1.4rem}
.detail-head h1{font-size:1.7rem;letter-spacing:-.02em;flex:1 1 20rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1rem}
.cardbox{background:var(--surface);border:1px solid var(--rule);border-radius:4px;
         padding:1rem 1.1rem;box-shadow:var(--shadow)}
.cardbox h2{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
            color:var(--accent);margin-bottom:.8rem}
.field{margin-bottom:.7rem}
.field:last-child{margin-bottom:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;margin:0;font-size:.86rem}
dl.kv dt{color:var(--muted-t);font-family:var(--f-d);font-size:.74rem;letter-spacing:.04em;
         text-transform:uppercase;align-self:center}
dl.kv dd{margin:0;font-variant-numeric:tabular-nums}

/* score breakdown bars */
.bar{display:grid;grid-template-columns:8.5rem 1fr 3rem;gap:.6rem;align-items:center;
     font-size:.8rem;margin-bottom:.4rem}
.bar .track{height:.5rem;background:var(--surface-2);border-radius:99px;overflow:hidden}
.bar .fill{height:100%;background:var(--accent);border-radius:99px}
.bar .num{font-family:var(--f-m);font-size:.74rem;text-align:right;color:var(--muted-t)}

table.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
table.tbl th{font-family:var(--f-m);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-t);text-align:left;padding:.45rem .6rem;background:var(--surface-2)}
table.tbl td{padding:.45rem .6rem;border-bottom:1px solid var(--rule-soft)}
.t-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:4px}

.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);font-family:var(--f-d);font-size:.85rem;
  padding:.6rem 1.1rem;border-radius:4px;box-shadow:var(--shadow);z-index:900}
.toast.err{background:var(--bad);color:#fff}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}