/* PhotonHub docs — the leapfield.ai design language on top of Material.
   Tokens mirror website/index.html (coherent-cyan; see docs/theme-colors.md):
   one brand hue, neutrals carry everything else, light by default. */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --lf-cyan-100: #cff3ff;
  --lf-cyan-300: #4ddfff;
  --lf-cyan-400: #00d4ff;
  --lf-cyan-600: #0086b3;
  --lf-cyan-700: #00658a;
  --md-code-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Material sets this token on root children as well as the root. */
:root, :root > * { --md-text-font-family: var(--ph-font-text); }

[data-md-color-scheme="default"] {
  --lf-bg: #f7f9fb;
  --lf-surface: #ffffff;
  --lf-surface-2: #eff2f6;
  --lf-hairline: #e3e7ec;
  --lf-input-border: #c9cfd8;
  --lf-text: #0d1117;
  --lf-text-2: #5b6572;
  --lf-text-3: #8a94a6;
  --lf-accent: var(--lf-cyan-600);
  --lf-link: var(--lf-cyan-700);
  --lf-selection: var(--lf-cyan-100);
  --lf-shadow: 0 1px 2px rgba(13, 17, 23, .05), 0 8px 24px -12px rgba(13, 17, 23, .12);

  --md-default-bg-color: var(--lf-bg);
  --md-default-fg-color: var(--lf-text);
  --md-default-fg-color--light: var(--lf-text-2);
  --md-default-fg-color--lighter: var(--lf-text-3);
  --md-default-fg-color--lightest: var(--lf-hairline);
  --md-primary-fg-color: var(--lf-bg);
  --md-primary-bg-color: var(--lf-text);
  --md-primary-bg-color--light: var(--lf-text-2);
  --md-accent-fg-color: var(--lf-accent);
  --md-accent-fg-color--transparent: rgba(0, 134, 179, .1);
  --md-typeset-a-color: var(--lf-link);
  --md-code-bg-color: var(--lf-surface-2);
  --md-code-fg-color: var(--lf-text);
  --md-code-hl-keyword-color: #315fae;
  --md-code-hl-function-color: #8f3fa0;
  --md-code-hl-number-color: #b92525;
  --md-footer-bg-color: var(--lf-bg);
  --md-footer-bg-color--dark: var(--lf-bg);
  --md-footer-fg-color: var(--lf-text);
  --md-footer-fg-color--light: var(--lf-text-2);
  --md-footer-fg-color--lighter: var(--lf-text-3);
}

[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --lf-bg: #0a0c10;
  --lf-surface: #12151c;
  --lf-surface-2: #232933;
  --lf-hairline: #1e232e;
  --lf-input-border: #5b6572;
  --lf-text: #eff2f6;
  --lf-text-2: #8a94a6;
  --lf-text-3: #6b7585;
  --lf-accent: var(--lf-cyan-400);
  --lf-link: var(--lf-cyan-300);
  --lf-selection: #0a3346;
  --lf-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .5);

  --md-default-bg-color: var(--lf-bg);
  --md-default-fg-color: var(--lf-text);
  --md-default-fg-color--light: var(--lf-text-2);
  --md-default-fg-color--lighter: var(--lf-text-3);
  --md-default-fg-color--lightest: var(--lf-hairline);
  --md-primary-fg-color: var(--lf-bg);
  --md-primary-bg-color: var(--lf-text);
  --md-primary-bg-color--light: var(--lf-text-2);
  --md-accent-fg-color: var(--lf-accent);
  --md-accent-fg-color--transparent: rgba(0, 212, 255, .12);
  --md-typeset-a-color: var(--lf-link);
  --md-code-bg-color: var(--lf-surface-2);
  --md-code-fg-color: var(--lf-text);
  --md-footer-bg-color: var(--lf-bg);
  --md-footer-bg-color--dark: var(--lf-bg);
  --md-footer-fg-color: var(--lf-text);
  --md-footer-fg-color--light: var(--lf-text-2);
  --md-footer-fg-color--lighter: var(--lf-text-3);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--lf-selection); }
:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

/* ---- Header: translucent, hairline, dark text (landing `header`/.nav) ---- */
.md-header {
  background: color-mix(in srgb, var(--lf-bg) 82%, transparent);
  color: var(--lf-text);
  border-bottom: 1px solid var(--lf-hairline);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: none;
}
.md-header--shadow { box-shadow: none; }
.md-header__title { font-weight: 650; font-size: .85rem; letter-spacing: -.01em; }
.md-header__button { color: var(--lf-text-2); }
.md-header__button:hover { color: var(--lf-text); opacity: 1; }
.md-header__button.md-logo:hover { opacity: 1; }

.md-search__form {
  background: var(--lf-surface-2);
  border: 1px solid var(--lf-hairline);
  border-radius: 3px;
  box-shadow: none;
}
.md-search__form:hover { background: var(--lf-surface); }
.md-search__input { color: var(--lf-text); font-size: .7rem; }
.md-search__input::placeholder, .md-search__icon { color: var(--lf-text-2); }
.md-search__input + .md-search__icon svg { fill: var(--lf-text-2); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--lf-surface);
  border-radius: 3px 3px 0 0;
}
.md-search__output { border-radius: 0 0 3px 3px; }
.md-search__scrollwrap { background: var(--lf-surface); }

/* ---- Type: bold, tight-tracked headings (landing h1/h2/h3) ---------------- */
.md-typeset { font-size: .85rem; line-height: 1.7; }
.md-header__title,
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  font-family: var(--ph-font-heading);
}
.md-typeset h1 {
  color: var(--lf-text);
  font-size: 2.1em; font-weight: 500; letter-spacing: -.045em; line-height: 1.15;
  margin: 0 0 1rem;
}
.md-typeset h2 { font-size: 1.55em; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.md-typeset h3 { font-size: 1.15em; font-weight: 500; letter-spacing: -.025em; }
.md-typeset h4 { font-weight: 600; }
.md-typeset :is(p, li, dd, td) a { text-decoration: underline; text-underline-offset: .18em; }
.md-typeset a:hover { text-decoration: underline; }
.md-typeset .headerlink { color: var(--lf-text-3); }

/* ---- Sidebars: section labels as landing "kickers" ------------------------ */
.md-nav { font-size: .7rem; }
.md-nav__link { color: var(--lf-text-2); }
.md-nav__link:hover, .md-nav__link--active { color: var(--lf-link); }
.md-nav__item--section > .md-nav__link,
.md-nav__item--section > .md-nav__container > .md-nav__link,
.md-sidebar--secondary .md-nav__title,
.md-nav--primary .md-nav__title {
  color: var(--lf-link);
  font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  margin-top: .6rem;
}
.md-sidebar--secondary .md-nav__title { padding-left: 0; }
.md-nav__item--section > .md-nav__link .md-nav__icon { display: none; }

/* ---- Code: surface-2 blocks with the same fine rules as the homepage ---- */
.md-typeset code {
  background: var(--lf-surface-2);
  border: 1px solid var(--lf-hairline);
  border-radius: 3px;
  padding: 0 .35em;
  font-size: .88em;
}
.md-typeset pre > code {
  border: 0; border-radius: 0; padding: .8em 1.1em; font-size: .85em; line-height: 1.55;
}
.md-typeset .highlight > pre, .md-typeset pre {
  border: 1px solid var(--lf-hairline); border-radius: 3px; overflow: hidden;
}
.md-typeset .highlight span.filename {
  background: var(--lf-surface);
  color: var(--lf-text-2);
  border: 1px solid var(--lf-hairline); border-bottom: 0;
  border-radius: 3px 3px 0 0;
  font: 700 .55rem/1 var(--md-text-font-family);
  letter-spacing: .09em; text-transform: uppercase;
  padding: .45rem .8rem;
}
.md-typeset .highlight span.filename + pre { border-radius: 0 0 3px 3px; }
.md-typeset .highlight span.filename + pre > code { padding-top: .7em; }
.md-clipboard { color: var(--lf-text-3); }
.md-clipboard:hover { color: var(--lf-accent); }

/* ---- Cards (landing .card) ---------------------------------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background: var(--lf-surface);
  border: 1px solid var(--lf-hairline);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
  box-shadow: none;
  transition: border-color .15s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--lf-accent);
  box-shadow: none;
}
.md-typeset .grid.cards > ul > li > hr { border-color: var(--lf-hairline); margin: .8rem 0; }
.md-typeset .grid.cards > ul > li > p:first-child {
  font-size: .9rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3;
}
.md-typeset .grid.cards > ul > li > p:first-child a { color: var(--lf-text); }
.md-typeset .grid.cards > ul > li > p:first-child a:hover { color: var(--lf-link); text-decoration: none; }
.md-typeset .grid.cards > ul > li img { border-radius: 3px; }
.md-typeset .grid.cards > ul > li > p:last-child { color: var(--lf-text-2); }

/* The examples index: three cards to a row, two on a tablet, one on a phone. */
.md-typeset .grid.cards.lf-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media screen and (max-width: 56.25em) {
  .md-typeset .grid.cards.lf-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 37.5em) {
  .md-typeset .grid.cards.lf-examples { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Figures ------------------------------------------------------------- */
.md-typeset img { border-radius: 3px; }
[data-md-color-scheme="slate"] .md-typeset img:not(.ph-gallery img) { background: #fff; }

/* ---- Tables (landing .req-table) ------------------------------------------ */
.md-typeset table:not([class]) {
  border: 1px solid var(--lf-hairline);
  border-radius: 3px;
  box-shadow: none;
  font-size: .75rem;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--lf-surface-2);
  color: var(--lf-text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--lf-hairline);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--lf-hairline); }
.md-typeset table:not([class]) tr:hover { background: var(--lf-surface); box-shadow: none; }

/* ---- Buttons (landing .btn) --------------------------------------------- */
.md-typeset .md-button {
  border: 1px solid var(--lf-hairline); border-radius: 3px;
  color: var(--lf-text); font-weight: 600; padding: .55em 1.1em;
}
.md-typeset .md-button:hover { background: var(--lf-surface-2); border-color: var(--lf-hairline); color: var(--lf-text); }
.md-typeset .md-button--primary { background: var(--lf-cyan-400); border-color: transparent; color: #0d1117; }
.md-typeset .md-button--primary:hover { background: var(--lf-cyan-400); filter: brightness(.93); color: #0d1117; }

/* ---- Admonitions: hairline surfaces, accent rail ---------------------------- */
.md-typeset .admonition, .md-typeset details {
  border-radius: 3px; box-shadow: none; border: 1px solid var(--lf-hairline);
  border-left: 2px solid var(--lf-link); background: var(--lf-surface); font-size: .75rem;
}
.md-typeset :is(.admonition, details)[class] {
  border-color: var(--lf-hairline);
  border-left-color: var(--lf-link);
}
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) {
  color: var(--lf-text);
  background: color-mix(in srgb, var(--lf-cyan-400) 8%, var(--lf-surface));
}
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
  background-color: var(--lf-link);
}

/* ---- Footer: plain, light, hairline (landing footer) ----------------------- */
.md-footer { border-top: 1px solid var(--lf-hairline); }
.md-footer, .md-footer-meta { background: var(--lf-bg); color: var(--lf-text-2); }
.md-footer__link { color: var(--lf-text-2); }
.md-footer__link:hover { color: var(--lf-link); opacity: 1; }
.md-footer__title, .md-footer__direction { color: inherit; }
.md-copyright, .md-copyright__highlight { color: var(--lf-text-2); font-size: .68rem; }
.md-social__link svg { fill: var(--lf-text-2); }
.md-social__link:hover svg { fill: var(--lf-link); }

/* ---- Back-to-top ------------------------------------------------------------ */
.md-top { background: var(--lf-surface); color: var(--lf-text); border: 1px solid var(--lf-hairline); box-shadow: none; }
.md-top:hover { background: var(--lf-surface-2); color: var(--lf-text); }

/* ---- API reference: symbol-type chips read as one system ------------------- */
.doc-symbol-attribute::after { content: "attr"; }
.doc-symbol-class::after { content: "class"; }
.doc-symbol-function::after { content: "func"; }
.doc-symbol-module::after { content: "mod"; }
.doc-symbol-class, .doc-symbol-function, .doc-symbol-attribute, .doc-symbol-module {
  border-radius: 3px; font-size: .68rem; padding: 0 .3em;
}

/* ---- Home-page card grid (attr_list + md_in_html) ------------------------- */
.lf-cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.2rem 0;
}
.lf-cards > * {
  background: var(--lf-surface);
  border: 1px solid var(--lf-hairline);
  border-radius: 3px;
  box-shadow: none;
  padding: 1rem 1.1rem;
}
.lf-cards > * > :first-child { margin-top: 0; }
.lf-cards > * > :last-child { margin-bottom: 0; }
@media screen and (max-width: 60em) {
  .lf-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Light/dark image pairs (Material's #only-light / #only-dark convention) --
   Restated here so the example cards switch with the palette toggle even if a
   Material release renames its own rule. */
[data-md-color-scheme="slate"] img[src$="#only-light"],
[data-md-color-scheme="default"] img[src$="#only-dark"] { display: none; }