/* ============================================================
   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 18px; margin:0 0 18px; padding:14px 48px 14px 16px;
  background:var(--surface); border:1px solid var(--accent); border-left-width:4px; border-radius:12px;}
.arrive-note .arrive-body{flex:1 1 280px; display:flex; flex-direction:column; gap:3px; font-size:14px; line-height:1.5; color:var(--text-dim);}
.arrive-note .arrive-body strong{color:var(--text); font-size:15px;}
.arrive-note .arrive-actions{display:flex; flex-wrap:wrap; gap:8px;}
.arrive-note .arrive-x{position:absolute; right:8px; top:8px; width:32px; height:32px; border:0; border-radius:50%; background:transparent;
  color:var(--text-dim); font-size:16px; cursor:pointer;}
.arrive-note .arrive-x:hover{background:rgba(127,127,127,.18);}