/* nms_html — the NMS screen's own rules.
 *
 * The section's root rule and its four custom properties live in nms.css, the
 * sheet the two child forms inherit --accent* through; everything else that was
 * in the block is here.
 *
 * SCOPE. .nms-dashboard is still an ancestor of every subject below, so every
 * rule is wrapped :where(.nms-dashboard), which contributes zero specificity
 * and so cannot change which rule wins. No rule here names a shared .px-* class
 * or .themed-scrollbar, so there is no head-link-order tie to
 * lose and nothing is promoted: the eight names it declares — .nms-content,
 * .nms-header, .nms-title-wrap, .nms-actions, .nms-section, .nms-section-title
 * and its ::before, .nms-section-count — appear nowhere else in either repo.
 *
 * .nms-screen-root is the form root and a plain display: block wrapper with no
 * height, flex or overflow. That keeps .nms-dashboard's .px-screen-root
 * height: 100% resolving against an auto height, so main's content mount stays
 * the scroller (main's modal scroll lock and the loading overlay's pin box
 * depend on that). Do not re-declare the shared declarations on
 * .nms-dashboard itself.
 *
 * The four slot mount classes (.nms-initiation-mount, .nms-intervention-mount,
 * .nms-followup-mount, .nms-historical-mount) are deliberately undeclared: the
 * mount divs carried no style of their own, and the classes exist so the next
 * reader can find the mounts by name.
 *
 * DESIGNER GATE: none. Nothing in this template is hidden until JavaScript
 * runs — the loading overlay ships with `active`, exactly as it does today.
 */

/* The form root. See the header: display: block and nothing else, on purpose. */
.nms-screen-root {
  display: block;
}

:where(.nms-dashboard) .nms-content {
  width: 100%;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

:where(.nms-dashboard) .nms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

:where(.nms-dashboard) .nms-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.nms-dashboard) .nms-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.nms-dashboard) .nms-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.nms-dashboard) .nms-section-title {
  font-family: var(--px-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--px-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(.nms-dashboard) .nms-section-title::before {
  content: '';
  width: 3px;
  height: 20px;
  background: var(--accent);
  border-radius: 2px;
}

:where(.nms-dashboard) .nms-section-count {
  font-size: 0.85rem;
  color: var(--px-text-muted);
  font-weight: 400;
}

@media (max-width: 900px) {
  :where(.nms-dashboard) .nms-content { padding: 16px; gap: 20px; }
}

@media (max-width: 600px) {
  :where(.nms-dashboard) .nms-content { padding: 12px 8px; gap: 16px; }
  :where(.nms-dashboard) .nms-header { flex-direction: column; align-items: flex-start; }
}