/* This file, plus ../../../tailwind.config.js, is now "the config" CONSTITUTION.md §4 means by "the brand lives in the Tailwind config" -- hash-locked by ontakt_ui/tests/test_design_gate.py, which also proves the served ontakt.css is reproducible from this source by the pinned Tailwind CLI (backend/tools/tailwind/). Regenerate with: backend/tools/tailwind/tailwindcss- -c tailwind.config.js \ -i ontakt_ui/static/ontakt/tailwind_input.css \ -o ontakt_ui/static/ontakt/ontakt.css Never edit ontakt.css directly -- it is generated output and the gate will reject a hand-edited copy that no longer matches this source. TAILWIND_MIGRATION_PLAN.md Phase B moved the toolchain and the 27 colour custom properties (see tailwind.config.js's own comment on why the plan's "46" doesn't match what's actually in this file, and why colour tokens bind to var(--x) rather than a literal value) -- Phase C is what moves the templates below off these component classes and onto Tailwind utilities. CASCADE ORDER, and why this is plain CSS rather than `@layer components`. A utility class must win a specificity tie against a hand-authored class on the same element (`class="card text-red-500"` must render red), which requires this CSS to sit, in the generated output, BEFORE the utilities Tailwind emits for `@tailwind utilities`. Partway through Phase C.1 that was solved by wrapping the whole file in `@layer components { ... }` -- but a `@layer`'s contents are emitted ONLY for class names Tailwind finds by scanning `content`, unlike plain top-level CSS, which is always emitted regardless of whether anything in `content` references it. That silently purged classes built in Python (`views.py`'s `"col-3"`) and at runtime in JS, `4fdad19`'s incident. The actual fix needs no layer at all: `@tailwind utilities` is moved to the BOTTOM of this file, after all the hand-authored CSS below, instead of being wrapped in `@layer components` up top. Plain CSS that sits textually before `@tailwind utilities` loses cascade ties to a utility on the same element -- exactly the behaviour `@layer components` was added to get -- and, being plain top-level CSS rather than an `@layer` body, it is never subject to content-scanning and can never be purged, regardless of what `content` does or does not list. This makes the failure mode structurally impossible rather than something `content`'s globs must be remembered to keep covering (`ontakt_ui/tests/test_design_gate.py`'s `AllDeclaredClassesSurviveTests` also proves it empirically). `content` still matters for utility classes themselves -- Tailwind only emits the utilities it finds referenced there -- so the broadened globs `4fdad19` added stay, as the correct mechanism for THAT half. */ *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } /* EVERY BORDER IN THIS APP WAS OFF, and silently. `tailwind.config.js` carries `corePlugins: { preflight: false }`. Tailwind's preflight is, among other things, what sets `border-style: solid` on every element. Without it, `border-style` defaults to `none`, and `border-width: 1px` WITH `border-style: none` computes to ZERO. The `.border` class exists in the served CSS, matches the element, and the browser paints nothing. MEASURED on the live app on 2026-09-07, asking the browser for the `getComputedStyle` of every element with a border class: /plant/?range=30d 16 x `border` and 3 x `border-b` -> 0px,0px,0px,0px /settings/camera/ 36 x `border` and 10 more -> 0px,0px,0px,0px It is the same family as the `border-primary/40` and `bg-primary/5` failure (see the `primaryBg` note in tokens.json): the class is written, the CSS is generated, and it is not seen. A numbered `{% step %}` circle found it, coming out without a ring even after its colour was fixed. The rule below is EXACTLY Tailwind's preflight rule, with our `hairline` as the default colour instead of Tailwind's grey. It goes here, in the hand-written half and before `@tailwind utilities`, so any border utility beats it on specificity. */ *, ::before, ::after { border-width: 0; border-style: solid; border-color: var(--hairline); } /* OnTakt design system v2 — borderless surfaces, one orange gradient ramp. - Card padding: 22px (`spacing.card`, tailwind.config.js). Grid gap: 16px (`gap-4`) -- the KPI grid, the one grid in the system. This line read "20px" until 2026-08-29, and 20px genuinely was the value: `.kpi-grid` carried `gap: 20px` before the Tailwind conversion, which snapped it to the nearest standard step. That looked like drift to correct, so it was corrected back to 20px -- and the owner, seeing both rendered side by side, kept the 16px: at four columns the wider gap wastes horizontal space the tiles could use. The accident turned out to be the better value, so the prose moves to meet the code rather than the other way round. `spacing.kpi` (20px) stays in the config for other uses. Internal stack gap: mostly 8px (`gap-2`, 97 uses across the live templates -- corrected 2026-08-28; this line previously said "10-12px", which undercounted the actual most-common value). - Radius: four steps, now named in the config by what they wrap -- `rounded-card` 16px (cards, panels), `rounded-media` 12px (image frames), `rounded-code` 10px (documentation's formula `

` blocks,
     pairing with the `code` font-size step) and `rounded-pill` 9999px (nav,
     pills, buttons, bars, tracks). Named 2026-08-28: `borderRadius` was the
     last axis with no scale, so these lived as three Tailwind defaults plus
     one arbitrary value the scale ratchet could not see.
   - No borders. Elevation = a faint white-tint surface over the app background.
   - Color: orange gradient = active/emphasis/every chart fill. Green/red = status pills
     and the two named exceptions (pace track, shift on/off-target bars) only. */

/* >>> GENERATED from tools/design/tokens.json -- do not edit by hand */

:root {
  --appBg: #0a0a0a;
  --surface: #171717;
  --surfaceHover: #262626;
  --skeleton: #262626;
  --track: #404040;
  --textMain: #fafafa;
  --textMuted: #a3a3a3;
  /* RAISED FROM #7d7d86 TO #85858e FOR CONTRAST. Measured 2026-09-07 on
     `surfaceHover` composited over `appBg`, which is a card's real background:
     #7d7d86 gave 4.36:1 and fails AA for 11px text, which is exactly the size
     this role lives at -- scope labels and dimmed rows. #85858e gives 4.86.
     Same hue, same role. */
  --textDim: #a3a3a3;
  /* TWO NEW STEPS OF THE NEUTRAL RAMP, 2026-09-10, and they are truly new:
     the ramp had none that would do. Measured on the rendered page, not
     computed: `textFaint` failed AA in BOTH themes at once.

        light   #a3a3a3 on white     2.52   needs 4.5
        dark    #737373 on #171717   3.78   needs 4.5

     And there was nowhere to move it. In light, #525252 is already `textMuted`
     AND `textDim`, so dropping there merges three roles into one colour; the
     only intermediate step was #737373, which passes on white (4.74) and fails
     on the page background (4.35). In dark the problem is the mirror image and
     points the other way.

     IT IS A FINDING ABOUT THE RAMP, NOT ABOUT A PRODUCT. OnTakt and the ERP hit
     the SAME value and the SAME deficit separately, each measuring its own:
     there is no step that is at once distinguishable from #525252 and
     AA-compatible on #f5f5f5. Two independent consumers tripping in the same
     place is the proof that a step is missing, not that someone chose badly.

        light   #6b6b6b   5.33 on white     4.89 on #f5f5f5
        dark    #858585   5.37 on #0a0a0a   4.86 on #171717

     With MARGIN, not grazing the minimum: #6e6e6e and #808080 also pass, by
     hundredths, and a token that passes by 0.01 fails again as soon as
     someone changes a surface. The owner chose this over the two alternatives
     --- 'use faint only on white' and 'accept the deficit' --- because both are
     rules someone has to remember, and this one was already forgotten twice. */
  --textFaint: #858585;
  --primary: #ff6600;
  --primaryLight: #ff8c47;
  /* The hover orange. AMENDED 2026-09-08: it was #e65c00 -- an orange DARKER than the brand -- and the approved design uses #ff7a1f, which is LIGHTER. It slipped because the brief's token summary carried 16 pairs and the export has 26: it was compared against the summary instead of the source. The ten missing were precisely the states (hover, press) and the soft fills. */
  --primaryHover: #ff7a1f;
  --seriesC: #d4a017;
  --success: #22c55e;
  --successBg: rgba(34,197,94,.14);
  --successText: #4ade80;
  --danger: #ef4444;
  --dangerBg: rgba(239,68,68,.14);
  --dangerText: #f87171;
  --headingColor: #fafafa;
  --hairline: #262626;
  --hairlineStrong: #404040;
  --overlayFaint: rgba(255,255,255,0.04);
  --hoverStrong: rgba(255,255,255,0.1);
  --glowA: rgba(255,255,255,0.035);
  --glowB: rgba(255,255,255,0.01);
  --toastBg: #fafafa;
  --toastText: #0a0a0a;
  /* The `control` role (input, button, select, textarea). It did not exist:
     the scale jumped from `media` 12px to `pill` 9999px, so every control
     chose freely and 70% ended up pill -- five completely round text fields.
     8px sits below `code` (10px) on purpose: a control is smaller and more
     frequent than a code block, and 8 separates it cleanly from 9999 without
     reading sharp. Bootstrap's default 6px would sit 4px from `code` and lose
     the role distinction in the same layout.
      AMENDED 2026-09-08: it is now 10px, not 8. The approved design draws its controls at 10 and the design wins. A consequence this paragraph denied: `control` and `code` are THE SAME, so the role separation argued above no longer exists in the scale. The argument stays written because it explains why 8 was right while it was -- but the current value is 10, and whoever reads this must not 'fix' it back. */
  --radius-control: 10px;
  /* The brand orange AT 15% ALPHA, for a surface that states the tone
     without shouting it. Not a new colour: it is the rule this same file
     already wrote for `info` and `warning` -- role = the tone, background =
     the same tone at 15% -- applied to `primary`, the only role that had it
     without a token.

     WHY IT WAS NEEDED, measured 2026-09-07: `tailwind.config.js` binds every
     colour to `var(--token)` and does NOT declare the `` marker,
     so an opacity modifier -- `bg-primary/5`, `border-primary/40` -- GENERATES
     NOTHING. The class is written, it does not appear in the served CSS, and
     the element stays transparent. Five new uses fell there the same day, two
     in a component nobody called yet: they would have debuted invisible. The
     gate `test_all_template_classes_are_in_the_frozen_inventory` catches it,
     and it is the same shape as the `col-3` failure the header of
     `tailwind.config.js` recounts.

     RULE: in this system a translucent surface is a TOKEN, never a `/NN`. If
     the tone you need is missing, it is added here. */
  --primaryBg: rgba(255,102,0,.16);
  /* The same orange AT 40% ALPHA, for a BORDER that states the tone without
     becoming the strongest element of the card. `primaryBg` (15%) is a
     surface and is too faint for a 1px stroke; `primary` at full strength
     around a 24px number shouts louder than the number.

     WHY IT WAS NEEDED, measured the afternoon of 2026-09-07: the constant
     `STEP_NUM_CLASSES` in `ontakt_extras.py` -- the numbered circle of
     `{% step %}` -- asked for `border-primary/40`. Counted in the served CSS:
     `bg-primaryBg` generates 1 rule, `border-primary` 2, `text-primaryLight`
     1, and `border-primary/40` generates ZERO. The component had been declared
     since that morning WITHOUT ANYONE CALLING IT, so it would have debuted
     with a borderless circle -- exactly the invisible debut the `primaryBg`
     note describes and believed closed.

     The gate read 21/21 meanwhile, and that is not a gate failure: it scans
     TEMPLATES, and this class lived in a Python constant no template used
     yet. A component declared and uncalled is covered by nothing.

     RULE, again and with one more case: in this system a translucent surface
     or border is a TOKEN, never a `/NN`. */
  --primaryBorder: rgba(255, 102, 0, 0.4);
  /* The brand orange on a light background. #ff6600 gives 2.94:1 on white
     and fails WCAG AA; on --appBg it gives 6.78:1 and passes. #c75000 is the
     same hue and the same saturation, darkened until it crosses 4.5:1 (it
     lands on 4.59:1). Derived by a reproducible rule, not by eye -- which is
     why it is a system token and not a local ERP patch, where the need first
     appeared.

     IT WAS DERIVED AGAINST THE WRONG WHITE. #c75000 was derived to cross 4.5:1
     on #ffffff (it lands on 4.59), but the app's light-theme background is
     `appBg` = #f5f5f6, which is darker: there the same colour drops to 4.21
     and fails. #bd4c00 gives 4.59 on the REAL background. The error was not
     the method but the background it was measured against. */
  --primaryOnLight: #bd4c00;
  /* The brand orange on ITS OWN TINT in the light theme: the export's info
     banner is `bg-accent-soft text-accent`, i.e. #ff6600 on `primaryBg` (14%
     orange over the surface), and there it gives 2.52:1. `primaryOnLight`
     does not reach either: it was derived against appBg (4.59) and on the tint
     it drops to 4.30 on surface and 3.96 on appBg. Same rule, another
     background: same hue and saturation, darkened until it crosses 4.5 on the
     tint composited over BOTH backgrounds where a banner is drawn. #ae4600 is
     the first step that crosses: 4.91 on the tint on surface (#ffeadb), 4.52
     on the tint on appBg (#f6e1d3). Light theme only; in dark `primary` on the
     tint already gives 4.92 / 5.62. Measured 2026-09-11. */
  --primaryOnTint: #ae4600;
  /* THE TINTED SURFACE, one gesture with two uses: the menu's active row
     and the CTA. It came out of `NAV_ON_CLASSES` in `ontakt_extras.py`, where
     it lived as three literals inside a Python constant -- exactly the way the
     three different radii that `radius-bar` came to close were born. The
     gradient fades to the right. The ring (`tintRing`) is only set when the
     gradient has room to disappear: on a ~900px CTA yes, on a 40px menu row
     no. */
  --tintFrom: rgba(255, 102, 0, 0.28);
  --tintTo: rgba(255, 102, 0, 0.02);
  --tintRing: rgba(255, 102, 0, 0.18);
  /* THE LIGHT END OF THE PRIMARY BUTTON. `primary` #ff6600 with white text
     gives 2.94:1 and fails even WCAG's large-text threshold (3.0). #f76300 is
     `primary` lowered THE MINIMUM needed to cross it -- 3.12 -- and to the eye
     it is the same orange: (255,102,0) against (247,99,0). Derived by rule
     and reproducible, like `primaryOnLight`, not chosen by eye. The dark end
     of the gradient, `primaryHover`, already gave 3.56. The button's text also
     rises to 14px/700, which is where WCAG counts it as large text. */
  --primaryBtn: #ff6600;
  /* NEARLY BLACK ON FULL-STRENGTH ORANGE. Where text sits on the orange with
     no room to lower it -- the labels of the stacked variant-split bars --
     white gives 2.94:1 and this gives 6.38 on #ff6600 and 5.26 on #e65c00. It
     was already used hand-written as the literal #1a1005; here it has a name. */
  --onPrimary: #0a0a0a;
  /* The INFO role. It did not exist, and the gap is real in all three:
     measured over Open WebUI's 132 stock colours, the INFO role weighs 30
     uses -- as many as WARNING (30) and more than DANGER (27). And in Odoo,
     $o-info stayed at Bootstrap's #17a2b8, foreign to the brand.

     The value was NOT invented. The four status tokens that already existed
     are IDENTICAL to Tailwind's palette byte for byte (success = green-500,
     successText = green-400, danger = red-500, dangerText = red-400), so there
     was an unwritten rule: role = Tailwind-500, text on dark = Tailwind-400,
     background = the same tone at 15% alpha. `info` is that rule applied to
     blue-500. It is the only chromatic voice outside the orange family, and
     it is accepted because blue = informative is a universal convention. */
  --info: #3b82f6;
  --infoBg: rgba(59, 130, 246, 0.15);
  --infoText: #60a5fa;
  /* The WARNING role, same rule, on yellow-500.

     Yellow and NOT amber, decided with data: amber-500 (#f59e0b) sits right
     next to the brand orange (#ff6600) and would be confused with it on the
     same card; yellow-500 (#eab308) is not. Open WebUI already votes the same
     on its own: 26 uses of yellow against 4 of orange. */
  --warning: #f59e0b;
  --warningBg: rgba(245,158,11,.14);
  --warningText: #facc15;
  --primaryPress: #e05a00;
  --dangerHover: #dc2626;
  --onPrimaryDark: #fafafa;
  --successOnInverse: #15803d;
  /* The logo's bars. They were hand-written hex inside the  without a class, and 1 from another hand-made button. The
   fix is not to chase the three. It is that the gap stops existing: the
   next control someone adds without a font class can no longer come out
   wrong.

   `code`, `kbd`, `samp` and `pre` do NOT take `inherit` but the brand mono,
   and the difference matters: inheriting would give them the sans and the
   18 nodes of `/docs/metrics/` --- code identifiers, not prose --- would
   lose their shape. The browser already gave them a mono; what they lacked
   was that it be OURS. */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 14px;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* 14px, not the browser's `smaller`: the mono voice is never under 14
   (owner, 2026-09-19). The 18  nodes of /docs/metrics/ sat at 12. */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--appBg);
  color: var(--textMain);
  font-family: var(--font-sans);
  /* Composition, docs/DESIGN_SYSTEM.html, "Reading size and Larger text"
     (2026-09-26): "every screen uses Archivo at width 106 -- the wider cut
     opens the letters instead of spacing them". `font-stretch` inherits, so
     one declaration on `body` reaches every figure and control that does
     not already claim `font-family: var(--font-mono)` for itself (`code`,
     `kbd`, `samp`, `pre` above, and Azeret Mono generally -- neither carries
     a width axis, so `font-stretch` on them is a no-op, not a second
     value to keep in step). fonts.css's Archivo faces now declare
     `font-stretch: 62% 125%` precisely so this percentage resolves to a
     real instance instead of clamping to the static font's 100%. */
  font-stretch: 106%;
  -webkit-font-smoothing: antialiased;
}

/* READING SIZE (Composition, docs/DESIGN_SYSTEM.html; Larger text,
   2026-09-26): the five type roles Larger text raises, as custom
   properties so the scoped rule below can change only what sits under
   `#main-content` -- never the sidebar, never the header. Base values are
   this scale's own body/control/meta/subtle/eyebrow/lg pixel sizes;
   turning them into variables changes no pixel by itself, the same reason
   colours point at `var(--token)` instead of a literal (see this file's
   own colour tokens, and `theme.extend.borderRadius.control` in
   tailwind.config.js). */

:root {
  --fs-body: 15px;
  --fs-control: 14px;
  --fs-meta: 14px;
  --fs-subtle: 12px;
  --fs-eyebrow: 11px;
  --fs-lg: 18px;
}

/* LARGER TEXT, ON: an ATTRIBUTE selector, not a class -- `data-text-size`,
   set by controls.js the same way `data-theme` already is (see the
   `[data-theme="light"]` block above), because the bespoke-class ratchet
   just below (`ontakt_ui/tests/test_design_gate.py`'s
   `_declared_bespoke_classes()`) scans this file for a literal `.name` in
   a selector and a class here would be flagged as a new hand-authored one.
   Scoped to `#main-content`, base.html's own content column under the
   header (`ontakt_ui/templates/base.html`) -- the Larger text control only
   ever sits in the header, and the sidebar keeps its own size regardless.
   Values: docs/DESIGN_SYSTEM.html, "Reading size and Larger text". */

[data-text-size="station"] #main-content {
  --fs-body: 22px;
  --fs-control: 20px;
  --fs-meta: 18px;
  --fs-subtle: 18px;
  --fs-eyebrow: 18px;
  --fs-lg: 26px;
}

/* The link colour does not claim the controls either, for the same reason
   as its light-theme partner right below: an  that is a BUTTON or a
   CARD brings its own colour, and an element rule (0,0,1) treads on it as
   easily as the theme one. Seen while fixing the light one --- excluding
   the controls there left them inheriting THIS orange, which on white
   gives 2.31:1. Fixing one half of a pair without looking at the other is
   how the next defect is made. */

/* First the floor: EVERY link inherits the colour of its context and does
   not underline. Without this line, excluding the controls from the rule
   below left them with no colour at all --- and then the browser's default
   blue painted, `rgb(0,0,238)`, which on `#171717` gives 1.91:1. The DARK
   theme sweep uncovered it right after fixing the light one: the fix of
   one half created the defect in the other, the third time tonight. */

a {
  color: inherit;
  text-decoration: none;
}

a:not([class*="bg-"]) {
  color: var(--primaryLight);
}

a:not([class*="bg-"]):hover {
  color: var(--primary);
}

/* The same link in the LIGHT theme. `--primaryLight` (#ff8c47) is an
   orange FOR A DARK BACKGROUND: on #f5f5f6 it gives 2.1:1 nominal and,
   measured by pixels on a 12px link, 1.42:1 -- the antialiasing lightens
   it further. The `[data-theme="light"]` block did not redefine it, so
   EVERY link in the app in light came out illegible.
   `--primaryOnLight` (#c75000) exists exactly for this and gives 4.59:1 on
   white; it is the same value and the same reason as `$link-color` in the
   ERP (`OnTakt-ERP/docs/BRANDING.md`). `--primaryLight` is not touched in
   the light block on purpose: it is also the light stop of the primary
   button's gradient, and changing it there would invert it. */

/* BUT IT DOES NOT CLAIM THE CONTROLS, and this is the fix of 2026-09-09.

   `[data-theme="light"] a` has specificity (0,1,1) -- attribute + element --
   and a Tailwind utility like `.text-onPrimaryDark` has (0,1,0). So on ANY
    this rule won and the button's text colour never got applied.
   Measured in the light theme on the live app:

     `Assign reasons`  background rgb(10,10,10)   text rgb(189,76,0)   3.96:1
     `Today` active    background rgb(255,102,0)  text rgb(189,76,0)   1.70:1

   1.70 is orange on orange: practically invisible, and it is exactly the
   capture the owner sent ("orange on orange, not enough contrast").

   What has to be seen is that NOTHING WAS BROKEN. The button's class string
   was right, `--onPrimaryDark` is `#fafafa` and has no override in light.
   The utility simply lost the cascade, and painted the wrong colour with
   not a single error.

   `:not([class*="bg-"])` separates the two by the only thing that truly
   distinguishes them: a CONTENT link declares no background; a control
   does. It fixes every button at once -- the ones there are and the ones to
   come -- without scattering `!important` across the variants, which would
   be a second answer to "what colour is this text" arguing with the first. */

[data-theme="light"] a:not([class*="bg-"]) {
  color: var(--primaryOnLight);
}

[data-theme="light"] a:not([class*="bg-"]):hover {
  color: var(--primary);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* ── App shell: sidebar + main ───────────────────────────────── */

/* `.shell`/`.sidebar-head`/`.brand`/`.navgroup`/`.main`/`.topbar`/`.content`
   all convert to inline Tailwind utilities -- base.html's only call site,
   mock.js's own copies (SHELL_CLASSES/SIDEBAR_HEAD_CLASSES/BRAND_CLASSES/
   MAIN_CLASSES/TOPBAR_CLASSES/CONTENT_CLASSES) for the mockups.
   `.content > *`'s :nth-child stagger (the fadeUp entrance + its 20/40/60/
   80ms delays) is now `[&>*]:animate-[...]`/`[&>*:nth-child(N)]:[animation-
   delay:...]` directly on the same element -- an arbitrary child-combinator
   variant scopes the rule to the element's own children exactly like the
   descendant selector did, without needing every child template to carry
   its own class.

   `.sidebar`/`.sidebar-body` stay declared: interactions.js selects both by
   class name at runtime (`.closest(".sidebar")`/`.querySelectorAll(
   ".sidebar-body .nav")`), so each is a JS hook carrying its own layout
   alongside. `.sidebar`'s own light-theme tint override (a hardcoded
   rgba(0,0,0,0.018) -- every other surface token flips for light through a
   CSS variable, this one never did, see the removed comment this replaces)
   is now `[[data-theme=light]_&]:bg-[rgba(0,0,0,0.018)]` inline, the same
   arbitrary-variant trick as icon-sun/icon-moon. */

/* `.kpi-grid`/`.kpi` both converted to inline Tailwind utilities
   (ontakt_ui/templatetags/ontakt_extras.py's KPI_GRID_CLASSES / the
   `{% kpigrid %}` tag; `_kpi_card.html`'s own literal string for `.kpi`
   itself; mock.js's own copies of both for the mockups) -- both sides
   now use the standard breakpoint scale (1 col below `sm`, 2 from `sm`,
   4 from `lg`) instead of the `auto-fit`/`minmax` + three ad-hoc
   breakpoints this used to need. `.kpi`'s own mobile size bump (520px)
   is `tailwind.config.js`'s `phone:` screen; the 1199px override
   (below) had already collapsed onto `lg:` (1024px) as a deliberate
   snap-to-scale, not reproduced verbatim. `.kpi::before`'s orange
   top-accent line is dropped, not carried forward -- confirmed dead in
   production behind `CARD_CLASSES`' own `before:*` chain before this
   (ontakt_extras.py's own note on why), same as `.card::before` was. */

/* `.barchart`'s mobile centering (`justify-content: safe center` below
   900px) converted to inline utilities 2026-08-28 -- mock.js's
   `BARCHART_CLASSES` (`nav:justify-[safe_center]`, `nav:` being this
   file's existing 900px screen). See the note further down (search
   `.barchart`) for the whole family's conversion. */

/* ── Text roles ──────────────────────────────────────────────── */

/* `h2`/`lbl`/`val`/`unit`/`panel-sub` converted to inline Tailwind
   utilities 2026-08-28. A 2026-08-27 restoration of these four (plus
   `gauge-value`/`stat-strip-label`/`stat-strip-value`, elsewhere in this
   file) rested on the belief that spec/test_screens_agree.py matched
   these exact class names by regex -- re-read fresh, it does not: every
   one of those seven locators already matches by `data-testid` with the
   class attribute wildcarded (BUSINESS_DECISIONS.md §26 had already
   re-pointed them the same day, and this file's comment was simply never
   updated after). Only `.date-seg` below still locks a literal
   `class="..."` string. See ontakt_ui/tests/test_design_gate.py's
   ALLOWED_CLASSES for the full accounting of every call site moved. */

/* ── Cards / KPIs / pills ─────────────────────────────────────
   `.card`/`.kpi-grid`/`.kpi-base`/`.kpi-row`/`.btn`(+ `.primary`/
   `.danger-outline`/`.lg`)/`.panel`/`.panel-head`/`.no-body-pad`/
   `.select-wrap`/`.select-native`/`.select-chevron` all converted to
   inline Tailwind utilities -- ontakt_ui/templatetags/ontakt_extras.py's
   CardNode/PanelNode/PanelHeadNode/WrapperNode/btn_classes/
   select_native_classes/SelectWrapNode in the live app, mock.js's own
   byte-for-byte copies of the same constants for the 14 mockups (the
   only remaining reason any of these stayed declared -- the live app
   converted them a batch earlier). `.kpi`/`.kpi::before` converted too,
   see the note above `.kpi-grid`. */

/* Station card (plant summary): `.station`/`.station-top`/`.station-id`/
   `.station-proc`/`.station.off` all converted to inline utilities
   2026-08-28 (`p-5 flex flex-col gap-3 cursor-pointer` + a conditional
   `opacity-[.55]`, `_kpi_card.html`-style, at each of the four call sites
   -- hub_dashboard.html, plant_summary.html, program_switch.html,
   station_picker.html -- plus mock.js's own `stationCard`). `.station`'s
   own `transition`/`:active{transform:scale(.97)}` (below) were already
   dead: every call site wraps `{% card %}`/`Mock.CARD_CLASSES`, whose own
   `transition-[background-color,color,transform] duration-150
   active:scale-[.97]` utility sits later in the cascade (this file's
   `@tailwind utilities` is at the bottom) and already won the tie on the
   identical properties -- same shape as `.kpi::before`'s dead accent line. */

/* ── Table ───────────────────────────────────────────────────── */

/* table.data's whole family converts to one class list
   (ontakt_extras.py's `table_data_classes` tag / TABLE_DATA_CLASSES;
   mock.js's own copy) applied to the `` tag itself, using
   Tailwind's arbitrary child-combinator variants (`[&_td]:...`) to reach
   thead/th/tbody tr/td without touching any of them individually --
   the same mechanism `.content`'s `:nth-child` stagger already uses.
   `row-unassigned`/`flash-once`/`strong` stay literal marker tokens
   (server-conditional or JS-toggled) the table's own compound selectors
   (`[&_tbody_tr.row-unassigned]:...` etc.) key off. */

/* ── Bar chart (full range: zero periods render as a flat baseline mark) ── */

/* `.barchart` and its whole `.bar-col`/`.bar-value`/`.bar-fill`/`.bar`/
   `.bar-zero`/`.bar-label` child family converted to inline utilities
   2026-08-28 -- one combined class list on the container (mock.js's
   `BARCHART_CLASSES`), same "container plus its children" pattern
   `table.data`'s TABLE_DATA_CLASSES already used: each arbitrary child-
   combinator variant reaches its own marker class directly, so the child
   class names stay as literal markers on the elements with no CSS rule of
   their own. `.bar-value.real` is NOT carried forward -- it was a dead,
   no-op modifier (see mock.js's own note by BARCHART_CLASSES). Mockup-only
   (mock.js's `barchart()`/`groupedBarchart()`): the 3 Django partials that
   used to share this markup (`_barchart.html`/`_grouped_barchart.html`/
   the shift chart) all draw with Chart.js now; only the mockups
   (plant_summary, production, quality, downtime, documentation) still
   render the plain div/height-percent bars this family styles. */

/* ── Chart.js canvas + its always-present fallback table ─────────
   TAILWIND_MIGRATION_PLAN.md Gap C.2 / Constitution G3: the table is the
   real content, server-rendered and visible by default; interactions.js's
   initCharts() only hides it once a Chart.js canvas has been built
   successfully. If Chart.js never loads or throws, the table simply never
   gets hidden -- there is no failure state to style. */

/* `.chart-wrap`/`.chart-canvas-box`'s own styling converted to inline
   utilities 2026-08-28 (`relative` / `relative w-full h-[220px]
   [&_canvas]:max-w-full`, at all three call sites -- _barchart.html,
   _grouped_barchart.html, _rankbars.html), so neither rule is declared
   here any more -- but both class names stay on the elements as bare
   selector hooks (interactions.js's initCharts() still finds them by
   class name at runtime, `.querySelectorAll(".chart-wrap")`/
   `.querySelector(".chart-canvas-box")`), so they stay in
   ontakt_ui/tests/test_design_gate.py's ALLOWED_CLASSES, same role
   `.sidebar`'s own hook-only entry has there. */

/* ── Ranked horizontal bars ───────────────────────────────────── */

/* `.rankbars`/`.rankbar-row`/`.rankbar-label`/`.rankbar-track`/
   `.rankbar-fill`/`.rankbar-value` (+ the grow animation and its
   `:nth-child` stagger, further down) all converted to inline utilities
   2026-08-28 -- mock.js's `RANKBARS_CLASSES`, one combined class list on
   the container using arbitrary child-combinator variants, same pattern
   `table.data`'s TABLE_DATA_CLASSES already used. Mockup-only: Chart.js
   draws this chart in the live app (_rankbars.html). */

/* ── Pace segmented bar (status is the fact — exception) ─────── */

/* `.pace-track`(+ its `> span` grow animation)/`.pace-legend`/
   `.pace-legend-row`/`.pace-dot`/`.pace-legend-label`/`.pace-legend-val`
   all converted to inline utilities 2026-08-28 -- mockup-only
   (production.html, documentation.html; Chart.js draws this chart in the
   live app). The grow animation folds into `.pace-track`'s own
   `[&>span]:animate-[growW_.5s_ease-out_both]` at its one call site. */

/* ── Half-meter gauge ────────────────────────────────────────── */

/* `.gauge-wrap`/`.gauge-value` both converted to inline utilities
   2026-08-28 (`relative w-[120px] h-[72px]`, and `.gauge-wrap svg
   path[stroke-dashoffset]`'s grow animation is now `animate-grow-dash`
   injected directly onto the fill path -- see the note above `.kpi-grid`
   for `.gauge-value` and the mockup's own note for the animation swap).
   plant_summary.html's mockup was the only remaining call site. */

/* ── Live Run trigger row ────────────────────────────────────── */

/* `.trigger-row`/`.trigger-serial`/`.trigger-actions` convert to inline
   Tailwind utilities but stay declared: interactions.js selects all three
   by class name at runtime (`.closest(".trigger-row")`/`.querySelector(
   ".trigger-serial")`/`.closest(".trigger-actions")`/`.querySelectorAll(
   ".trigger-actions")`), so each is now a JS hook carrying its own layout
   alongside, not a styled selector of its own. `.trigger-stack` and
   `.trigger-select-row` had no such hook (grepped interactions.js -- only
   the three above appear) and are fully gone: `.trigger-stack`'s mobile
   column-stack is folded directly into `_live_run_live.html`'s/
   `_classifier_live.html`'s own `trigger-row` element as `nav:flex-col`
   (its only two call sites, always paired with `trigger-row` before this),
   and `.trigger-select-row`'s mobile rule (`display:flex;gap:12px`) was
   exactly redundant with `.trigger-actions`'s own unconditional rule at
   the same two call sites, so it is dropped rather than reproduced.

   The two mockups (`live_run.html`/`classifier_live.html`, raw JS in the
   page itself, not mock.js) use `.trigger-row`/`.trigger-serial` WITHOUT
   `.trigger-stack` -- no column-stack, and the serial text keeps the
   plain `nav:text-[22px]` shrink instead of the live app's `nav:text-
   [20px]` (the more specific `.trigger-stack .trigger-serial input` rule
   used to win there whenever `.trigger-stack` was present, which was
   always, in the two live templates only) -- so each of the four call
   sites (2 live templates + 2 mockups) carries its own literal, already-
   resolved utility string rather than a shared constant that can't
   express the difference. */

/* BTN_BASE_CLASSES's own `[&[hidden]]:hidden` (ontakt_ui/templatetags/
   ontakt_extras.py; mock.js's copy) carries forward the fix this used to
   be: a `.btn`'s own `display:inline-flex` outranked the `[hidden]` UA
   style (an author class always beats the attribute's default), so a
   hidden Attach scan button rendered visible anyway without it -- same
   fix `.date-seg-picker[hidden]` above still needs on its own account. */

/* ── Search input ────────────────────────────────────────────── */

/* Keeps the search box pinned to the right edge of .panel-head even when
   it wraps to its own line on narrow widths -- .panel-head's own
   justify-content:space-between only pushes it right while a sibling
   still shares that line; alone on a wrapped line it would sit at the
   start instead. */

/* ── Status card (sidebar) ───────────────────────────────────── */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

/* ── Schedule rows ───────────────────────────────────────────── */

/* `.sched-row`/`.sched-row:hover`/`.sched-row:active` converted to inline
   utilities 2026-08-28 -- one call site, `_quality_lookup_result.html`. */

/* ── Form fields ─────────────────────────────────────────────── */

/* `.field`/`.field-row` convert to inline Tailwind utilities -- deferred
   three times before this, since `.field input, .field select`'s
   descendant rule reached every raw / is the caller's
   markup, not content a tag renders), so each one now carries
   ontakt_extras.py's `field_input_classes` tag directly on its own
   `class=""` -- same shape as `btn_classes`/`select_native_classes`.
   `select_native_classes` alone (appearance-none + the chevron gutter)
   never carried the base look, so every  tag
   itself, and needs that literal marker on the row to key off. */

/* `.toast-stack`/`.toast`/`.toast.out` converted to inline utilities
   2026-08-28 (interactions.js's `OnTaktToast`/`toastStack`) -- `.toast-stack`
   stays a real JS selector hook (re-queried across calls), carrying its
   layout as inline utilities alongside; `.toast` itself was never queried
   anywhere and drops outright. */

/* ── Sidebar nav groups: gap between groups, not just within one ──
   .sect already carries its own margin-bottom (above), which separates a
   group's label from ITS OWN links -- but nothing separated one group's
   last link from the next group's label without this. Only the inter-
   group gap is added, via the sibling combinator, so the first section
   keeps its tight single margin-bottom. */

#sidebar-nav {
  display: flex;
  flex-direction: column;
}

/* ── Date field (compact pill-shaped date picker trigger) ────── */

/* `.date-field`/`.date-seg-row`/`.date-seg-btn`/`.date-seg-custom`(+
   `.active`) converted to inline Tailwind utilities -- `_date_filter.html`'s
   only call site (ontakt_extras.py's `date_seg_custom_classes` tag for the
   one conditional case), plus mock.js's own copy for the mockups.
   `.date-seg-picker` stays declared: interactions.js's own `.querySelector(
   ".date-seg-picker")` selects it by class name at runtime -- a pure JS
   hook now, no styling of its own -- but carries its own layout as inline
   utilities alongside, same as any other converted element. The mobile
   `[hidden]` override -- desktop always shows the date inputs inline
   regardless of the `hidden` attribute, only ≤900px actually hides them --
   is now `nav:[&[hidden]]:hidden` directly on the form. `.date-seg-custom`/
   `.date-field` stay declared too, JS-hook-only in mock.js's own
   `wireDateFilter` (`.date-seg-custom`/`.date-field` selectors) -- the live
   app's `_date_filter.html` needs neither literal marker, since
   interactions.js has no equivalent runtime lookup for either.

   `.date-seg` itself is NOT converted: spec/test_screens_agree.py's
   `test_plant_summary_station_tiles_never_echo_the_selected_range` locks
   its class attribute to the literal, exact string `class="date-seg"` (no
   trailing utilities) by regex, to read `data-range` as a non-styling
   state signal -- that file belongs to another session per this project's
   own working method, so this stays real CSS rather than routing the test
   change elsewhere mid-batch. */

/* ── Dialog + slide-in panel ──────────────────────────────────
   Two audited-write interaction shapes: a centered modal (confirm/review
   steps) and a right-edge slide-in (record detail). Folded in from
   mockups/mock.css 2026-08-22 per the design-gate rebuild (BACKEND_
   REBUILD_PLAN_V2.md §9.10) — every class below is now part of the frozen
   system, not mockup scaffolding.

   `.modal-backdrop`/`.modal-card`/`.modal-head`/`.modal-step` converted to
   inline Tailwind utilities -- none of the four is a JS selector hook
   (interactions.js reaches the live dialog by id, `#assign-modal`/
   `#assign-modal-close`, never by these class names, including in its own
   "Serial required" JS-built markup), so no marker needed anywhere.
   `.modal-backdrop`'s replacement (`fixed inset-0 z-[200] bg-black/[.55]`)
   matches `#part-panel-backdrop`'s own already-converted string exactly --
   same overlay, same opacity. `.modal-card`'s two-layer background
   (`linear-gradient(...)` over a solid `var(--appBg)` fallback, the same
   shorthand `.slide-panel` used) splits into `bg-appBg` +
   `bg-[linear-gradient(...)]` -- Tailwind routes a bare color token to
   `background-color` and a gradient function to `background-image`
   automatically, reproducing the shorthand's two declarations exactly.

   `.slide-panel`/`.slide-panel.slide-panel-open` converted 2026-08-28,
   base.html's one call site (`#part-panel`) -- not a JS selector hook
   (interactions.js reaches it by id), so the open/close transform is now
   `[&[aria-hidden=false]]:translate-x-0` keyed directly off the
   `aria-hidden` attribute the same listener already toggled in lockstep
   with the class, rather than a separate `classList` flip. */

/* `.clickable-row` converts to inline utilities (ontakt_extras.py's
   `clickable_row_classes` tag / CLICKABLE_ROW_CLASSES; mock.js's own copy)
   -- not scoped under `table.data` in the original rule, so it stayed its
   own conversion rather than folding into TABLE_DATA_CLASSES. Not a JS
   hook either (interactions.js only mentions it in a comment; the mockups'
   own `wireClickableRows` selects by `[data-part]`, never this class), so
   the literal class name drops entirely.

   Downtime's row-unassigned danger tint (including on hover, where
   `table.data tbody tr:hover` would otherwise outrank a plain class
   selector on specificity) is now part of TABLE_DATA_CLASSES
   (`[&_tbody_tr.row-unassigned]:bg-dangerBg`/
   `[&_tbody_tr.row-unassigned:hover]:bg-dangerBg` -- the compound selector
   itself carries the higher specificity that used to need the explicit
   `tr` qualifier). */

/* ── Compact form grid (Settings: many short numeric fields) ─── */

/* `.compact-grid` converted to inline utilities 2026-08-28 (`grid grid-
   cols-[repeat(auto-fill,148px)] gap-x-5 gap-y-3.5`) -- ontakt_counter/
   settings.html, _inspection_settings.html, settings_base.html, and the
   settings.html mockup, whose own inline `