/* Build Safe Pro theme
 * ====================
 *
 * The brand, applied as a layer of overrides on top of the vendored Bootstrap.
 *
 * `bootstrap.min.css` in this directory is a *precompiled 5.2.1 artifact with
 * no Sass source in this repo*, and it was compiled against an off-brand teal
 * (#118f89) with `$secondary` aliased to `$primary`, so every secondary button
 * in the app currently renders identically to a primary one. It cannot be
 * regenerated, which is why the brand lands here rather than in its variables.
 *
 * Load order in `layouts/_head.html.erb` is bootstrap.min -> theme ->
 * application, and that order is the whole mechanism: Propshaft serves each
 * stylesheet separately, so precedence is link-tag order and there is no
 * manifest to reorder.
 *
 * ../website is the source of truth for every value below. Take them from its
 * *compiled output* rather than re-deriving them -- the Sass shade functions
 * behind the hover and active states have no plain-CSS equivalent:
 *
 *   curl -s http://<jekyll-host>/assets/css/main.css |
 *     grep -o '\.btn-primary{[^}]*}'
 *
 * `bin/styleguide` in that repo serves it; the checked-in `_site/` on disk is
 * often stale, so build it or use a running server. The percentage `rgb()`
 * values below are pasted verbatim from that output for exactly this reason --
 * rounding them to hex by hand is how the two products drift apart again.
 *
 * Two deliberate departures from the site, both because it is a brochure and
 * this is an application:
 *
 *   - The heading scale is app-sized (h1 2.25rem), not the site's poster scale
 *     (h1 6.5rem). Family, weight, tracking and case are the site's.
 *   - Text on light uses `$secondary-dark` (#424453) rather than `$secondary`
 *     (#80818C), which is 3.86:1 on white and under AA. The site makes the
 *     same substitution for its own body copy, via `.text-secondary-dark`.
 *
 * The Saturn/Shuffle leftovers in the site's compiled CSS -- pill-radius
 * alerts and badges, 0.5rem-radius inputs -- are *not* copied here. They
 * predate the job-site redesign and contradict its `$border-radius: 0`.
 */

/* -- Fonts ----------------------------------------------------------------- */
/*
 * Self-hosted rather than the Google Fonts <link> the marketing site uses: the
 * worker-facing flow runs on job-site phones with poor signal, so a
 * render-blocking third-party request is the wrong trade. `font_src :self`
 * already covers these.
 *
 * Latin and latin-ext subsets, straight from Google's woff2. The unicode-range
 * on each means a browser only fetches latin-ext when a glyph needs it -- the
 * Spanish the worker flow is translated into lives entirely in latin.
 * Licences are alongside the files in app/assets/fonts.
 */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Barlow-Regular-latin-4ad4debe.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Barlow-Regular-latin-ext-8e4634d9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/Barlow-Medium-latin-1f5bcbda.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/Barlow-Medium-latin-ext-2277aba5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/Barlow-SemiBold-latin-07ba6ae4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/Barlow-SemiBold-latin-ext-b62ce6c9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/Barlow-Bold-latin-a47e5b9b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/Barlow-Bold-latin-ext-267be613.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Barlow-Italic-latin-ce5c97bd.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Barlow-Italic-latin-ext-4ec73246.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/BarlowCondensed-Bold-latin-909728d4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/BarlowCondensed-Bold-latin-ext-8932c96b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/BarlowCondensed-ExtraBold-latin-f916c04b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/BarlowCondensed-ExtraBold-latin-ext-09175314.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/IBMPlexMono-SemiBold-latin-0fdd541f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/IBMPlexMono-SemiBold-latin-ext-71edd651.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -- Tokens ---------------------------------------------------------------- */

:root {
  /* The job site palette, from ../website/_sass/_custom-variables.scss.
     Bootstrap has no slot for these, so they keep a --bsp- prefix. */
  --bsp-primary-dark: #0E938C;
  --bsp-primary-light: #E6F6F5;
  --bsp-hivis: #FFC300;
  --bsp-steel: #14181F;
  --bsp-concrete: #F4F5F7;
  --bsp-secondary-dark: #424453;
  --bsp-font-condensed: "Barlow Condensed", Barlow, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bs-primary: #11AAA2;
  --bs-primary-rgb: 17, 170, 162;
  --bs-secondary: #80818C;
  --bs-secondary-rgb: 128, 129, 140;
  --bs-dark: #2B313D;
  --bs-dark-rgb: 43, 49, 61;

  --bs-body-color: #1E2238;
  --bs-body-color-rgb: 30, 34, 56;
  --bs-border-color: #E1E4E9;

  --bs-link-color: #11AAA2;
  --bs-link-hover-color: rgb(5.3333333333%, 53.3333333333%, 50.8235294118%);

  --bs-font-sans-serif: Barlow, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Site signage, stencils and steel plate have hard corners. The pill radius
     is left alone -- it is a shape, not a rounding. */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
}

/* -- Type ------------------------------------------------------------------ */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--bsp-font-condensed);
  font-weight: 800;
  line-height: 0.9;
  /* The site's -0.01em is calibrated for its poster scale, where headings run
     3rem and up. At the sizes below, negative tracking closes up the counters
     of condensed 800 and the words start to read as one block. */
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* An app-sized scale. A heading here labels a table or a card, not a
   billboard, so the site's 6.5rem h1 does not come across. */
h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }

.lead { font-weight: 500; }

/* Body copy on light. Bootstrap's #6c757d is neither brand nor readable
   enough for the small metadata this carries across the app. */
.text-muted { color: var(--bsp-secondary-dark) !important; }

/* -- Squared corners ------------------------------------------------------- */
/*
 * 5.2.1 hardcodes most component radii instead of deriving them from
 * --bs-border-radius, so the token above does not reach them on its own.
 * Checkbox (.25em), switch (2em) and range thumb/track (1rem) radii are shapes
 * rather than roundings and the site keeps them, so they are left alone.
 */

.btn,
.btn-lg, .btn-group-lg > .btn,
.btn-sm, .btn-group-sm > .btn { --bs-btn-border-radius: 0; }
.dropdown-menu { --bs-dropdown-border-radius: 0; --bs-dropdown-inner-border-radius: 0; }
.nav-tabs { --bs-nav-tabs-border-radius: 0; }
.nav-pills { --bs-nav-pills-border-radius: 0; }
.navbar { --bs-navbar-toggler-border-radius: 0; }
.card { --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; }
.accordion { --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; }
.pagination, .pagination-lg, .pagination-sm { --bs-pagination-border-radius: 0; }
.badge { --bs-badge-border-radius: 0; }
.alert { --bs-alert-border-radius: 0; }
.progress { --bs-progress-border-radius: 0; }
.list-group { --bs-list-group-border-radius: 0; }
.toast { --bs-toast-border-radius: 0; }
.modal { --bs-modal-border-radius: 0; --bs-modal-inner-border-radius: 0; }
.tooltip { --bs-tooltip-border-radius: 0; }
.popover { --bs-popover-border-radius: 0; --bs-popover-inner-border-radius: 0; }

.img-thumbnail,
.form-control, .form-control-sm, .form-control-lg,
.form-select, .form-select-sm, .form-select-lg,
.input-group-text,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn,
.btn-group,
.btn-close,
kbd,
.valid-tooltip,
.invalid-tooltip { border-radius: 0; }

/* Vendor-prefixed pseudo-elements have to stand alone: an unrecognised
   selector invalidates the whole list it appears in. */
.form-control-color::-webkit-color-swatch { border-radius: 0; }
.form-control-color::-moz-color-swatch { border-radius: 0; }

/* -- Buttons --------------------------------------------------------------- */

.btn {
  --bs-btn-font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #11AAA2;
  --bs-btn-border-color: #11AAA2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(5.6666666667%, 56.6666666667%, 54%);
  --bs-btn-hover-border-color: rgb(5.3333333333%, 53.3333333333%, 50.8235294118%);
  --bs-btn-focus-shadow-rgb: 53, 183, 176;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(5.3333333333%, 53.3333333333%, 50.8235294118%);
  --bs-btn-active-border-color: rgb(5%, 50%, 47.6470588235%);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #11AAA2;
  --bs-btn-disabled-border-color: #11AAA2;
}

.btn-outline-primary {
  --bs-btn-color: #11AAA2;
  --bs-btn-border-color: #11AAA2;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #11AAA2;
  --bs-btn-hover-border-color: #11AAA2;
  --bs-btn-focus-shadow-rgb: 17, 170, 162;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #11AAA2;
  --bs-btn-active-border-color: #11AAA2;
  --bs-btn-disabled-color: #11AAA2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #11AAA2;
}

/*
 * The one place with no compiled block to copy. The site only ever uses
 * $secondary-dark as a text colour, so these shades are derived here the way
 * Bootstrap's shade-color() would: mix towards black by 15/20/25%.
 *
 * $secondary (#80818C) is what the site's own .btn-secondary compiles to, and
 * it is 3.86:1 against white either as a fill or as an outline label -- under
 * AA, and these carry "Close"/"Open" at btn-sm across the logs table.
 */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #424453;
  --bs-btn-border-color: #424453;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #383A47;
  --bs-btn-hover-border-color: #353642;
  --bs-btn-focus-shadow-rgb: 94, 96, 109;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #353642;
  --bs-btn-active-border-color: #32333E;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #424453;
  --bs-btn-disabled-border-color: #424453;
}

.btn-outline-secondary {
  --bs-btn-color: #424453;
  --bs-btn-border-color: #424453;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424453;
  --bs-btn-hover-border-color: #424453;
  --bs-btn-focus-shadow-rgb: 66, 68, 83;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #424453;
  --bs-btn-active-border-color: #424453;
  --bs-btn-disabled-color: #424453;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #424453;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2B313D;
  --bs-btn-border-color: #2B313D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(29.3333333333%, 31.3333333333%, 35.3333333333%);
  --bs-btn-hover-border-color: rgb(25.1764705882%, 27.2941176471%, 31.5294117647%);
  --bs-btn-focus-shadow-rgb: 75, 80, 90;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(33.4901960784%, 35.3725490196%, 39.137254902%);
  --bs-btn-active-border-color: rgb(25.1764705882%, 27.2941176471%, 31.5294117647%);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2B313D;
  --bs-btn-disabled-border-color: #2B313D;
}

.btn-outline-dark {
  --bs-btn-color: #2B313D;
  --bs-btn-border-color: #2B313D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2B313D;
  --bs-btn-hover-border-color: #2B313D;
  --bs-btn-focus-shadow-rgb: 43, 49, 61;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2B313D;
  --bs-btn-active-border-color: #2B313D;
  --bs-btn-disabled-color: #2B313D;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #2B313D;
}

/* --bs-btn-color follows --bs-link-color on its own; only the focus ring was
   compiled to a literal. */
.btn-link {
  --bs-btn-focus-shadow-rgb: 17, 170, 162;
  --bs-btn-disabled-color: var(--bsp-secondary-dark);
}

/* -- Links ----------------------------------------------------------------- */

.link-primary { color: #11AAA2 !important; }
.link-primary:hover,
.link-primary:focus { color: rgb(5.3333333333%, 53.3333333333%, 50.8235294118%) !important; }

.link-secondary { color: var(--bsp-secondary-dark) !important; }
.link-secondary:hover,
.link-secondary:focus { color: #353642 !important; }

/* -- Forms ----------------------------------------------------------------- */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgb(53.3333333333%, 83.3333333333%, 81.7647058824%);
  box-shadow: 0 0 0 0.25rem rgba(17, 170, 162, 0.25);
}

.form-control:focus { color: var(--bs-body-color); }

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: #11AAA2;
  border-color: #11AAA2;
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%2853.3333333333%, 83.3333333333%, 81.7647058824%%29'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb { background-color: #11AAA2; }
.form-range::-moz-range-thumb { background-color: #11AAA2; }
.form-range::-webkit-slider-thumb:active { background-color: var(--bsp-primary-light); }
.form-range::-moz-range-thumb:active { background-color: var(--bsp-primary-light); }

/* -- Components ------------------------------------------------------------ */

.nav-pills { --bs-nav-pills-link-active-bg: #11AAA2; }

.pagination {
  --bs-pagination-active-bg: #11AAA2;
  --bs-pagination-active-border-color: #11AAA2;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(17, 170, 162, 0.25);
  --bs-pagination-border-color: var(--bs-border-color);
}

.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-action-color: var(--bsp-secondary-dark);
  --bs-list-group-action-hover-color: var(--bs-body-color);
  --bs-list-group-active-bg: #11AAA2;
  --bs-list-group-active-border-color: #11AAA2;
}

.list-group-item-primary,
.list-group-item-secondary { color: rgb(5%, 50%, 47.6470588235%); background-color: var(--bsp-primary-light); }
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus,
.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus { color: rgb(5%, 50%, 47.6470588235%); background-color: #CFEBE9; }

.dropdown-menu { --bs-dropdown-link-active-bg: #11AAA2; }

.progress { --bs-progress-bar-bg: #11AAA2; }

.accordion {
  --bs-accordion-btn-focus-border-color: rgb(53.3333333333%, 83.3333333333%, 81.7647058824%);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(17, 170, 162, 0.25);
  --bs-accordion-active-bg: var(--bsp-primary-light);
}

.card { --bs-card-border-color: var(--bs-border-color); }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-link-hover-border-color: var(--bsp-concrete) var(--bsp-concrete) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-body-color);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) #fff;
}

.alert-primary,
.alert-secondary {
  --bs-alert-color: rgb(5%, 50%, 47.6470588235%);
  --bs-alert-bg: var(--bsp-primary-light);
  --bs-alert-border-color: #CFEBE9;
}

.table-primary,
.table-secondary {
  --bs-table-bg: var(--bsp-primary-light);
  --bs-table-border-color: #CFEBE9;
  --bs-table-striped-bg: #DEF0EF;
  --bs-table-active-bg: #CFEBE9;
  --bs-table-hover-bg: #D6EEEC;
}

.text-bg-secondary { color: #fff !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-dark { color: #fff !important; background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; }

/* -- Brand helpers --------------------------------------------------------- */
/*
 * Ported from ../website/_sass/_custom-styles.scss so later passes have the
 * vocabulary without re-deriving it. Only what the chrome uses today is here.
 */

.text-hivis { color: var(--bsp-hivis) !important; }
.text-secondary-dark { color: var(--bsp-secondary-dark) !important; }
.bg-hivis { background-color: var(--bsp-hivis) !important; }
.bg-steel { background-color: var(--bsp-steel) !important; }
.bg-concrete { background-color: var(--bsp-concrete) !important; }

.headline { text-transform: uppercase; }

/* Mono, wide-tracked, uppercase: the text stencilled on a drawing title
   block. Section eyebrows and small technical labels. */
.spec-label {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Hazard striping: the single most legible "construction" cue there is. */
.hazard {
  height: 0.875rem;
  background-image: repeating-linear-gradient(-45deg, #FFC300 0, #FFC300 16px, #14181F 16px, #14181F 32px);
}