/* Shared design tokens to keep the mdBook book visually consistent with the Zola shell
   (ADR-028 § visual coherence). The teal brand accent and font stack are aligned;
   mdBook's layout is left untouched. */

:root {
  --hurray-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Match the shell's sans-serif body font. */
html { font-family: var(--hurray-font); }
.content { font-family: var(--hurray-font); }

/* Teal brand accent for links, matching the shell (light: #0d9488, dark: #2dd4bf).
   Overridden per mdBook theme class so specificity beats the built-in theme variables. */
.light  { --links: #0d9488; }
.rust   { --links: #0d9488; }
.coal   { --links: #2dd4bf; }
.navy   { --links: #2dd4bf; }
.ayu    { --links: #2dd4bf; }

/* Sizes below are in em, not rem: mdBook sets html { font-size: 62.5% }, so a rem
   is 10px there and rem-sized UI renders ~1.6x too small next to 1.6rem body text. */

/* Version selector injected into the menu bar by version-selector.js. */
.hurray-version-wrap { display: flex; align-items: center; margin: 0 .4em; }
.hurray-version-select {
  font: inherit;
  font-size: .875em;
  padding: .15em .4em;
  border-radius: 6px;
  border: 1px solid var(--icons, #ccc);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

/* Unreleased-docs banner shown on the dev build. */
.hurray-dev-banner {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffe69c;
  border-radius: 6px;
  padding: .6em .8em;
  margin: 0 0 1.25em;
  font-size: .95em;
}
.hurray-dev-banner a { font-weight: 600; }
.navy .hurray-dev-banner,
.coal .hurray-dev-banner,
.ayu .hurray-dev-banner {
  background: #33320a;
  color: #f0e6a6;
  border-color: #5c5410;
}

/* ── Language tabs (lang-tabs.js) ─────────────────────────────────────────────
   Rust/Python switcher for recipes with code in more than one language. Before
   JS runs (or if disabled) every code block is shown stacked; once ready, the
   bar appears and only the selected language's block is visible. */
.lang-tabs-bar {
  display: flex;
  gap: .3em;
  margin: 0 0 -1px;
  flex-wrap: wrap;
}
.lang-tab {
  font: inherit;
  font-size: .95em;
  cursor: pointer;
  padding: .4em .95em;
  border: 1px solid var(--icons, #ccc);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--sidebar-bg, #f6f7f6);
  color: var(--fg);
  opacity: .7;
}
.lang-tab[aria-selected="true"] {
  opacity: 1;
  color: var(--links);
  border-color: var(--links);
  font-weight: 600;
}
.lang-tab:focus-visible { outline: 2px solid var(--links); outline-offset: 1px; }
.lang-tabs-ready pre[hidden] { display: none !important; }