/* Balance and billing (design v9): the page head and billing's two page
   tabs (余额与流水, 团队价格), then the balance card (the net balance and
   its three terms, each with its help mark) over the ledger card (BE-SEL-5:
   a toolbar of filter chips and a refresh, the table, and its footer with
   the range, the page size and the page turns), with 如何充值 in a side
   card. Cards, chips, tables and buttons are the v9 classes of the shared
   stylesheet; this file places them. */
.balance-workspace { min-width: 0; max-width: 100%; }
.balance { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.balance .card { margin: 0; padding: 0; }
.balance > .page-head { margin: 0; }
.balance-head-text { min-width: 0; }
.billing-tabs { margin: 0 0 8px; }
.balance-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 16px; align-items: start; }
.balance-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.balance-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Net balance: the label with its help mark, the amount, the tasks link and
   the below-zero banner; the three terms sit under a hairline. Amounts
   never break inside their digits: their size follows the width they have
   (the hero and each term are size containers), up to 36px, and an amount
   too long for that width (eight digits on a phone) moves its whole tail to
   the next line. Each amount is a wrapping flex box whose parts each stay
   on one line. */
.balance-hero { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.balance-net { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; }
.balance-net-label { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
.balance-net-label .glyph, .balance-help { color: var(--text-3); cursor: help; }
.balance-net-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; min-width: 0; }
#balance-net { --amount-size: 36px; min-width: 0; color: var(--text-1); font-size: clamp(22px, calc((100cqi - 48px) / 7.6), var(--amount-size)); line-height: 44px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#balance-net .money { display: inline-flex; flex-wrap: wrap; align-items: baseline; max-width: 100%; white-space: nowrap; }
#balance-net .money-tail { color: var(--text-3); font-size: .5em; font-weight: 500; letter-spacing: 0; }
#balance-net .negative, #balance-net .negative .money-tail { color: var(--danger-fg); }
#balance-net .money-sign { margin-left: 6px; color: var(--danger-fg); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.balance-tasks-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: 2px; color: var(--violet-600); font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.balance-tasks-link:hover { color: var(--violet-700); text-decoration: none; }
.balance-alert { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; padding: 10px 12px 10px 16px; border: 1px solid var(--danger-border); border-radius: var(--r-8); background: var(--danger-tint); color: var(--danger-fg); font-size: 14px; line-height: 20px; }
.balance-alert[hidden] { display: none; }
.balance-alert::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; clip-path: path("M7.41 2.06A0.68 0.68 0 0 1 8.59 2.06L14.99 13.26A0.68 0.68 0 0 1 14.4 14.28L1.6 14.28A0.68 0.68 0 0 1 1.01 13.26ZM2.77 12.92L13.23 12.92L8 3.77ZM8.68 6.8L8.68 9.6A0.68 0.68 0 0 1 8 10.28A0.68 0.68 0 0 1 7.32 9.6L7.32 6.8A0.68 0.68 0 0 1 8 6.12A0.68 0.68 0 0 1 8.68 6.8ZM8.68 11.68L8.68 11.76A0.68 0.68 0 0 1 8 12.44A0.68 0.68 0 0 1 7.32 11.76L7.32 11.68A0.68 0.68 0 0 1 8 11A0.68 0.68 0 0 1 8.68 11.68Z"); }

/* The terms: three columns, each label (with its help mark) over its 24/32
   amount. */
#balance-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: 0; margin: 0; border-top: 1px solid var(--line-soft); }
#balance-parts:empty { display: none; }
#balance-parts dt { display: flex; align-items: center; gap: 6px; margin: 0; padding: 16px 20px 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
#balance-parts dd { --amount-size: 24px; min-width: 0; margin: 0; padding: 4px 20px 16px; color: var(--text-1); font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; container-type: inline-size; }
#balance-parts dd .money { display: inline-flex; flex-wrap: wrap; align-items: baseline; max-width: 100%; font-size: clamp(16px, calc(100cqi / 7.2), var(--amount-size)); letter-spacing: -.01em; white-space: nowrap; }
/* The tail keeps the console's small-text size when the term is narrow. */
#balance-parts dd .money-tail { color: var(--text-3); font-size: max(12px, .5em); font-weight: 500; letter-spacing: 0; }
#balance-parts dd:not(:has(.money)) { color: var(--text-3); font-size: 14px; font-weight: 400; line-height: 20px; }
#balance-parts dt:nth-of-type(n+2), #balance-parts dd:nth-of-type(n+2) { border-left: 1px solid var(--line-soft); }

/* The ledger: the card head, the toolbar of the type and time chips with
   清除筛选 and the refresh, the table (time, type, signed amount, balance
   after, task) and its footer. Amounts and balances are right-aligned and
   tabular; a credit is green. */
.balance-ledger-head { padding-bottom: 12px; }
.balance-toolbar { border-top: 1px solid var(--line-soft); }
.balance-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.balance-clear { margin-left: 4px; }
.balance-table-scroll { overflow-x: auto; }
.balance-table { table-layout: fixed; }
.balance-table th.c-time { width: 128px; }
.balance-table th.c-kind { width: 112px; }
.balance-table th.c-amount { width: 152px; }
.balance-table th.c-after { width: 152px; }
.balance-table td { height: 48px; }
.balance-table td.c-time { color: var(--text-2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.balance-table td.c-kind { font-weight: 500; white-space: nowrap; }
.balance-table td.c-amount, .balance-table td.c-after { overflow-wrap: anywhere; white-space: normal; }
.balance-table td.c-amount { font-weight: 500; }
.balance-table td.c-amount.is-credit { color: var(--success-fg); }
.balance-table td.c-after { color: var(--text-2); }
.balance-table td.c-task { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-task-link { position: relative; color: var(--violet-600); text-decoration: none; }
.balance-task-link:hover { color: var(--violet-700); text-decoration: underline; }
.balance-table tr.balance-empty-row td { height: auto; padding: 0; }
.table tbody tr.balance-empty-row:hover { background: transparent; }
.balance-empty { padding: 40px 16px; }
.balance-skel-tr td { height: 48px; }
.table tbody tr.balance-skel-tr:hover { background: transparent; }
.balance-skel-time { width: 88px; }
.balance-skel-kind { width: 56px; }
.balance-skel-money { width: 72px; margin-left: auto; }
.balance-skel-task { width: 120px; }
.balance-pagination { gap: 12px; }
.balance-range { color: var(--text-2); font-variant-numeric: tabular-nums; }
.balance-pager { margin-left: auto; }

/* 如何充值: the three steps, then the team ID to quote with the payment,
   which wraps at its hyphens instead of being cut, and its copy button. */
.balance-panel { display: flex; flex-direction: column; min-width: 0; }
.balance-panel h2 { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.balance .balance-top-up { padding: 20px; }
.balance-panel-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.balance-panel-head p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
.balance-steps { display: flex; flex-direction: column; margin: 0 0 16px; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.balance-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-1); font-size: 14px; line-height: 22px; }
.balance-step-no { display: inline-grid; flex-shrink: 0; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gray-100); color: var(--text-2); font: 500 12px/16px var(--font-sans); }
.balance-team-label { margin: 0 0 6px; color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.balance-team { display: flex; align-items: center; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--gray-25); }
#balance-team-box { min-width: 0; color: var(--text-1); font: 400 13px/20px var(--font-mono); white-space: normal; overflow-wrap: anywhere; user-select: all; }
.balance-team-copy { align-self: flex-start; margin-top: 12px; }
.balance-team-status { margin: 8px 0 0; color: var(--success-fg); font-size: 12px; line-height: 16px; }
.balance-team-status:empty { display: none; }

/* Session tools under the page: they serve a page that could not be shown
   (confirm 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 > #balance-refresh, main > #balance-sign-out { margin: 16px 8px 0 0; }
#balance-page:not([hidden]) ~ #balance-refresh, #balance-page:not([hidden]) ~ #balance-sign-out { display: none; }
#balance-status { margin: 8px 0 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
#balance-status:empty { display: none; }

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

/* Below 1180px the side card moves under the ledger. */
@media (max-width: 1179px) {
  .balance-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .balance-table th.c-after, .balance-table td.c-after { display: none; }
}

/* Phones: the terms stack, each a row of label and amount; the toolbar's
   chips and the refresh share the first line; each ledger row becomes a
   two-line block (type and amount, then time and task). */
@media (max-width: 767px) {
  .billing-tabs { margin-bottom: 0; }
  .balance-net { padding: 16px; }
  #balance-net { --amount-size: 32px; }
  #balance-parts { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  #balance-parts dt { padding: 12px 16px 0; }
  #balance-parts dd { --amount-size: 24px; padding: 4px 16px 12px; }
  #balance-parts dt:nth-of-type(n+2), #balance-parts dd:nth-of-type(n+2) { border-left: 0; }
  #balance-parts dt:nth-of-type(n+2) { border-top: 1px solid var(--line-soft); }
  .balance .balance-top-up { padding: 16px; }
  .balance-ledger-head { padding: 16px 16px 12px; }
  .balance-team-copy { align-self: stretch; height: 44px; }
  .balance-table, .balance-table tbody { display: block; width: 100%; }
  .balance-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .balance-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind amount" "time task"; align-items: center; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .balance-table tbody tr:last-child { border-bottom: 0; }
  .balance-table td, .balance-table tr > :first-child, .balance-table tr > :last-child { display: block; height: auto; min-width: 0; padding: 0; border: 0; }
  .balance-table td.c-kind { grid-area: kind; }
  .balance-table td.c-amount { grid-area: amount; text-align: right; }
  .balance-table td.c-time { grid-area: time; }
  .balance-table td.c-task { grid-area: task; overflow: visible; text-align: right; font-size: 13px; }
  /* The task link is the row's one target: 44px tall, as the overview's
     phone links are (its shortened ID needs no ellipsis). */
  .balance-task-link { display: inline-block; }
  .balance-task-link::before { content: ""; position: absolute; inset: -12px -4px; }
  .balance-table td.c-after { display: none; }
  .balance-table tr.balance-empty-row, .balance-table tr.balance-skel-tr { display: block; }
  .balance-table tr.balance-empty-row td { display: block; }
  .balance-table tr.balance-skel-tr td { display: block; padding: 4px 0; }
  .balance-pager { width: 100%; }
  .balance-pager > #balance-next { margin-left: auto; }
}