/* Apps page components. Page-scoped; built only from tokens in styles.css (design.md > Page patterns > Apps). */
.app-feature { display: grid; gap: 1.75rem 3rem; align-items: center; }
@media (min-width: 900px) { .app-feature { grid-template-columns: minmax(0, 1fr) auto; } }
.app-shots { display: flex; gap: 1rem; }
.app-shots picture { flex: 0 1 15rem; min-width: 0; }
.app-shots img { width: 100%; height: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-ink); }
.app-grid { grid-template-columns: 1fr; }
@media (min-width: 800px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.app-head > div { min-width: 0; }
.app-head h2, .app-head h3 { margin: 0; font-size: 1.375rem; }
.app-feature .app-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.app-cover-img { flex: none; width: 72px; height: auto; border: 1px solid var(--color-border); border-radius: 2px; }
.app-checks { list-style: none; margin: 0 0 1.25rem; padding: 0; color: var(--color-ink-soft); }
.app-checks li { position: relative; padding-left: 1.1rem; margin-bottom: 0.35rem; }
.app-checks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 2px; background: var(--color-primary); }
.app-icon-img { flex: none; width: 72px; height: 72px; border-radius: 22%; border: 1px solid var(--color-border); }
.app-tagline { margin: 0.2rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-ink-soft); }
.app-summary { color: var(--color-ink-soft); margin-bottom: 1rem; }
.app-platforms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.status-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 600; line-height: 1.4; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-ink-soft); background: var(--color-paper); }
.status-badge svg { width: 12px; height: 12px; flex: none; }
.badge-live { color: var(--color-success); border-color: currentColor; background: #fff; }
.app-more { margin-bottom: 1.25rem; font-size: 0.9375rem; }
.app-more summary { cursor: pointer; font-weight: 600; color: var(--color-ink); padding: 0.4rem 0; }
.app-more ul { margin: 0.5rem 0 0 1.1rem; color: var(--color-ink-soft); }
.app-more li { margin-bottom: 0.3rem; }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: auto; }
.app-actions a:not(.btn) { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.app-note { margin: 0 0 1rem; font-size: 0.875rem; font-style: italic; color: var(--color-ink-soft); }