/* Shared right-side panel system.
   Keeps hero clean and moves live/context information into page side columns. */

@media (min-width: 1000px){
  html body.about-page .copy-layout,
  html body.contact-page .contact-layout,
  html body.news-page .news-layout,
  html body.news-page .article-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important;
    gap:14px!important;
    align-items:start!important;
  }

  html body .oh-page-side-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important;
    gap:14px!important;
    align-items:start!important;
    width:100%!important;
    max-width:var(--oh-content-wide,min(1680px,calc(100vw - 44px)))!important;
    margin:0 auto!important;
    padding:14px 0 0!important;
    box-sizing:border-box!important;
  }

  html body .oh-main-column{
    min-width:0!important;
    display:grid!important;
    gap:10px!important;
  }

  html body.contact-page .contact-layout > article.box{
    order:1!important;
  }

  html body.contact-page .contact-layout > aside.box{
    order:2!important;
  }

  html body.about-page .copy-layout > aside.box,
  html body.contact-page .contact-layout > aside.box,
  html body.news-page .news-layout > aside.sidebar,
  html body.news-page .article-layout > aside.sidebar,
  html body.jobs-page main.jobs-mock-layout > aside.side,
  html body .oh-page-side{
    position:sticky!important;
    top:96px!important;
    align-self:start!important;
  }
}

html body .side .box,
html body .sidebar .side-panel,
html body .oh-market-panel,
html body.about-page .copy-layout > aside.box,
html body.contact-page .contact-layout > aside.box{
  min-height:0!important;
  border:1px solid rgba(120,166,205,.16)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(5,22,36,.70),rgba(3,13,24,.62))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
  padding:16px!important;
}

html body .side .box + .box,
html body .sidebar .side-panel + .side-panel,
html body .oh-market-panel + .box,
html body .oh-market-panel + .side-panel,
html body .oh-market-panel + .oh-market-panel{
  margin-top:10px!important;
}

html body .side .box-head,
html body .oh-market-panel .box-head,
html body.about-page .copy-layout > aside.box .box-head,
html body.contact-page .contact-layout > aside.box .box-head{
  border:0!important;
  background:transparent!important;
  padding:0 0 10px!important;
  margin:0!important;
}

html body .side .box-title,
html body .oh-market-panel .box-title,
html body .sidebar .side-panel h3,
html body.about-page .copy-layout > aside.box .box-title,
html body.contact-page .contact-layout > aside.box .box-title{
  color:#ff7a18!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  line-height:1.15!important;
}

html body .cat-list .cat,
html body .tools-list .tool,
html body .source-grid .source-row,
html body .news-aside-list a,
html body .coverage-row{
  min-height:42px!important;
  border-bottom:1px solid rgba(45,78,105,.50)!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:9px 0!important;
}

html body .cat-list .cat:last-child,
html body .tools-list .tool:last-child,
html body .source-grid .source-row:last-child,
html body .news-aside-list a:last-child,
html body .coverage-row:last-child{
  border-bottom:0!important;
}

html body .cat-list,
html body .tools-list,
html body .source-grid,
html body .news-aside-list,
html body .coverage-list{
  padding:0!important;
  margin:0!important;
}

html body .cat-list .cat .ico,
html body .tools-list .tool .ico,
html body .source-grid .source-row i{
  width:22px!important;
  height:22px!important;
  border-radius:6px!important;
  border:1px solid rgba(255,112,16,.52)!important;
  background:rgba(255,112,16,.08)!important;
  color:#ff7a18!important;
}

html body .cat-list .cat b,
html body .tools-list .tool b,
html body .source-grid .source-row strong,
html body .news-aside-list a b,
html body .coverage-row b{
  color:#f4f8fc!important;
  font-weight:800!important;
}

html body .cat-list .cat span,
html body .tools-list .tool span,
html body .source-grid .source-row span,
html body .news-aside-list a span,
html body .coverage-row span{
  color:#9fb4c5!important;
}

html body .orange-link,
html body .panel-btn{
  color:#ff7a18!important;
}

html body .oh-market-panel{
  overflow:hidden!important;
}

html body .oh-market-panel.is-inside{
  margin:-2px -2px 14px!important;
}

html body .oh-market-panel .box-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}

html body .oh-market-panel .market-period{
  min-height:30px!important;
  padding:0 12px!important;
  border:1px solid rgba(62,103,134,.62)!important;
  border-radius:6px!important;
  background:rgba(3,14,24,.56)!important;
  color:#d9e8f3!important;
  font:800 11px/1 inherit!important;
}

html body .oh-market-metrics{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  border-bottom:1px solid rgba(45,78,105,.50)!important;
}

html body .oh-market-metrics > div{
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-content:center!important;
  gap:0 8px!important;
  padding:9px 0!important;
  border-top:1px solid rgba(45,78,105,.50)!important;
}

html body .oh-market-metrics > div:nth-child(odd){
  padding-right:12px!important;
}

html body .oh-market-metrics > div:nth-child(even){
  padding-left:12px!important;
}

html body .oh-market-metrics strong{
  color:#f4f8fc!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:900!important;
}

html body .oh-market-metrics strong.green,
html body .oh-market-metrics span{
  color:#19e6a5!important;
}

html body .oh-market-metrics small{
  color:#a9bed0!important;
  font-size:11px!important;
  font-weight:750!important;
}

html body .oh-market-chart{
  position:relative!important;
  height:86px!important;
  margin-top:10px!important;
  overflow:hidden!important;
}

html body .oh-market-chart::before{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0!important;
  height:70%!important;
  background:linear-gradient(180deg,rgba(255,112,16,0),rgba(255,112,16,.16))!important;
  pointer-events:none!important;
}

html body .oh-market-chart svg{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
}

html body .oh-market-chart .grid-line{
  stroke:rgba(118,151,174,.16)!important;
  stroke-width:1!important;
}

html body .oh-market-chart .area{
  fill:rgba(255,112,16,.17)!important;
}

html body .oh-market-chart .trend{
  fill:none!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

html body .oh-market-chart .trend.glow{
  stroke:#ff7a18!important;
  stroke-width:8!important;
  opacity:.18!important;
  filter:blur(2px)!important;
}

html body .oh-market-chart .trend.core{
  stroke:#ff7a18!important;
  stroke-width:4!important;
  filter:drop-shadow(0 0 8px rgba(255,112,16,.58))!important;
}

html body .oh-market-chart .nodes circle{
  fill:#ff8a22!important;
  stroke:rgba(255,230,190,.8)!important;
  stroke-width:1.4!important;
}

html body .oh-market-chart .nodes circle.last{
  fill:#ffd08a!important;
  stroke:#fff2d5!important;
}

@media (max-width: 999px){
  html body.about-page .copy-layout,
  html body.contact-page .contact-layout,
  html body.news-page .news-layout,
  html body.news-page .article-layout,
  html body .oh-page-side-layout{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}

/* v4: make the moved hero trend card behave like the jobs right rail everywhere. */
html body .oh-page-side,
html body .newsroom-side-v1,
html body .side,
html body .sidebar{
  min-width:0!important;
}

html body .oh-page-side > .box,
html body .newsroom-side-v1 > section,
html body .side > .box{
  width:100%!important;
}

html body .oh-market-panel .market-period{
  white-space:nowrap!important;
}

html body .oh-market-chart{
  height:98px!important;
}

html body .oh-market-chart .area{
  fill:rgba(255,112,16,.20)!important;
}

@media (min-width: 1180px){
  html body .oh-page-side-layout,
  html body.jobs-page main.jobs-mock-layout,
  html body.news-dashboard-page .newsroom-layout-v1{
    max-width:min(1760px, calc(100vw - 24px))!important;
  }

  html body.jobs-page main.jobs-mock-layout,
  html body.news-dashboard-page .newsroom-layout-v1{
    width:min(1760px, calc(100vw - 24px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media (min-width: 901px){
  html body.news-dashboard-page .newsroom-v1{
    padding-left:0!important;
    padding-right:0!important;
  }

  html body.news-dashboard-page .newsroom-hero-v1{
    margin-left:0!important;
    margin-right:0!important;
    grid-template-columns:minmax(0,760px)!important;
  }

  html body.news-dashboard-page .newsroom-hero-v1 .newsroom-overview-v1{
    display:none!important;
  }

  html body.news-dashboard-page .newsroom-layout-v1{
    grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important;
    gap:14px!important;
    align-items:start!important;
    padding-top:14px!important;
  }

  html body.news-dashboard-page .newsroom-side-v1{
    position:sticky!important;
    top:96px!important;
    display:block!important;
  }

  html body.news-dashboard-page .newsroom-filter-v1,
  html body.news-dashboard-page .newsroom-list-head-v1,
  html body.news-dashboard-page .newsroom-story-card-v1,
  html body.news-dashboard-page .newsroom-feature-card-v1,
  html body.news-dashboard-page .newsroom-side-v1 > section{
    border-radius:8px!important;
    border-color:rgba(120,166,205,.16)!important;
    background:linear-gradient(180deg,rgba(5,22,36,.70),rgba(3,13,24,.62))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
  }

  html body.news-dashboard-page .newsroom-side-v1 > section + section{
    margin-top:10px!important;
  }

  html body.news-dashboard-page .newsroom-side-v1 h3{
    color:#ff7a18!important;
    font-size:12px!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    line-height:1.15!important;
  }
}