/* ROMs HUB — Device panel readability v1.0.0
   Scope is added dynamically by device-panel-readability.js.
   No shared HUB chrome, ROM table, DB, API or Compare integration styles are changed. */

.xmh-device-panel-readable{
  --xmh-dp-icon-size:34px;
  --xmh-dp-icon-glyph:17px;
  --xmh-dp-label-size:12px;
  --xmh-dp-small-size:10px;
}

/* Navigation cards/buttons in the left device panel */
.xmh-device-panel-readable .xmh-dp-nav-item{
  min-height:48px!important;
  padding:8px 10px!important;
  gap:9px!important;
  line-height:1.2!important;
}

.xmh-device-panel-readable .xmh-dp-nav-item .xmh-dp-icon-target{
  display:grid!important;
  place-items:center!important;
  flex:0 0 var(--xmh-dp-icon-size)!important;
  width:var(--xmh-dp-icon-size)!important;
  min-width:var(--xmh-dp-icon-size)!important;
  height:var(--xmh-dp-icon-size)!important;
  min-height:var(--xmh-dp-icon-size)!important;
  font-size:var(--xmh-dp-icon-glyph)!important;
  line-height:1!important;
}

/* Covers SVG/icon-font/image glyphs without touching device photo */
.xmh-device-panel-readable .xmh-dp-nav-item .xmh-dp-icon-target svg{
  width:18px!important;
  height:18px!important;
}
.xmh-device-panel-readable .xmh-dp-nav-item .xmh-dp-icon-target img{
  width:18px!important;
  height:18px!important;
  object-fit:contain!important;
}

.xmh-device-panel-readable .xmh-dp-nav-item .xmh-dp-label-target{
  min-width:0!important;
  font-size:var(--xmh-dp-label-size)!important;
  font-weight:750!important;
  letter-spacing:0!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
}

/* If the existing button itself owns the ellipsis rules */
.xmh-device-panel-readable .xmh-dp-nav-item{
  font-size:var(--xmh-dp-label-size)!important;
  font-weight:750!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Bottom summary counters: Total ROMs / Generations / Regions */
.xmh-device-panel-readable .xmh-dp-stat{
  min-height:58px!important;
  padding:8px 6px!important;
}
.xmh-device-panel-readable .xmh-dp-stat .xmh-dp-stat-number{
  font-size:18px!important;
  font-weight:850!important;
  line-height:1!important;
}
.xmh-device-panel-readable .xmh-dp-stat .xmh-dp-stat-label{
  margin-top:4px!important;
  font-size:9.5px!important;
  font-weight:650!important;
  line-height:1.15!important;
  white-space:normal!important;
}

/* Small codename/live/status text inside the device panel */
.xmh-device-panel-readable .xmh-dp-meta{
  font-size:10.5px!important;
  line-height:1.3!important;
}

/* Give two-column controls enough room before truncating. */
.xmh-device-panel-readable .xmh-dp-nav-grid{
  gap:8px!important;
}
.xmh-device-panel-readable .xmh-dp-nav-grid > *{
  min-width:0!important;
}

@media (max-width:1100px){
  .xmh-device-panel-readable{
    --xmh-dp-icon-size:36px;
    --xmh-dp-icon-glyph:18px;
    --xmh-dp-label-size:12.5px;
  }
  .xmh-device-panel-readable .xmh-dp-nav-item{
    min-height:50px!important;
  }
}

@media (max-width:680px){
  .xmh-device-panel-readable{
    --xmh-dp-icon-size:38px;
    --xmh-dp-icon-glyph:19px;
    --xmh-dp-label-size:13px;
  }
  .xmh-device-panel-readable .xmh-dp-nav-item{
    min-height:52px!important;
    padding:9px 11px!important;
  }
  .xmh-device-panel-readable .xmh-dp-stat .xmh-dp-stat-number{
    font-size:19px!important;
  }
  .xmh-device-panel-readable .xmh-dp-stat .xmh-dp-stat-label{
    font-size:10px!important;
  }
}