/*
 * The grouped /tools/ hub (SITE.hubGroups, owner 2026-09-28), loaded ONLY on a grouped site's hub (build.mjs HUB_FILES).
 * A group's colours arrive as --g (text) and --gt (tint), each pair held to WCAG AA by a test. Both grouped hubs sit on
 * DARK pages: text outside a card inherits the page's; the search box and bubbles are light pills.
 * Source: sites/dreamy-tools/core/tools-hub.css (Dash repo).
 */
.chqt-hub--groups [hidden] { display: none !important; } /* display:grid beat it */
.chqt-hub--groups .chqt-hub-anchor { display: block; position: relative; top: -90px; height: 0; visibility: hidden; }

/* search: 0,2,0 beats a theme's input[type=search] */
.chqt-hub-search { max-width: 480px; margin: 0 0 14px; }
.chqt-hub--groups .chqt-hub-q {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 18px 10px 46px;
  border: 1.5px solid var(--chqt-line); border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b625b' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") no-repeat 17px 50%;
  color: var(--chqt-ink); font: inherit; font-size: 16px; line-height: 1.3;
  -webkit-appearance: none; appearance: none;
}
.chqt-hub--groups .chqt-hub-q::placeholder { color: #6b625b; opacity: 1; }
.chqt-hub--groups .chqt-hub-q::-webkit-search-decoration { -webkit-appearance: none; }
.chqt-hub--groups .chqt-hub-q:focus { outline: 3px solid var(--chqt-gold); outline-offset: 2px; border-color: var(--chqt-gold); }

/* bubbles: they wrap; a phone scrolls one row sideways */
.chqt-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; scroll-margin-top: 90px; }
.chqt-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--g, var(--chqt-line)); border-radius: 999px;
  background: var(--gt, var(--chqt-paper)); color: var(--g, var(--chqt-ink));
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, transform .15s;
}
/* WordPress's global styles print later and colour links at 0,1,0 (Travel: #876c3a, 4.3:1) */
.chqt-hub--groups .chqt-chip, .chqt-hub--groups .chqt-chip:visited { color: var(--g, var(--chqt-ink)); text-decoration: none; }
.chqt-chip:hover { transform: translateY(-1px); }
.chqt-chip:focus-visible { outline: 3px solid var(--g, var(--chqt-ink)); outline-offset: 2px; }
.chqt-chip[aria-current] { background: var(--g, var(--chqt-ink)); border-color: var(--g, var(--chqt-ink)); color: #fff; box-shadow: 0 0 0 2px #fff; }
/* All, chosen: gold and a ring, visible on a dark page */
.chqt-chip[data-chqt-group=""][aria-current] { background: var(--chqt-gold); border-color: var(--chqt-gold); color: var(--chqt-ink); }
.chqt-chip-n { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #fff; color: var(--g, var(--chqt-ink)); font-size: 12.5px; font-weight: 700; text-align: center; }
@media (max-width: 640px) {
  /* it fades at the edge: more to swipe to */
  .chqt-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 4px 10px; scroll-snap-type: x proximity; scroll-padding-left: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .chqt-chips::-webkit-scrollbar { display: none; }
  .chqt-chips::after { content: ''; flex: 0 0 44px; }
  .chqt-chip { flex: none; scroll-snap-align: start; }
}
.chqt-hub-status { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.chqt-hub-status:empty { display: none; }

/* a group */
.chqt-hub--groups .chqt-group { border-top: 3px solid var(--g, var(--chqt-line)); padding-top: 14px; }
.chqt-hub--groups .chqt-group h2 { display: flex; align-items: center; gap: 10px; }
.chqt-group-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--gt, var(--chqt-cream)); font-size: 22px; }
.chqt-group-blurb { margin: 2px 0 14px; font-size: 15.5px; line-height: 1.45; color: var(--chqt-page-muted, inherit); }

/* a card: its first group's colours */
.chqt-hub--groups .chqt-card a { background: var(--gt, var(--chqt-paper)); border: 1px solid transparent; border-left: 5px solid var(--g, var(--chqt-line)); }
.chqt-hub--groups .chqt-card a:hover, .chqt-hub--groups .chqt-card a:focus-visible { border-color: var(--g, var(--chqt-gold)); }
.chqt-hub--groups .chqt-card-icon { background: #fff; font-size: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.chqt-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.chqt-card-tags span { padding: 3px 8px; border-radius: 999px; background: #fff; color: var(--g, var(--chqt-ink)); font-size: 12px; font-weight: 600; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .chqt-chip { transition: none; }
}