/* ============================================================================
 * MelóPont — profil- / céglap-megtekintések heti grafikonja (PROFILE-VIEWS-01, 2026.10.13) — előtag: mp-vwk-
 * A profile.html nem tölti a melopont-style.css-t, ezért minden var(--mp-…) mellett tartalék érték.
 * Adat-szín: a néző szerepkör-színe (--mp-role) — nem állapot, ezért nem az --mp-st-* paletta.
 * ========================================================================== */
.mp-vwk-big { margin: 0 0 12px; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-primary, #1D2939); }
.mp-vwk-big b { font-size: calc(20px * var(--mp-fs, 1)); font-weight: 800; }
.mp-vwk-plot { display: grid; gap: 2px; padding: 10px 12px 8px; border-radius: 12px; background: var(--mp-surface-2, #F6F8FB); border: 1px solid var(--mp-line-2, #E3E8EF); }
.mp-vwk-vals { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); text-align: center; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary, #1D2939); }
.mp-vwk-chart { display: block; width: 100%; height: 88px; border-bottom: 1px solid var(--mp-line-1, #D8DEE6); }
.mp-vwk-bar { fill: color-mix(in srgb, var(--mp-role, #0A66C2) 55%, #FFFFFF); }
.mp-vwk-bar.is-now { fill: var(--mp-role, #0A66C2); }
.mp-vwk-zero { fill: var(--mp-line-1, #D8DEE6); }
.mp-vwk-pre { fill: var(--mp-line-1, #D8DEE6); opacity: .6; }
.mp-vwk-axis { display: flex; justify-content: space-between; gap: 8px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); }
.mp-vwk-muted { margin: 10px 0 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-muted, #5B6676); }
.mp-vwk-tip { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45;
  background: var(--mp-tint-role, #EAF3FC); color: var(--mp-text-primary, #1D2939); }