/* ==========================================================================
   CompareIt — base layer
   Reset, type defaults, focus, motion preferences. Loaded after tokens.css.
   Component internals live in .razor.css files, not here.
   ========================================================================== */

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

html, body { margin: 0; padding: 0; }

/* The bootstrap script always stamps a resolved data-theme; the bare html rule is the
   no-JS fallback only. */
html { color-scheme: dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  background: var(--bg-canvas);
  color: var(--text-strong);
  min-height: 100dvh;
  font-family: var(--ff-ui);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Past the shell cap the body shows beside the app; drop it to the void tone so
   the centred shell reads as the content rather than as a seam. */
@media (min-width: 1600px) {
  body { background: var(--bg-void); }
}

ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Shimmer used by every loading placeholder. Kept global so the skeletons in
   different components stay in phase with each other. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,0) 100%);
  animation: shimmer 1400ms var(--ease) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

[data-theme="light"] .skeleton { background: rgba(16,18,24,.07); }
[data-theme="light"] .skeleton::after {
  background: linear-gradient(90deg,
    rgba(16,18,24,0) 0%,
    rgba(16,18,24,.06) 50%,
    rgba(16,18,24,0) 100%);
}

/* --- Blazor plumbing ------------------------------------------------------ */
#blazor-error-ui {
  position: fixed; inset: auto 0 0 0; z-index: 1000;
  display: none;
  padding: var(--s-3) var(--gutter);
  background: var(--unsafe);
  color: var(--text-on-bright);
  font-size: var(--fs-label);
  box-shadow: var(--e-2);
}

/* --unsafe darkens in light mode, so the text on it has to flip the other way:
   ink on #FF5C7A is 6.3:1, but ink on #D42E52 is only 3.8:1 — white is 4.9:1. */
[data-theme="light"] #blazor-error-ui { color: #fff; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }
#blazor-error-ui a { text-decoration: underline; }

.loading-shell {
  display: grid; place-items: center;
  min-height: 100dvh;
  gap: var(--s-4);
}
.loading-shell__rule {
  width: 160px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--spectrum);
  animation: pulse 1200ms var(--ease) infinite alternate;
}
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }
.loading-shell__text {
  font-family: var(--ff-data);
  font-size: var(--fs-data);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}