.journal-heading, .journal-tabs, .journal-event-title {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .55rem .9rem;
}
.journal-heading { margin-bottom: .85rem; }
.journal-eyebrow { color: var(--accent); font-size: .71rem; font-weight: 750; letter-spacing: .13em; }
.journal-tabs { justify-content: flex-start; gap: .4rem; padding: .5rem; margin-bottom: 1rem; }
.journal-tabs button { background: transparent; color: var(--muted); border-color: transparent; }
.journal-tabs button[aria-pressed="true"] { background: #21423e; color: var(--text); border-color: #397470; }
.journal-message { font-size: .87rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.journal-message:empty { display: none; }
.journal-message.danger-text { color: var(--danger); }
.journal-caption { margin: .65rem 0; font-size: .82rem; }
.journal-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-bottom: .9rem; }
.journal-counts:empty { display: none; }
.journal-stat { display: grid; justify-self: stretch; gap: .15rem; text-align: start; padding: .7rem .85rem; }
.journal-stat strong { font-size: 1.55rem; line-height: 1.15; }
.journal-stat span { font-size: .83rem; color: var(--muted); }
.journal-stat.pending strong, .journal-attention { color: var(--warning); }
.journal-stat.ok strong { color: var(--success); }
.journal-stat.alert strong { color: var(--danger); }
.journal-stat[aria-pressed="true"] { border-color: #397470; background: #1a322e; }
.journal-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: .85rem; align-items: start; }
.journal-panel { padding: clamp(.7rem, 2vw, 1.05rem); min-width: 0; }
.journal-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, .55fr); gap: .55rem; }
.journal-filters label { font-size: .8rem; color: var(--muted); }
.journal-table-scroll { max-height: 44rem; overflow: auto; scrollbar-color: #42635d #141d1b; }
.journal-table { width: 100%; table-layout: fixed; border-spacing: 0; font-size: .84rem; }
.journal-table th { position: sticky; z-index: 1; top: 0; color: var(--muted); background: var(--surface); font-weight: 650; text-align: left; }
.journal-table th:first-child { width: 46%; }
.journal-table th:nth-child(2) { width: 28%; }
.journal-table :is(th, td) { padding: .48rem .32rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.journal-table td:first-child { padding-inline: 0; }
.journal-operation { width: 100%; display: grid; gap: .16rem; text-align: left; padding: .4rem .5rem; border-color: transparent; background: transparent; }
.journal-operation[aria-pressed="true"] { border-color: #397470; background: #1a322e; }
.journal-operation span { color: var(--muted); font-size: .73rem; }
.journal-mono { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.journal-time { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
#journal .pill { display: inline-block; }
.journal-inspector h2:focus { outline: 2px solid var(--accent); outline-offset: .16rem; }
.journal-detail-body:not(:empty), .journal-snapshot { margin-top: .65rem; }
.journal-phase { padding: .65rem .75rem; border-radius: .4rem; border: 1px solid var(--line); background: var(--raised); }
.journal-phase p { font-size: .87rem; margin: .45rem 0 0; }
.journal-phase h3 { overflow-wrap: anywhere; }
.journal-data { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: .25rem .6rem; font-size: .81rem; margin: .75rem 0 1rem; }
.journal-data dt { color: var(--muted); }
.journal-data dd { margin: 0; overflow-wrap: anywhere; }
.journal-timeline { display: grid; gap: .45rem; list-style: none; margin: .45rem 0 0; padding: 0; }
.journal-event { border-left: 2px solid #397470; border-radius: .2rem; background: #141d1b; padding: .5rem .65rem; }
.journal-event-title { gap: .15rem .6rem; font-size: .85rem; }
.journal-event p { font-size: .79rem; margin: .22rem 0 0; overflow-wrap: anywhere; }
.journal-event button { margin-top: .4rem; }
.journal-event-detail { white-space: pre-wrap; }
.journal-snapshot { border-top: 1px solid var(--line); padding-top: .65rem; }
.journal-snapshot .journal-message { margin-top: .5rem; }
.journal-records, .journal-snapshot-cards { display: grid; gap: .5rem; margin: .45rem 0 .8rem; }
.journal-record { background: var(--raised); border: 1px solid var(--line); border-radius: .45rem; padding: .65rem .8rem; overflow-wrap: anywhere; }
.journal-record p { font-size: .84rem; margin: .2rem 0 0; }
.journal-items { font-size: .82rem; margin: .35rem 0; }

@media (max-width: 900px) {
  .journal-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .journal-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-filters { grid-template-columns: minmax(0, 1fr); }
  .journal-tabs button { min-height: 2.1rem; font-size: .82rem; padding: .25rem .45rem; }
  .journal-table :is(th, td), .journal-operation { padding-inline: .22rem; }
  .journal-table { font-size: .77rem; }
  #journal .pill { font-size: .69rem; }
}