/* ============================================================
   Cleaned metrics & card-header styles
   – merged duplicate container rules into one
   – removed redundant properties and width conflicts
   – preserved all existing behaviours (hover, selected, layout)
   ============================================================ */

.metrics-row {
  align-items: flex-start;
  gap: clamp(24px, -2.1818px + 4.3636vw, 48px);
  /*1150 - 400 */
}

.metrics-col {
  position: relative;
}

.metrics-row h4 {
  color: var(--white-color-2);
  font-family: var(--identity-font);
  font-weight: var(--font-weight7);
  font-size: var(--ft-20-19);
  line-height: 1.3;
  letter-spacing: -0.25px;
  margin: 0;
}

/* ----------------------------------------------------------------
     Shared card-header container base
  ----------------------------------------------------------------- */
.speedometer-egXXL-card-header-container,
.build-egXXL-card-header-container,
.hardware-egXXL-card-header-container,
.gradient-egXXL-card-header-container,
.rating-egXXL-card-header-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  z-index: 1;
}

.speedometer-egXXL-card-header-container,
.build-egXXL-card-header-container,
.gradient-egXXL-card-header-container {
  flex-direction: row;
  column-gap: 1.5rem;
  min-inline-size: max-content;
  padding: 1rem;
  min-width: 16rem;
  box-sizing: border-box;
}

.hardware-egXXL-card-header-container,
.rating-egXXL-card-header-container {
  flex-direction: column;
  padding: 1rem 0.5rem;
  min-width: 8rem;
  box-sizing: border-box;
}


/* ----------------------------------------------------------------
     Hover & selected states (pointer devices only)
  ----------------------------------------------------------------- */
/* ============================================================
   XXL-metric card header effects  (hover + tooltip-hover) — v4
   · Hover visuals persist via `.tooltip-hover` applied directly
     to the header container(s) by the JS above.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {

  /* ─── Normal :hover OR JS-driven tooltip-hover ──────────────── */
  [class*="-egXXL-card-header-container"]:hover,
  [class*="-egXXL-card-header-container"].tooltip-hover {
    transform: scale(1.075) rotate(0.75deg);
    box-shadow: 0 8px 15px var(--card-glow);
    background: linear-gradient(45deg, #2c2c2c, #3a3a3a);
  }

  /* glowing frame ------------------------------------------------- */
  [class*="-egXXL-card-header-container"]:hover::before,
  [class*="-egXXL-card-header-container"].tooltip-hover::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 8px;
    background: var(--card-shadow-extra-light);
    animation: pulse 1.5s infinite;
    z-index: 0;
  }

  /* floating “arc” ------------------------------------------------ */
  [class*="-egXXL-card-header-container"]:hover .arc,
  [class*="-egXXL-card-header-container"].tooltip-hover .arc {
    animation: float 2s ease-in-out infinite;
  }
}

/* ---------------- Selected state (unchanged) -------------------- */
[class*="-egXXL-card-header-container"].selected {
  transform: scale(1.075) rotate(0.75deg);
  box-shadow: 0 0 0 2px var(--card-color), 0 8px 15px var(--card-glow);
  background: linear-gradient(45deg, #2c2c2c, #3a3a3a);
}

[class*="-egXXL-card-header-container"].selected::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 8px;
  background: var(--card-shadow-extra-light);
  animation: pulse 1.5s infinite;
  z-index: 0;
}

[class*="-egXXL-card-header-container"].selected .arc {
  animation: float 2s ease-in-out infinite;
}



/* ----------------------------------------------------------------
     Layout — metrics container
  ----------------------------------------------------------------- */
.egXXL-metrics-container {
  display: grid;
  row-gap: var(--font-size-10px);
  column-gap: var(--font-size-9px);
  padding: 0.5rem 0;
}

.build .egXXL-metrics-container,
.performance .egXXL-metrics-container {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.ratings .egXXL-metrics-container {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
}

.hardware .egXXL-metrics-container {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}


.egXXL-metrics-container .speedometer-helper-container,
.egXXL-metrics-container .gradient-helper-container,
.egXXL-metrics-container .gauge-helper-container,
.egXXL-metrics-container .sensor-helper-container,
.egXXL-metrics-container .weight-helper-container,
.egXXL-metrics-container .mouse-feet-helper-container,
.egXXL-metrics-container .rating-helper-container {
  font-size: clamp(3.091rem, 2.893rem + 0.364vw, 3.273rem);
  /*1150 - 600 & 36 to 34 */
  min-inline-size: max-content;

  -webkit-text-size-adjust: 120% !important;
  text-size-adjust: 120% !important;
  -moz-text-size-adjust: 120% !important;
  -ms-text-size-adjust: 120% !important;
}



.egXXL-card-progress-type,
.egXXL-card-progress-value {
  position: relative;
  text-align: left;
  line-height: 1.3;
  font-family: var(--identity-font);
  letter-spacing: var(--letter-spacing-regular);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--font-size-15px);
}

.egXXL-card-progress-type {
  color: var(--grey-color-1);
  font-weight: var(--font-weight5);
}

.egXXL-card-progress-value {
  color: var(--grey-color-2);
  font-weight: var(--font-weight3);
}


.hardware-text-wrappers .egXXL-card-progress-type,
.ratings-text-wrappers .egXXL-card-progress-type {
  margin-top: .5rem;
  text-align: center;
}


























/*───────────────────────────────────────────────────────────
 * TOOL-TIP WRAPPER  ▶︎ paste this whole block verbatim
 *───────────────────────────────────────────────────────────*/
.filter-metric-tooltip-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  /* allow arrow to protrude */
  --arrow-size: 8px;
  /* keep in sync with JS ARROW */
  z-index: 99999;
}

.filter-metric-tooltip-wrapper.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*───────────────────────────────────────────────────────────
  Triangle pointer — now rendered on the WRAPPER
───────────────────────────────────────────────────────────*/
.filter-metric-tooltip-wrapper::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: var(--arrow-size) solid transparent;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Tooltip ABOVE card → arrow points DOWN */
.filter-metric-tooltip-wrapper.tooltip-above::after {
  top: 100%;
  /* attach to bottom edge */
  border-top-color: var(--card-color, #fff);
}

/* Tooltip BELOW card → arrow points UP */
.filter-metric-tooltip-wrapper:not(.tooltip-above)::after {
  bottom: 100%;
  /* attach to top edge */
  border-bottom-color: var(--card-color, #fff);
}

/* core box remains unchanged */
.filter-metric-tooltip {
  position: relative;
  overflow: visible;
}


/*───────────────────────────────────────────────────────────
 * INNER TOOL-TIP  ▶︎ swap this block
 *───────────────────────────────────────────────────────────*/
.filter-metric-tooltip {
  /* let content decide width, but never exceed 600 px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  width: min(100%, clamp(315px, 260.4545px + 9.0909vw, 365px));
  max-width: clamp(315px, 260.4545px + 9.0909vw, 365px);
  max-height: 400px;

  padding: 1.3rem 1.45rem;
  background: linear-gradient(135deg,
      var(--egxxl-surface-5) 0%,
      var(--egxxl-surface-2) 100%);
  box-shadow:
    0 0 0 1px var(--card-glow),
    0 8px 24px rgba(0, 0, 0, 0.30),
    0 2px 8px rgba(0, 0, 0, 0.20),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* enable interaction once the wrapper is open */
.filter-metric-tooltip-wrapper.visible .filter-metric-tooltip {
  pointer-events: auto;
}


.filter-metric-tooltip .tooltip-text {
  width: 100% !important;
}

.filter-metric-tooltip .tooltip-item:nth-of-type(2) {
  margin-top: 2rem !important
}



/* ============================================================================
   Score-distribution tooltip CSS – 2 px spacing between bars
============================================================================ */
.score-distribution {
  position: relative;
  width: 100%;
  /* fixed tooltip width */
  height: 60px;
  /* 45px bars + 3px baseline + 12px space */
  margin-top: 1.5rem;
  pointer-events: none;
}

/* coloured baseline – neutral or rating gradient */
.score-distribution::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #555;
  border-radius: 2px;
}

.score-distribution.rating::before {
  background: linear-gradient(90deg, #d63c3c 0%, #e1a519 50%, #1fb64e 100%);
}

/* histogram bars – width auto-calculated from --bins */
.score-distribution .dist-bar {
  --gap: 2px;
  /* 2 px gap (was 1 px)          */
  position: absolute;
  bottom: 3px;
  /* sit on the baseline          */
  left: calc(var(--x) * 1%);
  /* JS passes --x 0 – 100        */
  width: calc((100% - (var(--bins) - 1)*var(--gap)) / var(--bins));
  transform: translateX(-50%);
  height: calc(var(--h));
  /* --h already a percentage     */
  background: #000;
  opacity: .85;
}

.score-distribution .dist-bar.highlight {
  background: var(--card-accent);
  opacity: 1;
}

/* constant horizontal gap between bars */
.score-distribution .dist-bar::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--gap));
  /* now −2 px                    */
  top: 0;
  bottom: 0;
  width: var(--gap);
  background: transparent;
}

/* current-value marker  ▾ */
/* current-value indicator arrow */
/* indicator arrow – always rotated 180° (points down) */
.score-distribution .dist-indicator {
  position: absolute;
  bottom: -6px;
  transform: translateX(-50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--card-accent);
  /* arrow fill */
  pointer-events: none;
}


/* duplicate alignment helpers (retain if needed) */
.score-distribution .dist-bar {
  left: calc(var(--x) * 1%);
}

/* tiny heading “Distribution” */
.dist-heading {
  margin: 2rem 0 0rem 0;
  font-family: var(--identity-font) !important;
  font-weight: 600;
  font-size: var(--font-size-14px) !important;
  color: var(--grey-color-1);
}

.dist-description {
  margin: 0rem 0 3rem 0;
  font-family: var(--identity-font) !important;
  font-weight: 400;
  font-size: var(--font-size-12px) !important;
  color: var(--grey-color-1);
}

/* optional min / max labels (added by JS for non-rating metrics) */
.dist-range {
  display: flex;
  justify-content: space-between;
  font-family: var(--identity-font) !important;
  font-weight: 600;
  font-size: var(--font-size-12px) !important;
  color: var(--grey-color-1);
  margin-top: 2px;
  color: var(--grey-color-1);
}

.dist-hub-link {
  margin-top: 2rem;
}

.dist-hub-link a {
  font-family: var(--identity-font) !important;
  font-weight: 400 !important;
  font-size: var(--font-size-14px) !important;
  color: var(--card-color) !important;
}


.dist-hub-link a:hover {
  text-decoration: underline;
}