@layer components {
  .meter-why,
  .col-why {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 1.35em;
    block-size: 1.35em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    z-index: 1;

    &::before {
      content: "";
      position: absolute;
      inset: 50%;
      margin: calc(var(--touch) / -2);
      inline-size: var(--touch);
      block-size: var(--touch);
    }

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

  .meter-why { background: color-mix(in oklch, var(--cream) 18%, transparent); }
  .col-why { background: color-mix(in oklch, var(--ink) 10%, transparent); }

  .meter-sheet[popover] {
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    inline-size: 100%;
    max-inline-size: none;
    padding: var(--space-xs) var(--space-m) max(var(--space-m), env(safe-area-inset-bottom, 0rem));
    border: 0;
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
    background: var(--cream);
    color: var(--ink);
    font-size: var(--step-0);
    line-height: 1.45;
    translate: 0 100%;
    transition: translate 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete;

    &:popover-open { translate: 0 0; }

    &::backdrop {
      background: color-mix(in oklch, var(--ink) 40%, transparent);
    }

    .sheet-grab {
      display: block;
      inline-size: 2.25rem;
      block-size: 0.3rem;
      margin-inline: auto;
      margin-block: var(--space-2xs) var(--space-s);
      border-radius: 1em;
      background: color-mix(in oklch, var(--ink) 22%, transparent);
    }

    .sheet-bar {
      display: flex;
      align-items: center;
      gap: var(--space-s);
      margin-block-end: var(--space-s);
    }

    .sheet-bar h3 {
      flex: 1;
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--step-1);
      text-wrap: balance;
    }

    .sheet-close {
      min-inline-size: var(--touch);
      min-block-size: var(--touch);
      padding: 0 var(--space-s);
      border: 0;
      border-radius: var(--radius-s);
      background: var(--mist);
      color: var(--ink);
      font-weight: 600;
      cursor: pointer;
      touch-action: manipulation;
    }

    .sheet-copy { margin: 0 0 var(--space-s); }

    a {
      display: flex;
      align-items: center;
      min-block-size: var(--touch);
      color: var(--paprika);
      font-weight: 600;
      text-underline-offset: 0.15em;
    }
  }

  @starting-style {
    .meter-sheet[popover]:popover-open { translate: 0 100%; }
  }

  @media (min-width: 48rem) {
    .meter-sheet[popover] {
      --sheet-size: min(22rem, calc(100vw - 2 * var(--gutter)));
      inset: 50% auto auto 50%;
      translate: -50% -50%;
      inline-size: var(--sheet-size);
      max-inline-size: var(--sheet-size);
      padding: var(--space-m);
      border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
      border-radius: var(--radius);

      &:popover-open { translate: -50% -50%; }

      .sheet-grab { display: none; }
    }

    @starting-style {
      .meter-sheet[popover]:popover-open { translate: -50% -40%; }
    }

    @media (hover: hover) and (pointer: fine) {
      .meter-why,
      .col-why { cursor: help; }

      .meter-sheet[popover] {
        inset: auto;
        margin: 0;
        inset-block-start: anchor(bottom);
        inset-inline-start: clamp(
          var(--gutter),
          calc(anchor(center) - var(--sheet-size) / 2),
          calc(100vw - var(--gutter) - var(--sheet-size))
        );
        translate: 0;
        max-block-size: calc(100dvh - 2 * var(--gutter));
        overflow: auto;
        padding: var(--space-s) var(--space-m);
        box-shadow: 0 0.4rem 1.2rem color-mix(in oklch, var(--ink) 18%, transparent);
        position-try-fallbacks: flip-block, flip-inline;

        &:popover-open { translate: 0; }

        &::backdrop { background: transparent; pointer-events: none; }

        .sheet-close { display: none; }
      }

      /* One sheet shared by every day: no CSS anchor, keep the wide card. */
      .meter-sheet[popover].is-shared {
        inset: 50% auto auto 50%;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        translate: -50% -50%;
        box-shadow: none;
        position-try-fallbacks: none;

        &:popover-open { translate: -50% -50%; }

        &::backdrop {
          background: color-mix(in oklch, var(--ink) 40%, transparent);
          pointer-events: auto;
        }

        .sheet-close { display: flex; }
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .meter-sheet[popover] { transition: none; }
  }
}