/*
 * The Potty Training Readiness Quiz's result (KID-1324): the score with its verdict, the sections' bars, strengths
 * and what to work on, and the checklist. The verdict's tones are the result's own.
 */
@layer pages {
  .kp-readiness__verdict {
    --kp-verdict: #21633a;
    --kp-verdict-tint: #e7f5eb;
    display: flex;
    align-items: center;
    gap: var(--kp-space-5);
    padding: var(--kp-space-5) var(--kp-space-6);
    border-radius: var(--kp-radius-md);
    background: var(--kp-verdict-tint);
    break-inside: avoid;
  }

  .kp-readiness__verdict--almost-ready { --kp-verdict: #7a5900; --kp-verdict-tint: #fff6cc; }
  .kp-readiness__verdict--wait-a-bit { --kp-verdict: #195a91; --kp-verdict-tint: #e5f1fc; }

  .kp-readiness__score {
    flex-shrink: 0;
    color: var(--kp-verdict);
    font-family: var(--kp-font-display);
    font-size: var(--kp-text-stat);
    font-weight: 900;
    line-height: 1;
  }

  .kp-readiness__score small {
    font-size: 0.45em;
  }

  .kp-readiness__text {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-1);
    line-height: var(--kp-body-leading);
  }

  .kp-readiness__text strong {
    color: var(--kp-verdict);
    font-size: 1.25rem;
  }

  @media (max-width: 30rem) {
    .kp-readiness__verdict {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .kp-readiness__bars {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kp-readiness__bars li {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-1);
  }

  .kp-readiness__bar-label {
    display: flex;
    justify-content: space-between;
    gap: var(--kp-space-3);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .kp-readiness__track {
    display: block;
    height: 0.625rem;
    overflow: hidden;
    border-radius: var(--kp-radius-pill);
    background: var(--kp-alt-2);
  }

  .kp-readiness__track > span {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: var(--kp-brand);
  }

  .kp-readiness__lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--kp-space-3);
  }

  .kp-readiness__list {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-2);
    padding: var(--kp-space-5);
    border-radius: var(--kp-radius-md);
    background: var(--kp-alt);
    break-inside: avoid;
  }

  .kp-readiness__list h3 {
    font-size: 1.0625rem;
  }

  .kp-readiness__list ul,
  .kp-readiness__tips {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-2);
    margin: 0;
    padding-inline-start: 1.25rem;
    color: var(--kp-ink-2);
    line-height: var(--kp-body-leading);
  }

  .kp-readiness__checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--kp-space-2) var(--kp-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kp-readiness__checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--kp-space-2);
    color: var(--kp-ink-2);
    font-size: 0.9375rem;
    line-height: var(--kp-body-leading);
    break-inside: avoid;
  }

  .kp-readiness__box {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.15em;
    border: 2px solid var(--kp-border-2);
    border-radius: 0.375rem;
  }

  .kp-readiness__checklist .is-checked {
    color: var(--kp-ink);
    font-weight: 600;
  }

  .kp-readiness__checklist .is-checked .kp-readiness__box {
    border-color: var(--kp-brand);
    background: var(--kp-brand);
    color: #ffffff;
  }
}