:root{
  --bg:#f5f6f8; --panel:#fff; --ink:#0f1b2d; --muted:#566275; --line:#dde2ea; --soft:#eef1f5;
  --navy:#0a3161; --red:#b31942; --gold:#9c7a2c; --goldbg:#f6eedb;
  --ok:#1f7a4d; --okbg:#e2f3e9; --warn:#8a5a00; --warnbg:#fbefd6; --bad:#b3261e; --badbg:#fbe3e1;
  --s1:#0a3161; --s2:#7a4f00; --s3:#8c1534;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b1220; --panel:#121b2c; --ink:#e6ebf3; --muted:#9aa6b9; --line:#25314a; --soft:#18223a;
  --navy:#9dbdf0; --red:#ff8fa1; --gold:#dcb86c; --goldbg:#2e2614;
  --ok:#82d6a8; --okbg:#15301f; --warn:#f0c46a; --warnbg:#382a0e; --bad:#ff9b93; --badbg:#3a1918;
  --s1:#9dbdf0; --s2:#f0c46a; --s3:#ff8fa1; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--navy)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
[hidden]{display:none!important}

.top{display:flex;align-items:center;gap:20px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{font:800 12px/1 var(--display);letter-spacing:.06em;background:var(--navy);color:var(--gold);padding:7px 8px;border-radius:5px}
@media (prefers-color-scheme:dark){.mark{background:#0a3161;color:#dcb86c}}
.word{font:800 20px/1 var(--display);color:var(--navy)}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav a{padding:8px 12px;border-radius:6px;text-decoration:none;color:var(--muted);font-weight:600;font-size:14px;display:flex;gap:6px;align-items:center}
nav a[aria-current="page"]{color:var(--navy);background:var(--soft)}
.badge{background:var(--red);color:#fff;font:600 11px/1 var(--body);padding:3px 6px;border-radius:999px}
.who{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted)}

main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:24px 20px 48px;display:grid;gap:20px;align-content:start}
.foot{border-top:1px solid var(--line);background:var(--panel);padding:16px 20px;font-size:13px;color:var(--muted);display:grid;gap:2px;text-align:center}

h1{font:800 clamp(26px,3.6vw,36px)/1.1 var(--display);margin:0;color:var(--navy);text-wrap:balance}
h2{font:700 20px/1.2 var(--display);margin:0;color:var(--navy)}
h3{font:700 15px/1.3 var(--display);margin:0}
.lede{color:var(--muted);margin:4px 0 0;max-width:72ch}
.kicker{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:12px}

.btn{border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:6px;padding:9px 16px;font-weight:600;cursor:pointer}
@media (prefers-color-scheme:dark){.btn{background:#9dbdf0;color:#0b1220;border-color:#9dbdf0}}
.btn:disabled{opacity:.5;cursor:not-allowed}
.ghost{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:8px 14px;font-weight:600;cursor:pointer;color:var(--ink)}
.ghost.danger{color:var(--bad);border-color:var(--bad)}
.sm{padding:5px 10px;font-size:13px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}

/* sign-in */
.authcard{max-width:440px;margin:40px auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px;display:grid;gap:14px}
label.f{display:grid;gap:5px;font-size:14px;font-weight:600}
label.f input,label.f select,label.f textarea{font-weight:400;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--bg);width:100%}
textarea{resize:vertical;min-height:80px}
.err{color:var(--bad);font-size:14px;min-height:1em}
.notice{background:var(--goldbg);border:1px solid var(--gold);border-radius:8px;padding:14px 16px;display:grid;gap:6px}
.notice ol{margin:4px 0 0;padding-left:20px}

/* the nine tiles */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.sectors{grid-template-columns:1fr}}
.sector{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:8px;border-top:4px solid var(--sc)}
.sector[data-s="1"]{--sc:var(--s1)} .sector[data-s="2"]{--sc:var(--s2)} .sector[data-s="3"]{--sc:var(--s3)}
.sector .sname{font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--sc)}
.labs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lab{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:10px;text-align:left;cursor:pointer;display:grid;gap:4px;min-height:96px;align-content:start}
.lab:hover{border-color:var(--sc)}
.lab[aria-pressed="true"]{outline:2px solid var(--sc);outline-offset:-1px;background:var(--panel)}
.lab .ln{font:600 11px/1 var(--mono);color:var(--muted)}
.lab .lt{font:700 14px/1.15 var(--display)}
.lab .lc{font:800 26px/1 var(--display);color:var(--sc);font-variant-numeric:tabular-nums;margin-top:auto}

.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bar input[type=search]{flex:1 1 220px;min-width:0}
.bar input,.bar select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}

.list{display:grid;gap:8px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;cursor:pointer;text-align:left;width:100%}
.card:hover{border-color:var(--navy)}
.card .nm{font-weight:600}
.card .wh{grid-column:1/-1;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;font:600 11px/1.2 var(--body);padding:3px 8px;border-radius:999px;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.lab-p{background:var(--navy);color:#fff}
@media (prefers-color-scheme:dark){.pill.lab-p{background:#9dbdf0;color:#0b1220}}
.pill.af,.pill.broken,.pill.blocked{background:var(--badbg);color:var(--bad)}
.pill.price{background:var(--warnbg);color:var(--warn)}
.pill.pb{background:var(--goldbg);color:var(--gold)}
.pill.ok{background:var(--okbg);color:var(--ok)}
.addr{font:400 12px var(--mono);color:var(--muted);word-break:break-all}
.more{justify-self:center}
.empty{padding:28px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--line);border-radius:8px}

/* drawer */
dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:0;max-width:min(760px,calc(100vw - 24px));width:100%;max-height:calc(100vh - 24px)}
dialog::backdrop{background:rgba(5,10,20,.5)}
.dh{position:sticky;top:0;background:var(--panel);padding:18px 20px 12px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;justify-content:space-between;z-index:1}
.db{padding:16px 20px 22px;display:grid;gap:18px}
.route{display:flex;gap:4px;flex-wrap:wrap}
.route span{font:600 12px/1 var(--mono);padding:6px 8px;border-radius:5px;background:var(--soft);color:var(--muted)}
.route span.done{background:var(--okbg);color:var(--ok)}
.route span.here{background:var(--navy);color:#fff}
@media (prefers-color-scheme:dark){.route span.here{background:#9dbdf0;color:#0b1220}}
.route span.skip{opacity:.35;text-decoration:line-through}
.gate{display:grid;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
.gate label{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.gate input{margin-top:3px;width:18px;height:18px;accent-color:var(--navy)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.fields{grid-template-columns:1fr}}
.fields .wide{grid-column:1/-1}
.log{display:grid;gap:8px;font-size:14px}
.log div{border-left:3px solid var(--line);padding-left:10px}
.log .when{font:400 12px var(--mono);color:var(--muted)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
th{font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tbox{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:grid;gap:2px;text-align:left;cursor:pointer}
.stat b{font:800 26px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--navy)}
.stat span{font-size:13px;color:var(--muted)}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
#toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:600px){.top{padding:10px 14px} main{padding:18px 14px 40px} .labs{grid-template-columns:repeat(3,1fr)} .lab{min-height:84px;padding:8px} .lab .lc{font-size:22px}}
dialog{overflow-x:hidden}
.db,.db>*,.fields>*,.gate label span{min-width:0}
.db .pill{white-space:normal}
.fields input,.fields select,.fields textarea{max-width:100%}
.gate{overflow-wrap:anywhere}
@media (max-width:600px){
  .top{gap:8px}
  nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}
  nav a{padding:7px 10px;white-space:nowrap}
  .who{margin-left:auto}
  .dh{padding:14px 16px 10px} .db{padding:14px 16px 18px}
}
.gate input{flex:none}
.sectors,.sector,.labs,.lab{min-width:0}
.lab .lt{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media (max-width:600px){
  .sector{padding:10px}
  .labs{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .lab .lt{font-size:12.5px}
  .lab .ln{font-size:10px}
}