/* The profile, round 9 (components/profile/*): the owner's eToro-like
 * profile. The head with a large Copy, four tabs, the Performance card's
 * bars, the Stats and Chart tabs, About and Similar traders, one's own
 * composer, and one's own Portfolio tab (the old Portfolio page's sections,
 * drawn by dex.css and sendit.css under .pep-folio as before).
 *
 * Built from shell.css's tokens; after social.css, whose profile head, pills
 * and counts it reshapes. Green and red only for a direction (a bar, a PnL,
 * the line); the lime is the primary action (Copy) and the selected tab.
 * Every size of a chart is an SVG attribute (style-src 'self'). */

/* -------------------------------------------------------------- the head */

.pep-prof-head { padding: 24px; }
.pep-prof-head .pep-face-lg { width: 88px; height: 88px; }
.pep-prof-badge {
  justify-self: start;
  margin: 2px 0 0;
  padding: 3px 10px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font-size: 12px;
  font-weight: 700;
}
.pep-prof-badge::before { content: "\2605"; margin-right: 6px; color: var(--pep-brand); }
/* Copy is the head's primary action, and the largest of its buttons (first in CopyTrader's span only when it is Copy:
   "You copy this trader" comes before Add funds and Manage). */
.pep-prof-do .pep-cp-trader > .pep-btn:first-child:not([disabled]) {
  min-width: 132px;
  min-height: 44px;
  padding: 0 28px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-brand);
  color: var(--pep-brand-ink);
  font-size: 16px;
  font-weight: 800;
}
/* A wide screen keeps the actions on the head's right, as the name's line has room beside them. */
@media (min-width: 1100px) {
  .pep-prof-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pep-prof-do { grid-column: 3; justify-content: flex-end; max-width: 560px; }
}
.pep-prof-do .pep-cp-trader > .pep-btn:first-child:not([disabled]):hover { background: #d2ff86; color: var(--pep-brand-ink); }

/* -------------------------------------------------------------- the tabs */

.pep-prof-tabbar {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: -4px 0 0;
  border-bottom: 1px solid var(--pep-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.pep-prof-tab {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pep-prof-tab:hover { color: var(--pep-text); }
.pep-prof-tab[aria-selected="true"] { border-bottom-color: var(--pep-brand); color: var(--pep-text); }
.pep-prof-tab:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-prof-panel { min-width: 0; }
.pep-prof-main, .pep-prof-folio { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* ------------------------------------------------- the Performance card */

.pep-pf { display: grid; gap: 14px; min-width: 0; }
.pep-pf .pep-panel-head { margin: 0; }
.pep-pf-seg { min-width: 240px; }
.pep-pf-bars { display: grid; gap: 6px; min-width: 0; }
/* The plot leaves room on its right for the axis's three figures. */
.pep-pf-plot, .pep-pnlc-plot { position: relative; height: 200px; padding-right: 64px; }
.pep-pf-svg, .pep-pnlc-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pep-pf-track { fill: var(--pep-panel-2); }
.pep-pf-bar-up { fill: var(--pep-up); }
.pep-pf-bar-down { fill: var(--pep-down); }
.pep-pf-zero { stroke: var(--pep-line-strong); stroke-width: 0.4; }
.pep-pf-axis {
  position: absolute;
  right: 0;
  width: 58px;
  color: var(--pep-text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: left;
}
.pep-pf-axis-hi { top: 0; }
.pep-pf-axis-mid { top: calc(50% - 6px); }
.pep-pf-axis-lo { bottom: 0; }
.pep-pf-names { display: flex; margin: 0; padding: 0 64px 0 0; list-style: none; }
.pep-pf-names li { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--pep-text-3); font-size: 11px; text-align: center; white-space: nowrap; }
.pep-pf-note { margin: 0; font-size: 12px; }
.pep-pf-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--pep-line);
}
.pep-pf-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pep-line); }
.pep-pf-facts dt { display: inline-flex; align-items: center; gap: 6px; color: var(--pep-text-2); font-size: 14px; }
.pep-pf-facts dd { display: grid; justify-items: end; margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pep-pf-facts dd small, .pep-st-facts dd small { color: var(--pep-text-3); font-size: 11px; font-weight: 500; }
/* The risk score in its box, as eToro draws it. */
.pep-pf-risk {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1.5px solid var(--pep-brand);
  border-radius: 6px;
  color: var(--pep-brand);
  font-size: 15px;
  font-weight: 800;
}

/* ------------------------------------------------------ Stats and Chart */

.pep-st { display: grid; gap: 16px; min-width: 0; }
.pep-st-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pep-st-window { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-st-window-h { margin: 0; color: var(--pep-text); font-size: 13px; font-weight: 800; }
.pep-st-facts { display: grid; gap: 8px; margin: 0; }
.pep-st-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pep-st-facts dt { color: var(--pep-text-2); font-size: 13px; }
.pep-st-facts dd { display: grid; justify-items: end; margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pep-st-note { margin: 8px 0 0; font-size: 12px; }
.pep-st-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pep-st-risk { display: flex; align-items: center; gap: 12px; margin: 0; }
.pep-st-markets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pep-st-markets li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-st-markets li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-st-count { margin-left: auto; color: var(--pep-text-2); font-size: 12px; white-space: nowrap; }

.pep-pnlc { display: grid; gap: 12px; min-width: 0; }
.pep-pnlc .pep-panel-head { margin: 0; }
.pep-pnlc-plot { height: 240px; }
.pep-pnlc-now { font-size: var(--pep-num-lg); font-variant-numeric: tabular-nums; }
.pep-pnlc-line-up { fill: none; stroke: var(--pep-up); stroke-width: 2; }
.pep-pnlc-line-down { fill: none; stroke: var(--pep-down); stroke-width: 2; }
.pep-pnlc-area-up { fill: var(--pep-up); fill-opacity: 0.12; }
.pep-pnlc-area-down { fill: var(--pep-down); fill-opacity: 0.12; }
.pep-pnlc-zero { stroke: var(--pep-line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.pep-pnlc-dates { display: flex; justify-content: space-between; margin: 0; padding-right: 64px; font-size: 11px; }
.pep-pnlc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pep-pnlc-facts > div { display: grid; justify-items: start; gap: 2px; }
.pep-pnlc-facts dd { justify-items: start; }

/* ------------------------------------------- About, Similar, the composer */

.pep-about { display: grid; gap: 12px; min-width: 0; }
.pep-about .pep-panel-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-about-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pep-about-chips li { padding: 3px 10px; border-radius: var(--pep-radius-pill); background: var(--pep-panel-2); color: var(--pep-text-2); font-size: 12px; font-weight: 600; }
.pep-about .pep-prof-bio { padding: 0; }
.pep-about .pep-prof-counts { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; padding-top: 12px; border-top: 1px solid var(--pep-line); }
.pep-about .pep-prof-counts div + div { border-left: 1px solid var(--pep-line); }
.pep-about .pep-prof-counts dd { font-size: 24px; }

.pep-similar { display: grid; gap: 4px; min-width: 0; }
.pep-similar-list { display: grid; margin: 0; padding: 0; list-style: none; }
/* A side card is narrow: the trader on one line, the PnL and the markets in common under it, Copy beside both. */
.pep-similar-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--pep-line);
}
.pep-similar-list li:last-child { border-bottom: 0; }
.pep-similar-list .pep-trader { min-width: 0; }
.pep-similar-list .pep-trader-text { min-width: 0; overflow: hidden; }
.pep-similar-list .pep-trader-primary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-similar-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; grid-row: 2; padding-left: 38px; font-variant-numeric: tabular-nums; }
.pep-similar-fig .pep-faint { font-size: 11px; }
.pep-similar-copy { grid-column: 2; grid-row: 1 / 3; border-radius: var(--pep-radius-pill); box-shadow: inset 0 0 0 1px var(--pep-brand); color: var(--pep-brand); }

.pep-compose { display: grid; gap: 10px; min-width: 0; }
.pep-compose .pep-panel-title { margin: 0; }
.pep-compose-pick { display: grid; gap: 4px; color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-compose-pick select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font: inherit;
}

/* ------------------------------------------------ the photo (round 14) */

/* The face column: the face (or one's photo), Change photo under it on one's own profile, and what it did. */
.pep-prof-face { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; }
.pep-prof-face .pep-live { max-width: 140px; margin: 0; color: var(--pep-text-2); font-size: 12px; text-align: center; }
.pep-avatar-change { min-height: 32px; font-size: 13px; white-space: nowrap; }
.pep-avatar-hidden-note { max-width: 140px; margin: 0; color: var(--pep-text-2); font-size: 12px; text-align: center; }
.pep-prof-photo-report { font-size: 13px; }
/* The editor: a row of the head, under the rest. */
.pep-avatar-edit {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--pep-radius);
  background: var(--pep-panel-2);
}
.pep-avatar-edit:focus { outline: none; }
.pep-avatar-edit:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-avatar-edit-title { margin: 0; font-size: 15px; font-weight: 800; }
.pep-avatar-edit-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
.pep-avatar-preview-box .pep-face-lg,
.pep-avatar-preview {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--pep-panel);
  box-shadow: 0 0 0 1px var(--pep-line-strong);
}
.pep-avatar-edit-do { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.pep-avatar-help, .pep-avatar-problem { margin: 0; font-size: 13px; }
.pep-avatar-edit-do > .pep-live { margin: 0; font-size: 13px; }
/* The file input covers its label, unseen: the label is the button, the input keeps focus and the picker. */
.pep-avatar-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line-strong);
  cursor: pointer;
}
.pep-avatar-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pep-avatar-pick:focus-within { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-avatar-edit-btns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
/* A picture or one of SENDIT's faces (round 14): the editor's two ways, a segmented pair on the editor's ground. */
.pep-avatar-modes { width: 100%; max-width: 360px; background: var(--pep-panel); }
/* "Choose a face" (FacePicker.jsx): a colour (8, each the chosen face in it), then 36 faces in that colour. */
.pep-face-pick { display: grid; gap: 6px; width: 100%; max-width: 360px; }
.pep-face-pick-label { margin: 4px 0 0; color: var(--pep-text-2); font-size: 13px; font-weight: 700; }
.pep-face-skins { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.pep-face-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pep-face-opt {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.pep-face-opt > .pep-face { width: 100%; height: 100%; }
.pep-face-skin > .pep-face { width: 76%; height: 76%; }
.pep-face-opt:hover:where(:not([aria-disabled="true"])) { background: var(--pep-panel-hover); }
.pep-face-opt[aria-checked="true"] { background: var(--pep-panel); box-shadow: 0 0 0 2px var(--pep-brand); }
.pep-face-opt:focus-visible { outline: 2px solid var(--pep-text); outline-offset: 2px; }
.pep-face-opt[aria-disabled="true"] { cursor: default; }
/* The face that shows now: a lime dot on its corner, said in its name ("now") and in the legend. */
.pep-face-opt-now::after,
.pep-face-now-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pep-brand);
  box-shadow: 0 0 0 2px var(--pep-panel-2);
}
.pep-face-opt-now::after { content: ""; position: absolute; top: 1px; right: 1px; }
.pep-face-now-dot { display: inline-block; flex: none; }
.pep-face-legend { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12px; }
/* The moderators' queue: a reported photo, as large as a profile shows it. */
.pep-mod-photo { display: block; width: 96px; height: 96px; margin: 8px 0; border-radius: 50%; object-fit: cover; }

/* One's own Portfolio tab: the old page's open sections sit in the tab's own column. */
.pep-prof-folio .pep-folio { display: grid; gap: 16px; }
.pep-me-out { max-width: 640px; }

/* --------------------------------------------------------------- narrow */

@media (max-width: 899px) {
  .pep-st-windows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .pep-prof-head { padding: 16px; }
  .pep-prof-head .pep-face-lg { width: 64px; height: 64px; }
  .pep-avatar-edit { padding: 12px; }
  .pep-avatar-edit-row { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pep-avatar-edit-do { justify-items: stretch; width: 100%; }
  .pep-avatar-pick { justify-content: center; }
  .pep-prof-tabbar { justify-content: flex-start; }
  .pep-prof-tab { min-width: 0; flex: 1 0 auto; padding: 0 12px; }
  .pep-pf .pep-panel-head { flex-wrap: wrap; }
  .pep-pf-seg { flex: 1 1 100%; min-width: 0; }
  .pep-pf-plot, .pep-pnlc-plot { height: 160px; padding-right: 52px; }
  .pep-pf-axis { width: 48px; font-size: 10px; }
  .pep-pf-names, .pep-pnlc-dates { padding-right: 52px; }
  /* Fourteen days' names do not fit a phone: every other one. */
  .pep-pf-names-many li:nth-child(even) > [aria-hidden="true"] { visibility: hidden; }
  .pep-pf-names li { font-size: 10px; }
  .pep-pf-facts { grid-template-columns: minmax(0, 1fr); }
  .pep-st-pair { grid-template-columns: minmax(0, 1fr); }
  .pep-pnlc-facts { grid-template-columns: minmax(0, 1fr); }
  .pep-pnlc-facts > div { display: flex; justify-content: space-between; }
}