/* Engineering Runtime API portal.
   One stylesheet, no build step, no external fonts — it ships in the binary
   and must render on a locked-down network. */

:root,
html[data-theme="light"] {
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --bg-code: #f2f4f7;
  --fg: #17202a;
  --fg-muted: #5a6572;
  --line: #dfe4ea;
  --accent: #0f6fd6;
  --accent-soft: #e7f0fb;
  --ok: #17794a;
  --warn: #8a5a00;
  --danger: #b3261e;
  --radius: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --topbar-h: 96px;
}

html[data-theme="dark"] {
  --bg: #0f1319;
  --bg-soft: #161b23;
  --bg-code: #1b2029;
  --fg: #e6eaf0;
  --fg-muted: #97a2b0;
  --line: #262d38;
  --accent: #6aa9f0;
  --accent-soft: #17283d;
  --ok: #55c08a;
  --warn: #d8a53c;
  --danger: #e57373;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--mono); font-size: 0.9em; }

code {
  background: var(--bg-code);
  border-radius: 4px;
  padding: 0.12em 0.36em;
}

pre {
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; padding: 0; }

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- topbar */

/* Shared blue→black banner chrome. Same gradient as the mkdocs sites'
   header-banner.svg (docs · developer · series) — replicated here rather than
   imported, because there is no shared stylesheet package across hubs and the
   portal must render with zero external requests. The SVG is embedded beside
   this file and layered over the gradient so the strip survives even if a
   browser declines the image. Upstream: engineering-runtime-developer/docs/assets/. */
/* Two-row banner like docs.engineeringruntime.com: brand + tools on top,
   primary nav as a second strip. Search and theme sit with the site switcher. */
.topbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background-color: #041530;
  background-image:
    linear-gradient(90deg, #0b3d91 0%, #041530 42%, #000000 100%),
    url("/assets/header-banner.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar-nav {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding-bottom: 2px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 15px;
  flex-shrink: 0;
}

.brand:hover { text-decoration: none; }
.brand strong { font-weight: 650; }

.mainnav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  width: 100%;
}

.mainnav a {
  color: rgba(255, 255, 255, 0.82);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.mainnav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-decoration: none;
}

.mainnav a[aria-current="page"] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  font-weight: 600;
}

/* ------------------------------------------------------- site switcher */
/* The docs · website icon row (mirrors docs.'s api · website). Icons are
   inline SVG in the template — no icon font, no CDN. */

.er-header-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.er-header-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  opacity: 0.92;
  transition: background 140ms ease, opacity 140ms ease;
}

.er-header-link:hover,
.er-header-link:focus {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
  text-decoration: none;
}

.er-header-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.16);
  opacity: 1;
}

.er-header-link__icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
}

.er-header-link__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.er-header-link__label { line-height: 1; }

/* ------------------------------------------------------- search + theme */
/* Visual parity with Material docs search (white field on brand chrome) and
   palette toggle last. Client-side index only — still zero external requests. */

.er-search {
  position: relative;
  width: min(220px, 42vw);
}

.er-search__form {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  background: #ffffff;
  border-radius: 6px;
}

.er-search__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: #334155;
  flex-shrink: 0;
}

.er-search__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.er-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #041530;
  font: inherit;
  font-size: 14px;
}

.er-search__input::placeholder { color: #64748b; }

.er-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 280px;
  max-height: min(360px, 60vh);
  overflow: auto;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  z-index: 20;
}

.er-search__hit {
  display: block;
  padding: 10px 12px;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}

.er-search__hit:last-child { border-bottom: 0; }

.er-search__hit:hover,
.er-search__hit:focus,
.er-search__hit[aria-selected="true"] {
  background: var(--accent-soft);
  text-decoration: none;
}

.er-search__hit-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.er-search__hit-meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--fg-muted);
}

.er-search__empty {
  padding: 12px;
  font-size: 13.5px;
  color: var(--fg-muted);
}

.er-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.95;
}

.er-theme-toggle:hover,
.er-theme-toggle:focus {
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.er-theme-toggle__icon {
  display: none;
  width: 22px;
  height: 22px;
}

.er-theme-toggle__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

html[data-theme="light"] .er-theme-toggle__icon--moon { display: inline-flex; }
html[data-theme="dark"] .er-theme-toggle__icon--sun { display: inline-flex; }

@media (max-width: 900px) {
  .er-header-link__label { display: none; }
  .er-header-link { width: 32px; padding: 0; justify-content: center; }
  .er-search { width: min(160px, 36vw); }
}

.nav-contract { font-family: var(--mono); font-size: 13px !important; }

/* --------------------------------------------------------------- layout */

main.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 72px;
  align-items: start;
}

.explorer-shell { display: block; }

.content { min-width: 0; }

.page-head { margin-bottom: 32px; }

.page-head h1 {
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.lede {
  margin: 0;
  color: var(--fg-muted);
  font-size: 18px;
}

.content h2 {
  font-size: 22px;
  margin: 44px 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 12px);
}

.content h3 { font-size: 17px; margin: 28px 0 8px; }

.content ul, .content ol { padding-left: 22px; }
.content li { margin: 4px 0; }

.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}

.content th, .content td {
  border: 1px solid var(--line);
  padding: 8px 11px;
  text-align: left;
  vertical-align: top;
}

.content th { background: var(--bg-soft); font-weight: 600; }

.content blockquote {
  margin: 18px 0;
  padding: 2px 18px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg);
}

/* -------------------------------------------------------------- sidebar */

.sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  display: grid;
  gap: 20px;
  font-size: 14px;
}

.toc h2, .card h2 {
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 10px;
}

.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 6px; }
.toc a { color: var(--fg-muted); }
.toc a:hover, .toc a.active { color: var(--accent); }

.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.card dl { margin: 0; display: grid; gap: 8px; }
.card dt { color: var(--fg-muted); font-size: 12.5px; }
.card dd { margin: 0 0 2px; }
.card-foot { margin: 14px 0 0; font-size: 13px; }

/* --------------------------------------------------------------- footer */

.sitefoot {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--fg-muted);
  font-size: 14px;
}

.sitefoot-inner {
  padding-top: 22px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.sitefoot p { margin: 0; }
.sitefoot .links { display: flex; gap: 18px; }

/* ------------------------------------------------------------- explorer */

.explorer-note { color: var(--fg-muted); font-size: 15px; max-width: 70ch; }

.explorer-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.field { display: grid; gap: 5px; flex: 1 1 240px; }
.field span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }

.field input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  width: 100%;
}

.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.explorer-status { color: var(--fg-muted); font-size: 14px; }

.tag-group { margin-bottom: 34px; }

.tag-group > h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 0 0 12px;
}

.op {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--bg-soft);
}

.op > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.op > summary::-webkit-details-marker { display: none; }
.op[open] > summary { border-bottom: 1px solid var(--line); }

.verb {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  min-width: 56px;
  text-align: center;
  background: var(--fg-muted);
}

.verb-get { background: #0f6fd6; }
.verb-post { background: #17794a; }
.verb-put, .verb-patch { background: #8a5a00; }
.verb-delete { background: #b3261e; }

.op-path { font-family: var(--mono); font-size: 13.5px; }
.op-summary { color: var(--fg-muted); font-size: 13.5px; margin-left: auto; text-align: right; }

.op-body { padding: 14px; background: var(--bg); display: grid; gap: 12px; }

.op-body label { display: grid; gap: 4px; font-size: 13px; }
.op-body label > span { color: var(--fg-muted); }

.op-body input[type="text"], .op-body textarea {
  font-family: var(--mono);
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--fg);
  width: 100%;
}

.op-body textarea { min-height: 120px; resize: vertical; }

.op-actions { display: flex; align-items: center; gap: 12px; }

button.send {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

button.send:hover { filter: brightness(1.08); }
button.send:disabled { opacity: 0.6; cursor: progress; }

.result-meta { font-family: var(--mono); font-size: 13px; }
.result-ok { color: var(--ok); }
.result-bad { color: var(--danger); }

.params { display: grid; gap: 10px; }

.hint { color: var(--fg-muted); font-size: 13px; margin: 0; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  main.shell { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sidebar { position: static; }
  .op-summary { display: none; }
}