/* ============================================================
   viva-docs house style — layered on Material for MkDocs
   ============================================================ */

:root {
  --viva-teal: #0f766e;
  --viva-teal-bright: #14b8a6;
  --viva-amber: #ea580c;
  --viva-ink: #0f172a;
  --md-code-font: "JetBrains Mono", monospace;

  /* per-part accent tokens (defaults; overridden by .part-* wrappers) */
  --part: var(--viva-teal-bright);
  --part-foundations: #6366f1;
  --part-build: #14b8a6;
  --part-investigate: #f59e0b;
  --part-reference: #64748b;
}
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --part-foundations: #818cf8;
    --part-build: #2dd4bf;
    --part-investigate: #fbbf24;
    --part-reference: #94a3b8;
  }
}
[data-md-color-scheme="slate"] {
  --part-foundations: #818cf8;
  --part-build: #2dd4bf;
  --part-investigate: #fbbf24;
  --part-reference: #94a3b8;
}

/* Per-part accent binding — set --part on the wrapper/card */
.part-foundations { --part: var(--part-foundations); }
.part-build       { --part: var(--part-build); }
.part-investigate { --part: var(--part-investigate); }
.part-reference   { --part: var(--part-reference); }

/* ---------- Hero (landing page) ---------- */
.viva-hero {
  text-align: center;
  padding: 2.75rem 1rem 1.25rem;
}
.viva-hero h1 {
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1.08;
  margin: 0 0 .5rem;
  background: linear-gradient(90deg, var(--viva-teal-bright), var(--viva-amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.viva-hero .tagline {
  font-size: 1.3rem;
  font-weight: 500;
  opacity: .85;
  margin: 0 auto;
  max-width: 44rem;
}

/* ---------- Card grid ---------- */
.viva-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.viva-card {
  position: relative;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  background: var(--md-default-bg-color);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.viva-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--part);
  opacity: .9;
}
.viva-card:hover {
  border-color: var(--part);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -12px var(--part);
}
.viva-card h3 { margin-top: 0; font-size: 1.05rem; }
.viva-card h3 a { color: inherit; }
.viva-card .layer-num {
  display: inline-block;
  font-family: var(--md-code-font);
  font-size: .8rem;
  color: var(--part);
  font-weight: 700;
}

/* ---------- Part eyebrow / badge ---------- */
.part-eyebrow {
  display: inline-block;
  font-family: var(--md-code-font);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--part);
  border: 1px solid var(--part);
  border-radius: 999px;
  padding: .15rem .7rem;
  margin: 0 0 .3rem;
}

/* ---------- Clickable stack (home) ---------- */
.stacknav {
  margin: 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.stacknav-layer {
  display: block;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 5px solid var(--part);
  border-radius: 0 10px 10px 0;
  padding: .8rem 1.1rem;
  background: var(--md-code-bg-color);
  color: inherit !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.stacknav-layer:hover {
  transform: translateX(4px);
  box-shadow: -6px 0 18px -14px var(--part);
  background: var(--md-default-bg-color);
}
.stacknav-layer .sn-name { font-weight: 700; }
.stacknav-layer .sn-pkg {
  font-family: var(--md-code-font);
  color: var(--part);
  font-size: .82rem;
  margin-left: .4rem;
}
.stacknav-layer .sn-desc {
  display: block;
  font-size: .9rem;
  opacity: .82;
  margin-top: .15rem;
}

/* ---------- Figures ---------- */
.viva-figure {
  margin: 1.75rem 0;
  text-align: center;
}
.viva-figure img,
.viva-figure svg {
  max-width: 100%;
  height: auto;
  background: #ffffff;          /* keep diagrams legible in dark mode */
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1rem;
}
.viva-figure figcaption {
  font-size: .85rem;
  opacity: .75;
  margin-top: .6rem;
  padding: 0 1rem;
}

/* ---------- Concept map (inline SVG) ---------- */
.concept-map { margin: 1.5rem 0; text-align: center; }
.concept-map svg { max-width: 100%; height: auto; }
.concept-map .cnode rect {
  fill: #ffffff;
  stroke: var(--part);
  stroke-width: 2;
  transition: filter .15s ease;
}
.concept-map .cnode { transition: transform .15s ease; }
.concept-map a { cursor: pointer; }
.concept-map a:hover .cnode > rect { filter: brightness(0.97) drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.concept-map a:hover .cnode { transform: translateY(-2px); }
.concept-map .clabel {
  font-family: Inter, sans-serif;
  font-weight: 600;
  fill: #0f172a;
  pointer-events: none;
}
.concept-map .csub {
  font-family: var(--md-code-font);
  fill: #475569;
  pointer-events: none;
}
.concept-map .cedge { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
.concept-map .cedge-label {
  font-family: Inter, sans-serif;
  font-size: 11px;
  fill: var(--md-default-fg-color--light);
}

/* ---------- Legacy stack (used in the-stack.md) ---------- */
.viva-stack { margin: 1.5rem 0; }
.viva-stack .layer {
  border-left: 4px solid var(--viva-teal-bright);
  padding: .6rem 1rem;
  margin: .4rem 0;
  border-radius: 0 8px 8px 0;
  background: var(--md-code-bg-color);
}
.viva-stack .layer code { background: transparent; }

/* ---------- Pull quote ---------- */
.viva-pull {
  font-size: 1.2rem;
  font-weight: 500;
  border-left: 4px solid var(--viva-amber);
  padding: .5rem 0 .5rem 1rem;
  margin: 1.5rem 0;
  font-style: italic;
}

/* ---------- Status pills ---------- */
.pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 999px;
  vertical-align: middle;
}
.pill.pass { background: #dcfce7; color: #166534; }
.pill.fail { background: #fee2e2; color: #991b1b; }
.pill.draft, .pill.calib { background: #fef9c3; color: #854d0e; }
.pill.blocked, .pill.neutral { background: #e2e8f0; color: #334155; }
[data-md-color-scheme="slate"] .pill.pass { background: #14532d; color: #bbf7d0; }
[data-md-color-scheme="slate"] .pill.fail { background: #7f1d1d; color: #fecaca; }
[data-md-color-scheme="slate"] .pill.draft,
[data-md-color-scheme="slate"] .pill.calib { background: #713f12; color: #fef08a; }
[data-md-color-scheme="slate"] .pill.blocked,
[data-md-color-scheme="slate"] .pill.neutral { background: #334155; color: #e2e8f0; }

/* ---------- Module catalog ---------- */
.cat-controls { margin: 1.25rem 0 1rem; }
.cat-search {
  width: 100%;
  font-size: 1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 10px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.cat-search:focus {
  outline: none;
  border-color: var(--viva-teal-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--viva-teal-bright) 22%, transparent);
}
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .8rem 0 .4rem;
}
.cat-chip {
  font-family: var(--md-code-font);
  font-size: .74rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: transparent;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: all .15s ease;
}
.cat-chip:hover { border-color: var(--viva-teal-bright); color: var(--md-default-fg-color); }
.cat-chip.is-active {
  background: var(--viva-teal-bright);
  border-color: var(--viva-teal-bright);
  color: #06201d;
  font-weight: 700;
}
.cat-count { font-size: .8rem; opacity: .7; margin-top: .3rem; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.cat-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: var(--md-default-bg-color);
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover {
  border-color: var(--viva-teal-bright);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -14px var(--viva-teal-bright);
}
.cat-card[hidden] { display: none; }
.cat-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.cat-card-head h3 { margin: 0; font-size: 1.02rem; font-family: var(--md-code-font); }
.cat-repo { font-size: .74rem; white-space: nowrap; opacity: .7; }
.cat-desc { font-size: .88rem; opacity: .9; margin: .5rem 0 .7rem; flex: 1; }
.cat-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }
.cat-tag {
  font-family: var(--md-code-font);
  font-size: .68rem;
  padding: .08rem .45rem;
  border-radius: 999px;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
}
.cat-install {
  font-size: .74rem;
  background: var(--md-code-bg-color);
  padding: .35rem .55rem;
  border-radius: 7px;
  display: block;
  color: var(--md-default-fg-color--light);
}
.cat-empty { text-align: center; opacity: .7; padding: 2rem 0; }

/* ---------- Loom explorer embed ---------- */
.loom-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 1rem 0 .4rem;
}
.loom-toolbar label { font-weight: 600; font-size: .9rem; }
#loom-picker {
  font-size: .9rem;
  padding: .35rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lighter);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  max-width: 100%;
}
.loom-open { margin-left: auto; font-size: .82rem; white-space: nowrap; }
.loom-caption { font-size: .85rem; opacity: .75; margin: .1rem 0 .6rem; }
.loom-embed {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 30px -18px rgba(0,0,0,.4);
}
.loom-embed iframe {
  display: block;
  width: 100%;
  height: 76vh;
  min-height: 460px;
  border: 0;
}

/* ---------- Chapter "on this page" callout ---------- */
.chapter-meta {
  margin: 0 0 1.5rem;
}

/* ---------- Print / PDF export ---------- */
@media print {
  .md-header, .md-tabs, .md-sidebar, .md-footer,
  .md-content__button, .md-nav, .md-search,
  .loom-toolbar, .loom-embed, .cat-controls, .viva-cta {
    display: none !important;
  }
  .md-main__inner, .md-content, .md-grid {
    margin: 0 !important;
    max-width: none !important;
  }
  .md-typeset { font-size: 11pt; }
  .md-typeset h1, .md-typeset h2 { page-break-after: avoid; }
  .md-typeset pre, .md-typeset table, .viva-card, .cat-card,
  .viva-figure, .admonition {
    page-break-inside: avoid;
  }
  .md-typeset a { color: inherit; text-decoration: none; }
}

/* ---------- Home CTA row ---------- */
.viva-cta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0 .5rem;
}
.viva-cta .md-button { margin: 0; }