/* IndieBI brand tokens */
:root {
  --indiebi-lavender: #AEABFF;
  --indiebi-orange: #FF7238;
  --indiebi-dark: #232533;
  --indiebi-bg: #171926;
  --indiebi-card: #303240;
  --indiebi-border: #525464;
}

/* Dark theme overrides (slate) */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--indiebi-lavender);
  --md-primary-fg-color--light: #c8c6ff;
  --md-primary-fg-color--dark: #8a87e0;
  --md-primary-bg-color: var(--indiebi-dark);
  --md-accent-fg-color: var(--indiebi-orange);
  --md-default-bg-color: var(--indiebi-dark);
  --md-default-bg-color--light: #2a2c3d;
  --md-default-bg-color--lighter: #303240;
  --md-default-bg-color--lightest: #3D3F4E;
  --md-default-fg-color: rgba(255, 255, 255, 0.87);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.54);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.32);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.12);
  --md-code-bg-color: #1e2030;
  --md-code-fg-color: rgba(255, 255, 255, 0.82);
  --md-typeset-a-color: var(--indiebi-lavender);
}

/* Light theme overrides (default) */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #6B68D8;
  --md-primary-fg-color--light: var(--indiebi-lavender);
  --md-primary-fg-color--dark: #5550b8;
  --md-accent-fg-color: var(--indiebi-orange);
  --md-typeset-a-color: #6B68D8;
}

/* Headings: Mulish display font (matches IndieBI dashboard) */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Header bar */
.md-header {
  background-color: #171926;
  border-bottom: 1px solid #303240;
  color: rgba(255, 255, 255, 0.87);
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #171926;
  color: rgba(255, 255, 255, 0.87);
}

.md-header__title,
.md-header__topic {
  color: rgba(255, 255, 255, 0.87);
}

.md-header__button {
  color: rgba(255, 255, 255, 0.7);
}

/* Sidebar */
[data-md-color-scheme="slate"] .md-nav {
  --md-nav-bg-color: var(--indiebi-dark);
}

/* Logo sizing */
.md-header__button.md-logo img {
  height: 24px;
}

/* Limited-preview announcement bar (overrides/main.html).
   Orange is the IndieBI callout accent; dark ink keeps it readable in both
   themes without a scheme-specific override. */
.md-banner {
  background-color: var(--indiebi-orange);
  color: var(--indiebi-dark);
}

.md-banner .preview-banner {
  display: block;
  max-width: 61rem;
  margin: 0 auto;
  padding: 0.1rem 0.8rem;
  font-size: 0.68rem;
  line-height: 1.5;
}

.md-banner .preview-banner a {
  color: var(--indiebi-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

.md-banner .preview-banner a:hover {
  opacity: 0.7;
}

/* UI control illustration (the merged Claude desktop controls figure in the
   onboarding guide). It carries its own light surface, so it reads the same in
   both themes. Never upscaled past its natural width. */
.md-typeset img.ui-figure {
  display: block;
  width: 100%;
  max-width: 655px;
  height: auto;
  margin: 0.4rem 0 0.8rem;
}

/* Dashboard screenshot: dark image, so give it a frame that works on both
   schemes and the brand corner radius. */
.md-typeset img.dashboard-shot {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--indiebi-border);
}

[data-md-color-scheme="default"] .md-typeset img.dashboard-shot {
  border-color: rgba(0, 0, 0, 0.12);
}

/* ---- Home page: brochure-derived treatments ------------------------------ */

/* Orange uppercase kicker above the page title, as on the DDA brochure cover. */
.md-typeset p.kicker {
  margin-bottom: 0.2rem;
  color: var(--indiebi-orange);
  font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.md-typeset p.kicker + h1 {
  margin-top: 0;
}

/* Brochure hero illustration. The art is dark-native: the grid and the glow
   around the mark are painted into it, so it cannot be flipped to a light
   background without leaving a halo. In the light scheme it is lifted onto its
   own card instead, using the design system's single soft drop shadow, so it
   reads as a framed illustration rather than a black band. */
.md-typeset img.figure-dark {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 1.2rem auto 1.6rem;
  border-radius: 12px;
  border: 1px solid var(--indiebi-border);
}

[data-md-color-scheme="default"] .md-typeset img.figure-dark {
  max-width: 520px;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px rgba(35, 37, 51, 0.16);
}

/* Code copy button: an obvious affordance instead of the theme's ghost icon.
   The icon itself is a masked ::after that takes currentColor. */
.md-typeset .md-code__nav {
  top: 0.4rem;
  right: 0.4rem;
  padding: 0;
  background-color: transparent;
}

.md-typeset :hover > .md-code__nav {
  background-color: transparent;
}

.md-typeset .md-code__button {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
  background-color: var(--indiebi-lavender);
  color: var(--indiebi-dark);
}

.md-typeset .md-code__button:hover,
.md-typeset .md-code__button.focus-visible {
  background-color: #c8c6ff;
  color: var(--indiebi-dark);
}

.md-typeset .md-code__button--active {
  color: var(--indiebi-dark) !important;
}

/* Keep code text clear of the floating copy button. */
.md-typeset pre > code {
  padding-right: 2.4rem;
}

/* The paste prompt: it has to be read and trusted, so it wraps instead of
   scrolling sideways. On wide screens the column fits the authored line
   length, so the button clearance can shrink back to the theme default. */
.md-typeset .prompt pre > code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

@media screen and (min-width: 60em) {
  .md-typeset .prompt pre > code {
    padding-right: 1.2em;
  }
}

/* Code block titles: raise the bar off the code background. */
[data-md-color-scheme="slate"] .md-typeset .highlight span.filename {
  background-color: var(--indiebi-card);
}

/* Brand-tinted admonitions: lavender for notes, orange for the info callout.
   Covers both block (!!!) and collapsible (???) forms. */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--indiebi-lavender);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(174, 171, 255, 0.1);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--indiebi-lavender);
}

[data-md-color-scheme="default"] .md-typeset .admonition.note,
[data-md-color-scheme="default"] .md-typeset details.note {
  border-color: #6B68D8;
}

[data-md-color-scheme="default"] .md-typeset .note > .admonition-title::before,
[data-md-color-scheme="default"] .md-typeset .note > summary::before {
  background-color: #6B68D8;
}

/* Orange carries "pay attention" for both the info callouts and warnings,
   matching the preview banner. Lavender above stays neutral. */
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--indiebi-orange);
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(255, 114, 56, 0.1);
}

.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--indiebi-orange);
}

/* "talk" is a custom admonition for asking the reader to get in touch. Same
   orange treatment as info above, so it sits in the existing set; only the icon
   differs, a Lucide-style message bubble rather than the generic info circle. */
:root {
  --md-admonition-icon--talk: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17a2 2 0 0 1-2 2H6l-4 4V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/><path d="M8 9h8"/><path d="M8 13h5"/></svg>');
}

.md-typeset .admonition.talk,
.md-typeset details.talk {
  border-color: var(--indiebi-orange);
}

.md-typeset .talk > .admonition-title,
.md-typeset .talk > summary {
  background-color: rgba(255, 114, 56, 0.1);
}

.md-typeset .talk > .admonition-title::before,
.md-typeset .talk > summary::before {
  background-color: var(--indiebi-orange);
  -webkit-mask-image: var(--md-admonition-icon--talk);
  mask-image: var(--md-admonition-icon--talk);
}

/* Sidebar: let the navigation take all the height it needs and scroll
   with the page, instead of scrolling inside its own box. */
@media screen and (min-width: 76.25em) {
  .md-sidebar {
    height: auto;
  }
  .md-sidebar__scrollwrap {
    overflow: visible;
    height: auto !important;
  }
}