/* ---------------------------------------------------------------------------
   Base styles for things Bootstrap does not own: the page's root sizing, the
   skip link, and the focus ring.

   **The palette is no longer here.** ADR-0028 moved every token to
   `design-tokens.css` and the Bootstrap remapping to `bootstrap-bridge.css`,
   so that a designer has one file to edit and it contains nothing else. This
   file may *use* a `var(--tp-*)` token; it must not declare one, and it must
   not contain a raw colour. `PaletteContrastTests` fails on a hex in any
   stylesheet under `wwwroot/css` other than the token file.

   Load order matters and is set in `_Layout.cshtml`: bootstrap →
   design-tokens → bootstrap-bridge → components → this file → the scoped
   bundle.
   --------------------------------------------------------------------------- */

/* --- Focus (WCAG 2.4.7 / 2.4.11 / 1.4.11) ----------------------------------
   The rule this replaces drew a white ring first and a blue one outside it:
   on a white page the white half is invisible, and the blue was 3.38:1 — over
   the 3:1 floor against the page, but not against the blue button it sat on.
   A single dark ring with an offset reads against the page in both cases.
   The offset is what makes that true; taking it to zero breaks it. --- */
.btn:focus-visible,
.form-control:focus,
.form-check-input:focus,
.form-select:focus,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--tp-focus-width) solid var(--tp-focus);
  outline-offset: var(--tp-focus-offset);
  box-shadow: none;
}

/* --- Skip link (WCAG 2.4.1) ------------------------------------------------
   Off-screen until focused rather than display:none, which would take it out
   of the tab order and defeat the point. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: var(--tp-space-2) var(--tp-space-3);
  background: var(--tp-surface);
  color: var(--tp-link);
  font-weight: var(--tp-weight-semibold);
}

.skip-link:focus {
  left: 0;
  outline: var(--tp-focus-width) solid var(--tp-focus);
  outline-offset: var(--tp-focus-offset);
}

/* --- Validation summaries --------------------------------------------------
   `asp-validation-summary` renders its container on EVERY request, adding
   `validation-summary-valid` when there is nothing to report and
   `validation-summary-errors` when there is. Nothing hid the valid state, so
   the `alert alert-danger` on those containers painted an empty red band
   across `/Admin` and `/Centre/Staff` on every normal page load — an
   error-coloured box on a page where nothing is wrong.

   **Only the two `asp-validation-summary="All"` surfaces were affected.**
   `="ModelOnly"` — the staff sign-in and invitation-accept forms — emits
   nothing at all when the model state is clean, so it never painted a box.
   Measured, not assumed: an idle `/Centre/Staff` serves one
   `validation-summary-valid` container and an idle `/Staff/SignIn` serves
   none. The rule is written for the class rather than for those two pages, so
   a view added later cannot forget it whichever mode it picks.

   **Safe to hide precisely because nothing toggles this client-side.** Hiding a
   live region and then revealing it with content is the one case where
   announcement gets unreliable — but no view in this application renders
   `_ValidationScriptsPartial`, so there is no client-side validation anywhere
   and these containers are only ever filled by a server round trip. If jQuery
   unobtrusive validation is ever wired up, revisit this rule *and* the
   focus handling in the views at the same time. --- */
.validation-summary-valid {
  display: none;
}

/* --- Base ------------------------------------------------------------------
   The root font-size is the browser's own 16px at every width. It used to drop
   to 14px below 768px, which predated the token file; with the prototype's
   type scale (DDR-0010), where secondary text is 0.75rem, that step put it at
   10.5px on a phone. A root size of our own would also override a reader's
   browser setting, which is the thing 1.4.4 asks us not to fight. */
html {
  position: relative;
  min-height: 100%;
}

/* Exactly the footer's height — see --tp-footer-height. The footer is absolutely
   positioned, so this margin is what stops it landing on top of the content. */
body {
  margin-bottom: var(--tp-footer-height);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--tp-ink-muted);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}