/* ===========================================================================
   MailGuardHQ site styles. Consumes tokens.css only - no literal colours here
   except rgba() overlays derived from the ink token.
   =========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--mg-bg);
  color: var(--mg-text);
  font-family: var(--mg-font-sans);
  font-size: var(--mg-fs-base);
  line-height: var(--mg-lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0 0 var(--mg-space-3);
  line-height: var(--mg-lh-tight);
  font-weight: var(--mg-fw-bold);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p, ul, ol { margin: 0 0 var(--mg-space-4); }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--mg-space-2); }

a { color: var(--mg-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--mg-accent-hover); }

code, kbd, pre, samp { font-family: var(--mg-font-mono); font-size: 0.92em; }

:focus-visible {
  outline: 3px solid var(--mg-focus);
  outline-offset: 2px;
  border-radius: var(--mg-radius-sm);
}

/* ---- layout primitives -------------------------------------------------- */
.mg-shell {
  width: 100%;
  max-width: var(--mg-shell-max);
  margin-inline: auto;
  padding-inline: var(--mg-space-5);
}

.mg-main { display: block; }

.mg-section { padding-block: var(--mg-space-8); }
.mg-section--tight { padding-block: var(--mg-space-7); }
.mg-section--alt { background: var(--mg-bg-alt); border-block: 1px solid var(--mg-border); }

.mg-section__head { max-width: 62ch; margin-bottom: var(--mg-space-6); }
.mg-section__eyebrow {
  display: inline-block;
  margin-bottom: var(--mg-space-2);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-accent);
}
.mg-section__title { font-size: var(--mg-fs-2xl); }
.mg-section__lede { margin: 0; color: var(--mg-text-muted); font-size: var(--mg-fs-md); }

.mg-prose { max-width: var(--mg-prose-max); }
.mg-prose h2 { margin-top: var(--mg-space-7); font-size: var(--mg-fs-xl); }
.mg-prose h3 { margin-top: var(--mg-space-5); font-size: var(--mg-fs-lg); }
.mg-prose h2:first-child, .mg-prose h3:first-child { margin-top: 0; }

.mg-skip {
  position: absolute;
  left: var(--mg-space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--mg-space-3) var(--mg-space-4);
  background: var(--mg-accent);
  color: var(--mg-accent-contrast);
  border-radius: var(--mg-radius-md);
  font-weight: var(--mg-fw-medium);
  text-decoration: none;
  transition: top var(--mg-motion-fast) var(--mg-ease);
}
.mg-skip:focus { top: var(--mg-space-3); color: var(--mg-accent-contrast); }

/* ---- header ------------------------------------------------------------- */
.mg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--mg-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mg-border);
}
.mg-header__inner {
  display: flex;
  align-items: center;
  gap: var(--mg-space-5);
  min-height: var(--mg-header-h);
}

.mg-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-2);
  color: var(--mg-text);
  text-decoration: none;
  font-size: var(--mg-fs-md);
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.mg-brand__mark { width: 28px; height: 28px; color: var(--mg-accent); }
.mg-brand__word { font-weight: var(--mg-fw-medium); white-space: nowrap; }
.mg-brand__word strong { font-weight: var(--mg-fw-bold); }
.mg-brand__hq {
  margin-left: 0.15em;
  padding: 0.1em 0.32em;
  border-radius: var(--mg-radius-sm);
  background: var(--mg-accent-soft);
  color: var(--mg-accent);
  font-size: 0.72em;
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.06em;
  vertical-align: 0.15em;
}

.mg-nav { flex: 1 1 auto; }
.mg-nav__list {
  display: flex;
  gap: var(--mg-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.mg-nav__list li { margin: 0; }
.mg-nav__link {
  display: inline-block;
  padding: var(--mg-space-2) var(--mg-space-3);
  border-radius: var(--mg-radius-md);
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-sm);
  font-weight: var(--mg-fw-medium);
  text-decoration: none;
}
.mg-nav__link:hover { background: var(--mg-surface-sunken); color: var(--mg-text); }
.mg-nav__link.is-active { color: var(--mg-text); background: var(--mg-surface-sunken); }

.mg-header__actions { display: flex; align-items: center; gap: var(--mg-space-2); flex: 0 0 auto; }

.mg-theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-md);
  background: var(--mg-surface);
  color: var(--mg-text-muted);
  cursor: pointer;
}
.mg-theme-toggle:hover { color: var(--mg-text); border-color: var(--mg-border-strong); }
.mg-theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; }
/* Show the icon for the theme you would switch TO: light now -> moon, dark now -> sun.
   Mirrors the three theme states in tokens.css (base, OS-dark guarded, explicit dark). */
.mg-theme-toggle__sun { display: none; }
.mg-theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mg-theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .mg-theme-toggle__moon { display: none; }
}
:root[data-theme="dark"] .mg-theme-toggle__sun { display: block; }
:root[data-theme="dark"] .mg-theme-toggle__moon { display: none; }
.mg-no-js .mg-theme-toggle { display: none; }

@media (max-width: 860px) {
  /* Needs the extra .mg-header specificity: .mg-btn sets display:inline-flex and
     is declared later in this file, so a bare .mg-header__cta rule loses to it
     and the CTA stays visible - which pushed the mobile header to three rows. */
  .mg-header .mg-header__cta { display: none; }
  .mg-header__inner { flex-wrap: wrap; gap: var(--mg-space-3); padding-block: var(--mg-space-3); }
  .mg-nav { order: 3; flex-basis: 100%; }
  .mg-nav__list { justify-content: flex-start; }
  .mg-header__actions { margin-left: auto; }
}

/* ---- buttons ------------------------------------------------------------ */
.mg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-2);
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--mg-radius-md);
  background: var(--mg-accent);
  color: var(--mg-accent-contrast);
  font: inherit;
  font-size: var(--mg-fs-sm);
  font-weight: var(--mg-fw-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mg-motion-fast) var(--mg-ease),
              border-color var(--mg-motion-fast) var(--mg-ease),
              transform var(--mg-motion-fast) var(--mg-ease);
}
.mg-btn:hover { background: var(--mg-accent-hover); color: var(--mg-accent-contrast); }
.mg-btn:active { transform: translateY(1px); }
.mg-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.mg-btn--lg { padding: 0.85rem 1.6rem; font-size: var(--mg-fs-base); }
.mg-btn--ghost {
  background: transparent;
  border-color: var(--mg-border-strong);
  color: var(--mg-text);
}
.mg-btn--ghost:hover { background: var(--mg-surface-sunken); color: var(--mg-text); }
.mg-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--mg-text-muted);
  padding: var(--mg-space-2) var(--mg-space-3);
}
.mg-btn--quiet:hover { background: var(--mg-surface-sunken); color: var(--mg-text); }

/* ---- cards -------------------------------------------------------------- */
.mg-card {
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  padding: var(--mg-space-5);
  box-shadow: var(--mg-shadow-sm);
}
.mg-card__title { font-size: var(--mg-fs-lg); margin-bottom: var(--mg-space-2); }
.mg-card__body { margin: 0; color: var(--mg-text-muted); }

.mg-grid { display: grid; gap: var(--mg-space-4); }
.mg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.mg-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mg-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* ---- notices ------------------------------------------------------------ */
.mg-notice {
  display: flex;
  gap: var(--mg-space-3);
  padding: var(--mg-space-4);
  border: 1px solid var(--mg-info-border);
  border-left-width: 4px;
  border-radius: var(--mg-radius-md);
  background: var(--mg-info-bg);
  color: var(--mg-text);
  font-size: var(--mg-fs-sm);
}
.mg-notice p { margin: 0 0 var(--mg-space-2); }
.mg-notice p:last-child { margin-bottom: 0; }
.mg-notice__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--mg-info); margin-top: 2px; }
.mg-notice--warn { border-color: var(--mg-warn-border); background: var(--mg-warn-bg); }
.mg-notice--warn .mg-notice__icon { color: var(--mg-warn); }
.mg-notice__title { font-weight: var(--mg-fw-bold); }

/* ---- hero --------------------------------------------------------------- */
.mg-hero {
  position: relative;
  padding-block: var(--mg-space-9) var(--mg-space-8);
  background:
    radial-gradient(ellipse 70% 60% at 12% -10%, var(--mg-accent-soft), transparent 65%),
    var(--mg-bg);
  overflow: hidden;
}
.mg-hero__inner { display: grid; gap: var(--mg-space-7); }
@media (min-width: 980px) {
  .mg-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: var(--mg-space-8); }
}
.mg-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-2);
  margin-bottom: var(--mg-space-4);
  padding: var(--mg-space-1) var(--mg-space-3);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-pill);
  background: var(--mg-surface);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-medium);
  color: var(--mg-text-muted);
}
.mg-hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mg-accent); }
.mg-hero__title { font-size: var(--mg-fs-4xl); margin-bottom: var(--mg-space-4); }
.mg-hero__title em { font-style: normal; color: var(--mg-accent); }
.mg-hero__lede {
  font-size: var(--mg-fs-lg);
  color: var(--mg-text-muted);
  max-width: 46ch;
  margin-bottom: var(--mg-space-5);
}
.mg-hero__points { list-style: none; margin: 0 0 var(--mg-space-5); padding: 0; }
.mg-hero__points li {
  display: flex;
  gap: var(--mg-space-3);
  align-items: flex-start;
  font-size: var(--mg-fs-sm);
  color: var(--mg-text-muted);
}
.mg-hero__tick { flex: 0 0 auto; width: 18px; height: 18px; color: var(--mg-pass); margin-top: 3px; }

/* ---- check panel -------------------------------------------------------- */
.mg-check {
  background: var(--mg-surface-raised);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  box-shadow: var(--mg-shadow-lg);
  overflow: hidden;
}
.mg-check__head { padding: var(--mg-space-5) var(--mg-space-5) var(--mg-space-4); }
.mg-check__title { font-size: var(--mg-fs-lg); margin-bottom: var(--mg-space-1); }
.mg-check__sub { margin: 0 0 var(--mg-space-4); color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }

.mg-check__form { display: flex; gap: var(--mg-space-2); flex-wrap: wrap; }
.mg-check__field { flex: 1 1 240px; min-width: 0; }
.mg-check__label {
  display: block;
  margin-bottom: var(--mg-space-1);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mg-text-muted);
}
.mg-check__input {
  width: 100%;
  padding: 0.72rem var(--mg-space-4);
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-md);
  background: var(--mg-surface);
  color: var(--mg-text);
  font: inherit;
  font-size: var(--mg-fs-base);
}
.mg-check__input::placeholder { color: var(--mg-text-faint); }
.mg-check__submit { align-self: flex-end; flex: 0 0 auto; padding-block: 0.78rem; }

.mg-check__error {
  margin: var(--mg-space-3) 0 0;
  color: var(--mg-fail);
  font-size: var(--mg-fs-sm);
  font-weight: var(--mg-fw-medium);
}
.mg-check__error:empty { display: none; }

.mg-check__samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-2);
  margin-top: var(--mg-space-4);
  font-size: var(--mg-fs-xs);
  color: var(--mg-text-muted);
}
.mg-chip {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-pill);
  background: var(--mg-surface-sunken);
  color: var(--mg-text-muted);
  font: inherit;
  font-size: var(--mg-fs-xs);
  font-family: var(--mg-font-mono);
  cursor: pointer;
}
.mg-chip:hover { border-color: var(--mg-accent); color: var(--mg-accent); }

/* progress + results */
.mg-check__body { border-top: 1px solid var(--mg-border); background: var(--mg-surface-sunken); }
.mg-check__body[hidden] { display: none; }

/* THE OPTIONAL REPORT-BY-EMAIL OFFER (MGH-82).

   Sits above the progress bar, and is styled so it reads as an aside rather
   than as a step: a ghost button, muted note text, no border of its own beyond
   the rule that separates it from the bar. The panel already promised the
   result is free, and an offer that looks like a form you must complete
   contradicts that before a single word is read.

   It ships hidden and is revealed by check.js only once the API's notice has
   arrived saying the offer is enabled here. */
.mg-capture {
  padding: var(--mg-space-4) var(--mg-space-5);
  border-bottom: 1px solid var(--mg-border);
}
.mg-capture[hidden] { display: none; }

.mg-capture__form { display: flex; gap: var(--mg-space-2); flex-wrap: wrap; }
.mg-capture__field { flex: 1 1 240px; min-width: 0; }
.mg-capture__submit { align-self: flex-end; flex: 0 0 auto; padding-block: 0.78rem; }

.mg-capture__note {
  margin: var(--mg-space-2) 0 0;
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-sm);
}
.mg-capture__note--fine { font-size: var(--mg-fs-xs); color: var(--mg-text-faint); }
.mg-capture__note:empty { display: none; }

.mg-capture__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--mg-space-2);
  margin-top: var(--mg-space-3);
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-sm);
}
.mg-capture__consent input { margin-top: 0.2rem; flex: 0 0 auto; }

.mg-capture__status {
  margin: var(--mg-space-3) 0 0;
  color: var(--mg-text);
  font-size: var(--mg-fs-sm);
  font-weight: var(--mg-fw-medium);
}
.mg-capture__status:empty { display: none; }

.mg-progress {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  padding: var(--mg-space-4) var(--mg-space-5);
  border-bottom: 1px solid var(--mg-border);
}
.mg-progress__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-border);
  overflow: hidden;
}
.mg-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--mg-accent);
  transition: width var(--mg-motion-base) var(--mg-ease);
}
.mg-progress__label {
  flex: 0 0 auto;
  font-size: var(--mg-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--mg-text-muted);
  font-weight: var(--mg-fw-medium);
}

.mg-checklist { margin: 0; padding: 0; list-style: none; }
.mg-checklist__group {
  padding: var(--mg-space-3) var(--mg-space-5) var(--mg-space-1);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-text-faint);
}

.mg-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: var(--mg-space-2) var(--mg-space-3);
  align-items: start;
  margin: 0;
  padding: var(--mg-space-3) var(--mg-space-5);
  border-top: 1px solid var(--mg-border);
}
.mg-item:first-of-type { border-top: 0; }
.mg-item[data-status="pending"] { opacity: 0.55; }
.mg-item[data-status="running"] { background: var(--mg-surface); }
.mg-item[data-status="done"] { background: var(--mg-surface); }

.mg-item__icon { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 2px; color: var(--mg-text-faint); }
.mg-item[data-verdict="pass"] .mg-item__icon { color: var(--mg-pass); }
.mg-item[data-verdict="warn"] .mg-item__icon { color: var(--mg-warn); }
.mg-item[data-verdict="fail"] .mg-item__icon { color: var(--mg-fail); }
.mg-item[data-verdict="not-applicable"] .mg-item__icon { color: var(--mg-na); }

.mg-item__name {
  margin: 0;
  font-size: var(--mg-fs-sm);
  font-weight: var(--mg-fw-bold);
  color: var(--mg-text);
}
.mg-item__finding { grid-column: 2; margin: 0; font-size: var(--mg-fs-sm); color: var(--mg-text-muted); }
.mg-item__finding:empty { display: none; }
.mg-item__action {
  grid-column: 2;
  margin: var(--mg-space-2) 0 0;
  padding: var(--mg-space-2) var(--mg-space-3);
  border-left: 3px solid var(--mg-accent);
  border-radius: 0 var(--mg-radius-sm) var(--mg-radius-sm) 0;
  background: var(--mg-accent-soft);
  font-size: var(--mg-fs-sm);
  color: var(--mg-text);
}
.mg-item__action:empty { display: none; }
.mg-item__action strong { font-weight: var(--mg-fw-bold); }
.mg-item__evidence {
  grid-column: 2;
  margin: var(--mg-space-2) 0 0;
  font-family: var(--mg-font-mono);
  font-size: var(--mg-fs-xs);
  color: var(--mg-text-faint);
  word-break: break-all;
}
.mg-item__evidence:empty { display: none; }

/* The contextual route into public help, appended to a row once it has a
   verdict (check.js). Column 2 so it lines up under the finding rather than
   under the icon, and quiet enough not to compete with "What to do" - which is
   the action, where this is the explanation behind it. */
.mg-item__help {
  grid-column: 2;
  margin: var(--mg-space-2) 0 0;
  font-size: var(--mg-fs-xs);
}
.mg-item__help a { color: var(--mg-accent); text-decoration: none; }
.mg-item__help a:hover, .mg-item__help a:focus-visible { text-decoration: underline; }

/* verdict pill - "not applicable" is neutral + dashed, never red */
.mg-verdict {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-pill);
  background: var(--mg-surface-sunken);
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mg-verdict[data-verdict="pass"] { background: var(--mg-pass-bg); border-color: var(--mg-pass-border); color: var(--mg-pass); }
.mg-verdict[data-verdict="warn"] { background: var(--mg-warn-bg); border-color: var(--mg-warn-border); color: var(--mg-warn); }
.mg-verdict[data-verdict="fail"] { background: var(--mg-fail-bg); border-color: var(--mg-fail-border); color: var(--mg-fail); }
.mg-verdict[data-verdict="not-applicable"] {
  background: var(--mg-na-bg);
  border-color: var(--mg-na-border);
  border-style: dashed;
  color: var(--mg-na);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--mg-fw-medium);
}
.mg-verdict[data-verdict="running"],
.mg-verdict[data-verdict="pending"] { text-transform: none; letter-spacing: 0; font-weight: var(--mg-fw-medium); }

.mg-spin { animation: mg-spin 900ms linear infinite; transform-origin: 50% 50%; }
@keyframes mg-spin { to { transform: rotate(360deg); } }

/* summary */
.mg-summary {
  display: grid;
  gap: var(--mg-space-4);
  padding: var(--mg-space-5);
  border-top: 1px solid var(--mg-border);
  background: var(--mg-surface);
}
.mg-summary[hidden] { display: none; }
@media (min-width: 640px) { .mg-summary { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.mg-summary__score {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 6px solid var(--mg-border);
  font-size: var(--mg-fs-2xl);
  font-weight: var(--mg-fw-bold);
  font-variant-numeric: tabular-nums;
}
.mg-summary__score[data-band="good"] { border-color: var(--mg-pass); color: var(--mg-pass); }
.mg-summary__score[data-band="fair"] { border-color: var(--mg-warn); color: var(--mg-warn); }
.mg-summary__score[data-band="poor"] { border-color: var(--mg-fail); color: var(--mg-fail); }
.mg-summary__headline { margin: 0 0 var(--mg-space-2); font-size: var(--mg-fs-lg); }
.mg-summary__text { margin: 0 0 var(--mg-space-3); color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }
.mg-summary__tally { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
.mg-summary__tally li { margin: 0; }
/* The way into public help from a whole result, beside the per-row links. */
.mg-summary__help { margin: var(--mg-space-3) 0 0; font-size: var(--mg-fs-sm); }
.mg-summary__help a { color: var(--mg-accent); text-decoration: none; }
.mg-summary__help a:hover, .mg-summary__help a:focus-visible { text-decoration: underline; }

/* ---- MGH-249: what we cannot see ----------------------------------------
   The twelve signals no check can reach. NEUTRAL BY CONSTRUCTION: text and
   border tokens only, never --mg-pass / --mg-warn / --mg-fail or any accent -
   there is no result here to colour. Shared by the free check page and the
   panel's Domains view; tests/unmeasured-signals.test.mjs reads these rules. */
.mg-unseen { margin: var(--mg-space-5) 0 0; padding: var(--mg-space-4); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md, 10px); background: var(--mg-surface); }
.mg-unseen__title { margin: 0 0 var(--mg-space-2); font-size: var(--mg-fs-lg); }
.mg-unseen__intro { margin: 0 0 var(--mg-space-3); color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }
.mg-unseen__list { margin: 0; padding-left: var(--mg-space-5); }
.mg-unseen__item { margin: 0 0 var(--mg-space-2); }
.mg-unseen__name { display: block; font-weight: var(--mg-fw-medium, 550); color: var(--mg-text); }
.mg-unseen__desc { display: block; color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }

/* ---- pricing ------------------------------------------------------------ */
.mg-plans { display: grid; gap: var(--mg-space-5); align-items: start; }
/* Two up on a tablet, three up once there is room for three plan cards without
   squeezing the feature lists into one word per line. */
@media (min-width: 820px) { .mg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mg-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mg-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--mg-space-6);
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  box-shadow: var(--mg-shadow-sm);
}
.mg-plan--featured { border-color: var(--mg-accent); box-shadow: var(--mg-shadow-md); }
.mg-plan__flag {
  align-self: flex-start;
  margin-bottom: var(--mg-space-3);
  padding: 0.15rem 0.6rem;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-accent-soft);
  color: var(--mg-accent);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mg-plan__name { font-size: var(--mg-fs-xl); margin-bottom: var(--mg-space-1); }
.mg-plan__for { margin: 0 0 var(--mg-space-4); color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }
.mg-plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--mg-space-2);
  margin-bottom: var(--mg-space-1);
}
.mg-plan__amount { font-size: var(--mg-fs-3xl); font-weight: var(--mg-fw-bold); letter-spacing: -0.03em; }
.mg-plan__unit { color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }
.mg-plan__pricenote {
  margin: 0 0 var(--mg-space-5);
  font-size: var(--mg-fs-xs);
  color: var(--mg-warn);
  font-weight: var(--mg-fw-medium);
}
.mg-plan__list { list-style: none; margin: 0 0 var(--mg-space-5); padding: 0; flex: 1 1 auto; }
.mg-plan__list li {
  display: flex;
  gap: var(--mg-space-3);
  align-items: flex-start;
  font-size: var(--mg-fs-sm);
  color: var(--mg-text-muted);
}
.mg-plan__list svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; color: var(--mg-pass); }
.mg-plan__list li[data-excluded] svg { color: var(--mg-na); }
/* The roadmap state of the capability a bullet names, stamped at build time from
   src/data/roadmap.mjs. Deliberately not decorative: it is the difference between
   a feature you can use and one we intend to build, so it reads at a glance. */
.mg-plan__state {
  display: inline-block;
  margin-left: var(--mg-space-1);
  padding: 0.05em 0.5em;
  border: 1px solid var(--mg-border);
  border-radius: 999px;
  font-size: var(--mg-fs-2xs, 0.7rem);
  font-weight: var(--mg-fw-semibold, 600);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--mg-text-muted);
  background: var(--mg-surface-2, transparent);
  vertical-align: baseline;
}
.mg-plan__state[data-state="planned"] { color: var(--mg-na); }
.mg-plan__state[data-state="building"] { color: var(--mg-warn); }

.mg-placeholder {
  display: inline-block;
  padding: 0 0.35em;
  border: 1px dashed var(--mg-warn-border);
  border-radius: var(--mg-radius-sm);
  background: var(--mg-warn-bg);
  color: var(--mg-warn);
  font-family: var(--mg-font-mono);
  font-weight: var(--mg-fw-bold);
}

.mg-calc {
  padding: var(--mg-space-6);
  border: 1px dashed var(--mg-border-strong);
  border-radius: var(--mg-radius-lg);
  background: var(--mg-surface-sunken);
  text-align: center;
}
.mg-calc__title { font-size: var(--mg-fs-lg); }
.mg-calc__body { max-width: 58ch; margin-inline: auto; color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }
.mg-calc__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--mg-space-3);
  margin: var(--mg-space-5) auto 0;
}
.mg-calc__field { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; }
.mg-calc__label {
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  color: var(--mg-text-muted);
}
.mg-calc__input {
  min-width: 12rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-sm);
  background: var(--mg-surface);
  color: var(--mg-text);
  font: inherit;
}
.mg-calc__status {
  max-width: 58ch;
  margin: var(--mg-space-4) auto 0;
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-sm);
}
.mg-calc__result { margin-top: var(--mg-space-5); }
.mg-calc__headline { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.5rem; }
.mg-calc__amount { font-size: var(--mg-fs-2xl); font-weight: var(--mg-fw-bold); }
.mg-calc__unit { color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }

/* ---- tables ------------------------------------------------------------- */
.mg-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-md);
  background: var(--mg-surface);
}
.mg-table { width: 100%; border-collapse: collapse; font-size: var(--mg-fs-sm); min-width: 520px; }
.mg-table th, .mg-table td {
  padding: var(--mg-space-3) var(--mg-space-4);
  text-align: left;
  border-bottom: 1px solid var(--mg-border);
  vertical-align: top;
}
.mg-table thead th {
  background: var(--mg-surface-sunken);
  font-size: var(--mg-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mg-text-muted);
}
.mg-table tbody tr:last-child td { border-bottom: 0; }

/* ---- roadmap ------------------------------------------------------------ */
.mg-timeline { list-style: none; margin: 0; padding: 0; }
.mg-timeline > li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--mg-space-6) var(--mg-space-6);
  border-left: 2px solid var(--mg-border);
}
.mg-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.mg-timeline > li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--mg-bg);
  background: var(--mg-border-strong);
}
.mg-timeline > li[data-state="shipping"]::before { background: var(--mg-accent); }
.mg-timeline > li[data-state="live"]::before     { background: var(--mg-accent); }
.mg-timeline > li[data-state="building"]::before { background: var(--mg-warn); }
.mg-timeline > li[data-state="planned"]::before  { background: var(--mg-border-strong); }
/* Hollow rather than filled: an idea is visibly a different kind of thing from
   a commitment, without needing a colour nobody can name. */
.mg-timeline > li[data-state="exploring"]::before {
  background: var(--mg-bg);
  box-shadow: inset 0 0 0 2px var(--mg-border-strong);
}
.mg-stage {
  display: inline-block;
  margin-bottom: var(--mg-space-2);
  padding: 0.1rem 0.55rem;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-surface-sunken);
  border: 1px solid var(--mg-border);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mg-text-muted);
}
.mg-timeline > li[data-state="shipping"] .mg-stage { color: var(--mg-accent); border-color: var(--mg-accent); }
.mg-timeline > li[data-state="live"] .mg-stage     { color: var(--mg-accent); border-color: var(--mg-accent); }
.mg-timeline > li[data-state="building"] .mg-stage { color: var(--mg-warn); border-color: var(--mg-warn-border); }

/* Roadmap items: the state pill above, the claim below, and - for a live item
   only - the link that proves it. */
.mg-roadmap__title { font-size: var(--mg-fs-lg); margin: 0 0 var(--mg-space-2); }
.mg-roadmap__body { margin: 0; color: var(--mg-text); }
.mg-roadmap__detail {
  margin: var(--mg-space-3) 0 0;
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-sm);
}
.mg-roadmap__proof { margin: var(--mg-space-3) 0 0; font-size: var(--mg-fs-sm); font-weight: var(--mg-fw-bold); }
.mg-roadmap__count {
  font-size: var(--mg-fs-sm);
  font-weight: var(--mg-fw-normal);
  color: var(--mg-text-faint);
}

/* The tally strip. Four counts, each a link to its own section. */
.mg-roadmap__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mg-space-3);
  margin-bottom: var(--mg-space-5);
}
@media (min-width: 720px) {
  .mg-roadmap__summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mg-roadmap__tally {
  display: block;
  padding: var(--mg-space-3);
  border: 1px solid var(--mg-border);
  border-top: 3px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-md);
  background: var(--mg-surface);
  color: inherit;
  text-decoration: none;
}
.mg-roadmap__tally:hover { border-color: var(--mg-border-strong); }
.mg-roadmap__tally[data-state="live"]     { border-top-color: var(--mg-accent); }
.mg-roadmap__tally[data-state="building"] { border-top-color: var(--mg-warn); }
.mg-roadmap__tally[data-state="planned"]  { border-top-color: var(--mg-border-strong); }
.mg-roadmap__tally[data-state="exploring"]{ border-top-color: var(--mg-border); }
.mg-roadmap__tally-n {
  display: block;
  font-size: var(--mg-fs-2xl);
  font-weight: var(--mg-fw-bold);
  line-height: 1.1;
}
.mg-roadmap__tally[data-state="live"] .mg-roadmap__tally-n { color: var(--mg-accent); }
.mg-roadmap__tally-label {
  display: block;
  font-size: var(--mg-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mg-text-muted);
}

/* ---- explainer ---------------------------------------------------------- */
.mg-explain { display: grid; gap: var(--mg-space-4); }
@media (min-width: 780px) { .mg-explain { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mg-explain__term {
  display: inline-block;
  margin-bottom: var(--mg-space-2);
  font-family: var(--mg-font-mono);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.08em;
  color: var(--mg-accent);
}

/* ---- CTA ---------------------------------------------------------------- */
.mg-cta {
  display: grid;
  gap: var(--mg-space-4);
  padding: var(--mg-space-7);
  border-radius: var(--mg-radius-lg);
  background: var(--mg-brand-ink);
  color: #f2f6fa;
  text-align: center;
  justify-items: center;
}
.mg-cta h2 { color: #ffffff; font-size: var(--mg-fs-2xl); margin: 0; }
.mg-cta p { margin: 0; max-width: 54ch; color: #c3d1de; }

/* ---- footer ------------------------------------------------------------- */
.mg-footer {
  margin-top: var(--mg-space-9);
  border-top: 1px solid var(--mg-border);
  background: var(--mg-bg-alt);
  padding-top: var(--mg-space-7);
}
.mg-footer__inner { display: grid; gap: var(--mg-space-6); padding-bottom: var(--mg-space-6); }
/* Two columns at tablet, four once there is room: the Help column (MGH-71)
   makes a third link list, and three lists plus the brand block are unreadable
   squeezed into a 720px row. */
@media (min-width: 720px) { .mg-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mg-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.mg-footer__brand { margin: 0 0 var(--mg-space-2); font-weight: var(--mg-fw-bold); font-size: var(--mg-fs-md); }
.mg-footer__note { margin: 0 0 var(--mg-space-2); color: var(--mg-text-muted); font-size: var(--mg-fs-sm); max-width: 34ch; }
.mg-footer__note--dim { color: var(--mg-text-faint); }
/* Sign in / Sign up. Below 900px the header keeps the theme toggle and Sign up only -
   Sign in stays reachable from the sign-up page, and the row has no space for four items. */
.mg-header__signin { padding: 0 var(--mg-space-2); white-space: nowrap; }
.mg-header__signup { white-space: nowrap; }
@media (max-width: 900px) {
  .mg-header__signin, .mg-header__cta { display: none; }
}

.mg-footer__link { color: var(--mg-accent); text-decoration: none; }
.mg-footer__link:hover, .mg-footer__link:focus-visible { text-decoration: underline; }
.mg-footer__heading {
  margin: 0 0 var(--mg-space-3);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-text-faint);
}
.mg-footer__list { list-style: none; margin: 0; padding: 0; }
.mg-footer__list li { margin-bottom: var(--mg-space-2); }
.mg-footer__list a { color: var(--mg-text-muted); font-size: var(--mg-fs-sm); text-decoration: none; }
.mg-footer__list a:hover { color: var(--mg-accent); text-decoration: underline; }
.mg-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-3);
  justify-content: space-between;
  padding-block: var(--mg-space-4);
  border-top: 1px solid var(--mg-border);
  font-size: var(--mg-fs-xs);
  color: var(--mg-text-faint);
}
.mg-footer__base p { margin: 0; }

/* ---- figures ------------------------------------------------------------ */
/* The intrinsic aspect ratio comes from the img's own width/height attributes,
   so the box is reserved before the bytes arrive. Only the width is overridden;
   height:auto keeps that ratio instead of squashing the image. */
.mg-figure { margin: 0 0 var(--mg-space-6); }
.mg-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mg-radius-lg);
  border: 1px solid var(--mg-border);
}
.mg-figure figcaption {
  margin-top: var(--mg-space-2);
  font-size: var(--mg-fs-xs);
  color: var(--mg-text-faint);
}

/* Explanatory diagrams. One SVG per theme, picked here so the browser fetches
   only the file the active theme selects. aspect-ratio reserves the box before
   the image arrives. */
.mg-diagram {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 430;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: var(--mg-radius-lg);
  border: 1px solid var(--mg-border);
}
.mg-diagram--alignment { background-image: url("/img/why-alignment-light.e6fef568ac.svg"); }
.mg-diagram--limits    { background-image: url("/img/why-limits-light.5b74e8c7a1.svg"); }
.mg-diagram--how       { background-image: url("/img/how-it-works-light.ffe3377aa1.svg"); aspect-ratio: 1200 / 360; }
.mg-diagram--mcp-path  { background-image: url("/img/developer-mcp-path-light.7ab95b356e.svg"); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mg-diagram--alignment { background-image: url("/img/why-alignment-dark.8875638b67.svg"); }
  :root:not([data-theme="light"]) .mg-diagram--limits    { background-image: url("/img/why-limits-dark.795d5ffe70.svg"); }
  :root:not([data-theme="light"]) .mg-diagram--how       { background-image: url("/img/how-it-works-dark.2a78832904.svg"); }
  :root:not([data-theme="light"]) .mg-diagram--mcp-path  { background-image: url("/img/developer-mcp-path-dark.9915e483b3.svg"); }
}
:root[data-theme="dark"] .mg-diagram--alignment { background-image: url("/img/why-alignment-dark.8875638b67.svg"); }
:root[data-theme="dark"] .mg-diagram--limits    { background-image: url("/img/why-limits-dark.795d5ffe70.svg"); }
:root[data-theme="dark"] .mg-diagram--how       { background-image: url("/img/how-it-works-dark.2a78832904.svg"); }
:root[data-theme="dark"] .mg-diagram--mcp-path  { background-image: url("/img/developer-mcp-path-dark.9915e483b3.svg"); }

/* Step icon beside a card heading. Sized to the cap height so it sits on the text baseline. */
.mg-step__icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  margin-right: var(--mg-space-2);
  color: var(--mg-accent);
}

/* ---- help: the control in the panel head --------------------------------- */
/* Two controls in one group: a link straight to this screen's help, and a
   native <details> disclosure for everything else. It sits in the panel head,
   NOT in the site header - the public header is marketing chrome and public help
   is reached from the footer and from a check result instead.

   Nothing here opens on hover - hover does not exist on a touch screen, and a
   menu that only opens on hover is a menu half the users cannot open. Colours
   are tokens only, so all three theme states (system, explicit light, explicit
   dark) are correct without a rule per state. */
.mg-help-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.mg-help-menu__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-1);
  padding-right: var(--mg-space-1);
}
.mg-help-menu__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.mg-help-menu__label { white-space: nowrap; }

.mg-help-menu__more { position: static; }
.mg-help-menu__toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 32px;
  border-radius: var(--mg-radius-md);
  color: var(--mg-text-muted);
  cursor: pointer;
  /* Removes the disclosure triangle without removing the element's semantics:
     it is still a summary, still focusable, still announced as expanded or
     collapsed. */
  list-style: none;
}
.mg-help-menu__toggle::-webkit-details-marker { display: none; }
.mg-help-menu__toggle:hover { background: var(--mg-surface-sunken); color: var(--mg-text); }
.mg-help-menu__chevron { width: 16px; height: 16px; transition: transform var(--mg-motion-fast) var(--mg-ease); }
.mg-help-menu__more[open] .mg-help-menu__chevron { transform: rotate(180deg); }

.mg-help-menu__panel {
  position: absolute;
  top: calc(100% + var(--mg-space-2));
  right: 0;
  z-index: 60;
  min-width: 17rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--mg-space-4);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  background: var(--mg-surface-raised);
  box-shadow: var(--mg-shadow-lg);
}
.mg-help-menu__eyebrow {
  margin: 0 0 var(--mg-space-2);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-text-faint);
}
.mg-help-menu__list {
  list-style: none;
  margin: 0 0 var(--mg-space-4);
  padding: 0;
}
.mg-help-menu__list li { margin: 0; }
.mg-help-menu__list a,
.mg-help-menu__all {
  display: block;
  padding: var(--mg-space-2);
  border-radius: var(--mg-radius-sm);
  color: var(--mg-text);
  font-size: var(--mg-fs-sm);
  text-decoration: none;
}
.mg-help-menu__list a:hover,
.mg-help-menu__all:hover { background: var(--mg-surface-sunken); color: var(--mg-accent); }
.mg-help-menu__all {
  margin-top: var(--mg-space-2);
  padding-top: var(--mg-space-3);
  border-top: 1px solid var(--mg-border);
  border-radius: 0;
  color: var(--mg-accent);
  font-weight: var(--mg-fw-medium);
}

/* On a narrow screen the control sits mid-row beside Sign out, so a panel
   anchored to the control's own right edge starts off the left of the screen -
   measured at 390px, 11px past it. Dropping .mg-help-menu out of the positioned
   flow hands the panel to .mg-panel__actions (position:relative in app.css), so
   it aligns with the right edge of the row instead of hanging off a 60px
   control, and is capped to the viewport. */
@media (max-width: 640px) {
  .mg-help-menu { position: static; }
  .mg-help-menu__panel {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 2rem);
  }
}

/* Narrower still, the word "Help" is hidden from SIGHT and not from the
   accessibility tree, so the link keeps its name for a screen reader. */
@media (max-width: 420px) {
  .mg-help-menu__label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- help: the pages ---------------------------------------------------- */
.mg-help__body > .mg-help__section + .mg-help__section { margin-top: var(--mg-space-7); }
.mg-help__body h2 { margin-top: 0; font-size: var(--mg-fs-xl); }
.mg-help__body .mg-notice { margin-bottom: var(--mg-space-4); }

.mg-help__dl { margin: 0 0 var(--mg-space-4); }
.mg-help__dl dt { margin-top: var(--mg-space-3); color: var(--mg-text); font-weight: var(--mg-fw-medium); }
.mg-help__dl dt:first-child { margin-top: 0; }
.mg-help__dl dd { margin: var(--mg-space-1) 0 0; color: var(--mg-text-muted); }
/* The verdict rows show the real pill from the check panel, so the reader
   recognises the thing rather than a description of it. */
.mg-help__dl--verdicts dt { margin-top: var(--mg-space-4); }
.mg-help__dl--verdicts dt:first-child { margin-top: 0; }
.mg-help__dl--verdicts .mg-verdict { grid-column: auto; grid-row: auto; }

.mg-help__steps { margin: 0 0 var(--mg-space-4); padding-left: 1.35rem; }
.mg-help__steps li { color: var(--mg-text-muted); }

.mg-help__code {
  margin: 0 0 var(--mg-space-4);
  padding: var(--mg-space-3) var(--mg-space-4);
  overflow-x: auto;
  border: 1px solid var(--mg-border);
  border-left: 3px solid var(--mg-accent);
  border-radius: var(--mg-radius-md);
  background: var(--mg-surface-sunken);
  color: var(--mg-text);
}

/* ---- help: index, search and results ------------------------------------ */
/* The search box is hidden until the document is known to run scripts. Search
   is the one part of the help that needs JavaScript; the full list below it
   never does, so nobody is offered a control that cannot answer. */
.mg-no-js .mg-help__search { display: none; }

.mg-help__search { max-width: 46rem; margin: 0; }
.mg-help__searchrow { display: flex; gap: var(--mg-space-2); flex-wrap: wrap; }
.mg-help__searchrow .mg-check__input { flex: 1 1 18rem; min-width: 0; }

.mg-help__results { max-width: 46rem; margin-top: var(--mg-space-5); }
.mg-help__results[hidden] { display: none; }
.mg-help__count { margin: 0 0 var(--mg-space-3); color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }

.mg-help__cards {
  display: grid;
  gap: var(--mg-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 780px) { .mg-help__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mg-help__card {
  margin: 0;
  padding: var(--mg-space-4);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-md);
  background: var(--mg-surface);
}
.mg-help__cardlink { font-weight: var(--mg-fw-bold); text-decoration: none; }
.mg-help__cardlink:hover { text-decoration: underline; }
.mg-help__cardbody { margin: var(--mg-space-2) 0 0; color: var(--mg-text-muted); font-size: var(--mg-fs-sm); }
.mg-help__kind {
  display: inline-block;
  margin-left: var(--mg-space-2);
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-pill);
  background: var(--mg-surface-sunken);
  color: var(--mg-text-faint);
  font-size: var(--mg-fs-xs);
  vertical-align: 0.1em;
}

/* ---- misc --------------------------------------------------------------- */
.mg-lede-list { list-style: none; padding: 0; }
.mg-lede-list li { display: flex; gap: var(--mg-space-3); align-items: flex-start; }
.mg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mg-meta { font-size: var(--mg-fs-xs); color: var(--mg-text-faint); }

/* ---- header: the Developer disclosure (MGH-83) -------------------------- */
/* Nothing here opens on hover - hover does not exist on a touch screen, and a
   menu that only opens on hover is a menu half the users cannot open. Colours
   are tokens only, so all three theme states (system, explicit light, explicit
   dark) are correct without a rule per state. */
.mg-navmenu { position: relative; }
.mg-navmenu__details { display: inline-block; }

.mg-navmenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-1);
  cursor: pointer;
  /* Removes the disclosure triangle without removing the element's semantics:
     it is still a summary, still focusable, still announced as expanded or
     collapsed. */
  list-style: none;
}
.mg-navmenu__toggle::-webkit-details-marker { display: none; }
.mg-navmenu__toggle:hover { background: var(--mg-surface-sunken); color: var(--mg-text); }
.mg-navmenu__chevron { width: 15px; height: 15px; transition: transform var(--mg-motion-fast) var(--mg-ease); }
.mg-navmenu__details[open] .mg-navmenu__chevron { transform: rotate(180deg); }

.mg-navmenu__panel {
  position: absolute;
  top: calc(100% + var(--mg-space-2));
  left: 0;
  z-index: 60;
  width: max-content;
  min-width: 19rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--mg-space-4);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  background: var(--mg-surface-raised);
  box-shadow: var(--mg-shadow-lg);
}
.mg-navmenu__eyebrow {
  margin: 0 0 var(--mg-space-2);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-text-faint);
}
.mg-navmenu__list { list-style: none; margin: 0; padding: 0; }
.mg-navmenu__list li { margin: 0; }
.mg-navmenu__item {
  display: block;
  padding: var(--mg-space-2) var(--mg-space-3);
  border-radius: var(--mg-radius-sm);
  color: var(--mg-text);
  text-decoration: none;
}
.mg-navmenu__item:hover { background: var(--mg-surface-sunken); }
.mg-navmenu__item[aria-current="page"] { background: var(--mg-surface-sunken); }
.mg-navmenu__label {
  display: flex;
  align-items: baseline;
  gap: var(--mg-space-2);
  font-size: var(--mg-fs-sm);
  font-weight: var(--mg-fw-medium);
}
.mg-navmenu__item:hover .mg-navmenu__label { color: var(--mg-accent); }
/* The gate, stated in the menu. A console that answers 401 must not be offered
   as though it were an ordinary page. */
.mg-navmenu__flag {
  padding: 0.05rem var(--mg-space-2);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-pill);
  color: var(--mg-text-faint);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-medium);
  white-space: nowrap;
}
.mg-navmenu__summary {
  display: block;
  margin-top: 0.15rem;
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-xs);
  line-height: 1.45;
}

/* Below the header's wrap point the nav becomes its own full-width row and the
   Developer control sits at the END of it - so a panel anchored to that control
   starts two thirds of the way across the screen and runs off the right edge.
   Measured at 390px: the panel spanned 219px to 577px and widened the layout
   viewport to 577px, which is a horizontally scrolling page.

   Dropping .mg-navmenu out of the positioned flow hands the panel to .mg-nav,
   which IS the full-width row, so it aligns with the row instead of hanging off
   a control near its right edge. Same fix, same reason, as .mg-help-menu below. */
@media (max-width: 860px) {
  .mg-nav { position: relative; }
  .mg-navmenu { position: static; }
  .mg-navmenu__panel { left: 0; min-width: 0; width: auto; max-width: 100%; }
}

/* ---- code blocks -------------------------------------------------------- */
.mg-code { margin: 0 0 var(--mg-space-4); }
.mg-code__label {
  margin: 0 0 var(--mg-space-2);
  color: var(--mg-text-muted);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-medium);
}
.mg-code__pre {
  margin: 0;
  padding: var(--mg-space-3) var(--mg-space-4);
  overflow-x: auto;
  border: 1px solid var(--mg-border);
  border-left: 3px solid var(--mg-accent);
  border-radius: var(--mg-radius-md);
  background: var(--mg-surface-sunken);
  color: var(--mg-text);
  font-family: var(--mg-font-mono);
  font-size: var(--mg-fs-sm);
  line-height: 1.6;
}

/* ---- developer pages ---------------------------------------------------- */
.mg-verb {
  display: inline-block;
  min-width: 4.2rem;
  padding: 0.1rem var(--mg-space-2);
  border-radius: var(--mg-radius-sm);
  background: var(--mg-surface-sunken);
  color: var(--mg-text-muted);
  font-family: var(--mg-font-mono);
  font-size: var(--mg-fs-xs);
  font-weight: var(--mg-fw-bold);
  text-align: center;
}
.mg-route { font-family: var(--mg-font-mono); font-size: var(--mg-fs-xs); word-break: break-all; }

/* ---- Billing-term switch (pricing) -------------------------------------------------------- */
/* Annual is the default and ships visible in the HTML; the script only moves `hidden`, so this
   control is inert-but-correct with scripts blocked rather than broken. */
.mg-term {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 auto var(--mg-space-4);
  border: 1px solid var(--mg-line);
  border-radius: 999px;
  background: var(--mg-surface-2, transparent);
}
.mg-plans + .mg-term,
.mg-shell > .mg-term { display: inline-flex; }
.mg-shell:has(> .mg-term) { text-align: center; }
.mg-shell > .mg-plans { text-align: initial; }

.mg-term__btn {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mg-ink-2, inherit);
  cursor: pointer;
}
.mg-term__btn.is-on {
  background: var(--mg-ink, #1a1a1a);
  color: var(--mg-bg, #fff);
}
.mg-term__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mg-term__save {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
/* With no script the switch cannot do anything, so do not invite a click that will not work. */
.mg-no-js .mg-term__btn:not(.is-on) { display: none; }
.mg-no-js .mg-term { border-color: transparent; }

/* ---- Platform settings (MGH-178) ----------------------------------------------------------- */
/* The description and the two effect lines sit WITH the field rather than behind a tooltip that
   has to be discovered. A value nobody can interpret is one they change wrongly or never touch. */
.mg-settings { display: grid; gap: var(--mg-space-4); }

.mg-setting {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-md, 10px);
  padding: var(--mg-space-4);
  background: var(--mg-surface, transparent);
}
.mg-setting__head { display: flex; align-items: baseline; gap: var(--mg-space-3); flex-wrap: wrap; }
.mg-setting__name {
  margin: 0;
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-size: 0.95rem;
  font-weight: var(--mg-fw-semibold, 600);
}
.mg-setting__cat {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mg-ink-3, inherit);
  border: 1px solid var(--mg-line);
  border-radius: 999px;
  padding: 2px 8px;
}
.mg-setting__desc { margin: var(--mg-space-2) 0 0; max-width: 68ch; }

/* Two columns so "Lower means" and "Higher means" read as a pair of consequences rather than as
   more prose. They are the part people actually need before touching a number. */
.mg-setting__effects {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--mg-space-3);
  margin: var(--mg-space-3) 0 0;
  padding: var(--mg-space-3);
  border-left: 2px solid var(--mg-line);
  font-size: 0.9rem;
}
.mg-setting__effects dt { font-weight: var(--mg-fw-semibold, 600); white-space: nowrap; }
.mg-setting__effects dd { margin: 0; max-width: 62ch; }

.mg-setting__edit {
  display: flex;
  align-items: center;
  gap: var(--mg-space-3);
  margin-top: var(--mg-space-4);
  flex-wrap: wrap;
}
.mg-setting__input { max-width: 22ch; }
.mg-setting__range {
  font-size: 0.82rem;
  color: var(--mg-ink-3, inherit);
  font-variant-numeric: tabular-nums;
}
.mg-setting__status { margin: var(--mg-space-2) 0 0; font-size: 0.85rem; min-height: 1.2em; }
/* Never colour alone: the word carries the meaning, the colour only reinforces it. */
.mg-setting__status[data-tone='ok'] { color: var(--mg-pass, inherit); }
.mg-setting__status[data-tone='bad'] { color: var(--mg-fail, inherit); }

/* ---- Account settings (MGH-178) ------------------------------------------------------------ */
/* The customer's half of the registry reuses the .mg-setting block above - the same row, the same
   description and the same pair of effect lines, because a customer and a platform administrator
   are reading the same thing and a second visual language would only make them look different.

   What is added here is the part only an ACCOUNT row has: the platform bound it sits inside, the
   notice when a stored value no longer fits that bound, and the read-only form of a row this
   organisation may see but not change. */
.mg-setting__key {
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--mg-ink-3, inherit);
}

/* The bound is a statement about the PLATFORM, not about this account, so it is set apart from the
   field rather than reading as another hint under it. */
.mg-setting__bound {
  margin: var(--mg-space-2) 0 0;
  font-size: 0.85rem;
  color: var(--mg-ink-3, inherit);
  max-width: 68ch;
}

/* A stored value that no longer fits its window is the one thing on this screen a customer has not
   done themselves, so it is the one thing that gets a colour - and it still carries the whole
   sentence, because colour is never the signal. */
.mg-setting__clamped {
  margin: var(--mg-space-2) 0 0;
  padding: var(--mg-space-2) var(--mg-space-3);
  border-left: 3px solid var(--mg-warn, var(--mg-line));
  font-size: 0.88rem;
  max-width: 68ch;
}

.mg-setting__meta {
  margin: var(--mg-space-2) 0 0;
  font-size: 0.8rem;
  color: var(--mg-ink-3, inherit);
}

.mg-setting__value { font-variant-numeric: tabular-nums; }
.mg-setting__locked { font-size: 0.85rem; color: var(--mg-ink-3, inherit); }