/* /me, "Yours" (js/pages/me.js): a big title and the wallet's ENS name, the money earned and waiting, then the
   Founders and the Followers it holds. The Founder cards are the drop cards of css/followers.css with a state chip,
   what the drop earned and a step at the bottom; only the art is a link, so the card stays put. The Followers are
   small tiles in the drop page's style (css/drop.css .dp-tok), one group per drop. */
.me-page:not(.empty-state) { padding-top: var(--page-top); }
.me-page:not(.empty-state) > h1 { margin: 0 0 36px; }
.me-page:not(.empty-state) > h1:has(+ .me-ens) { margin-bottom: 8px; }
.me-page .me-ens { margin: 0 0 36px; font-size: var(--t-xl); font-weight: 500; letter-spacing: -.02em; color: var(--muted); overflow-wrap: anywhere; }
.me-page .me-retry { margin: 0 0 24px; font-size: 15px; color: var(--muted); }
.me-page .me-retry .link { margin-left: 4px; font-size: 15px; }

/* Founders, then Followers: a heading with how many, muted. */
.me-page .me-sec + .me-sec { margin-top: 88px; }
.me-page .me-sec > h2 { margin: 0 0 24px; }
.me-page .me-sec > h2 span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (hover: hover) { .me-page .dcard:hover { transform: none; box-shadow: none; } }
.me-page a.dcard-art { transition: opacity .2s; }
.me-page a.dcard-art:hover { opacity: .88; }
.me-page .dcard-body { flex: 1; }
.me-page .me-line, .me-page .me-earned { margin: 12px 0 0; font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.me-page .me-line:empty, .me-page .me-earned:empty { display: none; }
.me-page .dcard-bar:not([hidden]) + .me-line, .me-page .dcard-bar:not([hidden]) + .me-line:empty + .me-earned { margin-top: 6px; }
.me-page .me-line:not(:empty) + .me-earned { margin-top: 2px; }
.me-page .me-earned b { font-weight: 500; color: var(--ink); white-space: nowrap; }
/* The step sits at the bottom, so the buttons in a row line up; Share beside it once the drop is open. Grey on a
   grey card disappears: white. */
.me-page .me-act { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }
.me-page .me-act > * { flex: 1 1 0; min-width: 0; text-align: center; }
.me-page .me-act :is(.button, button):not(.primary) { background: var(--bg); }
.me-page .me-act :is(.button, button):not(.primary):hover { background: var(--tint-2); }
.me-page .me-soon { margin: 0; min-height: 44px; display: grid; place-items: center; font-size: var(--t-m); color: var(--muted); text-align: center; }

/* The money: what the Founders earned, and beside it what waits, with the Claim pill. */
.me-page .me-top > * { margin: 0 0 36px; }
.me-page .me-top > .notice + .me-money { margin-top: -18px; }
.me-page .me-money { gap: 0; padding: 22px 24px; }
/* With nothing to claim, the total is one quiet line under the title. */
.me-page .me-money:not(.owing) { padding: 0; background: none; border-radius: 0; }
.me-page .me-top > .me-money:not(.owing):first-child { margin-top: -20px; }
.me-page .me-money-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; min-height: 40px; }
.me-page .me-total { margin: 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.022em; line-height: 1.25; color: var(--muted); font-variant-numeric: tabular-nums; }
.me-page .me-total b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.me-page .me-total span span, .me-page .me-owed p span, .me-page .me-earned span { margin-left: 4px; font-size: var(--t-s); font-weight: 400; color: var(--muted); white-space: nowrap; }
.me-page .me-owed p b { font-weight: 600; }
.me-page .me-owed { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.me-page .me-owed p { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.me-page .me-owed button { padding-inline: 26px; }

/* The drops ready to set up: a line and the button to the first, on the tint. */
.me-page .me-todo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 24px; }
.me-page .me-todo p { margin: 0; font-size: 17px; font-weight: 500; }
.me-page .me-todo .button { padding-inline: 26px; }

/* The Followers: a group per drop, its name to the drop page, then its tokens, each to its own page. */
.me-page .me-group + .me-group { margin-top: 36px; }
.me-page .me-group h3 { margin: 0 0 14px; font-size: var(--t-l); font-weight: 600; letter-spacing: -.022em; line-height: 1.24; }
.me-page .me-group h3 a { color: var(--ink); text-decoration: none; }
.me-page .me-group h3 a:hover { text-decoration: underline; }
.me-page .me-group h3 span { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.me-page .me-toks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.me-page .me-tok { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 6px 8px; background: var(--tint); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; transition: transform .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s; }
@media (hover: hover) { .me-page .me-tok:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); } }
.me-page .me-tok-art { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 9px; overflow: hidden; }
.me-page .me-tok-art:empty { background: var(--tint-2); animation: pulse 1.2s ease-in-out infinite; }
.me-page .me-tok-k { font-size: 13px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
/* One row a drop until Show more. */
.me-page .me-more { margin-top: 12px; font-size: var(--t-m); }

@media (max-width: 640px) {
  .me-page:not(.empty-state) > h1 { margin-bottom: 24px; }
  .me-page:not(.empty-state) > h1:has(+ .me-ens) { margin-bottom: 6px; }
  .me-page .me-ens { margin-bottom: 24px; }
  .me-page .me-sec + .me-sec { margin-top: 64px; }
  .me-page .me-sec > h2 { margin-bottom: 18px; }
  .me-page .me-top > * { margin-bottom: 24px; }
  .me-page .me-top > .notice + .me-money { margin-top: -12px; }
  .me-page .me-top > .me-money:not(.owing):first-child { margin-top: -14px; }
  .me-page .me-money { padding: 20px; border-radius: 18px; }
  .me-page .me-owed { flex: 1 1 100%; }
  .me-page .me-owed p { font-size: 15px; }
  .me-page .me-owed button { width: 100%; padding-block: 14px; font-size: var(--t-l); line-height: 24px; }
  .me-page .me-act { gap: 6px; padding-top: 12px; }
  .me-page .me-act .button, .me-page .me-act button { padding-inline: 8px; }
  .me-page .me-group + .me-group { margin-top: 28px; }
  .me-page .me-group h3 { margin-bottom: 10px; }
  .me-page .me-toks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .me-page .me-tok { gap: 4px; padding: 4px 4px 6px; border-radius: 12px; }
  .me-page .me-tok-art { border-radius: 8px; }
  .me-page .me-tok-k { font-size: var(--t-xs); }
}
@media (prefers-reduced-motion: reduce) { .me-page .me-tok:hover { transform: none; } }