/* Team prices (design v9): the second tab of 余额与账单. The page head and
   the two page tabs (余额与流水, 团队价格) are the ones the balance page
   carries; then one card per model, three to a row on a wide screen and
   the cards of a row as tall as each other: the name the price list gives
   with 在体验台试用 beside it and, the width of the card under both, a line
   of what the model can do; the exact rates in a table with the unit as
   its caption; and the sample price and the effective time in the foot.
   The note under the grid says how tasks are charged. Cards, tables, tabs
   and buttons are the v9 classes of the shared stylesheet; this file
   places them. */
.prices { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.prices > .page-head { margin: 0; }
.prices-head-text { min-width: 0; }
.billing-tabs { margin: 0 0 8px; }
.prices .card { margin: 0; }

.prices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: stretch; }
.prices-model { display: flex; flex-direction: column; min-width: 0; }
.prices-model-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding-bottom: 12px; }
.prices-model-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.prices-model-name > .tag { margin-bottom: 6px; }
.prices-model-desc { grid-column: 1 / -1; min-width: 0; }
.prices-try { justify-self: end; }

/* The rates: resolution and reference video, then the price at its exact
   decimals, right-aligned. The two names wrap at their spaces (720p, then
   及以下; Without reference, then video), never inside a word; a rate keeps
   one line unless it has many decimals. The unit is the caption under the
   rates, so the price column is only as wide as its rates. */
.prices-table-wrap { flex: 1 1 auto; border-top: 1px solid var(--line-soft); }
.prices-table th { height: auto; padding-top: 8px; padding-bottom: 8px; line-height: 16px; vertical-align: bottom; }
.prices-table td { height: 44px; }
/* Three short columns in a card: 16px between them (the table's edges keep
   theirs), so English names stay on one line in a 360px card. */
.prices-table :is(th, td) { padding-right: 8px; padding-left: 8px; }
.prices-table td:not(.num) { white-space: normal; overflow-wrap: break-word; word-break: keep-all; }
.prices-rate { font-weight: 500; }
.prices-rate.is-long { white-space: normal; overflow-wrap: anywhere; }
.prices-unit { caption-side: bottom; padding: 8px var(--table-edge) 12px; color: var(--text-3); font-size: 12px; line-height: 16px; text-align: right; }

/* The foot: the sample price on a light row, then when the prices took
   effect. */
.prices-model-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line-soft); }
.prices-sample { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 8px 12px; border-radius: var(--r-8); background: var(--gray-25); }
.prices-sample-label { color: var(--text-3); font-size: 12px; line-height: 16px; }
.prices-sample-value { color: var(--text-1); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.prices-effective { margin: 0; color: var(--text-3); font-size: 12px; line-height: 16px; }
.prices-note { margin: 0; color: var(--text-3); font-size: 13px; line-height: 20px; }
.prices-empty { grid-column: 1 / -1; }

/* Session tools under the page: they serve a page that could not be shown
   (read again, or sign out); while the page shows, the frame's account menu
   holds the sign-out and the page needs no second refresh. */
main > #prices-refresh, main > #prices-sign-out { margin: 16px 8px 0 0; }
#prices-page:not([hidden]) ~ #prices-refresh, #prices-page:not([hidden]) ~ #prices-sign-out { display: none; }
#prices-status { margin: 12px 0 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
#prices-status:empty { display: none; }

/* Loading shows the skeleton of the page 200ms into the first read; the
   status line is then read aloud only. */
.prices-skeleton { display: none; }
main:has(#prices-status.is-loading) .prices-skeleton { display: flex; flex-direction: column; gap: 16px; animation: prices-appear 1ms linear 200ms both; }
main:has(#prices-status.is-loading) :is(#prices-refresh, #prices-sign-out) { display: none; }
main:has(#prices-status.is-loading) #prices-status { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes prices-appear { from { opacity: 0; } to { opacity: 1; } }
#prices-page:not([hidden]) ~ .prices-skeleton { display: none; }
.prices-skeleton .page-head { margin: 0; }
.prices-skeleton .page-head > div { display: flex; flex-direction: column; gap: 10px; }
.prices-skel-title { width: 120px; height: 20px; }
.prices-skel-desc { width: 360px; max-width: 70vw; }
.prices-skel-tabs { display: flex; gap: 24px; height: 40px; align-items: center; border-bottom: 1px solid var(--line); }
.prices-skel-tab { width: 72px; height: 14px; }
.prices-skel-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.prices-skel-name { width: 140px; height: 16px; }
.prices-skel-line { width: 220px; }
.prices-skel-row { width: 100%; height: 28px; }

/* Phones: the name over the line of what the model can do, then
   在体验台试用 the width of the card. */
@media (max-width: 767px) {
  .billing-tabs { margin-bottom: 0; }
  .prices-model-head { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 12px; }
  .prices-try { grid-row: 3; justify-self: stretch; width: 100%; height: 44px; margin-top: 16px; }
  .prices-model-foot { padding: 12px 16px 16px; }
  .prices-table td { height: auto; padding-top: 10px; padding-bottom: 10px; }
  .prices-table tr > :first-child { padding-left: 16px; }
  .prices-table tr > :last-child { padding-right: 16px; }
  .prices-unit { padding-right: 16px; padding-left: 16px; }
}