/* =============================================================================================
   SalX.UI — reset
   Minimal, opinionated only where the design system needs a guarantee. Everything reads tokens
   with fallbacks so the sheet is safe even if tokens.css failed to load.

   Loaded app-wide from index.html since the Phase 7 cutover, where it replaced MudBlazor's reset.

   PARITY RULES. ~200 app stylesheets were written against MudBlazor's reset, so the element-level
   behaviour they depend on is reproduced here exactly rather than "improved":
     • every element starts with margin 0, padding 0, border-width 0 and border-style solid — so a
       rule that sets only `border-width: 2px` (the schedule's .uds-apt does) still draws a border;
     • links inherit their colour and carry no underline — every styled anchor sets its own colour,
       and a global hover underline would add one to the auth links, logos and booking pills;
     • list markers are NOT removed — the printer setup steps and the booking privacy policy are
       real numbered / bulleted lists. Every Sx list component clears its own markers.
   ============================================================================================= */

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

* {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* No scroll-behavior: smooth here — scheduleInterop.js drives programmatic scrolling and
     expects instant scrollTo; a global smooth setting would change that at cutover. */
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sx-font-sans, 'Fira Sans', system-ui, sans-serif);
  font-size: var(--sx-text-body-size, 1rem);
  line-height: var(--sx-text-body-line, 1.55);
  font-weight: var(--sx-text-body-weight, 400);
  color: var(--sx-text-1, #151a24);
  background-color: var(--sx-bg, #f3f5f9);
  background-image: var(--sx-bg-image, none);
  /* No background-attachment: fixed — with backdrop-filter surfaces on the page it forces a
     full-document repaint on every scroll (and stalls screenshot capture). The gradient is
     large-scale enough that scrolling with the page reads fine. */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre {
  margin: 0;
}

strong, b {
  font-weight: 700;
}

label {
  display: inline-block;
}

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  border-top-width: 1px;
  border-color: var(--sx-divider, rgba(16, 24, 40, 0.07));
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection {
  background: var(--sx-selection-bg, rgba(31, 111, 198, 0.18));
}

/* Focus visible — the soft double ring, never suppressed. Components refine the radius. */
:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6);
  border-radius: var(--sx-radius-xs, 6px);
}

:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}