.serial-models { container: serial-models / inline-size; }
.serial-models .serial-model-cards { display: none; }
.serial-models .serial-model-scope { margin: 0 0 12px; line-height: 1.6; }
.serial-models .catalog-table th,
.serial-models .catalog-table td { padding-inline: 8px; }
.serial-models .serial-spec { display: inline-block; }
.serial-models .serial-spec small { display: block; font-weight: 500; }
.serial-models .serial-cross-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: 10px;
  padding: 0;
  list-style: none;
}
.serial-models .serial-cross-models li {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d8e7eb;
  border-radius: 8px;
  background: #f5f9fa;
}
.serial-models .serial-cross-models strong,
.serial-models .serial-cross-models .serial-spec small { display: inline; }
.serial-models .serial-cross-models .serial-spec { margin-top: 4px; }
.serial-models .serial-cross-models .serial-spec small::before { content: ' · '; }

@container serial-models (width < 780px) {
  .serial-models .catalog-table { display: none; }
  .serial-models .serial-model-cards { display: grid; gap: 8px; }
  .serial-models .serial-model-card {
    border: 1px solid #d8e7eb;
    border-radius: 8px;
    overflow-wrap: anywhere;
  }
  .serial-models .serial-model-card details { border: 0; margin: 0; }
  .serial-models .serial-model-card summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 8px;
    padding: 10px 12px 6px;
    list-style: none;
  }
  .serial-models .serial-model-card summary::-webkit-details-marker { display: none; }
  .serial-models .serial-model-card summary .serial-model-fields { grid-column: 1 / -1; color: #456174; }
  .serial-models .serial-model-card summary .serial-model-fields span { display: block; }
  .serial-models .serial-model-card summary .serial-model-toggle { color: #08717f; font-size: 12px; }
  .serial-models .serial-model-card details[open] .serial-model-toggle .serial-model-expand,
  .serial-models .serial-model-card details:not([open]) .serial-model-toggle .serial-model-collapse { display: none; }
  .serial-models .serial-model-card details p { padding: 0 12px; margin: 5px 0 8px; }
  .serial-models .serial-model-links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 12px 10px; }
  .serial-models .serial-model-links .serial-spec small { display: inline; }
  .serial-models .serial-model-links .serial-spec small::before { content: ' · '; }
}