/* Integration layer for the complete guide after the existing world entrance.
   Load after styles.css, depth.css and swarm.css. No embed layout is used. */
:root {
  --world-nav-height: 64px;
  --guide-nav-height: 76px;
  --guide-anchor-gap: 16px;
}

/* Section margins also work when the entrance temporarily sets scroll padding to zero. */
html:not([data-worlds-in-view]):not([data-worlds-boot]) { scroll-padding-top: 0; }
:is(#main, #swarm, #architecture, #runtime, #explorer, #choose, #together, #provenance, #engineering-atlas) {
  scroll-margin-top: calc(var(--world-nav-height) + var(--guide-nav-height) + var(--guide-anchor-gap));
}
body > .header {
  position: sticky;
  top: var(--world-nav-height);
  margin-top: var(--world-nav-height);
  z-index: 1100;
  height: var(--guide-nav-height);
  width: 100%;
  max-width: none;
  padding-inline: max(24px, calc((100vw - 1344px) / 2));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
body > .header .wordmark { flex-shrink: 0; }
body > .header > .button { flex-shrink: 0; }
body > .header nav { min-width: 0; }
.role-contract, .trace-reading, .runtime-detail {
  top: calc(var(--world-nav-height) + var(--guide-nav-height) + 18px);
}
.skip { z-index: 1500; }
.skip:focus { top: calc(var(--world-nav-height) + 8px); }
.toast { z-index: 1500; }
#presentation { z-index: 2000; }
#presentation::backdrop { background: #101710e8; }
#presentation :is(button, a, [tabindex]) { scroll-margin-block: 20px; }

/* Presentation is a deliberate full-screen view; its original Exit control stays visible. */
body.visual-presenting { --world-nav-height: 0px; --guide-nav-height: 65px; }
body.visual-presenting :is(#saras-worlds, #saras-worlds-nav, #saras-worlds-button) { display: none !important; }
body.visual-presenting::before { display: none !important; }
body.visual-presenting > .header {
  top: 0;
  margin-top: 0;
  z-index: 1300;
  height: var(--guide-nav-height);
}
body.visual-presenting #swarm { scroll-margin-top: var(--guide-nav-height); }
body.visual-presenting .header .wordmark-sub { display: none; }

/* Retain the guide's sage/cream identity in light mode; dark mode changes surfaces, not structure. */
html[data-worlds-theme="dark"] {
  color-scheme: dark;
  --paper: #141a13;
  --ink: #edf2e7;
  --muted: #b5c0ac;
  --line: #415039;
  --olive: #354b2b;
  --dark: #23351f;
  --accent: #b9d791;
  --guide-panel: #1b2419;
  --guide-soft: #243020;
  --guide-card: #293625;
  --guide-active: #3b512e;
  --guide-accent: #bddb91;
  --guide-quiet: #9faf92;
  --guide-danger: #e8b096;
}
html[data-worlds-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-worlds-theme="dark"] :is(input, select, textarea) { color: var(--ink); background: var(--guide-panel); border-color: var(--line); }
html[data-worlds-theme="dark"] :is(button, a, summary, select, input, [tabindex]):focus-visible {
  outline-color: var(--guide-accent);
}
html[data-worlds-theme="dark"] .button:hover { background: var(--guide-soft); }
html[data-worlds-theme="dark"] .button:is(.primary, .dark) {
  color: #1c2a15;
  background: var(--guide-accent);
  border-color: var(--guide-accent);
}
html[data-worlds-theme="dark"] .button:is(.primary, .dark):hover { background: #d1e9ad; }
html[data-worlds-theme="dark"] .icon-button:hover { background: var(--guide-active); }
html[data-worlds-theme="dark"] .status-dot { background: var(--guide-accent); }
html[data-worlds-theme="dark"] :is(.hero .eyebrow, .system-overview .eyebrow) { color: var(--guide-accent); }
html[data-worlds-theme="dark"] :is(.principle-strip p span, .swarm-bottom > div > span, .engineering-atlas > summary > span) { color: var(--guide-accent); }

/* Visual theatre and its mobile scene cards. */
html[data-worlds-theme="dark"] :is(.swarm-panel, .swarm-progress) { background: var(--guide-panel); border-color: var(--line); }
html[data-worlds-theme="dark"] :is(.swarm-tabs button, .swarm-metrics, .swarm-now, .swarm-node-inspect) {
  background: var(--guide-soft);
  border-color: var(--line);
}
html[data-worlds-theme="dark"] .swarm-tabs button[aria-selected="true"] {
  background: var(--guide-active);
  border-color: var(--guide-accent);
  box-shadow: inset 0 -2px var(--guide-accent);
}
html[data-worlds-theme="dark"] :is(.swarm-panel-head, .swarm-transfer, .swarm-legend, .swarm-now, .swarm-footer, .compare-toggle) { border-color: var(--line); }
html[data-worlds-theme="dark"] .compare-toggle button[aria-pressed="true"] { background: var(--guide-accent); color: #1c2a15; }
html[data-worlds-theme="dark"] :is(.swarm-metrics, .swarm-legend, .swarm-node small, .swarm-progress button small) { color: var(--muted); }
html[data-worlds-theme="dark"] .swarm-metrics strong { color: var(--ink); }
html[data-worlds-theme="dark"] :is(.swarm-stage, .swarm-mobile) { background: radial-gradient(ellipse at center, #293722, #1c2719); }
html[data-worlds-theme="dark"] .swarm-node {
  color: var(--ink);
  background: var(--guide-card);
  border-color: #56694a;
  box-shadow: 0 3px 0 #0003;
}
html[data-worlds-theme="dark"] .swarm-controller { background: #302f24; }
html[data-worlds-theme="dark"] :is(.swarm-input, .swarm-output) { background: var(--guide-panel); }
html[data-worlds-theme="dark"] .swarm-node.working {
  background: var(--guide-active);
  border-color: var(--guide-accent);
  box-shadow: 0 0 0 2px #bad58e44, 0 4px 14px #0002;
}
html[data-worlds-theme="dark"] .swarm-node.finished { background: #2a3b22; border-color: #718759; }
html[data-worlds-theme="dark"] .swarm-node[aria-pressed="true"] { outline-color: var(--guide-accent); }
html[data-worlds-theme="dark"] .agent-state { background: #657558; }
html[data-worlds-theme="dark"] .swarm-node.working .agent-state { background: var(--guide-accent); }
html[data-worlds-theme="dark"] .swarm-node.finished .agent-state:after { color: var(--guide-accent); }
html[data-worlds-theme="dark"] .swarm-legend i { background: var(--guide-card); border-color: #9db783; }
html[data-worlds-theme="dark"] .swarm-legend .controller-key { background: #302f24; }
html[data-worlds-theme="dark"] .swarm-legend .active-key { background: var(--guide-accent); }
html[data-worlds-theme="dark"] .swarm-transfer > strong { color: var(--guide-accent); }
html[data-worlds-theme="dark"] .swarm-progress button:not(:last-child):after { background: var(--line); }
html[data-worlds-theme="dark"] .swarm-progress button > span { background: var(--guide-card); border-color: #647752; color: var(--muted); }
html[data-worlds-theme="dark"] .swarm-progress button[aria-current="step"] > span { background: var(--guide-accent); border-color: var(--guide-accent); color: #1c2a15; }
html[data-worlds-theme="dark"] .swarm-progress button[aria-current="step"] small { color: var(--ink); }
html[data-worlds-theme="dark"] .swarm-wires :is(path[stroke="#607d39"], #swarm-arrow-active path) { stroke: var(--guide-accent); }
html[data-worlds-theme="dark"] .swarm-wires circle { fill: var(--guide-accent); }
html[data-worlds-theme="dark"] :is(.mobile-incoming p, .mobile-arrow) { color: var(--guide-accent); }
html[data-worlds-theme="dark"] .mobile-agent { background: var(--guide-active); border-color: #91aa72; box-shadow: 0 4px 0 #0003; }
html[data-worlds-theme="dark"] .mobile-agent small { color: var(--muted); }
html[data-worlds-theme="dark"] .mobile-agent.controller { background: #302f24; }
html[data-worlds-theme="dark"] :is(.mobile-agent.input, .mobile-agent.output, .mobile-outgoing) { background: var(--guide-panel); border-color: #718759; }

/* Native machinery, evidence contracts, function library and shared runtime. */
html[data-worlds-theme="dark"] :is(.engineering-atlas, .runtime-section) { background: #192116; border-color: var(--line); }
html[data-worlds-theme="dark"] :is(.native-content, .runtime-detail) { background: var(--guide-panel); border-color: var(--line); }
html[data-worlds-theme="dark"] :is(.native-views, .native-scope, .native-quickfacts article, .node-contract, .role-contract, .trace-reading, .function-card, .artifact-library article, .limits-grid article) {
  background: var(--guide-soft);
  border-color: var(--line);
}
html[data-worlds-theme="dark"] :is(.native-views button:hover, .system-tab:hover) { background: var(--guide-card); }
html[data-worlds-theme="dark"] :is(.native-views button[aria-selected="true"], .system-tab[aria-selected="true"]) { background: var(--guide-active); border-color: var(--guide-accent); }
html[data-worlds-theme="dark"] .scope-badge { color: #d0e4b5; background: #2e3e24; border-color: #667c50; }
html[data-worlds-theme="dark"] :is(.native-overview-details > summary, .node-more > summary, .quickfact-icon, .io-arrow) { color: var(--guide-accent); }
html[data-worlds-theme="dark"] :is(.node-io > div, .role-list button, .trace-timeline button, .runtime-steps button) { background: var(--guide-card); border-color: var(--line); }
html[data-worlds-theme="dark"] :is(.role-list button[aria-pressed="true"], .trace-timeline button[aria-current="step"], .runtime-steps button[aria-pressed="true"]) { background: var(--guide-active); border-color: #91aa72; }
html[data-worlds-theme="dark"] :is(.role-list small, .trace-timeline small, .trace-timeline button > span, .runtime-steps button span, .function-search span, .function-purpose, .deep-source, .deep-map-key, .source-index code, .runtime-functions small, #runtime-limits) { color: var(--muted); }
html[data-worlds-theme="dark"] :is(.function-search input, .runtime-tools-heading select) { color: var(--ink); background: var(--guide-panel); border-color: #667c50; }
html[data-worlds-theme="dark"] :is(.node-more, .edge-receipts, .deep-source, .function-body .contract-fields, .trace-controls, .source-index > div, .runtime-functions article) { border-color: var(--line); }
html[data-worlds-theme="dark"] .deep-map-scroll { background-color: #202b1b; background-image: radial-gradient(#47583b .7px, transparent .7px); border-color: var(--line); }
html[data-worlds-theme="dark"] .deep-node { background: #2a3723; color: var(--ink); border-color: #6c8159; box-shadow: 0 3px 0 #0003; }
html[data-worlds-theme="dark"] .deep-node[aria-pressed="true"] { background: var(--guide-active); border-color: var(--guide-accent); box-shadow: 0 0 0 1px var(--guide-accent); }
html[data-worlds-theme="dark"] .deep-node:hover { border-color: var(--guide-accent); }
html[data-worlds-theme="dark"] :is(.deep-node.kind-failure, .deep-node.kind-recovery, .failure-mode .deep-node.failure-step) { background: #442f25; border-color: #bc8b70; }
html[data-worlds-theme="dark"] .failure-mode .deep-node[aria-pressed="true"] { background: #5a3b2c; border-color: var(--guide-danger); box-shadow: 0 0 0 1px var(--guide-danger); }
html[data-worlds-theme="dark"] .failure-mode .deep-node.on-failure-path { border-color: #bd8b70; }
html[data-worlds-theme="dark"] .deep-map-key .failure-key { color: var(--guide-danger); }
html[data-worlds-theme="dark"] .map-actions #map-failures[aria-pressed="true"] { color: #f1c5ab; background: #4d3426; border-color: #bf9076; }
html[data-worlds-theme="dark"] .deep-edges path[stroke="#7c886b"] { stroke: #b2c794; }
html[data-worlds-theme="dark"] .deep-edges path[stroke="#a56c5a"] { stroke: var(--guide-danger); }
html[data-worlds-theme="dark"] .mode-switch button.active { color: #1c2a15; background: var(--guide-accent); }
html[data-worlds-theme="dark"] .command-example pre { background: #10170d; border: 1px solid var(--line); color: #e4efda; }

/* Live model graphs and acceptance details. */
html[data-worlds-theme="dark"] .workflow-shell { background: var(--guide-panel); }
html[data-worlds-theme="dark"] .workflow-map { background-color: #1b2517; background-image: radial-gradient(#4b5d3d .7px, transparent .7px); }
html[data-worlds-theme="dark"] .flow-group.parallel { background: #283622a8; border-color: #6a8054; }
html[data-worlds-theme="dark"] .flow-node { background: var(--guide-card); border-color: #687e52; box-shadow: 0 2px 0 #0003; }
html[data-worlds-theme="dark"] .flow-node.selected { background: var(--guide-active); border-color: var(--guide-accent); box-shadow: 0 0 0 1px var(--guide-accent); }
html[data-worlds-theme="dark"] .flow-node .node-index { border-color: #8c9e75; }
html[data-worlds-theme="dark"] :is(.group-label, .flow-end, .flow-end span, .flow-arrow, .map-legend, .metadata-row span, .demo-tag, .stage-example) { color: var(--muted); }
html[data-worlds-theme="dark"] .demo-tag { border-color: var(--line); }
html[data-worlds-theme="dark"] .stage-detail { background: var(--guide-soft); }
html[data-worlds-theme="dark"] .stage-example { border-color: var(--line); }
html[data-worlds-theme="dark"] .legend-dot { background: var(--guide-accent); }

/* Choosing a system, the complete project journey, and build receipts. */
html[data-worlds-theme="dark"] .choose-section { background: #1b2518; border-color: var(--line); }
html[data-worlds-theme="dark"] .chooser-layout { background: var(--guide-panel); border-color: var(--line); }
html[data-worlds-theme="dark"] .chooser-input select { color: var(--ink); background: var(--guide-card); border-color: #718759; }
html[data-worlds-theme="dark"] .recommendation { border-color: var(--line); }
html[data-worlds-theme="dark"] .recommendation .rec-tradeoff { color: var(--muted); }
html[data-worlds-theme="dark"] :is(th, td) { border-color: var(--line); }
html[data-worlds-theme="dark"] thead th { background: #2b3b22; color: var(--ink); }
html[data-worlds-theme="dark"] td { color: var(--muted); }
html[data-worlds-theme="dark"] :is(.composition-notice, .journey-token) { background: var(--guide-soft); border-color: #718759; }
html[data-worlds-theme="dark"] :is(.composition-notice > span, .journey-flow-arrow) { color: var(--guide-accent); }
html[data-worlds-theme="dark"] :is(.journey-stop.active, .journey-actor) { background: var(--guide-active); border-color: #91aa72; }
html[data-worlds-theme="dark"] :is(.journey-stop small, .journey-actor small) { color: var(--muted); }
html[data-worlds-theme="dark"] .artifact-row { border-color: var(--line); }
html[data-worlds-theme="dark"] .provenance-section { background: #10170e; color: var(--ink); }
html[data-worlds-theme="dark"] .provenance-section :is(p, .micro) { color: #b9c6ad; }
html[data-worlds-theme="dark"] .provenance-section :is(.eyebrow, .technical .text-link, .receipt summary, .receipt-status) { color: var(--guide-accent); }
html[data-worlds-theme="dark"] :is(.build-receipts, .receipt, .technical, .receipt-status) { border-color: #526544; }
html[data-worlds-theme="dark"] .closing p { color: var(--ink); }
html[data-worlds-theme="dark"] .closing em { color: var(--guide-accent); }
html[data-worlds-theme="dark"] .toast { background: #d7e9bf; color: #172311; }
html[data-worlds-theme="dark"] .skip { background: var(--guide-accent); color: #172311; }

/* The reference-slide dialog is in the top layer and intentionally covers both navigation bars. */
html[data-worlds-theme="dark"] :is(.slide-piece, .slide-graph .slide-group, .slide-role-strip span) { background: var(--guide-soft); border-color: #61764f; }
html[data-worlds-theme="dark"] .slide-group span { background: var(--guide-card); border-color: #61764f; }
html[data-worlds-theme="dark"] .slide-native-stats { color: var(--guide-accent); }

@media (max-width: 1100px) {
  body > .header { padding-inline: 32px; }
}
@media (max-width: 760px) {
  :root { --guide-nav-height: 68px; --guide-anchor-gap: 12px; }
  body > .header { padding-inline: 18px; gap: 12px; }
  body > .header .wordmark { font-size: 20px; }
  body > .header nav { gap: 14px; margin-inline: auto 0; }
  body > .header > .button { font-size: 10px; padding-inline: 10px; min-height: 36px; }
  .swarm-footer { flex-wrap: wrap; }
  .swarm-footer .micro { order: 3; width: 100%; }
  .role-contract, .trace-reading, .runtime-detail { position: static; }
  body.visual-presenting > .header { padding-inline: 12px; }
}
@media (max-width: 420px) {
  body > .header { gap: 9px; padding-inline: 12px; }
  body > .header .wordmark { font-size: 18px; gap: 5px; }
  body > .header .mark { font-size: 25px; }
  body > .header nav { gap: 10px; font-size: 9px; }
  body > .header > .button { padding-inline: 8px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  #saras-worlds, #saras-worlds-nav, #saras-worlds-button, body > .header { display: none !important; }
  html[data-worlds-theme="dark"] { --paper: #fff; --ink: #182016; --muted: #485441; --line: #b7c2ac; }
  html[data-worlds-theme="dark"] body { background: #fff; color: #182016; }
}