/* Winston V3 — RefreshButton. Per-card and sub-tab-header refresh control
   with a permanent "last updated HH:MM:SS ET" timestamp. */

.refresh-host {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  color: var(--ink-muted);
}

.refresh-host-subtab {
  font-size: var(--type-sm);
}

.refresh-stamp {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  white-space: nowrap;
  letter-spacing: var(--tracking-tight);
}
.refresh-stamp-empty { font-style: italic; }

.refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color    var(--motion-fast) var(--ease-out),
              color           var(--motion-fast) var(--ease-out);
  position: relative;
}
.refresh-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--ink);
}
.refresh-btn:disabled { opacity: 0.7; cursor: progress; }
.refresh-btn:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 2px;
}

.refresh-host-subtab .refresh-btn {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--type-sm);
  background: var(--ai-soft);
  border-color: var(--ai-line);
  color: var(--ai);
}
.refresh-host-subtab .refresh-btn:hover {
  background: var(--ai);
  color: var(--ink-inverse);
  border-color: var(--ai);
}

.refresh-icon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform var(--motion-fast) var(--ease-out);
}
.refresh-btn:hover .refresh-icon { transform: rotate(45deg); }

.refresh-btn.is-loading .refresh-icon {
  animation: refresh-spin 700ms linear infinite;
  transform: none;
}
.refresh-btn.is-loading:hover .refresh-icon { transform: none; }

@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.refresh-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-err);
  box-shadow: 0 0 0 2px var(--surface);
  flex-shrink: 0;
}

.refresh-btn-compact .refresh-label,
.refresh-btn-compact { padding: 0 var(--space-2); }

@media (max-width: 768px) {
  .refresh-host:not(.refresh-host-subtab) .refresh-label { display: none; }
  .refresh-host:not(.refresh-host-subtab) .refresh-btn  { padding: 0 var(--space-2); }
  .refresh-stamp { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .refresh-btn.is-loading .refresh-icon { animation-duration: 1400ms; }
  .refresh-btn:hover .refresh-icon { transform: none; }
}