/* ============================================================================
   NML Operations — app shell chrome only (the brand row + module tab row on
   index.php). Modules style themselves in css/<module>.css. Tokens only: no
   hex values, never restyle harness classes (DESIGN.md rules 1-2).
   ============================================================================ */

/* Full app: a sticky header with the brand row and the module tabs. The module
   below keeps its own .app-header (title row + sub-tabs), like Nutracom. */
.nml-top {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-bg);
  padding: 0 var(--space-8);
}
.nml-top-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; gap: var(--space-4);
}
.nml-brand { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; }
.nml-brand-sub { margin-left: var(--space-2); font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--color-label); }
.nml-top-actions { display: flex; align-items: center; gap: var(--space-2); }
.nml-top .tab-row {   /* module tabs: hairline bleeds to the page edges, labels stay inset */
  margin: 0 calc(-1 * var(--space-8));
  padding: 0 var(--space-8);
}

/* The acting-as chip (who the change log records). */
.nml-who {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--toolbar-control-h); padding: 0 var(--space-2) 0 var(--space-1);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.nml-who:hover { background: var(--color-hover); }
.nml-who .icon { width: 14px; height: 14px; color: var(--color-label); }

/* The module area. In the full app the module's own header sits under the shell header. */
.nml-mod { min-height: calc(100vh - 96px); }
.is-solo .nml-mod { min-height: 100vh; }

/* First run: the database is empty or behind on migrations. */
.nml-setup { max-width: 560px; margin: var(--space-10) auto; }