/* HearingDB v407 — optional browser colour-gamut enhancements.
   sRGB hex values remain authoritative for aid products, custom shells, swatches,
   colour presets, manufacturer identities, photos, audiograms and clinical data.
   In particular, never increase CSS brightness (HDR/superwhite) on light UI panels.
   Wide colour gamut is independent of HDR luminance; keep accessible SDR fallbacks.
*/
:root {
  --decorative-red: var(--chart-left-red);
  --decorative-blue: var(--chart-right-blue);
}

/* These are decorative, NOT the red/blue ear-data accents or brand HEX fields. */
.page-home .home-showcase__field--red,
.site-shell .brand-mark__left {
  background: var(--decorative-red);
}
.page-home .home-showcase__field--blue,
.site-shell .brand-mark__right {
  background: var(--decorative-blue);
}
.page-home .action-tile--red {
  --tile-hover: var(--decorative-red);
}
.page-home .action-tile--blue {
  --tile-hover: var(--decorative-blue);
}

/* A P3-capable browser/display can show accent colours slightly outside sRGB.
   The darker red and blue hover fills retain >=4.5:1 contrast with white text.
   Don't rewrite CSS colour data on product images, colour swatches or awards. */
@supports (color: color(display-p3 1 0 0)) {
  @media (color-gamut: p3) {
    :root {
      --decorative-red: color(display-p3 0.78 0.17 0.29);
      --decorative-blue: color(display-p3 0.10 0.38 0.94);
    }

    /* Standard links/buttons only: clinical product and manufacturer colours
       are deliberately not changed. Text/background contrast remains high. */
    .site-shell:not(.page-admin) {
      --primary: color(display-p3 0.16 0.36 0.78);
    }
  }
}

/* Deliberately no dynamic-range: high brightness boost. That feature indicates
   display/browser capability and does not reliably say HDR output is enabled. */

/* Display check: clean, consistent with the public reference pages. */
.page-display-check .display-check-shell {
  display: grid;
  gap: 22px;
  width: min(920px,100%);
  margin: 8px auto 40px;
}
.page-display-check .display-check-header {
  padding: clamp(20px,4vw,42px);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}
.page-display-check .display-check-header h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem,3.5vw,3.2rem);
  letter-spacing: -.045em;
}
.page-display-check .display-check-header p {margin: 0; line-height: 1.6; color: var(--muted)}
.page-display-check .display-check-section {
  padding: clamp(16px,3vw,28px);
  background: var(--surface);
  border: 1px solid var(--border);
}
.page-display-check .display-check-section h2 {margin: 0 0 12px; font-size: 1.3rem}
.page-display-check .display-check-section p {line-height: 1.6; color: var(--text); margin: 9px 0}
.page-display-check .display-check-status {display:grid; gap: 10px; margin: 14px 0 0}
.page-display-check .display-check-status div {display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--border);padding:10px 0}
.page-display-check .display-check-status dt {font-weight:700}
.page-display-check .display-check-status dd {margin:0;color:var(--primary-strong);font-weight:700}
.page-display-check .display-check-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0}
.page-display-check .display-check-sample {border:1px solid var(--border);padding:12px; min-width:0}
.page-display-check .display-check-sample strong {display:block;margin-bottom:10px}
.page-display-check .display-check-patch {height:88px;border:1px solid rgba(0,0,0,.12);background:#c7173f}
.page-display-check .display-check-patch--p3 {background:#c7173f}
.page-display-check .display-check-patch--blue {background:#1263db}
.page-display-check .display-check-patch--blue-p3 {background:#1263db}
.page-display-check .display-check-sample p {font-size:.85rem;color:var(--muted)}
@supports (color: color(display-p3 1 0 0)) {
  @media (color-gamut: p3) {
    .page-display-check .display-check-patch--p3 {background:color(display-p3 0.78 0.17 0.29)}
    .page-display-check .display-check-patch--blue-p3 {background:color(display-p3 0.10 0.38 0.94)}
  }
}
@media (max-width:580px) {
  .page-display-check .display-check-grid {grid-template-columns:1fr}
}