/* ========================================================================
   ASSISTENTE / GLOBAL MOTION SYSTEM v4 · single source of truth for 19–26
   Add data-motion="dock|card|hero|popover" to future components, or
   register selectors once via assistenteMotion.register(selector, preset).
   Adapted from the project's macOS UI kit, Apple design talks and Motion docs.
   All effects opt out under reduced motion. No idle loops, no moving layout.
   ======================================================================== */
:root{
  --motion-instant:90ms;
  --motion-fast:155ms;
  --motion-ui:225ms;
  --motion-panel:290ms;
  --motion-page:335ms;
  --motion-theme:380ms;
  --motion-standard:cubic-bezier(.22,.75,.24,1);
  --motion-spring:cubic-bezier(.18,1.28,.36,1);
  --motion-exit:cubic-bezier(.4,0,1,1);
  --motion-card-rise:-4px;
}
/* Animations are interaction-driven. No global animation reset on *.
   This keeps new modules animatable without overriding every keyframe. */
.ambient-bg,.ambient-aurora,.ambient-stars,.ambient-stars-extra,.ambient-stars-sparkle,
.ambient-ghosts span, .admin-sync-dot, .chat-unread-badge,
.ambient-sun,.ambient-moon,body::before,
.home-emblem,.home-kicker,.home-view h1,.home-sub,
.home-actions,.home-people-search,.home-grid,.home-card,
.home-v2 .bob-orb,.home-v2 .bob-msg.swap,
.app-header .brand,.app-header .brand-sub,.app-header .nav button,
.app-header .header-actions > *, .module-btn.active::after,
.theme-option{
  animation:none!important;
}
/* The core owns modal open/close once. Prevent old staggered admin
   animations from competing with its anchored WAAPI geometry. */
#modal.open .admin-command-header,
#modal.open .admin-sync-notice,
#modal.open .admin-nav,
#modal.open .admin-dock,
#modal.open .admin-view-hero,
#modal.open .admin-main > div:not(.admin-dock):not(.admin-view-hero){
  animation:none!important;
}
#homeView.home-enter *,#homeView.home-enter-play *{
  animation:none!important;
}
/* Base interactions: colors/tint and transform only, no reflowing geometry. */
html.motion-v4 body :is(button,[role="button"],.theme-option,.rx-command-option){
  transition:background-color var(--motion-ui) var(--motion-standard),
    border-color var(--motion-ui) var(--motion-standard),
    color var(--motion-ui) var(--motion-standard),
    box-shadow var(--motion-ui) var(--motion-standard),
    opacity var(--motion-fast) var(--motion-standard),
    transform var(--motion-ui) var(--motion-standard);
}

/* #20–21 · Dock physics: cursor proximity is computed by the shared JS.
   These are the ONLY items receiving proximity magnification. */
:root:root body .app-header .module-nav > [data-motion="dock"],
:root:root body .app-header .header-actions [data-motion="dock"]{
  transform:translate3d(0,var(--motion-lift,0px),0)
    scale(var(--motion-scale,1))!important;
  transform-origin:center 65%;
  transition:transform 240ms var(--motion-spring),
    background-color var(--motion-ui) var(--motion-standard),
    box-shadow var(--motion-ui) var(--motion-standard),
    color var(--motion-ui) var(--motion-standard)!important;
  will-change:auto;
}
:root:root body #utilityDock :is(#bobTab,#miniCalcTab,#chatTab)[data-motion="dock"]{
  transform:translate3d(0,var(--motion-lift,0px),0)
    scale(var(--motion-scale,1))!important;
  transform-origin:50% 80%;
  transition:transform 240ms var(--motion-spring),
    background-color var(--motion-ui) var(--motion-standard),
    box-shadow var(--motion-ui) var(--motion-standard)!important;
}
:root:root body .app-header .module-nav > [data-motion="dock"][data-motion-pressed],
:root:root body .app-header .header-actions [data-motion="dock"][data-motion-pressed],
:root:root body #utilityDock :is(#bobTab,#miniCalcTab,#chatTab)[data-motion-pressed]{
  transform:translate3d(0,1px,0) scale(.96)!important;
  transition-duration:105ms!important;
}
:root:root body [data-motion="dock"]:focus-visible{
  z-index:4;
  outline-offset:3px;
}

/* #22 · One shared active indicator. Nav gets an optical pill; secondary
   tab groups get a low-profile underline. Never display:none on the host. */
:root:root body .motion-indicator-host{
  position:relative;
  isolation:isolate;
}
:root:root body .motion-indicator-host > .motion-tab-indicator{
  display:block!important;
  position:absolute;
  pointer-events:none;
  z-index:0;
  left:0;
  bottom:2px;
  height:2px;
  width:0;
  border:0;
  border-radius:999px;
  background:var(--r26-accent,var(--blue,#4669a2));
  opacity:.82;
  box-shadow:none;
  transform:translate3d(0,0,0);
  transition:
    transform var(--motion-panel) var(--motion-spring),
    width var(--motion-panel) var(--motion-spring),
    opacity var(--motion-fast) var(--motion-standard)!important;
}
:root:root body .app-header .module-nav.motion-indicator-host > .motion-tab-indicator{
  inset-block:3px;
  bottom:3px;
  height:auto;
  border:1px solid color-mix(in srgb,var(--r26-line) 78%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--r26-surface) 87%,transparent);
  box-shadow:0 2px 10px rgba(0,0,0,.055),inset 0 1px 0 rgba(255,255,255,.12);
  opacity:1;
}
:root:root body .motion-indicator-host > .motion-tab-indicator.is-hidden{opacity:0!important}
:root:root body .app-header .module-nav.motion-indicator-host > .module-btn{
  position:relative;
  z-index:1;
}
:root:root body .app-header .module-nav.motion-indicator-host > .module-btn.active{
  background:transparent!important;
  box-shadow:none!important;
  color:var(--r26-accent)!important;
}
html[data-theme="glass"].motion-v4 body .app-header .module-nav.motion-indicator-host > .motion-tab-indicator{
  background:linear-gradient(135deg,rgba(255,255,255,.43),rgba(224,212,238,.38))!important;
  border-color:rgba(255,255,255,.45)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 4px 13px rgba(28,22,45,.12)!important;
}

/* #23 · Opt-in interactive cards, new dynamic cards inherit automatically. */
:root:root body [data-motion="card"]{
  transition:transform var(--motion-panel) var(--motion-spring),
    box-shadow var(--motion-panel) var(--motion-standard),
    border-color var(--motion-ui) var(--motion-standard),
    background-color var(--motion-ui) var(--motion-standard)!important;
}
@media(hover:hover) and (pointer:fine){
  :root:root body [data-motion="card"]:hover{
    transform:translate3d(0,var(--motion-card-rise),0)!important;
    box-shadow:var(--r26-shadow-md,0 12px 30px rgba(0,0,0,.13))!important;
    border-color:color-mix(in srgb,var(--r26-accent) 21%,var(--r26-line))!important;
  }
  :root:root body [data-motion="card"]:hover :is(
    .rx-action-icon,.admin-item-entity-icon,.directory-icon,
    .kb-card-icon,.cardicon,.card-icon,.control-command-icon
  ){
    transform:translate3d(0,-2px,0) scale(1.045);
  }
}
:root:root body [data-motion="card"][data-motion-pressed]{
  transform:translate3d(0,-1px,0) scale(.98)!important;
  transition-duration:110ms!important;
}
:root:root body [data-motion="card"] :is(
  .rx-action-icon,.admin-item-entity-icon,.directory-icon,
  .kb-card-icon,.cardicon,.card-icon,.control-command-icon
){
  transition:transform var(--motion-panel) var(--motion-spring)!important;
}
html[data-theme="glass"].motion-v4 body [data-motion="card"]:hover{
  box-shadow:var(--r26-shadow-md,0 12px 30px rgba(0,0,0,.13)),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}
/* Default buttons don't enlarge like Dock items. A gentle pressed state
   remains available for actions (not fields or paragraphs). */
:root body :is(button,[role="button"]):active:not(:disabled):not([data-motion="dock"]):not([data-motion="card"]){
  transform:scale(.977);
}

/* #25 · Editorial hero symbols: base -5deg is inherited from Aurora.
   Movement is a separate semantic preset rather than a per-view patch. */
:root:root body [data-motion="hero"]{
  transform:rotate(-5deg) translate3d(0,0,0) scale(1)!important;
  transform-origin:50% 55%;
  transition:transform 335ms var(--motion-spring),
    box-shadow var(--motion-panel) var(--motion-standard),
    filter var(--motion-panel) var(--motion-standard)!important;
}
@media(hover:hover) and (pointer:fine){
  :root:root body :is(.directory-hero,.workspace-overview-inner,.kb-hero,.profile-interface-nav,.control-overview-hero):hover [data-motion="hero"],
  :root:root body [data-motion="hero"]:hover{
    transform:rotate(-7.5deg) translate3d(0,-3px,0) scale(1.055)!important;
    filter:brightness(1.035);
    box-shadow:0 12px 26px rgba(25,30,45,.10),inset 0 1px 0 rgba(255,255,255,.27)!important;
  }
}

/* #19 · Modal and popover states (existing core WAAPI owns open/close). */
:root:root body :is(.modal,.grerj-create-modal,.rx-command-palette){
  transition:opacity var(--motion-fast) var(--motion-standard)!important;
}
:root:root body :is(.modal .panel,.grerj-create-card,.rx-command-dialog,
 .mini-calc-panel,.chat-panel,.bob-panel,.profile-hover-card,.avatar-preview-popover){
  transition:transform var(--motion-panel) var(--motion-spring),
    opacity var(--motion-ui) var(--motion-standard)!important;
}
:root:root body [data-motion="popover"]{
  transition:transform var(--motion-panel) var(--motion-spring),
    opacity var(--motion-panel) var(--motion-standard),
    box-shadow var(--motion-panel) var(--motion-standard)!important;
  transform-origin:top right;
}
:root:root body .theme-control.menu-open .theme-menu[data-motion="popover"]{
  transform:translate3d(0,0,0) scale(1)!important;
}
:root:root body .rx-command-option{
  transition:background-color var(--motion-fast) var(--motion-standard),
    transform var(--motion-fast) var(--motion-standard)!important;
}
:root:root body .rx-command-option.active{transform:translate3d(3px,0,0)}

/* #24 · WAAPI drives route entrances; contents are interactive immediately.
   Supplemental legacy entrances remain finite, not idle/continuous. */
.admin-view-enter{animation:motionPanelIn var(--motion-ui) var(--motion-spring) both!important}
.card.card-enter,.cats button.cat-enter{
  animation:motionItemIn var(--motion-ui) var(--motion-spring) both!important;
}
.card.card-enter:nth-child(2),.cats button.cat-enter:nth-child(2){animation-delay:23ms!important}
.card.card-enter:nth-child(3),.cats button.cat-enter:nth-child(3){animation-delay:46ms!important}
.card.card-enter:nth-child(n+4),.cats button.cat-enter:nth-child(n+4){animation-delay:64ms!important}
.chat-message,.bob-message{animation:motionMessageIn 190ms var(--motion-spring) both!important}
.copy.done,.grerj-result.ok,.summary-state.ok,.status-island.success .status-icon,
.admin-item.admin-selected-pop,.favorite-ribbon.is-latched{
  animation:motionSuccess var(--motion-ui) var(--motion-spring) both!important;
}
.grerj-row.flash-ok,.tax-card.flash-ok{
  animation:motionSoftFlash 260ms var(--motion-standard) both!important;
}
.bob-typing .bob-dot{animation:motionTypingDot 900ms ease-in-out infinite!important}
.bob-typing .bob-dot:nth-child(2){animation-delay:110ms!important}
.bob-typing .bob-dot:nth-child(3){animation-delay:220ms!important}
.status-hub.working .icon,.status-island.working .status-icon{animation:motionSpin 800ms linear infinite!important}
.rx-command-palette.open .rx-command-dialog{
  animation:motionPaletteIn var(--motion-panel) var(--motion-spring) both!important;
}

/* Studio Motion 2.0 · Block A composition contract.
   Each route owns ONE canvas. A hidden sibling is never a paint surface,
   even against the legacy grid/flex !important selectors in styles.css.
   This is route visibility, not masking with overflow or z-index patches. */
:root:root body > :is(
  #homeView,#workspaceOverview,main.shell.rx-module-workspace,
  #guidesView,#libraryView,#muralView,#directoryView
)[hidden]{
  display:none!important;
}

/* Core owns route WAAPI, and disables legacy card/list entrances only while
   changing top-level modules. Filtering and typing never activate this class. */
html.motion-v4.motion-route-active :is(
  .card.card-enter,.cats button.cat-enter,.section-fade
){
  animation:none!important;
}

/* #26 · A brief old-environment wash, not a flash-white layer.
   The active controls stay above the theme data swap; no interaction blocked. */
html.motion-v4 body .motion-theme-wash{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2147483000;
  background:transparent;
  will-change:opacity;
}
html.motion-v4.motion-theme-changing body :is(
  .app-header,.directory-toolbar,.directory-hero,.theme-menu,
  .rx-panel,.grerj-hero,.kb-hero,.modal .panel,.rx-action
){
  transition:background-color var(--motion-theme) var(--motion-standard),
    border-color var(--motion-theme) var(--motion-standard),
    color var(--motion-theme) var(--motion-standard),
    box-shadow var(--motion-theme) var(--motion-standard)!important;
}
#themeTransitionVeil{display:none!important}

/* Feedback shared across copy, save and failures. */
.toast.error{background:color-mix(in srgb,#b42318 12%,var(--panel-strong,#fff));border-color:color-mix(in srgb,#b42318 58%,transparent);color:color-mix(in srgb,#b42318 88%,var(--v3-text,#17233a))}
.toast.warning{background:color-mix(in srgb,#b7791f 12%,var(--panel-strong,#fff));border-color:color-mix(in srgb,#b7791f 55%,transparent);color:color-mix(in srgb,#8a5a12 90%,var(--v3-text,#17233a))}
.toast.info{background:color-mix(in srgb,var(--v3-accent,#2f5597) 10%,var(--panel-strong,#fff));border-color:color-mix(in srgb,var(--v3-accent,#2f5597) 45%,transparent);color:var(--v3-text,#17233a)}
.ui-invalid{border-color:#d84c4c!important;box-shadow:0 0 0 3px rgba(216,76,76,.14)!important;outline:none!important}
[contenteditable].ui-invalid{border-color:#d84c4c!important;box-shadow:0 0 0 3px rgba(216,76,76,.14)!important}
.mural-editor-error.show,.login-error:not(:empty){display:block}
.mural-editor-error:not(:empty),.login-error:not(:empty){padding:8px 10px;border:1px solid rgba(216,76,76,.22);border-radius:9px;background:rgba(216,76,76,.07)}
.status-hub,.status-island{display:none!important}
#toast{animation:none!important}

/* Decorative balance rain is generated only on deliberate user action. */
html.motion-v4 .b-rain{contain:layout paint;isolation:isolate}
html.motion-v4 .b-drop{
  animation:motionInitialRain var(--rain-duration,2.6s) linear var(--rain-delay,0s) 1 forwards!important;
}
@keyframes motionPanelIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes motionItemIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes motionPaletteIn{from{opacity:0;transform:translate3d(0,-8px,0) scale(.988)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes motionSuccess{0%{transform:scale(.965);opacity:.8}55%{transform:scale(1.025);opacity:1}100%{transform:scale(1)}}
@keyframes motionSoftFlash{0%{transform:translateX(0)}50%{transform:translateX(2px)}100%{transform:translateX(0)}}
@keyframes motionMessageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes motionTypingDot{0%,70%,100%{opacity:.38;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}
@keyframes motionSpin{to{transform:rotate(360deg)}}
@keyframes motionInitialRain{0%{transform:translate3d(0,-8vh,0) rotate(0deg) scale(.82);opacity:0}10%{opacity:.94}84%{opacity:.92}100%{transform:translate3d(var(--drift),112vh,0) rotate(var(--spin)) scale(1.06);opacity:0}}

/* Accessibility: reduce movement but preserve visible active/focus states.
   No hover-only feedback on coarse pointers, no page blur for reduced motion. */
@media(prefers-reduced-motion:reduce){
  html.motion-v4 *,html.motion-v4 *::before,html.motion-v4 *::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  :root:root body .app-header .module-nav > [data-motion="dock"],
  :root:root body .app-header .header-actions [data-motion="dock"],
  :root:root body #utilityDock :is(#bobTab,#miniCalcTab,#chatTab)[data-motion="dock"],
  :root:root body [data-motion="card"],
  :root:root body [data-motion="hero"]{
    transform:none!important;filter:none!important;
  }
  :root:root body .app-header .module-nav.motion-indicator-host > .motion-tab-indicator,
  :root:root body .motion-indicator-host > .motion-tab-indicator{display:none!important}
  :root:root body .app-header .module-nav.motion-indicator-host > .module-btn.active{
    background:var(--r26-surface)!important;
    box-shadow:var(--r26-shadow-xs)!important;
  }
  html.motion-v4 .b-drop{display:none!important}
}


/* StudioLoader · one global top-level portal, not a route or modal child.
   This layer exists ONLY while a real operation is pending or reporting an
   error. The dimensional glass fallback does not rely on backdrop-filter. */
:root body > .studio-loader[hidden]{display:none!important}
:root body > .studio-loader{
  position:fixed;
  inset:0;
  z-index:2147483100; /* Dedicated application-level busy dialog, above existing modals. */
  isolation:isolate;
  display:grid;
  place-items:center;
  padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(18,27,47,.57);
  -webkit-backdrop-filter:blur(15px) saturate(1.16);
  backdrop-filter:blur(15px) saturate(1.16);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms var(--motion-standard);
}
:root body > .studio-loader.is-visible{
  opacity:1;
  pointer-events:auto;
}
:root body > .studio-loader .studio-loader-card{
  width:min(354px,100%);
  max-height:min(540px,calc(100dvh - 40px));
  overflow-y:auto;
  text-align:center;
  padding:32px 28px 24px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:29px;
  color:var(--v3-text,#1b2a43);
  background:rgba(245,249,255,.91);
  background:color-mix(in srgb,var(--r26-surface,var(--panel-strong,#f9fbff)) 88%,transparent);
  box-shadow:0 32px 92px rgba(8,19,42,.29),inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);
  backdrop-filter:blur(26px) saturate(1.25);
}
:root body > .studio-loader .studio-loader-emblem{
  width:108px;height:108px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:34px;
  color:var(--v3-accent,#325b98);
  background:linear-gradient(155deg,rgba(255,255,255,.83),rgba(192,211,240,.26));
  border:1px solid rgba(103,133,175,.16);
  box-shadow:0 15px 34px rgba(30,65,105,.09),inset 0 1px 0 rgba(255,255,255,.7);
}
:root body > .studio-loader .studio-loader-mark{
  width:80px;height:80px;overflow:visible;
  color:inherit;
  transform-origin:50% 50%;
}
:root body > .studio-loader.is-visible .studio-loader-mark{
  animation:studioLoaderMaterialize 560ms cubic-bezier(.18,.9,.27,1) both;
}
:root body > .studio-loader .studio-loader-beam{
  transform-box:view-box;transform-origin:24px 16px;
}
:root body > .studio-loader .studio-loader-left{
  transform-box:view-box;transform-origin:15px 16px;
}
:root body > .studio-loader .studio-loader-right{
  transform-box:view-box;transform-origin:33px 16px;
}
:root body > .studio-loader[data-state="working"] .studio-loader-beam{
  animation:studioLoaderBalance 2650ms ease-in-out 550ms infinite;
}
:root body > .studio-loader[data-state="working"] .studio-loader-left{
  animation:studioLoaderPanLeft 2650ms ease-in-out 550ms infinite;
}
:root body > .studio-loader[data-state="working"] .studio-loader-right{
  animation:studioLoaderPanRight 2650ms ease-in-out 550ms infinite;
}
:root body > .studio-loader[data-state="error"] .studio-loader-emblem{
  color:#b43b4b;background:rgba(180,59,75,.08);
}
:root body > .studio-loader .studio-loader-eyebrow{
  margin:14px 0 7px;font-size:10px;line-height:1.4;
  font-weight:750;letter-spacing:.15em;text-transform:uppercase;
  color:var(--v3-muted,#69758a);
}
:root body > .studio-loader .studio-loader-title{
  margin:0;font-size:22px;line-height:1.2;
  font-weight:750;letter-spacing:-.035em;color:inherit;
}
:root body > .studio-loader .studio-loader-message,
:root body > .studio-loader .studio-loader-alert{
  margin:12px auto 0;max-width:285px;min-height:38px;
  color:var(--v3-muted,#55667f);font-size:13px;line-height:1.55;
  overflow-wrap:anywhere;
}
:root body > .studio-loader .studio-loader-alert{color:#a72e3d}
:root body > .studio-loader .studio-loader-dismiss{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:20px;min-height:39px;
  padding:9px 17px;
  border-radius:999px;border:1px solid rgba(80,110,160,.23);
  background:rgba(255,255,255,.58);
  color:var(--v3-text,#253a59);
  font:inherit;font-size:12px;font-weight:650;
  cursor:pointer;
}
:root body > .studio-loader .studio-loader-dismiss:focus-visible{
  outline:3px solid var(--v3-accent,#3267ac);
  outline-offset:3px;
}
@keyframes studioLoaderMaterialize{
  0%{opacity:0;transform:translateY(7px) rotate(-13deg) scale(.9)}
  65%{opacity:1;transform:translateY(-1px) rotate(2.4deg) scale(1.025)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@keyframes studioLoaderBalance{
  0%,100%{transform:rotate(0)}
  24%{transform:rotate(-2.8deg)}
  53%{transform:rotate(1.75deg)}
  76%{transform:rotate(-.6deg)}
}
@keyframes studioLoaderPanLeft{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(3.1deg)}
  54%{transform:rotate(-2deg)}
  78%{transform:rotate(.5deg)}
}
@keyframes studioLoaderPanRight{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(2.7deg)}
  54%{transform:rotate(-1.8deg)}
  78%{transform:rotate(.4deg)}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root body > .studio-loader{background:rgba(16,25,45,.83)}
  :root body > .studio-loader .studio-loader-card{background:#f3f6fa}
}
@media(max-width:520px){
  :root body > .studio-loader .studio-loader-card{
    width:min(330px,100%);padding:25px 20px 21px;border-radius:25px;
  }
  :root body > .studio-loader .studio-loader-emblem{
    width:92px;height:92px;border-radius:28px;
  }
  :root body > .studio-loader .studio-loader-mark{width:71px;height:71px}
}
@media(prefers-reduced-motion:reduce){
  :root body > .studio-loader{transition:none!important;backdrop-filter:none;-webkit-backdrop-filter:none}
  :root body > .studio-loader.is-visible .studio-loader-mark,
  :root body > .studio-loader[data-state="working"] :is(.studio-loader-beam,.studio-loader-left,.studio-loader-right){
    animation:none!important;transform:none!important;
  }
}