/* Catalogue of every ZincirX app: /apps/ and one page per product.
   Loaded after site.css on those pages only, so the field app pages keep
   their stylesheet (and its hashed name) unchanged. Group colours tint the
   marks only; text stays on the site's neutrals. */

.g-compliance-b2b { --accent: #1F6F5C; }
.g-business-saas { --accent: #3B5BA9; }
.g-research-scimatic { --accent: #7A3E9D; }
.g-research-education { --accent: #8A5A12; }
.g-post-quantum-pqc { --accent: #22577A; }
.g-wallets-payments { --accent: #2E7D4F; }
.g-consumer-apps { --accent: #B03A5B; }

@media (prefers-color-scheme: dark) {
  .g-compliance-b2b { --accent: #6CC5AE; }
  .g-business-saas { --accent: #9DB4F0; }
  .g-research-scimatic { --accent: #C9A3E3; }
  .g-research-education { --accent: #E2B76A; }
  .g-post-quantum-pqc { --accent: #8EC3E6; }
  .g-wallets-payments { --accent: #7FD3A1; }
  .g-consumer-apps { --accent: #F0A2B8; }
}

.cat-page h1 { overflow-wrap: break-word; }

/* ------------------------------------------------------------------ group filter */

.cat-filter ul { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-filter a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--panel);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.cat-filter a:hover { border-color: var(--ink-2); }
.cat-count { font: 500 0.8125rem/1 var(--font-data); color: var(--ink-2); }
.cat-filter a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.cat-filter a[aria-current="true"] .cat-count { color: inherit; }

/* ------------------------------------------------------------------ groups and cards */

.cat-all { padding-bottom: 48px; }
.cat-group { padding-top: 32px; }
.cat-group h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); }
.cat-grid { display: grid; gap: 12px; }
.cat-card { min-width: 0; }
.cat-link {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 4px 14px; height: 100%;
  padding: 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none;
}
.cat-link:hover { border-color: var(--ink-2); }
.cat-link .mark { width: 40px; height: 40px; grid-row: span 3; }
.cat-link .mark svg { width: 26px; height: 26px; }
.cat-name { font: 700 1.375rem/1.15 var(--font-head); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; overflow-wrap: break-word; }
.cat-link:hover .cat-name { text-decoration-thickness: 2px; }
.cat-meta { font-size: 0.875rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ product page */

.cat-hero .hero-text { gap: 14px; }
.cat-tagline { font: 600 1.375rem/1.3 var(--font-head); max-width: 32em; }
.cat-glance { align-self: start; }
.cat-glance .viz-head { padding-bottom: 10px; margin-bottom: 4px; }
.cat-glance .readout { margin-top: 0; }
.cat-glance .readout th { width: 34%; }
.cat-desc { font-size: 1.125rem; max-width: 40em; }
.cat-links li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
.cat-links li:last-child { border-bottom: 1px solid var(--rule); }
.cat-links a { font-weight: 600; justify-self: start; }
.cat-links span { font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.cat-more { margin-top: 20px; }

@media (min-width: 720px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .cat-group { padding-top: 40px; }
  .cat-all .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

/* ------------------------------------------------------------------ link-preview cards (1200x630 render only) */

body.og-cat { display: grid; grid-template-columns: 1fr 360px; }
.og-cat-in { display: grid; grid-template-rows: auto 1fr auto; gap: 28px; height: 630px; padding: 56px 0 52px 64px; }
.og-cat-text { display: grid; gap: 18px; align-content: center; }
.og-cat-kicker { font: 600 1.5rem/1.2 var(--font-body); color: var(--ink-2); }
.og-cat .og-h { font-size: 4.25rem; }
.og-cat .og-sub { font-size: 2rem; line-height: 1.25; color: var(--ink); }
.og-cat-foot { font: 600 1.375rem/1.2 var(--font-body); color: var(--ink-2); }
.og-cat-tile { display: grid; place-items: center; height: 630px; }
.og-cat-tile .mark { width: 240px; height: 240px; border-radius: 40px; }
.og-cat-tile .mark svg { width: 150px; height: 150px; }
body.og-cat-all { grid-template-columns: 1fr; }
.og-cat-all .og-cat-in { padding-right: 64px; }
.og-cat-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.og-cat-groups li { display: flex; align-items: center; gap: 12px; font: 600 1.25rem/1.15 var(--font-head); }
.og-cat-groups .mark { width: 44px; height: 44px; }
.og-cat-groups .mark svg { width: 28px; height: 28px; }