/* Only what the clone has no class for. No new fonts, colours or radii. */

/* An island host replaces an element of their layout; the island renders that element itself, so the host
   must not add a box of its own (it would break flex/grid parents such as the header cluster). */
[data-oddlot-island] {
  display: contents;
}

/* launchpad */
/* /launch, /coins, /coins/<meme> are stripped marketing shells: their nav JS is gone, so the header keeps the inline
   `display` its server render had (mobile layout). lp-nav marks the pill; these rules restore the breakpoint split
   MK.css already defines, and the pieces NAV.js used to set inline. Scoped to pages that carry the lp-nav island. */
body:has([data-oddlot-island="lp-nav"]) .nav-outer {
  top: 24px !important;
  padding: 0 66px !important;
}
body:has([data-oddlot-island="lp-nav"]) .nav-desktop-items,
body:has([data-oddlot-island="lp-nav"]) .nav-desktop-ctas {
  display: flex !important;
}
body:has([data-oddlot-island="lp-nav"]) .nav-hamburger,
body:has([data-oddlot-island="lp-nav"]) .nav-mobile-lang {
  display: none !important;
}
@media (max-width: 1280px) {
  body:has([data-oddlot-island="lp-nav"]) .nav-outer {
    top: 0 !important;
    padding: 8px !important;
  }
  body:has([data-oddlot-island="lp-nav"]) .nav-desktop-items,
  body:has([data-oddlot-island="lp-nav"]) .nav-desktop-ctas {
    display: none !important;
  }
  body:has([data-oddlot-island="lp-nav"]) .nav-hamburger,
  body:has([data-oddlot-island="lp-nav"]) .nav-mobile-lang {
    display: flex !important;
  }
}
/* Nav buttons: the hover/open look NAV.js applied inline. */
body:has([data-oddlot-island="lp-nav"]) .nav-desktop-items button:hover,
body:has([data-oddlot-island="lp-nav"]) .nav-desktop-items button[aria-expanded="true"] {
  color: #070707 !important;
  background-color: #e4ff3f !important;
  opacity: 1;
}
body:has([data-oddlot-island="lp-nav"]) .nav-desktop-items button[aria-expanded="true"] svg,
body:has([data-oddlot-island="lp-nav"]) .nav-drawer button[aria-expanded="true"] svg {
  transform: rotate(180deg) !important;
}
/* Split-line reveals: without GSAP the lines must sit at their final place. */
body:has([data-oddlot-island^="lp-"]) .line {
  transform: none !important;
  opacity: 1 !important;
}
/* Form fields: the focus look their FORM.js set on focus, as CSS. */
[data-lp-input]:focus {
  border-color: #070707 !important;
  background-color: #ffffff !important;
}
[data-lp-input]:focus-visible,
[data-lp-focus]:focus-visible {
  outline: 1px solid #070707;
  outline-offset: 2px;
}
/* The app document (lp-app): the shell's header and footer around a persistent sidebar and the current section. The
   sidebar becomes a bottom tab bar where the header switches to its hamburger layout's width class. */
[data-lp-app] {
  display: flex;
  align-items: stretch;
  background-color: #ffffff;
}
[data-lp-app-side] {
  width: 248px;
  flex-shrink: 0;
  border-right: 1px solid rgba(20, 20, 20, 0.08);
}
[data-lp-app-main] {
  flex: 1;
  min-width: 0;
}
[data-lp-app-tabs] {
  display: none;
}
@media (max-width: 1100px) {
  [data-lp-app-side] {
    display: none;
  }
  [data-lp-app-tabs] {
    display: flex;
  }
  [data-lp-app-main] {
    padding-bottom: 76px;
  }
}
/* The sidebar takes 248px, so the 3-up card grid gets two columns where the content column is narrow. */
@media (min-width: 769px) and (max-width: 1280px) {
  body:has([data-oddlot-island="lp-app"]) .articles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Coin and account sections: their article sidebar is 220px and hidden on phones; here it holds the trade panel or
   the account summary. */
body:has([data-oddlot-island="lp-app"]) .article-sidebar {
  width: 380px;
  top: 108px;
}
@media (max-width: 1280px) {
  body:has([data-oddlot-island="lp-app"]) .article-body-layout {
    flex-direction: column;
    align-items: stretch;
  }
  body:has([data-oddlot-island="lp-app"]) .article-sidebar {
    display: flex !important;
    position: static;
    width: 100%;
  }
}
@media (max-width: 768px) {
  [data-lp-grid] {
    grid-template-columns: 1fr !important;
  }
  [data-lp-hide-sm] {
    display: none !important;
  }
}