/* 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);
  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: 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; min-width: 0; max-width: 100%; }
/* Bolero IP · serial has no break that fits beside RFPI and Assign. The 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 phone row cannot keep Assign beside an IP. Drop the button under the
   label so the name keeps the leftover width and ellipsises instead of
   overflowing. Wider viewports stay a single flex line. */
@media (max-width: 480px) {
  .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;
  }
}
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; }