/* DECT Monitor v2 live view. Scoped under .dm2. Colours come from styles/tokens.css.
   Look = the event Live tab (views-monitor.css): panels sit on --mon-1 with an --border-subtle hairline and
   a small radius (.m-subpanel); heads are mono uppercase in --text-2 (.m-dt th); toolbar controls share one
   20px height (--m-ctrl-h in Live) with Live's chip / .btn-secondary / .select.compact looks. */

.dm2-host { display: flex; flex: none; min-height: auto; min-width: 0; flex-direction: column; }
.dm2-host[hidden] { display: none; }

.dectmon.dm-v2-live > .topbar,
.dectmon.dm-v2-live > .status-panel,
.dectmon.dm-v2-live > .layout { display: none; }
/* Live v2 grows with the networks list and the intruder detail. The document
   scrolls. Replay drops .dm-v2-live and keeps the old capped layout. */
.dectmon.dm-v2-live {
  overflow: visible;
  flex: none;
  min-height: auto;
  height: auto;
}

.dm2 {
  --dm2-bolero: var(--dect-bolero);
  --dm2-avx: var(--dect-avx);
  --dm2-ctrl-h: 20px;   /* = Live's --m-ctrl-h */
  --dm2-surface: var(--mon-1);
  --dm2-surface-head: var(--mon-2);
  --dm2-hair: var(--border-subtle);
  background: var(--bg-0);
  color: var(--text-1);
  font: 13px/1.4 var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  /* Visible on both axes. overflow-x: clip would be the sticky
     containing box for the toolbar, so the bar would scroll away with
     the page, and it would cut the node menu. The wide slot table
     scrolls inside .dm2-gridscroll; .dm2-top / .dm2-lower clip the rest. */
  overflow: visible;
  padding: 12px;
  flex: none;
  min-height: auto;
  box-sizing: border-box;
}
.dm2 *, .dm2 *::before, .dm2 *::after { box-sizing: border-box; }
.dm2 [hidden] { display: none !important; }
.dm2 .mute { color: var(--text-muted); }
.dm2 .tnum { font-variant-numeric: tabular-nums; }
.dm2 .mono { font-family: var(--font-mono, ui-monospace, Menlo, monospace); }

/* Sticks under the event tab bar. --dect-stick-top is that bar's measured
   height (dect-monitor-v2.js), so the two meet and the tab bar stays on top.
   z-index is below .m-subhdr (100) and above the grid. The background is the
   theme surface (--bg-1; .dectmon aliases it to --bg-card) so rows scrolling
   underneath stay hidden. The stuck divider is an inset shadow: a border
   would grow the bar by 1px when it pins. */
.dm2-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0;
  position: sticky;
  top: var(--dect-stick-top, 0px);
  z-index: 40;
  background: var(--bg-1);
  overflow: visible;
}
.dm2-bar.is-stuck { box-shadow: inset 0 -1px 0 var(--border-subtle); }
.dm2-bar-left, .dm2-bar-right, .dm2-nodewrap { overflow: visible; }
.dm2-bar-left, .dm2-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dm2-chip {
  /* Live's span / size cyclers (.chip.m-panelcyc): pill, mono 11px/600, --text-2, 20px. */
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-2);
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill);
  height: var(--dm2-ctrl-h); padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.dm2-chip:hover { background: var(--bg-raised); color: var(--text-1); border-color: var(--border-strong); }
.dm2-chip:focus-visible { outline: none; box-shadow: var(--ring); }
/* Buttons in the bar = Live's "View ▾" (.btn-secondary at the panel-header scale). */
.dm2-bar .btn { min-height: 0; height: var(--dm2-ctrl-h); box-sizing: border-box; font-size: 11px; padding: 0 12px; gap: 5px; flex: none; }
.dm2-bar .btn.btn-icon { padding: 0; width: var(--dm2-ctrl-h); }
.dm2-bar .btn:focus-visible { outline: none; box-shadow: var(--ring); }
.dm2-bar .btn[aria-pressed="true"] { color: var(--text-1); border-color: var(--accent); background: var(--accent-soft); }
/* Segmented Live / Replay / Presence at Live's sub-header scale (.m-subhdr .seg-btn). */
.dm2-bar .segmented { padding: 0; align-items: center; }
.dm2-bar .seg-btn { padding: 0 10px; height: var(--dm2-ctrl-h); font-size: 11.5px; }
/* Area picker = the shared .select.compact (components.css), levelled with the chips. */
.dm2-bar .select.compact { height: var(--dm2-ctrl-h); padding-top: 0; padding-bottom: 0; flex: none; }
.dm2-bar .select.compact .select-value { font-size: 11.5px; max-width: 200px; }
@media (pointer: coarse) {
  .dm2 { --dm2-ctrl-h: var(--tap-min); }
}
.dm2-warnmark { color: var(--warn); }
.dm2-nodewrap { position: relative; }
.dm2-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 330px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .4));
  display: flex; flex-direction: column; gap: 8px;
}
.dm2-nrow { display: flex; align-items: center; gap: 8px; }
.dm2-nrow .mute { margin-left: auto; }
.dm2-unzoned { color: var(--warn); }
.dm2-unzoned-btn {
  font: inherit; background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.dm2-unzoned-btn:hover, .dm2-unzoned-btn:focus-visible { text-decoration: underline; }
.dm2-pop p { margin: 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }

.dm2-top {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 170px;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  overflow-x: clip;
}
.dm2-kcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm2-kpi {
  background: var(--dm2-surface); border: 1px solid var(--dm2-hair); border-radius: var(--r-md);
  padding: 8px 12px; min-width: 0; display: flex; flex-direction: column; justify-content: center; flex: 1;
}
.dm2-kpi-l { color: var(--text-muted); font: 600 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.dm2-kpi-s { color: var(--text-2); font-size: 12px; }
.dm2-kpi-n { font-size: 20px; font-weight: 650; }
.dm2-kpi.is-alert { border-color: var(--danger); }
.dm2-kpi.is-alert .dm2-kpi-n { color: var(--danger); }
@media (max-width: 1100px) {
  .dm2-top { grid-template-columns: minmax(0, 1fr); }
  .dm2-kcol { flex-direction: row; flex-wrap: wrap; }
  .dm2-kpi { flex: 1 1 140px; }
}

.dm2-gridcard {
  background: var(--dm2-surface); border: 1px solid var(--dm2-hair); border-radius: var(--r-md);
  padding: 10px 12px; min-width: 0;
}
.dm2-gridhead > b { font: 600 12px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
/* Title stays left, the "?" stays top-right, the legend is the row under them.
   The help card is a fixed popover, so opening it does not change this row. */
.dm2-gridhead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; row-gap: 6px; margin-bottom: 6px;
}
.dm2-gridhead > b { grid-column: 1; grid-row: 1; min-width: 0; }
.dm2-gridhead > .help-tip { grid-column: 2; grid-row: 1; justify-self: end; }
.dm2-legend { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.dm2-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.dm2-swatch.tone-bolero, .dm2-dot.tone-bolero, .dm2-cell.tone-bolero { background: var(--dm2-bolero); }
.dm2-swatch.tone-avx, .dm2-dot.tone-avx, .dm2-cell.tone-avx { background: var(--dm2-avx); }
.dm2-swatch.tone-foreign, .dm2-dot.tone-foreign, .dm2-cell.tone-foreign { background: var(--danger); }
.dm2-swatch.tone-unidentified, .dm2-dot.tone-unidentified, .dm2-cell.tone-unidentified { background: var(--warn); }
.dm2-swatch.tone-unknown, .dm2-cell.tone-unknown {
  background: color-mix(in srgb, var(--text-2) 55%, var(--dm2-surface));
}
.dm2-cell.tone-unknown .dm2-lbl { color: var(--text-1); }
.dm2-swatch.tone-energy, .dm2-cell.tone-energy {
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--text-muted) 72%, var(--bg-2)),
    color-mix(in srgb, var(--text-muted) 72%, var(--bg-2)) 3px,
    var(--bg-2) 3px,
    var(--bg-2) 6px);
}
.dm2-cell.tone-energy .dm2-lbl { color: var(--text-1); }
.dm2-swatch.tone-leakage, .dm2-dot.tone-leakage, .dm2-cell.tone-leakage {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--text-muted) 55%, var(--bg-2)),
    color-mix(in srgb, var(--text-muted) 55%, var(--bg-2)) 2px,
    var(--bg-2) 2px,
    var(--bg-2) 5px);
}
.dm2-swatch.tone-net, .dm2-dot.tone-net, .dm2-cell.tone-net { background: var(--accent); }
.dm2-swatch.tone-free, .dm2-cell.tone-free { background: var(--dm2-surface-head); }
.dm2-swatch.tone-beacon, .dm2-cell.tone-beacon { background: color-mix(in srgb, var(--text-muted) 40%, var(--dm2-surface-head)); }
.dm2-gridscroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.dm2-nogrid { color: var(--text-2); padding: 12px 2px; }
.dm2-slots { border-collapse: separate; border-spacing: 2px; min-width: 860px; }
.dm2-slots th { font-weight: 500; color: var(--text-muted); font-size: 11px; padding: 0 2px; text-align: center; }
.dm2-slots th.dm2-cn, .dm2-slots td.dm2-cn { text-align: right; padding-right: 6px; white-space: nowrap; }
.dm2-cell {
  width: 30px; height: 20px; border-radius: 3px; position: relative; cursor: pointer; padding: 0;
}
.dm2-sep { width: 6px; background: transparent; padding: 0; }
.dm2-cell.is-beacon, .dm2-swatch.is-beacon { outline: 1px solid color-mix(in srgb, var(--text-1) 35%, transparent); outline-offset: -1px; }
.dm2-cell.is-dim { opacity: .18; }
.dm2-cell.is-hl { box-shadow: inset 0 0 0 2px var(--text-1); opacity: 1; }
.dm2-cell.is-trail { outline: 1px dashed color-mix(in srgb, var(--text-1) 55%, transparent); outline-offset: -2px; opacity: .55; }
.dm2-lbl {
  position: absolute; inset: 0; font-size: 9px; display: flex; align-items: center; justify-content: center;
  color: var(--bg-0); font-weight: 600;
}
.dm2-status {
  font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-1);
}
.dm2-status.is-sim, .dm2-status.is-stale { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.dm2-status.is-down { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.dm2-load { font-size: 11px; color: var(--text-muted); white-space: nowrap; padding-left: 8px; }
/* Hidden line is the widest summary, stacked on the visible one, so beacon text cannot widen the column. */
.dm2-loadcopy {
  display: inline-grid; vertical-align: middle;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.dm2-loadcopy > .dm2-loadsizer,
.dm2-loadcopy > .tnum { grid-area: 1 / 1; white-space: nowrap; }
.dm2-loadsizer { visibility: hidden; }
.dm2-loadbar { display: inline-block; width: 60px; height: 6px; background: var(--dm2-surface-head); border-radius: 3px; vertical-align: middle; margin-right: 4px; overflow: hidden; }
.dm2-loadbar span { display: block; height: 100%; width: 100%; background: var(--ok); transform-origin: left center; }

.dm2-lower {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 320px;
  flex: none;
  align-items: start;
  overflow-x: clip;
}
@media (max-width: 900px) { .dm2-lower { grid-template-columns: minmax(0, 1fr); } }
.dm2-panel {
  background: var(--dm2-surface);
  border: 1px solid var(--dm2-hair);
  border-radius: var(--r-md);
  min-width: 0;
  min-height: min-content;
  height: auto;
  /* clip keeps the header inside the radius without a scrollport */
  overflow: clip;
  display: flex;
  flex-direction: column;
}
.dm2-panel h2 {
  font: 600 12px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
  margin: 0; padding: 8px 12px; background: var(--dm2-surface-head); border-bottom: 1px solid var(--dm2-hair);
}
.dm2-tree, .dm2-detail {
  overflow: visible;
  min-width: 0;
  min-height: min-content;
  flex: none;
}
.dm2-net { border-bottom: 1px solid var(--dm2-hair); }
.dm2-nethead { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; }
.dm2-nethead:hover { background: var(--bg-raised); }
.dm2-nettitle { font-weight: 600; min-width: 0; flex: 1 1 auto; }
.dm2-caret { width: 12px; color: var(--text-muted); font-size: 10px; flex: none; }
.dm2-net.is-open .dm2-caret { transform: rotate(90deg); }
.dm2-net:not(.is-open) .dm2-netbody { display: none; }
.dm2-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.dm2-meta { display: grid; grid-template-columns: 56px 56px; gap: 6px; align-items: center; flex: none; }
.dm2-cnt { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); min-width: 56px; }
.dm2-cnt .tnum { min-width: 2ch; text-align: right; color: var(--text-1); font-weight: 600; }
.dm2-ant { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 30px; cursor: pointer; font-size: 12.5px; }
button.dm2-intr { width: 100%; font: inherit; color: inherit; background: transparent; border: 0; text-align: left; }
button.dm2-intr:focus-visible { outline: none; box-shadow: var(--ring); }
.dm2-ant:hover { background: var(--bg-raised); }
.dm2-ant.is-sel { background: var(--bg-raised); box-shadow: inset 3px 0 0 var(--dm2-bolero); }
.dm2-ant.is-stale { color: var(--text-muted); }
.dm2-offair:empty, [data-dm2="intruder-age"]:empty { display: none; }
.dm2-offair { color: var(--text-muted); font-weight: 650; }
.dm2-fold {
  display: flex; width: 100%; text-align: left; font: inherit; color: var(--text-muted);
  background: transparent; border: 0; padding: 6px 12px 6px 30px; cursor: pointer;
}
.dm2-fold:hover { color: var(--text-1); background: var(--bg-raised); }
.dm2-lvl { display: inline-block; width: 38px; height: 5px; background: var(--dm2-surface-head); border-radius: 3px; overflow: hidden; flex: none; }
.dm2-lvl span { display: block; height: 100%; width: 100%; background: var(--text-muted); transform-origin: left center; }
.dm2-packs { margin-left: auto; white-space: nowrap; }
.dm2-assign {
  margin-left: 8px; font: inherit; font-size: 12px; color: var(--text-1);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 8px; cursor: pointer;
}
.dm2-assign:focus-visible { outline: none; box-shadow: var(--ring); }
.dm2-identify { align-self: flex-start; margin: 4px 0 0; }
.dm2-id-form { display: flex; flex-direction: column; gap: 10px; }
.dm2-id-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-1); }
button.dm2-intr .dm2-intr-vendor { flex: 1 1 100%; font-size: 12px; }
.dm2-detail { padding: 12px; display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.dm2-dhead { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
button.dm2-intr .dm2-intr-name { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.dm2-drow {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  align-items: baseline;
}
.dm2-drow > span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.dm2-base { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; min-width: 0; }
.dm2-base .mono { overflow-wrap: anywhere; }
.dm2-bits { margin: 0; min-width: 0; }
.dm2-bits summary { cursor: pointer; }
.dm2-bits summary:focus-visible { outline: none; box-shadow: var(--ring); }
.dm2-bitlist { margin: 6px 0 0; padding-left: 1.1em; }
.dm2-big { font-size: 17px; font-weight: 600; }
.dm2-bp { border-collapse: collapse; min-width: 640px; }
.dm2-bp th { font: 600 11px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--dm2-hair); }
.dm2-bp th.dm2-grp { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-bottom: none; padding-bottom: 0; }
.dm2-bp th.dm2-br { color: var(--ok); }
.dm2-bp td { padding: 6px 8px; border-bottom: 1px solid var(--dm2-hair); vertical-align: top; }
.dm2-bp tr[data-pid] { cursor: pointer; }
.dm2-bp tr.is-sel td { background: var(--bg-raised); }
.dm2-bp tr.is-gone td { color: var(--text-muted); }
.dm2-pill { font-size: 10.5px; padding: 1px 7px; border-radius: 9px; background: var(--bg-raised); margin-left: 6px; white-space: nowrap; display: inline-block; }
.dm2-pill.warn { background: var(--warn-dim); color: var(--warn); }
.dm2-pill.bad { background: var(--danger-dim); color: var(--danger); }
.dm2-pill.good { background: var(--ok-dim); color: var(--ok); }
.dm2-nodes { display: inline-flex; align-items: center; gap: 4px; }
.dm2-track {
  background: var(--dm2-surface-head); border: 1px solid var(--dm2-hair); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 3px;
}
.dm2-track b { font-size: 12px; }