/* The most popular Shopify themes. Builds on migrations.css (bars card, fallback font metrics), history.css
   (hero actions, chart card, files, FAQ) and guides.css (layout, tables). Theme kinds use five
   categorical colours checked against --bg-card #0f2521 for contrast. */
:root { --st-free: #3dcf8e; --st-paid: #3987e5; --st-retired: #b7a16b; --st-outside: #e0734a; --st-custom: #7f958f; }

.st-bars-card { margin: 8px 0 12px; }
.st-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 60px; gap: 14px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.st-bar:hover { background: rgba(255, 255, 255, 0.04); }
.st-bar-name { font-size: 14px; color: var(--text-main); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar-track { height: 14px; }
.st-bar-track i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--st-custom); }
.st-bar.is-free .st-bar-track i { background: var(--st-free); }
.st-bar.is-paid .st-bar-track i { background: var(--st-paid); }
.st-bar.is-retired .st-bar-track i { background: var(--st-retired); }
.st-bar.is-outside .st-bar-track i { background: var(--st-outside); }
.st-bar-value { font: 600 14px var(--font-mono); color: #fff; text-align: right; }

.st-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-muted); margin: 12px 0 4px; }
.st-legend-top { margin: 0 0 14px; }
.st-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; background: var(--st-custom); }
.st-legend i.is-free { background: var(--st-free); } .st-legend i.is-paid { background: var(--st-paid); }
.st-legend i.is-retired { background: var(--st-retired); } .st-legend i.is-outside { background: var(--st-outside); }

.st-stacks-card { margin: 16px 0 4px; }
.st-stacks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-stack { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: center; }
.st-stack-name { font-size: 14px; color: var(--text-main); font-weight: 600; }
.st-stack-track { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.st-stack-track i { display: block; height: 100%; background: var(--st-custom); }
.st-stack-track i.is-free { background: var(--st-free); } .st-stack-track i.is-paid { background: var(--st-paid); }
.st-stack-track i.is-retired { background: var(--st-retired); } .st-stack-track i.is-outside { background: var(--st-outside); }
.st-stacks-card .gd-table-wrap { margin-top: 18px; margin-bottom: 0; }

.st-top td, .st-bands td, .st-dawn td, .st-dawn-age td, .st-horizon td, .st-horizon-versions td, .st-outside td, .st-speed td, .st-countries td, .st-currencies td, .st-features td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-table th[scope="row"] { font-weight: 600; color: #fff; text-align: left; white-space: nowrap; }
.st-top td:first-child, .st-countries td:first-child { color: var(--text-dim); font-family: var(--font-mono); font-weight: 500; }
.st-features th[scope="row"] { white-space: normal; min-width: 260px; }
.st-speed .st-all { color: var(--emerald-accent); }
.st-speed td:last-child { color: #fff; }
.st-none { color: var(--text-dim); }
/* Keep the theme column in view while the wide tables scroll sideways on phones. */
.st-top th:nth-child(2), .st-top td:nth-child(2), .st-speed th:first-child, .st-speed td:first-child, .st-bands th:first-child, .st-bands td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card); }
.st-top th:nth-child(2) { z-index: 2; }

@media (max-width: 640px) {
  .st-bar { grid-template-columns: 96px minmax(0, 1fr) 50px; gap: 10px; padding: 6px 4px; }
  .st-bar-name { font-size: 13px; }
  .st-stack { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .st-stack-name { font-size: 13px; }
}
@media (forced-colors: active) {
  .st-bar-track i, .st-stack-track i, .st-legend i { background: CanvasText !important; forced-color-adjust: none; }
}

/* Links to the theme pages. */
.st-pages { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.st-pages a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border-dark); border-radius: 12px; background: var(--bg-card); text-decoration: none; color: var(--text-main); }
.st-pages a:hover { border-color: var(--emerald-accent); }
.st-pages strong { font-size: 15px; color: #fff; }
.st-pages span { font-size: 12px; color: var(--text-muted); }

/* The article is 2,700 elements of tables. Lay out each section only as it comes into view, so the first
   paint does not wait for every table; fragment links still open their section. */
.gd-body > section { content-visibility: auto; contain-intrinsic-size: auto 900px; }