.client-journal-header { display: grid; gap: 7px; margin: 0 8px 30px; }
.client-journal-header > span, .client-journal-groups h3 { color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-journal-header > div { display: flex; align-items: center; gap: 12px; }
.client-journal-header h2 { margin: 0; font: var(--type-drawer-title); letter-spacing: var(--type-drawer-title-tracking); text-transform: var(--type-drawer-title-transform); }
.client-journal-header button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; color: var(--client-muted); cursor: pointer; }
.client-journal-header svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.client-journal-header button:hover, .client-journal-header button:focus-visible { color: var(--client-accent); outline: 0; filter: drop-shadow(0 0 7px var(--client-accent)); }
.client-journal-header button:disabled svg { animation: client-spin 900ms linear infinite; }
.client-journal-groups { display: grid; gap: 26px; margin: 0 8px; }
.client-journal-groups section { display: grid; gap: 7px; }
.client-journal-groups h3 { margin: 0; }
.client-journal-groups ol { position: relative; display: grid; margin: 0; padding: 0; }
.client-journal-groups ol::before { content: ''; position: absolute; inset: 0 auto 0 -8px; z-index: 0; width: 1px; background: color-mix(in oklch, var(--client-border) 48%, transparent); }
.client-journal-groups li { position: relative; min-height: 58px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; }
.client-journal-time, .client-journal-groups li > div:last-child { min-width: 0; display: grid; gap: 3px; }
.client-journal-time time { color: var(--client-text); font: var(--type-data); font-variant-numeric: var(--numeric-tabular); letter-spacing: var(--type-data-tracking); text-transform: var(--type-data-transform); }
.client-journal-time span, .client-journal-groups li span { color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); overflow-wrap: anywhere; }
.client-journal-time span { text-transform: var(--type-label-transform); }
.client-journal-groups li strong { font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); }
.client-journal-groups li em { width: fit-content; color: var(--client-journal-tone); font: var(--type-label); font-style: normal; letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
.client-journal-event { --client-journal-tone: var(--client-muted); }
.client-journal-event::before { content: ''; position: absolute; inset: 15px auto auto -11.5px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--client-journal-tone); }
.client-journal-event .client-journal-time span { color: var(--client-journal-tone); }
.client-journal-event[data-event-type='connection.started'],
.client-journal-event[data-event-type='subscription.added'],
.client-journal-event[data-event-type='subscription.refreshed'],
.client-journal-event[data-event-type='failover.enabled'],
.client-journal-event[data-event-type='failover.resumed'],
.client-journal-event[data-event-type='failover.primary_recovered'],
.client-journal-event[data-event-type='failover.recovered'],
.client-journal-event[data-event-type='failover.switched'][data-target-role='primary'] { --client-journal-tone: var(--harbor-connect); }
.client-journal-event[data-event-type='failover.reserve_recovered'],
.client-journal-event[data-event-type='failover.recovered'][data-target-role='reserve'],
.client-journal-event[data-event-type='failover.switched'][data-target-role='reserve'] { --client-journal-tone: var(--harbor-gateway); }
.client-journal-event[data-event-type='failover.waiting_for_idle'],
.client-journal-event[data-event-type='failover.paused'],
.client-journal-event[data-severity='warning'] { --client-journal-tone: oklch(0.68 0.14 72); }
.client-journal-event[data-severity='error'] { --client-journal-tone: oklch(0.68 0.15 28); }
.client-journal-error, .client-journal-empty { min-height: 80px; margin: 0 8px; color: var(--client-muted); font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); }
.client-journal-error button, .client-journal-footer button { border: 0; background: transparent; color: var(--client-accent); font: var(--type-control); letter-spacing: var(--type-control-tracking); text-transform: var(--type-control-transform); cursor: pointer; }
.client-journal-skeleton { display: grid; gap: 14px; margin: 0 8px; }
.client-journal-skeleton span { height: 48px; background: color-mix(in oklch, var(--client-border) 24%, transparent); opacity: .55; }
.client-journal-footer { min-height: 72px; display: grid; place-items: center; margin: 12px 8px 0; color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); text-align: center; }
.client-journal-footer button:focus-visible, .client-journal-error button:focus-visible { outline: 2px solid var(--client-accent); outline-offset: 2px; }
@media (max-width: 560px) { .client-journal-groups li { grid-template-columns: 1fr; gap: 5px; } .client-journal-time { display: flex; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .client-journal-header button:disabled svg { animation: none; } }