/* SENDIT's accent is lime: the colour of the brand film.
 *
 * This file carries the colour and the few form pieces the shared vocabulary
 * genuinely does not cover. Structure that shared-ui already defines
 * under `ex-` names is not restated here: shared-ui/components.css owns those
 * boxes and shared-ui/motion.css animates them, so opting out of the names
 * means opting out of the estate's motion. Everything new is pep- prefixed
 * or scoped under body[data-app=pepper] (the app's internal name).
 *
 * TWO TRAPS in the colour, both of which cost a broken page if ignored.
 *
 * 1. `--pickle-accent-text` is a REGISTERED @property (tokens.css:46) with
 *    `inherits: true` and `initial-value: #00e788`. Declaring it on `:root`
 *    masks the initial value motion.css animates from, so it is re-founded on
 *    the body instead. Everything inherits from there and the registration
 *    keeps its resting state.
 *
 * 2. Re-pointing the accent alone is not enough: `--pickle-mint*` appears about
 *    thirty times in components.css for backgrounds, borders, focus rings and
 *    SVG strokes, so a page that moved only the text colour would read half
 *    the estate's green. The whole ramp is overridden. Those are ordinary
 *    custom properties, not registered ones, so :root is correct for them.
 *
 * The intended side effect: `.ex-pill.mint` turns lime here. The pill keeps its
 * meaning from its class and takes its identity from the site's colour, which
 * is what we want from a component shipped on eight origins.
 */

:root {
  /* Mirrored from tokens.css:103-109 hue for hue rather than invented, so the
   * lightness relationships that were contrast-checked once stay checked. */
  --pickle-mint: #c3f56f;
  --pickle-mint-strong: #b4ec55;
  --pickle-mint-dim: #9fd24a;
  --pickle-mint-ink: #0b100c;
  --pickle-mint-soft: rgb(195 245 111 / 7%);
  --pickle-mint-line: rgb(195 245 111 / 35%);
  --pickle-mint-hi: #dcffa6;
  --pickle-focus: #c3f56f;
}

body[data-app="pepper"] {
  --pickle-accent-text: #c3f56f;
}

/* THE GREENS THE TOKEN RAMP CANNOT REACH.
 *
 * Overriding --pickle-mint* covers most of the estate, but six rules in
 * shared-ui write `rgb(0 231 136 / N%)` as a literal, so they stayed the estate's green on
 * a lime site. They have to be restated here by selector, scoped to this app,
 * because shared-ui is served to all eight origins and changing it there would
 * turn the other seven lime.
 *
 * The first one is the visible symptom: .ex-wrap::before is a radial gradient
 * behind every page - the glow.
 */
body[data-app="pepper"] .ex-wrap::before {
  background: radial-gradient(
    ellipse at center,
    rgb(195 245 111 / 10%),
    rgb(195 245 111 / 3%) 46%,
    transparent 72%
  );
}

body[data-app="pepper"] .ex-btn:hover {
  background: rgb(195 245 111 / 8%);
}

body[data-app="pepper"] .ex-h3-label {
  border-left-color: rgb(195 245 111 / 45%);
}

body[data-app="pepper"] .ex-wf .fill {
  background: rgb(195 245 111 / 16%);
}

body[data-app="pepper"] .ex-feed {
  stroke: rgb(195 245 111 / 34%);
}

body[data-app="pepper"] .ex-dot::after {
  background: rgb(195 245 111 / 55%);
}

body[data-app="pepper"] ::selection {
  background: rgb(195 245 111 / 30%);
}

/* The wallet's toasts (shared-ui shell.js, PickleShell.toast): shared-ui draws them with a bar down the left edge,
 * mint or rose. SENDIT has no bar down an edge anywhere (round 11): its toast is a card tinted with its tone, as its
 * banners are (dex.css, .pep-callout), lifted off the page by a shadow because it floats. Scoped to this app, because
 * shared-ui is served to eight origins. */
body[data-app="pepper"] .ex-toast {
  border: 0;
  border-radius: var(--pep-radius-sm);
  background: color-mix(in srgb, var(--pep-text-2) 10%, var(--pep-panel-2));
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
body[data-app="pepper"] .ex-toast.err { background: color-mix(in srgb, var(--pep-danger) 14%, var(--pep-panel-2)); }

/* Three more tokens the ramp override missed. They are not part of the mint
 * family by name, but they carry the same hue and appear in gauges and lane
 * art, so a page using either would have shown the estate's green beside SENDIT's lime. */
:root {
  --pickle-cyan: #dcffa6;
  --pickle-blue: #9fd24a;
  --pickle-lane-mini-idle: rgb(195 245 111 / 34%);
}

/* ================================================================= live bar
 * Structural CSS the shared sheets never carried for this app - the named
 * live gap. Adapted from explorer-ui/css/explorer.css:18-76 and scoped to
 * pepper. Height is the bar token, never a hand-counted value; figures are
 * white because the accent points at things, it is never the ground.
 */

body[data-app="pepper"] .ex-livebar {
  position: sticky;
  top: var(--pickle-nav-h);
  z-index: var(--pickle-z-bar);
  display: flex;
  gap: var(--pickle-space-5);
  align-items: center;
  height: var(--pickle-bar-h);
  padding-inline: max(var(--pickle-gutter), calc((100vw - var(--pickle-content)) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--pickle-bg-deep);
  border-bottom: 1px solid var(--pickle-line);
  scrollbar-width: none;
}

body[data-app="pepper"] .ex-livebar::-webkit-scrollbar {
  height: 0;
}

body[data-app="pepper"] .ex-live-item {
  flex: 0 0 auto;
}

/* Ruled segments: a hairline between items, not before the pill (the pill is
 * not an .ex-live-item, so the sibling selector skips it by construction). */
body[data-app="pepper"] .ex-live-item + .ex-live-item {
  border-left: 1px solid var(--pickle-line);
  padding-left: var(--pickle-space-5);
}

body[data-app="pepper"] .ex-live-item small {
  display: block;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body[data-app="pepper"] .ex-live-item b {
  color: var(--pickle-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

body[data-app="pepper"] .ex-live-on {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: var(--pickle-space-4);
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The chart canvas takes the card's width; without this it rests at the
 * canvas default of 300px. */
.ex-chart-card canvas {
  display: block;
  width: 100%;
  height: 168px;
}

/* ================================================================ the ladder
 * Numbered mono steps over the same needsApproval state as the button.
 * Display only; the status word takes the estate .flash when it changes.
 */

.pep-ladder {
  list-style: none;
  margin: var(--pickle-space-4) 0 0;
  padding: 0;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
  color: var(--pickle-muted);
}

.pep-ladder li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pickle-space-4);
  padding: 7px 0;
  border-top: 1px solid var(--pickle-line);
}

.pep-ladder li:first-child {
  border-top: 0;
}

.pep-ladder b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pep-ladder b[data-status="done"] {
  color: var(--pickle-accent-text);
}

.pep-ladder b[data-status="next"] {
  color: var(--pickle-text);
}

.pep-ladder b[data-status="wait"] {
  color: var(--pickle-subtle);
}

/* ================================================================ the legend
 * One mono line of explanation above a table, once. */

/* ================================================================== on paper
 * Paper has no scroll position and no clock: every animated thing is pinned
 * to its end state. Labels keep their centring transforms - only elements
 * whose transform is animation-driven are reset. */

@media print {
  .pep-ladder b {
    animation: none;
    opacity: 1;
  }
}

/* ===================================================== buttons, on this site
 * THE HOVER STATES ARE SPELT OUT HERE, ALL THREE, and the reason is a report
 * that buttons "go black on hover and you can barely see them any more".
 *
 * shared-ui's own rules do not do that and neither did the one override above:
 * the outline button tints and keeps `--pickle-text`, the solid one lightens to
 * `--pickle-mint-hi`. What the override DID do was set a background and nothing
 * else, which leaves the colour and the border to whichever rule wins the
 * cascade on a given page - and that is exactly the kind of state nobody can
 * reason about from one file. So each kind now states its own three properties
 * together: a hover that is defined in one place cannot be half-applied.
 *
 * Scoped to body[data-app=pepper] throughout. shared-ui is served to all eight
 * origins and a fix made there would repaint the other seven. */
body[data-app="pepper"] .ex-btn:hover,
body[data-app="pepper"] .ex-btn:focus-visible {
  color: var(--pickle-text);
  background: rgb(195 245 111 / 10%);
  border-color: var(--pickle-mint-line);
}

/* The one primary action. It lightens rather than darkens, because its label is
 * near-black ink: a fill that got darker on hover would take the contrast out
 * from under the only text it carries. */
body[data-app="pepper"] .ex-btn.solid:hover,
body[data-app="pepper"] a.ex-btn.solid:hover,
body[data-app="pepper"] .ex-btn.solid:focus-visible {
  color: var(--pickle-mint-ink);
  background: var(--pickle-mint-hi);
  border-color: var(--pickle-mint-hi);
}

body[data-app="pepper"] .ex-btn.ghost:hover,
body[data-app="pepper"] .ex-btn.ghost:focus-visible {
  color: var(--pickle-text);
  background: var(--pickle-surface-hover);
  border-color: transparent;
}

/* A disabled button must not answer a pointer at all. Without this it took the
 * hover above and looked pressable while doing nothing, which reads as a broken
 * page rather than as a refused action. */
body[data-app="pepper"] .ex-btn:disabled,
body[data-app="pepper"] .ex-btn:disabled:hover {
  color: var(--pickle-muted);
  background: transparent;
  border-color: var(--pickle-line);
  cursor: not-allowed;
}

/* ============================================ liquidity, under a pool's row
 * The panel is a whole form inside a table cell, so it gets the breathing room
 * a cell does not give it and a rule above it to say it belongs to the row it
 * opened from rather than to the one below. */

/* ================================================================= the bar
 * ON A PHONE THE RAIL GOES AND THE BURGER CARRIES THE TABS. components.css
 * hides the long link rail below 1220px and shows the burger, but this app's
 * tabs live in .ex-subnav, which that sheet keeps as a sideways-scrolling rail
 * at every width: at 375 it was squeezed to a few dozen pixels between the
 * brand and the sign-in button, cut mid-word, with no menu to fall back on.
 * Same rule the arcade uses: under 640px the rail is gone and the burger's
 * panel (components/MobileMenu.jsx) holds the same tabs. */
@media (max-width: 639px) {
  .ex-nav.stack .ex-subnav { display: none; }
}

/* ---------------------------------------------------------------- markets
 * Direction colours are their own tokens: lime is this site's brand, so "up"
 * is an emerald a step bluer than it (and never the estate's mint, which this
 * file repaints lime above), and "down" is red. */
body[data-app="pepper"] {
  --pep-up: #2fd47a;
  --pep-down: #ff5a4f;
  --pep-chart-bg: var(--pickle-surface-1);
}

.pep-dir-up { color: var(--pep-up); stroke: var(--pep-up); }
.pep-dir-down { color: var(--pep-down); stroke: var(--pep-down); }
.pep-dir-flat { color: var(--pickle-muted); stroke: var(--pickle-muted); }

.pep-mtools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 24px 0 16px; }
.pep-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pep-msearch {
  border: 1px solid var(--pickle-line); background: var(--pickle-surface-input); color: var(--pickle-text);
  border-radius: 999px; padding: 8px 14px; font: inherit; min-width: 0; width: 220px;
}

.pep-markets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pep-mcard {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; text-align: left;
  background: var(--pickle-surface-1); border: 1px solid transparent; border-radius: 14px;
  padding: 14px; color: var(--pickle-text); font: inherit; cursor: pointer;
}
.pep-mcard:hover { background: var(--pickle-surface-hover); }
.pep-mcard.is-selected { border-color: var(--pickle-text); }
.pep-mcard.is-silent { opacity: 0.6; }
.pep-mcard-head { grid-column: 1 / -1; }
.pep-mcard-base { font-weight: 700; }
.pep-mcard-quote { color: var(--pickle-muted); font-weight: 400; }
.pep-mcard-price { grid-column: 1; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pep-mcard-change { grid-column: 2; align-self: end; font-variant-numeric: tabular-nums; font-size: 13px; }
.pep-spark { grid-column: 1 / -1; width: 100%; height: 32px; }
.pep-mcard-status { grid-column: 1 / -1; font-size: 12px; color: var(--pickle-muted); }
.pep-mcard-status.is-closed { color: var(--pickle-amber); }

.pep-candles { width: 100%; height: 420px; margin-top: 12px; }

@media (max-width: 640px) {
  .pep-msearch { width: 100%; }
  .pep-candles { height: 300px; }
}

/* ======================================================== token logos
 * Logos come from the public token list (github.com/PickleChain/token-list)
 * through this origin's /explorer-api/tokenlogo/ proxy, and only for listed
 * tokens. Every other token, and any logo that fails to load, is the letter
 * disc: the same size and shape, so a row lines up either way. */
.pep-ticon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  object-fit: cover;
  background: var(--pickle-surface-3);
  border: 1px solid var(--pickle-line);
  border-radius: 50%;
}

.pep-ticon.lg {
  width: 1.75rem;
  height: 1.75rem;
}

.pep-ticon-letter {
  display: inline-grid;
  place-items: center;
  color: var(--pickle-muted);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-weight: 600;
  line-height: 1;
}

.pep-tpair {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.pep-tpair .pep-ticon + .pep-ticon { margin-left: -0.4rem; }

/* The verified seal: in the site's accent, beside the symbol. It says the
 * token is on the reviewed list, never that anyone endorses it. */
.pep-tick {
  display: inline-flex;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.25rem;
  color: var(--pickle-accent-text);
  vertical-align: -0.1em;
}

.pep-tick svg {
  width: 100%;
  height: 100%;
}