/* ============================================================
 * Morgan Hill Jiu Jitsu — Web Components
 *
 * Web-only component CSS that consumes generated brand tokens.
 * ============================================================ */

/* ============================================================
 * Dark-mode hygiene
 * Generic, theme-driven fixes every web consumer wants. Driven by
 * data-theme (never prefers-color-scheme — the consuming app owns
 * that decision and sets the attribute).
 * ============================================================ */

/* Tells the browser which mode to render its own UI in: scrollbars,
 * focus rings, native form controls, and the Canvas/CanvasText
 * system colors. */
:root            { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

/* macOS WebKit (Safari, Arc, etc.) renders the default
 * <dialog>::backdrop with a translucent light frosted-glass overlay.
 * Over a dark body that paints as a near-white wash — looks exactly
 * like the page background flipped to white when the modal opens.
 * Override with an explicit dim and disable any UA backdrop-filter so
 * the result is the same on every browser. */
dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* BRAND.md §4: the multi-color seal can't go on dark. When the
 * page is dark and a view still renders the seal loader, give the
 * seal artwork a white disc so its internal colors read cleanly.
 * Prefer .mhjj-loader--knockout for new dark surfaces. */
:root[data-theme='dark'] .mhjj-seal-loader__seal {
  background: var(--mhjj-white);
  border-radius: 50%;
}

/* The default .mhjj-loader uses var(--mhjj-black) for the logo.
 * On a dark page this override makes the default auto-adapt. */
:root[data-theme='dark'] .mhjj-loader {
  --mhjj-loader-color: var(--mhjj-white);
}

/* ============================================================
 * MHJJ Seal Loader — Rim-trace
 * ============================================================ */

.mhjj-seal-loader {
  --mhjj-seal-loader-size: 140px;
  --mhjj-seal-loader-arc: var(--mhjj-carolina, #4B9CD3);

  width: var(--mhjj-seal-loader-size);
  height: var(--mhjj-seal-loader-size);
  position: relative;
  display: inline-block;
}

.mhjj-seal-loader__seal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mhjj-seal-loader__seal svg,
.mhjj-seal-loader__seal img {
  width: 100%;
  height: 100%;
}

.mhjj-seal-loader__arc {
  position: absolute;
  inset: 0;
  animation: mhjj-seal-loader-spin 1.6s linear infinite;
  pointer-events: none;
}

.mhjj-seal-loader__arc circle {
  fill: none;
  stroke: var(--mhjj-seal-loader-arc);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 60 248;
}

.mhjj-seal-loader--sm { --mhjj-seal-loader-size: 64px; }
.mhjj-seal-loader--md { --mhjj-seal-loader-size: 120px; }
.mhjj-seal-loader--lg { --mhjj-seal-loader-size: 200px; }

@keyframes mhjj-seal-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mhjj-seal-loader__arc {
    animation: none;
  }

  .mhjj-seal-loader__arc circle {
    stroke-dasharray: none;
    opacity: 0.4;
  }
}

/* ============================================================
 * MHJJ Loader — Pulse + Carolina Arc
 * ============================================================ */

.mhjj-loader {
  --mhjj-loader-size: 96px;
  --mhjj-loader-color: var(--mhjj-black, #0A0A0A);
  --mhjj-loader-arc: var(--mhjj-carolina, #4B9CD3);

  width: var(--mhjj-loader-size);
  height: var(--mhjj-loader-size);
  position: relative;
  display: inline-block;
}

.mhjj-loader__ring {
  position: absolute;
  inset: 0;
  animation: mhjj-loader-spin 1.4s linear infinite;
}

.mhjj-loader__ring circle {
  fill: none;
  stroke: var(--mhjj-loader-arc);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 70 207;
}

.mhjj-loader__logo {
  position: absolute;
  inset: 18%;
  color: var(--mhjj-loader-color);
  animation: mhjj-loader-pulse 1.6s ease-in-out infinite;
}

.mhjj-loader__logo svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.mhjj-loader--knockout {
  --mhjj-loader-color: var(--mhjj-white, #FFFFFF);
}

.mhjj-loader--sm { --mhjj-loader-size: 48px; }
.mhjj-loader--md { --mhjj-loader-size: 96px; }
.mhjj-loader--lg { --mhjj-loader-size: 144px; }

@keyframes mhjj-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes mhjj-loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .mhjj-loader__ring,
  .mhjj-loader__logo {
    animation: none;
  }

  .mhjj-loader__ring circle {
    stroke-dasharray: none;
    opacity: 0.4;
  }
}