/* Shared responsive finishing layer. Existing Yield Hatch colour/type tokens only. */
.app-header-title p{white-space:normal;line-height:1.4}
.app-header-title h1:focus{outline:none}
.app-header-title,.dashboard-metric-copy,.dashboard-metric-footer,.swap-balance-card>div,.swap-route-flow>div,.swap-route-flow p{min-width:0}
.dashboard-metric-copy p{white-space:normal;line-height:1.3}
.dashboard-metric-footer{white-space:normal;line-height:1.4}
.dashboard-metric{height:auto;grid-template-rows:minmax(68px,auto) minmax(24px,1fr)}
.dashboard-metric-copy>strong,.swap-balance-card strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.attention-row strong,.attention-row small{white-space:normal;overflow-wrap:anywhere}
.dashboard-primary,.dashboard-monitor-row,.dashboard-bottom-row,.dashboard-grid,.metrics{min-width:0}
.price-summary{min-width:0;flex-wrap:wrap;height:auto;min-height:46px}
.price-summary .chart-source{white-space:nowrap}
.scroll-hint{display:flex;align-items:center;gap:var(--s2);margin:0;padding:var(--s2) var(--s4);font-size:var(--xs);color:var(--muted);line-height:1.4;flex-shrink:0}
.scroll-hint:before{content:'↔';font-size:var(--md);color:var(--purple)}
[data-scroll-region]{overscroll-behavior-inline:contain;scrollbar-width:thin;scroll-padding-inline:var(--s3)}
[data-scroll-region]:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.panel{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain;scroll-padding-block:80px 24px;scrollbar-gutter:stable}
.panel-heading{gap:var(--s3);align-items:flex-start}
.panel-heading h2{min-width:0;overflow-wrap:anywhere;line-height:1.25;padding-block:var(--s2)}
.panel-heading h2:focus{outline:none}
.panel-heading>.icon-button{width:44px;height:44px}
.panel-body,.panel-body>*{min-width:0}
.panel-body{overflow-wrap:anywhere}
.panel .button{max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere;line-height:1.4}
.panel .text-link{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.panel .key-values>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.panel .key-values dd,.panel .key-values .wallet-address{max-width:none;min-width:0;overflow-wrap:anywhere}
.panel .detail-identity>div,.panel .execution-steps li>div,.panel .review-amount p{min-width:0}
.panel .review-amount strong{overflow-wrap:anywhere}
.panel :is(.table-scroll,.comparison-scroll,.swap-route-table-wrap,.swap-history-table-wrap){max-width:100%;min-width:0}
.panel .detail-facts>div{min-width:0}
.panel .detail-facts p{min-width:0;overflow-wrap:anywhere}
.panel .input-shell>span{flex-shrink:0}
.panel .input-shell input{min-width:0}
.swap-token-option>span:not(.token){min-width:0}
.swap-token-option>b{max-width:42%;min-width:0;text-align:right;overflow-wrap:anywhere}
.swap-review-pair{min-width:0;flex-wrap:wrap}
.swap-amount-number output{overflow-wrap:anywhere}
.native-allocation-preview>div{min-width:0;overflow-wrap:anywhere}
.native-modal .field,.native-modal .notice,.native-modal-banner{margin:0}
.native-modal>.text-link{margin-top:var(--s2)}
.native-modal .native-tools-actions{margin-block:var(--s2)}
/* RainbowKit's compact dialog otherwise retains a 368px inner minimum. */
[data-rk] [role=dialog] [role=document]{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
[data-rk] [role=dialog] [role=document]>div,
[data-rk] [role=dialog] [role=document]>div>div{min-width:0;max-width:100%}
@media(min-width:1101px){
  .topbar{height:auto;min-height:114px}
  .topbar .network-control,.topbar .wallet-actions{flex-shrink:0}
  .dashboard-metric{grid-template-columns:62px minmax(0,1fr)}
  .positions-view .main-stack,.rewards-view .main-stack{overflow:visible}
}
@media(min-width:1101px) and (max-width:1480px){
  .dashboard-metric{grid-template-columns:48px minmax(0,1fr)}
  .dashboard-metrics .dashboard-metric:nth-child(3) .dashboard-metric-footer{margin-left:0}
  .dashboard-metrics .dashboard-metric:nth-child(-n+2) .dashboard-metric-footer{grid-column:1/-1;padding-right:62px}
}
@media(min-width:1101px) and (max-width:1280px){
  .swap-main-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
  .dashboard-metric .dashboard-metric-copy>strong{font-size:30px}
  .portfolio-metrics .metric-status .dashboard-metric-copy>strong{font-size:var(--xl)}
}
@media(max-width:640px){
  .topbar .mobile-help{display:inline-grid;order:4;width:36px;height:36px;margin-left:0}
  .topbar .mobile-help>.icon{width:20px;height:20px}
  .app-header-title p{max-width:none;font-size:13px}
  .dashboard-metric .dashboard-metric-copy>strong{font-size:27px}
  .mobile-nav{padding-inline:var(--s2)}
  .mobile-nav .nav-item{min-width:0;padding-inline:var(--s1);font-size:11px}
  .mobile-nav .nav-item span{max-width:100%;white-space:normal;text-align:center;line-height:1.2}
  .panel{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:var(--r3)}
  .panel-heading{padding:var(--s2) var(--s3);align-items:center}
  .panel-heading h2{font-size:var(--lg)}
  .panel-body{padding:var(--s4)}
  .panel :is(input:not([type=checkbox]),select,textarea){font-size:16px}
  .panel .button{min-height:44px}
  .panel .action-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel .action-stack>.button{width:100%}
  .panel .key-values>div{gap:var(--s2);font-size:var(--sm)}
  .swap-route-flow{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:var(--s2);padding:var(--s3)}
  .swap-route-flow>div:first-child{grid-column:1;grid-row:1}
  .swap-route-flow>.icon{grid-column:2;grid-row:1}
  .swap-route-flow>.icon~.icon{display:none}
  .swap-route-flow>div:last-child{grid-column:3;grid-row:1;justify-content:flex-end;text-align:right}
  .swap-route-flow p span{max-width:none;font-size:var(--xs)}
  .swap-route-flow .swap-venue-pill{grid-column:1/-1;grid-row:2;justify-self:center;max-width:none;font-size:var(--sm);padding:var(--s2) var(--s3)}
  .swap-route-flow .swap-venue-pill:before{content:'via';font-size:var(--xs);font-weight:400;color:var(--muted)}
  .swap-amount-caption{flex-wrap:wrap}
  .swap-amount-caption>span:last-child{flex-wrap:wrap;justify-content:flex-end;white-space:normal}
  .swap-section-heading{flex-wrap:wrap}
  .swap-facts dd{overflow-wrap:anywhere}
  .scroll-hint{padding-inline:var(--s3);font-size:11px}
}
@media(max-width:400px){
  .dashboard-header-title h1{font-size:32px}
  .dashboard-metric{height:auto;min-height:176px;grid-template-columns:28px minmax(0,1fr);grid-template-rows:36px auto minmax(42px,1fr);gap:6px}
  .dashboard-metric>.metric-icon{grid-column:1;grid-row:1;width:28px;height:32px;border-radius:10px}
  .dashboard-metric>.metric-icon>.icon{width:20px;height:20px}
  .dashboard-metric-copy{display:contents}
  .dashboard-metric-copy>p{grid-column:2;grid-row:1;align-self:center;font-size:11px}
  .dashboard-metric .dashboard-metric-copy>strong{grid-column:1/-1;grid-row:2;font-size:27px;align-self:center}
  .dashboard-metric-footer{grid-column:1/-1!important;grid-row:3}
  .portfolio-metrics .metric-status .dashboard-metric-copy>strong{font-size:var(--lg)}
  .dashboard-metric .metric-next{bottom:10px}
  .dashboard-metric.peach .dashboard-metric-footer{padding-right:28px}
  .swap-balance-card{gap:var(--s2);padding:var(--s3);min-width:0}
  .swap-balance-icon{width:30px;height:40px;border-radius:var(--r2)}
  .swap-balance-icon .token{width:26px;height:26px}
  .swap-balance-card strong{font-size:18px;line-height:1.2}
  .swap-balance-card>div>span{font-size:10px}
  .native-allocation{grid-template-columns:minmax(0,1fr) 90px;gap:var(--s2)}
  .native-modal .ui-select{padding-inline:var(--s2)}
  .panel .detail-facts{grid-template-columns:1fr}
  .panel .action-stack{grid-template-columns:1fr}
  .swap-token-option{gap:var(--s2);padding:var(--s3)}
  .swap-token-option>.token{width:30px;height:30px}
}
@media(max-height:500px) and (min-width:641px){
  .panel{max-height:calc(100dvh - 16px)}
  .panel-heading{padding-block:var(--s2)}
}