/* This code is part of a computer software VLabs developed and fully owned
# by Dr. Red Oy. All rights reserved.
# (c) Dr. Red Oy, 2021-2026
#
# theme_001.css: the VLabs design system, themes Bootstrap 5.3 via CSS variables.
# Loaded by base_base.html after base_base_NNN.css, before page CSS. */


/* 1. Fonts: self-hosted in fonts/, the static origin (S3 lacks CORS) */
@font-face {
  font-family: 'Roboto Flex';
  src: url("fonts/RobotoFlex-Regular.c1f174f3148d.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url("fonts/Rubik-VariableFont_wght.c8041f987a7c.ttf") format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}


/* 2. Tokens */
:root {
  --vl-red: #b03a2e;          /* brand red: buttons, links, active states, rules */
  --vl-red-deep: #802219;     /* hover / pressed, header depth */
  --vl-red-tint: #f7ebe9;     /* selected / emphasis surface (red at ~8% on white) */
  --vl-red-line: #e3b8b2;     /* selected borders, focus ring outer */
  --vl-gray: #787878;         /* brand gray: outlines, chips, series 2, muted text on ground */
  --vl-gray-deep: #5f5f5f;    /* fill under white text (6.4:1) */
  --vl-ink: #262626;          /* primary text */
  --vl-ink-2: #5f5f5f;        /* secondary text */
  --vl-line: #d9d9d9;         /* borders, dividers, grid */
  --vl-line-soft: #ebebeb;    /* chart gridlines, table row rules */
  --vl-ground: #f3f3f3;       /* page background (neutral, not cream) */
  --vl-paper: #ffffff;        /* cards, forms, chart surfaces */
  --vl-amber: #f7c118;        /* warning colour (used with ink text) */
  --vl-focus: #1a5fb4;        /* keyboard focus outline */

  /* derived: rgb triplets for Bootstrap's rgba() variables */
  --vl-red-rgb: 176, 58, 46;
  --vl-red-line-rgb: 227, 184, 178;
  --vl-gray-rgb: 120, 120, 120;
  --vl-ink-rgb: 38, 38, 38;
  --vl-ink-2-rgb: 95, 95, 95;
  --vl-line-rgb: 217, 217, 217;
  --vl-ground-rgb: 243, 243, 243;
  --vl-paper-rgb: 255, 255, 255;
  --vl-amber-rgb: 247, 193, 24;

  /* derived: tints and the one non-brand semantic colour (success) */
  --vl-amber-tint: #fef6dc;   /* amber at ~15% on white */
  --vl-amber-deep: #e0ad0f;   /* amber button hover */
  --vl-red-deep-rgb: 128, 34, 25;
  --vl-ok: #2f7d4a;           /* success bar / text emphasis */
  --vl-ok-tint: #e8f2ec;

  --vl-radius-card: 8px;
  --vl-radius: 6px;           /* inputs, buttons */
  --vl-radius-pill: 999px;

  --vl-font-body: 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --vl-font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --vl-font-mono: Consolas, 'Courier New', monospace;

  --vl-motion: 120ms;         /* hover transitions; 0s under prefers-reduced-motion */
}


/* 3. Bootstrap 5.3 variables */
:root {
  color-scheme: light;

  --bs-body-bg: var(--vl-ground);
  --bs-body-bg-rgb: var(--vl-ground-rgb);
  --bs-body-color: var(--vl-ink);
  --bs-body-color-rgb: var(--vl-ink-rgb);
  --bs-body-font-family: var(--vl-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-emphasis-color: var(--vl-ink);
  --bs-emphasis-color-rgb: var(--vl-ink-rgb);
  --bs-secondary-color: var(--vl-ink-2);          /* .text-muted, .form-text, placeholders */
  --bs-secondary-color-rgb: var(--vl-ink-2-rgb);
  --bs-secondary-bg: var(--vl-ground);            /* disabled inputs */
  --bs-secondary-bg-rgb: var(--vl-ground-rgb);
  --bs-tertiary-color: var(--vl-ink-2);
  --bs-tertiary-bg: var(--vl-ground);             /* input-group-text */
  --bs-tertiary-bg-rgb: var(--vl-ground-rgb);
  --bs-heading-color: var(--vl-ink);

  --bs-link-color: var(--vl-red);
  --bs-link-color-rgb: var(--vl-red-rgb);
  --bs-link-hover-color: var(--vl-red-deep);
  --bs-link-hover-color-rgb: var(--vl-red-deep-rgb);
  --bs-link-decoration: none;
  --bs-code-color: var(--vl-red-deep);
  --bs-highlight-bg: var(--vl-amber-tint);

  --bs-border-color: var(--vl-line);
  --bs-border-color-translucent: var(--vl-line);
  --bs-border-radius: var(--vl-radius);
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: var(--vl-radius-card);
  --bs-border-radius-xl: 12px;
  --bs-border-radius-pill: var(--vl-radius-pill);

  --bs-primary: var(--vl-red);
  --bs-primary-rgb: var(--vl-red-rgb);
  --bs-secondary: var(--vl-gray);
  --bs-secondary-rgb: var(--vl-gray-rgb);
  --bs-danger: var(--vl-red);
  --bs-danger-rgb: var(--vl-red-rgb);
  --bs-warning: var(--vl-amber);
  --bs-warning-rgb: var(--vl-amber-rgb);
  --bs-info: var(--vl-gray);
  --bs-info-rgb: var(--vl-gray-rgb);
  --bs-light: var(--vl-ground);
  --bs-light-rgb: var(--vl-ground-rgb);
  --bs-dark: var(--vl-ink);
  --bs-dark-rgb: var(--vl-ink-rgb);

  /* subtle/emphasis sets feed .alert-*, .text-*-emphasis, .bg-*-subtle */
  --bs-primary-text-emphasis: var(--vl-red-deep);
  --bs-primary-bg-subtle: var(--vl-red-tint);
  --bs-primary-border-subtle: var(--vl-red);
  --bs-secondary-text-emphasis: var(--vl-ink);
  --bs-secondary-bg-subtle: var(--vl-ground);
  --bs-secondary-border-subtle: var(--vl-gray);
  --bs-danger-text-emphasis: var(--vl-red-deep);
  --bs-danger-bg-subtle: var(--vl-red-tint);
  --bs-danger-border-subtle: var(--vl-red);
  --bs-warning-text-emphasis: var(--vl-ink);
  --bs-warning-bg-subtle: var(--vl-amber-tint);
  --bs-warning-border-subtle: var(--vl-amber);
  --bs-info-text-emphasis: var(--vl-ink);
  --bs-info-bg-subtle: var(--vl-ground);
  --bs-info-border-subtle: var(--vl-gray);
  --bs-success-text-emphasis: var(--vl-ok);
  --bs-success-bg-subtle: var(--vl-ok-tint);
  --bs-success-border-subtle: var(--vl-ok);

  --bs-focus-ring-color: rgba(var(--vl-red-rgb), .25);
  --bs-form-invalid-color: var(--vl-red);
  --bs-form-invalid-border-color: var(--vl-red);
}


/* 4. Base: type scale (1.25), links, focus, motion */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.modal-title, .card-title {
  font-family: var(--vl-font-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--vl-ink);
}

h1, .h1 { font-size: 1.75rem; letter-spacing: -0.01em; }
h2, .h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; font-weight: 500; }
h6, .h6 { font-size: .875rem; font-weight: 500; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-weight: 500; }

/* Links underline on hover only; Bootstrap ignores --bs-link-decoration. */
a {
  text-decoration: none;
}

a:where(:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.list-group-item):not(.card-header):not(.accordion-button):not(.page-link):not(.vlabs-blockbtn):not(.vlabs-clickbtn):not(.vl-backrow-link)):hover,
a:where(:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.list-group-item):not(.card-header):not(.accordion-button):not(.page-link):not(.vlabs-blockbtn):not(.vlabs-clickbtn):not(.vl-backrow-link)):focus-visible {
  text-decoration: underline;
}

/* Links in rendered text keep an underline (red on ink alone is under 3:1). */
.vl-taskdesc a:not(.btn),
.vl-prose a:not(.btn),
.card-text a:not(.btn),
.eng_previewInstructions a:not(.btn),
.eng_previewHints a:not(.btn),
.cre_previewInstructions a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--vl-red);
  text-underline-offset: .15em;
}

:focus-visible {
  outline: 2px solid var(--vl-focus);
  outline-offset: 2px;
}

/* Brand focus ring instead of Bootstrap's blue. */
.nav-link:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(var(--vl-red-rgb), .25);
}
.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--vl-red-rgb), .25);
}

/* Numbers line up in inputs and tables. */
.input-group, .table, .form-control, .vl-num {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vl-motion: 0s; }
}


/* 5. Chrome: navbar, user chip, footer */
.vl-navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: rgba(var(--vl-paper-rgb), .88);
  --bs-navbar-hover-color: var(--vl-paper);
  --bs-navbar-active-color: var(--vl-paper);
  --bs-navbar-brand-color: var(--vl-paper);
  --bs-navbar-brand-hover-color: var(--vl-paper);
  --bs-navbar-brand-font-size: 1.125rem;
  --bs-navbar-toggler-border-color: rgba(var(--vl-paper-rgb), .35);
  --bs-navbar-toggler-focus-width: 2px;
  background-color: var(--vl-red);
  min-height: 56px;
}

.vl-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 56px;
  padding: 0;
  font-family: var(--vl-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vl-navbar-logo {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

/* Colour set here so a <button class="nav-link"> matches the anchors. */
.vl-navbar .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .75rem;
  font-weight: 500;
  font-size: .9375rem;
  color: var(--bs-nav-link-color);
  text-decoration: none;
}

.vl-navbar .navbar-nav .nav-link:hover,
.vl-navbar .navbar-nav .nav-link:focus {
  color: var(--bs-nav-link-hover-color);
}

.vl-navbar .navbar-nav .nav-link.active {
  color: var(--bs-navbar-active-color);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--vl-paper);
  text-underline-offset: .4em;
}

.vl-navbar .navbar-nav .nav-link.vl-nav-secondary {
  color: rgba(var(--vl-paper-rgb), .6);
}
.vl-navbar .navbar-nav .nav-link.vl-nav-secondary:hover {
  color: var(--vl-paper);
}

.vl-navbar .nav-link:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(var(--vl-paper-rgb), .4);
}

.vl-navbar .navbar-toggler {
  min-height: 44px;
}

.vl-navbar .dropdown-menu {
  --bs-dropdown-bg: var(--vl-paper);
  --bs-dropdown-color: var(--vl-ink);
  --bs-dropdown-border-color: var(--vl-line);
  --bs-dropdown-border-radius: var(--vl-radius-card);
  --bs-dropdown-link-color: var(--vl-ink);
  --bs-dropdown-link-hover-color: var(--vl-red);
  --bs-dropdown-link-hover-bg: var(--vl-red-tint);
  --bs-dropdown-link-active-color: var(--vl-paper);
  --bs-dropdown-link-active-bg: var(--vl-red);
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-item-padding-x: 1rem;
}

.vl-navbar .dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.vl-userchip {
  display: inline-block;
  max-width: 18rem;
  padding: .3rem .8rem;
  border-radius: var(--vl-radius-pill);
  background-color: rgba(var(--vl-paper-rgb), .15);
  color: var(--vl-paper);
  font-size: .8125rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .vl-navbar .navbar-nav .nav-link {
    min-height: 56px;
    padding: 0 .75rem;
  }
  .vl-navbar .navbar-nav > .nav-item:first-child .nav-link {
    padding-left: .25rem;
  }
  .vl-userchip {
    margin-left: auto;
  }
}

@media (max-width: 767.98px) {
  .vl-navbar .navbar-collapse {
    padding: .25rem 0 .75rem;
  }
  .vl-navbar .navbar-nav .nav-link {
    padding-left: .25rem;
  }
  .vl-userchip {
    max-width: 100%;
    margin: .5rem 0 0;
  }
}

.vl-footer {
  margin-top: 4rem;
  padding: 2rem 0 1.75rem;
  border-top: 1px solid var(--vl-line);
  text-align: center;
  color: var(--vl-ink-2);
  font-size: .875rem;
}

.vl-footer-logo {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto .875rem;
}

.vl-footer-copy {
  margin: 0 0 .375rem;
}

.vl-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
}

.vl-footer-links a {
  color: var(--vl-ink-2);
}

.vl-footer-links a:hover {
  color: var(--vl-red);
}


/* 6. Page header: back-link row, preview strip, page title, section title, rule */
.vl-backrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  width: 100%;
  min-height: 44px;
  margin: .25rem 0 0;
  border-bottom: 1px solid var(--vl-line);
  font-size: .9375rem;
  color: var(--vl-ink-2);
}

.vl-backrow-bottom {
  margin-top: 2.5rem;
  border-bottom: 0;
  border-top: 1px solid var(--vl-line);
}

/* As a .row child: gutter as margin so the divider ends where the cards end. */
.row > .vl-backrow {
  width: calc(100% - var(--bs-gutter-x));
  margin-left: calc(var(--bs-gutter-x) * .5);
  margin-right: calc(var(--bs-gutter-x) * .5);
  padding-left: 0;
  padding-right: 0;
}

.vl-backrow-left,
.vl-backrow-center,
.vl-backrow-right {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.vl-backrow-center {
  flex: 1 1 auto;
  justify-content: center;
}

.vl-backrow-right {
  margin-left: auto;
}

.vl-backrow-link,
.vl-backrow .clickme {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  min-height: 44px;
  color: var(--vl-ink-2);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--vl-motion);
}

.vl-backrow-link:hover,
.vl-backrow .clickme:hover {
  color: var(--vl-red);
  text-decoration: none;
}

.vl-backrow img {
  width: 18px;
  height: 18px;
  opacity: .7;
}

.vl-rule {
  margin: .5rem 0;
  line-height: 0;
}

/* No second rule after the back row, which has its own. */
.vl-backrow + .vl-rule {
  display: none;
}

.vl-page-title {
  margin: 1.5rem 0 .5rem;
  padding-left: .75rem;
  border-left: 4px solid var(--vl-red);
  font-family: var(--vl-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--vl-ink);
  overflow-wrap: anywhere;
}

.vl-page-subtitle {
  margin: 0 0 1.5rem;
  padding-left: calc(.75rem + 4px);
  color: var(--vl-ink-2);
}

/* Gap above a section heading. */
.vl-section-title {
  margin: 1.5rem 0 .75rem;
  font-family: var(--vl-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--vl-ink);
}

.vl-section-title::after {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin-top: .5rem;
  border-radius: 2px;
  background-color: var(--vl-red);
}

/* legacy class: a quiet divider */
.hr-1 {
  border: 0;
  border-top: 1px solid var(--vl-line);
  background: none;
  color: inherit;
}

/* Preview strip: full width, ink on amber, label centred; own row on a phone. */
.vl-previewbar {
  background-color: var(--vl-amber);
  color: var(--vl-ink);
}

/* Grid keeps the label truly centred with or without a right link. */
.vl-previewbar .vl-backrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin: 0;
  min-height: 40px;
  border-bottom: 0;
  font-size: .875rem;
  color: var(--vl-ink);
}

.vl-previewbar .vl-backrow-left,
.vl-previewbar .vl-backrow-center,
.vl-previewbar .vl-backrow-right {
  min-height: 40px;
}

.vl-previewbar .vl-backrow-link,
.vl-previewbar .vl-backrow .clickme {
  min-height: 40px;
  color: var(--vl-ink);
}

.vl-previewbar .vl-backrow-link:hover,
.vl-previewbar .vl-backrow .clickme:hover {
  color: var(--vl-red-deep);
}

.vl-previewbar .vl-backrow img {
  opacity: .85;
}

.vl-previewbar .vl-chip {
  padding: 0;
  border: 0;
  background: none;
  color: var(--vl-ink);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}

@media (max-width: 575.98px) {
  /* Phone: back to flex, label on its own line above the links. */
  .vl-previewbar .vl-backrow {
    display: flex;
    padding: .25rem 0 .125rem;
  }
  .vl-previewbar .vl-backrow-center {
    order: -1;
    flex-basis: 100%;
    min-height: 28px;
  }
  .vl-previewbar .vl-backrow-left,
  .vl-previewbar .vl-backrow-right,
  .vl-previewbar .vl-backrow-link {
    min-height: 36px;
  }
}


/* 7. Components */

/* Buttons: filled red = primary, outline gray = secondary, outline red = danger.
   Green variants map to primary (editors' Save buttons). */
.btn {
  --bs-btn-border-radius: var(--vl-radius);
  --bs-btn-font-weight: 500;
  --bs-btn-focus-shadow-rgb: var(--vl-red-rgb);
}

.btn-primary,
.btn-success,
.btn-outline-success,
.btn-danger,
.buttonBrand {
  --bs-btn-color: var(--vl-paper);
  --bs-btn-bg: var(--vl-red);
  --bs-btn-border-color: var(--vl-red);
  --bs-btn-hover-color: var(--vl-paper);
  --bs-btn-hover-bg: var(--vl-red-deep);
  --bs-btn-hover-border-color: var(--vl-red-deep);
  --bs-btn-focus-shadow-rgb: var(--vl-red-rgb);
  --bs-btn-active-color: var(--vl-paper);
  --bs-btn-active-bg: var(--vl-red-deep);
  --bs-btn-active-border-color: var(--vl-red-deep);
  --bs-btn-disabled-color: var(--vl-paper);
  --bs-btn-disabled-bg: var(--vl-red);
  --bs-btn-disabled-border-color: var(--vl-red);
}

.btn-outline-primary,
.btn-outline-danger {
  --bs-btn-color: var(--vl-red);
  --bs-btn-bg: var(--vl-paper);
  --bs-btn-border-color: var(--vl-red);
  --bs-btn-hover-color: var(--vl-paper);
  --bs-btn-hover-bg: var(--vl-red);
  --bs-btn-hover-border-color: var(--vl-red);
  --bs-btn-focus-shadow-rgb: var(--vl-red-rgb);
  --bs-btn-active-color: var(--vl-paper);
  --bs-btn-active-bg: var(--vl-red-deep);
  --bs-btn-active-border-color: var(--vl-red-deep);
  --bs-btn-disabled-color: var(--vl-red);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--vl-red);
}

.btn-secondary {
  --bs-btn-color: var(--vl-paper);
  --bs-btn-bg: var(--vl-gray-deep);
  --bs-btn-border-color: var(--vl-gray-deep);
  --bs-btn-hover-color: var(--vl-paper);
  --bs-btn-hover-bg: var(--vl-ink);
  --bs-btn-hover-border-color: var(--vl-ink);
  --bs-btn-focus-shadow-rgb: var(--vl-gray-rgb);
  --bs-btn-active-color: var(--vl-paper);
  --bs-btn-active-bg: var(--vl-ink);
  --bs-btn-active-border-color: var(--vl-ink);
  --bs-btn-disabled-color: var(--vl-paper);
  --bs-btn-disabled-bg: var(--vl-gray-deep);
  --bs-btn-disabled-border-color: var(--vl-gray-deep);
}

.btn-outline-secondary {
  --bs-btn-color: var(--vl-ink);
  --bs-btn-bg: var(--vl-paper);
  --bs-btn-border-color: var(--vl-gray);
  --bs-btn-hover-color: var(--vl-paper);
  --bs-btn-hover-bg: var(--vl-gray-deep);
  --bs-btn-hover-border-color: var(--vl-gray-deep);
  --bs-btn-focus-shadow-rgb: var(--vl-gray-rgb);
  --bs-btn-active-color: var(--vl-paper);
  --bs-btn-active-bg: var(--vl-ink);
  --bs-btn-active-border-color: var(--vl-ink);
  --bs-btn-disabled-color: var(--vl-ink-2);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--vl-line);
}

.btn-warning {
  --bs-btn-color: var(--vl-ink);
  --bs-btn-bg: var(--vl-amber);
  --bs-btn-border-color: var(--vl-amber);
  --bs-btn-hover-color: var(--vl-ink);
  --bs-btn-hover-bg: var(--vl-amber-deep);
  --bs-btn-hover-border-color: var(--vl-amber-deep);
  --bs-btn-focus-shadow-rgb: var(--vl-amber-rgb);
  --bs-btn-active-color: var(--vl-ink);
  --bs-btn-active-bg: var(--vl-amber-deep);
  --bs-btn-active-border-color: var(--vl-amber-deep);
}

.btn-light {
  --bs-btn-color: var(--vl-ink);
  --bs-btn-bg: var(--vl-ground);
  --bs-btn-border-color: var(--vl-line);
  --bs-btn-hover-color: var(--vl-ink);
  --bs-btn-hover-bg: var(--vl-line-soft);
  --bs-btn-hover-border-color: var(--vl-line);
  --bs-btn-active-bg: var(--vl-line);
  --bs-btn-active-border-color: var(--vl-line);
}

.btn-link {
  --bs-btn-color: var(--vl-red);
  --bs-btn-hover-color: var(--vl-red-deep);
  --bs-btn-active-color: var(--vl-red-deep);
}

/* Cards: paper, hairline, radius 8, no shadow. */
.card {
  --bs-card-bg: var(--vl-paper);
  --bs-card-color: var(--vl-ink);
  --bs-card-border-color: var(--vl-line);
  --bs-card-border-radius: var(--vl-radius-card);
  --bs-card-inner-border-radius: calc(var(--vl-radius-card) - 1px);
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-bg: var(--vl-paper);
  --bs-card-cap-color: var(--vl-ink);
  --bs-card-cap-padding-y: .75rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-box-shadow: none;
}

/* border-dark on cards stays a hairline. */
.card.border-dark,
.accordion-item.border-dark {
  --bs-dark-rgb: var(--vl-line-rgb);
}

.card-header {
  font-family: var(--vl-font-display);
  font-weight: 500;
  transition: background-color var(--vl-motion), color var(--vl-motion);
}

/* Course card header = link to the course: red bar, gray when inactive.
   .vl-card-link is the link itself; .vl-coursehead holds a link and a control. */
.vl-card-link,
.vl-coursehead {
  background-color: var(--vl-red);
  border-bottom-color: var(--vl-red);
  color: var(--vl-paper);
}

.vl-card-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.vl-card-link:hover,
.vl-card-link:focus-visible,
.vl-coursehead:hover {
  background-color: var(--vl-red-deep);
  border-bottom-color: var(--vl-red-deep);
  color: var(--vl-paper);
  text-decoration: none;
}

/* Own rule: browsers without :has() drop the whole selector list. */
.vl-coursehead:has(.vl-coursehead-link:focus-visible) {
  background-color: var(--vl-red-deep);
  border-bottom-color: var(--vl-red-deep);
  color: var(--vl-paper);
  text-decoration: none;
}

.vl-coursehead.is-inactive {
  background-color: var(--vl-gray-deep);
  border-bottom-color: var(--vl-gray-deep);
}

.vl-coursehead.is-inactive:hover {
  background-color: var(--vl-ink);
  border-bottom-color: var(--vl-ink);
}

/* Separate from the hover above, see :has() note. */
.vl-coursehead.is-inactive:has(.vl-coursehead-link:focus-visible) {
  background-color: var(--vl-ink);
  border-bottom-color: var(--vl-ink);
}

/* Link carries the padding (full hit area); no wrap keeps the edit icon beside. */
.vl-coursehead {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: 0;
}

.vl-coursehead-link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  min-width: 0;
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: inherit;
  text-decoration: none;
}

.vl-coursehead-link:hover,
.vl-coursehead-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* White focus ring on the red bars (overrides base_base's blue one). */
.vl-card-link:focus-visible {
  outline: 2px solid var(--vl-paper);
  outline-offset: -4px;
}

.vl-coursehead-link:focus-visible {
  outline: 2px solid var(--vl-paper);
  outline-offset: -4px;
}

.vl-coursehead-title {
  font-size: 1.25rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Edit-name button on the red: white glyph and ring; flex: none keeps its size. */
.vl-coursehead .vl-iconbtn {
  flex: none;
  margin-right: var(--bs-card-cap-padding-x);
}

.vl-coursehead .vl-iconbtn img {
  filter: invert(1);
}

.vl-coursehead .vl-iconbtn:hover {
  background-color: rgba(255, 255, 255, .18);
}

.vl-coursehead .vl-iconbtn:focus-visible {
  outline-color: var(--vl-paper);
}

/* Chips on a red/gray header: white outline, 10% wash (keeps text at 4.5:1). */
.vl-card-link .vl-chip,
.vl-coursehead .vl-chip {
  border-color: rgba(255, 255, 255, .45);
  background-color: rgba(255, 255, 255, .10);
  color: var(--vl-paper);
}

/* Rename form in the card body. */
.vl-coursehead-edit:not(:empty) {
  margin-bottom: 1rem;
}

.selectCourse {
  transition: border-color var(--vl-motion);
}

.selectCourse:hover {
  border-color: var(--vl-red-line);
}

.cardHeaderRed {
  background-color: var(--vl-red);
  color: var(--vl-paper);
  border-bottom-color: var(--vl-red);
}

.cardHeaderGray,
.cardHeaderGrayTextWhite {
  background-color: var(--vl-gray-deep);
  color: var(--vl-paper);
  border-bottom-color: var(--vl-gray-deep);
}

.selectCourse:hover > .cardHeaderRed,
.hoverRedGray:hover .cardHeaderRed,
a.cardHeaderRed:hover,
button.cardHeaderRed:hover {
  background-color: var(--vl-red-deep);
  border-bottom-color: var(--vl-red-deep);
}

.selectCourse:hover > .cardHeaderGray,
.hoverRedGray:hover .cardHeaderGray,
a.cardHeaderGray:hover,
button.cardHeaderGray:hover {
  background-color: var(--vl-ink);
  border-bottom-color: var(--vl-ink);
}

/* Forms: paper inputs, ground prefix, red focus, red checks. */
.form-label,
.col-form-label {
  font-weight: 500;
}

.form-control,
.form-select {
  background-color: var(--vl-paper);
  color: var(--vl-ink);
  border-color: var(--vl-line);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--vl-paper);
  color: var(--vl-ink);
  border-color: var(--vl-red);
  box-shadow: 0 0 0 .25rem rgba(var(--vl-red-rgb), .15);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--vl-ground);
  color: var(--vl-ink-2);
}

.input-group-text {
  background-color: var(--vl-ground);
  color: var(--vl-ink-2);
  border-color: var(--vl-line);
}

.form-check-input {
  background-color: var(--vl-paper);
  border-color: var(--vl-gray);
}

.form-check-input:checked {
  background-color: var(--vl-red);
  border-color: var(--vl-red);
}

.form-check-input:focus {
  border-color: var(--vl-red-line);
  box-shadow: 0 0 0 .25rem rgba(var(--vl-red-rgb), .2);
}

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

.form-control.is-invalid,
.was-validated .form-control:invalid,
form .form-control.error,
form input.error,
form select.error,
form textarea.error {
  background-color: var(--vl-red-tint);
  border-color: var(--vl-red);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--vl-red-rgb), .2);
}

/* Accordion: open = red tint with deep-red text; nothing blue. */
.accordion {
  --bs-accordion-bg: var(--vl-paper);
  --bs-accordion-color: var(--vl-ink);
  --bs-accordion-border-color: var(--vl-line);
  --bs-accordion-border-radius: var(--vl-radius-card);
  --bs-accordion-inner-border-radius: calc(var(--vl-radius-card) - 1px);
  --bs-accordion-btn-color: var(--vl-ink);
  --bs-accordion-btn-bg: var(--vl-paper);
  --bs-accordion-btn-padding-y: .875rem;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1.25rem;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-active-bg: var(--vl-red-tint);
  --bs-accordion-active-color: var(--vl-red-deep);
  --bs-accordion-btn-focus-border-color: var(--vl-red-line);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--vl-red-rgb), .2);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23262626'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%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='%23802219'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button {
  font-family: var(--vl-font-display);
  font-weight: 500;
}

/* Tables: hairline rows, header on ground in ink, never a dark head. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--vl-ink);
  --bs-table-border-color: var(--vl-line-soft);
  --bs-table-striped-bg: var(--vl-ground);
  --bs-table-striped-color: var(--vl-ink);
  --bs-table-hover-bg: var(--vl-ground);
  --bs-table-hover-color: var(--vl-ink);
  --bs-table-active-bg: var(--vl-red-tint);
  --bs-table-active-color: var(--vl-ink);
}

.table > thead,
.table-light,
.table-dark {
  --bs-table-bg: var(--vl-ground);
  --bs-table-color: var(--vl-ink);
  --bs-table-border-color: var(--vl-line);
  --bs-table-striped-bg: var(--vl-ground);
  --bs-table-striped-color: var(--vl-ink);
  --bs-table-hover-bg: var(--vl-ground);
  --bs-table-hover-color: var(--vl-ink);
  --bs-table-active-bg: var(--vl-ground);
  --bs-table-active-color: var(--vl-ink);
  color: var(--vl-ink);
  border-color: var(--vl-line);
}

.table th {
  font-weight: 600;
}

/* Bootstrap's own cell padding: 8px, 4px in a small table. */
.table > :not(caption) > * > * {
  padding: .5rem .5rem;
}

.table-sm > :not(caption) > * > * {
  padding: .25rem .25rem;
}

/* No dead space under a table that ends a card body. */
.card-body > .table:last-child,
.card-body > .table-responsive:last-child > .table:last-child {
  margin-bottom: 0;
}

/* Streams table of a membrane plant: permeate rows in brand red. */
.vl-streams .vl-stream-permeate > * {
  color: var(--vl-red);
}

/* Modals: paper, radius 8, a 4px red strip on top. */
.modal {
  --bs-modal-bg: var(--vl-paper);
  --bs-modal-color: var(--vl-ink);
  --bs-modal-border-color: var(--vl-line);
  --bs-modal-border-radius: var(--vl-radius-card);
  --bs-modal-inner-border-radius: calc(var(--vl-radius-card) - 1px);
  --bs-modal-header-border-color: var(--vl-line);
  --bs-modal-footer-border-color: var(--vl-line);
  --bs-modal-box-shadow: 0 12px 40px rgba(var(--vl-ink-rgb), .2);
}

.modal-content {
  border-top: 4px solid var(--vl-red);
}

/* Alerts and messages: a 4px bar in the semantic colour, tint ground, ink text. */
.alert {
  --bs-alert-color: var(--vl-ink);
  --bs-alert-border-radius: var(--vl-radius);
  --bs-alert-padding-y: .75rem;
  --bs-alert-padding-x: 1rem;
  --bs-alert-link-color: var(--vl-red-deep);
  border-width: 0 0 0 4px;
}

.alert-dismissible {
  padding-right: 3rem;
}

/* Badges: pills. */
.badge {
  --bs-badge-border-radius: var(--vl-radius-pill);
  --bs-badge-font-weight: 500;
  --bs-badge-padding-x: .7em;
  --bs-badge-padding-y: .35em;
}

/* Tooltips: ink, opaque. */
.tooltip {
  --bs-tooltip-bg: var(--vl-ink);
  --bs-tooltip-color: var(--vl-paper);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-border-radius: var(--vl-radius);
}

/* Progress: red bar on a ground track. */
.progress,
.progress-stacked {
  --bs-progress-bg: var(--vl-line-soft);
  --bs-progress-bar-bg: var(--vl-red);
  --bs-progress-border-radius: var(--vl-radius-pill);
  --bs-progress-box-shadow: none;
}

/* List groups, tabs, pagination, dropdowns outside the navbar. */
.list-group {
  --bs-list-group-bg: var(--vl-paper);
  --bs-list-group-color: var(--vl-ink);
  --bs-list-group-border-color: var(--vl-line-soft);
  --bs-list-group-border-radius: var(--vl-radius);
  --bs-list-group-action-hover-bg: var(--vl-ground);
  --bs-list-group-action-active-bg: var(--vl-red-tint);
  --bs-list-group-active-bg: var(--vl-red);
  --bs-list-group-active-border-color: var(--vl-red);
}

.nav {
  --bs-nav-link-color: var(--vl-ink-2);
  --bs-nav-link-hover-color: var(--vl-red);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--vl-line);
  --bs-nav-tabs-link-hover-border-color: var(--vl-line-soft) var(--vl-line-soft) var(--vl-line);
  --bs-nav-tabs-link-active-color: var(--vl-red);
  --bs-nav-tabs-link-active-bg: var(--vl-paper);
  --bs-nav-tabs-link-active-border-color: var(--vl-line) var(--vl-line) var(--vl-paper);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--vl-red);
}

.pagination {
  --bs-pagination-color: var(--vl-red);
  --bs-pagination-bg: var(--vl-paper);
  --bs-pagination-border-color: var(--vl-line);
  --bs-pagination-hover-color: var(--vl-red-deep);
  --bs-pagination-hover-bg: var(--vl-red-tint);
  --bs-pagination-hover-border-color: var(--vl-line);
  --bs-pagination-focus-color: var(--vl-red-deep);
  --bs-pagination-focus-bg: var(--vl-red-tint);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--vl-red-rgb), .25);
  --bs-pagination-active-bg: var(--vl-red);
  --bs-pagination-active-border-color: var(--vl-red);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--vl-paper);
  --bs-dropdown-color: var(--vl-ink);
  --bs-dropdown-border-color: var(--vl-line);
  --bs-dropdown-border-radius: var(--vl-radius-card);
  --bs-dropdown-link-color: var(--vl-ink);
  --bs-dropdown-link-hover-color: var(--vl-red);
  --bs-dropdown-link-hover-bg: var(--vl-red-tint);
  --bs-dropdown-link-active-color: var(--vl-paper);
  --bs-dropdown-link-active-bg: var(--vl-red);
}

/* Datetimepicker (tempusdominus): calendar button like the input-group prefix. */
.input-group-append .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: var(--vl-red);
}

.bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: var(--vl-red);
}


/* 8. Utilities: chips, notices */
.vl-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2em .7em;
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius-pill);
  background-color: var(--vl-ground);
  color: var(--vl-ink-2);
  font-family: var(--vl-font-body);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.vl-chip-closed {
  border-color: var(--vl-red-line);
  background-color: var(--vl-red-tint);
  color: var(--vl-red-deep);
}

.vl-chip-warn {
  border-color: var(--vl-amber);
  background-color: var(--vl-amber-tint);
  color: var(--vl-ink);
}

.vl-notice {
  display: inline-block;
  max-width: 100%;
  padding: .4rem .75rem;
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius);
  background-color: var(--vl-ground);
  color: var(--vl-ink-2);
  font-size: .875rem;
  line-height: 1.4;
}

.vl-notice-closed {
  border-color: var(--vl-red-line);
  background-color: var(--vl-red-tint);
  color: var(--vl-red-deep);
}

.vl-notice-warn {
  border-color: var(--vl-amber);
  background-color: var(--vl-amber-tint);
  color: var(--vl-ink);
}


/* 9. Phone */
@media (max-width: 575.98px) {
  .vl-page-title {
    margin-top: 1.25rem;
    font-size: 1.5rem;
  }
  .btn:not(.btn-sm) {
    min-height: 44px;
  }
  .card {
    --bs-card-spacer-x: 1rem;
    --bs-card-cap-padding-x: 1rem;
  }
  .accordion {
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-body-padding-x: .75rem;
  }
  .vl-chip {
    white-space: normal;
  }
  /* Task list rows become blocks: title and icons, run count, actions. */
  .vl-tasklist > :not(caption) > tr {
    display: block;
    padding: .5rem 0;
    border-bottom: 1px solid var(--vl-line-soft);
  }
  .vl-tasklist > :not(caption) > tr > td {
    display: block;
    padding: .125rem 0;
    border: 0;
  }
}