/* One selected-marker component for Reference navigation and segmented controls. */
[data-reference-tabs] {
  position: relative;
  isolation: isolate;
}
[data-reference-tabs] > a {
  position: relative;
  z-index: 1;
  transition:
    color 160ms ease,
    background-color 160ms ease;
  white-space: nowrap;
}
[data-reference-tabs] > a:hover {
  color: var(--reading-accent);
}
[data-reference-tabs] > .reference-tab-indicator {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform-origin: top left;
  border-radius: var(--site-radius-sm);
  background: color-mix(in srgb, var(--reading-accent) 8%, transparent);
}
[data-reference-tabs][data-reference-variant="line"]
  > .reference-tab-indicator {
  border-radius: 2px;
  background: var(--reading-accent);
}
[data-reference-tabs][data-reference-variant] > a[aria-current],
[data-reference-tabs][data-reference-variant] > a.is-current {
  background: transparent;
  border-bottom-color: transparent;
}
[data-reference-tabs][data-reference-variant] > a[aria-current]::after {
  display: none;
}
.hw-categories[data-reference-tabs] {
  gap: 0.375rem;
}
.hw-categories[data-reference-tabs] > a {
  padding-inline: 0.75rem;
}
.hw-metric-tabs[data-reference-tabs] > a {
  min-height: 44px;
}
@media (prefers-reduced-motion: reduce) {
  [data-reference-tabs] > a {
    transition: none;
  }
}

/* Spacer rows retain scroll geometry without keeping offscreen rows in the DOM. */
[data-reference-list] {
  table-layout: fixed;
  overflow-anchor: none;
}
[data-reference-list] > tbody > tr.reference-list-spacer {
  display: table-row !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
[data-reference-list] > tbody > .reference-list-spacer > td {
  display: table-cell !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
}
[data-reference-list] > tbody > .reference-list-spacer > td::before {
  display: none !important;
}
.llm-catalog-table[data-reference-list] th:first-child {
  width: 32%;
}
.llm-catalog-table[data-reference-list] th:nth-child(3) {
  width: 21%;
}
.hw-table[data-reference-list] thead th:first-child {
  width: 32%;
}
@media (max-width: 768px) {
  .llm-table[data-reference-list] > tbody > tr.reference-list-spacer,
  .llm-table[data-reference-list] > tbody > .reference-list-spacer > td {
    display: block !important;
  }
}
@media (max-width: 700px) {
  .hw-table[data-reference-list] > tbody > tr.reference-list-spacer,
  .hw-table[data-reference-list] > tbody > .reference-list-spacer > td {
    display: block !important;
  }
}

/* Animate only live workspace columns; never capture the full scroll surface. */
@media (min-width: 1280px) {
  .llm-app .llm-workspace {
    grid-template-columns: minmax(0, 1fr) 0px;
    gap: 0;
    transition:
      grid-template-columns 240ms cubic-bezier(0.22, 1, 0.36, 1),
      gap 240ms ease;
  }
  .llm-app.has-detail .llm-workspace {
    grid-template-columns: minmax(0, 1fr) 368px;
    gap: 2rem;
  }
}
@media (min-width: 1200px) {
  .hw-app .hw-workspace {
    grid-template-columns: minmax(0, 1fr) 0px;
    gap: 0;
    transition:
      grid-template-columns 240ms cubic-bezier(0.22, 1, 0.36, 1),
      gap 240ms ease;
  }
  .hw-app.has-detail .hw-workspace {
    grid-template-columns: minmax(0, 1fr) 368px;
    gap: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .llm-workspace,
  .hw-app .hw-workspace {
    transition: none;
  }
}

/* Quiet date metadata shared by both Reference headers. */
.reference-date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  white-space: nowrap;
}
.reference-date svg { flex: 0 0 auto; opacity: 0.65; }