/*
  twr_theme.css  -  "brief" theme for stats.wedding.report

  Reskins the Bootstrap 5.3 site to match the market brief report: a navy ink
  scale with one accent blue, Inter Tight for headlines and body alike,
  hairline borders, soft corners, no shadows.

  Sections 1 to 13 are the same rules as wedding.report/assets/css/twr_theme.css
  so the two sites look like one product; change them in both files together.
  Sections 14 on are for this site: the long data tables, the page callouts,
  and dark mode (header.cfm sets data-bs-theme="dark" from the darkmode cookie).

  Loaded from header.cfm only when the theme flag is on (?theme=brief, then a
  cookie). No template classes change: everything here hangs off the Bootstrap
  and statcard classes the pages already use.

  Some selectors start with :root or html on purpose. header.cfm has an inline
  body rule, and several pages load their own css (statcard.css, page <style>
  blocks) after this file, so the theme has to win on specificity, not order.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');


/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
  /* the report palette */
  --twr-navy: #10233f;
  --twr-ink: #153052;
  --twr-body: #344a67;
  --twr-muted: #5c6c80;
  --twr-faint: #91a1b4;
  --twr-rule: #d6e3f4;
  --twr-blue: #1769ff;
  --twr-tint: #eef4ff;
  --twr-risk: #a34223;
  --twr-opp: #0a6f54;

  /* additions the web needs that the report did not */
  --twr-blue-dark: #0f55d6;      /* hover */
  --twr-blue-darker: #0c47b5;    /* pressed */
  --twr-amber: #a87400;          /* warning */
  --twr-field: #b9c8dc;          /* input borders: the rule color is too faint to find a field */
  --twr-track: #e4ecf7;          /* progress and range tracks */
  --twr-opp-tint: #f1f8f5;
  --twr-opp-rule: #cfe6dc;
  --twr-risk-tint: #fbf3f0;
  --twr-risk-rule: #efd8cf;
  --twr-amber-tint: #fbf6e9;
  --twr-amber-rule: #ecdfbb;
  --twr-neutral-tint: #f3f6fa;
  --twr-cover: linear-gradient(160deg, #0d2244 0%, #10284d 55%, #1646a0 100%);

  --twr-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* bold text inside copy reads navy; dark panels switch this back off */
  --twr-strong: var(--twr-navy);

  /* Bootstrap: brand colors */
  --bs-blue: #1769ff;
  --bs-primary: #1769ff;
  --bs-primary-rgb: 23, 105, 255;
  --bs-secondary: #5c6c80;
  --bs-secondary-rgb: 92, 108, 128;
  --bs-success: #0a6f54;
  --bs-success-rgb: 10, 111, 84;
  --bs-info: #153052;
  --bs-info-rgb: 21, 48, 82;
  --bs-warning: #a87400;
  --bs-warning-rgb: 168, 116, 0;
  --bs-danger: #a34223;
  --bs-danger-rgb: 163, 66, 35;
  --bs-light: #eef4ff;
  --bs-light-rgb: 238, 244, 255;
  --bs-dark: #10233f;
  --bs-dark-rgb: 16, 35, 63;

  --bs-primary-text-emphasis: #0c47b5;
  --bs-primary-bg-subtle: #eef4ff;
  --bs-primary-border-subtle: #c5d9fb;
  --bs-secondary-text-emphasis: #344a67;
  --bs-secondary-bg-subtle: #f3f6fa;
  --bs-secondary-border-subtle: #d6e3f4;
  --bs-success-text-emphasis: #0a6f54;
  --bs-success-bg-subtle: #f1f8f5;
  --bs-success-border-subtle: #cfe6dc;
  --bs-info-text-emphasis: #153052;
  --bs-info-bg-subtle: #eef4ff;
  --bs-info-border-subtle: #d6e3f4;
  --bs-warning-text-emphasis: #7a5500;
  --bs-warning-bg-subtle: #fbf6e9;
  --bs-warning-border-subtle: #ecdfbb;
  --bs-danger-text-emphasis: #a34223;
  --bs-danger-bg-subtle: #fbf3f0;
  --bs-danger-border-subtle: #efd8cf;
  --bs-light-text-emphasis: #5c6c80;
  --bs-light-bg-subtle: #f8fafe;
  --bs-light-border-subtle: #d6e3f4;
  --bs-dark-text-emphasis: #10233f;
  --bs-dark-bg-subtle: #e4ecf7;
  --bs-dark-border-subtle: #91a1b4;

  /* Bootstrap: body, text, surfaces */
  --bs-font-sans-serif: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: #344a67;
  --bs-body-color-rgb: 52, 74, 103;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #10233f;
  --bs-emphasis-color-rgb: 16, 35, 63;
  --bs-secondary-color: #5c6c80;
  --bs-secondary-color-rgb: 92, 108, 128;
  --bs-secondary-bg: #e4ecf7;
  --bs-secondary-bg-rgb: 228, 236, 247;
  --bs-tertiary-color: #91a1b4;
  --bs-tertiary-color-rgb: 145, 161, 180;
  --bs-tertiary-bg: #eef4ff;
  --bs-tertiary-bg-rgb: 238, 244, 255;
  --bs-heading-color: #10233f;
  --bs-link-color: #1769ff;
  --bs-link-color-rgb: 23, 105, 255;
  --bs-link-hover-color: #0c47b5;
  --bs-link-hover-color-rgb: 12, 71, 181;
  --bs-code-color: #153052;
  --bs-highlight-bg: #eef4ff;

  /* Bootstrap: hairlines, soft corners, no shadows */
  --bs-border-color: #d6e3f4;
  --bs-border-color-translucent: #d6e3f4;
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .5rem;
  --bs-border-radius-xl: .75rem;
  --bs-border-radius-xxl: 1rem;
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;
  --bs-gradient: none;
  --bs-focus-ring-color: rgba(23, 105, 255, .22);
  --bs-form-valid-color: #0a6f54;
  --bs-form-valid-border-color: #0a6f54;
  --bs-form-invalid-color: #a34223;
  --bs-form-invalid-border-color: #a34223;
}


/* ------------------------------------------------------------------
   2. Type
   ------------------------------------------------------------------ */
html body {
  font-family: var(--twr-sans);
  color: var(--twr-body);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* h1 to h3 and the display classes: same sans as the body, set tighter */
h1, h2, h3,
.h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7 {
  font-family: var(--twr-sans);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--bs-heading-color);
}

/* smaller headings are interface labels: sans. The class rule comes second so
   an h2 sized down with .h5 is treated as the label it looks like. */
h4, h5, h6 {
  font-family: var(--twr-sans);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.h4, .h5, .h6 {
  font-family: var(--twr-sans);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.lead {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.45;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

p > strong, p > b,
li > strong, li > b {
  color: var(--twr-strong);
}

hr {
  color: var(--twr-rule);
  opacity: 1;
}

.blockquote-footer {
  color: var(--twr-muted);
}

/* panels with their own dark fill: headings and bold follow the panel's text.
   currentColor, not inherit: inherit on a custom property means "use the
   parent's value of this property", which would still be navy. */
.text-white, .text-bg-primary, .text-bg-secondary, .text-bg-success, .text-bg-info,
.text-bg-danger, .text-bg-dark, .bg-dark, .bg-primary, .table-dark {
  --bs-heading-color: currentColor;
  --bs-card-title-color: currentColor;
  --twr-strong: currentColor;
}

/* the report's cover: navy running to blue */
.bg-dark, .card.text-bg-dark {
  background-image: var(--twr-cover);
}


/* ------------------------------------------------------------------
   3. Stat cards
   No fill, a 3px left rule, a large bold number in the rule's color, and
   the description under it as a small muted label. Each variant sets one
   color, --twr-stat, which the rule and the number both use.
   statcard.css loads after this file on some pages, hence :root.
   ------------------------------------------------------------------ */
:root .statcard {
  --twr-stat: var(--twr-blue);
  margin-bottom: .75rem;
  padding: .125rem 0 .125rem .875rem;
  color: var(--twr-body);
  background: none;
  border: 0;
  border-left: 3px solid var(--twr-stat);
  border-radius: 0;
}
:root .statcard.statcard-primary { --twr-stat: var(--twr-blue); }
:root .statcard.statcard-success { --twr-stat: var(--twr-opp); }
:root .statcard.statcard-danger  { --twr-stat: var(--twr-risk); }
:root .statcard.statcard-info    { --twr-stat: var(--twr-navy); }
:root .statcard.statcard-warning { --twr-stat: var(--twr-amber); }

:root .statcard .statcard-number {
  margin: 0;
  font-family: var(--twr-sans);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--twr-stat);
}

:root .statcard .statcard-desc {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--twr-muted);
}
:root .statcard .statcard-number + .statcard-desc,
:root .statcard .statcard-desc + .statcard-number {
  margin-top: .3rem;
}

/* business_compare uses stat cards with nothing in them as its color key.
   With no fill the key is the rule itself, set beside its label. 15px is the
   label's own inline padding. */
:root .statcard:not(:has(*)) {
  width: 0;
  margin: 15px 0;
  padding: 0;
}
@media (min-width: 576px) {
  :root .statcard:not(:has(*)) {
    margin-left: auto;
  }
}

:root .statcard .statcard-hr {
  margin-left: 0;
  margin-right: 0;
  border-top-color: var(--twr-rule);
}

/* delta arrows: statcard.css draws the triangle with a border in the current
   color, so setting the color is all it takes. Up is green, down is rust,
   inside a card or out. */
:root .delta-positive,
:root .statcard .delta-positive {
  font-weight: 700;
  color: var(--twr-opp);
}
:root .delta-negative,
:root .statcard .delta-negative {
  font-weight: 700;
  color: var(--twr-risk);
}


/* ------------------------------------------------------------------
   4. Shadows out, hairline frames in
   ------------------------------------------------------------------ */
.shadow, .shadow-sm, .shadow-lg {
  box-shadow: none !important;
  border: 1px solid var(--twr-rule);
}


/* ------------------------------------------------------------------
   5. Cards: a hairline frame
   ------------------------------------------------------------------ */
:root .card {
  --bs-card-bg: #fff;
  --bs-card-color: var(--twr-body);
  --bs-card-border-color: var(--twr-rule);
  --bs-card-border-width: 1px;
  --bs-card-border-radius: .5rem;
  --bs-card-inner-border-radius: calc(.5rem - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-title-color: var(--bs-heading-color);
  box-shadow: none;
}
.card.text-bg-dark {
  --bs-card-color: #d9e6f8;
}
.card-header, .card-footer {
  border-color: var(--twr-rule);
}


/* ------------------------------------------------------------------
   6. Alerts: the tinted callout with a left rule
   ------------------------------------------------------------------ */
:root .alert {
  --twr-alert-rule: var(--twr-blue);
  --bs-alert-bg: var(--twr-tint);
  --bs-alert-color: var(--twr-body);
  --bs-alert-link-color: var(--twr-blue);
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-padding-y: 1rem;
  border: 0;
  border-left: 3px solid var(--twr-alert-rule);
  border-radius: 0 .5rem .5rem 0;
}
:root .alert-success   { --twr-alert-rule: var(--twr-opp);   --bs-alert-bg: var(--twr-opp-tint); }
:root .alert-danger    { --twr-alert-rule: var(--twr-risk);  --bs-alert-bg: var(--twr-risk-tint); }
:root .alert-warning   { --twr-alert-rule: var(--twr-amber); --bs-alert-bg: var(--twr-amber-tint); }
:root .alert-secondary,
:root .alert-light     { --twr-alert-rule: var(--twr-faint); --bs-alert-bg: var(--twr-neutral-tint); }
:root .alert-dark      { --twr-alert-rule: var(--twr-navy);  --bs-alert-bg: var(--twr-neutral-tint); }
.alert-heading,
.alert strong, .alert b {
  color: var(--twr-navy);
}
.alert-heading {
  font-family: var(--twr-sans);
  font-weight: 700;
  letter-spacing: 0;
}


/* ------------------------------------------------------------------
   7. Tables: airy rows, small caps headers on a navy rule
   ------------------------------------------------------------------ */
:root .table {
  --bs-table-color: var(--twr-navy);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--twr-rule);
  --bs-table-striped-color: var(--twr-navy);
  --bs-table-striped-bg: #f6f9fe;
  --bs-table-hover-color: var(--twr-navy);
  --bs-table-hover-bg: var(--twr-tint);
  --bs-table-active-color: var(--twr-navy);
  --bs-table-active-bg: var(--twr-tint);
}
:root .table > :not(caption) > * > * {
  padding: .8rem .75rem;
}
:root .table > thead > tr > th {
  padding-top: .5rem;
  padding-bottom: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--twr-muted);
  border-bottom: 1px solid var(--twr-navy);
}
:root .table-sm > :not(caption) > * > * {
  padding: .45rem .5rem;
}
:root .table-dark {
  --bs-table-color: #d9e6f8;
  --bs-table-bg: var(--twr-navy);
  --bs-table-border-color: #34507a;
  --bs-table-striped-color: #d9e6f8;
  --bs-table-striped-bg: #152c4d;
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: #1a3459;
}
:root .table-dark > tr > th,
:root .table > thead.table-dark > tr > th,
:root .table-dark > thead > tr > th {
  color: #aebfd4;
  border-bottom-color: #34507a;
}


/* ------------------------------------------------------------------
   8. Badges: pills, tinted fill with the color in the text
   The bg-* and text-bg-* utilities are !important, so these are too.
   ------------------------------------------------------------------ */
.badge {
  --bs-badge-padding-x: .65em;
  --bs-badge-padding-y: .38em;
  --bs-badge-font-size: .7rem;
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: 50rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge.bg-primary,   .badge.text-bg-primary   { background-color: #dfeaff !important; color: var(--twr-blue) !important; }
.badge.bg-success,   .badge.text-bg-success   { background-color: #dff0e8 !important; color: var(--twr-opp) !important; }
.badge.bg-danger,    .badge.text-bg-danger    { background-color: #f6e1d9 !important; color: var(--twr-risk) !important; }
.badge.bg-warning,   .badge.text-bg-warning   { background-color: #f6ecd0 !important; color: #7a5500 !important; }
.badge.bg-info,      .badge.text-bg-info      { background-color: #e4ecf7 !important; color: var(--twr-ink) !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light,     .badge.text-bg-light     { background-color: #edf0f4 !important; color: var(--twr-muted) !important; }
.badge.bg-dark,      .badge.text-bg-dark      { background-color: var(--twr-navy) !important; color: #d9e6f8 !important; }


/* ------------------------------------------------------------------
   9. Buttons
   Bootstrap compiles the colors into each .btn-* class, so each variant
   gets its own set of --bs-btn-* values. Solid buttons stay solid; outline
   buttons fill with a tint on hover, not with the solid color.
   ------------------------------------------------------------------ */
.btn {
  --bs-btn-font-family: var(--twr-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-box-shadow: none;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1769ff;
  --bs-btn-border-color: #1769ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0f55d6;
  --bs-btn-hover-border-color: #0f55d6;
  --bs-btn-focus-shadow-rgb: 23, 105, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0c47b5;
  --bs-btn-active-border-color: #0c47b5;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1769ff;
  --bs-btn-disabled-border-color: #1769ff;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5c6c80;
  --bs-btn-border-color: #5c6c80;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #344a67;
  --bs-btn-hover-border-color: #344a67;
  --bs-btn-focus-shadow-rgb: 92, 108, 128;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #153052;
  --bs-btn-active-border-color: #153052;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5c6c80;
  --bs-btn-disabled-border-color: #5c6c80;
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0a6f54;
  --bs-btn-border-color: #0a6f54;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #085a44;
  --bs-btn-hover-border-color: #085a44;
  --bs-btn-focus-shadow-rgb: 10, 111, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #064a38;
  --bs-btn-active-border-color: #064a38;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0a6f54;
  --bs-btn-disabled-border-color: #0a6f54;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #a34223;
  --bs-btn-border-color: #a34223;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #88371d;
  --bs-btn-hover-border-color: #88371d;
  --bs-btn-focus-shadow-rgb: 163, 66, 35;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #722e18;
  --bs-btn-active-border-color: #722e18;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #a34223;
  --bs-btn-disabled-border-color: #a34223;
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #a87400;
  --bs-btn-border-color: #a87400;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8c6100;
  --bs-btn-hover-border-color: #8c6100;
  --bs-btn-focus-shadow-rgb: 168, 116, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7a5500;
  --bs-btn-active-border-color: #7a5500;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #a87400;
  --bs-btn-disabled-border-color: #a87400;
}
.btn-info, .btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #10233f;
  --bs-btn-border-color: #10233f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #153052;
  --bs-btn-hover-border-color: #153052;
  --bs-btn-focus-shadow-rgb: 16, 35, 63;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1c3d68;
  --bs-btn-active-border-color: #1c3d68;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #10233f;
  --bs-btn-disabled-border-color: #10233f;
}
.btn-light {
  --bs-btn-color: #10233f;
  --bs-btn-bg: #eef4ff;
  --bs-btn-border-color: #eef4ff;
  --bs-btn-hover-color: #10233f;
  --bs-btn-hover-bg: #dfeaff;
  --bs-btn-hover-border-color: #dfeaff;
  --bs-btn-focus-shadow-rgb: 23, 105, 255;
  --bs-btn-active-color: #10233f;
  --bs-btn-active-bg: #d6e3f4;
  --bs-btn-active-border-color: #d6e3f4;
  --bs-btn-disabled-color: #5c6c80;
  --bs-btn-disabled-bg: #eef4ff;
  --bs-btn-disabled-border-color: #eef4ff;
}
.btn-outline-primary {
  --bs-btn-color: #1769ff;
  --bs-btn-border-color: #1769ff;
  --bs-btn-hover-color: #0c47b5;
  --bs-btn-hover-bg: #eef4ff;
  --bs-btn-hover-border-color: #1769ff;
  --bs-btn-focus-shadow-rgb: 23, 105, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1769ff;
  --bs-btn-active-border-color: #1769ff;
  --bs-btn-disabled-color: #1769ff;
  --bs-btn-disabled-border-color: #1769ff;
}
.btn-outline-secondary, .btn-outline-dark, .btn-outline-info {
  --bs-btn-color: #344a67;
  --bs-btn-border-color: #b9c8dc;
  --bs-btn-hover-color: #10233f;
  --bs-btn-hover-bg: #eef4ff;
  --bs-btn-hover-border-color: #91a1b4;
  --bs-btn-focus-shadow-rgb: 92, 108, 128;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #153052;
  --bs-btn-active-border-color: #153052;
  --bs-btn-disabled-color: #91a1b4;
  --bs-btn-disabled-border-color: #d6e3f4;
}
.btn-outline-success {
  --bs-btn-color: #0a6f54;
  --bs-btn-border-color: #0a6f54;
  --bs-btn-hover-color: #0a6f54;
  --bs-btn-hover-bg: #f1f8f5;
  --bs-btn-hover-border-color: #0a6f54;
  --bs-btn-focus-shadow-rgb: 10, 111, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a6f54;
  --bs-btn-active-border-color: #0a6f54;
  --bs-btn-disabled-color: #0a6f54;
  --bs-btn-disabled-border-color: #0a6f54;
}
.btn-outline-danger {
  --bs-btn-color: #a34223;
  --bs-btn-border-color: #a34223;
  --bs-btn-hover-color: #a34223;
  --bs-btn-hover-bg: #fbf3f0;
  --bs-btn-hover-border-color: #a34223;
  --bs-btn-focus-shadow-rgb: 163, 66, 35;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a34223;
  --bs-btn-active-border-color: #a34223;
  --bs-btn-disabled-color: #a34223;
  --bs-btn-disabled-border-color: #a34223;
}
.btn-outline-warning {
  --bs-btn-color: #7a5500;
  --bs-btn-border-color: #a87400;
  --bs-btn-hover-color: #7a5500;
  --bs-btn-hover-bg: #fbf6e9;
  --bs-btn-hover-border-color: #a87400;
  --bs-btn-focus-shadow-rgb: 168, 116, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a87400;
  --bs-btn-active-border-color: #a87400;
  --bs-btn-disabled-color: #a87400;
  --bs-btn-disabled-border-color: #a87400;
}
.btn-link {
  --bs-btn-font-weight: 500;
}


/* ------------------------------------------------------------------
   10. Forms
   ------------------------------------------------------------------ */
.form-control, .form-select {
  color: var(--twr-navy);
  border-color: var(--twr-field);
}
.form-control::placeholder {
  color: #7a8ba1;
}
.form-control:focus, .form-select:focus {
  color: var(--twr-navy);
  border-color: var(--twr-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
}
.form-control:disabled, .form-select:disabled {
  background-color: var(--twr-neutral-tint);
}
.form-label {
  font-weight: 600;
  color: var(--twr-navy);
}
.form-text {
  color: var(--twr-muted);
}
.input-group-text {
  color: var(--twr-muted);
  background-color: var(--twr-tint);
  border-color: var(--twr-field);
}

/* signup_form.cfm sets the checked color in its own <style>, so :root */
:root .form-check-input {
  border-color: var(--twr-faint);
}
:root .form-check-input:checked {
  background-color: var(--twr-blue);
  border-color: var(--twr-blue);
}
:root .form-check-input:focus {
  border-color: var(--twr-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
}
.form-range::-webkit-slider-thumb { background-color: var(--twr-blue); }
.form-range::-moz-range-thumb { background-color: var(--twr-blue); }
.form-range::-webkit-slider-runnable-track { background-color: var(--twr-track); }
.form-range::-moz-range-track { background-color: var(--twr-track); }


/* ------------------------------------------------------------------
   11. Navbar, navs, dropdowns
   ------------------------------------------------------------------ */
.navbar {
  --bs-navbar-color: var(--twr-body);
  --bs-navbar-hover-color: var(--twr-navy);
  --bs-navbar-active-color: var(--twr-navy);
  --bs-navbar-brand-color: var(--twr-navy);
  --bs-navbar-toggler-border-color: var(--twr-rule);
  --bs-navbar-toggler-border-radius: .5rem;
  --bs-navbar-toggler-focus-width: 3px;
}
.nav-link {
  font-weight: 500;
}
.nav-pills {
  --bs-nav-pills-border-radius: .5rem;
  --bs-nav-pills-link-active-color: var(--twr-blue);
  --bs-nav-pills-link-active-bg: var(--twr-tint);
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--twr-rule);
  --bs-nav-tabs-link-hover-border-color: var(--twr-rule);
  --bs-nav-tabs-link-active-color: var(--twr-navy);
  --bs-nav-tabs-link-active-border-color: var(--twr-rule) var(--twr-rule) #fff;
}
.dropdown-menu {
  --bs-dropdown-color: var(--twr-body);
  --bs-dropdown-border-color: var(--twr-rule);
  --bs-dropdown-border-radius: .5rem;
  --bs-dropdown-inner-border-radius: calc(.5rem - 1px);
  --bs-dropdown-divider-bg: var(--twr-rule);
  --bs-dropdown-link-color: var(--twr-body);
  --bs-dropdown-link-hover-color: var(--twr-navy);
  --bs-dropdown-link-hover-bg: var(--twr-tint);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--twr-blue);
  --bs-dropdown-header-color: var(--twr-muted);
  box-shadow: none;
}
.dropdown-header {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--twr-faint);
  --bs-breadcrumb-item-active-color: var(--twr-muted);
  font-size: .875rem;
}
.pagination {
  --bs-pagination-color: var(--twr-blue);
  --bs-pagination-border-color: var(--twr-rule);
  --bs-pagination-hover-color: var(--twr-blue-darker);
  --bs-pagination-hover-bg: var(--twr-tint);
  --bs-pagination-hover-border-color: var(--twr-rule);
  --bs-pagination-focus-color: var(--twr-blue-darker);
  --bs-pagination-focus-bg: var(--twr-tint);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
  --bs-pagination-active-bg: var(--twr-blue);
  --bs-pagination-active-border-color: var(--twr-blue);
  --bs-pagination-disabled-color: var(--twr-faint);
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: var(--twr-rule);
}
.list-group {
  --bs-list-group-color: var(--twr-body);
  --bs-list-group-border-color: var(--twr-rule);
  --bs-list-group-action-hover-bg: var(--twr-tint);
  --bs-list-group-active-bg: var(--twr-blue);
  --bs-list-group-active-border-color: var(--twr-blue);
}


/* ------------------------------------------------------------------
   12. Accordions
   Two kinds on the site: Bootstrap's own, and <details class="accordion-item">
   on the statistics and cost estimator pages. Those pages color the open
   summary in a page <style>, so the second set needs the extra weight.
   ------------------------------------------------------------------ */
.accordion {
  --bs-accordion-color: var(--twr-body);
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: var(--twr-rule);
  --bs-accordion-border-radius: .5rem;
  --bs-accordion-inner-border-radius: calc(.5rem - 1px);
  --bs-accordion-btn-color: var(--twr-navy);
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6c80' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231769ff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
  --bs-accordion-active-color: var(--twr-navy);
  --bs-accordion-active-bg: var(--twr-tint);
}
/* the button sits inside an h2, which would hand it the heading tracking */
.accordion-header, .accordion-button {
  font-family: var(--twr-sans);
  letter-spacing: 0;
}
.accordion-button {
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--twr-rule);
}

:root details.accordion-item {
  overflow: hidden;
  color: var(--twr-body);
  background-color: #fff;
  border: 1px solid var(--twr-rule);
  border-radius: .5rem;
}
:root details.accordion-item > summary.accordion-header {
  font-family: var(--twr-sans);
  font-weight: 600;
  color: var(--twr-navy);
}
:root details.accordion-item > summary.accordion-header:hover {
  background-color: var(--twr-tint);
}
:root details.accordion-item[open] > summary.accordion-header {
  color: var(--twr-navy);
  background-color: var(--twr-tint);
  border-bottom: 1px solid var(--twr-rule);
}


/* ------------------------------------------------------------------
   13. Modals, progress, the rest
   ------------------------------------------------------------------ */
.modal {
  --bs-modal-color: var(--twr-body);
  --bs-modal-bg: #fff;
  --bs-modal-border-color: var(--twr-rule);
  --bs-modal-border-radius: .625rem;
  --bs-modal-inner-border-radius: calc(.625rem - 1px);
  --bs-modal-box-shadow: none;
  --bs-modal-header-border-color: var(--twr-rule);
  --bs-modal-footer-border-color: var(--twr-rule);
}
.modal-content {
  box-shadow: none;
}
.modal-title {
  font-family: var(--twr-sans);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--twr-navy);
}
.modal-backdrop {
  --bs-backdrop-bg: #10233f;
  --bs-backdrop-opacity: .45;
}
.offcanvas {
  --bs-offcanvas-border-color: var(--twr-rule);
  --bs-offcanvas-box-shadow: none;
}
.progress {
  --bs-progress-bg: var(--twr-track);
  --bs-progress-bar-bg: var(--twr-blue);
  --bs-progress-border-radius: 50rem;
}
.toast {
  --bs-toast-border-color: var(--twr-rule);
  --bs-toast-box-shadow: none;
}
.popover {
  --bs-popover-border-color: var(--twr-rule);
  --bs-popover-box-shadow: none;
}
.tooltip {
  --bs-tooltip-bg: var(--twr-navy);
}


/* ==================================================================
   stats.wedding.report only, from here down
   ================================================================== */

/* ------------------------------------------------------------------
   14. Data tables: the report's tighter rows
   These tables run to a hundred rows or more, so they take the report's
   .tight spacing (three quarters of the airy row). Figures are set in
   tabular numerals so the digits line up down a column.
   ------------------------------------------------------------------ */
:root .table {
  font-variant-numeric: tabular-nums lining-nums;
}
:root .table > :not(caption) > * > * {
  padding: .6rem .75rem;
}
:root .table > thead > tr > th {
  padding-top: .5rem;
  padding-bottom: .55rem;
  vertical-align: bottom;
}

/* my account lists transactions in a table with no thead: its first row is
   the header. A th with a colspan is a group row, not a header. */
:root .table > tbody > tr:first-child > th:not([colspan]) {
  padding-top: .5rem;
  padding-bottom: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: bottom;
  color: var(--twr-muted);
  border-bottom: 1px solid var(--twr-navy);
}

/* group rows inside a table body (a year, a category): a label with room
   above it, and no hover tint since it is not a row of data */
:root .table > tbody > tr > [colspan] {
  padding-top: 1.25rem;
  font-family: var(--twr-sans);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--twr-navy);
}
:root .table-hover > tbody > tr:hover > [colspan] {
  --bs-table-bg-state: transparent;
  --bs-table-color-state: var(--twr-navy);
}


/* ------------------------------------------------------------------
   15. Page callouts
   Data downloads and the upgrade panel draw .callout in a page <style>
   with Bootstrap's old blue. Only the rule color is changed here.
   ------------------------------------------------------------------ */
:root .callout,
:root .callout.callout-info {
  border-left-color: var(--twr-blue);
}


/* ------------------------------------------------------------------
   16. Dark mode: the report's cover palette
   Navy page, pale blue text, white headlines, the lighter accent blue.
   Most of the rules above read the --twr-* tokens, so re-pointing the
   tokens does most of the work. On a dark page --twr-navy means "the
   strongest ink", which is white. The rest of this section fixes the
   rules that name a color outright.
   ------------------------------------------------------------------ */
:root[data-bs-theme="dark"] {
  --twr-navy: #fff;
  --twr-ink: #e9f1fc;
  --twr-body: #d9e6f8;
  --twr-muted: #aebfd4;
  --twr-faint: #7f96b6;
  --twr-rule: #34507a;
  --twr-blue: #71a7ff;
  --twr-tint: #1a345d;
  --twr-risk: #f0a58c;
  --twr-opp: #5fd0ac;

  --twr-blue-dark: #8fbaff;      /* hover: lighter on a dark page */
  --twr-blue-darker: #a9caff;    /* pressed */
  --twr-amber: #e6b84f;
  --twr-field: #4a6690;
  --twr-track: #213e6b;
  --twr-opp-tint: #173750;
  --twr-opp-rule: #2a5f68;
  --twr-risk-tint: #28324d;
  --twr-risk-rule: #5c505d;
  --twr-amber-tint: #273445;
  --twr-amber-rule: #595648;
  --twr-neutral-tint: #1a2f50;

  /* dark only */
  --twr-page: #0d2244;
  --twr-page-end: #10284d;
  --twr-raised: #14305a;         /* menus and other surfaces above the page */
  --twr-on-accent: #0b1d3a;      /* text on a fill of the light accent */

  --bs-blue: #71a7ff;
  --bs-primary: #71a7ff;
  --bs-primary-rgb: 113, 167, 255;
  --bs-secondary: #aebfd4;
  --bs-secondary-rgb: 174, 191, 212;
  --bs-success: #5fd0ac;
  --bs-success-rgb: 95, 208, 172;
  --bs-info: #d9e6f8;
  --bs-info-rgb: 217, 230, 248;
  --bs-warning: #e6b84f;
  --bs-warning-rgb: 230, 184, 79;
  --bs-danger: #f0a58c;
  --bs-danger-rgb: 240, 165, 140;

  --bs-primary-text-emphasis: #a9caff;
  --bs-primary-bg-subtle: #1a345d;
  --bs-primary-border-subtle: #2f5594;
  --bs-secondary-text-emphasis: #d9e6f8;
  --bs-secondary-bg-subtle: #1a2f50;
  --bs-secondary-border-subtle: #34507a;
  --bs-success-text-emphasis: #5fd0ac;
  --bs-success-bg-subtle: #173750;
  --bs-success-border-subtle: #2a5f68;
  --bs-info-text-emphasis: #d9e6f8;
  --bs-info-bg-subtle: #1a345d;
  --bs-info-border-subtle: #34507a;
  --bs-warning-text-emphasis: #e6b84f;
  --bs-warning-bg-subtle: #273445;
  --bs-warning-border-subtle: #595648;
  --bs-danger-text-emphasis: #f0a58c;
  --bs-danger-bg-subtle: #28324d;
  --bs-danger-border-subtle: #5c505d;
  --bs-light-text-emphasis: #aebfd4;
  --bs-light-bg-subtle: #122a50;
  --bs-light-border-subtle: #34507a;
  --bs-dark-text-emphasis: #d9e6f8;
  --bs-dark-bg-subtle: #0a1a35;
  --bs-dark-border-subtle: #34507a;

  --bs-body-color: #d9e6f8;
  --bs-body-color-rgb: 217, 230, 248;
  --bs-body-bg: #0d2244;
  --bs-body-bg-rgb: 13, 34, 68;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #aebfd4;
  --bs-secondary-color-rgb: 174, 191, 212;
  --bs-secondary-bg: #1a345d;
  --bs-secondary-bg-rgb: 26, 52, 93;
  --bs-tertiary-color: #7f96b6;
  --bs-tertiary-color-rgb: 127, 150, 182;
  --bs-tertiary-bg: #122a50;
  --bs-tertiary-bg-rgb: 18, 42, 80;
  --bs-heading-color: #fff;
  --bs-link-color: #71a7ff;
  --bs-link-color-rgb: 113, 167, 255;
  --bs-link-hover-color: #a9caff;
  --bs-link-hover-color-rgb: 169, 202, 255;
  --bs-code-color: #d9e6f8;
  --bs-highlight-color: #fff;
  --bs-highlight-bg: #2f5594;

  --bs-border-color: #34507a;
  --bs-border-color-translucent: #34507a;
  --bs-focus-ring-color: rgba(113, 167, 255, .32);
  --bs-form-valid-color: #5fd0ac;
  --bs-form-valid-border-color: #5fd0ac;
  --bs-form-invalid-color: #f0a58c;
  --bs-form-invalid-border-color: #f0a58c;
}

/* the page: the cover's two navies, top to bottom */
html[data-bs-theme="dark"] {
  min-height: 100%;
}
html[data-bs-theme="dark"] body {
  background-color: var(--twr-page);
  background-image: linear-gradient(160deg, var(--twr-page) 0%, var(--twr-page-end) 100%);
}

/* surfaces */
[data-bs-theme="dark"] .card {
  --bs-card-bg: transparent;
}
[data-bs-theme="dark"] .alert-dark {
  --twr-alert-rule: var(--twr-faint);
}

/* tables: pale text, and a header rule that is not a white line */
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--twr-body);
  --bs-table-striped-color: var(--twr-body);
  --bs-table-striped-bg: #122a50;
}
[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table > tbody > tr:first-child > th:not([colspan]) {
  border-bottom-color: var(--twr-faint);
}
[data-bs-theme="dark"] .table-dark {
  --bs-table-bg: #0a1a35;
}

/* pills: a wash of the color, with the color in the text */
[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .text-bg-success,
[data-bs-theme="dark"] .text-bg-danger,
[data-bs-theme="dark"] .text-bg-warning,
[data-bs-theme="dark"] .text-bg-secondary {
  color: var(--twr-on-accent) !important;
}
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.text-bg-primary   { background-color: rgba(113, 167, 255, .2) !important;  color: #a9caff !important; }
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.text-bg-success   { background-color: rgba(95, 208, 172, .18) !important;  color: var(--twr-opp) !important; }
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.text-bg-danger    { background-color: rgba(240, 165, 140, .18) !important; color: var(--twr-risk) !important; }
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.text-bg-warning   { background-color: rgba(230, 184, 79, .18) !important;  color: var(--twr-amber) !important; }
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.text-bg-info      { background-color: rgba(217, 230, 248, .16) !important; color: var(--twr-body) !important; }
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.text-bg-secondary,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.text-bg-light     { background-color: rgba(174, 191, 212, .16) !important; color: var(--twr-muted) !important; }
[data-bs-theme="dark"] .badge.bg-dark,
[data-bs-theme="dark"] .badge.text-bg-dark      { background-color: #0a1a35 !important; color: var(--twr-body) !important; }

/* buttons: solid ones are a light fill with navy text. Each names its fill
   and its hover fill; the shared rule turns those into Bootstrap's set. */
[data-bs-theme="dark"] .btn-primary   { --twr-btn: #71a7ff; --twr-btn-hi: #8fbaff; --twr-btn-rgb: 113, 167, 255; }
[data-bs-theme="dark"] .btn-secondary { --twr-btn: #aebfd4; --twr-btn-hi: #c6d3e3; --twr-btn-rgb: 174, 191, 212; }
[data-bs-theme="dark"] .btn-success   { --twr-btn: #5fd0ac; --twr-btn-hi: #82dcbf; --twr-btn-rgb: 95, 208, 172; }
[data-bs-theme="dark"] .btn-danger    { --twr-btn: #f0a58c; --twr-btn-hi: #f4bba8; --twr-btn-rgb: 240, 165, 140; }
[data-bs-theme="dark"] .btn-warning   { --twr-btn: #e6b84f; --twr-btn-hi: #ecc874; --twr-btn-rgb: 230, 184, 79; }
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .btn-warning {
  --bs-btn-color: var(--twr-on-accent);
  --bs-btn-bg: var(--twr-btn);
  --bs-btn-border-color: var(--twr-btn);
  --bs-btn-hover-color: var(--twr-on-accent);
  --bs-btn-hover-bg: var(--twr-btn-hi);
  --bs-btn-hover-border-color: var(--twr-btn-hi);
  --bs-btn-focus-shadow-rgb: var(--twr-btn-rgb);
  --bs-btn-active-color: var(--twr-on-accent);
  --bs-btn-active-bg: var(--twr-btn-hi);
  --bs-btn-active-border-color: var(--twr-btn-hi);
  --bs-btn-disabled-color: var(--twr-on-accent);
  --bs-btn-disabled-bg: var(--twr-btn);
  --bs-btn-disabled-border-color: var(--twr-btn);
}
[data-bs-theme="dark"] .btn-info,
[data-bs-theme="dark"] .btn-dark,
[data-bs-theme="dark"] .btn-light {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1a345d;
  --bs-btn-border-color: #4a6690;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #21427a;
  --bs-btn-hover-border-color: #7f96b6;
  --bs-btn-focus-shadow-rgb: 113, 167, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2f5594;
  --bs-btn-active-border-color: #7f96b6;
  --bs-btn-disabled-color: #aebfd4;
  --bs-btn-disabled-bg: #1a345d;
  --bs-btn-disabled-border-color: #34507a;
}
[data-bs-theme="dark"] .btn-outline-primary { --twr-btn: #71a7ff; --twr-btn-hi: #a9caff; --twr-btn-rgb: 113, 167, 255; }
[data-bs-theme="dark"] .btn-outline-success { --twr-btn: #5fd0ac; --twr-btn-hi: #82dcbf; --twr-btn-rgb: 95, 208, 172; }
[data-bs-theme="dark"] .btn-outline-danger  { --twr-btn: #f0a58c; --twr-btn-hi: #f4bba8; --twr-btn-rgb: 240, 165, 140; }
[data-bs-theme="dark"] .btn-outline-warning { --twr-btn: #e6b84f; --twr-btn-hi: #ecc874; --twr-btn-rgb: 230, 184, 79; }
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-success,
[data-bs-theme="dark"] .btn-outline-danger,
[data-bs-theme="dark"] .btn-outline-warning {
  --bs-btn-color: var(--twr-btn);
  --bs-btn-border-color: var(--twr-btn);
  --bs-btn-hover-color: var(--twr-btn-hi);
  --bs-btn-hover-bg: rgba(var(--twr-btn-rgb), .14);
  --bs-btn-hover-border-color: var(--twr-btn);
  --bs-btn-focus-shadow-rgb: var(--twr-btn-rgb);
  --bs-btn-active-color: var(--twr-on-accent);
  --bs-btn-active-bg: var(--twr-btn);
  --bs-btn-active-border-color: var(--twr-btn);
  --bs-btn-disabled-color: var(--twr-btn);
  --bs-btn-disabled-border-color: var(--twr-btn);
}
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-dark,
[data-bs-theme="dark"] .btn-outline-info {
  --bs-btn-color: #d9e6f8;
  --bs-btn-border-color: #4a6690;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1a345d;
  --bs-btn-hover-border-color: #7f96b6;
  --bs-btn-focus-shadow-rgb: 174, 191, 212;
  --bs-btn-active-color: var(--twr-on-accent);
  --bs-btn-active-bg: #d9e6f8;
  --bs-btn-active-border-color: #d9e6f8;
  --bs-btn-disabled-color: #7f96b6;
  --bs-btn-disabled-border-color: #34507a;
}

/* forms: the field is the page navy inside a border you can find */
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--twr-faint);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(113, 167, 255, .3);
}
/* the tick and the radio dot are white in Bootstrap, which is lost on the
   light accent, so they are redrawn in navy */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b1d3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230b1d3a'/%3e%3c/svg%3e");
}

/* menus sit a step above the page */
[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--twr-raised);
  --bs-dropdown-link-hover-bg: #21427a;
  --bs-dropdown-link-active-color: var(--twr-on-accent);
}
[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--twr-page);
  --bs-nav-tabs-link-active-border-color: var(--twr-rule) var(--twr-rule) var(--twr-page);
}
[data-bs-theme="dark"] .pagination {
  --bs-pagination-bg: transparent;
  --bs-pagination-active-color: var(--twr-on-accent);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(113, 167, 255, .3);
}
[data-bs-theme="dark"] .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-active-color: var(--twr-on-accent);
}
[data-bs-theme="dark"] .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23aebfd4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371a7ff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(113, 167, 255, .3);
}
[data-bs-theme="dark"] details.accordion-item {
  background-color: transparent;
}
[data-bs-theme="dark"] .modal {
  --bs-modal-bg: var(--twr-raised);
}
[data-bs-theme="dark"] .modal-backdrop {
  --bs-backdrop-bg: #050d1c;
  --bs-backdrop-opacity: .6;
}
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .popover {
  --bs-offcanvas-bg: var(--twr-raised);
  --bs-toast-bg: var(--twr-raised);
  --bs-popover-bg: var(--twr-raised);
}
[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg: #050d1c;
  --bs-tooltip-color: #d9e6f8;
}