:root {
  /* Wordmark colors: "RFD4-" purple and "Proteina" teal. */
  --rfproteina-rf: #8d52ad;
  --rfproteina-proteina: #186c70;

  /* "On the IPD compute cluster?" callout. Tinted toward the RF purple so the box reads as ours,
     but desaturated enough that a page carrying several of them doesn't turn into a wall of pink. */
  --ipd-callout-bg: #f7f2fb;
  --ipd-callout-title-bg: #ebe1f3;
  --ipd-callout-border: #d4c0e3;
  /* The heading and the accent bar are the "RFD4-" purple from the wordmark, verbatim.
     5.6:1 on the title ground, so it clears AA as heading text and not just as branding. */
  --ipd-callout-title-fg: #6b3a86;
  --ipd-callout-accent: var(--rfproteina-rf);
  --ipd-callout-code-bg: #f1e9f7;
}

html[data-theme="dark"] {
  --ipd-callout-bg: #231d2e;
  --ipd-callout-title-bg: #2f2640;
  --ipd-callout-border: #4a3b63;
  /* Same hue as the wordmark purple, lifted for the dark ground -- #a80c84 itself only
     reaches 2.1:1 there and would be unreadable. These clear AA at 5.4:1. */
  --ipd-callout-title-fg: #c9aee0;
  --ipd-callout-accent: #b798cd;
  --ipd-callout-code-bg: #1c1826;
}

:root {
  /* "Try it live" cloud-launch callout. Blue, not the RF purple -- distinct from ipd-cluster. */
  --cloud-launch-bg: #eef6ff;
  --cloud-launch-border: #2b7de9;
  --cloud-launch-title-fg: #14497a;
}

html[data-theme="dark"] {
  --cloud-launch-bg: #16232f;
  --cloud-launch-border: #4a90e2;
  --cloud-launch-title-fg: #7fb2ee;
}

/* Project colors for the theme: teal and purple, with the dark-mode tints used on the project page. */
html[data-theme="light"] {
  --pst-color-primary: #186c70;
  --pst-color-secondary: #8d52ad;
  --pst-color-accent: #8d52ad;
  --pst-color-link: #186c70;
  --pst-color-link-hover: #8d52ad;
}

html[data-theme="dark"] {
  --pst-color-primary: #40d9be;
  --pst-color-secondary: #b798cd;
  --pst-color-accent: #b798cd;
  --pst-color-link: #40d9be;
  --pst-color-link-hover: #b798cd;
  --pst-color-background: #151723;
  --pst-color-on-background: #1e2231;
  --pst-color-surface: #1e2231;
  --pst-color-on-surface: #d1cedc;
}

body {
  font-family: Helvetica, Arial, sans-serif;
}

.navbar-brand img {
  max-height: 1.9rem;
}

@media (max-width: 575.98px) {
  .navbar-brand img {
    max-width: calc(100vw - 11rem);
    height: auto;
  }
}

a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.bd-header .navbar-nav > li > a.nav-link:hover,
.bd-header .navbar-nav > li > a.nav-link:focus {
  color: var(--rfproteina-rf);
}

/* Notebook markdown tables (settings, etc.): smaller font + wrap long inline-code keys so the
   Effect column keeps room instead of forcing a wide, horizontally-scrolling table. */
.bd-article table.table { width: 100%; font-size: 0.8rem; }
.bd-article table.table td,
.bd-article table.table th { padding: 0.3rem 0.5rem; line-height: 1.3; }
.bd-article table.table td code,
.bd-article table.table td code span.pre,
.bd-article table.table th code,
.bd-article table.table th code span.pre {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.92em;
}

/* ---------------------------------------------------------------------------
   "On the IPD compute cluster?" callout — `:class: ipd-cluster`.

   The theme only ships styling for its own admonition names (note/tip/warning), so a custom
   class renders as an unstyled grey box unless we draw the whole thing. Everything below is
   scoped to `.ipd-cluster` so stock admonitions are untouched.
   --------------------------------------------------------------------------- */
.bd-article .admonition.ipd-cluster {
  background-color: var(--ipd-callout-bg);
  border: 1px solid var(--ipd-callout-border);
  border-left: 0.3rem solid var(--ipd-callout-accent);
  border-radius: 0.4rem;
  box-shadow: none;
  margin: 1.25rem 0;
}

.bd-article .admonition.ipd-cluster > .admonition-title {
  background-color: var(--ipd-callout-title-bg);
  color: var(--ipd-callout-title-fg);
  font-weight: 600;
  margin-bottom: 0;
  /* The theme reserves 2rem of left padding for the icon it parks in the top-left. Ours sits
     top-right instead, so give the left back to the heading -- otherwise the text stays
     indented behind a gap with nothing in it -- and reserve room on the right. */
  padding-left: 0.6rem;
  padding-right: 2.2rem;
}

/* The server icon, parked in the top-right corner.

   It has to live in `::after`: that is the theme's icon slot. `::before` is NOT free -- the
   theme uses it as the title's full-size background layer at `z-index: -1`, so an emoji placed
   there renders *behind* the title bar. The theme pins that slot to `left: 0` with a side
   margin, so unset both and pin to the right instead. `font: inherit` drops the inherited
   FontAwesome family, without which the emoji does not render at all. */
.bd-article .admonition.ipd-cluster > .admonition-title::after {
  content: "🖥️";
  font: inherit;
  color: inherit;
  width: auto;
  height: auto;
  margin: 0;
  left: auto;
  right: 0.7rem;
  top: 0.42rem;
}

/* Code blocks inside the callout. The background lives on the `pre`, not on the `div.highlight`
   wrapper (which the theme already leaves transparent), so target the `pre` -- otherwise the
   theme's cool grey card sits on this warm ground and reads as a foreign element. Tint it from
   the callout palette instead so it still delineates code but belongs to the box. */
.bd-article .admonition.ipd-cluster pre {
  background-color: var(--ipd-callout-code-bg);
  border-color: var(--ipd-callout-border);
}

.bd-article .admonition.ipd-cluster p:last-child {
  margin-bottom: 0;
}

/* "Try it live" cloud-launch box -- raw HTML in notebook markdown cells (pandoc, not MyST, so no `:class:` admonition). */
.bd-article .cloud-launch-box {
  background-color: var(--cloud-launch-bg);
  border-left: 4px solid var(--cloud-launch-border);
  border-radius: 6px;
  padding: 14px 20px;
  margin: 1.25rem 0;
}
.bd-article .cloud-launch-box .cloud-launch-title {
  font-weight: 700;
  color: var(--cloud-launch-title-fg);
  margin-bottom: 10px;
  font-size: 0.95rem;
}
.bd-article .cloud-launch-box .badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bd-article .cloud-launch-box .badge-group img {
  height: 28px;
  display: block;
}

/* =========== workflow hub ===========  */
/* ---------------------------------------------------------------------------
   Workflow diagram — "instrument panel".

   Two semantic colors, used consistently and never decoratively:
     purple  (--wf-specify) = what YOU specify   — routes, the CIF, conditions
     teal    (--wf-return)  = what COMES BACK    — designs, metrics
   Both are the wordmark's own colors, which sets "RFD4-" in purple and
   "Proteina" in teal. The model node is where the two meet.

   Labels use the wordmark's monospace stack, so the diagram speaks in the
   brand's typographic voice rather than a generic "technical" font.
   --------------------------------------------------------------------------- */

:root {
  --wf-specify: #8d52ad;
  --wf-return: #186c70;
  --wf-ink: #1f2328;
  --wf-ink-soft: #5b636d;
  --wf-ink-faint: #8b939d;
  --wf-surface: #ffffff;
  --wf-surface-specify: #f7f2fb;
  --wf-surface-return: #edf6f6;
  --wf-surface-model: #fbfbfc;
  --wf-line: #d6dae0;
  --wf-line-strong: #aeb5bd;
  --wf-focus: #8d52ad;
  --wf-focus-neutral: #57606a;
}

html[data-theme="dark"] {
  --wf-specify: #b798cd;
  --wf-return: #40d9be;
  --wf-ink: #e9edf2;
  --wf-ink-soft: #a9b2bd;
  --wf-ink-faint: #79828d;
  --wf-surface: #1c2027;
  --wf-surface-specify: #231d2e;
  --wf-surface-return: #16282a;
  --wf-surface-model: #222831;
  --wf-line: #3a424c;
  --wf-line-strong: #59626d;
  --wf-focus: #b798cd;
  --wf-focus-neutral: #c9d1d9;
}

/* The workflow page is the diagram, so its article column drops the prose measure and takes the
   full content width. `:has()` scopes this to the one page that carries the diagram, and the
   intro's own 46rem cap keeps the paragraphs above it readable. The page also removes the
   secondary sidebar, which is what frees the space.

   The selector matches the theme's own `.bd-main .bd-content .bd-article-container` depth on
   purpose: a bare `.bd-article-container:has(...)` loses to it on specificity and does nothing. */
.bd-main .bd-content .bd-article-container:has(svg.wf) {
  max-width: none;
}

/* Above its 900px viewBox the diagram scales up rather than out, so the 10px labels grow with it.
   That is the whole point: at the article's old width it rendered at 0.8x and the labels were
   sub-9px. */
.wf {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* The theme underlines every `a`, and an SVG `<a>` is still an `a` — without this every label
   in the diagram gets underlined, sublabels included. */
.wf a,
.wf a:hover,
.wf a:focus {
  text-decoration: none;
}

/* ---- text roles ---- */
.wf-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--wf-ink-faint);
}
.wf-ink-specify { fill: var(--wf-specify); }
.wf-ink-return { fill: var(--wf-return); }

/* Section label used *inside* a box, above its non-clickable sub-chips. Smaller and
   fainter than .wf-eyebrow so it reads as a caption, not as a second heading. */
.wf-inner-eyebrow {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--wf-ink-faint);
}

.wf-axis {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  fill: var(--wf-ink-faint);
}

.wf-node-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--wf-ink);
}
.wf-node-sub {
  font-size: 10.5px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--wf-ink-soft);
}

/* Chips carry an icon then a label, so the label starts where it is placed rather than
   centring on it — centring drives the text back over the icon. */
.wf-chip-label {
  font-size: 11.5px;
  font-weight: 700;
  fill: var(--wf-ink);
}
/* Left-aligned like .wf-chip-label above it, so a chip's two lines share a left edge. Centring
   this one (as an earlier layout did) walks the text out past the chip's own border, since the
   x it is given is the start of the label, not the middle of the chip. */
.wf-chip-sub {
  font-size: 9px;
  text-anchor: start;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--wf-ink-faint);
}

.wf-tab-label {
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--wf-specify);
}
.wf-tab-sub {
  font-size: 8.5px;
  text-anchor: middle;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--wf-ink-faint);
}

.wf-pill-label {
  font-size: 9.5px;
  text-anchor: middle;
  fill: var(--wf-ink-soft);
}

.wf-loop-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--wf-specify);
}
.wf-loop-sub {
  font-size: 8.5px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--wf-ink-faint);
}

/* Gates are named rather than numbered. A bare "1" next to a rail told the reader nothing
   without a legend, and the diagram has no room for one. */
.wf-gate-name {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--wf-return);
}
.wf-gate-name-loop { fill: var(--wf-specify); }

/* A hairline divider inside a card, separating its list from the notes below it. */
.wf-box-rule { fill: none; stroke: var(--wf-line); stroke-width: 1; }

.wf-gate-label {
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--wf-return);
}
.wf-gate-label-loop { fill: var(--wf-specify); }

/* Flat line icons. `fill` and `color` inherit into a <use>'s shadow content, so the symbol
   geometry needs no attributes of its own — one class sets the whole icon. */
.wf-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--wf-ink-soft);
}
.wf-ico-hair { stroke-width: 1.15; }
.wf-ico-specify { color: var(--wf-specify); }
.wf-ico-return { color: var(--wf-return); }
.wf-note {
  font-size: 9.5px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--wf-ink-faint);
}

.wf-metric-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--wf-ink);
}
.wf-metric-sub {
  font-size: 9px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--wf-ink-faint);
}

/* ---- shapes ---- */
.wf-node {
  fill: var(--wf-surface);
  stroke: var(--wf-line);
  stroke-width: 1;
  transition: stroke 120ms ease, filter 120ms ease;
}
.wf-node-specify { fill: var(--wf-surface-specify); stroke: var(--wf-specify); }
.wf-node-model { fill: var(--wf-surface-model); stroke: var(--wf-line-strong); stroke-width: 1.5; }
.wf-node-return { fill: var(--wf-surface-return); stroke: var(--wf-return); }
.wf-node-optional { fill: var(--wf-surface); stroke: var(--wf-line-strong); stroke-dasharray: 5 4; }
.wf-node-loop { fill: var(--wf-surface-specify); stroke: var(--wf-specify); stroke-dasharray: 5 4; }

/* A sub-box with no page of its own. Clicks fall straight through to the card behind it, so
   the whole card still opens its parent's page wherever you hit it. */
.wf-subchip { pointer-events: none; }

.wf-chip {
  fill: var(--wf-surface);
  stroke: var(--wf-line);
  stroke-width: 1;
  transition: stroke 120ms ease;
}

/* A sub-box that has a page of its own, and its label. Both selectors name two classes on
   purpose: a single-class `.wf-chip-link` loses to `.wf-chip` above on source order alone, which
   is exactly how these silently rendered as ordinary inert chips. Specificity, not position. */
.wf-chip.wf-chip-link {
  fill: var(--wf-surface-specify);
  stroke: var(--wf-specify);
}
.wf-chip-label.wf-ink-specify { fill: var(--wf-specify); }

/* Model-running modes use color only for their source of control: neutral for ordinary
   generation, purple for user-supplied structures/conditions, and green for metric gradients. */
.wf-mode-standard .wf-chip {
  fill: var(--wf-surface);
  stroke: var(--wf-line-strong);
}
.wf-mode-partial .wf-chip {
  fill: var(--wf-surface-specify);
  stroke: var(--wf-specify);
}
.wf-mode-partial .wf-chip-label { fill: var(--wf-specify); }
.wf-mode-metric .wf-chip {
  fill: var(--wf-surface-return);
  stroke: var(--wf-return);
}
.wf-mode-metric .wf-chip-label { fill: var(--wf-return); }

/* Marks the one route that leaves these docs, so a reader is not surprised by GitHub. */
.wf-chip-ext { font-size: 9px; fill: var(--wf-specify); }

.wf-tab { fill: var(--wf-surface-specify); stroke: var(--wf-specify); stroke-width: 1; }
.wf-pill { fill: none; stroke: var(--wf-line); stroke-width: 1; }
.wf-pill-on { fill: var(--wf-surface-model); stroke: var(--wf-line-strong); }
.wf-gate-box { fill: var(--wf-surface-return); stroke: var(--wf-return); stroke-width: 1; }
.wf-gate-box-loop { fill: var(--wf-surface-specify); stroke: var(--wf-specify); }

.wf-rail { fill: none; stroke: var(--wf-line-strong); stroke-width: 1.5; }
.wf-rail-specify { stroke: var(--wf-specify); }
.wf-rail-return { stroke: var(--wf-return); }
.wf-rail-loop { stroke: var(--wf-specify); stroke-dasharray: 4 3; }
.wf-arrowhead { fill: currentColor; }
.wf-rail-specify { color: var(--wf-specify); }
.wf-rail-return { color: var(--wf-return); }

.wf-metrics-rail { fill: none; stroke: var(--wf-line); stroke-width: 1; }
.wf-tick { fill: none; stroke: var(--wf-line); stroke-width: 1; stroke-dasharray: 2 3; }
.wf-bracket { fill: none; stroke: var(--wf-line-strong); stroke-width: 1; }

/* ---- interaction ---- */
.wf-link { cursor: pointer; }
.wf-link:hover .wf-node,
.wf-link:hover .wf-chip,
.wf-link:hover .wf-tab { stroke: var(--wf-specify); stroke-width: 2; }
.wf-link:hover .wf-node-label,
.wf-link:hover .wf-chip-label,
.wf-link:hover .wf-metric-label { fill: var(--wf-specify); }
.wf-link:focus-visible { outline: 2px solid var(--wf-focus); outline-offset: 3px; border-radius: 4px; }
.wf-mode-standard:hover .wf-chip { stroke: var(--wf-line-strong); }
.wf-mode-standard:hover .wf-chip-label { fill: var(--wf-ink); }
.wf-mode-standard:focus-visible { outline-color: var(--wf-focus-neutral); }
.wf-mode-metric:hover .wf-chip { stroke: var(--wf-return); }
.wf-mode-metric:hover .wf-chip-label { fill: var(--wf-return); }
.wf-mode-metric:focus-visible { outline-color: var(--wf-return); }

@media (prefers-reduced-motion: reduce) {
  .wf-node, .wf-chip { transition: none; }
}

/* ---------------------------------------------------------------------------
   Hub cards. Quickstart (.wf-card-primary, above) is the one primary entrypoint;
   these remaining cards are equal weight with each other.
   --------------------------------------------------------------------------- */
.wf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 2.25rem;
}

.wf-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--wf-line);
  border-radius: 0.5rem;
  background: var(--wf-surface);
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}
.wf-card:hover {
  border-color: var(--wf-specify);
  transform: translateY(-1px);
  text-decoration: none;
}
.wf-card:focus-visible { outline: 2px solid var(--wf-focus); outline-offset: 3px; }

/* Quickstart is the one entrypoint most first-time visitors want; it stands on
   its own full-width line above the card grid, in the brand colour, so it reads
   as the primary call to action rather than just another card. */
.wf-card-primary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 1.75rem 0 0.75rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--wf-specify);
  border-radius: 0.5rem;
  background: var(--wf-specify);
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
}
.wf-card-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  text-decoration: none;
}
.wf-card-primary:focus-visible { outline: 2px solid var(--wf-focus); outline-offset: 3px; }
.wf-card-primary .wf-card-title {
  color: #fff;
  font-size: 1.2rem;
}
.wf-card-primary .wf-card-body { color: rgba(255, 255, 255, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .wf-card-primary { transition: none; }
  .wf-card-primary:hover { transform: none; }
}

.wf-card-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--wf-specify);
}
.wf-card-body { font-size: 0.86rem; line-height: 1.45; color: var(--wf-ink-soft); }

.wf-card-soon {
  cursor: default;
  opacity: 0.6;
}
.wf-card-soon:hover { border-color: var(--wf-line); transform: none; }
.wf-card-soon .wf-card-title::after {
  content: "Coming soon";
  font-family: var(--pst-font-family-base, sans-serif);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: normal;
  color: var(--wf-ink-soft);
  margin-left: 0.5rem;
}

/* A card that also lists specific sub-pages. The card itself is a <div> (not a
   link) so the title/body link and the sub-page links can be separate anchors
   instead of nesting <a> inside <a>. */
.wf-card-group { cursor: default; }
.wf-card-group:hover { border-color: var(--wf-line); transform: none; }

.wf-card-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
}
.wf-card-link:hover .wf-card-title { color: var(--wf-specify); text-decoration: underline; }
.wf-card-link:focus-visible { outline: 2px solid var(--wf-focus); outline-offset: 3px; }

.wf-card-sublinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.wf-card-subbutton {
  font-size: 0.78rem;
  line-height: 1.3;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--wf-line);
  border-radius: 999px;
  color: var(--wf-ink-soft);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}
.wf-card-subbutton:hover {
  border-color: var(--wf-specify);
  color: var(--wf-specify);
  text-decoration: none;
}
.wf-card-subbutton:focus-visible { outline: 2px solid var(--wf-focus); outline-offset: 3px; }

/* Left-aligned with the cards above it, not centred on the diagram below, so the
   left edge of the page stays a single straight line. */
.wf-intro {
  max-width: 46rem;
  margin: 0 0 1.6rem;
}
.wf-intro p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wf-ink-soft);
  margin: 0 0 0.7rem;
}
.wf-intro p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .wf-card { transition: none; }
  .wf-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   "What an annotated CIF holds" figure. Same two-colour grammar as the workflow
   map: standard mmCIF columns neutral, condition columns purple, because the
   conditions are the part you author.
   --------------------------------------------------------------------------- */
.cif-fig { max-width: 820px; }

.cif-card { fill: var(--wf-surface); stroke: var(--wf-line); stroke-width: 1; }
.cif-rule { fill: none; stroke: var(--wf-line); stroke-width: 1; }
.cif-rule-soft { stroke-dasharray: 3 3; }
.cif-divider { fill: none; stroke: var(--wf-specify); stroke-width: 1; opacity: 0.45; }
.cif-brace { fill: none; stroke: var(--wf-line-strong); stroke-width: 1; }
.cif-brace-specify { stroke: var(--wf-specify); }

.cif-filename { font-size: 12px; font-weight: 700; fill: var(--wf-ink); }
.cif-th { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; fill: var(--wf-ink-faint); }
.cif-th-specify { fill: var(--wf-specify); }
.cif-td { font-size: 11px; fill: var(--wf-ink); }
.cif-faint { fill: var(--wf-ink-faint); }
.cif-set { fill: var(--wf-specify); font-weight: 700; }
.cif-level {
  font-size: 9px;
  letter-spacing: 0.05em;
  fill: var(--wf-ink-faint);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cif-note {
  font-size: 10px;
  fill: var(--wf-ink-soft);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ---------------------------------------------------------------------------
   Landing page.
   --------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin: 0 0 2rem;
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
}

.hero-copy p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wf-ink-soft);
  margin: 0 0 0.7rem;
}
.hero-lede {
  font-size: 1.15rem !important;
  font-weight: 600;
  color: var(--wf-ink) !important;
  letter-spacing: -0.01em;
}

.hero-actions { margin-top: 1.1rem !important; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero-btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--wf-specify);
  color: #fff;
  border: 1px solid var(--wf-specify);
}
.hero-btn:hover { text-decoration: none; filter: brightness(1.08); }
.hero-btn-quiet {
  background: transparent;
  color: var(--wf-specify);
}

.hero-figure { margin: 0; }
.hero-figure img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  height: auto;
}

.section-lede {
  max-width: 46rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wf-ink-soft);
}

/* The deck's charts are white-background raster. Give them a white card of their own so the
   axis labels stay legible in dark mode instead of glaring or washing out. */
.fig-card {
  margin: 1.2rem auto 1.6rem;
  padding: 1rem 1rem 0.6rem;
  max-width: 780px;
  background: #fff;
  border: 1px solid var(--wf-line);
  border-radius: 0.5rem;
}
.fig-card-narrow { max-width: 520px; }
.fig-card img { display: block; width: 100%; height: auto; }

/* The chart is a raster from the deck and carries no axis label of its own, so the y label is set
   in HTML beside it. Rotating with writing-mode rather than baking it into the PNG keeps it
   selectable, searchable, and readable to a screen reader. */
.fig-plot { display: flex; align-items: center; gap: 0.55rem; }
.fig-plot img { flex: 1 1 auto; min-width: 0; }
.fig-ylabel {
  flex: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.78rem;
  line-height: 1;
  color: #5b636d;
  white-space: nowrap;
}

/* Task labels for the bar clusters, pinned to their measured centres in the raster. Below the
   card's comfortable width they would collide, so they fall back to an evenly spaced row. */
.fig-img { position: relative; flex: 1 1 auto; min-width: 0; }
.fig-xgroups { position: relative; height: 1.4rem; margin-top: 0.15rem; }
.fig-xgroups span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 600;
  color: #2a2f36;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .fig-xgroups { display: flex; justify-content: space-between; height: auto; }
  .fig-xgroups span { position: static; transform: none; left: auto !important; font-size: 0.7rem; }
  .fig-ylabel { display: none; }
}

/* Partner marks. The two sit on a shared baseline with a hairline between them, so a real logo
   and the interim text lockup read as one row rather than as a logo plus a caption. */
.hero-credits {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.3rem 0 0;
}
/* Funding acknowledgement, set smaller than the body copy so it reads as a credit line leading
   into the logos rather than as another paragraph of the pitch. */
.hero-ack {
  font-size: 0.8rem !important;
  line-height: 1.5;
  color: var(--wf-ink-faint) !important;
  margin: 1.2rem 0 0 !important;
  max-width: 34rem;
}

/* The marks have very different proportions: NVIDIA is a 5.5:1 strip, IPD is 3.3:1 with a third
   line of type, and the RosettaCommons mark ships with built-in clear space around a 3.3:1 lockup.
   Sizing them to a common height leaves the multi-line marks looking oversized, so each gets its
   own cap and they hang from a shared vertical centre. */
.hero-credits img {
  width: auto;
  flex: none;
  max-height: 26px;
}
.hero-credits img.hero-credit-ipd { max-height: 42px; }
.hero-credits img.hero-credit-rosetta { max-height: 80px; }
.hero-credit-rule {
  width: 1px;
  height: 32px;
  background: var(--wf-line);
  flex: none;
}
.fig-card figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5b636d;
  text-align: center;
}

.arch { max-width: 880px; margin-top: 1.2rem; }

/* In dark mode the theme dims every image and paints white behind it, so a transparent PNG keeps
   its lines readable. Right for a line diagram, wrong here: it puts a white slab behind the
   protein render, and it mutes the deck's charts, which already sit on a white card of their own.

   The theme's own selectors are `html[data-theme=dark] img:not(.only-dark,.dark-light)` and
   `... .bd-content img:not(...)`, so these have to carry the same `:not()` to outrank them rather
   than merely follow them in source order. */
html[data-theme="dark"] .bd-content .hero-figure img:not(.only-dark, .dark-light),
html[data-theme="dark"] .bd-content .fig-card img:not(.only-dark, .dark-light) {
  filter: none;
}
html[data-theme="dark"] .bd-content .hero-figure img:not(.only-dark, .dark-light) {
  background-color: transparent;
  border-radius: 0;
}

/* The partner marks carry real reverse variants now, so they need no plate. The theme already
   leaves `.only-dark` images alone; this just stops it dimming the NVIDIA green. */
html[data-theme="dark"] .bd-content .hero-credits img {
  filter: none;
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
   "Where each condition attaches" — the AtomArray strip on the inputs page.
   One accent only: purple means conditioned. Everything structural is neutral,
   so the two condition rows are the only thing competing for attention, and the
   difference between them (per cell vs per span) is the whole lesson.
   --------------------------------------------------------------------------- */
/* No cap of its own: let it use the full article column, which is what makes the cells
   readable. `.wf` already stops it at 900px on a wide screen. */
.aa-fig { margin-top: 0.6rem; }

.aa-group { fill: var(--wf-surface); stroke: var(--wf-line); stroke-width: 1; }
.aa-atom { fill: var(--wf-surface); stroke: var(--wf-line-strong); stroke-width: 1; }
.aa-off { fill: none; stroke: var(--wf-line); stroke-width: 1; stroke-dasharray: 3 3; }
.aa-on { fill: var(--wf-surface-specify); stroke: var(--wf-specify); stroke-width: 1.5; }

.aa-rule { fill: none; stroke: var(--wf-line); stroke-width: 1; }
.aa-rule-soft { stroke-dasharray: 3 4; }

.aa-rowlab {
  font-size: 11px;
  text-anchor: end;
  fill: var(--wf-ink-faint);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.aa-grouplab { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--wf-ink-soft); }
.aa-atomlab { font-size: 12px; text-anchor: middle; fill: var(--wf-ink); }
.aa-ell { font-size: 14px; text-anchor: middle; fill: var(--wf-ink-faint); }

.aa-condlab { font-size: 12.5px; font-weight: 700; text-anchor: end; fill: var(--wf-specify); }
.aa-condsub {
  font-size: 10.5px;
  text-anchor: end;
  fill: var(--wf-ink-faint);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.aa-onlab { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--wf-specify); }

.aa-note {
  font-size: 11px;
  fill: var(--wf-ink-soft);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.aa-swatch-on { fill: var(--wf-specify); }
.aa-swatch-off { fill: var(--wf-line-strong); }

/* pandoc wraps <summary> text in a <p> (block), pushing it below the native disclosure
   triangle -- force it inline to match. */
.bd-article details > summary > p {
  display: inline;
  margin: 0;
}

/* Give a dropdown some breathing room from whatever follows it */
.bd-article details {
  margin-bottom: 1.5em;
}

/* The shared tab line (site-nav.css) is fixed above the theme's own header. */
:root { --pst-header-height: 4rem; }
body > header.site-nav ~ * { scroll-margin-top: 130px; }
.bd-header { top: var(--site-nav-height, 62px) !important; }
.bd-sidebar-primary, .bd-sidebar-secondary { top: calc(var(--site-nav-height, 62px) + var(--pst-header-height)) !important; height: calc(100vh - var(--site-nav-height, 62px) - var(--pst-header-height)) !important; }
html { scroll-padding-top: calc(var(--site-nav-height, 62px) + var(--pst-header-height) + 14px); }

/* The architecture and latent explorers are project-page tabs: the shared tab line is their only header. */
.standalone-page { --pst-header-height: 0rem; }
.standalone-page .bd-header,
.standalone-page .bd-breadcrumbs,
.standalone-page .header-article-items { display: none !important; }