@layer components {
  .lab-trends { container-type: inline-size; max-width: 800px; margin-top: 1rem; }
  .lab-trends-heading { padding-bottom: .8rem; }
  .lab-trends-list { border-top: 1px solid var(--line-strong); }
  .lab-trend { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, .85fr) minmax(220px, 1.25fr); align-items: center; gap: 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--line-strong); }
  .lab-trend-identity { min-width: 0; }
  .lab-trend-identity h4 { margin: 0; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
  .lab-trend-unit { margin-left: .3rem; color: var(--periwinkle); font-size: .78rem; font-weight: 500; white-space: nowrap; }
  .lab-trend-identity p { margin-top: .25rem; color: var(--muted); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
  .lab-trend-latest { display: grid; gap: .2rem; min-width: 0; }
  .lab-trend-latest > span, .lab-trend-latest time { color: var(--muted); font-size: .75rem; }
  .lab-trend-latest strong { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 400; letter-spacing: -.035em; overflow-wrap: anywhere; line-height: 1.4; }
  .lab-trend-plot { min-width: 0; }
  .lab-trend-canvas svg { display: block; width: 100%; height: auto; overflow: visible; }
  .lab-trend-line polyline { fill: none; stroke: var(--periwinkle); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .lab-trend-line circle { fill: var(--surface); stroke: var(--periwinkle); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .lab-trend-line circle.is-latest { fill: var(--coral); stroke: var(--coral); }
  .lab-trend-point-value { fill: var(--ink); font-family: var(--font-mono); font-size: 18px; font-weight: 400; }
  .lab-trend-dates { display: flex; justify-content: space-between; gap: .65rem; color: var(--muted); font-size: .7rem; }
  .lab-trend-dates time:last-child { text-align: right; }
  .lab-trend-unplottable { color: var(--muted); font-size: .8rem; }
  @container (max-width: 600px) {
    .lab-trend { grid-template-columns: minmax(0, 1fr) minmax(110px, .7fr); gap: .6rem 1rem; }
    .lab-trend-latest { text-align: right; }
    .lab-trend-plot { grid-column: 1 / -1; width: min(100%, 280px); justify-self: center; }
  }
}