/* ============================================================================
   DS-MSP living-book design system — matches Typer/FastAPI's (fastapi/typer)
   documentation format: black/teal Material palette, Fira Code, terse
   admonitions. Built on Material's CSS variables so it adapts to light/dark
   automatically, and derives from the theme's own accent (teal) rather than
   a hardcoded hex so it always tracks mkdocs.yml's palette.
   ========================================================================== */

/* Fira Code for code, Noto Color Emoji so emoji render consistently across
   platforms -- the exact font stack Typer's own docs use. */
@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap);

:root {
  --md-code-font: "Fira Code", monospace, "Noto Color Emoji";
  --md-text-font: "Roboto", "Noto Color Emoji";
  --ds-accent: var(--md-accent-fg-color);
  --ds-accent-soft: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
  --ds-radius: 12px;
  --ds-border: var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] {
  --ds-border: rgba(255, 255, 255, 0.12);
}

/* External links get a small arrow icon so a reader knows before clicking
   whether they're leaving the site -- Typer's own convention. */
.md-typeset a[href^="http"]:not([href*="munna-manoj.github.io"]):not(.md-nav__link)::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.2em;
  vertical-align: middle;
  opacity: 0.55;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* --- Readable measure & rhythm ------------------------------------------- */
.md-typeset {
  line-height: 1.72;
}
.md-typeset p,
.md-typeset li {
  max-width: 46rem;             /* hold a comfortable reading measure */
}
.md-typeset h2 {
  margin-top: 3rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--ds-accent-soft);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-typeset h3 {
  margin-top: 2rem;
  letter-spacing: -0.01em;
}

/* Lead paragraph: the first paragraph after the H1 reads as a deck. */
.md-typeset h1 + p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  max-width: 48rem;
}

/* --- Stat chips: pull proved numbers OUT of prose ----------------------- */
.ds-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
  margin: 1.6rem 0 2rem;
}
.ds-stat {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 1rem 1.1rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ds-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(91, 108, 255, 0.12);
  border-color: var(--ds-accent);
}
.ds-stat__value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ds-accent);
  font-variant-numeric: tabular-nums;
}
.ds-stat__label {
  display: block;
  margin-top: .35rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--md-default-fg-color--light);
}

/* --- Figures: centered, framed, captioned ------------------------------- */
.md-typeset figure {
  margin: 2rem auto;
}
.md-typeset figure img,
.md-typeset p > img {
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-border);
  background: var(--md-default-bg-color);
  max-width: 100%;
}
.md-typeset figcaption {
  margin-top: .6rem;
  font-size: .76rem;
  color: var(--md-default-fg-color--light);
  max-width: 42rem;
  margin-inline: auto;
}

/* --- Material grid cards: subtle lift ----------------------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-border);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  border-color: var(--ds-accent);
}

/* --- Admonitions / callouts: a touch more room -------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--ds-radius);
  border-left-width: 3px;
}

/* --- Code blocks: rounded, a little breathing room ---------------------- */
.md-typeset pre > code {
  border-radius: var(--ds-radius);
}

/* --- Tables: subtle zebra, no heavy borders ----------------------------- */
.md-typeset table:not([class]) {
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-border);
}
.md-typeset table:not([class]) tr:nth-child(2n) {
  background: var(--md-default-fg-color--lightest);
}

/* --- Termynal: keep long commands inside the box -----------------------
   The vendored docs/css/termynal.css (verbatim from fastapi/typer) sets no
   overflow/word-break rules, so a command line with a long unbroken token
   (a path, a flag value) overflows the fixed-width box and bleeds into the
   surrounding page text instead of wrapping. Override here rather than
   editing the vendored file -- extra.css loads after it (see mkdocs.yml). */
.termy,
[data-termynal] {
  max-width: 100%;
  overflow-x: hidden;
}
[data-ty] {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* --- Wide embeds: break out of the ~46rem prose column ------------------
   The rig-pond-replay iframe (and anything else this wide) renders content
   designed for a real, wide desktop browser window -- panels positioned via
   fixed left:12px/right:12px offsets. Squeezed into the normal prose column
   (the .md-grid caps around 61rem total, split with the TOC rail), those
   panels overlap. Centering on the viewport instead of the text column gives
   them the room they were designed for. */
.ds-wide-embed {
  display: block;
  width: 92vw;
  max-width: 1100px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* --- "Next / prev" and prerequisite chips ------------------------------- */
.ds-meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
  font-size: .72rem;
  font-weight: 600;
}