/* ────────────────────────────────────────────────────────────────────────
   mgtt — terminal-flavoured skin
   One monospace family (JetBrains Mono), tight restrained palette, flat
   chrome. Reads like a well-set technical manual; nothing ornamental.
   ────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

:root, [data-md-color-scheme="default"] {
  --md-text-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --md-default-bg-color: #fafaf7;
  --md-default-fg-color: #1a1a17;
  --md-default-fg-color--light: #44443e;
  --md-default-fg-color--lighter: #767163;
  --md-default-fg-color--lightest: #d4d0c1;

  --md-primary-fg-color: #00857a;
  --md-primary-fg-color--light: #00a094;
  --md-primary-fg-color--dark: #006057;
  --md-accent-fg-color: #00857a;

  --mgtt-rule: #e4e1d6;
  --mgtt-code-bg: rgba(0, 133, 122, 0.06);
  --mgtt-code-block-bg: #f4f1e8;
}

[data-md-color-scheme="slate"] {
  /* Dark navy-slate background — clearly blueish (lightness ~14%, strong
     blue channel), not just "near-black with a hint". Plays well with
     the teal accent (teal on navy = classic terminal ocean palette). */
  --md-default-bg-color: #172338;
  --md-default-fg-color: #dde4ef;
  --md-default-fg-color--light: #a6b3c6;
  --md-default-fg-color--lighter: #6f7e95;
  --md-default-fg-color--lightest: #344260;

  --md-primary-fg-color: #3acbb7;
  --md-primary-fg-color--light: #55e0cc;
  --md-primary-fg-color--dark: #2ba090;
  --md-accent-fg-color: #3acbb7;

  --mgtt-rule: #2b3654;
  --mgtt-code-bg: rgba(58, 203, 183, 0.1);
  --mgtt-code-block-bg: #111a2d;
}

/* ── Body ──────────────────────────────────────────────────────────── */

.md-typeset {
  font-family: var(--md-text-font);
  font-size: 0.82rem;
  line-height: 1.7;
  font-feature-settings: "kern" 1, "calt" 1, "liga" 0, "zero" 1;
  color: var(--md-default-fg-color);
}

.md-typeset p { margin: 0.9rem 0; }

/* ── Headings ──────────────────────────────────────────────────────── */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--md-text-font);
  color: var(--md-default-fg-color);
  letter-spacing: -0.01em;
  font-weight: 700;
}

.md-typeset h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 1rem;
}

.md-typeset h2 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2.2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--mgtt-rule);
}

.md-typeset h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

.md-typeset h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 1.2rem;
  color: var(--md-default-fg-color--light);
}

/* Hashes mark heading level subtly, like a markdown source view. */
.md-typeset h2::before { content: "##  "; color: var(--md-default-fg-color--lightest); font-weight: 500; }
.md-typeset h3::before { content: "###  "; color: var(--md-default-fg-color--lightest); font-weight: 500; }

/* Inline code inside headings — inherit size, tinted background */
.md-typeset :is(h1, h2, h3, h4) code {
  font-size: 0.88em;
  padding: 0.05em 0.3em;
  background: var(--mgtt-code-bg);
  color: var(--md-primary-fg-color);
  font-weight: 500;
  border-radius: 2px;
}

/* ── Links ─────────────────────────────────────────────────────────── */

.md-typeset a {
  color: var(--md-primary-fg-color);
  text-decoration: underline;
  text-decoration-color: var(--mgtt-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.md-typeset a:hover {
  text-decoration-color: var(--md-primary-fg-color);
}

/* ── Code ──────────────────────────────────────────────────────────── */

.md-typeset code {
  font-family: var(--md-code-font);
  font-size: 0.88em;
  padding: 0.08em 0.32em;
  background: var(--mgtt-code-bg);
  color: var(--md-primary-fg-color--dark);
  border-radius: 2px;
  font-feature-settings: "calt" 1, "liga" 0;
}

[data-md-color-scheme="slate"] .md-typeset code {
  color: var(--md-primary-fg-color--light);
}

.md-typeset pre > code {
  background: transparent;
  color: var(--md-default-fg-color);
  padding: 1rem 1.1rem;
  font-size: 0.8rem;
  line-height: 1.55;
}

.md-typeset .highlight,
.md-typeset pre {
  background: var(--mgtt-code-block-bg);
  border: 1px solid var(--mgtt-rule);
  border-radius: 2px;
}

.md-clipboard { color: var(--md-default-fg-color--lighter); }
.md-clipboard:hover { color: var(--md-primary-fg-color); }

/* ── Horizontal rule ───────────────────────────────────────────────── */

.md-typeset hr {
  border: none;
  border-top: 1px solid var(--mgtt-rule);
  margin: 2rem 0;
}

/* ── Tables ────────────────────────────────────────────────────────── */

.md-typeset table:not([class]) {
  border: none;
  border-top: 1px solid var(--md-default-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color);
  font-size: 0.8rem;
  box-shadow: none;
  background: transparent;
}

.md-typeset table:not([class]) th {
  background: transparent;
  border-bottom: 1px solid var(--md-default-fg-color);
  font-weight: 600;
  font-size: 0.95em;
  padding: 0.55em 0.9em;
  text-align: left;
  color: var(--md-default-fg-color);
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--mgtt-rule);
  padding: 0.5em 0.9em;
}

.md-typeset table:not([class]) tr:last-child td { border-bottom: none; }

.md-typeset table:not([class]) tr:hover td {
  background: var(--mgtt-code-bg);
}

/* ── Blockquotes ───────────────────────────────────────────────────── */

.md-typeset blockquote {
  border-left: 2px solid var(--md-primary-fg-color);
  color: var(--md-default-fg-color--light);
  padding: 0.1em 0 0.1em 1rem;
  margin: 1.2rem 0;
  font-style: normal;
}

/* ── Admonitions ───────────────────────────────────────────────────── */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--mgtt-rule);
  border-left: 2px solid var(--md-primary-fg-color);
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  font-size: 0.82rem;
  padding: 0.1rem 1rem 0.5rem;
  margin: 1.2rem 0;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent !important;
  border: none !important;
  font-weight: 600;
  font-size: 0.85em;
  padding-left: 1.8rem !important;
  color: var(--md-default-fg-color);
}

/* ── Header bar ────────────────────────────────────────────────────── */

.md-header {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: 0 1px 0 var(--mgtt-rule);
}

[data-md-color-scheme="slate"] .md-header {
  background: #111a2d;
  box-shadow: 0 1px 0 var(--mgtt-rule);
}

.md-header__title {
  font-family: var(--md-text-font);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

/* Append the tagline to the header site-name topic only. site_name stays
   short ("mgtt") so browser tab + drawer header don't carry the full
   phrase; the top bar gets the expanded form via ::after. Material's
   .md-ellipsis has overflow:hidden + text-overflow:ellipsis which was
   clipping the ::after — drop both on the site-name topic (the
   page-title topic keeps its clipping since it's not ours to customise).
   Suppressed below 60em where there's no room. */
@media screen and (min-width: 60em) {
  .md-header__title .md-header__topic:first-child,
  .md-header__title .md-header__topic:first-child .md-ellipsis {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
  .md-header__title .md-header__topic:first-child .md-ellipsis::after {
    content: " — model guided troubleshooting tool";
    color: var(--md-default-fg-color--lighter);
    font-weight: 400;
    letter-spacing: -0.005em;
  }
}

.md-header__button { color: var(--md-default-fg-color); }

.md-search__input {
  background: var(--mgtt-code-bg);
  color: var(--md-default-fg-color);
  font-family: var(--md-text-font);
  font-size: 0.82rem;
}

/* ── Navigation ────────────────────────────────────────────────────── */

/* Material renders the site title as a label inside the primary nav so it
   can double as the mobile-drawer header. On desktop it's redundant — the
   title is already in the top header bar. Hide it above the breakpoint
   where the sidebar stops being a drawer. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
}


/* Top-level items: bumped weight + a leading "$" prompt glyph so the
   section hierarchy reads as shell sections. */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-family: var(--md-text-font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  letter-spacing: -0.005em;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link > .md-ellipsis::before {
  content: "$ ";
  color: var(--md-primary-fg-color);
  font-weight: 500;
}

/* Sub-items: lighter, same face, same size */
.md-nav__item .md-nav__item .md-nav__link {
  font-family: var(--md-text-font);
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
}

.md-nav__link--active,
.md-nav__link:is(:focus, :hover) {
  color: var(--md-primary-fg-color) !important;
}

/* Active sub-item: prepend a caret so the location is obvious */
.md-nav__item .md-nav__item > .md-nav__link--active > .md-ellipsis::before {
  content: "> ";
  color: var(--md-primary-fg-color);
}

/* Secondary sidebar (in-page TOC) */
.md-sidebar--secondary .md-nav__title {
  font-family: var(--md-text-font);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: -0.005em;
  color: var(--md-default-fg-color--light);
}

/* ── Footer ────────────────────────────────────────────────────────── */

.md-footer { background: #111a2d; }
.md-footer-meta { background: #111a2d; }

/* ── Scenario + approach blocks ────────────────────────────────────── */

/* Three paired blocks on the landing page stage the "problem → analysis
   → solution" narrative visually:
     .scenario  — chaotic 3am transcript; > prompts; dimmed asides.
     .problem   — quiet analysis; — dashes; no frame fill, thin rule.
     .approach  — ordered systematic response; → arrows; teal accent.
   Same list-with-glyph structure across all three so the parallel reads
   at a glance; visual weight graduates from loud to quiet to accent. */


/* Sets the "3am incident" narrative on the landing page apart from the
   framing prose. Reads as a terminal transcript: each action on its own
   line, prompt-prefixed, the "nothing obvious / looks fine" asides
   dimmed. */

.md-typeset .scenario {
  background: var(--mgtt-code-block-bg);
  border-left: 2px solid var(--md-primary-fg-color);
  border-radius: 2px;
  padding: 1rem 1.3rem;
  margin: 1.4rem 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.md-typeset .scenario > :first-child { margin-top: 0; }
.md-typeset .scenario > :last-child { margin-bottom: 0; }

.md-typeset .scenario strong {
  color: var(--md-default-fg-color);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

.md-typeset .scenario ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset .scenario ul li {
  padding-left: 1.6rem;
  position: relative;
  margin: 0.18rem 0;
  color: var(--md-default-fg-color--light);
}

/* Kill Material's default list marker pseudo-element so only our
   terminal-style prompt glyph appears. */
.md-typeset .scenario ul li::marker { content: ""; }

.md-typeset .scenario ul li::before {
  content: ">";
  position: absolute;
  left: 0.35rem;
  color: var(--md-primary-fg-color);
  font-weight: 500;
}

.md-typeset .scenario em {
  color: var(--md-default-fg-color--lighter);
  font-style: italic;
}

.md-typeset .approach {
  background: rgba(58, 203, 183, 0.06);
  border-left: 2px solid var(--md-primary-fg-color);
  border-radius: 2px;
  padding: 1rem 1.3rem;
  margin: 1.4rem 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

[data-md-color-scheme="slate"] .md-typeset .approach {
  background: rgba(58, 203, 183, 0.08);
}

.md-typeset .approach > :first-child { margin-top: 0; }
.md-typeset .approach > :last-child { margin-bottom: 0; }

/* Lead line ("mgtt fixes this.") picks up the accent colour so it reads
   as a confident statement, not just another bolded phrase. */
.md-typeset .approach > p:first-child strong {
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

.md-typeset .approach ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset .approach ul li {
  padding-left: 1.6rem;
  position: relative;
  margin: 0.3rem 0;
  color: var(--md-default-fg-color--light);
}

.md-typeset .approach ul li::marker { content: ""; }

.md-typeset .approach ul li::before {
  content: "→";
  position: absolute;
  left: 0.2rem;
  color: var(--md-primary-fg-color);
  font-weight: 500;
}

.md-typeset .approach ul li strong {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.md-typeset .problem {
  border-left: 2px solid var(--md-default-fg-color--lighter);
  padding: 0.2rem 0 0.2rem 1.3rem;
  margin: 1.4rem 0;
}

.md-typeset .problem > :first-child { margin-top: 0; }
.md-typeset .problem > :last-child { margin-bottom: 0; }

.md-typeset .problem > p:first-child strong {
  color: var(--md-default-fg-color);
  font-weight: 700;
}

.md-typeset .problem ul {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.md-typeset .problem ul li {
  padding-left: 1.6rem;
  position: relative;
  margin: 0.15rem 0;
  color: var(--md-default-fg-color--light);
}

.md-typeset .problem ul li::marker { content: ""; }

.md-typeset .problem ul li::before {
  content: "—";
  position: absolute;
  left: 0.3rem;
  color: var(--md-default-fg-color--lighter);
}

/* ── Misc ──────────────────────────────────────────────────────────── */

/* Keep images from ever blowing out the content column */
.md-typeset img { max-width: 100%; height: auto; }

/* Cap the hero logo so it reads as a wordmark, not a billboard */
.md-typeset > p:first-child img {
  max-width: 360px;
  margin: 0.5rem 0 1.5rem;
}

/* Empty-H1 spacer on index.md — invisible but preserves flow */
.md-typeset h1:empty { display: none; }
.md-typeset h1:empty::before { display: none; }

/* Kill the `##` marker on empty headings */
.md-typeset h2:empty::before,
.md-typeset h3:empty::before { display: none; }