/*
 * The Puppy Poop Checker (KID-1324): the color swatches, the urgency banner and what the answers mean. The swatches
 * and the urgency tones are the result's own colors, printed as they are.
 */
@layer pages {
  .kp-poop__swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid rgb(0 0 0 / 0.12);
    border-radius: 50%;
    vertical-align: middle;
  }

  .kp-poop__swatch--brown { background: #7b4a24; }
  .kp-poop__swatch--green { background: #5e8c31; }
  .kp-poop__swatch--yellow-orange { background: #e8a33d; }
  .kp-poop__swatch--black { background: #1f1f1f; }
  .kp-poop__swatch--red-streaks { background: repeating-linear-gradient(45deg, #7b4a24 0 5px, #c62828 5px 8px); }
  .kp-poop__swatch--white-specks { background: radial-gradient(circle at 30% 35%, #ffffff 0 2px, transparent 3px), radial-gradient(circle at 65% 60%, #ffffff 0 2px, transparent 3px), #7b4a24; }
  .kp-poop__swatch--grey-greasy { background: #a3a3a3; }

  .kp-poop__level {
    --kp-level: #21633a;
    --kp-level-tint: #e7f5eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kp-space-2);
    padding: var(--kp-space-6);
    border: 2px solid var(--kp-level);
    border-radius: var(--kp-radius-md);
    background: var(--kp-level-tint);
    color: var(--kp-level);
    text-align: center;
    break-inside: avoid;
  }

  .kp-poop__level--monitor { --kp-level: #7a5900; --kp-level-tint: #fff6cc; }
  .kp-poop__level--vet-soon { --kp-level: #a14a00; --kp-level-tint: #fff0e0; }
  .kp-poop__level--vet-now { --kp-level: #a31d16; --kp-level-tint: #fde8e6; }

  .kp-poop__level > span {
    font-size: 2.25rem;
    line-height: 1;
  }

  .kp-poop__level h3 {
    color: inherit;
    font-size: 1.375rem;
  }

  .kp-poop__level p {
    max-width: 34rem;
    color: var(--kp-ink);
    line-height: var(--kp-body-leading);
  }

  .kp-poop__meanings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--kp-space-4);
  }

  .kp-poop__meanings > .kp-result__section {
    padding: var(--kp-space-5);
    border-radius: var(--kp-radius-md);
    background: var(--kp-alt);
    break-inside: avoid;
  }

  .kp-poop__selection {
    display: flex;
    align-items: center;
    gap: var(--kp-space-2);
    color: var(--kp-ink);
    font-weight: 800;
  }
}