/* Shared interaction states, loaded after page/theme styles.
   Brand palette: docs/DESIGN_SYSTEM.md. Preserve semantic and selected colors. */
:root {
  --action-overlay:rgba(107,0,128,.09);
  --action-press:rgba(75,0,90,.17);
  --action-focus:var(--tp-phlox,#D500FF);
  --action-primary:#6B0080;
  --action-primary-hover:#81009B;
  --action-primary-press:#4B005A;
  --field-focus-border:#a65bbb;
  --field-focus-ring:rgba(107,0,128,.10);
  --field-focus-glow:rgba(129,0,155,.08);
}
:root[data-theme=dark] {
  --action-overlay:rgba(234,208,244,.12);
  --action-press:rgba(234,208,244,.2);
  --action-focus:#dea8f0;
  --action-primary:#853a9c;
  --action-primary-hover:#9950b0;
  --action-primary-press:#723087;
  --field-focus-border:#ba85cd;
  --field-focus-ring:rgba(222,168,240,.10);
  --field-focus-glow:rgba(185,101,213,.10);
}
html body :is(button,[role=button],input[type=button],input[type=submit],input[type=reset],a.btn,a.icon-btn,.nav-link,.module-navigation a,.tabs a,.account-menu a,summary) {
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
/* An overlay works with neutral, destructive, selected and status-colored controls. */
@media (hover:hover) {
  html body :is(button,[role=button],input[type=button],input[type=submit],input[type=reset],a.btn,a.icon-btn,.nav-link,.module-navigation a,.tabs a,.account-menu a,summary):not(:disabled):not([aria-disabled=true]):hover {
    background-image:linear-gradient(var(--action-overlay),var(--action-overlay));
    transform:none;
  }
  html body :is(.btn-primary,.send-btn):not(:disabled):not([aria-disabled=true]):hover {
    background-color:var(--action-primary-hover);background-image:none;color:#fff;
  }
}
html body :is(button,[role=button],input[type=button],input[type=submit],input[type=reset],a.btn,a.icon-btn,.nav-link,.module-navigation a,.tabs a,.account-menu a,summary):not(:disabled):not([aria-disabled=true]):active {
  background-image:linear-gradient(var(--action-press),var(--action-press));
  transform:none;
}
html body :is(.btn-primary,.send-btn):not(:disabled):not([aria-disabled=true]):active {
  background-color:var(--action-primary-press);background-image:none;color:#fff;
}
html body :is(button,[role=button],input[type=button],input[type=submit],input[type=reset],a,summary):focus-visible {
  outline:3px solid var(--action-focus);outline-offset:3px;
}
html body :is(button,[role=button],input[type=button],input[type=submit],input[type=reset],a.btn,a.icon-btn):is(:disabled,[aria-disabled=true]) {
  opacity:.5;cursor:not-allowed;transform:none;filter:none;background-image:none;box-shadow:none;
}
/* Legacy hover rules must not make a disabled primary action look actionable. */
html body :is(.btn-primary,.send-btn):is(:disabled,[aria-disabled=true]) {
  background-color:var(--action-primary);color:#fff;
}
html body :is(button,[role=button],a.btn)[aria-busy=true] {cursor:progress;}

/* Quiet, stationary light follows the active writing field in every module.
   Borders and a ring remain visible; the soft glow is only supplementary. */
html body :is(input:where(:not([type]),[type=text],[type=email],[type=password],[type=search],[type=tel],[type=url],[type=number]),textarea,[contenteditable=true],[contenteditable=plaintext-only]) {
  transition:border-color .16s ease,box-shadow .16s ease;
}
html body :is(input:where(:not([type]),[type=text],[type=email],[type=password],[type=search],[type=tel],[type=url],[type=number]),textarea,[contenteditable=true],[contenteditable=plaintext-only]):focus:not(:disabled,[readonly],[aria-disabled=true],[aria-readonly=true]) {
  border-color:var(--field-focus-border);
  outline:1px solid var(--field-focus-border);
  outline-offset:0;
  box-shadow:0 0 0 3px var(--field-focus-ring),0 0 20px 2px var(--field-focus-glow);
}
/* Keep validation colors, instead of painting an invalid field purple. */
html body :is(input,textarea,[contenteditable]):is([aria-invalid=true],:user-invalid) {
  --field-focus-border:var(--tp-folly,#d93e69);
  --field-focus-ring:rgba(217,62,105,.10);
  --field-focus-glow:rgba(217,62,105,.08);
}
/* Rich editors clip their contents. An inset light stays inside the writing
   area, without illuminating the toolbar, changing HTML or adding overlays. */
html body .email-editor .ql-editor[contenteditable=true]:focus:not([aria-disabled=true],[aria-readonly=true]) {
  outline-offset:-1px;
  box-shadow:inset 0 0 0 2px var(--field-focus-ring),inset 0 0 20px 2px var(--field-focus-glow);
}
@media (prefers-reduced-motion:reduce) {
  html body :is(button,[role=button],input[type=button],input[type=submit],input[type=reset],a.btn,a.icon-btn,.nav-link,.module-navigation a,.tabs a,.account-menu a,summary) {transition:none;}
  html body :is(input,textarea,[contenteditable]) {transition:none;}
}
@media (forced-colors:active) {
  html body :is(button,[role=button],a.btn,a.icon-btn):focus-visible {outline-color:Highlight;}
  html body :is(button,[role=button],a.btn,a.icon-btn):is(:disabled,[aria-disabled=true]) {color:GrayText;opacity:1;}
  html body :is(input,textarea,[contenteditable]):focus:not(:disabled,[readonly],[aria-disabled=true],[aria-readonly=true]),
  html body .email-editor .ql-editor[contenteditable=true]:focus:not([aria-disabled=true],[aria-readonly=true]) {
    border-color:Highlight;outline:2px solid Highlight;outline-offset:-2px;box-shadow:none;
  }
}