/* models page styles — owned by the models page owner. Shared rules stay in ../pages.css (read-only for page owners). */

/* Astra platform-price row: the brand mark sits on white inside the logo tile */
.page-models .cat-astra .mlogo img{padding:6px;background:#fff}

/* hero fallback when bootstrap has no resource pools */
.page-models .mdl-hero-empty{padding:14px 14px 16px}
.page-models .mdl-hero-empty .route-cap{margin:0 0 6px}

/* catalogue skeleton while r15 is loading */
.page-models .mdl-skel-logo{width:36px;height:36px;border-radius:11px;flex:none}
.page-models .mdl-skel-main{flex:1;min-width:0}
.page-models .mdl-skel-a{width:55%}
.page-models .mdl-skel-b{width:35%}
.page-models .mdl-skel-c{width:70px;flex:none}

/* provider chips: 2px below the strip so each chip's padded 44px hit area isn't covered by the catalogue card */
.page-models .chips{margin-bottom:2px}
/* local fix: the shared .chip::after (inset:-4px 0) starts inside the 1px border, so the hit area is only 42px tall */
.page-models .chip::after{inset:-5px 0}
/* scroll hint: the edge that hides more chips fades out (models.js mountChips sets .fade-l / .fade-r from the scroll position) */
.page-models .chips{--fade-l:0px;--fade-r:0px;scroll-padding-inline:40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
.page-models .chips.fade-l{--fade-l:36px}
.page-models .chips.fade-r{--fade-r:36px}
/* mouse + wide column (desktop shows the 440px app column): a wheel can't scroll the strip sideways, so wrap the chips
   instead. Touch phones keep the swipeable strip of the design. */
@media (hover:hover) and (pointer:fine){
  @container app (min-width:420px){
    .page-models .chips{flex-wrap:wrap;overflow-x:visible;row-gap:10px;-webkit-mask-image:none;mask-image:none}
  }
}

/* catalogue rows: keep the price pair on one line, let the model name wrap */
.page-models .cat .mdl-price{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.page-models .cat .row-end{max-width:52%}
/* 320-class widths: the right column squeezed names to ~110px ("Claude Sonnet / 5") and stacked the tags one per line.
   Re-flow each row as a grid: name across the full width; provider + status pill; price pair with its label; tags. */
@container app (max-width:350px){
  .page-models .cat .rows .row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:0 10px;align-items:center}
  .page-models .cat .rows .row > .mlogo{grid-column:1;grid-row:1 / span 2;align-self:start}
  .page-models .cat .rows .row-main,.page-models .cat .rows .row-end{display:contents}
  .page-models .cat .rows .row-title{grid-column:2 / 4;grid-row:1}
  .page-models .cat .rows .row-sub{grid-column:2;grid-row:2;margin-top:0}
  .page-models .cat .rows .row-end .pill{grid-column:3;grid-row:2;justify-self:end;margin-top:2px}
  .page-models .cat .rows .mdl-price{grid-column:2 / 4;grid-row:3;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:6px}
  .page-models .cat .rows .use-tags{grid-column:2 / 4;grid-row:4}
  .page-models .cat-astra .row-end .v{font-size:var(--fs-13)}
  /* board: keep "100,000,000 M+" on one line */
  .page-models .board-cells{grid-template-columns:1.6fr 1fr 1fr}
  .page-models .board-cells b{font-size:var(--fs-13)}
  .page-models .board-cells .num{white-space:nowrap}
}

/* resource list names ("Claude 系列 · 長文"): break only at the spaces around "·", never inside a CJK word ("長 / 文") */
.page-models .fam-list .row-title{word-break:keep-all}

/* board: status cell when no pool is taking orders / bootstrap is stale */
.page-models .board-cells .mdl-off{color:var(--ink-3)}

/* model sheet */
.sheet--model .mdl-sheet-disc{margin-top:12px}
.sheet--model .sheet-card .kv .pill{flex:none}
.sheet--model .mdl-why{margin-top:4px}
.sheet--model .mdl-why .reason{margin-top:8px;text-align:left}