/* Desktop round-five polish based on rendered preview review. */
@media (min-width: 981px) {
  /* Give the Orleans VPP summary enough air to read as parish context. */
  #siteList .site-parish-group:not(.is-desktop-collapsed) > .site-parish-heading.has-vpp-summary::after {
    margin: 4px 0 7px !important;
    padding: 0 24px 0 0 !important;
    color: #5f6b81 !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  /* Identity row: logo, readable VPP designation and site name. */
  .sidebar .site-row.site-energy-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: minmax(50px, auto) auto auto !important;
    column-gap: 9px !important;
    row-gap: 3px !important;
    padding: 8px 9px 8px !important;
  }

  .sidebar .site-energy-card .site-logo {
    width: 29px !important;
    height: 29px !important;
  }

  .sidebar .site-energy-card .site-vpp-participant {
    min-height: 14px !important;
    height: 14px !important;
    padding: 0 5px !important;
    border-color: #d4daee !important;
    background: #f7f8fd !important;
  }

  .sidebar .site-energy-card .site-vpp-participant::after {
    font-size: 6.8px !important;
    font-weight: 850 !important;
    letter-spacing: .015em !important;
  }

  /* Mirror the network dashboard grammar: value first, label directly beneath. */
  .sidebar .site-energy-card .site-energy-primary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    min-height: 60px !important;
    margin: 3px 0 0 !important;
    border-top: 1px solid rgba(0,32,92,.075) !important;
    border-bottom: 0 !important;
  }

  .sidebar .site-energy-card .site-energy-primary-row .site-energy-primary-metric {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 59px !important;
    padding: 8px 8px 7px 3px !important;
    border: 0 !important;
  }

  .sidebar .site-energy-card .site-energy-primary-row .is-generation {
    padding-left: 10px !important;
    padding-right: 2px !important;
    border-left: 0 !important;
  }

  .sidebar .site-energy-card .site-energy-primary-row .site-energy-primary-metric > strong {
    order: 1 !important;
    align-self: flex-start !important;
    justify-self: auto !important;
    margin: 0 !important;
    color: #173f77 !important;
    text-align: left !important;
  }

  .sidebar .site-energy-card .site-energy-primary-row .is-state > strong {
    font-size: 24px !important;
  }

  .sidebar .site-energy-card .site-energy-primary-row .is-generation > strong {
    font-size: 22px !important;
  }

  .sidebar .site-energy-card .site-energy-primary-label {
    order: 2 !important;
    align-self: flex-start !important;
    justify-self: auto !important;
    margin: 4px 0 0 !important;
    text-align: left !important;
  }

  .sidebar .site-energy-card .site-energy-primary-label::after {
    color: #647083 !important;
    font-size: 8.7px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  /* Live allocation is supporting detail, not a third primary metric. */
  .sidebar .site-energy-card .site-energy-powering {
    margin: 0 !important;
    padding: 4px 0 0 !important;
  }

  .sidebar .site-energy-card .site-energy-powering-label {
    margin: 0 0 3px !important;
    color: #667188 !important;
    font-size: 7.8px !important;
    font-weight: 800 !important;
  }

  .sidebar .site-energy-card .site-energy-flow {
    gap: 3px !important;
  }

  .sidebar .site-energy-card .site-energy-flow-cell {
    padding: 3px 2px 3px !important;
    border-radius: 6px !important;
  }

  .sidebar .site-energy-card .site-energy-flow-cell strong {
    font-size: 12.5px !important;
    line-height: .95 !important;
  }

  .sidebar .site-energy-card .site-energy-flow-cell > span::after {
    font-size: 6.8px !important;
    line-height: 1.05 !important;
  }

  .sidebar .site-energy-card .site-energy-flow-cell.to-site {
    background: rgba(40,139,97,.05) !important;
  }

  .sidebar .site-energy-card .site-energy-flow-cell.to-grid {
    background: rgba(242,184,35,.065) !important;
  }

  .sidebar .site-energy-card .site-energy-flow-cell.to-battery {
    background: rgba(53,103,189,.05) !important;
  }
}