/* The portfolio and the stake page.
 *
 * Built on the estate's vocabulary, not beside it: .ex-stats, .ex-panel,
 * .ex-table, .ex-kv, .ex-tabs and .ex-btn carry the structure and the motion,
 * and pepper.css carries the colour and the swap card these pages reuse for the
 * stake form (.pep-card, .pep-leg, .pep-facts). What is here is only what
 * neither has: a headline total, a row that puts dollars over a token amount,
 * a position card, a range bar, and a table that becomes a list on a phone.
 *
 * Every radius is the token (2px), every face is Inter Tight or IBM Plex Mono
 * through the font tokens, and nothing moves unless the reader has not asked
 * for reduced motion.
 */

/* ============================================================ money
 * DOLLARS OVER TOKENS. The dollar figure is the line the eye lands on; the
 * amount under it is quieter and smaller, and never takes its place. */
.pep-money {
  display: inline-grid;
  gap: 2px;
  justify-items: inherit;
  min-width: 0;
}

.pep-money-usd {
  color: var(--pickle-text);
  font-size: var(--pickle-text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.pep-money-amt {
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-2xs);
  overflow-wrap: anywhere;
}

.pep-money-big .pep-money-usd {
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: var(--pickle-tracking-tight);
}

.pep-money-note {
  margin-left: var(--pickle-space-2);
  color: var(--pickle-muted);
}

.pep-strong {
  color: var(--pickle-text);
  font-weight: 500;
}

.pep-stack {
  display: inline-grid;
  gap: 2px;
  justify-items: inherit;
}

/* ========================================================== summary
 * One number, big, and what it is made of beside it. */
.pep-sum {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: var(--pickle-space-5) var(--pickle-space-6);
  align-items: end;
  margin: var(--pickle-space-6) 0 var(--pickle-space-5);
  padding: var(--pickle-space-5);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.pep-sum-main {
  display: grid;
  gap: var(--pickle-space-2);
  min-width: 0;
}

.pep-sum-main > p { margin: 0; }

.pep-sum-label,
.pep-sum-key {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pep-sum-big {
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-3xl);
  font-weight: 600;
  letter-spacing: var(--pickle-tracking-display);
  line-height: 1;
  overflow-wrap: anywhere;
}

.pep-sum-parts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}

.pep-sum-part {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: var(--pickle-space-3) var(--pickle-space-4);
  background: var(--pickle-surface-1);
  min-width: 0;
}

.pep-sum-part b {
  color: var(--pickle-text);
  font-size: var(--pickle-text-lg);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* The key's swatch is the segment's colour in the strip below it. */
.pep-sum-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pep-sum-key-tokens::before,
.pep-sum-key-liquidity::before,
.pep-sum-key-staking::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--pickle-radius-xs);
  background: currentColor;
}

.pep-sum-key-tokens::before { background: var(--pickle-mint); }
.pep-sum-key-liquidity::before { background: var(--pickle-mint-hi); }
.pep-sum-key-staking::before { background: var(--pickle-faint); }

.pep-split {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--pickle-radius-xs);
  background: var(--pickle-surface-3);
}

.pep-split-tokens { fill: var(--pickle-mint); }
.pep-split-liquidity { fill: var(--pickle-mint-hi); }
.pep-split-staking { fill: var(--pickle-faint); }

/* Placeholders the size of what they stand for, so the page does not jump. */
.pep-skel-line { display: block; width: 12rem; max-width: 100%; height: .9rem; }
.pep-skel-big { display: block; width: 16rem; max-width: 100%; height: 2.6rem; }
.pep-skel-block { display: block; height: 4.2rem; }

/* ========================================================== toolbar */
.pep-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pickle-space-3) var(--pickle-space-4);
  margin: 0 0 var(--pickle-space-5);
}

.pep-toolbar .pep-sub { margin: 0 auto 0 0; }

.pep-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pickle-space-2);
  min-height: var(--pickle-tap);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  cursor: pointer;
}

/* A square the site draws, not the platform's checkbox. */
.pep-toggle input {
  appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--pickle-line-strong);
  border-radius: var(--pickle-radius-xs);
  background: var(--pickle-surface-input);
  cursor: pointer;
}

.pep-toggle input:checked {
  border-color: var(--pickle-mint);
  background:
    linear-gradient(var(--pickle-mint), var(--pickle-mint)) center / 8px 8px no-repeat,
    var(--pickle-surface-input);
}

.pep-toggle input:focus-visible {
  outline: 2px solid var(--pickle-focus);
  outline-offset: 2px;
}

/* =========================================================== states */
.pep-empty {
  display: grid;
  gap: var(--pickle-space-3);
  justify-items: start;
  margin: var(--pickle-space-6) 0;
  padding: var(--pickle-space-6) var(--pickle-space-5);
  background: var(--pickle-surface-1);
  border: 1px dashed var(--pickle-line-strong);
  border-radius: var(--pickle-radius);
}

.pep-empty > p { margin: 0; }

.pep-empty-title {
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-lg);
  font-weight: 600;
}

.pep-empty-do {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
}

/* ========================================================= sections */
.pep-sec { margin: 0 0 var(--pickle-space-7); }

.pep-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pickle-space-3);
  margin: 0 0 var(--pickle-space-3);
  padding-bottom: var(--pickle-space-3);
  border-bottom: 1px solid var(--pickle-line);
}

.pep-sec-title {
  margin: 0;
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: var(--pickle-tracking-tight);
}

.pep-sec-sum {
  color: var(--pickle-text);
  font-size: var(--pickle-text-lg);
}

.pep-sec-sub {
  margin: var(--pickle-space-5) 0 var(--pickle-space-2);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pep-foot { margin-top: var(--pickle-space-6); }

/* ======================================================= dense rows
 * The estate's table, tighter: a portfolio is scanned, not read. */
.pep-rows td { padding: var(--pickle-space-3) var(--pickle-space-4); }
.pep-rows th { padding: 0 var(--pickle-space-4) var(--pickle-space-2); }
.pep-rows td.num .pep-stack,
.pep-rows td.num .pep-money { justify-items: end; }

.pep-asset {
  display: grid;
  gap: 2px;
}

.pep-asset b {
  color: var(--pickle-text);
  font-weight: 600;
}

/* ======================================================== positions */
.pep-positions-list {
  display: grid;
  gap: var(--pickle-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pep-pos {
  display: grid;
  gap: var(--pickle-space-3);
  padding: var(--pickle-space-4);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.pep-pos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pickle-space-2) var(--pickle-space-4);
}

.pep-pos-head .pep-money { justify-items: end; }

.pep-pos-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pickle-space-2);
  min-width: 0;
}

.pep-pos-name b {
  color: var(--pickle-text);
  font-size: var(--pickle-text-md);
  font-weight: 600;
}

.pep-pos-fee {
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-2xs);
}

/* A state is a word first. The border and the colour only repeat it. */
.pep-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--pickle-space-2);
  border: 1px solid var(--pickle-line-strong);
  border-radius: var(--pickle-radius-pill);
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  white-space: nowrap;
}

.pep-state.on {
  border-color: var(--pickle-mint-line);
  color: var(--pickle-accent-text);
}

.pep-state.off {
  border-color: var(--pickle-amber-line);
  color: var(--pickle-amber);
}

.pep-pos-range {
  display: grid;
  gap: 6px;
}

.pep-rangebar {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 12px;
}

.pep-rangebar-track { fill: var(--pickle-surface-4); }
.pep-rangebar-band { fill: var(--pickle-faint); }
.pep-rangebar-band.on { fill: var(--pickle-mint); }
.pep-rangebar-now { fill: var(--pickle-text); }

.pep-pos-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}

.pep-pos-facts > div {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: var(--pickle-space-3);
  background: var(--pickle-surface-2);
  min-width: 0;
}

.pep-pos-facts dt {
  margin: 0;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pep-pos-facts dd { margin: 0; }

.pep-pos-do {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
}

/* The portfolio's stake row: three facts, and wider cells than a position's,
   because each carries a PKL or ETH amount with eighteen places behind it. */
.pep-stake-facts > div { padding: var(--pickle-space-3) var(--pickle-space-4); }

/* In the stake page's position panel the facts stack two by two. */
.pep-stake-pos .pep-pos-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================================================ stake */
.pep-stake-stats .ex-stat b,
.pep-stake-stats .ex-stat em { overflow-wrap: anywhere; min-width: 0; }
.pep-stake-stats .ex-stat em { flex-wrap: wrap; }

/* A contract address in a definition list: the full 42 characters, small
   enough to sit on one line in the column it has. */
.pep-kv-addr { font-size: var(--pickle-text-2xs); }

.pep-proj-basis { margin: 0 0 var(--pickle-space-3); }

.pep-sec-note { margin: var(--pickle-space-3) 0 0; }

.pep-stake-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--pickle-space-5);
  align-items: start;
  margin: 0 0 var(--pickle-space-5);
}

/* The swap card's shape, but in a column rather than centred on its own. */
.pep-stake-card {
  max-width: none;
  margin: 0;
}

.pep-stake-tabs { margin: 0 0 var(--pickle-space-4); }

.pep-token-tag {
  flex: 0 0 auto;
  padding: 6px var(--pickle-space-3);
  background: var(--pickle-surface-3);
  border: 1px solid var(--pickle-line-soft);
  border-radius: var(--pickle-radius-pill);
  color: var(--pickle-text);
  font-size: var(--pickle-text-sm);
}

/* Why the button is dead, said beside it, in words. */
.pep-refusal {
  margin: var(--pickle-space-3) 0 0;
  padding: var(--pickle-space-2) var(--pickle-space-3);
  border-left: 2px solid var(--pickle-amber);
  background: var(--pickle-amber-soft);
  color: var(--pickle-text);
  font-size: var(--pickle-text-sm);
  line-height: 1.5;
}

.pep-stake-card .pep-go {
  width: 100%;
  justify-content: center;
  margin-top: var(--pickle-space-4);
}

.pep-stake-pos { padding: var(--pickle-space-5); }

.pep-stake-do {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
  margin: var(--pickle-space-4) 0 var(--pickle-space-2);
}

.pep-stake-lower { margin-bottom: var(--pickle-space-5); }

.pep-proj td:last-child .pep-money,
.pep-vests td:last-child .pep-stack { justify-items: end; }

/* ========================================================== motion */
@media (prefers-reduced-motion: no-preference) {
  .pep-pos,
  .pep-toggle input,
  .pep-state {
    transition:
      border-color var(--pickle-fast) var(--pickle-ease),
      background-color var(--pickle-fast) var(--pickle-ease);
  }

  .pep-pos:hover { border-color: var(--pickle-line-strong); }
}

/* ======================================================== narrower */
@media (max-width: 960px) {
  .pep-sum { grid-template-columns: 1fr; align-items: start; }
  .pep-stake-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .pep-sum-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pep-pos-facts { grid-template-columns: 1fr; }
}

/* A PHONE GETS A LIST, NOT A TABLE. Four columns of money at 375px is a
 * horizontal scroll, which the brief for these pages rules out; each row
 * becomes a small card whose cells carry their own label from data-label. */
@media (max-width: 640px) {
  .pep-sum { padding: var(--pickle-space-4); }
  .pep-sum-big { font-size: var(--pickle-text-2xl); }

  /* components.css gives every .ex-table a 36rem floor on narrow screens so a
     wide table scrolls inside its panel; a table that has become a list has
     no columns to protect, so the floor comes off. */
  .pep-rows { min-width: 0; }
  .pep-rows thead { display: none; }

  .pep-rows,
  .pep-rows tbody,
  .pep-rows tr,
  .pep-rows td { display: block; width: 100%; }

  .pep-rows tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pickle-space-2) var(--pickle-space-3);
    padding: var(--pickle-space-3) 0;
    border-bottom: 1px solid var(--pickle-line);
  }

  .pep-rows tbody tr:last-child { border-bottom: 0; }

  .pep-rows td,
  .pep-rows tbody tr:last-child td {
    padding: 0;
    border-bottom: 0;
  }

  /* Alignment on its own, at the specificity of a plain cell: folded into the
     rule above it outranked `td.num` and pulled every LAST row's figures left. */
  .pep-rows td { text-align: left; }

  .pep-rows td.num { text-align: right; }

  .pep-rows td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--pickle-subtle);
    font-family: var(--pickle-font-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  /* The first cell names the row, so it carries no label. */
  .pep-rows td:first-child::before { display: none; }

  /* A FOUR-COLUMN ROW (token, price, balance, value) reads as two lines: what
     it is and what it is worth, then the two facts behind the worth. The
     dollars stay on the first line, at the right, where the eye scans a
     column of them. Two-column rows keep the plain grid above. */
  .pep-rows tr:has(> td:nth-child(4)) { grid-template-columns: minmax(0, 1fr) auto; }
  .pep-rows tr:has(> td:nth-child(4)) > td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .pep-rows tr:has(> td:nth-child(4)) > td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .pep-rows tr:has(> td:nth-child(4)) > td:nth-child(4)::before { display: none; }
  .pep-rows tr:has(> td:nth-child(4)) > td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; }
  .pep-rows tr:has(> td:nth-child(4)) > td:nth-child(2) .pep-stack { justify-items: start; }
  .pep-rows tr:has(> td:nth-child(4)) > td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
  .pep-rows tr:has(> td:nth-child(4)) > td:nth-child(4) .pep-strong { font-size: var(--pickle-text-md); }

  .pep-rows tr:not(:has(> td:nth-child(3))) { grid-template-columns: auto minmax(0, 1fr); }

  .pep-stake-stats .ex-stat { padding: var(--pickle-space-3); }
  .pep-stake-stats .ex-stat b { font-size: var(--pickle-text-lg); overflow-wrap: normal; }

  .pep-pos { padding: var(--pickle-space-3); }
  .pep-pos-head .pep-money { justify-items: start; }
  .pep-stake-pos .pep-pos-facts { grid-template-columns: 1fr; }
  .pep-stake-do .ex-btn { flex: 1 1 auto; justify-content: center; }
}