/* Account and billing 2.0: settings-page hierarchy (header, in-page sidebar
   nav, ranked panels, skeleton/error states per panel). Layered over
   member.css's existing .account-* rules and account-refinement.css's
   billing/plan-grid/support-drawer styles, which this sheet does not
   duplicate. Every value below is a token from site/member-tokens.css --
   no literal colour, size, radius or duration (design system Section 14). */

/* ---- Header: plan chip + member-since, beside the existing account-email ---- */
.account-heading-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.account-heading-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.account-plan-chip {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-control));
  background: color-mix(in srgb, var(--accent) 8%, var(--well));
}

.account-member-since {
  margin: 0;
  color: var(--muted);
  font: 700 var(--font-size-200)/1.3 var(--font-mono);
  letter-spacing: .04em;
}

/* ---- Layout: sticky in-page sidebar nav (>=1100px) beside the ranked sections ---- */
.account-layout {
  display: block;
}

.account-side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  padding: var(--space-2);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--well) 82%, transparent);
}

.account-side-nav-link {
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--body);
  font: 700 var(--font-size-400)/1.3 var(--font-sans);
  text-decoration: none;
}

.account-side-nav-link:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--well));
  color: var(--accent-text);
}

.account-side-nav-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 46%, transparent);
  outline-offset: 2px;
  color: var(--accent-text);
}

.account-sections {
  display: grid;
  gap: var(--space-7);
  min-width: 0;
}

.account-section {
  scroll-margin-top: calc(60px + var(--space-4));
}

.account-section-heading-title {
  margin: 0 0 var(--space-3);
  color: var(--text);
  font-size: var(--font-size-700);
  letter-spacing: -.03em;
}

/* Shell sidebar also engages at 1100px (site/shell.css). Stacking the
   in-page Account side-nav beside it at that same breakpoint leaves ~800px
   for Membership's three plan cards and clips the Seller card + "Prices are
   monthly" at 1280 laptop width. Wait until 1400px so 1280 keeps a single
   content column with the side-nav above the sections. */
.account-view,
.account-layout,
.account-sections,
.account-billing-main,
.plan-grid {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 1400px) {
  .account-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
  }

  .account-side-nav {
    position: sticky;
    top: calc(60px + var(--space-5));
    margin-bottom: 0;
  }
}

/* ---- Per-panel loading and error states (accountView in site/member.js) ----
   Account mounts several independent reads. One compact neutral status per
   panel avoids a repeated stack of Ash portraits while preserving independent
   success, error and retry paths. Authenticated boot uses the same neutral
   ring; the shell owns its positioning. */
.account-view .loading-surface {
  /* Account mounts several independent panels. Keep their transient state
     compact so the settings route does not become a stack of empty screens. */
  min-height: 96px;
  max-width:none;
  margin:0;
  padding:var(--space-4);
  justify-content: center;
  text-align: center;
  border:0;
  box-shadow:none;
  background:transparent;
}

@media(max-width:1399px) { .account-side-nav { flex-direction:row; flex-wrap:wrap; } }


/* ---- Per-panel error state (accountPanelError in site/member.js) ---- */
.account-panel-error h3 { margin: 3px 0 6px; font-size: var(--font-size-600); }
.account-panel-error p { margin: 0 0 var(--space-3); color: var(--body); }

/* ---- Membership: what-the-plan-includes list, folded into account-summary-copy ---- */
.account-plan-features {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--border) 88%, transparent);
  list-style: none;
}

.account-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--body);
  font-size: var(--font-size-300);
  line-height: var(--leading-snug);
}

.account-plan-features li::before {
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--accent) 10%, var(--well));
  color: var(--accent-text);
  content: '\2713';
  font-size: var(--font-size-100);
  font-weight: 800;
}

/* ---- Security: risk-acknowledgement history ---- */
.account-ack-list { margin-top: var(--space-5); }

.account-ack-table {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-size: var(--font-size-300);
}

.account-ack-table th,
.account-ack-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline) solid var(--border);
  text-align: left;
}

.account-ack-table th {
  color: var(--muted);
  font: 700 var(--font-size-100)/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.account-ack-table td:last-child,
.account-ack-table th:last-child { color: var(--body2); }

.ps-empty--quiet { min-height: 0; padding: var(--space-5); }

/* ---- Data: export / import / close-account rows ---- */
.account-data-actions {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.account-data-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--well) 82%, transparent);
}

.account-data-action h4 {
  margin: 0 0 var(--space-1);
  color: var(--text);
  font-size: var(--font-size-400);
}

.account-data-action p { margin: 0; }
.account-data-action button { flex: 0 0 auto; }

@media (max-width: 700px) {
  .account-heading-meta { align-items: flex-start; }
  .account-heading-chips { justify-content: flex-start; }
  .account-side-nav { flex-direction: row; flex-wrap: wrap; }
  .account-side-nav-link { flex: 1 1 auto; justify-content: center; text-align: center; }
  .account-data-action { flex-direction: column; align-items: stretch; }
  .account-data-action button { width: 100%; }
}