/* Archive explorer (.acx) — finding cards with search/filter/sort.
   Uses ONLY the site tokens from style.css (--card/--ink/--muted/--line/--accent/--tag-bg/
   --shadow/--paper) so both themes come free. The infographic preview embeds the finding's
   rendered .cig block (themed by archetypes.css) scaled down inside a clipped window. */

.acx { margin: 0 0 3rem; }

/* search + sort bar */
.acx-bar { display: flex; gap: 10px; margin: 0.75rem 0 0.9rem; }
.acx-bar input[type="search"] {
  flex: 1; min-width: 0; padding: 10px 14px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.acx-bar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.acx-bar select {
  padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}

/* filter chips */
.acx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 0.6rem; }
.acx-chip {
  font: inherit; font-size: 0.82rem; line-height: 1; cursor: pointer;
  color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 12px;
}
.acx-chip i { font-style: normal; opacity: 0.55; margin-left: 3px; font-size: 0.74rem; }
.acx-chip:hover { border-color: var(--accent); color: var(--ink); }
.acx-chip.on {
  color: var(--accent-ink); background: var(--tag-bg);
  border-color: var(--accent); font-weight: 600;
}
.acx-chip.acx-kind { text-transform: capitalize; }

.acx-count { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 1rem; }

/* The digest stylesheet caps every <main> at 58rem (928px). The archive is a wide card
   grid, not a reading column, so it matches the 1180px shell the home page and /trends
   use. Safe to scope here: archive.css is loaded ONLY by archive.html. */
main { max-width: 1180px; }

/* card grid — pinned to 3 across (was auto-fill, which gave 2 at the old 928px cap) */
.acx-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 1040px) { .acx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acx-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 15px; box-shadow: var(--shadow);
  color: inherit; text-decoration: none;
}
.acx-card:hover { border-color: var(--accent); }
.acx-card .acx-head { display: flex; align-items: center; gap: 8px; }
.acx-card .acx-date { color: var(--muted); font-size: 0.76rem; margin-left: auto; white-space: nowrap; }
.acx-card h3 { margin: 0; font-size: 0.98rem; line-height: 1.3; color: var(--ink); }
.acx-card .acx-tldr {
  margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.acx-card .acx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.acx-card .acx-tag {
  font-size: 0.72rem; color: var(--accent-ink); background: var(--tag-bg);
  border-radius: 999px; padding: 3px 9px;
}

/* kind badge — one hue per kind, light/dark pairs (mirrors .tag.latest's pattern) */
.acx-badge {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 6px; padding: 4px 8px; line-height: 1; flex: none;
}
.acx-badge.k-tool      { background: #def3e6; color: #1d7a45; }
.acx-badge.k-repo      { background: #e8eefc; color: #2c54c4; }
.acx-badge.k-technique { background: #f3e8fd; color: #7a3bbf; }
.acx-badge.k-tip       { background: #fdeccd; color: #8a5a12; }
.acx-badge.k-paper     { background: #fde3e3; color: #b03434; }
.acx-badge.k-note      { background: var(--tag-bg); color: var(--muted); }
html[data-theme="dark"] .acx-badge.k-tool      { background: #14361f; color: #5fd391; }
html[data-theme="dark"] .acx-badge.k-repo      { background: #243049; color: #9db8ff; }
html[data-theme="dark"] .acx-badge.k-technique { background: #2e2140; color: #c79bf2; }
html[data-theme="dark"] .acx-badge.k-tip       { background: #3a2c10; color: #e0b167; }
html[data-theme="dark"] .acx-badge.k-paper     { background: #3d1c1c; color: #f09c9c; }

/* infographic preview — the finding's .cig rendered at a fixed inner width and scaled to fit,
   clipped with a bottom fade so tall archetypes stay card-sized */
.acx-prev {
  position: relative; height: 178px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
}
.acx-previnner { width: 560px; transform-origin: top left; padding: 10px 12px; }
.acx-prev::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: linear-gradient(180deg, transparent, var(--paper));
  pointer-events: none;
}

.acx-more { text-align: center; margin: 1.2rem 0; }
.acx-more button {
  font: inherit; cursor: pointer; color: var(--accent-ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 22px;
}
.acx-more button:hover { border-color: var(--accent); }

.acx-bydate { margin-top: 0.5rem; }
/* (the ?f= deep-link highlight lives in nav.css — it must load on the frozen edition pages) */

@media (max-width: 640px) {
  .acx-bar { flex-direction: column; }
  .acx-grid { grid-template-columns: 1fr; }
}