/* Shared account panels and Activity's credit summary. GPU-hour credits and
   Model API points remain separate ledgers; the daily model cap belongs beside
   its usage table. The balance, explanation, and action form one compact row. */
.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.balance-card {
  display: grid;
  grid-template-columns: minmax(160px, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  min-width: 0;
  padding: var(--panel-padding);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.balance-amount { display: grid; gap: var(--space-2); min-width: 0; }
.balance-card > .btn { justify-self: end; }

.balance-label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.balance-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  overflow-wrap: anywhere;
}

.balance-help {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  max-width: 54ch;
}

.balance-meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

.budget-bar {
  width: 100%;
  height: 6px;
  margin-top: var(--space-2);
  background: var(--surface-inset);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.budget-fill {
  display: block;
  height: 100%;
  background: var(--graph);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.panel {
  margin-bottom: var(--space-6);
  min-width: 0;
  padding: var(--panel-padding);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.panel-title {
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}

.panel-note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-subtle);
  line-height: var(--leading-normal);
}

/* ---- daily model cap ----------------------------------------------------
   A ceiling on the table below it, not a balance. It sits INSIDE the panel,
   under the heading, on the inset surface — so it reads as a property of this
   table rather than as something you own. As a balance card it said "you have
   $8.72 left", which was wrong twice: not dollars, and not a separate wallet. */
.panel-cap {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--surface-inset);
  border: 1px solid var(--border-muted);
}

.panel-cap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.panel-cap-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel-cap-value {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* The bar carries no top margin here — .panel-cap-head owns the gap. Inherited
   from .budget-bar's balance-card context, it would double up. */
.panel-cap .budget-bar { margin-top: 0; }

/* ---- SSH key list -------------------------------------------------------
   GitHub's /settings/keys structure — titled rows, fingerprint, dates, delete
   per row — in this product's language: squared, hairline-separated, mono for
   the machine facts. Rows are separated by rules rather than boxed as cards:
   these are entries in a register, and a stack of bordered cards would give
   each key more presence than a key deserves. */
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* .panel-title carries a bottom margin for the standalone case; inside the
   head the flex gap owns spacing, and .panel-note's -8px top would fight it. */
.panel-head .panel-title { margin-bottom: var(--space-1); }
.panel-head .panel-note { margin: 0; }
.panel-head > div { min-width: 0; }
.panel-head > .btn { flex-shrink: 0; }

/* The wider column belongs to SSH keys and their readable fingerprints. */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  align-items: start;
  gap: var(--space-5);
}
.settings-layout > .panel { margin-bottom: 0; }
.settings-layout .empty-state { margin-top: var(--space-5); padding: var(--space-6) var(--space-4); }

.key-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.key-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.key-main { min-width: 0; }

.key-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}

/* Mono, and allowed to wrap: a SHA256 fingerprint is 50 characters and would
   otherwise force the row to scroll on a phone. anywhere, not break-all, so it
   breaks at the end of the line rather than mid-token when it fits. */
.key-fingerprint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.key-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* The algorithm reads as a type tag, not prose — it is the one fact in the row
   with a fixed vocabulary (ED25519 / RSA / ECDSA). */
.key-type {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  color: var(--text-subtle);
}

/* Stops the delete button stretching to the row's full height under
   align-items: flex-start. */
.key-row .btn { flex: 0 0 auto; }

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: 0; }
.setting-label { min-width: 0; font-size: var(--text-sm); color: var(--text); overflow-wrap: anywhere; }
.setting-row > :last-child { flex-shrink: 0; }

/* RADEON-INTERNAL-RECONCILED
   A row whose control is a link rather than a widget. Sized and coloured like the
   muted metadata elsewhere on the panel, not like the accent: the rows above it
   change a setting in place, this one leaves the page, and it should not be the
   brightest thing here. The underline only on hover keeps the resting row quiet
   while still being unmistakably a link once reached. */
.setting-action {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
}
.setting-action:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 1000px) {
  .settings-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .balance-card { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); }
  .balance-help { grid-column: 1 / -1; grid-row: 2; }
  .balance-card > .btn { grid-column: 2; grid-row: 1; }
  .panel-cap { padding: var(--space-3); }
  .panel-cap-value { overflow-wrap: anywhere; }
  .setting-row { flex-wrap: wrap; gap: var(--space-3); }
  .setting-row > :last-child { max-width: 100%; }
  .key-row { flex-wrap: wrap; gap: var(--space-3); }
}