/* Generated model pages (src/models). Colours come only from the tokens in src/lib/tokens.mjs. */

/* ---- Model page header ---- */
.mp-hero {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 0 12px; padding: 16px;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel);
}
.mp-hero .model-icon { flex: none; }
.mp-hero__body { flex: 1 1 auto; min-width: 0; }
.mp-hero__brand { margin: 0; font-weight: 600; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.mp-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.mp-hero .mp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-height: 36px; padding: 0 14px; border-radius: var(--r-xs);
  background: var(--accent-fill); color: var(--on-accent-fill);
  font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
}
.mp-hero .mp-button:hover { background: var(--accent-fill-hover); color: var(--on-accent-fill); }
.mp-hero + .code-block { margin-top: 0; }

/* ---- Shared bits ---- */
.mp-note { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; white-space: normal; }
.mp-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-dim { color: var(--faint); }
.mp-yes { color: var(--pos); font-weight: 600; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-notes, .mp-limits, .mp-example-notes, .mp-related, .mp-sources { padding-left: 1.25em; }
.mp-notes li, .mp-limits li, .mp-example-notes li { margin: 4px 0; }
.mp-example-notes { color: var(--text2); font-size: 14px; }
.mp-sources-title { margin: 16px 0 4px; font-size: 14px; font-weight: 600; }
.mp-sources { margin-top: 0; font-size: 13px; }
.mp-sources a { overflow-wrap: anywhere; }
.mp-voices { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
.mp-voices summary { cursor: pointer; font-weight: 600; }
.mp-voices p { margin: 8px 0 0; line-height: 2; }
.mp-voices code { white-space: nowrap; }
.prose .endpoint .mp-dim { margin-left: 8px; font-size: 13px; }

/* ---- Catalog (/models/) — grid, cards, chips and inputs come from components.css ---- */
.mp-catalog { margin-top: 24px; }
.mp-filter-bar { margin-bottom: 12px; }
.mp-filter-bar select { flex: 0 1 auto; max-width: 100%; }
.mp-count { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.mp-count [data-filter-count] { color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mp-catalog .mp-chips { margin: 0 0 4px; }
.model-card__names { display: flex; flex-direction: column; min-width: 0; }
.model-card__vendor { color: var(--muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.mp-catalog .model-card__price { padding-top: 8px; border-top: 1px solid var(--rule); color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .mp-hero .mp-button { transition: background-color var(--dur-1) var(--ease-out); }
}

@media (max-width: 560px) {
  .mp-hero { flex-wrap: wrap; padding: 14px; }
  .mp-hero .mp-button { width: 100%; }
  .mp-filter-bar select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .mp-count { width: 100%; margin-left: 0; }
}