/* =====================================================================
   Lucky Robots brand theme.
   Mirrors luckyrobots.com: Aeonik (sans) + Cascadia Code (mono), a warm
   light palette (#fff / #f5f4f2 surfaces, near-black text) with a green
   accent (#5dc24e). Near-black header retained from the earlier request.
   ===================================================================== */

:root {
  /* Brand accent greens (marketing-site accent is #5dc24e). */
  --lr-green:      #ec9e24;
  --lr-green-mid:  #2f9ef4;   /* hover / active on white */
  --lr-green-deep: #ff1a33;   /* link text — AA contrast on white */

  /* Header / top-tabs background — near-black (matches the brand's #000). */
  --md-primary-fg-color:        #14151a;   /* rgb(20, 21, 26) */
  --md-primary-fg-color--light: #2b2d36;
  --md-primary-fg-color--dark:  #0c0d11;

  /* Brand fonts. Aeonik is self-hosted (see @font-face below); until those
     woff2 files exist it falls back to a clean system sans. */
  --md-text-font: "Aeonik Regular", "Aeonik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-code-font: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Light scheme: warm surfaces, near-black text, green links. */
[data-md-color-scheme="default"] {
  /* Primary — header & top tabs */
  --md-primary-fg-color:             #14151a;
  --md-primary-fg-color--light:      #2b2d36;
  --md-primary-fg-color--dark:       #0c0d11;
  --md-primary-bg-color:             #ffffff;
  --md-primary-bg-color--light:      #ffffffb3;

  /* Accent — link hover / focus / active */
  --md-accent-fg-color:              var(--lr-green-mid);
  --md-accent-fg-color--transparent: rgba(236, 158, 36, 0.35);  /* search-result hover etc. — matches the brand-amber ::selection highlight */
  --md-accent-bg-color:              #ffffff;
  --md-accent-bg-color--light:       #ffffffb3;

  /* Foreground (text) */
  --md-default-fg-color:             #000000de;
  --md-default-fg-color--light:      #0000008a;
  --md-default-fg-color--lighter:    #00000052;
  --md-default-fg-color--lightest:   #00000012;

  /* Background (surfaces) */
  --md-default-bg-color:             #ffffff;
  --md-default-bg-color--light:      #ffffffb3;
  --md-default-bg-color--lighter:    #ffffff4d;
  --md-default-bg-color--lightest:   #ffffff1f;

  /* Prose / typeset */
  --md-typeset-color:                #14151a;
  --md-typeset-a-color:              var(--lr-green-deep);
  --md-typeset-mark-color:           rgba(247, 190, 70, 0.40);
  --md-typeset-del-color:            #f5503d26;
  --md-typeset-ins-color:            #0bd57026;
  --md-typeset-table-color:          #0000001f;
  --md-typeset-table-color--light:   rgba(0,0,0,.035);
  --md-typeset-kbd-color:            #fafafa;
  --md-typeset-kbd-accent-color:     #ffffff;
  --md-typeset-kbd-border-color:     #b8b8b8;

  /* Admonitions */
  --md-admonition-fg-color:          var(--md-default-fg-color);
  --md-admonition-bg-color:          var(--md-default-bg-color);

  /* Footer */
  --md-footer-fg-color:              #a9a8a3;
  --md-footer-fg-color--light:       #ffffffb3;
  --md-footer-fg-color--lighter:     #ffffff73;
  --md-footer-bg-color:              #1a1a1a;
  --md-footer-bg-color--dark:        #141414;
}

/* Dark scheme: keep dark chrome, brighter green accents. */
[data-md-color-scheme="slate"] {
  /* Primary — header & top tabs */
  --md-primary-fg-color:             #141414;
  --md-primary-fg-color--light:      #2b2d36;
  --md-primary-fg-color--dark:       #0c0d11;
  --md-primary-bg-color:             #ffffff;
  --md-primary-bg-color--light:      #ffffffb3;

  /* Accent — link hover / focus / active */
  --md-accent-fg-color:              var(--lr-green);
  --md-accent-fg-color--transparent: rgba(236, 158, 36, 0.35);  /* search-result hover etc. — matches the brand-amber ::selection highlight */
  --md-accent-bg-color:              #ffffff;
  --md-accent-bg-color--light:       #ffffffb3;

  /* Foreground (text) */
  --md-default-fg-color:             hsla(var(--md-hue),15%,90%,0.82);
  --md-default-fg-color--light:      hsla(var(--md-hue),15%,90%,0.56);
  --md-default-fg-color--lighter:    hsla(var(--md-hue),15%,90%,0.32);
  --md-default-fg-color--lightest:   hsla(var(--md-hue),15%,90%,0.12);

  /* Background (surfaces) */
  --md-default-bg-color:             #1a1a1a;
  --md-default-bg-color--light:      hsla(var(--md-hue),15%,14%,0.54);
  --md-default-bg-color--lighter:    hsla(var(--md-hue),15%,14%,0.26);
  --md-default-bg-color--lightest:   hsla(var(--md-hue),15%,14%,0.07);

  /* Prose / typeset */
  --md-typeset-color:                var(--md-default-fg-color);
  --md-typeset-a-color:              var(--lr-green);
  --md-typeset-mark-color:           rgba(247, 190, 70, 0.30);
  --md-typeset-del-color:            #f5503d26;
  --md-typeset-ins-color:            #0bd57026;
  --md-typeset-table-color:          hsla(var(--md-hue),15%,95%,0.12);
  --md-typeset-table-color--light:   hsla(var(--md-hue),15%,95%,0.035);
  --md-typeset-kbd-color:            hsla(var(--md-hue),15%,90%,0.12);
  --md-typeset-kbd-accent-color:     hsla(var(--md-hue),15%,90%,0.2);
  --md-typeset-kbd-border-color:     hsla(var(--md-hue),15%,14%,1);

  /* Admonitions */
  --md-admonition-fg-color:          var(--md-default-fg-color);
  --md-admonition-bg-color:          var(--md-default-bg-color);

  /* Footer */
  --md-footer-fg-color:              #ffffff;
  --md-footer-fg-color--light:       #ffffffb3;
  --md-footer-fg-color--lighter:     #ffffff73;
  --md-footer-bg-color:              #1a1a1a;
  --md-footer-bg-color--dark:        #141414;
}

/* =====================================================================
   Code syntax highlighting
   Edit code-block colors here. Token colors map to Pygments classes
   (keyword, string, number, ...). Light (default) and dark (slate) are
   separate; var(...) values track other theme colors -- replace with a
   hex/rgba to make a token independent.
   ===================================================================== */
[data-md-color-scheme="default"] {
  --md-code-bg-color:             #f5f4f2;                  /* code-block background */
  --md-code-fg-color:             #36464e;                  /* plain code text */
  --md-code-bg-color--light:      #f5f5f5b3;                /* lighter code surface (inline code, etc.) */
  --md-code-bg-color--lighter:    #f5f5f54d;                /* lightest code surface */
  --md-code-hl-color:             #2977ff;                  /* highlighted-line background (hl_lines) */
  --md-code-hl-color--light:      #2977ff1a;                /* highlighted line, subtle */
  --md-code-hl-keyword-color:     #fb4934;                  /* keywords */
  --md-code-hl-string-color:      #2fb170;                  /* strings */
  --md-code-hl-number-color:      #95ae88;                  /* numbers */
  --md-code-hl-function-color:    #ff8000;                  /* function names */
  --md-code-hl-constant-color:    #9383e2;                  /* constants */
  --md-code-hl-special-color:     #f06090;                  /* special */
  --md-code-hl-name-color:        var(--md-code-fg-color);  /* identifiers / names */
  --md-code-hl-operator-color:    var(--md-default-fg-color--light); /* operators */
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light); /* punctuation */
  --md-code-hl-comment-color:     var(--md-default-fg-color--light); /* comments */
  --md-code-hl-generic-color:     var(--md-default-fg-color--light); /* generic tokens */
  --md-code-hl-variable-color:    var(--md-default-fg-color--light); /* variables */
}

[data-md-color-scheme="slate"] {
  --md-code-bg-color:             #1f1f1f; /* code-block background */
  --md-code-fg-color:             hsla(var(--md-hue),18%,86%,0.82); /* plain code text */
  --md-code-bg-color--light:      hsla(var(--md-hue),15%,18%,0.9); /* lighter code surface (inline code, etc.) */
  --md-code-bg-color--lighter:    hsla(var(--md-hue),15%,18%,0.54); /* lightest code surface */
  --md-code-hl-color:             #2977ff;                  /* highlighted-line background (hl_lines) */
  --md-code-hl-color--light:      #2977ff1a;                /* highlighted line, subtle */
  --md-code-hl-keyword-color:     #fb4934;                  /* keywords */
  --md-code-hl-string-color:      #2fb170;                  /* strings */
  --md-code-hl-number-color:      #b5cea8;                  /* numbers */
  --md-code-hl-function-color:    #ff8000;                  /* function names */
  --md-code-hl-constant-color:    #9383e2;                  /* constants */
  --md-code-hl-special-color:     #f06090;                  /* special */
  --md-code-hl-name-color:        var(--md-code-fg-color);  /* identifiers / names */
  --md-code-hl-operator-color:    var(--md-default-fg-color--light); /* operators */
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light); /* punctuation */
  --md-code-hl-comment-color:     #57a64a; /* comments */
  --md-code-hl-generic-color:     var(--md-default-fg-color--light); /* generic tokens */
  --md-code-hl-variable-color:    var(--md-default-fg-color--light); /* variables */
}


/* =====================================================================
   Admonitions / call-outs — flat box, left accent bar, diagonal gradient,
   all-caps accent title, no icon. Applies to !!! blocks and collapsible
   ??? blocks in both schemes. The per-type accent color (bottom of section)
   drives the bar, the title text, and the gradient tint — edit those to taste.
   ===================================================================== */
.md-typeset .admonition,
.md-typeset details {
  --admonition-accent: var(--md-default-fg-color--light);   /* fallback for untyped boxes */
  border: none;
  border-left: 0.18rem solid var(--admonition-accent) !important;  /* beat Material's higher-specificity per-type border-color */
  border-radius: 0.4rem;
  box-shadow: none;
  padding: 0.5rem 0.95rem 0.7rem;
  background-color: var(--md-admonition-bg-color);
  background-image: linear-gradient(120deg,
      color-mix(in srgb, var(--admonition-accent) 14%, transparent),
      transparent 62%);
}

/* Title: all-caps, accent-colored, no icon, aligned with the body text. */
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  margin: 0;
  padding: 0.1rem 0;
  background: transparent;
  border: none;
  color: var(--admonition-accent);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  display: none;            /* hide the per-type icon */
}
/* Light mode: darken the title so the accent stays readable on a light background. */
[data-md-color-scheme="default"] .md-typeset .admonition > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details > summary {
  color: color-mix(in srgb, var(--admonition-accent) 75%, #000);
}

/* Collapsible (??? / ???+) summaries: Material targets <summary> at higher
   specificity than the title rule above, so force the same flat, left-aligned
   look and vertically center the disclosure chevron. */
.md-typeset details > summary {
  position: relative;                            /* anchor the chevron to the header */
  background: transparent !important;            /* let the box gradient show through the header */
  padding: 0.1rem 1.4rem 0.1rem 0 !important;    /* drop Material's 2rem icon indent; leave room for chevron */
}
.md-typeset details > summary::after {
  top: 50% !important;
  transform: translateY(-50%) !important;        /* center the chevron (collapsed) */
}
.md-typeset details[open] > summary::after {
  transform: translateY(-50%) rotate(90deg) !important;   /* preserve open-state rotation */
}
/* Collapsed = no body, so the box's expanded padding leaves the title high.
   Zero the box's vertical padding and balance it on the summary instead. */
.md-typeset details:not([open]) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.md-typeset details:not([open]) > summary {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Per-type accent colors (canonical types + aliases) — edit freely. */
.md-typeset .note                                   { --admonition-accent: #5b8def; }
.md-typeset .abstract, .md-typeset .summary, .md-typeset .tldr     { --admonition-accent: #4aa3df; }
.md-typeset .info, .md-typeset .todo                { --admonition-accent: #2f9ef4; }
.md-typeset .tip, .md-typeset .hint, .md-typeset .important        { --admonition-accent: #2fb170; }
.md-typeset .success, .md-typeset .check, .md-typeset .done        { --admonition-accent: #2fb170; }
.md-typeset .question, .md-typeset .help, .md-typeset .faq         { --admonition-accent: #5dc24e; }
.md-typeset .warning, .md-typeset .caution, .md-typeset .attention { --admonition-accent: #f7be46; }  /* brand amber — matches the screenshot */
.md-typeset .failure, .md-typeset .fail, .md-typeset .missing      { --admonition-accent: #ff6b5e; }
.md-typeset .danger, .md-typeset .error             { --admonition-accent: #f5503d; }
.md-typeset .bug                                    { --admonition-accent: #f06090; }
.md-typeset .example                                { --admonition-accent: #b07cff; }
.md-typeset .quote, .md-typeset .cite               { --admonition-accent: #9e9e9e; }

/* Airier headings, matching Aeonik's lighter weights on the brand site. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Un-mute h1 — Material defaults it to --md-default-fg-color--light; use the
   scheme-aware body text color so it matches in both light and dark modes. */
.md-typeset h1 { color: var(--md-typeset-color); }

/* Brand-yellow text selection. */
::selection { background: rgba(236, 158, 36, 0.35); }

/* Self-hosted brand fonts (downloaded from luckyrobots.com into docs/assets/fonts/). */
@font-face { font-family: "Aeonik Regular"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/aeonik-regular.woff2") format("woff2"); }
@font-face { font-family: "Aeonik Regular"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/aeonik-medium.woff2") format("woff2"); }
/* No real Aeonik bold (700) is shipped — map bold to the Medium file so the browser
   uses real glyphs instead of faux-bold (which made bold text "melt" together). */
@font-face { font-family: "Aeonik Regular"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/aeonik-medium.woff2") format("woff2"); }
@font-face { font-family: "Cascadia Code"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/cascadia-code-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cascadia Code"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/cascadia-code-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cascadia Code"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/cascadia-code-700-latin.woff2") format("woff2"); }

/* Never synthesize bold (we map bold to the real Medium glyphs above). Keep
   synthetic italic — Aeonik ships no italic face, so <em> still needs it. */
body { font-synthesis: style; }

/* Buttons (.md-button): the theme colors them with --md-primary-fg-color (our dark
   header color), which is invisible on dark pages — use the accent color instead. */
.md-typeset .md-button {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}
.md-typeset .md-button--primary {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--md-default-bg-color);    /* contrasts the accent fill in both schemes */
}

/* ---- brand logo ---- */
/* Inlined SVG logo (overrides/partials/logo.html) — keep its 26:17 aspect
   ratio instead of Material's default square 1.2rem box. */
.md-header__button.md-logo .lr-logo,
.md-nav__title .lr-logo {
  display: block;
  width: auto;
  height: 1.1rem;
  fill: currentColor;
}

/* ---- layout polish ---- */
.md-grid { max-width: 68rem; }

/* Embedded tutorial videos — responsive, capped width, rounded to match cards. */
.md-typeset .doc-video {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 1em 0 1.5em;
  border-radius: 0.4rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: #000;
}

/* YouTube embeds share .doc-video's footprint; iframes have no intrinsic
   height, so fix the ratio instead. Full text-column width (no 720px cap) —
   YouTube also serves higher quality to larger players. */
.md-typeset iframe.doc-video {
  aspect-ratio: 16 / 9;
  max-width: none;
}

.md-typeset h3 + p > code,
.md-typeset h3 + .highlight { scroll-margin-top: 4rem; }

.md-typeset table:not([class]) td:first-child code { white-space: nowrap; }

.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card { border-radius: 0.4rem; }

/* Vertically centre inline icons used at the start of card titles.
   Material's default vertical-align sits the icon above the text baseline;
   `.middle` over-corrects below it. -0.225em lands the icon optically centred
   with bold text. */
.md-typeset .grid.cards .twemoji {
  vertical-align: -0.225em;
}

/* ─── Inspector mock widgets (Editor Attributes guide) ─────────────────── */
/* Visual approximations of the engine's Inspector field renderings. Used in
   docs/scripting/getting-started/editor-attributes.md to show what each
   attribute produces. Not a pixel-perfect copy of the editor. */

.md-typeset .inspector-mock {
  background: #1c1d22;
  border: 1px solid #2a2b30;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 0.75em 0 1.25em;
  font-family: var(--md-text-font);
  font-size: 0.85em;
  color: #c8c9cd;
  max-width: 480px;
}

.md-typeset .inspector-mock .field {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}

.md-typeset .inspector-mock .label {
  flex: 0 0 140px;
  color: #969799;
}

.md-typeset .inspector-mock .control {
  flex: 1 1 auto;
  min-width: 0;
}

.md-typeset .inspector-mock .number {
  background: #2a2b32;
  padding: 5px 10px;
  border-radius: 3px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.md-typeset .inspector-mock .slider {
  position: relative;
  height: 22px;
  background: #2a2b32;
  border-radius: 3px;
  overflow: hidden;
}
.md-typeset .inspector-mock .slider-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, #5a5c66, #44464f);
}
.md-typeset .inspector-mock .slider-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
  color: #d7d8db;
}

.md-typeset .inspector-mock .toggle {
  display: block;
  width: 100%;
  padding: 7px 0;
  text-align: center;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.85em;
}
.md-typeset .inspector-mock .toggle.on  { background: #f5503d; color: #fff; }
.md-typeset .inspector-mock .toggle.off { background: #2a2b32; color: #969799; }

.md-typeset .inspector-mock .button {
  display: inline-block;
  padding: 6px 16px;
  background: #f5503d;
  color: #fff;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.85em;
}

.md-typeset .inspector-mock .dropdown {
  background: #2a2b32;
  padding: 5px 12px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.md-typeset .inspector-mock .dropdown::after { content: "▾"; color: #969799; }

.md-typeset .inspector-mock .color {
  display: flex;
  align-items: center;
  gap: 10px;
}
.md-typeset .inspector-mock .color-swatch {
  width: 32px;
  height: 22px;
  border: 1px solid #44464f;
  border-radius: 2px;
  flex: 0 0 auto;
}
.md-typeset .inspector-mock .color-rgb {
  font-variant-numeric: tabular-nums;
  color: #969799;
  font-size: 0.85em;
}

.md-typeset .inspector-mock .multiline {
  background: #2a2b32;
  padding: 6px 10px;
  border-radius: 3px;
  min-height: 64px;
  color: #969799;
  font-style: italic;
}

.md-typeset .inspector-mock .group {
  background: #25262c;
  padding: 8px 12px;
  border-radius: 3px;
  font-weight: 600;
  border: 1px solid #2a2b30;
  margin: 0 -4px 6px;
}
.md-typeset .inspector-mock .group::before { content: "▾ "; color: #969799; }

.md-typeset .inspector-mock .header-text {
  font-size: 0.78em;
  color: #969799;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 6px 0 2px;
}

.md-typeset .inspector-mock .divider {
  height: 1px;
  background: #2a2b30;
  margin: 8px 0;
}

.md-typeset .inspector-mock .units {
  color: #74757a;
  margin-left: 4px;
  font-size: 0.85em;
  font-weight: normal;
}

.md-typeset .inspector-mock-tooltip {
  background: #0f1014;
  color: #d7d8db;
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 0.85em;
  border: 1px solid #2a2b30;
  max-width: 280px;
  margin-top: 6px;
  display: inline-block;
  font-family: var(--md-text-font);
}
.md-typeset .inspector-mock-tooltip::before {
  content: "💡  ";
  margin-right: 2px;
}

.md-typeset .inspector-mock .field.disabled { opacity: 0.45; }

.md-typeset .inspector-mock-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0.75em 0 1.25em;
}
.md-typeset .inspector-mock-pair .inspector-mock { margin: 0; max-width: none; }
.md-typeset .inspector-mock-state {
  font-size: 0.72em;
  color: #969799;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  font-weight: 600;
}