/* ==========================================================================
   Reusable modern components (q- prefix) + small nav/search polish.
   Additive layer: loaded after extra.css, uses tokens.css. Authored in plain
   Markdown via attr_list/md_in_html wrappers, e.g. <div class="q-spec-table" markdown>.
   ========================================================================== */

/* --- Accent feature cards: orange top rail on every grid card by default --- */
.md-typeset .grid.cards > ul > li {
  border-top: 3px solid var(--q-brand);
}

/* --- Comparison / spec table: <div class="q-spec-table" markdown> + a table --- */
.md-typeset .q-spec-table > table:not([class]) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--q-radius-md);
  overflow: hidden;
  box-shadow: var(--q-shadow-1);
}
.md-typeset .q-spec-table > table:not([class]) th {
  background: var(--q-brand);
  color: var(--q-on-brand);
  font-weight: var(--q-fw-medium);
  border: none;
}
.md-typeset .q-spec-table > table:not([class]) tbody tr:nth-child(even) td {
  background: var(--q-surface-2);
}
.md-typeset .q-spec-table > table:not([class]) tbody tr:hover td {
  background: color-mix(in srgb, var(--q-brand) 8%, transparent);
}

/* --- Brand callout: !!! qualytics "Title" (custom admonition) --- */
.md-typeset .admonition.qualytics,
.md-typeset details.qualytics {
  border-color: var(--q-brand);
}
.md-typeset .qualytics > .admonition-title,
.md-typeset .qualytics > summary {
  background: color-mix(in srgb, var(--q-brand) 12%, transparent);
}
.md-typeset .qualytics > .admonition-title::before,
.md-typeset .qualytics > summary::before {
  background-color: var(--q-brand);
  -webkit-mask-image: var(--md-admonition-icon--note);
          mask-image: var(--md-admonition-icon--note);
}

/* --- Example wrapper: <div class="q-example" markdown> around tabbed code --- */
.md-typeset .q-example {
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-md);
  padding: var(--q-space-2) var(--q-space-4);
  background: var(--q-surface);
}

/* --- Search polish: brand left-accent on result hover/active --- */
.md-search-result__item:hover,
.md-search-result__more + .md-search-result__item {
  border-left: 2px solid transparent;
}
.md-search-result__item:hover {
  border-left-color: var(--q-brand);
}