/* LF-EIGENPOINT-001D-AI-EXPLAINER-LAYOUT-001
   Scoped to the AI Market Explainer layout. Preserve all data and interaction code.
   Overrides the historic fixed 48px multi-row toolbar and zero-gap workspace. */
body[data-page="market-explainer"] .mi-explainer-rich .filters {
  height:auto!important;
  min-height:60px!important;
  padding:12px 0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  display:grid!important;
  grid-template-columns:max-content minmax(180px,1fr) max-content!important;
  align-items:center!important;
  gap:12px 14px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .categories {
  min-width:0!important;
  max-width:100%!important;
  gap:clamp(6px,.66vw,11px)!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .filter-search {
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .filter-search input {
  min-width:0!important;
  width:100%!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .workspace {
  margin-top:18px!important;
  column-gap:clamp(14px,1.12vw,22px)!important;
  row-gap:18px!important;
  align-items:start;
}
body[data-page="market-explainer"] .mi-explainer-rich .center,
body[data-page="market-explainer"] .mi-explainer-rich .rail {
  gap:clamp(12px,.85vw,16px)!important;
}
/* Prevent a long real article headline from colliding with its CTA or image. */
body[data-page="market-explainer"] .mi-explainer-rich .feature {
  height:auto!important;
  min-height:314px!important;
  grid-template-columns:minmax(0,1fr) minmax(210px,38%)!important;
  gap:clamp(12px,1vw,18px)!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .feature-text {min-width:0!important;}
body[data-page="market-explainer"] .mi-explainer-rich .metadata {
  min-width:0!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
  white-space:normal!important;
  row-gap:6px!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .feature h2 {
  overflow-wrap:break-word!important;
  hyphens:auto;
  font-size:clamp(27px,2.25vw,37px)!important;
  line-height:1.10!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .feature-photo {
  min-width:0!important;
  min-height:240px!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .rail-heading span {
  white-space:normal!important;
  text-align:right!important;
  overflow-wrap:anywhere!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .instrument,
body[data-page="market-explainer"] .mi-explainer-rich .instrument * {overflow-wrap:anywhere;}
body[data-page="market-explainer"] .mi-explainer-rich .story h3 {overflow-wrap:break-word;}
body[data-page="market-explainer"] .mi-explainer-rich .feed-head {gap:8px;}
body[data-page="market-explainer"] .mi-explainer-rich .feed-head>span {text-align:right;}
/* Don't force tiny 4-column explanatory cards into a narrow central panel. */
body[data-page="market-explainer"] .mi-explainer-rich .center {container-type:inline-size;}
@container (max-width:710px){
  .mi-explainer-rich .explain-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
/* Tablet and laptop: category row above search/period so controls cannot collide. */
@media(max-width:1260px){
  body[data-page="market-explainer"] .mi-explainer-rich .filters {
    grid-template-columns:minmax(0,1fr) max-content!important;
    grid-template-areas:"cats cats" "search period"!important;
    row-gap:11px!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .categories{
    grid-area:cats!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:thin;
    padding-bottom:2px;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .filter-search{grid-area:search!important;}
  body[data-page="market-explainer"] .mi-explainer-rich .period{grid-area:period!important;}
}
/* At these widths the center's featured article needs more room than a 2-column workspace permits. */
@media (min-width:761px) and (max-width:1024px){
  body[data-page="market-explainer"] .mi-explainer-rich .workspace{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .feed {
    height:410px!important;
    min-height:0!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .rail{
    grid-column:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .workspace>.feed{
    height:410px!important;
    min-height:0!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .workspace>.center,
  body[data-page="market-explainer"] .mi-explainer-rich .workspace>.rail{
    height:auto!important;
    min-height:0!important;
  }
  /* The fixed-height universal hero otherwise crops its existing action link. */
  body[data-page="market-explainer"] .mi-universal-hero{
    height:auto!important;
    min-height:180px!important;
    max-height:none!important;
  }
  body[data-page="market-explainer"] .mi-hero-inner{
    height:auto!important;
    min-height:180px!important;
    padding:18px 0 20px!important;
    flex-wrap:wrap!important;
    gap:14px!important;
  }
}
@media(max-width:760px){
  body[data-page="market-explainer"] .mi-explainer-rich .filters {
    min-height:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"cats" "search" "period"!important;
    gap:10px!important;
    padding:12px 0 13px!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .categories,
  body[data-page="market-explainer"] .mi-explainer-rich .period{
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:thin;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .period{justify-self:start!important;}
  body[data-page="market-explainer"] .mi-explainer-rich .workspace{
    grid-template-columns:minmax(0,1fr)!important;
    margin-top:16px!important;
    row-gap:16px!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .feed{
    height:440px!important;
    min-height:0!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .feature{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    min-height:0!important;
    padding:16px!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .feature h2 {
    font-size:clamp(26px,5.8vw,34px)!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .feature-photo {
    min-height:200px!important;
    height:220px!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .rail{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  body[data-page="market-explainer"] .mi-explainer-rich .workspace>.feed,
  body[data-page="market-explainer"] .mi-explainer-rich .workspace>.center,
  body[data-page="market-explainer"] .mi-explainer-rich .workspace>.rail{
    min-height:0!important;
  }
}

/* LF-EIGENPOINT-AI-EXPLAINER-SPACING-R2: equal visual distance around controls.
   Keep a 16px visible gap from hero to buttons and buttons to the first cards.
   The prior bottom padding compounded with workspace margin, creating the large gap. */
body[data-page="market-explainer"] .mi-explainer-rich .filters {
  padding-top:16px!important;
  padding-bottom:0!important;
  min-height:0!important;
}
body[data-page="market-explainer"] .mi-explainer-rich .workspace {margin-top:16px!important;}
@media (max-width:760px) {
  body[data-page="market-explainer"] .mi-explainer-rich .filters {
    padding-top:16px!important;
    padding-bottom:0!important;
  }
}