/*
  Chrome shared by every page of the developer docs: the fixed top-right
  toolbar (theme switcher + page links) and the brand lockup.

  Self-contained on purpose — it carries its own colours per `data-oo-theme`
  so it looks right on both the Scalar reference (index.html, which themes via
  --scalar-* variables) and the hand-rolled live-reference page.

  Brand palette (from the Optima Orbit mark):
    blue   #1466c7   deep blue #0b3d8c   navy #0a1830
    orange #f59022   deep orange #d9660a
*/

:root {
  --oo-blue: #1466c7;
  --oo-blue-deep: #0b3d8c;
  --oo-orange: #f59022;
  --oo-orange-deep: #d9660a;
}

/* ── Toolbar shell ───────────────────────────────────────────────────────── */
.oo-toolbar {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.oo-toolbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--oo-blue);
  color: #fff;
  box-shadow: 0 2px 8px #00000033;
}
.oo-toolbar-link:hover { background: var(--oo-blue-deep); }

html[data-oo-theme='orbit'] .oo-toolbar-link { background: var(--oo-orange); }
html[data-oo-theme='orbit'] .oo-toolbar-link:hover { background: var(--oo-orange-deep); }

/* ── Three-way theme switch ──────────────────────────────────────────────── */
.oo-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  border: 1px solid #d5dde8;
  background: #ffffff;
  box-shadow: 0 2px 8px #00000022;
}

.oo-theme-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #4a5568;
}
.oo-theme-btn:hover { background: #eef2f7; }
.oo-theme-btn.is-on { background: var(--oo-blue); color: #fff; }

.oo-theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid #00000033;
}

/* Dark + Orbit share the dark chrome; Orbit swaps the active pill to orange. */
html[data-oo-theme='dark'] .oo-theme-switch,
html[data-oo-theme='orbit'] .oo-theme-switch {
  border-color: #24344d;
  background: #101826;
}
html[data-oo-theme='dark'] .oo-theme-btn,
html[data-oo-theme='orbit'] .oo-theme-btn { color: #b4c6df; }
html[data-oo-theme='dark'] .oo-theme-btn:hover,
html[data-oo-theme='orbit'] .oo-theme-btn:hover { background: #1b2739; }
html[data-oo-theme='orbit'] .oo-theme-switch { border-color: #1e3b66; background: #0f2140; }
html[data-oo-theme='orbit'] .oo-theme-btn.is-on { background: var(--oo-orange); color: #10233f; }

@media (max-width: 720px) {
  .oo-theme-btn { padding: 5px 7px; }
  .oo-theme-btn .oo-theme-label { display: none; }
}

/* ── Brand lockup (mark + wordmark) ──────────────────────────────────────── */
/*
  The wordmark is drawn in CSS rather than baked into the image: the PNG's
  "OPTIMA ORBIT" text is deep navy and would vanish on the Dark and Orbit
  backgrounds. Only the icon half of OO-API-DOCS.png is used, so the lockup
  reads correctly on every theme.
*/
.oo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px;
  text-decoration: none;
}
.oo-brand img {
  width: 46px;
  height: auto;
  flex: none;
}
.oo-brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oo-brand-name {
  font: 800 13px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: 0.02em;
  color: #12294a;
  white-space: nowrap;
}
.oo-brand-sub {
  font: 700 9.5px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oo-blue);
  white-space: nowrap;
}
html[data-oo-theme='dark'] .oo-brand-name { color: #e7ebf3; }
html[data-oo-theme='dark'] .oo-brand-sub { color: #6ea8f0; }
html[data-oo-theme='orbit'] .oo-brand-name { color: #eaf1fb; }
html[data-oo-theme='orbit'] .oo-brand-sub { color: var(--oo-orange); }