/* Bodgeproof Web styles (web-conventions §12, §14, §16). Static pages load only this file; /app adds MudBlazor's.
   Tokens are mirrored in Components/AppArea/BodgeproofTheme.cs. No web fonts: system stacks only.
   The dark theme (§16.6) is one block at the end that changes the tokens, never the rules: "ink" is the text and
   "paper" the page on either theme, so a rule written with the tokens is right on both. */

:root {
  --bp-ink:       #1B1B1B;
  --bp-stamp-red: #C8102E;
  --bp-hivis:     #F2C200;
  --bp-steel:     #5F6B73;
  --bp-paper:     #FAF8F2;
  --bp-white:     #FFFFFF;

  /* What sits on a fill, and the stamp, which is red on paper but paper-coloured on dark (§16.4). */
  --bp-line:      #E4E1D8;
  --bp-on-red:    #FFFFFF;
  --bp-on-hivis:  #1B1B1B;
  --bp-stamp:     #C8102E;

  color-scheme: light;

  --bp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bp-stamp-font: "Arial Black", "Helvetica Neue", Arial, system-ui, sans-serif;
  --bp-radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--bp-font);
  font-size: 1rem;           /* ≥ 16 px (T4) */
  line-height: 1.5;
}

a { color: var(--bp-ink); text-underline-offset: 0.15em; }
/* phase-17 T (D31, the sweep's link-in-text-block; the overnight tester's 1.6, 7.3, 8.1): a link is underlined, never told
   apart by colour alone. MudBlazor's reset, which loads after this, takes it off every link; buttons, the menu and
   MudBlazor's own parts keep their own look, and a class of ours that sets none still wins. */
body a:where(:not(.bp-button, [class*="mud-"])) { text-decoration: underline; }
a:hover { text-decoration-thickness: 2px; }

/* A visible focus outline everywhere, never removed (A3). */
:focus-visible { outline: 3px solid var(--bp-ink); outline-offset: 2px; }
/* Except the heading the router focuses when a page loads (tabindex="-1", set by Blazor's FocusOnNavigate): it moves
   a screen reader to the page's start but isn't a control, so a box round it only looks like a fault (A3). */
h1[tabindex="-1"]:focus { outline: none; }

.bp-skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 2000;
  padding: 0.75rem 1rem;
  background: var(--bp-ink);
  color: var(--bp-paper);
}
.bp-skip:focus { top: 0.5rem; }

.bp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── The stamp wordmark (§16.4): stamp red on paper, never on ink; paper-coloured on dark ── */
.bp-stamp {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 3px solid var(--bp-stamp);
  border-radius: var(--bp-radius);
  color: var(--bp-stamp);
  font-family: var(--bp-stamp-font);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.bp-home { text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.bp-stamp-tick { display: none; }

/* ── Environment banner (§4): hi-vis yellow, ink text, ≥ 32 px ── */
.bp-environment-banner {
  min-height: 32px;
  padding: 0.35rem 1rem;
  background: var(--bp-hivis);
  color: var(--bp-on-hivis);
  font-weight: 700;
  text-align: center;
}

/* ── Public layout ── */
.bp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}
/* phase-16 D13: the links wrap under the stamp on a phone, with no script and no hidden menu. */
.bp-header-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.bp-header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.75rem;
  font-weight: 600;
}

.bp-main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}
.bp-main:focus { outline: none; }

.bp-footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  color: var(--bp-steel);
  border-top: 1px solid rgba(95, 107, 115, 0.3);
}

h1 { font-size: 1.75rem; line-height: 1.25; margin: 1rem 0; }
.bp-hero-title { font-size: 2.25rem; margin-bottom: 0.25rem; }

/* ── The website (phase-16 D12–D14, D24): sections set their own measure; text stays under about 80 characters. ── */
.bp-header-nav a.bp-header-demo, .bp-header-nav a.bp-header-trial { color: var(--bp-paper); text-decoration: none; padding: 0 1rem; }
/* phase-16 D28: the free trial's note under the website's buttons. */
.bp-site-trial-note { margin-top: -0.5rem; color: var(--bp-steel); font-size: 0.95rem; }
.bp-footer-nav { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-bottom: 0.5rem; }
.bp-footer-nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--bp-ink); }
.bp-site { padding: 0 0 3rem; }
.bp-site:focus { outline: none; }
/* One left edge for every section: a container as wide as the blocks, its text kept to a readable measure. */
.bp-site-measure { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.bp-site-measure > * { max-width: 44rem; }
/* phase-16 J1: the terms' contents and the providers' table. */
.bp-terms-contents ol { padding-left: 1.5rem; }
.bp-terms-contents li { margin: 0.2rem 0; }
.bp-site-terms h3 { font-size: 1.125rem; margin-top: 1.5rem; }
.bp-terms-providers { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
.bp-terms-providers th, .bp-terms-providers td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--bp-line); }
.bp-site-hero { padding: 1.5rem 0 1rem; }
.bp-site-title { font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.15; margin: 0.25rem 0 1rem; }
.bp-site-lead { font-size: 1.125rem; }
.bp-site-for { font-weight: 600; }
.bp-site-section { padding: 1.5rem 0; border-top: 1px solid var(--bp-line); }
.bp-site-section h2 { margin-top: 0.5rem; }
.bp-site-list, .bp-site-steps { padding-left: 1.25rem; }
.bp-site-list li, .bp-site-steps li { margin: 0.35rem 0; }
.bp-site-price { font-size: 1.125rem; font-weight: 700; }
.bp-site-questions dt { font-weight: 700; margin-top: 1rem; }
.bp-site-questions dd { margin: 0.25rem 0 0; }
.bp-site-contents ul { display: flex; flex-wrap: wrap; gap: 0 1rem; padding: 0; list-style: none; }
.bp-site-contents a { display: inline-flex; align-items: center; min-height: 48px; }
.bp-site-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem;
  max-width: 72rem;
  margin: 1rem auto;
  padding: 0 1rem;
}
.bp-site-block { padding: 1rem; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-site-block h3 { margin: 0.75rem 0 0.25rem; }
.bp-site-block p { margin: 0; }
.bp-site-shot { display: block; max-width: 100%; height: auto; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); background: #FFFFFF; }
.bp-site-block .bp-site-shot-phone { width: auto; height: 12rem; margin: 0 auto; }
.bp-site-block .bp-site-shot-desk { width: 100%; }
.bp-site-feature {
  display: grid;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.bp-site-feature .bp-site-shot-phone { width: 16rem; justify-self: center; }
@media (min-width: 60rem) {
  .bp-site-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .bp-site-feature-text { max-width: 36rem; }
}
.bp-site-closing { background: var(--bp-white); }
/* phase-16 D19: the price list side by side on a desk, and the calculator: a plain GET form, its answer under it. */
.bp-site-plans { display: grid; gap: 1rem; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.bp-site-plans .bp-pricing-plan { max-width: none; margin: 0; }
@media (min-width: 60rem) { .bp-site-plans { grid-template-columns: 1fr 1fr; align-items: start; } }
.bp-calculator-form { display: grid; gap: 0.75rem; }
.bp-calculator-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.bp-calculator-row label { flex: 1 1 14rem; }
.bp-calculator-row input { width: 8rem; min-height: 48px; padding: 0 0.75rem; font: inherit; color: var(--bp-ink); background: var(--bp-white); border: 2px solid var(--bp-steel); border-radius: var(--bp-radius); }
.bp-calculator-money { display: inline-flex; align-items: center; gap: 0.25rem; }
.bp-calculator-pay, .bp-calculator-paid { border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 0.5rem 0.75rem 0.75rem; margin: 0; }
.bp-calculator-pay legend, .bp-calculator-paid legend { font-weight: 600; padding: 0 0.25rem; }
.bp-calculator-pay label { display: flex; align-items: center; gap: 0.5rem; min-height: 48px; }
.bp-calculator-pay input { width: 1.25rem; height: 1.25rem; accent-color: var(--bp-ink); }
.bp-calculator-submit { justify-self: start; min-height: 48px; }
.bp-quote { margin-top: 1.5rem; padding: 1rem; border: 2px solid var(--bp-ink); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-quote h3 { margin-top: 0; }
.bp-quote-lines { width: 100%; border-collapse: collapse; }
.bp-quote-lines td, .bp-quote-lines th { padding: 0.35rem 0; border-bottom: 1px solid var(--bp-line); text-align: left; }
.bp-quote-lines td:first-child { width: 100%; }
.bp-quote-lines .bp-quote-pence { text-align: right; white-space: nowrap; padding-left: 1rem; }
.bp-quote-lines .bp-quote-total { text-align: right; padding-left: 1rem; min-width: 9rem; white-space: nowrap; }
.bp-quote-lines tfoot th, .bp-quote-total { font-weight: 700; font-size: 1.125rem; }
.bp-quote-difference { font-weight: 600; }
.bp-quote-corrections { padding-left: 1.25rem; border-left: 4px solid var(--bp-hivis); }
.bp-tagline { font-size: 1.25rem; font-weight: 700; color: var(--bp-stamp-red); margin-top: 0; }
.bp-secondary, .bp-hint { color: var(--bp-steel); }
.bp-hint { margin: 0.25rem 0; font-size: 0.95rem; }

.bp-notice {
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--bp-hivis);
  background: var(--bp-white);
}

/* ── Forms (§6, §12) ── */
.bp-form { display: flex; flex-direction: column; gap: 1rem; }

.bp-field { display: flex; flex-direction: column; gap: 0.25rem; }
.bp-field label { font-weight: 700; }

.bp-field input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;           /* ≥ 16 px stops iOS zooming on focus */
  color: var(--bp-ink);
  background: var(--bp-white);
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
}

.bp-check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: 48px;
}
.bp-check input { width: 1.5rem; height: 1.5rem; margin: 0 0.75rem 0 0; }
.bp-check .validation-message { flex-basis: 100%; }

input.invalid, input[aria-invalid="true"] { border-color: var(--bp-stamp-red) !important; }
.validation-message { color: var(--bp-stamp-red); font-weight: 600; }

.bp-form-errors:empty { display: none; }
.bp-form-errors {
  padding: 0.75rem 1rem;
  border: 2px solid var(--bp-stamp-red);
  border-radius: var(--bp-radius);
  background: var(--bp-white);
  color: var(--bp-ink);
}
.bp-form-errors p { margin: 0.25rem 0; }
/* phase-17 A (the tester's 1.6): beside a static form's button, pointing up at the messages. */
.bp-form-errors-near { color: var(--bp-stamp-red); font-weight: 600; margin: 0.5rem 0; }
/* phase-17 A (the tester's 4.5): a defect's photo as a picture. */
.bp-defect-files { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-defect-thumb { display: block; width: 6rem; height: 6rem; object-fit: cover; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); }

/* ── Buttons (T1, T3) ── */
.bp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0.5rem 1.25rem;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--bp-ink);
  border-radius: var(--bp-radius);
  cursor: pointer;
}
.bp-button-primary { background: var(--bp-ink); color: var(--bp-paper); }
.bp-button-secondary { background: var(--bp-white); color: var(--bp-ink); }
.bp-button[disabled] { opacity: 0.6; cursor: not-allowed; }
.bp-form > .bp-button { min-height: 56px; width: 100%; }
/* round 5: on the billing page the offer code is a side door, not the page's main action. */
.bp-billing-offer .bp-form { max-width: 28rem; }
.bp-billing-offer .bp-form > .bp-button { width: auto; align-self: flex-start; min-height: 44px; }
.bp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ── /app ── */
.bp-appbar { border-bottom: 1px solid rgba(95, 107, 115, 0.3); }
/* Two classes: MudBlazor's stylesheet comes after this one, and its .mud-typography margin hid a lone garage's gap (round 5). */
.bp-appbar .bp-appbar-organisation { margin-left: 1rem; font-weight: 600; }
/* On a phone the garage's and the user's names share what the stamp leaves, cut short rather than wrapped (§12). */
@media (max-width: 599.98px) {
  .bp-appbar .bp-appbar-organisation { margin-left: 0.5rem; }
  .bp-appbar-organisation, .bp-appbar-user { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .bp-appbar-organisation, .bp-appbar-organisation .mud-button-label, .bp-appbar-user .mud-button-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* MudBlazor puts a menu's arrow inside its label: placed against the button instead, the cut doesn't take it. */
  .bp-appbar-organisation .mud-button-root, .bp-appbar-user .mud-button-root { position: relative; max-width: 100%; padding-right: 2rem; }
  .bp-appbar-organisation .mud-button-icon-end, .bp-appbar-user .mud-button-icon-end {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  /* phase-17 A (the tester's 2.13): the stamp is its tick, and the account and Today buttons are their icons, so the
     garage's name has the room. The words stay for screen readers: font size nought hides them, and the icons are sized
     in rem. Neither button gives way to the name: cut, they'd lose their icons. */
  .bp-appbar .bp-home .bp-stamp:not(.bp-stamp-tick) { display: none; }
  .bp-appbar .bp-stamp-tick { display: inline-block; padding: 0.05em 0.35em; font-size: 1.1rem; }
  .bp-appbar-user, .bp-rail-toggle { flex: none; }
  .bp-appbar-user .mud-button-label, .bp-rail-toggle .mud-button-label { font-size: 0; overflow: visible; }
  .bp-appbar-user .mud-button-root, .bp-rail-toggle.mud-button-root { min-width: 0; padding-left: 0.5rem; padding-right: 0.5rem; }
  /* Three classes: MudBlazor's ".mud-button-label .mud-button-icon-end" comes later with two. */
  .bp-appbar .bp-appbar-user .mud-button-icon-end { display: none; }
  .bp-appbar .bp-appbar-user .mud-button-icon-start, .bp-appbar .bp-rail-toggle .mud-button-icon-start { margin: 0; }
}
/* phase-15 D8: the page uses the window; text, forms and cards keep a readable width inside it. */
/* round 5: a guard: nothing wider than the column can push it sideways. (Round 5's cut-off MOT page was the screenshot
   tool: a full-page capture shrinks the window to 1 px and back, and caught the drawer's margin part way back.) */
.bp-app-main { padding: 1.5rem; min-width: 0; overflow-x: clip; }
.bp-app-main p, .bp-app-main .bp-hint { max-width: 80ch; }
.bp-app-main form, .bp-app-main .mud-form { max-width: 56rem; }
.bp-app-main:focus { outline: none; }
.bp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 0; }
.bp-user-menu { padding: 0.75rem 1rem; min-width: 14rem; }
.bp-user-menu p { margin: 0 0 0.25rem; }
.bp-user-menu-role { color: var(--bp-steel); }
.bp-user-menu form { margin-top: 0.75rem; }
.bp-user-menu .bp-button { width: 100%; }
.bp-pager { margin-top: 1rem; }
.bp-user-menu > p > a.bp-button { display: block; text-align: center; text-decoration: none; }
.bp-switch-form { margin-top: 0.5rem; }

/* Phase 1a: site details, members, account. */
.bp-back { margin: 0 0 1rem; }
.bp-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.5rem; margin: 0 0 1.5rem; }
.bp-details dt { color: var(--bp-steel); }
.bp-details dd { margin: 0; }
.bp-section-heading { margin-top: 2rem; }
.bp-leave, .bp-account-section { margin-top: 2.5rem; max-width: 36rem; }
.bp-leave .bp-secondary, .bp-account-section .bp-secondary { margin-bottom: 0.75rem; }
.bp-invite-link { margin: 0.75rem 0; }
.bp-copy-link { margin-top: 0.75rem; }
.bp-no-organisation {
  max-width: 36rem;
  padding: 1.5rem;
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
  background: var(--bp-white);
}

/* Phase 1b: support access, two-step login, /admin. */
.bp-support-banner, .bp-mfa-reminder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--bp-radius);
  font-weight: 600;
}
.bp-support-banner { background: var(--bp-stamp-red); color: var(--bp-on-red); }
.bp-mfa-reminder { background: var(--bp-hivis); color: var(--bp-on-hivis); }
.bp-mfa-reminder a { color: var(--bp-on-hivis); }
.bp-inline-form { display: inline; margin: 0; }
.bp-link-button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.bp-qr { width: 12rem; max-width: 100%; margin: 0.75rem 0; background: var(--bp-white); }
.bp-qr svg { display: block; width: 100%; height: auto; }
.bp-shared-key code, .bp-recovery-codes code { font-size: 1.1rem; letter-spacing: 0.05em; }
.bp-recovery-codes { columns: 2; max-width: 24rem; padding-left: 1.25rem; }
.bp-subheading { margin-top: 1.5rem; }
.bp-admin-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.bp-admin-nav-current { font-weight: 700; text-decoration-thickness: 2px; }
.bp-search { max-width: 24rem; }
.bp-support-start { max-width: 36rem; }
.bp-support-start textarea, .bp-support-start select { width: 100%; font: inherit; }
.bp-stale td { color: var(--bp-stamp-red); font-weight: 600; }
.bp-email-in-use { margin: 1rem 0; }
.bp-email-providers .bp-tag { margin: 0.25rem 0.4rem 0 0; }
.bp-provider-name { font-weight: 600; }
.bp-provider-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }

/* ── Equipment, templates and contractors (phase-2 §4). Status is never colour alone (T10): every state has words. ── */
.bp-filter { min-width: 12rem; max-width: 16rem; }
.bp-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border: 1px solid var(--bp-steel);
  border-radius: var(--bp-radius);
  font-size: 0.85rem;
  color: var(--bp-steel);
}
.bp-disposed, .bp-retired, .bp-gated, .bp-mot-module-off {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--bp-steel);
  background: var(--bp-white);
}
.bp-requirement {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
  background: var(--bp-white);
}
.bp-requirement .bp-details { margin-bottom: 0.5rem; }
.bp-requirement-title { font-weight: 700; }
.bp-applies { margin: 0.25rem 0 0.5rem; font-weight: 600; }
.bp-applies-false { color: var(--bp-steel); }
.bp-applies-unknown { color: var(--bp-ink); border-left: 4px solid var(--bp-hivis); padding-left: 0.5rem; }
.bp-off-by-default { margin: 0 0 0.5rem; color: var(--bp-steel); font-style: italic; }
.bp-interval-options { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.bp-source { margin: 0.25rem 0; }
.bp-confidence { color: var(--bp-steel); }
.bp-more-sources summary { cursor: pointer; }
.bp-note { margin: 0.5rem 0 0; }
.bp-nothing-tracked { font-weight: 600; }
.bp-template-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.bp-template-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.bp-template-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.bp-parameter-list { padding-left: 1.25rem; }
.bp-derived { margin: 0.5rem 0; }
.bp-derived-label { font-weight: 600; }
.bp-requirement-editor {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
}
.bp-requirement-editor legend { font-weight: 700; padding: 0 0.25rem; }
.bp-sources { margin-top: 0.75rem; }
.bp-sources-heading { margin: 0; font-weight: 600; }
.bp-source-editor { padding-left: 0.75rem; border-left: 2px solid rgba(95, 107, 115, 0.3); margin: 0.5rem 0; }

/* ── Inspections (phase-3 A4). Every status has its words (T10, A4); colour per web-conventions §16.3, no green. ── */
.bp-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
  background: var(--bp-white);
  color: var(--bp-ink);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.bp-status-in-date { border-color: var(--bp-steel); }
.bp-status-unknown { border-style: dashed; }
.bp-status-due-soon { background: var(--bp-hivis); border-color: var(--bp-hivis); color: var(--bp-on-hivis); }
.bp-status-overdue, .bp-status-do-not-use { background: var(--bp-stamp-red); border-color: var(--bp-stamp-red); color: var(--bp-on-red); }
.bp-status-detail { margin-left: 0.5rem; color: var(--bp-ink); }
.bp-item-status { margin: 0 0 1rem; }
.bp-obligation { margin: 0.5rem 0 0.75rem; padding: 0.75rem 0 0; border-top: 1px solid rgba(95, 107, 115, 0.3); }
.bp-obligation-status { margin: 0 0 0.5rem; }
.bp-last-done { margin: 0 0 0.5rem; color: var(--bp-steel); }
.bp-date-warning, .bp-clears { margin: 0 0 0.5rem; padding-left: 0.5rem; border-left: 4px solid var(--bp-hivis); }
/* phase-17 J: a reading made out to someone else, at the top of the filing form. */
.bp-file-not-yours { margin: 0 0 0.75rem; padding-left: 0.5rem; border-left: 4px solid var(--bp-hivis); font-weight: 600; }
.bp-file-duty-check { margin: 0.25rem 0 0.5rem; }
/* phase-17 K (D14): what read-only stops, on the billing page. */
.bp-billing-read-only { margin: 0.75rem 0; padding: 0.5rem 0.75rem; border-left: 4px solid var(--bp-hivis); }
.bp-billing-read-only-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
.bp-billing-read-only-stops { margin: 0.25rem 0; padding-left: 1.25rem; }
/* phase-17 K: hi-vis yellow marks edges and fills, never words: a warning notice's text and icon are ink, so they read in
   both themes (the read-only notice on a lapsed garage's pages was yellow on cream). Two classes, as MudBlazor's own rule loads after. */
.mud-alert.mud-alert-text-warning { color: var(--bp-ink); border-left: 4px solid var(--bp-hivis); }
.mud-alert.mud-alert-text-warning .mud-alert-icon { color: var(--bp-ink); }
.bp-switched-off { margin: 0 0 0.5rem; color: var(--bp-steel); font-weight: 600; }
.bp-update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--bp-hivis);
  background: var(--bp-white);
}
.bp-records { margin: 0; padding-left: 1.25rem; }
.bp-record { margin: 0 0 0.75rem; }
.bp-record p { margin: 0.1rem 0; }
.bp-record-voided .bp-record-line { text-decoration: line-through; color: var(--bp-steel); }
.bp-record-void { color: var(--bp-ink); font-style: italic; }
.bp-also-record { margin: 0; padding: 0.5rem 0.75rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); }
.bp-also-record legend { font-weight: 700; padding: 0 0.25rem; }
.bp-site-check { margin: 0 0 1.5rem; }
.bp-site-check .bp-toolbar { margin: 0.5rem 0; }
.bp-your-setting { margin: 0 0 0.5rem; }
.bp-your-setting p { margin: 0 0 0.5rem; }
.bp-change-summaries, .bp-update-previews { padding-left: 1.25rem; }
.bp-update-previews li { margin: 0 0 0.5rem; }
.bp-site-status .bp-status-detail { display: block; margin: 0.25rem 0 0; color: var(--bp-steel); }

/* ── Defects and do-not-use (phase-4 D12). Advisory: the banner informs, it never blocks; words carry every state. ── */
.bp-do-not-use {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--bp-stamp-red);
  background: var(--bp-white);
}
.bp-do-not-use-overridden { border-left-color: var(--bp-hivis); }
.bp-do-not-use-heading { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bp-status-overridden { border-color: var(--bp-hivis); margin-left: 0.25rem; }
.bp-next-due-not-known, .bp-panel-not-known { display: block; font-weight: 600; }
.bp-item-not-known { display: flex; flex-direction: column; gap: 0.125rem; margin: 0 0 1rem; }
.bp-triggers { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.bp-trigger-covered { color: var(--bp-steel); }
.bp-override { margin: 0 0 0.5rem; font-style: italic; }
.bp-past-rectify-by { margin: 0 0 1rem; padding-left: 0.5rem; border-left: 4px solid var(--bp-stamp-red); }
.bp-service-status-line { margin: 0 0 0.5rem; }
.bp-defects { list-style: none; margin: 0 0 1rem; padding: 0; }
.bp-defect { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-defect p { margin: 0.1rem 0; }
.bp-defect .bp-tag { margin: 0 0.5rem 0 0; }
.bp-defect-closed { background: transparent; }
.bp-defect-closed .bp-defect-description { color: var(--bp-steel); }
.bp-severity-danger { border-color: var(--bp-stamp-red); color: var(--bp-stamp-red); font-weight: 700; }
.bp-severity-by-date { border-color: var(--bp-ink); color: var(--bp-ink); }
.bp-defect-past { font-weight: 700; }
.bp-carried-over { padding-left: 0.5rem; border-left: 4px solid var(--bp-hivis); }
.bp-defect-close-note { font-style: italic; }
.bp-defect-files { margin: 0.25rem 0; padding-left: 1.25rem; }
.bp-override-triggers { margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); }
.bp-override-triggers legend { font-weight: 700; padding: 0 0.25rem; }
.bp-audit-reason { margin-top: 0.25rem; font-style: italic; }
.bp-audit-item { margin: 0 0 1rem; }

/* ── People (phase-5 Part A). Cards like the defects list; the health flag is a warning in words (T10). ── */
.bp-person-badges { margin: 0 0 1rem; }
.bp-health-flag { margin: 0 0 1rem; padding-left: 0.5rem; border-left: 4px solid var(--bp-stamp-red); font-weight: 700; }
.bp-people .bp-health-flag { margin: 0.25rem 0 0; }
.bp-certificates, .bp-appointments, .bp-health-checks { list-style: none; margin: 0 0 1rem; padding: 0; }
.bp-certificate, .bp-appointment, .bp-health-check {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
  background: var(--bp-white);
}
.bp-certificate p { margin: 0.1rem 0; }
.bp-certificate-line .bp-status, .bp-health-check .bp-status { margin-left: 0.5rem; }
.bp-certificate-superseded, .bp-appointment-ended { background: transparent; color: var(--bp-steel); }
.bp-certificate-note { font-style: italic; }
.bp-certificate-scans { margin: 0.25rem 0; padding-left: 1.25rem; }

/* ── Rota and cover (phase-5 Part B). Away and gaps are in words, not colour alone (T10). ── */
.bp-week-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-rota-actions { margin: 0 0 1rem; }
.bp-rota { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.bp-rota-day { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-rota-date { margin: 0 0 0.25rem; font-weight: 700; }
.bp-rota-shift + .bp-rota-shift { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed rgba(95, 107, 115, 0.3); }
.bp-rota-shift-name { margin: 0 0 0.25rem; }
.bp-rota-people { list-style: none; margin: 0; padding: 0; }
.bp-rota-person { padding: 0.15rem 0; }
.bp-rota-person .bp-tag { margin-left: 0.4rem; }
.bp-away > a { text-decoration: line-through; color: var(--bp-steel); }
.bp-away-tag { border-color: var(--bp-ink); color: var(--bp-ink); }
.bp-closed { margin: 0; font-weight: 700; }
.bp-rota-gap { margin: 0.4rem 0 0; padding-left: 0.5rem; border-left: 4px solid var(--bp-hivis); font-weight: 600; }
.bp-absences, .bp-shifts, .bp-pattern, .bp-stand-ins, .bp-assessment-versions, .bp-bank-holidays { margin: 0 0 1rem; padding-left: 1.25rem; }
.bp-advisories { list-style: none; margin: 0 0 1rem; padding: 0; }
.bp-advisory { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border: 1px solid rgba(95, 107, 115, 0.3); border-left: 4px solid var(--bp-hivis); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-advisory-info { border-left-color: var(--bp-steel); }
.bp-advisory p { margin: 0.15rem 0; }
.bp-advisory-title { font-weight: 700; }
.bp-advisory-status .bp-tag:first-child { margin-left: 0; }
.bp-advisory-body { font-size: 1.05rem; }
.bp-advisory-note, .bp-override-line { padding-left: 0.5rem; border-left: 4px solid var(--bp-steel); }
.bp-basis { color: var(--bp-steel); font-size: 0.95rem; }
.bp-basis-source { margin-left: 0.35rem; }
.bp-advisory-actions { margin: 1rem 0; }
.bp-subject + .bp-subject::before { content: ", "; }
.bp-setup-task { padding: 0.75rem 1rem; border-left: 4px solid var(--bp-hivis); background: var(--bp-white); }
.bp-ni-banner { padding: 0.75rem 1rem; border-left: 4px solid var(--bp-steel); background: var(--bp-white); }
.bp-suggestion { margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; border: 2px dashed var(--bp-steel); border-radius: var(--bp-radius); }
.bp-suggestion p { margin: 0.15rem 0; }
.bp-days, .bp-skill-service { margin: 0.5rem 0; padding: 0.25rem 0.75rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); }
.bp-days legend, .bp-skill-service legend { padding: 0 0.25rem; font-weight: 600; }
.bp-time-pair { display: flex; flex-wrap: wrap; gap: 1rem; }
.bp-time-pair > * { flex: 1 1 8rem; }
.bp-pattern-detail { margin: 0 0 0.5rem 2rem; }

/* ── First-aid wizard, notices and data protection (phase-5 Part C). Notes and prompts are words with a rule, not colour alone (T10). ── */
.bp-wizard-steps { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0 0 1rem; padding: 0; color: var(--bp-steel); }
.bp-wizard-step.bp-current { color: var(--bp-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25rem; }
.bp-wizard-panel { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-wizard-heading span:focus { outline: none; }
.bp-wizard-nav { margin: 0 0 1.5rem; }
.bp-context-notes { margin: 0.75rem 0; }
.bp-context-note { margin: 0 0 0.5rem; padding-left: 0.5rem; border-left: 4px solid var(--bp-steel); }
.bp-hazard-examples dd { font-style: italic; }
.bp-section-label { margin: 1rem 0 0.25rem; font-weight: 600; }
.bp-kits { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.bp-assessment-pdf { margin-left: 0.35rem; }
.bp-notice-stale { padding: 0.75rem 1rem; border-left: 4px solid var(--bp-steel); background: var(--bp-white); font-weight: 600; }
.bp-notice-preview { margin: 0.5rem 0; padding: 0.75rem 1rem; border: 2px solid var(--bp-ink); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-notice-emergency { margin: 0.5rem 0 0; font-size: 1.15rem; }
.bp-site-notice .bp-actions { align-items: center; }
.bp-dp-template { margin: 0 0 1.5rem; }
.bp-dp-text textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
.bp-dp-template .bp-actions { align-items: center; }

.bp-load-error, .bp-screen-error {
  padding: 1rem;
  border: 2px solid var(--bp-stamp-red);
  border-radius: var(--bp-radius);
  background: var(--bp-white);
}

/* ── Empty states (§13.4): the workshop cat ── */
.bp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--bp-steel);
}
.bp-empty-state p { color: var(--bp-ink); margin: 0; }
.bp-empty-cat { color: var(--bp-steel); }

/* ── Reconnect modal (§4): hidden until Blazor marks the connection state ── */
.bp-reconnect { display: none; }
.bp-reconnect.components-reconnect-show,
.bp-reconnect.components-reconnect-retrying,
.bp-reconnect.components-reconnect-failed,
.bp-reconnect.components-reconnect-rejected,
.bp-reconnect.components-reconnect-paused,
.bp-reconnect.components-reconnect-resume-failed {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  background: rgba(27, 27, 27, 0.5);
}
.bp-reconnect-dialog {
  max-width: 24rem;
  padding: 1.5rem;
  background: var(--bp-white);
  border-radius: var(--bp-radius);
  color: var(--bp-ink);
}
.bp-reconnect-failed-text { display: none; }
.bp-reconnect.components-reconnect-failed .bp-reconnect-failed-text,
.bp-reconnect.components-reconnect-rejected .bp-reconnect-failed-text,
.bp-reconnect.components-reconnect-resume-failed .bp-reconnect-failed-text { display: block; }
.bp-reconnect.components-reconnect-failed .bp-reconnect-retrying-text,
.bp-reconnect.components-reconnect-rejected .bp-reconnect-retrying-text,
.bp-reconnect.components-reconnect-resume-failed .bp-reconnect-retrying-text { display: none; }

/* ── Dashboard (phase-6 D15): counts in words and numbers, never colour alone. ── */
.bp-dashboard { margin: 0 0 1.5rem; }
.bp-dashboard-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.bp-count { padding: 0.75rem; background: var(--bp-white); border-left: 4px solid var(--bp-steel); border-radius: var(--bp-radius); }
.bp-count[data-count="dangerous"] { border-left-color: var(--bp-stamp-red); }
.bp-count[data-count="due-soon"] { border-left-color: var(--bp-hivis); }
.bp-count dt { font-size: 0.875rem; color: var(--bp-steel); }
.bp-count dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
.bp-top-actions, .bp-setup-tasks, .bp-caught { margin: 0.5rem 0 1rem; padding-left: 1.25rem; }
.bp-top-action { margin: 0.25rem 0; }
.bp-top-action .bp-secondary { display: block; font-size: 0.875rem; }
/* round 6: "and 3 more" under the top five opens the rest in the same list. */
.bp-top-actions-more { margin: -0.5rem 0 1rem 1.25rem; }

/* ── Calendar feed settings (notifications.md §10). ── */
.bp-calendar-url { max-width: 48rem; overflow-wrap: anywhere; }

/* No wobble or transitions for people who ask for less motion (A8). */
@media (prefers-reduced-motion: reduce) {
  .bp-stamp { transform: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Scan pages (web-conventions §12; qr-tags.md §9): one column, big targets, no web fonts. ── */
.bp-scan { max-width: 30rem; margin: 0 auto; padding: 1rem 1rem 2.5rem; font-size: 1rem; line-height: 1.5; }
.bp-scan:focus { outline: none; }
.bp-touch { min-height: 48px; min-width: 48px; }
.bp-scan-head { margin: 0.5rem 0 1rem; }
.bp-scan-garage { margin: 0; font-size: 1.25rem; font-weight: 700; }
.bp-scan-title { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.5rem; }
.bp-scan-subtitle { font-size: 1.25rem; margin: 1.5rem 0 0.25rem; }
.bp-scan-where, .bp-scan-item, .bp-scan-location { margin: 0.25rem 0; }
.bp-scan-item { font-size: 1.25rem; font-weight: 700; }
.bp-scan-status { margin: 1rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bp-scan-status .bp-status-detail { margin-left: 0; }
.bp-scan-banner { padding: 0.75rem 1rem; border-left: 6px solid var(--bp-hivis); background: var(--bp-white); font-weight: 700; }
.bp-scan-defects { font-weight: 700; }
.bp-scan-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.bp-scan-due { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(95, 107, 115, 0.3); }
.bp-scan-due-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bp-scan-due-status .bp-status-detail { margin-left: 0; }
.bp-scan-actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.bp-scan-actions .bp-button { width: 100%; }
.bp-scan-primary { min-height: 56px; }
.bp-scan-code { color: var(--bp-steel); font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
.bp-scan-error { padding: 0.75rem 1rem; border: 2px solid var(--bp-stamp-red); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-scan-form { margin-top: 1rem; }
.bp-scan-form input { text-transform: uppercase; letter-spacing: 0.05em; }
.bp-scan-foot { margin-top: 2.5rem; font-size: 0.875rem; color: var(--bp-steel); }
.bp-scan-foot a { color: var(--bp-steel); }

/* ── Tags in the app (qr-tags.md §7, §11) ── */
.bp-tag-candidates { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.bp-tag-candidate { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(95, 107, 115, 0.3); }
.bp-tag-candidate > div { min-width: 0; }
.bp-tag-candidate .bp-tag-pick { flex: none; white-space: nowrap; }
.bp-tag-candidate-chosen { background: var(--bp-white); }
.bp-tag-code { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
.bp-item-tags { padding-left: 1.25rem; }
.bp-card-setting { margin: 0.5rem 0 1rem; }

/* ── Notice and pack scans (qr-tags.md §7.5, §10.3) ── */
.bp-scan-emergency { margin: 1rem 0; padding: 0.75rem 1rem; background: var(--bp-stamp-red); color: var(--bp-on-red); font-size: 1.25rem; font-weight: 700; }
.bp-scan-notice-part .bp-scan-list li { padding: 0.25rem 0; }
.bp-scan-updated { margin-top: 1.5rem; }
.bp-scan-pack { font-size: 1.125rem; }

/* ── Printing tags (qr-tags.md §8) ── */
.bp-print-templates { display: block; }
.bp-print-template { margin: 0.25rem 0 0.75rem; }
.bp-print-template .bp-secondary { margin-left: 2.5rem; }
.bp-print-start-at { max-width: 14rem; }
.bp-print-item-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; max-width: 48rem; }
.bp-print-item { padding: 0.5rem 0; border-bottom: 1px solid rgba(95, 107, 115, 0.3); }
.bp-print-item label { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 24px; }
.bp-print-item input { margin-top: 0.25rem; width: 1.25rem; height: 1.25rem; flex: none; }
.bp-print-help { padding-left: 1.25rem; max-width: 48rem; }
.bp-choice { border: 0; padding: 0; margin: 0 0 1rem; }
.bp-choice legend { font-weight: 700; padding: 0; margin-bottom: 0.25rem; }
.bp-choice label { display: flex; align-items: center; gap: 0.5rem; min-height: 32px; }
.bp-item-print { display: inline; }

/* ── Report a problem (qr-tags.md §10.2) ── */
.bp-scan-report { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid rgba(95, 107, 115, 0.3); }
.bp-scan-report-form { display: flex; flex-direction: column; gap: 1rem; }
.bp-field textarea {
  min-height: 6rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--bp-ink);
  background: var(--bp-white);
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
  resize: vertical;
}
.bp-field input[type="file"] { min-height: 48px; padding: 0.5rem 0; border: 0; background: transparent; }
.bp-scan-report-send { width: 100%; min-height: 56px; }
/* The honeypot (phase-7 D21): out of sight and out of the tab order; a person never fills it. */
.bp-scan-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bp-scan-thanks { margin-top: 0.5rem; }
.bp-scan-privacy { font-size: 0.875rem; }

/* ── Staff actions on a scan (qr-tags.md §11) ── */
.bp-scan-checks { display: flex; flex-direction: column; gap: 0.75rem; }
.bp-scan-check { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 56px; text-align: left; }
.bp-scan-check-title { font-weight: 700; }
.bp-scan-check-due { font-weight: 400; font-size: 0.875rem; }
.bp-scan-check-off { margin: 0; }

/* ── In-house checks (qr-tags.md §12) ── */
.bp-checklist { padding-left: 1.25rem; margin: 1rem 0; max-width: 40rem; }
.bp-check-item { padding: 0.75rem 0; border-bottom: 1px solid rgba(95, 107, 115, 0.3); }
.bp-check-question { display: block; font-weight: 700; margin-bottom: 0.5rem; }
.bp-check-answers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-check-answers .bp-check-answer { min-height: 48px; }
.bp-check-single .bp-check-answer { flex: 1 1 12rem; }
.bp-check-problem { margin: 1.5rem 0; padding: 1rem; border-left: 6px solid var(--bp-stamp-red); background: var(--bp-white); max-width: 40rem; }
.bp-check-by, .bp-check-notes { max-width: 40rem; }
.bp-check-saved { font-size: 1.125rem; font-weight: 700; }

/* ── Photos from interactive pages (phase-7 D27): a label as the button, the file input hidden but focusable ── */
.bp-photo-upload { margin: 0.75rem 0; }
.bp-photo-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bp-photo-pick:focus-within { outline: 3px solid var(--bp-ink); outline-offset: 2px; }
.bp-photo-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bp-photo-sending { opacity: 0.6; }
.bp-photo-done { color: var(--bp-ink); font-weight: 600; }
.bp-photo-problem { color: var(--bp-stamp-red); font-weight: 600; }

/* ── Public report triage (qr-tags.md §10.2) ── */
.bp-report-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.bp-reports { list-style: none; padding: 0; margin: 0; max-width: 48rem; }
.bp-report { padding: 1rem; margin-bottom: 1rem; background: var(--bp-white); border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); }
.bp-report-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.bp-report-item { font-weight: 700; font-size: 1.125rem; }
.bp-report-status { font-size: 0.875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: var(--bp-radius); background: var(--bp-paper); }
.bp-report-status-new { background: var(--bp-hivis); color: var(--bp-on-hivis); }
.bp-report-text { white-space: pre-line; overflow-wrap: anywhere; }
.bp-report-photo { display: block; max-width: 100%; max-height: 16rem; border-radius: var(--bp-radius); }

/* ── Claim mode (qr-tags.md §7.2) ── */
.bp-claim-scanner { max-width: 32rem; }
.bp-claim-video { display: block; width: 100%; max-height: 50vh; background: var(--bp-ink); border-radius: var(--bp-radius); object-fit: cover; }
.bp-claim-video-off { display: none; }
.bp-claim-type { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.bp-claim-type .bp-claim-typed { flex: 1 1 12rem; }
.bp-claim-current { margin: 1.5rem 0; padding: 1rem; background: var(--bp-white); border-left: 6px solid var(--bp-hivis); max-width: 40rem; }
.bp-claim-suggest-line { font-size: 1.125rem; }
.bp-claim-walk-list { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
.bp-claim-walk-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; border-bottom: 1px solid rgba(95, 107, 115, 0.3); }
.bp-claim-camera-problem { color: var(--bp-stamp-red); font-weight: 600; }

/* Phase 8: exports (documents-and-retention §11). A status is a word, the colour only helps. */
.bp-export-card { padding: 1rem; margin: 0 0 1.5rem; background: var(--bp-white); border-left: 6px solid var(--bp-hivis); max-width: 40rem; }
.bp-export-message { font-weight: 600; margin: 0.75rem 0 0; }
.bp-exports { overflow-x: auto; }
/* phase-17 T (the sweep): a wide admin table scrolls in a wrapper that takes the keyboard's focus. MudBlazor's container
   has overflow-y: auto, which turns an overflow-x of visible into auto, so both go. */
.bp-table-scroll { overflow-x: auto; }
.bp-table-scroll .mud-table-container { overflow: visible; }
.bp-table-scroll:focus-visible { outline: 3px solid var(--bp-hivis); outline-offset: 2px; }
.bp-export-highlight td { background: rgba(242, 194, 0, 0.18); }
.bp-export-status { font-size: 0.875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: var(--bp-radius); background: var(--bp-paper); }
.bp-export-status-queued, .bp-export-status-running { background: var(--bp-hivis); color: var(--bp-on-hivis); }
.bp-export-status-failed { color: var(--bp-stamp-red); }
.bp-export-download { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.bp-person-export { margin: 0.5rem 0 1rem; }
.bp-person-export-link { font-weight: 600; }
.bp-pack-form { padding: 1rem; margin: 0 0 1.5rem; background: var(--bp-white); max-width: 48rem; }
.bp-pack-audiences, .bp-pack-sections { border: 0; padding: 0; margin: 0 0 1rem; }
.bp-pack-audiences legend, .bp-pack-sections legend { font-weight: 700; margin-bottom: 0.5rem; }
.bp-pack-audience-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; }
.bp-pack-audience { min-height: 64px; padding: 0.75rem; border: 2px solid var(--bp-steel); border-radius: var(--bp-radius); background: var(--bp-paper); color: var(--bp-ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.bp-pack-audience-selected { border-color: var(--bp-ink); background: var(--bp-hivis); color: var(--bp-on-hivis); }
.bp-pack-period { display: flex; flex-wrap: wrap; gap: 1rem; }
.bp-pack-period > * { flex: 1 1 10rem; }
.bp-pack-section-unavailable { opacity: 0.75; }
.bp-pack-section-unavailable .bp-hint { display: block; margin: 0 0 0.5rem 2.75rem; }
.bp-pack-names-warning { font-weight: 600; border-left: 4px solid var(--bp-hivis); padding-left: 0.5rem; }
.bp-pack-message { font-weight: 600; margin: 0.75rem 0 0; }
.bp-packs { overflow-x: auto; }
.bp-pack-highlight td { background: rgba(242, 194, 0, 0.18); }
.bp-pack-links a { display: flex; align-items: center; min-height: 48px; font-weight: 600; }
.bp-pack-empty-action { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }

/* The site dialog's MOT module switch (phase-9 D6): apart from the form, it saves at once. */
.bp-mot-module {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(95, 107, 115, 0.3);
}
.bp-mot-module .bp-hint {
  margin: 0 0 0.5rem;
}
.bp-mot-module-message {
  margin: 0;
}

/* The MOT testers view (phase-9 D10): one card per tester, phone first. */
.bp-mot-testers {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.bp-mot-tester-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.bp-mot-tester-name {
  font-weight: 600;
}
.bp-mot-tester-status, .bp-mot-countdown {
  margin: 0.25rem 0;
}
.bp-mot-countdown {
  font-weight: 600;
}
.bp-mot-tester {
  padding: 0.75rem 1rem;
  background: var(--bp-white);
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
}
.bp-mot-tester .bp-details, .bp-mot-hours-note {
  margin: 0.5rem 0 0;
}

/* The MOT page (phase-9 D19): per site, the testers' QC lines, the site audit and recent records, phone first. */
.bp-mot-site {
  margin: 0 0 2rem;
}
.bp-mot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
}
.bp-mot-heading {
  margin: 1.25rem 0 0.5rem;
}
.bp-mot-lines, .bp-mot-history, .bp-mot-files {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.bp-mot-line {
  padding: 0.75rem 1rem;
  background: var(--bp-white);
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
}
.bp-mot-line-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.bp-mot-line-name {
  font-weight: 600;
}
.bp-mot-line-status, .bp-mot-last {
  margin: 0.25rem 0;
}
.bp-mot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.bp-mot-record {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  overflow-wrap: anywhere;
}
.bp-void a {
  text-decoration: line-through;
}
.bp-prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The site audit checklist (phase-9 D14): one question per row, three large choices that fit a phone. */
.bp-audit-group {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bp-audit-group-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  padding: 0;
}
.bp-audit-questions, .bp-audit-answers {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 1rem;
}
.bp-audit-text {
  margin: 0 0 0.5rem;
}
.bp-audit-facts {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bp-white);
  border-left: 4px solid var(--bp-hivis);
  border-radius: var(--bp-radius);
}
.bp-audit-facts-title {
  font-weight: 600;
}
.bp-audit-facts ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}
.bp-audit-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.bp-audit-choice {
  min-height: 48px;
  padding: 0.5rem;
  font: inherit;
  font-weight: 600;
  color: var(--bp-ink);
  background: var(--bp-white);
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
  cursor: pointer;
}
.bp-audit-choice.bp-chosen {
  color: var(--bp-white);
  background: var(--bp-ink);
  border-color: var(--bp-ink);
}
.bp-audit-choice-no.bp-chosen {
  color: var(--bp-on-red);
  background: var(--bp-stamp-red);
  border-color: var(--bp-stamp-red);
}
.bp-audit-progress {
  font-weight: 600;
}
.bp-audit-no .bp-audit-given {
  color: var(--bp-stamp-red);
}
.bp-audit-given {
  margin: 0;
}

/* Phase 10 Part A: the sign-in book. The board is for a shared tablet or a phone: big name buttons, two columns
   when there's room, one on a phone; a signed-in name is ink with a hi-vis edge, never colour alone. */
.bp-signin-intro {
  max-width: 40rem;
}
.bp-signin-staff, .bp-signin-sites {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}
.bp-signin-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 64px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1.125rem;
  text-align: left;
  color: var(--bp-ink);
  background: var(--bp-white);
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
  cursor: pointer;
}
.bp-signin-person.bp-signin-in {
  color: var(--bp-paper);
  background: var(--bp-ink);
  border-color: var(--bp-ink);
  box-shadow: inset 6px 0 0 var(--bp-hivis);
}
.bp-signin-person[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.bp-signin-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.bp-signin-state {
  flex: none;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bp-signin-site {
  width: 100%;
  text-decoration: none;
}
.bp-signin-section {
  max-width: 48rem;
}
.bp-signin-arrangements {
  max-width: 36rem;
  padding: 1rem;
  background: var(--bp-white);
  border-left: 6px solid var(--bp-hivis);
}
.bp-signin-welcome {
  margin: 0 0 0.75rem;
  font-weight: 700;
}
.bp-signin-subheading {
  margin-top: 1.5rem;
}
.bp-signin-visits {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.bp-signin-visit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bp-white);
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
}
.bp-signin-links, .bp-site-signin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}
.bp-site-signin {
  max-width: 40rem;
}
.bp-signin-transparency {
  margin: 0.25rem 0 0.75rem;
}
.bp-register-intro {
  max-width: 40rem;
}
.bp-register-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 40rem;
}
.bp-register-date {
  flex: 1 1 12rem;
}
.bp-register-rows {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 48rem;
}
.bp-register-row {
  padding: 0.75rem 1rem;
  background: var(--bp-white);
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
}
.bp-register-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}
.bp-register-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.bp-register-events {
  margin: 0.25rem 0 0;
}
.bp-register-open {
  margin: 0.25rem 0 0;
  font-weight: 700;
  color: var(--bp-stamp-red);
}

/* The sign-in poster's card (D7): the scan page's patterns, the report form's fields. */
.bp-scan-signin-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bp-scan-subject {
  margin: 0;
  padding: 0;
  border: 0;
}
.bp-scan-subject legend {
  padding: 0;
  font-weight: 700;
}
.bp-scan-subject label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
}
.bp-scan-subject input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}
.bp-scan-signin-off {
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--bp-steel);
  background: var(--bp-white);
  font-weight: 700;
}
.bp-scan-assembly {
  font-size: 1.125rem;
  font-weight: 700;
}
.bp-scan-signin-staff {
  font-size: 0.875rem;
}
.bp-signin-retention {
  max-width: 36rem;
  margin: 0 0 1.5rem;
}
/* MudBlazor's typography rules load after this file; two classes keep the board's headings apart from what's above. */
.bp-signin-section .bp-section-heading,
.bp-signin-section .bp-signin-subheading {
  margin-top: 1.5rem;
}

/* Phase 10 Part B: the roll call (big ticks, phone first) and the fire log. */
.bp-signin-roll-call-running {
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--bp-stamp-red);
  background: var(--bp-white);
  font-weight: 700;
}
.bp-roll-call-lead, .bp-roll-call-assembly {
  max-width: 40rem;
}
.bp-roll-call-assembly {
  font-size: 1.125rem;
  font-weight: 700;
}
.bp-roll-call-count {
  font-size: 1.25rem;
  font-weight: 700;
}
.bp-roll-call-entries {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
}
.bp-roll-call-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  width: 100%;
  min-height: 72px;
  padding: 0.75rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--bp-ink);
  background: var(--bp-white);
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
  cursor: pointer;
}
.bp-roll-call-entry.bp-roll-call-ticked {
  color: var(--bp-paper);
  background: var(--bp-ink);
  border-color: var(--bp-ink);
  box-shadow: inset 6px 0 0 var(--bp-hivis);
}
.bp-roll-call-entry[disabled] {
  cursor: default;
}
.bp-roll-call-name {
  font-size: 1.125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.bp-roll-call-who {
  grid-column: 1;
  font-size: 0.875rem;
}
.bp-roll-call-state {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bp-roll-call-finishes, .bp-fire-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.bp-roll-call-finished {
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--bp-hivis);
  background: var(--bp-white);
}
.bp-fire-intro {
  max-width: 40rem;
}
.bp-fire-checks, .bp-fire-entries {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
}
.bp-fire-check, .bp-fire-entry {
  padding: 0.75rem 1rem;
  background: var(--bp-white);
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
}
.bp-fire-check-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}
.bp-fire-entry-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}
.bp-fire-entry-kind {
  font-weight: 700;
}
.bp-fire-entry-line, .bp-fire-entry-by, .bp-fire-entry-voided {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}
.bp-fire-entry-void .bp-fire-entry-kind {
  text-decoration: line-through;
}
.bp-fire-entry-voided {
  font-weight: 700;
  color: var(--bp-stamp-red);
}

/* The accident book (phase-10 D18–D20): plain and calm. The form is phone first; the book is cards like the fire log. */
.bp-accident-intro, .bp-accident-book-intro {
  max-width: 40rem;
}
.bp-accident-who {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bp-accident-who legend {
  font-weight: 700;
  margin: 0 0 0.25rem;
  padding: 0;
}
.bp-accidents {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
}
.bp-accident {
  padding: 0.75rem 1rem;
  background: var(--bp-white);
  border: 1px solid rgba(95, 107, 115, 0.3);
  border-radius: var(--bp-radius);
}
.bp-accident p {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}
.bp-accident .bp-accident-title {
  margin: 0;
  font-weight: 700;
}
.bp-accident-void .bp-accident-title a {
  text-decoration: line-through;
}
.bp-accident-flag {
  font-weight: 700;
}
.bp-accident-riddor, .bp-accident-recorded {
  max-width: 40rem;
  overflow-wrap: anywhere;
}
.bp-accident-follow-ups, .bp-accident-files {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  overflow-wrap: anywhere;
}
.bp-accident-actions {
  margin-top: 2rem;
}
.bp-accident-details dd, .bp-accident-riddor-details dd {
  overflow-wrap: anywhere;
}

/* ── Intake (phase 11): a contractor's upload pages on a phone, and the Managers' links and inbox ── */
.bp-upload-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.bp-upload-thing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid rgba(95, 107, 115, 0.3); }
.bp-upload-thing a { display: flex; flex-direction: column; flex: 1 1 14rem; padding: 0.5rem 0; color: inherit; text-decoration: none; }
.bp-upload-thing a strong { text-decoration: underline; }
.bp-upload-sent-today { font-weight: 700; font-size: 0.875rem; padding: 0.125rem 0.5rem; border: 2px solid var(--bp-ink); }
.bp-upload-form, .bp-upload-add, .bp-inspector-form { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }
.bp-upload-duties { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bp-upload-duties legend { font-weight: 700; margin-bottom: 0.25rem; }
.bp-upload-form .bp-check, .bp-upload-not-done { min-height: 48px; }
.bp-upload-until, .bp-upload-ended { font-weight: 700; }
.bp-scan-inspector { margin: 1.5rem 0 0; }
.bp-scan-inspector a { display: inline-flex; align-items: center; min-height: 48px; }
.bp-scan-back { margin: 1.5rem 0 0; }
.bp-upload-link-card { max-width: 48rem; overflow-wrap: anywhere; }
.bp-upload-link-url { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bp-upload-link-url .bp-upload-link-address { flex: 1 1 16rem; min-width: 0; }
.bp-upload-link-code strong { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.1em; font-size: 1.25rem; }
.bp-upload-link-cover { margin: 0 0 1rem; padding-left: 1.25rem; }
/* phase-17 A: a contractor's work and the retired schedules, as lists inside the page's column. */
.bp-contractor-recent, .bp-contractor-duties, .bp-retired-templates { margin: 0.25rem 0 1.5rem; padding-left: 1.25rem; }
.bp-contractor-recent li, .bp-contractor-duties li, .bp-retired-templates li { margin-bottom: 0.35rem; }
.bp-contractor-recent-none, .bp-contractor-duties-none { margin: 0.25rem 0 1.5rem; }
.bp-ended-links { margin: 1.5rem 0; }
.bp-inbox { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.75rem; max-width: 48rem; }
.bp-inbox-title { font-weight: 700; overflow-wrap: anywhere; }
.bp-inbox-details dd, .bp-inbox-files li, .bp-inbox-records li { overflow-wrap: anywhere; }
.bp-inbox-records, .bp-inbox-files { margin: 0 0 1rem; padding-left: 1.25rem; }
.bp-inbox-records .bp-void { text-decoration: line-through; }
.bp-inbox-note { white-space: pre-line; }
.bp-cover-site { margin-top: 1rem; }

/* Phase 11 Part B: the inbox's own address, an email's text, and filing each of its files. */
.bp-inbox-address { max-width: 48rem; overflow-wrap: anywhere; }
.bp-inbox-address-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 1rem; }
.bp-inbox-address-value { font-size: 1.125rem; overflow-wrap: anywhere; min-width: 0; }
.bp-inbox-heading { overflow-wrap: anywhere; }
.bp-inbox-body { white-space: pre-line; overflow-wrap: anywhere; max-width: 48rem; padding: 0.75rem 1rem; margin: 0 0 1rem; border-left: 4px solid rgba(95, 107, 115, 0.4); }
.bp-inbox-file-actions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-left: 0.5rem; vertical-align: middle; }
.bp-inbox-files li { padding: 0.25rem 0; }
.bp-inbox-skipped { margin: 0 0 1rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
.bp-file-where { display: flex; flex-direction: column; }
.bp-file-record { margin-top: 0.5rem; }

/* Phase 11 Part C: what waits in the inbox, on the dashboard and in the menu. */
.bp-dashboard-waiting { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.bp-dashboard-waiting a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.bp-nav-count { display: inline-block; min-width: 1.5rem; margin-left: 0.5rem; padding: 0 0.4rem; border-radius: 0.75rem; background: var(--bp-ink); color: var(--bp-paper); font-size: 0.8125rem; font-weight: 700; line-height: 1.5rem; text-align: center; }

/* Phase 12 Part A: billing's banner on every /app page, the Owner's billing page, the closed panel, and the Local
   stand-in's checkout and portal pages. */
.bp-billing-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: var(--bp-radius); font-weight: 600; overflow-wrap: anywhere; }
.bp-billing-banner-info { background: var(--bp-white); border: 2px solid var(--bp-steel); color: var(--bp-ink); }
.bp-billing-banner-warning { background: var(--bp-hivis); color: var(--bp-on-hivis); }
.bp-billing-banner-link { display: inline-flex; align-items: center; min-height: 48px; color: inherit; font-weight: 700; }
.bp-billing-message { font-weight: 600; }
.bp-billing-start, .bp-billing-plan { max-width: 48rem; margin-bottom: 1rem; padding: 1rem; }
.bp-billing-plan { border: 2px solid var(--bp-steel); border-radius: var(--bp-radius); }
.bp-billing-plan .bp-details { margin-bottom: 1rem; }

/* /admin/readers (phase-13 D4): the queue, the readers, and a new reader's key shown once. */
.bp-reading-off { margin: 0 0 0.75rem; padding-left: 0.5rem; border-left: 4px solid var(--bp-hivis); }
.bp-reader-name { font-weight: 700; }
.bp-reader-revoked .bp-reader-name { color: var(--bp-steel); text-decoration: line-through; }
.bp-reader-created { max-width: 36rem; padding: 1rem; border: 2px solid var(--bp-hivis); border-radius: var(--bp-radius); }
.bp-reader-created p { margin: 0 0 0.75rem; }
.bp-reader-key input { font-family: ui-monospace, Consolas, monospace; }
.bp-billing-choices { display: flex; flex-wrap: wrap; gap: 1rem; }
.bp-billing-choice { flex: 1 1 14rem; min-width: 0; padding: 1rem; border: 2px solid var(--bp-steel); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-billing-choice h3 { margin: 0 0 0.25rem; }
.bp-billing-price { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.bp-billing-plan .bp-billing-price { font-size: 1rem; margin: 0; }
.bp-billing-switch { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(95, 107, 115, 0.4); }
/* phase-17 O (D18, D17): the free trial's 7 more days, below the plans as the switch to yearly is; an offer that ended. */
.bp-billing-more-days { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(95, 107, 115, 0.4); }
.bp-billing-more-days h3 { margin: 0 0 0.25rem; }
.bp-billing-more-days p { margin: 0 0 0.75rem; }
.bp-billing-mot-ended { margin: 1rem 0 0; font-weight: 600; }
/* phase-17 P: the paper accident book's pages, under the record form. */
.bp-accident-paper { margin: 1.5rem 0 0; }
.bp-billing-preview { margin: 0.5rem 0 0; font-weight: 600; }
.bp-billing-closed { max-width: 36rem; padding: 1.5rem; border: 2px solid var(--bp-steel); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-local-billing { max-width: 40rem; overflow-wrap: anywhere; }
.bp-local-billing-note { padding: 0.5rem 0.75rem; background: var(--bp-hivis); color: var(--bp-on-hivis); font-weight: 600; border-radius: var(--bp-radius); }
.bp-local-lines { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.bp-local-lines th, .bp-local-lines td { text-align: left; padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid rgba(95, 107, 115, 0.4); vertical-align: top; }
.bp-local-lines th:not(:first-child), .bp-local-lines td:not(:first-child) { text-align: right; white-space: nowrap; }
.bp-local-lines th:last-child, .bp-local-lines td:last-child { padding-right: 0; }
.bp-local-total { font-size: 1.125rem; }
.bp-local-actions { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.5rem; }
.bp-local-actions form, .bp-local-billing .bp-scan-actions form { margin: 0; }
.bp-local-actions .bp-button, .bp-local-billing .bp-scan-actions .bp-button { width: 100%; }

/* Phase 12 Part C: sticker packs (billing.md §12), the price list (phase-12 D32) and platform admins' billing (§14). */
.bp-stickers-packs { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.bp-stickers-pack { flex: 1 1 16rem; min-width: 0; padding: 1rem; border: 2px solid var(--bp-steel); border-radius: var(--bp-radius); }
.bp-stickers-pack h2 { margin: 0 0 0.5rem; }
.bp-field select {
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;           /* ≥ 16 px stops iOS zooming on focus */
  color: var(--bp-ink);
  background: var(--bp-white);
  border: 2px solid var(--bp-steel);
  border-radius: var(--bp-radius);
}
.bp-local-billing .bp-scan-actions .bp-field { margin-bottom: 0.75rem; }
.bp-stickers-orders, .bp-admin-stickers, .bp-admin-billing-overrides, .bp-admin-billing-orders, .bp-admin-billing-events { list-style: none; padding: 0; margin: 0 0 1rem; }
.bp-stickers-orders li, .bp-admin-stickers li, .bp-admin-billing-overrides li, .bp-admin-billing-orders li, .bp-admin-billing-events li {
    display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(95, 107, 115, 0.4); overflow-wrap: anywhere;
}
.bp-admin-billing-overrides li { flex-direction: column; }
.bp-admin-billing-override-active { border-left: 4px solid var(--bp-hivis); padding-left: 0.5rem !important; }
.bp-admin-billing-revoke { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.bp-admin-billing-states { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; margin: 0.5rem 0 0; }
.bp-admin-billing-facts dd, .bp-admin-sticker dd { overflow-wrap: anywhere; }
.bp-pricing-plan { margin: 1.5rem 0; padding: 1rem; border: 2px solid var(--bp-steel); border-radius: var(--bp-radius); background: var(--bp-white); max-width: 40rem; }
.bp-pricing-plan h2 { margin-top: 0; }
.bp-pricing-price { font-size: 1.125rem; font-weight: 700; }
.bp-pricing-stickers { max-width: 40rem; }

/* Phase 13 Part C: a form a reading filled in, each value marked with where it came from, and the page beside it with
   each value's box. One column on a phone, the page beside the form on a wide screen. */
.bp-filled { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .bp-filled-with-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.bp-filled-intro { margin: 0 0 0.75rem; }
.bp-filled-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--bp-steel); overflow-wrap: anywhere; }
.bp-filled-check { flex-basis: 100%; color: var(--bp-stamp-red); font-weight: 600; }
.bp-reading-view { min-width: 0; }
.bp-reading-pages { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.5rem; }
.bp-reading-page { position: relative; max-width: 100%; border: 1px solid rgba(95, 107, 115, 0.4); background: var(--bp-white); }
.bp-reading-page img { display: block; width: 100%; height: auto; }
.bp-reading-box { position: absolute; border: 2px solid var(--bp-hivis); background: rgba(242, 194, 0, 0.15); pointer-events: none; }
.bp-reading-box-selected { border-color: var(--bp-stamp-red); background: rgba(200, 16, 46, 0.12); box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.35); }
.bp-reading-state { color: var(--bp-steel); }
.bp-report-says { max-width: 48rem; margin: 0 0 1rem; }
.bp-report-says dd { overflow-wrap: anywhere; }
.bp-reading-types { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.75rem; max-width: 48rem; }
.bp-reading-type div { overflow-wrap: anywhere; }
/* phase-17 R (D23): sent files to read, garage by garage; late ones edged red, those due today hi-vis, with the words. */
.bp-sent-files { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 48rem; }
.bp-sent-files-garage { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; padding: 0.4rem 0.6rem; border-left: 4px solid var(--bp-line); overflow-wrap: anywhere; }
.bp-sent-files-due { border-left-color: var(--bp-hivis); }
.bp-sent-files-late { border-left-color: var(--bp-stamp-red); }
.bp-training-consent { max-width: 48rem; margin: 1.5rem 0; }

/* phase-15 Part A: the menu in groups, the item page in two columns, and the precision pass. */
.bp-nav-group .mud-nav-group > .mud-nav-link, .bp-nav-group > .mud-nav-link { font-weight: 700; }
.bp-nav-group .mud-navmenu { padding-left: 0.25rem; }
.bp-count[data-count="overdue"] { border-left-color: var(--bp-stamp-red); }
.bp-dashboard-waiting { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-report-waiting { display: inline-block; margin-left: 0.5rem; font-weight: 700; color: var(--bp-stamp-red); }
.bp-one-site { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; }
.bp-row-menu { margin-left: auto; }
.bp-next-due span { display: block; }
.bp-next-due-source { font-size: 0.875rem; }
.bp-module-off { max-width: 40rem; margin: 2rem 0; }
.bp-pack-empty { color: var(--bp-on-hivis); background: var(--bp-hivis); padding: 0.25rem 0.5rem; border-radius: var(--bp-radius); margin: 0.25rem 0; }
.bp-show-voided { margin-top: 0.25rem; }
.bp-item-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.bp-item-side { order: -1; }
.bp-item-next-due { display: flex; flex-direction: column; gap: 0.125rem; margin: 0 0 1rem; }
.bp-item-next-due-label { font-size: 0.875rem; color: var(--bp-steel); }
.bp-item-next-due strong { font-size: 1.25rem; }
.bp-item-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.bp-item-actions .bp-item-audit { margin-top: 0.5rem; font-size: 0.875rem; }
.bp-item-actions .mud-button-root { min-width: 0; justify-content: flex-start; padding-left: 0; padding-right: 0; }
.bp-add-detail { font-style: normal; }
@media (min-width: 1280px) {
  .bp-item-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; }
  .bp-item-side { order: 1; padding-left: 1.5rem; border-left: 1px solid var(--bp-line); }
}

/* ---- phase-15 Part B: the Today rail (D8, D9), My day (D10), pre-use checks (D11) ---- */
.bp-app-frame { min-width: 0; }
.bp-rail, .bp-rail-backdrop, .bp-rail-toggle { display: none; }
.bp-rail { background: var(--bp-paper); padding: 1rem 1.25rem; }
@media (min-width: 1280px) and (max-width: 1599.98px) {
  .bp-rail-toggle { display: inline-flex; }
  .bp-rail-drawer-open .bp-rail {
    display: block; position: fixed; top: 64px; right: 0; bottom: 0; width: min(26rem, 100vw);
    overflow-y: auto; z-index: 1300; box-shadow: -2px 0 12px rgba(0, 0, 0, 0.18);
  }
  .bp-rail-drawer-open .bp-rail-backdrop { display: block; position: fixed; inset: 64px 0 0 0; background: rgba(0, 0, 0, 0.2); z-index: 1299; }
}
@media (min-width: 1600px) {
  .bp-rail-toggle:not(.bp-rail-toggle-shown) { display: inline-flex; }
  .bp-app-frame.bp-has-rail { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .bp-has-rail .bp-rail {
    display: block; position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto;
    border-left: 1px solid var(--bp-line);
  }
}
@media (min-width: 1280px) { .bp-today-inline { display: none; } }
.bp-today-inline { margin-bottom: 1.5rem; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 1rem; background: var(--bp-white); }

.bp-today-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bp-today-head h2, .bp-today-head h1 { margin: 0; }
.bp-today-updated { font-size: 0.8rem; }
.bp-today-close { margin-left: auto; }
.bp-today-heading { margin: 1rem 0 0.25rem; font-weight: 600; }
.bp-today-site-name { margin-top: 1rem; font-weight: 700; }
.bp-today-location { margin: 0.5rem 0 0.25rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bp-steel); }
.bp-today-list { list-style: none; padding: 0; margin: 0; }
.bp-today-list li { padding: 0.25rem 0; border-bottom: 1px solid var(--bp-line); }
.bp-today-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.bp-today-card {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.5rem; align-items: center;
  padding: 0.5rem 0.75rem; border: 1px solid var(--bp-line); border-left-width: 4px; border-radius: var(--bp-radius); background: var(--bp-white);
}
.bp-today-card > * { min-width: 0; }
/* phase-16 D5: the edge is the item's status. A check not done yet is said in words, never in red on its own. */
.bp-today-card { border-left-color: var(--bp-steel); }
.bp-today-card[data-status="stop"] { border-left-color: var(--bp-stamp-red); }
.bp-today-card[data-status="soon"] { border-left-color: var(--bp-hivis); }
.bp-today-card-notyet { border-left-style: dashed; }
.bp-today-card-name { font-weight: 600; }
.bp-today-check, .bp-today-defects, .bp-today-next, .bp-today-do-check { grid-column: 1 / -1; font-size: 0.875rem; }
.bp-today-card-notdone .bp-today-check { font-weight: 600; }
.bp-my-day-do-not-use, .bp-my-day-check-do-not-use { color: var(--bp-stamp-red); font-weight: 600; }
.bp-my-day-check-do-not-use { display: block; }
.bp-my-day-overridden { border-left: 4px solid var(--bp-hivis); padding-left: 0.5rem; }
.bp-today-defects { font-weight: 600; }
.bp-badge { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border: 1px solid var(--bp-ink); border-radius: 999px; font-size: 0.75rem; }
.bp-today-mot { margin: 0.75rem 0; padding: 0.5rem 0.75rem; border: 2px solid var(--bp-ink); border-radius: var(--bp-radius); background: var(--bp-white); }
.bp-today-mot-no { border-color: var(--bp-stamp-red); }
/* phase-17 D: a yes with tests it can't do today ("Yes, but not petrol vehicles"). */
.bp-today-mot-partly { border-color: var(--bp-hivis); }
.bp-today-mot-unsure { border-style: dashed; }
.bp-today-reasons { margin: 0.25rem 0 0; padding-left: 1.25rem; font-size: 0.875rem; overflow-wrap: anywhere; }
/* phase-17 M (round 6): the way to put each reason right, after it. */
.bp-today-fix { font-weight: 600; white-space: nowrap; }
.bp-caught-none { margin: 0 0 1rem; }
/* phase-16 D9: each tester's QC line in the MOT box, its edge its status. */
.bp-today-qc-heading { margin: 0.5rem 0 0.25rem; font-weight: 600; font-size: 0.875rem; }
.bp-today-qc { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.bp-today-qc li { padding-left: 0.5rem; border-left: 4px solid var(--bp-line); margin-bottom: 0.25rem; }
.bp-today-qc li[data-status="stop"] { border-left-color: var(--bp-stamp-red); }
.bp-today-qc li[data-status="soon"] { border-left-color: var(--bp-hivis); }
.bp-my-day-qc li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
/* round 6 (D13): what was agreed with a Technician, as the agreed actions page shows it: an overdue one's line in red. */
.bp-my-day-action { display: grid; gap: 0.1rem; }
.bp-my-day-action-text { font-weight: 600; overflow-wrap: anywhere; }
.bp-my-day-action-line { font-size: 0.875rem; overflow-wrap: anywhere; }
.bp-my-day-action-overdue .bp-my-day-action-line { color: var(--bp-stamp-red); font-weight: 600; }
.bp-my-day-actions-done { margin: 0.25rem 0 0; font-size: 0.875rem; }
.bp-qc-sign-actions { margin: 0; padding-left: 1.25rem; }
/* round 6: what stops a card's item, under its check: red when it's not to be used, plain when it's used with caution. */
.bp-today-why { grid-column: 1 / -1; font-size: 0.875rem; font-weight: 600; color: var(--bp-stamp-red); overflow-wrap: anywhere; }
.bp-today-why-caution { color: inherit; }
/* phase-16 D9: the parts of the test in the QC dialog; a row wraps under its name on a phone. */
.bp-qc-areas { border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 0.5rem 0.75rem; margin: 0.75rem 0; }
.bp-qc-areas legend { font-weight: 600; padding: 0 0.25rem; }
.bp-qc-area { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; border-top: 1px solid var(--bp-line); }
.bp-qc-area:first-of-type { border-top: 0; }
.bp-qc-area-name { min-width: 11rem; }
/* phase-16 D11: the MOT module's points on the price list. */
.bp-pricing-points { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.bp-pricing-keep { font-weight: 600; }
/* phase-16 D20: the demo form. The honeypot is off the screen, out of the tab order, and hidden from screen readers. */
.bp-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bp-demo-mot, .bp-demo-optional { border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 0.5rem 0.75rem 0.75rem; }
.bp-demo-mot legend, .bp-demo-optional legend { font-weight: 600; padding: 0 0.25rem; }
.bp-demo-mot label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; margin-right: 1.5rem; }
.bp-demo-optional label { display: block; margin-top: 0.5rem; }
.bp-admin-leads { margin: 0; padding: 0; list-style: none; }
.bp-admin-lead-row { padding: 0.5rem 0; border-bottom: 1px solid var(--bp-line); display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
/* phase-16 D10: the offer code box and the admin's offers and codes. */
.bp-billing-offer { margin-top: 1rem; }
.bp-billing-mot-free { font-weight: 600; }
.bp-admin-mot-offers, .bp-admin-offer-codes, .bp-admin-offer-redemptions { margin: 0 0 1rem; padding: 0; list-style: none; }
.bp-admin-mot-offer, .bp-admin-offer-code-row, .bp-admin-offer-redemptions li { padding: 0.5rem 0; border-bottom: 1px solid var(--bp-line); display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.bp-admin-mot-offer-active { border-left: 4px solid var(--bp-hivis); padding-left: 0.5rem; }
/* Unsigned isn't a fault: no red, only weight. */
.bp-mot-unsigned, .bp-qc-unsigned { font-weight: 600; }
.bp-mot-unsigned { display: block; font-size: 0.875rem; }

.bp-my-day-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0; }
.bp-my-day-buttons .bp-button { min-height: 64px; font-size: 1.1rem; justify-content: center; text-align: center; width: 100%; }
.bp-today-full { max-width: 48rem; }
.bp-my-day-signed-in { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.bp-my-day-check { font-weight: 600; }

.bp-item-pre-use { display: grid; gap: 0.15rem; margin: 0 0 0.5rem; }

/* phase-15 D8: lists with the chosen row's detail beside them from 1,280 px. */
.bp-detail-panel { display: none; }
.bp-selectable-row { cursor: pointer; }
.bp-selected-row, .bp-selected-row > td, .bp-selected-row .mud-paper { background: rgba(242, 194, 0, 0.14); }
@media (min-width: 1280px) {
  .bp-list-detail-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem); gap: 1.5rem; align-items: start; }
  .bp-list-detail-open .bp-detail-panel {
    display: block; position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto;
    padding: 1rem; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); background: var(--bp-white);
  }
  /* phase-17 A (the tester's 3.1): a row's panel takes the room of the columns it repeats, so the rest don't wrap a
     word a line; and a duty's four buttons fit the panel's one line. */
  .bp-list-detail-open .bp-hide-beside { display: none; }
  .bp-document-date { white-space: nowrap; }
  .bp-document-keep { min-width: 12rem; }
  .bp-detail-panel .bp-actions { gap: 0.5rem; }
  .bp-detail-panel .bp-actions .mud-button-filled, .bp-detail-panel .bp-actions .mud-button-outlined { padding-left: 0.625rem; padding-right: 0.625rem; }
  /* Defects act in place on their cards, so a wide screen lays the cards out side by side. */
  .bp-defects { display: grid; grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); gap: 0 1.5rem; }
}
.bp-detail-panel-close { float: right; }
.bp-panel-preview { display: block; max-width: 100%; max-height: 20rem; margin: 0.5rem 0; border: 1px solid var(--bp-line); }
.bp-panel-obligation { border-top: 1px solid var(--bp-line); margin-top: 0.75rem; padding-top: 0.5rem; }
.bp-panel-links { margin: 0; padding-left: 1.1rem; }

/* phase-15 D8: the rota as a week grid from 960 px; the day-by-day list below that. */
.bp-rota-grid-wrap { display: none; }
@media (min-width: 960px) {
  .bp-rota-grid-wrap { display: block; overflow-x: auto; margin-bottom: 1.5rem; }
  .bp-rota { display: none; }
}
.bp-rota-grid { border-collapse: collapse; width: 100%; background: var(--bp-white); }
.bp-rota-grid th, .bp-rota-grid td { border: 1px solid var(--bp-line); padding: 0.4rem 0.5rem; vertical-align: top; text-align: left; }
.bp-rota-grid thead th { font-weight: 700; white-space: nowrap; }
.bp-rota-grid tbody th { font-weight: 600; min-width: 10rem; }
.bp-rota-grid-gap-day { border-top: 4px solid var(--bp-stamp-red) !important; }
.bp-rota-grid-cover td.bp-rota-grid-has-gap { background: rgba(200, 16, 46, 0.05); }
.bp-rota-grid-cover .bp-rota-gap, .bp-rota-grid-empty { display: block; font-size: 0.875rem; }
.bp-rota-cell { font-size: 0.875rem; }
.bp-rota-cell.bp-away { color: var(--bp-steel); }

/* phase-15 D12–D15: loading a garage's file, the quick start and the "Not known yet" list. */
.bp-import-choose { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.bp-import-choose label { font-weight: 600; }
.bp-import-file { max-width: 100%; }
.bp-import-summary { margin: 1rem 0 0.5rem; padding-left: 1.25rem; }
.bp-import-problems-lead, .bp-import-error { margin-top: 1rem; }
.bp-import-problems-lead { color: var(--bp-stamp-red); font-weight: 700; }
.bp-import-problems-wrap { overflow-x: auto; margin: 0.5rem 0 1rem; }
.bp-import-problems { border-collapse: collapse; width: 100%; background: var(--bp-white); }
.bp-import-problems th, .bp-import-problems td { border: 1px solid var(--bp-line); padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; }
.bp-import-problems td:nth-child(2) { white-space: nowrap; }
.bp-import-ok, .bp-import-done { font-weight: 700; margin-top: 1rem; }
.bp-import-day-one, .bp-caught-day-one { font-weight: 600; }
/* phase-17 E (D8): "Send us your files", each file's line saying how it went. */
.bp-inbox-send { margin-top: 0.75rem; }
.bp-send-files-choose { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.bp-send-files-choose label { font-weight: 600; }
.bp-send-files-input { max-width: 100%; }
.bp-send-files-note { max-width: 48rem; }
.bp-send-files-list { list-style: none; padding: 0; margin: 1rem 0; max-width: 48rem; }
.bp-send-files-line { padding: 0.5rem 0; border-bottom: 1px solid var(--bp-line); overflow-wrap: anywhere; }
.bp-send-files-name { font-weight: 600; }
.bp-send-files-sending .bp-send-files-state { font-style: italic; }
.bp-send-files-notsent .bp-send-files-state { color: var(--bp-stamp-red); font-weight: 600; }
.bp-send-files-done { font-weight: 700; margin-top: 1rem; }
.bp-quick-start-kind { margin: 0.5rem 0; }
.bp-quick-start-kit { list-style: none; padding: 0; margin: 0.5rem 0 1rem; max-width: 36rem; }
.bp-quick-start-kit li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; border-bottom: 1px solid var(--bp-line); }
.bp-quick-start-kit label { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-height: 48px; cursor: pointer; }
.bp-quick-start-tick { width: 1.25rem; height: 1.25rem; }
.bp-quick-start-count { width: 4.5rem; min-height: 40px; font: inherit; padding: 0.25rem 0.5rem; }
.bp-quick-start-site { max-width: 24rem; }
.bp-to-do { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.bp-to-do-row { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--bp-line); }
.bp-to-do-what { display: flex; flex-direction: column; }
.bp-to-do-what a { font-weight: 700; }
.bp-to-do-what .bp-secondary { font-size: 0.875rem; }
.bp-to-do-actions, .bp-to-do-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bp-to-do-entry label { font-weight: 600; }
.bp-to-do-date { min-height: 40px; font: inherit; padding: 0.25rem 0.5rem; }
.bp-to-do-error { flex-basis: 100%; margin: 0; color: var(--bp-stamp-red); }
.bp-to-do-open { display: inline-flex; align-items: center; min-height: 48px; }
@media (min-width: 960px) {
  .bp-to-do-row { flex-direction: row; justify-content: space-between; align-items: center; }
  .bp-to-do-actions, .bp-to-do-entry { justify-content: flex-end; }
}

/* phase-15 Part D: the MOT logs, a defect's outside source, what a pack doesn't hold, RIDDOR's countdown. */
.bp-mot-calibration { font-weight: 600; margin: 0 0 0.5rem; }
.bp-mot-breakdown-open { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.bp-mot-breakdown-open .bp-mot-line-status { margin: 0; color: var(--bp-stamp-red); }
.bp-mot-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.bp-mot-last-visit { margin: 0.25rem 0; }
.bp-visit-finding { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.5rem; align-items: end; }
@media (max-width: 599px) {
  .bp-visit-finding { grid-template-columns: minmax(0, 1fr); }
}
.bp-defect-source { margin: 0.25rem 0; font-weight: 600; font-size: 0.875rem; }
.bp-pack-not-held { border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 0.75rem 1rem; margin: 0.75rem 0; background: var(--bp-white); }
.bp-pack-not-held-title { font-weight: 700; margin: 0 0 0.25rem; }
.bp-pack-not-held ul { margin: 0; padding-left: 1.25rem; }
.bp-accident-countdown { white-space: nowrap; }
.bp-billing-terms { font-weight: 600; }

/* ── Dark (phase-15 D23, §16.6) ──
   <html data-theme> comes from the device's bp_theme cookie as the page renders: "light", "dark", or "system" to match
   the device, so no page flashes. The same declarations twice, for Dark and for "Match this device" on a dark device;
   ThemeTests holds the two equal, every pair's contrast, and the --mud- variables to what MudBlazor renders for
   PaletteDark. Screens only, so anything printed is light. */
@media screen {
  :root[data-theme="dark"] {
    --bp-ink:       #F2EFE8;
    --bp-stamp-red: #FF6B6B;
    --bp-hivis:     #F2C200;
    --bp-steel:     #A9B2B9;
    --bp-paper:     #161514;
    --bp-white:     #21201E;
    --bp-line:      #3A3835;
    --bp-on-red:    #161514;
    --bp-on-hivis:  #1B1B1B;
    --bp-stamp:     #F2EFE8;
    color-scheme: dark;
    /* MudBlazor's own variables for PaletteDark (§16.5), for the first paint. */
    --mud-palette-action-default: rgba(173,173,177,1);
    --mud-palette-action-default-hover: rgba(173,173,177,0.058823529411764705);
    --mud-palette-action-disabled: rgba(255,255,255,0.25882352941176473);
    --mud-palette-action-disabled-background: rgba(255,255,255,0.11764705882352941);
    --mud-palette-appbar-background: rgba(22,21,20,1);
    --mud-palette-appbar-text: rgba(242,239,232,1);
    --mud-palette-background: rgba(22,21,20,1);
    --mud-palette-background-gray: rgba(33,32,30,1);
    --mud-palette-black: rgba(39,39,47,1);
    --mud-palette-dark: rgba(39,39,47,1);
    --mud-palette-dark-darken: rgb(23,23,28);
    --mud-palette-dark-hover: rgba(39,39,47,0.058823529411764705);
    --mud-palette-dark-lighten: rgb(56,56,67);
    --mud-palette-dark-rgb: 39,39,47;
    --mud-palette-divider: rgba(58,56,53,1);
    --mud-palette-divider-light: rgba(255,255,255,0.058823529411764705);
    --mud-palette-divider-rgb: 58,56,53;
    --mud-palette-drawer-background: rgba(22,21,20,1);
    --mud-palette-drawer-icon: rgba(169,178,185,1);
    --mud-palette-drawer-text: rgba(242,239,232,1);
    --mud-palette-error: rgba(255,107,107,1);
    --mud-palette-error-darken: rgb(255,71,71);
    --mud-palette-error-hover: rgba(255,107,107,0.058823529411764705);
    --mud-palette-error-lighten: rgb(255,143,143);
    --mud-palette-error-rgb: 255,107,107;
    --mud-palette-error-text: rgba(22,21,20,1);
    --mud-palette-info: rgba(169,178,185,1);
    --mud-palette-info-darken: rgb(148,159,168);
    --mud-palette-info-hover: rgba(169,178,185,0.058823529411764705);
    --mud-palette-info-lighten: rgb(188,195,200);
    --mud-palette-info-rgb: 169,178,185;
    --mud-palette-info-text: rgba(22,21,20,1);
    --mud-palette-lines-default: rgba(58,56,53,1);
    --mud-palette-lines-inputs: rgba(255,255,255,0.2980392156862745);
    --mud-palette-primary: rgba(242,239,232,1);
    --mud-palette-primary-darken: rgb(229,223,209);
    --mud-palette-primary-hover: rgba(242,239,232,0.058823529411764705);
    --mud-palette-primary-lighten: rgb(255,255,255);
    --mud-palette-primary-rgb: 242,239,232;
    --mud-palette-primary-text: rgba(22,21,20,1);
    --mud-palette-secondary: rgba(169,178,185,1);
    --mud-palette-secondary-darken: rgb(148,159,168);
    --mud-palette-secondary-hover: rgba(169,178,185,0.058823529411764705);
    --mud-palette-secondary-lighten: rgb(188,195,200);
    --mud-palette-secondary-rgb: 169,178,185;
    --mud-palette-secondary-text: rgba(22,21,20,1);
    --mud-palette-skeleton: rgba(255,255,255,0.10980392156862745);
    --mud-palette-success: rgba(169,178,185,1);
    --mud-palette-success-darken: rgb(148,159,168);
    --mud-palette-success-hover: rgba(169,178,185,0.058823529411764705);
    --mud-palette-success-lighten: rgb(188,195,200);
    --mud-palette-success-rgb: 169,178,185;
    --mud-palette-success-text: rgba(22,21,20,1);
    --mud-palette-surface: rgba(33,32,30,1);
    --mud-palette-surface-rgb: 33,32,30;
    --mud-palette-table-lines: rgba(58,56,53,1);
    --mud-palette-table-striped: rgba(255,255,255,0.2);
    --mud-palette-text-disabled: rgba(255,255,255,0.2);
    --mud-palette-text-disabled-rgb: 255,255,255;
    --mud-palette-text-primary: rgba(242,239,232,1);
    --mud-palette-text-primary-rgb: 242,239,232;
    --mud-palette-text-secondary: rgba(169,178,185,1);
    --mud-palette-text-secondary-rgb: 169,178,185;
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bp-ink:       #F2EFE8;
    --bp-stamp-red: #FF6B6B;
    --bp-hivis:     #F2C200;
    --bp-steel:     #A9B2B9;
    --bp-paper:     #161514;
    --bp-white:     #21201E;
    --bp-line:      #3A3835;
    --bp-on-red:    #161514;
    --bp-on-hivis:  #1B1B1B;
    --bp-stamp:     #F2EFE8;
    color-scheme: dark;
    /* MudBlazor's own variables for PaletteDark (§16.5), for the first paint. */
    --mud-palette-action-default: rgba(173,173,177,1);
    --mud-palette-action-default-hover: rgba(173,173,177,0.058823529411764705);
    --mud-palette-action-disabled: rgba(255,255,255,0.25882352941176473);
    --mud-palette-action-disabled-background: rgba(255,255,255,0.11764705882352941);
    --mud-palette-appbar-background: rgba(22,21,20,1);
    --mud-palette-appbar-text: rgba(242,239,232,1);
    --mud-palette-background: rgba(22,21,20,1);
    --mud-palette-background-gray: rgba(33,32,30,1);
    --mud-palette-black: rgba(39,39,47,1);
    --mud-palette-dark: rgba(39,39,47,1);
    --mud-palette-dark-darken: rgb(23,23,28);
    --mud-palette-dark-hover: rgba(39,39,47,0.058823529411764705);
    --mud-palette-dark-lighten: rgb(56,56,67);
    --mud-palette-dark-rgb: 39,39,47;
    --mud-palette-divider: rgba(58,56,53,1);
    --mud-palette-divider-light: rgba(255,255,255,0.058823529411764705);
    --mud-palette-divider-rgb: 58,56,53;
    --mud-palette-drawer-background: rgba(22,21,20,1);
    --mud-palette-drawer-icon: rgba(169,178,185,1);
    --mud-palette-drawer-text: rgba(242,239,232,1);
    --mud-palette-error: rgba(255,107,107,1);
    --mud-palette-error-darken: rgb(255,71,71);
    --mud-palette-error-hover: rgba(255,107,107,0.058823529411764705);
    --mud-palette-error-lighten: rgb(255,143,143);
    --mud-palette-error-rgb: 255,107,107;
    --mud-palette-error-text: rgba(22,21,20,1);
    --mud-palette-info: rgba(169,178,185,1);
    --mud-palette-info-darken: rgb(148,159,168);
    --mud-palette-info-hover: rgba(169,178,185,0.058823529411764705);
    --mud-palette-info-lighten: rgb(188,195,200);
    --mud-palette-info-rgb: 169,178,185;
    --mud-palette-info-text: rgba(22,21,20,1);
    --mud-palette-lines-default: rgba(58,56,53,1);
    --mud-palette-lines-inputs: rgba(255,255,255,0.2980392156862745);
    --mud-palette-primary: rgba(242,239,232,1);
    --mud-palette-primary-darken: rgb(229,223,209);
    --mud-palette-primary-hover: rgba(242,239,232,0.058823529411764705);
    --mud-palette-primary-lighten: rgb(255,255,255);
    --mud-palette-primary-rgb: 242,239,232;
    --mud-palette-primary-text: rgba(22,21,20,1);
    --mud-palette-secondary: rgba(169,178,185,1);
    --mud-palette-secondary-darken: rgb(148,159,168);
    --mud-palette-secondary-hover: rgba(169,178,185,0.058823529411764705);
    --mud-palette-secondary-lighten: rgb(188,195,200);
    --mud-palette-secondary-rgb: 169,178,185;
    --mud-palette-secondary-text: rgba(22,21,20,1);
    --mud-palette-skeleton: rgba(255,255,255,0.10980392156862745);
    --mud-palette-success: rgba(169,178,185,1);
    --mud-palette-success-darken: rgb(148,159,168);
    --mud-palette-success-hover: rgba(169,178,185,0.058823529411764705);
    --mud-palette-success-lighten: rgb(188,195,200);
    --mud-palette-success-rgb: 169,178,185;
    --mud-palette-success-text: rgba(22,21,20,1);
    --mud-palette-surface: rgba(33,32,30,1);
    --mud-palette-surface-rgb: 33,32,30;
    --mud-palette-table-lines: rgba(58,56,53,1);
    --mud-palette-table-striped: rgba(255,255,255,0.2);
    --mud-palette-text-disabled: rgba(255,255,255,0.2);
    --mud-palette-text-disabled-rgb: 255,255,255;
    --mud-palette-text-primary: rgba(242,239,232,1);
    --mud-palette-text-primary-rgb: 242,239,232;
    --mud-palette-text-secondary: rgba(169,178,185,1);
    --mud-palette-text-secondary-rgb: 169,178,185;
  }
}

/* phase-16 G1: an overdue date on the item page, and a report waiting in the inbox. */
.bp-item-overdue strong, .bp-item-overdue .bp-item-next-due-label { color: var(--bp-stamp-red); }
.bp-item-report-waiting { border-left: 4px solid var(--bp-hivis); padding: 0.5rem 0.75rem; }
/* phase-17 S (D26): a contractor's "dangerous" in the inbox, on its entry, and on the dashboard and Today. */
.bp-badge-danger { margin: 0 0.5rem 0 0; border-color: var(--bp-stamp-red); color: var(--bp-stamp-red); font-weight: 700; }
.bp-notice-danger { border-left-color: var(--bp-stamp-red); font-weight: 600; }
.bp-inbox-danger { margin: 0 0 1rem; }
.bp-dashboard-waiting a.bp-waiting-dangerous { border-color: var(--bp-stamp-red); color: var(--bp-stamp-red); }
.bp-today-waiting li.bp-waiting-dangerous a { color: var(--bp-stamp-red); font-weight: 700; }
/* phase-16 G1: a new garage's first steps on the dashboard. */
.bp-get-started { border: 1px solid var(--bp-line); border-left: 4px solid var(--bp-hivis); border-radius: var(--bp-radius); padding: 0.75rem 1rem; margin-bottom: 1.5rem; background: var(--bp-white); }
.bp-get-started-steps { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.bp-get-started-steps li { margin: 0.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.bp-get-started-steps li.bp-step-done { color: var(--bp-steel); }
/* phase-16 G1: what's already reported on the item, in the report dialog. */
.bp-defect-already { border-left: 4px solid var(--bp-hivis); padding: 0.25rem 0.75rem; margin-bottom: 0.75rem; }
.bp-defect-already ul { margin: 0.25rem 0; padding-left: 1.25rem; }
/* phase-16 G1: a two-column summary squeezes on a phone: one column there. */
@media (max-width: 600px) {
  .bp-details { grid-template-columns: 1fr; gap: 0 0; }
  .bp-details dd { margin-bottom: 0.5rem; }
}

/* phase-16 I: what makes kit "Do not use", the rule's choices, and the red box's ways out. */
/* phase-17 C (D7): a report's findings and the agreed actions, each on its own lines with its button; the record
   form's "found put right" and the agreed actions' editor boxed like the other fieldsets. */
.bp-findings, .bp-findings-open, .bp-agreed-action-list, .bp-agreed-action-done-list { list-style: none; margin: 0.25rem 0 1rem; padding: 0; }
.bp-finding, .bp-finding-open, .bp-agreed-action-item, .bp-agreed-action-done-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bp-line);
}
.bp-finding-words, .bp-agreed-action-text { flex: 1 1 100%; font-weight: 600; }
/* round 6: a done action's words have their own line too, so the line under them never starts with a separator. */
.bp-agreed-action-done-text { flex: 1 1 100%; }
.bp-finding-raised, .bp-finding-closed { font-weight: 600; }
.bp-agreed-action-overdue .bp-agreed-action-line, .bp-mot-actions-overdue { color: var(--bp-stamp-red); font-weight: 600; }
.bp-agreed-actions, .bp-fixed-defects { margin: 0.75rem 0; padding: 0.5rem 0.75rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); }
.bp-agreed-actions legend, .bp-fixed-defects legend { font-weight: 700; padding: 0 0.25rem; }
.bp-agreed-action { display: grid; gap: 0.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bp-line); }
.bp-agreed-action-remove { justify-self: start; }
.bp-agreed-actions-of { padding-left: 1.25rem; }

/* phase-17 B: the blanks' rule is a card of its own beside it. */
.bp-stoppers, .bp-no-record { margin: 1.5rem 0; padding: 0.75rem 1rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); }
.bp-stoppers p, .bp-no-record p { margin: 0 0 0.5rem; }
.bp-stoppers .bp-section-heading, .bp-no-record .bp-section-heading { margin-top: 0; }
/* phase-17 F (D1, D2): "Your rules", each rule in a box like the schedules page's cards. */
.bp-rules-log { font-weight: 600; max-width: 48rem; }
.bp-rules-lead { max-width: 48rem; }
.bp-rule { margin: 1.5rem 0; padding: 0.75rem 1rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); max-width: 60rem; }
.bp-rule .bp-section-heading { margin-top: 0; }
.bp-rule p { margin: 0 0 0.5rem; }
.bp-rule h3 { margin: 1rem 0 0.25rem; }
.bp-rule-values { margin: 0.5rem 0; }
.bp-rule-list { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
.bp-rule-list li { margin: 0.25rem 0; }
/* phase-17 L: the MOT routine per station, the links to the rules set elsewhere, and "your rule" beside a duty. */
.bp-rule-mot-site { margin: 0 0 0.75rem; }
.bp-rule-elsewhere-link { margin-left: 0.35rem; }
.bp-your-rule { margin: 0 0 0.5rem; }
.bp-stoppers-all-rules { margin: -0.75rem 0 1.5rem; }
.bp-signup-log, .bp-quick-start-log { max-width: 40rem; }
.bp-footer-log { margin: 0 0 0.25rem; }
.bp-overdue-rule-option { align-items: flex-start; margin-bottom: 0.5rem; }
.bp-overdue-rule-name { display: block; font-weight: 600; }
.bp-overdue-rule-detail { display: block; }
.bp-setting-stops-use { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid rgba(95, 107, 115, 0.3); border-radius: var(--bp-radius); }
.bp-setting-stops-use legend { font-weight: 700; padding: 0 0.25rem; }
.bp-when-overdue { margin: 0 0 0.5rem; }
.bp-do-not-use-actions { margin-top: 0.5rem; }
/* phase-16 I: on the sticker, why not to use it, in words, and any caution, before anything else. */
.bp-scan-flags { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 6px solid var(--bp-stamp-red); background: var(--bp-white); }
.bp-scan-flags-caution { border-left-color: var(--bp-hivis); }
.bp-scan-flags-heading { margin: 0 0 0.25rem; font-weight: 700; }
.bp-scan-reasons { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.bp-scan-caution { margin: 0; font-style: italic; }
.bp-today-overdue-since { color: var(--bp-stamp-red); font-weight: 600; }
.bp-today-out-of-use li { margin-bottom: 0.25rem; }
/* round 5: in a long dialog (the rota's "Edit shift" at 1440×900) the Save button stays in view, on the dialog's own surface.
   phase-17 S (the overnight tester's 3.1): not on a phone, where it sat over the last field ("Found on" in "Report a
   problem") and a tap meant for the field sent the form; there it comes after the fields, a short scroll down. */
@media (min-width: 600px) {
  .mud-dialog .bp-form > .bp-button[type="submit"] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 0 0 0.75rem var(--mud-palette-surface);
  }
}