:root {
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --text: #1c2530;
  --text-dim: #5b6675;
  --border: #dde3ea;
  --primary: #2563eb;
  --primary-dim: #eef3ff;
  --accent: #0e9f6e;
  --danger: #d64545;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --card-bg: #1b212a;
    --text: #e7ebf0;
    --text-dim: #9aa5b1;
    --border: #2b333f;
    --primary: #5b8def;
    --primary-dim: #1c2740;
    --accent: #37c98f;
    --danger: #ef6a6a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

/* Explicit theme override (set via the toggle button) — wins over OS preference */
:root[data-theme="dark"] {
  --bg: #12161c;
  --card-bg: #1b212a;
  --text: #e7ebf0;
  --text-dim: #9aa5b1;
  --border: #2b333f;
  --primary: #5b8def;
  --primary-dim: #1c2740;
  --accent: #37c98f;
  --danger: #ef6a6a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] {
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --text: #1c2530;
  --text-dim: #5b6675;
  --border: #dde3ea;
  --primary: #2563eb;
  --primary-dim: #eef3ff;
  --accent: #0e9f6e;
  --danger: #d64545;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

.topbar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 16px;
}
.topbar-inner { max-width: 1080px; margin: 0 auto; }
.topbar h1 { margin: 0 0 4px; font-size: 1.5rem; }
.subtitle { margin: 0; color: var(--text-dim); font-size: 0.92rem; }

.topbar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.guide-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.theme-toggle-btn {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-toggle-btn:hover { border-color: var(--primary); transform: scale(1.06); }
.theme-toggle-fixed {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
}
.guides-link, .back-link {
  flex-shrink: 0;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.guides-link:hover, .back-link:hover { text-decoration: underline; }

.tabs {
  max-width: 1080px;
  margin: 16px auto 0;
  padding: 0 24px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tab-btn {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tab-btn:hover { border-color: var(--primary); color: var(--text); }
.tab-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

#app { max-width: 1080px; margin: 20px auto 40px; padding: 0 24px; }

.panel { display: none; flex-direction: column; gap: 16px; }
.panel.active { display: flex; }

/* ---------- Calculator two-column layout ----------
   Single column stacks inputs above results, so on a phone the answer sits
   three screens below the controls that produce it. Above 1000px the panel
   becomes two columns with the results column sticky, so a number is always
   visible while you edit. Inputs and outputs are wrapped in .calc-inputs /
   .calc-output; the flex panel is switched to grid at that width. */
@media screen and (min-width: 1000px) {
  /* Both the grid and the wider page are gated on body.calc-wide, which
     app.js sets only while a panel built as inputs + output is showing.
     Without it, panels whose cards are a single sequence (polyurethane,
     emulsion, stock solutions) would have those cards auto-placed into two
     columns: one short card in the left track, one enormous one in the
     right, and a column of blank space down the rest of the page.
     screen-only: on paper the sticky column and its max-height would clip. */
  body.calc-wide #app { max-width: 1280px; }
  /* Every grid property stays on .active so nothing leaks to the panels that
     are still flex columns. align-items: start in particular means "shrink to
     content width" to a column flex container, which quietly narrowed the
     cards on the polyurethane, emulsion and stock tabs. */
  body.calc-wide .panel.active {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 20px;
  }
  body.calc-wide .panel.active > .panel-head,
  body.calc-wide .panel.active > .preset-bar { grid-column: 1 / -1; }
  .calc-inputs,
  .calc-output { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .calc-output {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
/* Below the breakpoint the wrappers are transparent: the cards flow exactly
   as they did before. */
@media screen and (max-width: 999px), print {
  .calc-inputs,
  .calc-output { display: contents; }
}

.panel-head { margin-bottom: -4px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0 0 2px; font-size: 1.15rem; }
.panel-head p { margin: 0; color: var(--text-dim); font-size: 0.88rem; }
.print-btn { flex-shrink: 0; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.card h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
}

.field { display: flex; flex-direction: column; gap: 4px; }
/* The label carries full text colour and the hint stays dim. They used to
   share the same grey at almost the same size, so the name of the field and
   the aside about it competed instead of ranking. */
.field label { font-size: 0.82rem; color: var(--text); font-weight: 600; }
.field .hint { font-size: 0.76rem; color: var(--text-dim); font-weight: 400; line-height: 1.4; }

input[type="number"], input[type="text"], input[type="search"], select {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 0.92rem;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}
input[type="number"]:focus, input[type="text"]:focus, input[type="search"]:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}
/* Mobile Safari zooms the page whenever a focused field is under 16px, and
   it does not zoom back out. 0.92rem is 14.7px, so pin these to 16px on
   phones: the layout is unchanged and focusing a field no longer jumps. */
@media screen and (max-width: 600px) {
  input[type="number"], input[type="text"], input[type="search"], select, textarea {
    font-size: 16px;
  }
}

.radio-row { display: flex; gap: 14px; flex-wrap: wrap; }
.radio-opt {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.88rem; cursor: pointer;
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: 7px;
}
.radio-opt input { accent-color: var(--primary); }
.radio-opt.checked { border-color: var(--primary); background: var(--primary-dim); }

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; margin-bottom: 10px; }
.checkbox-row input { accent-color: var(--primary); width: 16px; height: 16px; }

.subsection { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.subsection:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.subsection-title { font-size: 0.84rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: var(--primary-dim);
  border-radius: 8px;
  padding: 12px 14px;
}
.stat .label { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.stat .value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 2px;
  /* Tabular figures stop digits shifting width as values recompute. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stat .sub { font-size: 0.76rem; color: var(--text-dim); margin-top: 1px; }

/* Not every tile is an answer. The headline results get size and a border so
   the eye lands on them first; context tiles (a literature dispersity range,
   a concentration you typed in) recede. */
.stat--primary {
  background: var(--primary-dim);
  border: 1px solid var(--primary);
}
.stat--primary .value { font-size: 1.75rem; }
.stat--muted { background: transparent; border: 1px dashed var(--border); }
.stat--muted .value { font-size: 1.05rem; color: var(--text); font-weight: 600; }
/* Two fixed columns rather than auto-fit: it keeps the primary pair together
   on the first row at every width instead of letting the count drift between
   two and three and stranding a tile on a line of its own. Scoped to the
   calculator results card so the other pages' stat grids are untouched.
   (.calc-output is display:contents below 1000px, so this still matches.) */
.calc-output .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 430px) {
  .calc-output .stat-grid { grid-template-columns: 1fr; }
  .stat--primary .value { font-size: 1.5rem; }
}

/* ---------- Mobile results summary bar ----------
   On a phone the results card is far below the inputs, so the two numbers
   that actually answer the question ride along in a pinned bar. Hidden once
   the sticky results column takes over on wide screens. */
.calc-summary-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.08);
}
.calc-summary-bar .csb-item { flex: 1; min-width: 0; }
.calc-summary-bar .csb-label {
  font-size: 0.65rem; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
  /* room for the descender on subscripts like Mₙ, which overflow:hidden clips */
  line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calc-summary-bar .csb-value {
  font-size: 1rem; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calc-summary-bar .csb-jump {
  align-self: center; flex: 0 0 auto;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.calc-summary-bar[hidden] { display: none; }
@media (min-width: 1000px) { .calc-summary-bar { display: none; } }
@media print {
  .calc-summary-bar { display: none !important; }
  body.has-calc-summary #app { padding-bottom: 0; }
  /* The fold is a reading affordance; on paper the steps just print. */
  .procedure-fold > summary::before,
  .procedure-count { display: none !important; }
}
/* Keep the bar from covering the last card. */
body.has-calc-summary #app { padding-bottom: 72px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.recipe { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.88rem; }
table.recipe.recipe-data { table-layout: auto; min-width: 480px; }
table.recipe th, table.recipe td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
table.recipe th { color: var(--text-dim); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
table.recipe tr:last-child td { border-bottom: none; }
table.recipe td.num { font-variant-numeric: tabular-nums; }
table.recipe.recipe-data td:not(:first-child), table.recipe.recipe-data th:not(:first-child) { white-space: nowrap; }

/* ---------- Narrow screens: each row becomes a labelled card ----------
   Six columns on a 375px phone can only scroll sideways, and the column you
   want ends up off screen. Below 600px the header row is taken out of the
   flow and repeated as a label on each cell instead, so a component reads
   top to bottom with nothing hidden. Only applies to tables that nav.js has
   labelled (.recipe-stackable); anything it skipped keeps the scroller. */
@media screen and (max-width: 600px) {
  .table-scroll { overflow-x: visible; }
  table.recipe.recipe-stackable,
  table.recipe.recipe-stackable.recipe-data {
    display: block;
    table-layout: auto;
    min-width: 0;
    font-size: 0.85rem;
  }
  /* Visually hidden, not display:none, so screen readers keep the headers. */
  table.recipe.recipe-stackable thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  table.recipe.recipe-stackable tbody { display: block; }
  table.recipe.recipe-stackable tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px 12px 6px;
    margin-bottom: 8px;
  }
  table.recipe.recipe-stackable tbody tr:last-child { margin-bottom: 0; }
  table.recipe.recipe-stackable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    text-align: right;
    white-space: normal;
  }
  table.recipe.recipe-stackable tbody td[data-stack-skip] { display: none; }
  table.recipe.recipe-stackable tbody td[data-stack-last] { border-bottom: none; }
  table.recipe.recipe-stackable tbody td::before {
    content: attr(data-label);
    flex: 0 1 auto;
    max-width: 45%;
    /* The cell rule sets overflow-wrap: break-word for long chemical names;
       inherited here it snapped labels mid-word ("TENDENC / Y"). */
    overflow-wrap: normal;
    word-break: normal;
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
  }
  /* The first column names the row, so it reads as the card's title rather
     than as another label/value pair. */
  table.recipe.recipe-stackable tbody td:first-child {
    display: block;
    text-align: left;
    font-weight: 700;
    padding-top: 9px;
    border-bottom: 1px solid var(--border);
  }
  table.recipe.recipe-stackable tbody td:first-child::before { display: none; }
}

.error-msg {
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 12px;
  background: rgba(214, 69, 69, 0.1);
  border-radius: 7px;
}

.actions { display: flex; justify-content: flex-end; margin-top: 10px; }
button.copy-btn {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 0.82rem;
  cursor: pointer;
  font-weight: 600;
}
button.copy-btn:hover { border-color: var(--primary); color: var(--primary); }

details.assumptions { font-size: 0.85rem; color: var(--text-dim); }
details.assumptions summary { cursor: pointer; font-weight: 600; color: var(--text); }
details.assumptions .body { margin-top: 8px; }
details.assumptions ul { margin: 6px 0; padding-left: 20px; }

.footer {
  max-width: 1080px;
  margin: 0 auto 30px;
  padding: 0 24px;
  color: var(--text-dim);
  font-size: 0.78rem;
}

@media (max-width: 560px) {
  .topbar h1 { font-size: 1.25rem; }
}

#guide {
  max-width: 1080px;
  margin: 20px auto 40px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.guide-list, .guide-sublist { margin: 0; padding-left: 20px; }
.guide-list li, .guide-sublist li { margin-bottom: 8px; font-size: 0.92rem; }
.guide-list li:last-child, .guide-sublist li:last-child { margin-bottom: 0; }
.guide-steps { margin: 0; padding-left: 22px; }
.guide-steps > li { margin-bottom: 16px; font-size: 0.92rem; }
.guide-steps > li:last-child { margin-bottom: 0; }
.guide-sublist { margin: 8px 0; }
.guide-note {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.guide-formula {
  margin: 10px 0;
  padding: 12px 16px;
  background: var(--primary-dim);
  border-radius: 8px;
  font-size: 0.95rem;
  text-align: center;
  color: var(--text);
  overflow-x: auto;
}
h4.guide-subhead { margin: 14px 0 8px; font-size: 0.9rem; }

.glossary-dl { margin: 0; }
.glossary-dl dt {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  margin-top: 16px;
}
.glossary-dl dt:first-child { margin-top: 0; }
.glossary-dl dd {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Home page hero + generative polymer art
--------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1120 0%, #17233f 45%, #0d332f 100%);
  padding: 56px 24px 44px;
  text-align: center;
}
.polymer-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 85% at center, rgba(4,8,16,0.6) 0%, rgba(4,8,16,0.42) 45%, rgba(4,8,16,0.12) 75%, rgba(4,8,16,0) 92%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.hero-content h1 {
  color: #fff;
  font-size: 2.1rem;
  margin: 0 0 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.6);
}
.hero-content p {
  color: #fff;
  font-size: 1.02rem;
  margin: 0 0 20px;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.6);
}

.tech-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(10, 14, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
/* The hero's "Explore the Toolkit" heading was removed: it said the same
   thing as the section labels immediately below it, and cost a screen's
   worth of the scroll down to the papers feed. */

/* ---------- Home page body ----------
   Fourteen cards of equal weight, each with a full paragraph, ran 1534px
   before the live sections even started, so the papers feed and the trivia
   sat three screens down. The toolkit is tiered instead: the calculator is
   the one featured card, the other calculators keep their descriptions, and
   the guides drop to one-line rows. Every page in the site comes first, then
   the papers feed and the trivia; the tiering is what brings them up, not a
   reordering that pushes the toolkit down. */
.home-body {
  max-width: 1080px;
  margin: 40px auto 40px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.home-body > .hot-papers,
.home-body > .trivia {
  max-width: none;
  margin: 0;
  padding: 0;
}
.home-section-label {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.home-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--card-accent, var(--primary));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px 24px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.14);
}
.home-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--card-accent, var(--primary)) 16%, transparent);
}
.home-card-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--card-accent, var(--primary));
  font-weight: 700;
  margin-bottom: 8px;
}
.home-card h2, .home-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.home-card p { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.home-card-arrow { display: block; margin-top: 16px; font-size: 0.85rem; font-weight: 600; color: var(--card-accent, var(--primary)); }

/* The one card that is the point of the site: laid out across the full
   width so it reads as the primary action rather than one tile of many. */
.home-card--feature {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px 28px;
}
.home-card--feature .home-card-icon { margin-bottom: 0; flex: 0 0 auto; width: 52px; height: 52px; font-size: 1.6rem; }
.home-card--feature .feature-text { flex: 1; min-width: 0; }
.home-card--feature h2 { font-size: 1.35rem; }
.home-card--feature .home-card-arrow { margin-top: 0; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 700px) {
  .home-card--feature { display: block; }
  .home-card--feature .home-card-icon { margin-bottom: 12px; }
  .home-card--feature .home-card-arrow { margin-top: 16px; }
}

/* Guides and the odds and ends: a title and one line each. These were
   full cards with their own paragraph, which is what made the page long
   without making any of them easier to choose between. */
.home-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}
.home-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--card-accent, var(--primary));
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12);
}
.home-row-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: color-mix(in srgb, var(--card-accent, var(--primary)) 16%, transparent);
}
.home-row-text { display: block; min-width: 0; }
.home-row-title { display: block; font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; }
.home-row-desc { display: block; font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; }

/* One column means the five tool cards stack, and at ~320px each that put
   the papers feed almost three screens down on a phone. Same cards, laid
   out like the guide rows: the icon moves inline and the arrow goes, since
   the whole card is the tap target anyway. No text is dropped. */
@media (max-width: 700px) {
  .home-grid { gap: 10px; }
  .home-grid .home-card {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: start;
    column-gap: 12px;
    padding: 12px 14px;
    border-top-width: 1px;
    border-left: 3px solid var(--card-accent, var(--primary));
    border-radius: 10px;
  }
  .home-grid .home-card .home-card-icon {
    width: 30px; height: 30px;
    font-size: 1rem;
    margin-bottom: 0;
    grid-row: span 2;
  }
  .home-grid .home-card h3 { margin: 0 0 2px; font-size: 0.95rem; grid-column: 2; }
  .home-grid .home-card p { font-size: 0.82rem; line-height: 1.45; grid-column: 2; }
  .home-grid .home-card .home-card-arrow { display: none; }
}

.home-footnote {
  max-width: 1080px;
  margin: 0 auto 40px;
  padding: 0 24px;
  color: var(--text-dim);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 560px) {
  .hero { padding: 56px 20px 36px; }
  .hero-content h1 { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------------
   Mechanism reaction schemes
--------------------------------------------------------------------- */

.mech-scheme {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 14px 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.mech-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}
.mech-eq {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
  white-space: nowrap;
}
.mech-step-name {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-style: italic;
  white-space: nowrap;
  padding-left: 10px;
  margin-left: auto;
}
.pn { color: var(--primary); font-weight: 700; }
.radical { color: var(--danger); font-weight: 700; }
.metal { color: var(--accent); font-weight: 700; }

.mech-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  min-width: 46px;
}
.mech-arrow .mech-k {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
}
.mech-arrow .mech-arrow-line {
  font-size: 1.35rem;
  color: var(--text);
  margin: 1px 0;
}

.mech-ring-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 18px 16px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mech-ring {
  display: block;
  max-width: 100%;
  height: auto;
}
.mech-ring .bond { stroke-linecap: round; }
.mech-ring .bond-keep { stroke: var(--text-dim); stroke-width: 3; }
.mech-ring .bond-break {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 2, 7;
}
.mech-ring .ring-atom circle {
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.mech-ring .ring-atom-metal circle { fill: var(--accent); stroke: var(--accent); }
.mech-ring .ring-atom-carbon circle { fill: var(--card-bg); stroke: var(--border); }
.mech-ring .ring-atom text {
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  text-anchor: middle;
  dominant-baseline: central;
}
.mech-ring .ring-atom-metal text { fill: #fff; }
.mech-ring .ring-atom-carbon text { fill: var(--text); }
.mech-ring .ring-substituent {
  font-size: 11px;
  fill: var(--text-dim);
  font-style: italic;
}
.mech-ring-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.76rem;
  color: var(--text-dim);
}
.mech-ring-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 18px; height: 0; border-top-width: 3px; border-top-style: solid; }
.legend-break { border-top-color: var(--accent); border-top-style: dashed; }
.legend-keep { border-top-color: var(--text-dim); }
.mech-ring-caption {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------
   Generic illustrative diagrams (GPC page, etc.)
--------------------------------------------------------------------- */

.diagram-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 16px 14px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.diagram-svg { display: block; max-width: 100%; height: auto; }
.diagram-svg text { font-family: inherit; fill: var(--text); }
.diagram-svg .dim { fill: var(--text-dim); }
.diagram-svg .small { font-size: 10px; }
.diagram-caption {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 2px;
}
.diagram-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.76rem;
  color: var(--text-dim);
}
.diagram-legend span { display: inline-flex; align-items: center; gap: 6px; }
.diagram-legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Founder page
--------------------------------------------------------------------- */

.founder-hero {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.founder-photo {
  width: 200px;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.founder-intro { flex: 1; min-width: 240px; }
.founder-intro h2 { margin: 0 0 4px; font-size: 1.4rem; }
.founder-tagline { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 14px; }
.founder-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
}
.founder-facts .fact-label {
  color: var(--text-dim);
  font-weight: 600;
  margin-right: 6px;
}
.founder-facts a { color: var(--primary); text-decoration: none; }
.founder-facts a:hover { text-decoration: underline; }

.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pub-list li {
  font-size: 0.9rem;
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.pub-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.pub-list a { color: var(--primary); text-decoration: none; }
.pub-list a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .founder-hero { flex-direction: column; text-align: center; }
  .founder-facts { align-items: center; }
}

.donate-card { text-align: center; }
.donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: filter 0.15s, transform 0.15s;
}
.donate-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   Brand lockup (logo + wordmark)
--------------------------------------------------------------------- */

.brand-link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  padding-top: 4px;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
}
.brand-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand-poly { color: var(--primary); }
.brand-link:hover .brand-name { color: var(--primary); }

.hero-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}
.hero-brand .brand-mark { width: 52px; height: 52px; border-radius: 13px; }
/* The brand is the page's h1 on home; other pages keep it as a span in the
   topbar link, so the margin reset has to be here rather than on .brand-name. */
.hero-brand h1.brand-name { margin: 0; }
.hero-brand .brand-name {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.6);
}
.hero-brand .brand-poly { color: #8fb8ff; }

@media (max-width: 560px) {
  .hero-brand .brand-mark { width: 40px; height: 40px; border-radius: 10px; }
  .hero-brand .brand-name { font-size: 1.7rem; }
}

/* ---------------------------------------------------------------------
   Hot papers feed
--------------------------------------------------------------------- */

.hot-papers {
  max-width: 1080px;
  margin: 8px auto 40px;
  padding: 0 24px;
}
.hot-papers-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.hot-papers-header h2 {
  margin: 0 0 3px;
  font-size: 1.3rem;
}
.hot-papers-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.hot-papers-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
  padding-top: 3px;
  flex-shrink: 0;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.55);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(14, 159, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0); }
}

.hot-papers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.paper-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--paper-accent, var(--primary));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  opacity: 0;
  animation: paper-in 0.4s ease forwards;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.paper-card:hover {
  transform: translateY(-3px) rotate(-0.3deg);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.14);
}
@keyframes paper-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.paper-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.paper-journal {
  display: inline-block;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--paper-accent, var(--primary));
  background: color-mix(in srgb, var(--paper-accent, var(--primary)) 14%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
}
.paper-cites {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #b45309;
  background: color-mix(in srgb, #f2b84b 22%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.paper-cites-new {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.paper-title {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
}
.paper-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.paper-link-hint {
  font-weight: 600;
  color: var(--paper-accent, var(--primary));
}

.hot-papers-loading, .hot-papers-error {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 0.88rem;
  padding: 20px 0;
  text-align: center;
}

.hot-papers-caption {
  margin: 12px 2px 0;
  font-size: 0.76rem;
  color: var(--text-dim);
  text-align: right;
}

/* ---------------------------------------------------------------------
   Daily trivia
--------------------------------------------------------------------- */

.trivia {
  max-width: 1080px;
  margin: 8px auto 40px;
  padding: 0 24px;
}
.trivia-header { margin-bottom: 14px; }
.trivia-header h2 { margin: 0 0 3px; font-size: 1.3rem; }
.trivia-subtitle { margin: 0; font-size: 0.85rem; color: var(--text-dim); }

.trivia-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.trivia-tries {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.trivia-tries .try-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.trivia-tries .try-dot.used { background: var(--danger); }
.trivia-tries .try-dot.active { background: var(--primary); }

.trivia-question {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.4;
}

.trivia-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.trivia-option {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.1s;
}
.trivia-option:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.trivia-option:disabled { cursor: default; }
.trivia-option.wrong {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--text-dim);
  text-decoration: line-through;
}
.trivia-option.correct {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-weight: 700;
}
.trivia-option.neutral-disabled { opacity: 0.55; }

.trivia-feedback {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.trivia-feedback.win { color: var(--accent); }
.trivia-feedback.lose { color: var(--danger); }
.trivia-explanation {
  font-size: 0.86rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

/* ---------------------------------------------------------------------
   Saved recipe presets
--------------------------------------------------------------------- */

/* Collapsed to a single slim row so it stops standing between the panel
   title and the first input. Padding is trimmed from the card default
   because closed it is one line of text. */
.preset-bar { padding: 10px 16px; }
.preset-bar[open] { padding-bottom: 16px; }
.preset-bar > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.preset-bar > summary::-webkit-details-marker { display: none; }
.preset-bar > summary::before {
  content: "\25B8";
  color: var(--text-dim);
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}
.preset-bar[open] > summary::before { transform: rotate(90deg); }
.preset-bar-title {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}
.preset-bar > summary:hover .preset-bar-title { color: var(--primary); }
.preset-bar-count {
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.preset-bar[open] > summary { margin-bottom: 12px; }
.preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.preset-row + .preset-row { margin-top: 10px; }
.preset-select {
  flex: 1;
  min-width: 160px;
}
.preset-name-input {
  flex: 1;
  min-width: 160px;
}
.preset-row .copy-btn { flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Kinetics plot
--------------------------------------------------------------------- */

.kin-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
}
.kin-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.kin-row input {
  flex: 1;
  min-width: 0;
}
.kin-row-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kin-row-remove:hover { border-color: var(--danger); color: var(--danger); }

.kin-chart-wrap {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  overflow-x: auto;
}
.kin-chart { display: block; width: 100%; height: auto; min-width: 420px; }
.kin-chart .kin-axis { stroke: var(--text-dim); stroke-width: 1; }
.kin-chart .kin-grid { stroke: var(--border); stroke-width: 1; }
.kin-chart .kin-tick-label { fill: var(--text-dim); font-size: 10px; }
.kin-chart .kin-axis-label { fill: var(--text-dim); font-size: 11px; font-weight: 600; }
.kin-chart .kin-fit-line { stroke: var(--accent); stroke-width: 2; fill: none; stroke-dasharray: 5,4; }
.kin-chart .kin-point { fill: var(--primary); stroke: var(--card-bg); stroke-width: 1.5; }
.kin-chart .kin-empty { fill: var(--text-dim); font-size: 12px; }

/* ---------------------------------------------------------------------
   Generic dynamic row list (Tg predictor, recipe scaling)
--------------------------------------------------------------------- */

.dyn-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
}
.dyn-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.dyn-row input, .dyn-row select { flex: 1; min-width: 90px; }
.dyn-row-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dyn-row-remove:hover { border-color: var(--danger); color: var(--danger); }
.dyn-row-labels {
  display: flex;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-dim);
  font-weight: 600;
  padding: 0 2px;
}
.dyn-row-labels span { flex: 1; min-width: 90px; }
.dyn-row-labels span.dyn-label-spacer { flex: 0 0 30px; min-width: 30px; }

/* ---------------------------------------------------------------------
   Generic chart (composition diagram, etc.)
--------------------------------------------------------------------- */

.chart-wrap {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  overflow-x: auto;
}
.chart-svg { display: block; width: 100%; height: auto; min-width: 320px; }
.chart-svg .axis { stroke: var(--text-dim); stroke-width: 1; }
.chart-svg .grid { stroke: var(--border); stroke-width: 1; }
.chart-svg .tick-label { fill: var(--text-dim); font-size: 10px; }
.chart-svg .axis-label { fill: var(--text-dim); font-size: 11px; font-weight: 600; }
.chart-svg .curve-line { stroke: var(--primary); stroke-width: 2.5; fill: none; }
.chart-svg .ref-line { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 4,4; fill: none; }
.chart-svg .ref-line-label { fill: var(--text-dim); font-size: 10px; font-style: italic; }
.chart-svg .marker-point { fill: var(--accent); stroke: var(--card-bg); stroke-width: 2; }
.chart-svg .azeo-point { fill: var(--danger); stroke: var(--card-bg); stroke-width: 2; }
.chart-svg .azeo-line { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 2,3; }
.chart-svg .area-included { fill: color-mix(in srgb, var(--primary) 38%, transparent); }
.chart-svg .area-excluded { fill: var(--text-dim); opacity: 0.22; }
.chart-svg .bound-line { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4,3; }

.stat-group-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin: 14px 0 8px;
}
.stat-group-label:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------
   Trace image uploader
--------------------------------------------------------------------- */

.upload-dropzone {
  display: block;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
}
.upload-dropzone:hover, .upload-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-dim);
}
.upload-dropzone input[type="file"] { display: none; }
.upload-hint { font-size: 0.8rem; color: var(--text-dim); margin-top: 6px; }

.trace-canvas-wrap {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--bg);
  padding: 8px;
}
#trace-canvas { display: block; max-width: 100%; height: auto; }

.trace-findings { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.trace-finding-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--primary-dim);
  font-size: 0.86rem;
  line-height: 1.45;
}
.trace-finding-item.warn { background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* ---------------------------------------------------------------------
   Polymer chain game
--------------------------------------------------------------------- */

.game-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.game-hud .stat { flex: 1; min-width: 130px; }

.game-stage {
  position: relative;
  display: flex;
  justify-content: center;
  background: #0b0f1a;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  overflow-x: auto;
}
#game-canvas { display: block; image-rendering: crisp-edges; }

.game-overlay {
  position: absolute;
  inset: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: rgba(6, 9, 16, 0.86);
  border-radius: calc(var(--radius) - 2px);
  color: #fff;
  padding: 20px;
}
.game-overlay h4 { margin: 0; font-size: 1.3rem; }
.game-overlay p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); max-width: 360px; }
.game-overlay button {
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.game-overlay button:hover { filter: brightness(1.1); }

.game-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.game-dpad {
  display: grid;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows: 44px 44px 44px;
  gap: 4px;
}
.game-dpad button {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-dpad button:active { background: var(--primary-dim); border-color: var(--primary); }
.game-dpad .dpad-up { grid-column: 2; grid-row: 1; }
.game-dpad .dpad-left { grid-column: 1; grid-row: 2; }
.game-dpad .dpad-down { grid-column: 2; grid-row: 2; }
.game-dpad .dpad-right { grid-column: 3; grid-row: 2; }

.game-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.game-legend span { display: inline-flex; align-items: center; gap: 6px; }
.game-legend .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Print
--------------------------------------------------------------------- */

@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #ffffff;
    --card-bg: #ffffff;
    --text: #000000;
    --text-dim: #444444;
    --border: #bbbbbb;
    --primary: #1d4ed8;
    --primary-dim: #f0f4ff;
    --accent: #0e7a54;
    --danger: #b3261e;
    --shadow: none;
  }
  body { background: #fff; }

  .topbar, .tabs, .footer, .home-footnote,
  .preset-bar, .guide-links, .theme-toggle-btn, .theme-toggle-fixed,
  .copy-btn, #bcp-add-block, .bcp-remove-block,
  .hero, .home-body, .hot-papers {
    display: none !important;
  }

  .print-btn { display: none !important; }

  #app, #guide, main {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .card {
    box-shadow: none;
    border: 1px solid var(--border);
    break-inside: avoid;
    page-break-inside: avoid;
  }
  a[href]::after { content: ""; }
}

/* Polymer structure search */
.mol-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.mol-toolbar-row:last-of-type { margin-bottom: 0; }
.mol-tool-cluster { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mol-tool-divider { width: 1px; height: 24px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
.mol-toolbar-label { font-size: 0.72rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-right: 2px; }

.mol-mode-btn, .mol-icon-btn, .mol-el-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 8px;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.mol-mode-btn svg, .mol-icon-btn svg { width: 17px; height: 17px; display: block; pointer-events: none; }
.mol-mode-btn:hover, .mol-icon-btn:hover, .mol-el-btn:hover { border-color: var(--primary); color: var(--primary); }
.mol-mode-btn.active, .mol-el-btn.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
}
.mol-custom-el {
  width: 84px;
  padding: 5px 8px;
  font-size: 0.82rem;
  height: 32px;
}
.mol-canvas-box { justify-content: flex-start; padding: 6px; background: var(--bg); }
#mol-canvas {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--card-bg);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: calc(var(--radius) - 2px);
  touch-action: none;
  cursor: crosshair;
}
/* ---- Structure editor: header + fullscreen ---- */
.mol-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mol-editor-head h3 { margin: 0; }
.mol-fs-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  border-radius: 8px; padding: 6px 11px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.mol-fs-btn:hover { border-color: var(--primary); color: var(--primary); }
.mol-fs-icon { font-size: 1.05rem; line-height: 1; }

/* ---- Structure editor: immersive (fullscreen) drawing ----
   The toolbars are tall and the canvas was tiny underneath them; immersive
   mode drops the page chrome and lets the canvas take the whole screen. As
   with the game this is a fixed-overlay class (works on iOS, unlike the
   Fullscreen API on non-video elements), plus the real API where available.
   The canvas backing store is re-fit to the new box in JS, so the drawing
   stays crisp rather than being scaled up. */
body.mol-immersive { overflow: hidden; }
body.mol-immersive #mol-editor-card {
  position: fixed; inset: 0; z-index: 200;
  margin: 0; border-radius: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px; box-sizing: border-box; overflow-y: auto;
}
body.mol-immersive #mol-editor-card > * { flex: 0 0 auto; }
/* Grows to fill in portrait (tall canvas), but never shrinks below 200px on a
   short landscape phone; the card scrolls instead of squashing the drawing. */
body.mol-immersive #mol-editor-card > .mol-canvas-box {
  flex: 1 1 auto; min-height: 200px; padding: 0;
}
body.mol-immersive #mol-canvas { height: 100%; }
/* Fold away the reading material to give the canvas the room. */
body.mol-immersive .mol-onboarding,
body.mol-immersive #mol-editor-card > .mol-details,
body.mol-immersive #mol-smiles-status { display: none; }
/* Keep every toolbar to a single scrollable line so they cost ~40px each
   instead of wrapping to three rows and squeezing the canvas. */
body.mol-immersive .mol-toolbar-row {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
body.mol-immersive .mol-toolbar-row > .mol-tool-cluster { flex: 0 0 auto; }
body.mol-immersive .mol-fs-btn { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }

.mol-search-btn { border-color: var(--primary); color: var(--primary); font-weight: 700; margin-left: 6px; display: inline-flex; align-items: center; }
.mol-export-wrap { position: relative; margin-left: auto; }
.mol-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  padding: 4px;
  gap: 2px;
}
.mol-export-menu[hidden] { display: none; }
.mol-export-menu button {
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}
.mol-export-menu button:hover { background: var(--primary-dim); color: var(--primary); }
.mol-details { margin-top: 6px; }
.mol-details summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--primary); padding: 2px 0; list-style-position: outside; }
.mol-details summary:hover { text-decoration: underline; }
.mol-details[open] summary { margin-bottom: 6px; }
.mol-tips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
@media (min-width: 700px) {
  .mol-tips { grid-template-columns: 1fr 1fr; }
}
.mol-tip-group h5 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.mol-tip-group dl { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.mol-tip { display: grid; grid-template-columns: 118px 1fr; gap: 10px; }
.mol-tip dt { font-weight: 700; font-size: 0.78rem; color: var(--text); }
.mol-tip dd { margin: 0; font-size: 0.78rem; color: var(--text-dim); line-height: 1.42; }
@media (max-width: 480px) {
  .mol-tip { grid-template-columns: 1fr; gap: 2px; }
}
.mol-results { display: flex; flex-direction: column; gap: 10px; }
.mol-result-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--primary-dim);
}
.mol-result-name { font-weight: 700; font-size: 0.98rem; }
.mol-result-aka { font-size: 0.8rem; color: var(--text-dim); margin-top: 1px; }
.mol-result-meta { font-size: 0.82rem; margin-top: 4px; }
.mol-result-props { font-size: 0.82rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mol-result-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; font-style: italic; }
.mol-pub-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.mol-pub-label { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; margin-right: 2px; }
.mol-pub-link {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  text-decoration: none;
}
.mol-pub-link:hover { border-color: var(--primary); text-decoration: underline; }

.mol-tag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mol-tag-chip {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.mol-tag-chip:hover { border-color: var(--primary); color: var(--primary); }
.mol-tag-chip.active { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }

.mol-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mol-upload-btn { display: inline-flex; align-items: center; cursor: pointer; }
.mol-ocr-status { font-size: 0.82rem; color: var(--text-dim); }
.mol-ocr-text {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;
}
.mol-ocr-text[hidden] { display: none; }

/* Modern/fun pass: icon badges on each card heading, a staggered entrance
   animation for the cards, and hover polish on the page's interactive
   controls - matching the motion language already used by .home-card and
   .paper-card (0.15s ease transform/shadow transitions, opacity+translateY
   entrance) rather than inventing a new one. Scoped to .mol-* classes and
   new classes only, so it can't affect any other page's shared .card rules. */
.mol-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 0.92rem;
  margin-right: 8px;
  vertical-align: -6px;
}
.mol-card-icon--1 { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.mol-card-icon--2 { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mol-card-icon--3 { background: color-mix(in srgb, #f59e0b 20%, transparent); }

.mol-card-in { opacity: 0; animation: mol-card-in 0.4s ease forwards; }
.mol-card-in:nth-of-type(1) { animation-delay: 0s; }
.mol-card-in:nth-of-type(2) { animation-delay: 0.06s; }
.mol-card-in:nth-of-type(3) { animation-delay: 0.12s; }
.mol-card-in:nth-of-type(4) { animation-delay: 0.18s; }
.mol-card-in:nth-of-type(5) { animation-delay: 0.24s; }
@keyframes mol-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mol-mode-btn, .mol-icon-btn, .mol-el-btn, .mol-example-btn, .mol-search-btn,
.mol-tag-chip, .mol-pub-link, .mol-upload-btn {
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mol-mode-btn:hover, .mol-icon-btn:hover, .mol-el-btn:hover { transform: scale(1.08); }
.mol-example-btn:hover, .mol-search-btn:hover, .mol-upload-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12); }
.mol-tag-chip:hover { transform: translateY(-1px); }
.mol-pub-link:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(16, 24, 40, 0.1); }

.mol-result-card {
  opacity: 0;
  animation: mol-card-in 0.3s ease forwards;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mol-result-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12); }

@media (prefers-reduced-motion: reduce) {
  .mol-card-in, .mol-result-card { animation: none; opacity: 1; }
  .mol-mode-btn, .mol-icon-btn, .mol-el-btn, .mol-example-btn, .mol-search-btn,
  .mol-tag-chip, .mol-pub-link, .mol-upload-btn, .mol-result-card {
    transition: none;
  }
}

@media (max-width: 640px) {
  .mol-search-btn { margin-left: 0; width: 100%; }
}

.mol-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.mol-modal-overlay[hidden] { display: none; }
.mol-modal-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  max-width: 100%;
  overflow-x: auto;
}
.mol-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mol-modal-head h4 { margin: 0; font-size: 0.95rem; }
.mol-modal-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.mol-modal-close:hover { color: var(--text); }
.mol-periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, 30px);
  grid-auto-rows: 30px;
  gap: 3px;
}
.mol-periodic-el {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.mol-periodic-el:hover { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }

/* ---------- Shared cross-page nav strip (injected by nav.js) ---------- */
.site-nav {
  max-width: 1080px;
  margin: 12px auto 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.site-nav a:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-dim);
}
.site-nav a.site-nav-current {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-dim);
  pointer-events: none;
}
@media print { .site-nav { display: none !important; } }

/* ---------- Trivia options: stronger button affordance ---------- */
.trivia-option {
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.trivia-option:hover:not(:disabled) {
  background: var(--primary-dim);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(16, 24, 40, 0.1);
}
.trivia-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.trivia-option:active:not(:disabled) { transform: translateY(0); }

/* ---------- Hot Off the Press: loading skeleton cards ---------- */
.paper-skeleton {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 14px 16px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paper-skeleton .sk-line {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.paper-skeleton .sk-badge { height: 14px; width: 40%; }
.paper-skeleton .sk-title { height: 12px; width: 95%; }
.paper-skeleton .sk-title2 { height: 12px; width: 70%; }
.paper-skeleton .sk-meta { height: 10px; width: 50%; margin-top: auto; }
@keyframes sk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-skeleton .sk-line { animation: none; }
}

/* ---------- "On this page" sticky jump nav (long guide pages) ---------- */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.section-nav a:hover { color: var(--primary); background: var(--primary-dim); }
.section-nav a.section-nav-current {
  color: var(--primary);
  background: var(--primary-dim);
  border-color: var(--primary);
}
#guide > .card { scroll-margin-top: 56px; }
@media print { .section-nav { display: none !important; } }

/* ---------- Inline numeric input validation (nav.js) ---------- */
input.input-invalid {
  border-color: var(--danger) !important;
  outline-color: var(--danger);
}
.input-hint {
  display: block;
  color: var(--danger);
  font-size: 0.75rem;
  margin-top: 3px;
}

/* ---------- Click-to-copy stat values (nav.js) ---------- */
.stat .value {
  cursor: copy;
  position: relative;
  transition: color 0.12s;
}
.stat .value:hover { color: var(--primary); }
.stat .value.value-copied::after {
  content: "Copied \2713";
  position: absolute;
  top: -16px;
  left: 0;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ---------- Structure editor first-visit onboarding hint ---------- */
.mol-onboarding {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--primary);
  background: var(--primary-dim);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.mol-onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--text);
}
.mol-onboarding-dismiss {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.mol-onboarding-dismiss:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- Hot Off the Press refresh button ---------- */
.hot-papers-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hot-papers-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.hot-papers-refresh:hover:not(:disabled) {
  color: var(--primary);
  border-color: var(--primary);
}
.hot-papers-refresh:disabled { cursor: default; opacity: 0.7; }
.hot-papers-refresh .refresh-icon {
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1;
}
.hot-papers-refresh.refreshing .refresh-icon {
  animation: refresh-spin 0.9s linear infinite;
}
@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hot-papers-refresh.refreshing .refresh-icon { animation: none; }
}

/* ---------- Back-to-top floating button (nav.js) ---------- */
.back-to-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--primary);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.15);
  transition: transform 0.12s, border-color 0.12s;
}
.back-to-top:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
@media print { .back-to-top { display: none !important; } }

/* ---------- Clickable Tg reference rows ---------- */
.tg-ref-row { cursor: pointer; transition: background 0.1s; }
.tg-ref-row:hover td { background: var(--primary-dim); }

/* ---------- Recent searches chips (polymer search) ---------- */
.mol-recent {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.mol-recent-label { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.mol-recent-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.mol-recent-chip:hover { border-color: var(--primary); background: var(--primary-dim); }
.mol-recent-clear {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}
.mol-recent-clear:hover { color: var(--danger); }

/* ---------- Calculator tab-row utility buttons ---------- */
.mw-unit-toggle, .share-recipe-btn {
  margin-left: auto;
  font-size: 0.8rem;
  padding: 7px 13px;
}
.mw-unit-toggle + .share-recipe-btn,
.share-recipe-btn + .mw-unit-toggle { margin-left: 0; }

/* ---------- Ctrl+K command palette (nav.js) ---------- */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 14, 20, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 0;
}
.cmdk-box {
  width: 100%;
  max-width: 560px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cmdk-input {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  background: var(--card-bg) !important;
  box-shadow: none !important;
}
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.cmdk-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}
.cmdk-item:hover, .cmdk-item.cmdk-active { background: var(--primary-dim); color: var(--primary); }
.cmdk-hint { font-size: 0.72rem; color: var(--text-dim); flex-shrink: 0; }
.cmdk-foot {
  border-top: 1px solid var(--border);
  padding: 7px 14px;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ---------- PWA install banner (nav.js) ---------- */
.install-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: min(560px, calc(100vw - 32px));
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 12px 16px;
  font-size: 0.86rem;
}
.install-banner-actions { display: flex; gap: 8px; margin-left: auto; }
.install-banner-yes {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 7px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.install-banner-no {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ---------- Interactive Mayo-Lewis chart ---------- */
#cc-chart { cursor: crosshair; touch-action: none; }
#cc-chart .marker-point { cursor: grab; }
.cmdk-overlay[hidden] { display: none !important; }

/* ---------- Suggested experimental procedures ---------- */
.procedure {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.procedure-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}
.procedure-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.procedure-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 10px;
}
.procedure-fold > summary::-webkit-details-marker { display: none; }
.procedure-fold > summary::before {
  content: "\25B8";
  color: var(--text-dim);
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}
.procedure-fold[open] > summary::before { transform: rotate(90deg); }
.procedure-fold > summary .procedure-title {
  margin: 0;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}
.procedure-count {
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.procedure-fold > summary:hover .procedure-title { color: var(--primary); }
.procedure-steps {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.procedure-steps li { line-height: 1.45; }
.procedure-disclaimer {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
}
.procedure-disclaimer strong { color: var(--danger); }
.procedure-disclaimer-compact { font-size: 0.76rem; }
/* Inside a stat grid (stock solutions), span the full row */
.stat-grid > .procedure { grid-column: 1 / -1; }

@media print {
  .procedure { break-inside: auto; }
  .procedure-steps { display: block; }
  .procedure-steps li { margin-bottom: 5px; }
  .procedure-disclaimer {
    border: 1px solid #b3261e;
    background: #fff;
    color: #000;
  }
}

/* ---------- Polyurethane simple/advanced mode toggle ---------- */
.pu-simple-only { display: none; }
#panel-pu.pu-simple .pu-simple-only { display: revert; }
#panel-pu.pu-simple .pu-advanced-only { display: none; }