/* Reading size, focus, tap targets, motion, and high contrast.
   Colors for the normal light and dark themes live in design.css.
   This file only adds the controls and the high-contrast override. */

html {
  font-size: var(--lm-font, 18px);
}

.lm-help {
  color: var(--muted);
  margin-top: 0.35rem;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--focus, #ffbf00) !important;
  outline-offset: 3px !important;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 80;
  transform: translateY(-200%);
  background: #ffd000;
  color: #111827 !important;
  font-weight: 700;
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  min-height: 48px;
}

.skip-link:focus {
  transform: none;
}

button,
select,
input,
textarea {
  font-size: max(16px, 1rem);
  touch-action: manipulation;
}

button,
select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="date"] {
  min-height: 48px;
  max-width: 100%;
}

nav a,
footer a,
a[href^="tel:"],
a[href^="mailto:"],
.lm-a11y-bar a,
.lm-a11y-bar button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.lm-a11y-bar {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: min(18.5rem, calc(100vw - 1.25rem));
  padding: 0.7rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: var(--shadow);
}

.lm-a11y-bar[hidden] { display: none !important; }

.lm-a11y-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.lm-a11y-bar button,
.lm-a11y-bar a {
  min-width: 48px;
  padding: 0.55rem 0.9rem;
  border-radius: 0.75rem;
  border: 2px solid var(--gold);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.lm-a11y-bar button[aria-pressed="true"] {
  background: var(--gold);
  color: var(--gold-ink);
}

.lm-a11y-bar button:disabled {
  opacity: 0.55;
}

.lm-a11y-note {
  margin: 0;
  text-align: left;
  color: var(--muted);
  font-size: 0.85rem;
}

#heatmap-grid > div {
  min-height: 3.25rem;
}

html.lm-motion-off,
html.lm-motion-off *,
html.lm-motion-off *::before,
html.lm-motion-off *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.lm-motion-on),
  html:not(.lm-motion-on) *,
  html:not(.lm-motion-on) *::before,
  html:not(.lm-motion-on) *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* High contrast wins over both the light and dark themes. */
html.lm-contrast {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #000000;
  --text: #ffffff;
  --muted: #ffffff;
  --line: #ffffff;
  --link: #ffe566;
  --gold: #ffd000;
  --gold-ink: #000000;
  --gold-text: #ffe566;
  --success: #ffffff;
  --warn: #ffe566;
  --primary: #ffffff;
  --primary-ink: #000000;
  --pb-text: #ffffff;
  --mm-text: #ffffff;
  --heading: #ffffff;
  --focus: #ffffff;
  --heat-high: #ffffff;
  --heat-high-ink: #000000;
  --heat-mid: #ffd000;
  --heat-mid-ink: #000000;
  --heat-low: #000000;
  --heat-low-ink: #ffffff;
  --shadow: none;
}

html.lm-contrast body.page::after { display: none; }

html.lm-contrast body,
html.lm-contrast .site-header,
html.lm-contrast .site-footer,
html.lm-contrast .hero,
html.lm-contrast .card,
html.lm-contrast .panel,
html.lm-contrast .inset,
html.lm-contrast .line-card,
html.lm-contrast .compliance,
html.lm-contrast .guarantee-bar,
html.lm-contrast .lm-a11y-bar,
html.lm-contrast .nav-results-panel {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.lm-contrast p,
html.lm-contrast li,
html.lm-contrast h1,
html.lm-contrast h2,
html.lm-contrast h3,
html.lm-contrast td,
html.lm-contrast th,
html.lm-contrast label,
html.lm-contrast caption,
html.lm-contrast .muted,
html.lm-contrast .lm-help,
html.lm-contrast .lm-a11y-note,
html.lm-contrast .brand-tag {
  color: #ffffff !important;
}

html.lm-contrast a {
  color: #ffe566 !important;
  text-decoration: underline;
}

html.lm-contrast .btn-primary,
html.lm-contrast .btn-gold,
html.lm-contrast .tip-chip,
html.lm-contrast .chip.is-on,
html.lm-contrast .seg-btn.is-pb,
html.lm-contrast .seg-btn.is-mm,
html.lm-contrast .pill,
html.lm-contrast .lm-a11y-bar button[aria-pressed="true"] {
  background: #ffd000 !important;
  background-image: none !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

html.lm-contrast .btn-quiet,
html.lm-contrast .seg,
html.lm-contrast .seg-btn,
html.lm-contrast .chip,
html.lm-contrast .field,
html.lm-contrast .display-toggle,
html.lm-contrast .nav-menu-btn,
html.lm-contrast .nav-results > summary,
html.lm-contrast .nav-results-panel,
html.lm-contrast .lm-a11y-bar button,
html.lm-contrast .lm-a11y-bar a {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

html.lm-contrast .ball,
html.lm-contrast .history-ball {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

html.lm-contrast .ball-pb {
  background: #e10600 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

html.lm-contrast .ball-mm {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

html.lm-contrast .heat-high,
html.lm-contrast .swatch.heat-high {
  background: #ffffff !important;
  color: #000000 !important;
}

html.lm-contrast .heat-mid,
html.lm-contrast .swatch.heat-mid {
  background: #ffd000 !important;
  color: #000000 !important;
}

html.lm-contrast .heat-low,
html.lm-contrast .swatch.heat-low {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html.lm-contrast .skip-link,
html.lm-contrast .skip-link:focus {
  background: #ffd000 !important;
  color: #000000 !important;
}