/* =============================================================================
   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'),
       url('assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  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'),
       url('assets/fonts/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
  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'),
       url('assets/fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   Sourced from colors_and_type.css + tools dark-purple overlay (HANDOFF §3).
   This site is dark-only — no [data-theme="light"] block exists.
   ─────────────────────────────────────────────────────────────────────────── */
: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-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) */

  /* 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;

  /* 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;

  /* 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; }

* , *::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: rgba(15,15,27,0.97);
  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-2));
  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: 560px) {
  .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: rgba(15,15,27,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mc-border);
  padding: 16px 28px;
  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; }
@media (max-width: 600px) { .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; display: block; }
.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-2));
  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-icon-btn-badge {
  position: absolute; top: -5px; right: -5px;
  background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-2));
  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-2));
  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); }
/* 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: 980px) { .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; }
  .mc-topnav, .mc-topnav-store { display: none; }
  .mc-hamburger { display: inline-flex; }
  .mc-topnav.is-open {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(15,15,27,0.98); 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);
  }
}

/* Breadcrumb */
.mc-breadcrumb-bar {
  max-width: var(--container); margin: 0 auto; padding: 14px 28px 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: 96px; padding: 48px 28px 28px;
  border-top: 1px solid var(--mc-border);
  background: linear-gradient(180deg, transparent, oklch(55% 0.27 255 / 0.04));
  position: relative; z-index: 1;
}
.mc-footer-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 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-legal-links {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.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; }

@media (max-width: 740px) { .mc-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; } }
/* Phones: stack footer to one column — at 2 columns the grid items (min-width:auto)
   can't shrink below their content, pushing the second column past a ~360px viewport. */
@media (max-width: 560px) { .mc-footer-inner { grid-template-columns: 1fr; gap: 24px; } }

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

.mc-hero {
  position: relative; padding: 72px 28px 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-2));
  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: rgba(10,10,18,0.85);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--mc-border);
  border-bottom: 1px solid var(--mc-border);
  padding: 14px 28px;
  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-2)); color: #fff; border-color: transparent; }
.mc-filter-pill .count {
  font-family: var(--font-mono); font-size: 10.5px; opacity: 0.7;
  background: rgba(255,255,255,0.12); padding: 1px 6px; border-radius: 100px;
}

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

/* Rhythm variation — break the monotonous 48px everywhere */
#section-featured { margin-top: 80px; }      /* breathe after hero */
.mc-section + .mc-section { margin-top: 40px; } /* tighter between sibling sections */
/* The "Why these tools" section needs a clear break from tool grid */
[aria-labelledby="why-h2"] { margin-top: 80px; }
.mc-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  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: 14px; }
.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;
}
.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-2));
  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; }

/* 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: 32px 28px 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: 20px; align-items: start; }
@media (max-width: 880px) { .mc-tool-grid { grid-template-columns: 1fr; } }
.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; }
.mc-field-suffix { position: absolute; right: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--mc-text-2); pointer-events: none; }
/* 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);
}
.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; }
/* Only add right padding when a suffix is present inside the field */
.mc-field-input:has(.mc-field-suffix) .mc-input { padding-right: 48px; }
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-2)); 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-2)); 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;
}
.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; }
.mc-result.flash { animation: mc-flash 0.6s ease; }
@keyframes mc-flash { 0% { outline: 1px solid var(--mc-primary-2); } 100% { outline: 1px solid transparent; } }

/* 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 the
   odometer or flash the outline. */

/* 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: oklch(80% 0.12 28); 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; }

/* 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: 720px)  { .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: oklch(80% 0.12 28); 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-2));
  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: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 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: var(--mc-bg); padding: 2px 6px; border-radius: 3px;
  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; }
.mc-export-row { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.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-2));
  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-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
@media (max-width: 1100px) { .mc-periodic-wrap { grid-template-columns: 1fr; } }
.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);
}
.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;
  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); }
/* 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-periodic-detail {
  background: linear-gradient(180deg, var(--mc-surface), var(--mc-bg-2));
  border: 1px solid var(--mc-border); border-radius: var(--r-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  height: fit-content; position: sticky; top: calc(var(--topbar-h) + 20px);
}
.mc-pt-detail-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid color-mix(in oklab, var(--cat-color, var(--mc-primary)) 62%, transparent);
}
.mc-pt-detail-num { font-size: 14px; color: var(--mc-muted); font-family: var(--font-mono); }
.mc-pt-detail-sym {
  font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1;
  color: color-mix(in oklab, var(--cat-color, var(--mc-text)) 78%, white);
}
.mc-pt-detail-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.mc-pt-detail-meta { font-size: 11.5px; color: var(--mc-text-2); display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px; }
/* Family chip in the detail panel — echoes the cell the user just clicked. */
.mc-pt-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 100px;
  background: color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 18%, var(--mc-surface));
  border: 1px solid color-mix(in oklab, var(--cat-color, var(--mc-border-2)) 45%, transparent);
  color: color-mix(in oklab, var(--cat-color, var(--mc-text)) 65%, white);
}
.mc-pt-cat-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--cat-color, var(--mc-border-2));
}

.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; }

/* 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; }
}

/* 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: 740px) {
  .mc-hero { padding: 40px 16px 32px; }
  .mc-section { padding: 0 16px; }
  .mc-tool-page { padding: 24px 16px 56px; }
  .mc-filter-bar { padding: 12px 16px; 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: 580px) {
  .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-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 content. */
  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 { display: none !important; }

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

  /* Flatten cards into clean bordered blocks; keep each whole on a page. */
  .mc-card, .mc-result, .mc-method, .mc-card-emphasis, .mc-table-wrap, .mc-recipe, .mc-periodic-detail {
    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); }
}

/* ── 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-primary:active  { transform: scale(0.97) !important; }
.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;
}

/* ── Periodic element detail: children fade-up on selection ─────────── */
.mc-periodic-detail > * {
  transition: opacity 240ms var(--ease-out-expo), transform 240ms var(--ease-out-expo);
}
@starting-style {
  .mc-periodic-detail > * { opacity: 0; transform: translateY(8px); }
}

/* ── 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-periodic-detail > *,
  .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: "the instrument locks on"
   One coordinated moment when a result settles — a specular sweep across the
   headline, a ripple through the molecular field (js/chrome.js), and cinematic
   page-to-page transitions across the suite. All recompute-only and motion-safe;
   js/main.js never fires the settle under prefers-reduced-motion, and the
   guards below neutralise the CSS half.
   ═════════════════════════════════════════════════════════════════════════ */

/* Specular highlight that glints across the big result as it settles, like light
   passing over an instrument readout. Transform + opacity only; clipped to the
   block's rounded corners. Class is toggled by mc.flashResult on recompute. */
.mc-result-big { overflow: hidden; }
.mc-result-big::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; z-index: 1;
  background: linear-gradient(105deg, transparent 35%, oklch(85% 0.13 255 / 0.22) 50%, transparent 65%);
  transform: translateX(-130%); opacity: 0;
}
.mc-result-big.mc-settle::after { animation: mc-sweep 640ms var(--ease-out-expo); }
@keyframes mc-sweep {
  0%   { transform: translateX(-130%); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(130%);  opacity: 0; }
}

/* 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); } }

/* 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) {
  .mc-result-big.mc-settle::after { animation: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  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;
  }
}