/* ============================================================
   Manhattan Reasoning docs theme
   Maps the manhattanreasoning.com landing tokens onto Material
   so the docs read as part of the same site.
   ============================================================ */

:root {
  /* Brand tokens — mirrored from the landing page */
  --mr-blue: #0a84ff;
  --mr-blue-deep: #006fe6;
  --mr-blue-dim: #0a84ff22;
  --mr-blue-border: #cfe4ff;
  --mr-ink: #0a0a0b;
  --mr-muted: #5b616e;
  --mr-line: #e7e9ee;
  --mr-soft: #f5f6f8;
  --mr-radius: 16px;

  /* Map onto Material */
  --md-primary-fg-color: var(--mr-blue);
  --md-accent-fg-color: var(--mr-blue-deep);
  --md-typeset-a-color: var(--mr-blue);
  --md-default-fg-color--light: var(--mr-muted);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--mr-blue);
  --md-accent-fg-color: #3a9bff;
  --md-typeset-a-color: #5fb0ff;
}

/* ---------- Typography ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
}
.md-typeset h2 { margin-top: 2.4em; }

/* ---------- Header: white, bordered, like the landing nav ---------- */
[data-md-color-scheme="default"] .md-header {
  background-color: #fff;
  color: var(--mr-ink);
  border-bottom: 1px solid var(--mr-line);
}
[data-md-color-scheme="default"] .md-header--shadow { box-shadow: none; }
[data-md-color-scheme="default"] .md-header__title { color: var(--mr-ink); }
[data-md-color-scheme="default"] .md-header__button.md-icon { color: var(--mr-ink); }
.md-header__title { font-weight: 700; letter-spacing: -0.02em; }

/* Search field readable on the white header */
[data-md-color-scheme="default"] .md-search__form {
  background-color: var(--mr-soft);
  border: 1px solid var(--mr-line);
  border-radius: 10px;
  box-shadow: none;
}
[data-md-color-scheme="default"] .md-search__form:hover { background-color: #eef0f3; }
[data-md-color-scheme="default"] .md-search__input { color: var(--mr-ink); }
[data-md-color-scheme="default"] .md-search__input::placeholder { color: var(--mr-muted); }
[data-md-color-scheme="default"] .md-search__icon { color: var(--mr-muted); }

/* ---------- Content width ---------- */
.md-typeset .md-content__inner { max-width: 52rem; }

/* ---------- Grid cards: landing card treatment + hover lift ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--mr-line);
  border-radius: var(--mr-radius);
  padding: 1.5rem 1.5rem 1.4rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(10, 20, 40, .07);
  border-color: var(--mr-blue-border);
}

/* Lead icon in each card → blue-dim rounded tile, like the landing features */
.md-typeset .grid.cards > ul > li > p:first-child > .twemoji {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--mr-blue-dim);
  color: var(--mr-blue-deep);
  margin-bottom: .6rem;
}
.md-typeset .grid.cards > ul > li > p:first-child > .twemoji svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---------- Code, tables, admonitions: softer radius ---------- */
.md-typeset code { border-radius: 5px; }
.md-typeset pre > code { border-radius: 10px; }
.md-typeset .highlight > pre > code,
.md-typeset pre { border-radius: 10px; }
.md-typeset table:not([class]) {
  border: 1px solid var(--mr-line);
  border-radius: 10px;
  overflow: hidden;
}
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border-left-width: 3px;
}

/* Mono section labels (used inline as `.mr-tag`) */
.mr-tag {
  font-family: var(--md-code-font-family, monospace);
  color: var(--mr-blue);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ============================================================
   Home hero — echoes the landing page hero
   ============================================================ */
.mr-hero {
  position: relative;
  overflow: hidden;
  margin: -1.2rem 0 2.8rem;
  padding: 4rem 2rem 3.2rem;
  border: 1px solid var(--mr-line);
  border-radius: var(--mr-radius);
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(10, 132, 255, .10), transparent 70%),
    linear-gradient(180deg, #fbfcff 0%, #ffffff 65%);
}
[data-md-color-scheme="slate"] .mr-hero {
  border-color: rgba(255, 255, 255, .08);
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(10, 132, 255, .16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 65%);
}
.mr-hero > * { position: relative; z-index: 1; }

.mr-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background-image:
    linear-gradient(var(--mr-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mr-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 0%, #000 25%, transparent 80%);
}

.mr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mr-blue-deep);
  background: var(--mr-blue-dim);
  border: 1px solid var(--mr-blue-border);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.mr-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mr-blue);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, .18);
}

.md-typeset .mr-head {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 1rem;
}
.md-typeset .mr-head em { font-style: normal; color: var(--mr-blue); }

.mr-lede {
  font-size: 1.15rem;
  color: var(--mr-muted);
  max-width: 54ch;
  margin: 0 0 1.8rem;
}

.mr-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.md-typeset .mr-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  padding: .7rem 1.3rem;
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.md-typeset .mr-btn-primary {
  background: var(--mr-blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(10, 132, 255, .28);
}
.md-typeset .mr-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(10, 132, 255, .36);
}
.md-typeset .mr-btn-ghost {
  border: 1px solid var(--mr-line);
  color: var(--mr-ink);
  background: #fff;
}
.md-typeset .mr-btn-ghost:hover { border-color: var(--mr-blue); color: var(--mr-blue); }
[data-md-color-scheme="slate"] .md-typeset .mr-btn-ghost {
  background: transparent;
  color: var(--md-default-fg-color);
  border-color: rgba(255, 255, 255, .15);
}

/* ============================================================
   Left navigation sidebar — match the landing's bordered panels
   ============================================================ */

/* Soft divider between the nav and the content, like the landing cards */
[data-md-color-scheme="default"] .md-sidebar--primary {
  border-right: 1px solid var(--mr-line);
}

/* Header logo (turnstile) sizing */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* Hide Material's default drawer title (logo + site name) — our turnstile
   brand mark below replaces it, so the two don't stack in the mobile drawer. */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  display: none;
}

/* Turnstile brand mark pinned to the top of the left nav */
.md-sidebar--primary .md-nav--primary > .md-nav__list {
  padding-top: .25rem;
}
.md-sidebar--primary .md-nav--primary > .md-nav__list::before {
  content: "Manhattan Reasoning";
  display: flex;
  align-items: center;
  min-height: 30px;
  margin: .1rem .4rem 1.1rem .4rem;
  padding-left: 40px;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: -0.02em;
  color: var(--mr-ink);
  background: url("../assets/turnstile.svg") left center / 30px 30px no-repeat;
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav--primary > .md-nav__list::before {
  color: var(--md-default-fg-color);
}

/* Section labels in the nav → tighter, inkier; brand-blue on hover/active */
.md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mr-ink);
}
.md-nav__link:hover,
.md-nav__link:focus { color: var(--mr-blue); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--mr-blue);
  font-weight: 600;
}

/* Right-hand table-of-contents: muted, brand-blue active marker */
.md-sidebar--secondary .md-nav__link--active { color: var(--mr-blue); }