/* 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;
}

/* .dectmon{overflow:hidden} is the legacy carrier-grid clip. It is also a
   sticky scrollport, so the event toolbar's top was measured inside .dectmon
   and the row sat ~41px too low, over the first cards. v2 hides that grid;
   the mount still caps height. visible (not clip) keeps the toolbar's
   negative-margin bleed. */
.dectmon.dm-v2-live { overflow: visible; }

.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);
  /* Head with a dot and no caret: gutter + dot + gap. Rows and notes share it. */
  --dm2-dot: 10px;
  --dm2-gutter: var(--s3);
  --dm2-indent: calc(var(--dm2-gutter) + var(--dm2-dot) + var(--s2));
  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;
  --dm2-pad: 12px;
  padding: var(--dm2-pad);
  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); }

.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); }
@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); }
/* Slot-colour card. 300px made it ~810px tall and it scrolled inside itself.
   Two columns at 560px fit a 1280×800 viewport. 16px gutter each side.
   A phone stacks to one column; the popover may then cap the card to the page. */
/* Width applies before HelpTip adds .help-tip-card, so the first clamp
   measures 560px and does not park a narrow card off the right edge. */
.popover.dm2-slot-help,
/* Width applies before HelpTip adds .help-tip-card, so the first clamp
   measures 560px and does not park a narrow card off the right edge. */
.popover.dm2-slot-help,
.popover.help-tip-card.dm2-slot-help {
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
}
.dm2-slot-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 8px;
}
.dm2-slot-help-term { font-weight: 600; color: var(--text-1); }
.dm2-slot-help-text { margin-top: 1px; }
@media (max-width: 760px) {
  .dm2-slot-help-grid { grid-template-columns: 1fr; }
}
.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); }
/* Dashed inset so this grey is not the solid Beacon-no-ID or Unknown-base grey. */
.dm2-swatch.tone-unmeasured, .dm2-cell.tone-unmeasured {
  background: color-mix(in srgb, var(--text-muted) 50%, var(--bg-2));
  outline: 1px dashed color-mix(in srgb, var(--text-1) 72%, transparent);
  outline-offset: -2px;
}
.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); }
/* Stale/sim tint lives here, not in components.css: that file's colour guard
   treats every is-stale rule as a neutral Channel Health state. */
.event-toolbar > .dm2-status.is-sim,
.event-toolbar > .dm2-status.is-stale { background: var(--warn-soft); color: var(--warn); border: 0; }
/* Pressed toolbar control. Repeated after the shared .btn rules so the accent fill wins. */
.event-toolbar .btn[aria-pressed="true"]{
  color:var(--text-1);border-color:var(--accent);background-color:var(--accent-soft);
}
.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::before,
.dm2-loadcopy > .tnum { grid-area: 1 / 1; white-space: nowrap; }
.dm2-loadcopy::before { content: attr(data-reserve); 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: var(--s2); padding: 9px var(--dm2-gutter); 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: var(--dm2-dot); height: var(--dm2-dot); 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: var(--s2); padding: 6px var(--dm2-gutter) 6px var(--dm2-indent); cursor: pointer; font-size: 12.5px; min-width: 0; max-width: 100%; }
/* The antenna name stays one line (full text on the title) so a pack chip
   does not make that row taller. RFPI, the pack count and Assign do not shrink. */
.dm2-ant:not(.dm2-intr) > [data-dm2="ant-name"] {
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm2-ant:not(.dm2-intr) > .mono,
.dm2-ant:not(.dm2-intr) > .dm2-packs,
.dm2-ant:not(.dm2-intr) > .dm2-assign { flex: none; }
/* A row with Assign zone… is always two lines, at every width: the name,
   RFPI and pack count on the first, the button under them on the right. The
   name keeps the width the RFPI and pack count leave it, and ellipsises
   (full text on the title) instead of sharing a line with the button. */
.dm2-ant:not(.dm2-intr):has(> .dm2-assign) {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}
.dm2-ant:not(.dm2-intr):has(> .dm2-assign) > .dm2-lvl { grid-column: 1; grid-row: 1; }
.dm2-ant:not(.dm2-intr):has(> .dm2-assign) > [data-dm2="ant-name"] { grid-column: 2; grid-row: 1; }
.dm2-ant:not(.dm2-intr):has(> .dm2-assign) > .mono { grid-column: 3; grid-row: 1; }
.dm2-ant:not(.dm2-intr):has(> .dm2-assign) > .dm2-packs { grid-column: 4; grid-row: 1; margin-left: 0; }
.dm2-ant:not(.dm2-intr):has(> .dm2-assign) > .dm2-assign {
  grid-column: 2 / -1; grid-row: 2; justify-self: end; margin-left: 0;
}
.dm2-intruders {
  display: grid;
  grid-template-columns: max-content min-content minmax(0, 1fr) max-content max-content;
  column-gap: var(--s2);
  padding: 0 var(--dm2-gutter) 0 var(--dm2-indent);
  min-width: 0;
}
button.dm2-intr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  column-gap: var(--s2);
  width: calc(100% + var(--dm2-indent) + var(--dm2-gutter));
  margin-left: calc(var(--dm2-indent) * -1);
  margin-right: calc(var(--dm2-gutter) * -1);
  padding: 6px var(--dm2-gutter) 6px var(--dm2-indent);
  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 var(--dm2-gutter) 6px var(--dm2-indent); cursor: pointer;
}
.dm2-netnote {
  padding: var(--s2) var(--dm2-gutter) var(--s2) var(--dm2-indent);
  min-width: 0;
}
.dm2-netnote > div { min-width: 0; }
.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 { min-width: 0; font-size: 12px; overflow-wrap: break-word; }
button.dm2-intr [data-dm2="intruder-row-level"],
button.dm2-intr [data-dm2="intruder-age"] { white-space: nowrap; }
.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; max-width: 100%; }
button.dm2-intr .dm2-intr-addr {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.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; }