/* Interaction layer for the working space. Editorial landing is untouched. */
#app > .shell {
  --ec-edge: rgba(25,44,78,.23);
  --ec-edge-active: rgba(48,79,143,.5);
}
#app > .shell :is(.panel,.card,.path-card,.stat,.question,.practice-icon,.pv-study-card,.co-study-card,.wf-rule,.wf-family,.verb-row) {
  border-color: var(--ec-edge);
}
#app > .shell :is(.practice-icon,.nav-icon,.brand-mark) {
  box-shadow: inset 0 0 0 1px #14274c26;
}
#app > .shell :is(.practice-icon,.nav-icon) svg {
  filter: drop-shadow(0 1px 1px #07182b26);
}
/* White secondary actions get an edge without turning the label into an outline. */
#app > .shell .btn.secondary {
  border-color: #243b633d;
  box-shadow: 0 1px 2px #0b1d3510;
}
#app > .shell :is(.path-card,.practice-card,.account-class-card,.desk-work) {
  box-shadow: 0 7px 22px #0b1d3514,0 1px 3px #0b1d3510;
  transition: transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease;
}
#app > .shell :is(.btn,.practice-icon,.nav-icon svg,.sky-node svg) {
  transition: transform 150ms ease,box-shadow 150ms ease,border-color 150ms ease,background-color 150ms ease;
}
/* Focus is visible without requiring a mouse. No scaling of reading/form panels. */
#app > .shell :is(.path-card,.practice-card,.account-class-card,.desk-work):focus-within {
  border-color: var(--ec-edge-active);
  box-shadow: 0 9px 26px #122b4d21;
}
#app > .shell .btn:focus-visible {
  outline: 3px solid #739aff;
  outline-offset: 4px;
}
@media(hover:hover) and (pointer:fine) {
  #app > .shell :is(.path-card,.practice-card,.account-class-card,.desk-work):has(a[href],button:enabled):not(.future):hover {
    transform: translateY(-3px);
    border-color: var(--ec-edge-active);
    box-shadow: 0 13px 28px #0b1d3526,0 2px 5px #0b1d3512;
  }
  #app > .shell .practice-card:hover .practice-icon {
    transform: translateY(-2px) scale(1.045);
    box-shadow: inset 0 0 0 1px #254f8b40,0 5px 11px #183b6b1c;
  }
  #app > .shell .nav a:hover .nav-icon svg { transform: translateY(-1px) scale(1.06); }
  #app > .shell .sky-node:hover svg { transform: translateY(-2px) scale(1.07); }
  #app > .shell .btn:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px #0b1d351c;
  }
}
/* Older styles also had unrestricted :hover; neutralise their lift on touch. */
@media(hover:none),(pointer:coarse) {
  #app > .shell :is(.path-card,.practice-card,.account-class-card,.desk-work):hover {
    transform: none;
    box-shadow: 0 7px 22px #0b1d3514,0 1px 3px #0b1d3510;
  }
  #app > .shell .btn:hover { transform: none; }
}
#app > .public-site:not(.landing-editorial) .account-gate {
  border-color: #192c4e3b;
}
/* Touch feedback doesn't depend on hover; only an actual control presses in. */
#app > .shell .btn:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 1px 2px #0b1d3510;
  transition-duration: 90ms;
}
#app > .shell .sky-node:active svg { transform: scale(.94); }
/* Translate is independent of hover's transform; the animation never captures
   the final transform. JS marks only route cards, not exercises or feedback. */
@keyframes ec-card-enter {
  from { opacity: .65; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
#app > .shell .ec-card-enter {
  animation: ec-card-enter 210ms ease-out both;
  animation-delay: var(--ec-enter-delay,0ms);
}
@media(prefers-reduced-motion:reduce) {
  #app > .shell :is(.path-card,.practice-card,.account-class-card,.desk-work,.btn,.practice-icon,.nav-icon svg,.sky-node svg) {
    transition: none !important;
  }
  #app > .shell .ec-card-enter { animation: none !important; }
  #app > .shell :is(.path-card,.practice-card,.account-class-card,.desk-work,.btn,.practice-icon,.nav-icon svg,.sky-node svg):is(:hover,:active),
  #app > .shell :is(.practice-card:hover .practice-icon,.nav a:hover .nav-icon svg,.sky-node:hover svg,.sky-node:active svg) {
    transform: none !important;
  }
}