/* アプリカタログ (/apps/) 専用スタイル
   カード装飾は持たせず、区切り線で並べただけの縦リストにしている。
   各アプリの accent は左の細い罫線にだけ使う。 */

/* --- カテゴリ絞り込み --- */

.catalog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
}

.filter-chip {
    color: var(--accent);
    cursor: pointer;
}

.filter-chip.is-active {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

/* --- アプリ一覧 --- */

.catalog-grid {
    display: block;
}

.app-tile {
    padding: 0 0 1.25rem 0.9rem;
    margin-bottom: 1.25rem;
    border-left: 2px solid var(--app-accent, var(--line));
    border-bottom: 1px solid var(--line);
}

.app-tile:last-child {
    margin-bottom: 0;
}

.app-tile.is-filtered {
    display: none;
}

.app-tile-main {
    display: block;
    text-decoration: none;
    color: inherit;
}

.app-tile-badge {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.app-tile-name {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.app-tile-main:hover .app-tile-name {
    color: var(--accent-strong);
}

.app-tile-summary {
    margin: 0 0 0.6rem;
    color: var(--text);
    font-size: 0.98rem;
}

.app-tile-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.92rem;
}

.app-tile-soon {
    color: var(--muted);
}