/* Profile header only: presentation changes do not affect other dashboard tiles. */
.team-member-profile .profile-header-refresh {
  container-type: inline-size;
  padding: 0;
  overflow: visible;
  border-radius: 14px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.profile-header-refresh [hidden] { display: none !important; }
.team-member-profile .profile-header-refresh .team-profile-cover-art {
  --profile-cover-background: linear-gradient(115deg, #243d59, #356576);
  --profile-ink: #f8fafc;
  --profile-muted: #e0e8f0;
  --profile-soft: rgba(255,255,255,.08);
  --profile-line: rgba(255,255,255,.18);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  grid-template-areas: "identity actions" "identity showcase";
  column-gap: 28px;
  row-gap: 18px;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 176px;
  margin: 0;
  padding: 22px 24px;
  box-sizing: border-box;
  border-radius: 13px 13px 0 0;
  color: var(--profile-ink);
  background: var(--profile-cover-background);
}
.team-member-profile .profile-header-refresh .team-profile-cover-art[data-cover-theme="2"],
.profile-header-refresh .team-profile-cover-picker [data-cover-theme="2"] { --profile-cover-background: linear-gradient(115deg, #42395e, #745c7e); }
.team-member-profile .profile-header-refresh .team-profile-cover-art[data-cover-theme="3"],
.profile-header-refresh .team-profile-cover-picker [data-cover-theme="3"] { --profile-cover-background: linear-gradient(115deg, #294a45, #437263); }
.team-member-profile .profile-header-refresh .team-profile-cover-art[data-cover-theme="4"],
.profile-header-refresh .team-profile-cover-picker [data-cover-theme="4"] { --profile-cover-background: linear-gradient(115deg, #604631, #85634c); }
.team-member-profile .profile-header-refresh .team-profile-cover-art[data-cover-theme="5"],
.profile-header-refresh .team-profile-cover-picker [data-cover-theme="5"] { --profile-cover-background: linear-gradient(115deg, #1d2b3e, #374c66); }
.team-member-profile .profile-header-refresh .team-profile-cover-art[data-cover-theme="6"],
.profile-header-refresh .team-profile-cover-picker [data-cover-theme="6"] { --profile-cover-background: linear-gradient(115deg, #e9f0f5, #d8eae8); }
.team-member-profile .profile-header-refresh .team-profile-cover-art[data-cover-theme="6"] {
  --profile-ink: #304b60;
  --profile-muted: #496579;
  --profile-soft: rgba(255,255,255,.45);
  --profile-line: rgba(48,75,96,.18);
}
.team-member-profile.is-leadership-profile .profile-header-refresh .team-profile-cover-art[data-profile-kind="leadership"] {
  --profile-ink: #fff8e9;
  --profile-muted: #f3e6cc;
  background: linear-gradient(115deg, #625139, #806a45) !important;
}
.profile-header-refresh .team-profile-cover-art::before,
.profile-header-refresh .team-profile-cover-art::after { display: none; }
.team-member-profile .profile-header-refresh .team-profile-cover-identity {
  position: static;
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  margin: 0;
  color: var(--profile-ink);
}
.team-member-profile .profile-header-refresh .profile-avatar-win-wrap { width: 88px; height: 88px; flex: 0 0 88px; align-self: center; transform: none; }
.team-member-profile .profile-header-refresh .team-profile-avatar {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
  transform: none;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 4px 15px rgba(13,25,44,.12);
  font-size: 26px;
}
.team-member-profile .profile-header-refresh .team-profile-identity-copy { flex: 1; padding: 0; text-shadow: none; min-width: 0; }
.profile-header-refresh .team-profile-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-member-profile .profile-header-refresh .team-profile-title-row h2 {
  width: auto;
  margin: 0;
  color: var(--profile-ink);
  font: 600 24px/1.3 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.team-member-profile .profile-header-refresh .role-badge {
  padding: 4px 8px;
  border: 1px solid var(--profile-line);
  border-radius: 6px;
  background: var(--profile-soft) !important;
  color: var(--profile-ink) !important;
  border-color: var(--profile-line) !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}
.profile-header-description { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; }
.team-member-profile .profile-header-refresh .team-profile-tagline {
  margin: 0;
  color: var(--profile-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.team-member-profile .profile-header-refresh .team-profile-status { color: var(--profile-muted); font-size: 12px; font-weight: 500; }
.team-member-profile .profile-header-refresh .team-profile-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 10px; }
.team-member-profile .profile-header-refresh .team-profile-meta > span {
  padding: 0;
  border: 0;
  background: none;
  color: var(--profile-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
}
.profile-header-refresh .team-profile-meta .ui-icon { width: 14px; height: 14px; }
.team-member-profile .profile-header-refresh .team-profile-level-line { width: min(390px,100%); max-width: 100%; margin: 12px 0 0; padding: 0; }
.team-member-profile .profile-header-refresh .team-profile-progress-copy { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.team-member-profile .profile-header-refresh .team-profile-progress-copy strong,
.team-member-profile .profile-header-refresh .team-profile-progress-copy span {
  color: var(--profile-muted) !important;
  text-shadow: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.team-member-profile .profile-header-refresh .team-profile-progress-copy strong { color: var(--profile-ink) !important; font-weight: 500; }
.team-member-profile .profile-header-refresh .xp-bar-track { height: 4px; background: var(--profile-line); border-radius: 3px; }
.team-member-profile .profile-header-refresh .xp-bar-fill { background: #83c5dd; }
.team-member-profile .profile-header-refresh .team-profile-cover-art[data-cover-theme="6"] .xp-bar-fill { background: #29869b; }
.profile-header-refresh .team-profile-owner-actions { position: static; grid-area: actions; justify-content: flex-end; gap: 6px; align-self: start; }
.profile-header-refresh .team-profile-owner-actions button {
  padding: 7px 10px;
  min-height: 34px;
  font: 500 12px/1.3 Inter, system-ui, sans-serif;
  color: var(--profile-muted);
  background: var(--profile-soft);
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: none;
  backdrop-filter: none;
}
.profile-header-refresh .team-profile-owner-actions button .ui-icon { width: 15px; height: 15px; }
.profile-header-refresh .team-profile-owner-actions button:hover { color: var(--profile-ink); border-color: var(--profile-line); }
.profile-header-showcase-area { grid-area: showcase; min-width: 0; align-self: end; }
.profile-header-refresh .team-profile-cover-art:has(.team-profile-owner-actions[hidden]) .profile-header-showcase-area { grid-row: 1 / 3; align-self: center; }
.profile-header-showcase-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--profile-muted); font-size: 12px; }
.profile-header-showcase-heading button {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--profile-ink);
  font: 500 12px/1.4 Inter, system-ui, sans-serif;
  cursor: pointer;
  text-underline-offset: 3px;
}
.profile-header-showcase-heading button:hover { text-decoration: underline; }
.team-member-profile .profile-header-refresh .team-profile-cover-showcase { position: static; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.profile-header-refresh .team-cover-achievement {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--profile-line);
  border-radius: 9px;
  background: var(--profile-soft);
  box-shadow: none;
  backdrop-filter: none;
  transition: background .15s;
}
.profile-header-refresh .team-cover-achievement:hover { background: var(--profile-line); }
.profile-header-refresh .team-cover-achievement > span { width: 27px; height: 32px; flex: 0 0 27px; background: none; border-radius: 0; font-size: 22px; }
.profile-header-refresh .team-cover-achievement img { width: 25px; height: 34px; flex: 0 0 25px; object-fit: cover; border-radius: 4px; }
.profile-header-refresh .team-cover-achievement strong { color: var(--profile-ink); font-size: 12px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.profile-showcase-empty { grid-column: 1 / -1; margin: 0; padding: 10px 0; color: var(--profile-muted); font-size: 13px; line-height: 1.5; }
.team-member-profile .profile-header-refresh .team-profile-quick-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; min-height: 76px; padding: 16px 24px; }
.team-member-profile .profile-header-refresh .team-profile-quick-stats > div { padding: 0 18px; border: 0; border-right: 1px solid var(--border-color); }
.team-member-profile .profile-header-refresh .team-profile-quick-stats > div:first-child { padding-left: 0; }
.team-member-profile .profile-header-refresh .team-profile-quick-stats > div:last-child { grid-column: auto; border-right: 0; }
.team-member-profile .profile-header-refresh .team-profile-quick-stats span { font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.4; }
.team-member-profile .profile-header-refresh .team-profile-quick-stats strong { margin-top: 5px; color: #425b70; font-size: 20px; font-weight: 550; line-height: 1.2; font-variant-numeric: tabular-nums; }
body.theme-dark .profile-header-refresh .team-profile-quick-stats strong { color: #d6e3ee; }
.team-member-profile .profile-header-refresh .team-profile-cover-picker { top: 62px; right: 24px; z-index: 8; grid-template-columns: repeat(6,28px); padding: 12px; background: #233449; border-color: #657990; backdrop-filter: none; box-shadow: 0 8px 24px rgba(10,25,44,.2); }
.profile-header-refresh .team-profile-cover-picker button { width: 28px; height: 28px; background: var(--profile-cover-background); }
.profile-header-refresh .team-profile-cover-picker button[data-cover-theme="1"] { --profile-cover-background: linear-gradient(115deg,#243d59,#356576); }
.profile-header-refresh .team-profile-cover-picker .profile-presentation-error { grid-column: 1 / -1; max-width: 210px; color: #ffc1c1; }
.profile-header-refresh button:focus-visible, #profile-showcase-dialog button:focus-visible { outline: 2px solid #3bbce4; outline-offset: 3px; }
.profile-header-refresh button:disabled, #profile-showcase-dialog button:disabled { opacity: .55; cursor: wait; }

/* Native dialog supplies focus containment, Escape, and an unblurred backdrop. */
#profile-showcase-dialog { width: 580px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--border-color); border-radius: 15px; background: var(--bg-card,#fff); color: var(--text-main,#304b60); box-shadow: 0 24px 80px rgba(7,24,42,.2); overflow: hidden; font-family: Inter,system-ui,sans-serif; }
#profile-showcase-dialog::backdrop { background: rgba(10,25,43,.35); backdrop-filter: none; }
#profile-showcase-dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); margin: 0; }
#profile-showcase-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 22px 16px; }
#profile-showcase-dialog h3 { margin: 0 0 6px; color: inherit; font-size: 21px; font-weight: 600; }
#profile-showcase-dialog header p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
#profile-showcase-dialog button { font: 500 13px/1.4 Inter,system-ui,sans-serif; cursor: pointer; }
#profile-showcase-dialog header button { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; color: var(--text-muted); background: var(--bg-body,#f4f7fa); font-size: 23px; }
.profile-showcase-selection-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 22px; padding: 12px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; }
.profile-showcase-selection-note strong { flex-shrink: 0; color: #087fa8; font-size: 13px; font-weight: 600; }
#profile-showcase-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 20px; }
#profile-showcase-options h4 { display: flex; gap: 8px; margin: 20px 0 10px; color: inherit; font-size: 13px; font-weight: 600; }
#profile-showcase-options h4 span { color: var(--text-muted); font-weight: 400; }
.profile-showcase-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#profile-showcase-options button { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 59px; padding: 10px; text-align: left; color: var(--text-main); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 9px; }
#profile-showcase-options button:hover { border-color: #69b7d1; }
#profile-showcase-options button[aria-pressed="true"] { border-color: #1797c1; background: rgba(14,165,205,.08); }
#profile-showcase-options button > img { flex: 0 0 28px; width: 28px; height: 38px; object-fit: cover; border-radius: 4px; }
#profile-showcase-options button > span:first-child { flex: 0 0 28px; font-size: 24px; text-align: center; }
.profile-reward-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.profile-reward-order { display: grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 11px; }
.profile-reward-order:not(:empty) { background: #0b87ae; }
.profile-presentation-error { font-size: 12px; line-height: 1.5; color: #b93045; margin: 0; }
.profile-presentation-error:empty { display: none; }
#profile-showcase-error { padding: 10px 22px; }
#profile-showcase-dialog footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-color); }
#profile-showcase-dialog footer button { min-height: 38px; padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: none; color: var(--text-muted); }
#profile-showcase-dialog #profile-showcase-save { background: #077bab; border-color: #077bab; color: #fff; }
.profile-picker-empty { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
@container (max-width: 700px) {
  .team-member-profile .profile-header-refresh .team-profile-cover-art { grid-template-columns: minmax(0,1fr); grid-template-areas: "actions" "identity" "showcase"; gap: 18px; padding: 20px; }
  .profile-header-refresh .team-profile-cover-art:has(.team-profile-owner-actions[hidden]) .profile-header-showcase-area { grid-row: auto; }
  .profile-header-refresh .team-profile-cover-showcase { max-width: 500px; }
  .profile-header-refresh .profile-header-showcase-heading { max-width: 500px; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats { padding: 16px 20px; }
  .team-member-profile .profile-header-refresh .team-profile-cover-picker { top: 60px; right: 20px; }
}
@container (max-width: 480px) {
  .team-member-profile .profile-header-refresh .team-profile-cover-art { padding: 16px; gap: 16px; }
  .team-member-profile .profile-header-refresh .team-profile-cover-identity { gap: 14px; align-items: flex-start; }
  .team-member-profile .profile-header-refresh .team-profile-avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: 22px; }
  .team-member-profile .profile-header-refresh .profile-avatar-win-wrap { width: 64px; height: 64px; flex-basis: 64px; align-self: flex-start; margin-top: 3px; }
  .team-member-profile .profile-header-refresh .team-profile-title-row h2 { font-size: 21px; }
  .team-member-profile .profile-header-refresh .team-profile-meta { gap: 7px; }
  .profile-header-refresh .team-cover-achievement { flex-direction: column; align-items: flex-start; padding: 9px; gap: 6px; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; gap: 18px 0; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats > div { padding: 0 12px; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats > div:nth-child(odd) { padding-left: 0; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats > div:nth-child(even) { border-right: 0; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats strong { font-size: 19px; }
}
@media (max-width: 450px) {
  .profile-showcase-option-grid { grid-template-columns: 1fr; }
  #profile-showcase-dialog header { padding: 18px 16px 14px; }
  .profile-showcase-selection-note { margin: 0 16px; }
  #profile-showcase-options { padding: 0 16px 16px; }
  #profile-showcase-dialog footer { padding: 14px 16px; }
}
@container (max-width: 300px) {
  .team-member-profile .profile-header-refresh .team-profile-cover-identity { flex-direction: column; }
  .team-member-profile .profile-header-refresh .team-profile-identity-copy { width: 100%; }
  .profile-header-refresh .team-profile-owner-actions { flex-wrap: wrap; justify-content: flex-start; }
  .team-member-profile .profile-header-refresh .team-profile-cover-showcase { grid-template-columns: minmax(0,1fr); }
  .profile-header-refresh .team-cover-achievement { flex-direction: row; align-items: center; min-height: 52px; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .team-member-profile .profile-header-refresh .team-profile-quick-stats > div { padding: 0; border: 0; }
  .profile-header-showcase-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .profile-header-refresh .team-cover-achievement { transition: none; } }

/* Illustrated covers: the decoration never intercepts profile controls. */
.profile-header-refresh [data-cover-theme="parrots"] { --profile-cover-art-image:url("../assets/profile-covers/parrots-v1.webp"); --profile-art-base:#08292e; --profile-art-ratio:2.25; }
.profile-header-refresh [data-cover-theme="cats"] { --profile-cover-art-image:url("../assets/profile-covers/cats-v1.webp"); --profile-art-base:#261b38; }
.profile-header-refresh [data-cover-theme="dog"] { --profile-cover-art-image:url("../assets/profile-covers/dog-v1.webp"); --profile-art-base:#253229; }
.profile-header-refresh [data-cover-theme="car"] { --profile-cover-art-image:url("../assets/profile-covers/car-v1.webp"); --profile-art-base:#1b3742; }
.profile-header-refresh [data-cover-theme="plane"] { --profile-cover-art-image:url("../assets/profile-covers/plane-v1.webp"); --profile-art-base:#172e4d; }
.profile-header-refresh [data-cover-theme="budgies"] { --profile-cover-art-image:url("../assets/profile-covers/budgies-v1.webp"); --profile-art-base:#092e2c; }
.profile-header-refresh [data-cover-theme="white-dog"] { --profile-cover-art-image:url("../assets/profile-covers/white-dog-v1.webp"); --profile-art-base:#101829; }
.profile-header-refresh [data-cover-theme="ginger-cat"] { --profile-cover-art-image:url("../assets/profile-covers/ginger-cat-v2.webp"); --profile-art-base:#2a0d09; }
.team-member-profile .profile-header-refresh .team-profile-cover-art.has-cover-art {
  position:relative;
  isolation:isolate;
  background:var(--profile-art-base) !important;
  --profile-ink:#f8fafc;
  --profile-muted:#e0e8f0;
  --profile-soft:rgba(5,17,31,.3);
  --profile-line:rgba(255,255,255,.22);
}
.profile-header-refresh .team-profile-cover-art.has-cover-art::before {
  content:"";
  display:block;
  position:absolute;
  inset:0 auto auto 58%;
  width:auto;
  height:100%;
  max-width:100%;
  aspect-ratio:var(--profile-art-ratio,2);
  border-radius:0;
  background-image:var(--profile-cover-art-image);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
  opacity:.95;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:-1;
}
.team-member-profile .profile-header-refresh:has(.team-profile-cover-picker:not([hidden])) { position:relative; z-index:12; }
.team-member-profile .profile-header-refresh .team-profile-cover-picker {
  width:342px;
  max-width:calc(100% - 32px);
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  max-height:min(440px,70dvh);
  overflow-y:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
}
.profile-header-refresh .profile-cover-picker-label { color:#cbd9e6; font:500 12px/1.4 Inter,system-ui,sans-serif; }
.profile-cover-colors { display:flex; justify-content:space-between; gap:8px; padding:2px 3px 6px; flex-wrap:wrap; }
.profile-header-refresh .profile-cover-colors button { width:30px; height:30px; flex:0 0 30px; }
.profile-cover-art-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:2px 3px; }
.profile-header-refresh .team-profile-cover-picker .profile-cover-art-option {
  width:100%;
  height:84px;
  min-width:0;
  display:flex;
  align-items:flex-end;
  padding:0;
  border-radius:8px;
  overflow:hidden;
  background-color:var(--profile-art-base);
  background-image:var(--profile-cover-art-image);
  background-size:auto 66px;
  background-position:center top;
  background-repeat:no-repeat;
  color:#edf4fc;
  border:2px solid transparent;
}
.profile-cover-art-option span { display:block; width:100%; padding:5px 2px; background:rgba(8,20,34,.9); font:500 12px/1.3 Inter,system-ui,sans-serif; text-align:center; }
.profile-header-refresh .team-profile-cover-picker button.active { border-color:#eaf8ff; box-shadow:0 0 0 2px #28a9d0; }
.profile-header-refresh .team-profile-cover-picker .profile-presentation-error { max-width:none; }
@container (max-width: 1050px) {
  .profile-header-refresh .team-profile-cover-art.has-cover-art::before {
    background-position:center;
    mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
    opacity:.28;
  }
}
@container (max-width: 400px) {
  .team-member-profile .profile-header-refresh .team-profile-cover-picker { right:16px; }
  .profile-cover-art-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container (max-width: 230px) {
  .profile-cover-art-grid { grid-template-columns:minmax(0,1fr); }
}