/* The look of the physicslib4 website, tutorial, reference manual and web blueprint on the API docs
 * (doc-gen4's HTML). scripts/restyle_api_docs.py copies this file to the API docs and links it
 * after doc-gen4's style.css on every page and in the module list (navbar.html).
 *
 * 1. Design tokens: a copy of those in blueprint/src/extra_styles.css (the website's, with its
 *    deep-teal accent and its dark theme).
 * 2. The website header (markup in web/docs-theme/site-header.html): a copy of the rules in
 *    blueprint/src/extra_styles.css, with the measurements of the website's `Site.headerCss`,
 *    then what the API docs need: the header fixed at the top, doc-gen4's rules for bare `header`
 *    and `nav` undone on it, the search form and the module-list button.
 * 3. doc-gen4's variables, fonts and colours mapped to the site's.
 *
 * The site's theme is the class `dark-theme` on <html>; physicslib4-docs.js keeps doc-gen4's
 * `data-theme` attribute equal to it, so doc-gen4's own dark colours (declaration kinds) follow. */

/* ── 1. Design tokens ───────────────────────────────────────────────────────── */

:root {
  --font-primary: 'Open Sans', Arial, sans-serif;
  --font-code: 'Fira Code', monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-md: 0.5rem;
  --container-width: 1240px;
  --transition-base: 0.3s;
  --site-header-height: 4.5rem;
  --toc-width: 18rem;
  --text-width: 47rem;

  --color-surface: #fff;
  --color-primary: #0f766e;
  --color-primary-light: #14b8a6;
  --color-secondary: #607D8B;
  --color-text: #333;
  --color-text-light: #64748b;
  --color-bg: #F9FBFD;
  --color-bg-translucent: rgba(249, 251, 253, 0.81);
  --color-border: #E4EBF3;
  --color-border-nav: #E4EBF3;
  --color-border-light: #D1D9E2;
  --color-hover: rgba(15, 118, 110, 0.08);
  --color-active: rgba(15, 118, 110, 0.12);
  --color-link: var(--color-primary);
  --color-link-hover: #0d9488;
  --color-shadow: rgba(35, 55, 139, 0.1);
  --card-bg: #fff;
  --code-bg: #f3f6f9;
}

.dark-theme {
  --color-surface: #121212;
  --color-primary: #0d9488;
  --color-primary-light: #5eead4;
  --color-secondary: #aabfc9;
  --color-text: #eee;
  --color-text-light: #bbb;
  --color-bg: #181818;
  --color-bg-translucent: rgba(24, 24, 24, 0.85);
  --color-border: #333;
  --color-border-nav: #333;
  --color-border-light: #444;
  --color-hover: rgba(45, 212, 191, 0.14);
  --color-active: rgba(45, 212, 191, 0.16);
  --color-link: #5eead4;
  --color-link-hover: #5eead4;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --card-bg: #1f1f1f;
  --code-bg: #262626;
}

html { color-scheme: light; }
html.dark-theme { color-scheme: dark; }

/* ── 2. The website header ──────────────────────────────────────────────────── */

body > header.site-header {
  display: flex; flex-shrink: 0; align-items: center; box-sizing: border-box;
  height: var(--site-header-height); margin: 0; padding: 0; box-shadow: none; text-shadow: none;
  position: relative; z-index: 1000; justify-content: flex-start;
  background-color: var(--color-bg-translucent); color: var(--color-text);
  border-bottom: 1px solid var(--color-border-nav);
  font-family: var(--font-primary); font-size: 1rem; font-weight: 400; line-height: 1.2;
}
header.site-header * { box-sizing: border-box; }
header.site-header .navbar {
  display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1;
  flex: 1; min-width: 0; height: 100%; padding: 0 var(--space-8); border-bottom: 0;
}
header.site-header .navbar-container.container {
  display: flex; justify-content: space-between; align-items: center;
  max-width: min(var(--container-width), 100vw); width: 100%; margin: 0 auto; padding: 0 var(--space-4);
}
header.site-header ul, header.site-header menu, header.site-header li {
  margin: 0; padding: 0; list-style: none; font-size: inherit;
}
header.site-header button { background: none; border: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
header.site-header a, header.site-header a:visited { text-decoration: none; }
header.site-header .nav-logo.wordmark {
  display: flex; align-items: center; color: var(--color-text);
  font-family: var(--font-primary); font-size: 1.4rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.01em; margin: 0 var(--space-6) 0 0; padding: 0;
}
header.site-header .nav-logo.wordmark:hover { color: var(--color-primary); }
header.site-header .desktop-menu {
  display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--space-6);
}
header.site-header .desktop-menu-part { display: flex; align-items: center; gap: var(--space-2); }
header.site-header .nav-item { display: flex; align-items: center; }
header.site-header .nav-link {
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative;
  color: var(--color-text); background: transparent; border: none; border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: 0.9rem; font-weight: 500; line-height: 1.2;
  padding: var(--space-3) var(--space-4); margin: 0; white-space: nowrap; cursor: pointer;
  transition: all var(--transition-base);
}
header.site-header .nav-link::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-md);
  background: var(--color-hover); opacity: 0; transition: opacity var(--transition-base);
}
header.site-header .nav-link:hover { color: var(--color-primary); }
header.site-header .nav-link:hover::before { opacity: 1; }
header.site-header .nav-link svg { width: 20px; height: 20px; }
header.site-header .nav-item.active .nav-link { background-color: var(--color-active); color: var(--color-primary); }
.dark-theme header.site-header .nav-link svg { fill: var(--color-text); stroke: var(--color-text); }
.dark-theme header.site-header .nav-item.active .nav-link,
.dark-theme header.site-header .nav-link:hover { color: #5eead4; }

/* Narrow screens: the navigation button and, beside it, the module-list button */
header.site-header .nav-toggle { display: none; align-items: center; }
header.site-header .nav-toggle-checkbox { display: none; }
header.site-header .nav-toggle-label {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: var(--fs-xl); line-height: 1.2; padding: var(--space-3); color: var(--color-text);
}
header.site-header .toc-toggle-button { display: flex; align-items: center; padding: var(--space-3); color: var(--color-text); }
header.site-header .toc-toggle-button svg { width: 1.25rem; height: 1.25rem; }
header.site-header .mobile-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background-color: var(--color-bg); border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-8);
}
header.site-header .mobile-nav .nav-list { display: flex; flex-direction: column; width: 100%; }
header.site-header .mobile-nav .nav-item { margin: var(--space-1) 0; width: 100%; }
header.site-header .mobile-nav .nav-link { width: 100%; justify-content: flex-start; padding: var(--space-2) var(--space-4); }

@media (max-width: 1024px) {
  body > header.site-header { background-color: var(--color-bg); }
  header.site-header .desktop-menu { display: none; }
  header.site-header .nav-toggle { display: flex; }
  header.site-header .navbar:has(.nav-toggle-checkbox:checked) .mobile-nav { display: block; }
}
@media (max-width: 768px) {
  header.site-header .navbar { padding: 0 var(--space-2); }
}

/* The API docs: the header is fixed at the top, as doc-gen4's own bar is, and doc-gen4's rules for
   bare `header`, `header > *` and `nav` are undone on it. */
body > header.site-header {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: none; float: none;
}
header.site-header > nav.navbar {
  float: none; position: relative; top: auto; left: auto; width: auto; max-width: none;
  height: 100%; margin: 0; overflow: visible; line-height: 1.2; vertical-align: baseline;
}

/* doc-gen4's search form, between the wordmark and the links */
header.site-header #search_form {
  position: relative; display: flex; align-items: center; flex: 0 1 18rem; min-width: 6rem;
  margin: 0 var(--space-4) 0 0; padding: 0;
}
header.site-header #search_form input[name=q] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2.25rem; margin: 0; padding: 0 var(--space-3) 0 2.1rem;
  font-family: var(--font-primary); font-size: 0.9rem; font-weight: 400; line-height: 1.2;
  color: var(--color-text); background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0.65rem center; background-size: 1rem 1rem;
  border: 1px solid var(--color-border-light); border-radius: var(--radius-md); outline: none;
  transition: border-color var(--transition-base);
}
header.site-header #search_form input[name=q]::placeholder { color: var(--color-text-light); }
header.site-header #search_form input[name=q]:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-hover);
}
/* The button stays in the page: search.js clicks it on Enter to open the results page. */
header.site-header #search_button { display: none; }
header.site-header #autocomplete_results {
  position: absolute; top: calc(100% + (var(--site-header-height) - 2.25rem) / 2); left: 0; right: auto;
  width: max(100%, 26rem); max-height: calc(100vh - var(--site-header-height));
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 8px 24px var(--color-shadow);
  font-size: var(--fs-sm); line-height: 1.4;
}
header.site-header #autocomplete_results a {
  color: var(--color-text); padding: var(--space-2) var(--space-3); border-left: 3px solid transparent;
  font-family: var(--font-code); overflow-wrap: anywhere;
}
header.site-header #autocomplete_results a:hover { background: var(--color-hover); color: var(--color-primary); text-decoration: none; }
header.site-header #autocomplete_results .selected .result_link a {
  background: var(--color-active); border-color: var(--color-primary); color: var(--color-primary);
}

/* The module-list button: doc-gen4 shows its module list beside the text above 1000px, and below
   that width behind this button, as the blueprint does with its table of contents. */
header.site-header label.docs-nav-toggle {
  display: none; margin: 0; border: 0; background: none; cursor: pointer;
}
header.site-header label.docs-nav-toggle::before { content: none; }
@media screen and (max-width: 1000px) {
  header.site-header label.docs-nav-toggle { display: flex; border-radius: var(--radius-md); }
  #nav_toggle:checked ~ header.site-header label.docs-nav-toggle {
    background: var(--color-active); color: var(--color-primary);
  }
}
@media (max-width: 700px) {
  /* The wordmark keeps its place; the search box takes the room up to the two buttons. */
  header.site-header .nav-logo.wordmark { margin-right: var(--space-2); }
  header.site-header #search_form { flex: 1 1 auto; min-width: 0; margin-right: var(--space-2); }
  header.site-header #autocomplete_results {
    position: fixed; top: var(--site-header-height); left: var(--space-2); right: var(--space-2); width: auto;
  }
}

/* ── 3. doc-gen4's pages ────────────────────────────────────────────────────── */

/* doc-gen4's variables, set from the site's tokens. `html:root` outranks doc-gen4's `:root` and
   `[data-theme]` rules; the kind colours (`--def-color` …) keep doc-gen4's light and dark values.
   `--code-bg` has the same name in both and is set by the tokens above. */
html:root {
  --header-height: var(--site-header-height);
  --header-bg: var(--color-bg-translucent);
  --body-bg: var(--color-surface);
  --text-color: var(--color-text);
  --link-color: var(--color-link);
  --implicit-arg-text-color: var(--color-text);
  --hamburger-bg-color: transparent;
  --hamburger-active-color: var(--color-active);
  --hamburger-border-color: var(--color-border-light);
  --tags-border-color: var(--color-border-light);
}

body, .inductive_ctor_doc, .structure_field_doc, input, select, textarea, button {
  font-family: var(--font-primary);
}
body { font-size: 1rem; color: var(--color-text); background: var(--color-surface); }
.inductive_ctor_doc, .structure_field_doc { font-size: 1rem; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--color-text); font-weight: 600; }
main h1 { font-size: 2rem; line-height: 1.25; }
.imports li, code, .decl_header, .attributes, .structure_field_info,
        .constructor, .instances li, .instances-for-list li, .equation, .structure_ext_ctor {
  font-family: var(--font-code), 'JuliaMono', monospace;
}
code, pre { border-radius: 0.25rem; }
::selection { color: #fff; background: var(--color-primary); }

a:link, a:visited, a:active { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
.docfile h2 a, .docfile h2 a:link, .docfile h2 a:visited { color: var(--color-text); }

/* The page name, from doc-gen4's top bar, above the text of a module page */
main > .docs-page-name {
  margin: 0 0 var(--space-2); padding: 0 8px; color: var(--color-text-light);
  font-family: var(--font-code), 'JuliaMono', monospace; font-size: var(--fs-sm); line-height: 1.4;
}

/* The welcome page (index.html, the only page whose text is one heading and one line), centred
   like the books' title pages */
main:has(> a#top:first-child + h1 + p:last-child) { text-align: center; }

/* Declarations: definitions and instances in the accent colour, the other kinds in doc-gen4's */
.def, .instance { border-left-color: var(--color-primary); border-top-color: var(--color-primary); }
.decl > div { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.gh_link a, .ink_link a { font-size: var(--fs-sm); }
.tactic, .note { border-top-color: var(--color-primary); }
.decl:target > div, .decl > div:target { box-shadow: 0 0 0 2px var(--color-active); }
#search_results .result_link, #search_results .result_doc { border-bottom-color: var(--color-border); }

/* The two side columns and the module list (in its own frame, navbar.html) */
nav.nav, nav.internal_nav { font-size: var(--fs-sm); line-height: 1.45; }
.navframe nav.nav { font-size: var(--fs-sm); }
.nav h3, .internal_nav h3 { font-size: var(--fs-base); font-weight: 600; color: var(--color-text); }
.nav .nav_link a, .nav summary, .nav summary a,
.internal_nav .nav_link a, .internal_nav a { color: var(--color-text); }
.nav .nav_link a:hover, .nav summary a:hover, .internal_nav a:hover { color: var(--color-primary); }
.nav summary::marker { color: var(--color-text-light); }
.internal_nav .gh_nav_link a { color: var(--color-link); }

/* doc-gen4's colour-scheme picker: the header's theme switch takes its place */
#settings { display: none !important; }

/* On narrow screens doc-gen4's module list is opened below the header */
@media screen and (max-width: 1000px) {
  body .nav { left: 0; margin-left: 0; padding: 0 var(--space-4); background: var(--color-surface); }
}