/* Models (design v9, the system of the Home and ModelDetail boards; FE9-2,
   FE9-SEL-C2): the page title and one line, a search and the type control
   kept in the address, and the models the public list carries as cards
   with their own loops. Components marked "shared later" repeat on the home
   and model pages until they move to base.css. */
.models-page { background: var(--gray-50); }
/* The shared sheet draws main as a column and every main > section as a
   card; this page sets its own container. */
.models-main { display: block; max-width: none; margin: 0; padding: 48px 0 96px; }
.models-main h1 { margin: 0; letter-spacing: 0; }
.models-main p { margin: 0; }

.glyph.models-glyph-video { width: 14px; height: 14px; clip-path: path(evenodd, "M1.17 3.5H9.33V10.5H1.17ZM2.4 4.7V9.3H8.1V4.7ZM12.83 4.67L9.33 7L12.83 9.33Z"); }

.models-head { margin-bottom: 32px; }
.models-title { color: var(--text-1); font: 600 30px/38px var(--font-sans); }
.models-lead { max-width: 640px; margin-top: 8px !important; color: var(--text-2); font-size: 16px; line-height: 24px; }

/* Search: the hint is the field's label, shown until the reader types. */
.models-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 24px; }
.models-search { position: relative; width: 360px; max-width: 100%; height: 36px; padding: 0 4px 0 12px; background: var(--gray-0); }
.models-search > .glyph { color: var(--text-3); }
.models-search-field { position: relative; display: flex; flex: 1 1 auto; align-items: center; min-width: 0; height: 100%; }
.models-search-hint { position: absolute; top: 50%; right: 0; left: 0; overflow: hidden; color: var(--text-3); font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform: translateY(-50%); }
.models-search.has-query .models-search-hint { display: none; }
.models-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.models-search input::-webkit-search-cancel-button { display: none; }
/* The type control: 全部 and each type the list holds, with its count in
   the segment's quieter colour. */
.seg.models-types { height: 36px; }
.models-types[hidden] { display: none; }
.models-types > .seg-item { height: 32px; padding: 0 14px; }
.models-types > .seg-item[hidden] { display: none; }
.models-type-count { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.models-types > .seg-item[aria-checked="true"] > .models-type-count { color: var(--text-2); }
.models-count { margin-left: auto !important; color: var(--text-2); font-size: 13px; line-height: 20px; }
.models-count:empty { display: none; }
.models-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.models-status { color: var(--text-2); font-size: 14px; line-height: 20px; }
.models-status-row.is-shown { margin-bottom: 24px; }

/* Model cards with their loops (shared later as the v9 clip card): three to
   a row as the brief has it (BRIEF-v9 section 6, item 10), two below
   1024px. When four show (models.js) they take one row of four from 1200px
   and two by two below it, so no card stands alone in a second row. */
.models-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.models-grid.models-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.models-grid > li { display: flex; min-width: 0; }
.models-grid > li[hidden], .models-grid[hidden] { display: none; }
.card.models-card { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; margin: 0; padding: 0; overflow: hidden; }
.models-cover { display: block; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line-soft); }
.models-cover-glyph { display: grid; place-items: center; color: var(--gray-500); }
.models-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease); }
/* The loop's poster lies over the loop as a still and is lifted only while
   the card plays (is-live, clips.js): a loop that played and was rewound
   would otherwise show its first frame instead of the poster. */
.models-cover > .models-still { position: absolute; inset: 0; display: block; transition: opacity 150ms var(--ease), transform 200ms var(--ease); }
.models-card.is-live .models-still { opacity: 0; }
.card-link:hover :is(.models-clip, .models-still), .card-link:focus-visible :is(.models-clip, .models-still) { transform: scale(1.02); }
.models-chip { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-6); background: rgba(16, 22, 31, .64); color: #fff; font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.models-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 24px; }
.models-name { color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.models-line { margin-top: 4px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.models-eg { min-height: 20px; color: var(--text-2); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
/* The price sits at the foot of every card, so a row's prices line up
   whatever their lines wrap to: the shared .catalog-price grows (flex 1 1
   auto), which would take the free space the auto margin needs. */
.models-price { display: flex; flex: none; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-height: 24px; margin-top: auto; padding-top: 16px; }
.models-price :is(.catalog-lead, .catalog-value) { color: var(--text-1); font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.models-price .catalog-unit { color: var(--text-3); font-size: 12px; line-height: 16px; }
.models-price .catalog-note { color: var(--text-2); font-size: 13px; line-height: 20px; }
.skel.models-skel-eg { width: 128px; height: 12px; margin: 4px 0; }
.skel.models-skel-price { width: 168px; height: 16px; margin: 4px 0; }

/* No match: one empty state with one action. */
.card.models-empty { max-width: none; margin: 0; padding: 48px 24px; }
.card.models-empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card-link:hover :is(.models-clip, .models-still), .card-link:focus-visible :is(.models-clip, .models-still) { transform: none; }
}
@media (max-width: 1199px) {
  .models-grid.models-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .models-main { padding: 24px 0 48px; }
  .models-head { margin-bottom: 20px; }
  .models-title { font-size: 24px; line-height: 32px; }
  .models-search { width: 100%; height: 40px; }
  .seg.models-types { height: 40px; }
  .models-types > .seg-item { height: 36px; }
  .models-count { width: 100%; margin-left: 0 !important; }
  .models-grid, .models-grid.models-grid-4 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card.models-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 88px; padding: 12px; }
  .models-cover { width: 112px; height: 63px; aspect-ratio: auto; border-bottom: 0; border-radius: var(--r-8); }
  .models-chip { bottom: 4px; left: 4px; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: var(--r-4); }
  .models-chip > span:last-child { display: none; }
  .models-chip .models-glyph-video { width: 12px; height: 12px; }
  .models-cover-glyph .glyph { transform: scale(.75); }
  .models-body { padding: 0; }
  .models-line { margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .models-eg { display: none; }
  .models-price { margin-top: 0; padding-top: 0; }
  .models-price :is(.catalog-lead, .catalog-value) { font-size: 14px; line-height: 20px; }
}