/* Pepper's accent is red. A pepper is red.
 *
 * This file is deliberately short. An earlier version carried a whole parallel
 * layout system under `pep-` names - cards, tables, buttons, stats - which was
 * a mistake: shared-ui/components.css already defines all of it under the `ex-`
 * names the explorer uses, and shared-ui/motion.css animates those class names
 * directly. A bespoke shell did not merely look different from the rest of the
 * estate, it opted out of every entrance and hover the estate has. What remains
 * here is the colour, and the few things the shared vocabulary genuinely does
 * not cover.
 *
 * 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
 *    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 red 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: #ff3b30;
  --pickle-mint-strong: #ff1d10;
  --pickle-mint-dim: #e02a20;
  --pickle-mint-ink: #120d0d;
  --pickle-mint-soft: rgb(255 59 48 / 7%);
  --pickle-mint-line: rgb(255 59 48 / 35%);
  --pickle-mint-hi: #ff9a92;
  --pickle-focus: #ff3b30;
}

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

/* 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 green on a
 * red 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 red.
 *
 * 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(255 59 48 / 10%),
    rgb(255 59 48 / 3%) 46%,
    transparent 72%
  );
}

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

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

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

body[data-app="pepper"] .ex-feed {
  stroke: rgb(255 59 48 / 34%);
}

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

body[data-app="pepper"] ::selection {
  background: rgb(255 59 48 / 30%);
}

/* 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 a green accent on a red site. */
:root {
  --pickle-cyan: #ff9a92;
  --pickle-blue: #e02a20;
  --pickle-lane-mini-idle: rgb(255 59 48 / 34%);
}

/* ERRORS DO NOT RELY ON COLOUR.
 *
 * The estate reserves red for errors (`--pickle-rose`), and this site has just
 * made red its ordinary accent, so an error painted red would read as a
 * heading. Every notice here carries three signals: a glyph, a heavier border,
 * and a word naming the kind. That is better practice regardless - roughly
 * eight percent of men distinguish red from green poorly - and it keeps the
 * message legible in greyscale and to a screen reader that never sees colour.
 *
 * These have no `ex-` equivalent: the estate signals state through `.ex-err`
 * and `.ex-note`, which are colour-led, and it can afford that because green on
 * red is unambiguous there.
 */
.pep-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--pickle-line);
  border-radius: 2px;
  background: var(--pickle-surface-1);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 14px;
}

.pep-notice__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.pep-notice__label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.pep-notice--error {
  border-width: 2px;
  border-color: var(--pickle-rose, #ff5c5c);
}

.pep-notice--warn {
  border-width: 2px;
  border-color: var(--pickle-amber, #f4a300);
}

.pep-notice--ok {
  border-color: var(--pickle-mint-line);
}

/* Spacing between the fields of a form. `.ex-form` styles labels, inputs and
 * selects but leaves the rhythm to `.ex-form p`, and a <p> wrapping a label and
 * an input is poor markup. One rule, not a layout system. */
.pep-field {
  margin: 0 0 var(--pickle-space-4, 16px);
}

/* A label row that carries a balance or a Max control on its right. The
 * estate's forms are single-column and have no equivalent. */
.pep-fieldhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.pep-fieldhead label {
  margin: 0;
}

.pep-balance {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--pickle-subtle);
}

.pep-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--pickle-accent-text);
  cursor: pointer;
  text-decoration: underline;
}

/* The direction control sits between the two halves of the swap form, which
 * the estate's stacked forms never need. */
.pep-flip {
  display: flex;
  justify-content: center;
  margin: 4px 0 10px;
}

.pep-flip .ex-btn {
  padding: 6px 12px;
  font-size: 12px;
}

/* Wide content scrolls inside its own box: the page body must never scroll
 * sideways, and a pool table on a 375px phone would otherwise force it to. */
.pep-scroll {
  overflow-x: auto;
}

.pep-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-align: right;
  white-space: nowrap;
}

.pep-sub {
  display: block;
  color: var(--pickle-subtle);
  font-size: 11px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}