/* Tuxton design tokens — VENDORED. Do not edit this file here.
 *
 * Source of truth:
 *   tuxton-platform  apps/acu_dashboard/scripts/dashboard/static/tuxton-theme.css
 *
 * field-guides is a separate repo, so it carries a copy rather than linking one.
 * Everything below the marker is byte-identical to the source, and
 * tuxton-platform's `test_vendored_theme_matches_canonical` fails if it stops
 * being. To change a token: change it there, then re-copy the whole file here.
 *
 * WHY EVERY PAGE HERE SETS <html data-theme="light">. This file ships a dark
 * variant, and field-guides.css deliberately keeps a number of light-assumed
 * literals (the #f4f4f4 index ground, #222 card text, #333 step text) because
 * they are editorial choices, not tokens. In a dark-mode OS the tokenised
 * halves would flip and the literals would not — partial adaptation, which is
 * worse than either theme. Measured on the unpinned build: the index guide
 * cards land at 1.12:1 and the compare step cards at 1.41:1, i.e. near-black
 * text on a near-black fill. Pinned, they are 15.9:1 and 12.6:1.
 *
 * Pinning opts out cleanly: the media query below is guarded by
 * :root:not([data-theme="light"]), so the attribute suppresses it. Field guides
 * are light, print-oriented documents; light is the correct and only mode.
 * Making them genuinely dark-mode-capable means tokenising those literals — a
 * redesign, not this ticket.
 *
 * The dark header band is NOT this dark mode — see the on-dark-chrome block in
 * field-guides.css.
 */
/* ---- vendored copy begins ---- */
/* Tuxton internal tools — shared theme tokens (TUX-754).
 *
 * Intended to be the common layer across internal surfaces, not just /status.
 * Consume the tokens; don't hard-code hex in a page stylesheet.
 *
 * WHY THESE COLOURS. Three internal/external surfaces existed when this was
 * written and they did not agree:
 *
 *   - fieldguides.tuxton.com — light, editorial, a *named* brand palette
 *     (teal/gold/crimson/navy/forest) plus Fraunces for display type. The only
 *     one that had clearly been designed rather than defaulted.
 *   - reports.tuxton.com     — dark #0f0f1a with an indigo accent. A dev-tool
 *     default; nobody chose it as a brand.
 *   - www.tuxton.com         — white / black / cream, sans-serif, minimal.
 *
 * The field-guides palette wins because it is the only deliberate one, and its
 * light neutral base is much closer to the public site than the indigo is — so
 * internal tools read as the same company. The accents below are lifted from it
 * unchanged so the two surfaces can converge rather than drift.
 *
 * DARK MODE is a first-class variant, not an inversion. It keeps the same hues
 * but lifts their lightness, because the brand accents are dark-on-light by
 * design and go muddy if used unchanged on a dark ground.
 */

:root {
  /* Brand accent: the brand book's brown (docs/brand/README.md, TUX-1616).
     Links, the primary button, the active segment, hover and focus. Never the
     logo, never behind a whole page. */
  --tux-brown: #6b4836;

  /* Status and data accents, from fieldguides.tuxton.com. Semantic use only:
     crimson = error, forest = ok, gold = warning. Teal is data only
     (TUX-1627): the heat tints, the usage sparkline, a category stripe. It is
     never a link (TUX-1616 retired it there) and never a series slot on a
     chart, which is --tux-chart-1's job below. */
  --tux-teal: #107868;
  --tux-gold: #8e6f07;
  --tux-crimson: #9e2b20;
  --tux-navy: #184d6e;
  --tux-forest: #196835;

  /* Surfaces + text (light).
   *
   * THE GROUND RULE (TUX-1637, the brand book's Color chapter). The page is
   * --tux-bg and a card is --tux-surface, in both themes, and the card is the
   * raised one: white cards on a grey page in light, lighter cards on a darker
   * page in dark. --tux-surface-2 is a step off the card either way, for a
   * hover, a code chip or a group row. Paint by what an element IS, not by
   * the shade it happens to want: a sticky bar over the page is --tux-bg, a
   * sticky table head inside a card is --tux-surface.
   *
   * Light used to run the other way round (white page, grey cards), the one
   * surface that disagreed with both the book and our own dark mode. Every
   * grey here is neutral, chroma 0. They used to lean blue beside a warm ink
   * and a brown accent, and read as a different family from both. */
  --tux-bg: #f6f6f6;
  --tux-surface: #ffffff;
  --tux-surface-2: #ebebeb;
  --tux-line: #e4e4e4;
  --tux-line-strong: #cdcdcd;
  /* A card's edge. Light draws none: a white card on the grey page lifts on
     its fill and its shadow, as the book draws its own cards. Dark keeps the
     line, because a shadow barely shows on a near-black page. */
  --tux-card-border: transparent;
  /* Ink, the brand book's "black" for text. Pure black is the logo's alone. */
  --tux-fg: #231916;
  --tux-fg-muted: #555555;

  /* Semantic */
  --tux-ok: var(--tux-forest);
  --tux-ok-bg: #eef6f0;
  --tux-err: var(--tux-crimson);
  --tux-err-bg: #fbf0ef;
  --tux-warn: var(--tux-gold);
  --tux-accent: var(--tux-brown);
  --tux-link: var(--tux-brown);
  /* Text sitting ON an accent fill (the active segment, a filled button).
     Light mode puts white on brown (8.1:1); dark mode cannot. The dark brown is
     lifted for legibility on a dark ground, so white on it fails (2.5:1). It
     takes ink instead (6.8:1). This is why the pair is a token and not a
     literal in whichever page happened to need it first. */
  --tux-on-accent: #ffffff;
  /* The logo's one colour: pure black on light, white on dark. Never an accent. */
  --tux-logo: #000000;

  /* Chart series — the categorical slots a line, bar or area wears.
   *
   * NOT --tux-teal / --tux-gold, and that is a measurement rather than a taste
   * call. Put the two brand accents through a categorical-palette validator on
   * this file's own light ground and they fail twice: teal's OKLCH chroma is
   * 0.09, under the 0.10 floor below which a hue stops reading as a hue and
   * starts reading as grey beside a neighbour; and the teal/gold pair separates
   * by only OKLab ΔE 15.0, the floor at which two series stop being tellable
   * apart by a reader with full colour vision — before anyone's colour blindness
   * enters into it. Every pair involving teal or navy fails the same way (navy
   * is chroma 0.078 and below the lightness band besides).
   *
   * forest+gold does pass, and is still not the answer: forest is --tux-ok and
   * gold is --tux-warn. A status colour doing double duty as a series colour
   * means the chart cannot say "this series" and "this one is degraded" in the
   * same frame.
   *
   * So: the same two hues, chroma-boosted and lightness-banded for a chart
   * surface rather than a page background. ΔE 18.7 for normal vision, 10.3
   * under simulated protanopia, and all six checks pass against --tux-bg,
   * --tux-surface and --tux-surface-2 alike.
   *
   * Assign in fixed order, slot 1 then slot 2, and never cycle. A third series
   * is a third token, chosen and validated the same way — not slot 1 reused,
   * and never a hue invented at the call site. Two is what Tuxton charts today.
   *
   * Rule 4 still holds: colour is never the only signal. A chart wearing these
   * carries a legend, and direct labels wherever it has room for them.
   *
   * DATA COLOURS, NOT BRAND COLOURS (TUX-1627, the brand book's Color chapter,
   * "Charts"). On a chart a colour names a series and means nothing else. The
   * brand reserves every hue it has: brown is something to click, forest, gold
   * and crimson are status. So slot 2 sitting near gold was measured and kept,
   * not missed: OKLab dE 7.2 from --tux-gold in light, 9.0 from the lifted
   * brown in dark. The legend settles which series it is, and a status colour
   * always carries a word. A violet slot 2 clears every reserved colour and was
   * declined, because it would recolour every chart to fix a confusion the
   * legend already prevents. Moving "toward the brand" is not an option at
   * all: every step toward a brand colour is a step toward a reserved meaning.
   */
  --tux-chart-1: #0f8f76;
  --tux-chart-2: #b4761a;

  /* THE UP/DOWN PAIR FOR CHARTS, AND IT IS NOT --tux-ok/--tux-err.
     Those are STATUS tokens and stay reserved for status. Every up/down chart
     reached for them because there was nowhere else to go, and the pair FAILS
     colourblind separation: #196835 against #9e2b20 is deutan dE 4.4 against a
     floor of 6, while reading dE 23.1 to normal vision -- which is exactly why
     nobody caught it by eye. On the month chart colour is the ONLY channel
     ("GREEN where it beat last year, RED where it did not"), so a deuteranope
     sees one colour there.
     Validated with a script, not an opinion:
       node <dataviz skill>/scripts/validate_palette.js "#0f8f76,#9e2b20" --mode light
     -> ALL CHECKS PASS, deutan dE 12.9. Three times the separation. */
  --tux-div-pos: #0f8f76;
  --tux-div-neg: #9e2b20;

  --tux-radius: 6px;
  --tux-shadow: 0 1px 4px rgba(0, 0, 0, 0.10), 0 4px 14px rgba(0, 0, 0, 0.07);

  --tux-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  /* Fraunces is the field-guides display face. Not web-loaded here — an internal
     ops page should not block paint on a font request — so it degrades to
     Georgia, which holds the same editorial tone. */
  --tux-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --tux-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark. Applied by [data-theme="dark"] (explicit toggle) or by the OS
   preference when the reader has not chosen — the toggle always wins. */
:root[data-theme="dark"] {
  /* #6b4836 on this ground is 2.2:1. Lifted to 7.0:1, level with the teal
     it replaces (7.8:1), and still read as the same brown. */
  --tux-brown: #c49a7e;
  --tux-teal: #3fbfa8;
  --tux-gold: #d4a91e;
  --tux-crimson: #e8776b;
  --tux-navy: #5b9dc9;
  --tux-forest: #56b877;

  /* The light greys' order, at the lightness dark has always had, and neutral:
     these carried a blue lean (OKLCH chroma up to 0.019 at hue ~260) until
     TUX-1637. Same lightness means every measured contrast stands. */
  --tux-bg: #181818;
  --tux-surface: #212121;
  --tux-surface-2: #2a2a2a;
  --tux-line: #333333;
  --tux-line-strong: #474747;
  --tux-card-border: var(--tux-line-strong);
  --tux-fg: #eaeaea;
  --tux-fg-muted: #a2a2a2;

  --tux-ok: var(--tux-forest);
  --tux-ok-bg: #172a1f;
  --tux-err: var(--tux-crimson);
  --tux-err-bg: #2c1b1a;
  --tux-warn: var(--tux-gold);
  --tux-accent: var(--tux-brown);
  --tux-link: var(--tux-brown);
  --tux-on-accent: #231916;
  --tux-logo: #ffffff;

  /* Chart series, stepped for the dark ground — and stepped, not inverted. The
   * dark brand accents cannot stand in either: #3fbfa8 and #d4a91e sit at OKLCH
   * L 0.729 and 0.753, above the 0.48–0.67 band a mark needs to hold its weight
   * on a dark surface. These are ΔE 18.3 normal, 12.8 protan. */
  --tux-chart-1: #31a692;
  --tux-chart-2: #bf8724;
  /* Dark re-tunes rather than flips: #e8776b sits at OKLCH L 0.696, above the
     0.48-0.67 band, so the negative pole is stepped down for this surface.
     `--mode dark` -> ALL CHECKS PASS, deutan dE 9.7, normal dE 26.0. */
  --tux-div-pos: #31a692;
  --tux-div-neg: #d0564a;

  --tux-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tux-brown: #c49a7e;
    --tux-teal: #3fbfa8;
    --tux-gold: #d4a91e;
    --tux-crimson: #e8776b;
    --tux-navy: #5b9dc9;
    --tux-forest: #56b877;

    --tux-bg: #181818;
    --tux-surface: #212121;
    --tux-surface-2: #2a2a2a;
    --tux-line: #333333;
    --tux-line-strong: #474747;
    --tux-card-border: var(--tux-line-strong);
    --tux-fg: #eaeaea;
    --tux-fg-muted: #a2a2a2;

    --tux-ok-bg: #172a1f;
    --tux-err-bg: #2c1b1a;
    --tux-on-accent: #231916;
    --tux-logo: #ffffff;

    --tux-chart-1: #31a692;
    --tux-chart-2: #bf8724;
    /* Dark re-tunes rather than flips: #e8776b sits at OKLCH L 0.696, above the
       0.48-0.67 band, so the negative pole is stepped down for this surface.
       `--mode dark` -> ALL CHECKS PASS, deutan dE 9.7, normal dE 26.0. */
    --tux-div-pos: #31a692;
    --tux-div-neg: #d0564a;

    --tux-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

/* --- shared chrome -------------------------------------------------------- */

.tux-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 2px solid var(--tux-fg);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* The logo (TUX-1616): the full stacked mark, bowtie over "Tuxton", from
 * docs/brand/logos/tuxton-logo-black.svg. It replaces the bowtie set beside a
 * typed "Tuxton", which the 2024 guidelines rule out: the logo never runs on
 * one line, and its sizing and placement never change.
 *
 * Carried as a mask rather than an inline <svg> so the documented header markup
 * stays one line per tool (`<a class="tux-wordmark" href="/">Tuxton</a>`), and
 * the link text stays the accessible name. The mask is a data-URI because an
 * external mask paints a solid block until it loads. test_design_tokens.py
 * holds its geometry to the brand file.
 *
 * Painted --tux-logo, pure black on light and white on dark, not --tux-fg: ink
 * is for text, and the logo is always pure black or white.
 *
 * 64px wide, over the 48px minimum: at 56px the word "Tuxton" read small
 * beside the tool name. The header's gap and padding give it the clear space
 * the book asks for, one "T" width (about 9px at this size).
 */
:root {
  --tux-logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='143' height='80' viewBox='0 0 143 80' fill='none'%3E%3Cg clip-path='url(%23clip0_4908_4662)'%3E%3Cpath d='M73.1355 26.4054C73.1355 26.4054 107.366 46.9362 109.213 47.8031C110.969 48.6284 110.865 46.6632 110.865 46.6632V0.977235C110.865 -0.908722 109.108 0.46042 108.487 0.77301C107.87 1.08143 73.2397 23.4087 73.2397 23.4087H73.1355C73.1355 23.4087 38.5068 1.07935 37.8879 0.770926C37.2669 0.458337 35.5081 -0.908722 35.5081 0.975151V46.6653C35.5081 46.6653 35.406 48.6305 37.1627 47.8052C39.0049 46.9362 73.2397 26.4074 73.2397 26.4074H73.1376L73.1355 26.4054Z' fill='%23000000'/%3E%3Cpath d='M6.15593 78.8228H10.1279V52.7174H8.37532C2.81747 52.7174 1.40665 56.2726 0.764802 60.5718H0V52.0151H26.9244V60.5718H26.1554C25.5156 56.2726 24.1027 52.7174 18.5491 52.7174H16.7986V78.8228H20.7705V79.5272H6.15593V78.8228Z' fill='%23000000'/%3E%3Cpath d='M38.2151 62.3325H41.2409C42.9956 62.3325 46.1611 62.3325 47.0593 61.3135V78.8247H50.008V79.5291H41.1555V76.249H41.0763C39.9197 78.633 37.1023 80.0022 34.2369 80.0022C30.1732 80.0022 28.208 78.1621 28.208 73.9421V63.039H25.2572V62.3346H28.2935C30.044 62.3346 33.2053 62.3346 34.1035 61.3156V74.9195C34.1035 77.2222 34.5349 78.5913 36.5854 78.5913C38.9757 78.5913 41.1534 75.6593 41.1534 73.2002V63.039H38.2109V62.3346L38.2151 62.3325Z' fill='%23000000'/%3E%3Cpath d='M62.5304 62.3325V63.0369H60.2235L63.8995 68.0779L65.3062 66.4754C66.0773 65.6147 66.6753 64.7561 66.6753 64.0914C66.6753 63.4683 65.948 63.0744 65.0957 63.039H64.1559V62.3346H71.8477V63.039H70.9141C69.2865 63.039 68.6842 63.9767 67.4902 65.1896L64.3288 68.7031L71.7226 78.8268H73.7753V79.5312H61.7198V78.8268H64.7977L60.5194 72.9647L58.6835 75.1925C57.9166 76.1281 57.3185 77.1493 57.3185 77.7307C57.3185 78.5538 58.1708 78.8643 59.4128 78.8268H60.1797V79.5312H51.3751V78.8268H51.8482C54.2801 78.8268 55.3138 77.4223 56.8913 75.7801L60.0088 72.3L53.4236 63.0411H51.3751V62.3367H62.5325L62.5304 62.3325Z' fill='%23000000'/%3E%3Cpath d='M75.6091 63.035V62.3306C79.9312 62.3306 83.0071 58.0711 83.0071 53.9282H83.7698V62.3306H87.7084V63.035H83.7698V76.3221C83.7698 77.6142 84.3325 78.354 85.4432 78.354C86.5539 78.354 87.1937 77.4183 87.7084 76.7139L88.2648 76.9869C86.9353 79.0187 85.1869 80.0003 82.5778 80.0003C81.3816 80.0003 77.8785 79.2542 77.8785 75.5427V63.035H75.6091Z' fill='%23000000'/%3E%3Cpath d='M100.618 61.8638C106.258 61.8638 110.788 65.5773 110.788 70.9289C110.788 76.2804 106.258 79.9981 100.618 79.9981C94.9793 79.9981 90.4426 76.2825 90.4426 70.9289C90.4426 65.5752 94.9752 61.8638 100.618 61.8638ZM97.107 75.1488C97.107 78.083 98.4387 79.2938 100.618 79.2938C102.798 79.2938 104.122 78.083 104.122 75.1488V66.7089C104.122 63.7747 102.794 62.564 100.618 62.564C98.4428 62.564 97.107 63.7747 97.107 66.7089V75.1488Z' fill='%23000000'/%3E%3Cpath d='M113.182 78.8228H116.131V63.0349H113.182V62.3306H116.217C117.971 62.3306 121.135 62.3306 122.033 61.3115V65.4981H122.114C123.271 63.2287 126.088 61.8617 128.949 61.8617C133.017 61.8617 134.98 63.6955 134.98 67.9176V78.8207H137.931V79.5251H126.647V78.8207H129.085V66.4713C129.085 63.7351 127.799 63.2683 126.563 63.2683C124.165 63.2683 122.033 66.1192 122.033 68.1135V78.8207H124.55V79.5251H113.184V78.8207L113.182 78.8228Z' fill='%23000000'/%3E%3Cpath d='M138.59 49.5078C139.277 49.5078 139.948 49.687 140.603 50.0392C141.261 50.3914 141.772 50.8957 142.139 51.5521C142.503 52.2107 142.687 52.8984 142.687 53.6111C142.687 54.3238 142.51 54.9948 142.147 55.6471C141.786 56.2993 141.28 56.8037 140.63 57.1663C139.982 57.5268 139.298 57.7081 138.59 57.7081C137.881 57.7081 137.198 57.5247 136.55 57.1663C135.895 56.8057 135.391 56.2993 135.03 55.6471C134.67 54.9948 134.486 54.3175 134.486 53.6111C134.486 52.9046 134.67 52.2128 135.041 51.5521C135.408 50.8957 135.916 50.3935 136.575 50.0392C137.229 49.687 137.904 49.5078 138.59 49.5078ZM138.59 50.1893C138.015 50.1893 137.456 50.3372 136.904 50.629C136.362 50.927 135.937 51.35 135.631 51.8981C135.32 52.4462 135.166 53.0151 135.166 53.6111C135.166 54.2071 135.316 54.7656 135.622 55.3074C135.922 55.8513 136.345 56.2702 136.887 56.5744C137.431 56.8766 138 57.0287 138.59 57.0287C139.179 57.0287 139.746 56.8787 140.29 56.5744C140.834 56.2723 141.253 55.8513 141.553 55.3074C141.855 54.7656 142.005 54.2029 142.005 53.6111C142.005 53.0192 141.853 52.4462 141.549 51.8981C141.243 51.35 140.811 50.9249 140.263 50.629C139.721 50.3372 139.163 50.1893 138.59 50.1893ZM139.907 54.2654L140.574 54.4676C140.467 54.9219 140.236 55.2803 139.878 55.5533C139.53 55.8242 139.096 55.9555 138.596 55.9555C137.958 55.9555 137.439 55.7513 137.037 55.3407C136.637 54.9239 136.439 54.3509 136.439 53.6194C136.439 53.1422 136.531 52.7275 136.71 52.369C136.895 52.0189 137.152 51.7522 137.489 51.5709C137.825 51.3938 138.213 51.3021 138.646 51.3021C139.125 51.3021 139.53 51.4188 139.848 51.648C140.165 51.8793 140.388 52.194 140.501 52.5879L139.848 52.7629C139.74 52.4878 139.58 52.2753 139.369 52.1315C139.152 51.9835 138.904 51.9085 138.617 51.9085C138.194 51.9085 137.852 52.0585 137.581 52.3565C137.306 52.6525 137.175 53.0776 137.175 53.6361C137.175 54.1946 137.302 54.6093 137.56 54.8927C137.814 55.1782 138.146 55.322 138.554 55.322C138.881 55.322 139.167 55.2261 139.421 55.0386C139.661 54.851 139.83 54.5905 139.905 54.2675' fill='%23000000'/%3E%3Cpath d='M129.575 49.5078C130.262 49.5078 130.937 49.687 131.59 50.0392C132.244 50.3914 132.755 50.8957 133.119 51.5521C133.488 52.2107 133.667 52.8984 133.667 53.6111C133.667 54.3238 133.488 54.9948 133.132 55.6471C132.771 56.2993 132.263 56.8037 131.613 57.1663C130.965 57.5268 130.289 57.7081 129.572 57.7081C128.856 57.7081 128.182 57.5247 127.532 57.1663C126.88 56.8057 126.378 56.2993 126.015 55.6471C125.648 54.9948 125.471 54.3175 125.471 53.6111C125.471 52.9046 125.655 52.2128 126.024 51.5521C126.388 50.8957 126.901 50.3935 127.557 50.0392C128.218 49.687 128.881 49.5078 129.572 49.5078H129.575ZM129.572 50.1893C128.997 50.1893 128.435 50.3372 127.889 50.629C127.347 50.927 126.918 51.35 126.609 51.8981C126.307 52.4462 126.151 53.0151 126.151 53.6111C126.151 54.2071 126.303 54.7656 126.603 55.3074C126.905 55.8513 127.328 56.2702 127.868 56.5744C128.414 56.8766 128.979 57.0287 129.57 57.0287C130.162 57.0287 130.729 56.8787 131.273 56.5744C131.813 56.2723 132.236 55.8513 132.538 55.3074C132.836 54.7656 132.988 54.2029 132.988 53.6111C132.988 53.0192 132.834 52.4462 132.527 51.8981C132.221 51.35 131.796 50.9249 131.252 50.629C130.702 50.3372 130.146 50.1893 129.572 50.1893ZM127.768 55.8846V51.4605H129.289C129.808 51.4605 130.187 51.5 130.421 51.5834C130.654 51.6626 130.837 51.8085 130.975 52.0085C131.115 52.2128 131.183 52.4274 131.183 52.6566C131.183 52.9776 131.067 53.261 130.84 53.5006C130.608 53.7382 130.296 53.8757 129.914 53.9028C130.073 53.9674 130.196 54.0466 130.289 54.1362C130.473 54.3113 130.689 54.603 130.948 55.0156L131.486 55.8826H130.619L130.223 55.1865C129.912 54.6405 129.66 54.2946 129.472 54.155C129.343 54.0508 129.154 54.0008 128.904 54.0029H128.481V55.8826H127.768V55.8846ZM128.481 53.3964H129.356C129.775 53.3964 130.062 53.3339 130.216 53.213C130.369 53.0901 130.448 52.9213 130.448 52.7191C130.448 52.5858 130.408 52.4691 130.335 52.367C130.262 52.2628 130.164 52.1836 130.027 52.1315C129.902 52.0815 129.656 52.0565 129.302 52.0565H128.481V53.3964Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4908_4662'%3E%3Crect width='142.687' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.tux-wordmark {
  display: inline-block;
  flex: none;
  width: 64px;
  aspect-ratio: 143 / 80;
  background-color: var(--tux-logo);
  -webkit-mask: var(--tux-logo-mask) center / contain no-repeat;
  mask: var(--tux-logo-mask) center / contain no-repeat;
  color: transparent;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

.tux-tool-name {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tux-fg-muted);
  padding-left: 0.9rem;
  border-left: 1px solid var(--tux-line-strong);
}

.tux-header-spacer { flex: 1 1 auto; }

.tux-btn {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--tux-line-strong);
  border-radius: var(--tux-radius);
  background: var(--tux-surface);
  color: var(--tux-fg);
  cursor: pointer;
  line-height: 1.4;
}
.tux-btn:hover { background: var(--tux-surface-2); }

/* A gated button has to *look* gated (TUX-880).
 *
 * `style.css` gave the script runner's own buttons a disabled state and this
 * file never got one, so `.tux-btn[disabled]` rendered pixel-identical to a
 * live button everywhere else. On `/po-changes` that is the "I applied this"
 * held until the partner's 855 is seen — a processor clicked it, nothing
 * happened, and nothing on the page said why.
 *
 * `:disabled` is only meaningful on a real `<button>`, so the hover rule above
 * is walked back rather than re-stated: a disabled control that still lights up
 * under the cursor reads as clickable however faded it is. */
.tux-btn:disabled,
.tux-btn:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--tux-surface);
}

/* The one action on a page that carries the consequence (TUX-880).
 *
 * There was no filled variant at all, so `/po-changes` stacked three buttons in
 * identical grey: send a customer an 855, clear without evidence, and park it
 * for somebody else. Nothing said which one the page was for, and the only one
 * with an outbound side-effect had less weight than the header's Refresh.
 *
 * The brand accent, and `--tux-on-accent` rather than white. That pair is a
 * token precisely because white on the *dark* theme's lifted brown fails; see
 * the token's own comment. At most one of these per page: a second
 * primary is two primaries, which is none.
 *
 * Deliberately NOT applied to the escape hatches. "Can't apply this" has to
 * stay findable — `/po-changes` rule 9 exists so an un-actionable item has
 * somewhere to go other than the apply button — but findable is the outlined
 * default, not the filled one. */
.tux-btn-primary {
  background: var(--tux-accent);
  border-color: var(--tux-accent);
  color: var(--tux-on-accent);
  font-weight: 600;
}
.tux-btn-primary:hover {
  background: color-mix(in srgb, var(--tux-accent) 88%, var(--tux-fg));
  border-color: color-mix(in srgb, var(--tux-accent) 88%, var(--tux-fg));
}
/* Beats the shared `:disabled` background above, which would otherwise repaint
   a faded primary as a faded *secondary* — the fill is what identifies it. */
.tux-btn-primary:disabled,
.tux-btn-primary:disabled:hover {
  background: var(--tux-accent);
  border-color: var(--tux-accent);
}

.tux-theme-toggle {
  width: 2.2rem;
  padding: 0.35rem 0;
  text-align: center;
}

/* Segmented control — a one-of-N switch between views that are already
   rendered. Lives here rather than in a page stylesheet because /status and
   /style-guide both use it; the second consumer is what promoted it. */
.seg {
  display: inline-flex;
  border: 1px solid var(--tux-line-strong);
  border-radius: var(--tux-radius);
  overflow: hidden;
  margin: 0.4rem 0 0.2rem;
}
.seg-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.85rem;
  border: 0;
  border-right: 1px solid var(--tux-line-strong);
  background: var(--tux-bg);
  color: var(--tux-fg-muted);
  cursor: pointer;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--tux-surface); }
.seg-btn.on {
  background: var(--tux-accent);
  color: var(--tux-on-accent);
  font-weight: 600;
}
