/* Blood & Tribute Build 21.286 — canonical Personal Operations DOM + full-width hero content.
   Direct hero + flex status row + catalog. No legacy summary wrapper survives. */

/* Neutralize every older Operations grid owner on the Personal route. */
#operations.bt21285-personal-layout > .page-stack {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
#operations.bt21285-personal-layout > .page-stack > * {
  flex:0 0 auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

/* The hero itself is now the full-width first child. It is no longer inside
   phase2136/phase2138/bt21240 two-column summary wrappers. */
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero {
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  grid-column:auto!important;
  grid-row:auto!important;
  order:0!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
}
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero.phase2138-compact-hero,
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero.phase2136-compact-hero {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}


/* Build 21.286 — Plan and Execute inner alignment correction.
   The old global .section-hero rule leaves align-items:center behind even after
   the compact hero switches to flex-column. That centers the intrinsic-width
   .section-hero-copy and makes its three stat cards occupy only the middle of
   the otherwise full-width hero. Stretch the copy across the card and keep all
   hero content left-aligned. */
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero {
  align-items:stretch!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero .section-hero-copy {
  display:block!important;
  align-self:stretch!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  text-align:left!important;
}
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero .eyebrow,
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero h3,
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero .hero-description {
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero .hero-stats-grid {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero .hero-stat {
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  text-align:left!important;
}
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-hero .hero-stats-grid {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
}

/* Status ownership intentionally uses flex, not grid. Legacy Heat/Perks code
   still contains grid-column rules for the retired four-card summary; those
   declarations are inert inside a flex formatting context. */
#operations.bt21285-personal-layout > .page-stack > .bt21285-personal-status-row {
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:10px!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:168px!important;
  min-height:168px!important;
  max-height:168px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  position:relative!important;
}

#operations.bt21285-personal-layout .bt21285-personal-status-row > .bt21285-personal-active-card,
#operations.bt21285-personal-layout .bt21285-personal-status-row > [data-bt21262-heat-recovery],
#operations.bt21285-personal-layout .bt21285-personal-status-row > [data-bt21268-operation-perks],
#operations.bt21285-personal-layout .bt21285-personal-status-row > [data-bt21269-operation-perks] {
  flex:1 1 0!important;
  width:0!important;
  max-width:none!important;
  min-width:0!important;
  height:168px!important;
  min-height:168px!important;
  max-height:168px!important;
  margin:0!important;
  padding:11px 12px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  align-self:stretch!important;
  grid-column:auto!important;
  grid-row:auto!important;
  grid-area:auto!important;
  order:initial!important;
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  float:none!important;
  transform:none!important;
}

/* Active Personal Operations */
#operations.bt21285-personal-layout .bt21285-personal-active-card {
  display:flex!important;
  flex-direction:column!important;
}
#operations.bt21285-personal-layout .bt21285-personal-active-card .section-head {
  flex:0 0 auto!important;
}
#operations.bt21285-personal-layout .bt21285-personal-active-card .list-stack {
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:108px!important;
  overflow:auto!important;
  scrollbar-gutter:stable!important;
}

/* Shared status-card header alignment. */
#operations.bt21285-personal-layout .bt21285-personal-status-row .section-head {
  margin:0 0 6px!important;
  gap:8px!important;
  align-items:flex-start!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row .section-head h3 {
  font-size:17px!important;
  line-height:1.04!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row .section-head .eyebrow {
  margin-bottom:2px!important;
}

/* Lay Low: force the compact card layout even when older injected media-query
   rules try to turn it into a full-row horizontal grid. */
#operations.bt21285-personal-layout .bt21285-personal-status-row > [data-bt21262-heat-recovery] {
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row [data-bt21262-heat-recovery] .bt21262-heat-copy {
  margin:0!important;
  min-height:0!important;
  font-size:10.5px!important;
  line-height:1.24!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row [data-bt21262-heat-recovery] .bt21262-heat-controls {
  margin-top:auto!important;
  display:block!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row [data-bt21262-heat-recovery] .bt21262-heat-metrics {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4px!important;
  margin:0 0 5px!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row [data-bt21262-heat-recovery] .bt21262-heat-metrics > div {
  padding:4px 6px!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row [data-bt21262-heat-recovery] .bt21262-heat-action {
  width:100%!important;
  min-width:0!important;
  min-height:29px!important;
  height:29px!important;
}

/* Family Legacy perks: fixed badge and two readable perk rows. */
#operations.bt21285-personal-layout .bt21285-personal-status-row .bt21268-operation-perks-card {
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row [data-bt21269-perk-count],
#operations.bt21285-personal-layout .bt21285-personal-status-row .bt21268-operation-perks-card .badge {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:76px!important;
  width:auto!important;
  max-width:none!important;
  white-space:nowrap!important;
  flex-wrap:nowrap!important;
  padding-left:9px!important;
  padding-right:9px!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row .bt21268-operation-perks-list {
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  min-height:0!important;
  max-height:106px!important;
  overflow:auto!important;
  scrollbar-gutter:stable!important;
}
#operations.bt21285-personal-layout .bt21285-personal-status-row .bt21268-operation-perk {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  min-height:31px!important;
  padding:5px 7px!important;
}

/* The personal catalog is the direct child immediately after the status row. */
#operations.bt21285-personal-layout > .page-stack > [data-bt21234-personal-operations] {
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  order:2!important;
}
#operations.bt21285-personal-layout [data-bt21234-personal-operations] .bt21240-personal-op-grid,
#operations.bt21285-personal-layout [data-bt21234-personal-operations] .bt21234-personal-op-grid {
  width:100%!important;
  max-width:none!important;
}

@media (max-width:980px) {
  #operations.bt21285-personal-layout > .page-stack > .bt21285-personal-status-row {
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  #operations.bt21285-personal-layout .bt21285-personal-status-row > .bt21285-personal-active-card,
  #operations.bt21285-personal-layout .bt21285-personal-status-row > [data-bt21262-heat-recovery],
  #operations.bt21285-personal-layout .bt21285-personal-status-row > [data-bt21268-operation-perks],
  #operations.bt21285-personal-layout .bt21285-personal-status-row > [data-bt21269-operation-perks] {
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:150px!important;
    max-height:none!important;
  }
}