/* ── PhantastikCharts – seitenspezifisches CSS für autor.php ──────────────
   Ausgelagert aus dem früheren Inline-<style>-Block (Aufräumaktion 2026-08-22),
   damit der Browser diese Datei über Page-Loads hinweg cachen kann (per <link>
   + asset_url()-Cache-Busting eingebunden, wie assets/style.css). */

.page-wrap { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem; }

/* ── Autor-Header ───────────────────────────────────────── */
.author-hero {
    background: #fff; border: 1px solid #e0e0d8; border-radius: 8px;
    padding: 1.5rem; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 1.25rem;
}
.author-photo {
    width: 80px; height: 80px; border-radius: 50%;
    background: #e8e8e0; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #ccc; overflow: hidden;
}
.author-photo img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-size: 1.5rem; font-weight: 800; }
.author-sub { font-size: 0.82rem; color: #aaa; margin-top: 0.2rem; }

/* ── Chart-Zeile ────────────────────────────────────────── */
.chart-row {
    display: grid;
    grid-template-columns: 40px 50px 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0e8;
    min-height: 68px;
}
.chart-row:last-child { border-bottom: none; }
.chart-row a:hover .row-title { color: #c0392b; }

.row-rank { font-size: 1.2rem; font-weight: 800; color: #ccc; text-align: center; }
.row-rank.top { color: #c0392b; }
/* .row-cover/.row-cover-empty: siehe .cover-thumb/-empty + .cover-thumb-40 +
   .cover-thumb-muted in assets/style.css (Aufräumaktion 2026-08-22). */

.row-info { min-width: 0; }
.row-title { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 0.75rem; color: #aaa; margin-top: 0.15rem; }

.row-right { text-align: right; flex-shrink: 0; }
.pts-main { font-size: 0.88rem; font-weight: 700; }
.pts-sub { font-size: 0.72rem; color: #aaa; }

/* Balkendiagramm All-Time */
.bar-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0e8;
    min-height: 64px;
}
.bar-row:last-child { border-bottom: none; }
.bar-row a:hover .row-title { color: #c0392b; }
/* .bar-cover/.bar-cover-empty: siehe .cover-thumb/-empty + .cover-thumb-40 +
   .cover-thumb-muted in assets/style.css (Aufräumaktion 2026-08-22). */
.bar-info { min-width: 0; }
.bar-wrap { background: #f0f0e8; border-radius: 3px; height: 8px; margin-top: 0.35rem; overflow: hidden; }
.bar-fill { background: #c0392b; height: 100%; border-radius: 3px; }
.bar-right { text-align: right; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 480px) {
    .chart-row { grid-template-columns: 32px 42px 1fr auto; }
    .bar-row { grid-template-columns: 42px 1fr auto; }
}