/*
 * Shared styles for the feature packs (src/features). Built only from the
 * design tokens in tokens.css, so every pack inherits light/dark theming and
 * the measured contrast. Packs that need more add public/css/pack-<key>.css.
 */
.tool-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.tool-card { display: flex; flex-direction: column; gap: var(--space-2); }
.tool-card__title { font-size: 1.05rem; margin: 0; }
.tool-card__title a { text-decoration: none; }
.tool-card__title a:hover,
.tool-card__title a:focus-visible { text-decoration: underline; }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.field--check label { display: flex; align-items: center; gap: var(--space-2); }
.field-error { color: var(--danger); font-size: 0.9rem; }

.app-nav__row { flex-wrap: wrap; row-gap: var(--space-1); }

.kv { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .kv { grid-template-columns: 1fr; } }

.meter { height: 10px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); }

.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }

/* Data saver (user preference): no decorative imagery, no autoplay, lighter chrome. */
.data-saver .hero-proof,
.data-saver .screenshot,
.data-saver .logos { display: none; }
.data-saver video[autoplay] { display: none; }