@charset "UTF-8";
/* App catalog: filters and cards rendered by render_products(). */

/* config/apps.json colors (shared with v1) mapped onto the twelve category colors. */
.product-card.lime { --hue: var(--c-lightgreen); --hue-ink: var(--ink-lightgreen); }
.product-card.purple { --hue: var(--c-lightpurple); --hue-ink: var(--ink-lightpurple); }
.product-card.mint { --hue: var(--c-lightblue); --hue-ink: var(--ink-lightblue); }
.product-card.yellow { --hue: var(--c-yellow); --hue-ink: var(--ink-yellow); }
.product-card.peach { --hue: var(--c-orange); --hue-ink: var(--ink-orange); }
.product-card.pink { --hue: var(--c-pink); --hue-ink: var(--ink-pink); }

.catalog-content { padding-top: clamp(8px, 2vw, 24px); }
.catalog-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--outline-variant); }
.catalog-toolbar h2 { font-size: 13px; letter-spacing: .18em; }
.catalog-toolbar span { font-size: 13px; color: var(--outline); }
.app-filter-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-block: 16px 24px; }
.app-filter-row > p { font-size: 13px; color: var(--outline); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: transparent; border: 1px solid var(--outline-variant); font-size: 14px; font-weight: 700; color: var(--on-surface-variant); transition: background-color .2s, color .2s, border-color .2s; }
.filter:hover { border-color: var(--outline); color: var(--on-surface); }
.filter.active { background: var(--on-surface); border-color: var(--on-surface); color: var(--surface); }
.filter span { font: 600 12px/1 var(--mono); opacity: .75; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.product-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--outline-variant); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--hue) var(--edge), var(--outline-variant)); }
.app-card-top { position: relative; display: grid; justify-items: start; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px 16px; padding: var(--card-space); background: color-mix(in srgb, var(--hue) var(--tint), var(--surface-card)); border-bottom: 1px solid color-mix(in srgb, var(--hue) var(--edge), transparent); }
.app-card-top::after { content: ""; position: absolute; top: 18px; right: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--hue); }
.app-card-top .eyebrow { grid-column: 2; padding-right: 12px; font-family: var(--mono); letter-spacing: .08em; color: var(--hue-ink); }
.app-card-top img { grid-column: 1; grid-row: 1 / 3; width: 56px; height: 56px; padding: 10px; object-fit: contain; border-radius: 0; background: var(--surface-card); box-shadow: var(--shadow); }
.app-card-top p { grid-column: 2; font-size: 13px; font-weight: 700; color: var(--hue-ink); }
.app-card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: var(--card-space); }
.app-card-body h2 { font-size: 21px; letter-spacing: -.02em; }
.app-card-body > p { font-size: 14px; line-height: 1.8; color: var(--on-surface-variant); }
.app-card-body > .app-summary { font-weight: 700; color: var(--on-surface); }
.app-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.app-tags span { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--hue) var(--tint), transparent); border: 1px solid color-mix(in srgb, var(--hue) var(--edge), transparent); }
.app-card-body > .app-availability { margin-top: auto; padding-top: 6px; font: 600 11px/1.6 var(--mono); letter-spacing: .04em; color: var(--outline); }
.app-links { display: flex; flex-wrap: wrap; gap: 8px; }
.app-platform { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--outline-variant); font-size: 13px; font-weight: 700; transition: background-color .2s, border-color .2s, color .2s; }
.app-platform:hover { background: color-mix(in srgb, var(--hue) var(--tint), transparent); border-color: color-mix(in srgb, var(--hue) var(--edge), transparent); color: var(--hue-ink); }
.app-source-note { margin-top: 32px; font-size: 12px; line-height: 1.9; color: var(--outline); }

@media (max-width: 560px) {
  .app-card-top, .app-card-body { padding-inline: var(--card-space); }
  .app-card-top::after { right: 16px; }
  .app-filter-row { align-items: flex-start; flex-direction: column; }
}