/* Shared by every category. Load after model artwork styles. */
.report-card {
  --card-accent: var(--blue);
  --card-art-height: 260px;
  --card-art-scale: .5;
  --card-padding-x: 30px;
  --card-padding-top: 26px;
  --card-padding-bottom: 28px;
  --card-gap: 20px;
  --card-title-size: 20px;
  --card-title-align: center;
  position: relative;
  display: grid;
  grid-template-rows: var(--card-art-height) auto;
  align-content: start;
  gap: var(--card-gap);
  min-width: 0;
  padding: var(--card-padding-top) var(--card-padding-x) var(--card-padding-bottom);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  text-align: var(--card-title-align);
  text-decoration: none;
  scroll-margin-top: 28px;
}
.report-card.violet { --card-accent: var(--violet); }
.report-card.sky { --card-accent: var(--sky); }
.report-card.teal { --card-accent: var(--teal); }
.report-card.orange { --card-accent: var(--orange); }
.report-card:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 4px; }
html[data-gallery-restored-focus] .report-card:focus-visible { outline: none; }
.report-card .preview { display: grid; place-items: center; min-width: 0; height: var(--card-art-height); }
.report-card .card-title { margin: 0; color: var(--ink); font-size: var(--card-title-size); font-weight: 500; line-height: 1.5; letter-spacing: .035em; overflow-wrap: anywhere; }

/* Scale the fitted silhouette, keeping the artwork area and title in place. */
.report-card .preview [data-model-art] {
  --card-art-ratio: 1;
  display: block;
  width: min(calc(100% * var(--card-art-scale)), calc(var(--card-art-height) * var(--card-art-ratio) * var(--card-art-scale)));
  height: auto;
  max-width: calc(100% * var(--card-art-scale));
  max-height: calc(var(--card-art-height) * var(--card-art-scale));
  aspect-ratio: var(--card-art-ratio);
  object-fit: contain;
  overflow: visible;
  transform-origin: center;
  transition: transform 220ms ease;
}
.report-card .preview [data-model-art="embodied"] { --card-art-ratio: calc(7 / 9); }
.report-card .preview [data-model-art="quadruped"] { --card-art-ratio: calc(19 / 13); }
.report-card .preview [data-model-art="drone"] { --card-art-ratio: calc(4 / 3); }
.report-card .preview [data-model-art="transformer"] { --card-art-ratio: calc(15 / 7); }
.report-card .preview [data-model-art="agent"] { --card-art-ratio: calc(32 / 25); }
.report-card .preview [data-model-art="dh"] { --card-art-ratio: calc(22 / 15); }
.report-card .preview [data-model-art="quaternion"] { --card-art-ratio: calc(19 / 13); }
.report-card .preview [data-model-art="calculus"] { --card-art-ratio: calc(19 / 12); }
.report-card .preview [data-model-art="linear-algebra"] { --card-art-ratio: calc(19 / 14); }
.report-card .preview [data-model-art="least-squares"] { --card-art-ratio: calc(19 / 14); }
.report-card .preview [data-model-art="newton-laws"] { --card-art-ratio: calc(19 / 12); }
.report-card .preview [data-model-art="inverted-pendulum"] { --card-art-ratio: calc(19 / 12); }
.report-card .preview [data-model-art="three-body"] { --card-art-ratio: calc(19 / 12); }
@media (hover: hover) {
  .report-card .preview [data-model-art]:hover { transform: scale(1.3); }
}
.report-card .preview svg { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.report-card .preview .soft { opacity: .35; stroke-width: 1.7; }
.report-card .preview .transformer-preview { stroke: #7896a8; stroke-width: 2; }
.report-card .transformer-preview .tf-node .part-surface { fill: var(--surface); stroke: #6893ad; }
.report-card .transformer-preview .tf-node.decoder .part-surface { fill: var(--surface); stroke: #b19376; }
.report-card .transformer-preview .tf-enclosure { fill: #edf4f830; stroke-width: 1.5; opacity: .65; }
.report-card .transformer-preview .tf-enclosure.decoder-box { fill: #faf1e730; stroke: #b19376; }
.report-card .transformer-preview .tf-edge { fill: none; marker-end: url(#tf-preview-arrow); }
.report-card .transformer-preview .tf-edge.cross { stroke: #aa8359; }
.report-card .transformer-preview .tf-edge.feedback { stroke-dasharray: 7 6; }
.report-card .transformer-preview .tf-glyph { fill: none; }

@media (min-width: 721px) and (max-width: 960px) {
  .report-card { --card-art-height: 230px; --card-padding-x: 20px; --card-padding-top: 22px; --card-padding-bottom: 26px; --card-gap: 18px; --card-title-size: 18px; }
}
@media (max-width: 380px) {
  .report-card { --card-art-height: 236px; --card-padding-x: 24px; --card-padding-top: 22px; --card-padding-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .report-card, .report-card .preview [data-model-art] { transition: none; }
}