/*
 * The Children's Acetaminophen Dosage Calculator (KID-1324): the medical notice over the form, the card shown instead
 * of a dose, the warnings, and the weight band of the child in the chart. The warning tones are the result's own.
 */
@layer pages {
  .kp-dose__notice {
    border: 1px solid var(--kp-border);
    background: var(--kp-alt);
  }

  .kp-dose__gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kp-space-2);
    padding: var(--kp-space-6);
    border: 2px solid #f0b400;
    border-radius: var(--kp-radius-md);
    background: #fff6cc;
    color: #5c4300;
    text-align: center;
    break-inside: avoid;
  }

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

  .kp-dose__gate h3 {
    color: #5c4300;
    font-size: 1.25rem;
  }

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

  .kp-dose__warnings {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-2);
    margin: 0;
    padding: var(--kp-space-4) var(--kp-space-5);
    border-inline-start: 4px solid #d93025;
    border-radius: var(--kp-radius-sm);
    background: #fde8e6;
    color: #6b1410;
    font-weight: 700;
    line-height: var(--kp-body-leading);
    list-style: none;
    break-inside: avoid;
  }

  .kp-dose__current > td {
    background: var(--kp-alt);
    font-weight: 800;
  }

  .kp-dose__current > td:first-child {
    box-shadow: inset 4px 0 0 var(--kp-brand);
  }

  .kp-sheet .kp-dose__disclaimer {
    color: var(--kp-ink-2);
    font-size: 0.875rem;
  }
}