/**
 * Copyright 2024 PsiQuantum, Corp. — Apache License 2.0
 *
 * Sections:
 *   1. Global theme variables
 *   2. Material chrome overrides
 *   3. App toolbar
 *   4. Search (Pagefind UI)
 *   5. Layout (grid, sidebars)
 */

@font-face {
  font-family: "Articulat CF";
  src: url("assets/fonts/articulat-cf-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Global theme variables ── */
:root {
    /* Neutral palette */
    --psidocs-neutral-100: #F2F4F8;
    --psidocs-neutral-200: #DDE1E5;
    --psidocs-neutral-300: #C1C7CD;
    --psidocs-neutral-400: #A2A9B0;
    --psidocs-neutral-500: #878D96;
    --psidocs-neutral-600: #697077;
    --psidocs-neutral-700: #4D5357;
    --psidocs-neutral-800: #343A3E;
    --psidocs-neutral-900: #21272A;

    /* Brand palette (Design Guidelines / Colors): secondary purple plus the
     * light/dark ends of the three tertiary ramps. Only steps used by the UI
     * are declared; the neutral ramp above is that document's neutral ramp. */
    --psidocs-purple: #6E32C9;
    --psidocs-orange-800: #5C0101;
    --psidocs-orange-200: #FFE0B1;
    --psidocs-orange-100: #FFF3E0;
    --psidocs-teal-900: #013137;
    --psidocs-teal-200: #87EDED;
    --psidocs-teal-100: #DBFBFC;
    --psidocs-blue-900: #071F80;
    --psidocs-blue-200: #C9DFFF;

    /* Semantic tokens */
    --psidocs-text-primary: var(--psidocs-neutral-900);
    --psidocs-text-secondary: var(--psidocs-neutral-800);
    --psidocs-text-muted: var(--psidocs-neutral-600);
    --psidocs-text-subtle: var(--psidocs-neutral-500);
    --psidocs-border: var(--psidocs-neutral-300);
    --psidocs-border-subtle: var(--psidocs-neutral-200);
    --psidocs-surface: #ffffff;
    --psidocs-surface-muted: var(--psidocs-neutral-100);
    --psidocs-surface-hover: var(--psidocs-neutral-100);

    --md-primary-fg-color: var(--psidocs-text-primary);
    --md-default-fg-color: var(--psidocs-text-primary);
    --md-default-fg-color--light: var(--psidocs-text-muted);
    --md-default-fg-color--lighter: var(--psidocs-text-subtle);
    --md-default-bg-color: var(--psidocs-surface);
    --md-default-bg-color--lightest: var(--psidocs-surface-muted);
    --md-accent-fg-color: var(--psidocs-purple);
    --psidocs-toolbar-height: 3.2rem;
    --psidocs-toolbar-gap: 1.5rem;
    --psidocs-main-top: calc(var(--psidocs-toolbar-height) + var(--psidocs-toolbar-gap));
    /* Width of the fixed <psi-construct-drawer> product rail on the far left.
     * The rail is 5rem wide in the web component, and rem in its shadow DOM
     * resolves against THIS document's root font-size — so 5rem here always
     * equals the rail's rendered width (100px at Material's 20px root, vs 80px
     * at a 16px root). Reserve in rem, not px, so the two never drift. */
    --psidocs-rail-width: 5rem;
    --psidocs-chrome-shadow: 0 2px 2px #bbb;
    --search-panel-shadow: var(--psidocs-chrome-shadow);
    --search-panel-radius: 8px;
    --search-row-border: var(--psidocs-border-subtle);
    --search-toolbar-bg: var(--psidocs-surface-muted);
    --psidocs-nav-active-bleed-y: 0.2rem;
}

/* ── 2. Material chrome overrides ── */
.md-typeset a { color: var(--psidocs-purple); }
.md-typeset a:hover { color: var(--psidocs-neutral-700); }

/* Selected page: purple bar flush to sidebar edge; label keeps nested indent.
 * overflow-x must be clip (not visible): with material's overflow-y:auto,
 * `visible` computes to `auto` and adds a stray horizontal scrollbar. `clip`
 * still lets the active highlight bleed to the sidebar edge, then clips it. */
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  overflow-x: clip;
}

.md-sidebar--primary .md-nav__list,
.md-sidebar--primary .md-nav,
.md-sidebar--secondary .md-nav__list,
.md-sidebar--secondary .md-nav {
  overflow: visible;
}

.md-sidebar--primary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--active {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.md-sidebar--primary .md-nav__link--active::before,
.md-sidebar--secondary .md-nav__link--active::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--psidocs-nav-active-bleed-y));
  bottom: calc(-1 * var(--psidocs-nav-active-bleed-y));
  /* Bleed left through nested list padding; keep label at Material indent */
  left: -12rem;
  right: -0.8rem;
  background-color: var(--psidocs-purple);
  z-index: -1;
}

/* Open-branch ancestors are not the selected page — no extra highlight bar */
.md-sidebar--primary .md-nav__item--active > .md-nav__link:not(.md-nav__link--active),
.md-sidebar--secondary .md-nav__item--active > .md-nav__link:not(.md-nav__link--active) {
  background: transparent !important;
  box-shadow: none !important;
}

.md-sidebar .md-nav__link--active code {
  color: inherit !important;
  background: transparent !important;
}

/* Sidebar nav legibility */
.md-sidebar--primary .md-nav__link,
.md-sidebar--secondary .md-nav__link {
  color: var(--psidocs-text-secondary);
}

.md-sidebar--primary .md-nav__link[href]:hover,
.md-sidebar--secondary .md-nav__link[href]:hover {
  color: var(--psidocs-text-primary);
}

/* Iframe-friendly chrome: native header is replaced by the app toolbar
 * (overrides/main.html); footer is hidden. */
.md-header { display: none !important; }
.md-footer { display: none !important; }

/* ── 2b. Construct product-nav rail ──
 * <psi-construct-drawer> fixes itself to the left edge (position: fixed;
 * left: 0; width: 5rem; full height). Reserve that strip: the fixed content
 * area is padded left, and the toolbar starts at the rail's right edge (its
 * `left` is set on the .psidocs-app-toolbar rule below). Everything else keeps
 * its original spacing — the whole docs layout just shifts right by the rail. */
.md-container { padding-left: var(--psidocs-rail-width); }

/* ── 3. App toolbar ── */
.psidocs-app-toolbar {
  position: fixed;
  top: 0;
  /* Start at the right edge of the fixed product-nav rail (2b). */
  left: var(--psidocs-rail-width);
  right: 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  height: var(--psidocs-toolbar-height);
  padding: 0 1rem 0 0.75rem;
  background: var(--psidocs-neutral-200);
  box-shadow: var(--psidocs-chrome-shadow);
  box-sizing: border-box;
  overflow: visible;
  font-family: "Articulat CF", ui-sans-serif, system-ui, sans-serif;
}
.psidocs-app-toolbar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex-shrink: 0;
  justify-self: start;
}
.psidocs-app-toolbar__title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--psidocs-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.psidocs-app-toolbar__title-link {
  color: inherit;
  text-decoration: none;
}
.psidocs-app-toolbar__title-link:hover {
  text-decoration: underline;
}
.psidocs-app-toolbar__title-prefix,
.psidocs-app-toolbar__title-sep {
  color: var(--psidocs-text-primary);
  flex-shrink: 0;
}
.psidocs-app-toolbar__title-package {
  color: var(--psidocs-text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psidocs-app-toolbar__search-group {
  position: relative;
  justify-self: end;
  grid-column: 2;
  width: min(32rem, calc(100vw - 2rem));
  min-width: 11rem;
}

/* ── 4. Search (Pagefind building blocks in our own dropdown) ──
 * pagefind-input, -summary, -results and -keyboard-hints join one shared
 * instance on their own, so Pagefind renders only the field, the count line,
 * the rows and the hints — the dropdown shell around them is ours. That is
 * what buys the per-row expander: unlike pagefind-searchbox, pagefind-results
 * emits plain links rather than combobox options, so a button may live in a
 * row. Pagefind's own rules sit behind a `:is(*, #\#)` x3 prefix (three-ID
 * specificity), so properties it sets itself need !important to override. */
.md-search { display: none; }

.psidocs-search {
  position: relative;
  width: 100%;

  --pf-font: inherit;
  --pf-background: var(--psidocs-surface);
  --pf-border: var(--psidocs-border);
  --pf-border-focus: var(--md-accent-fg-color);
  --pf-outline-focus: var(--md-accent-fg-color);
  --pf-border-radius: var(--search-panel-radius);
  --pf-hover: var(--psidocs-surface-hover);
  --pf-text: var(--psidocs-text-primary);
  --pf-text-secondary: var(--psidocs-text-secondary);
  --pf-text-muted: var(--psidocs-text-muted);
  --pf-mark: var(--psidocs-text-primary);
  --pf-input-height: 2.1rem;
  --pf-input-font-size: 0.8rem;
  --pf-summary-font-size: 0.7rem;
  --pf-result-title-font-size: 0.8125rem;
}

.psidocs-search pagefind-input {
  display: block;
  width: 100%;
}

/* ── 4a. Dropdown shell ── */
.psidocs-search__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  max-height: min(72vh, 640px);
  overflow: hidden;
  background: var(--psidocs-surface);
  border: 1px solid var(--psidocs-border);
  border-radius: var(--search-panel-radius);
  box-shadow: var(--psidocs-chrome-shadow);
}
.psidocs-search.is-open .psidocs-search__panel { display: flex; }

/* Only the rows scroll; the count and the hints stay pinned. */
.psidocs-search__results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  transition: min-height 0.12s ease;
}

.psidocs-search__count,
.psidocs-search__footer {
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
  background: var(--search-toolbar-bg);
}
.psidocs-search__count { border-bottom: 1px solid var(--search-row-border); }
.psidocs-search__footer { border-top: 1px solid var(--search-row-border); }
.psidocs-search .pf-key,
.psidocs-search .pf-keyboard-key {
  background: var(--psidocs-surface) !important;
  border: 1px solid var(--psidocs-border) !important;
  border-radius: 3px !important;
}

/* ── 4b. Result rows ── */
.psidocs-search .pf-results {
  --pf-results-display: flex;
  --pf-results-flex-direction: column;
  --pf-results-gap: 0;
}
.psidocs-search .pf-result {
  gap: 0 !important;
  border-bottom: 1px solid var(--search-row-border);
  transition: background 0.12s ease;
}
.psidocs-search .pf-result:hover { background: var(--psidocs-neutral-100); }
/* Pagefind marks the focused link with data-pf-selected and styles the card, but
 * we zeroed the card border/background — restate keyboard highlight on the row. */
.psidocs-search .pf-result:has([data-pf-selected]),
.psidocs-search .pf-result:has(.pf-result-link:focus-visible) {
  background: var(--psidocs-neutral-200);
  box-shadow: inset 3px 0 0 var(--psidocs-purple);
}
.psidocs-search .pf-result-link[data-pf-selected] {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Flatten Pagefind's bordered card into a flush list row. Blocking it also
 * takes the row out of flex-in-flex, where its width had to be guessed; as a
 * block child it simply fills the card. */
.psidocs-search .pf-result-card {
  display: block !important;
  padding: 0.4rem 0.7rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.psidocs-search .pf-result-card:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* Product left; title center; doc-type and expander pinned right. */
.psidocs-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.psidocs-search-row .pf-result-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-weight: 600 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.psidocs-search-meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

/* .pf-result-link::after is an inset:0 overlay that makes the whole card
 * clickable, so the expander has to be lifted out from under it. */
.psidocs-search-expand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  color: var(--psidocs-text-muted);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.psidocs-search-expand:hover {
  color: var(--psidocs-text-primary);
  background: var(--psidocs-neutral-200);
}
.psidocs-search-expand svg {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.15s ease;
}
.psidocs-search-expand[aria-expanded="true"] svg { transform: rotate(90deg); }

/* ── 4c. Section matches, revealed by the expander ── */
.psidocs-search .pf-heading-chips { display: none !important; }
.psidocs-search .pf-result.is-expanded .pf-heading-chips {
  display: flex !important;
  gap: 0.3rem !important;
  padding: 0 0.7rem 0.5rem 1.6rem !important;
}
/* Plain text, no cards. Pagefind already keeps the excerpt to one ellipsised
 * line at 12px, so nothing below it needs restating. */
.psidocs-search .pf-heading-chip {
  display: block !important;
  padding: 0.15rem 0.35rem !important;
  background: none !important;
  border: 0 !important;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.psidocs-search .pf-heading-chip:hover {
  background: var(--psidocs-neutral-200) !important;
}
.psidocs-search .pf-heading-chip:has([data-pf-selected]),
.psidocs-search .pf-heading-chip:has(.pf-heading-link:focus-visible) {
  background: var(--psidocs-neutral-200) !important;
  box-shadow: inset 2px 0 0 var(--psidocs-purple);
}
/* Pagefind tints matched terms with --pf-mark as text colour only; swap to a
 * grey chip so highlights stay legible against excerpt text. */
.psidocs-search .pf-heading-excerpt mark {
  padding: 0 0.12em;
  color: var(--psidocs-text-primary) !important;
  background: var(--psidocs-neutral-200) !important;
  font-weight: 600 !important;
}

/* ── 4d. Tags (Design Guidelines / Colors) ──
 * Product is an outlined neutral pill so the doc-type tag is the only fill in
 * the row. Every doc-type pair is dark text on a light fill. */
.psidocs-search-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 4px;
}
.psidocs-search-badge--product {
  color: var(--psidocs-neutral-700);
  background: var(--psidocs-surface);
  border: 1px solid var(--psidocs-neutral-300);
}

/* Doc-type badge colors live in doc-type-badges.css, generated from
 * scripts/doc_types.py on mkdocs build. */
.psidocs-search-badge--type {
  color: var(--tag-fg);
  background: var(--tag-bg);
}

/* ── 5. Layout (grid, sidebars) ──
 * Full width between sidebars; offset main chrome below the app toolbar. */
.md-grid { max-width: initial; }
.md-container { padding-top: var(--psidocs-main-top) !important; }
.md-main,
.md-main__inner,
.md-content,
.md-content__inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.md-typeset > :first-child,
.md-typeset > h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.md-sidebar { top: var(--psidocs-main-top) !important; }
.md-sidebar--primary .md-sidebar__scrollwrap {
  padding-top: 0 !important;
}

.md-sidebar--primary > .md-sidebar__scrollwrap > .md-sidebar__inner > .md-nav--primary > .md-nav__title { display: none !important; }

@media screen and (min-width: 76.25em) {
  /* Material sizes the sticky sidebars from the native header height via JS.
   * We replaced the header with the app toolbar, so that calc is wrong and a
   * phantom scrollbar appears even on short navs. Pin the height to the space
   * below the toolbar; the scrollwrap then only scrolls when truly overflowing. */
  .md-sidebar {
    height: calc(100vh - var(--psidocs-main-top)) !important;
  }
  /* Fill the sidebar so a short nav doesn't overflow its content-sized
   * scroll area (which otherwise shows a phantom scrollbar). */
  .md-sidebar__scrollwrap {
    height: 100% !important;
  }

  /* mkdocs-material auto-injects the active page's H2 anchors as a sub-nav
   * under the active item. Hide it; the right-side TOC is canonical. */
  .md-sidebar--primary .md-nav--primary .md-nav__link[for="__toc"],
  .md-sidebar--primary .md-nav--primary .md-nav__link[for="__toc"] ~ nav {
    display: none !important;
  }
}