/* Responsive fixes: dashboard feature card, transaction summary tiles, deposit-methods banner panel */

/* 1. Index feature card: "Invested principal" must stay on one line; shrink the coin art instead of the number */
.nv-stat .nv-big.nv-big-sm { white-space: nowrap; overflow-wrap: normal; font-size: clamp(1.05rem, 0.8rem + 0.6vw, 1.3rem); }
.nv-stat-feature .nv-art.shrink-0 { width: clamp(5.5rem, 4rem + 4vw, 10rem); }
@media (max-width: 1399px) and (min-width: 1200px) { .nv-stat-feature .nv-art.shrink-0 { width: 6.5rem; } }

/* 2. Dashboard transaction totals: tiles never overflow their column, labels truncate instead of colliding */
#txn-summary { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
#txn-summary .nv-sumtile { min-width: 0; overflow: hidden; gap: 0.65rem; padding: 0.8rem 0.85rem; }
#txn-summary .nv-sumtile > div { min-width: 0; flex: 1; }
#txn-summary .nv-sumtile .nv-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.64rem; letter-spacing: 0.1em; }
#txn-summary .nv-sumtile .nv-num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { #txn-summary .nv-sumicon { width: 2.1rem; height: 2.1rem; font-size: 1rem; } }

/* 3. Deposit Methods banner: stats panel fits at 992px and on phones */
.dm-hero .dm-stat { min-width: 0; }
.dm-hero .dm-stat-top { min-width: 0; }
.dm-hero .dm-stat-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199px) {
    .dm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; }
    .dm-hero .dm-stat { padding: 0.95rem 1rem; }
    .dm-hero .dm-stat-l { letter-spacing: 0.06em; font-size: 0.64rem; }
    .dm-hero .dm-stat-ic { display: none; }
}
@media (max-width: 899px) {
    .dm-hero { grid-template-columns: 1fr; }
    .dm-hero .dm-stat-ic { display: inline-flex; }
    .dm-hero .dm-stat-l { letter-spacing: 0.1em; font-size: 0.68rem; }
}
@media (max-width: 479px) {
    .dm-hero .dm-stat { padding: 0.8rem 0.85rem; min-height: 5rem; }
    .dm-hero .dm-stat-l { letter-spacing: 0.04em; font-size: 0.6rem; }
    .dm-hero .dm-stat-ic { display: none; }
    .dm-hero .dm-hero-actions .nv-btn { width: 100%; justify-content: center; }
}

/* 4. List-page summary cards below 1200px: fit the column, keep the label on one line, scale the value */
#dt-summary, #wr-summary { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.dp-stat { min-width: 0; }
.dp-stat > .min-w-0, .dp-stat > div { min-width: 0; flex: 1; }
.dp-stat .nv-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.66rem; letter-spacing: 0.1em; }
.dp-stat-value { font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.45rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199px) { .dp-stat { padding: 0.95rem 1rem; gap: 0.75rem; } .dp-stat .nv-tile { width: 2.7rem; height: 2.7rem; font-size: 1.3rem; border-radius: 0.9rem; } }
@media (max-width: 479px) { #dt-summary, #wr-summary { grid-template-columns: 1fr; } }

/* 5. Dashboard hero: on 1200-1439px screens keep the 3D art on the right so it never covers the headline */
@media (min-width: 1200px) and (max-width: 1439px) {
    .hero-panel > div.w-\[29rem\] { width: 23rem; inset-inline-end: -2.5rem; opacity: 0.55; }
}

/* 6. Dashboard hero: the small rocket sits beside the headline instead of on top of it */
@media (min-width: 1024px) {
    .hero-panel > div.w-13 { inset-inline-start: 23rem; top: 0.75rem; }
}

/* 7. Smaller toggle switch */
.dp-switch { gap: 0.5rem; font-size: 0.76rem; }
.dp-switch-track { width: 2rem; height: 1.1rem; }
.dp-switch-track::after { top: 0.15rem; left: 0.15rem; width: 0.8rem; height: 0.8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.dp-switch input:checked + .dp-switch-track::after { transform: translateX(0.9rem); }

/* 8. Detail/summary stat cards: 4 across on wide screens, 2 per row (col-6) below 1200px */
.dd-stats.dd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .dd-stats.dd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 399px) { .dd-stats.dd-stats { grid-template-columns: minmax(0, 1fr); } }
.dd-stat { min-width: 0; }
.dd-stat > div { min-width: 0; }
.dd-stat .nv-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 9. Detail-page banner on phones: icon wraps above the text, text uses the full width */
@media (max-width: 575px) {
    .dd-hero { padding: 1.2rem 1.1rem; gap: 1rem; }
    .dd-hero-main { flex-wrap: wrap; align-items: flex-start; gap: 0.9rem; }
    .dd-hero-main > div { flex: 1 1 100%; min-width: 0; }
    .dd-hero-icon { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; border-radius: 1rem; }
    .dd-hero .nv-eyebrow { letter-spacing: 0.12em; line-height: 1.4; }
    .dd-hero-amount { width: 100%; align-items: flex-start; text-align: start; }
    .dd-steps li span { display: inline; font-size: 0.72rem; }
    .dd-steps { gap: 0.25rem; }
}