/*
 * Liquid glass for the captured product pages on the home. The captures are
 * regenerated by scripts/capture-report-snippets.mjs, and this file is not, so
 * the look survives a fresh capture. It retunes the reports' own colour
 * tokens: the paper becomes clear glass, ink becomes light, and the accents
 * keep their brand colours. The frosting itself is drawn by the page that
 * embeds a capture, behind the frame, because a frame cannot blur what sits
 * behind it.
 */

:root {
  /* EV Flash Report tokens */
  --cw-paper: transparent;
  --cw-paper-tint: rgba(255, 255, 255, 0.05);
  --cw-paper-border: rgba(255, 255, 255, 0.12);
  --cw-ink: #f4fbfc;
  --cw-ink-soft: rgba(244, 251, 252, 0.82);
  --cw-ink-muted: rgba(218, 242, 244, 0.56);
  --cw-accent-ink: #17e5d7;

  /* EV Health Report tokens */
  --secondary-color: #f4fbfc;
  --secondary-opacity-color: rgba(244, 251, 252, 0.3);
  --white-color: rgba(255, 255, 255, 0.05);
  --white-opacity-30: rgba(255, 255, 255, 0.08);
  --grey-1-color: rgba(255, 255, 255, 0.04);
  --grey-2-color: rgba(255, 255, 255, 0.12);
  --grey-3-color: rgba(255, 255, 255, 0.24);
  --grey-4-color: rgba(218, 242, 244, 0.56);
  --box-shadow-bottom: none;
}

html,
body {
  background: transparent !important;
  color: #f4fbfc !important;
}

.mainPage {
  --page-background: transparent;
  background: transparent !important;
}

/* Panels: a thin light rim instead of a white card. */
[class*="_panel_"],
[class*="_card_"],
[class*="_col1Alt_"],
[class*="_window_"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Status pills keep their colour as a tint on the glass. */
[class*="_pill_"][data-tone="green"] {
  border-color: rgba(64, 251, 118, 0.4);
  background: rgba(64, 251, 118, 0.12);
  color: #7dfca3;
}

[class*="_pill_"][data-tone="teal"] {
  border-color: rgba(23, 229, 215, 0.4);
  background: rgba(23, 229, 215, 0.12);
  color: #6ff1e7;
}

[class*="_color_green_"] [class*="_circle_"] {
  border-color: rgba(64, 251, 118, 0.4);
}

[class*="_color_teal_"] [class*="_circle_"] {
  border-color: rgba(23, 229, 215, 0.4);
}

/* The typical range is the one to read, so it keeps a stronger tint. */
[class*="_rangeCard_"][data-band="typical"] {
  background: rgba(23, 229, 215, 0.12);
}

/* Number plates stay real plates: white, with dark letters. */
[class*="_plate_"],
[class*="_plateText_"] {
  color: #111417 !important;
}

/* Wattson's widget, themed through the hooks a partner uses to brand it,
   which its page sets inline, so they need !important here. */
main[class*="WattsonWidgetEmbedPage"] {
  --cw-results-wattson-widget-surface-background: transparent !important;
  --cw-results-wattson-widget-surface-background-opacity: 0% !important;
  --cw-results-wattson-widget-text: #f4fbfc !important;
  --cw-results-wattson-widget-muted-text: rgba(218, 242, 244, 0.66) !important;
  --cw-results-wattson-widget-border: rgba(255, 255, 255, 0.16) !important;
  --cw-results-wattson-widget-card-background: #ffffff !important;
  --cw-results-wattson-widget-card-background-opacity: 5% !important;
  --cw-results-wattson-widget-card-border: rgba(255, 255, 255, 0.14) !important;
  --cw-results-wattson-widget-icon-background: rgba(23, 229, 215, 0.16) !important;
  --cw-results-wattson-widget-icon: #17e5d7 !important;
  --cw-results-wattson-widget-icon-border: rgba(23, 229, 215, 0.4) !important;
  --cw-results-wattson-widget-prompt-background: #ffffff !important;
  --cw-results-wattson-widget-prompt-background-opacity: 6% !important;
  --cw-results-wattson-widget-prompt-text: #f4fbfc !important;
  --cw-results-wattson-widget-prompt-border: #ffffff !important;
  --cw-results-wattson-widget-prompt-border-opacity: 16% !important;
  --cw-results-wattson-widget-composer-background: #ffffff !important;
  --cw-results-wattson-widget-composer-background-opacity: 6% !important;
  --cw-results-wattson-widget-composer-border: rgba(255, 255, 255, 0.18) !important;
  --cw-results-wattson-widget-composer-text: #f4fbfc !important;
  --cw-results-wattson-widget-composer-placeholder: #f4fbfc !important;
  --cw-results-wattson-widget-composer-placeholder-opacity: 66% !important;
  --cw-results-wattson-widget-composer-send-background: #17e5d7 !important;
  --cw-results-wattson-widget-composer-send-text: #05293d !important;
  --cw-results-wattson-widget-composer-send-border: #17e5d7 !important;
  --cw-results-wattson-widget-control-background: #ffffff !important;
  --cw-results-wattson-widget-control-background-opacity: 8% !important;
  --cw-results-wattson-widget-control-text: #f4fbfc !important;
  --cw-results-wattson-widget-control-border: #ffffff !important;
  --cw-results-wattson-widget-control-border-opacity: 18% !important;
  --cw-results-wattson-widget-footer-text: rgba(218, 242, 244, 0.6) !important;
  --cw-results-wattson-composer-field-gradient-end: #ffffff !important;
  --cw-results-wattson-topic-pill-background: #17e5d7 !important;
  --cw-results-wattson-topic-pill-text: #05293d !important;
}

/* The widget draws its brand ring as a background under its surface. On
   glass the frosted box around the frame is the edge, so the ring goes. */
main[class*="WattsonWidgetEmbedPage"] {
  background: none !important;
  border-color: transparent !important;
}

[class$="__questionComposer"],
[class*="__questionComposer "] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f4fbfc !important;
}

[class*="__questionComposerSend"] {
  background: #17e5d7 !important;
  color: #05293d !important;
}

/* The printed page's own rim and margin colour have no place on glass. */
.mainPage {
  border-color: transparent !important;
  outline: 0 !important;
}

/* ClearWatt's wordmarks print in navy, and read white on glass. */
img[src*="CW_logo"] {
  filter: brightness(0) invert(1);
}

/* The scorecard keeps its aurora rim, and its contents sit on darker glass
   inside it, so the text holds its contrast over the bright gradient. */
[class*="_backgroundExcellent_"] [class*="_badgeContainer_"],
[class*="_backgroundExcellent_"] [class*="_bodyContainer_"] {
  background: rgba(5, 12, 24, 0.55);
  backdrop-filter: blur(14px);
}

/* The hatched range bars print on white. On glass they become a quiet bar. */
[class*="_rangeRow_"] {
  background: rgba(255, 255, 255, 0.04) !important;
}