/* Shared action buttons. No page-specific primary color or sizing exceptions. */
.btn, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; max-width: 100%; min-height: var(--button-height);
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--button-radius);
  background: var(--surface); color: var(--text); font-family: var(--font);
  font-size: var(--font-size-action); font-weight: 500; line-height: 1.35;
  text-align: center; text-decoration: none; overflow-wrap: anywhere;
  box-shadow: none; cursor: pointer; transform: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm { min-height: var(--button-height-small); padding: 6px 12px; }
.btn:not(:disabled):hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 600; }
.btn-primary:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 90%, var(--accent-hover-mix)); color: var(--accent-contrast); border-color: transparent; }
.btn-primary:not(:disabled):active { background: color-mix(in srgb, var(--accent) 83%, var(--accent-hover-mix)); }
.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost:not(:disabled):hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn-danger { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger:not(:disabled):hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
:is(.btn, .btn-ghost, .btn-danger):disabled,
:is(.btn, .btn-ghost, .btn-danger)[aria-disabled='true'] { opacity: .5; cursor: default; box-shadow: none; transform: none; }
:is(.btn, .btn-ghost, .btn-danger):disabled:hover { background: var(--surface); border-color: var(--border); }
.btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
:is(.btn-ghost, .btn-danger):disabled:hover { background: transparent; border-color: transparent; }
:is(.btn, .btn-ghost, .btn-danger):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:is(.btn, .btn-ghost, .btn-danger)[hidden] { display: none; }
:is(.btn, .btn-ghost, .btn-danger) > .icon { flex: none; vertical-align: middle; }
/* Compact controls share target sizes while keeping their distinct functions. */
.icon-btn, .nav-arrow, .task-more { min-width: 36px; min-height: 36px; border-radius: var(--button-radius); }
.seg-btn { min-height: 36px; }
/* Play's tactile accent is shared by all primary actions, including modals. */
[data-appearance='play'] { --button-radius: 10px; }
[data-appearance='play'] .btn-primary { box-shadow: 2px 2px 0 var(--border-strong); }
[data-appearance='play'] .btn-primary:disabled { box-shadow: none; }
@media (pointer: coarse), (max-width: 600px) {
  :root { --button-height: 44px; --button-height-small: 44px; }
  .icon-btn, .nav-arrow, .task-more { min-width: 44px; min-height: 44px; }
  .seg-btn, .picker-shortcuts button, .picker-footer button, .select-option { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-ghost, .btn-danger { transition: none; }
}
.focus-mode button, .focus-durations button,
.picker-shortcuts button, .picker-footer button { min-height: var(--button-height-small); font-size: var(--font-size-action); line-height: 1.35; border-radius: var(--button-radius); }