/* Local refinement: a viewport-scale introduction and useful wallet market actions. */
body.app-mode .site-nav :is([data-route="markets"], [data-route="dashboard"], [data-route="learn"]) { display: none; }
html[data-nav-route="home"] body.app-mode .site-nav :is([data-route="markets"], [data-route="learn"]),
html[data-nav-route="market"] body.app-mode .site-nav :is([data-route="dashboard"], [data-route="learn"]),
html[data-nav-route="learn"] body.app-mode .site-nav :is([data-route="markets"], [data-route="dashboard"]),
html[data-nav-route="dashboard"] body.app-mode .site-nav :is([data-route="markets"], [data-route="learn"]) { display: inline-flex; }
html[data-site-route="home"] body.app-mode .home-shell {
  max-width: none;
  width: 100%;
  padding-inline: clamp(24px, 4.5vw, 88px);
}
html[data-site-route="home"] body.app-mode .home-lead {
  min-height: calc(100svh - 66px);
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .82fr);
  gap: clamp(42px, 7vw, 145px);
  padding-block: clamp(48px, 6vh, 100px);
}
html[data-site-route="home"] body.app-mode .home-lead-copy { min-width: 0; }
html[data-site-route="home"] body.app-mode .home-calculator { width: 100%; max-width: 610px; justify-self: end; }
html[data-site-route="home"] body.app-mode .home-calculator-unit { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
html[data-site-route="home"] body.app-mode .home-calculator-unit img { display: block; width: 20px; height: 20px; }
html[data-site-route="home"] body.app-mode .home-credit-flow {
  display: grid;
  grid-template-columns: max-content minmax(40px, 1fr) max-content;
  align-items: center;
  gap: 14px;
  width: min(100%, 440px);
  margin-top: 25px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
html[data-site-route="home"] body.app-mode .home-credit-flow-usdc { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
html[data-site-route="home"] body.app-mode .home-credit-flow-usdc img { display: block; width: 18px; height: 18px; }
html[data-site-route="home"] body.app-mode .home-credit-flow-track { position: relative; height: 1px; background: var(--line); }
html[data-site-route="home"] body.app-mode .home-credit-flow-track::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
  transform: rotate(45deg);
  content: "";
}
html[data-site-route="home"] body.app-mode .home-credit-flow-track > span {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  animation: home-credit-travel 4.2s ease-in-out 1.1s infinite;
}
html[data-site-route="home"] body.app-mode .home-credit-flow + .home-actions { margin-top: 29px; }
html[data-site-route="home"] body.app-mode .home-asset-story {
  width: min(100%, 585px);
  margin-top: clamp(44px, 6vh, 72px);
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
html[data-site-route="home"] body.app-mode .home-asset-story > p {
  margin: 0 0 17px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
html[data-site-route="home"] body.app-mode .home-asset-story-logos {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  min-height: 70px;
}
html[data-site-route="home"] body.app-mode .home-asset-story-item {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  text-decoration: none;
  color: var(--ink);
  font-size: 30px;
  font-weight: 700;
  transition: transform .15s ease;
}
html[data-site-route="home"] body.app-mode .home-asset-story-item:nth-child(even) { transform: translateY(8px); }
html[data-site-route="home"] body.app-mode .home-asset-story-item:hover { transform: translateY(-3px) rotate(-4deg); }
html[data-site-route="home"] body.app-mode .home-asset-story-item:nth-child(even):hover { transform: translateY(3px) rotate(4deg); }
html[data-site-route="home"] body.app-mode .home-asset-story-item img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
}
html[data-site-route="home"] body.app-mode .home-asset-story > span {
  display: block;
  margin-top: 19px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
html[data-site-route="dashboard"] body.app-mode .dashboard-balance-table th:last-child { width: 170px; }
html[data-site-route="dashboard"] body.app-mode .dashboard-balance-actions-cell { text-align: right; padding-right: 18px !important; }
html[data-site-route="dashboard"] body.app-mode .dashboard-balance-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}
html[data-site-route="dashboard"] body.app-mode .dashboard-balance-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  color: var(--dash-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
html[data-site-route="dashboard"] body.app-mode .dashboard-balance-actions a.dashboard-balance-borrow {
  border-color: var(--dash-accent);
  background: var(--dash-accent);
  color: #fff;
}
html[data-site-route="dashboard"][data-theme="dark"] body.app-mode .dashboard-balance-actions a.dashboard-balance-borrow { color: #14171a; }
html[data-site-route="dashboard"] body.app-mode .dashboard-balance-actions a:hover { filter: brightness(.95); }
html[data-site-route="dashboard"] body.app-mode .dashboard-market-unlisted { color: var(--dash-muted); font-size: 12px; }
html[data-site-route="dashboard"] body.app-mode .dashboard-wallet-total small { display: block; margin: 4px 0 0; line-height: 1.5; }
html[data-site-route="dashboard"] body.app-mode .dashboard-balance-table .dashboard-asset-logo img { width: 30px; height: 30px; }
body.app-mode #wallet[aria-busy="true"] { cursor: progress; }
body.app-mode #walletControl { display: inline-flex; align-items: center; }
body.app-mode #walletControl.is-connected > #wallet { border-radius: 8px 0 0 8px; }
html[data-theme="dark"] body.app-mode #walletControl.is-connected > #wallet {
  background: var(--p) !important;
  color: var(--ink) !important;
}
html[data-site-route="dashboard"] body.app-mode #walletControl:not(.is-connected) > #wallet {
  background: var(--dash-surface) !important;
  color: var(--dash-text) !important;
}
body.app-mode #walletMenuToggle:not([hidden]) {
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--p);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
body.app-mode #walletMenuToggle[hidden] { display: none; }

/* Motion follows the loan story, and never makes live rates or balances appear to change. */
html[data-nav-route="home"] body.app-mode .home-lead-copy > :is(.home-kicker, h1, .home-intro, .home-credit-flow, .home-actions, .home-caution),
html[data-nav-route="home"] body.app-mode .home-calculator,
html[data-nav-route="home"] body.app-mode .home-asset-story {
  animation: home-enter .7s cubic-bezier(.22,.68,.22,1) both;
}
html[data-nav-route="home"] body.app-mode .home-lead-copy > h1 { animation-delay: .06s; }
html[data-nav-route="home"] body.app-mode .home-lead-copy > .home-intro { animation-delay: .12s; }
html[data-nav-route="home"] body.app-mode .home-lead-copy > .home-credit-flow { animation-delay: .19s; }
html[data-nav-route="home"] body.app-mode .home-lead-copy > .home-actions { animation-delay: .27s; }
html[data-nav-route="home"] body.app-mode .home-lead-copy > .home-caution { animation-delay: .34s; }
html[data-nav-route="home"] body.app-mode .home-asset-story { animation-delay: .43s; }
html[data-nav-route="home"] body.app-mode .home-calculator { animation: home-panel-enter .8s cubic-bezier(.22,.68,.22,1) .23s both; }
html[data-nav-route="home"] body.app-mode .home-lead h1 em::after { transform-origin: left center; animation: home-underline .75s cubic-bezier(.22,.68,.22,1) .62s both; }
html[data-site-route="home"] body.app-mode .home-primary span { display: inline-block; transition: transform .18s ease; }
html[data-site-route="home"] body.app-mode .home-primary:hover span { transform: translate(3px, -3px); }
html[data-site-route="home"] body.app-mode .home-calculator-results dd { transition: background-color .2s ease; }
html[data-site-route="home"] body.app-mode .home-calculator:has(#homeCalcCollateral:focus-visible) #homeCalcLimit,
html[data-site-route="home"] body.app-mode .home-calculator:has(#homeCalcBorrow:focus-visible) #homeCalcLiquidation {
  background: color-mix(in srgb, var(--lime) 12%, transparent);
}
html[data-nav-route="home"] body.app-mode .home-asset-story-item { animation: home-mark-enter .42s ease-out both; }
html[data-nav-route="home"] body.app-mode .home-asset-story-item:nth-child(2) { animation-delay: .08s; }
html[data-nav-route="home"] body.app-mode .home-asset-story-item:nth-child(3) { animation-delay: .16s; }
html[data-nav-route="home"] body.app-mode .home-asset-story-item:nth-child(4) { animation-delay: .24s; }
@keyframes home-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-panel-enter { from { opacity: 0; transform: translate(20px, 8px); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes home-mark-enter { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes home-underline { from { opacity: 0; transform: scaleX(0); } to { opacity: .72; transform: scaleX(1); } }
@keyframes home-credit-travel {
  0%, 8% { left: 0; opacity: 0; }
  16% { opacity: 1; }
  68% { left: calc(100% - 5px); opacity: 1; }
  76%, 100% { left: calc(100% - 5px); opacity: 0; }
}
html.home-motion-ready[data-site-route="home"] body.app-mode #homeView > :is(.home-stocks, .home-risk, .home-lending) {
  transition: opacity .62s ease, transform .62s cubic-bezier(.22,.68,.22,1);
}
html.home-motion-ready[data-site-route="home"] body.app-mode #homeView > :is(.home-stocks, .home-risk, .home-lending):not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
}

@media (max-width: 1040px) {
  html[data-site-route="home"] body.app-mode .home-lead { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: 42px; }
}
@media (max-width: 820px) {
  html[data-site-route="home"] body.app-mode .home-lead { min-height: 0; grid-template-columns: 1fr; gap: 42px; }
  html[data-site-route="home"] body.app-mode .home-calculator { justify-self: start; }
  html[data-site-route="home"] body.app-mode .home-asset-story { margin-top: 38px; }
}
@media (max-width: 700px) {
  html[data-site-route="dashboard"] body.app-mode .dashboard-balance-table td.dashboard-balance-actions-cell { grid-column: 1/-1; }
  html[data-site-route="dashboard"] body.app-mode .dashboard-balance-actions { justify-content: flex-start; }
  html[data-site-route="dashboard"] body.app-mode .dashboard-balance-table td.dashboard-balance-actions-cell::before { display: none !important; }
}
@media (max-width: 600px) {
  html[data-site-route="home"] body.app-mode .home-shell { padding-inline: 20px; }
  html[data-site-route="home"] body.app-mode .home-lead { padding-block: 37px 48px; }
  html[data-site-route="home"] body.app-mode .home-asset-story-logos { gap: 14px; }
  html[data-site-route="home"] body.app-mode .home-asset-story-item { width: 54px; height: 54px; flex-basis: 54px; }
  html[data-site-route="home"] body.app-mode .home-asset-story-item img { width: 48px; height: 48px; }
  html[data-site-route="home"] body.app-mode .home-credit-flow { gap: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-route="home"] body.app-mode :is(.home-asset-story-item, .home-primary span, .home-calculator-results dd) { transition: none; }
  html[data-site-route="home"] body.app-mode .home-credit-flow-track > span,
  html[data-nav-route="home"] body.app-mode .home-lead h1 em::after,
  html[data-nav-route="home"] body.app-mode .home-lead-copy > :is(.home-kicker, h1, .home-intro, .home-credit-flow, .home-actions, .home-caution),
  html[data-nav-route="home"] body.app-mode .home-calculator,
  html[data-nav-route="home"] body.app-mode .home-asset-story,
  html[data-nav-route="home"] body.app-mode .home-asset-story-item { animation: none; }
  html.home-motion-ready[data-site-route="home"] body.app-mode #homeView > :is(.home-stocks, .home-risk, .home-lending) { opacity: 1; transform: none; transition: none; }
}