/* Fixed control width keeps the header stable across status changes. */
.header .header-refresh {
  flex: 0 0 112px;
  width: 112px;
  justify-content: center;
  gap: 6px;
  padding: 5px 7px;
  transition: border-color .15s;
}
.header .header-refresh.spinning { opacity: 1; }
.header-sync-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#headerSyncLabel { font-size: 11px; line-height: 1.15; white-space: nowrap; }
#headerSyncDetail { font-size: 10px; line-height: 1.15; white-space: nowrap; color: var(--muted); }
.header .header-refresh[data-sync-tone="success"] { color: var(--ok, #26734d); border-color: currentColor; }
.header .header-refresh[data-sync-tone="warning"] { color: var(--warn, #805c18); border-color: currentColor; }
.header .header-refresh[data-sync-tone="danger"] { color: var(--err, #ae3336); border-color: currentColor; }
@media (max-width: 400px) {
  .header .header-refresh { flex-basis: 104px; width: 104px; gap: 4px; padding-inline: 4px; }
  .header.has-back .logo { display: none; }
}