/* The Kids Allowance Calculator's result (KID-1324): the gauge against the national average, and the formula. */
@layer pages {
  .kp-allowance__gauge {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-2);
  }

  /* The scale runs to 1.5 times the average, so the average sits at two thirds */
  .kp-allowance__track {
    position: relative;
    display: block;
    height: 0.875rem;
    border-radius: var(--kp-radius-pill);
    background: var(--kp-alt-2);
  }

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

  .kp-allowance__marker {
    position: absolute;
    inset-block: -0.25rem;
    inset-inline-start: 66.667%;
    width: 3px;
    border-radius: 2px;
    background: var(--kp-ink);
  }

  .kp-allowance__scale {
    position: relative;
    display: flex;
    justify-content: space-between;
    color: var(--kp-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
  }

  .kp-allowance__average {
    position: absolute;
    inset-inline-start: 66.667%;
    color: var(--kp-ink);
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .kp-allowance__formula {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kp-space-3);
    padding: var(--kp-space-5);
    border-radius: var(--kp-radius-md);
    background: var(--kp-alt);
    font-size: 1.125rem;
  }

  .kp-allowance__hybrid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--kp-space-2) var(--kp-space-4);
    margin: 0;
  }

  .kp-allowance__hybrid dt {
    color: var(--kp-ink-2);
  }

  .kp-allowance__hybrid dd {
    margin: 0;
  }
}