/* Spread's own pieces on top of the lifted layer: the wordmark, and the app panels that stand in
   the windows where echo.ec shows screenshots. Same palette: black, two greys, one mint. */

.eh-brand { gap: 8px; }
.sp-word { font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -0.02em; color: #fff; }
body.eh-body { background: #000; }

.ap { padding: 20px; font-size: 13px; line-height: 1.4; color: #fff; font-variant-numeric: tabular-nums; }
.ap small { display: block; font-size: 12px; line-height: 1.2; color: var(--eh-dim); }
.ap b { font-weight: 500; }
.ap-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--eh-dim); }

/* fields */
.ap-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
.ap-form { display: flex; flex-direction: column; gap: 14px; }
.ap-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-field { display: flex; flex-direction: column; gap: 6px; }
.ap-input { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-radius: 8px; background: #151515; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-size: 14px; }
.ap-input.is-empty { color: #5d6266; }
.ap-input em { font-style: normal; color: var(--eh-dim); }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; background: var(--eh-mint); color: var(--acc-ink); font-weight: 700; font-size: 14px; }
.ap-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: #151515; color: var(--eh-soft); font: inherit; font-size: 12.5px; cursor: pointer; transition: background-color var(--eh-fast) ease, color var(--eh-fast) ease; }
.ap-seg button:hover { color: #fff; }
.ap-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ap-side { padding: 14px; border-radius: 10px; background: #111; }
.ap-split { display: flex; gap: 3px; height: 8px; margin: 10px 0 4px; }
.ap-split i { border-radius: 3px; background: var(--eh-mint); }
.ap-split i + i { background: #3a3f42; }
.ap-dl { margin: 6px 0 0; }
.ap-dl div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ap-dl div:first-child { border-top: 0; }
.ap-dl dt { color: var(--eh-dim); }
.ap-dl dd { margin: 0; font-weight: 500; }
.ap-gap { margin-top: 14px; }

/* simulation */
.ap-sim-head { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.ap-sim-head b { display: block; margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ap-sim-head b.is-up { color: var(--eh-mint); }
.ap-replay { margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 12.5px; cursor: pointer; user-select: none; transition: background-color var(--eh-fast) ease; }
.ap-replay:hover { background: rgba(255, 255, 255, 0.14); }
.ap-chart { display: block; width: 100%; height: 200px; margin-top: 16px; overflow: visible; }
.ap-chart .px { fill: none; stroke: #c4c8ca; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ap-chart .area { fill: url(#sim-fill); }
.ap-chart .grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ap-legend { display: flex; gap: 16px; align-items: center; margin-top: 10px; color: var(--eh-dim); font-size: 12px; flex-wrap: wrap; }
.ap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ap-legend i { width: 8px; height: 8px; border-radius: 50%; }
.ap-legend .is-buy { background: #fff; }
.ap-legend .is-sell { background: var(--eh-mint); }
.ap-legend .ap-note { margin-left: auto; }
.ap-table { width: 100%; margin-top: 14px; border-collapse: collapse; }
.ap-table th { padding: 0 8px 8px 0; text-align: left; font-weight: 400; font-size: 12px; color: var(--eh-dim); }
.ap-table td { padding: 9px 8px 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; }
.ap-table td:last-child, .ap-table th:last-child { padding-right: 0; }
.ap-table .is-up { color: var(--eh-mint); }
.ap-table .is-dim { color: var(--eh-dim); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ap-table .ap-empty { padding: 28px 0; color: var(--eh-dim); white-space: normal; }
.ap-side-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 12px; }
.ap-side-pill.is-sell, .ap-side-pill.is-payout { color: var(--eh-mint); background: rgb(var(--acc-rgb) / 0.12); }

/* money */
.ap-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ap-inputs { display: flex; flex-direction: column; gap: 14px; }
.ap-slide { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 8px; }
.ap-slide b { font-size: 14px; }
.ap-slide input { grid-column: 1 / -1; width: 100%; height: 4px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 2px; background: #222; outline-offset: 6px; }
.ap-slide input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; cursor: pointer; }
.ap-slide input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.ap-out { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: #111; }
.ap-out > div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ap-out > div:first-child { border-top: 0; }
.ap-out > div small { font-size: 13px; }
.ap-out > div b { font-size: 18px; font-weight: 700; }
.ap-out > .is-money b { color: var(--eh-mint); }
.ap-out .ap-note { margin-top: 6px; }

/* settings */
.ap-settings { padding-bottom: 24px; }
.ap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.ap-grid > div { padding: 10px 12px; border-radius: 8px; background: #121212; min-width: 0; }
.ap-grid b { display: block; margin-top: 6px; font-size: 15px; }
.ap-grid em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: #5d6266; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* rules: the window fills the tall tile instead of leaving a gap above it */
.eh-tile.is-tall > .ui-shot { align-self: stretch; margin-top: 28px; }
/* rules */
.ap-rulelist { list-style: none; margin: 0; padding: 0; counter-reset: r; display: flex; flex-direction: column; }
.ap-rulelist li { counter-increment: r; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; row-gap: 4px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ap-rulelist li:first-child { border-top: 0; padding-top: 0; }
.ap-rulelist li::before { content: counter(r, decimal-leading-zero); grid-row: span 2; color: var(--eh-dim); font-size: 12px; line-height: 1.5; }
.ap-rulelist b { font-size: 14px; }
.ap-rulelist span { color: var(--eh-dim); font-size: 12.5px; }
.ap-held { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ap-held div { padding: 9px 11px; border-radius: 8px; background: #121212; font-size: 12.5px; color: var(--eh-soft); }
.ap-held div b { color: #fff; }

.ap-activity { padding-top: 12px; min-height: 220px; }

@media (max-width: 1023px) {
  .ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .ap { padding: 16px; }
  .ap-cols, .ap-money { grid-template-columns: 1fr; }
  .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-sim-head { gap: 18px; }
  .ap-legend .ap-note { margin-left: 0; flex-basis: 100%; }
  .ap-table .is-dim { max-width: 120px; }
  .eh-stage { padding: 28px 0 0 20px; min-height: 0; }
}