/* Release AJ: category and hub pages. A category hero with a glossy icon, the tools first (filterable, grouped),
   raised cards that say where each tool runs, then About / How it works side by side. Loaded by category and hub pages only (templates/category.html). */
.hm-c--image { --c1: #ff7a59; --c2: #e2366f; } .hm-c--media { --c1: #f43f5e; --c2: #9f1239; } .hm-c--seo { --c1: #38bdf8; --c2: #2563eb; }
.hm-c--docs { --c1: #fbbf24; --c2: #d97706; } .hm-c--security { --c1: #34d399; --c2: #0f766e; }
.page-cat .cat-hero { position: relative; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1rem, 2.5vw, 1.75rem); overflow: hidden;
  background: radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--c1, var(--brand)) 16%, transparent), transparent 70%); }
.page-cat .cat-hero-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.page-cat .cat-hero-ico { width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px); border-radius: 24px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #ffffff47, #fff0 48%), linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 #ffffff6b, inset 0 -4px 0 #00000033, 0 3px 4px #00000040, 0 14px 30px color-mix(in srgb, var(--c2) 40%, transparent); }
.page-cat .cat-hero-ico .ui-ico { width: 42%; height: 42%; filter: drop-shadow(0 1px 1px #00000040); }
.page-cat .cat-hero .pill { margin-bottom: .6rem; }
.page-cat .cat-hero .tool-h1 { margin: 0 0 .5rem; }
.page-cat .cat-hero-meta { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.page-cat .cat-hero-meta li { padding: .3rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 650; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 85%, transparent); box-shadow: var(--ae-hi); }
@media (max-width: 639px) { .page-cat .cat-hero-inner { grid-template-columns: 1fr; } }

.page-cat .cat-tools-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-cat .cat-tools-head .section-lead { margin-bottom: 0; }
.page-cat .cat-filter { position: relative; flex: 0 1 22rem; min-width: min(100%, 16rem); }
.page-cat .cat-filter svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.page-cat .cat-filter input { width: 100%; min-height: 48px; padding: .7rem 1rem .7rem 2.6rem; border-radius: 14px; border: 1px solid var(--ae-field-border);
  background: var(--surface-solid); color: var(--text); font: inherit; box-shadow: var(--ae-field-inset); -webkit-appearance: none; appearance: none; }
.page-cat .cat-filter input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ae-field-inset), var(--ae-ring); }
.page-cat .cat-group-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.page-cat .cat-group-jump a { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--text);
  font-size: .86rem; font-weight: 600; text-decoration: none; box-shadow: var(--ae-hi); }
.page-cat .cat-group-jump a:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.page-cat .cat-group-title { margin: 1.75rem 0 .8rem; font-size: 1.05rem; letter-spacing: -.01em; scroll-margin-top: 84px; }
.page-cat .cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: .85rem; }
@media (min-width: 1900px) { .page-cat .cc-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); } }
.cc-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: start; padding: 1rem; border-radius: 18px;
  border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 100%, #fff 3%), var(--surface-solid));
  box-shadow: var(--ae-hi), 0 1px 1px #0000004d, 0 6px 14px #00000033; color: var(--text); text-decoration: none;
  transition: transform var(--ae-med) var(--ae-ease), box-shadow var(--ae-med) var(--ae-ease), border-color var(--ae-fast); }
html[data-theme="light"] .cc-card { box-shadow: var(--ae-hi), 0 1px 1px #1018280d, 0 6px 14px #1018280f; }
.cc-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow: var(--ae-hi), 0 2px 2px #00000052, 0 14px 30px #00000047; }
html[data-theme="light"] .cc-card:hover { box-shadow: var(--ae-hi), 0 2px 2px #10182812, 0 14px 30px #1018281a; }
.cc-card:focus-visible { outline: none; box-shadow: var(--ae-hi), var(--ae-ring); }
.cc-card[hidden] { display: none; }
/* Cards below the first screen are not laid out or painted until they come near (like the previous tool cards):
   45 raised cards with descriptions cost about 250 ms of main-thread time at load on a low phone without this. */
.cc-card { content-visibility: auto; contain-intrinsic-size: auto 128px; }
.page-cat .cat-info .cat-panel { content-visibility: auto; contain-intrinsic-size: auto 360px; }
.cc-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-size: 1.4rem; border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 90%, #fff 6%), color-mix(in srgb, var(--surface-solid) 80%, var(--bg))); box-shadow: var(--ae-hi), 0 2px 6px #00000029; }
.cc-body { display: grid; gap: .3rem; min-width: 0; }
.cc-name { margin: 0; font-size: .98rem; line-height: 1.3; letter-spacing: -.01em; }
.cc-desc { color: var(--muted); font-size: .85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-body .hub-proc { justify-self: start; margin-top: .2rem; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--pc, var(--muted)) 35%, transparent); color: var(--pc, var(--muted)); background: color-mix(in srgb, var(--pc, var(--muted)) 12%, transparent); }
.cc-body .hub-proc--local { --pc: var(--link); }
.cc-body .hub-proc--server { --pc: #7dd3fc; }
html[data-theme="light"] .cc-body .hub-proc--server { --pc: #0369a1; }
.cc-body .hub-proc--hybrid { --pc: #fbbf24; }
html[data-theme="light"] .cc-body .hub-proc--hybrid { --pc: #92400e; }
.page-cat .cat-filter-empty { margin: 1rem 0 0; padding: 1.25rem; border-radius: 16px; border: 1px dashed var(--border); color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.page-cat .cat-filter-empty[hidden] { display: none; }
.page-cat .cat-info { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 1024px) { .page-cat .cat-info { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.page-cat .cat-info .cat-panel { margin: 0; padding: clamp(1.2rem, 2.5vw, 1.75rem); border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface-solid); box-shadow: var(--ae-hi), 0 1px 2px #00000024; }
.page-cat .cat-info .cat-panel p, .page-cat .cat-info .cat-panel li { color: var(--muted); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .cc-card { transition: none; } .cc-card:hover { transform: none; } }