/* /stake/: stake PKL, earn ETH (pages/stake.jsx; round 19 in the leaderboard's
 * look). The hero over the earn banner (.pep-ph--earn-banner), the title, the panels'
 * heads, the action pills and the ranked rows are page.css's, shared with
 * the leaderboard; this sheet is the page's own: its gaps, "Your stake" as a
 * strip of figures with its actions, the ticket's field and facts, the pool's
 * two figures over the projection's rows, the unlocking queue's columns and
 * the rules as hairline rows. The page's own width picks its layout (the
 * rail beside it takes 300 px or none), not the window's. Built from
 * shell.css's tokens; after page.css, whose pieces it places (it moved here
 * from holdings.css). */

.pep-stk-page { display: grid; gap: 18px; min-width: 0; container: pep-stk / inline-size; }

/* ------------------------------------------------------------ your stake
 * The leaderboard's "Your position" strip, with four figures (five with ETH
 * held for you) and the actions at its end; the reasons a button is dead
 * under them, across the strip. */

.pep-standing.pep-stk-standing { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.pep-stk-k { flex: 1 1 120px; }
.pep-stk-k > span:first-child { color: var(--pep-text-2); white-space: nowrap; }
.pep-stk-k > span:last-child { font-size: 12px; overflow-wrap: anywhere; }
.pep-stk-do { display: flex; flex-wrap: wrap; gap: 8px; }
.pep-btn.pep-stk-act { min-height: 36px; padding: 0 16px; font-size: 13px; white-space: nowrap; }
.pep-stk-why { flex: 1 1 100%; margin: 0; color: var(--pep-text-3); font-size: 12px; }
.pep-stk-standing-none p { flex: 1 1 200px; margin: 0; color: var(--pep-text-2); font-size: 14px; }

/* ------------------------------------------------- the ticket, the pool */

.pep-stk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pep-stk-ticket,
.pep-stk-earn { gap: 14px; padding: 18px 20px 20px; }
.pep-stk-ticket .pep-seg-pill { margin-left: auto; }
.pep-stk-field { min-width: 0; }
.pep-stk-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pep-stk-field-head label { color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-stk-unit { color: var(--pep-text-2); font-weight: 700; }
.pep-stk-usd { margin: 6px 0 0; }
.pep-stk-facts { display: grid; gap: 8px; margin: 0; }
.pep-stk-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.pep-stk-facts dt { color: var(--pep-text-2); }
.pep-stk-facts dd { margin: 0; }

/* The pool's two figures, each on a raised tile: the measured APR in lime, the total staked. */
.pep-stk-pool { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pep-stk-pool-k { display: grid; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-stk-pool-k span { color: var(--pep-text-3); font-size: 12px; overflow-wrap: anywhere; }
.pep-stk-pool-k > span:first-child { color: var(--pep-text-2); font-size: 13px; }
.pep-stk-pool-k b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.pep-stk-pool-k:first-child b { color: var(--pep-brand); }
.pep-stk-basis { margin: 0; }

/* The projection: one row per horizon, the dollars over the ETH on the right. */
.pep-stk-proj-row { grid-template-columns: minmax(0, 1fr) auto; }
.pep-stk-proj-when { color: var(--pep-text); font-size: 14px; font-weight: 600; }
.pep-stk-proj-fig { display: grid; justify-items: end; justify-self: end; text-align: right; }
.pep-stk-proj .pep-money-usd { color: var(--pep-text); font-size: 15px; font-weight: 700; }
.pep-stk-proj .pep-money-amt { color: var(--pep-text-3); font-size: 12px; }
.pep-tpanel-foot.pep-stk-note { display: block; margin: 0; line-height: 1.5; }

/* -------------------------------------------------------- the unlocking */

.pep-stk-vest { grid-template-columns: 28px minmax(0, 1fr) auto; }
.pep-stk-vest-when { display: grid; justify-items: end; justify-self: end; gap: 2px; font-size: 12px; text-align: right; }
.pep-stk-ready { color: var(--pep-up); }
.pep-stk-vests .pep-money-usd { color: var(--pep-text); font-size: 15px; font-weight: 700; }

/* ------------------------------------------------------------ the rules */

.pep-stk-rules dl { display: grid; margin: 0; }
.pep-stk-rules dl > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; padding: 11px 12px; border-bottom: 1px solid var(--pep-line); font-size: 14px; }
.pep-stk-rules dl > div:last-child { border-bottom: 0; }
.pep-stk-rules dt { color: var(--pep-text-2); }
.pep-stk-rules dd { margin: 0; overflow-wrap: anywhere; }
.pep-stk-foot { max-width: 80ch; }

/* ------------------------------------------------------- a narrow page
 * The ticket over the pool; the rules' names over their words. */
@container pep-stk (max-width: 759px) {
  .pep-stk-grid { grid-template-columns: minmax(0, 1fr); }
  .pep-stk-rules dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 8px; }
}

/* A phone: the strip's figures two by two under each other, the face left out, the actions across the strip. */
@container pep-stk (max-width: 559px) {
  .pep-standing.pep-stk-standing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .pep-stk-standing > .pep-face { display: none; }
  .pep-standing.pep-stk-standing-none { grid-template-columns: minmax(0, 1fr); }
  .pep-stk-standing-none .pep-stk-act { justify-self: start; }
  .pep-stk-do,
  .pep-stk-why { grid-column: 1 / -1; }
  .pep-stk-do > .pep-btn { flex: 1 1 0; }
  .pep-stk-ticket,
  .pep-stk-earn { padding: 14px 12px 14px; }
  .pep-stk-pool-k b { font-size: 20px; }
}