/**
 * ==========================================================================
 * CSS COLOR GUIDELINES
 * ==========================================================================
 *
 * RULE: Always use CSS variables for colors. Never use hardcoded hex (#fff),
 * rgb(), rgba(), or named colors directly in style rules.
 *
 * AVAILABLE VARIABLES:
 *
 * Backgrounds:
 *   --bg-page         Page background
 *   --bg-surface      Card/panel backgrounds
 *   --bg-muted        Subdued backgrounds (headers, footers)
 *   --bg-subtle       Very light backgrounds
 *   --bg-hover        Hover states
 *   --bg-input        Form input backgrounds (muted in dark mode)
 *
 * Text:
 *   --text-primary    Main text color
 *   --text-secondary  Secondary/less important text
 *   --text-muted      Disabled/placeholder text
 *   --text-inverse    Text on dark backgrounds (light mode) or light backgrounds (dark mode)
 *   --text-on-brand   Text on accent-brand (yellow) backgrounds - always dark
 *
 * Borders:
 *   --border-light    Subtle dividers
 *   --border-medium   Standard borders
 *   --border-dark     Prominent borders
 *
 * Brand/Accent:
 *   --accent-primary  Links, primary actions
 *   --accent-brand    Brand yellow (stays constant across themes)
 *
 * Status:
 *   --status-success, --status-success-bg
 *   --status-error, --status-error-bg
 *   --status-info-bg
 *
 * Interactive:
 *   --bg-highlight     Current/active nav items
 *   --bg-row-hover     Table row hover
 *   --bg-row-selected  Selected rows
 *
 * Medals:
 *   --medal-gold, --medal-silver, --medal-bronze
 *
 * Shadows:
 *   --shadow-primary, --shadow-secondary, --shadow-light
 *
 * For semi-transparent overlays, use color-mix():
 *   color-mix(in srgb, var(--text-primary) 20%, transparent)
 *
 * ==========================================================================
 */

@font-face {
  font-family: "hubot-sans";
  src:
    url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"),
    url("fonts/Hubot-Sans.woff2") format("woff2-variations");
  font-display: block;
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

@font-face {
  font-family: "monaspace-neon";
  src:
    url("fonts/Monaspace-Neon.woff2") format("woff2 supports variations"),
    url("fonts/Monaspace-Neon.woff2") format("woff2-variations");
  font-display: block;
  font-weight: 200 800;
  font-style: oblique -11deg 0deg;
}

:root {
  /* Tooltips - always dark regardless of theme */
  --tooltip-bg: #212529;
  --tooltip-text: #fff;

  /* Backgrounds */
  --bg-page: #efefef;
  --bg-surface: #fff;
  --bg-muted: #dfdfdf;      /* consolidates #dedede, #d6d6d6, #e0e0e0 */
  --bg-subtle: #f5f5f5;     /* consolidates #f6f6f6, #f2f2f2, #f0f0f0 */
  --bg-hover: #c0c0c0;
  --bg-input: var(--bg-surface);  /* Form input backgrounds */

  /* Text */
  --text-primary: #212529;
  --text-secondary: #666;
  --text-muted: #999;
  --text-inverse: #fff;
  --text-secondary-inverse: #a8a49e;
  --text-muted-inverse: #a8a49e;
  --text-on-brand: #212529;  /* Always dark - for text on accent-brand backgrounds */
  --text-on-dark: #fff;      /* Always light - for text on always-dark elements like navbar */

  /* Borders */
  --border-light: rgba(0, 0, 0, 0.15);
  --border-medium: #999;
  --border-dark: #666;

  /* Brand/Accent */
  --accent-primary: #0035aa;
  --accent-brand: rgb(252, 202, 13);

  /* Navbar (always dark, doesn't change with theme) */
  --navbar-bg: #212529;
  --navbar-input-bg: #212529;
  --navbar-border: #666;
  --navbar-btn-hover: #888;

  /* Status */
  --status-success: #007700;
  --status-success-bg: #cfffcf;
  --status-error: #c00;
  --status-error-bg: #fcc;
  --status-info-bg: #ccf;
  --status-warning: #b8860b;
  --status-warning-bg: #fff3b0;

  /* Interactive states */
  --bg-highlight: #ff9;         /* Current/active nav item */
  --bg-row-hover: #ccffff;      /* Table row hover */
  --bg-row-selected: #ffcc66;   /* Selected row */

  /* Medals */
  --medal-gold: #f9a602;
  --medal-silver: #c3c7c7;
  --medal-bronze: #b1560f;


  /* Shadows */
  --shadow-primary: rgba(0, 0, 0, 0.4);
  --shadow-secondary: rgba(0, 0, 0, 0.25);
  --shadow-light: rgba(0, 0, 0, 0.15);

  /* Legacy aliases (for backward compatibility during migration) */
  --primary-dx-color: var(--shadow-primary);
  --secondary-dx-color: var(--shadow-secondary);
  --primary-dy-color: var(--shadow-primary);
  --secondary-dy-color: var(--shadow-light);
  --table-dx-color: var(--shadow-primary);
  --table-dy-color: var(--shadow-primary);
  --page-bg-color: var(--bg-page);
  --page-text-color: var(--text-primary);
  --tbody-bg-color: var(--bg-surface);
  --thead-bg-color: var(--bg-muted);
  --link-color: var(--accent-primary);
  --link-hover-color: var(--link-color);
  --table-text-color: var(--text-primary);
  --bs-blue: var(--link-color);

  /* Bootstrap primary semantic - keep .text-bg-primary, badges, etc.
     in sync with .btn-primary which uses --link-color (#0035aa). */
  --bs-primary: var(--accent-primary);
  --bs-primary-rgb: 0, 53, 170;
}

/* Dark Mode - Warm palette based on navbar #212529 */
[data-bs-theme="dark"] {
  /* Backgrounds - warm grays */
  --bg-page: #212529;
  --bg-surface: #2c2f33;
  --bg-muted: #383b40;
  --bg-subtle: #1a1d20;
  --bg-hover: #4a4e54;
  --bg-input: var(--bg-muted);  /* Form inputs stand out in dark mode */

  /* Text - slightly warm whites */
  --text-primary: #f0ebe6;
  --text-secondary: #a8a49e;
  --text-muted: #7d7973;
  --text-inverse: #212529;
  --text-secondary-inverse: #666;
  --text-muted-inverse: #666;

  /* Borders - warm grays */
  --border-light: rgba(255, 250, 245, 0.12);
  --border-medium: #5c5955;
  --border-dark: #7a756f;

  /* Accent - warm gold/amber instead of blue */
  --accent-primary: #e9b44c;

  /* Bootstrap semantic colors - higher contrast for dark mode */
  --bs-danger: #ff6b6b;
  --bs-danger-rgb: 255, 107, 107;
  --bs-success: #69db7c;
  --bs-success-rgb: 105, 219, 124;
  --bs-info: #74c0fc;
  --bs-info-rgb: 116, 192, 252;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-primary: var(--accent-primary);
  --bs-primary-rgb: 233, 180, 76;

  /* Status colors (matching Bootstrap overrides) */
  --status-success: #69db7c;
  --status-error: #ff6b6b;
  --status-warning: #ffc107;

  /* Status backgrounds (darker warm variants) */
  --status-success-bg: #2a3d2a;
  --status-error-bg: #3d2a2a;
  --status-info-bg: #2a2a3d;
  --status-warning-bg: #3d3a2a;

  /* Interactive states (darker variants) */
  --bg-highlight: #5c4a1a;
  --bg-row-hover: #2a4a4a;
  --bg-row-selected: #5c4a2a;

  /* Shadows (subtle warm tint) */
  --shadow-primary: rgba(255, 250, 245, 0.15);
  --shadow-secondary: rgba(255, 250, 245, 0.08);
  --shadow-light: rgba(255, 250, 245, 0.04);

  /* Bootstrap subtle backgrounds - more visible in dark mode */
  --bs-secondary-bg-subtle: #3a3d42;
  --bs-warning-bg-subtle: #4a4535;
  --bs-info-bg-subtle: #2a3a4a;
}

/* Dark mode button text - dark text on yellow/gold background for contrast */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:active {
  color: var(--text-inverse);
}

[data-bs-theme="dark"] .footer img {
  filter: invert(1) brightness(0.8);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--bg-input);
  border-color: var(--border-medium);
  color: var(--text-primary);
}



* {
  box-sizing: border-box;
}

.logo:hover {
  -webkit-filter: drop-shadow(0px 0px 9px rgba(252, 202, 13, 0.75));
  filter: drop-shadow(0px 0px 9px rgba(252, 202, 13, 0.75));
}
/* Links */

a,
.btn-link {
  color: var(--link-color);
  text-decoration: none;
}

a.white {
  color: var(--text-inverse);
}

a.white:visited {
  color: var(--text-inverse);
}

a:hover {
  text-decoration: none;
}

.content a:not(.has-img):not(.nav-link):hover,
.btn-link:hover {
  filter: brightness(0.5);
  text-decoration: underline;
}
.content a:hover img {
  filter: drop-shadow(0px 0px 9px rgba(0, 0, 153, 0.25));
}

a:visited {
  color: var(--link-color);
}

.btn-primary,
.btn-primary:disabled,
.form-check-input:checked {
  background-color: var(--link-color);
  border-color: var(--link-color);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  filter: brightness(1.1);
}

.btn {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, filter 0.15s ease-in-out;
}

.btn-light {
  background-color: var(--bg-muted) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
  background-color: var(--bg-hover) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

.btn-light.text-danger {
  color: var(--status-error) !important;
}

.btn-light.text-danger:hover,
.btn-light.text-danger:focus {
  color: var(--status-error) !important;
}

.list-group-item {
  transition: background-color 0.15s ease-in-out;
}

.list-group-item:hover {
  background-color: var(--bg-row-hover);
}

.list-group-item .btn-link {
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * The global `.list-group-item:hover` rule (above) and Bootstrap's own
 * `.list-group-item-action:hover` both tint these cards. On the import-
 * session list the card is expanded with stages and form controls, so
 * any hover tint feels heavy. The `.session-list` opt-out keeps regular
 * list-group-item behavior elsewhere on the site (driver/car lists,
 * etc.) while pinning this one surface to its base bg on hover and
 * focus. !important is needed to win against Bootstrap's hover/focus
 * rules that target list-group-item-action.
 */
.session-list .list-group-item,
.session-list .list-group-item:hover,
.session-list .list-group-item:focus,
.session-list .list-group-item.active {
  background-color: var(--bs-list-group-bg) !important;
}

.bg-primary {
  background-color: var(--link-color) !important;
}

/* Page objects */

form {
  margin: 0px;
  padding: 0px;
}

h1,
.h1 {
  font-family: inherit;
  font-size: 12pt;
  font-weight: bold;
}

h2,
.h2 {
  font-family: inherit;
  font-size: 11pt;
  font-weight: bold;
}

h3,
.h3 {
  font-family: inherit;
  font-size: 10pt;
  font-weight: bold;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
}

body > center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

body > center > .navbar,
body > center > .userbar {
  flex: 0 0 auto;
}

body > center > .container-fluid,
body > center > .container-fluid > .row {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

div.container > div:nth-of-type(odd) {
  background: var(--bg-muted);
}

.container {
  position: relative;
}

html,
body,
p {
  font-family: "hubot-sans", sans-serif;
  font-stretch: 105%;
  font-weight: 400;
  font-size: 10pt;
  margin: 0;
  padding: 0;
  text-align: center;
}

p {
  text-align: start;
}

image {
  border: 0;
}

.newinput {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

input[type="text"]:not(.form-control),
input[type="number"]:not(.form-control),
textarea:not(.form-control) {
  background-color: var(--bg-input);
  border: 1px solid var(--border-medium);
  font-family: verdana, sans-serif;
  font-size: 8pt;
  margin: 1px;
  padding: 0 5px;
  /*width:  100%;
    box-sizing:border-box;
    resize:vertical;
    */
}

label:not(.form-label):not(.form-check-label) {
  /*padding: 12px 12px 12px 0;*/
  display: inline-block;
  font-size: 10pt;
  font-weight: bold;
}

/* Style the submit button 
input[type=button] {
  background-color: #0035aa;
  color: white;
  padding: 12px 20px;
  //border: none;
  border-radius: 4px;
  cursor: pointer;
}*/

select:not(.form-select) {
  background-color: var(--bg-input);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-family: verdana, sans-serif;
  font-size: 8pt;
  margin: 0;
  padding: 2px;
}
.form-label button.badge {
  border: 0;
  position: relative;
  top: -1px;
}
.form-heading {
  border-bottom: 1px solid var(--border-medium);
  font-family: "hubot-sans", sans-serif;
  font-size: 1.5rem;
  font-stretch: 125%;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}
.form-subheading {
  color: var(--text-secondary);
  font-family: "hubot-sans", sans-serif;
  font-size: 0.95rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}
.form-subgroup {
  border-left: 5px solid var(--border-light);
  padding: 0.5rem 0 0.75rem 1.25rem;
}
.form-block {
  background-color: var(--bg-subtle);
}
.form-block .border-light {
  border-color: var(--border-light) !important;
}

.badge {
  font-family: "monaspace-neon", monospace;
  padding-top: 0.5em;
  color: white;
}

[data-bs-theme="dark"] .badge {
  color: var(--text-inverse);
}

ul {
  margin: 0;
}

.btn:not([class*="btn-"]) {
  background-color: var(--bg-muted);
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-family: "hubot-sans", sans-serif;
}

.btn:not([class*="btn-"]):hover {
  background-color: var(--bg-hover);
}

/* Borders */

.bdrBlk1 {
  border: 1px solid black;
}
.bdrGry1 {
  border: 1px solid var(--border-medium);
}
.bdrWht1 {
  border: 1px solid white;
}
.bdrWht2 {
  border: 2px solid white;
}

.bdrShd {
  border-left: 1px solid var(--bg-surface);
  border-top: 1px solid var(--bg-surface);
  border-right: 2px solid var(--border-dark);
  border-bottom: 2px solid var(--border-dark);
}

.bdrBotGry1 {
  border-bottom: 1px solid var(--border-medium);
}

.bdrLftDot1 {
  border-left: 1px dotted var(--border-medium);
}

.bdrTopGry1 {
  border-top: 1px solid var(--border-medium);
}

.divLeft {
  border-left: 1px dotted var(--border-medium);
  padding-left: 20px;
}

/* Legacy background color classes removed - use Bootstrap utilities instead:
   .bgBlue  -> .bg-info-subtle
   .bgDkGray -> .bg-secondary
   .bgGray  -> .bg-body-secondary
   .bgRed   -> .bg-danger-subtle
   .bgYel   -> .bg-warning-subtle
   .bgWht   -> .bg-body
*/

/* Display */

.hid {
  display: none;
}

/* Legacy foreground color classes removed - use Bootstrap utilities instead:
   .fgBlack  -> .text-body
   .fgBlue   -> .text-primary
   .fgDkGray -> .text-secondary
   .fgGray   -> .text-muted
   .fgGrn    -> .text-success
   .fgRed    -> .text-danger
   .fgWht    -> .text-white
*/

/* Fonts */

.bold,
b {
  font-weight: 700;
}
.ctr {
  text-align: center;
}
td.ctr {
  vertical-align: middle;
}
td.ctr a,
td.ctr i.bi,
td.ctr input[type="checkbox"] {
  vertical-align: middle;
}
.flclr {
  clear: both;
}
.fllft {
  float: left;
}
.flrgt {
  float: right;
}
.italic,
i {
  font-style: oblique 12deg;
}
.left {
  text-align: left;
}
.notbold {
  font-weight: normal;
}
.nowrap {
  white-space: nowrap;
}
.rgt {
  text-align: right;
}
.sm {
  font-size: 7pt;
}
.vbot {
  vertical-align: bottom;
}
.vmid {
  vertical-align: middle;
}
.vtop {
  vertical-align: top;
}
.wrap {
  white-space: normal;
}
.xval {
  font-family: serif;
  font-weight: bold;
}

/* Margins */

.m0 {
  margin: 0;
}
.m2 {
  margin: 2px;
}
.m5 {
  margin: 5px;
}
.m10 {
  margin: 10px;
}
.m15 {
  margin: 15px;
}
.m20 {
  margin: 20px;
}
.m30 {
  margin: 30px;
}

.mb0 {
  margin-bottom: 0;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb25 {
  margin-bottom: 25px;
}
.mb30 {
  margin-bottom: 30px;
}

.ml0 {
  margin-left: 0;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml25 {
  margin-left: 25px;
}
.ml30 {
  margin-left: 30px;
}

.mr0 {
  margin-right: 0;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr25 {
  margin-right: 25px;
}
.mr30 {
  margin-right: 30px;
}

.mt0 {
  margin-top: 0;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt25 {
  margin-top: 25px;
}
.mt30 {
  margin-top: 30px;
}

/* Padding */

.p0 {
  padding: 0;
}
.p2 {
  padding: 2px;
}
.p5 {
  padding: 5px;
}
.p10 {
  padding: 10px;
}
.p20 {
  padding: 20px;
}

.pb5 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: 10px;
}

.pl0 {
  padding-left: 0;
}
.pl5 {
  padding-left: 5px;
}
.pl10 {
  padding-left: 10px;
}
.pl15 {
  padding-left: 15px;
}
.pl20 {
  padding-left: 20px;
}
.pl30 {
  padding-left: 30px;
}

.pr0 {
  padding-right: 0;
}
.pr5 {
  padding-right: 5px;
}
.pr10 {
  padding-right: 10px;
}
.pr15 {
  padding-right: 15px;
}
.pr20 {
  padding-right: 20px;
}
.pr30 {
  padding-right: 30px;
}

.pt0 {
  padding-top: 0;
}
.pt2 {
  padding-top: 2px;
}
.pt5 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}

/* Miscellaneous */

#add_provisional {
  border-bottom: 1px solid var(--border-medium);
  display: none;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 5px;
}

#ajaxError {
  background: var(--status-error-bg);
  border: 2px solid var(--status-error);
  color: var(--status-error);
  display: none;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  white-space: normal;
}

.debug {
  background-color: var(--status-info-bg);
  border: 1px solid var(--border-medium);
  margin: 5px;
  padding: 5px;
  text-align: left;
}

.error {
  background: var(--status-error-bg);
  border: 2px solid var(--status-error);
  color: var(--status-error);
  font-weight: bold;
  padding: 10px;
  text-align: center;
  white-space: normal;
}

.imgDiv {
  height: 8px;
  margin-left: 3px;
  margin-right: 3px;
  width: 8px;
}

.query {
  border: 1px solid var(--border-medium);
  padding: 5px;
  font-size: 8pt;
  text-align: left;
  margin: 5px;
  white-space: normal;
}

/* .tooltip {
  background: transparent url(images/tooltip.png);
  color: black;
  delay: 0;
  display: none;
  font-size: 8pt;
  height: 170px;
  padding: 25px;
  predelay: 1000;
  width: 320px;
} */
.tooltip-inner {
  background-color: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 0.875rem 1rem;
  text-align: left;
}
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--tooltip-bg);
}
.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--tooltip-bg);
}
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--tooltip-bg);
}
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--tooltip-bg);
}

.step-nav {
  list-style: none;
  padding-left: 0;
  margin-left: 20px;
  position: relative;
  counter-reset: step-counter;
  text-align: left;
  align-self: flex-start;
}

.step-nav li {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 2.5rem;
}

.step-nav li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 40px;
  width: 2px;
  height: calc(100% + 1rem - 40px);
  background-color: var(--border-medium);
}

.step-nav li::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: -21px;
  top: 0;
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-medium);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding-left: 2px;
  font-family: "hubot-sans", sans-serif;
  font-weight: bold;
  font-size: 1.25rem;
  font-stretch: 85%;
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

.step-nav li:first-child::before {
  border-color: var(--accent-brand);
  color: var(--accent-brand);
}

.step-nav li span {
  font-size: 1rem;
  font-stretch: 85%;
  text-transform: uppercase;
  line-height: 40px;
  color: var(--text-primary);
  display: block;
}

/* Header/Footer */

.footer {
  background-color: var(--bg-muted);
  flex: 0 0 auto;
  margin-top: 50px;
  padding: 15px;
  text-align: center;
}

.hdrBdr {
  border-top: 1px dotted var(--border-medium);
}

.hdrBtn {
  height: 12px;
  width: 12px;
}

.hdrDiv {
  background-color: var(--bg-muted);
  border-bottom: 1px solid var(--border-dark);
  margin: 0;
  padding: 5px;
}

.hdrDiv table {
  width: 100%;
}

.hdrLSS {
  float: left;
}

.hdrTbl {
  width: 100%;
}

.hdrTblDiv {
  border-top: 1px solid var(--bg-page);
  padding-top: 2px;
}

.hdrTblDiv2 {
  background-color: var(--bg-page);
  border-top: 1px solid var(--border-medium);
  padding-top: 2px;
}

.hdrTop {
  background-color: var(--border-dark);
  padding: 10px;
  padding-right: 10px;
  padding-top: 5px;
  height: 100px;
}

.hdrTopC {
  text-align: center;
  float: right;
}

.hdrTopL {
  float: left;
}

.hdrTopR {
  float: right;
}

.pageTitle {
  background-color: var(--bg-muted);
  font-stretch: 85%;
  margin: 0 calc(var(--bs-gutter-x) * -0.5) 2rem;
  padding: 1.5rem calc(var(--bs-gutter-x) * 0.5);
}
.userbar + * .pageTitle,
.userbar ~ .pageTitle {
  margin-top: -20px;
}
.pageTitle h1 {
  font-family: "hubot-sans", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  position: relative;
  text-transform: uppercase;
  top: -1.5px;
  white-space: nowrap;
}
table.pageTitle {
  width: 100%;
}
.pageTitleDescr {
  background-color: var(--bg-subtle);
  border: 1px dotted var(--bg-hover);
  font-style: oblique 12deg;
  margin-bottom: 10px;
  padding: 3px;
  white-space: normal;
  width: 80%;
}
@media (min-width: 768px) {
  .pageTitleLeft {
    border-right: 1px dotted var(--border-dark);
    text-align: right;
    vertical-align: top;
    white-space: normal;
  }
  .pageTitleLeft .dropdown-toggle::before {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: 0.3em;
    content: "";
    border-top: 0.2em solid;
    border-right: 0.2em solid transparent;
    border-bottom: 0;
    border-left: 0.2em solid transparent;
  }
  .pageTitleLeft .dropdown-toggle::after {
    display: none;
  }
}
.pageTitleLeft .dropdown-toggle::after {
  border-top: 0.2em solid;
  border-right: 0.2em solid transparent;
  border-bottom: 0;
  border-left: 0.2em solid transparent;
}
.pageTitleLeft:not([class*="col-"]) {
  padding-right: 20px;
  width: 50%;
}
.pageTitleRight {
  vertical-align: top;
  white-space: normal;
}
.pageTitleRight:not([class*="col-"]) {
  padding-left: 10px;
  width: 50%;
}
[class*="bi-"].reverse::before {
  transform: rotate(180deg);
}

.topLink,
.topLinkCur {
  background-color: var(--bg-muted);
  border: 1px solid var(--border-medium);
  cursor: pointer;
  float: left;
  margin: 0 2px 2px 2px;
  padding: 1px 3px 1px 3px;
  white-space: nowrap;
}

.topLinkCur {
  background-color: var(--bg-highlight);
}

.topLink:hover {
  background-color: var(--bg-hover);
}

/* Table */
table {
  width: 80%;
}

.jsTable:not(.react-table) {
  background-color: var(--border-dark);
  border: 1px solid var(--border-medium);
  position: relative;
}
.jsTable:not(.react-table) table,
.jsTable:not(.react-table) table tr,
.jsTable:not(.react-table) table td {
  border: 0;
}
.jsTable:not(.react-table) table {
  width: 100%;
}
.jsTable:not(.react-table) tr {
  border: 1px solid var(--border-medium);
  /* vertical-align: baseline; */
  text-align: center;
}
.jsTable:not(.react-table) th {
  border: 1px solid var(--border-medium);
  text-align: center;
}
.jsTable:not(.react-table) td {
  border: 1px solid var(--border-medium);
  line-height: 1.1;
  padding-top: 5px;
  padding-bottom: 2px;
  text-align: center;
}
.jsTable:not(.react-table) tr:hover:not(:first-child) {
  background-color: var(--bg-subtle);
  cursor: pointer;
}

.inner {
  border-style: none;
}

.inner td {
  border-style: none;
}

.inner tr {
  border-style: none;
}

.inner th {
  border-style: none;
}

.jsTableHdr,
.jsTableHdr th {
  background-color: var(--bg-muted);
}
/* .jsTableHdr th	{ padding-bottom: 2px; padding-top: 2px; } */
.jsTableHdrClk {
  text-decoration: underline;
}
.jsTableHdrOver,
.jsTableHdrOver th {
  background-color: var(--bg-row-hover);
}
.jsTableRow,
.jsTableRow td {
  background-color: var(--bg-surface);
}
.jsTableRowHi,
.jsTableRowHi td {
  background-color: var(--status-success-bg);
}
.jsTableRowOver,
.jsTableRowOver td {
  background-color: var(--bg-row-hover);
}
.jsTableRowSel,
.jsTableRowSel td {
  background-color: var(--bg-row-selected);
}

.react-table-edges {
  position: relative;
}
.react-table-wrapper.scrolling {
  overflow-x: auto;
  /* Match the inner table's outer corner radius so content
     scrolling beneath the pinned columns is clipped at the
     curve — keeps the rounded edge clean during scroll. */
  border-radius: 0.75rem;
}
.react-table-wrapper.scrolling::before,
.react-table-wrapper.scrolling::after {
  background: linear-gradient(90deg, rgba(104, 104, 104, 0.5), transparent);
  bottom: 1px;
  content: " ";
  left: calc(var(--left, 0) - 1px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: auto;
  top: 1px;
  transition: opacity 0.1s ease-in-out;
  width: 2rem;
  z-index: 1;
}
.react-table-wrapper.scrolling::after {
  background: linear-gradient(90deg, transparent, rgba(104, 104, 104, 0.5));
  border-right: 1px solid var(--border-medium);
  left: auto;
  right: calc(var(--right, 0px) - 1px);
}
/* Dark-theme variant: gray gradient washes out on a dark page bg.
   Use a black-based gradient so the scroll-edge shadow keeps the
   same "fading shadow" feel against the darker surface. */
[data-bs-theme="dark"] .react-table-wrapper.scrolling::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent);
}
[data-bs-theme="dark"] .react-table-wrapper.scrolling::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.6));
}
.react-table-wrapper.scrolling.overflow-left::before {
  opacity: 1;
}
.react-table-wrapper.scrolling.overflow-right::after {
  opacity: 1;
}
.react-table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  position: relative;
  width: 100%;
}
.react-table .data {
  font-family: "monaspace-neon", monospace;
  text-align: right;
}
.react-table .pinned-left,
.react-table .pinned-right {
  position: sticky;
  z-index: 1;
}
.react-table thead th,
.react-table tfoot th {
  background-color: var(--thead-bg-color);
  border-top: 1px solid var(--secondary-dy-color);
  /* border-bottom: 1px solid #999; */
  border-left: 1px solid var(--secondary-dy-color);
  font-family: "hubot-sans", sans-serif;
  font-size: 0.825rem;
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 3px;
  padding-top: 5px;
  text-align: center;
  text-transform: uppercase;
}
.react-table tfoot td {
  background-color: var(--thead-bg-color);
  border-left: 1px solid var(--secondary-dy-color);
  border-top: 0;
  font-weight: 600;
  padding-top: 5px;
  padding-bottom: 3px;
}
.react-table tfoot td:empty {
  display: none;
}
.react-table tbody tr {
  background-color: var(--tbody-bg-color);
}
.react-table tbody tr.bg-primary-subtle,
.react-table tbody td.bg-primary-subtle {
  background-color: var(--status-info-bg);
}
.react-table tbody tr.bg-success-subtle,
.react-table tbody td.bg-success-subtle {
  background-color: var(--status-success-bg);
}
/* Baseline min-width on every react-table cell so 1-2 digit
   numeric columns don't squeeze down to tiny strips next to wider
   columns. ch is the "0" character width — 4ch gives ~4 digits of
   breathing room. Cells that opt into a fixed width (.grid-subcol,
   .pinned-left, etc.) override this naturally. */
.react-table thead th,
.react-table tbody td,
.react-table tfoot td {
  min-width: 4ch;
}

.react-table tbody td {
  background-color: inherit;
  border-top: 1px solid var(--secondary-dy-color);
  border-left: 1px solid var(--secondary-dy-color);
  font-family: "monaspace-neon", monospace;
  font-size: 0.875rem;
  font-weight: 400;
  font-stretch: 75%;
  padding-top: 5px;
  padding-bottom: 2px;
  vertical-align: middle;
}
.react-table tbody td img:not(.flag) {
  max-height: 24px;
  width: auto;
}
.react-table tbody td i.bi,
.react-table tbody td input[type="checkbox"] {
  vertical-align: middle;
}
.react-table tbody td input,
.react-table tbody td select {
  position: relative;
  top: -2px;
}
.react-table tbody .subrow td {
  border-top-color: var(--secondary-dx-color);
  /* border-left-color: var(--secondary-dy-color); */
}
.react-table tbody td[rowspan] {
  border-right: 0;
}
.react-table thead th:first-child,
.react-table tbody td:first-child,
.react-table tbody td[rowspan] + td,
.react-table tfoot td:first-child {
  border-left: 1px solid var(--secondary-dy-color);
}
.react-table thead th:last-child,
.react-table tbody td:last-child,
/* .react-table tbody td[rowspan] + td, */
.react-table tfoot td:last-child {
  border-right: 1px solid var(--secondary-dy-color);
}
.react-table tbody tr:last-child td,
.react-table tfoot tr:last-child td {
  border-bottom: 1px solid var(--secondary-dy-color);
}
.react-table .driver_name,
a[href^="driver"]:not(.nav-link) {
  font-weight: 700;
  font-stretch: 105%;
  text-transform: uppercase;
}
.react-table .primary {
  font-weight: 600;
  /* font-stretch: 105%; */
  /* letter-spacing: -0.025rem; */
  /* text-transform: uppercase; */
  /* word-spacing: -0.25rem; */
}
.react-table .best {
  font-weight: 700;
}
.react-table .bns {
  color: var(--status-success);
}
.react-table .pen {
  color: var(--status-error);
}

/* Chg pill — same chrome as the contention pill (rounded bg,
   leading caret, trailing magnitude). Every row that moved gets
   the directional background + text colors so the column reads as
   a stack of red/green chips at a glance. */
.std-status-pill.std-status-chg::before {
  display: none;
}
.std-status-pill.std-status-chg-up {
  background: var(--status-success-bg);
  color: var(--status-success);
}
.std-status-pill.std-status-chg-down {
  background: var(--status-error-bg);
  color: var(--status-error);
}
.std-chg-caret {
  align-self: center;
  font-size: 0.85em;
  line-height: 1;
  /* Optical nudge — Bootstrap caret glyphs sit slightly above their
     line-box center, so they read as too high in the pill without
     this. Same fix pattern as the lock icon's transform. */
  transform: translateY(1px);
}

/* Race-by-race grid — uniform sub-column width and a softer 2px
   left border on the first sub-column of each race group. The
   thicker stroke at the soft color reads as a "race separator"
   without the heaviness of --border-medium. */
.race-group-start,
.react-table thead .race-group-start,
.react-table tbody .race-group-start,
.react-table tfoot .race-group-start {
  border-left: 2px solid var(--secondary-dy-color) !important;
}
.grid-subcol {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
}
.react-table .disabled {
  opacity: 0.5;
}
.react-table .dropped-race {
  opacity: 0.25;
}
.react-table-footer {
  background-color: var(--thead-bg-color);
  border-bottom: 1px solid var(--secondary-dy-color);
  border-left: 1px solid var(--secondary-dy-color);
  border-right: 1px solid var(--secondary-dy-color);
  font-family: "hubot-sans", sans-serif;
  font-size: 0.875rem;
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.4;
  padding: 5px;
}
.react-table-footer li {
  display: inline-block;
  margin: 0;
  padding: 0 2.5px;
}
.react-table-footer li + li::before {
  content: "\00b7";
  padding-right: 5px;
}
.react-table [class*="bi-"],
.react-table-footer [class*="bi-"] {
  font-size: inherit;
  line-height: 1;
  vertical-align: baseline;
}
.react-table thead th [class*="bi-"] {
  font-size: 0.6rem;
  position: relative;
  top: -1px;
}
.react-table .bi-trophy-fill span {
  color: white;
  font-size: 0.55rem;
  left: 0.01rem;
  position: absolute;
  text-align: center;
  top: 0.05rem;
  width: 100%;
}
.react-table tr:hover {
  background-color: var(--bg-subtle);
  cursor: pointer;
}

/* Light-theme thead bg sits between page (#efefef) and body (#fff)
   so the header has structure without competing with content. Dark
   theme keeps --bg-muted (already low-contrast on dark page). */
[data-bs-theme="light"] .react-table thead th,
[data-bs-theme="light"] .react-table tfoot td,
[data-bs-theme="light"] .react-table-footer {
  background-color: var(--bg-subtle);
}

/* Rounded outer corners on every react-table. */
.react-table thead tr:first-child th:first-child {
  border-top-left-radius: 0.75rem;
}
.react-table thead tr:first-child th:last-child {
  border-top-right-radius: 0.75rem;
}
.react-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.75rem;
}
.react-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.75rem;
}

/* When a faux-footer follows the table, hand the bottom rounding
   off to the footer so the two pieces visually form one card.
   Two layouts to handle:
     1. Scrolling tables — table inside .react-table-edges >
        .react-table-wrapper, with the footer as a sibling of edges
     2. Form-wrapped tables (bonus/penalty admin lists) — table
        and footer are direct siblings inside <form>, no edges/
        wrapper at all */
.react-table-edges:has(+ .react-table-footer) .react-table-wrapper.scrolling {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.react-table-edges:has(+ .react-table-footer) .react-table tbody tr:last-child td:first-child,
.react-table:has(~ .react-table-footer) tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
.react-table-edges:has(+ .react-table-footer) .react-table tbody tr:last-child td:last-child,
.react-table:has(~ .react-table-footer) tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
/* Only the last footer in a stack picks up the bottom rounding;
   intermediate footers stay square so the borders line up flush. */
.react-table-footer:not(:has(+ .react-table-footer)) {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.standings-class-section {
  margin-top: 2.5rem;
}

/* Standings status pill — color-coded contention indicator that
   replaces the bare "Beh Lead" diff. Spans the full cell width
   (display: flex) so the leading dot sits in a consistent column
   on the left and the diff number flushes to the right via
   space-between. Four states:
     locked — gold, leader's cushion survives every remaining race
     in     — green, cushion survives the next race / can still win
     atrisk — yellow, leader could be passed in the next race
     out    — red, mathematically eliminated */
.std-status-pill {
  align-items: center;
  /* Neutral pill background — --bg-subtle reads as a soft chip on
     light-theme rows where --bg-muted was too dark. Dark theme flips
     to --bg-muted in the override below since its --bg-subtle sits
     darker than --bg-surface and would make the pill recede. */
  background: var(--bg-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  display: flex;
  font-weight: 500;
  justify-content: space-between;
  line-height: 1;
  /* Cell-fill via negative margin offsets the td's 5px/2px padding;
     pill's own padding is half-pixel symmetric (3.5px top/bottom)
     so total pill height = ch + 7 matches cell height exactly AND
     the pill's content center sits at its geometric center, no
     drift from font-metric asymmetry. */
  margin: -5px 0 -2px;
  padding: 3.5px 0.6em;
}
.std-status-pill::before {
  align-self: center;
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 8px;
  width: 8px;
}
/* Number glyph optical adjustment — most fonts position digits
   slightly above the line-box center, so the text reads as too
   high in the pill even when its line box is perfectly centered.
   Nudge just the label down a half-pixel; the dot/lock pseudo-
   element stays untouched. */
.std-status-label {
  transform: translateY(0.5px);
}
.std-status-pill.std-status-locked {
  background: var(--status-success-bg);
  color: var(--status-success);
}
/* Locked status replaces the dot with a Bootstrap lock-fill glyph
   (same green as the "in" pill so it reads as "in + secured" rather
   than a separate state). Box sizes match the dot so the icon
   lines up vertically + horizontally with adjacent dot rows. */
.std-status-pill.std-status-locked::before,
.std-status-pill.std-status-out::before {
  background: transparent;
  border-radius: 0;
  content: "\f47a";
  font-family: "bootstrap-icons" !important;
  font-size: 9px;
  height: 9px;
  line-height: 9px;
  text-align: center;
  /* Optical nudge — the lock glyph's bounding box doesn't match the
     visual lock shape, so without this it sits a hair right and low
     and reads narrower than the surrounding dots. */
  transform: translate(-1px, -0.5px) scale(1.2, 1);
  width: 9px;
}
.std-status-pill.std-status-in {
  background: var(--status-success-bg);
  color: var(--status-success);
}
.std-status-pill.std-status-atrisk {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}
/* Mathematically eliminated drivers fade to a muted gray pill —
   they're done, no need to draw attention. The red treatment is
   reserved for the "unlikely but mathematically alive" tier
   (.std-status-alive) below, which reads as a warning the user
   should still glance at. */
.std-status-pill.std-status-out {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.std-status-pill.std-status-alive {
  background: var(--status-error-bg);
  color: var(--status-error);
}
/* Dark theme: --bg-subtle sits below --bg-surface in luminance, which
   would make the neutral pill recede into the row. --bg-muted is just
   above the surface and reads as a soft chip in both themes. Wrapped
   in :where() so the [data-bs-theme] selector contributes 0 to
   specificity — otherwise a later 0,2,0 rule here would clobber the
   directional pill modifiers (.std-status-chg-up, .std-status-in,
   etc.) that need to win in both themes. */
:where([data-bs-theme="dark"]) .std-status-pill {
  background: var(--bg-muted);
}
:where([data-bs-theme="dark"]) .std-status-pill.std-status-out {
  background: var(--bg-subtle);
}

/* Iframe consumers can opt out of the colored chg / contention pill
   backgrounds via opt_min_max_chg='N'. The App root then carries
   .std-no-pill-bg, which forces every pill back to the neutral
   chip background while leaving the directional text colors and
   leading dot/lock markers intact. !important is used because the
   directional state classes (.std-status-chg-up etc.) set their
   own backgrounds at matching specificity. */
.std-no-pill-bg .std-status-pill {
  background: var(--bg-subtle) !important;
}
:where([data-bs-theme="dark"]) .std-no-pill-bg .std-status-pill {
  background: var(--bg-muted) !important;
}

/* Chase cutline — the row at the cutoff position carries this
   class (last in-cut driver). Heavier border-bottom on every
   cell visually splits in-cut from out-of-cut without disturbing
   the table's existing column borders. */
.react-table tbody tr.std-cutline-above td {
  border-bottom: 2px solid var(--border-medium);
}

.session-container {
  margin-bottom: 40px;
}
.heading-track-name {
  font-family: "hubot-sans", sans-serif;
  font-size: 2.5rem;
  font-stretch: 80%;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.subheading-track-name {
  font-family: "hubot-sans", sans-serif;
  font-size: 1.2rem;
  font-stretch: 100%;
  font-weight: 500;
  line-height: 1;
}
.heading-session-name {
  font-family: "hubot-sans", sans-serif;
  font-size: 2.5rem;
  font-stretch: 125%;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  text-align: left;
  text-transform: uppercase;
}
.heading-session-name.dropdown-toggle::after {
  border-width: 5px 5px 0 5px;
  margin-left: 5px;
}
.heading-subtable {
  font-family: "hubot-sans", sans-serif;
  font-size: 1.5rem;
  font-stretch: 125%;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}
.car-lineup img {
  width: 100%;
  transition: filter 0.2s ease-in-out;
}
.car-lineup img.disabled {
  filter: grayscale(100%) opacity(0.25);
}
.session-meta {
  margin: 0;
}
.session-meta > div {
  padding: 0 0 5px;
}
.session-details {
  font-family: "hubot-sans", sans-serif;
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.4;
  text-align: right;
}

.qTbl {
  background-color: var(--border-dark);
  margin-top: 5px;
}
.qTbl td th {
  font-size: 7pt;
}
.qTblHdr,
.qTblHdr th {
  background-color: var(--bg-muted);
}
.qTblRow,
.qTblRow td {
  background-color: var(--bg-surface);
}

td {
  font-family: "monaspace-neon", monospace;
  font-size: 8pt;
  font-stretch: 75%;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  white-space: nowrap;
}

th {
  font-family: inherit;
  font-size: 8pt;
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.1;
  padding: 5px 5px 3px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.wp50 {
  width: 50%;
}
.wp90 {
  width: 90%;
}
.wp100 {
  width: 100%;
}

.sidebar {
  padding: 15px;
  background-color: var(--bg-subtle);
  float: left;
  text-align: center;
  font-size: 14px;
  box-shadow:
    0 1px 3px var(--shadow-light),
    0 1px 2px var(--shadow-secondary);
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: var(--accent-primary);
  color: var(--text-inverse);
  box-shadow:
    0 1px 3px var(--shadow-light),
    0 1px 2px var(--shadow-secondary);
}

.menu li:hover {
  background-color: var(--status-error);
  color: var(--text-primary);
  text-decoration: none;
}

.cookie-consent {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 45px;
  color: var(--text-inverse);
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  background: var(--text-primary);
  z-index: 120;
  cursor: pointer;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.allow-button {
  height: 20px;
  width: 104px;
  color: var(--text-inverse);
  font-size: 12px;
  line-height: 10px;
  border-radius: 3px;
  border: 1px solid var(--status-success);
  background-color: var(--status-success);
}

#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--bg-subtle);
  padding: 16px;
  box-shadow: 0px 0px 10px var(--shadow-light);
}

#cookie-consent-banner p {
  margin: 0;
}

#cookie-consent-button {
  background-color: var(--status-success);
  border: none;
  color: var(--text-inverse);
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 16px;
}

.icon-ai {
  height: 1.2rem;
  opacity: 0.6;
  padding-left: 5px;
  position: relative;
  top: -1px;
}

.lds-facebook {
  display: inline-block;
  position: relative;
  width: 1.375rem;
  height: 1.375rem;
  transform: scale(0.3) translateY(-1.8rem);
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: var(--bg-hover);
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
  }
}

/*
 * Inline-icon variant of the lds-facebook 3-dot loader, sized to fit a
 * 1rem footprint (Bootstrap input-icon spot, status indicators inside
 * a select while data is fetching, etc.). The standard .lds-facebook
 * relies on a transform calibrated for block-level Loader cards and
 * overflows when squeezed into a single-line slot.
 */
.lds-facebook-mini {
  display: inline-block;
  position: relative;
  width: 1rem;
  height: 1rem;
}
.lds-facebook-mini div {
  display: inline-block;
  position: absolute;
  top: 0.25rem;
  width: 0.18rem;
  background: var(--text-muted);
  animation: lds-facebook-mini 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook-mini div:nth-child(1) {
  left: 0.12rem;
  animation-delay: -0.24s;
}
.lds-facebook-mini div:nth-child(2) {
  left: 0.41rem;
  animation-delay: -0.12s;
}
.lds-facebook-mini div:nth-child(3) {
  left: 0.7rem;
  animation-delay: 0;
}
@keyframes lds-facebook-mini {
  0% {
    top: 0.1rem;
    height: 0.8rem;
  }
  50%,
  100% {
    top: 0.3rem;
    height: 0.4rem;
  }
}

.dropdown-menu-dark {
  background-color: var(--text-primary);
}
.dropdown .dropdown-toggle:hover {
  text-decoration: underline;
}
.dropdown .dropdown-toggle::after {
  margin-left: 5px;
}
.dropdown .dropdown-header {
  font-size: 1.1rem;
  font-stretch: 125%;
  font-weight: 700;
  padding: 5px 10px;
  text-transform: uppercase;
}
.dropdown .dropdown-item {
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-stretch: 85%;
  font-weight: 500;
  font-size: 0.925rem;
  padding: 8px 10px;
  position: relative;
  text-transform: uppercase;
}
.dropdown .dropdown-item:hover {
  background-color: var(--border-light);
  color: var(--text-primary);
  text-decoration: underline;
}
.dropdown *:last-child > .dropdown-item {
  border-bottom: 0;
}
.dropdown .dropdown-menu {
  border: 1px solid var(--border-light);
  border-radius: 0.25rem;
}
.dropdown .dropdown-divider {
  margin-top: 0;
  margin-bottom: 0;
}
.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-dark .navbar-brand {
  margin-left: -5px;
}
.navbar .nav-item {
  font-family: "hubot-sans", sans-serif;
  font-size: 1.1rem;
  font-stretch: 85%;
  font-weight: 600;
  text-transform: uppercase;
}
.navbar .social {
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}
.navbar .social:hover {
  opacity: 1;
}
.navbar .btn {
  background-color: var(--navbar-border);
  border-color: var(--navbar-border);
  color: var(--text-on-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 0;
}
.navbar .btn:hover,
.navbar .btn:focus {
  background-color: var(--navbar-btn-hover);
  border-color: var(--navbar-border);
  border-left-color: var(--navbar-btn-hover);
  color: var(--text-on-dark);
}
.navbar .form-control-sm {
  background-color: var(--navbar-input-bg);
  border: 1px solid var(--navbar-border);
  border-right: none;
  color: var(--text-on-dark);
  height: 30px;
  border-radius: 0.25rem 0 0 0.25rem;
}
.navbar .form-control-sm:focus {
  border-color: var(--navbar-border);
  box-shadow: none;
}
.navbar .btn-sm {
  border-radius: 0 0.25rem 0.25rem 0;
  height: 30px;
  line-height: 1;
}

.userbar {
  background-color: var(--accent-brand);
  box-shadow: 0 0 4px 0 var(--shadow-primary);
  color: var(--text-on-brand);
  font-family: "hubot-sans", sans-serif;
  font-size: 1rem;
  font-stretch: 85%;
  font-weight: 300;
  margin-bottom: 20px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}
.userbar .nav-item:not(:first-child) {
  border-left: 1px solid color-mix(in srgb, var(--text-on-brand) 25%, transparent);
  margin-left: 1rem;
  padding-left: 1rem;
}
.userbar .nav-link {
  color: var(--text-on-brand);
  padding: 0;
  text-transform: uppercase;
}
.userbar span.nav-link {
  text-transform: capitalize;
}
.userbar b {
  font-weight: 600;
  margin-left: 2px;
  text-transform: uppercase;
  word-spacing: 0.1rem;
}
.userbar button,
.userbar .btn {
  background: transparent;
  border: 0;
  color: var(--text-on-brand);
  font-size: 1rem;
  font-stretch: 85%;
  font-weight: 600;
  padding: 0;
  text-transform: uppercase;
}
.userbar .bi-gear {
  position: relative;
  top: 1px;
}
.userbar .dropdown-toggle::after {
  margin-left: 5px;
}
.userbar .dropdown-menu {
  align-items: stretch;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 0.25rem;
  font-family: "hubot-sans", sans-serif;
  font-stretch: 105%;
  padding: 10px;
}
.userbar .dropdown-header {
  background-color: var(--bg-muted);
  color: var(--text-primary);
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1.1;
  padding: 10px;
}
.userbar .dropdown-item {
  color: var(--text-primary);
  position: relative;
}
.userbar .dropdown-item:hover {
  text-decoration: underline;
}
.userbar .d-grid {
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  margin: -10px;
  width: min-content;
}
.userbar .d-grid .col {
  display: contents;
  white-space: nowrap;
  width: max-content;
}
.userbar .d-grid .col:not(:first-child) > * {
  border-left: 1px solid var(--shadow-primary);
}
.userbar .dropdown-divider {
  border-left: 1px solid var(--border-light);
}
.userbar .d-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.userbar .form-select + .form-select {
  margin-top: 5px;
}

.details-nav {
  background-color: var(--accent-brand);
  display: flex;
  justify-content: center;
  font-weight: 600;
  text-transform: uppercase;
  word-spacing: 0.1rem;
  position: relative;
}

.details-dropdown {
  position: absolute;
  top: 2rem;
  left: -1rem;
  background-color: var(--bg-surface);
  z-index: 1050;
  min-width: 100%;
  white-space: nowrap;
}

.nav-tabs {
  border-color: var(--border-medium);
  display: flex;
  justify-content: center;
}

.nav-tabs .nav-link {
  border-radius: 0;
  color: var(--text-primary);
  font-family: "hubot-sans", sans-serif;
  font-size: 1.2rem;
  font-stretch: 75%;
  font-weight: 400;
  opacity: 0.5;
  padding-left: 2rem;
  padding-right: 2rem;
  text-transform: uppercase;
  transition: opacity 0.1s ease-in-out;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:active {
  background-color: var(--bg-page);
  border-color: var(--border-medium) var(--border-medium) var(--bg-page);
  font-weight: 700;
  opacity: 1;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:active {
  border-color: var(--bg-page) var(--bg-page) var(--border-medium);
  opacity: 1;
}

.nav-pills .nav-item {
  font-stretch: 85%;
  text-transform: uppercase;
}
.nav-pills .nav-link {
  color: var(--accent-primary);
}
.nav-pills .nav-link.active {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

.race-details {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.race-details .track-logo img {
  max-height: 8rem;
  max-width: 100%;
}
.race-details .col-3.track-logo img {
  max-height: 4rem;
}

/* Theme-aware track logos: show light logo in light mode, dark logo in dark mode */
.track-logo-dark {
  display: none;
}
[data-bs-theme="dark"] .track-logo-light {
  display: none;
}
[data-bs-theme="dark"] .track-logo-dark {
  display: inline;
}
/* Fallback filter for light logos used in dark mode when dark logo is unavailable */
[data-bs-theme="dark"] .track-logo-light.track-logo-inverted {
  display: inline;
  filter: drop-shadow(0 0 0.5px rgba(255,255,255,0.85)) drop-shadow(0 0 0.5px rgba(255,255,255,0.85));
}
[data-bs-theme="dark"] .track-logo-dark.track-logo-hidden {
  display: none;
}

/* Custom background color contrast safeguards for schedule rows */
/* Dark theme + light custom bg → need dark text for contrast */
[data-bs-theme="dark"] .light-bg,
[data-bs-theme="dark"] .light-bg a {
  color: var(--text-inverse);
}
[data-bs-theme="dark"] .light-bg .text-muted {
  color: var(--text-muted-inverse) !important;
}
[data-bs-theme="dark"] .light-bg .text-secondary {
  color: var(--text-secondary-inverse) !important;
}
/* Light theme + dark custom bg → need light text for contrast */
[data-bs-theme="light"] .dark-bg,
[data-bs-theme="light"] .dark-bg a {
  color: var(--text-inverse);
}
[data-bs-theme="light"] .dark-bg .text-muted {
  color: var(--text-muted-inverse) !important;
}
[data-bs-theme="light"] .dark-bg .text-secondary {
  color: var(--text-secondary-inverse) !important;
}

.race-details .track-map img {
  filter: brightness(0.5);
}
.race-details .col-3.track-map img {
  max-height: 5rem;
}
.race-details .track-meta {
  font-family: "hubot-sans", sans-serif;
  font-size: 1.2rem;
  font-stretch: 100%;
  font-weight: 500;
  line-height: 1;
  margin-top: 10px;
}
.race-details .heading-track-name + .track-meta {
  margin-top: 5px;
}
.race-details .track-meta span {
  display: inline-block;
  padding: 0 10px;
}
.race-details .track-meta i {
  font-style: oblique 12deg;
}

.lss-dropdown {
  font-family: "hubot-sans", sans-serif;
  font-size: 1rem;
  line-height: 1;
}
.lss-dropdown .dropdown-toggle {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font-stretch: 85%;
  padding: 0;
}
.lss-dropdown .dropdown-toggle.bold {
  display: block;
  font-weight: 700;
}

.patreon .dropdown-menu {
  background-color: var(--bg-muted);
}
.patreon .dropdown-toggle,
.userbar .btn {
  background-color: color-mix(in srgb, var(--text-on-brand) 10%, transparent);
  border-radius: 0.25rem;
  margin: 0;
  padding: 2px 10px 1px;
}
.patreon:hover,
.userbar .btn:hover {
  background-color: color-mix(in srgb, var(--text-on-brand) 20%, transparent);
}
.patreon svg {
  height: 1.15rem;
  margin-right: 0.5rem;
  position: relative;
  top: -1px;
}
.patreon p {
  font-family: "hubot-sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0.5rem 0;
}
.patreon .row {
  flex-wrap: nowrap;
  margin: 2rem 0 0.5rem;
}
.patreon .col {
  align-items: center;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 0.25rem;
  color: var(--text-primary);
  font-weight: 800;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  line-height: 1;
  margin: 0 calc(var(--bs-gutter-x) * 0.5);
  padding: 20px 20px 15px;
  position: relative;
  text-transform: uppercase;
}
.patreon .col:nth-child(2) {
  border: 3px solid var(--accent-brand);
  border-top: 1px solid var(--bg-surface);
  position: relative;
  top: 2px;
}
.patreon .btn {
  background-color: var(--accent-brand);
  border: 0;
  color: var(--text-on-brand);
  font-size: 1rem;
  font-stretch: 85%;
  font-weight: 800;
  margin: 1rem 0;
  width: 100%;
}
.patreon .eyebrow {
  background-color: rgb(252, 202, 13);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  font-stretch: 125%;
  font-size: 0.7rem;
  font-weight: 800;
  left: -3px;
  line-height: 1;
  padding: 5px 0;
  position: absolute;
  right: -3px;
  text-align: center;
  top: calc(-0.7rem - 10px);
}
.patreon em {
  font-size: 1.1rem;
  font-style: normal;
}
.patreon b {
  font-size: 2rem;
  font-stretch: 85%;
  font-weight: 900;
  margin-top: 1.5rem;
  white-space: nowrap;
}
.patreon small {
  font-size: 0.7em;
  font-weight: 400;
  margin-top: 0.5rem;
}
.patreon span {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.2;
  max-width: 100%;
  text-align: center;
  text-transform: none;
  white-space: normal;
}

.placeholder {
  align-items: center;
  background-color: var(--bg-muted);
  border: 1px solid var(--border-medium);
  border-radius: 0.75rem;
  display: flex;
  flex-grow: 1;
  font-family: "hubot-sans", sans-serif;
  font-stretch: 75%;
  font-weight: 600;
  justify-content: center;
  padding: 5px 0;
  text-transform: uppercase;
}

.race-navigation,
.race-navigation .dropdown-toggle {
  width: 100%;
}
.race-navigation i {
  font-size: 1.5rem;
}
.race-navigation .btn {
  margin-left: 5px;
  margin-right: 5px;
}
.race-navigation .btn:not(.dropdown) {
  flex-grow: 0;
}
.race-navigation .btn:not(.dropdown):not([disabled]),
.race-navigation .btn:not(.dropdown):not([disabled]):visited {
  color: var(--accent-primary);
}
.race-navigation .btn:hover,
.race-navigation .btn:hover .dropdown-toggle {
  filter: none !important;
  text-decoration: none !important;
}
.race-navigation .dropdown-menu {
  border-top: 0;
  min-width: calc(100% + 2px);
  /* The standings tables below establish their own stacking contexts
     for sticky/pinned columns and ::before edge gradients, so the
     default Bootstrap dropdown z-index (1000) ends up under them.
     Lift the menu above any sibling content. */
  z-index: 1050;
}
.race-navigation .dropdown-toggle:focus,
.race-navigation .dropdown-toggle:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Stale-while-revalidate "out of focus" effect for the standings
   table when a new schedule fetch is in flight. Keeps the previous
   data on screen (no remount of sticky pinned columns = no flicker)
   while a CSS transition blurs the stale table; when the new data
   lands we drop the .standings-fetching class and the same transition
   eases the blur back to zero on the freshly-rendered rows.

   No looping animation — the blur just goes up on fetch start and
   back down on fetch resolve. Slow fetches get a clearly out-of-focus
   table; fast fetches barely register a flutter. Small blur radii
   are GPU-composited via the will-change hint below, so this stays
   cheap even on large tables. */
.standings-fetch-host {
  position: relative;
}
.standings-table-wrap {
  transition: filter 0.35s ease-out, opacity 0.35s ease-out;
  will-change: filter, opacity;
}
.standings-table-wrap.standings-fetching {
  filter: blur(3px) saturate(0.85);
  opacity: 0.8;
  pointer-events: none;
}
/* Loader overlay sits above the blurred table (not inside it, so the
   blur filter doesn't apply to the spinner itself). Pinned to the
   visible viewport area of the section so the loader is reachable
   without scrolling on long standings tables. */
.standings-fetch-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.standings-fetch-overlay > * {
  position: sticky;
  top: 50vh;
  /* Strip the Loader card chrome — we want just the dots floating
     over the blurred table, not a panel sitting on it. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Brighten the spinner dots so they pop against the blurred table.
   The default --bg-hover is too close to the table background to
   read at a glance; --text-primary gives strong contrast in both
   themes, and the slight upscale makes the loader presence-y. */
.standings-fetch-overlay .lds-facebook {
  transform: scale(0.5) translateY(-1.5rem);
}
.standings-fetch-overlay .lds-facebook div {
  background: var(--text-primary);
}
.race-navigation .dropdown-toggle,
.race-navigation .dropdown-menu.show {
  display: grid;
  grid-template-columns: max-content 1fr auto;
  grid-template-rows: 1fr 1fr;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}
.race-navigation .dropdown-toggle::after {
  align-self: center;
  grid-column: 3;
  grid-row: 1 / span 2;
  margin-left: 10px;
}
.race-navigation .dropdown-menu > li,
.race-navigation .dropdown-item {
  display: contents;
}
.race-navigation .dropdown-item {
  padding: 5px 10px;
}
.race-navigation .dropdown-item:hover * {
  background-color: rgba(0, 0, 0, 0.05);
}
.race-navigation .race-date {
  align-items: top;
  border-right: 1px dotted var(--border-medium);
  display: flex;
  font-size: 2.2rem;
  font-stretch: 125%;
  font-weight: 900;
  grid-column: 1;
  grid-row: span 2;
  line-height: 1;
  padding-right: 8px;
}
.race-navigation .dropdown-item .race-date {
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-right-color: rgba(0, 0, 0, 0.1);
  font-size: 1.8rem;
  justify-content: center;
  padding: 5px 5px 3px;
}
.race-navigation .dropdown-item .track-name {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.race-navigation .dropdown-item .track-name.chase {
  padding-top: 10px;
  padding-bottom: 8px;
}
.race-navigation .race-date span {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-right: 8px;
}
.race-navigation .dropdown-item .race-date span {
  display: none;
}
.race-navigation .track-name {
  font-weight: 700;
  padding-left: 10px;
  grid-column: 2;
}
.race-navigation .race-details {
  display: block;
  font-style: oblique 12deg;
  grid-column: 2;
  margin: 0;
  padding-left: 10px;
}
.race-navigation .dropdown-item .race-details {
  padding-bottom: 3px;
  padding-right: 10px;
}

.cursor-pointer {
  cursor: pointer;
}

.race-tile {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 0.25rem;
  box-shadow: 0 0 3px 0 var(--shadow-secondary);
  transition: 150ms ease-in-out;
}

.race-tile:hover {
  box-shadow: 0 0 9px 0 rgba(233, 180, 76, 0.5);
  cursor: pointer;
}

.race-tile .league {
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
  border-radius: 0.25rem 0.25rem 0 0;
  font-family: "hubot-sans", sans-serif;
  font-size: 0.875rem;
  font-stretch: 85%;
  font-weight: 700;
  line-height: 1.2;
  padding-top: calc(0.5rem + 2px) !important;
  text-align: center;
  text-transform: uppercase;
}

.race-tile li {
  align-items: center;
  display: flex;
  font-family: "monaspace-neon", monospace;
  font-size: 0.8rem;
  font-weight: 600;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.race-tile li:not(:first-child) {
  border-top: 1px dotted var(--border-light);
  padding-top: 0.25rem;
  padding-bottom: 1px;
}

.race-tile li::before {
  content: "\f5e6"; /* This is the unicode for the Bootstrap icon */
  font-family: bootstrap-icons;
  display: inline-block;
  margin-right: 0.75rem;
}

.race-tile li:nth-child(1)::before {
  color: var(--medal-gold);
}

.race-tile li:nth-child(2)::before {
  color: var(--medal-silver);
}

.race-tile li:nth-child(3)::before {
  color: var(--medal-bronze);
}

#ticker {
  margin-bottom: 20px;
  margin-top: -20px;
  margin-left: calc(1.5rem * -0.5);
  margin-right: calc(1.5rem * -0.5);
  overflow: hidden;
}

#ticker .glide {
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-light);
  box-shadow: inset 0 -3px 4px -4px var(--shadow-primary);
  padding-left: 7.25rem;
  /* padding-right: calc(1.5rem * 0.5); */
}

#ticker .glide__track {
  padding-top: 7px;
  padding-bottom: 5px;
}

#ticker .glide__slide {
  padding: 5px;
}

#ticker .glide__arrows {
  align-items: center;
  background: var(--bg-muted);
  box-shadow: 0 0 5px 0 var(--shadow-primary);
  bottom: 0;
  display: flex;
  flex-direction: column;
  font-family: "hubot-sans", sans-serif;
  font-size: 1.5rem;
  font-stretch: 125%;
  font-weight: 900;
  justify-content: center;
  left: -1rem;
  line-height: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 2rem;
  padding-right: 1.1rem;
  position: absolute;
  text-align: left;
  text-transform: uppercase;
  /* top: -12px; */
  top: 0;
  transform: skew(-11deg);
  width: auto;
}

#ticker .glide__arrows > div {
  transform: skew(11deg);
}

#ticker .glide__arrow {
  background: var(--border-light);
  border: 0;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
}

#ticker .glide__arrow:hover {
  background: var(--shadow-secondary);
}

#ticker .glide__arrow:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 1px;
}

#ticker .glide__arrow:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 1px;
}

.calendar-event {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 0.25rem;
  box-shadow: 0 0 3px 0 var(--shadow-light);
  min-height: 50px;
  position: relative;
  transition: 120ms ease-out;
}

.calendar-event .calendar-event {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0.25rem;
}

.calendar-event:hover {
  box-shadow: 0 0 9px 0 rgba(233, 180, 76, 0.5);
  cursor: pointer;
  z-index: 0;
}

.time {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-stretch: 75%;
  font-weight: 600;
}

.calendar-event .title {
  font-family: "hubot-sans", sans-serif;
  font-size: 1rem;
  font-stretch: 85%;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-event .subtitle {
  font-size: 0.875rem;
  font-stretch: 85%;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-event li {
  list-style: none;
  font-size: 0.875rem;
  font-stretch: 85%;
  line-height: 20px;
}

.calendar-event .react-table {
  border-top: 1px dotted var(--border-light);
  padding-top: 0.5rem;
}

.mini-table .react-table thead th {
  background: transparent;
}

.mini-table .react-table thead th,
.mini-table .react-table tbody td {
  border-color: white !important;
  border-width: 2px;
  line-height: 1;
  padding: 0.5rem 0.75rem 0.35rem;
}

.mini-table .react-table tbody tr:nth-child(odd) td {
  background-color: rgba(0, 0, 0, 0.05);
}

.mini-table .react-table tbody td:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-left-width: 0;
}

.mini-table .react-table tbody td:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

#broadcast {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
  overflow: hidden;
}

#broadcast > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.wp-content {
  background: var(--bg-surface);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  padding: 1rem 1.75rem 5rem;
}

.card {
  background: transparent;
  border: none;
  margin-top: 1rem;
  padding-right: 10%;
}

.card:not(:first-child) {
  border-top: 1px solid var(--border-light);
  margin-top: 2rem;
  padding-top: 2rem;
}

.card-body {
  padding: 0;
}

.card-body p {
  line-height: 1.5;
  margin-top: 1rem;
}

.fc-1 {
  font-stretch: 75%;
}

.fc-2 {
  font-stretch: 85%;
}

/* Driver Flair - Circle-cropped flag icons */
.driver-flair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  overflow: hidden;
  width: 12px;
  height: 12px;
  margin-left: 0.5rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.driver-flair .fi {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Slightly larger flair for headings */
.driver-flair-lg {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}


/* Extra large flair for page headers */
.driver-flair-xl {
  width: 50px;
  height: 50px;
  margin: 0;
}


/* Driver name with flair container */
.driver-name-flair {
  display: inline-flex;
  align-items: center;
}

/* Weather display styling */
.weather-display {
  display: inline-block;
  margin-top: 0.25rem;
  word-spacing: 0.15em;
}

.weather-item {
  white-space: nowrap;
}

.weather-item .wi {
  font-size: 0.9em;
  margin-right: 0.15em;
  color: var(--text-muted);
}

/* Wind icons - slightly larger */
.weather-item .wi-wind,
.weather-item [class*="wi-wind-beaufort-"] {
  font-size: 1.1em;
}

/* Header search-bar typeahead dropdown */
.g-srch-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1050;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--shadow-secondary);
  margin-top: 2px;
  max-height: 70vh;
  overflow-y: auto;
  min-width: 280px;
  font-size: 0.9rem;
  text-align: left;
}
/* Override the site-wide a[href^="driver"] uppercase+bold rule for
   typeahead items so all categories read consistently. */
.g-srch-dropdown a[href^="driver"]:not(.nav-link) {
  font-weight: inherit;
  font-stretch: inherit;
  text-transform: none;
}
.g-srch-dropdown .g-srch-section-label {
  padding: 0.35em 0.7em 0.2em;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-light);
}
.g-srch-dropdown .g-srch-item {
  display: block;
  padding: 0.5em 0.7em;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-srch-dropdown .g-srch-item:hover,
.g-srch-dropdown .g-srch-item.active {
  background: var(--bg-row-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.g-srch-dropdown .g-srch-empty,
.g-srch-dropdown .g-srch-loading {
  padding: 0.6em 0.7em;
  color: var(--text-muted);
  font-style: italic;
}
.g-srch-dropdown .g-srch-all {
  display: block;
  padding: 0.5em 0.7em;
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--accent-primary);
  text-align: center;
  text-decoration: none;
}
.g-srch-dropdown .g-srch-all:hover { background: var(--bg-row-hover); }

/* ===== Search results page ===== */
.srh-search-page { padding: 1rem 0 2rem; text-align: left; }
.srh-results-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
  text-align: center;
}
/* The site-wide rule for a[href^="driver"] uppercases + bolds driver links.
   Inside the search list-group, render driver names with the same plain
   styling as other entity links so all four categories read consistently. */
.srh-search-page .list-group-item a[href^="driver"]:not(.nav-link) {
  font-weight: inherit;
  font-stretch: inherit;
  text-transform: none;
}
.srh-result-link { color: var(--text-primary); }

/* ===== Typeahead dropdown polish ===== */
.g-srch-dropdown {
  font-size: 0.875rem;
  border-radius: 6px;
  padding: 0.25rem 0;
}
.g-srch-dropdown .g-srch-section-label {
  padding: 0.45em 0.85em 0.25em;
  font-size: 0.7rem;
  font-weight: 600;
  background: transparent;
  border-bottom: none;
  color: var(--text-muted);
}
.g-srch-dropdown .g-srch-section-label:not(:first-child) {
  border-top: 1px solid var(--border-light);
  margin-top: 0.25rem;
  padding-top: 0.55em;
}
.g-srch-dropdown .g-srch-item {
  padding: 0.4em 0.85em;
  border-bottom: none;
  font-weight: 400;
}
.g-srch-dropdown .g-srch-all {
  border-top: 1px solid var(--border-light);
  margin-top: 0.25rem;
  background: transparent;
  font-size: 0.85rem;
}

/* Class-axis standings tabs (PR D — parallel-class scoring).
   The .standings-class-axis-label tabs are visual section dividers
   between car-class and driver-class tabs; they are non-interactive
   labels rendered as disabled nav-link spans. */
.standings-class-tabs .standings-class-axis-label .nav-link {
  font-style: italic;
  cursor: default;
  pointer-events: none;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-color: transparent;
}