/* Discovery (discovery.js): the page, the "Devices on this network" sections, the drawer. Foundation language: hairline rules, mono for values, status as words. Both themes via the shared tokens. */
.dsc-bar{margin:8px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dsc-scope{margin:6px 0 4px}
.dsc-scope .sel{min-width:220px;max-width:100%}
.dsc-q{min-width:240px}
.dsc-seg{max-width:100%;overflow-x:auto}
.dsc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0}
.dsc-tile{display:grid;gap:2px;text-align:left;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);padding:8px 12px;cursor:pointer;color:var(--ink)}
.dsc-tile:hover{border-color:var(--ink3)}
.dsc-tile .lbl{font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.dsc-tile b{font-size:20px;font-weight:600}
.dsc-t td.dsc-st{white-space:nowrap}
.dsc-row{cursor:pointer}
.dsc-row:hover td{background:var(--sf2)}
.dsc-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.dsc-row.dsc-unk td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.dsc-row.dsc-gone{opacity:.72}
.dsc-name .host{font-weight:500}
.dsc-note{font-size:11.5px}
.dsc-vend{white-space:nowrap}
.dsc-vend .ua-chip{--chip:20px;vertical-align:-5px;margin-right:6px}
.dsc-cp{cursor:copy;white-space:nowrap}
button.dsc-cp{background:none;border:0;padding:0;color:inherit;font-size:12px;text-align:left;text-decoration:underline dotted var(--bd2);text-underline-offset:3px}
.dsc-cp:hover{color:var(--acc);text-decoration:underline dotted}
.dsc-type{white-space:nowrap}
.dsc-sub{font-size:11.5px;color:var(--ink3)}
.dsc-more,.dsc-none{margin:8px 0 0;max-width:80ch}
.dsc-site{margin:0 0 8px}
.dsc-h{margin:10px 0 4px;font:600 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.hub-disc{margin-top:18px}
.dsc-setup{margin:18px 0;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf)}
.dsc-setup summary{cursor:pointer;padding:10px 14px;font-weight:600}
.dsc-setupb{padding:0 16px 14px;max-width:96ch}
.dsc-setupb h3{margin:14px 0 4px;font:600 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.dsc-steps{margin:6px 0 10px;padding-left:20px;display:grid;gap:4px}
.dsc-pre{max-height:220px;overflow:auto;border:1px solid var(--bd2);border-radius:var(--r);background:var(--bg);padding:10px 12px;font-size:11.5px;white-space:pre;margin:0 0 8px}
.dsc-snipa{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dsc-sites{margin-top:22px}
.dsc-expl{max-width:90ch;margin:0 0 8px}
.dsc-sw{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.dsc-if{display:inline-flex;gap:6px;align-items:center;margin:2px 10px 2px 0;font-size:12.5px}
.dsc-st td.n{text-align:right}
/* the drawer: a panel from the right, a bottom sheet on phones */
.dsc-drawer{position:fixed;inset:0;z-index:60}
.dsc-drawer[hidden]{display:none}
.dsc-dr-bg{position:absolute;inset:0;background:var(--scrim,rgba(0,0,0,.45))}
.dsc-dr-panel{position:absolute;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--sf);border-left:1px solid var(--bd2);overflow:auto;padding:14px 18px 24px;display:grid;gap:12px;align-content:start}
.dsc-dr-h{display:flex;gap:10px;align-items:center;justify-content:space-between}
.dsc-dr-t{display:flex;gap:10px;align-items:center;min-width:0;flex-wrap:wrap;font-size:15px}
.dsc-dr-kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;margin:0;font-size:12.5px}
.dsc-dr-kv dt{color:var(--ink3)}
.dsc-dr-kv dd{margin:0;overflow-wrap:anywhere}
.dsc-dr-s{border-top:1px solid var(--bd);padding-top:10px;display:grid;gap:8px}
.dsc-dr-s h3{margin:0;font:600 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.dsc-dr-s .sel{width:100%;box-sizing:border-box}
.dsc-dr-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dsc-dr-acts a.btn{text-decoration:none}
.dsc-dr-acts .sel{flex:1 1 220px;width:auto}
body.dsc-dr-open{overflow:hidden}
@media (max-width:719px){
  .dsc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dsc-q{min-width:0;width:100%}
  .dsc-scope .sel{width:100%}
  /* phone: each row is a card (name and status first, the rest labelled by data-l) */
  .dsc-t,.dsc-t tbody,.dsc-t tr,.dsc-t td{display:block;width:auto!important;max-width:none!important;box-sizing:border-box}
  .dsc-t colgroup,.dsc-t thead,.dsc-t .rz-handle,.dsc-t .ua-grip{display:none!important}
  .dsc-t tr{border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);margin:0 0 10px;padding:8px 12px}
  .dsc-t td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:4px 0;text-align:right;white-space:normal;min-width:0!important;background:none!important;box-shadow:none!important}
  .dsc-t td::before{content:attr(data-l);color:var(--ink3);font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;text-align:left;flex:none}
  .dsc-t td[data-l=""]::before{content:none}
  .dsc-t tr{display:flex;flex-direction:column}
  .dsc-t td[data-l="First seen"],.dsc-t td[data-l="Type"]:empty{display:none}
  .dsc-row.dsc-unk{border-left:3px solid var(--warn)}
  .dsc-row td.dsc-name{order:-2;display:block;text-align:left;font-size:14px;padding-bottom:2px}
  .dsc-row td.dsc-name::before{content:none}
  .dsc-row td.dsc-st{order:-1;justify-content:flex-start}
  .dsc-cp,.dsc-row .btn,.dsc-row .quick-btn{min-height:36px}
  .dsc-st td[data-l="Networks"]{display:block;text-align:left}
  .dsc-st td[data-l="Networks"]::before{display:block}
  .dsc-dr-panel{top:auto;left:0;width:100%;max-height:92vh;border-left:0;border-top:1px solid var(--bd2);border-radius:12px 12px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .dsc-dr-kv{grid-template-columns:96px minmax(0,1fr)}
  .dsc-dr-acts .btn{min-height:44px}
}