/*
 * Your copies (round 14, components/copy/YourCopies.jsx and its parts): the
 * head over all the copies, the list of copied traders (an ARIA table of grid
 * rows, as the watchlist's), one copy opened under its row with its figures,
 * actions and tabs (Open, History, Activity: each a table or a list read a
 * page at a time). The copy dialogs, the badges and the profile's Copy stay in
 * social.css (round 6's block). Built from shell.css's tokens; lime only in a
 * selected tab's line and the focus outlines. The widths follow the list's own
 * room (a container query), not the window's: the profile's Portfolio tab and
 * the page give it different room. Motion only for those who did not ask for
 * less (the block at the end).
 */

.pep-cps { display: grid; gap: 14px; min-width: 0; container: pep-cps / inline-size; }

/* ---- the head: all your copies */
.pep-cps-sum { display: grid; gap: 12px; }
.pep-cps-sum-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pep-cps-sum-title { margin: 0; font-size: 15px; }
.pep-cps-sum-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pep-cps-sum-figs dt,
.pep-cps-figs dt { color: var(--pep-text-3); font-size: 12px; }
.pep-cps-sum-figs dd,
.pep-cps-figs dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.pep-cps-sum-figs .pep-cps-sum-lead dd { font-size: var(--pep-num-lg); }
.pep-cps-sum-figs dd.pep-cps-sub,
.pep-cps-figs dd.pep-cps-sub { font-size: 12px; font-weight: 600; }
.pep-cps-pct { margin-left: 4px; font-size: 12px; font-weight: 600; }
.pep-cps-basis { margin: 0; font-size: 12px; line-height: 1.45; }

/* ---- the filter and the order */
.pep-cps-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pep-cps-filter { flex: 0 1 auto; max-width: 100%; }
.pep-cps-filter > button { flex: 1 0 auto; padding: 0 12px; white-space: nowrap; }
.pep-cps-n { margin-left: 2px; color: var(--pep-text-3); font-size: 12px; }
.pep-cps-sortby,
.pep-cps-market { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; max-width: 100%; color: var(--pep-text-2); font-size: 13px; }
.pep-cps-sortby select,
.pep-cps-market select { min-width: 0; max-width: 100%; }

/* ---- the list: one row per copied trader. The minimums: a name with its face (140), "Copying" (88), an equity
   like "$12,345.67" (84), a PnL with its percent (96), the open count (48), "Last activity" (80), Details (104): with
   the gaps and the row's padding 728 px, under the container query's step (760) below. */
.pep-cps-table,
.pep-cps-mtable { min-width: 0; }
.pep-cps-head,
.pep-cps-row {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) 88px minmax(84px, 1fr) minmax(96px, 1.1fr) 48px minmax(80px, 0.9fr) 104px;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
}
.pep-cps-head { padding-top: 0; padding-bottom: 8px; border-bottom: 1px solid var(--pep-line); color: var(--pep-text-3); font-size: 12px; font-weight: 700; }
.pep-cps-num { text-align: right; white-space: nowrap; }
.pep-cps-row { border-bottom: 1px solid var(--pep-line); font-size: 14px; cursor: pointer; scroll-margin-top: 80px; }
.pep-cps-row:hover,
.pep-cps-row:focus-within,
.pep-cps-row-open { background: var(--pep-panel); }
.pep-cps-row-open { border-bottom-color: transparent; border-radius: 12px 12px 0 0; }
.pep-cps-row:target { box-shadow: inset 0 0 0 1px var(--pep-line-strong); }
.pep-cps-who { display: flex; align-items: center; min-width: 0; }
.pep-cps-who .pep-trader { max-width: 100%; }
.pep-cps-pnl { display: grid; justify-items: end; }
.pep-cps-pnl .pep-cps-pct { margin-left: 0; }
.pep-cps-k { display: none; }
.pep-cps-do { display: flex; justify-content: flex-end; }
.pep-cps-toggle { gap: 6px; white-space: nowrap; }
.pep-cps-chev { flex: none; }
[aria-expanded="true"] > .pep-cps-chev { transform: rotate(180deg); }
.pep-cps-row-new .pep-cps-wide { grid-column: 3 / -1; }
.pep-cps-detail-row { display: block; }
.pep-cps-detail-cell { display: block; margin-bottom: 8px; padding: 4px 8px 16px; border-bottom: 1px solid var(--pep-line);
  border-radius: 0 0 12px 12px; background: var(--pep-panel); }

/* ---- one copy, opened */
.pep-cps-detail { display: grid; gap: 12px; min-width: 0; }
.pep-cps-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding: 12px;
  border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-cps-actions .pep-cps-prof { margin-left: auto; font-size: 13px; }
.pep-cps-said:empty { display: none; }
.pep-cps-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--pep-line); scrollbar-width: none; }
.pep-cps-tab { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--pep-text-2); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.pep-cps-tab:hover { color: var(--pep-text); }
.pep-cps-tab[aria-selected="true"] { border-bottom-color: var(--pep-brand); color: var(--pep-text); }
.pep-cps-tab:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-cps-panel,
.pep-cps-part { display: grid; gap: 10px; min-width: 0; }
.pep-cps-note { margin: 0; font-size: 12px; }

/* A tab's table of copied positions: six columns, Open's (position, margin, PnL, state, opened) or History's
   (position, margin, result, opened, closed), then Details. */
.pep-cps-mhead,
.pep-cps-mrow {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(72px, 0.8fr) minmax(112px, 1.2fr) minmax(80px, 0.9fr) minmax(64px, 0.8fr) 72px;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
}
.pep-cps-mhead { padding-top: 0; border-bottom: 1px solid var(--pep-line); color: var(--pep-text-3); font-size: 12px; font-weight: 700; }
.pep-cps-mrow { border-bottom: 1px solid var(--pep-line); font-size: 13px; }
.pep-cps-mrow:hover { background: var(--pep-panel-2); }
.pep-cps-mwhat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.pep-cps-mrow .pep-cps-pct { margin-left: 6px; }
.pep-cps-when { color: var(--pep-text-2); }
.pep-cps-details { font-size: 13px; white-space: nowrap; }
.pep-cps-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 12px; }

/* Activity: one line per event; a run of skips folded behind its disclosure. */
.pep-cps-acts { display: grid; margin: 0; padding: 0; list-style: none; }
.pep-cps-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 10px 4px;
  border-bottom: 1px solid var(--pep-line); font-size: 13px; }
.pep-cps-act-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.pep-cps-act-when { font-size: 12px; text-align: right; white-space: nowrap; }
.pep-cps-act-skips { align-items: center; }
.pep-cps-act-line { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; }
.pep-cps-fold { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 0; border: 0; background: none;
  color: var(--pep-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pep-cps-fold:hover { text-decoration: underline; }
.pep-cps-fold:focus-visible,
.pep-cps-row .pep-cps-toggle:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: 4px; }
.pep-cps-skips { display: grid; grid-column: 1 / -1; gap: 2px; margin: 6px 0 0; padding: 0 0 0 16px; list-style: none; }
.pep-cps-skip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 4px 0; border-top: 1px solid var(--pep-line); }
.pep-cps-skip .pep-cps-mwhat { flex: 1 1 auto; }

/* ---- less room: the list's rows and the tabs' rows become compact cards (the heads go; each figure says what it is) */
@container pep-cps (max-width: 759px) {
  .pep-cps-headgroup { display: none; }
  .pep-cps-filter { flex: 1 1 100%; }
  .pep-cps-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 6px; }
  .pep-cps-row::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .pep-cps-who { order: 0; flex: 1 1 0; }
  .pep-cps-state { order: 0; flex: none; }
  .pep-cps-equity,
  .pep-cps-pnl,
  .pep-cps-open,
  .pep-cps-last { order: 2; flex: none; text-align: left; font-size: 13px; }
  .pep-cps-pnl { display: inline-flex; align-items: baseline; gap: 4px; }
  .pep-cps-k { display: inline; margin-right: 4px; color: var(--pep-text-3); font-size: 12px; }
  .pep-cps-row .pep-cps-do { order: 2; margin-left: auto; }
  .pep-cps-row-new .pep-cps-wide { order: 2; flex-basis: 100%; }
  .pep-cps-row-open { border-radius: 12px 12px 0 0; }
  .pep-cps-detail-cell { padding: 4px 4px 14px; }
  .pep-cps-sum-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pep-cps-sum-lead { grid-column: 1 / -1; }
  .pep-cps-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pep-cps-mrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 4px; }
  .pep-cps-mrow .pep-cps-mwhat { flex: 1 1 100%; }
  .pep-cps-mrow .pep-cps-num { text-align: left; }
  .pep-cps-mrow .pep-cps-do { margin-left: auto; }
}
@container pep-cps (min-width: 760px) and (max-width: 900px) {
  .pep-cps-sum-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* A copy opens with a short rise; a disclosure's arrow turns; a copy a receipt just said was opened breathes twice. */
  @keyframes pep-cps-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes pep-cps-new { 0%, 100% { background: transparent; } 50% { background: var(--pep-panel); } }
  .pep-cps-detail { animation: pep-cps-in 0.2s ease-out; }
  .pep-cps-chev { transition: transform 0.15s ease; }
  .pep-cps-row-new { animation: pep-cps-new 1.6s ease-in-out 2; }
}