/* ============================================================================
   NML Operations: app shell chrome only (the brand row + module tab row on index.php, and what every module shares).
   Modules style themselves in css/<module>.css. Tokens only: no hex values, never restyle harness classes.
   ============================================================================ */

/* Full app: a sticky header with the brand row and the module tabs. */
.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);
}

/* Who is signed in. */
.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 Digit org this server writes to (admins). */
.nml-org { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--color-label); white-space: nowrap; }
.nml-org .icon { width: 14px; height: 14px; }

/* The module area. */
.nml-mod { min-height: calc(100vh - 96px); }
.is-solo .nml-mod { min-height: 100vh; }

/* Banners above the module: Digit unreachable, Viewing as. */
#nml-banners:empty { display: none; }
#nml-banners { padding: var(--space-2) var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* How fresh a list is, and an unfinished operation's Finish action. */
.nml-fresh { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); color: var(--color-label); white-space: nowrap; }
.nml-fresh .icon { width: 12px; height: 12px; }
.nml-fresh--stale { color: var(--pill-amber-text); }
.nml-opbar:empty { display: none; }
.nml-opbar { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
.nml-opbar-act { margin-top: var(--space-2); }