/* The Flick Critic — Stock Portfolio layout repair
   2026-08-22. Page-scoped CSS only. No data or JavaScript changes. */

/* Keep all portfolio content inside a predictable centered dashboard width. */
.portfolio-page,
.celestial-page-portfolio .section.portfolio-page{
  display:block!important;
  width:min(1600px,calc(100% - 36px))!important;
  max-width:1600px!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:32px clamp(14px,1.8vw,28px) 64px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.portfolio-page > *,
.celestial-page-portfolio .portfolio-page > *{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Macro reports: two balanced cards per row on desktop, never full-page banners. */
.portfolio-page .macro-strip{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:start!important;
  margin:0 0 22px!important;
  width:100%!important;
  min-width:0!important;
}
.portfolio-page .macro-card{
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:20px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.portfolio-page .macro-card h2{
  font-size:clamp(24px,1.8vw,31px)!important;
  line-height:1.12!important;
}
.portfolio-page .macro-values{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.portfolio-page .macro-values > span{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.portfolio-page .macro-values small,
.portfolio-page .macro-values strong{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

/* Treasury charts stay inside their cards and never establish page width. */
.portfolio-page .treasury-chart{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:152px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.portfolio-page .treasury-chart svg,
.portfolio-page .yield-svg{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.portfolio-page .yield-chart-head,
.portfolio-page .yield-chart-meta,
.portfolio-page .yield-weekly{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.portfolio-page .yield-weekly-stats{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(86px,1fr))!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
}

/* Six KPI cards fit in one clean row on large displays. */
.portfolio-page .portfolio-summary{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 22px!important;
}
.portfolio-page .portfolio-stat{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* Panels and the earnings slider stay bounded by the dashboard. */
.portfolio-page .portfolio-panel,
.celestial-page-portfolio .portfolio-panel{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 22px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.portfolio-page .portfolio-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:24px!important;
  width:100%!important;
  min-width:0!important;
}
.portfolio-page .portfolio-head > div{min-width:0!important}
.portfolio-page .portfolio-search{
  flex:0 1 330px!important;
  width:auto!important;
  min-width:230px!important;
  max-width:360px!important;
}
.portfolio-page .earnings-slider{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
.portfolio-page .earnings-track{
  display:flex!important;
  width:max-content!important;
  max-width:none!important;
  min-width:100%!important;
}
.portfolio-page .earnings-slide{
  flex:0 0 270px!important;
  width:270px!important;
  max-width:270px!important;
  box-sizing:border-box!important;
}

/* Collection timestamps should read as compact labels, not full-width bars. */
.portfolio-page .section-collected-time{
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  margin:6px 0 8px!important;
  padding:3px 8px!important;
  border-radius:7px!important;
  line-height:1.25!important;
}

/* Tables scroll inside the panel. Restore real table display semantics in case
   another global theme rule has altered them. */
.portfolio-page .table-scroll,
.celestial-page-portfolio .table-scroll{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  box-sizing:border-box!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#8e713a #0a1517;
}
.portfolio-page table.portfolio-table{
  display:table!important;
  width:100%!important;
  min-width:1240px!important;
  max-width:none!important;
  table-layout:fixed!important;
  border-collapse:collapse!important;
}
.portfolio-page table.portfolio-table thead{display:table-header-group!important}
.portfolio-page table.portfolio-table tbody{display:table-row-group!important}
.portfolio-page table.portfolio-table tr{display:table-row!important}
.portfolio-page table.portfolio-table th,
.portfolio-page table.portfolio-table td{
  display:table-cell!important;
  min-width:0!important;
  max-width:none!important;
  padding:13px 11px!important;
  box-sizing:border-box!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Recent Price Drops: fixed, readable column proportions. */
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(1),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(1){width:4%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(2),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(2){width:18%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(3),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(3){width:7%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(4),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(4){width:14%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(5),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(5){width:9%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(6),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(6){width:8%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(7),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(7){width:12%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(8),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(8){width:12%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(9),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(9){width:8%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) th:nth-child(10),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(10){width:8%!important}
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(2),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(4),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(7),
.portfolio-page table.portfolio-table:not(.earnings-table) td:nth-child(8){
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.portfolio-page .portfolio-table td strong,
.portfolio-page .portfolio-table td small{
  max-width:100%!important;
  min-width:0!important;
}
.portfolio-page .portfolio-table td small{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Earnings table has fewer columns and can be somewhat narrower. */
.portfolio-page table.earnings-table{
  width:100%!important;
  min-width:820px!important;
  table-layout:auto!important;
}

@media(max-width:1250px){
  .portfolio-page .portfolio-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:1050px){
  .portfolio-page,
  .celestial-page-portfolio .section.portfolio-page{
    width:calc(100% - 20px)!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .portfolio-page .portfolio-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:14px!important;
  }
  .portfolio-page .portfolio-search{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
  }
}
@media(max-width:820px){
  .portfolio-page .macro-strip{grid-template-columns:1fr!important}
  .portfolio-page .portfolio-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .portfolio-page .macro-values{
    grid-template-columns:repeat(3,minmax(90px,1fr))!important;
    overflow-x:auto!important;
  }
  .portfolio-page table.portfolio-table:not(.earnings-table){
    width:1220px!important;
    min-width:1220px!important;
  }
}
@media(max-width:560px){
  .portfolio-page,
  .celestial-page-portfolio .section.portfolio-page{
    width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .portfolio-page .portfolio-panel{padding:15px!important}
  .portfolio-page .portfolio-summary{grid-template-columns:1fr 1fr!important}
}