/* Shared motion and the cabinet's bottom notification.

   Loaded last, so it can only add: one timing scale, one easing, and the small
   number of components that move. Nothing here uses a global transition, and
   every rule is either a component's own property or an explicit keyframe, so
   unrelated surfaces (tables, forms, the editor) keep their current feel. */

:root {
  --motion-micro: 160ms;      /* knobs, chips, hover-level feedback */
  --motion-disclosure: 240ms; /* panels, menus, disclosures, step bodies */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
}

/* 1. Theme change ------------------------------------------------ */
html[data-theme] body {
  transition: background-color var(--motion-disclosure) var(--ease-standard),
              color var(--motion-disclosure) var(--ease-standard);
}
html[data-theme] .sidebar,
html[data-theme] .topbar,
html[data-theme] .social-card,
html[data-theme] .tgw-card {
  transition: background-color var(--motion-disclosure) var(--ease-standard),
              border-color var(--motion-disclosure) var(--ease-standard);
}

/* 2. Switch knob ------------------------------------------------- */
/* While the client animates a saved state in place, the CSS transition steps
   aside so one move is visible instead of two competing ones. */
.publication-switch.is-animating-state .switch-track,
.publication-switch.is-animating-state .switch-knob {
  transition: none;
}
.publication-switch .switch-track {
  transition: background-color var(--motion-micro) var(--ease-standard),
              border-color var(--motion-micro) var(--ease-standard);
}
.publication-switch .switch-knob {
  transition: transform var(--motion-micro) var(--ease-standard);
}
.publication-switch .switch-control[aria-busy="true"] .switch-knob {
  opacity: .65;
}

/* 3. Enter animation for panels, tabs and step bodies ------------- */
@keyframes motion-rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  [role="tabpanel"].is-active,
  .tgw-step-body,
  .vk-wizard-step-body {
    animation: motion-rise var(--motion-disclosure) var(--ease-standard) both;
  }
}

/* 4. Bottom notification ----------------------------------------- */
.toast-host {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: grid; gap: 10px; width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 10px 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 16px 34px #12171429;
  pointer-events: auto;
}
.toast-mark {
  display: grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); color: var(--muted);
  font-size: 13px; font-weight: 700;
}
.toast.is-ok .toast-mark { background: #eef6ef; color: #3f6b46; }
.toast.is-warn .toast-mark { background: #fdf1e3; color: #9a5b15; }
.toast.is-error .toast-mark { background: #fdf0eb; color: #a8492a; }
.toast-body { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.toast-title { font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.toast-detail { font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.toast-close {
  flex-shrink: 0; width: 32px; height: 32px; margin: -4px 0 0 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.toast-close:hover { background: var(--surface-2); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: motion-rise var(--motion-micro) var(--ease-standard) both; }
}
html[data-theme="dark"] .toast.is-ok .toast-mark { background: var(--surface-3); color: #a8d48f; }
html[data-theme="dark"] .toast.is-warn .toast-mark { background: var(--surface-3); color: #e8b978; }
html[data-theme="dark"] .toast.is-error .toast-mark { background: var(--accent-soft); color: var(--accent-text); }

@media (max-width: 620px) {
  .toast-host { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* 5. Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body,
  html[data-theme] .sidebar,
  html[data-theme] .topbar,
  html[data-theme] .social-card,
  html[data-theme] .tgw-card,
  .publication-switch .switch-track,
  .publication-switch .switch-knob {
    transition: none;
  }
  [role="tabpanel"].is-active,
  .tgw-step-body,
  .vk-wizard-step-body,
  .toast {
    animation: none;
  }
}

/* 6. Cross-document navigation ----------------------------------- */
/* Progressive and CSS-only: the browser animates a same-origin navigation
   between two documents that both opt in. Nothing is intercepted, no page is
   rebuilt and an unsupported browser simply navigates as before. Reduced motion
   turns it off, and a same-document interaction never triggers it. */
@view-transition {
  navigation: auto;
}
@keyframes motion-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-view-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: motion-view-out 140ms var(--ease-standard) both;
  }
  ::view-transition-new(root) {
    animation: motion-view-in 220ms var(--ease-standard) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(root) {
    animation: none;
  }
}

/* The fallback line used when a page has no toast host at all. */
.toast-fallback {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: 360px;
  margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 16px 34px #12171429;
}