/* ─────────────────────────────────────────────────────────────────────────
   app_auth — warm-carbon styled auth + profile pages
   Uses theme tokens from static/css/modern-docs.css. Never hardcodes colors.
   Pulls in the same .card / .rvt-input look used by the doc pages so signing
   in feels like part of the rest of the site.
   ───────────────────────────────────────────────────────────────────────── */

/* Centered narrow column — used on login / signup-wizard / forgot-pass. */
.auth-shell {
  max-width: 460px;
  margin: 48px auto;
  padding: 32px 28px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.auth-shell--wide { max-width: 720px; position: relative; }

.auth-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0 0 6px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 24px;
}

/* Single fake-progress bar at the top of every wizard step. We
   intentionally don't show "step X of N" — visible step counts kill
   completion. The fill width grows non-linearly per step (20 → 50 → 75
   → 90) so each click feels like real progress. */
.wizard-progress {
  width: 100%;
  height: 5px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 28px;
}
.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  border-radius: 999px;
  transition: width 480ms cubic-bezier(.2,.7,.2,1);
}

/* ─── Camp badge strip at top of step 1 ─────────────────────────────── */
.camp-strip {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 24px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.camp-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  opacity: 0.35;
  transition: opacity 220ms ease, border-color 220ms ease, transform 220ms ease, background 220ms ease;
}
.camp-badge.is-active {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent-glow);
  transform: translateY(-3px);
  animation: camp-pop 360ms cubic-bezier(.2,.9,.3,1.4);
}
@keyframes camp-pop {
  0%   { transform: translateY(-3px) scale(0.92); }
  60%  { transform: translateY(-3px) scale(1.08); }
  100% { transform: translateY(-3px) scale(1); }
}
.camp-badge-icon {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.camp-badge[data-badge="python"] .camp-badge-icon { color: var(--type-method); }
.camp-badge[data-badge="csharp"] .camp-badge-icon { color: var(--type-class); }
.camp-badge[data-badge="mixed"]  .camp-badge-icon { color: var(--type-constructor); }
.camp-badge-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-1);
}

/* ─── Skill picker (3 rows × 10 boxes) ──────────────────────────────── */
.skill-row {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.skill-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.skill-row-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.skill-row-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  text-align: right;
  flex: 1;
  min-width: 0;
}
.skill-boxes {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.skill-box {
  height: 28px;
  padding: 0;
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.skill-box:hover { border-color: var(--accent) !important; }
.skill-box.is-hover {
  background: var(--accent-glow) !important;
  border-color: var(--accent) !important;
}
.skill-box.is-filled {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.skill-box.is-pop {
  animation: skill-pop 380ms cubic-bezier(.2,.9,.3,1.4);
}
@keyframes skill-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Form field wrapper — label + input + helper + error. */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.field-help {
  font-size: 12px;
  color: var(--text-3);
}
.field-error {
  font-size: 13px;
  color: var(--danger);
  font-weight: 500;
}

/* Themed inputs — overrides DaisyUI defaults. */
.rvt-input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-0);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rvt-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.rvt-input::placeholder { color: var(--text-3); }
textarea.rvt-input { resize: vertical; min-height: 96px; }
select.rvt-input { padding: 9px 12px; }

/* Themed <input type="file"> — overrides the browser default gray
   "Choose File" chrome. ::file-selector-button is the inner button;
   the rest of the input is the unstyled label area we make blend in. */
.rvt-file-input {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.rvt-file-input:hover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--bg-1);
}
.rvt-file-input:focus { outline: none; border-color: var(--accent); }
.rvt-file-input::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #1a0e00;
  background: var(--accent);
  border: 0;
  border-radius: 7px 0 0 7px;
  cursor: pointer;
  transition: filter 120ms ease;
}
.rvt-file-input::file-selector-button:hover { filter: brightness(1.05); }
/* Older browsers (Safari < 14) — fall back to ::-webkit-file-upload-button. */
.rvt-file-input::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #1a0e00;
  background: var(--accent);
  border: 0;
  border-radius: 7px 0 0 7px;
  cursor: pointer;
}

/* Submit / cancel buttons (overrides DaisyUI button background). */
.rvt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, transform 80ms ease, border-color 120ms ease;
  background: var(--bg-2) !important;
  color: var(--text-0);
  border-color: var(--border-strong) !important;
}
.rvt-btn:hover { background: var(--bg-3) !important; }
.rvt-btn:active { transform: translateY(1px); }
.rvt-btn--primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #1a0e00;
}
.rvt-btn--primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  filter: brightness(1.05);
}
.rvt-btn--ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-2);
}
.rvt-btn--ghost:hover { background: var(--bg-2) !important; color: var(--text-0); }
.rvt-btn--danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff;
}

.rvt-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.auth-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
}
.auth-foot a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.auth-foot a:hover { text-decoration: underline; }

/* ─── Camp picker (the cool overlay during step 3) ─────────────────────── */
.camp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 22px;
}
@media (max-width: 600px) { .camp-grid { grid-template-columns: 1fr; } }

.camp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 14px 18px;
  background: var(--bg-2);
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.camp-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.camp-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.camp-card-icon {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-0);
}
.camp-card[data-camp="python"] .camp-card-icon { color: var(--type-method); }
.camp-card[data-camp="csharp"] .camp-card-icon { color: var(--type-class); }
.camp-card[data-camp="mixed"]  .camp-card-icon { color: var(--type-constructor); }

.camp-card-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 4px;
}
.camp-card-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
}

/* ─── Header auth slot (login/signup or avatar dropdown) ───────────────── */
/* Code Library link in the topbar. Compact mono pill so it reads as
   "code-y" identity and fits the warm-carbon vibe without competing
   with version tabs or the search trigger. */
.rvt-header-codelib {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  margin-right: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.rvt-header-codelib:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}

.rvt-auth-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}
.rvt-auth-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent !important;
  color: var(--text-1);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rvt-auth-btn:hover { background: var(--bg-2) !important; color: var(--text-0); }
.rvt-auth-btn--primary {
  background: var(--accent) !important;
  /* Light theme: burnt-orange fill is too heavy with dark text — go white
   * so the CTA feels light + clean. Dark theme uses light orange fill, so
   * dark text reads better there (override below). */
  color: #ffffff !important;
  border-color: var(--accent) !important;
}
.dark .rvt-auth-btn--primary { color: #1a0e00 !important; }
.rvt-auth-btn--primary:hover { filter: brightness(1.05); }

/* Avatar trigger + dropdown menu */
.rvt-avatar-wrap { position: relative; }
.rvt-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: transparent !important;
  cursor: pointer;
  transition: background 120ms ease;
}
.rvt-avatar-btn:hover { background: var(--bg-2) !important; }
.rvt-avatar-img,
.rvt-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-0);
}
.rvt-avatar-name {
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-1);
  max-width: 96px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Stacked variant — avatar above, name below in small text. Saves
   horizontal space in the topbar; the name truncates at ~80px. */
.rvt-avatar-btn--stacked {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 6px 4px;
  border-radius: 8px;
  line-height: 1;
}
.rvt-avatar-btn--stacked .rvt-avatar-img,
.rvt-avatar-btn--stacked .rvt-avatar-fallback {
  width: 30px;
  height: 30px;
}
.rvt-avatar-btn--stacked .rvt-avatar-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  max-width: 80px;
}
.rvt-avatar-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 1100;
  display: none;
}
.rvt-avatar-menu.is-open { display: block; }
.rvt-avatar-menu a, .rvt-avatar-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent !important;
  border: 0;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.rvt-avatar-menu a:hover, .rvt-avatar-menu button:hover {
  background: var(--bg-2) !important;
  color: var(--text-0);
}
.rvt-avatar-menu .rvt-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}
.rvt-avatar-menu .rvt-menu-item-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-left: auto;
}

/* ─── Profile page ─────────────────────────────────────────────────────── */
.profile-shell {
  max-width: 980px;
  margin: 32px auto;
  padding: 0 16px;
}
.profile-card {
  position: relative;
  display: grid;
  /* Three columns: avatar (with social below), details, activity heatmap.
     The avatar sits in its own "avatar" cell with the rest of the left
     column ("side": level / social / joined / super thanks) directly
     beneath it. Named areas let the small-screen layout reflow the
     avatar up next to the name without touching the DOM order. */
  grid-template-columns: 116px 1fr auto;
  grid-template-areas:
    "avatar  details  activity"
    "side    details  activity";
  column-gap: 24px;
  row-gap: 12px;
  padding: 24px 32px 24px 24px;  /* extra right pad for the edit icon */
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  align-items: start;
}
.profile-avatar-wrap { grid-area: avatar; justify-self: center; }
.profile-card-avatar-col { grid-area: side; }
.profile-card-details { grid-area: details; }
.profile-card-activity { grid-area: activity; }
/* Avatar + social column on the left. */
.profile-card-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.profile-social--inline {
  display: inline-flex;
  gap: 8px;
}
/* Tiny edit-pencil button in the card's top-right corner. */
.profile-edit-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}
.profile-edit-icon:hover {
  color: var(--accent);
  background: var(--bg-2);
}
/* Heatmap is its own column on the right of the avatar/details. */
.profile-card-activity {
  align-self: start;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-heatmap-hd {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.profile-heatmap-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.profile-heatmap-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Social icons pinned to the card's top-right corner. */
.profile-social--top-right {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

/* Name + earned badges on one line. Badges are identity chips
   (camps + future identity markers) — distinct from achievements
   which live in the grid below. */
.profile-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
/* "Back to profile" link at the top of the edit page. Subtle, with
   the arrow icon on the left. Lets users bail without saving. */
.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 120ms ease, transform 120ms ease;
}
.auth-back-link:hover {
  color: var(--accent);
  transform: translateX(-2px);
}
/* On the edit page the shell has a 48px top margin, so the back link
   floats absolutely in that gap ABOVE the card rather than taking a row
   inside it. */
.auth-shell--wide .auth-back-link {
  position: absolute;
  top: -28px;
  left: 2px;
  margin: 0;
  z-index: 1;
}
/* "Edit profile" heading floats centered in the margin above the card,
   smaller than the in-card title. pointer-events:none so its full-width
   box never swallows clicks meant for the back link on the same line. */
.auth-shell--wide .auth-title {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 15px;
  pointer-events: none;
}

/* Bio sits inside the middle column under title/company. Subtle gray
   so it reads as supporting context, not a main heading. */
.profile-card-bio {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 60ch;
}

/* "Joined dd Mon yyyy" subtle text directly under the social row.
   Single line — small enough that "Joined 7 May 2026" never wraps. */
.profile-joined-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Badge row sits directly under the name on its own line. Holds the
   active-badge chips + (owner-only) the "Manage" circular trigger that
   opens the See Badges overlay. */
.profile-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.profile-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* The badge-chip visuals (.profile-badge + variants AND .profile-badge--manage)
   moved to the site-wide app_gamification/css/badges.css so the SAME chip
   renders identically on doc-page comment bylines (which don't load auth.css).
   --manage moved too because it only overrides the base chip's background +
   border, so it must stay in the same file AFTER the base rule (this file
   loads before badges.css, which would otherwise win the specificity tie and
   make the dashed Manage circle render as a solid disc). Only the layout
   rules (.profile-badge-row, .profile-badges) stay here. Don't redefine the
   chip visuals below — edit them in badges.css. */
@media (max-width: 720px) {
  /* Small screens: shrink the avatar and float it next to the name
     (the details column leads with the name row), drop the left-column
     meta into a full-width strip below, then the heatmap full-width. */
  .profile-card {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "avatar   details"
      "side     side"
      "activity activity";
    column-gap: 14px;
    row-gap: 14px;
    padding: 18px 18px 20px;
  }
  .profile-avatar-wrap {
    justify-self: start;
    width: 56px;
    height: 56px;
  }
  .profile-card .profile-avatar,
  .profile-card .profile-avatar-fallback {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  /* The "Level N" pill is redundant on small screens (the level bar in
     the details column already shows it). Hide it to save a row. */
  .profile-name-level { display: none; }
  /* Left-column meta becomes a left-aligned strip under the header. */
  .profile-card-avatar-col { align-items: flex-start; }
  .profile-card-activity { min-width: 0; }
}
.profile-avatar,
.profile-avatar-fallback {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--text-0);
  border: 2px solid var(--border-strong);
}

/* Owner-only avatar hover-to-upload overlay. The button sits on top of
   the avatar inside `.profile-avatar-wrap`, fades in on hover, opens a
   hidden file input that POSTs to /dev/<u>/avatar/ via fetch. */
.profile-avatar-wrap {
  position: relative;
  display: inline-flex;
  width: 96px;
  height: 96px;
}
.profile-avatar-upload-btn {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease;
}
.profile-avatar-wrap--editable:hover .profile-avatar-upload-btn,
.profile-avatar-upload-btn:focus-visible {
  opacity: 1;
}
.profile-avatar-upload-btn.is-busy {
  opacity: 1;
  pointer-events: none;
}
.profile-avatar-upload-btn.is-busy svg {
  animation: profile-avatar-spin 700ms linear infinite;
}
@keyframes profile-avatar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.profile-name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0;
}
.profile-handle {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
}
/* Inline "Level N" chip rendered next to the display name in the
   name row. Muted gray — supporting context, not a focal point. */
.profile-name-level {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 10px;
  margin-left: 4px;
  text-transform: uppercase;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--text-1);
}
.profile-meta a { color: var(--accent); text-decoration: none; }
.profile-meta a:hover { text-decoration: underline; }
.profile-actions { display: flex; gap: 8px; }

/* ── Super Thanks in the LEFT column ──────────────────────────────────
   Lives under the joined-date line in `.profile-card-avatar-col`,
   separated by a thin horizontal rule. The send button (if visible)
   sits at the top, then the emoji chip strip. The list wraps and
   becomes vertically scrollable once it grows past ~3 rows, so it
   never pushes the card taller than the activity heatmap on the right. */
.profile-thanks-side-sep {
  width: 100%;
  height: 1px;
  margin: 4px 0 4px;
  border: 0;
  background: var(--border);
}
.profile-thanks-side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.profile-thanks-side-hd {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.profile-thanks-side-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.profile-thanks-side-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.profile-thanks-side-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-glow);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.profile-thanks-side-send:hover { background: var(--accent); color: var(--bg-0); }
.profile-thanks-side-send.is-disabled,
.profile-thanks-side-send[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-2);
  color: var(--text-3);
  border-color: var(--border-strong);
}
/* Chip strip: wrap to multiple rows, scroll vertically when overflow.
   Width pinned to the avatar column so chips never spill into the
   details column. `overflow-x: hidden` is REQUIRED — when only `overflow-y`
   is set, browsers silently promote the visible-x to auto-x because you
   can't mix `visible` with a non-visible direction, which used to cause
   the strip to scroll horizontally forever when a popover poked out. */
.profile-thanks-side-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
  max-width: 132px;        /* matches avatar (96) + breathing room */
  max-height: 110px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--text-3) transparent;
}
.profile-thanks-side-list::-webkit-scrollbar { width: 6px; }
.profile-thanks-side-list::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 3px; }
/* Chip is a <button> now (clickable + focusable natively). Reset the
   browser default button look so it matches the rest of the theme. */
.profile-thanks-side-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  appearance: none;
}
.profile-thanks-side-chip:hover,
.profile-thanks-side-chip:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--accent-glow);
  outline: none;
}
.profile-thanks-side-emoji {
  font-size: 14px;
  line-height: 1;
}

/* Body-level hover tooltip for Super Thanks chips. Position is set
   inline from JS (relative to the chip's bounding rect, clamped to
   viewport). `position: fixed` so no ancestor's overflow/transform can
   clip or mis-offset it. */
.thanks-tip {
  position: fixed;
  z-index: 400;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-1);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
  white-space: normal;
  text-align: left;
}
.thanks-tip[hidden] { display: none; }
.thanks-tip.is-shown { opacity: 1; transform: translateY(0); }
.thanks-tip strong { color: var(--accent); font-weight: 600; }
.thanks-tip-note {
  color: var(--text-2);
  font-style: italic;
  font-size: 11.5px;
}
.thanks-tip-when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Click-to-open detail modal — same overlay pattern as the
   super-thanks send modal. */
.thanks-detail-overlay {
  position: fixed; inset: 0;
  z-index: 380;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.thanks-detail-overlay[hidden] { display: none; }
.thanks-detail-card {
  position: relative;
  width: min(440px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-family: var(--font-sans);
  color: var(--text-1);
}
.thanks-detail-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.thanks-detail-close:hover { background: var(--bg-2); color: var(--accent); }
.thanks-detail-emoji {
  font-size: 56px;
  line-height: 1;
  margin-top: 4px;
}
.thanks-detail-from {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.thanks-detail-handle {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.thanks-detail-handle:hover { text-decoration: underline; }
.thanks-detail-note {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-1);
  max-width: 360px;
}
.thanks-detail-note[hidden] { display: none; }
.thanks-detail-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Super Thanks display + send modal. */
.profile-thanks {
  margin: 16px 0 8px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.profile-thanks-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.profile-thanks-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.profile-thanks-send {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-glow);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.profile-thanks-send:hover { background: var(--accent); color: var(--bg-0); }
.profile-thanks-send.is-disabled,
.profile-thanks-send[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;
  background: var(--bg-2);
  color: var(--text-3);
  border-color: var(--border-strong);
}
.profile-thanks-send.is-disabled:hover,
.profile-thanks-send[disabled]:hover { background: var(--bg-2); color: var(--text-3); }
.profile-thanks-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-thanks-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: default;
  transition: border-color 120ms ease;
}
.profile-thanks-chip:hover { border-color: var(--accent); }
.profile-thanks-emoji { font-size: inherit; }
.profile-thanks-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.profile-thanks-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  pointer-events: none;
}
.profile-thanks-chip:hover .profile-thanks-popover {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease;
}
.profile-thanks-entry { display: flex; flex-direction: column; gap: 2px; color: var(--text-1); }
.profile-thanks-entry strong { color: var(--accent); font-weight: 600; }
.profile-thanks-note { color: var(--text-2); font-style: italic; font-size: 12px; }

.super-thanks-overlay {
  position: fixed; inset: 0;
  z-index: 320;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.super-thanks-overlay[hidden] { display: none; }
.super-thanks-modal {
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  width: min(480px, 100%);
  padding: 18px 20px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.super-thanks-emojis {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.super-thanks-emojis-extra {
  margin-top: -4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 2px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--text-3) transparent;
}
.super-thanks-emojis-extra::-webkit-scrollbar { width: 6px; }
.super-thanks-emojis-extra::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 3px; }
.super-thanks-emojis-extra[hidden] { display: none; }
.super-thanks-emoji-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: transform 100ms ease, border-color 120ms ease, background 120ms ease;
}
.super-thanks-emoji-btn:hover { transform: scale(1.08); border-color: var(--accent); }
.super-thanks-emoji-btn.is-selected {
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
/* "+ N more" toggle button — same footprint as an emoji button but
   styled as a subtle text chip. Hidden once the user expands. */
.super-thanks-emojis-more {
  height: 40px;
  padding: 0 12px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-2);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.super-thanks-emojis-more:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}
.super-thanks-emojis-more[hidden] { display: none; }
.super-thanks-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 4px;
}
#super-thanks-note {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-0);
  resize: vertical;
}
.super-thanks-error {
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(229, 115, 115, 0.12);
  border: 1px solid rgba(229, 115, 115, 0.4);
  border-radius: 6px;
  color: #e57373;
  font-size: 12px;
}
.super-thanks-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 14px;
}
.super-thanks-cancel,
.super-thanks-submit {
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.super-thanks-cancel {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}
.super-thanks-submit {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg-0);
}
/* ── Sent! success state ──
   Replaces the form once the POST returns ok. Designed to feel like
   a small celebration: oversized emoji pop, gradient title, friendly
   confirmation copy, accent CTA. The burst animation re-fires every
   time the success panel becomes visible (see stPlaySuccessBurst()
   in profile.html — toggles .is-playing on a forced reflow). */
.super-thanks-success {
  text-align: center;
  padding: 20px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.super-thanks-success[hidden] { display: none; }
.super-thanks-success-burst {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 4px 18px var(--accent-glow));
  /* Re-triggered by adding .is-playing on each open. Shows the emoji the
     sender picked, set by popups.js on success. */
}
.super-thanks-success-burst.is-playing {
  animation: stBurstPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
             stBurstFloat 2.4s ease-in-out 700ms infinite;
}
@keyframes stBurstPop {
  0%   { transform: scale(0)   rotate(-18deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(8deg);  opacity: 1; }
  80%  { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}
@keyframes stBurstFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
.super-thanks-success-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
  background: linear-gradient(95deg, #ff7a3d 0%, #ffb454 50%, #ff7a3d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: stSlideUp 380ms cubic-bezier(0.2, 0.9, 0.3, 1.1) 120ms backwards;
}
.super-thanks-success-body {
  margin: 2px 0 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-1);
  max-width: 360px;
  animation: stSlideUp 380ms cubic-bezier(0.2, 0.9, 0.3, 1.1) 200ms backwards;
}
.super-thanks-success-body strong { color: var(--accent); font-weight: 600; }
.super-thanks-success-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  animation: stSlideUp 380ms cubic-bezier(0.2, 0.9, 0.3, 1.1) 260ms backwards;
}
.super-thanks-success-preview[hidden] { display: none; }
.super-thanks-success-preview-from {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.super-thanks-success-preview-by { color: var(--text-3); }
.super-thanks-success-preview-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-strong);
}
.super-thanks-success-preview-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.super-thanks-success-preview-handle { color: var(--accent); font-weight: 600; }
.super-thanks-success-preview-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}
.super-thanks-success-preview-note[hidden] { display: none; }
.super-thanks-success-preview-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.super-thanks-success-close {
  padding: 9px 24px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg-0);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform 120ms ease, box-shadow 120ms ease;
  animation: stSlideUp 380ms cubic-bezier(0.2, 0.9, 0.3, 1.1) 280ms backwards;
}
.super-thanks-success-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--accent-glow);
}
@keyframes stSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* GitHub-style activity heatmap inside the avatar card.
   - 14 columns (weeks), 7 rows (days). Column-major fill via grid.
   - Weekday labels (Mon/Wed/Fri) sit on the left; month labels span
     the top, positioned via grid-column-start.
   - Cells flagged `--future` keep grid shape but render invisibly. */
:root {
  --hm-cell: 11px;
  --hm-gap: 3px;
}
.profile-heatmap-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.profile-heatmap-months {
  display: grid;
  grid-template-columns: repeat(14, var(--hm-cell));
  column-gap: var(--hm-gap);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
  margin-left: 22px;  /* offset for the day-label column on the left */
}
.profile-heatmap-months span {
  grid-row: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Each label can extend a few columns past its start without
     shifting the layout — the month spans whatever weeks it covers. */
}
.profile-heatmap-body {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.profile-heatmap-day-labels {
  display: grid;
  grid-template-rows: repeat(7, var(--hm-cell));
  row-gap: var(--hm-gap);
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profile-heatmap-day-labels span {
  display: inline-flex;
  align-items: center;
  height: var(--hm-cell);
  line-height: 1;
}
.profile-heatmap {
  display: grid;
  grid-template-rows: repeat(7, var(--hm-cell));
  grid-auto-flow: column;
  grid-auto-columns: var(--hm-cell);
  gap: var(--hm-gap);
  padding: 0;
}
.profile-heatmap-cell {
  width: var(--hm-cell);
  height: var(--hm-cell);
  border-radius: 2px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  position: relative;
}
.profile-heatmap-cell--idle   { background: var(--bg-2); }
.profile-heatmap-cell--active { background: rgba(184, 116, 26, 0.35); border-color: rgba(184, 116, 26, 0.5); }
.profile-heatmap-cell--bright { background: var(--accent); border-color: var(--accent); }
.profile-heatmap-cell--future { visibility: hidden; }
.profile-heatmap-cell.is-today {
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
}
.profile-heatmap-cell:hover { outline: 1px solid var(--accent); outline-offset: 1px; }
.profile-heatmap-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  margin-left: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}
.profile-heatmap-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.profile-heatmap-legend-item .profile-heatmap-cell { width: 9px; height: 9px; }

.profile-bio {
  margin-top: 18px;
  padding: 18px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
}
.profile-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 32px 0 12px;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Compact one-line achievement row: icon + name + XP, on a single line.
   Smaller than the old 3-row card variant; fits more on the screen so
   the user can see all the badges they haven't earned yet. */
/* In-card achievements block — sits inside the profile card directly
   under the level progress bar. The header line mirrors the muted
   uppercase label used by the SKILLS card in the right gutter. */
.profile-ach-inline {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-ach-inline-hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.profile-ach-inline-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}
.profile-ach-inline-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.profile-ach-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Icon-only achievement chip. Earned achievements display only their
   icon; the full title + XP + description live inside a hover card
   that pops on hover or focus. Saves a lot of horizontal space.

   Uses the same circular chrome as the profile name-row badge chips. */
.profile-ach-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-1);
  cursor: default;
  transition: transform 120ms ease, border-color 120ms ease;
  outline: none;
}
.profile-ach-chip:hover,
.profile-ach-chip:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.profile-ach-chip-icon { font-size: 15px; line-height: 1; }
.profile-ach-chip.is-tiered { border-color: var(--accent); }

/* `position: fixed` so the card escapes the pane's overflow:hidden +
   the sidebar's stacking context. JS writes `top`/`left` on hover from
   the chip's bounding rect (top = chip.bottom + 8 so the card sits
   directly UNDER the chip; left = chip.center). CSS only handles the
   horizontal centering via translateX(-50%) and the opacity fade.
   Sat off-screen by default so it's not visible before JS has
   positioned it. */
.profile-ach-hovercard {
  position: fixed;
  top: -9999px;
  left: -9999px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 240px;
  max-width: 80vw;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 9999;
}
/* JS toggles .is-shown after re-parenting the card to <body>.
   The :hover selector below is a fallback for the brief window
   between page paint and the first hover that moves the card out
   of the chip subtree. */
.profile-ach-hovercard.is-shown,
.profile-ach-chip:hover > .profile-ach-hovercard,
.profile-ach-chip:focus-visible > .profile-ach-hovercard {
  opacity: 1;
}
.profile-ach-hovercard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.profile-ach-hovercard-title {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-0);
}
.profile-ach-hovercard-xp {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.profile-ach-hovercard-desc {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.4;
}

.profile-ach-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.profile-ach-row:hover { border-color: var(--accent); }
.profile-ach-row.is-locked {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.profile-ach-row.is-locked:hover { opacity: 0.7; filter: grayscale(0.3); }
.profile-ach-icon {
  font-size: 18px;
  line-height: 1;
  text-align: center;
}
.profile-ach-name {
  color: var(--text-0);
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-ach-xp {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.profile-ach-row.is-secret .profile-ach-name { font-style: italic; color: var(--text-3); }

/* "+N locked achievements" button rendered at the end of the inline
   grid for the profile owner. Clicking opens the overlay with the
   full list. Styled like an achievement row but as a clickable pill
   so it reads as "more here." */
.profile-ach-locked-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  background: transparent !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.profile-ach-locked-pill:hover {
  color: var(--accent);
  border-color: var(--accent) !important;
  background: var(--accent-glow) !important;
}

.profile-section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.profile-section-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
.profile-section-link:hover { text-decoration: underline; }
.profile-section-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* (?) info button next to XP label. */
.profile-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--border-strong) !important;
  background: transparent !important;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-2);
  /* The (?) lives inside a <span class="profile-stat-label"> which is
     plain text — without explicit cursor + user-select rules the
     browser shows the I-beam (text-select) cursor on the button. */
  cursor: pointer !important;
  user-select: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.profile-info-btn:hover { color: var(--accent); border-color: var(--accent) !important; }

.profile-info-popover {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-1);
  line-height: 1.5;
  max-width: 480px;
}
.profile-info-popover strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 8px 0 6px;
}
.profile-info-popover strong:first-child { margin-top: 0; }
.profile-info-popover ul { margin: 0; padding-left: 16px; }
.profile-info-popover li { margin-bottom: 2px; }

/* ─── Compact profile-card preview ────────────────────────────────────
   The /dev/<u>/edit/ right-gutter live preview was REMOVED; the only
   remaining consumer of `--preview` is the /welcome/ onboarding finale
   card (_profile_card_preview.html), which lays itself out via its own
   `--horizontal` rules in welcome.html. Neutralize the base 3-column grid
   areas so they can't leak into this single-column preview, and keep the
   font-size trims for the bits that card actually renders (name / handle
   / meta). */
.profile-card.profile-card--preview {
  grid-template-columns: 1fr;
  grid-template-areas: none;
  gap: 12px;
  padding: 14px 14px 16px;
  margin: 0;
}
.profile-card--preview .profile-name { font-size: 18px; }
.profile-card--preview .profile-handle { font-size: 11.5px; }
.profile-card--preview .profile-meta { font-size: 12px; }

/* Legacy avatar wrapper still drives the widget bindings. */
.profile-preview-avatar {
  position: relative;
  width: 96px;
  height: 96px;
}
.profile-preview-avatar img,
.profile-preview-avatar .profile-avatar-fallback {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--border-strong);
}
.profile-preview-avatar .profile-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-0);
  background: var(--bg-2);
}

/* ─── Avatar widget (replaces ugly ClearableFileInput) ──────────────── */
.avatar-widget {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar-widget-frame {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  background: var(--bg-3);
  flex-shrink: 0;
}
.avatar-widget-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-widget-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-0);
}
.avatar-widget-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 160ms ease;
}
.avatar-widget-frame:hover .avatar-widget-overlay,
.avatar-widget-frame:focus-within .avatar-widget-overlay {
  opacity: 1;
}
.avatar-overlay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-0);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.avatar-overlay-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #1a0e00;
}
.avatar-overlay-btn--danger:hover {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff;
}
.avatar-widget-help {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ─── Prefix input (LinkedIn / YouTube handle fields) ──────────────── */
.rvt-prefix-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rvt-prefix-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.rvt-prefix-host {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  user-select: none;
  white-space: nowrap;
}
.rvt-prefix-input {
  flex: 1;
  padding: 10px 12px;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-0);
  outline: none;
}
.rvt-prefix-input:focus { box-shadow: none !important; }
@media (max-width: 540px) {
  /* On narrow screens, stack the prefix above the input so it doesn't
     squeeze the typing area. */
  .rvt-prefix-wrap { flex-direction: column; }
  .rvt-prefix-host { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ─── Social icons on the read-only profile page ────────────────────── */
.profile-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.profile-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  background: var(--bg-2);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease, transform 120ms ease;
  text-decoration: none;
}
.profile-social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.profile-social-link[data-net="linkedin"]:hover { color: #0a66c2; border-color: #0a66c2; }
.profile-social-link[data-net="youtube"]:hover { color: #ff0033; border-color: #ff0033; }
.profile-social-link[data-net="github"]:hover  { color: #f6f8fa; border-color: #f6f8fa; }
.profile-social-link[data-net="website"]:hover { color: var(--accent); border-color: var(--accent); }
.profile-social-link svg { width: 14px; height: 14px; }

/* Owner-only grayed "add" icon for a not-yet-set social link. Reuses the
   round icon chrome but dimmed + dashed so it reads as "click to add".
   Hover restores full strength (the per-network hover color still applies
   via the shared `[data-net]` rules above). */
.profile-social-link--add {
  cursor: pointer;
  padding: 0;
  font: inherit;
  opacity: 0.4;
  color: var(--text-3);
  border-style: dashed;
}
.profile-social-link--add:hover {
  opacity: 1;
  border-style: solid;
  transform: translateY(-1px);
}

/* Inline social-link editor popover (appended to <body> so no transformed
   ancestor traps its position:fixed coords). */
.social-edit-pop {
  position: fixed;
  z-index: 1000;
  width: 250px;
  max-width: calc(100vw - 16px);
  padding: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.social-edit-pop-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-1);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.social-edit-pop-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.social-edit-pop-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.social-edit-pop-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-0);
}
.social-edit-pop-input::placeholder { color: var(--text-3); }
.social-edit-pop-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  flex-shrink: 0;
  border: 0;
  background: var(--accent);
  color: #1a0e00;
  cursor: pointer;
  transition: filter 120ms ease;
}
.social-edit-pop-save:hover { filter: brightness(1.05); }
.social-edit-pop-save:disabled { opacity: 0.6; cursor: default; }
.social-edit-pop-err {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--danger);
}
.profile-snippet-card,
.profile-achievement-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease;
}
.profile-snippet-card:hover,
.profile-achievement-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.profile-snippet-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.profile-snippet-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Description preview line on the snippet card. Plain text (no
   markdown render) so we don't pull in a parser just for this. */
.profile-snippet-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The reusable snippet grid card lives in snippets.css now —
   profile.html still loads that stylesheet, and so does the snippet
   library list. Single source of truth. */

/* Collapsible profile sections (Shared snippets / Private snippets /
   Recent comments). Built on native <details> + <summary> for a11y;
   the chevron rotates 90° when open. The default summary marker is
   hidden — we use our own. */
.profile-section--collapsible {
  margin-top: 24px;
}
.profile-section--collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-section--collapsible > summary::-webkit-details-marker { display: none; }
.profile-section-chevron {
  display: inline-block;
  font-size: 12px;
  color: var(--text-3);
  transform: rotate(-90deg);
  transition: transform 120ms ease;
}
.profile-section--collapsible[open] > summary .profile-section-chevron {
  transform: rotate(0deg);
}
.profile-section-private-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.profile-section--collapsible > .profile-snip-grid,
.profile-section--collapsible > .profile-grid {
  margin-top: 12px;
}

/* Legacy kebab styling kept for the `recent_comments` block which
   still uses .profile-snippet-card. */
.profile-snippet-kebab {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}
.profile-snippet-kebab .snip-kebab-btn {
  width: 24px;
  height: 24px;
  font-size: 16px;
}
/* Level progress bar — sits inline with the stats. */
.profile-level-bar {
  margin-top: 12px;
  margin-bottom: 6px;
  max-width: 360px;
}
.profile-level-bar-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.profile-level-bar-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.profile-level-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  box-shadow: inset 0 0 0 1px var(--accent);
  border-radius: 999px;
  transition: width 320ms cubic-bezier(.2,.7,.2,1);
}

.profile-stats {
  display: flex;
  gap: 24px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profile-stat-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.profile-stat-label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Login wall (rendered when an unauth user hits a gated feature page). */
.login-wall {
  max-width: 460px;
  margin: 48px auto;
  padding: 28px;
  text-align: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.login-wall-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: var(--accent-glow);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
}

/* Form-wide error block (server-side errors not tied to a single field). */
.form-error-block {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(184, 57, 90, 0.10);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 13px;
  margin-bottom: 16px;
}
.form-success-block {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(45, 140, 110, 0.10);
  border: 1px solid #2d8c6e;
  color: var(--text-0);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ─── XP info modal (the (?) opens this) ────────────────────────────── */
.rvt-xp-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  /* `flex-start` (not `center`) so when the modal box is taller than the
     viewport, the TOP stays reachable. With center alignment the overflow
     spills above the scroll origin and becomes unscrollable. */
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.rvt-xp-modal[hidden] { display: none !important; }
.rvt-xp-modal-box {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 16px 56px rgba(0,0,0,0.5);
  animation: rvt-xp-pop 220ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes rvt-xp-pop {
  from { transform: translateY(8px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}
.rvt-xp-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-2); font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  transition: color 120ms ease, background 120ms ease;
}
.rvt-xp-modal-close:hover { color: var(--accent); background: var(--bg-2) !important; }
.rvt-xp-modal-title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 600;
  color: var(--text-0);
}
.rvt-xp-modal-intro {
  margin: 0 0 22px;
  font-size: 13px; color: var(--text-2); line-height: 1.55;
}
.rvt-xp-modal-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}
@media (max-width: 600px) { .rvt-xp-modal-cols { grid-template-columns: 1fr; gap: 20px; } }
.rvt-xp-col h3 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
}
.rvt-xp-rules,
.rvt-xp-levels {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.rvt-xp-rule {
  display: grid; grid-template-columns: auto 1fr;
  gap: 12px; align-items: flex-start;
  background: transparent; border: 0;
}
.rvt-xp-rule-pts {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 4px 10px; border-radius: 6px;
  white-space: nowrap;
  align-self: flex-start;
  min-width: 64px;
  text-align: center;
}
.rvt-xp-rule-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rvt-xp-rule-label {
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-0); line-height: 1.35;
}
.rvt-xp-rule-desc {
  font-size: 12px; color: var(--text-2); line-height: 1.45;
}
.rvt-xp-rule-cap {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--text-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.rvt-xp-level {
  display: grid; grid-template-columns: auto 1fr;
  gap: 12px; align-items: baseline;
  font-family: var(--font-mono);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.rvt-xp-level:last-child { border-bottom: 0; }
.rvt-xp-level-num {
  font-size: 12.5px; font-weight: 700;
  color: var(--text-0); white-space: nowrap; min-width: 48px;
}
.rvt-xp-level-xp {
  font-size: 12.5px; color: var(--accent); text-align: right;
}
.rvt-xp-level-foot {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3);
  letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; border-bottom: 0;
}
.rvt-xp-loading { font-style: italic; color: var(--text-3); }

/* ─── Achievements overlay (the "Show all" modal) ──────────────────── */
.ach-overlay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
@media (max-width: 600px) { .ach-overlay-grid { grid-template-columns: 1fr; } }
.ach-overlay-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: border-color 120ms ease, transform 120ms ease;
}
.ach-overlay-row:hover { border-color: var(--accent); }
.ach-overlay-row.is-locked { opacity: 0.45; filter: grayscale(0.5); }
.ach-overlay-row.is-locked:hover { opacity: 0.75; }
.ach-overlay-row.is-earned { border-color: var(--accent); background: var(--accent-glow); }
.ach-overlay-icon { font-size: 22px; line-height: 1; text-align: center; }
.ach-overlay-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-overlay-name {
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-0);
  display: flex; align-items: center; gap: 6px;
}
.ach-overlay-tier-pill {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  color: var(--accent);
  background: var(--bg-1);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.ach-overlay-desc {
  font-size: 11.5px;
  color: var(--text-2); line-height: 1.4;
}
.ach-overlay-xp {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  color: var(--accent);
}
.ach-overlay-row.is-locked .ach-overlay-xp { color: var(--text-3); }

/* Section headings within the achievements overlay. */
.ach-overlay-section-title {
  margin: 18px 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.ach-overlay-section-title:first-of-type { margin-top: 8px; }

/* Tiered-ladder rendering: one row per progression, all rungs visible
   left-to-right with arrow connectors. Earned rungs in accent color,
   locked rungs dimmed. Reads as a clear "you're here, this is next." */
.ach-ladder-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}
.ach-ladder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ach-ladder-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ach-ladder-rungs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex-wrap: wrap;
}
.ach-ladder-rung {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex: 1;
  min-width: 130px;
  transition: border-color 120ms ease;
}
.ach-ladder-rung.is-earned {
  background: var(--accent-glow);
  border-color: var(--accent);
}
.ach-ladder-rung.is-locked { opacity: 0.45; filter: grayscale(0.6); }
.ach-ladder-rung.is-locked:hover { opacity: 0.75; }
.ach-ladder-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.ach-ladder-rung-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ach-ladder-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-ladder-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.ach-ladder-rung.is-earned .ach-ladder-count { color: var(--accent); }
.ach-ladder-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 16px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .ach-ladder-arrow { display: none; }
  .ach-ladder-rungs { flex-direction: column; }
  .ach-ladder-rung { width: 100%; }
}

/* Small tier indicator on the inline grid (multi-tier achievements). */
.profile-ach-row.is-tiered .profile-ach-name::after {
  content: '';
}

/* ─── Profile skills card (read-only 10-box display) ────────────────
   Mirrors the signup-wizard `.skill-boxes` look but compressed for
   inline display under the meta row. */
.profile-skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.profile-skill-row {
  display: grid;
  grid-template-columns: 80px 1fr 48px;
  align-items: center;
  gap: 10px;
}
.profile-skill-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
}
.profile-skill-boxes {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
.profile-skill-box {
  height: 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: background 100ms ease, border-color 100ms ease;
}
.profile-skill-box.is-filled {
  background: var(--accent);
  border-color: var(--accent);
}
.profile-skill-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  text-align: right;
}

/* "SKILLS" mini-heading in accent orange that sits directly above the
   compact skills card in the right gutter. Tight spacing so the label
   reads as the card's title, not a separate section. */
.profile-skills-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin: 12px 0 0;
}

/* Compact variant for the skills card when it lives in the right
   gutter under the heatmap. Boxes match the activity-heatmap cell
   size (--hm-cell, --hm-gap) so the visual rhythm aligns. */
.profile-skills--compact {
  margin: 4px 0 0;
  padding: 8px 10px;
  gap: 4px;
}
.profile-skills--compact .profile-skill-row {
  grid-template-columns: 60px auto;
  gap: 8px;
  align-items: center;
}
.profile-skills--compact .profile-skill-label {
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.profile-skills--compact .profile-skill-boxes {
  display: grid;
  grid-template-columns: repeat(10, var(--hm-cell));
  gap: var(--hm-gap);
}
.profile-skills--compact .profile-skill-box {
  width: var(--hm-cell);
  height: var(--hm-cell);
  border-radius: 2px;
}
/* Same accent outline on hover as the activity-heatmap cells, no
   tooltip — the rating is read through the row's title attribute. */
.profile-skills--compact .profile-skill-box:hover {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* ─── Editable skills section in profile_edit ───────────────────────
   Reuses the wizard `.skill-boxes` styling but lays the 3 picker rows
   in a tight stack with a heading. The hidden input from the form
   provides the value; JS in profile_edit.html drives the click-to-set. */
.profile-edit-skills {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.profile-edit-skills-hd {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  margin: 0 0 8px;
}
.profile-edit-skills-hint {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 12px;
}

/* ─── Compact edit-profile form layout ───────────────────────────────
   Tightens the /dev/<u>/edit/ form: avatar shares a row with the display
   name, job title + company share a row, social links are grouped under
   one heading, and the skills card uses smaller boxes. */

/* Avatar + Display name on one row. */
.edit-id-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.edit-id-row .field { margin-bottom: 0; }
.edit-id-row .field--avatar { flex: 0 0 auto; }
/* Right column: Display name, Job + Company row, Bio stacked. */
.edit-id-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edit-id-main .field-row-2 { margin-bottom: 0; }

/* Smaller avatar widget: frame left-aligned, short help beneath. */
.avatar-widget--sm {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.avatar-widget--sm .avatar-widget-frame { width: 64px; height: 64px; }
.avatar-widget--sm .avatar-widget-fallback { font-size: 20px; }
.avatar-widget--sm .avatar-overlay-btn { width: 26px; height: 26px; }
.avatar-widget--sm .avatar-widget-help {
  text-align: left;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

/* Two fields side by side (job title + company). */
.field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.field-row-2 .field { margin-bottom: 0; }

/* Grouped fields card (Social Links). */
.field-group {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.field-group-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.social-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.social-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.social-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Smaller, quieter prefix chip so the hardcoded host doesn't dominate. */
.social-fields .rvt-prefix-host {
  font-size: 10.5px;
  padding: 0 8px;
}

/* Compact skills card: label and the 10 boxes share one line. A fixed
   label column keeps every row's boxes starting at the same x even
   though the skill names differ in length. The long per-skill hint is
   hidden here (it lives on the /welcome/ terminal). */
.profile-edit-skills--compact { padding: 14px 16px; }
/* Same orange title treatment as the "Social Links" group heading. */
.profile-edit-skills--compact .profile-edit-skills-hd {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.profile-edit-skills--compact .skill-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  padding: 6px 12px;
}
.profile-edit-skills--compact .skill-row:last-child { margin-bottom: 0; }
.profile-edit-skills--compact .skill-row-head { display: block; margin-bottom: 0; }
.profile-edit-skills--compact .skill-row-hint { display: none; }
.profile-edit-skills--compact .skill-row-label { font-size: 12.5px; }
.profile-edit-skills--compact .skill-box { height: 18px; }

@media (max-width: 560px) {
  .field-row-2,
  .social-fields { grid-template-columns: 1fr; }
}