/* Tokens match the build log page so the two read as one property. */
:root{
  --bg:#f7f7f5; --panel:#fff; --ink:#16181d; --muted:#5f6672; --line:#e3e4e0;
  --accent:#1d6f5c; --warn:#8a5a12; --warn-bg:#fdf6e7;
  --clear:#1d6f5c; --constrained:#a33a2c; --unknown:#8a5a12; --none:#9aa1ad;
  --shadow:0 1px 2px rgba(16,18,21,.06), 0 8px 24px rgba(16,18,21,.06);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101215; --panel:#171a1f; --ink:#e8eaed; --muted:#9aa1ad; --line:#272b32;
    --accent:#5cc0a2; --warn:#e0b357; --warn-bg:#2a2213;
    --clear:#5cc0a2; --constrained:#e07a68; --unknown:#e0b357; --none:#6b727e;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* The console is an app view: the shell is fixed and only the list scrolls. */
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
}

/* ── bar ─────────────────────────────────────────────────────────────────── */
.bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 1rem; background:var(--panel);
  border-bottom:1px solid var(--line);
}
.bar-left{display:flex; align-items:baseline; gap:.5rem; min-width:0}
.mark{
  font:600 .78rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.sep{color:var(--line)}
.where{color:var(--muted); font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-right{display:flex; align-items:center; gap:.6rem}
.ghost{
  color:var(--muted); text-decoration:none; font-size:.82rem;
  border:1px solid var(--line); border-radius:.4rem; padding:.25rem .55rem;
}
.ghost:hover{color:var(--ink); border-color:var(--muted)}

/* ── layout ──────────────────────────────────────────────────────────────── */
.split{flex:1 1 auto; display:grid; grid-template-columns:minmax(22rem,34rem) 1fr; min-height:0}
.panel{
  display:flex; flex-direction:column; min-height:0;
  border-right:1px solid var(--line); background:var(--bg);
}
.panel-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.panel-head h1{margin:0; font-size:.95rem; font-weight:600; letter-spacing:-.01em}
.count{color:var(--muted); font-weight:400}
.panel-actions{display:flex; gap:.4rem}
.mapwrap{position:relative; min-height:0}
#map{position:absolute; inset:0; background:var(--panel)}

@media (max-width:860px){
  body{overflow:auto; height:auto; min-height:100dvh}
  .split{grid-template-columns:1fr}
  .panel{border-right:0; border-bottom:1px solid var(--line)}
  .mapwrap{height:60dvh}
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  font:inherit; font-size:.82rem; padding:.35rem .7rem; border-radius:.4rem;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--muted)}
.btn:disabled{opacity:.5; cursor:default}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-primary{color:#0d1a16}
}
.btn-danger{color:var(--constrained); border-color:var(--line)}

/* ── adder ───────────────────────────────────────────────────────────────── */
.adder{flex:0 0 auto; padding:.85rem 1rem; border-bottom:1px solid var(--line); background:var(--panel)}
.adder label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:.4rem}
.adder code{font-size:.78rem; background:var(--bg); padding:.05rem .3rem; border-radius:.25rem}
.adder textarea{
  width:100%; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:.55rem; border:1px solid var(--line); border-radius:.4rem;
  background:var(--bg); color:var(--ink); resize:vertical;
}
.adder-actions{display:flex; gap:.4rem; margin-top:.5rem}

/* ── list ────────────────────────────────────────────────────────────────── */
.list{flex:1 1 auto; overflow-y:auto; padding:.6rem}
.empty{padding:2.5rem 1.25rem; text-align:center; color:var(--muted); font-size:.88rem}

.row{
  background:var(--panel); border:1px solid var(--line); border-radius:.55rem;
  padding:.7rem .8rem; margin-bottom:.5rem; cursor:pointer;
}
.row:hover{border-color:var(--muted)}
.row.selected{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.row-head{display:flex; align-items:center; gap:.5rem}
.row-name{font-weight:600; font-size:.9rem}
.row-coords{
  margin-left:auto; color:var(--muted);
  font:12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.row-where{margin-top:.35rem; font-size:.85rem}
.row-where .sub{color:var(--muted)}
.row-meta{
  margin-top:.4rem; display:flex; flex-wrap:wrap; gap:.35rem .5rem;
  font-size:.76rem; color:var(--muted);
}
.row-actions{margin-top:.55rem; display:flex; gap:.35rem}

.dot{width:.6rem; height:.6rem; border-radius:50%; display:inline-block; flex:0 0 auto}
.dot-clear{background:var(--clear)}
.dot-constrained{background:var(--constrained)}
.dot-unknown{background:var(--unknown)}
.dot-none{background:var(--none)}

.pill{
  font-size:.7rem; padding:.1rem .45rem; border-radius:1rem;
  border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.pill-clear{color:var(--clear); border-color:color-mix(in srgb,var(--clear) 40%,transparent)}
.pill-constrained{color:var(--constrained); border-color:color-mix(in srgb,var(--constrained) 45%,transparent)}
.pill-unknown{color:var(--unknown); border-color:color-mix(in srgb,var(--unknown) 45%,transparent)}
.pill-muted{color:var(--muted)}

.warnline{
  margin-top:.4rem; font-size:.76rem; color:var(--warn);
  background:var(--warn-bg); border-radius:.35rem; padding:.3rem .45rem;
}

.note{margin:.5rem 0 0; font-size:.8rem; color:var(--muted)}
.footnote{
  flex:0 0 auto; margin:0; padding:.6rem 1rem; font-size:.74rem; color:var(--muted);
  border-top:1px solid var(--line); background:var(--panel);
}

/* ── map bits ────────────────────────────────────────────────────────────── */
.maplegend{
  position:absolute; left:.6rem; bottom:.6rem; z-index:500;
  background:var(--panel); border:1px solid var(--line); border-radius:.45rem;
  padding:.4rem .55rem; font-size:.72rem; color:var(--muted);
  display:flex; flex-direction:column; gap:.2rem; box-shadow:var(--shadow);
}
.maplegend span{display:flex; align-items:center; gap:.4rem}
.leaflet-container{background:var(--bg); font:inherit}
.pin{
  display:block; width:.85rem; height:.85rem; border-radius:50%;
  border:2px solid var(--panel); box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.pin-clear{background:var(--clear)}
.pin-constrained{background:var(--constrained)}
.pin-unknown{background:var(--unknown)}
.pin-none{background:var(--none)}
.pin.is-selected{transform:scale(1.5)}

/* ── detail sheet ────────────────────────────────────────────────────────── */
.detail{
  position:fixed; inset:0; z-index:1000; background:rgba(16,18,21,.45);
  display:flex; justify-content:flex-end;
}
.detail-inner{
  background:var(--panel); width:min(38rem,100%); height:100%; overflow-y:auto;
  padding:1.4rem 1.5rem 3rem; border-left:1px solid var(--line); position:relative;
}
.detail-close{
  position:absolute; top:.7rem; right:.9rem; font-size:1.5rem; line-height:1;
  background:none; border:0; color:var(--muted); cursor:pointer;
}
.detail h2{margin:0 0 .2rem; font-size:1.15rem; letter-spacing:-.01em}
.detail .coords{
  color:var(--muted); font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  margin:0 0 1.2rem;
}
.detail h3{
  margin:1.5rem 0 .5rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.88rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.crit{border:1px solid var(--line); border-radius:.5rem; padding:.7rem .8rem; margin-bottom:.5rem}
.crit-head{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.crit-head strong{font-size:.88rem; font-weight:600}
.crit p{margin:.45rem 0 0; font-size:.8rem; color:var(--muted)}
.src{margin-top:.5rem; font-size:.76rem; color:var(--muted)}
.src b{color:var(--ink); font-weight:600}
.limits{margin:1.2rem 0 0; padding-left:1.1rem; font-size:.78rem; color:var(--muted)}
.limits li{margin-bottom:.3rem}

/* ── in-flight ───────────────────────────────────────────────────────────
   A point being screened right now is its own state. Leaving it looking
   "not screened" while a request is out is how someone clicks it twice. */
:root{--running:#3f6ea8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--running:#7aa9dd}}
.dot-running,.pin-running{background:var(--running); animation:pulse 1.1s ease-in-out infinite}
.pill-running{color:var(--running); border-color:color-mix(in srgb,var(--running) 45%,transparent)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .dot-running,.pin-running{animation:none}
}

.progress{
  flex:0 0 auto; margin:0; padding:.5rem 1rem; font-size:.8rem; color:var(--running);
  background:var(--panel); border-bottom:1px solid var(--line);
}

/* ── unlock ──────────────────────────────────────────────────────────────── */
.unlock-body{
  display:flex; align-items:center; justify-content:center; padding:1.25rem;
  height:100dvh; overflow:auto;
}
.unlock{
  background:var(--panel); border:1px solid var(--line); border-radius:.7rem;
  padding:2rem 1.9rem; width:min(26rem,100%); box-shadow:var(--shadow);
}
.unlock .mark{
  font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem;
}
.unlock h1{margin:0 0 .4rem; font-size:1.1rem; letter-spacing:-.01em}
.unlock label{display:block; margin:1.1rem 0 .35rem; font-size:.78rem; color:var(--muted)}
.unlock input{
  width:100%; font:inherit; padding:.5rem .6rem; border:1px solid var(--line);
  border-radius:.4rem; background:var(--bg); color:var(--ink);
}
.unlock button{margin-top:.9rem; width:100%; padding:.5rem}
.unlock a{color:var(--accent)}
.unlock-error{
  margin:.9rem 0 0; padding:.5rem .6rem; border-radius:.4rem;
  background:var(--warn-bg); color:var(--warn); font-size:.82rem;
}
.note.small{font-size:.74rem; margin-top:1rem}

/* ── site profile on a row ──────────────────────────────────────────────────
   The buildable figure is the answer the console exists to give, so it gets
   its own line above the screening meta rather than joining the dot-separated
   run of it. */
.row-profile { margin: .35rem 0 .1rem; font-size: .92rem; line-height: 1.45; }
.row-profile .rank {
  display: inline-block; min-width: 1.9em; padding: 0 .35em;
  border-radius: 3px; background: var(--rank-bg, #2b3444); color: var(--rank-fg, #dfe6f2);
  font-variant-numeric: tabular-nums; font-weight: 600; text-align: center;
}
.row-profile .sub { opacity: .72; }
.row-note {
  margin: .2rem 0 .1rem; font-size: .86rem; opacity: .8; font-style: italic;
}