/* /Components/VitalsBrowser.razor.rz.scp.css */
/* Scoped CSS for VitalsBrowser. Defines the vital-color palette locally
   (medpractice has no global --cw-* tokens today). Theme-neutral —
   colors come from solid hex/hsl values that read in both light and dark
   themes via `color-mix(... var(--rz-panel-background-color))` washes.

   Custom properties live on `.vitals-page` (the component-rooted wrapper)
   instead of `:root`. Blazor scoped CSS rewrites `:root` to
   `:root[b-XXXXX]`, but the <html> element doesn't carry the scope
   attribute — so a `:root { --cw-bp: ...; }` declaration in scoped CSS
   never applies, leaving every `var(--cw-bp)` lookup unresolved
   (computed values fall through to "none" / transparent). Defining the
   palette on `.vitals-page` works because that element IS in the
   component's scope, and the variables cascade to all descendants —
   including the vital tiles + timeline + chip strip. */

/* ===================================================================
   Page-level wrapper inside the existing <RadzenCard> the parent uses.
   The new view sits between the card header (Vital Signs title + Add
   Vitals + Refresh) and the bottom of the card. Generous breathing room
   between the chip strip, the vital tiles, and the timeline. */
.vitals-page[b-dm3nl95cy7] {
    /* Per-vital identity colors */
    --cw-bp:    #d83a3a;   --cw-bp-soft:    #fce6e6;
    --cw-hr:    #e0892a;   --cw-hr-soft:    #fbe7d2;
    --cw-temp:  #d97706;   --cw-temp-soft:  #fde4c0;
    --cw-spo2:  #2da3a3;   --cw-spo2-soft:  #d8f0ef;
    --cw-hrv:   #7c3aed;   --cw-hrv-soft:   #ebe1fb;
    --cw-glu:   #c026d3;   --cw-glu-soft:   #f5d8f8;
    --cw-steps: #16a34a;   --cw-steps-soft: #d4eedb;   /* not used by medpractice but kept for parity */
    --cw-weight: #6b7280;  --cw-weight-soft: #e2e6ec;  /* calm purple-grey */
    --cw-fluid:  #0d9488;  --cw-fluid-soft:  #cdebe6;  /* teal */

    /* Layout tokens (subset of CWT's; only what we actually use here) */
    --cw-radius:    14px;
    --cw-radius-sm: 10px;
    --cw-radius-xs: 8px;
    --cw-sans:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cw-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    display: flex;
    flex-direction: column;
    gap: 22px;
}
.vitals-page__loading[b-dm3nl95cy7] {
    text-align: center;
    color: var(--rz-text-disabled-color);
    padding: 36px 0;
    font-size: 13px;
}
.vitals-page__empty[b-dm3nl95cy7] {
    text-align: center;
    color: var(--rz-text-disabled-color);
    font-size: 13px;
    padding: 36px 0;
}
.vitals-page__empty-hint[b-dm3nl95cy7] {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--rz-text-disabled-color);
}

/* === Chip strip — time-window | vital-type | view toggle ===========
   Three logical groups separated by vertical dividers. Time-window
   chips are mutually exclusive (single-select), vital-type chips are
   mutually exclusive too (single vital or "all"), Table view is a
   sibling toggle independent of the others. */
.vitals-chips[b-dm3nl95cy7] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.vitals-chip[b-dm3nl95cy7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--rz-border-color);
    background: var(--rz-panel-background-color);
    color: var(--rz-text-secondary-color);
    font-family: var(--cw-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.vitals-chip:hover[b-dm3nl95cy7] {
    border-color: var(--rz-text-color);
    color: var(--rz-text-color);
}
.vitals-chip.is-active[b-dm3nl95cy7] {
    background: var(--rz-text-color);
    color: var(--rz-panel-background-color);
    border-color: var(--rz-text-color);
}
.vitals-chip__count[b-dm3nl95cy7] {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rz-text-color) 8%, transparent);
    color: var(--rz-text-secondary-color);
    font-feature-settings: "tnum" 1;
}
.vitals-chip.is-active .vitals-chip__count[b-dm3nl95cy7] {
    background: rgba(127, 127, 127, 0.28);
    color: inherit;
}
.vitals-chips__div[b-dm3nl95cy7] {
    width: 1px;
    align-self: stretch;
    margin: 4px 4px;
    background: var(--rz-border-color);
}
[b-dm3nl95cy7] .vitals-chip .rzi {
    font-size: 13px !important;
    color: inherit !important;
}

/* === Vital cards strip ===========================================
   8 responsive tiles. Each tile carries a soft per-vital gradient
   blob in the upper-right, a small icon + uppercase name top-left,
   a 64px SVG donut ring next to the value, and a footer line with
   relative-time + bold context phrase when abnormal. */
.vital-tiles[b-dm3nl95cy7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .vital-tiles[b-dm3nl95cy7] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .vital-tiles[b-dm3nl95cy7] { grid-template-columns: 1fr; }
}

.vital-card[b-dm3nl95cy7] {
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--cw-radius);
    padding: 22px;
    height: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .15s;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vital-card:hover[b-dm3nl95cy7] {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.10);
}
.vital-card:focus-visible[b-dm3nl95cy7] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

.vital-card__grad[b-dm3nl95cy7] {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.vital-card--bp     .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-bp-soft); }
.vital-card--hr     .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-hr-soft); }
.vital-card--temp   .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-temp-soft); }
.vital-card--spo2   .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-spo2-soft); }
.vital-card--hrv    .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-hrv-soft); }
.vital-card--glu    .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-glu-soft); }
.vital-card--weight .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-weight-soft); }
.vital-card--fluid  .vital-card__grad[b-dm3nl95cy7] { background: var(--cw-fluid-soft); }

.vital-card__top[b-dm3nl95cy7] {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
}
.vital-card__icon[b-dm3nl95cy7] {
    width: 32px;
    height: 32px;
    border-radius: var(--cw-radius-xs);
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
}
.vital-card--bp     .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-bp); }
.vital-card--hr     .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-hr); }
.vital-card--temp   .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-temp); }
.vital-card--spo2   .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-spo2); }
.vital-card--hrv    .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-hrv); }
.vital-card--glu    .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-glu); }
.vital-card--weight .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-weight); }
.vital-card--fluid  .vital-card__icon[b-dm3nl95cy7] { background: var(--cw-fluid); }
[b-dm3nl95cy7] .vital-card__icon .rzi {
    font-size: 18px !important;
    color: white !important;
}
.vital-card__name[b-dm3nl95cy7] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rz-text-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vital-card__pill[b-dm3nl95cy7] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--rz-danger);
    color: var(--rz-on-danger, #fff);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
    z-index: 2;
}

.vital-card__ring-row[b-dm3nl95cy7] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.vital-card__ring[b-dm3nl95cy7] {
    width: 64px;
    height: 64px;
    position: relative;
    flex-shrink: 0;
}
.vital-card__ring svg[b-dm3nl95cy7] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.vital-card__ring circle[b-dm3nl95cy7] {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
}
.vital-card__ring-track[b-dm3nl95cy7] {
    stroke: color-mix(in srgb, var(--rz-text-color) 8%, transparent);
}
.vital-card__ring-fill[b-dm3nl95cy7] {
    transition: stroke-dasharray .6s ease-out;
}
.vital-card--bp     .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-bp-soft); }
.vital-card--bp     .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-bp); }
.vital-card--hr     .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-hr-soft); }
.vital-card--hr     .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-hr); }
.vital-card--temp   .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-temp-soft); }
.vital-card--temp   .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-temp); }
.vital-card--spo2   .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-spo2-soft); }
.vital-card--spo2   .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-spo2); }
.vital-card--hrv    .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-hrv-soft); }
.vital-card--hrv    .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-hrv); }
.vital-card--glu    .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-glu-soft); }
.vital-card--glu    .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-glu); }
.vital-card--weight .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-weight-soft); }
.vital-card--weight .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-weight); }
.vital-card--fluid  .vital-card__ring-track[b-dm3nl95cy7] { stroke: var(--cw-fluid-soft); }
.vital-card--fluid  .vital-card__ring-fill[b-dm3nl95cy7]  { stroke: var(--cw-fluid); }
.vital-card--abnormal .vital-card__ring-fill[b-dm3nl95cy7] { stroke: var(--rz-danger); }

.vital-card__ring-center[b-dm3nl95cy7] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--cw-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rz-text-secondary-color);
    font-feature-settings: "tnum" 1;
}
.vital-card--bp     .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-bp); }
.vital-card--hr     .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-hr); }
.vital-card--temp   .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-temp); }
.vital-card--spo2   .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-spo2); }
.vital-card--hrv    .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-hrv); }
.vital-card--glu    .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-glu); }
.vital-card--weight .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-weight); }
.vital-card--fluid  .vital-card__ring-center[b-dm3nl95cy7] { color: var(--cw-fluid); }
.vital-card--abnormal .vital-card__ring-center[b-dm3nl95cy7] { color: var(--rz-danger); }

.vital-card__v-block[b-dm3nl95cy7] {
    min-width: 0;
}
.vital-card__value[b-dm3nl95cy7] {
    font-family: var(--cw-sans);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--rz-text-color);
    font-feature-settings: "tnum" 1;
}
.vital-card--abnormal .vital-card__value[b-dm3nl95cy7] { color: var(--rz-danger); }
.vital-card__value .vital-card__slash[b-dm3nl95cy7] {
    color: var(--rz-text-disabled-color, var(--rz-border-color));
    font-weight: 500;
}
.vital-card__unit[b-dm3nl95cy7] {
    margin-top: 4px;
    font-size: 13px;
    color: var(--rz-text-secondary-color);
    font-weight: 500;
}
.vital-card__when[b-dm3nl95cy7] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    position: relative;
    z-index: 1;
}
.vital-card__when b[b-dm3nl95cy7] {
    color: var(--rz-text-color);
    font-weight: 600;
}
.vital-card__when-sep[b-dm3nl95cy7] {
    margin: 0 4px;
    color: var(--rz-text-disabled-color);
}
.vital-card__context[b-dm3nl95cy7] {
    color: var(--rz-text-color);
    font-weight: 600;
}
.vital-card--abnormal .vital-card__context[b-dm3nl95cy7] {
    color: var(--rz-danger);
}
.vital-card__empty[b-dm3nl95cy7] {
    font-size: 13px;
    color: var(--rz-text-disabled-color);
    font-weight: 500;
    margin-top: 8px;
}

/* === Activity timeline — vertical rail + day groups + cards ========
   Three-column row: time gutter | rail (line + colored dot) | body.
   Rail line is a per-row ::before so it stays continuous within a day
   and breaks at day separators. Day separators: bold uppercase left-
   aligned label, no heavy rule. Subtle horizontal row separator helps
   the eye scan time → card. */

.vitals-timeline[b-dm3nl95cy7] {
    list-style: none;
    margin: 0;
    max-width: 880px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vitals-timeline__day-sep[b-dm3nl95cy7] {
    list-style: none;
    padding: 28px 0 8px;
    margin: 0;
}
.vitals-timeline__day-sep:first-child[b-dm3nl95cy7] {
    padding-top: 0;
}
.vitals-timeline__day-sep-label[b-dm3nl95cy7] {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rz-text-color);
    font-feature-settings: "tnum" 1;
}

.vitals-timeline__row[b-dm3nl95cy7] {
    list-style: none;
    display: grid;
    grid-template-columns: 64px 22px 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    align-items: stretch;
    border-bottom: 1px solid color-mix(in srgb, var(--rz-text-color) 18%, transparent);
}
.vitals-timeline__row:last-of-type[b-dm3nl95cy7],
.vitals-timeline__row:has(+ .vitals-timeline__day-sep)[b-dm3nl95cy7] {
    border-bottom: none;
}

.vitals-timeline__time[b-dm3nl95cy7] {
    text-align: right;
    padding: 14px 12px 0 0;
    font-family: var(--cw-mono);
    font-feature-settings: "tnum" 1;
}
.vitals-timeline__time-clock[b-dm3nl95cy7] {
    font-size: 13px;
    color: var(--rz-text-color);
    font-weight: 600;
    line-height: 1.2;
}
.vitals-timeline__time-rel[b-dm3nl95cy7] {
    font-size: 9.5px;
    color: var(--rz-text-disabled-color);
    letter-spacing: 0.05em;
    margin-top: 1px;
}

.vitals-timeline__rail[b-dm3nl95cy7] {
    position: relative;
}
.vitals-timeline__rail[b-dm3nl95cy7]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: color-mix(in srgb, var(--rz-text-color) 22%, transparent);
    transform: translateX(-50%);
}
.vitals-timeline__rail-dot[b-dm3nl95cy7] {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--rz-text-secondary-color);
    box-shadow: 0 0 0 3px var(--rz-panel-background-color);
    z-index: 2;
}
.vitals-timeline__rail-dot--bp[b-dm3nl95cy7]     { background: var(--cw-bp); }
.vitals-timeline__rail-dot--hr[b-dm3nl95cy7]     { background: var(--cw-hr); }
.vitals-timeline__rail-dot--temp[b-dm3nl95cy7]   { background: var(--cw-temp); }
.vitals-timeline__rail-dot--spo2[b-dm3nl95cy7]   { background: var(--cw-spo2); }
.vitals-timeline__rail-dot--hrv[b-dm3nl95cy7]    { background: var(--cw-hrv); }
.vitals-timeline__rail-dot--glu[b-dm3nl95cy7]    { background: var(--cw-glu); }
.vitals-timeline__rail-dot--weight[b-dm3nl95cy7] { background: var(--cw-weight); }
.vitals-timeline__rail-dot--fluid[b-dm3nl95cy7]  { background: var(--cw-fluid); }
.vitals-timeline__rail-dot--batch[b-dm3nl95cy7]  { background: var(--rz-text-disabled-color); }
.vitals-timeline__row--crit .vitals-timeline__rail-dot[b-dm3nl95cy7] {
    background: var(--rz-danger);
    box-shadow:
        0 0 0 3px var(--rz-panel-background-color),
        0 0 0 6px color-mix(in srgb, var(--rz-danger) 28%, transparent);
}
.vitals-timeline__row--warn .vitals-timeline__rail-dot[b-dm3nl95cy7] {
    background: var(--rz-warning, var(--cw-temp));
    box-shadow:
        0 0 0 3px var(--rz-panel-background-color),
        0 0 0 6px color-mix(in srgb, var(--rz-warning, var(--cw-temp)) 24%, transparent);
}

.vitals-timeline__body[b-dm3nl95cy7] {
    padding: 8px 0 8px 14px;
    min-width: 0;
}

.vitals-timeline__event[b-dm3nl95cy7] {
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--cw-radius-sm);
    padding: 14px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.vitals-timeline__event:hover[b-dm3nl95cy7] {
    border-color: var(--rz-text-secondary-color);
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.08);
}
.vitals-timeline__event--summary[b-dm3nl95cy7] {
    cursor: default;
}
.vitals-timeline__event--summary:hover[b-dm3nl95cy7] {
    border-color: var(--rz-border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.vitals-timeline__event--crit[b-dm3nl95cy7] {
    border: 1px solid var(--rz-danger);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rz-danger) 10%, var(--rz-panel-background-color)) 0%,
        var(--rz-panel-background-color) 55%);
    box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--rz-danger) 22%, transparent);
}
.vitals-timeline__event--warn[b-dm3nl95cy7] {
    border: 1px solid color-mix(in srgb, var(--rz-warning, var(--cw-temp)) 65%, var(--rz-border-color));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rz-warning, var(--cw-temp)) 8%, var(--rz-panel-background-color)) 0%,
        var(--rz-panel-background-color) 55%);
    box-shadow: 0 3px 14px -4px color-mix(in srgb, var(--rz-warning, var(--cw-temp)) 18%, transparent);
}

.vitals-timeline__event-head[b-dm3nl95cy7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.vitals-timeline__event-name[b-dm3nl95cy7] {
    font-size: 14px;
    font-weight: 700;
    color: var(--rz-text-color);
    line-height: 1.3;
}
.vitals-timeline__event--crit .vitals-timeline__event-name[b-dm3nl95cy7] {
    color: var(--rz-danger);
}
.vitals-timeline__event-tag[b-dm3nl95cy7] {
    font-family: var(--cw-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--rz-text-disabled-color);
    text-transform: uppercase;
    flex: none;
    white-space: nowrap;
}

/* Entry card vital-line list (one row per per-vital field in the batch) */
.vitals-timeline__line[b-dm3nl95cy7] {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
}
.vitals-timeline__line + .vitals-timeline__line[b-dm3nl95cy7] {
    border-top: 1px dashed color-mix(in srgb, var(--rz-text-color) 6%, transparent);
}
.vitals-timeline__line-name[b-dm3nl95cy7] {
    color: var(--rz-text-secondary-color);
    font-weight: 500;
}
.vitals-timeline__line-val[b-dm3nl95cy7] {
    font-family: var(--cw-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--rz-text-color);
    font-feature-settings: "tnum" 1;
}
.vitals-timeline__line-val .vitals-timeline__line-unit[b-dm3nl95cy7] {
    font-size: 12px;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    margin-left: 4px;
}
.vitals-timeline__line--abnormal .vitals-timeline__line-val[b-dm3nl95cy7] { color: var(--rz-danger); }
.vitals-timeline__line-tag[b-dm3nl95cy7] {
    font-family: var(--cw-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--rz-danger);
    text-transform: uppercase;
}
.vitals-timeline__line-baseline[b-dm3nl95cy7] {
    grid-column: 2 / -1;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--rz-danger);
    font-weight: 500;
}
.vitals-timeline__event-comment[b-dm3nl95cy7] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--rz-text-color) 8%, transparent);
    font-size: 12.5px;
    font-style: italic;
    color: var(--rz-text-secondary-color);
}

/* Summary card — sparkline + range/avg */
.vitals-timeline__event--summary .vitals-timeline__event-summary[b-dm3nl95cy7] {
    display: grid;
    grid-template-columns: 1fr minmax(140px, 1.6fr);
    gap: 16px;
    /* `stretch` lets the chart column grow to the card's full height
       (the stats column drives the height with its headline + sub
       lines) instead of centering the chart at a fixed 44px and
       wasting the vertical space. */
    align-items: stretch;
    margin-top: 4px;
}
.vitals-timeline__event-value[b-dm3nl95cy7] {
    font-family: var(--cw-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--rz-text-color);
    font-feature-settings: "tnum" 1;
}
.vitals-timeline__event-unit[b-dm3nl95cy7] {
    font-size: 12px;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    margin-left: 4px;
}
.vitals-timeline__event-range[b-dm3nl95cy7] {
    margin-top: 4px;
    font-family: var(--cw-mono);
    font-size: 11.5px;
    color: var(--rz-text-secondary-color);
    font-feature-settings: "tnum" 1;
}
.vitals-timeline__sparkline[b-dm3nl95cy7] {
    width: 100%;
    /* SVG fills the plot column's flex space (the axis row sits below
       at its natural height); a small min-height keeps very-narrow
       cards readable. The ?:px floor on summary cards is set on the
       wrapper grid below so the chart never collapses. */
    flex: 1 1 auto;
    min-height: 36px;
    color: var(--rz-text-color);
    overflow: visible;
}
.vitals-timeline__event--bp     .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-bp); }
.vitals-timeline__event--hr     .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-hr); }
.vitals-timeline__event--temp   .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-temp); }
.vitals-timeline__event--spo2   .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-spo2); }
.vitals-timeline__event--hrv    .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-hrv); }
.vitals-timeline__event--glu    .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-glu); }
.vitals-timeline__event--weight .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-weight); }
.vitals-timeline__event--fluid  .vitals-timeline__sparkline[b-dm3nl95cy7] { color: var(--cw-fluid); }
.vitals-timeline__event--summary.vitals-timeline__event--warn .vitals-timeline__sparkline[b-dm3nl95cy7] {
    color: var(--rz-warning, var(--cw-temp));
}
.vitals-timeline__event--summary.vitals-timeline__event--crit .vitals-timeline__sparkline[b-dm3nl95cy7] {
    color: var(--rz-danger);
}

/* Chart wrapper — 2-column grid: y-axis labels on the left, plot on
   the right. Plot stacks the SVG above the time-axis row. The y-axis
   is positioned absolute within its column so labels can sit at exact
   percentages tied to data values, not row layout. The wrapper fills
   its summary-grid cell (height 100%), so when the stats column on
   the left is tall the chart matches it. */
.vitals-timeline__chart[b-dm3nl95cy7] {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 4px;
    min-width: 0;
    height: 100%;
    min-height: 56px;
}
.vitals-timeline__chart-y-axis[b-dm3nl95cy7] {
    position: relative;
    height: 100%;
}
.vitals-timeline__chart-y-axis > span[b-dm3nl95cy7] {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    line-height: 1;
    font-family: var(--cw-mono, ui-monospace, monospace);
    font-size: 9.5px;
    color: var(--rz-text-secondary-color);
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.vitals-timeline__chart-plot[b-dm3nl95cy7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* SVG inside `flex: 1` (above), axis row at natural height —
       together they fill the chart-wrapper height granted by the
       summary grid's `align-items: stretch`. */
    height: 100%;
}
.vitals-timeline__chart-axis[b-dm3nl95cy7] {
    font-family: var(--cw-mono);
    font-size: 9.5px;
    line-height: 1;
    color: var(--rz-text-secondary-color);
    font-feature-settings: "tnum" 1;
}
.vitals-timeline__chart-axis--ends[b-dm3nl95cy7] {
    display: flex;
    justify-content: space-between;
    padding: 0 1px;
}
.vitals-timeline__chart-axis--per-bar[b-dm3nl95cy7] {
    display: grid;
    text-align: center;
}
.vitals-timeline__chart-axis--per-bar > span[b-dm3nl95cy7] {
    overflow: hidden;
    text-overflow: clip;
}
/* Bars override the sparkline color — semantic up/down (success/
   danger) carries the meaning, not the per-vital tint. */
.vitals-timeline__sparkline--bars[b-dm3nl95cy7] {
    color: var(--rz-text-secondary-color);
}