/* The most popular Shopify apps. Builds on themes.css (bars, legend, tables), migrations.css (bars card),
   history.css (hero actions, chart card, files, FAQ) and guides.css (layout, tables). One colour per app
   group, each checked for contrast against --bg-card #0f2521. */
:root {
  --sa-reviews: #f2c14e; --sa-email: #5a9cf0; --sa-upsell: #e8845c; --sa-loyalty: #c88dff; --sa-chat: #3dcf8e;
  --sa-bnpl: #ff8fb6; --sa-subs: #4fd1c5; --sa-options: #c9b27a; --sa-search: #a3b0ff; --sa-consent: #9ec2b6;
  --sa-a11y: #e3dd6c; --sa-builder: #f0a07c; --sa-translate: #74c8ff; --sa-social: #ffa6d3; --sa-shipping: #a6e35a;
  --sa-cro: #3fd8ee; --sa-seo: #f6ac3a; --sa-other: #8fa59f; --sa-tags: #9fb0c4;
  --sa-neg: #ff8c7a; --sa-pos: #5ee0a6;
}
.sa-g-reviews { --sa: var(--sa-reviews); } .sa-g-email { --sa: var(--sa-email); } .sa-g-upsell { --sa: var(--sa-upsell); }
.sa-g-loyalty { --sa: var(--sa-loyalty); } .sa-g-chat { --sa: var(--sa-chat); } .sa-g-bnpl { --sa: var(--sa-bnpl); }
.sa-g-subs { --sa: var(--sa-subs); } .sa-g-options { --sa: var(--sa-options); } .sa-g-search { --sa: var(--sa-search); }
.sa-g-consent { --sa: var(--sa-consent); } .sa-g-a11y { --sa: var(--sa-a11y); } .sa-g-builder { --sa: var(--sa-builder); }
.sa-g-translate { --sa: var(--sa-translate); } .sa-g-social { --sa: var(--sa-social); } .sa-g-shipping { --sa: var(--sa-shipping); }
.sa-g-cro { --sa: var(--sa-cro); } .sa-g-seo { --sa: var(--sa-seo); } .sa-g-other { --sa: var(--sa-other); } .sa-g-tags { --sa: var(--sa-tags); }

.sa-bars .st-bar { grid-template-columns: 190px minmax(0, 1fr) 60px; }
.sa-bars .st-bar-track i { background: var(--sa, var(--st-custom)); }
.sa-legend i { background: var(--sa, var(--st-custom)); }

.gd-body .sa-neg { color: var(--sa-neg); }
.gd-body .sa-pos { color: var(--sa-pos); }
.sa-dim { color: var(--text-dim); font-size: 13px; }
.sa-top td, .sa-speed td, .sa-count td, .sa-tags td, .sa-countries td, .sa-with td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-top td:nth-child(3), .sa-with td:nth-child(2) { white-space: normal; min-width: 150px; color: var(--text-muted); }
.sa-speed th:first-child, .sa-speed td:first-child, .sa-count th:first-child, .sa-countries th:first-child, .sa-with th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card); }

/* Groups: one card per job. */
.sa-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.sa-group { margin: 0 !important; padding: 16px 18px 14px; border: 1px solid var(--border-dark); border-radius: 14px; background: var(--bg-card); }
.gd-body .sa-group h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 15px; line-height: 1.3; color: #fff; }
.sa-group h3 i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--sa); }
.gd-body .sa-group-share { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.sa-group-share strong { font: 700 15px var(--font-mono); color: #fff; }
.sa-group ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: sa; }
.sa-group li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.sa-group li span:last-child { font: 500 13px var(--font-mono); color: var(--text-muted); }

/* Pass rate against comparable stores, by number of apps. */
.sa-gap { margin: 20px 0 18px; padding: 18px 18px 14px; border: 1px solid var(--border-dark); border-radius: 16px; background: var(--bg-card); }
.sa-gap-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sa-gap-bars li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; gap: 12px; align-items: center; padding: 3px 6px; border-radius: 8px; }
.sa-gap-bars li:hover { background: rgba(255, 255, 255, 0.04); }
.sa-gap-k { font: 600 13px var(--font-mono); color: var(--text-muted); text-align: right; }
.sa-gap-track { position: relative; height: 14px; }
.sa-gap-track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border-light); }
.sa-gap-track i { position: absolute; top: 0; bottom: 0; min-width: 2px; }
.sa-gap-track i.is-neg { background: var(--sa-neg); border-radius: 4px 0 0 4px; }
.sa-gap-track i.is-pos { background: var(--sa-pos); border-radius: 0 4px 4px 0; }
.sa-gap-v { font: 600 13px var(--font-mono); color: #fff; text-align: right; }
.sa-gap figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* Store Lens call to action. */
.sa-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; margin: 44px 0; padding: 26px 28px; border: 1px solid rgba(61, 207, 142, 0.35); border-radius: 18px; background: linear-gradient(135deg, rgba(61, 207, 142, 0.12), rgba(57, 135, 229, 0.08)), var(--bg-card); }
.gd-body .sa-cta h2 { margin: 2px 0 8px; font-size: 22px; }
.gd-body .sa-cta p { margin: 0; }
.gd-body .sa-cta-kicker { font: 600 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald-accent); }
.sa-cta-actions { display: grid; gap: 10px; justify-items: center; }
.sa-cta-more { font-size: 14px; }

@media (max-width: 640px) {
  .sa-bars .st-bar { grid-template-columns: 112px minmax(0, 1fr) 50px; }
  .sa-cta { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .sa-cta-actions { justify-items: start; }
  .sa-gap { padding: 14px 12px 12px; }
  .sa-gap-bars li { grid-template-columns: 28px minmax(0, 1fr) 40px; gap: 8px; padding: 3px 2px; }
}
@media (forced-colors: active) {
  .sa-gap-track i, .sa-group h3 i { background: CanvasText !important; forced-color-adjust: none; }
}