/* Spectio docs theme. Values come from design/tokens/spectio-tokens.css (v0.2).
   All landing-page styles live here: index.md carries no inline CSS (documentation-system.md §2). */

:root {
  --sp-indigo-500: #5A4FCF; --sp-violet-50: #F6F2FE; --sp-violet-500: #8B5CF6; --sp-violet-600: #7750D4;
  --sp-violet-700: #6344B2; --sp-coral-500: #EC5F87; --sp-amber-500: #F9A947;
  --sp-ink-0: #F7F7FB; --sp-ink-50: #EEEFF5; --sp-ink-100: #DFE1EA; --sp-ink-400: #6E7287;
  --sp-ink-500: #4D5065; --sp-ink-600: #33364A; --sp-ink-900: #0F1020;
  --sp-ok: #1F9D63; --sp-run: #3B82F6; --sp-wait: #D9890B; --sp-bad: #DC3B3B;
}

/* Material colour roles */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--sp-violet-600);
  --md-primary-fg-color--light: var(--sp-violet-500);
  --md-primary-fg-color--dark: var(--sp-violet-700);
  --md-primary-bg-color: #FFFFFF;
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--sp-coral-500);
  --md-accent-fg-color--transparent: rgba(236, 95, 135, .1);
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--sp-violet-700);
  --sp-surface: #FFFFFF; --sp-surface-subtle: var(--sp-ink-0); --sp-line: var(--sp-ink-100);
  --sp-text: var(--sp-ink-900); --sp-text-2: var(--sp-ink-600); --sp-text-3: var(--sp-ink-500);
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #11121F;
  --md-code-bg-color: #171A2E;
  --md-typeset-a-color: #BEA4FA;
  --sp-surface: #171A2E; --sp-surface-subtle: #1B1E33; --sp-line: #2A2D45;
  --sp-text: #F1F2F8; --sp-text-2: #C4C7D4; --sp-text-3: #9A9EB0;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3, .sp-hero__name, .sp-feature__num { font-family: "Outfit", "Inter", sans-serif; }
.md-header__button.md-logo img { height: 1rem; width: auto; }

/* Status icons used by hooks/progress.py */
.sp-ok { color: var(--sp-ok); } .sp-run { color: var(--sp-run); } .sp-wait { color: var(--sp-wait); }
.sp-bad { color: var(--sp-bad); } .sp-muted { color: var(--sp-ink-400); }

/* ---------- Landing page ---------- */
.md-typeset .sp-section-title { margin: 3.2rem 0 1.2rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.md-typeset .sp-section-title .headerlink { display: none; }

.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.4rem; align-items: center; margin: 1.2rem 0 2rem; }
.sp-hero__brand { display: flex; align-items: flex-end; gap: .9rem; margin-bottom: 1.2rem; }
.md-typeset .sp-hero__emblem { width: 5.6rem; height: auto; margin-bottom: -.25rem; }
.sp-hero__name { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--sp-text); }
.md-typeset .sp-hero__tagline { font-size: 1.15rem; line-height: 1.55; font-weight: 600; color: var(--sp-text); margin: 0 0 1rem; }
.md-typeset .sp-hero__sub { font-size: .8rem; line-height: 1.6; color: var(--sp-text-2); margin: 0 0 1.4rem; }
.md-typeset .sp-hero .md-button { margin: 0 .5rem .5rem 0; border-radius: .4rem; }
.md-typeset .sp-hero__media { margin: 0; }
.md-typeset .sp-hero__media video { width: 100%; height: auto; display: block; border-radius: .6rem; border: 1px solid var(--sp-line); box-shadow: 0 12px 32px rgba(15, 16, 32, .12); }
.md-typeset .sp-hero__media img { border-radius: .6rem; border: 1px solid var(--sp-line); box-shadow: 0 12px 32px rgba(15, 16, 32, .12); }
.md-typeset .sp-hero__media figcaption { font-size: .65rem; color: var(--sp-text-3); margin-top: .5rem; }

.md-typeset .sp-lead { font-size: .95rem; line-height: 1.7; color: var(--sp-text-2); border-left: 3px solid var(--sp-coral-500); padding: .2rem 0 .2rem 1.1rem; max-width: 52rem; }

.sp-eco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.sp-eco__card { border: 1px solid var(--sp-line); border-radius: .5rem; padding: .8rem 1rem; background: var(--sp-surface-subtle); font-size: .8rem; }
.sp-eco__card span { color: var(--sp-text-3); font-size: .72rem; }
.sp-eco__card--later { border-style: dashed; background: transparent; }

.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.md-typeset a.sp-card { display: block; border: 1px solid var(--sp-line); border-radius: .6rem; padding: 1rem 1.1rem; color: var(--sp-text); background: var(--sp-surface); font-size: .82rem; transition: border-color .15s, transform .15s; }
.md-typeset a.sp-card:hover { border-color: var(--sp-violet-500); transform: translateY(-2px); }
.md-typeset a.sp-card span:not(.sp-card__icon):not(.twemoji) { display: block; color: var(--sp-text-3); font-size: .74rem; margin-top: .25rem; line-height: 1.5; }
.md-typeset .sp-card__icon, .md-typeset a.sp-card .twemoji { color: var(--sp-violet-600); margin-right: .35rem; }
.md-typeset .sp-card__icon svg, .md-typeset a.sp-card .twemoji svg { width: 1.15rem; height: 1.15rem; }

.sp-features { display: grid; gap: .2rem; }
.sp-feature { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--sp-line); font-size: .85rem; line-height: 1.65; }
.sp-feature__num { font-size: 1.9rem; font-weight: 700; color: var(--sp-violet-500); letter-spacing: -.02em; }

.sp-waves { display: grid; gap: .45rem; }
.md-typeset a.sp-wave { display: grid; grid-template-columns: 2.6rem 9rem 3rem minmax(0, 1fr); gap: .8rem; align-items: center; color: var(--sp-text); font-size: .76rem; padding: .35rem .2rem; border-radius: .3rem; }
.md-typeset a.sp-wave:hover { background: var(--sp-surface-subtle); }
.sp-wave__id { font-weight: 600; font-family: "JetBrains Mono", monospace; }
.sp-wave__bar { height: .45rem; border-radius: 1rem; background: var(--sp-ink-50); overflow: hidden; }
[data-md-color-scheme="slate"] .sp-wave__bar { background: #2A2D45; }
.sp-wave__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sp-indigo-500), var(--sp-violet-500), var(--sp-coral-500), var(--sp-amber-500)); }
.sp-wave__count { color: var(--sp-text-3); font-variant-numeric: tabular-nums; }
.sp-wave__title { color: var(--sp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media screen and (max-width: 60em) {
  .sp-hero { grid-template-columns: minmax(0, 1fr); }
  .sp-cards, .sp-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 38em) {
  .sp-cards, .sp-eco { grid-template-columns: minmax(0, 1fr); }
  .sp-hero__name { font-size: 2.3rem; }
  .md-typeset a.sp-wave { grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem; }
  .sp-wave__title { display: none; }
}

/* md_in_html wraps the inline card links in one <p>: let the links be the grid items */
.sp-cards > p { display: contents; }
/* the landing page carries its own title in the hero */
.md-typeset h1:has(+ .sp-hero), .md-typeset h1:has(+ .sp-hero2) { display: none; }
.md-typeset .asciinema-cast { max-width: 54rem; margin: 1.2rem auto; }

.md-typeset .sp-note { font-size: .7rem; color: var(--sp-text-3); margin-top: -.4rem; }
/* outline buttons in dark mode: violet 300 on the dark page passes AA */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) { color: #BEA4FA; border-color: #BEA4FA; }
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover { color: #11121F; background: #BEA4FA; }
/* footer */
.sp-footer { padding-left: .8rem; padding-right: .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: .9rem 0; font-size: .64rem; color: var(--md-footer-fg-color--light); }
.sp-footer a { color: var(--md-footer-fg-color); }

/* ---------- Landing page v2 (depictio-docs layout: centred hero, logo cards, illustrated steps) ---------- */
.sp-hero2 { text-align: center; max-width: 46rem; margin: 2.4rem auto 1.6rem; }
.sp-hero2__brand { display: inline-flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.4rem; }
.md-typeset .sp-hero2__emblem { width: 6.4rem; height: auto; margin-bottom: -.3rem; }
.sp-hero2__name { font-family: "Outfit", "Inter", sans-serif; font-size: 3.6rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--sp-text); }
.md-typeset .sp-hero2__tagline { font-family: "Outfit", "Inter", sans-serif; font-size: 1.55rem; line-height: 1.3; font-weight: 600; color: var(--sp-text); margin: 0 0 .8rem; }
.md-typeset .sp-hero2__sub { font-size: .9rem; color: var(--sp-text-2); margin: 0 0 1.4rem; }
.md-typeset .sp-hero2__actions .md-button { margin: 0 .3rem .5rem; border-radius: .4rem; }
.md-typeset .sp-badge { display: inline-block; font-size: .68rem; color: var(--sp-text-3); border: 1px solid var(--sp-line); border-radius: 1rem; padding: .15rem .7rem; margin-top: .4rem; }
.md-typeset .sp-hero2__media { max-width: 64rem; margin: 0 auto 1rem; }
.md-typeset .sp-hero2__media video { width: 100%; display: block; border-radius: .7rem; border: 1px solid var(--sp-line); box-shadow: 0 16px 40px rgba(15, 16, 32, .14); }
.md-typeset .sp-hero2__media figcaption { font-size: .68rem; color: var(--sp-text-3); }
.md-typeset .sp-h2 { text-align: center; font-size: 1.5rem; font-weight: 600; margin: 3.4rem 0 1.4rem; }
.md-typeset .sp-h2 .headerlink { display: none; }

.md-typeset .sp-k8s { color: #326CE5; }
/* "Works with": one card per role (engines, catalogs, compute, results), never mixed */
.sp-works { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; max-width: 62rem; margin: 0 auto; }
@media (max-width: 60em) { .sp-works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30em) { .sp-works { grid-template-columns: 1fr; } }
.md-typeset .sp-works__group { display: flex; flex-direction: column; gap: .45rem; padding: .9rem .9rem .8rem; border: 1px solid var(--sp-line); border-radius: .6rem; background: var(--sp-surface); }
.md-typeset .sp-works__label { margin: 0 0 .2rem; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-text-3); }
.md-typeset a.sp-work { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: .4rem; color: var(--sp-text); font-size: .74rem; font-weight: 600; line-height: 1.25; }
.md-typeset a.sp-work:hover { background: var(--sp-line); }
.md-typeset .sp-work img { width: 1.6rem; height: 1.6rem; object-fit: contain; flex-shrink: 0; }
.md-typeset .sp-work__icon { line-height: 0; color: var(--sp-ink-500); flex-shrink: 0; }
.md-typeset .sp-work__icon.sp-k8s { color: #326CE5; }
.md-typeset .sp-work__icon .twemoji, .md-typeset .sp-work__icon svg { width: 1.6rem; height: 1.6rem; }
.md-typeset .sp-works__later { margin: auto 0 0; padding-top: .2rem; font-size: .64rem; color: var(--sp-text-3); }
.sp-works__group > p:not([class]) { display: contents; }
.md-typeset .sp-fine { text-align: center; font-size: .62rem; color: var(--sp-text-3); margin-top: .6rem; }

.sp-steps { display: grid; gap: 2.6rem; max-width: 62rem; margin: 0 auto; }
.sp-step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; align-items: center; }
.sp-step--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.sp-step--flip .sp-step__text { order: 2; }
.md-typeset .sp-step img { width: 100%; border-radius: .6rem; border: 1px solid var(--sp-line); box-shadow: 0 10px 28px rgba(15, 16, 32, .10); }
.md-typeset .sp-step h3 { margin: .4rem 0 .4rem; font-size: 1.2rem; }
.md-typeset .sp-step p { color: var(--sp-text-2); font-size: .85rem; line-height: 1.65; }
.sp-step__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 700; font-family: "Outfit", sans-serif; background: linear-gradient(135deg, var(--sp-indigo-500), var(--sp-violet-500)); }
.sp-step:nth-child(2) .sp-step__num { background: linear-gradient(135deg, var(--sp-violet-500), var(--sp-coral-500)); }
.sp-step:nth-child(3) .sp-step__num { background: linear-gradient(135deg, var(--sp-coral-500), var(--sp-amber-500)); }
.sp-step:nth-child(4) .sp-step__num { background: linear-gradient(135deg, var(--sp-amber-500), #2A9D8F); }

.sp-cards2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; max-width: 56rem; margin: 0 auto; }
.md-typeset a.sp-card2 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.2rem 1rem; border: 1px solid var(--sp-line); border-radius: .6rem; background: var(--sp-surface); color: var(--sp-text); font-size: .85rem; box-shadow: 0 1px 2px rgba(15, 16, 32, .05); transition: transform .15s, border-color .15s; }
.md-typeset a.sp-card2:hover { transform: translateY(-2px); border-color: var(--sp-violet-500); }
.md-typeset a.sp-card2 > span:last-child { color: var(--sp-text-3); font-size: .74rem; }
.sp-ic { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .5rem; color: #fff; margin-bottom: .3rem; }
.md-typeset .sp-ic svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.sp-ic--violet { background: #8B5CF6; } .sp-ic--amber { background: #D9890B; } .sp-ic--sky { background: #3B8FBF; }
.sp-ic--indigo { background: #5A4FCF; } .sp-ic--coral { background: #EC5F87; } .sp-ic--green { background: #2A9D8F; }
.md-typeset .sp-c-violet { color: #8B5CF6; } .md-typeset .sp-c-amber { color: #D9890B; } .md-typeset .sp-c-sky { color: #3B8FBF; }
.md-typeset .sp-c-indigo { color: #5A4FCF; } .md-typeset .sp-c-coral { color: #EC5F87; } .md-typeset .sp-c-green { color: #2A9D8F; }
.md-typeset .sp-more { text-align: center; margin-top: 2rem; }

.sp-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.md-typeset .sp-pair img, .md-typeset .sp-phone { border-radius: .5rem; border: 1px solid var(--sp-line); }

/* Roadmap timeline */
.sp-timeline { position: relative; margin: 1.6rem 0 2rem; padding-left: 1.6rem; border-left: 2px solid var(--sp-line); }
.sp-tl { position: relative; margin: 0 0 1.3rem; }
.sp-tl__dot { position: absolute; left: -2.05rem; top: .25rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--sp-surface); border: 2px solid var(--sp-ink-400); }
.sp-tl--now .sp-tl__dot { background: var(--sp-violet-500); border-color: var(--sp-violet-500); box-shadow: 0 0 0 4px rgba(139, 92, 246, .2); }
.sp-tl b { font-size: .9rem; } .sp-tl__when { margin-left: .6rem; font-size: .7rem; color: var(--sp-text-3); }
.md-typeset .sp-tl p { margin: .2rem 0 0; color: var(--sp-text-2); font-size: .8rem; }

@media screen and (max-width: 50em) {
  .sp-step, .sp-step--flip { grid-template-columns: minmax(0, 1fr); }
  .sp-step--flip .sp-step__text { order: 0; }
  .sp-cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-hero2__name { font-size: 2.6rem; }
  .md-typeset .sp-hero2__tagline { font-size: 1.2rem; }
  .sp-pair { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 30em) { .sp-cards2 { grid-template-columns: minmax(0, 1fr); } }

.sp-optional { display: flex; gap: 1rem; align-items: flex-start; max-width: 52rem; margin: 2.6rem auto 0; padding: 1rem 1.2rem; border: 1px dashed var(--sp-line); border-radius: .6rem; background: var(--sp-surface-subtle); font-size: .82rem; line-height: 1.6; }
.sp-optional .sp-ic { flex: none; margin: 0; }

.sp-cards2 > p { display: contents; }
/* every step screenshot has the same frame, whatever side it sits on */
.md-typeset .sp-step img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: top left; }