/*
 * Mandate interaction polish
 *
 * This file is deliberately a finish layer, not a second component system.
 * It is linked after styles.css so the current information architecture and
 * geometry stay authoritative while motion and depth share one contract.
 */

:root {
  --motion-instant: 90ms;
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --surface-raised: 0 10px 26px rgba(22, 24, 28, 0.075),
    0 2px 6px rgba(22, 24, 28, 0.045);
  --layer-shadow: 0 20px 48px rgba(22, 24, 28, 0.16),
    0 4px 12px rgba(22, 24, 28, 0.08);

  /* Existing feature styles already consume these names. Giving them one
     definition makes old and new transitions feel like the same product. */
  --t-fast: var(--motion-fast);
  --t-medium: var(--motion-base);
  --ease: var(--ease-standard);
}

@keyframes mandate-view-enter {
  from {
    opacity: 0.01;
    transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mandate-popover-enter {
  from {
    opacity: 0.01;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mandate-layer-fade {
  from { opacity: 0.01; }
  to { opacity: 1; }
}

@keyframes mandate-drawer-enter {
  from { transform: translate3d(18px, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes mandate-sheet-enter {
  from {
    opacity: 0.01;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* A route change should register, then get out of the user's way. Sticky
   navigation and global actions sit outside .view and never travel with it. */
.view.active {
  animation: mandate-view-enter var(--motion-base) var(--ease-emphasized) backwards;
}

/* Buttons retain their existing colour system; this adds the same physical
   response to the teal legacy controls and the newer burgundy controls. */
:where(
  .primary-button,
  .secondary-button,
  .ghost-button,
  .icon-button,
  .dv2-primary,
  .dv2-secondary,
  .board-subnav-tab,
  .settings-subnav-tab,
  .lh-launch-card,
  .dv2-entry-head
) {
  transform-origin: center;
  transition-timing-function: var(--ease-standard);
}

:where(.primary-button, .icon-button, .dv2-primary),
.board-subnav-tab[aria-current="page"],
.settings-subnav-tab[aria-current="page"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:where(.secondary-button, .ghost-button, .dv2-secondary) {
  box-shadow: var(--surface-highlight);
}

:where(
  .primary-button,
  .secondary-button,
  .ghost-button,
  .icon-button,
  .dv2-primary,
  .dv2-secondary,
  .board-subnav-tab,
  .settings-subnav-tab,
  .lh-launch-card,
  .dv2-entry-head
):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translate3d(0, 0, 0) scale(0.985);
  transition-duration: var(--motion-instant);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .primary-button,
    .secondary-button,
    .ghost-button,
    .icon-button,
    .dv2-primary,
    .dv2-secondary,
    .board-subnav-tab,
    .settings-subnav-tab,
    .lh-launch-card
  ):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translate3d(0, -1px, 0);
  }

  .dv2-entry-item:hover {
    border-color: color-mix(in srgb, var(--burgundy, #7a1f2b) 24%, var(--line-strong, #c9c2b2));
    box-shadow: 0 8px 22px rgba(55, 42, 30, 0.055);
    transform: translate3d(0, -1px, 0);
  }
}

/* Focus is intentionally structural, not animated. It remains clear on both
   paper and burgundy surfaces and does not rely on a colour fill changing. */
:where(
  button,
  [role="button"],
  input,
  select,
  textarea,
  a[href]
):focus-visible {
  outline: 2px solid var(--burgundy, #7a1f2b);
  outline-offset: 2px;
}

.dv2-entry-item {
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.dv2-entry-item[data-dv2-expanded="true"] {
  box-shadow:
    var(--surface-highlight),
    0 12px 30px rgba(55, 42, 30, 0.06);
}

/* These are work surfaces, not clickable promo cards. Their depth is static
   and restrained so hierarchy improves without inventing a false affordance. */
.integration-card,
.settings-template-card,
.settings-save-bar {
  box-shadow: var(--surface-highlight), 0 2px 7px rgba(22, 24, 28, 0.035);
}

.integration-card.configured {
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--sage, #49765d) 72%, transparent),
    var(--surface-highlight),
    0 2px 7px rgba(22, 24, 28, 0.035);
}

/* A stage column is already the boundary. A second dashed card around “No
   accounts yet” adds nesting but no meaning. */
.pipeline-column .empty-state,
.pipeline-column .empty-state-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pipeline-column .empty-state-card {
  min-height: 0;
  padding: 22px 10px;
}

.pipeline-column .empty-state-card h4 {
  color: var(--ink-soft, #52606e);
  font-size: 0.82rem;
}

.pipeline-column .empty-state-card p {
  max-width: 18rem;
  color: var(--muted, #6e6a65);
  font-size: 0.72rem;
  line-height: 1.5;
}

.pipeline-column .empty-state-card .secondary-button {
  min-height: 32px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--surface, #ffffff) 55%, transparent);
  font-size: 0.72rem;
}

.pipeline-empty-stage {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px 12px;
  color: var(--muted, #6e6a65);
  text-align: center;
}

.pipeline-empty-stage::before {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage, #8c96a0) 58%, transparent);
  content: "";
}

.pipeline-empty-stage strong {
  color: var(--ink-soft, #52606e);
  font-size: 0.78rem;
}

.pipeline-empty-stage span {
  max-width: 12rem;
  font-size: 0.7rem;
  line-height: 1.45;
}

.pipeline-card {
  will-change: auto;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.board-subnav-tab[aria-current="page"],
.settings-subnav-tab[aria-current="page"] {
  transform: translate3d(0, -1px, 0);
}

/* Temporary layers now arrive from their real source: menus from the trigger,
   the pipeline drawer from the right edge, and the phone form from below. */
.topbar-menu[open] .topbar-menu-panel,
.pill-edit-menu,
.person-action-menu,
.account-popover[data-open="true"] {
  animation: mandate-popover-enter var(--motion-base) var(--ease-emphasized) backwards;
  box-shadow: var(--layer-shadow);
  transform-origin: top right;
}

.person-action-menu {
  transform-origin: var(--person-menu-notch-left, 24px) top;
}

.pipeline-drawer-backdrop {
  animation: mandate-layer-fade var(--motion-base) var(--ease-standard) backwards;
}

.pipeline-drawer {
  animation: mandate-drawer-enter var(--motion-slow) var(--ease-emphasized) backwards;
}

.settings-group:not([hidden]),
.teams-panel {
  animation: mandate-sheet-enter var(--motion-base) var(--ease-emphasized) backwards;
}

/* Installation guidance is onboarding, not a persistent working control.
   Show it on Home where it has context and quiet space; never let it cover a
   dossier source, a follow-up due date or a contact route. Returning Home
   reveals it again until the seat dismisses it. */
body:not([data-active-tab="home"]) #mandateWelcomeTip {
  display: none !important;
}

body[data-active-tab="home"] #mandateWelcomeTip {
  animation: mandate-popover-enter var(--motion-base) var(--ease-emphasized) backwards;
}

@media (max-width: 640px) {
  .view.active {
    animation-name: mandate-layer-fade;
  }

  .teams-panel {
    animation-duration: var(--motion-slow);
  }

  /* Touch interfaces get press feedback but no persistent hover elevation. */
  .dv2-entry-item,
  .pipeline-card {
    transform: none;
  }

  .pipeline-empty-stage {
    min-height: 210px;
    align-content: center;
  }
}

@media (prefers-contrast: more) {
  .integration-card,
  .settings-template-card,
  .settings-save-bar,
  .dv2-entry-item[data-dv2-expanded="true"] {
    box-shadow: none;
  }

  .pipeline-column .empty-state,
  .pipeline-column .empty-state-card {
    border-top: 1px solid currentColor;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  .topbar-menu[open] .topbar-menu-panel,
  .pill-edit-menu,
  .person-action-menu,
  .account-popover[data-open="true"],
  body[data-active-tab="home"] #mandateWelcomeTip,
  .pipeline-drawer-backdrop,
  .pipeline-drawer,
  .settings-group:not([hidden]),
  .teams-panel {
    animation: none !important;
  }

  :where(
    .primary-button,
    .secondary-button,
    .ghost-button,
    .icon-button,
    .dv2-primary,
    .dv2-secondary,
    .board-subnav-tab,
    .settings-subnav-tab,
    .lh-launch-card,
    .dv2-entry-head,
    .dv2-entry-item,
    .pipeline-card
  ) {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}