/* Shared Top Chips (Filters / Account / Demo / Reset)
   Single source of truth — matches settings-page button aesthetic.
*/

.topchip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:.55rem 1.1rem;
  border-radius:10px;
  border:1px solid var(--line, rgba(255,255,255,.068));
  background:rgba(255,255,255,.04);
  color:var(--muted, #8b99ad);
  font:600 var(--fs-sm, .82rem)/1 var(--font-sans, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  cursor:pointer;
  white-space:nowrap;
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease,
             border-color .2s ease, color .2s ease, filter .2s ease;
  will-change:transform;
}

.topchip:hover:not(:disabled){
  color:var(--ink, #e9eef6);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.1);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.22);
}

.topchip:active:not(:disabled){
  transform:translateY(0);
}

.topchip:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(90,142,199,.35), 0 6px 18px rgba(90,142,199,.2);
}

.topchip:disabled{
  opacity:.55;
  cursor:default;
  box-shadow:none;
}

/* Size variant */
.topchip--sm{
  padding:.4rem .8rem;
  font-size:calc(var(--fs-sm, .82rem) - .1rem);
}

/* Primary (matches button.primary gradient CTA) */
.topchip--primary{
  background:linear-gradient(135deg, var(--accentA, #5a8ec7), rgba(90,142,199,.7));
  border:none;
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 16px rgba(90,142,199,.15);
}

.topchip--primary:hover:not(:disabled){
  background:linear-gradient(135deg, var(--accentA, #5a8ec7), rgba(90,142,199,.7));
  color:#fff;
  border-color:transparent;
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(90,142,199,.25);
  filter:brightness(1.06);
}

.topchip--primary:active:not(:disabled){
  filter:brightness(.96);
}

/* Active / selected state */
.topchip--active{
  background:rgba(90,142,199,.15);
  border-color:rgba(90,142,199,.6);
  color:var(--accentA, #5a8ec7);
}

/* Configure variant */
.topchip--configure .material-symbols-rounded{
  font-size:14px; line-height:1; vertical-align:middle;
}
.topchip--configure:hover{
  background:color-mix(in srgb, var(--accentA) 15%, transparent);
  border-color:color-mix(in srgb, var(--accentA) 40%, transparent);
}

/* Responsive */
@media (max-width:1100px){
  .topchip{ padding:.45rem .85rem; }
}
@media (max-width:640px){
  .topchip{ padding:.4rem .7rem; }
}

/* Light theme */
body.theme-light .topchip{
  background:#e2e8f0;
  color:#0b162c;
  border-color:rgba(0,0,0,.08);
}