.httk-serve-optimade-table {
  --httk-serve-rule: color-mix(in srgb, currentColor 26%, transparent);
  --httk-serve-muted: color-mix(in srgb, currentColor 68%, transparent);
  --httk-serve-accent: #007d79;
  --httk-serve-wash: color-mix(in srgb, var(--httk-serve-accent) 8%, transparent);
  color: inherit;
  font: inherit;
  max-inline-size: 100%;
  overflow-x: auto;
}

.httk-serve-optimade-table table { border-collapse: collapse; inline-size: 100%; min-inline-size: 34rem; }
.httk-serve-optimade-table caption { caption-side: top; font-weight: 650; padding: .35rem 0 .6rem; text-align: start; }
.httk-serve-optimade-table th,
.httk-serve-optimade-table td { border-block-end: 1px solid var(--httk-serve-rule, currentColor); padding: .46rem .62rem; text-align: start; vertical-align: top; }
.httk-serve-optimade-table th { border-block-start: 2px solid var(--httk-serve-accent); font-size: .82em; font-variant-caps: all-small-caps; font-weight: 700; letter-spacing: .045em; }
.httk-serve-optimade-table__header--center, .httk-serve-optimade-table__cell--center { text-align: center; }
.httk-serve-optimade-table__header--end, .httk-serve-optimade-table__cell--end { text-align: end; }
.httk-serve-optimade-table td { max-inline-size: 38ch; overflow-wrap: anywhere; }
.httk-serve-optimade-table tbody tr:hover { background: var(--httk-serve-wash); }
.httk-serve-optimade-table a { color: inherit; text-decoration-color: var(--httk-serve-accent); text-decoration-thickness: .12em; text-underline-offset: .18em; }
.httk-serve-optimade-table a:focus-visible,
.httk-serve-optimade-table button:focus-visible { outline: 2px solid var(--httk-serve-accent); outline-offset: 2px; }
.httk-serve-optimade-table__pager { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-block-start: .7rem; }
.httk-serve-optimade-table__pager [role="status"] { color: var(--httk-serve-muted); flex: 1 1 16rem; font-size: .9em; min-inline-size: 0; }
.httk-serve-optimade-table__page-size { align-items: center; color: var(--httk-serve-muted); display: inline-flex; font-size: .9em; gap: .4rem; }
.httk-serve-optimade-table__page-size select { background: transparent; border: 1px solid var(--httk-serve-rule, currentColor); border-radius: 0; color: inherit; font: inherit; padding: .25rem .4rem; }
.httk-serve-optimade-table button { background: transparent; border: 1px solid var(--httk-serve-rule, currentColor); border-radius: 0; color: inherit; font: inherit; padding: .3rem .6rem; }
.httk-serve-optimade-table button:not(:disabled):hover { background: var(--httk-serve-wash); border-color: var(--httk-serve-accent); }
.httk-serve-optimade-table button:disabled { cursor: not-allowed; opacity: .52; }
.httk-serve-optimade-table__retry { margin-inline-start: .35rem; }
.httk-serve-optimade-table__error td { border-inline-start: .25rem solid #b33a2f; color: currentColor; }
.httk-serve-optimade-table__empty td { color: var(--httk-serve-muted); font-style: italic; }
.httk-serve-optimade-table[aria-busy="true"] tbody { opacity: .58; }
.httk-serve-optimade-table__summary { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin-block-end: .7rem; }
.httk-serve-optimade-table__summary[hidden] { display: none; }
.httk-serve-optimade-table__summary-count { color: var(--httk-serve-muted); flex-basis: 100%; font-size: .9em; margin: 0; }
.httk-serve-optimade-table__pill { align-items: center; background: var(--httk-serve-wash); border: 1px solid var(--httk-serve-rule, currentColor); border-radius: 999px; display: inline-flex; font-size: .85em; gap: .3rem; padding: .1rem .55rem; }
.httk-serve-optimade-table__pill strong { font-weight: 650; }
.httk-serve-optimade-table__pill-remove { background: transparent; border: 0; border-radius: 999px; color: inherit; cursor: pointer; font: inherit; line-height: 1; padding: 0 .15rem; }
.httk-serve-optimade-table__pill-remove:hover { background: var(--httk-serve-wash); }
.httk-serve-optimade-table__sort-link { cursor: pointer; }
.httk-serve-optimade-table th[aria-sort] { color: var(--httk-serve-accent); }
.httk-serve-optimade-table th[aria-sort="ascending"] .httk-serve-optimade-table__sort-link::after { content: " ↑"; }
.httk-serve-optimade-table th[aria-sort="descending"] .httk-serve-optimade-table__sort-link::after { content: " ↓"; }
.httk-serve-optimade-table__advanced { margin-block-end: .7rem; }
.httk-serve-optimade-table__advanced summary { cursor: pointer; font-size: .9em; font-weight: 650; }
.httk-serve-optimade-table__advanced-form { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-block-start: .5rem; }
.httk-serve-optimade-table__advanced-label { align-items: center; display: flex; flex: 1 1 20rem; gap: .4rem; min-inline-size: 0; }
.httk-serve-optimade-table__advanced-input { background: transparent; border: 1px solid var(--httk-serve-rule, currentColor); border-radius: 0; color: inherit; flex: 1 1 12rem; font: inherit; min-inline-size: 0; padding: .3rem .5rem; }
.httk-serve-optimade-table__advanced-help { font-size: .9em; }

@media (prefers-reduced-motion: no-preference) {
  .httk-serve-optimade-table tbody { transition: opacity 100ms linear; }
  .httk-serve-optimade-table button { transition: background-color 100ms linear, border-color 100ms linear; }
}