/* Silo navbar + app-shell styles. Loaded after responsive.css and wins ties.
   Kept in its own file so design passes on responsive.css can't clobber it. */

/* ===== Discover background ===== */
body.silo-discover-page {
  background: #f4f4f2 !important;
}
body.silo-discover-page::before {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: clamp(240px, 34vh, 340px);
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/discover-pink-background.svg") center bottom / max(100%, 900px) auto no-repeat;
  opacity: 0.46;
  filter: saturate(0.92);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 100%);
}
body.silo-discover-page #__next {
  position: relative;
  z-index: 1;
}
body.silo-discover-page [class*="bg-v2-header-gradient"] {
  display: none !important;
}
body.silo-discover-page [data-sentry-component="PoolDiscoveryTable"] > div {
  background: rgba(252, 252, 251, 0.94) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@media (max-width: 767px) {
  body.silo-discover-page [data-sentry-component="PoolDiscoveryTable"] > div {
    background: rgba(252, 252, 251, 0.86) !important;
  }
}

/* ===== navbar search — centered grey squircle ===== */
/* give the header's three zones equal flex so the search zone sits at the
   true center of the bar (left keeps links at start, right keeps wallet at end) */
@media (min-width: 768px) {
  div[class*="h-[45px]"][class*="justify-between"] > div { flex: 1 1 0 !important; }
  div[class*="h-[45px]"][class*="justify-between"] > div:last-child { justify-content: flex-end !important; }
  div[class*="flex-1"][class*="md:justify-end"] { justify-content: center !important; }
}

button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) {
  background: #ededec !important; /* same grey as Filter Token / toolbar chips */
  border: none !important;
  border-radius: 12px !important;
  corner-shape: squircle;
  padding-left: 12px !important;
  transition: background 0.2s ease;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]):hover {
  background: #e2e2e0 !important;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) span {
  color: #55606e !important;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) > svg {
  color: #7c8694 !important;
}
button:has(> svg[data-sentry-source-file="UniversalSearch.tsx"]) kbd {
  background: #d9d9d6 !important; /* darker grey chip on the grey field */
  color: #4b5563 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

/* ===== app-style scroll — the page never scrolls, only the table ===== */
/* --silo-table-offset is measured live by sizeMarketsTable() in
   interactions.js, so layout changes above the table can't break the fit */
html, body { height: 100%; overflow: hidden !important; }
div[class*="max-h-[calc(100vh-153px)]"] {
  max-height: calc(100vh - var(--silo-table-offset, 200px)) !important;
  max-height: calc(100dvh - var(--silo-table-offset, 200px)) !important;
}
/* column headers stay pinned while the table scrolls under them */
thead th {
  position: sticky !important;
  top: 0;
  z-index: 10;
  background: #fcfcfb !important;
  box-shadow: 0 1px 0 #e5e5e3;
}

/* ===== search palette docks to the navbar search bar ===== */
/* crisp backdrop: no blur, and no dim at all while idle — the page only
   dims (gently) once the sheet actually expands with content */
.search-pal-overlay.is-docked {
  display: block;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
  transition: background 0.25s ease;
}
.search-pal-overlay.is-docked:has(.search-pal[data-mode="loading"]),
.search-pal-overlay.is-docked:has(.search-pal[data-mode="results"]) {
  background: rgba(31, 30, 27, 0.14);
}
/* white sheet, same corner radius as the bar (constant — no radius morph) */
.search-pal.is-docked {
  --paper: #fcfcfb;
  --soft: #ededec;
  --soft-deep: #e2e2e0;
  --soft-hover: #f4f4f2;
  --text: #17181a;
  --muted: #55606e;
  position: fixed;
  margin: 0;
  animation: none; /* Motion drives the expand/collapse morph */
  transform-origin: top center;
  will-change: left, width, height;
  background: #fcfcfb;
  border-radius: 12px;
  box-shadow: 0 16px 44px -12px rgba(18, 18, 16, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
/* the top row IS the navbar search bar: identical metrics (20px icon, 8px
   left pad, 6px gap, 13px text) so nothing shifts or shrinks on open */
.search-pal.is-docked .search-pal-field {
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 6px;
  padding: 0 10px 0 12px; /* matches the bar's measured 12px icon inset */
  background: #ededec;
  border-radius: 8px;
  corner-shape: squircle;
}
.search-pal.is-docked .search-pal-field svg {
  width: 20px;
  height: 20px;
}
.search-pal.is-docked kbd {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11px;
}

/* type-to-search: nothing below the field until there is a query */
.search-pal[data-mode="idle"] .search-pal-results,
.search-pal[data-mode="idle"] .search-pal-foot {
  display: none;
}
/* idle: the panel is exactly the bar — the field fills it edge to edge.
   A pink brand ring says "search is active" the moment it opens. */
.search-pal.is-docked[data-mode="idle"] {
  box-shadow: 0 0 0 1px #ff80ab, 0 0 0 4px rgba(255, 128, 171, 0.22);
}
.search-pal.is-docked[data-mode="idle"] .search-pal-field {
  margin: 0;
  height: 100%;
  background: transparent;
  border-radius: 12px;
}
/* expanded: the ring follows the input field inside the sheet */
.search-pal.is-docked:not([data-mode="idle"]) .search-pal-field {
  box-shadow: 0 0 0 1px #ff80ab, 0 0 0 3px rgba(255, 128, 171, 0.2);
}
.search-pal.is-docked .search-pal-results {
  min-height: 0;
  padding-top: 0;
}

/* loading skeletons while "searching" */
.search-pal-skel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  animation: silo-skel-in 0.2s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.search-pal-skel-logo,
.search-pal-skel-side,
.search-pal-skel-lines span {
  background: linear-gradient(90deg, #ececea 25%, #f6f6f4 50%, #ececea 75%);
  background-size: 200% 100%;
  animation: silo-shimmer 1.1s linear infinite;
}
.search-pal-skel-logo {
  width: 34px;
  height: 24px;
  border-radius: 999px;
  flex: none;
}
.search-pal-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.search-pal-skel-lines span {
  height: 10px;
  border-radius: 5px;
}
.search-pal-skel-lines span:first-child { width: 38%; }
.search-pal-skel-lines span:last-child { width: 22%; height: 8px; }
.search-pal-skel-side {
  width: 64px;
  height: 10px;
  border-radius: 5px;
  flex: none;
}
@keyframes silo-shimmer {
  to { background-position: -200% 0; }
}
@keyframes silo-skel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search-pal-skel,
  .search-pal-skel-logo,
  .search-pal-skel-side,
  .search-pal-skel-lines span { animation: none; }
}
.search-pal.is-docked .search-pal-field input {
  font-size: 13px;
  font-weight: 500;
}
.search-pal.is-docked .search-pal-field svg {
  width: 20px;
  height: 20px;
  color: #7c8694;
}
.search-pal.is-docked .search-pal-field input::placeholder {
  color: #55606e;
}
/* esc chip matches the bar's / chip */
.search-pal.is-docked kbd {
  background: #d9d9d6;
  color: #4b5563;
}
/* type chips on the white sheet; immune to global [role=tab] passes */
.search-pal.is-docked .search-pal-chips {
  padding: 4px 10px 8px;
}
.search-pal.is-docked .search-pal-chips button {
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  background: #ededec !important;
  color: #55606e !important;
  font-size: 11px !important;
  font-weight: 550 !important;
}
.search-pal.is-docked .search-pal-chips button:hover {
  background: #e2e2e0 !important;
}
.search-pal.is-docked .search-pal-chips button.is-active {
  background: #d9d9d6 !important;
  color: #17181a !important;
  font-weight: 650 !important;
}
/* results: quiet rows, tight corners */
.search-pal.is-docked .search-pal-row {
  border-radius: 8px;
}
.search-pal.is-docked .search-pal-row:hover,
.search-pal.is-docked .search-pal-row.is-hot {
  background: #f4f4f2;
}
.search-pal.is-docked .search-pal-foot {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ===== HeroUI-style tooltips ===== */
.hero-tooltip {
  position: fixed;
  z-index: 10002;
  max-width: 260px;
  padding: 4px 10px;
  border-radius: 10px;
  background: #ffffff;
  color: #17181a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 14px rgba(18, 18, 16, 0.1),
    0 12px 34px -8px rgba(18, 18, 16, 0.16);
  pointer-events: none;
  will-change: transform, opacity;
}
.hero-tooltip-card {
  padding: 8px 12px;
  min-width: 190px;
}
.hero-tooltip .clone-breakdown {
  display: grid;
  gap: 7px;
}
.hero-tooltip .clone-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
}
.hero-tooltip .clone-muted {
  color: #6e7681;
}

/* every embedded CSS tooltip is replaced by the HeroUI system */
[role="tooltip"]:not(.hero-tooltip) {
  display: none !important;
}
.hero-tooltip b,
.hero-tooltip strong {
  color: #17181a;
  font-weight: 600;
}

/* ===== search results: token logos as a clean avatar stack ===== */
/* box fits two 22px logos with overlap, so nothing gets flex-squeezed oval */
.search-pal-logo {
  width: 38px;
  flex: 0 0 38px;
  align-items: center;
}
.search-pal-logo img,
.search-pal-logo .sm-coin {
  width: 22px !important;
  height: 22px !important;
  flex: none;
  border-radius: 50%;
  /* glyph logos like eth.png are transparent PNGs on a big canvas: contain
     them inside a solid white badge instead of drawing the bare glyph */
  object-fit: contain;
  background: #fff;
  padding: 2px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 2px var(--paper, #fcfcfb);
}
.search-pal-logo .sm-coin img {
  width: 100% !important;
  height: 100% !important;
  padding: 0;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: none;
}
.search-pal-logo img + img,
.search-pal-logo .sm-coin + .sm-coin,
.search-pal-logo img + .sm-coin,
.search-pal-logo .sm-coin + img {
  margin-left: -7px;
}

/* ===== markets rank + favorite: one 30px slot, star revealed on hover ===== */
.sm-table .sm-rank-wrap {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  gap: 0;
}
.sm-table .sm-rank-n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #a2a8b0;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.sm-table .sm-rank-n::before { content: counter(smrank); }
.sm-table .sm-fav {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  color: #b8bec6;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.4, 1), color 0.15s ease, background 0.15s ease;
}
.sm-table .sm-fav svg { width: 15px; height: 15px; }
.sm-table .sm-row:hover .sm-rank-n { opacity: 0; transform: scale(0.85); }
.sm-table .sm-row:hover .sm-fav { opacity: 1; transform: scale(1); }
.sm-table .sm-fav:hover { color: #ff80ab; background: #ffe9f1; }
.sm-table .sm-fav[aria-pressed="true"] {
  opacity: 1;
  transform: scale(1);
  color: #ff80ab;
}
.sm-table .sm-rank-wrap:has(.sm-fav[aria-pressed="true"]) .sm-rank-n { opacity: 0; }
/* touch devices have no hover: keep the compact stacked layout there */
@media (hover: none) {
  .sm-table .sm-rank-wrap { height: auto; display: inline-flex; flex-direction: column; gap: 2px; }
  .sm-table .sm-rank-n,
  .sm-table .sm-fav { position: static; opacity: 1; transform: none; }
}

/* ===== Robinhood tag: feather logo + name, one chip everywhere ===== */
.sm-rh-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  background: #f2fbcf; /* soft tint of the brand lime */
  color: #55650e;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
  flex: none;
}
.sm-rh-tag img {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
}
/* in the search palette the wrapper is just a slot: the tag is the chip,
   so drop the pill chrome instead of nesting one chip inside another */
.search-pal-return {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: none;
}
.search-pal-row.is-hot .search-pal-return { background: none; }
.search-pal-return .sm-rh-tag {
  margin-left: 0;
  padding: 3px 9px 3px 4px;
  background: #f4fbd8;
  color: #4f5d0d;
  font-size: 11px;
}
.search-pal-return .sm-rh-tag img { width: 14px; height: 14px; }

/* ===== wallet modal touch-ups ===== */
/* tooltips sit above the wallet modal (z 10050/10051) */
.hero-tooltip { z-index: 10060; }
/* group labels in sentence case, not shouty caps */
.sw-group {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 11.5px !important;
}
/* footer removed from the template; insurance if a rewrite re-adds it */
.sw-foot { display: none !important; }

/* ======================================================================
   MOBILE — Discover
   Scoped to max-width so the desktop shell above is untouched.
   ====================================================================== */
@media (max-width: 767px) {
  /* the card title sat flush against the glass while the toolbar and tabs
     below it were inset — one gutter for the lot */
  .silo-card-title { padding-left: 16px; }

  /* The Robinhood badge is nowrap inside a clipped cell, so on a phone it was
     sliced mid-word on every row ("Robinho…"). The logo alone carries the
     same signal and actually fits, so the word is dropped rather than cut. */
  .sm-rh-tag {
    margin-left: 5px;
    padding: 3px;
    gap: 0;
    font-size: 0;
  }
  .sm-rh-tag img { width: 14px; height: 14px; }
}

/* ======================================================================
   MOBILE — dropdowns
   A dropdown belongs under the control that opened it, on a phone as much as
   on a desktop: pinning it to the bottom edge breaks the link between the two
   and leaves the trigger orphaned at the top of the screen. So the geometry
   stays anchored and positionMenu does the clamping; what changes here is the
   row metrics, because a 32px row is not a thumb target.
   ====================================================================== */
@media (max-width: 600px) {
  /* the dropdowns stay anchored under their trigger the way they do on
     desktop; positionMenu owns top/left/width/max-height so it can measure the
     real space below the trigger. Only the row metrics change here. */
  .clone-menu .slate-menu-item {
    min-height: 46px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 14.5px;
  }
  .clone-menu .slate-menu-icon { width: 20px; height: 20px; }
  /* the backdrop is what you tap to dismiss, so it has to be visible */
  .clone-backdrop { background: rgba(23, 24, 26, 0.28); }
}