/* ===== System Page — scoped overrides (visual-only) ================= */
/* Load this AFTER your main /Guardians/css/style.css on system.html   */

/* Center the CTA row and give even spacing */
.cta-container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

/* Tighter spacing so the info panel is nearer the tabs */
.tabstrip{
  margin-top: .35rem;          /* closer to the page title */
  margin-bottom: .45rem;       /* closer to the info panel */
}

/* Visual cue: add a small down arrow to each tab */
.tabstrip .tab::after{
  content: " ⬇️";
  opacity: .95;
  font-size: .95em;
}

/* Stronger active tab to signal change */
.tabstrip .tab[aria-selected="true"]{
  border-color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 18px rgba(224,208,143,.22);
}

/* Subtle reveal animation when the panel swaps */
#info-panel.reveal{ animation: panel-reveal .24s ease both; }
@keyframes panel-reveal{
  from{ opacity:0; transform: translateY(.35rem); }
  to  { opacity:1; transform: none; }
}