/* ──────────────────────────────────────────────────────────────────────────
   TestLogger help center — theme polish.
   Palette mirrors tl-manager-v3 brand tokens (resources/css/app.css):
     primary #1F90D2 · accent #4DB8E5 · hover #145C86
     dark neutrals #151B23 · #212830 · #262C36
   Typography: Montserrat (body) + JetBrains Mono (code).
   ────────────────────────────────────────────────────────────────────────── */

/* ── Font tuning ──────────────────────────────────────────────────────── */
:root {
  --md-text-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Typography: mirrors tl-manager-v3 (resources/css/app.css) ─────────
   Headings there are uppercase, italic and bold in the emphasis color
   ("text-2xl font-semibold uppercase italic leading-tight"), body text is
   weight 400 in the primary text color. Sizes below are scaled up for
   full-width doc pages; everything else follows the app. */

.md-typeset {
  font-feature-settings: "ss01", "cv11", "kern";
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--tl-text-primary);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--tl-text-emphasis);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: normal;
  margin-top: 1.4em;
  margin-bottom: 0.35em;
}

/* All six levels share one treatment (700, uppercase, italic), so unlike
   Material — which also steps the weight down, h2 300 / h3 400 — size is the
   only thing separating them here. A 1.3x step wasn't enough to read as
   hierarchy under uppercase, so the step from h1 to h2 is now ~1.5x and the
   lower levels sit closer to body text. */
.md-typeset h1 {
  font-size: 1.75rem;
}

.md-typeset h2 {
  font-size: 1.15rem;
}

/* Blue gradient fill on the page title, restored from 6604070 where it sat on
   h1 before the font pass dropped it. Only the page title takes it — section
   headings stay in the emphasis color, so the title is the one blue thing on
   the page. The child combinator keeps this off the landing hero, whose h1
   sits inside <section class="tl-hero"> and already has its own treatment.

   The @supports guard matters because the fill is transparent — without
   background-clip the title would render invisible rather than unstyled. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .md-typeset > h1:first-of-type {
    background: var(--tl-heading-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Children need real ink back. The permalink glyph and — since
     `search.highlight` is on — the <mark> around a search term both inherit
     the transparent fill and would otherwise disappear from the title. */
  .md-typeset > h1:first-of-type .headerlink,
  .md-typeset > h1:first-of-type mark {
    -webkit-text-fill-color: currentColor;
  }
}

.md-typeset h3 {
  font-size: 1rem;
}

.md-typeset h4 {
  font-size: 0.9rem;
}

.md-typeset h5,
.md-typeset h6 {
  font-size: 0.82rem;
}

/* Material's rem basis is a fixed 125% (20px) at every width below 2000px —
   it only ever scales up, never down for small screens. Headings sized in rem
   therefore hit a phone at full desktop size, and uppercase italic runs wide,
   so a 35px h1 wrapped to three lines on a 375px screen. Step the whole scale
   down below the tablet breakpoint. */
@media screen and (max-width: 44.9375em) {
  .md-typeset h1 {
    font-size: 1.4rem;
  }

  .md-typeset h2 {
    font-size: 1.05rem;
  }

  .md-typeset h3 {
    font-size: 0.95rem;
  }

  .md-typeset h4 {
    font-size: 0.86rem;
  }

  .md-typeset h5,
  .md-typeset h6 {
    font-size: 0.8rem;
  }

  /* Tighter leading up top too — the default 1.4em gap above a heading is
     generous once the headings themselves are smaller. */
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4,
  .md-typeset h5,
  .md-typeset h6 {
    margin-top: 1.2em;
  }
}

/* The app renders the first block flush to the top of its container. */
.md-typeset h1:first-child {
  margin-top: 0;
}

.md-typeset p,
.md-typeset li,
.md-typeset blockquote {
  font-weight: 400;
}

.md-typeset p {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* ── Brand palette (light) ────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1f90d2;
  --md-primary-fg-color--light: #4db8e5;
  --md-primary-fg-color--dark: #145c86;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #1f90d2;
  --md-accent-fg-color--transparent: rgba(31, 144, 210, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-typeset-a-color: #1070a6;

  /* Text colors from the app: --color-text-primary / --color-text-emphasis */
  --tl-text-primary: #262626;
  --tl-text-emphasis: #171717;

  /* Subtle page background (not pure white) for a softer, editorial feel */
  --md-default-bg-color: #fbfcfd;
  --md-default-fg-color--lightest: rgba(31, 41, 55, 0.08);

  /* Guide line for nested nav levels — needs more contrast than
     --md-default-fg-color--lightest, which disappears as a 1px rule. */
  --tl-nav-guide: rgba(31, 41, 55, 0.18);

  /* brand-primary -> brand-secondary */
  --tl-heading-gradient: linear-gradient(90deg, #1f90d2 0%, #4db8e5 100%);
}

/* ── Brand palette (dark) — mirrors tl-manager-v3 dark theme ─────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #4db8e5;
  --md-primary-fg-color--light: #7dcbed;
  --md-primary-fg-color--dark: #1f90d2;

  --md-accent-fg-color: #4db8e5;
  --md-accent-fg-color--transparent: rgba(77, 184, 229, 0.15);

  --md-typeset-a-color: #4db8e5;

  /* The app's dark theme sets both text tokens to pure white */
  --tl-text-primary: #ffffff;
  --tl-text-emphasis: #ffffff;

  --md-default-bg-color: #151b23;
  --md-default-fg-color: rgba(255, 255, 255, 0.92);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.72);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.45);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.08);

  --md-code-bg-color: #212830;
  --md-code-fg-color: #e6e9ef;

  --md-footer-bg-color: #0f141a;
  --md-footer-bg-color--dark: #0a0e13;

  --tl-nav-guide: rgba(255, 255, 255, 0.16);

  /* Lifted a step in dark mode — the light-theme primary is too dim on #151b23,
     so this runs the dark palette's primary into its lighter tint instead. */
  --tl-heading-gradient: linear-gradient(90deg, #4db8e5 0%, #7dcbed 100%);
}

/* ── Header: subtle gradient so it reads as "premium" not flat ───────── */
.md-header {
  background: linear-gradient(135deg, #145c86 0%, #1f90d2 55%, #4db8e5 100%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 6px 20px -10px rgba(20, 92, 134, 0.35);
}

.md-tabs {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(135deg, #0f141a 0%, #1c2a3a 55%, #145c86 100%);
}

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

/* Material already hovers nav links by shifting them to the accent color.
   No background tint on top of it — two effects firing at once read as a
   heavier interaction than a sidebar link deserves. */
.md-nav__link {
  transition: color 140ms ease;
  padding: 0.25rem 0.5rem;
}

/* `navigation.indexes` wraps a section that has an index page in a
   <div class="md-nav__link md-nav__container"> and nests the real <a
   class="md-nav__link"> inside it. Both match the rule above, so the padding
   landed twice and pushed those labels ~10px right of their plain siblings.
   Only the outer element should carry it. */
.md-nav__link > .md-nav__link {
  padding: 0;
}

.md-nav__item .md-nav__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

/* Nested sections in the page tree.
   `navigation.sections` marks a section with a bold label plus vertical space
   and then deliberately un-indents its children (`margin-left: -.6rem`). That
   reads fine for a top-level section, but a section nested inside another one
   — Workspace under Analyzer — leaves its children flush with its own
   siblings, so the subtree has no visible start or end.

   Material already indents every level by .6rem via `.md-nav__list`, then
   cancels exactly that much back off a section's children. Undoing the
   cancellation is the whole fix — adding padding on top would double-count
   and overshoot the step. */
.md-nav--primary .md-nav__item--section .md-nav__item--section > .md-nav {
  margin-left: 0.5rem;
  border-left: 1px solid var(--tl-nav-guide);
}

/* The nav's left edge — where the guide line lands — sits at the parent link's
   border box, which is .5rem left of its text because of the link padding, so
   the line hangs outside the level it belongs to. The margin above pushes it
   in to meet the parent's text; this takes the same .5rem back off the child
   list so the step itself stays at Material's .6rem. */
.md-nav--primary
  .md-nav__item--section
  .md-nav__item--section
  > .md-nav
  > .md-nav__list {
  padding-left: 0.1rem;
}

/* A nested section's own label is a child of the level above it, so it keeps
   the parent's indentation and only its contents step in. Material styles it
   as a heading — bold, with 1.25em of air around it — which ranks Workspace
   above Opening data and its other siblings. It isn't more important; it's a
   peer page that happens to have a child, so it gets a peer's weight and
   spacing and the indented children carry the hierarchy on their own. */
.md-nav--primary .md-nav__item--section .md-nav__item--section {
  margin: 0;
}

.md-nav--primary
  .md-nav__item--section
  .md-nav__item--section
  > .md-nav__link:not(.md-nav__link--active) {
  font-weight: 400;
}


/* ── Cards on landing pages ──────────────────────────────────────────── */
.md-typeset .grid.cards > ul > li {
  padding: 1.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-2px);
  border-color: var(--md-primary-fg-color);
  box-shadow:
    0 1px 2px rgba(31, 144, 210, 0.08),
    0 10px 30px -12px rgba(31, 144, 210, 0.35);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* Product logos inside cards — replace the Material icon slot */
.md-typeset .grid.cards img.tl-product-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  margin: 0 0 1rem;
  object-fit: contain;
}

/* Each product logo ships as a pair: dark text for light mode, white text for
   dark mode. Both are in the markup and CSS shows the one matching the scheme,
   so the swap follows the palette toggle rather than the OS preference. */
.md-typeset .grid.cards img.tl-logo-dark {
  display: none;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards img.tl-logo-light {
  display: none;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards img.tl-logo-dark {
  display: block;
}

/* ── Buttons / links inside typeset ──────────────────────────────────── */
.md-typeset a {
  transition: color 140ms ease;
}

/* Material ships .md-button with no margin, and adjacent buttons are separated
   only by the collapsed space between two inline-blocks. That reads fine while
   they share a line, but the hero pair always wraps on a phone and the boxes
   then stack flush against each other. */
.md-typeset .md-button {
  margin: 0.35rem 0.25rem;
}

.md-typeset .md-button--primary {
  background: linear-gradient(135deg, #1f90d2 0%, #4db8e5 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(31, 144, 210, 0.6);
}

.md-typeset .md-button--primary:hover {
  background: linear-gradient(135deg, #145c86 0%, #1f90d2 100%);
  transform: translateY(-1px);
}

/* ── Code blocks: restrained, high-contrast ──────────────────────────── */
.md-typeset pre > code {
  border-radius: 10px;
}

.md-typeset code {
  font-size: 0.82em;
  padding: 0.08rem 0.32rem;
  border-radius: 4px;
}

/* ── Admonitions: brand-tinted ───────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #1f90d2;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #4db8e5;
}

/* ── Search box subtle glow on focus ────────────────────────────────── */
.md-search__form {
  border-radius: 8px;
  transition: box-shadow 180ms ease;
}

.md-search__form:focus-within {
  box-shadow: 0 0 0 2px rgba(77, 184, 229, 0.45);
}

/* ── Footer: quieter, editorial ──────────────────────────────────────── */
.md-footer-meta {
  background-color: rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ── Landing-page hero (opt-in via .tl-hero on a section) ────────────── */
.tl-hero {
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  margin: -1.5rem -0.8rem 3rem;
  background:
    radial-gradient(ellipse at top, rgba(77, 184, 229, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(31, 144, 210, 0.12), transparent 55%);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.tl-hero h1 {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

.tl-hero p.tl-hero-lead {
  font-size: 1.1rem;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .tl-hero {
  background:
    radial-gradient(ellipse at top, rgba(77, 184, 229, 0.2), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(31, 144, 210, 0.15), transparent 55%);
}

/* 3rem is 60px at any width — on a phone that is most of the first screen
   before a word of content. Scale the hero and its padding back with it. */
@media screen and (max-width: 44.9375em) {
  .tl-hero {
    padding: 2.25rem 1rem 1.75rem;
    margin-bottom: 2rem;
  }

  .tl-hero h1 {
    font-size: 1.75rem;
  }

  .tl-hero p.tl-hero-lead {
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
  }
}

/* Search hint under the hero buttons — quiet, it's a nudge not a headline. */
.md-typeset .tl-hero p.tl-hero-hint {
  margin: 1.75rem auto 0;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--lighter);
}

.tl-hero-hint kbd {
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-fg-color--lightest);
  font-family: var(--md-code-font);
  font-size: 0.9em;
}

/* ── Landing sections ────────────────────────────────────────────────── */

/* Section headings on the landing page are centered anchors between bands,
   with more air above them than a normal doc h2. */
.md-typeset .tl-hero + h2,
.md-typeset .grid + h2,
.md-typeset .tl-releases + p + h2 {
  margin-top: 3rem;
}

/* ── Landing grids: explicit column counts ───────────────────────────── */

/* Material's default grid is `auto-fit, minmax(min(100%, 16rem), 1fr)`, which
   fits 3 columns into the 61rem content width. That orphans the 4th product
   onto its own row, and the 3rd path card at tablet widths. Both grids get
   fixed column counts instead, chosen so a row is always full. */
.md-typeset .grid.tl-products,
.md-typeset .grid.tl-paths {
  grid-template-columns: 1fr;
}

/* Tablet: products pair up 2x2. Paths stay stacked — 3 across this narrow
   squeezes the step links to ~160px and they wrap mid-phrase. */
@media screen and (min-width: 45em) {
  .md-typeset .grid.tl-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 4 products in one row, 3 paths in one row. Both switch at the
   same breakpoint so the two bands stay visually in step. */
@media screen and (min-width: 64em) {
  .md-typeset .grid.tl-products {
    grid-template-columns: repeat(4, 1fr);
  }

  .md-typeset .grid.tl-paths {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Four across leaves ~250-290px per product card, so the generous card
     padding comes down or the descriptions wrap to five lines. */
  .md-typeset .grid.cards.tl-products > ul > li {
    padding: 1.25rem;
  }
}

/* ── "Where do I start?" path cards ──────────────────────────────────── */

/* Each card ends in a numbered route rather than prose, so the steps get a
   branded counter instead of the default list marker. */
.md-typeset .tl-paths ol {
  list-style: none;
  counter-reset: tl-step;
  margin: 0.9rem 0 0;
  padding: 0;
}

.md-typeset .tl-paths ol li {
  counter-increment: tl-step;
  position: relative;
  margin: 0 0 0.55rem;
  margin-left: 0;
  padding-left: 2rem;
  line-height: 1.5;
}

.md-typeset .tl-paths ol li:last-child {
  margin-bottom: 0;
}

.md-typeset .tl-paths ol li::before {
  content: counter(tl-step);
  position: absolute;
  left: 0;
  top: 0.08rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-primary-fg-color);
  font-size: 0.68rem;
  font-weight: 700;
  font-style: italic;
}

.md-typeset .tl-paths .twemoji {
  color: var(--md-primary-fg-color);
}

/* ── "Popular guides" compact cards ──────────────────────────────────── */

/* Same card chrome as the product grid, but tighter — six of these at full
   card padding would push the rest of the page below the fold. */
.md-typeset .grid.cards.tl-guides > ul > li {
  padding: 1.1rem 1.2rem;
}

.md-typeset .tl-guides > ul > li > p:first-child {
  margin-top: 0;
  margin-bottom: 0.35rem;
  font-size: 0.86rem;
}

.md-typeset .tl-guides > ul > li > p:first-child a {
  color: var(--tl-text-emphasis);
}

.md-typeset .tl-guides > ul > li:hover > p:first-child a {
  color: var(--md-primary-fg-color);
}

.md-typeset .tl-guides > ul > li > p:last-child {
  margin-bottom: 0;
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
}

/* ── "Latest releases" list ──────────────────────────────────────────── */
.md-typeset .tl-releases > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset .tl-releases > ul > li {
  margin-left: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .tl-releases > ul > li:first-child {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .tl-releases > ul > li strong {
  color: var(--tl-text-emphasis);
}

/* ── Tables: softer borders ──────────────────────────────────────────── */
.md-typeset table:not([class]) {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) th {
  background: var(--md-accent-fg-color--transparent);
  font-weight: 600;
}

/* ── Respect reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}