/* Theme customisation for bootstrap5 */

/* Height of the sticky-top navbar. Nothing pins it - it's whatever the
 * brand and the menu come out at - so utils.setNavHeight() measures the
 * rendered navbar and overwrites this at runtime. The value here is just
 * the fallback for before that runs, and is what it comes to at lg and
 * above: 2.5rem for the nav-link, plus 1rem of py-lg-2 on the menu ul,
 * plus the navbar's own 1rem of padding. */
:root {
  --tcup-top-nav-height: 4.5rem;
}

/* Allow for the sticky-top navbar when scrollIntoView() is used to get an
 * element to the top of the screen. themenirvana does the equivalent for
 * itself with a scroll-margin-top on [id]. */
html {
  scroll-padding-top: calc(var(--tcup-top-nav-height) + 0.5rem);
}

/* Extra space to allow last card to sit at top of screen the way
 * all the others do. */
body {
  padding-bottom: 70px;
}

/* The bar is sticky-top, so it sits in the flow and what follows needs no
 * clearance beneath it. A page leading with an ordinary section still
 * wants a little breathing room; one leading with a full-width block sits
 * flush against the bar by design, and that block is a div, so it is left
 * alone here. */
.clear-fixed-top > section:first-child {
  padding-top: 1.5rem;
}

.tab-content {
  margin-top: 10px;
}

.card {
  margin-top: 25px;
}

.form-control {
  margin-bottom: 10px;
}
.form-select {
  margin-bottom: 10px;
}

/* The json-editor editor holder... */
.je-ready .card-body {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.je-object__controls {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* A form built without editform()'s toolbar has nothing left to put in the
 * root object's header, and json-editor draws it regardless - so what shows
 * is a blank heading's worth of space above the first field. The 'level-'
 * class is the editor's path depth, and the root is the only thing at
 * depth 1, so nested objects keep the headings that name them. */
.je-notoolbar .je-object__title.level-1 {
  display: none;
}

@media print {
  .noprint {
    display: none;
  }
}

/* ---- Responsive font sizes ------------------------------------------
 *
 * Bootstrap has .fs-1 to .fs-6 but no breakpoint variants of them, so
 * there's no way to say "this heading steps up on a wider screen" without
 * writing custom CSS for it. These fill that gap: .fs-md-2 is .fs-2 from
 * the md breakpoint up, and so on.
 *
 * The values are Bootstrap's own, including its habit of being fluid below
 * xl and fixed from xl up, so a variant always agrees with the plain class
 * it names.
 *
 * Note these are NOT themenirvana's fs-* scale, which is a ten-step
 * 1.333-ratio thing that redefines fs-1 to fs-6 as well - there, 1rem is
 * fs-9 rather than fs-6. Markup written against that theme needs its
 * numbers remapping, not just these classes adding.
 */

@media (min-width: 576px) {
  .fs-sm-1 { font-size: calc(1.375rem + 1.5vw) !important; }
  .fs-sm-2 { font-size: calc(1.325rem + .9vw) !important; }
  .fs-sm-3 { font-size: calc(1.3rem + .6vw) !important; }
  .fs-sm-4 { font-size: calc(1.275rem + .3vw) !important; }
  .fs-sm-5 { font-size: 1.25rem !important; }
  .fs-sm-6 { font-size: 1rem !important; }
}

@media (min-width: 768px) {
  .fs-md-1 { font-size: calc(1.375rem + 1.5vw) !important; }
  .fs-md-2 { font-size: calc(1.325rem + .9vw) !important; }
  .fs-md-3 { font-size: calc(1.3rem + .6vw) !important; }
  .fs-md-4 { font-size: calc(1.275rem + .3vw) !important; }
  .fs-md-5 { font-size: 1.25rem !important; }
  .fs-md-6 { font-size: 1rem !important; }
}

@media (min-width: 992px) {
  .fs-lg-1 { font-size: calc(1.375rem + 1.5vw) !important; }
  .fs-lg-2 { font-size: calc(1.325rem + .9vw) !important; }
  .fs-lg-3 { font-size: calc(1.3rem + .6vw) !important; }
  .fs-lg-4 { font-size: calc(1.275rem + .3vw) !important; }
  .fs-lg-5 { font-size: 1.25rem !important; }
  .fs-lg-6 { font-size: 1rem !important; }
}

@media (min-width: 1200px) {
  .fs-xl-1 { font-size: 2.5rem !important; }
  .fs-xl-2 { font-size: 2rem !important; }
  .fs-xl-3 { font-size: 1.75rem !important; }
  .fs-xl-4 { font-size: 1.5rem !important; }
  .fs-xl-5 { font-size: 1.25rem !important; }
  .fs-xl-6 { font-size: 1rem !important; }
}

@media (min-width: 1400px) {
  .fs-xxl-1 { font-size: 2.5rem !important; }
  .fs-xxl-2 { font-size: 2rem !important; }
  .fs-xxl-3 { font-size: 1.75rem !important; }
  .fs-xxl-4 { font-size: 1.5rem !important; }
  .fs-xxl-5 { font-size: 1.25rem !important; }
  .fs-xxl-6 { font-size: 1rem !important; }
}

@media (min-width: 1200px) {
  .fs-sm-1 { font-size: 2.5rem !important; }
  .fs-sm-2 { font-size: 2rem !important; }
  .fs-sm-3 { font-size: 1.75rem !important; }
  .fs-sm-4 { font-size: 1.5rem !important; }
  .fs-md-1 { font-size: 2.5rem !important; }
  .fs-md-2 { font-size: 2rem !important; }
  .fs-md-3 { font-size: 1.75rem !important; }
  .fs-md-4 { font-size: 1.5rem !important; }
  .fs-lg-1 { font-size: 2.5rem !important; }
  .fs-lg-2 { font-size: 2rem !important; }
  .fs-lg-3 { font-size: 1.75rem !important; }
  .fs-lg-4 { font-size: 1.5rem !important; }
}

/* ---- Spacing beyond bootstrap's scale --------------------------------
 *
 * Bootstrap's spacers stop at 5, which is 3rem. Page-sized blocks want
 * more room between them than that, so the scale continues: 6 is 4rem,
 * then 5rem, 7.5rem, 10rem and 12.5rem.
 *
 * Same naming as bootstrap's own, breakpoint variants included, so .mt-7
 * and .py-md-8 behave the way the rest of the scale does.
 *
 * The breakpointless ones are wrapped in :where() to give them no
 * specificity at all. This stylesheet loads after bootstrap, so without
 * that a plain .mt-7 would beat bootstrap's own .mt-lg-0 and a class pair
 * like "mt-7 mt-lg-0" would never cancel - the margin would stay at every
 * width. Zero specificity lets any breakpoint rule, bootstrap's or the
 * ones below, take precedence as it should.
 */
  :where(.m-6) { margin-top: 4rem !important; margin-right: 4rem !important; margin-bottom: 4rem !important; margin-left: 4rem !important; }
  :where(.m-7) { margin-top: 5rem !important; margin-right: 5rem !important; margin-bottom: 5rem !important; margin-left: 5rem !important; }
  :where(.m-8) { margin-top: 7.5rem !important; margin-right: 7.5rem !important; margin-bottom: 7.5rem !important; margin-left: 7.5rem !important; }
  :where(.m-9) { margin-top: 10rem !important; margin-right: 10rem !important; margin-bottom: 10rem !important; margin-left: 10rem !important; }
  :where(.m-10) { margin-top: 12.5rem !important; margin-right: 12.5rem !important; margin-bottom: 12.5rem !important; margin-left: 12.5rem !important; }
  :where(.mt-6) { margin-top: 4rem !important; }
  :where(.mt-7) { margin-top: 5rem !important; }
  :where(.mt-8) { margin-top: 7.5rem !important; }
  :where(.mt-9) { margin-top: 10rem !important; }
  :where(.mt-10) { margin-top: 12.5rem !important; }
  :where(.mb-6) { margin-bottom: 4rem !important; }
  :where(.mb-7) { margin-bottom: 5rem !important; }
  :where(.mb-8) { margin-bottom: 7.5rem !important; }
  :where(.mb-9) { margin-bottom: 10rem !important; }
  :where(.mb-10) { margin-bottom: 12.5rem !important; }
  :where(.ms-6) { margin-left: 4rem !important; }
  :where(.ms-7) { margin-left: 5rem !important; }
  :where(.ms-8) { margin-left: 7.5rem !important; }
  :where(.ms-9) { margin-left: 10rem !important; }
  :where(.ms-10) { margin-left: 12.5rem !important; }
  :where(.me-6) { margin-right: 4rem !important; }
  :where(.me-7) { margin-right: 5rem !important; }
  :where(.me-8) { margin-right: 7.5rem !important; }
  :where(.me-9) { margin-right: 10rem !important; }
  :where(.me-10) { margin-right: 12.5rem !important; }
  :where(.mx-6) { margin-left: 4rem !important; margin-right: 4rem !important; }
  :where(.mx-7) { margin-left: 5rem !important; margin-right: 5rem !important; }
  :where(.mx-8) { margin-left: 7.5rem !important; margin-right: 7.5rem !important; }
  :where(.mx-9) { margin-left: 10rem !important; margin-right: 10rem !important; }
  :where(.mx-10) { margin-left: 12.5rem !important; margin-right: 12.5rem !important; }
  :where(.my-6) { margin-top: 4rem !important; margin-bottom: 4rem !important; }
  :where(.my-7) { margin-top: 5rem !important; margin-bottom: 5rem !important; }
  :where(.my-8) { margin-top: 7.5rem !important; margin-bottom: 7.5rem !important; }
  :where(.my-9) { margin-top: 10rem !important; margin-bottom: 10rem !important; }
  :where(.my-10) { margin-top: 12.5rem !important; margin-bottom: 12.5rem !important; }
  :where(.p-6) { padding-top: 4rem !important; padding-right: 4rem !important; padding-bottom: 4rem !important; padding-left: 4rem !important; }
  :where(.p-7) { padding-top: 5rem !important; padding-right: 5rem !important; padding-bottom: 5rem !important; padding-left: 5rem !important; }
  :where(.p-8) { padding-top: 7.5rem !important; padding-right: 7.5rem !important; padding-bottom: 7.5rem !important; padding-left: 7.5rem !important; }
  :where(.p-9) { padding-top: 10rem !important; padding-right: 10rem !important; padding-bottom: 10rem !important; padding-left: 10rem !important; }
  :where(.p-10) { padding-top: 12.5rem !important; padding-right: 12.5rem !important; padding-bottom: 12.5rem !important; padding-left: 12.5rem !important; }
  :where(.pt-6) { padding-top: 4rem !important; }
  :where(.pt-7) { padding-top: 5rem !important; }
  :where(.pt-8) { padding-top: 7.5rem !important; }
  :where(.pt-9) { padding-top: 10rem !important; }
  :where(.pt-10) { padding-top: 12.5rem !important; }
  :where(.pb-6) { padding-bottom: 4rem !important; }
  :where(.pb-7) { padding-bottom: 5rem !important; }
  :where(.pb-8) { padding-bottom: 7.5rem !important; }
  :where(.pb-9) { padding-bottom: 10rem !important; }
  :where(.pb-10) { padding-bottom: 12.5rem !important; }
  :where(.ps-6) { padding-left: 4rem !important; }
  :where(.ps-7) { padding-left: 5rem !important; }
  :where(.ps-8) { padding-left: 7.5rem !important; }
  :where(.ps-9) { padding-left: 10rem !important; }
  :where(.ps-10) { padding-left: 12.5rem !important; }
  :where(.pe-6) { padding-right: 4rem !important; }
  :where(.pe-7) { padding-right: 5rem !important; }
  :where(.pe-8) { padding-right: 7.5rem !important; }
  :where(.pe-9) { padding-right: 10rem !important; }
  :where(.pe-10) { padding-right: 12.5rem !important; }
  :where(.px-6) { padding-left: 4rem !important; padding-right: 4rem !important; }
  :where(.px-7) { padding-left: 5rem !important; padding-right: 5rem !important; }
  :where(.px-8) { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
  :where(.px-9) { padding-left: 10rem !important; padding-right: 10rem !important; }
  :where(.px-10) { padding-left: 12.5rem !important; padding-right: 12.5rem !important; }
  :where(.py-6) { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  :where(.py-7) { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  :where(.py-8) { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
  :where(.py-9) { padding-top: 10rem !important; padding-bottom: 10rem !important; }
  :where(.py-10) { padding-top: 12.5rem !important; padding-bottom: 12.5rem !important; }

@media (min-width: 576px) {
  .m-sm-6 { margin-top: 4rem !important; margin-right: 4rem !important; margin-bottom: 4rem !important; margin-left: 4rem !important; }
  .m-sm-7 { margin-top: 5rem !important; margin-right: 5rem !important; margin-bottom: 5rem !important; margin-left: 5rem !important; }
  .m-sm-8 { margin-top: 7.5rem !important; margin-right: 7.5rem !important; margin-bottom: 7.5rem !important; margin-left: 7.5rem !important; }
  .m-sm-9 { margin-top: 10rem !important; margin-right: 10rem !important; margin-bottom: 10rem !important; margin-left: 10rem !important; }
  .m-sm-10 { margin-top: 12.5rem !important; margin-right: 12.5rem !important; margin-bottom: 12.5rem !important; margin-left: 12.5rem !important; }
  .mt-sm-6 { margin-top: 4rem !important; }
  .mt-sm-7 { margin-top: 5rem !important; }
  .mt-sm-8 { margin-top: 7.5rem !important; }
  .mt-sm-9 { margin-top: 10rem !important; }
  .mt-sm-10 { margin-top: 12.5rem !important; }
  .mb-sm-6 { margin-bottom: 4rem !important; }
  .mb-sm-7 { margin-bottom: 5rem !important; }
  .mb-sm-8 { margin-bottom: 7.5rem !important; }
  .mb-sm-9 { margin-bottom: 10rem !important; }
  .mb-sm-10 { margin-bottom: 12.5rem !important; }
  .ms-sm-6 { margin-left: 4rem !important; }
  .ms-sm-7 { margin-left: 5rem !important; }
  .ms-sm-8 { margin-left: 7.5rem !important; }
  .ms-sm-9 { margin-left: 10rem !important; }
  .ms-sm-10 { margin-left: 12.5rem !important; }
  .me-sm-6 { margin-right: 4rem !important; }
  .me-sm-7 { margin-right: 5rem !important; }
  .me-sm-8 { margin-right: 7.5rem !important; }
  .me-sm-9 { margin-right: 10rem !important; }
  .me-sm-10 { margin-right: 12.5rem !important; }
  .mx-sm-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
  .mx-sm-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
  .mx-sm-8 { margin-left: 7.5rem !important; margin-right: 7.5rem !important; }
  .mx-sm-9 { margin-left: 10rem !important; margin-right: 10rem !important; }
  .mx-sm-10 { margin-left: 12.5rem !important; margin-right: 12.5rem !important; }
  .my-sm-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
  .my-sm-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
  .my-sm-8 { margin-top: 7.5rem !important; margin-bottom: 7.5rem !important; }
  .my-sm-9 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
  .my-sm-10 { margin-top: 12.5rem !important; margin-bottom: 12.5rem !important; }
  .p-sm-6 { padding-top: 4rem !important; padding-right: 4rem !important; padding-bottom: 4rem !important; padding-left: 4rem !important; }
  .p-sm-7 { padding-top: 5rem !important; padding-right: 5rem !important; padding-bottom: 5rem !important; padding-left: 5rem !important; }
  .p-sm-8 { padding-top: 7.5rem !important; padding-right: 7.5rem !important; padding-bottom: 7.5rem !important; padding-left: 7.5rem !important; }
  .p-sm-9 { padding-top: 10rem !important; padding-right: 10rem !important; padding-bottom: 10rem !important; padding-left: 10rem !important; }
  .p-sm-10 { padding-top: 12.5rem !important; padding-right: 12.5rem !important; padding-bottom: 12.5rem !important; padding-left: 12.5rem !important; }
  .pt-sm-6 { padding-top: 4rem !important; }
  .pt-sm-7 { padding-top: 5rem !important; }
  .pt-sm-8 { padding-top: 7.5rem !important; }
  .pt-sm-9 { padding-top: 10rem !important; }
  .pt-sm-10 { padding-top: 12.5rem !important; }
  .pb-sm-6 { padding-bottom: 4rem !important; }
  .pb-sm-7 { padding-bottom: 5rem !important; }
  .pb-sm-8 { padding-bottom: 7.5rem !important; }
  .pb-sm-9 { padding-bottom: 10rem !important; }
  .pb-sm-10 { padding-bottom: 12.5rem !important; }
  .ps-sm-6 { padding-left: 4rem !important; }
  .ps-sm-7 { padding-left: 5rem !important; }
  .ps-sm-8 { padding-left: 7.5rem !important; }
  .ps-sm-9 { padding-left: 10rem !important; }
  .ps-sm-10 { padding-left: 12.5rem !important; }
  .pe-sm-6 { padding-right: 4rem !important; }
  .pe-sm-7 { padding-right: 5rem !important; }
  .pe-sm-8 { padding-right: 7.5rem !important; }
  .pe-sm-9 { padding-right: 10rem !important; }
  .pe-sm-10 { padding-right: 12.5rem !important; }
  .px-sm-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
  .px-sm-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
  .px-sm-8 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
  .px-sm-9 { padding-left: 10rem !important; padding-right: 10rem !important; }
  .px-sm-10 { padding-left: 12.5rem !important; padding-right: 12.5rem !important; }
  .py-sm-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-sm-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .py-sm-8 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
  .py-sm-9 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
  .py-sm-10 { padding-top: 12.5rem !important; padding-bottom: 12.5rem !important; }
}

@media (min-width: 768px) {
  .m-md-6 { margin-top: 4rem !important; margin-right: 4rem !important; margin-bottom: 4rem !important; margin-left: 4rem !important; }
  .m-md-7 { margin-top: 5rem !important; margin-right: 5rem !important; margin-bottom: 5rem !important; margin-left: 5rem !important; }
  .m-md-8 { margin-top: 7.5rem !important; margin-right: 7.5rem !important; margin-bottom: 7.5rem !important; margin-left: 7.5rem !important; }
  .m-md-9 { margin-top: 10rem !important; margin-right: 10rem !important; margin-bottom: 10rem !important; margin-left: 10rem !important; }
  .m-md-10 { margin-top: 12.5rem !important; margin-right: 12.5rem !important; margin-bottom: 12.5rem !important; margin-left: 12.5rem !important; }
  .mt-md-6 { margin-top: 4rem !important; }
  .mt-md-7 { margin-top: 5rem !important; }
  .mt-md-8 { margin-top: 7.5rem !important; }
  .mt-md-9 { margin-top: 10rem !important; }
  .mt-md-10 { margin-top: 12.5rem !important; }
  .mb-md-6 { margin-bottom: 4rem !important; }
  .mb-md-7 { margin-bottom: 5rem !important; }
  .mb-md-8 { margin-bottom: 7.5rem !important; }
  .mb-md-9 { margin-bottom: 10rem !important; }
  .mb-md-10 { margin-bottom: 12.5rem !important; }
  .ms-md-6 { margin-left: 4rem !important; }
  .ms-md-7 { margin-left: 5rem !important; }
  .ms-md-8 { margin-left: 7.5rem !important; }
  .ms-md-9 { margin-left: 10rem !important; }
  .ms-md-10 { margin-left: 12.5rem !important; }
  .me-md-6 { margin-right: 4rem !important; }
  .me-md-7 { margin-right: 5rem !important; }
  .me-md-8 { margin-right: 7.5rem !important; }
  .me-md-9 { margin-right: 10rem !important; }
  .me-md-10 { margin-right: 12.5rem !important; }
  .mx-md-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
  .mx-md-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
  .mx-md-8 { margin-left: 7.5rem !important; margin-right: 7.5rem !important; }
  .mx-md-9 { margin-left: 10rem !important; margin-right: 10rem !important; }
  .mx-md-10 { margin-left: 12.5rem !important; margin-right: 12.5rem !important; }
  .my-md-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
  .my-md-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
  .my-md-8 { margin-top: 7.5rem !important; margin-bottom: 7.5rem !important; }
  .my-md-9 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
  .my-md-10 { margin-top: 12.5rem !important; margin-bottom: 12.5rem !important; }
  .p-md-6 { padding-top: 4rem !important; padding-right: 4rem !important; padding-bottom: 4rem !important; padding-left: 4rem !important; }
  .p-md-7 { padding-top: 5rem !important; padding-right: 5rem !important; padding-bottom: 5rem !important; padding-left: 5rem !important; }
  .p-md-8 { padding-top: 7.5rem !important; padding-right: 7.5rem !important; padding-bottom: 7.5rem !important; padding-left: 7.5rem !important; }
  .p-md-9 { padding-top: 10rem !important; padding-right: 10rem !important; padding-bottom: 10rem !important; padding-left: 10rem !important; }
  .p-md-10 { padding-top: 12.5rem !important; padding-right: 12.5rem !important; padding-bottom: 12.5rem !important; padding-left: 12.5rem !important; }
  .pt-md-6 { padding-top: 4rem !important; }
  .pt-md-7 { padding-top: 5rem !important; }
  .pt-md-8 { padding-top: 7.5rem !important; }
  .pt-md-9 { padding-top: 10rem !important; }
  .pt-md-10 { padding-top: 12.5rem !important; }
  .pb-md-6 { padding-bottom: 4rem !important; }
  .pb-md-7 { padding-bottom: 5rem !important; }
  .pb-md-8 { padding-bottom: 7.5rem !important; }
  .pb-md-9 { padding-bottom: 10rem !important; }
  .pb-md-10 { padding-bottom: 12.5rem !important; }
  .ps-md-6 { padding-left: 4rem !important; }
  .ps-md-7 { padding-left: 5rem !important; }
  .ps-md-8 { padding-left: 7.5rem !important; }
  .ps-md-9 { padding-left: 10rem !important; }
  .ps-md-10 { padding-left: 12.5rem !important; }
  .pe-md-6 { padding-right: 4rem !important; }
  .pe-md-7 { padding-right: 5rem !important; }
  .pe-md-8 { padding-right: 7.5rem !important; }
  .pe-md-9 { padding-right: 10rem !important; }
  .pe-md-10 { padding-right: 12.5rem !important; }
  .px-md-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
  .px-md-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
  .px-md-8 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
  .px-md-9 { padding-left: 10rem !important; padding-right: 10rem !important; }
  .px-md-10 { padding-left: 12.5rem !important; padding-right: 12.5rem !important; }
  .py-md-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-md-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .py-md-8 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
  .py-md-9 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
  .py-md-10 { padding-top: 12.5rem !important; padding-bottom: 12.5rem !important; }
}

@media (min-width: 992px) {
  .m-lg-6 { margin-top: 4rem !important; margin-right: 4rem !important; margin-bottom: 4rem !important; margin-left: 4rem !important; }
  .m-lg-7 { margin-top: 5rem !important; margin-right: 5rem !important; margin-bottom: 5rem !important; margin-left: 5rem !important; }
  .m-lg-8 { margin-top: 7.5rem !important; margin-right: 7.5rem !important; margin-bottom: 7.5rem !important; margin-left: 7.5rem !important; }
  .m-lg-9 { margin-top: 10rem !important; margin-right: 10rem !important; margin-bottom: 10rem !important; margin-left: 10rem !important; }
  .m-lg-10 { margin-top: 12.5rem !important; margin-right: 12.5rem !important; margin-bottom: 12.5rem !important; margin-left: 12.5rem !important; }
  .mt-lg-6 { margin-top: 4rem !important; }
  .mt-lg-7 { margin-top: 5rem !important; }
  .mt-lg-8 { margin-top: 7.5rem !important; }
  .mt-lg-9 { margin-top: 10rem !important; }
  .mt-lg-10 { margin-top: 12.5rem !important; }
  .mb-lg-6 { margin-bottom: 4rem !important; }
  .mb-lg-7 { margin-bottom: 5rem !important; }
  .mb-lg-8 { margin-bottom: 7.5rem !important; }
  .mb-lg-9 { margin-bottom: 10rem !important; }
  .mb-lg-10 { margin-bottom: 12.5rem !important; }
  .ms-lg-6 { margin-left: 4rem !important; }
  .ms-lg-7 { margin-left: 5rem !important; }
  .ms-lg-8 { margin-left: 7.5rem !important; }
  .ms-lg-9 { margin-left: 10rem !important; }
  .ms-lg-10 { margin-left: 12.5rem !important; }
  .me-lg-6 { margin-right: 4rem !important; }
  .me-lg-7 { margin-right: 5rem !important; }
  .me-lg-8 { margin-right: 7.5rem !important; }
  .me-lg-9 { margin-right: 10rem !important; }
  .me-lg-10 { margin-right: 12.5rem !important; }
  .mx-lg-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
  .mx-lg-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
  .mx-lg-8 { margin-left: 7.5rem !important; margin-right: 7.5rem !important; }
  .mx-lg-9 { margin-left: 10rem !important; margin-right: 10rem !important; }
  .mx-lg-10 { margin-left: 12.5rem !important; margin-right: 12.5rem !important; }
  .my-lg-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
  .my-lg-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
  .my-lg-8 { margin-top: 7.5rem !important; margin-bottom: 7.5rem !important; }
  .my-lg-9 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
  .my-lg-10 { margin-top: 12.5rem !important; margin-bottom: 12.5rem !important; }
  .p-lg-6 { padding-top: 4rem !important; padding-right: 4rem !important; padding-bottom: 4rem !important; padding-left: 4rem !important; }
  .p-lg-7 { padding-top: 5rem !important; padding-right: 5rem !important; padding-bottom: 5rem !important; padding-left: 5rem !important; }
  .p-lg-8 { padding-top: 7.5rem !important; padding-right: 7.5rem !important; padding-bottom: 7.5rem !important; padding-left: 7.5rem !important; }
  .p-lg-9 { padding-top: 10rem !important; padding-right: 10rem !important; padding-bottom: 10rem !important; padding-left: 10rem !important; }
  .p-lg-10 { padding-top: 12.5rem !important; padding-right: 12.5rem !important; padding-bottom: 12.5rem !important; padding-left: 12.5rem !important; }
  .pt-lg-6 { padding-top: 4rem !important; }
  .pt-lg-7 { padding-top: 5rem !important; }
  .pt-lg-8 { padding-top: 7.5rem !important; }
  .pt-lg-9 { padding-top: 10rem !important; }
  .pt-lg-10 { padding-top: 12.5rem !important; }
  .pb-lg-6 { padding-bottom: 4rem !important; }
  .pb-lg-7 { padding-bottom: 5rem !important; }
  .pb-lg-8 { padding-bottom: 7.5rem !important; }
  .pb-lg-9 { padding-bottom: 10rem !important; }
  .pb-lg-10 { padding-bottom: 12.5rem !important; }
  .ps-lg-6 { padding-left: 4rem !important; }
  .ps-lg-7 { padding-left: 5rem !important; }
  .ps-lg-8 { padding-left: 7.5rem !important; }
  .ps-lg-9 { padding-left: 10rem !important; }
  .ps-lg-10 { padding-left: 12.5rem !important; }
  .pe-lg-6 { padding-right: 4rem !important; }
  .pe-lg-7 { padding-right: 5rem !important; }
  .pe-lg-8 { padding-right: 7.5rem !important; }
  .pe-lg-9 { padding-right: 10rem !important; }
  .pe-lg-10 { padding-right: 12.5rem !important; }
  .px-lg-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
  .px-lg-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
  .px-lg-8 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
  .px-lg-9 { padding-left: 10rem !important; padding-right: 10rem !important; }
  .px-lg-10 { padding-left: 12.5rem !important; padding-right: 12.5rem !important; }
  .py-lg-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-lg-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .py-lg-8 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
  .py-lg-9 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
  .py-lg-10 { padding-top: 12.5rem !important; padding-bottom: 12.5rem !important; }
}

@media (min-width: 1200px) {
  .m-xl-6 { margin-top: 4rem !important; margin-right: 4rem !important; margin-bottom: 4rem !important; margin-left: 4rem !important; }
  .m-xl-7 { margin-top: 5rem !important; margin-right: 5rem !important; margin-bottom: 5rem !important; margin-left: 5rem !important; }
  .m-xl-8 { margin-top: 7.5rem !important; margin-right: 7.5rem !important; margin-bottom: 7.5rem !important; margin-left: 7.5rem !important; }
  .m-xl-9 { margin-top: 10rem !important; margin-right: 10rem !important; margin-bottom: 10rem !important; margin-left: 10rem !important; }
  .m-xl-10 { margin-top: 12.5rem !important; margin-right: 12.5rem !important; margin-bottom: 12.5rem !important; margin-left: 12.5rem !important; }
  .mt-xl-6 { margin-top: 4rem !important; }
  .mt-xl-7 { margin-top: 5rem !important; }
  .mt-xl-8 { margin-top: 7.5rem !important; }
  .mt-xl-9 { margin-top: 10rem !important; }
  .mt-xl-10 { margin-top: 12.5rem !important; }
  .mb-xl-6 { margin-bottom: 4rem !important; }
  .mb-xl-7 { margin-bottom: 5rem !important; }
  .mb-xl-8 { margin-bottom: 7.5rem !important; }
  .mb-xl-9 { margin-bottom: 10rem !important; }
  .mb-xl-10 { margin-bottom: 12.5rem !important; }
  .ms-xl-6 { margin-left: 4rem !important; }
  .ms-xl-7 { margin-left: 5rem !important; }
  .ms-xl-8 { margin-left: 7.5rem !important; }
  .ms-xl-9 { margin-left: 10rem !important; }
  .ms-xl-10 { margin-left: 12.5rem !important; }
  .me-xl-6 { margin-right: 4rem !important; }
  .me-xl-7 { margin-right: 5rem !important; }
  .me-xl-8 { margin-right: 7.5rem !important; }
  .me-xl-9 { margin-right: 10rem !important; }
  .me-xl-10 { margin-right: 12.5rem !important; }
  .mx-xl-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
  .mx-xl-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
  .mx-xl-8 { margin-left: 7.5rem !important; margin-right: 7.5rem !important; }
  .mx-xl-9 { margin-left: 10rem !important; margin-right: 10rem !important; }
  .mx-xl-10 { margin-left: 12.5rem !important; margin-right: 12.5rem !important; }
  .my-xl-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
  .my-xl-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
  .my-xl-8 { margin-top: 7.5rem !important; margin-bottom: 7.5rem !important; }
  .my-xl-9 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
  .my-xl-10 { margin-top: 12.5rem !important; margin-bottom: 12.5rem !important; }
  .p-xl-6 { padding-top: 4rem !important; padding-right: 4rem !important; padding-bottom: 4rem !important; padding-left: 4rem !important; }
  .p-xl-7 { padding-top: 5rem !important; padding-right: 5rem !important; padding-bottom: 5rem !important; padding-left: 5rem !important; }
  .p-xl-8 { padding-top: 7.5rem !important; padding-right: 7.5rem !important; padding-bottom: 7.5rem !important; padding-left: 7.5rem !important; }
  .p-xl-9 { padding-top: 10rem !important; padding-right: 10rem !important; padding-bottom: 10rem !important; padding-left: 10rem !important; }
  .p-xl-10 { padding-top: 12.5rem !important; padding-right: 12.5rem !important; padding-bottom: 12.5rem !important; padding-left: 12.5rem !important; }
  .pt-xl-6 { padding-top: 4rem !important; }
  .pt-xl-7 { padding-top: 5rem !important; }
  .pt-xl-8 { padding-top: 7.5rem !important; }
  .pt-xl-9 { padding-top: 10rem !important; }
  .pt-xl-10 { padding-top: 12.5rem !important; }
  .pb-xl-6 { padding-bottom: 4rem !important; }
  .pb-xl-7 { padding-bottom: 5rem !important; }
  .pb-xl-8 { padding-bottom: 7.5rem !important; }
  .pb-xl-9 { padding-bottom: 10rem !important; }
  .pb-xl-10 { padding-bottom: 12.5rem !important; }
  .ps-xl-6 { padding-left: 4rem !important; }
  .ps-xl-7 { padding-left: 5rem !important; }
  .ps-xl-8 { padding-left: 7.5rem !important; }
  .ps-xl-9 { padding-left: 10rem !important; }
  .ps-xl-10 { padding-left: 12.5rem !important; }
  .pe-xl-6 { padding-right: 4rem !important; }
  .pe-xl-7 { padding-right: 5rem !important; }
  .pe-xl-8 { padding-right: 7.5rem !important; }
  .pe-xl-9 { padding-right: 10rem !important; }
  .pe-xl-10 { padding-right: 12.5rem !important; }
  .px-xl-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
  .px-xl-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
  .px-xl-8 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
  .px-xl-9 { padding-left: 10rem !important; padding-right: 10rem !important; }
  .px-xl-10 { padding-left: 12.5rem !important; padding-right: 12.5rem !important; }
  .py-xl-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-xl-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .py-xl-8 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
  .py-xl-9 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
  .py-xl-10 { padding-top: 12.5rem !important; padding-bottom: 12.5rem !important; }
}

@media (min-width: 1400px) {
  .m-xxl-6 { margin-top: 4rem !important; margin-right: 4rem !important; margin-bottom: 4rem !important; margin-left: 4rem !important; }
  .m-xxl-7 { margin-top: 5rem !important; margin-right: 5rem !important; margin-bottom: 5rem !important; margin-left: 5rem !important; }
  .m-xxl-8 { margin-top: 7.5rem !important; margin-right: 7.5rem !important; margin-bottom: 7.5rem !important; margin-left: 7.5rem !important; }
  .m-xxl-9 { margin-top: 10rem !important; margin-right: 10rem !important; margin-bottom: 10rem !important; margin-left: 10rem !important; }
  .m-xxl-10 { margin-top: 12.5rem !important; margin-right: 12.5rem !important; margin-bottom: 12.5rem !important; margin-left: 12.5rem !important; }
  .mt-xxl-6 { margin-top: 4rem !important; }
  .mt-xxl-7 { margin-top: 5rem !important; }
  .mt-xxl-8 { margin-top: 7.5rem !important; }
  .mt-xxl-9 { margin-top: 10rem !important; }
  .mt-xxl-10 { margin-top: 12.5rem !important; }
  .mb-xxl-6 { margin-bottom: 4rem !important; }
  .mb-xxl-7 { margin-bottom: 5rem !important; }
  .mb-xxl-8 { margin-bottom: 7.5rem !important; }
  .mb-xxl-9 { margin-bottom: 10rem !important; }
  .mb-xxl-10 { margin-bottom: 12.5rem !important; }
  .ms-xxl-6 { margin-left: 4rem !important; }
  .ms-xxl-7 { margin-left: 5rem !important; }
  .ms-xxl-8 { margin-left: 7.5rem !important; }
  .ms-xxl-9 { margin-left: 10rem !important; }
  .ms-xxl-10 { margin-left: 12.5rem !important; }
  .me-xxl-6 { margin-right: 4rem !important; }
  .me-xxl-7 { margin-right: 5rem !important; }
  .me-xxl-8 { margin-right: 7.5rem !important; }
  .me-xxl-9 { margin-right: 10rem !important; }
  .me-xxl-10 { margin-right: 12.5rem !important; }
  .mx-xxl-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
  .mx-xxl-7 { margin-left: 5rem !important; margin-right: 5rem !important; }
  .mx-xxl-8 { margin-left: 7.5rem !important; margin-right: 7.5rem !important; }
  .mx-xxl-9 { margin-left: 10rem !important; margin-right: 10rem !important; }
  .mx-xxl-10 { margin-left: 12.5rem !important; margin-right: 12.5rem !important; }
  .my-xxl-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
  .my-xxl-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
  .my-xxl-8 { margin-top: 7.5rem !important; margin-bottom: 7.5rem !important; }
  .my-xxl-9 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
  .my-xxl-10 { margin-top: 12.5rem !important; margin-bottom: 12.5rem !important; }
  .p-xxl-6 { padding-top: 4rem !important; padding-right: 4rem !important; padding-bottom: 4rem !important; padding-left: 4rem !important; }
  .p-xxl-7 { padding-top: 5rem !important; padding-right: 5rem !important; padding-bottom: 5rem !important; padding-left: 5rem !important; }
  .p-xxl-8 { padding-top: 7.5rem !important; padding-right: 7.5rem !important; padding-bottom: 7.5rem !important; padding-left: 7.5rem !important; }
  .p-xxl-9 { padding-top: 10rem !important; padding-right: 10rem !important; padding-bottom: 10rem !important; padding-left: 10rem !important; }
  .p-xxl-10 { padding-top: 12.5rem !important; padding-right: 12.5rem !important; padding-bottom: 12.5rem !important; padding-left: 12.5rem !important; }
  .pt-xxl-6 { padding-top: 4rem !important; }
  .pt-xxl-7 { padding-top: 5rem !important; }
  .pt-xxl-8 { padding-top: 7.5rem !important; }
  .pt-xxl-9 { padding-top: 10rem !important; }
  .pt-xxl-10 { padding-top: 12.5rem !important; }
  .pb-xxl-6 { padding-bottom: 4rem !important; }
  .pb-xxl-7 { padding-bottom: 5rem !important; }
  .pb-xxl-8 { padding-bottom: 7.5rem !important; }
  .pb-xxl-9 { padding-bottom: 10rem !important; }
  .pb-xxl-10 { padding-bottom: 12.5rem !important; }
  .ps-xxl-6 { padding-left: 4rem !important; }
  .ps-xxl-7 { padding-left: 5rem !important; }
  .ps-xxl-8 { padding-left: 7.5rem !important; }
  .ps-xxl-9 { padding-left: 10rem !important; }
  .ps-xxl-10 { padding-left: 12.5rem !important; }
  .pe-xxl-6 { padding-right: 4rem !important; }
  .pe-xxl-7 { padding-right: 5rem !important; }
  .pe-xxl-8 { padding-right: 7.5rem !important; }
  .pe-xxl-9 { padding-right: 10rem !important; }
  .pe-xxl-10 { padding-right: 12.5rem !important; }
  .px-xxl-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
  .px-xxl-7 { padding-left: 5rem !important; padding-right: 5rem !important; }
  .px-xxl-8 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; }
  .px-xxl-9 { padding-left: 10rem !important; padding-right: 10rem !important; }
  .px-xxl-10 { padding-left: 12.5rem !important; padding-right: 12.5rem !important; }
  .py-xxl-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-xxl-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .py-xxl-8 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }
  .py-xxl-9 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
  .py-xxl-10 { padding-top: 12.5rem !important; padding-bottom: 12.5rem !important; }
}

/* ---- Type and colour utilities --------------------------------------- */

  .ls-3 { letter-spacing: 2px !important; }

  .rounded-capsule { border-radius: 3.125rem !important; }

/* Muted text at two levels, keyed to bootstrap's own greys. */
  .text-700 { color: var(--bs-gray-700) !important; }
  .text-800 { color: var(--bs-gray-800) !important; }

/* As tall as the viewport below the navbar, whose height is measured into
 * --tcup-top-nav-height at runtime. */
  .h-full { min-height: calc(100vh - var(--tcup-top-nav-height)) !important; }


/* ---- The logo --------------------------------------------------------
 *
 * The logo goes out at whatever width the site asked for, which below the
 * expand breakpoint is wider than the bar it sits in. There the top line
 * is the logo and the toggler, and a logo leaving no room for the toggler
 * puts it on a line of its own. Sizing the brand from nothing and letting
 * it grow instead means it claims what is left once the toggler has its
 * width, so the logo is as wide as it can be at any screen size. The
 * min-width is what permits the shrink: a flex item won't go narrower
 * than its own contents until it is told it may.
 *
 * All of it stays inside the media query. Capping the image at the width
 * of the brand takes away the intrinsic width that was keeping the brand
 * from shrinking, so at full width the open menu beside it - which asks
 * for the whole container - would squeeze the logo smaller instead.
 */
@media (max-width: 991.98px) {
  .navbar-brand {
    flex: 1 1 0;
    min-width: 0;
  }

  .navbar-brand img {
    max-width: 100%;
    height: auto;
  }
}

/* ---- Centred logo ----------------------------------------------------
 *
 * Set by _header(logocentre=True). Takes the logo out of the flow so it
 * sits in the middle of the bar with the menu items to either side of it,
 * which needs the width to be worth doing - below lg it stays where
 * bootstrap puts it.
 */
@media (min-width: 992px) {
  .navbar-brand-centre {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Block, so the logo is the whole of its link. Left inline it sits on a
   * text baseline, which leaves descender space beneath it - the link is
   * then taller than the logo and centring the link sits the logo high. */
  .navbar-brand-centre img {
    display: block;
  }
}

/* A centred logo is out of the flow, so it contributes no height and the
 * bar collapses to whatever the menu items need. A site using logocentre
 * with a logo taller than that should give the bar a min-height. */

/* The navbar draws its own caret on a dropdown - the chevron span in
 * _navmenuitem - so bootstrap's CSS triangle would be a second one. */
.navbar-nav-top .dropdown-toggle::after {
  display: none;
}

/* ---- Contextual variants ---------------------------------------------
 *
 * A site colours the whole interface by retargeting two things per
 * variant and nothing else:
 *
 *     --bs-primary-rgb    the fill, as bootstrap's "r, g, b" triplet
 *     --tcup-on-primary   what sits on top of that fill
 *
 * Buttons, card headers and badges all follow from those. The button
 * states below are derived rather than stated, so a site never has to
 * write out a --bs-btn-* block of its own: bootstrap compiles .btn-primary
 * and friends from literal colours at build time, and retargeting
 * --bs-primary reaches none of them, which is the whole reason this
 * exists.
 *
 * --tcup-shift-* is a third knob, rarely wanted. It is the colour hover
 * and active move towards, and defaults to whichever of black or white is
 * further from the foreground - so a fill darkens under the pointer when
 * its text is light, and lightens when its text is dark. 'light' and
 * 'dark' invert that, having nowhere further to go, which is exactly what
 * bootstrap's own compiled buttons do.
 */

:root {
  --tcup-on-primary: #fff;
  --tcup-on-secondary: #fff;
  --tcup-on-success: #fff;
  --tcup-on-info: #000;
  --tcup-on-warning: #000;
  --tcup-on-danger: #fff;
  --tcup-on-light: #000;
  --tcup-on-dark: #fff;

  --tcup-shift-primary: #000;
  --tcup-shift-secondary: #000;
  --tcup-shift-success: #000;
  --tcup-shift-info: #fff;
  --tcup-shift-warning: #fff;
  --tcup-shift-danger: #000;
  --tcup-shift-light: #000;
  --tcup-shift-dark: #fff;
}

/* What each variant is made of. The three --tcup-btn-* values are picked
 * up by the shared block below, which is what saves restating the derived
 * states eight times over. */
.btn-primary {
  --tcup-btn-fill: rgb(var(--bs-primary-rgb));
  --tcup-btn-on: var(--tcup-on-primary);
  --tcup-btn-shift: var(--tcup-shift-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary {
  --tcup-btn-fill: rgb(var(--bs-secondary-rgb));
  --tcup-btn-on: var(--tcup-on-secondary);
  --tcup-btn-shift: var(--tcup-shift-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-success {
  --tcup-btn-fill: rgb(var(--bs-success-rgb));
  --tcup-btn-on: var(--tcup-on-success);
  --tcup-btn-shift: var(--tcup-shift-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

.btn-info {
  --tcup-btn-fill: rgb(var(--bs-info-rgb));
  --tcup-btn-on: var(--tcup-on-info);
  --tcup-btn-shift: var(--tcup-shift-info);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}

.btn-warning {
  --tcup-btn-fill: rgb(var(--bs-warning-rgb));
  --tcup-btn-on: var(--tcup-on-warning);
  --tcup-btn-shift: var(--tcup-shift-warning);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

.btn-danger {
  --tcup-btn-fill: rgb(var(--bs-danger-rgb));
  --tcup-btn-on: var(--tcup-on-danger);
  --tcup-btn-shift: var(--tcup-shift-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.btn-light {
  --tcup-btn-fill: rgb(var(--bs-light-rgb));
  --tcup-btn-on: var(--tcup-on-light);
  --tcup-btn-shift: var(--tcup-shift-light);
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
}

.btn-dark {
  --tcup-btn-fill: rgb(var(--bs-dark-rgb));
  --tcup-btn-on: var(--tcup-on-dark);
  --tcup-btn-shift: var(--tcup-shift-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

/* The derivation itself. The percentages are bootstrap's: it moves the
 * fill 15% for hover and 20% for active, and the border a further step
 * each time. Against the stock palette that reproduces its compiled
 * buttons exactly, bar two values a single count out in one channel.
 *
 * It does differ on the border of the three variants that lighten rather
 * than darken - info, warning and dark - where bootstrap moves the border
 * less than the fill instead of more. That is an inconsistency in its own
 * output rather than anything meaningful, and it is a hover state on a 1px
 * edge of near enough the same colour, so this keeps the one rule. */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-light,
.btn-dark {
  --bs-btn-color: var(--tcup-btn-on);
  --bs-btn-bg: var(--tcup-btn-fill);
  --bs-btn-border-color: var(--tcup-btn-fill);
  --bs-btn-hover-color: var(--tcup-btn-on);
  --bs-btn-hover-bg: color-mix(in srgb, var(--tcup-btn-fill) 85%,
                               var(--tcup-btn-shift));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--tcup-btn-fill) 80%,
                                         var(--tcup-btn-shift));
  --bs-btn-active-color: var(--tcup-btn-on);
  --bs-btn-active-bg: color-mix(in srgb, var(--tcup-btn-fill) 80%,
                                var(--tcup-btn-shift));
  --bs-btn-active-border-color: color-mix(in srgb, var(--tcup-btn-fill) 75%,
                                          var(--tcup-btn-shift));
  --bs-btn-disabled-color: var(--tcup-btn-on);
  --bs-btn-disabled-bg: var(--tcup-btn-fill);
  --bs-btn-disabled-border-color: var(--tcup-btn-fill);
}

/* The contextual backgrounds take their foreground from the same place, so
 * a site that says what goes on its primary fill has said it once, for
 * card headers and badges as well as for buttons. Bootstrap picks these
 * for contrast against its own palette and hardcodes them, which is no use
 * to a site that has changed the palette underneath. */
.text-bg-primary {
  color: var(--tcup-on-primary) !important;
}

.text-bg-secondary {
  color: var(--tcup-on-secondary) !important;
}

.text-bg-success {
  color: var(--tcup-on-success) !important;
}

.text-bg-info {
  color: var(--tcup-on-info) !important;
}

.text-bg-warning {
  color: var(--tcup-on-warning) !important;
}

.text-bg-danger {
  color: var(--tcup-on-danger) !important;
}

.text-bg-light {
  color: var(--tcup-on-light) !important;
}

.text-bg-dark {
  color: var(--tcup-on-dark) !important;
}