.button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .57rem .95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-950);
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
  font-size: var(--control-font-size);
  font-weight: var(--weight-semibold);
  line-height: var(--control-line-height);
  text-decoration: none;
}
.button:hover { border-color: var(--brand-600); color: var(--brand-800); background: var(--brand-50); }
.button.primary { border-color: var(--brand-700); color: white; background: var(--brand-700); }
.button.primary:hover { border-color: var(--brand-800); color: white; background: var(--brand-800); }
.button.danger { border-color: var(--danger-border); color: var(--danger-700); background: var(--danger-100); }
.button.danger:hover { border-color: var(--danger-700); color: var(--danger-700); background: var(--surface-danger); }
.button.primary.danger { border-color: var(--danger-700); color: white; background: var(--danger-700); }
.button.primary.danger:hover { border-color: var(--danger-700); color: white; background: var(--danger-800); }
.button.small { min-height: var(--control-height-sm); padding: .35rem .65rem; font-size: var(--text-sm); }
.button-row, .task-primary-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.task-primary-actions { margin-top: var(--space-5); }
.task-primary-actions form { margin: 0; }

.surface {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.surface.raised { box-shadow: var(--shadow-sm); }
.surface.inset { background: var(--surface-soft); }
.surface.large { border-radius: var(--radius-lg); }
.surface.dashed { border-style: dashed; border-color: var(--line-strong); }
.surface.pad { padding: var(--space-4); }
.surface.pad-large { padding: var(--space-5); }

.badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: .38rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .62rem;
  color: var(--ink-650);
  background: var(--surface-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge.compact { padding: .2rem .48rem; font-size: var(--text-2xs); }
.badge.status-complete { border-color: var(--success-border); color: var(--success-800); background: var(--success-100); }
.badge.status-queued, .badge.status-running { border-color: var(--info-border); color: var(--info-700); background: var(--info-100); }
.badge.status-needs_input, .badge.status-paused, .badge.status-draft { border-color: var(--warning-border); color: var(--warning-800); background: var(--warning-100); }
.badge.status-failed { border-color: var(--danger-border); color: var(--danger-700); background: var(--danger-100); }
.badge.status-locked { opacity: .72; }
.badge.status-edited { border-color: var(--success-border); color: var(--success-800); background: var(--success-100); }
.status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }

.notice, .error-summary, .setup-review-warning {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.notice h3, .error-summary h3 { margin-bottom: .25rem; }
.notice-list { margin: var(--space-2) 0 0; padding-left: 1.25rem; }
.notice-list li + li { margin-top: var(--space-1); }
.notice-success { border-color: var(--success-border); background: var(--success-100); }
.notice-info { border-color: var(--info-border); background: var(--surface-info); }
.notice-warning, .setup-review-warning { border-color: var(--warning-border); background: var(--surface-warning); }
.notice-danger, .error-summary { border-color: var(--danger-border); background: var(--surface-danger); }
.error-summary:focus { box-shadow: var(--focus-ring); outline: none; }
.error-summary ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.action-menu { position: relative; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + .45rem);
  right: 0;
  display: grid;
  min-width: 12rem;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.action-menu-panel a, .action-menu-panel button { display: block; width: 100%; padding: .65rem .75rem; border: 0; border-radius: var(--radius-sm); color: var(--ink-950); background: transparent; font-weight: var(--weight-medium); text-align: left; text-decoration: none; }
.action-menu-panel a:hover, .action-menu-panel button:hover { background: var(--surface-muted); }
.action-menu-panel .danger-text { color: var(--danger-700); }
.confirm-dialog { width: min(30rem, calc(100% - 2rem)); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.confirm-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
.confirm-dialog .dialog-actions { justify-content: flex-end; margin-top: var(--space-5); }
.empty-state { padding: 3.5rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-650); text-align: center; }
.empty-state h3 { color: var(--ink-950); }
@media (pointer: coarse) {
  .button.small,
  summary,
  .action-menu-panel a,
  .action-menu-panel button {
    min-height: var(--control-height);
  }
}