/* Reset, body, typography, focus ring, Blazor loading/error UI. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.5;
}

h1, h2, h3 { margin: 0 0 var(--space-3); line-height: 1.2; font-family: var(--font-display); }
h1 { font-size: var(--fs-xl); font-weight: 800; }
h2 { font-size: var(--fs-l); font-weight: 600; }
h3 { font-size: var(--fs-m); font-weight: 600; }
p { margin: 0 0 var(--space-3); }

a { color: var(--c-primary); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: 2px; }
/* Blazor moves focus to the page h1 after navigation (FocusOnNavigate, tabindex=-1) for screen readers; that is not a control, no ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.b-muted { color: var(--c-muted); }
.b-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Blazor */
#blazor-error-ui {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--c-out-soft); color: var(--c-text);
  box-shadow: var(--shadow-2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-3); top: var(--space-2); }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle {
  fill: none; stroke: var(--c-border); stroke-width: .6rem;
  transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--c-primary);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
  transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text {
  position: absolute; inset: calc(20vh + 3.25rem) 0 auto .2rem;
  text-align: center; font-weight: 700;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

.validation-message { color: var(--c-out); font-size: var(--fs-s); }