/* Primitives & shared UI kit.
 *
 * Page shells (.kw-public, .kw-admin-shell, .kw-detail-body), the section /
 * table / pill / link / empty / page-header primitives, the card grids, and the
 * admin component classes (filters, fields, mono cells, metrics, detail rows,
 * the .kw-acard install card, …). All token-driven so a re-skin is a tokens.css
 * change. Single-component styling lives in the sibling components/*.css files.
 *
 * Brand note: text colours use the semantic --kw-fg / --kw-fg-muted aliases and
 * surfaces use --kw-surface, so every primitive flips correctly between the dark
 * public theme and the light admin theme.
 */

.kw-public {
  display: flex;
  flex-direction: column;
}
.kw-public__main {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* Catalog: sidebar + grid wrapper used inside .kw-public__main */
.kw-layout-with-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .kw-layout-with-sidebar {
    flex-direction: row;
    align-items: flex-start;
  }
  .kw-layout-with-sidebar__content { flex: 1; min-width: 0; }
}

/* Detail-page two-column body (article + right rail) */
.kw-detail-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .kw-detail-body {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
.kw-detail-body__article {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.kw-detail-body__rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Admin shell. align-items:flex-start so the always-dark sidebar can be
   sticky + full viewport height (account block pinned bottom-left) without
   being stretched by the main column. */
.kw-admin-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  background: var(--kw-bg);
}
.kw-admin-main {
  flex: 1;
  min-width: 0;
}
.kw-admin-main__inner {
  max-width: none;
  margin: 0;
  padding: 2rem var(--kw-space-8);
}

/* Admin content topbar: breadcrumb + agent search + Install (sticky). */
.kw-admin-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 62px;
  padding: 0 var(--kw-space-8);
  background: var(--kw-bg-elevated);
  border-bottom: 1px solid var(--kw-border-color);
}
.kw-admin-topbar__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--kw-font-mono);
  font-size: 13px;
  color: var(--kw-fg-subtle);
}
.kw-admin-topbar__crumbs .kw-ico { color: var(--kw-fg-subtle); }
.kw-admin-topbar__here { color: var(--kw-fg); font-weight: 600; }
/* No agent-search field in the topbar; the locale picker carries the
   auto-margin that pushes it + the Install button to the right edge. */
.kw-admin-topbar .langpicker { margin-inline-start: auto; }
.kw-admin-topbar .kw-btn-primary--sm { flex-shrink: 0; }

/* Generic section / surface utility — replaces ad-hoc <section> Tailwind */
.kw-section {
  background: var(--kw-surface);
  border: 1px solid var(--kw-border-color);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--kw-shadow-card);
}
html.dark .kw-section { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); }
.kw-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kw-fg);
  margin: 0 0 1rem 0;
}
.kw-section__lede {
  font-size: 0.875rem;
  color: var(--kw-fg-muted);
  margin: 0 0 1rem 0;
  line-height: 1.6;
}
.kw-section__body { font-size: 0.875rem; color: var(--kw-fg); line-height: 1.6; }

/* Admin tables */
.kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.kw-table thead { background: var(--kw-bg-subtle); color: var(--kw-fg-muted); }
.kw-table thead th {
  text-align: start;
  padding: 0.625rem 0.75rem;
  font-family: var(--kw-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kw-table tbody tr { border-top: 1px solid var(--kw-border-soft); }
.kw-table tbody tr:hover { background: var(--kw-bg-subtle); }
.kw-table td {
  padding: 0.75rem;
  color: var(--kw-fg);
  vertical-align: middle;
}

/* Agent (entity) row chip — a small rounded glyph that sits before a name in a
   .kw-table cell (e.g. the Agent column of the runs table). Brand-blue tint,
   theme-aware (soft on light, glassy on dark) to match .kw-pill--info; the glyph
   takes the chip's text colour (a semantic chip, not a standalone icon), which
   the brand rule allows. */
.kw-row-ico {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
}
.kw-chip-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--kw-radius-sm);
  color: var(--kw-blue);
  background: #EAEDFB;
  border: 1px solid #CBD2F4;
}
html.dark .kw-chip-ico {
  color: var(--kw-soft-lavender);
  background: rgba(77, 96, 251, 0.16);
  border-color: rgba(77, 96, 251, 0.40);
}

/* Status pills inside tables. Tints are theme-aware: soft on light, glassy on
   dark. Icons inside a pill take the pill's text colour (a semantic chip, not a
   standalone icon), which is allowed by the brand rule. */
.kw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--kw-font-mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--kw-radius-pill);
  border: 1px solid;
  font-weight: 600;
}
.kw-pill--ok {
  color: #1B8E5A;
  background: #E6F7EF;
  border-color: #B6E6CF;
}
.kw-pill--err {
  color: #C23434;
  background: #FDECEC;
  border-color: #F4C4C4;
}
.kw-pill--info {
  color: var(--kw-blue);
  background: #EAEDFB;
  border-color: #CBD2F4;
}
.kw-pill--warn {
  color: var(--kw-yellow-ink);
  background: #FEF6DC;
  border-color: #F6E0A0;
}
.kw-pill--beta    { color: #6B43C9; background: #F1ECFB; border-color: #DDD0F4; }
.kw-pill--neutral { color: var(--kw-fg-muted); background: var(--kw-bg-subtle); border-color: var(--kw-border-color); }
/* Dark glassy variants */
html.dark .kw-pill--ok    { color: #36C588; background: rgba(43,182,115,0.14); border-color: rgba(43,182,115,0.35); }
html.dark .kw-pill--err   { color: #FF8A8A; background: rgba(229,69,69,0.12); border-color: rgba(229,69,69,0.34); }
html.dark .kw-pill--info  { color: var(--kw-soft-lavender); background: rgba(77,96,251,0.16); border-color: rgba(77,96,251,0.40); }
html.dark .kw-pill--warn  { color: var(--kw-signal-gold); background: rgba(253,202,19,0.12); border-color: rgba(253,202,19,0.32); }
html.dark .kw-pill--beta  { color: #B79AF2; background: rgba(131,82,232,0.14); border-color: rgba(131,82,232,0.34); }

/* Severity badges (system log). Critical also gets a red left-stripe row. */
.kw-sev {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--kw-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: var(--kw-radius-pill);
  border: 1px solid;
}
.kw-sev--info     { color: #5566D6; background: rgba(77,96,251,0.10); border-color: rgba(77,96,251,0.26); }
.kw-sev--warning  { color: var(--kw-yellow-ink); background: #FEF6DC; border-color: #F6E0A0; }
.kw-sev--error    { color: #C23434; background: #FDECEC; border-color: #F4C4C4; }
.kw-sev--critical { color: #fff; background: var(--kw-red); border-color: var(--kw-red); }
html.dark .kw-sev--info    { color: #9DA8F5; }
html.dark .kw-sev--warning { color: var(--kw-signal-gold); background: rgba(253,202,19,0.10); border-color: rgba(253,202,19,0.3); }
html.dark .kw-sev--error   { color: #FF8A8A; background: rgba(229,69,69,0.12); border-color: rgba(229,69,69,0.34); }
.kw-sev-row--critical td { background: rgba(229,69,69,0.05); }
.kw-sev-row--critical td:first-child { box-shadow: inset 3px 0 0 var(--kw-red); }

/* Inline link */
.kw-link {
  color: var(--kw-link);
  text-decoration: none;
  font-weight: 500;
}
.kw-link:hover { color: var(--kw-link-hover); text-decoration: underline; }

/* Page header — used by both shells */
.kw-page-header {
  margin-bottom: 1.5rem;
}
.kw-page-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kw-fg);
  margin: 0;
}
.kw-page-header__lede {
  font-size: 0.875rem;
  color: var(--kw-fg-muted);
  margin: 0.25rem 0 0 0;
}
/* Header with a right-side badge/action: title block left, action right. */
.kw-page-header--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.kw-page-header--row-top { align-items: flex-start; }

/* Bold inline label (field captions, small headings in admin cards). */
.kw-strong { font-weight: 600; color: var(--kw-fg); }

/* ---- Admin "available agent / bundle" card -------------------------------
   The install-management card on /agents/available (distinct from the public
   marketing kw-card: it lists tools/operations and carries an Install form).
   Built on .kw-section. */
.kw-acard              { display: flex; flex-direction: column; }
.kw-acard--error       { border-color: var(--kw-red); background: color-mix(in srgb, var(--kw-red) 6%, var(--kw-surface)); }
.kw-acard__error-title { font-weight: 600; color: var(--kw-red); }
.kw-acard__error-msg   { font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-red); margin-top: 0.25rem; }
.kw-acard__head        { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.kw-acard__titlewrap   { min-width: 0; }
.kw-acard__title       { font-weight: 700; color: var(--kw-fg); font-size: 1rem; }
.kw-acard__id          { font-family: var(--kw-font-mono); font-size: 0.75rem; color: var(--kw-fg-muted); margin-top: 0.125rem; }
.kw-acard__badges      { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.kw-acard__summary     { margin: 0.75rem 0; flex: 1; }
.kw-acard__specs       { display: flex; flex-direction: column; gap: 0.375rem; }
.kw-acard__spec        { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; }
.kw-acard__spec-label  { color: var(--kw-fg-muted); width: 5rem; flex-shrink: 0; }
.kw-acard__chips       { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.kw-acard__op          { color: var(--kw-link); }
.kw-acard__footer      { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--kw-border-color); display: flex; justify-content: flex-end; }
.kw-acard__view        { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Grid utility used by the public catalog */
.kw-grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .kw-grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .kw-grid-cards { grid-template-columns: repeat(3, 1fr); } }
/* Catalog grid is fluid: column count follows the width left after the 260px
   filter rail (1 → 2 → 3) instead of fighting fixed breakpoints, so a normal
   laptop shows 3-up rather than a sparse 2-up. Scoped to .kw-catalog only;
   the generic .kw-grid-cards above stays as-is for other pages. */
.kw-catalog .kw-grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kw-grid-cards--two   { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .kw-grid-cards--two { grid-template-columns: repeat(2, 1fr); } }
.kw-grid-cards--four  { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .kw-grid-cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kw-grid-cards--four { grid-template-columns: repeat(4, 1fr); } }

/* ---- Admin component primitives -------------------------------------------
   Extracted from inline styles that repeated across the admin templates so the
   markup stays declarative and a restyle is one edit. */

/* Section that wraps a flush table (the table draws its own padding).
 * overflow must stay visible (not hidden) so absolutely-positioned dropdowns
 * inside table rows (e.g. .kw-kebab__menu) are not clipped by this container.
 * The 1px rounded border still frames the table visually. */
.kw-section--flush { padding: 0; }

/* Small monospace metadata (ids, digests, timestamps); compose with .kw-muted. */
.kw-mono-sm { font-family: var(--kw-font-mono); font-size: 0.75rem; }
.kw-muted   { color: var(--kw-fg-muted); }

/* Tiny uppercase captions: filter labels + sidebar metadata keys. */
.kw-filter-label {
  display: block;
  font-family: var(--kw-font-mono);
  font-size: 11px;
  color: var(--kw-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kw-meta-label {
  font-family: var(--kw-font-mono);
  color: var(--kw-fg-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Form control (select / input) in admin filter bars + forms. */
.kw-field {
  width: 100%;
  padding: 0.375rem 0.5rem;
  background: var(--kw-bg-elevated);
  color: var(--kw-fg);
  border: 1px solid var(--kw-border-color);
  border-radius: var(--kw-radius-md);
  font-size: 0.875rem;
}
.kw-field:focus { outline: none; border-color: var(--kw-blue); }
html.dark .kw-field { background: rgba(77,96,251,0.06); border-color: rgba(77,96,251,0.20); color: #fff; }

/* End-aligned (inline-end; flips under RTL) + monospace helpers for table cells. */
.kw-right   { text-align: end; }
.kw-mono    { font-family: var(--kw-font-mono); }

/* Policy-preview list item: inline-start accent rule + indent (replaces the
   physical Tailwind `border-l-2 border-blue-300 pl-2`, which didn't mirror).
   The literal blue matches Tailwind's blue-300 to preserve the prior look. */
.kw-policy-preview__item {
  border-inline-start: 2px solid #93c5fd;
  padding-inline-start: 0.5rem;
}

/* Centered "no rows match" cell inside a .kw-table. */
.kw-table__empty { text-align: center; color: var(--kw-fg-muted); padding: 1.25rem; }

/* Key/value row (detail panes, run summaries). Base has no gap; add --gap. */
.kw-detail-row      { display: flex; justify-content: space-between; }
.kw-detail-row--gap { gap: 0.5rem; }
.kw-detail-row__k   { color: var(--kw-fg-muted); }
.kw-detail-row__v   { font-family: var(--kw-font-mono); margin: 0; }

/* Big metric block (usage totals). */
.kw-metric__value { font-family: var(--kw-font-mono-num); font-size: 2rem; font-weight: 400; color: var(--kw-fg); }
.kw-metric__label { font-family: var(--kw-font-mono); font-size: 0.875rem; color: var(--kw-fg-muted); margin-top: 0.125rem; }