/**
 * itrain.ing — Monochrome UI; hi-vis #ccff00 on marks only (no surface tints).
 */

/* No accent wash in hero or page backgrounds */
body.landingPage,
html[data-theme="light"] body.landingPage,
html[data-theme="dark"] body.landingPage {
  --lp-accent-wash: transparent;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.landingPage {
    --lp-accent-wash: transparent;
  }
}

body.landingPage .lp-hero::before {
  background-image: none;
}

.landingPage .lp-display,
html.fonts-loaded .landingPage .lp-display {
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.08;
}

.landingPage .lp-hero__title {
  font-size: clamp(2.25rem, 9vw, 3.5rem);
}

body.landingPage .lp-hero__title em {
  display: block;
  margin-top: 0.4em;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.42em;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--pl-plate-dim);
}

.site-header__brand,
html.fonts-loaded .site-header__brand,
.site-menu__brand,
html.fonts-loaded .site-menu__brand,
.site-footer__logo,
html.fonts-loaded .site-footer__logo,
.builderPage .brand__wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.site-header__nav a,
html.fonts-loaded .site-header__nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.site-header__dot,
.brand__dot,
.site-menu__dot {
  color: var(--pl-plate);
}

.site-menu__link,
html.fonts-loaded .site-menu__link {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

.site-footer__heading,
html.fonts-loaded .site-footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.site-footer__list a {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

.site-footer__list a:hover {
  color: var(--text-strong);
  text-decoration-color: var(--border2);
}

.site-footer__copy a:hover {
  color: var(--text-strong);
}

.landingPage .lp-btn {
  font-family: var(--sans);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
}

body.landingPage .lp-btn--primary,
body.landingPage .site-header__btn--primary,
body.landingPage .site-menu__btn--primary,
body.builderPage .site-header__btn--primary,
body.builderPage .site-menu__btn--primary {
  border: 1px solid var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: 0 4px 18px rgba(13, 13, 15, 0.1);
  background-image: none;
}

body.landingPage .lp-btn--primary:hover,
body.landingPage .site-header__btn--primary:hover,
body.landingPage .site-menu__btn--primary:hover,
body.builderPage .site-header__btn--primary:hover,
body.builderPage .site-menu__btn--primary:hover {
  filter: none;
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
}

/* See How It Works — hi-vis in light and dark; Launch App stays monochrome primary */
body.landingPage .lp-hero__actions a.lp-btn.lp-btn--ghost {
  border: 1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
}

body.landingPage .lp-hero__actions a.lp-btn.lp-btn--ghost:hover {
  filter: none;
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-fg);
}

body.landingPage .lp-badge {
  border: 1px solid color-mix(in srgb, var(--pl-plate) 32%, var(--border));
  background: var(--panel2);
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.68rem;
}

body.landingPage .lp-hero__meta li::before,
body.landingPage .lp-panel li::before {
  background: var(--border2);
}

body.landingPage .lp-panel h3 {
  color: var(--text-strong);
}

body.landingPage .lp-panel a,
body.landingPage .lp-callout a {
  color: var(--text-strong);
  text-decoration-color: var(--border2);
}

body.landingPage .lp-callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  background: var(--panel2);
}

body.landingPage .lp-faq summary::after {
  color: var(--muted);
}

body.landingPage .lp-cta__box {
  background: var(--panel);
  border: 1px solid var(--border);
}

body.landingPage .lp-footer__links a {
  color: var(--text);
}

body.landingPage .lp-footer__links a:hover,
body.landingPage .lp-footer__credit a:hover {
  color: var(--text-strong);
}

body.builderPage body {
  background: var(--bg);
  background-image: none;
}

body.builderPage .btn--primary {
  border-color: var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-fg);
}

body.builderPage .btn--primary:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
}

body.builderPage .iconBtn--primary {
  border-color: var(--border2);
  background: var(--panel2);
  color: var(--text-strong);
}

body.builderPage .iconBtn--primary:hover {
  background: var(--panel);
  border-color: var(--border2);
}

body.builderPage .dd__menu,
body.builderPage details.day,
body.builderPage .dialog {
  box-shadow: none;
}

body.landingPage .faq-cta__btn--primary,
body.landingPage .site-404__btn--primary {
  border-color: var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-fg);
}

body.landingPage.programsPage .prog-card__corner--tl .prog-card__label {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  border: 1px solid var(--border2);
}

body.landingPage.blogPage .blog-article__eyebrow a,
body.landingPage.blogPage .blog-prose a {
  color: var(--text-strong);
}

body.landingPage.blogPage .blog-prose a:hover {
  color: var(--muted);
}

body.landingPage.blogPage .blog-prose blockquote {
  border-left-color: var(--border2);
}

body.landingPage.blogPage .blog-cta {
  border: 1px solid var(--border);
  background: var(--panel2);
}

body.landingPage.faqPage .faq-page__nav a:hover {
  border-color: var(--border2);
  color: var(--text-strong);
}

body.landingPage.faqPage .lp-faq-full .lp-faq p a,
body.landingPage.faqPage .lp-faq-full .lp-faq li a {
  color: var(--text-strong);
}

body.landingPage.faqPage .faq-page__cta {
  border: 1px solid var(--border);
  background: var(--panel2);
}

body.landingPage.notfoundPage .notfound__code {
  color: var(--muted);
}

body.landingPage.notfoundPage .notfound__links a:hover {
  border-color: var(--border2);
  color: var(--text-strong);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.landingPage .lp-hero__title em {
    color: var(--pl-plate);
  }
}

html[data-theme="dark"] body.landingPage .lp-hero__title em {
  color: var(--pl-plate);
}

/* App builder — monochrome chrome; hi-vis on mark + focus only */
body.builderPage input[type="checkbox"] {
  accent-color: var(--pl-plate);
}

body.builderPage .brand__wordmark .brand__dot {
  color: var(--pl-plate);
}

body.landingPage .legal-doc a {
  color: var(--text-strong);
}
body.builderPage .badge--alpha {
  border-color: var(--border2);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

body.builderPage .dd__opt[aria-selected="true"] {
  border-color: var(--border2);
  background: var(--panel2);
}

body.builderPage details.day {
  border-left-color: var(--border2);
}

body.builderPage .status--warn {
  color: var(--muted);
}

body.builderPage .unitToggle__btn.is-active {
  border-color: var(--border2);
  background: var(--panel2);
}

body.builderPage .unitToggle__btn:focus-visible,
body.builderPage .btn:focus-visible,
body.builderPage .input:focus-visible,
body.builderPage .select:focus-visible {
  outline-color: var(--focus-ring);
}