/* ----------------------------------------------------------------------
   Massive Swarm System — User Manual theme overrides
   Goal: calm, manual-style look (A* Pathfinding docs reference) while
   keeping MkDocs Material's sidebar / search / TOC behavior.
   ---------------------------------------------------------------------- */

/* ---- Accent color: muted blue closer to a reference manual ---------- */

[data-md-color-scheme="default"] {
  --md-accent-fg-color: #2c5aa0;
  --md-accent-fg-color--transparent: rgba(44, 90, 160, 0.1);
  --md-typeset-a-color: #2c5aa0;
}

[data-md-color-scheme="slate"] {
  /* Lighter, gentler blue for dark mode — readable on dark slate without
     glowing the way pure cyan/light-blue tend to. */
  --md-accent-fg-color: #8ab4f8;
  --md-accent-fg-color--transparent: rgba(138, 180, 248, 0.15);
  --md-typeset-a-color: #8ab4f8;

  /* Soften the slate scheme so headings + body have less contrast burn. */
  --md-default-bg-color: hsl(220 12% 13%);
  --md-default-fg-color: hsl(220 8% 82%);
  --md-default-fg-color--light: hsl(220 8% 78%);
  --md-default-fg-color--lighter: hsl(220 8% 50%);
  --md-default-fg-color--lightest: hsl(220 8% 28%);
  --md-code-bg-color: hsl(220 12% 18%);
}

[data-md-color-scheme="slate"] .md-typeset strong {
  color: hsl(42 32% 94%);
  font-weight: 700;
}

/* ---- Header: subtle separator instead of heavy shadow --------------- */

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: hsl(220 12% 22%);
}

/* ---- Lock the root font scale (no width-based upscaling) ------------
   Material bumps the root font-size as the viewport widens (125% base,
   137.5% at >=100em, 150% at >=125em). On a wide monitor that inflates the
   whole page — text, headings, spacing — so the manual reads noticeably
   "bigger" than on a laptop. Reference manuals like the A* Pathfinding docs
   use a fixed body size at any width. Lock the root to 125% (1rem = 20px) so
   the layout is stable across monitor sizes. extra.css loads after Material's
   stylesheet, so this overrides the media-query bumps without !important.
   -------------------------------------------------------------------- */

html {
  font-size: 125%;
}

/* ---- Reading column width -------------------------------------------
   A reference-manual reading width (A* Pathfinding docs reference). 70rem
   (1400px at the locked root) keeps prose lines readable (~900px content
   column after the two sidebars) while still leaving the wide reference
   tables and code listings enough room. Material's stock 61rem felt cramped
   for the 7-column tables; the old 1750px read as oversized.
   -------------------------------------------------------------------- */

.md-grid {
  max-width: 70rem;
}

/* ---- Typography: body and admonition sizes --------------------------
   Material 9.x no longer reduces admonition font-size by default, so
   body text and tip/note boxes render at the same size. 0.75rem = 15px at
   the locked root, matching the A* docs body size. Admonitions sit slightly
   quieter so tip/note boxes don't compete with prose.
   -------------------------------------------------------------------- */

.md-typeset {
  font-size: 0.75rem;
}

.md-typeset .admonition,
.md-typeset details {
  font-size: 0.72rem;
}

/* ---- Typography: heading weights ------------------------------------ */

/* Material renders the H1 page title in a muted grey (--md-default-fg-color
   --light), lighter than the H2 section headings below it. Promote it to full
   contrast: near-black in light mode, white in dark. */
.md-typeset h1 {
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: hsl(0 0% 100%);
}

/* H2 = section anchor. Bold so users can scan the page and land quickly. */
.md-typeset h2 {
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
}

/* H3 = sub-topic (issue, parameter group). Distinct from body without
   competing with H2. */
.md-typeset h3 {
  font-weight: 600;
  margin-top: 1.6rem;
}

/* ---- Right-column "Table of contents" label: full-contrast ----------
   Material greys the nav title via `.md-nav__title`. Scope the override to
   the secondary (right) nav only so the left sidebar stays at Material's
   default styling. Near-black in light mode, white in dark.
   -------------------------------------------------------------------- */

.md-nav--secondary .md-nav__title {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
  color: hsl(0 0% 100%);
}

/* ---- Sidebar: denser stacking, bolder active item ------------------- */

/* Left nav + right TOC — compact enough for deep docs, but not tiny. */
.md-nav__link {
  font-size: 0.72rem;
  line-height: 1.45;
}

/* Right sidebar TOC */
.md-nav--secondary .md-nav__link {
  font-size: 0.72rem;
  line-height: 1.45;
}

.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  font-weight: 700;
}

/* Quieter chevron icons in the sidebar */
.md-nav__icon {
  opacity: 0.7;
}

/* ---- Tables: tighter, more reference-manual feel --------------------
   Reference tables in this manual are wide (up to 7 columns of sentence
   content). Default Material sizing makes them feel cramped. Drop the
   font, tighten padding, allow code tokens to break.
   -------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  font-size: 0.68rem;
  line-height: 1.4;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.45rem 0.6rem;
}

.md-typeset table:not([class]) th {
  background: var(--md-default-fg-color--lightest);
  border-bottom: 0.08rem solid var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color);
  font-weight: 700;
}

.md-typeset table:not([class]) tbody td {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) tbody td:first-child {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

/* Code inside tables: scale with the surrounding cell so it doesn't
   appear oversized at the smaller table font. Never break mid-token. */
.md-typeset table:not([class]) code {
  font-size: 0.92em;
  font-weight: 400;
  word-break: normal;
  overflow-wrap: normal;
}

/* Reasonable first-column min-width so parameter names have room. */
.md-typeset table:not([class]) th:first-child,
.md-typeset table:not([class]) td:first-child {
  min-width: 8rem;
}

/* ---- Code blocks: slightly smaller, preserve readability ------------ */

.md-typeset pre > code,
.md-typeset code {
  font-size: 0.82rem;
}

/* ----------------------------------------------------------------------
   Visual page helpers (behavior pages with diagrams and annotated screenshots)
   - .mss-diagram     : inline SVG figure (top-down geometry)
   - .mss-annotated   : positioned numbered hotspots over a screenshot
   - .mss-param-cards : tighter grid card layout for parameter overviews
   ---------------------------------------------------------------------- */

.md-typeset .mss-diagram {
  margin: 1.2rem auto 1.6rem;
  max-width: 100%;
}

.md-typeset .mss-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.md-typeset .mss-diagram figcaption {
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
  text-align: center;
  margin-top: 0.6rem;
}

/* Annotated screenshot wrapper. The image fills the figure; numbered
   hotspots are absolutely positioned via --mss-x / --mss-y custom props
   set inline on each <span class="mss-hot">. */
.md-typeset .mss-annotated {
  display: block;
  margin: 1.2rem 0 1.6rem;
  max-width: 100%;
}

.md-typeset .mss-annotated .mss-annotated-frame {
  position: relative;
  display: block;
}

.md-typeset .mss-annotated .mss-annotated-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}


.md-typeset .mss-annotated .mss-hot {
  position: absolute;
  left: var(--mss-x, 50%);
  top: var(--mss-y, 50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  color: #ff4d5a;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.md-typeset .mss-annotated figcaption {
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.5rem;
}

/* Parameter card grid: keep cards compact so 5 fit comfortably and the
   collapsible <details> doesn't blow out card height. */
.md-typeset .mss-param-cards.grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
}

.md-typeset .mss-param-cards > ul > li,
.md-typeset .mss-param-cards.cards > ul > li {
  padding: 0.7rem 0.85rem;
}

.md-typeset .mss-param-cards details {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  border: none;
  border-left: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.md-typeset .mss-param-cards details > summary {
  font-weight: 600;
  color: var(--md-accent-fg-color);
  cursor: pointer;
  padding: 0.2rem 0;
  background: transparent;
  border: none;
  list-style: none;
}

/* Strip Material's expand arrow on the right and the native HTML5
   disclosure triangle so the summary reads as a plain disclosure. */
.md-typeset .mss-param-cards details > summary::after {
  display: none;
  content: none;
}

.md-typeset .mss-param-cards details > summary::-webkit-details-marker {
  display: none;
}

/* Replace Material's admonition ::before icon with a tiny caret so users
   still see the expand/collapse affordance. */
.md-typeset .mss-param-cards details > summary::before {
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
  position: static;
  width: auto;
  height: auto;
  display: inline-block;
  content: "\25B8";
  margin-right: 0.35rem;
  font-size: 0.7em;
  transition: transform 120ms ease;
  color: var(--md-accent-fg-color);
}

.md-typeset .mss-param-cards details[open] > summary::before {
  transform: rotate(90deg);
}

.md-typeset .mss-param-cards details[open] > summary {
  margin-bottom: 0.4rem;
}