/* One material for actions across public pages, the dashboard and readers.
 * Loaded after page/theme sheets in each browser layout. This registry styles
 * actions, not switches, content cards, uploads, mood scales or Feeling badges.
 * Keep sizing/layout in the owning component; add new action aliases here.
 */
body[class] :is(
  .btn, .btn-icon, .btn-ghost, .btn-action-small, .btn-upgrade-premium, .btn-cancel-premium,
  .btn-destructive-modern, .btn-premium-modern, .btn-photobook-nav,
  .vintage-btn, .vintage-btn-icon, .toolbar-btn, .ui-btn, .nav-button, .nav-control,
  .landing-auth-btn, .landing-secondary-btn, .hero-cta, .landing-plan-card__cta,
  .guest-header__cta, .guest-header__account-link, .guest-footer__cta, .experience-button,
  .auth-page-card__submit, .auth-page-card__google-button,
  .quick-write__button, .home-notebook__button, .home-notebook__submit,
  .journal-library__new-button, .spine-new-memory, .empty-action-btn, .diary-reader__button,
  .diary-entry-card__action, .diary-create-form__submit, .checkin-day-entry__edit,
  .checkin-day-entry__more-button, .checkin-form__location-button,
  .checkin-calendar__month-button, .checkin-calendar__date-submit,
  .mood-range-btn, .mood-share-button, .home-shuffle-btn,
  .tabs__tab, .filter-tab, .view-btn, .diary-view-switcher__link,
  .notification-action-btn, .notifications-mark-read-btn,
  .settings-icon-button, .north-star-icon-button, .north-star-text-button,
  .beliefs-icon-action, .beliefs-quiet-action, .beliefs-form__link-button,
  .decision-calm-add, .decision-calm-save-leave, .decision-calm-text-action,
  .planning-form__submit, .planning-form__add, .planning-form__cancel,
  .planning-modal__dismiss-button, .planning-card__edit, .planning-card__wider-button,
  .feedback-form-submit, .feedback-submit-btn, .entry-updates__submit,
  .blog-share-button, .blog-post-explore-btn, .shared-memory-pagination__btn,
  .shared-journal__read-btn, .message-page-header__button, .message-page-footer__link--cta,
  .letter-envelope__button, .letter-footer__button,
  .encryption-tool__action, .encryption-tool__copy, .encryption-tool__text-action,
  .url-data-box__action, .audio-menu__play-btn, .photobook-audio-player__btn,
  .image-fullscreen__button, .image-fullscreen__nav-button, .image-fullscreen__go-btn,
  .image-navigation__button, .image-navigation__fullscreen,
  .tiptap-toolbar__button, .tiptap-toolbar__toggle, .tiptap-link-popover__apply,
  .memory-workspace__add, .memory-workspace__add-link, .memory-editor__add-button,
  .external-link__button, .external-link-form__remove, .seq-remove-btn, .delete-page-btn,
  .security-dialog__back, .security-dialog__tertiary, .quick-note__clear,
  .dialog-shell__close, .modal-close-btn, .share-modal__close, .reminder-modal__close,
  .shortcuts-guide__close, .diary-create-modal__close, .diary-reader__close,
  .decrypt-memory-modal__close, .membership-sample-close, .membership-feedback-close,
  .message-image-zoom__close, .diary-photo-viewer__close, .planning-modal__close,
  .mobile-back-button, .admin-report-filter__submit, .admin-report-user-filters__submit,
  .admin-report-user-filters__reset
) {
  --button-tint: var(--button-surface-neutral);
  --button-ink: var(--ink-dark);
  --button-line: var(--button-border);
  background: linear-gradient(125deg, var(--dialog-key-surface), var(--control-tint, var(--button-tint)));
  color: var(--button-ink);
  border: 1px solid var(--button-line);
  border-radius: var(--radius-control);
  box-shadow: var(--button-shadow);
  font-weight: 500;
  text-transform: none;
  letter-spacing: .01em;
  text-decoration: none;
  text-shadow: none;
  background-size: auto;
  opacity: 1;
  animation: none;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;

  &:hover:where(:not(:disabled, [disabled], [aria-disabled="true"], .disabled, .blocked, .btn-loading, [aria-busy="true"])) {
    background: linear-gradient(125deg, var(--paper-base), var(--control-tint, var(--button-tint)));
    color: var(--button-ink);
    border-color: var(--button-border-hover);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-1px);
    opacity: 1;
  }

  &:is(:active, [aria-pressed="true"], [aria-current="page"], .is-active, .active, .selected, [aria-selected="true"]) {
    background: linear-gradient(125deg, var(--dialog-key-surface), var(--control-tint, var(--button-tint)));
    color: var(--button-ink);
    border-color: var(--button-border-hover);
    box-shadow: var(--button-shadow-pressed);
    transform: translateY(1px);
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus);
    outline-offset: 3px;
  }

  &:is(:disabled, [disabled], [aria-disabled="true"], .disabled, .blocked, .btn-loading) {
    opacity: .48;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
  }
  &:is(.btn-loading, [aria-busy="true"]) { cursor: wait; }

  @media (prefers-reduced-motion: reduce) {
    &, &:hover, &:active { transition: none; transform: none; }
  }
}

/* Warm gold leads; blue supports; sage marks success; coral signals loss. */
body[class] :is(
  .btn-primary, .toolbar-btn--primary, .vintage-btn--primary, .vintage-btn--encrypted,
  .btn-upgrade-premium, .btn-premium-modern, .landing-auth-btn, .hero-cta,
  .landing-plan-card__cta, .guest-header__cta, .guest-footer__cta,
  .experience-button:not(.experience-button--outline), .journal-library__new-button, .spine-new-memory,
  .quick-write__button, .home-notebook__button--write, .home-notebook__submit,
  .diary-create-form__submit, .planning-form__submit, .feedback-form-submit,
  .feedback-submit-btn, .entry-updates__submit, .message-page-header__button--primary,
  .letter-footer__button--primary, .encryption-tool__action--primary,
  .tiptap-link-popover__apply, .empty-action-btn
) { --button-tint: var(--button-surface-primary); --button-line: color-mix(in srgb, var(--feeling-gold) 42%, var(--paper-shadow)); }

body[class] :is(
  .btn-secondary, .btn-outline, .vintage-btn--secondary, .landing-secondary-btn,
  .auth-page-card__google-button, .experience-button--outline,
  .quick-write__button--secondary, .encryption-tool__action--secondary,
  .landing-plan-card__cta--essential
) { --button-tint: var(--button-surface-secondary); }

body[class] :is(.auth-page-card__submit, .btn--success, .btn--active-plan, .url-data-box__action.btn--copied) {
  --button-tint: var(--button-surface-success);
}

body[class] :is(.btn-ghost, .vintage-btn--ghost, .message-page-header__button--ghost, .letter-footer__button--ghost) {
  --button-tint: var(--paper-aged);
  box-shadow: inset 0 1px 0 var(--dialog-key-surface);
  --button-line: color-mix(in srgb, var(--paper-shadow) 75%, var(--paper-aged));
}

body[class] :is(
  .btn-destructive, .btn-destructive-modern, .btn-icon--danger, .toolbar-btn--danger,
  .settings-icon-button--danger, .diary-entry-card__action--delete,
  .seq-remove-btn, .delete-page-btn, .external-link-form__remove
) {
  --button-tint: var(--button-surface-danger);
  --button-ink: var(--danger);
  --button-line: var(--btn-destructive-border);
}
body[class] .confirmation-dialog[data-variant="danger"] .confirmation-dialog__confirm {
  --button-tint: var(--button-surface-danger);
  background: linear-gradient(125deg, var(--dialog-key-surface), var(--button-tint));
  color: var(--danger);
  border-color: var(--danger);
}
body[class] .confirmation-dialog:is([data-variant="neutral"], [data-variant="warning"]) .confirmation-dialog__confirm {
  background: linear-gradient(125deg, var(--dialog-key-surface), var(--button-surface-primary));
  color: var(--ink-dark);
}

/* Quiet feature colors carry through the main action. */
body[class] :is(.recenters-page, .recenter-editor-page) .btn-primary { --button-tint: var(--sidebar-recenter-surface); }
body[class] :is(.north-stars-page, .north-star-form) .btn-primary { --button-tint: var(--button-surface-secondary); }
body[class] :is(.beliefs-page, .beliefs-form) .btn-primary { --button-tint: color-mix(in srgb, var(--feeling-surface-lilac) 32%, var(--paper-aged)); }

/* Labels can wrap; compact icon/editor geometry stays with its component. */
body[class] :is(.btn, .vintage-btn, .toolbar-btn, .landing-auth-btn, .landing-secondary-btn,
  .hero-cta, .landing-plan-card__cta, .guest-header__cta, .guest-footer__cta,
  .experience-button, .auth-page-card__submit, .auth-page-card__google-button,
  .journal-library__new-button, .spine-new-memory, .quick-write__button, .planning-form__submit,
  .feedback-form-submit, .feedback-submit-btn, .message-page-header__button,
  .entry-updates__submit, .encryption-tool__action, .btn-photobook-nav) {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
body[class] :is(.btn-icon, .toolbar-btn--round, .vintage-btn-icon,
  .north-star-icon-button, .settings-icon-button, .beliefs-icon-action,
  .image-fullscreen__button, .image-fullscreen__nav-button, .image-navigation__button,
  .checkin-calendar__month-button, .dialog-shell__close, .modal-close-btn,
  .share-modal__close, .reminder-modal__close, .shortcuts-guide__close,
  .diary-create-modal__close, .diary-reader__close, .decrypt-memory-modal__close,
  .membership-sample-close, .membership-feedback-close, .message-image-zoom__close,
  .diary-photo-viewer__close, .planning-modal__close) {
  min-width: 44px;
  min-height: 44px;
}
body[class] .vintage-btn--encrypted::before { display: none; }

/* Selected filters keep a visible edge as well as a color change. */
body[class] :is(.mood-range-btn, .btn, .tiptap-toolbar__button, .tabs__tab, .filter-tab, .view-btn, .diary-view-switcher__link):is(.active, .is-active, .selected, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) {
  --button-tint: var(--button-surface-primary);
  border-color: var(--leather-brown);
  box-shadow: inset 0 -2px 0 var(--leather-brown);
}
@media (max-width: 768px) {
  body[class] .tiptap-toolbar__button { min-width: 44px; min-height: 44px; }
}

/* Emotion choices retain their compact layout and readable selected mark. */
body[class] .diary-create-form__emotion-icon {
  background: linear-gradient(125deg, var(--dialog-key-surface), var(--button-surface-secondary));
  border-color: var(--button-border);
  box-shadow: var(--button-shadow);
}
body[class] .diary-create-form__emotion.selected .diary-create-form__emotion-icon {
  background: linear-gradient(125deg, var(--dialog-key-surface), var(--button-surface-success));
  color: var(--ink-dark);
  border-color: var(--leather-brown);
  box-shadow: inset 0 -2px 0 var(--leather-brown);
}