/**
 * Special Security Initiative appeal box
 * Rendered by template-parts/modules/hhd-thermometer.php
 */

.ssi-appeal {
  background: #fff;
  border: 1px solid #d4d8da;
  border-top: 5px solid #1c8e64;
  border-radius: 5px;
  padding: 32px 32px 26px;
  margin: 40px 0;
}

.ssi-appeal__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: stretch;
}

.ssi-appeal__copy {
  flex: 1 1 260px;
  min-width: 0;
}

.ssi-appeal__copy > *:last-child {
  margin-bottom: 0;
}

.ssi-appeal__heading {
  margin-bottom: 14px;
}

.ssi-appeal__meter {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f2f6f8;
  border: 1px solid #dfe6ea;
  border-radius: 5px;
  padding: 18px;
}

.ssi-appeal--no-meter .ssi-appeal__copy {
  flex: 1 1 100%;
}

.ssi-meter__heading {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: #07304d;
}

.ssi-meter__body {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  justify-content: center;
}

.ssi-meter__thermo {
  /* Low floor on purpose: the tube scales down to whatever the copy column leaves,
     so the panel bottom lands on the last line of copy instead of overshooting it.
     Width follows height off the viewBox ratio, so a shorter tube gives its unused
     width back to the stats instead of leaving a gap. */
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 134 / 193;
  max-width: 134px;
  min-height: 128px;
}

.ssi-meter__thermo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Mercury rises from empty on first paint. */
.ssi-thermo__mercury {
  animation: ssi-thermo-rise 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ssi-thermo-rise {
  from { transform: translateY(var(--ssi-rise, 0)); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ssi-thermo__mercury {
    animation: none;
  }
}

.ssi-meter__thermo text {
  font-family: "lft-etica", sans-serif;
}

.ssi-meter__stats {
  flex: 1 1 150px;
  min-width: 150px;
}

.ssi-meter__label {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #6d7d88;
  margin: 0 0 8px;
}

.ssi-meter__amount {
  font-size: 40px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0e5b91;
  margin: 0 0 16px;
}

.ssi-meter__bar {
  height: 6px;
  border-radius: 3px;
  background: #dfe6ea;
  overflow: hidden;
  margin-bottom: 8px;
}

.ssi-meter__bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #1c8e64;
}

.ssi-meter__goal {
  font-size: 13px;
  color: #41535f;
  margin: 0;
}

.ssi-meter__footer {
  margin-top: 16px;
}

.ssi-meter__button.button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
}

@media (min-width: 769px) {
  .ssi-appeal__inner {
    flex-wrap: nowrap;
  }

  .ssi-appeal__copy,
  .ssi-appeal__meter {
    flex: 1 1 0;
  }
}

@media (max-width: 768px) {
  .ssi-appeal {
    padding: 22px 18px;
  }

  .ssi-appeal__meter {
    padding: 16px;
  }

  .ssi-appeal__inner {
    gap: 26px;
  }
}