/* 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 design system of Dr. Red's Virtual Labs.
#
# Loaded by base_base.html right after base_base_NNN.css and before the page's
# own csslinkblock / cssblock, so it wins over the app-level CSS files but a
# page can still override it. Bootstrap 5.3 is themed through its CSS custom
# properties: no Sass, no build step, no !important.
#
# Sections
#   1. Fonts        Roboto Flex (body) and Rubik (display), self-hosted in fonts/
#   2. Tokens       --vl-* : the only place a colour, radius or font is spelled out
#   3. Bootstrap    --bs-* overrides on :root
#   4. Base         type scale, links, focus, motion
#   5. Chrome       .vl-navbar, .vl-userchip, .vl-footer
#   6. Page header  .vl-backrow, .vl-previewbar, .vl-page-title, .vl-page-subtitle, .vl-section-title, .vl-rule
#   7. Components   buttons, cards, forms, accordion, tables, modals, alerts, chips, ...
#   8. Utilities    .vl-chip, .vl-notice
#   9. Phone        adjustments under 576px
#
# Class glossary (reuse these; do not invent parallel ones)
#   .vl-page-title       h1 of a page: Rubik 1.75rem/600 with the 4px red bar on the left
#   .vl-page-subtitle    one quiet line under the title (ink-2, same left inset)
#   .vl-section-title    h2 inside a page: Rubik 1.25rem/600 with a short 3px red underline
#   .vl-backrow          the back-link row above a page (left link, optional centre chip,
#                        optional right link), 44px tall, 1px line below; the DrRedBrand
#                        "topnavigation" tag renders exactly this markup.
#   .vl-backrow-bottom   the same row at the bottom of a long page (line above instead)
#   .vl-backrow-link     a link inside the row (chevron icon + text, ink-2, red on hover)
#   .vl-previewbar       the teacher's amber "previewing" strip under the navbar: it wraps
#                        a .vl-backrow and restyles it (student lab, course preview)
#   .vl-rule             the DrRedBrand "horizontal_line" wrapper (2px red svg line)
#   .vl-card-link        a course card header that is itself the link: a red bar with
#                        paper text, deeper red on hover (the student's course list)
#   .vl-coursehead       a course card header holding a link (.vl-coursehead-link with
#                        a .vl-coursehead-title) and a control beside it; same red bar,
#                        gray with .is-inactive (the teacher's course list)
#   .vl-chip             pill: ground fill, ink-2 text; .vl-chip-closed (red on red tint),
#                        .vl-chip-warn (ink on amber tint)
#   .vl-notice           a short inline notice box; same -closed / -warn variants
#   .vl-prose            marks a block of running text; its links keep the prose underline
#   .vl-tasklist         a task table whose rows stack into blocks under 576px
#   .cardHeaderRed       red card header (the primary object of a page only)
#   .cardHeaderGray      gray card header, white on --vl-gray-deep (legacy pickers)
#   .buttonBrand         legacy alias of .btn-primary
#   Button system: .btn-primary = filled red (also .btn-success, .buttonBrand);
#                  .btn-outline-secondary = outline gray; .btn-outline-danger = outline red.
*/


/* ---------------------------------------------------------------------------
   1. Fonts
   Self-hosted next to this file (fonts/). The public S3 bucket serves the same
   files but without CORS headers, and browsers refuse cross-origin fonts, so
   they must come from the static origin. Roboto Flex here is a static 400
   instance (bold is synthesised); Rubik is a variable font, 300-900.
   --------------------------------------------------------------------------- */
@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;    /* the fill under white text (white on #787878 is 4.4:1, on this 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 5.3 compiles a resting underline
   into a{} and never reads --bs-link-decoration, so it is removed here with
   the same specificity, later in the cascade. Component links (buttons, nav,
   cards ...) carry their own hover states and stay bare. */
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 inside rendered text keep a thin underline at rest: task descriptions
   and hints (.vl-taskdesc, markdown), prose blocks (.vl-prose), the editor
   previews and the help pages' card text. Red on ink alone is 2.5:1, below
   the 3:1 a colour-only link needs; navigation and UI links stay bare. */
.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;
}

/* Bootstrap paints a literal blue ring on these; make it the brand ring. */
.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 is stated here (not only inherited from Bootstrap's .nav-link) so a
   native <button class="nav-link vlabs-clickbtn"> renders like 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);
}

/* Rendered straight into a page's bodyblock the row is a .row child, whose
   gutter padding would let the divider overhang the content column by half a
   gutter on each side; take the gutter as margin instead so the line 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;
}

/* A page that still calls horizontal_line right after topnavigation would
   draw two rules; the back row already carries 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);
}

/* The gap above a section heading is the page's largest rhythm step; 24px is
   enough to separate two sections without pushing the next one off screen. */
.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, no longer a 2px red border: a quiet divider */
.hr-1 {
  border: 0;
  border-top: 1px solid var(--vl-line);
  background: none;
  color: inherit;
}

/* The teacher's preview strip wraps a back row and restyles it: full width
   under the navbar, ink on amber, the links at the ends and the label centred;
   on a phone the label sits on its own row above the links. */
.vl-previewbar {
  background-color: var(--vl-amber);
  color: var(--vl-ink);
}

/* Three columns rather than the row's flex: the label is the middle column, so
   it sits at the true centre of the bar whether or not the right link is there
   (the lab page has "Edit task", the course preview page has nothing on the
   right). The end tracks are minmax(0, 1fr) so a long label shrinks them
   instead of overflowing the bar; the phone rules below put the flex row back. */
.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) {
  /* Back to the flex row: the label takes its own full-width line above the
     links (order / flex-basis below), which the grid cannot express. */
  .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: one system. Filled red = the primary action; outline gray =
   secondary; outline red = destructive. Green variants are mapped to the
   primary look so the editors' Save buttons (btn-outline-success) read as
   the primary action next to the outline-red Cancel 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, one hairline, radius 8, no shadow. Headers are paper with an
   ink title by default; a course card's header is a red bar that is the link
   to the course (.vl-card-link / .vl-coursehead below), .cardHeaderRed is
   reserved for the page's primary object, .cardHeaderGray for the legacy
   equipment pickers. */
.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;
}

/* Templates still say border-dark on cards; keep that a hairline, not black. */
.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);
}

/* A course card's header is the link to the course: brand red, paper text,
   deeper red under the pointer or when the link takes keyboard focus; gray for
   a course that is not active. Two shapes: .vl-card-link is a header that is
   itself the link (the student's list); .vl-coursehead is a header holding a
   link and a control (the teacher's list, whose edit-name button may not sit
   inside the link). The teacher's header asks for the link's own
   :focus-visible rather than :focus-within, so that clicking the edit-name
   button does not leave the bar dark while the rename form is open. */
.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;
}

/* Kept in a rule of its own: a browser that does not know :has() throws away
   the whole comma-separated list that names it, so putting it with the hover
   selectors above would cost those browsers the hover as well. */
.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 for the same reason. */
.vl-coursehead.is-inactive:has(.vl-coursehead-link:focus-visible) {
  background-color: var(--vl-ink);
  border-bottom-color: var(--vl-ink);
}

/* The header is a flex row with no padding of its own: the link carries the
   card-header padding so its hit area runs edge to edge. The row never wraps,
   so on a phone a course name that needs two lines keeps the edit icon beside
   it at the right instead of pushing it onto a line of its own; the link can
   give way because it has min-width: 0 and the title breaks anywhere. */
.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;
}

/* The ring these bars would otherwise get is base_base_002.css's blue
   .vlabs-blockbtn one, which all but disappears on the deep red. This file
   loads after that one at the same specificity, so a white ring wins. */
.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;
}

/* The edit-name button sits on the red: white glyph, a lighter wash on hover,
   a white focus ring (the blue one vanishes on the red), and the card-header
   padding as its right margin. flex: none keeps its full touch target when a
   long title makes the header overflow; the link shrinks instead. */
.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 or gray header are inverse: a white outline and wash. The
   wash stays at 10%: the chip's 13px paper text needs 4.5:1 against what it
   sits on, and a heavier wash lifts the fill too close to the text. */
.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);
}

/* The rename form opens in the card body, above the course's details. */
.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;
}

/* Cell padding is Bootstrap's own: 8px in a normal table, 4px in a small one.
   A row is then one 24px text line plus 8+8 (or 4+4) and the hairline, which
   is the density the lists had before the theme. */
.table > :not(caption) > * > * {
  padding: .5rem .5rem;
}

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

/* A table that ends a card body would leave its own bottom margin as dead
   space under the last row. */
.card-body > .table:last-child,
.card-body > .table-responsive:last-child > .table:last-child {
  margin-bottom: 0;
}

/* 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, Bootstrap 4 markup): the trailing calendar
   button renders 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;
  }
  /* A three-column task list cannot share 368px; each task becomes a block:
     title and icons, then the run count, then the 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;
  }
}