/* tc-tool-nav.css — unified cross-tool navigation (Concept G)
   Loaded on /editor, /image-studio, /grab, /creator-tools.
   Sits immediately after the brand on the LEFT side of the header so it
   never competes with page-specific actions on the RIGHT side. */

.tc-tool-nav{
  display:flex;
  gap:4px;
  align-items:center;
  margin-left:20px;
  /* Consume remaining horizontal space so page-specific controls on the
     right side stay pinned to the right edge, regardless of whether the
     parent header uses justify-content: space-between or flex-start. */
  margin-right:auto;
}

.tc-tool-tab{
  padding:7px 13px 7px 11px;
  border-radius:999px;
  color:#7B8A9A;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  letter-spacing:-0.005em;
  transition:color .15s,background .15s,box-shadow .25s;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:inherit;
  white-space:nowrap;
  line-height:1;
}

.tc-tool-tab svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  opacity:0.75;
  transition:opacity .15s;
}

.tc-tool-tab:hover{
  color:#22d3ee;
  background:rgba(34,211,238,0.10);
  text-decoration:none;
}
.tc-tool-tab:hover svg{
  opacity:1;
}

/* Active = the tab whose URL matches the current page.
   Marked via aria-current="page" — semantic + styleable. */
.tc-tool-tab[aria-current="page"]{
  background:#22d3ee;
  color:#000;
  font-weight:700;
}
.tc-tool-tab[aria-current="page"] svg{
  opacity:1;
}
.tc-tool-tab[aria-current="page"]:hover{
  background:#22d3ee;
  color:#000;
}

/* Cross-tool active hint — when arriving from another tool the active pill
   briefly pulses to confirm "you are here". Triggered by adding the class
   .tc-tool-tab--just-arrived via JS based on document.referrer. */
.tc-tool-tab.tc-tool-tab--just-arrived{
  animation:tcTabPulse 1.4s ease-out 1;
}
@keyframes tcTabPulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,0.55)}
  60%{box-shadow:0 0 0 10px rgba(34,211,238,0)}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}
}

/* Hide on mobile — desktop-first ship.
   Mobile pass will move these into the existing hamburger menu per page. */
@media (max-width:740px){
  .tc-tool-nav{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .tc-tool-tab,.tc-tool-tab svg,.tc-tool-tab--just-arrived{
    animation:none !important;
    transition:none !important;
  }
}