/* ============================================================
   Starform docs theme — mirrors the Starform frontend design system
   (frontend-starform/frontend/app/globals.css + lib/tokens/design-tokens.json)
   Fonts: DM Sans (body) + DM Mono (code)
   Brand: #3434DC primary · #5B5EE8 accent
   Dark palette = frontend tokens · Light palette = derived (frontend is dark-only)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --md-text-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --md-code-font: "DM Mono", ui-monospace, Menlo, monospace;

  /* Starform brand */
  --sf-brand: #3434DC;
  --sf-brand-light: #5B5EE8;
  --sf-brand-dark: #2A2AB0;
  --sf-success: #0EAB5D;
  --sf-danger: #EC3856;
  --sf-warning: #ED8C2B;

  --sf-radius-sm: 6px;
  --sf-radius-md: 8px;
  --sf-radius-lg: 12px;
  --sf-radius-xl: 16px;
}

/* ---------- Dark scheme (Starform frontend tokens, default) ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 245;
  --md-primary-fg-color: #3434DC;
  --md-primary-fg-color--light: #5B5EE8;
  --md-primary-fg-color--dark: #2A2AB0;
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: #5B5EE8;

  --md-default-bg-color: #05050F;        /* bg */
  --md-default-fg-color: #FFFFFF;        /* text */
  --md-default-fg-color--light: #A6A6A6; /* muted */
  --md-default-fg-color--lighter: #808080;
  --md-default-fg-color--lightest: rgba(255,255,255,0.12);

  --md-typeset-a-color: #5B5EE8;
  --md-code-bg-color: #17151E;           /* elevated / card */
  --md-code-fg-color: #C9C9FF;

  --md-footer-bg-color: #0B0B16;
  --md-footer-bg-color--dark: #05050F;

  --sf-surface: #17151E;                 /* card */
  --sf-surface-hover: #1F1C28;           /* card-hover */
  --sf-surface-2: #1A1A23;
  --sf-surface-3: #23232F;
  --sf-border: #2A2733;
  --sf-border-subtle: #221F2A;
  --sf-shadow-card: inset 0 1px 0 rgba(255,255,255,0.04);
  --sf-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 40px -10px rgba(52,52,220,0.40);
  --sf-overlay-bg: rgba(5,5,15,0.93);
}
[data-md-color-scheme="slate"] { --md-typeset-kbd-color: #1b1530; }

/* ---------- Light scheme (derived — frontend has no light mode) ---------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #3434DC;
  --md-primary-fg-color--light: #5B5EE8;
  --md-primary-fg-color--dark: #2A2AB0;
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: #2A2AB0;

  --md-default-bg-color: #F6F7FB;        /* derived: near-white, faint cool tint */
  --md-default-fg-color: #0E0E1A;        /* derived: near-black ink */
  --md-default-fg-color--light: rgba(14,14,26,0.62);
  --md-default-fg-color--lighter: rgba(14,14,26,0.45);
  --md-default-fg-color--lightest: rgba(14,14,26,0.12);

  --md-typeset-a-color: #2E2EC4;         /* brand darkened for AA on white */
  --md-code-bg-color: #ECEDF5;
  --md-code-fg-color: #1A1A23;

  --sf-surface: #FFFFFF;                  /* card → white */
  --sf-surface-hover: #FFFFFF;
  --sf-surface-2: #F0F1F7;
  --sf-surface-3: #E7E9F2;
  --sf-border: #E2E4EE;
  --sf-border-subtle: #EDEEF5;
  --sf-shadow-card: 0 1px 2px rgba(5,5,15,0.04), 0 1px 3px rgba(5,5,15,0.05);
  --sf-shadow-hover: 0 2px 4px rgba(5,5,15,0.05), 0 8px 24px -4px rgba(5,5,15,0.10);
  --sf-overlay-bg: rgba(246,247,251,0.96);
}

/* ---------- Header / tabs use the canvas, not a solid brand bar ---------- */
.md-header,
.md-tabs {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.md-header { box-shadow: 0 0 0 1px var(--sf-border); }
.md-header__title { font-weight: 600; letter-spacing: -0.01em; }
.md-tabs__link { color: var(--md-default-fg-color); opacity: .68; }
.md-tabs__link:hover,
.md-tabs__link--active { color: var(--sf-brand-light); opacity: 1; }
[data-md-color-scheme="default"] .md-tabs__link:hover,
[data-md-color-scheme="default"] .md-tabs__link--active { color: var(--sf-brand); }

.md-search__form { border-radius: 999px; }

/* ---------- Headings ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 { font-weight: 600; letter-spacing: -0.01em; }
.md-typeset h2 {
  border-bottom: 1px solid var(--sf-border);
  padding-bottom: .3em;
}

/* ---------- Code & tables: rounded, product-like ---------- */
.md-typeset pre > code,
.md-typeset .highlight > pre,
.md-typeset .highlighttable { border-radius: var(--sf-radius-md); }
.md-typeset table:not([class]) {
  border-radius: var(--sf-radius-md);
  overflow: hidden;
  border: 1px solid var(--sf-border);
}
.md-typeset table:not([class]) th {
  font-family: var(--md-code-font);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ============================================================
   Custom admonitions — the PRD status tags + the SRE four-beat rail
   Pattern: alias an icon, then set border + title-bg + masked icon color.
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--sf-radius-md);
  border-left-width: 3px;
  font-size: .76rem;
}

:root {
  --md-admonition-icon--mvp:               var(--md-admonition-icon--success);
  --md-admonition-icon--post-mvp:          var(--md-admonition-icon--example);
  --md-admonition-icon--pre-launch:        var(--md-admonition-icon--danger);
  --md-admonition-icon--out-of-scope:      var(--md-admonition-icon--failure);
  --md-admonition-icon--decision-pending:  var(--md-admonition-icon--question);
  --md-admonition-icon--beat-plain:        var(--md-admonition-icon--quote);
  --md-admonition-icon--beat-build:        var(--md-admonition-icon--note);
  --md-admonition-icon--beat-gotcha:       var(--md-admonition-icon--warning);
  --md-admonition-icon--beat-ref:          var(--md-admonition-icon--abstract);
}

/* [MVP] → green */
.md-typeset .admonition.mvp, .md-typeset details.mvp { border-color: var(--sf-success); }
.md-typeset .mvp > .admonition-title, .md-typeset .mvp > summary { background-color: rgba(14,171,93,0.12); }
.md-typeset .mvp > .admonition-title::before, .md-typeset .mvp > summary::before {
  background-color: var(--sf-success);
  -webkit-mask-image: var(--md-admonition-icon--mvp); mask-image: var(--md-admonition-icon--mvp);
}
/* [Post-MVP] → accent */
.md-typeset .admonition.post-mvp, .md-typeset details.post-mvp { border-color: var(--sf-brand-light); }
.md-typeset .post-mvp > .admonition-title, .md-typeset .post-mvp > summary { background-color: rgba(91,94,232,0.12); }
.md-typeset .post-mvp > .admonition-title::before, .md-typeset .post-mvp > summary::before {
  background-color: var(--sf-brand-light);
  -webkit-mask-image: var(--md-admonition-icon--post-mvp); mask-image: var(--md-admonition-icon--post-mvp);
}
/* pre-launch-blocking → red */
.md-typeset .admonition.pre-launch, .md-typeset details.pre-launch { border-color: var(--sf-danger); }
.md-typeset .pre-launch > .admonition-title, .md-typeset .pre-launch > summary { background-color: rgba(236,56,86,0.12); }
.md-typeset .pre-launch > .admonition-title::before, .md-typeset .pre-launch > summary::before {
  background-color: var(--sf-danger);
  -webkit-mask-image: var(--md-admonition-icon--pre-launch); mask-image: var(--md-admonition-icon--pre-launch);
}
/* out of scope → muted gray */
.md-typeset .admonition.out-of-scope, .md-typeset details.out-of-scope { border-color: var(--md-default-fg-color--lighter); }
.md-typeset .out-of-scope > .admonition-title, .md-typeset .out-of-scope > summary { background-color: rgba(128,128,128,0.12); }
.md-typeset .out-of-scope > .admonition-title::before, .md-typeset .out-of-scope > summary::before {
  background-color: var(--md-default-fg-color--lighter);
  -webkit-mask-image: var(--md-admonition-icon--out-of-scope); mask-image: var(--md-admonition-icon--out-of-scope);
}
/* Decision pending → amber */
.md-typeset .admonition.decision-pending, .md-typeset details.decision-pending { border-color: var(--sf-warning); }
.md-typeset .decision-pending > .admonition-title, .md-typeset .decision-pending > summary { background-color: rgba(237,140,43,0.12); }
.md-typeset .decision-pending > .admonition-title::before, .md-typeset .decision-pending > summary::before {
  background-color: var(--sf-warning);
  -webkit-mask-image: var(--md-admonition-icon--decision-pending); mask-image: var(--md-admonition-icon--decision-pending);
}

/* ---------- SRE four-beat rail (plain / build / gotcha / ref) ---------- */
.md-typeset .admonition.beat-plain  { border-color: var(--md-default-fg-color--light); }
.md-typeset .beat-plain  > .admonition-title { background-color: rgba(128,128,128,0.08); }
.md-typeset .beat-plain  > .admonition-title::before { background-color: var(--md-default-fg-color--light);
  -webkit-mask-image: var(--md-admonition-icon--beat-plain); mask-image: var(--md-admonition-icon--beat-plain); }
.md-typeset .admonition.beat-build  { border-color: var(--sf-brand); }
.md-typeset .beat-build  > .admonition-title { background-color: rgba(52,52,220,0.12); }
.md-typeset .beat-build  > .admonition-title::before { background-color: var(--sf-brand-light);
  -webkit-mask-image: var(--md-admonition-icon--beat-build); mask-image: var(--md-admonition-icon--beat-build); }
.md-typeset .admonition.beat-gotcha { border-color: var(--sf-warning); }
.md-typeset .beat-gotcha > .admonition-title { background-color: rgba(237,140,43,0.12); }
.md-typeset .beat-gotcha > .admonition-title::before { background-color: var(--sf-warning);
  -webkit-mask-image: var(--md-admonition-icon--beat-gotcha); mask-image: var(--md-admonition-icon--beat-gotcha); }
.md-typeset .admonition.beat-ref    { border-color: var(--sf-surface-3); }
.md-typeset .beat-ref    > .admonition-title { background-color: rgba(128,128,128,0.06); }
.md-typeset .beat-ref    > .admonition-title::before { background-color: var(--md-default-fg-color--lighter);
  -webkit-mask-image: var(--md-admonition-icon--beat-ref); mask-image: var(--md-admonition-icon--beat-ref); }

/* ---------- Status pills (in / stub / out) — inline, for tables ---------- */
.md-typeset .pill {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-family: var(--md-code-font); font-size: .68rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.md-typeset .pill.in   { color: var(--sf-success); background: rgba(14,171,93,0.14);  border-color: rgba(14,171,93,0.30); }
.md-typeset .pill.stub { color: var(--sf-warning); background: rgba(237,140,43,0.14); border-color: rgba(237,140,43,0.30); }
.md-typeset .pill.out  { color: var(--md-default-fg-color--light); background: rgba(128,128,128,0.14); border-color: rgba(128,128,128,0.28); }

/* config-block caption (preserves the SRE guide's titled examples) */
.md-typeset .cap {
  display: block; font-family: var(--md-code-font); font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--md-default-fg-color--light);
  margin: 1.1em 0 -0.4em; padding-left: 2px;
}

/* ---------- Grid cards ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > .card {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  background: var(--sf-surface);
  box-shadow: var(--sf-shadow-card);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > .card:hover {
  border-color: var(--sf-brand-light);
  box-shadow: var(--sf-shadow-hover);
  transform: translateY(-2px);
}
.md-typeset .grid.cards .lg.middle { color: var(--sf-brand-light); }
/* whole card is the click target — stretch the card's link over the entire <li>
   (CSS-only "stretched link"; the visible "Open X" link stays as the affordance) */
.md-typeset .grid.cards > ul > li { position: relative; }
.md-typeset .grid.cards > ul > li > p:last-child > a::after { content: ""; position: absolute; inset: 0; }

/* ---------- Home: diagram + info box (left) · 3-col square cards (right) ---------- */
.md-typeset .home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "diagram cards" "desc cards"; grid-template-rows: auto auto; gap: 0.9rem 1.4rem; align-items: start; margin: 1.4em 0; }
.md-typeset .home-hero > .sf-svg-hero { grid-area: diagram; max-width: none; width: 100%; margin: 0; }
.md-typeset .home-hero > .hero-desc { grid-area: desc; }
.md-typeset .home-hero > .grid.cards { grid-area: cards; }
.md-typeset .hero-desc { border: 1px solid var(--sf-border); background: var(--sf-surface); border-radius: var(--sf-radius-md); padding: 0.85rem 1rem; font-size: 0.68rem; line-height: 1.5; }
.md-typeset .hero-desc > :first-child { margin-top: 0; }
.md-typeset .hero-desc > :last-child { margin-bottom: 0; }
.md-typeset .hero-legend-row { display: block; margin: 0.6rem 0; font-size: 0.64rem; color: var(--md-default-fg-color--light); }
/* right pane: small square cards, 3 per row (the <ul> is display:contents, so <li> are the grid items) */
.md-typeset .home-hero .grid.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; min-width: 0; }
.md-typeset .home-hero .grid.cards > ul > li { min-height: 8.5rem; padding: 0.6rem; margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.md-typeset .home-hero .grid.cards > ul > li > * { font-size: 0.66rem; line-height: 1.35; }
.md-typeset .home-hero .grid.cards > ul > li > :first-child { font-size: 0.8rem; margin: 0 0 0.15rem; }   /* icon + title */
.md-typeset .home-hero .grid.cards > ul > li > p:last-child { margin: auto 0 0; }   /* arrow pinned to the bottom */
.md-typeset .home-start { font-size: 0.75rem; color: var(--md-default-fg-color--light); margin-top: 1.6rem; }
@media screen and (max-width: 55em) {
  .md-typeset .home-hero { grid-template-columns: 1fr; grid-template-areas: "diagram" "desc" "cards"; }
  .md-typeset .home-hero .grid.cards { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

/* ---------- Mermaid diagrams ---------- */
.md-typeset .mermaid-diagram {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  padding: 1rem;
  margin: 1.2em 0;
  overflow-x: auto;
}
.md-typeset .mermaid-diagram:not([data-processed]) { color: transparent; font-size: 0; }
.md-typeset .mermaid-diagram[data-processed] { color: inherit; font-size: inherit; }
.md-typeset figure > .mermaid-diagram { margin-bottom: .4em; }
.md-typeset figure figcaption { font-size: .74rem; color: var(--md-default-fg-color--light); }

/* ---------- Buttons ---------- */
.md-typeset .md-button { border-radius: 999px; border-width: 1px; }
.md-typeset .md-button--primary {
  background: linear-gradient(180deg, var(--sf-brand-light), var(--sf-brand));
  border-color: var(--sf-brand);
  color: #fff;
}

/* ---------- Scrollbar ---------- */
[data-md-color-scheme="slate"] * { scrollbar-color: var(--md-default-fg-color--lightest) transparent; }

/* ---------- Diagram zoom overlay ---------- */
.md-typeset .mermaid-diagram svg { cursor: zoom-in; font-size: initial; }
/* Widen the content grid so inline diagrams, tables, and config blocks get more room
   (Material defaults to 61rem). Only takes effect above ~1150px; smaller screens unchanged. */
.md-grid { max-width: 72rem; }

.diagram-zoom-overlay { position: fixed; inset: 0; z-index: 2000; display: none; background: var(--sf-overlay-bg); cursor: grab; }
.diagram-zoom-overlay.open { display: block; }
.diagram-zoom-overlay.dragging { cursor: grabbing; }
.diagram-zoom-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transform-origin: center center; will-change: transform; }
/* sized element in the stage: a Mermaid <svg> directly, or a rebuilt <figure class="sf-svg"> */
.diagram-zoom-stage > svg,
.diagram-zoom-stage > .sf-svg { max-width: none !important; width: min(92vw, 1400px) !important; }
.diagram-zoom-stage > svg { height: auto !important; background: var(--sf-surface); border-radius: 12px; padding: 1rem; }
.diagram-zoom-stage > .sf-svg { margin: 0; overflow: visible; }       /* the figure carries the chrome */
.diagram-zoom-stage > .sf-svg > svg { width: 100% !important; height: auto !important; }
.diagram-zoom-close { position: fixed; top: 14px; right: 20px; font-size: 30px; line-height: 1; background: none; border: 0; color: var(--md-default-fg-color); cursor: pointer; }
.diagram-zoom-hint { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; color: var(--md-default-fg-color--light); font-size: 12px; font-family: var(--md-code-font); pointer-events: none; }

/* ============================================================
   Hand-built SVG hero diagrams (component map · VPC topology · attribution).
   Ported from the legacy guide + made theme-aware: the original SVG classes
   reference CSS vars defined per scheme below, so the diagrams flip light/dark.
   ============================================================ */
.md-typeset .sf-svg {
  /* container — matches the Mermaid diagram surface */
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  padding: 0.85rem 0.85rem 0.4rem;
  margin: 1.2em 0;
  width: 100%;              /* override Material's figure width:fit-content, which shrink-wraps the SVG tiny */
  box-sizing: border-box;
  overflow-x: auto;
  /* diagram palette — dark scheme (the originals) */
  --surface: #1A1A23; --store: #101019;
  --s16: rgba(255,255,255,0.16); --s12: rgba(255,255,255,0.12);
  --plane-bg: rgba(255,255,255,0.018);
  --tx: #FFFFFF; --tx2: #A6A6A6; --tx3: #808080;
  --brand: #3434DC; --accent: #9a9aff;
  --green: #0EAB5D; --red: #EC3856; --yellow: #ED8C2B;
  --sans: var(--md-text-font); --mono: var(--md-code-font);
}
[data-md-color-scheme="default"] .md-typeset .sf-svg {
  --surface: #F2F3F8; --store: #E5E8F2;
  --s16: rgba(14,14,26,0.18); --s12: rgba(14,14,26,0.12);
  --plane-bg: rgba(14,14,26,0.022);
  --tx: #16161E; --tx2: rgba(14,14,26,0.64); --tx3: rgba(14,14,26,0.48);
  --brand: #3434DC; --accent: #3434DC;
  --green: #0E9A54; --red: #D7324E; --yellow: #C9731F;
}
.md-typeset .sf-svg svg { width: 100%; height: auto; display: block; cursor: zoom-in; }
/* the home master topology fills the sidebar-less home page full-width — cap + center it */
.md-typeset .sf-svg.sf-svg-hero { max-width: 42rem; margin-left: auto; margin-right: auto; }
.md-typeset .sf-svg figcaption { font-family: var(--md-code-font); font-size: 0.7rem; color: var(--md-default-fg-color--light); margin-top: 0.9em; text-align: center; line-height: 1.55; }

/* SVG element classes (ported verbatim from the legacy guide, now var-driven) */
.sf-svg .box        { fill: var(--surface); stroke: var(--s16); stroke-width: 1; }
.sf-svg .box-brand  { fill: rgba(52,52,220,0.14); stroke: var(--brand); stroke-width: 1.3; }
.sf-svg .box-store  { fill: var(--store); stroke: var(--s16); stroke-width: 1; }
.sf-svg .box-red    { fill: rgba(236,56,86,0.10); stroke: var(--red); stroke-width: 1.2; }
.sf-svg .box-green  { fill: rgba(14,171,93,0.10); stroke: var(--green); stroke-width: 1.2; }
.sf-svg .plane      { fill: var(--plane-bg); stroke: var(--s12); stroke-width: 1; stroke-dasharray: 4 4; }
.sf-svg .plane-brand{ fill: rgba(52,52,220,0.05); stroke: rgba(52,52,220,0.35); stroke-width: 1; stroke-dasharray: 4 4; }
.sf-svg .t          { font-family: var(--mono); fill: var(--tx); font-size: 12.5px; font-weight: 500; }
.sf-svg .t-sm       { font-family: var(--sans); fill: var(--tx2); font-size: 11px; }
.sf-svg .t-mono     { font-family: var(--mono); fill: var(--accent); font-size: 10.5px; }
.sf-svg .t-lbl      { font-family: var(--mono); fill: var(--tx3); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.sf-svg .t-region   { font-family: var(--mono); fill: var(--tx3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.sf-svg .flow       { stroke: var(--tx3); stroke-width: 1.4; fill: none; marker-end: url(#ar); }
.sf-svg .flow-b     { stroke: var(--brand); stroke-width: 1.6; fill: none; marker-end: url(#arb); }
.sf-svg .flow-r     { stroke: var(--red); stroke-width: 1.5; fill: none; marker-end: url(#arr); }
.sf-svg .flow-d     { stroke: var(--tx3); stroke-width: 1.3; fill: none; stroke-dasharray: 5 4; marker-end: url(#ar); }
.sf-svg .flow-logs  { stroke: var(--yellow); stroke-width: 1.6; fill: none; marker-end: url(#arl); }

/* light-mode fixes for the few hardcoded light-on-dark inline fills (placed AFTER the
   class rules so they win by source order; attribute selectors override presentation attrs) */
.sf-svg [fill="#9a9aff"] { fill: var(--accent); }
.sf-svg [fill="#c9c9ff"] { fill: var(--accent); }
.sf-svg [fill="#34d27f"] { fill: var(--green); }
.sf-svg [fill="#0EAB5D"] { fill: var(--green); }
.sf-svg [fill="#ED8C2B"] { fill: var(--yellow); }
.sf-svg [fill="#808080"] { fill: var(--tx3); }