/* ══════════════════════════════════════════════════════════════════════════════
   ROUND 36 — PLAN & BILLING (P1503–P1510, rules 191–193)

   One page, two hosts: Settings › You › Plan & billing (dashboard/app.html) and /account
   (account/index.html). Both load this after phone.css, so the cards are the Round 35 kit —
   `pk-surface` with the kicker inside (`pk-section`), `pk-row` rows, `pk-verb` verbs — and only
   what the kit has no shape for lives here, under `pb-`. Tokens only: no colour literal
   (test/round36-plan-billing.test.mjs holds that).
   ══════════════════════════════════════════════════════════════════════════════ */

/* The measure: 660 centred (BillingPageView on the Settings stage). The hosts give the side padding. */
.pb-host{display:block;width:100%;max-width:var(--size-form-column);margin-inline:auto;container-type:inline-size;container-name:content}
.pb-ledger,.billing-ledger{display:flex;flex-direction:column;gap:var(--space-xl)}
.pb-ledger[hidden],.pb-picker[hidden],.pb-card[hidden]{display:none}
.pb-loading{padding:var(--space-xl) 0;font-size:var(--text-subhead);color:var(--c-text-secondary)}
.pb-card{display:flex;flex-direction:column;gap:var(--space-md);min-width:0}
.pb-card .pk-section{margin:0}

/* Words */
.pb-tone--secondary{color:var(--c-text-secondary)}
.pb-note{margin:0;font-size:var(--text-footnote);line-height:1.45;color:var(--c-text-secondary)}
.pb-row__title{font-size:var(--text-headline);font-weight:600;line-height:1.3;color:var(--c-text-primary)}
.pb-row__sub{font-size:var(--text-footnote);color:var(--c-text-secondary)}

/* PLAN: the tier at 22/700 on the left, the server's word in its tone on the right, the sentence once. */
.pb-plan__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);min-width:0}
.pb-plan__tier{font-size:var(--text-title2);font-weight:700;line-height:1.2;color:var(--c-text-primary);overflow-wrap:anywhere}
.pb-plan__word{flex:none;font-size:var(--text-subhead);font-weight:700}
.pb-plan__sentence{margin:0;font-size:var(--text-subhead);line-height:1.45;color:var(--c-text-primary)}
.pb-plan__test{margin:0;font-size:var(--text-footnote);font-weight:600}
.pb-banner{margin:0 0 var(--space-xs);font-size:var(--text-footnote);line-height:1.45;color:var(--c-text-secondary)}
.pb-move{align-self:flex-start}
#bl-guided:empty,#bl-notice:empty,#bl-billing-notices:empty{display:none}
.pb-dunning{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm)}

/* The guided strip (GuidedSteps): title, the step bar, the step's one button */
.pb-guided{display:flex;flex-direction:column;gap:var(--space-sm-md);padding-top:var(--space-md);border-top:var(--pk-hairline,1px) solid var(--c-separator)}
.pb-guided__title{font-size:var(--text-subhead);font-weight:600;color:var(--c-text-primary)}
.pb-guided__steps{position:static;padding:0;background:none}
.pb-guided__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm)}
.pb-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.pb-link{min-height:var(--size-touch-min);padding:0;border:0;background:none;color:var(--c-brand-primary);font:inherit;font-size:var(--text-footnote);font-weight:600;cursor:pointer}

/* Billing notices (P1509): a line inside PLAN, only when there is one */
.pb-billnotice{display:flex;flex-direction:column;gap:var(--space-xs);padding-top:var(--space-sm);border-top:var(--pk-hairline,1px) solid var(--c-separator)}
.pb-billnotice__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.pb-billnotice__body{margin:0;white-space:pre-wrap;font-size:var(--text-footnote);line-height:1.55;color:var(--c-text-secondary)}
.pb-inline-verb{min-height:var(--size-touch-min);padding:0 var(--space-md)}

/* SEATS */
.pb-seats__headline{font-size:var(--text-headline);font-weight:600;color:var(--c-text-primary)}
.pb-chips{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;padding:0;list-style:none}
.pb-chip{display:inline-flex;align-items:baseline;gap:var(--space-xs);max-width:100%;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--c-brand-tint);font-size:var(--text-caption);white-space:nowrap}
.pb-chip__name{overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--c-text-primary)}
.pb-chip__word{color:var(--c-text-secondary)}
.pb-stepper{display:flex;align-items:center;gap:var(--space-md);min-height:52px;padding-top:var(--space-sm);border-top:var(--pk-hairline,1px) solid var(--c-separator)}
.pb-stepper__copy{flex:1;min-width:0;display:flex;flex-direction:column}
.pb-stepper__value{min-width:2ch;text-align:center;font-size:var(--text-headline);font-weight:700;font-variant-numeric:tabular-nums}
.pb-step{display:grid;place-items:center;width:var(--size-touch-min);height:var(--size-touch-min);padding:0;border:var(--pk-hairline,1px) solid var(--c-card-border);border-radius:50%;background:var(--c-card-background);color:var(--c-brand-primary);font:inherit;font-size:var(--text-title3);line-height:1;cursor:pointer}

/* PLAN & PAYMENT */
.pb-rows{display:flex;flex-direction:column}
.pb-rows>.pk-row:last-child,.pb-rows>.pb-promo:last-child{border-bottom:0}
.pb-row--static{cursor:default}
.pb-promo{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-sm) 0}
.pb-promo__field{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.pb-input{flex:1;min-width:0;min-height:var(--size-touch-min);padding:0 var(--space-md);border:var(--pk-hairline,1px) solid var(--c-input-border);border-radius:var(--radius-md);background:var(--c-card-background);color:var(--c-text-primary);font:inherit;font-size:var(--text-callout)}

/* INVOICES: stacked rows, never a sideways scroll (rule 165) */
.pb-invoices{display:flex;flex-direction:column}
.pb-invoice{display:flex;align-items:center;gap:var(--space-md);min-height:52px;padding:var(--space-sm) 0;border-bottom:var(--pk-hairline,1px) solid var(--c-separator)}
.pb-invoice__figures{flex:none;display:flex;flex-direction:column;align-items:flex-end}
.pb-invoice__amount{font-size:var(--text-subhead);font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-text-primary)}
.pb-invoice__status{font-size:var(--text-caption);font-weight:600;text-transform:capitalize}
.pb-invoice__pdf{flex:none;display:inline-flex;align-items:center;min-height:var(--size-touch-min);font-size:var(--text-caption);font-weight:600;color:var(--c-brand-primary);text-decoration:none}
[data-invoice-all-body]{display:flex;flex-direction:column;gap:var(--space-sm)}
[data-invoice-all-body][hidden]{display:none}

/* ACCOUNT: Cancel plan, danger */
.pb-cancel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xxs)}
.pb-danger{min-height:var(--size-touch-min);padding:0;border:0;background:none;color:var(--c-danger);font:inherit;font-size:var(--text-headline);font-weight:600;cursor:pointer}

/* The link-out's confirm panel */
.pb-confirm__title{margin:0;font-size:var(--text-title3);font-weight:700;color:var(--c-text-primary)}
.pb-confirm__done{margin:0;font-size:var(--text-subhead);font-weight:600;color:var(--c-text-primary)}

/* The plan picker: a pushed sub-view over the page */
.pb-picker{display:flex;flex-direction:column;gap:var(--space-md)}
.pb-back{align-self:flex-start;min-height:var(--size-touch-min);padding:0;border:0;background:none;color:var(--c-brand-primary);font:inherit;font-size:var(--text-subhead);font-weight:600;cursor:pointer}
.pb-picker__title{margin:0;font-size:var(--text-title2);font-weight:700;color:var(--c-text-primary)}
.pb-picker__grid{min-width:0}
.pb-picker .pricing-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.account-plan-terms{font-size:var(--text-footnote);color:var(--c-text-secondary)}
.account-plan-terms summary{min-height:var(--size-touch-min);padding-block:var(--space-sm);cursor:pointer;color:var(--c-text-primary)}
.account-plan-terms p{margin-block:var(--space-sm)}
.pb-picker .pricing-card--picked{border-color:var(--c-brand-primary);box-shadow:inset 0 0 0 1px var(--c-brand-primary)}

/* The support line, selectable */
.pb-help{margin:0;font-size:var(--text-footnote);color:var(--c-text-secondary);user-select:text}
.pb-help a{color:inherit;font-weight:600}

/* Phone and touch: 44 targets, 16px fields (Round 35 §2.6) */
@container content (max-width:480px){
  .pb-plan__tier{font-size:var(--text-title3)}
  .pb-picker .pricing-grid{grid-template-columns:1fr}
}