@layer components {
  .budget {
    container-type: inline-size;
    min-inline-size: 0;
  }

  .budget-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-s);
    margin: 0 0 var(--space-xs);
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: color-mix(in oklch, var(--cream) 72%, var(--mist));

    time { letter-spacing: 0; font-size: 1.1em; font-weight: 600; color: var(--cream); }

    .day-stamp {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2xs);
      min-inline-size: 0;
    }

    .day-copy { color: var(--cream); }

    .hud-totals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

    .day-score { display: inline-flex; align-items: center; gap: 0.25em; }
  }

  .stop-banner {
    --stop: var(--sage);
    --stop-edge: 55%;
    --stop-fill: 26%;
    --stop-icon: 40%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xs);
    margin: 0 0 var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    border: 0;
    border-inline-start: 0.22rem solid color-mix(in oklch, var(--stop) var(--stop-edge), var(--cream));
    border-radius: var(--radius-s);
    background: color-mix(in oklch, var(--stop) var(--stop-fill), var(--dusk));
    color: var(--cream);
    font-size: var(--step-00);
    font-weight: 600;
    line-height: 1.4;
    text-wrap: pretty;

    .stop-icon {
      display: inline-flex;
      flex: none;
      margin-block-start: 0.12em;
      color: color-mix(in oklch, var(--stop) var(--stop-icon), var(--cream));
    }

    .stop-copy { flex: 1 1 10rem; min-inline-size: 0; }

    .meter-why {
      margin-block-start: 0.05em;
      margin-inline-start: auto;
      background: color-mix(in oklch, var(--cream) 16%, transparent);
    }

    .glyph { inline-size: 1.15em; block-size: 1.15em; }

    &.is-warn {
      --stop: var(--over);
      --stop-edge: 70%;
      --stop-fill: 48%;
      --stop-icon: 35%;
    }

    &.is-note {
      --stop: var(--gold);
      --stop-edge: 65%;
      --stop-fill: 30%;
    }
  }
}