/* ---------- Profile, Rewards and Achievements (js/profile-page.js, renderProfile in js/account.js) ----------
   Opt-in layout, prefix pr-. The shared .suggest-screen is not used here, so Settings and the admin console keep it unchanged.
   Layout is decided by the width the page really has (container queries on .pr-wrap), not the window: the app sidebar takes
   284 px from 860 px, and the ad rails take more when they are on. Only the Settings gear, the Account list and the Admin
   icon follow the window, because they follow the header and sidebar, which switch at 860 px. */

.pr-wrap { container-type: inline-size; container-name: pr; }
.pr-screen { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.pr-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.pr-h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.pr-muted { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.pr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.pr-link { color: var(--brand-text); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pr-link:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.pr-head { display: flex; flex-direction: column; gap: 14px; }
.pr-id { display: flex; align-items: center; gap: 8px; min-width: 0; } /* tight on phones so "Member since Aug 2026" stays on one line at 360 px beside the gear */
.pr-avatar {
  flex: none; width: 68px; height: 68px; border-radius: 50%;
  border: 3px solid var(--brand); padding: 3px; background: var(--bg);
  display: flex;
}
.pr-avatar .avatar-badge { width: 100%; height: 100%; font-size: 26px; }
.pr-id-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pr-level { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.pr-since { margin: 0; white-space: nowrap; font-size: 14px; color: var(--text-muted); }
.pr-gear {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.pr-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px;
  border-radius: var(--radius-lg); background: var(--banner-gradient); color: var(--banner-title); font-size: 14px; text-decoration: none; font-weight: 600;
}
.pr-banner span:last-child { flex: none; }

.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.pr-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; text-align: center;
}
.pr-stat-num { font-size: 20px; font-weight: 700; line-height: 1.1; }
.pr-stat-label { font-size: 14px; color: var(--text-muted); }
a.pr-stat { border-color: var(--brand-text); }
a.pr-stat .pr-stat-num { color: var(--brand-text); }

@container pr (min-width: 600px) {
  .pr-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .pr-head .pr-banner { flex-basis: 100%; }
  .pr-id { gap: 14px; }
  .pr-avatar { width: 96px; height: 96px; }
  .pr-avatar .avatar-badge { font-size: 34px; }
  .pr-name { font-size: 26px; }
  .pr-stats { flex: none; grid-template-columns: repeat(3, 100px); }
}
/* The header gear only exists from 860 px, so Settings is reached from this one below that. */
@media (min-width: 860px) { .pr-gear:not(.pr-close) { display: none; } } /* the dialog Close button shares the look but stays at every width */

/* ---------- Progress ---------- */
.pr-progress { display: flex; flex-direction: column; gap: 8px; }
.pr-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pr-progress-title { margin: 0; font-size: 16px; font-weight: 600; }
.pr-progress-count { margin: 0; font-size: 14px; color: var(--text-muted); }
.pr-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pr-fill { height: 100%; background: var(--brand); border-radius: 999px; }
.pr-progress-note { margin: 0; font-size: 14px; color: var(--text); background: var(--brand-tint); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.4; }
.pr-progress-actions { display: flex; }
.pr-btn-text {
  min-height: 44px; padding: 0; border: none; background: none; color: var(--brand-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Levels dialog (reuses .modal-backdrop.sheet-backdrop and .sheet: bottom sheet under 860 px, centred panel from 860 px) ---------- */
.pr-levels-sheet { width: 100%; }
.pr-levels-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-levels-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.pr-journey-line { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.pr-name-email { font-size: 18px; } /* a signed-in email stands in for the missing username; it wraps anywhere so a long one stays inside the header */

/* The level path: Legend at the top, New at the bottom. Each item draws its own piece of the line (::before muted, ::after brand),
   x = 22 px so it runs through the middle of the 46 px nodes. The list scrolls inside the dialog. */
.pr-path { list-style: none; margin: 14px 0 4px; padding: 0 2px 0 0; overflow-y: auto; min-height: 0; flex: 1; position: relative; }
.pr-path > li { position: relative; }
.pr-path > li::before, .pr-path > li::after { content: ""; position: absolute; left: 22px; width: 2px; top: 0; bottom: 0; }
.pr-path > li::before { background: var(--border); }
.pr-path > li.rail-full::after { background: var(--brand); }
.pr-path > li.rail-half::after { background: var(--brand); top: 23px; }
.pr-path > li:first-child::before, .pr-path > li:first-child::after { display: none; }
.pr-path > li:nth-child(2)::before, .pr-path > li:nth-child(2)::after { top: 23px; }
.pr-path > li:last-child::before, .pr-path > li:last-child::after { bottom: calc(100% - 23px); }
.pr-path > li:last-child.rail-full::after { bottom: calc(100% - 23px); }

.pr-step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 18px; }
.pr-node {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 2px solid var(--border); color: var(--text-muted);
}
.pr-step.passed .pr-node { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-text); }
.pr-step.current .pr-node { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 5px var(--brand-tint); }
.pr-step-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 46px; }
.pr-step-name { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text); }
.pr-step.later .pr-step-name { color: var(--text-muted); font-weight: 500; }
.pr-step.current .pr-step-name { color: var(--brand-text); font-weight: 700; }
.pr-step-xp { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.pr-step-note { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.pr-step-note.pr-here { color: var(--brand-text); font-weight: 600; }
.pr-step-extra { margin: 0; font-size: 14px; color: var(--text); line-height: 1.4; }

.pr-tier { padding: 4px 0 14px 62px; }
.pr-tier:first-child { padding-top: 0; }
.pr-tier-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pr-tier.mine .pr-tier-card { background: var(--brand-tint); border: 2px solid var(--brand-text); padding: 9px 11px; }
.pr-tier-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.pr-tier-range { margin: 0; font-size: 14px; color: var(--text-muted); }
.pr-tier-perk { margin: 0; font-size: 14px; color: var(--text); line-height: 1.4; }
.pr-tier.mine .pr-tier-range { color: var(--text); }

/* ---------- Achievements ---------- */
.pr-section { display: flex; flex-direction: column; gap: 12px; }
.pr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pr-closest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pr-badge {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; text-align: center; min-height: 44px;
}
.pr-badge-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.pr-badge-sub { font-size: 14px; color: var(--text-muted); line-height: 1.3; }
.pr-chip { position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--brand); color: var(--on-brand); }
.pr-ring { position: relative; flex: none; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-text); }
.pr-ring svg.pr-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-ring-track { fill: none; stroke: var(--surface-2); stroke-width: 3; }
.pr-ring-fill { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.pr-ring.is-unearned { color: var(--text-muted); }
.pr-closest { flex-direction: row; text-align: left; gap: 12px; align-items: center; }
.pr-closest .pr-badge-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-empty { margin: 0; font-size: 14px; color: var(--text-muted); }

/* Achievements page: one card per badge, wide cards that fill the space. */
.pr-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pr-ach { flex-direction: row; text-align: left; align-items: center; gap: 14px; }
.pr-ach .pr-badge-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-ach.is-unearned .pr-badge-name { color: var(--text); }

/* ---------- Two columns (Profile with the Top contributors column, Rewards) ---------- */
.pr-cols { display: flex; flex-direction: column; gap: 16px; }
.pr-cols > * { min-width: 0; }
@container pr (min-width: 700px) {
  .pr-cols.pr-cols-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
}

/* ---------- Top contributors ---------- */
.pr-board { display: flex; flex-direction: column; gap: 10px; }
.pr-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-board-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--border); font-size: 14px; }
.pr-board-row:last-child { border-bottom: none; }
.pr-board-rank { font-weight: 700; color: var(--text-muted); text-align: center; }
.pr-board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-board-pts { font-weight: 700; color: var(--brand-text); }

/* ---------- Rewards page ---------- */
.pr-balance { display: flex; align-items: baseline; gap: 8px; padding: 16px; border-radius: var(--radius-lg); background: var(--banner-gradient); color: var(--banner-title); }
.pr-balance-num { font-size: 28px; font-weight: 700; }
.pr-balance-text { font-size: 16px; font-weight: 600; }
.pr-redeem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pr-redeem-grid .reward-item-card { height: 100%; }
.pr-earn { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
.pr-redemptions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Phone list at the end of Profile (the sidebar has these from 860 px) ---------- */
.pr-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pr-list li + li { border-top: 1px solid var(--border); }
.pr-list a, .pr-list button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px;
  border: none; background: none; color: var(--text); font: inherit; font-size: 15px; text-decoration: none; text-align: left; cursor: pointer;
}
.pr-list .pr-signout { color: var(--danger-text); }
@media (min-width: 860px) { .pr-list { display: none; } }

/* ---------- Sidebar: Account group (Profile only) and the role links ---------- */
.sidebar-group-title { margin: 0; padding: 0 10px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.sidebar-signout {
  width: 100%; margin-top: 6px; padding: 9px 10px; border: none; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: none; color: var(--danger-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.sidebar-signout:hover { background: var(--surface-2); }
.sidebar-role-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }

/* Header Admin icon (phones only; the sidebar has the link from 860 px). The icon-btn hit area is 44 px, see mobile-sizing.css. */
@media (min-width: 860px) { .header-actions .pr-role-link { display: none; } }

/* Achievements links: phones get "View leaderboard" beside the heading and "See all achievements" below the badges; from 860 px the
   heading link is "See all achievements" instead. Between 860 and 1099 px there is no Top contributors column, so a leaderboard link
   sits below the badges there (from 1100 px the column has the only one). */
.pr-link-wide, .pr-link-mid { display: none; }
@media (min-width: 860px) {
  .pr-link-phone { display: none; }
  .pr-link-wide { display: inline-flex; }
}
@media (min-width: 860px) and (max-width: 1099px) { .pr-link-mid { display: inline-flex; } }
.pr-role-links { display: contents; }
#prAchievements { display: flex; flex-direction: column; gap: 12px; }
.pr-h3 { margin: 4px 0 0; font-size: 16px; font-weight: 600; }

/* Badge pop-up (shares the levels dialog shell) */
.pr-badge-dialog { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 0 12px; }
.pr-badge-dialog .pr-ring { width: 72px; height: 72px; }
.pr-badge-status { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.pr-chip-inline { position: static; display: inline-block; vertical-align: middle; font-size: 14px; }