:root{
  --bg:#f5f5f8;
  --surface:#ffffff;
  --surface-2:#fafafb;
  --border:#ececf1;
  --border-2:#e3e3ea;
  --text:#33353d;
  --muted:#9498a3;
  --faint:#b7bbc5;

  --accent:#6f78d9;
  --accent-hover:#616bd0;
  --accent-soft:#eef0fc;
  --accent-bar:#aab2ef;

  --green:#5aa981;   --green-dot:#74c19a; --green-soft:#eaf5ef;
  --amber:#b9843f;   --amber-dot:#e6b46e; --amber-soft:#fbf1e2;
  --off:#8b8f99;     --off-dot:#c6c9d2;   --off-soft:#f1f1f4;
  --rose:#cf6a82;    --rose-soft:#fdecef;

  --svc-out:#93a8ec; --svc-air:#b6a1e6; --svc-hr:#eec08a;

  --r:16px; --r-sm:10px;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(28,30,42,.04), 0 10px 26px -20px rgba(28,30,42,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.5;font-size:14px;min-height:100vh;
}
.num{font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
::selection{background:var(--accent-soft)}

header{
  position:sticky;top:0;z-index:30;background:rgba(245,245,248,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);padding:14px 30px;display:flex;align-items:center;gap:14px;
}
.word{font-size:16px;font-weight:600;letter-spacing:-.01em}
.word span{color:var(--accent)}
.conn{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-left:6px}
.conn .d{width:7px;height:7px;border-radius:50%;background:var(--green-dot)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.clock{font-size:12.5px;color:var(--faint)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-sm);font-size:13px;font-weight:500;transition:.14s;border:1px solid transparent;
}
.btn svg{width:15px;height:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:not(:disabled):hover{background:var(--accent-hover)}
.btn-soft{background:var(--surface);border-color:var(--border-2);color:var(--text)}
.btn-soft:hover{background:var(--surface-2);border-color:#d8d8e0}
.btn-quiet{color:var(--muted);padding:8px 12px}
.btn-quiet:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{color:var(--rose)}
.btn-danger:hover{background:var(--rose-soft)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px}

.wrap{max-width:1360px;margin:0 auto;padding:26px 30px 70px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.col-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.col-side{display:flex;flex-direction:column;gap:24px;min-width:0}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:10px;padding:18px 20px 14px}
.card-head h2{font-size:14px;font-weight:600;margin:0}
.card-head .n{font-size:12.5px;color:var(--muted);font-weight:450}
.card-head .head-right{margin-left:auto;display:flex;align-items:center;gap:12px}

.mini-counts{display:flex;gap:12px}
.mini{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.mini .dot{width:7px;height:7px;border-radius:50%}

.list{padding:6px 12px 14px;display:flex;flex-direction:column;gap:8px}
.batch{border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.15s;background:var(--surface)}
.batch:hover{border-color:var(--border-2)}
.batch.open{border-color:#dcdcf0;background:var(--surface-2)}
.batch-head{display:flex;align-items:center;gap:16px;padding:14px 15px;cursor:pointer;user-select:none}
.chev{width:15px;height:15px;color:var(--faint);transition:.2s;flex:none}
.batch.open .chev{transform:rotate(90deg);color:var(--accent)}
.b-id{flex:none;min-width:150px}
.b-id .nm{font-size:13.5px;font-weight:550}
.b-id .mt{font-size:11.5px;color:var(--faint);margin-top:2px}
.b-prog{flex:1;min-width:120px;display:flex;flex-direction:column;gap:6px}
.bar{height:6px;border-radius:5px;background:#eeeef4;overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;background:var(--accent-bar);transition:width .6s ease}
.bar.done i{background:var(--green-dot)}
.b-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.b-meta .p{color:var(--text);font-weight:550}
.eta{flex:none;text-align:right;min-width:74px}
.eta .l{font-size:10px;letter-spacing:.04em;color:var(--faint)}
.eta .t{font-size:13.5px;font-weight:600;color:var(--text);margin-top:1px}
.pill{font-size:11px;font-weight:550;padding:3px 9px;border-radius:6px;flex:none;text-transform:capitalize}
.p-running{background:var(--accent-soft);color:var(--accent)}
.p-queued{background:var(--accent-soft);color:var(--accent)}
.p-completed{background:var(--green-soft);color:var(--green)}
.p-killed{background:var(--rose-soft);color:var(--rose)}
.p-scheduled{background:var(--off-soft);color:var(--off)}
.b-act{flex:none;display:flex;gap:4px;align-items:center}
.icon-btn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:.14s}
.icon-btn:hover{background:var(--surface);color:var(--text)}
.icon-btn svg{width:15px;height:15px}
.icon-btn.danger:hover{background:var(--rose-soft);color:var(--rose)}

.batch-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.batch.open .batch-body{grid-template-rows:1fr}
.batch-body>div{overflow:hidden}
.dist{padding:2px 16px 16px;border-top:1px solid var(--border)}
.dist-note{font-size:11.5px;color:var(--muted);margin:13px 0 14px}
.lane{margin-bottom:15px}.lane:last-child{margin-bottom:0}
.lane-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.sdot{width:8px;height:8px;border-radius:3px;flex:none}
.lane-h .sn{font-size:12.5px;font-weight:550}
.lane-h .sc{font-size:11px;color:var(--muted);margin-left:auto}
.nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}
.node{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 10px}
.node-t{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.node-t .pid{font-size:11.5px;font-weight:550}
.node-t .nd{font-size:10.5px;color:var(--muted);margin-left:auto}
.node .bar{height:4px}
/* pool/unclaimed buckets: no progress bar — a bar stuck at 0% reads as a stall,
   and these jobs aren't on a phone at all */
.node-pool{border-style:dashed}
.node-pool .pool-note{font-size:10.5px;color:var(--muted)}

/* live per-job interpreter telemetry, shown inside an expanded batch (Phase 0) */
.live{margin:13px 0 4px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:10px 12px}
.live-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;margin-bottom:6px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green-dot);animation:livepulse 1.8s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(116,193,154,.5)}70%{box-shadow:0 0 0 6px rgba(116,193,154,0)}100%{box-shadow:0 0 0 0 rgba(116,193,154,0)}}
.lrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--border)}
.lmain{min-width:0;flex:1}
.lroute{font-size:12px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.lphone{font-size:10px;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--border-2);border-radius:5px;padding:1px 5px;flex:none}
.lstep{display:flex;align-items:center;gap:7px;margin-top:3px;min-width:0}
.lstate{font-size:10.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:1px 6px;flex:none}
.lstate.st-int{color:var(--amber);background:var(--amber-soft)}
.lstate.st-auth{color:var(--rose);background:var(--rose-soft)}
.laction{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier{font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:2px 6px;border-radius:5px;flex:none}
.tier-det{color:var(--off);background:var(--off-soft)}
.tier-ag{color:var(--accent);background:var(--accent-soft)}
.lconf{font-size:11px;color:var(--muted);width:34px;text-align:right;flex:none}
.lflag{font-size:12.5px;font-weight:700;width:16px;text-align:center;flex:none}
.lflag.ok{color:var(--green)}
.lflag.warn{color:var(--amber)}
.lflag.bad{color:var(--rose)}

/* quarantine + drift (Phase 1 oracle) */
.p-quarantined{background:var(--amber-soft);color:var(--amber)}
.gold-tag{font-size:10px;font-weight:600;color:var(--amber);background:var(--amber-soft);border-radius:5px;padding:1px 6px;vertical-align:middle}
.q-chip{font-size:10.5px;font-weight:600;color:var(--rose);background:var(--rose-soft);border-radius:5px;padding:1px 6px;vertical-align:middle}
.qpanel{margin:12px 0 6px;border:1px solid var(--rose-soft);border-radius:11px;background:#fdf7f8;padding:10px 12px}
.qh{font-size:11.5px;font-weight:600;color:var(--rose);margin-bottom:8px}
.drift-banner{font-size:12px;font-weight:500;color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber-soft);border-radius:8px;padding:8px 10px;margin-bottom:9px}
.qrow{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid var(--rose-soft)}
.qrow:first-of-type{border-top:none}
.qrow.drift .qicon{color:var(--amber)}
.qicon{font-size:14px;flex:none}
.qmain{min-width:0;flex:1}
.qroute{font-size:12px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qreason{font-size:11px;color:var(--rose);font-variant-numeric:tabular-nums;margin-top:2px}
.qtitle{font-weight:600;color:var(--text);margin-left:4px}
.qdesc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45;white-space:normal}
.qh-sub{font-weight:400;color:var(--muted);margin-left:6px}
.qrow.sev-warn .qicon{color:var(--amber)}
.qrow.sev-blocked .qicon{color:var(--rose)}
.drift-banner.sev-blocked{color:var(--rose);background:var(--rose-soft);border-color:var(--rose-soft)}
.drift-banner.sev-warn{color:var(--amber);background:var(--amber-soft)}
/* failed panel: same bones as the quarantine panel, plus the per-row pickup
   chip and the muted note that stands where Retry would be once it's too late */
.fpick{font-size:10.5px;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle;font-variant-numeric:tabular-nums}
.fnote{font-size:11px;color:var(--muted);flex:none;font-style:italic}
.fchip{color:var(--rose)}
.fchip.on,.fchip:hover{background:var(--rose-soft)}
.comp-fx{padding:2px 8px 12px;border-bottom:1px solid var(--border)}
.comp-fx .qpanel{margin-top:0}

.comp{padding:4px 12px 14px}
.comp-row{display:flex;align-items:center;gap:14px;padding:13px 8px;border-bottom:1px solid var(--border)}
.comp-row:last-child{border-bottom:none}
.comp-row .nm{font-size:13px;font-weight:550;min-width:0}
.comp-row .nm .mt{font-size:11px;color:var(--faint);font-weight:400;margin-top:2px}
.comp-fill{flex:1}
.comp-stat{font-size:12px;color:var(--muted);text-align:right;min-width:86px}
.comp-stat b{color:var(--text);font-weight:600}
.comp-when{font-size:11.5px;color:var(--faint);min-width:96px;text-align:right}

.empty{padding:34px 20px;text-align:center;color:var(--faint);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty svg{width:24px;height:24px;opacity:.6}

.phones{padding:8px 12px 14px;display:flex;flex-direction:column;gap:6px;max-height:520px;overflow-y:auto}
.phones::-webkit-scrollbar{width:6px}.phones::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px}
.phone{display:flex;flex-direction:column;gap:0;padding:10px 11px;border-radius:10px;transition:.14s}
.phone:hover{background:var(--surface-2)}
.phone .sd{width:8px;height:8px;border-radius:50%;flex:none}
.phone-head{display:flex;align-items:center;gap:11px;min-width:0}
.phone.idle .sd{background:var(--green-dot)}
.phone.busy .sd{background:var(--amber-dot)}
.phone.offline{opacity:.6}.phone.offline .sd{background:var(--off-dot)}
.phone.degraded .sd{background:var(--rose)}
.phone .pi{min-width:0;flex:1}
.phone .pid{font-size:12.5px;font-weight:550}
.phone .ps{font-size:11px;color:var(--faint);margin-top:1px}
.phone .tag{font-size:10.5px;font-weight:550;padding:2px 8px;border-radius:5px;flex:none;text-transform:capitalize}
.phone.idle .tag{color:var(--green);background:var(--green-soft)}
.phone.busy .tag{color:var(--amber);background:var(--amber-soft)}
.phone.offline .tag{color:var(--off);background:var(--off-soft)}
.phone.degraded .tag{color:var(--rose);background:var(--rose-soft)}

/* Learned controls (Phase 3 capability store). Severity colours are reused from
   the oracle palette so "retired" reads amber like every other heads-up, never
   rose -- a binding retiring itself is the heal loop working, not a fault. */
.cap-sum{font-size:11.5px;color:var(--faint);cursor:default}
.caps{padding:10px 12px 14px;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto}
.caps::-webkit-scrollbar{width:6px}.caps::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px}
.cap{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:6px}
.cap-top{display:flex;align-items:center;gap:9px}
.cap-name{font-size:12.5px;font-weight:550;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* .pill capitalizes each word for the job-status pills; these are sentence-case
   phrases ("Awaiting proof"), so opt out rather than restyle every caller. */
.cap-top .pill{margin-left:auto;cursor:default;text-transform:none}
.cap-loc{font-size:11px;color:var(--muted);background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:4px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.cap-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--faint)}
.cap-meta span{cursor:default}
.cap-shared{color:var(--accent);font-weight:500}
/* The learned overlay carries a ready-made mmt.yaml patch; the dotted underline
   says "there is more here on hover" without spending a row on it. */
.cap-patch{color:var(--muted);border-bottom:1px dotted var(--border);cursor:help}
.pill.sev-good{color:var(--green);background:var(--green-soft)}
.pill.sev-blocked{color:var(--rose);background:var(--rose-soft)}
.pill.sev-warn{color:var(--amber);background:var(--amber-soft)}
.pill.sev-info{color:var(--off);background:var(--off-soft)}
.pill.sev-unknown{color:var(--off);background:var(--off-soft)}

.sched{padding:10px 12px 14px;display:flex;flex-direction:column;gap:8px}
.sr{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:12px 13px;display:flex;flex-direction:column;gap:7px}
.sr-t{display:flex;align-items:center;gap:9px}
.sr-t .nm{font-size:12.5px;font-weight:550}
.switch{margin-left:auto;width:33px;height:19px;border-radius:20px;background:#e2e2ea;position:relative;transition:.16s;flex:none;cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:.16s}
.switch.on{background:var(--accent)}.switch.on::after{left:16px}
.sr .when{font-size:12px;color:var(--accent);font-weight:500}
.sr .det{font-size:11px;color:var(--muted);display:flex;gap:11px;flex-wrap:wrap}

.overlay{position:fixed;inset:0;background:rgba(40,42,54,.28);backdrop-filter:blur(2px);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:min(520px,100%);background:var(--surface);border-radius:18px;box-shadow:0 30px 70px -24px rgba(28,30,42,.4);overflow:hidden;animation:rise .2s ease;max-height:88vh;display:flex;flex-direction:column}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sheet-head{padding:18px 22px 0;display:flex;align-items:flex-start}
.sheet-head .st-title{font-size:15px;font-weight:600}
.sheet-head .x{margin-left:auto;color:var(--faint);width:26px;height:26px;display:grid;place-items:center;border-radius:7px}
.sheet-head .x:hover{background:var(--surface-2);color:var(--text)}
.stepper{display:flex;align-items:center;gap:8px;padding:14px 22px 18px}
.stepper .s{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);font-weight:500}
.stepper .s .num-b{width:20px;height:20px;border-radius:50%;background:#eeeef4;color:var(--muted);display:grid;place-items:center;font-size:11px;font-weight:600}
.stepper .s.active{color:var(--text)}
.stepper .s.active .num-b{background:var(--accent);color:#fff}
.stepper .s.done .num-b{background:var(--green-soft);color:var(--green)}
.stepper .line{flex:1;height:1px;background:var(--border-2)}
.sheet-body{padding:0 22px 6px;min-height:190px;overflow-y:auto}
.step{display:none;flex-direction:column;gap:16px}
.step.show{display:flex}

.drop{
  border:1.5px dashed var(--border-2);border-radius:12px;background:var(--surface-2);
  padding:24px;text-align:center;cursor:pointer;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.drop:hover,.drop.drag{border-color:var(--accent);background:var(--accent-soft)}
.drop.loaded{border-style:solid;border-color:var(--green-dot);background:var(--green-soft)}
.drop .ic{width:30px;height:30px;color:var(--accent)}
.drop.loaded .ic{color:var(--green)}
.drop .big{font-size:13.5px;font-weight:550}
.drop .small{font-size:11.5px;color:var(--muted)}
.drop .fname{font-size:12.5px;font-weight:550}
.parsed{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.chipstat{font-size:11.5px;padding:3px 9px;border-radius:6px;border:1px solid var(--border-2);background:var(--surface)}
.chipstat b{color:var(--accent)}
.link{font-size:11.5px;color:var(--accent);cursor:pointer}
.link:hover{text-decoration:underline}
.source{border:1px solid var(--border-2);border-radius:12px;background:var(--surface-2);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.source .ic{width:26px;height:26px;color:var(--accent)}
.source .big{font-size:13px;font-weight:550}
.source .small{font-size:11.5px;color:var(--muted)}
.confirm-msg{padding:2px 22px 6px;font-size:13px;color:var(--muted);line-height:1.55}

.lab{font-size:11.5px;color:var(--muted);font-weight:500;display:block;margin-bottom:8px}
.inp{width:100%;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--text);transition:.14s}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=datetime-local].inp{font-variant-numeric:tabular-nums}

.seg{display:flex;gap:8px}
.seg .opt{flex:1;text-align:center;padding:10px;border:1px solid var(--border-2);border-radius:10px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:.14s}
.seg .opt:hover{border-color:#d5d5de}
.seg .opt.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

.timepick{display:flex;gap:8px;align-items:center}
.timepick #pickDate{flex:1;min-width:0}
.selsm{width:auto;flex:none;padding:10px 8px}
.colon{color:var(--muted);font-weight:600}
/* A hint line that is carrying a warning (rows that will be moved or refused)
   has to look different from one that is just explaining itself. */
.hint.warn{color:var(--amber)}
.hint{font-size:11px;color:var(--faint);margin-top:9px}

.when-box{background:var(--accent-soft);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--accent);font-weight:500;display:flex;align-items:center;gap:9px}
.when-box svg{width:15px;height:15px;flex:none}

.sheet-foot{padding:16px 22px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--border);margin-top:8px;background:var(--surface-2)}
.sheet-foot .spacer{flex:1}

.toasts{position:fixed;bottom:22px;right:22px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:11px;padding:12px 15px;font-size:13px;box-shadow:0 12px 30px -14px rgba(28,30,42,.3);display:flex;align-items:center;gap:10px;min-width:230px;animation:slidein .2s ease}
.toast.ok{border-left-color:var(--green-dot)}.toast.warn{border-left-color:var(--rose)}
.toast svg{width:16px;height:16px;flex:none}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

@media (max-width:1000px){
  .grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wrap{padding:18px 14px 50px}.batch-head{flex-wrap:wrap}
  .b-prog{order:5;flex-basis:100%}.clock{display:none}
}

/* Device classes (Phase 5). Mirrors .caps so a mixed fleet reads like the rest
   of the page rather than like a separate tool. */
.classes{padding:10px 12px 14px;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto}
.classes::-webkit-scrollbar{width:6px}.classes::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px}
.cls{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:6px}
.cls-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cls-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-2)}
.cls-body{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.cls-owed{font-size:12px;color:var(--amber)}
.panel-note{padding:0 12px 2px;font-size:11.5px;line-height:1.45;color:var(--faint)}
/* Device-class rows collapse by default: the fleet grows, this panel must not
   push everything below it off the screen. */
.cls{cursor:pointer}
.cls-detail{display:grid;grid-template-rows:0fr;min-height:0;transition:grid-template-rows .22s ease}
.open>.cls-detail{grid-template-rows:1fr}
.cls-detail>div{overflow:hidden;min-height:0}
.cls-kv{display:flex;flex-direction:column;gap:5px;padding-top:8px;font-size:12px;color:var(--text-2)}
.cls-kv .row{display:flex;gap:8px;align-items:baseline}
.cls-kv .k{color:var(--faint);min-width:112px;flex:none}
.cls-chev{margin-left:auto;color:var(--faint);transition:transform .2s}
.cls.open .cls-chev{transform:rotate(90deg)}
.cls-name{font-weight:550;font-size:12.5px;color:var(--text)}
.cls-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint)}
/* The signal pill carries a whole sentence, so it must wrap. The base .pill is
   flex:none + capitalize, which is right for one-word status chips and wrong for
   this -- it overflowed the card and Title-Cased the sentence. */
.cls-body .pill{flex:1 1 auto;text-transform:none;white-space:normal;line-height:1.45;text-align:left;padding:5px 9px}
.cls-head{display:flex;align-items:center;gap:9px;min-width:0}
.cls-head .pi{min-width:0;flex:1}
.cls-head .pid,.cls-head .ps{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cls-kv .row span:last-child{min-width:0;word-break:break-word}
/* The bring-up launcher inside a phone's expanded detail. */
.phone-bringup{margin:10px 0 4px;font-size:12px;padding:7px 12px;border:1px solid var(--border-2);border-radius:8px}
/* Phones + learned panels share the accordion mechanics (.open>.cls-detail). */
.phone,.cap{cursor:pointer}
.phone-head .pi{min-width:0;flex:1}
.phone.open .cls-chev,.cap.open .cls-chev{transform:rotate(90deg)}
.cls-chev{flex:none}

/* Into a running job's journey page — the live row is a summary; this is the
   way through to every screen it has been on so far. */
.lwatch{font-size:10.5px;font-weight:600;color:var(--muted);border:1px solid var(--border-2);border-radius:6px;padding:2px 7px;text-decoration:none;white-space:nowrap;transition:.14s}
.lwatch:hover{color:var(--accent);border-color:var(--accent)}