/* Human-approved D2 layout: visual-only overrides after the product Dashboard CSS. */
:root { --ln-transition-navy: #173b5c; }
.ln-section-transition {
  height: clamp(160px, 15vw, 216px);
  width: 100%;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #f3f6f9 12%,
    #d4dfeb 32%,
    #99b0c8 53%,
    #527494 75%,
    var(--ln-transition-navy) 100%);
  pointer-events: none;
}
/* Carry the last gradient color through the existing navigation. */
#existing-site > header {
  background: var(--ln-transition-navy) !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none;
}
/* Dissolve the same navy into the existing hero's own background. */
#existing-site #about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--ln-transition-navy), transparent 240px);
}
@media (max-width: 760px) {
  .ln-section-transition { height: 136px; }
  #existing-site #about::before {
    background: linear-gradient(180deg, var(--ln-transition-navy), transparent 200px);
  }
}

/* Mobile reading order: filters, supply, participation, rewards, then trend. */
@media (max-width: 760px) {
  .db { min-height: 100vh; min-height: 100svh; }
  .db-main { padding: 24px 20px; }
  .db-heading { margin: 18px 0 24px; }
  .db-heading p { font-size: 13px; }
  .db-filters { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .db-filters label,
  .db-filters .db-type-filter { grid-column: auto; grid-template-columns: 1fr; gap: 6px; font-size: 12px; }
  .db select { min-height: 44px; font-size: 14px; }
  .db-meta { margin: 16px 0 20px; font-size: 11px; }
  .db-cards { gap: 16px; }
  .db-card { display: block; padding: 20px; }
  .db-card-overline { margin-bottom: 14px; font-size: 11px; }
  .db-card-symbol { top: 17px; right: 19px; }
  .db-metric { padding-bottom: 16px; }
  .db-metric-label { font-size: 14px; }
  .db-value { font-size: 36px; margin: 6px 0; }
  .db-metric small { font-size: 11px; }
  .db-secondary,
  .db-card-rewards .db-secondary {
    border-left: 0; border-top: 1px solid var(--line);
    margin-top: 0; padding: 14px 0 0;
    flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 6px; font-size: 13px;
  }
  .db-secondary strong { font-size: 28px; white-space: normal; }
  .db-pending { position: static; margin-top: 12px; font-size: 11px; gap: 8px; }
  .db-pending #rate-base { display: inline; }
  .db-card-foot { margin: 16px 0 24px; font-size: 11px; }
  .db-card-foot small { font-size: 10px; }
  .db-chart-panel { padding: 18px 14px 14px; }
  .db-chart-heading { flex-direction: column; gap: 6px; }
  .db-chart-heading > span { max-width: none; text-align: left; }
  .db-metric-tabs button { min-height: 44px; font-size: 11px; }
  .db-chart-canvas { height: 210px; }
  .db-bottom { padding: 20px 0; }
}

/* Match the product's state/long-value rules without hiding cohort details. */
@media (max-width: 760px) {
  .db .db-card-rewards .db-value { font-size: 36px; }
  .db .db-card-rewards .db-secondary { padding: 14px 0 0; }
  .db .db-card-rewards .db-pending { margin-top: 12px; }
}