/*
 * The site's overrides on top of Bootstrap 5.3.3's light and dark themes, in
 * the Freight Tech Works brand: Brand Guidelines v1.0, September 2026,
 * applied on 2026-10-03. Bootstrap still draws every component; this file
 * gives them the brand's typeface, colours and corners, and keeps what the
 * accessibility work of 2026-09-22 and 2026-09-23 measured (HANDOFF 16c).
 *
 * base.html sets data-bs-theme to "light" or "dark" from the user's choice,
 * and a device-following choice is resolved to one of the two before first
 * paint, so every rule here only ever meets one of those two values.
 */

/* Barlow, the brand's one typeface, in the four weights the guide names and
   no others: 400 for text; 600 for the smaller headings, buttons, the
   navbar's product name and the eyebrow labels; 700 for bold text, a page's
   title, a section's head and a result's headline figure; and 500, the
   guide's weight for its 28 px quote or callout text, a style no page sets
   yet. And 400's italic, the one italic the pages draw, in two of the
   pricing stance's lines and an emphasised word: without a face of its own
   a browser slants the upright one, the simulated style the guide refuses
   for bold. A browser fetches a face only when text on the page asks for
   it. Served from static/fonts, never a font host, so Barlow adds no third
   party to a page, nor do Bootstrap, its JavaScript and its icon font,
   served from static/vendor since 2026-10-04; and 500.html, which links
   this file by its plain path, finds the fonts beside it. Each is
   Fontsource 5.3.0's Latin subset, whose range this declares: a character
   outside it, such as the arrow between two ZIPs, is drawn in the
   fallback. SIL Open Font License 1.1, in static/fonts/OFL.txt. Never
   write a font's address in a comment here: the manifest storage reads
   comments too, and fails collectstatic on a file that is not there. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.81419bf5abb5.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("../fonts/barlow-400-italic.f47df445d5cb.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("../fonts/barlow-500.8e986e86d57e.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("../fonts/barlow-600.a1e2a2d7d4c0.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("../fonts/barlow-700.15481e4eab6d.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;
}

/* The typeface and the guide's 4 px corner, for both themes. Bootstrap reads
   both variables everywhere: the body, buttons, fields, cards, alerts and
   badges. Arial is the guide's own fallback. */
:root {
  --bs-body-font-family: "Barlow", Arial, sans-serif;
  --bs-border-radius: 0.25rem;
}

/* The site's own colours, one set per theme, and the Bootstrap text, link,
   fill and border colours rebased onto the brand palette. Every rule below
   reads these rather than a literal, so a rule written once works in both.
   test_contrast.ThemeSurfaceTests measures these values, and fails on a rule
   that draws text or a fill in one where it measures none.

   Light is the guide's own: Freight Navy text on a Paper white page, Steel
   for muted text and field outlines, Rail for decorative rules, Mist behind
   a tool's results, Warm Tint behind its "How this works" note, and links in
   underlined Deep Orange, 5.89:1 on white and 5.29:1 on Mist.

   Dark is not in the guide, which reverses the logo onto Freight Navy and
   says only that dark surfaces take white text with orange emphasis, never
   Deep Orange text. So the page is a deeper navy, #0f1c28, with Freight Navy
   for cards and the navbar; text, headings and links are the guide's white,
   14.87:1 on navy; muted text is Rail, 9.73:1, because Steel there is 2.38:1;
   and a link is told from the text around it by an underline in Signal
   Orange. A note and the routing caption take a faint orange wash, #2b272b,
   Signal Orange at 14% over the page, where Warm Tint, a light colour, has
   no place; white is 14.71:1 on it. Signal Orange is 4.29:1 on Freight
   Navy, below AA for text, so in both themes it draws only what is not
   text: the tab before a result, a note's and a routing caption's edge, a
   checked box and the current navbar link's underline.

   The primary action is the guide's: white on Deep Orange, 5.89:1, in both
   themes. Its hover is white on navy in light, and the deep navy on Signal
   Orange in dark, 4.97:1, where a navy hover would vanish into a navy card.

   Code is the theme's text, Freight Navy or white, and its monospace face
   marks it; Deep Orange would read as a link. An invalid field's text is
   the red every error message is drawn in, Bootstrap's own
   `--bs-danger-text-emphasis`, since the guide gives no error colour.
   Until 2026-10-04 both were Bootstrap's: in light, pink code at 4.04:1
   and a brighter red at 4.07:1 on Mist, and 3.78:1 and 3.80:1 on Warm
   Tint, below AA, though no page drew either there. */
[data-bs-theme=dark] {
  --ftk-page-bg: #0f1c28;
  --ftk-card-bg: #172939;
  --ftk-navbar-bg: #172939;
  --ftk-results-bg: #0f1c28;
  --ftk-note-bg: #2b272b;
  --ftk-rule: #536273;
  --ftk-focus: #ffffff;
  --ftk-field-border: #7a8896;
  --ftk-placeholder: #7a8896;
  --ftk-accent: #d76b3a;
  --ftk-link-underline: #d76b3a;
  --ftk-action: #a74720;
  --ftk-action-hover: #d76b3a;
  --ftk-action-hover-label: #0f1c28;
  --ftk-outline: #cbd2d8;
  --ftk-outline-hover-label: #0f1c28;
  --bs-body-color: #ffffff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #0f1c28;
  --bs-body-bg-rgb: 15, 28, 40;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #cbd2d8;
  --bs-secondary-color-rgb: 203, 210, 216;
  --bs-secondary-bg: #293a4a;
  --bs-secondary-bg-rgb: 41, 58, 74;
  --bs-tertiary-bg: #172939;
  --bs-tertiary-bg-rgb: 23, 41, 57;
  --bs-border-color: #536273;
  --bs-link-color: #ffffff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: #cbd2d8;
  --bs-link-hover-color-rgb: 203, 210, 216;
  --bs-code-color: #ffffff;
  --bs-form-invalid-color: #ea868f;
}

[data-bs-theme=light] {
  --ftk-page-bg: #ffffff;
  --ftk-card-bg: #ffffff;
  --ftk-navbar-bg: #ffffff;
  --ftk-results-bg: #f1f3f4;
  --ftk-note-bg: #f9e8df;
  --ftk-rule: #cbd2d8;
  --ftk-focus: #172939;
  --ftk-field-border: #536273;
  --ftk-placeholder: #536273;
  --ftk-accent: #d76b3a;
  --ftk-link-underline: #a74720;
  --ftk-action: #a74720;
  --ftk-action-hover: #172939;
  --ftk-action-hover-label: #ffffff;
  --ftk-outline: #172939;
  --ftk-outline-hover-label: #ffffff;
  --bs-body-color: #172939;
  --bs-body-color-rgb: 23, 41, 57;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #172939;
  --bs-emphasis-color-rgb: 23, 41, 57;
  --bs-secondary-color: #536273;
  --bs-secondary-color-rgb: 83, 98, 115;
  --bs-secondary-bg: #f1f3f4;
  --bs-secondary-bg-rgb: 241, 243, 244;
  --bs-tertiary-bg: #f1f3f4;
  --bs-tertiary-bg-rgb: 241, 243, 244;
  --bs-border-color: #cbd2d8;
  --bs-link-color: #a74720;
  --bs-link-color-rgb: 167, 71, 32;
  --bs-link-hover-color: #172939;
  --bs-link-hover-color-rgb: 23, 41, 57;
  --bs-code-color: #172939;
  --bs-form-invalid-color: #58151c;
}

body {
  background-color: var(--ftk-page-bg);
}

/* Headings in Barlow's semibold, where Bootstrap asks for 500: the guide
   wants no thin weights, and none is served. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
}

/* The guide's type scale at an app's sizes, idea 5 of the brand ideas: a
   page's title is the guide's H1 at 32 px, where its marketing pages use
   56, and a section's head its H2 at 24 px for 40, each bold, with the
   guide's line height and tracking (Brand Guidelines v1.0, page 12). No
   h1 carries a Bootstrap size class, so this rule sizes every page's
   title. A section's head is an h2 sized `.h4` or `.h5`: a tool's result
   heading, the dashboard's categories, the landing page's list. The theme
   fieldset's `.h5` legend on Settings heads its card as an h2 heads each
   card beside it, so it takes the same size. An h2 sized `.h6` is a label,
   an alert's head or a note's, and keeps its size.
   test_brand.TypeScaleTests holds both. */
h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2.h4,
h2.h5,
legend.h5 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* A result's headline figure, bold as the mock's answer is, where
   Bootstrap draws it at 300; this file set it at 600 until 2026-10-03. */
.display-6 {
  font-weight: 700;
}

/* Links keep Bootstrap's underline, coloured per theme: Deep Orange under
   Deep Orange in light, Signal Orange under white in dark, where the
   underline is what tells a link from the text beside it. */
a {
  text-decoration-color: var(--ftk-link-underline);
  text-underline-offset: 0.2em;
}

/* A faint rule under the navbar and over the footer, instead of Bootstrap's
   border colour. Each element carries a Bootstrap border utility that is
   itself !important at one class, so each selector here has to reach at
   least that: `.navbar` ties with `.border-bottom` and wins by loading
   later, and the footer needs `footer.border-top`. A bare `footer`, one
   element, lost to `.border-top` and did nothing until 2026-09-23. */
.navbar,
footer.border-top {
  border-color: var(--ftk-rule) !important;
}

/* The navbar: Paper in light, Freight Navy in dark, as the guide reverses the
   logo onto navy. Its links are the theme's muted text and turn to its
   strongest on hover and for the page's own section, below; Bootstrap
   draws them in a translucent emphasis colour instead. */
.navbar {
  --bs-navbar-color: var(--bs-secondary-color);
  --bs-navbar-hover-color: var(--bs-emphasis-color);
  --bs-navbar-active-color: var(--bs-emphasis-color);
  --bs-navbar-brand-color: var(--bs-emphasis-color);
  --bs-navbar-brand-hover-color: var(--bs-emphasis-color);
  background-color: var(--ftk-navbar-bg);
}

/* The brand: the partners' logo, a rule and the product's name, 16 px
   apart, more than the clear space the guide asks around the logo, one
   orange bar's thickness: about 10 px at this size, and 7 px for the mark
   (Brand Guidelines v1.0, page 06). The name in Barlow's semibold, as the
   mock set it. */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
}

/* The horizontal logo at 260 px, the guide's smallest digital width for it,
   and on a phone the compact mark, which base.html's picture swaps in, at
   88 px, above its smallest of 64. Each file's own shape sets the height. */
.navbar-brand img {
  display: block;
  width: 260px;
  height: auto;
}

@media (max-width: 575.98px) {
  .navbar-brand img {
    width: 88px;
  }
}

/* The row's room, which base.html's comment counts: a link's or a button's
   label never wraps, an organization's name or the user's address breaks
   within itself where the row needs it to, and the organization switcher
   is as wide as its longest name up to 12rem, which clips a longer one in
   the closed select and leaves the open list whole. Its width is its own,
   never Bootstrap's 100%, which let the row squeeze it: from 1200 to
   1399 px beside two organizations it showed "Acme Bro" of "Acme
   Brokerage" from 2026-10-03 until 2026-10-04, before this reached main.
   The address takes the squeeze instead, on two or three lines there
   beside a typical name and address, and more beside long ones. */
.navbar-nav .nav-link,
.navbar-nav .btn {
  white-space: nowrap;
}

.navbar-text {
  overflow-wrap: anywhere;
}

#orgSwitcher {
  width: auto;
  max-width: 12rem;
}

/* The navbar's menu without Bootstrap's script, which alone opens it.
   While <html> carries ftk-no-bootstrap-js -- JavaScript off, or
   Bootstrap's file blocked or failed; base.html says when -- the folded
   menu shows open below 1200 px, as the button would have opened it, and
   the button, which would do nothing, is hidden. From 1200 px up the
   links sit in the row either way: Bootstrap's rule there is !important. */
.ftk-no-bootstrap-js .navbar-collapse.collapse:not(.show) {
  display: block;
}

.ftk-no-bootstrap-js .navbar-toggler {
  display: none;
}

/* The pricing stance's "How this score is computed" without Bootstrap's
   script, which alone opens it: while the mark is on, the explanation, the
   only place a stance's weights, anchors and bands are written, shows as
   the button would have opened it, and the button is hidden, as the
   menu's is above. Ben's yes, 2026-10-04. test_brand holds every collapse
   on the site to a pair like these. */
.ftk-no-bootstrap-js #howComputed.collapse:not(.show) {
  display: block;
}

.ftk-no-bootstrap-js [data-bs-target="#howComputed"] {
  display: none;
}

/* The rule between the logo and the name, in the theme's rule colour and
   as tall as the name with 8 px more above and below. */
.ftk-product {
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 1px solid var(--ftk-rule);
}

/* The partners' logo is on a page twice wherever it shows, in full colour
   and reversed (base.html says why), and each theme hides the other's.
   print.css shows the full colour one on paper, whichever theme printed. */
[data-bs-theme=dark] .ftk-on-light,
[data-bs-theme=light] .ftk-on-dark {
  display: none;
}

/* The link for the section the page is in, which
   toolkit.context_processors.navigation marks: the theme's strongest text,
   Bootstrap's for an `.active` link, and a 2 px Signal Orange underline,
   the guide's colour for an active state, 3.47:1 on white and 4.29:1 on
   Freight Navy. An underline, where the mock drew an inset shadow: a shadow
   on a focus stop is what theme_audit.js fails as a glow. */
.navbar .nav-link[aria-current] {
  text-decoration-line: underline;
  text-decoration-color: var(--ftk-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5rem;
}

/* The landing page's stacked logo, 240 px wide, above the guide's 220 px
   smallest for it. On a cover the guide prefers clear space of twice the
   orange bar's thickness (page 06), about 36 px at this size, and 40 px is
   left below it. */
.ftk-hero-logo {
  margin-bottom: 2.5rem;
}

.ftk-hero-logo img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

.card {
  background-color: var(--ftk-card-bg);
  border-color: var(--ftk-rule);
}

/* A tool's form in a card, as the mock draws it: a card's fill and rule,
   the guide's 4 px corner and its 24 px of padding, 16 px on a phone
   (Brand Guidelines v1.0, page 16). A class of its own rather than
   Bootstrap's `.card`, a flex column that would stretch the submit button
   and the link beside it a row each. print.css hides every form. */
.ftk-form {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--ftk-card-bg);
  border: 1px solid var(--ftk-rule);
  border-radius: var(--bs-border-radius);
}

/* A tool's results, the block the landing script in base.html scrolls to and
   whose first heading it focuses: Mist in light, set off from the page; in
   dark the page colour inside a Steel rule, so its cards keep Freight Navy.
   Every tool's block is the one element on its page whose id ends in
   "-results" (test_print.PrintButtonTests), so no template carries a class
   for it. */
[id$="-results"] {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--ftk-results-bg);
  border: 1px solid var(--ftk-rule);
  border-radius: var(--bs-border-radius);
}

/* The guide's one visual signature, an orange tab cut about 15 degrees off
   vertical at each end and four to eight times as wide as it is tall, set
   once on a page, above the answer the user came for, with the guide's
   eyebrow label, "Result", beside it, as the mock set them (idea 5). Both
   are drawn rather than written into the templates, so the heading's
   text, which tests and the landing script read, is unchanged, and
   print.css takes both off paper. The label sits out of the flow, level
   with the tab, whose margins leave it room. */
[id$="-results"] > h2:first-of-type {
  position: relative;
}

[id$="-results"] > h2:first-of-type::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 0.375rem;
  margin: 0.25rem 0 0.875rem;
  background-color: var(--ftk-accent);
  transform: skewX(-15deg);
  transform-origin: 0 100%;
}

/* The guide's eyebrow, 12 px, semibold, uppercase and tracked +0.08em
   (page 12). A screen reader does not hear "Result" in every result's
   heading: the empty alternative after the slash keeps it out of the
   heading's name, and the declaration before it is for a browser that
   reads no alternative. */
[id$="-results"] > h2:first-of-type::after {
  content: "Result";
  content: "Result" / "";
  position: absolute;
  top: 0;
  left: 2.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A tool's "How this works" note, the prose under the form that holds its
   caveats: Warm Tint in light and a faint orange wash in dark, with an
   orange edge, and its heading as the guide's eyebrow label. */
.ftk-note {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background-color: var(--ftk-note-bg);
  border-left: 3px solid var(--ftk-accent);
  border-radius: var(--bs-border-radius);
}

.ftk-note > h2 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The routing caption over a tool's mileage, a callout as the note is, in
   its fill and with its orange edge, at a caption's padding (idea 9). Only
   the caption that asks for a check before dispatch is an alert instead
   (_routing_profile.html). */
.ftk-caveat {
  padding: 0.625rem 0.75rem;
  background-color: var(--ftk-note-bg);
  border-left: 3px solid var(--ftk-accent);
  border-radius: var(--bs-border-radius);
}

/* Results readout: tabular figures keep decimal points aligned when a
   value updates, which matters for numbers people compare at a glance. */
.display-6,
.table td {
  font-variant-numeric: tabular-nums;
}

/* Buttons in Barlow's semibold, and no translucent focus glow: the outline
   below is the one ring drawn for focus. */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: none;
}

/* The one primary action on a page, a tool's submit button among them: white
   on Deep Orange, Bootstrap's own white label left as it is. The hover is
   also what Bootstrap shows on keyboard focus. */
.btn-primary {
  --bs-btn-bg: var(--ftk-action);
  --bs-btn-border-color: var(--ftk-action);
  --bs-btn-hover-bg: var(--ftk-action-hover);
  --bs-btn-hover-border-color: var(--ftk-action-hover);
  --bs-btn-hover-color: var(--ftk-action-hover-label);
  --bs-btn-active-bg: var(--ftk-action-hover);
  --bs-btn-active-border-color: var(--ftk-action-hover);
  --bs-btn-active-color: var(--ftk-action-hover-label);
  --bs-btn-disabled-bg: var(--ftk-action);
  --bs-btn-disabled-border-color: var(--ftk-action);
}

/* Bootstrap draws these two buttons' labels in #6c757d and #dc3545, and the
   dark theme redefines neither: on the dark page and in a table cell, 3.68:1
   for the first and 3.81:1 for the second, and on a card 3.17:1 and 3.28:1,
   all below WCAG AA.
   The grey one is every other action's button but a destructive one's, Back
   to tools, Save, Print and Copy among them: a navy outline in light and a
   Rail one in dark, filled on hover. The red one, saved work's two Delete
   buttons and People's Remove, takes the theme's danger text colour, the one
   `.text-danger-emphasis` reads. Same specificity as Bootstrap's rules, so
   these work only because this file loads after it. */
.btn-outline-secondary {
  --bs-btn-color: var(--ftk-outline);
  --bs-btn-border-color: var(--ftk-outline);
  --bs-btn-hover-bg: var(--ftk-outline);
  --bs-btn-hover-border-color: var(--ftk-outline);
  --bs-btn-hover-color: var(--ftk-outline-hover-label);
  --bs-btn-active-bg: var(--ftk-outline);
  --bs-btn-active-border-color: var(--ftk-outline);
  --bs-btn-active-color: var(--ftk-outline-hover-label);
  --bs-btn-disabled-color: var(--ftk-outline);
  --bs-btn-disabled-border-color: var(--ftk-outline);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
}

/* A table row marked `.text-body-secondary` is meant to mute its cells, but
   Bootstrap colours every cell itself, so the row's own colour never reaches
   them. Colour the cells directly: this outranks Bootstrap's cell rule and
   the striped, hover and active variables it reads. A cell carrying its own
   colour utility keeps it, because those are `!important`. */
.table > :not(caption) > tr.text-body-secondary > * {
  color: var(--bs-secondary-color);
}

/* A table wider than a phone scrolls inside this box, and the page must
   not. Bootstrap's `.visually-hidden` text is positioned absolutely, against
   its nearest positioned ancestor, so with none between it and the page
   the hidden names of saved work's Open, Rename and Delete links sat past
   the scrolling box, and the page scrolled sideways below 501 px. Ben's
   yes, 2026-10-04. */
.table-responsive {
  position: relative;
}

/* A form field's border is what shows where the field is, so WCAG 1.4.11
   wants it at 3:1 against what it sits on. Bootstrap's border colour fails
   on both of this site's dark navies and on white. Steel, the guide's colour
   for field outlines, is 6.25:1 on white but 2.38:1 on Freight Navy, so dark
   takes Steel lightened, #7a8896, 4.10:1 on navy and 4.76:1 on the deeper
   page and a field's own fill. One class each, so Bootstrap's checked, valid
   and invalid borders -- two classes each -- still win. */
.form-control,
.form-select,
.form-check-input {
  border-color: var(--ftk-field-border);
}

/* An example in an empty field. Bootstrap draws it in the muted text colour,
   which in dark is Rail, 11.30:1 on a field's fill and too near the value's
   17.25:1 to tell an example, which submits nothing, from a default, which
   submits. So an example takes Steel in light, as it did, and in dark the
   field border's lightened Steel, 4.76:1 on the fill and 3.63:1 apart from
   the value; light's is 2.38:1 apart. */
.form-control::placeholder {
  color: var(--ftk-placeholder);
}

/* A focused field keeps its border, where Bootstrap turns it light blue and
   adds a translucent blue ring; the outline below shows the focus. An
   invalid field's red focus border, at three classes, still wins. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ftk-field-border);
  box-shadow: none;
}

/* A checked box or radio in Signal Orange, the guide's colour for an active
   state, with Bootstrap's white mark: 3.47:1 against white and the mark, and
   4.29:1 or better against both dark navies, above the 3:1 asked of a
   control. After the focus rule, so a focused checked box stays orange. */
.form-check-input:checked {
  background-color: var(--ftk-accent);
  border-color: var(--ftk-accent);
}

/* A rejected box or radio keeps Bootstrap's red border when focused or
   checked. Bootstrap gives one no focus border of its own, and its red rule
   is one class and a state, as the two rules above are, so without this one,
   loaded after them, either would take the red away. */
.form-check-input.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}

/* Keyboard focus must stay clearly visible in both themes. Bootstrap sets
   `outline: 0` on these components at higher specificity than a bare
   `:focus-visible` and draws a translucent ring instead, so each is named
   here too. The guide's ring: 2 px of navy, 2 px clear of the control, in
   light, and white in dark. Form fields are named whole: Bootstrap's focus
   border was about 2.06:1 on white, and on a checked checkbox or a field
   marked invalid it cannot change colour at all. */
:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.btn-close:focus-visible,
.page-link:focus-visible,
.form-check-input:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--ftk-focus);
  outline-offset: 2px;
}

/* Bootstrap also rings a focused nav link, page link and close button with a
   translucent blue glow 0.25rem wide, and the navbar's menu button with one
   in its text colour. Inside the ring above, each filled the 2 px gap with a
   second indicator, the blue one in a colour the palette lacks. So each is
   off: through Bootstrap's own variable where it has one, which also takes
   off the glow a mouse click shows, and in a rule where it has none. The
   ring is the one ring drawn, as it is on buttons and fields above, where
   a focused button also takes its hover fill from Bootstrap. */
.nav-link:focus-visible,
.navbar-toggler:focus {
  box-shadow: none;
}

.pagination {
  --bs-pagination-focus-box-shadow: none;
}

.btn-close {
  --bs-btn-close-focus-shadow: none;
}

/* A message's close button. In dark, Bootstrap whitens its black X with a
   filter, and a filter repaints everything the element draws, the focus
   ring with it: the white ring painted black, about 1.2:1 on the page and
   the message fills. So dark takes no filter, and draws Bootstrap's own X,
   path for path, in white. The image cannot read a variable, which makes
   this the one colour this file writes outside the theme blocks. */
[data-bs-theme=dark] .btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  filter: none;
}