/* ============================================================
   21-migrate.css — the bar on commandforge.app that says the app has moved
   (js/migrate.js showLegacyNotice).
   ============================================================ */
.moved-note{position:sticky; top:0; z-index:70; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px;
  padding:10px 44px 10px 16px; background:var(--accent); color:var(--on-accent); font-size:14px; font-weight:600; text-align:center;}
.moved-note .moved-go{color:var(--on-accent); text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}
.moved-note .moved-x{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:0; border-radius:50%;
  background:transparent; color:var(--on-accent); font-size:16px; cursor:pointer;}
.moved-note .moved-x:hover{background:rgba(0,0,0,.12);}

/* the notice on the start page of commandarium.app (js/migrate.js showArrivalNotice) */
.arrive-note{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 18px; padding:12px 44px 12px 16px;
  background:linear-gradient(180deg, var(--accent-soft), transparent 80%), var(--surface); border:1px solid var(--accent); border-radius:var(--r3);}
.arrive-note .arrive-body{flex:1 1 300px; display:flex; flex-direction:column; gap:2px; font-size:13.5px; line-height:1.45; color:var(--text-dim);}
.arrive-note .arrive-body strong{color:var(--text); font-size:14.5px;}
.arrive-note .arrive-actions{display:flex; flex-wrap:wrap; gap:8px;}
.arrive-note .arrive-actions .btn{min-height:32px; padding:6px 14px; font-size:13.5px; white-space:nowrap;}
@media (pointer:coarse){ .arrive-note .arrive-actions .btn{min-height:36px;} }
.arrive-note .arrive-x{position:absolute; right:6px; top:6px; width:28px; height:28px; border:0; border-radius:50%; background:transparent;
  color:var(--text-dim); font-size:13px; line-height:1; cursor:pointer;}
@media(max-width:960px){
  .arrive-note{padding:12px 40px 12px 14px;}
  .arrive-note .arrive-actions{flex:1 1 100%; flex-wrap:nowrap;}
  .arrive-note .arrive-actions .btn{flex:1 1 auto; min-width:0; justify-content:center; padding:7px 10px; font-size:13px;}
}
.arrive-note .arrive-x:hover{background:rgba(127,127,127,.18);}