/* Profile-menu pages in the app frame: Updates, Affiliate, Community profile. (The Help center and Contact have their
   own css/drobo-ui-help.css and css/drobo-ui-contact.css.)
   Only --ui-* tokens. Type stays on the dashboard scale. */

.up, .af, .pf { display: grid; gap: 1rem; }
.acct-flashes { display: none; }

/* Updates */
.up-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.up-list { display: grid; gap: .75rem; }
.up-entry { display: grid; gap: .55rem; }
.up-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.up-entry__meta time { font-size: .75rem; font-weight: 600; color: var(--ui-muted); }
.up-group h3 { margin: .35rem 0 .2rem; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.up-group ul { margin: 0; padding: 0 0 0 1.05rem; display: grid; gap: .25rem; list-style: disc; }
.up-group li { font-size: .8125rem; line-height: 1.55; color: var(--ui-fg-2); }
.up-group li::marker { color: var(--ui-faint); }

/* Affiliate */
.af-gate { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .8fr); gap: 1rem; align-items: start; }
.af-label { margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.af-hero .af-label { display: flex; align-items: center; gap: .55rem; }
.af-figure--big { margin: .5rem 0 .35rem; font-size: 2.75rem !important; }
.af-figure--big span:first-child { font-size: inherit; }
.af-figure--big span:last-child { margin-left: .1rem; font-size: 1.35rem; color: var(--ui-muted); }
.af-figure { margin: .15rem 0 .2rem; font-size: 1.85rem; font-weight: 650; letter-spacing: -.04em; line-height: 1.1; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.af-figure span { font-size: 1rem; }
.af-text, .af-hint, .af-note, .af-foot, .af-example { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--ui-muted); }
.af-checks { display: grid; gap: .4rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.af-checks li { display: flex; gap: .45rem; font-size: .8125rem; line-height: 1.5; color: var(--ui-fg-2); }
.af-checks .ti { color: var(--ui-ok); margin-top: .1rem; }
.af-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.af-steps li { display: flex; gap: .45rem; align-items: flex-start; }
.af-steps span { display: grid; font-size: .75rem; color: var(--ui-muted); }
.af-steps strong { font-size: .8125rem; color: var(--ui-fg); }
.af-steps__n { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--ui-primary); color: var(--ui-primary-fg); font-size: .6875rem; font-weight: 600; }
.af-form { display: grid; gap: .55rem; }
.af-field { display: grid; gap: .3rem; }
.af-field__label { font-size: .75rem; font-weight: 600; color: var(--ui-fg-2); }
.af-field__req { font-weight: 500; color: var(--ui-muted); }
.af-code { display: block; padding: .65rem .75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-subtle); font-size: .75rem; line-height: 1.45; color: var(--ui-fg); overflow-wrap: anywhere; }
.af-status { min-height: 1.1rem; margin: 0; font-size: .75rem; color: var(--ui-muted); }
.af-stack { display: grid; gap: 1rem; }
.af-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .7fr); gap: 1rem; align-items: start; }
.af-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.af-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.af-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.af-profile { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ui-border); }
.af-payout .af-sub + .aff-list, .af-payout > .af-sub { margin-top: .9rem; }
.af-form__go { width: 100%; justify-content: center; }
.af-sub { margin: .35rem 0 0; font-size: .75rem; font-weight: 600; color: var(--ui-fg); }
.af-progress { height: .4rem; margin-top: .9rem; border-radius: 99px; background: var(--ui-subtle); overflow: hidden; }
/* js/drobo-affiliate.js sets --progress (0–1) on the bar once the rate is known; it fills once. */
.af-progress span { display: block; height: 100%; width: calc(var(--progress, 0) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet)); transition: width .9s var(--ui-ease); }
.af-tiers__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; margin-top: .7rem; }
.af-tiers__foot p { margin: 0; font-size: .75rem; color: var(--ui-muted); }
.aff-list { display: grid; margin: 0; padding: 0; list-style: none; }
.aff-list-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.6rem; padding: .5rem 0; border-top: 1px solid var(--ui-border); font-size: .8125rem; color: var(--ui-fg-2); }
.aff-list-item:first-child { border-top: 0; }
.aff-list-item__name { font-weight: 550; color: var(--ui-fg); }
.aff-list-item__value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-fg); }
/* Empty or unavailable: one calm row, a title and a line under it. */
.aff-list-item--empty { display: grid; justify-content: stretch; gap: .15rem; padding: .85rem .95rem; border: 1px dashed var(--ui-border-strong) !important; border-radius: var(--ui-radius-sm); background: var(--ui-subtle); }
.aff-list-item--empty strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.aff-list-item--empty span { font-size: .75rem; color: var(--ui-muted); }
/* Rate milestones: one card per step in one row, the current one lit, the unlocked ones checked. */
.aff-tier-timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
.aff-tier-step { display: grid; align-content: start; gap: .2rem; min-width: 0; padding: .75rem .8rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-card); }
.aff-tier-step p { margin: 0; }
.aff-tier-step__state { font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ui-faint); }
.aff-tier-pct { font-size: 1.35rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ui-fg); }
.aff-tier-pct span { font-size: .8125rem; font-weight: 600; }
.aff-tier-step__label { font-size: .75rem; color: var(--ui-muted); }
.aff-tier-step.is-done .aff-tier-step__state { color: var(--ui-ok); }
.aff-tier-step.is-done .aff-tier-pct { color: var(--ui-muted); }
.aff-tier-step.is-current { border-color: color-mix(in srgb, var(--ui-primary) 55%, var(--ui-border)); background: var(--ui-primary-soft); box-shadow: 0 0 0 3px var(--ui-primary-soft); }
.aff-tier-step.is-current .aff-tier-step__state, .aff-tier-step.is-current .aff-tier-pct { color: var(--ui-primary); }
.aff-tier-step.is-next { border-style: dashed; border-color: color-mix(in srgb, var(--ui-violet) 45%, var(--ui-border)); }
.aff-tier-step.is-next .aff-tier-step__state { color: var(--ui-violet); }
.aff-tier-step.is-upcoming .aff-tier-pct { color: var(--ui-fg-2); }
.hidden { display: none !important; }

/* Profile */
/* The profile: the avatar in the leaderboard's ring beside the name, then "More coming soon". */
.pf-who { display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
.pf-avatar { width: 5.5rem; height: 5.5rem; flex: 0 0 auto; font-size: 1.75rem; font-weight: 650; }
.pf-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pf-name { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.pf-name .ui-status { font-size: .75rem; letter-spacing: 0; }
.pf-soon { position: relative; display: grid; justify-items: center; gap: .55rem; padding: 3.25rem 1.5rem; overflow: hidden; text-align: center; }
.pf-soon__grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--ui-border) 1px, transparent 1px), linear-gradient(90deg, var(--ui-border) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 45%, #000 20%, transparent 75%); opacity: .7; }
.pf-soon > :not(.pf-soon__grid) { position: relative; }
.pf-soon__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .35rem; font-size: 1.35rem; color: #fff;
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-violet)); border-radius: 14px;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--ui-violet) 60%, transparent); animation: pf-float 4s ease-in-out infinite; }
@keyframes pf-float { 50% { transform: translateY(-4px); } }
.pf-soon h2 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }
.pf-soon p { max-width: 26rem; margin: 0; font-size: .875rem; line-height: 1.55; color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) { .pf-soon__icon { animation: none; } }
.pf-bio { max-width: 42rem; }
.pf-meta { display: flex; align-items: center; gap: .35rem; margin: .45rem 0 0; font-size: .75rem; color: var(--ui-muted); }
.pf-actions { align-self: flex-start; }
.pf-guest { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .75rem .9rem; font-size: .8125rem; color: var(--ui-fg-2); }
.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: 1rem; margin: 0; }
.pf-stats .ui-stat dt { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: .8125rem; font-weight: 500; color: var(--ui-muted); }
.pf-stats .ui-stat dd { margin: .2rem 0 0; font-size: 1.85rem; font-weight: 650; letter-spacing: -.04em; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.pf-list__head, .pf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; }
.pf-list__head { padding: 0 .2rem .4rem; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.pf-row { position: relative; padding: .7rem .2rem; border-top: 1px solid var(--ui-border); }
.pf-row__topic { display: grid; gap: .15rem; min-width: 0; }
.pf-row__topic a { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); text-decoration: none; }
.pf-row__replies, .pf-row__last { font-size: .75rem; color: var(--ui-muted); white-space: nowrap; }
.forum-thread-cover { position: absolute; inset: 0; }

@media (max-width: 1100px) { .aff-tier-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .up-stats, .af-stats, .af-steps { grid-template-columns: 1fr; }
  .af-gate, .af-hero, .af-row { grid-template-columns: 1fr; }
  .pf-list__head { display: none; }
  .pf-row { grid-template-columns: auto minmax(0, 1fr); }
  .pf-row__replies, .pf-row__last { grid-column: 2; }
}
@media (max-width: 560px) {
  .pf-who { gap: 1rem; }
  .pf-avatar { width: 4rem; height: 4rem; }
  .aff-tier-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-stats { grid-template-columns: 1fr 1fr; }
}