/* Account sign-in fields, shared by the Agent and Safe connection steps.
   The Account settings screen uses the same platform layout as Safe. */
/* The username field holds the name and, after it, the account's domain. */
.tp-account-address { display: flex; align-items: center; padding-block: 0; }

.tp-account-address > input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--tp-space-2) 0;
  border: 0;
  background: transparent;
  outline: none;
}

.tp-account-domain { flex: 0 0 auto; color: var(--tp-ink-muted); }

.tp-field:has(input[aria-invalid="true"]) > .tp-account-address { border-color: var(--tp-danger); }

/* The rules a new password follows; each turns green once it is met. */
.tp-account-rules {
  display: grid;
  gap: var(--tp-space-1);
  margin: calc(-1 * var(--tp-space-2)) 0 0;
  padding: 0;
  list-style: none;
  color: var(--tp-ink-muted);
  font-size: var(--tp-text-caption);
}

.tp-account-rules > li { display: flex; align-items: center; gap: var(--tp-space-1-5); }

.tp-account-rules > li > .tp-icon { opacity: .3; }

.tp-account-rules > li[data-met] { color: var(--tp-success); }

.tp-account-rules > li[data-met] > .tp-icon { opacity: 1; }

/* Account keeps the shared settings layout; only billing content is specific. */
.tp-account-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--tp-space-4); }
.tp-account-plan { display:flex; flex-direction:column; gap:var(--tp-space-3); border:1px solid var(--tp-line); border-radius:var(--tp-radius-md); padding:var(--tp-space-4); }
.tp-account-plan > .tp-button { margin-block-start:auto; }
.tp-account-plan[data-unavailable] { opacity:.65; }
.tp-account-price { font-size:var(--tp-text-heading); font-weight:600; }
.tp-account-invoices { padding:0; list-style:none; display:grid; gap:var(--tp-space-3); }
.tp-account-invoices > li { display:flex; flex-wrap:wrap; align-items:center; gap:var(--tp-space-3); }
.tp-account-meter { display:grid; grid-template-columns:1fr auto; gap:var(--tp-space-2); margin-block:var(--tp-space-3); }
.tp-account-progress { grid-column:1/-1; height:8px; display:flex; overflow:hidden; border-radius:4px; background:var(--tp-line); }
.tp-account-progress [data-usage="used"] { background:var(--tp-success); }
.tp-account-progress [data-usage="reserved"] { background:var(--tp-ink-muted); opacity:.5; }
.tp-account-meter[data-exhausted] [data-usage="used"] { background:var(--tp-danger); }
@media(max-width:480px) { .tp-account-meter { grid-template-columns:1fr; } }