/* CertaRounds — Access ended (src/screens/access.js). Frame + hero from login.css. Tokens only.
   Two surface levels at most: the summary sits straight on the card (tablet/desktop) or is the one
   card (phone); the stat tiles are tinted wells with the gem above the label, so values never
   collide with a narrow tile (360px). */

.acc-over { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); }
.auth--access .auth-hero__title { font-size: var(--fs-30); }

.acc-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.acc-summary__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.acc-summary__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.acc-summary__note { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-3); }
.acc-summary__empty { font-size: var(--fs-15); line-height: 1.5; color: var(--text-2); }
.acc-summary__foot { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }

.acc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.acc-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: var(--surface-2);
}
.acc-stat__icon { display: inline-flex; flex-shrink: 0; }
.acc-stat__icon .gem-icon { width: 28px; height: 28px; }
.acc-stat__body { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.acc-stat__label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); line-height: 1.3; }
.acc-stat__value {
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;   /* D19 */
}
.acc-stat__value.is-muted { color: var(--text-3); font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.acc-stat__value.is-text { font-size: var(--fs-15); }

.acc-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.acc-actions__row { display: flex; justify-content: center; gap: var(--sp-6); }

@media (min-width: 768px) {
  /* Inside the white card: no second box — title and wells sit straight on the card */
  .auth--access .acc-summary { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .acc-actions__row { justify-content: flex-start; }
}

/* ============ F2 ============ */
/* Log out is a different kind of action than Account settings: the neutral link colour */
.auth-link.acc-link--neutral { color: var(--text-2); }
.auth-link.acc-link--neutral:hover { color: var(--text); }
/* Phones/tablets: the panel's two reassurances, in the card */
.acc-points { display: flex; flex-direction: column; gap: var(--sp-2); }
.acc-points li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-15); line-height: 1.45; color: var(--text); }
.acc-points .auth__check { margin-top: 1px; }

/* ============ F3 ============ */
/* One-line labels; the qualifier ("All answers", "In 69 days") is a caption under the value, so the
   values of a row always line up */
.acc-stat__label { white-space: nowrap; overflow-wrap: normal; }
.acc-stat__caption { margin-top: 2px; font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: 1.3; color: var(--text-3); }
/* Both quiet links share one neutral style */
.acc-actions__row .auth-link { font-weight: var(--fw-semibold); }
/* Empty state: the reassurances inside the card, under the explanation */
.acc-summary--empty .acc-points { margin-top: var(--sp-1); }

/* ============ F4 ============ */
/* The two quiet actions: app link style with a leading icon (they read as actions, not captions) */
.acc-actions__row .acc-link { gap: 6px; color: var(--link); font-weight: var(--fw-semibold); }
.acc-actions__row .acc-link:hover { color: var(--link-hover); }
.acc-actions__row .acc-link .icon { flex-shrink: 0; }
/* Desktop: the numbers carry the card (22px values) */
@media (min-width: 1024px) {
  .acc-stat__value { font-size: 1.375rem; }
  .acc-stat__value.is-text, .acc-stat__value.is-muted { font-size: var(--fs-17); }
}