/**
 * The account front door.
 *
 * Thin on purpose: it points at the screens that do the work rather than
 * repeating them, so most of this is spacing and one card.
 */

.gms-acct { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }

.gms-acct__head { margin-bottom: 20px; }

.gms-acct__hi {
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--gms-ink, #14161a);
}

.gms-acct__sub { margin: 0; font-size: .875rem; color: var(--gms-ink-2, #57524a); }

/* ---- The latest order ------------------------------------------------------ */

.gms-acct__latest {
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid var(--gms-line, #e6e2dc);
  border-radius: var(--gms-r-lg, 16px);
  background: var(--gms-surface, #fff);
}

.gms-acct__latest-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.gms-acct__eyebrow {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gms-ink-2, #57524a);
}

.gms-acct__state {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gms-tint, rgba(0, 0, 0, .05));
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gms-ink-2, #57524a);
}

.gms-acct__state--delivered { background: #dcfce7; color: #14532d; }
.gms-acct__state--cancelled,
.gms-acct__state--failed { background: #fee2e2; color: #7f1d1d; }

.gms-acct__num {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--gms-ink, #14161a);
}

.gms-acct__num:hover { text-decoration: underline; }

.gms-acct__meta,
.gms-acct__awb {
  margin: 4px 0 0;
  font-size: .8125rem;
  color: var(--gms-ink-2, #57524a);
}

.gms-acct__awb { font-variant-numeric: tabular-nums; }

/* ---- Where everything else is ----------------------------------------------- */

.gms-acct__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.gms-acct__tile {
  display: grid;
  gap: 3px;
  padding: 18px;
  border: 1px solid var(--gms-line, #e6e2dc);
  border-radius: var(--gms-r-lg, 16px);
  background: var(--gms-surface, #fff);
  text-decoration: none;
  color: var(--gms-ink, #14161a);
  transition: border-color .15s ease, transform .15s ease;
}

.gms-acct__tile:hover {
  border-color: var(--gms-accent, #2563eb);
  transform: translateY(-1px);
}

.gms-acct__tile-ico { display: block; margin-bottom: 6px; color: var(--gms-accent, #2563eb); }
.gms-acct__tile-ico svg { width: 22px; height: 22px; }

.gms-acct__tile strong { font-size: .9375rem; font-weight: 650; }
.gms-acct__tile em { font-style: normal; font-size: .75rem; color: var(--gms-ink-2, #57524a); }

.gms-acct__out { margin: 24px 0 0; font-size: .875rem; }
.gms-acct__out a { color: var(--gms-ink-2, #57524a); }

.gms-acct--out { max-width: 460px; padding: 40px 0; text-align: center; }