/* Shared app controls: explicit native reset, consistent targets, clear selection. */
.app-filters {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #22231f;
}
.app-filters button,
.app-metric-toggle button,
.apps-expand {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.app-filters button {
    min-width: 58px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.app-filters button:hover { background: #30312a; color: var(--fg); }
.app-filters button[aria-pressed="true"] {
    background: var(--accent);
    color: #24281f;
    border-color: var(--accent);
}
.app-metric-toggle { gap: 24px; }
.app-metric-toggle button {
    min-height: 44px;
    padding: 11px 2px;
    font-size: 13px;
    font-weight: 500;
}
.app-metric-toggle button:hover { color: var(--fg); }
.apps-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: fit-content;
    min-width: 220px;
    min-height: 46px;
    margin: 24px auto 20px;
    padding: 12px 20px;
    border: 1px solid #4a4c40;
    border-radius: 10px;
    background: #25261f;
    color: var(--fg);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.apps-expand span { margin: 0; color: var(--accent); font-size: 16px; }
.apps-expand:hover { background: #33362a; border-color: var(--accent); }
.apps-expand[hidden] { display: none; }
.app-filters button:focus-visible,
.app-metric-toggle button:focus-visible,
.apps-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 520px) {
    .app-filters { width: 100%; }
    .app-filters button { flex: 1; min-height: 44px; }
    .app-list-head { align-items: stretch; gap: 15px; }
    .apps-expand { width: 100%; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-filters button, .app-metric-toggle button, .apps-expand { transition: none; }
}

/* Compact rankings: keep useful detail while reducing repeated vertical space. */
.apps-page .apps-intro-hero { padding: 24px 0 22px; }
.apps-page .back-home { margin-bottom: 22px; }
.apps-page .apps-intro-hero h1 { font-size: 48px; margin: 14px 0; }
.apps-page .apps-intro-hero > p:last-child { font-size: 14px; line-height: 1.65; margin-bottom: 4px; }
.apps-page .app-stats { padding: 19px 0; margin-bottom: 24px; }
.apps-page .app-stats strong { font-size: 34px; letter-spacing: -1px; }
.apps-page .app-stats span { margin-top: 5px; }
.apps-page .sales-highlight { margin-bottom: 13px; font-size: 12px; }
.apps-page .app-metric-toggle { margin-bottom: 13px; }
.apps-page .app-list-head { margin-bottom: 8px; }
.apps-page .app-row { padding: 10px 0; min-height: 62px; gap: 16px; }
.apps-page .app-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 14px; }
.apps-page .app-name { font-size: 13px; line-height: 1.5; }
.apps-page .app-platform { font-size: 10px; margin: 0; white-space: nowrap; }
.apps-page .app-bar { grid-column: 1 / -1; margin-top: 7px; height: 2px; }
.apps-page .app-units { font-size: 15px; }
.apps-page .app-units small { font-size: 9px; line-height: 1.5; }
.apps-page .app-rank { font-size: 10px; }
.apps-page .apps-expand { margin-top: 16px; margin-bottom: 13px; }
.app-methodology { margin-top: 14px; color: var(--muted); font-size: 11px; }
.app-methodology summary { cursor: pointer; width: fit-content; padding: 5px 0; }
.app-methodology summary:hover { color: var(--fg); }
.app-methodology summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.app-methodology .app-source { margin-top: 7px; }
.apps-page .apps-end { margin: 30px 0 38px; }
@media (max-width: 520px) {
    .apps-page .apps-intro-hero h1 { font-size: 38px; }
    .apps-page .app-stats strong { font-size: 28px; }
    .apps-page .app-row { gap: 10px; padding: 9px 0; min-height: 66px; }
    .apps-page .app-info { grid-template-columns: minmax(0, 1fr); }
    .apps-page .app-platform { font-size: 9px; line-height: 1.5; }
    .apps-page .app-bar { margin-top: 5px; }
    .apps-page .app-name { font-size: 12px; }
    .apps-page .app-units { font-size: 14px; }
}