/* Painel MG — estilos compartilhados dos componentes.
   Indicador ancorado: uma única peça (.indicator) desliza até o item sob o cursor
   (ou até o item atual/selecionado) usando CSS Anchor Positioning. */
:root{
  --dur: 220ms;                         /* duração do deslize */
  --ease: cubic-bezier(.2,.8,.2,1);     /* sai rápido, assenta devagar */
}

/* 1. Bento: grade de cartões. Regra base, como foi definida. */
.bento{position:relative;anchor-scope:--a;list-style:none;margin:0;padding:0}
.bento li{position:relative}
.bento li article{position:relative;z-index:1}
.bento {
  li:hover article { anchor-name: --a; }
  .indicator {
    position-anchor: --a;
    inset: anchor(inside);
    transition: inset var(--dur) var(--ease);
  }
}
.bento .indicator{position:absolute;z-index:2;pointer-events:none;margin:-5px;border:2px solid var(--brand,#0d6b66);border-radius:calc(var(--radius-lg,16px) + 5px);opacity:0;transition:inset var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.bento:has(li:hover) .indicator{opacity:1}
.bento li:has(article:focus-visible) article{anchor-name:--a}
.bento:has(article:focus-visible) .indicator{opacity:1}

/* 2. Track: a mesma regra para listas de itens (navegação, abas, linhas).
   O indicador fica ATRÁS dos itens e assenta no item atual quando ninguém está sob o cursor. */
.track{position:relative;anchor-scope:--a}
.track [data-item]{position:relative;z-index:1}
.track {
  [data-item]:hover { anchor-name: --a; }
  &:not(:has([data-item]:hover)) :is([aria-current="page"],[aria-pressed="true"],[aria-selected="true"]) { anchor-name: --a; }
  .indicator {
    position-anchor: --a;
    inset: anchor(inside);
    transition: inset var(--dur) var(--ease);
  }
}
.track .indicator{position:absolute;z-index:0;pointer-events:none;background:var(--surface-2,#e2e7e6);border-radius:var(--radius-md,10px)}
.track:not(:has([data-item]:hover)):not(:has(:is([aria-current="page"],[aria-pressed="true"],[aria-selected="true"]))) .indicator{opacity:0}
/* variantes */
.track.on-ink .indicator{background:var(--ink-inverse,#10201e);border-radius:var(--radius-pill,999px)}  /* SegmentedControl: a pílula escura É o indicador */
.track.rows .indicator{background:var(--surface-0,#f1f4f3);border-radius:0}                 /* linhas de tabela e de lista */
.track.rows [aria-selected="true"]{background:var(--brand-tint,#d3e9e6)}

/* Movimento reduzido: o indicador salta sem deslizar. */
@media (prefers-reduced-motion: reduce){
  .bento .indicator,.track .indicator{transition:none}
}

/* Navegadores sem Anchor Positioning: some o indicador, cada item pinta o próprio fundo. */
@supports not (anchor-name: --a){
  .bento .indicator,.track .indicator{display:none}
  .bento li:hover article{outline:2px solid var(--brand,#0d6b66);outline-offset:3px}
  .track [data-item]:hover{background:var(--surface-2,#e2e7e6)}
  .track [aria-current="page"]{background:var(--surface-2,#e2e7e6)}
  .track.on-ink [aria-pressed="true"]{background:var(--ink-inverse,#10201e)}
  .track.rows [data-item]:hover{background:var(--surface-0,#f1f4f3)}
  .track.rows [aria-selected="true"]{background:var(--brand-tint,#d3e9e6)}
}