@layer components {
  /* Weight history under the profile weight field: range chips in the catalog
     sort recipe, uPlot canvas below. The u- rules are the vendored structural
     bits from uPlot.min.css, scoped here and restyled with tokens. */
  .weigh-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);

    .weigh-ranges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);

      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: var(--touch);
        padding-inline: var(--space-s);
        border: thin solid var(--mist);
        border-radius: var(--radius-s);
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-weight: 600;
        cursor: pointer;

        &[aria-current="true"] {
          background: var(--dusk);
          border-color: var(--dusk);
          color: var(--cream);
        }
      }
    }

    .weigh-plot {
      height: clamp(11rem, 30vw, 14rem);
      /* The cursor crosshair follows a drag; keep vertical page scrolling. */
      touch-action: pan-y;
    }

    .uplot,
    .uplot *,
    .uplot *::before,
    .uplot *::after { box-sizing: border-box; }

    .uplot {
      font-family: var(--font-body);
      line-height: 1.5;
      width: min-content;
    }

    .u-wrap { position: relative; user-select: none; }

    .u-over,
    .u-under { position: absolute; }

    .u-under { overflow: hidden; }

    .uplot canvas { display: block; position: relative; width: 100%; height: 100%; }

    .u-axis { position: absolute; }

    .u-cursor-x,
    .u-cursor-pt {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      pointer-events: none;
      will-change: transform;
    }

    .u-cursor-x {
      block-size: 100%;
      border-inline-end: thin solid color-mix(in oklch, var(--clay) 55%, transparent);
    }

    .u-cursor-pt { border-radius: 50%; border: 0 solid; }

    .u-cursor-x.u-off,
    .u-cursor-y.u-off,
    .u-cursor-pt.u-off { display: none; }

    .weigh-tip {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 1;
      padding: var(--space-2xs) var(--space-xs);
      border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
      border-radius: var(--radius-s);
      background: var(--cream);
      color: var(--dusk);
      font-size: var(--step-00);
      line-height: 1.4;
      white-space: nowrap;
      pointer-events: none;
      will-change: transform;
      box-shadow: 0 0.15rem 0.4rem oklch(0 0 0 / 0.08);
    }
  }
}