/* ==========================================================================
   Tech Dynamix brand layer.  SHARED.

   THIS FILE IS COPIED INTO OTHER TECH DYNAMIX APPLICATIONS.

   The Client Hub is the source. Anything here has to be true of every
   application that uses it, so nothing hub specific belongs in this file.
   Hub only rules live in hub.css beside it.

   Copying it out is `php bin/export-brand.php`, which also writes a manifest
   of checksums so the far side can tell whether its copy is current. On the
   receiving side this file is copied and never edited: an edit there is lost
   at the next copy, and worse, it makes the two silently different while both
   claim to be the same file.

   Loaded AFTER vendor/tabler/tabler.css. Tabler owns the design: spacing,
   components, typography, dark mode, every layout decision. This file sets
   the brand color and the handful of corrections Tabler needs in a fixed
   sidebar layout.

   TABLER PLUS THE BRAND COLOR, KEPT LEAN

   No web faces. Four were vendored here once, 152 KB of woff2 on every first
   visit, and they are gone: Tabler's stack resolves to whatever the reader's
   system already has, costs nothing and renders on the first paint rather
   than after a swap. font-src is 'none' accordingly.

   No components of our own. If Tabler already draws it, recolor Tabler's
   version rather than drawing a second one.

   Two accessibility commitments, both satisfied by choosing which of Tabler's
   colors to use rather than by writing new CSS:
     1. Red and green never carry meaning together, so "ok" is teal.
     2. Color never carries meaning alone, so every status prints a word.
   Both live in badge(), which travels with this file.
   ========================================================================== */

:root {
  --td-orange:    #E87722;
  --td-charcoal:  #17191C;
  /* Dark ink for text on orange. Orange with white is 2.96:1 and fails;
     against this it is 5.63:1. */
  --td-on-orange: #2A1B0C;

  /* Tabler derives its buttons, focus rings and the sidebar's active marker
     from this one token, so setting it recolors all of them. */
  --tblr-primary: #E87722;
  --tblr-primary-rgb: 232, 119, 34;
  --tblr-primary-fg: #2A1B0C;

  /* Links are not primary, deliberately, and this is the one place the brand
     color is not used as it stands.

     Tabler's default link is #066fd1, a blue that has nothing to do with this
     brand. The brand orange cannot replace it: #E87722 on white is 2.96:1 and
     fails AA, which needs 4.5:1. The rust below is the brand orange darkened
     until it passes, at 5.18:1, with the hover darker again at 7.31:1. Same
     values as the website admin, measured rather than matched by eye. */
  --tblr-link-color: #C2410C;
  --tblr-link-color-rgb: 194, 65, 12;
  --tblr-link-hover-color: #9A3412;

  /* Tabler's own stack, minus the two faces nothing loads. */
  --tblr-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
                          "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Figures that have to line up

   .num and .money are on about two hundred elements in this application and
   were defined nowhere at all, so every one of them did nothing. The intent
   was a monospace face for figures; the actual requirement is narrower and
   does not need one.

   tabular-nums makes every digit the same width in a proportional face, which
   is the whole reason a column of money or dates is tagged: the digits line up
   down the column without a second font being fetched to achieve it.
   -------------------------------------------------------------------------- */

.num,
.money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Tabler shifts the whole document right by the width of the scrollbar at
   992px and up:

     @media (min-width: 992px) { :host, :root { margin-left: calc(100vw - 100%) } }

   That is an anti jitter measure for a centered layout, so a page that scrolls
   and a page that does not put their content in the same place. It cannot
   work here. The sidebar is position:fixed, which anchors it to the viewport
   at left 0, so it does not move with the document. Everything beside it
   does. The result is that every page long enough to scroll opens a gap
   between the sidebar's right edge and the content, exactly one scrollbar
   wide, and pages that fit line up correctly. That is the misalignment.

   This layout is full width with a fixed sidebar. There is nothing centered to
   keep still, so the measure buys nothing and is switched off. Written
   unlayered and after Tabler, which is enough: media queries add no
   specificity, so the later rule wins. */
:root { margin-left: 0; margin-right: 0; }

/* The sidebar is Charcoal in both themes. It carries data-bs-theme="dark" in
   the markup, so Tabler resolves everything inside it against a dark surface. */
.navbar-vertical {
  --tblr-navbar-bg: var(--td-charcoal);
  background-color: var(--td-charcoal);
}

/* --------------------------------------------------------------------------
   Submenu indentation is Tabler's, not ours

   There was an override here adding another rem to the indent, under a comment
   claiming Tabler lines a group's children up with the group's own label and
   indents nothing. That was wrong. Tabler's own rule is

     .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item
       { padding-left: calc(calc(calc(var(--tblr-page-padding) * 2) / 2) + 1.75rem) }

   which is the page padding plus 1.75rem, so children already sit in from the
   group's icon and line up under its label. The override was a second indent
   on top of one that was already there.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Logo variants

   Two files, one for light backgrounds and one for dark, with CSS choosing.
   A picture element with prefers-color-scheme would follow only the operating
   system and ignore the theme toggle.

   Never set display on a logo image outside these rules: a descendant
   selector outranks a single class and would show both variants at once,
   which has happened before.
   -------------------------------------------------------------------------- */

.logo-on-light { display: block; }
.logo-on-dark  { display: none; }
[data-bs-theme="dark"] .logo-on-light { display: none; }
[data-bs-theme="dark"] .logo-on-dark  { display: block; }

/* The sidebar is dark in both themes, so it always takes the dark variant. */
.navbar-vertical .logo-on-light { display: none; }
.navbar-vertical .logo-on-dark  { display: block; }

/* A block image ignores the text-align of its container, so the centered sign
   in logo needs auto side margins. Unscoped on purpose: tying it to an
   ancestor meant it silently stopped centring when the layout changed. */
.logo-stacked { margin-inline: auto; }

@media print {
  /* Tabler marks its own chrome d-print-none, so this only covers ours. */
  .btn, .no-print { display: none !important; }
}