/* Billing pages (billing/index.html, invoice.html, profile.html): the one-row overdue alert, the fee-accrued hero
   with its period bar straight under the sub-line, the 2×2 tiles beside it (four plain KPIs of one shape), the
   invoices' one action per row, the statement's chips with counts, picture tiles, scroll box and totals foot.
   Everything else is app.css (panels, tables, chips, buttons). Night first; every colour is a token, so the light
   theme follows. */

/* the overdue alert: one slim row, glyph | title + code + amount, the plain line beneath | the Pay button at the far right */
.bill-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 18px; border-radius: 14px; background: var(--bad-bg); border: 1px solid color-mix(in oklab, var(--bad) 28%, transparent); color: var(--ink); font-size: 13px; line-height: 1.45; }
.bill-alert__glyph { font: 600 13px/1 var(--mono); color: var(--bad); }
.bill-alert__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bill-alert__body strong { font-weight: 600; }
.bill-alert__code { font: 600 11.5px/1 var(--mono); color: var(--bad); }
.bill-alert__text { color: var(--ink-2); }
.bill-alert__cta { height: 32px; padding: 0 14px; white-space: nowrap; }
.page > .bill-alert + .banner { margin-top: 10px; }

.bill-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.bill-hero { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.bill-hero__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.bill-hero__head .pill { margin-left: auto; }
.bill-hero__value { font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-hero__sub { font-size: 13px; color: var(--ink-3); }
.bill-hero__bar { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.bill-bar { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; display: flex; }
.bill-bar__fill { display: block; height: 100%; background: var(--btn); border-radius: 3px; }
.bill-hero__scale { display: flex; justify-content: space-between; gap: 12px; font: 11.5px/1 var(--mono); color: var(--ink-3); }

/* the tiles: label, number, a plain sans line beneath that may wrap */
.bill-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bill-tiles .kpi { min-height: 0; padding: 16px 18px; row-gap: 6px; grid-template-rows: auto auto 1fr; }
.bill-tiles .kpi__value { align-self: start; font-size: 22px; letter-spacing: -.02em; }
.bill-tiles .kpi__label { font-size: 12.5px; }
.bill-tiles .kpi__note { font: 11.5px/16px var(--sans); color: var(--ink-3); white-space: normal; overflow: visible; text-overflow: clip; }

/* the statement: the count right after the title, the marketplace chips (logo, name, count) and Export CSV at the
   end; the rows scroll inside the panel under a still head, one 38 px line a row whatever the marketplace (every
   cell centred on it), the totals at the foot */
.bill-statement__head { gap: 8px; }
.bill-count { font: 11.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.bill-tools { gap: 6px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.bill-chips { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bill-chips::-webkit-scrollbar { display: none; }
.bill-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.bill-chip:hover { color: var(--ink); text-decoration: none; }
.bill-chip.is-active { background: var(--panel-2); color: var(--ink); border-color: var(--line-2); }
.bill-chip .mlogo { width: 16px; height: 16px; border-radius: 4px; display: block; }
.bill-chip__n { font: 11px/1 var(--mono); color: var(--ink-3); }
.bill-chip.is-active .bill-chip__n { color: var(--accent); }
.bill-tools .btn--primary { flex: none; height: 30px; font-size: 12.5px; padding: 0 12px; border-radius: 9px; gap: 6px; }
.bill-statement .panel__scroll { max-height: 520px; overflow: auto; }
.bill-statement .table { min-width: 860px; }
.bill-statement .bill-bot { font: 12px/20px var(--mono); color: var(--ink-3); }
.bill-statement .table td { height: 38px; padding-top: 0; padding-bottom: 0; vertical-align: middle; line-height: 20px; white-space: nowrap; box-sizing: border-box; }
.bill-statement .table td .mchip { vertical-align: middle; }
.bill-order { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.bill-order .pill { margin: 0; }
.bill-invoices .table { min-width: 640px; }
.bill-invoices .table td { padding-top: 12px; padding-bottom: 12px; }
.bill-invoices .table td.bill-cta { padding-top: 8px; padding-bottom: 8px; }
.bill-when { font: 12px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.bill-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; vertical-align: middle; color: var(--ink-2); }
/* the item's picture as a 22 px tile with the game's icon at its corner; a striped tile when none is saved */
.bill-pic { position: relative; flex: none; width: 22px; height: 22px; }
.bill-pic__img { display: block; width: 22px; height: 22px; border-radius: 6px; object-fit: cover; background: var(--panel-2); border: 1px solid var(--line-2); box-sizing: border-box; }
.bill-pic__none { display: block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-2); box-sizing: border-box; background: repeating-linear-gradient(135deg, var(--line-2) 0 2px, var(--panel-2) 2px 5px); }
.bill-pic__game { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--panel); background: var(--panel); }
.bill-item .iname__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-qty { font: 12px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.bill-num { text-align: right; font: 12.5px/1 var(--mono); white-space: nowrap; }
.bill-cur { margin-right: 6px; font-size: 11.5px; color: var(--ink-3); }
.bill-num--fee { font-weight: 500; color: var(--accent); }
.bill-num--total { font-weight: 500; font-size: 13px; }
.table th.bill-num { text-align: right; font: 500 12.5px/1.2 var(--sans); color: var(--ink-3); }
.bill-foot { display: flex; justify-content: flex-end; gap: 24px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); font: 13px/1 var(--mono); }
.bill-foot__label { color: var(--ink-3); }
.bill-foot__fee { font-weight: 600; color: var(--accent); }
.bill-due--bad { color: var(--bad); font-weight: 500; }
.bill-ref { font: 600 12.5px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.bill-ref .pill { margin-left: 6px; }
.bill-cta { text-align: right; white-space: nowrap; }
.bill-cta .inline-form { display: inline-block; }
.bill-cta > * { vertical-align: middle; }
/* the second Stripe link of a row (the PDF beside Pay now, the Stripe page beside Download PDF): a quiet icon */
.bill-alt { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; border-radius: 8px; color: var(--ink-3); }
.bill-alt:hover { color: var(--ink); background: var(--stripe); text-decoration: none; }
/* the invoice page's summary: every cell in one even strip; a narrow screen wraps them into full rows */
.bill-sum .sstrip { display: flex; flex-wrap: wrap; }
.bill-sum .sstrip__cell { flex: 1 1 104px; }
.bill-sub strong { font-weight: 600; color: var(--ink-2); }
.bill-sub .mono { font-size: 12px; }
.bill-swipe { display: none; font: 11px/1 var(--mono); color: var(--ink-3); }
.bill-lines .table { min-width: 460px; }
.bill-profile { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 12px; align-items: start; }
.bill-profile .form { gap: 10px; }
.bill-profile .panel__body + .panel__head { border-top: 1px solid var(--line); }
.bill-profile .kv { gap: 8px 14px; }
.bill-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.bill-note ul { margin: 6px 0 0; padding-left: 18px; }
.bill-note li + li { margin-top: 3px; }
@media (max-width: 1100px) { .bill-top { grid-template-columns: minmax(0, 1fr); } .bill-profile { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .bill-alert { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .bill-alert__cta { grid-column: 2; justify-self: start; }
  .bill-hero { padding: 16px; } .bill-hero__value { font-size: 30px; }
  .bill-tiles { gap: 10px; } .bill-tiles .kpi { padding: 12px 14px; } .bill-tiles .kpi__value { font-size: 18px; }
  .bill-hero__dates { display: none; }
  .bill-invoices .panel__head { flex-wrap: wrap; }
  /* the statement's head: the title and count, then the chips (logo and count only) and Export CSV on one line */
  .bill-statement__head { flex-wrap: wrap; }
  .bill-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .bill-chip { padding: 0 8px; }
  .bill-chip__name { display: none; }
  /* a table wider than the phone: the right edge fades out and the head says it swipes */
  .bill-scrollx { position: relative; }
  .bill-scrollx::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--panel)); }
  .bill-swipe { display: inline; }
  /* the statement on a phone: no sideways scroll; each order is two lines, the item and its fee, then the
     marketplace logo, the order, the time and the delivered value */
  .bill-statement .table { min-width: 0; }
  .bill-statement thead { display: none; }
  .bill-statement tbody tr:not(.table__empty) { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "item item item item fee" "mk order when . value"; align-items: center; column-gap: 10px; row-gap: 4px; padding: 9px 16px; border-bottom: 1px dashed var(--line-2); }
  .panel.bill-statement tbody tr:not(.table__empty) td { display: block; height: auto; padding: 0; border: 0; line-height: 20px; min-width: 0; }
  .bill-statement tbody td:nth-child(1) { grid-area: when; }
  .bill-statement tbody td:nth-child(2) { grid-area: order; }
  .bill-statement tbody td:nth-child(3) { grid-area: mk; }
  .bill-statement tbody td:nth-child(4) { grid-area: item; overflow: hidden; }
  .bill-statement tbody td:nth-child(5) { grid-area: value; color: var(--ink-2); }
  .bill-statement tbody td:nth-child(6) { grid-area: fee; }
  .bill-statement tbody td:nth-child(7), .bill-statement tbody td:nth-child(8) { display: none !important; }
  .bill-statement .table td .mchip span { display: none; }
  .bill-statement .table td .mchip .mlogo { display: block; }
  .bill-statement .bill-when, .bill-statement td:nth-child(5) { font-size: 11.5px; }
}