/* Infiltrometer (hvac2) · Retrotec brand (kit v2.5) mapped onto Bootstrap 5.3.
   tokens.css (verbatim from the kit) is loaded before this file. Greys carry the layout; red is for CTAs, rules and
   key numbers only. No red or yellow filled fields anywhere. Oswald for H1–H3 and numerals, Noto Sans for the rest. */

/* ---- self-hosted fonts (static/fonts, SIL OFL) ---------------------------------------------------------------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("../fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-sans-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* ---- Bootstrap variables from the tokens ------------------------------------------------------------------------ */
:root {
  --bs-primary: var(--rt-color-red);
  --bs-primary-rgb: 200, 16, 46;
  --bs-secondary: var(--rt-color-slate);
  --bs-secondary-rgb: 74, 74, 74;
  --bs-success: var(--rt-color-pass);
  --bs-success-rgb: 46, 125, 50;
  --bs-danger: var(--rt-color-fail);
  --bs-danger-rgb: 179, 38, 30;
  --bs-warning: var(--rt-color-caution);
  --bs-warning-rgb: 217, 162, 11;
  --bs-info: var(--rt-color-info);
  --bs-info-rgb: 25, 118, 210;
  --bs-dark: var(--rt-color-ink);
  --bs-dark-rgb: 13, 13, 13;
  --bs-light: var(--rt-color-cloud);
  --bs-light-rgb: 244, 244, 244;

  --bs-body-font-family: var(--rt-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--rt-color-graphite);
  --bs-body-color-rgb: 46, 46, 46;
  --bs-body-bg: var(--rt-color-white);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: var(--rt-color-ink);
  --bs-secondary-color: var(--rt-color-steel);
  --bs-secondary-color-rgb: 117, 117, 117;
  --bs-secondary-bg: var(--rt-color-cloud);
  --bs-tertiary-bg: var(--rt-color-surface);
  --bs-heading-color: var(--rt-color-ink);

  --bs-link-color: var(--rt-color-red);
  --bs-link-color-rgb: 200, 16, 46;
  --bs-link-hover-color: var(--rt-color-red-dark);
  --bs-link-hover-color-rgb: 160, 13, 37;
  --bs-link-decoration: underline;

  --bs-border-color: var(--rt-color-mist);
  --bs-border-color-translucent: var(--rt-color-mist);
  --bs-border-radius: var(--rt-radius-sm);       /* 4 px inputs and buttons */
  --bs-border-radius-sm: var(--rt-radius-xs);    /* 2 px badges */
  --bs-border-radius-lg: var(--rt-radius-md);    /* 8 px cards */
  --bs-border-radius-xl: var(--rt-radius-lg);
  --bs-border-radius-pill: var(--rt-radius-full);
  --bs-box-shadow-sm: var(--rt-shadow-sm);
  --bs-box-shadow: var(--rt-shadow-md);
  --bs-box-shadow-lg: var(--rt-shadow-lg);
  --bs-focus-ring-color: var(--rt-color-red-pale);
  --bs-focus-ring-width: 3px;

  --hv-control: var(--rt-control-md);            /* 44 px hit targets */
  --hv-num: 600 1.75rem/1.1 var(--rt-font-display);
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--bs-body-bg); color: var(--bs-body-color); font: var(--rt-text-body); min-height: 100dvh; }
main { padding-inline: 16px; }

/* ---- type -------------------------------------------------------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--rt-font-display); letter-spacing: 0; color: var(--rt-color-ink); }
h1, .h1 { font-weight: 600; font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem); line-height: 1.1; }
h2, .h2 { font-weight: 600; font-size: clamp(1.875rem, 1.6rem + 1vw, 2.5rem); line-height: 1.15; }
h3, .h3 { font-weight: 500; font-size: clamp(1.5rem, 1.3rem + .6vw, 1.75rem); line-height: 1.25; }
h4, .h4 { font: var(--rt-text-h4); color: var(--rt-color-ink); }
h5, .h5 { font: var(--rt-text-h5); color: var(--rt-color-ink); }
h6, .h6 { font: var(--rt-text-h6); color: var(--rt-color-slate); text-transform: uppercase; letter-spacing: .08em; }
.lead { font: var(--rt-text-lead); }
small, .small { font: var(--rt-text-small); }
.hv-caption { font: var(--rt-text-caption); color: var(--rt-color-steel); }
.hv-eyebrow { font: var(--rt-text-h6); color: var(--rt-color-red); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--rt-space-xs); }
.text-muted, .form-text { color: var(--rt-color-steel) !important; }
.hv-num, .hv-numeral { font: var(--hv-num); font-variant-numeric: tabular-nums; color: var(--rt-color-ink); }
.hv-num .u, .hv-numeral .u { font: 700 .55em/1 var(--rt-font-body); color: var(--rt-color-slate); margin-left: .2em; }
.hv-key { color: var(--rt-color-red); }                         /* key number in red */
.tabular, table td.num, table th.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- rules and page frame ------------------------------------------------------------------------------------- */
.hv-rule { height: 3px; background: var(--rt-color-red); border: 0; margin: 0; opacity: 1; }
.hv-rule-ink { height: 2px; background: var(--rt-color-ink); border: 0; margin: 0; opacity: 1; }
.hv-content { max-width: var(--rt-content); margin-inline: auto; }
.hv-content-wide { max-width: var(--rt-content-wide); margin-inline: auto; }
.hv-page { padding-block: var(--rt-space-md) var(--rt-space-xl); }
.hv-page-head { display: flex; flex-wrap: wrap; gap: var(--rt-space-xs) var(--rt-space-md); align-items: flex-end; justify-content: space-between;
  border-bottom: 3px solid var(--rt-color-red); padding-bottom: var(--rt-space-xs); margin-bottom: var(--rt-space-md); }
.hv-page-head h1 { margin: 0; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.hv-page-head .sub { color: var(--rt-color-steel); }

/* ---- nav ------------------------------------------------------------------------------------------------------- */
.navbar { background: var(--rt-color-white); border-bottom: 3px solid var(--rt-color-red); padding-block: .5rem; }
.navbar .navbar-brand { display: inline-flex; align-items: center; gap: .75rem; padding: 0; }
.navbar .navbar-brand img { height: 28px; width: auto; display: block; }
.navbar .navbar-brand .app { font: 600 1.125rem/1 var(--rt-font-display); color: var(--rt-color-ink); letter-spacing: 0; }
.navbar .nav-link { color: var(--rt-color-slate); font-weight: 600; min-height: var(--hv-control); display: inline-flex; align-items: center; padding-inline: .75rem; border-radius: var(--rt-radius-sm); }
.navbar .nav-link:hover { color: var(--rt-color-ink); background: var(--rt-color-cloud); }
.navbar .nav-link.active { color: var(--rt-color-ink); box-shadow: inset 0 -3px 0 var(--rt-color-red); border-radius: 0; }
.navbar .navbar-toggler { min-width: var(--hv-control); min-height: var(--hv-control); border-color: var(--rt-color-mist); }
.navbar .badge { background: var(--rt-color-ink); color: var(--rt-color-white); border-radius: var(--rt-radius-full); font-weight: 700; }

/* ---- buttons: one primary per view -------------------------------------------------------------------------------- */
.btn { --bs-btn-font-family: var(--rt-font-body); --bs-btn-font-weight: 700; --bs-btn-font-size: 15px; --bs-btn-line-height: 1;
  --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1.125rem; --bs-btn-border-radius: var(--rt-radius-sm);
  min-height: var(--hv-control); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background-color var(--rt-duration-fast), color var(--rt-duration-fast), border-color var(--rt-duration-fast); }
.btn-sm { min-height: var(--rt-control-sm); --bs-btn-font-size: 14px; }
.btn-lg { min-height: var(--rt-control-lg); --bs-btn-font-size: 16px; }
.btn-primary { --bs-btn-bg: var(--rt-color-red); --bs-btn-border-color: var(--rt-color-red); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--rt-color-red-dark); --bs-btn-hover-border-color: var(--rt-color-red-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rt-color-red-dark); --bs-btn-active-border-color: var(--rt-color-red-dark); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--rt-color-silver); --bs-btn-disabled-border-color: var(--rt-color-silver); --bs-btn-disabled-color: #fff; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark { --bs-btn-color: var(--rt-color-ink); --bs-btn-border-color: var(--rt-color-ink); --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--rt-color-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--rt-color-ink);
  --bs-btn-active-bg: var(--rt-color-ink); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--rt-color-ink); }
.btn-secondary { --bs-btn-bg: var(--rt-color-cloud); --bs-btn-border-color: var(--rt-color-mist); --bs-btn-color: var(--rt-color-ink);
  --bs-btn-hover-bg: var(--rt-color-mist); --bs-btn-hover-border-color: var(--rt-color-silver); --bs-btn-hover-color: var(--rt-color-ink);
  --bs-btn-active-bg: var(--rt-color-mist); --bs-btn-active-color: var(--rt-color-ink); --bs-btn-active-border-color: var(--rt-color-silver); }
.btn-link, .btn-ghost { --bs-btn-color: var(--rt-color-red); --bs-btn-hover-color: var(--rt-color-red-dark); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--rt-color-cloud); --bs-btn-hover-border-color: transparent; text-decoration: none; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--rt-color-red-pale); }

/* ---- forms: 44 px controls, 16 px text so iOS does not zoom ---------------------------------------------------- */
.form-control, .form-select { min-height: var(--hv-control); font-size: 1rem; color: var(--rt-color-ink); border-color: var(--rt-color-silver); border-radius: var(--rt-radius-sm); background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--rt-color-ink); box-shadow: 0 0 0 3px var(--rt-color-red-pale); }
.form-control::placeholder { color: var(--rt-color-steel); }
.form-control-sm, .form-select-sm { min-height: var(--rt-control-sm); }
.form-label { font: var(--rt-text-small); font-weight: 700; color: var(--rt-color-slate); margin-bottom: .25rem; }
.form-label .req { color: var(--rt-color-red); }
.input-group-text { background: var(--rt-color-cloud); color: var(--rt-color-slate); border-color: var(--rt-color-silver); font: var(--rt-text-small); font-weight: 700; min-height: var(--hv-control); }
.form-check-input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; border-color: var(--rt-color-silver); }
.form-check-input:checked { background-color: var(--rt-color-ink); border-color: var(--rt-color-ink); }
.form-check-input:focus { border-color: var(--rt-color-ink); box-shadow: 0 0 0 3px var(--rt-color-red-pale); }
.form-check-label { min-height: var(--hv-control); display: inline-flex; align-items: center; }
.form-text { font: var(--rt-text-caption); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--rt-color-fail); background-image: none; }
.invalid-feedback { color: var(--rt-color-fail); }
.hv-field + .hv-field { margin-top: var(--rt-space-sm); }
.hv-form-grid { display: grid; gap: var(--rt-space-sm) var(--rt-space-md); grid-template-columns: 1fr; }
@media (min-width: 600px) { .hv-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hv-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hv-form-grid .span-2 { grid-column: 1 / -1; }
.hv-actions { display: flex; flex-wrap: wrap; gap: var(--rt-space-xs); align-items: center; margin-top: var(--rt-space-md); }
@media (max-width: 599.98px) { .hv-actions .btn { flex: 1 1 100%; } }

/* ---- segmented radio control (direction, wind shielding, heating system ...) ------------------------------------ */
.hv-seg { display: inline-flex; max-width: 100%; border: 1px solid var(--rt-color-silver); border-radius: var(--rt-radius-sm); overflow: hidden; background: #fff; }
.hv-seg.w-100 { display: flex; }
.hv-seg label { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--hv-control); padding: .5rem .9rem;
  margin: 0; font: var(--rt-text-small); font-weight: 600; color: var(--rt-color-ink); cursor: pointer; white-space: nowrap; user-select: none; transition: background-color var(--rt-duration-fast), color var(--rt-duration-fast); }
.hv-seg label + label { border-left: 1px solid var(--rt-color-silver); }
.hv-seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.hv-seg label:hover { background: var(--rt-color-cloud); }
.hv-seg label:has(input:checked) { background: var(--rt-color-ink); color: #fff; }
.hv-seg label:has(input:focus-visible) { outline: 3px solid var(--rt-color-red-pale); outline-offset: -3px; }
.hv-seg label:has(input:disabled) { color: var(--rt-color-silver); cursor: not-allowed; }
@media (max-width: 599.98px) { .hv-seg { display: flex; flex-wrap: wrap; } .hv-seg label { flex: 1 1 33%; } .hv-seg label + label { border-left: 0; } .hv-seg label { box-shadow: inset 1px 1px 0 0 var(--rt-color-silver); } }

/* ---- readings grid (12 return + 24 supply CFM readings) -----------------------------------------------------------
   Boxes are real targets: at least 96 px wide and 52 px tall, Oswald 22 px tabular numerals, so a 4-digit CFM fits with room.
   The row wraps (auto-fill) instead of shrinking the boxes; tracks never grow past 140 px. Phones: three per row, full width. */
.hv-readings { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.hv-readings .r { display: flex; flex-direction: column; gap: .2rem; min-width: 0; max-width: 140px; }
.hv-readings .r span { font: var(--rt-text-caption); font-weight: 700; color: var(--rt-color-steel); text-align: center; letter-spacing: .04em; }
.hv-readings .r input { width: 100%; min-width: 96px; min-height: 52px; padding: 0 8px; text-align: center; font: 600 22px/1 var(--rt-font-display); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--rt-color-ink); -moz-appearance: textfield; appearance: textfield; }
.hv-readings .r input::-webkit-outer-spin-button, .hv-readings .r input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hv-readings .r input::placeholder { font: 400 16px/1 var(--rt-font-body); color: var(--rt-color-silver); }
@media (max-width: 575.98px) { .hv-readings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hv-readings .r { max-width: none; } #testForm .hv-readings .r input, .hv-readings .r input { min-width: 0; min-height: 48px; font-size: 20px; } }
.hv-readings .more { display: none; }
.hv-readings.expanded .more { display: flex; }
.hv-readings-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .5rem; font: var(--rt-text-small); color: var(--rt-color-slate); }
.hv-readings-total .hv-num { font-size: 1.25rem; }

/* ---- number fields on the test forms: the same minimums as the readings ---------------------------------------- */
.hv-test-form .form-control[type=number], #testForm .form-control[type=number] { min-height: 52px; font: 600 22px/1 var(--rt-font-display); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--rt-color-ink); padding: 0 12px; -moz-appearance: textfield; appearance: textfield; }
#testForm .form-control[type=number]::-webkit-outer-spin-button, #testForm .form-control[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#testForm .form-control[type=number]::placeholder { font: 400 16px/1 var(--rt-font-body); color: var(--rt-color-silver); }
#testForm .form-control-lg[type=number] { font-size: 28px; min-height: 60px; }

/* ---- result tiles ------------------------------------------------------------------------------------------------ */
.hv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-block: var(--rt-space-sm) var(--rt-space-md); }
@media (min-width: 820px) { .hv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
a.hv-tile, a.hv-tile:hover { text-decoration: none; color: inherit; }
a.hv-tile:hover { background: var(--rt-color-mist); }
.hv-tile { background: var(--rt-color-cloud); border-radius: var(--rt-radius-md); padding: .9rem 1rem .8rem; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.hv-tile .n { font: 600 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)/1.1 var(--rt-font-display); font-variant-numeric: tabular-nums; color: var(--rt-color-red); letter-spacing: 0; white-space: nowrap; }
.hv-tile .n .u { font: 700 .5em/1 var(--rt-font-body); color: var(--rt-color-slate); margin-left: .25em; white-space: nowrap; }
.hv-tile .l { font: var(--rt-text-caption); color: var(--rt-color-slate); line-height: 1.35; }
.hv-tile.ink { background: var(--rt-color-ink); } .hv-tile.ink .n { color: #fff; } .hv-tile.ink .n .u, .hv-tile.ink .l { color: var(--rt-color-silver); }
.hv-tile.empty .n { color: var(--rt-color-silver); }

/* ---- cards, sections, notices --------------------------------------------------------------------------------- */
.card { --bs-card-border-color: var(--rt-color-mist); --bs-card-border-radius: var(--rt-radius-md); --bs-card-inner-border-radius: calc(var(--rt-radius-md) - 1px); --bs-card-bg: #fff; --bs-card-cap-bg: transparent; box-shadow: var(--rt-shadow-sm); transition: transform var(--rt-duration-base), box-shadow var(--rt-duration-base); }
a.card:hover, .card.hv-link:hover { transform: translateY(-2px); box-shadow: var(--rt-shadow-md); text-decoration: none; }
.card-header { font: var(--rt-text-h5); color: var(--rt-color-ink); border-bottom-color: var(--rt-color-mist); padding: .75rem 1rem; }
.hv-section { border-top: 2px solid var(--rt-color-ink); padding-top: var(--rt-space-xs); margin-top: var(--rt-space-md); }
.hv-section > h2, .hv-section > h3 { margin-bottom: var(--rt-space-sm); }
.hv-section.accent { border-top-color: var(--rt-color-red); }
.hv-notice { border-left: 4px solid var(--rt-color-ink); background: var(--rt-color-cloud); padding: .75rem 1rem; border-radius: 0 var(--rt-radius-sm) var(--rt-radius-sm) 0; font: var(--rt-text-small); color: var(--rt-color-graphite); }
.hv-notice.accent { border-left-color: var(--rt-color-red); }
.hv-notice.pass { border-left-color: var(--rt-color-pass); }
.hv-notice.fail { border-left-color: var(--rt-color-fail); }
.alert { border-radius: var(--rt-radius-sm); border-width: 0 0 0 4px; background: var(--rt-color-cloud); color: var(--rt-color-graphite); }
.alert-success { border-color: var(--rt-color-pass); } .alert-danger { border-color: var(--rt-color-fail); } .alert-warning { border-color: var(--rt-color-caution); } .alert-info { border-color: var(--rt-color-info); } .alert-secondary { border-color: var(--rt-color-steel); }

/* ---- status: a word and a glyph, never a filled field --------------------------------------------------------- */
.hv-status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font: var(--rt-text-small); font-weight: 700; }
.hv-status::before { content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--rt-color-steel) center / 12px no-repeat; }
.hv-status.pass { color: var(--rt-color-pass); } .hv-status.pass::before { background-color: var(--rt-color-pass); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.hv-status.over, .hv-status.fail { color: var(--rt-color-fail); } .hv-status.over::before, .hv-status.fail::before { background-color: var(--rt-color-fail); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M12 5v9'/%3E%3Ccircle cx='12' cy='18' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E"); }
.hv-status.info::before { background-color: var(--rt-color-info); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M12 11v7'/%3E%3Ccircle cx='12' cy='7' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E"); }
.badge { font: 700 11px/1.4 var(--rt-font-body); letter-spacing: .02em; border-radius: var(--rt-radius-xs); padding: .2rem .5rem; }
.badge.text-bg-primary, .badge.text-bg-danger, .badge.text-bg-warning { background: var(--rt-color-ink) !important; color: #fff !important; }
.badge.text-bg-secondary, .badge.text-bg-light { background: var(--rt-color-mist) !important; color: var(--rt-color-graphite) !important; }
.hv-pill { display: inline-flex; align-items: center; gap: .35rem; font: var(--rt-text-caption); font-weight: 700; color: var(--rt-color-slate); background: var(--rt-color-cloud); border-radius: var(--rt-radius-full); padding: .15rem .6rem; }

/* ---- tables ------------------------------------------------------------------------------------------------------- */
.table { --bs-table-color: var(--rt-color-graphite); --bs-table-border-color: var(--rt-color-mist); --bs-table-striped-bg: var(--rt-color-surface); --bs-table-hover-bg: var(--rt-color-cloud); font: var(--rt-text-small); }
.table > thead th { font: var(--rt-text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rt-color-slate); border-bottom: 2px solid var(--rt-color-ink); vertical-align: bottom; }
.table td, .table th { vertical-align: middle; }
.table .num { font-variant-numeric: tabular-nums; text-align: right; }
.table td.hv-hl { font-weight: 700; color: var(--rt-color-red); background: var(--rt-color-cloud); box-shadow: inset 0 2px 0 var(--rt-color-red), inset 0 -2px 0 var(--rt-color-red); }
.table-responsive { -webkit-overflow-scrolling: touch; }
.hv-kv { width: 100%; font: var(--rt-text-small); }
.hv-kv td { padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--rt-color-mist); vertical-align: top; }
.hv-kv td:first-child { color: var(--rt-color-steel); width: 42%; }
.hv-kv td:last-child { color: var(--rt-color-ink); font-weight: 600; }

/* ---- client list and empty states ---------------------------------------------------------------------------- */
.hv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hv-list a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .75rem 1rem; min-height: var(--rt-control-lg); background: #fff; border: 1px solid var(--rt-color-mist); border-radius: var(--rt-radius-md); color: inherit; text-decoration: none; box-shadow: var(--rt-shadow-xs); transition: transform var(--rt-duration-base), box-shadow var(--rt-duration-base); }
.hv-list a:hover { transform: translateY(-2px); box-shadow: var(--rt-shadow-sm); }
.hv-list .name { font: var(--rt-text-h5); color: var(--rt-color-ink); }
.hv-list .meta { font: var(--rt-text-caption); color: var(--rt-color-steel); grid-column: 1; }
.hv-list .tests { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: .35rem; }
.hv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rt-color-mist); display: inline-block; }
.hv-dot.done { background: var(--rt-color-ink); }
.hv-empty { text-align: center; padding: var(--rt-space-xl) var(--rt-space-md); border: 1px dashed var(--rt-color-silver); border-radius: var(--rt-radius-md); color: var(--rt-color-slate); }
.hv-empty h2 { font-size: 1.5rem; }
.hv-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: var(--rt-space-sm); }
.hv-toolbar .form-control { max-width: 320px; }

/* ---- map (Leaflet) ------------------------------------------------------------------------------------------------- */
.hv-map { height: 280px; border: 1px solid var(--rt-color-mist); border-radius: var(--rt-radius-md); overflow: hidden; background: var(--rt-color-cloud); }
@media (min-width: 820px) { .hv-map { height: 360px; } }
.leaflet-container { font-family: var(--rt-font-body); }

/* ---- footer and misc --------------------------------------------------------------------------------------------- */
footer.hv-footer { margin-top: var(--rt-space-xl); padding: var(--rt-space-sm) 16px; border-top: 1px solid var(--rt-color-mist); font: var(--rt-text-caption); color: var(--rt-color-steel); }
.hv-footer a { color: inherit; }
hr { border-top: 1px solid var(--rt-color-mist); opacity: 1; }
::selection { background: var(--rt-color-red-pale); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .navbar, footer.hv-footer, .no-print { display: none !important; } main { padding: 0; } }

/* ---- hooks used by templates/base.html (platform track) ------------------------------------------------------- */
.hv-header .navbar .container-xl { padding-inline: 16px; }
.hv-logo { height: 28px; width: auto; display: block; }
.hv-brand-name { font: 600 1.125rem/1 var(--rt-font-display); color: var(--rt-color-ink); letter-spacing: 0; }
.hv-badge-pending { background: var(--rt-color-ink); color: #fff; font-size: 11px; }
.hv-user { font: var(--rt-text-small); color: var(--rt-color-slate); max-width: 14rem; }
.hv-main { max-width: var(--rt-content-wide); }
.hv-flashes .alert { margin-bottom: var(--rt-space-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hv-override { border-color: var(--rt-color-ink); box-shadow: inset 3px 0 0 var(--rt-color-ink); }
.hv-map-wrap { margin-bottom: var(--rt-space-sm); }
#nearestList .list-group-item.active { background: var(--rt-color-ink); border-color: var(--rt-color-ink); color: #fff; }
#nearestList .list-group-item.active .text-muted { color: var(--rt-color-silver) !important; }
.hv-loc-status { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; min-height: 1.5rem; }
.hv-loc-status a { white-space: nowrap; }
.hv-weather { color: var(--rt-color-graphite); } .hv-weather .hv-weather-label { font-weight: 700; color: var(--rt-color-ink); }
.hv-filled { box-shadow: inset 3px 0 0 var(--rt-color-silver); }