/* COMPOSE consolidated stylesheet: 7-interaction-states.css.
   Product-area bundle keeps runtime visual ownership traceable.
   Source sections below are retained as named ownership markers for CSS contracts. */


/* ==== Source section: css/11-hover-consistency.css ==== */

@layer states {
/* ═══════════════════════════════════════════════════════════════════════════
   HOVER CONSISTENCY
   Canonical hover visuals and hover-capability fallbacks across mouse,
   touchpad, and hover-capable pen input.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  --interactive-hover-bg: var(--fill-hover);
  --interactive-hover-fg: var(--text);
  --interactive-hover-border: var(--border-strong);
  --control-bg-hover: var(--interactive-hover-bg);
  --control-fg-hover: var(--interactive-hover-fg);
  --control-border-hover: color-mix(in srgb, var(--interactive-hover-border) 64%, var(--border));
  --header-fill-hover: var(--fill-hover);
}

[data-theme="dark"] {
  --interactive-hover-bg: var(--fill-hover);
  --interactive-hover-fg: var(--text);
  --interactive-hover-border: var(--border-strong);
  --control-bg-hover: var(--interactive-hover-bg);
  --control-fg-hover: var(--interactive-hover-fg);
  --control-border-hover: color-mix(in srgb, var(--interactive-hover-border) 64%, var(--border));
  --header-fill-hover: var(--fill-hover);
}

.topbar-brand:hover,
.topbar-brand.is-hovered,
.topbar-title-control:hover,
.topbar-title-control.is-hovered,
.topbar-wordcount:hover,
.topbar-wordcount.is-hovered {
  background: var(--header-fill-hover);
  color: var(--text-sec);
  opacity: 1;
}

.tb-style-select:hover,
.tb-style-select.is-hovered {
  background: var(--interactive-hover-bg);
  border-color: var(--border);
}

.dropdown-item:hover:not(.is-active),
.dropdown-item.is-hovered:not(.is-active) {
  background: var(--control-bg-hover);
  color: var(--control-fg-hover);
}

.dropdown-item.is-destructive:hover,
.dropdown-item.is-destructive.is-hovered {
  background: rgba(138, 48, 48, .08);
}

.btn--primary:hover,
.btn--primary.is-hovered {
  background: var(--control-primary-bg-hover);
  border-color: var(--control-primary-bg-hover);
  color: var(--control-primary-fg);
  filter: none;
  transform: translateY(var(--motion-hover-lift));
}

.btn--secondary:hover,
.btn--secondary.is-hovered {
  background: var(--control-bg-hover);
  color: var(--control-fg-hover);
}

.btn--subtle:hover,
.btn--subtle.is-hovered {
  background: var(--control-bg-hover);
  color: var(--control-fg-hover);
}

.btn--danger:hover,
.btn--danger.is-hovered,
.ui-action-btn--danger:hover,
.ui-action-btn--danger.is-hovered,
.sp-action-btn--danger:hover,
.sp-action-btn--danger.is-hovered {
  background: var(--control-danger-bg-hover);
  border-color: var(--control-danger-border);
  color: var(--control-danger-fg);
}

.ui-close:hover,
.ui-close.is-hovered,
.ui-action-btn:hover:not(.ui-action-btn--primary):not(.ui-action-btn--danger),
.ui-action-btn.is-hovered:not(.ui-action-btn--primary):not(.ui-action-btn--danger),
.ui-choice-btn:hover:not(.is-active),
.ui-choice-btn.is-hovered:not(.is-active),
.ui-chip:hover:not(.is-active),
.ui-chip.is-hovered:not(.is-active),
.ui-option-btn:hover:not(.is-active),
.ui-option-btn.is-hovered:not(.is-active),
.sp-choice-group .ui-choice-btn:hover:not(.is-active),
.sp-choice-group .ui-choice-btn.is-hovered:not(.is-active),
.sp-subnav-btn:hover:not(.is-active),
.sp-subnav-btn.is-hovered:not(.is-active),
.sp-action-btn:hover:not(.sp-action-btn--primary):not(.sp-action-btn--danger),
.sp-action-btn.is-hovered:not(.sp-action-btn--primary):not(.sp-action-btn--danger),
.hcp-remove:hover,
.hcp-remove.is-hovered,
.citation-list-item:hover,
.citation-list-item.is-hovered,
.outline-action-btn:hover:not(:disabled),
.outline-action-btn.is-hovered:not(:disabled),
.find-opt-check:hover:not(:has(input:checked)),
.find-opt-check.is-hovered:not(:has(input:checked)),
.note-edit-btn:hover,
.note-edit-btn.is-hovered {
  background: var(--control-bg-hover);
  color: var(--control-fg-hover);
}

.ProseMirror a[href].is-hovered,
.citation-ref.is-hovered {
  background: color-mix(in srgb, rgba(var(--accent-rgb), .12) 78%, transparent);
  text-decoration-thickness: 2px;
}

.sp-entity-btn:hover,
.sp-entity-btn.is-hovered {
  background: color-mix(in srgb, var(--sp-card-bg) 86%, var(--interactive-hover-bg));
  border-color: color-mix(in srgb, var(--sp-card-border) 72%, var(--interactive-hover-border));
}

.ui-action-btn--primary:hover,
.ui-action-btn--primary.is-hovered {
  background: var(--interactive-selected-bg);
  border-color: var(--interactive-selected-border);
  color: var(--interactive-selected-fg);
}

.sp-action-btn--primary:hover,
.sp-action-btn--primary.is-hovered,
.find-nav-btn--primary:hover,
.find-nav-btn--primary.is-hovered {
  background: var(--control-primary-bg-hover);
  color: var(--control-primary-fg);
}

.files-manage-doc-action--primary:hover,
.files-manage-doc-action--primary.is-hovered,
.files-manage-utility-action--primary:hover,
.files-manage-utility-action--primary.is-hovered {
  background: var(--control-primary-bg-hover);
  border-color: transparent;
  color: var(--control-primary-fg);
}

.files-manage-doc-action--danger:hover,
.files-manage-doc-action--danger.is-hovered,
.files-manage-utility-action--danger:hover,
.files-manage-utility-action--danger.is-hovered {
  background: var(--control-danger-bg-hover);
  border-color: var(--control-danger-border);
  color: var(--control-danger-fg);
}

.find-opt-check:has(input:checked):hover,
.find-opt-check:has(input:checked).is-hovered {
  background: var(--control-primary-bg);
  border-color: transparent;
  color: var(--control-primary-fg);
}

@media (any-hover: none) {
  .topbar-brand:hover:not(.is-hovered),
  .topbar-title-control:hover:not(.is-hovered),
  .tb-style-select:hover:not(.is-hovered) {
    background: transparent;
  }

  .dropdown-item:hover:not(.is-hovered):not(.is-active),
  .ui-close:hover:not(.is-hovered),
  .ui-option-btn:hover:not(.is-hovered):not(.is-active),
  .sp-subnav-btn:hover:not(.is-hovered):not(.is-active),
  .citation-list-item:hover:not(.is-hovered) {
    background: transparent;
  }

  .topbar-wordcount:hover:not(.is-hovered) {
    background: transparent;
    color: var(--text-muted);
  }

  .tb-style-select:hover:not(.is-hovered) {
    border-color: transparent;
    color: var(--text-sec);
  }

  .dropdown-item:hover:not(.is-hovered):not(.is-active) {
    color: var(--text-sec);
  }

  .ui-close:hover:not(.is-hovered) {
    color: var(--text-muted);
  }

  .ui-option-btn:hover:not(.is-hovered):not(.is-active) {
    color: var(--text-sec);
  }

  .sp-subnav-btn:hover:not(.is-hovered):not(.is-active) {
    color: var(--text-muted);
  }

  .citation-list-item:hover:not(.is-hovered) {
    color: inherit;
  }

  .dropdown-item.is-destructive:hover:not(.is-hovered) {
    background: transparent;
  }

  .btn--primary:hover:not(.is-hovered) {
    filter: none;
    transform: none;
  }

  .btn--secondary:hover:not(.is-hovered) {
    background: var(--fill-subtle);
    color: var(--text-sec);
  }

  .btn--subtle:hover:not(.is-hovered) {
    background: transparent;
    color: var(--text-sec);
  }

  .btn--danger:hover:not(.is-hovered) {
    background: var(--control-danger-bg);
  }

  .ui-action-btn:hover:not(.is-hovered):not(.ui-action-btn--primary):not(.ui-action-btn--danger),
  .ui-chip:hover:not(.is-hovered):not(.is-active),
  .find-opt-check:hover:not(.is-hovered):not(:has(input:checked)),
  .note-edit-btn:hover:not(.is-hovered) {
    background: var(--fill-muted);
    color: var(--text-sec);
  }

  .ProseMirror a[href]:hover:not(.is-hovered),
  .citation-ref:hover:not(.is-hovered) {
    background: transparent;
    text-decoration-thickness: 1.5px;
  }

  .ui-action-btn--primary:hover:not(.is-hovered) {
    background: var(--interactive-selected-bg);
    color: var(--interactive-selected-fg);
  }

  .ui-choice-group .ui-choice-btn:hover:not(.is-hovered):not(.is-active),
  .sp-choice-group .ui-choice-btn:hover:not(.is-hovered):not(.is-active) {
    background: transparent;
    color: var(--text-muted);
  }


  .sp-action-btn:hover:not(.is-hovered):not(.sp-action-btn--primary):not(.sp-action-btn--danger) {
    background: var(--fill-muted);
    color: var(--text-sec);
  }

  .hcp-remove:hover:not(.is-hovered) {
    background: transparent;
    color: var(--text-sec);
  }

  .sp-action-btn--primary:hover:not(.is-hovered),
  .find-nav-btn--primary:hover:not(.is-hovered),
  .files-manage-doc-action--primary:hover:not(.is-hovered),
  .files-manage-utility-action--primary:hover:not(.is-hovered),
  .find-opt-check:has(input:checked):hover:not(.is-hovered) {
    background: var(--control-primary-bg);
    color: var(--control-primary-fg);
  }

  .sp-action-btn--danger:hover:not(.is-hovered),
  .ui-action-btn--danger:hover:not(.is-hovered),
  .files-manage-doc-action--danger:hover:not(.is-hovered),
  .files-manage-utility-action--danger:hover:not(.is-hovered) {
    background: var(--control-danger-bg);
    color: var(--control-danger-fg);
  }

  .outline-action-btn:hover:not(.is-hovered):not(:disabled) {
    background: var(--bg-card);
  }

  :where(
    .header-action-btn,
    .btn,
    .ui-close,
    .ui-action-btn,
    .ui-choice-btn,
    .ui-chip,
    .ui-option-btn,
    .sp-subnav-btn,
    .sp-action-btn,
    .outline-action-btn,
    .find-nav-btn,
    .files-manage-doc-action,
    .files-manage-utility-action,
    .note-edit-btn
  ):hover:not(.is-hovered) {
    border-color: var(--border);
  }

  .outline-action-btn:hover:not(.is-hovered):not(:disabled) {
    border-color: var(--border-subtle);
    color: var(--text-muted);
  }

  .sp-entity-btn:hover:not(.is-hovered) {
    background: var(--sp-card-bg);
    border-color: var(--sp-card-border);
  }

  .hcp-swatch:hover:not(.is-hovered) {
    transform: none;
    box-shadow: none;
  }

  [data-tip]::after {
    display: none !important;
  }
}
}


/* ==== Source section: css/12-interaction-states.css ==== */

@layer states {
/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTION FOUNDATION
   Shared press, selected, and current-item states across input modalities.
   ═══════════════════════════════════════════════════════════════════════════ */

:where(
  .header-action-btn,
  .dropdown-item,
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .outline-action-btn,
  .find-opt-check,
  .citation-list-item,
  .hcp-swatch,
  .hcp-remove,
  .find-nav-btn,
  .files-manage-doc-action,
  .files-manage-utility-action,
  .note-edit-btn,
  .citation-ref,
  .ProseMirror a[href]
) {
  --control-selected-bg: var(--interactive-selected-bg);
  --control-selected-border: var(--interactive-selected-border);
  --control-selected-fg: var(--interactive-selected-fg);
  --control-current-bg: var(--interactive-current-bg);
  --control-current-border: var(--interactive-current-border);
}

:where(
  .header-action-btn,
  .dropdown-item,
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .outline-action-btn,
  .find-opt-check,
  .citation-list-item,
  .hcp-remove,
  .find-nav-btn,
  .files-manage-doc-action,
  .files-manage-utility-action,
  .note-edit-btn,
  .citation-ref,
  .ProseMirror a[href]
).is-pressing:not(.is-active):not([aria-pressed='true']),
.hcp-swatch.is-pressing:not(.is-active) {
  background: var(--interactive-press-bg);
  color: var(--interactive-press-fg);
  border-color: color-mix(in srgb, var(--interactive-press-bg) 40%, var(--border));
}

.btn--primary.is-pressing {
  background: var(--control-primary-bg-hover);
  color: var(--control-primary-fg);
  transform: scale(var(--interactive-press-scale));
}

.btn--secondary.is-pressing,
.btn--subtle.is-pressing,
.ui-close.is-pressing,
.ui-action-btn.is-pressing:not(.ui-action-btn--primary):not(.ui-action-btn--danger),
.ui-choice-btn.is-pressing:not(.is-active),
.ui-chip.is-pressing:not(.is-active),
.ui-option-btn.is-pressing:not(.is-active),
.sp-subnav-btn.is-pressing:not(.is-active),
.sp-entity-btn.is-pressing:not(.is-active),
.find-opt-check.is-pressing:not(:has(input:checked)),
.outline-action-btn.is-pressing:not(:disabled),
.citation-list-item.is-pressing,
.find-nav-btn.is-pressing:not(.find-nav-btn--primary),
.files-manage-doc-action.is-pressing:not(.files-manage-doc-action--primary):not(.files-manage-doc-action--danger),
.files-manage-utility-action.is-pressing:not(.files-manage-utility-action--primary):not(.files-manage-utility-action--danger),
.note-edit-btn.is-pressing {
  background: var(--interactive-press-bg);
  color: var(--interactive-press-fg);
}

.btn--danger.is-pressing,
.ui-action-btn--danger.is-pressing,
.sp-action-btn--danger.is-pressing,
.files-manage-doc-action--danger.is-pressing,
.files-manage-utility-action--danger.is-pressing,
.dropdown-item.is-destructive.is-pressing,
.hcp-remove.is-pressing {
  background: var(--control-danger-bg-hover);
  color: var(--control-danger-fg);
}

.header-action-btn.is-pressing:not(.is-active) {
  background: var(--interactive-press-bg);
  color: var(--interactive-press-fg);
  transform: scale(var(--interactive-press-scale));
}


.citation-ref.is-pressing,
.ProseMirror a[href].is-pressing {
  background: color-mix(in srgb, rgba(var(--accent-rgb), .18) 82%, transparent);
  text-decoration-thickness: 2px;
}

.dropdown-item.is-active,
.dropdown-item[aria-pressed='true'] {
  background: var(--control-selected-bg);
  color: var(--control-selected-fg);
  font-weight: 600;
}

.ui-choice-btn.is-active:not(.sp-choice-group .ui-choice-btn),
.ui-choice-btn[aria-pressed='true']:not(.sp-choice-group .ui-choice-btn),
.ui-chip.is-active,
.ui-chip[aria-pressed='true'],
.ui-option-btn.is-active,
.ui-option-btn[aria-pressed='true'] {
  background: var(--control-selected-bg);
  color: var(--control-selected-fg);
  border-color: var(--control-selected-border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--control-selected-border) 68%, transparent);
}

.find-opt-check:has(input:checked),
.find-nav-btn--primary,
.files-manage-doc-action--primary,
.files-manage-utility-action--primary,
.sp-action-btn--primary,
.ui-action-btn--primary {
  --control-selected-bg: var(--control-primary-bg);
  --control-selected-border: transparent;
  --control-selected-fg: var(--control-primary-fg);
}

}


/* ==== Source section: css/13-motion-and-hardening.css ==== */

@layer hardening {
/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL / MOTION CONSISTENCY + HARDENING
   Final interaction-layer polish: shared transitions, stronger disabled/current
   treatments, modal isolation styling, and reduced-motion fallbacks.
   ═══════════════════════════════════════════════════════════════════════════ */


:where(
  .topbar-brand,
  .topbar-title-control,
  .topbar-wordcount,
  .tb-style-select,
  .header-action-btn,
  .dropdown-item,
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .outline-action-btn,
  .find-opt-check,
  .citation-list-item,
  .hcp-swatch,
  .hcp-remove,
  .find-nav-btn,
  .files-manage-doc-action,
    .files-manage-utility-action,
  .note-edit-btn,
  .citation-ref,
  .ProseMirror a[href],
  .navigate-result-btn,
  .workspace-team-card,
  .outline-row .outline-entry,
  .modal-overlay,
  .modal
) {
  transition:
    background var(--motion-duration-interactive) var(--motion-ease-standard),
    color var(--motion-duration-interactive) var(--motion-ease-standard),
    border-color var(--motion-duration-interactive) var(--motion-ease-standard),
    box-shadow var(--motion-duration-interactive) var(--motion-ease-standard),
    opacity var(--motion-duration-interactive) var(--motion-ease-standard),
    transform var(--motion-duration-emphasized) var(--motion-ease-standard),
    filter var(--motion-duration-interactive) var(--motion-ease-standard);
}

:where(
  .dropdown-item.is-active,
  .dropdown-item[aria-pressed='true'],
  .ui-choice-btn.is-active:not(.sp-choice-group .ui-choice-btn),
  .ui-choice-btn[aria-pressed='true']:not(.sp-choice-group .ui-choice-btn),
  .ui-chip.is-active,
  .ui-chip[aria-pressed='true'],
  .ui-option-btn.is-active,
  .ui-option-btn[aria-pressed='true']
) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--control-selected-border, var(--interactive-current-border)) 72%, transparent);
}

:where(
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .outline-action-btn,
  .find-opt-check,
  .citation-list-item,
  .find-nav-btn,
  .files-manage-doc-action,
    .files-manage-utility-action,
  .note-edit-btn,
  .dropdown-item
):is(:disabled, [disabled], [aria-disabled='true']) {
  opacity: var(--interaction-disabled-opacity);
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

:where(
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .outline-action-btn,
  .find-opt-check,
  .citation-list-item,
  .find-nav-btn,
  .files-manage-doc-action,
    .files-manage-utility-action,
  .note-edit-btn,
  .dropdown-item
):is(:disabled, [disabled], [aria-disabled='true']):focus-visible {
  box-shadow: none;
}


/* Accessibility visual affordances: disabled controls remain identifiable without becoming invisible. */
:where(
  .btn,
  .ui-close,
  .ui-action-btn,
  .ui-choice-btn,
  .ui-chip,
  .ui-option-btn,
  .sp-item,
  .sp-subnav-btn,
  .sp-entity-btn,
  .sp-action-btn,
  .outline-action-btn,
  .find-opt-check,
  .citation-list-item,
  .find-nav-btn,
  .files-manage-doc-action,
    .files-manage-utility-action,
  .note-edit-btn,
  .dropdown-item
):is(:disabled, [disabled], [aria-disabled='true']) {
  color: var(--text-disabled);
}

:where(
  .btn,
  .ui-action-btn,
  .sp-action-btn,
  .files-manage-doc-action,
    .files-manage-utility-action,
  .outline-action-btn,
  .find-nav-btn
):is(:disabled, [disabled], [aria-disabled='true']) {
  border-color: color-mix(in srgb, var(--border) 64%, transparent);
}

body[data-modal-open='true'] {
  overscroll-behavior: contain;
}

body[data-modal-open='true'] #app {
  pointer-events: none;
  user-select: none;
}

body[data-modal-open='true'] .modal-overlay.is-open,
body[data-modal-open='true'] .modal-overlay.is-open * {
  pointer-events: auto;
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  :where(
    .topbar-brand,
    .topbar-title-control,
    .topbar-wordcount,
    .tb-style-select,
    .header-action-btn,
    .dropdown-item,
    .btn,
    .ui-close,
    .ui-action-btn,
    .ui-choice-btn,
    .ui-chip,
    .ui-option-btn,
    .sp-item,
    .sp-subnav-btn,
    .sp-entity-btn,
    .sp-action-btn,
    .outline-action-btn,
    .find-opt-check,
    .citation-list-item,
    .hcp-swatch,
    .hcp-remove,
    .find-nav-btn,
    .files-manage-doc-action,
    .files-manage-utility-action,
    .note-edit-btn,
    .citation-ref,
    .ProseMirror a[href],
    .navigate-result-btn,
    .workspace-team-card,
    .outline-row .outline-entry,
    .modal-overlay,
    .modal
  ) {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn--primary:hover,
  .btn--primary.is-hovered,
  .header-action-btn.is-pressing,
  .header-action-btn:hover,
  .header-action-btn.is-hovered {
    transform: none !important;
  }

  .btn--primary,
  .btn--secondary,
  .btn--subtle,
  .btn--danger {
    transition-duration: 1ms !important;
  }
}
}