/* ===== Companion Value Highlights panel beside Additional Information ===== */
.card .details-panels{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:12px;
  align-items:stretch;
  margin-top:12px;
}
.card .details-panels .more{
  margin-top:0 !important;
  height:360px;
  max-height:360px;
}
.cc-highlights-panel{
  width:100%;
  min-width:0;
  height:360px;
  max-height:360px;
  overflow:auto;
  box-sizing:border-box;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010));
  box-shadow:none;
}
.cc-highlights-panel,
.cc-highlights-panel *{
  -webkit-tap-highlight-color:transparent;
}
.cc-highlights-panel:hover,
.cc-highlights-panel:active{
  border-color:rgba(255,255,255,.085) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010)) !important;
}
.cc-highlights-head{
  display:grid;
  gap:6px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.cc-highlights-kicker{
  color:rgba(168,172,179,.88);
  font-size:10px;
  font-weight:820;
  letter-spacing:.075em;
  line-height:1.3;
  text-transform:uppercase;
}
.cc-highlights-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.cc-highlights-title{
  color:rgba(238,240,246,.96);
  font-size:16px;
  line-height:1.15;
  font-weight:760;
}
.cc-highlights-level{
  color:rgba(238,240,246,.84);
  font-size:11px;
  font-weight:820;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.cc-highlights-meter{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  margin-top:3px;
}
.cc-highlights-meter span{
  height:5px;
  background:rgba(255,255,255,.075);
}
.cc-highlights-meter[data-level="1"] span:nth-child(-n+1),
.cc-highlights-meter[data-level="2"] span:nth-child(-n+2),
.cc-highlights-meter[data-level="3"] span:nth-child(-n+3),
.cc-highlights-meter[data-level="4"] span:nth-child(-n+4){
  background:rgba(255,255,255,.50);
}
.cc-highlights-summary{
  margin-top:3px;
  color:rgba(168,172,179,.92);
  font-size:12.5px;
  line-height:1.45;
}
.cc-highlights-list{
  display:grid;
  padding-top:0;
}
.cc-highlight-row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.cc-highlight-row:last-child{ border-bottom:0; }
.cc-highlight-row:hover,
.cc-highlight-row:active{
  background:transparent !important;
  box-shadow:none !important;
}
.cc-highlight-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(238,240,246,.78);
  opacity:.92;
}
.cc-highlight-icon .material-symbols-outlined{
  font-size:18px;
  line-height:1;
}
.cc-highlight-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.cc-highlight-label{
  color:rgba(168,172,179,.88);
  font-size:9.5px;
  font-weight:820;
  letter-spacing:.075em;
  line-height:1.25;
  text-transform:uppercase;
}
.cc-highlight-value{
  color:rgba(238,240,246,.96);
  font-size:13.5px;
  line-height:1.35;
  font-weight:680;
  overflow-wrap:anywhere;
}
.cc-highlight-note{
  color:rgba(168,172,179,.86);
  font-size:11.5px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.cc-highlight-empty{
  padding:12px 0 2px;
  color:rgba(168,172,179,.90);
  font-size:12.5px;
  line-height:1.45;
}
@media (max-width:900px){
  .card .details-panels{
    grid-template-columns:1fr;
  }
}
@media (max-width:780px){
  .card .details-panels{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:10px !important;
    box-sizing:border-box !important;
  }
  .cc-highlights-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:320px !important;
    overflow:auto !important;
    padding:11px 14px !important;
    background:rgba(255,255,255,.012) !important;
    border-color:rgba(255,255,255,.075) !important;
  }
  .card .details-panels .more,
  .card .details-panels .more[style*="display: block"]{
    height:auto !important;
    max-height:none !important;
    margin-top:0 !important;
  }
  /* Keep Value Highlights internals aligned like desktop on mobile.
     Only the two outer panels stack; the rows themselves remain icon + text. */
  .cc-highlights-title-row{
    display:flex !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    text-align:left !important;
    gap:10px !important;
  }
  .cc-highlights-head{ text-align:left !important; }
  .cc-highlight-row{
    grid-template-columns:22px minmax(0,1fr) !important;
    justify-items:stretch !important;
    text-align:left !important;
    gap:10px !important;
    padding:11px 0 !important;
  }
  .cc-highlight-copy{ justify-items:stretch !important; text-align:left !important; }
  .cc-highlight-value,
  .cc-highlight-note{ max-width:100% !important; }
}
@media (max-width:480px){
  .card .details-panels{
    width:calc(100% - 4px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .cc-highlights-panel{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}