/* ==========================================================================
   Boomi Insights — Page Patterns (1)
   Health band · Quick nav · Activity feed · Process flow
   ========================================================================== */

/* ---------- Environment health band -------------------------------------- */
.health-band {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: 13px 16px;
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.health-band__icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--bg-muted);
  color: var(--fg-secondary);
}
.health-band__icon svg { width: 18px; height: 18px; }
.health-band__main { min-width: 0; flex: 1 1 320px; }
.health-band__title { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.health-band__text { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; }
.health-band__stats { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.health-band__actions { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.health-stat { display: flex; flex-direction: column; gap: 1px; }
.health-stat__value { font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.15; }
.health-stat__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--fg-muted); font-weight: var(--fw-bold); }

.health-band--ok { border-color: var(--ok-bd); background: linear-gradient(180deg, var(--ok-bg), var(--bg-surface) 78%); }
.health-band--ok .health-band__icon { background: rgba(21, 128, 94, 0.14); color: var(--ok-fg); }
.health-band--warn { border-color: var(--warn-bd); background: linear-gradient(180deg, var(--warn-bg), var(--bg-surface) 78%); }
.health-band--warn .health-band__icon { background: rgba(176, 112, 12, 0.16); color: var(--warn-fg); }
.health-band--crit { border-color: var(--crit-bd); background: linear-gradient(180deg, var(--crit-bg), var(--bg-surface) 78%); }
.health-band--crit .health-band__icon { background: rgba(199, 54, 66, 0.14); color: var(--crit-fg); }
.health-band--preview { border-color: var(--info-bd); background: linear-gradient(180deg, var(--info-bg), var(--bg-surface) 78%); }
.health-band--preview .health-band__icon { background: rgba(38, 112, 168, 0.12); color: var(--info-fg); }

/* ---------- Quick navigation cards --------------------------------------- */
.quicknav { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.quicknav__card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: 13px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--sh-xs);
  text-align: left;
  width: 100%;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.quicknav__card:hover { border-color: var(--brand-300); box-shadow: var(--sh-md); transform: translateY(-1px); }
.quicknav__icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
}
.quicknav__icon svg { width: 17px; height: 17px; }
.quicknav__body { min-width: 0; flex: 1 1 auto; }
.quicknav__title { font-size: var(--fs-base); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.quicknav__desc { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; line-height: 1.45; }
.quicknav__meta { font-size: var(--fs-xs); color: var(--fg-faint); margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.quicknav__arrow { color: var(--fg-faint); flex: 0 0 auto; margin-top: 5px; }
.quicknav__arrow svg { width: 15px; height: 15px; }
.quicknav__card:hover .quicknav__arrow { color: var(--brand-600); }

/* ---------- Activity feed ------------------------------------------------- */
.feed { display: flex; flex-direction: column; }
.feed__item { position: relative; display: flex; gap: var(--s-5); padding-bottom: var(--s-6); }
.feed__item:last-child { padding-bottom: 0; }
.feed__rail { flex: 0 0 26px; display: flex; flex-direction: column; align-items: center; }
.feed__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-muted);
  color: var(--fg-secondary);
  flex: 0 0 auto;
  border: 1px solid var(--bd);
  z-index: 1;
}
.feed__icon svg { width: 13px; height: 13px; }
.feed__icon--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.feed__icon--warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.feed__icon--crit { background: var(--crit-bg); color: var(--crit-fg); border-color: var(--crit-bd); }
.feed__icon--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.feed__line { flex: 1 1 auto; width: 1px; background: var(--bd); margin: 3px 0 -3px; }
.feed__item:last-child .feed__line { display: none; }
.feed__body { min-width: 0; flex: 1 1 auto; padding-top: 3px; }
.feed__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.feed__title code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--brand-700); }
.feed__meta { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.feed__time { font-variant-numeric: tabular-nums; }

/* ---------- Execution exception details --------------------------------- */
.exception-message { min-width: 190px; max-width: 330px; }
.exception-message__preview { display: block; max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exception-details { margin-top: 4px; }
.exception-details summary { color: var(--brand-700); cursor: pointer; font-size: var(--fs-xs); }
.exception-details__body { max-width: min(560px, 70vw); margin-top: 8px; padding: 10px; border: 1px solid var(--bd); border-radius: var(--r-md); background: var(--bg-surface); }
.exception-details__message { max-height: 240px; margin: 0 0 10px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-sm)/1.5 var(--font-mono); }
.connector-table { min-width: 980px; }
.connector-table th,
.connector-table td { overflow: hidden; }
.connector-table col:nth-child(1) { width: 19%; }
.connector-table col:nth-child(2) { width: 21%; }
.connector-table col:nth-child(3) { width: 14%; }
.connector-table col:nth-child(4) { width: 17%; }
.connector-table col:nth-child(5) { width: 19%; }
.connector-table col:nth-child(6) { width: 10%; }
.connector-table td:nth-child(5) { overflow-wrap: anywhere; }
.connector-table td:nth-child(6) { white-space: nowrap; }
.connector-row { cursor: pointer; }
.connector-row:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.connector-row:hover { background: var(--bg-hover); }
.connector-detail-overview { margin-bottom: var(--s-5); }
.exception-details__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; font-size: var(--fs-xs); }
.exception-details__meta dt { color: var(--fg-muted); }
.exception-details__meta dd { margin: 1px 0 0; overflow-wrap: anywhere; }


/* ---------- Process flow -------------------------------------------------- */
.flow {
  display: flex;
  align-items: center;
  padding: var(--s-8) var(--s-7);
  background: var(--bg-inset);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.flow__node {
  position: relative;
  flex: 0 0 auto;
  min-width: 150px;
  max-width: 194px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.flow__node--start, .flow__node--end { background: var(--bg-subtle); }
.flow__node--start { border-color: var(--ok-bd); }
.flow__node--end { border-color: var(--brand-200); }
.flow__node--decision { border-color: var(--violet-bd); background: var(--violet-bg); }
.flow__node--error { border-color: var(--crit-bd); background: var(--crit-bg); }
.flow__node--active { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(14, 133, 149, 0.14); }
.flow__node-head { display: flex; align-items: center; gap: var(--s-3); }
.flow__node-icon {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
}
.flow__node-icon svg { width: 13px; height: 13px; }
.flow__node--decision .flow__node-icon { background: rgba(110, 86, 207, 0.14); color: #5a45b8; }
.flow__node--start .flow__node-icon { background: rgba(21, 128, 94, 0.14); color: var(--ok-fg); }
.flow__node--error .flow__node-icon { background: rgba(199, 54, 66, 0.14); color: var(--crit-fg); }
.flow__node-name { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.25; min-width: 0; }
.flow__node-type {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-bold);
  color: var(--fg-muted);
}
.flow__node-meta { font-size: var(--fs-xs); color: var(--fg-muted); border-top: 1px dashed var(--bd); padding-top: 6px; }
.flow__node-badge { position: absolute; top: -8px; right: 8px; }

.flow__link {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
}
.flow__link-line { width: 100%; height: 2px; background: var(--bd-strong); position: relative; border-radius: 2px; }
.flow__link-line::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--n-400);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.flow__link-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  background: var(--bg-inset);
  padding: 0 4px;
  white-space: nowrap;
}

.flow-branch { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; padding: var(--s-5) 0; }
.flow-branch__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: #5a45b8;
}
.flow-legend { display: flex; gap: var(--s-7); flex-wrap: wrap; margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--fg-muted); }
.flow-legend__item { display: inline-flex; align-items: center; gap: var(--s-3); }
.flow-legend__swatch { width: 12px; height: 12px; border-radius: var(--r-xs); border: 1px solid var(--bd); }

/* ---------- Runtime cards ------------------------------------------------ */
.rt-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: 14px 15px;
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.rt-card:hover { border-color: var(--brand-300); box-shadow: var(--sh-md); }
.rt-card__head { display: flex; align-items: flex-start; gap: var(--s-5); }
.rt-card__title { min-width: 0; flex: 1 1 auto; }
.rt-card__name { font-size: var(--fs-md); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.rt-card__sub { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 3px; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.rt-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.rt-metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-metric__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.rt-metric__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-bold); color: var(--fg-muted); }
.rt-metric__value { font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rt-card__foot { display: flex; align-items: center; gap: var(--s-5); border-top: 1px solid var(--bd-soft); padding-top: var(--s-5); flex-wrap: wrap; }
.rt-card__foot-item { font-size: var(--fs-xs); color: var(--fg-muted); display: inline-flex; align-items: center; gap: 4px; }
.rt-card__foot-item strong { color: var(--fg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ---------- Filter bar ---------------------------------------------------- */
.filterbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--sh-xs);
  margin-bottom: var(--s-6);
}
.filterbar__group { display: flex; align-items: center; gap: var(--s-3); }
.filterbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.filterbar--sub {
  box-shadow: none;
  background: var(--bg-subtle);
  border-radius: var(--r-lg);
  padding: 9px 12px;
  margin-bottom: 0;
}
.applied-filters {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  border-bottom: 1px solid var(--bd-soft);
  background: var(--bg-subtle);
}
.applied-filters__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-faint);
}

/* ---------- Split panel --------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 364px); gap: var(--s-6); align-items: start; }
.split__aside { position: sticky; top: calc(var(--tb-h) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-6); }

/* ---------- Expandable table row ----------------------------------------- */
.row-toggle {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--fg-muted);
  flex: 0 0 auto;
}
.row-toggle:hover { background: var(--bg-muted); color: var(--fg); }
.row-toggle svg { width: 11px; height: 11px; transition: transform var(--dur-2) var(--ease); }
.row-toggle.is-open svg { transform: rotate(90deg); }
.row-detail td {
  background: var(--bg-inset) !important;
  height: auto !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--bd) !important;
}
.row-detail__inner { display: grid; gap: var(--s-5); }
.code-block {
  margin: 0;
  padding: 11px 13px;

/* ---------- Log console --------------------------------------------------- */
.console {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.console__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 9px 14px;
  border-bottom: 1px solid var(--bd);
  background: var(--bg-subtle);
  flex-wrap: wrap;
}
.console__body {
  max-height: 62vh;
  overflow-y: auto;
  background: #fcfdfe;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.console__foot {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 7px 14px;
  border-top: 1px solid var(--bd);
  background: var(--bg-subtle);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.log-row {
  display: grid;
  grid-template-columns: 158px 62px 138px minmax(0, 1fr);
  gap: var(--s-5);
  padding: 5px 14px;
  border-bottom: 1px solid var(--bd-soft);
  align-items: start;
  transition: background var(--dur-1) var(--ease);
}
.log-row:hover { background: var(--bg-hover); }
.log-row.is-open { background: var(--bg-inset); }
.log-row--crit { background: rgba(199, 54, 66, 0.045); box-shadow: inset 3px 0 0 var(--crit); }
.log-row--warn { background: rgba(176, 112, 12, 0.05); box-shadow: inset 3px 0 0 var(--warn); }
.log-row--crit:hover, .log-row--warn:hover { background: var(--bg-hover); }
.log-time { color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); padding-top: 1px; }
.log-level {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  text-align: center;
  align-self: start;
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  border: 1px solid var(--neutral-bd);
}
.log-level--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.log-level--warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.log-level--error { background: var(--crit-bg); color: var(--crit-fg); border-color: var(--crit-bd); }
.log-level--fatal { background: var(--crit); color: #fff; border-color: var(--crit-fg); }
.log-level--debug { background: var(--bg-muted); color: var(--fg-muted); border-color: var(--bd); }
.log-level--trace { background: var(--violet-bg); color: #5a45b8; border-color: var(--violet-bd); }
.log-runtime { color: var(--fg-secondary); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; }
.log-msg { min-width: 0; color: var(--fg); overflow-wrap: anywhere; }
.log-msg mark { background: #fff2b0; color: var(--fg-strong); border-radius: 2px; padding: 0 1px; }
.log-msg__component { color: var(--brand-700); font-weight: 600; }
.log-msg__thread { color: var(--fg-faint); }
.log-stack {
  grid-column: 1 / -1;
  margin-top: var(--s-3);
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid var(--bd);
  border-left: 3px solid var(--crit);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--fg-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log-empty { padding: var(--s-11); text-align: center; color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--fs-base); }
.console__newpill {
  position: sticky;
  bottom: 10px;
  margin: 0 auto;
  display: block;
  width: max-content;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-family: var(--font-sans);
}

  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: #fbfcfe;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--fg-secondary);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   Boomi Insights — Page Patterns (2)
   Chart panels · Gauge · Donut legend · Heatmap
   ========================================================================== */

.panel-split { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.panel-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-split--wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.chart-head { display: flex; align-items: flex-start; gap: var(--s-5); flex-wrap: wrap; }
.chart-head__main { min-width: 0; flex: 1 1 auto; }
.chart-head__value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.chart-head__delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.chart-head__delta--up { color: var(--ok); }
.chart-head__delta--down { color: var(--crit); }
.chart-head__meta { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px; }

.gauge { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.gauge svg { width: 100%; max-width: 190px; height: auto; }
.gauge__value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.gauge__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-bold); color: var(--fg-muted); }

.donut-panel { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.donut-panel__chart { flex: 0 0 auto; }
.donut-panel__legend { flex: 1 1 210px; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.donut-legend-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-4); font-size: var(--fs-sm); }
.donut-legend-row__name { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.donut-legend-row__swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.donut-legend-row__value { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.donut-legend-row__pct { color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); min-width: 42px; text-align: right; }

.heatmap { display: grid; gap: 3px; }
.heatmap__row { display: grid; grid-template-columns: 152px repeat(var(--cols, 24), minmax(9px, 1fr)); gap: 3px; align-items: center; }

/* ==========================================================================
   Page Patterns (3) — Steps · Licenses · Certificates · Exceptions
   ========================================================================== */

.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: var(--s-5); padding-bottom: var(--s-5); position: relative; }
.step:last-child { padding-bottom: 0; }
.step__rail { flex: 0 0 22px; display: flex; flex-direction: column; align-items: center; }
.step__dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-muted); color: var(--fg-muted);
  border: 1px solid var(--bd);
  font-size: var(--fs-2xs); font-weight: 700;
  flex: 0 0 auto; z-index: 1;
}
.step__dot svg { width: 11px; height: 11px; }
.step__dot--done { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.step__dot--active { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }
.step__dot--failed { background: var(--crit-bg); border-color: var(--crit-bd); color: var(--crit-fg); }
.step__line { flex: 1 1 auto; width: 1px; background: var(--bd); margin: 2px 0 -2px; }
.step:last-child .step__line { display: none; }
.step__body { min-width: 0; flex: 1 1 auto; padding-top: 1px; }
.step__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.step__meta { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px; }
.step--muted .step__title { color: var(--fg-muted); font-weight: var(--fw-medium); }

.notes { display: flex; flex-direction: column; gap: var(--s-5); }
.notes__item { display: flex; gap: var(--s-4); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--fg-secondary); }
.notes__tag { flex: 0 0 auto; margin-top: 2px; }

.action-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--sh-xs);
}
.action-bar__note { margin-left: auto; font-size: var(--fs-xs); color: var(--fg-faint); display: inline-flex; align-items: center; gap: var(--s-3); }
.action-bar__note svg { width: 13px; height: 13px; }

.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s-5); }
.lic {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: 13px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}
.lic--warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.lic--crit { border-color: var(--crit-bd); background: var(--crit-bg); }
.lic__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.lic__name { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.lic__type { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 1px; }
.lic__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.lic__row { display: flex; flex-direction: column; gap: 1px; }
.lic__row dt { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--fg-muted); font-weight: var(--fw-bold); }
.lic__row dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.cert-list { display: flex; flex-direction: column; }
.cert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 104px;
  gap: var(--s-5);
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--bd-soft);
}
.cert-row:last-child { border-bottom: 0; }
.cert-row:hover { background: var(--bg-hover); }
.cert-row__name { display: flex; align-items: center; gap: var(--s-5); min-width: 0; }
.cert-row__bar { display: flex; flex-direction: column; gap: 3px; }
.cert-row__days { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.cert-row--crit .cert-row__days { color: var(--crit-fg); }
.cert-row--warn .cert-row__days { color: var(--warn-fg); }

.exc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: var(--s-5); }
.exc-card { display: flex; flex-direction: column; gap: var(--s-5); padding: 13px 14px; border: 1px solid var(--bd); border-radius: var(--r-lg); background: var(--bg-surface); }
.exc-card__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.exc-card__count { margin-left: auto; font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.exc-card__msg {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-secondary);
  background: var(--bg-inset);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-md);
  padding: 8px 10px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.exc-card__meta { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--fg-muted); }

.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.summary-strip__cell { padding: 12px 15px; border-right: 1px solid var(--bd-soft); }
.summary-strip__cell:last-child { border-right: 0; }
.summary-strip__label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--fg-muted); }
.summary-strip__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: -0.01em; }
.summary-strip__meta { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 2px; }

.heatmap__label { font-size: var(--fs-xs); color: var(--fg-secondary); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--s-4); }
.heatmap__cell { height: 17px; border-radius: var(--r-xs); background: var(--bg-muted); }
.heatmap__axis { display: grid; grid-template-columns: 152px repeat(var(--cols, 24), minmax(9px, 1fr)); gap: 3px; margin-bottom: 4px; }
.heatmap__axis span { font-size: var(--fs-2xs); color: var(--fg-faint); text-align: center; white-space: nowrap; }
.heatmap-legend { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--fg-muted); margin-top: var(--s-5); }
.heatmap-legend__scale { display: flex; gap: 2px; }
.heatmap-legend__scale i { width: 15px; height: 10px; border-radius: 2px; display: block; }