/* Project-page refinements using the factorization palette. */

/* The opaque sticky header masks navigation labels after they scroll out of
   either sidebar, without clipping MkDocs Material's sidebar containers. */
.md-header {
  background: var(--md-default-bg-color);
  isolation: isolate;
  box-shadow: 0 0.45rem 0.65rem -0.65rem color-mix(
    in srgb,
    var(--md-default-fg-color) 20%,
    transparent
  );
}

/* Material lowers the placeholder opacity by default. Keep both entered text
   and the search prompt readable against the project's light search panel. */
.md-search__input {
  color: var(--md-default-fg-color);
  font-weight: 500;
  -webkit-text-fill-color: var(--md-default-fg-color);
}

.md-search__input::placeholder {
  color: var(--hitop-muted);
  opacity: 1;
  -webkit-text-fill-color: var(--hitop-muted);
}

/* Preserve Material's two distinct navigation models. The compact drawer
   never scrolls as a whole: each level (the root drawer and every nested
   section you navigate into, e.g. "Project") is its own fixed-height panel
   with a non-scrolling 5.6rem title followed by that level's own scrolling
   `.md-nav__list` -- Material already wires this up unconditionally via
   `.md-nav--primary`'s flex/absolute layout, so links can never render
   above or over a title. Only the desktop sidebar scrolls as one page-flow
   column and needs a sticky title with its own opaque scroll mask (handled
   separately below).
   Two things break that on the compact drawer if left unchecked:
   1. A title accidentally set to `position: sticky` (as happened before)
      re-enters it into the scrolling flow instead of the fixed flex slot.
   2. site.css's blanket `.md-nav__title{background:transparent!important}`
      (meant for the desktop's inline section headers) also matches every
      nested drawer-level title, so scrolled list content shows through the
      "masked" title band instead of stopping cleanly behind an opaque one. */
@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary .md-nav--primary .md-nav__title {
    position: relative !important;
    top: auto !important;
    background: var(--hitop-side) !important;
    box-shadow: none !important;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__title[for="__drawer"] {
    background: var(--hitop-primary) !important;
  }
}

/* This project's header renders taller (measured 3.25rem) than Material's
   stock assumption (2.4rem) -- the enlarged 2rem logo mark grows it -- so
   both sidebars' default sticky offset used to leave a ~0.85rem gap above
   the header's real bottom edge, hiding the top of each sticky title behind
   the opaque header once scrolled. Pinning the offset to the real height and
   dropping Material's own 1.2rem top padding seats both titles flush under
   the topbar instead. The right-hand table of contents goes sticky at
   Material's 60em breakpoint, the left sidebar only once the compact drawer
   becomes a real sidebar at 76.25em; matching both here fixes whichever one
   is active at a given width without touching the compact drawer, which
   never uses this sticky offset at all. */
@media screen and (min-width: 60em) {
  .md-sidebar {
    top: 3.25rem;
    padding-top: 0;
  }

  /* site.css's own 1rem top padding on the scroll wrapper is the only
     spacing left after the two overrides above; keep a small fraction of it
     so the title text doesn't touch the header's border, not the full
     amount. */
  .md-sidebar__scrollwrap {
    padding-top: 0.4rem;
  }
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    background: var(--hitop-side) !important;
    box-shadow: 0 0 0.4rem 0.4rem var(--hitop-side) !important;
  }
}

.hitop-code-model span:nth-child(5),
.hitop-code-model span:nth-child(6) {
  background: #aeb8e3;
  color: #172b45;
}

.hitop-code-model span:nth-child(5) small,
.hitop-code-model span:nth-child(6) small {
  color: #172b45;
  opacity: 0.85;
}

.hitop-scope {
  margin: 1.6rem 0;
  padding: 1.15rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--hitop-secondary) 38%, var(--hitop-line));
  border-left: 4px solid var(--hitop-secondary);
  background: color-mix(in srgb, #d1d6ee 24%, var(--hitop-panel));
  color: var(--md-default-fg-color);
}

.hitop-scope strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--hitop-primary);
  font-size: 0.78rem;
}

.hitop-scope p {
  margin: 0;
  color: var(--hitop-muted);
  font-size: 0.76rem;
  line-height: 1.65;
}

/* Keep a pending review visible without turning it into another card or
   admonition box. Fine rules integrate the status with the document flow. */
.hitop-exception-note {
  margin: 1.5rem 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--hitop-line);
  border-bottom: 1px solid var(--hitop-line);
  color: var(--md-default-fg-color);
}

.hitop-exception-note__heading {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
}

.hitop-exception-note__heading strong {
  color: var(--hitop-primary);
  font-size: 0.72rem;
}

.hitop-exception-note p {
  margin: 0.35rem 0 0;
  color: var(--hitop-muted);
  font-size: 0.72rem;
  line-height: 1.65;
}

.hitop-exception-note p strong {
  color: var(--md-default-fg-color);
}

.hitop-metadata-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.5rem 0 0.75rem;
  color: var(--hitop-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hitop-metadata-filter select {
  width: 9.25rem;
  height: 1.75rem;
  padding: 0 1.75rem 0 0.65rem;
  border: 0;
  border-radius: 1px;
  appearance: none;
  background-color: #264b7d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  color: #ffffff;
  font: 650 0.64rem/1 "Inter", sans-serif;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.hitop-metadata-filter select:hover {
  background-color: #3f7eb8;
}

.hitop-metadata-filter select:focus-visible {
  outline: 2px solid #6aafe0;
  outline-offset: 2px;
}

.hitop-metadata-filter select option {
  background: var(--hitop-panel);
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="hitop-dark"] .hitop-metadata-filter select {
  background-color: #aeb8e3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23172b45' stroke-width='1.5' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  color: #172b45;
}

[data-md-color-scheme="hitop-dark"] .hitop-metadata-filter select:hover {
  background-color: #9fc0e9;
}

.hitop-metadata-count {
  margin-left: 0.75rem;
  color: var(--hitop-muted);
  font-size: 0.65rem;
}

.hitop-metadata-reference tr[hidden] {
  display: none;
}

/* Keep vocabulary identifiers readable and align the property reference with
   the site's established table language. */
.hitop-vocabulary-table table {
  display: table;
  width: 100%;
}

.hitop-vocabulary-table :is(th, td):first-child {
  width: 7.5rem;
  min-width: 7.5rem;
}

.hitop-vocabulary-table th:not(:first-child) {
  white-space: nowrap;
}

.hitop-section-kicker {
  margin: -0.35rem 0 1rem;
  color: var(--hitop-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.hitop-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.hitop-export-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hitop-validation.is-valid {
  border-left-color: #2f7d5b;
  background: color-mix(in srgb, #2f7d5b 12%, var(--hitop-panel));
}

.hitop-validation.is-invalid {
  border-left-color: #b04444;
  background: color-mix(in srgb, #b04444 12%, var(--hitop-panel));
}

.hitop-tree-editor {
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.5fr);
  gap: 1rem;
  margin: 1.2rem 0;
}

.hitop-tree-outline,
.hitop-node-editor {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--hitop-line);
}

.hitop-tree-outline > span,
.hitop-node-editor > span {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--hitop-muted);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.hitop-tree-list {
  margin: 0;
  padding-left: 1rem;
  list-style: none !important;
}

.hitop-tree-outline > [data-tree-outline] > .hitop-tree-list {
  padding-left: 0;
}

.hitop-tree-list button {
  width: 100%;
  margin: 0.12rem 0;
  padding: 0.45rem 0.55rem;
  overflow: hidden;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--md-default-fg-color);
  font: 600 0.7rem/1.35 "Inter", sans-serif;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.hitop-tree-list button.is-selected {
  border-left-color: var(--hitop-secondary);
  background: var(--hitop-soft);
  color: var(--hitop-primary);
}

.hitop-tree-list button small {
  display: block;
  overflow: hidden;
  color: var(--hitop-muted);
  font: 0.58rem/1.35 "DM Mono", monospace;
  text-overflow: ellipsis;
}

.hitop-tree-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.hitop-tree-actions button {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hitop-line);
  background: var(--hitop-panel);
  color: var(--hitop-primary);
  font-weight: 700;
  cursor: pointer;
}

.hitop-tree-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hitop-code-combobox {
  position: relative;
  display: block;
}

.hitop-code-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.15rem);
  right: 0;
  left: 0;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--hitop-line);
  background: var(--md-default-bg-color);
  box-shadow: var(--hitop-shadow);
}

.hitop-code-options button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-bottom: 1px solid var(--hitop-line);
  background: transparent;
  color: var(--md-default-fg-color);
  font-size: 0.68rem;
  text-align: left;
  cursor: pointer;
}

.hitop-code-options button:hover,
.hitop-code-options button:focus-visible {
  background: var(--hitop-soft);
  color: var(--hitop-primary);
}

.hitop-code-options button code {
  display: inline-block;
  min-width: 5.2rem;
  margin-right: 0.35rem;
}

.hitop-form-grid .hitop-checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 0.2rem 0.55rem;
  padding-top: 1.2rem;
}

.hitop-checkbox-field input {
  width: auto;
  margin: 0.05rem 0 0;
  grid-row: 1 / span 2;
}

.hitop-checkbox-field small,
.hitop-bridge-field small,
.hitop-field-help {
  display: block;
  margin-top: 0.35rem;
  color: var(--hitop-muted);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.hitop-bridge-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 0.35rem;
  margin-top: 0.45rem;
}

.hitop-bridge-selection:not(:empty) {
  padding: 0.45rem;
  border: 1px solid var(--hitop-line);
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--hitop-soft) 55%, transparent);
}

.hitop-bridge-selection button {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--hitop-line);
  border-radius: 999px;
  background: var(--hitop-soft);
  color: var(--hitop-primary);
  font-size: 0.62rem;
  cursor: pointer;
}

@media screen and (max-width: 44.984375em) {
  .hitop-tree-editor {
    grid-template-columns: 1fr;
  }
}

/* Independent interaction states for the right-hand table of contents. */
.md-sidebar--secondary .md-nav__title {
  margin-bottom: 0.55rem;
  color: var(--md-default-fg-color);
}

.md-sidebar--secondary .md-nav__item .md-nav__link {
  position: relative;
  margin: 0.12rem 0;
  padding: 0.48rem 0.65rem 0.48rem 0.85rem;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: var(--hitop-muted);
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.md-sidebar--secondary .md-nav__item .md-nav__link:hover {
  color: var(--hitop-primary);
}

.md-sidebar--secondary .md-nav__item .md-nav__link:active {
  border-left-color: var(--hitop-primary);
  background: color-mix(in srgb, #9fc0e9 32%, var(--hitop-panel));
  transform: translateX(1px);
}

.md-sidebar--secondary .md-nav__item .md-nav__link:focus-visible {
  border-left-color: var(--hitop-secondary);
  outline: 2px solid var(--hitop-secondary);
  outline-offset: 2px;
  background: color-mix(in srgb, #d1d6ee 28%, var(--hitop-panel));
  color: var(--hitop-primary);
}

/* No persistent "active"/"passed" styling for the right-hand table of
   contents on purpose: mkdocs-material's built-in scrollspy toggles those
   classes off of a live-computed viewport threshold, which never lined up
   reliably with an anchor jump's landing position (the previous entry kept
   showing as active after a click). Jumping to a heading still works fine
   via the browser's native anchor behavior -- only the lingering highlight
   is removed, leaving hover as the sole persistent-looking interactive
   state (:active/:focus-visible above still apply for their own moments). */

/* Clears the sticky header so a clicked heading doesn't land underneath it. */
.md-typeset :is(h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 5.5rem;
}