/* tools-base.css — shared styles across all tool pages (A+ Builder, Deep SEO, Listing Optimiser, AI Description) */

/* ── Shared keyframes ──────────────────────────────────────────────────────── */
/* Single shimmer + spin definitions; per-page aliases kept for backwards compat */
@keyframes psShimmer { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }
@keyframes toolShimmer { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }
@keyframes apShimmer   { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }
@keyframes dsShimmer   { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }
@keyframes loShimmer   { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }
@keyframes adShimmer   { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }

@keyframes psSpin   { to { transform: rotate(360deg); } }
@keyframes toolSpin { to { transform: rotate(360deg); } }
@keyframes apSpin   { to { transform: rotate(360deg); } }
@keyframes lo-spin  { to { transform: rotate(360deg); } }
@keyframes ad-spin  { to { transform: rotate(360deg); } }

/* ── Shimmer containers — hint GPU compositing to prevent jank ─────────────── */
[class*="-shimmer"] { will-change: background-position; }

/* Respect OS-level "reduce motion" preference — replace shimmer with static bg */
@media (prefers-reduced-motion: reduce) {
  [class*="-shimmer"] {
    animation: none !important;
    background: var(--shimmer-from) !important;
    will-change: auto;
  }
}

/* ── AI usage pill — shared across all tool pages ─────────────────────────── */
.ps-usage-pill { background: var(--b1); border: 1px solid var(--b2); border-radius: var(--radius-xl); padding: 3px 10px; font-size: 0.62rem; color: var(--t3); font-family: var(--fm); white-space: nowrap; }
.ps-usage-pill.warn { border-color: rgba(240,160,48,0.3); color: var(--amber); background: var(--amber-d); }
.ps-usage-pill.full { border-color: var(--red-a30); color: var(--red); background: var(--red-d); }

/* ── CTA meta row (below generate buttons) ─────────────────────────────────── */
.ad-cta-meta { font-size: 0.76rem; color: var(--t3); display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ad-cta-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t3); opacity: 0.4; flex-shrink: 0; }

/* ── Usage pill (ad- prefixed variant used on ai-description, aplus, listing-opt) */
.ad-usage-pill { background: var(--b1); border: 1px solid var(--b2); border-radius: var(--radius-xl); padding: 3px 10px; font-size: 0.62rem; color: var(--t3); font-family: var(--fm); }
.ad-usage-pill.warn { border-color: rgba(240,160,48,0.3); color: var(--amber); background: var(--amber-d); }
.ad-usage-pill.full { border-color: var(--red-a30); color: var(--red); background: var(--red-d); }

/* ── Keyword pills ─────────────────────────────────────────────────────────── */
.ap-kw-pill, .ds-kw-pill, .lo-kw-pill {
  background: var(--mint-a15); color: var(--t1); border-radius: var(--radius-xs); padding: 1px 4px;
}

/* ── Insight pills — base ──────────────────────────────────────────────────── */
.ap-insight-pill, .ds-insight-pill, .lo-insight-pill, .ad-insight-pill {
  display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem;
  border-radius: var(--radius-xs); padding: 2px 7px; font-family: inherit; white-space: nowrap;
}

/* ── Insight pills — tone variant ─────────────────────────────────────────── */
.ap-insight-tone, .ds-insight-tone, .lo-insight-tone, .ad-insight-tone {
  background: var(--blue-a08); border: 1px solid var(--blue-a15); color: var(--blue);
}

/* ── Insight pills — readability variant (ap / lo / ad share the same tokens) */
.ap-insight-read, .lo-insight-read, .ad-insight-read {
  background: var(--b1); border: 1px solid var(--b2); color: var(--t3);
}
/* ds-insight-read uses --bg-c / --b1 — kept in deep-seo.html */

.ap-insight-read.easy, .ds-insight-read.easy, .lo-insight-read.easy, .ad-insight-read.easy {
  color: var(--mint); border-color: var(--mint-a20); background: var(--mint-a06);
}
.ap-insight-read.moderate, .ds-insight-read.moderate, .lo-insight-read.moderate, .ad-insight-read.moderate {
  color: var(--amber); border-color: var(--amber-a20); background: var(--amber-a06);
}
.ap-insight-read.dense, .ds-insight-read.dense, .lo-insight-read.dense, .ad-insight-read.dense {
  color: var(--red); border-color: var(--red-a20); background: var(--red-a06);
}

/* ── Insight pills — keyword coverage ─────────────────────────────────────── */
.ap-insight-kw, .ds-insight-kw, .lo-insight-kw {
  background: var(--mint-a06); border: 1px solid var(--mint-a15); color: var(--mint);
}
.ap-insight-kw-miss, .ds-insight-kw-miss, .lo-insight-kw-miss {
  background: var(--red-a06); border: 1px solid var(--red-a15); color: var(--red); font-size: 0.68rem;
}

/* ── Result fade-in animation ──────────────────────────────────────────────── */
@keyframes psResultFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ps-result-fade {
  animation: psResultFade 0.4s cubic-bezier(0.4,0,0.2,1) both;
}

/* ── Shared Dropdown ── */
.ps-dropdown { position: relative; flex-shrink: 0; width: 100%; }
.ps-dropdown-trigger {
 background: var(--bg-e); border: 1px solid var(--b1);
 border-radius: var(--radius-md, 12px); padding: 9px 32px 9px 14px;
 color: var(--t2); font-size: 0.82rem; cursor: pointer;
 font-family: var(--fb); font-weight: 600; white-space: nowrap;
 user-select: none; box-shadow: var(--sh-sm); transition: all 0.15s;
 position: relative; width: 100%; box-sizing: border-box;
}
.ps-dropdown-trigger::after {
 content: ''; position: absolute; right: 12px; top: 50%;
 transform: translateY(-50%); width: 0; height: 0;
 border-left: 4px solid transparent; border-right: 4px solid transparent;
 border-top: 5px solid var(--t3); transition: transform 0.2s;
}
.ps-dropdown.open .ps-dropdown-trigger::after { transform: translateY(-50%) rotate(180deg); }
.ps-dropdown-trigger:hover { border-color: var(--blue); color: var(--t1); }
.ps-dropdown.open .ps-dropdown-trigger { border-color: var(--blue); color: var(--t1); box-shadow: 0 0 0 3px var(--blue-a10, var(--blue-a10)); }
.ps-dropdown-menu {
 position: absolute; top: calc(100% + 6px); left: 0; right: 0;
 background: var(--card); border: 1px solid var(--b1);
 border-radius: var(--radius-md, 12px); overflow: hidden; z-index: 50;
 box-shadow: var(--sh-lg); opacity: 0; transform: translateY(-4px);
 pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.ps-dropdown.open .ps-dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ps-dropdown-item {
 padding: 9px 14px; font-size: 0.82rem; font-weight: 500;
 color: var(--t2); cursor: pointer; transition: all 0.1s;
 font-family: var(--fb); white-space: nowrap;
 border-bottom: 1px solid var(--b1);
}
.ps-dropdown-item:last-child { border-bottom: none; }
.ps-dropdown-item:hover { background: var(--bg-h); color: var(--t1); }
.ps-dropdown-item.active { color: var(--blue); font-weight: 700; }
.ps-dropdown-item.active::before { content: '✓ '; font-size: 10px; }

/* ── Tour ? button — universal alignment fix ────────────────────────────────── */
/* Buttons inside h1 sit below the text baseline by default. vertical-align: middle fixes it. */
[class*="-tour-help"] { vertical-align: middle; }

/* ── Shared Tabs ── */
.ps-tabs {
 display: flex; gap: var(--space-4); margin-bottom: 20px;
 background: var(--bg-s); border-radius: var(--radius-lg, 16px);
 padding: 4px; border: 1px solid var(--b1);
}
.ps-tab {
 flex: 1; padding: 8px 12px; border-radius: var(--radius-md, 12px);
 background: none; border: none; color: var(--t3);
 font-family: var(--fb); font-size: 0.82rem; font-weight: 600;
 cursor: pointer; transition: all 0.2s; text-align: center;
 white-space: nowrap;
}
.ps-tab:hover { color: var(--t1); background: var(--hi); }
.ps-tab.active, .ps-tab[aria-selected="true"] {
 background: var(--card); color: var(--blue); font-weight: 700;
 box-shadow: var(--sh-sm), inset 0 -2px 0 var(--blue);
}
.ps-tab-panel { display: none; }
.ps-tab-panel.active, .ps-tab-panel[hidden="false"] { display: block; }

/* ── Track as Competitor button — shared across SERP / ASIN Keywords / Category Explorer ── */
.track-comp-btn { background: none; border: 1px solid var(--b2); border-radius: var(--radius-xs); padding: 3px 9px; font-size: 0.7rem; font-weight: 600; color: var(--t3); cursor: pointer; transition: all 0.15s; font-family: var(--fb); white-space: nowrap; flex-shrink: 0; }
.track-comp-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: var(--blue-d); }
.track-comp-btn.tracked { border-color: var(--mint-a20); color: var(--mint); background: var(--mint-a10); cursor: default; pointer-events: none; }
.track-comp-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Shared Tour — unified via attribute selectors ──────────────────────────── */
[class*="-tour-overlay"]  { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:999;transition:opacity 0.3s; }
[class*="-tour-highlight"] { position:absolute;z-index:1000;box-shadow:0 0 0 4000px rgba(0,0,0,0.5),0 0 24px 6px var(--blue-a50),inset 0 0 0 2px rgba(59,142,240,0.6);border-radius:var(--radius-md);pointer-events:none;transition:all 0.4s ease; }
[data-theme="light"] [class*="-tour-highlight"] { box-shadow:0 0 0 4000px rgba(0,0,0,0.4),0 0 24px 6px rgba(59,142,240,0.45),inset 0 0 0 2px var(--blue-a50); }
[class*="-tour-tooltip"]  { position:absolute;z-index:1001;background:var(--form-bg);border:1px solid var(--b1);border-radius:var(--radius-md);padding:18px 22px;box-shadow:0 8px 32px rgba(0,0,0,0.3);max-width:320px; }
[class*="-tour-title"]    { font-size:0.9rem;font-weight:700;color:var(--t1);margin-bottom:6px; }
[class*="-tour-text"]     { font-size:0.82rem;color:var(--t2);line-height:1.55;margin-bottom:14px; }
[class*="-tour-footer"]   { display:flex;align-items:center;justify-content:space-between; }
[class*="-tour-dots"]     { display:flex;gap:5px; }
/* .active variant for tour dots — :not([class*="-tour-dots"]) avoids substring collision with the wrapper */
[class*="-tour-dot"]:not([class*="-tour-dots"])       { width:7px;height:7px;border-radius:50%;background:var(--b1);transition:background 0.2s; }
[class*="-tour-dot"]:not([class*="-tour-dots"]).active { background:var(--cta-bg); }
[class*="-tour-btns"]     { display:flex;gap:8px; }
[class*="-tour-skip"]     { background:none;border:1px solid var(--b1);border-radius:var(--radius-sm);padding:5px 14px;font-size:0.8rem;color:var(--t2);cursor:pointer;font-family:var(--fb); }
[class*="-tour-next"]     { background:var(--cta-bg);color:var(--cta-text);border:none;border-radius:var(--radius-sm);padding:5px 14px;font-size:0.8rem;font-weight:700;cursor:pointer;font-family:var(--fb); }
[class*="-tour-help"]     { background:none;border:1px solid var(--b1);border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:var(--t3);font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.2s;font-family:inherit;flex-shrink:0;vertical-align:middle; }
[class*="-tour-help"]:hover { color:var(--mint);border-color:var(--mint-a30);background:var(--mint-a06); }

/* ── ps-tier-pill — unified tier indicator (platinum/gold/silver/bronze) ────── */
.ps-tier-pill { font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-xl);font-family:var(--fm);letter-spacing:0.04em; }
/* Health-tier pill colors mirror .mb-fill bar palette — mint for the top two
   tiers (Optimised + Healthy), amber for Needs Work, red for Poor. Previously
   gold=blue diverged from the recalibrated bar; pill and bar now agree. */
.ps-tier-pill.platinum { background:var(--mint-a10);color:var(--mint);border:1px solid var(--mint-a20); }
.ps-tier-pill.gold     { background:var(--mint-a10);color:var(--mint);border:1px solid var(--mint-a20); }
.ps-tier-pill.silver   { background:var(--amber-d);color:var(--amber);border:1px solid var(--amber-a20); }
.ps-tier-pill.bronze   { background:var(--red-a08,rgba(239,68,68,0.08));color:var(--red);border:1px solid var(--red-a20,rgba(239,68,68,0.2)); }

/* ── ps-stat-card — unified stat tile ─────────────────────────────────────── */
.ps-stat-card { background:var(--card);border:1px solid var(--b1);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--sh-sm); }
.ps-stat-card .ps-stat-label { font-size:0.62rem;color:var(--t3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;font-weight:700; }
.ps-stat-card .ps-stat-val   { font-size:1.4rem;font-weight:800;color:var(--t1);font-family:var(--fd);line-height:0.96;letter-spacing:-0.02em;font-variant-numeric:tabular-nums; }
.ps-stat-card .ps-stat-val.mint  { color:var(--mint); }
.ps-stat-card .ps-stat-val.amber { color:var(--amber); }
.ps-stat-card .ps-stat-val.red   { color:var(--red); }

/* ── ct-nav-btn — competitor tracker navigation button ────────────────────── */
.ct-nav-btn { background:none;border:1px solid var(--b2);border-radius:var(--radius-sm);color:var(--t3);font-size:0.72rem;padding:6px 12px;cursor:pointer;font-family:var(--fb);white-space:nowrap;transition:all 0.15s;display:inline-flex;align-items:center;gap:5px; }
.ct-nav-btn:hover { color:var(--t1); }

/* ── ct-loading-state — inline loading indicator ──────────────────────────── */
.ct-loading-state { color:var(--t3);padding:32px 0; }