/* htw-style v2.1.0 · sha256 731193495c54d65dbdcb9abe38e3e2bbc8596a4ba99ce9a81b78d5d94cf051e0 · DO NOT EDIT: change HTW-Infra/htw-style and re-sync */
/* htw-style: htw-bootstrap.css. The HTW UI Style Guide v1.0 mapped onto Bootstrap 5.3.

   Load after Bootstrap AND after htw.css, which defines every --htw-* token used here.
   A page keeps using plain Bootstrap classes (btn btn-primary, card, table) and gets the
   HTW look without knowing about it. STYLE-GUIDE.md is the spec.

   Every action (buttons, links, checked controls, the current nav item and tab, the active
   page and row) reads the --htw-action-* tokens, never a colour of its own, so an app that
   sets those tokens in its own sheet moves every action at once.

   Values deliberately different from the UI guide, each for a contrast check (numbers in
   the style guide): focus rings are --htw-cyan-mid, field and checkbox borders are
   --htw-input-border, small coloured text is never Cyan 500, and the danger and success
   buttons are the 700 steps of their ramps.

   Rules for this file: no @import, no web fonts, no url() except data:, no JavaScript. */

:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--htw-ink);
  --bs-body-color-rgb: 15,23,42;
  --bs-emphasis-color: var(--htw-ink);
  --bs-secondary-color: var(--htw-slate);
  --bs-tertiary-bg: var(--htw-neutral-50);
  --bs-border-color: var(--htw-neutral-200);
  --bs-primary: var(--htw-blue);
  --bs-primary-rgb: 0,112,192;
  --bs-primary-text-emphasis: var(--htw-blue-700);
  --bs-primary-bg-subtle: var(--htw-blue-100);
  --bs-primary-border-subtle: var(--htw-blue-200);
  --bs-secondary: var(--htw-slate);
  --bs-secondary-rgb: 71,85,105;
  --bs-success: var(--htw-success);
  --bs-success-rgb: 4,120,87;
  --bs-success-text-emphasis: var(--htw-success-text);
  --bs-success-bg-subtle: var(--htw-success-tint);
  --bs-success-border-subtle: var(--htw-success-rule);
  --bs-info: var(--htw-cyan);
  --bs-info-rgb: 0,159,227;
  --bs-info-text-emphasis: var(--htw-info-text);
  --bs-info-bg-subtle: var(--htw-info-tint);
  --bs-info-border-subtle: var(--htw-cyan-100);
  --bs-warning: var(--htw-warning);
  --bs-warning-rgb: 245,158,11;
  --bs-warning-text-emphasis: var(--htw-warning-text);
  --bs-warning-bg-subtle: var(--htw-warning-tint);
  --bs-warning-border-subtle: var(--htw-warning);
  --bs-danger: var(--htw-danger);
  --bs-danger-rgb: 220,38,38;
  --bs-danger-text-emphasis: var(--htw-destructive-text);
  --bs-danger-bg-subtle: var(--htw-destructive-tint);
  --bs-danger-border-subtle: var(--htw-destructive);
  --bs-form-invalid-color: var(--htw-destructive-text);
  --bs-form-invalid-border-color: var(--htw-destructive);
  --bs-link-color: var(--htw-action-text);
  --bs-link-hover-color: var(--htw-action-text-hover);
  --bs-border-radius: var(--radius-field);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-pill: var(--radius-full);
  --bs-box-shadow-sm: var(--shadow-1);
  --bs-box-shadow: var(--shadow-2);
  --bs-box-shadow-lg: var(--shadow-3);
  --bs-focus-ring-color: rgba(0,145,214,.25);
  --bs-focus-ring-width: 3px;
}
/* The page is Slate 50 and cards are white on it. Not --bs-body-bg: Bootstrap paints
   inputs and cards with that, and they must stay white. */
body { background: var(--htw-neutral-50); }
p, li, .form-text, .card-body, .alert { text-wrap: pretty; }
/* 2.0.1: bold, as htw.css draws them. Bootstrap's own h1-h6 and .h1-.h6 (500) beat htw.css's
   :where(); these are the same selectors, later. .display-* keep Bootstrap's weight. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; text-wrap: balance; }
/* Bootstrap colours links from --bs-link-color-rgb, which no variable can derive from
   --htw-action-text. Same specificity as Bootstrap's `a`, and later, so every class that
   colours a link (.nav-link, .btn, .dropdown-item) still wins. Hover swaps a variable, not
   the colour, as Bootstrap's own a:hover does: a `color` here would be (0,1,1) and beat a
   class-coloured link (.htw-toast a, .alert-link) that has no hover rule of its own. */
a { color: var(--htw-link, var(--htw-action-text)); }
a:hover { --htw-link: var(--htw-action-text-hover); }

/* --- Navigation: <nav class="navbar htw-nav navbar-expand-lg">. The UI guide's navy, with
   a 3px Cyan 500 accent line along the bottom (decoration: no contrast needed). Links are
   white; the current page is the guide's white pill with its label in the action text. */
.htw-nav { background: var(--htw-navy); box-shadow: inset 0 -3px 0 var(--htw-logo-cyan);
           --bs-navbar-color: #fff; --bs-navbar-hover-color: #fff; --bs-navbar-active-color: var(--htw-action-text);
           --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff;
           --bs-navbar-toggler-border-color: rgba(255,255,255,.55);
           --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.htw-nav .navbar-brand, .htw-nav .nav-link { color: #fff; }
.htw-nav .nav-link { border-radius: var(--radius-full); padding-inline: .875rem; font-weight: 500;
                     transition: background-color var(--duration-fast) var(--ease-standard),
                                 color var(--duration-fast) var(--ease-standard); }
.htw-nav .nav-link:hover, .htw-nav .nav-link:focus { background: rgba(255,255,255,.1); color: #fff; }
.htw-nav .nav-link.active, .htw-nav .nav-link.active:hover, .htw-nav .show > .nav-link {
  font-weight: 700; color: var(--htw-action-text); background: #fff; }
/* Cyan-mid is 4.9:1 on navy, but white is the clearer ring on a dark bar. */
.htw-nav a:focus-visible, .htw-nav .navbar-toggler:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; }
.htw-nav .navbar-toggler:focus { box-shadow: none; }
/* A second, smaller line under the app name: "Herron Todd White". */
.brand-sub { font-size: .7rem; opacity: .85; display: block; line-height: 1; }

/* --- Buttons: the UI guide's flat pills. 38px high, 14px semibold, no gradient, no press.
   The fill never changes on hover: the trace ring is the hover signal. Each variant sets
   --btn-fill, --btn-pressed, --btn-label and --btn-ring exactly as htw.css does, and the
   rule below maps them onto Bootstrap's own button variables. */
.btn { --bs-btn-font-size: .875rem; --bs-btn-font-weight: 700; --bs-btn-line-height: 1.25;
       --bs-btn-padding-x: 1.125rem; --bs-btn-padding-y: .5625rem;
       --bs-btn-border-radius: var(--radius-full); --bs-btn-focus-box-shadow: var(--focus-ring);
       --bs-btn-disabled-opacity: 1;
       position: relative; min-height: 2.375rem;
       transition: color var(--duration-fast) var(--ease-standard),
                   background-color var(--duration-fast) var(--ease-standard),
                   border-color var(--duration-fast) var(--ease-standard),
                   box-shadow var(--duration-fast) var(--ease-standard); }
.btn-sm { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .4375rem;
          --bs-btn-border-radius: var(--radius-full); min-height: 2rem; }
/* 1.0.1: Bootstrap's .btn-lg has the same specificity as .btn above and loads first, so
   without this a large button kept .btn's label. 44px tall: the touch-target size. */
.btn-lg { --bs-btn-font-size: .9375rem; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .6875rem;
          --bs-btn-border-radius: var(--radius-full); min-height: 2.75rem; }
.btn:focus-visible { outline: 0; }
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  --bs-btn-disabled-color: var(--htw-neutral-400); --bs-btn-disabled-bg: var(--htw-neutral-100);
  --bs-btn-disabled-border-color: var(--htw-neutral-200); cursor: not-allowed; }

.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info {
  --bs-btn-color: var(--btn-label); --bs-btn-bg: var(--btn-fill); --bs-btn-border-color: var(--btn-fill);
  --bs-btn-hover-color: var(--btn-label); --bs-btn-hover-bg: var(--btn-fill);
  --bs-btn-hover-border-color: var(--btn-fill);
  --bs-btn-active-color: var(--btn-label); --bs-btn-active-bg: var(--btn-pressed);
  --bs-btn-active-border-color: var(--btn-pressed); }

.btn-primary   { --btn-fill: var(--htw-action); --btn-pressed: var(--htw-action-hover); --btn-label: var(--htw-action-on); --btn-ring: var(--htw-action); }
.btn-secondary { --btn-fill: var(--htw-slate); --btn-pressed: #334155; --btn-label: #fff; --btn-ring: var(--htw-slate); }
.btn-success   { --btn-fill: var(--htw-success); --btn-pressed: #065F46; --btn-label: #fff; --btn-ring: var(--htw-success); }
.btn-danger    { --btn-fill: var(--htw-danger); --btn-pressed: #B91C1C; --btn-label: #fff; --btn-ring: var(--htw-destructive); }
.btn-warning   { --btn-fill: var(--htw-warning); --btn-pressed: #D97706; --btn-label: var(--htw-ink); --btn-ring: var(--htw-warning); }
.btn-info      { --btn-fill: var(--htw-logo-cyan); --btn-pressed: var(--htw-cyan-600); --btn-label: var(--htw-ink); --btn-ring: var(--htw-logo-cyan); }

/* Outline primary: white, the action border and label; pressed or on takes the tint. */
.btn-outline-primary { --btn-ring: var(--htw-action);
  --bs-btn-color: var(--htw-action-text); --bs-btn-bg: #fff; --bs-btn-border-color: var(--htw-action);
  --bs-btn-hover-color: var(--htw-action-text); --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--htw-action);
  --bs-btn-active-color: var(--htw-action-tint-text); --bs-btn-active-bg: var(--htw-action-tint);
  --bs-btn-active-border-color: var(--htw-action); }
/* Outline secondary is the neutral button (the guide's Cancel): no ring. */
.btn-outline-secondary {
  --bs-btn-color: var(--htw-slate); --bs-btn-bg: #fff; --bs-btn-border-color: var(--htw-neutral-300);
  --bs-btn-hover-color: var(--htw-ink); --bs-btn-hover-bg: var(--htw-neutral-50);
  --bs-btn-hover-border-color: var(--htw-neutral-300);
  --bs-btn-active-color: var(--htw-ink); --bs-btn-active-bg: var(--htw-neutral-100);
  --bs-btn-active-border-color: var(--htw-neutral-300); }
.btn-outline-danger { --btn-ring: var(--htw-destructive);
  --bs-btn-color: var(--htw-danger); --bs-btn-bg: #fff; --bs-btn-border-color: var(--htw-danger);
  --bs-btn-hover-color: var(--htw-danger); --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--htw-danger);
  --bs-btn-active-color: var(--htw-destructive-text); --bs-btn-active-bg: var(--htw-destructive-tint);
  --bs-btn-active-border-color: var(--htw-danger); }
/* 2.1.0: the other three outline variants, on outline danger's pattern: white, the status's
   label, border and ring; pressed or on takes its tint. Bootstrap's own were off the palette
   and had no ring, and outline info and warning labels were 1.96:1 and 1.63:1 on white (IP-722). Each
   label is a step that is text: 4.5:1 or better on white and on the page. */
.btn-outline-success { --btn-ring: var(--htw-success);
  --bs-btn-color: var(--htw-success); --bs-btn-bg: #fff; --bs-btn-border-color: var(--htw-success);
  --bs-btn-hover-color: var(--htw-success); --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--htw-success);
  --bs-btn-active-color: var(--htw-success-text); --bs-btn-active-bg: var(--htw-success-tint);
  --bs-btn-active-border-color: var(--htw-success); }
.btn-outline-info { --btn-ring: var(--htw-logo-cyan);
  --bs-btn-color: var(--htw-cyan-700); --bs-btn-bg: #fff; --bs-btn-border-color: var(--htw-cyan-700);
  --bs-btn-hover-color: var(--htw-cyan-700); --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--htw-cyan-700);
  --bs-btn-active-color: var(--htw-info-text); --bs-btn-active-bg: var(--htw-info-tint);
  --bs-btn-active-border-color: var(--htw-cyan-700); }
/* Warning has no 700 step: the 800 label, and the amber 500 for the border and ring. */
.btn-outline-warning { --btn-ring: var(--htw-warning);
  --bs-btn-color: var(--htw-warning-text); --bs-btn-bg: #fff; --bs-btn-border-color: var(--htw-warning);
  --bs-btn-hover-color: var(--htw-warning-text); --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--htw-warning);
  --bs-btn-active-color: var(--htw-warning-text); --bs-btn-active-bg: var(--htw-warning-tint);
  --bs-btn-active-border-color: var(--htw-warning); }
/* 2.1.0: outline dark is the neutral button with an ink label and a slate border, and no
   ring (the ATS's "Cancel the email" and "Undo"). Bootstrap's filled it #212529 on hover, and
   no 2.0 button changes its fill on hover. */
.btn-outline-dark {
  --bs-btn-color: var(--htw-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--htw-slate);
  --bs-btn-hover-color: var(--htw-ink); --bs-btn-hover-bg: var(--htw-neutral-50);
  --bs-btn-hover-border-color: var(--htw-slate);
  --bs-btn-active-color: var(--htw-ink); --bs-btn-active-bg: var(--htw-neutral-100);
  --bs-btn-active-border-color: var(--htw-slate); }
/* .btn-link is the tertiary button (.htw-btn-tertiary): the label alone, no trace,
   underlined on hover. */
.btn-link { --bs-btn-padding-x: .875rem;
  --bs-btn-color: var(--htw-action-text); --bs-btn-hover-color: var(--htw-action-text-hover);
  --bs-btn-active-color: var(--htw-action-text-hover); --bs-btn-disabled-color: var(--htw-neutral-400);
  --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent;
  text-decoration: none; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* .btn:disabled (0,2,0) and fieldset:disabled .btn (0,2,1) give disabled buttons the
   Slate 100 pill; a disabled tertiary stays the label alone. Same specificity, later. */
.btn-link:disabled, .btn-link.disabled, fieldset:disabled .btn-link {
  --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; }

/* The trace ring, as in htw.css. Not on a dropdown toggle: Bootstrap draws its caret with
   ::after. */
.btn-primary:not(.dropdown-toggle)::after, .btn-secondary:not(.dropdown-toggle)::after,
.btn-success:not(.dropdown-toggle)::after, .btn-danger:not(.dropdown-toggle)::after,
.btn-warning:not(.dropdown-toggle)::after, .btn-info:not(.dropdown-toggle)::after,
.btn-outline-primary:not(.dropdown-toggle)::after, .btn-outline-danger:not(.dropdown-toggle)::after,
.btn-outline-success:not(.dropdown-toggle)::after, .btn-outline-info:not(.dropdown-toggle)::after,
.btn-outline-warning:not(.dropdown-toggle)::after {
  content: ""; position: absolute; inset: -5px; z-index: 2; pointer-events: none;
  border: 2px solid var(--btn-ring); border-radius: inherit;
  clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); }
.btn-primary:not(.dropdown-toggle):hover::after, .btn-secondary:not(.dropdown-toggle):hover::after,
.btn-success:not(.dropdown-toggle):hover::after, .btn-danger:not(.dropdown-toggle):hover::after,
.btn-warning:not(.dropdown-toggle):hover::after, .btn-info:not(.dropdown-toggle):hover::after,
.btn-outline-primary:not(.dropdown-toggle):hover::after, .btn-outline-danger:not(.dropdown-toggle):hover::after,
.btn-outline-success:not(.dropdown-toggle):hover::after, .btn-outline-info:not(.dropdown-toggle):hover::after,
.btn-outline-warning:not(.dropdown-toggle):hover::after {
  animation: htw-trace .55s linear forwards; }
/* 2.1.0: a .btn-group's joined segments. A ring 5px outside one ran over its neighbours
   (IP-723, IP-724), so in a group it traces 3px inside the segment, the same 2px line and the
   same animation, in the label's colour: on a filled or chosen segment the ring's own colour
   is the fill and would not show. (0,3,1) outranks the ring above (0,2,1). */
.btn-group > .btn:not(.dropdown-toggle)::after,
.btn-group-vertical > .btn:not(.dropdown-toggle)::after { inset: 3px; border-color: currentColor; }
/* The chosen segment of an outline group (.btn-check:checked + .btn, .active) is the action
   fill with its label, not the tint an outline presses to, which read as barely chosen.
   Filled segments keep their darker pressed fill. Outranks every variant's (0,1,0). */
.btn-group > .btn-check:checked + .btn[class*="btn-outline-"], .btn-group > .btn.active[class*="btn-outline-"],
.btn-group-vertical > .btn-check:checked + .btn[class*="btn-outline-"],
.btn-group-vertical > .btn.active[class*="btn-outline-"] {
  --bs-btn-active-color: var(--htw-action-on); --bs-btn-active-bg: var(--htw-action);
  --bs-btn-active-border-color: var(--htw-action); }

/* --- Forms. Label above (13px semibold slate), hint below, error below. Fields are 38px
   on a 6px radius; focus is a 2px cyan-mid edge and the Cyan 50 halo. */
.form-label { margin-bottom: 7px; font-size: .8125rem; font-weight: 700; line-height: 1.4;
              color: var(--htw-slate); }
.form-text { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--htw-slate); }
.form-control, .form-select { border-color: var(--htw-input-border); border-radius: var(--radius-field);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard); }
.form-control::placeholder { color: var(--htw-placeholder); }
.form-control:focus, .form-select:focus {
  border-color: var(--htw-cyan-mid); box-shadow: var(--field-focus); }
.form-control.is-invalid, .form-select.is-invalid { box-shadow: inset 0 0 0 1px var(--htw-destructive); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: inset 0 0 0 1px var(--htw-destructive), 0 0 0 3px var(--htw-destructive-tint); }
.form-control:disabled, .form-select:disabled { color: var(--htw-slate); background-color: var(--htw-neutral-50);
                                                border-color: var(--htw-neutral-200); }
.invalid-feedback { margin-top: 6px; font-size: .8125rem; font-weight: 700; }
/* 2.0.1: small fields are 32px on purpose, the .btn-sm beside them. htw.css's 38px minimum
   made a .form-select-sm 38px with small type (Bootstrap gives .form-control-sm a 31px
   minimum of its own, and .form-select-sm none). Their 14px type zooms an iPhone into the
   field: for compact rows (a filter bar, a picker in a card), not a form filled in on a phone. */
.form-control-sm, .form-select-sm { min-height: 2rem; }
/* 2.0.2: a small input group is 32px too. Its fields took htw.css's 38px minimum, and
   Bootstrap's .input-group-sm > .btn (0,2,0) sets padding and font-size outright, so its
   button kept .btn's 38px minimum round a 27.5px label (an <a class="btn"> drew it 6px high).
   The same selectors, later: the fields are small fields, the button is .btn-sm, and
   .input-group-text stretches to the row. */
.input-group-sm > .form-control, .input-group-sm > .form-select { min-height: 2rem; }
.input-group-sm > .btn { padding: .4375rem .875rem; font-size: .8125rem; min-height: 2rem; }
/* Checkboxes 18px on a 4px radius, radios a circle; checked is the action colour, a radio
   as a 5px ring. Focus is the cyan-mid ring outside the box. */
.form-check-input { width: 18px; height: 18px; margin-top: .1875em; border: 1.5px solid var(--htw-input-border); }
.form-check-input[type=checkbox] { border-radius: var(--radius-xs); }
.form-check-input:focus { border-color: var(--htw-input-border); box-shadow: none; }
.form-check-input:focus-visible { outline: 2px solid var(--htw-cyan-mid); outline-offset: 2px; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--htw-action); border-color: var(--htw-action); }
.form-check-input[type=radio]:checked {
  --bs-form-check-bg-image: none; background-color: #fff; border: 5px solid var(--htw-action); }
.form-switch { padding-left: 3rem; }
.form-switch .form-check-input { width: 2.375rem; height: 1.375rem; margin-top: .0625em; margin-left: -3rem;
                                 border-radius: var(--radius-full); }
.form-switch .form-check-input:checked { background-color: var(--htw-action); border-color: var(--htw-action); }
.form-check-input:disabled { background-color: var(--htw-neutral-100); border-color: var(--htw-neutral-200); opacity: 1; }

/* The open list of a .form-select, as htw.css draws a bare <select>; Bootstrap's chevron
   stays, turned up while the list is open. */
@supports (appearance: base-select) {
  select.form-select:not([multiple], [size]) { appearance: base-select; }
  select.form-select:not([multiple], [size])::picker-icon { display: none; }
  /* 2.1.0: one line, ending in "…" (htw.css says why; a narrow one ran to three lines,
     IP-718). The line clamp needs a -webkit-box, and Bootstrap's display: block would beat
     htw.css's; -webkit-box is block-level too, so the field is as wide as before. */
  select.form-select:not([multiple], [size]) { display: -webkit-box; }
  select.form-select:not([multiple], [size]):open { border-color: var(--htw-cyan-mid); box-shadow: var(--field-focus);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e"); }
}

/* --- Tables. Header in the uppercase label style on Slate 50; hairline rows; the last row
   has no rule; a row hovers to Slate 50. */
.table { --bs-table-hover-bg: var(--htw-neutral-50); --bs-table-border-color: var(--htw-neutral-200);
         --bs-table-active-bg: var(--htw-action-tint);
         font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { padding: .625rem 1rem; }
.table > thead th { padding-block: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
                    text-transform: uppercase; color: var(--htw-slate); background-color: var(--htw-neutral-50); }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
/* 2.0.1: a compact table (.table-sm) pads every cell 4px by 8px, the header too. The cell and
   header padding above tie or outrank Bootstrap's .table-sm, so this outranks them both. */
.table.table-sm > :not(caption) > * > * { padding: .25rem .5rem; }
.table > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-table-hover-bg); }
/* 2.1.0: a table's scroll box holds what is absolutely placed inside it. A .visually-hidden
   label in a cell is position: absolute; with no positioned box between it and the page it
   was placed against the page, outside the scroll box, and widened a phone page (315px on
   the ATS's Vacancies list at 375px, IP-718). */
.table-responsive { position: relative; }

/* --- Surfaces: cards and dialogs 12px with the card shadow, menus and banners 8px, badges
   4px. A hover is a tint step, never a scale or a glow. */
.card { --bs-card-border-radius: var(--radius-md); --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
        --bs-card-border-color: var(--htw-neutral-200); --bs-card-cap-bg: var(--htw-neutral-50);
        --bs-card-spacer-y: 1.375rem; --bs-card-spacer-x: 1.5rem; --bs-card-cap-padding-y: .875rem;
        --bs-card-title-color: var(--htw-ink); }
.card-header { font-weight: 700; }
.card-title { font-size: 1.125rem; font-weight: 700; }
.list-group { --bs-list-group-border-radius: var(--radius-md); --bs-list-group-border-color: var(--htw-neutral-200);
              --bs-list-group-action-hover-bg: var(--htw-neutral-50); --bs-list-group-action-hover-color: var(--htw-ink);
              --bs-list-group-action-active-bg: var(--htw-neutral-100);
              --bs-list-group-active-color: var(--htw-action-tint-text);
              --bs-list-group-active-bg: var(--htw-action-tint); --bs-list-group-active-border-color: var(--htw-action); }
.list-group-item.active { font-weight: 700; }
.list-group-item-action { transition: background-color var(--duration-fast) var(--ease-standard); }
/* Badges: 12px semibold capitals on a 4px radius. The .htw-badge-* tints in htw.css are the
   guide's colours; Bootstrap's text-bg-* fills still work. */
.badge { --bs-badge-padding-x: 9px; --bs-badge-padding-y: 4px; --bs-badge-font-size: .75rem;
         --bs-badge-font-weight: 700; --bs-badge-border-radius: var(--radius-xs);
         letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.badge.rounded-pill { --bs-badge-border-radius: var(--radius-full); }
/* 2.1.0: labels on the light fills are ink. A badge's label is white (--bs-badge-color), which
   is 2.15:1 on .bg-warning, 2.97:1 on .bg-info and 1.05:1 on .bg-light (IP-722); Bootstrap's
   .text-bg-* forms pass with black, which is off the palette. !important as Bootstrap's are. */
.badge.bg-warning, .badge.bg-info, .badge.bg-light { --bs-badge-color: var(--htw-ink); }
.text-bg-warning, .text-bg-info, .text-bg-light { color: var(--htw-ink) !important; }
/* 2.1.0: status text in words. Bootstrap colours .text-warning and .text-info with the fills
   (2.15:1 and 2.97:1 on white); they take the status text steps. Like Bootstrap's own, they
   are !important, and a .text-opacity-* no longer fades them. */
.text-warning { color: var(--htw-warning-text) !important; }
.text-info { color: var(--htw-info-text) !important; }
/* Alerts are the guide's inline banner: the 100-step tint, a 4px rule at the 500 step, ink
   text. Title it with .alert-heading. */
.alert { --bs-alert-border-radius: var(--radius-sm); --bs-alert-padding-x: 16px; --bs-alert-padding-y: 14px;
         --bs-alert-color: var(--htw-ink); --bs-alert-link-color: var(--htw-ink);
         border-width: 0 0 0 4px; }
.alert-heading { font-size: .9375rem; font-weight: 700; }
.alert-primary, .alert-info { --bs-alert-bg: var(--htw-info-tint); --bs-alert-border-color: var(--htw-logo-cyan); }
.alert-success { --bs-alert-bg: var(--htw-success-tint); --bs-alert-border-color: var(--htw-success-rule); }
.alert-warning { --bs-alert-bg: var(--htw-warning-tint); --bs-alert-border-color: var(--htw-warning); }
.alert-danger { --bs-alert-bg: var(--htw-destructive-tint); --bs-alert-border-color: var(--htw-destructive);
                --bs-alert-link-color: var(--htw-destructive-text); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--htw-neutral-100); --bs-alert-border-color: var(--htw-neutral-400); }
.dropdown-menu { --bs-dropdown-border-radius: var(--radius-sm); --bs-dropdown-box-shadow: var(--shadow-3);
                 --bs-dropdown-border-color: var(--htw-neutral-200); --bs-dropdown-padding-x: 6px;
                 --bs-dropdown-item-border-radius: var(--radius-field); --bs-dropdown-item-padding-y: .5rem;
                 --bs-dropdown-link-hover-bg: var(--htw-neutral-100);
                 --bs-dropdown-link-active-color: var(--htw-action-tint-text);
                 --bs-dropdown-link-active-bg: var(--htw-action-tint); box-shadow: var(--shadow-3); }
.dropdown-item.active { font-weight: 700; }
/* Dialogs: 12px, the overlay shadow, a hairline over the footer; the backdrop is ink at 45%. */
.modal { --bs-modal-border-radius: var(--radius-md); --bs-modal-border-width: 0;
         --bs-modal-box-shadow: var(--shadow-3); --bs-modal-header-border-width: 0;
         --bs-modal-header-padding: 1.25rem 1.375rem 0; --bs-modal-padding: 1.125rem 1.375rem;
         --bs-modal-footer-border-color: var(--htw-neutral-200); --bs-modal-footer-gap: .625rem; }
.modal-content { box-shadow: var(--shadow-3); }
.modal-title { font-size: 1.125rem; font-weight: 700; }
.modal-footer { padding: 1rem 1.375rem; }
.modal-backdrop { --bs-backdrop-bg: var(--htw-ink); --bs-backdrop-opacity: .45; }
/* Tabs: the guide's underline tabs, the current one in the action colour. Pills: the
   current one filled. */
.nav-tabs { --bs-nav-tabs-border-color: var(--htw-neutral-200); --bs-nav-tabs-border-width: 1px;
            --bs-nav-tabs-link-active-color: var(--htw-action-text); --bs-nav-tabs-link-active-bg: transparent;
            --bs-nav-tabs-link-active-border-color: transparent; --bs-nav-tabs-link-hover-border-color: transparent;
            gap: 1.5rem; }
.nav-tabs .nav-link { padding: .75rem 2px; color: var(--htw-slate); font-weight: 500;
                      border: 0; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--htw-action-text); box-shadow: inset 0 -2px 0 var(--htw-cyan-100); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  font-weight: 700; color: var(--htw-action-text); box-shadow: inset 0 -2px 0 var(--htw-action); }
.nav-pills { --bs-nav-pills-border-radius: var(--radius-full); --bs-nav-pills-link-active-color: var(--htw-action-on);
             --bs-nav-pills-link-active-bg: var(--htw-action); }
.nav-pills .nav-link.active { font-weight: 700; }
/* Pagination: 32px round controls; the current page is the action fill. */
.pagination { --bs-pagination-border-radius: var(--radius-full); --bs-pagination-color: var(--htw-slate);
              --bs-pagination-font-size: .8125rem; --bs-pagination-border-color: var(--htw-neutral-200);
              --bs-pagination-hover-color: var(--htw-action-text); --bs-pagination-hover-bg: #fff;
              --bs-pagination-hover-border-color: var(--htw-action);
              --bs-pagination-focus-box-shadow: var(--focus-ring);
              --bs-pagination-active-color: var(--htw-action-on); --bs-pagination-active-bg: var(--htw-action);
              --bs-pagination-active-border-color: var(--htw-action);
              --bs-pagination-disabled-color: var(--htw-neutral-400); gap: 6px; }
.page-item .page-link { display: flex; align-items: center; justify-content: center; min-width: 2rem;
                        height: 2rem; padding: 0 .5rem; font-weight: 700; border-radius: var(--radius-full); }
.page-item:not(:first-child) .page-link { margin-left: 0; }
.progress { --bs-progress-height: 8px; --bs-progress-border-radius: var(--radius-full);
            --bs-progress-bg: var(--htw-neutral-100); --bs-progress-bar-bg: var(--htw-action); }

@media (prefers-reduced-motion: reduce) {
  .btn, .form-control, .form-select, .list-group-item-action, .htw-nav .nav-link { transition: none; }
  .btn-primary:not(.dropdown-toggle):hover::after, .btn-secondary:not(.dropdown-toggle):hover::after,
  .btn-success:not(.dropdown-toggle):hover::after, .btn-danger:not(.dropdown-toggle):hover::after,
  .btn-warning:not(.dropdown-toggle):hover::after, .btn-info:not(.dropdown-toggle):hover::after,
  .btn-outline-primary:not(.dropdown-toggle):hover::after, .btn-outline-danger:not(.dropdown-toggle):hover::after,
  .btn-outline-success:not(.dropdown-toggle):hover::after, .btn-outline-info:not(.dropdown-toggle):hover::after,
  .btn-outline-warning:not(.dropdown-toggle):hover::after {
    animation: none; clip-path: none; }
}