/* 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;
  }
}


/* ── /grab-style page background + header (shared across all pages
   that load this stylesheet) ─────────────────────────────────────────
   Matches the exact tokens, gradients, and header tone used on /grab
   so guides, tools, and downloaders feel like one product family
   instead of a slightly-darker, slightly-flatter sibling. */

body{
  /* Same deep navy /grab uses (the existing dark page palettes were a
     touch too black). Important so it wins over the per-page
     :root{--bg:#0f1117} declarations baked into the legacy guides. */
  background:#0B1220 !important;
  color:#e8eaf0;
}

/* Ambient gradient backdrop — mirrors /grab's <div class="bg"> element
   exactly (three soft radial gradients at the same percentages and
   opacities), implemented as a body::before so we don't have to inject
   a new DOM element on every page. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(ellipse 50% 42% at 94% 8%, rgba(167,139,250,0.06), transparent 55%),
    radial-gradient(ellipse 70% 60% at 15% 90%, rgba(59,130,246,0.10), transparent 60%);
}
/* Keep page content above the backdrop. */
body > *{position:relative; z-index:1}

/* Header (.header) tone matches /grab's --surface (#141C2A) so the bar
   has a subtle lift off the body. Overrides legacy guide page rules
   that set background:var(--bg). */
header.header{
  background:#141C2A !important;
  border-bottom:1px solid #1F2A3A !important;
}