/* Matrix account pages (subscription, usage): what tools.css and transfer.css do not cover. */
.gate p { max-width: 640px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; padding: 8px 16px; border-radius: var(--matrix-radius-control); }
.who-line { margin-top: 0; }
.alert.is-warning { background: var(--matrix-warning-background); color: var(--matrix-warning); }
.alert.is-danger { background: var(--matrix-danger-background); color: var(--matrix-danger); }
.alert.is-success { background: var(--matrix-success-background); color: var(--matrix-success); }
/* A line that is not an alert: the outcome of a checkout return (paid, card saved, or nothing charged). */
.notice { margin: var(--matrix-space-12) 0 0; padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); background: var(--matrix-surface-subtle); border: 1px solid var(--matrix-border); }
.notice.is-success { background: var(--matrix-success-background); color: var(--matrix-success); border-color: transparent; }
.card { margin-top: var(--matrix-space-20); padding: var(--matrix-space-16) var(--matrix-space-20); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.card h3 { margin: 0 0 var(--matrix-space-8); }
.card .actions { margin-top: var(--matrix-space-16); }
.limits { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--matrix-space-16); margin: var(--matrix-space-12) 0 0; font-size: var(--matrix-type-control); }
.limits dt { color: var(--matrix-muted); }
.limits dd { margin: 0; }
.prices { list-style: none; margin: var(--matrix-space-12) 0 0; padding: 0; display: grid; gap: var(--matrix-space-8); }
.prices li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--matrix-space-8); }
.prices strong { font-size: 1.125rem; }
.confirm { margin-top: var(--matrix-space-16); padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); background: var(--matrix-warning-background); color: var(--matrix-warning); }
.confirm p { margin: 0; }
.confirm .actions { margin-top: var(--matrix-space-12); }
.status { color: var(--matrix-muted); font-size: var(--matrix-type-control); }
.state { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--matrix-type-caption); background: var(--matrix-surface-subtle); border: 1px solid var(--matrix-border); }
.state.is-active, .state.is-in_trial { background: var(--matrix-success-background); color: var(--matrix-success); }
.state.is-unpaid { background: var(--matrix-warning-background); color: var(--matrix-warning); }
.state.is-cancelled { background: var(--matrix-danger-background); color: var(--matrix-danger); }
.meter { width: 100%; height: 14px; accent-color: var(--matrix-brand); margin-top: var(--matrix-space-12); }
.usage-lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--matrix-space-16); margin: var(--matrix-space-12) 0 0; font-size: var(--matrix-type-control); }
.usage-lines dt { color: var(--matrix-muted); }
.usage-lines dd { margin: 0; }
@media (max-width: 480px) {
  .limits, .usage-lines { grid-template-columns: 1fr; gap: 2px; }
  .limits dd, .usage-lines dd { margin-bottom: var(--matrix-space-8); }
}