/* Silo — pool market detail page.
   Not Slate's full-bleed hairline stack: this is Silo's own card system — a
   constrained column of squircle panels on the page surface, with the chart
   and the pool facts side by side.
   Markup is built by js/silo-market.js. */

.smp-page {
  --smp-paper: #fcfcfb;
  --smp-page: #f4f4f2;
  --smp-chip: #ededec;
  --smp-line: #ececea;
  --smp-text: #17181a;
  --smp-muted: #7c848c;
  --smp-dim: #9aa1a9;
  --smp-up: #1a7f57;
  --smp-down: #c0453f;
  --smp-btn-bg: #e0447c;
  --smp-btn-fg: #fff;
  --smp-btn-hover: #c93a6e;
  --smp-accent-bg: #fbe9f0;
  --smp-accent-fg: #c04476;
  --smp-track: #e6e6e3;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 18px;
  padding-bottom: 28px;
}
/* .silo-page is a flex column, so children would shrink to fit instead of
   letting the view scroll */
.smp-page > * { flex: none; }

/* ===== back ===== */
.smp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--smp-dim);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}
.smp-back:hover { color: var(--smp-text); }
.smp-back svg { width: 13px; height: 13px; }

/* ===== identity card ===== */
.smp-card {
  position: relative;
  overflow: visible;
  padding: 16px 18px;
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--smp-paper);
}
.smp-head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.smp-logo {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  corner-shape: squircle;
  object-fit: cover;
  background: var(--smp-chip);
}
.smp-id { flex: 1; min-width: 0; }
.smp-pair {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--smp-text);
}
.smp-pair i {
  font-style: normal;
  font-weight: 500;
  color: #c6c9cc;
  margin: 0 3px;
}
.smp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.smp-tag {
  padding: 3px 8px;
  border-radius: 7px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-muted);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.smp-tag.is-accent { background: var(--smp-accent-bg); color: var(--smp-accent-fg); }
.smp-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.smp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 11px;
  corner-shape: squircle;
  background: var(--smp-btn-bg);
  color: var(--smp-btn-fg);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease;
}
.smp-btn:hover { background: var(--smp-btn-hover); }
.smp-runner {
  position: absolute;
  top: 0;
  right: 200px;
  z-index: 1;
  width: 72px;
  aspect-ratio: 140 / 172;
  pointer-events: none;
  transform: translateY(-58%);
}
.smp-runner canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.smp-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.smp-icon-btn:hover { background: var(--smp-chip); filter: brightness(0.94); color: var(--smp-text); }
.smp-icon-btn svg { width: 15px; height: 15px; }

/* ===== two columns: chart, then the pool's facts ===== */
.smp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
  margin-top: 10px;
  align-items: stretch;
}

/* --- chart --- */
.smp-chart-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--smp-paper);
}
.smp-chart-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}
.smp-tabs,
.smp-ranges {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  corner-shape: squircle;
  background: var(--smp-chip);
}
.smp-tab,
.smp-range {
  padding: 5px 11px;
  border: 0;
  border-radius: 8px;
  corner-shape: squircle;
  background: none;
  color: var(--smp-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.smp-tab:hover,
.smp-range:hover { color: var(--smp-text); }
.smp-tab.is-on,
.smp-range.is-on {
  background: var(--smp-paper);
  color: #e0447c;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
/* the fee range control is the chart's timeframe control: same metrics, so
   the two line up across the cards instead of sitting at different heights */
.smp-canvas-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 244px;
}
.smp-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.smp-chart-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}
/* --- headline figure above the chart --- */
.smp-headline {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
}
.smp-headline-main { min-width: 0; }
/* window facts sit opposite the figure, on the same baseline */
.smp-headline-stats {
  display: flex;
  flex: none;
  gap: 26px;
  padding-bottom: 3px;
}
.smp-hstat p { margin: 0; }
.smp-hstat-label {
  font-size: 11px;
  font-weight: 550;
  color: var(--smp-dim);
}
.smp-hstat-value {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 650;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-headline-label {
  font-size: 11.5px;
  font-weight: 550;
  color: var(--smp-dim);
}
.smp-headline-value {
  margin-top: 3px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-headline-delta {
  margin-left: 9px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.smp-headline-delta.up { color: var(--smp-up); }
.smp-headline-delta.down { color: var(--smp-down); }

/* --- context strip under the headline --- */
/* --- positions / history --- */
.smp-activity { margin-top: 10px; }
.smp-activity-top { padding-bottom: 4px; }
.smp-activity-body { min-height: 168px; }
.smp-activity-body:has(.smp-empty) {
  display: grid;
  place-items: center;
}
.smp-empty {
  text-align: center;
  padding: 18px 12px;
}
.smp-empty strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.014em;
  color: var(--smp-text);
}
.smp-empty p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--smp-dim);
}
.smp-empty .smp-btn { margin-top: 13px; }

/* --- side card --- */
.smp-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.smp-panel {
  padding: 14px 15px;
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--smp-paper);
}
.smp-panel-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smp-dim);
  padding-bottom: 4px;
}
/* --- hero figure --- */
.smp-hero { padding: 2px 0 14px; }
.smp-hero-label {
  font-size: 11.5px;
  font-weight: 550;
  color: var(--smp-dim);
}
.smp-hero-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-hero-value em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- 2x2 stat grid, no dividers --- */
.smp-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--smp-line);
}
.smp-mini-label {
  font-size: 11px;
  font-weight: 550;
  color: var(--smp-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smp-mini-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-mini-value em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.smp-mini-value.is-accent { color: var(--smp-accent-fg); }
.smp-page .up { color: var(--smp-up); }
.smp-page .down { color: var(--smp-down); }


/* ===== position-shape pills on the chart card ===== */
.smp-chart-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.smp-shapes {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  corner-shape: squircle;
  background: var(--smp-chip);
}
.smp-shape {
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  corner-shape: squircle;
  background: none;
  color: var(--smp-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 640;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.smp-shape:hover { color: var(--smp-text); }
.smp-shape.is-on {
  background: var(--smp-paper);
  color: var(--smp-accent-fg, #c04476);
  box-shadow: 0 1px 2px rgba(23, 24, 26, 0.08);
}
@media (max-width: 700px) { .smp-shapes { display: none; } }

/* --- the custom range button + its dialog --------------------------------
   The band could only be set by dragging its edge across the canvas: fine for
   a rough range, useless for an exact one, and on a phone the drag target is a
   few pixels tall. Two live fields in the footer fixed the capability and
   wrecked the row, so the footer keeps one button and the editing moved into a
   dialog with room for presets and a real error line. */
.smp-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 640;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.smp-range-btn[hidden] { display: none; }
.smp-range-btn:hover { background: var(--smp-track); }
.smp-range-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--smp-accent-fg, #c04476);
}
.smp-range-ico { width: 14px; height: 14px; color: var(--smp-muted); }
.smp-range-btn-value {
  padding-left: 7px;
  border-left: 1px solid var(--smp-line);
  color: var(--smp-accent-fg, #c04476);
  font-variant-numeric: tabular-nums;
}

/* the dialog lives in the overlay layer, outside .smp-page, so it carries its
   own copy of the page's tokens */
.clone-overlay.smp-range-modal {
  --smp-paper: #fcfcfb;
  --smp-chip: #ededec;
  --smp-line: #ececea;
  --smp-text: #17181a;
  --smp-muted: #7c848c;
  --smp-down: #c0453f;
  --smp-track: #e6e6e3;
  width: min(430px, calc(100vw - 24px));
}
html[data-silo-theme="dark"] .clone-overlay.smp-range-modal {
  --smp-paper: #1a1c1f;
  --smp-chip: #222428;
  --smp-line: #26282c;
  --smp-text: #f2f3f5;
  --smp-muted: #9aa1ab;
  --smp-down: #ff7373;
  --smp-track: #2c2f34;
}
.srm-body { padding: 2px 20px 4px; }
.srm-now {
  margin: 0 0 14px;
  color: var(--smp-muted);
  font-size: 12px;
  font-weight: 560;
}
.srm-now b {
  color: var(--smp-text);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}
.srm-fields {
  display: flex;
  align-items: center;
  gap: 10px;
}
.srm-field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px 8px;
  border-radius: 14px;
  corner-shape: squircle;
  background: var(--smp-chip);
  transition: box-shadow .15s ease;
}
.srm-field:focus-within { box-shadow: 0 0 0 1.5px var(--smp-accent-fg, #c04476); }
.srm-field.is-bad { box-shadow: 0 0 0 1.5px var(--smp-down); }
.srm-field-label {
  color: var(--smp-muted);
  font-size: 10.5px;
  font-weight: 640;
}
.srm-field input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--smp-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 660;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.srm-field-delta {
  color: var(--smp-muted);
  font-size: 11px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.srm-sep { flex: none; color: var(--smp-muted); font-size: 13px; }
/* --- the dual-handle track ---
   Two range inputs stacked on one track: the inputs themselves are transparent
   and click-through, only their thumbs take the pointer, so the pair behaves
   as one control without hand-rolling drag maths. */
.srm-slider {
  position: relative;
  height: 26px;
  margin-top: 16px;
}
.srm-track, .srm-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  pointer-events: none;
}
.srm-track { left: 0; right: 0; background: var(--smp-chip); }
.srm-fill { background: var(--smp-btn-bg, #e0447c); }
/* where the live price sits on a log track — not the middle */
.srm-now-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  margin-top: -5px;
  border-radius: 1px;
  background: var(--smp-muted);
  opacity: .5;
  transform: translateX(-50%);
  pointer-events: none;
}
.srm-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  outline: none;
  /* the track is inert; only the thumbs below take the pointer */
  pointer-events: none;
}
.srm-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--smp-btn-bg, #e0447c);
  border-radius: 50%;
  background: var(--smp-paper);
  box-shadow: 0 1px 3px rgba(23, 24, 26, .2);
  cursor: grab;
}
.srm-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--smp-btn-bg, #e0447c);
  border-radius: 50%;
  background: var(--smp-paper);
  box-shadow: 0 1px 3px rgba(23, 24, 26, .2);
  cursor: grab;
}
.srm-slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.srm-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(224, 68, 124, .22);
}
.srm-scale {
  position: relative;
  height: 14px;
  margin-top: 4px;
  color: var(--smp-muted);
  font-size: 10.5px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}
.srm-scale span { position: absolute; top: 0; white-space: nowrap; }
.srm-scale-lo { left: 0; }
.srm-scale-hi { right: 0; }
.srm-scale-now { transform: translateX(-50%); }

/* holds its line whether or not there is a problem, so nothing jumps */
.srm-hint {
  min-height: 15px;
  margin: 9px 2px 0;
  color: var(--smp-muted);
  font-size: 11.5px;
  font-weight: 560;
}
.srm-hint.is-bad { color: var(--smp-down); }
.srm-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.srm-preset {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--smp-chip);
  color: var(--smp-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 640;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.srm-preset:hover { background: var(--smp-track); color: var(--smp-text); }
.srm-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px 18px;
}
.srm-reset, .srm-apply {
  height: 40px;
  border: 0;
  border-radius: 12px;
  corner-shape: squircle;
  font-family: inherit;
  font-size: 13px;
  font-weight: 660;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.srm-reset {
  padding: 0 16px;
  background: var(--smp-chip);
  color: var(--smp-muted);
}
.srm-reset:hover { background: var(--smp-track); color: var(--smp-text); }
.srm-apply {
  flex: 1;
  background: var(--smp-btn-bg, #e0447c);
  color: var(--smp-btn-fg, #fff);
}
.srm-apply:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 700px) {
  .smp-chart-foot { gap: 8px; align-items: center; }
  .smp-range-btn { flex: 1; justify-content: center; height: 36px; min-height: 36px; }
  /* a 18px thumb is already small for a thumb; give the track more room */
  .srm-slider { height: 30px; }
  .srm-slider input[type="range"] { height: 30px; }
  /* stacked, because side by side each field is barely wider than its label */
  .srm-fields { flex-direction: column; align-items: stretch; gap: 8px; }
  .srm-sep { display: none; }
}

/* ===== the tape: recent trades / history rows ===== */
.smp-tape { width: 100%; padding: 2px 4px 4px; }
.smp-tape-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(96px, 1.1fr) minmax(72px, 0.9fr) minmax(110px, 1.2fr) 74px;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--smp-line);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-tape-row:last-child { border-bottom: 0; }
.smp-tape-row > :nth-child(n+3) { text-align: right; }
.smp-tape-head {
  padding: 4px 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--smp-dim);
}
.smp-tape-user { color: var(--smp-muted); }
.smp-tape-user em {
  font-style: normal;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--smp-accent-bg, #fbe9f0);
  color: var(--smp-accent-fg, #c04476);
  font-weight: 650;
}
.smp-tape-side.is-buy { color: var(--smp-up); font-weight: 640; }
.smp-tape-side.is-sell { color: var(--smp-down); font-weight: 640; }
.smp-tape-size {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--smp-muted);
}
.smp-tape-time { color: var(--smp-dim); font-size: 11.5px; }
.smp-tape-row.is-mine { background: color-mix(in srgb, var(--smp-accent-bg, #fbe9f0) 40%, transparent); }

@media (max-width: 700px) {
  .smp-tape-row { grid-template-columns: minmax(80px, 1fr) minmax(90px, 1.1fr) minmax(70px, 0.9fr) 64px; }
  .smp-tape-row .smp-tape-size { display: none; }
}

/* --- current pool price --- */
.smp-price {
  display: grid;
  gap: 2px;
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--smp-line);
}
.smp-price span {
  font-size: 11px;
  font-weight: 550;
  color: var(--smp-dim);
}
.smp-price b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-price i {
  font-style: normal;
  font-size: 11px;
  font-weight: 550;
  color: var(--smp-muted);
  font-variant-numeric: tabular-nums;
}

/* --- token reserves --- */
.smp-reserve { padding: 9px 0 0; }
.smp-reserve-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
}
.smp-reserve-top span {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--smp-text);
}
.smp-reserve-top b {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--smp-muted);
  font-variant-numeric: tabular-nums;
}
.smp-reserve-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--smp-dim);
  font-variant-numeric: tabular-nums;
}
.smp-reserve-foot b {
  font-weight: 600;
  color: var(--smp-muted);
}
.smp-bar-track {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--smp-track);
  overflow: hidden;
}
.smp-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9dbe, #e0447c);
}

/* --- compact label/value rows (fee structure) --- */
.smp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.smp-row span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--smp-dim);
}
.smp-row b {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}

/* --- context strip under the headline --- */
.smp-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding-bottom: 12px;
}
.smp-context span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--smp-dim);
  white-space: nowrap;
}
.smp-context b {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}

/* --- positions / history --- */
.smp-activity { margin-top: 10px; }
.smp-activity-top { padding-bottom: 4px; }
.smp-activity-body { min-height: 168px; }
.smp-activity-body:has(.smp-empty) {
  display: grid;
  place-items: center;
}
.smp-empty {
  text-align: center;
  padding: 18px 12px;
}
.smp-empty strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.014em;
  color: var(--smp-text);
}
.smp-empty p {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--smp-dim);
}
.smp-empty .smp-btn { margin-top: 13px; }

/* --- side card --- */
.smp-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.smp-panel {
  padding: 14px 15px;
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--smp-paper);
}
.smp-panel-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smp-dim);
  padding-bottom: 4px;
}
/* --- hero figure --- */
.smp-hero { padding: 2px 0 14px; }
.smp-hero-label {
  font-size: 11.5px;
  font-weight: 550;
  color: var(--smp-dim);
}
.smp-hero-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-hero-value em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- 2x2 stat grid, no dividers --- */
.smp-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--smp-line);
}
.smp-mini-label {
  font-size: 11px;
  font-weight: 550;
  color: var(--smp-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smp-mini-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-mini-value em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.smp-mini-value.is-accent { color: var(--smp-accent-fg); }
.smp-page .up { color: var(--smp-up); }
.smp-page .down { color: var(--smp-down); }

/* --- depth --- */
.smp-depth-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
}
.smp-depth-top b {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-depth-top span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--smp-dim);
}
.smp-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--smp-track);
  overflow: hidden;
}
.smp-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff80ab, #e0447c);
}
.smp-depth-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--smp-dim);
}

/* ===== responsive ===== */
@media (max-width: 940px) {
  .smp-grid { grid-template-columns: minmax(0, 1fr); }
  .smp-canvas-wrap { min-height: 210px; }
}
@media (max-width: 620px) {
  .smp-head { flex-wrap: wrap; }
  .smp-actions { width: 100%; }
  .smp-btn { flex: 1; justify-content: center; }
  .smp-runner { display: none; }
  .smp-chart-top,
  .smp-chart-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .smp-runner {
    animation: none;
    transform: translateY(-58%);
  }
}

/* ===== dark theme (html[data-silo-theme="dark"], see css/silo-theme.css) ===== */
html[data-silo-theme="dark"] .smp-page {
  --smp-paper: #1a1c1f;
  --smp-page: #101113;
  --smp-chip: #222428;
  --smp-line: #26282c;
  --smp-text: #f2f3f5;
  --smp-muted: #9aa1ab;
  --smp-dim: #70767f;
  --smp-up: #2fbe84;
  --smp-down: #ff7373;
  --smp-btn-bg: #ff8fb3;
  --smp-btn-fg: #101113;
  --smp-btn-hover: #ffa5c4;
  --smp-accent-bg: rgba(255, 143, 179, 0.16);
  --smp-accent-fg: #ff8fb3;
  --smp-track: #26282c;
}
html[data-silo-theme="dark"] .smp-tab.is-on,
html[data-silo-theme="dark"] .smp-range.is-on {
  background: #2f3237;
  color: #ff8fb3;
  box-shadow: none;
}

/* ===== header overflow menu =====
   Hangs off <body> (the header card clips it), so it carries its own copy of
   the light tokens; the dark flip in silo-theme.css lands on every element and
   outranks these, so only the light side needs repeating. */
.smp-menu {
  --smp-paper: #fcfcfb;
  --smp-chip: #ededec;
  --smp-line: #ececea;
  --smp-text: #17181a;
  --smp-dim: #9aa1a9;
  --smp-accent-fg: #c04476;
  position: fixed;
  z-index: 10200;
  width: 214px;
  padding: 5px;
  border-radius: 14px;
  corner-shape: squircle;
  background: var(--smp-paper);
  box-shadow: 0 14px 38px rgba(23, 24, 26, 0.16), 0 2px 6px rgba(23, 24, 26, 0.07);
  opacity: 0;
  transform: translateY(-4px) scale(0.985);
  transform-origin: top right;
  transition: opacity 0.14s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.smp-menu[data-open] {
  opacity: 1;
  transform: none;
}
.smp-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  corner-shape: squircle;
  background: none;
  color: var(--smp-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.13s ease;
}
.smp-menu-item:hover { background: var(--smp-chip); }
.smp-menu-item:focus-visible {
  outline: 2px solid var(--smp-accent-fg);
  outline-offset: -2px;
}
.smp-menu-item svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--smp-dim);
}
.smp-menu-sep {
  height: 1px;
  margin: 4px 9px;
  background: var(--smp-line);
}

@media (prefers-reduced-motion: reduce) {
  .smp-menu { transition: opacity 0.1s linear; transform: none; }
}

/* ======================================================================
   ADD LIQUIDITY SHEET
   Same squircle paper as the market card, floated over a dimmed page.
   Built by the deposit block in js/silo-market.js.
   ====================================================================== */

.smp-sheet-root {
  /* the sheet carries its own tokens because it mounts on <body>, outside the
     market page — the result colours have to be declared here too */
  --smp-up: #1a7f57;
  --smp-down: #c0453f;
  --smp-paper: #fcfcfb;
  --smp-page: #f4f4f2;
  --smp-chip: #ededec;
  --smp-line: #ececea;
  --smp-text: #17181a;
  --smp-muted: #7c848c;
  --smp-dim: #9aa1a9;
  --smp-btn-bg: #e0447c;
  --smp-btn-fg: #fff;
  --smp-btn-hover: #c93a6e;
  --smp-accent-fg: #c04476;
  position: fixed;
  inset: 0;
  z-index: 10400;
  display: grid;
  place-items: center;
  padding: 20px;
}
.smp-sheet-back {
  position: absolute;
  inset: 0;
  background: rgba(31, 30, 27, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.smp-sheet-root[data-open] .smp-sheet-back { opacity: 1; }

.smp-sheet {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  corner-shape: squircle;
  background: var(--smp-paper);
  color: var(--smp-text);
  box-shadow: 0 26px 70px rgba(23, 24, 26, 0.26), 0 3px 10px rgba(23, 24, 26, 0.08);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.smp-sheet-root[data-open] .smp-sheet { opacity: 1; transform: none; }

.smp-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px 12px;
}
.smp-sheet-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -0.015em;
}
.smp-sheet-head p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--smp-muted);
}
.smp-sheet-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--smp-chip);
  color: var(--smp-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.smp-sheet-x:hover { color: var(--smp-text); filter: brightness(0.95); }
.smp-sheet-x svg { width: 11px; height: 11px; }

.smp-sheet-body {
  padding: 0 16px 14px;
  overflow-y: auto;
  /* a flex item defaults to min-height:auto, which would let the content push
     the sheet past its max-height instead of scrolling inside it */
  min-height: 0;
}

/* ---------- the two amounts ---------- */
/* [hidden] is a UA rule; a class setting display would silently outrank it,
   which left the unused side visible in the single-sided modes */
.smp-amt[hidden], .smp-amt-link[hidden] { display: none; }
/* the side picker is its own decision — let it breathe before the amounts */
.smp-lp-ranges + .smp-amt,
.smp-lp-note + .smp-amt { margin-top: 18px; }
.smp-amt {
  display: block;
  padding: 11px 14px 10px;
  border: 1px solid transparent;
  border-radius: 15px;
  corner-shape: squircle;
  background: var(--smp-page);
  cursor: text;
  transition: border-color 0.14s ease;
}
.smp-amt-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.smp-amt-row em {
  flex: none;
  font-style: normal;
  font-size: 13px;
  font-weight: 650;
  color: var(--smp-muted);
}
.smp-amt-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--smp-dim);
  font-variant-numeric: tabular-nums;
}
.smp-amt-in {
  min-width: 0;
  flex: 1;
  border: 0;
  background: none;
  color: var(--smp-text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 640;
  letter-spacing: -0.02em;
  outline: none;
}
.smp-amt-in::placeholder { color: #c4c9ce; }
/* a border rather than an outline: a 2px accent ring around a filled field
   reads as a validation error, and it collided with the ratio badge */
.smp-amt:focus-within { border-color: var(--smp-accent-fg); }

/* the two fields read as one pair, joined by the ratio marker between them */
.smp-amt-link {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -7px auto;
  position: relative;
  z-index: 1;
  border: 3px solid var(--smp-paper);
  border-radius: 50%;
  background: var(--smp-chip);
  color: var(--smp-muted);
}
.smp-amt-link svg { width: 12px; height: 12px; }

/* ---------- range ---------- */
.smp-sheet-section { margin-top: 18px; }
.smp-sheet-label {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--smp-muted);
}
.smp-lp-ranges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: 13px;
  corner-shape: squircle;
  background: var(--smp-page);
}
.smp-lp-range {
  height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  corner-shape: squircle;
  background: none;
  color: var(--smp-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 620;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.smp-lp-range:hover { color: var(--smp-text); }
.smp-lp-range.is-on {
  background: var(--smp-paper);
  color: var(--smp-accent-fg);
  box-shadow: 0 1px 2px rgba(23, 24, 26, 0.09);
}
.smp-lp-note {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--smp-dim);
}

/* ---------- preview ---------- */
.smp-sheet-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px 13px;
  border-radius: 15px;
  corner-shape: squircle;
  background: var(--smp-page);
}
.smp-sheet-facts > div { min-width: 0; }
.smp-sheet-facts dt {
  font-size: 11.5px;
  color: var(--smp-dim);
}
.smp-sheet-facts dd {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 640;
  letter-spacing: -0.015em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the review step lists text values, which will not fit three across */
.smp-sheet-facts.is-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 0;
}
.smp-sheet-facts.is-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.smp-sheet-facts.is-list dd { margin: 0; font-size: 13px; }

/* ---------- confirm ---------- */
/* the body scrolls under this, so it carries the edge that separates them */
.smp-sheet-foot {
  padding: 12px 16px 15px;
  border-top: 1px solid var(--smp-line);
}
.smp-sheet-go {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 14px;
  corner-shape: squircle;
  background: var(--smp-btn-bg);
  color: var(--smp-btn-fg);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 680;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.smp-sheet-go:hover:not(:disabled) { background: var(--smp-btn-hover); }
.smp-sheet-go:disabled { opacity: 0.42; cursor: default; }
.smp-sheet-fine {
  margin: 9px 2px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--smp-dim);
  text-align: center;
}

/* Until the sheet is actually open it must be glass: an invisible root that
   still caught the pointer was eating every click on the page whenever an
   open half-failed. */
.smp-sheet-root:not([data-open]) { pointer-events: none; }

/* ---- deposit flow: balances, sides, review ---- */
.smp-amt-bal {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.smp-amt-max {
  padding: 0;
  border: 0;
  background: none;
  color: var(--smp-accent-fg);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: opacity 0.14s ease;
}
.smp-amt-max:hover { opacity: 0.7; }
.smp-amt.is-over { border-color: #c0453f; }
.smp-amt.is-over .smp-amt-bal { color: #c0453f; }

.smp-sheet-btns { display: flex; gap: 8px; }
.smp-sheet-btns .smp-sheet-go { flex: 1; }
.smp-sheet-back-btn {
  flex: none;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--smp-line);
  border-radius: 14px;
  corner-shape: squircle;
  background: none;
  color: var(--smp-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.smp-sheet-back-btn:hover { background: var(--smp-chip); color: var(--smp-text); }

/* ---- deposit sheet: the receiving address and its QR ---- */

/* One control instead of a chip per token: the row wrapped the moment a
   fourth token appeared, and a wrapped row of pills reads as broken. A native
   select cannot carry a logo, so this is a listbox rather than a <select>. */
.smp-dep-picker { position: relative; margin: 0 0 12px; }

.smp-dep-trigger,
.smp-dep-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--smp-text);
  cursor: pointer;
}

.smp-dep-trigger {
  padding: 9px 11px;
  border: 1px solid var(--smp-line);
  border-radius: 12px;
  corner-shape: squircle;
  background: var(--smp-paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.smp-dep-trigger:hover { border-color: var(--smp-dim); }
.smp-dep-trigger:focus { outline: none; }
/* the platform focus ring sat as a blue rectangle over a squircle */
.smp-dep-trigger:focus-visible {
  border-color: var(--smp-accent-fg, #c04476);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--smp-accent-fg, #c04476) 18%, transparent);
}
.smp-dep-trigger > svg:last-child {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--smp-muted);
}
.smp-dep-trigger-text { display: grid; gap: 1px; min-width: 0; }
.smp-dep-trigger-text b { font-size: 13.5px; font-weight: 650; }
.smp-dep-trigger-text small,
.smp-dep-opt small {
  font-size: 11px;
  color: var(--smp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the logo, with the token's initial showing through if it never loads */
.smp-dep-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--smp-chip);
}
.smp-dep-ico i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--smp-muted);
}
.smp-dep-ico img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smp-dep-pop {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 292px;
  border: 1px solid var(--smp-line);
  border-radius: 14px;
  corner-shape: squircle;
  background: var(--smp-paper);
  box-shadow: 0 18px 44px rgba(23, 24, 26, 0.16), 0 2px 6px rgba(23, 24, 26, 0.06);
  overflow: hidden;
}
.smp-dep-pop[hidden] { display: none; }

.smp-dep-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--smp-line);
}
.smp-dep-search svg { width: 14px; height: 14px; flex: none; color: var(--smp-dim); }
.smp-dep-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--smp-text);
  outline: none;
}
.smp-dep-search input::placeholder { color: var(--smp-dim); }

.smp-dep-list { overflow-y: auto; padding: 5px; }
.smp-dep-opt {
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  corner-shape: squircle;
  background: none;
}
.smp-dep-opt[hidden] { display: none; }
.smp-dep-opt:hover { background: var(--smp-page); }
.smp-dep-opt:focus { outline: none; background: var(--smp-page); }
.smp-dep-opt span { display: grid; gap: 1px; min-width: 0; }
.smp-dep-opt b { font-size: 13px; font-weight: 620; }
/* what you hold, where you pick the token — a zero is left blank on the rows
   so the tokens you actually have carry the only numbers in the list */
.smp-dep-bal {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--smp-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.smp-dep-opt.is-on .smp-dep-bal { color: var(--smp-text); }
.smp-dep-bal.is-lead {
  font-size: 13px;
  color: var(--smp-text);
}

.smp-dep-tick {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--smp-accent-fg, #c04476);
  opacity: 0;
}
.smp-dep-opt.is-on .smp-dep-tick { opacity: 1; }

.smp-dep-empty {
  margin: 0;
  padding: 14px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--smp-muted);
}
.smp-dep-empty[hidden] { display: none; }

.smp-dep-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 2px 0 12px;
  padding: 16px 14px 14px;
  border: 1px solid var(--smp-line);
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--smp-page);
}

.smp-dep-qr {
  width: 176px;
  height: 176px;
  padding: 11px;
  border-radius: 14px;
  corner-shape: squircle;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 24, 26, 0.06), 0 6px 18px rgba(23, 24, 26, 0.07);
  display: grid;
  place-items: center;
}
.smp-dep-qr svg { width: 100%; height: 100%; display: block; }
/* an encoder that could not build the code leaves this empty rather than
   showing something wrong — say so instead of showing a blank card */
.smp-dep-qr[data-failed]::after {
  content: "Use the address below";
  font-size: 11.5px;
  color: var(--smp-muted);
  text-align: center;
}

.smp-dep-cap {
  margin: 0;
  font-size: 11.5px;
  color: var(--smp-muted);
}

.smp-dep-addr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--smp-line);
  border-radius: 12px;
  corner-shape: squircle;
  background: var(--smp-paper);
  color: var(--smp-text);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.smp-dep-addr span { flex: 1; min-width: 0; word-break: break-all; user-select: all; }
.smp-dep-addr svg { width: 15px; height: 15px; flex: none; color: var(--smp-muted); }
.smp-dep-addr:hover { border-color: var(--smp-dim); }
.smp-dep-addr:hover svg { color: var(--smp-text); }

/* the confirmation rides over the row rather than resizing it */
.smp-dep-copied {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  corner-shape: inherit;
  background: var(--smp-paper);
  color: var(--smp-accent-fg, #c04476);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.smp-dep-addr.is-copied { border-color: var(--smp-accent-fg, #c04476); }
.smp-dep-addr.is-copied .smp-dep-copied { opacity: 1; }

/* the network warning is the one line that must not be skimmed past */
.smp-dep-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 11px;
  border-radius: 11px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.smp-dep-warn svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.smp-dep-warn b { color: var(--smp-text); font-weight: 650; }

/* ======================================================================
   YOUR POSITION — the pool page's view of what you hold in it
   ====================================================================== */

.smp-mine {
  margin-top: 10px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  corner-shape: squircle;
  background: var(--smp-page);
}
.smp-mine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.smp-mine-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--smp-text);
}
.smp-mine-count { font-size: 12px; color: var(--smp-dim); }
.smp-mine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.smp-mine-grid span {
  display: block;
  font-size: 11.5px;
  color: var(--smp-muted);
}
.smp-mine-grid b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 660;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.smp-mine-rows { margin-top: 12px; }
.smp-mine-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--smp-line);
  font-size: 12.5px;
}
.smp-mine-range { font-weight: 640; }
.smp-mine-age { color: var(--smp-dim); }
.smp-mine-usd {
  margin-left: auto;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.smp-mine-out {
  flex: none;
  height: 27px;
  padding: 0 11px;
  border: 1px solid var(--smp-line);
  border-radius: 999px;
  background: none;
  color: var(--smp-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 640;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.smp-mine-out:hover { background: var(--smp-chip); color: var(--smp-text); }

/* Short viewports: the sheet would otherwise scroll and cut the numbers you
   are deciding on in half. Shed the two lines that are context rather than
   input, and lay the facts out in one row, so it all stays on screen. */
@media (max-height: 720px) {
  .smp-lp-note { display: none; }
  .smp-sheet-facts { margin-top: 12px; padding: 10px 13px 11px; }
  .smp-sheet-facts dd { font-size: 13px; }
  .smp-amt-in { font-size: 19px; }
  .smp-sheet-section { margin-top: 12px; }
}
@media (max-height: 600px) {
  .smp-sheet-root { padding: 10px; }
  .smp-sheet { max-height: calc(100vh - 20px); }
  .smp-sheet-head { padding: 12px 16px 10px; }
}

@media (max-width: 560px) {
  .smp-sheet-root { padding: 0; place-items: end stretch; }
  .smp-sheet {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(24px);
  }
  .smp-mine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .smp-sheet, .smp-sheet-back { transition: opacity 0.12s linear; }
  .smp-sheet { transform: none; }
}

/* ======================================================================
   Layout pass: full-frame page, tabs under the price, share top-left,
   shapes in the chart foot, side column -> row of expanding cards.
   Appended last so it wins ties against the blocks above.
   ====================================================================== */

/* top bar of the chart card: share on the left, ranges on the right */
.smp-chart-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
}
.smp-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  corner-shape: squircle;
  background: var(--smp-accent-bg);
  color: var(--smp-accent-fg);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.smp-share:hover { filter: brightness(0.96); }
.smp-share svg { width: 13px; height: 13px; }

/* the metric tabs sit under the headline, per the reading order */
.smp-tabsrow {
  flex: none;
  padding-bottom: 12px;
}

/* chart foot: the liquidity-shape picker, labeled, tucked bottom-right */
.smp-chart-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
}
.smp-foot-label {
  font-size: 11px;
  font-weight: 550;
  color: var(--smp-dim);
}

/* the chart absorbs the viewport height the side column used to take */
.smp-canvas-wrap { min-height: max(300px, calc(100dvh - 600px)); }

/* ===== the deck: Pool / Reserves / Fee structure as expanding cards ===== */
.smp-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  align-items: start;
}
.smp-deck-card { padding: 0; }
.smp-deck-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 15px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
}
.smp-deck-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.smp-deck-text .smp-panel-title { padding-bottom: 2px; }
.smp-deck-value {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-deck-card="reserves"] .smp-deck-value { font-size: 14px; }
.smp-deck-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--smp-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smp-deck-chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-muted);
  transform: rotate(-90deg); /* BACK chevron points left; closed = down */
  transition: transform 0.24s cubic-bezier(0.25, 1, 0.4, 1), background 0.15s ease, color 0.15s ease;
}
.smp-deck-chev svg { width: 13px; height: 13px; }
.smp-deck-card.is-open .smp-deck-chev {
  transform: rotate(90deg);
  background: var(--smp-accent-bg);
  color: var(--smp-accent-fg);
}
.smp-deck-card.is-open .smp-panel-title { color: var(--smp-accent-fg); }
/* 0fr -> 1fr animates to the content's real height */
.smp-deck-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.25, 1, 0.4, 1);
}
.smp-deck-card.is-open .smp-deck-body { grid-template-rows: 1fr; }
.smp-deck-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 15px;
}
.smp-deck-card.is-open .smp-deck-inner { padding-bottom: 14px; }

@media (max-width: 940px) {
  .smp-deck { grid-template-columns: minmax(0, 1fr); }
  .smp-canvas-wrap { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .smp-deck-body, .smp-deck-chev { transition: none; }
}

/* the identity header sits on the page itself, not in a card */
.smp-header {
  position: relative;
  overflow: visible;
  padding: 2px 6px 18px;
}
/* paper on the page ground is all but invisible; the chip tone is what the
   rest of the app uses for a quiet label */
.smp-header .smp-tag:not(.is-accent) { background: var(--smp-chip); }
.smp-header .smp-logo { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06); }

/* Slate-style hierarchy: the metric hero lives on the page, above the card */
.smp-hero-strip { padding: 0 6px 14px; }
.smp-hero-strip .smp-headline { padding-bottom: 6px; }
/* one bar inside the card: share, metric tabs, then ranges at the far end */
.smp-chart-bar .smp-tabs { margin-right: auto; }
.smp-chart-bar { justify-content: flex-start; }
/* the hero left the card, so the chart can stand taller */
.smp-canvas-wrap { min-height: max(300px, calc(100dvh - 580px)); }
@media (max-width: 700px) {
  .smp-chart-bar { flex-wrap: wrap; }
  .smp-hero-strip { padding: 0 16px 12px; }
}

/* ======================================================================
   Slate-copy pass: price hero, vitals row, composition + details grid,
   dynamic-fee card with regime legend, headed sections.
   ====================================================================== */

.smp-hero-strip p { margin: 0; }
.smp-hero-big {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-hero-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px !important;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--smp-dim);
}
.smp-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1.5px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
/* the arrow is a direction cue, not a character to read */
.smp-delta-chip i {
  font-style: normal;
  font-size: 7px;
  line-height: 1;
  transform: translateY(-0.5px);
}
.smp-delta-chip.up { color: var(--smp-up); }
.smp-delta-chip.down { color: var(--smp-down); }

/* ── sections with headings ── */
.smp-section { margin-top: 22px; }
.smp-section-head { padding: 0 6px 10px; }
.smp-section-head h2 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--smp-text);
}
.smp-section-head p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--smp-dim);
}
.smp-section .smp-activity { margin-top: 0; }

/* ── stat rows of three ── */
.smp-vitals { margin-top: 10px; }
.smp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.smp-stat p { margin: 0; }
.smp-stat-value {
  margin-top: 5px !important;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-stat-unit {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--smp-dim);
  letter-spacing: 0;
}
.smp-stat-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px !important;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--smp-dim);
}

/* ── flat key/value details grid ── */
.smp-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 16px;
  padding-top: 6px;
  border-top: 1px solid var(--smp-line);
}
.smp-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--smp-line);
  font-size: 12px;
}
.smp-detail:nth-last-child(-n+4) { border-bottom: 0; }
.smp-detail-k { color: var(--smp-dim); font-weight: 500; }
.smp-detail-v,
.smp-mono {
  color: var(--smp-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.smp-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}
.smp-detail .up { color: var(--smp-up); }
.smp-detail .down { color: var(--smp-down); }

/* ── dynamic fee card ── */
.smp-fee-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}
.smp-fee-head p { margin: 0; }
.smp-fee-now {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 5px !important;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-state-chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--smp-chip);
  color: var(--smp-muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.smp-fee-wrap {
  position: relative;
  height: 170px;
}
.smp-fee-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* The four fee bands used to sit in a row under the chart, which ran past the
   edge of the card at this width. They are reference, not something you read
   every visit, so they live behind the info dot instead. */
.smp-fee-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  font-size: 11px;
  color: var(--smp-dim);
}
.smp-fee-band { font-weight: 500; }
.smp-fee-info {
  position: relative;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--smp-dim);
  cursor: help;
  transition: color 0.15s ease;
}
.smp-fee-info svg { width: 13px; height: 13px; }
.smp-fee-info:hover,
.smp-fee-info:focus-visible { color: var(--smp-text); }
/* the app's tooltip layer picks this up by aria-describedby and re-renders it
   as a card, so it only has to exist in the DOM, not be visible here */
.smp-fee-tip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.smp-fee-tip b {
  display: block;
  font-weight: 600;
}
.smp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.smp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 999px;
  background: #e0447c;
}
.smp-fee-tip b:nth-of-type(2) .smp-dot { opacity: 0.55; }
.smp-fee-tip b:nth-of-type(3) .smp-dot { opacity: 0.3; }

@media (max-width: 860px) {
  .smp-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .smp-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smp-detail:nth-last-child(-n+4) { border-bottom: 1px solid var(--smp-line); }
  .smp-detail:nth-last-child(-n+2) { border-bottom: 0; }
  .smp-hero-big { font-size: 27px; }
}


/* ======================================================================
   Redesign pass — the market detail in one screen.

   The chart and everything the pool IS sit side by side (the two-column
   frame this file's header always described), the price rides in the
   identity header instead of taking a band of its own, and the fee chart
   and the tape share the row beneath. Fills, not outlines: every block is
   a filled squircle slab on the page ground, the way Discover, Points and
   Analytics render.

   Supersedes the "Slate-copy pass" block above: .smp-hero-strip,
   .smp-vitals/.smp-stats, .smp-details and .smp-section are no longer
   emitted by render() in js/silo-market.js.
   ====================================================================== */

/* one slab, one radius — the shared surface. (.smp-sheet is the deposit
   modal; this is deliberately a different name.) */
.smp-slab {
  padding: 14px 16px;
  border-radius: 18px;
  corner-shape: squircle;
  background: var(--smp-paper);
}

/* ---------- header: back, identity, actions, all on one line ----------
   The back link used to float alone above the page with nothing to sit
   against; as a round icon button at the head of the identity row it reads
   as part of the header instead of as stray text on the ground. */
.smp-header { padding: 2px 4px 12px; }
.smp-head { gap: 12px; }
.smp-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 11px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.smp-back:hover { color: var(--smp-text); filter: brightness(0.95); }
.smp-back svg { width: 14px; height: 14px; }

/* the pair carries the share affordance — an icon, not a button */
.smp-pair {
  display: flex;
  align-items: center;
  gap: 9px;
}
.smp-share {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  corner-shape: squircle;
  background: none;
  color: var(--smp-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.smp-head:hover .smp-share,
.smp-share:focus-visible { opacity: 1; }
.smp-share:hover { background: var(--smp-chip); color: var(--smp-text); }
.smp-share svg { width: 14px; height: 14px; }

/* Five filled pills for what is really one line of provenance read as five
   competing objects. Two now: the venue and the protocol. The Robinhood chip
   is the shared .sm-rh-tag from css/silo-app.css — the same lime chip the
   markets table and the search palette draw — so the page cannot drift its
   own colour. Fee tier and bin step were never header material; they live in
   Pool details with the rest of the configuration. */
.smp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
}
.smp-meta .sm-rh-tag { margin-left: 0; }

/* ---------- the two columns ---------- */
.smp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 10px;
  margin-top: 0;
  align-items: stretch;   /* both columns end on the same line */
}
.smp-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- chart column ---------- */
.smp-chart-card {
  display: flex;
  flex-direction: column;
  padding: 13px 15px 14px;
}
.smp-chart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 0;
}
/* the figure the metric tabs drive, then the reference strip */
.smp-chart-card .smp-headline { padding: 13px 2px 0; }
.smp-chart-card .smp-headline-value { font-size: 29px; }
.smp-chart-card .smp-context { padding: 11px 2px 14px; }
.smp-canvas-wrap { flex: 1 1 auto; min-height: 250px; }
.smp-chart-foot {
  align-items: center;
  padding-top: 12px;
}
.smp-foot-shape {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.smp-foot-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--smp-dim);
  white-space: nowrap;
}

/* ---------- side: the four vitals, 2x2 ---------- */
.smp-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  padding-top: 0;
  border-top: 0;
}
/* the four vitals read as a set, so they are centred in their cells rather
   than ragged against the left edge of a two-column grid */
.smp-mini-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.smp-mini-cell p { margin: 0; }
.smp-mini-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--smp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smp-mini-value {
  margin-top: 3px !important;
  font-size: 18px;
  line-height: 23px;
  font-weight: 650;
  letter-spacing: -0.026em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-mini-sub {
  margin-top: 4px !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--smp-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- side: the split, as one rail ---------- */
.smp-ratio { margin-top: 16px; }
.smp-ratio-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.smp-ratio-side {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.smp-ratio-side b {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--smp-text);
  white-space: nowrap;
}
.smp-ratio-side em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--smp-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.smp-ratio-bar {
  display: block;
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--smp-track);
  overflow: hidden;
}
.smp-ratio-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--smp-btn-bg);
}

/* ---------- side: the way into the onchain facts ---------- */
.smp-details-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* 3px of group padding either side of a 26px button — the same box as the
     liquidity-shape switcher it sits opposite */
  height: 32px;
  margin-top: 14px;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.14s ease;
}
.smp-details-btn:hover { filter: brightness(0.95); }
.smp-details-btn svg { width: 13px; height: 13px; color: var(--smp-dim); }

/* ---------- the facts themselves, inside the modal ---------- */
.smp-fact-list { margin: 0; }
.smp-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--smp-line);
  font-size: 12px;
}
.smp-fact:last-child { border-bottom: 0; }
.smp-fact dt { color: var(--smp-muted); font-weight: 500; }
.smp-fact dd {
  margin: 0;
  color: var(--smp-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.smp-fact dd.smp-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}
.smp-fact .up { color: var(--smp-up); }
.smp-fact .down { color: var(--smp-down); }
.smp-fact-foot { padding-top: 14px; }
.smp-fact-copy {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 11px;
  corner-shape: squircle;
  background: var(--smp-chip);
  color: var(--smp-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 620;
  cursor: pointer;
  transition: filter 0.14s ease;
}
.smp-fact-copy:hover { filter: brightness(0.95); }

/* ---------- lower row: the fee chart beside the tape ---------- */
/* The fee chart lives in the side column now; the tape gets the full width
   below, at a fixed height so it never stretches to whatever is beside it. */
.smp-lower {
  margin-top: 10px;
  height: 340px;
}
.smp-lower > * { height: 100%; min-height: 0; }
.smp-fee-card { display: flex; flex-direction: column; }
.smp-fee-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
}
.smp-fee-head .smp-mini-label { margin: 0; }
.smp-fee-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0 !important;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.026em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
}
.smp-fee-wrap { flex: none; height: 104px; margin-top: 4px; }
.smp-fee-foot { padding-top: 10px; font-size: 10.5px; }
.smp-fee-card .smp-range { padding: 3px 8px; font-size: 11px; }

/* ---------- the tape, edge to edge on its slab ---------- */
.smp-activity {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
}
.smp-activity-top { flex: none; padding: 11px 14px 3px; }
/* the pill group hugs its tabs, like every other pill group on the page */
.smp-tabs-inline { display: inline-flex; }
.smp-activity-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.smp-activity .smp-tape { padding: 0; }
/* the column header stays put while the trades run under it */
.smp-activity .smp-tape-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--smp-paper);
}
.smp-activity .smp-tape-row { padding-left: 16px; padding-right: 16px; }
.smp-activity .smp-tape-row:last-child { border-bottom: 0; }
.smp-activity .smp-mine,
.smp-activity .smp-empty { padding: 14px 16px; }

/* ---------- narrow ---------- */
@media (max-width: 1080px) {
  .smp-grid,
  .smp-lower { grid-template-columns: minmax(0, 1fr); }
  .smp-activity { height: 340px; }
  .smp-side { flex-direction: row; align-items: stretch; }
  .smp-side > * { flex: 1 1 0; min-width: 0; }
  .smp-fee-wrap { min-height: 140px; }
}
@media (max-width: 820px) {
  .smp-side { flex-direction: column; }
  .smp-head { flex-wrap: wrap; }
  .smp-actions { margin-left: auto; }
}
@media (max-width: 700px) {
  .smp-slab { padding: 13px 14px; border-radius: 16px; }
  .smp-facts { padding: 3px 14px 4px; }
  .smp-activity { padding: 0; }
  .smp-chart-bar { flex-wrap: wrap; }
  .smp-chart-foot { flex-wrap: wrap; gap: 10px; }
  .smp-canvas-wrap { min-height: 240px; }
  /* pill labels stay on one line and the group scrolls, rather than the
     group growing a second row of half-height pills */
  .smp-activity-top {
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 14px;
  }
  .smp-activity-top::-webkit-scrollbar { display: none; }
  .smp-tabs-inline { flex-wrap: nowrap; }
  .smp-tabs-inline .smp-tab { white-space: nowrap; }
  /* the tape's four narrow columns plus slab padding overflow a phone, so
     the row keeps its own tighter gutter and the account never wraps */
  .smp-activity .smp-tape-row {
    grid-template-columns: minmax(64px, 1fr) minmax(84px, 1.05fr) minmax(64px, 0.85fr) 60px;
    gap: 9px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .smp-activity .smp-tape-user,
  .smp-activity .smp-tape-side,
  .smp-activity .smp-tape-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------- chart tooltips ----------
   One reader for all five charts (the four metric tabs and the fee chart).
   It rides inside the canvas wrapper, so it is positioned against the plot
   rather than the page and can never be clipped by a scroll. */
.smp-canvas-wrap,
.smp-fee-wrap { position: relative; }
.smp-tip {
  position: absolute;
  z-index: 3;
  padding: 6px 9px 7px;
  border-radius: 9px;
  corner-shape: squircle;
  background: var(--smp-paper);
  box-shadow: 0 5px 16px rgba(23, 24, 26, 0.12), 0 0 0 1px rgba(23, 24, 26, 0.05);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--smp-dim);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.11s ease, transform 0.11s ease;
}
html[data-silo-theme="dark"] .smp-tip {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.smp-tip[data-open] { opacity: 1; transform: none; }
.smp-fee-wrap .smp-tip { padding: 5px 8px 6px; }
.smp-fee-wrap .smp-tip b { font-size: 11.5px; }
.smp-tip b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--smp-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.smp-tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  white-space: nowrap;
}
.smp-tip-row > span:first-child { color: var(--smp-dim); }
.smp-tip-row > span:last-child {
  color: var(--smp-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.smp-tip-time {
  display: block;
  margin-top: 2px;
  color: var(--smp-dim);
  white-space: nowrap;
}

/* ======================================================================
   MOBILE — market detail
   Scoped to max-width, so the desktop layout above is untouched.
   ====================================================================== */
@media (max-width: 700px) {
  /* The header spent ~200px before a single number: a 44px logo, the pair on
     its own line, the badges under it, then a full-width button. Tightened so
     the chart is on screen when the page opens. */
  .smp-head { gap: 10px; }
  .smp-logo { width: 36px; height: 36px; border-radius: 11px; }
  .smp-pair { font-size: 17px; }
  .smp-header { padding: 0 2px 10px; }
  .smp-btn { height: 40px; }

  /* the two pill rows sat on separate lines; they share one that scrolls */
  .smp-chart-bar {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 10px;
  }
  .smp-chart-bar::-webkit-scrollbar { display: none; }
  .smp-tabs, .smp-ranges { flex: none; }

  /* the headline block carries three label/value pairs; on a phone they read
     as one wrapped line rather than a grid with holes in it */
  .smp-context { gap: 8px 14px; flex-wrap: wrap; }
  .smp-headline-stats { gap: 16px; }
  .smp-hstat-value { font-size: 13px; }
  .smp-headline-value { font-size: 26px; }

  /* the min/max pills are the widest thing on the plot — they only need to
     name the edge they mark */
  .smp-canvas-wrap { min-height: 220px; }
}

@media (max-width: 520px) {
  .smp-slab { padding: 12px 12px; border-radius: 15px; }
  .smp-pair { font-size: 16px; }
  .smp-headline-value { font-size: 23px; }
  .smp-mini-value { font-size: 16px; }
  .smp-fee-now { font-size: 18px; }
}