/* Public-site skin over the personal dashboard's style.css: same palette as the main page. */
:root {
    --bg: #f7f8f7; --card: #ffffff; --text: #1d1f1e; --muted: #5d6662; --line: #e3e7e4;
    --accent: #2f6b1f; --chip: #f0f2f0;
    --accent-easy: #0f9d7a; --accent-medium: #c98a00; --accent-hard: #d6284b;
    --text-main: var(--text); --text-muted: var(--muted); --border-glass: var(--line);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111513; --card: #181d1a; --text: #eef1ee; --muted: #9aa5a0; --line: #2a312d;
        --accent: #a8dc80; --chip: #222925;
        --accent-easy: #10b981; --accent-medium: #f59e0b; --accent-hard: #ef4444;
    }
}

body {
    background: var(--bg);
    background-image: none;
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    line-height: 1.5;
    padding: 32px 16px 48px;
}
.container { max-width: 960px; }

.glass-panel {
    background: var(--card);
    border: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 14px;
}
.glass-panel:hover { border-color: var(--line); }

h2 { color: var(--text); font-size: 1.05rem; }
a { color: var(--accent); }

/* Navigation */
.top-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.top-nav a { text-decoration: none; }
.top-nav .spacer { flex: 1; }
.lang-btn {
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    padding: 4px 10px; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem;
}
.lang-btn.active { border-color: var(--line); color: var(--text); background: var(--card); }

/* Header */
.profile-header { display: block; margin-bottom: 1.25rem; }
.profile-header-top { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.profile-info h1 {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
}
.profile-link { margin-top: 0.25rem; font-size: 0.85rem; }
.profile-link a { text-decoration: none; }
.stat-box { background: var(--chip); border-color: var(--line); min-width: 88px; }
/* Both halves need real width: below ~640px the rank chart wraps under the title */
.header-left { flex: 1 1 300px; }
.header-right { flex: 1 1 300px; margin-top: 0; align-items: stretch; }
.rank-chart-container { width: 100%; height: 70px; }
#rank-current-label { color: var(--accent); font-weight: 700; }
.rank-legend { font-size: 0.75rem; color: var(--muted); margin-top: 6px; }
.timeframe-filters button:hover, .timeframe-filters button.active { color: var(--text); background: var(--chip); }
.profile-header-bottom { border-top: 1px solid var(--line); margin-top: 0.75rem; padding-top: 0.75rem; }
.header-badges { margin-top: 0; }
.header-badges .badge-item:hover { background: var(--chip); border-color: var(--line); }
.badge-tooltip strong { color: #fbbf24; }
.badge-tooltip { color: #e2e8f0; }

/* Insights */
.insights-panel { margin-bottom: 1.25rem; }
.how-panel.standalone { margin-bottom: 1.25rem; }
.insights { list-style: none; display: grid; gap: 10px; }
.insights li { padding-left: 12px; border-left: 3px solid var(--accent); }

/* Grid: topic bars across the full width, then the language donut and the radar side by side */
.dashboard-grid { gap: 1.25rem; }
.data-panel { grid-column: span 12; }
.data-panel .radar-container { height: 240px; }
.bars-panel, .how-panel { grid-column: span 12; }
/* Grid and flex children must be allowed to shrink below their content (canvases, long labels) */
.glass-panel, .header-left, .header-right { min-width: 0; }
@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .dashboard-grid > section { grid-column: auto !important; }
    .glass-panel { padding: 1rem; }
}

.note { color: var(--muted); font-size: 0.85rem; }
.radar-container { height: 300px; }
#topicChart { transform: none; }

.bars-container { position: relative; width: 100%; }
.link-btn {
    background: none; border: none; color: var(--accent); cursor: pointer;
    font: inherit; font-size: 0.9rem; padding: 6px 0 0;
}

.pipeline { list-style: none; display: grid; gap: 8px; }
.pipeline li { background: var(--chip); border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; }
.pipeline li span { color: var(--muted); }
.pipeline li b span { color: inherit; }
@media (min-width: 769px) {
    .pipeline { grid-template-columns: repeat(4, 1fr); }
}

footer { margin-top: 2rem; }