/* MICROROBOTICA / unified Microrobotics Simulation Framework docs site
 *
 * Hero block on the landing page autoplays the two showcase videos
 * side-by-side at the top, above the project-card grid.
 */

.msf-hero {
  margin: 0 0 2.5rem 0;
}

.msf-hero-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 760px) {
  .msf-hero-videos {
    grid-template-columns: 1fr;
  }
}

.msf-hero-video {
  background: var(--pst-color-surface);
  border: 1px solid var(--pst-color-border);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.msf-hero-video video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.msf-hero-caption {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--pst-color-text-muted);
  border-top: 1px solid var(--pst-color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.msf-hero-fullscreen {
  flex-shrink: 0;
  background: var(--pst-color-primary);
  color: var(--pst-color-on-primary, #fff);
  border: none;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 500;
  line-height: 1;
}
.msf-hero-fullscreen:hover {
  filter: brightness(1.1);
}
.msf-hero-fullscreen:focus-visible {
  outline: 2px solid var(--pst-color-link);
  outline-offset: 2px;
}

.msf-hero-blurb {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--pst-color-text-base);
  max-width: 70ch;
}

/* Project cards */
.msf-card {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.msf-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* Tighten the announcement bar so it doesn't crowd the navbar */
.bd-header-announcement {
  font-size: 0.85rem;
}
.bd-header-announcement p {
  margin: 0.4rem 0;
}

/* ── Hero caption: button group ─────────────────────────────────────── */
.msf-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Diagram button — styled like Fullscreen but with a distinct accent */
.msf-hero-diagram {
  flex-shrink: 0;
  background: var(--pst-color-secondary, #6c757d);
  color: #fff;
  border: none;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 500;
  line-height: 1;
}
.msf-hero-diagram:hover {
  filter: brightness(1.15);
}
.msf-hero-diagram:focus-visible {
  outline: 2px solid var(--pst-color-link);
  outline-offset: 2px;
}

/* ── Mermaid diagram modal ───────────────────────────────────────────── */
.msf-diagram-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msf-diagram-modal[hidden] {
  display: none;
}

.msf-diagram-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.msf-diagram-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--pst-color-background);
  border: 1px solid var(--pst-color-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
  /* Default to a generous size — the diagrams are wide and benefit
   * from real estate. Fullscreen toggle still bumps to 100vw/100vh.
   */
  width: min(96vw, 1500px);
  height: min(92vh, 1000px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msf-diagram-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--pst-color-text-muted);
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
}
.msf-diagram-modal-close:hover {
  background: var(--pst-color-surface);
  color: var(--pst-color-text-base);
}

.msf-diagram-modal-expand {
  position: absolute;
  top: 0.8rem;
  right: 2.7rem;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--pst-color-text-muted);
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
}
.msf-diagram-modal-expand:hover {
  background: var(--pst-color-surface);
  color: var(--pst-color-text-base);
}

.msf-diagram-modal.msf-diagram-modal-fullscreen .msf-diagram-modal-panel {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  margin: 0;
}

.msf-diagram-modal-title {
  margin: 0;
  padding: 1rem 1.25rem 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--pst-color-border);
  padding-right: 2.5rem; /* don't overlap close button */
}

.msf-diagram-modal-body {
  padding: 1.25rem;
  overflow: hidden;  /* clip area for pan/zoom — the SVG moves inside */
  flex: 1;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
.msf-diagram-modal-body .mermaid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* mermaid stamps the SVG with `width`/`height` attributes plus an
 * inline `max-width` to fit its natural size. Override so the diagram
 * scales up to fill the modal body — preserveAspectRatio="xMidYMid meet"
 * keeps it correctly proportioned. The msf.mermaidZoom() pan/zoom
 * transforms compose on top of this base size.
 */
.msf-diagram-modal-body .mermaid > svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* Prevent body scroll when modal is open */
body.msf-modal-open {
  overflow: hidden;
}

/* ── Navbar: spread links evenly across the full width ──────────────── */
/* The center section (nav links) should grow and center itself */
.navbar-header-items__center {
  flex: 1 1 0;
  justify-content: center !important;
}
/* Override the start section's auto right-margin so center gets equal space */
.navbar-header-items__start {
  margin-right: 0 !important;
}
/* End section also gets auto left-margin to balance */
.navbar-header-items__end {
  margin-left: 0 !important;
}

/* ── "More" dropdown: scrollable + max height ───────────────────────── */
.navbar-header-items .dropdown-menu {
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Visually group dropdown items that belong to the same toctree section.
 * The pydata theme places toctree-section items as consecutive .dropdown-item
 * elements. We give every item a subtle left-border accent and add a small
 * top gap before the first item of each visual group (items whose text
 * starts with a section-head marker set via data-section).
 */
.navbar-header-items .dropdown-menu .dropdown-item {
  white-space: normal;   /* allow long names to wrap */
  word-break: break-word;
}

/* ── Version switcher: widen so labels like "v0.2 (stable)" fit ───────── */
/* The theme's default button is sized for short tokens ("stable",
 * "latest") and clips longer switcher.json `name` values.  Let the
 * button grow to its text and give the dropdown a matching min-width. */
.version-switcher__button {
  min-width: 8.5rem;
  white-space: nowrap;
}
.version-switcher__menu {
  min-width: 8.5rem;
}
.version-switcher__menu .list-group-item {
  white-space: nowrap;
}

/* ── FontAwesome SVG sizing ─────────────────────────────────────────────
 * The original pydata-sphinx-theme fontawesome.js bundle auto-injected
 * the FA base stylesheet at load time. Our slim shim only carries icon
 * paths, so we add the minimum sizing rules here. Without these every
 * `<svg class="svg-inline--fa">` would render at its intrinsic
 * viewBox-pixel size (huge — half a screen for fa-list, fa-file-lines
 * in body content).
 */
.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}
.svg-inline--fa.fa-fw { width: 1.25em; }
.svg-inline--fa.fa-xs { font-size: 0.75em; }
.svg-inline--fa.fa-sm { font-size: 0.875em; }
.svg-inline--fa.fa-lg { font-size: 1.333em; line-height: 0.75em; vertical-align: -0.225em; }
.svg-inline--fa.fa-xl { font-size: 1.5em; }
.svg-inline--fa.fa-2xl { font-size: 2em; }
.svg-inline--fa.fa-2x { font-size: 2em; }
.svg-inline--fa.fa-3x { font-size: 3em; }

/* ── MSF theme tokens ───────────────────────────────────────────────────
 * Theme-aware colours used by both the glossary-term hint and the mermaid
 * `classDef`s in the diagrams. The diagram classDefs reference these via
 * `fill:var(--msf-ext-bg)` etc., so a CSS variable is all that has to flip
 * between light and dark — mermaid itself never needs to know.
 */
:root {
  /* glossary-term hover hint — a teal accent, distinct from body links */
  --msf-term-hint: #0e7c86;
  --msf-term-hint-strong: #0b626b;
  /* Semantic mermaid node colours. These are deliberately THEME-INDEPENDENT
   * (no dark override): a light pastel fill with dark text reads on both a
   * light and a dark canvas, so a node keeps its identity colour whichever
   * theme the reader is in. */
  /* external / dependency nodes (dashed border) */
  --msf-ext-bg: #e4ebfb;
  --msf-ext-border: #7f8fc4;
  --msf-ext-text: #2d3666;
  /* regulatory-metadata nodes */
  --msf-meta-bg: #fdeec2;
  --msf-meta-border: #c79c00;
  --msf-meta-text: #5a4500;
  /* audit-trail nodes */
  --msf-audit-bg: #fbdada;
  --msf-audit-border: #cc4444;
  --msf-audit-text: #7a1f1f;
  /* abstract-interface nodes */
  --msf-iface-bg: #efe1fb;
  --msf-iface-border: #9c6ade;
  --msf-iface-text: #4a2d6e;
}
html[data-theme="dark"] {
  --msf-term-hint: #3fc9d6;
  --msf-term-hint-strong: #6fe0ea;
}

/* ── Glossary term references ───────────────────────────────────────────
 * Sphinx renders `{term}` refs as `<a class="reference internal" href="…
 * #term-…">`. Strip the default link styling so a paragraph full of term
 * references doesn't look like a list of disconnected hyperlinks; give a
 * subtle teal dotted underline + help-cursor so readers know they can
 * hover. The tippy bubble carries the actual definition.
 */
a.reference.internal[href*="#term-"] {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--msf-term-hint);
  cursor: help;
}
a.reference.internal[href*="#term-"]:hover,
a.reference.internal[href*="#term-"]:focus {
  color: var(--msf-term-hint-strong);
  border-bottom-style: solid;
  border-bottom-color: currentColor;
}
/* Tippy popups occasionally land off-screen on narrow viewports — let them
 * scroll vertically instead of clipping. */
.tippy-box .tippy-content {
  max-height: 60vh;
  overflow-y: auto;
}

/* ── Mermaid edges with tooltips ────────────────────────────────────────
 * Tippy is bound to <path.flowchart-link>; widen the hit area so a thin
 * arrow is hoverable without pixel-perfect aiming.
 */
pre.mermaid path.flowchart-link,
div.mermaid path.flowchart-link {
  pointer-events: stroke;
}
pre.mermaid path.flowchart-link:hover,
div.mermaid path.flowchart-link:hover {
  stroke-width: 3px;
}

/* pydata-sphinx-theme applies a brightness/invert/contrast filter to
 * <img> and other media in dark mode to auto-darken light screenshots.
 * Mermaid SVGs get swept into that net and every colour we set below is
 * inverted, which is what made plain nodes look beige and subgraph
 * headings look dim. Opt out so our colours render at face value. */
.mermaid svg,
.mermaid-container svg,
pre.mermaid svg,
div.mermaid svg {
  filter: none !important;
}

/* ── Mermaid styling (light + dark) ─────────────────────────────────────
 * mermaid's own themes are low-contrast against the pydata canvas (esp.
 * dark mode, where plain nodes and edges nearly vanish). We repaint every
 * mermaid element from the --msf-* tokens below, which flip with the
 * theme — mermaid itself never has to know.
 *
 * Why it works: mermaid styles BASE nodes/edges/clusters through a
 * non-`!important` <style> block, so a plain `!important` rule outranks
 * it. classDef'd nodes are the catch — mermaid emits classDef colours as
 * inline AND ID-scoped `!important`, which no external rule can beat. So
 * the diagram `classDef`s carry NO colour (structural props only); these
 * rules then own every node's colour uniformly.
 *
 * Shape DOM varies by node type, but the shape element (or its wrapper
 * <g> for stadium nodes) always carries `.label-container`. We target
 * `.label-container` AND `.label-container path` to cover rect /
 * polygon / stadium alike. The label background (`g.label > rect`, no
 * class) is never matched.
 */
:root {
  --msf-mmd-node-bg: #eef1f7;
  --msf-mmd-node-border: #8b95ab;
  --msf-mmd-node-text: #1f2733;
  --msf-mmd-edge: #56607a;
  --msf-mmd-cluster-bg: rgba(0, 0, 0, 0.03);
  --msf-mmd-cluster-border: #aab2c4;
  --msf-mmd-cluster-text: #11151c;
  --msf-mmd-label-bg: #ffffff;
  --msf-mmd-label-text: #1f2733;
}
html[data-theme="dark"] {
  /* Plain nodes are a LIGHT cool-gray "card" on the dark canvas, with
   * dark text. Dark-on-dark plain nodes wash out at the small sizes
   * mermaid renders flowcharts at; a light card pops cleanly and stays
   * neutrally distinct from the coloured classDef pastels. */
  --msf-mmd-node-bg: #dde3ee;
  --msf-mmd-node-border: #7a8497;
  --msf-mmd-node-text: #1a2230;
  --msf-mmd-edge: #c0c9da;
  --msf-mmd-cluster-bg: rgba(255, 255, 255, 0.04);
  --msf-mmd-cluster-border: #8993ab;
  --msf-mmd-cluster-text: #ffffff;
  --msf-mmd-label-bg: #14181f;
  --msf-mmd-label-text: #eef1f6;
}

/* Plain nodes — :not() keeps classDef'd nodes for the rules further down.
 * stroke-width 2px so the border is clearly visible at the scaled-down
 * sizes mermaid renders flowcharts at on a narrow content column. */
.mermaid g.node:not(.ext):not(.meta):not(.audit):not(.iface) > .label-container,
.mermaid g.node:not(.ext):not(.meta):not(.audit):not(.iface) > .label-container path {
  fill: var(--msf-mmd-node-bg) !important;
  stroke: var(--msf-mmd-node-border) !important;
  stroke-width: 2px !important;
}
.mermaid g.node:not(.ext):not(.meta):not(.audit):not(.iface) .nodeLabel,
.mermaid g.node:not(.ext):not(.meta):not(.audit):not(.iface) .nodeLabel p {
  color: var(--msf-mmd-node-text) !important;
}

/* classDef: ext / meta / audit / iface — colour from --msf-*-* tokens. */
.mermaid g.node.ext > .label-container,
.mermaid g.node.ext > .label-container path {
  fill: var(--msf-ext-bg) !important;
  stroke: var(--msf-ext-border) !important;
}
.mermaid g.node.ext .nodeLabel,
.mermaid g.node.ext .nodeLabel p {
  color: var(--msf-ext-text) !important;
}
.mermaid g.node.meta > .label-container,
.mermaid g.node.meta > .label-container path {
  fill: var(--msf-meta-bg) !important;
  stroke: var(--msf-meta-border) !important;
}
.mermaid g.node.meta .nodeLabel,
.mermaid g.node.meta .nodeLabel p {
  color: var(--msf-meta-text) !important;
}
.mermaid g.node.audit > .label-container,
.mermaid g.node.audit > .label-container path {
  fill: var(--msf-audit-bg) !important;
  stroke: var(--msf-audit-border) !important;
}
.mermaid g.node.audit .nodeLabel,
.mermaid g.node.audit .nodeLabel p {
  color: var(--msf-audit-text) !important;
}
.mermaid g.node.iface > .label-container,
.mermaid g.node.iface > .label-container path {
  fill: var(--msf-iface-bg) !important;
  stroke: var(--msf-iface-border) !important;
}
.mermaid g.node.iface .nodeLabel,
.mermaid g.node.iface .nodeLabel p {
  color: var(--msf-iface-text) !important;
}

/* Edges + arrowheads. 2px stroke + brighter --msf-mmd-edge so the lines
 * are visible at the compressed SVG sizes mermaid renders flowcharts at
 * — 1px (mermaid's default) is nearly invisible in dark mode. */
.mermaid .flowchart-link,
.mermaid .edgePath .path,
.mermaid path.flowchart-link {
  stroke: var(--msf-mmd-edge) !important;
  stroke-width: 2px !important;
}
.mermaid .marker,
.mermaid .marker.cross,
.mermaid marker path {
  fill: var(--msf-mmd-edge) !important;
  stroke: var(--msf-mmd-edge) !important;
}
/* Edge labels — opaque plate matching the page canvas, with text-colour
 * that flips with the theme. Dark-on-dark and light-on-light were the
 * default since edge labels reused the node-text token (sized for the
 * light-card node fill, wrong for an edge sitting on dark canvas). */
.mermaid .edgeLabel,
.mermaid .edgeLabel p,
.mermaid .edgeLabel foreignObject > div {
  background-color: var(--msf-mmd-label-bg) !important;
  color: var(--msf-mmd-label-text) !important;
}
.mermaid .edgeLabel rect {
  fill: var(--msf-mmd-label-bg) !important;
  opacity: 1 !important;
}
/* Subgraph clusters — visible border + slightly tinted bg. */
.mermaid .cluster rect {
  fill: var(--msf-mmd-cluster-bg) !important;
  stroke: var(--msf-mmd-cluster-border) !important;
  stroke-width: 2px !important;
}
/* Subgraph headings — bright + bold so they read as section labels.
 * Size stays at mermaid's default; bold + the high-contrast colour are
 * enough now that the dark-mode invert filter is neutralised. */
.mermaid .cluster-label .nodeLabel,
.mermaid .cluster-label .nodeLabel p,
.mermaid .cluster-label p,
.mermaid .cluster-label span,
.mermaid .cluster-label text,
.mermaid .cluster text,
.mermaid .cluster span {
  color: var(--msf-mmd-cluster-text) !important;
  fill: var(--msf-mmd-cluster-text) !important;
  font-weight: 700 !important;
}