/* ==========================================================================
   Mine Customer
   --------------------------------------------------------------------------
   Layered on mine.css. Same tokens, fewer of them: the customer surface is
   calmer and more commercial than the operator console - larger type, more
   air, no dense operator tables.
   ========================================================================== */

:root {
  --page-max: 1120px;
}

/* == Shell ================================================================ */

.app-bar--customer { min-height: 64px; }
.app-bar--customer .app-bar__brand { font-size: var(--t-md); }
.app-bar--customer .app-nav { flex: 0 1 auto; }

.customer-page { padding-top: var(--s-8); }

/* == Authentication and single-purpose panels ============================= */

.customer-auth {
  max-width: 460px;
  margin: var(--s-9) auto;
  padding: var(--s-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.customer-auth h1 { margin-bottom: var(--s-3); font-size: var(--t-xl); }
.customer-auth > p { color: var(--ink-secondary); font-size: var(--t-sm); }
.customer-auth form { margin-top: var(--s-6); }
.customer-auth button[type="submit"],
.customer-auth form > button { width: 100%; min-height: 40px; }
.customer-auth__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--t-sm);
}
.customer-auth__foot a { font-weight: 500; }

.panel {
  max-width: 620px;
  margin: var(--s-8) auto;
  padding: var(--s-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.panel h1 { margin-bottom: var(--s-3); font-size: var(--t-xl); }
.panel p { color: var(--ink-secondary); }
.panel .actions { margin-top: var(--s-6); }

/* == Organization cards =================================================== */

.customer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.customer-cards > * { min-width: 0; }

.org-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.org-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; }
.org-card__mark {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  margin-bottom: var(--s-1);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  color: var(--accent-ink);
}
.org-card h2 { font-size: var(--t-md); }
.org-card p { margin: 0; color: var(--ink-secondary); font-size: var(--t-sm); }

/* == Credits ============================================================== */

.credit-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}
.credit-balance {
  display: block;
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.credit-balance + small,
.credit-summary small { display: block; margin-top: var(--s-1); color: var(--ink-secondary); font-size: var(--t-sm); }

.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); }
.package-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.package-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-sm); }
.package-card h3 { font-size: var(--t-base); color: var(--ink-secondary); font-weight: 500; }
.package-card__amount { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.package-card button { margin-top: auto; }
.package-card small { color: var(--ink-muted); font-size: var(--t-xs); }
.package-card .commerce-credit-title { font-size: var(--t-xl); color: var(--ink); font-weight: 600; }
.commerce-price { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.commerce-price--saving, .commerce-savings { color: var(--ok-ink); }
.commerce-packages { grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); }

/* == Membership =========================================================== */

.membership-grid td { vertical-align: middle; }
.membership-grid select { margin: 0; min-width: 190px; }
.membership-grid .row-actions { flex-wrap: nowrap; }

/* == Profile ============================================================== */

.profile-security { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.profile-security > * { min-width: 0; }

.profile-identity {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.profile-identity__mark {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  color: var(--accent-ink);
  flex: none;
}
.profile-identity__mark .geode-icon { width: 24px; height: 24px; }

/* == Instance status ====================================================== */

.provisioning {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: var(--t-sm);
  color: var(--ink-secondary);
}
.provisioning__state { font-weight: 600; color: var(--ink); }

/* == Responsive =========================================================== */

@media (max-width: 720px) {
  .customer-auth, .panel { margin: var(--s-5) 0; padding: var(--s-5); border-radius: var(--r-lg); }
  .credit-summary { align-items: flex-start; }
  .app-bar--customer .app-nav { order: 3; }
}