/* #117 Reduced-motion alternatives */
.rmo{
  background:var(--ax-background-default);
  border:1px solid var(--ax-border-subtle);
  border-radius:var(--ax-radius-xl);
  overflow:hidden;
  box-shadow:var(--ax-shadow-sm);
}
.rmo__head{
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
  padding:18px 20px;
  border-bottom:1px solid var(--ax-border-subtle);
  background:linear-gradient(180deg,var(--ax-background-default),var(--ax-background-page));
}
.rmo__brand{ display:flex; gap:12px; align-items:center;}
.rmo__logo{
  width:40px; height:40px; border-radius:10px;
  background:var(--ax-brand-emphasis); color:var(--ax-brand-inverted);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ax-font-mono); font-weight:700; font-size:11px;
}
.rmo__title{ font-size:14px; font-weight:600; color:var(--ax-text-heading);}
.rmo__sub{ font-size:11px; color:var(--ax-text-subtle); margin-top:2px;}
.rmo__meta{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle); text-align:right; line-height:1.55;}

.rmo__seg{
  display:flex; gap:8px; align-items:center;
  padding:10px 20px;
  background:var(--ax-background-page);
  border-bottom:1px solid var(--ax-border-subtle);
}
.rmo__seg-l{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle); margin-right:4px;}
.rmo__seg-btns{ display:flex; gap:0; border:1px solid var(--ax-border-default); border-radius:var(--ax-radius-md); overflow:hidden;}
.rmo__seg-btns button{
  padding:6px 14px; border:none; background:var(--ax-background-default);
  font-size:11px; font-weight:600; color:var(--ax-text-default); cursor:pointer;
  border-right:1px solid var(--ax-border-subtle);
}
.rmo__seg-btns button:last-child{ border-right:none;}
.rmo__seg-btns button.is-on{ background:var(--ax-text-heading); color:var(--ax-background-default);}

.rmo__matrix{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  border-bottom:1px solid var(--ax-border-subtle);
}
.rmo__matrix-h{
  display:contents;
}
.rmo__cell{
  padding:10px 14px;
  border-right:1px solid var(--ax-border-subtle);
  border-bottom:1px solid var(--ax-border-subtle);
}
.rmo__cell:nth-child(3n){ border-right:none;}
.rmo__cell.head{ background:var(--ax-background-page); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ax-text-subtle);}
.rmo__cell.head.full{ color:var(--ax-text-heading);}
.rmo__cell.head.red{ background:var(--ax-background-emphasis); color:var(--ax-text-subtle);}

.rmo__what strong{ display:block; font-size:12px; font-weight:700; color:var(--ax-text-heading);}
.rmo__what small{ display:block; font-size:10.5px; color:var(--ax-text-secondary); margin-top:2px; line-height:1.5;}
.rmo__what code{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-brand-emphasis);}

/* mini animated demos */
.rmo__demo{ display:flex; align-items:center; justify-content:center; min-height:54px;}
.rmo__pill{
  display:inline-block; padding:5px 11px;
  border-radius:999px; font-size:11px; font-weight:600;
  background:var(--ax-brand-faint); color:var(--ax-brand-emphasis);
}
.rmo__pill.fade{ animation:rmoFade 1.6s ease-in-out infinite;}
.rmo__pill.no-anim{ animation:none;}
@keyframes rmoFade{ 0%,100%{opacity:0.3;} 50%{opacity:1;}}

.rmo__bar{
  width:100%; height:8px; border-radius:999px; background:var(--ax-background-muted); overflow:hidden;
  position:relative;
}
.rmo__bar::before{
  content:""; position:absolute; inset:0 auto 0 0; width:55%;
  background:var(--ax-brand-emphasis); border-radius:999px;
  animation:rmoSlide 2s ease-in-out infinite alternate;
}
.rmo__bar.no-anim::before{ animation:none;}
@keyframes rmoSlide{ from{transform:translateX(0);} to{transform:translateX(70%);}}

.rmo__spinner{
  width:24px; height:24px; border:3px solid var(--ax-background-muted);
  border-top-color:var(--ax-brand-emphasis); border-radius:50%;
  animation:rmoSpin 0.9s linear infinite;
}
.rmo__spinner.no-anim{ animation:none; border-top-color:var(--ax-background-muted); border-style:dashed;}
@keyframes rmoSpin{ to{transform:rotate(360deg);}}

.rmo__progress-static{
  display:flex; align-items:center; gap:8px;
  font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-secondary);
}
.rmo__progress-static .dot{ width:6px; height:6px; border-radius:50%; background:var(--ax-brand-emphasis);}

.rmo__skel{
  width:80%; height:10px; border-radius:4px; background:var(--ax-background-muted);
  position:relative; overflow:hidden;
}
.rmo__skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0,color-mix(in srgb, var(--ax-background-default) 60%, transparent) 50%,transparent 100%);
  animation:rmoShimmer 1.4s linear infinite;
}
.rmo__skel.no-anim::after{ animation:none; background:none;}

@keyframes rmoShimmer{ from{transform:translateX(-100%);} to{transform:translateX(100%);}}

.rmo__toast-fade{
  padding:6px 10px; background:var(--ax-text-heading); color:var(--ax-background-default);
  font-size:10px; font-weight:600; border-radius:6px;
  animation:rmoToast 2.2s ease-in-out infinite;
}
.rmo__toast-fade.no-anim{ animation:none; opacity:1; transform:none;}
@keyframes rmoToast{
  0%{opacity:0; transform:translateY(8px);}
  20%, 80%{opacity:1; transform:translateY(0);}
  100%{opacity:0; transform:translateY(-8px);}
}

.rmo__bell{
  width:18px; height:18px; border-radius:50%;
  background:var(--ax-error-default); color:var(--ax-error-inverted);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
  animation:rmoPulse 1.4s ease-in-out infinite;
}
.rmo__bell.no-anim{ animation:none; outline:3px solid var(--ax-error-muted); outline-offset:2px;}
@keyframes rmoPulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ax-error-default) 60%, transparent);}
  50%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--ax-error-default) 0%, transparent);}
}

.rmo__static{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; background:var(--ax-background-page);
  border:1px dashed var(--ax-border-default);
  border-radius:6px;
  font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-secondary);
}
.rmo__static::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.6;}

/* trigger panel */
.rmo__trig{
  padding:14px 18px;
  background:var(--ax-background-page);
  border-bottom:1px solid var(--ax-border-subtle);
}
.rmo__trig-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.rmo__trig-row{
  background:var(--ax-background-default);
  border:1px solid var(--ax-border-subtle);
  border-radius:var(--ax-radius-md);
  padding:10px 12px;
}
.rmo__trig-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;}
.rmo__trig-n{ font-size:11px; font-weight:700; color:var(--ax-text-heading);}
.rmo__trig-d{ font-size:10px; color:var(--ax-text-secondary); line-height:1.45;}
.rmo__trig-c{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-brand-emphasis); margin-top:4px;}

.rmo__foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px;
  background:var(--ax-background-page);
}
.rmo__foot-meta{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);}
.rmo__btn{
  padding:6px 12px; border-radius:var(--ax-radius-md);
  border:1px solid var(--ax-border-default);
  background:var(--ax-background-default);
  color:var(--ax-text-default);
  font-size:12px; font-weight:600; cursor:pointer;
}
.rmo__btn.p{ background:var(--ax-text-heading); color:var(--ax-background-default); border-color:var(--ax-text-heading);}
