/* Final responsive layout for Markets and individual market pages. */
html[data-markets-list] body.app-mode #appView .app-heading { display:block !important; height:auto !important; margin:0 0 20px !important; padding:0 !important; }
html[data-markets-list] body.app-mode #appView .app-heading > div:first-child { margin:0 0 20px !important; }
html[data-markets-list] body.app-mode #appView .app-heading > #marketMetrics {
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  width:100% !important; max-width:none !important; height:auto !important;
  margin:0 !important; padding:0 !important; gap:1px !important;
  align-items:stretch !important; background:var(--line,#d7ded7) !important;
  border:1px solid var(--line,#d7ded7) !important; border-radius:12px !important;
}
html[data-markets-list] body.app-mode #marketMetrics > .market-metric:nth-child(n) {
  display:flex !important; flex-direction:column; justify-content:center;
  grid-column:auto !important; grid-row:auto !important;
  min-height:118px !important; height:auto !important;
  padding:18px 22px !important; margin:0 !important; border:0 !important;
  background:var(--p,#fff) !important; box-shadow:none !important;
}
html[data-markets-list] body.app-mode #marketMetrics > .market-metric > strong { font-size:clamp(22px,2vw,30px) !important; line-height:1.1; white-space:nowrap; }
html[data-markets-list] body.app-mode #marketMetrics > .market-metric > small { line-height:1.4; }
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading #marketMetrics {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading #marketMetrics > .market-metric:nth-child(n) {
  grid-column:auto !important; grid-row:auto !important;
}
html:not([data-markets-list]) body.app-mode #marketMetrics { display:none !important; }
body.app-mode.stock-detail-mode .app-heading { display:none !important; }
body.app-mode.stock-detail-mode .back-markets { margin-top:0 !important; }
body.app-mode.stock-detail-mode .layout > aside { max-height:none !important; overflow:visible !important; position:static !important; }
@media (max-width:1100px) {
  html[data-markets-list] body.app-mode #appView .app-heading > #marketMetrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html[data-production-route="markets"][data-markets-list] body.app-mode:not(.stock-detail-mode) #appView .app-heading #marketMetrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html[data-markets-list] body.app-mode #marketMetrics > .market-metric:nth-child(n) { min-height:104px !important; }
  body.app-mode .site-header { display:flex !important; flex-wrap:wrap !important; gap:8px 12px !important; }
  body.app-mode .header-left { display:flex !important; flex:1 1 100% !important; width:100% !important; min-width:0 !important; justify-content:space-between !important; }
  body.app-mode .site-nav { display:flex !important; flex:0 1 auto !important; min-width:0 !important; overflow:visible !important; gap:clamp(12px,3vw,30px) !important; }
  body.app-mode .header-actions { flex:1 1 100% !important; justify-content:flex-end !important; }
}
@media (max-width:620px) {
  body.app-mode .site-header { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; }
  body.app-mode .header-left { display:contents !important; }
  body.app-mode .header-left .brand-link { grid-column:1; grid-row:1; }
  body.app-mode .header-left .site-nav { grid-column:1/-1; grid-row:2; justify-content:center !important; gap:14px !important; }
  body.app-mode .header-actions { grid-column:2; grid-row:1; }
}
@media (max-width:480px) {
  html[data-markets-list] body.app-mode #marketMetrics > .market-metric:nth-child(n) { min-height:96px !important; padding:13px 14px !important; }
  html[data-markets-list] body.app-mode #marketMetrics > .market-metric > strong { font-size:21px !important; }
  html[data-markets-list] body.app-mode #marketMetrics > .market-metric > small { font-size:11px !important; }
}