/* verification-web — inline stylesheet (TS-4). The build inlines this into a single
 * <style> block in index.html and computes its sha256 for the CSP style-src hash
 * (build/build.mjs). Tokens are the design-system-mapping.md §3 set of record.
 *
 * A11Y: AA-safe status palette (§2 remediation — success #1E7E34, error #B02A37,
 * warning #8A5A00, info navy #1B4E8C; raw CIVR #28a745/#dc3545 FAIL AA). Meaning is
 * icon + text, never color alone. Every focusable control keeps a 3px visible focus
 * ring (never outline:none). LanguageToggle label text is --color-brand-navy per the
 * ratified B-1 fix (accent #0072CE is non-text decoration only, WCAG 1.4.3/1.4.11).
 */

:root {
  /* Color */
  --color-page-bg: #f4f4f4;
  --color-card-bg: #ffffff;
  --color-text: #333333;
  --color-text-muted: #595959;
  --color-brand-navy: #1b4e8c;
  --color-brand-accent: #0072ce; /* large/decorative only — never normal text */
  --color-brand-accent-hover: #005a9c;
  --color-success: #1e7e34;
  --color-info: #1b4e8c;
  --color-warning: #8a5a00;
  --color-error: #b02a37;
  --color-focus-ring: #0072ce;

  /* Typography */
  --font-family: Arial, Helvetica, sans-serif;
  --font-h1: 1.5rem;
  --font-body: 1rem;
  --font-note: 0.9rem;
  --line-height: 1.5;

  /* Spacing / shape — mobile-first defaults; desktop overrides below */
  --card-max-width: 420px;
  --card-padding: 24px;
  --card-radius: 8px;
  --card-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --logo-width: 120px;
  --gutter-mobile: 16px;
  --hero-icon: 40px;
  --font-h2-hero: 1.25rem;
  --touch-target-min: 44px;
  --button-padding: 10px 18px;
  --button-radius: 6px;
}

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

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 24px var(--gutter-mobile);
  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-page-bg);
  min-height: 100vh;
}

.mlaas-main {
  display: block;
}

.mlaas-card {
  background: var(--color-card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.mlaas-logo {
  width: var(--logo-width);
  height: auto;
  margin: 0 auto 16px;
  display: block;
  color: var(--color-brand-navy);
}

.mlaas-h1 {
  color: var(--color-brand-navy);
  font-size: var(--font-h1);
  margin: 0 0 20px;
  font-weight: 700;
}

/* ---- StatusHero -------------------------------------------------------------- */
.mlaas-hero {
  --hero-color: var(--color-text-muted); /* loading default */
  margin: 8px 0 4px;
}
.mlaas-hero[data-state="verified"] {
  --hero-color: var(--color-success);
}
.mlaas-hero[data-state="already_used"] {
  --hero-color: var(--color-info);
}
.mlaas-hero[data-state="expired"] {
  --hero-color: var(--color-warning);
}
.mlaas-hero[data-state="invalid"],
.mlaas-hero[data-state="locked"] {
  --hero-color: var(--color-error);
}

.mlaas-hero-icon {
  display: inline-flex;
  color: var(--hero-color);
  margin-bottom: 12px;
}
.mlaas-icon {
  width: var(--hero-icon);
  height: var(--hero-icon);
}

.mlaas-hero-headline {
  color: var(--hero-color);
  font-size: var(--font-h2-hero);
  margin: 0 0 12px;
  font-weight: 700;
}

.mlaas-hero-note {
  color: var(--color-text-muted);
  font-size: var(--font-note);
  margin: 0;
}

/* Loading spinner — CSS-only (no JS timer, PR-8). */
.mlaas-spinner {
  animation: mlaas-spin 0.9s linear infinite;
  transform-origin: center;
}
@keyframes mlaas-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mlaas-spinner {
    animation: none;
  }
}

/* ---- GesturePrompt ----------------------------------------------------------- */
.mlaas-gesture {
  margin: 8px 0 4px;
}
.mlaas-gesture-lead {
  color: var(--color-text);
  font-size: var(--font-body);
  margin: 0 0 8px;
}
.mlaas-gesture-reassurance {
  color: var(--color-text-muted);
  font-size: var(--font-note);
  margin: 0 0 20px;
}
.mlaas-gesture-button {
  display: inline-block;
  min-height: var(--touch-target-min);
  padding: var(--button-padding);
  font-family: inherit;
  font-size: var(--font-body);
  font-weight: 700;
  color: #ffffff;
  background: var(--color-brand-navy);
  border: 0;
  border-radius: var(--button-radius);
  cursor: pointer;
}
.mlaas-gesture-button:hover {
  background: var(--color-brand-accent-hover);
}
.mlaas-gesture-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* ---- LanguageToggle ---------------------------------------------------------- */
.mlaas-lang {
  margin: 24px 0 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.mlaas-lang-btn {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--font-note);
  font-weight: 700;
  color: var(--color-brand-navy); /* B-1 fix: navy text, NOT accent */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
}
/* Active option marked by a non-text accent underline (decoration only, 1.4.11). */
.mlaas-lang-btn[aria-current="true"] {
  border-bottom: 2px solid var(--color-brand-accent);
}

/* ---- SupportFooter ----------------------------------------------------------- */
.mlaas-support {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-note);
}

/* ---- Focus visibility (WCAG 2.4.7) — never remove the outline ---------------- */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---- Desktop tier (≥768px) --------------------------------------------------- */
@media (min-width: 768px) {
  body {
    padding-top: 50px;
  }
  :root {
    --card-padding: 32px;
    --logo-width: 150px;
    --hero-icon: 48px;
    --font-h2-hero: 1.5rem;
  }
  .mlaas-card {
    max-width: var(--card-max-width);
  }
}