:root{--bg:#e8edf1;--ink:#14243a;--mut:#5d6b7c;--line:#cfd8e0;--soft:#eef2f6;--panel:#fff;--acc:#0b5cff;--hit:#ffb21e;--bad:#c4361d;--good:#17794a;--r:10px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Public Sans",system-ui,sans-serif}
h1,h2,.brand,.num,.btn,.dname,.tab{font-family:"Familjen Grotesk",system-ui,sans-serif}
h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .6rem;font-weight:700}
h2{font-size:1.25rem;margin:0 0 1rem}
a{color:var(--acc)}
.muted{color:var(--mut);font-size:.9rem}
button{font:inherit}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem clamp(1rem,4vw,3rem);background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.2rem;text-decoration:none;color:var(--ink)}
.bar a.muted{text-decoration:none}.bar a.muted:hover{color:var(--ink)}
label{display:block;font-weight:500;margin:0 0 1rem}
input,select,textarea{display:block;width:100%;margin-top:.35rem;padding:.7rem .8rem;font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:8px}
input:focus,select:focus,textarea:focus{outline:3px solid #0b5cff40;border-color:var(--acc)}
.btn:focus-visible,.link:focus-visible,.act:focus-visible,.tb:focus-visible,.tab:focus-visible,.more:focus-visible{outline:3px solid #0b5cff66;outline-offset:2px}
.big{font:600 1.8rem "Familjen Grotesk",sans-serif;padding:.8rem 1rem;letter-spacing:.02em;margin:0}
.btn{display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:.8rem 1.4rem;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:#0b1626}.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.narrow{max-width:26rem;margin:8vh auto;padding:0 1rem}
.note{padding:.65rem .9rem;border-radius:8px;background:#dbe6f5;border-left:4px solid var(--acc)}
.note.warn{background:#fbe5df;border-color:var(--bad)}.note.ok{background:#dcf1e6;border-color:var(--good);margin-bottom:1rem}
.ok{color:var(--good)}.bad{color:var(--bad)}
.empty{color:var(--mut);padding:2.5rem 1rem;text-align:center;border:1.5px dashed var(--line);border-radius:var(--r)}
.tag{display:inline-block;font-size:.78rem;font-weight:600;padding:.1rem .45rem;border-radius:5px;background:var(--soft);color:var(--mut)}
.tag.hit{background:var(--hit);color:#2b1c00}
.camp{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .5rem;border-radius:4px;background:var(--ink);color:#fff;letter-spacing:.03em;text-transform:uppercase}
.camp.none{background:var(--soft);color:var(--mut)}
.link{background:none;border:0;padding:0;font-size:.9rem;color:var(--acc);cursor:pointer;text-decoration:underline}.link.danger{color:var(--bad)}

/* Campaign tabs: pill row under the header */
.tabs{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 2px 6px #14243a0d}
.tabs-in{display:flex;flex-wrap:wrap;gap:.45rem;padding:.7rem clamp(1rem,4vw,3rem)}
.tab{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.05rem;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;line-height:1.2;transition:background .12s,border-color .12s}
.tab:hover{border-color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tab .n{min-width:1.4rem;padding:0 .4rem;border-radius:999px;background:var(--soft);color:var(--mut);font-size:.78rem;text-align:center;font-family:"Public Sans",sans-serif}
.tab .n:empty{display:none}
.tab.on .n{background:#ffffff26;color:#fff}

/* US tile map */
.map{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.tile{margin:0;font-weight:400;position:relative}
.tile input{position:absolute;opacity:0;width:0;height:0;margin:0}
.tile span{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:1.5px solid var(--line);border-radius:7px;cursor:pointer;user-select:none;line-height:1.05;
  background:color-mix(in srgb,var(--acc) calc(var(--t,0)*38%),#fff);transition:background .1s,border-color .1s,transform .1s}
.tile b{font:700 .82rem "Familjen Grotesk",sans-serif}
.tile small{font-size:.62rem;color:var(--mut);min-height:.7em}
.tile:hover span{border-color:var(--ink);transform:translateY(-1px)}
.tile.none span{background:#f6f8fa;color:#9aa6b2}
.tile.from span{background:var(--hit);border-color:#c98600;color:#2b1c00}.tile.from small{color:#5c3d00}
.tile input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}.tile input:checked+span small{color:#c9d3df}
.tile input:focus-visible+span{outline:3px solid #0b5cff66;outline-offset:1px}
.legend{margin:.6rem 0 0;font-size:.8rem}
.sw{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;vertical-align:-1px;background:color-mix(in srgb,var(--acc) 38%,#fff);border:1px solid var(--line)}
.sw.from{background:var(--hit)}.sw.pick{background:var(--ink)}

/* Agent screen: fits one viewport; only the results list scrolls */
.finder{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.5rem);max-width:78rem;margin:0 auto;padding:1.4rem clamp(1rem,4vw,3rem)}
.biglabel{font-weight:600;margin:0 0 .4rem}
.phone{position:relative}
.phone .x{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);border:0;background:var(--soft);color:var(--mut);width:2rem;height:2rem;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer}
.phone .x:hover{background:var(--line);color:var(--ink)}
.info{min-height:2.9rem;padding:.5rem 0 .3rem}
.maphead{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-weight:600;font-size:.95rem;margin:.3rem 0 .5rem;flex-wrap:wrap}
.pickedst{font-weight:400;font-size:.9rem}
.out{display:flex;flex-direction:column;min-height:0}
.outhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap}.outhead h2{margin:0}
.list{display:flex;flex-direction:column;gap:.5rem;overflow:auto;padding:0 .3rem .5rem 0}
@media(min-width:861px){body.agent{height:100vh;display:flex;flex-direction:column;overflow:hidden}
  body.agent .finder{flex:1;min-height:0;width:100%}body.agent .ask{overflow:auto}body.agent .list{flex:1;min-height:0}}
.group{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .1rem;font:700 .78rem "Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.group:first-child{margin-top:0}
.group span{background:var(--soft);border-radius:999px;padding:0 .45rem;letter-spacing:0}
.group::after{content:"";flex:1;height:1px;background:var(--line)}
.did{display:grid;grid-template-columns:minmax(6rem,auto) 1fr auto;align-items:center;gap:.4rem 1.2rem;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--acc);border-radius:9px;padding:.65rem .8rem .65rem 1rem}
.dname{font-size:1.6rem;font-weight:700;letter-spacing:.01em;line-height:1.1}
.dmeta{font-size:.88rem;color:var(--mut);display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center}
.dstates{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.more{border:1.5px solid var(--line);background:#fff;border-radius:5px;padding:0 .5rem;font-size:.78rem;font-weight:600;color:var(--mut);cursor:pointer;line-height:1.5}
.more:hover{border-color:var(--ink);color:var(--ink)}
.alltags{display:flex;flex-wrap:wrap;gap:.3rem;flex-basis:100%}
.btn.copy{padding:.55rem 1.1rem;font-size:.95rem}
.btn.copy.done{background:var(--good)}

/* Admin */
.admin{max-width:68rem;margin:0 auto;padding:1.6rem clamp(1rem,4vw,2rem);display:grid;gap:1.4rem}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.stbox{border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin:0 0 1.2rem;background:#fbfcfd}
.sthead{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.6rem}
.count{font-size:.85rem;color:var(--mut)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.4rem}
.tb{border:1.5px solid var(--line);background:#fff;border-radius:7px;padding:.3rem .7rem;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer}
.tb:hover{border-color:var(--ink)}
.sep{width:1px;height:1.4rem;background:var(--line);margin:0 .25rem}
.tbin{flex:1;min-width:12rem;margin:0;padding:.35rem .7rem;font-size:.9rem}
#pasteout{min-height:1.3em;font-size:.85rem;margin-bottom:.4rem}
.stbox .map{max-width:36rem}
.stsum{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.8rem}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}.listhead h2{margin:0}.listhead input{width:18rem;margin:0}
.drow{display:grid;grid-template-columns:minmax(13rem,1.1fr) minmax(0,1.6fr) auto;gap:.6rem 1.2rem;align-items:center;padding:.8rem .6rem;border-top:1px solid var(--line);border-radius:6px}
.drow:hover{background:#f7f9fb}
.drow.editing{background:#eef4ff;box-shadow:inset 3px 0 0 var(--acc)}
.drow .dname{font-size:1.25rem;display:flex;align-items:center;gap:.5rem}
.drow.off .dname{color:var(--mut)}
.status{font:600 .7rem "Public Sans",sans-serif;padding:.05rem .45rem;border-radius:999px;letter-spacing:.02em}
.status.on{background:#dcf1e6;color:var(--good)}.status.paused{background:#fdeccb;color:#8a5300}
.dnum{font-variant-numeric:tabular-nums}
.dnum::before{content:"☎ ";opacity:.6}
.stcount{font-size:.8rem;font-weight:600;color:var(--ink);margin-right:.2rem}
.dstates.open>.tag{display:none}
.acts{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.act{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:7px;padding:.35rem .7rem;font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2}
.act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act:hover{border-color:var(--ink);background:var(--soft)}
.act.danger{color:var(--bad)}.act.danger:hover{border-color:var(--bad);background:#fbe5df}
.pager{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap}
.pager a,.pager b{min-width:2rem;text-align:center;padding:.25rem .5rem;border-radius:6px;border:1.5px solid var(--line);text-decoration:none}
.pager b{background:var(--ink);color:#fff;border-color:var(--ink)}
.crow{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-top:1px solid var(--line);flex-wrap:wrap}
.crow input{width:16rem;margin:0;padding:.45rem .6rem}.crow .btn{padding:.5rem 1rem}

@media(max-width:860px){.finder{grid-template-columns:1fr}.list{max-height:none}.row2{grid-template-columns:1fr}
  .drow{grid-template-columns:1fr}.acts{justify-content:flex-start}.did{grid-template-columns:1fr auto}.did .dstates{grid-column:1/-1;grid-row:2}
  .bar>.muted{display:none}.listhead input{width:100%}}
@media(max-width:420px){.map{gap:2px}.tile b{font-size:.68rem}.tile small{display:none}}
@media(prefers-reduced-motion:no-preference){.did{animation:in .25s ease-out}@keyframes in{from{opacity:0;transform:translateY(4px)}}}