/* ===== nms_analytics_html (HTML form, scoped) =====
   The NMS Analytics shell's styling. Loaded eagerly from
   anvil.yaml native_deps.head_html, which is what styles the designer canvas
   as well as the running app.

   THIS FILE SORTS FIRST AMONG THE SEVEN NMS LINKS, not last: "." is 0x2E and
   "_" is 0x5F, so _/theme/nms/nms.css sorts before _/theme/nms/nms_activity_html.css.
   That is the reverse of owings.css and rotacloud.css, and it is harmless here
   because no child asset declares a name this file declares. Checked name by
   name: this file declares .nms-shell, .nms-grid, .nms-header-block, .nms-title
   and .nms-subtitle, none of which appears in any nms_*_html.css. The --accent*
   tokens reach the children by inheritance, not by cascade, so the link order
   cannot change which declaration wins. A future child rule that must beat a
   rule in this file takes a second class rather than a moved link line.

   ROOT RULE, BARE CLASS, ON ITS OWN LINE, so it outranks the :where()-scoped
   rules below and so the dark restatement stays readable as
   [data-theme="dark"] .nms-shell {. [data-theme="dark"] is on <html>, an
   ANCESTOR of this root, so it must never be wrapped in :where() on the right
   of the root class.

   THE ROOT RULE DROPS overflow: auto AND GAINS flex: 1 0 auto. The root of an
   HTML form is a flex item inside the shared layout's scroller,
   .px-nav-content, which owns the vertical scroll; an overflow declaration on
   that item stops the port scrolling. overflow: auto was inert here anyway -
   min-height does not cap a box, so this one never scrolled. If a child
   overflows horizontally the fix is overflow-x: clip on that child, never on
   this root.

   min-height: 100vh IS KEPT BYTE FOR BYTE. The port is the layout's
   --px-nav-content-height, so the screen overflows it by the layout's own
   padding, exactly as it does today, and below 980px by the top bar as well.
   Changing that is a visible change and the owner's call, so it is not
   taken here.

   NO DESIGNER GATE IS NEEDED. The only rules that hide content until the
   JavaScript runs are .px-section-reveal { opacity: 0 }, which the dependency
   injects at runtime and the designer therefore never loads, and
   .px-collapsible-content { max-height: 0 }, which is already head-linked in
   theme.css and already collapses on today's canvas. Nothing in this file
   hides anything.

   NO TAKEOVER CLASS. Nothing in this shell's CSS reaches a page-level node
   outside its own root, so there is nothing for an html.* gate to hold.

   NO @keyframes AND NO url() IN THIS SECTION, so there is nothing to prefix
   and nothing to rewrite. */

/* =============================================
   NMS ANALYTICS - ACCENT & LAYOUT
   ============================================= */
.nms-shell {
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-subtle: rgba(13, 148, 136, 0.10);
  --accent-text: #0f172a;
  --accent-rgb: 13, 148, 136;
  --px-loading-accent: #0d9488;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex: 1 0 auto;
  padding: 20px;
  gap: 18px;
  position: relative;
  background-color: #f1f5f9;
  background-image:
    radial-gradient(circle at top left, rgba(13, 148, 136, 0.10), transparent 40%),
    linear-gradient(180deg, #f0fdfa 0%, #f1f5f9 100%);
}

@media not print {
[data-theme="dark"] .nms-shell {
  --accent: #14b8a6;
  --accent-hover: #2dd4bf;
  --accent-subtle: rgba(20, 184, 166, 0.14);
  --accent-text: #0f172a;
  --accent-rgb: 20, 184, 166;
  --px-loading-accent: #14b8a6;
  background-color: #0f172a;
  background-image:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 28%),
    linear-gradient(180deg, #042f2e 0%, #0f172a 100%);
}
}

/* =============================================
   HEADER BLOCK
   The three rules below carry the declarations that were inline style
   attributes on the template, which the new format forbids.
   ============================================= */
:where(.nms-shell) .nms-header-block {
  margin-bottom: -2px;
}

:where(.nms-shell) .nms-title {
  font-family: var(--px-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--px-text-primary);
  margin: 0;
}

:where(.nms-shell) .nms-subtitle {
  font-family: var(--px-font);
  font-size: 0.85rem;
  color: var(--px-text-muted);
  margin: 0;
}

/* =============================================
   TWO-COLUMN GRID
   ============================================= */
:where(.nms-shell) .nms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 960px) {
  :where(.nms-shell) .nms-grid {
    grid-template-columns: 1fr;
  }
}