/* The portfolio (the stake page's own rules moved to stake.css in round 19).
 *
 * 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;
  font-variant-numeric: tabular-nums;
}

.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-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;
}

/* Neutral greys, lightest first: in SENDIT --pickle-mint is the brand lime,
   and red and green are for direction only (shell.css). */
.pep-sum-key-tokens::before { background: var(--pep-text); }
.pep-sum-key-liquidity::before { background: var(--pep-text-2); }
.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(--pep-text); }
.pep-split-liquidity { fill: var(--pep-text-2); }
.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;
}

/* ========================================================= 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;
}

/* Why the button is dead, said beside it, in words: an amber banner (dex.css, .pep-callout). */
.pep-refusal { margin: var(--pickle-space-3) 0 0; }

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

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

@media (max-width: 720px) {
  .pep-sum-parts { grid-template-columns: repeat(2, minmax(0, 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); }

}