@layer components {
  /* Leftover nutrient planks and their row on Итого за день. */
  .budget-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);

    .alcohol:not([hidden]) { grid-column: 1 / -1; }
  }

  /* Stay 2×2 in a ~35rem PWA window; leftover copy wraps inside the plank. */
  @container (min-width: 40rem) {
    .budget-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  @container (min-width: 48rem) {
    .budget-row:has(.alcohol:not([hidden])) {
      grid-template-columns: repeat(5, minmax(0, 1fr));

      .alcohol:not([hidden]) { grid-column: auto; }
    }
  }

  .meter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs) var(--space-xs);
    min-inline-size: 0;
    padding: var(--space-2xs) var(--space-xs);
    border: thin solid color-mix(in oklch, var(--cream) 14%, transparent);
    border-radius: var(--radius-s);

    .meter-icon { display: inline-flex; inline-size: 2.1em; block-size: 2.1em; }

    .glyph-photo { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }

    &[data-meter="calories"] { color: var(--paprika); }
    &[data-meter="protein"] { color: var(--sage); }
    &[data-meter="fat"] { color: var(--gold); }
    &[data-meter="carbs"] { color: var(--clay); }
    &[data-meter="alcohol"] { color: var(--plum); }

    .meter-info { min-inline-size: 0; overflow-wrap: anywhere; }

    .meter-label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.25em;
      min-inline-size: 0;
      color: color-mix(in oklch, var(--cream) 68%, var(--mist));
      font-size: 0.7em;
      font-weight: 600;
      letter-spacing: 0.02em;

      strong { font: inherit; color: inherit; min-inline-size: 0; }
    }

    [data-role="status"] {
      display: block;
      min-inline-size: 0;
      overflow-wrap: anywhere;
      color: var(--cream);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    small {
      display: block;
      color: color-mix(in oklch, var(--cream) 62%, var(--mist));
      font-size: 0.75em;
      font-variant-numeric: tabular-nums;
    }

    &.is-tight [data-role="status"] { color: color-mix(in oklch, var(--tight) 38%, var(--cream)); }
    &.is-met [data-role="status"] { color: color-mix(in oklch, var(--sage) 40%, var(--cream)); }
    &.is-over [data-role="status"] { color: color-mix(in oklch, var(--over) 42%, var(--cream)); }

    &.is-glow {
      border-color: color-mix(in oklch, var(--sage) 70%, var(--cream));
      box-shadow:
        inset 0 0 0.55rem color-mix(in oklch, var(--sage) 45%, transparent),
        0 0 0.35rem color-mix(in oklch, var(--sage) 55%, var(--cream));
      animation: meter-glow 1.6s ease-in-out infinite;
    }

    .meter-bar {
      grid-column: 1 / -1;
      block-size: 0.44em;
      overflow: clip;
      border-radius: 1em;
      background: color-mix(in oklch, var(--cream) 22%, transparent);

      > i {
        display: block;
        block-size: 100%;
        width: 0;
        background: color-mix(in oklch, currentColor 62%, var(--cream));
      }
    }
  }

  @keyframes meter-glow {
    50% {
      box-shadow:
        inset 0 0 0.9rem color-mix(in oklch, var(--sage) 70%, transparent),
        0 0 0.55rem color-mix(in oklch, var(--sage) 75%, var(--cream));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .meter.is-glow { animation: none; }
  }
}