/* Available-agents install cards — on-brand restyle of /agents/available.
 *
 * Built on the shared .kw-card (the marketplace tile, used as an <a> on the
 * catalog). The Available page adds a few pieces the catalog card doesn't have,
 * all driven by the REAL route data (publisher_tier, grade, tools, operations,
 * the error case) — no category/framework/roadmap data exists here, so none is
 * invented:
 *   · a stretch-link so the WHOLE card opens the agent detail page (review the
 *     tools/operations/scopes before installing) while the Install <form> stays
 *     clickable on top of it (detail-before-install);
 *   · a badges row on its OWN line beneath the header (publisher pill + grade),
 *     so a long title never collides with the badges;
 *   · Tools / Operations spec rows;
 *   · an error-bundle card and a muted "already installed" variant;
 *   · a lightweight grade segmented filter (All / Compliance / Productivity).
 *
 * Reuses .kw-card / .kw-card__icon / .kw-card__title / .kw-card__tagline /
 * .kw-card__footer / .kw-card__action / .kw-grade* (grade_badge.css). Token-
 * driven, so it flips between the dark public theme and the light admin theme.
 * Loaded after agent_card.css + grade_badge.css so these extras win.
 */

/* ---- Whole-card link (detail-before-install) ---------------------------- */
/* The installable card is a .kw-card DIV (not an <a>) so the Install <form> can
   be a valid sibling. This overlay anchor stretches across the card and carries
   the navigation to the detail page; static content paints under it (clicks
   fall through → navigate), and the Install action is lifted above it. */
.kw-card__stretch {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.kw-card__stretch:focus-visible {
  outline: 2px solid var(--kw-focus-ring);
  outline-offset: -2px;
}

/* Title block shrinks/wraps cleanly next to the orb (so the mono id can break
   instead of forcing the card wide). */
.kw-acard-titles { min-width: 0; }

/* Mono "{agent_id}@{version}" line under the title. */
.kw-card__id {
  font-family: var(--kw-font-mono);
  font-size: 11px;
  color: var(--kw-fg-subtle);
  margin-top: 2px;
  word-break: break-all;
}

/* ---- Badges row (own line beneath the header) --------------------------- */
.kw-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Publisher tier pill — neutral surface, brand-blue glyph (the tier is factual
   metadata, not a category). */
.kw-pub-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--kw-font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--kw-radius-pill);
  background: var(--kw-bg-subtle);
  color: var(--kw-fg-muted);
  border: 1px solid var(--kw-border-color);
  white-space: nowrap;
  text-transform: capitalize;
}
.kw-pub-pill .kw-ico { color: var(--kw-blue); }
html.dark .kw-pub-pill { background: rgba(77, 96, 251, 0.08); }
html.dark .kw-pub-pill .kw-ico { color: var(--kw-soft-lavender); }

/* ---- Tools / Operations spec rows --------------------------------------- */
.kw-acard-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kw-spec {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.kw-spec__label {
  font-family: var(--kw-font-mono);
  font-size: 11px;
  color: var(--kw-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 78px;
}
.kw-spec__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.kw-spec__chips .kw-card__tag { font-size: 11px; }
/* Operations get a brand-blue tint to read as actions vs. neutral tool chips. */
.kw-spec__op { color: var(--kw-blue); }
html.light .kw-spec__op { background: #EAEDFB; border: 1px solid #CBD2F4; }
html.dark .kw-spec__op {
  color: var(--kw-soft-lavender);
  background: rgba(77, 96, 251, 0.12);
  border: 1px solid rgba(77, 96, 251, 0.30);
}

/* ---- Footer actions: Details cue (under overlay) + Install (above) ------- */
.kw-acard-foot { display: flex; align-items: center; gap: 12px; }
/* Lift the install form above the stretch overlay so the click submits the form
   instead of navigating to the detail page. */
.kw-acard-install { position: relative; z-index: 2; display: inline-flex; }

/* ---- Error-bundle card -------------------------------------------------- */
.kw-card--error {
  border-color: rgba(229, 69, 69, 0.40);
  background: linear-gradient(180deg, rgba(229, 69, 69, 0.05), transparent);
  cursor: default;
}
html.dark .kw-card--error {
  background: rgba(229, 69, 69, 0.08);
  border-color: rgba(229, 69, 69, 0.45);
}
.kw-card--error::before { background: var(--kw-red); }
.kw-card__err-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--kw-red);
}
.kw-card__err-title .kw-ico { color: var(--kw-red); }
.kw-card__err-msg {
  font-family: var(--kw-font-mono);
  font-size: 12px;
  color: var(--kw-fg-muted);
  margin-top: 8px;
  line-height: 1.5;
  word-break: break-word;
}

/* ---- Demoted "already installed" group ---------------------------------- */
.kw-card--muted { opacity: 0.72; }
.kw-card--muted:hover { opacity: 1; }
html.light .kw-card--muted { background: var(--kw-bg-subtle); box-shadow: none; }
html.dark .kw-card--muted { background: rgba(77, 96, 251, 0.04); box-shadow: none; }

.kw-installed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.25rem 0 0.75rem;
}
.kw-installed-head__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--kw-fg-muted);
  margin: 0;
}
.kw-installed-head__title .kw-ico { color: #1B8E5A; }
html.dark .kw-installed-head__title .kw-ico { color: #43D693; }
.kw-installed-head__count {
  font-family: var(--kw-font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--kw-fg-subtle);
}
/* "Installed · vX.Y.Z" footer meta on a muted card. */
.kw-installed-usage { color: #1B8E5A; }
.kw-installed-usage .kw-ico { color: #1B8E5A; }
html.dark .kw-installed-usage,
html.dark .kw-installed-usage .kw-ico { color: #43D693; }

/* ---- Grade segmented filter + search toolbar ---------------------------- */
.kw-avail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.125rem 0 0.875rem;
}
.kw-avail-toolbar .kw-catalog-toolbar__search { flex: 1 1 320px; max-width: 360px; }
.kw-avail-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.kw-toolbar-div {
  width: 1px;
  height: 18px;
  background: var(--kw-border-color);
  margin: 0 4px;
}
.kw-gradeseg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kw-gradeseg__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--kw-font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--kw-radius-pill);
  border: 1px solid var(--kw-border-color);
  background: var(--kw-bg-elevated);
  color: var(--kw-fg-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: 120ms ease;
}
.kw-gradeseg__btn .kw-ico { width: 13px; height: 13px; }
.kw-gradeseg__btn:hover { border-color: var(--kw-blue); color: var(--kw-fg); }
.kw-gradeseg__btn.is-active {
  background: var(--kw-blue);
  border-color: var(--kw-blue);
  color: #fff;
}
.kw-gradeseg__btn.is-active .kw-ico { color: #fff; }
html.dark .kw-gradeseg__btn { background: rgba(77, 96, 251, 0.06); }

/* Two-up grid stacks to a single column on phones (matches .kw-grid-cards--two,
   which already collapses below 768px in primitives.css). */

/* ---- Post-install animation (available_install.js) ---------------------- */
/* Morph flash: a brand-teal "installed" veil + badge laid over the card the
   moment the server confirms, before the clone flies to the sidebar. Inset/
   logical properties only (RTL-safe); motion is transform/opacity only. */
.kw-card--justinstalled { pointer-events: none; }
.kw-card--justinstalled .kw-card__stretch { display: none; }
.kw-acard-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--kw-teal) 14%, transparent);
  outline: 2px solid var(--kw-teal);
  outline-offset: -2px;
  color: var(--kw-teal);
  font-weight: 700;
  font-size: 1rem;
  opacity: 0;
  animation: kw-acard-flash-in 220ms ease forwards;
}
@keyframes kw-acard-flash-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* The flying clone: fixed-position copy of the card; JS sets the start rect
   and the translate/scale target (runtime pixel deltas, not direction-coded). */
.kw-acard-flyclone {
  z-index: 80;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(10, 16, 60, .25);
  transition: transform .75s cubic-bezier(.5, 0, .9, .4), opacity .75s ease;
}

@media (prefers-reduced-motion: reduce) {
  .kw-acard-flash { animation: none; opacity: 1; }
  .kw-acard-flyclone { transition: none; }
}