/*
 * Site theme, modelled on angular.dev: neutral surfaces, Inter type, a slim header in the
 * page colour, a grouped left sidebar and a gradient accent. The accent is TrafficGrid's navy
 * brand family (shared with the admin portal and the mobile app), lightened for the docs.
 * Colours are Material palette variables, defined for both schemes ("default" and "slate").
 */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&display=swap");

:root {
  /* Bright brand blue to navy. White text clears AA on every stop. */
  --tg-gradient: linear-gradient(90deg, #3576c8 0%, #2d63ad 45%, #284b7c 100%);
  /* Gradient for display text; the dark scheme swaps in lighter stops. */
  --tg-gradient-text: var(--tg-gradient);
  --tg-glow: 40, 75, 124;
  --tg-radius: 0.6rem;
  --tg-radius-lg: 1rem;
  --tg-heading-font: "Inter Tight", var(--md-text-font-family, "Inter"), sans-serif;
}

/* ---------- Palettes ---------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #18181b;
  --md-default-fg-color--light: #52525b;
  --md-default-fg-color--lighter: #6e6e78;
  --md-default-fg-color--lightest: #e7e7ea;
  --md-primary-fg-color: #2d63ad;
  --md-primary-fg-color--light: #3576c8;
  --md-primary-fg-color--dark: #284b7c;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #3576c8;
  --md-accent-fg-color--transparent: rgba(53, 118, 200, 0.1);
  --md-typeset-color: #27272a;
  --md-typeset-a-color: #2d63ad;
  --md-code-bg-color: #f6f6f8;
  --md-code-fg-color: #27272a;
  --tg-surface: #f8f8fa;
  --tg-surface-raised: #ffffff;
  --tg-border: #e7e7ea;
  --tg-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(24, 24, 27, 0.06);
}

[data-md-color-scheme="slate"] {
  --md-hue: 215;
  --md-default-bg-color: #0f0f12;
  --md-default-fg-color: #f4f4f5;
  --md-default-fg-color--light: #b4b4bd;
  --md-default-fg-color--lighter: #8a8a95;
  --md-default-fg-color--lightest: #26262c;
  --md-primary-fg-color: #8fb4e6;
  --md-primary-fg-color--light: #a9c8f0;
  --md-primary-fg-color--dark: #6f9fd6;
  --md-primary-bg-color: #0f0f12;
  --md-accent-fg-color: #a9c8f0;
  --md-accent-fg-color--transparent: rgba(169, 200, 240, 0.12);
  --md-typeset-color: #e4e4e7;
  --md-typeset-a-color: #8fb4e6;
  --md-code-bg-color: #16161b;
  --md-code-fg-color: #e4e4e7;
  --md-footer-bg-color: #0b0b0e;
  --md-footer-bg-color--dark: #08080a;
  --tg-surface: #15151a;
  --tg-surface-raised: #1a1a20;
  --tg-border: #26262c;
  --tg-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --tg-gradient-text: linear-gradient(90deg, #a9c8f0 0%, #8fb4e6 45%, #6f9fd6 100%);
  --tg-glow: 111, 159, 214;
}

/* ---------- Header ---------- */
.md-header {
  background: color-mix(in srgb, var(--md-default-bg-color) 85%, transparent);
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--tg-border);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.md-header--shadow { box-shadow: none; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.6rem; width: auto; }
.md-header__title { font-family: var(--tg-heading-font); font-weight: 700; letter-spacing: -0.01em; }
.md-header__topic:first-child { font-weight: 700; }
.md-header__button:hover, .md-header__option:hover { opacity: 0.8; }

/* Search: a quiet pill instead of Material's translucent white box. */
.md-search__form { background: var(--tg-surface); }
@media screen and (min-width: 60em) {
  .md-search__form { border: 1px solid var(--tg-border); border-radius: 999px; height: 2rem; }
  .md-search__form:hover { background: var(--tg-surface); border-color: var(--md-default-fg-color--lighter); }
}
.md-search__input { color: var(--md-default-fg-color); font-size: 0.75rem; }
.md-search__input::placeholder { color: var(--md-default-fg-color--lighter); }
.md-search__input + .md-search__icon, .md-search__icon[for="__search"] { color: var(--md-default-fg-color--lighter); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: 0.6rem 0.6rem 0 0; }
.md-search__output { border-radius: 0 0 var(--tg-radius) var(--tg-radius); }

/* ---------- Sidebar navigation ---------- */
@media screen and (min-width: 76.25em) {
  /* The site title already sits in the header; the sidebar starts with the first group. */
  .md-nav--primary > .md-nav__title { display: none; }
}
.md-nav { font-size: 0.72rem; }
.md-nav__title { font-family: var(--tg-heading-font); }
/* Section headings (navigation.sections): small caps labels, like angular.dev's groups. Desktop
   only: in the mobile drawer the same items are tappable rows and keep Material's sizing. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav__item--section > .md-nav__link {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--lighter);
    margin-top: 1.4em;
  }
  .md-nav--primary .md-nav__item--section:first-child > .md-nav__link { margin-top: 0.4em; }
}
.md-nav__link {
  border-radius: 0.4rem;
  padding: 0.3em 0.6em;
  margin-top: 0.15em;
  color: var(--md-default-fg-color--light);
  transition: color 0.15s, background-color 0.15s;
}
.md-nav__link:is(:hover, :focus-visible) { color: var(--md-default-fg-color); }
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav__link[href]:hover { background: var(--tg-surface); }
  .md-nav--primary .md-nav__link--active {
    position: relative;
    color: var(--md-default-fg-color);
    background: var(--tg-surface);
    font-weight: 600;
  }
  .md-nav--primary .md-nav__link--active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.35em;
    width: 3px;
    border-radius: 3px;
    background: var(--tg-gradient);
  }
}
/* Page table of contents on the right. */
.md-nav--secondary .md-nav__title { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-default-fg-color--lighter); box-shadow: none; background: transparent; }
.md-nav--secondary .md-nav__link--active { color: var(--md-typeset-a-color); font-weight: 600; }

/* ---------- Content typography ---------- */
.md-main__inner { margin-top: 1.2rem; }
.md-typeset { font-size: 0.82rem; line-height: 1.7; color: var(--md-typeset-color); }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-family: var(--tg-heading-font);
  color: var(--md-default-fg-color);
  letter-spacing: -0.02em;
}
.md-typeset h1 { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.9em; }
.md-typeset h2 {
  font-size: 1.35rem; font-weight: 700; margin-top: 2.2em;
  padding-top: 1.2em; border-top: 1px solid var(--tg-border);
}
.md-typeset h1 + h2, .md-typeset h1 + p + h2 { border-top: 0; padding-top: 0; }
.md-typeset h3 { font-size: 1.05rem; font-weight: 600; }
.md-typeset h4 { font-size: 0.9rem; font-weight: 600; }
.md-typeset a { text-decoration: none; text-underline-offset: 0.2em; }
.md-typeset a:hover { text-decoration: underline; color: var(--md-accent-fg-color); }
.md-typeset .headerlink { color: var(--md-default-fg-color--lighter); }
.md-typeset hr { border-color: var(--tg-border); }
.md-typeset blockquote { border-left: 3px solid var(--md-primary-fg-color); color: var(--md-default-fg-color--light); }

/* ---------- Code ---------- */
.md-typeset code { border-radius: 0.3rem; font-size: 0.82em; }
.md-typeset :not(pre) > code { padding: 0.1em 0.35em; border: 1px solid var(--tg-border); }
.md-typeset pre { border-radius: var(--tg-radius); }
.md-typeset pre > code { border: 1px solid var(--tg-border); border-radius: var(--tg-radius); padding: 1em 1.2em; }
.md-typeset .highlight { margin: 1.2em 0; }

/* ---------- Tables ---------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  overflow: hidden;
  box-shadow: none;
  font-size: 0.74rem;
}
.md-typeset table:not([class]) th {
  background: var(--tg-surface);
  color: var(--md-default-fg-color);
  font-weight: 600;
  border-bottom: 1px solid var(--tg-border);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--tg-border); }
.md-typeset table:not([class]) tr:hover { background: var(--tg-surface); box-shadow: none; }

/* ---------- Admonitions ---------- */
.md-typeset .admonition, .md-typeset details:not(.tgt-case) {
  border: 1px solid var(--tg-border);
  border-left-width: 3px;
  border-radius: var(--tg-radius);
  box-shadow: none;
  font-size: 0.78rem;
  background: var(--tg-surface);
}
.md-typeset .admonition-title, .md-typeset summary { background: transparent !important; font-weight: 600; }

/* ---------- Buttons ---------- */
.md-typeset .md-button {
  border-radius: 999px;
  border: 1px solid var(--tg-border);
  color: var(--md-default-fg-color);
  background: var(--tg-surface-raised);
  font-weight: 600;
  padding: 0.55em 1.4em;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.md-typeset .md-button:is(:hover, :focus-visible) {
  color: var(--md-default-fg-color);
  border-color: var(--md-default-fg-color--lighter);
  background: var(--tg-surface-raised);
  text-decoration: none;
}
.md-typeset .md-button--primary {
  border: 0;
  color: #fff;
  background: var(--tg-gradient);
  box-shadow: 0 6px 20px rgba(var(--tg-glow), 0.25);
}
.md-typeset .md-button--primary:is(:hover, :focus-visible) {
  color: #fff;
  background: var(--tg-gradient);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(var(--tg-glow), 0.35);
}

/* ---------- Home page ---------- */
.tg-hero {
  position: relative;
  text-align: center;
  padding: 4.5rem 1rem 3.5rem;
  margin: 0 0 1rem;
  isolation: isolate;
}
/* Soft colour wash behind the headline. */
.tg-hero::before {
  content: "";
  position: absolute;
  inset: 0 10% 15%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(53, 118, 200, 0.18), transparent),
              radial-gradient(closest-side at 70% 60%, rgba(var(--tg-glow), 0.16), transparent);
  filter: blur(30px);
}
/* No permalink markers on the landing page's display headings. */
.md-typeset .tg-hero .headerlink, .md-typeset .tg-section-title .headerlink { display: none; }
.tg-hero__logo { width: 4rem; height: 4rem; margin: 0 auto 1.2rem; display: block; }
.md-typeset .tg-hero h1 {
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 0.4em;
  background: var(--tg-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tg-hero__tagline {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto 2rem !important;
  color: var(--md-default-fg-color--light);
}
.md-typeset .tg-hero__actions > p { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; }
.md-typeset .tg-hero__actions .md-button { margin: 0; }

.md-typeset .tg-section-title {
  text-align: center;
  border-top: 0;
  padding-top: 0;
  margin-top: 1.5em;
}
.md-typeset .tg-section-lead {
  text-align: center;
  color: var(--md-default-fg-color--light);
  margin: -0.4em auto 1.6em;
  max-width: 34rem;
}

/* Material's "grid cards", restyled as angular.dev tiles. */
.md-typeset .grid { grid-gap: 1rem; }
.md-typeset .grid.cards > ul > li, .md-typeset .grid > .card {
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-surface-raised);
  padding: 1.2rem 1.3rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.md-typeset .grid.cards > ul > li:is(:hover, :focus-within) {
  border-color: transparent;
  box-shadow: var(--tg-shadow);
  transform: translateY(-2px);
  /* Gradient hairline border on hover. */
  background:
    linear-gradient(var(--tg-surface-raised), var(--tg-surface-raised)) padding-box,
    var(--tg-gradient) border-box;
  border: 1px solid transparent;
}
/* Fixed column counts (3 / 2 / 1) so a last card alone on its row can span the row instead
   of sitting orphaned; Material's auto-fit grid would make the row length unpredictable. */
@media screen and (min-width: 40em) {
  .md-typeset .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-typeset .grid.cards > ul > li:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media screen and (min-width: 60em) {
  .md-typeset .grid.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-typeset .grid.cards > ul > li:last-child:nth-child(2n + 1) { grid-column: auto; }
  .md-typeset .grid.cards > ul > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
.md-typeset .grid.cards > ul > li > hr { margin: 0.6rem 0; border: 0; }
.md-typeset .grid.cards .lg { width: 1.6rem; height: 1.6rem; }
.md-typeset .grid.cards .twemoji.lg svg { width: 1.6rem; height: 1.6rem; max-height: none; }
.md-typeset .grid.cards .twemoji.tg-icon { color: var(--md-accent-fg-color); }
.md-typeset .grid.cards p { margin: 0.4em 0; color: var(--md-default-fg-color--light); font-size: 0.78rem; }
.md-typeset .grid.cards strong { color: var(--md-default-fg-color); font-family: var(--tg-heading-font); font-size: 0.95rem; }
.md-typeset .grid.cards a { font-weight: 600; font-size: 0.75rem; }
/* The whole card is clickable: its one link is stretched over the tile. */
.md-typeset .grid.cards > ul > li { position: relative; cursor: pointer; }
.md-typeset .grid.cards > ul > li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.md-typeset .grid.cards > ul > li a:focus-visible { outline: none; }
.md-typeset .grid.cards > ul > li:has(a:focus-visible) { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }

/* ---------- Footer ---------- */
.md-footer { border-top: 1px solid var(--tg-border); }
[data-md-color-scheme="default"] .md-footer { background: var(--tg-surface); color: var(--md-default-fg-color--light); }
[data-md-color-scheme="default"] .md-footer__link, [data-md-color-scheme="default"] .md-footer__title { color: var(--md-default-fg-color); }
[data-md-color-scheme="default"] .md-footer-meta { background: var(--md-default-bg-color); color: var(--md-default-fg-color--lighter); }
[data-md-color-scheme="default"] .md-footer-meta a { color: var(--md-default-fg-color--light); }
[data-md-color-scheme="default"] .md-copyright { color: var(--md-default-fg-color--lighter); }
.md-footer-meta { border-top: 1px solid var(--tg-border); }

/* ---------- Back to top ---------- */
.md-top { border: 1px solid var(--tg-border); background: var(--tg-surface-raised); color: var(--md-default-fg-color); box-shadow: var(--tg-shadow); }
.md-top:hover { background: var(--tg-gradient); color: #fff; }