/* =============================================================================
   tools.moldchem.com — stylesheet
   Dark-only by design. Tokens overlay on MoldChem brand.
   ============================================================================= */

/* ── Font self-hosting ────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Merriweather Sans';
  src: url('assets/fonts/MerriweatherSans-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   Sourced from colors_and_type.css + tools dark-purple overlay (HANDOFF §3).
   Dark is the default; [data-theme="light"] (below) overrides UI-state tokens.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --mc-bg:        #0A0A12;
  --mc-bg-2:      #0F0F1B;
  --mc-surface:   #15152A;
  --mc-surface-2: #1C1C36;
  --mc-border:    #28284A;
  --mc-border-2:  #3A3A60;

  /* text */
  --mc-text:    #EDE9FE;
  --mc-text-2:  #B5B0D6;
  --mc-muted:   #8A86B0;

  /* brand blue-indigo */
  --mc-primary:      oklch(55% 0.27 255);
  --mc-primary-2:    oklch(68% 0.22 255);
  --mc-primary-3:    oklch(80% 0.16 255);
  --mc-primary-2s:   oklch(58% 0.22 255);   /* darker gradient stop — keeps white button labels ≥AA (M13); text still uses -2/-3 */
  --mc-primary-deep: oklch(38% 0.22 255);
  --mc-primary-glow: oklch(55% 0.27 255 / 0.45);
  /* semantic */
  --mc-success: oklch(68% 0.17 163);
  --mc-warning: oklch(74% 0.18 70);
  --mc-danger:  oklch(60% 0.22 28);          /* saturated — borders/icons only (≥3:1) */
  --mc-danger-text: oklch(78% 0.13 25);      /* lighter red for danger TEXT — ≥4.5:1 on dark surfaces (WCAG 1.4.3) */

  /* heatmap gradient (periodic table property colouring) — locked like GHS/data
     colors, reads fine in both themes so no light-theme override is needed */
  --mc-heat-lo: #1e3a8a;
  --mc-heat-hi: #f97316;

  /* easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* GHS regulatory (never override — white BG, red border) */
  --mc-ghs-bg:     #FFFFFF;
  --mc-ghs-border: #DC2626;

  /* translucent "glass" chrome surfaces (topbar / dropdown panels / consent /
     sticky filter bar) — theme-aware, unlike the raw rgba they replace */
  --mc-glass:       rgba(15,15,27,0.92);
  --mc-glass-solid: rgba(17,17,30,0.98);

  /* radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* type stacks */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Merriweather Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* layout */
  --container: 1280px;
  /* horizontal page gutter — one source of truth for the whole frame
     (topbar, breadcrumb, hero, sections, tool pages, footer). On the --sp scale. */
  --gutter:   32px;  /* = --sp-6, desktop */
  --gutter-m: 16px;  /* = --sp-4, phone   */

  /* spacing scale — use these instead of raw px values */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  24px;   --sp-6:  32px;
  --sp-7:  48px;   --sp-8:  64px;   --sp-9:  96px;

  /* z-index semantic scale */
  --z-bg:       0;
  --z-content:  1;
  --z-sticky:  40;
  --z-nav:     50;
  --z-overlay: 100;

  /* topbar height — update alongside .mc-topbar padding changes */
  --topbar-h: 70px;
}

html { color-scheme: dark; overflow-x: clip; } /* clip stale morph-bg overhang (M1); body overflow-x:hidden doesn't cover the html scroll area */

/* ─── Light theme (LIGHT) — overrides UI-state tokens ONLY. Data colors
   (hazard / GHS / element / pH / pigment) and the brand accent (--mc-primary*)
   stay locked. Driven by the topbar toggle and by ?theme=light (the hook G2
   embeds reuse). ─── */
[data-theme="light"] {
  --mc-bg:        #F6F7F9;
  --mc-bg-2:      #EDEFF3;
  --mc-surface:   #FFFFFF;
  --mc-surface-2: #F0F2F6;
  --mc-border:    #D7DCE3;
  --mc-border-2:  #C2C9D2;
  --mc-text:      #1A1F26;
  --mc-text-2:    #4B5563;
  --mc-muted:     #6B7280;
  /* accents/status as TEXT need darkening on light surfaces (WCAG 1.4.3).
     Gradients keep --mc-primary-2s so button fills stay vivid. */
  --mc-primary-2: oklch(55% 0.22 255);   /* links: 4.5:1 on light */
  --mc-primary-3: oklch(52% 0.16 255);   /* "View all →", .mc-lang-cur, brand-tag */
  --mc-success:   oklch(46% 0.15 163);   /* .pill.live + is-ok status */
  --mc-warning:   oklch(50% 0.16 70);    /* .pill.soon, .mc-lang-beta, safety banner */
  --mc-danger-text: oklch(48% 0.20 28); /* darker red keeps AA on light surfaces */
  --mc-glass:       rgba(255,255,255,0.92);
  --mc-glass-solid: rgba(255,255,255,0.98);
}
html[data-theme="light"] { color-scheme: light; }

/* Theme toggle button (LIGHT) — quiet icon button in the topbar. */
.mc-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  background: none; border: 1px solid var(--mc-border); border-radius: var(--r-md);
  color: var(--mc-text-2); cursor: pointer;
}
.mc-theme-toggle:hover, .mc-theme-toggle:focus-visible { border-color: var(--mc-border-2); color: var(--mc-text); outline: none; }

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

html, body {
  background: var(--mc-bg);
  color: var(--mc-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% -8%, oklch(55% 0.27 255 / 0.18), transparent 45%),
    radial-gradient(circle at 92% 12%, oklch(68% 0.22 255 / 0.12), transparent 50%),
    var(--mc-bg);
  position: relative;
  overflow-x: hidden;
  opacity: 0;
  animation: mc-page-in 320ms var(--ease-out-expo) forwards;
}

@keyframes mc-page-in { to { opacity: 1; } }

/* hex molecular grid — very subtle */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'><path d='M30 1L58 17v18L30 51 2 35V17z' fill='none' stroke='%237B82F5' stroke-opacity='0.05' stroke-width='1'/></svg>");
  background-size: 60px 52px;
  pointer-events: none;
  z-index: 0;
}

main { position: relative; z-index: 1; }

::selection { background: var(--mc-primary-glow); color: #fff; }

a { color: var(--mc-primary-2); transition: color 0.12s; }
a:hover { color: var(--mc-primary-3); }

button { font: inherit; cursor: pointer; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum","ss01"; letter-spacing: 0.02em; }
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--mc-primary); color: #fff; padding: 8px 14px;
  text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  border-radius: 0 0 var(--r-md) 0;
  z-index: 10000;
}
.skip-link:focus { top: 0; outline: none; }

:focus-visible { outline: 2px solid var(--mc-primary-2); outline-offset: 2px; border-radius: 2px; }

/* ═════════════════════════════════════════════════════════════════════════
   CHROME: Utility strip + TopBar + Footer
   ═════════════════════════════════════════════════════════════════════════ */

/* Legal acknowledgment notice — fixed, dismissible bottom bar */
.mc-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--mc-glass-solid);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--mc-border-2);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.45);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mc-consent.is-in { transform: translateY(0); }
.mc-consent-text {
  margin: 0; max-width: 760px;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: var(--mc-text-2);
}
.mc-consent-text a { color: var(--mc-primary-2); text-decoration: underline; text-underline-offset: 2px; }
.mc-consent-text a:hover { color: var(--mc-primary-3); }
.mc-consent-btn {
  flex-shrink: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: oklch(99% 0.002 255);
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  border: none; border-radius: var(--r-md); padding: 10px 22px;
  box-shadow: 0 4px 12px oklch(55% 0.27 255 / 0.30);
  transition: transform 0.12s, box-shadow 0.12s;
}
.mc-consent-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px oklch(55% 0.27 255 / 0.5); }

@media (max-width: 600px) {
  .mc-consent { padding: 12px 16px; gap: 10px; }
  .mc-consent-text { font-size: 12px; }
  .mc-consent-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-consent { transition: none; }
}

/* TopBar */
.mc-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--mc-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mc-border);
  padding: 16px var(--gutter);
  display: flex; align-items: center; gap: 24px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.mc-topbar.is-scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  border-bottom-color: var(--mc-border-2);
}
.mc-brand-block { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.mc-brand-tagline {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 1;
  color: var(--mc-text-2); letter-spacing: 0.01em;
}
.mc-brand-tagline svg { color: var(--mc-primary-3); opacity: 0.85; flex-shrink: 0; }
/* Tagline is marketing, not navigation — drop it below the width where the full
   topbar (nav + donate + i18n switchers + units gear) stops fitting (~1100px). */
@media (max-width: 1100px) { .mc-brand-tagline { display: none; } }
.mc-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.mc-brand img { height: 32px; width: auto; display: block; } /* width:auto so the width/height attrs (2900×450, for CLS) only set aspect-ratio, not a literal 2900px width */
/* Brand wordmark PNG is theme-swapped by chrome.js (white "Mold" for dark,
   black "Mold" for light — see brandSrc()). */
.mc-brand-wordmark {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  letter-spacing: -0.02em; color: var(--mc-text);
}
.mc-brand-tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--mc-primary-3); padding: 4px 9px; border: 1px solid var(--mc-primary); border-radius: 4px;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  background: oklch(55% 0.27 255 / 0.10);
}
.mc-icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mc-text-2); border-radius: var(--r-md);
  background: var(--mc-surface); border: 1px solid var(--mc-border);
  transition: color 0.12s, border-color 0.12s; text-decoration: none;
  flex-shrink: 0;
}
.mc-icon-btn:hover { color: var(--mc-text); border-color: var(--mc-primary); }
/* Liberapay support button — top-right, theme-matched accent pill (no external widget). */
.mc-donate {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  border: 1px solid var(--mc-primary);
  box-shadow: 0 2px 10px var(--mc-primary-glow);
  transition: filter 0.12s, transform 0.12s, box-shadow 0.12s;
}
.mc-donate:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 16px var(--mc-primary-glow); }
.mc-donate:active { transform: translateY(0); }
.mc-donate-heart { font-size: 14px; line-height: 1; }
@media (max-width: 600px) { .mc-donate { padding: 8px 11px; } .mc-donate-label { display: none; } }
.mc-navbar-switchers { display: flex; align-items: center; gap: 12px; }
.mc-navbar-switchers .mc-lang { gap: 8px; font-size: 13px; }
.mc-icon-btn-badge {
  position: absolute; top: -5px; right: -5px;
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  color: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--mc-bg-2);
}
.mc-search { flex: 1; max-width: 480px; position: relative; }
.mc-search input {
  width: 100%; background: var(--mc-surface); border: 1px solid var(--mc-border);
  border-radius: var(--r-md); padding: 10px 14px 10px 40px;
  color: var(--mc-text); font-family: var(--font-body); font-size: 13.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mc-search input::placeholder { color: var(--mc-muted); }
.mc-search input:focus { outline: none; border-color: var(--mc-primary); box-shadow: 0 0 0 3px var(--mc-primary-glow); }
.mc-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mc-muted); pointer-events: none; }
.mc-search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; color: var(--mc-muted);
  background: var(--mc-surface-2); padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--mc-border-2);
}
.mc-topnav { display: flex; gap: 8px; align-items: center; }
.mc-topnav a {
  color: var(--mc-text-2); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--r-sm);
  transition: color 0.12s, background 0.12s;
  font-family: var(--font-body);
}
.mc-topnav a:hover, .mc-topnav a.is-active { color: var(--mc-text); background: var(--mc-surface); }
.mc-topnav a.mc-topnav-store {
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  color: oklch(99% 0.002 255);
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px oklch(55% 0.27 255 / 0.35);
}
.mc-topnav a.mc-topnav-store:hover { transform: translateY(-1px); box-shadow: 0 6px 18px oklch(55% 0.27 255 / 0.55); color: oklch(99% 0.002 255); }

/* ── Categories disclosure button + mega-menu ─────────────────────────────── */
.mc-nav-cats, .mc-nav-legal { position: relative; }
.mc-nav-cats-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--mc-text-2); font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.mc-nav-cats-btn:hover, .mc-nav-cats-btn.is-active,
.mc-nav-cats-btn[aria-expanded="true"] { color: var(--mc-text); background: var(--mc-surface); }
.mc-nav-cats-chev { transition: transform 0.18s var(--ease-out-quart); }
.mc-nav-cats-btn[aria-expanded="true"] .mc-nav-cats-chev { transform: rotate(180deg); color: var(--mc-primary-2); }

.mc-megamenu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  width: min(680px, calc(100vw - 48px));
  background: var(--mc-glass-solid);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--mc-border-2); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  padding: 16px;
}
.mc-mm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px;
  animation: mc-mm-in 0.15s var(--ease-out-quart);
}
@keyframes mc-mm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Preferred-units gear popover (chrome.js gear + js/unit-field.js panel). Mirrors
   the megamenu surface; anchored to the gear button on the right of the topbar. */
.mc-units-wrap { position: relative; display: inline-flex; }
/* .mc-icon-btn sets display, which would override the [hidden] attribute — keep
   the gear truly hidden until MCUnit reveals it on pages with unit fields. */
.mc-units-btn[hidden] { display: none; }
.mc-units-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 260px; max-width: calc(100vw - 32px);
  background: var(--mc-glass-solid);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--mc-border-2); border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  padding: 14px;
}
.mc-units-pop[hidden] { display: none; }
.mc-units-title { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mc-text-2); margin-bottom: 10px; }
.mc-units-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--mc-text); }
.mc-units-row select.mc-input { width: auto; min-width: 96px; padding: 6px 28px 6px 10px; }
.mc-units-reset { width: 100%; margin-top: 6px; }
.mc-mm-cat { padding: 8px 0; min-width: 0; }
.mc-mm-head {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--mc-text); padding: 4px 6px; border-radius: var(--r-sm);
}
.mc-mm-head:hover { background: var(--mc-surface); }
.mc-mm-head.is-active { color: var(--mc-primary-3); }
.mc-mm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mc-mm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-mm-count {
  font-family: var(--font-mono); font-size: 10px; color: var(--mc-muted);
  background: var(--mc-surface-2); border: 1px solid var(--mc-border-2);
  padding: 1px 6px; border-radius: 100px; flex-shrink: 0;
}
.mc-mm-tools { list-style: none; margin: 2px 0 4px; padding: 0 6px; }
.mc-mm-tools a {
  display: block; text-decoration: none;
  color: var(--mc-text-2); font-size: 12.5px; font-family: var(--font-body);
  padding: 4px 8px; border-radius: var(--r-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.1s, background 0.1s;
}
.mc-mm-tools a:hover { color: var(--mc-text); background: var(--mc-surface); }
.mc-mm-all {
  display: inline-block; padding: 2px 8px;
  font-size: 11.5px; font-weight: 600; font-family: var(--font-body);
  color: var(--mc-primary-3); text-decoration: none;
}
.mc-mm-all:hover { color: var(--mc-primary-2); text-decoration: underline; }

/* Legal dropdown — slim, left-anchored variant of the mega-menu panel. */
.mc-megamenu-legal { left: 0; right: auto; width: auto; min-width: 190px; padding: 8px; }
.mc-legal-list { list-style: none; margin: 0; padding: 0; animation: mc-mm-in 0.15s var(--ease-out-quart); }
.mc-legal-list a {
  display: block; text-decoration: none;
  color: var(--mc-text-2); font-size: 13px; font-family: var(--font-body);
  padding: 8px 12px; border-radius: var(--r-sm);
  transition: color 0.1s, background 0.1s;
}
.mc-legal-list a:hover { color: var(--mc-text); background: var(--mc-surface); }

/* ── Language dropdown (N18) — compact globe+code trigger in the topbar cluster.
   Standalone click popover (mirrors the units gear); NOT a .mc-megamenu, so the
   mobile accordion-flatten rules can't turn it into an in-flow list. Trigger
   matches the theme toggle beside it (38px height, border, radius). ──────────── */
.mc-nav-lang { position: relative; display: inline-flex; }
.mc-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 10px; flex: none;
  background: none; border: 1px solid var(--mc-border); border-radius: var(--r-md);
  color: var(--mc-text-2); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.mc-lang-btn:hover, .mc-lang-btn:focus-visible,
.mc-lang-btn[aria-expanded="true"] { color: var(--mc-text); border-color: var(--mc-primary); outline: none; }
.mc-flag {
  display: inline-block; flex: none; width: 18px; height: 13px;
  border: 1px solid var(--mc-border-2); border-radius: 2px; overflow: hidden;
}
.mc-flag svg { display: block; width: 100%; height: 100%; }
.mc-lang-code { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.mc-lang-btn .mc-nav-cats-chev { transition: transform 0.18s var(--ease-out-quart); }
.mc-lang-btn[aria-expanded="true"] .mc-nav-cats-chev { transform: rotate(180deg); color: var(--mc-primary-2); }

.mc-lang-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 190px; max-width: calc(100vw - 24px);
  background: var(--mc-glass-solid);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--mc-border-2); border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  padding: 6px;
}
.mc-lang-pop[hidden] { display: none; }
.mc-lang-list { list-style: none; margin: 0; padding: 0; animation: mc-mm-in 0.15s var(--ease-out-quart); }
.mc-lang-list a, .mc-lang-list .mc-lang-cur, .mc-lang-list .mc-lang-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-family: var(--font-body); text-decoration: none; color: var(--mc-text-2);
}
.mc-lang-list a:hover, .mc-lang-list a:focus-visible { color: var(--mc-text); background: var(--mc-surface); outline: none; }
.mc-lang-list .mc-lang-cur { color: var(--mc-primary-3); font-weight: 600; }
.mc-lang-name { flex: 1; }
.mc-lang-beta {
  flex: none; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-warning);
  border: 1px solid oklch(74% 0.18 70 / 0.35); border-radius: 100px; padding: 1px 6px;
}
/* Not-yet-shipped locale: neutral "coming soon" pill; the row itself is dimmed
   by .mc-coming-soon (opacity + not-allowed). */
.mc-lang-soon {
  flex: none; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-text-2);
  border: 1px solid var(--mc-border); border-radius: 100px; padding: 1px 6px; white-space: nowrap;
}
.mc-lang-recent { flex: none; color: var(--mc-primary-2); font-size: 15px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .mc-lang-list { animation: none; } }

/* Theme row inside the mobile hamburger menu; the bar toggle covers desktop. */
.mc-topnav-theme { display: none; }
@media (max-width: 880px) {
  /* On phones the top bar fits one extra control (language). Theme moves into the
     menu; the bar theme toggle hides so the two don't double up. */
  .mc-navbar-switchers .mc-theme-toggle { display: none; }
  .mc-lang-btn { padding: 0 8px; }
  .mc-topnav.is-open .mc-topnav-theme {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px; min-height: 44px;
    background: none; border: 0; border-bottom: 1px solid var(--mc-border);
    color: var(--mc-text-2); font-family: var(--font-body); font-size: 14px; text-align: left;
  }
  .mc-topnav.is-open .mc-topnav-theme:hover { color: var(--mc-text); }
}
@media (max-width: 600px) { .mc-lang-code { display: none; } }  /* globe-only on phones to save bar width */

/* Mobile search shortcut button — hidden on desktop (the full search field shows);
   on phones it opens the command palette. */
.mc-search-btn-m {
  display: none; width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--mc-border); border-radius: var(--r-md);
  color: var(--mc-text-2); cursor: pointer;
}
.mc-search-btn-m:hover, .mc-search-btn-m:focus-visible { color: var(--mc-text); border-color: var(--mc-primary); outline: none; }
@media (max-width: 880px) { .mc-search-btn-m { display: inline-flex; } }
@media (max-width: 1100px) { .mc-donate { display: none; } }  /* footer keeps donate; frees bar width until the full topbar fits (~1100px) */
/* Phone: the wordmark PNG is ~206px at 32px tall — too wide once the switcher
   cluster (search + language + units gear) sits beside the hamburger. Shrink the
   logo, tighten gaps, and drop the language chevron so the whole bar fits ≤360px
   without dropping any control. */
@media (max-width: 600px) {
  .mc-topbar { gap: 8px; }
  .mc-brand img { height: 22px; }
  .mc-lang-btn { padding: 0 6px; }
  .mc-lang-btn .mc-nav-cats-chev { display: none; }
}

/* First-visit machine-translation heads-up (locale pages) — amber caution strip,
   full border (no side-stripe), dismissible; remembered once closed. */
.mc-i18n-firstnote {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  max-width: var(--container); margin: 14px auto 0; padding: 10px 16px;
  background: oklch(74% 0.18 70 / 0.08); border: 1px solid oklch(74% 0.18 70 / 0.30);
  border-radius: var(--r-md);
  color: var(--mc-text-2); font-size: 13px; line-height: 1.5;
}
.mc-i18n-firstnote a { color: var(--mc-warning); text-decoration: underline; text-underline-offset: 2px; }
.mc-i18n-dismiss {
  flex: none; background: none; border: 0; color: var(--mc-muted);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.mc-i18n-dismiss:hover, .mc-i18n-dismiss:focus-visible { color: var(--mc-text); outline: none; }
.mc-embed .mc-i18n-firstnote { display: none; }

/* ── Stripe-style morphing dropdown (desktop, .mc-has-morph on .mc-topbar) ───
   A single shared background sits behind both panels and animates its size and
   position as you move between Categories and Legal. Driven from chrome.js. */
.mc-morph-bg {
  position: absolute; top: 0; left: 0; z-index: 55;
  width: 0; height: 0; transform: translate(0, 0);
  border-radius: var(--r-lg);
  background: var(--mc-glass-solid);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--mc-border-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none;
  transition: transform 0.34s var(--ease-out-quart),
              width 0.34s var(--ease-out-quart),
              height 0.34s var(--ease-out-quart),
              opacity 0.18s ease;
  /* ponytail: morphing a container's size genuinely needs width/height here
     (Stripe animates the same). It's one leaf element, so the per-frame layout
     cost is trivial; upgrade to clip-path only if a profiler ever complains. */
}
.mc-morph-bg.on { opacity: 1; }
/* While the shared bg is driving the look, the panels go transparent and just
   crossfade their content on top of it. */
.mc-has-morph .mc-megamenu {
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: transparent; box-shadow: none;
  transition: opacity 0.22s var(--ease-out-quart);
}
/* Hover bridge: cover the 12px gap between trigger and panel so sliding down
   from the button doesn't drop the hover and snap the menu shut. */
.mc-has-morph .mc-megamenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .mc-morph-bg { transition: opacity 0.12s ease; }
}
@media (prefers-reduced-motion: reduce) { .mc-mm-grid, .mc-legal-list { animation: none; } }

/* Mobile nav scrim — sits below the topbar (z 50) and its dropdown panel, above
   page content; click to close. Only ever shown via JS when the menu opens. */
.mc-nav-backdrop {
  position: fixed; left: 0; right: 0; top: var(--topbar-h); bottom: 0;
  z-index: 45; background: rgba(10,10,18,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease-out-quart);
}
.mc-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .mc-nav-backdrop { transition: none; } }

/* mobile hamburger */
.mc-nav-search-mobile { display: none; }
.mc-hamburger {
  display: none;
  width: 38px; height: 38px;
  background: var(--mc-surface); border: 1px solid var(--mc-border);
  border-radius: var(--r-md);
  color: var(--mc-text-2);
  align-items: center; justify-content: center;
}
.mc-hamburger svg { transition: transform 0.2s; }
.mc-hamburger[aria-expanded="true"] svg { transform: rotate(90deg); color: var(--mc-primary-2); }

@media (max-width: 880px) { .mc-search { max-width: 220px; } .mc-search kbd { display: none; } }
@media (max-width: 880px) {
  :root { --topbar-h: 56px; }
  .mc-topbar { padding: 12px 16px; gap: 12px; }
  .mc-search { display: none; }
  /* Keep theme + language reachable in the top bar on mobile (the switcher is now
     a compact icon cluster, not the old wide inline link row that had to hide). */
  .mc-navbar-switchers { display: flex; gap: 8px; }
  .mc-topnav, .mc-topnav-store { display: none; }
  .mc-hamburger { display: inline-flex; margin-left: auto; }
  .mc-topnav.is-open {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--mc-glass-solid); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--mc-border);
    padding: 8px 16px 16px;
  }
  .mc-topnav.is-open a { padding: 12px 14px; border-bottom: 1px solid var(--mc-border); }
  .mc-topnav.is-open .mc-topnav-store { display: inline-flex; margin-top: 8px; justify-content: center; }
  .mc-brand-tag { display: none; }
  /* Mobile search inside nav dropdown */
  .mc-topnav.is-open .mc-nav-search-mobile {
    display: block; padding: 8px 0 12px; border-bottom: 1px solid var(--mc-border);
    margin-bottom: 4px;
  }
  .mc-nav-search-mobile input {
    width: 100%; background: var(--mc-bg); border: 1px solid var(--mc-border-2);
    color: var(--mc-text); border-radius: var(--r-md);
    padding: 11px 14px; font-family: var(--font-body); font-size: 14px;
    min-height: 44px;
  }
  .mc-nav-search-mobile input::placeholder { color: var(--mc-muted); }
  .mc-nav-search-mobile input:focus {
    outline: none; border-color: var(--mc-primary-2);
    box-shadow: 0 0 0 3px var(--mc-primary-glow);
  }
}

/* Mobile: the mega-menu flattens into an inline accordion inside the slide-in nav. */
@media (max-width: 880px) {
  .mc-nav-cats { width: 100%; }
  .mc-nav-cats-btn {
    width: 100%; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--mc-border);
    font-size: 14px; min-height: 44px;
  }
  .mc-megamenu {
    position: static; width: auto; z-index: auto;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 4px 0 8px 8px;
  }
  .mc-mm-grid { grid-template-columns: 1fr; gap: 2px; animation: none; }
  .mc-legal-list { animation: none; }
  .mc-mm-cat { padding: 4px 0; }
  /* Override the generic ".mc-topnav.is-open a" full-row styling for nested links. */
  .mc-topnav.is-open .mc-megamenu a { border-bottom: 0; padding: 7px 10px; }
  .mc-topnav.is-open .mc-mm-head { padding: 9px 8px; font-size: 14px; }
  .mc-topnav.is-open .mc-mm-tools a { font-size: 13px; }
}

/* Breadcrumb */
.mc-breadcrumb-bar {
  max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter) 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--mc-muted);
  text-transform: uppercase; letter-spacing: 0.14em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.mc-breadcrumb-bar a { color: var(--mc-muted); text-decoration: none; transition: color 0.12s; }
.mc-breadcrumb-bar a:hover { color: var(--mc-primary-2); }
.mc-breadcrumb-bar .sep { color: var(--mc-border-2); }
.mc-breadcrumb-bar .here { color: var(--mc-text-2); }

/* Footer */
.mc-footer {
  margin-top: var(--sp-9); padding: var(--sp-7) var(--gutter) var(--sp-6);
  border-top: 1px solid var(--mc-border);
  background: linear-gradient(180deg, transparent, oklch(55% 0.27 255 / 0.04));
  position: relative; z-index: 1;
}
/* Fully fluid: auto-fit reflows the columns at any width so there is no
   fixed-column "dead band" that overflows between breakpoints. min(160px,100%)
   keeps a track from ever exceeding a narrow container. */
.mc-footer-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 36px; }
.mc-footer h2 { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mc-text-2); margin-bottom: 14px; }
.mc-footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mc-footer a { color: var(--mc-text-2); text-decoration: none; font-size: 13px; transition: color 0.12s; }
.mc-footer a:hover { color: var(--mc-primary-2); }
.mc-footer-tag { font-size: 13px; color: var(--mc-text-2); line-height: 1.6; max-width: 360px; margin-top: 16px; }
.mc-footer-brand { font-family: var(--font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.02em; color: var(--mc-text); display: inline-flex; align-items: center; gap: 10px; }
.mc-footer-legal {
  max-width: var(--container); margin: 30px auto 0; padding-top: 22px; border-top: 1px solid var(--mc-border);
}
.mc-footer-legal p { font-size: 12px; line-height: 1.6; color: var(--mc-muted); max-width: 760px; margin: 0; }
.mc-footer-legal p a { color: var(--mc-text-2); text-decoration: underline; text-underline-offset: 2px; }
.mc-footer-meta {
  max-width: var(--container); margin: 24px auto 0; padding-top: 22px; border-top: 1px solid var(--mc-border);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--mc-muted);
}

/* Non-GHS caution banner injected on safety-critical tools. Full border + amber
   tint (no side-stripe); never used to recolor a GHS pictogram. */
.mc-safety-banner {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 20px; padding: 13px 16px;
  background: oklch(74% 0.18 70 / 0.08);
  border: 1px solid oklch(74% 0.18 70 / 0.32);
  border-radius: var(--r-md);
  color: var(--mc-text-2); font-size: 13px; line-height: 1.55;
}
.mc-safety-banner svg { flex: none; color: var(--mc-warning); margin-top: 1px; }
.mc-safety-banner strong { color: var(--mc-text); font-weight: 700; }
.mc-safety-banner a { color: var(--mc-warning); text-decoration: underline; text-underline-offset: 2px; }

/* Machine-translation disclaimer (N18, locale pages only) — subtle strip above the footer. */
.mc-i18n-note {
  max-width: 1200px; margin: 24px auto 0; padding: 10px 16px;
  background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--r-md);
  color: var(--mc-text-2); font-size: 12.5px; line-height: 1.5; text-align: center;
}
.mc-i18n-note a { color: var(--mc-primary-2); }
.mc-embed .mc-i18n-note { display: none; }

/* ═════════════════════════════════════════════════════════════════════════
   HOMEPAGE — Hero · Filter · Section
   ═════════════════════════════════════════════════════════════════════════ */

.mc-hero {
  position: relative; padding: 72px var(--gutter) 60px; max-width: var(--container); margin: 0 auto; z-index: 1;
}
.mc-hero-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--mc-primary-2); text-transform: uppercase; margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.mc-hero-eyebrow::before, .mc-hero-eyebrow::after {
  content: ""; flex: none; width: 32px; height: 1px;
  background: linear-gradient(to right, transparent, var(--mc-primary));
}
.mc-hero-eyebrow::after { background: linear-gradient(to left, transparent, var(--mc-primary)); }
.mc-hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.02;
  letter-spacing: -0.02em; max-width: 880px;
}
.mc-hero h1 .grad {
  color: var(--mc-primary-2);
}
.mc-hero p { color: var(--mc-text-2); font-size: 17px; line-height: 1.55; max-width: 640px; margin-top: 20px; }
.mc-hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.mc-hero-cta-primary {
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  color: #fff; padding: 14px 24px;
  border: none; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 20px var(--mc-primary-glow);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mc-hero-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 26px oklch(55% 0.27 255 / 0.60); color: #fff; }
.mc-hero-cta-primary:active { transform: scale(0.98); }
.mc-hero-cta-secondary {
  background: var(--mc-surface); color: var(--mc-text);
  border: 1px solid var(--mc-border-2);
  padding: 14px 24px; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.04em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.12s, color 0.12s;
}
.mc-hero-cta-secondary:hover { border-color: var(--mc-primary); color: var(--mc-primary-2); }
.mc-hero-meta {
  display: flex; align-items: center; gap: 0;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--mc-border);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--mc-muted);
  letter-spacing: 0.04em; flex-wrap: wrap;
}
.mc-hero-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 22px 3px 0;
}
.mc-hero-meta-item:not(:first-child) {
  padding-left: 22px;
  border-left: 1px solid var(--mc-border-2);
}
.mc-hero-meta-num {
  font-weight: 700; font-size: 13px; color: var(--mc-text-2);
}

/* Filter bar */
.mc-filter-bar {
  position: sticky; top: var(--topbar-h); z-index: 40;
  background: var(--mc-glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--mc-border);
  border-bottom: 1px solid var(--mc-border);
  padding: 14px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; overflow-x: auto;
  scrollbar-width: none;
}
.mc-filter-bar::-webkit-scrollbar { display: none; }
.mc-filter-pill {
  flex: none;
  background: transparent;
  border: 1px solid var(--mc-border);
  color: var(--mc-text-2);
  padding: 8px 16px; border-radius: 100px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  text-decoration: none;
}
.mc-filter-pill:hover { border-color: var(--mc-primary); color: var(--mc-text); }
.mc-filter-pill.on, .mc-filter-pill[aria-pressed="true"] { background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s)); color: #fff; border-color: transparent; }
.mc-filter-pill .count {
  font-family: var(--font-mono); font-size: 10.5px; opacity: 0.7;
  background: color-mix(in srgb, currentColor 14%, transparent); padding: 1px 6px; border-radius: 100px;
}

/* Section headers */
.mc-section { max-width: var(--container); margin: var(--sp-7) auto 0; padding: 0 var(--gutter); position: relative; z-index: 1; }

/* Rhythm: generous before lead/closing blocks, tight between sibling sections.
   The contrast (96 vs 32) is what reads as intentional, not the absolute values. */
#section-featured { margin-top: var(--sp-9); }        /* breathe after hero */
.mc-section + .mc-section { margin-top: var(--sp-6); } /* tighter between siblings */
/* The "Why these tools" section needs a clear break from the tool grid */
[aria-labelledby="why-h2"] { margin-top: var(--sp-9); }
.mc-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--mc-border);
}
.mc-section-head h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 12px;
}
.mc-section-num { font-family: var(--font-mono); font-size: 11px; color: var(--mc-muted); font-weight: 500; }
.mc-section-tag { font-family: var(--font-mono); font-size: 11px; color: var(--mc-primary-2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; }

/* Tool grid + cards */
/* min(290px, 100%) prevents overflow when container < 290px (e.g. 320px phone) */
.mc-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: var(--sp-4); }
.mc-tool-card {
  position: relative;
  background: linear-gradient(180deg, var(--mc-surface), var(--mc-bg-2));
  border: 1px solid var(--mc-border);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 170px;
  color: inherit;
}
/* Stretched link — covers the full card, sits below interactive children */
.mc-tool-card-link {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  text-decoration: none;
}
.mc-tool-card-link:focus-visible {
  outline: 2px solid var(--mc-primary);
  outline-offset: -2px;
  border-radius: inherit;
}
/* QoL-2 — favorite stars. Card star sits above the full-card overlay link
   (.mc-tool-card is already position:relative; link is z-index 0). */
.mc-fav-star { position: absolute; top: .5rem; right: .5rem; z-index: 3;
  width: 1.9rem; height: 1.9rem; padding: 0; line-height: 1; font-size: 1.1rem;
  border: none; background: transparent; cursor: pointer; color: var(--mc-muted);
  opacity: .55; transition: opacity .15s, color .15s, transform .1s; }
.mc-fav-star:hover { opacity: 1; transform: scale(1.1); }
.mc-fav-star.is-fav { color: #f5b301; opacity: 1; } /* pinned gold — UI-state accent */
.mc-fav-star:focus-visible { outline: 2px solid var(--mc-primary); outline-offset: 2px; opacity: 1; }
/* Header variant reads as a text button, not a floating icon. */
.mc-fav-star-header { position: static; width: auto; height: auto; padding: .35rem .7rem;
  font-size: .85rem; opacity: 1; color: inherit; }
.mc-tool-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--mc-primary-glow), transparent 50%);
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.mc-tool-card:hover { transform: translateY(-2px); border-color: var(--mc-primary); box-shadow: 0 8px 24px oklch(55% 0.27 255 / 0.18); }
.mc-tool-card:hover::before { opacity: 1; }
.mc-tool-card:active { transform: translateY(-1px) scale(0.99); }
.mc-tool-card-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--mc-surface-2), var(--mc-surface));
  border: 1px solid var(--mc-border);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--mc-primary-2);
}
.mc-tool-card.ready .mc-tool-card-icon {
  background: linear-gradient(135deg, var(--mc-primary-deep), var(--mc-primary));
  color: #fff; border-color: var(--mc-primary);
  box-shadow: 0 4px 14px oklch(55% 0.27 255 / 0.40);
}
.mc-tool-card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--mc-text);
  letter-spacing: -0.005em;
  word-break: break-word; overflow-wrap: break-word;
}
.mc-tool-card-desc { font-size: 12.5px; color: var(--mc-text-2); line-height: 1.5; flex: 1; }
.mc-tool-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.mc-tool-card-cat { font-family: var(--font-mono); font-size: 10px; color: var(--mc-muted); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; }
.pill {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 100px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pill.live { background: oklch(68% 0.17 163 / 0.15); color: var(--mc-success); border: 1px solid oklch(68% 0.17 163 / 0.30); }
.pill.soon { background: oklch(74% 0.18 70 / 0.10); color: var(--mc-warning); border: 1px solid oklch(74% 0.18 70 / 0.25); }
.pill.featured {
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  color: #fff; border: none;
  box-shadow: 0 0 12px var(--mc-primary-glow);
}
.mc-tool-card-shop {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--mc-border);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--mc-text-2);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  letter-spacing: 0.04em;
}
.mc-tool-card-shop > span {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-tool-card-shop .mc-shop-link {
  flex-shrink: 0;
  color: var(--mc-primary-2); text-decoration: none; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  position: relative; z-index: 1;
}
.mc-tool-card-shop .mc-shop-link:hover { color: var(--mc-primary-3); }

/* ── Featured shelf ───────────────────────────────────────────────────────
   Featured reads as a distinct primary tier, not another copy of the category
   index. Same card markup, re-laid horizontally (icon left, content right),
   larger and wider, so the most-used tools are where the eye lands first. The
   seven category grids below stay the consistent vertical-card index, so the
   page gains size+topology contrast instead of one uniform field of cards. */
#section-featured .mc-tools-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 16px;
}
#section-featured .mc-tool-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon desc" "icon foot";
  align-content: start;
  column-gap: 18px; row-gap: 8px;
  padding: 24px;
  min-height: 0;
}
#section-featured .mc-tool-card-icon {
  grid-area: icon; align-self: start;
  width: 52px; height: 52px; font-size: 22px;
}
#section-featured .mc-tool-card-title { grid-area: title; font-size: 16.5px; }
#section-featured .mc-tool-card-desc  { grid-area: desc; }
#section-featured .mc-tool-card-foot  { grid-area: foot; margin-top: 6px; }

/* ── Category page lead ──────────────────────────────────────────────────
   Category pages (#mc-cat-grid, exists only on cat/*.html) were a single flat
   uniform grid — the most templated surface. Lead the index with a full-width
   horizontal hero card (the category's primary tool), then the standard cards
   below. CSS-only: no markup change, so test DOM contracts stay intact. */
#mc-cat-grid .mc-tool-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon title foot"
    "icon desc  foot";
  align-items: center;
  column-gap: var(--sp-5); row-gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-6);
  min-height: 0;
  background: linear-gradient(135deg, oklch(55% 0.27 255 / 0.08), var(--mc-surface) 60%);
  border-color: var(--mc-border-2);
}
#mc-cat-grid .mc-tool-card:first-child .mc-tool-card-icon {
  grid-area: icon; align-self: center;
  width: 60px; height: 60px; font-size: 26px;
}
#mc-cat-grid .mc-tool-card:first-child .mc-tool-card-title { grid-area: title; font-size: 19px; }
#mc-cat-grid .mc-tool-card:first-child .mc-tool-card-desc  { grid-area: desc; max-width: 64ch; }
#mc-cat-grid .mc-tool-card:first-child .mc-tool-card-foot  {
  grid-area: foot; flex-direction: column; align-items: flex-end; gap: var(--sp-2);
  align-self: center;
}
@media (max-width: 600px) {
  /* Collapse the lead back to a vertical card on phones — three columns can't
     breathe at 360px. */
  #mc-cat-grid .mc-tool-card:first-child {
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "title" "desc" "foot";
    align-items: start; row-gap: var(--sp-2);
    padding: var(--sp-5);
  }
  #mc-cat-grid .mc-tool-card:first-child .mc-tool-card-foot {
    flex-direction: row; align-items: center; align-self: start;
  }
}

/* Scroll reveal */
.mc-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.mc-reveal.is-visible { opacity: 1; transform: none; }

/* ═════════════════════════════════════════════════════════════════════════
   TOOL DETAIL VIEW
   ═════════════════════════════════════════════════════════════════════════ */

.mc-tool-page { max-width: var(--container); margin: 0 auto; padding: var(--sp-6) var(--gutter) 80px; position: relative; z-index: 1; }
.mc-back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mc-text-2); text-decoration: none; font-size: 13px;
  font-family: var(--font-mono); padding: 8px 14px; border-radius: var(--r-sm);
  transition: color 0.12s, border-color 0.12s; background: none; border: 1px solid var(--mc-border);
  margin-bottom: 24px;
}
.mc-back-link:hover { color: var(--mc-text); border-color: var(--mc-primary); }

.mc-tool-header { margin-bottom: 32px; }
.mc-tool-header .breadcrumb {
  font-family: var(--font-mono); font-size: 11px; color: var(--mc-muted);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px;
}
.mc-tool-header h1 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.015em;
  color: var(--mc-text);
  margin-bottom: 0;
}
.mc-tool-header p { color: var(--mc-text-2); margin-top: 12px; font-size: 15px; max-width: 720px; line-height: 1.55; }

/* align-items:start so each card sizes to its own content. Without it, a short
   input card is stretched to match a taller result card, leaving dead space. */
.mc-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 880px) {
  .mc-tool-grid { grid-template-columns: 1fr; }
  /* On one column, let cards and their contents shrink to the viewport. Grid/flex
     items default to min-width:auto, so a wide child (data table, tab row, chip
     row) can't shrink and stretches the whole card past the screen edge — this
     caused horizontal page overflow on ~10 tool pages. min-width:0 frees them to
     wrap or scroll inside instead. */
  .mc-tool-grid > *, .mc-card, .mc-result, .mc-field, .mc-field-input { min-width: 0; }
  .mc-input { max-width: 100%; }
  .mc-tabs { flex-wrap: wrap; }
}
.mc-tool-grid.single { grid-template-columns: 1fr; }

/* ── Molar-mass: result-weighted columns ─────────────────────────────────
   This page's input is a single formula field while the result carries the
   headline mass plus the composition table, so the result earns the wider
   track. (Dead-space removal is handled globally by align-items:start above.)
   Scoped here because most tools have multi-field inputs that want equal
   columns. */
body[data-page="molar-mass"] .mc-tool-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
@media (max-width: 880px) {
  body[data-page="molar-mass"] .mc-tool-grid { grid-template-columns: 1fr; }
}

.mc-card {
  background: linear-gradient(180deg, var(--mc-surface), var(--mc-bg-2));
  border: 1px solid var(--mc-border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.mc-card-emphasis {
  border: 1px solid var(--mc-primary);
  box-shadow: 0 4px 24px oklch(55% 0.27 255 / 0.12), inset 0 1px 0 oklch(68% 0.22 255 / 0.10);
  background: linear-gradient(180deg, oklch(55% 0.27 255 / 0.06), var(--mc-bg-2));
}
.mc-card-center { align-items: center; justify-content: center; }
.mc-card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--mc-text-2); text-transform: uppercase; letter-spacing: 0.1em;
  padding-bottom: 12px; border-bottom: 1px solid var(--mc-border);
  margin-bottom: 4px;
}
.mc-subtitle {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--mc-muted); text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 8px;
}

/* JS-built mounts — even vertical rhythm ──────────────────────────────────
   Most tools render their fields (and result rows) into a single <div> mount
   inside the card. That mount is one flex child of the card, so the card's own
   `gap` can't reach the children inside it — they stack flush, which reads as
   "almost no space between a hint and the next field". Give the mount's direct
   children the rhythm a statically-built card gets from its gap. Using margin-top
   (not a gap on the mount) keeps the mount in normal block flow, so any ad-hoc
   margins a tool already sets collapse with this rather than add to it, and it
   overrides the small margin-tops on .mc-formula/.mc-recipe so spacing stays
   even. Forms get the 16px input rhythm; result stacks get a tighter 12px. */
.mc-card > div[id]:not([class]):not([aria-live]) > * + * { margin-top: var(--sp-4); }
.mc-card > [aria-live] > * + * { margin-top: var(--sp-3); }

/* form fields */
.mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-field-label { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--mc-text-2); letter-spacing: 0.02em; }
.mc-field-input { position: relative; display: flex; align-items: center; }
/* Unit token sitting beside a field input (kg, M, mol/L…). A fixed measurement
   label attached to the input — bordered and mono so the unit reads as part of a
   measurement system, not muted afterthought text. */
.mc-field-unit {
  flex: none; align-self: stretch;
  display: flex; align-items: center;
  margin-left: 8px; padding: 0 11px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--mc-text-2); white-space: nowrap;
  background: var(--mc-surface-2); border: 1px solid var(--mc-border-2);
  border-radius: var(--r-md);
}
select.mc-field-unit.mc-unit-sel { appearance: none; cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%237b7b9a' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; }
.mc-field-hint { font-size: 11px; color: var(--mc-muted); margin-top: 2px; }
/* Name → property autofill row (js/chem-autofill.js). A non-intrusive helper
   above a manual field: type a chemical name, fill the value from PubChem. The
   status line carries success/error in WORDS; colour only reinforces it. */
.mc-lookup { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.mc-lookup[hidden] { display: none; }
.mc-lookup-status { min-height: 14px; transition: color 0.15s; }
.mc-lookup-status.is-ok { color: var(--mc-success); }
.mc-lookup-status.is-error { color: var(--mc-danger-text); }
/* Contextual look-up control attached after an existing name field
   (mcAutofill.attach) — only appears when the entry isn't already a formula. */
.mc-lookup-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -6px 0 14px; }
.mc-lookup-inline[hidden] { display: none; }
.mc-lookup-inline .mc-lookup-status { margin-top: 0; }
/* Experimental-property reference panel (mcAutofill.experimentalPanel) — a
   read-only list of verbatim PubChem values, each with a click-to-fill button
   where the leading quantity parses. Source is always shown; nothing auto-fills. */
.mc-exp { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.mc-exp-status.is-ok { color: var(--mc-success); }
.mc-exp-status.is-error { color: var(--mc-danger-text); }
.mc-exp-panel:not(:empty) { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.mc-exp-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mc-muted); margin-bottom: 5px; }
.mc-exp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--mc-border); }
.mc-exp-row:last-child { border-bottom: 0; }
.mc-exp-val { font-size: 12px; color: var(--mc-text-2); flex: 1 1 60%; min-width: 0; }
.mc-exp-use { flex: none; font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; color: var(--mc-primary-2); background: var(--mc-primary-glow); border: 1px solid var(--mc-primary-2); border-radius: var(--r-sm); cursor: pointer; transition: background 0.12s, color 0.12s; }
.mc-exp-use:hover { background: var(--mc-primary-2); color: #fff; }
.mc-exp-use.is-done { color: var(--mc-success); border-color: var(--mc-success); background: oklch(68% 0.17 163 / 0.15); }
.mc-input {
  width: 100%; padding: 11px 13px;
  background: var(--mc-bg);
  border: 1px solid var(--mc-border-2);
  color: var(--mc-text);
  border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mc-input.mono { font-family: var(--font-mono); }
.mc-input.mc-input-lg { font-size: 18px; padding: 14px 16px; letter-spacing: 0.01em; }
.mc-input:focus { outline: none; border-color: var(--mc-primary-2); box-shadow: 0 0 0 3px var(--mc-primary-glow); }
.mc-input::placeholder { color: var(--mc-muted); }
.mc-input:disabled, select.mc-input:disabled { opacity: 0.45; cursor: not-allowed; }
select.mc-input { padding-right: 36px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23B5B0D6' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }

.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mc-chip {
  background: var(--mc-surface-2); border: 1px solid var(--mc-border);
  color: var(--mc-text-2); padding: 5px 10px; border-radius: var(--r-sm);
  font-size: 11.5px; transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.mc-chip:hover { border-color: var(--mc-primary); color: var(--mc-text); }
.mc-chip.on { background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s)); color: #fff; border-color: transparent; }

.mc-tabs { display: flex; gap: 4px; padding: 4px; background: var(--mc-bg); border: 1px solid var(--mc-border); border-radius: var(--r-md); }
.mc-tab {
  flex: 1; background: none; border: none; color: var(--mc-text-2);
  padding: 8px 10px; font-size: 12px; font-family: var(--font-body); font-weight: 600;
  border-radius: 6px; transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.mc-tab.on { background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s)); color: #fff; box-shadow: 0 2px 8px var(--mc-primary-glow); }
.mc-tab:hover:not(.on) { background: var(--mc-surface); color: var(--mc-text); }

/* result blocks */
.mc-result {
  padding: 14px 16px; background: var(--mc-bg);
  border: 1px solid var(--mc-border); border-radius: var(--r-md);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  position: relative;
}
.mc-result-big {
  padding: 22px 22px;
  background: linear-gradient(135deg, oklch(55% 0.27 255 / 0.16), oklch(68% 0.22 255 / 0.06));
  border-color: var(--mc-primary);
  flex-direction: column; align-items: flex-start; gap: 6px;
}
/* The base .mc-result is a single-line "label ↔ value" row. Several tools reuse
   it as a vertical container holding a table, list or stacked notes — in a row
   those children get crammed side-by-side (and used to overflow). When a result
   holds block content like that, stack it instead. */
.mc-result:has(> table),
.mc-result:has(> .mc-table-wrap),
.mc-result:has(> ol),
.mc-result:has(> ul) {
  flex-direction: column; align-items: stretch; gap: 10px;
}
.mc-result-label { font-size: 11px; color: var(--mc-text-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.mc-result-value { font-size: 18px; font-weight: 700; color: var(--mc-text); font-family: var(--font-mono); word-break: break-all; overflow-wrap: anywhere; min-width: 0; }
.mc-result-big .mc-result-value {
  font-size: 38px; font-weight: 700;
  color: var(--mc-text);
  letter-spacing: -0.01em;
}
.mc-result-unit { font-size: 0.5em; color: var(--mc-text-2); font-weight: 500; white-space: nowrap; }

/* First appearance of a computed result is animated by the single @starting-style
   pop-in on .mc-result-big (see the Motion System section); later edits roll only
   the odometer digits. */

/* Rolling-digit odometer. On a value change (not the first show), mc.flashResult
   rebuilds the headline number so each changed digit becomes a 2-cell reel that
   scrolls up one line to its new value; unchanged digits, separators and the
   decimal point render static. Overflow-clipped fixed-height cells keep the line
   from reflowing while it rolls. Restored to plain text once the roll finishes. */
.mc-odo-d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.mc-odo-reel { display: block; }
.mc-odo-reel > span { display: block; height: 1em; line-height: 1; }
.mc-odo-reel[data-to] { will-change: transform; transition: transform 460ms var(--ease-out-quart); }

/* A panel rebuilt on a tab switch (the .mc-tabs next sibling) fades in so the
   mode change is legible. Added by the shared .mc-tab delegate in main.js. */
.mc-panel-in { animation: mc-panel-in 150ms var(--ease-out-quart) both; }
@keyframes mc-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.mc-copy {
  position: absolute; top: 8px; right: 8px;
  background: var(--mc-surface-2); border: 1px solid var(--mc-border);
  color: var(--mc-text-2); padding: 4px 9px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.15s, color 0.12s, border-color 0.12s;
}
.mc-result:hover .mc-copy, .mc-result:focus-within .mc-copy { opacity: 1; }
.mc-copy:hover { color: var(--mc-text); border-color: var(--mc-primary); }
.mc-copy.copied { color: var(--mc-success); border-color: var(--mc-success); }

/* tables */
.mc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
.mc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mc-table thead th {
  text-align: left; padding: 10px 12px; background: var(--mc-bg);
  color: var(--mc-muted); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid var(--mc-border);
}
.mc-table td { padding: 9px 12px; border-bottom: 1px solid var(--mc-border); color: var(--mc-text); word-break: break-word; overflow-wrap: break-word; max-width: 260px; }
.mc-table tr:last-child td { border-bottom: none; }
.mc-elem-pill {
  display: inline-block; padding: 2px 8px; background: var(--mc-primary);
  color: #fff; border-radius: 4px; font-weight: 700; font-size: 11px;
  font-family: var(--font-mono);
}

/* Emphasised table row (e.g. dominant species, limiting reagent). Background
   tint only — never a side stripe. */
.mc-table tr.mc-row-strong td { background: oklch(55% 0.27 255 / 0.12); color: var(--mc-text); }
.mc-table tr.mc-row-strong td:first-child { font-weight: 700; }

/* Inline horizontal abundance bar for distribution tables. */
.mc-bar-track {
  display: inline-block; vertical-align: middle; width: min(140px, 38vw); height: 8px;
  background: var(--mc-bg); border: 1px solid var(--mc-border);
  border-radius: 999px; overflow: hidden; margin-right: 8px;
}
.mc-bar-fill { display: block; height: 100%; background: var(--mc-primary-2); border-radius: 999px; }
.mc-bar-val { font-size: 11px; color: var(--mc-text-2); vertical-align: middle; }

/* Small annotations attached to field labels (molar mass, range hints). */
.mc-field-sub { font-weight: 400; color: var(--mc-muted); font-size: 11px; font-family: var(--font-mono); }
.mc-error-inline { color: var(--mc-danger-text); font-weight: 400; font-size: 11px; }

/* Caption sitting under a result block (advice, derivation, fine print).
   Replaces ad-hoc inline `margin-top` so result spacing stays on the scale. */
.mc-result-note { margin-top: var(--sp-3); font-size: 12px; color: var(--mc-text-2); line-height: 1.55; }

/* ─── Show-the-work (T2) ─────────────────────────────────────────────
   Always-visible worked derivation (formula → substituted steps → result)
   beneath a .mc-result headline. Sibling AFTER .mc-result, never wrapping
   .mc-result-value (copy button / odometer / flash key on that element). */
.mc-work {
  margin-top: var(--sp-3); font-family: var(--font-mono);
  font-size: 0.875rem; color: var(--mc-text-2); line-height: 1.55;
}
.mc-work-formula { color: var(--mc-text); margin-bottom: var(--sp-2); }
.mc-work-step { white-space: nowrap; overflow-x: auto; }
.mc-work-step:last-child { color: var(--mc-text); }
.mc-work-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); }
.mc-work-table th, .mc-work-table td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--mc-border); }
.mc-work-table th:first-child, .mc-work-table td:first-child { text-align: left; }
@media print {
  .mc-work { break-inside: avoid; color: #333; }
  .mc-work-formula, .mc-work-step:last-child { color: #000; }
}

/* ─── Send to… workflow-chaining dropdown (T1) — UI chrome, tokenized ─── */
.mc-sendto { position: relative; display: inline-block; margin-top: var(--sp-3); }
.mc-sendto[hidden] { display: none; }
.mc-sendto-btn { font-size: 0.85rem; }
.mc-sendto-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 180px; padding: 4px;
  background: var(--mc-surface-2); border: 1px solid var(--mc-border-2);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.mc-sendto-menu[hidden] { display: none; }
.mc-sendto-item {
  display: block; padding: 7px 10px; border-radius: 6px;
  color: var(--mc-text); font-size: 0.875rem; text-decoration: none;
}
.mc-sendto-item:hover { background: var(--mc-surface); }
.mc-sendto-item:focus-visible { background: var(--mc-surface); outline: 2px solid var(--mc-primary-2); outline-offset: -2px; }
@media print { .mc-sendto { display: none; } }

/* ─── Recipe-card meta line (T3) — provenance under the existing .mc-recipe.
   The .mc-recipe / .mc-recipe-step / .mc-step-num structure already exists above;
   mc.work card mode emits that same markup, this only adds the optional meta row. */
.mc-recipe-meta { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: 12px;
  color: var(--mc-text-2); font-family: var(--font-mono); font-size: 0.78rem; }

/* ─── Related calculators (N1) — generated before </main>, aligns with .mc-faq ─── */
.mc-related { max-width: var(--container); margin: var(--sp-7) auto 0; padding: 0 var(--gutter); }
.mc-related h2 { font-size: 1rem; color: var(--mc-text-2); margin: 0 0 var(--sp-3); }
.mc-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mc-related li a { display: inline-block; padding: 8px 14px; border: 1px solid var(--mc-border);
  border-radius: var(--r-md); color: var(--mc-text); font-size: 0.9rem; text-decoration: none; }
.mc-related li a:hover, .mc-related li a:focus { border-color: var(--mc-border-2); background: var(--mc-surface); }
@media (max-width: 600px) { .mc-related { padding: 0 var(--gutter-m); } }

/* ─── Embeddable widgets (G2) — /embed/<slug> renders only the tool card. Chrome
   is hidden (not removed) so other scripts can still find topbar elements. ─── */
.mc-embed .mc-topbar, .mc-embed .mc-footer, .mc-embed .mc-footer-legal,
.mc-embed .mc-breadcrumb-bar, .mc-embed .mc-back-link, .mc-embed .mc-faq,
.mc-embed .mc-method, .mc-embed .mc-related, .mc-embed .mc-consent,
.mc-embed .mc-safety-banner, .mc-embed #mc-molecular-bg,
.mc-embed .skip-link, .mc-embed .mc-nav-backdrop { display: none !important; }
.mc-embed, .mc-embed body { margin: 0; padding: 0; background: var(--mc-bg); }
.mc-embed .mc-tool-page { max-width: none; margin: 0; padding: var(--sp-5) var(--gutter); }
.mc-embed-credit { display: block; text-align: center; padding: 10px;
  font-size: 0.75rem; color: var(--mc-muted); text-decoration: none; }
.mc-embed-credit:hover { color: var(--mc-text-2); text-decoration: underline; }
.mc-embed-copy { margin-top: 12px; font-size: 0.78rem; }

/* ─── Cached-vs-live data badge (D2) — UI-state token colors, NOT data colors ─── */
.mc-cache-badge { display: inline-block; font-size: 0.7rem; line-height: 1.4;
  padding: 1px 7px; margin-left: 8px; border-radius: 999px; vertical-align: middle;
  border: 1px solid var(--mc-border); font-family: var(--font-mono); white-space: nowrap; }
.mc-cache-badge.is-live { color: var(--mc-success); }
.mc-cache-badge.is-cached { color: var(--mc-muted); }
.mc-cache-badge.is-offline { color: var(--mc-warning); }
@media print { .mc-cache-badge { display: none; } }

/* ─── Uncertainty propagation (N6) — opt-in ± on measured inputs ─────────── */
.mc-uncert { color: var(--mc-text-2); font-weight: 600; white-space: nowrap; }
.mc-uncert-opt { margin-top: 14px; }
.mc-uncert-opt > summary { cursor: pointer; color: var(--mc-text-2); font-size: 0.85rem;
  user-select: none; padding: 4px 0; }
.mc-uncert-opt > summary:hover { color: var(--mc-text); }

/* ─── Language switcher (N18) — footer, links the page across locales ─────── */
.mc-lang { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.mc-lang a { color: var(--mc-muted); text-decoration: none; }
.mc-lang a:hover, .mc-lang a:focus { color: var(--mc-text-2); text-decoration: underline; }
.mc-lang .mc-lang-cur { color: var(--mc-text-2); font-weight: 600; }

/* ─── Recent-calculations history (N8) — local-only, UI chrome ─────────── */
.mc-history { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: var(--sp-3); }
.mc-history-label { color: var(--mc-text-2); font-size: 0.8rem; }
.mc-history-item { font-size: 0.82rem; font-family: var(--font-mono); padding: 4px 10px;
  border: 1px solid var(--mc-border); border-radius: var(--r-md); background: none; color: var(--mc-text-2); cursor: pointer; }
.mc-history-item:hover, .mc-history-item:focus { border-color: var(--mc-border-2); color: var(--mc-text); outline: none; }
.mc-history-clear { font-size: 0.75rem; color: var(--mc-text-2); background: none; border: none; cursor: pointer; text-decoration: underline; }

/* Touch comfort — grow tap targets on coarse pointers only, so the desktop
   density is left exactly as-is. WCAG 2.5.8 asks for 24px; 44/40px is the
   comfortable thumb/gloved-hand target for phone and shop-floor use. */
@media (pointer: coarse) {
  .mc-filter-pill, .mc-tab { min-height: 44px; }
  .mc-chip, .mc-history-item { min-height: 40px; display: inline-flex; align-items: center; }
}
@media print { .mc-history { display: none; } }

/* ─── Command palette (N4) — Ctrl/⌘-K quick-switcher overlay ───────────── */
.mc-cmdk { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
  justify-content: center; align-items: flex-start; padding-top: 12vh; z-index: var(--z-overlay); }
.mc-cmdk[hidden] { display: none; }
.mc-cmdk-panel { width: min(560px, 92vw); background: var(--mc-surface); border: 1px solid var(--mc-border-2);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.mc-cmdk-input { width: 100%; padding: 16px 18px; background: transparent; border: 0;
  border-bottom: 1px solid var(--mc-border); color: var(--mc-text); font-size: 1rem; outline: none; }
.mc-cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.mc-cmdk-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: var(--r-md); cursor: pointer; }
.mc-cmdk-item.is-active, .mc-cmdk-item:hover { background: var(--mc-surface-2); }
.mc-cmdk-name { color: var(--mc-text); font-size: 0.92rem; }
.mc-cmdk-desc { color: var(--mc-text-2); font-size: 0.78rem; }
@media print { .mc-cmdk { display: none !important; } }

/* QoL-4 — keyboard-shortcuts cheat sheet. Mirrors the command-palette scrim;
   token-driven so it reads correctly in both light and dark themes. */
.mc-shortcuts { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center;
  background: rgba(10, 10, 20, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mc-shortcuts[hidden] { display: none; }
.mc-shortcuts-panel { background: var(--mc-surface); color: var(--mc-text);
  border: 1px solid var(--mc-border); border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem; min-width: 18rem; max-width: 90vw; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.mc-shortcuts-panel h2 { margin: 0 0 .75rem; font-size: 1rem; }
.mc-shortcuts-panel dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.mc-shortcuts-panel dt { font-family: ui-monospace, monospace; font-weight: 600; white-space: nowrap; }
.mc-shortcuts-panel dd { margin: 0; color: var(--mc-text-2); }
@media print { .mc-shortcuts { display: none !important; } }

/* Section break inside a card holding more than one calculation group.
   Token-driven so in-card rhythm matches the rest of the page. */
.mc-card-divider { border: none; border-top: 1px solid var(--mc-border); margin: var(--sp-5) 0; }

/* Full-width result region that follows (rather than sits beside) the input
   grid — used when a tool needs two parallel input columns of its own. */
.mc-tool-result { margin-top: var(--sp-5); }

/* Three abreast for a suite of small, independent calculators; collapses to
   two, then one. Distinct + actionable content earns its own card here. */
.mc-tool-grid.triple { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .mc-tool-grid.triple { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .mc-tool-grid.triple { grid-template-columns: 1fr; } }

.mc-error {
  padding: 12px 14px; background: oklch(60% 0.22 28 / 0.10); border: 1px solid oklch(60% 0.22 28 / 0.30);
  border-radius: var(--r-md); color: var(--mc-danger-text); font-size: 13px; font-family: var(--font-mono);
}
.mc-note {
  padding: 10px 12px; background: var(--mc-bg); border: 1px dashed var(--mc-border-2);
  border-radius: var(--r-md); color: var(--mc-text-2); font-size: 12px; line-height: 1.5;
}
.mc-loading { animation: mc-loading-pulse 1.1s ease-in-out infinite; }
@keyframes mc-loading-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .mc-loading { animation: none; opacity: 0.7; } }

/* Async pending state on a button (set via aria-busy by the lookup helper while
   it awaits the proxy): pulse so the wait reads as "working", not "stuck". */
button[aria-busy="true"] { animation: mc-loading-pulse 1.1s ease-in-out infinite; cursor: progress; }
@media (prefers-reduced-motion: reduce) { button[aria-busy="true"] { animation: none; opacity: 0.7; } }

.mc-recipe { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mc-recipe-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--r-md);
  font-size: 13px; line-height: 1.5;
  word-break: break-word; overflow-wrap: break-word;
}
.mc-recipe-step strong { word-break: break-all; overflow-wrap: anywhere; }
.mc-step-num {
  flex: none;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: #fff;
}
.mc-formula {
  padding: 10px 14px; background: var(--mc-bg); border: 1px dashed var(--mc-border-2);
  border-radius: var(--r-md); font-size: 12.5px; color: var(--mc-text-2);
  margin-top: 4px; font-family: var(--font-mono);
}

/* pH strip */
.mc-ph-strip-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mc-ph-strip {
  position: relative;
  height: 38px; border-radius: var(--r-md); overflow: visible;
  display: grid; grid-template-columns: repeat(14, 1fr);
  border: 1px solid var(--mc-border-2);
}
.mc-ph-strip > div { height: 38px; }
.mc-ph-strip > div:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.mc-ph-strip > div:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.mc-ph-marker {
  position: absolute; top: -8px; bottom: -8px;
  left: 0; right: auto; width: 0;
  pointer-events: none;
  will-change: left;
  transition: left 0.25s var(--ease-out-quart);
}
.mc-ph-marker::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: oklch(97% 0.008 255);
  box-shadow: 0 0 12px oklch(97% 0.008 255 / 0.75);
  transform: translateX(-1.5px);
}
.mc-ph-marker span {
  position: absolute; bottom: -22px; left: 0; transform: translateX(-50%);
  background: oklch(97% 0.008 255); color: #0A0A12; padding: 2px 6px; border-radius: 3px; /* chip bg is fixed light in both themes — fixed dark ink, not var(--mc-bg) which goes white on light */
  font-size: 11px; font-weight: 700; font-family: var(--font-mono); white-space: nowrap;
}
.mc-ph-scale {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--mc-muted); padding: 0 4px; margin-top: 28px;
  font-family: var(--font-mono);
}

/* NFPA */
.mc-nfpa-field { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--mc-border); }
.mc-nfpa-field:last-of-type { border-bottom: none; }
.mc-nfpa-field-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.mc-nfpa-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.mc-nfpa-desc { font-size: 11px; color: var(--mc-muted); margin-left: auto; font-weight: 400; }
.mc-nfpa-rating { display: flex; gap: 6px; }
.mc-nfpa-btn {
  flex: 1; background: var(--mc-bg); border: 1px solid var(--mc-border-2);
  color: var(--mc-text-2); padding: 10px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  transition: color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.mc-nfpa-btn:hover { border-color: var(--mc-primary); color: var(--mc-text); }
.mc-nfpa-btn.on { color: #fff; border-color: transparent; box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
.mc-nfpa-svg { display: block; max-width: 320px; margin: 0 auto; }
/* Consolidated action bar (clarity pass): every post-result action lives in
   this one row, visually fenced off with a hairline. Visual order is fixed by
   flex `order` so it never depends on which script injected which button. */
.mc-export-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--mc-border-2);
}
.mc-export-row .mc-share-link { order: 1; }
.mc-export-row .mc-report-btn { order: 2; }
.mc-export-row .mc-export-btn { order: 3; }
/* QoL-3 — Copy-as-Markdown sits after Export, before the right-pushed Reset.
   Reset is separated by margin-left:auto, so an equal order + earlier DOM
   position keeps Copy-table in the left cluster. */
.mc-export-row .mc-copy-md    { order: 4; }
.mc-export-row .mc-reset-btn  { order: 4; margin-left: auto; }
.mc-btn-ico { width: 16px; height: 16px; flex: none; }
@media (max-width: 520px) { .mc-export-row .mc-reset-btn { margin-left: 0; } }

.mc-btn-primary, .mc-btn-secondary {
  padding: 10px 18px; border: none; border-radius: var(--r-md); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.04em; transition: transform 0.15s var(--ease-out-quart), box-shadow 0.15s, color 0.15s, border-color 0.15s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.mc-btn-primary {
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2s));
  color: #fff;
  box-shadow: 0 4px 12px var(--mc-primary-glow);
}
.mc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px oklch(55% 0.27 255 / 0.60); color: #fff; }
.mc-btn-primary:active { transform: scale(0.97); }
.mc-btn-primary:disabled, .mc-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.mc-btn-secondary {
  background: var(--mc-surface-2); color: var(--mc-text);
  border: 1px solid var(--mc-border-2);
}
.mc-btn-secondary:hover { border-color: var(--mc-primary); color: var(--mc-text); }

/* Periodic table */
.mc-periodic-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Right-edge fade hint for horizontal scroll — applied only while the table
   actually overflows and hasn't been scrolled to the end. Without the overflow
   gate the mask dimmed the rightmost columns (halogens, noble gases) on wide
   screens where nothing scrolls. */
.mc-periodic-scroll.is-scrollable:not(.scrolled-end) {
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.mc-periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  min-width: 700px;
  grid-auto-rows: minmax(50px, 1fr);
  gap: 3px;
  padding: 16px;
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: var(--r-lg);
}
/* Registered so the heatmap RECOLOUR interpolates instead of snapping: choosing a
   property sweeps a colour wave across the board (staggered by atomic number via
   --z on each cell). A plain custom property can't animate; a typed <color> can. */
@property --heat { syntax: "<color>"; inherits: false; initial-value: transparent; }
.mc-pt-cell {
  position: relative;
  /* Family colour washed over the instrument surface — never the raw saturated
     hue. The tint is what makes the s/p/d/f blocks readable at a glance while the
     violet-black field still shows through. Colour VALUES are locked (like GHS);
     only their prominence changes here. */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 26%, var(--mc-surface)),
      color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 10%, var(--mc-surface)));
  border: 1px solid color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 30%, var(--mc-border));
  border-top: 2px solid color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 78%, transparent);
  border-radius: 5px;
  padding: 4px 4px 3px;
  color: var(--mc-text);
  transition: transform 0.16s var(--ease-out-quart), box-shadow 0.16s,
              border-color 0.16s, filter 0.16s, opacity 0.16s,
              /* heatmap sweep: interpolate the fill + ink, delayed by atomic number */
              --heat 480ms var(--ease-out-expo) calc(var(--z, 0) * 3ms),
              color  360ms var(--ease-out-expo) calc(var(--z, 0) * 3ms);
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  min-height: 50px;
  text-align: left;
  cursor: pointer;
}
.mc-pt-cell:hover {
  transform: translateY(-2px) scale(1.06); z-index: 5;
  filter: brightness(1.28) saturate(1.12);
  border-color: color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 65%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.mc-pt-cell.sel {
  background: linear-gradient(180deg, var(--mc-primary), var(--mc-primary-deep));
  border-color: var(--mc-primary-2);
  border-top-color: var(--mc-primary-3);
  color: #fff; z-index: 6;
  box-shadow: 0 0 0 2px var(--mc-bg),
              0 0 0 4px oklch(55% 0.27 255 / 0.55),
              0 8px 22px oklch(55% 0.27 255 / 0.35);
}
.mc-pt-cell.sel .mc-pt-num,
.mc-pt-cell.sel .mc-pt-mass { color: oklch(90% 0.04 255); }
/* Legend filter: cells outside the spotlighted family recede; hovering one still
   brings it forward so the board stays explorable. */
.mc-pt-cell.pt-dim { opacity: 0.16; filter: saturate(0.45); }
.mc-pt-cell.pt-dim:hover { opacity: 1; filter: brightness(1.28) saturate(1.12); }
.mc-pt-cell.pt-heat { background: var(--heat) !important; --cat-color: var(--heat); }
.mc-pt-cell.pt-heat-missing { opacity: .35; }
/* Non-interactive marker that fills the group-3 gap in periods 6–7, pointing to
   the detached lanthanide/actinide block below. */
.mc-pt-marker {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 4px;
  border: 1px dashed color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 48%, var(--mc-border-2));
  border-radius: 5px;
  background: color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 9%, transparent);
  color: color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 55%, var(--mc-text-2));
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  cursor: default; user-select: none;
}
.mc-pt-cell.has-stock::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mc-success);
  box-shadow: 0 0 6px var(--mc-success);
}
.mc-pt-num { font-size: 9px; color: var(--mc-text-2); }
.mc-pt-sym { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1;
  letter-spacing: -0.01em; margin-top: 1px; }
.mc-pt-mass { font-size: 8.5px; color: var(--mc-muted); }

.mc-pt-stock {
  background: var(--mc-bg); border: 1px solid var(--mc-success); border-radius: var(--r-md);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.mc-pt-stock-head { font-family: var(--font-mono); font-size: 10px; color: var(--mc-success);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.mc-pt-stock-name { font-weight: 600; font-size: 14px; color: var(--mc-text); }
.mc-pt-stock-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--mc-text-2); font-family: var(--font-mono); }
.mc-pt-stock-price { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--mc-primary-2); }
.mc-pt-nostock {
  padding: 16px; background: var(--mc-bg); border: 1px dashed var(--mc-border-2); border-radius: var(--r-md);
  font-size: 13px; color: var(--mc-muted); display: flex; flex-direction: column; gap: 10px; text-align: center;
}
.mc-pt-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mc-pt-legend-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.01em;
  color: var(--mc-text-2); background: var(--mc-surface);
  border: 1px solid var(--mc-border); border-radius: 100px;
  padding: 5px 11px 5px 9px; cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s, transform 0.14s;
}
.mc-pt-legend-btn:hover { color: var(--mc-text); transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--lg-color, var(--mc-border-2)) 55%, var(--mc-border-2)); }
.mc-pt-legend-btn[aria-pressed="true"] {
  color: var(--mc-text);
  background: color-mix(in oklab, var(--lg-color, var(--mc-primary)) 16%, var(--mc-surface));
  border-color: color-mix(in oklab, var(--lg-color, var(--mc-primary)) 58%, transparent);
}
.mc-pt-legend-btn:focus-visible { outline: none;
  box-shadow: 0 0 0 3px oklch(55% 0.27 255 / 0.45); }
.mc-pt-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mc-pt-legend-hint { font-family: var(--font-mono); font-size: 10px; color: var(--mc-muted);
  margin-left: 2px; }

/* Full-bleed periodic grid: break out of the tool-page container width. */
.mc-periodic-fullbleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.mc-periodic-fullbleed .mc-periodic-grid {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}
.mc-pt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 14px 0 10px;
}
.mc-pt-mode {
  font: inherit; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--mc-border); background: var(--mc-surface-2);
  color: var(--mc-text); cursor: pointer;
}
.mc-pt-mode.is-active { border-color: var(--mc-primary); color: var(--mc-primary); }
.mc-pt-mode-heat { display: inline-flex; align-items: center; gap: 8px; color: var(--mc-text-2); }
.mc-pt-heat-sel { font: inherit; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--mc-border); background: var(--mc-surface-2); color: var(--mc-text); }
.mc-pt-heat-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mc-text-2); }
.mc-pt-heat-legend[hidden] { display: none; }
.mc-pt-heat-legend .bar { width: 120px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--mc-heat-lo), var(--mc-heat-hi)); }

/* Detail dialog (native <dialog>, glass, theme-aware). */
.mc-pt-dialog {
  /* Centre in the top layer; a global reset zeroes the UA margin:auto, so restore it. */
  margin: auto; inset: 0;
  width: min(680px, calc(100vw - 32px)); max-height: 88vh; overflow: auto;
  overscroll-behavior: contain; /* M2: don't scroll-chain to the page behind */
  padding: 0; border: 1px solid var(--mc-border); border-radius: 16px;
  background: var(--mc-surface); color: var(--mc-text);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.mc-pt-dialog::backdrop { background: rgba(5,6,12,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mc-pt-dialog-close {
  position: sticky; top: 8px; float: right; margin: 8px 8px 0;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--mc-border);
  background: var(--mc-surface-2); color: var(--mc-text); font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}
.mc-pt-dhead { display: flex; gap: 16px; align-items: center; padding: 22px 24px;
  border-bottom: 1px solid var(--mc-border);
  background: color-mix(in srgb, var(--cat-color) 16%, transparent); }
.mc-pt-dnum { font-size: 15px; color: var(--mc-text-2); align-self: flex-start; }
.mc-pt-dsym { font-size: 44px; font-weight: 700; line-height: 1; }
.mc-pt-dname { font-size: 20px; margin-top: 2px; }
.mc-pt-dmass { font-size: 13px; color: var(--mc-text-2); margin-top: 4px; }
.mc-pt-predicted { font-size: 11px; color: var(--mc-text-2); margin-top: 4px; font-style: italic; }
.mc-pt-summary { margin: 0; padding: 16px 24px; color: var(--mc-text); line-height: 1.55; }
.mc-pt-sec { padding: 14px 24px; border-top: 1px solid var(--mc-border); }
.mc-pt-sec h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--mc-text-2); }
.mc-pt-sec dl { margin: 0; display: grid; gap: 6px; }
.mc-pt-row { display: grid; grid-template-columns: minmax(140px, 42%) 1fr; gap: 12px; align-items: baseline; }
.mc-pt-row dt { color: var(--mc-text-2); }
.mc-pt-row dd { margin: 0; }
.mc-pt-u { color: var(--mc-text-2); font-size: .9em; }
.mc-pt-unitwrap { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: middle; }
.mc-pt-unit { font: inherit; font-size: 11px; padding: 2px 7px; border: 1px solid var(--mc-border);
  background: transparent; color: var(--mc-text-2); border-radius: 6px; cursor: pointer; }
.mc-pt-unit.on { border-color: var(--mc-primary); color: var(--mc-primary); }
.mc-pt-bohr { display: block; width: 220px; max-width: 100%; height: auto; margin: 12px auto 4px; }
.mc-pt-bohr .bohr-ring { fill: none; stroke: var(--mc-border-2); stroke-width: 1; }
.mc-pt-bohr .bohr-core { fill: var(--mc-primary); }
.mc-pt-bohr .bohr-sym { fill: #fff; font-size: 15px; font-weight: 700; }
.mc-pt-bohr .bohr-e { fill: var(--mc-primary); }
.mc-pt-tempbar { margin: 10px 0 2px; }
.mc-pt-tempbar-track { position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg,#2563eb,#22d3ee,#facc15,#f97316,#ef4444); }
.mc-pt-tempmark { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--mc-text);
  transform: translateX(-1px); }
.mc-pt-tempmark.boil { background: #fff; box-shadow: 0 0 0 1px #000; }
.mc-pt-tempbar-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--mc-text-2); margin-top: 3px; }
@media (max-width: 520px) { .mc-pt-row { grid-template-columns: 1fr; gap: 2px; } }

/* CAS */
.mc-cas-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-top: 20px; }
.mc-cas-card {
  background: var(--mc-surface); border: 1px solid var(--mc-border);
  border-radius: var(--r-md); padding: 16px;
  transition: border-color 0.15s;
}
.mc-cas-card:hover { border-color: var(--mc-primary); }
.mc-cas-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--mc-border); }
.mc-cas-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.mc-cas-iupac { font-size: 11px; color: var(--mc-text-2); margin-top: 2px; }
.mc-cas-cas {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--mc-primary-2); background: var(--mc-bg);
  padding: 4px 8px; border-radius: 4px; border: 1px solid var(--mc-primary);
  flex-shrink: 0; white-space: nowrap;
}
.mc-cas-grid { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; font-size: 11.5px; font-family: var(--font-mono); }
.mc-cas-grid > span:nth-child(odd) { color: var(--mc-muted); }

.mc-empty { padding: 30px; text-align: center; color: var(--mc-muted); font-size: 13px; }

/* feature row */
.mc-feature-strip {
  background: linear-gradient(135deg, oklch(55% 0.27 255 / 0.08), oklch(68% 0.22 255 / 0.04));
  border: 1px solid var(--mc-border);
  border-radius: var(--r-lg);
  padding: 36px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 48px;
}
@media (max-width: 880px) {
  .mc-feature-strip { grid-template-columns: repeat(2, 1fr); }
  .mc-feature:nth-child(1), .mc-feature:nth-child(2) { border-bottom: 1px solid var(--mc-border); padding-bottom: 32px; margin-bottom: 0; }
  .mc-feature:nth-child(n+3) { padding-top: 32px; }
  /* reset border-top from nth-child(3) on 2-col when there's already a left divider */
  .mc-feature:nth-child(2n+1) { border-left: none; padding-left: 32px; }
  .mc-feature:nth-child(2n) { padding-left: 28px; }
}
.mc-feature {
  padding: 0 32px;
  border-left: 1px solid var(--mc-border);
}
.mc-feature:first-child { border-left: none; padding-left: 32px; }
.mc-feature h3 { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.mc-feature h3 span {
  font-family: var(--font-mono); font-size: 10px; color: var(--mc-primary-2);
  background: oklch(55% 0.27 255 / 0.15); padding: 2px 6px; border-radius: 4px;
}
.mc-feature p { font-size: 12.5px; color: var(--mc-text-2); line-height: 1.6; }

/* methodology block on tool pages */
.mc-method { margin-top: 56px; max-width: 920px; }
.mc-method h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin-bottom: 14px; letter-spacing: -0.01em; }
.mc-method p { color: var(--mc-text-2); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.mc-method ul { list-style: none; padding: 0; margin: 12px 0 24px; }
.mc-method li { color: var(--mc-text-2); font-size: 13.5px; line-height: 1.7; padding-left: 24px; position: relative; margin-bottom: 8px; }
.mc-method li::before { content: "→"; position: absolute; left: 0; color: var(--mc-primary-2); font-family: var(--font-mono); }
.mc-method h3 { font-family: var(--font-display); font-weight: 700; font-size: 11px; margin: 28px 0 10px; color: var(--mc-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mc-method a { color: var(--mc-primary-2); text-decoration: underline; text-decoration-color: var(--mc-border-2); text-underline-offset: 3px; }
.mc-method a:hover { text-decoration-color: var(--mc-primary-2); }

/* ── "How to use" explainer ─────────────────────────────────────────────
   Plain-language usage guide. Native <details> so it is keyboard-accessible,
   needs no JS, and ships inside the HTML (search-engine visible, survives a
   script failure). Sits between the tool header and the tool; collapsed by
   default so the result stays front-and-centre. */
.mc-howto {
  margin-bottom: 24px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--r-md);
  interpolate-size: allow-keywords; /* lets the height:auto disclosure below animate */
}
.mc-howto[open] { border-color: var(--mc-border-2); }
/* Animate the disclosure open/close where supported (::details-content). Pure
   progressive enhancement: browsers without ::details-content just snap, as before. */
.mc-howto::details-content {
  height: 0; overflow: hidden;
  transition: height 240ms var(--ease-out-quart), content-visibility 240ms allow-discrete;
}
.mc-howto[open]::details-content { height: auto; }
.mc-howto-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--mc-text-2); letter-spacing: 0.01em;
  -webkit-user-select: none; user-select: none;
}
.mc-howto-summary::-webkit-details-marker { display: none; }
.mc-howto-summary:hover { color: var(--mc-text); }
.mc-howto-summary:focus-visible { outline: 2px solid var(--mc-primary-2); outline-offset: -2px; border-radius: var(--r-md); }
.mc-howto-icon {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mc-surface-2); border: 1px solid var(--mc-border-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--mc-primary-2);
}
.mc-howto-chevron {
  margin-left: auto; color: var(--mc-muted); font-size: 11px;
  transition: transform 0.18s var(--ease-out-quart);
}
.mc-howto[open] .mc-howto-chevron { transform: rotate(90deg); }
.mc-howto-body { padding: 0 16px 16px; border-top: 1px solid var(--mc-border); }
.mc-howto-intro { color: var(--mc-text); font-size: 14px; line-height: 1.6; padding-top: 14px; }
.mc-howto-body h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--mc-muted); text-transform: uppercase; letter-spacing: 0.08em;
  margin: 18px 0 2px;
}
.mc-howto-body ul { list-style: none; padding: 0; margin: 0; }
.mc-howto-body li {
  color: var(--mc-text-2); font-size: 13.5px; line-height: 1.65;
  padding-left: 16px; position: relative; margin-top: 7px;
}
.mc-howto-body li::before { content: "·"; position: absolute; left: 3px; color: var(--mc-primary-2); font-weight: 700; }
.mc-howto-body li strong { color: var(--mc-text); font-weight: 600; }
.mc-howto-body p { color: var(--mc-text-2); font-size: 13.5px; line-height: 1.65; margin-top: 8px; }
.mc-howto-example {
  background: var(--mc-bg); border: 1px dashed var(--mc-border-2);
  border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; margin-top: 8px;
}
.mc-howto-body .mono { color: var(--mc-text); }
@media (prefers-reduced-motion: reduce) {
  .mc-howto-chevron { transition: none; }
  .mc-howto::details-content { transition: none; }
}

/* FAQ accordion — mirrors .mc-howto, one disclosure per question.
   Generated by dev/seo/gen-schema.js; content mirrors the FAQPage JSON-LD. */
/* Aligned to the same container + gutter + rhythm as .mc-section, but kept
   visually distinct: a quiet label heading (not the NN / section-head) and a
   capped reading measure so it reads as a calm closing block, not a section. */
.mc-faq { max-width: var(--container); margin: var(--sp-8) auto 0; padding: 0 var(--gutter); }
.mc-faq-h {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--mc-text-2); letter-spacing: 0.01em; margin: 0 0 var(--sp-3);
}
.mc-faq-item {
  max-width: 760px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  interpolate-size: allow-keywords;
}
.mc-faq-item[open] { border-color: var(--mc-border-2); }
.mc-faq-item::details-content {
  height: 0; overflow: hidden;
  transition: height 240ms var(--ease-out-quart), content-visibility 240ms allow-discrete;
}
.mc-faq-item[open]::details-content { height: auto; }
.mc-faq-q {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--mc-text); letter-spacing: 0.01em;
  -webkit-user-select: none; user-select: none;
}
.mc-faq-q::-webkit-details-marker { display: none; }
.mc-faq-q:hover { color: var(--mc-primary-2); }
.mc-faq-q:focus-visible { outline: 2px solid var(--mc-primary-2); outline-offset: -2px; border-radius: var(--r-md); }
.mc-faq-chevron {
  margin-left: auto; color: var(--mc-muted); font-size: 11px;
  transition: transform 0.18s var(--ease-out-quart);
}
.mc-faq-item[open] .mc-faq-chevron { transform: rotate(90deg); }
.mc-faq-a { padding: 0 16px 14px; border-top: 1px solid var(--mc-border); }
.mc-faq-a p { color: var(--mc-text-2); font-size: 13.5px; line-height: 1.65; margin: 12px 0 0; }
.mc-faq-a a { color: var(--mc-primary-2); text-decoration: none; border-bottom: 1px solid transparent; }
.mc-faq-a a:hover { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .mc-faq-chevron { transition: none; }
  .mc-faq-item::details-content { transition: none; }
}

/* coming-soon island */
.mc-soon {
  margin: 32px 0;
  border: 1px dashed var(--mc-border-2);
  background: linear-gradient(180deg, var(--mc-surface), var(--mc-bg-2));
  border-radius: var(--r-lg);
  padding: 56px 28px;
  text-align: center;
}
.mc-soon-icon { font-family: var(--font-display); font-size: 48px; color: var(--mc-primary-2); margin-bottom: 14px; opacity: 0.6; }
.mc-soon h2, .mc-soon h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--mc-text); margin-bottom: 10px; }
.mc-soon p { color: var(--mc-text-2); font-size: 14px; max-width: 480px; margin: 0 auto 24px; line-height: 1.55; }
.mc-soon-cta { display: inline-flex; align-items: center; gap: 6px; }

/* responsive */
@media (max-width: 600px) {
  .mc-hero { padding: 40px var(--gutter-m) 32px; }
  .mc-breadcrumb-bar { padding: 14px var(--gutter-m) 0; }
  .mc-section { padding: 0 var(--gutter-m); }
  .mc-faq { padding: 0 var(--gutter-m); }
  .mc-tool-page { padding: 24px var(--gutter-m) 56px; }
  .mc-filter-bar { padding: 12px var(--gutter-m); top: var(--topbar-h); flex-wrap: nowrap; }
  .mc-periodic-grid { grid-auto-rows: 42px; min-width: 720px; padding: 8px; gap: 3px; }
  .mc-pt-sym { font-size: 12px; }
  .mc-pt-num, .mc-pt-mass { display: none; }
  .mc-tool-header h1 { font-size: 28px; }
  .mc-hero-meta { gap: 0; flex-wrap: wrap; }
  .mc-hero-meta-item { padding: 3px 14px 3px 0; }
  .mc-hero-meta-item:not(:first-child) { padding-left: 14px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  body { opacity: 1; animation: none; }
  .mc-reveal { opacity: 1; transform: none; }
}

/* ── Feature strip: single column at very small screens ─────────────────
   2×256px columns are too narrow for comfortable reading at 580px and below.
   Flip dividers from left-border to top-border in this context.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mc-feature-strip {
    grid-template-columns: 1fr;
    padding: 28px 0;
  }
  .mc-feature {
    border-left: none;
    border-top: 1px solid var(--mc-border);
    padding: 24px 28px;
  }
  .mc-feature:first-child { border-top: none; }
  /* reset the 880px nth-child rules that don't apply at 1-col */
  .mc-feature:nth-child(1),
  .mc-feature:nth-child(2) { border-bottom: none; padding-bottom: 0; }
}

/* ── Landscape mobile: prevent hero from dominating the fold ─────────────
   iPhone SE landscape is 568px wide × 320px tall.
   72px vertical hero padding + sticky bar would eat the entire viewport.
   ─────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .mc-hero { padding: 28px 28px 20px; }
  .mc-hero h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
  .mc-hero > p { margin-top: 12px; font-size: 15px; }
  .mc-hero-meta { margin-top: 16px; }
}

/* ── Touch target sizing ─────────────────────────────────────────────────
   44×44px minimum for pointer-coarse devices (phones, tablets).
   Desktop hover states remain unchanged — scope is deliberately narrow.
   ─────────────────────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .mc-icon-btn   { width: 44px; height: 44px; }
  .mc-hamburger  { width: 44px; height: 44px; }
  .mc-filter-pill { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .mc-tab        { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .mc-back-link  { min-height: 44px; }
  .mc-btn-primary, .mc-btn-secondary { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .mc-nfpa-btn   { min-height: 48px; }
  .mc-chip       { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  /* Inputs: at least 44px tall so tapping is comfortable */
  .mc-input      { min-height: 44px; }
  /* Remove hover-only interaction hints that don't work on touch */
  .mc-icon-btn:hover { transform: none; }
  .mc-back-link:hover svg { transform: none; }
  .mc-topnav a.mc-topnav-store:hover { transform: none; }
  .mc-tool-card:hover { transform: none; }
}

/* coming-soon links */
.mc-coming-soon { opacity: 0.45 !important; cursor: not-allowed !important; }
.mc-coming-soon:hover { opacity: 0.55 !important; color: inherit !important; transform: none !important; }

/* ── Live search dropdown ─────────────────────────────────────────────────── */
#mc-live-results {
  display: none;
  position: absolute;
  z-index: var(--z-overlay);
  background: var(--mc-surface);
  border: 1px solid var(--mc-border-2);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mc-border-2) transparent;
}
#mc-live-results::-webkit-scrollbar { width: 8px; }
#mc-live-results::-webkit-scrollbar-thumb { background: var(--mc-border-2); border-radius: 999px; }
.mc-live-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; color: var(--mc-text);
  transition: background 0.1s;
  border-bottom: 1px solid var(--mc-border);
}
.mc-live-item:last-child { border-bottom: none; }
.mc-live-item:hover { background: var(--mc-surface-2); }
.mc-live-item:focus-visible { background: var(--mc-surface-2); outline: 2px solid var(--mc-primary-2); outline-offset: -2px; }
.mc-live-item.is-active { background: var(--mc-surface-2); box-shadow: inset 2px 0 0 var(--mc-primary-2); }
.mc-live-icon {
  flex: none; width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--mc-primary-deep), var(--mc-primary));
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff;
}
.mc-live-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-live-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-live-sub { font-size: 11px; color: var(--mc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-live-cat {
  flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--mc-primary-2); letter-spacing: 0.08em; text-transform: uppercase;
}
.mc-live-status {
  padding: 18px 14px; text-align: center; font-size: 13px; color: var(--mc-muted);
}
.mc-live-status em { color: var(--mc-text-2); font-style: normal; }

/* print */
/* Print-only provenance line (injected by chrome.js); hidden on screen. */
.mc-print-meta { display: none; }

@media print {
  /* Ink-friendly: override the dark screen theme with a light document. */
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #111 !important; }

  /* Strip everything that isn't the tool's inputs + result. The printout is a
     record card: tool name, the values entered, and the computed result —
     NOT the methodology, how-to, tab bar, or site chrome. (Tools with a bespoke
     print, e.g. nfpa's diamond, narrow this further via page-scoped rules.) */
  body::before, #mc-molecular-bg, .skip-link, .mc-consent, .mc-topbar,
  .mc-filter-bar, .mc-footer, .mc-breadcrumb-bar, .mc-back-link,
  .mc-export-row, .mc-hamburger, .mc-search, .mc-topnav, .mc-howto,
  .mc-copy, .mc-share-link, .mc-coming-soon, #mc-live-results,
  .mc-method, .mc-tabs, .mc-print-btn { display: none !important; }

  main, #main { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .mc-tool-page, .mc-tool-grid { display: block !important; }

  /* Flatten cards into clean bordered blocks; keep each whole on a page. */
  .mc-card, .mc-result, .mc-card-emphasis, .mc-table-wrap, .mc-recipe {
    background: #fff !important; color: #111 !important;
    border-color: #ccc !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3, h4, p, li, td, th,
  .mc-result-label, .mc-result-value, .mono, .mc-formula, .mc-subtitle { color: #111 !important; }
  a { color: #111 !important; text-decoration: none !important; }
  .mc-tool-header h1 { page-break-after: avoid; }

  /* Preserve real colour where it carries meaning (hazard placards, labels). */
  svg, img, #mc-nfpa-preview, #mc-ghs-label, .mc-pt-cell {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .mc-print-meta {
    display: block !important; margin-top: 16px; padding-top: 8px;
    border-top: 1px solid #ccc; font-size: 10px; color: #555 !important;
  }

  /* NFPA 704: the Print button outputs ONLY the hazard diamond — drop the
     controls card, the methodology, and the preview card's title/summary/note. */
  body[data-page="nfpa"] .mc-method,
  body[data-page="nfpa"] .mc-tool-grid > .mc-card:not(.mc-card-center),
  body[data-page="nfpa"] #mc-nfpa-summary,
  body[data-page="nfpa"] .mc-card-center .mc-card-title,
  body[data-page="nfpa"] .mc-card-center .mc-result-note { display: none !important; }
  body[data-page="nfpa"] .mc-tool-grid { display: block !important; }
  body[data-page="nfpa"] .mc-card-center {
    min-height: 0 !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM
   Product register: 150–250 ms state changes, purposeful entrances only.
   Motion conveys state — feedback, reveal, transition between views.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Shared keyframes ────────────────────────────────────────────────── */
@keyframes mc-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mc-card-hide {
  to { opacity: 0; transform: scale(0.95); }
}
@keyframes mc-card-show {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: none; }
}

/* ── Hero entrance (homepage, staggered) ─────────────────────────────── */
.mc-hero-eyebrow { animation: mc-fade-up 500ms var(--ease-out-expo)  80ms both; }
.mc-hero h1      { animation: mc-fade-up 540ms var(--ease-out-expo) 180ms both; }
.mc-hero > p     { animation: mc-fade-up 460ms var(--ease-out-expo) 300ms both; }
.mc-hero-cta     { animation: mc-fade-up 420ms var(--ease-out-expo) 420ms both; }
.mc-hero-meta    { animation: mc-fade-up 380ms var(--ease-out-expo) 520ms both; }

/* ── Tool-page entrance ──────────────────────────────────────────────── */
.mc-back-link   { animation: mc-fade-up 320ms var(--ease-out-quart)  20ms both; }
.mc-tool-header { animation: mc-fade-up 440ms var(--ease-out-expo)   80ms both; }
.mc-tool-grid > .mc-card:nth-child(1) { animation: mc-fade-up 400ms var(--ease-out-expo) 200ms both; }
.mc-tool-grid > .mc-card:nth-child(2) { animation: mc-fade-up 400ms var(--ease-out-expo) 280ms both; }
.mc-tool-grid > .mc-card:nth-child(3) { animation: mc-fade-up 400ms var(--ease-out-expo) 360ms both; }
.mc-tool-grid > .mc-card:nth-child(4) { animation: mc-fade-up 400ms var(--ease-out-expo) 440ms both; }

/* ── Tool-card stagger on scroll reveal ──────────────────────────────── */
/* JS in index.html sets --mc-i per card; nth-child is the no-JS fallback. */
.mc-tools-grid .mc-reveal { transition-delay: calc(min(var(--mc-i, 0), 10) * 40ms); }
.mc-tools-grid .mc-reveal:nth-child(1)    { --mc-i: 0; }
.mc-tools-grid .mc-reveal:nth-child(2)    { --mc-i: 1; }
.mc-tools-grid .mc-reveal:nth-child(3)    { --mc-i: 2; }
.mc-tools-grid .mc-reveal:nth-child(4)    { --mc-i: 3; }
.mc-tools-grid .mc-reveal:nth-child(5)    { --mc-i: 4; }
.mc-tools-grid .mc-reveal:nth-child(6)    { --mc-i: 5; }
.mc-tools-grid .mc-reveal:nth-child(7)    { --mc-i: 6; }
.mc-tools-grid .mc-reveal:nth-child(8)    { --mc-i: 7; }
.mc-tools-grid .mc-reveal:nth-child(9)    { --mc-i: 8; }
.mc-tools-grid .mc-reveal:nth-child(n+10) { --mc-i: 9; }

/* Improve section-level reveal easing */
.mc-section.mc-reveal {
  transition: opacity 0.55s var(--ease-out-quart), transform 0.55s var(--ease-out-quart);
}

/* ── Filter card transitions ─────────────────────────────────────────── */
.mc-tool-card.is-hiding {
  animation: mc-card-hide 160ms var(--ease-out-quart) both;
  pointer-events: none;
}
.mc-tool-card.is-showing {
  animation: mc-card-show 220ms var(--ease-out-expo) both;
}

/* ── Result pop-in (fires on DOM insertion via @starting-style) ──────── */
.mc-result-big {
  transition: opacity 280ms var(--ease-out-expo), transform 280ms var(--ease-out-expo);
}
@starting-style {
  .mc-result-big { opacity: 0; transform: scale(0.97) translateY(8px); }
  /* Only the FIRST computation pops in. Tools rebuild .mc-result-big on every
     recompute, which would replay this entrance and read as a whole-box flash.
     Once JS marks the (persistent) container .mc-computed after the first paint,
     later result boxes start from the settled state — so recompute rolls only the
     digits. More specific than the rule above, so it wins inside @starting-style. */
  .mc-computed .mc-result-big { opacity: 1; transform: none; }
}

/* ── Recipe-step stagger (fires on DOM insertion via @starting-style) ── */
.mc-recipe-step {
  transition: opacity 260ms var(--ease-out-quart), transform 260ms var(--ease-out-quart);
}
.mc-recipe-step:nth-child(1) { transition-delay:   0ms; }
.mc-recipe-step:nth-child(2) { transition-delay:  55ms; }
.mc-recipe-step:nth-child(3) { transition-delay: 110ms; }
.mc-recipe-step:nth-child(4) { transition-delay: 165ms; }
@starting-style {
  .mc-recipe-step { opacity: 0; transform: translateY(8px); }
}

/* ── Interactive feedback ─────────────────────────────────────────────── */
.mc-filter-pill { transition: background 0.15s var(--ease-out-quart), border-color 0.15s var(--ease-out-quart), color 0.15s var(--ease-out-quart), transform 0.15s var(--ease-out-quart); }
.mc-filter-pill:active  { transform: scale(0.96); }

.mc-btn-secondary:active { transform: scale(0.98); }
.mc-chip:active  { transform: scale(0.97); }
.mc-nfpa-btn:active { transform: scale(0.97); }

/* Better card hover easing */
.mc-tool-card {
  transition:
    transform 0.18s var(--ease-out-quart),
    border-color 0.18s,
    box-shadow 0.22s var(--ease-out-quart),
    opacity 0.18s;
}
.mc-tool-card::before { transition: opacity 0.22s var(--ease-out-quart); }

/* Icon buttons: lift on hover */
.mc-icon-btn { transition: transform 0.15s var(--ease-out-quart), color 0.15s, border-color 0.15s; }
.mc-icon-btn:hover { transform: translateY(-1px); }

/* Back-link: arrow slides left on hover */
.mc-back-link svg { transition: transform 180ms var(--ease-out-quart); display: inline-block; }
.mc-back-link:hover svg { transform: translateX(-3px); }

/* ── Breadcrumb: quick fade-up on page load ──────────────────────────── */
.mc-breadcrumb-bar {
  animation: mc-fade-up 280ms var(--ease-out-quart) 0ms both;
}

/* ── Coming-soon icon: gentle float ─────────────────────────────────── */
@keyframes mc-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
.mc-soon-icon {
  animation: mc-float 3s ease-in-out infinite;
}

/* ── Method section: auto scroll-reveal via JS + IntersectionObserver ── */
.mc-method-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease-out-expo), transform 0.65s var(--ease-out-expo);
}
.mc-method-reveal.is-visible { opacity: 1; transform: none; }

/* ── Molecular background canvas ─────────────────────────────────────── */
/* Sits behind all content, z-index 0 (same as body::before hex grid).  */
/* body.mc-has-canvas-bg class fades the static hex out once canvas runs.*/
#mc-molecular-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
body::before {
  transition: opacity 0.8s;
}
body.mc-has-canvas-bg::before {
  opacity: 0;
}

/* ── NFPA preview: SVG scale-in on re-render ─────────────────────────── */
#mc-nfpa-preview > svg {
  display: block;
  transition: opacity 200ms var(--ease-out-expo), transform 200ms var(--ease-out-expo);
}
@starting-style {
  #mc-nfpa-preview > svg { opacity: 0; transform: scale(0.93); }
}

/* ── CAS result cards: staggered entrance ────────────────────────────── */
.mc-cas-card {
  transition: opacity 300ms var(--ease-out-expo), transform 300ms var(--ease-out-expo), border-color 0.15s;
}
.mc-cas-card:nth-child(1) { transition-delay:   0ms; }
.mc-cas-card:nth-child(2) { transition-delay:  55ms; }
.mc-cas-card:nth-child(3) { transition-delay: 110ms; }
.mc-cas-card:nth-child(4) { transition-delay: 165ms; }
.mc-cas-card:nth-child(n+5) { transition-delay: 220ms; }
@starting-style {
  .mc-cas-card { opacity: 0; transform: translateY(12px); }
}

/* ── Form fields: stagger on tab switch / initial render ─────────────── */
/* Fires via @starting-style because renderForm() recreates these in DOM   */
.mc-field {
  transition: opacity 200ms var(--ease-out-expo), transform 200ms var(--ease-out-expo);
}
.mc-field:nth-child(1) { transition-delay:  0ms; }
.mc-field:nth-child(2) { transition-delay: 42ms; }
.mc-field:nth-child(3) { transition-delay: 84ms; }
.mc-field:nth-child(4) { transition-delay: 126ms; }
@starting-style {
  .mc-field { opacity: 0; transform: translateY(5px); }
}

/* ── Formula block entrance ──────────────────────────────────────────── */
.mc-formula {
  transition: opacity 220ms var(--ease-out-expo), transform 220ms var(--ease-out-expo);
}
@starting-style {
  .mc-formula { opacity: 0; transform: translateY(4px); }
}

/* ── pH strip fade-in on render ──────────────────────────────────────── */
.mc-ph-strip-wrap {
  transition: opacity 280ms var(--ease-out-expo);
}
@starting-style {
  .mc-ph-strip-wrap { opacity: 0; }
}

/* ── Reduced-motion overrides ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Entrance animations: show immediately, no motion */
  .mc-hero-eyebrow, .mc-hero h1, .mc-hero > p,
  .mc-hero-cta, .mc-hero-meta,
  .mc-back-link, .mc-tool-header,
  .mc-tool-grid > .mc-card,
  .mc-breadcrumb-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* @starting-style transitions: skip */
  .mc-result-big,
  .mc-recipe-step,
  .mc-cas-card,
  .mc-field,
  .mc-formula,
  .mc-ph-strip-wrap,
  .mc-method-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #mc-nfpa-preview > svg { transition: none !important; opacity: 1 !important; transform: none !important; }
  .mc-soon-icon { animation: none !important; }
  .mc-panel-in { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   CINEMATIC: page-to-page transitions
   Navigating between tools (or the homepage) morphs instead of cutting. The old
   per-result "settle" (headline specular sweep + molecular-field ripple) was
   retired — a recompute now rolls only the odometer digits. Motion-safe: the
   guards below neutralise every transition under prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════════ */

/* Cross-document page transitions: navigating between any two tools (or the
   homepage) morphs instead of cutting. Every page opts in through this one
   stylesheet. Unsupported browsers (Firefox) fall back to an instant nav. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mc-vt-out 200ms var(--ease-out-quart) both; }
::view-transition-new(root) { animation: mc-vt-in  360ms var(--ease-out-expo)  both; }
@keyframes mc-vt-out { to   { opacity: 0; } }
@keyframes mc-vt-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Same-document morph: a periodic cell grows into its detail dialog (driven by
   periodic.js). Suppress the root cross-fade so only the named pair animates. */
html.mc-pt-vt::view-transition-old(root),
html.mc-pt-vt::view-transition-new(root) { animation: none; }
::view-transition-group(pt-morph) { animation-duration: 340ms; animation-timing-function: var(--ease-out-expo); }

/* Cross-document morph: the clicked home tool card (named in index.html on click)
   grows into this tool's header. One .mc-tool-header per tool page keeps the name
   unique; the homepage has none, so a home->tool nav pairs card with header. */
.mc-tool-header { view-transition-name: tool-hero; }

/* Flagship (Molecular Weight): the breakdown table cascades in row-by-row and
   the combustion bars sweep out from the left. Scoped to the page so the rest of
   the suite keeps its quieter result render. @starting-style fires because each
   render replaces these nodes. scaleX (not width) keeps the bars off the layout. */
body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr {
  transition: opacity 280ms var(--ease-out-expo), transform 280ms var(--ease-out-expo);
}
body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr:nth-child(1) { transition-delay:  40ms; }
body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr:nth-child(2) { transition-delay:  85ms; }
body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr:nth-child(3) { transition-delay: 130ms; }
body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr:nth-child(4) { transition-delay: 175ms; }
body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr:nth-child(5) { transition-delay: 220ms; }
body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr:nth-child(n+6) { transition-delay: 260ms; }
body[data-page="molar-mass"] #mc-result-region .mc-bar-fill {
  transform-origin: left center;
  transition: transform 620ms var(--ease-out-expo);
}
@starting-style {
  body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr { opacity: 0; transform: translateY(6px); }
  body[data-page="molar-mass"] #mc-result-region .mc-bar-fill { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .mc-pt-cell { transition: none !important; }   /* heatmap recolours instantly */
  body[data-page="molar-mass"] #mc-result-region .mc-table tbody tr,
  body[data-page="molar-mass"] #mc-result-region .mc-bar-fill {
    transition: none !important; opacity: 1 !important; transform: none !important;
  }
}