/* Desktop River renderer. Color values live in the shared Tier-1 River tokens. */
/* Anton (display) + DM Sans (UI): RATIFIED by Cole 2026-09-02 for River desktop
   (DESIGN_SYSTEM_BLUEPRINT §5). Loaded here, not in the templates, so every
   River desktop page gets them the moment it loads this sheet. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;700&display=swap');
html[data-palette="river"] {
  --paper: var(--nc-panel);
  --paper-2: var(--nc-bg);
  --ink: var(--nc-text);
  --ink-2: var(--nc-dim);
  --hair: var(--nc-border);
  --accent: var(--nc-blue);
  --good: var(--nc-ok);
  --short: var(--nc-danger);
  --warn: var(--nc-warn);
  --chip-good: var(--nc-ok-bg);
  --chip-short: var(--nc-warn-bg);
  --chip-warn: var(--nc-info-bg);
}
/* Typeface slots for River DESKTOP. mobile_tier1.css sets --serif to New York
   and --sans to SF at :root[data-palette="river"] (0,2,0); this block matches
   that specificity and loads later, so it wins here and only here — mobile
   tier-1 pages never load this file. --serif keeps its NAME because 40+ rules
   read it as "the display slot"; its VALUE is now the ratified display face. */
:root[data-palette="river"] {
  --serif: 'Anton', 'DM Sans', Impact, 'Arial Narrow', sans-serif;
  --sans: 'DM Sans', -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
}
/* REMOVED 2026-08-13 — this block re-asserted the console light palette at
   html.nc-light[data-palette="river"] (0,2,1), which OUTRANKS mobile_tier1.css's
   River palette at (0,2,0). The effect: toggling to light THREW AWAY every
   AA-tuned River value and restored the console's untuned one. --warn went from
   #8F5606 (tuned to 5.24 on --paper-2) back to #a16207 (4.32 — the exact value
   mobile_tier1's comment rejects by name), and --ink-2 from #5F656B back to
   #6d675a. So the /today token fix only held while the toggle was untouched,
   and the two pairs tests/test_river_token_polarity.py had to SANCTION were
   this block's doing, not a fleet-palette problem.

   The block existed so nc-light would "change the pixels, not only the root
   class". data-theme does that job now: the shared theme boot
   (templates/partials/_river_theme_boot.html) sets it on every River page, and
   mobile_tier1.css already keys [data-theme="light"] / [data-theme="dark"] at
   (0,3,0) — so the toggle drives the palette WITHOUT discarding its tuning.

   Do not reinstate this. If a River page needs a console value changed, tune it
   in mobile_tier1.css's River palette, where both polarities live together. */
* { box-sizing: border-box; }
body.river-today {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
}
.river-wrap {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 20px 28px 36px;
  padding:
    max(20px, env(safe-area-inset-top))
    max(28px, env(safe-area-inset-right))
    max(36px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
}
.river-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.river-kicker, .river-label { color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.river-title { margin: 0; font: 400 30px/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; }
.river-actions { display: flex; align-items: center; gap: 10px; }
.river-btn, .river-link, .river-header-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.river-header-link { color: var(--accent); }
.river-dist-nav {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  scrollbar-width: thin;
}
.river-dist-nav-stack { display: grid; gap: 5px; margin: 0 0 16px; }

/* HEADER GEOMETRY — THE FIVE DISTRIBUTION SUB-TABS.
   Cole 2026-09-02, clicking through the tabs after the pass-1 deploy: "clicking
   through the sub tabs does change the alignment of the sub tab. distribution
   inventory is at the top of the page and shipments is on the side so the entire
   spacing is off." Measured before the fix, at 1440 in both themes: the sub-tab
   row moved 104px between tabs and the title 38px.
   IT LIVES HERE, NOT IN distribution_river.css, BECAUSE /orders-inbox DOES NOT
   LOAD THAT FILE — it loads order_inbox_river.css, 26 lines of media queries.
   All five tabs load desktop_today.css, so this is the only shared home. The
   first attempt put these rules in distribution_river.css scoped to a group
   including .river-order-inbox, and Orders' header measured byte-identical
   before and after: a selector cannot reach a page that never loads its file. */
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-wrap{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"gnav gnav" "title dnav";align-items:center;column-gap:20px;row-gap:8px}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-wrap>*{grid-column:1/-1}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-dist-nav-stack{display:contents}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-dist-nav-global-shell{grid-area:gnav}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-dist-nav-domain{grid-area:dnav;justify-self:start;padding:3px}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-dist-nav-domain .river-dist-nav-link{min-height:30px;padding:5px 10px}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-top{grid-area:title;padding:0}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-dist-nav-global{padding:2px 4px}
/* The last two sources of drift, measured: Shipments and Dist inventory carried
   workbench tunings in noli-ui.css that the other three tabs never got — a 12px
   wrap padding-top (vs the base 20px) and a 28px title (vs 30px). Those 8px and
   2px were the entire residual after the grid was shared: nav row 40 vs 48,
   title 78 vs 93. Cole called the tight version good, so the other three come UP
   to it rather than Shipments going back down. Same values as noli-ui.css, which
   loads later and still wins on its two pages — deliberately identical so the
   duplication cannot drift into a disagreement. */
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-wrap{padding-top:12px}
:is(.river-distribution-shipments,.river-distribution-inventory,.river-distribution-small,.river-order-inbox) .river-title{font-size:28px}
.river-dist-nav-global-shell { display: flex; gap: 5px; min-width: 0; }
.river-dist-nav-global {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 5px;
  border-color: color-mix(in srgb, var(--hair), transparent 25%);
  background: color-mix(in srgb, var(--accent), var(--paper) 92%);
}
/* --ink-2 is tuned to CLEAR AA by the smallest margin that works (5.16 on
   --paper-2). Diluting it 25% with transparent dropped these six global-nav
   links to 3.06 light / 3.61 dark — under AA on every River page carrying this
   nav, in EVERY theme state. De-emphasis here comes from uppercase tracking and
   the ink-2 tone, not from thinning ink that has no headroom left. Do not
   re-add transparency to a token that is already at its contrast floor.
   12px, not 9px: the blueprint's absolute floor (§5, "9–11px is a bug
   everywhere"); measured 9px on every Distribution page 2026-09-02. */
/* Box stays the pre-ruling 24px so no River page gains chrome from the type change
   (measured: 26px min-height + 3px padding pushed Brewery Stock 299 → 303). */
.river-dist-nav-global .river-dist-nav-link { min-height: 24px; padding: 2px 10px; color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Navigation STATE is ink. Cole 2026-09-02: one red per screen, and the red is
   the action; an active chip painted in the action colour reads as a button. */
.river-dist-nav-global .river-dist-nav-link.is-active { color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); }
.river-dist-nav-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.river-dist-nav-link.river-dist-nav-action { min-height: 28px; border: 1px solid var(--hair); background: var(--paper); }
/* Log out is a FORM, not a link, so nothing can prefetch it (see /logout in
   noli_erp.py). The submit button therefore has to be reset to look exactly like the
   Approvals link beside it — a button that reads as a button here would say "this is a
   page action", which a session control is not. */
.river-dist-nav-signout { display: flex; margin: 0; padding: 0; }
/* font-FAMILY, never the `font` shorthand: `font: inherit` also sets font-size and
   line-height to inherit, and at (0,1,1) it beats `.river-dist-nav-link` at (0,1,0)
   whatever the source order — measured 14px/20.3px against the sibling link's
   12px/14.4px. It also silently undid the explicit line-height above, whose comment
   exists because the chip's box must not move with font metrics.

   SCOPE, measured by adversarial review 2026-09-02: `font-family: inherit` itself
   is belt-and-braces on these pages, not load-bearing. Deleting it changes nothing
   — the button still renders "DM Sans" at 12px/30.4px, identical to Approvals,
   because an earlier sheet already supplies the face. What IS load-bearing is the
   ban on the shorthand, which is a real 14px-vs-12px regression. Keeping the
   declaration for the pages that may not carry that earlier sheet; the comment
   should not claim an effect that was measured and not found. */
button.river-dist-nav-link { font-family: inherit; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; }
.river-dist-nav-more { position: relative; }
.river-dist-nav-more > summary { cursor: pointer; list-style: none; }
.river-dist-nav-more > summary::-webkit-details-marker { display: none; }
.river-dist-nav-more-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  right: 0;
  width: 220px;
  max-height: min(630px, 70vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink), transparent 78%);
}
.river-dist-nav-more-menu a, .river-dist-nav-more-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 700 12px/1.3 inherit; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.river-dist-nav-more-menu a:hover, .river-dist-nav-more-menu button:hover { color: var(--accent); background: var(--paper-2); }
.river-dist-nav-more-head { padding: 8px 10px 3px; color: var(--ink-2); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.river-dist-nav-link {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  /* Explicit so the chip's box does not move with font metrics. Measured
     2026-09-02: pages whose --sans was undefined rendered these at
     line-height:normal; defining the token made them inherit 1.45 and every
     Approvals/More chip grew 3px. 1.2 holds the 30px box either way. */
  line-height: 1.2;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.river-dist-nav-link:hover { color: var(--accent); background: var(--paper-2); }
/* The nav's Log out is the only <button> among the nav's anchors, so it alone is
   reached by noli-console.css's generic `button:hover:not(:disabled)` — (0,2,1),
   which beats `.river-dist-nav-link:hover` at (0,2,0). Measured: Log out hovered
   to --nc-btn-hover / --nc-btn-hover-border (241,236,220 on 168,160,138) while
   Approvals beside it stayed --paper-2 on --hair (238,240,240 on 221,224,226).
   Identical at rest, divergent on hover, which is why the original per-property
   check missed it — it recorded colour and colour alone matched.
   Both classes in the selector, (0,3,1), so this does not depend on which sheet
   the template happens to load second. Found by adversarial review 2026-09-02. */
button.river-dist-nav-link.river-dist-nav-action:hover { border-color: var(--hair); background: var(--paper-2); }
.river-dist-nav-link.is-active {
  /* ink, not accent: navigation state must never look like the action */
  color: var(--paper);
  background: var(--ink);
  box-shadow: none;
}
@media (max-width: 900px) {
  .river-dist-nav-link.river-dist-nav-action { min-height: 44px; }
}
.river-btn { border: 1px solid var(--hair); background: var(--paper); cursor: pointer; font: inherit; font-weight: 700; }
.river-site-tag { display: inline-block; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.river-hero { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
.river-card { min-width: 0; border: 1px solid var(--hair); border-radius: 12px; background: var(--paper); padding: 14px; }
.river-hero-card { padding: 16px; }
.river-number { margin-top: 4px; font: 400 40px/1 var(--serif); letter-spacing: .02em; }
.river-number.river-unknown {
  max-width: 100%;
  font: 600 clamp(22px, 2.8vw, 36px)/1 var(--sans);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.river-number-small { font-size: 32px; }
.river-unit { color: var(--ink-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.river-sub { margin-top: 6px; color: var(--ink-2); font-size: 12px; }
.river-format-line { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; color: var(--ink-2); font-size: 12px; }
.river-format-line b { color: var(--ink); }
.river-mini-table { width: 100%; margin-top: 8px; border-collapse: collapse; color: var(--ink-2); font-size: 11px; }
.river-mini-table th, .river-mini-table td { padding: 4px 6px; border-top: 1px solid var(--hair); text-align: right; }
.river-mini-table th:first-child { padding-left: 0; text-align: left; }
.river-plan-table { table-layout: fixed; font-size: 12px; }
.river-plan-table th, .river-plan-table td { overflow-wrap: anywhere; }
.river-plan-table .river-combined th, .river-plan-table .river-combined td { border-top-width: 2px; color: var(--ink); font-weight: 800; }
.river-package-plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.river-package-plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 8px; border: 1px solid var(--hair); border-radius: 7px; background: var(--paper-2); }
.river-package-plan-row span { color: var(--ink-2); font-size: 12px; text-align: right; }
.river-package-plan-row .river-package-formats { flex-basis: 100%; }
.river-last-packaged { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }
.river-last-packaged .river-sub b { color: var(--ink); }
.river-progress-card { margin-bottom: 10px; padding: 12px 14px; }
.river-morning-grid { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 10px; align-items: start; margin-bottom: 10px; }
.river-compliance-queues { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 10px; margin-bottom: 10px; }
.river-compliance-strip { display: flex; min-height: 44px; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--paper); color: var(--ink-2); text-decoration: none; }
.river-compliance-strip b { color: var(--ink); }
.river-compliance-strip-amber { border-color: color-mix(in srgb, var(--warn) 58%, var(--hair)); background: color-mix(in srgb, var(--warn) 10%, var(--paper)); }
.river-compliance-strip-amber .river-label, .river-compliance-strip-amber b { color: var(--warn); }
.river-pub-card .river-number { font-size: 34px; }
.river-stack { display: flex; min-height: 20px; margin-top: 8px; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.river-stack-segment { min-width: 2px; border-right: 2px solid var(--paper); background: color-mix(in srgb, var(--accent) 82%, var(--paper)); }
.river-stack-segment.food { background: color-mix(in srgb, var(--good) 72%, var(--paper)); }
.river-stack-segment.merch { background: color-mix(in srgb, var(--accent) 48%, var(--paper)); }
.river-stack-segment.non-alc { background: color-mix(in srgb, var(--good) 42%, var(--paper)); border-right: 0; }
.river-stack-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 8px; margin-top: 5px; color: var(--ink-2); font-size: 10px; font-weight: 700; }
.river-stack-legend span { min-width: 0; overflow-wrap: anywhere; }
.river-stack-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 82%, var(--paper)); }
.river-stack-legend i.food { background: color-mix(in srgb, var(--good) 72%, var(--paper)); }
.river-stack-legend i.merch { background: color-mix(in srgb, var(--accent) 48%, var(--paper)); }
.river-stack-legend i.non-alc { background: color-mix(in srgb, var(--good) 42%, var(--paper)); }
.river-pub-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 8px; color: var(--ink-2); font-size: 11px; line-height: 1.25; }
.river-pub-kpis b { color: var(--ink); font-family: var(--serif); font-size: 14px; }
.river-source { margin-top: 8px; color: var(--ink-2); font-size: 10px; letter-spacing: .04em; }
.river-debug-source { opacity: .78; }
.river-progress-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.river-progress-copy .river-sub { margin-top: 3px; }
.river-progress-copy strong { font-size: 18px; }
.river-gauge { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--hair); }
.river-gauge i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.river-gauge-unknown { background: repeating-linear-gradient(135deg, var(--hair) 0, var(--hair) 4px, var(--paper-2) 4px, var(--paper-2) 8px); }
.river-grid { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.river-wide { grid-column: 1 / -1; }
.river-section-title { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; font-size: 16px; font-weight: 700; }
.river-list { display: grid; gap: 0; }
.river-stream-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.river-stream-site { min-width: 0; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; }
.river-stream-site > .river-label { margin-bottom: 5px; }
.river-stream-site .river-row { padding: 5px 0; gap: 8px; }
.river-stream-site .river-icon { flex-basis: 28px; min-height: 28px; }
.river-stream-unknown { margin-top: 6px; }
.river-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--hair); }
.river-row-link { color: inherit; text-decoration: none; }
.river-row:first-child { border-top: 0; padding-top: 0; }
.river-icon { flex: 0 0 32px; min-height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--chip-warn); color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
/* KIND CHIPS: ink and ground are the SAME HUE by design (the ground is a mix
   of the ink into --paper), so the treatment has to differ per polarity — on a
   light ground the ink must be darkened toward --ink or it washes out.

   The light treatment used to live ONLY under html.nc-light, and the dark
   treatment applied unconditionally. But "no class + OS light" IS a light
   state and never gets .nc-light, so it received the DARK treatment on a LIGHT
   ground: amber on amber-tinted cream. Same polarity defect as the --warn
   orphan in mobile_tier1.css, one level up from tokens.

   So the DEFAULT is now the light treatment and the dark treatment sits behind
   the OS media query — the same shape mobile_tier1.css uses for the palette
   itself, so both stylesheets now express polarity the same way. .nc-light is
   unchanged and still wins by specificity in both media contexts.

   2026-08-13 — THE DARK TREATMENT MUST BE REACHABLE TWO WAYS, and keying it on
   the OS media query ALONE became a defect the moment data-theme was made
   authoritative for the palette. A user who stored 'dark' on a LIGHT-mode Mac
   now gets data-theme="dark" -> the DARK palette from mobile_tier1's (0,3,0)
   block, while `prefers-color-scheme: dark` is FALSE — so the chips took the
   LIGHT treatment on a dark ground. That is the same polarity split this file
   already documents above, relocated one state over. Both routes are declared
   below and tests/test_river_theme_boot.py pins that neither disappears. */
.river-kind-brew .river-kind-chip { background: color-mix(in srgb, var(--accent) 34%, var(--paper)); color: color-mix(in srgb, var(--accent) 78%, var(--ink)); }
.river-kind-filter .river-kind-chip { background: color-mix(in srgb, var(--good) 34%, var(--paper)); color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.river-kind-packaging .river-kind-chip { background: color-mix(in srgb, var(--warn) 38%, var(--paper)); color: color-mix(in srgb, var(--warn) 62%, var(--ink)); }
/* Route 1 — OS dark with no resolved choice on the element yet: a no-JS render,
   or the instant before the boot runs. Scoped :not([data-theme]) so it never
   fights Route 2. */
@media (prefers-color-scheme: dark) {
  html:not(.nc-light):not([data-theme])[data-palette="river"] .river-kind-brew .river-kind-chip { background: color-mix(in srgb, var(--accent) 22%, var(--paper)); color: var(--accent); }
  html:not(.nc-light):not([data-theme])[data-palette="river"] .river-kind-filter .river-kind-chip { background: color-mix(in srgb, var(--good) 22%, var(--paper)); color: var(--good); }
  html:not(.nc-light):not([data-theme])[data-palette="river"] .river-kind-packaging .river-kind-chip { background: color-mix(in srgb, var(--warn) 24%, var(--paper)); color: var(--warn); }
}
/* Route 2 — the resolved theme the shared boot writes. Independent of the OS,
   which is the whole point: this is the state the media query cannot see. */
html[data-theme="dark"][data-palette="river"] .river-kind-brew .river-kind-chip { background: color-mix(in srgb, var(--accent) 22%, var(--paper)); color: var(--accent); }
html[data-theme="dark"][data-palette="river"] .river-kind-filter .river-kind-chip { background: color-mix(in srgb, var(--good) 22%, var(--paper)); color: var(--good); }
html[data-theme="dark"][data-palette="river"] .river-kind-packaging .river-kind-chip { background: color-mix(in srgb, var(--warn) 24%, var(--paper)); color: var(--warn); }
html.nc-light[data-palette="river"] .river-kind-brew .river-kind-chip { background: color-mix(in srgb, var(--accent) 34%, var(--paper)); color: color-mix(in srgb, var(--accent) 78%, var(--ink)); }
html.nc-light[data-palette="river"] .river-kind-filter .river-kind-chip { background: color-mix(in srgb, var(--good) 34%, var(--paper)); color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
html.nc-light[data-palette="river"] .river-kind-packaging .river-kind-chip { background: color-mix(in srgb, var(--warn) 38%, var(--paper)); color: color-mix(in srgb, var(--warn) 62%, var(--ink)); }
.river-copy { min-width: 0; flex: 1; }
.river-row-title { font-weight: 700; }
.river-detail, .river-reason { margin-top: 3px; color: var(--ink-2); font-size: 12px; }
.river-reason, .river-unknown { color: var(--ink-2); }
.river-status { min-width: 0; max-width: 55%; flex: 0 1 auto; overflow-wrap: anywhere; color: var(--ink-2); font-size: 12px; font-weight: 700; text-align: right; }
.river-status b { color: var(--ink); }
.river-unknown { font-weight: 600; letter-spacing: .02em; }
.river-not-started { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.river-empty { padding: 8px 0; color: var(--ink-2); }
.river-order-lines { display: grid; gap: 5px; margin-top: 8px; }
.river-order-lines > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 5px; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: 12px; }
.river-signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.river-signal { padding: 6px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); font-size: 12px; }
.river-signal b { color: var(--ink); }
#overnight .river-signal-grid { grid-template-columns: 1fr; gap: 8px; }
.river-queues-strip { display: flex; min-height: 44px; align-items: center; gap: 8px 14px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 10px; background: var(--paper); }
.river-queues-strip a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.river-queues-strip a b, .river-queues-strip a [data-payload-number] { color: var(--ink); font-size: 16px; font-weight: 800; }
.river-queues-strip .river-reason { margin: 0; }
.river-pub-kpis b.river-unknown, .river-signal b.river-unknown { color: var(--ink-2); font-family: var(--sans); font-size: 13px; }
.river-good { color: var(--good) !important; font-weight: 800; }
.river-warn { color: var(--warn) !important; font-weight: 800; }
.river-bad { color: var(--short) !important; font-weight: 800; }
.river-tickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--hair); border-radius: 8px; background: var(--hair); }
.river-tick { display: grid; gap: 2px; padding: 8px; background: var(--paper); }
.river-tick span, .river-tick small { color: var(--ink-2); font-size: 10px; }
.river-tick b { font: 600 18px/1 var(--serif); }
.river-news { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.river-news a { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--hair); border-radius: 8px; color: var(--ink); text-decoration: none; }
.river-news span { color: var(--ink-2); font-size: 10px; }
.river-news .river-source { grid-column: 1 / -1; }
.river-world-generated { margin-top: -4px; color: var(--ink-2); font-size: 11px; }
.river-world-stale { margin-bottom: 6px; padding: 6px 8px; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--paper)); color: var(--ink-2); font-size: 12px; }
.river-editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 14px; }
.river-editorial-category { padding-top: 10px; border-top: 1px solid var(--hair); }
.river-editorial-category h3, .river-spokane-week h3 { margin: 0 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--hair); font: 800 12px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.river-editorial-item { margin: 0; }
.river-editorial-item + .river-editorial-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.river-editorial-item a { color: var(--ink); font-size: 14px; line-height: 1.3; text-decoration: none; }
.river-editorial-item a b { font-weight: 800; }
.river-editorial-item p { margin: 6px 0; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.river-editorial-item .river-source { margin-top: 5px; opacity: .72; font-size: 10px; }
.river-spokane-week { margin-top: 10px; }
.river-spokane-week th small { display: block; color: var(--ink-2); font-weight: 400; }
.river-spokane-week a { color: var(--ink); }
.river-degraded { color: var(--ink-2); }
.river-sales-strip { display: grid; grid-template-columns: 1fr; gap: 6px; }
.river-sales-period { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; }
.river-sales-period > span { color: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.river-sales-period > b { font-size: 18px; }
.river-sales-period > small, .river-sales-period > em { grid-column: 2; color: var(--ink-2); font-size: 10px; font-style: normal; }
.river-yield-line { margin-top: 4px; color: var(--ink-2); font-size: 11px; }
.river-production-line { white-space: normal; }
.river-actions .nc-tools-menu {
  max-height: calc(100vh - 160px);
  max-height: max(160px, calc(100vh - 160px));
  max-height: max(160px, calc(100dvh - 160px));
  overflow-y: auto;
}
@media (min-width: 1100px) {
  .river-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .river-morning-grid, .river-compliance-queues { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .river-wrap {
    padding: 16px 16px 28px;
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
  .river-hero, .river-grid, .river-morning-grid, .river-signal-grid { grid-template-columns: 1fr; }
  .river-wide { grid-column: auto; }
  .river-top { align-items: flex-start; flex-direction: column; }
  .river-tickers { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .river-news { grid-template-columns: 1fr; }
  .river-editorial { grid-template-columns: 1fr; }
  .river-stack-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .river-stream-columns, .river-package-plan-list { grid-template-columns: 1fr; }
  .river-compliance-strip, .river-queues-strip { align-items: flex-start; flex-wrap: wrap; }
  /* The line above turns .river-top into a left-aligned COLUMN, so .nc-tools
     becomes a narrow box on the left. The menu is `position: absolute;
     right: 0` (noli-console.css), i.e. right-anchored, so a 230px menu hung
     117.8px off the LEFT EDGE of the screen at every width from 481 to 900.
     This override used to live only in the max-width:480px block below, which
     is why the defect was exactly the gap between the two queries. It belongs
     HERE, with the rule that causes it. */
  .river-actions .nc-tools-menu {
    right: auto;
    left: 0;
  }
}
@media (max-width: 480px) {
  html, body.river-today { max-width: 100%; overflow-x: clip; }
  .river-wrap {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .river-top, .river-actions, .river-card, .river-row, .river-copy,
  .river-package-plan-row, .river-order-lines > div { min-width: 0; }
  .river-actions { width: 100%; flex-wrap: wrap; }
  .river-actions > * { flex: 0 0 calc(50% - 5px); }
  .river-actions .nc-tools > .river-btn { width: 100%; }
  /* `.river-actions .nc-tools-menu { right: auto; left: 0 }` moved UP into the
     max-width:900px block, which also covers every width here. */
  .river-card { padding: 12px; }
  .river-section-title { align-items: flex-start; }
  .river-section-title > span { min-width: 0; overflow-wrap: anywhere; }
  .river-package-plan-row { flex-wrap: wrap; }
  .river-package-plan-row > span { text-align: left; }
  .river-mini-table { table-layout: fixed; }
  .river-mini-table th, .river-mini-table td,
  .river-order-lines > div, .river-tick, .river-news a { overflow-wrap: anywhere; }
  .river-tickers { grid-template-columns: 1fr 1fr; }
  .river-queues-strip { gap: 0 12px; }
  .river-queues-strip .river-label { flex-basis: 100%; padding-top: 6px; }
  .river-row-link, .river-news a, .river-editorial-item a { min-height: 44px; }
  .river-editorial-item a { display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}