/*
Component inventory (HTML-comment syntax here previously BROKE the whole
sheet: the parser ate the :root vars block recovering from an HTML comment opener, so every
var(--nc-*) failed and all consoles rendered black-and-white. CSS comments
only in this file.)

nc-card: <section class="nc-card nc-card-pad">...</section>
nc-checklist-step: <div class="nc-checklist-step nc-checklist-step-done"><span class="nc-badge nc-badge-done">Done</span></div>
nc-summary-card: <div class="nc-summary-card"><div class="nc-summary-value">$1,234</div><div class="nc-sparkline"></div></div>
nc-chip: <button class="nc-chip nc-chip-active">All</button> <span class="nc-chip nc-chip-flag nc-chip-warn">⚠️ Review</span>
nc-table: <div class="nc-table-wrap"><table class="nc-table"><td class="nc-money nc-money-pos">$1</td></table></div>
nc-toast: <div class="nc-toast nc-toast-err">Saved</div>
nc-skeleton: <div class="nc-skeleton nc-skeleton-line"></div> or ncSkeleton(container, 3, 'line')
nc-empty: <div class="nc-empty"><div class="nc-empty-title">Nothing pending. Nice.</div></div> or ncEmpty(container, '✓', 'Nothing pending. Nice.', '')
nc-jump-pills: add data-jump="Cash" to major sections; the shell builds and tracks the pill row
nc-tools-menu: <div class="nc-tools"><div class="nc-tools-menu">...</div></div>
nc-tank-tile: <div class="nc-tank-tile nc-tank-tile-filled">...</div>
nc-btn: <button class="nc-btn nc-btn-primary">Save</button>
nc-header-bar: <header class="nc-header-bar">...</header>
nc-loc-tabs: <div class="nc-loc-tabs"><button class="active">NLB</button></div>
*/
/* Type upgrade (Cole 2026-07-10: "font and the size of the boxes… pretty
   nineties or early two thousands basic look… could be much sleeker") —
   Bebas Neue is the No-Li brand display face (labels, showcase) and now
   carries page/section titles; Schibsted Grotesk carries UI text + numerals.
   Loaded once here, cached across all consoles. NOTE: @import must precede
   every rule in the sheet. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --nc-font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --nc-font-ui: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Hairline: low-alpha card/tile border — hard 1px gray borders on every
     box were the core of the dated look (Cole 2026-07-10). Structural
     borders (inputs, table rules) keep --nc-border. */
  --nc-hairline: rgba(255, 255, 255, .08);
  /* Brand-warm dark — THE default (Cole 2026-07-07: picked over the old
     blue-grey, which he twice called "hard to navigate"; retired same day).
     No-Li ink/cream/red on warm graphite; semantic colors unchanged. Two
     themes only: this + html.nc-light — every UI change verifies both. */
  /* Surface ladder rev (Cole 2026-07-08: "everything is brown") — surfaces
     desaturated toward warm graphite with WIDER lightness steps so panel /
     well / raised tiers actually separate; the warmth now comes from text,
     cream, and red accents instead of every surface being a brown. */
  --nc-bg: #141312;
  --nc-panel: #232120;
  --nc-panel-2: #191817;
  --nc-panel-raised: #2b2927;
  --nc-border: #504b44;
  --nc-text: #f3efe6;
  --nc-dim: #b3ab9c;
  --nc-accent: #E02826;
  --nc-accent-ink: #ffffff;
  --nc-cream: #FFF1D2;
  --nc-money-pos: #86efac;
  --nc-money-neg: #fca5a5;
  --nc-warn: #fcd34d;
  --nc-blue: #9fc4e8;
  /* Constitution aliases: components use one semantic vocabulary while the
     existing money/status selectors keep their shipped values unchanged. */
  --nc-ok: var(--nc-money-pos);
  --nc-danger: var(--nc-money-neg);
  --nc-info: var(--nc-blue);
  --nc-ok-bg: rgba(134, 239, 172, .12);
  --nc-warn-bg: rgba(252, 211, 77, .12);
  --nc-info-bg: rgba(159, 196, 232, .12);
  --m-fast: 120ms;
  --m-std: 180ms;
  --m-settle: 240ms;
  --nc-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  --nc-btn-bg: #2e2b28;
  --nc-btn-hover: #393632;
  --nc-btn-hover-border: #7d766a;
  --nc-danger-bg: #451a1a;
  --nc-danger-border: #7f1d1d;
  --nc-shellbar: #0e0d0c;
  --nc-shell-hover: #282522;
  --nc-subrow: #1a1918;
  --nc-thead: #121110;
  --nc-menu-bg: #1e1c1a;
  --nc-tile: #1d1b19;
  --nc-locked: #a89e8c;
  --nc-headerbar: rgba(20, 19, 18, .96);
  --nc-toolbar: rgba(35, 33, 32, .98);
  --nc-inset: rgba(8, 8, 7, .45);
}

/* Light skin (Cole 2026-07-03: "the ui is hard to see with the dark blue
   everywhere") — toggled by the shell-nav sun/moon, persisted in
   localStorage 'ncTheme', applied as a class on <html> by noli-console.js
   before first paint. Warm No-Li palette: cream paper, ink text, brand red. */
html.nc-light {
  --nc-hairline: rgba(26, 23, 20, .09);
  --nc-bg: #f4f1e8;
  --nc-panel: #ffffff;
  --nc-panel-2: #f7f4ea;
  --nc-panel-raised: #ffffff;
  --nc-border: #d7d1c0;
  --nc-text: #1a1714;
  --nc-dim: #6d675a;
  --nc-cream: #7c5e00;
  --nc-money-pos: #15803d;
  --nc-money-neg: #b91c1c;
  --nc-warn: #a16207;
  --nc-blue: #1d4ed8;
  --nc-ok: var(--nc-money-pos);
  --nc-danger: var(--nc-money-neg);
  --nc-info: var(--nc-blue);
  --nc-ok-bg: rgba(21, 128, 61, .10);
  --nc-warn-bg: rgba(161, 98, 7, .10);
  --nc-info-bg: rgba(29, 78, 216, .10);
  --m-fast: 120ms;
  --m-std: 180ms;
  --m-settle: 240ms;
  --nc-shadow: 0 12px 28px rgba(26, 23, 20, .14);
  --nc-btn-bg: #fbf8ef;
  --nc-btn-hover: #f1ecdc;
  --nc-btn-hover-border: #a8a08a;
  --nc-danger-bg: #fee2e2;
  --nc-danger-border: #fca5a5;
  --nc-shellbar: #ffffff;
  --nc-shell-hover: #f1ecdc;
  --nc-subrow: #faf7ee;
  --nc-thead: #ece7d8;
  --nc-menu-bg: #ffffff;
  --nc-tile: #faf7ee;
  --nc-locked: #8a8577;
  --nc-headerbar: rgba(244, 241, 232, .96);
  --nc-toolbar: rgba(240, 236, 224, .98);
  --nc-inset: rgba(214, 208, 190, .3);
}

/* html.nc-brand retired 2026-07-07 — its values ARE :root now (Cole picked
   brand-warm dark as the default; blue-grey deleted). The class is kept as
   a no-op so stale localStorage='brand' sessions render identically. */
html.nc-brand {}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nc-bg);
  color: var(--nc-text);
  font: 14px/1.45 var(--nc-font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select { font: inherit; }

.nc-btn,
button {
  border: 1px solid var(--nc-border);
  background: var(--nc-btn-bg);
  color: var(--nc-text);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background .13s ease, border-color .13s ease, transform .07s ease, box-shadow .13s ease, filter .13s ease;
}

.nc-btn:hover:not(:disabled),
button:hover:not(:disabled) {
  border-color: var(--nc-btn-hover-border);
  background: var(--nc-btn-hover);
}

.nc-btn:active:not(:disabled),
button:active:not(:disabled) {
  transform: translateY(1px);
}

.nc-btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--nc-blue);
  outline-offset: 1px;
}

.nc-btn:disabled,
button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Modern focus affordance on any field — replaces the browser default ring
   with the brand's focus color, both themes. Purely additive (focus only). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--nc-blue);
  outline-offset: 1px;
}

/* Primary = the one obvious action. Depth + a brand-red glow so it reads as
   the clear next step, not one more gray box. (Also fixes a specificity bug:
   the generic .nc-btn:hover rule used to repaint primary buttons gray on
   hover — these primary-scoped hover/active rules now win.) */
.nc-btn-primary {
  background: var(--nc-accent);
  border-color: var(--nc-accent);
  color: white;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 10px rgba(224, 40, 38, .26);
}

.nc-btn-primary:hover:not(:disabled) {
  background: var(--nc-accent);
  border-color: var(--nc-accent);
  filter: brightness(1.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 4px 16px rgba(224, 40, 38, .34);
}

.nc-btn-secondary {
  background: var(--nc-btn-bg);
  border-color: var(--nc-border);
  color: var(--nc-text);
}

.nc-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--nc-dim);
}

.nc-btn-ghost:hover:not(:disabled) {
  background: var(--nc-btn-bg);
  border-color: var(--nc-border);
  color: var(--nc-text);
}

.nc-btn-danger {
  border-color: var(--nc-danger-border);
  background: var(--nc-danger-bg);
  color: var(--nc-money-neg);
  font-weight: 700;
}

.nc-btn-danger:hover:not(:disabled) {
  background: var(--nc-danger-bg);
  border-color: var(--nc-money-neg);
  filter: brightness(1.1);
}

.nc-page {
  min-height: 100vh;
  padding: 18px;
  overflow-x: hidden;
}

/* Phone tap targets (layout audit 2026-07-03): header link-chips and grid
   buttons rendered 28-29px tall at phone width across every console.
   Bump interactive elements to a 38px floor at phone width — dense table
   rows inside .nc-table-wrap keep desktop density (they scroll). */
@media (max-width: 640px) {
  /* UX audit theme 5: .nc-table's blanket min-width:1120px forced horizontal
     scroll on EVERY table at phone width, even 3-column ones that fit fine.
     Drop the floor on phones: narrow tables now fit the screen; wide/dense
     tables still auto-size to their content minimum and scroll inside
     .nc-table-wrap (overflow-x:auto) exactly as before. Cole 2026-07-07. */
  .nc-table {
    min-width: 0;
  }
  .nc-page button:not(.nc-table-wrap button),
  .nc-page select,
  .nc-page input:not([type="checkbox"]):not([type="radio"]),
  .nc-header-controls a,
  .nc-tools-menu a,
  .nc-badge[href],
  a.nc-btn {
    min-height: 38px;
  }
  .nc-header-controls a,
  .nc-tools-menu a {
    display: inline-flex;
    align-items: center;
  }

  /* ── Mobile design pass (Cole 2026-07-10: "make all of v2 mobile look
     legit af") — the bar is DESIGNED at 390px, not merely unbroken. ── */
  /* KPI/stat cards: 2-col grid instead of a screen-tall single stack */
  body .nc-summary-grid, .nc-page .nc-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .nc-summary-card { padding: 10px 12px; }
  .nc-summary-card .nc-summary-value { font-size: 22px; }
  /* Page header: title full-width, then ALL control clusters share one
     wrapping row (was: each .nc-header-controls div = its own tall row) */
  .nc-header-bar { display: flex !important; flex-wrap: wrap; align-items: center;
    padding: 10px 12px 8px; gap: 6px 8px; }
  .nc-header-bar > div:first-child, .nc-header-bar h1 { flex: 1 1 100%; }
  .nc-header-bar h1 { font-size: 24px; margin: 0; }
  .nc-subtitle { font-size: 12px; }
  .nc-header-controls { display: inline-flex; gap: 6px; flex-wrap: wrap; width: auto; }
  /* Tab strips: horizontal scroll rows, never wrap into tall stacks */
  .po2-tabs, .prod-view-tabs, .nc-tab-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 6px; padding-bottom: 4px;
  }
  .po2-tabs::-webkit-scrollbar, .prod-view-tabs::-webkit-scrollbar,
  .nc-tab-row::-webkit-scrollbar { display: none; }
  .po2-tabs > *, .prod-view-tabs > *, .nc-tab-row > * { flex: 0 0 auto; }
  /* Cards breathe less on phones; section titles tighter */
  .nc-card { border-radius: 10px; }
  .nc-section-title { font-size: 15px; }
  /* Filter/control clusters: 2-col grid instead of stacked full-widths */
  .nc-filter-row, .po2-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Console shell nav — injected by noli-console.js on every console page.
   Horizontal scroll strip on phones; sticky above the page header bars. */
.nc-shell-nav {
  display: flex;
  align-items: center;
  background: var(--nc-shellbar);
  border-bottom: 1px solid var(--nc-border);
}

.nc-shell-nav > .nc-shell-more {
  padding: 6px 10px 6px 4px;
  border-left: 1px solid var(--nc-border);
  display: flex;
  gap: 4px;
  align-items: center;
}

/* BRAND HIERARCHY — No-Li leads. This is No-Li's ERP.
   It used to render the No-Li script at 18px next to a 26px Ghostdeck mark, so
   the ghost was TALLER than the entire wordmark and was the first thing the eye
   hit — and Ghostdeck was the favicon too. On a phone the brewery's own console
   looked like a vendor platform that happened to contain No-Li's data. Measured
   on prod 2026-07-12: No-Li 29x18px vs Ghostdeck 25x26px. Cole agreed.
   The pairing itself is deliberate (No-Li = the brewery, Ghostdeck = the
   platform) — only the RANK was inverted. Ghostdeck stays, as a small maker's
   mark, not a headline. */
/* 22px on the CROPPED asset (411x115) = ~79px wide and fully legible.
   The old asset was 440x271 with 62% EMPTY TRANSPARENT PADDING — at height:18px
   the visible script only got ~7px of that box, which is why it read as a smudge.
   Cropping to the ink is lossless and is the actual root cause; the height bump
   alone would not have fixed it. */
.nc-shell-noli {
  height: 22px;
  width: auto;
  flex: 0 0 auto;
  margin-left: 12px;
}

.nc-shell-mark {
  height: 16px;          /* was 26px — a maker's mark, subordinate to the brewery */
  width: auto;
  opacity: 0.75;
  flex: 0 0 auto;
  margin-left: 8px;
}

.nc-shell-theme { padding: 6px 8px; min-height: 0; }

.nc-shell-mobile {
  padding: 6px 8px;
  border: 1px solid var(--nc-border);
  border-radius: 7px;
  background: var(--nc-btn-bg);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.nc-shell-strip {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  align-items: center;
  padding: 6px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nc-shell-strip::-webkit-scrollbar { display: none; }

.nc-shell-strip > a {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--nc-dim);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.nc-shell-strip > a:hover { color: var(--nc-text); background: var(--nc-shell-hover); }

.nc-shell-strip > a.active {
  color: #fff;
  background: var(--nc-accent);
}

.nc-shell-more { position: relative; flex: 0 0 auto; }

.nc-shell-action {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--nc-border);
  border-radius: 7px;
  background: var(--nc-btn-bg);
  color: var(--nc-text);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.nc-shell-action:hover,
.nc-shell-action[aria-current="page"] {
  border-color: var(--nc-btn-hover-border);
  background: var(--nc-shell-hover);
}

/* PHONE: the old overflow-x:auto + overflow-y:hidden containment stopped page
   drift, but it also clipped both absolute dropdowns even while they had
   display:block. Keep the nav overflow visible and wrap its controls instead;
   the desktop strip retains its own horizontal scrolling. */
@media (max-width: 900px) {
  .nc-shell-nav {
    overflow: visible;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
}

.nc-shell-more button {
  padding: 6px 10px;
  font-size: 12.5px;
  min-height: 0;
}

/* Log out. Two rules that look redundant beside .nc-shell-action and are not,
   because this is the only <button> wearing that class:

   min-height — the form lives inside .nc-shell-more, so `.nc-shell-more button`
   directly above (0,1,1) outranks `.nc-shell-action` (0,1,0) and would flatten
   the control to min-height:0 while every sibling stayed 32px.

   font-family — .nc-shell-action never sets one. An <a> inherits the page face;
   a <button> does not, and would render in the UA default beside links that
   don't. `font-family`, NOT the `font` shorthand: the shorthand also resets
   size and line-height, which is how the River nav button ended up at 14px
   against its 12px siblings.

   The form itself must not become a block in the flex row. */
.nc-shell-signout { display: inline-flex; margin: 0; }
.nc-shell-signout button.nc-shell-action {
  min-height: 32px;
  font-family: inherit;
  cursor: pointer;
}
@media (max-width: 900px) {
  .nc-shell-signout button.nc-shell-action { min-height: 44px; }
}

@media (max-width: 900px) {
  .nc-shell-action,
  .nc-shell-more button {
    min-height: 44px;
  }
}

.nc-shell-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 190px;
  background: var(--nc-panel);
  border: 1px solid var(--nc-border);
  border-radius: 8px;
  box-shadow: var(--nc-shadow);
  padding: 6px;
  z-index: 41;
}

.nc-shell-menu.open { display: block; }

.nc-shell-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--nc-text);
  text-decoration: none;
  font-size: 13px;
}

.nc-shell-menu a:hover { background: var(--nc-shell-hover); }

.nc-shell-menu-catalog {
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Phone dropdowns are positioned by noli-console.js against the viewport.
   Keep every panel and label shrinkable when the triggering anchor is partly
   outside the viewport (e.g. after nav wrapping or horizontal scrolling). */
@media (max-width: 900px) {
  .nc-shell-menu {
    max-width: calc(100vw - 16px);
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .nc-shell-menu a,
  .nc-shell-menu-head {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

.nc-shell-menu-head {
  padding: 9px 10px 4px;
  color: var(--nc-cream);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-top: 1px solid rgba(51, 65, 85, .5);
}

.nc-shell-menu-head:first-child { border-top: 0; }

.nc-shell-v2-link { color: var(--nc-money-pos) !important; }

/* active console's classic sub-tabs — the old sub-tab strip, reborn */
.nc-shell-subrow {
  display: flex;
  gap: 3px;
  align-items: center;
  padding: 5px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--nc-subrow);
  border-bottom: 1px solid var(--nc-border);
}

.nc-shell-subrow::-webkit-scrollbar { display: none; }

.nc-shell-subrow a {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--nc-border);
  color: var(--nc-dim);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}

.nc-shell-subrow a:hover { color: var(--nc-text); background: var(--nc-shell-hover); }

/* Current view = highlighted tab (overrides the green v2-link color). */
.nc-shell-subrow a.active {
  color: #fff !important;
  background: var(--nc-accent);
  border-color: var(--nc-accent);
  font-weight: 700;
}

.nc-header-bar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -18px -18px 18px;
  padding: 14px 18px;
  background: var(--nc-headerbar);
  border-bottom: 1px solid var(--nc-border);
  backdrop-filter: blur(10px);
}

.nc-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.05;
  text-transform: uppercase;
}

.nc-subtitle {
  color: var(--nc-dim);
  font-size: 12px;
}

.nc-header-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

select,
input[type="search"],
input[type="number"],
input[list] {
  min-height: 34px;
  border: 1px solid var(--nc-border);
  background: var(--nc-bg);
  color: var(--nc-text);
  border-radius: 7px;
  padding: 6px 8px;
}

input[type="number"] { width: 96px; }

.nc-loc-tabs,
.nc-chip-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nc-loc-tabs button,
.nc-chip {
  padding: 7px 10px;
}

/* nc-chip on an <a> (section sub-navs, e.g. the Distribution tab bar):
   match the button chips — links get no button base styling otherwise. */
a.nc-chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--nc-border);
  background: var(--nc-btn-bg);
  color: var(--nc-text);
  border-radius: 7px;
  min-height: 34px;
}

a.nc-chip:hover { background: var(--nc-btn-hover); }

.nc-subnav { margin: 10px 0 2px; }

.nc-loc-tabs button.active,
.nc-chip-active,
.nc-chip.active {
  background: var(--nc-accent);
  border-color: var(--nc-accent);
  color: white;
  font-weight: 700;
}

.nc-badge,
.nc-chip-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  color: var(--nc-dim);
  white-space: nowrap;
  font-size: 12px;
}

/* Colored badges carry a translucent fill, not just an outline — border-only
   pills wash out to "grey on grey" at 11px on the dark panels (Cole 7/02). */
.nc-badge-done,
.nc-badge.good,
.nc-chip-good {
  color: var(--nc-money-pos);
  border-color: rgba(134, 239, 172, .45);
  background: rgba(134, 239, 172, .12);
}

.nc-badge-bad,
.nc-badge.bad,
.nc-chip-bad {
  color: var(--nc-money-neg);
  border-color: rgba(252, 165, 165, .45);
  background: rgba(252, 165, 165, .12);
}

.nc-badge-open,
.nc-badge.warn,
.nc-chip-warn {
  color: var(--nc-warn);
  border-color: rgba(252, 211, 77, .45);
  background: rgba(252, 211, 77, .12);
}

.nc-grid {
  display: grid;
  gap: 14px;
}

/* Grid/flex children default to min-width:auto, so one wide table (e.g. a
   1120px-min timeline) silently stretches EVERY sibling card past the
   viewport — phones then clip tiles under .nc-page's overflow-x:hidden.
   Floor at 0 so wide content scrolls in its wrap instead. */
.nc-grid > *,
.nc-card {
  min-width: 0;
}

.nc-card {
  background: var(--nc-panel);
  border: 1px solid var(--nc-hairline);
  border-radius: 12px;
  /* layered depth: the ambient shadow + a hairline top highlight so cards
     read as lifted surfaces, not flat outlined boxes */
  box-shadow: var(--nc-shadow), inset 0 1px 0 rgba(255, 255, 255, .035);
  max-width: 100%;
}

.nc-card-pad { padding: 16px; }

.nc-section-title {
  /* Middle tier in the brand display face (Cole 2026-07-10 sleekness pass).
     Hierarchy: 30px display title → 19px display section → 12px meta. */
  margin: 0 0 12px;
  color: var(--nc-cream);
  font-family: var(--nc-font-display);
  font-size: 19px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nc-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.nc-checklist-step {
  border: 1px solid var(--nc-border);
  border-radius: 8px;
  background: var(--nc-panel-2);
  padding: 10px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nc-checklist-step-done { border-color: rgba(134, 239, 172, .5); }
.nc-checklist-step-open { border-color: var(--nc-border); }
.nc-checklist-step-na { opacity: .78; }

.nc-checklist-step-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.nc-checklist-step-name { font-weight: 800; }

.nc-checklist-step-detail {
  color: var(--nc-dim);
  font-size: 12px;
  min-height: 34px;
}

.nc-checklist-step-actions {
  margin-top: auto;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.nc-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.nc-summary-card {
  /* Was min-height:116px — content is ~55px, so EVERY summary card on EVERY
     console carried ~60px of dead space (Cole 2026-07-07: "this UI is horrible…
     a theme among many tabs"). Cards now hug content; grid rows still equalize
     heights within a row (align-items stretch), so rows stay even. */
  min-height: 0;
  /* Grid items default to min-width:auto, so a long unbreakable value like
     "$279,293.55" pushed past the card border instead of shrinking the track
     (Cole 2026-07-10, Month-End Journal Entry card). min-width:0 lets the
     track shrink; the container queries below step the value font DOWN on
     narrow cards so a long money string fits on one line — overflow-wrap on
     .nc-summary-value stays only as the wrap-of-last-resort. */
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--nc-hairline);
  border-radius: 11px;
  background: var(--nc-panel-2);
  padding: 13px 14px;
  transition: border-color .13s ease, transform .1s ease;
}

.nc-summary-card:hover { border-color: var(--nc-btn-hover-border); }

.nc-summary-card-accent {
  border-color: rgba(255, 241, 210, .45);
  box-shadow: inset 3px 0 0 var(--nc-accent);
}

.nc-summary-name {
  color: var(--nc-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-summary-value {
  margin-top: 7px;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -.015em;
  line-height: 1.1;
  /* Long money strings wrap inside the card instead of bleeding out. */
  overflow-wrap: anywhere;
}

@container (max-width: 210px) {
  .nc-summary-value { font-size: 21px; }
}
@container (max-width: 168px) {
  .nc-summary-value { font-size: 18px; }
}

.nc-money-pos,
.nc-money.pos { color: var(--nc-money-pos); }
.nc-money-neg,
.nc-money.neg { color: var(--nc-money-neg); }

.nc-sparkline,
svg.nc-sparkline {
  width: 100%;
  height: 28px;
  margin-top: 8px;
  overflow: visible;
}

.nc-table-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  position: sticky;
  top: 64px;
  z-index: 25;
  padding: 12px 14px;
  background: var(--nc-toolbar);
  border-bottom: 1px solid var(--nc-border);
  border-radius: 8px 8px 0 0;
}

.nc-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nc-filters input[type="search"] { min-width: min(320px, 100%); }

.nc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nc-dim);
}

.nc-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.nc-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

.nc-table th {
  /* .nc-table-wrap is a scroll container (overflow-x:auto), so sticky
     offsets resolve against the WRAP, not the viewport — a top of 125px
     shoved every header 125px INTO its table (rows rendered above it).
     top must be 0 here; page-level offsets don't apply inside a wrap. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nc-thead);
  color: var(--nc-cream);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 9px 10px;
  border-bottom: 1px solid var(--nc-border);
}

.nc-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(51, 65, 85, .55);
  vertical-align: middle;
}

.nc-table tbody tr:nth-child(even) td { background: rgba(148, 163, 184, .028); }
.nc-table tr:hover td { background: rgba(148, 163, 184, .09); }
.nc-table tr.locked td { color: var(--nc-locked); }

.nc-table input,
.nc-table select { max-width: 100%; }

.nc-table .nc-money,
.nc-table .nc-money-cell {
  font-variant-numeric: tabular-nums;
}

.nc-inline-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nc-saved-tick {
  color: var(--nc-money-pos);
  font-size: 12px;
  min-width: 42px;
  display: inline-block;
}

.nc-muted { color: var(--nc-dim); }
.nc-right { text-align: right; }
.nc-unit { color: var(--nc-dim); font-size: 12px; }
.nc-item-name { font-weight: 700; }

.nc-section-cell {
  color: var(--nc-cream);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nc-master-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(252, 211, 77, .55);
  color: var(--nc-warn);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 12px;
}

.nc-master-chip button {
  padding: 1px 5px;
  font-size: 11px;
}

.nc-tools {
  position: relative;
}

.nc-tools-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 39px;
  min-width: 230px;
  background: var(--nc-menu-bg);
  border: 1px solid var(--nc-border);
  border-radius: 8px;
  box-shadow: var(--nc-shadow);
  padding: 6px;
  z-index: 60;
}

.nc-tools.open .nc-tools-menu { display: grid; gap: 4px; }

.nc-tools-menu a,
.nc-tools-menu button {
  width: 100%;
  text-align: left;
  text-decoration: none;
  display: block;
  color: var(--nc-text);
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: 6px;
}

.nc-tools-menu a:hover,
.nc-tools-menu button:hover { background: var(--nc-btn-bg); }

.nc-tank-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.nc-tank-tile {
  border: 1px solid var(--nc-border);
  background: var(--nc-tile);
  border-radius: 8px;
  min-height: 94px;
  padding: 10px;
  cursor: pointer;
}

.nc-tank-tile-filled {
  border-color: rgba(134, 239, 172, .55);
  background: linear-gradient(160deg, rgba(34, 197, 94, .22), rgba(34, 197, 94, .08));
}

.nc-tank-tile-empty {
  border-color: var(--nc-border);
  background: var(--nc-tile);
}

.nc-tank-name { font-weight: 850; }

.nc-tank-detail {
  margin: 5px 0;
  color: var(--nc-cream);
  min-height: 20px;
  font-size: 15px;
  font-weight: 750;
}

.nc-toast-wrap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: grid;
  gap: 8px;
}

.nc-toast {
  max-width: 380px;
  border: 1px solid var(--nc-border);
  background: var(--nc-menu-bg);
  color: var(--nc-text);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--nc-shadow);
}

.nc-toast-err {
  border-color: rgba(252, 165, 165, .6);
  color: var(--nc-money-neg);
}

.nc-empty {
  padding: 28px;
  color: var(--nc-dim);
  text-align: center;
}

/* Loading placeholders keep the page's eventual shape visible without
   presenting a false zero. The only loop is removed when motion is reduced. */
.nc-skeleton {
  display: block;
  width: 100%;
  min-height: 18px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(100deg, var(--nc-panel-2) 20%, var(--nc-panel-raised) 40%, var(--nc-panel-2) 60%);
  background-size: 220% 100%;
  animation: nc-skeleton-sweep 1.4s linear infinite;
}

.nc-skeleton + .nc-skeleton { margin-top: 8px; }
.nc-skeleton-line { height: 14px; min-height: 14px; }
.nc-skeleton-line:nth-child(3n) { width: 72%; }
.nc-skeleton-tile { min-height: 108px; }
.nc-skeleton-row { min-height: 38px; border-radius: 4px; }

@keyframes nc-skeleton-sweep {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.nc-empty-icon {
  color: var(--nc-dim);
  font-size: 28px;
  line-height: 1;
  opacity: .65;
}

.nc-empty-title {
  margin-top: 8px;
  color: var(--nc-text);
  font-size: 15px;
  font-weight: 700;
}

.nc-empty-sub {
  margin-top: 4px;
  color: var(--nc-dim);
  font-size: 12.5px;
}

/* Long-page navigation belongs to the body-owned shell. Putting sticky UI
   inside .nc-page silently binds it to that overflow container instead. */
.nc-shell-sticky { position: sticky; top: 0; z-index: 40; }
.nc-jump-pills {
  display: flex;
  gap: 3px;
  align-items: center;
  padding: 5px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--nc-subrow);
  border-bottom: 1px solid var(--nc-border);
}

.nc-jump-pills::-webkit-scrollbar { display: none; }
.nc-jump-pills a {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  color: var(--nc-dim);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  transition: background var(--m-fast) ease, border-color var(--m-fast) ease, color var(--m-fast) ease;
}

.nc-jump-pills a:hover { color: var(--nc-text); background: var(--nc-shell-hover); }
.nc-jump-pills a.active {
  color: var(--nc-text);
  background: var(--nc-panel-raised);
  border-color: var(--nc-info);
  font-weight: 700;
}

[data-jump] { scroll-margin-top: calc(var(--nc-shellh, 0px) + 12px); }

@media (max-width: 900px) {
  .nc-page {
    padding: 12px;
  }

  .nc-header-bar {
    grid-template-columns: 1fr;
    margin: -12px -12px 12px;
  }

  .nc-header-controls {
    justify-content: flex-start;
  }

  .nc-table-toolbar {
    top: 118px;
    grid-template-columns: 1fr;
  }

}

/* Mobile console nav (Cole 2026-07-04): keep the section tabs on screen while
   scrolling a long page. The shell (nav + subrow) sticks to the top — this
   WORKS: the shell is a direct child of <body>, so nothing clips its sticky
   context, and the section tabs live in the shell subrow.
   The page header-bar, however, lives INSIDE .nc-page, which has
   `overflow-x: hidden` (needed to stop phones h-scrolling on wide tiles).
   Any non-visible overflow on an ancestor turns .nc-page into the sticky
   scroll container, so the header-bar's `position: sticky` never actually
   sticks — it scrolls off with the page (verified in Chrome: header at
   y=-218 after a 400px scroll). The old `top: var(--nc-shellh)` line then
   only did harm: at scroll 0 it painted the stacked ~180px header ~85px BELOW
   its own flow box, opening a dead vertical band above the title and sliding
   the hero grid UNDER the header (Cole 2026-07-05: "formatting is still shit").
   Fix: un-stick the header-bar on mobile. The tabs stay pinned via the shell
   (which genuinely sticks); the header just flows normally — no dead band, no
   overlap. Desktop must also keep `top: 0`: `var(--nc-shellh)` was retried on
   desktop 2026-07-16 and produced the same dead band because .nc-page, not the
   viewport, is the sticky container, so the offset applies statically. Mobile
   lets the header flow. Placed late so this wins over the base header rule. */
@media (max-width: 900px) {
  .nc-header-bar { position: static; }
}

/* Mobile console switcher (Cole 2026-07-04): the horizontal console strip
   needed swiping to reach off-screen consoles on a phone. On mobile we hide
   the strip and show a compact dropdown of ALL consoles instead — one tap to
   open, one to switch, nothing hidden off-screen. Desktop keeps the strip. */
.nc-shell-console-dd { display: none; position: relative; flex: 0 0 auto; padding: 6px 8px; }
.nc-shell-console-dd > button {
  padding: 7px 12px; font-size: 13px; font-weight: 700; min-height: 0;
  background: var(--nc-btn-bg); border: 1px solid var(--nc-border);
  color: var(--nc-text); border-radius: 8px; white-space: nowrap; cursor: pointer;
}
.nc-shell-console-menu { left: 8px; right: auto; min-width: 220px; max-height: 72vh; overflow-y: auto; }
.nc-shell-console-menu a { display: block; padding: 11px 12px; font-size: 14px; font-weight: 600; }
.nc-shell-console-menu a.active { color: #fff; background: var(--nc-accent); }
@media (max-width: 900px) {
  .nc-shell-strip { display: none; }
  .nc-shell-console-dd { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════
   nc-action-queue + nc-drill-tile — reusable worklist primitives
   (persona-audit build #7/#9, 2026-07-04). A ranked, drillable action queue
   whose header count-badge opens the list that produced it. Shared across
   Sales (Accounts at Risk), Distribution (past-due / recon), Production
   (stockout), Home (Needs You). Uses the existing nc-* tokens; dark+light.
   ═════════════════════════════════════════════════════════════════════ */
.nc-aq { display: flex; flex-direction: column; }
.nc-aq-row {
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--nc-border);
}
.nc-aq-row:last-child { border-bottom: none; }
.nc-aq-row:hover { background: var(--nc-panel-2); }
.nc-aq-sev { width: 9px; height: 9px; border-radius: 50%; background: var(--nc-dim); }
.nc-aq-sev.crit { background: var(--nc-accent); }
.nc-aq-sev.warn { background: var(--nc-warn); }
.nc-aq-sev.info { background: var(--nc-blue); }
.nc-aq-main { min-width: 0; }
.nc-aq-title {
  font-weight: 700; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nc-aq-meta { font-size: 11.5px; color: var(--nc-dim); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-aq-value { font-weight: 700; font-size: 13px; text-align: right; white-space: nowrap; }
.nc-aq-value.neg { color: var(--nc-accent); }
.nc-aq-sub { font-size: 11px; color: var(--nc-dim); text-align: right; }
.nc-aq-action a, .nc-aq-action button {
  font-size: 11.5px; padding: 4px 9px; white-space: nowrap;
  border: 1px solid var(--nc-border); border-radius: 6px;
  background: var(--nc-btn-bg, var(--nc-panel-2)); color: var(--nc-blue);
  text-decoration: none; cursor: pointer;
}
.nc-aq-action a:hover, .nc-aq-action button:hover { border-color: var(--nc-accent); }
.nc-aq-empty { padding: 18px 14px; color: var(--nc-dim); font-size: 12.5px; text-align: center; }
.nc-aq-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--nc-accent); color: #fff; font-size: 12px; font-weight: 700;
}
.nc-aq-badge.zero { background: var(--nc-dim); }
.nc-aq-foot { padding: 8px 14px; font-size: 11.5px; color: var(--nc-dim); border-top: 1px solid var(--nc-border); }

/* nc-drill-tile — a KPI tile/stat that opens its underlying rows on click. */
.nc-drill { cursor: pointer; transition: border-color .12s ease; }
.nc-drill:hover { border-color: var(--nc-accent); }
.nc-drill:focus-visible { outline: 2px solid var(--nc-blue); outline-offset: 2px; }
.nc-drill-hint {
  font-size: 11px; color: var(--nc-blue); margin-top: 3px;
  display: inline-flex; align-items: center; gap: 3px;
}
.nc-drill-hint::after { content: '→'; }

/* Motion is confirmation, never a requirement. Skeletons retain a quiet
   two-tone loading surface while every moving effect settles immediately. */
@media (prefers-reduced-motion: reduce) {
  .nc-skeleton {
    animation: none;
    background: linear-gradient(100deg, var(--nc-panel-2), var(--nc-panel-raised));
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CE2 state-truth kit */
.nc-fresh {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  color: var(--nc-dim);
  background: var(--nc-panel-2);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.nc-fresh.is-current { color: var(--nc-dim); }
.nc-fresh.is-stale { color: var(--nc-warn); border-color: var(--nc-warn); }
.nc-fresh.is-unknown { color: var(--nc-dim); border-style: dashed; }

.nc-unavail {
  padding: 14px;
  border: 1px dashed var(--nc-border);
  border-radius: 8px;
  color: var(--nc-dim);
  background: var(--nc-panel-2);
  text-align: left;
}

.nc-unavail-title { color: var(--nc-text); font-size: 14px; font-weight: 700; }
.nc-unavail-sub { margin-top: 4px; color: var(--nc-dim); font-size: 12.5px; }

.nc-partial {
  color: var(--nc-warn);
  font-size: 12.5px;
  line-height: 1.35;
}