/*
 * CodeCogs — mobile-first rewrite of site.css / refpage.css / docpage.css.
 * Colours carried over from the original stylesheet (site.css): brand blue
 * #006699, orange accent #ff7700, GPL-green #48b848. Layout is new —
 * built mobile-first per the rewrite plan, not a literal desktop port.
 */

:root {
  --brand-blue: #006699;
  --brand-blue-dark: #004b73;
  --accent-orange: #ff7700;
  --gpl-green: #2e7d32;
  --gpl-green-bg: #e8f5e9;
  --ink: #1a1a1a;
  --ink-soft: #555;
  --line: #ddd;
  --bg: #fff;
  --bg-alt: #f4f6f8;
  --code-bg: #1e1e1e;
  --code-ink: #e6e6e6;
  --max-width: 1100px;
  --eqn-margin: 30px;
}

* { box-sizing: border-box; }

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

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

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A real type scale — previously only h1 (.page-header) and a couple of
   narrow overrides were styled at all; h2/h3 rode the browser default
   (h2 ~24px, h3 ~19px), and the one explicit h3 override (member names)
   was smaller than even that default. Each level here carries real
   content on these pages (h2: major sections; h3: one documented
   function/method per heading; h4: Parameters/Example/Output labels),
   so the steps need to be deliberate, not accidental. */
h2, h3, h4, h5 { font-weight: 700; margin: 0; text-wrap: balance; }
h2 { font-size: 1.45rem; margin: 32px 0 14px; }
h3 { font-size: 1.2rem; margin: 24px 0 10px; }
h4 { font-size: 1rem; margin: 16px 0 8px; color: var(--brand-blue); }
h5 { font-size: 0.88rem; margin: 14px 0 6px; color: var(--brand-blue); }

img { max-width: 100%; }

code, pre { font-family: "SFMono-Regular", Consolas, Menlo, monospace; }

/* ---------------- header / nav ---------------- */

.site-header {
  background: var(--brand-blue);
  color: #fff;
}

.site-header .bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  line-height: 0;
}
.site-header .logo img { display: block; height: 28px; width: auto; }
.site-header .logo:hover { text-decoration: none; opacity: .9; }

.site-header nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.site-header nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  color: #d9ecf7;
}
.site-header nav a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.14); }
.site-header nav a.is-active { background: #fff; color: var(--brand-blue-dark); font-weight: 600; }
.site-header nav a svg { width: 16px; height: 16px; flex: 0 0 auto; display: block; }

.site-search {
  display: flex;
  width: 100%;
  order: 3;
}
@media (min-width: 720px) {
  .site-search { width: auto; order: 0; margin-left: auto; }
}
.site-search input[type="search"] {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 4px 0 0 4px;
  font-size: 0.95rem;
  min-width: 0;
}
.site-search button {
  border: none;
  background: var(--accent-orange);
  color: #fff;
  padding: 8px 14px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 0.95rem;
}
.site-search button:hover { background: #e56a00; }

/* Home page hero search — deliberately much bigger than the header's
   compact .site-search, since this is the primary action on the page. */
.hero-search {
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 28px 0 36px;
}
.hero-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 18px 22px;
  font-size: 1.3rem;
  border: 2px solid var(--line);
  border-radius: 8px;
}
.hero-search input[type="search"]:focus {
  outline: none;
  border-color: var(--brand-blue);
}
.hero-search button {
  padding: 0 32px;
  font-size: 1.15rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: var(--accent-orange);
  color: #fff;
  cursor: pointer;
}
.hero-search button:hover { background: #e56a00; }
@media (max-width: 640px) {
  .hero-search { flex-direction: column; }
  .hero-search input[type="search"] { font-size: 1.1rem; padding: 14px 16px; }
}

/* ---------------- layout shell ---------------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ---------------- right-hand rail ----------------
   \begin{right}/\begin{topright} content and the page's own Contents/
   Download callout each used to float independently, pulled into a
   reserved 280px gutter via a negative right margin. Two failure modes
   showed up in real content: with no `clear` at all, two of these close
   together computed to the *same* position and rendered on top of each
   other (module/1278's \begin{right} box overlapping the Contents
   callout; module/1270's two adjacent \begin{right} blocks overlapping
   each other) — but adding `clear` to every individual box (the obvious
   fix) would let stacking drift arbitrarily far from its own heading
   over a long page, one tall box at a time.
   RightRailLayout (app/Libraries/RightRailLayout.php, applied server-side
   in PageController::show() — no client-side JS) resolves both: it
   groups every .rightpanel/.topright-box/.sidebar-callout under whichever
   <h1>/<h2> most recently precedes it in the rendered HTML, merges each
   group into one .section-aside-stack element, and moves that to sit
   right after its heading — so within a section multiple boxes still
   cascade in document order (this stack's own `display:flex;
   flex-direction:column` does that), but a whole new heading always
   starts a clean stack that can never collide with an earlier section's,
   however tall that one turned out to be. */

.page-content { padding-right: 280px; }

.section-aside-stack {
  float: right;
  clear: right;
  width: 260px;
  margin: 0 -280px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rightpanel, .topright-box, .sidebar-callout {
  padding: 12px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.85rem;
}
.sidebar-callout strong { display: block; margin-bottom: 8px; }
.sidebar-callout ol { margin: 0; padding-left: 20px; }
.sidebar-callout li { margin-bottom: 4px; }
.sidebar-callout form { margin: 10px 0 0; }
.sidebar-callout .btn { display: block; width: 100%; text-align: center; padding: 8px 12px; font-size: 0.85rem; }
.sidebar-callout .btn.secondary { margin-bottom: 10px; }
.sidebar-callout .sidebar-note { margin: 10px 0 0; font-size: 0.8rem; }

.sidebar-callout.noborder {
  border: none;
  background-color: transparent;
}

@media (max-width: 900px) {
  /* Author content (\right/\topright) still carries real information with no
     other home on the page, so it stays — just unfloated, stacked inline where
     it was written. The Contents/Download callout duplicates what's already
     reachable elsewhere on the page (headings by scrolling, Download/Buy at
     the bottom), so per the "only on wide screens" request it's dropped here
     rather than adding a second stacked copy of those same buttons. */
  .page-content { padding-right: 0; }
  .section-aside-stack { float: none; width: auto; margin: 16px 0; }
  .section-aside-stack .sidebar-callout { display: none; }
}

/* ---------------- About page memorial ---------------- */

.memorial-block {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 32px 0;
  padding: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.memorial-photo {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  background-color: var(--line);
  background-size: cover;
  background-position: center;
}
.memorial-text h2 { margin: 0 0 2px; }
.memorial-dates { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.9rem; }
.memorial-text p:last-child { margin-bottom: 0; }

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

/* ---------------- Contact page ---------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin: 24px 0;
}
.contact-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.contact-field input,
.contact-field select,
.contact-field textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 0.95rem;
  font-weight: 400;
  font-family: inherit;
  width: 100%;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { outline: none; border-color: var(--brand-blue); }
.contact-field textarea { resize: vertical; }
.contact-field-row { display: flex; gap: 14px; }
.contact-field-row .contact-field { flex: 1 1 0; min-width: 0; }
.contact-phone-row { display: flex; gap: 8px; align-items: center; }
.contact-dial-code {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-weight: 600;
  text-align: center;
  font-size: 0.9rem;
}
.contact-word-count { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); }
.contact-word-count.is-met { color: var(--gpl-green); font-weight: 600; }
.contact-errors { margin: 0; padding-left: 20px; }
.contact-footnote { margin-top: 32px; font-size: 0.88rem; color: var(--ink-soft); }
.g-recaptcha { margin: 4px 0; }

@media (max-width: 560px) {
  .contact-field-row { flex-direction: column; gap: 16px; }
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-size: 0.85rem;
  padding: 20px 16px;
  margin-top: 40px;
}
.site-footer .bar {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--brand-blue); }

.passkey-list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.passkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.passkey-row .sidebar-note { margin: 2px 0 0; }

.flash-error, .flash-notice {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.flash-error { background: #fdecea; color: #a13c3c; border: 1px solid #f5c6cb; }
.flash-notice { background: #e8f5e9; color: var(--gpl-green); border: 1px solid #c8e6c9; }

/* ---------------- page (module/reference) ---------------- */

/* NOT display:flex — RightRailLayout inserts the page's .section-aside-
   stack as this element's own next sibling (see that class's own doc
   comment), relying on plain float:right to place it in the right
   gutter; a flex container forces float to compute to none on its
   children, which would silently break that positioning the moment the
   stack lands here as h1's sibling. */
.page-header { position: relative; }
.page-header h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
}
.page-header .category {
  margin-bottom: 12px;
}
/* View/download counts — lives inside the sidebar's .sidebar-callout.noborder
   box (see pages/show.php), not the page header, so it travels with
   RightRailLayout's float-right stack instead of needing its own
   absolute-position carve-out of h1's width. */
.page-stats {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.page-stats-sep { margin: 0 2px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tag-pill {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 0.8rem;
}
.tag-pill:hover { border-color: var(--brand-blue); color: var(--brand-blue); text-decoration: none; }

.docs-block { margin-bottom: 24px; }
.docs-block .doc-item { margin-bottom: 14px; }
.docs-block .doc-label {
  display: block;
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.docs-block .doc-item p:first-child { margin-top: 0; }
.docs-block .doc-item p:last-child { margin-bottom: 0; }

/* Parameters — grouped into one indented grid (matches the live site's
   table.params look: name column bold+italic+blue) — a CSS grid rather
   than a <table>, since this is a name/description pair list, not
   tabular data. */
.params-wrap { margin: 0 0 20px 15px; }
.params-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 3px;
  font-size: 0.85rem;
}
.params-name {
  color: var(--brand-blue);
  font-weight: 700;
  font-style: italic;
  white-space: nowrap;
}
.params-desc { min-width: 0; }
/* A genuinely multi-paragraph description keeps its <p> tags (see
   MarkupRenderer::renderInline()) — keep those tight so they don't add a
   large top margin that misaligns the first line against params-name. */
.params-desc p { margin: 0 0 0.5em; }
.params-desc p:last-child { margin-bottom: 0; }

/* Example / Output — each its own light grey box under an auto-numbered
   heading, matching dd.example/dd.output (#f7f7f7, live site). */
.example-block { margin: 16px 0; }
.example-block h4 { margin: 0 0 6px; }
.example-box, .output-box {
  background: #f7f7f7;
  border-radius: 4px;
  padding: 10px 12px;
}
.example-box .code-block, .output-box .code-block { margin-bottom: 0; }

.callout-yellow {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0;
}

/* \examples{id} worked-example panel — MarkupRenderer::renderExample(). */
.example-panel {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-orange);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 16px 0;
}
.example-title { margin: 0 0 10px; font-size: 1rem; }
.example-unit { color: var(--brand-blue); font-weight: 400; font-size: 0.85rem; }
.example-field { margin: 0 0 14px; }
.example-field:last-child { margin-bottom: 0; }
.example-field .doc-label { margin-bottom: 4px; }
.example-field p:first-child { margin-top: 0; }
.example-field p:last-child { margin-bottom: 0; }

/* A group of examples (shared groupID) — prev/next + one dot per member,
   click-through rather than a horizontal scroll: members range from a
   couple of lines to a full page, and scroll-snapping panels of very
   different heights reads as broken, not smooth (see renderExample()). */
.example-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.example-arrow {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 26px;
  height: 26px;
  line-height: 1;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.example-arrow:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.example-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.example-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.example-dot:hover { background: #bbb; }
.example-dot.is-active { background: var(--accent-orange); }
.example-group { margin: 16px 0; }
.example-group h3 { margin: 0 0 10px; font-size: 1.05rem; }
.example-group .example-panel { margin: 0; }

/* ---------------- migrated legacy markup constructs ---------------- */
/* See app/Libraries/MarkupRenderer.php for what maps to what. */

.greybox {
  background: var(--bg-alt);
  border-left: 3px solid var(--line);
  padding: 10px 16px;
  margin: 10px 0;
  color: var(--ink-soft);
}

.central { text-align: center; margin: 14px 0; }

.extra {
  border: 1px dashed var(--line);
  border-color: var(--accent-orange);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0;
}

.versions-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  column-gap: 16px;
  font-size: 0.8rem;
}
.versions-grid-head {
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--line);
}
.versions-grid-cell { padding: 6px 0; border-bottom: 1px solid var(--line); }
.versions-grid-cell:nth-last-child(-n+3) { border-bottom: none; }
.current-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.tablegeneral, table.tableplain {
  border-collapse: collapse;
  margin: 14px 0;
  width: 100%;
  font-size: 0.92rem;
}
table.tablegeneral td { border: 1px solid var(--line); padding: 6px 10px; }
table.tableplain td { padding: 4px 10px; }

.access-public { }
.access-private { background: var(--gpl-green-bg); border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.access-private-locked {
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.errorbox {
  background: #fdecea;
  color: #a13c3c;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
}

.download-link {
  display: inline-block;
  color: var(--brand-blue);
  font-weight: 600;
}

/* Block equations — flexbox stand-in for the original's negative-margin
   trick (doxygen.css .formulaDsp/.eqn_num): equation image left, its
   number right, one row, without relying on a fragile margin hack. */
.formulaDsp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  max-width: 100%;
  margin-left: 20px;
}
.formulaDsp img { max-width: 100%; }
.eqn_num { color: var(--brand-blue); font-weight: 600; white-space: nowrap; }
.central .formulaDsp { justify-content: center; }

.eqn-inline { vertical-align: middle; max-width: 100%; }


figure { margin: 0 0 14px; }
figure figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }

.licence-banner {
  background: var(--gpl-green-bg);
  color: var(--gpl-green);
  border: 1px solid #c8e6c9;
  border-radius: 6px 6px 0 0;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Matches the live site's pre.cpp: light grey box, thin border — not the
   dark-theme look this started as; corrected against the real page. */
.code-block {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #1a1a1a;
  border-radius: 0 0 6px 6px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.75rem;
  margin: 0 0 24px;
  white-space: pre;
}

.download-action { margin-bottom: 30px; }
.btn {
  display: inline-block;
  background: var(--accent-orange);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover { background: #e56a00; text-decoration: none; color: #fff; }
.btn.secondary { background: var(--brand-blue); }
.btn.secondary:hover { background: var(--brand-blue-dark); }

.price-badge {
  display: inline-block;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
  margin-left: 8px;
}
.sidebar-callout .price-badge { display: block; width: fit-content; margin: 0 0 12px; }

/* ---------------- lists (tags / search / downloads) ---------------- */

.module-list { list-style: none; margin: 0; padding: 0; }
.module-list li {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.module-list .name { font-weight: 600; font-size: 1.05rem; }
.module-list .meta { color: var(--ink-soft); font-size: 0.85rem; }
.search-snippet {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-style: italic;
}

/* One card per module, grouping every version of that module the user has
   downloaded — see downloads/index.php + DownloadController::index(). */
.download-list { list-style: none; margin: 0; padding: 0; }
.download-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.download-icon-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gpl-green);
  color: #fff;
}
.download-icon-btn:hover { background: #e56a00; }
.download-body { flex: 1 1 auto; min-width: 0; }
.download-body .name { font-weight: 600; font-size: 1.05rem; }
.download-body .meta { color: var(--ink-soft); font-size: 0.85rem; }
.download-version-picker {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.download-version-picker select {
  display: block;
  margin-top: 4px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.85rem;
  max-width: 100%;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud .tag-pill { font-size: 0.95rem; padding: 6px 14px; }

/* Tag/category browsing: name + brief description + first picture,
   matching what the original library browser showed per page. */
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.summary-thumb {
  flex: 0 0 auto;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.summary-body { flex: 1 1 auto; min-width: 0; }
.summary-body .name { font-weight: 600; font-size: 1.05rem; }
.summary-body .meta { color: var(--ink-soft); font-size: 0.85rem; }
.summary-desc { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
@media (max-width: 480px) {
  .summary-thumb { width: 64px; height: 64px; }
}

form.inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
form.inline-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.95rem;
}

@media (min-width: 720px) {
  .page-header h1 { font-size: 2rem; }
}

/* ---------------- orange accents: bullets, subtle outlines ---------------- */

.docs-block ul, .example-box ul, .output-box ul, .member-list ul {
  padding-left: 1.3em;
  margin: 0.6em 0;
}
.docs-block li::marker,
.example-box li::marker,
.output-box li::marker,
.member-list li::marker {
  color: var(--accent-orange);
}

/* ---------------- Interface section ---------------- */

.interface-block {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-orange);
  border-radius: 0 6px 6px 0;
  padding: 14px 16px;
  margin-bottom: 24px;
  background: var(--bg-alt);
}
.interface-block > p {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
  font-weight: bold;
  color: var(--accent-orange);
}

.interface-block > ul { list-style: none; margin: 10px 0 0; padding: 0; }
.interface-block li { padding: 6px 0; border-top: 1px solid var(--line); }
.interface-block li:first-child { border-top: none; }
.interface-block code { font-size: 0.85rem; }
.interface-block a { color: var(--brand-blue); }
.interface-block a:hover { color: var(--accent-orange); }

/* ---------------- Members breakdown ---------------- */

.member-list .member {
  border-left: 3px solid var(--accent-orange);
  padding-left: 16px;
  margin: 26px 0 38px;
}
/* Tightens the gap to the .member-kind label above, and to the code/docs
   below — sizes now come from the base h2/h3 scale, not a local override. */
.member-list h2, .member-list h3 { margin-top: 2px; margin-bottom: 10px; }
.member-kind {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
}

/* ---------------- Interactive Calculator ---------------- */

.calculator {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 18px 16px;
  margin: 14px 0 26px;
}
.calculator .doc-label { margin-bottom: 10px; }

.calc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 14px;
}
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
}
.calc-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.calc-field-name {
  color: var(--brand-blue);
  font-weight: 700;
  font-style: italic;
  border-bottom: 1px dotted var(--brand-blue);
  cursor: help;
}
/* Whichever field is currently ranged becomes the graph's x-axis — spelled
   out right on its own label, not just on the axis title down in the
   graph itself, so it reads clearly the moment Range is toggled on. */
.calc-field[data-mode="range"] .calc-field-name::after {
  content: " (x-axis)";
  font-weight: 400;
  font-style: normal;
  color: var(--ink-soft);
}
.calc-field input {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 0.9rem;
  width: 130px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.calc-field input:focus {
  outline: none;
  border-color: var(--accent-orange);
}

/* Toggle that turns one field's single input into a lower/upper/points
   range trio — see calculator.js setFieldMode(). Only one field across a
   whole .calculator may be active at once. */
.calc-range-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  cursor: pointer;
  flex: 0 0 auto;
}
.calc-range-toggle:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.calc-range-toggle.is-active {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #fff;
}

/* The lower/upper/points trio is one range spec, not three unrelated
   fields — a thin line behind the boxes (like a bracket) makes that
   grouping visible at a glance, not just implied by proximity. */
.calc-range-inputs:not([hidden]) { display: flex; gap: 6px; position: relative; }
.calc-range-inputs:not([hidden])::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: var(--accent-orange);
  opacity: 0.5;
}
.calc-range-inputs input { width: 88px; position: relative; background: var(--bg); }
.calc-range-inputs input::placeholder { font-size: 0.72rem; }
.calc-fields input::placeholder { font-size:0.8rem; }

/* Clock icon that reveals a start/end/step trio + Play button — only
   shown for a field that isn't the current x-axis range, and only once
   WASM has loaded (see calculator.js syncFieldVisibility()/
   startAnimation()). Pressing Play steps that field's value from start
   to end every 500ms, recomputing and redrawing the whole graph each
   tick — everything downstream (rows, log scale, PNG export) is the
   same code path a manual edit already goes through. */
.calc-animate-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  flex: 0 0 auto;
}
.calc-animate-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.calc-animate-toggle.is-active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

.calc-animate-inputs:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.calc-animate-inputs input { width: 62px; background: var(--bg); }
.calc-animate-inputs input::placeholder { font-size: 0.7rem; }
.calc-animate-play {
  background: var(--brand-blue);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  flex: 0 0 auto;
}
.calc-animate-play.is-active { background: var(--accent-orange); }

/* The row input currently being driven by the timer — disabled (the
   timer owns it while playing) and highlighted so it reads as "in
   motion" rather than just greyed out. */
.calc-row-field input.is-animating {
  border-color: var(--brand-blue);
  background: #eaf4fb;
  color: var(--brand-blue-dark);
  font-weight: 700;
}

/* One row per line on the graph — see calculator.js addRow(). Only shown
   once a field is ranged; the badge number/colour matches the line and
   legend entry it produces. */
.calc-rows-wrap {
  margin: 4px 0 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.calc-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.calc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}
.calc-row-badge {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-row-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; flex: 1 1 auto; }
.calc-row-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; }
.calc-row-field-name { color: var(--brand-blue); font-weight: 700; font-style: italic; border-bottom: 1px dotted var(--brand-blue); cursor: help; width: fit-content; }
.calc-row-field input {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.85rem;
  width: 110px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.calc-row-field input:focus { outline: none; border-color: var(--accent-orange); }
.calc-row-remove {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.9rem;
}
.calc-row-remove:hover { border-color: #c62828; color: #c62828; }
.calc-row-remove[hidden] { display: none; }

.calc-add-row {
  background: none;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--brand-blue);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 14px;
  cursor: pointer;
}
.calc-add-row:hover { border-color: var(--brand-blue); background: var(--bg); }

.calc-result:not([hidden]) {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.calc-result {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.calc-result-label {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.calc-output {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-orange);
  word-break: break-word;
}
.calc-output.is-error {
  color: #c62828;
  font-family: inherit;
  font-weight: 400;
  font-size: 0.85rem;
}

/* Range-mode result: a hand-rolled SVG line chart (no charting library —
   see calculator.js renderMultiGraph()), one line per row/series, plus a
   combined table of every computed value, since "the output will then
   show all the values" as well as a graph. */
.calc-graph-wrap { border-top: 1px solid var(--line); padding-top: 12px; }
.calc-graph-status {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-style: italic;
}
.calc-scale-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
  cursor: pointer;
  width: fit-content;
}
.calc-scale-toggle input { margin: 0; }
.calc-graph {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
}
.calc-graph-grid { stroke: var(--line); stroke-width: 1; }
.calc-graph-axis { stroke: var(--ink-soft); stroke-width: 1; }
.calc-graph-label {
  fill: var(--ink-soft);
  font-size: 9px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
}
.calc-graph-axis-title {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.calc-graph-line {
  fill: none;
  stroke: var(--accent-orange);
  stroke-width: 2;
}
.calc-graph-dot { fill: var(--brand-blue); }

/* One entry per row/series — swatch colour matches that row's badge and
   its line/dots on the graph above. */
.calc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 0.8rem;
}
.calc-legend-entry { display: flex; align-items: center; gap: 6px; }
.calc-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.calc-legend-label { font-family: "SFMono-Regular", Consolas, Menlo, monospace; }
.calc-legend-error { color: #c62828; font-size: 0.75rem; }

.calc-values-list {
  margin-top: 10px;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 0.78rem;
}
.calc-values-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 10px;
}
.calc-values-row:nth-child(odd) { background: var(--bg); }
.calc-values-row.calc-values-head {
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt) !important;
}
.calc-values-empty { padding: 8px 10px; color: var(--ink-soft); font-size: 0.85rem; margin: 0; }

/* Embed snippet generator — see calculator.js buildEmbedSnippet(). PNG
   download sits alongside the Export toggle (.calc-export-buttons), not
   inside the panel — it needs whatever graph is currently on screen
   regardless of which embed mode the panel below has selected, or
   whether the panel is even open. */
.calc-export { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.calc-export-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-export-toggle, .calc-export-png {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--brand-blue);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 6px 12px;
  cursor: pointer;
}
.calc-export-toggle:hover, .calc-export-png:hover { border-color: var(--brand-blue); }
.calc-export-toggle.is-active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.calc-export-panel { margin-top: 10px; }
.calc-export-modes { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 0.85rem; }
.calc-export-modes label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.calc-export-note { color: #c62828; font-size: 0.8rem; margin: 0 0 8px; }
.calc-export-code {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 0.78rem;
  resize: vertical;
  background: var(--bg);
}
.calc-export-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.calc-export-copy {
  background: var(--accent-orange);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 6px 12px;
  cursor: pointer;
}
.calc-export-copy:hover { background: #e56a00; }
.calc-export-copy.is-copied { background: var(--gpl-green); }

/* ---------------- \begin{hidden} more/less toggle ---------------- */

.hidden-toggle { margin: 8px 0; }
.toggle-link {
  display: inline-block;
  color: var(--accent-orange);
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-orange);
}
.toggle-link:hover { border-bottom-style: solid; text-decoration: none; }
.versions-toggle { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------------- Page editing (fork/copy/direct-edit) ---------------- */

.docs-block, .member-list .member { position: relative; }

.edit-pencil {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid var(--gpl-green);
  background: var(--gpl-green);
  color: #fff;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.edit-pencil:hover { background: #256b2b; border-color: #256b2b; }

.edit-form[hidden] { display: none; }
.edit-form {
  margin: 12px 0 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edit-field { display: flex; flex-direction: column; gap: 6px; }
.edit-field > span:first-child { font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.edit-hint { font-size: 0.75rem; color: var(--ink-soft); font-weight: 400; }
.edit-form input[type="text"],
.edit-form input[type="email"],
.edit-form textarea {
  font: inherit;
  font-size: 0.88rem;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}
.edit-form textarea { resize: vertical; }

.edit-insert-eq { align-self: flex-start; }
.edit-insert-eq:disabled { opacity: 0.5; cursor: not-allowed; }

.edit-params-rows, .edit-list-rows { display: flex; flex-direction: column; gap: 8px; }
.edit-param-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.6fr) 2fr 0.8fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.edit-list-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.edit-remove-row {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
}
.edit-remove-row:hover { border-color: #c62828; color: #c62828; }
.edit-add-param, .edit-add-list-row { align-self: flex-start; }

.edit-actions { display: flex; align-items: center; gap: 10px; }
.edit-error { color: #a13c3c; font-size: 0.82rem; }

.edit-compile-result { margin-top: 10px; padding: 10px 14px; border-radius: 6px; font-size: 0.85rem; }
.edit-compile-result.is-pending { background: #f0f0f0; color: #555; }
.edit-compile-result.is-ok { background: var(--gpl-green-bg); color: var(--gpl-green); font-weight: 600; }
.edit-compile-result.is-fail { background: #fdecea; color: #a13c3c; }
.edit-compile-result.is-fail pre {
  margin: 0; padding: 10px; background: #fff; border: 1px solid #f0c6c2; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
}

.edit-toolbar { display: flex; flex-direction: column; gap: 8px; }
.edit-toolbar form { margin: 0; }

@media (max-width: 900px) {
  .edit-param-row { grid-template-columns: 1fr; }
}

/* ---------------- Raw source editor (pages/_edit_raw.php) ---------------- */

.edit-raw-wrap { margin: 16px 0; }
.edit-pencil-raw {
  position: static;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-size: 0.82rem;
}
.edit-raw-code {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 0.82rem;
  min-height: 400px;
  white-space: pre;
}

/* ---------------- Path editor (pages/_edit_path.php) ---------------- */

.edit-path-wrap { margin: 16px 0; }
.edit-pencil-path {
  position: static;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-size: 0.82rem;
}
.edit-path-warning {
  margin: 0;
  padding: 10px 12px;
  background: #fff7e6;
  border: 1px solid #f0d999;
  border-radius: 4px;
  font-size: 0.82rem;
  color: #7a5b00;
}
.edit-path-preview { word-break: break-all; }

.edit-path-tree { gap: 8px; }
.edit-path-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 0.85rem;
}
.edit-path-crumb {
  border: none;
  background: none;
  color: var(--brand-blue);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.edit-path-crumb:hover { background: var(--bg-alt); text-decoration: underline; }
.edit-path-crumb:last-child { color: var(--ink); }
.edit-path-sep { color: var(--ink-soft); }

.edit-path-children {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 20px;
}
.edit-path-child {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.edit-path-child:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.edit-path-empty { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }

.edit-path-newchild { display: flex; gap: 8px; }
.edit-path-newchild input { flex: 1; }

.edit-path-category { color: var(--ink-soft); background: var(--bg-alt); font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 0.82rem; }

/* ---------------- Home page ---------------- */

.home-hero { padding: 12px 0 8px; }
.home-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 640px; margin: 0 0 24px; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.home-hero-actions .btn { padding: 11px 22px; }
.home-privacy-note { margin: 14px 0 0; font-size: 0.82rem; color: var(--ink-soft); }

.home-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 8px;
}

/* Live demo + embed-anywhere: a two-column showcase, text paired with a
   real running widget (not a screenshot) — reversed on the second row so
   the page has some rhythm rather than every section reading identically. */
.home-demo, .home-embed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin: 64px 0;
}
.home-embed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.home-embed .browser-mock { order: 1; }
.home-embed .home-embed-copy { order: 2; }

.home-demo h2, .home-embed h2 { margin: 0 0 12px; }
.home-demo-copy p, .home-embed-copy p { color: var(--ink-soft); }
.home-hint { font-size: 0.88rem; color: var(--ink-soft); }

.home-demo-widget {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
}
.home-demo-widget .calculator { margin: 0; }

.browser-mock {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.browser-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.browser-mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.browser-mock-url {
  margin-left: 10px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 10px;
  flex: 1;
}
.browser-mock-body { padding: 18px; background: var(--bg); }
.browser-mock-body .calculator { margin: 0; }

.home-embed-snippet {
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.8rem;
  overflow-x: auto;
  margin: 14px 0;
}

@media (max-width: 800px) {
  .home-demo, .home-embed { grid-template-columns: 1fr; }
  .home-embed .browser-mock, .home-embed .home-embed-copy { order: initial; }
}

/* Compile / Fetch once / Run offline — reuses .home-step/.home-step-num
   from the Learn/Calculate/Visualise/Build steps below, just in a
   3-column grid instead of 4. */
.home-wasm { margin: 64px 0; }
.home-wasm > p { color: var(--ink-soft); max-width: 720px; }
.home-wasm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 22px 0;
}
@media (max-width: 800px) {
  .home-wasm-grid { grid-template-columns: 1fr; }
}

/* Learn / Calculate / Visualise / Build */
.home-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 56px 0;
}
.home-step {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 18px;
}
.home-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.home-step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.home-step p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

@media (max-width: 800px) {
  .home-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .home-steps { grid-template-columns: 1fr; }
}

/* Equation -> C++ -> Calculate -> Plot -> Embed pipeline */
.home-pipeline { margin: 64px 0; }
.home-pipeline p { color: var(--ink-soft); max-width: 720px; }
.pipeline-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0;
}
.pipeline-step {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brand-blue);
}
.pipeline-arrow { color: var(--accent-orange); font-weight: 700; }

/* Most viewed */
.home-popular { margin: 56px 0; }
.home-popular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.home-popular-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--ink);
}
.home-popular-card:hover { border-color: var(--brand-blue); text-decoration: none; }
.home-popular-name { display: block; font-weight: 600; }
.home-popular-category { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }

@media (max-width: 800px) {
  .home-popular-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .home-popular-grid { grid-template-columns: 1fr; }
}

.home-open {
  margin: 56px 0 24px;
  padding: 24px;
  background: var(--gpl-green-bg);
  border-radius: 10px;
  text-align: center;
}
.home-open h2 { margin: 0 0 8px; }
.home-open p { margin: 0 auto; max-width: 560px; color: var(--ink-soft); }