/**
 * account.css — the Account page.
 *
 * WHY THIS FILE EXISTS
 *
 * The Account tab in the client app used to open /engines.html — the old navy
 * "Your Engines" directory. A person icon that lands on a list of engines is
 * not an account page, so there was nothing here to style.
 *
 * This is the smallest possible layer on top of app.css. Every token, every
 * colour, every curve is app.css's; nothing is redefined. All this file adds
 * is the stacked-panel layout the account page needs and the allowance meter,
 * which nothing else in the product draws.
 *
 * No emoji. Icons are inline SVG, one weight, one size — app.js's ICON set.
 */

/* ------------------------------------------------------------------ *
 * Page
 * ------------------------------------------------------------------ */

.acct {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) calc(var(--tap) + var(--s8));
  display: grid;
  gap: var(--s5);
}

/* A panel arrives once, on enter, on the house curve. Same rise and stagger
   as the week's cards so the two pages feel like one product. */
.panel {
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(var(--rise));
  transition:
    opacity   var(--t3) var(--ease) calc(var(--i, 0) * var(--stagger)),
    transform var(--t3) var(--ease) calc(var(--i, 0) * var(--stagger));
}

.panel.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .panel { opacity: 1; transform: none; transition: none; }
}

.panel > .eyebrow { color: var(--ink-3); }

.panel h2 {
  font-size: clamp(19px, 3.6vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: var(--s2) 0 0;
}

.panel .body { margin-top: var(--s3); color: var(--ink-2); }

/* ------------------------------------------------------------------ *
 * Rows — label on the left, value on the right, a hairline between
 * ------------------------------------------------------------------ */

.rows { margin-top: var(--s4); }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
}

.row:first-child { border-top: 0; padding-top: 0; }

.row .k {
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: .01em;
  flex: 0 0 auto;
}

.row .v {
  color: var(--ink);
  font-weight: 560;
  text-align: right;
  overflow-wrap: anywhere;
}

.row .v.dim { color: var(--ink-2); font-weight: 400; }

/* ------------------------------------------------------------------ *
 * The allowance meter
 *
 * Deliberately not a percentage and not a gauge. It answers one question —
 * how much of this month is left — and says the real numbers underneath.
 * ------------------------------------------------------------------ */

.meter { margin-top: var(--s4); }
.meter + .meter { margin-top: var(--s5); }

.meter .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.meter .top .k { color: var(--ink-2); font-size: 14px; }
.meter .top .n { font-weight: 620; font-variant-numeric: tabular-nums; }

.meter .bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  overflow: hidden;
}

.meter .bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--t3) var(--ease);
}

.meter.full .bar i { background: var(--stop); }
.meter.near .bar i { background: var(--warn); }

/* Nothing to meter — an uncapped account. The bar would be a lie. */
.meter.open .bar { display: none; }

/* ------------------------------------------------------------------ *
 * Where you post
 * ------------------------------------------------------------------ */

.nets { margin-top: var(--s4); display: grid; gap: 2px; }

.netline {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
}

.netline:first-child { border-top: 0; }

.netline .ic {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--net, var(--ink-2));
}

.netline .ic svg { display: block; }

.netline .txt { min-width: 0; flex: 1 1 auto; }
.netline .txt b { display: block; font-weight: 560; font-size: 15px; }
.netline .txt span {
  display: block;
  color: var(--ink-3);
  font-size: 13px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.netline .dot { flex: 0 0 auto; }

/* ------------------------------------------------------------------ *
 * Badge — the plan name, and nothing else earns one
 * ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 640;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The upgrade panel leans on the accent without shouting. */
.panel.lift {
  background: var(--accent-soft);
  border-color: transparent;
}

.panel.lift .body { color: var(--ink-2); }

/* ------------------------------------------------------------------ *
 * Foot — sign out lives alone, away from anything destructive-looking
 * ------------------------------------------------------------------ */

.acct-foot {
  display: flex;
  justify-content: center;
  padding-top: var(--s2);
}

.acct-foot .btn { min-width: 200px; justify-content: center; }

.fineprint {
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Give someone a login */
.invite-form, .invite-out { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 640px) {
  .invite-form { grid-template-columns: 1fr 1.3fr auto; align-items: center; }
  .invite-out { grid-template-columns: 1fr auto; align-items: center; }
  .invite-form .btn, .invite-out .btn { width: auto; }
}
.invite-out .field { font-size: 13.5px; }