
/* WIDGET WALL + AVAILABLE WIDGETS — the row controls were 34px white rounded
   SQUARES with thin grey icons, and the add chips led with a hairline plus. She
   asked for circles in pastel colours with nicer plus signs.
   Each action gets its own pastel so the four controls are told apart by colour
   as well as icon — reorder reads as one pair, hide and remove as their own. */
#page-profile .ah-mini{
  width:38px !important; height:38px !important;
  border-radius:50% !important;
  border:1px solid transparent !important;
  display:inline-grid !important; place-items:center;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
#page-profile .ah-mini svg{ width:17px; height:17px; stroke-width:2.1; }
#page-profile .ah-mini:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(36,52,71,.13); }
#page-profile .ah-mini:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#page-profile .ah-mini[disabled]{ opacity:.38; transform:none !important; box-shadow:none !important; }

/* reorder — pale sky */
#page-profile .ah-mini[data-wmove]{
  background:#E7EFF7 !important; border-color:#D3E2F0 !important;
  color:#3C5A73 !important;
}
#page-profile .ah-mini[data-wmove]:hover{ background:#DAE8F4 !important; }
/* hide — pale lavender */
#page-profile .ah-mini[data-whide]{
  background:#EFEAF8 !important; border-color:#E1D9F2 !important;
  color:#584A7A !important;
}
#page-profile .ah-mini[data-whide]:hover{ background:#E7E0F4 !important; }
/* remove — pale blush */
#page-profile .ah-mini[data-wrem]{
  background:#FBE9EC !important; border-color:#F3D6DC !important;
  color:#94465A !important;
}
#page-profile .ah-mini[data-wrem]:hover{ background:#F8DDE2 !important; }

/* AVAILABLE WIDGETS — the plus becomes a pastel sage disc inside the chip, so the
   chip reads as "add this" at a glance rather than a hairline cross */
#page-profile .ah-chip[data-wadd]{
  display:inline-flex !important; align-items:center; gap:9px !important;
  padding:7px 16px 7px 7px !important;
  min-height:44px !important;
  border-radius:999px !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#page-profile .ah-chip[data-wadd] svg{
  width:26px !important; height:26px !important;
  flex:none;
  padding:5px;
  border-radius:50%;
  background:#E4F0DE;
  color:#4E6640 !important;
  stroke-width:2.6 !important;          /* a fuller, friendlier cross */
  box-sizing:border-box;
  transition:background .16s ease, transform .16s ease;
}
#page-profile .ah-chip[data-wadd]:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(36,52,71,.10);
  border-color:#CFE0C8 !important;
}
#page-profile .ah-chip[data-wadd]:hover svg{ background:#D5E8CC; transform:rotate(90deg); }
#page-profile .ah-chip[data-wadd]:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  #page-profile .ah-mini,
  #page-profile .ah-chip[data-wadd],
  #page-profile .ah-chip[data-wadd] svg{ transition:none !important; }
  #page-profile .ah-mini:hover,
  #page-profile .ah-chip[data-wadd]:hover{ transform:none !important; }
  #page-profile .ah-chip[data-wadd]:hover svg{ transform:none !important; }
}
