<style>
.odl-service-health { box-sizing: border-box; inline-size: 100%; max-inline-size: 28rem; margin-inline: auto; display: grid; gap: var(--ds-space-stack-sm); padding: var(--ds-space-inset-md) var(--ds-space-inset-lg) var(--ds-space-inset-lg);
  background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-service-health header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-inline-sm); }
.odl-service-health h3 { margin: 0; font: var(--ds-text-title-sm); }
.odl-service-health .odl-now { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); white-space: nowrap; }
.odl-service-health .odl-now strong { color: var(--ds-color-text-warning); font: var(--ds-text-code-md); font-weight: var(--ds-font-weight-label); }
.odl-service-health .odl-status { display: flex; align-items: center; gap: var(--ds-space-inline-xs); margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); }
.odl-service-health .odl-status::before { content: ""; flex: none; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-warning-bold);
  box-shadow: 0 0 0 var(--ds-space-2) var(--ds-color-bg-warning-subtle); }
.odl-service-health figure { margin: 0; }
.odl-service-health .odl-plot { position: relative; margin-block-start: var(--ds-space-24); }
.odl-service-health svg { display: block; inline-size: 100%; block-size: 8rem; overflow: visible; }
/* Labels and markers sit over the stretched chart in HTML, so they keep their shape at any width. */
.odl-service-health .odl-pin { position: absolute; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odl-service-health .odl-pin.is-max { inset-block-start: 0; inset-inline-start: 0; transform: translateY(-100%); padding-block-end: var(--ds-space-2); }
.odl-service-health .odl-pin.is-obj { inset-block-start: 37.5%; inset-inline-start: 0; transform: translateY(-100%); padding-block-end: var(--ds-space-2); color: var(--ds-color-text-warning); }
.odl-service-health .odl-end { position: absolute; inset-inline-start: 100%; inset-block-start: 21.67%; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); transform: translate(-50%, -50%);
  border: var(--ds-border-width-emphasis) solid var(--ds-color-text-warning); border-radius: var(--ds-radius-full); background: var(--ds-color-surface-raised);
  box-shadow: 0 0 0 var(--ds-space-2) var(--ds-color-bg-warning-subtle); }
.odl-service-health .odl-dep { position: absolute; inset-inline-start: 87.33%; inset-block-start: 0; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); transform: translate(-50%, -50%) rotate(45deg);
  border-radius: var(--ds-radius-2); background: var(--ds-color-icon-default); }
.odl-service-health .odl-grid { stroke: var(--ds-color-border-separator); }
.odl-service-health .odl-objective { stroke: var(--ds-color-text-warning); stroke-dasharray: 4 3; }
.odl-service-health .odl-prev { stroke: var(--ds-color-border-strong); stroke-dasharray: 2 3; fill: none; }
.odl-service-health .odl-line { stroke: var(--ds-color-text-primary); fill: none; stroke-linejoin: round; }
.odl-service-health .odl-hot { stroke: var(--ds-color-text-warning); }
.odl-service-health .odl-gap { fill: var(--ds-color-bg-neutral-subtle); }
.odl-service-health .odl-deploy { stroke: var(--ds-color-border-strong); stroke-dasharray: 2 3; }
.odl-service-health line, .odl-service-health path, .odl-service-health circle { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.odl-service-health .odl-axis, .odl-service-health figcaption { display: flex; justify-content: space-between; color: var(--ds-color-text-tertiary); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-service-health figcaption { flex-wrap: wrap; gap: var(--ds-space-4) var(--ds-space-inline-md); justify-content: start; margin-block-start: var(--ds-space-stack-xs); }
.odl-service-health figcaption span { display: inline-flex; align-items: center; gap: var(--ds-space-4); }
.odl-service-health figcaption i { display: inline-block; inline-size: var(--ds-space-12); border-block-start: var(--ds-border-width-emphasis) solid var(--ds-color-text-primary); }
.odl-service-health figcaption .odl-k-prev { border-block-start-style: dotted; border-color: var(--ds-color-border-strong); }
.odl-service-health figcaption .odl-k-obj { border-block-start-style: dashed; border-color: var(--ds-color-text-warning); }
.odl-service-health figcaption .odl-k-gap { block-size: var(--ds-space-8); border: 0; border-radius: var(--ds-radius-2); background: var(--ds-color-bg-neutral-subtle); }
.odl-service-health figcaption .odl-k-dep { inline-size: var(--ds-space-6); block-size: var(--ds-space-6); margin-inline: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-2); background: var(--ds-color-icon-default); transform: rotate(45deg); }
.odl-service-health a { color: var(--ds-color-text-link); font: var(--ds-text-body-sm); text-underline-offset: 0.2em; white-space: nowrap; }
.odl-service-health a:hover { text-decoration-thickness: var(--ds-border-width-emphasis); }
.odl-service-health a:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); border-radius: var(--ds-radius-detail); }
</style>
<article class="odl-service-health" aria-label="settle-api latency">
  <header><h3>Latency p95</h3><span class="odl-now">now <strong>547 ms</strong></span></header>
  <p class="odl-status"><span>Above its 450 ms objective since 13:21 · <a href="#">View&nbsp;alert</a></span></p>
  <figure>
    <div class="odl-plot">
    <span class="odl-pin is-max" aria-hidden="true">600 ms</span><span class="odl-pin is-obj" aria-hidden="true">Objective 450 ms</span>
    <svg viewBox="0 0 300 120" preserveAspectRatio="none" role="img" aria-label="p95 latency over the last 24 hours: steady near 380 ms, then rising to 547 ms in the last hour">
      <line class="odl-grid" x1="0" y1="0.5" x2="300" y2="0.5"/><line class="odl-grid" x1="0" y1="119.5" x2="300" y2="119.5"/>
      <rect class="odl-gap" x="150" y="1" width="14" height="118"/>
      <line class="odl-objective" x1="0" y1="45" x2="300" y2="45"/>
      <path class="odl-prev" d="M0 95.3 L20 98 L40 99.7 L60 100 L80 96.5 L100 92.2 L120 92 L140 93.9 L160 97.8 L180 99.9 L200 97.9 L220 96.8 L240 95.7 L260 94 L280 94.2 L300 94"/>
      <path class="odl-line" d="M0 70.9 L5 70.9 L10 74.9 L15 72.3 L20 75.9 L25 75.6 L30 74.4 L35 77.6 L40 75.1 L45 77.6 L50 75.4 L55 75.3 L60 77 L65 78.9 L70 74.1 L75 73.9 L80 75.5 L85 76.5 L90 73.3 L95 71.2 L100 73.7 L105 67.2 L110 71.1 L115 66.9 L120 65.3 L125 64.6 L130 65.3 L135 68 L140 64.1 L145 66.5 L150 67.1 M164 65.9 L170 65.9 L175 67.6 L180 71.4 L185 70.9 L190 71.2 L195 73.8 L200 74 L205 73.9 L210 77.7 L215 77.8 L220 75.7 L225 78.1 L230 78 L235 80.2 L240 79.3 L245 76.4 L250 80.2 L255 74.5 L260 75.6 L265 76.9 L270 72.4"/>
      <path class="odl-line odl-hot" d="M270 72.4 L275 66 L280 54.8 L285 50.1 L290 42.2 L295 32.6 L300 26"/>
      <line class="odl-deploy" x1="262" y1="0" x2="262" y2="120"/>
    </svg>
    <span class="odl-dep" aria-hidden="true"></span><span class="odl-end" aria-hidden="true"></span>
    </div>
    <div class="odl-axis"><span>Oct 13, 14:00</span><span>Now</span></div>
    <figcaption><span><i></i>Today</span><span><i class="odl-k-prev"></i>Previous day</span><span><i class="odl-k-obj"></i>Objective</span><span><i class="odl-k-gap"></i>No data</span><span><i class="odl-k-dep"></i>Deploy v2.41.0</span></figcaption>
  </figure>
</article>