/* Agent card — the core marketplace tile. Appears on the dark public surfaces
 * (home, catalog) and the light admin lists (available, installed), so it
 * carries both themes. The category accent drives ONLY the top stripe + the
 * .kw-cat pill + the hover glow — never the icon (brand rule: orb icons are
 * white/gold). */

.kw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  height: 100%;
  padding: 20px;
  border-radius: var(--kw-radius-xl);
  text-decoration: none;
  color: inherit;
  background: var(--kw-surface);
  border: 1px solid var(--kw-border-color);
  box-shadow: var(--kw-shadow-card);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  overflow: hidden;
}
html.dark .kw-card { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); }

/* The hidden attribute is the filter mechanism (server pre-hide + catalog_filter.js).
   Tailwind's preflight only defines [hidden] at :where() zero specificity, so the
   display:flex above silently wins and filtered cards stay visible — restate it. */
.kw-card[hidden] { display: none !important; }

/* Colored top stripe encoding category (via --kw-card-accent). */
.kw-card::before {
  content: "";
  position: absolute;
  top: 0; inset-inline: 0;
  height: 3px;
  background: var(--kw-card-accent, var(--kw-blue));
  opacity: 0.9;
}
.kw-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kw-card-accent, var(--kw-blue)) 45%, var(--kw-border-color));
}
html.dark .kw-card:hover {
  box-shadow: var(--kw-glow-glass), 0 0 30px -8px var(--kw-card-accent, rgba(77, 96, 251, 0.5));
}
html.light .kw-card:hover { box-shadow: var(--kw-shadow-hover); }

.kw-card--compliance { --kw-card-accent: var(--kw-cat-compliance); }
.kw-card--administrative { --kw-card-accent: var(--kw-cat-administrative); }
.kw-card--governance { --kw-card-accent: var(--kw-cat-governance); }
.kw-card--security   { --kw-card-accent: var(--kw-cat-security);   }
.kw-card--dlp        { --kw-card-accent: var(--kw-cat-dlp);        }
.kw-card--ediscovery { --kw-card-accent: var(--kw-cat-ediscovery); }
.kw-card--privacy    { --kw-card-accent: var(--kw-cat-privacy);    }

.kw-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  flex-wrap: nowrap;
}
.kw-card__head-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 auto;
}
.kw-card__head .kw-cat {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kw-card__head .kw-card__status { flex-shrink: 0; }
.kw-card__body { display: flex; flex-direction: column; gap: 0.375rem; }

/* Icon orb — circular glass on dark, solid brand blue on light. Icon forced
   white. The category colour never touches the icon. */
.kw-card__icon {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--kw-glass-fill);
  box-shadow:
    0 12px 19px rgba(0, 0, 0, 0.16),
    inset 1.9px 3.81px 15.24px rgba(248, 248, 248, 0.10),
    inset 0 0 40px rgba(197, 185, 246, 0.15);
}
.kw-card__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(197,185,246,0.45) 0%, rgba(197,185,246,0.01) 38%, rgba(197,185,246,0.01) 64%, rgba(197,185,246,0.12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.kw-card__icon > * { position: relative; z-index: 1; }
.kw-card__icon .kw-ico { color: #fff; }
html.light .kw-card__icon {
  background: var(--kw-blue);
  box-shadow: 0 6px 16px -6px rgba(74, 86, 175, 0.55);
}

.kw-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--kw-fg);
  margin: 0;
  line-height: 1.25;
}
.kw-card__tagline {
  font-size: 0.875rem;
  color: var(--kw-fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.kw-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  font-family: var(--kw-font-mono);
  font-size: 0.6875rem;
  color: var(--kw-fg-subtle);
}
.kw-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

/* Relevant regulations & standards — success-green chips (theme-aware). The
   chip icon takes the chip's text colour (a semantic chip, brand-allowed). */
.kw-card__regs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.kw-card__reg {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--kw-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
  border-radius: var(--kw-radius-pill);
  white-space: nowrap;
  color: color-mix(in srgb, var(--kw-teal) 80%, var(--kw-fg));
  background: color-mix(in srgb, var(--kw-teal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--kw-teal) 28%, transparent);
}

.kw-card__tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.kw-card__tag {
  font-family: var(--kw-font-mono);
  font-size: 11px;
  padding: 0.1875rem 0.4375rem;
  background: var(--kw-bg-subtle);
  border-radius: var(--kw-radius-sm);
  color: var(--kw-fg-subtle);
}
html.dark .kw-card__tag {
  background: rgba(77, 96, 251, 0.10);
  color: var(--kw-muted-lavender);
  border: 1px solid rgba(77, 96, 251, 0.14);
}

/* Installed usage line — green, ties into the installed treatment. */
.kw-card__usage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--kw-font-mono);
  font-size: 0.6875rem;
  color: #1B8E5A;
}
html.dark .kw-card__usage { color: #43D693; }

.kw-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.875rem;
  border-top: 1px solid var(--kw-border-soft);
  margin-top: auto;
}
.kw-card__footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--kw-font-mono);
  font-size: 0.6875rem;
  color: var(--kw-fg-subtle);
}
/* Footer action is a text link (not a filled button) — matches the mockup. */
.kw-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--kw-font-headline);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--kw-fg);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
html.dark .kw-card__action { color: #fff; }
.kw-card__action:hover { color: var(--kw-link); }
.kw-card__action--secondary { color: var(--kw-fg-muted); font-weight: 600; }

/* Status badges. */
.kw-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--kw-font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 0.1875rem 0.5625rem;
  border-radius: var(--kw-radius-pill);
  border: 1px solid;
  white-space: nowrap;
}
.kw-card__status--available { background: #E6F7EF; color: #1B8E5A; border-color: #B6E6CF; }
.kw-card__status--coming    { background: #FEF6DC; color: var(--kw-yellow-ink); border-color: #F6E0A0; }
.kw-card__status--roadmap   { background: var(--kw-bg-subtle); color: var(--kw-fg-subtle); border-color: var(--kw-border-color); }
html.dark .kw-card__status--available { background: rgba(43,182,115,0.14); color: #36C588; border-color: rgba(43,182,115,0.35); }
html.dark .kw-card__status--coming    { background: rgba(253,202,19,0.14); color: var(--kw-signal-gold); border-color: rgba(253,202,19,0.35); }
html.dark .kw-card__status--roadmap   { background: rgba(255,255,255,0.06); color: var(--kw-fg-subtle); border-color: var(--kw-border-soft); }
/* Dedicated "Installed" badge — solid green, distinct from the outline pills. */
.kw-card__status--installed { background: #1B8E5A; color: #fff; border-color: #1B8E5A; font-weight: 700; }
html.dark .kw-card__status--installed { background: #2BB673; color: #06170E; border-color: #2BB673; }

/* ---- Installed card state — green tint + accent so a fleet stands out ---- */
.kw-card--installed { --kw-card-accent: var(--kw-teal); }
.kw-card--installed::before { height: 4px; }
html.light .kw-card--installed {
  background: linear-gradient(180deg, #E4F6ED, #fff);
  border-color: #A9DEC2;
}
html.dark .kw-card--installed {
  background: linear-gradient(180deg, rgba(43,182,115,0.20), rgba(43,182,115,0.05));
  border-color: rgba(43,182,115,0.55);
  box-shadow: var(--kw-glow-glass), inset 0 0 46px rgba(43,182,115,0.14);
}
html.dark .kw-card--installed:hover {
  border-color: rgba(43,182,115,0.8);
  box-shadow: var(--kw-glow-glass), 0 0 34px -8px rgba(43,182,115,0.6);
}
/* Green ring on the installed orb so the card reads "installed" at a glance. */
.kw-card--installed .kw-card__icon {
  box-shadow: 0 0 0 1.5px rgba(43,182,115,0.55), inset 0 0 18px rgba(43,182,115,0.25);
}